@hef2024/llmasaservice-ui 0.20.1 → 0.20.3

package/dist/index.css

@@ -3371,6 +3371,72 @@ button[data-pending=true]::after {
   font-family: "SF Mono", monospace;
   font-size: 10px;
 }
+.ai-chat-context-popover__detail-section-title-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+.ai-chat-context-popover__detail-section--disabled {
+  opacity: 0.6;
+}
+.ai-chat-context-popover__detail-section--disabled .ai-chat-context-popover__detail-section-title {
+  text-decoration: line-through;
+  opacity: 0.7;
+}
+.ai-chat-context-toggle {
+  position: relative;
+  display: inline-flex;
+  width: 36px;
+  height: 20px;
+  cursor: pointer;
+  user-select: none;
+  flex-shrink: 0;
+}
+.ai-chat-context-toggle__input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+.ai-chat-context-toggle__slider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #cbd5e1;
+  transition: background-color 0.2s ease;
+  border-radius: 20px;
+}
+.ai-chat-context-toggle__slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  transition: transform 0.2s ease;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+.ai-chat-context-toggle__input:checked + .ai-chat-context-toggle__slider {
+  background-color: #3b82f6;
+}
+.ai-chat-context-toggle__input:checked + .ai-chat-context-toggle__slider:before {
+  transform: translateX(16px);
+}
+.ai-chat-context-toggle:hover .ai-chat-context-toggle__slider {
+  opacity: 0.9;
+}
+.dark-theme .ai-chat-context-toggle__slider {
+  background-color: #4b5563;
+}
+.dark-theme .ai-chat-context-toggle__input:checked + .ai-chat-context-toggle__slider {
+  background-color: #60a5fa;
+}
 .ai-chat-context-popover__detail-content {
   margin: 0;
   padding: 12px 14px;

package/dist/index.d.mts

@@ -182,6 +182,7 @@ interface AIAgentPanelHandle {
 interface AIAgentPanelProps {
     agents: (string | AgentConfig)[];
     defaultAgent?: string;
+    selectedAgent?: string;
     customerId: string;
     apiKey?: string;
     context?: AgentContext | null;
@@ -325,6 +326,8 @@ interface AIChatPanelProps {
     totalContextTokens?: number;
     maxContextTokens?: number;
     enableContextDetailView?: boolean;
+    disabledSectionIds?: Set<string>;
+    onToggleSection?: (sectionId: string, enabled: boolean) => void;
     onConversationCreated?: (conversationId: string) => void;
     cssUrl?: string;
     markdownClass?: string;

package/dist/index.d.ts

@@ -182,6 +182,7 @@ interface AIAgentPanelHandle {
 interface AIAgentPanelProps {
     agents: (string | AgentConfig)[];
     defaultAgent?: string;
+    selectedAgent?: string;
     customerId: string;
     apiKey?: string;
     context?: AgentContext | null;
@@ -325,6 +326,8 @@ interface AIChatPanelProps {
     totalContextTokens?: number;
     maxContextTokens?: number;
     enableContextDetailView?: boolean;
+    disabledSectionIds?: Set<string>;
+    onToggleSection?: (sectionId: string, enabled: boolean) => void;
     onConversationCreated?: (conversationId: string) => void;
     cssUrl?: string;
     markdownClass?: string;

package/dist/index.js

@@ -3500,12 +3500,15 @@ var ChatInput = import_react12.default.memo(({
   contextSections = [],
   totalContextTokens = 0,
   maxContextTokens = 8e3,
-  enableContextDetailView = false
+  enableContextDetailView = false,
+  disabledSectionIds = /* @__PURE__ */ new Set(),
+  onToggleSection
 }) => {
   const [inputValue, setInputValue] = (0, import_react12.useState)("");
   const [dropdownOpen, setDropdownOpen] = (0, import_react12.useState)(false);
   const [contextViewerOpen, setContextViewerOpen] = (0, import_react12.useState)(false);
   const [contextViewMode, setContextViewMode] = (0, import_react12.useState)("summary");
+  const [expandedSectionId, setExpandedSectionId] = (0, import_react12.useState)(null);
   const textareaRef = (0, import_react12.useRef)(null);
   const containerRef = (0, import_react12.useRef)(null);
   const contextPopoverRef = (0, import_react12.useRef)(null);
@@ -3542,6 +3545,7 @@ var ChatInput = import_react12.default.memo(({
       if (contextPopoverRef.current && !contextPopoverRef.current.contains(event.target)) {
         setContextViewerOpen(false);
         setContextViewMode("summary");
+        setExpandedSectionId(null);
       }
     };
     if (contextViewerOpen) {
@@ -3623,6 +3627,9 @@ var ChatInput = import_react12.default.memo(({
           setContextViewerOpen(!contextViewerOpen);
           if (!contextViewerOpen) {
             setContextViewMode("summary");
+            setExpandedSectionId(null);
+          } else {
+            setExpandedSectionId(null);
           }
         },
         type: "button",
@@ -3640,7 +3647,10 @@ var ChatInput = import_react12.default.memo(({
         "button",
         {
           className: "ai-chat-context-popover__close",
-          onClick: () => setContextViewerOpen(false),
+          onClick: () => {
+            setContextViewerOpen(false);
+            setExpandedSectionId(null);
+          },
           type: "button"
         },
         "\xD7"
@@ -3657,6 +3667,7 @@ var ChatInput = import_react12.default.memo(({
           className: `ai-chat-context-popover__section-item ${enableContextDetailView ? "ai-chat-context-popover__section-item--clickable" : ""}`,
           onClick: () => {
             if (enableContextDetailView) {
+              setExpandedSectionId(section.id);
               setContextViewMode("detail");
             }
           }
@@ -3668,7 +3679,10 @@ var ChatInput = import_react12.default.memo(({
         "button",
         {
           className: "ai-chat-context-popover__expand-btn",
-          onClick: () => setContextViewMode("detail"),
+          onClick: () => {
+            setExpandedSectionId(null);
+            setContextViewMode("detail");
+          },
           type: "button"
         },
         "View details \u2192"
@@ -3677,7 +3691,10 @@ var ChatInput = import_react12.default.memo(({
         "button",
         {
           className: "ai-chat-context-popover__back",
-          onClick: () => setContextViewMode("summary"),
+          onClick: () => {
+            setContextViewMode("summary");
+            setExpandedSectionId(null);
+          },
           type: "button"
         },
         "\u2190 Back"
@@ -3685,7 +3702,10 @@ var ChatInput = import_react12.default.memo(({
         "button",
         {
           className: "ai-chat-context-popover__close",
-          onClick: () => setContextViewerOpen(false),
+          onClick: () => {
+            setContextViewerOpen(false);
+            setExpandedSectionId(null);
+          },
           type: "button"
         },
         "\xD7"
@@ -3697,7 +3717,39 @@ var ChatInput = import_react12.default.memo(({
         }
       ))), /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-context-popover__detail-sections" }, contextSections.map((section) => {
         const format = detectFormat(section.data);
-        return /* @__PURE__ */ import_react12.default.createElement("details", { key: section.id, className: "ai-chat-context-popover__detail-section", open: true }, /* @__PURE__ */ import_react12.default.createElement("summary", { className: "ai-chat-context-popover__detail-section-header" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-popover__detail-section-title" }, section.title), /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-popover__detail-section-meta" }, /* @__PURE__ */ import_react12.default.createElement("code", null, `{{${section.id}}}`), /* @__PURE__ */ import_react12.default.createElement("span", null, "~", section.tokens || Math.ceil(JSON.stringify(section.data).length / 4)))), /* @__PURE__ */ import_react12.default.createElement("pre", { className: "ai-chat-context-popover__detail-content" }, /* @__PURE__ */ import_react12.default.createElement("code", null, formatContent(section.data, format))));
+        const isEnabled = !disabledSectionIds.has(section.id);
+        return /* @__PURE__ */ import_react12.default.createElement(
+          "details",
+          {
+            key: section.id,
+            className: `ai-chat-context-popover__detail-section ${!isEnabled ? "ai-chat-context-popover__detail-section--disabled" : ""}`,
+            open: expandedSectionId === section.id
+          },
+          /* @__PURE__ */ import_react12.default.createElement("summary", { className: "ai-chat-context-popover__detail-section-header" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-context-popover__detail-section-title-row" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-popover__detail-section-title" }, section.title), /* @__PURE__ */ import_react12.default.createElement(
+            "label",
+            {
+              className: "ai-chat-context-toggle",
+              onClick: (e) => e.stopPropagation(),
+              title: isEnabled ? "Disable this context section" : "Enable this context section"
+            },
+            /* @__PURE__ */ import_react12.default.createElement(
+              "input",
+              {
+                type: "checkbox",
+                checked: isEnabled,
+                onChange: (e) => {
+                  e.stopPropagation();
+                  if (onToggleSection) {
+                    onToggleSection(section.id, !isEnabled);
+                  }
+                },
+                className: "ai-chat-context-toggle__input"
+              }
+            ),
+            /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-toggle__slider" })
+          )), /* @__PURE__ */ import_react12.default.createElement("span", { className: "ai-chat-context-popover__detail-section-meta" }, /* @__PURE__ */ import_react12.default.createElement("code", null, `{{${section.id}}}`), /* @__PURE__ */ import_react12.default.createElement("span", null, "~", section.tokens || Math.ceil(JSON.stringify(section.data).length / 4)))),
+          /* @__PURE__ */ import_react12.default.createElement("pre", { className: "ai-chat-context-popover__detail-content" }, /* @__PURE__ */ import_react12.default.createElement("code", null, formatContent(section.data, format)))
+        );
       })))
     )), /* @__PURE__ */ import_react12.default.createElement(
       "button",
@@ -3773,6 +3825,8 @@ var AIChatPanel = ({
   totalContextTokens = 0,
   maxContextTokens = 8e3,
   enableContextDetailView = false,
+  disabledSectionIds: propDisabledSectionIds,
+  onToggleSection: propOnToggleSection,
   onConversationCreated,
   // UI Customization Props
   cssUrl,
@@ -3824,6 +3878,8 @@ var AIChatPanel = ({
   const [pendingToolRequests, setPendingToolRequests] = (0, import_react12.useState)([]);
   const [sessionApprovedTools, setSessionApprovedTools] = (0, import_react12.useState)([]);
   const [alwaysApprovedTools, setAlwaysApprovedTools] = (0, import_react12.useState)([]);
+  const [internalDisabledSectionIds, setInternalDisabledSectionIds] = (0, import_react12.useState)(/* @__PURE__ */ new Set());
+  const disabledSectionIds = propDisabledSectionIds != null ? propDisabledSectionIds : internalDisabledSectionIds;
   (0, import_react12.useEffect)(() => {
     setShowEmailPanel(customerEmailCaptureMode !== "HIDE");
     if (customerEmailCaptureMode === "REQUIRED") {
@@ -3901,6 +3957,21 @@ var AIChatPanel = ({
       userLanguage: navigator.language
     };
   }, []);
+  const handleToggleSection = (0, import_react12.useCallback)((sectionId, enabled) => {
+    if (propOnToggleSection) {
+      propOnToggleSection(sectionId, enabled);
+    } else {
+      setInternalDisabledSectionIds((prev) => {
+        const next = new Set(prev);
+        if (enabled) {
+          next.delete(sectionId);
+        } else {
+          next.add(sectionId);
+        }
+        return next;
+      });
+    }
+  }, [propOnToggleSection]);
   const ensureConversation = (0, import_react12.useCallback)(() => {
     var _a2, _b;
     console.log("ensureConversation - called with:", {
@@ -5041,7 +5112,9 @@ var AIChatPanel = ({
         contextSections,
         totalContextTokens,
         maxContextTokens,
-        enableContextDetailView
+        enableContextDetailView,
+        disabledSectionIds,
+        onToggleSection: handleToggleSection
       }
     ),
     showPoweredBy && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-panel__footer" }, mcpServers && mcpServers.length > 0 && /* @__PURE__ */ import_react12.default.createElement("div", { className: "ai-chat-tools-status" }, /* @__PURE__ */ import_react12.default.createElement(
@@ -5392,6 +5465,8 @@ var ChatPanelWrapper = ({
   totalContextTokens,
   maxContextTokens,
   enableContextDetailView,
+  disabledSectionIds,
+  onToggleSection,
   onConversationCreated,
   conversationInitialPrompt,
   // New props from ChatPanel port
@@ -5493,6 +5568,8 @@ var ChatPanelWrapper = ({
         totalContextTokens,
         maxContextTokens,
         enableContextDetailView,
+        disabledSectionIds,
+        onToggleSection,
         onConversationCreated: conversationCreatedCallback,
         cssUrl,
         markdownClass,
@@ -5517,6 +5594,7 @@ ChatPanelWrapper.displayName = "ChatPanelWrapper";
 var AIAgentPanel = import_react14.default.forwardRef(({
   agents,
   defaultAgent,
+  selectedAgent,
   customerId,
   apiKey,
   context,
@@ -5620,6 +5698,63 @@ var AIAgentPanel = import_react14.default.forwardRef(({
   const [currentAgentId, setCurrentAgentId] = (0, import_react14.useState)(
     defaultAgent || agentIds[0] || ""
   );
+  const [pendingFollowOnPrompt, setPendingFollowOnPrompt] = (0, import_react14.useState)(null);
+  const [agentSwitchSettled, setAgentSwitchSettled] = (0, import_react14.useState)(true);
+  const lastProcessedFollowOnRef = (0, import_react14.useRef)("");
+  (0, import_react14.useEffect)(() => {
+    if (selectedAgent && selectedAgent !== currentAgentId) {
+      const oldAgentId = currentAgentId;
+      setAgentSwitchSettled(false);
+      setCurrentAgentId(selectedAgent);
+      if (onAgentSwitch) {
+        onAgentSwitch(oldAgentId, selectedAgent);
+      }
+      if (currentConversationIdRef.current) {
+        setActiveConversations((prev) => {
+          const existing = prev.get(currentConversationIdRef.current);
+          if (existing) {
+            const next = new Map(prev);
+            next.set(currentConversationIdRef.current, __spreadProps(__spreadValues({}, existing), {
+              agentId: selectedAgent
+            }));
+            return next;
+          }
+          return prev;
+        });
+      }
+    }
+  }, [selectedAgent]);
+  (0, import_react14.useEffect)(() => {
+    if (!agentSwitchSettled && followOnPrompt && followOnPrompt !== "" && followOnPrompt !== lastProcessedFollowOnRef.current) {
+      setPendingFollowOnPrompt(followOnPrompt);
+      lastProcessedFollowOnRef.current = followOnPrompt;
+    }
+  }, [followOnPrompt, agentSwitchSettled]);
+  (0, import_react14.useEffect)(() => {
+    if (!agentSwitchSettled) {
+      const timer = setTimeout(() => {
+        setAgentSwitchSettled(true);
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [agentSwitchSettled]);
+  const effectiveFollowOnPrompt = (0, import_react14.useMemo)(() => {
+    if (!agentSwitchSettled) {
+      return "";
+    }
+    if (pendingFollowOnPrompt) {
+      return pendingFollowOnPrompt;
+    }
+    return followOnPrompt;
+  }, [followOnPrompt, pendingFollowOnPrompt, agentSwitchSettled]);
+  (0, import_react14.useEffect)(() => {
+    if (agentSwitchSettled && pendingFollowOnPrompt) {
+      const timer = setTimeout(() => {
+        setPendingFollowOnPrompt(null);
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [agentSwitchSettled, pendingFollowOnPrompt]);
   const [apiConversations, setApiConversations] = (0, import_react14.useState)([]);
   const [conversationsLoading, setConversationsLoading] = (0, import_react14.useState)(false);
   const [conversationsError, setConversationsError] = (0, import_react14.useState)(null);
@@ -5636,6 +5771,7 @@ var AIAgentPanel = import_react14.default.forwardRef(({
     "This Month": false,
     "Older": false
   });
+  const [disabledContextSections, setDisabledContextSections] = (0, import_react14.useState)(/* @__PURE__ */ new Map());
   const {
     agents: agentProfiles,
     isLoading: agentsLoading,
@@ -5779,13 +5915,8 @@ var AIAgentPanel = import_react14.default.forwardRef(({
     fetchInProgressRef.current = true;
     setConversationsLoading(true);
     setConversationsError(null);
-    console.log("projectId", projectId);
-    console.log("customerId", customerId);
-    console.log("apiKey", apiKey);
     try {
-      console.log("fetchConversations - customerId:", customerId);
       const url2 = `https://api.llmasaservice.io/conversations?customer_id=${customerId}`;
-      console.log("fetchConversations - URL:", url2);
       const response = yield fetch(url2, {
         signal,
         headers: {
@@ -6169,8 +6300,21 @@ var AIAgentPanel = import_react14.default.forwardRef(({
       });
     }
   }, [pageContextSections, currentAgentId, agentIds, getAgent, localOverrides]);
+  const currentDisabledSections = (0, import_react14.useMemo)(() => {
+    return currentConversationId ? disabledContextSections.get(currentConversationId) || /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set();
+  }, [currentConversationId, disabledContextSections]);
+  const filteredContext = (0, import_react14.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]);
   const chatPanelData = (0, import_react14.useMemo)(() => {
-    const contextData = mergedContext.sections.map((section) => ({
+    const contextData = filteredContext.sections.map((section) => ({
       key: section.id,
       data: JSON.stringify(section.data)
     }));
@@ -6184,7 +6328,7 @@ var AIAgentPanel = import_react14.default.forwardRef(({
       }
     }
     return [...data, ...contextData];
-  }, [data, mergedContext.sections, buildAgentAwarenessInstructions, currentAgentId, enableAgentSuggestions]);
+  }, [data, filteredContext.sections, buildAgentAwarenessInstructions, currentAgentId, enableAgentSuggestions]);
   const handleAgentSwitch = (0, import_react14.useCallback)(
     (newAgentId) => {
       const oldAgentId = currentAgentId;
@@ -6315,6 +6459,21 @@ var AIAgentPanel = import_react14.default.forwardRef(({
     setSuggestedAgent(null);
     setHandoffSource("agent");
   }, []);
+  const handleContextSectionToggle = (0, import_react14.useCallback)((sectionId, enabled) => {
+    if (!currentConversationId) return;
+    setDisabledContextSections((prev) => {
+      const next = new Map(prev);
+      const conversationDisabled = next.get(currentConversationId) || /* @__PURE__ */ new Set();
+      const nextDisabled = new Set(conversationDisabled);
+      if (enabled) {
+        nextDisabled.delete(sectionId);
+      } else {
+        nextDisabled.add(sectionId);
+      }
+      next.set(currentConversationId, nextDisabled);
+      return next;
+    });
+  }, [currentConversationId]);
   const handleConversationCreated = (0, import_react14.useCallback)((tempId, realId) => {
     console.log("Conversation created:", tempId, "->", realId);
     setActiveConversations((prev) => {
@@ -6642,15 +6801,17 @@ var AIAgentPanel = import_react14.default.forwardRef(({
         initialMessage,
         hideInitialPrompt,
         followOnQuestions,
-        followOnPrompt,
+        followOnPrompt: effectiveFollowOnPrompt,
         agentOptions,
         currentAgentId,
         handleAgentSwitch,
         agentsLoading,
         contextSections: mergedContext.sections,
-        totalContextTokens: mergedContext.totalTokens || 0,
+        totalContextTokens: filteredContext.totalTokens,
         maxContextTokens,
         enableContextDetailView,
+        disabledSectionIds: currentDisabledSections,
+        onToggleSection: handleContextSectionToggle,
         onConversationCreated: handleConversationCreated,
         conversationInitialPrompt: activeConv.conversationInitialPrompt,
         cssUrl,