@datalayer/core 0.0.16 → 0.0.18

package/lib/components/chat/ChatComponent.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2024-2025 Datalayer, Inc.
+ *
+ * BSD 3-Clause License
+ */
+import { useState, useEffect, useMemo, useRef } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Box, Button, IconButton, Textarea, FormControl, Spinner, ActionMenu, ActionList, Text, } from '@primer/react';
+import { ToolsIcon, ArrowUpIcon, ArrowDownIcon, AiModelIcon, } from '@primer/octicons-react';
+import { useAIJupyterChat } from '../../hooks/useAIJupyterChat';
+import { requestAPI } from './handler';
+import { MessagePart } from './MessagePart';
+async function getModels() {
+    return await requestAPI('configure');
+}
+/**
+ * Main Chat component using Primer React
+ */
+export const ChatComponent = () => {
+    const [model, setModel] = useState('');
+    const [enabledTools, setEnabledTools] = useState([]);
+    const [inputValue, setInputValue] = useState('');
+    const [showScrollButton, setShowScrollButton] = useState(false);
+    const { messages, sendMessage, status, regenerate } = useAIJupyterChat();
+    const textareaRef = useRef(null);
+    const messagesEndRef = useRef(null);
+    const scrollContainerRef = useRef(null);
+    const configQuery = useQuery({
+        queryFn: getModels,
+        queryKey: ['models'],
+    });
+    useEffect(() => {
+        if (configQuery.data) {
+            setModel(configQuery.data.models[0].id);
+            // Enable all builtin tools by default
+            const allToolIds = configQuery.data.builtinTools?.map(tool => tool.id) || [];
+            setEnabledTools(allToolIds);
+        }
+    }, [configQuery.data]);
+    // Auto-scroll to bottom when new messages arrive
+    useEffect(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [messages]);
+    // Handle scroll to show/hide scroll button
+    useEffect(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        const handleScroll = () => {
+            const isScrolledUp = container.scrollHeight - container.scrollTop - container.clientHeight >
+                100;
+            setShowScrollButton(isScrolledUp);
+        };
+        container.addEventListener('scroll', handleScroll);
+        return () => container.removeEventListener('scroll', handleScroll);
+    }, []);
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (inputValue.trim() && status !== 'streaming') {
+            sendMessage({ text: inputValue }, {
+                body: { model, builtinTools: enabledTools },
+            }).catch((error) => {
+                console.error('Error sending message:', error);
+            });
+            setInputValue('');
+            textareaRef.current?.focus();
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit(e);
+        }
+    };
+    const regen = (id) => {
+        regenerate({ messageId: id }).catch((error) => {
+            console.error('Error regenerating message:', error);
+        });
+    };
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    };
+    const availableTools = useMemo(() => {
+        if (!configQuery.data)
+            return [];
+        const selectedModel = configQuery.data.models.find(entry => entry.id === model);
+        const enabledToolIds = selectedModel?.builtinTools ?? [];
+        // If model doesn't specify tools, show all builtin tools
+        const tools = enabledToolIds.length > 0
+            ? (configQuery.data.builtinTools?.filter(tool => enabledToolIds.includes(tool.id)) ?? [])
+            : (configQuery.data.builtinTools ?? []);
+        return tools;
+    }, [configQuery.data, model]);
+    return (_jsxs(Box, { className: "dla-chat-root", sx: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [_jsxs(Box, { ref: scrollContainerRef, className: "dla-chat-messages", sx: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    overflowY: 'scroll',
+                    overflowX: 'hidden',
+                    padding: 3,
+                    paddingBottom: '180px',
+                }, children: [messages.map(message => (_jsx(Box, { sx: { marginBottom: 3 }, children: message.parts.map((part, index) => (_jsx(MessagePart, { part: part, message: message, status: status, index: index, regen: regen, lastMessage: message.id === messages.at(-1)?.id }, `${message.id}-${index}`))) }, message.id))), status === 'submitted' && (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', padding: 3 }, children: _jsx(Spinner, { size: "medium" }) })), _jsx("div", { ref: messagesEndRef })] }), showScrollButton && (_jsx(Box, { sx: {
+                    position: 'absolute',
+                    bottom: 160,
+                    right: 16,
+                    zIndex: 1,
+                }, children: _jsx(IconButton, { icon: ArrowDownIcon, "aria-label": "Scroll to bottom", onClick: scrollToBottom, variant: "default", size: "medium" }) })), _jsx(Box, { sx: {
+                    position: 'absolute',
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    borderTop: '1px solid',
+                    borderColor: 'border.default',
+                    padding: 3,
+                    backgroundColor: 'canvas.default',
+                    zIndex: 0,
+                }, children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(FormControl, { sx: { width: '100%' }, children: _jsx(Textarea, { ref: textareaRef, value: inputValue, onChange: e => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder: "Ask me anything...", rows: 3, resize: "vertical", sx: { marginBottom: 2, width: '100%' } }) }), _jsxs(Box, { sx: {
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                            }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center' }, children: [availableTools.length > 0 && (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { icon: ToolsIcon, "aria-label": "Tools", variant: "invisible", size: "small" }) }), _jsx(ActionMenu.Overlay, { children: _jsx(ActionList, { children: _jsx(ActionList.Group, { title: "Available Tools", children: availableTools.map(tool => (_jsxs(ActionList.Item, { disabled: true, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(Box, { sx: {
+                                                                                width: 8,
+                                                                                height: 8,
+                                                                                borderRadius: '50%',
+                                                                                backgroundColor: 'success.emphasis',
+                                                                            } }) }), tool.name] }, tool.id))) }) }) })] })), configQuery.data && model && (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { type: "button", variant: "invisible", size: "small", leadingVisual: AiModelIcon, children: _jsx(Text, { sx: { fontSize: 0 }, children: configQuery.data.models.find(m => m.id === model)
+                                                                ?.name || 'Select Model' }) }) }), _jsx(ActionMenu.Overlay, { children: _jsx(ActionList, { selectionVariant: "single", children: configQuery.data.models.map(modelItem => (_jsx(ActionList.Item, { selected: model === modelItem.id, onSelect: () => setModel(modelItem.id), children: modelItem.name }, modelItem.id))) }) })] }))] }), _jsx(Button, { type: "submit", variant: "primary", size: "small", disabled: !inputValue.trim() || status === 'streaming', leadingVisual: ArrowUpIcon, children: status === 'streaming' ? 'Sending...' : 'Send' })] })] }) })] }));
+};

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

@@ -0,0 +1,11 @@
+import type { UIDataTypes, UIMessagePart, UITools, UIMessage } from 'ai';
+interface IMessagePartProps {
+    part: UIMessagePart<UIDataTypes, UITools>;
+    message: UIMessage;
+    status: string;
+    regen: (id: string) => void;
+    index: number;
+    lastMessage: boolean;
+}
+export declare function MessagePart({ part, message, status, regen, index, lastMessage, }: IMessagePartProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/components/chat/MessagePart.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextPart } from './display/TextPart';
+import { ReasoningPart } from './display/ReasoningPart';
+import { ToolPart } from './display/ToolPart';
+import { DynamicToolPart } from './display/DynamicToolPart';
+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;
+}

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

@@ -0,0 +1,6 @@
+import type { DynamicToolUIPart } from 'ai';
+interface IDynamicToolPartProps {
+    part: DynamicToolUIPart;
+}
+export declare function DynamicToolPart({ part }: IDynamicToolPartProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Text, Flash } from '@primer/react';
+export function DynamicToolPart({ part }) {
+    return (_jsx(Flash, { variant: "warning", sx: { marginBottom: 2 }, children: _jsxs(Text, { children: ["Dynamic Tool: ", JSON.stringify(part)] }) }));
+}

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

@@ -0,0 +1,6 @@
+interface IReasoningPartProps {
+    text: string;
+    isStreaming: boolean;
+}
+export declare function ReasoningPart({ text, isStreaming }: IReasoningPartProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2024-2025 Datalayer, Inc.
+ *
+ * BSD 3-Clause License
+ */
+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';
+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 }) }))] }));
+}

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

@@ -0,0 +1,9 @@
+import type { UIMessage } from 'ai';
+interface ITextPartProps {
+    text: string;
+    message: UIMessage;
+    isLastPart: boolean;
+    onRegenerate: (id: string) => void;
+}
+export declare function TextPart({ text, message, isLastPart, onRegenerate, }: ITextPartProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,93 @@
+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';
+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 }) })] }));
+}

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

@@ -0,0 +1,6 @@
+import type { ToolUIPart } from 'ai';
+interface IToolPartProps {
+    part: ToolUIPart;
+}
+export declare function ToolPart({ part }: IToolPartProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2024-2025 Datalayer, Inc.
+ *
+ * BSD 3-Clause License
+ */
+import React from 'react';
+import { Text, Button } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ChevronDownIcon } from '@primer/octicons-react';
+export function ToolPart({ part }) {
+    const [isExpanded, setIsExpanded] = React.useState(true);
+    const 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: '•',
+        });
+    };
+    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 }) })] }))] }))] }));
+}

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

@@ -0,0 +1,4 @@
+export { TextPart } from './TextPart';
+export { ReasoningPart } from './ReasoningPart';
+export { ToolPart } from './ToolPart';
+export { DynamicToolPart } from './DynamicToolPart';

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

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2024-2025 Datalayer, Inc.
+ *
+ * BSD 3-Clause License
+ */
+export { TextPart } from './TextPart';
+export { ReasoningPart } from './ReasoningPart';
+export { ToolPart } from './ToolPart';
+export { DynamicToolPart } from './DynamicToolPart';

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

@@ -0,0 +1,8 @@
+/**
+ * Call the API extension
+ *
+ * @param endPoint API REST end point for the extension
+ * @param init Initial values for the request
+ * @returns The response body interpreted as JSON
+ */
+export declare function requestAPI<T>(endPoint?: string, init?: RequestInit): Promise<T>;

package/lib/components/chat/handler.js

@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2024-2025 Datalayer, Inc.
+ *
+ * BSD 3-Clause License
+ */
+import { URLExt } from '@jupyterlab/coreutils';
+import { ServerConnection } from '@jupyterlab/services';
+/**
+ * Call the API extension
+ *
+ * @param endPoint API REST end point for the extension
+ * @param init Initial values for the request
+ * @returns The response body interpreted as JSON
+ */
+export async function requestAPI(endPoint = '', init = {}) {
+    // Make request to Jupyter API
+    const settings = ServerConnection.makeSettings();
+    const requestUrl = URLExt.join(settings.baseUrl, 'datalayer', endPoint);
+    let response;
+    try {
+        response = await ServerConnection.makeRequest(requestUrl, init, settings);
+    }
+    catch (error) {
+        throw new ServerConnection.NetworkError(error);
+    }
+    let data = await response.text();
+    if (data.length > 0) {
+        try {
+            data = JSON.parse(data);
+        }
+        catch {
+            // Not a JSON response body
+        }
+    }
+    if (!response.ok) {
+        throw new ServerConnection.ResponseError(response, data.message || data);
+    }
+    return data;
+}

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

@@ -0,0 +1,4 @@
+export * from './ChatComponent';
+export * from './MessagePart';
+export * from './handler';
+export * from './display';

package/lib/components/chat/index.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2024-2025 Datalayer, Inc.
+ *
+ * BSD 3-Clause License
+ */
+export * from './ChatComponent';
+export * from './MessagePart';
+export * from './handler';
+export * from './display';

package/lib/components/display/CenteredSpinner.d.ts

@@ -7,8 +7,5 @@ type ICenteredSpinnerProps = {
     message?: string;
     size?: keyof typeof sizeMap;
 };
-export declare const CenteredSpinner: {
-    (props: ICenteredSpinnerProps): import("react/jsx-runtime").JSX.Element;
-    defaultProps: Partial<ICenteredSpinnerProps>;
-};
+export declare const CenteredSpinner: ({ message, size, }: ICenteredSpinnerProps) => import("react/jsx-runtime").JSX.Element;
 export default CenteredSpinner;

package/lib/components/display/CenteredSpinner.js

@@ -5,8 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Spinner, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-export const CenteredSpinner = (props) => {
-    const { message, size } = props;
+export const CenteredSpinner = ({ message, size = 'medium', }) => {
     return (_jsxs(Box, { sx: {
             display: 'flex',
             alignItems: 'center',
@@ -14,7 +13,4 @@ export const CenteredSpinner = (props) => {
             minHeight: '40px',
         }, children: [_jsx(Spinner, { size: size }), message && _jsx(Text, { sx: { marginLeft: 3 }, children: message })] }));
 };
-CenteredSpinner.defaultProps = {
-    size: 'medium',
-};
 export default CenteredSpinner;