From db8893b79998ebda95351ef6c562b581da6ed3c7 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Mon, 9 Feb 2026 00:55:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=94=BB=E5=B8=83=E5=AF=B9?=
 =?UTF-8?q?=E8=AF=9D=E9=A2=84=E8=A7=88=E5=9B=BE=E6=A0=B7=E5=BC=8F=E4=B8=8E?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=B6=88=E6=81=AF=E6=B0=94=E6=B3=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/canvas/CanvasChatPanel.tsx | 37 +++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/components/canvas/CanvasChatPanel.tsx b/components/canvas/CanvasChatPanel.tsx
index dbb91ed..d589823 100644
--- a/components/canvas/CanvasChatPanel.tsx
+++ b/components/canvas/CanvasChatPanel.tsx
@@ -1423,6 +1423,19 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
             
             // 使用清理后的消息
             const cleanedMessage = { ...message, parts: cleanedParts };
+            const assistantTextParts = message.role === "assistant"
+              ? cleanedParts.filter((part: any) => part.type === "text" && part.text)
+              : [];
+            const hasAssistantImages = assistantTextParts.some((part: any) =>
+              extractImageUrls(part.text || "").length > 0
+            );
+            const hasAssistantText = assistantTextParts.some((part: any) => {
+              const textWithoutImages = (part.text || "")
+                .replace(/!\[(?:thumb)?\|\|\|[^|]+\|\|\|[^\]]*\]\([^)]+\)/g, "")
+                .trim();
+              return textWithoutImages.length > 0;
+            });
+            const isImageOnlyAssistant = message.role === "assistant" && hasAssistantImages && !hasAssistantText;
             
             return (
             <div
@@ -1508,7 +1521,14 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
                   </div>
                 ) : (
                   // AI 消息：保持原样式
-                  <div className="bg-card border text-card-foreground rounded-2xl rounded-tl-sm text-sm px-4 py-2.5 shadow-sm">
+                  <div
+                    className={cn(
+                      "text-card-foreground text-sm",
+                      isImageOnlyAssistant
+                        ? "bg-transparent border-0 rounded-none px-0 py-0 shadow-none"
+                        : "bg-card border rounded-2xl rounded-tl-sm px-4 py-2.5 shadow-sm"
+                    )}
+                  >
                     {/* 消息内容 */}
                     <div className="whitespace-pre-wrap break-words leading-relaxed">
                       {cleanedMessage.parts?.map((part: any, i: number) => {
@@ -1523,14 +1543,21 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
                             <div key={i}>
                               {textWithoutImages && <span>{textWithoutImages}</span>}
                               {imageUrls.length > 0 && (
-                                <div className="flex flex-wrap gap-2 mt-3">
+                                <div className={cn("flex flex-wrap gap-2", textWithoutImages ? "mt-3" : "mt-0")}>
                                   {imageUrls.map((url, idx) => (
-                                    <div key={idx} className="relative group rounded-xl overflow-hidden border bg-background shadow-sm transition-all hover:shadow-md">
+                                    <div
+                                      key={idx}
+                                      className={cn(
+                                        "relative group overflow-hidden border transition-all",
+                                        "rounded-2xl border-black/5 dark:border-white/10 bg-white/70 dark:bg-zinc-900/50",
+                                        "shadow-[0_8px_24px_-16px_rgba(15,23,42,0.45)] hover:shadow-[0_12px_28px_-14px_rgba(15,23,42,0.5)]"
+                                      )}
+                                    >
                                       <img
                                         src={url}
                                         alt=""
-                                        className="max-w-full h-auto cursor-zoom-in hover:scale-105 transition-transform duration-300"
-                                        style={{ maxHeight: '200px' }}
+                                        className="block max-w-full h-auto cursor-zoom-in transition-transform duration-300 group-hover:scale-[1.02]"
+                                        style={{ maxHeight: "260px" }}
                                         onClick={() => setFullscreenPreview({ url })}
                                         onDoubleClick={(e) => {
                                           e.preventDefault();