@hef2024/llmasaservice-ui 0.16.8 → 0.16.9

package/src/AIChatPanel.tsx

@@ -86,6 +86,9 @@ export interface AIChatPanelProps {
   totalContextTokens?: number;
   maxContextTokens?: number;
   enableContextDetailView?: boolean;
+
+  // Callback when a new conversation is created via API
+  onConversationCreated?: (conversationId: string) => void;
 }
 
 /**
@@ -658,7 +661,14 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   totalContextTokens = 0,
   maxContextTokens = 8000,
   enableContextDetailView = false,
+  onConversationCreated,
 }) => {
+  // ============================================================================
+  // API URL
+  // ============================================================================
+  // Public API URL for dev and production (matches ChatPanel)
+  const publicAPIUrl = 'https://api.llmasaservice.io';
+
   // ============================================================================
   // State
   // ============================================================================
@@ -694,6 +704,33 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   // Store the latest processed history for callbacks (doesn't trigger re-renders)
   const latestHistoryRef = useRef<Record<string, HistoryEntry>>(initialHistory);
 
+  // Sync new entries from initialHistory into local history state
+  // This allows parent components to inject messages (e.g., page-based agent suggestions)
+  useEffect(() => {
+    if (!initialHistory) return;
+    
+    // Use functional update to access current history without adding it to deps
+    setHistory(prev => {
+      const currentKeys = Object.keys(prev);
+      const newEntries: Record<string, HistoryEntry> = {};
+      let hasNewEntries = false;
+      
+      for (const [key, value] of Object.entries(initialHistory)) {
+        if (!currentKeys.includes(key)) {
+          newEntries[key] = value as HistoryEntry;
+          hasNewEntries = true;
+        }
+      }
+      
+      // Merge new entries if any were found
+      if (hasNewEntries) {
+        return { ...prev, ...newEntries };
+      }
+      
+      return prev; // No changes
+    });
+  }, [initialHistory]);
+
   // ============================================================================
   // useLLM Hook
   // ============================================================================
@@ -754,6 +791,74 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     };
   }, []);
 
+  // Ensure a conversation exists before sending the first message
+  // This creates a conversation on the server and returns the conversation ID
+  const ensureConversation = useCallback(() => {
+    console.log('ensureConversation - called with:', {
+      currentConversation,
+      createConversationOnFirstChat,
+      project_id,
+      publicAPIUrl,
+    });
+    if (
+      (!currentConversation || currentConversation === '') &&
+      createConversationOnFirstChat
+    ) {
+      // Guard: Don't create conversation without a project_id
+      if (!project_id) {
+        console.error('ensureConversation - Cannot create conversation without project_id');
+        return Promise.resolve('');
+      }
+      
+      const requestBody = {
+        project_id: project_id,
+        agentId: agent,
+        customerId: customer?.customer_id ?? null,
+        customerEmail: customer?.customer_user_email ?? null,
+        timezone: browserInfo?.userTimezone,
+        language: browserInfo?.userLanguage,
+      };
+      console.log('ensureConversation - Creating conversation with:', requestBody);
+      console.log('ensureConversation - API URL:', `${publicAPIUrl}/conversations`);
+      
+      return fetch(`${publicAPIUrl}/conversations`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(requestBody),
+      })
+        .then(async (res) => {
+          if (!res.ok) {
+            const errorText = await res.text();
+            throw new Error(
+              `HTTP error! status: ${res.status}, message: ${errorText}`
+            );
+          }
+          return res.json();
+        })
+        .then((newConvo) => {
+          console.log('ensureConversation - API response:', newConvo);
+          if (newConvo?.id) {
+            console.log('ensureConversation - New conversation ID:', newConvo.id);
+            setCurrentConversation(newConvo.id);
+            // NOTE: Don't call onConversationCreated here - it causes a re-render
+            // before send() is called. The caller should notify after send() starts.
+            return newConvo.id;
+          }
+          console.warn('ensureConversation - No ID in response');
+          return '';
+        })
+        .catch((error) => {
+          console.error('Error creating new conversation', error);
+          return '';
+        });
+    }
+    // If a currentConversation exists, return it in a resolved Promise.
+    console.log('ensureConversation - using existing conversation:', currentConversation);
+    return Promise.resolve(currentConversation);
+  }, [currentConversation, createConversationOnFirstChat, publicAPIUrl, project_id, agent, customer, browserInfo]);
+
   // Data with extras (matches ChatPanel's dataWithExtras)
   const dataWithExtras = useCallback(() => {
     return [
@@ -927,6 +1032,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   // Continue chat (send message) - matches ChatPanel behavior exactly
   // promptText is now required - comes from the isolated ChatInput component
   const continueChat = useCallback((promptText: string) => {
+    console.log('AIChatPanel.continueChat called with:', promptText);
     // Clear thinking blocks for new response
     setThinkingBlocks([]);
     setCurrentThinkingIndex(0);
@@ -957,73 +1063,88 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     
     setIsLoading(true);
     
-    // Build messagesAndHistory from history (matches ChatPanel)
-    const messagesAndHistory: { role: string; content: string }[] = [];
-    Object.entries(history).forEach(([historyPrompt, historyEntry]) => {
-      // 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:/;
-      if (isoTimestampRegex.test(historyPrompt)) {
-        const colonIndex = historyPrompt.indexOf(':', 19);
-        promptForHistory = historyPrompt.substring(colonIndex + 1);
-      } else if (/^\d+:/.test(historyPrompt)) {
-        const colonIndex = historyPrompt.indexOf(':');
-        promptForHistory = historyPrompt.substring(colonIndex + 1);
+    // 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)
+      const messagesAndHistory: { role: string; content: string }[] = [];
+      Object.entries(history).forEach(([historyPrompt, historyEntry]) => {
+        // 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:/;
+        if (isoTimestampRegex.test(historyPrompt)) {
+          const colonIndex = historyPrompt.indexOf(':', 19);
+          promptForHistory = historyPrompt.substring(colonIndex + 1);
+        } else if (/^\d+:/.test(historyPrompt)) {
+          const colonIndex = historyPrompt.indexOf(':');
+          promptForHistory = historyPrompt.substring(colonIndex + 1);
+        }
+        
+        messagesAndHistory.push({ role: 'user', content: promptForHistory });
+        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)
+      let fullPromptToSend = promptToSend.trim();
+      if (Object.keys(history).length === 0 && promptTemplate) {
+        fullPromptToSend = promptTemplate.replace('{{prompt}}', fullPromptToSend);
+      }
+      
+      // Add follow-on prompt
+      if (followOnPrompt) {
+        fullPromptToSend += `\n\n${followOnPrompt}`;
       }
       
-      messagesAndHistory.push({ role: 'user', content: promptForHistory });
-      messagesAndHistory.push({ role: 'assistant', content: historyEntry.content });
+      const newController = new AbortController();
+      setLastController(newController);
+      
+      // Pass data array to send() for template replacement (e.g., {{Context}})
+      // Pass service (group_id) and customer data just like ChatPanel does
+      // Use convId from ensureConversation (matches ChatPanel)
+      send(
+        fullPromptToSend,
+        messagesAndHistory,
+        [
+          ...dataWithExtras(),
+          { key: '--messages', data: messagesAndHistory.length.toString() },
+        ],
+        true, // stream
+        true, // includeHistory
+        service, // group_id from agent config
+        convId, // Use the conversation ID from ensureConversation
+        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
+      if (convId && onConversationCreated) {
+        // Use setTimeout to ensure send() has fully started before triggering re-render
+        setTimeout(() => {
+          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);
     });
-    
-    // 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)
-    let fullPromptToSend = promptToSend.trim();
-    if (Object.keys(history).length === 0 && promptTemplate) {
-      fullPromptToSend = promptTemplate.replace('{{prompt}}', fullPromptToSend);
-    }
-    
-    // Add follow-on prompt
-    if (followOnPrompt) {
-      fullPromptToSend += `\n\n${followOnPrompt}`;
-    }
-    
-    const newController = new AbortController();
-    setLastController(newController);
-    
-    // Pass data array to send() for template replacement (e.g., {{Context}})
-    // Pass service (group_id) and customer data just like ChatPanel does
-    send(
-      fullPromptToSend,
-      messagesAndHistory,
-      [
-        ...dataWithExtras(),
-        { key: '--messages', data: messagesAndHistory.length.toString() },
-      ],
-      true, // stream
-      true, // includeHistory
-      service, // group_id from agent config
-      currentConversation,
-      newController
-    );
-    
-    setLastPrompt(promptToSend.trim());
-    setLastMessages(messagesAndHistory);
-    setLastKey(promptKey);
-    
-    // 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,
     stop,
@@ -1038,9 +1159,10 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     followOnPrompt,
     send,
     service,
-    currentConversation,
+    ensureConversation,
     dataWithExtras,
     scrollToBottom,
+    onConversationCreated,
   ]);
 
   // Handle suggestion click - directly sends like ChatPanel does
@@ -1095,27 +1217,29 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
 
   // Effect 1: Process response for DISPLAY ONLY (no callbacks here)
   // Updates state for rendering, stores in ref for later callback use
+  // NOTE: We store RAW content (without action processing) in history state.
+  // Actions are applied at RENDER time so that switching agents with different
+  // actions will re-process the history correctly.
   useEffect(() => {
     if (!response || !lastKey || justReset) return;
     
     const { cleanedText, blocks } = processThinkingTags(response);
-    const processedContent = processActions(cleanedText);
     
     // Update display state
     setThinkingBlocks(blocks);
     
-    // Update history state for display AND store in ref for callbacks
+    // Update history state with RAW content (actions applied at render time)
     setHistory((prev) => {
       const newHistory = { ...prev };
       newHistory[lastKey] = {
-        content: processedContent,
+        content: cleanedText, // Store raw content, not processed
         callId: lastCallId || '',
       };
       // Keep ref in sync for callbacks (this doesn't trigger re-renders)
       latestHistoryRef.current = newHistory;
       return newHistory;
     });
-  }, [response, lastKey, lastCallId, processThinkingTags, processActions, justReset]);
+  }, [response, lastKey, lastCallId, processThinkingTags, justReset]);
 
   // Effect 2: Handle response completion - SINGLE POINT for all completion logic
   // Triggers ONLY when idle transitions from false → true
@@ -1259,47 +1383,62 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     // 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
       
-      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,
-        currentConversation,
-        controller
-      );
-      
-      setLastPrompt(initialPrompt);
-      setLastMessages([]);
-      setLastKey(promptKey);
+      // 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);
+        }
+      });
     }
-  }, [initialPrompt, initialHistory]);
+  }, [initialPrompt, initialHistory, ensureConversation, promptTemplate, send, dataWithExtras, service, lastPrompt, project_id, onConversationCreated]);
 
   // ============================================================================
   // Render Helpers
@@ -1536,12 +1675,17 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         {/* History */}
         {Object.entries(history).map(([prompt, entry], index) => {
           const isLastEntry = index === Object.keys(history).length - 1;
+          // Check if this is a system message (injected by page context, etc.)
+          const isSystemMessage = prompt.startsWith('__system__:');
+          // Process thinking tags first, then apply actions at render time
+          // This ensures actions are always applied with current props (e.g., after agent switch)
           const { cleanedText } = processThinkingTags(entry.content);
+          const processedContent = processActions(cleanedText);
           
           return (
             <div key={index} className="ai-chat-entry">
-              {/* User Message */}
-              {!(hideInitialPrompt && index === 0) && (
+              {/* User Message - hidden for initial prompt or system messages */}
+              {!(hideInitialPrompt && index === 0) && !isSystemMessage && (
                 <div className="ai-chat-message ai-chat-message--user">
                   <div className="ai-chat-message__content">
                     {formatPromptForDisplay(prompt)}
@@ -1557,13 +1701,13 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
                     <div className="ai-chat-streaming">
                       {thinkingBlocks.length > 0 && renderThinkingBlocks()}
                       
-                      {cleanedText ? (
+                      {processedContent ? (
                         <ReactMarkdown
                           remarkPlugins={[remarkGfm]}
                           rehypePlugins={[rehypeRaw]}
                           components={markdownComponents}
                         >
-                          {cleanedText}
+                          {processedContent}
                         </ReactMarkdown>
                       ) : (
                         <div className="ai-chat-loading">
@@ -1584,7 +1728,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
                         rehypePlugins={[rehypeRaw]}
                         components={markdownComponents}
                       >
-                        {cleanedText}
+                        {processedContent}
                       </ReactMarkdown>
                     </>
                   )}

package/src/AgentPanel.tsx

@@ -159,9 +159,7 @@ const AgentPanel: React.FC<AgentPanelProps & ExtraProps> = ({
   useEffect(() => {
     const fetchAgentData = async () => {
       try {
-        const fetchUrl = url.endsWith("dev")
-          ? `https://8ftw8droff.execute-api.us-east-1.amazonaws.com/dev/agents/${agent}`
-          : `https://api.llmasaservice.io/agents/${agent}`;
+        const fetchUrl = `https://api.llmasaservice.io/agents/${agent}`;
 
         const response = await fetch(fetchUrl, {
           method: "GET",

package/src/ChatPanel.tsx

@@ -597,13 +597,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   };
 
   // public api url for dev and production
-  let publicAPIUrl = "https://api.llmasaservice.io";
-  if (
-    window.location.hostname === "localhost" ||
-    window.location.hostname === "dev.llmasaservice.io"
-  ) {
-    publicAPIUrl = "https://8ftw8droff.execute-api.us-east-1.amazonaws.com/dev";
-  }
+  const publicAPIUrl = "https://api.llmasaservice.io";
 
   const [toolList, setToolList] = useState<any[]>([]);
   const [toolsLoading, setToolsLoading] = useState(false);

package/src/components/ui/Button.tsx

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

package/src/components/ui/Dialog.tsx

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

package/src/components/ui/Input.tsx

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

package/src/components/ui/Select.tsx

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

package/src/components/ui/Tooltip.tsx

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

package/src/components/ui/index.ts

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

package/src/hooks/useAgentRegistry.ts

@@ -69,10 +69,7 @@ interface UseAgentRegistryOptions {
 }
 
 const resolveApiEndpoint = (baseUrl: string, agentId: string): string => {
-  const apiRoot = baseUrl.endsWith('dev')
-    ? 'https://8ftw8droff.execute-api.us-east-1.amazonaws.com/dev'
-    : 'https://api.llmasaservice.io';
-  return `${apiRoot}/agents/${agentId}`;
+  return `https://api.llmasaservice.io/agents/${agentId}`;
 };
 
 /**