@datalayer/agent-runtimes 0.0.2

package/lib/components/chat/components/ChatInline.js

@@ -0,0 +1,327 @@
+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.
+ */
+/**
+ * ChatInline - Inline chat component for text selection AI assistance.
+ *
+ * This component provides an inline AI chat interface that appears when
+ * text is selected in a Lexical editor. It supports:
+ * - Custom prompts via text input
+ * - Pre-defined AI actions (improve, summarize, translate, etc.)
+ * - Streaming responses from an agent via AG-UI protocol
+ * - Actions to apply AI results (replace, insert inline, insert below)
+ *
+ * Uses Primer UI components instead of Tailwind CSS.
+ *
+ * @module components/chat/components/ChatInline
+ */
+import { useState, useCallback, useMemo, useRef, useEffect, Fragment, } from 'react';
+import { Text, TextInput, IconButton, ActionList, Spinner, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { CopyIcon, ArrowLeftIcon, SyncIcon, TrashIcon, CheckIcon, PlusIcon, PencilIcon, XIcon, } from '@primer/octicons-react';
+import { SparklesIcon } from '@datalayer/icons-react';
+import { AGUIAdapter } from '../protocols';
+import { generateMessageId } from '../types/message';
+/**
+ * Pre-defined AI action groups
+ */
+const AI_OPTIONS_GROUPS = [
+    {
+        text: 'Modify selection',
+        options: [
+            {
+                text: 'Improve writing',
+                prompt: 'Improve the quality of the text',
+                icon: _jsx(PencilIcon, { size: 14 }),
+            },
+            {
+                text: 'Fix mistakes',
+                prompt: 'Fix any typos or general errors in the text',
+                icon: _jsx(CheckIcon, { size: 14 }),
+            },
+            {
+                text: 'Simplify',
+                prompt: 'Shorten the text, simplifying it',
+                icon: _jsx(XIcon, { size: 14 }),
+            },
+            {
+                text: 'Add more detail',
+                prompt: 'Lengthen the text, going into more detail',
+                icon: _jsx(PlusIcon, { size: 14 }),
+            },
+        ],
+    },
+    {
+        text: 'Generate',
+        options: [
+            {
+                text: 'Summarise',
+                prompt: 'Summarise the text',
+                icon: _jsx(CopyIcon, { size: 14 }),
+            },
+            {
+                text: 'Translate into…',
+                children: [
+                    'Arabic',
+                    'Chinese',
+                    'Dutch',
+                    'English',
+                    'French',
+                    'German',
+                    'Japanese',
+                    'Korean',
+                    'Portuguese',
+                    'Spanish',
+                ].map(lang => ({
+                    text: lang,
+                    prompt: `Translate text into the ${lang} language`,
+                })),
+                icon: _jsx(SyncIcon, { size: 14 }),
+            },
+            {
+                text: 'Explain',
+                prompt: 'Explain what the text is about',
+                icon: _jsx(CheckIcon, { size: 14 }),
+            },
+        ],
+    },
+];
+/**
+ * ChatInline - Inline AI chat component for text selection assistance.
+ */
+export function ChatInline({ selectedText, protocol, onReplaceSelection, onInsertInline, onInsertBelow, onClose, onSaveSelection, onRestoreSelection, }) {
+    // Input state
+    const [input, setInput] = useState('');
+    // AI state
+    const [aiState, setAiState] = useState('initial');
+    // AI response content
+    const [aiResponse, setAiResponse] = useState('');
+    // Previous prompt for regeneration
+    const [previousPrompt, setPreviousPrompt] = useState('');
+    // Current page in options menu (for sub-menus like translate)
+    const [pages, setPages] = useState([]);
+    // Error state
+    const [error, setError] = useState(null);
+    // Protocol adapter ref
+    const adapterRef = useRef(null);
+    const unsubscribeRef = useRef(null);
+    // Current page
+    const page = pages[pages.length - 1];
+    // Get selected option for sub-pages
+    const selectedOption = useMemo(() => {
+        return AI_OPTIONS_GROUPS.flatMap(group => group.options)
+            .flatMap(option => option.children ? [option, ...option.children] : [option])
+            .find(option => option.text === page);
+    }, [page]);
+    // Initialize protocol adapter
+    useEffect(() => {
+        if (!protocol)
+            return;
+        const adapter = new AGUIAdapter({
+            type: protocol.type,
+            baseUrl: protocol.endpoint,
+            authToken: protocol.authToken,
+            agentId: protocol.agentId,
+            ...protocol.options,
+        });
+        adapterRef.current = adapter;
+        // Subscribe to events
+        unsubscribeRef.current = adapter.subscribe((event) => {
+            switch (event.type) {
+                case 'message':
+                    if (event.message?.content) {
+                        setAiResponse(typeof event.message.content === 'string'
+                            ? event.message.content
+                            : '');
+                    }
+                    break;
+                case 'error':
+                    console.error('[ChatInline] Protocol error:', event.error);
+                    setError(event.error?.message || 'Unknown error');
+                    setAiState('initial');
+                    break;
+            }
+        });
+        // Connect
+        adapter.connect().catch(console.error);
+        return () => {
+            unsubscribeRef.current?.();
+            adapterRef.current?.disconnect();
+        };
+    }, [protocol]);
+    // Submit prompt to AI
+    const submitPrompt = useCallback(async (prompt) => {
+        if (!adapterRef.current) {
+            setError('No adapter available');
+            return;
+        }
+        setAiState('loading');
+        setInput('');
+        setPreviousPrompt(prompt);
+        setError(null);
+        setAiResponse('');
+        // Build system message with selected text context
+        const systemContext = `Do not surround your answer in quote marks. Only return the answer, nothing else. The user is selecting this text:
+
+"""
+${selectedText || ''}
+"""
+`;
+        // Create system message with context
+        const systemMessage = {
+            id: generateMessageId(),
+            role: 'system',
+            content: systemContext,
+            createdAt: new Date(),
+        };
+        // Create user message
+        const userMessage = {
+            id: generateMessageId(),
+            role: 'user',
+            content: prompt,
+            createdAt: new Date(),
+        };
+        try {
+            await adapterRef.current.sendMessage(userMessage, {
+                messages: [systemMessage, userMessage],
+            });
+            setAiState('complete');
+        }
+        catch (err) {
+            console.error('[ChatInline] Send error:', err);
+            setError(err.message);
+            setAiState('initial');
+        }
+    }, [selectedText]);
+    // Handle form submission
+    const handleSubmit = useCallback((e) => {
+        e.preventDefault();
+        if (input.trim()) {
+            submitPrompt(input);
+            onRestoreSelection?.();
+        }
+    }, [input, submitPrompt, onRestoreSelection]);
+    // Handle copy to clipboard
+    const handleCopy = useCallback(async () => {
+        if (aiResponse) {
+            try {
+                await navigator.clipboard.writeText(aiResponse);
+            }
+            catch (err) {
+                console.error('Failed to copy:', err);
+            }
+        }
+    }, [aiResponse]);
+    // Handle replace selection
+    const handleReplace = useCallback(() => {
+        if (aiResponse) {
+            onReplaceSelection?.(aiResponse);
+            onClose?.();
+        }
+    }, [aiResponse, onReplaceSelection, onClose]);
+    // Handle insert inline
+    const handleInsertInline = useCallback(() => {
+        if (aiResponse) {
+            onInsertInline?.(aiResponse);
+            onClose?.();
+        }
+    }, [aiResponse, onInsertInline, onClose]);
+    // Handle insert below
+    const handleInsertBelow = useCallback(() => {
+        if (aiResponse) {
+            onInsertBelow?.(aiResponse);
+            onClose?.();
+        }
+    }, [aiResponse, onInsertBelow, onClose]);
+    // Handle regenerate
+    const handleRegenerate = useCallback(() => {
+        if (previousPrompt) {
+            submitPrompt(previousPrompt);
+        }
+    }, [previousPrompt, submitPrompt]);
+    // Handle back to options
+    const handleBackToOptions = useCallback(() => {
+        setAiState('initial');
+        setAiResponse('');
+    }, []);
+    // Handle discard
+    const handleDiscard = useCallback(() => {
+        onClose?.();
+    }, [onClose]);
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1,
+            width: '100%',
+        }, children: [_jsxs(Box, { sx: {
+                    borderRadius: '12px',
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    boxShadow: 'shadow.large',
+                    bg: 'canvas.default',
+                    overflow: 'hidden',
+                }, onMouseDown: e => {
+                    e.preventDefault();
+                    onSaveSelection?.();
+                }, onMouseUp: () => {
+                    onRestoreSelection?.();
+                }, children: [aiResponse && (_jsxs(Box, { sx: {
+                            p: 2,
+                            borderBottom: '1px solid',
+                            borderColor: 'border.default',
+                            maxHeight: '130px',
+                            overflow: 'auto',
+                            position: 'relative',
+                        }, children: [_jsx(Box, { sx: {
+                                    position: 'absolute',
+                                    top: 1,
+                                    right: 1,
+                                }, children: _jsx(IconButton, { icon: CopyIcon, "aria-label": "Copy", variant: "invisible", size: "small", onClick: handleCopy, sx: { opacity: 0.5, '&:hover': { opacity: 1 } } }) }), _jsx(Text, { sx: {
+                                    whiteSpace: 'pre-wrap',
+                                    fontSize: 1,
+                                    pr: 4,
+                                }, children: aiResponse })] })), _jsxs(Box, { as: "form", onSubmit: handleSubmit, sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 1,
+                            p: 1,
+                        }, children: [_jsx(TextInput, { value: input, onChange: e => setInput(e.target.value), placeholder: aiState === 'loading' ? 'Writing…' : 'Custom prompt…', disabled: aiState === 'loading', sx: { flex: 1 }, onMouseDown: e => {
+                                    e.stopPropagation();
+                                    onSaveSelection?.();
+                                }, onMouseUp: e => e.stopPropagation() }), _jsx(IconButton, { type: "submit", icon: () => (_jsx(SparklesIcon, { style: aiState === 'loading' ? { opacity: 0.6 } : {} })), "aria-label": "Send", disabled: aiState === 'loading' || !input.trim(), variant: "invisible" })] }), error && (_jsx(Box, { sx: { px: 2, pb: 2 }, children: _jsx(Text, { sx: { color: 'danger.fg', fontSize: 0 }, children: error }) }))] }), aiState !== 'loading' && (_jsx(Box, { sx: {
+                    borderRadius: '12px',
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    boxShadow: 'shadow.large',
+                    bg: 'canvas.default',
+                    maxWidth: '220px',
+                    maxHeight: '360px',
+                    overflow: 'auto',
+                }, onMouseDown: e => e.preventDefault(), children: _jsxs(ActionList, { children: [aiResponse && !page && aiState === 'complete' && (_jsxs(_Fragment, { children: [_jsxs(ActionList.Item, { onSelect: handleReplace, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(SyncIcon, { size: 14 }) }), "Replace selection"] }), _jsxs(ActionList.Item, { onSelect: handleInsertInline, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PlusIcon, { size: 14 }) }), "Add text inline"] }), _jsxs(ActionList.Item, { onSelect: handleInsertBelow, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PlusIcon, { size: 14 }) }), "Add below paragraph"] }), _jsx(ActionList.Divider, {}), _jsxs(ActionList.Group, { title: "Modify further", children: [_jsxs(ActionList.Item, { onSelect: handleRegenerate, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(SyncIcon, { size: 14 }) }), "Regenerate"] }), _jsxs(ActionList.Item, { onSelect: handleBackToOptions, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(ArrowLeftIcon, { size: 14 }) }), "Other options"] })] }), _jsx(ActionList.Divider, {}), _jsxs(ActionList.Item, { onSelect: handleDiscard, variant: "danger", children: [_jsx(ActionList.LeadingVisual, { children: _jsx(TrashIcon, { size: 14 }) }), "Discard"] })] })), aiState === 'initial' && (_jsxs(_Fragment, { children: [page ? (
+                                // Back button when on sub-page
+                                _jsxs(ActionList.Item, { onSelect: () => setPages([]), children: [_jsx(ActionList.LeadingVisual, { children: _jsx(ArrowLeftIcon, { size: 14 }) }), "Back"] })) : (
+                                // Main options
+                                AI_OPTIONS_GROUPS.map((group, index) => (_jsxs(Fragment, { children: [index !== 0 && _jsx(ActionList.Divider, {}), _jsx(ActionList.Group, { title: group.text, children: group.options.map(option => option.prompt ? (
+                                            // Option with direct prompt
+                                            _jsxs(ActionList.Item, { onSelect: () => {
+                                                    if (option.prompt) {
+                                                        submitPrompt(option.prompt);
+                                                    }
+                                                    setPages([]);
+                                                }, children: [option.icon && (_jsx(ActionList.LeadingVisual, { children: option.icon })), option.text] }, option.text)) : (
+                                            // Option that opens sub-menu
+                                            _jsxs(ActionList.Item, { onSelect: () => setPages([...pages, option.text]), children: [option.icon && (_jsx(ActionList.LeadingVisual, { children: option.icon })), option.text] }, option.text))) })] }, group.text)))), selectedOption?.children?.map(option => (_jsxs(ActionList.Item, { onSelect: () => {
+                                        if (option.prompt) {
+                                            submitPrompt(option.prompt);
+                                        }
+                                        setPages([]);
+                                    }, children: [option.icon && (_jsx(ActionList.LeadingVisual, { children: option.icon })), option.text] }, option.text)))] }))] }) })), aiState === 'loading' && (_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    py: 2,
+                }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { ml: 2, color: 'fg.muted', fontSize: 1 }, children: "Generating..." })] }))] }));
+}
+export default ChatInline;

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

@@ -0,0 +1,110 @@
+/**
+ * Standalone Chat Popup 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/ChatPopupStandalone
+ */
+import React from 'react';
+import { type ChatBaseProps, type RenderToolResult, type ToolCallRenderContext, type ToolCallStatus } from './base/ChatBase';
+import { type PoweredByTagProps } from './elements/PoweredByTag';
+export type { ToolCallStatus, ToolCallRenderContext, RenderToolResult };
+/**
+ * Simple message handler type for standalone usage
+ */
+export type MessageHandler = (message: string, options?: {
+    onChunk?: (chunk: string) => void;
+    onComplete?: (fullResponse: string) => void;
+    onError?: (error: Error) => void;
+    signal?: AbortSignal;
+}) => Promise<string>;
+/**
+ * ChatPopupStandalone props
+ */
+export interface ChatPopupStandaloneProps {
+    /**
+     * Handler for sending messages - REQUIRED.
+     * This function will be called when the user sends a message.
+     */
+    onSendMessage: MessageHandler;
+    /** Popup 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;
+    /** Popup width */
+    width?: number | string;
+    /** Popup 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>;
+}
+/**
+ * ChatPopupStandalone component
+ * A floating popup chat that uses ChatBase with custom onSendMessage handler
+ */
+export declare function ChatPopupStandalone({ 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, }: ChatPopupStandaloneProps): import("react/jsx-runtime").JSX.Element;
+export default ChatPopupStandalone;