@hef2024/llmasaservice-ui 0.22.11 → 0.23.0

package/src/ChatPanel.tsx

@@ -18,6 +18,7 @@ import materialDark from "react-syntax-highlighter/dist/esm/styles/prism/materia
 import materialLight from "react-syntax-highlighter/dist/esm/styles/prism/material-light.js";
 import EmailModal from "./EmailModal";
 import ToolInfoModal from "./ToolInfoModal";
+import { ThinkingBlock as ThinkingBlockComponent } from './components/ui';
 
 export interface ChatPanelProps {
   project_id: string;
@@ -218,12 +219,19 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
 
   // State for tracking thinking content and navigation
   const [thinkingBlocks, setThinkingBlocks] = useState<
-    Array<{ type: "reasoning" | "searching"; content: string; index: number }>
+    Array<{ type: "thinking" | "reasoning" | "searching"; content: string; index: number; isStreaming?: boolean }>
   >([]);
   const [currentThinkingIndex, setCurrentThinkingIndex] = useState(0);
+  // NOTE: activeThinkingBlock is now computed via useMemo, not useState - see below after processThinkingTags
+  // Track collapsed state per block (key: "block-{index}" or "active" for streaming block)
+  const [collapsedBlocks, setCollapsedBlocks] = useState<Set<string>>(new Set());
+  const hasAutoCollapsedRef = useRef(false); // Track if we've auto-collapsed for current response
+  const prevBlockCountRef = useRef(0); // Track previous block count to detect new blocks
 
   // State for error handling
   const [error, setError] = useState<{ message: string; code?: string } | null>(null);
+  // Ref to track last processed error to prevent re-showing same error from useLLM
+  const lastProcessedErrorRef = useRef<string | null>(null);
 
   // State for tracking user-resized textarea height
   const [userResizedHeight, setUserResizedHeight] = useState<number | null>(null);
@@ -310,6 +318,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   // Memoized regex patterns to avoid recreation on every render
   const THINKING_PATTERNS = useMemo(
     () => ({
+      thinking: /<thinking>([\s\S]*?)<\/thinking>/gi,
       reasoning: /<reasoning>([\s\S]*?)<\/reasoning>/gi,
       searching: /<searching>([\s\S]*?)<\/searching>/gi,
     }),
@@ -317,6 +326,10 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   );
 
   // Memoized regex instances for better performance
+  const thinkingRegex = useMemo(
+    () => new RegExp(THINKING_PATTERNS.thinking.source, "gi"),
+    [THINKING_PATTERNS.thinking.source]
+  );
   const reasoningRegex = useMemo(
     () => new RegExp(THINKING_PATTERNS.reasoning.source, "gi"),
     [THINKING_PATTERNS.reasoning.source]
@@ -343,23 +356,26 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
     return cleaned || "Thinking";
   }, []);
 
-  // Optimized function to extract thinking blocks in order
+  // Optimized function to extract thinking blocks in order - handles both complete and incomplete (streaming) tags
   const processThinkingTags = useCallback(
     (
       text: string
     ): {
       cleanedText: string;
-      thinkingBlocks: Array<{
-        type: "reasoning" | "searching";
+      completedBlocks: Array<{
+        type: "thinking" | "reasoning" | "searching";
         content: string;
         index: number;
+        isStreaming?: boolean;
       }>;
+      activeBlock: { type: "thinking" | "reasoning" | "searching"; content: string } | null;
       lastThinkingContent: string;
     } => {
       if (!text) {
         return {
           cleanedText: "",
-          thinkingBlocks: [],
+          completedBlocks: [],
+          activeBlock: null,
           lastThinkingContent: "Thinking",
         };
       }
@@ -371,14 +387,30 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
       const allMatches: Array<{
         content: string;
         index: number;
-        type: "reasoning" | "searching";
+        type: "thinking" | "reasoning" | "searching";
+        isStreaming?: boolean;
       }> = [];
 
       // Reset regex state for fresh matching
+      thinkingRegex.lastIndex = 0;
       reasoningRegex.lastIndex = 0;
       searchingRegex.lastIndex = 0;
 
-      // Process reasoning blocks
+      // Process complete thinking blocks (Claude-style)
+      let thinkingMatch;
+      while ((thinkingMatch = thinkingRegex.exec(processedText)) !== null) {
+        const content = thinkingMatch[1]?.trim();
+        if (content) {
+          allMatches.push({
+            content,
+            index: thinkingMatch.index,
+            type: "thinking",
+            isStreaming: false,
+          });
+        }
+      }
+
+      // Process complete reasoning blocks
       let reasoningMatch;
       while ((reasoningMatch = reasoningRegex.exec(processedText)) !== null) {
         const content = reasoningMatch[1]?.trim();
@@ -387,11 +419,12 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
             content,
             index: reasoningMatch.index,
             type: "reasoning",
+            isStreaming: false,
           });
         }
       }
 
-      // Process searching blocks
+      // Process complete searching blocks
       let searchingMatch;
       while ((searchingMatch = searchingRegex.exec(processedText)) !== null) {
         const content = searchingMatch[1]?.trim();
@@ -400,127 +433,105 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
             content,
             index: searchingMatch.index,
             type: "searching",
+            isStreaming: false,
           });
         }
       }
 
       // Sort by index to preserve original order
-      const thinkingBlocks = allMatches.sort((a, b) => a.index - b.index);
+      const completedBlocks = allMatches.sort((a, b) => a.index - b.index);
 
-      // Clean the text by removing thinking tags
+      // Check for incomplete (streaming) tags at the end of the text
+      // We need to find the LAST opening tag that doesn't have a corresponding closing tag
+      let activeBlock: { type: "thinking" | "reasoning" | "searching"; content: string } | null = null;
+      const tagTypes = ['thinking', 'reasoning', 'searching'] as const;
+      let latestIncompletePos = -1;
+      
+      for (const tagType of tagTypes) {
+        const openTag = `<${tagType}>`;
+        const closeTag = `</${tagType}>`;
+        const textLower = processedText.toLowerCase();
+        
+        // Find the last occurrence of this opening tag
+        const lastOpenIndex = textLower.lastIndexOf(openTag);
+        if (lastOpenIndex === -1) continue;
+        
+        // Check if there's a closing tag after this opening tag
+        const afterOpen = processedText.slice(lastOpenIndex + openTag.length);
+        const closeIndex = afterOpen.toLowerCase().indexOf(closeTag);
+        
+        // If no closing tag found after the opening tag, this is incomplete
+        if (closeIndex === -1 && lastOpenIndex > latestIncompletePos) {
+          latestIncompletePos = lastOpenIndex;
+          activeBlock = {
+            type: tagType,
+            content: afterOpen,
+          };
+        }
+      }
+      
+      // Also check for partial opening tags (e.g., "<reas" before full "<reasoning>")
+      // This helps show the thinking indicator earlier during streaming
+      if (!activeBlock) {
+        const partialTagPatterns = [
+          { pattern: /<think(?:i(?:n(?:g)?)?)?$/i, type: 'thinking' as const },
+          { pattern: /<reas(?:o(?:n(?:i(?:n(?:g)?)?)?)?)?$/i, type: 'reasoning' as const },
+          { pattern: /<sear(?:c(?:h(?:i(?:n(?:g)?)?)?)?)?$/i, type: 'searching' as const },
+        ];
+        
+        for (const { pattern, type } of partialTagPatterns) {
+          if (pattern.test(processedText)) {
+            activeBlock = { type, content: '' };
+            break;
+          }
+        }
+      }
+
+      // Clean the text by removing all thinking-related tags (complete and incomplete)
+      // Incomplete tags (opening without closing) are also removed so they don't show as raw text
       let cleanedText = processedText
+        .replace(THINKING_PATTERNS.thinking, "")
         .replace(THINKING_PATTERNS.reasoning, "")
         .replace(THINKING_PATTERNS.searching, "")
+        // Also remove partial opening tags
+        .replace(/<think(?:i(?:n(?:g)?)?)?$/i, "")
+        .replace(/<reas(?:o(?:n(?:i(?:n(?:g)?)?)?)?)?$/i, "")
+        .replace(/<sear(?:c(?:h(?:i(?:n(?:g)?)?)?)?)?$/i, "")
+        .replace(/<thinking>[\s\S]*$/i, "")
+        .replace(/<reasoning>[\s\S]*$/i, "")
+        .replace(/<searching>[\s\S]*$/i, "")
         .trim();
 
       // Get last thinking content
       let lastThinkingContent = "Thinking";
-      if (thinkingBlocks.length > 0) {
-        const lastBlock = thinkingBlocks[thinkingBlocks.length - 1];
+      if (completedBlocks.length > 0) {
+        const lastBlock = completedBlocks[completedBlocks.length - 1];
         if (lastBlock?.content) {
           lastThinkingContent = cleanContentForDisplay(lastBlock.content);
         }
+      } else if (activeBlock?.content) {
+        lastThinkingContent = cleanContentForDisplay(activeBlock.content);
       }
 
       return {
         cleanedText,
-        thinkingBlocks,
+        completedBlocks,
+        activeBlock,
         lastThinkingContent,
       };
     },
     [
+      THINKING_PATTERNS.thinking,
       THINKING_PATTERNS.reasoning,
       THINKING_PATTERNS.searching,
+      thinkingRegex,
       reasoningRegex,
       searchingRegex,
       cleanContentForDisplay,
     ]
   );
 
-  // Memoized render function for thinking blocks with navigation
-  const renderThinkingBlocks = useCallback((): React.ReactElement | null => {
-    if (thinkingBlocks.length === 0) return null;
-
-    const currentBlock = thinkingBlocks[currentThinkingIndex];
-    if (!currentBlock) return null;
-
-    const icon = currentBlock.type === "reasoning" ? "🤔" : "🔍";
-    const baseTitle =
-      currentBlock.type === "reasoning" ? "Reasoning" : "Searching";
-
-    // Extract title from **[title]** at the beginning of content and strip formatting
-    const extractTitleAndContent = (
-      text: string
-    ): { displayTitle: string; content: string } => {
-      // Handle potential whitespace at the beginning and be more flexible with the pattern
-      const trimmedText = text.trim();
-      const titleMatch = trimmedText.match(/^\*\*\[(.*?)\]\*\*/);
-      if (titleMatch) {
-        const extractedTitle = titleMatch[1];
-        // Remove the title pattern and any following whitespace/newlines
-        const remainingContent = trimmedText
-          .replace(/^\*\*\[.*?\]\*\*\s*\n?/, "")
-          .replace(/\*\*(.*?)\*\*/g, "$1")
-          .trim();
-        return {
-          displayTitle: `${baseTitle}: ${extractedTitle}`,
-          content: remainingContent,
-        };
-      }
-      // If no title found, just strip bold formatting
-      return {
-        displayTitle: baseTitle,
-        content: trimmedText.replace(/\*\*(.*?)\*\*/g, "$1"),
-      };
-    };
-
-    const { displayTitle, content } = extractTitleAndContent(
-      currentBlock.content
-    );
-
-    return (
-      <div className="thinking-block-container">
-        <div className={`thinking-section ${currentBlock.type}-section`}>
-          <div className="thinking-header">
-            {icon} {displayTitle}
-            {thinkingBlocks.length > 1 && (
-              <div className="thinking-navigation">
-                <button
-                  onClick={() =>
-                    setCurrentThinkingIndex(
-                      Math.max(0, currentThinkingIndex - 1)
-                    )
-                  }
-                  disabled={currentThinkingIndex === 0}
-                  className="thinking-nav-btn"
-                >
-                  ←
-                </button>
-                <span className="thinking-counter">
-                  {currentThinkingIndex + 1} / {thinkingBlocks.length}
-                </span>
-                <button
-                  onClick={() =>
-                    setCurrentThinkingIndex(
-                      Math.min(
-                        thinkingBlocks.length - 1,
-                        currentThinkingIndex + 1
-                      )
-                    )
-                  }
-                  disabled={currentThinkingIndex === thinkingBlocks.length - 1}
-                  className="thinking-nav-btn"
-                >
-                  →
-                </button>
-              </div>
-            )}
-          </div>
-          <div className="thinking-content">{content}</div>
-        </div>
-      </div>
-    );
-  }, [thinkingBlocks, currentThinkingIndex]);
+  // NOTE: activeThinkingBlock and renderThinkingBlocks are defined after useLLM hook (needs response)
 
   const getBrowserInfo = () => {
     try {
@@ -700,10 +711,66 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   
   const { send, response, idle, stop, lastCallId, setResponse, error: llmError } = llmResult;
 
+  // Compute active thinking block directly from response during render (avoids state batching issues)
+  const activeThinkingBlock = useMemo(() => {
+    if (!response || justReset) return null;
+    const { activeBlock } = processThinkingTags(response);
+    return activeBlock;
+  }, [response, justReset, processThinkingTags]);
+
+  // Render thinking blocks using new collapsible ThinkingBlock component
+  const renderThinkingBlocks = useCallback((isStreaming: boolean = false): React.ReactElement | null => {
+    const hasActiveBlock = activeThinkingBlock !== null;
+    const hasCompletedBlocks = thinkingBlocks.length > 0;
+    
+    if (!hasActiveBlock && !hasCompletedBlocks) return null;
+    
+    const handleToggleCollapse = (blockKey: string) => {
+      setCollapsedBlocks(prev => {
+        const next = new Set(prev);
+        if (next.has(blockKey)) {
+          next.delete(blockKey);
+        } else {
+          next.add(blockKey);
+        }
+        return next;
+      });
+    };
+    
+    return (
+      <>
+        {/* Render completed blocks first */}
+        {thinkingBlocks.map((block, index) => {
+          const blockKey = `block-${index}`;
+          return (
+            <ThinkingBlockComponent
+              key={blockKey}
+              type={block.type}
+              content={block.content}
+              isStreaming={false}
+              isCollapsed={collapsedBlocks.has(blockKey)}
+              onToggleCollapse={() => handleToggleCollapse(blockKey)}
+            />
+          );
+        })}
+        
+        {/* Render active (streaming) block */}
+        {activeThinkingBlock && (
+          <ThinkingBlockComponent
+            key="active-streaming"
+            type={activeThinkingBlock.type}
+            content={activeThinkingBlock.content}
+            isStreaming={true}
+            isCollapsed={collapsedBlocks.has('active')}
+            onToggleCollapse={() => handleToggleCollapse('active')}
+          />
+        )}
+      </>
+    );
+  }, [thinkingBlocks, activeThinkingBlock, collapsedBlocks]);
+
   // Error handler function - reusable for both error state and callbacks
   const handleError = useCallback((errorMessage: string, historyKey?: string) => {
-    console.log('[ChatPanel] Error detected:', errorMessage);
-    
     // Detect 413 Content Too Large error
     if (errorMessage.includes('413') || errorMessage.toLowerCase().includes('content too large')) {
       setError({
@@ -745,6 +812,16 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   // Monitor for errors from useLLM hook (for errors not caught by callback)
   useEffect(() => {
     if (llmError && llmError.trim()) {
+      // Skip if we've already processed this exact error
+      // This prevents re-showing the same error when a new call starts but llmError
+      // hasn't been cleared yet by the useLLM hook
+      if (lastProcessedErrorRef.current === llmError) {
+        console.log('[ChatPanel] Skipping duplicate error:', llmError);
+        return;
+      }
+      
+      console.log('[ChatPanel] Error detected:', llmError);
+      lastProcessedErrorRef.current = llmError;
       handleError(llmError);
     }
   }, [llmError, handleError]);
@@ -1568,13 +1645,45 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
       }
 
       // Step 3: Process thinking tags on the response without tool JSON
-      const { cleanedText, thinkingBlocks: newThinkingBlocks } =
+      const { cleanedText, completedBlocks, activeBlock } =
         processThinkingTags(responseWithoutTools);
 
-      // Replace the blocks entirely (don't append) to avoid duplicates during streaming
-      setThinkingBlocks(newThinkingBlocks);
+      // Update completed thinking blocks
+      setThinkingBlocks(completedBlocks);
       // Always show the latest (last) thinking block
-      setCurrentThinkingIndex(Math.max(0, newThinkingBlocks.length - 1));
+      setCurrentThinkingIndex(Math.max(0, completedBlocks.length - 1));
+      
+      // Note: activeThinkingBlock is now computed via useMemo from response directly
+      
+      // When a new block appears, collapse all previous blocks
+      if (completedBlocks.length > prevBlockCountRef.current) {
+        setCollapsedBlocks(prev => {
+          const next = new Set(prev);
+          // Collapse all blocks except the newest one
+          for (let i = 0; i < completedBlocks.length - 1; i++) {
+            next.add(`block-${i}`);
+          }
+          return next;
+        });
+        prevBlockCountRef.current = completedBlocks.length;
+      }
+      
+      // Auto-collapse all thinking blocks when main content starts appearing
+      const hasThinkingContent = completedBlocks.length > 0 || activeBlock;
+      const hasMainContent = cleanedText.trim().length > 0;
+      
+      if (hasMainContent && hasThinkingContent && !hasAutoCollapsedRef.current) {
+        hasAutoCollapsedRef.current = true;
+        setTimeout(() => {
+          // Collapse all blocks including active
+          setCollapsedBlocks(prev => {
+            const next = new Set(prev);
+            completedBlocks.forEach((_, index) => next.add(`block-${index}`));
+            next.add('active');
+            return next;
+          });
+        }, 500);
+      }
 
       // Step 4: Process other non-tool actions on the cleaned response with two-phase option
       const { processedContent: newResponse, buttonAttachments } = processActionsOnContent(
@@ -1631,6 +1740,8 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
     if (!idle) return; // only finalize at end
     if (!lastKey) return;
     if (finalizedForCallRef.current === lastCallId) return; // already finalized
+    
+    // Note: activeThinkingBlock is computed via useMemo from response
 
     // Replace data-pending buttons in the stored history content for the lastKey
     setHistory((prev) => {
@@ -1673,6 +1784,9 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
     finalizedForCallRef.current = lastCallId;
   }, [idle, progressiveActions, lastCallId, lastKey]);
 
+  // Note: activeThinkingBlock is computed via useMemo from response
+  // It will automatically become null when response no longer has incomplete tags
+
   // More reliable button attachment with retry mechanism and MutationObserver
   const attachButtonHandlers = useCallback(
     (
@@ -1979,6 +2093,10 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
         // Clear thinking blocks for new response
         setThinkingBlocks([]);
         setCurrentThinkingIndex(0);
+        // Note: activeThinkingBlock is computed via useMemo from response
+        setCollapsedBlocks(new Set());
+        hasAutoCollapsedRef.current = false;
+        prevBlockCountRef.current = 0;
 
         ensureConversation().then((convId) => {
           if (lastController) stop(lastController);
@@ -2211,6 +2329,10 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
     // Clear thinking blocks for new response
     setThinkingBlocks([]);
     setCurrentThinkingIndex(0);
+    // Note: activeThinkingBlock is computed via useMemo from response
+    setCollapsedBlocks(new Set());
+    hasAutoCollapsedRef.current = false;
+    prevBlockCountRef.current = 0;
     
     // Clear any previous errors
     setError(null);
@@ -2843,103 +2965,51 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
                   {index === Object.keys(history).length - 1 &&
                   (isLoading || !idle) &&
                   !justReset ? (
-                    <div className="streaming-response">
-                      {/* Display current thinking block or thinking message */}
-                      {(() => {
-                        const { cleanedText } = processThinkingTags(
-                          response || ""
-                        );
-
-                        // If we have thinking blocks, show the current one
-                        if (thinkingBlocks.length > 0) {
-                          const isOnLastBlock =
-                            currentThinkingIndex === thinkingBlocks.length - 1;
-                          const hasMainContent =
-                            cleanedText && cleanedText.trim().length > 0;
-                          const shouldShowLoading =
-                            isOnLastBlock && !hasMainContent;
-
-                          return (
-                            <div>
-                              {renderThinkingBlocks()}
-                              {/* Show animated thinking if we're showing the last block and no main content yet */}
-                              {shouldShowLoading && (
-                                <div className="loading-text">
-                                  Thinking...&nbsp;
-                                  <div className="dot"></div>
-                                  <div className="dot"></div>
-                                  <div className="dot"></div>
-                                </div>
-                              )}
-                            </div>
-                          );
-                        }
-
-                        // If no thinking blocks yet but no main content, show generic thinking
-                        if (!cleanedText || cleanedText.length === 0) {
-                          return (
+                    (() => {
+                      // During streaming, compute content directly from response (not from history which may be stale)
+                      const { cleanedText: streamingCleanedText } = processThinkingTags(response || '');
+                      const hasStreamingContent = streamingCleanedText.trim().length > 0;
+                      
+                      return (
+                        <div className="streaming-response">
+                          {/* Display thinking blocks (completed and streaming) */}
+                          {(thinkingBlocks.length > 0 || activeThinkingBlock) && renderThinkingBlocks(true)}
+                          
+                          {/* Display streaming content or loading indicator */}
+                          {hasStreamingContent ? (
+                            (() => {
+                              const content = (
+                                <ReactMarkdown
+                                  remarkPlugins={[remarkGfm]}
+                                  rehypePlugins={[rehypeRaw]}
+                                  components={{ /*a: CustomLink,*/ code: CodeBlock }}
+                                >
+                                  {streamingCleanedText}
+                                </ReactMarkdown>
+                              );
+                              return markdownClass ? (
+                                <div className={markdownClass}>{content}</div>
+                              ) : (
+                                content
+                              );
+                            })()
+                          ) : (
                             <div className="loading-text">
-                              Thinking...&nbsp;
+                              {thinkingBlocks.length > 0 || activeThinkingBlock ? 'Still thinking' : 'Thinking'}...&nbsp;
                               <div className="dot"></div>
                               <div className="dot"></div>
                               <div className="dot"></div>
                             </div>
-                          );
-                        }
-
-                        return null;
-                      })()}
-
-                      {/* Display the main content (processed with actions) */}
-                      {(() => {
-                        // Get the processed content that includes action buttons from history
-                        // During streaming, use the most recent history entry if it exists
-                        if (lastKey && history[lastKey] && history[lastKey].content) {
-                          const content = (
-                            <ReactMarkdown
-                              remarkPlugins={[remarkGfm]}
-                              rehypePlugins={[rehypeRaw]}
-                              components={{ /*a: CustomLink,*/ code: CodeBlock }}
-                            >
-                              {history[lastKey].content}
-                            </ReactMarkdown>
-                          );
-                          return markdownClass ? (
-                            <div className={markdownClass}>{content}</div>
-                          ) : (
-                            content
-                          );
-                        }
-                        
-                        // Fallback to cleaned text if no processed history exists yet
-                        const { cleanedText } = processThinkingTags(
-                          response || ""
-                        );
-                        if (cleanedText && cleanedText.length > 0) {
-                          const content = (
-                            <ReactMarkdown
-                              remarkPlugins={[remarkGfm]}
-                              rehypePlugins={[rehypeRaw]}
-                              components={{ /*a: CustomLink,*/ code: CodeBlock }}
-                            >
-                              {cleanedText}
-                            </ReactMarkdown>
-                          );
-                          return markdownClass ? (
-                            <div className={markdownClass}>{content}</div>
-                          ) : (
-                            content
-                          );
-                        }
-                        return null;
-                      })()}
-                    </div>
+                          )}
+                        </div>
+                      );
+                    })()
                   ) : (
                     <div>
                       {/* For completed responses, show stored thinking blocks if this is the last entry */}
                       {isLastEntry &&
                         thinkingBlocks.length > 0 &&
-                        renderThinkingBlocks()}
+                        renderThinkingBlocks(false)}
 
                       {/* Show the main content (cleaned of thinking tags) */}
                       {markdownClass ? (
@@ -3287,6 +3357,10 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
                   setSessionApprovedTools([]);
                   setThinkingBlocks([]);
                   setCurrentThinkingIndex(0);
+                  // Note: activeThinkingBlock is computed via useMemo from response
+                  setCollapsedBlocks(new Set());
+                  hasAutoCollapsedRef.current = false;
+                  prevBlockCountRef.current = 0;
                   setPendingButtonAttachments([]);
                   setPendingToolRequests([]);
                   setIsEmailModalOpen(false);