@hef2024/llmasaservice-ui 0.22.11 → 0.23.0

package/src/AIChatPanel.tsx

@@ -19,7 +19,7 @@ import rehypeRaw from 'rehype-raw';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import materialDark from 'react-syntax-highlighter/dist/esm/styles/prism/material-dark.js';
 import materialLight from 'react-syntax-highlighter/dist/esm/styles/prism/material-light.js';
-import { Button, ScrollArea, Tooltip } from './components/ui';
+import { Button, ScrollArea, Tooltip, ThinkingBlock as ThinkingBlockComponent } from './components/ui';
 import ToolInfoModal from './components/ui/ToolInfoModal';
 import './AIChatPanel.css';
 
@@ -136,7 +136,7 @@ interface HistoryEntry {
 }
 
 interface ThinkingBlock {
-  type: 'reasoning' | 'searching';
+  type: 'thinking' | 'reasoning' | 'searching';
   content: string;
   index: number;
 }
@@ -792,6 +792,11 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   const [followOnQuestionsState, setFollowOnQuestionsState] = useState(followOnQuestions);
   const [thinkingBlocks, setThinkingBlocks] = useState<ThinkingBlock[]>([]);
   const [currentThinkingIndex, setCurrentThinkingIndex] = useState(0);
+  // NOTE: activeThinkingBlock is 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
   const [newConversationConfirm, setNewConversationConfirm] = useState(false);
   const [justReset, setJustReset] = useState(false);
   const [copiedCallId, setCopiedCallId] = useState<string | null>(null);
@@ -1293,34 +1298,132 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   }, []);
 
   // Process thinking tags from response
-  const processThinkingTags = useCallback((text: string): { cleanedText: string; blocks: ThinkingBlock[] } => {
-    const blocks: ThinkingBlock[] = [];
-    let index = 0;
+  const processThinkingTags = useCallback((text: string): { 
+    cleanedText: string; 
+    completedBlocks: ThinkingBlock[];
+    activeBlock: { type: 'thinking' | 'reasoning' | 'searching'; content: string } | null;
+    lastThinkingContent: string;
+  } => {
+    if (!text) {
+      return {
+        cleanedText: '',
+        completedBlocks: [],
+        activeBlock: null,
+        lastThinkingContent: 'Thinking',
+      };
+    }
+
+    // Remove zero-width space characters from keepalive before processing
+    const processedText = text.replace(/\u200B/g, '');
+
+    const allMatches: ThinkingBlock[] = [];
     
-    // Extract reasoning blocks
-    const reasoningRegex = /<reasoning>([\s\S]*?)<\/reasoning>/gi;
+    // Extract complete thinking blocks
+    const thinkingRegex = /<thinking>([\s\S]*?)<\/thinking>/gi;
     let match;
-    while ((match = reasoningRegex.exec(text)) !== null) {
-      blocks.push({ type: 'reasoning', content: match[1] ?? '', index: index++ });
+    while ((match = thinkingRegex.exec(processedText)) !== null) {
+      const content = match[1]?.trim();
+      if (content) {
+        allMatches.push({ content, index: match.index, type: 'thinking' });
+      }
+    }
+    
+    // Extract complete reasoning blocks
+    const reasoningRegex = /<reasoning>([\s\S]*?)<\/reasoning>/gi;
+    while ((match = reasoningRegex.exec(processedText)) !== null) {
+      const content = match[1]?.trim();
+      if (content) {
+        allMatches.push({ content, index: match.index, type: 'reasoning' });
+      }
     }
     
-    // Extract searching blocks
+    // Extract complete searching blocks
     const searchingRegex = /<searching>([\s\S]*?)<\/searching>/gi;
-    while ((match = searchingRegex.exec(text)) !== null) {
-      blocks.push({ type: 'searching', content: match[1] ?? '', index: index++ });
+    while ((match = searchingRegex.exec(processedText)) !== null) {
+      const content = match[1]?.trim();
+      if (content) {
+        allMatches.push({ content, index: match.index, type: 'searching' });
+      }
     }
     
     // Sort by position in original text
-    blocks.sort((a, b) => a.index - b.index);
+    const completedBlocks = allMatches.sort((a, b) => a.index - b.index);
+
+    // Check for incomplete (streaming) tags at the end of the text
+    let activeBlock: { type: 'thinking' | 'reasoning' | 'searching'; content: string } | null = null;
+    const tagTypes = ['thinking', 'reasoning', 'searching'] as const;
+    let latestIncompletePos = -1;
     
-    // Clean the text
-    let cleanedText = text
+    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>")
+    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)
+    let cleanedText = processedText
+      .replace(/<thinking>[\s\S]*?<\/thinking>/gi, '')
       .replace(/<reasoning>[\s\S]*?<\/reasoning>/gi, '')
       .replace(/<searching>[\s\S]*?<\/searching>/gi, '')
+      // 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();
-    
-    return { cleanedText, blocks };
-  }, []);
+
+    // Get last thinking content for display
+    let lastThinkingContent = 'Thinking';
+    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, completedBlocks, activeBlock, lastThinkingContent };
+  }, [cleanContentForDisplay]);
+
+  // 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]);
 
   // Built-in action for agent suggestion cards
   // Pattern: [SUGGEST_AGENT:agent-id|Agent Name|Brief reason]
@@ -1516,8 +1619,12 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   // promptText is now required - comes from the isolated ChatInput component
   const continueChat = useCallback((promptText: string) => {
     // Clear thinking blocks for new response
+    // Note: activeThinkingBlock is computed via useMemo from response
     setThinkingBlocks([]);
     setCurrentThinkingIndex(0);
+    setCollapsedBlocks(new Set());
+    hasAutoCollapsedRef.current = false;
+    prevBlockCountRef.current = 0;
     
     // Clear any previous errors
     setError(null);
@@ -1782,6 +1889,10 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     setFollowOnQuestionsState(followOnQuestions);
     setThinkingBlocks([]);
     setCurrentThinkingIndex(0);
+    setCollapsedBlocks(new Set());
+    // Note: activeThinkingBlock is computed via useMemo from response
+    hasAutoCollapsedRef.current = false;
+    prevBlockCountRef.current = 0;
     setJustReset(true);
     setLastController(new AbortController());
     setUserHasScrolled(false);
@@ -1805,10 +1916,40 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   useEffect(() => {
     if (!response || !lastKey || justReset) return;
     
-    const { cleanedText, blocks } = processThinkingTags(response);
+    const { cleanedText, completedBlocks } = processThinkingTags(response);
     
     // Update display state
-    setThinkingBlocks(blocks);
+    // Note: activeThinkingBlock is computed via useMemo from response directly
+    setThinkingBlocks(completedBlocks);
+    
+    // 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 hasMainContent = cleanedText.trim().length > 0;
+    const hasThinkingContent = completedBlocks.length > 0 || processThinkingTags(response).activeBlock !== null;
+    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);
+    }
     
     // Update history state with RAW content (actions applied at render time)
     setHistory((prev) => {
@@ -2307,46 +2448,56 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     },
   }), [CodeBlock, AgentSuggestionCard]);
 
-  // Render thinking blocks
-  const renderThinkingBlocks = useCallback(() => {
-    if (thinkingBlocks.length === 0) return null;
+  // Render thinking blocks with new collapsible design
+  const renderThinkingBlocks = useCallback((isStreaming: boolean = false): React.ReactElement | null => {
+    const hasActiveBlock = activeThinkingBlock !== null;
+    const hasCompletedBlocks = thinkingBlocks.length > 0;
     
-    const currentBlock = thinkingBlocks[currentThinkingIndex];
-    if (!currentBlock) return null;
+    if (!hasActiveBlock && !hasCompletedBlocks) return null;
     
-    const isReasoning = currentBlock.type === 'reasoning';
-    const icon = isReasoning ? <BrainIcon /> : <SearchIcon />;
-    const title = isReasoning ? 'Reasoning' : 'Searching';
+    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 (
-      <div className="ai-chat-thinking">
-        <div className="ai-chat-thinking__header">
-          <span className="ai-chat-thinking__icon">{icon}</span>
-          <span className="ai-chat-thinking__title">{title}</span>
-          {thinkingBlocks.length > 1 && (
-            <span className="ai-chat-thinking__nav">
-              <button
-                onClick={() => setCurrentThinkingIndex(Math.max(0, currentThinkingIndex - 1))}
-                disabled={currentThinkingIndex === 0}
-              >
-                ‹
-              </button>
-              <span>{currentThinkingIndex + 1} / {thinkingBlocks.length}</span>
-              <button
-                onClick={() => setCurrentThinkingIndex(Math.min(thinkingBlocks.length - 1, currentThinkingIndex + 1))}
-                disabled={currentThinkingIndex === thinkingBlocks.length - 1}
-              >
-                ›
-              </button>
-            </span>
-          )}
-        </div>
-        <div className="ai-chat-thinking__content">
-          {cleanContentForDisplay(currentBlock.content)}
-        </div>
-      </div>
+      <>
+        {/* 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, currentThinkingIndex, cleanContentForDisplay]);
+  }, [thinkingBlocks, activeThinkingBlock, collapsedBlocks]);
 
   // ============================================================================
   // Render
@@ -2442,43 +2593,55 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
                 <div className="ai-chat-message__content">
                   {/* Streaming state */}
                   {isLastEntry && (isLoading || !idle) && !justReset ? (
-                    <div className="ai-chat-streaming">
-                      {thinkingBlocks.length > 0 && renderThinkingBlocks()}
+                    (() => {
+                      // During streaming, compute content directly from response (not from history which may be stale)
+                      const { cleanedText: streamingCleanedText } = processThinkingTags(response || '');
+                      const streamingContent = processActions(streamingCleanedText);
+                      const hasStreamingContent = streamingContent.trim().length > 0;
                       
-                      {processedContent ? (
-                        markdownClass ? (
-                          <div className={markdownClass}>
-                            <ReactMarkdown
-                              remarkPlugins={[remarkGfm]}
-                              rehypePlugins={[rehypeRaw]}
-                              components={markdownComponents}
-                            >
-                              {processedContent}
-                            </ReactMarkdown>
-                          </div>
-                        ) : (
-                          <ReactMarkdown
-                            remarkPlugins={[remarkGfm]}
-                            rehypePlugins={[rehypeRaw]}
-                            components={markdownComponents}
-                          >
-                            {processedContent}
-                          </ReactMarkdown>
-                        )
-                      ) : (
-                        <div className="ai-chat-loading">
-                          <span>Thinking</span>
-                          <span className="ai-chat-loading__dots">
-                            <span className="ai-chat-loading__dot" />
-                            <span className="ai-chat-loading__dot" />
-                            <span className="ai-chat-loading__dot" />
-                          </span>
+                      return (
+                        <div className="ai-chat-streaming">
+                          {/* Show thinking blocks (both completed and active/streaming) */}
+                          {(thinkingBlocks.length > 0 || activeThinkingBlock) && renderThinkingBlocks(true)}
+                          
+                          {/* Show streaming content or loading indicator */}
+                          {hasStreamingContent ? (
+                            markdownClass ? (
+                              <div className={markdownClass}>
+                                <ReactMarkdown
+                                  remarkPlugins={[remarkGfm]}
+                                  rehypePlugins={[rehypeRaw]}
+                                  components={markdownComponents}
+                                >
+                                  {streamingContent}
+                                </ReactMarkdown>
+                              </div>
+                            ) : (
+                              <ReactMarkdown
+                                remarkPlugins={[remarkGfm]}
+                                rehypePlugins={[rehypeRaw]}
+                                components={markdownComponents}
+                              >
+                                {streamingContent}
+                              </ReactMarkdown>
+                            )
+                          ) : (
+                            <div className="ai-chat-loading">
+                              <span>{thinkingBlocks.length > 0 || activeThinkingBlock ? 'Still thinking' : 'Thinking'}</span>
+                              <span className="ai-chat-loading__dots">
+                                <span className="ai-chat-loading__dot" />
+                                <span className="ai-chat-loading__dot" />
+                                <span className="ai-chat-loading__dot" />
+                              </span>
+                            </div>
+                          )}
                         </div>
-                      )}
-                    </div>
+                      );
+                    })()
                   ) : (
                     <>
-                      {isLastEntry && thinkingBlocks.length > 0 && renderThinkingBlocks()}
+                      {/* Show completed thinking blocks after streaming */}
+                      {isLastEntry && thinkingBlocks.length > 0 && renderThinkingBlocks(false)}
                       {markdownClass ? (
                         <div className={markdownClass}>
                           <ReactMarkdown