fix: react-markdown crash on code highlighting - threads switching do not take effect sometime

web/package.json

@@ -38,7 +38,7 @@
     "react-icons": "^4.12.0",
     "react-markdown": "^9.0.1",
     "react-toastify": "^9.1.3",
-    "rehype-highlight": "^6.0.0",
+    "rehype-highlight": "^7.0.1",
     "rehype-highlight-code-lines": "^1.0.4",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",

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

@@ -14,31 +14,33 @@
 import EmptyThread from './EmptyThread'
 
 import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
+import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
 
 const ChatConfigurator = memo(() => {
   const messages = useAtomValue(getCurrentChatMessagesAtom)
+  const currentThread = useAtomValue(activeThreadAtom)
 
   const [current, setCurrent] = useState<ThreadMessage[]>([])
   const loadModelError = useAtomValue(loadModelErrorAtom)
 
   const isMessagesIdentificial = (
     arr1: ThreadMessage[],
     arr2: ThreadMessage[]
   ): boolean => {
     if (arr1.length !== arr2.length) return false
     return arr1.every((item, index) => item.id === arr2[index].id)
   }
 
   useEffect(() => {
     if (
-      messages?.length !== current?.length ||
-      !isMessagesIdentificial(messages, current)
+      !isMessagesIdentificial(messages, current) ||
+      messages.some((e) => e.thread_id !== currentThread?.id)
     ) {
       setCurrent(messages)
     }
-  }, [messages, current, loadModelError])
+  }, [messages, current, loadModelError, currentThread])
 
   if (!messages.length) return <EmptyThread />
   return (
     <div className="flex h-full w-full flex-col">
       <ChatBody loadModelError={loadModelError} messages={current} />
@@ -55,10 +57,10 @@
     loadModelError?: string
   }) => {
     // The scrollable element for your list
     const parentRef = useRef(null)
 
     const count = useMemo(
       () => (messages?.length ?? 0) + (loadModelError ? 1 : 0),
       [messages, loadModelError]
     )
 
@@ -119,7 +121,7 @@
             >
               {items.map((virtualRow) => (
                 <div
-                  key={virtualRow.key}
+                  key={messages[virtualRow.index]?.id}
                   data-index={virtualRow.index}
                   ref={virtualizer.measureElement}
                 >