added cors support and started chat client

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

@@ -0,0 +1,66 @@
+import React from 'react';
+
+export default function MessageBubble({ message }) {
+  const isUser = message.role === 'user';
+
+  return (
+    <div style={{
+      display: 'flex',
+      justifyContent: isUser ? 'flex-end' : 'flex-start',
+      marginBottom: '12px',
+      padding: '0 16px',
+    }}>
+      {!isUser && (
+        <div style={{
+          width: '28px',
+          height: '28px',
+          borderRadius: '50%',
+          background: 'var(--accent)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: '12px',
+          fontWeight: 600,
+          marginRight: '8px',
+          flexShrink: 0,
+          alignSelf: 'flex-end',
+        }}>N</div>
+      )}
+
+      <div style={{
+        maxWidth: '70%',
+        padding: '10px 14px',
+        borderRadius: isUser ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
+        background: isUser ? 'var(--bubble-user)' : 'var(--bubble-ai)',
+        color: 'var(--text-primary)',
+        fontSize: '14px',
+        lineHeight: '1.6',
+        border: isUser ? 'none' : '1px solid var(--border)',
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word',
+      }}>
+        {message.text}
+        {message.streaming && (
+          <span style={{
+            display: 'inline-block',
+            width: '8px',
+            height: '14px',
+            background: 'var(--text-secondary)',
+            marginLeft: '2px',
+            borderRadius: '2px',
+            animation: 'blink 1s step-end infinite',
+          }} />
+        )}
+        {message.error && (
+          <div style={{
+            marginTop: '6px',
+            fontSize: '12px',
+            color: '#ff6b6b',
+          }}>
+            ⚠ Failed to complete response
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}