fix: not update active model when using resend button (#834)

Signed-off-by: James <james@jan.ai>
Co-authored-by: James <james@jan.ai>

web/hooks/useSendChatMessage.ts

@@ -48,6 +48,47 @@ export default function useSendChatMessage() {
   const { startModel } = useActiveModel()
   const [queuedMessage, setQueuedMessage] = useState(false)
 
+  const resendChatMessage = async () => {
+    if (!activeThread) {
+      console.error('No active thread')
+      return
+    }
+
+    updateThreadWaiting(activeThread.id, true)
+
+    const messages: ChatCompletionMessage[] = [
+      activeThread.assistants[0]?.instructions,
+    ]
+      .map<ChatCompletionMessage>((instructions) => {
+        const systemMessage: ChatCompletionMessage = {
+          role: ChatCompletionRole.System,
+          content: instructions,
+        }
+        return systemMessage
+      })
+      .concat(
+        currentMessages.map<ChatCompletionMessage>((msg) => ({
+          role: msg.role,
+          content: msg.content[0]?.text.value ?? '',
+        }))
+      )
+
+    const messageRequest: MessageRequest = {
+      id: ulid(),
+      messages: messages,
+      threadId: activeThread.id,
+    }
+
+    const modelId = selectedModel?.id ?? activeThread.assistants[0].model.id
+
+    if (activeModel?.id !== modelId) {
+      setQueuedMessage(true)
+      await startModel(modelId)
+      setQueuedMessage(false)
+    }
+    events.emit(EventName.OnMessageSent, messageRequest)
+  }
+
   const sendChatMessage = async () => {
     if (!currentPrompt || currentPrompt.trim().length === 0) {
       return
@@ -162,6 +203,7 @@ export default function useSendChatMessage() {
 
   return {
     sendChatMessage,
+    resendChatMessage,
     queuedMessage,
   }
 }

web/screens/Chat/MessageToolbar/index.tsx

@@ -1,7 +1,5 @@
 import {
-  ChatCompletionMessage,
   EventName,
-  MessageRequest,
   MessageStatus,
   ExtensionType,
   ThreadMessage,
@@ -21,17 +19,15 @@ import {
   getCurrentChatMessagesAtom,
 } from '@/helpers/atoms/ChatMessage.atom'
 import { activeThreadAtom } from '@/helpers/atoms/Conversation.atom'
+import useSendChatMessage from '@/hooks/useSendChatMessage'
 
 const MessageToolbar = ({ message }: { message: ThreadMessage }) => {
   const deleteMessage = useSetAtom(deleteMessageAtom)
   const thread = useAtomValue(activeThreadAtom)
   const messages = useAtomValue(getCurrentChatMessagesAtom)
-  // const threadStateAtom = useMemo(
-  //   () => atom((get) => get(threadStatesAtom)[thread?.id ?? '']),
-  //   [thread?.id]
-  // )
-  // const threadState = useAtomValue(threadStateAtom)
-  const stopInference = async () => {
+  const { resendChatMessage } = useSendChatMessage()
+
+  const onStopInferenceClick = async () => {
     await extensionManager
       .get<InferenceExtension>(ExtensionType.Inference)
       ?.stopInference()
@@ -43,13 +39,25 @@ const MessageToolbar = ({ message }: { message: ThreadMessage }) => {
     }, 300)
   }
 
+  const onDeleteClick = async () => {
+    deleteMessage(message.id ?? '')
+    if (thread) {
+      await extensionManager
+        .get<ConversationalExtension>(ExtensionType.Conversational)
+        ?.writeMessages(
+          thread.id,
+          messages.filter((msg) => msg.id !== message.id)
+        )
+    }
+  }
+
   return (
     <div className={twMerge('flex flex-row items-center')}>
       <div className="flex overflow-hidden rounded-md border border-border bg-background/20">
         {message.status === MessageStatus.Pending && (
           <div
             className="cursor-pointer border-r border-border px-2 py-2 hover:bg-background/80"
-            onClick={() => stopInference()}
+            onClick={onStopInferenceClick}
           >
             <StopCircle size={14} />
           </div>
@@ -58,20 +66,7 @@ const MessageToolbar = ({ message }: { message: ThreadMessage }) => {
           message.id === messages[messages.length - 1]?.id && (
             <div
               className="cursor-pointer border-r border-border px-2 py-2 hover:bg-background/80"
-              onClick={() => {
-                const messageRequest: MessageRequest = {
-                  id: message.id ?? '',
-                  messages: messages.slice(0, -1).map((e) => {
-                    const msg: ChatCompletionMessage = {
-                      role: e.role,
-                      content: e.content[0].text.value,
-                    }
-                    return msg
-                  }),
-                  threadId: message.thread_id ?? '',
-                }
-                events.emit(EventName.OnMessageSent, messageRequest)
-              }}
+              onClick={resendChatMessage}
             >
               <RefreshCcw size={14} />
             </div>
@@ -89,16 +84,7 @@ const MessageToolbar = ({ message }: { message: ThreadMessage }) => {
         </div>
         <div
           className="cursor-pointer px-2 py-2 hover:bg-background/80"
-          onClick={async () => {
-            deleteMessage(message.id ?? '')
-            if (thread)
-              await extensionManager
-                .get<ConversationalExtension>(ExtensionType.Conversational)
-                ?.writeMessages(
-                  thread.id,
-                  messages.filter((msg) => msg.id !== message.id)
-                )
-          }}
+          onClick={onDeleteClick}
         >
           <Trash2Icon size={14} />
         </div>