feat: support latex format

web/app/layout.tsx

@@ -6,6 +6,8 @@ import Providers from '@/containers/Providers'
 
 import '@/styles/main.scss'
 
+import 'katex/dist/katex.min.css'
+
 export const metadata: Metadata = {
   title: 'Jan',
   description:

web/package.json

@@ -22,10 +22,12 @@
     "framer-motion": "^10.16.4",
     "highlight.js": "^11.9.0",
     "jotai": "^2.4.0",
+    "katex": "^0.16.9",
     "lodash": "^4.17.21",
     "lucide-react": "^0.291.0",
     "marked": "^9.1.2",
     "marked-highlight": "^2.0.6",
+    "marked-katex-extension": "^4.0.5",
     "next": "14.0.1",
     "next-themes": "^0.2.1",
     "postcss": "8.4.31",

web/screens/Chat/SimpleTextMessage/index.tsx

@@ -5,9 +5,10 @@ import { ChatCompletionRole, MessageStatus, ThreadMessage } from '@janhq/core'
 import hljs from 'highlight.js'
 
 import { useAtomValue } from 'jotai'
-import { Marked, Renderer } from 'marked'
+import { Marked, Renderer, use } from 'marked'
 
 import { markedHighlight } from 'marked-highlight'
+import markedKatex from 'marked-katex-extension'
 
 import { twMerge } from 'tailwind-merge'
 
@@ -31,6 +32,7 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
   const clipboard = useClipboard({ timeout: 1000 })
 
   const marked: Marked = new Marked(
+    markedKatex({ displayMode: true, macros: true, throwOnError: false }),
     markedHighlight({
       langPrefix: 'hljs',
       highlight(code, lang) {