@datalayer/agent-runtimes 1.0.2 → 1.0.4

package/lib/chat/indicators/SandboxStatusIndicator.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * SandboxStatusIndicator — Round coloured dot that shows the
+ * real-time sandbox execution status via a WebSocket connection.
+ *
+ * Aggregate logic
+ * ───────────────
+ * - variant === "unavailable" → hidden
+ * - sandbox_running === false → "stopped"  (gray)
+ * - is_executing === false    → "idle"     (green)
+ * - is_executing === true     → "executing" (blue, pulsing)
+ *
+ * The component connects to the `/configure/sandbox/ws` WebSocket
+ * and receives status updates in real time.  It can also send
+ * an interrupt request via `{"action": "interrupt"}`.
+ *
+ * @module chat/indicators/SandboxStatusIndicator
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Tooltip } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { SANDBOX_STATUS_COLORS, SANDBOX_STATUS_LABELS, } from '../../types/sandbox';
+/* ── Helpers ───────────────────────────────────────────── */
+function getWsUrl(apiBase, authToken, agentId) {
+    if (typeof window === 'undefined')
+        return '';
+    const base = apiBase
+        ? apiBase
+        : window.location.hostname === 'localhost' ||
+            window.location.hostname === '127.0.0.1'
+            ? 'http://127.0.0.1:8765'
+            : '';
+    // Convert http(s) to ws(s).
+    const wsBase = base.replace(/^http/, 'ws');
+    let wsUrl = `${wsBase}/api/v1/configure/sandbox/ws`;
+    // Include agent_id so the backend returns agent-scoped status.
+    const params = [];
+    if (agentId) {
+        params.push(`agent_id=${encodeURIComponent(agentId)}`);
+    }
+    // WebSocket API doesn't support custom headers, pass token as query param.
+    if (authToken) {
+        params.push(`token=${encodeURIComponent(authToken)}`);
+    }
+    if (params.length > 0) {
+        wsUrl += `?${params.join('&')}`;
+    }
+    return wsUrl;
+}
+function deriveAggregate(status) {
+    if (!status ||
+        status.variant === 'unavailable' ||
+        status.variant === 'error') {
+        return 'unavailable';
+    }
+    if (!status.sandbox_running)
+        return 'stopped';
+    if (status.is_executing)
+        return 'executing';
+    return 'idle';
+}
+const SANDBOX_PULSE_KEYFRAMES = `
+@keyframes sandbox-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+`;
+function useInjectKeyframes() {
+    useEffect(() => {
+        const id = '__sandbox-pulse-keyframes__';
+        if (document.getElementById(id))
+            return;
+        const style = document.createElement('style');
+        style.id = id;
+        style.textContent = SANDBOX_PULSE_KEYFRAMES;
+        document.head.appendChild(style);
+    }, []);
+}
+/* ── Component ─────────────────────────────────────────── */
+export function SandboxStatusIndicator({ apiBase, authToken, agentId, }) {
+    useInjectKeyframes();
+    const [status, setStatus] = useState(null);
+    const wsRef = useRef(null);
+    const reconnectTimerRef = useRef();
+    const wsUrl = useMemo(() => getWsUrl(apiBase, authToken, agentId), [apiBase, authToken, agentId]);
+    // ---- WebSocket lifecycle ----
+    useEffect(() => {
+        if (!wsUrl)
+            return;
+        let disposed = false;
+        function connect() {
+            if (disposed)
+                return;
+            const ws = new WebSocket(wsUrl);
+            ws.onopen = () => {
+                wsRef.current = ws;
+            };
+            ws.onmessage = event => {
+                try {
+                    const msg = JSON.parse(event.data);
+                    // Ignore interrupt ack messages.
+                    if (msg.action === 'interrupt')
+                        return;
+                    setStatus(msg);
+                }
+                catch {
+                    // Ignore malformed messages.
+                }
+            };
+            ws.onclose = () => {
+                wsRef.current = null;
+                if (!disposed) {
+                    // Reconnect after a short delay.
+                    reconnectTimerRef.current = setTimeout(connect, 3000);
+                }
+            };
+            ws.onerror = () => {
+                ws.close();
+            };
+        }
+        connect();
+        return () => {
+            disposed = true;
+            clearTimeout(reconnectTimerRef.current);
+            wsRef.current?.close();
+            wsRef.current = null;
+        };
+    }, [wsUrl]);
+    // ---- Interrupt helper (exposed for stop-button integration) ----
+    const sendInterrupt = useCallback(() => {
+        const ws = wsRef.current;
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ action: 'interrupt' }));
+        }
+    }, []);
+    // ---- Derived display values ----
+    const aggregate = useMemo(() => deriveAggregate(status), [status]);
+    const tooltipText = useMemo(() => {
+        if (!status)
+            return SANDBOX_STATUS_LABELS.unavailable;
+        const label = SANDBOX_STATUS_LABELS[aggregate];
+        const variant = status.variant;
+        return `${label} (${variant})`;
+    }, [aggregate, status]);
+    // Hide when sandbox is not available at all.
+    if (aggregate === 'unavailable')
+        return null;
+    return (_jsx(Tooltip, { text: tooltipText, direction: "n", children: _jsx("button", { type: "button", "aria-label": tooltipText, onClick: aggregate === 'executing' ? sendInterrupt : undefined, style: {
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 28,
+                height: 28,
+                padding: 0,
+                border: 'none',
+                background: 'none',
+                cursor: aggregate === 'executing' ? 'pointer' : 'default',
+                lineHeight: 0,
+            }, children: _jsx(Box, { as: "span", sx: {
+                    display: 'inline-block',
+                    width: 12,
+                    height: 12,
+                    borderRadius: '50%',
+                    bg: SANDBOX_STATUS_COLORS[aggregate],
+                    flexShrink: 0,
+                    ...(aggregate === 'executing' && {
+                        animation: 'sandbox-pulse 1.5s ease-in-out infinite',
+                    }),
+                } }) }) }));
+}
+export default SandboxStatusIndicator;

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

@@ -0,0 +1,17 @@
+/**
+ * McpStatusIndicator — Round status dot showing the aggregate
+ * state of MCP servers, with a tooltip listing per-server details.
+ *
+ * Statuses:
+ * - none:        No MCP servers defined (gray)
+ * - not_started: Servers defined but not started (gray)
+ * - starting:    Servers are starting up (amber / pulsing)
+ * - failed:      At least one server failed (red)
+ * - started:     All servers started & available (green)
+ *
+ * @module chat/indicators/McpStatusIndicator
+ */
+export { McpStatusIndicator, type McpStatusIndicatorProps, } from './McpStatusIndicator';
+export type { McpServerStatus, McpAggregateStatus } from '../../types/mcp';
+export { SandboxStatusIndicator, type SandboxStatusIndicatorProps, } from './SandboxStatusIndicator';
+export type { SandboxAggregateStatus, SandboxWsStatus, } from '../../types/sandbox';

package/lib/chat/indicators/index.js

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * McpStatusIndicator — Round status dot showing the aggregate
+ * state of MCP servers, with a tooltip listing per-server details.
+ *
+ * Statuses:
+ * - none:        No MCP servers defined (gray)
+ * - not_started: Servers defined but not started (gray)
+ * - starting:    Servers are starting up (amber / pulsing)
+ * - failed:      At least one server failed (red)
+ * - started:     All servers started & available (green)
+ *
+ * @module chat/indicators/McpStatusIndicator
+ */
+export { McpStatusIndicator, } from './McpStatusIndicator';
+export { SandboxStatusIndicator, } from './SandboxStatusIndicator';

package/lib/chat/messages/ChatMessageList.d.ts

@@ -0,0 +1,49 @@
+/**
+ * MessageList — Renders the scrollable list of chat messages, tool calls,
+ * and the typing indicator.
+ *
+ * @module chat/messages/MessageList
+ */
+import { type ReactNode, type RefObject } from 'react';
+import type { DisplayItem, AvatarConfig, RenderToolResult } from '../../types/chat';
+export interface ToolApprovalConfig {
+    /** Base API URL for the agent runtime (e.g., http://localhost:8765/api/v1) */
+    apiBaseUrl: string;
+    /** Auth token for API calls */
+    authToken?: string;
+}
+export interface ChatMessageListProps {
+    /** All display items (messages + tool calls) */
+    displayItems: DisplayItem[];
+    /** Whether the agent is loading */
+    isLoading: boolean;
+    /** Whether the agent is currently streaming */
+    isStreaming: boolean;
+    /** Show the pulsing-dot typing indicator */
+    showLoadingIndicator: boolean;
+    /** Hide assistant messages that follow a rendered tool call UI */
+    hideMessagesAfterToolUI: boolean;
+    /** Resolved avatar configuration */
+    avatarConfig: Required<Pick<AvatarConfig, 'userAvatar' | 'assistantAvatar' | 'showAvatars' | 'avatarSize' | 'userAvatarBg' | 'assistantAvatarBg'>>;
+    /** Layout padding */
+    padding: number;
+    /** Optional custom tool-result renderer */
+    renderToolResult?: RenderToolResult;
+    /** Content to render when there are no messages */
+    emptyContent: ReactNode;
+    /** Ref attached to the sentinel div at the bottom for auto-scrolling */
+    messagesEndRef: RefObject<HTMLDivElement>;
+    /**
+     * Callback for human-in-the-loop tool responses.
+     * Called when the user responds to an 'executing' tool.
+     */
+    onRespond: (toolCallId: string, result: unknown) => Promise<void>;
+    /**
+     * Approval config for built-in tool approval support.
+     * When provided, the default tool call rendering detects `pending_approval`
+     * results and shows approve/deny buttons that call the agent-runtimes
+     * approval API.
+     */
+    approvalConfig?: ToolApprovalConfig;
+}
+export declare function ChatMessageList({ displayItems, isLoading, isStreaming, showLoadingIndicator, hideMessagesAfterToolUI, avatarConfig, padding, renderToolResult, emptyContent, messagesEndRef, onRespond, approvalConfig, }: ChatMessageListProps): import("react/jsx-runtime").JSX.Element;

package/lib/chat/messages/ChatMessageList.js

@@ -0,0 +1,332 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * MessageList — Renders the scrollable list of chat messages, tool calls,
+ * and the typing indicator.
+ *
+ * @module chat/messages/MessageList
+ */
+import { useState, useEffect, useCallback, } from 'react';
+import { Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Streamdown } from 'streamdown';
+import { streamdownMarkdownStyles, streamdownCodeBlockStyles, } from '../styles/streamdownStyles';
+import { ToolCallDisplay } from '../tools/ToolCallDisplay';
+import { isToolCallMessage, getMessageText } from '../../utils';
+// ---------------------------------------------------------------------------
+// DefaultToolCallRenderer — handles tool approval for a single tool call
+// ---------------------------------------------------------------------------
+function DefaultToolCallRenderer({ item, approvalConfig, onRespond, }) {
+    const resultObject = item.result && typeof item.result === 'object'
+        ? item.result
+        : undefined;
+    // Detect pending approval from tool result (pydantic-deferred mode)
+    const isPendingFromResult = item.status === 'inProgress' && resultObject?.pending_approval === true;
+    // In ai-agents-wrapper mode, the server blocks waiting for approval and
+    // never sends a tool-result with pending_approval. The tool stays in
+    // 'executing' status. We proactively poll the approval API to detect if
+    // a pending approval record exists for this tool.
+    const isExecuting = item.status === 'executing';
+    const [matchedApprovalId, setMatchedApprovalId] = useState(null);
+    const [decision, setDecision] = useState();
+    const [loading, setLoading] = useState(false);
+    // Should we poll the approval API?
+    const shouldPoll = (isPendingFromResult || isExecuting) &&
+        !!approvalConfig?.apiBaseUrl &&
+        !decision;
+    // Normalize tool name for matching (strip version suffix, dashes/underscores, lowercase)
+    const normalizedToolName = item.toolName
+        .replace(/:[0-9]+\.[0-9]+\.[0-9]+.*$/, '')
+        .replace(/[-_]/g, '')
+        .toLowerCase();
+    // Poll for matching approval record when tool is executing or pending approval
+    useEffect(() => {
+        if (!shouldPoll || !approvalConfig?.apiBaseUrl)
+            return;
+        let cancelled = false;
+        const poll = async () => {
+            try {
+                const headers = {
+                    'Content-Type': 'application/json',
+                };
+                if (approvalConfig.authToken) {
+                    headers['Authorization'] = `Bearer ${approvalConfig.authToken}`;
+                }
+                const res = await fetch(`${approvalConfig.apiBaseUrl}/tool-approvals?status=pending`, { headers });
+                if (!res.ok || cancelled)
+                    return;
+                const data = await res.json();
+                const approvals = Array.isArray(data)
+                    ? data
+                    : (data.approvals ??
+                        data.requests ??
+                        []);
+                // Match by normalized tool name
+                const match = approvals.find(a => {
+                    const aNormalized = String(a.tool_name || '')
+                        .replace(/:[0-9]+\.[0-9]+\.[0-9]+.*$/, '')
+                        .replace(/[-_]/g, '')
+                        .toLowerCase();
+                    return aNormalized === normalizedToolName && a.status === 'pending';
+                });
+                if (match && !cancelled) {
+                    setMatchedApprovalId(match.id);
+                }
+            }
+            catch {
+                // Retry on next interval
+            }
+        };
+        poll();
+        const interval = setInterval(poll, 3000);
+        return () => {
+            cancelled = true;
+            clearInterval(interval);
+        };
+    }, [
+        shouldPoll,
+        approvalConfig?.apiBaseUrl,
+        approvalConfig?.authToken,
+        normalizedToolName,
+    ]);
+    const makeDecision = useCallback(async (action) => {
+        if (!matchedApprovalId || !approvalConfig?.apiBaseUrl)
+            return;
+        setLoading(true);
+        try {
+            const headers = {
+                'Content-Type': 'application/json',
+            };
+            if (approvalConfig.authToken) {
+                headers['Authorization'] = `Bearer ${approvalConfig.authToken}`;
+            }
+            const res = await fetch(`${approvalConfig.apiBaseUrl}/tool-approvals/${matchedApprovalId}/${action}`, {
+                method: 'POST',
+                headers,
+                body: JSON.stringify({}),
+            });
+            if (res.ok) {
+                setDecision(action === 'approve' ? 'approved' : 'denied');
+                onRespond({
+                    type: 'tool-approval-decision',
+                    approved: action === 'approve',
+                    approvalId: matchedApprovalId,
+                    toolName: item.toolName,
+                });
+            }
+        }
+        catch {
+            // Allow retry
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [
+        matchedApprovalId,
+        approvalConfig?.apiBaseUrl,
+        approvalConfig?.authToken,
+        onRespond,
+        item.toolCallId,
+        item.toolName,
+    ]);
+    // Show approval UI when we have a confirmed pending approval (from result
+    // or discovered via polling) or after a decision has been made.
+    const hasApproval = isPendingFromResult || !!matchedApprovalId;
+    const approvalState = decision || (hasApproval ? 'pending' : undefined);
+    return (_jsx(ToolCallDisplay, { toolCallId: item.toolCallId, toolName: item.toolName, args: item.args, result: item.result, status: item.status, error: item.error, executionError: item.executionError, codeError: item.codeError, exitCode: item.exitCode, approvalRequired: hasApproval, approvalState: approvalState, onApprove: matchedApprovalId && !decision
+            ? () => void makeDecision('approve')
+            : undefined, onDeny: matchedApprovalId && !decision
+            ? () => void makeDecision('reject')
+            : undefined, approvalLoading: loading }));
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoadingIndicator, hideMessagesAfterToolUI, avatarConfig, padding, renderToolResult, emptyContent, messagesEndRef, onRespond, approvalConfig, }) {
+    if (displayItems.length === 0) {
+        return _jsx(_Fragment, { children: emptyContent });
+    }
+    // Create respond callback for a tool call (human-in-the-loop)
+    const createRespondCallback = (toolCallId) => {
+        return (result) => {
+            onRespond(toolCallId, result);
+        };
+    };
+    // Build set of rendered tool call IDs to support hideMessagesAfterToolUI
+    const renderedToolCallIds = new Set();
+    displayItems.forEach(item => {
+        if (isToolCallMessage(item)) {
+            if (renderToolResult) {
+                const rendered = renderToolResult({
+                    toolCallId: item.toolCallId,
+                    toolName: item.toolName,
+                    name: item.toolName,
+                    args: item.args,
+                    result: item.result,
+                    status: item.status,
+                    error: item.error,
+                });
+                if (rendered !== null && rendered !== undefined) {
+                    renderedToolCallIds.add(item.toolCallId);
+                }
+            }
+            else {
+                // Default display always renders tool calls
+                renderedToolCallIds.add(item.toolCallId);
+            }
+        }
+    });
+    const hasRenderedToolCall = renderedToolCallIds.size > 0;
+    return (_jsxs(_Fragment, { children: [displayItems.map((item, index) => {
+                // ---- Tool call item ----
+                if (isToolCallMessage(item)) {
+                    const respond = item.status === 'executing' || item.status === 'inProgress'
+                        ? createRespondCallback(item.toolCallId)
+                        : undefined;
+                    const toolUI = renderToolResult ? (renderToolResult({
+                        toolCallId: item.toolCallId,
+                        toolName: item.toolName,
+                        name: item.toolName,
+                        args: item.args,
+                        result: item.result,
+                        status: item.status,
+                        error: item.error,
+                        respond,
+                    })) : (_jsx(DefaultToolCallRenderer, { item: item, approvalConfig: approvalConfig, onRespond: createRespondCallback(item.toolCallId) }));
+                    if (toolUI === null || toolUI === undefined)
+                        return null;
+                    return (_jsx(Box, { sx: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'flex-start',
+                            maxWidth: '95%',
+                            px: padding,
+                            py: 1,
+                        }, children: toolUI }, item.id));
+                }
+                // ---- Chat message item ----
+                const message = item;
+                const isUser = message.role === 'user';
+                // Optionally hide assistant messages that follow a rendered tool call
+                if (!isUser && hideMessagesAfterToolUI && hasRenderedToolCall) {
+                    const messageText = getMessageText(message);
+                    const prevIndex = index - 1;
+                    if (prevIndex >= 0) {
+                        const prevItem = displayItems[prevIndex];
+                        if (isToolCallMessage(prevItem) &&
+                            renderedToolCallIds.has(prevItem.toolCallId)) {
+                            return null;
+                        }
+                    }
+                    // Check for HITL-specific patterns
+                    const hitlToolCall = displayItems.find(di => isToolCallMessage(di) &&
+                        renderedToolCallIds.has(di.toolCallId) &&
+                        di.args &&
+                        'steps' in di.args &&
+                        Array.isArray(di.args.steps));
+                    if (hitlToolCall && messageText) {
+                        const steps = hitlToolCall.args.steps;
+                        const hasStepContent = steps.some(step => step.description &&
+                            messageText
+                                .toLowerCase()
+                                .includes(step.description.toLowerCase().slice(0, 20))) ||
+                            /^\s*(\d+\.\s|[-*]\s|\*\*)/.test(messageText) ||
+                            messageText.includes('**Enabled**') ||
+                            messageText.includes('steps below');
+                        if (hasStepContent) {
+                            return null;
+                        }
+                    }
+                }
+                return (_jsx(Box, { sx: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: isUser ? 'flex-end' : 'flex-start',
+                        px: padding,
+                        py: 1,
+                    }, children: _jsxs(Box, { sx: {
+                            display: 'flex',
+                            gap: 2,
+                            flexDirection: isUser ? 'row-reverse' : 'row',
+                            alignItems: 'flex-start',
+                        }, children: [avatarConfig.showAvatars && (_jsx(Box, { sx: {
+                                    width: avatarConfig.avatarSize,
+                                    height: avatarConfig.avatarSize,
+                                    borderRadius: '50%',
+                                    bg: isUser
+                                        ? avatarConfig.userAvatarBg
+                                        : avatarConfig.assistantAvatarBg,
+                                    color: isUser
+                                        ? 'fg.default'
+                                        : 'var(--button-primary-fgColor-rest, var(--fgColor-onEmphasis))',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    flexShrink: 0,
+                                }, children: isUser
+                                    ? avatarConfig.userAvatar
+                                    : avatarConfig.assistantAvatar })), _jsx(Box, { sx: {
+                                    maxWidth: '85%',
+                                    p: 2,
+                                    borderRadius: 2,
+                                    backgroundColor: isUser ? 'accent.emphasis' : 'canvas.subtle',
+                                    // Use primary-button text token for better contrast when
+                                    // accent.emphasis is bright (e.g. Matrix dark theme).
+                                    color: isUser
+                                        ? 'var(--button-primary-fgColor-rest, var(--fgColor-onEmphasis))'
+                                        : 'fg.default',
+                                    ...streamdownCodeBlockStyles,
+                                }, children: isUser ? (_jsx(Text, { sx: {
+                                        fontSize: 1,
+                                        whiteSpace: 'pre-wrap',
+                                        wordBreak: 'break-word',
+                                    }, children: getMessageText(message) })) : (_jsx(Box, { sx: streamdownMarkdownStyles, children: _jsx(Streamdown, { children: getMessageText(message) || (isStreaming ? '...' : '') }) })) })] }) }, message.id));
+            }), showLoadingIndicator && (isLoading || isStreaming) && (_jsx(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    px: padding,
+                    py: 1,
+                }, children: _jsxs(Box, { sx: {
+                        display: 'flex',
+                        gap: 2,
+                        alignItems: 'flex-start',
+                    }, children: [avatarConfig.showAvatars && (_jsx(Box, { sx: {
+                                width: avatarConfig.avatarSize,
+                                height: avatarConfig.avatarSize,
+                                borderRadius: '50%',
+                                bg: avatarConfig.assistantAvatarBg,
+                                color: 'var(--button-primary-fgColor-rest, var(--fgColor-onEmphasis))',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                flexShrink: 0,
+                            }, children: avatarConfig.assistantAvatar })), _jsx(Box, { sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '4px',
+                                p: 2,
+                                borderRadius: 2,
+                                bg: 'canvas.subtle',
+                                minHeight: '32px',
+                            }, children: [0, 0.2, 0.4].map((delay, i) => (_jsx(Box, { sx: {
+                                    width: '8px',
+                                    height: '8px',
+                                    borderRadius: '50%',
+                                    bg: 'fg.muted',
+                                    animation: 'typingPulse 1.4s ease-in-out infinite',
+                                    animationDelay: `${delay}s`,
+                                    '@keyframes typingPulse': {
+                                        '0%, 60%, 100%': {
+                                            transform: 'scale(0.6)',
+                                            opacity: 0.4,
+                                        },
+                                        '30%': {
+                                            transform: 'scale(1)',
+                                            opacity: 1,
+                                        },
+                                    },
+                                } }, i))) })] }) })), _jsx("div", { ref: messagesEndRef })] }));
+}

package/lib/{components/chat/components/elements → chat/messages}/ChatMessages.d.ts

@@ -2,10 +2,10 @@
  * Chat message list component.
  * Renders the list of chat messages with support for custom renderers.
  *
- * @module components/chat/components/elements/ChatMessages
+ * @module chat/messages/ChatMessages
  */
 import React from 'react';
-import type { ChatMessage } from '../../types/message';
+import type { ChatMessage } from '../../types/messages';
 import type { ExtensionRegistry } from '../../extensions/ExtensionRegistry';
 /**
  * ChatMessages props

package/lib/{components/chat/components/elements → chat/messages}/ChatMessages.js

@@ -7,14 +7,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Chat message list component.
  * Renders the list of chat messages with support for custom renderers.
  *
- * @module components/chat/components/elements/ChatMessages
+ * @module chat/messages/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';
+import { useChatMessages, useChatExtensionRegistry, } from '../../stores/chatStore';
 /**
  * Chat Messages component
  */
@@ -70,8 +70,10 @@ export function ChatMessages({ messageRenderer, activityRenderer, showTimestamps
                                 : 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: {
+                            color: message.role === 'user'
+                                ? 'fg.default'
+                                : 'var(--button-primary-fgColor-rest, var(--fgColor-onEmphasis))',
+                        }, children: message.role === 'user' ? (_jsx(PersonIcon, { size: 16 })) : message.role === 'assistant' ? (_jsx(AiAgentIcon, { size: 16 })) : (_jsx(ToolsIcon, { size: 16 })) }) })), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsxs(Box, { sx: {
                                 display: 'flex',
                                 alignItems: 'center',
                                 gap: 2,

package/lib/{components/chat/components → chat}/parts/DynamicToolPart.d.ts

@@ -2,7 +2,7 @@
  * Dynamic tool display component.
  * Renders dynamic tool UI parts with placeholder/warning styling.
  *
- * @module components/chat/components/display/DynamicToolPart
+ * @module chat/display/DynamicToolPart
  */
 import type { DynamicToolUIPart } from 'ai';
 export interface DynamicToolPartProps {

package/lib/{components/chat/components/elements → chat/parts}/MessagePart.d.ts

@@ -2,7 +2,7 @@
  * Message part renderer component.
  * Routes message parts to appropriate display components based on type.
  *
- * @module components/chat/components/elements/MessagePart
+ * @module chat/parts/MessagePart
  */
 import type { UIDataTypes, UIMessagePart, UITools, UIMessage } from 'ai';
 /**