Merge pull request #2015 from Shoaibdev7/Ensure-Home-Button-is-Always…

…-Clickable

[AI Chat]: Ensure `Home Button` and `LOGO` is Always Clickable for Navigation

src/components/App/MainToolbar/index.tsx

@@ -9,6 +9,7 @@ import SourcesTableIcon from '~/components/Icons/SourcesTableIcon'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
 import { useAiSummaryStore } from '~/stores/useAiSummaryStore'
+import { useDataStore } from '~/stores/useDataStore'
 import { useFeatureFlagStore } from '~/stores/useFeatureFlagStore'
 import { useModal } from '~/stores/useModalStore'
 import { useUserStore } from '~/stores/useUserStore'
@@ -24,14 +25,17 @@ export const MainToolbar = () => {
   const { open: openFeedbackModal } = useModal('feedback')
   const navigate = useNavigate()
 
-  const { resetAiSummaryAnswer } = useAiSummaryStore()
+  const { resetAiSummaryAnswer, setNewLoading } = useAiSummaryStore()
+  const { abortFetchData } = useDataStore((s) => s)
   const customSchemaFeatureFlag = useFeatureFlagStore((s) => s.customSchemaFeatureFlag)
   const userFeedbackFeatureFlag = useFeatureFlagStore((s) => s.userFeedbackFeatureFlag)
 
   const [isAdmin] = useUserStore((s) => [s.isAdmin])
   const sphinxEnabled = isSphinx()
 
   const handleLogoClick = () => {
+    setNewLoading(null)
+    abortFetchData()
     resetAiSummaryAnswer()
     navigate('/')
   }

src/components/App/SideBar/AiView/index.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import ArrowBackIcon from '~/components/Icons/ArrowBackIcon'
 import { Flex } from '~/components/common/Flex'
 import { useAiSummaryStore } from '~/stores/useAiSummaryStore'
+import { useDataStore } from '~/stores/useDataStore'
 import { colors } from '~/utils/colors'
 import { AiSearch } from '../AiSearch'
 import { AiSummary } from '../AiSummary'
@@ -12,15 +13,18 @@ export const MENU_WIDTH = 390
 
 // eslint-disable-next-line react/display-name
 export const AiView = () => {
-  const { aiSummaryAnswers, resetAiSummaryAnswer, newLoading } = useAiSummaryStore((s) => s)
+  const { aiSummaryAnswers, resetAiSummaryAnswer, newLoading, setNewLoading } = useAiSummaryStore((s) => s)
+  const { abortFetchData } = useDataStore((s) => s)
+
+  const navigate = useNavigate()
 
   const handleCloseAi = () => {
+    setNewLoading(null)
+    abortFetchData()
     resetAiSummaryAnswer()
     navigate('/')
   }
 
-  const navigate = useNavigate()
-
   return (
     <Wrapper>
       <Flex align="flex-start">

src/stores/useDataStore/index.ts

@@ -72,6 +72,7 @@ export type DataStore = {
   nextPage: () => void
   setFilters: (filters: Partial<FilterParams>) => void
   setSeedQuestions: (questions: string[]) => void
+  abortFetchData: () => void
 }
 
 const defaultData: Omit<
@@ -244,6 +245,13 @@ export const useDataStore = create<DataStore>()(
         }
       }
     },
+
+    abortFetchData: () => {
+      if (abortController) {
+        abortController.abort('abort')
+      }
+    },
+
     setPage: (page: number) => set({ currentPage: page }),
     nextPage: () => {
       const { currentPage, fetchData } = get()