@hef2024/llmasaservice-ui 0.24.4 → 0.24.6

package/src/AIChatPanel.tsx

@@ -66,6 +66,33 @@ export type LocalToolExecutor = (
   context: LocalToolExecutorContext,
 ) => Promise<unknown> | unknown;
 
+export type ArtifactBlockType = 'thinking' | 'reasoning' | 'searching' | 'planning';
+export type PlanningStepStatus = 'todo' | 'doing' | 'done';
+
+export interface PlanningStep {
+  status: PlanningStepStatus;
+  title: string;
+}
+
+export interface ResponseArtifactBlock {
+  type: ArtifactBlockType;
+  content: string;
+  index: number;
+  signature: string;
+  steps?: PlanningStep[];
+}
+
+interface HistoryEntry {
+  content: string;
+  callId: string;
+  toolCalls?: any[];
+  toolResponses?: any[];
+  artifactBlocks?: ResponseArtifactBlock[];
+  planningBlocks?: ResponseArtifactBlock[];
+}
+
+export type AIChatHistoryEntry = HistoryEntry;
+
 export interface AIChatPanelProps {
   project_id: string;
   initialPrompt?: string;
@@ -80,7 +107,7 @@ export interface AIChatPanelProps {
   theme?: 'light' | 'dark';
   url?: string | null;
   service?: string | null;
-  historyChangedCallback?: (history: Record<string, { content: string; callId: string }>) => void;
+  historyChangedCallback?: (history: Record<string, AIChatHistoryEntry>) => void;
   responseCompleteCallback?: (callId: string, prompt: string, response: string) => void;
   onLoadingChange?: (isLoading: boolean) => void;
   promptTemplate?: string;
@@ -99,7 +126,7 @@ export interface AIChatPanelProps {
   showPoweredBy?: boolean;
   agent?: string | null;
   conversation?: string | null;
-  initialHistory?: Record<string, { content: string; callId: string }>;
+  initialHistory?: Record<string, AIChatHistoryEntry>;
   hideRagContextInPrompt?: boolean;
   createConversationOnFirstChat?: boolean;
   autoApproveTools?: boolean | string[];
@@ -167,19 +194,7 @@ export interface ContextSection {
 
 export type ContextDataFormat = 'json' | 'toon' | 'markdown' | 'text';
 
-interface HistoryEntry {
-  content: string;
-  callId: string;
-  toolCalls?: any[];
-  toolResponses?: any[];
-}
-
-interface ThinkingBlock {
-  type: 'thinking' | 'reasoning' | 'searching';
-  content: string;
-  index: number;
-  signature: string;
-}
+type ThinkingBlock = ResponseArtifactBlock;
 
 interface ToolRequestMatch {
   match: string;
@@ -215,7 +230,7 @@ interface InlineToolMarker {
 }
 
 interface InlineThinkingMarker {
-  type: 'thinking' | 'reasoning' | 'searching';
+  type: ArtifactBlockType;
   signature: string;
 }
 
@@ -1009,7 +1024,7 @@ const hashInlineMarkerValue = (value: string): string => {
 };
 
 const getThinkingBlockSignature = (
-  type: 'thinking' | 'reasoning' | 'searching',
+  type: ArtifactBlockType,
   content: string,
 ): string => {
   const normalizedContent = String(content || '').trim();
@@ -1017,16 +1032,112 @@ const getThinkingBlockSignature = (
 };
 
 const buildThinkingBlockMarker = (
-  type: 'thinking' | 'reasoning' | 'searching',
+  type: ArtifactBlockType,
   signature: string,
 ): string => {
-  const normalizedType = String(type || 'thinking').trim() as 'thinking' | 'reasoning' | 'searching';
+  const normalizedType = String(type || 'thinking').trim() as ArtifactBlockType;
   const normalizedSignature = String(signature || '').trim() || `${normalizedType}-block`;
   return `${INLINE_THINKING_MARKER_PREFIX}${encodeURIComponent(normalizedType)}|${encodeURIComponent(
     normalizedSignature,
   )}${INLINE_THINKING_MARKER_SUFFIX}`;
 };
 
+const PLAN_STEP_REGEX = /^\s*\[plan-step\]\s*([a-zA-Z_-]+)\s*:\s*(.+?)\s*$/i;
+
+const normalizePlanningStatus = (value: string): PlanningStepStatus => {
+  const normalized = String(value || '').trim().toLowerCase();
+  if (normalized === 'doing' || normalized === 'in_progress' || normalized === 'in-progress') {
+    return 'doing';
+  }
+  if (normalized === 'done' || normalized === 'completed') {
+    return 'done';
+  }
+  return 'todo';
+};
+
+const formatPlanningStatus = (status: PlanningStepStatus): string => {
+  if (status === 'doing') return 'Doing';
+  if (status === 'done') return 'Done';
+  return 'Todo';
+};
+
+const parsePlanningStep = (line: string): PlanningStep | null => {
+  const match = PLAN_STEP_REGEX.exec(String(line || ''));
+  if (!match) return null;
+
+  const title = String(match[2] || '').trim();
+  if (!title) return null;
+
+  return {
+    status: normalizePlanningStatus(match[1] || ''),
+    title,
+  };
+};
+
+const buildPlanningBlockContent = (steps: PlanningStep[]): string => {
+  return steps
+    .filter((step) => !!step && typeof step.title === 'string' && step.title.trim().length > 0)
+    .map((step) => `${formatPlanningStatus(step.status)}: ${step.title.trim()}`)
+    .join('\n');
+};
+
+const extractPlanningBlocks = (
+  text: string,
+): { textWithMarkers: string; planningBlocks: ResponseArtifactBlock[] } => {
+  const source = typeof text === 'string' ? text : '';
+  if (!source) {
+    return {
+      textWithMarkers: '',
+      planningBlocks: [],
+    };
+  }
+
+  const lines = source.split('\n');
+  const planningBlocks: ResponseArtifactBlock[] = [];
+  const rebuiltSegments: string[] = [];
+  let currentOffset = 0;
+  let pendingSteps: PlanningStep[] = [];
+  let pendingIndex = 0;
+
+  const flushPendingPlanning = () => {
+    if (pendingSteps.length === 0) return;
+
+    const signature = `planning-${pendingIndex}`;
+    planningBlocks.push({
+      type: 'planning',
+      content: buildPlanningBlockContent(pendingSteps),
+      index: pendingIndex,
+      signature,
+      steps: pendingSteps,
+    });
+    rebuiltSegments.push(`\n\n${buildThinkingBlockMarker('planning', signature)}\n\n`);
+    pendingSteps = [];
+  };
+
+  lines.forEach((line, index) => {
+    const lineWithNewline = index < lines.length - 1 ? `${line}\n` : line;
+    const planningStep = parsePlanningStep(line);
+    if (planningStep) {
+      if (pendingSteps.length === 0) {
+        pendingIndex = currentOffset;
+      }
+      pendingSteps = [...pendingSteps, planningStep];
+    } else {
+      flushPendingPlanning();
+      rebuiltSegments.push(lineWithNewline);
+    }
+
+    currentOffset += lineWithNewline.length;
+  });
+
+  flushPendingPlanning();
+
+  return {
+    textWithMarkers: rebuiltSegments.join(''),
+    planningBlocks,
+  };
+};
+
 const buildInlineToolMarker = (toolName: string, callId: string): string => {
   const normalizedToolName = String(toolName || '').trim() || 'tool';
   const normalizedCallId = String(callId || '').trim() || `${normalizedToolName}-call`;
@@ -1110,11 +1221,13 @@ const parseInlineThinkingMarkers = (
     }
 
     const normalizedType = String(rawType || '').trim().toLowerCase();
-    const type: 'thinking' | 'reasoning' | 'searching' =
+    const type: ArtifactBlockType =
       normalizedType === 'reasoning'
         ? 'reasoning'
         : normalizedType === 'searching'
         ? 'searching'
+        : normalizedType === 'planning'
+        ? 'planning'
         : 'thinking';
 
     markers.push({
@@ -1792,6 +1905,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   const [lastPrompt, setLastPrompt] = useState<string | null>(null);
   const [lastKey, setLastKey] = useState<string | null>(null);
   const [currentConversation, setCurrentConversation] = useState<string | null>(conversation);
+  const ensuredConversationIdsRef = useRef<Set<string>>(new Set());
   const [followOnQuestionsState, setFollowOnQuestionsState] = useState(followOnQuestions);
   const [thinkingBlocks, setThinkingBlocks] = useState<ThinkingBlock[]>([]);
   const [currentThinkingIndex, setCurrentThinkingIndex] = useState(0);
@@ -2006,7 +2120,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
       }
 
       try {
-        const enriched = await Promise.all(
+        const settled = await Promise.allSettled(
           mcpServers.map(async (server) => {
             const resolved = await resolveMcpAuthHeaders({
               phase: 'list',
@@ -2025,6 +2139,23 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
             };
           })
         );
+
+        const enriched = settled.map((result, index) => {
+          if (result.status === 'fulfilled') {
+            return result.value;
+          }
+
+          const failingUrl =
+            typeof mcpServers?.[index]?.url === 'string'
+              ? mcpServers[index].url
+              : `mcp[${index}]`;
+          console.error(
+            `[AIChatPanel] Failed to resolve MCP auth headers for ${failingUrl}:`,
+            result.reason
+          );
+          return mcpServers[index];
+        });
+
         if (!cancelled) setResolvedMcpServers(enriched);
       } catch (error) {
         console.error('[AIChatPanel] Failed to resolve MCP auth headers:', error);
@@ -2142,10 +2273,26 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
           }));
         });
 
-        const results = await Promise.all(fetchPromises);
-        const allTools = results.flat();
+        const settled = await Promise.allSettled(fetchPromises);
+        const allTools = settled.flatMap((result, index) => {
+          if (result.status === 'fulfilled') {
+            return result.value;
+          }
+
+          const failingUrl =
+            typeof resolvedMcpServers?.[index]?.url === 'string'
+              ? resolvedMcpServers[index].url
+              : `mcp[${index}]`;
+          console.error(
+            `[AIChatPanel] Failed to load MCP tools from ${failingUrl}:`,
+            result.reason
+          );
+          return [];
+        });
+
+        const failedCount = settled.filter((result) => result.status === 'rejected').length;
         setToolList(allTools);
-        setToolsFetchError(false);
+        setToolsFetchError(failedCount > 0 && allTools.length === 0);
       } catch (error) {
         console.error('[AIChatPanel] Failed to load MCP tools:', error);
         setToolList([]);
@@ -2238,28 +2385,36 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   const ensureConversation = useCallback(() => {
     const normalizedConversationId =
       typeof currentConversation === 'string' ? currentConversation.trim() : '';
+    const hasConversationHistory = Object.keys(latestHistoryRef.current || {}).length > 0;
+    const shouldInitializeProvidedConversation =
+      normalizedConversationId.length > 10 &&
+      createConversationOnFirstChat &&
+      !hasConversationHistory &&
+      !ensuredConversationIdsRef.current.has(normalizedConversationId);
 
     console.log('ensureConversation - called with:', {
       currentConversation: normalizedConversationId || null,
       createConversationOnFirstChat,
+      shouldInitializeProvidedConversation,
       project_id,
       publicAPIUrl,
     });
 
-    // Existing conversation supplied by caller: use it directly.
-    if (normalizedConversationId) {
+    // Existing conversation supplied by caller: initialize its record once if needed,
+    // otherwise use it directly.
+    if (normalizedConversationId && !shouldInitializeProvidedConversation) {
       console.log('ensureConversation - using existing conversation:', normalizedConversationId);
       return Promise.resolve(normalizedConversationId);
     }
 
     if (!createConversationOnFirstChat) {
-      return Promise.resolve('');
+      return Promise.resolve(normalizedConversationId || '');
     }
 
     // Guard: Don't create/ensure conversations without a project_id
     if (!project_id) {
       console.error('ensureConversation - Cannot create conversation without project_id');
-      return Promise.resolve('');
+      return Promise.resolve(normalizedConversationId || '');
     }
 
     const createConversation = () => {
@@ -2272,6 +2427,10 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         language: browserInfo?.userLanguage,
       };
 
+      if (shouldInitializeProvidedConversation) {
+        requestBody.conversationId = normalizedConversationId;
+      }
+
       console.log('ensureConversation - Creating conversation with:', requestBody);
       console.log('ensureConversation - API URL:', `${publicAPIUrl}/conversations`);
 
@@ -2299,21 +2458,40 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
             (typeof newConvo?.conversation_id === 'string' && newConvo.conversation_id.trim()) ||
             (typeof newConvo?.conversation?.id === 'string' && newConvo.conversation.id.trim()) ||
             '';
+          const resolvedConversationId = normalizedConversationId || createdId;
 
           if (createdId) {
             console.log('ensureConversation - New conversation ID:', createdId);
+          }
+
+          if (resolvedConversationId) {
+            ensuredConversationIdsRef.current.add(resolvedConversationId);
+          }
+
+          if (normalizedConversationId && createdId && createdId !== normalizedConversationId) {
+            console.warn(
+              'ensureConversation - API returned a different ID than supplied conversationId; keeping caller-provided ID',
+              { suppliedConversationId: normalizedConversationId, returnedConversationId: createdId }
+            );
+          }
+
+          if (!normalizedConversationId && createdId) {
             setCurrentConversation(createdId);
             // NOTE: Don't call onConversationCreated here - it causes a re-render
             // before send() is called. The caller should notify after send() starts.
             return createdId;
           }
 
+          if (resolvedConversationId) {
+            return resolvedConversationId;
+          }
+
           console.warn('ensureConversation - No ID in response');
-          return '';
+          return normalizedConversationId || '';
         })
         .catch((error) => {
           console.error('Error creating new conversation', error);
-          return '';
+          return normalizedConversationId || '';
         });
     };
 
@@ -3267,7 +3445,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     return cleaned || 'Thinking';
   }, []);
 
-  // Process thinking tags from response
+  // Process internal response artifacts from the model before rendering transcript text.
   const processThinkingTags = useCallback((text: string): { 
     cleanedText: string; 
     completedBlocks: ThinkingBlock[];
@@ -3283,7 +3461,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
       };
     }
 
-    // Remove zero-width space characters from keepalive before processing
+    // Remove zero-width space characters from keepalive before processing.
     const processedText = text.replace(/\u200B/g, '');
 
     const completedBlocks: ThinkingBlock[] = [];
@@ -3291,7 +3469,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
       /<(thinking|reasoning|searching)>([\s\S]*?)<\/\1>/gi,
       (_fullMatch, rawType, rawContent, offset) => {
         const normalizedType = String(rawType || '').trim().toLowerCase();
-        const type: 'thinking' | 'reasoning' | 'searching' =
+        const type: ArtifactBlockType =
           normalizedType === 'reasoning'
             ? 'reasoning'
             : normalizedType === 'searching'
@@ -3311,6 +3489,13 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         return `\n\n${buildThinkingBlockMarker(type, signature)}\n\n`;
       },
     );
+    const {
+      textWithMarkers: textWithArtifactMarkers,
+      planningBlocks,
+    } = extractPlanningBlocks(textWithCompleteMarkers);
+    if (planningBlocks.length > 0) {
+      completedBlocks.push(...planningBlocks);
+    }
 
     // Check for incomplete (streaming) tags at the end of the text
     let activeBlock: { type: 'thinking' | 'reasoning' | 'searching'; content: string } | null = null;
@@ -3353,8 +3538,8 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
       }
     }
 
-    // Clean the text by removing all thinking-related tags (complete and incomplete)
-    let cleanedText = textWithCompleteMarkers
+    // Clean the text by removing all thinking-related tags (complete and incomplete).
+    let cleanedText = textWithArtifactMarkers
       // Also remove partial opening tags
       .replace(/<think(?:i(?:n(?:g)?)?)?$/i, '')
       .replace(/<reas(?:o(?:n(?:i(?:n(?:g)?)?)?)?)?$/i, '')
@@ -3395,6 +3580,16 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         return incoming;
       }
 
+      const incomingSignaturePrefix =
+        incoming.length >= existing.length &&
+        existing.every((block, index) => {
+          const next = incoming[index];
+          return !!next && next.type === block.type && next.signature === block.signature;
+        });
+      if (incomingSignaturePrefix) {
+        return incoming;
+      }
+
       // For follow-on streams (e.g., tool continuations), append only unseen blocks.
       const merged = [...existing];
       const seen = new Set(existing.map((block) => block.signature || `${block.type}::${block.content}`));
@@ -3705,7 +3900,6 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     
     // Clear any previous errors
     setError(null);
-    lastProcessedErrorRef.current = null; // Allow new errors to be processed
     
     // Reset scroll tracking for new message - enable auto-scroll
     setUserHasScrolled(false);
@@ -4100,6 +4294,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     
     // Keep reasoning blocks visible; users can collapse manually if needed.
     // Auto-collapse here made blocks appear and then seem to disappear.
+    const planningBlocks = mergedBlocks.filter((block) => block.type === 'planning');
     
     // Update history state with RAW content (actions applied at render time)
     setHistory((prev) => {
@@ -4121,6 +4316,8 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         ...existingEntry,
         content: nextContent, // Store raw content without tool JSON or thinking tags
         callId: lastCallId || existingEntry.callId || '',
+        artifactBlocks: mergedBlocks,
+        planningBlocks,
       };
       // Keep ref in sync for callbacks (this doesn't trigger re-renders)
       latestHistoryRef.current = newHistory;
@@ -4346,106 +4543,113 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     }
   }, [followOnPrompt, continueChat]);
 
-  // Monitor for errors from useLLM hook
+  // Monitor for new errors from useLLM hook without replaying stale errors on new prompts.
   useEffect(() => {
-    if (llmError && llmError.trim()) {
-      // Skip if we've already processed this exact error
-      if (lastProcessedErrorRef.current === llmError) {
-        console.log('[AIChatPanel] Skipping duplicate error:', llmError);
-        return;
-      }
-      
-      console.log('[AIChatPanel] Error detected:', llmError);
-      lastProcessedErrorRef.current = llmError;
-      
-      // Parse error message to detect specific error types
-      const errorMessage = llmError;
-      
-      // Check if this is a user-initiated abort
-      const isAbortError = errorMessage.toLowerCase().includes('abort') || 
-                           errorMessage.toLowerCase().includes('canceled') ||
-                           errorMessage.toLowerCase().includes('cancelled');
-      
-      if (isAbortError) {
-        // User canceled the request - don't show error banner
-        console.log('[AIChatPanel] Request was aborted by user (useEffect)');
-        // Don't set error state - no red banner
-        
-        // Don't update history here - the error callback in send() already handled it
-        // with the correct promptKey. Updating here with lastKey can affect the wrong entry
-        // if the user has already submitted a new prompt.
-      }
-      // Detect 413 Content Too Large error
-      else if (errorMessage.includes('413') || errorMessage.toLowerCase().includes('content too large')) {
-        setError({
-          message: 'The context is too large to process. Please start a new conversation or reduce the amount of context.',
-          code: '413',
+    const normalizedError = typeof llmError === 'string' ? llmError.trim() : '';
+
+    if (!normalizedError) {
+      lastProcessedErrorRef.current = null;
+      return;
+    }
+
+    // Skip if we've already processed this exact error value from the hook.
+    if (lastProcessedErrorRef.current === normalizedError) {
+      console.log('[AIChatPanel] Skipping duplicate error:', normalizedError);
+      return;
+    }
+
+    console.log('[AIChatPanel] Error detected:', normalizedError);
+    lastProcessedErrorRef.current = normalizedError;
+
+    const errorMessage = normalizedError;
+    const currentLastKey = lastKeyRef.current;
+    const currentLastCallId = lastCallIdRef.current;
+
+    // Check if this is a user-initiated abort
+    const isAbortError =
+      errorMessage.toLowerCase().includes('abort') ||
+      errorMessage.toLowerCase().includes('canceled') ||
+      errorMessage.toLowerCase().includes('cancelled');
+
+    if (isAbortError) {
+      // User canceled the request - don't show error banner
+      console.log('[AIChatPanel] Request was aborted by user (useEffect)');
+      // Don't set error state - no red banner
+
+      // Don't update history here - the error callback in send() already handled it
+      // with the correct promptKey. Updating here with lastKey can affect the wrong entry
+      // if the user has already submitted a new prompt.
+    }
+    // Detect 413 Content Too Large error
+    else if (errorMessage.includes('413') || errorMessage.toLowerCase().includes('content too large')) {
+      setError({
+        message: 'The context is too large to process. Please start a new conversation or reduce the amount of context.',
+        code: '413',
+      });
+
+      // Update history to show error
+      if (currentLastKey) {
+        setHistory((prev) => {
+          const existingEntry = prev[currentLastKey] || { content: '', callId: '' };
+          return {
+            ...prev,
+            [currentLastKey]: {
+              ...existingEntry,
+              content: `Error: ${errorMessage}`,
+              callId: currentLastCallId || existingEntry.callId || '',
+            },
+          };
         });
-        
-        // Update history to show error
-        if (lastKey) {
-          setHistory((prev) => {
-            const existingEntry = prev[lastKey] || { content: '', callId: '' };
-            return {
-              ...prev,
-              [lastKey]: {
-                ...existingEntry,
-                content: `Error: ${errorMessage}`,
-                callId: lastCallId || existingEntry.callId || '',
-              },
-            };
-          });
-        }
       }
-      // Detect other network errors
-      else if (errorMessage.toLowerCase().includes('network error') || errorMessage.toLowerCase().includes('fetch')) {
-        setError({
-          message: 'Network error. Please check your connection and try again.',
-          code: 'NETWORK_ERROR',
+    }
+    // Detect other network errors
+    else if (errorMessage.toLowerCase().includes('network error') || errorMessage.toLowerCase().includes('fetch')) {
+      setError({
+        message: 'Network error. Please check your connection and try again.',
+        code: 'NETWORK_ERROR',
+      });
+
+      // Update history to show error
+      if (currentLastKey) {
+        setHistory((prev) => {
+          const existingEntry = prev[currentLastKey] || { content: '', callId: '' };
+          return {
+            ...prev,
+            [currentLastKey]: {
+              ...existingEntry,
+              content: `Error: ${errorMessage}`,
+              callId: currentLastCallId || existingEntry.callId || '',
+            },
+          };
         });
-        
-        // Update history to show error
-        if (lastKey) {
-          setHistory((prev) => {
-            const existingEntry = prev[lastKey] || { content: '', callId: '' };
-            return {
-              ...prev,
-              [lastKey]: {
-                ...existingEntry,
-                content: `Error: ${errorMessage}`,
-                callId: lastCallId || existingEntry.callId || '',
-              },
-            };
-          });
-        }
       }
-      // Generic error
-      else {
-        setError({
-          message: errorMessage,
-          code: 'UNKNOWN_ERROR',
+    }
+    // Generic error
+    else {
+      setError({
+        message: errorMessage,
+        code: 'UNKNOWN_ERROR',
+      });
+
+      // Update history to show error
+      if (currentLastKey) {
+        setHistory((prev) => {
+          const existingEntry = prev[currentLastKey] || { content: '', callId: '' };
+          return {
+            ...prev,
+            [currentLastKey]: {
+              ...existingEntry,
+              content: `Error: ${errorMessage}`,
+              callId: currentLastCallId || existingEntry.callId || '',
+            },
+          };
         });
-        
-        // Update history to show error
-        if (lastKey) {
-          setHistory((prev) => {
-            const existingEntry = prev[lastKey] || { content: '', callId: '' };
-            return {
-              ...prev,
-              [lastKey]: {
-                ...existingEntry,
-                content: `Error: ${errorMessage}`,
-                callId: lastCallId || existingEntry.callId || '',
-              },
-            };
-          });
-        }
       }
-      
-      // Reset loading state
-      setIsLoading(false);
     }
-  }, [llmError, lastKey, lastCallId]);
+
+    // Reset loading state
+    setIsLoading(false);
+  }, [llmError]);
 
   // Dynamic CSS Injection
   useEffect(() => {
@@ -4679,7 +4883,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
 
   const renderThinkingBlockCard = (
     entryKey: string,
-    block: { type: 'thinking' | 'reasoning' | 'searching'; content: string },
+    block: { type: ArtifactBlockType; content: string },
     blockKey: string,
     renderKey: string,
     isStreaming: boolean,