@datalayer/agent-runtimes 0.0.2

package/lib/components/chat/components/ChatSidebar.js

@@ -0,0 +1,224 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Chat sidebar component.
+ * Provides a collapsible sidebar with chat interface.
+ * Features: keyboard shortcuts, mobile responsive, powered by tag.
+ * Built on top of ChatBase for core chat functionality.
+ *
+ * @module components/chat/components/ChatSidebar
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { IconButton, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { SidebarCollapseIcon, SidebarExpandIcon, XIcon, } from '@primer/octicons-react';
+import { AiAgentIcon } from '@datalayer/icons-react';
+import { ChatBase, } from './base/ChatBase';
+import { useChatStore, useChatOpen, useChatMessages } from '../store/chatStore';
+import { useChatKeyboardShortcuts, getShortcutDisplay, } from '../../../hooks/useKeyboardShortcuts';
+/**
+ * Hook to detect mobile viewport
+ */
+function useIsMobile(breakpoint = 640) {
+    const [isMobile, setIsMobile] = useState(false);
+    useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth < breakpoint);
+        };
+        checkMobile();
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, [breakpoint]);
+    return isMobile;
+}
+/**
+ * Chat Sidebar component
+ */
+export function ChatSidebar({ title = 'Chat', defaultOpen = true, position = 'right', width = 400, showHeader = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = 'k', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, onSendMessage, enableStreaming = true, placeholder = 'Ask a question...', description, panelProps, }) {
+    const isOpen = useChatOpen();
+    const messages = useChatMessages();
+    const setOpen = useChatStore(state => state.setOpen);
+    const clearMessages = useChatStore(state => state.clearMessages);
+    const sidebarRef = useRef(null);
+    const inputRef = useRef(null);
+    const isMobile = useIsMobile();
+    // Initialize open state from defaultOpen
+    useEffect(() => {
+        setOpen(defaultOpen);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Toggle sidebar
+    const handleToggle = useCallback(() => {
+        const newOpen = !isOpen;
+        setOpen(newOpen);
+        if (newOpen) {
+            onOpen?.();
+        }
+        else {
+            onClose?.();
+        }
+    }, [isOpen, setOpen, onOpen, onClose]);
+    // Handle new chat
+    const handleNewChat = useCallback(() => {
+        clearMessages();
+        onNewChat?.();
+    }, [clearMessages, onNewChat]);
+    // Handle clear
+    const handleClear = useCallback(() => {
+        if (window.confirm('Clear all messages?')) {
+            clearMessages();
+        }
+    }, [clearMessages]);
+    // Focus input
+    const handleFocusInput = useCallback(() => {
+        if (isOpen && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isOpen]);
+    // Keyboard shortcuts
+    useChatKeyboardShortcuts({
+        onToggle: enableKeyboardShortcuts ? handleToggle : undefined,
+        onNewChat: enableKeyboardShortcuts ? handleNewChat : undefined,
+        onClear: enableKeyboardShortcuts && messages.length > 0 ? handleClear : undefined,
+        onFocusInput: enableKeyboardShortcuts && isOpen ? handleFocusInput : undefined,
+        enabled: enableKeyboardShortcuts,
+    });
+    // Click outside to close
+    useEffect(() => {
+        if (!clickOutsideToClose || !isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            if (sidebarRef.current &&
+                !sidebarRef.current.contains(event.target)) {
+                setOpen(false);
+                onClose?.();
+            }
+        };
+        // Delay adding listener to prevent immediate close
+        const timeoutId = setTimeout(() => {
+            document.addEventListener('mousedown', handleClickOutside);
+        }, 100);
+        return () => {
+            clearTimeout(timeoutId);
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [clickOutsideToClose, isOpen, setOpen, onClose]);
+    // Mobile body scroll lock
+    useEffect(() => {
+        if (isMobile && isOpen) {
+            document.body.style.overflow = 'hidden';
+            document.body.style.position = 'fixed';
+            document.body.style.width = '100%';
+            document.body.style.touchAction = 'none';
+            return () => {
+                document.body.style.overflow = '';
+                document.body.style.position = '';
+                document.body.style.width = '';
+                document.body.style.touchAction = '';
+            };
+        }
+    }, [isMobile, isOpen]);
+    // Shortcut hint for toggle
+    const shortcutHint = enableKeyboardShortcuts
+        ? getShortcutDisplay({
+            key: toggleShortcut,
+            ctrlOrCmd: true,
+            handler: () => { },
+        })
+        : undefined;
+    // Collapse toggle button for header
+    const collapseButton = (_jsx(IconButton, { icon: isMobile
+            ? XIcon
+            : position === 'right'
+                ? SidebarCollapseIcon
+                : 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: {
+                position: 'relative',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                p: 2,
+                bg: 'canvas.subtle',
+                borderLeft: position === 'right' ? '1px solid' : 'none',
+                borderRight: position === 'left' ? '1px solid' : 'none',
+                borderColor: 'border.default',
+                width: 48,
+            }, children: [_jsx(IconButton, { icon: position === 'right' ? SidebarExpandIcon : SidebarCollapseIcon, "aria-label": `Open chat${shortcutHint ? ` (${shortcutHint})` : ''}`, onClick: handleToggle, variant: "invisible" }), _jsx(Box, { sx: { mt: 2 }, children: brandIcon || _jsx(AiAgentIcon, { colored: true, size: 24 }) }), messages.length > 0 && (_jsx(Box, { sx: {
+                        mt: 2,
+                        px: 2,
+                        py: 1,
+                        bg: 'accent.emphasis',
+                        color: 'fg.onEmphasis',
+                        borderRadius: '50%',
+                        fontSize: 0,
+                        fontWeight: 'bold',
+                    }, children: messages.length })), shortcutHint && (_jsx(Box, { sx: {
+                        mt: 'auto',
+                        mb: 1,
+                        px: 1,
+                        py: '2px',
+                        bg: 'neutral.muted',
+                        color: 'fg.muted',
+                        borderRadius: 1,
+                        fontSize: 0,
+                    }, children: _jsx(Text, { sx: { fontSize: '10px', fontFamily: 'mono' }, children: shortcutHint }) }))] }));
+    }
+    // Mobile full-screen overlay
+    const mobileStyles = isMobile
+        ? {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: '100%',
+            height: '100%',
+            zIndex: 1000,
+        }
+        : {};
+    // Expanded state using ChatBase
+    return (_jsxs(_Fragment, { children: [isMobile && isOpen && (_jsx(Box, { sx: {
+                    position: 'fixed',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    bg: 'neutral.muted',
+                    opacity: 0.5,
+                    zIndex: 999,
+                }, onClick: handleToggle })), _jsx(Box, { ref: sidebarRef, className: className, sx: {
+                    position: 'relative',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    width: isMobile
+                        ? '100%'
+                        : typeof width === 'number'
+                            ? `${width}px`
+                            : width,
+                    height: '100%',
+                    bg: 'canvas.default',
+                    borderLeft: !isMobile && position === 'right' ? '1px solid' : 'none',
+                    borderRight: !isMobile && position === 'left' ? '1px solid' : 'none',
+                    borderColor: 'border.default',
+                    ...mobileStyles,
+                }, children: _jsx(ChatBase, { title: title, showHeader: showHeader, brandIcon: brandIcon, headerButtons: {
+                        showNewChat: showNewChatButton,
+                        showClear: showClearButton && messages.length > 0,
+                        showSettings: showSettingsButton,
+                        onNewChat: handleNewChat,
+                        onClear: handleClear,
+                        onSettings: onSettingsClick,
+                    }, headerActions: collapseButton, showPoweredBy: showPoweredBy, poweredByProps: {
+                        brandName: 'Datalayer',
+                        brandUrl: 'https://datalayer.ai',
+                        ...poweredByProps,
+                    }, avatarConfig: {
+                        showAvatars: true,
+                    }, placeholder: placeholder, description: description, onSendMessage: onSendMessage, enableStreaming: enableStreaming, ...panelProps, children: children }) })] }));
+}
+export default ChatSidebar;

package/lib/components/chat/components/ChatStandalone.d.ts

@@ -0,0 +1,105 @@
+/**
+ * Standalone Chat component.
+ * A floating chat window that uses props-based message handling.
+ * Perfect for custom integrations where you want full control over inference.
+ *
+ * This component uses ChatBase for all chat functionality and provides
+ * a floating popup wrapper with animation, positioning, and FAB button.
+ *
+ * @module components/chat/components/ChatStandalone
+ */
+import React from 'react';
+import { type ChatBaseProps, type RenderToolResult, type ToolCallRenderContext, type ToolCallStatus, type StreamingMessageOptions, type MessageHandler } from './base/ChatBase';
+import { type PoweredByTagProps } from './elements/PoweredByTag';
+export type { ToolCallStatus, ToolCallRenderContext, RenderToolResult, StreamingMessageOptions, MessageHandler, };
+/**
+ * ChatStandalone props
+ */
+export interface ChatStandaloneProps {
+    /**
+     * 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 */
+    defaultOpen?: boolean;
+    /** width */
+    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 */
+    buttonTooltip?: string;
+    /** Brand color */
+    brandColor?: string;
+    /** Offset from edge (in pixels) */
+    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;
+    /** 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, panelProps, }: ChatStandaloneProps): import("react/jsx-runtime").JSX.Element;
+export default ChatStandalone;

package/lib/components/chat/components/ChatStandalone.js

@@ -0,0 +1,320 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Standalone Chat component.
+ * A floating chat window that uses props-based message handling.
+ * Perfect for custom integrations where you want full control over inference.
+ *
+ * This component uses ChatBase for all chat functionality and provides
+ * a floating popup wrapper with animation, positioning, and FAB button.
+ *
+ * @module components/chat/components/ChatStandalone
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { IconButton, Text, Tooltip } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { XIcon, CommentDiscussionIcon } from '@primer/octicons-react';
+import { AiAgentIcon } from '@datalayer/icons-react';
+import { ChatBase, } from './base/ChatBase';
+import { PoweredByTag } from './elements/PoweredByTag';
+import { useChatOpen, useChatMessages, useChatStore } from '../store/chatStore';
+import { useChatKeyboardShortcuts, getShortcutDisplay, } from '../../../hooks/useKeyboardShortcuts';
+/**
+ * Hook to detect mobile viewport
+ */
+function useIsMobile(breakpoint = 640) {
+    const [isMobile, setIsMobile] = useState(false);
+    useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth < breakpoint);
+        };
+        checkMobile();
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, [breakpoint]);
+    return isMobile;
+}
+/**
+ * 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, panelProps, }) {
+    // Use Zustand store for state management
+    const isOpen = useChatOpen();
+    const messages = useChatMessages();
+    const setOpen = useChatStore(state => state.setOpen);
+    const clearMessages = useChatStore(state => state.clearMessages);
+    const popupRef = useRef(null);
+    const isMobile = useIsMobile();
+    const [isAnimating, setIsAnimating] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    // Focus trigger counter to refocus input after opening
+    const [focusTrigger, setFocusTrigger] = useState(0);
+    // Initialize open state from defaultOpen
+    useEffect(() => {
+        setOpen(defaultOpen);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Toggle popup with animation
+    const handleToggle = useCallback(() => {
+        const newOpen = !isOpen;
+        setIsAnimating(true);
+        if (newOpen) {
+            setOpen(newOpen);
+            onOpen?.();
+            // Trigger focus on input when opening
+            setTimeout(() => setFocusTrigger(prev => prev + 1), animationDuration);
+        }
+        else {
+            // Delay closing for animation
+            setTimeout(() => {
+                setOpen(newOpen);
+                onClose?.();
+                setIsAnimating(false);
+            }, animationDuration);
+        }
+        // Reset animating after duration
+        setTimeout(() => setIsAnimating(false), animationDuration);
+    }, [isOpen, setOpen, onOpen, onClose, animationDuration]);
+    // Handle new chat
+    const handleNewChat = useCallback(() => {
+        clearMessages();
+        onNewChat?.();
+    }, [clearMessages, onNewChat]);
+    // Handle clear
+    const handleClear = useCallback(() => {
+        if (window.confirm('Clear all messages?')) {
+            clearMessages();
+        }
+    }, [clearMessages]);
+    // Keyboard shortcuts
+    useChatKeyboardShortcuts({
+        onToggle: enableKeyboardShortcuts ? handleToggle : undefined,
+        onNewChat: enableKeyboardShortcuts ? handleNewChat : undefined,
+        onClear: enableKeyboardShortcuts && messages.length > 0 ? handleClear : undefined,
+        enabled: enableKeyboardShortcuts,
+    });
+    // Escape to close
+    useEffect(() => {
+        if (!escapeToClose || !isOpen)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                handleToggle();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [escapeToClose, isOpen, handleToggle]);
+    // Click outside to close
+    useEffect(() => {
+        if (!clickOutsideToClose || !isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            if (popupRef.current &&
+                !popupRef.current.contains(event.target)) {
+                handleToggle();
+            }
+        };
+        // Delay adding listener to prevent immediate close
+        const timeoutId = setTimeout(() => {
+            document.addEventListener('mousedown', handleClickOutside);
+        }, 100);
+        return () => {
+            clearTimeout(timeoutId);
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [clickOutsideToClose, isOpen, handleToggle]);
+    // Mobile body scroll lock
+    useEffect(() => {
+        if (isMobile && isOpen) {
+            document.body.style.overflow = 'hidden';
+            document.body.style.position = 'fixed';
+            document.body.style.width = '100%';
+            document.body.style.touchAction = 'none';
+            return () => {
+                document.body.style.overflow = '';
+                document.body.style.position = '';
+                document.body.style.width = '';
+                document.body.style.touchAction = '';
+            };
+        }
+    }, [isMobile, isOpen]);
+    // Position styles
+    const getPositionStyles = () => {
+        const styles = {
+            position: 'fixed',
+            zIndex: 1000,
+        };
+        switch (position) {
+            case 'bottom-right':
+                styles.bottom = offset;
+                styles.right = offset;
+                break;
+            case 'bottom-left':
+                styles.bottom = offset;
+                styles.left = offset;
+                break;
+            case 'top-right':
+                styles.top = offset;
+                styles.right = offset;
+                break;
+            case 'top-left':
+                styles.top = offset;
+                styles.left = offset;
+                break;
+        }
+        return styles;
+    };
+    // Animation transform based on position
+    const getAnimationTransform = (open) => {
+        if (open)
+            return 'scale(1) translateY(0)';
+        switch (position) {
+            case 'bottom-right':
+            case 'bottom-left':
+                return 'scale(0.95) translateY(20px)';
+            case 'top-right':
+            case 'top-left':
+                return 'scale(0.95) translateY(-20px)';
+            default:
+                return 'scale(0.95)';
+        }
+    };
+    // Shortcut hint for toggle
+    const shortcutHint = enableKeyboardShortcuts
+        ? getShortcutDisplay({
+            key: toggleShortcut,
+            ctrlOrCmd: true,
+            handler: () => { },
+        })
+        : undefined;
+    // Responsive dimensions
+    const popupWidth = isMobile ? '100%' : width;
+    const popupHeight = isMobile ? '100%' : height;
+    // Mobile full-screen styles
+    const mobileStyles = isMobile
+        ? {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: '100%',
+            height: '100%',
+            borderRadius: 0,
+        }
+        : {};
+    // Close button for header
+    const closeButton = (_jsx(Tooltip, { text: `Close${escapeToClose ? ' (Esc)' : ''}`, direction: "s", children: _jsx(IconButton, { icon: XIcon, "aria-label": "Close", onClick: handleToggle, variant: "invisible", size: "small" }) }));
+    return (_jsxs(_Fragment, { children: [showButton && !isOpen && (_jsx(Box, { sx: {
+                    ...getPositionStyles(),
+                }, children: _jsxs(Box, { sx: {
+                        position: 'relative',
+                        display: 'inline-flex',
+                    }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx(Tooltip, { text: `${buttonTooltip}${shortcutHint ? ` (${shortcutHint})` : ''}`, direction: position.includes('right') ? 'w' : 'e', children: _jsx(IconButton, { icon: buttonIcon
+                                    ? buttonIcon
+                                    : CommentDiscussionIcon, "aria-label": buttonTooltip, onClick: handleToggle, size: "large", sx: {
+                                    width: 56,
+                                    height: 56,
+                                    borderRadius: '50%',
+                                    bg: brandColor || 'accent.emphasis',
+                                    color: 'fg.onEmphasis',
+                                    boxShadow: 'shadow.large',
+                                    transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+                                    transform: isHovered ? 'scale(1.1)' : 'scale(1)',
+                                    '&:hover': {
+                                        bg: brandColor || 'accent.emphasis',
+                                        boxShadow: 'shadow.extra-large',
+                                    },
+                                } }) }), messages.length > 0 && (_jsx(Box, { sx: {
+                                position: 'absolute',
+                                top: -4,
+                                right: -4,
+                                minWidth: 20,
+                                height: 20,
+                                px: 1,
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                bg: 'danger.emphasis',
+                                color: 'fg.onEmphasis',
+                                borderRadius: '50%',
+                                fontSize: 0,
+                                fontWeight: 'bold',
+                            }, children: _jsx(Text, { sx: { fontSize: 0 }, children: messages.length > 99 ? '99+' : messages.length }) })), messages.length > 0 && (_jsx(Box, { sx: {
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                right: 0,
+                                bottom: 0,
+                                borderRadius: '50%',
+                                border: '2px solid',
+                                borderColor: brandColor || 'accent.emphasis',
+                                animation: 'pulse 2s infinite',
+                                '@keyframes pulse': {
+                                    '0%': {
+                                        transform: 'scale(1)',
+                                        opacity: 1,
+                                    },
+                                    '100%': {
+                                        transform: 'scale(1.5)',
+                                        opacity: 0,
+                                    },
+                                },
+                            } }))] }) })), isMobile && isOpen && (_jsx(Box, { sx: {
+                    position: 'fixed',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    bg: 'neutral.muted',
+                    opacity: 0.5,
+                    zIndex: 999,
+                }, onClick: handleToggle })), (isOpen || isAnimating) && (_jsxs(Box, { ref: popupRef, className: className, sx: {
+                    ...getPositionStyles(),
+                    width: isMobile
+                        ? '100%'
+                        : typeof popupWidth === 'number'
+                            ? `${popupWidth}px`
+                            : popupWidth,
+                    height: isMobile
+                        ? '100%'
+                        : typeof popupHeight === 'number'
+                            ? `${popupHeight}px`
+                            : popupHeight,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    bg: 'canvas.default',
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: isMobile ? 0 : '12px',
+                    boxShadow: '0 8px 30px rgba(0, 0, 0, 0.12)',
+                    overflow: 'hidden',
+                    transform: getAnimationTransform(isOpen),
+                    opacity: isOpen ? 1 : 0,
+                    transition: `transform ${animationDuration}ms ease, opacity ${animationDuration}ms ease`,
+                    zIndex: 1001,
+                    ...mobileStyles,
+                }, children: [_jsx(ChatBase, { title: title, showHeader: showHeader, showInput: true, showPoweredBy: false, useStore: true, onSendMessage: onSendMessage, enableStreaming: enableStreaming, brandIcon: brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), headerButtons: {
+                            showNewChat: showNewChatButton,
+                            showClear: showClearButton && messages.length > 0,
+                            showSettings: showSettingsButton,
+                            onNewChat: handleNewChat,
+                            onClear: handleClear,
+                            onSettings: onSettingsClick,
+                        }, headerActions: closeButton, renderToolResult: renderToolResult, description: description, placeholder: placeholder, emptyState: {
+                            title: emptyStateMessage,
+                        }, avatarConfig: {
+                            showAvatars: true,
+                        }, backgroundColor: "canvas.subtle", focusTrigger: focusTrigger, ...panelProps, children: children }), showPoweredBy && (_jsx(Box, { sx: {
+                            p: 2,
+                            borderTop: '1px solid',
+                            borderColor: 'border.default',
+                            bg: 'canvas.subtle',
+                        }, children: _jsx(PoweredByTag, { show: true, brandName: "Datalayer", brandUrl: "https://datalayer.ai", ...poweredByProps }) }))] }))] }));
+}
+export default ChatStandalone;