@alquimia-ai/ui 2.2.2 → 2.3.0

package/dist/index.mjs

@@ -4028,6 +4028,197 @@ function RatingDialog(param) {
         })
     });
 }
+// src/components/organisms/tool-approval.tsx
+import * as React38 from "react";
+import { Check as Check3, Loader2 as Loader22, ShieldAlert, X as X3 } from "lucide-react";
+import { Fragment as Fragment4, jsx as jsx55, jsxs as jsxs26 } from "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__ */ jsxs26("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__ */ jsxs26("header", {
+                className: "flex items-start gap-2",
+                children: [
+                    /* @__PURE__ */ jsx55(ShieldAlert, {
+                        "aria-hidden": true,
+                        className: cn("mt-0.5 h-4 w-4 shrink-0", settled ? "text-muted-foreground" : "text-amber-500")
+                    }),
+                    /* @__PURE__ */ jsxs26("div", {
+                        className: "min-w-0 flex-1",
+                        children: [
+                            /* @__PURE__ */ jsx55("p", {
+                                className: "text-sm font-medium text-foreground",
+                                children: settled ? "Approval request" : "The agent needs your approval"
+                            }),
+                            /* @__PURE__ */ jsxs26("p", {
+                                className: "text-sm text-muted-foreground",
+                                children: [
+                                    "Run ",
+                                    /* @__PURE__ */ jsx55("code", {
+                                        className: "rounded bg-muted px-1 py-0.5 font-mono text-xs text-foreground",
+                                        children: toolLabel
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    settled && /* @__PURE__ */ jsxs26("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__ */ jsx55(Check3, {
+                                className: "h-3 w-3"
+                            }) : /* @__PURE__ */ jsx55(X3, {
+                                className: "h-3 w-3"
+                            }),
+                            approval.status === "approved" ? "Approved" : "Rejected",
+                            approval.decidedHere ? " by you" : " elsewhere"
+                        ]
+                    })
+                ]
+            }),
+            args !== null && /* @__PURE__ */ jsx55("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__ */ jsxs26("p", {
+                className: "mt-3 text-sm text-muted-foreground",
+                children: [
+                    /* @__PURE__ */ jsx55("span", {
+                        className: "font-medium text-foreground",
+                        children: "Reason:"
+                    }),
+                    " ",
+                    approval.reason
+                ]
+            }),
+            blocked && /* @__PURE__ */ jsx55("p", {
+                role: "status",
+                className: "mt-3 text-sm text-muted-foreground",
+                children: blocked
+            }),
+            failed && /* @__PURE__ */ jsxs26("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__ */ jsxs26("div", {
+                className: "mt-3 flex flex-col gap-2",
+                children: [
+                    rejecting && /* @__PURE__ */ jsx55(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__ */ jsxs26("div", {
+                        className: "flex flex-wrap items-center justify-end gap-2",
+                        children: [
+                            submitting && /* @__PURE__ */ jsx55(Loader22, {
+                                "aria-label": "Sending decision",
+                                className: "h-4 w-4 animate-spin text-muted-foreground"
+                            }),
+                            rejecting ? /* @__PURE__ */ jsxs26(Fragment4, {
+                                children: [
+                                    /* @__PURE__ */ jsx55(Button, {
+                                        size: "sm",
+                                        variant: "ghost",
+                                        disabled: submitting,
+                                        onClick: function() {
+                                            return setRejecting(false);
+                                        },
+                                        children: "Cancel"
+                                    }),
+                                    /* @__PURE__ */ jsx55(Button, {
+                                        size: "sm",
+                                        variant: "destructive",
+                                        disabled: submitting,
+                                        onClick: function() {
+                                            return decide(false);
+                                        },
+                                        children: "Reject"
+                                    })
+                                ]
+                            }) : /* @__PURE__ */ jsxs26(Fragment4, {
+                                children: [
+                                    /* @__PURE__ */ jsx55(Button, {
+                                        size: "sm",
+                                        variant: "outline",
+                                        disabled: submitting,
+                                        onClick: function() {
+                                            return setRejecting(true);
+                                        },
+                                        children: "Reject\u2026"
+                                    }),
+                                    /* @__PURE__ */ jsx55(Button, {
+                                        size: "sm",
+                                        disabled: submitting,
+                                        onClick: function() {
+                                            return decide(true);
+                                        },
+                                        children: "Approve"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
 // src/types/type.ts
 var EditingStatus = /* @__PURE__ */ function(EditingStatus2) {
     EditingStatus2["EDITING"] = "EDITING";
@@ -4035,24 +4226,24 @@ var EditingStatus = /* @__PURE__ */ function(EditingStatus2) {
     return EditingStatus2;
 }(EditingStatus || {});
 // src/providers/alquimia-ui-provider.tsx
-import * as React38 from "react";
-import { jsx as jsx55 } from "react/jsx-runtime";
+import * as React39 from "react";
+import { jsx as jsx56 } from "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;
@@ -4069,7 +4260,7 @@ function AlquimiaUIProvider(param) {
     }, [
         defaultMode
     ]);
-    return /* @__PURE__ */ jsx55(ThemeContext.Provider, {
+    return /* @__PURE__ */ jsx56(ThemeContext.Provider, {
         value: {
             theme: resolvedTheme,
             setTheme: applyTheme
@@ -4077,5 +4268,5 @@ function AlquimiaUIProvider(param) {
         children: children
     });
 }
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlquimiaUIProvider, AspectRatio, Assistant, AssistantButton, AssistantInput, AssistantMessageArea, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CHART_PALETTE, Calendar, CallOut, CallOutActions, CallOutDate, CallOutResponse, Card, CardContent, CardDescription, CardFooter, CardHeader, CardImageWithHeadingAndDescriptionAvatarHorizontal, CardImageWithHeadingAndDescriptionHorizontal, CardTitle, CardWithImageHeadingDescriptionAvatarVertical, CardWithImageHeadingDescriptionVertical, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Chart, Checkbox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, EditingStatus, Hero, HeroContent, Input, Label2 as Label, Loader, MessagesWindow, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageContainer, Popover, PopoverContent, PopoverTrigger, Progress, QueryBox, RadioGroup, RadioGroupItem, RatingComment, RatingDialog, RatingStars, RatingThumbs, RichText, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sidebar, SidebarFooter, Skeleton, Slider, Toaster2 as SonnerToaster, SpeechToText, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeContext, ThinkIndicator, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, Whisper, badgeVariants, blobToBase64, buttonVariants, cn, getCookies, getErrorMessage, hasToolResult, navigationMenuTriggerStyle, parseTextToSpeech, reducer, themedChartAxes, thinkIndicatorVariants, toast, toggleVariants, truncateString, useAlquimiaTheme, useDocumentReader, useTextStreaming, useToast };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlquimiaUIProvider, AspectRatio, Assistant, AssistantButton, AssistantInput, AssistantMessageArea, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CHART_PALETTE, Calendar, CallOut, CallOutActions, CallOutDate, CallOutResponse, Card, CardContent, CardDescription, CardFooter, CardHeader, CardImageWithHeadingAndDescriptionAvatarHorizontal, CardImageWithHeadingAndDescriptionHorizontal, CardTitle, CardWithImageHeadingDescriptionAvatarVertical, CardWithImageHeadingDescriptionVertical, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Chart, Checkbox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, EditingStatus, Hero, HeroContent, Input, Label2 as Label, Loader, MessagesWindow, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageContainer, Popover, PopoverContent, PopoverTrigger, Progress, QueryBox, RadioGroup, RadioGroupItem, RatingComment, RatingDialog, RatingStars, RatingThumbs, RichText, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sidebar, SidebarFooter, Skeleton, Slider, Toaster2 as SonnerToaster, SpeechToText, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeContext, ThinkIndicator, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToolApprovalCard, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, Whisper, badgeVariants, blobToBase64, buttonVariants, cn, getCookies, getErrorMessage, hasToolResult, navigationMenuTriggerStyle, parseTextToSpeech, reducer, themedChartAxes, thinkIndicatorVariants, toast, toggleVariants, truncateString, useAlquimiaTheme, useDocumentReader, useTextStreaming, useToast };
 //# sourceMappingURL=index.mjs.map