@hef2024/llmasaservice-ui 0.20.1 → 0.20.2

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,28 @@ var AIAgentPanel = import_react14.default.forwardRef(({
   const [currentAgentId, setCurrentAgentId] = (0, import_react14.useState)(
     defaultAgent || agentIds[0] || ""
   );
+  (0, import_react14.useEffect)(() => {
+    if (selectedAgent && selectedAgent !== currentAgentId) {
+      const oldAgentId = currentAgentId;
+      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]);
   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 +5736,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 +5880,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 +6265,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 +6293,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 +6424,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) => {
@@ -6648,9 +6772,11 @@ var AIAgentPanel = import_react14.default.forwardRef(({
         handleAgentSwitch,
         agentsLoading,
         contextSections: mergedContext.sections,
-        totalContextTokens: mergedContext.totalTokens || 0,
+        totalContextTokens: filteredContext.totalTokens,
         maxContextTokens,
         enableContextDetailView,
+        disabledSectionIds: currentDisabledSections,
+        onToggleSection: handleContextSectionToggle,
         onConversationCreated: handleConversationCreated,
         conversationInitialPrompt: activeConv.conversationInitialPrompt,
         cssUrl,

package/dist/index.mjs

@@ -3467,12 +3467,15 @@ var ChatInput = React12.memo(({
   contextSections = [],
   totalContextTokens = 0,
   maxContextTokens = 8e3,
-  enableContextDetailView = false
+  enableContextDetailView = false,
+  disabledSectionIds = /* @__PURE__ */ new Set(),
+  onToggleSection
 }) => {
   const [inputValue, setInputValue] = useState6("");
   const [dropdownOpen, setDropdownOpen] = useState6(false);
   const [contextViewerOpen, setContextViewerOpen] = useState6(false);
   const [contextViewMode, setContextViewMode] = useState6("summary");
+  const [expandedSectionId, setExpandedSectionId] = useState6(null);
   const textareaRef = useRef5(null);
   const containerRef = useRef5(null);
   const contextPopoverRef = useRef5(null);
@@ -3509,6 +3512,7 @@ var ChatInput = React12.memo(({
       if (contextPopoverRef.current && !contextPopoverRef.current.contains(event.target)) {
         setContextViewerOpen(false);
         setContextViewMode("summary");
+        setExpandedSectionId(null);
       }
     };
     if (contextViewerOpen) {
@@ -3590,6 +3594,9 @@ var ChatInput = React12.memo(({
           setContextViewerOpen(!contextViewerOpen);
           if (!contextViewerOpen) {
             setContextViewMode("summary");
+            setExpandedSectionId(null);
+          } else {
+            setExpandedSectionId(null);
           }
         },
         type: "button",
@@ -3607,7 +3614,10 @@ var ChatInput = React12.memo(({
         "button",
         {
           className: "ai-chat-context-popover__close",
-          onClick: () => setContextViewerOpen(false),
+          onClick: () => {
+            setContextViewerOpen(false);
+            setExpandedSectionId(null);
+          },
           type: "button"
         },
         "\xD7"
@@ -3624,6 +3634,7 @@ var ChatInput = React12.memo(({
           className: `ai-chat-context-popover__section-item ${enableContextDetailView ? "ai-chat-context-popover__section-item--clickable" : ""}`,
           onClick: () => {
             if (enableContextDetailView) {
+              setExpandedSectionId(section.id);
               setContextViewMode("detail");
             }
           }
@@ -3635,7 +3646,10 @@ var ChatInput = React12.memo(({
         "button",
         {
           className: "ai-chat-context-popover__expand-btn",
-          onClick: () => setContextViewMode("detail"),
+          onClick: () => {
+            setExpandedSectionId(null);
+            setContextViewMode("detail");
+          },
           type: "button"
         },
         "View details \u2192"
@@ -3644,7 +3658,10 @@ var ChatInput = React12.memo(({
         "button",
         {
           className: "ai-chat-context-popover__back",
-          onClick: () => setContextViewMode("summary"),
+          onClick: () => {
+            setContextViewMode("summary");
+            setExpandedSectionId(null);
+          },
           type: "button"
         },
         "\u2190 Back"
@@ -3652,7 +3669,10 @@ var ChatInput = React12.memo(({
         "button",
         {
           className: "ai-chat-context-popover__close",
-          onClick: () => setContextViewerOpen(false),
+          onClick: () => {
+            setContextViewerOpen(false);
+            setExpandedSectionId(null);
+          },
           type: "button"
         },
         "\xD7"
@@ -3664,7 +3684,39 @@ var ChatInput = React12.memo(({
         }
       ))), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__detail-sections" }, contextSections.map((section) => {
         const format = detectFormat(section.data);
-        return /* @__PURE__ */ React12.createElement("details", { key: section.id, className: "ai-chat-context-popover__detail-section", open: true }, /* @__PURE__ */ React12.createElement("summary", { className: "ai-chat-context-popover__detail-section-header" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__detail-section-title" }, section.title), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__detail-section-meta" }, /* @__PURE__ */ React12.createElement("code", null, `{{${section.id}}}`), /* @__PURE__ */ React12.createElement("span", null, "~", section.tokens || Math.ceil(JSON.stringify(section.data).length / 4)))), /* @__PURE__ */ React12.createElement("pre", { className: "ai-chat-context-popover__detail-content" }, /* @__PURE__ */ React12.createElement("code", null, formatContent(section.data, format))));
+        const isEnabled = !disabledSectionIds.has(section.id);
+        return /* @__PURE__ */ React12.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__ */ React12.createElement("summary", { className: "ai-chat-context-popover__detail-section-header" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__detail-section-title-row" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__detail-section-title" }, section.title), /* @__PURE__ */ React12.createElement(
+            "label",
+            {
+              className: "ai-chat-context-toggle",
+              onClick: (e) => e.stopPropagation(),
+              title: isEnabled ? "Disable this context section" : "Enable this context section"
+            },
+            /* @__PURE__ */ React12.createElement(
+              "input",
+              {
+                type: "checkbox",
+                checked: isEnabled,
+                onChange: (e) => {
+                  e.stopPropagation();
+                  if (onToggleSection) {
+                    onToggleSection(section.id, !isEnabled);
+                  }
+                },
+                className: "ai-chat-context-toggle__input"
+              }
+            ),
+            /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-toggle__slider" })
+          )), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__detail-section-meta" }, /* @__PURE__ */ React12.createElement("code", null, `{{${section.id}}}`), /* @__PURE__ */ React12.createElement("span", null, "~", section.tokens || Math.ceil(JSON.stringify(section.data).length / 4)))),
+          /* @__PURE__ */ React12.createElement("pre", { className: "ai-chat-context-popover__detail-content" }, /* @__PURE__ */ React12.createElement("code", null, formatContent(section.data, format)))
+        );
       })))
     )), /* @__PURE__ */ React12.createElement(
       "button",
@@ -3740,6 +3792,8 @@ var AIChatPanel = ({
   totalContextTokens = 0,
   maxContextTokens = 8e3,
   enableContextDetailView = false,
+  disabledSectionIds: propDisabledSectionIds,
+  onToggleSection: propOnToggleSection,
   onConversationCreated,
   // UI Customization Props
   cssUrl,
@@ -3791,6 +3845,8 @@ var AIChatPanel = ({
   const [pendingToolRequests, setPendingToolRequests] = useState6([]);
   const [sessionApprovedTools, setSessionApprovedTools] = useState6([]);
   const [alwaysApprovedTools, setAlwaysApprovedTools] = useState6([]);
+  const [internalDisabledSectionIds, setInternalDisabledSectionIds] = useState6(/* @__PURE__ */ new Set());
+  const disabledSectionIds = propDisabledSectionIds != null ? propDisabledSectionIds : internalDisabledSectionIds;
   useEffect7(() => {
     setShowEmailPanel(customerEmailCaptureMode !== "HIDE");
     if (customerEmailCaptureMode === "REQUIRED") {
@@ -3868,6 +3924,21 @@ var AIChatPanel = ({
       userLanguage: navigator.language
     };
   }, []);
+  const handleToggleSection = useCallback2((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 = useCallback2(() => {
     var _a2, _b;
     console.log("ensureConversation - called with:", {
@@ -5008,7 +5079,9 @@ var AIChatPanel = ({
         contextSections,
         totalContextTokens,
         maxContextTokens,
-        enableContextDetailView
+        enableContextDetailView,
+        disabledSectionIds,
+        onToggleSection: handleToggleSection
       }
     ),
     showPoweredBy && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-panel__footer" }, mcpServers && mcpServers.length > 0 && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-tools-status" }, /* @__PURE__ */ React12.createElement(
@@ -5359,6 +5432,8 @@ var ChatPanelWrapper = ({
   totalContextTokens,
   maxContextTokens,
   enableContextDetailView,
+  disabledSectionIds,
+  onToggleSection,
   onConversationCreated,
   conversationInitialPrompt,
   // New props from ChatPanel port
@@ -5460,6 +5535,8 @@ var ChatPanelWrapper = ({
         totalContextTokens,
         maxContextTokens,
         enableContextDetailView,
+        disabledSectionIds,
+        onToggleSection,
         onConversationCreated: conversationCreatedCallback,
         cssUrl,
         markdownClass,
@@ -5484,6 +5561,7 @@ ChatPanelWrapper.displayName = "ChatPanelWrapper";
 var AIAgentPanel = React13.forwardRef(({
   agents,
   defaultAgent,
+  selectedAgent,
   customerId,
   apiKey,
   context,
@@ -5587,6 +5665,28 @@ var AIAgentPanel = React13.forwardRef(({
   const [currentAgentId, setCurrentAgentId] = useState8(
     defaultAgent || agentIds[0] || ""
   );
+  useEffect9(() => {
+    if (selectedAgent && selectedAgent !== currentAgentId) {
+      const oldAgentId = currentAgentId;
+      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]);
   const [apiConversations, setApiConversations] = useState8([]);
   const [conversationsLoading, setConversationsLoading] = useState8(false);
   const [conversationsError, setConversationsError] = useState8(null);
@@ -5603,6 +5703,7 @@ var AIAgentPanel = React13.forwardRef(({
     "This Month": false,
     "Older": false
   });
+  const [disabledContextSections, setDisabledContextSections] = useState8(/* @__PURE__ */ new Map());
   const {
     agents: agentProfiles,
     isLoading: agentsLoading,
@@ -5746,13 +5847,8 @@ var AIAgentPanel = React13.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: {
@@ -6136,8 +6232,21 @@ var AIAgentPanel = React13.forwardRef(({
       });
     }
   }, [pageContextSections, currentAgentId, agentIds, getAgent, localOverrides]);
+  const currentDisabledSections = useMemo4(() => {
+    return currentConversationId ? disabledContextSections.get(currentConversationId) || /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set();
+  }, [currentConversationId, disabledContextSections]);
+  const filteredContext = useMemo4(() => {
+    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 = useMemo4(() => {
-    const contextData = mergedContext.sections.map((section) => ({
+    const contextData = filteredContext.sections.map((section) => ({
       key: section.id,
       data: JSON.stringify(section.data)
     }));
@@ -6151,7 +6260,7 @@ var AIAgentPanel = React13.forwardRef(({
       }
     }
     return [...data, ...contextData];
-  }, [data, mergedContext.sections, buildAgentAwarenessInstructions, currentAgentId, enableAgentSuggestions]);
+  }, [data, filteredContext.sections, buildAgentAwarenessInstructions, currentAgentId, enableAgentSuggestions]);
   const handleAgentSwitch = useCallback4(
     (newAgentId) => {
       const oldAgentId = currentAgentId;
@@ -6282,6 +6391,21 @@ var AIAgentPanel = React13.forwardRef(({
     setSuggestedAgent(null);
     setHandoffSource("agent");
   }, []);
+  const handleContextSectionToggle = useCallback4((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 = useCallback4((tempId, realId) => {
     console.log("Conversation created:", tempId, "->", realId);
     setActiveConversations((prev) => {
@@ -6615,9 +6739,11 @@ var AIAgentPanel = React13.forwardRef(({
         handleAgentSwitch,
         agentsLoading,
         contextSections: mergedContext.sections,
-        totalContextTokens: mergedContext.totalTokens || 0,
+        totalContextTokens: filteredContext.totalTokens,
         maxContextTokens,
         enableContextDetailView,
+        disabledSectionIds: currentDisabledSections,
+        onToggleSection: handleContextSectionToggle,
         onConversationCreated: handleConversationCreated,
         conversationInitialPrompt: activeConv.conversationInitialPrompt,
         cssUrl,

package/package.json

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

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;
@@ -394,6 +397,8 @@ 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
@@ -445,6 +450,8 @@ const ChatPanelWrapper = (({
   totalContextTokens,
   maxContextTokens,
   enableContextDetailView,
+  disabledSectionIds,
+  onToggleSection,
   onConversationCreated,
   conversationInitialPrompt,
   // New props from ChatPanel port
@@ -570,6 +577,8 @@ const ChatPanelWrapper = (({
         totalContextTokens={totalContextTokens}
         maxContextTokens={maxContextTokens}
         enableContextDetailView={enableContextDetailView}
+        disabledSectionIds={disabledSectionIds}
+        onToggleSection={onToggleSection}
         onConversationCreated={conversationCreatedCallback}
         cssUrl={cssUrl}
         markdownClass={markdownClass}
@@ -596,6 +605,7 @@ ChatPanelWrapper.displayName = 'ChatPanelWrapper';
 const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   agents,
   defaultAgent,
+  selectedAgent,
   customerId,
   apiKey,
   context,
@@ -706,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);
@@ -732,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,
@@ -945,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,
@@ -1509,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),
     }));
@@ -1528,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(
@@ -1697,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);
@@ -2194,9 +2273,11 @@ 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}

package/src/AIChatPanel.css

@@ -1575,6 +1575,88 @@
   font-size: 10px;
 }
 
+/* Detail Section Title Row (with toggle) */
+.ai-chat-context-popover__detail-section-title-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+/* Disabled Section Styling */
+.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;
+}
+
+/* Context Toggle Switch */
+.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 toggle */
+.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;
+}
+
 /* Detail Content */
 .ai-chat-context-popover__detail-content {
   margin: 0;

package/src/AIChatPanel.tsx

@@ -88,6 +88,8 @@ export interface AIChatPanelProps {
   totalContextTokens?: number;
   maxContextTokens?: number;
   enableContextDetailView?: boolean;
+  disabledSectionIds?: Set<string>;
+  onToggleSection?: (sectionId: string, enabled: boolean) => void;
 
   // Callback when a new conversation is created via API
   onConversationCreated?: (conversationId: string) => void;
@@ -295,6 +297,8 @@ interface ChatInputProps {
   totalContextTokens?: number;
   maxContextTokens?: number;
   enableContextDetailView?: boolean;
+  disabledSectionIds?: Set<string>;
+  onToggleSection?: (sectionId: string, enabled: boolean) => void;
   onContextViewerToggle?: () => void;
 }
 
@@ -313,11 +317,14 @@ const ChatInput = React.memo<ChatInputProps>(({
   totalContextTokens = 0,
   maxContextTokens = 8000,
   enableContextDetailView = false,
+  disabledSectionIds = new Set(),
+  onToggleSection,
 }) => {
   const [inputValue, setInputValue] = useState('');
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const [contextViewerOpen, setContextViewerOpen] = useState(false);
   const [contextViewMode, setContextViewMode] = useState<'summary' | 'detail'>('summary');
+  const [expandedSectionId, setExpandedSectionId] = useState<string | null>(null);
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const contextPopoverRef = useRef<HTMLDivElement | null>(null);
@@ -363,6 +370,7 @@ const ChatInput = React.memo<ChatInputProps>(({
       if (contextPopoverRef.current && !contextPopoverRef.current.contains(event.target as Node)) {
         setContextViewerOpen(false);
         setContextViewMode('summary');
+        setExpandedSectionId(null);
       }
     };
     if (contextViewerOpen) {
@@ -466,6 +474,9 @@ const ChatInput = React.memo<ChatInputProps>(({
                 setContextViewerOpen(!contextViewerOpen);
                 if (!contextViewerOpen) {
                   setContextViewMode('summary');
+                  setExpandedSectionId(null);
+                } else {
+                  setExpandedSectionId(null);
                 }
               }}
               type="button"
@@ -488,7 +499,10 @@ const ChatInput = React.memo<ChatInputProps>(({
                       <span className="ai-chat-context-popover__title">Context</span>
                       <button 
                         className="ai-chat-context-popover__close"
-                        onClick={() => setContextViewerOpen(false)}
+                        onClick={() => {
+                          setContextViewerOpen(false);
+                          setExpandedSectionId(null);
+                        }}
                         type="button"
                       >
                         ×
@@ -517,6 +531,7 @@ const ChatInput = React.memo<ChatInputProps>(({
                           className={`ai-chat-context-popover__section-item ${enableContextDetailView ? 'ai-chat-context-popover__section-item--clickable' : ''}`}
                           onClick={() => {
                             if (enableContextDetailView) {
+                              setExpandedSectionId(section.id);
                               setContextViewMode('detail');
                             }
                           }}
@@ -532,7 +547,10 @@ const ChatInput = React.memo<ChatInputProps>(({
                     {enableContextDetailView && (
                       <button 
                         className="ai-chat-context-popover__expand-btn"
-                        onClick={() => setContextViewMode('detail')}
+                        onClick={() => {
+                          setExpandedSectionId(null);
+                          setContextViewMode('detail');
+                        }}
                         type="button"
                       >
                         View details →
@@ -547,7 +565,10 @@ const ChatInput = React.memo<ChatInputProps>(({
                     <div className="ai-chat-context-popover__header">
                       <button 
                         className="ai-chat-context-popover__back"
-                        onClick={() => setContextViewMode('summary')}
+                        onClick={() => {
+                          setContextViewMode('summary');
+                          setExpandedSectionId(null);
+                        }}
                         type="button"
                       >
                         ← Back
@@ -555,7 +576,10 @@ const ChatInput = React.memo<ChatInputProps>(({
                       <span className="ai-chat-context-popover__title">Context Details</span>
                       <button 
                         className="ai-chat-context-popover__close"
-                        onClick={() => setContextViewerOpen(false)}
+                        onClick={() => {
+                          setContextViewerOpen(false);
+                          setExpandedSectionId(null);
+                        }}
                         type="button"
                       >
                         ×
@@ -580,10 +604,35 @@ const ChatInput = React.memo<ChatInputProps>(({
                     <div className="ai-chat-context-popover__detail-sections">
                       {contextSections.map((section) => {
                         const format = detectFormat(section.data);
+                        const isEnabled = !disabledSectionIds.has(section.id);
                         return (
-                          <details key={section.id} className="ai-chat-context-popover__detail-section" open>
+                          <details 
+                            key={section.id} 
+                            className={`ai-chat-context-popover__detail-section ${!isEnabled ? 'ai-chat-context-popover__detail-section--disabled' : ''}`}
+                            open={expandedSectionId === section.id}
+                          >
                             <summary className="ai-chat-context-popover__detail-section-header">
-                              <span className="ai-chat-context-popover__detail-section-title">{section.title}</span>
+                              <div className="ai-chat-context-popover__detail-section-title-row">
+                                <span className="ai-chat-context-popover__detail-section-title">{section.title}</span>
+                                <label 
+                                  className="ai-chat-context-toggle"
+                                  onClick={(e) => e.stopPropagation()}
+                                  title={isEnabled ? "Disable this context section" : "Enable this context section"}
+                                >
+                                  <input
+                                    type="checkbox"
+                                    checked={isEnabled}
+                                    onChange={(e) => {
+                                      e.stopPropagation();
+                                      if (onToggleSection) {
+                                        onToggleSection(section.id, !isEnabled);
+                                      }
+                                    }}
+                                    className="ai-chat-context-toggle__input"
+                                  />
+                                  <span className="ai-chat-context-toggle__slider"></span>
+                                </label>
+                              </div>
                               <span className="ai-chat-context-popover__detail-section-meta">
                                 <code>{`{{${section.id}}}`}</code>
                                 <span>~{section.tokens || Math.ceil(JSON.stringify(section.data).length / 4)}</span>
@@ -701,6 +750,8 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   totalContextTokens = 0,
   maxContextTokens = 8000,
   enableContextDetailView = false,
+  disabledSectionIds: propDisabledSectionIds,
+  onToggleSection: propOnToggleSection,
   onConversationCreated,
   // UI Customization Props
   cssUrl,
@@ -770,6 +821,11 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   const [sessionApprovedTools, setSessionApprovedTools] = useState<string[]>([]);
   const [alwaysApprovedTools, setAlwaysApprovedTools] = useState<string[]>([]);
 
+  // Context section toggle state (disabled sections)
+  // Use internal state only if prop is not provided
+  const [internalDisabledSectionIds, setInternalDisabledSectionIds] = useState<Set<string>>(new Set());
+  const disabledSectionIds = propDisabledSectionIds ?? internalDisabledSectionIds;
+
   // Email capture mode effect - like ChatPanel
   useEffect(() => {
     setShowEmailPanel(customerEmailCaptureMode !== 'HIDE');
@@ -891,6 +947,24 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     };
   }, []);
 
+  // Handle toggling context sections on/off
+  const handleToggleSection = useCallback((sectionId: string, enabled: boolean) => {
+    // Use prop callback if provided, otherwise use internal state
+    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]);
+
   // Ensure a conversation exists before sending the first message
   // This creates a conversation on the server and returns the conversation ID
   const ensureConversation = useCallback(() => {
@@ -2633,6 +2707,8 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         totalContextTokens={totalContextTokens}
         maxContextTokens={maxContextTokens}
         enableContextDetailView={enableContextDetailView}
+        disabledSectionIds={disabledSectionIds}
+        onToggleSection={handleToggleSection}
       />
       
       {/* Footer */}

package/src/components/ui/ToolInfoModal.tsx

@@ -64,3 +64,6 @@ const ToolInfoModal: React.FC<ToolInfoModalProps> = ({
 
 export default ToolInfoModal;
 
+
+
+

package/src/hooks/useAgentRegistry.ts

@@ -106,7 +106,6 @@ export function useAgentRegistry(
 
         const data = await response.json();
         const agentData = Array.isArray(data) ? data[0] : data;
-        
 
         if (!agentData) {
           throw new Error(`No data returned for agent ${agentId}`);