🐛 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
This commit is contained in:
Apple\Apple
2025-05-31 01:29:19 +08:00
parent 02bc3cde53
commit caff73a746
2 changed files with 27 additions and 5 deletions

View File

@@ -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
}
];
}

View File

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