feat: support math formula

app/[locale]/layout.tsx

@@ -10,6 +10,7 @@ import { Inter } from "next/font/google"
 import { cookies } from "next/headers"
 import { ReactNode } from "react"
 import "./globals.css"
+import 'katex/dist/katex.min.css'
 
 const inter = Inter({ subsets: ["latin"] })
 const APP_NAME = "Chatbot UI"

components/messages/message-markdown.tsx

@@ -3,16 +3,26 @@ import remarkGfm from "remark-gfm"
 import remarkMath from "remark-math"
 import { MessageCodeBlock } from "./message-codeblock"
 import { MessageMarkdownMemoized } from "./message-markdown-memoized"
+import rehypeKatex from 'rehype-katex';
 
 interface MessageMarkdownProps {
   content: string
 }
 
+const replaceMathDelimiters = (content: string) => {
+  return content
+    .replace(/\\\(/g, '$')
+    .replace(/\\\)/g, '$')
+    .replace(/\\\[/g, '\n$$')
+    .replace(/\\\]/g, '$$\n');
+};
+
 export const MessageMarkdown: FC<MessageMarkdownProps> = ({ content }) => {
   return (
     <MessageMarkdownMemoized
       className="prose dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 min-w-full space-y-6 break-words"
       remarkPlugins={[remarkGfm, remarkMath]}
+      rehypePlugins={[rehypeKatex]}
       components={{
         p({ children }) {
           return <p className="mb-2 last:mb-0">{children}</p>
@@ -59,7 +69,7 @@ export const MessageMarkdown: FC<MessageMarkdownProps> = ({ content }) => {
         }
       }}
     >
-      {content}
+      {replaceMathDelimiters(content)}
     </MessageMarkdownMemoized>
   )
 }

package.json

@@ -91,6 +91,7 @@
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "react-textarea-autosize": "^8.5.3",
+    "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
     "sonner": "^1.3.1",