From 7639e0677bb2b80173931b40e83b2ccc008507c9 Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Wed, 31 Dec 2025 09:27:21 +0800
Subject: [PATCH] fix: stabilize thinking block animation and bg streaming

---
 static/src/components/chat/ChatArea.vue       |  3 ++-
 static/src/composables/useLegacySocket.ts     | 27 ++++++++++++++++++-
 .../styles/components/chat/_chat-area.scss    |  4 +++
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/static/src/components/chat/ChatArea.vue b/static/src/components/chat/ChatArea.vue
index af1edc0..816b52b 100644
--- a/static/src/components/chat/ChatArea.vue
+++ b/static/src/components/chat/ChatArea.vue
@@ -42,7 +42,8 @@
             :class="{
               'streaming-content': action.streaming,
               'completed-tool': action.type === 'tool' && !action.streaming,
-              'immediate-show': action.streaming || action.type === 'text'
+              'immediate-show': action.streaming || action.type === 'text' || action.type === 'thinking',
+              'thinking-finished': action.type === 'thinking' && !action.streaming
             }"
           >
             <div
diff --git a/static/src/composables/useLegacySocket.ts b/static/src/composables/useLegacySocket.ts
index 4f7f1af..0a8f7d3 100644
--- a/static/src/composables/useLegacySocket.ts
+++ b/static/src/composables/useLegacySocket.ts
@@ -388,7 +388,27 @@ export async function initializeLegacySocket(ctx: any) {
             return action;
         };
 
+        const drainStreamingBufferImmediately = () => {
+            if (!streamingState.buffer.length) {
+                return;
+            }
+            const chunk = streamingState.buffer.join('');
+            streamingState.buffer.length = 0;
+            applyTextChunk(chunk);
+        };
+
         const scheduleStreamingFlush = () => {
+            const shouldFlushImmediately = typeof document !== 'undefined' && document.hidden === true;
+            if (shouldFlushImmediately) {
+                stopStreamingTimer();
+                drainStreamingBufferImmediately();
+                if (streamingState.apiCompleted) {
+                    finalizeStreamingText({ force: true });
+                } else {
+                    scheduleFinalizationAfterDrain();
+                }
+                return;
+            }
             if (streamingState.timer !== null) {
                 logStreamingDebug('scheduleStreamingFlush:timer-exists', snapshotStreamingState());
                 return;
@@ -814,7 +834,12 @@ export async function initializeLegacySocket(ctx: any) {
             });
             streamingState.apiCompleted = true;
             streamingState.pendingCompleteContent = data?.full_content || '';
-            if (!streamingState.buffer.length) {
+            const hidden = typeof document !== 'undefined' && document.hidden === true;
+            if (hidden) {
+                stopStreamingTimer();
+                drainStreamingBufferImmediately();
+                finalizeStreamingText({ force: true });
+            } else if (!streamingState.buffer.length) {
                 scheduleFinalizationAfterDrain();
             } else {
                 scheduleStreamingFlush();
diff --git a/static/src/styles/components/chat/_chat-area.scss b/static/src/styles/components/chat/_chat-area.scss
index 9fec7f6..772b85c 100644
--- a/static/src/styles/components/chat/_chat-area.scss
+++ b/static/src/styles/components/chat/_chat-area.scss
@@ -295,6 +295,10 @@
     animation-delay: 100ms;
 }
 
+.action-item.thinking-finished {
+    animation: none;
+}
+
 .progress-indicator {
     position: absolute;
     bottom: 0;