@datalayer/agent-runtimes 0.0.2

package/lib/components/chat/components/ChatFloating.js

@@ -0,0 +1,381 @@
+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.
+ */
+/**
+ * ChatFloating - A floating chat component.
+ *
+ * This component provides a floating chat popup that uses ChatBase
+ * for all chat functionality (messages, input, protocol support).
+ *
+ * Supports:
+ * 1. AG-UI mode: When `endpoint` is provided
+ * 2. Store mode: When `useStore` is true
+ * 3. Any protocol supported by ChatBase (AG-UI, A2A, ACP, Vercel AI)
+ *
+ * @module components/chat/components/ChatFloating
+ */
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { IconButton, Text, Tooltip } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { XIcon, CommentDiscussionIcon, SidebarExpandIcon, SidebarCollapseIcon, } from '@primer/octicons-react';
+import { AiAgentIcon } from '@datalayer/icons-react';
+import { ChatBase, } from './base/ChatBase';
+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;
+}
+/**
+ * ChatFloating component
+ * A floating chat window built on ChatBase
+ */
+export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor = '#7c3aed', offset = 20, animationDuration = 200, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', showPanelBackdrop = false, panelProps, }) {
+    // Store-based state
+    const storeIsOpen = useChatOpen();
+    const storeMessages = useChatMessages();
+    const setStoreOpen = useChatStore(state => state.setOpen);
+    const clearStoreMessages = useChatStore(state => state.clearMessages);
+    // Local state for non-store mode
+    const [localIsOpen, setLocalIsOpen] = useState(defaultOpen);
+    // Derived state
+    const isOpen = useStoreMode ? storeIsOpen : localIsOpen;
+    const setIsOpen = useStoreMode ? setStoreOpen : setLocalIsOpen;
+    const messages = storeMessages;
+    const popupRef = useRef(null);
+    const isMobile = useIsMobile();
+    const [isAnimating, setIsAnimating] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const [viewMode, setViewMode] = useState(defaultViewMode);
+    const [focusTrigger, setFocusTrigger] = useState(0);
+    // Build protocol config from endpoint if not provided directly
+    // Memoize to avoid creating new object on every render (which would trigger useEffect re-runs)
+    const protocol = useMemo(() => protocolProp ||
+        (endpoint
+            ? {
+                type: 'ag-ui',
+                endpoint,
+            }
+            : undefined), [protocolProp, endpoint]);
+    // Clear messages when endpoint/protocol changes (e.g., switching examples)
+    useEffect(() => {
+        clearStoreMessages();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [endpoint, protocolProp]);
+    // Initialize open state from defaultOpen
+    useEffect(() => {
+        setIsOpen(defaultOpen);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Toggle popup with animation
+    const handleToggle = useCallback(() => {
+        const newOpen = !isOpen;
+        setIsAnimating(true);
+        if (newOpen) {
+            setIsOpen(newOpen);
+            onOpen?.();
+        }
+        else {
+            // Delay closing for animation
+            setTimeout(() => {
+                setIsOpen(newOpen);
+                onClose?.();
+                setIsAnimating(false);
+            }, animationDuration);
+        }
+        // Reset animating after duration
+        setTimeout(() => setIsAnimating(false), animationDuration);
+    }, [isOpen, setIsOpen, onOpen, onClose, animationDuration]);
+    // Handle new chat
+    const handleNewChat = useCallback(() => {
+        if (useStoreMode) {
+            clearStoreMessages();
+        }
+        onNewChat?.();
+    }, [useStoreMode, clearStoreMessages, onNewChat]);
+    // Handle clear
+    const handleClear = useCallback(() => {
+        if (window.confirm('Clear all messages?')) {
+            if (useStoreMode) {
+                clearStoreMessages();
+            }
+        }
+    }, [useStoreMode, clearStoreMessages]);
+    // 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,
+        }
+        : {};
+    // Toggle view mode handler
+    const handleToggleViewMode = useCallback(() => {
+        setViewMode(prev => (prev === 'floating' ? 'panel' : 'floating'));
+        setFocusTrigger(prev => prev + 1);
+    }, []);
+    // View mode toggle button
+    const viewModeToggle = !isMobile && (_jsx(Tooltip, { text: viewMode === 'floating' ? 'Expand to panel' : 'Collapse to popup', direction: "s", children: _jsx(IconButton, { icon: viewMode === 'floating' ? SidebarExpandIcon : SidebarCollapseIcon, "aria-label": viewMode === 'floating' ? 'Expand to panel' : 'Collapse to popup', onClick: handleToggleViewMode, variant: "invisible", size: "small" }) }));
+    // 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: 0,
+                                right: 0,
+                                minWidth: 18,
+                                height: 18,
+                                px: 1,
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                bg: 'danger.emphasis',
+                                color: 'fg.onEmphasis',
+                                borderRadius: '50%',
+                                fontSize: 0,
+                                fontWeight: 'bold',
+                                pointerEvents: 'none',
+                            }, 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',
+                                pointerEvents: 'none',
+                                '@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 })), showPanelBackdrop && viewMode === 'panel' && isOpen && !isMobile && (_jsx(Box, { sx: {
+                    position: 'fixed',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    bg: 'neutral.muted',
+                    opacity: 0.3,
+                    zIndex: 1000,
+                }, onClick: handleToggle })), _jsx(Box, { ref: popupRef, className: className, sx: {
+                    position: 'fixed',
+                    ...(viewMode === 'floating' && !isMobile ? getPositionStyles() : {}),
+                    ...(viewMode === 'panel' && !isMobile
+                        ? {
+                            top: 0,
+                            right: 0,
+                            bottom: 0,
+                            left: 'auto',
+                        }
+                        : {}),
+                    width: viewMode === 'panel' && !isMobile
+                        ? '420px'
+                        : isMobile
+                            ? '100%'
+                            : typeof popupWidth === 'number'
+                                ? `${popupWidth}px`
+                                : popupWidth,
+                    height: viewMode === 'panel' && !isMobile
+                        ? 'auto'
+                        : isMobile
+                            ? '100%'
+                            : typeof popupHeight === 'number'
+                                ? `${popupHeight}px`
+                                : popupHeight,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    bg: 'canvas.default',
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: viewMode === 'panel' || isMobile ? 0 : '12px',
+                    boxShadow: viewMode === 'panel'
+                        ? '-4px 0 20px rgba(0, 0, 0, 0.15)'
+                        : '0 8px 30px rgba(0, 0, 0, 0.12)',
+                    overflow: 'hidden',
+                    transform: viewMode === 'panel'
+                        ? isOpen
+                            ? 'translateX(0)'
+                            : 'translateX(100%)'
+                        : getAnimationTransform(isOpen),
+                    opacity: viewMode === 'panel' ? 1 : isOpen ? 1 : 0,
+                    transition: `transform ${animationDuration}ms ease, opacity ${animationDuration}ms ease`,
+                    zIndex: 1001,
+                    // Hide from accessibility and pointer events when closed
+                    visibility: isOpen || isAnimating ? 'visible' : 'hidden',
+                    pointerEvents: isOpen ? 'auto' : 'none',
+                    ...mobileStyles,
+                }, children: _jsx(ChatBase, { title: title, showHeader: showHeader, useStore: useStoreMode, protocol: protocol, autoFocus: isOpen, focusTrigger: focusTrigger, 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: _jsxs(_Fragment, { children: [viewModeToggle, closeButton] }), showPoweredBy: showPoweredBy, poweredByProps: {
+                        brandName: 'Datalayer',
+                        brandUrl: 'https://datalayer.ai',
+                        ...poweredByProps,
+                    }, renderToolResult: renderToolResult, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, avatarConfig: {
+                        showAvatars: true,
+                    }, placeholder: "Type a message...", backgroundColor: "canvas.subtle", frontendTools: _tools, ...panelProps, children: children }) })] }));
+}
+export default ChatFloating;

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

@@ -0,0 +1,42 @@
+import type { TransportType } from '../types/protocol';
+/**
+ * Protocol configuration for ChatInline
+ */
+export interface ChatInlineProtocolConfig {
+    /** Protocol type (ag-ui, vercel-ai, etc.) */
+    type: TransportType;
+    /** Endpoint URL */
+    endpoint: string;
+    /** Authentication token */
+    authToken?: string;
+    /** Agent ID */
+    agentId?: string;
+    /** Additional options */
+    options?: Record<string, unknown>;
+}
+/**
+ * ChatInline component props
+ */
+export interface ChatInlineProps {
+    /** The selected text from the editor */
+    selectedText: string;
+    /** Protocol configuration for connecting to the agent */
+    protocol: ChatInlineProtocolConfig;
+    /** Callback when user wants to replace selection with AI result */
+    onReplaceSelection?: (text: string) => void;
+    /** Callback when user wants to insert AI result inline after selection */
+    onInsertInline?: (text: string) => void;
+    /** Callback when user wants to insert AI result as new paragraph */
+    onInsertBelow?: (text: string) => void;
+    /** Callback to close the inline chat */
+    onClose?: () => void;
+    /** Callback to save selection before input focus */
+    onSaveSelection?: () => void;
+    /** Callback to restore selection after input blur */
+    onRestoreSelection?: () => void;
+}
+/**
+ * ChatInline - Inline AI chat component for text selection assistance.
+ */
+export declare function ChatInline({ selectedText, protocol, onReplaceSelection, onInsertInline, onInsertBelow, onClose, onSaveSelection, onRestoreSelection, }: ChatInlineProps): JSX.Element;
+export default ChatInline;