@vertesia/ui 0.60.0 → 0.61.0

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

@@ -0,0 +1,253 @@
+import { useUserSession } from '@vertesia/ui/session';
+import { useState, useRef, useEffect } from 'react';
+import {
+    Button,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    ModalTitle,
+    useToast
+} from '@vertesia/ui/core';
+import { ContentObject } from '@vertesia/common';
+import { useNavigate } from "@vertesia/ui/router";
+
+// Import Monaco Editor
+import Editor, { Monaco } from '@monaco-editor/react';
+import { editor } from 'monaco-editor';
+
+// Import SaveVersionConfirmModal
+import { SaveVersionConfirmModal } from './SaveVersionConfirmModal';
+
+export interface PropertiesEditorModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    object: ContentObject;
+}
+
+export function PropertiesEditorModal({ isOpen, onClose, object }: PropertiesEditorModalProps) {
+    const { client, store } = useUserSession();
+    const toast = useToast();
+    const navigate = useNavigate();
+    const [isLoading, setIsLoading] = useState(false);
+    const [propertiesJson, setPropertiesJson] = useState('');
+    const [showConfirmation, setShowConfirmation] = useState(false);
+    const [parsedProperties, setParsedProperties] = useState<any>(null);
+    const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+    const monacoRef = useRef<Monaco | null>(null);
+    const [jsonSchema, setJsonSchema] = useState<any>(null);
+    //TODO  state not used
+    const [_newVersionId, setNewVersionId] = useState<string | null>(null);
+
+    // Initialize editor content when modal opens
+    useEffect(() => {
+        if (isOpen) {
+            setPropertiesJson(JSON.stringify(object.properties || {}, null, 2));
+
+            // Try to fetch JSON schema if object has a type
+            if (object.type?.id) {
+                fetchJsonSchema(object.type.id);
+            }
+        }
+    }, [isOpen, object]);
+
+    // Handle editor mounting
+    function handleEditorDidMount(editor: editor.IStandaloneCodeEditor, monaco: Monaco) {
+        editorRef.current = editor;
+        monacoRef.current = monaco;
+
+        // Apply JSON schema validation if available
+        if (jsonSchema) {
+            setMonacoJsonSchema(monaco, jsonSchema);
+        }
+    }
+
+    // Fetch JSON schema for the object type
+    async function fetchJsonSchema(typeId: string) {
+        try {
+            const typeDetails = await store.types.retrieve(typeId);
+            if (typeDetails.object_schema) {
+                setJsonSchema(typeDetails.object_schema);
+
+                // Apply schema if Monaco is already mounted
+                if (monacoRef.current) {
+                    setMonacoJsonSchema(monacoRef.current, typeDetails.object_schema);
+                }
+            }
+        } catch (error) {
+            console.error('Failed to fetch JSON schema:', error);
+        }
+    }
+
+    // Configure Monaco editor with JSON schema
+    function setMonacoJsonSchema(monaco: Monaco, schema: any) {
+        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+            validate: true,
+            schemas: [
+                {
+                    uri: 'http://myserver/object-schema.json',
+                    fileMatch: ['*'],
+                    schema
+                }
+            ]
+        });
+    }
+
+    // Validate JSON and open confirmation modal
+    function handleSave() {
+        if (!editorRef.current) return;
+
+        const editorValue = editorRef.current.getValue();
+
+        try {
+            const properties = JSON.parse(editorValue);
+            setParsedProperties(properties);
+            setShowConfirmation(true);
+        } catch (err) {
+            toast({
+                status: 'error',
+                title: 'Invalid JSON',
+                description: 'Please fix the JSON syntax errors before saving.',
+                duration: 5000
+            });
+        }
+    }
+
+    // Save properties
+    async function saveProperties(createVersion: boolean, versionLabel?: string) {
+        try {
+            setIsLoading(true);
+
+            const properties = parsedProperties || JSON.parse(propertiesJson);
+
+            if (createVersion) {
+                // Create a new version with the updated properties
+                const response = await client.objects.update(object.id, {
+                    properties: properties
+                }, {
+                    createRevision: true,
+                    revisionLabel: versionLabel
+                });
+
+                // Store the new version ID for navigation
+                if (response.id !== object.id) {
+                    setNewVersionId(response.id);
+                }
+
+                toast({
+                    status: 'success',
+                    title: 'New version created',
+                    description: 'A new version with updated properties has been created.',
+                    duration: 2000
+                });
+
+                // Close modals
+                setShowConfirmation(false);
+                onClose();
+
+                // Navigate to the new version
+                if (response.id !== object.id) {
+                    // Delay slightly to allow modal closing to complete
+                    setTimeout(() => {
+                        navigate(`/objects/${response.id}`);
+                        toast({
+                            status: 'info',
+                            title: 'Viewing New Version',
+                            description: versionLabel ? `Now viewing version '${versionLabel}'` : 'Now viewing the new version',
+                            duration: 3000
+                        });
+                    }, 100);
+                }
+            } else {
+                // Update the object properties in place
+                await store.objects.update(object.id, {
+                    properties: properties
+                });
+
+                toast({
+                    status: 'success',
+                    title: 'Properties updated',
+                    description: 'The object properties have been updated successfully.',
+                    duration: 2000
+                });
+
+                // Close modals
+                setShowConfirmation(false);
+                onClose();
+            }
+        } catch (error: any) {
+            toast({
+                status: 'error',
+                title: 'Error updating properties',
+                description: error.message || 'An error occurred while updating the properties.',
+                duration: 5000
+            });
+            setIsLoading(false);
+        }
+    }
+
+    // Handle closing the confirmation modal without saving
+    function handleCancelConfirmation() {
+        setShowConfirmation(false);
+    }
+
+
+    return (
+        <>
+            <Modal
+                isOpen={isOpen}
+                onClose={onClose}
+                className="sm:max-w-[90%] md:max-w-[80%] lg:max-w-[75%] xl:max-w-[70%]"
+            >
+                <ModalTitle>Edit Properties</ModalTitle>
+                <ModalBody>
+                    <div className="mb-2 text-sm text-gray-500">
+                        {object.type?.name ? (
+                            <span>Editing properties for object type: <strong>{object.type.name}</strong></span>
+                        ) : (
+                            <span>Editing properties for generic document</span>
+                        )}
+                        {jsonSchema && (
+                            <span className="ml-2 text-green-600">(JSON schema validation enabled)</span>
+                        )}
+                    </div>
+                    <div className="h-[75vh] border border-gray-300 dark:border-gray-700 rounded-md">
+                        <Editor
+                            height="100%"
+                            language="json"
+                            value={propertiesJson}
+                            onChange={(value) => setPropertiesJson(value || '')}
+                            onMount={handleEditorDidMount}
+                            options={{
+                                minimap: { enabled: false },
+                                scrollBeyondLastLine: false,
+                                formatOnPaste: true,
+                                formatOnType: true,
+                                automaticLayout: true,
+                                wordWrap: 'on'
+                            }}
+                        />
+                    </div>
+                </ModalBody>
+                <ModalFooter>
+                    <Button variant="secondary" onClick={onClose}>
+                        Cancel
+                    </Button>
+                    <Button
+                        variant="primary"
+                        onClick={handleSave}
+                    >
+                        Save Changes
+                    </Button>
+                </ModalFooter>
+            </Modal>
+
+            {/* Version Confirmation Modal */}
+            <SaveVersionConfirmModal
+                isOpen={showConfirmation}
+                onClose={handleCancelConfirmation}
+                onConfirm={saveProperties}
+                isLoading={isLoading}
+            />
+        </>
+    );
+}

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

@@ -0,0 +1,136 @@
+import { useState } from 'react';
+import {
+    Button,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    ModalTitle,
+    Input,
+    RadioGroup,
+    RadioOptionAdapter
+} from '@vertesia/ui/core';
+import { FormItem } from '@vertesia/ui/core';
+
+export interface SaveVersionConfirmModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: (createVersion: boolean, versionLabel?: string) => Promise<void>;
+    isLoading: boolean;
+    uploadedFileName?: string; // Add this to show when an uploaded file is being used
+}
+
+// Define option type and adapter for RadioGroup
+interface SaveOptionType {
+    id: string;
+    label: string;
+    description: string;
+}
+
+class SaveOptionAdapter extends RadioOptionAdapter<SaveOptionType> {
+    labelOf(item: SaveOptionType): string {
+        return item.label;
+    }
+
+    idOf(item: SaveOptionType): string {
+        return item.id;
+    }
+
+    renderOption(item: SaveOptionType): React.ReactNode {
+        return (
+            <div>
+                <div className="font-medium">{item.label}</div>
+                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                    {item.description}
+                </p>
+            </div>
+        );
+    }
+}
+
+export function SaveVersionConfirmModal({ isOpen, onClose, onConfirm, isLoading, uploadedFileName }: SaveVersionConfirmModalProps) {
+    const saveOptions: SaveOptionType[] = [
+        {
+            id: "update",
+            label: "Update current version",
+            description: uploadedFileName
+                ? "Replace the content file and modify properties directly in the current revision."
+                : "Modify the properties directly in the current revision."
+        },
+        {
+            id: "new-version",
+            label: "Create new version",
+            description: uploadedFileName
+                ? "Create a new revision with the replacement file while preserving the original."
+                : "Create a new revision with these property changes while preserving the original."
+        }
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<SaveOptionType | undefined>(saveOptions[0]);
+    const [versionLabel, setVersionLabel] = useState('');
+    const optionAdapter = new SaveOptionAdapter();
+
+    const createVersion = selectedOption?.id === "new-version";
+
+    const handleOptionChange = (option: SaveOptionType) => {
+        setSelectedOption(option);
+    };
+
+    const handleConfirm = async () => {
+        await onConfirm(createVersion, createVersion ? versionLabel : undefined);
+    };
+
+    return (
+        <Modal isOpen={isOpen} onClose={onClose} className="sm:max-w-md">
+            <ModalTitle>Save Changes</ModalTitle>
+            <ModalBody>
+                <div className="space-y-4">
+                    {uploadedFileName && (
+                        <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-md">
+                            <p className="text-sm text-blue-700 dark:text-blue-300 font-medium">
+                                You&apos;re about to replace the content file with: <span className="font-bold">{uploadedFileName}</span>
+                            </p>
+                        </div>
+                    )}
+                    <p className="text-sm text-mixer-muted/5">
+                        How would you like to save these changes?
+                    </p>
+
+                    <RadioGroup
+                        adapter={optionAdapter}
+                        options={saveOptions}
+                        value={selectedOption}
+                        onChange={handleOptionChange}
+                        gap="gap-4"
+                    />
+
+                    {createVersion && (
+                        <FormItem
+                            label="Version Label (Optional)"
+                            description="Optional label for the new version."
+                            className="mt-3 pl-8"
+                        >
+                            <Input
+                                value={versionLabel}
+                                onChange={setVersionLabel}
+                                placeholder="e.g., v1.2, approved, post-review"
+                                className="w-full"
+                            />
+                        </FormItem>
+                    )}
+                </div>
+            </ModalBody>
+            <ModalFooter>
+                <Button variant="secondary" onClick={onClose} disabled={isLoading}>
+                    Cancel
+                </Button>
+                <Button
+                    variant="primary"
+                    onClick={handleConfirm}
+                    isLoading={isLoading}
+                >
+                    Save
+                </Button>
+            </ModalFooter>
+        </Modal>
+    );
+}

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

@@ -0,0 +1,69 @@
+import { ColumnLayout, ContentObjectItem } from "@vertesia/common";
+import { ErrorBox, Spinner, useIntersectionObserver } from "@vertesia/ui/core";
+import { useEffect, useRef, useState } from "react";
+import { VFacetsNav } from "../../../facets";
+import { DocumentTable } from "../DocumentTable";
+import { useDocumentSearch, useWatchDocumentSearchFacets, useWatchDocumentSearchResult } from "../search/DocumentSearchContext";
+import { DocumentSearchProvider } from "../search/DocumentSearchProvider";
+import { ContentDispositionButton } from "./ContentDispositionButton";
+
+const layout: ColumnLayout[] = [
+    { "name": "Name", "field": "properties.title", "type": "string", "fallback": "name" },
+    { "name": "Type", "field": "type.name", "type": "string" },
+    { "name": "Status", "field": "status", "type": "string" },
+    { "name": "Created At", "field": "created_at", "type": "date" }
+];
+
+interface SelectDocumentProps {
+    onChange: (value: ContentObjectItem) => void;
+    type?: string;
+    mimeType?: string;
+}
+export function SelectDocument({ onChange }: SelectDocumentProps) {
+    const onRowClick = (selected: ContentObjectItem) => {
+        onChange(selected || undefined);
+    }
+    return (
+        <DocumentSearchProvider>
+            <SelectDocumentImpl onRowClick={onRowClick} />
+        </DocumentSearchProvider>
+    )
+}
+
+interface SelectDocumentImplProps {
+    onRowClick: (selected: ContentObjectItem) => void;
+}
+function SelectDocumentImpl({ onRowClick }: SelectDocumentImplProps) {
+    const [isReady, setIsReady] = useState(false);
+    const [isGridView, setIsGridView] = useState(localStorage.getItem('lastDisplayedView') === 'grid');
+    const { search, isLoading, error, objects } = useWatchDocumentSearchResult();
+
+    const loadMoreRef = useRef<HTMLDivElement>(null);
+    useIntersectionObserver(loadMoreRef, () => {
+        isReady && search.loadMore(true)
+    }, { deps: [isReady] });
+    useEffect(() => {
+        search.search().then(() => setIsReady(true));
+    }, []);
+
+    const facets = useWatchDocumentSearchFacets();
+    const facetSearch = useDocumentSearch();
+
+    if (error) {
+        return <ErrorBox title="Search failed">{error.message}</ErrorBox>
+    }
+
+    return (
+        <div>
+            <div className="flex justify-between items-center mb-4">
+                <VFacetsNav facets={facets} search={facetSearch} textSearch="Filter content" />
+                <ContentDispositionButton onUpdate={setIsGridView} />
+            </div>
+            <DocumentTable objects={objects || []} isLoading={false} layout={layout} onRowClick={onRowClick} isGridView={isGridView} />
+            <div ref={loadMoreRef} className='mt-10' />
+            {
+                isLoading && <div className='flex justify-center'><Spinner size='xl' /></div>
+            }
+        </div>
+    )
+}

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

@@ -0,0 +1,20 @@
+import { ContentObjectItem } from "@vertesia/common";
+import { Modal, ModalBody, ModalTitle } from "@vertesia/ui/core";
+import { SelectDocument } from "./SelectDocument";
+
+interface SelectDocumentModalProps {
+    value?: string;
+    isOpen?: boolean
+    // if value is undefined then do not save changes
+    onClose: (value?: ContentObjectItem) => void;
+}
+export function SelectDocumentModal({ isOpen, onClose }: SelectDocumentModalProps) {
+    return (
+        <Modal onClose={() => onClose()} isOpen={!!isOpen} className='min-w-[60vw]'>
+            <ModalTitle>Select Content</ModalTitle>
+            <ModalBody className='p-4 pt-0 overflow-y-auto max-h-[80vh] min-h-[80vh]'>
+                {isOpen && <SelectDocument onChange={onClose} />}
+            </ModalBody>
+        </Modal>
+    )
+}

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

@@ -0,0 +1,115 @@
+import { useEffect, useState } from 'react';
+
+import { ProjectConfiguration, SupportedEmbeddingTypes, VectorSearchQuery } from '@vertesia/common';
+import { Button, Input, useToast } from '@vertesia/ui/core';
+import { useUserSession } from '@vertesia/ui/session';
+
+interface VectorSearchWidgetProps {
+    onChange: (query?: VectorSearchQuery) => void;
+    className?: string;
+    status?: boolean;
+    isLoading?: boolean;
+    refresh: number
+}
+export function VectorSearchWidget({ onChange, isLoading, refresh }: VectorSearchWidgetProps) {
+    const { client, project } = useUserSession();
+    const toast = useToast();
+
+    const [searchText, setSearchText] = useState<string | undefined>(undefined);
+    const [searchSketch, setSearchSketch] = useState<string | undefined>(undefined);
+    const [config, setConfig] = useState<ProjectConfiguration | undefined>(undefined);
+    const isReady = !!project && (!!config?.embeddings.text || !!config?.embeddings.image);
+    const [status, setStatus] = useState<string | undefined>(undefined);
+
+    useEffect(() => {
+        setSearchText(undefined);
+        setSearchSketch(undefined);
+        setStatus(undefined);
+    }, [refresh]);
+
+    useEffect(() => {
+        if (!project) {
+            return;
+        }
+
+        client.projects.retrieve(project.id).then((project) => {
+            setConfig(project.configuration);
+        })
+    }, [project]);
+
+    useEffect(() => {
+        if (status) {
+            toast({ title: status, status: 'success', duration: 2000 });
+        }
+    }, [status]);
+
+    useEffect(() => {
+        if (!searchText || searchText.length === 0) {
+            onChange(undefined);
+        }
+    }, [searchText]);
+
+    const generateTextEmbeddings = async () => {
+        if (!isReady || !searchText || !config?.embeddings.text) {
+            return;
+        }
+
+        setStatus('Generating text embeddings...');
+        const response = await client.environments.embeddings(config.embeddings.text?.environment, {
+            model: config.embeddings.text?.model,
+            text: searchText,
+        });
+
+        const query: VectorSearchQuery = {
+            values: response.values,
+            type: SupportedEmbeddingTypes.text
+        };
+
+        return query;
+    };
+
+    const generateImageEmbeddings = async () => {
+        if (!isReady || !searchText || !config?.embeddings.image) {
+            return;
+        }
+
+        setStatus('Generating image embeddings...');
+        const response = await client.environments.embeddings(config.embeddings.image?.environment, {
+            model: config.embeddings.image?.model,
+            image: searchSketch,
+        });
+
+        const query: VectorSearchQuery = {
+            values: response.values,
+            type: SupportedEmbeddingTypes.image
+        };
+
+        return query;
+    };
+
+    const fireSearch = (type: "text" | "image" = "text") => {
+        const generateEmbedding = type === "text" ? generateTextEmbeddings : generateImageEmbeddings;
+
+        generateEmbedding().then((query) => {
+            setStatus("Embeddings generated");
+            if (!query) {
+                return;
+            }
+            onChange(query);
+            setStatus("Searching...");
+        });
+    };
+
+    const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter") {
+            fireSearch("text");
+        }
+    };
+
+    return (
+        <div className="flex gap-1 items-center w-full">
+            <Input placeholder="Type what you are looking for" value={searchText} onChange={setSearchText} onKeyDown={handleKeyPress} />
+            <Button variant="secondary" isLoading={isLoading} onClick={() => fireSearch("text")} isDisabled={!isReady} alt="semantic search">Search</Button>
+        </div>
+    );
+}

package/src/features/store/objects/components/index.ts

@@ -0,0 +1,9 @@
+export * from "./ContentDispositionButton"
+export * from "./ContentOverview"
+export * from "./DocumentIcon"
+export * from "./DocumentInput"
+export * from "./SelectDocument"
+export * from "./SelectDocumentModal"
+export * from "./useDownloadObject"
+export * from "./PropertiesEditorModal"
+export * from "./SaveVersionConfirmModal"

package/src/features/store/objects/components/useDownloadObject.ts

@@ -0,0 +1,24 @@
+import { VertesiaClient, ZenoClient } from "@vertesia/client";
+import { ToastFn } from "@vertesia/ui/core";
+
+export function useDownloadDocument(client: VertesiaClient | ZenoClient, toast: ToastFn, uri: string | undefined) {
+    const onDownload = () => {
+        if (uri) {
+            client.files
+                .getDownloadUrl(uri)
+                .then((r) => {
+                    window.open(r.url, "_blank");
+                })
+                .catch((err) => {
+                    toast({
+                        status: "error",
+                        title: "Failed to get download URL",
+                        description: err.message,
+                        duration: 5000,
+                    });
+                });
+        }
+    };
+
+    return onDownload;
+}

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

@@ -0,0 +1,10 @@
+export * from "./components";
+export * from "./DocumentPreviewPanel";
+export * from "./DocumentSearchResults";
+export * from "./DocumentSelectionProvider";
+export * from "./DocumentTable";
+export * from "./ExportPropertiesModal";
+export * from "./layout";
+export * from "./search";
+export * from "./selection";
+export * from "./upload";