@datalayer/agent-runtimes 1.3.73 → 1.3.74

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

@@ -27,6 +27,7 @@ import { type Edge, type EdgeProps, type Viewport } from '@xyflow/react';
 import '@xyflow/react/dist/base.css';
 import { type A2ATeamCall, type A2ATeamConnection, type A2ATeamFlow } from './a2aTeamFlow';
 import type { A2ATeamPersona } from './useA2ATeam';
+import type { BalloonExpandTarget } from '../../chat/assistant/BalloonVisual';
 import type { BalloonDisplay } from '../../chat/assistant/toolLine';
 /** One member of the team, as the graph draws it. */
 export type A2ATeamGraphMember = {
@@ -51,10 +52,19 @@ export type A2ATeamGraphMember = {
      */
     balloonDisplay?: BalloonDisplay;
     /**
-     * The notebook in its balloon was clicked: by default, the page's
-     * `TeamNotebook` is scrolled to and focused.
+     * The notebook in its balloon was clicked: by default, it is expanded —
+     * into `expandTarget`, scrolled to and focused, or in a dialog.
      */
     onNotebookOpen?: () => void;
+    /**
+     * Where the notebook it was given runs (`TeamNotebook`, editable, on the
+     * browser sandbox): an element of the page — the area under the graph —
+     * where it is drawn as it arrives and when it is expanded; without one,
+     * *Expand* opens it in a dialog over the page.
+     */
+    expandTarget?: BalloonExpandTarget;
+    /** What its notebook is called: `Accounting's notebook`. */
+    notebookTitle?: string;
 };
 export type A2ATeamGraphProps = {
     /** The member that asks: drawn on the left. */

package/lib/components/teams/A2ATeamGraph.js

@@ -7,7 +7,8 @@ import { Box } from '@datalayer/primer-addons';
 import { AssistantStage } from '../../chat/assistant/AssistantStage';
 import { SpecMark } from '../../chat/marks/SpecMark';
 import { toolWords, } from './a2aTeamFlow';
-import { NotebookPreview, focusTeamNotebook } from './NotebookPreview';
+import { NotebookPreview } from './NotebookPreview';
+import { notebookBalloonVisual } from './TeamNotebook';
 import { toolLineText } from '../../chat/assistant/toolLine';
 /** The graph's own coordinates: the members, and room above them for their balloons. */
 const NODE_WIDTH = 200;
@@ -53,6 +54,15 @@ const MemberNode = memo(function MemberNode({ data, }) {
         return null;
     }
     const { persona } = member;
+    // 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');
+    const given = persona.notebook
+        ? {
+            attachment: (_jsx(NotebookPreview, { notebook: persona.notebook.data, title: notebookTitle, maxHeight: NOTEBOOK_PREVIEW_HEIGHT, onOpen: member.onNotebookOpen, openLabel: member.expandTarget ? 'Open it below to run it' : undefined })),
+            visual: notebookBalloonVisual(persona.notebook, notebookTitle),
+        }
+        : {};
     return (_jsxs(Box
     // React Flow lets the pointer through a node that is neither dragged
     // nor selected (`pointer-events: none` on its wrapper): the character,
@@ -81,6 +91,7 @@ const MemberNode = memo(function MemberNode({ data, }) {
                             text: toolLineText(persona.tool),
                             tool: persona.tool,
                             busy: persona.state !== 'idle',
+                            ...given,
                         }
                         : persona.saying
                             ? {
@@ -90,11 +101,9 @@ const MemberNode = memo(function MemberNode({ data, }) {
                                 busy: persona.state === 'thinking' ||
                                     persona.state === 'working' ||
                                     persona.state === 'speaking',
-                                // A notebook it was given, read-only: the one that
-                                // runs is under the graph.
-                                attachment: persona.notebook ? (_jsx(NotebookPreview, { notebook: persona.notebook.data, title: persona.notebook.name || 'The notebook', maxHeight: NOTEBOOK_PREVIEW_HEIGHT, onOpen: member.onNotebookOpen ?? focusTeamNotebook })) : undefined,
+                                ...given,
                             }
-                            : undefined, insist: persona.insist, onDismiss: away => member.onAway?.(away !== 'none'), 
+                            : undefined, expandTarget: member.expandTarget, expandOnArrival: !!member.expandTarget, insist: persona.insist, onDismiss: away => member.onAway?.(away !== 'none'), 
                     // 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] }));
 });

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

@@ -27,11 +27,20 @@ export type NotebookPreviewProps = {
     title: string;
     /** How tall it is, in pixels; it scrolls within. */
     maxHeight?: number;
-    /** Takes the reader to the notebook that runs; the line under it says so. */
+    /**
+     * Takes the reader to the notebook that runs; the line under it says so.
+     * Unsaid, in a balloon that carries the notebook as its large visual, a
+     * click expands it (`BalloonVisual`).
+     */
     onOpen?: () => void;
+    /**
+     * The line under it, which opens it: `Open it below to run it`. Shown
+     * when `onOpen` or this is given — in a balloon, its *Expand* says it.
+     */
+    openLabel?: string;
 };
 /** A notebook, read-only and small, with the way to the one that runs. */
-export declare function NotebookPreview({ notebook, title, maxHeight, onOpen, }: NotebookPreviewProps): JSX.Element | null;
+export declare function NotebookPreview({ notebook, title, maxHeight, onOpen: onOpenGiven, openLabel, }: NotebookPreviewProps): JSX.Element | null;
 /** Where the notebook that runs is: `TeamNotebook` marks its section. */
 export declare const TEAM_NOTEBOOK_SELECTOR = "[data-team-notebook]";
 /** Takes the reader to the notebook that runs: scrolled to, and focused. */

package/lib/components/teams/NotebookPreview.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, lazy } from 'react';
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
+import { useBalloonExpand } from '../../chat/assistant/BalloonVisual';
 /** jupyter-react's notebook, read-only, with no kernel: loaded when a notebook is drawn. */
 const NotebookPreviewView = lazy(() => import('./NotebookPreviewView'));
 /** The document a notebook artifact carries, or none when it is not one. */
@@ -24,7 +25,9 @@ export function notebookDocument(data) {
     return undefined;
 }
 /** A notebook, read-only and small, with the way to the one that runs. */
-export function NotebookPreview({ notebook, title, maxHeight = 220, onOpen, }) {
+export function NotebookPreview({ notebook, title, maxHeight = 220, onOpen: onOpenGiven, openLabel, }) {
+    const expand = useBalloonExpand();
+    const onOpen = onOpenGiven ?? expand ?? undefined;
     const doc = notebookDocument(notebook);
     if (!doc) {
         return null;
@@ -38,7 +41,7 @@ export function NotebookPreview({ notebook, title, maxHeight = 220, onOpen, }) {
                     borderRadius: 2,
                     bg: 'canvas.default',
                     cursor: onOpen ? 'pointer' : 'default',
-                }, children: _jsx(Suspense, { fallback: _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 0, m: 2 }, children: "Opening the notebook\u2026" }), children: _jsx(NotebookPreviewView, { nbformat: doc, height: maxHeight }) }) }), onOpen ? (_jsx(Text, { as: "button", type: "button", onClick: onOpen, "data-notebook-preview-open": "", sx: {
+                }, children: _jsx(Suspense, { fallback: _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 0, m: 2 }, children: "Opening the notebook\u2026" }), children: _jsx(NotebookPreviewView, { nbformat: doc, height: maxHeight }) }) }), onOpen && (onOpenGiven || openLabel) ? (_jsx(Text, { as: "button", type: "button", onClick: onOpen, "data-notebook-preview-open": "", sx: {
                     alignSelf: 'flex-start',
                     p: 0,
                     border: 0,
@@ -47,7 +50,7 @@ export function NotebookPreview({ notebook, title, maxHeight = 220, onOpen, }) {
                     fontSize: 0,
                     cursor: 'pointer',
                     '&:hover': { textDecoration: 'underline' },
-                }, children: "Open it below to run it" })) : null] }));
+                }, children: openLabel ?? 'Open it to run it' })) : null] }));
 }
 /** Where the notebook that runs is: `TeamNotebook` marks its section. */
 export const TEAM_NOTEBOOK_SELECTOR = '[data-team-notebook]';

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

@@ -17,6 +17,7 @@
  */
 import type { JSX } from 'react';
 import type { A2APeerArtifact } from '../../runtimes/browser/a2aPeer';
+import type { BalloonVisual } from '../../chat/assistant/BalloonVisual';
 export type TeamNotebookProps = {
     /** The notebook, as the peer gave it: its `data` is the nbformat document. */
     notebook: A2APeerArtifact;
@@ -29,4 +30,10 @@ export type TeamNotebookProps = {
 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;
+/**
+ * A notebook as a balloon's large visual: read-only in the balloon, and,
+ * expanded, this notebook — editable, run on the browser sandbox, loaded
+ * only then.
+ */
+export declare function notebookBalloonVisual(notebook: A2APeerArtifact, title: string, height?: number): BalloonVisual;
 export default TeamNotebook;

package/lib/components/teams/TeamNotebook.js

@@ -18,7 +18,7 @@ export function notebookFileName(notebook) {
 /** A notebook a member of the team gave, under its title, to run in the page. */
 export function TeamNotebook({ notebook, title, height = 560, }) {
     return (_jsxs(Box, { as: "section", "aria-label": title, "data-team-notebook": "", 
-        // Focused when the notebook in a balloon is clicked (`focusTeamNotebook`).
+        // Focused when the notebook in a balloon is clicked (`focusExpanded`).
         tabIndex: -1, sx: {
             display: 'flex',
             flexDirection: 'column',
@@ -34,4 +34,16 @@ export function TeamNotebook({ notebook, title, height = 560, }) {
             },
         }, 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 }) })] }));
 }
+/**
+ * A notebook as a balloon's large visual: read-only in the balloon, and,
+ * expanded, this notebook — editable, run on the browser sandbox, loaded
+ * only then.
+ */
+export function notebookBalloonVisual(notebook, title, height) {
+    return {
+        id: `notebook:${notebook.filename ?? notebook.name}`,
+        title,
+        render: () => (_jsx(TeamNotebook, { notebook: notebook, title: title, height: height })),
+    };
+}
 export default TeamNotebook;

package/lib/examples/AgentA2ATeamExample.d.ts

@@ -24,8 +24,9 @@
  * Sales' balloon shows it read-only (`NotebookPreview`: no kernel), and it
  * opens right under the team, in place of the report, on the browser
  * sandbox — a Pyodide kernel in this page — to run, change and download
- * (`TeamNotebook`, loaded only then); a click on the one in the balloon
- * comes to it.
+ * (`TeamNotebook`, loaded only then): the graph draws it into the area
+ * under it (`expandTarget`), and a click on the one in the balloon, or its
+ * *Expand*, comes to it.
  *
  * Where Accounting is: `VITE_A2A_ACCOUNTING_URL`, else the examples' local
  * server (`…:8765/api/v1/a2a/agents/accounting`), which answers this machine

package/lib/examples/AgentA2ATeamExample.js

@@ -10,7 +10,7 @@ import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 import { useBrowserInference } from '../hooks/useBrowserInference';
 import { readJwtClaims, tokenLifetimeMs, useAnonymousSessionStore, } from '../runtimes/browser/anonymousToken';
 import { connectA2APeer } from '../runtimes/browser/a2aPeer';
-import { A2ATeamGraph, NOTEBOOK_AND_WORDS, TeamNotebook, teamConnectionsOf, useA2ATeam, } from '../components/teams';
+import { A2ATeamGraph, NOTEBOOK_AND_WORDS, teamConnectionsOf, useA2ATeam, } from '../components/teams';
 import { ACCOUNTING_APP_0_0_1, SALES_APP_0_0_1 } from '../specs/apps';
 import { SALES_AND_ACCOUNTING_TEAM_SPEC_0_0_1 } from '../specs/teams/teams';
 const TEAM = SALES_AND_ACCOUNTING_TEAM_SPEC_0_0_1;
@@ -49,6 +49,8 @@ function AgentA2ATeam() {
     const [peerError, setPeerError] = useState(null);
     const [draft, setDraft] = useState('');
     const composer = useRef(null);
+    // Under the graph: where the notebook Accounting gives runs.
+    const notebookArea = useRef(null);
     useEffect(() => {
         let current = true;
         setPeer(null);
@@ -103,6 +105,8 @@ function AgentA2ATeam() {
                         persona: team.entryPersona,
                         onToggle: () => composer.current?.focus(),
                         onAway: team.setEntryAway,
+                        expandTarget: notebookArea,
+                        notebookTitle: `${ACCOUNTING.name}\u2019s notebook`,
                     }, peer: {
                         id: ACCOUNTING.id,
                         name: ACCOUNTING.name,
@@ -112,7 +116,7 @@ function AgentA2ATeam() {
                         persona: team.peerPersona,
                         onAway: team.setPeerAway,
                         connections: ACCOUNTING_CONNECTIONS,
-                    }, flow: team.flow, calls: team.calls, connected: peer !== null, label: peer ? `A2A · ${peer.skill.name}` : 'A2A · not connected' }) }), team.notebook && (_jsx(Box, { sx: { mb: 3 }, "data-team-notebook-placement": "under-graph", children: _jsx(TeamNotebook, { notebook: team.notebook, title: `${ACCOUNTING.name}\u2019s notebook` }) })), _jsxs(Box, { sx: { display: 'flex', gap: 3, flexWrap: 'wrap' }, children: [_jsxs(Box, { sx: { flex: '1 1 420px', minWidth: 0 }, children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: ["Ask ", SALES.name] }), _jsx(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap', mb: 2 }, children: (SALES.interface.starters ?? []).map(starter => (_jsx(Button, { size: "small", disabled: !team.ready || team.busy, onClick: () => send(starter.message), children: starter.label }, starter.label))) }), _jsx(Textarea, { ref: composer, block: true, rows: 3, value: draft, placeholder: "Ask for a financial report\u2026", onChange: event => setDraft(event.target.value), onKeyDown: event => {
+                    }, flow: team.flow, calls: team.calls, connected: peer !== null, label: peer ? `A2A · ${peer.skill.name}` : 'A2A · not connected' }) }), _jsx(Box, { ref: notebookArea, sx: { mb: team.notebook ? 3 : 0 }, "data-team-notebook-placement": "under-graph" }), _jsxs(Box, { sx: { display: 'flex', gap: 3, flexWrap: 'wrap' }, children: [_jsxs(Box, { sx: { flex: '1 1 420px', minWidth: 0 }, children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: ["Ask ", SALES.name] }), _jsx(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap', mb: 2 }, children: (SALES.interface.starters ?? []).map(starter => (_jsx(Button, { size: "small", disabled: !team.ready || team.busy, onClick: () => send(starter.message), children: starter.label }, starter.label))) }), _jsx(Textarea, { ref: composer, block: true, rows: 3, value: draft, placeholder: "Ask for a financial report\u2026", onChange: event => setDraft(event.target.value), onKeyDown: event => {
                                     if (event.key === 'Enter' && !event.shiftKey) {
                                         event.preventDefault();
                                         send(draft);

package/lib/examples/{ChatAssistantExample.d.ts → AssistantExample.d.ts}

@@ -10,5 +10,5 @@
  * and so are the characters clippy.js publishes, fetched when picked.
  */
 import React from 'react';
-declare const ChatAssistantExample: React.FC;
-export default ChatAssistantExample;
+declare const AssistantExample: React.FC;
+export default AssistantExample;

package/lib/examples/{ChatAssistantExample.js → AssistantExample.js}

@@ -16,7 +16,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useEffect, useRef, useState } from 'react';
 import { buildReactorFromPlugins } from '@datalayer/reactor';
-import { Button, Heading, Text } from '@primer/react';
+import { Button, Heading, Text, ToggleSwitch } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { ThemedProvider } from './utils/themedProvider';
 import { ChatFloating } from '../chat';
@@ -66,7 +66,7 @@ async function readPicked(files) {
         soundsJs: soundsJs ? await soundsJs.text() : undefined,
     });
 }
-const ChatAssistantExample = () => {
+const AssistantExample = () => {
     const [character, setCharacter] = useState('paperclip');
     // A character chosen by id is the one its plugin contributes.
     const drawn = typeof character === 'string'
@@ -131,13 +131,15 @@ const ChatAssistantExample = () => {
     };
     const isClippyJs = typeof character !== 'string' &&
         Object.values(clippyJs).includes(character);
-    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: { minHeight: '100vh', bg: 'canvas.default', p: 4 }, children: [_jsxs(Box, { sx: { maxWidth: 720, mx: 'auto' }, children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Chat Assistant" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', mb: 3 }, children: "The chat as a character on the page. It greets you, acts out what the agent is doing, and says the agent\u2019s words in a balloon while the conversation is closed. Click it to talk, drag it to move it, hover it to send it away." }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: [CATALOGUE.map(option => (_jsx(Button, { variant: option.id === character ? 'primary' : 'default', onClick: () => {
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: { minHeight: '100vh', bg: 'canvas.default', p: 4 }, children: [_jsxs(Box, { sx: { maxWidth: 720, mx: 'auto' }, children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Assistant" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', mb: 3 }, children: "The chat as a character on the page. It greets you, acts out what the agent is doing, and says the agent\u2019s words in a balloon while the conversation is closed. Click it to talk, drag it to move it, hover it to send it away." }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: [CATALOGUE.map(option => (_jsx(Button, { variant: option.id === character ? 'primary' : 'default', onClick: () => {
                                         setCharacter(option.id);
                                         setLoadError(undefined);
                                     }, "aria-pressed": option.id === character, "data-assistant-character": option.id, children: option.name }, option.id))), pixel && (_jsxs(Button, { variant: character === pixel ? 'primary' : 'default', onClick: () => {
                                         setCharacter(pixel);
                                         setLoadError(undefined);
-                                    }, "aria-pressed": character === pixel, "data-assistant-character": "sprite", children: [pixel.name, " (sprite)"] }))] }), _jsxs(Box, { as: "section", sx: { mt: 4 }, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 2, mb: 1 }, children: "The balloon" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 2 }, children: [_jsx("strong", { children: "History" }), ": open, the whole conversation, counted in its header, the composer last. ", _jsx("strong", { children: "Current" }), ": only what it says or does now \u2014 the answer as it is written, or the tool it calls (\u201CUsing current_time\u2026\u201D) \u2014 in one compact balloon. Either way, a tool call is said in the balloon."] }), _jsx(Box, { sx: { display: 'flex', gap: 2 }, children: ['history', 'current'].map(option => (_jsx(Button, { variant: option === balloon ? 'primary' : 'default', "aria-pressed": option === balloon, "data-assistant-balloon-choice": option, onClick: () => setBalloon(option), children: option === 'history' ? 'History' : 'Current' }, option))) })] }), _jsxs(Box, { as: "section", sx: { mt: 4 }, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 2, mb: 1 }, children: "The clippy.js characters" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 2 }, children: ["Fetched when picked from the", ' ', _jsxs("code", { children: ["clippyjs@", CLIPPY_JS_VERSION] }), " package on jsDelivr and read as data by the same reader. They are not in this repository: clippy.js\u2019s licence covers its code only, and the characters are Microsoft\u2019s."] }), _jsx(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: CLIPPY_JS_CHARACTERS.map(name => {
+                                    }, "aria-pressed": character === pixel, "data-assistant-character": "sprite", children: [pixel.name, " (sprite)"] }))] }), _jsxs(Box, { as: "section", sx: { mt: 4 }, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 2, mb: 1 }, children: "The balloon" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 2 }, children: [_jsx("strong", { children: "History" }), ": the whole conversation, counted in its header \u2014 closed, every message listed and scrolled; open, the composer last. ", _jsx("strong", { children: "Current" }), ": only what it says or does now \u2014 the answer as it is written, or the tool it calls (\u201CUsing current_time\u2026\u201D) \u2014 in one compact balloon. Either way, a tool call is said in the balloon."] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, "data-assistant-balloon-toggle": "", children: [_jsx(Text, { id: "assistant-balloon-history", sx: { fontWeight: 'semibold' }, children: "History" }), _jsx(ToggleSwitch, { "aria-labelledby": "assistant-balloon-history", size: "small", checked: balloon === 'history', 
+                                            // Controlled, Primer's switch flips only through its click.
+                                            onClick: () => setBalloon(balloon === 'history' ? 'current' : 'history') }), _jsx(Text, { "aria-live": "polite", "data-toggle-state": "", sx: { color: 'fg.muted' }, children: balloon === 'history' ? 'History' : 'Current' })] })] }), _jsxs(Box, { as: "section", sx: { mt: 4 }, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 2, mb: 1 }, children: "The clippy.js characters" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 2 }, children: ["Fetched when picked from the", ' ', _jsxs("code", { children: ["clippyjs@", CLIPPY_JS_VERSION] }), " package on jsDelivr and read as data by the same reader. They are not in this repository: clippy.js\u2019s licence covers its code only, and the characters are Microsoft\u2019s."] }), _jsx(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: CLIPPY_JS_CHARACTERS.map(name => {
                                         const picked = clippyJs[name] !== undefined && character === clippyJs[name];
                                         return (_jsx(Button, { variant: picked ? 'primary' : 'default', onClick: () => void pickClippyJs(name), disabled: fetching !== undefined, "aria-pressed": picked, "data-assistant-character": `clippy-js-${name.toLowerCase()}`, children: fetching === name ? `${name}…` : name }, name));
                                     }) })] }), _jsxs(Box, { as: "section", sx: { mt: 4 }, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 2, mb: 1 }, children: "A character you bring" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 2 }, children: ["The characters of Microsoft Office \u2014 Clippy, Merlin, Links and the others \u2014 are Microsoft\u2019s. Load only a character file you have the right to use: a Microsoft Agent ", _jsx("code", { children: ".acs" }), " file, or a clippy.js character\u2019s ", _jsx("code", { children: "agent.js" }), " and map image. It is read in this page and sent nowhere."] }), _jsx("input", { type: "file", multiple: true, accept: ".acs,.js,.png,.gif,.webp,.jpg,.jpeg", "aria-label": "Character files", onChange: async (event) => {
@@ -158,4 +160,4 @@ const ChatAssistantExample = () => {
                     // Ask a decision beside the composer: Jev, through this server.
                     decisions: { serverUrl: SERVER } }, typeof character === 'string' ? character : character.sprite)] }) }));
 };
-export default ChatAssistantExample;
+export default AssistantExample;

package/lib/examples/{ChatAssistantGalleryExample.d.ts → AssistantGalleryExample.d.ts}

@@ -13,5 +13,5 @@
  * Static data, no agent: it opens without a server or an account.
  */
 import React from 'react';
-declare const ChatAssistantGalleryExample: React.FC;
-export default ChatAssistantGalleryExample;
+declare const AssistantGalleryExample: React.FC;
+export default AssistantGalleryExample;

package/lib/examples/{ChatAssistantGalleryExample.js → AssistantGalleryExample.js}

@@ -18,17 +18,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Static data, no agent: it opens without a server or an account.
  */
 import { useEffect, useRef, useState } from 'react';
-import { Button, Checkbox, FormControl, Heading, SegmentedControl, Text, } from '@primer/react';
+import { Button, Checkbox, FormControl, Heading, SegmentedControl, Text, ToggleSwitch, } from '@primer/react';
 import { Box, DatalayerThemeProvider, themeConfigs, } from '@datalayer/primer-addons';
 import { ThemedProvider } from './utils/themedProvider';
 import { useExampleThemeStore } from './utils/themeStore';
 import { AssistantStage } from '../chat/assistant/AssistantStage';
 import { useViewportDrag } from '../chat/useViewportDrag';
-import { AssistantGalleryGrid, GalleryBalloons, GalleryNotebook, GalleryObstacle, Still, useGalleryCharacters, } from './utils/AssistantGalleryGrid';
-import { GALLERY_POSES, GALLERY_POSE_LABELS, SAMPLE_NOTEBOOK_SAYING, balloonForPose, sampleApproval, sampleSaying, sampleToolLine, stateOfPose, } from './utils/assistantGallery';
+import { AssistantGalleryGrid, GalleryBalloons, GalleryNotebook, GalleryObstacle, galleryNotebookVisual, Still, useGalleryCharacters, } from './utils/AssistantGalleryGrid';
+import { GALLERY_POSES, GALLERY_POSE_LABELS, SAMPLE_NOTEBOOK_SAYING, balloonForPose, sampleApproval, sampleHistory, sampleSaying, sampleToolLine, stateOfPose, } from './utils/assistantGallery';
 import { CLIPPY_JS_VERSION, useClippyJsCharacters, } from './utils/clippyJsCharacters';
 const STAGE_SIZE = 96;
-const PANEL_HEIGHT = 520;
+const PANEL_HEIGHT = 640;
 const LEAVE_MS = 700;
 const ARRIVE_MS = 1900;
 const AWAY_WORDS = {
@@ -38,7 +38,7 @@ const AWAY_WORDS = {
     always: 'for good',
 };
 /** One colour mode's panel, with the character on its own stage. */
-function ModePanel({ mode, character, pose, presence, balloon, insist, onToggle, onDismiss, onCallBack, away, replay, display, }) {
+function ModePanel({ mode, character, pose, presence, balloon, insist, onToggle, onDismiss, onCallBack, away, replay, display, expandTarget, }) {
     const panelRef = useRef(null);
     const stageRef = useRef(null);
     const drag = useViewportDrag(stageRef, { whole: true });
@@ -84,13 +84,19 @@ function ModePanel({ mode, character, pose, presence, balloon, insist, onToggle,
                     position: 'absolute',
                     left: spot.left,
                     top: spot.top + STAGE_SIZE / 2 - 16,
-                }, children: [_jsxs(Button, { size: "small", onClick: onCallBack, "data-gallery-call-back": "", children: ["Call ", character.name, " back"] }), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 1 }, children: ["Sent away ", AWAY_WORDS[away], "."] })] })) : (_jsx(AssistantStage, { character: character.character, state: state, size: STAGE_SIZE, place: { position: 'absolute', left: spot.left, top: spot.top }, stageRef: stageRef, onDragStart: drag.onHandlePointerDown, open: false, onToggle: onToggle, balloon: presence === 'here' ? balloon : undefined, balloonDisplay: display, insist: insist, onDismiss: onDismiss }, `${character.id}-${replay}`)), pose === 'aside' && presence === 'here' && (_jsx(GalleryObstacle, { sx: {
+                }, children: [_jsxs(Button, { size: "small", onClick: onCallBack, "data-gallery-call-back": "", children: ["Call ", character.name, " back"] }), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 1 }, children: ["Sent away ", AWAY_WORDS[away], "."] })] })) : (_jsx(AssistantStage, { character: character.character, state: state, size: STAGE_SIZE, place: { position: 'absolute', left: spot.left, top: spot.top }, stageRef: stageRef, onDragStart: drag.onHandlePointerDown, open: false, onToggle: onToggle, balloon: presence === 'here' ? balloon : undefined, balloonDisplay: display, expandTarget: expandTarget, insist: insist, onDismiss: onDismiss }, `${character.id}-${replay}`)), pose === 'aside' && presence === 'here' && (_jsx(GalleryObstacle, { sx: {
                     left: spot.left - 12,
                     top: spot.top - 12,
                     width: STAGE_SIZE + 24,
                     height: STAGE_SIZE + 24,
                 } }))] }));
 }
+/** A two-way choice as a Primer toggle: its label, the switch, what is on. */
+function GalleryToggle({ id, label, on, onChange, state, ...rest }) {
+    return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, ...rest, children: [_jsx(Text, { id: id, sx: { fontSize: 1, fontWeight: 'semibold' }, children: label }), _jsx(ToggleSwitch, { "aria-labelledby": id, size: "small", checked: on, 
+                // Controlled, Primer's switch flips only through its click.
+                onClick: () => onChange(!on) }), _jsx(Text, { "aria-live": "polite", "data-toggle-state": "", sx: { fontSize: 1, color: 'fg.muted' }, children: state })] }));
+}
 /** The panels in the modes asked, each in the examples' theme. */
 function InModes({ modes, stacked = false, children, }) {
     const { theme } = useExampleThemeStore();
@@ -103,7 +109,7 @@ function InModes({ modes, stacked = false, children, }) {
             flexWrap: 'wrap',
         }, children: shown.map(mode => (_jsx(Box, { sx: { flex: '1 1 320px', minWidth: 0 }, children: _jsx(DatalayerThemeProvider, { colorMode: mode, theme: config.primerTheme, themeStyles: config.themeStyles, children: children(mode) }) }, mode))) }));
 }
-const ChatAssistantGalleryExample = () => {
+const AssistantGalleryExample = () => {
     const { characters: ours, problem } = useGalleryCharacters();
     const [withClippyJs, setWithClippyJs] = useState(false);
     const clippyJs = useClippyJsCharacters(withClippyJs);
@@ -123,6 +129,9 @@ const ChatAssistantGalleryExample = () => {
     const [display, setDisplay] = useState('current');
     const [toolPhase, setToolPhase] = useState();
     const [withNotebook, setWithNotebook] = useState(false);
+    // Where Expand draws the notebook: the area under the stage, or a dialog.
+    const [expandIntoPage, setExpandIntoPage] = useState(true);
+    const expandArea = useRef(null);
     const character = characters.find(entry => entry.id === characterId) ?? characters[0];
     // Leaving takes the goodbye's length; arriving, the greeting's.
     useEffect(() => {
@@ -145,6 +154,21 @@ const ChatAssistantGalleryExample = () => {
         setSaid(said + 1);
     };
     const approval = sampleApproval(() => setDecision('Approved: send_reply.'), () => setDecision('Denied: send_reply.'));
+    // History: the conversation so far, every message, as the chat holds it.
+    const history = display === 'history'
+        ? [
+            ...sampleHistory(saying === undefined ? said : saying + 1),
+            ...(withNotebook
+                ? [
+                    {
+                        id: 'notebook',
+                        role: 'assistant',
+                        text: SAMPLE_NOTEBOOK_SAYING,
+                    },
+                ]
+                : []),
+        ]
+        : undefined;
     const balloon = balloonForPose(pose, {
         saying: saying === undefined
             ? withNotebook
@@ -153,7 +177,9 @@ const ChatAssistantGalleryExample = () => {
             : sampleSaying(saying),
         approval,
         tool: toolPhase ? sampleToolLine(toolPhase) : undefined,
-        attachment: withNotebook && display === 'current' ? (_jsx(GalleryNotebook, { onOpen: () => setDecision('The notebook would open below to run.') })) : undefined,
+        attachment: withNotebook ? _jsx(GalleryNotebook, {}) : undefined,
+        visual: withNotebook ? galleryNotebookVisual() : undefined,
+        history,
     });
     const insist = saying !== undefined ||
         toolPhase !== undefined ||
@@ -165,7 +191,7 @@ const ChatAssistantGalleryExample = () => {
                 bg: 'canvas.default',
                 color: 'fg.default',
                 p: 4,
-            }, children: _jsxs(Box, { sx: { maxWidth: 1200, mx: 'auto' }, children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Chat Assistant gallery" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 3, maxWidth: 760 }, children: ["Every character in every state the floating assistant acts, with its balloon, in light and dark. Datalayer\u2019s four and the owl are what the enabled plugins contribute to", ' ', _jsx("code", { children: "loop.assistant.character" }), "; Pixel is a test sprite of our own, read through the clippy.js reader. No agent is behind it: the words are a sample conversation."] }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 3, maxWidth: 760 }, children: ["The characters clippy.js publishes \u2014 Clippy, Merlin, Links, Rover and the others \u2014 are loaded on request from the", ' ', _jsxs("code", { children: ["clippyjs@", CLIPPY_JS_VERSION] }), " package on jsDelivr (about 15 MB) and read by the same reader. They are not in this repository: clippy.js\u2019s licence covers its code only, and the characters are Microsoft\u2019s."] }), _jsxs(Box, { as: "section", "aria-label": "Gallery controls", sx: {
+            }, children: _jsxs(Box, { sx: { maxWidth: 1200, mx: 'auto' }, children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Assistant gallery" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 3, maxWidth: 760 }, children: ["Every character in every state the floating assistant acts, with its balloon, in light and dark. Datalayer\u2019s four and the owl are what the enabled plugins contribute to", ' ', _jsx("code", { children: "loop.assistant.character" }), "; Pixel is a test sprite of our own, read through the clippy.js reader. No agent is behind it: the words are a sample conversation."] }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 3, maxWidth: 760 }, children: ["The characters clippy.js publishes \u2014 Clippy, Merlin, Links, Rover and the others \u2014 are loaded on request from the", ' ', _jsxs("code", { children: ["clippyjs@", CLIPPY_JS_VERSION] }), " package on jsDelivr (about 15 MB) and read by the same reader. They are not in this repository: clippy.js\u2019s licence covers its code only, and the characters are Microsoft\u2019s."] }), _jsxs(Box, { as: "section", "aria-label": "Gallery controls", sx: {
                             display: 'grid',
                             gap: 3,
                             mb: 4,
@@ -192,7 +218,7 @@ const ChatAssistantGalleryExample = () => {
                                             gap: 2,
                                             flexWrap: 'wrap',
                                             alignItems: 'center',
-                                        }, children: [_jsx(SegmentedControl, { "aria-label": "Balloon", children: ['history', 'current'].map(option => (_jsx(SegmentedControl.Button, { selected: display === option, onClick: () => setDisplay(option), "data-gallery-balloon": option, children: option === 'history' ? 'History' : 'Current' }, option))) }), _jsx(Button, { onClick: say, "data-gallery-say": "", children: "Say something" }), _jsx(Button, { "data-gallery-tool": toolPhase ?? 'none', onClick: () => setToolPhase(toolPhase === undefined
+                                        }, children: [_jsx(GalleryToggle, { id: "gallery-balloon-history", label: "History", on: display === 'history', onChange: on => setDisplay(on ? 'history' : 'current'), state: display === 'history' ? 'History' : 'Current', "data-gallery-balloon-toggle": "" }), _jsx(GalleryToggle, { id: "gallery-expand-into-page", label: "Expand into the page", on: expandIntoPage, onChange: setExpandIntoPage, state: expandIntoPage ? 'The page area' : 'An overlay', "data-gallery-expand-toggle": "" }), _jsx(Button, { onClick: say, "data-gallery-say": "", children: "Say something" }), _jsx(Button, { "data-gallery-tool": toolPhase ?? 'none', onClick: () => setToolPhase(toolPhase === undefined
                                                     ? 'running'
                                                     : toolPhase === 'running'
                                                         ? 'done'
@@ -204,13 +230,19 @@ const ChatAssistantGalleryExample = () => {
                                                         ? 'Tool done'
                                                         : toolPhase === 'done'
                                                             ? 'Tool failed'
-                                                            : 'No tool' }), _jsx(Button, { "data-gallery-notebook": withNotebook ? 'on' : 'off', "aria-pressed": withNotebook, onClick: () => setWithNotebook(!withNotebook), children: withNotebook ? 'Take the notebook' : 'Give a notebook' }), saying !== undefined && (_jsx(Button, { variant: "invisible", onClick: () => setSaying(undefined), children: "Hush" })), presence === 'away' ? (_jsx(Button, { onClick: callBack, children: "Call it back" })) : (_jsx(Button, { onClick: () => sendAway('page'), disabled: presence !== 'here', "data-gallery-send-away": "", children: "Send it away" })), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Drag the character to move it; hover it for its own send-away menu." }), decision && (_jsx(Text, { role: "status", sx: { fontSize: 1 }, children: decision }))] })] }))] }), problem && (_jsxs(Text, { as: "p", role: "alert", sx: { color: 'danger.fg', mb: 3 }, children: ["The test sprite could not be read: ", problem] })), clippyJs.problem && (_jsxs(Text, { as: "p", role: "alert", sx: { color: 'danger.fg', mb: 3 }, children: ["A clippy.js character could not be read: ", clippyJs.problem] })), _jsx(Still, { still: still, children: view === 'stage' ? (_jsx(InModes, { modes: modes, children: mode => (_jsx(ModePanel, { mode: mode, character: character, pose: pose, presence: presence, balloon: balloon, insist: insist, onToggle: () => saying === undefined ? say() : setSaying(undefined), onDismiss: sendAway, onCallBack: callBack, away: away, replay: replay, display: display })) })) : (_jsx(InModes, { modes: modes, stacked: true, children: mode => (_jsxs(Box, { "data-gallery-mode": mode, sx: {
+                                                            : 'No tool' }), _jsx(Button, { "data-gallery-notebook": withNotebook ? 'on' : 'off', "aria-pressed": withNotebook, onClick: () => setWithNotebook(!withNotebook), children: withNotebook ? 'Take the notebook' : 'Give a notebook' }), saying !== undefined && (_jsx(Button, { variant: "invisible", onClick: () => setSaying(undefined), children: "Hush" })), presence === 'away' ? (_jsx(Button, { onClick: callBack, children: "Call it back" })) : (_jsx(Button, { onClick: () => sendAway('page'), disabled: presence !== 'here', "data-gallery-send-away": "", children: "Send it away" })), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Drag the character to move it; hover it for its own send-away menu." }), decision && (_jsx(Text, { role: "status", sx: { fontSize: 1 }, children: decision }))] })] }))] }), problem && (_jsxs(Text, { as: "p", role: "alert", sx: { color: 'danger.fg', mb: 3 }, children: ["The test sprite could not be read: ", problem] })), clippyJs.problem && (_jsxs(Text, { as: "p", role: "alert", sx: { color: 'danger.fg', mb: 3 }, children: ["A clippy.js character could not be read: ", clippyJs.problem] })), _jsx(Still, { still: still, children: view === 'stage' ? (_jsx(InModes, { modes: modes, children: mode => (_jsx(ModePanel, { mode: mode, character: character, pose: pose, presence: presence, balloon: balloon, insist: insist, onToggle: () => saying === undefined ? say() : setSaying(undefined), onDismiss: sendAway, onCallBack: callBack, away: away, replay: replay, display: display, expandTarget: expandIntoPage ? expandArea : undefined })) })) : (_jsx(InModes, { modes: modes, stacked: true, children: mode => (_jsxs(Box, { "data-gallery-mode": mode, sx: {
                                     bg: 'canvas.default',
                                     border: '1px solid',
                                     borderColor: 'border.default',
                                     borderRadius: 2,
                                     p: 2,
                                     overflowX: 'auto',
-                                }, children: [_jsx(AssistantGalleryGrid, { characters: characters }, replay), _jsx(GalleryBalloons, { character: character })] })) })) })] }) }) }));
+                                }, children: [_jsx(AssistantGalleryGrid, { characters: characters }, replay), _jsx(GalleryBalloons, { character: character })] })) })) }), view === 'stage' && expandIntoPage && (_jsxs(Box, { as: "section", "aria-label": "Expanded here", sx: {
+                            mt: 4,
+                            p: 3,
+                            border: '1px dashed',
+                            borderColor: 'border.default',
+                            borderRadius: 2,
+                        }, children: [_jsxs(Text, { as: "p", sx: { m: 0, mb: 2, color: 'fg.muted', fontSize: 1 }, children: ["Expanded here: what the balloon\u2019s ", _jsx("em", { children: "Expand" }), " draws large when the page names an area for it \u2014 the notebook, to edit and run on the browser sandbox. Without one, it opens in an overlay."] }), _jsx(Box, { ref: expandArea, "data-gallery-expand-target": "" })] }))] }) }) }));
 };
-export default ChatAssistantGalleryExample;
+export default AssistantGalleryExample;

package/lib/examples/example-selector.js

@@ -43,6 +43,8 @@ function inferTags(id) {
         tags.add('document');
     if (id.includes('Chat'))
         tags.add('chat');
+    if (id.startsWith('Assistant'))
+        tags.add('assistant');
     if (id.includes('Sandbox'))
         tags.add('sandbox');
     if (id.includes('Monitoring') || id.includes('Otel'))
@@ -87,9 +89,9 @@ export const EXAMPLE_ENTRIES = [
     makeEntry('DocumentPageAgent', () => import('./DocumentPageAgent'), 'A document as a page: floating prompt on top, an agent writing in it.'),
     makeEntry('DecksAgent', () => import('./DecksAgent'), 'A deck beside the chat: the decks plugin in a Loop, and an agent that writes presentations as data.'),
     makeEntry('CellExample', () => import('./CellExample'), 'Simple cell example.'),
-    makeEntry('ChatAssistantExample', () => import('./ChatAssistantExample'), 'The floating assistant: the chat as a character on the page.'),
+    makeEntry('AssistantExample', () => import('./AssistantExample'), 'The floating assistant: the chat as a character on the page.'),
     makeEntry('VoiceChatExample', () => import('./VoiceChatExample'), 'A voice chat with the floating assistant: push-to-talk heard in the page, answers read aloud by the speech service, the mouth moving with the sound.'),
-    makeEntry('ChatAssistantGalleryExample', () => import('./ChatAssistantGalleryExample'), 'Every representation of the floating assistant: each character in each state, its balloon, light and dark, still or moving, one at a time or as a grid.'),
+    makeEntry('AssistantGalleryExample', () => import('./AssistantGalleryExample'), 'Every representation of the floating assistant: each character in each state, its balloon, light and dark, still or moving, one at a time or as a grid.'),
     makeEntry('ChatCustomExample', () => import('./ChatCustomExample'), 'Custom chat experience composition example.'),
     makeEntry('ChatExample', () => import('./ChatExample'), 'Baseline chat integration example.'),
     makeEntry('ChatStandaloneExample', () => import('./ChatStandaloneExample'), 'Standalone chat component usage example.'),

package/lib/examples/exampleGroups.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The examples' groups, in the menu's order, and the group of each example
+ * by its id: a module of its own so the order can be tested without the
+ * examples shell.
+ *
+ * @module examples/exampleGroups
+ */
+export declare const EXAMPLE_GROUP_ORDER: readonly ["Apps", "A2UI", "A2A", "AG-UI", "Assistant", "Chat", "Document", "Notebook", "Capabilities", "Cell", "CopilotKit"];
+export declare const getExampleGroup: (id: string) => string;

package/lib/examples/exampleGroups.js

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The examples' groups, in the menu's order, and the group of each example
+ * by its id: a module of its own so the order can be tested without the
+ * examples shell.
+ *
+ * @module examples/exampleGroups
+ */
+export const EXAMPLE_GROUP_ORDER = [
+    'Apps',
+    'A2UI',
+    'A2A',
+    'AG-UI',
+    'Assistant',
+    'Chat',
+    'Document',
+    'Notebook',
+    'Capabilities',
+    'Cell',
+    'CopilotKit',
+];
+export const getExampleGroup = (id) => {
+    if (id === 'AgentspecsExample' ||
+        id.startsWith('Loop') ||
+        id === 'DecksAgent') {
+        return 'Apps';
+    }
+    if (id.startsWith('A2Ui'))
+        return 'A2UI';
+    // Agents reached over the A2A protocol: their own category, after A2UI.
+    if (id.startsWith('AgentA2A'))
+        return 'A2A';
+    if (id.startsWith('AgUi'))
+        return 'AG-UI';
+    if (id.startsWith('CopilotKit'))
+        return 'CopilotKit';
+    // Each remaining Agent* example demonstrates one capability of the
+    // runtime: checkpoints, hooks, memory, guardrails…
+    if (id.startsWith('Agent'))
+        return 'Capabilities';
+    // The floating assistant, and its gallery: before the chat they wrap.
+    if (id.startsWith('Assistant'))
+        return 'Assistant';
+    if (id.startsWith('Chat') || id === 'VoiceChatExample')
+        return 'Chat';
+    // The document examples: the ones on the Lexical editor, and the page
+    // with a document on it.
+    if (id.startsWith('Lexical') || id.startsWith('Document'))
+        return 'Document';
+    if (id.startsWith('Notebook'))
+        return 'Notebook';
+    return 'Cell';
+};

package/lib/examples/index.d.ts

@@ -15,7 +15,7 @@ export { default as AgUiHumanInTheLoopExample } from './AgUiHumanInTheLoopExampl
 export { default as AgUiSharedStateExample } from './AgUiSharedStateExample';
 export { default as AgUiToolsBasedGenUiExample } from './AgUiToolsBasedGenUiExample';
 export { default as CellExample } from './CellExample';
-export { default as ChatAssistantGalleryExample } from './ChatAssistantGalleryExample';
+export { default as AssistantGalleryExample } from './AssistantGalleryExample';
 export { default as ChatStandaloneExample } from './ChatStandaloneExample';
 export { default as CopilotKitLexicalExample } from './CopilotKitLexicalExample';
 export { default as CopilotKitNotebookExample } from './CopilotKitNotebookExample';

package/lib/examples/index.js

@@ -21,7 +21,7 @@ export { default as AgUiHumanInTheLoopExample } from './AgUiHumanInTheLoopExampl
 export { default as AgUiSharedStateExample } from './AgUiSharedStateExample';
 export { default as AgUiToolsBasedGenUiExample } from './AgUiToolsBasedGenUiExample';
 export { default as CellExample } from './CellExample';
-export { default as ChatAssistantGalleryExample } from './ChatAssistantGalleryExample';
+export { default as AssistantGalleryExample } from './AssistantGalleryExample';
 export { default as ChatStandaloneExample } from './ChatStandaloneExample';
 export { default as CopilotKitLexicalExample } from './CopilotKitLexicalExample';
 export { default as CopilotKitNotebookExample } from './CopilotKitNotebookExample';