@agentforge-io/chat-sdk 2.0.18 → 2.0.20

package/dist/entities.d.ts

@@ -19,15 +19,39 @@ export type ChatRole = 'user' | 'assistant' | 'system';
  * Future kinds extend this union without breaking back-compat: the
  * View checks `kind` and falls back to plain text when it's unknown.
  */
+export interface ChatApprovalCopy {
+    title: string;
+    body: string;
+    approveLabel: string;
+    approveBusyLabel: string;
+    denyLabel: string;
+    denyBusyLabel: string;
+    approvedPill: string;
+    deniedPill: string;
+    readOnlyHint: string;
+    blockedTitle: string;
+    blockedBody: string;
+    expiresPrefix: string;
+}
 export type ChatMessageMetadata = {
     kind: 'awaiting_approval';
     approvalId: string;
     toolName: string;
     expiresAt: string;
+    connectorName?: string;
+    toolDescription?: string;
+    /** Server-authored microcopy for the approval bubble. Generated
+     *  on every pause by an AI copywriter on the backend so language
+     *  and tone match the live conversation. View layers render it
+     *  verbatim; when missing, fall back to a minimal meta render. */
+    copy?: ChatApprovalCopy;
 } | {
     kind: 'tool_blocked';
     toolName: string;
     reason?: string;
+    connectorName?: string;
+    toolDescription?: string;
+    copy?: ChatApprovalCopy;
 } | {
     kind: string;
     [k: string]: unknown;

package/dist/react.d.ts

@@ -34,6 +34,34 @@ export type ApprovalActionHandler = (args: {
     approvalId: string;
     action: 'approve' | 'deny';
 }) => Promise<void>;
+/**
+ * Localizable copy for the approval / blocked bubbles. Pass via the
+ * `approvalCopy` prop on `<ChatWidget>` to drop the defaults (Spanish,
+ * Server-authored approval microcopy. The bubble renders whatever the
+ * server places in `metadata.copy` — title, body, button labels, etc.
+ * That copy is generated by the AgentForge backend on every pause via a
+ * dedicated Haiku call, so its language and tone always match the
+ * conversation the user is having. There is no client-side dictionary
+ * to keep in sync.
+ *
+ * The shape mirrors `ApprovalCopyBundle` in `@agentforge-io/core`.
+ */
+export interface ApprovalCopy {
+    title: string;
+    body: string;
+    approveLabel: string;
+    approveBusyLabel: string;
+    denyLabel: string;
+    denyBusyLabel: string;
+    approvedPill: string;
+    deniedPill: string;
+    readOnlyHint: string;
+    blockedTitle: string;
+    blockedBody: string;
+    /** Prefix shown before the countdown, e.g. "Expires in". The seconds
+     *  are appended client-side because they tick locally. */
+    expiresPrefix: string;
+}
 export interface ChatWidgetProps {
     /** Public chat token (`aft_*`) issued from the admin UI. */
     token: string;

package/dist/react.js

@@ -153,6 +153,29 @@ function renderMarkdown(src) {
     }
     return out.join('');
 }
+/**
+ * Minimal fallback used when the server didn't supply `metadata.copy`
+ * (older backend, copywriter timeout, missing API key, etc.). Intentionally
+ * terse and meta-only — the goal is to avoid lying about language. The
+ * server is the source of truth for natural copy.
+ */
+function fallbackCopy(ctx) {
+    const target = ctx.connectorName ?? ctx.toolName ?? '';
+    return {
+        title: target || 'Permission required',
+        body: target ? `${target} →  ✓ / ✗` : 'Permission required',
+        approveLabel: '✓',
+        approveBusyLabel: '…',
+        denyLabel: '✗',
+        denyBusyLabel: '…',
+        approvedPill: '✓',
+        deniedPill: '✗',
+        readOnlyHint: '',
+        blockedTitle: target || 'Blocked',
+        blockedBody: ctx.reason ?? (target ? `${target} blocked` : 'Blocked'),
+        expiresPrefix: '⏱',
+    };
+}
 /**
  * Drop-in chat widget. Owns its own `ChatSession` and re-renders on every
  * SDK event. Consumers don't need to read `session.getState()` themselves.
@@ -281,21 +304,18 @@ function ChatWidget(props) {
                             (0, jsx_runtime_1.jsx)("img", { className: "af-header-avatar", src: theme.avatarUrl, alt: "" })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "af-header-info", children: [(0, jsx_runtime_1.jsx)("div", { className: "af-header-title", children: theme?.title ?? agent?.name ?? 'Chat' }), (0, jsx_runtime_1.jsx)("div", { className: "af-header-subtitle", children: status === 'loading' ? 'Loading…' : agent?.description ?? '' })] }), !inline && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "af-close", onClick: () => setOpen(false), "aria-label": "Close chat", children: (0, jsx_runtime_1.jsx)(CloseIcon, {}) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "af-messages", ref: messagesRef, children: messages.map((m) => ((0, jsx_runtime_1.jsx)(MessageBubble, { message: m, onApprovalAction: onApprovalAction, onContinue: () => {
                                 // After a successful Approve, kick the next turn so the
                                 // gate's fast-path consumes the approval and the tool
-                                // actually runs. Delay = let the "Approved" pill flash
-                                // for a beat before the assistant bubble appears.
+                                // actually runs. `silent: true` keeps the literal
+                                // "continue" prompt out of the visible transcript —
+                                // the visitor just sees the assistant's next reply
+                                // appearing under the "Approved" pill.
                                 if (!session)
                                     return;
                                 setTimeout(() => {
-                                    void session.send('continue');
+                                    void session.send('continue', { silent: true });
                                 }, 250);
                             } }, m.id))) }), lastError && status === 'error' && ((0, jsx_runtime_1.jsx)("div", { className: "af-error", children: lastError })), (0, jsx_runtime_1.jsxs)("div", { className: "af-input-row", children: [(0, jsx_runtime_1.jsx)("textarea", { className: "af-input", value: draft, onChange: (e) => setDraft(e.target.value), onKeyDown: onKeyDown, placeholder: "Type a message\u2026", rows: 1, disabled: status === 'ended' || status === 'loading' || status === 'idle' }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "af-send", onClick: handleSend, disabled: sendDisabled, "aria-label": "Send message", children: (0, jsx_runtime_1.jsx)(SendIcon, {}) })] }), (0, jsx_runtime_1.jsx)("div", { className: "af-footer", children: "Powered by AgentForge" })] })] }));
 }
 function MessageBubble({ message, onApprovalAction, onContinue, }) {
-    // Structured metadata takes precedence over plain text. The server
-    // tags messages with `kind: 'awaiting_approval' | 'tool_blocked'`
-    // and the widget renders a dedicated bubble for each — unknown
-    // kinds fall through to the markdown renderer with the plain text
-    // body the server also persists.
     const kind = message.metadata?.kind;
     if (kind === 'awaiting_approval') {
         return ((0, jsx_runtime_1.jsx)(ApprovalBubble, { message: message, onAction: onApprovalAction, onContinue: onContinue }));
@@ -333,7 +353,11 @@ function ApprovalBubble({ message, onAction, onContinue, }) {
     const [busy, setBusy] = (0, react_1.useState)(null);
     const [decided, setDecided] = (0, react_1.useState)(null);
     const [err, setErr] = (0, react_1.useState)(null);
-    const remaining = useExpiresIn(meta?.expiresAt);
+    const copy = meta?.copy ?? fallbackCopy({
+        connectorName: meta?.connectorName,
+        toolName: meta?.toolName,
+    });
+    const remaining = useExpiresIn(meta?.expiresAt, copy.expiresPrefix);
     if (!meta)
         return null;
     const act = async (action) => {
@@ -354,20 +378,27 @@ function ApprovalBubble({ message, onAction, onContinue, }) {
             setBusy(null);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "af-msg af-msg-approval", children: [(0, jsx_runtime_1.jsx)("div", { className: "af-approval-title", children: "Awaiting approval" }), (0, jsx_runtime_1.jsxs)("div", { className: "af-approval-body", children: ["The agent wants to run", ' ', (0, jsx_runtime_1.jsx)("code", { className: "af-approval-tool", children: meta.toolName }), "."] }), remaining && !decided && ((0, jsx_runtime_1.jsx)("div", { className: "af-approval-meta", children: remaining })), decided && ((0, jsx_runtime_1.jsx)("div", { className: `af-approval-pill af-approval-pill-${decided}`, children: decided === 'approved' ? 'Approved — retrying…' : 'Denied' })), !decided && onAction && ((0, jsx_runtime_1.jsxs)("div", { className: "af-approval-actions", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "af-approval-btn af-approval-approve", disabled: busy !== null, onClick: () => act('approve'), children: busy === 'approve' ? 'Approving…' : 'Approve' }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "af-approval-btn af-approval-deny", disabled: busy !== null, onClick: () => act('deny'), children: busy === 'deny' ? 'Denying…' : 'Deny' })] })), !decided && !onAction && ((0, jsx_runtime_1.jsx)("div", { className: "af-approval-hint", children: "A workspace admin needs to review this." })), err && (0, jsx_runtime_1.jsx)("div", { className: "af-approval-error", children: err })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "af-msg af-msg-approval", children: [(0, jsx_runtime_1.jsx)("div", { className: "af-approval-title", children: copy.title }), (0, jsx_runtime_1.jsx)("div", { className: "af-approval-body", children: copy.body }), remaining && !decided && ((0, jsx_runtime_1.jsx)("div", { className: "af-approval-meta", children: remaining })), decided && ((0, jsx_runtime_1.jsx)("div", { className: `af-approval-pill af-approval-pill-${decided}`, children: decided === 'approved' ? copy.approvedPill : copy.deniedPill })), !decided && onAction && ((0, jsx_runtime_1.jsxs)("div", { className: "af-approval-actions", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "af-approval-btn af-approval-approve", disabled: busy !== null, onClick: () => act('approve'), children: busy === 'approve' ? copy.approveBusyLabel : copy.approveLabel }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "af-approval-btn af-approval-deny", disabled: busy !== null, onClick: () => act('deny'), children: busy === 'deny' ? copy.denyBusyLabel : copy.denyLabel })] })), !decided && !onAction && ((0, jsx_runtime_1.jsx)("div", { className: "af-approval-hint", children: copy.readOnlyHint })), err && (0, jsx_runtime_1.jsx)("div", { className: "af-approval-error", children: err })] }));
 }
 /**
  * Terminal "tool blocked" bubble. No action — just informs the visitor
  * that the tool the agent tried isn't available.
  */
-function BlockedBubble({ message }) {
+function BlockedBubble({ message, }) {
     const meta = message.metadata;
     if (!meta)
         return null;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "af-msg af-msg-blocked", children: [(0, jsx_runtime_1.jsx)("div", { className: "af-blocked-title", children: "Tool blocked" }), (0, jsx_runtime_1.jsxs)("div", { className: "af-blocked-body", children: [(0, jsx_runtime_1.jsx)("code", { className: "af-approval-tool", children: meta.toolName }), " is blocked by the workspace admin.", ' ', meta.reason ?? ''] })] }));
+    const copy = meta.copy ?? fallbackCopy({
+        connectorName: meta.connectorName,
+        toolName: meta.toolName,
+        reason: meta.reason,
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "af-msg af-msg-blocked", children: [(0, jsx_runtime_1.jsx)("div", { className: "af-blocked-title", children: copy.blockedTitle }), (0, jsx_runtime_1.jsx)("div", { className: "af-blocked-body", children: copy.blockedBody })] }));
 }
-/** Live "expires in" countdown. Returns null after the deadline. */
-function useExpiresIn(iso) {
+/** Live "expires in" countdown. Returns null after the deadline.
+ *  The prefix label is server-authored so the language matches the
+ *  rest of the bubble; the hook just appends the localised digits. */
+function useExpiresIn(iso, prefix) {
     const [, force] = (0, react_1.useState)(0);
     (0, react_1.useEffect)(() => {
         if (!iso)
@@ -383,9 +414,10 @@ function useExpiresIn(iso) {
     const totalSeconds = Math.floor(ms / 1000);
     const m = Math.floor(totalSeconds / 60);
     const s = totalSeconds % 60;
-    if (m >= 60)
-        return `Expires in ${Math.floor(m / 60)}h ${m % 60}m`;
-    return `Expires in ${m}m ${s.toString().padStart(2, '0')}s`;
+    const tail = m >= 60
+        ? `${Math.floor(m / 60)}h ${m % 60}m`
+        : `${m}m ${s.toString().padStart(2, '0')}s`;
+    return `${prefix} ${tail}`.trim();
 }
 function ChatIcon() {
     return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: (0, jsx_runtime_1.jsx)("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" }) }));

package/dist/session.d.ts

@@ -42,8 +42,18 @@ export declare class ChatSession {
      * Send a user message. Opens the conversation on first call. Returns the
      * final assistant content for callers that want to await it; the same
      * content is also emitted via `message_added` / `message_updated`.
+     *
+     * `silent: true` suppresses the user-message bubble that would normally
+     * appear in the view layer. Used by the tool-approval auto-continue
+     * flow: after the visitor clicks Approve, the widget fires a hidden
+     * `send('continue', { silent: true })` so the gate's fast-path
+     * triggers without leaking a literal "continue" message into the
+     * conversation. The server still sees a regular user message and the
+     * agent's reply comes back through the normal stream.
      */
-    send(text: string): Promise<string>;
+    send(text: string, opts?: {
+        silent?: boolean;
+    }): Promise<string>;
     private runStream;
     private runNonStream;
     private appendMessage;

package/dist/session.js

@@ -142,8 +142,16 @@ class ChatSession {
      * Send a user message. Opens the conversation on first call. Returns the
      * final assistant content for callers that want to await it; the same
      * content is also emitted via `message_added` / `message_updated`.
+     *
+     * `silent: true` suppresses the user-message bubble that would normally
+     * appear in the view layer. Used by the tool-approval auto-continue
+     * flow: after the visitor clicks Approve, the widget fires a hidden
+     * `send('continue', { silent: true })` so the gate's fast-path
+     * triggers without leaking a literal "continue" message into the
+     * conversation. The server still sees a regular user message and the
+     * agent's reply comes back through the normal stream.
      */
-    async send(text) {
+    async send(text, opts) {
         const trimmed = text.trim();
         if (!trimmed)
             return '';
@@ -152,12 +160,14 @@ class ChatSession {
         }
         if (!this.started)
             await this.start();
-        this.appendMessage({
-            id: makeMessageId('u'),
-            role: 'user',
-            content: trimmed,
-            createdAt: new Date(),
-        });
+        if (!opts?.silent) {
+            this.appendMessage({
+                id: makeMessageId('u'),
+                role: 'user',
+                content: trimmed,
+                createdAt: new Date(),
+            });
+        }
         const assistant = {
             id: makeMessageId('a'),
             role: 'assistant',
@@ -202,9 +212,14 @@ class ChatSession {
                             approvalId: c.approvalId,
                             toolName: c.toolName,
                             expiresAt: c.expiresAt,
+                            connectorName: c.connectorName,
+                            toolDescription: c.toolDescription,
+                            copy: c.copy,
                         };
-                        assistant.content =
-                            full || `(waiting for approval to run \`${c.toolName}\`)`;
+                        // Plain-text fallback for legacy clients that don't render
+                        // metadata.kind. Capable widgets ignore `content` and read
+                        // `metadata.copy` directly.
+                        assistant.content = full || c.copy?.body || (c.connectorName ?? '');
                         this.updateMessage(assistant);
                         continue;
                     }
@@ -214,9 +229,12 @@ class ChatSession {
                             kind: 'tool_blocked',
                             toolName: c.toolName,
                             reason: c.reason,
+                            connectorName: c.connectorName,
+                            toolDescription: c.toolDescription,
+                            copy: c.copy,
                         };
                         assistant.content =
-                            full || c.reason || `Tool "${c.toolName}" is blocked.`;
+                            full || c.copy?.blockedBody || c.reason || (c.connectorName ?? '');
                         this.updateMessage(assistant);
                         continue;
                     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentforge-io/chat-sdk",
-  "version": "2.0.18",
+  "version": "2.0.20",
   "description": "Framework-free chat session SDK for AgentForge public chat tokens. Headless — no DOM. Drop into any frontend (React, Vue, Svelte, vanilla) and listen for events.",
   "license": "MIT",
   "main": "dist/index.js",