kit初版，模型引入,agent优化

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

@@ -1,13 +1,13 @@
 "use client";
 
-import type { Message } from "@/lib/api";
+import type { ChatMessage, ImageAsset } from "@/lib/types";
 import { ImageGrid } from "./image-grid";
 
 interface ChatMessagesProps {
-  messages: Message[];
+  messages: ChatMessage[];
   isLoading: boolean;
   streamingText: string;
-  streamingImages: string[];
+  streamingImages: ImageAsset[];
   statusText: string;
 }
 
@@ -19,27 +19,44 @@ export function ChatMessages({
   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="flex-1 overflow-y-auto px-3 md:px-4 py-4 md:py-6 space-y-4 md:space-y-6">
+      {messages.map((msg) => (
+        <div key={msg.id} className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}>
           <div
-            className={`max-w-[80%] rounded-2xl px-4 py-3 ${
+            className={`max-w-[90%] md:max-w-[80%] rounded-2xl px-3.5 md:px-4 py-2.5 md:py-3 ${
               msg.role === "user"
                 ? "bg-[var(--accent)] text-white"
                 : "bg-[var(--bg-tertiary)] text-[var(--text-primary)]"
             }`}
           >
+            {msg.refImageUrl && (
+              <div className="mb-2">
+                <img
+                  src={msg.refImageUrl}
+                  alt="参考图"
+                  className="max-w-[160px] max-h-[120px] rounded-lg object-cover border border-white/20"
+                />
+                <span className="text-[10px] opacity-70 mt-1 block">参考图</span>
+              </div>
+            )}
             <div className="whitespace-pre-wrap text-sm leading-relaxed">{msg.content}</div>
-            {msg.images && msg.images.length > 0 && <ImageGrid images={msg.images} />}
+            {msg.images && msg.images.length > 0 && (
+              <>
+                <ImageGrid images={msg.images} />
+                {msg.modelName && (
+                  <div className="mt-1.5 text-[10px] text-[var(--text-secondary)] opacity-70">
+                    由 {msg.modelName} 生成
+                  </div>
+                )}
+              </>
+            )}
           </div>
         </div>
       ))}
 
-      {/* 正在生成的消息 */}
       {isLoading && (
         <div className="flex justify-start">
-          <div className="max-w-[80%] rounded-2xl px-4 py-3 bg-[var(--bg-tertiary)]">
+          <div className="max-w-[90%] md:max-w-[80%] rounded-2xl px-3.5 md:px-4 py-2.5 md: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" />