大活

art-agent/frontend/src/components/chat/chat-messages.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import type { Message } from "@/lib/api";
+import { ImageGrid } from "./image-grid";
+
+interface ChatMessagesProps {
+  messages: Message[];
+  isLoading: boolean;
+  streamingText: string;
+  streamingImages: string[];
+  statusText: string;
+}
+
+export function ChatMessages({
+  messages,
+  isLoading,
+  streamingText,
+  streamingImages,
+  statusText,
+}: ChatMessagesProps) {
+  return (
+    <div className="flex-1 overflow-y-auto px-4 py-6 space-y-6">
+      {/* 历史消息 */}
+      {messages.map((msg, i) => (
+        <div key={i} className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}>
+          <div
+            className={`max-w-[80%] rounded-2xl px-4 py-3 ${
+              msg.role === "user"
+                ? "bg-[var(--accent)] text-white"
+                : "bg-[var(--bg-tertiary)] text-[var(--text-primary)]"
+            }`}
+          >
+            <div className="whitespace-pre-wrap text-sm leading-relaxed">{msg.content}</div>
+            {msg.images && msg.images.length > 0 && <ImageGrid images={msg.images} />}
+          </div>
+        </div>
+      ))}
+
+      {/* 正在生成的消息 */}
+      {isLoading && (
+        <div className="flex justify-start">
+          <div className="max-w-[80%] rounded-2xl px-4 py-3 bg-[var(--bg-tertiary)]">
+            {statusText && (
+              <div className="text-xs text-[var(--accent)] mb-2 flex items-center gap-2">
+                <span className="inline-block w-2 h-2 rounded-full bg-[var(--accent)] animate-pulse" />
+                {statusText}
+              </div>
+            )}
+            {streamingText && (
+              <div className="whitespace-pre-wrap text-sm leading-relaxed">{streamingText}</div>
+            )}
+            {streamingImages.length > 0 && <ImageGrid images={streamingImages} />}
+            {!streamingText && !statusText && (
+              <div className="flex gap-1">
+                <span className="w-2 h-2 rounded-full bg-[var(--text-secondary)] animate-bounce" />
+                <span className="w-2 h-2 rounded-full bg-[var(--text-secondary)] animate-bounce [animation-delay:0.1s]" />
+                <span className="w-2 h-2 rounded-full bg-[var(--text-secondary)] animate-bounce [animation-delay:0.2s]" />
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}