优化画布对话预览图样式与图片消息气泡

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"
+                                        className="block max-w-full h-auto cursor-zoom-in transition-transform duration-300 group-hover:scale-[1.02]"
-                                        style={{ maxHeight: '200px' }}
+                                        style={{ maxHeight: "260px" }}
                                         onClick={() => setFullscreenPreview({ url })}
                                         onDoubleClick={(e) => {
                                           e.preventDefault();