@datalayer/agent-runtimes 1.0.4 → 1.0.6

package/lib/chat/ChatSidebar.js

@@ -12,10 +12,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * @module chat/ChatSidebar
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { IconButton, Text } from '@primer/react';
+import { createPortal } from 'react-dom';
+import { IconButton } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { SidebarCollapseIcon, SidebarExpandIcon, XIcon, } from '@primer/octicons-react';
-import { AiAgentIcon } from '@datalayer/icons-react';
 import { useChatKeyboardShortcuts, getShortcutDisplay, } from '@datalayer/core/lib/hooks';
 import { ChatBase } from './base/ChatBase';
 import { useChatStore, useChatOpen, useChatMessages, } from '../stores/chatStore';
@@ -37,7 +37,7 @@ function useIsMobile(breakpoint = 640) {
 /**
  * Chat Sidebar component
  */
-export function ChatSidebar({ title = 'Chat', protocol: protocolProp, defaultOpen = true, position = 'right', width = 400, showHeader = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = 'k', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, onSendMessage, enableStreaming = true, placeholder = 'Ask a question...', description, pendingPrompt, panelProps, }) {
+export function ChatSidebar({ title = 'Chat', protocol: protocolProp, defaultOpen = true, position = 'right', width = 400, showHeader = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = 'k', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, onSendMessage, enableStreaming = true, onToolCallStart, onToolCallComplete, placeholder = 'Ask a question...', description, pendingPrompt, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, }) {
     const isOpen = useChatOpen();
     const messages = useChatMessages();
     const setOpen = useChatStore(state => state.setOpen);
@@ -45,6 +45,37 @@ export function ChatSidebar({ title = 'Chat', protocol: protocolProp, defaultOpe
     const sidebarRef = useRef(null);
     const inputRef = useRef(null);
     const isMobile = useIsMobile();
+    const [desktopViewportHeight, setDesktopViewportHeight] = useState(null);
+    // Compute available desktop height from the element's top position so the
+    // sidebar always fits within the visible viewport.
+    useEffect(() => {
+        if (isMobile) {
+            setDesktopViewportHeight(null);
+            return;
+        }
+        const updateHeight = () => {
+            const el = sidebarRef.current;
+            if (!el)
+                return;
+            const rect = el.getBoundingClientRect();
+            const viewportHeight = window.visualViewport?.height || window.innerHeight || 0;
+            const bottomPadding = 4; // keep a small breathing space from viewport edge
+            const available = Math.max(220, Math.floor(viewportHeight - rect.top - bottomPadding));
+            setDesktopViewportHeight(prev => prev !== null && Math.abs(prev - available) < 2 ? prev : available);
+        };
+        updateHeight();
+        window.addEventListener('resize', updateHeight);
+        window.addEventListener('scroll', updateHeight, true);
+        const observer = new ResizeObserver(() => updateHeight());
+        if (sidebarRef.current) {
+            observer.observe(sidebarRef.current);
+        }
+        return () => {
+            window.removeEventListener('resize', updateHeight);
+            window.removeEventListener('scroll', updateHeight, true);
+            observer.disconnect();
+        };
+    }, [isMobile]);
     // Initialize open state from defaultOpen
     useEffect(() => {
         setOpen(defaultOpen);
@@ -137,58 +168,45 @@ export function ChatSidebar({ title = 'Chat', protocol: protocolProp, defaultOpe
                 : SidebarExpandIcon, "aria-label": `Close sidebar${shortcutHint ? ` (${shortcutHint})` : ''}`, onClick: handleToggle, variant: "invisible", size: "small" }));
     // Collapsed state
     if (!isOpen) {
-        return (_jsxs(Box, { ref: sidebarRef, className: className, sx: {
+        const collapsedLauncher = (_jsx(Box, { ref: sidebarRef, className: className, sx: {
                 position: 'fixed',
                 top: 12,
-                ...(position === 'right' ? { right: 12 } : { left: 12 }),
+                ...(position === 'right'
+                    ? { right: 'env(safe-area-inset-right)' }
+                    : { left: 'env(safe-area-inset-left)' }),
                 zIndex: 1001,
                 display: 'flex',
                 flexDirection: 'column',
                 alignItems: 'center',
                 gap: 2,
-            }, children: [_jsxs(Box, { sx: { position: 'relative' }, children: [_jsx(IconButton, { icon: position === 'right' ? SidebarExpandIcon : SidebarCollapseIcon, "aria-label": `Open chat${shortcutHint ? ` (${shortcutHint})` : ''}`, onClick: handleToggle, variant: "default", size: "small", sx: {
-                                bg: 'canvas.default',
-                                border: '1px solid',
-                                borderColor: 'border.default',
-                                boxShadow: 'shadow.small',
-                            } }), messages.length > 0 && (_jsx(Box, { sx: {
-                                position: 'absolute',
-                                top: -6,
-                                right: -6,
-                                minWidth: 16,
-                                height: 16,
-                                px: 1,
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                bg: 'accent.emphasis',
-                                color: 'fg.onEmphasis',
-                                borderRadius: '50%',
-                                fontSize: '10px',
-                                fontWeight: 'bold',
-                                boxShadow: 'shadow.small',
-                            }, children: messages.length > 99 ? '99+' : messages.length }))] }), _jsx(Box, { sx: {
-                        width: 32,
-                        height: 32,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        bg: 'canvas.default',
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        borderRadius: 2,
-                        boxShadow: 'shadow.small',
-                    }, children: brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }) }), shortcutHint && (_jsx(Box, { sx: {
-                        px: 1,
-                        py: '2px',
-                        bg: 'canvas.default',
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        color: 'fg.muted',
-                        borderRadius: 1,
-                        fontSize: 0,
-                        boxShadow: 'shadow.small',
-                    }, children: _jsx(Text, { sx: { fontSize: '10px', fontFamily: 'mono' }, children: shortcutHint }) }))] }));
+            }, children: _jsxs(Box, { sx: { position: 'relative' }, children: [_jsx(IconButton, { icon: position === 'right' ? SidebarExpandIcon : SidebarCollapseIcon, "aria-label": "Open chat", description: shortcutHint ? `Open chat (${shortcutHint})` : 'Open chat', onClick: handleToggle, variant: "default", size: "small", sx: {
+                            bg: 'canvas.default',
+                            border: '1px solid',
+                            borderColor: 'border.default',
+                            boxShadow: 'shadow.small',
+                        } }), messages.length > 0 && (_jsx(Box, { sx: {
+                            position: 'absolute',
+                            top: -6,
+                            right: -6,
+                            minWidth: 16,
+                            height: 16,
+                            px: 1,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            bg: 'accent.emphasis',
+                            color: 'fg.onEmphasis',
+                            borderRadius: '50%',
+                            fontSize: '10px',
+                            fontWeight: 'bold',
+                            boxShadow: 'shadow.small',
+                        }, children: messages.length > 99 ? '99+' : messages.length }))] }) }));
+        // Render the collapsed launcher in a body portal so it stays pinned to the
+        // viewport edge even when ancestors use transforms/positioning contexts.
+        if (typeof document !== 'undefined' && document.body) {
+            return createPortal(collapsedLauncher, document.body);
+        }
+        return collapsedLauncher;
     }
     // Mobile full-screen overlay
     const mobileStyles = isMobile
@@ -217,21 +235,35 @@ export function ChatSidebar({ title = 'Chat', protocol: protocolProp, defaultOpe
                     position: 'relative',
                     display: 'flex',
                     flexDirection: 'column',
+                    alignSelf: 'stretch',
                     width: isMobile
                         ? '100%'
                         : typeof width === 'number'
                             ? `${width}px`
                             : width,
-                    height: '100%',
+                    height: isMobile
+                        ? '100%'
+                        : desktopViewportHeight
+                            ? `${desktopViewportHeight}px`
+                            : 'calc(100dvh - 8px)',
+                    minHeight: 0,
+                    maxHeight: isMobile
+                        ? '100%'
+                        : desktopViewportHeight
+                            ? `${desktopViewportHeight}px`
+                            : 'calc(100dvh - 8px)',
+                    marginBlock: isMobile ? 0 : '4px',
+                    flex: isMobile ? '1 1 auto' : '0 0 auto',
                     bg: 'canvas.default',
                     borderLeft: !isMobile && position === 'right' ? '1px solid' : 'none',
                     borderRight: !isMobile && position === 'left' ? '1px solid' : 'none',
                     borderColor: 'border.default',
+                    overflow: 'hidden',
                     ...mobileStyles,
                 }, children: _jsx(ChatBase, { title: title, showHeader: showHeader, brandIcon: brandIcon, protocol: protocolProp, headerButtons: {
                         showNewChat: showNewChatButton,
                         showClear: showClearButton && messages.length > 0,
-                        showSettings: showSettingsButton,
+                        showSettings: showSettingsButton && !!onSettingsClick,
                         onNewChat: handleNewChat,
                         onClear: handleClear,
                         onSettings: onSettingsClick,
@@ -241,6 +273,6 @@ export function ChatSidebar({ title = 'Chat', protocol: protocolProp, defaultOpe
                         ...poweredByProps,
                     }, avatarConfig: {
                         showAvatars: true,
-                    }, placeholder: placeholder, description: description, onSendMessage: onSendMessage, enableStreaming: enableStreaming, pendingPrompt: pendingPrompt, ...panelProps, children: children }) })] }));
+                    }, placeholder: placeholder, description: description, onSendMessage: onSendMessage, enableStreaming: enableStreaming, onToolCallStart: onToolCallStart, onToolCallComplete: onToolCallComplete, pendingPrompt: pendingPrompt, showToolApprovalBanner: showToolApprovalBanner, pendingApprovals: pendingApprovals, onApproveApproval: onApproveApproval, onRejectApproval: onRejectApproval, ...panelProps, children: children }) })] }));
 }
 export default ChatSidebar;

package/lib/chat/ChatStandalone.d.ts

@@ -9,25 +9,17 @@
  * @module chat/ChatStandalone
  */
 import React from 'react';
-import { type PoweredByTagProps } from './display/PoweredByTag';
-import { type ChatBaseProps, type RenderToolResult, type MessageHandler } from '../types';
+import type { ChatCommonProps, MessageHandler } from '../types';
 /**
- * ChatStandalone props
+ * ChatStandalone props — extends ChatCommonProps with standalone popup configuration.
  */
-export interface ChatStandaloneProps {
+export interface ChatStandaloneProps extends ChatCommonProps {
     /**
      * Handler for sending messages - REQUIRED.
      * This function will be called when the user sends a message.
      * Signature: `(message, messages, options?) => Promise<string | void>`
-     * - message: The user's message text
-     * - messages: All messages in the conversation (including the new user message)
-     * - options: Streaming callbacks (onChunk, onComplete, onError, signal)
      */
     onSendMessage: MessageHandler;
-    /** title */
-    title?: string;
-    /** Description shown in empty state */
-    description?: string;
     /** Position of the popup */
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
     /** Default open state */
@@ -36,44 +28,16 @@ export interface ChatStandaloneProps {
     width?: number | string;
     /** height */
     height?: number | string;
-    /** Show header */
-    showHeader?: boolean;
     /** Show the floating button when closed */
     showButton?: boolean;
-    /** Show new chat button */
-    showNewChatButton?: boolean;
-    /** Show clear button */
-    showClearButton?: boolean;
-    /** Show settings button */
-    showSettingsButton?: boolean;
     /** Enable keyboard shortcuts */
     enableKeyboardShortcuts?: boolean;
     /** Toggle shortcut key */
     toggleShortcut?: string;
-    /** Show powered by tag */
-    showPoweredBy?: boolean;
-    /** Powered by tag props */
-    poweredByProps?: Partial<PoweredByTagProps>;
     /** Enable click outside to close */
     clickOutsideToClose?: boolean;
     /** Enable escape key to close */
     escapeToClose?: boolean;
-    /** Custom class name */
-    className?: string;
-    /** Input placeholder */
-    placeholder?: string;
-    /** Callback when settings clicked */
-    onSettingsClick?: () => void;
-    /** Callback when new chat clicked */
-    onNewChat?: () => void;
-    /** Callback when popup opens */
-    onOpen?: () => void;
-    /** Callback when popup closes */
-    onClose?: () => void;
-    /** Children to render in popup body (custom content) */
-    children?: React.ReactNode;
-    /** Custom brand icon */
-    brandIcon?: React.ReactNode;
     /** Custom button icon when closed */
     buttonIcon?: React.ReactNode;
     /** Button tooltip text */
@@ -84,26 +48,12 @@ export interface ChatStandaloneProps {
     offset?: number;
     /** Animation duration (in ms) */
     animationDuration?: number;
-    /** Enable streaming mode */
-    enableStreaming?: boolean;
     /** Empty state message */
     emptyStateMessage?: string;
-    /**
-     * Custom render function for tool results.
-     * When provided, tool calls will be rendered inline in the chat.
-     */
-    renderToolResult?: RenderToolResult;
-    /**
-     * A prompt to append and send after the conversation history is loaded.
-     * The message is shown in the chat and sent to the agent exactly once.
-     */
-    pendingPrompt?: string;
-    /** Additional ChatBase props */
-    panelProps?: Partial<ChatBaseProps>;
 }
 /**
  * ChatStandalone component
  * A floating popup chat that uses ChatBase with custom onSendMessage handler
  */
-export declare function ChatStandalone({ onSendMessage, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, placeholder, onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, buttonIcon, buttonTooltip, brandColor, offset, animationDuration, enableStreaming, emptyStateMessage, renderToolResult, pendingPrompt, panelProps, }: ChatStandaloneProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatStandalone({ onSendMessage, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, placeholder, onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, buttonIcon, buttonTooltip, brandColor, offset, animationDuration, enableStreaming, emptyStateMessage, renderToolResult, onToolCallStart, onToolCallComplete, pendingPrompt, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, }: ChatStandaloneProps): import("react/jsx-runtime").JSX.Element;
 export default ChatStandalone;

package/lib/chat/ChatStandalone.js

@@ -41,7 +41,7 @@ function useIsMobile(breakpoint = 640) {
  * ChatStandalone component
  * A floating popup chat that uses ChatBase with custom onSendMessage handler
  */
-export function ChatStandalone({ onSendMessage, title = 'Chat', description = 'Start a conversation.', position = 'bottom-right', defaultOpen = false, width = 380, height = 520, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, placeholder = 'Type a message...', onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor = '#7c3aed', offset = 20, animationDuration = 200, enableStreaming = true, emptyStateMessage = 'Start a conversation', renderToolResult, pendingPrompt, panelProps, }) {
+export function ChatStandalone({ onSendMessage, title = 'Chat', description = 'Start a conversation.', position = 'bottom-right', defaultOpen = false, width = 380, height = 520, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, placeholder = 'Type a message...', onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor = '#7c3aed', offset = 20, animationDuration = 200, enableStreaming = true, emptyStateMessage = 'Start a conversation', renderToolResult, onToolCallStart, onToolCallComplete, pendingPrompt, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, }) {
     // Use Zustand store for state management
     const isOpen = useChatOpen();
     const messages = useChatMessages();
@@ -306,11 +306,11 @@ export function ChatStandalone({ onSendMessage, title = 'Chat', description = 'S
                             onNewChat: handleNewChat,
                             onClear: handleClear,
                             onSettings: onSettingsClick,
-                        }, headerActions: closeButton, renderToolResult: renderToolResult, description: description, placeholder: placeholder, emptyState: {
+                        }, headerActions: closeButton, renderToolResult: renderToolResult, onToolCallStart: onToolCallStart, onToolCallComplete: onToolCallComplete, description: description, placeholder: placeholder, emptyState: {
                             title: emptyStateMessage,
                         }, avatarConfig: {
                             showAvatars: true,
-                        }, backgroundColor: "canvas.subtle", focusTrigger: focusTrigger, pendingPrompt: pendingPrompt, ...panelProps, children: children }), showPoweredBy && (_jsx(Box, { sx: {
+                        }, backgroundColor: "canvas.subtle", focusTrigger: focusTrigger, pendingPrompt: pendingPrompt, showToolApprovalBanner: showToolApprovalBanner, pendingApprovals: pendingApprovals, onApproveApproval: onApproveApproval, onRejectApproval: onRejectApproval, ...panelProps, children: children }), showPoweredBy && (_jsx(Box, { sx: {
                             p: 2,
                             borderTop: '1px solid',
                             borderColor: 'border.default',