🐛fix: Fix React hooks order violation causing page crash on API errors

- Move useEffect hooks before conditional returns in MessageContent and ThinkingContent
- Ensure hooks are called in the same order every render
- Fix "Rendered fewer hooks than expected" error when API returns non-200 status
- Follow React hooks rules: only call hooks at the top level

This prevents the entire page from crashing when API requests fail.

web/src/components/playground/MessageContent.js

@@ -28,6 +28,15 @@ const MessageContent = ({
   const previousContentLengthRef = useRef(0);
   const lastContentRef = useRef('');
 
+  const isThinkingStatus = message.status === 'loading' || message.status === 'incomplete';
+
+  useEffect(() => {
+    if (!isThinkingStatus) {
+      previousContentLengthRef.current = 0;
+      lastContentRef.current = '';
+    }
+  }, [isThinkingStatus]);
+
   if (message.status === 'error') {
     let errorText;
 
@@ -51,7 +60,6 @@ const MessageContent = ({
     );
   }
 
-  const isThinkingStatus = message.status === 'loading' || message.status === 'incomplete';
   let currentExtractedThinkingContent = null;
   let currentDisplayableFinalContent = "";
   let thinkingSource = null;
@@ -130,14 +138,6 @@ const MessageContent = ({
   const finalExtractedThinkingContent = currentExtractedThinkingContent;
   const finalDisplayableFinalContent = currentDisplayableFinalContent;
 
-  // 流式状态结束时重置
-  useEffect(() => {
-    if (!isThinkingStatus) {
-      previousContentLengthRef.current = 0;
-      lastContentRef.current = '';
-    }
-  }, [isThinkingStatus]);
-
   if (message.role === 'assistant' &&
     isThinkingStatus &&
     !finalExtractedThinkingContent &&