fix(canvas): 移除 Agent 消息装饰图标

2026-09-27 19:41:10 +08:00
parent 8311bbdf6c
commit af8eedf2df
3 changed files with 13 additions and 54 deletions
--- a/web/src/components/canvas/canvas-cloud-agent-chat-ui.tsx
+++ b/web/src/components/canvas/canvas-cloud-agent-chat-ui.tsx
@@ -22,7 +22,6 @@ import {
    ArrowUp,
    AtSign,
    Bookmark,
-    BrainCircuit,
    CheckCircle2,
    ChevronDown,
    ChevronUp,
@@ -36,7 +35,6 @@ import {
    List,
    ListChecks,
    LoaderCircle,
-    MessageCircle,
    Palette,
    Pencil,
    Plus,
@@ -44,7 +42,6 @@ import {
    Shapes,
    Share2,
    ShoppingBag,
-    UserRound,
    Sparkles,
    Square,
    Wrench,
@@ -480,11 +477,6 @@ 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
@@ -506,11 +498,6 @@ 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>
    );
 }
@@ -530,9 +517,6 @@ 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>
--- a/web/src/components/canvas/canvas-cloud-agent.css
+++ b/web/src/components/canvas/canvas-cloud-agent.css
@@ -401,9 +401,6 @@
 }

 .agent-conversation-messages {
-    --agent-thought-icon: 16px;
-    --agent-thought-gap: 9px;
-    --agent-summary-inset: 4px;
    min-width: 0;
 }

@@ -1791,23 +1788,6 @@
    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;
--- a/web/test/agent-operation-feed-view.test.tsx
+++ b/web/test/agent-operation-feed-view.test.tsx
@@ -22,8 +22,8 @@ test("consecutive reasoning messages share one collapsed entry", () => {
    const html = renderToStaticMarkup(<AgentReasoningFeed items={messages.slice(0, 2)} theme={canvasThemes.light} />);
    expect(html).toContain("2 段 · 点击查看");
    expect(html).toContain('class="agent-reasoning-card"');
-    expect(html).toContain('class="agent-reasoning-icon"');
-    expect(html).toContain("lucide-brain-circuit");
+    expect(html).not.toContain("agent-reasoning-icon");
+    expect(html).not.toContain("lucide-brain-circuit");
    expect(html).not.toContain("is-live");
    expect(html).not.toContain(" open");
 });
@@ -43,17 +43,18 @@ test("operations fold into one line that reports only the latest action", () =>
    }
 });

-test("messages and live reasoning expose their visual markers", () => {
+test("messages and reasoning stay free of decorative side icons", () => {
    const assistant = renderToStaticMarkup(<AgentChatMessage item={{ id: "a1", role: "assistant", text: "已完成。" }} theme={canvasThemes.light} />);
-    expect(assistant).toContain('class="agent-message-icon agent-message-icon--assistant"');
-    expect(assistant).toContain("lucide-message-circle");
+    expect(assistant).not.toContain("agent-message-icon");
+    expect(assistant).not.toContain("lucide-message-circle");

    const user = renderToStaticMarkup(<AgentChatMessage item={{ id: "u1", role: "user", text: "继续处理" }} theme={canvasThemes.light} />);
-    expect(user).toContain('class="agent-message-icon agent-message-icon--user"');
-    expect(user).toContain("lucide-user-round");
+    expect(user).not.toContain("agent-message-icon");
+    expect(user).not.toContain("lucide-user-round");

    const live = renderToStaticMarkup(<AgentReasoningFeed items={[{ id: "r1", role: "assistant", text: "正在整理", reasoning: true, streaming: true }]} theme={canvasThemes.light} />);
-    expect(live).toContain('class="agent-reasoning-icon is-live"');
+    expect(live).not.toContain("agent-reasoning-icon");
+    expect(live).not.toContain("lucide-brain-circuit");
    expect(live).toContain("模型正在思考");
 });

@@ -115,29 +116,23 @@ test("style contract: 正文 / 工具调用 / 模型思考三档不再制造左
    // 同一选择器可能在容器查询里被覆盖，这里把所有命中块拼起来看整体契约。
    const block = (selector: string) => [...css.matchAll(new RegExp(`${selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")} \\{([^}]*)\\}`, "g"))].map((match) => match[1]).join("\n");

-    // ① 星标后面不再有圆底：只留图标本身
-    const icon = block(".agent-reasoning-icon");
-    expect(icon).toContain("background: transparent");
-    expect(icon).not.toContain("border-radius: 50%");
-
-    // ② 对话正文从容器边缘开始，不为过程内容预留一条空的公共轴沟槽。
+    // ① 对话正文从容器边缘开始，不为过程内容预留一条空的公共轴沟槽。
    const axis = block(".agent-conversation-messages");
    expect(axis).not.toContain("--agent-axis");
    expect(axis).not.toContain("padding-left: var(--agent-axis)");

-    // ③ 思维摘要与正文同一左边缘，不再用负 margin 把星标挂进沟槽。
+    // ② 思维摘要与正文同一左边缘，不再用负 margin 把装饰标记挂进沟槽。
    const reasoning = block(".agent-reasoning");
    expect(reasoning).not.toContain("margin-left");
    expect(reasoning).not.toContain("border-left");
    expect(block(".agent-reasoning-summary")).toContain("padding: 6px 0");
-    expect(block(".agent-reasoning-icon.is-live")).toContain("animation: agent-reasoning-icon-pulse");

-    // ④ 操作流是轻量文本收据，不再绘制竖线或额外左缩进。
+    // ③ 操作流是轻量文本收据，不再绘制竖线或额外左缩进。
    const feed = block(".agent-operation-feed");
    expect(feed).not.toContain("border-left");
    expect(feed).not.toContain("padding-left");

-    // ⑤ 时间线标记只占自己的窄图标列，不再把状态正文推得过远。
+    // ④ 时间线标记只占自己的窄图标列，不再把状态正文推得过远。
    expect(block(".agent-timeline-marker")).toContain("width: 20px");
    expect(block(".agent-conversation-messages .agent-timeline-marker")).not.toContain("margin-left");
 });