Просмотр исходного кода

🐛 fix(Playground): Fix reasoning panel auto-collapse behavior to allow user control

- 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
Apple\Apple 9 месяцев назад
Родитель
Сommit
caff73a746
2 измененных файлов с 27 добавлено и 5 удалено
  1. 26 5
      web/src/hooks/useApiRequest.js
  2. 1 0
      web/src/utils/messageUtils.js

+ 26 - 5
web/src/hooks/useApiRequest.js

@@ -65,12 +65,16 @@ export const useApiRequest = (
           const isThinkingComplete = (lastMessage.reasoningContent && !lastMessage.isThinkingComplete) ||
           const isThinkingComplete = (lastMessage.reasoningContent && !lastMessage.isThinkingComplete) ||
             thinkingCompleteFromTags;
             thinkingCompleteFromTags;
 
 
+          // 只在第一次思考完成时自动关闭,之后由用户控制
+          const shouldAutoCollapse = isThinkingComplete && !lastMessage.hasAutoCollapsed;
+
           newMessage = {
           newMessage = {
             ...newMessage,
             ...newMessage,
             content: newContent,
             content: newContent,
             status: MESSAGE_STATUS.INCOMPLETE,
             status: MESSAGE_STATUS.INCOMPLETE,
             isThinkingComplete: isThinkingComplete,
             isThinkingComplete: isThinkingComplete,
-            isReasoningExpanded: (shouldCollapseReasoning || shouldCollapseFromThinkTag)
+            hasAutoCollapsed: shouldAutoCollapse ? true : lastMessage.hasAutoCollapsed,
+            isReasoningExpanded: shouldAutoCollapse
               ? false : lastMessage.isReasoningExpanded,
               ? false : lastMessage.isReasoningExpanded,
           };
           };
         }
         }
@@ -90,13 +94,18 @@ export const useApiRequest = (
         lastMessage.status === MESSAGE_STATUS.ERROR) {
         lastMessage.status === MESSAGE_STATUS.ERROR) {
         return prevMessage;
         return prevMessage;
       }
       }
+
+      // 只在第一次思考完成时自动关闭,之后由用户控制
+      const shouldAutoCollapse = !lastMessage.hasAutoCollapsed;
+
       return [
       return [
         ...prevMessage.slice(0, -1),
         ...prevMessage.slice(0, -1),
         {
         {
           ...lastMessage,
           ...lastMessage,
           status: status,
           status: status,
           isThinkingComplete: true,
           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 newMessages = [...prevMessage];
           const lastMessage = newMessages[newMessages.length - 1];
           const lastMessage = newMessages[newMessages.length - 1];
           if (lastMessage?.status === MESSAGE_STATUS.LOADING) {
           if (lastMessage?.status === MESSAGE_STATUS.LOADING) {
+            // 只在第一次思考完成时自动关闭,之后由用户控制
+            const shouldAutoCollapse = !lastMessage.hasAutoCollapsed;
+
             newMessages[newMessages.length - 1] = {
             newMessages[newMessages.length - 1] = {
               ...lastMessage,
               ...lastMessage,
               content: processed.content,
               content: processed.content,
               reasoningContent: processed.reasoningContent,
               reasoningContent: processed.reasoningContent,
               status: MESSAGE_STATUS.COMPLETE,
               status: MESSAGE_STATUS.COMPLETE,
               isThinkingComplete: true,
               isThinkingComplete: true,
-              isReasoningExpanded: false
+              hasAutoCollapsed: shouldAutoCollapse ? true : lastMessage.hasAutoCollapsed,
+              isReasoningExpanded: shouldAutoCollapse ? false : lastMessage.isReasoningExpanded
             };
             };
           }
           }
           return newMessages;
           return newMessages;
@@ -189,12 +202,16 @@ export const useApiRequest = (
         const newMessages = [...prevMessage];
         const newMessages = [...prevMessage];
         const lastMessage = newMessages[newMessages.length - 1];
         const lastMessage = newMessages[newMessages.length - 1];
         if (lastMessage?.status === MESSAGE_STATUS.LOADING) {
         if (lastMessage?.status === MESSAGE_STATUS.LOADING) {
+          // 只在第一次思考完成时自动关闭,之后由用户控制
+          const shouldAutoCollapse = !lastMessage.hasAutoCollapsed;
+
           newMessages[newMessages.length - 1] = {
           newMessages[newMessages.length - 1] = {
             ...lastMessage,
             ...lastMessage,
             content: t('请求发生错误: ') + error.message,
             content: t('请求发生错误: ') + error.message,
             status: MESSAGE_STATUS.ERROR,
             status: MESSAGE_STATUS.ERROR,
             isThinkingComplete: true,
             isThinkingComplete: true,
-            isReasoningExpanded: false
+            hasAutoCollapsed: shouldAutoCollapse ? true : lastMessage.hasAutoCollapsed,
+            isReasoningExpanded: shouldAutoCollapse ? false : lastMessage.isReasoningExpanded
           };
           };
         }
         }
         return newMessages;
         return newMessages;
@@ -338,6 +355,9 @@ export const useApiRequest = (
             lastMessage.reasoningContent || ''
             lastMessage.reasoningContent || ''
           );
           );
 
 
+          // 只在第一次思考完成时自动关闭,之后由用户控制
+          const shouldAutoCollapse = !lastMessage.hasAutoCollapsed;
+
           return [
           return [
             ...prevMessage.slice(0, -1),
             ...prevMessage.slice(0, -1),
             {
             {
@@ -346,7 +366,8 @@ export const useApiRequest = (
               reasoningContent: processed.reasoningContent || null,
               reasoningContent: processed.reasoningContent || null,
               content: processed.content,
               content: processed.content,
               isThinkingComplete: true,
               isThinkingComplete: true,
-              isReasoningExpanded: false
+              hasAutoCollapsed: shouldAutoCollapse ? true : lastMessage.hasAutoCollapsed,
+              isReasoningExpanded: shouldAutoCollapse ? false : lastMessage.isReasoningExpanded
             }
             }
           ];
           ];
         }
         }

+ 1 - 0
web/src/utils/messageUtils.js

@@ -107,6 +107,7 @@ export const createLoadingAssistantMessage = () => createMessage(
     reasoningContent: '',
     reasoningContent: '',
     isReasoningExpanded: true,
     isReasoningExpanded: true,
     isThinkingComplete: false,
     isThinkingComplete: false,
+    hasAutoCollapsed: false,
     status: 'loading'
     status: 'loading'
   }
   }
 );
 );