From 8311bbdf6cf1c2ffb53ae4b3fff376f952c7cd52 Mon Sep 17 00:00:00 2001
From: ddcat666 <26564566+ddcat666@users.noreply.github.com>
Date: Sun, 27 Sep 2026 18:41:19 +0800
Subject: [PATCH] =?UTF-8?q?fix(canvas):=20=E6=81=A2=E5=A4=8D=20Agent=20?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E8=A7=86=E8=A7=89=E6=A0=87=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/canvas-cloud-agent-chat-ui.tsx       | 16 ++++++++++++++++
 .../components/canvas/canvas-cloud-agent.css    | 17 +++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/web/src/components/canvas/canvas-cloud-agent-chat-ui.tsx b/web/src/components/canvas/canvas-cloud-agent-chat-ui.tsx
index f7ee756b3..a5105d13b 100644
--- a/web/src/components/canvas/canvas-cloud-agent-chat-ui.tsx
+++ b/web/src/components/canvas/canvas-cloud-agent-chat-ui.tsx
@@ -22,6 +22,7 @@ import {
     ArrowUp,
     AtSign,
     Bookmark,
+    BrainCircuit,
     CheckCircle2,
     ChevronDown,
     ChevronUp,
@@ -35,6 +36,7 @@ import {
     List,
     ListChecks,
     LoaderCircle,
+    MessageCircle,
     Palette,
     Pencil,
     Plus,
@@ -42,6 +44,7 @@ import {
     Shapes,
     Share2,
     ShoppingBag,
+    UserRound,
     Sparkles,
     Square,
     Wrench,
@@ -477,6 +480,11 @@ export function AgentChatMessage({
     }
     return (
         <div className={`flex items-start gap-3 ${isUser ? "justify-end" : "justify-start"}`}>
+            {!isUser ? (
+                <span className="agent-message-icon agent-message-icon--assistant" aria-hidden="true">
+                    <MessageCircle className="size-4" />
+                </span>
+            ) : null}
             <div className={`agent-message-body min-w-0 text-sm leading-6 ${isUser ? "agent-message-user max-w-[82%] px-4 py-3 text-right" : "max-w-full flex-1 text-left"}`} style={{ color }}>
                 {item.interjection ? (
                     <span
@@ -498,6 +506,11 @@ export function AgentChatMessage({
                 {item.attachments?.length ? <AgentMessageAttachments attachments={item.attachments} /> : null}
                 {item.meta ? <div className="mt-1 text-[var(--fs-label)] opacity-45">{item.meta}</div> : null}
             </div>
+            {isUser ? (
+                <span className="agent-message-icon agent-message-icon--user" aria-hidden="true">
+                    <UserRound className="size-4" />
+                </span>
+            ) : null}
         </div>
     );
 }
@@ -517,6 +530,9 @@ export function AgentReasoningFeed({ items, theme }: { items: CloudAgentChatMess
         <div className="agent-reasoning" style={{ "--agent-reasoning-accent": theme.accent.primary } as CSSProperties}>
             <details className={`agent-reasoning-card${streaming ? " is-streaming" : ""}`}>
                 <summary className="agent-reasoning-summary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/20">
+                    <span className={`agent-reasoning-icon${streaming ? " is-live" : ""}`} aria-hidden="true">
+                        <BrainCircuit className="size-4" />
+                    </span>
                     <span className="agent-reasoning-copy">
                         <span className="agent-reasoning-title">{streaming ? "模型正在思考" : "模型思考"}</span>
                         <span className="agent-reasoning-subtitle">{streaming ? "实时整理 · 点击查看" : `${countLabel}点击查看`}</span>
diff --git a/web/src/components/canvas/canvas-cloud-agent.css b/web/src/components/canvas/canvas-cloud-agent.css
index 6f72c89d7..fa1ef027b 100644
--- a/web/src/components/canvas/canvas-cloud-agent.css
+++ b/web/src/components/canvas/canvas-cloud-agent.css
@@ -1791,6 +1791,23 @@
     background: color-mix(in srgb, var(--agent-reasoning-accent) 4%, transparent);
 }
 
+/* 只留无底图标：与正文标记使用同一套轻量视觉语言。 */
+.agent-reasoning-icon {
+    display: grid;
+    width: var(--agent-thought-icon, 16px);
+    height: var(--agent-thought-icon, 16px);
+    flex: 0 0 var(--agent-thought-icon, 16px);
+    place-items: center;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    color: color-mix(in srgb, var(--agent-reasoning-accent) 82%, var(--foreground));
+}
+
+.agent-reasoning-icon.is-live {
+    animation: agent-reasoning-icon-pulse 1.8s ease-in-out infinite;
+}
+
 .agent-reasoning-copy {
     display: flex;
     min-width: 0;