@hef2024/llmasaservice-ui 0.16.10 → 0.18.0

package/package.json

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

package/src/AIAgentPanel.css

@@ -190,9 +190,11 @@
 .ai-agent-panel {
   display: flex;
   flex-direction: row;
+  flex-wrap: nowrap; /* Prevent sidebar from wrapping below */
   /* Fill parent height - works in flex containers */
   align-self: stretch;
   height: 100%;
+  min-height: 400px; /* Fallback min-height when parent height is undefined */
   max-height: 100%;
   background-color: var(--ai-sidebar-bg);
   border-left: 1px solid var(--ai-sidebar-border);
@@ -211,7 +213,7 @@
 
 /* Sidebar position - left (default) */
 .ai-agent-panel--sidebar-left {
-  flex-direction: row;
+  flex-direction: row !important;
 }
 
 .ai-agent-panel--sidebar-left .ai-agent-panel__sidebar {
@@ -1369,6 +1371,23 @@
   border: none;
 }
 
+/* --------------------------------------------------------
+   Chat Header (for collapse button when no sidebar)
+-------------------------------------------------------- */
+.ai-agent-panel__chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 8px;
+  background-color: var(--ai-header-bg);
+  border-bottom: 1px solid var(--ai-header-border);
+  flex-shrink: 0;
+}
+
+.ai-agent-panel__chat-header-spacer {
+  flex: 1;
+}
+
 /* --------------------------------------------------------
    Context Change Notification
 -------------------------------------------------------- */

package/src/AIAgentPanel.tsx

@@ -47,6 +47,7 @@ export interface ActiveConversation {
   history: Record<string, { content: string; callId: string }>;
   isLoading: boolean;
   title: string;
+  conversationInitialPrompt?: string; // Per-conversation initial prompt for programmatic start
 }
 
 /**
@@ -58,6 +59,13 @@ export interface AgentConfig {
   avatarUrl?: string;
 }
 
+/**
+ * Imperative handle for programmatic control of AIAgentPanel
+ */
+export interface AIAgentPanelHandle {
+  startNewConversation: (prompt: string, agent?: string) => void;
+}
+
 /**
  * Props for AIAgentPanel
  */
@@ -83,6 +91,7 @@ export interface AIAgentPanelProps {
 
   // UI Configuration
   theme?: 'light' | 'dark';
+  collapsible?: boolean;
   defaultCollapsed?: boolean;
   defaultWidth?: number;
   minWidth?: number;
@@ -120,7 +129,10 @@ export interface AIAgentPanelProps {
     style?: string;
   }[];
 
-  // Follow-on
+  // Initial prompt and follow-on
+  initialPrompt?: string;
+  initialMessage?: string;
+  hideInitialPrompt?: boolean;
   followOnQuestions?: string[];
   followOnPrompt?: string;
 
@@ -351,6 +363,9 @@ interface ChatPanelWrapperProps {
   effectiveCustomer: any;
   showPoweredBy: boolean;
   actions: any[];
+  initialPrompt?: string;
+  initialMessage?: string;
+  hideInitialPrompt?: boolean;
   followOnQuestions: string[];
   followOnPrompt: string;
   agentOptions: any[];
@@ -364,6 +379,8 @@ interface ChatPanelWrapperProps {
   enableContextDetailView: boolean;
   // Conversation creation callback
   onConversationCreated: (tempId: string, realId: string) => void;
+  // Per-conversation initial prompt
+  conversationInitialPrompt?: string;
 }
 
 // Remove React.memo temporarily to debug - ChatPanelWrapper needs to re-render when agentId changes
@@ -382,6 +399,9 @@ const ChatPanelWrapper = (({
   effectiveCustomer,
   showPoweredBy,
   actions,
+  initialPrompt,
+  initialMessage,
+  hideInitialPrompt,
   followOnQuestions,
   followOnPrompt,
   agentOptions,
@@ -393,6 +413,7 @@ const ChatPanelWrapper = (({
   maxContextTokens,
   enableContextDetailView,
   onConversationCreated,
+  conversationInitialPrompt,
 }) => {
   const convAgentProfile = getAgent(activeConv.agentId);
   const convAgentMetadata = convAgentProfile?.metadata;
@@ -441,6 +462,9 @@ const ChatPanelWrapper = (({
     return convAgentProfile?.mcpServers || EMPTY_ARRAY;
   }, [convAgentProfile?.mcpServers]);
   
+  // Determine which initialPrompt to use - conversation-specific OR prop-based
+  const effectiveInitialPrompt = conversationInitialPrompt || initialPrompt;
+  
   if (!convAgentMetadata) return null;
   
   return (
@@ -456,17 +480,19 @@ const ChatPanelWrapper = (({
         theme={theme}
         promptTemplate={convAgentMetadata.displayPromptTemplate || '{{prompt}}'}
         initialMessage={
-          convAgentMetadata.displayStartMessageOrPrompt === 'message'
+          initialMessage || 
+          (convAgentMetadata.displayStartMessageOrPrompt === 'message'
             ? convAgentMetadata.displayInitialMessageOrPrompt
-            : undefined
+            : undefined)
         }
         initialPrompt={
-          convAgentMetadata.displayStartMessageOrPrompt === 'prompt'
+          effectiveInitialPrompt || 
+          (convAgentMetadata.displayStartMessageOrPrompt === 'prompt'
             ? convAgentMetadata.displayInitialMessageOrPrompt
-            : undefined
+            : undefined)
         }
         placeholder={convAgentMetadata.displayPlaceholder || 'Type a message...'}
-        hideInitialPrompt={convAgentMetadata.displayHideInitialPrompt ?? true}
+        hideInitialPrompt={hideInitialPrompt ?? convAgentMetadata.displayHideInitialPrompt ?? true}
         data={chatPanelData}
         agent={activeConv.agentId}
         conversation={activeConv.conversationId.startsWith('new-') ? undefined : activeConv.conversationId}
@@ -502,7 +528,7 @@ const ChatPanelWrapper = (({
 
 ChatPanelWrapper.displayName = 'ChatPanelWrapper';
 
-const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
+const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   agents,
   defaultAgent,
   customerId,
@@ -515,6 +541,7 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
   maxContextTokens = 8000,
   data = [],
   theme = 'light',
+  collapsible = true,
   defaultCollapsed = false,
   defaultWidth = 720,
   minWidth = 520,
@@ -534,13 +561,16 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
   showPoweredBy = true,
   conversation,
   actions = [],
+  initialPrompt,
+  initialMessage,
+  hideInitialPrompt,
   followOnQuestions = [],
   followOnPrompt = '',
   historyListLimit = 50,
   showConversationHistory = true,
-}) => {
-  // Panel state
-  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+}, ref) => {
+  // Panel state - only start collapsed if collapsible is true
+  const [isCollapsed, setIsCollapsed] = useState(collapsible && defaultCollapsed);
   const [isHistoryCollapsed, setIsHistoryCollapsed] = useState(() => {
     if (typeof window !== 'undefined') {
       const saved = localStorage.getItem('ai-agent-panel-history-collapsed');
@@ -653,6 +683,33 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
   const currentConversationIdRef = useRef<string | null>(currentConversationId);
   currentConversationIdRef.current = currentConversationId;
 
+  // Imperative handle for programmatic control
+  React.useImperativeHandle(ref, () => ({
+    startNewConversation: (prompt: string, agent?: string) => {
+      const targetAgent = agent || currentAgentId;
+      const tempId = `new-${Date.now()}`;
+      
+      setActiveConversations(prev => {
+        const next = new Map(prev);
+        next.set(tempId, {
+          conversationId: tempId,
+          stableKey: tempId,
+          agentId: targetAgent,
+          history: {},
+          isLoading: false,
+          title: 'New conversation',
+          conversationInitialPrompt: prompt,
+        });
+        return next;
+      });
+      
+      setCurrentConversationId(tempId);
+      if (onConversationChange) {
+        onConversationChange(tempId);
+      }
+    }
+  }), [currentAgentId, onConversationChange]);
+
   // Context change notification state
   const [showContextNotification, setShowContextNotification] = useState(false);
   const prevContextRef = useRef<string | null>(null);
@@ -1138,15 +1195,24 @@ console.log("apiKey", apiKey);
     // Filter by search query
     if (searchQuery) {
       const query = searchQuery.toLowerCase();
-      filtered = filtered.filter(conv => 
-        conv.title?.toLowerCase().includes(query) ||
-        conv.summary?.toLowerCase().includes(query)
-      );
+      filtered = filtered.filter(conv => {
+        // Check title from API
+        if (conv.title?.toLowerCase().includes(query)) return true;
+        
+        // Check summary from API
+        if (conv.summary?.toLowerCase().includes(query)) return true;
+        
+        // Check the first prompt (what's actually displayed in the UI)
+        const firstPrompt = conversationFirstPrompts[conv.conversationId];
+        if (firstPrompt?.toLowerCase().includes(query)) return true;
+        
+        return false;
+      });
     }
     
     // Group all conversations, show all groups even if empty
     return groupConversationsByTime(filtered, true);
-  }, [apiConversations, searchQuery]);
+  }, [apiConversations, searchQuery, conversationFirstPrompts]);
 
   // Build effective customer object with required customerId
   const effectiveCustomer = useMemo(() => {
@@ -1578,10 +1644,11 @@ console.log("apiKey", apiKey);
     }
   }, [onConversationChange]);
 
-  // Toggle collapse
+  // Toggle collapse - only if collapsible is enabled
   const toggleCollapse = useCallback(() => {
+    if (!collapsible) return;
     setIsCollapsed((prev) => !prev);
-  }, []);
+  }, [collapsible]);
 
   // Toggle history collapse
   const toggleHistoryCollapse = useCallback(() => {
@@ -1602,8 +1669,8 @@ console.log("apiKey", apiKey);
     !showConversationHistory ? 'ai-agent-panel--no-history' : '',
   ].filter(Boolean).join(' ');
 
-  // Collapsed view
-  if (isCollapsed) {
+  // Collapsed view - only render if collapsible is enabled
+  if (collapsible && isCollapsed) {
     return (
       <div className={panelClasses} ref={panelRef}>
         <div 
@@ -1878,9 +1945,11 @@ console.log("apiKey", apiKey);
                   <SidebarIcon />
                 </Button>
               </Tooltip>
-              <Button variant="ghost" size="icon" onClick={toggleCollapse}>
-                {position === 'right' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
-              </Button>
+              {collapsible && (
+                <Button variant="ghost" size="icon" onClick={toggleCollapse}>
+                  {position === 'right' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+                </Button>
+              )}
             </div>
 
             {/* Conversation list */}
@@ -1996,6 +2065,18 @@ console.log("apiKey", apiKey);
 
       {/* Chat area */}
       <div className="ai-agent-panel__chat">
+        {/* Collapse button when no sidebar is shown */}
+        {!showConversationHistory && collapsible && (
+          <div className="ai-agent-panel__chat-header">
+            <div className="ai-agent-panel__chat-header-spacer" />
+            <Tooltip content="Collapse Panel" side={position === 'right' ? 'left' : 'right'}>
+              <Button variant="ghost" size="icon" onClick={toggleCollapse}>
+                {position === 'right' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+              </Button>
+            </Tooltip>
+          </div>
+        )}
+
         {/* Context change notification */}
         {showContextNotification && (
           <div className="ai-agent-panel__context-notification">
@@ -2022,6 +2103,9 @@ console.log("apiKey", apiKey);
             effectiveCustomer={effectiveCustomer}
             showPoweredBy={showPoweredBy}
             actions={actions}
+            initialPrompt={initialPrompt}
+            initialMessage={initialMessage}
+            hideInitialPrompt={hideInitialPrompt}
             followOnQuestions={followOnQuestions}
             followOnPrompt={followOnPrompt}
             agentOptions={agentOptions}
@@ -2033,6 +2117,7 @@ console.log("apiKey", apiKey);
             maxContextTokens={maxContextTokens}
             enableContextDetailView={enableContextDetailView}
             onConversationCreated={handleConversationCreated}
+            conversationInitialPrompt={activeConv.conversationInitialPrompt}
           />
         ))}
         
@@ -2090,7 +2175,9 @@ console.log("apiKey", apiKey);
       </Dialog>
     </div>
   );
-};
+});
+
+AIAgentPanel.displayName = 'AIAgentPanel';
 
 export default AIAgentPanel;
 

package/src/AIChatPanel.tsx

@@ -703,6 +703,8 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   const hasNotifiedCompletionRef = useRef<boolean>(true);
   // Store the latest processed history for callbacks (doesn't trigger re-renders)
   const latestHistoryRef = useRef<Record<string, HistoryEntry>>(initialHistory);
+  // Track if we've sent the initial prompt (prevents loops)
+  const initialPromptSentRef = useRef<boolean>(false);
 
   // Sync new entries from initialHistory into local history state
   // This allows parent components to inject messages (e.g., page-based agent suggestions)
@@ -1063,13 +1065,39 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     
     setIsLoading(true);
     
+    // === OPTIMISTIC UPDATE: Show prompt immediately in UI ===
+    // Generate unique key using ISO timestamp prefix + prompt
+    const timestamp = new Date().toISOString();
+    const promptKey = `${timestamp}:${promptToSend.trim()}`;
+    
+    // Add prompt to history IMMEDIATELY - this makes it appear in the UI right away
+    setHistory((prevHistory) => ({
+      ...prevHistory,
+      [promptKey]: { content: '', callId: '' },
+    }));
+    
+    // Store the key for later use
+    setLastPrompt(promptToSend.trim());
+    setLastKey(promptKey);
+    
+    // Scroll to bottom immediately to show the new prompt
+    // Use setTimeout to ensure the DOM has updated
+    setTimeout(() => {
+      scrollToBottom();
+    }, 0);
+    
+    // Now proceed with API calls in the background (conversation creation + LLM call)
     // Ensure conversation exists before sending (matches ChatPanel)
     console.log('AIChatPanel.continueChat - about to call ensureConversation');
     ensureConversation().then((convId) => {
       console.log('AIChatPanel.continueChat - ensureConversation resolved with:', convId);
       // Build messagesAndHistory from history (matches ChatPanel)
+      // IMPORTANT: Exclude the current prompt (promptKey) since it's new and we're sending it now
       const messagesAndHistory: { role: string; content: string }[] = [];
       Object.entries(history).forEach(([historyPrompt, historyEntry]) => {
+        // Skip the current prompt we just added optimistically
+        if (historyPrompt === promptKey) return;
+        
         // Strip timestamp prefix from prompt before using it (matches ChatPanel)
         let promptForHistory = historyPrompt;
         const isoTimestampRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z:/;
@@ -1085,19 +1113,10 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         messagesAndHistory.push({ role: 'assistant', content: historyEntry.content });
       });
       
-      // Generate unique key using ISO timestamp prefix + prompt (matches ChatPanel)
-      const timestamp = new Date().toISOString();
-      const promptKey = `${timestamp}:${promptToSend.trim()}`;
-      
-      // Set history entry before sending (matches ChatPanel)
-      setHistory((prevHistory) => ({
-        ...prevHistory,
-        [promptKey]: { content: '', callId: '' },
-      }));
-      
       // Build the full prompt - only apply template for first message (matches ChatPanel)
+      // Check if this is the first message by seeing if messagesAndHistory is empty
       let fullPromptToSend = promptToSend.trim();
-      if (Object.keys(history).length === 0 && promptTemplate) {
+      if (messagesAndHistory.length === 0 && promptTemplate) {
         fullPromptToSend = promptTemplate.replace('{{prompt}}', fullPromptToSend);
       }
       
@@ -1126,9 +1145,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         newController
       );
       
-      setLastPrompt(promptToSend.trim());
       setLastMessages(messagesAndHistory);
-      setLastKey(promptKey);
       
       // Notify parent of new conversation ID AFTER send() has started
       // This prevents the component from being remounted before send() runs
@@ -1138,12 +1155,6 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
           onConversationCreated(convId);
         }, 100);
       }
-      
-      // Scroll to bottom after adding the new prompt to show it immediately
-      // Use setTimeout to ensure the DOM has updated with the new history entry
-      setTimeout(() => {
-        scrollToBottom();
-      }, 0);
     });
   }, [
     idle,
@@ -1376,69 +1387,14 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     };
   }, []); // Empty deps - only run cleanup on unmount
 
-  // Auto-send initialPrompt when it changes (matches ChatPanel behavior)
-  // IMPORTANT: Skip if we have initialHistory - that means we're loading an existing conversation
+  // Auto-send initialPrompt exactly once when component mounts
+  // Simple behavior matching original ChatPanel - just send the prompt
   useEffect(() => {
-    // Don't auto-send initialPrompt if we loaded existing history
-    // This prevents unwanted LLM calls when switching to loaded conversations
-    const hasLoadedHistory = initialHistory && Object.keys(initialHistory).length > 0;
-    
-    // Don't proceed if project_id is not yet available
-    if (!project_id) {
-      return;
-    }
-    
-    if (initialPrompt && initialPrompt !== '' && initialPrompt !== lastPrompt && !hasLoadedHistory) {
-      setIsLoading(true);
-      setThinkingBlocks([]);
-      setCurrentThinkingIndex(0);
-      setUserHasScrolled(false); // Enable auto-scroll for new prompt
-      
-      // Ensure conversation exists before sending (matches ChatPanel)
-      ensureConversation().then((convId) => {
-        const controller = new AbortController();
-        setLastController(controller);
-        
-        // Generate timestamp-prefixed key (matches ChatPanel)
-        const timestamp = new Date().toISOString();
-        const promptKey = `${timestamp}:${initialPrompt}`;
-        
-        // Set history entry before sending (matches ChatPanel)
-        setHistory({ [promptKey]: { content: '', callId: '' } });
-        
-        // Build prompt with template
-        let fullPrompt = initialPrompt;
-        if (promptTemplate) {
-          fullPrompt = promptTemplate.replace('{{prompt}}', initialPrompt);
-        }
-        
-        send(
-          fullPrompt,
-          [],
-          [
-            ...dataWithExtras(),
-            { key: '--messages', data: '0' },
-          ],
-          true,
-          true,
-          service,
-          convId, // Use conversation ID from ensureConversation
-          controller
-        );
-        
-        setLastPrompt(initialPrompt);
-        setLastMessages([]);
-        setLastKey(promptKey);
-        
-        // Notify parent of new conversation ID AFTER send() has started
-        if (convId && onConversationCreated) {
-          setTimeout(() => {
-            onConversationCreated(convId);
-          }, 100);
-        }
-      });
+    if (initialPrompt && initialPrompt !== '' && !initialPromptSentRef.current) {
+      initialPromptSentRef.current = true;
+      continueChat(initialPrompt);
     }
-  }, [initialPrompt, initialHistory, ensureConversation, promptTemplate, send, dataWithExtras, service, lastPrompt, project_id, onConversationCreated]);
+  }, [initialPrompt, continueChat]);
 
   // ============================================================================
   // Render Helpers

package/src/components/ui/Button.tsx

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

package/src/components/ui/Dialog.tsx

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

package/src/components/ui/Input.tsx

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

package/src/components/ui/Select.tsx

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

package/src/components/ui/Tooltip.tsx

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

package/src/components/ui/index.ts

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