@alquimia-ai/ui 2.2.4 → 2.3.0

package/dist/index.d.mts

@@ -3,6 +3,7 @@ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, Al
 export { T as Toast, a as ToastAction, b as ToastActionElement, c as ToastClose, d as ToastDescription, e as ToastProps, f as ToastProvider, g as ToastTitle, h as ToastViewport } from './toast-DEc6eGUE.mjs';
 export { CardImageWithHeadingAndDescriptionAvatarHorizontal, CardImageWithHeadingAndDescriptionHorizontal, CardWithImageHeadingDescriptionAvatarProps, CardWithImageHeadingDescriptionAvatarVertical, CardWithImageHeadingDescriptionProps, CardWithImageHeadingDescriptionVertical, Hero, HeroContent, HeroContentProps, HeroProps, MessagesWindow, QueryBox } from './components/templates/index.mjs';
 export { Assistant, AssistantInput, AssistantMessageArea, RatingDialog, SpeechToText, Whisper } from './components/organisms/index.mjs';
+export { T as ToolApprovalCard, a as ToolApprovalCardProps, b as ToolApprovalView } from './tool-approval-K8aLzb1_.mjs';
 export { AssistantButton, CallOut, CallOutActions, CallOutDate, CallOutMessage, CallOutProps, CallOutResponse, Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageContainer, RatingComment, RatingStars, RatingThumbs, Sidebar, SidebarFooter, SidebarItem, SidebarProps, SonnerToaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, navigationMenuTriggerStyle } from './components/molecules/index.mjs';
 export { reducer, toast, useDocumentReader, useTextStreaming, useToast } from './components/hooks/index.mjs';
 export { blobToBase64, cn, getCookies, getErrorMessage, hasToolResult, parseTextToSpeech, truncateString } from './lib/index.mjs';
@@ -35,6 +36,7 @@ import 'react-day-picker';
 import '@radix-ui/react-toast';
 import 'ai';
 import '@alquimia-ai/tools/sdk';
+import '@alquimia-ai/tools/hooks';
 import 'lucide-react';
 import 'embla-carousel-react';
 import '@radix-ui/react-navigation-menu';

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, Al
 export { T as Toast, a as ToastAction, b as ToastActionElement, c as ToastClose, d as ToastDescription, e as ToastProps, f as ToastProvider, g as ToastTitle, h as ToastViewport } from './toast-DEc6eGUE.js';
 export { CardImageWithHeadingAndDescriptionAvatarHorizontal, CardImageWithHeadingAndDescriptionHorizontal, CardWithImageHeadingDescriptionAvatarProps, CardWithImageHeadingDescriptionAvatarVertical, CardWithImageHeadingDescriptionProps, CardWithImageHeadingDescriptionVertical, Hero, HeroContent, HeroContentProps, HeroProps, MessagesWindow, QueryBox } from './components/templates/index.js';
 export { Assistant, AssistantInput, AssistantMessageArea, RatingDialog, SpeechToText, Whisper } from './components/organisms/index.js';
+export { T as ToolApprovalCard, a as ToolApprovalCardProps, b as ToolApprovalView } from './tool-approval-K8aLzb1_.js';
 export { AssistantButton, CallOut, CallOutActions, CallOutDate, CallOutMessage, CallOutProps, CallOutResponse, Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageContainer, RatingComment, RatingStars, RatingThumbs, Sidebar, SidebarFooter, SidebarItem, SidebarProps, SonnerToaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, navigationMenuTriggerStyle } from './components/molecules/index.js';
 export { reducer, toast, useDocumentReader, useTextStreaming, useToast } from './components/hooks/index.js';
 export { blobToBase64, cn, getCookies, getErrorMessage, hasToolResult, parseTextToSpeech, truncateString } from './lib/index.js';
@@ -35,6 +36,7 @@ import 'react-day-picker';
 import '@radix-ui/react-toast';
 import 'ai';
 import '@alquimia-ai/tools/sdk';
+import '@alquimia-ai/tools/hooks';
 import 'lucide-react';
 import 'embla-carousel-react';
 import '@radix-ui/react-navigation-menu';

package/dist/index.js

@@ -823,6 +823,9 @@ __export(src_exports, {
     Toggle: function() {
         return Toggle;
     },
+    ToolApprovalCard: function() {
+        return ToolApprovalCard;
+    },
     Tooltip: function() {
         return Tooltip2;
     },
@@ -4651,6 +4654,197 @@ function RatingDialog(param) {
         })
     });
 }
+// src/components/organisms/tool-approval.tsx
+var React38 = __toESM(require("react"));
+var import_lucide_react19 = require("lucide-react");
+var import_jsx_runtime55 = 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_runtime55.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_runtime55.jsxs)("header", {
+                className: "flex items-start gap-2",
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime55.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_runtime55.jsxs)("div", {
+                        className: "min-w-0 flex-1",
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", {
+                                className: "text-sm font-medium text-foreground",
+                                children: settled ? "Approval request" : "The agent needs your approval"
+                            }),
+                            /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("p", {
+                                className: "text-sm text-muted-foreground",
+                                children: [
+                                    "Run ",
+                                    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("code", {
+                                        className: "rounded bg-muted px-1 py-0.5 font-mono text-xs text-foreground",
+                                        children: toolLabel
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    settled && /* @__PURE__ */ (0, import_jsx_runtime55.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_runtime55.jsx)(import_lucide_react19.Check, {
+                                className: "h-3 w-3"
+                            }) : /* @__PURE__ */ (0, import_jsx_runtime55.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_runtime55.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_runtime55.jsxs)("p", {
+                className: "mt-3 text-sm text-muted-foreground",
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", {
+                        className: "font-medium text-foreground",
+                        children: "Reason:"
+                    }),
+                    " ",
+                    approval.reason
+                ]
+            }),
+            blocked && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", {
+                role: "status",
+                className: "mt-3 text-sm text-muted-foreground",
+                children: blocked
+            }),
+            failed && /* @__PURE__ */ (0, import_jsx_runtime55.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_runtime55.jsxs)("div", {
+                className: "mt-3 flex flex-col gap-2",
+                children: [
+                    rejecting && /* @__PURE__ */ (0, import_jsx_runtime55.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_runtime55.jsxs)("div", {
+                        className: "flex flex-wrap items-center justify-end gap-2",
+                        children: [
+                            submitting && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react19.Loader2, {
+                                "aria-label": "Sending decision",
+                                className: "h-4 w-4 animate-spin text-muted-foreground"
+                            }),
+                            rejecting ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, {
+                                children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Button, {
+                                        size: "sm",
+                                        variant: "ghost",
+                                        disabled: submitting,
+                                        onClick: function() {
+                                            return setRejecting(false);
+                                        },
+                                        children: "Cancel"
+                                    }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Button, {
+                                        size: "sm",
+                                        variant: "destructive",
+                                        disabled: submitting,
+                                        onClick: function() {
+                                            return decide(false);
+                                        },
+                                        children: "Reject"
+                                    })
+                                ]
+                            }) : /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, {
+                                children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Button, {
+                                        size: "sm",
+                                        variant: "outline",
+                                        disabled: submitting,
+                                        onClick: function() {
+                                            return setRejecting(true);
+                                        },
+                                        children: "Reject\u2026"
+                                    }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Button, {
+                                        size: "sm",
+                                        disabled: submitting,
+                                        onClick: function() {
+                                            return decide(true);
+                                        },
+                                        children: "Approve"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
 // src/types/type.ts
 var EditingStatus = /* @__PURE__ */ function(EditingStatus2) {
     EditingStatus2["EDITING"] = "EDITING";
@@ -4658,24 +4852,24 @@ var EditingStatus = /* @__PURE__ */ function(EditingStatus2) {
     return EditingStatus2;
 }(EditingStatus || {});
 // src/providers/alquimia-ui-provider.tsx
-var React38 = __toESM(require("react"));
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var React39 = __toESM(require("react"));
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function AlquimiaUIProvider(param) {
     var _param_defaultMode = param.defaultMode, defaultMode = _param_defaultMode === void 0 ? "system" : _param_defaultMode, children = param.children;
-    var _React38_useState = _sliced_to_array(React38.useState(function() {
+    var _React39_useState = _sliced_to_array(React39.useState(function() {
         if (defaultMode !== "system") return defaultMode;
         if (typeof window !== "undefined") {
             return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
         }
         return "light";
-    }), 2), resolvedTheme = _React38_useState[0], setResolvedTheme = _React38_useState[1];
+    }), 2), resolvedTheme = _React39_useState[0], setResolvedTheme = _React39_useState[1];
     function applyTheme(theme) {
         if (typeof document !== "undefined") {
             document.documentElement.classList.toggle("dark", theme === "dark");
         }
         setResolvedTheme(theme);
     }
-    React38.useEffect(function() {
+    React39.useEffect(function() {
         if (defaultMode !== "system") {
             applyTheme(defaultMode);
             return;
@@ -4692,7 +4886,7 @@ function AlquimiaUIProvider(param) {
     }, [
         defaultMode
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ThemeContext.Provider, {
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ThemeContext.Provider, {
         value: {
             theme: resolvedTheme,
             setTheme: applyTheme