added react-markdown

packages/chat-client/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-markdown": "^10.1.0",
     "uuid": "^13.0.0"
   },
   "devDependencies": {

packages/chat-client/src/components/MessageBubble.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactMarkdown from 'react-markdown';
 
 export default function MessageBubble({ message }) {
   const isUser = message.role === 'user';
@@ -31,10 +32,24 @@ export default function MessageBubble({ message }) {
         fontSize: '14px',
         lineHeight: '1.6',
         border: isUser ? 'none' : '1px solid var(--border)',
-        whiteSpace: 'pre-wrap',
         wordBreak: 'break-word',
       }}>
-        {message.text}
+        {isUser
+          ? message.text
+          : <ReactMarkdown
+              components={{
+                // Tighten up default spacing so it fits the bubble style
+                p: ({children}) => <p style={{ margin: '0 0 8px', lineHeight: 1.6 }}>{children}</p>,
+                ul: ({children}) => <ul style={{ margin: '0 0 8px', paddingLeft: '20px' }}>{children}</ul>,
+                ol: ({children}) => <ol style={{ margin: '0 0 8px', paddingLeft: '20px' }}>{children}</ol>,
+                li: ({children}) => <li style={{ marginBottom: '2px' }}>{children}</li>,
+                code: ({inline, children}) => inline
+                  ? <code style={{ background: 'var(--bg-elevated)', padding: '1px 5px', borderRadius: 'var(--radius-sm)', fontSize: '12px', fontFamily: 'monospace' }}>{children}</code>
+                  : <pre style={{ background: 'var(--bg-elevated)', padding: '10px 12px', borderRadius: 'var(--radius-md)', overflowX: 'auto', fontSize: '12px', fontFamily: 'monospace' }}><code>{children}</code></pre>,
+                strong: ({children}) => <strong style={{ fontWeight: 600, color: 'var(--text-primary)' }}>{children}</strong>,
+              }}
+            >{message.text}</ReactMarkdown>
+        }
         {message.streaming && (
           <span style={{
             display: 'inline-block',