@datalayer/agent-runtimes 0.0.2

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

@@ -0,0 +1,195 @@
+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 message list component.
+ * Renders the list of chat messages with support for custom renderers.
+ *
+ * @module components/chat/components/elements/ChatMessages
+ */
+import { useRef, useEffect } from 'react';
+import { Text, RelativeTime } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { PersonIcon, ToolsIcon } from '@primer/octicons-react';
+import { AiAgentIcon } from '@datalayer/icons-react';
+import { useChatMessages, useChatExtensionRegistry, } from '../../store/chatStore';
+/**
+ * Chat Messages component
+ */
+export function ChatMessages({ messageRenderer, activityRenderer, showTimestamps = true, showAvatars = true, autoScroll = true, className, extensionRegistry: extensionRegistryProp, }) {
+    const messages = useChatMessages();
+    const storeExtensionRegistry = useChatExtensionRegistry();
+    const extensionRegistry = extensionRegistryProp ?? storeExtensionRegistry;
+    const containerRef = useRef(null);
+    const lastMessageRef = useRef(null);
+    // Auto-scroll to bottom on new messages
+    useEffect(() => {
+        if (autoScroll && lastMessageRef.current) {
+            lastMessageRef.current.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [messages.length, autoScroll]);
+    // Render individual message
+    const renderMessage = (message, isLast) => {
+        // Check for custom renderer
+        if (messageRenderer) {
+            return messageRenderer(message);
+        }
+        // Check extension registry for custom renderer
+        if (extensionRegistry) {
+            const messageRenderers = extensionRegistry.getMessageRenderers();
+            const extensionRenderer = messageRenderers.find(r => r.canRender(message));
+            if (extensionRenderer) {
+                return extensionRenderer.render({
+                    message,
+                    isStreaming: false,
+                });
+            }
+        }
+        // Default rendering
+        return (_jsxs(Box, { ref: isLast ? lastMessageRef : undefined, sx: {
+                display: 'flex',
+                gap: 3,
+                p: 3,
+                borderBottom: '1px solid',
+                borderColor: 'border.muted',
+                bg: message.role === 'assistant' ? 'canvas.subtle' : 'canvas.default',
+                '&:last-child': {
+                    borderBottom: 'none',
+                },
+            }, children: [showAvatars && (_jsx(Box, { sx: { flexShrink: 0 }, children: _jsx(Box, { sx: {
+                            width: 32,
+                            height: 32,
+                            borderRadius: '50%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            bg: message.role === 'user'
+                                ? 'neutral.muted'
+                                : message.role === 'assistant'
+                                    ? 'accent.emphasis'
+                                    : 'attention.emphasis',
+                            color: message.role === 'user' ? 'fg.default' : 'fg.onEmphasis',
+                        }, children: message.role === 'user' ? (_jsx(PersonIcon, { size: 16 })) : message.role === 'assistant' ? (_jsx(AiAgentIcon, { colored: true, size: 16 })) : (_jsx(ToolsIcon, { size: 16 })) }) })), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsxs(Box, { sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 2,
+                                mb: 1,
+                            }, children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: message.role === 'user'
+                                        ? 'You'
+                                        : message.role === 'assistant'
+                                            ? 'Assistant'
+                                            : 'System' }), showTimestamps && message.createdAt && (_jsx(RelativeTime, { datetime: message.createdAt.toISOString(), sx: { fontSize: 0, color: 'fg.muted' } }))] }), _jsx(Box, { sx: { fontSize: 1, lineHeight: 1.5 }, children: renderMessageContent(message, activityRenderer, extensionRegistry ?? undefined) })] })] }, message.id));
+    };
+    if (messages.length === 0) {
+        return (_jsxs(Box, { className: className, sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100%',
+                p: 4,
+                color: 'fg.muted',
+            }, children: [_jsx(AiAgentIcon, { colored: true, size: 48 }), _jsx(Text, { sx: { mt: 3, fontSize: 2 }, children: "Start a conversation" }), _jsx(Text, { sx: { mt: 1, fontSize: 1 }, children: "Send a message to begin chatting" })] }));
+    }
+    return (_jsx(Box, { ref: containerRef, className: className, sx: {
+            flex: 1,
+            overflow: 'auto',
+        }, children: messages.map((message, index) => renderMessage(message, index === messages.length - 1)) }));
+}
+/**
+ * Render message content based on type
+ */
+function renderMessageContent(message, activityRenderer, extensionRegistry) {
+    const { content } = message;
+    // Simple string content
+    if (typeof content === 'string') {
+        return _jsx(Text, { sx: { whiteSpace: 'pre-wrap' }, children: content });
+    }
+    // Array of content parts
+    if (Array.isArray(content)) {
+        return (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: content.map((part, index) => renderContentPart(part, index, activityRenderer, extensionRegistry)) }));
+    }
+    return null;
+}
+/**
+ * Render individual content part
+ */
+function renderContentPart(part, index, activityRenderer, extensionRegistry) {
+    switch (part.type) {
+        case 'text':
+            return (_jsx(Text, { sx: { whiteSpace: 'pre-wrap' }, children: part.text }, index));
+        case 'image':
+            return (_jsx(Box, { children: _jsx("img", { src: part.url, alt: part.alt || 'Image', style: { maxWidth: '100%', borderRadius: '8px' } }) }, index));
+        case 'tool-call':
+            return (_jsxs(Box, { sx: {
+                    p: 2,
+                    bg: 'canvas.subtle',
+                    borderRadius: 2,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 1 }, children: [_jsx(ToolsIcon, { size: 16 }), _jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 0 }, children: ["Tool: ", part.toolName] })] }), _jsx(Box, { as: "pre", sx: {
+                            fontSize: 0,
+                            overflow: 'auto',
+                            m: 0,
+                            p: 2,
+                            bg: 'canvas.inset',
+                            borderRadius: 1,
+                        }, children: JSON.stringify(part.args, null, 2) })] }, index));
+        case 'tool-result': {
+            const result = part.result;
+            const isSuccess = result && typeof result === 'object' && 'success' in result
+                ? result.success
+                : true;
+            return (_jsxs(Box, { sx: {
+                    p: 2,
+                    bg: isSuccess ? 'success.subtle' : 'danger.subtle',
+                    borderRadius: 2,
+                    border: '1px solid',
+                    borderColor: isSuccess ? 'success.muted' : 'danger.muted',
+                }, children: [_jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 0, mb: 1 }, children: ["Result: ", part.toolName] }), _jsx(Box, { as: "pre", sx: {
+                            fontSize: 0,
+                            overflow: 'auto',
+                            m: 0,
+                        }, children: result?.error || JSON.stringify(result, null, 2) })] }, index));
+        }
+        case 'activity':
+            // Check for custom renderer
+            if (activityRenderer) {
+                return (_jsx(Box, { children: activityRenderer({
+                        type: part.activityType || 'unknown',
+                        data: part.data,
+                    }) }, index));
+            }
+            // Check extension registry
+            if (extensionRegistry) {
+                const renderer = extensionRegistry.getActivityRenderer(part.activityType || 'unknown');
+                if (renderer) {
+                    return (_jsx(Box, { children: renderer.render({
+                            activityType: part.activityType || 'unknown',
+                            data: part.data,
+                            message: {}, // Placeholder - actual message would come from parent context
+                        }) }, index));
+                }
+            }
+            // Default activity rendering
+            return (_jsxs(Box, { sx: {
+                    p: 2,
+                    bg: 'accent.subtle',
+                    borderRadius: 2,
+                    border: '1px solid',
+                    borderColor: 'accent.muted',
+                }, children: [_jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 0 }, children: ["Activity: ", part.activityType] }), part.data != null && (_jsx(Box, { as: "pre", sx: {
+                            fontSize: 0,
+                            overflow: 'auto',
+                            mt: 1,
+                            m: 0,
+                        }, children: String(typeof part.data === 'object'
+                            ? JSON.stringify(part.data, null, 2)
+                            : part.data) }))] }, index));
+        default:
+            return null;
+    }
+}
+export default ChatMessages;

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

@@ -0,0 +1,34 @@
+/**
+ * Floating brand button component for Chat.
+ * A hoverable button that opens the chat sidebar.
+ *
+ * @module components/chat/components/elements/FloatingBrandButton
+ */
+import React from 'react';
+/**
+ * FloatingBrandButton props
+ */
+export interface FloatingBrandButtonProps {
+    /** Whether the chat is open */
+    isOpen: boolean;
+    /** Callback to toggle chat open/closed */
+    onToggle: () => void;
+    /** Position of the button */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** Custom icon when closed */
+    icon?: React.ReactNode;
+    /** Tooltip text */
+    tooltip?: string;
+    /** Show unread badge */
+    unreadCount?: number;
+    /** Custom class name */
+    className?: string;
+    /** Brand color */
+    brandColor?: string;
+}
+/**
+ * Floating brand button component
+ * A circular button that floats in a corner to open/close the chat
+ */
+export declare function FloatingBrandButton({ isOpen, onToggle, position, icon, tooltip, unreadCount, className, brandColor, }: FloatingBrandButtonProps): import("react/jsx-runtime").JSX.Element;
+export default FloatingBrandButton;

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

@@ -0,0 +1,88 @@
+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.
+ */
+/**
+ * Floating brand button component for Chat.
+ * A hoverable button that opens the chat sidebar.
+ *
+ * @module components/chat/components/elements/FloatingBrandButton
+ */
+import { useState } from 'react';
+import { Box, IconButton, Tooltip, Text } from '@primer/react';
+import { CommentDiscussionIcon, XIcon } from '@primer/octicons-react';
+/**
+ * Floating brand button component
+ * A circular button that floats in a corner to open/close the chat
+ */
+export function FloatingBrandButton({ isOpen, onToggle, position = 'bottom-right', icon, tooltip = 'Chat with AI', unreadCount = 0, className, brandColor, }) {
+    const [isHovered, setIsHovered] = useState(false);
+    // Position styles
+    const positionStyles = {
+        'bottom-right': { bottom: 20, right: 20 },
+        'bottom-left': { bottom: 20, left: 20 },
+        'top-right': { top: 20, right: 20 },
+        'top-left': { top: 20, left: 20 },
+    };
+    const posStyle = positionStyles[position];
+    return (_jsx(Box, { className: className, sx: {
+            position: 'fixed',
+            zIndex: 1000,
+            ...posStyle,
+        }, children: _jsxs(Box, { sx: {
+                position: 'relative',
+                display: 'inline-flex',
+            }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx(Tooltip, { text: tooltip, direction: "w", children: _jsx(IconButton, { icon: isOpen
+                            ? XIcon
+                            : icon || CommentDiscussionIcon, "aria-label": isOpen ? 'Close chat' : 'Open chat', onClick: onToggle, size: "large", sx: {
+                            width: 56,
+                            height: 56,
+                            borderRadius: '50%',
+                            bg: brandColor || 'accent.emphasis',
+                            color: 'fg.onEmphasis',
+                            boxShadow: 'shadow.large',
+                            transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+                            transform: isHovered ? 'scale(1.1)' : 'scale(1)',
+                            '&:hover': {
+                                bg: brandColor || 'accent.emphasis',
+                                boxShadow: 'shadow.extra-large',
+                            },
+                        } }) }), unreadCount > 0 && !isOpen && (_jsx(Box, { sx: {
+                        position: 'absolute',
+                        top: -4,
+                        right: -4,
+                        minWidth: 20,
+                        height: 20,
+                        px: 1,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        bg: 'danger.emphasis',
+                        color: 'fg.onEmphasis',
+                        borderRadius: '50%',
+                        fontSize: 0,
+                        fontWeight: 'bold',
+                    }, children: _jsx(Text, { sx: { fontSize: 0 }, children: unreadCount > 99 ? '99+' : unreadCount }) })), unreadCount > 0 && !isOpen && (_jsx(Box, { sx: {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        borderRadius: '50%',
+                        border: '2px solid',
+                        borderColor: 'accent.emphasis',
+                        animation: 'pulse 2s infinite',
+                        '@keyframes pulse': {
+                            '0%': {
+                                transform: 'scale(1)',
+                                opacity: 1,
+                            },
+                            '100%': {
+                                transform: 'scale(1.5)',
+                                opacity: 0,
+                            },
+                        },
+                    } }))] }) }));
+}
+export default FloatingBrandButton;

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

@@ -0,0 +1,50 @@
+/**
+ * Message part renderer component.
+ * Routes message parts to appropriate display components based on type.
+ *
+ * @module components/chat/components/elements/MessagePart
+ */
+import type { UIDataTypes, UIMessagePart, UITools, UIMessage } from 'ai';
+/**
+ * MessagePart props
+ */
+export interface MessagePartProps {
+    /** The message part to render */
+    part: UIMessagePart<UIDataTypes, UITools>;
+    /** Parent message object */
+    message: UIMessage;
+    /** Current streaming status */
+    status: string;
+    /** Callback to regenerate the message */
+    regen: (id: string) => void;
+    /** Index of this part in the message */
+    index: number;
+    /** Whether this is the last message in the conversation */
+    lastMessage: boolean;
+}
+/**
+ * MessagePart component - routes to appropriate display component based on part type.
+ *
+ * Supports:
+ * - text: Regular text content with markdown
+ * - reasoning: AI thinking/reasoning content (collapsible)
+ * - dynamic-tool: Dynamic tool UI parts
+ * - tool-call (via toolCallId): Tool execution display
+ *
+ * @example
+ * ```tsx
+ * {message.parts.map((part, index) => (
+ *   <MessagePart
+ *     key={index}
+ *     part={part}
+ *     message={message}
+ *     status={status}
+ *     regen={handleRegenerate}
+ *     index={index}
+ *     lastMessage={isLastMessage}
+ *   />
+ * ))}
+ * ```
+ */
+export declare function MessagePart({ part, message, status, regen, index, lastMessage, }: MessagePartProps): import("react/jsx-runtime").JSX.Element | null;
+export default MessagePart;

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextPart } from '../parts/TextPart';
+import { ReasoningPart } from '../parts/ReasoningPart';
+import { ToolPart } from '../parts/ToolPart';
+import { DynamicToolPart } from '../parts/DynamicToolPart';
+/**
+ * MessagePart component - routes to appropriate display component based on part type.
+ *
+ * Supports:
+ * - text: Regular text content with markdown
+ * - reasoning: AI thinking/reasoning content (collapsible)
+ * - dynamic-tool: Dynamic tool UI parts
+ * - tool-call (via toolCallId): Tool execution display
+ *
+ * @example
+ * ```tsx
+ * {message.parts.map((part, index) => (
+ *   <MessagePart
+ *     key={index}
+ *     part={part}
+ *     message={message}
+ *     status={status}
+ *     regen={handleRegenerate}
+ *     index={index}
+ *     lastMessage={isLastMessage}
+ *   />
+ * ))}
+ * ```
+ */
+export function MessagePart({ part, message, status, regen, index, lastMessage, }) {
+    if (part.type === 'text') {
+        return (_jsx(TextPart, { text: part.text, message: message, isLastPart: index === message.parts.length - 1, onRegenerate: regen }));
+    }
+    else if (part.type === 'reasoning') {
+        const isStreaming = status === 'streaming' &&
+            index === message.parts.length - 1 &&
+            lastMessage;
+        return _jsx(ReasoningPart, { text: part.text, isStreaming: isStreaming });
+    }
+    else if (part.type === 'dynamic-tool') {
+        return _jsx(DynamicToolPart, { part: part });
+    }
+    else if ('toolCallId' in part) {
+        return _jsx(ToolPart, { part: part });
+    }
+    return null;
+}
+export default MessagePart;

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

@@ -0,0 +1,26 @@
+/**
+ * PoweredBy tag component for Chat.
+ * Shows branding at the bottom of the chat.
+ *
+ * @module components/chat/components/elements/PoweredByTag
+ */
+import React from 'react';
+/**
+ * PoweredByTag props
+ */
+export interface PoweredByTagProps {
+    /** Whether to show the powered by tag */
+    show?: boolean;
+    /** Brand name to display */
+    brandName?: string;
+    /** Brand URL to link to */
+    brandUrl?: string;
+    /** Custom brand icon */
+    brandIcon?: React.ReactNode;
+}
+/**
+ * PoweredBy tag component
+ * Displays a "Powered by X" branding tag
+ */
+export declare function PoweredByTag({ show, brandName, brandUrl, brandIcon, }: PoweredByTagProps): import("react/jsx-runtime").JSX.Element | null;
+export default PoweredByTag;

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Link } from '@primer/react';
+/**
+ * PoweredBy tag component
+ * Displays a "Powered by X" branding tag
+ */
+export function PoweredByTag({ show = true, brandName = 'Datalayer', brandUrl = 'https://datalayer.ai', brandIcon, }) {
+    if (!show) {
+        return null;
+    }
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 1,
+            py: 2,
+            px: 3,
+            fontSize: 0,
+            color: 'fg.muted',
+            borderTop: '1px solid',
+            borderColor: 'border.default',
+            bg: 'canvas.subtle',
+        }, children: [brandIcon && (_jsx(Box, { sx: { display: 'flex', alignItems: 'center' }, children: brandIcon })), _jsx("span", { children: "Powered by" }), _jsx(Link, { href: brandUrl, target: "_blank", rel: "noopener noreferrer", sx: {
+                    color: 'fg.muted',
+                    fontWeight: 'semibold',
+                    textDecoration: 'none',
+                    '&:hover': {
+                        color: 'accent.fg',
+                        textDecoration: 'underline',
+                    },
+                }, children: brandName })] }));
+}
+export default PoweredByTag;

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

@@ -0,0 +1,42 @@
+/**
+ * ToolApprovalDialog props
+ */
+export interface ToolApprovalDialogProps {
+    /** Whether dialog is open */
+    isOpen: boolean;
+    /** Tool name */
+    toolName: string;
+    /** Tool description */
+    toolDescription?: string;
+    /** Tool arguments */
+    args: Record<string, unknown>;
+    /** Callback when approved */
+    onApprove: (rememberChoice?: boolean) => void;
+    /** Callback when denied */
+    onDeny: (rememberChoice?: boolean) => void;
+    /** Callback when dialog closed */
+    onClose: () => void;
+    /** Show "remember my choice" option */
+    showRememberChoice?: boolean;
+}
+/**
+ * Tool Approval Dialog component
+ */
+export declare function ToolApprovalDialog({ isOpen, toolName, toolDescription, args, onApprove, onDeny, onClose, showRememberChoice, }: ToolApprovalDialogProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Hook to manage tool approval dialog state
+ */
+export declare function useToolApprovalDialog(): {
+    isOpen: boolean;
+    toolName: string;
+    toolDescription: string | undefined;
+    args: Record<string, unknown>;
+    requestApproval: (toolName: string, args: Record<string, unknown>, toolDescription?: string) => Promise<{
+        approved: boolean;
+        rememberChoice?: boolean;
+    }>;
+    handleApprove: (rememberChoice?: boolean) => void;
+    handleDeny: (rememberChoice?: boolean) => void;
+    handleClose: () => void;
+};
+export default ToolApprovalDialog;

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

@@ -0,0 +1,96 @@
+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 approval dialog component.
+ * Shows a dialog for HITL tool approval.
+ *
+ * @module components/chat/components/elements/ToolApprovalDialog
+ */
+import { useCallback, useState } from 'react';
+import { Box, Button, Text, Heading, FormControl, Checkbox, } from '@primer/react';
+import { Dialog } from '@primer/react/experimental';
+import { AlertIcon, ToolsIcon, CheckIcon, XIcon } from '@primer/octicons-react';
+/**
+ * Tool Approval Dialog component
+ */
+export function ToolApprovalDialog({ isOpen, toolName, toolDescription, args, onApprove, onDeny, onClose, showRememberChoice = true, }) {
+    const [rememberChoice, setRememberChoice] = useState(false);
+    const handleApprove = useCallback(() => {
+        onApprove(rememberChoice);
+    }, [onApprove, rememberChoice]);
+    const handleDeny = useCallback(() => {
+        onDeny(rememberChoice);
+    }, [onDeny, rememberChoice]);
+    if (!isOpen) {
+        return null;
+    }
+    return (_jsxs(Dialog, { onClose: onClose, "aria-labelledby": "tool-approval-title", children: [_jsx(Dialog.Header, { children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(AlertIcon, { size: 16 }), "Tool Approval Required"] }) }), _jsxs(Box, { sx: { p: 3 }, children: [_jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 2 }, children: [_jsx(ToolsIcon, { size: 20 }), _jsx(Heading, { as: "h4", sx: { fontSize: 2 }, children: toolName })] }), toolDescription && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: toolDescription }))] }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Text, { sx: {
+                                    fontWeight: 'semibold',
+                                    fontSize: 1,
+                                    mb: 2,
+                                    display: 'block',
+                                }, children: "Arguments:" }), _jsx(Box, { as: "pre", sx: {
+                                    p: 3,
+                                    bg: 'canvas.subtle',
+                                    borderRadius: 2,
+                                    border: '1px solid',
+                                    borderColor: 'border.default',
+                                    overflow: 'auto',
+                                    maxHeight: 200,
+                                    fontSize: 0,
+                                }, children: JSON.stringify(args, null, 2) })] }), _jsx(Box, { sx: {
+                            p: 3,
+                            bg: 'attention.subtle',
+                            borderRadius: 2,
+                            border: '1px solid',
+                            borderColor: 'attention.muted',
+                            mb: 3,
+                        }, children: _jsx(Text, { sx: { fontSize: 1 }, children: "This tool will perform an action on your behalf. Please review the arguments before approving." }) }), showRememberChoice && (_jsxs(FormControl, { sx: { mb: 3 }, children: [_jsx(Checkbox, { checked: rememberChoice, onChange: e => setRememberChoice(e.target.checked) }), _jsx(FormControl.Label, { children: "Remember my choice for this tool" })] })), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 2 }, children: [_jsx(Button, { variant: "danger", onClick: handleDeny, leadingVisual: XIcon, children: "Deny" }), _jsx(Button, { variant: "primary", onClick: handleApprove, leadingVisual: CheckIcon, children: "Approve" })] })] })] }));
+}
+/**
+ * Hook to manage tool approval dialog state
+ */
+export function useToolApprovalDialog() {
+    const [state, setState] = useState({
+        isOpen: false,
+        toolName: '',
+        args: {},
+    });
+    const requestApproval = useCallback((toolName, args, toolDescription) => {
+        return new Promise(resolve => {
+            setState({
+                isOpen: true,
+                toolName,
+                toolDescription,
+                args,
+                resolve: (approved, rememberChoice) => resolve({ approved, rememberChoice }),
+            });
+        });
+    }, []);
+    const handleApprove = useCallback((rememberChoice) => {
+        state.resolve?.(true, rememberChoice);
+        setState(prev => ({ ...prev, isOpen: false }));
+    }, [state]);
+    const handleDeny = useCallback((rememberChoice) => {
+        state.resolve?.(false, rememberChoice);
+        setState(prev => ({ ...prev, isOpen: false }));
+    }, [state]);
+    const handleClose = useCallback(() => {
+        state.resolve?.(false);
+        setState(prev => ({ ...prev, isOpen: false }));
+    }, [state]);
+    return {
+        isOpen: state.isOpen,
+        toolName: state.toolName,
+        toolDescription: state.toolDescription,
+        args: state.args,
+        requestApproval,
+        handleApprove,
+        handleDeny,
+        handleClose,
+    };
+}
+export default ToolApprovalDialog;

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

@@ -0,0 +1,21 @@
+/**
+ * Component exports for chat.
+ *
+ * @module components/chat/components
+ */
+export { ChatMessages, type ChatMessagesProps } from './elements/ChatMessages';
+export { ChatInputPrompt, type ChatInputPromptProps, } from './elements/ChatInputPrompt';
+export { ChatSidebar, type ChatSidebarProps } from './ChatSidebar';
+export { ChatStandalone, type ChatStandaloneProps, type MessageHandler, } from './ChatStandalone';
+export { ChatBase, type ChatBaseProps, type ProtocolConfig, } from './base/ChatBase';
+export { AgentDetails, type AgentDetailsProps } from './AgentDetails';
+export { ToolApprovalDialog, useToolApprovalDialog, type ToolApprovalDialogProps, } from './elements/ToolApprovalDialog';
+export { PoweredByTag, type PoweredByTagProps } from './elements/PoweredByTag';
+export { FloatingBrandButton, type FloatingBrandButtonProps, } from './elements/FloatingBrandButton';
+export { ChatHeader, type ChatHeaderProps, type ConnectionState, } from './elements/ChatHeader';
+export { MessagePart, type MessagePartProps } from './elements/MessagePart';
+export { TextPart, type TextPartProps, ReasoningPart, type ReasoningPartProps, ToolPart, type ToolPartProps, DynamicToolPart, type DynamicToolPartProps, } from './parts';
+export { ToolCallDisplay, type ToolCallDisplayProps } from './display';
+export { Chat, type ChatProps, type Transport, type Extension } from './Chat';
+export { ChatFloating, type ChatFloatingProps, type ToolCallRenderContext, type ToolCallStatus, type RenderToolResult, type RespondCallback, type Suggestion, } from './ChatFloating';
+export { ChatInline, type ChatInlineProps, type ChatInlineProtocolConfig, } from './ChatInline';