@datalayer/agent-runtimes 1.3.75 → 1.3.78

package/lib/chat/assistant/BalloonParts.js

@@ -2,10 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { CheckIcon, ToolsIcon, XIcon } from '@primer/octicons-react';
-import { SpecMark, hasMark, marksOfToolCall } from '../marks';
 import { TypingDots } from '../indicators/TypingDots';
-import { toolAnnouncement, toolLineParts, } from './toolLine';
+import { ChatMessageList } from '../messages/ChatMessageList';
+import { ChatMarkdown } from '../messages/ChatMarkdown';
+import { agentRuntimeStore } from '../../stores/agentRuntimeStore';
+import { toolAnnouncement, displayItemOfLine, } from './toolLine';
 /** Out of sight, still heard. */
 const VISUALLY_HIDDEN = {
     position: 'absolute',
@@ -15,42 +16,48 @@ const VISUALLY_HIDDEN = {
     clip: 'rect(0 0 0 0)',
     whiteSpace: 'nowrap',
 };
-const PHASE_COLOR = {
-    running: 'fg.muted',
-    done: 'success.fg',
-    failed: 'danger.fg',
+/** How the balloon's chat items know their people: no avatars are drawn. */
+const BALLOON_AVATARS = {
+    userAvatar: null,
+    assistantAvatar: null,
+    showAvatars: false,
+    avatarSize: 0,
+    userAvatarBg: 'neutral.muted',
+    assistantAvatarBg: 'accent.emphasis',
 };
 /**
- * A tool call in the balloon, in plain words: its mark when the catalogue
- * gives one (an MCP server's, a skill's, a tool set's), else a tool; "Using
- * **list_invoices**…", "Done: **list_invoices**", "**list_invoices** failed".
+ * Inline approvals answered in the balloon go where the chat's go: the
+ * shared monitoring socket.
+ */
+async function respondInBalloon(_toolCallId, result) {
+    if (result && typeof result === 'object') {
+        const record = result;
+        if (record.type === 'tool-approval-decision' &&
+            typeof record.approved === 'boolean' &&
+            typeof record.approvalId === 'string') {
+            agentRuntimeStore
+                .getState()
+                .sendDecision(record.approvalId, record.approved);
+        }
+    }
+}
+/**
+ * The conversation's items in the balloon, drawn by the chat's own
+ * components (`ChatMessageList`): markdown, code blocks, tool calls and
+ * their approvals, notes, the three dots — in the compact density, or the
+ * chat's own when drawn large.
+ */
+export function BalloonChatItems({ items, density = 'compact', waiting = false, }) {
+    const end = useRef(null);
+    return (_jsx(Box, { "data-balloon-chat-items": "", sx: { minWidth: 0 }, children: _jsx(ChatMessageList, { displayItems: items, isLoading: waiting, isStreaming: false, showLoadingIndicator: waiting, hideMessagesAfterToolUI: false, avatarConfig: BALLOON_AVATARS, padding: 0, onRespond: respondInBalloon, messagesEndRef: end, emptyContent: waiting ? _jsx(TypingDots, { size: 6 }) : null, density: density }) }));
+}
+/**
+ * The tool being called, in the balloon: the chat's tool call card, compact,
+ * with its runtime's own words (`Asking Accounting…`) as its summary.
  * Seen, not read out: {@link ToolLineAnnouncer} says it once per change.
  */
-export function BalloonToolLineView({ line, }) {
-    const { before, name, after } = toolLineParts(line);
-    const marks = line.tool ? marksOfToolCall(line.tool, undefined) : null;
-    const Icon = line.phase === 'done'
-        ? CheckIcon
-        : line.phase === 'failed'
-            ? XIcon
-            : ToolsIcon;
-    return (_jsxs(Box, { as: "span", "aria-hidden": "true", "data-balloon-tool": line.phase, "data-balloon-tool-name": line.tool || undefined, sx: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 1,
-            minWidth: 0,
-            maxWidth: '100%',
-            color: line.phase === 'failed' ? 'danger.fg' : 'fg.default',
-        }, children: [_jsx(Box, { as: "span", sx: {
-                    display: 'inline-flex',
-                    flexShrink: 0,
-                    color: PHASE_COLOR[line.phase],
-                }, children: line.phase === 'running' && hasMark(marks) ? (_jsx(SpecMark, { icon: marks?.icon, emoji: marks?.emoji, size: 14 })) : (_jsx(Icon, { size: 14 })) }), _jsxs(Box, { as: "span", sx: {
-                    minWidth: 0,
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                }, children: [before, name ? (_jsx(Box, { as: "strong", sx: { fontWeight: 'semibold' }, children: name })) : null, after] })] }));
+export function BalloonToolCall({ line, waiting = false, }) {
+    return (_jsx(Box, { "aria-hidden": "true", "data-balloon-tool": line.phase, "data-balloon-tool-name": line.tool || undefined, sx: { minWidth: 0, width: '100%' }, children: _jsx(BalloonChatItems, { items: [displayItemOfLine(line)], waiting: waiting }) }));
 }
 /**
  * What a screen reader hears of the tool lines, politely: once when a call
@@ -139,19 +146,17 @@ export function CurrentBalloonBody({ text, tool, busy = false, speaking = false,
         }
         onOverflow(element.scrollHeight > element.clientHeight + 1);
     }, [text, whole, onOverflow]);
-    return (_jsxs(Box, { "data-balloon-current": "", sx: { display: 'flex', flexDirection: 'column', gap: 1, minWidth: 0 }, children: [_jsx(BalloonNow, { busy: busy }), tool ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(BalloonToolLineView, { line: tool }), waiting && _jsx(TypingDots, { size: 5 })] })) : text ? (_jsxs(Box, { "aria-live": "polite", "aria-busy": speaking, ref: textRef, "data-balloon-current-text": whole ? 'whole' : '', sx: whole
+    return (_jsxs(Box, { "data-balloon-current": "", sx: { display: 'flex', flexDirection: 'column', gap: 1, minWidth: 0 }, children: [_jsx(BalloonNow, { busy: busy }), tool ? (_jsx(BalloonToolCall, { line: tool, waiting: waiting })) : text ? (_jsxs(Box, { "aria-live": "polite", "aria-busy": speaking, ref: textRef, "data-balloon-current-text": whole ? 'whole' : '', sx: whole
                     ? {
                         maxHeight: 240,
                         overflowY: 'auto',
                         overflowWrap: 'anywhere',
-                        whiteSpace: 'pre-wrap',
                         pr: 1,
                     }
                     : {
-                        display: '-webkit-box',
-                        WebkitLineClamp: 4,
-                        WebkitBoxOrient: 'vertical',
+                        // About four lines; *more* shows the rest.
+                        maxHeight: '5.6em',
                         overflow: 'hidden',
                         overflowWrap: 'anywhere',
-                    }, children: [whole ? (fullText ?? text) : text, waiting && (_jsx(Box, { as: "span", sx: { ml: 2, display: 'inline-flex' }, children: _jsx(TypingDots, { size: 5 }) }))] })) : waiting ? (_jsx(TypingDots, { size: 6 })) : null, attachment, _jsx(ToolLineAnnouncer, { line: tool })] }));
+                    }, children: [_jsx(ChatMarkdown, { density: "compact", text: whole ? (fullText ?? text) : text }), waiting && (_jsx(Box, { as: "span", sx: { ml: 2, display: 'inline-flex' }, children: _jsx(TypingDots, { size: 5 }) }))] })) : waiting ? (_jsx(TypingDots, { size: 6 })) : null, attachment, _jsx(ToolLineAnnouncer, { line: tool })] }));
 }

package/lib/chat/assistant/BalloonVisual.js

@@ -31,12 +31,13 @@ export function ExpandedVisual({ visual, target, onClose, }) {
         }
         return createPortal(_jsxs(Box, { "data-balloon-expanded": "target", "data-balloon-visual": visual.id, sx: { position: 'relative', minWidth: 0 }, children: [_jsx(Box, { sx: { position: 'absolute', top: 0, right: 0, zIndex: 1 }, children: _jsx(IconButton, { icon: visual.shrink ? ScreenNormalIcon : XIcon, size: "small", variant: "invisible", "aria-label": `${visual.shrink ? 'Shrink' : 'Close'} ${visual.title}`, "data-balloon-expanded-close": "", ...(visual.shrink ? { 'data-balloon-shrink': '' } : {}), onClick: onClose }) }), visual.render('target')] }), element);
     }
+    // The dialog's × (and Esc) is what shrinks it back: no Shrink of its own.
     return (_jsx(Dialog, { title: visual.title, onClose: onClose, sx: {
             width: EXPANDED_DIALOG_SIZE.width,
             maxWidth: EXPANDED_DIALOG_SIZE.width,
             height: EXPANDED_DIALOG_SIZE.height,
             maxHeight: EXPANDED_DIALOG_SIZE.height,
-        }, children: _jsxs(Box, { "data-balloon-expanded": "overlay", "data-balloon-visual": visual.id, sx: { minWidth: 0 }, children: [visual.shrink && (_jsx(Button, { size: "small", variant: "invisible", leadingVisual: ScreenNormalIcon, onClick: onClose, "data-balloon-shrink": "", sx: { float: 'right' }, children: "Shrink" })), visual.render('overlay')] }) }));
+        }, children: _jsx(Box, { "data-balloon-expanded": "overlay", "data-balloon-visual": visual.id, sx: { minWidth: 0 }, children: visual.render('overlay') }) }));
 }
 /**
  * Brings an expanded visual into view in its target: scrolled to, and the

package/lib/chat/assistant/SandboxDetailsDialog.d.ts

@@ -0,0 +1,44 @@
+/**
+ * *Code Sandbox Details…*, from the assistant's menu: where the agent's
+ * code runs, and what is in it.
+ *
+ * A compact summary first — the kind and where, its URL (without its
+ * tokens), the kernel (name, id, language, status), a cloud runtime's uid,
+ * environment and time left, a local server's agent, Pyodide's version and
+ * packages, when it started and was last active — each field shown only
+ * when it is known. Then the kernel's variables: jupyter-react's
+ * `KernelVariables`, with its renderers, ipywidgets drawn live where the
+ * page talks to the kernel.
+ *
+ * How the variables are read, by what the page can reach:
+ * - a kernel connection the host holds (the browser's Pyodide kernel):
+ *   listed live, refreshed after each execution;
+ * - a Jupyter server and the sandbox's kernel id (a local server, a cloud
+ *   runtime): a connection to that kernel is opened here, and closed with
+ *   the dialog;
+ * - neither (an `eval` sandbox, a provider's, a server whose token the page
+ *   does not hold): the agent-runtimes server runs the same snippet in the
+ *   agent's sandbox (`POST /api/v1/sandbox/execute`), listed on demand.
+ *
+ * Loaded when it is first opened, never with the character.
+ *
+ * @module chat/assistant/SandboxDetailsDialog
+ */
+import type { JSX } from 'react';
+import { type AssistantSandbox } from './assistantDetails';
+export type SandboxDetailsDialogProps = {
+    sandbox: AssistantSandbox;
+    /** The agent's name, for the title. */
+    name: string;
+    onClose: () => void;
+};
+/** Pyodide's version and loaded packages, asked of the kernel. */
+type PyodideFacts = {
+    version?: string;
+    python?: string;
+    packages: string[];
+};
+/** Pyodide's facts out of what the snippet printed. */
+export declare function parsePyodideFacts(stdout: string): PyodideFacts | undefined;
+export declare function SandboxDetailsDialog({ sandbox, name, onClose, }: SandboxDetailsDialogProps): JSX.Element;
+export default SandboxDetailsDialog;

package/lib/chat/assistant/SandboxDetailsDialog.js

@@ -0,0 +1,214 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { Button, Dialog, Heading, IconButton, Label, Link, Text, } from '@primer/react';
+import { CheckIcon, CopyIcon } from '@primer/octicons-react';
+import { Box } from '@datalayer/primer-addons';
+import { KernelAPI, KernelConnection, ServerConnection, } from '@jupyterlab/services';
+import { KernelVariables, executeSilently, } from '@datalayer/jupyter-react';
+import { NO_SANDBOX_YET, SANDBOX_KIND_LABELS, displayUrl, sandboxIsLive, sandboxExecuteOverHttp, timeLeft, } from './assistantDetails';
+/** A status, as a Primer label. */
+function StatusLabel({ status }) {
+    const variant = status === 'running' || status === 'idle'
+        ? 'success'
+        : status === 'busy' || status === 'starting'
+            ? 'attention'
+            : status === 'error' || status === 'dead'
+                ? 'danger'
+                : 'secondary';
+    return (_jsx(Label, { variant: variant, size: "small", "data-sandbox-status": status, children: status }));
+}
+/** A URL, linked, with a copy button. */
+function UrlValue({ url }) {
+    const [copied, setCopied] = useState(false);
+    return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, minWidth: 0 }, children: [_jsx(Link, { href: url, target: "_blank", rel: "noreferrer", sx: { fontFamily: 'mono', fontSize: 0, wordBreak: 'break-all' }, children: url }), _jsx(IconButton, { icon: copied ? CheckIcon : CopyIcon, "aria-label": "Copy the URL", size: "small", variant: "invisible", onClick: () => {
+                    void navigator.clipboard?.writeText(url).then(() => {
+                        setCopied(true);
+                        setTimeout(() => setCopied(false), 1500);
+                    });
+                } })] }));
+}
+/** A moment, for a reader. */
+function moment(value) {
+    if (value === undefined || value === '') {
+        return undefined;
+    }
+    const at = typeof value === 'number'
+        ? new Date(value < 1e12 ? value * 1000 : value)
+        : new Date(value);
+    return Number.isNaN(at.getTime()) ? undefined : at.toLocaleString();
+}
+const PYODIDE_MARKER = '__DL_PYODIDE__';
+const PYODIDE_SNIPPET = `def __dl_pyodide():
+    import json, sys
+    facts = {'python': sys.version.split()[0], 'packages': []}
+    try:
+        import pyodide
+        facts['version'] = pyodide.__version__
+    except Exception:
+        pass
+    try:
+        import pyodide_js
+        facts['packages'] = sorted(str(k) for k in pyodide_js.loadedPackages.object_keys())
+    except Exception:
+        pass
+    print('${PYODIDE_MARKER}' + json.dumps(facts) + '${PYODIDE_MARKER}')
+try:
+    __dl_pyodide()
+finally:
+    del __dl_pyodide
+`;
+/** Pyodide's facts out of what the snippet printed. */
+export function parsePyodideFacts(stdout) {
+    const end = stdout.lastIndexOf(PYODIDE_MARKER);
+    const start = end > 0 ? stdout.lastIndexOf(PYODIDE_MARKER, end - 1) : -1;
+    if (start < 0) {
+        return undefined;
+    }
+    try {
+        const facts = JSON.parse(stdout.slice(start + PYODIDE_MARKER.length, end));
+        return {
+            version: facts.version,
+            python: facts.python,
+            packages: Array.isArray(facts.packages) ? facts.packages : [],
+        };
+    }
+    catch {
+        return undefined;
+    }
+}
+/** The kernel connection the dialog lists from: the host's, or one opened here. */
+function useKernelConnection(sandbox) {
+    const [opened, setOpened] = useState(null);
+    const { connection, url, token, kernelId, kind } = sandbox;
+    const live = sandboxIsLive(sandbox);
+    useEffect(() => {
+        if (connection || !url || !kernelId || kind === 'browser' || !live) {
+            return;
+        }
+        const base = url.replace(/\/+$/, '') + '/';
+        const serverSettings = ServerConnection.makeSettings({
+            baseUrl: base,
+            wsUrl: base.replace(/^http/, 'ws'),
+            token: token ?? '',
+            appendToken: true,
+        });
+        const opening = new KernelConnection({
+            model: { id: kernelId, name: '' },
+            serverSettings,
+            handleComms: true,
+        });
+        setOpened(opening);
+        return () => {
+            setOpened(null);
+            opening.dispose();
+        };
+    }, [connection, url, token, kernelId, kind, live]);
+    return live ? (connection ?? opened) : null;
+}
+export function SandboxDetailsDialog({ sandbox, name, onClose, }) {
+    const connection = useKernelConnection(sandbox);
+    const [kernel, setKernel] = useState({});
+    const [pyodide, setPyodide] = useState();
+    const [showPackages, setShowPackages] = useState(false);
+    // The kernel, as it says it is: its name, language, status, last activity.
+    useEffect(() => {
+        if (!connection) {
+            setKernel({});
+            return;
+        }
+        let cancelled = false;
+        const update = (next) => !cancelled && setKernel(current => ({ ...current, ...next }));
+        update({
+            id: connection.id,
+            name: connection.name || undefined,
+            status: connection.status,
+        });
+        connection.info
+            .then(info => update({
+            language: [info.language_info?.name, info.language_info?.version]
+                .filter(Boolean)
+                .join(' '),
+        }))
+            .catch(() => undefined);
+        if (sandbox.kind !== 'browser') {
+            KernelAPI.getKernelModel(connection.id, connection.serverSettings)
+                .then(model => update({
+                name: model?.name || undefined,
+                lastActivity: model?.last_activity,
+            }))
+                .catch(() => undefined);
+        }
+        const onStatus = (_, status) => update({ status });
+        connection.statusChanged.connect(onStatus);
+        return () => {
+            cancelled = true;
+            connection.statusChanged.disconnect(onStatus);
+        };
+    }, [connection, sandbox.kind]);
+    // Pyodide's version and packages, asked once of the browser kernel.
+    useEffect(() => {
+        if (sandbox.kind !== 'browser' || !connection) {
+            return;
+        }
+        let cancelled = false;
+        executeSilently(connection, PYODIDE_SNIPPET)
+            .then(({ stdout }) => {
+            if (!cancelled) {
+                setPyodide(parsePyodideFacts(stdout));
+            }
+        })
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, [connection, sandbox.kind]);
+    // Without a connection, the agent's server runs the snippet in its sandbox.
+    const execute = useMemo(() => 
+    // Not before the sandbox is up: the server would start one to answer.
+    !connection && sandbox.serverUrl && sandboxIsLive(sandbox)
+        ? sandboxExecuteOverHttp(sandbox.serverUrl, sandbox.agentId)
+        : undefined, [connection, sandbox.serverUrl, sandbox.agentId]);
+    const url = displayUrl(sandbox.url ?? sandbox.serverUrl);
+    const left = timeLeft(sandbox.expiresAt);
+    const facts = [];
+    const add = (key, value) => {
+        if (value !== undefined && value !== null && value !== '') {
+            facts.push([key, value]);
+        }
+    };
+    add('Environment', sandbox.environment);
+    add('URL', url ? _jsx(UrlValue, { url: url }) : undefined);
+    add('Kernel', kernel.name || kernel.id ? (_jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: [kernel.name, kernel.id?.slice(0, 8)].filter(Boolean).join(' · ') })) : undefined);
+    add('Language', kernel.language);
+    add('Kernel status', kernel.status ? _jsx(StatusLabel, { status: kernel.status }) : undefined);
+    add('Agent', sandbox.kind === 'local' || sandbox.kind === 'runtime'
+        ? sandbox.agentId
+        : undefined);
+    add('Runtime', sandbox.runtimeUid);
+    add('Time left', left);
+    add('Burning rate', sandbox.burningRate !== undefined
+        ? `${sandbox.burningRate} credits/h`
+        : undefined);
+    add('Pyodide', pyodide?.version);
+    add('Packages', pyodide && pyodide.packages.length > 0 ? (_jsxs(Box, { children: [_jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowPackages(!showPackages), "aria-expanded": showPackages, sx: { px: 1 }, children: `${pyodide.packages.length} loaded` }), showPackages && (_jsx(Text, { as: "p", sx: { m: 0, mt: 1, fontFamily: 'mono', fontSize: 0 }, "data-sandbox-packages": "", children: pyodide.packages.join(', ') }))] })) : undefined);
+    add('Started', moment(sandbox.startedAt));
+    add('Last activity', moment(sandbox.lastActivity ?? kernel.lastActivity));
+    return (_jsx(Dialog, { title: `${name} · Code Sandbox`, onClose: onClose, width: "xlarge", height: "large", children: _jsxs(Box, { "data-assistant-sandbox-details": "", sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsxs(Box, { "data-sandbox-summary": "", sx: {
+                        p: 3,
+                        bg: 'canvas.subtle',
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        borderRadius: 2,
+                    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'semibold' }, "data-sandbox-kind": sandbox.kind, children: [SANDBOX_KIND_LABELS[sandbox.kind], sandbox.kind === 'runtime' && sandbox.variant
+                                            ? ` (${sandbox.variant})`
+                                            : ''] }), sandbox.status && _jsx(StatusLabel, { status: sandbox.status })] }), _jsx(Box, { as: "dl", sx: {
+                                display: 'grid',
+                                gridTemplateColumns: 'max-content minmax(0, 1fr)',
+                                columnGap: 3,
+                                rowGap: 1,
+                                m: 0,
+                                fontSize: 1,
+                                alignItems: 'center',
+                            }, children: facts.map(([key, value]) => (_jsxs(Box, { sx: { display: 'contents' }, children: [_jsx(Box, { as: "dt", sx: { color: 'fg.muted' }, children: key }), _jsx(Box, { as: "dd", sx: { m: 0, minWidth: 0 }, "data-sandbox-fact": key, children: value })] }, key))) })] }), _jsxs(Box, { children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: "Variables" }), sandboxIsLive(sandbox) ? (_jsx(KernelVariables, { connection: connection, execute: execute, maxHeight: "calc(80vh - 360px)" })) : (_jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, "data-sandbox-not-running": "", children: NO_SANDBOX_YET }))] })] }) }));
+}
+export default SandboxDetailsDialog;

package/lib/chat/assistant/SpeechBalloon.d.ts

@@ -26,9 +26,10 @@
  * @module chat/assistant/SpeechBalloon
  */
 import type { JSX, ReactNode } from 'react';
-import { type BalloonApproval, type BalloonHistoryMessage } from './state';
+import { type BalloonApproval } from './state';
+import type { DisplayItem } from '../../types/chat';
 import type { DecisionAsker } from './decisions';
-import type { BalloonDisplay, BalloonToolLine } from './toolLine';
+import { type BalloonDisplay, type BalloonToolLine } from './toolLine';
 /** A suggestion the balloon offers: its label, and the prompt it sends. */
 export type BalloonSuggestion = {
     label: string;
@@ -77,10 +78,11 @@ export interface SpeechBalloonProps {
     /** What goes with the words, under them: a notebook given, read-only. */
     attachment?: ReactNode;
     /**
-     * The conversation's messages (`history`): listed in the balloon, every
-     * one, in place of the newest line alone.
+     * The conversation (`history`), in the chat's own model — its messages
+     * and tool calls, as the chat holds them — listed in the balloon by the
+     * chat's own components, in place of the newest line alone.
      */
-    history?: readonly BalloonHistoryMessage[];
+    history?: readonly DisplayItem[];
     /**
      * What goes with the words is a large visual (a notebook): an *Expand*
      * button under it draws it large, named by `expandTitle`.
@@ -122,7 +124,7 @@ export declare const BALLOON_HISTORY_WITH_ATTACHMENT_MAX_HEIGHT = 120;
  * scrolled there.
  */
 export declare function BalloonHistoryLarge({ history, tool, attachment, }: {
-    history: readonly BalloonHistoryMessage[];
+    history: readonly DisplayItem[];
     tool?: BalloonToolLine;
     attachment?: ReactNode;
 }): JSX.Element;

package/lib/chat/assistant/SpeechBalloon.js

@@ -3,13 +3,13 @@ import { useEffect, useRef, useState } from 'react';
 import { Button, IconButton, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { XIcon } from '@primer/octicons-react';
-import { ASSISTANT_WORDS, } from './state';
+import { ASSISTANT_WORDS } from './state';
 import { moreWaiting } from './ConversationBalloon';
 import { DecisionAsk } from './DecisionAsk';
-import { BalloonToolLineView, CurrentBalloonBody, ToolLineAnnouncer, conversationHeaderText, } from './BalloonParts';
+import { BalloonChatItems, BalloonToolCall, CurrentBalloonBody, ToolLineAnnouncer, conversationHeaderText, } from './BalloonParts';
+import { conversationCount, withToolCall, } from './toolLine';
 import { BalloonExpandButton } from './BalloonVisual';
 import { ScreenFullIcon } from '@primer/octicons-react';
-import { TypingDots } from '../indicators/TypingDots';
 /** The suggestions, as chips: each sends its prompt. */
 export function BalloonSuggestions({ suggestions, onSuggestion, }) {
     return (_jsx(Box, { role: "group", "aria-label": "Suggestions", "data-balloon-suggestions": "", sx: { display: 'flex', flexWrap: 'wrap', gap: 1, mt: 2 }, children: suggestions.map(suggestion => (_jsx(Button, { size: "small", "data-balloon-suggestion": suggestion.label, "aria-label": `Ask: ${suggestion.prompt}`, title: suggestion.prompt, onClick: () => onSuggestion(suggestion), sx: { borderRadius: 999 }, children: suggestion.label }, suggestion.label))) }));
@@ -29,18 +29,9 @@ export const BALLOON_HISTORY_WITH_ATTACHMENT_MAX_HEIGHT = 120;
  * scrolled there.
  */
 export function BalloonHistoryLarge({ history, tool, attachment, }) {
-    return (_jsxs(Box, { role: "log", "aria-label": "Conversation", "data-balloon-history-large": "", sx: { display: 'flex', flexDirection: 'column', gap: 2, fontSize: 1 }, children: [history.map(message => (_jsx(Box, { "data-balloon-history-message": message.role, sx: {
-                    alignSelf: message.role === 'user' ? 'flex-end' : 'flex-start',
-                    maxWidth: '80%',
-                    px: 3,
-                    py: 2,
-                    borderRadius: 2,
-                    bg: message.role === 'user' ? 'accent.subtle' : 'canvas.subtle',
-                    whiteSpace: 'pre-wrap',
-                    overflowWrap: 'anywhere',
-                }, children: message.text }, message.id))), tool ? _jsx(BalloonToolLineView, { line: tool }) : null, attachment ? _jsx(Box, { children: attachment }) : null] }));
+    return (_jsxs(Box, { role: "log", "aria-label": "Conversation", "data-balloon-history-large": "", sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(BalloonChatItems, { items: withToolCall(history, tool), density: "comfortable" }), attachment ? _jsx(Box, { children: attachment }) : null] }));
 }
-function BalloonHistory({ history, onOpen, maxHeight = BALLOON_HISTORY_MAX_HEIGHT, onExpand, }) {
+function BalloonHistory({ history, onOpen, maxHeight = BALLOON_HISTORY_MAX_HEIGHT, onExpand, tool, waiting = false, }) {
     const listRef = useRef(null);
     const newest = history[history.length - 1]?.id;
     useEffect(() => {
@@ -48,7 +39,21 @@ function BalloonHistory({ history, onOpen, maxHeight = BALLOON_HISTORY_MAX_HEIGH
         if (list) {
             list.scrollTop = list.scrollHeight;
         }
-    }, [history.length, newest]);
+    }, [history.length, newest, waiting, tool?.id, tool?.phase]);
+    // The chat's markdown draws after the list does: kept at the newest as
+    // what is drawn grows.
+    useEffect(() => {
+        const list = listRef.current;
+        const content = list?.firstElementChild;
+        if (!list || !content || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(() => {
+            list.scrollTop = list.scrollHeight;
+        });
+        observer.observe(content);
+        return () => observer.disconnect();
+    }, []);
     return (_jsxs(Box, { "data-balloon-history": "", sx: { flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }, children: [_jsx(Box, { as: "button", type: "button", "data-balloon-peek": "", "data-balloon-header": "", onClick: onOpen, sx: {
                     m: 0,
                     p: 0,
@@ -62,22 +67,13 @@ function BalloonHistory({ history, onOpen, maxHeight = BALLOON_HISTORY_MAX_HEIGH
                     fontWeight: 'semibold',
                     color: 'fg.muted',
                     '&:hover': { textDecoration: 'underline' },
-                }, children: conversationHeaderText(history.length) }), onExpand ? (_jsx(IconButton, { icon: ScreenFullIcon, size: "small", variant: "invisible", "aria-label": "Expand the conversation", "data-balloon-history-expand": "", onClick: onExpand, sx: { position: 'absolute', top: '4px', right: '28px' } })) : null, _jsx(Box, { ref: listRef, role: "log", "aria-label": "Conversation", "data-balloon-history-list": "", sx: {
+                }, children: conversationHeaderText(conversationCount(history)) }), onExpand ? (_jsx(IconButton, { icon: ScreenFullIcon, size: "small", variant: "invisible", "aria-label": "Expand the conversation", "data-balloon-history-expand": "", onClick: onExpand, sx: { position: 'absolute', top: '4px', right: '28px' } })) : null, _jsx(Box, { ref: listRef, role: "log", "aria-label": "Conversation", "data-balloon-history-list": "", sx: {
                     maxHeight,
                     overflowY: 'auto',
                     display: 'flex',
                     flexDirection: 'column',
-                    gap: 1,
                     pr: 1,
-                }, children: history.map(message => (_jsx(Box, { "data-balloon-history-message": message.role, sx: {
-                        alignSelf: message.role === 'user' ? 'flex-end' : 'flex-start',
-                        maxWidth: '88%',
-                        px: 2,
-                        py: 1,
-                        borderRadius: 2,
-                        bg: message.role === 'user' ? 'accent.subtle' : 'canvas.subtle',
-                        overflowWrap: 'anywhere',
-                    }, children: message.text }, message.id))) })] }));
+                }, children: _jsx(BalloonChatItems, { items: withToolCall(history, tool), waiting: waiting }) })] }));
 }
 export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above', align, tailAt, approval, decide, onDecisionActive, wide = false, onDismissPeek, display = 'history', tool, speaking = false, busy = false, attachment, history, onExpand, expandTitle, suggestions, onSuggestion, waiting = false, fullText, onExpandHistory, }) {
     // *more*: the words whole, when they were cut or overflow their lines.
@@ -147,9 +143,12 @@ export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above
                             font: 'inherit',
                             textAlign: 'left',
                             cursor: 'pointer',
-                        }, children: _jsx(CurrentBalloonBody, { text: text, tool: tool, busy: busy, speaking: speaking, waiting: waiting, whole: whole, fullText: wholeText, onOverflow: setOverflowing }) })) : listed ? (_jsx(BalloonHistory, { history: listed, onOpen: onOpen, onExpand: onExpandHistory, maxHeight: attachment
+                        }, children: _jsx(CurrentBalloonBody, { text: text, tool: tool, busy: busy, speaking: speaking, waiting: waiting, whole: whole, fullText: wholeText, onOverflow: setOverflowing }) })) : listed ? (_jsx(BalloonHistory, { history: listed, onOpen: onOpen, onExpand: onExpandHistory, tool: tool, waiting: waiting, maxHeight: attachment
                             ? BALLOON_HISTORY_WITH_ATTACHMENT_MAX_HEIGHT
-                            : BALLOON_HISTORY_MAX_HEIGHT })) : (_jsx(Box, { as: "button", type: "button", "data-balloon-peek": "", "data-balloon-more": more ? '' : undefined, onClick: onOpen, sx: {
+                            : BALLOON_HISTORY_MAX_HEIGHT })) : tool ? (
+                    // The tool being called: the chat's card, not inside the peek's
+                    // button (the card is a button of its own).
+                    _jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(BalloonToolCall, { line: tool }) })) : (_jsx(Box, { as: "button", type: "button", "data-balloon-peek": "", "data-balloon-more": more ? '' : undefined, onClick: onOpen, sx: {
                             flex: 1,
                             minWidth: 0,
                             m: 0,
@@ -161,7 +160,7 @@ export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above
                             textAlign: 'left',
                             cursor: 'pointer',
                             '&:hover': { textDecoration: 'underline' },
-                        }, children: tool ? (_jsx(BalloonToolLineView, { line: tool })) : (_jsx(Box, { as: "span", role: "status", "aria-live": "polite", children: text })) })), onDismissPeek && !approval ? (_jsx(IconButton, { icon: XIcon, size: "small", variant: "invisible", "aria-label": "Dismiss", "data-balloon-dismiss": "", onClick: onDismissPeek, sx: { mt: '-4px', mr: '-8px', flexShrink: 0 } })) : null] }), current && !approval && !tool && (cut || overflowing || whole) ? (_jsx(Box, { as: "button", type: "button", "aria-expanded": whole, "data-balloon-whole": whole ? 'less' : 'more', onClick: () => setWhole(!whole), sx: {
+                        }, children: _jsx(Box, { as: "span", role: "status", "aria-live": "polite", children: text }) })), onDismissPeek && !approval ? (_jsx(IconButton, { icon: XIcon, size: "small", variant: "invisible", "aria-label": "Dismiss", "data-balloon-dismiss": "", onClick: onDismissPeek, sx: { mt: '-4px', mr: '-8px', flexShrink: 0 } })) : null] }), current && !approval && !tool && (cut || overflowing || whole) ? (_jsx(Box, { as: "button", type: "button", "aria-expanded": whole, "data-balloon-whole": whole ? 'less' : 'more', onClick: () => setWhole(!whole), sx: {
                     m: 0,
                     mt: 1,
                     p: 0,
@@ -172,6 +171,6 @@ export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above
                     fontSize: 0,
                     cursor: 'pointer',
                     '&:hover': { textDecoration: 'underline' },
-                }, children: whole ? 'less' : 'more' })) : null, listed && tool ? (_jsx(Box, { "data-balloon-history-tool": "", sx: { mt: 1 }, children: _jsx(BalloonToolLineView, { line: tool }) })) : null, !current && waiting ? (_jsx(Box, { "data-balloon-waiting": "", sx: { mt: 1 }, children: _jsx(TypingDots, { size: 6 }) })) : null, approval && (_jsxs(Box, { "data-balloon-approval": approval.id, sx: { mt: 1 }, children: [_jsx(Text, { as: "p", sx: { m: 0, fontWeight: 'semibold' }, children: approval.asks }), approval.why ? (_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: approval.why })) : null, _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 2 }, children: [_jsx(Button, { size: "small", variant: "primary", disabled: approval.deciding, onClick: approval.onApprove, children: ASSISTANT_WORDS.approve }), _jsx(Button, { size: "small", disabled: approval.deciding, onClick: approval.onDeny, children: ASSISTANT_WORDS.deny })] }), approval.others > 0 ? (_jsx(Text, { as: "p", sx: { m: 0, mt: 1, color: 'fg.muted', fontSize: 0 }, children: moreWaiting(approval.others) })) : null] })), offered && onSuggestion ? (_jsx(BalloonSuggestions, { suggestions: offered, onSuggestion: onSuggestion })) : null, attachment ? (_jsxs(Box, { "data-balloon-attachment": "", sx: { mt: 2, display: 'flex', flexDirection: 'column', gap: 1 }, children: [attachment, onExpand ? (_jsx(BalloonExpandButton, { title: expandTitle ?? 'the visual', onExpand: onExpand })) : null] })) : null, !current ? _jsx(ToolLineAnnouncer, { line: tool }) : null, decide && _jsx(DecisionAsk, { ask: decide, onActiveChange: onDecisionActive })] }));
+                }, children: whole ? 'less' : 'more' })) : null, !current && !listed && waiting ? (_jsx(Box, { "data-balloon-waiting": "", sx: { mt: 1 }, children: _jsx(BalloonChatItems, { items: [], waiting: true }) })) : null, approval && (_jsxs(Box, { "data-balloon-approval": approval.id, sx: { mt: 1 }, children: [_jsx(Text, { as: "p", sx: { m: 0, fontWeight: 'semibold' }, children: approval.asks }), approval.why ? (_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: approval.why })) : null, _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 2 }, children: [_jsx(Button, { size: "small", variant: "primary", disabled: approval.deciding, onClick: approval.onApprove, children: ASSISTANT_WORDS.approve }), _jsx(Button, { size: "small", disabled: approval.deciding, onClick: approval.onDeny, children: ASSISTANT_WORDS.deny })] }), approval.others > 0 ? (_jsx(Text, { as: "p", sx: { m: 0, mt: 1, color: 'fg.muted', fontSize: 0 }, children: moreWaiting(approval.others) })) : null] })), offered && onSuggestion ? (_jsx(BalloonSuggestions, { suggestions: offered, onSuggestion: onSuggestion })) : null, attachment ? (_jsxs(Box, { "data-balloon-attachment": "", sx: { mt: 2, display: 'flex', flexDirection: 'column', gap: 1 }, children: [attachment, onExpand ? (_jsx(BalloonExpandButton, { title: expandTitle ?? 'the visual', onExpand: onExpand })) : null] })) : null, !current ? _jsx(ToolLineAnnouncer, { line: tool }) : null, decide && _jsx(DecisionAsk, { ask: decide, onActiveChange: onDecisionActive })] }));
 }
 export default SpeechBalloon;