fix: error when switching between threads

plugins/inference-plugin/src/module.ts

@@ -25,6 +25,7 @@ let currentModelFile = null;
  */
 interface InitModelResponse {
   error?: any;
+  modelFile?: string;
 }
 
 /**
@@ -51,7 +52,7 @@ function initModel(modelFile: string): Promise<InitModelResponse> {
       .then(validateModelStatus)
       .catch((err) => {
         log.error("error: " + JSON.stringify(err));
-        return { error: err };
+        return { error: err, modelFile };
       })
   );
 }

web/hooks/useActiveModel.ts

@@ -31,6 +31,8 @@ export function useActiveModel() {
       return
     }
 
+    setActiveModel(undefined)
+
     setStateModel({ state: 'start', loading: true, model: modelId })
 
     const model = downloadedModels.find((e) => e.id === modelId)
@@ -52,15 +54,14 @@ export function useActiveModel() {
     console.debug('Init model: ', modelId)
     const path = join('models', model.name, modelId)
     const res = await initModel(path)
-    if (res?.error && (!activeModel?.id || modelId === activeModel?.id)) {
+    if (res && res.error && res.modelFile === stateModel.model) {
       const errorMessage = `${res.error}`
       alert(errorMessage)
       setStateModel(() => ({
         state: 'start',
         loading: false,
         model: modelId,
       }))
-      setActiveModel(undefined)
     } else {
       console.debug(
         `Init model ${modelId} successfully!, take ${

web/hooks/useSendChatMessage.ts

@@ -59,6 +59,7 @@ export default function useSendChatMessage() {
             ...newMessage,
             messages: newMessage.messages?.slice(0, -1).concat([summaryMsg]),
           })
+          .catch(console.error)
         if (
           currentConvo &&
           currentConvo.id === newMessage.threadId &&

web/screens/Chat/ChatInstruction/index.tsx

@@ -31,18 +31,20 @@ const ChatInstruction = () => {
   }
   return (
     <div className="mx-auto mb-20 flex flex-col space-y-2">
-      <p>
-        What does this Assistant do? How does it behave? What should it avoid
-        doing?
-      </p>
-      {!isSettingInstruction && (
-        <Button
-          themes={'outline'}
-          className="w-32"
-          onClick={() => setIsSettingInstruction(true)}
-        >
-          Give Instruction
-        </Button>
+      {!isSettingInstruction && activeConvoId && (
+        <>
+          <p>
+            What does this Assistant do? How does it behave? What should it
+            avoid doing?
+          </p>
+          <Button
+            themes={'outline'}
+            className="w-32"
+            onClick={() => setIsSettingInstruction(true)}
+          >
+            Give Instruction
+          </Button>
+        </>
       )}
       {isSettingInstruction && (
         <div className="space-y-4">

web/screens/Chat/HistoryList/index.tsx

@@ -11,7 +11,6 @@ import { twMerge } from 'tailwind-merge'
 
 import { useActiveModel } from '@/hooks/useActiveModel'
 import { useCreateConversation } from '@/hooks/useCreateConversation'
-import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
 import useGetUserConversations from '@/hooks/useGetUserConversations'
 
 import { displayDate } from '@/utils/datetime'
@@ -27,11 +26,10 @@ export default function HistoryList() {
   const conversations = useAtomValue(userConversationsAtom)
   const threadStates = useAtomValue(conversationStatesAtom)
   const { getUserConversations } = useGetUserConversations()
-  const { activeModel, startModel } = useActiveModel()
+  const { activeModel } = useActiveModel()
   const { requestCreateConvo } = useCreateConversation()
   const activeConvoId = useAtomValue(getActiveConvoIdAtom)
   const setActiveConvoId = useSetAtom(setActiveConvoIdAtom)
-  const { downloadedModels } = useGetDownloadedModels()
 
   useEffect(() => {
     getUserConversations()
@@ -48,14 +46,6 @@ export default function HistoryList() {
       console.debug('modelId is undefined')
       return
     }
-    const model = downloadedModels.find((e) => e.id === convo.modelId)
-    if (convo == null) {
-      console.debug('modelId is undefined')
-      return
-    }
-    if (model != null) {
-      startModel(model.id)
-    }
     if (activeConvoId !== convo.id) {
       setActiveConvoId(convo.id)
     }

web/screens/Chat/index.tsx

@@ -10,9 +10,12 @@ import { twMerge } from 'tailwind-merge'
 
 import { currentPromptAtom } from '@/containers/Providers/Jotai'
 
-import { FeatureToggleContext } from '@/context/FeatureToggle'
 import ShortCut from '@/containers/Shortcut'
 
+import { toaster } from '@/containers/Toast'
+
+import { FeatureToggleContext } from '@/context/FeatureToggle'
+
 import { MainViewState } from '@/constants/screens'
 
 import { useActiveModel } from '@/hooks/useActiveModel'
@@ -64,6 +67,12 @@ const ChatScreen = () => {
   const { experimentalFeatureEnabed } = useContext(FeatureToggleContext)
 
   const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const { startModel } = useActiveModel()
+  const modelRef = useRef(activeModel)
+
+  useEffect(() => {
+    modelRef.current = activeModel
+  }, [activeModel])
 
   useEffect(() => {
     getUserConversations()
@@ -81,6 +90,24 @@ const ChatScreen = () => {
   }, [currentConvo, downloadedModels])
 
   const handleSendMessage = async () => {
+    if (!activeModel || activeModel.id !== currentConvo?.modelId) {
+      const model = downloadedModels.find((e) => e.id === currentConvo?.modelId)
+
+      // Model is available to start
+      if (model != null) {
+        toaster({
+          title: 'Message queued.',
+          description: 'It will be sent once the model is done loading.',
+        })
+        startModel(model.id).then(() => {
+          setTimeout(() => {
+            if (modelRef?.current?.id === currentConvo?.modelId)
+              sendChatMessage()
+          }, 300)
+        })
+      }
+      return
+    }
     if (activeConversationId) {
       sendChatMessage()
     } else {
@@ -206,20 +233,16 @@ const ChatScreen = () => {
               ref={textareaRef}
               onKeyDown={(e) => handleKeyDown(e)}
               placeholder="Type your message ..."
-              disabled={
-                !activeModel ||
-                stateModel.loading ||
-                activeModel.id !== currentConvo?.modelId
-              }
+              disabled={stateModel.loading || !currentConvo}
               value={currentPrompt}
               onChange={(e) => {
                 handleMessageChange(e)
               }}
             />
             <Button
               size="lg"
-              disabled={!activeModel || disabled || stateModel.loading}
-              themes={!activeModel ? 'secondary' : 'primary'}
+              disabled={disabled || stateModel.loading || !currentConvo}
+              themes={'primary'}
               onClick={handleSendMessage}
             >
               Send