@docyrus/ui-pro-ai-assistant 0.8.2 → 0.8.3

package/dist/components/agent-consent-dialog.d.ts

@@ -9,8 +9,15 @@ interface AgentConsentDialogProps {
     onApproved: () => void;
     /** Called when the user declines — should close the assistant. */
     onDeclined: () => void;
+    /**
+     * Element to portal the gate into. When provided (and `position: relative`),
+     * the overlay is constrained to that container instead of the viewport, so
+     * the consent gate stays inside the assistant panel rather than covering the
+     * whole page. Falls back to a viewport-fixed overlay when omitted.
+     */
+    container?: HTMLElement | null;
     t: (key: string) => string;
 }
 /** Agent "Terms & Agreement" consent gate. Only `super_admin` can approve. */
-export declare function AgentConsentDialog({ pending, onApproved, onDeclined, t }: AgentConsentDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentConsentDialog({ pending, onApproved, onDeclined, container, t }: AgentConsentDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.js

@@ -11,6 +11,7 @@ import { Tabs as Tabs$1, TabsList as TabsList$1, TabsTrigger as TabsTrigger$1, T
 import { cn } from '@docyrus/ui-pro-shared/lib/utils';
 import { DefaultChatTransport, lastAssistantMessageIsCompleteWithToolCalls } from 'ai';
 import { Pencil, PilcrowIcon, Heading1Icon, Heading2Icon, Heading3Icon, SquareIcon, ListIcon, ListOrderedIcon, ChevronDownIcon, Code2Icon, QuoteIcon, LightbulbIcon, Columns3Icon, GripVertical, FileUpIcon, TableIcon, ImageIcon, FilmIcon, AudioLinesIcon, TableOfContentsIcon, RadicalIcon, RectangleVerticalIcon, CalendarIcon, PlusIcon, FileCodeIcon, MinusIcon, ChevronRightIcon, ListTree, PenToolIcon, Link2Icon, Check, X, Copy, FilesIcon, Link, Text, ExternalLink, Unlink, Bold, Italic, Underline, Strikethrough, Code2, MoreHorizontal, ArrowLeftIcon, ArrowRightIcon, Minus, Plus, CircleArrowDown, Minimize2, Trash2, FileUp, CheckCircle2, FileText, Loader2, Wrench, CornerDownLeftIcon, PencilLineIcon, MessageSquareTextIcon, MessagesSquareIcon, ArrowUpIcon, CheckIcon, CaptionsIcon, ZoomInIcon, CircleArrowDownIcon, MoveUpRightIcon, MoreHorizontalIcon, Eye, PlusCircle, HelpCircle, Maximize2, Download, FileSpreadsheet, ChevronDown, ChevronLeft, ChevronRight, CheckCircle, XCircle, Search, Globe, User, ArrowRight, MapPin, CalendarClock, List, RefreshCw, FilePlus, XIcon, CornerUpLeftIcon, AlbumIcon, FeatherIcon, ListMinusIcon, ListPlusIcon, ListEnd, Wand, LanguagesIcon, BadgeHelpIcon, PenLineIcon, SearchIcon, MusicIcon, CompassIcon, SmileIcon, LeafIcon, ClockIcon, AppleIcon, FlagIcon, StarIcon, DeleteIcon, AlignLeft, AlignCenter, AlignRight, RotateCcw, AlertTriangle, AlertCircle, ArrowUpDown, ArrowDownToLine, PenLine, PencilIcon, TrashIcon, FileIcon, Star, ChevronsUpDown, FolderIcon, MessageSquare, Hash, Table, CheckSquare, Calendar as Calendar$1, Clock, Phone, Mail, Send, RefreshCcw, Undo2, ChevronsUpDownIcon, ChevronsRight, ChevronsLeft, CalendarDays, RefreshCwIcon, PaintRoller, MessageSquareText, ArrowLeft, Boxes, Users, Bot, Brain, Lightbulb, BookOpen, PenTool, SlidersHorizontal, Wand2, Mic, Code, Trash, Edit, Share, FolderInput, Archive, Building2, ShieldCheck, PanelLeft, NotebookText, CirclePlus, MoreVertical, FileSearch, Microscope, Ruler, AudioLines, BrainCircuit, Circle, Zap, Upload, ThumbsUp, ThumbsDown, Sun, Shield, Settings, Play, Pause, Moon, Menu, Lock, Info, Image, Home, Heart, Folder, Filter, File as File$1, CreditCard, Cog, Cloud, ChevronUp, Bookmark, Bell, Plug, Inbox, LayoutGrid, FolderOpen, LayoutDashboard, Table2, WandSparklesIcon, ArrowUpToLineIcon, BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, HighlighterIcon, Undo2Icon, Redo2Icon, ArrowDownToLineIcon, AlignLeftIcon, AlignCenterIcon, AlignRightIcon, AlignJustifyIcon, ListOrdered, ListTodoIcon, ListCollapseIcon, Grid3x3Icon, Combine, Ungroup, ArrowUp, ArrowDown, Trash2Icon, LinkIcon, WrapText, OutdentIcon, IndentIcon, EyeIcon, PenIcon } from 'lucide-react';
+import { Tooltip, Slot, DropdownMenu, Dialog, AlertDialog as AlertDialog$1, Popover, Separator, Toolbar as Toolbar$1 } from 'radix-ui';
 import { Message, AIMessageAvatar, MessageContent, MessageActions, MessageAction, AIConversation, AIConversationContent, MessageResponse, AIConversationScrollButton, Tool, ToolHeader, ToolContent, ToolInput, ToolOutput, CodeBlock, CodeBlockCopyButton, resolveToolIcon, PromptInputButton, PromptInput, PromptInputTextarea, PromptInputFooter, PromptInputTools, PromptInputSubmit, usePromptInputAttachments } from '@docyrus/ui-pro-shared/ai';
 import { AsyncTokenManager, RestApiClient } from '@docyrus/api-client';
 import { TooltipProvider as TooltipProvider$1, Tooltip as Tooltip$2, TooltipTrigger as TooltipTrigger$1, TooltipContent as TooltipContent$1 } from '@docyrus/ui-pro-shared/components/tooltip';
@@ -63,7 +64,6 @@ import { ResponsiveContainer, BarChart, CartesianGrid, XAxis, YAxis, Tooltip as
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { Progress } from '@docyrus/ui-pro-shared/components/progress';
-import { Tooltip, Slot, DropdownMenu, Dialog, AlertDialog as AlertDialog$1, Popover, Separator, Toolbar as Toolbar$1 } from 'radix-ui';
 import { Label as Label$1 } from '@docyrus/ui-pro-shared/components/label';
 import { Popover as Popover$2, PopoverTrigger as PopoverTrigger$1, PopoverContent as PopoverContent$1 } from '@docyrus/ui-pro-shared/components/popover';
 import { RadioGroup as RadioGroup$1, RadioGroupItem } from '@docyrus/ui-pro-shared/components/radio-group';
@@ -2756,6 +2756,7 @@ function AgentConsentDialog({
   pending,
   onApproved,
   onDeclined,
+  container,
   t
 }) {
   const apiClient = useApiClient();
@@ -2795,38 +2796,52 @@ function AgentConsentDialog({
     });
     onDeclined();
   };
-  return /* @__PURE__ */ jsx(Dialog$1, { open: !!pending, children: /* @__PURE__ */ jsxs(
-    DialogContent,
-    {
-      showCloseButton: false,
-      onInteractOutside: (e) => e.preventDefault(),
-      onEscapeKeyDown: (e) => e.preventDefault(),
-      className: "z-[200] sm:max-w-lg",
-      children: [
-        /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t("agentConsent.title") }) }),
-        /* @__PURE__ */ jsx("div", { className: "max-h-[55vh] overflow-y-auto pr-1 text-sm", children: /* @__PURE__ */ jsx(MessageResponse, { children: t("agentConsent.body") }) }),
-        /* @__PURE__ */ jsxs(DialogFooter, { children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "outline",
-              onClick: declineConsent,
-              disabled: loading,
-              children: t("agentConsent.decline")
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              onClick: acceptConsent,
-              disabled: !canApprove || loading,
-              children: t("agentConsent.approve")
-            }
-          )
-        ] })
-      ]
-    }
-  ) });
+  const scoped = !!container;
+  return /* @__PURE__ */ jsx(Dialog.Root, { open: !!pending, children: /* @__PURE__ */ jsxs(Dialog.Portal, { container: container ?? void 0, children: [
+    /* @__PURE__ */ jsx(
+      Dialog.Overlay,
+      {
+        className: cn(
+          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs isolate z-[200] inset-0",
+          scoped ? "absolute" : "fixed"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Dialog.Content,
+      {
+        onInteractOutside: (e) => e.preventDefault(),
+        onEscapeKeyDown: (e) => e.preventDefault(),
+        className: cn(
+          "bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid w-full max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-lg top-1/2 inset-s-1/2 z-[200] -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 outline-none",
+          scoped ? "absolute" : "fixed"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t("agentConsent.title") }) }),
+          /* @__PURE__ */ jsx("div", { className: "max-h-[55vh] overflow-y-auto pr-1 text-sm", children: /* @__PURE__ */ jsx(MessageResponse, { children: t("agentConsent.body") }) }),
+          /* @__PURE__ */ jsxs(DialogFooter, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                onClick: declineConsent,
+                disabled: loading,
+                children: t("agentConsent.decline")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: acceptConsent,
+                disabled: !canApprove || loading,
+                children: t("agentConsent.approve")
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] }) });
 }
 var pickAvatar = (raw) => {
   const candidate = raw?.agentAvatar ?? raw?.avatar;
@@ -36652,6 +36667,7 @@ var DocyAssistant = ({
   }
   const consentDeclined = !!consentRequiredFor && declinedConsentAgentId === consentRequiredFor.agentId;
   const consentDialogPending = uiState.activeTab === 0 && !consentDeclined ? consentRequiredFor : null;
+  const [consentScope, setConsentScope] = useState(null);
   useEffect(() => {
     if (!agentDetailsForId || !agentDetails) return;
     setTabs((prev) => {
@@ -37642,32 +37658,36 @@ var DocyAssistant = ({
         dataSourceId: BASE_DATA_SOURCE_ID.thread,
         recordId: sessionState.selectedSessionId
       }
-    ),
-    /* @__PURE__ */ jsx(
-      AgentConsentDialog,
-      {
-        pending: consentDialogPending,
-        onApproved: () => {
-          setConsentRequiredFor(null);
-          setDeclinedConsentAgentId(null);
-        },
-        onDeclined: () => {
-          setDeclinedConsentAgentId(consentRequiredFor?.agentId ?? null);
-        },
-        t
-      }
     )
   ] });
+  const renderConsentDialog = (container) => /* @__PURE__ */ jsx(
+    AgentConsentDialog,
+    {
+      pending: consentDialogPending,
+      container,
+      onApproved: () => {
+        setConsentRequiredFor(null);
+        setDeclinedConsentAgentId(null);
+      },
+      onDeclined: () => {
+        setDeclinedConsentAgentId(consentRequiredFor?.agentId ?? null);
+      },
+      t
+    }
+  );
   if (isInlineMode) {
     return /* @__PURE__ */ jsxs(ClientToolsProvider, { tools: clientToolMap, children: [
-      renderInlineViewContent({
-        isFullscreen: isInlineFullscreen,
-        enableSidebar: isInlineFullscreen ? true : enableSidebar,
-        className,
-        onExpand: hideExpand ? void 0 : handleExpand,
-        isOpen,
-        viewRef: ref
-      }),
+      /* @__PURE__ */ jsxs("div", { ref: setConsentScope, className: "relative flex h-full min-h-0 w-full flex-col", children: [
+        renderInlineViewContent({
+          isFullscreen: isInlineFullscreen,
+          enableSidebar: isInlineFullscreen ? true : enableSidebar,
+          className,
+          onExpand: hideExpand ? void 0 : handleExpand,
+          isOpen,
+          viewRef: ref
+        }),
+        renderConsentDialog(consentScope)
+      ] }),
       assistantDialogs
     ] });
   }
@@ -37716,13 +37736,16 @@ var DocyAssistant = ({
           },
           ...props,
           ref,
-          children: renderInlineViewContent({
-            isFullscreen: false,
-            enableSidebar,
-            className: cn("h-full w-full border-0 shadow-none", uiState.isExpanded || uiState.isDocked ? "rounded-none" : "rounded-xl"),
-            onExpand: handleExpand,
-            isOpen: true
-          })
+          children: /* @__PURE__ */ jsxs("div", { ref: setConsentScope, className: "relative flex h-full min-h-0 w-full flex-col", children: [
+            renderInlineViewContent({
+              isFullscreen: false,
+              enableSidebar,
+              className: cn("h-full w-full border-0 shadow-none", uiState.isExpanded || uiState.isDocked ? "rounded-none" : "rounded-xl"),
+              onExpand: handleExpand,
+              isOpen: true
+            }),
+            renderConsentDialog(consentScope)
+          ] })
         }
       )
     ] }),