@datalayer/agent-runtimes 0.0.2

package/lib/components/chat/components/Chat.js

@@ -0,0 +1,275 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Chat - A transport-agnostic chat component.
+ *
+ * This component provides a unified interface for multiple agent transports,
+ * automatically configuring the appropriate inference provider and transport adapter.
+ *
+ * Supported transports:
+ * - ACP (Agent Client Protocol) - WebSocket-based with JSON-RPC 2.0
+ * - AG-UI - Pydantic AI's POST-based transport
+ * - A2A (Agent-to-Agent) - JSON-RPC for inter-agent communication
+ * - Vercel AI - HTTP/SSE streaming (via SelfHostedInferenceProvider)
+ * - Vercel AI Jupyter - Same as Vercel AI but served by Jupyter server
+ *
+ * @module components/chat/components/Chat
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { Text, Button, Spinner, IconButton } from '@primer/react';
+import { AlertIcon, SyncIcon, InfoIcon } from '@primer/octicons-react';
+import { Box } from '@datalayer/primer-addons';
+import { ChatBase } from './base/ChatBase';
+import { AgentDetails } from './AgentDetails';
+// Try to get Jupyter settings if available
+let getJupyterSettings;
+try {
+    // Dynamic import to avoid hard dependency on JupyterLab
+    const ServerConnection = require('@jupyterlab/services').ServerConnection;
+    getJupyterSettings = () => {
+        const settings = ServerConnection.makeSettings();
+        return {
+            baseUrl: settings.baseUrl,
+            token: settings.token || '',
+        };
+    };
+}
+catch {
+    // JupyterLab not available, try to read from page config
+    try {
+        const configEl = document.getElementById('jupyter-config-data');
+        if (configEl) {
+            const config = JSON.parse(configEl.textContent || '{}');
+            if (config.baseUrl) {
+                getJupyterSettings = () => ({
+                    baseUrl: config.baseUrl,
+                    token: config.token || '',
+                });
+            }
+        }
+    }
+    catch {
+        // No Jupyter config available
+    }
+}
+/**
+ * Get transport endpoint path
+ */
+function getEndpointPath(transport, agentId) {
+    switch (transport) {
+        case 'vercel-ai':
+            return `/api/v1/vercel-ai/${agentId}`;
+        case 'vercel-ai-jupyter':
+            // Jupyter server endpoint - same protocol as vercel-ai
+            // Note: no leading slash - will be joined with baseUrl that may have trailing slash
+            return 'agent_runtimes/chat';
+        case 'ag-ui':
+            return `/api/v1/ag-ui/${agentId}/`;
+        case 'a2a':
+            // A2A requires trailing slash
+            return `/api/v1/a2a/agents/${agentId}/`;
+        case 'acp':
+            return `/api/v1/acp/ws/${agentId}`;
+        default:
+            return `/api/v1/agents/${agentId}/chat`;
+    }
+}
+/**
+ * Map transport type to protocol type
+ */
+function getProtocolType(transport) {
+    switch (transport) {
+        case 'vercel-ai-jupyter':
+            return 'vercel-ai';
+        default:
+            return transport;
+    }
+}
+/**
+ * Chat Component
+ *
+ * A unified chat interface that supports multiple transports.
+ * Uses ChatBase internally for consistent UI and behavior.
+ *
+ * Note: Different transports connect to different servers:
+ * - vercel-ai, vercel-ai-jupyter: Connect to Jupyter server (default: localhost:8888)
+ * - ag-ui, acp, a2a: Connect to agent-runtimes server (default: localhost:8765)
+ *
+ * @example
+ * ```tsx
+ * // AG-UI Transport (connects to agent-runtimes server)
+ * <Chat
+ *   transport="ag-ui"
+ *   baseUrl="http://localhost:8765"
+ *   agentId="demo-agent"
+ * />
+ *
+ * // ACP Transport (WebSocket to agent-runtimes server)
+ * <Chat
+ *   transport="acp"
+ *   wsUrl="ws://localhost:8765/api/v1/acp/ws"
+ *   agentId="demo-agent"
+ * />
+ *
+ * // Vercel AI Transport (connects to Jupyter server)
+ * <Chat
+ *   transport="vercel-ai"
+ *   baseUrl="http://localhost:8888"
+ *   agentId="demo-agent"
+ * />
+ *
+ * // Vercel AI (Jupyter) Transport with model/tools selection
+ * <Chat
+ *   transport="vercel-ai-jupyter"
+ *   showModelSelector={true}
+ *   showToolsMenu={true}
+ * />
+ * ```
+ */
+export function Chat({ transport, extensions: _extensions, baseUrl = 'http://localhost:8765', wsUrl, agentId, placeholder = 'Type your message...', title, autoConnect: _autoConnect = true, streaming: _streaming = true, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height = '600px', showHeader = true, showModelSelector = true, showToolsMenu = true, clearOnMount: _clearOnMount = true, suggestions, submitOnSuggestionClick = true, description, autoFocus = false, }) {
+    const [error, setError] = useState(null);
+    const [isInitializing, setIsInitializing] = useState(true);
+    const [showDetails, setShowDetails] = useState(false);
+    const [messageCount, setMessageCount] = useState(0);
+    // Build protocol config based on transport
+    const protocolConfig = useMemo(() => {
+        try {
+            let endpoint;
+            let authToken;
+            let options;
+            switch (transport) {
+                case 'vercel-ai-jupyter': {
+                    // For vercel-ai-jupyter, try to get Jupyter settings
+                    let jupyterBaseUrl = baseUrl;
+                    if (getJupyterSettings) {
+                        try {
+                            const jupyterSettings = getJupyterSettings();
+                            jupyterBaseUrl = jupyterSettings.baseUrl;
+                            if (jupyterSettings.token) {
+                                authToken = jupyterSettings.token;
+                                options = {
+                                    headers: {
+                                        Authorization: `token ${jupyterSettings.token}`,
+                                        'X-XSRFToken': jupyterSettings.token,
+                                    },
+                                    fetchOptions: {
+                                        mode: 'cors',
+                                        credentials: 'include',
+                                    },
+                                };
+                            }
+                        }
+                        catch (err) {
+                            console.warn('[Chat] Could not get Jupyter settings:', err);
+                        }
+                    }
+                    // Properly join baseUrl and endpoint path
+                    const endpointPath = getEndpointPath(transport);
+                    endpoint = jupyterBaseUrl.endsWith('/')
+                        ? `${jupyterBaseUrl}${endpointPath}`
+                        : `${jupyterBaseUrl}/${endpointPath}`;
+                    break;
+                }
+                case 'acp': {
+                    endpoint = `${baseUrl}${getEndpointPath(transport, agentId)}`;
+                    const acpWsUrl = wsUrl ||
+                        `${baseUrl.replace('http', 'ws')}/api/v1/acp/ws/${agentId}`;
+                    options = { wsUrl: acpWsUrl };
+                    break;
+                }
+                default: {
+                    endpoint = `${baseUrl}${getEndpointPath(transport, agentId)}`;
+                    break;
+                }
+            }
+            return {
+                type: getProtocolType(transport),
+                endpoint,
+                agentId,
+                authToken,
+                options,
+                // Enable config query for all protocols to fetch models and tools
+                enableConfigQuery: true,
+                // For Jupyter-based transports, use Jupyter requestAPI (configEndpoint undefined)
+                // For FastAPI-based transports, use direct fetch to the configure endpoint
+                configEndpoint: transport === 'vercel-ai-jupyter'
+                    ? undefined // Use Jupyter requestAPI
+                    : `${baseUrl}/api/v1/configure`,
+            };
+        }
+        catch (err) {
+            console.error('[Chat] Error building protocol config:', err);
+            setError(err instanceof Error ? err.message : 'Failed to configure');
+            return undefined;
+        }
+    }, [transport, baseUrl, wsUrl, agentId]);
+    // Set initialized once protocol config is built
+    useEffect(() => {
+        if (protocolConfig) {
+            setIsInitializing(false);
+            setError(null);
+        }
+    }, [protocolConfig]);
+    // Handle reconnect
+    const handleReconnect = () => {
+        setError(null);
+        setIsInitializing(true);
+        // Force re-render by toggling initialization
+        setTimeout(() => setIsInitializing(false), 100);
+    };
+    // Handle new chat
+    const handleNewChat = () => {
+        onDisconnect?.();
+    };
+    // Render error state
+    if (error) {
+        return (_jsxs(Box, { className: className, sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height,
+                p: 4,
+                bg: 'canvas.default',
+            }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { mt: 3, color: 'danger.fg', fontSize: 2 }, children: "Connection Error" }), _jsx(Text, { sx: { mt: 1, color: 'fg.muted', fontSize: 1 }, children: error }), _jsx(Button, { variant: "primary", sx: { mt: 3 }, leadingVisual: SyncIcon, onClick: handleReconnect, children: "Retry" })] }));
+    }
+    // Render loading state
+    if (isInitializing || !protocolConfig) {
+        return (_jsxs(Box, { className: className, sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height,
+                p: 4,
+                bg: 'canvas.default',
+            }, children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { mt: 3, color: 'fg.muted' }, children: ["Connecting to ", transport.toUpperCase().replace('-', ' '), " agent..."] })] }));
+    }
+    // Show agent details view
+    if (showDetails) {
+        return (_jsx(Box, { className: className, sx: {
+                position: 'relative',
+                height,
+                bg: 'canvas.default',
+                display: 'flex',
+                flexDirection: 'column',
+            }, children: _jsx(AgentDetails, { name: title || 'AI Agent', protocol: transport, url: protocolConfig?.endpoint || baseUrl, messageCount: messageCount, agentId: agentId, onBack: () => setShowDetails(false) }) }));
+    }
+    return (_jsx(Box, { className: className, sx: {
+            position: 'relative',
+            height,
+            bg: 'canvas.default',
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: _jsx(ChatBase, { title: title, showHeader: showHeader, useStore: false, protocol: protocolConfig, placeholder: placeholder, description: description, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, autoFocus: autoFocus, headerContent: _jsx(IconButton, { icon: InfoIcon, "aria-label": "Agent details", variant: "invisible", size: "small", onClick: () => setShowDetails(true) }), showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, onNewChat: handleNewChat, onMessagesChange: messages => setMessageCount(messages.length), headerButtons: {
+                showNewChat: true,
+                showClear: true,
+                onNewChat: handleNewChat,
+            }, avatarConfig: {
+                showAvatars: true,
+            }, backgroundColor: "canvas.default" }) }));
+}
+export default Chat;

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

@@ -0,0 +1,146 @@
+/**
+ * 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 React from 'react';
+import { type ChatBaseProps, type RenderToolResult, type ToolCallRenderContext, type ToolCallStatus, type ProtocolConfig, type RespondCallback, type Suggestion } from './base/ChatBase';
+import type { PoweredByTagProps } from './elements/PoweredByTag';
+export type { ToolCallStatus, ToolCallRenderContext, RenderToolResult, RespondCallback, Suggestion, };
+/**
+ * ChatFloating props
+ */
+export interface ChatFloatingProps {
+    /**
+     * AG-UI endpoint URL (e.g., http://localhost:8000/api/v1/examples/agentic_chat/).
+     * When provided with useStore=false, enables AG-UI protocol mode.
+     */
+    endpoint?: string;
+    /**
+     * Protocol configuration for other protocols (A2A, ACP, Vercel AI).
+     * Takes precedence over endpoint when provided.
+     */
+    protocol?: ProtocolConfig;
+    /**
+     * Use Zustand store for state management instead of protocol endpoint.
+     * @default false
+     */
+    useStore?: boolean;
+    /** 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;
+    /** 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;
+    /** Callback for state updates (for shared state example) */
+    onStateUpdate?: (state: unknown) => 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;
+    /**
+     * Custom render function for tool results.
+     * When provided, tool calls will be rendered inline in the chat
+     * using this function instead of being hidden.
+     */
+    renderToolResult?: RenderToolResult;
+    /** Custom tools to register (for tool-based examples) */
+    tools?: Array<{
+        name: string;
+        description: string;
+        parameters?: Record<string, unknown>;
+        handler: (args: unknown) => Promise<unknown>;
+    }>;
+    /** Initial state (for shared state example) */
+    initialState?: Record<string, unknown>;
+    /**
+     * Suggestions to show in empty state.
+     * When clicked, the suggestion message is populated in the input.
+     */
+    suggestions?: Suggestion[];
+    /**
+     * Whether to automatically submit the message when a suggestion is clicked.
+     * @default true
+     */
+    submitOnSuggestionClick?: boolean;
+    /**
+     * Whether to hide assistant messages that follow a rendered tool call UI.
+     * @default false
+     */
+    hideMessagesAfterToolUI?: boolean;
+    /**
+     * Default view mode.
+     * @default 'floating'
+     */
+    defaultViewMode?: 'floating' | 'panel';
+    /**
+     * Show backdrop overlay in panel mode.
+     * When true, a semi-transparent overlay covers the page behind the panel.
+     * @default false
+     */
+    showPanelBackdrop?: boolean;
+    /** Additional ChatBase props */
+    panelProps?: Partial<ChatBaseProps>;
+}
+/**
+ * ChatFloating component
+ * A floating chat window built on ChatBase
+ */
+export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, offset, animationDuration, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, showPanelBackdrop, panelProps, }: ChatFloatingProps): import("react/jsx-runtime").JSX.Element;
+export default ChatFloating;