@vertesia/ui 0.64.0 → 0.66.0

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

@@ -1,5 +1,4 @@
-import { JSONCode } from "@vertesia/ui/widgets";
-import { Theme, XMLViewer } from '@vertesia/ui/widgets';
+import { JSONCode, Theme, XMLViewer } from '@vertesia/ui/widgets';
 import { useEffect, useLayoutEffect, useState } from "react";
 import { usePdfPagesInfo } from "./PdfPageProvider";
 import { ViewType } from "./types";

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

@@ -1,11 +1,11 @@
 import { NavLink } from "@vertesia/ui/router";
 import { useUserSession } from "@vertesia/ui/session";
 import { FolderClosed, Search, Trash2 } from "lucide-react";
-import { Button, ConfirmModal, ErrorBox, Table, TBody, TR, useToast, VTooltip } from "@vertesia/ui/core";
-import { useFetch } from "@vertesia/ui/core";
+import { Button, ConfirmModal, ErrorBox, Table, TBody, TR, useToast, VTooltip, useFetch, EmptyCollection } from "@vertesia/ui/core";
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { useState, useEffect } from "react";
+import { CreateCollectionModal } from "./CreateCollection";
 
 dayjs.extend(relativeTime);
 
@@ -16,9 +16,10 @@ export function CollectionsTable({ }: CollectionsTableProps) {
     const toast = useToast();
     const [collectionToDelete, setCollectionToDelete] = useState<string | undefined>();
     const [isLoading, setIsLoading] = useState(true);
+    const [isOpen, setOpen] = useState(false);
 
     const { data: collections, error, refetch } = useFetch(() => client.store.collections.list(), []);
-    
+
     // Update loading state when data is fetched
     useEffect(() => {
         if (collections || error) {
@@ -32,7 +33,7 @@ export function CollectionsTable({ }: CollectionsTableProps) {
 
     const deleteCollection = async () => {
         if (!collectionToDelete) return;
-        
+
         try {
             await client.store.collections.delete(collectionToDelete);
             toast({
@@ -56,42 +57,50 @@ export function CollectionsTable({ }: CollectionsTableProps) {
 
     return (
         <>
-            {collections && <Table className="w-full">
-                <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Created</th>
-                        <th></th>
-                    </tr>
-                </thead>
-                <TBody columns={4} isLoading={isLoading}>
-                    {
-                        collections.map((c) => {
-                            return <TR key={c.id}>
-                                <td>
-                                    <div className="flex items-center gap-2">
-                                        {collectionIcon(c.dynamic)}
-                                        <NavLink href={`/collections/${c.id}`}>{c.name}</NavLink>
-                                    </div>
-                                </td>
-                                <td>{c.type?.name || "-"}</td>
-                                <td>{dayjs(c.created_at).fromNow()}</td>
-                                <td className="text-right">
-                                    <Button 
-                                        variant="destructive" 
-                                        size="sm"
-                                        onClick={() => setCollectionToDelete(c.id)}
-                                    >
-                                        <Trash2 className="size-4" />
-                                    </Button>
-                                </td>
-                            </TR>
-                        })
-                    }
-                </TBody>
-            </Table>}
-            
+            {collections &&
+                (collections.length > 0 ?
+                    (<Table className="w-full">
+                        <thead>
+                            <tr>
+                                <th>Name</th >
+                                <th>Type</th>
+                                <th>Created</th>
+                                <th></th>
+                            </tr >
+                        </thead >
+                        <TBody columns={4} isLoading={isLoading}>
+                            {
+                                collections.map((c) => {
+                                    return <TR key={c.id}>
+                                        <td>
+                                            <div className="flex items-center gap-2">
+                                                {collectionIcon(c.dynamic)}
+                                                <NavLink href={`/collections/${c.id}`}>{c.name}</NavLink>
+                                            </div>
+                                        </td>
+                                        <td>{c.type?.name || "-"}</td>
+                                        <td>{dayjs(c.created_at).fromNow()}</td>
+                                        <td className="text-right">
+                                            <Button
+                                                variant="destructive"
+                                                size="sm"
+                                                onClick={() => setCollectionToDelete(c.id)}
+                                            >
+                                                <Trash2 className="size-4" />
+                                            </Button>
+                                        </td>
+                                    </TR>
+                                })
+                            }
+                        </TBody>
+                    </Table >) :
+                    <EmptyCollection title="No Collections" buttonLabel='New Collections' onClick={() => setOpen(true)}>
+                        Get started by creating a new Collections.
+                    </EmptyCollection>)
+            }
+
+            <CreateCollectionModal isOpen={isOpen} onClose={() => setOpen(false)} />
+
             <ConfirmModal
                 isOpen={!!collectionToDelete}
                 title="Delete Collection"

package/src/features/store/collections/{CollectionsView.tsx → CreateCollection.tsx}

@@ -1,49 +1,9 @@
 import { CreateCollectionPayload } from "@vertesia/common";
-import {
-    Button, FormItem, Input, Styles,
-    Switch, useFlag, useToast, VModal,
-    VModalBody,
-    VModalFooter,
-    VModalTitle
-} from "@vertesia/ui/core";
-import { FullHeightLayout } from "@vertesia/ui/layout";
+import { useToast, VModalBody, FormItem, Styles, VModalFooter, Input, Switch, Button, VModal, VModalTitle } from "@vertesia/ui/core";
+import { SelectContentType } from "../types/SelectContentType";
 import { useNavigate } from "@vertesia/ui/router";
 import { useUserSession } from "@vertesia/ui/session";
 import { useState } from "react";
-import { GenericPageNavHeader } from "../../layout";
-import { SelectContentType } from "../../store";
-import { CollectionsTable } from "./CollectionsTable";
-
-interface CollectionsViewProps { }
-export function CollectionsView({ }: CollectionsViewProps) {
-    const actions = [<CreateCollectionButton key="create" />];
-    return (
-        <FullHeightLayout>
-            <GenericPageNavHeader
-                title="Collections"
-                breadcrumbs={[<span key="0">Collections</span>]}
-                description="Group objects together using a collection"
-                actions={actions}
-            />
-            <FullHeightLayout.Body>
-                <CollectionsTable />
-            </FullHeightLayout.Body>
-        </FullHeightLayout>
-    );
-}
-
-function CreateCollectionButton() {
-    const { on, off, isOn } = useFlag();
-    return (
-        <div>
-            <VModal onClose={off} isOpen={isOn}>
-                <VModalTitle>Create a Collection</VModalTitle>
-                <CreateCollectionForm onClose={off} />
-            </VModal>
-            <Button onClick={on}>Create Collection</Button>
-        </div>
-    );
-}
 
 interface CreateCollectionFormProps {
     onClose: () => void;
@@ -164,3 +124,16 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
         </form >
     );
 }
+
+interface CreateCollectionModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+export function CreateCollectionModal({ isOpen, onClose }: CreateCollectionModalProps) {
+    return (
+        <VModal onClose={onClose} isOpen={isOpen}>
+            <VModalTitle>Create a Collection</VModalTitle>
+            <CreateCollectionForm onClose={onClose} />
+        </VModal>
+    );
+}

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

@@ -5,7 +5,7 @@ import { useUserSession } from "@vertesia/ui/session";
 import { CodeMirrorEditor, EditorApi, GeneratedForm, ManagedObject } from "@vertesia/ui/widgets";
 import { basicSetup } from "codemirror";
 import { useMemo, useRef, useState } from "react";
-import { SelectContentType, stringifyTableLayout } from "../../store";
+import { SelectContentType, stringifyTableLayout } from "../types";
 
 const extensions = [basicSetup, json()];
 

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

@@ -0,0 +1,46 @@
+import { ErrorBox, useFetch, VSelectBox } from "@vertesia/ui/core";
+import { useUserSession } from "@vertesia/ui/session";
+
+interface SelectCollectionProps {
+    value?: string; // Collection ID
+    onChange: (collectionId: string | undefined, collection?: any) => void;
+    disabled?: boolean;
+    className?: string;
+}
+
+/**
+ * A component to select a collection from a list of collections.
+ * It fetches the collections from the store and displays them in a dropdown.
+ * @param props - The properties for the component.
+ * @returns A dropdown to select a collection.
+ */
+export function SelectCollection({ onChange, value, disabled = false, className }: SelectCollectionProps) {
+    const { client } = useUserSession();
+    const { data: collections, error } = useFetch(() => client.store.collections.list({ dynamic: false }), []);
+
+    if (error) {
+        return <ErrorBox title='Collection fetch failed'>{error.message}</ErrorBox>
+    }
+
+    // Find the selected collection object from the ID
+    const selectedCollection = value ? collections?.find(col => col.id === value) : undefined;
+
+    const handleChange = (collection: any) => {
+        // Call onChange with both the ID and the full collection object
+        onChange(collection?.id, collection);
+    };
+
+    return (
+        <VSelectBox
+            filterBy={"name"}
+            value={selectedCollection}
+            onChange={handleChange}
+            placeholder="Select a collection"
+            options={collections || []}
+            optionLabel={(col: any) => col.name}
+            by="id"
+            className={className}
+            disabled={disabled}
+        />
+    );
+}

package/src/features/store/collections/index.ts

@@ -1,5 +1,5 @@
 export * from "./BrowseCollectionView";
 export * from "./CollectionsTable";
-export * from "./CollectionsView";
-export * from "./CollectionView";
 export * from "./EditCollectionView";
+export * from "./CreateCollection";
+export * from "./SelectCollection";

package/src/features/store/objects/DocumentSearchResults.tsx

@@ -4,11 +4,14 @@ import { ColumnLayout, ContentObject, ContentObjectItem, VectorSearchQuery } fro
 import { Button, Divider, ErrorBox, SidePanel, Spinner, useDebounce, useIntersectionObserver, useToast } from '@vertesia/ui/core';
 import { useNavigate } from "@vertesia/ui/router";
 import { TypeRegistry, useUserSession } from '@vertesia/ui/session';
-import { Download, RefreshCw, SquareArrowOutUpRight } from 'lucide-react';
+import { Download, RefreshCw, Eye } from 'lucide-react';
 import { VFacetsNav } from "../../facets";
 import { VectorSearchWidget } from './components/VectorSearchWidget';
 
-import { ContentDispositionButton, DocumentTable, useDocumentSearch, useDocumentUploadHandler, useWatchDocumentSearchFacets, useWatchDocumentSearchResult } from "../../store";
+import { ContentDispositionButton } from './components/ContentDispositionButton';
+import { DocumentTable } from './DocumentTable';
+import { useDocumentSearch, useWatchDocumentSearchFacets, useWatchDocumentSearchResult } from './search/DocumentSearchContext';
+import { useDocumentUploadHandler } from './upload/useUploadHandler';
 import { ContentOverview } from './components/ContentOverview';
 import { useDownloadDocument } from './components/useDownloadObject';
 
@@ -192,7 +195,7 @@ function OverviewDrawer({ object, onClose }: OverviewDrawerProps) {
         <SidePanel title={object.properties?.title || object.name} isOpen={true} onClose={onClose}>
             <div className="flex items-center gap-x-2">
                 <Button variant="ghost" size="sm" title="Open Object" onClick={() => navigate(`/objects/${object.id}`)}>
-                    <SquareArrowOutUpRight className="size-4" />
+                    <Eye className="size-4" />
                 </Button>
                 {object.content?.source && (
                     <Button variant="ghost" size="sm" title="Download" onClick={onDownload}>

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

@@ -12,10 +12,12 @@ import { PropertiesEditorModal } from "./PropertiesEditorModal";
 interface ContentOverviewProps {
     object: ContentObject;
     loadText?: boolean;
+    refetch?: () => Promise<unknown>;
 }
 export function ContentOverview({
     object,
     loadText,
+    refetch,
 }: ContentOverviewProps) {
     const { client, store } = useUserSession();
     const [isLoadingText, setIsLoadingText] = useState(false);
@@ -144,7 +146,7 @@ export function ContentOverview({
     };
 
     const handleExportDocx = () => handleExportDocument("docx");
-    //const handleExportPdf = () => handleExportDocument("pdf");
+    const handleExportPdf = () => handleExportDocument("pdf");
 
     const content = object.content;
     const isImage =
@@ -295,6 +297,15 @@ export function ContentOverview({
                                         <Download className="h-4 w-4" />
                                         DOCX
                                     </Button>
+                                    <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        onClick={handleExportPdf}
+                                        className="flex items-center gap-2"
+                                    >
+                                        <Download className="h-4 w-4" />
+                                        PDF
+                                    </Button>
                                 </>
                             )}
                         </div>
@@ -303,64 +314,29 @@ export function ContentOverview({
                     {text ? (
                         <div className="border shadow-xs rounded-xs max-w-7xl">
                             {seemsMarkdown ? (
-                                <div className="prose prose-sm max-w-none prose-p:bg-transparent prose-p:my-0 prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900 prose-pre:my-2 prose-code:bg-gray-200/70 dark:prose-code:bg-gray-700/50 prose-headings:bg-transparent prose-li:bg-transparent dark:prose-invert dark:text-gray-100">
+                                <div className="vprose prose-sm p-1">
                                     <Markdown
                                         remarkPlugins={[remarkGfm]}
                                         components={{
-                                            a: ({
-                                                node,
-                                                ...props
-                                            }: {
-                                                node?: any;
-                                                href?: string;
-                                                children?: React.ReactNode;
-                                            }) => {
+                                            a: ({ node, ...props }: { node?: any; href?: string; children?: React.ReactNode }) => {
                                                 const href = props.href || "";
-                                                if (
-                                                    href.startsWith(
-                                                        "/store/objects/",
-                                                    )
-                                                ) {
+                                                if (href.startsWith("/store/objects/")) {
                                                     return (
                                                         <Link
                                                             href={href}
-                                                            className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+                                                            className="text-info"
                                                         >
                                                             {props.children}
                                                         </Link>
                                                     );
                                                 }
-                                                return (
-                                                    <a
-                                                        {...props}
-                                                        target="_blank"
-                                                        rel="noopener noreferrer"
-                                                    />
-                                                );
+                                                return <a {...props} target="_blank" rel="noopener noreferrer" />;
                                             },
-                                            p: ({
-                                                node,
-                                                ...props
-                                            }: {
-                                                node?: any;
-                                                children?: React.ReactNode;
-                                            }) => (
-                                                <p
-                                                    {...props}
-                                                    className="my-0 text-gray-800 dark:text-gray-100"
-                                                />
+                                            p: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
+                                                <p {...props} className={`my-0`} />
                                             ),
-                                            pre: ({
-                                                node,
-                                                ...props
-                                            }: {
-                                                node?: any;
-                                                children?: React.ReactNode;
-                                            }) => (
-                                                <pre
-                                                    {...props}
-                                                    className="my-2 bg-gray-800 dark:bg-gray-900 p-2 rounded text-gray-100"
-                                                />
+                                            pre: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
+                                                <pre {...props} className={`my-2 p-2 rounded`} />
                                             ),
                                             code: ({
                                                 node,
@@ -372,71 +348,32 @@ export function ContentOverview({
                                                 className?: string;
                                                 children?: React.ReactNode;
                                             }) => {
-                                                const match =
-                                                    /language-(\w+)/.exec(
-                                                        className || "",
-                                                    );
+                                                const match = /language-(\w+)/.exec(className || "");
                                                 const isInline = !match;
                                                 return (
                                                     <code
                                                         {...props}
                                                         className={
                                                             isInline
-                                                                ? "px-1.5 py-0.5 rounded text-muted bg-gray-200/70 dark:bg-gray-700/50"
-                                                                : "text-gray-100"
+                                                                ? `px-1.5 py-0.5 rounded`
+                                                                : "text-muted"
                                                         }
                                                     >
                                                         {children}
                                                     </code>
                                                 );
                                             },
-                                            h1: ({
-                                                node,
-                                                ...props
-                                            }: {
-                                                node?: any;
-                                                children?: React.ReactNode;
-                                            }) => (
-                                                <h1
-                                                    {...props}
-                                                    className="text-gray-900 dark:text-gray-50 font-bold text-2xl my-2"
-                                                />
+                                            h1: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
+                                                <h1 {...props} className={`font-bold text-2xl my-2`} />
                                             ),
-                                            h2: ({
-                                                node,
-                                                ...props
-                                            }: {
-                                                node?: any;
-                                                children?: React.ReactNode;
-                                            }) => (
-                                                <h2
-                                                    {...props}
-                                                    className="text-gray-900 dark:text-gray-50 font-bold text-xl my-2"
-                                                />
+                                            h2: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
+                                                <h2 {...props} className={`font-bold text-xl my-2`} />
                                             ),
-                                            h3: ({
-                                                node,
-                                                ...props
-                                            }: {
-                                                node?: any;
-                                                children?: React.ReactNode;
-                                            }) => (
-                                                <h3
-                                                    {...props}
-                                                    className="text-gray-900 dark:text-gray-50 font-bold text-lg my-2"
-                                                />
+                                            h3: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
+                                                <h3 {...props} className={`font-bold text-lg my-2`} />
                                             ),
-                                            li: ({
-                                                node,
-                                                ...props
-                                            }: {
-                                                node?: any;
-                                                children?: React.ReactNode;
-                                            }) => (
-                                                <li
-                                                    {...props}
-                                                    className="text-gray-800 dark:text-gray-100"
-                                                />
+                                            li: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
+                                                <li {...props} />
                                             ),
                                         }}
                                     >
@@ -460,6 +397,7 @@ export function ContentOverview({
                 isOpen={isPropertiesModalOpen}
                 onClose={handleClosePropertiesModal}
                 object={object}
+                refetch={refetch}
             />
         </div>
     );

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

@@ -3,27 +3,25 @@ import { ChangeEvent, useEffect, useState } from 'react'
 import { retrieveRendition } from '../../../utils'
 
 import { ContentObjectItem } from '@vertesia/common'
-import { Card, CardContent, Separator, VTooltip } from "@vertesia/ui/core"
-import { useNavigate } from "@vertesia/ui/router"
+import { Button, Card, CardContent, Separator, VTooltip } from "@vertesia/ui/core"
+import { NavLink } from "@vertesia/ui/router"
 import { useUserSession } from "@vertesia/ui/session"
 import { DocumentSelection } from '../DocumentSelectionProvider'
+import { Eye } from 'lucide-react'
 
 interface DocumentIconProps {
     document: ContentObjectItem
     onSelectionChange: ((object: ContentObjectItem, ev: ChangeEvent<HTMLInputElement>) => void);
     selection: DocumentSelection;
-
+    onRowClick?: (object: ContentObjectItem) => void;
 }
-export function DocumentIcon({ selection, document, onSelectionChange }: Readonly<DocumentIconProps>) {
+export function DocumentIcon({ selection, document, onSelectionChange, onRowClick }: Readonly<DocumentIconProps>) {
     const { client } = useUserSession()
-    const navigate = useNavigate()
 
     const [renditionUrl, setRenditionUrl] = useState<string | undefined>(undefined)
     const [renditionAlt, setRenditionAlt] = useState<string | undefined>(undefined)
+    const [renditionStatus, setRenditionStatus] = useState<string | undefined>(undefined)
 
-    const handleNavigateToDocument = () => {
-        navigate(`/objects/${document.id}`)
-    }
 
     const handleSelect = (ev: React.ChangeEvent<HTMLInputElement>) => {
         ev.stopPropagation()
@@ -35,13 +33,11 @@ export function DocumentIcon({ selection, document, onSelectionChange }: Readonl
             return
         }
 
-        retrieveRendition(client, document, setRenditionUrl, setRenditionAlt)
+        retrieveRendition(client, document, setRenditionUrl, setRenditionAlt, setRenditionStatus)
     }, [document])
 
-    console.log("renditionUrl", document)
-
     return (
-        <Card className="relative flex flex-col border h-fit" onClick={handleNavigateToDocument}>
+        <Card className="relative flex flex-col border h-fit" onClick={() => (onRowClick && onRowClick(document))}>
             {
                 selection && (
                     <div
@@ -56,11 +52,28 @@ export function DocumentIcon({ selection, document, onSelectionChange }: Readonl
                 )
             }
 
+            <div
+                className="absolute top-1 right-1 z-10 flex flex-col items-center"
+            >
+                <NavLink
+                    topLevelNav
+                    href={`/store/objects/${document.id}`}
+                >
+                    <Button
+                        variant="ghost" size="sm" title="Open Object"
+                    >
+                        <Eye className={`size-4 ${renditionStatus === 'ready' ? 'text-muted' : 'text-white'}`} />
+                    </Button>
+                </NavLink>
+            </div>
+
             {
-                renditionUrl ? (
+                (renditionUrl && renditionStatus == 'ready') ? (
                     <img src={renditionUrl} alt={renditionAlt} className="w-auto h-48 object-cover rounded-t-xl" />
                 ) : (
-                    <div className="h-48 bg-gray-700 rounded-t-xl"></div>
+                    <div className="h-48 bg-gray-700 rounded-t-xl flex items-center justify-center text-muted">
+                        {renditionStatus}
+                    </div>
                 )
             }
             <Separator className='bg-gray-200 h-[2px]' />

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

@@ -4,8 +4,7 @@ import { ChangeEvent, useEffect, useState } from 'react';
 import { useUserSession } from '@vertesia/ui/session';
 import { ContentObjectItem } from '@vertesia/common';
 import { ChevronsUpDown, X } from 'lucide-react';
-import { Button, Styles } from '@vertesia/ui/core';
-import { useFlag } from '@vertesia/ui/core';
+import { Button, Styles, useFlag } from '@vertesia/ui/core';
 import { Node } from '@vertesia/ui/widgets';
 
 import { SelectDocumentModal } from './SelectDocumentModal';

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

@@ -22,9 +22,10 @@ export interface PropertiesEditorModalProps {
     isOpen: boolean;
     onClose: () => void;
     object: ContentObject;
+    refetch?: () => Promise<unknown>;
 }
 
-export function PropertiesEditorModal({ isOpen, onClose, object }: PropertiesEditorModalProps) {
+export function PropertiesEditorModal({ isOpen, onClose, object, refetch }: PropertiesEditorModalProps) {
     const { client, store } = useUserSession();
     const toast = useToast();
     const navigate = useNavigate();
@@ -169,8 +170,11 @@ export function PropertiesEditorModal({ isOpen, onClose, object }: PropertiesEdi
                     description: 'The object properties have been updated successfully.',
                     duration: 2000
                 });
-
-                // Close modals
+                
+                if (refetch) {
+                    await refetch();
+                }
+                
                 setShowConfirmation(false);
                 onClose();
             }

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

@@ -7,9 +7,9 @@ import {
     ModalTitle,
     Input,
     RadioGroup,
-    RadioOptionAdapter
+    RadioOptionAdapter,
+    FormItem
 } from '@vertesia/ui/core';
-import { FormItem } from '@vertesia/ui/core';
 
 export interface SaveVersionConfirmModalProps {
     isOpen: boolean;