@hef2024/llmasaservice-ui 0.21.0 → 0.22.1

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/AIChatPanel.tsx

@@ -1470,12 +1470,28 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   }, [thumbsDownClick, interactionClicked]);
 
   // Scroll to bottom - throttled using RAF to prevent layout thrashing
-  const scrollToBottom = useCallback(() => {
+  const scrollToBottom = useCallback((force: boolean = false) => {
     // Cancel any pending scroll
     if (scrollRAFRef.current) {
       cancelAnimationFrame(scrollRAFRef.current);
     }
     
+    // Check if we should scroll - only if user is near bottom or force is true
+    if (!force && responseAreaRef.current) {
+      const scrollViewport = responseAreaRef.current.querySelector('[data-radix-scroll-area-viewport]') as HTMLElement;
+      const scrollElement = scrollViewport || responseAreaRef.current;
+      
+      const scrollTop = scrollElement.scrollTop;
+      const scrollHeight = scrollElement.scrollHeight;
+      const clientHeight = scrollElement.clientHeight;
+      const isNearBottom = scrollHeight - scrollTop - clientHeight < 100;
+      
+      // If user is not near bottom, don't scroll (prevents scroll on layout changes like toast)
+      if (!isNearBottom) {
+        return;
+      }
+    }
+    
     // Throttle to max once per 100ms to prevent performance issues during streaming
     const now = Date.now();
     if (now - lastScrollTimeRef.current < 100) {
@@ -1551,8 +1567,9 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     
     // Scroll to bottom immediately to show the new prompt
     // Use setTimeout to ensure the DOM has updated
+    // Force scroll since this is a user-initiated action
     setTimeout(() => {
-      scrollToBottom();
+      scrollToBottom(true);
     }, 0);
     
     // Now proceed with API calls in the background (conversation creation + LLM call)
@@ -1808,7 +1825,8 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     // 3. We have content to show (response exists)
     const shouldAutoScroll = scrollToEnd || !userHasScrolled;
     if (!idle && shouldAutoScroll && response) {
-      scrollToBottom();
+      // Use non-forced scroll - will only scroll if near bottom
+      scrollToBottom(false);
     }
   }, [response, scrollToBottom, idle, userHasScrolled, scrollToEnd]); // Removed history dependency
 
@@ -2037,8 +2055,9 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     // Auto-scroll when the agent suggestion card appears
     useEffect(() => {
       // Small delay to ensure the card is fully rendered in the DOM
+      // Force scroll since this is new content being added
       const timer = setTimeout(() => {
-        scrollToBottom();
+        scrollToBottom(true);
       }, 100);
       return () => clearTimeout(timer);
     }, []); // Empty deps - only run on mount
@@ -2158,8 +2177,9 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
           onClick={() => {
             onAgentChange(agentId);
             // Scroll to bottom after a brief delay to let React re-render
+            // Force scroll since this is a user-initiated action
             setTimeout(() => {
-              scrollToBottom();
+              scrollToBottom(true);
             }, 100);
           }}
         >

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';
 
 
 
+
+