From caff73a746aa080823cd475a479766860f314254 Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Sat, 31 May 2025 01:29:19 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(Playground):=20Fix=20reasoni?=
 =?UTF-8?q?ng=20panel=20auto-collapse=20behavior=20to=20allow=20user=20con?=
 =?UTF-8?q?trol?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add `hasAutoCollapsed` flag to track auto-collapse state
- Modify reasoning panel to auto-collapse only once after thinking completion
- Allow users to manually toggle reasoning panel after auto-collapse
- Update message creation, streaming updates, and completion handlers
- Ensure consistent behavior across stream/non-stream requests and error cases

Previously, the reasoning/thinking panel would auto-collapse every time
the AI completed its thinking process, preventing users from reopening
it to review the reasoning content. Now it auto-collapses only once
when thinking is complete, then allows full user control.

Files changed:
- web/src/hooks/useApiRequest.js: Updated all message handling functions
- web/src/utils/messageUtils.js: Added hasAutoCollapsed to initial state
---
 web/src/hooks/useApiRequest.js | 31 ++++++++++++++++++++++++++-----
 web/src/utils/messageUtils.js  |  1 +
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/web/src/hooks/useApiRequest.js b/web/src/hooks/useApiRequest.js
index 78e0f952..b9b76ad2 100644
--- a/web/src/hooks/useApiRequest.js
+++ b/web/src/hooks/useApiRequest.js
@@ -65,12 +65,16 @@ export const useApiRequest = (
           const isThinkingComplete = (lastMessage.reasoningContent && !lastMessage.isThinkingComplete) ||
             thinkingCompleteFromTags;
 
+          // 只在第一次思考完成时自动关闭，之后由用户控制
+          const shouldAutoCollapse = isThinkingComplete && !lastMessage.hasAutoCollapsed;
+
           newMessage = {
             ...newMessage,
             content: newContent,
             status: MESSAGE_STATUS.INCOMPLETE,
             isThinkingComplete: isThinkingComplete,
-            isReasoningExpanded: (shouldCollapseReasoning || shouldCollapseFromThinkTag)
+            hasAutoCollapsed: shouldAutoCollapse ? true : lastMessage.hasAutoCollapsed,
+            isReasoningExpanded: shouldAutoCollapse
               ? false : lastMessage.isReasoningExpanded,
           };
         }
@@ -90,13 +94,18 @@ export const useApiRequest = (
         lastMessage.status === MESSAGE_STATUS.ERROR) {
         return prevMessage;
       }
+
+      // 只在第一次思考完成时自动关闭，之后由用户控制
+      const shouldAutoCollapse = !lastMessage.hasAutoCollapsed;
+
       return [
         ...prevMessage.slice(0, -1),
         {
           ...lastMessage,
           status: status,
           isThinkingComplete: true,
-          isReasoningExpanded: false
+          hasAutoCollapsed: shouldAutoCollapse ? true : lastMessage.hasAutoCollapsed,
+          isReasoningExpanded: shouldAutoCollapse ? false : lastMessage.isReasoningExpanded
         }
       ];
     });
@@ -163,13 +172,17 @@ export const useApiRequest = (
           const newMessages = [...prevMessage];
           const lastMessage = newMessages[newMessages.length - 1];
           if (lastMessage?.status === MESSAGE_STATUS.LOADING) {
+            // 只在第一次思考完成时自动关闭，之后由用户控制
+            const shouldAutoCollapse = !lastMessage.hasAutoCollapsed;
+
             newMessages[newMessages.length - 1] = {
               ...lastMessage,
               content: processed.content,
               reasoningContent: processed.reasoningContent,
               status: MESSAGE_STATUS.COMPLETE,
               isThinkingComplete: true,
-              isReasoningExpanded: false
+              hasAutoCollapsed: shouldAutoCollapse ? true : lastMessage.hasAutoCollapsed,
+              isReasoningExpanded: shouldAutoCollapse ? false : lastMessage.isReasoningExpanded
             };
           }
           return newMessages;
@@ -189,12 +202,16 @@ export const useApiRequest = (
         const newMessages = [...prevMessage];
         const lastMessage = newMessages[newMessages.length - 1];
         if (lastMessage?.status === MESSAGE_STATUS.LOADING) {
+          // 只在第一次思考完成时自动关闭，之后由用户控制
+          const shouldAutoCollapse = !lastMessage.hasAutoCollapsed;
+
           newMessages[newMessages.length - 1] = {
             ...lastMessage,
             content: t('请求发生错误: ') + error.message,
             status: MESSAGE_STATUS.ERROR,
             isThinkingComplete: true,
-            isReasoningExpanded: false
+            hasAutoCollapsed: shouldAutoCollapse ? true : lastMessage.hasAutoCollapsed,
+            isReasoningExpanded: shouldAutoCollapse ? false : lastMessage.isReasoningExpanded
           };
         }
         return newMessages;
@@ -338,6 +355,9 @@ export const useApiRequest = (
             lastMessage.reasoningContent || ''
           );
 
+          // 只在第一次思考完成时自动关闭，之后由用户控制
+          const shouldAutoCollapse = !lastMessage.hasAutoCollapsed;
+
           return [
             ...prevMessage.slice(0, -1),
             {
@@ -346,7 +366,8 @@ export const useApiRequest = (
               reasoningContent: processed.reasoningContent || null,
               content: processed.content,
               isThinkingComplete: true,
-              isReasoningExpanded: false
+              hasAutoCollapsed: shouldAutoCollapse ? true : lastMessage.hasAutoCollapsed,
+              isReasoningExpanded: shouldAutoCollapse ? false : lastMessage.isReasoningExpanded
             }
           ];
         }
diff --git a/web/src/utils/messageUtils.js b/web/src/utils/messageUtils.js
index 52267e07..52e13295 100644
--- a/web/src/utils/messageUtils.js
+++ b/web/src/utils/messageUtils.js
@@ -107,6 +107,7 @@ export const createLoadingAssistantMessage = () => createMessage(
     reasoningContent: '',
     isReasoningExpanded: true,
     isThinkingComplete: false,
+    hasAutoCollapsed: false,
     status: 'loading'
   }
 );