Deploy 2026-06-01T22:10:12.283Z

package-lock.json

@@ -8,6 +8,7 @@
       "name": "diet-coach",
       "version": "0.0.0",
       "dependencies": {
+        "marked": "^15.0.4",
         "react": "^19.2.6",
         "react-dom": "^19.2.6"
       },
@@ -1892,6 +1893,18 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/marked": {
+      "version": "15.0.4",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-15.0.4.tgz",
+      "integrity": "sha512-TCHvDqmb3ZJ4PWG7VEGVgtefA5/euFmsIhxtD0XsBxI39gUSKL81mIRFdt0AiNQozUahd4ke98ZdirExd/vSEw==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/minimatch": {
       "version": "10.2.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "marked": "^15.0.4",
     "react": "^19.2.6",
     "react-dom": "^19.2.6"
   },

src/App.css

@@ -116,3 +116,59 @@ header h1 {
   opacity: 0.4;
   cursor: not-allowed;
 }
+
+/* Markdown inside bubbles */
+.msg.assistant .bubble h1,
+.msg.assistant .bubble h2,
+.msg.assistant .bubble h3 {
+  margin: 12px 0 6px;
+  font-size: 1rem;
+  font-weight: 700;
+  color: #f1f5f9;
+}
+
+.msg.assistant .bubble h2 { font-size: 0.95rem; }
+.msg.assistant .bubble h3 { font-size: 0.9rem; }
+.msg.assistant .bubble h1:first-child,
+.msg.assistant .bubble h2:first-child,
+.msg.assistant .bubble h3:first-child { margin-top: 0; }
+
+.msg.assistant .bubble p { margin: 6px 0; }
+.msg.assistant .bubble p:first-child { margin-top: 0; }
+.msg.assistant .bubble p:last-child { margin-bottom: 0; }
+
+.msg.assistant .bubble ul,
+.msg.assistant .bubble ol {
+  margin: 6px 0;
+  padding-left: 20px;
+}
+
+.msg.assistant .bubble li { margin: 3px 0; }
+
+.msg.assistant .bubble strong { color: #f1f5f9; }
+
+.msg.assistant .bubble table {
+  border-collapse: collapse;
+  margin: 8px 0;
+  font-size: 0.85rem;
+  width: 100%;
+}
+
+.msg.assistant .bubble th,
+.msg.assistant .bubble td {
+  border: 1px solid #4a4a6a;
+  padding: 4px 8px;
+  text-align: left;
+}
+
+.msg.assistant .bubble th {
+  background: #1a1a2e;
+  font-weight: 600;
+}
+
+.msg.assistant .bubble code {
+  background: #1a1a2e;
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 0.85em;
+}

src/App.jsx

@@ -1,6 +1,9 @@
 import { useState, useRef, useEffect } from 'react'
+import { marked } from 'marked'
 import './App.css'
 
+marked.setOptions({ breaks: true, gfm: true })
+
 const API_URL = window.location.hostname === 'localhost'
   ? 'http://localhost:4003'
   : 'https://diet-api.psbailey.uk'
@@ -77,7 +80,10 @@ export default function App() {
         )}
         {messages.map((msg, i) => (
           <div key={i} className={`msg ${msg.role}`}>
-            <div className="bubble">{msg.content || '...'}</div>
+            {msg.role === 'assistant' 
+              ? <div className="bubble" dangerouslySetInnerHTML={{ __html: marked.parse(msg.content || '...') }} />
+              : <div className="bubble">{msg.content}</div>
+            }
           </div>
         ))}
         <div ref={messagesEnd} />