Add markdown

web/package.json

@@ -75,6 +75,7 @@
     "react-icons": "^5.5.0",
     "react-konva": "^18.2.10",
     "react-router-dom": "^6.30.3",
+    "react-markdown": "^9.0.1",
     "react-swipeable": "^7.0.2",
     "react-tracked": "^2.0.1",
     "react-transition-group": "^4.4.5",

web/src/pages/Chat.tsx

@@ -4,6 +4,7 @@ import { FaArrowUpLong } from "react-icons/fa6";
 import { useTranslation } from "react-i18next";
 import { useState, useCallback } from "react";
 import axios from "axios";
+import ReactMarkdown from "react-markdown";
 
 type ChatMessage = { role: "user" | "assistant"; content: string };
 
@@ -57,7 +58,11 @@ export default function ChatPage() {
                 : "self-start rounded-lg bg-muted px-3 py-2"
             }
           >
-            {msg.content}
+            {msg.role === "assistant" ? (
+              <ReactMarkdown>{msg.content}</ReactMarkdown>
+            ) : (
+              msg.content
+            )}
           </div>
         ))}
         {isLoading && (