@vertesia/ui 0.81.0 → 0.81.2-dev.20260204.135023Z

package/src/core/components/shadcn/tooltip.tsx

@@ -2,6 +2,7 @@ import * as React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 import { cn } from "../libs/utils"
 import { ReactNode } from "react"
+import { usePortalContainer } from "../../hooks/PortalContainerProvider"
 
 const TooltipProvider = TooltipPrimitive.Provider
 
@@ -14,22 +15,25 @@ const TooltipContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
     side?: "top" | "right" | "bottom" | "left"
   }
->(({ className, sideOffset = 4, side = "top", ...props }, ref) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      side={side}
-      style={{ zIndex: 100 }}
-      className={cn(
-        "max-w-[90vw]",
-        "z-50 overflow-hidden rounded-md bg-tooltips border px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </TooltipPrimitive.Portal>
-))
+>(({ className, sideOffset = 4, side = "top", ...props }, ref) => {
+  const container = usePortalContainer();
+  return (
+    <TooltipPrimitive.Portal container={container}>
+      <TooltipPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        side={side}
+        style={{ zIndex: 100 }}
+        className={cn(
+          "max-w-[90vw]",
+          "z-50 overflow-hidden rounded-md bg-tooltips border px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        )}
+        {...props}
+      />
+    </TooltipPrimitive.Portal>
+  );
+})
 TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
 interface TooltipPopoverProps {

package/src/features/agent/PayloadBuilder.tsx

@@ -235,10 +235,38 @@ export class PayloadBuilder {
     set interactionParamsSchema(schema: JSONSchema4 | null | undefined) {
         if (this._interactionParamsSchema !== schema) {
             this._interactionParamsSchema = schema;
+            // Booleans must be true or false, never undefined
+            if (schema) {
+                this._data = this.initializeBooleanDefaults(this._data || {}, schema);
+            }
             this.onStateChanged();
         }
     }
 
+    private initializeBooleanDefaults(data: JSONObject, schema: JSONSchema4): JSONObject {
+        if (!schema.properties) {
+            return data;
+        }
+
+        const result = { ...data };
+
+        for (const [name, propSchema] of Object.entries(schema.properties)) {
+            const prop = propSchema as JSONSchema4;
+            // Initialize boolean fields to false if not already set
+            if (prop.type === "boolean" && result[name] === undefined) {
+                result[name] = false;
+            } else if (prop.type === "object" && prop.properties) {
+                // Recursively initialize nested object booleans
+                result[name] = this.initializeBooleanDefaults(
+                    (result[name] as JSONObject) || {},
+                    prop
+                );
+            }
+        }
+
+        return result;
+    }
+
     reset() {
         this._start = false;
         this._interactive = true;

package/src/features/agent/chat/ModernAgentConversation.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Bot, Cpu, SendIcon, XIcon } from "lucide-react";
+import { Bot, Cpu, XIcon } from "lucide-react";
 import { useUserSession } from "@vertesia/ui/session";
 import { AsyncExecutionResult, VertesiaClient } from "@vertesia/client";
 import { AgentMessage, AgentMessageType, Plan, UserInputSignal } from "@vertesia/common";
-import { Button, MessageBox, Spinner, useToast, VModal, VModalBody, VModalFooter, VModalTitle } from "@vertesia/ui/core";
+import { Button, MessageBox, useToast, Modal, ModalBody, ModalFooter, ModalTitle } from "@vertesia/ui/core";
 
 import { AnimatedThinkingDots, PulsatingCircle } from "./AnimatedThinkingDots";
 import AllMessagesMixed from "./ModernAgentOutput/AllMessagesMixed";
@@ -119,17 +119,11 @@ function EmptyState() {
 // Start workflow view - allows initiating a new agent conversation
 function StartWorkflowView({
     initialMessage,
-    startWorkflow,
     onClose,
     isModal = false,
-    placeholder = "Type your message...",
     startButtonText = "Start Agent",
     title = "Start New Conversation",
 }: ModernAgentConversationProps) {
-    const [inputValue, setInputValue] = useState<string>("");
-    const [isSending, setIsSending] = useState(false);
-    const [run, setRun] = useState<AsyncExecutionResult>();
-    const toast = useToast();
     const inputRef = useRef<HTMLInputElement>(null);
 
     useEffect(() => {
@@ -139,66 +133,6 @@ function StartWorkflowView({
         }
     }, []);
 
-    // Start a new workflow with the message
-    const startWorkflowWithMessage = async () => {
-        if (!startWorkflow) return;
-
-        const message = inputValue.trim();
-        if (!message || isSending) return;
-
-        setIsSending(true);
-        try {
-            // Reset plan panel state when starting a new agent
-            sessionStorage.removeItem("plan-panel-shown");
-
-            toast({
-                title: "Starting agent...",
-                status: "info",
-                duration: 3000,
-            });
-            const newRun = await startWorkflow(message);
-            if (newRun) {
-                setRun({
-                    runId: newRun.run_id,
-                    workflowId: newRun.workflow_id,
-                });
-                setInputValue("");
-                toast({
-                    title: "Agent started",
-                    status: "success",
-                    duration: 3000,
-                });
-            }
-        } catch (err: any) {
-            toast({
-                title: "Error starting workflow",
-                status: "error",
-                duration: 3000,
-                description: err instanceof Error ? err.message : "Unknown error",
-            });
-        } finally {
-            setIsSending(false);
-        }
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === "Enter" && !e.shiftKey) {
-            e.preventDefault();
-            startWorkflowWithMessage();
-        }
-    };
-
-    // If a run has been started, show the conversation
-    if (run) {
-        return (
-            <ModernAgentConversationInner
-                {...{ onClose, isModal, initialMessage, placeholder }}
-                run={run}
-                title={title}
-            />
-        );
-    }
-
     return (
         <div className="flex flex-col h-full bg-white dark:bg-gray-900 overflow-hidden border-0">
             {/* Header */}
@@ -245,37 +179,6 @@ function StartWorkflowView({
                 </div>
             </div>
 
-            {/* Input Area */}
-            <div className="py-3 px-3 border-t border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
-                <div className="flex items-center gap-2">
-                    <div className="flex-1">
-                        <input
-                            ref={inputRef}
-                            value={inputValue}
-                            onChange={(e) => setInputValue(e.target.value)}
-                            onKeyDown={handleKeyDown}
-                            placeholder={placeholder}
-                            disabled={isSending}
-                            className="w-full py-2 px-3 text-sm border border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-white focus:border-gray-300 dark:focus:border-gray-600 focus:ring-0 rounded-md"
-                        />
-                    </div>
-                    <Button
-                        onClick={startWorkflowWithMessage}
-                        disabled={!inputValue.trim() || isSending}
-                        className="px-3 py-2 bg-gray-800 dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white text-xs rounded-md transition-colors"
-                    >
-                        {isSending ? (
-                            <Spinner size="sm" className="mr-1.5" />
-                        ) : (
-                            <SendIcon className="size-3.5 mr-1.5" />
-                        )}
-                        {startButtonText}
-                    </Button>
-                </div>
-                <div className="text-xs text-gray-400 dark:text-gray-500 mt-2 text-center">
-                    Type a message to start the conversation
-                </div>
-            </div>
         </div>
     );
 }
@@ -675,13 +578,12 @@ function ModernAgentConversationInner({
     };
 
     return (
-        <div className="flex gap-2 h-full">
+        <div className="flex flex-col lg:flex-row gap-2 h-full">
             {/* Conversation Area - responsive width based on panel visibility */}
             <div
                 ref={conversationRef}
-                className={`flex flex-col h-full min-h-0 border-0 ${
-                showSlidingPanel ? 'lg:w-2/3 flex-1' : `flex-1 mx-auto ${!isModal ? 'max-w-4xl' : ''}`
-            }`}
+                className={`flex flex-col min-h-0 border-0 ${showSlidingPanel ? 'w-full lg:w-2/3 flex-1 min-h-[50vh]' : `flex-1 mx-auto ${!isModal ? 'max-w-4xl' : ''}`
+                    }`}
             >
                 <Header
                     title={actualTitle}
@@ -771,7 +673,7 @@ function ModernAgentConversationInner({
 
             {/* Plan Panel Area - only rendered when panel should be shown */}
             {showSlidingPanel && (
-                <div className="h-full lg:w-1/3 border-l">
+                <div className="w-full lg:w-1/3 min-h-[50vh] lg:h-full border-t lg:border-t-0 lg:border-l">
                     <InlineSlidingPlanPanel
                         plan={getActivePlan.plan}
                         workstreamStatus={getActivePlan.workstreamStatus}
@@ -783,25 +685,25 @@ function ModernAgentConversationInner({
                     />
                 </div>
             )}
-            <VModal isOpen={isPdfModalOpen} onClose={() => setIsPdfModalOpen(false)}>
-                <VModalTitle>Export conversation as PDF</VModalTitle>
-                <VModalBody>
+            <Modal isOpen={isPdfModalOpen} onClose={() => setIsPdfModalOpen(false)}>
+                <ModalTitle>Export conversation as PDF</ModalTitle>
+                <ModalBody>
                     <p className="mb-2">
                         This will open your browser&apos;s print dialog with the current conversation.
                     </p>
                     <p className="text-sm text-muted">
                         To save a PDF, choose &quot;Save as PDF&quot; or a similar option in the print dialog.
                     </p>
-                </VModalBody>
-                <VModalFooter align="right">
+                </ModalBody>
+                <ModalFooter align="right">
                     <Button variant="ghost" size="sm" onClick={() => setIsPdfModalOpen(false)}>
                         Cancel
                     </Button>
                     <Button size="sm" onClick={handleConfirmExportPdf}>
                         Open print dialog
                     </Button>
-                </VModalFooter>
-            </VModal>
+                </ModalFooter>
+            </Modal>
         </div>
     );
 }

package/src/features/agent/chat/ModernAgentOutput/Header.tsx

@@ -51,7 +51,7 @@ export default function Header({
                 </div>
                 <div className="flex justify-end items-center space-x-2 ml-auto">
                     {/* View Mode Toggle */}
-                    <div className="flex items-center space-x-1 bg-muted rounded p-0.5">
+                    <div className="flex items-center space-x-1 bg-muted rounded p-0.5 mt-2 lg:mt-0">
                         <Button variant={viewMode === "stacked" ? "outline" : "ghost"} size="xs" className="rounded-l-md" onClick={() => onViewModeChange("stacked")}>
                             Details
                         </Button>

package/src/features/agent/chat/ModernAgentOutput/MessageInput.tsx

@@ -1,4 +1,4 @@
-import { Button, Input, Spinner, VModal, VModalBody, VModalTitle } from "@vertesia/ui/core";
+import { Button, Input, Spinner, Modal, ModalBody, ModalTitle } from "@vertesia/ui/core";
 import { Activity, PaperclipIcon, SendIcon } from "lucide-react";
 import React, { useEffect, useRef, useState } from "react";
 import { SelectDocument } from "../../../store";
@@ -72,7 +72,7 @@ export default function MessageInput({
     };
 
     return (
-        <div className="p-3 border-t border-muted flex-shrink-0" style={{ minHeight: "90px" }}>
+        <div className="p-3 border-t border-muted flex-shrink-0 fixed lg:sticky bottom-0 left-0 right-0 lg:left-auto lg:right-auto w-full bg-background z-10" style={{ minHeight: "90px" }}>
             <div className="flex items-center space-x-2">
                 <div className="flex flex-1 space-x-1" >
                     <Input
@@ -115,16 +115,16 @@ export default function MessageInput({
             </div>
 
             {/* Object Selection Modal */}
-            <VModal
+            <Modal
                 isOpen={isObjectModalOpen}
                 onClose={() => setIsObjectModalOpen(false)}
                 className='min-w-[60vw]'
             >
-                <VModalTitle>Link Object</VModalTitle>
-                <VModalBody className="pb-6">
+                <ModalTitle>Link Object</ModalTitle>
+                <ModalBody className="pb-6">
                     <SelectDocument onChange={handleObjectSelect} />
-                </VModalBody>
-            </VModal>
+                </ModalBody>
+            </Modal>
         </div>
     );
 }

package/src/features/facets/AgentRunnerFacetsNav.tsx

@@ -0,0 +1,125 @@
+import { Button, Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
+import { useState } from 'react';
+import { VStringFacet } from './utils/VStringFacet';
+import { VUserFacet } from './utils/VUserFacet';
+import { SearchInterface } from './utils/SearchInterface';
+import { RefreshCw } from 'lucide-react';
+
+interface AgentRunnerFacetsNavProps {
+    facets: {
+        statuses?: any[];
+        initiated_by?: any[];
+    };
+    search: SearchInterface;
+}
+
+// Hook to create filter groups for agent runners
+export function useAgentRunnerFilterGroups(facets: AgentRunnerFacetsNavProps['facets']): FilterGroup[] {
+    const customFilterGroups: FilterGroup[] = [];
+
+    if (facets.statuses) {
+        const statusFilterGroup = VStringFacet({
+            search: null as any, // This will be provided by the search context
+            buckets: facets.statuses || [],
+            name: 'status',
+            placeholder: 'Status',
+        });
+        customFilterGroups.push(statusFilterGroup);
+    }
+
+    if (facets.initiated_by) {
+        const initiatedByFilterGroup = VUserFacet({
+            buckets: facets.initiated_by || [],
+            name: 'initiated_by',
+            placeholder: 'Initiated By'
+        });
+        customFilterGroups.push(initiatedByFilterGroup);
+    }
+
+    const dateAfterFilterGroup = {
+        name: 'start',
+        placeholder: 'Started After',
+        type: 'date' as const,
+        multiple: false
+    };
+    customFilterGroups.push(dateAfterFilterGroup);
+
+    const dateBeforeFilterGroup = {
+        name: 'end',
+        placeholder: 'Started Before',
+        type: 'date' as const,
+        multiple: false
+    };
+    customFilterGroups.push(dateBeforeFilterGroup);
+
+    return customFilterGroups;
+}
+
+// Hook to create filter change handler for agent runners
+export function useAgentRunnerFilterHandler(search: SearchInterface) {
+    return (newFilters: BaseFilter[]) => {
+
+        // Clear all filters first, then apply new ones
+        search.clearFilters(false, false);
+
+        newFilters.forEach(filter => {
+            if (filter.value && filter.value.length > 0) {
+                const filterName = filter.name;
+                let filterValue;
+                if (filter.multiple) {
+                    filterValue = Array.isArray(filter.value)
+                        ? filter.value.map((v: any) => typeof v === 'object' && v.value ? v.value : v)
+                        : [typeof filter.value === 'object' && (filter.value as any).value ? (filter.value as any).value : filter.value];
+                } else {
+                    // Single value - don't wrap in array
+                    filterValue = Array.isArray(filter.value) && filter.value[0] && typeof filter.value[0] === 'object'
+                        ? (filter.value[0] as any).value
+                        : Array.isArray(filter.value) && filter.value[0]
+                            ? filter.value[0]
+                            : filter.value;
+                }
+
+                search.query[filterName] = filterValue;
+            }
+        });
+
+        search.search();
+    };
+}
+
+// Legacy component for backward compatibility
+export function AgentRunnerFacetsNav({ facets, search }: AgentRunnerFacetsNavProps) {
+    const [filters, setFilters] = useState<BaseFilter[]>([]);
+    const filterGroups = useAgentRunnerFilterGroups(facets);
+    const handleFilterLogic = useAgentRunnerFilterHandler(search);
+
+    const handleFilterChange: React.Dispatch<React.SetStateAction<BaseFilter[]>> = (value) => {
+        const newFilters = typeof value === 'function' ? value(filters) : value;
+        setFilters(newFilters);
+        handleFilterLogic(newFilters);
+    };
+
+    const handleRefetch = () => {
+        search.search();
+    };
+
+    return (
+        <FilterProvider
+            filterGroups={filterGroups}
+            filters={filters}
+            setFilters={handleFilterChange}
+        >
+            <div className='flex justify-between mb-1'>
+                <div className='flex gap-2 items-center'>
+                    <FilterBtn />
+                    <FilterBar />
+                    <FilterClear />
+                </div>
+                <Button onClick={handleRefetch} variant='outline' title="Refresh">
+                    <RefreshCw className="size-5" />
+                </Button>
+            </div>
+
+        </FilterProvider>
+    );
+}

package/src/features/facets/index.ts

@@ -14,3 +14,4 @@ export { DocumentsFacetsNav, useDocumentFilterGroups, useDocumentFilterHandler }
 export { InteractionsFacetsNav, useInteractionsFilterGroups, useInteractionsFilterHandler } from "./InteractionsFacetsNav";
 export { PromptsFacetsNav, usePromptsFilterGroups, usePromptsFilterHandler } from "./PromptsFacetsNav";
 export { CollectionsFacetsNav, useCollectionsFilterGroups, useCollectionsFilterHandler } from "./CollectionsFacetsNav";
+export { AgentRunnerFacetsNav, useAgentRunnerFilterGroups, useAgentRunnerFilterHandler } from "./AgentRunnerFacetsNav";

package/src/features/store/collections/CreateCollection.tsx

@@ -1,5 +1,5 @@
 import { CreateCollectionPayload } from "@vertesia/common";
-import { useToast, VModalBody, FormItem, VModalFooter, Input, Switch, Button, VModal, VModalTitle, Textarea } from "@vertesia/ui/core";
+import { useToast, ModalBody, FormItem, ModalFooter, Input, Switch, Button, Modal, ModalTitle, Textarea } from "@vertesia/ui/core";
 import { SelectContentType } from "../types/SelectContentType";
 import { useNavigate } from "@vertesia/ui/router";
 import { useUserSession } from "@vertesia/ui/session";
@@ -75,14 +75,14 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
 
     return (
         <form onSubmit={(e) => e.preventDefault()}>
-            <VModalBody>
+            <ModalBody>
                 <FormItem label="Name" required>
                     <Input type="text" value={payload.name || ""} onChange={(value) => setPayloadProp("name", value)} />
                 </FormItem>
                 <FormItem label="Description" className="mt-2">
                     <Textarea
                         value={payload.description || ""}
-                        onChange={(ev) => setPayloadProp("description", ev)}
+                        onChange={(ev) => setPayloadProp("description", ev.target.value)}
                     />
                 </FormItem>
                 <FormItem label="Dynamic Collection" className="mt-2" direction="row" description="Dynamically fetch content for the collection based on a query. If not enabled, then content must be added by users or agents.">
@@ -116,12 +116,12 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
                         isClearable
                     />
                 </FormItem>
-            </VModalBody>
-            <VModalFooter>
+            </ModalBody>
+            <ModalFooter>
                 <Button isDisabled={isProcessing} onClick={onCreate}>
                     Create Collection
                 </Button>
-            </VModalFooter>
+            </ModalFooter>
         </form >
     );
 }
@@ -132,9 +132,9 @@ interface CreateCollectionModalProps {
 }
 export function CreateCollectionModal({ isOpen, onClose }: CreateCollectionModalProps) {
     return (
-        <VModal onClose={onClose} isOpen={isOpen}>
-            <VModalTitle>Create a Collection</VModalTitle>
+        <Modal onClose={onClose} isOpen={isOpen}>
+            <ModalTitle>Create a Collection</ModalTitle>
             <CreateCollectionForm onClose={onClose} />
-        </VModal>
+        </Modal>
     );
 }

package/src/features/store/collections/EditCollectionView.tsx

@@ -1,16 +1,12 @@
-import { json } from "@codemirror/lang-json";
 import { Collection, CreateCollectionPayload, JSONSchemaObject } from "@vertesia/common";
-import { Button, ErrorBox, FormItem, Input, Panel, Styles, Textarea, useFetch, useToast } from "@vertesia/ui/core";
+import { Button, ErrorBox, FormItem, Input, Panel, Styles, Textarea, useFetch, useToast, useTheme } from "@vertesia/ui/core";
 import { SharedPropsEditor, SyncMemberHeadsToggle, UserInfo } from "@vertesia/ui/features";
 import { useUserSession } from "@vertesia/ui/session";
-import { CodeMirrorEditor, EditorApi, GeneratedForm, ManagedObject, Node } from "@vertesia/ui/widgets";
-import { basicSetup } from "codemirror";
+import { MonacoEditor, EditorApi, GeneratedForm, ManagedObject, Node } from "@vertesia/ui/widgets";
 import dayjs from "dayjs";
 import { useMemo, useRef, useState } from "react";
 import { SelectContentType, stringifyTableLayout } from "../types";
 
-const extensions = [basicSetup, json()];
-
 interface UpdateData {
     name: string;
     description: string;
@@ -28,6 +24,7 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
     const typeId = collection.type?.id;
     const tableLayoutRef = useRef<EditorApi | undefined>(undefined);
     const toast = useToast();
+    const { theme } = useTheme();
     const { client } = useUserSession();
     const [isUpdating, setUpdating] = useState(false);
     const [metadata, setMetadata] = useState<UpdateData>({
@@ -191,9 +188,14 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
                         </FormItem>
                     )
                 }
-                <FormItem label="Table Layout" description="Define a custom layout for displaying the collection in tables.">
-                    <CodeMirrorEditor className="border-1 rounded-md border-border"
-                        value={tableLayoutValue} extensions={extensions} editorRef={tableLayoutRef} />
+                <FormItem label="Table Layout" description="Define a custom layout for displaying the collection in tables." className="h-[200px]">
+                    <MonacoEditor
+                        className="border-1 rounded-md border-border"
+                        value={tableLayoutValue}
+                        language="json"
+                        editorRef={tableLayoutRef}
+                        theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+                    />
                 </FormItem>
                 <FormItem label="Type" description="Select a content type to assign custom properties and data to the collection.">
                     <SelectContentType

package/src/features/store/objects/components/ContentOverview.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, memo, useRef, type RefObject } from "react";
 
 import { useUserSession } from "@vertesia/ui/session";
-import { Button, Portal, ResizableHandle, ResizablePanel, ResizablePanelGroup, Spinner, useToast, VModal, VModalBody, VModalFooter, VModalTitle } from "@vertesia/ui/core";
+import { Button, Portal, ResizableHandle, ResizablePanel, ResizablePanelGroup, Spinner, useToast, Modal, ModalBody, ModalFooter, ModalTitle } from "@vertesia/ui/core";
 import { JSONDisplay, MarkdownRenderer, Progress, XMLViewer } from "@vertesia/ui/widgets";
 import { ContentNature, ContentObject, ContentObjectStatus, DocAnalyzerProgress, DocProcessorOutputFormat, DocumentMetadata, ImageRenditionFormat, VideoMetadata, POSTER_RENDITION_NAME, WorkflowExecutionStatus, PDF_RENDITION_NAME } from "@vertesia/common";
 import { Copy, Download, SquarePen, AlertTriangle, FileSearch } from "lucide-react";
@@ -696,25 +696,25 @@ function TextActions({
                     )}
                 </div>
             </div>
-            <VModal isOpen={isPdfModalOpen} onClose={() => setIsPdfModalOpen(false)}>
-                <VModalTitle>Export document as PDF</VModalTitle>
-                <VModalBody>
+            <Modal isOpen={isPdfModalOpen} onClose={() => setIsPdfModalOpen(false)}>
+                <ModalTitle>Export document as PDF</ModalTitle>
+                <ModalBody>
                     <p className="mb-2">
                         This will open your browser&apos;s print dialog with the current document content.
                     </p>
                     <p className="text-sm text-muted">
                         To save a PDF, choose &quot;Save as PDF&quot; or a similar option in the print dialog.
                     </p>
-                </VModalBody>
-                <VModalFooter align="right">
+                </ModalBody>
+                <ModalFooter align="right">
                     <Button variant="ghost" size="sm" onClick={() => setIsPdfModalOpen(false)}>
                         Cancel
                     </Button>
                     <Button size="sm" onClick={handleConfirmClientPdfExport}>
                         Open print dialog
                     </Button>
-                </VModalFooter>
-            </VModal>
+                </ModalFooter>
+            </Modal>
         </>
     );
 }