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

@@ -1,18 +1,28 @@
 import React, { FC } from "react"
 import remarkGfm from "remark-gfm"
 import remarkMath from "remark-math"
+import rehypeKatex from "rehype-katex";
 import { MessageCodeBlock } from "./message-codeblock"
 import { MessageMarkdownMemoized } from "./message-markdown-memoized"
 
 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",