@vertesia/ui 0.24.0-dev.202601221707

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

@@ -0,0 +1,134 @@
+import { ChangeEvent, useEffect, useState } from 'react'
+
+import { retrieveRendition } from '../../../utils'
+
+import { ContentObjectItem } from '@vertesia/common'
+import { Button, Card, CardContent, Separator, VTooltip } from "@vertesia/ui/core"
+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;
+    previewObject?: (objectId: string) => void;
+    selectedObject?: ContentObjectItem | null;
+}
+
+export function DocumentIconSkeleton({ isLoading = false, counts = 6 }: { isLoading?: boolean, counts?: number }) {
+    if (!isLoading) {
+        return null
+    }
+    return (
+        <div className='flex flex-wrap gap-2 justify-between'>
+            {Array(counts).fill(0).map((_, index) =>
+                <div key={index} className="w-[15vw] animate-pulse">
+                    <Card className="relative flex flex-col border h-fit">
+                        <div className="h-48 bg-muted rounded-t-xl flex items-center justify-center text-muted">
+                            &nbsp;
+                        </div>
+                        <Separator className='bg-muted h-[2px]' />
+                        <CardContent className="p-2 flex flex-col">
+                            <div className="flex flex-col overflow-hidden">
+                                <div className="h-5 bg-muted rounded w-3/4 mb-2"></div>
+                                <div className="h-4 bg-muted rounded w-1/2"></div>
+                            </div>
+                            <div className="text-xs text-muted w-full flex justify-end mt-2">
+                                <div className="h-3 bg-muted rounded w-1/4"></div>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+            )}
+        </div>
+    )
+}
+
+export function DocumentIcon({ selection, document, onSelectionChange, onRowClick, previewObject, selectedObject }: Readonly<DocumentIconProps>) {
+    const { client } = useUserSession()
+
+    const [renditionUrl, setRenditionUrl] = useState<string | undefined>(undefined)
+    const [renditionAlt, setRenditionAlt] = useState<string | undefined>(undefined)
+    const [renditionStatus, setRenditionStatus] = useState<string | undefined>(undefined)
+
+
+    const handleSelect = (ev: React.ChangeEvent<HTMLInputElement>) => {
+        ev.stopPropagation()
+        onSelectionChange(document, ev)
+    }
+
+    useEffect(() => {
+        if (!document?.content) {
+            return
+        }
+
+        retrieveRendition(client, document, setRenditionUrl, setRenditionAlt, setRenditionStatus)
+    }, [document])
+
+    return (
+        <Card className={`relative flex flex-col border h-fit w-full ${selectedObject?.id === document.id ? 'border-attention border-4' : ''}`} onClick={() => (onRowClick && onRowClick(document))}>
+            {
+                selection && (
+                    <div
+                        className="absolute top-2 left-2 z-10 flex flex-col items-center gap-1"
+                    >
+                        <input checked={selection.isSelected(document.id)}
+                            type="checkbox"
+                            onChange={handleSelect}
+                            onClick={(e) => e.stopPropagation()}
+                        />
+                    </div>
+                )
+            }
+
+            <div
+                className="absolute top-1 right-1 z-10 flex flex-col items-center"
+            >
+                <Button
+                    variant="ghost" size="sm" title="Preivew Object" onClick={(e) => {
+                        e.stopPropagation();
+                        previewObject?.(document.id);
+                    }}
+                >
+                    <Eye className={`size-4 ${renditionStatus === 'ready' ? 'text-muted' : 'text-white'}`} />
+                </Button>
+            </div>
+
+            {
+                (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 flex items-center justify-center text-muted">
+                        {renditionStatus}
+                    </div>
+                )
+            }
+            <Separator className='bg-gray-200 h-[2px]' />
+            <CardContent className="p-2 flex flex-col">
+                <div className="flex flex-col overflow-hidden">
+                    <VTooltip
+                        placement='top'
+                        description={document.properties?.title ?? document.name}>
+                        <h3 className="text-start font-medium leading-none truncate">{document.properties?.title ?? document.name}</h3>
+                    </VTooltip>
+                    {
+                        document?.type?.name ? (
+                            <VTooltip
+                                placement='bottom' size='xs'
+                                description={document?.type?.name}>
+                                <p className="text-start text-xs text-muted truncate">{document?.type?.name}</p>
+                            </VTooltip>
+                        ) : <p className="text-xs text-muted">{"\u2002"}</p>
+                    }
+                </div>
+                {document.score && (
+                    <div className="text-xs text-muted w-full flex justify-end">
+                        Score: {(document.score).toFixed(4) ?? "-"}
+                    </div>
+                )}
+            </CardContent>
+        </Card>
+    )
+}

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

@@ -0,0 +1,89 @@
+import clsx from 'clsx';
+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, useFlag } from '@vertesia/ui/core';
+import { Node } from '@vertesia/ui/widgets';
+
+import { SelectDocumentModal } from './SelectDocumentModal';
+
+const STORE_REGEX = /store:([a-f0-9]+)/;
+
+interface DocumentInputProps {
+    object: Node;
+    type: string; // the editor/input type
+}
+export function DocumentInput({ object }: DocumentInputProps) {
+    const { client } = useUserSession();
+
+    const { off, on, isOn } = useFlag();
+    const [actualValue, setValue] = useState(object.value != null ? String(object.value) : '');
+    const [doc, setDoc] = useState<ContentObjectItem | undefined>(undefined)
+
+    const _onChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const value = event.target.value;
+        setValue(value);
+        object.value = value;
+    };
+
+    const clearValue = () => {
+        setValue('');
+        object.value = '';
+        setDoc(undefined);
+    };
+
+    const onSelect = (value?: ContentObjectItem) => {
+        if (value) {
+            const uri = "store:" + value.id;
+            setValue(uri);
+            setDoc(value || undefined);
+            object.value = uri;
+        }
+        off();
+    };
+
+    useEffect(() => {
+        if (!actualValue || doc) {
+            return;
+        }
+
+        const match = actualValue.match(STORE_REGEX);
+        if (!match) {
+            return;
+        }
+
+        client.objects.get(match[1]).then((doc) => {
+            setDoc(doc);
+        }).catch(() => {
+            clearValue();
+        });
+    }, [actualValue]);
+
+    return (
+        <div>
+            <div className="relative">
+                <input value={actualValue} onChange={_onChange} className={clsx(Styles.INPUT, "pr-10 w-full")} />
+                {doc &&
+                    <div className="absolute inset-y-0 right-10 flex items-center justify-center ">
+                        <Button onClick={clearValue} variant='unstyled' className='hover:text-red-500 hover:bg-gray-100 dark:hover:bg-gray-600'>
+                            <X className="size-5" />
+                        </Button>
+                    </div>
+                }
+                <div className="absolute inset-y-0 right-0 flex items-center justify-center">
+                    <Button onClick={on} variant='unstyled' className='hover:bg-gray-100 dark:hover:bg-gray-600'>
+                        <ChevronsUpDown className="size-5" />
+                    </Button>
+                </div>
+                <SelectDocumentModal value={actualValue} isOpen={isOn} onClose={onSelect} />
+            </div>
+            {doc &&
+                <div className="p-1 semibold text-sm text-gray-600 dark:text-slate-300">
+                    {doc.properties?.title || doc.name}
+                </div>
+            }
+        </div>
+    )
+}

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

@@ -0,0 +1,257 @@
+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;
+    refetch?: () => Promise<unknown>;
+}
+
+export function PropertiesEditorModal({ isOpen, onClose, object, refetch }: 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
+                });
+                
+                if (refetch) {
+                    await refetch();
+                }
+                
+                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,146 @@
+import { useState, useEffect } from 'react';
+import {
+    Button,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    ModalTitle,
+    Input,
+    RadioGroup,
+    RadioOptionAdapter,
+    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."
+        }
+    ];
+
+    // Default to "create new version" when replacing a file, "update current version" when editing properties
+    const defaultOption = uploadedFileName ? saveOptions[1] : saveOptions[0];
+    const [selectedOption, setSelectedOption] = useState<SaveOptionType | undefined>(defaultOption);
+    const [versionLabel, setVersionLabel] = useState('');
+    const optionAdapter = new SaveOptionAdapter();
+
+    // Reset to default when modal opens or uploadedFileName changes
+    useEffect(() => {
+        if (isOpen) {
+            setSelectedOption(defaultOption);
+            setVersionLabel('');
+        }
+    }, [isOpen, uploadedFileName]);
+
+    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>
+    );
+}