@datalayer/agent-runtimes 1.3.63 → 1.3.65

package/lib/examples/AgentA2ATeamExample.js

@@ -1,33 +1,21 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Button, Flash, Heading, Label, Text, Textarea } from '@primer/react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Button, Flash, Heading, Text, Textarea } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { AnonymousKeyExpired } from '@datalayer/core/lib/components/anonymous/AnonymousKeyExpired';
 import { AnonymousKeyTimer } from '@datalayer/core/lib/components/anonymous/AnonymousKeyTimer';
-import { stepCountIs, ToolLoopAgent } from 'ai';
 import { Streamdown } from 'streamdown';
 import { ThemedProvider } from './utils/themedProvider';
 import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
-import { AssistantStage } from '../chat/assistant/AssistantStage';
 import { useBrowserInference } from '../hooks/useBrowserInference';
-import { createBrowserModel } from '../runtimes/browser/model';
 import { readJwtClaims, tokenLifetimeMs, useAnonymousSessionStore, } from '../runtimes/browser/anonymousToken';
-import { a2aPeerTool, connectA2APeer, } from '../runtimes/browser/a2aPeer';
+import { connectA2APeer } from '../runtimes/browser/a2aPeer';
+import { A2ATeamGraph, 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;
 const SALES = SALES_APP_0_0_1;
 const ACCOUNTING = ACCOUNTING_APP_0_0_1;
-/** The name Sales's tool goes by, as its instructions call it. */
-const ASK_TOOL = 'ask_accounting';
-const STAGE_SIZE = 104;
-const STAGE_HEIGHT = 300;
-const AT_REST = { state: 'idle', insist: false, away: false };
-/** A line short enough for a balloon. */
-function line(text, length = 120) {
-    const flat = text.replace(/\s+/g, ' ').trim();
-    return flat.length > length ? `${flat.slice(0, length - 1)}…` : flat;
-}
 /** The members of the team, as the team spec says them. */
 function members() {
     const sales = TEAM.agents.find(member => member.id === TEAM.entry);
@@ -38,25 +26,6 @@ function members() {
     }
     return { sales, accounting };
 }
-/** One persona at its desk, with its name and where it runs under it. */
-function Desk({ app, persona, where, left, onToggle, onAway, }) {
-    const stageRef = useRef(null);
-    const character = app.interface.assistant ?? 'paperclip';
-    return (_jsxs(Box, { sx: {
-            position: 'absolute',
-            left,
-            top: 0,
-            width: 220,
-            height: STAGE_HEIGHT,
-        }, "data-team-member": app.id, "data-member-state": persona.state, children: [persona.away ? (_jsxs(Button, { size: "small", sx: { position: 'absolute', top: STAGE_HEIGHT - 150 }, onClick: () => onAway(false), children: ["Call ", app.name, " back"] })) : (_jsx(AssistantStage, { character: character, state: persona.state, size: STAGE_SIZE, place: { position: 'absolute', left: 56, top: STAGE_HEIGHT - 170 }, stageRef: stageRef, onDragStart: () => undefined, open: false, onToggle: onToggle, balloon: persona.saying
-                    ? { text: persona.saying, more: persona.saying.endsWith('…') }
-                    : undefined, insist: persona.insist, onDismiss: away => onAway(away !== 'none') })), _jsxs(Box, { sx: {
-                    position: 'absolute',
-                    bottom: 0,
-                    width: '100%',
-                    textAlign: 'center',
-                }, children: [_jsxs(Text, { sx: { fontWeight: 600, display: 'block' }, children: [app.emoji, " ", app.name] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: where })] })] }));
-}
 function AgentA2ATeam() {
     const { sales: salesMember } = useMemo(members, []);
     const runtimeUrl = useExampleAgentRuntimesUrl();
@@ -76,21 +45,8 @@ function AgentA2ATeam() {
         accountingKeyClock.expiresAt <= Date.now());
     const [peer, setPeer] = useState(null);
     const [peerError, setPeerError] = useState(null);
-    const [sales, setSales] = useState({
-        ...AT_REST,
-        state: 'greeting',
-        saying: line(SALES.interface.welcome ?? ''),
-        insist: true,
-    });
-    const [accounting, setAccounting] = useState(AT_REST);
-    const [turns, setTurns] = useState([]);
-    const [report, setReport] = useState(null);
-    const [exchange, setExchange] = useState([]);
     const [draft, setDraft] = useState('');
-    const [busy, setBusy] = useState(false);
     const composer = useRef(null);
-    const history = useRef([]);
-    const abort = useRef(null);
     useEffect(() => {
         let current = true;
         setPeer(null);
@@ -103,148 +59,19 @@ function AgentA2ATeam() {
             current = false;
         };
     }, [accountingUrl, accountingKey]);
-    // What Accounting does, as it does it: its own state and balloon.
-    const onPeerEvent = useCallback((event) => {
-        if (event.phase === 'asked') {
-            setExchange(prev => [...prev, `Sales → Accounting: ${event.request}`]);
-            setAccounting(prev => ({
-                ...prev,
-                state: 'greeting',
-                saying: 'On it. Let me read the books.',
-                insist: true,
-            }));
-        }
-        else if (event.phase === 'working') {
-            if (event.note) {
-                setExchange(prev => [...prev, `Accounting: ${event.note}`]);
-            }
-            setAccounting(prev => ({
-                ...prev,
-                state: 'working',
-                saying: event.note ? line(event.note) : prev.saying,
-                insist: Boolean(event.note) || prev.insist,
-            }));
-        }
-        else if (event.phase === 'answered') {
-            setExchange(prev => [...prev, 'Accounting → Sales: the report']);
-            setReport(event.answer);
-            setAccounting(prev => ({
-                ...prev,
-                state: 'speaking',
-                saying: line(event.answer),
-                insist: true,
-            }));
-        }
-        else {
-            setExchange(prev => [
-                ...prev,
-                `Accounting could not answer: ${event.error}`,
-            ]);
-            setAccounting(prev => ({
-                ...prev,
-                state: 'idle',
-                saying: line(event.error),
-                insist: true,
-            }));
-        }
-    }, []);
-    const agent = useMemo(() => {
-        if (!peer) {
-            return null;
-        }
-        return new ToolLoopAgent({
-            id: SALES.id,
-            model: createBrowserModel({
-                ...inference,
-                model: SALES.model || undefined,
-            }),
-            instructions: SALES.instructions,
-            tools: { [ASK_TOOL]: a2aPeerTool({ peer, onEvent: onPeerEvent }) },
-            stopWhen: stepCountIs(6),
-        });
-    }, [peer, inference, onPeerEvent]);
-    const send = useCallback(async (text) => {
-        const asked = text.trim();
-        if (!asked || !agent || busy) {
-            return;
-        }
-        setBusy(true);
+    // Sales runs here and asks Accounting over A2A: the conversation, the
+    // exchange, the report and the way the link carries a message.
+    const team = useA2ATeam({
+        entry: SALES,
+        peerApp: ACCOUNTING,
+        peer,
+        inference,
+        askTool: 'ask_accounting',
+    });
+    const send = (text) => {
         setDraft('');
-        setReport(null);
-        setExchange([]);
-        setTurns(prev => [...prev, { role: 'user', text: asked }]);
-        setSales({
-            ...AT_REST,
-            state: 'thinking',
-            saying: 'Let me see…',
-            insist: true,
-        });
-        setAccounting(AT_REST);
-        history.current = [...history.current, { role: 'user', content: asked }];
-        abort.current = new AbortController();
-        let said = '';
-        try {
-            const result = await agent.stream({
-                messages: history.current,
-                abortSignal: abort.current.signal,
-            });
-            for await (const part of result.fullStream) {
-                if (part.type === 'tool-call' && part.toolName === ASK_TOOL) {
-                    const request = String(part.input?.request ?? '');
-                    setSales(prev => ({
-                        ...prev,
-                        state: 'waiting',
-                        saying: line(`Accounting, could you: ${request}`),
-                        insist: true,
-                    }));
-                }
-                else if (part.type === 'tool-result' &&
-                    part.toolName === ASK_TOOL) {
-                    setSales(prev => ({
-                        ...prev,
-                        state: 'thinking',
-                        saying: 'Thanks!',
-                    }));
-                }
-                else if (part.type === 'text-delta') {
-                    said += part.text;
-                    setSales(prev => ({
-                        ...prev,
-                        state: 'speaking',
-                        saying: line(said),
-                        insist: true,
-                    }));
-                }
-                else if (part.type === 'error') {
-                    throw part.error;
-                }
-            }
-            history.current = [
-                ...history.current,
-                { role: 'assistant', content: said },
-            ];
-            setTurns(prev => [...prev, { role: 'assistant', text: said }]);
-            setSales(prev => ({ ...prev, state: 'idle', saying: line(said) }));
-        }
-        catch (error) {
-            const message = error instanceof Error ? error.message : String(error);
-            setTurns(prev => [
-                ...prev,
-                { role: 'assistant', text: `Something went wrong: ${message}` },
-            ]);
-            setSales(prev => ({
-                ...prev,
-                state: 'idle',
-                saying: line(`Something went wrong: ${message}`),
-                insist: true,
-            }));
-        }
-        finally {
-            abort.current = null;
-            setBusy(false);
-        }
-    }, [agent, busy]);
-    useEffect(() => () => abort.current?.abort(), []);
+        void team.send(text);
+    };
     const accountingWhere = accountingKey
         ? `on a runtime, ${new URL(accountingUrl).host}, with a temporary key`
         : `on a runtime, ${new URL(accountingUrl).host}`;
@@ -252,43 +79,50 @@ function AgentA2ATeam() {
                 (accountingKeyClock && !accountingKeyEnded)) && (_jsxs(Box, { sx: { display: 'flex', gap: 4, flexWrap: 'wrap', mb: 3 }, children: [anonymous.status === 'active' && anonymous.expiresAt && (_jsx(AnonymousKeyTimer, { expiresAt: anonymous.expiresAt, grantedMs: anonymous.grantedMs, label: `${SALES.name}'s trial key`, onExpire: () => useAnonymousSessionStore.getState().expire() })), accountingKeyClock && !accountingKeyEnded && (_jsx(AnonymousKeyTimer, { expiresAt: accountingKeyClock.expiresAt, grantedMs: accountingKeyClock.grantedMs, label: `${ACCOUNTING.name}'s temporary key`, onExpire: () => setAccountingKeyEnded(true) }))] })), anonymous.status === 'expired' && (_jsx(Box, { sx: { mb: 3 }, children: _jsx(AnonymousKeyExpired, { agentName: SALES.name, 
                     // Sales runs in this page: what ended is its model's key, and
                     // signing in gives it the person's own.
-                    onSignedIn: () => useAnonymousSessionStore.getState().clear() }) })), accountingKeyEnded && (_jsxs(Flash, { variant: "danger", sx: { mb: 3 }, children: [ACCOUNTING.name, "\u2019s temporary key has ended: it no longer answers. Make a new one with", ' ', _jsx("code", { children: "examples/sales-accounting-a2a/make_temp_key.py" }), " and reload."] })), needsSignIn && (_jsx(Flash, { variant: "warning", sx: { mb: 3 }, children: "Sales asks its model through the Datalayer inference service: sign in, or wait for a visitor's trial key." })), peerError && (_jsxs(Flash, { variant: "danger", sx: { mb: 3 }, children: ["Accounting is not reachable at ", accountingUrl, ": ", peerError, " Serve it with", ' ', _jsx("code", { children: "python examples/sales-accounting-a2a/serve_accounting.py" }), ' ', "on the local server, or", ' ', _jsx("code", { children: "loop apps run accounting.yaml --cloud --a2a" }), " and set", ' ', _jsx("code", { children: "VITE_A2A_ACCOUNTING_URL" }), "."] })), _jsxs(Box, { sx: {
-                    position: 'relative',
-                    height: STAGE_HEIGHT,
+                    onSignedIn: () => useAnonymousSessionStore.getState().clear() }) })), accountingKeyEnded && (_jsxs(Flash, { variant: "danger", sx: { mb: 3 }, children: [ACCOUNTING.name, "\u2019s temporary key has ended: it no longer answers. Make a new one with", ' ', _jsx("code", { children: "examples/sales-accounting-a2a/make_temp_key.py" }), " and reload."] })), needsSignIn && (_jsx(Flash, { variant: "warning", sx: { mb: 3 }, children: "Sales asks its model through the Datalayer inference service: sign in, or wait for a visitor's trial key." })), peerError && (_jsxs(Flash, { variant: "danger", sx: { mb: 3 }, children: ["Accounting is not reachable at ", accountingUrl, ": ", peerError, " Serve it with", ' ', _jsx("code", { children: "python examples/sales-accounting-a2a/serve_accounting.py" }), ' ', "on the local server, or", ' ', _jsx("code", { children: "loop apps run accounting.yaml --cloud --a2a" }), " and set", ' ', _jsx("code", { children: "VITE_A2A_ACCOUNTING_URL" }), "."] })), _jsx(Box, { sx: {
                     border: '1px solid',
                     borderColor: 'border.default',
                     borderRadius: 2,
                     bg: 'canvas.subtle',
-                    overflow: 'visible',
+                    px: 2,
+                    pt: 2,
                     mb: 3,
-                }, children: [_jsx(Desk, { app: SALES, persona: sales, where: salesMember.runsIn === 'browser'
+                }, children: _jsx(A2ATeamGraph, { entry: {
+                        id: SALES.id,
+                        name: SALES.name,
+                        emoji: SALES.emoji,
+                        character: SALES.interface.assistant ?? 'paperclip',
+                        where: salesMember.runsIn === 'browser'
                             ? 'in your browser'
-                            : 'on a runtime', left: "8%", onToggle: () => composer.current?.focus(), onAway: away => setSales(prev => ({ ...prev, away })) }), _jsxs(Box, { sx: {
-                            position: 'absolute',
-                            left: '38%',
-                            right: '38%',
-                            top: STAGE_HEIGHT / 2,
-                            textAlign: 'center',
-                        }, children: [_jsx(Box, { sx: {
-                                    borderTop: '2px dashed',
-                                    borderColor: peer ? 'accent.emphasis' : 'border.muted',
-                                } }), _jsxs(Label, { variant: peer ? 'accent' : 'secondary', sx: { mt: 2 }, children: ["A2A ", peer ? `· ${peer.skill.name}` : '· not connected'] })] }), _jsx(Desk, { app: ACCOUNTING, persona: accounting, where: accountingWhere, left: "66%", onToggle: () => undefined, onAway: away => setAccounting(prev => ({ ...prev, away })) })] }), _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: !agent || busy, onClick: () => void 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 => {
+                            : 'on a runtime',
+                        persona: team.entryPersona,
+                        onToggle: () => composer.current?.focus(),
+                        onAway: team.setEntryAway,
+                    }, peer: {
+                        id: ACCOUNTING.id,
+                        name: ACCOUNTING.name,
+                        emoji: ACCOUNTING.emoji,
+                        character: ACCOUNTING.interface.assistant ?? 'wizard',
+                        where: accountingWhere,
+                        persona: team.peerPersona,
+                        onAway: team.setPeerAway,
+                    }, flow: team.flow, connected: peer !== null, label: peer ? `A2A · ${peer.skill.name}` : 'A2A · not connected' }) }), _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();
-                                        void send(draft);
+                                        send(draft);
                                     }
-                                } }), _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 2 }, children: [_jsx(Button, { variant: "primary", disabled: !agent || busy || !draft.trim(), onClick: () => void send(draft), children: "Ask" }), busy && (_jsx(Button, { onClick: () => abort.current?.abort(), children: "Stop" }))] }), _jsx(Box, { sx: { mt: 3 }, "data-team-conversation": "", children: turns.map((turn, index) => (_jsxs(Box, { sx: {
+                                } }), _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 2 }, children: [_jsx(Button, { variant: "primary", disabled: !team.ready || team.busy || !draft.trim(), onClick: () => send(draft), children: "Ask" }), team.busy && _jsx(Button, { onClick: team.stop, children: "Stop" })] }), _jsx(Box, { sx: { mt: 3 }, "data-team-conversation": "", children: team.turns.map((turn, index) => (_jsxs(Box, { sx: {
                                         p: 2,
                                         mb: 2,
                                         borderRadius: 2,
                                         bg: turn.role === 'user' ? 'accent.subtle' : 'canvas.subtle',
-                                    }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: turn.role === 'user' ? 'You' : SALES.name }), _jsx(Streamdown, { children: turn.text })] }, index))) })] }), _jsxs(Box, { sx: { flex: '1 1 360px', minWidth: 0 }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: "The exchange" }), _jsx(Box, { as: "ol", sx: { pl: 3, color: 'fg.muted', fontSize: 1 }, "data-team-exchange": "", children: exchange.length === 0 ? (_jsx(Text, { as: "li", children: "Nothing asked yet." })) : (exchange.map((step, index) => (_jsx(Text, { as: "li", children: step }, index)))) }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, mt: 3, mb: 2 }, children: "The report" }), _jsx(Box, { sx: {
+                                    }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: turn.role === 'user' ? 'You' : SALES.name }), _jsx(Streamdown, { children: turn.text })] }, index))) })] }), _jsxs(Box, { sx: { flex: '1 1 360px', minWidth: 0 }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: "The exchange" }), _jsx(Box, { as: "ol", sx: { pl: 3, color: 'fg.muted', fontSize: 1 }, "data-team-exchange": "", children: team.exchange.length === 0 ? (_jsx(Text, { as: "li", children: "Nothing asked yet." })) : (team.exchange.map((step, index) => (_jsx(Text, { as: "li", children: step }, index)))) }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, mt: 3, mb: 2 }, children: "The report" }), _jsx(Box, { sx: {
                                     p: 3,
                                     border: '1px solid',
                                     borderColor: 'border.default',
                                     borderRadius: 2,
                                     minHeight: 120,
-                                }, "data-team-report": "", children: report ? (_jsx(Streamdown, { children: report })) : (_jsx(Text, { sx: { color: 'fg.muted' }, children: "The report Accounting returns appears here, as it returned it." })) })] })] })] }));
+                                }, "data-team-report": "", children: team.report ? (_jsx(Streamdown, { children: team.report })) : (_jsx(Text, { sx: { color: 'fg.muted' }, children: "The report Accounting returns appears here, as it returned it." })) })] })] })] }));
 }
 export function AgentA2ATeamExample() {
     return (_jsx(ThemedProvider, { children: _jsx(AgentA2ATeam, {}) }));

package/lib/examples/VoiceChatExample.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A voice chat with the floating assistant (VOICE.md V1).
+ *
+ * Hold the microphone (or `Ctrl`+`Space`), speak, let go: what you said is
+ * heard in this page — Moonshine for English, Whisper for French, Silero VAD
+ * keeping only the speech — and put in the composer, marked as said. Send
+ * it, and the answer is read aloud as it is written, sentence by sentence,
+ * by Datalayer's speech service (Kokoro, on ai-agents), the assistant's
+ * mouth moving with the sound and its balloon showing the sentence said.
+ *
+ * Three places, each named in the address when it is not this machine's:
+ * - `?agentRuntimesUrl=` — the agent-runtimes server and its `assistant`
+ *   agent (http://127.0.0.1:8765);
+ * - `?voiceModelsUrl=` — the browser's models, as pinned
+ *   (`scripts/voice/serve_store.py`, http://127.0.0.1:8770);
+ * - `?speechUrl=` — ai-agents' speech service (http://127.0.0.1:4401).
+ */
+import React from 'react';
+declare const VoiceChatExample: React.FC;
+export default VoiceChatExample;

package/lib/examples/VoiceChatExample.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * A voice chat with the floating assistant (VOICE.md V1).
+ *
+ * Hold the microphone (or `Ctrl`+`Space`), speak, let go: what you said is
+ * heard in this page — Moonshine for English, Whisper for French, Silero VAD
+ * keeping only the speech — and put in the composer, marked as said. Send
+ * it, and the answer is read aloud as it is written, sentence by sentence,
+ * by Datalayer's speech service (Kokoro, on ai-agents), the assistant's
+ * mouth moving with the sound and its balloon showing the sentence said.
+ *
+ * Three places, each named in the address when it is not this machine's:
+ * - `?agentRuntimesUrl=` — the agent-runtimes server and its `assistant`
+ *   agent (http://127.0.0.1:8765);
+ * - `?voiceModelsUrl=` — the browser's models, as pinned
+ *   (`scripts/voice/serve_store.py`, http://127.0.0.1:8770);
+ * - `?speechUrl=` — ai-agents' speech service (http://127.0.0.1:4401).
+ */
+import { useMemo, useState } from 'react';
+import { Heading, Link, SegmentedControl, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
+import { ThemedProvider } from './utils/themedProvider';
+import { ChatFloating } from '../chat';
+import { VOICE_CATALOGUE, voiceFor } from '../specs/voices';
+function fromAddress(name, otherwise) {
+    return ((typeof window === 'undefined'
+        ? null
+        : new URLSearchParams(window.location.search).get(name)) || otherwise).replace(/\/+$/, '');
+}
+const SERVER = fromAddress('agentRuntimesUrl', 'http://127.0.0.1:8765');
+const MODELS = fromAddress('voiceModelsUrl', 'http://127.0.0.1:8770');
+const SPEECH = fromAddress('speechUrl', 'http://127.0.0.1:4401');
+/** The packages that hear, loaded the first time the microphone is used. */
+const ENGINES = {
+    transformers: () => import('@huggingface/transformers'),
+    vad: () => import('@ricky0123/vad-web'),
+};
+const LANGUAGES = [
+    { tag: 'en-US', label: 'English' },
+    { tag: 'fr-FR', label: 'Français' },
+];
+const VoiceChatExample = () => {
+    const { token } = useSimpleAuthStore();
+    const [language, setLanguage] = useState('en-US');
+    const voiceSpec = voiceFor(language) ?? VOICE_CATALOGUE['kokoro-af-heart'];
+    const voice = useMemo(() => ({
+        language,
+        input: 'push_to_talk',
+        output: 'always',
+        voice: voiceSpec.id,
+        modelsUrl: MODELS,
+        engines: ENGINES,
+        speechUrl: SPEECH,
+        token: token || undefined,
+        consentKey: 'voice-chat-example',
+    }), [language, voiceSpec.id, token]);
+    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: "Voice chat" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 3 }, children: ["Talk to the assistant instead of typing: hold the microphone in its composer, or ", _jsx("kbd", { children: "Ctrl" }), "+", _jsx("kbd", { children: "Space" }), ", speak, and let go. What you say is heard in this page and never leaves it; the words go in the message box for you to send. Its answers are read aloud as they are written, by Datalayer\u2019s speech service, and not kept.", ' ', _jsx("kbd", { children: "Esc" }), " stops its voice."] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 3, mb: 3 }, children: [_jsx(SegmentedControl, { "aria-label": "Language", children: LANGUAGES.map(option => (_jsx(SegmentedControl.Button, { selected: language === option.tag, onClick: () => setLanguage(option.tag), "data-voice-language": option.tag, children: option.label }, option.tag))) }), _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["Voice: ", voiceSpec.name] })] }), voiceSpec.attribution && (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 3 }, children: voiceSpec.attribution })), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted' }, children: ["Models from ", MODELS, ", speech from ", SPEECH, ", the agent at ", SERVER, ". See", ' ', _jsx(Link, { href: "https://agent-runtimes.datalayer.tech/chat/voice", children: "Voice" }), ' ', "for how to run each."] })] }), _jsx(ChatFloating, { defaultViewMode: "assistant", assistantCharacter: "paperclip", protocol: "vercel-ai", endpoint: `${SERVER}/api/v1/vercel-ai/assistant`, title: "Assistant", description: "Hello! Hold the microphone and ask me anything.", position: "bottom-right", useStore: false, voice: voice })] }) }));
+};
+export default VoiceChatExample;

package/lib/examples/example-selector.js

@@ -88,6 +88,7 @@ export const EXAMPLE_ENTRIES = [
     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('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('ChatCustomExample', () => import('./ChatCustomExample'), 'Custom chat experience composition example.'),
     makeEntry('ChatExample', () => import('./ChatExample'), 'Baseline chat integration example.'),

package/lib/examples/main.js

@@ -70,6 +70,9 @@ const ANONYMOUS_EXAMPLES = new Set([
     // An application beside its computer, on the local agent-runtimes server:
     // nothing allocated on Datalayer, and the machine itself needs no token.
     'LoopAppComputerExample',
+    // The Sales and Accounting team: Sales in the page on a visitor's trial
+    // key, Accounting on the local server, which answers the machine itself.
+    'AgentA2ATeamExample',
     // Decide, on the local agent-runtimes server as above: Jev is asked
     // through the server's ai-inference, with the server's own key.
     'AgentDecideExample',
@@ -88,6 +91,9 @@ const ANONYMOUS_EXAMPLES = new Set([
     'ChatAssistantExample',
     // Every character in every state, from static data: no agent at all.
     'ChatAssistantGalleryExample',
+    // Voice: heard in the page, the agent on the local server, the speech
+    // service named in the address.
+    'VoiceChatExample',
 ]);
 const getExampleGroup = (id) => {
     if (id === 'AgentspecsExample' ||
@@ -108,7 +114,7 @@ const getExampleGroup = (id) => {
     // runtime: checkpoints, hooks, memory, guardrails…
     if (id.startsWith('Agent'))
         return 'Capabilities';
-    if (id.startsWith('Chat'))
+    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.

package/lib/loop/apps/appspec.d.ts

@@ -24,7 +24,7 @@
  *
  * @module loop/apps/appspec
  */
-import type { AppAccent, AppAssistantCharacter, AppEmbedMode, AppKind, AppLayout, AppSpec } from '../../types/agentspecs';
+import type { AppAccent, AppAssistantCharacter, AppEmbedMode, AppVoiceSpec, AppKind, AppLayout, AppSpec } from '../../types/agentspecs';
 /** The version of the spec itself. */
 export declare const APP_SCHEMA = "loop.app/v1";
 /** The face of an application that has not chosen one. */
@@ -51,6 +51,8 @@ type Data = Record<string, unknown>;
 export declare function retentionDays(keepFor: string): number;
 /** An application with nothing said: what *Start blank* opens. */
 export declare function emptyAppspec(kind?: AppKind): AppSpec;
+/** An application's voice (VOICE.md VO-41): off unless said. */
+export declare const DEFAULT_VOICE: AppVoiceSpec;
 /** What reading a document gives: the application, and what the document got wrong. */
 export interface ParsedAppspec {
     app: AppSpec;

package/lib/loop/apps/appspec.js

@@ -214,6 +214,26 @@ function parseSurface(data) {
         composedAt: text(data.composed_at),
     };
 }
+/** An application's voice (VOICE.md VO-41): off unless said. */
+export const DEFAULT_VOICE = {
+    enabled: false,
+    input: 'push_to_talk',
+    output: 'on_request',
+    voice: '',
+    language: '',
+    where: 'auto',
+};
+function parseVoice(data) {
+    const voice = isData(data) ? data : {};
+    return {
+        enabled: voice.enabled === true,
+        input: oneOf(voice.input, ['off', 'push_to_talk', 'hands_free'], DEFAULT_VOICE.input),
+        output: oneOf(voice.output, ['off', 'on_request', 'always'], DEFAULT_VOICE.output),
+        voice: text(voice.voice),
+        language: text(voice.language),
+        where: oneOf(voice.where, ['auto', 'device', 'server'], DEFAULT_VOICE.where),
+    };
+}
 function parseInterface(data, kind) {
     const parsed = {
         layout: oneOf(data.layout, ['chat', 'page', 'split'], DEFAULT_LAYOUTS[kind]),
@@ -225,6 +245,7 @@ function parseInterface(data, kind) {
         })),
         settings: records(data.settings).map(parseSetting),
         components: texts(data.components),
+        voice: parseVoice(data.voice),
     };
     if (isData(data.surface)) {
         parsed.surface = parseSurface(data.surface);
@@ -493,6 +514,16 @@ function dumpInterface(spec, kind) {
     if (spec.assistant) {
         writer.data.assistant = spec.assistant;
     }
+    // Its voice, when it says one (VO-41): a spec made before voice has none.
+    if (spec.voice) {
+        writer.part('voice', new Writer()
+            .value('enabled', spec.voice.enabled, DEFAULT_VOICE.enabled)
+            .value('input', spec.voice.input, DEFAULT_VOICE.input)
+            .value('output', spec.voice.output, DEFAULT_VOICE.output)
+            .text('voice', spec.voice.voice)
+            .text('language', spec.voice.language)
+            .value('where', spec.voice.where, DEFAULT_VOICE.where).data);
+    }
     return writer.data;
 }
 function dumpDecision(decision) {

package/lib/protocols/VercelAIAdapter.js

@@ -187,6 +187,11 @@ export class VercelAIAdapter extends BaseProtocolAdapter {
                         id: msg.id,
                         role: msg.role,
                         parts,
+                        // How a message was heard, when it was said (VOICE.md VO-27):
+                        // the runtime keeps the turn marked spoken.
+                        ...(msg.role === 'user' && msg.metadata?.input === 'voice'
+                            ? { metadata: msg.metadata }
+                            : {}),
                     };
                 });
                 // For tool-result messages, add them as separate tool parts