@hef2024/llmasaservice-ui 0.16.8 → 0.16.9

package/package.json

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

package/src/AIAgentPanel.css

@@ -569,13 +569,18 @@
 }
 
 .ai-agent-panel__loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  flex: 1;
   gap: 12px;
   color: var(--ai-sidebar-text-muted);
+  background-color: var(--ai-chat-bg);
 }
 
 .ai-agent-panel__conversation-loading-overlay {
@@ -1352,3 +1357,76 @@
   border-left: 1px solid var(--ai-sidebar-border);
 }
 
+/* --------------------------------------------------------
+   No History Mode - Hide sidebar completely
+-------------------------------------------------------- */
+.ai-agent-panel--no-history .ai-agent-panel__sidebar {
+  display: none;
+}
+
+.ai-agent-panel--no-history .ai-agent-panel__chat {
+  flex: 1;
+  border: none;
+}
+
+/* --------------------------------------------------------
+   Context Change Notification
+-------------------------------------------------------- */
+.ai-agent-panel__context-notification {
+  position: absolute;
+  bottom: 70px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background-color: var(--ai-agent-badge-bg);
+  color: var(--ai-agent-badge-text);
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  animation: ai-context-notification-in 0.3s ease-out, ai-context-notification-out 0.3s ease-in 2.7s forwards;
+  pointer-events: none;
+}
+
+.ai-agent-panel__context-notification svg {
+  flex-shrink: 0;
+  animation: ai-sparkle-pulse 0.6s ease-in-out infinite alternate;
+}
+
+@keyframes ai-context-notification-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-50%) translateY(10px) scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+
+@keyframes ai-context-notification-out {
+  0% {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(-50%) translateY(10px) scale(0.9);
+  }
+}
+
+@keyframes ai-sparkle-pulse {
+  0% {
+    opacity: 0.7;
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+}
+

package/src/AIAgentPanel.tsx

@@ -1,9 +1,9 @@
-import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
-import AIChatPanel, { AgentOption } from './AIChatPanel';
-import { useAgentRegistry } from './hooks/useAgentRegistry';
-import { Button, Input, ScrollArea, Dialog, DialogFooter, Tooltip } from './components/ui';
 import { LLMAsAServiceCustomer } from 'llmasaservice-client';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import './AIAgentPanel.css';
+import AIChatPanel, { AgentOption } from './AIChatPanel';
+import { Button, Dialog, DialogFooter, Input, ScrollArea, Tooltip } from './components/ui';
+import { useAgentRegistry } from './hooks/useAgentRegistry';
 
 /**
  * Context section for agent awareness
@@ -42,6 +42,7 @@ export interface APIConversationSummary {
  */
 export interface ActiveConversation {
   conversationId: string;
+  stableKey: string; // Stable key for React component - never changes
   agentId: string;
   history: Record<string, { content: string; callId: string }>;
   isLoading: boolean;
@@ -125,6 +126,9 @@ export interface AIAgentPanelProps {
 
   // Conversation history settings
   historyListLimit?: number;
+
+  // Enable/disable conversation history panel
+  showConversationHistory?: boolean;
 }
 
 // Icons
@@ -193,6 +197,13 @@ const SidebarIcon = () => (
   </svg>
 );
 
+const SparkleIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 1v3M8 12v3M3 8H0M16 8h-3M12.95 3.05l-2.12 2.12M5.17 10.83l-2.12 2.12M12.95 12.95l-2.12-2.12M5.17 5.17L3.05 3.05" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+    <circle cx="8" cy="8" r="2" fill="currentColor"/>
+  </svg>
+);
+
 /**
  * AIAgentPanel - Cursor-inspired multi-agent panel
  */
@@ -351,6 +362,8 @@ interface ChatPanelWrapperProps {
   totalContextTokens: number;
   maxContextTokens: number;
   enableContextDetailView: boolean;
+  // Conversation creation callback
+  onConversationCreated: (tempId: string, realId: string) => void;
 }
 
 // Remove React.memo temporarily to debug - ChatPanelWrapper needs to re-render when agentId changes
@@ -379,6 +392,7 @@ const ChatPanelWrapper = (({
   totalContextTokens,
   maxContextTokens,
   enableContextDetailView,
+  onConversationCreated,
 }) => {
   const convAgentProfile = getAgent(activeConv.agentId);
   const convAgentMetadata = convAgentProfile?.metadata;
@@ -399,6 +413,14 @@ const ChatPanelWrapper = (({
     [handleLoadingChange, activeConv.conversationId]
   );
   
+  // Callback when AIChatPanel creates a new conversation via API
+  const conversationCreatedCallback = useCallback(
+    (realConversationId: string) => {
+      onConversationCreated(activeConv.conversationId, realConversationId);
+    },
+    [onConversationCreated, activeConv.conversationId]
+  );
+  
   // Compute follow-on questions - MUST update when agent switches
   // Don't use useMemo - compute fresh every render to ensure it always reflects current agent
   // The computation is cheap (just string split), and this guarantees updates
@@ -472,6 +494,7 @@ const ChatPanelWrapper = (({
         totalContextTokens={totalContextTokens}
         maxContextTokens={maxContextTokens}
         enableContextDetailView={enableContextDetailView}
+        onConversationCreated={conversationCreatedCallback}
       />
     </div>
   );
@@ -514,6 +537,7 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
   followOnQuestions = [],
   followOnPrompt = '',
   historyListLimit = 50,
+  showConversationHistory = true,
 }) => {
   // Panel state
   const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
@@ -540,6 +564,7 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
   const [showSearch, setShowSearch] = useState(false);
   const [showHandoffDialog, setShowHandoffDialog] = useState(false);
   const [suggestedAgent, setSuggestedAgent] = useState<string | null>(null);
+  const [handoffSource, setHandoffSource] = useState<'agent' | 'page'>('agent');
   const panelRef = useRef<HTMLDivElement>(null);
   const resizeRef = useRef<HTMLDivElement>(null);
 
@@ -628,6 +653,14 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
   const currentConversationIdRef = useRef<string | null>(currentConversationId);
   currentConversationIdRef.current = currentConversationId;
 
+  // Context change notification state
+  const [showContextNotification, setShowContextNotification] = useState(false);
+  const prevContextRef = useRef<string | null>(null);
+  const contextNotificationTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Track previous defaultAgent to avoid re-suggesting the same agent
+  const prevDefaultAgentRef = useRef<string | null>(null);
+
   // Fetch first prompt from a conversation
   const fetchFirstPrompt = useCallback(async (conversationId: string, agentIdForConversation?: string) => {
     // Skip if already checked/loaded
@@ -774,6 +807,9 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
 
     setConversationsLoading(true);
     setConversationsError(null);
+console.log("projectId", projectId);
+console.log("customerId", customerId);
+console.log("apiKey", apiKey);
 
     try {
       console.log('fetchConversations - customerId:', customerId);
@@ -942,6 +978,7 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
         const next = new Map(prev);
         next.set(conversationId, {
           conversationId,
+          stableKey: conversationId, // Use real ID as stable key when loading from API
           agentId: agentIdToUse,
           history,
           isLoading: false,
@@ -975,6 +1012,9 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
 
   // Fetch conversations on mount and when agent changes
   useEffect(() => {
+    // Skip fetching if conversation history is disabled
+    if (!showConversationHistory) return;
+    
     // Only fetch if agents are loaded and we have necessary data
     if (!agentsLoading && currentAgentId && apiKey) {
       // Check if agent is ready (has projectId)
@@ -987,7 +1027,7 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
         fetchConversations(currentAgentId);
       }
     }
-  }, [agentsLoading, currentAgentId, apiKey, fetchConversations, getAgent]);
+  }, [agentsLoading, currentAgentId, apiKey, fetchConversations, getAgent, showConversationHistory]);
 
   // Start new conversation
   const handleNewConversation = useCallback(() => {
@@ -999,6 +1039,7 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
       const next = new Map(prev);
       next.set(tempId, {
         conversationId: tempId,
+        stableKey: tempId, // Stable key never changes even when conversationId updates
         agentId: currentAgentId,
         history: {},
         isLoading: false,
@@ -1202,6 +1243,125 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
   }, [context, sharedContextSections, pageContextSections, contextDataSources]);
 
 
+  // Detect context changes and show notification
+  useEffect(() => {
+    // Create a stable string representation of the context for comparison
+    const contextString = JSON.stringify(mergedContext.sections.map(s => ({ id: s.id, data: s.data })));
+    
+    // Skip on first render
+    if (prevContextRef.current === null) {
+      prevContextRef.current = contextString;
+      return;
+    }
+    
+    // Check if context actually changed
+    if (prevContextRef.current !== contextString) {
+      console.log('AIAgentPanel - Context changed, showing notification');
+      prevContextRef.current = contextString;
+      
+      // Clear any existing timeout before setting a new one
+      if (contextNotificationTimeoutRef.current) {
+        clearTimeout(contextNotificationTimeoutRef.current);
+        contextNotificationTimeoutRef.current = null;
+      }
+      
+      // Show the notification
+      setShowContextNotification(true);
+      
+      // Auto-hide after 3 seconds
+      contextNotificationTimeoutRef.current = setTimeout(() => {
+        setShowContextNotification(false);
+        contextNotificationTimeoutRef.current = null;
+      }, 3000);
+    }
+    
+    // Note: No cleanup on every re-render - only clear timeout when context changes
+    // This prevents race conditions when switching rapidly
+  }, [mergedContext.sections]);
+
+  // Separate cleanup effect for unmount only
+  useEffect(() => {
+    return () => {
+      if (contextNotificationTimeoutRef.current) {
+        clearTimeout(contextNotificationTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  // Auto-suggest agent switch when page context includes a defaultAgent
+  // Injects a synthetic message with [SUGGEST_AGENT:...] into the chat history
+  useEffect(() => {
+    // Look for a defaultAgent in any page context section
+    let foundDefaultAgent: string | null = null;
+    
+    for (const section of pageContextSections) {
+      if (section.data && typeof section.data === 'object' && 'defaultAgent' in section.data) {
+        const defaultAgentValue = section.data.defaultAgent;
+        if (typeof defaultAgentValue === 'string' && defaultAgentValue) {
+          foundDefaultAgent = defaultAgentValue;
+          break;
+        }
+      }
+    }
+    
+    // Skip if no defaultAgent found or it's the same as last time we processed
+    if (!foundDefaultAgent || foundDefaultAgent === prevDefaultAgentRef.current) {
+      return;
+    }
+    
+    // Skip if it's already the current agent
+    if (foundDefaultAgent === currentAgentId) {
+      // Update ref so we don't re-process if user switches away and back
+      prevDefaultAgentRef.current = foundDefaultAgent;
+      return;
+    }
+    
+    // Check if this agent is in our available agents list and is ready
+    const isAvailable = agentIds.includes(foundDefaultAgent);
+    const agentProfile = getAgent(foundDefaultAgent);
+    const isReady = agentProfile?.status === 'ready';
+    
+    if (isAvailable && isReady && currentConversationIdRef.current) {
+      // Get the agent's display name
+      const agentName = agentProfile?.metadata?.displayTitle || 
+        localOverrides[foundDefaultAgent]?.localName || 
+        foundDefaultAgent;
+      
+      // Create a synthetic message with the SUGGEST_AGENT marker
+      // This will be processed by the existing agent suggestion card rendering
+      const suggestionMessage = `This page recommends a different agent for better assistance.\n\n[SUGGEST_AGENT:${foundDefaultAgent}|${agentName}|Recommended for this page]`;
+      
+      // Create a unique key for the synthetic message (includes timestamp to allow multiple suggestions)
+      // Using __system__: prefix tells AIChatPanel to hide the "user message" part
+      const syntheticKey = `__system__:page_suggestion_${foundDefaultAgent}_${Date.now()}`;
+      
+      // Update ref BEFORE injecting to prevent duplicate processing
+      prevDefaultAgentRef.current = foundDefaultAgent;
+      
+      // Inject the synthetic message into the current conversation's history
+      setActiveConversations(prev => {
+        const conversationId = currentConversationIdRef.current;
+        if (!conversationId) return prev;
+        
+        const existing = prev.get(conversationId);
+        if (!existing) return prev;
+        
+        const next = new Map(prev);
+        next.set(conversationId, {
+          ...existing,
+          history: {
+            ...existing.history,
+            [syntheticKey]: {
+              content: suggestionMessage,
+              callId: `page-suggestion-${Date.now()}`,
+            },
+          },
+        });
+        return next;
+      });
+    }
+  }, [pageContextSections, currentAgentId, agentIds, getAgent, localOverrides]);
+
   // Build data array for ChatPanel
   const chatPanelData = useMemo(() => {
     const contextData = mergedContext.sections.map((section) => ({
@@ -1337,6 +1497,7 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
           const suggestedId = handoffMatch[1];
           if (suggestedId && suggestedId !== currentAgentId && agents.includes(suggestedId)) {
             setSuggestedAgent(suggestedId);
+            setHandoffSource('agent');
             setShowHandoffDialog(true);
           }
         }
@@ -1380,13 +1541,43 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
     }
     setShowHandoffDialog(false);
     setSuggestedAgent(null);
+    setHandoffSource('agent');
   }, [suggestedAgent, handleAgentSwitch]);
 
   const handleHandoffCancel = useCallback(() => {
     setShowHandoffDialog(false);
     setSuggestedAgent(null);
+    setHandoffSource('agent');
   }, []);
 
+  // Handle conversation created - update temp ID to real ID from API
+  const handleConversationCreated = useCallback((tempId: string, realId: string) => {
+    console.log('Conversation created:', tempId, '->', realId);
+    
+    // Update activeConversations - replace temp ID with real ID
+    setActiveConversations(prev => {
+      const existing = prev.get(tempId);
+      if (existing) {
+        const next = new Map(prev);
+        next.delete(tempId);
+        next.set(realId, {
+          ...existing,
+          conversationId: realId,
+        });
+        return next;
+      }
+      return prev;
+    });
+    
+    // Update currentConversationId if it was the temp one
+    if (currentConversationIdRef.current === tempId) {
+      setCurrentConversationId(realId);
+      if (onConversationChange) {
+        onConversationChange(realId);
+      }
+    }
+  }, [onConversationChange]);
+
   // Toggle collapse
   const toggleCollapse = useCallback(() => {
     setIsCollapsed((prev) => !prev);
@@ -1408,6 +1599,7 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
     isCollapsed ? 'ai-agent-panel--collapsed' : '',
     position === 'left' ? 'ai-agent-panel--left' : 'ai-agent-panel--right',
     sidebarPosition === 'right' ? 'ai-agent-panel--sidebar-right' : 'ai-agent-panel--sidebar-left',
+    !showConversationHistory ? 'ai-agent-panel--no-history' : '',
   ].filter(Boolean).join(' ');
 
   // Collapsed view
@@ -1433,18 +1625,20 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
 
           <div className="ai-agent-panel__collapsed-divider" />
 
-          <Tooltip content="Search" side="left">
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={() => {
-                setIsCollapsed(false);
-                setShowSearch(true);
-              }}
-            >
-              <SearchIcon />
-            </Button>
-          </Tooltip>
+          {showConversationHistory && (
+            <Tooltip content="Search" side="left">
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => {
+                  setIsCollapsed(false);
+                  setShowSearch(true);
+                }}
+              >
+                <SearchIcon />
+              </Button>
+            </Tooltip>
+          )}
 
           <Tooltip content="New Chat" side="left">
             <Button
@@ -1489,6 +1683,7 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
                         const next = new Map(prev);
                         next.set(tempId, {
                           conversationId: tempId,
+                          stableKey: tempId, // Stable key never changes
                           agentId: agent.id,
                           history: {},
                           isLoading: false,
@@ -1543,7 +1738,8 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
         tabIndex={0}
       />
 
-      {/* Sidebar */}
+      {/* Sidebar - only show if conversation history is enabled */}
+      {showConversationHistory && (
       <div className={`ai-agent-panel__sidebar ${isHistoryCollapsed ? 'ai-agent-panel__sidebar--collapsed' : ''}`}>
         {isHistoryCollapsed ? (
           // Collapsed history bar
@@ -1609,6 +1805,7 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
                           const next = new Map(prev);
                           next.set(tempId, {
                             conversationId: tempId,
+                            stableKey: tempId, // Stable key never changes
                             agentId: agent.id,
                             history: {},
                             isLoading: false,
@@ -1696,7 +1893,7 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
               </div>
               {activeConversationsList.map((activeConv) => (
                 <div
-                  key={activeConv.conversationId}
+                  key={activeConv.stableKey}
                   className={`ai-agent-panel__conversation ai-agent-panel__conversation--active-item ${
                     currentConversationId === activeConv.conversationId
                       ? 'ai-agent-panel__conversation--current'
@@ -1795,13 +1992,22 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
           </>
         )}
       </div>
+      )}
 
       {/* Chat area */}
       <div className="ai-agent-panel__chat">
+        {/* Context change notification */}
+        {showContextNotification && (
+          <div className="ai-agent-panel__context-notification">
+            <SparkleIcon />
+            <span>Agent now has new context</span>
+          </div>
+        )}
+
         {/* Chat panels - one per active conversation, shown/hidden via CSS */}
         {activeConversationsList.map((activeConv) => (
           <ChatPanelWrapper
-            key={`${activeConv.conversationId}-${activeConv.agentId}`}
+            key={`${activeConv.stableKey}-${activeConv.agentId}`}
             activeConv={activeConv}
             currentConversationId={currentConversationId}
             getAgent={getAgent}
@@ -1826,6 +2032,7 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
             totalContextTokens={mergedContext.totalTokens || 0}
             maxContextTokens={maxContextTokens}
             enableContextDetailView={enableContextDetailView}
+            onConversationCreated={handleConversationCreated}
           />
         ))}
         
@@ -1862,9 +2069,15 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
         isOpen={showHandoffDialog}
         onClose={handleHandoffCancel}
         title="Switch Agent?"
-        description={`The current agent suggests transferring this conversation to ${
-          suggestedAgent ? getAgent(suggestedAgent)?.metadata?.displayTitle || suggestedAgent : 'another agent'
-        }.`}
+        description={
+          handoffSource === 'page'
+            ? `This page has a recommended agent: ${
+                suggestedAgent ? getAgent(suggestedAgent)?.metadata?.displayTitle || suggestedAgent : 'another agent'
+              }. Would you like to switch?`
+            : `The current agent suggests transferring this conversation to ${
+                suggestedAgent ? getAgent(suggestedAgent)?.metadata?.displayTitle || suggestedAgent : 'another agent'
+              }.`
+        }
       >
         <DialogFooter>
           <Button variant="outline" onClick={handleHandoffCancel}>