@hef2024/llmasaservice-ui 0.21.0 → 0.22.0

package/src/AIAgentPanel.tsx

@@ -96,6 +96,8 @@ export interface AIAgentPanelProps {
   theme?: 'light' | 'dark';
   collapsible?: boolean;
   defaultCollapsed?: boolean;
+  isCollapsed?: boolean;
+  onCollapsedChange?: (isCollapsed: boolean) => void;
   defaultWidth?: number;
   minWidth?: number;
   maxWidth?: number;
@@ -618,6 +620,8 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   theme = 'light',
   collapsible = true,
   defaultCollapsed = false,
+  isCollapsed: controlledIsCollapsed,
+  onCollapsedChange,
   defaultWidth = 720,
   minWidth = 520,
   maxWidth = 1200,
@@ -660,8 +664,36 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   customerEmailCaptureMode,
   customerEmailCapturePlaceholder,
 }, ref) => {
+  // Dev mode warnings for prop conflicts
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'development') {
+      // Warn if isCollapsed is provided without onCollapsedChange (user can't interact)
+      if (controlledIsCollapsed !== undefined && !onCollapsedChange) {
+        console.warn(
+          'AIAgentPanel: You provided `isCollapsed` prop without `onCollapsedChange`. ' +
+          'This will render a read-only collapsed state. To allow user interaction, provide both props.'
+        );
+      }
+      
+      // Warn if both isCollapsed and defaultCollapsed are provided (conflicting props)
+      if (controlledIsCollapsed !== undefined && defaultCollapsed !== false) {
+        console.warn(
+          'AIAgentPanel: You provided both `isCollapsed` and `defaultCollapsed` props. ' +
+          'When using controlled mode (isCollapsed), the defaultCollapsed prop is ignored. ' +
+          'Remove defaultCollapsed to avoid confusion.'
+        );
+      }
+    }
+  }, [controlledIsCollapsed, onCollapsedChange, defaultCollapsed]);
+
   // Panel state - only start collapsed if collapsible is true
-  const [isCollapsed, setIsCollapsed] = useState(collapsible && defaultCollapsed);
+  const [uncontrolledIsCollapsed, setUncontrolledIsCollapsed] = useState(collapsible && defaultCollapsed);
+  
+  // Determine if controlled
+  const isControlled = controlledIsCollapsed !== undefined;
+  
+  // Use controlled value if provided, otherwise use internal state
+  const isCollapsed = isControlled ? controlledIsCollapsed : uncontrolledIsCollapsed;
   const [isHistoryCollapsed, setIsHistoryCollapsed] = useState(() => {
     if (typeof window !== 'undefined') {
       const saved = localStorage.getItem('ai-agent-panel-history-collapsed');
@@ -1876,8 +1908,17 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   // Toggle collapse - only if collapsible is enabled
   const toggleCollapse = useCallback(() => {
     if (!collapsible) return;
-    setIsCollapsed((prev) => !prev);
-  }, [collapsible]);
+    
+    const newValue = !isCollapsed;
+    
+    // Update internal state if uncontrolled
+    if (!isControlled) {
+      setUncontrolledIsCollapsed(newValue);
+    }
+    
+    // Call callback if provided
+    onCollapsedChange?.(newValue);
+  }, [collapsible, isCollapsed, isControlled, onCollapsedChange]);
 
   // Toggle history collapse
   const toggleHistoryCollapse = useCallback(() => {
@@ -1927,7 +1968,11 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
                 variant="ghost"
                 size="icon"
                 onClick={() => {
-                  setIsCollapsed(false);
+                  // Expand panel in controlled or uncontrolled mode
+                  if (!isControlled) {
+                    setUncontrolledIsCollapsed(false);
+                  }
+                  onCollapsedChange?.(false);
                   setShowSearch(true);
                 }}
               >
@@ -1941,7 +1986,11 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
               variant="ghost"
               size="icon"
               onClick={() => {
-                setIsCollapsed(false);
+                // Expand panel in controlled or uncontrolled mode
+                if (!isControlled) {
+                  setUncontrolledIsCollapsed(false);
+                }
+                onCollapsedChange?.(false);
                 handleNewConversation();
               }}
             >
@@ -1964,7 +2013,11 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
                   variant={agent.id === currentAgentId ? 'secondary' : 'ghost'}
                   size="icon"
                   onClick={() => {
-                    setIsCollapsed(false);
+                    // Expand panel in controlled or uncontrolled mode
+                    if (!isControlled) {
+                      setUncontrolledIsCollapsed(false);
+                    }
+                    onCollapsedChange?.(false);
                     if (hasActiveConversation && activeConvForAgent) {
                       // Switch to the existing conversation
                       setCurrentConversationId(activeConvForAgent.conversationId);

package/src/components/ui/Button.tsx

@@ -60,3 +60,5 @@ export default Button;
 
 
 
+
+

package/src/components/ui/Dialog.tsx

@@ -156,3 +156,5 @@ export default Dialog;
 
 
 
+
+

package/src/components/ui/Input.tsx

@@ -36,3 +36,5 @@ export default Input;
 
 
 
+
+

package/src/components/ui/Select.tsx

@@ -159,3 +159,5 @@ export default Select;
 
 
 
+
+

package/src/components/ui/ToolInfoModal.tsx

@@ -67,3 +67,5 @@ export default ToolInfoModal;
 
 
 
+
+

package/src/components/ui/Tooltip.tsx

@@ -76,3 +76,5 @@ export default Tooltip;
 
 
 
+
+

package/src/components/ui/index.ts

@@ -23,3 +23,5 @@ export type { DialogProps, DialogFooterProps } from './Dialog';
 
 
 
+
+