Add markdown rendering support with react-markdown

frontend/package.json

@@ -10,7 +10,8 @@
   "dependencies": {
     "@supabase/supabase-js": "^2.86.2",
     "react": "^19.2.1",
-    "react-dom": "^19.2.1"
+    "react-dom": "^19.2.1",
+    "react-markdown": "^9.0.1"
   },
   "devDependencies": {
     "@types/react": "^19.2.7",
@@ -18,4 +19,4 @@
     "@vitejs/plugin-react": "^5.1.1",
     "vite": "^7.2.6"
   }
-}
+}

frontend/src/App.jsx

@@ -1,6 +1,8 @@
 import { useRef, useState, useEffect } from "react";
 import { supabase } from "./supabaseClient";
 
+import ReactMarkdown from "react-markdown";
+
 const getEnv = (key) => {
   if (typeof window !== "undefined" && window.__ENV__ && window.__ENV__[key]) {
     return window.__ENV__[key];
@@ -491,7 +493,10 @@ export default function App() {
                   {chatMessages.length === 0 && <div className="muted">Ask anything about the scraped site.</div>}
                   {chatMessages.map((m, idx) => (
                     <div key={idx} className={`chat-msg ${m.role}`}>
-                      <strong>{m.role === "user" ? "You" : siteName}:</strong> {m.content}
+                      <strong>{m.role === "user" ? "You" : siteName}:</strong>
+                      <div className="md-content">
+                        <ReactMarkdown>{m.content}</ReactMarkdown>
+                      </div>
                     </div>
                   ))}
                 </div>

frontend/src/styles.css

@@ -341,6 +341,48 @@ button:disabled {
 }
 .chat-msg.user { border: 1px solid rgba(124,58,237,0.4); }
 .chat-msg.assistant { border: 1px solid rgba(34,211,238,0.4); }
+
+.md-content {
+  line-height: 1.5;
+  margin-top: 4px;
+}
+.md-content p {
+  margin: 0 0 8px;
+}
+.md-content p:last-child {
+  margin-bottom: 0;
+}
+.md-content ul, .md-content ol {
+  margin: 4px 0 8px 16px;
+  padding: 0;
+}
+.md-content li {
+  margin-bottom: 4px;
+}
+.md-content h1, .md-content h2, .md-content h3 {
+  margin: 10px 0 6px;
+  font-size: 1.1em;
+  font-weight: 600;
+}
+.md-content code {
+  background: rgba(0,0,0,0.3);
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 0.9em;
+}
+.md-content pre {
+  background: rgba(0,0,0,0.3);
+  padding: 8px;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin: 8px 0;
+}
+.md-content strong {
+  color: #fff;
+  font-weight: 700;
+}
+
 .muted { color: #94a3b8; }
 .small { font-size: 12px; }
 .generate-desc { margin-top: 4px; color: #9ca3af; }