@datalayer/agent-runtimes 1.3.70 → 1.3.72

package/lib/loop/plugins/assistant/index.d.ts

@@ -13,6 +13,12 @@
  * the runtime to ask (`decisions`), its balloon offers *Ask a decision*: a
  * typed decision asked of Jev through the runtime, answered there.
  *
+ * Its balloon shows the conversation as `balloon` says (LOOP T-23; the
+ * Appspec's `interface.balloon`): a peek of the newest words (`history`, the
+ * default), or the one thing being said or done now (`current`). Either way
+ * what the agent is doing while a tool runs — the turn's `activity` — is said
+ * there, and heard once as it starts.
+ *
  * The workspace's chat is the conversation: on a page layout, its side panel
  * is opened and closed; where the conversation is always on screen, a click
  * takes the person to its composer.
@@ -23,6 +29,7 @@ import type { JSX } from 'react';
 import { type AssistantState } from '../../../chat/assistant/state';
 import type { PresenceState } from '../../../chat/presence/presenceStatus';
 import { type ChatTurnSnapshot } from '../../core';
+import type { BalloonDisplay } from '../../../chat/assistant/toolLine';
 export declare const LOOP_ASSISTANT_PLUGIN_NAME = "@datalayer/loop-plugin-assistant";
 export type LoopAssistantConfig = {
     /** The character the application's Appspec names; it wins. */
@@ -45,6 +52,12 @@ export type LoopAssistantConfig = {
         serverUrl: string;
         token?: string;
     };
+    /**
+     * How the balloon shows the conversation (T-23): a peek of the newest
+     * words (`history`, the default), or only what is said or done now
+     * (`current`). The Appspec's `interface.balloon`.
+     */
+    balloon?: BalloonDisplay;
 };
 /**
  * What the character acts out (T-22), from what the application is doing as
@@ -55,6 +68,6 @@ export declare function assistantStateOfTurn(turn: ChatTurnSnapshot, presence: P
     arriving?: boolean;
     leaving?: boolean;
 }): AssistantState;
-export declare function LoopAssistant({ app, person, appId, decisions, }: LoopAssistantConfig): JSX.Element | null;
+export declare function LoopAssistant({ app, person, appId, decisions, balloon: display, }: LoopAssistantConfig): JSX.Element | null;
 export declare const LoopAssistantPlugin: import("@datalayer/reactor").ReactorPlugin<LoopAssistantConfig, unknown, unknown>;
 export default LoopAssistantPlugin;

package/lib/loop/plugins/assistant/index.js

@@ -69,7 +69,7 @@ function focusComposer() {
     const composer = document.querySelector('[data-chat-composer] textarea, [data-chat-composer] [contenteditable="true"]');
     composer?.focus();
 }
-export function LoopAssistant({ app, person, appId, decisions, }) {
+export function LoopAssistant({ app, person, appId, decisions, balloon: display = 'history', }) {
     const contributed = useContributions(LoopAssistantCharacter).map(entry => entry.value);
     const chosen = assistantCharacterFor(contributed, { app, person });
     const turnEntries = useContributions(LoopChatTurn);
@@ -136,25 +136,50 @@ export function LoopAssistant({ app, person, appId, decisions, }) {
     }
     const state = assistantStateOfTurn(turn, presence, { arriving, leaving });
     const unheard = !!saying && saying.id !== heardId;
+    // What the agent does while a tool runs, in its own words (T-23).
+    const tool = turn.activity
+        ? {
+            id: `${turn.id}:${turn.activity}`,
+            tool: '',
+            name: '',
+            phase: 'running',
+            words: turn.activity,
+        }
+        : undefined;
+    const atWork = turn.status === 'streaming' || turn.status === 'thinking';
+    const current = display === 'current';
     const balloon = state === 'paused'
         ? { text: ASSISTANT_WORDS.paused }
         : approval
             ? { text: ASSISTANT_WORDS.approval, approval }
             : presence === 'waiting'
                 ? { text: ASSISTANT_WORDS.waiting }
-                : unheard && saying
-                    ? {
-                        // A peek: the first words; the rest is in the conversation.
-                        ...peekLine(saying.text),
-                        onDismiss: () => {
-                            setHeardId(saying.id);
-                            setFresh(false);
-                        },
-                    }
-                    : { text: 'Click me to open the conversation.' };
+                : tool
+                    ? { text: turn.activity ?? '', tool, busy: true }
+                    : current && (atWork || unheard)
+                        ? {
+                            text: turn.status === 'thinking'
+                                ? 'Thinking…'
+                                : (saying?.text ?? 'Thinking…'),
+                            more: saying?.more,
+                            speaking: turn.status === 'streaming',
+                            busy: atWork,
+                        }
+                        : unheard && saying
+                            ? {
+                                // A peek: the first words; the rest is in the conversation.
+                                ...peekLine(saying.text),
+                                onDismiss: () => {
+                                    setHeardId(saying.id);
+                                    setFresh(false);
+                                },
+                            }
+                            : { text: 'Click me to open the conversation.' };
     const insist = state === 'greeting' ||
         presence === 'waiting' ||
         (!!approval && state !== 'paused') ||
+        !!tool ||
+        (current && atWork) ||
         (unheard && (state === 'speaking' || fresh));
     const onToggle = () => {
         if (onPageLayout) {
@@ -174,7 +199,7 @@ export function LoopAssistant({ app, person, appId, decisions, }) {
     };
     return (_jsxs(_Fragment, { children: [appId && signedIn ? (_jsx(WaitingApprovals, { appId: appId, onWaiting: setApproval })) : null, _jsx(AssistantStage, { character: chosen.character, state: state, size: SIZE, place: drag.position
                     ? { left: `${drag.position.left}px`, top: `${drag.position.top}px` }
-                    : { right: '24px', bottom: '24px' }, stageRef: stageRef, onDragStart: drag.onHandlePointerDown, open: open, onToggle: onToggle, balloon: balloon, insist: insist, onDismiss: onDismiss, decide: decide })] }));
+                    : { right: '24px', bottom: '24px' }, stageRef: stageRef, onDragStart: drag.onHandlePointerDown, open: open, onToggle: onToggle, balloon: balloon, balloonDisplay: display, insist: insist, onDismiss: onDismiss, decide: decide })] }));
 }
 export const LoopAssistantPlugin = definePlugin({
     name: LOOP_ASSISTANT_PLUGIN_NAME,
@@ -183,12 +208,13 @@ export const LoopAssistantPlugin = definePlugin({
         person: undefined,
         appId: undefined,
         decisions: undefined,
+        balloon: undefined,
     },
     displayName: 'Floating assistant',
     description: 'The chat as a character on the page: the application’s own, or the one the person chose, from the characters the enabled plugins contribute.',
     octicon: 'paperclip',
     build: ({ config }) => {
-        const Configured = () => (_jsx(LoopAssistant, { app: config.app, person: config.person, appId: config.appId, decisions: config.decisions }));
+        const Configured = () => (_jsx(LoopAssistant, { app: config.app, person: config.person, appId: config.appId, decisions: config.decisions, balloon: config.balloon }));
         return {
             components: [
                 { id: 'loop-assistant', slot: LoopSlots.root, Component: Configured },

package/lib/specs/appspecSchema.js

@@ -326,6 +326,18 @@ export const APPSPEC_SCHEMA = {
                     description: "The character its floating assistant shows, by the id a plugin contributes it under (lowercase letters and digits, words joined by a hyphen): Datalayer's are `paperclip`, `wizard`, `cat` and `eyes`. The paper clip when unsaid; an id no enabled plugin contributes is refused where the plugins are known, the runtime and the page. Said here, it wins over a person's own choice in their settings",
                     title: 'Assistant',
                 },
+                balloon: {
+                    anyOf: [
+                        {
+                            $ref: '#/$defs/BalloonDisplay',
+                        },
+                        {
+                            type: 'null',
+                        },
+                    ],
+                    default: null,
+                    description: "How its floating assistant's balloon shows the conversation: `history` (every message, scrolled, the composer last) or `current` (only what it says or does now, the answer being written or the tool it calls, in one balloon). The page's own when unsaid: `history` for the floating chat",
+                },
                 voice: {
                     $ref: '#/$defs/AppVoice',
                     description: 'Its voice: whether it listens and speaks, with which voice, in which language (off unless said)',
@@ -772,6 +784,12 @@ export const APPSPEC_SCHEMA = {
             title: 'AppVoice',
             type: 'object',
         },
+        BalloonDisplay: {
+            description: "How a floating assistant's balloon shows the conversation (LOOP T-23).",
+            enum: ['history', 'current'],
+            title: 'BalloonDisplay',
+            type: 'string',
+        },
         Behaviour: {
             description: 'What an application does when it meets an action: the four a person chooses from.',
             enum: ['do_it', 'if_asked', 'ask_first', 'leave_to_me'],

package/lib/stories/loop/ReferenceScreens.d.ts

@@ -8,7 +8,7 @@ export type ReferenceScreen = (typeof REFERENCE_SCREENS)[number];
  * where it has something to say — stepped aside, and open, the conversation
  * as its balloon (T-23).
  */
-export declare const ASSISTANT_PICTURES: readonly ["idle", "thinking", "working", "waiting", "paused", "speaking", "aside", "open"];
+export declare const ASSISTANT_PICTURES: readonly ["idle", "thinking", "working", "waiting", "paused", "speaking", "aside", "open", "current"];
 export type AssistantPicture = (typeof ASSISTANT_PICTURES)[number];
 /**
  * The characters pictured idle, each in light and dark (T-25, T-24):

package/lib/stories/loop/ReferenceScreens.js

@@ -30,6 +30,7 @@ import { AssistantStage, } from '../../chat/assistant/AssistantStage';
 import { ASSISTANT_WORDS, } from '../../chat/assistant/state';
 import { CONVERSATION_BALLOON_WIDTH, ConversationBalloonClose, balloonTailAt, conversationBalloonHeight, conversationBalloonSx, peekLine, } from '../../chat/assistant/ConversationBalloon';
 import { DecisionAsk } from '../../chat/assistant/DecisionAsk';
+import { ConversationBalloonHeader } from '../../chat/assistant/BalloonParts';
 import { buildReactorFromPlugins } from '@datalayer/reactor';
 import { AssistantCharactersPlugin, assistantCharacterNamed, } from '../../loop/plugins/assistant-characters';
 import { OwlCharacterPlugin } from '../../examples/utils/owlCharacterPlugin';
@@ -55,6 +56,7 @@ export const ASSISTANT_PICTURES = [
     'speaking',
     'aside',
     'open',
+    'current',
 ];
 /**
  * The characters pictured idle, each in light and dark (T-25, T-24):
@@ -257,6 +259,17 @@ const BALLOONS = {
         },
     },
     paused: { text: ASSISTANT_WORDS.paused },
+    // Current (T-23): only what it does now — the tool it calls.
+    current: {
+        text: 'Using list_invoices…',
+        tool: {
+            id: 'picture-tool',
+            tool: 'list_invoices',
+            name: 'list_invoices',
+            phase: 'running',
+        },
+        busy: true,
+    },
 };
 /**
  * The paper clip in one state, in the page's corner. `aside` puts a dialog
@@ -265,7 +278,11 @@ const BALLOONS = {
  */
 export function AssistantScreen({ picture, }) {
     const stageRef = useRef(null);
-    const state = picture === 'aside' || picture === 'open' ? 'idle' : picture;
+    const state = picture === 'aside' || picture === 'open'
+        ? 'idle'
+        : picture === 'current'
+            ? 'working'
+            : picture;
     const balloon = BALLOONS[picture];
     return (_jsxs(Box, { sx: { flex: 1, position: 'relative' }, children: [picture === 'open' && _jsx(OpenConversation, {}), picture === 'aside' && (_jsxs(Box, { role: "dialog", "aria-label": "A dialog over the assistant", sx: {
                     position: 'fixed',
@@ -280,7 +297,7 @@ export function AssistantScreen({ picture, }) {
                     borderColor: 'border.default',
                     borderRadius: 'var(--theme-radius-card, 6px)',
                     boxShadow: 'var(--theme-shadow, none)',
-                }, children: [_jsx(Text, { sx: { fontWeight: 600 }, children: "A dialog" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1 }, children: "The assistant steps aside while this is open." })] })), _jsx(AssistantStage, { character: "paperclip", state: state, place: { right: 48, bottom: 48 }, stageRef: stageRef, onDragStart: () => undefined, open: picture === 'open', onToggle: () => undefined, balloon: balloon, insist: !!balloon, onDismiss: () => undefined })] }));
+                }, children: [_jsx(Text, { sx: { fontWeight: 600 }, children: "A dialog" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1 }, children: "The assistant steps aside while this is open." })] })), _jsx(AssistantStage, { character: "paperclip", state: state, place: { right: 48, bottom: 48 }, stageRef: stageRef, onDragStart: () => undefined, open: picture === 'open', onToggle: () => undefined, balloon: balloon, balloonDisplay: picture === 'current' ? 'current' : 'history', insist: !!balloon, onDismiss: () => undefined })] }));
 }
 /** What the open picture's conversation holds. */
 const OPEN_CONVERSATION = [
@@ -316,7 +333,7 @@ function OpenConversation() {
                 edge: 'bottom',
                 at: balloonTailAt(window.innerWidth - 48 - 44, left),
             }, 'canvas.subtle'),
-        }, children: [_jsx(ConversationBalloonClose, { onClose: () => undefined }), _jsxs(Box, { sx: {
+        }, children: [_jsx(ConversationBalloonClose, { onClose: () => undefined }), _jsx(ConversationBalloonHeader, { count: OPEN_CONVERSATION.length - 1 }), _jsxs(Box, { sx: {
                     flex: 1,
                     minHeight: 0,
                     display: 'flex',

package/lib/types/agentspecs.d.ts

@@ -392,6 +392,8 @@ export type AppAccent = 'green' | 'rose' | 'sky' | 'lime' | 'sun' | 'violet';
  * known only where the plugins are.
  */
 export type AppAssistantCharacter = string;
+/** How a floating assistant's balloon shows the conversation (LOOP T-23). */
+export type AppBalloonDisplay = 'history' | 'current';
 /** How an application sits in another product's page (LOOP D-07). */
 export type AppEmbedMode = 'inline' | 'bubble' | 'panel' | 'assistant';
 /** Something an application reaches. */
@@ -479,6 +481,12 @@ export interface AppInterfaceSpec {
      * Said, it wins over the one the person chose in their settings.
      */
     assistant?: AppAssistantCharacter;
+    /**
+     * How its floating assistant's balloon shows the conversation: `history`
+     * (every message, the composer last) or `current` (only what it says or
+     * does now). The page's own when unsaid.
+     */
+    balloon?: AppBalloonDisplay;
     /** Its voice: off unless said (VO-41); absent from a spec made before voice. */
     voice?: AppVoiceSpec;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@datalayer/agent-runtimes",
-    "version": "1.3.70",
+    "version": "1.3.72",
     "type": "module",
     "workspaces": [
         ".",