.

packages/web/src/components/chat/ChatMessages.tsx

@@ -0,0 +1,45 @@
+import { Sparkles } from "lucide-react"
+import {
+  MessageBubble,
+  TypingIndicator,
+  StreamingMessage,
+  type Message,
+} from "./MessageBubble"
+
+export function EmptyChatState() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh] text-center">
+      <div className="w-16 h-16 rounded-3xl bg-gradient-to-br from-teal-500/20 to-teal-500/5 flex items-center justify-center mb-6 shadow-lg">
+        <Sparkles className="w-8 h-8 text-teal-400" />
+      </div>
+      <h2 className="text-2xl font-semibold mb-3 text-white">How can I help?</h2>
+      <p className="text-neutral-400 text-sm max-w-sm">
+        Start a conversation below.
+      </p>
+    </div>
+  )
+}
+
+interface MessageListProps {
+  messages: Message[]
+  streamingContent: string
+  isStreaming: boolean
+}
+
+export function MessageList({
+  messages,
+  streamingContent,
+  isStreaming,
+}: MessageListProps) {
+  return (
+    <div className="space-y-6 pb-4">
+      {messages.map((message) => (
+        <MessageBubble key={message.id} message={message} />
+      ))}
+      {isStreaming && streamingContent && (
+        <StreamingMessage content={streamingContent} />
+      )}
+      {isStreaming && !streamingContent && <TypingIndicator />}
+    </div>
+  )
+}