@datalayer/agent-runtimes 0.0.2

package/lib/components/chat/components/index.js

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Component exports for chat.
+ *
+ * @module components/chat/components
+ */
+export { ChatMessages } from './elements/ChatMessages';
+export { ChatInputPrompt, } from './elements/ChatInputPrompt';
+export { ChatSidebar } from './ChatSidebar';
+export { ChatStandalone, } from './ChatStandalone';
+export { ChatBase, } from './base/ChatBase';
+export { AgentDetails } from './AgentDetails';
+export { ToolApprovalDialog, useToolApprovalDialog, } from './elements/ToolApprovalDialog';
+export { PoweredByTag } from './elements/PoweredByTag';
+export { FloatingBrandButton, } from './elements/FloatingBrandButton';
+// Connection state header
+export { ChatHeader, } from './elements/ChatHeader';
+// Message part renderer (for AI SDK UIMessage parts)
+export { MessagePart } from './elements/MessagePart';
+// Display components for message parts
+export { TextPart, ReasoningPart, ToolPart, DynamicToolPart, } from './parts';
+// Display components for message parts
+export { ToolCallDisplay } from './display';
+// Chat component (transport-agnostic)
+// Supports: 'acp', 'vercel-ai', 'ag-ui', 'a2a', 'vercel-ai-jupyter' transports
+export { Chat } from './Chat';
+// Floating chat component for AG-UI examples
+// Render pattern aligned with CopilotKit's useRenderToolCall
+export { ChatFloating, } from './ChatFloating';
+// Inline chat component for text selection AI assistance
+export { ChatInline, } from './ChatInline';

package/lib/components/chat/components/parts/DynamicToolPart.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Dynamic tool display component.
+ * Renders dynamic tool UI parts with placeholder/warning styling.
+ *
+ * @module components/chat/components/display/DynamicToolPart
+ */
+import type { DynamicToolUIPart } from 'ai';
+export interface DynamicToolPartProps {
+    /** Dynamic tool UI part data */
+    part: DynamicToolUIPart;
+}
+/**
+ * DynamicToolPart component for displaying dynamic tool UI.
+ *
+ * This is a placeholder component that displays a warning flash
+ * for dynamic tool parts. In a production application, this would
+ * render custom UI based on the tool's specification.
+ */
+export declare function DynamicToolPart({ part }: DynamicToolPartProps): import("react/jsx-runtime").JSX.Element;
+export default DynamicToolPart;

package/lib/components/chat/components/parts/DynamicToolPart.js

@@ -0,0 +1,13 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Text, Flash } from '@primer/react';
+/**
+ * DynamicToolPart component for displaying dynamic tool UI.
+ *
+ * This is a placeholder component that displays a warning flash
+ * for dynamic tool parts. In a production application, this would
+ * render custom UI based on the tool's specification.
+ */
+export function DynamicToolPart({ part }) {
+    return (_jsx(Flash, { variant: "warning", sx: { marginBottom: 2 }, children: _jsxs(Text, { children: ["Dynamic Tool: ", JSON.stringify(part)] }) }));
+}
+export default DynamicToolPart;

package/lib/components/chat/components/parts/ReasoningPart.d.ts

@@ -0,0 +1,17 @@
+export interface ReasoningPartProps {
+    /** Reasoning text content */
+    text: string;
+    /** Whether the response is currently streaming */
+    isStreaming: boolean;
+}
+/**
+ * ReasoningPart component for displaying AI reasoning/thinking.
+ *
+ * Features:
+ * - Collapsible section to reduce visual clutter
+ * - Auto-collapse after streaming ends
+ * - Visual indicator for streaming state
+ * - Markdown support for reasoning content
+ */
+export declare function ReasoningPart({ text, isStreaming }: ReasoningPartProps): import("react/jsx-runtime").JSX.Element;
+export default ReasoningPart;

package/lib/components/chat/components/parts/ReasoningPart.js

@@ -0,0 +1,69 @@
+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.
+ */
+/**
+ * Reasoning message part display component.
+ * Renders AI reasoning/thinking content with collapsible section.
+ *
+ * @module components/chat/components/display/ReasoningPart
+ */
+import React from 'react';
+import { Text, Button } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ChevronDownIcon } from '@primer/octicons-react';
+import { Streamdown } from 'streamdown';
+/**
+ * ReasoningPart component for displaying AI reasoning/thinking.
+ *
+ * Features:
+ * - Collapsible section to reduce visual clutter
+ * - Auto-collapse after streaming ends
+ * - Visual indicator for streaming state
+ * - Markdown support for reasoning content
+ */
+export function ReasoningPart({ text, isStreaming }) {
+    const [isExpanded, setIsExpanded] = React.useState(false);
+    // Auto-close after streaming ends (with delay)
+    React.useEffect(() => {
+        if (!isStreaming && isExpanded) {
+            const timer = setTimeout(() => {
+                setIsExpanded(false);
+            }, 1000);
+            return () => clearTimeout(timer);
+        }
+    }, [isStreaming, isExpanded]);
+    return (_jsxs(Box, { sx: { marginBottom: 3 }, children: [_jsxs(Button, { variant: "invisible", size: "small", onClick: () => setIsExpanded(!isExpanded), sx: {
+                    width: '100%',
+                    display: 'flex',
+                    gap: 2,
+                    justifyContent: 'flex-start',
+                    alignItems: 'center',
+                    paddingX: 0,
+                    paddingY: 1,
+                    color: 'fg.muted',
+                    border: 'none',
+                    '&:hover': {
+                        color: 'fg.default',
+                    },
+                }, children: [_jsx(Text, { sx: { fontSize: 1 }, children: "\uD83E\uDDE0" }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'normal' }, children: isStreaming ? 'Thinking...' : 'Reasoning' }), _jsx(Box, { as: "span", sx: {
+                            display: 'inline-flex',
+                            marginLeft: 'auto',
+                            transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
+                            transition: 'transform 0.2s',
+                        }, children: _jsx(ChevronDownIcon, {}) })] }), isExpanded && (_jsx(Box, { sx: {
+                    marginTop: 2,
+                    padding: 3,
+                    backgroundColor: 'canvas.inset',
+                    borderRadius: 2,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    fontSize: 1,
+                    lineHeight: 1.6,
+                    color: 'fg.muted',
+                    '& > *:first-child': { marginTop: 0 },
+                    '& > *:last-child': { marginBottom: 0 },
+                }, children: _jsx(Streamdown, { children: text }) }))] }));
+}
+export default ReasoningPart;

package/lib/components/chat/components/parts/TextPart.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Text message part display component.
+ * Renders text content with markdown support, copy button, and regenerate action.
+ *
+ * @module components/chat/components/display/TextPart
+ */
+import type { UIMessage } from 'ai';
+export interface TextPartProps {
+    /** Text content to display */
+    text: string;
+    /** Parent message object */
+    message: UIMessage;
+    /** Whether this is the last part in the message */
+    isLastPart: boolean;
+    /** Callback to regenerate the message */
+    onRegenerate: (id: string) => void;
+}
+/**
+ * TextPart component for rendering text content with markdown support.
+ *
+ * Features:
+ * - Markdown rendering via Streamdown
+ * - Copy button for assistant messages
+ * - Regenerate button for assistant messages
+ * - Syntax highlighting for code blocks
+ */
+export declare function TextPart({ text, message, isLastPart, onRegenerate, }: TextPartProps): import("react/jsx-runtime").JSX.Element;
+export default TextPart;

package/lib/components/chat/components/parts/TextPart.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, IconButton } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { CopyIcon, SyncIcon } from '@primer/octicons-react';
+import { Streamdown } from 'streamdown';
+/**
+ * TextPart component for rendering text content with markdown support.
+ *
+ * Features:
+ * - Markdown rendering via Streamdown
+ * - Copy button for assistant messages
+ * - Regenerate button for assistant messages
+ * - Syntax highlighting for code blocks
+ */
+export function TextPart({ text, message, isLastPart, onRegenerate, }) {
+    const copy = (text) => {
+        navigator.clipboard.writeText(text).catch((error) => {
+            console.error('Error copying text:', error);
+        });
+    };
+    return (_jsxs(Box, { sx: {
+            padding: 3,
+            borderRadius: 2,
+            backgroundColor: message.role === 'user' ? 'accent.subtle' : 'canvas.subtle',
+            marginBottom: 2,
+        }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'flex-start',
+                    marginBottom: 2,
+                }, children: [_jsx(Text, { sx: {
+                            fontWeight: 'bold',
+                            fontSize: 1,
+                            color: 'fg.muted',
+                            textTransform: 'uppercase',
+                        }, children: message.role === 'user' ? 'You' : 'Assistant' }), message.role === 'assistant' && isLastPart && (_jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [_jsx(IconButton, { icon: SyncIcon, "aria-label": "Regenerate", size: "small", variant: "invisible", onClick: () => onRegenerate(message.id) }), _jsx(IconButton, { icon: CopyIcon, "aria-label": "Copy", size: "small", variant: "invisible", onClick: () => copy(text) })] }))] }), _jsx(Box, { sx: {
+                    fontSize: 1,
+                    lineHeight: 1.6,
+                    '& > *:first-child': { marginTop: 0 },
+                    '& > *:last-child': { marginBottom: 0 },
+                    '& p': { marginTop: 0, marginBottom: '1em' },
+                    '& h1, & h2, & h3, & h4, & h5, & h6': {
+                        marginTop: '1em',
+                        marginBottom: '0.5em',
+                        fontWeight: 'bold',
+                    },
+                    '& ul, & ol': {
+                        marginTop: '0.5em',
+                        marginBottom: '0.5em',
+                        paddingLeft: '1.5em',
+                    },
+                    '& code': {
+                        backgroundColor: 'neutral.muted',
+                        padding: '2px 4px',
+                        borderRadius: 1,
+                        fontSize: '0.9em',
+                        fontFamily: 'mono',
+                    },
+                    '& pre': {
+                        backgroundColor: 'canvas.inset',
+                        padding: 3,
+                        borderRadius: 2,
+                        overflow: 'auto',
+                        marginTop: '1em',
+                        marginBottom: '1em',
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                    },
+                    '& pre code': {
+                        backgroundColor: 'transparent',
+                        padding: 0,
+                        fontSize: '0.875em',
+                    },
+                    '& blockquote': {
+                        borderLeft: '3px solid',
+                        borderColor: 'border.default',
+                        paddingLeft: 3,
+                        marginLeft: 0,
+                        color: 'fg.muted',
+                    },
+                    '& a': {
+                        color: 'accent.fg',
+                        textDecoration: 'underline',
+                    },
+                    '& table': {
+                        width: '100%',
+                        borderCollapse: 'collapse',
+                        marginTop: '1em',
+                        marginBottom: '1em',
+                    },
+                    '& th, & td': {
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        padding: 2,
+                        textAlign: 'left',
+                    },
+                    '& th': {
+                        backgroundColor: 'canvas.subtle',
+                        fontWeight: 'bold',
+                    },
+                }, children: _jsx(Streamdown, { children: text }) })] }));
+}
+export default TextPart;

package/lib/components/chat/components/parts/ToolPart.d.ts

@@ -0,0 +1,17 @@
+import type { ToolUIPart } from 'ai';
+export interface ToolPartProps {
+    /** Tool UI part data */
+    part: ToolUIPart;
+}
+/**
+ * ToolPart component for displaying tool execution.
+ *
+ * Features:
+ * - Collapsible display to reduce visual clutter
+ * - Status indicator (pending, running, completed, error)
+ * - JSON display for input parameters
+ * - JSON display for output/result
+ * - Error highlighting
+ */
+export declare function ToolPart({ part }: ToolPartProps): import("react/jsx-runtime").JSX.Element;
+export default ToolPart;

package/lib/components/chat/components/parts/ToolPart.js

@@ -0,0 +1,163 @@
+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.
+ */
+/**
+ * Tool call display component.
+ * Renders tool execution with input, output, and status.
+ *
+ * @module components/chat/components/display/ToolPart
+ */
+import React from 'react';
+import { Text, Button } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ChevronDownIcon } from '@primer/octicons-react';
+/**
+ * Get status info (label, color, icon) for tool state
+ */
+function getStatusInfo(state) {
+    const statusMap = {
+        call: { label: 'Pending', color: 'accent.fg', icon: '○' },
+        'input-streaming': { label: 'Pending', color: 'accent.fg', icon: '○' },
+        'input-available': {
+            label: 'Running',
+            color: 'attention.fg',
+            icon: '⏱',
+        },
+        executing: { label: 'Running', color: 'attention.fg', icon: '⏱' },
+        'output-available': {
+            label: 'Completed',
+            color: 'success.fg',
+            icon: '✓',
+        },
+        'output-error': { label: 'Error', color: 'danger.fg', icon: '✕' },
+        error: { label: 'Error', color: 'danger.fg', icon: '✕' },
+    };
+    return (statusMap[state] || {
+        label: state,
+        color: 'fg.muted',
+        icon: '•',
+    });
+}
+/**
+ * ToolPart component for displaying tool execution.
+ *
+ * Features:
+ * - Collapsible display to reduce visual clutter
+ * - Status indicator (pending, running, completed, error)
+ * - JSON display for input parameters
+ * - JSON display for output/result
+ * - Error highlighting
+ */
+export function ToolPart({ part }) {
+    const [isExpanded, setIsExpanded] = React.useState(true);
+    const statusInfo = getStatusInfo(part.state);
+    const toolName = part.type.split('-').slice(1).join('-') || part.type;
+    return (_jsxs(Box, { sx: {
+            marginBottom: 2,
+            border: '1px solid',
+            borderColor: 'border.default',
+            borderRadius: 2,
+            overflow: 'hidden',
+        }, children: [_jsxs(Button, { variant: "invisible", onClick: () => setIsExpanded(!isExpanded), sx: {
+                    width: '100%',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    padding: 3,
+                    backgroundColor: 'canvas.subtle',
+                    border: 'none',
+                    borderBottom: isExpanded ? '1px solid' : 'none',
+                    borderColor: 'border.default',
+                    textAlign: 'left',
+                    cursor: 'pointer',
+                    '&:hover': {
+                        backgroundColor: 'neutral.muted',
+                    },
+                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "\uD83D\uDD27" }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: toolName }), _jsxs(Box, { sx: {
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    gap: 1,
+                                    paddingX: 2,
+                                    paddingY: 1,
+                                    borderRadius: 2,
+                                    backgroundColor: 'neutral.subtle',
+                                    fontSize: 0,
+                                }, children: [_jsx(Text, { sx: { color: statusInfo.color }, children: statusInfo.icon }), _jsx(Text, { sx: { color: statusInfo.color, fontWeight: 'semibold' }, children: statusInfo.label })] })] }), _jsx(Box, { as: "span", sx: {
+                            display: 'inline-flex',
+                            transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
+                            transition: 'transform 0.2s',
+                        }, children: _jsx(ChevronDownIcon, {}) })] }), isExpanded && (_jsxs(Box, { children: [_jsxs(Box, { sx: {
+                            padding: 3,
+                            borderBottom: part.state === 'output-available' ||
+                                part.state === 'output-error'
+                                ? '1px solid'
+                                : 'none',
+                            borderColor: 'border.default',
+                        }, children: [_jsx(Text, { sx: {
+                                    display: 'block',
+                                    fontSize: 0,
+                                    fontWeight: 'semibold',
+                                    color: 'fg.muted',
+                                    textTransform: 'uppercase',
+                                    letterSpacing: '0.05em',
+                                    marginBottom: 2,
+                                }, children: "Parameters" }), _jsx(Box, { sx: {
+                                    backgroundColor: 'canvas.inset',
+                                    borderRadius: 2,
+                                    overflow: 'auto',
+                                    border: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: _jsx("pre", { style: {
+                                        margin: 0,
+                                        padding: '12px',
+                                        fontSize: '12px',
+                                        fontFamily: 'monospace',
+                                        lineHeight: 1.5,
+                                        overflow: 'auto',
+                                    }, children: JSON.stringify(part.input, null, 2) }) })] }), part.state === 'output-available' && (_jsxs(Box, { sx: { padding: 3 }, children: [_jsx(Text, { sx: {
+                                    display: 'block',
+                                    fontSize: 0,
+                                    fontWeight: 'semibold',
+                                    color: 'fg.muted',
+                                    textTransform: 'uppercase',
+                                    letterSpacing: '0.05em',
+                                    marginBottom: 2,
+                                }, children: "Result" }), _jsx(Box, { sx: {
+                                    backgroundColor: 'canvas.default',
+                                    borderRadius: 2,
+                                    overflow: 'auto',
+                                    border: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: _jsx("pre", { style: {
+                                        margin: 0,
+                                        padding: '12px',
+                                        fontSize: '12px',
+                                        fontFamily: 'monospace',
+                                        lineHeight: 1.5,
+                                        overflow: 'auto',
+                                    }, children: part.output
+                                        ? typeof part.output === 'string'
+                                            ? part.output
+                                            : JSON.stringify(part.output, null, 2)
+                                        : 'No output' }) })] })), part.state === 'output-error' &&
+                        'errorText' in part &&
+                        part.errorText && (_jsxs(Box, { sx: { padding: 3 }, children: [_jsx(Text, { sx: {
+                                    display: 'block',
+                                    fontSize: 0,
+                                    fontWeight: 'semibold',
+                                    color: 'danger.fg',
+                                    textTransform: 'uppercase',
+                                    letterSpacing: '0.05em',
+                                    marginBottom: 2,
+                                }, children: "Error" }), _jsx(Box, { sx: {
+                                    backgroundColor: 'danger.subtle',
+                                    borderRadius: 2,
+                                    overflow: 'auto',
+                                    border: '1px solid',
+                                    borderColor: 'danger.muted',
+                                    padding: 2,
+                                }, children: _jsx(Text, { sx: { fontSize: 0, color: 'danger.fg' }, children: part.errorText }) })] }))] }))] }));
+}
+export default ToolPart;

package/lib/components/chat/components/parts/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Display components barrel export.
+ *
+ * @module components/chat/components/parts
+ */
+export { TextPart, type TextPartProps } from './TextPart';
+export { ReasoningPart, type ReasoningPartProps } from './ReasoningPart';
+export { ToolPart, type ToolPartProps } from './ToolPart';
+export { DynamicToolPart, type DynamicToolPartProps } from './DynamicToolPart';

package/lib/components/chat/components/parts/index.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Display components barrel export.
+ *
+ * @module components/chat/components/parts
+ */
+export { TextPart } from './TextPart';
+export { ReasoningPart } from './ReasoningPart';
+export { ToolPart } from './ToolPart';
+export { DynamicToolPart } from './DynamicToolPart';

package/lib/components/chat/extensions/A2UIExtension.d.ts

@@ -0,0 +1,87 @@
+/**
+ * A2UI extension for chat component.
+ * Renders A2UI protocol messages from A2A agents.
+ *
+ * @module components/chat/extensions/A2UIExtension
+ */
+import React from 'react';
+import type { ActivityRendererExtension } from '../types/extension';
+import type { A2UIExtension as A2UIExtensionNamespace } from '../types/extension';
+import type { ChatMessage } from '../types/message';
+/**
+ * A2UI message types
+ */
+export interface A2UIMessage {
+    /** Begin rendering command */
+    beginRendering?: {
+        surface: string;
+        mimeType?: string;
+        surfaceDefinition?: unknown;
+    };
+    /** Surface update */
+    surfaceUpdate?: {
+        surface: string;
+        patch?: unknown;
+        replace?: unknown;
+    };
+    /** Data model update */
+    dataModelUpdate?: {
+        dataModel: string;
+        patch?: unknown;
+        replace?: unknown;
+    };
+    /** Finish rendering */
+    finishRendering?: {
+        surface: string;
+    };
+}
+/**
+ * Create A2UI activity renderer
+ */
+export declare function createA2UIRenderer(customRenderers?: Record<string, React.ComponentType<{
+    content: unknown;
+}>>): ActivityRendererExtension;
+/**
+ * A2UI Extension implementation class
+ */
+export declare class A2UIExtensionImpl implements ActivityRendererExtension {
+    readonly name = "a2ui";
+    readonly type: "activity-renderer";
+    readonly activityTypes: string[];
+    readonly priority = 10;
+    private contexts;
+    private customRenderers;
+    /**
+     * Register a custom renderer for a mime type
+     */
+    registerRenderer(mimeType: string, component: React.ComponentType<{
+        content: unknown;
+    }>): void;
+    /**
+     * Get the current surfaces for a session
+     */
+    getSurfaces(sessionId: string): Map<string, unknown>;
+    /**
+     * Get the current data models for a session
+     */
+    getDataModels(sessionId: string): Map<string, unknown>;
+    /**
+     * Process an A2UI message
+     */
+    processMessage(sessionId: string, message: A2UIMessage): void;
+    /**
+     * Clear a session's context
+     */
+    clearSession(sessionId: string): void;
+    /**
+     * Render method for the extension
+     */
+    render: ({ activityType: _activityType, data, message: _message, }: {
+        activityType: string;
+        data: unknown;
+        message: ChatMessage;
+    }) => React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | null;
+}
+export type { A2UIExtensionNamespace };