@agentforge-io/chat-react 2.0.15 → 2.0.17

package/dist/ChatPanel.d.ts

@@ -1,4 +1,19 @@
 import { type CSSProperties } from 'react';
+/**
+ * Optional handler the host wires when the chat panel is embedded
+ * inside an admin surface (e.g. the dashboard's agent playground).
+ *
+ * When provided, an `awaiting_approval` bubble renders Approve/Deny
+ * buttons that call this function — the host implementation typically
+ * POSTs to `/admin/tenants/:tid/approvals/:id/{approve,deny}` and then
+ * resolves so the panel knows to auto-continue. When omitted (e.g.
+ * a public-chat embed where the visitor isn't an admin), the bubble
+ * renders a read-only "waiting" state with a link to `/approvals`.
+ */
+export type ApprovalActionHandler = (args: {
+    approvalId: string;
+    action: 'approve' | 'deny';
+}) => Promise<void>;
 export interface ChatPanelProps {
     /** Override the header title. Falls back to theme.title, then agent.name. */
     title?: string;
@@ -11,6 +26,9 @@ export interface ChatPanelProps {
      *  the height. */
     style?: CSSProperties;
     className?: string;
+    /** Wire an admin-side handler to render Approve/Deny buttons on
+     *  `awaiting_approval` bubbles. See `ApprovalActionHandler`. */
+    onApprovalAction?: ApprovalActionHandler;
 }
 /**
  * Reference rendering of a chat panel. Pure React, no portal, no fixed
@@ -18,4 +36,4 @@ export interface ChatPanelProps {
  * (modal, sidebar, page section). For the floating launcher pattern, see
  * the script-tag widget at /widget.js.
  */
-export declare function ChatPanel({ title, placeholder, subtitle, style, className, }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatPanel({ title, placeholder, subtitle, style, className, onApprovalAction, }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/ChatPanel.js

@@ -11,7 +11,7 @@ const hooks_1 = require("./hooks");
  * (modal, sidebar, page section). For the floating launcher pattern, see
  * the script-tag widget at /widget.js.
  */
-function ChatPanel({ title, placeholder = 'Type a message…', subtitle, style, className, }) {
+function ChatPanel({ title, placeholder = 'Type a message…', subtitle, style, className, onApprovalAction, }) {
     const { agent, theme } = (0, hooks_1.useAgent)();
     const { messages, status, send, isBusy, error } = (0, hooks_1.useChat)();
     const resolvedTitle = title ?? theme?.title ?? agent?.name ?? 'Chat';
@@ -81,7 +81,20 @@ function ChatPanel({ title, placeholder = 'Type a message…', subtitle, style,
                     display: 'flex',
                     flexDirection: 'column',
                     gap: 10,
-                }, children: messages.map((m) => ((0, jsx_runtime_1.jsx)(Bubble, { role: m.role, streaming: m.isStreaming, primary: primary, children: m.content }, m.id))) }), error && ((0, jsx_runtime_1.jsx)("div", { style: {
+                }, children: messages.map((m) => {
+                    // Branch on structured metadata before falling back to the
+                    // plain-text bubble. Unknown kinds also fall through — the
+                    // body still carries the human-readable line the server
+                    // generated.
+                    const kind = m.metadata?.kind;
+                    if (kind === 'awaiting_approval') {
+                        return ((0, jsx_runtime_1.jsx)(ApprovalCardBubble, { message: m, primary: primary, onAction: onApprovalAction, onContinue: () => send('continue') }, m.id));
+                    }
+                    if (kind === 'tool_blocked') {
+                        return ((0, jsx_runtime_1.jsx)(BlockedCardBubble, { message: m }, m.id));
+                    }
+                    return ((0, jsx_runtime_1.jsx)(Bubble, { role: m.role, streaming: m.isStreaming, primary: primary, children: m.content }, m.id));
+                }) }), error && ((0, jsx_runtime_1.jsx)("div", { style: {
                     padding: '10px 16px',
                     fontSize: 12,
                     color: '#b91c1c',
@@ -183,3 +196,137 @@ function hexToRgba(hex, alpha) {
     const b = parseInt(h.slice(4, 6), 16);
     return `rgba(${r},${g},${b},${alpha})`;
 }
+/**
+ * Bubble variant for `metadata.kind === 'awaiting_approval'`. Shows the
+ * tool name + a countdown, and either Approve/Deny buttons (when the
+ * host wired `onApprovalAction`) or a read-only hint pointing the user
+ * to `/approvals`. After a successful Approve, calls `onContinue` so
+ * the chat sends a follow-up turn that consumes the approval through
+ * the gate's fast path.
+ */
+function ApprovalCardBubble({ message, primary, onAction, onContinue, }) {
+    const meta = message.metadata;
+    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);
+    if (!meta)
+        return null;
+    const act = async (action) => {
+        if (!onAction)
+            return;
+        setBusy(action);
+        setErr(null);
+        try {
+            await onAction({ approvalId: meta.approvalId, action });
+            setDecided(action === 'approve' ? 'approved' : 'denied');
+            if (action === 'approve') {
+                // Small delay so the user sees the "Approved" pill flash
+                // before the next turn starts streaming on top.
+                setTimeout(onContinue, 250);
+            }
+        }
+        catch (e) {
+            setErr(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            alignSelf: 'flex-start',
+            maxWidth: '90%',
+            padding: '12px 14px',
+            borderRadius: 14,
+            borderBottomLeftRadius: 4,
+            fontSize: 14,
+            background: '#fffbeb',
+            border: '1px solid #fde68a',
+            color: '#7c2d12',
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: 600, fontSize: 13, marginBottom: 4 }, children: "Awaiting approval" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: 13, lineHeight: 1.5 }, children: ["The agent wants to run", ' ', (0, jsx_runtime_1.jsx)("code", { style: {
+                            background: 'rgba(0,0,0,0.06)',
+                            padding: '1px 6px',
+                            borderRadius: 4,
+                            fontSize: 12,
+                        }, children: meta.toolName }), "."] }), remaining && !decided && ((0, jsx_runtime_1.jsx)("div", { style: { fontSize: 11, marginTop: 6, color: '#92400e' }, children: remaining })), decided && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'inline-block',
+                    marginTop: 8,
+                    padding: '2px 8px',
+                    borderRadius: 999,
+                    fontSize: 11,
+                    fontWeight: 600,
+                    background: decided === 'approved' ? '#dcfce7' : '#fee2e2',
+                    color: decided === 'approved' ? '#166534' : '#991b1b',
+                }, children: decided === 'approved' ? 'Approved — retrying…' : 'Denied' })), !decided && onAction && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 8, marginTop: 10 }, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", disabled: busy !== null, onClick: () => act('approve'), style: {
+                            background: primary,
+                            color: 'white',
+                            border: 'none',
+                            borderRadius: 8,
+                            padding: '6px 12px',
+                            fontSize: 12,
+                            fontWeight: 600,
+                            cursor: busy === null ? 'pointer' : 'not-allowed',
+                            opacity: busy === null ? 1 : 0.6,
+                        }, children: busy === 'approve' ? 'Approving…' : 'Approve' }), (0, jsx_runtime_1.jsx)("button", { type: "button", disabled: busy !== null, onClick: () => act('deny'), style: {
+                            background: 'white',
+                            color: '#7c2d12',
+                            border: '1px solid #fde68a',
+                            borderRadius: 8,
+                            padding: '6px 12px',
+                            fontSize: 12,
+                            fontWeight: 600,
+                            cursor: busy === null ? 'pointer' : 'not-allowed',
+                            opacity: busy === null ? 1 : 0.6,
+                        }, children: busy === 'deny' ? 'Denying…' : 'Deny' })] })), !decided && !onAction && ((0, jsx_runtime_1.jsxs)("div", { style: { fontSize: 12, marginTop: 8, color: '#7c2d12' }, children: ["A workspace admin needs to review this. Visit", ' ', (0, jsx_runtime_1.jsx)("code", { style: { fontSize: 12 }, children: "/approvals" }), " in the dashboard."] })), err && ((0, jsx_runtime_1.jsx)("div", { style: { fontSize: 11, marginTop: 6, color: '#b91c1c' }, children: err }))] }));
+}
+/**
+ * Bubble variant for `metadata.kind === 'tool_blocked'`. Terminal —
+ * no action affordance. Renders the reason if the server supplied
+ * one, otherwise a generic line.
+ */
+function BlockedCardBubble({ message }) {
+    const meta = message.metadata;
+    if (!meta)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            alignSelf: 'flex-start',
+            maxWidth: '90%',
+            padding: '10px 14px',
+            borderRadius: 14,
+            borderBottomLeftRadius: 4,
+            fontSize: 13,
+            background: '#fef2f2',
+            border: '1px solid #fecaca',
+            color: '#7f1d1d',
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: 600, fontSize: 13, marginBottom: 4 }, children: "Tool blocked" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: 12, lineHeight: 1.5 }, children: [(0, jsx_runtime_1.jsx)("code", { style: {
+                            background: 'rgba(0,0,0,0.06)',
+                            padding: '1px 6px',
+                            borderRadius: 4,
+                            fontSize: 12,
+                        }, children: meta.toolName }), ' ', "is blocked by the workspace admin. ", meta.reason ?? ''] })] }));
+}
+/**
+ * Live countdown for an ISO timestamp. Returns null when the deadline
+ * has passed — caller renders nothing in that case. Tick interval 1s
+ * to match the `/approvals` page's badge.
+ */
+function useExpiresIn(iso) {
+    const [, force] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        if (!iso)
+            return;
+        const t = setInterval(() => force((n) => n + 1), 1000);
+        return () => clearInterval(t);
+    }, [iso]);
+    if (!iso)
+        return null;
+    const ms = new Date(iso).getTime() - Date.now();
+    if (!Number.isFinite(ms) || ms <= 0)
+        return null;
+    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`;
+}

package/dist/index.d.ts

@@ -26,5 +26,5 @@ export { AgentChatProvider, useAgentChatContext, useChatSessionState } from './p
 export type { AgentChatProviderProps, ChatUserContext, } from './provider';
 export { useChat, useAgent } from './hooks';
 export { ChatPanel } from './ChatPanel';
-export type { ChatPanelProps } from './ChatPanel';
-export type { ChatAgentSummary, ChatEvent, ChatMessage, ChatRole, ChatSessionStatus, ChatTheme, } from '@agentforge-io/chat-sdk';
+export type { ChatPanelProps, ApprovalActionHandler } from './ChatPanel';
+export type { ChatAgentSummary, ChatEvent, ChatMessage, ChatMessageMetadata, ChatRole, ChatSessionStatus, ChatTheme, } from '@agentforge-io/chat-sdk';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentforge-io/chat-react",
-  "version": "2.0.15",
+  "version": "2.0.17",
   "description": "React + Next.js adapter for @agentforge-io/chat-sdk. Provider, hooks, and a reference ChatPanel component.",
   "license": "MIT",
   "main": "dist/index.js",
@@ -16,10 +16,10 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@agentforge-io/chat-sdk": "^2.0.15"
+    "@agentforge-io/chat-sdk": "^2.0.17"
   },
   "dependencies": {
-    "@agentforge-io/chat-sdk": "^2.0.15"
+    "@agentforge-io/chat-sdk": "^2.0.17"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",