@datalayer/agent-runtimes 1.3.83 → 1.3.85

package/lib/chat/tools/ToolCallDisplay.js

@@ -14,30 +14,31 @@ import { Button, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { ChevronDownIcon, ChevronRightIcon, ToolsIcon, CheckCircleIcon, XCircleIcon, ClockIcon, AlertIcon, } from '@primer/octicons-react';
 import { SpecMark, hasMark } from '../marks';
+import { useChatWords } from '../ChatLanguage';
 /**
  * Get status icon and color based on tool call status
  */
-function getStatusDisplay(status, errorType) {
+function getStatusDisplay(status, errorType, chatText) {
     switch (status) {
         case 'inProgress':
             return {
                 icon: _jsx(ClockIcon, { size: 14 }),
                 color: 'attention.fg',
-                label: 'Preparing...',
+                label: chatText.toolPreparing,
                 bgColor: 'attention.subtle',
             };
         case 'executing':
             return {
                 icon: _jsx(ClockIcon, { size: 14 }),
                 color: 'attention.fg',
-                label: 'Executing...',
+                label: chatText.toolExecuting,
                 bgColor: 'attention.subtle',
             };
         case 'complete':
             return {
                 icon: _jsx(CheckCircleIcon, { size: 14 }),
                 color: 'success.fg',
-                label: 'Complete',
+                label: chatText.toolComplete,
                 bgColor: 'success.subtle',
             };
         case 'error':
@@ -46,7 +47,7 @@ function getStatusDisplay(status, errorType) {
                 return {
                     icon: _jsx(AlertIcon, { size: 14 }),
                     color: 'danger.fg',
-                    label: 'Execution Failed',
+                    label: chatText.toolExecutionFailed,
                     bgColor: 'danger.subtle',
                 };
             }
@@ -54,7 +55,7 @@ function getStatusDisplay(status, errorType) {
                 return {
                     icon: _jsx(XCircleIcon, { size: 14 }),
                     color: 'severe.fg',
-                    label: 'Code Error',
+                    label: chatText.toolCodeError,
                     bgColor: 'severe.subtle',
                 };
             }
@@ -62,14 +63,14 @@ function getStatusDisplay(status, errorType) {
                 return {
                     icon: _jsx(AlertIcon, { size: 14 }),
                     color: 'attention.fg',
-                    label: 'Exited',
+                    label: chatText.toolExited,
                     bgColor: 'attention.subtle',
                 };
             }
             return {
                 icon: _jsx(XCircleIcon, { size: 14 }),
                 color: 'danger.fg',
-                label: 'Failed',
+                label: chatText.toolFailed,
                 bgColor: 'danger.subtle',
             };
         default:
@@ -95,10 +96,10 @@ function formatToolName(name) {
 /**
  * Get a brief summary of the tool arguments
  */
-function getArgsSummary(args) {
+function getArgsSummary(args, chatText) {
     const entries = Object.entries(args);
     if (entries.length === 0)
-        return 'No parameters';
+        return chatText.noParameters;
     const summary = entries
         .slice(0, 2)
         .map(([key, value]) => {
@@ -111,7 +112,7 @@ function getArgsSummary(args) {
     })
         .join(', ');
     if (entries.length > 2) {
-        return `${summary} (+${entries.length - 2} more)`;
+        return `${summary} ${chatText.moreArguments(entries.length - 2)}`;
     }
     return summary;
 }
@@ -126,6 +127,7 @@ function getArgsSummary(args) {
  * - Rich error display distinguishing execution errors from code errors
  */
 export function ToolCallDisplay({ toolCallId, toolName, args, result, status, error, executionResult, codeError, exitCode, executionError, approvalRequired = false, approvalState, approvalDecisionSource, onApprove, onDeny, approvalLoading = false, marks, summary, density = 'comfortable', }) {
+    const chatText = useChatWords();
     const compact = density === 'compact';
     const [isExpanded, setIsExpanded] = useState(false);
     // Determine effective exit code from props or execution result
@@ -142,9 +144,9 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                     ? 'exit'
                     : 'unknown'
         : undefined;
-    const statusDisplay = getStatusDisplay(status, errorType);
+    const statusDisplay = getStatusDisplay(status, errorType, chatText);
     const displayName = formatToolName(toolName);
-    const argsSummary = summary || getArgsSummary(args);
+    const argsSummary = summary || getArgsSummary(args, chatText);
     const resultObject = result && typeof result === 'object'
         ? result
         : undefined;
@@ -209,7 +211,9 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                     fontSize: 0,
                                     fontWeight: 'medium',
                                     color: statusDisplay.color,
-                                }, children: isPendingApproval ? 'Awaiting Approval' : statusDisplay.label })] }), !isExpanded && (_jsx(Text, { sx: {
+                                }, children: isPendingApproval
+                                    ? chatText.awaitingApproval
+                                    : statusDisplay.label })] }), !isExpanded && (_jsx(Text, { sx: {
                             fontSize: 0,
                             color: 'fg.muted',
                             overflow: 'hidden',
@@ -225,7 +229,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     mb: 2,
-                                }, children: "Parameters" }), _jsx(Box, { sx: {
+                                }, children: chatText.parameters }), _jsx(Box, { sx: {
                                     backgroundColor: 'canvas.inset',
                                     borderRadius: 2,
                                     border: '1px solid',
@@ -242,7 +246,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                         wordBreak: 'break-word',
                                     }, children: Object.keys(args).length > 0
                                         ? JSON.stringify(args, null, 2)
-                                        : '(no parameters)' }) })] }), status === 'complete' && result !== undefined && (_jsxs(Box, { children: [_jsx(Text, { sx: {
+                                        : `(${chatText.noParameters})` }) })] }), status === 'complete' && result !== undefined && (_jsxs(Box, { children: [_jsx(Text, { sx: {
                                     display: 'block',
                                     fontSize: 0,
                                     fontWeight: 'semibold',
@@ -250,7 +254,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     mb: 2,
-                                }, children: "Result" }), _jsx(Box, { sx: {
+                                }, children: chatText.result }), _jsx(Box, { sx: {
                                     backgroundColor: 'success.subtle',
                                     borderRadius: 2,
                                     border: '1px solid',
@@ -267,7 +271,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                         wordBreak: 'break-word',
                                     }, children: typeof result === 'string'
                                         ? result
-                                        : JSON.stringify(result, null, 2) }) })] })), approvalRequired && (_jsx(Box, { sx: { mt: status === 'complete' && result !== undefined ? 3 : 0 }, children: approvalState === 'approved' ? (_jsxs(Box, { children: [_jsx(Text, { sx: { color: 'success.fg', fontSize: 1, display: 'block' }, children: "Approved. Executing tool." }), approvalDecisionSource === 'external' && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: "Approved from sidebar." }))] })) : approvalState === 'denied' ? (_jsxs(Box, { children: [_jsx(Text, { sx: { color: 'danger.fg', fontSize: 1, display: 'block' }, children: "Denied. Tool will not run." }), approvalDecisionSource === 'external' && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: "Decision came from sidebar." }))] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.default' }, children: "This tool requires your approval to run." }), _jsxs(Box, { sx: { mt: 2, display: 'flex', gap: 2 }, children: [_jsx(Button, { size: "small", onClick: onApprove, disabled: approvalLoading || !onApprove, children: "Approve" }), _jsx(Button, { size: "small", variant: "danger", onClick: onDeny, disabled: approvalLoading || !onDeny, children: "Deny" })] })] })) })), status === 'error' && effectiveExecutionError && (_jsxs(Box, { children: [_jsxs(Text, { sx: {
+                                        : JSON.stringify(result, null, 2) }) })] })), approvalRequired && (_jsx(Box, { sx: { mt: status === 'complete' && result !== undefined ? 3 : 0 }, children: approvalState === 'approved' ? (_jsxs(Box, { children: [_jsx(Text, { sx: { color: 'success.fg', fontSize: 1, display: 'block' }, children: chatText.approvedRunning }), approvalDecisionSource === 'external' && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: chatText.approvedElsewhere }))] })) : approvalState === 'denied' ? (_jsxs(Box, { children: [_jsx(Text, { sx: { color: 'danger.fg', fontSize: 1, display: 'block' }, children: chatText.deniedWontRun }), approvalDecisionSource === 'external' && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: chatText.decidedElsewhere }))] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.default' }, children: chatText.approvalNeeded }), _jsxs(Box, { sx: { mt: 2, display: 'flex', gap: 2 }, children: [_jsx(Button, { size: "small", onClick: onApprove, disabled: approvalLoading || !onApprove, children: chatText.approve }), _jsx(Button, { size: "small", variant: "danger", onClick: onDeny, disabled: approvalLoading || !onDeny, children: chatText.deny })] })] })) })), status === 'error' && effectiveExecutionError && (_jsxs(Box, { children: [_jsxs(Text, { sx: {
                                     display: 'block',
                                     fontSize: 0,
                                     fontWeight: 'semibold',
@@ -275,7 +279,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     mb: 2,
-                                }, children: [_jsx(AlertIcon, { size: 12 }), " Execution Error"] }), _jsxs(Box, { sx: {
+                                }, children: [_jsx(AlertIcon, { size: 12 }), " ", chatText.executionError] }), _jsxs(Box, { sx: {
                                     backgroundColor: 'danger.subtle',
                                     borderRadius: 2,
                                     border: '1px solid',
@@ -286,7 +290,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                             fontSize: 0,
                                             color: 'fg.muted',
                                             mt: 1,
-                                        }, children: "The sandbox or execution environment failed to run the code." })] })] })), status === 'error' && effectiveCodeError && (_jsxs(Box, { children: [_jsxs(Text, { sx: {
+                                        }, children: chatText.executionErrorWhy })] })] })), status === 'error' && effectiveCodeError && (_jsxs(Box, { children: [_jsxs(Text, { sx: {
                                     display: 'block',
                                     fontSize: 0,
                                     fontWeight: 'semibold',
@@ -294,7 +298,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     mb: 2,
-                                }, children: ["Code Error: ", effectiveCodeError.name] }), _jsxs(Box, { sx: {
+                                }, children: [chatText.toolCodeError, ": ", effectiveCodeError.name] }), _jsxs(Box, { sx: {
                                     backgroundColor: 'severe.subtle',
                                     borderRadius: 2,
                                     border: '1px solid',
@@ -326,7 +330,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     mb: 2,
-                                }, children: "Error" }), _jsx(Box, { sx: {
+                                }, children: chatText.errorHeading }), _jsx(Box, { sx: {
                                     backgroundColor: 'danger.subtle',
                                     borderRadius: 2,
                                     border: '1px solid',
@@ -342,18 +346,18 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     mb: 2,
-                                }, children: [_jsx(AlertIcon, { size: 12 }), " Process Exited"] }), _jsxs(Box, { sx: {
+                                }, children: [_jsx(AlertIcon, { size: 12 }), " ", chatText.processExited] }), _jsxs(Box, { sx: {
                                     backgroundColor: 'attention.subtle',
                                     borderRadius: 2,
                                     border: '1px solid',
                                     borderColor: 'attention.muted',
                                     p: 2,
-                                }, children: [_jsxs(Text, { sx: { fontSize: 1, color: 'attention.fg' }, children: ["Process exited with code ", effectiveExitCode] }), _jsx(Text, { sx: {
+                                }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'attention.fg' }, children: chatText.exitedWithCode(String(effectiveExitCode)) }), _jsx(Text, { sx: {
                                             display: 'block',
                                             fontSize: 0,
                                             color: 'fg.muted',
                                             mt: 1,
-                                        }, children: "The code called sys.exit() with a non-zero exit code." })] }), effectiveExitOutput && (_jsx(Box, { sx: {
+                                        }, children: chatText.nonZeroExit })] }), effectiveExitOutput && (_jsx(Box, { sx: {
                                     mt: 2,
                                     backgroundColor: 'canvas.inset',
                                     borderRadius: 2,

package/lib/chat/words.d.ts

@@ -0,0 +1,102 @@
+/** A tool line's words around the tool's name: "Using " list_invoices "…". */
+export type AroundName = {
+    before: string;
+    after: string;
+};
+/** What the chat says itself, in one language. */
+export type ChatWords = {
+    /** The prompt's placeholder in a LOOP workspace. */
+    placeholder: string;
+    /** The prompt's placeholder when nothing else says one. */
+    typeMessage: string;
+    /** The prompt's name for a screen reader. */
+    messageInput: string;
+    send: string;
+    stop: string;
+    pauseKernelBusy: string;
+    /** The starters under the prompt, for a screen reader. */
+    suggestedPrompts: string;
+    /** A demo's shared key has run out. */
+    demoKeyExpired: string;
+    /** The person's key has run out. */
+    keyExpired: string;
+    /** The empty chat's title. */
+    startConversation: string;
+    /** The empty chat's line when it has no starters. */
+    sendToBegin: string;
+    copyTurn: string;
+    removeTurn: string;
+    /** What the agent says when its answer failed. */
+    error: (message: string) => string;
+    /** While the agent thinks, in the balloon. */
+    thinking: string;
+    toolPreparing: string;
+    toolExecuting: string;
+    toolComplete: string;
+    toolExecutionFailed: string;
+    toolCodeError: string;
+    toolExited: string;
+    toolFailed: string;
+    awaitingApproval: string;
+    noParameters: string;
+    /** More arguments than the summary shows: "(+2 more)". */
+    moreArguments: (count: number) => string;
+    parameters: string;
+    result: string;
+    executionError: string;
+    executionErrorWhy: string;
+    errorHeading: string;
+    processExited: string;
+    exitedWithCode: (code: number | string) => string;
+    nonZeroExit: string;
+    toolRunning: AroundName;
+    toolDone: AroundName;
+    toolFailedLine: AroundName;
+    approve: string;
+    deny: string;
+    approveAll: string;
+    approvalNeeded: string;
+    approvedRunning: string;
+    approvedElsewhere: string;
+    deniedWontRun: string;
+    decidedElsewhere: string;
+    approvalsPending: (count: number) => string;
+    toolApprovalsPending: string;
+    collapse: string;
+    review: string;
+    dismiss: string;
+    approvalTitle: string;
+    arguments: string;
+    approvalWarning: string;
+    rememberChoice: string;
+    /** An approval waits and cannot be answered in the balloon itself. */
+    waitingOpen: string;
+    /** It waits on the person's yes. */
+    waitingForYou: string;
+    /** Its deployment is paused. */
+    paused: string;
+    /** How many more approvals wait: "2 more". */
+    moreWaiting: (count: number) => string;
+    showMore: string;
+    showLess: string;
+    now: string;
+    conversation: string;
+    suggestions: string;
+    expandConversation: string;
+    expand: string;
+    expandWhat: (what: string) => string;
+    theVisual: string;
+    /** The floating button's tooltip. */
+    talkTo: (name: string) => string;
+};
+/** The chat's words, by language. Another language reads English. */
+export declare const CHAT_WORDS: Record<string, ChatWords>;
+/** The English words: what the chat says when nothing says a language. */
+export declare const ENGLISH_CHAT_WORDS: ChatWords;
+/**
+ * The language the chat speaks to a person who prefers these, as BCP 47
+ * tags them: the first it is said in (`fr-CA` reads `fr`), else English.
+ */
+export declare function chatLanguage(preferred: readonly string[]): string;
+/** The chat's words in a language: its own, else its language's, else English. */
+export declare function chatWords(language: string | undefined): ChatWords;