✨ feat: improve thinking state management for better UX in reasoning display

Previously, the "thinking" indicator and loading icon would only disappear
after the entire message generation was complete, which created a poor user
experience where users had to wait for the full response to see that the
reasoning phase had finished.

Changes made:
- Add `isThinkingComplete` field to independently track reasoning state
- Update streaming logic to mark thinking complete when content starts flowing
- Detect closed `<think>` tags to mark reasoning completion
- Modify MessageContent component to use independent thinking state
- Update "思考中..." text and loading icon display conditions
- Ensure thinking state is properly set in all completion scenarios
  (non-stream, errors, manual stop)

Now the thinking section immediately shows as complete when reasoning ends,
rather than waiting for the entire message to finish, providing much better
real-time feedback to users.

Files modified:
- web/src/hooks/useApiRequest.js
- web/src/components/playground/MessageContent.js
- web/src/utils/messageUtils.js

web/src/hooks/useApiRequest.js

@@ -42,25 +42,34 @@ export const useApiRequest = (
             ...newMessage,
             reasoningContent: (lastMessage.reasoningContent || '') + textChunk,
             status: MESSAGE_STATUS.INCOMPLETE,
+            isThinkingComplete: false,
           };
         } else if (type === 'content') {
           const shouldCollapseReasoning = !lastMessage.content && lastMessage.reasoningContent;
           const newContent = (lastMessage.content || '') + textChunk;
 
           let shouldCollapseFromThinkTag = false;
+          let thinkingCompleteFromTags = lastMessage.isThinkingComplete;
+
           if (lastMessage.isReasoningExpanded && newContent.includes('</think>')) {
             const thinkMatches = newContent.match(/<think>/g);
             const thinkCloseMatches = newContent.match(/<\/think>/g);
             if (thinkMatches && thinkCloseMatches &&
               thinkCloseMatches.length >= thinkMatches.length) {
               shouldCollapseFromThinkTag = true;
+              thinkingCompleteFromTags = true; // think标签闭合也标记思考完成
             }
           }
 
+          // 如果开始接收content内容，且之前有reasoning内容，或者think标签已闭合，则标记思考完成
+          const isThinkingComplete = (lastMessage.reasoningContent && !lastMessage.isThinkingComplete) ||
+            thinkingCompleteFromTags;
+
           newMessage = {
             ...newMessage,
             content: newContent,
             status: MESSAGE_STATUS.INCOMPLETE,
+            isThinkingComplete: isThinkingComplete,
             isReasoningExpanded: (shouldCollapseReasoning || shouldCollapseFromThinkTag)
               ? false : lastMessage.isReasoningExpanded,
           };
@@ -86,6 +95,7 @@ export const useApiRequest = (
         {
           ...lastMessage,
           status: status,
+          isThinkingComplete: true,
           isReasoningExpanded: false
         }
       ];
@@ -158,6 +168,7 @@ export const useApiRequest = (
               content: processed.content,
               reasoningContent: processed.reasoningContent,
               status: MESSAGE_STATUS.COMPLETE,
+              isThinkingComplete: true,
               isReasoningExpanded: false
             };
           }
@@ -182,6 +193,7 @@ export const useApiRequest = (
             ...lastMessage,
             content: t('请求发生错误: ') + error.message,
             status: MESSAGE_STATUS.ERROR,
+            isThinkingComplete: true,
             isReasoningExpanded: false
           };
         }
@@ -333,6 +345,7 @@ export const useApiRequest = (
               status: MESSAGE_STATUS.COMPLETE,
               reasoningContent: processed.reasoningContent || null,
               content: processed.content,
+              isThinkingComplete: true,
               isReasoningExpanded: false
             }
           ];