From ed2b0dabadec9d351364035bd79906d3553b6430 Mon Sep 17 00:00:00 2001
From: HouYunFei <1844025705@qq.com>
Date: Fri, 31 Jul 2026 11:33:25 +0800
Subject: [PATCH] feat(agent): optimize Agent's streaming response by removing
 word-by-word animation queue and adjusting message placeholder behavior

---
 CHANGELOG.md                                    | 1 +
 web/src/components/agent/agent-chat-message.tsx | 5 +++--
 web/src/components/agent/agent-chat.tsx         | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ad778c4..a486296 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 + [新增] 画布右侧Agent支持按当前账号可用范围选择Codex 模型与推理强度。
 + [优化] Canvas Agent 升级至最新 Codex，启动时检查版本更新，
 + [优化] 统一通过公共日志输出 Info 以上信息，美化转发日志时间。
++ [优化] Agent高速流式回复取消逐词动画排队和当前消息离屏占位。
 + [修复] Agent首次发送消息时立即保留并展示用户内容，不再晚于思考状态。
 
 ## v0.12.0 - 2026-07-30
diff --git a/web/src/components/agent/agent-chat-message.tsx b/web/src/components/agent/agent-chat-message.tsx
index d252fbb..cc995d4 100644
--- a/web/src/components/agent/agent-chat-message.tsx
+++ b/web/src/components/agent/agent-chat-message.tsx
@@ -23,6 +23,7 @@ const streamdownProps = {
         openLink: "继续打开",
     },
 } as const;
+const streamdownAnimation = { duration: 20, stagger: 0, sep: "word" } as const;
 
 function AgentLinkModal({ isOpen, onClose, onConfirm, url }: LinkSafetyModalProps) {
     const { message } = App.useApp();
@@ -127,7 +128,7 @@ export function AgentChatMessage({ item, theme, onRejectTool, onApproveTool }: {
                 {isUser ? (
                     <div className="whitespace-pre-wrap break-words">{item.text}</div>
                 ) : (
-                    <Streamdown {...streamdownProps} animated isAnimating={!!item.streamId}>{item.text}</Streamdown>
+                    <Streamdown {...streamdownProps} animated={streamdownAnimation} isAnimating={!!item.streamId}>{item.text}</Streamdown>
                 )}
                 {item.attachments?.length ? <AgentMessageAttachments attachments={item.attachments} alignRight={isUser} /> : null}
                 {item.meta ? <div className={`mt-1 text-[11px] tabular-nums opacity-55 ${isUser ? "text-right" : ""}`}>{item.meta}</div> : null}
@@ -231,7 +232,7 @@ function AgentReasoningSummary({ text, detail, theme }: { text: string; detail?:
                 </div>
             </summary>
             <div className="break-words pb-1 pl-6 pr-2 text-xs leading-5 [&_code]:rounded [&_code]:px-1 [&_p]:my-1 [&_pre]:my-2" style={{ color: theme.node.muted }}>
-                <Streamdown {...streamdownProps} animated isAnimating={running}>{text}</Streamdown>
+                <Streamdown {...streamdownProps} animated={streamdownAnimation} isAnimating={running}>{text}</Streamdown>
             </div>
         </details>
     );
diff --git a/web/src/components/agent/agent-chat.tsx b/web/src/components/agent/agent-chat.tsx
index 12bcc27..448ba99 100644
--- a/web/src/components/agent/agent-chat.tsx
+++ b/web/src/components/agent/agent-chat.tsx
@@ -10,6 +10,7 @@ import { AgentApprovalCard, AgentChatMessage, AgentPendingToolCard, AgentToolCar
 import { agentMessageToChatMessage, currentPlanMessage, isPlanMessage, latestPlanMessage, toolCallDetail, toolName, workingActivity } from "./agent-event-formatters";
 
 const SCROLL_BOTTOM_THRESHOLD = 48;
+const historyMessageStyle = { contentVisibility: "auto", containIntrinsicSize: "0 80px" } as const;
 
 export function AgentChatTimeline({
     theme,
@@ -101,7 +102,7 @@ export function AgentTaskProgress({ theme, busy }: { theme: (typeof canvasThemes
 
 const AgentChatMessageRow = memo(function AgentChatMessageRow({ item, theme }: { item: AgentChatItem; theme: (typeof canvasThemes)[keyof typeof canvasThemes] }) {
     return (
-        <div style={{ contentVisibility: "auto", containIntrinsicSize: "0 80px" }}>
+        <div style={item.streamId ? undefined : historyMessageStyle}>
             <AgentChatMessage item={agentMessageToChatMessage(item)} theme={theme} />
         </div>
     );