From 432d8adbbf17bef69f0ce97efd4cec975e7937ad Mon Sep 17 00:00:00 2001
From: Alix-007 <267018309+Alix-007@users.noreply.github.com>
Date: Fri, 27 Mar 2026 01:41:35 +0800
Subject: [PATCH] fix(web/chat): gate assistant animation to live stream state

---
 .../src/components/chat/assistant-message.tsx       | 13 +++++--------
 web/frontend/src/components/chat/chat-page.tsx      |  8 +++++++-
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/web/frontend/src/components/chat/assistant-message.tsx b/web/frontend/src/components/chat/assistant-message.tsx
index ae63130c6..d5dc5b6b3 100644
--- a/web/frontend/src/components/chat/assistant-message.tsx
+++ b/web/frontend/src/components/chat/assistant-message.tsx
@@ -12,20 +12,18 @@ const STREAM_FRAME_MS = 18
 const STREAM_STEPS = 60
 
 interface AssistantMessageProps {
-  messageId?: string
   content: string
   timestamp?: string | number
+  isStreaming?: boolean
 }
 
 export function AssistantMessage({
-  messageId = "",
   content,
   timestamp = "",
+  isStreaming = false,
 }: AssistantMessageProps) {
   const [isCopied, setIsCopied] = useState(false)
-  const [displayedContent, setDisplayedContent] = useState(
-    messageId.startsWith("hist-") ? content : "",
-  )
+  const [displayedContent, setDisplayedContent] = useState(content)
   const timerRef = useRef<number | null>(null)
   const displayedRef = useRef(displayedContent)
   const formattedTimestamp =
@@ -50,13 +48,12 @@ export function AssistantMessage({
   }, [])
 
   useEffect(() => {
-    const isHistoryMessage = messageId.startsWith("hist-")
     if (timerRef.current !== null) {
       window.clearInterval(timerRef.current)
       timerRef.current = null
     }
 
-    if (isHistoryMessage || content.trim() === "") {
+    if (!isStreaming || content.trim() === "") {
       queueMicrotask(() => syncDisplayedContent(content))
       return
     }
@@ -86,7 +83,7 @@ export function AssistantMessage({
         timerRef.current = null
       }
     }, STREAM_FRAME_MS)
-  }, [content, messageId])
+  }, [content, isStreaming])
 
   const handleCopy = () => {
     navigator.clipboard.writeText(content).then(() => {
diff --git a/web/frontend/src/components/chat/chat-page.tsx b/web/frontend/src/components/chat/chat-page.tsx
index 4ff8462a3..59d1e8ad1 100644
--- a/web/frontend/src/components/chat/chat-page.tsx
+++ b/web/frontend/src/components/chat/chat-page.tsx
@@ -66,6 +66,12 @@ export function ChatPage() {
     setIsAtBottom(scrollHeight - scrollTop <= clientHeight + 10)
   }
 
+  const liveAssistantMessageId = isTyping
+    ? [...messages]
+        .reverse()
+        .find((message) => message.role === "assistant")?.id
+    : undefined
+
   const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
     syncScrollState(e.currentTarget)
   }
@@ -150,9 +156,9 @@ export function ChatPage() {
             <div key={msg.id} className="flex w-full">
               {msg.role === "assistant" ? (
                 <AssistantMessage
-                  messageId={msg.id}
                   content={msg.content}
                   timestamp={msg.timestamp}
+                  isStreaming={msg.id === liveAssistantMessageId}
                 />
               ) : (
                 <UserMessage content={msg.content} />