@hef2024/llmasaservice-ui 0.20.3 → 0.22.0

package/src/AIAgentPanel.tsx

@@ -96,6 +96,8 @@ export interface AIAgentPanelProps {
   theme?: 'light' | 'dark';
   collapsible?: boolean;
   defaultCollapsed?: boolean;
+  isCollapsed?: boolean;
+  onCollapsedChange?: (isCollapsed: boolean) => void;
   defaultWidth?: number;
   minWidth?: number;
   maxWidth?: number;
@@ -618,6 +620,8 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   theme = 'light',
   collapsible = true,
   defaultCollapsed = false,
+  isCollapsed: controlledIsCollapsed,
+  onCollapsedChange,
   defaultWidth = 720,
   minWidth = 520,
   maxWidth = 1200,
@@ -660,8 +664,36 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   customerEmailCaptureMode,
   customerEmailCapturePlaceholder,
 }, ref) => {
+  // Dev mode warnings for prop conflicts
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'development') {
+      // Warn if isCollapsed is provided without onCollapsedChange (user can't interact)
+      if (controlledIsCollapsed !== undefined && !onCollapsedChange) {
+        console.warn(
+          'AIAgentPanel: You provided `isCollapsed` prop without `onCollapsedChange`. ' +
+          'This will render a read-only collapsed state. To allow user interaction, provide both props.'
+        );
+      }
+      
+      // Warn if both isCollapsed and defaultCollapsed are provided (conflicting props)
+      if (controlledIsCollapsed !== undefined && defaultCollapsed !== false) {
+        console.warn(
+          'AIAgentPanel: You provided both `isCollapsed` and `defaultCollapsed` props. ' +
+          'When using controlled mode (isCollapsed), the defaultCollapsed prop is ignored. ' +
+          'Remove defaultCollapsed to avoid confusion.'
+        );
+      }
+    }
+  }, [controlledIsCollapsed, onCollapsedChange, defaultCollapsed]);
+
   // Panel state - only start collapsed if collapsible is true
-  const [isCollapsed, setIsCollapsed] = useState(collapsible && defaultCollapsed);
+  const [uncontrolledIsCollapsed, setUncontrolledIsCollapsed] = useState(collapsible && defaultCollapsed);
+  
+  // Determine if controlled
+  const isControlled = controlledIsCollapsed !== undefined;
+  
+  // Use controlled value if provided, otherwise use internal state
+  const isCollapsed = isControlled ? controlledIsCollapsed : uncontrolledIsCollapsed;
   const [isHistoryCollapsed, setIsHistoryCollapsed] = useState(() => {
     if (typeof window !== 'undefined') {
       const saved = localStorage.getItem('ai-agent-panel-history-collapsed');
@@ -1092,28 +1124,6 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   }, [apiKey, customerId, getAgent, fetchFirstPrompt]);
 
   // Helper to strip context/template data from a prompt - keeps only the user's actual message
-  const stripContextFromPrompt = useCallback((prompt: string): string => {
-    let cleanPrompt = prompt;
-    
-    // Strip ---context--- block and everything after it
-    const contextIndex = cleanPrompt.indexOf('---context---');
-    if (contextIndex !== -1) {
-      cleanPrompt = cleanPrompt.substring(0, contextIndex).trim();
-    }
-    
-    // Strip timestamp prefix (ISO format: 2024-01-01T00:00:00.000Z:)
-    const isoTimestampRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z:/;
-    if (isoTimestampRegex.test(cleanPrompt)) {
-      const colonIndex = cleanPrompt.indexOf(':', 19);
-      cleanPrompt = cleanPrompt.substring(colonIndex + 1);
-    } else if (/^\d+:/.test(cleanPrompt)) {
-      const colonIndex = cleanPrompt.indexOf(':');
-      cleanPrompt = cleanPrompt.substring(colonIndex + 1);
-    }
-    
-    return cleanPrompt.trim();
-  }, []);
-
   // Load a specific conversation's transcript (or switch to it if already active)
   const loadConversationTranscript = useCallback(async (conversationId: string, agentIdForConversation?: string, title?: string) => {
     // Check if conversation is already in activeConversations (use ref to avoid dependency)
@@ -1160,40 +1170,75 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
       console.log('loadConversationTranscript - API response:', payload);
       
       // The /calls endpoint returns an array of calls
-      // Build history from all calls in chronological order
-      // IMPORTANT: Strip context/template data from prompts to prevent token bloat
+      // Use the messages property from the LAST call, which contains the full conversation history
       const history: Record<string, { content: string; callId: string }> = {};
       let firstPrompt: string | null = null;
       
       if (Array.isArray(payload) && payload.length > 0) {
-        // Parse all calls in order
-        payload.forEach((call: any, index: number) => {
-          if (call.prompt && call.response) {
-            // Get the raw prompt text
-            const rawPrompt = typeof call.prompt === 'string' 
-              ? call.prompt 
-              : call.prompt[0]?.text || '';
+        // Get the last call - it contains the full conversation history in the messages property
+        const lastCall = payload[payload.length - 1];
+        const callId = lastCall.id || '';
+        const timestamp = lastCall.createdAt || lastCall.created_at || new Date().toISOString();
+        
+        if (lastCall.messages) {
+          try {
+            // Parse the messages JSON string
+            const messages = JSON.parse(lastCall.messages) as { role: string; content: string }[];
+            console.log('loadConversationTranscript - parsed messages:', messages);
             
-            // Strip context/template data - keep only the user's actual message
-            const cleanedPrompt = stripContextFromPrompt(rawPrompt);
+            // Filter out system messages and special __system__: user messages
+            const relevantMessages = messages.filter(msg => 
+              msg.role !== 'system' && 
+              !(msg.role === 'user' && msg.content.startsWith('__system__:'))
+            );
+            console.log('loadConversationTranscript - filtered messages:', relevantMessages);
             
-            // Extract first prompt for display in list
-            if (index === 0 && cleanedPrompt) {
-              firstPrompt = cleanedPrompt.length > 60 ? cleanedPrompt.slice(0, 57) + '...' : cleanedPrompt;
+            // Pair user/assistant messages to build history
+            // Note: The messages array contains the INPUT to the LLM (history + new prompt)
+            // The LAST user message needs to be paired with the call's response field
+            for (let i = 0; i < relevantMessages.length; i++) {
+              const msg = relevantMessages[i];
+              
+              if (!msg) continue;
+              
+              if (msg.role === 'user') {
+                // Extract first prompt for conversation title
+                if (!firstPrompt) {
+                  firstPrompt = msg.content.length > 60 ? msg.content.slice(0, 57) + '...' : msg.content;
+                }
+                
+                // Look for the next assistant message in the array
+                const nextMsg = relevantMessages[i + 1];
+                
+                if (nextMsg && nextMsg.role === 'assistant') {
+                  // This is a historical turn - pair the user message with the assistant message from the array
+                  const historyKey = `${timestamp}:${msg.content}`;
+                  history[historyKey] = {
+                    content: nextMsg.content,
+                    callId: callId,
+                  };
+                  
+                  // Skip the assistant message we just processed
+                  i++;
+                } else {
+                  // This is the LAST user message - pair it with the response field
+                  if (lastCall.response) {
+                    const historyKey = `${timestamp}:${msg.content}`;
+                    history[historyKey] = {
+                      content: lastCall.response,
+                      callId: callId,
+                    };
+                  }
+                }
+              }
             }
-            
-            // Use timestamp-prefixed key to maintain order and uniqueness
-            const timestamp = call.createdAt || call.created_at || new Date().toISOString();
-            const historyKey = `${timestamp}:${cleanedPrompt}`;
-            
-            history[historyKey] = {
-              content: call.response,
-              callId: call.id || '',
-            };
+          } catch (err) {
+            console.error('loadConversationTranscript - failed to parse messages property:', err);
           }
-        });
+        }
       }
 
+      console.log('loadConversationTranscript - created', Object.keys(history).length, 'history entries');
       console.log('loadConversationTranscript - parsed history:', history);
       
       // Update first prompt in state if we found one
@@ -1234,7 +1279,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
       // Clear loading state on error
       setLoadingConversationId(null);
     }
-  }, [apiKey, currentAgentId, getAgent, onConversationChange, stripContextFromPrompt]);
+  }, [apiKey, currentAgentId, getAgent, onConversationChange]);
 
 
   // Refresh conversations callback
@@ -1863,8 +1908,17 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   // Toggle collapse - only if collapsible is enabled
   const toggleCollapse = useCallback(() => {
     if (!collapsible) return;
-    setIsCollapsed((prev) => !prev);
-  }, [collapsible]);
+    
+    const newValue = !isCollapsed;
+    
+    // Update internal state if uncontrolled
+    if (!isControlled) {
+      setUncontrolledIsCollapsed(newValue);
+    }
+    
+    // Call callback if provided
+    onCollapsedChange?.(newValue);
+  }, [collapsible, isCollapsed, isControlled, onCollapsedChange]);
 
   // Toggle history collapse
   const toggleHistoryCollapse = useCallback(() => {
@@ -1914,7 +1968,11 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
                 variant="ghost"
                 size="icon"
                 onClick={() => {
-                  setIsCollapsed(false);
+                  // Expand panel in controlled or uncontrolled mode
+                  if (!isControlled) {
+                    setUncontrolledIsCollapsed(false);
+                  }
+                  onCollapsedChange?.(false);
                   setShowSearch(true);
                 }}
               >
@@ -1928,7 +1986,11 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
               variant="ghost"
               size="icon"
               onClick={() => {
-                setIsCollapsed(false);
+                // Expand panel in controlled or uncontrolled mode
+                if (!isControlled) {
+                  setUncontrolledIsCollapsed(false);
+                }
+                onCollapsedChange?.(false);
                 handleNewConversation();
               }}
             >
@@ -1951,7 +2013,11 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
                   variant={agent.id === currentAgentId ? 'secondary' : 'ghost'}
                   size="icon"
                   onClick={() => {
-                    setIsCollapsed(false);
+                    // Expand panel in controlled or uncontrolled mode
+                    if (!isControlled) {
+                      setUncontrolledIsCollapsed(false);
+                    }
+                    onCollapsedChange?.(false);
                     if (hasActiveConversation && activeConvForAgent) {
                       // Switch to the existing conversation
                       setCurrentConversationId(activeConvForAgent.conversationId);

package/src/components/ui/Button.tsx

@@ -60,3 +60,5 @@ export default Button;
 
 
 
+
+

package/src/components/ui/Dialog.tsx

@@ -156,3 +156,5 @@ export default Dialog;
 
 
 
+
+

package/src/components/ui/Input.tsx

@@ -36,3 +36,5 @@ export default Input;
 
 
 
+
+

package/src/components/ui/Select.tsx

@@ -159,3 +159,5 @@ export default Select;
 
 
 
+
+

package/src/components/ui/ToolInfoModal.tsx

@@ -67,3 +67,5 @@ export default ToolInfoModal;
 
 
 
+
+

package/src/components/ui/Tooltip.tsx

@@ -76,3 +76,5 @@ export default Tooltip;
 
 
 
+
+

package/src/components/ui/index.ts

@@ -23,3 +23,5 @@ export type { DialogProps, DialogFooterProps } from './Dialog';
 
 
 
+
+