Merge pull request #2063 from Ekep-Obasi/feat/move-ai-chat-to-sidebar

feat: move ai chat to sidebar menu

src/components/App/ActionsToolbar/index.tsx

@@ -1,29 +1,21 @@
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
-import { useHasAiChatsResponseLoading } from '~/stores/useAiSummaryStore'
 import { useAppStore } from '~/stores/useAppStore'
 import { useDataStore } from '~/stores/useDataStore'
-import { useFeatureFlagStore } from '~/stores/useFeatureFlagStore'
 import { useSelectedNode } from '~/stores/useGraphStore'
 import { CameraRecenterControl } from './CameraRecenterControl'
 import { GraphViewControl } from './GraphViewControl'
 import { PlayerControl } from './PlayerControl'
-import { UniverseQuestionControl } from './UniverseQuestionControl'
 
 export const ActionsToolbar = () => {
   const selectedNode = useSelectedNode()
   const isLoading = useDataStore((s) => s.isFetching)
   const universeQuestionIsOpen = useAppStore((s) => s.universeQuestionIsOpen)
-  const chatInterfaceFeatureFlag = useFeatureFlagStore((s) => s.chatInterfaceFeatureFlag)
-  const newQuestionInProgress = useHasAiChatsResponseLoading()
 
   return (
     <Wrapper align="flex-end" id="actions-toolbar">
       {!isLoading && !universeQuestionIsOpen && <CameraRecenterControl />}
       <Flex align="center" direction="row" mt={16}>
-        {!newQuestionInProgress && !isLoading && chatInterfaceFeatureFlag && !universeQuestionIsOpen && (
-          <UniverseQuestionControl />
-        )}
         {!isLoading && !universeQuestionIsOpen && <GraphViewControl />}
       </Flex>
       <PlayerControl key={selectedNode?.ref_id} />

src/components/App/MainToolbar/index.tsx

@@ -4,11 +4,13 @@ import AddContentIcon from '~/components/Icons/AddContentIcon'
 import AddSourceIcon from '~/components/Icons/AddSourceIcon'
 import CommunitiesIcon from '~/components/Icons/CommunitiesIcon'
 import FeedbackIcon from '~/components/Icons/FeedbackIcon'
+import MenuIcon from '~/components/Icons/MenuIcon'
 import SettingsIcon from '~/components/Icons/SettingsIcon'
 import SourcesTableIcon from '~/components/Icons/SourcesTableIcon'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
 import { useAiSummaryStore } from '~/stores/useAiSummaryStore'
+import { useAppStore } from '~/stores/useAppStore'
 import { useDataStore } from '~/stores/useDataStore'
 import { useFeatureFlagStore } from '~/stores/useFeatureFlagStore'
 import { useModal } from '~/stores/useModalStore'
@@ -27,8 +29,8 @@ export const MainToolbar = () => {
 
   const { resetAiSummaryAnswer, setNewLoading } = useAiSummaryStore()
   const { abortFetchData } = useDataStore((s) => s)
-  const customSchemaFeatureFlag = useFeatureFlagStore((s) => s.customSchemaFeatureFlag)
-  const userFeedbackFeatureFlag = useFeatureFlagStore((s) => s.userFeedbackFeatureFlag)
+  const { setUniverseQuestionIsOpen, setSidebarOpen, setShowCollapseButton, sidebarIsOpen } = useAppStore((s) => s)
+  const { customSchemaFeatureFlag, userFeedbackFeatureFlag, chatInterfaceFeatureFlag } = useFeatureFlagStore((s) => s)
 
   const [isAdmin] = useUserStore((s) => [s.isAdmin])
   const sphinxEnabled = isSphinx()
@@ -40,11 +42,25 @@ export const MainToolbar = () => {
     navigate('/')
   }
 
+  const handleOpenChatModal = () => {
+    setUniverseQuestionIsOpen()
+    setSidebarOpen(!sidebarIsOpen)
+    setShowCollapseButton(false)
+  }
+
   return (
     <Wrapper>
       <LogoButton onClick={handleLogoClick}>
         <img alt="Second brain" src="logo.svg" />
       </LogoButton>
+      {chatInterfaceFeatureFlag ? (
+        <ActionButton onClick={handleOpenChatModal}>
+          <IconWrapper>
+            <MenuIcon />
+          </IconWrapper>
+          <Text>New Chat</Text>
+        </ActionButton>
+      ) : null}
       {isAdmin ? (
         <ActionButton data-testid="add-item-modal" onClick={openItemAddModal}>
           <IconWrapper>