@hef2024/llmasaservice-ui 0.24.4 → 0.24.6

package/index.ts

@@ -23,7 +23,14 @@ export type {
 // Import and export AIChatPanel (shadcn-style chat interface)
 import AIChatPanel from './src/AIChatPanel';
 export { AIChatPanel };
-export type { AIChatPanelProps } from './src/AIChatPanel';
+export type {
+  AIChatPanelProps,
+  AIChatHistoryEntry,
+  ArtifactBlockType,
+  PlanningStep,
+  PlanningStepStatus,
+  ResponseArtifactBlock,
+} from './src/AIChatPanel';
 
 // Export hooks
 export { useAgentRegistry } from './src/hooks/useAgentRegistry';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hef2024/llmasaservice-ui",
-  "version": "0.24.4",
+  "version": "0.24.6",
   "description": "Prebuilt UI components for LLMAsAService.io",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/AIAgentPanel.tsx

@@ -2,6 +2,7 @@ import { LLMAsAServiceCustomer } from 'llmasaservice-client';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import './AIAgentPanel.css';
 import AIChatPanel, {
+  AIChatHistoryEntry,
   AgentOption,
   BeforeSendPayload,
   LocalToolExecutor,
@@ -63,7 +64,7 @@ export interface ActiveConversation {
   conversationId: string;
   stableKey: string; // Stable key for React component - never changes
   agentId: string;
-  history: Record<string, { content: string; callId: string }>;
+  history: Record<string, AIChatHistoryEntry>;
   transcriptLoaded: boolean; // Prevent re-fetch loops for conversations with empty history
   isLoading: boolean;
   title: string;
@@ -134,7 +135,7 @@ export interface AIAgentPanelProps {
   onAgentSwitch?: (fromAgent: string, toAgent: string) => void;
   onConversationChange?: (conversationId: string) => void;
   onBeforeSend?: (payload: BeforeSendPayload) => Promise<void> | void;
-  historyChangedCallback?: (history: Record<string, { content: string; callId: string }>) => void;
+  historyChangedCallback?: (history: Record<string, AIChatHistoryEntry>) => void;
   responseCompleteCallback?: (callId: string, prompt: string, response: string) => void;
   thumbsUpClick?: (callId: string) => void;
   thumbsDownClick?: (callId: string) => void;
@@ -708,8 +709,8 @@ const buildTranscriptTurnsFromCalls = (calls: Record<string, unknown>[]): Transc
 
 const buildHistoryFromTranscriptTurns = (
   turns: TranscriptTurn[],
-): Record<string, { content: string; callId: string }> => {
-  const history: Record<string, { content: string; callId: string }> = {};
+): Record<string, AIChatHistoryEntry> => {
+  const history: Record<string, AIChatHistoryEntry> = {};
   const keyUsageByPrompt = new Map<string, number>();
 
   turns.forEach((turn, index) => {
@@ -740,9 +741,86 @@ const truncatePromptForTitle = (prompt: string): string => {
   return prompt;
 };
 
+const stripHistoryPromptTimestamp = (prompt: string): string => {
+  const isoMatch = prompt.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z:(.+)/);
+  if (isoMatch && isoMatch[1]) {
+    return isoMatch[1];
+  }
+
+  return prompt.replace(/^\d+:/, '');
+};
+
+const upsertConversationSummary = (
+  conversations: APIConversationSummary[],
+  summary: APIConversationSummary,
+): APIConversationSummary[] => {
+  const normalizedSummary = normalizeConversationListPayload([summary])[0];
+  if (!normalizedSummary) {
+    return conversations;
+  }
+
+  const dedupedById = new Map<string, APIConversationSummary>();
+  for (const conv of conversations) {
+    dedupedById.set(conv.conversationId, conv);
+  }
+
+  const existing = dedupedById.get(normalizedSummary.conversationId);
+  const existingUpdatedAt = existing ? new Date(existing.updatedAt).getTime() : 0;
+  const incomingUpdatedAt = new Date(normalizedSummary.updatedAt).getTime();
+  const preferIncoming = !existing || incomingUpdatedAt >= existingUpdatedAt;
+  const latest = preferIncoming ? normalizedSummary : existing;
+  const fallback = preferIncoming ? existing : normalizedSummary;
+
+  dedupedById.set(normalizedSummary.conversationId, {
+    ...(fallback || {}),
+    ...(latest || {}),
+    createdAt: existing?.createdAt || normalizedSummary.createdAt,
+    updatedAt: latest?.updatedAt || fallback?.updatedAt || normalizedSummary.updatedAt,
+    title: latest?.title || fallback?.title || '',
+    summary: latest?.summary || fallback?.summary,
+    agentId: latest?.agentId || fallback?.agentId,
+    messageCount:
+      typeof latest?.messageCount === 'number'
+        ? latest.messageCount
+        : fallback?.messageCount,
+  });
+
+  return Array.from(dedupedById.values()).sort(
+    (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+  );
+};
+
+const buildOptimisticConversationSummary = (
+  conversation: ActiveConversation,
+): APIConversationSummary | null => {
+  const conversationId =
+    typeof conversation.conversationId === 'string' ? conversation.conversationId.trim() : '';
+  if (!conversationId || conversationId.startsWith('new-')) {
+    return null;
+  }
+
+  const historyKeys = Object.keys(conversation.history || {});
+  if (historyKeys.length === 0 && conversation.title === 'New conversation') {
+    return null;
+  }
+
+  const firstPrompt = historyKeys[0] ? stripHistoryPromptTimestamp(historyKeys[0]) : '';
+  const title = truncatePromptForTitle(firstPrompt || conversation.title || 'New conversation');
+  const now = new Date().toISOString();
+
+  return {
+    conversationId,
+    title,
+    createdAt: now,
+    updatedAt: now,
+    agentId: conversation.agentId,
+    messageCount: historyKeys.length > 0 ? historyKeys.length * 2 : undefined,
+  };
+};
+
 // Empty arrays/objects to prevent recreating on every render
 const EMPTY_ARRAY: never[] = [];
-const EMPTY_HISTORY: Record<string, { content: string; callId: string }> = {};
+const EMPTY_HISTORY: Record<string, AIChatHistoryEntry> = {};
 
 /**
  * Memoized wrapper for AIChatPanel to prevent unnecessary re-renders
@@ -754,7 +832,7 @@ interface ChatPanelWrapperProps {
   url: string;
   theme: 'light' | 'dark';
   chatPanelData: { key: string; data: string }[];
-  handleHistoryChanged: (history: Record<string, { content: string; callId: string }>, conversationId?: string) => void;
+  handleHistoryChanged: (history: Record<string, AIChatHistoryEntry>, conversationId?: string) => void;
   handleLoadingChange: (isLoading: boolean, conversationId?: string) => void;
   responseCompleteCallback?: (callId: string, prompt: string, response: string) => void;
   thumbsUpClick?: (callId: string) => void;
@@ -867,7 +945,7 @@ const ChatPanelWrapper = (({
   
   // Memoize callbacks to prevent recreating on every render
   const historyCallback = useCallback(
-    (history: Record<string, { content: string; callId: string }>) => {
+    (history: Record<string, AIChatHistoryEntry>) => {
       handleHistoryChanged(history, activeConv.conversationId);
     },
     [handleHistoryChanged, activeConv.conversationId]
@@ -1308,12 +1386,15 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
     agentList,
   } = useAgentRegistry(agentIds, { url, localOverrides });
 
+  const getAgentRef = useRef(getAgent);
+  useEffect(() => {
+    getAgentRef.current = getAgent;
+  }, [getAgent]);
+
   // Ref to track if fetch is in progress (prevents duplicate calls)
   const fetchInProgressRef = useRef(false);
   const loadingTranscriptIdsRef = useRef<Set<string>>(new Set());
-  
-  // Ref to track the last agent we fetched for
-  const lastFetchedAgentRef = useRef<string | null>(null);
+  const [conversationListRefreshNonce, setConversationListRefreshNonce] = useState(0);
   
   // Ref to track which conversations we've checked for prompts
   const checkedPromptsRef = useRef<Set<string>>(new Set());
@@ -1332,6 +1413,43 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   const currentConversationIdRef = useRef<string | null>(currentConversationId);
   currentConversationIdRef.current = currentConversationId;
 
+  const controlledConversationIdRef = useRef<string | null>(controlledConversationId);
+  controlledConversationIdRef.current = controlledConversationId;
+
+  const requestConversationListRefresh = useCallback(() => {
+    setConversationListRefreshNonce(prev => prev + 1);
+  }, []);
+
+  const upsertApiConversationFromHistory = useCallback(
+    (
+      conversationId: string,
+      history: Record<string, AIChatHistoryEntry>,
+      fallbackTitle?: string,
+    ) => {
+      const firstPromptKey = Object.keys(history)[0];
+      const firstPrompt = firstPromptKey ? stripHistoryPromptTimestamp(firstPromptKey) : '';
+      const title = truncatePromptForTitle(firstPrompt || fallbackTitle || 'New conversation');
+      const messageCount = Object.keys(history).length * 2;
+      const timestamp = new Date().toISOString();
+
+      setApiConversations(prev =>
+        upsertConversationSummary(prev, {
+          conversationId,
+          title,
+          createdAt:
+            prev.find((conversation) => conversation.conversationId === conversationId)?.createdAt ||
+            timestamp,
+          updatedAt: timestamp,
+          agentId:
+            prev.find((conversation) => conversation.conversationId === conversationId)?.agentId ||
+            currentAgentId,
+          messageCount,
+        }),
+      );
+    },
+    [currentAgentId]
+  );
+
   // Centralized conversation selection flow.
   // In controlled mode, we only update local selection for prop-driven updates (notify=false).
   const commitConversationSelection = useCallback(
@@ -1433,7 +1551,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
 
     // Use the conversation's agentId if available, otherwise fall back to currentAgentId
     const agentIdToUse = agentIdForConversation || currentAgentId;
-    const agentProfile = getAgent(agentIdToUse);
+    const agentProfile = getAgentRef.current(agentIdToUse);
     const projectId = agentProfile?.metadata?.projectId;
 
     if (!apiKey || !projectId) {
@@ -1522,14 +1640,14 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
         return next;
       });
     }
-  }, [apiKey, currentAgentId, getAgent]);
+  }, [apiKey, currentAgentId]);
 
   // Fetch conversations from API
-  const fetchConversations = useCallback(async (agentId: string, signal?: AbortSignal) => {
-    // Get the agent profile to access projectId
-    const agentProfile = getAgent(agentId);
-    const projectId = agentProfile?.metadata?.projectId;
-
+  const fetchConversations = useCallback(async (
+    agentId: string,
+    projectId: string,
+    signal?: AbortSignal,
+  ) => {
     if (!agentId || !apiKey || !projectId) {
       setApiConversations([]);
       return;
@@ -1563,7 +1681,44 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
       const normalized = normalizeConversationListPayload(payload);
       
       if (!signal?.aborted) {
-        setApiConversations(normalized);
+        setApiConversations(prev => {
+          const next = [...normalized];
+          const optimisticIds = new Set<string>();
+
+          const trackedConversationId = controlledConversationIdRef.current;
+          if (trackedConversationId) {
+            optimisticIds.add(trackedConversationId);
+          }
+
+          activeConversationsRef.current.forEach((conversation) => {
+            const optimisticSummary = buildOptimisticConversationSummary(conversation);
+            if (!optimisticSummary) {
+              return;
+            }
+
+            optimisticIds.add(optimisticSummary.conversationId);
+            const existing = prev.find(
+              (candidate) => candidate.conversationId === optimisticSummary.conversationId
+            );
+            next.push({
+              ...optimisticSummary,
+              createdAt: existing?.createdAt || optimisticSummary.createdAt,
+              updatedAt: optimisticSummary.updatedAt,
+            });
+          });
+
+          let merged = normalizeConversationListPayload(next);
+          if (optimisticIds.size > 0) {
+            prev.forEach((conversation) => {
+              if (!optimisticIds.has(conversation.conversationId)) {
+                return;
+              }
+              merged = upsertConversationSummary(merged, conversation);
+            });
+          }
+
+          return merged;
+        });
         
         // Fetch first prompts for Today and Yesterday conversations
         const now = new Date();
@@ -1588,7 +1743,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
         setConversationsLoading(false);
       }
     }
-  }, [apiKey, customerId, getAgent, fetchFirstPrompt]);
+  }, [apiKey, customerId, fetchFirstPrompt]);
 
   // Helper to strip context/template data from a prompt - keeps only the user's actual message
   // Load a specific conversation's transcript (or switch to it if already active)
@@ -1616,7 +1771,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
 
     // Use the conversation's agentId if available, otherwise fall back to currentAgentId
     const agentIdToUse = agentIdForConversation || currentAgentId;
-    const agentProfile = getAgent(agentIdToUse);
+    const agentProfile = getAgentRef.current(agentIdToUse);
     const projectId = agentProfile?.metadata?.projectId;
 
     if (!apiKey || !projectId) {
@@ -1711,7 +1866,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
       loadingTranscriptIdsRef.current.delete(conversationId);
       setLoadingConversationId(prev => (prev === conversationId ? null : prev));
     }
-  }, [apiKey, commitConversationSelection, conversationFirstPrompts, currentAgentId, getAgent]);
+  }, [apiKey, commitConversationSelection, conversationFirstPrompts, currentAgentId]);
 
   // Controlled conversation mode: keep panel selection in sync with external conversation prop.
   useEffect(() => {
@@ -1798,10 +1953,15 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   ]);
 
 
+  const currentAgentProjectId = useMemo(() => {
+    const agentProfile = getAgent(currentAgentId);
+    return agentProfile?.metadata?.projectId || '';
+  }, [currentAgentId, getAgent]);
+
   // Refresh conversations callback
   const handleRefreshConversations = useCallback(() => {
-    fetchConversations(currentAgentId);
-  }, [currentAgentId, fetchConversations]);
+    requestConversationListRefresh();
+  }, [requestConversationListRefresh]);
 
   // Fetch conversations on mount and when agent changes
   useEffect(() => {
@@ -1810,17 +1970,21 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
     
     // Only fetch if agents are loaded and we have necessary data
     if (!agentsLoading && currentAgentId && apiKey) {
-      // Check if agent is ready (has projectId)
-      const agentProfile = getAgent(currentAgentId);
-      const projectId = agentProfile?.metadata?.projectId;
-      
-      // Only fetch once per agent, and only if agent is ready
-      if (projectId && lastFetchedAgentRef.current !== currentAgentId) {
-        lastFetchedAgentRef.current = currentAgentId;
-        fetchConversations(currentAgentId);
+      if (currentAgentProjectId) {
+        const controller = new AbortController();
+        fetchConversations(currentAgentId, currentAgentProjectId, controller.signal);
+        return () => controller.abort();
       }
     }
-  }, [agentsLoading, currentAgentId, apiKey, fetchConversations, getAgent, showConversationHistory]);
+  }, [
+    agentsLoading,
+    apiKey,
+    conversationListRefreshNonce,
+    currentAgentId,
+    currentAgentProjectId,
+    fetchConversations,
+    showConversationHistory,
+  ]);
 
   // Start new conversation
   const handleNewConversation = useCallback(() => {
@@ -2273,7 +2437,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
 
   // Handle history changes from ChatPanel
   const handleHistoryChanged = useCallback(
-    (history: Record<string, { content: string; callId: string }>, conversationId?: string) => {
+    (history: Record<string, AIChatHistoryEntry>, conversationId?: string) => {
       const targetConversationId = conversationId || currentConversationIdRef.current;
       
       // Update active conversation history
@@ -2287,12 +2451,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
             if (title === 'New conversation' && Object.keys(history).length > 0) {
               const firstPrompt = Object.keys(history)[0];
               if (firstPrompt) {
-                // Strip timestamp prefix
-                let cleanPrompt = firstPrompt;
-                const isoMatch = cleanPrompt.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z:(.+)/);
-                if (isoMatch && isoMatch[1]) {
-                  cleanPrompt = isoMatch[1];
-                }
+                const cleanPrompt = stripHistoryPromptTimestamp(firstPrompt);
                 title = cleanPrompt.length > 60 ? cleanPrompt.slice(0, 57) + '...' : cleanPrompt;
               }
             }
@@ -2306,6 +2465,13 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
           }
           return prev;
         });
+
+        const existingActiveConversation = activeConversationsRef.current.get(targetConversationId);
+        upsertApiConversationFromHistory(
+          targetConversationId,
+          history,
+          existingActiveConversation?.title,
+        );
       }
       
       // Check for agent handoff suggestion
@@ -2328,9 +2494,11 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
       }
     },
     [
+      activeConversationsRef,
       currentAgentId,
       historyChangedCallback,
       agents,
+      upsertApiConversationFromHistory,
     ]
   );
   
@@ -2342,6 +2510,9 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
       setActiveConversations(prev => {
         const existing = prev.get(targetConversationId);
         if (existing && existing.isLoading !== isLoading) {
+          if (existing.isLoading && !isLoading) {
+            requestConversationListRefresh();
+          }
           const next = new Map(prev);
           next.set(targetConversationId, {
             ...existing,
@@ -2352,7 +2523,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
         return prev;
       });
     }
-  }, []);
+  }, [requestConversationListRefresh]);
 
   // Handle handoff confirmation
   const handleHandoffConfirm = useCallback(() => {
@@ -2413,7 +2584,8 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
     if (currentConversationIdRef.current === tempId) {
       commitConversationSelection(realId, true);
     }
-  }, [commitConversationSelection]);
+    requestConversationListRefresh();
+  }, [commitConversationSelection, requestConversationListRefresh]);
 
   // Toggle collapse - only if collapsible is enabled
   const toggleCollapse = useCallback(() => {

package/src/AIChatPanel.css

@@ -2700,6 +2700,14 @@
   border-color: var(--thinking-block-accent);
 }
 
+.thinking-block--planning {
+  --thinking-block-accent: #f59e0b;
+  --thinking-block-bg: #fffbeb;
+  --thinking-block-text: #b45309;
+  background-color: var(--thinking-block-bg);
+  border-color: var(--thinking-block-accent);
+}
+
 /* Dark theme type-specific */
 .dark-theme .thinking-block--thinking {
   --thinking-block-bg: #1e1b2e;
@@ -2719,6 +2727,12 @@
   --thinking-block-text: #86efac;
 }
 
+.dark-theme .thinking-block--planning {
+  --thinking-block-bg: #2b2111;
+  --thinking-block-accent: #fbbf24;
+  --thinking-block-text: #fcd34d;
+}
+
 /* Header (clickable toggle) */
 .thinking-block__header {
   display: flex;