chore: use rehype-highlight v6 update latex language

web/package.json

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

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

@@ -14,6 +14,7 @@
 
 import { Tooltip } from '@janhq/joi'
 
+import latex from 'highlight.js/lib/languages/latex'
 import { useAtomValue } from 'jotai'
 import { FolderOpenIcon } from 'lucide-react'
 import rehypeHighlight from 'rehype-highlight'
@@ -48,20 +49,20 @@
 import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
 
 const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
   let text = ''
   const isUser = props.role === ChatCompletionRole.User
   const isSystem = props.role === ChatCompletionRole.System
   const editMessage = useAtomValue(editMessageAtom)
   const activeThread = useAtomValue(activeThreadAtom)
 
   if (props.content && props.content.length > 0) {
     text = props.content[0]?.text?.value ?? ''
   }
 
   const clipboard = useClipboard({ timeout: 1000 })
 
   function extractCodeLines(node: { children: { children: any[] }[] }) {
     const codeLines: any[] = []
 
     // Helper function to extract text recursively from children
     function getTextFromNode(node: {
@@ -69,37 +70,37 @@
       value: any
       children: any[]
     }): string {
       if (node.type === 'text') {
         return node.value
       } else if (node.children) {
         return node.children.map(getTextFromNode).join('')
       }
       return ''
     }
 
     // Traverse each line in the <code> block
     node.children[0].children.forEach(
       (lineNode: {
         type: string
         tagName: string
         value: any
         children: any[]
       }) => {
         if (lineNode.type === 'element' && lineNode.tagName === 'span') {
           const lineContent = getTextFromNode(lineNode)
           codeLines.push(lineContent)
         }
       }
     )
 
     // Join the lines with newline characters for proper formatting
     return codeLines.join('\n')
   }
   function wrapCodeBlocksWithoutVisit() {
     return (tree: { children: any[] }) => {
       tree.children = tree.children.map((node) => {
         if (node.tagName === 'pre' && node.children[0]?.tagName === 'code') {
           const language = node.children[0].properties.className?.[1]?.replace(
             'language-',
             ''
           )
@@ -394,7 +395,16 @@
                 rehypePlugins={[
                   [rehypeKatex, { throwOnError: false }],
                   rehypeRaw,
-                  rehypeHighlight,
+                  [
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    rehypeHighlight,
+                    {
+                      languages: { latex },
+                      subset: false,
+                      plainText: ['txt', 'text'],
+                    },
+                  ],
                   [rehypeHighlightCodeLines, { showLineNumbers: true }],
                   wrapCodeBlocksWithoutVisit,
                 ]}