Merge pull request #4216 from janhq/fix/react-markdown-crash-on-code-…

…highlighting

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,9 +14,11 @@ import LoadModelError from '../LoadModelError'
 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)
@@ -31,12 +33,12 @@ const ChatConfigurator = memo(() => {
 
   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 (
@@ -119,7 +121,7 @@ const ChatBody = memo(
             >
               {items.map((virtualRow) => (
                 <div
-                  key={virtualRow.key}
+                  key={messages[virtualRow.index]?.id}
                   data-index={virtualRow.index}
                   ref={virtualizer.measureElement}
                 >