@datalayer/agent-runtimes 1.3.74 → 1.3.75

package/lib/components/teams/A2ATeamGraph.d.ts

@@ -25,6 +25,11 @@
 import type { JSX } from 'react';
 import { type Edge, type EdgeProps, type Viewport } from '@xyflow/react';
 import '@xyflow/react/dist/base.css';
+import { type AssistantAbout } from '../../chat/assistant/AssistantStage';
+import type { BalloonSuggestion } from '../../chat/assistant/SpeechBalloon';
+import type { BalloonHistoryMessage } from '../../chat/assistant/state';
+import type { AssistantMenuItem } from '../../chat/assistant/AssistantContextMenu';
+import type { AgentInspectorSink } from '../inspector/agentInspector';
 import { type A2ATeamCall, type A2ATeamConnection, type A2ATeamFlow } from './a2aTeamFlow';
 import type { A2ATeamPersona } from './useA2ATeam';
 import type { BalloonExpandTarget } from '../../chat/assistant/BalloonVisual';
@@ -65,6 +70,36 @@ export type A2ATeamGraphMember = {
     expandTarget?: BalloonExpandTarget;
     /** What its notebook is called: `Accounting's notebook`. */
     notebookTitle?: string;
+    /**
+     * What the person may ask it: chips in its balloon while it waits for a
+     * question, and a group of its menu; one chosen is sent (`onSuggestion`).
+     */
+    suggestions?: readonly BalloonSuggestion[];
+    onSuggestion?: (suggestion: BalloonSuggestion) => void;
+    /**
+     * The team's Agent Inspector: its menu offers *Inspect the agent…*, its
+     * own record (what it did, and the A2A messages it sent or received).
+     */
+    inspector?: AgentInspectorSink | null;
+    /** Stops its turn, from its menu, while it works. */
+    onStop?: () => void;
+    /** What its menu's *About* says. */
+    about?: AssistantAbout;
+    /** The host's own entries of its menu. */
+    contextMenu?: readonly AssistantMenuItem[];
+    /**
+     * What its menu calls a click on it (`onToggle`): `Ask Sales` where it
+     * takes the person to the composer. Without `onToggle`, its menu has no
+     * such entry.
+     */
+    conversationLabel?: string;
+    /**
+     * What it said and did, as its `history` balloon lists it (`useA2ATeam`'s
+     * `entryHistory`, `peerHistory`): shown when its menu chooses *History*.
+     */
+    history?: readonly BalloonHistoryMessage[];
+    /** Its balloon's display was chosen in its menu: the page may keep it. */
+    onBalloonDisplayChange?: (display: BalloonDisplay) => void;
 };
 export type A2ATeamGraphProps = {
     /** The member that asks: drawn on the left. */
@@ -81,6 +116,12 @@ export type A2ATeamGraphProps = {
     size?: number;
     /** The tool calls running now, to the members' connections (`useA2ATeam`). */
     calls?: A2ATeamCall[];
+    /**
+     * The room above the members for their balloons, in pixels at full scale:
+     * a page that shows suggestions, *more* and a notebook in them gives more.
+     * A notebook in a balloon gets at least its own.
+     */
+    balloonRoom?: number;
 };
 /** The words on the edge for a flow. */
 export declare function flowWords(flow: A2ATeamFlow, entry: string, peer: string): string;
@@ -95,5 +136,5 @@ export declare function callWords(member: string, connection: A2ATeamConnection,
 /** The viewport that shows the graph's width whole in a box `width` wide, never larger than drawn. */
 export declare function teamViewport(width: number): Viewport;
 /** Draw a team of two over A2A, the link moving with what travels on it. */
-export declare function A2ATeamGraph({ entry, peer, flow, connected, label, size, calls, }: A2ATeamGraphProps): JSX.Element;
+export declare function A2ATeamGraph({ entry, peer, flow, connected, label, size, calls, balloonRoom, }: A2ATeamGraphProps): JSX.Element;
 export default A2ATeamGraph;

package/lib/components/teams/A2ATeamGraph.js

@@ -4,7 +4,7 @@ import { BaseEdge, EdgeLabelRenderer, Handle, Position, ReactFlow, } from '@xyfl
 import '@xyflow/react/dist/base.css';
 import { Button, Label, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { AssistantStage } from '../../chat/assistant/AssistantStage';
+import { AssistantStage, } from '../../chat/assistant/AssistantStage';
 import { SpecMark } from '../../chat/marks/SpecMark';
 import { toolWords, } from './a2aTeamFlow';
 import { NotebookPreview } from './NotebookPreview';
@@ -14,7 +14,7 @@ import { toolLineText } from '../../chat/assistant/toolLine';
 const NODE_WIDTH = 200;
 const BALLOON_ROOM = 144;
 /** The room a balloon that holds a notebook needs above its member. */
-const NOTEBOOK_BALLOON_ROOM = 340;
+const NOTEBOOK_BALLOON_ROOM = 480;
 /** How tall the notebook in a balloon grows before it scrolls. */
 const NOTEBOOK_PREVIEW_HEIGHT = 180;
 const GAP = 220;
@@ -50,10 +50,17 @@ const MemberNode = memo(function MemberNode({ data, }) {
     const { id, side, size } = data;
     const member = useContext(Members)[id];
     const stageRef = useRef(null);
+    // Its balloon's display, as its menu changes it.
+    const [display, setDisplay] = useState();
     if (!member) {
         return null;
     }
     const { persona } = member;
+    const shownDisplay = display ?? member.balloonDisplay ?? 'current';
+    // History: what it said and did, listed.
+    const listed = shownDisplay === 'history' && member.history?.length
+        ? { history: member.history }
+        : {};
     // A notebook it was given: read-only in its balloon, and its large visual
     // the one that runs, editable — under the graph, or in a dialog.
     const notebookTitle = member.notebookTitle ?? (persona.notebook?.name || 'The notebook');
@@ -86,24 +93,34 @@ const MemberNode = memo(function MemberNode({ data, }) {
                     // middle of the graph: rightward from the left member.
                     place: side === 'left'
                         ? { position: 'absolute', left: 'auto' }
-                        : { position: 'absolute', right: 'auto' }, stageRef: stageRef, onDragStart: () => undefined, open: false, onToggle: member.onToggle ?? (() => undefined), balloonDisplay: member.balloonDisplay ?? 'current', balloon: persona.tool
+                        : { position: 'absolute', right: 'auto' }, stageRef: stageRef, onDragStart: () => undefined, open: false, onToggle: member.onToggle ?? (() => undefined), balloonDisplay: shownDisplay, onBalloonDisplayChange: next => {
+                        setDisplay(next);
+                        member.onBalloonDisplayChange?.(next);
+                    }, conversationLabel: member.onToggle ? (member.conversationLabel ?? undefined) : false, balloon: persona.tool
                         ? {
                             text: toolLineText(persona.tool),
                             tool: persona.tool,
                             busy: persona.state !== 'idle',
                             ...given,
+                            ...listed,
                         }
                         : persona.saying
                             ? {
                                 text: persona.saying,
+                                ...(persona.full ? { fullText: persona.full } : {}),
                                 more: persona.saying.endsWith('…'),
                                 speaking: persona.state === 'speaking',
                                 busy: persona.state === 'thinking' ||
                                     persona.state === 'working' ||
                                     persona.state === 'speaking',
                                 ...given,
+                                ...listed,
                             }
-                            : undefined, expandTarget: member.expandTarget, expandOnArrival: !!member.expandTarget, insist: persona.insist, onDismiss: away => member.onAway?.(away !== 'none'), 
+                            : 'history' in listed
+                                ? { text: '', ...listed }
+                                : undefined, expandTarget: member.expandTarget, expandOnArrival: !!member.expandTarget, 
+                    // History, chosen in its menu: shown until Current is.
+                    insist: persona.insist || display === 'history', onDismiss: away => member.onAway?.(away !== 'none'), suggestions: member.suggestions, onSuggestion: member.onSuggestion, inspector: member.inspector, inspectAgent: member.name, onStop: member.onStop, about: member.about, contextMenu: member.contextMenu, 
                     // A member of the graph: what is clicked around it is the graph.
                     stayPut: true })) }), _jsxs(Text, { sx: { fontWeight: 600, textAlign: 'center' }, children: [member.emoji ? `${member.emoji} ` : '', member.name] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', textAlign: 'center' }, "data-member-where": "", children: member.where }), _jsx(Handle, { type: "source", position: Position.Right, style: HANDLE(size), isConnectable: false }), member.connections?.length ? (_jsx(Handle, { id: "connections", type: "source", position: Position.Bottom, style: { ...HANDLE(size), top: 'auto', bottom: 0 }, isConnectable: false })) : null] }));
 });
@@ -201,7 +218,7 @@ export function teamViewport(width) {
     return { zoom, x: (width - WIDTH * zoom) / 2, y: 0 };
 }
 /** Draw a team of two over A2A, the link moving with what travels on it. */
-export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size = 96, calls = [], }) {
+export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size = 96, calls = [], balloonRoom = BALLOON_ROOM, }) {
     const box = useRef(null);
     const [width, setWidth] = useState(0);
     useEffect(() => {
@@ -234,8 +251,8 @@ export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size
     const hasConnections = placed.some(({ connections }) => connections.length);
     // A notebook in a balloon: more room above the members.
     const room = [entry, peer].some(member => member.persona.notebook)
-        ? NOTEBOOK_BALLOON_ROOM
-        : BALLOON_ROOM;
+        ? Math.max(NOTEBOOK_BALLOON_ROOM, balloonRoom)
+        : balloonRoom;
     const height = Math.ceil((room +
         memberHeight +
         (hasConnections ? CONNECTION_GAP + connectionHeight : 0)) *

package/lib/components/teams/NotebookPreviewView.js

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { useTheme } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { JupyterReactTheme, Notebook, ServiceManagerLess, } from '@datalayer/jupyter-react';
+import { JUPYTER_DARK_VARIABLES, JUPYTER_LIGHT_VARIABLES, } from './jupyterThemeVariables';
 /** Each preview has its own id in jupyter-react's store. */
 let drawn = 0;
 export function NotebookPreviewView({ nbformat, height, }) {
@@ -16,7 +17,14 @@ export function NotebookPreviewView({ nbformat, height, }) {
     }, [nbformat]);
     const content = useMemo(() => JSON.parse(JSON.stringify(nbformat)), [nbformat]);
     const { colorScheme } = useTheme();
-    return (_jsxs(Box, { "data-notebook-preview-theme": "", sx: { height }, children: [_jsx("span", { "data-jupyter-react-theme-root": "notebook-preview", hidden: true }), _jsx(JupyterReactTheme, { colormode: colorScheme?.startsWith('dark') ? 'dark' : 'light', children: _jsx(Box, { "data-notebook-preview-view": id, sx: {
+    const mode = colorScheme?.startsWith('dark') ? 'dark' : 'light';
+    return (_jsxs(Box, { "data-notebook-preview-theme": mode, sx: { height }, 
+        // JupyterLab writes its theme for the whole page, so two previews in
+        // two modes would share the last one written: each carries its own
+        // mode's variables on its own subtree.
+        style: (mode === 'dark'
+            ? JUPYTER_DARK_VARIABLES
+            : JUPYTER_LIGHT_VARIABLES), children: [_jsx("span", { "data-jupyter-react-theme-root": "notebook-preview", hidden: true }), _jsx(JupyterReactTheme, { colormode: mode, children: _jsx(Box, { "data-notebook-preview-view": id, sx: {
                         height,
                         // No toolbar: no room kept for one.
                         '& .datalayer-NotebookPanel-header': {

package/lib/components/teams/TeamNotebook.d.ts

@@ -25,11 +25,13 @@ export type TeamNotebookProps = {
     title: string;
     /** How tall the notebook is, in pixels. */
     height?: number;
+    /** Leave the heading out: the dialog it is drawn in shows the title. */
+    hideTitle?: boolean;
 };
 /** The file a notebook is saved as: the peer's name for it, else its name. */
 export declare function notebookFileName(notebook: A2APeerArtifact): string;
 /** A notebook a member of the team gave, under its title, to run in the page. */
-export declare function TeamNotebook({ notebook, title, height, }: TeamNotebookProps): JSX.Element;
+export declare function TeamNotebook({ notebook, title, height, hideTitle, }: TeamNotebookProps): JSX.Element;
 /**
  * A notebook as a balloon's large visual: read-only in the balloon, and,
  * expanded, this notebook — editable, run on the browser sandbox, loaded

package/lib/components/teams/TeamNotebook.js

@@ -16,7 +16,7 @@ export function notebookFileName(notebook) {
     return `${stem}.ipynb`;
 }
 /** A notebook a member of the team gave, under its title, to run in the page. */
-export function TeamNotebook({ notebook, title, height = 560, }) {
+export function TeamNotebook({ notebook, title, height = 560, hideTitle = false, }) {
     return (_jsxs(Box, { as: "section", "aria-label": title, "data-team-notebook": "", 
         // Focused when the notebook in a balloon is clicked (`focusExpanded`).
         tabIndex: -1, sx: {
@@ -32,7 +32,7 @@ export function TeamNotebook({ notebook, title, height = 560, }) {
                 outlineOffset: 4,
                 borderRadius: 2,
             },
-        }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, m: 0 }, children: title }), _jsx(Suspense, { fallback: _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "Opening the notebook\u2026" }), children: _jsx(TeamNotebookView, { notebook: notebook, fileName: notebookFileName(notebook), height: height }) })] }));
+        }, children: [!hideTitle && (_jsx(Heading, { as: "h3", sx: { fontSize: 2, m: 0 }, children: title })), _jsx(Suspense, { fallback: _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "Opening the notebook\u2026" }), children: _jsx(TeamNotebookView, { notebook: notebook, fileName: notebookFileName(notebook), height: height }) })] }));
 }
 /**
  * A notebook as a balloon's large visual: read-only in the balloon, and,
@@ -43,7 +43,7 @@ export function notebookBalloonVisual(notebook, title, height) {
     return {
         id: `notebook:${notebook.filename ?? notebook.name}`,
         title,
-        render: () => (_jsx(TeamNotebook, { notebook: notebook, title: title, height: height })),
+        render: place => (_jsx(TeamNotebook, { notebook: notebook, title: title, height: height, hideTitle: place === 'overlay' })),
     };
 }
 export default TeamNotebook;

package/lib/components/teams/jupyterThemeVariables.d.ts

@@ -0,0 +1,9 @@
+/**
+ * JupyterLab's theme variables, light and dark, as its theme extensions state
+ * them. Generated by scripts/codegen/generate_jupyter_theme_variables.mjs: do
+ * not edit.
+ *
+ * @module components/teams/jupyterThemeVariables
+ */
+export declare const JUPYTER_LIGHT_VARIABLES: Readonly<Record<string, string>>;
+export declare const JUPYTER_DARK_VARIABLES: Readonly<Record<string, string>>;