feat: update react-markdown to 9.0.3 and integrate KaTeX for math rendering in MessageBubble

package.json

@@ -55,9 +55,11 @@
     "react-day-picker": "9.4.4",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.54.2",
-    "react-markdown": "^9.0.1",
+    "react-markdown": "^9.0.3",
     "react-resizable-panels": "^2.1.7",
     "recharts": "^2.15.0",
+    "rehype-katex": "^7.0.1",
+    "remark-math": "^6.0.0",
     "sakura.css": "^1.5.0",
     "sonner": "^1.7.1",
     "tailwind-merge": "^2.6.0",

src/components/MessageBubble.tsx

@@ -1,5 +1,8 @@
 import { LightBulbIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import Markdown from "react-markdown";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+import "katex/dist/katex.min.css";
 import { useContext, useState, useMemo } from "react";
 import { ChatStoreMessage } from "@/types/chatstore";
 import { addTotalCost } from "@/utils/totalCost";
@@ -324,6 +327,8 @@ export default function Message(props: { messageIndex: number }) {
             ) : renderMarkdown ? (
               <div className="message-content max-w-full md:max-w-[75%]">
                 <Markdown
+                  remarkPlugins={[remarkMath]}
+                  rehypePlugins={[rehypeKatex]}
                   break={true}
                   components={{
                     code: ({ children }) => (