@hef2024/llmasaservice-ui 0.20.1 → 0.20.3

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,63 @@ var AIAgentPanel = React13.forwardRef(({
   const [currentAgentId, setCurrentAgentId] = useState8(
     defaultAgent || agentIds[0] || ""
   );
+  const [pendingFollowOnPrompt, setPendingFollowOnPrompt] = useState8(null);
+  const [agentSwitchSettled, setAgentSwitchSettled] = useState8(true);
+  const lastProcessedFollowOnRef = useRef6("");
+  useEffect9(() => {
+    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]);
+  useEffect9(() => {
+    if (!agentSwitchSettled && followOnPrompt && followOnPrompt !== "" && followOnPrompt !== lastProcessedFollowOnRef.current) {
+      setPendingFollowOnPrompt(followOnPrompt);
+      lastProcessedFollowOnRef.current = followOnPrompt;
+    }
+  }, [followOnPrompt, agentSwitchSettled]);
+  useEffect9(() => {
+    if (!agentSwitchSettled) {
+      const timer = setTimeout(() => {
+        setAgentSwitchSettled(true);
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [agentSwitchSettled]);
+  const effectiveFollowOnPrompt = useMemo4(() => {
+    if (!agentSwitchSettled) {
+      return "";
+    }
+    if (pendingFollowOnPrompt) {
+      return pendingFollowOnPrompt;
+    }
+    return followOnPrompt;
+  }, [followOnPrompt, pendingFollowOnPrompt, agentSwitchSettled]);
+  useEffect9(() => {
+    if (agentSwitchSettled && pendingFollowOnPrompt) {
+      const timer = setTimeout(() => {
+        setPendingFollowOnPrompt(null);
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [agentSwitchSettled, pendingFollowOnPrompt]);
   const [apiConversations, setApiConversations] = useState8([]);
   const [conversationsLoading, setConversationsLoading] = useState8(false);
   const [conversationsError, setConversationsError] = useState8(null);
@@ -5603,6 +5738,7 @@ var AIAgentPanel = React13.forwardRef(({
     "This Month": false,
     "Older": false
   });
+  const [disabledContextSections, setDisabledContextSections] = useState8(/* @__PURE__ */ new Map());
   const {
     agents: agentProfiles,
     isLoading: agentsLoading,
@@ -5746,13 +5882,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 +6267,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 +6295,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 +6426,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) => {
@@ -6609,15 +6768,17 @@ var AIAgentPanel = React13.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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hef2024/llmasaservice-ui",
-  "version": "0.20.1",
+  "version": "0.20.3",
   "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,92 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
     defaultAgent || agentIds[0] || ''
   );
 
+  // Track pending follow-on prompt after agent switch (to handle timing issues)
+  const [pendingFollowOnPrompt, setPendingFollowOnPrompt] = useState<string | null>(null);
+  const [agentSwitchSettled, setAgentSwitchSettled] = useState(true);
+  const lastProcessedFollowOnRef = useRef<string>('');
+
+  // 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;
+      
+      // Mark that an agent switch is in progress (not yet settled)
+      setAgentSwitchSettled(false);
+      
+      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 other deps to only trigger on prop change
+
+  // Queue followOnPrompt if it arrives during an agent switch
+  useEffect(() => {
+    if (!agentSwitchSettled && followOnPrompt && followOnPrompt !== '' && followOnPrompt !== lastProcessedFollowOnRef.current) {
+      // Agent switch in progress - queue the prompt
+      setPendingFollowOnPrompt(followOnPrompt);
+      lastProcessedFollowOnRef.current = followOnPrompt;
+    }
+  }, [followOnPrompt, agentSwitchSettled]);
+
+  // Mark agent switch as settled after a short delay (allows ChatPanelWrapper to re-render)
+  useEffect(() => {
+    if (!agentSwitchSettled) {
+      const timer = setTimeout(() => {
+        setAgentSwitchSettled(true);
+      }, 100); // Small delay to ensure ChatPanelWrapper has re-rendered with new agent
+      
+      return () => clearTimeout(timer);
+    }
+  }, [agentSwitchSettled]);
+
+  // Compute effective follow-on prompt (handles timing with agent switch)
+  const effectiveFollowOnPrompt = useMemo(() => {
+    // If agent switch hasn't settled yet, don't send any prompt
+    if (!agentSwitchSettled) {
+      return '';
+    }
+    
+    // If there's a pending prompt from agent switch, use it
+    if (pendingFollowOnPrompt) {
+      return pendingFollowOnPrompt;
+    }
+    
+    // Otherwise use the prop directly
+    return followOnPrompt;
+  }, [followOnPrompt, pendingFollowOnPrompt, agentSwitchSettled]);
+
+  // Clear pending prompt after it's been passed down
+  useEffect(() => {
+    if (agentSwitchSettled && pendingFollowOnPrompt) {
+      // Clear after a tick to ensure it was processed
+      const timer = setTimeout(() => {
+        setPendingFollowOnPrompt(null);
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [agentSwitchSettled, pendingFollowOnPrompt]);
+
   // API-based conversation state
   const [apiConversations, setApiConversations] = useState<APIConversationSummary[]>([]);
   const [conversationsLoading, setConversationsLoading] = useState(false);
@@ -732,6 +828,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 +1044,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 +1603,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 +1643,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 +1812,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);
@@ -2188,15 +2323,17 @@ console.log("apiKey", apiKey);
             initialMessage={initialMessage}
             hideInitialPrompt={hideInitialPrompt}
             followOnQuestions={followOnQuestions}
-            followOnPrompt={followOnPrompt}
+            followOnPrompt={effectiveFollowOnPrompt}
             agentOptions={agentOptions}
             currentAgentId={currentAgentId}
             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}