@vertesia/ui 0.24.0-dev.202601221707

package/src/features/store/types/ContentObjectTypesTable.tsx

@@ -0,0 +1,41 @@
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+import { ContentObjectTypeItem } from "@vertesia/common";
+import { Table, TBody, THead } from "@vertesia/ui/core";
+import { useNavigate } from "@vertesia/ui/router";
+
+dayjs.extend(relativeTime);
+
+interface ContentObjectTypesTableProps {
+    objects?: ContentObjectTypeItem[];
+    isLoading: boolean;
+}
+export function ContentObjectTypesTable({ objects, isLoading }: ContentObjectTypesTableProps) {
+    const navigate = useNavigate();
+
+    return (
+        <Table className="w-full">
+            <THead>
+                <tr>
+                    <th>Name</th>
+                    <th>Strict Mode</th>
+                    <th>Semantic Chunking</th>
+                    <th>Updated At</th>
+                </tr>
+            </THead>
+            <TBody isLoading={isLoading && (!objects || objects.length === 0)} columns={4}>
+                {
+                    objects?.map((obj: any) => (
+                        <tr key={obj.id} onClick={() => navigate(`/types/${obj.id}`)} className='cursor-pointer hover:bg-muted'>
+                            <td>{obj.name}</td>
+                            <td>{obj.strict_mode ? 'Yes' : 'No'}</td>
+                            <td>{obj.is_chunkable ? 'Yes' : 'No'}</td>
+                            <td>{dayjs(obj.updated_at).fromNow()}</td>
+                        </tr>
+                    ))
+                }
+            </TBody>
+        </Table>
+    )
+}

package/src/features/store/types/CreateOrUpdateTypeModal.tsx

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+
+import { Button, Input, Modal, ModalBody, ModalFooter, ModalTitle, useToast, Textarea } from '@vertesia/ui/core';
+
+export interface CreateOrUpdateTypePayload {
+    name: string;
+    description?: string;
+    strict_mode?: boolean;
+}
+interface CreateOrUpdateTypeModalProps {
+    title: string;
+    isOpen: boolean;
+    onClose: (payload?: CreateOrUpdateTypePayload) => Promise<unknown>;
+    okLabel: string;
+    initialPayload?: CreateOrUpdateTypePayload;
+}
+export function CreateOrUpdateTypeModal({ title, isOpen, onClose, okLabel, initialPayload }: CreateOrUpdateTypeModalProps) {
+    const toast = useToast();
+    const [name, setName] = useState<string | undefined>(initialPayload?.name);
+    const [description, setDescription] = useState<string | undefined>(initialPayload?.description);
+    const [strictMode, setStrictMode] = useState<boolean>(initialPayload?.strict_mode ?? false);
+
+    const onSave = () => {
+        if (!name) {
+            toast({
+                status: 'error',
+                title: 'Name is required',
+                duration: 5000
+            })
+            return;
+        }
+        const payload = { name, description, strict_mode: strictMode };
+        onClose(payload).then(() => onClose());
+
+        setName(undefined);
+        setDescription(undefined);
+        setStrictMode(false);
+    };
+
+    return (
+        <Modal isOpen={isOpen} onClose={() => onClose()}>
+            <ModalTitle>{title}</ModalTitle>
+            <ModalBody className="pt-0">
+                <div className='h-full flex flex-col gap-4 content-between'>
+                    <div>
+                        <label className="block text-sm font-medium text-muted">Name</label>
+                        <Input value={name} onChange={setName} />
+                    </div>
+                    <div>
+                        <label className="block text-sm font-medium text-muted">Description</label>
+                        <Textarea value={description} onChange={e => setDescription(e.target.value)} />
+                    </div>
+                </div>
+            </ModalBody>
+            <ModalFooter>
+                <div className='flex justify-end gap-4'>
+                    <Button variant="secondary" onClick={() => onClose()}>Cancel</Button>
+                    <Button variant="primary" onClick={() => onSave()}>{okLabel}</Button>
+                </div>
+            </ModalFooter>
+        </Modal>
+    )
+}

package/src/features/store/types/ObjectSchemaEditor.tsx

@@ -0,0 +1,141 @@
+import { basicSetup } from 'codemirror';
+import { useMemo, useRef, useState } from 'react';
+
+import { useUserSession } from '@vertesia/ui/session';
+import { json } from '@codemirror/lang-json';
+import { CodeMirrorEditor, EditorApi, SchemaEditor, useSchema } from '@vertesia/ui/widgets';
+import { Button, useToast } from '@vertesia/ui/core';
+import { ContentObjectType } from '@vertesia/common';
+import { Ajv } from "ajv";
+
+const CODE_MIRROR_EXTENSIONS = [basicSetup, json()];
+
+interface ObjectSchemaEditorProps {
+    objectType: ContentObjectType;
+    onSchemaUpdate: (jsonSchema: any) => void;
+}
+export function ObjectSchemaEditor({ objectType, onSchemaUpdate }: ObjectSchemaEditorProps) {
+    const { store } = useUserSession();
+    const toast = useToast();
+
+    const [isUpdating, setUpdating] = useState(false);
+    const schema = useSchema(objectType.object_schema);
+    const editorRef = useRef<EditorApi | undefined>(undefined);
+    const [displayJson, setDisplayJson] = useState(false);
+
+    const value = useMemo(() => {
+        return jsonToContent(schema.schema);
+    }, [schema]);
+
+    const onSave = () => {
+        if (displayJson) {
+            if (!updateSchemaFromJson()) {
+                return
+            }
+        }
+
+        setUpdating(true);
+        store.types.update(objectType.id, { object_schema: schema.schema }).then(() => {
+            onSchemaUpdate(schema);
+            toast({
+                status: 'success',
+                title: 'Schema updated',
+                description: 'The schema has been updated successfully',
+                duration: 2000
+            });
+        }).catch((err) => {
+            toast({
+                status: 'error',
+                title: 'Failed to update schema',
+                description: err.message,
+                duration: 5000
+            })
+        }).finally(() => {
+            setUpdating(false);
+        });
+    };
+
+    const handleOnSave = () => {
+        if (displayJson) {
+            if (!updateSchemaFromJson()) {
+                return
+            }
+        }
+
+        setDisplayJson(prev => !prev)
+    };
+
+    const updateSchemaFromJson = () => {
+        if (editorRef.current) {
+            const value = editorRef.current.getValue();
+            try {
+                const newSchema = contentToJson(value);
+                validateSchema(newSchema);
+                schema.replaceSchema(newSchema);
+            } catch (err: any) {
+                toast({
+                    status: 'error',
+                    title: 'Invalid JSON Schema',
+                    description: err.message,
+                    duration: 5000
+                })
+                return false;
+            }
+        }
+        return true;
+    };
+
+    return (
+        <div className="mx-2 my-2 rounded-2xl border border-solid shadow-md border-spacing-2">
+            <div className="flex items-center rounded-t-md border-b gap-x-2 py-2 pl-4 pr-2">
+                <div className="text-base font-semibold">Schema Editor</div>
+                <div>
+                    <Button variant="outline" size="sm" onClick={handleOnSave}>
+                        {
+                            displayJson ? "Edit Schema" : "Edit Json"
+                        }
+                    </Button>
+                </div>
+                <div className="ml-auto flex gap-x-2">
+                    <Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>Save Changes</Button>
+                </div>
+            </div>
+            <div className="px-4 py-2">
+                {
+                    displayJson
+                        ? <CodeMirrorEditor value={value} extensions={CODE_MIRROR_EXTENSIONS} editorRef={editorRef} />
+                        : <SchemaEditor schema={schema} />
+                }
+            </div>
+        </div>
+    );
+}
+
+function jsonToContent(json: any | undefined | null) {
+    if (!json) {
+        return ''
+    }
+
+    return JSON.stringify(json, null, 2);
+}
+
+function contentToJson(content: string | undefined | null) {
+    if (!content?.trim()) {
+        return undefined;
+    }
+
+    return JSON.parse(content.trim());
+}
+
+const validateSchema = (schema: Record<string, any>) => {
+    try {
+        const ajv = new Ajv({
+            strict: false, // Enable strict mode to ensure all properties are validated
+        });
+        // Compile the schema. This implicitly validates the schema definition
+        // against the JSON Schema draft that ajv supports by default.
+        ajv.compile(schema);
+    } catch (error: any) {
+        throw new Error(`Invalid JSON Schema definition: ${error.message}`);
+    }
+};

package/src/features/store/types/SelectContentType.tsx

@@ -0,0 +1,88 @@
+import { ContentObjectTypeItem } from "@vertesia/common";
+import { VSelectBox } from "@vertesia/ui/core";
+import { useUserSession } from "@vertesia/ui/session";
+import { useEffect, useState } from "react";
+
+const optionLabel = (t: ContentObjectTypeItem | null) => {
+    if (t === null) return 'None';
+
+    return (
+        <div>
+            <div className="text-sm">{t.name}</div>
+            <div className="text-xs text-gray-500">{t.description}</div>
+        </div>
+    );
+};
+
+interface SelectContentTypeProps {
+    defaultValue?: string | string[] | null; // the typeId
+    onChange: (type: ContentObjectTypeItem | null | ContentObjectTypeItem[]) => void;
+    className?: string;
+    isClearable?: boolean;
+    multiple?: boolean;
+}
+export function SelectContentType({ className, defaultValue, onChange, isClearable, multiple}: SelectContentTypeProps) {
+    const session = useUserSession();
+    const [isMounted, setIsMounted] = useState(false);
+    const [selectedType, setSelectedType] = useState<ContentObjectTypeItem | undefined>();
+    const [selectedTypes, setSelectedTypes] = useState<ContentObjectTypeItem[]>([])
+
+    useEffect(() => {
+        if (!isMounted) {
+            setIsMounted(true);
+            if (session.typeRegistry && defaultValue) {
+                if (multiple && Array.isArray(defaultValue)) {
+                    const types = session.typeRegistry.types.filter(t => defaultValue.includes(t.id));
+                    setSelectedTypes(types);
+                }
+                const type = session.typeRegistry.types.find(t => t.id === defaultValue);
+                if (type) {
+                    setSelectedType(type);
+                }
+            }
+        }
+    }, [session.typeRegistry, defaultValue, multiple])
+
+    const _onChange = (option: ContentObjectTypeItem | null) => {
+        setSelectedType(option || undefined);
+        onChange(option);
+    };
+
+    const _onChangeMultiple = (options: ContentObjectTypeItem[]) => {
+        setSelectedTypes(options);
+        onChange(options);
+    };
+
+    if (multiple) {
+        return (
+            <div className='flex flex-col gap-4 content-between'>
+                <VSelectBox<ContentObjectTypeItem>
+                    options={session.typeRegistry?.types || []}
+                    value={selectedTypes}
+                    onChange={_onChangeMultiple}
+                    placeholder="Choose Content Types..."
+                    optionLabel={optionLabel}
+                    className={className || "text-sm bg-background"}
+                    filterBy="name"
+                    isClearable={isClearable || false as any}
+                    multiple
+                />
+            </div>
+        );
+    }
+
+    return (
+        <div className='flex flex-col gap-4 content-between'>
+            <VSelectBox<ContentObjectTypeItem>
+                options={session.typeRegistry?.types || []}
+                value={selectedType}
+                onChange={_onChange}
+                placeholder="Choose a Content Type..."
+                optionLabel={optionLabel}
+                className={className || "text-sm bg-background"}
+                filterBy="name"
+                isClearable={isClearable || false as any}
+            />
+        </div>
+    );
+}

package/src/features/store/types/SelectContentTypeModal.tsx

@@ -0,0 +1,142 @@
+import { useState, ReactNode } from "react";
+import {
+    Button,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    ModalTitle,
+    SelectBox,
+} from "@vertesia/ui/core";
+import { ContentObjectTypeItem } from "@vertesia/common";
+import { useUserSession } from "@vertesia/ui/session";
+import { CheckCircleIcon } from "lucide-react";
+
+/**
+ * Props for the SelectTypeModal component
+ */
+interface SelectContentTypeModalProps {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Callback when the modal is closed */
+    onClose: (typeId?: string | null | undefined) => void;
+    /** Title for the modal */
+    title?: string;
+    /** Children to render in the modal */
+    children?: ReactNode;
+    /** Optional initial selected type */
+    initialSelectedType?: ContentObjectTypeItem | null;
+    /** Optional description text */
+    description?: string;
+    /** Label for the confirm button */
+    confirmLabel?: string;
+    /** Whether to allow the "None" option */
+    allowNone?: boolean;
+}
+
+/**
+ * A dedicated modal for selecting content types.
+ *
+ * This is a lightweight modal specifically for selecting a content type,
+ * without any file upload functionality. Used for changing types, setting
+ * types in other contexts, etc.
+ */
+export function SelectContentTypeModal({
+    isOpen,
+    onClose,
+    title = "Select Content Type",
+    children,
+    initialSelectedType = null,
+    confirmLabel = "Select Type",
+    allowNone = true,
+}: SelectContentTypeModalProps) {
+    const { typeRegistry } = useUserSession();
+    const [selectedType, setSelectedType] = useState<ContentObjectTypeItem | null>(initialSelectedType);
+
+    // Get available types from the registry
+    const types = typeRegistry?.types || [];
+
+    // Handle close/cancel
+    const handleClose = () => {
+        onClose(undefined);
+    };
+
+    // Handle type selection and confirmation
+    const handleConfirm = () => {
+        onClose(selectedType?.id ?? null);
+    };
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            onClose={handleClose}
+            className="w-full max-w-xl mx-auto"
+        >
+            <ModalTitle>{title}</ModalTitle>
+            <ModalBody className="p-6">
+                {children}
+
+                {/* Type selection */}
+                <div className="mb-4 mt-4">
+                    <label className="block text-sm font-medium mb-2">
+                        Content Type {allowNone && <span className="text-gray-500 font-normal">(Optional)</span>}
+                    </label>
+                    {allowNone ? (
+                        <SelectBox
+                            options={types}
+                            value={selectedType}
+                            optionLabel={(type) => type ? type.name : 'Select a content type'}
+                            placeholder="Select a content type or leave empty for automatic detection"
+                            onChange={(selected: ContentObjectTypeItem | null | undefined) => setSelectedType(selected || null)}
+                            filterBy="name"
+                            isClearable={true}
+                        />
+                    ) : (
+                        <SelectBox
+                            options={types}
+                            value={selectedType}
+                            optionLabel={(type) => type ? type.name : 'Select a content type'}
+                            placeholder="Select a content type"
+                            onChange={(selected: ContentObjectTypeItem | null | undefined) => setSelectedType(selected || null)}
+                            filterBy="name"
+                        />
+                    )}
+
+                    {allowNone && (
+                        <div className="mt-2 text-sm text-blue-600 flex items-center">
+                            <CheckCircleIcon className="h-4 w-4 mr-1" />
+                            <span><strong>Type selection is optional.</strong> Leave empty to let Vertesia choose the appropriate type</span>
+                        </div>
+                    )}
+                </div>
+
+                {selectedType ? (
+                    <div className="text-sm text-gray-500 bg-gray-50 p-3 rounded-md mb-4">
+                        <div className="font-medium">{selectedType.name}</div>
+                        {selectedType.description && (
+                            <div className="mt-1">{selectedType.description}</div>
+                        )}
+                    </div>
+                ) : allowNone && (
+                    <div className="text-sm text-blue-600 bg-blue-50 p-3 rounded-md mb-4">
+                        <div className="font-medium">Automatic Type Detection</div>
+                        <div className="mt-1">
+                            Vertesia will analyze each file&apos;s content and automatically select the most appropriate type.
+                            <br />
+                            <span className="mt-1 block font-medium">This is recommended for most uploads.</span>
+                        </div>
+                    </div>
+                )}
+            </ModalBody>
+            <ModalFooter>
+                <Button variant="ghost" onClick={handleClose}>
+                    Cancel
+                </Button>
+                <Button
+                    onClick={handleConfirm}
+                >
+                    {selectedType ? `${confirmLabel}: ${selectedType.name}` : allowNone ? "Let Vertesia Choose" : confirmLabel}
+                </Button>
+            </ModalFooter>
+        </Modal>
+    );
+}

package/src/features/store/types/TableLayoutEditor.tsx

@@ -0,0 +1,104 @@
+import { basicSetup } from 'codemirror';
+import { useMemo, useRef, useState } from 'react';
+import { json } from '@codemirror/lang-json';
+import { ColumnLayout, ContentObjectType } from '@vertesia/common';
+import { Button, useToast } from '@vertesia/ui/core';
+import { useUserSession } from '@vertesia/ui/session';
+import { CodeMirrorEditor, EditorApi } from '@vertesia/ui/widgets';
+
+const extensions = [basicSetup, json()];
+
+interface TableLayoutEditorProps {
+    objectType: ContentObjectType;
+    onLayoutUpdate: (value: ColumnLayout[] | undefined) => void;
+}
+export function TableLayoutEditor({ objectType, onLayoutUpdate }: TableLayoutEditorProps) {
+    const toast = useToast();
+
+    const [isUpdating, setUpdating] = useState(false);
+    const { store } = useUserSession();
+
+    const editorRef = useRef<EditorApi | undefined>(undefined);
+
+    const value = useMemo(() => {
+        return stringifyTableLayout(objectType.table_layout);
+    }, [objectType.table_layout])
+
+    const validationError = (title: string, message: string) => {
+        toast({
+            status: 'error',
+            title: title,
+            description: message,
+            duration: 5000
+        })
+    }
+
+    const onSave = () => {
+        if (!editorRef.current) {
+            return;
+        }
+        const value = editorRef.current.getValue();
+        let table_layout: ColumnLayout[] | null;
+        if (!value) {
+            table_layout = null;
+        } else {
+            try {
+                table_layout = JSON.parse(value);
+            } catch (err: any) {
+                return validationError('Invalid JSON', err.message);
+            }
+        }
+
+        if (!Array.isArray(table_layout)) {
+            return validationError('Invalid JSON', 'The table layout must be an array');
+        }
+        if (table_layout.some((col) => !col || !col.name || !col.field)) {
+            return validationError('Invalid JSON', 'A table layout entry must contain the following properties:] {field, name, converter?}');
+        }
+
+        setUpdating(true);
+        store.types.update(objectType.id, {
+            table_layout
+        }).then((response) => {
+            toast({
+                status: 'success',
+                title: 'Table Layout updated',
+                description: 'The table layout has been updated successfully',
+                duration: 2000
+            });
+            onLayoutUpdate(response.table_layout);
+        }).catch((err) => {
+            toast({
+                status: 'error',
+                title: 'Failed to update table layout',
+                description: err.message,
+                duration: 5000
+            })
+        }).finally(() => {
+            setUpdating(false);
+        });
+    }
+
+
+    return (
+        <div className="mx-2 my-2 rounded-2xl border border-solid shadow-xs">
+            <div className="flex items-center rounded-t-md border-b gap-x-2 py-2 pl-4 pr-2">
+                <div className="text-base font-semibold ">Table Layout Editor</div>
+                <div className="ml-auto flex gap-x-2">
+                    <Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>Save Changes</Button>
+                </div>
+            </div>
+            <div className="px-4 py-2">
+                <CodeMirrorEditor value={value} extensions={extensions} editorRef={editorRef} />
+            </div>
+        </div>
+    )
+}
+
+
+export function stringifyTableLayout(obj: any) {
+    if (!obj) {
+        return '[\n\n]';
+    }
+    return JSON.stringify(obj, null, 2);
+}

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

@@ -0,0 +1,8 @@
+export * from "./ContentObjectTypesSearch";
+export * from "./ContentObjectTypesTable";
+export * from "./CreateOrUpdateTypeModal";
+export * from "./ObjectSchemaEditor";
+export * from "./search";
+export * from "./SelectContentType";
+export * from "./SelectContentTypeModal";
+export * from "./TableLayoutEditor";