@datalayer/agent-runtimes 0.0.2

package/lib/components/chat/components/display/ToolCallDisplay.d.ts

@@ -0,0 +1,26 @@
+import type { ToolCallStatus } from '../base/ChatBase';
+export interface ToolCallDisplayProps {
+    /** Tool call ID */
+    toolCallId: string;
+    /** Tool name */
+    toolName: string;
+    /** Tool arguments */
+    args: Record<string, unknown>;
+    /** Tool result (when complete) */
+    result?: unknown;
+    /** Current status */
+    status: ToolCallStatus;
+    /** Error message if failed */
+    error?: string;
+}
+/**
+ * ToolCallDisplay component - Default display for tool calls in chat
+ *
+ * Features:
+ * - Collapsible design (starts collapsed)
+ * - Shows tool name, status icon, and brief summary when collapsed
+ * - Expands to show full parameters and results
+ * - Color-coded status indicators
+ */
+export declare function ToolCallDisplay({ toolCallId, toolName, args, result, status, error, }: ToolCallDisplayProps): import("react/jsx-runtime").JSX.Element;
+export default ToolCallDisplay;

package/lib/components/chat/components/display/ToolCallDisplay.js

@@ -0,0 +1,225 @@
+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.
+ */
+/**
+ * Default tool call display component.
+ * Shows tool execution with collapsible details.
+ *
+ * @module components/chat/components/display/ToolCallDisplay
+ */
+import { useState } from 'react';
+import { Text, Spinner } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ChevronDownIcon, ChevronRightIcon, ToolsIcon, CheckCircleIcon, XCircleIcon, ClockIcon, } from '@primer/octicons-react';
+/**
+ * Get status icon and color based on tool call status
+ */
+function getStatusDisplay(status) {
+    switch (status) {
+        case 'inProgress':
+            return {
+                icon: _jsx(Spinner, { size: "small" }),
+                color: 'attention.fg',
+                label: 'Preparing...',
+                bgColor: 'attention.subtle',
+            };
+        case 'executing':
+            return {
+                icon: _jsx(ClockIcon, { size: 14 }),
+                color: 'attention.fg',
+                label: 'Executing...',
+                bgColor: 'attention.subtle',
+            };
+        case 'complete':
+            return {
+                icon: _jsx(CheckCircleIcon, { size: 14 }),
+                color: 'success.fg',
+                label: 'Complete',
+                bgColor: 'success.subtle',
+            };
+        case 'error':
+            return {
+                icon: _jsx(XCircleIcon, { size: 14 }),
+                color: 'danger.fg',
+                label: 'Failed',
+                bgColor: 'danger.subtle',
+            };
+        default:
+            return {
+                icon: _jsx(ToolsIcon, { size: 14 }),
+                color: 'fg.muted',
+                label: status,
+                bgColor: 'neutral.subtle',
+            };
+    }
+}
+/**
+ * Format tool name for display (convert snake_case to Title Case)
+ */
+function formatToolName(name) {
+    return name
+        .replace(/_/g, ' ')
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(' ');
+}
+/**
+ * Get a brief summary of the tool arguments
+ */
+function getArgsSummary(args) {
+    const entries = Object.entries(args);
+    if (entries.length === 0)
+        return 'No parameters';
+    const summary = entries
+        .slice(0, 2)
+        .map(([key, value]) => {
+        const strValue = typeof value === 'string'
+            ? value.slice(0, 30) + (value.length > 30 ? '...' : '')
+            : typeof value === 'object'
+                ? JSON.stringify(value).slice(0, 30) + '...'
+                : String(value);
+        return `${key}: ${strValue}`;
+    })
+        .join(', ');
+    if (entries.length > 2) {
+        return `${summary} (+${entries.length - 2} more)`;
+    }
+    return summary;
+}
+/**
+ * ToolCallDisplay component - Default display for tool calls in chat
+ *
+ * Features:
+ * - Collapsible design (starts collapsed)
+ * - Shows tool name, status icon, and brief summary when collapsed
+ * - Expands to show full parameters and results
+ * - Color-coded status indicators
+ */
+export function ToolCallDisplay({ toolCallId, toolName, args, result, status, error, }) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const statusDisplay = getStatusDisplay(status);
+    const displayName = formatToolName(toolName);
+    const argsSummary = getArgsSummary(args);
+    return (_jsxs(Box, { sx: {
+            width: '100%',
+            border: '1px solid',
+            borderColor: 'border.default',
+            borderRadius: '12px',
+            overflow: 'hidden',
+            backgroundColor: 'canvas.default',
+        }, children: [_jsxs(Box, { as: "button", onClick: () => setIsExpanded(!isExpanded), sx: {
+                    width: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 2,
+                    padding: 2,
+                    backgroundColor: 'canvas.subtle',
+                    border: 'none',
+                    borderBottom: isExpanded ? '1px solid' : 'none',
+                    borderColor: 'border.default',
+                    cursor: 'pointer',
+                    textAlign: 'left',
+                    '&:hover': {
+                        backgroundColor: 'neutral.muted',
+                    },
+                }, children: [_jsx(Box, { sx: { color: 'fg.muted', flexShrink: 0 }, children: isExpanded ? (_jsx(ChevronDownIcon, { size: 16 })) : (_jsx(ChevronRightIcon, { size: 16 })) }), _jsx(Box, { sx: { color: 'fg.muted', flexShrink: 0 }, children: _jsx(ToolsIcon, { size: 16 }) }), _jsx(Text, { sx: {
+                            fontWeight: 'semibold',
+                            fontSize: 1,
+                            color: 'fg.default',
+                            flexShrink: 0,
+                        }, children: displayName }), _jsxs(Box, { sx: {
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: 1,
+                            px: 2,
+                            py: '2px',
+                            borderRadius: 2,
+                            backgroundColor: statusDisplay.bgColor,
+                            flexShrink: 0,
+                        }, children: [_jsx(Box, { sx: { color: statusDisplay.color, display: 'flex' }, children: statusDisplay.icon }), _jsx(Text, { sx: {
+                                    fontSize: 0,
+                                    fontWeight: 'medium',
+                                    color: statusDisplay.color,
+                                }, children: statusDisplay.label })] }), !isExpanded && (_jsx(Text, { sx: {
+                            fontSize: 0,
+                            color: 'fg.muted',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            flex: 1,
+                            minWidth: 0,
+                        }, children: argsSummary }))] }), isExpanded && (_jsxs(Box, { sx: { p: 3 }, children: [_jsxs(Box, { sx: { mb: result !== undefined || error ? 3 : 0 }, children: [_jsx(Text, { sx: {
+                                    display: 'block',
+                                    fontSize: 0,
+                                    fontWeight: 'semibold',
+                                    color: 'fg.muted',
+                                    textTransform: 'uppercase',
+                                    letterSpacing: '0.05em',
+                                    mb: 2,
+                                }, children: "Parameters" }), _jsx(Box, { sx: {
+                                    backgroundColor: 'canvas.inset',
+                                    borderRadius: 2,
+                                    border: '1px solid',
+                                    borderColor: 'border.default',
+                                    overflow: 'auto',
+                                    maxHeight: '200px',
+                                }, children: _jsx("pre", { style: {
+                                        margin: 0,
+                                        padding: '12px',
+                                        fontSize: '12px',
+                                        fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+                                        lineHeight: 1.5,
+                                        whiteSpace: 'pre-wrap',
+                                        wordBreak: 'break-word',
+                                    }, children: Object.keys(args).length > 0
+                                        ? JSON.stringify(args, null, 2)
+                                        : '(no parameters)' }) })] }), status === 'complete' && result !== undefined && (_jsxs(Box, { children: [_jsx(Text, { sx: {
+                                    display: 'block',
+                                    fontSize: 0,
+                                    fontWeight: 'semibold',
+                                    color: 'success.fg',
+                                    textTransform: 'uppercase',
+                                    letterSpacing: '0.05em',
+                                    mb: 2,
+                                }, children: "Result" }), _jsx(Box, { sx: {
+                                    backgroundColor: 'success.subtle',
+                                    borderRadius: 2,
+                                    border: '1px solid',
+                                    borderColor: 'success.muted',
+                                    overflow: 'auto',
+                                    maxHeight: '300px',
+                                }, children: _jsx("pre", { style: {
+                                        margin: 0,
+                                        padding: '12px',
+                                        fontSize: '12px',
+                                        fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+                                        lineHeight: 1.5,
+                                        whiteSpace: 'pre-wrap',
+                                        wordBreak: 'break-word',
+                                    }, children: typeof result === 'string'
+                                        ? result
+                                        : JSON.stringify(result, null, 2) }) })] })), status === 'error' && error && (_jsxs(Box, { children: [_jsx(Text, { sx: {
+                                    display: 'block',
+                                    fontSize: 0,
+                                    fontWeight: 'semibold',
+                                    color: 'danger.fg',
+                                    textTransform: 'uppercase',
+                                    letterSpacing: '0.05em',
+                                    mb: 2,
+                                }, children: "Error" }), _jsx(Box, { sx: {
+                                    backgroundColor: 'danger.subtle',
+                                    borderRadius: 2,
+                                    border: '1px solid',
+                                    borderColor: 'danger.muted',
+                                    p: 2,
+                                }, children: _jsx(Text, { sx: { fontSize: 1, color: 'danger.fg' }, children: error }) })] })), _jsx(Box, { sx: {
+                            mt: 3,
+                            pt: 2,
+                            borderTop: '1px solid',
+                            borderColor: 'border.muted',
+                        }, children: _jsxs(Text, { sx: { fontSize: 0, color: 'fg.subtle', fontFamily: 'monospace' }, children: ["ID: ", toolCallId] }) })] }))] }));
+}
+export default ToolCallDisplay;

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

@@ -0,0 +1,6 @@
+/**
+ * Display components barrel export.
+ *
+ * @module components/chat/components/display
+ */
+export { ToolCallDisplay, type ToolCallDisplayProps } from './ToolCallDisplay';

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

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

package/lib/components/chat/components/elements/ChatHeader.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Connection state enumeration
+ */
+export type ConnectionState = 'connected' | 'connecting' | 'disconnected' | 'error';
+/**
+ * ChatHeader props
+ */
+export interface ChatHeaderProps {
+    /** Title to display */
+    title?: string;
+    /** Description to display below title */
+    description?: string;
+    /** Current connection state */
+    connectionState: ConnectionState;
+    /** Callback when reconnect is clicked */
+    onReconnect?: () => void;
+    /** Callback when disconnect is clicked */
+    onDisconnect?: () => void;
+    /** Callback when logout is clicked */
+    onLogout?: () => void;
+    /** Callback when collapse panel is clicked */
+    onCollapsePanel?: () => void;
+}
+/**
+ * Chat header component with connection status indicator.
+ *
+ * Features:
+ * - Visual connection state indicator (connected, connecting, disconnected, error)
+ * - Reconnect button when disconnected or error
+ * - Disconnect button when connected
+ * - Optional logout button
+ *
+ * @example
+ * ```tsx
+ * <ChatHeader
+ *   connectionState="connected"
+ *   onReconnect={() => reconnect()}
+ *   onDisconnect={() => disconnect()}
+ * />
+ * ```
+ */
+export declare function ChatHeader({ title, description, connectionState, onReconnect, onDisconnect, onLogout, onCollapsePanel, }: ChatHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default ChatHeader;

package/lib/components/chat/components/elements/ChatHeader.js

@@ -0,0 +1,67 @@
+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 header component with connection status indicator.
+ *
+ * @module components/chat/components/elements/ChatHeader
+ */
+import { Text, IconButton, Button } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { SyncIcon, SignOutIcon, SidebarCollapseIcon, } from '@primer/octicons-react';
+/**
+ * Chat header component with connection status indicator.
+ *
+ * Features:
+ * - Visual connection state indicator (connected, connecting, disconnected, error)
+ * - Reconnect button when disconnected or error
+ * - Disconnect button when connected
+ * - Optional logout button
+ *
+ * @example
+ * ```tsx
+ * <ChatHeader
+ *   connectionState="connected"
+ *   onReconnect={() => reconnect()}
+ *   onDisconnect={() => disconnect()}
+ * />
+ * ```
+ */
+export function ChatHeader({ title, description, connectionState, onReconnect, onDisconnect, onLogout, onCollapsePanel, }) {
+    const colors = {
+        connected: 'success.fg',
+        connecting: 'attention.fg',
+        disconnected: 'neutral.fg',
+        error: 'danger.fg',
+    };
+    const labels = {
+        connected: 'Connected',
+        connecting: 'Connecting...',
+        disconnected: 'Disconnected',
+        error: 'Connection Error',
+    };
+    return (_jsx(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            p: 3,
+            borderBottom: '1px solid',
+            borderColor: 'border.default',
+            backgroundColor: 'canvas.subtle',
+        }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsxs(Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 2,
+                        fontSize: 0,
+                    }, children: [_jsx(Box, { sx: {
+                                width: 8,
+                                height: 8,
+                                borderRadius: '50%',
+                                backgroundColor: colors[connectionState],
+                            } }), _jsx(Text, { sx: { color: colors[connectionState] }, children: labels[connectionState] }), (connectionState === 'disconnected' ||
+                            connectionState === 'error') &&
+                            onReconnect && (_jsx(IconButton, { icon: SyncIcon, "aria-label": "Reconnect", size: "small", variant: "invisible", onClick: onReconnect }))] }), onDisconnect && connectionState === 'connected' && (_jsx(Button, { variant: "invisible", size: "small", onClick: onDisconnect, children: "Disconnect" })), onLogout && (_jsx(IconButton, { icon: SignOutIcon, "aria-label": "Logout", size: "small", variant: "invisible", onClick: onLogout })), onCollapsePanel && (_jsx(IconButton, { icon: SidebarCollapseIcon, "aria-label": "Collapse panel", size: "small", variant: "invisible", onClick: onCollapsePanel }))] }) }));
+}
+export default ChatHeader;

package/lib/components/chat/components/elements/ChatInputPrompt.d.ts

@@ -0,0 +1,26 @@
+/**
+ * ChatInputPrompt props
+ */
+export interface ChatInputPromptProps {
+    /** Placeholder text */
+    placeholder?: string;
+    /** Disable input */
+    disabled?: boolean;
+    /** Show tool suggestions */
+    showToolSuggestions?: boolean;
+    /** Show file upload button */
+    showFileUpload?: boolean;
+    /** Maximum rows for textarea */
+    maxRows?: number;
+    /** Custom class name */
+    className?: string;
+    /** Callback before sending */
+    onBeforeSend?: (content: string) => boolean | void;
+    /** Callback after sending */
+    onAfterSend?: (content: string) => void;
+}
+/**
+ * Chat Input Prompt component
+ */
+export declare function ChatInputPrompt({ placeholder, disabled, showToolSuggestions, showFileUpload, maxRows, className, onBeforeSend, onAfterSend, }: ChatInputPromptProps): import("react/jsx-runtime").JSX.Element;
+export default ChatInputPrompt;

package/lib/components/chat/components/elements/ChatInputPrompt.js

@@ -0,0 +1,145 @@
+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 input component.
+ * Provides the message input area with send button and optional tool suggestions.
+ *
+ * @module components/chat/components/elements/ChatInputPrompt
+ */
+import React, { useState, useRef, useCallback, useEffect, } from 'react';
+import { Button, Textarea, IconButton, ActionList } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { PaperAirplaneIcon, SquareCircleIcon, UploadIcon, MentionIcon, } from '@primer/octicons-react';
+import { useChat } from '../../../../hooks/useChat';
+import { useChatStreaming, useChatTools } from '../../store/chatStore';
+/**
+ * Chat Input Prompt component
+ */
+export function ChatInputPrompt({ placeholder = 'Type a message...', disabled = false, showToolSuggestions = true, showFileUpload = false, maxRows = 6, className, onBeforeSend, onAfterSend, }) {
+    const [input, setInput] = useState('');
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const textareaRef = useRef(null);
+    const { sendMessage, stopGeneration } = useChat();
+    const { isStreaming } = useChatStreaming();
+    const tools = useChatTools();
+    // Auto-resize textarea based on content
+    const adjustTextareaHeight = useCallback(() => {
+        const textarea = textareaRef.current;
+        if (textarea) {
+            // Reset height to auto to get proper scrollHeight
+            textarea.style.height = 'auto';
+            // Set height to scrollHeight, capped at maxHeight
+            const maxHeight = maxRows * 24; // Approximate line height
+            const newHeight = Math.min(textarea.scrollHeight, maxHeight);
+            textarea.style.height = `${newHeight}px`;
+            // Add overflow if content exceeds maxHeight
+            textarea.style.overflowY =
+                textarea.scrollHeight > maxHeight ? 'auto' : 'hidden';
+        }
+    }, [maxRows]);
+    // Adjust textarea height when input changes
+    useEffect(() => {
+        adjustTextareaHeight();
+    }, [input, adjustTextareaHeight]);
+    // Auto-focus on mount
+    useEffect(() => {
+        if (textareaRef.current && !disabled) {
+            textareaRef.current.focus();
+        }
+    }, [disabled]);
+    // Handle send
+    const handleSend = useCallback(async () => {
+        const trimmedInput = input.trim();
+        if (!trimmedInput || disabled || isStreaming)
+            return;
+        // Call onBeforeSend hook
+        if (onBeforeSend) {
+            const result = onBeforeSend(trimmedInput);
+            if (result === false)
+                return;
+        }
+        try {
+            await sendMessage(trimmedInput);
+            setInput('');
+            onAfterSend?.(trimmedInput);
+        }
+        catch (error) {
+            console.error('[ChatInputPrompt] Send error:', error);
+        }
+    }, [input, disabled, isStreaming, sendMessage, onBeforeSend, onAfterSend]);
+    // Handle stop
+    const handleStop = useCallback(() => {
+        stopGeneration();
+    }, [stopGeneration]);
+    // Handle key press
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            handleSend();
+        }
+        // Show tool suggestions with @
+        if (event.key === '@' && showToolSuggestions) {
+            setShowSuggestions(true);
+        }
+    }, [handleSend, showToolSuggestions]);
+    // Handle tool mention
+    const handleToolMention = useCallback((toolName) => {
+        const cursorPosition = textareaRef.current?.selectionStart || input.length;
+        const beforeCursor = input.slice(0, cursorPosition);
+        const afterCursor = input.slice(cursorPosition);
+        // Replace @... with tool mention
+        const lastAtIndex = beforeCursor.lastIndexOf('@');
+        const newInput = beforeCursor.slice(0, lastAtIndex) + `@${toolName} ` + afterCursor;
+        setInput(newInput);
+        setShowSuggestions(false);
+        // Focus back on textarea
+        textareaRef.current?.focus();
+    }, [input]);
+    // Filter tools based on input
+    const filteredTools = React.useMemo(() => {
+        if (!showSuggestions)
+            return [];
+        const cursorPosition = textareaRef.current?.selectionStart || input.length;
+        const beforeCursor = input.slice(0, cursorPosition);
+        const lastAtIndex = beforeCursor.lastIndexOf('@');
+        if (lastAtIndex === -1)
+            return [];
+        const query = beforeCursor.slice(lastAtIndex + 1).toLowerCase();
+        return Object.values(tools).filter(tool => tool.name.toLowerCase().includes(query) ||
+            tool.description?.toLowerCase().includes(query));
+    }, [tools, input, showSuggestions]);
+    return (_jsxs(Box, { className: className, sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            p: 3,
+            borderTop: '1px solid',
+            borderColor: 'border.default',
+            bg: 'canvas.default',
+            position: 'relative',
+        }, children: [showSuggestions && filteredTools.length > 0 && (_jsx(Box, { sx: {
+                    position: 'absolute',
+                    bottom: '100%',
+                    left: 3,
+                    right: 3,
+                    maxHeight: 200,
+                    overflow: 'auto',
+                    bg: 'canvas.overlay',
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    boxShadow: 'shadow.large',
+                    zIndex: 10,
+                }, children: _jsx(ActionList, { children: filteredTools.map(tool => (_jsxs(ActionList.Item, { onSelect: () => handleToolMention(tool.name), children: [_jsx(ActionList.LeadingVisual, { children: _jsx(MentionIcon, {}) }), _jsxs(Box, { children: [_jsx(Box, { sx: { fontWeight: 'semibold' }, children: tool.name }), tool.description && (_jsx(Box, { sx: { fontSize: 0, color: 'fg.muted' }, children: tool.description }))] })] }, tool.name))) }) })), _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'flex-end' }, children: [showFileUpload && (_jsx(IconButton, { icon: UploadIcon, "aria-label": "Upload file", variant: "invisible", disabled: disabled || !!isStreaming })), _jsx(Box, { sx: { flex: 1 }, children: _jsx(Textarea, { ref: textareaRef, value: input, onChange: e => setInput(e.target.value), onKeyDown: handleKeyDown, onBlur: () => setTimeout(() => setShowSuggestions(false), 200), placeholder: placeholder, disabled: disabled || !!isStreaming, rows: 1, sx: {
+                                width: '100%',
+                                maxHeight: `${maxRows * 24}px`,
+                                minHeight: '40px',
+                                resize: 'none',
+                                overflow: 'hidden',
+                                transition: 'height 0.1s ease-out',
+                            } }) }), isStreaming ? (_jsx(Button, { variant: "danger", onClick: handleStop, leadingVisual: SquareCircleIcon, "aria-label": "Stop generation", children: "Stop" })) : (_jsx(Button, { variant: "primary", onClick: handleSend, disabled: disabled || !input.trim(), leadingVisual: PaperAirplaneIcon, "aria-label": "Send message", children: "Send" }))] }), _jsxs(Box, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Press ", _jsx("kbd", { children: "Enter" }), " to send, ", _jsx("kbd", { children: "Shift+Enter" }), " for new line", showToolSuggestions && ', @ to mention tools'] })] }));
+}
+export default ChatInputPrompt;

package/lib/components/chat/components/elements/ChatMessages.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Chat message list component.
+ * Renders the list of chat messages with support for custom renderers.
+ *
+ * @module components/chat/components/elements/ChatMessages
+ */
+import React from 'react';
+import type { ChatMessage } from '../../types/message';
+import type { ExtensionRegistry } from '../../extensions/ExtensionRegistry';
+/**
+ * ChatMessages props
+ */
+export interface ChatMessagesProps {
+    /** Custom message renderer */
+    messageRenderer?: (message: ChatMessage) => React.ReactNode;
+    /** Custom activity renderer */
+    activityRenderer?: (activity: {
+        type: string;
+        data: unknown;
+    }) => React.ReactNode;
+    /** Show timestamps */
+    showTimestamps?: boolean;
+    /** Show avatars */
+    showAvatars?: boolean;
+    /** Auto-scroll to bottom on new messages */
+    autoScroll?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Optional extension registry (defaults to store value) */
+    extensionRegistry?: ExtensionRegistry;
+}
+/**
+ * Chat Messages component
+ */
+export declare function ChatMessages({ messageRenderer, activityRenderer, showTimestamps, showAvatars, autoScroll, className, extensionRegistry: extensionRegistryProp, }: ChatMessagesProps): import("react/jsx-runtime").JSX.Element;
+export default ChatMessages;