fix: messages re-render on different threads (#4638)

web/containers/Providers/ModelHandler.tsx

@@ -143,8 +143,7 @@ export default function ModelHandler() {
         return
       }
 
-      // The thread title should not be updated if the message is less than 10 words
+      // No new line character is presented in the title
-      // And no new line character is present
       // And non-alphanumeric characters should be removed
       if (messageContent.includes('\n')) {
         messageContent = messageContent.replace(/\n/g, ' ')
@@ -290,13 +289,7 @@ export default function ModelHandler() {
           .catch(() => undefined)
         if (updatedMessage) {
           deleteMessage(message.id)
-          addNewMessage({
+          addNewMessage(updatedMessage)
-            ...updatedMessage,
-            metadata: {
-              ...updatedMessage.metadata,
-              reserve_id: message.id,
-            },
-          })
           setTokenSpeed((prev) =>
             prev ? { ...prev, message: updatedMessage.id } : undefined
           )

web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx

@@ -160,12 +160,7 @@ const ChatBody = memo(
             >
               {items.map((virtualRow) => (
                 <div
-                  key={
+                  key={messages[virtualRow.index]?.id ?? virtualRow.index}
-                    (messages[virtualRow.index]?.metadata
-                      ?.reserve_id as string) ??
-                    messages[virtualRow.index]?.id ??
-                    virtualRow.index
-                  }
                   data-index={virtualRow.index}
                   ref={virtualizer.measureElement}
                 >
@@ -175,6 +170,7 @@ const ChatBody = memo(
                     <ChatItem
                       {...messages[virtualRow.index]}
                       loadModelError={loadModelError}
+                      index={virtualRow.index}
                       isCurrentMessage={
                         virtualRow.index === messages?.length - 1
                       }

web/screens/Thread/ThreadCenterPanel/ChatItem/index.tsx

@@ -21,6 +21,7 @@ type Ref = HTMLDivElement
 type Props = {
   loadModelError?: string
   isCurrentMessage?: boolean
+  index: number
 } & ThreadMessage
 
 const ChatItem = forwardRef<Ref, Props>((message, ref) => {
@@ -78,6 +79,7 @@ const ChatItem = forwardRef<Ref, Props>((message, ref) => {
               {...message}
               content={content}
               status={status}
+              index={message.index}
               isCurrentMessage={message.isCurrentMessage ?? false}
             />
           </div>

web/screens/Thread/ThreadCenterPanel/TextMessage/ThinkingBlock.tsx

@@ -8,10 +8,10 @@ import { MarkdownTextMessage } from './MarkdownTextMessage'
 interface Props {
   text: string
   status: string
-  id: string
+  id: number
 }
 
-const thinkingBlockStateAtom = atom<{ [id: string]: boolean }>({})
+const thinkingBlockStateAtom = atom<{ [id: number]: boolean }>({})
 
 const ThinkingBlock = ({ id, text, status }: Props) => {
   const [thinkingState, setThinkingState] = useAtom(thinkingBlockStateAtom)

web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx

@@ -27,7 +27,7 @@ import {
 import { chatWidthAtom } from '@/helpers/atoms/Setting.atom'
 
 const MessageContainer: React.FC<
-  ThreadMessage & { isCurrentMessage: boolean }
+  ThreadMessage & { isCurrentMessage: boolean; index: number }
 > = (props) => {
   const isUser = props.role === ChatCompletionRole.User
   const isSystem = props.role === ChatCompletionRole.System
@@ -162,7 +162,7 @@ const MessageContainer: React.FC<
               >
                 {reasoningSegment && (
                   <ThinkingBlock
-                    id={(props.metadata?.reserve_id as string) ?? props.id}
+                    id={props.index}
                     text={reasoningSegment}
                     status={props.status}
                   />