Merge pull request #1863 from MahtabBukhari/follow_up_search_bar

update changes in follow-up search bar

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

@@ -6,13 +6,17 @@ import { Flex } from '~/components/common/Flex'
 import { useDataStore } from '~/stores/useDataStore'
 import { useUserStore } from '~/stores/useUserStore'
 import { colors } from '~/utils'
+import { useHasAiChatsResponse } from '~/stores/useAiSummaryStore'
+import { ClipLoader } from 'react-spinners'
 
 export const AiSearch = () => {
   const form = useForm<{ search: string }>({ mode: 'onChange' })
   const { fetchData, setAbortRequests } = useDataStore((s) => s)
   const { setBudget } = useUserStore((s) => s)
   const { reset } = form
 
+  const isLoading = useHasAiChatsResponse()
+
   const handleSubmit = form.handleSubmit(({ search }) => {
     if (search.trim() === '') {
       return
@@ -26,14 +30,18 @@ export const AiSearch = () => {
     <AiSearchWrapper>
       <FormProvider {...form}>
         <Search>
-          <SearchBar onSubmit={handleSubmit} placeholder="Ask follow-up" />
+          <SearchBar loading={isLoading} onSubmit={handleSubmit} placeholder="Ask follow-up" />
           <InputButton
             data-testid="search-ai_action_icon"
             onClick={() => {
+              if (isLoading) {
+                return
+              }
+
               handleSubmit()
             }}
           >
-            <SearchIcon />
+            {!isLoading ? <SearchIcon /> : <ClipLoader color={colors.lightGray} data-testid="loader" size="20" />}
           </InputButton>
         </Search>
       </FormProvider>

src/components/SearchBar/index.tsx

@@ -70,7 +70,6 @@ export const SearchBar = ({ loading, placeholder = 'Search', onSubmit }: Props)
       {...register('search')}
       disabled={loading}
       id="main-search"
-      loading={loading}
       onKeyPress={(event) => {
         if (event.key === 'Enter') {
           if (typing.trim() === '') {

src/stores/useAiSummaryStore/index.ts

@@ -56,3 +56,10 @@ export const useAiSummaryStore = create<AiSummaryStore>()(
 )
 
 export const useHasAiChats = () => useAiSummaryStore((s) => !isEmpty(s.aiSummaryAnswers))
+
+export const useHasAiChatsResponse = () =>
+  useAiSummaryStore((s) => {
+    const answers = s.aiSummaryAnswers
+
+    return Object.values(answers).at(-1)?.answerLoading
+  })