@vertesia/ui 0.73.0 → 0.76.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "0.73.0",
+  "version": "0.76.0",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -43,6 +43,7 @@
     "debounce": "^2.2.0",
     "fast-xml-parser": "^5.2.3",
     "firebase": "^10.12.2",
+    "framer-motion": "^12.23.12",
     "json-schema": "^0.4.0",
     "jwt-decode": "^4.0.0",
     "lodash-es": "^4.17.21",
@@ -58,9 +59,10 @@
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.3.0",
     "ts-md5": "^1.3.1",
-    "@vertesia/client": "0.73.0",
-    "@vertesia/common": "0.73.0",
-    "@vertesia/json": "0.73.0"
+    "unist-util-visit": "^5.0.0",
+    "@vertesia/client": "0.76.0",
+    "@vertesia/json": "0.76.0",
+    "@vertesia/common": "0.76.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.27.0",

package/src/core/components/Center.tsx

@@ -7,6 +7,6 @@ interface CenterProps {
 }
 export function Center({ className, children }: CenterProps) {
     return (
-        <div className={clsx('flex items-ceter justify-center', className)}>{children}</div>
+        <div className={clsx('flex items-center justify-center', className)}>{children}</div>
     )
 }

package/src/core/components/Overlay.tsx

@@ -0,0 +1,129 @@
+import { motion } from "framer-motion"
+import { X } from "lucide-react"
+import { useState, ReactNode } from "react"
+
+import { Button } from "./Button"
+
+interface OverlayProps {
+    children: ReactNode
+    overlayContent: ReactNode
+    className?: string
+    overlayClassName?: string
+    position?: 'left' | 'right' | 'top' | 'bottom' | 'center'
+    width?: string
+    height?: string
+    showCloseButton?: boolean
+    closeButtonTooltip?: string
+    onOpen?: () => void
+    onClose?: () => void
+    triggerClassName?: string
+    backdropClassName?: string
+    animationConfig?: {
+        type?: "spring" | "tween"
+        stiffness?: number
+        damping?: number
+        duration?: number
+    }
+}
+export function Overlay({
+    children,
+    overlayContent,
+    className = "",
+    overlayClassName = "",
+    position = 'right',
+    width,
+    height,
+    showCloseButton = true,
+    onOpen,
+    onClose,
+    triggerClassName = "",
+    backdropClassName = "",
+    animationConfig = { type: "spring", stiffness: 300, damping: 30 }
+}: Readonly<OverlayProps>) {
+    const [isOpen, setIsOpen] = useState(false)
+
+    const handleOpen = () => {
+        setIsOpen(true)
+        onOpen?.()
+    }
+
+    const handleClose = () => {
+        setIsOpen(false)
+        onClose?.()
+    }
+
+    const animationProps = getAnimationProps(position)
+    const positionClasses = getPositionClasses(position, width, height)
+
+    return (
+        <div className={`flex items-center justify-center w-full ${className}`}>
+            <div onClick={handleOpen} className={`w-full align-left cursor-pointer ${triggerClassName}`}>
+                {children}
+            </div>
+            {
+                isOpen && (
+                    <div className={`z-45 fixed inset-0 bg-black bg-opacity-50 ${backdropClassName}`}>
+                        <motion.div
+                            {...animationProps}
+                            transition={animationConfig}
+                            className={`${positionClasses} ${overlayClassName}`}
+                        >
+                            {
+                                showCloseButton && (
+                                    <div className="absolute top-2 right-2 z-10">
+                                        <Button onClick={handleClose} variant="primary">
+                                            <X />
+                                        </Button>
+                                    </div>
+                                )
+                            }
+                            <div className={showCloseButton ? "mt-8" : ""}>
+                                {overlayContent}
+                            </div>
+                        </motion.div>
+                    </div>
+                )
+            }
+        </div>
+    )
+}
+
+function getAnimationProps(position: string) {
+    switch (position) {
+        case 'left':
+            return { initial: { x: "-100%" }, animate: { x: 0 }, exit: { x: "-100%" } }
+        case 'right':
+            return { initial: { x: "100%" }, animate: { x: 0 }, exit: { x: "100%" } }
+        case 'top':
+            return { initial: { y: "-100%" }, animate: { y: 0 }, exit: { y: "-100%" } }
+        case 'bottom':
+            return { initial: { y: "100%" }, animate: { y: 0 }, exit: { y: "100%" } }
+        case 'center':
+            return {
+                initial: { opacity: 0, scale: 0.8 },
+                animate: { opacity: 1, scale: 1 },
+                exit: { opacity: 0, scale: 0.8 }
+            }
+        default:
+            return { initial: { x: "100%" }, animate: { x: 0 }, exit: { x: "100%" } }
+    }
+}
+
+function getPositionClasses(position: string, width?: string, height?: string) {
+    const baseClasses = "fixed bg-white shadow-lg p-4 relative"
+
+    switch (position) {
+        case 'left':
+            return `${baseClasses} left-0 top-[var(--header-height)] h-full ${width || 'w-80'}`
+        case 'right':
+            return `${baseClasses} right-0 top-[var(--header-height)] h-full ${width || 'w-80'}`
+        case 'top':
+            return `${baseClasses} top-[var(--header-height)] left-0 right-0 ${height || 'h-80'}`
+        case 'bottom':
+            return `${baseClasses} bottom-0 left-0 right-0 ${height || 'h-80'}`
+        case 'center':
+            return `${baseClasses} top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 ${width || 'w-96'} ${height || 'max-h-96'}`
+        default:
+            return `${baseClasses} right-0 top-[var(--header-height)] h-full ${width || 'w-80'}`
+    }
+}

package/src/core/components/SidePanel.tsx

@@ -1,7 +1,5 @@
-
-
-import { useState, Fragment } from 'react';
-import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { X } from 'lucide-react';
 import { Button } from './shadcn/button';
 
@@ -10,16 +8,18 @@ interface SidePanelProps {
     onClose: () => void;
     children: React.ReactNode;
     title?: string;
+    panelWidth?: number;
+    backdrop?: boolean;
 }
-export function SidePanel({ isOpen, title, onClose, children }: SidePanelProps) {
-    const [panelWidth, setPanelWidth] = useState(768);
+export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768, backdrop = false }: SidePanelProps) {
+    const [_panelWidth, setPanelWidth] = useState(panelWidth);
 
     const handleDragStart = (e: React.MouseEvent) => {
         e.preventDefault();
 
         let isDragging = true;
         const startX = e.pageX;
-        const startWidth = panelWidth;
+        const startWidth = _panelWidth;
 
         const handleMouseMove = (e: MouseEvent) => {
             if (isDragging) {
@@ -40,25 +40,30 @@ export function SidePanel({ isOpen, title, onClose, children }: SidePanelProps)
     };
 
     return (
-        <Transition show={isOpen} as={Fragment}>
-            <Dialog as="div" className="relative z-10" onClose={onClose}>
-                <div className="fixed inset-y-0 right-0" />
-                <div className="fixed inset-y-0 right-0 overflow-hidden">
-                    <div className="absolute inset-0 overflow-hidden">
-                        <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
-                            <TransitionChild
-                                as={Fragment}
-                                enter="transform transition ease-in-out duration-500 sm:duration-700"
-                                enterFrom="translate-x-full"
-                                enterTo="translate-x-0"
-                                leave="transform transition ease-in-out duration-500 sm:duration-700"
-                                leaveFrom="translate-x-0"
-                                leaveTo="translate-x-full"
-                                unmount={true}
-                            >
-                                <DialogPanel
+        <AnimatePresence>
+            {isOpen && (
+                <div className="relative z-10">
+                    {/* Backdrop */}
+                    {backdrop && (
+                        <motion.div
+                            className="fixed inset-0 bg-black bg-opacity-50"
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 0 }}
+                            onClick={onClose}
+                        />
+                    )}
+                    
+                    <div className="fixed inset-y-0 right-0 overflow-hidden">
+                        <div className="absolute inset-0 overflow-hidden">
+                            <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
+                                <motion.div
                                     className="pointer-events-auto border-l"
-                                    style={{ width: `${panelWidth}px` }}
+                                    style={{ width: `${_panelWidth}px` }}
+                                    initial={{ x: "100%" }}
+                                    animate={{ x: 0 }}
+                                    exit={{ x: "100%" }}
+                                    transition={{ type: "spring", stiffness: 300, damping: 30 }}
                                 >
                                     <div className="relative flex h-full">
                                         {/* Drag Handle */}
@@ -67,28 +72,28 @@ export function SidePanel({ isOpen, title, onClose, children }: SidePanelProps)
                                             onMouseDown={handleDragStart}
                                         />
                                         <div className="flex-1 flex flex-col overflow-y-scroll gap-4 bg-background py-6 shadow-xl">
-                                            <div className="px-4 sm:px-6">
+                                            <div className="px-2 sm:px-4">
                                                 <div className="flex items-start justify-between">
-                                                    <DialogTitle className="w-full text-base font-semibold leading-6">
+                                                    <h2 className="w-full text-base font-semibold leading-6">
                                                         <div className="text-2xl">{title ?? ""}</div>
-                                                    </DialogTitle>
+                                                    </h2>
                                                     <div className="ml-3 flex h-7 items-center">
                                                         <CloseButton onClose={onClose} />
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div className="px-4 sm:px-6">
+                                            <div className="px-2 sm:px-4">
                                                 {children}
                                             </div>
                                         </div>
                                     </div>
-                                </DialogPanel>
-                            </TransitionChild>
+                                </motion.div>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </Dialog>
-        </Transition>
+            )}
+        </AnimatePresence>
     );
 }
 

package/src/core/components/index.ts

@@ -17,6 +17,7 @@ export * from "./MenuList.js";
 export * from "./MessageBox.js";
 export * from "./Modal.js";
 export * from "./NumberInput.js";
+export * from "./Overlay.js";
 export * from "./popup/index.js";
 export * from "./Portal.js";
 export * from "./RadioGroup.js";

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

@@ -44,15 +44,58 @@ const VTabs = ({
   responsive = false,
   variant = "tabs"
 }: TabsProps) => {
-  const currentValue = typeof current === 'function' ? current() : current || defaultValue;
+  // Initialize value
+  const [value, setValue] = React.useState(() => {
+    // First check if current is provided
+    const currentValue = typeof current === 'function' ? current() : current;
+    if (currentValue) {
+      return currentValue;
+    }
 
-  const [value, setValue] = React.useState(currentValue);
+    // Then check hash
+    const hash = window.location.hash;
+    const currentTab = hash ? hash.substring(1) : undefined;
+    
+    // Check if the tab from hash exists in tabs
+    if (currentTab && tabs.some(tab => tab.name === currentTab)) {
+      return currentTab;
+    }
+    
+    // Fall back to default or first tab
+    return defaultValue || tabs[0]?.name;
+  });
 
+  // Update when current prop changes (but don't create a loop)
   React.useEffect(() => {
-    if (currentValue) {
+    const currentValue = typeof current === 'function' ? current() : current;
+    if (currentValue && currentValue !== value) {
       setValue(currentValue);
     }
-  }, [currentValue]);
+  }, [current]);
+
+  // Listen to hash changes only when there's no current prop being controlled externally
+  React.useEffect(() => {
+    if (current) return; // Skip hash handling if controlled by parent
+
+    const handleHashChange = () => {
+      const hash = window.location.hash;
+      const currentTab = hash ? hash.substring(1) : undefined;
+      
+      // Only update if the tab exists in tabs
+      if (currentTab && tabs.some(tab => tab.name === currentTab)) {
+        setValue(currentTab);
+      } else if (!hash && defaultValue) {
+        // If no hash, fall back to default
+        setValue(defaultValue);
+      }
+    };
+
+    // Check initial hash
+    handleHashChange();
+
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, [current, tabs, defaultValue]);
 
   const handleValueChange = (newValue: string) => {
     setValue(newValue);
@@ -68,7 +111,7 @@ const VTabs = ({
   return (
     <TabsContext.Provider value={{ tabs, size: fullWidth ? tabs.length : 0, current: value, setTab, responsive: responsive, variant }}>
       <TabsPrimitive.Root
-        defaultValue={tabs[0]?.name}
+        defaultValue={value || tabs[0]?.name}
         value={value}
         onValueChange={handleValueChange}
         className={className}

package/src/env/index.ts

@@ -13,7 +13,7 @@ export interface EnvProps {
         zeno: string,
         studio: string,
     },
-    firebase: {
+    firebase?: {
         apiKey: string,
         authDomain: string,
         projectId: string,

package/src/features/agent/PayloadBuilder.tsx

@@ -129,8 +129,14 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
         if (environment?.id !== this.payload.config.environment?.id) {
             this.payload.config.environment = environment;
             if (!this._preserveRunValues) {
-                this.payload.config.model = environment?.default_model && supportsToolUse(environment.default_model, environment.provider)
-                    ? environment.default_model : undefined;
+                // First try to use the interaction model, then the environment default model
+                const interactionModel = this.payload.interaction?.model;
+                if (interactionModel && environment && supportsToolUse(interactionModel, environment.provider)) {
+                    this.payload.config.model = interactionModel;
+                } else {
+                    this.payload.config.model = environment?.default_model && supportsToolUse(environment.default_model, environment.provider)
+                        ? environment.default_model : undefined;
+                }
             }
 
             this.onStateChanged();

package/src/features/facets/DocumentsFacetsNav.tsx

@@ -42,7 +42,8 @@ export function useDocumentFilterGroups(facets: DocumentsFacetsNavProps['facets'
         const statusFilterGroup = VStringFacet({
             search: null as any, // This will be provided by the search context
             buckets: facets.status || [],
-            name: 'Status',
+            name: 'status',
+            placeholder: 'Status',
             type: 'select',
             multiple: true
         });
@@ -51,7 +52,8 @@ export function useDocumentFilterGroups(facets: DocumentsFacetsNavProps['facets'
 
     if (facets.tags) {
         customFilterGroups.push({
-            name: 'Tags',
+            name: 'tags',
+            placeholder: 'Tags',
             type: 'stringList',
             options: facets.tags.map((tag: string) => ({
                 label: tag,

package/src/features/facets/VTypeFacet.tsx

@@ -41,7 +41,8 @@ export function VTypeFacet({ buckets, typeRegistry, type = 'select', multiple =
     });
 
     const customFilterGroups: FilterGroup = {
-        name: 'Types',
+        name: 'types',
+        placeholder: 'Types',
         type: type,
         multiple: multiple,
         options: options,

package/src/features/magic-pdf/DownloadPopover.tsx

@@ -1,4 +1,4 @@
-import { ContentObject } from "@vertesia/common";
+import { ContentObject, DocumentMetadata } from "@vertesia/common";
 import { useUserSession } from "@vertesia/ui/session";
 import { Popover } from "@vertesia/ui/widgets";
 import { CloudDownload } from "lucide-react";
@@ -12,18 +12,51 @@ export function DownloadPopover({ object }: DownloadPopoverProps) {
     const onDownload = (name: string) => {
         getResourceUrl(client, object.id, name).then(url => window.open(url, '_blank'));
     }
+    
+    const getProcessorType = (): string => {
+        if (object.metadata?.type === "document") {
+            const docMetadata = object.metadata as DocumentMetadata;
+            return docMetadata.content_processor?.type || "xml";
+        }
+        return "xml"; // default
+    };
+    
+    const processorType = getProcessorType();
+    
+    const renderDownloadOptions = () => {
+        if (processorType === "markdown") {
+            return (
+                <button className="p-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-100" onClick={() => onDownload("document.md")}>
+                    document.md
+                </button>
+            );
+        }
+        
+        // Default XML processor options
+        return (
+            <>
+                <button className="p-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-100" onClick={() => onDownload("annotated.pdf")}>
+                    annotated.pdf
+                </button>
+                <button className="p-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-100" onClick={() => onDownload("document.xml")}>
+                    document.xml
+                </button>
+                <button className="p-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-100" onClick={() => onDownload("analyzed-pages.json")}>
+                    analyzed-pages.json
+                </button>
+            </>
+        );
+    };
+    
     return (
         <div className="absolute bottom-[58px] right-[20px] w-[36px] h-[36px] cursor-pointer text-indigo-400 border-indigo-400 hover:border-indigo-500 hover:text-indigo-500 border-2 rounded-full shadow-xs flex items-center justify-center">
             <Popover strategy='absolute' placement='top-end' zIndex={100} offset={20}>
                 <Popover.Trigger click>
                     <CloudDownload className='size-6' />
-
                 </Popover.Trigger>
                 <Popover.Content>
                     <div className="rounded-md shadow-md border border-gray-100 bg-white dark:bg-slate-50 dark:border-slate-100 min-w-[200px] flex flex-col divide-y">
-                        <button className="p-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-100" onClick={() => onDownload("annotated.pdf")}>annotated.pdf</button>
-                        <button className="p-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-100" onClick={() => onDownload("document.xml")}>document.xml</button>
-                        <button className="p-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-100" onClick={() => onDownload("analyzed-pages.json")}>analyzed-pages.json</button>
+                        {renderDownloadOptions()}
                     </div>
                 </Popover.Content>
             </Popover>

package/src/features/magic-pdf/MagicPdfView.tsx

@@ -1,4 +1,4 @@
-import { ContentObject } from "@vertesia/common";
+import { ContentObject, DocumentMetadata } from "@vertesia/common";
 import { ErrorBox, useFetch } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
 import { X } from "lucide-react";
@@ -39,8 +39,27 @@ interface _MagicPdfViewProps {
     onClose?: () => void;
 }
 function MagicPdfViewImpl({ object, onClose }: _MagicPdfViewProps) {
-    const [viewType, setViewType] = useState<ViewType>("xml");
+    const getInitialViewType = (): ViewType => {
+        if (object.metadata?.type === "document") {
+            const docMetadata = object.metadata as DocumentMetadata;
+            const processorType = docMetadata.content_processor?.type;
+            if (processorType === "markdown") return "markdown";
+            if (processorType === "xml") return "xml";
+        }
+        return "xml"; // default
+    };
+    
+    const getProcessorType = (): string => {
+        if (object.metadata?.type === "document") {
+            const docMetadata = object.metadata as DocumentMetadata;
+            return docMetadata.content_processor?.type || "xml";
+        }
+        return "xml"; // default
+    };
+    
+    const [viewType, setViewType] = useState<ViewType>(getInitialViewType());
     const [pageNumber, setPageNumber] = useState(1);
+    const processorType = getProcessorType();
     const handler = useRef<HTMLDivElement>(null);
     const left = useRef<HTMLDivElement>(null);
     const right = useRef<HTMLDivElement>(null);
@@ -51,14 +70,14 @@ function MagicPdfViewImpl({ object, onClose }: _MagicPdfViewProps) {
     return (
         <>
             <div ref={left} className={`absolute top-0 left-0 bottom-0 w-[50%] bg-gray-100 dark:bg-slate-800 flex items-stretch justify-stretch py-2`}>
-                <PageSlider className="flex-1" currentPage={pageNumber} onChange={setPageNumber} />
+                <PageSlider className="flex-1" currentPage={pageNumber} onChange={setPageNumber} object={object} />
                 <div ref={handler} className='w-[2px] p-[2px] m-0 bg-slate-300 cursor-ew-resize'></div>
             </div>
             <div ref={right} className={`absolute top-0 left-[50%] right-0 bottom-0 flex items-stretch justify-stretch overflow-auto p-2`}>
                 <TextPageView pageNumber={pageNumber} viewType={viewType} />
             </div>
             <DownloadPopover object={object} />
-            <ContentSwitcher type={viewType} onSwitch={setViewType} />
+            {processorType === "xml" && <ContentSwitcher type={viewType} onSwitch={setViewType} />}
             {!!onClose &&
                 <div className="absolute top-6 right-7 w-9 h-9 cursor-pointer text-red-400 border-red-400 hover:border-red-500 hover:text-red-500 border-2 rounded-full shadow-xs flex items-center justify-center"
                     onClick={onClose}>
@@ -80,6 +99,8 @@ function ContentSwitcher({ type = "xml", onSwitch }: ContentSwitcherProps) {
         if (type === "xml") {
             onSwitch("json");
         } else if (type === "json") {
+            onSwitch("markdown");
+        } else if (type === "markdown") {
             onSwitch("xml");
         }
     }
@@ -87,7 +108,8 @@ function ContentSwitcher({ type = "xml", onSwitch }: ContentSwitcherProps) {
         <div className="absolute bottom-[16px] right-[20px] w-[36px] h-[36px] cursor-pointer text-indigo-400 border-indigo-400 hover:border-indigo-500 hover:text-indigo-500 border-2 rounded-full shadow-xs flex items-center justify-center"
             onClick={_onSwitch}>
             {type === "xml" && JSON}
-            {type === "json" && XML}
+            {type === "json" && MARKDOWN}
+            {type === "markdown" && XML}
         </div>
     )
 
@@ -100,3 +122,7 @@ const JSON = <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://w
 const XML = <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
     <path d="M4.708 5.578L2.061 8.224l2.647 2.646-.708.708-3-3V7.87l3-3 .708.708zm7-.708L11 5.578l2.647 2.646L11 10.87l.708.708 3-3V7.87l-3-3zM4.908 13l.894.448 5-10L9.908 3l-5 10z" />
 </svg>
+
+const MARKDOWN = <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <path d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7.5L5.5 9l-1 1.5H3V5h1.5l1 2 2-2H9v6zm2.99.5L9.5 8H11V5h1v3h1.5l-2.51 3.5z"/>
+</svg>