✨ 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/components/playground/MessageContent.js

@@ -128,7 +128,7 @@ const MessageContent = ({
     currentDisplayableFinalContent = baseContentForDisplay.replace(/<\/?think>/g, '').trim();
   }
 
-  const headerText = isThinkingStatus ? t('思考中...') : t('思考过程');
+  const headerText = (isThinkingStatus && !message.isThinkingComplete) ? t('思考中...') : t('思考过程');
   const finalExtractedThinkingContent = currentExtractedThinkingContent;
   const finalDisplayableFinalContent = currentDisplayableFinalContent;
 
@@ -192,7 +192,7 @@ const MessageContent = ({
               </div>
             </div>
             <div className="flex items-center gap-2 sm:gap-3">
-              {isThinkingStatus && (
+              {isThinkingStatus && !message.isThinkingComplete && (
                 <div className="flex items-center gap-1 sm:gap-2">
                   <Loader2 className="animate-spin text-purple-500" size={styleState.isMobile ? 14 : 18} />
                   <Typography.Text className="text-purple-600 text-xs sm:text-sm font-medium">
@@ -200,7 +200,7 @@ const MessageContent = ({
                   </Typography.Text>
                 </div>
               )}
-              {!isThinkingStatus && (
+              {(!isThinkingStatus || message.isThinkingComplete) && (
                 <div className="w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-purple-100 flex items-center justify-center">
                   {message.isReasoningExpanded ?
                     <ChevronUp size={styleState.isMobile ? 12 : 16} className="text-purple-600" /> :