@alquimia-ai/ui 2.2.2 → 2.3.0

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,