@hef2024/llmasaservice-ui 0.20.0 → 0.20.2

package/docs/CHANGELOG-ERROR-HANDLING.md

@@ -245,3 +245,4 @@ Closes: Issue about silent 413 failures
 For questions about this implementation, see:
 - `docs/ERROR-HANDLING-413.md` - Detailed technical documentation
 - GitHub Issues - Report bugs or request enhancements
+

package/docs/CONVERSATION-HISTORY.md

@@ -861,3 +861,4 @@ Minimal interface embedded in another application.
 ## Feedback
 
 If you have questions or suggestions about conversation history configuration, please open an issue on GitHub or contact support.
+

package/docs/ERROR-HANDLING-413.md

@@ -251,3 +251,4 @@ Potential improvements for future iterations:
 - Errors are detected by monitoring the `error` property from `useLLM` hook
 - The implementation is consistent across both modern (AIChatPanel) and legacy (ChatPanel) components
 - Error state is properly synchronized with loading state to prevent UI inconsistencies
+

package/docs/ERROR-HANDLING-SUMMARY.md

@@ -129,3 +129,4 @@ The implementation is straightforward:
 - That's it!
 
 No configuration needed, works automatically! 🎉
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hef2024/llmasaservice-ui",
-  "version": "0.20.0",
+  "version": "0.20.2",
   "description": "Prebuilt UI components for LLMAsAService.io",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -57,7 +57,7 @@
     "dotenv": "^16.4.7",
     "llmasaservice-client": "^0.10.4",
     "process": "^0.11.10",
-    "react-markdown": "^9.0.1",
+    "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.5.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",

package/src/AIAgentPanel.tsx

@@ -73,6 +73,9 @@ export interface AIAgentPanelProps {
   // Agent Configuration - can be string IDs or full config objects
   agents: (string | AgentConfig)[];
   defaultAgent?: string;
+  
+  // Controlled selection - when provided, external state drives which agent is active
+  selectedAgent?: string;
 
   // Customer ID - REQUIRED for conversation history
   customerId: string;
@@ -141,6 +144,23 @@ export interface AIAgentPanelProps {
 
   // Enable/disable conversation history panel
   showConversationHistory?: boolean;
+
+  // New props from ChatPanel port
+  cssUrl?: string;
+  markdownClass?: string;
+  width?: string;
+  height?: string;
+  scrollToEnd?: boolean;
+  prismStyle?: any;
+  showSaveButton?: boolean;
+  showEmailButton?: boolean;
+  messages?: { role: "user" | "assistant"; content: string }[];
+  showCallToAction?: boolean;
+  callToActionButtonText?: string;
+  callToActionEmailAddress?: string;
+  callToActionEmailSubject?: string;
+  customerEmailCaptureMode?: "HIDE" | "OPTIONAL" | "REQUIRED";
+  customerEmailCapturePlaceholder?: string;
 }
 
 // Icons
@@ -377,10 +397,28 @@ interface ChatPanelWrapperProps {
   totalContextTokens: number;
   maxContextTokens: number;
   enableContextDetailView: boolean;
+  disabledSectionIds: Set<string>;
+  onToggleSection: (sectionId: string, enabled: boolean) => void;
   // Conversation creation callback
   onConversationCreated: (tempId: string, realId: string) => void;
   // Per-conversation initial prompt
   conversationInitialPrompt?: string;
+  // New props from ChatPanel port
+  cssUrl?: string;
+  markdownClass?: string;
+  width?: string;
+  height?: string;
+  scrollToEnd?: boolean;
+  prismStyle?: any;
+  showSaveButton?: boolean;
+  showEmailButton?: boolean;
+  messages?: { role: "user" | "assistant"; content: string }[];
+  showCallToAction?: boolean;
+  callToActionButtonText?: string;
+  callToActionEmailAddress?: string;
+  callToActionEmailSubject?: string;
+  customerEmailCaptureMode?: "HIDE" | "OPTIONAL" | "REQUIRED";
+  customerEmailCapturePlaceholder?: string;
 }
 
 // Remove React.memo temporarily to debug - ChatPanelWrapper needs to re-render when agentId changes
@@ -412,13 +450,32 @@ const ChatPanelWrapper = (({
   totalContextTokens,
   maxContextTokens,
   enableContextDetailView,
+  disabledSectionIds,
+  onToggleSection,
   onConversationCreated,
   conversationInitialPrompt,
+  // New props from ChatPanel port
+  cssUrl,
+  markdownClass,
+  width,
+  height,
+  scrollToEnd,
+  prismStyle,
+  showSaveButton,
+  showEmailButton,
+  messages,
+  showCallToAction,
+  callToActionButtonText,
+  callToActionEmailAddress,
+  callToActionEmailSubject,
+  customerEmailCaptureMode,
+  customerEmailCapturePlaceholder,
 }) => {
   const convAgentProfile = getAgent(activeConv.agentId);
   const convAgentMetadata = convAgentProfile?.metadata;
   const isVisible = currentConversationId === activeConv.conversationId;
   
+  
   // Memoize callbacks to prevent recreating on every render
   const historyCallback = useCallback(
     (history: Record<string, { content: string; callId: string }>) => {
@@ -505,7 +562,7 @@ const ChatPanelWrapper = (({
         customer={effectiveCustomer}
         showPoweredBy={showPoweredBy}
         showNewConversationButton={false}
-        createConversationOnFirstChat={convAgentMetadata.createConversationOnFirstChat ?? true}
+        createConversationOnFirstChat={convAgentProfile?.createConversationOnFirstChat ?? true}
         mcpServers={mcpServers}
         actions={actions}
         followOnQuestions={effectiveFollowOnQuestions}
@@ -520,7 +577,24 @@ const ChatPanelWrapper = (({
         totalContextTokens={totalContextTokens}
         maxContextTokens={maxContextTokens}
         enableContextDetailView={enableContextDetailView}
+        disabledSectionIds={disabledSectionIds}
+        onToggleSection={onToggleSection}
         onConversationCreated={conversationCreatedCallback}
+        cssUrl={cssUrl}
+        markdownClass={markdownClass}
+        width={width}
+        height={height}
+        scrollToEnd={scrollToEnd ?? convAgentMetadata.displayAutoScroll}
+        prismStyle={prismStyle}
+        showSaveButton={showSaveButton ?? convAgentMetadata.displayShowSaveButton ?? true}
+        showEmailButton={showEmailButton ?? convAgentMetadata.displayShowEmailButton ?? true}
+        messages={messages}
+        showCallToAction={showCallToAction ?? convAgentMetadata.displayShowCallToAction ?? false}
+        callToActionButtonText={callToActionButtonText ?? convAgentMetadata.displayCallToActionButtonText ?? 'Submit'}
+        callToActionEmailAddress={callToActionEmailAddress ?? convAgentMetadata.displayCallToActionEmailAddress ?? ''}
+        callToActionEmailSubject={callToActionEmailSubject ?? convAgentMetadata.displayCallToActionEmailSubject ?? 'Agent CTA submitted'}
+        customerEmailCaptureMode={customerEmailCaptureMode ?? convAgentMetadata?.customerEmailCaptureMode ?? 'HIDE'}
+        customerEmailCapturePlaceholder={customerEmailCapturePlaceholder ?? convAgentMetadata?.customerEmailCapturePlaceholder ?? 'Please enter your email...'}
       />
     </div>
   );
@@ -531,6 +605,7 @@ ChatPanelWrapper.displayName = 'ChatPanelWrapper';
 const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   agents,
   defaultAgent,
+  selectedAgent,
   customerId,
   apiKey,
   context,
@@ -568,6 +643,22 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   followOnPrompt = '',
   historyListLimit = 50,
   showConversationHistory = true,
+  // New props from ChatPanel port
+  cssUrl,
+  markdownClass,
+  width,
+  height,
+  scrollToEnd,
+  prismStyle,
+  showSaveButton,
+  showEmailButton,
+  messages,
+  showCallToAction,
+  callToActionButtonText,
+  callToActionEmailAddress,
+  callToActionEmailSubject,
+  customerEmailCaptureMode,
+  customerEmailCapturePlaceholder,
 }, ref) => {
   // Panel state - only start collapsed if collapsible is true
   const [isCollapsed, setIsCollapsed] = useState(collapsible && defaultCollapsed);
@@ -625,6 +716,36 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
     defaultAgent || agentIds[0] || ''
   );
 
+  // Sync with controlled selectedAgent prop when it changes
+  useEffect(() => {
+    // Only sync if selectedAgent is provided (controlled mode) and differs from current
+    if (selectedAgent && selectedAgent !== currentAgentId) {
+      const oldAgentId = currentAgentId;
+      setCurrentAgentId(selectedAgent);
+      
+      // Fire onAgentSwitch callback for programmatic changes too
+      if (onAgentSwitch) {
+        onAgentSwitch(oldAgentId, selectedAgent);
+      }
+      
+      // Update the current conversation's agent ID to match
+      if (currentConversationIdRef.current) {
+        setActiveConversations(prev => {
+          const existing = prev.get(currentConversationIdRef.current!);
+          if (existing) {
+            const next = new Map(prev);
+            next.set(currentConversationIdRef.current!, {
+              ...existing,
+              agentId: selectedAgent,
+            });
+            return next;
+          }
+          return prev;
+        });
+      }
+    }
+  }, [selectedAgent]); // Note: intentionally excluding currentAgentId and onAgentSwitch to only trigger on prop change
+
   // API-based conversation state
   const [apiConversations, setApiConversations] = useState<APIConversationSummary[]>([]);
   const [conversationsLoading, setConversationsLoading] = useState(false);
@@ -651,6 +772,9 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
     'Older': false,
   });
 
+  // Context section toggle state (per-conversation disabled sections)
+  const [disabledContextSections, setDisabledContextSections] = useState<Map<string, Set<string>>>(new Map());
+
   // Agent registry hook
   const {
     agents: agentProfiles,
@@ -864,14 +988,9 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
 
     setConversationsLoading(true);
     setConversationsError(null);
-console.log("projectId", projectId);
-console.log("customerId", customerId);
-console.log("apiKey", apiKey);
 
     try {
-      console.log('fetchConversations - customerId:', customerId);
       const url = `https://api.llmasaservice.io/conversations?customer_id=${customerId}`;
-      console.log('fetchConversations - URL:', url);
       
       const response = await fetch(url, {
         signal,
@@ -1428,9 +1547,30 @@ console.log("apiKey", apiKey);
     }
   }, [pageContextSections, currentAgentId, agentIds, getAgent, localOverrides]);
 
+  // Get disabled sections for current conversation
+  const currentDisabledSections = useMemo((): Set<string> => {
+    return currentConversationId 
+      ? disabledContextSections.get(currentConversationId) || new Set<string>()
+      : new Set<string>();
+  }, [currentConversationId, disabledContextSections]);
+
+  // Filtered context (only enabled sections)
+  const filteredContext = useMemo(() => {
+    const enabledSections = mergedContext.sections.filter(
+      section => !currentDisabledSections.has(section.id)
+    );
+    const totalTokens = enabledSections.reduce((sum, s) => sum + (s.tokens || 0), 0);
+    
+    return {
+      sections: enabledSections,
+      totalTokens,
+    };
+  }, [mergedContext.sections, currentDisabledSections]);
+
   // Build data array for ChatPanel
   const chatPanelData = useMemo(() => {
-    const contextData = mergedContext.sections.map((section) => ({
+    // Use filtered sections (disabled sections are excluded)
+    const contextData = filteredContext.sections.map((section) => ({
       key: section.id,
       data: JSON.stringify(section.data),
     }));
@@ -1447,7 +1587,7 @@ console.log("apiKey", apiKey);
     }
 
     return [...data, ...contextData];
-  }, [data, mergedContext.sections, buildAgentAwarenessInstructions, currentAgentId, enableAgentSuggestions]);
+  }, [data, filteredContext.sections, buildAgentAwarenessInstructions, currentAgentId, enableAgentSuggestions]);
 
   // Handle agent switch - updates the agent for the current conversation without starting a new one
   const handleAgentSwitch = useCallback(
@@ -1616,6 +1756,26 @@ console.log("apiKey", apiKey);
     setHandoffSource('agent');
   }, []);
 
+  // Handle context section toggle for current conversation
+  const handleContextSectionToggle = useCallback((sectionId: string, enabled: boolean) => {
+    if (!currentConversationId) return;
+    
+    setDisabledContextSections(prev => {
+      const next = new Map(prev);
+      const conversationDisabled = next.get(currentConversationId) || new Set();
+      const nextDisabled = new Set(conversationDisabled);
+      
+      if (enabled) {
+        nextDisabled.delete(sectionId);
+      } else {
+        nextDisabled.add(sectionId);
+      }
+      
+      next.set(currentConversationId, nextDisabled);
+      return next;
+    });
+  }, [currentConversationId]);
+
   // Handle conversation created - update temp ID to real ID from API
   const handleConversationCreated = useCallback((tempId: string, realId: string) => {
     console.log('Conversation created:', tempId, '->', realId);
@@ -2113,11 +2273,28 @@ console.log("apiKey", apiKey);
             handleAgentSwitch={handleAgentSwitch}
             agentsLoading={agentsLoading}
             contextSections={mergedContext.sections}
-            totalContextTokens={mergedContext.totalTokens || 0}
+            totalContextTokens={filteredContext.totalTokens}
             maxContextTokens={maxContextTokens}
             enableContextDetailView={enableContextDetailView}
+            disabledSectionIds={currentDisabledSections}
+            onToggleSection={handleContextSectionToggle}
             onConversationCreated={handleConversationCreated}
             conversationInitialPrompt={activeConv.conversationInitialPrompt}
+            cssUrl={cssUrl}
+            markdownClass={markdownClass}
+            width={width}
+            height={height}
+            scrollToEnd={scrollToEnd}
+            prismStyle={prismStyle}
+            showSaveButton={showSaveButton}
+            showEmailButton={showEmailButton}
+            messages={messages}
+            showCallToAction={showCallToAction}
+            callToActionButtonText={callToActionButtonText}
+            callToActionEmailAddress={callToActionEmailAddress}
+            callToActionEmailSubject={callToActionEmailSubject}
+            customerEmailCaptureMode={customerEmailCaptureMode}
+            customerEmailCapturePlaceholder={customerEmailCapturePlaceholder}
           />
         ))}