@alquimia-ai/ui 2.2.4 → 2.3.0

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

@@ -3,7 +3,9 @@ import { Message } from 'ai';
 import { TTSResult, Tooler, ToolFactory, RatingData } from '../../types/index.mjs';
 import * as React$1 from 'react';
 import { AlquimiaSDK } from '@alquimia-ai/tools/sdk';
+export { T as ToolApprovalCard, a as ToolApprovalCardProps, b as ToolApprovalView } from '../../tool-approval-K8aLzb1_.mjs';
 import '@alquimia-ai/tools/types';
+import '@alquimia-ai/tools/hooks';
 
 interface WhisperProps extends React.HTMLAttributes<HTMLDivElement> {
     message: Message;

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

@@ -3,7 +3,9 @@ import { Message } from 'ai';
 import { TTSResult, Tooler, ToolFactory, RatingData } from '../../types/index.js';
 import * as React$1 from 'react';
 import { AlquimiaSDK } from '@alquimia-ai/tools/sdk';
+export { T as ToolApprovalCard, a as ToolApprovalCardProps, b as ToolApprovalView } from '../../tool-approval-K8aLzb1_.js';
 import '@alquimia-ai/tools/types';
+import '@alquimia-ai/tools/hooks';
 
 interface WhisperProps extends React.HTMLAttributes<HTMLDivElement> {
     message: Message;

package/dist/components/organisms/index.js

@@ -358,6 +358,9 @@ __export(organisms_exports, {
     SpeechToText: function() {
         return SpeechToText;
     },
+    ToolApprovalCard: function() {
+        return ToolApprovalCard;
+    },
     Whisper: function() {
         return Whisper;
     }
@@ -3718,4 +3721,195 @@ function RatingDialog(param) {
         })
     });
 }
+// src/components/organisms/tool-approval.tsx
+var React38 = __toESM(require("react"));
+var import_lucide_react19 = require("lucide-react");
+var import_jsx_runtime50 = 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 _React38_useState = _sliced_to_array(React38.useState(false), 2), rejecting = _React38_useState[0], setRejecting = _React38_useState[1];
+    var _React38_useState1 = _sliced_to_array(React38.useState(""), 2), reason = _React38_useState1[0], setReason = _React38_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_runtime50.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_runtime50.jsxs)("header", {
+                className: "flex items-start gap-2",
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react19.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_runtime50.jsxs)("div", {
+                        className: "min-w-0 flex-1",
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", {
+                                className: "text-sm font-medium text-foreground",
+                                children: settled ? "Approval request" : "The agent needs your approval"
+                            }),
+                            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("p", {
+                                className: "text-sm text-muted-foreground",
+                                children: [
+                                    "Run ",
+                                    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("code", {
+                                        className: "rounded bg-muted px-1 py-0.5 font-mono text-xs text-foreground",
+                                        children: toolLabel
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    settled && /* @__PURE__ */ (0, import_jsx_runtime50.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_runtime50.jsx)(import_lucide_react19.Check, {
+                                className: "h-3 w-3"
+                            }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react19.X, {
+                                className: "h-3 w-3"
+                            }),
+                            approval.status === "approved" ? "Approved" : "Rejected",
+                            approval.decidedHere ? " by you" : " elsewhere"
+                        ]
+                    })
+                ]
+            }),
+            args !== null && /* @__PURE__ */ (0, import_jsx_runtime50.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_runtime50.jsxs)("p", {
+                className: "mt-3 text-sm text-muted-foreground",
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", {
+                        className: "font-medium text-foreground",
+                        children: "Reason:"
+                    }),
+                    " ",
+                    approval.reason
+                ]
+            }),
+            blocked && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", {
+                role: "status",
+                className: "mt-3 text-sm text-muted-foreground",
+                children: blocked
+            }),
+            failed && /* @__PURE__ */ (0, import_jsx_runtime50.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_runtime50.jsxs)("div", {
+                className: "mt-3 flex flex-col gap-2",
+                children: [
+                    rejecting && /* @__PURE__ */ (0, import_jsx_runtime50.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_runtime50.jsxs)("div", {
+                        className: "flex flex-wrap items-center justify-end gap-2",
+                        children: [
+                            submitting && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react19.Loader2, {
+                                "aria-label": "Sending decision",
+                                className: "h-4 w-4 animate-spin text-muted-foreground"
+                            }),
+                            rejecting ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, {
+                                children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Button, {
+                                        size: "sm",
+                                        variant: "ghost",
+                                        disabled: submitting,
+                                        onClick: function() {
+                                            return setRejecting(false);
+                                        },
+                                        children: "Cancel"
+                                    }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Button, {
+                                        size: "sm",
+                                        variant: "destructive",
+                                        disabled: submitting,
+                                        onClick: function() {
+                                            return decide(false);
+                                        },
+                                        children: "Reject"
+                                    })
+                                ]
+                            }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, {
+                                children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Button, {
+                                        size: "sm",
+                                        variant: "outline",
+                                        disabled: submitting,
+                                        onClick: function() {
+                                            return setRejecting(true);
+                                        },
+                                        children: "Reject\u2026"
+                                    }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Button, {
+                                        size: "sm",
+                                        disabled: submitting,
+                                        onClick: function() {
+                                            return decide(true);
+                                        },
+                                        children: "Approve"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
 //# sourceMappingURL=index.js.map