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

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} />