@hef2024/llmasaservice-ui 0.20.1 → 0.20.3

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}`);