feat(web): chat UI with conversations and WebSocket streaming (#84)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/components/chat/message-bubble.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { cn } from '@/lib/cn';
+import type { Message } from '@/lib/types';
+
+interface MessageBubbleProps {
+  message: Message;
+}
+
+export function MessageBubble({ message }: MessageBubbleProps): React.ReactElement {
+  const isUser = message.role === 'user';
+
+  return (
+    <div className={cn('flex', isUser ? 'justify-end' : 'justify-start')}>
+      <div
+        className={cn(
+          'max-w-[75%] rounded-xl px-4 py-3 text-sm',
+          isUser
+            ? 'bg-blue-600 text-white'
+            : 'border border-surface-border bg-surface-elevated text-text-primary',
+        )}
+      >
+        <div className="whitespace-pre-wrap break-words">{message.content}</div>
+        <div
+          className={cn('mt-1 text-right text-xs', isUser ? 'text-blue-200' : 'text-text-muted')}
+        >
+          {new Date(message.createdAt).toLocaleTimeString([], {
+            hour: '2-digit',
+            minute: '2-digit',
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}