fix: show generate response on message send (#1895)

* fix: show generate response on message send

* chore: typo

web/containers/Providers/EventHandler.tsx

@@ -61,9 +61,8 @@ export default function EventHandler({ children }: { children: ReactNode }) {
   const onNewMessageResponse = useCallback(
     (message: ThreadMessage) => {
       addNewMessage(message)
-      setIsGeneratingResponse(false)
     },
-    [addNewMessage, setIsGeneratingResponse]
+    [addNewMessage]
   )
 
   const onModelReady = useCallback(
@@ -114,8 +113,10 @@ export default function EventHandler({ children }: { children: ReactNode }) {
         message.status
       )
       if (message.status === MessageStatus.Pending) {
-        if (message.content.length)
+        if (message.content.length) {
           updateThreadWaiting(message.thread_id, false)
+          setIsGeneratingResponse(false)
+        }
         return
       }
       // Mark the thread as not waiting for response

web/hooks/useCreateNewThread.ts

@@ -7,7 +7,7 @@ import {
   ThreadState,
   Model,
 } from '@janhq/core'
-import { atom, useAtomValue, useSetAtom } from 'jotai'
+import { atom, useSetAtom } from 'jotai'
 
 import { selectedModelAtom } from '@/containers/DropdownListSidebar'
 import { fileUploadAtom } from '@/containers/Providers/Jotai'

web/hooks/useSendChatMessage.ts

@@ -39,6 +39,7 @@ import {
   activeThreadAtom,
   engineParamsUpdateAtom,
   getActiveThreadModelParamsAtom,
+  isGeneratingResponseAtom,
   updateThreadAtom,
   updateThreadWaitingForResponseAtom,
 } from '@/helpers/atoms/Thread.atom'
@@ -57,7 +58,7 @@ export default function useSendChatMessage() {
   const { activeModel } = useActiveModel()
   const selectedModel = useAtomValue(selectedModelAtom)
   const { startModel } = useActiveModel()
-  const [queuedMessage, setQueuedMessage] = useAtom(queuedMessageAtom)
+  const setQueuedMessage = useSetAtom(queuedMessageAtom)
   const loadModelFailed = useAtomValue(loadModelErrorAtom)
 
   const modelRef = useRef<Model | undefined>()
@@ -68,6 +69,7 @@ export default function useSendChatMessage() {
   const setEngineParamsUpdate = useSetAtom(engineParamsUpdateAtom)
   const setReloadModel = useSetAtom(reloadModelAtom)
   const [fileUpload, setFileUpload] = useAtom(fileUploadAtom)
+  const setIsGeneratingResponse = useSetAtom(isGeneratingResponseAtom)
 
   useEffect(() => {
     modelRef.current = activeModel
@@ -82,6 +84,7 @@ export default function useSendChatMessage() {
       console.error('No active thread')
       return
     }
+    setIsGeneratingResponse(true)
     updateThreadWaiting(activeThread.id, true)
     const messages: ChatCompletionMessage[] = [
       activeThread.assistants[0]?.instructions,
@@ -132,6 +135,7 @@ export default function useSendChatMessage() {
       console.error('No active thread')
       return
     }
+    setIsGeneratingResponse(true)
 
     if (engineParamsUpdate) setReloadModel(true)
 

web/screens/Chat/ThreadList/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 import {
   Modal,
@@ -49,17 +49,19 @@ export default function ThreadList() {
   const activeThread = useAtomValue(activeThreadAtom)
   const { deleteThread, cleanThread } = useDeleteThread()
   const { downloadedModels } = useGetDownloadedModels()
+  const [isThreadsReady, setIsThreadsReady] = useState(false)
 
   const { activeThreadId, setActiveThread: onThreadClick } =
     useSetActiveThread()
 
   useEffect(() => {
-    getThreads()
+    getThreads().then(() => setIsThreadsReady(true))
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   useEffect(() => {
     if (
+      isThreadsReady &&
       downloadedModels.length !== 0 &&
       threads.length === 0 &&
       assistants.length !== 0 &&
@@ -68,7 +70,7 @@ export default function ThreadList() {
       requestCreateNewThread(assistants[0])
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [assistants, threads, downloadedModels, activeThread])
+  }, [assistants, threads, downloadedModels, activeThread, isThreadsReady])
 
   return (
     <div className="px-3 py-4">

web/screens/Settings/Advanced/FactoryReset/ModalConfirmReset.tsx

@@ -66,7 +66,7 @@ const ModalConfirmReset = () => {
               Keep the current app data location
             </label>
             <p className="mt-2 leading-relaxed">
-              Otherwise it will reset back to its original location at:
+              Otherwise it will reset back to its original location at:{' '}
               {/* TODO should be from system */}
               <span className="font-medium">{defaultJanDataFolder}</span>
             </p>