Function ConversationTabsView

src/components/ConversationTabsView.tsx:57–129

()

};

const ConversationTabsView = () => {
  const { t } = useTranslation();
  const layoutStore = useLayoutStore();
  const connectionStore = useConnectionStore();
  const conversationStore = useConversationStore();
  const [updateConversationModalContext, setUpdateConversationModalContext] = useState<Conversation | undefined>(undefined);
  const currentConnectionCtx = connectionStore.currentConnectionCtx;
  const conversationList = conversationStore.conversationList.filter(
    (conversation) =>
      conversation.connectionId === currentConnectionCtx?.connection.id &&
      conversation.databaseName === currentConnectionCtx?.database?.name
  );

  const handleCreateConversation = () => {
    if (!currentConnectionCtx) {
      conversationStore.createConversation();
    } else {
      conversationStore.createConversation(currentConnectionCtx.connection.id, currentConnectionCtx.database?.name);
    }
  };

  const handleConversationClick = (conversation: Conversation) => {
    conversationStore.setCurrentConversationId(conversation.id);
    if (layoutStore.isMobileView) {
      layoutStore.toggleSidebar(false);
    }
  };

  const handleEditConversation = (conversation: Conversation) => {
    setUpdateConversationModalContext(conversation);
  };

  const handleDeleteConversation = (conversation: Conversation) => {
    conversationStore.clearConversation((item) => item.id !== conversation.id);
    if (conversationStore.currentConversationId === conversation.id) {
      conversationStore.setCurrentConversationId(undefined);
    }
  };

  return (
    <>
      <div className="w-full flex flex-row justify-start items-center flex-nowrap px-4 mt-1">
        <div className="w-auto flex flex-row justify-start items-center overflow-x-auto py-1 gap-x-2">
          {conversationList.map((conversation) => {
            return (
              <ConversationTab
                key={conversation.id}
                conversation={conversation}
                selected={conversation.id === conversationStore.currentConversationId}
                onClick={handleConversationClick}
                onEdit={handleEditConversation}
                onDelete={handleDeleteConversation}
              />
            );
          })}
        </div>
        <div className={`shrink-0 my-2 ${conversationList.length > 0 && "ml-2"}`}>
          <button