initial

apps/web/src/components/MessageList.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useRef } from 'react';
+import type { Message } from '@/api/types';
+import { MessageBubble } from './MessageBubble';
+
+interface Props {
+  messages: Message[];
+}
+
+export function MessageList({ messages }: Props) {
+  const endRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    endRef.current?.scrollIntoView({ block: 'end' });
+  }, [messages]);
+
+  if (messages.length === 0) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-sm text-muted-foreground">
+        Send a message to start.
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
+      {messages.map((m) => (
+        <MessageBubble key={m.id} message={m} />
+      ))}
+      <div ref={endRef} />
+    </div>
+  );
+}