export function ConversationView()

in apps/chat/src/components/Chatbar/Conversation.tsx [63:192]
123 lines of code
29 McCabe index (conditional complexity)

export function ConversationView({
  conversation,
  isHighlighted,
  isChosen = false,
  isSelectMode,
  additionalItemData,
  isContextMenu,
}: ViewProps) {
  const { t } = useTranslation(Translation.Chat);

  const modelsMap = useAppSelector(ModelsSelectors.selectModelsMap);
  const selectedPublicationUrl = useAppSelector(
    PublicationSelectors.selectSelectedPublicationUrl,
  );
  const resourceToReview = useAppSelector((state) =>
    PublicationSelectors.selectResourceToReviewByReviewAndPublicationUrls(
      state,
      conversation.id,
      additionalItemData?.publicationUrl,
    ),
  );
  const selectedConversationIds = useAppSelector(
    ConversationsSelectors.selectSelectedConversationsIds,
  );

  const handleToggle = useCallback(() => {
    ConversationsActions.setChosenConversations({
      ids: [conversation.id],
    });
  }, [conversation.id]);

  const isNameInvalid = isEntityNameInvalid(conversation.name);
  const isInvalidPath = hasInvalidNameInPath(conversation.folderId);
  const isNameOrPathInvalid = isNameInvalid || isInvalidPath;
  const isPartOfSelectedPublication =
    !additionalItemData?.publicationUrl ||
    selectedPublicationUrl === additionalItemData?.publicationUrl;

  const iconSize = additionalItemData?.isSidePanelItem ? 24 : 18;
  const strokeWidth = additionalItemData?.isSidePanelItem ? 1.5 : 2;
  const isExternal = isEntityIdExternal(conversation);

  return (
    <>
      <div
        className={classNames(
          'relative',
          additionalItemData?.isSidePanelItem
            ? 'size-[24px] items-center justify-center'
            : 'size-[18px]',
          isSelectMode && !isExternal && 'shrink-0 group-hover:flex',
          isSelectMode && isChosen && !isExternal ? 'flex' : 'hidden',
        )}
      >
        <input
          className={classNames(
            'checkbox peer size-[18px] bg-layer-3',
            additionalItemData?.isSidePanelItem && 'mr-0',
          )}
          type="checkbox"
          checked={isChosen}
          onChange={handleToggle}
          data-qa={isChosen ? 'checked' : 'unchecked'}
        />
        <IconCheck
          size={18}
          className="pointer-events-none invisible absolute text-accent-primary peer-checked:visible"
        />
      </div>
      <ShareIcon
        {...conversation}
        isHighlighted={isHighlighted}
        featureType={FeatureType.Chat}
        containerClassName={classNames(
          isSelectMode && !isExternal && 'group-hover:hidden',
          isChosen && !isExternal && 'hidden',
        )}
      >
        {resourceToReview && !resourceToReview.reviewed && (
          <ReviewDot
            className={classNames(
              'group-hover:bg-accent-secondary-alpha',
              (selectedConversationIds.includes(conversation.id) ||
                isContextMenu) &&
                isPartOfSelectedPublication &&
                'bg-accent-secondary-alpha',
            )}
          />
        )}
        {conversation.isReplay && (
          <span className="flex shrink-0">
            <ReplayAsIsIcon size={iconSize} />
          </span>
        )}

        {conversation.isPlayback && (
          <span className="flex shrink-0">
            <PlaybackIcon strokeWidth={strokeWidth} size={iconSize} />
          </span>
        )}

        {!conversation.isReplay && !conversation.isPlayback && (
          <ModelIcon
            size={iconSize}
            entityId={conversation.model.id}
            entity={modelsMap[conversation.model.id]}
          />
        )}
      </ShareIcon>
      <div className="relative max-h-5 flex-1 truncate whitespace-pre break-all text-left">
        <Tooltip
          tooltip={t(
            getEntityNameError(isNameInvalid, isInvalidPath, isExternal),
          )}
          hideTooltip={!isNameOrPathInvalid}
          triggerClassName={classNames(
            'block max-h-5 flex-1 truncate whitespace-pre break-all text-left',
            conversation.publicationInfo?.isNotExist && 'text-secondary',
            !!additionalItemData?.publicationUrl &&
              conversation.publicationInfo?.action === PublishActions.DELETE &&
              'text-error',
          )}
          dataQa="entity-name"
        >
          {conversation.name}
        </Tooltip>
      </div>
    </>
  );
}