@alquimia-ai/ui 2.2.4 → 2.3.0

package/README.md

@@ -15,6 +15,7 @@ It holds no runtime logic. State comes from [`@alquimia-ai/tools`](../tools) —
 - [Theming](#theming)
 - [Building a chat](#building-a-chat)
 - [Chat organisms](#chat-organisms)
+- [Tool approval](#tool-approval)
 - [GenUI](#genui)
 - [Speech](#speech)
 - [Ratings](#ratings)
@@ -190,6 +191,29 @@ A form with autosizing textarea, drag-and-drop and slots.
 
 ---
 
+## Tool approval
+
+When the runtime parks a tool call for human approval, `useAlquimia` exposes the gate in `toolApprovals` and answers it with `approveTool`. `ToolApprovalCard` renders one: the tool name, its arguments, and Approve / Reject — rejecting takes an optional reason, which the runtime keeps in its audit trail.
+
+```tsx
+import { ToolApprovalCard } from '@alquimia-ai/ui/components/organisms';
+
+{alquimia.toolApprovals.map((approval) => (
+  <ToolApprovalCard
+    key={approval.controlId}
+    approval={approval}
+    onDecide={alquimia.approveTool}
+    channelName="WhatsApp"
+  />
+))}
+```
+
+The card follows `approval.status` rather than deciding anything itself, so a decision made by another operator or on the originating channel shows up as settled here too — "Approved by you" or "Approved elsewhere", with the reason for a rejection. When the gate can only be answered on its original channel, or the runtime already refused this client (already decided, no longer pending, not allowed), the buttons are replaced by an explanation; `channelName` names the channel in it, since the runtime's refusal does not.
+
+`AssistantChat` does all of this for you when given the whole hook return: approvals render after the message they followed, the typing indicator is suppressed while one waits, and `approvalChannelName` is passed through to the card.
+
+---
+
 ## GenUI
 
 The agent answers with a **component tree**, not markup. `@alquimia-ai/tools` validates it against a catalog; this package renders it.
@@ -204,7 +228,7 @@ const alquimia = useAlquimia({ assistantId, adapter, genui: { allow: 'all' } });
 <AssistantChat alquimia={alquimia} conversationId={conversationId} />
 ```
 
-`AssistantChat` is a thin composition of `AssistantMessageArea` + `AssistantInput` — it inherits markdown, streaming and error rendering rather than reimplementing them. Props: `alquimia` (required), `registry`, `conversationId`, `placeholder`, `suggestions`, `className`, `thinkIndicator`.
+`AssistantChat` is a thin composition of `AssistantMessageArea` + `AssistantInput` — it inherits markdown, streaming and error rendering rather than reimplementing them. Props: `alquimia` (required), `registry`, `conversationId`, `placeholder`, `suggestions`, `className`, `thinkIndicator`, `approvalChannelName`. Pending tool approvals render in place — see [Tool approval](#tool-approval).
 
 Lower level, when you own the shell:
 
@@ -293,7 +317,7 @@ import { Whisper, SpeechToText } from '@alquimia-ai/ui/components/organisms';
 
 **Molecules** — `PageContainer`, `AlertDialog`, `AssistantButton`, `Carousel`, `NavigationMenu`, `Sidebar`, `Sonner`, `CallOut`, rating and document components.
 
-**Organisms** — `Assistant`, `AssistantMessageArea`, `AssistantInput`, `Whisper`, `SpeechToText`, `RatingDialog`.
+**Organisms** — `Assistant`, `AssistantMessageArea`, `AssistantInput`, `ToolApprovalCard`, `Whisper`, `SpeechToText`, `RatingDialog`.
 
 **Templates** — `MessagesWindow`, `QueryBox`, `Hero`, `Cards`.
 
@@ -324,7 +348,7 @@ import { Whisper, SpeechToText } from '@alquimia-ai/ui/components/organisms';
 | `./components/molecules` | composed components |
 | `./components/molecules/viewers` | PDF / plain-text viewers |
 | `./components/molecules/documents` | document selector + viewer |
-| `./components/organisms` | chat, speech, ratings |
+| `./components/organisms` | chat, tool approval, speech, ratings |
 | `./components/templates` | page-level layouts |
 | `./components/genui` | `A2uiRenderer`, `coreUiRegistry`, `AssistantChat` |
 | `./components/hooks` | UI hooks |

package/dist/components/genui/index.d.mts

@@ -1,6 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { A2uiComponent, SurfaceAction, A2uiSurface, UIAction } from '@alquimia-ai/tools/genui';
+import { b as ToolApprovalView } from '../../tool-approval-K8aLzb1_.mjs';
+import '@alquimia-ai/tools/hooks';
 
 /** Props every A2UI component receives from the renderer. */
 interface A2uiNodeProps {
@@ -48,6 +50,11 @@ interface GenuiChatController {
         awaitingUser: boolean;
         dismiss?: (userMessage?: string) => void;
     };
+    /** Human-approval gates (`useAlquimia().toolApprovals`), rendered in place with Approve / Reject. */
+    toolApprovals?: Array<ToolApprovalView & {
+        afterCount: number;
+    }>;
+    approveTool?: (controlId: string, approved: boolean, message?: string) => unknown;
 }
 interface AssistantChatProps {
     /** The value returned by `useAlquimia({ genui: {...} })`. */
@@ -61,6 +68,8 @@ interface AssistantChatProps {
     className?: string;
     /** Override the typing indicator shown while the agent is working. Defaults to animated dots. */
     thinkIndicator?: React.ReactNode;
+    /** Channel name shown when an approval can only be answered on its originating channel. */
+    approvalChannelName?: string;
 }
 /**
  * Batteries-included GenUI chat. A thin composition of the SDK's existing organisms
@@ -74,6 +83,6 @@ interface AssistantChatProps {
  * the hook). To customize the shell, compose the organisms directly instead of using
  * this wrapper.
  */
-declare function AssistantChat({ alquimia, registry, conversationId, placeholder, suggestions, className, thinkIndicator, }: AssistantChatProps): react_jsx_runtime.JSX.Element;
+declare function AssistantChat({ alquimia, registry, conversationId, placeholder, suggestions, className, thinkIndicator, approvalChannelName, }: AssistantChatProps): react_jsx_runtime.JSX.Element;
 
 export { type A2uiNodeProps, A2uiRenderer, type A2uiRendererProps, AssistantChat, type AssistantChatProps, type GenuiChatController, coreUiRegistry };

package/dist/components/genui/index.d.ts

@@ -1,6 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { A2uiComponent, SurfaceAction, A2uiSurface, UIAction } from '@alquimia-ai/tools/genui';
+import { b as ToolApprovalView } from '../../tool-approval-K8aLzb1_.js';
+import '@alquimia-ai/tools/hooks';
 
 /** Props every A2UI component receives from the renderer. */
 interface A2uiNodeProps {
@@ -48,6 +50,11 @@ interface GenuiChatController {
         awaitingUser: boolean;
         dismiss?: (userMessage?: string) => void;
     };
+    /** Human-approval gates (`useAlquimia().toolApprovals`), rendered in place with Approve / Reject. */
+    toolApprovals?: Array<ToolApprovalView & {
+        afterCount: number;
+    }>;
+    approveTool?: (controlId: string, approved: boolean, message?: string) => unknown;
 }
 interface AssistantChatProps {
     /** The value returned by `useAlquimia({ genui: {...} })`. */
@@ -61,6 +68,8 @@ interface AssistantChatProps {
     className?: string;
     /** Override the typing indicator shown while the agent is working. Defaults to animated dots. */
     thinkIndicator?: React.ReactNode;
+    /** Channel name shown when an approval can only be answered on its originating channel. */
+    approvalChannelName?: string;
 }
 /**
  * Batteries-included GenUI chat. A thin composition of the SDK's existing organisms
@@ -74,6 +83,6 @@ interface AssistantChatProps {
  * the hook). To customize the shell, compose the organisms directly instead of using
  * this wrapper.
  */
-declare function AssistantChat({ alquimia, registry, conversationId, placeholder, suggestions, className, thinkIndicator, }: AssistantChatProps): react_jsx_runtime.JSX.Element;
+declare function AssistantChat({ alquimia, registry, conversationId, placeholder, suggestions, className, thinkIndicator, approvalChannelName, }: AssistantChatProps): react_jsx_runtime.JSX.Element;
 
 export { type A2uiNodeProps, A2uiRenderer, type A2uiRendererProps, AssistantChat, type AssistantChatProps, type GenuiChatController, coreUiRegistry };

package/dist/components/genui/index.js

@@ -2705,8 +2705,8 @@ var coreUiRegistry = {
     Link: LinkNode
 };
 // src/components/genui/assistant-chat.tsx
-var React43 = __toESM(require("react"));
-var import_lucide_react20 = require("lucide-react");
+var React44 = __toESM(require("react"));
+var import_lucide_react21 = require("lucide-react");
 // src/components/organisms/assistant.tsx
 var React42 = __toESM(require("react"));
 var import_react8 = require("react");
@@ -4466,17 +4466,208 @@ var AssistantInput = React42.forwardRef(function(_param, ref) {
     }));
 });
 AssistantInput.displayName = "AssistantInput";
-// src/components/genui/assistant-chat.tsx
+// src/components/organisms/tool-approval.tsx
+var React43 = __toESM(require("react"));
+var import_lucide_react20 = require("lucide-react");
 var import_jsx_runtime53 = require("react/jsx-runtime");
+function formatArguments(args) {
+    if (args === null || args === void 0) return null;
+    if (typeof args === "string") return args;
+    try {
+        return JSON.stringify(args, null, 2);
+    } catch (e) {
+        return String(args);
+    }
+}
+function blockedMessage(approval, channelName) {
+    var _approval_lastResult;
+    var outcome = (_approval_lastResult = approval.lastResult) === null || _approval_lastResult === void 0 ? void 0 : _approval_lastResult.outcome;
+    if (approval.channelOwned || outcome === "wrong-channel") {
+        return "This approval has to be answered in ".concat(channelName !== null && channelName !== void 0 ? channelName : "the channel the conversation came from", ". It can't be answered here.");
+    }
+    switch(outcome){
+        case "already-decided":
+            return "Someone else already answered this request. Waiting for the agent to continue.";
+        case "not-pending":
+            return "This request is no longer waiting for a decision.";
+        case "not-found":
+            return "This conversation has ended, so the request can no longer be answered.";
+        case "forbidden":
+            return "You don't have permission to answer this request.";
+        default:
+            return null;
+    }
+}
+function ToolApprovalCard(param) {
+    var approval = param.approval, onDecide = param.onDecide, channelName = param.channelName, className = param.className;
+    var _React43_useState = _sliced_to_array(React43.useState(false), 2), rejecting = _React43_useState[0], setRejecting = _React43_useState[1];
+    var _React43_useState1 = _sliced_to_array(React43.useState(""), 2), reason = _React43_useState1[0], setReason = _React43_useState1[1];
+    var args = formatArguments(approval.arguments);
+    var _approval_toolName;
+    var toolLabel = (_approval_toolName = approval.toolName) !== null && _approval_toolName !== void 0 ? _approval_toolName : "a tool";
+    var submitting = approval.status === "submitting";
+    var settled = approval.status === "approved" || approval.status === "rejected";
+    var blocked = !settled && !submitting && !approval.canAnswer ? blockedMessage(approval, channelName) : null;
+    var failed = !settled && !submitting && approval.canAnswer && approval.lastResult && approval.lastResult.outcome !== "accepted" ? approval.lastResult : null;
+    var decide = function(approved) {
+        var said = reason.trim();
+        void onDecide(approval.controlId, approved, approved || !said ? void 0 : said);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("section", {
+        "aria-label": "Approval request for ".concat(toolLabel),
+        "data-status": approval.status,
+        className: cn("alq--tool-approval w-full max-w-[95%] rounded-2xl border bg-card p-4 shadow-sm", settled ? "border-border/60" : "border-amber-500/50", className),
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("header", {
+                className: "flex items-start gap-2",
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react20.ShieldAlert, {
+                        "aria-hidden": true,
+                        className: cn("mt-0.5 h-4 w-4 shrink-0", settled ? "text-muted-foreground" : "text-amber-500")
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", {
+                        className: "min-w-0 flex-1",
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", {
+                                className: "text-sm font-medium text-foreground",
+                                children: settled ? "Approval request" : "The agent needs your approval"
+                            }),
+                            /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("p", {
+                                className: "text-sm text-muted-foreground",
+                                children: [
+                                    "Run ",
+                                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("code", {
+                                        className: "rounded bg-muted px-1 py-0.5 font-mono text-xs text-foreground",
+                                        children: toolLabel
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    settled && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", {
+                        className: cn("flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium", approval.status === "approved" ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "bg-destructive/10 text-destructive"),
+                        children: [
+                            approval.status === "approved" ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react20.Check, {
+                                className: "h-3 w-3"
+                            }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react20.X, {
+                                className: "h-3 w-3"
+                            }),
+                            approval.status === "approved" ? "Approved" : "Rejected",
+                            approval.decidedHere ? " by you" : " elsewhere"
+                        ]
+                    })
+                ]
+            }),
+            args !== null && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("pre", {
+                "aria-label": "Arguments",
+                className: "mt-3 max-h-48 overflow-auto rounded-lg bg-muted/60 p-3 font-mono text-xs text-foreground",
+                children: args
+            }),
+            settled && approval.status === "rejected" && approval.reason && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("p", {
+                className: "mt-3 text-sm text-muted-foreground",
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", {
+                        className: "font-medium text-foreground",
+                        children: "Reason:"
+                    }),
+                    " ",
+                    approval.reason
+                ]
+            }),
+            blocked && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", {
+                role: "status",
+                className: "mt-3 text-sm text-muted-foreground",
+                children: blocked
+            }),
+            failed && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("p", {
+                role: "alert",
+                className: "mt-3 text-sm text-destructive",
+                children: [
+                    "Couldn't send your decision",
+                    failed.detail ? ": ".concat(failed.detail) : ".",
+                    " Try again."
+                ]
+            }),
+            !settled && (submitting || approval.canAnswer) && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", {
+                className: "mt-3 flex flex-col gap-2",
+                children: [
+                    rejecting && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Textarea, {
+                        "aria-label": "Reason for rejecting (optional)",
+                        placeholder: "Reason for rejecting (optional)",
+                        value: reason,
+                        disabled: submitting,
+                        onChange: function(e) {
+                            return setReason(e.target.value);
+                        },
+                        className: "min-h-[64px] text-sm"
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", {
+                        className: "flex flex-wrap items-center justify-end gap-2",
+                        children: [
+                            submitting && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react20.Loader2, {
+                                "aria-label": "Sending decision",
+                                className: "h-4 w-4 animate-spin text-muted-foreground"
+                            }),
+                            rejecting ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, {
+                                children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Button, {
+                                        size: "sm",
+                                        variant: "ghost",
+                                        disabled: submitting,
+                                        onClick: function() {
+                                            return setRejecting(false);
+                                        },
+                                        children: "Cancel"
+                                    }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Button, {
+                                        size: "sm",
+                                        variant: "destructive",
+                                        disabled: submitting,
+                                        onClick: function() {
+                                            return decide(false);
+                                        },
+                                        children: "Reject"
+                                    })
+                                ]
+                            }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, {
+                                children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Button, {
+                                        size: "sm",
+                                        variant: "outline",
+                                        disabled: submitting,
+                                        onClick: function() {
+                                            return setRejecting(true);
+                                        },
+                                        children: "Reject\u2026"
+                                    }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Button, {
+                                        size: "sm",
+                                        disabled: submitting,
+                                        onClick: function() {
+                                            return decide(true);
+                                        },
+                                        children: "Approve"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+// src/components/genui/assistant-chat.tsx
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function TypingDots() {
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", {
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", {
         className: "flex w-fit items-center gap-1.5 rounded-2xl rounded-bl-md border border-border/60 bg-card px-4 py-3 shadow-sm",
         children: [
             0,
             1,
             2
         ].map(function(i) {
-            return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", {
+            return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", {
                 className: "h-2 w-2 animate-bounce rounded-full bg-primary",
                 style: {
                     animationDelay: "".concat(i * 0.15, "s"),
@@ -4487,11 +4678,15 @@ function TypingDots() {
     });
 }
 function AssistantChat(param) {
-    var alquimia = param.alquimia, _param_registry = param.registry, registry = _param_registry === void 0 ? coreUiRegistry : _param_registry, conversationId = param.conversationId, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Ask the agent to build something\u2026" : _param_placeholder, _param_suggestions = param.suggestions, suggestions = _param_suggestions === void 0 ? [] : _param_suggestions, className = param.className, thinkIndicator = param.thinkIndicator;
-    var endRef = React43.useRef(null);
-    var messages = alquimia.messages, input = alquimia.input, handleInputChange = alquimia.handleInputChange, handleSubmit = alquimia.handleSubmit, handleLoadingCancel = alquimia.handleLoadingCancel, isLoading = alquimia.isLoading, isMessageStreaming = alquimia.isMessageStreaming, streamingMessageId = alquimia.streamingMessageId, genui = alquimia.genui;
+    var alquimia = param.alquimia, _param_registry = param.registry, registry = _param_registry === void 0 ? coreUiRegistry : _param_registry, conversationId = param.conversationId, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Ask the agent to build something\u2026" : _param_placeholder, _param_suggestions = param.suggestions, suggestions = _param_suggestions === void 0 ? [] : _param_suggestions, className = param.className, thinkIndicator = param.thinkIndicator, approvalChannelName = param.approvalChannelName;
+    var endRef = React44.useRef(null);
+    var messages = alquimia.messages, input = alquimia.input, handleInputChange = alquimia.handleInputChange, handleSubmit = alquimia.handleSubmit, handleLoadingCancel = alquimia.handleLoadingCancel, isLoading = alquimia.isLoading, isMessageStreaming = alquimia.isMessageStreaming, streamingMessageId = alquimia.streamingMessageId, genui = alquimia.genui, toolApprovals = alquimia.toolApprovals, approveTool = alquimia.approveTool;
     var _genui_surfaces;
     var surfaces = (_genui_surfaces = genui === null || genui === void 0 ? void 0 : genui.surfaces) !== null && _genui_surfaces !== void 0 ? _genui_surfaces : [];
+    var approvals = toolApprovals !== null && toolApprovals !== void 0 ? toolApprovals : [];
+    var awaitingApproval = approvals.some(function(a) {
+        return a.status === "pending" || a.status === "submitting";
+    });
     var _genui_awaitingUser;
     var awaitingUser = (_genui_awaitingUser = genui === null || genui === void 0 ? void 0 : genui.awaitingUser) !== null && _genui_awaitingUser !== void 0 ? _genui_awaitingUser : false;
     var isBusy = !!(isLoading || isMessageStreaming);
@@ -4499,36 +4694,37 @@ function AssistantChat(param) {
         var _m_content;
         return m.role === "user" || m.role !== "system" && ((_m_content = m.content) !== null && _m_content !== void 0 ? _m_content : "").trim().length > 0;
     });
-    var isEmpty = !hasContent && surfaces.length === 0;
-    React43.useEffect(function() {
+    var isEmpty = !hasContent && surfaces.length === 0 && approvals.length === 0;
+    React44.useEffect(function() {
         var _endRef_current;
         (_endRef_current = endRef.current) === null || _endRef_current === void 0 ? void 0 : _endRef_current.scrollIntoView({
             behavior: "smooth"
         });
     }, [
         messages,
-        surfaces
+        surfaces,
+        approvals.length
     ]);
     var renderSurface = function(item) {
-        return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", {
+        return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", {
             className: "my-3 flex flex-col items-start gap-1.5",
             children: [
-                /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", {
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", {
                     className: cn("relative w-full max-w-[95%] rounded-2xl border border-border/60 bg-card p-5 shadow-sm duration-500 animate-in fade-in slide-in-from-bottom-2", item.submitted && "opacity-70"),
                     children: [
-                        item.submitted && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", {
+                        item.submitted && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", {
                             className: "absolute right-3 top-3 z-10 flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 text-xs font-medium text-emerald-600 dark:text-emerald-400",
                             children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react20.Check, {
+                                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react21.Check, {
                                     className: "h-3 w-3"
                                 }),
                                 item.dismissedWith ? "Skipped" : "Submitted"
                             ]
                         }),
-                        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", {
+                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", {
                             className: cn(item.submitted && "pointer-events-none select-none"),
                             "aria-disabled": item.submitted,
-                            children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(A2uiRenderer, {
+                            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(A2uiRenderer, {
                                 surface: item.surface,
                                 registry: registry,
                                 onAgentAction: genui ? genui.onAgentAction(item.controlId) : function() {}
@@ -4536,10 +4732,10 @@ function AssistantChat(param) {
                         })
                     ]
                 }),
-                item.dismissedWith && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("p", {
+                item.dismissedWith && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("p", {
                     className: "alq--surface-dismissed max-w-[95%] pl-1 text-sm text-muted-foreground",
                     children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", {
+                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", {
                             className: "font-medium text-foreground",
                             children: "You replied:"
                         }),
@@ -4574,21 +4770,56 @@ function AssistantChat(param) {
             }
         }
     }
+    var approvalsByCount = /* @__PURE__ */ new Map();
+    var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = undefined;
+    try {
+        for(var _iterator1 = approvals[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true){
+            var a = _step1.value;
+            var _approvalsByCount_get;
+            var arr1 = (_approvalsByCount_get = approvalsByCount.get(a.afterCount)) !== null && _approvalsByCount_get !== void 0 ? _approvalsByCount_get : [];
+            arr1.push(a);
+            approvalsByCount.set(a.afterCount, arr1);
+        }
+    } catch (err) {
+        _didIteratorError1 = true;
+        _iteratorError1 = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+                _iterator1.return();
+            }
+        } finally{
+            if (_didIteratorError1) {
+                throw _iteratorError1;
+            }
+        }
+    }
+    var renderApproval = function(approval) {
+        return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", {
+            className: "my-3 flex flex-col items-start",
+            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ToolApprovalCard, {
+                approval: approval,
+                onDecide: approveTool !== null && approveTool !== void 0 ? approveTool : function() {},
+                channelName: approvalChannelName,
+                className: "duration-500 animate-in fade-in slide-in-from-bottom-2"
+            })
+        }, "a-".concat(approval.controlId));
+    };
     var interleave = function(afterIndex) {
-        var _byCount_get;
-        var nodes = ((_byCount_get = byCount.get(afterIndex)) !== null && _byCount_get !== void 0 ? _byCount_get : []).map(renderSurface);
+        var _byCount_get, _approvalsByCount_get;
+        var nodes = _to_consumable_array(((_byCount_get = byCount.get(afterIndex)) !== null && _byCount_get !== void 0 ? _byCount_get : []).map(renderSurface)).concat(_to_consumable_array(((_approvalsByCount_get = approvalsByCount.get(afterIndex)) !== null && _approvalsByCount_get !== void 0 ? _approvalsByCount_get : []).map(renderApproval)));
         if (afterIndex === 0 && isEmpty) {
-            nodes.unshift(/* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", {
+            nodes.unshift(/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", {
                 className: "flex min-h-full flex-col items-center justify-center gap-4 py-16 text-center",
                 children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", {
+                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", {
                         className: "max-w-sm text-muted-foreground",
                         children: "Ask the agent to build an interface."
                     }),
-                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", {
+                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", {
                         className: "flex flex-col items-center gap-2",
                         children: suggestions.map(function(s) {
-                            return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("button", {
+                            return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("button", {
                                 type: "button",
                                 onClick: function() {
                                     return handleInputChange({
@@ -4662,20 +4893,20 @@ function AssistantChat(param) {
             return _ref.apply(this, arguments);
         };
     }();
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Assistant, {
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Assistant, {
         className: cn("mx-auto flex h-full w-full max-w-2xl flex-col bg-transparent px-4", className),
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(AssistantMessageArea, {
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(AssistantMessageArea, {
                 className: "bg-transparent",
                 messages: messages,
                 messagesEndRef: endRef,
                 isLoading: !!isLoading,
                 streamingMessageId: streamingMessageId !== null && streamingMessageId !== void 0 ? streamingMessageId : null,
                 interleave: interleave,
-                awaitingUser: awaitingUser,
-                thinkIndicator: thinkIndicator !== null && thinkIndicator !== void 0 ? thinkIndicator : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TypingDots, {})
+                awaitingUser: awaitingUser || awaitingApproval,
+                thinkIndicator: thinkIndicator !== null && thinkIndicator !== void 0 ? thinkIndicator : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TypingDots, {})
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(AssistantInput, {
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(AssistantInput, {
                 className: "mb-5 mt-2 rounded-2xl border-border/60 bg-card/90 shadow-lg backdrop-blur",
                 sendMessageFunc: onSubmit,
                 isButtonDisabled: isBusy && !awaitingUser,