@vertesia/ui 0.60.0 → 0.61.0

package/src/features/store/objects/search/DocumentSearchContext.ts

@@ -0,0 +1,181 @@
+import { createContext, useContext } from 'react';
+
+import { SharedState, useWatchSharedState } from '@vertesia/ui/core';
+import { ComputeFacetsResponse, ZenoClient } from '@vertesia/client';
+import { ComplexSearchQuery, ContentObjectItem, FacetBucket, FacetSpec, ObjectSearchQuery } from '@vertesia/common';
+
+interface DocumentSearchResult {
+    objects: ContentObjectItem[],
+    error?: Error;
+    isLoading: boolean;
+}
+
+
+export class DocumentSearch {
+
+    collectionId?: string;
+    facets = new SharedState<ComputeFacetsResponse>({});
+    result = new SharedState<DocumentSearchResult>({ objects: [], isLoading: false });
+
+    facetSpecs: FacetSpec[] = [];
+    query: ComplexSearchQuery = {};
+
+    constructor(public client: ZenoClient, public limit = 100) { }
+
+    withFacets(facets: FacetSpec[]) {
+        this.facetSpecs = facets;
+        return this;
+    }
+
+    get objects() {
+        return this.result.value.objects;
+    }
+
+    get error() {
+        return this.result.value.error;
+    }
+
+    get isRunning() {
+        return this.result.value.isLoading;
+    }
+
+    getFilterValue(name: string) {
+        return (this.query as any)[name];
+    }
+
+    setFilterValue(name: string, value: any) {
+        (this.query as any)[name] = value;
+        // search now
+        this.search();
+    }
+
+    clearFilters() {
+        const parent = this.query.parent;
+        this.query = {
+            parent
+        };
+
+        this.search();
+    }
+
+    getFacetBuckets(name: string): FacetBucket[] {
+        return (this.facets.value as any)[name]?.buckets || [];
+    }
+
+    resetFacets() {
+        this.query = {};
+    }
+
+    reset(isLoading = false) {
+        this.result.value = {
+            objects: [],
+            isLoading
+        };
+    }
+
+    _updateRunningState(value: boolean) {
+        const prev = this.result.value;
+        this.result.value = {
+            objects: prev.objects,
+            isLoading: value,
+            error: prev.error
+        }
+    }
+
+    _searchRequest(query: ComplexSearchQuery, limit: number, offset: number) {
+        return this.collectionId ?
+            this.client.collections.searchMembers(this.collectionId, {
+                limit,
+                offset,
+                query
+            })
+            : this.client.objects.search({
+                limit,
+                offset,
+                query
+            });
+    }
+
+    _facetsRequest() {
+        return this.collectionId ?
+            this.client.collections.computeFacets(this.collectionId, {
+                facets: this.facetSpecs,
+                query: this.query
+            })
+            : this.client.objects.computeFacets({
+                facets: this.facetSpecs,
+                query: this.query
+            });
+    }
+
+    computeFacets(_query: ObjectSearchQuery) {
+        this._facetsRequest().then((facets) => {
+            this.facets.value = facets;
+        });
+    }
+
+    _search(loadMore = false) {
+        if (this.isRunning) { // avoid searching when a search is pending
+            return Promise.resolve(false);
+        }
+        this.result.value = {
+            isLoading: true,
+            objects: loadMore ? this.objects : [],
+        }
+        const limit = this.limit;
+        const offset = this.objects.length;
+        return this._searchRequest(this.query, limit, offset).then(async (res) => {
+            this.result.value = {
+                isLoading: false,
+                objects: this.objects.concat(res)
+            }
+            return true;
+        }).catch((err) => {
+            this.result.value = {
+                error: err,
+                isLoading: false,
+                objects: this.objects
+            }
+            throw err;
+        })
+    }
+
+    search(noFacets = false) {
+        if (this.isRunning) return Promise.resolve(false);
+        !noFacets && this.computeFacets(this.query);
+        return this._search(false);
+    }
+
+    loadMore(noFacets = false) {
+        if (this.isRunning) return Promise.resolve(false);
+        if (this.objects.length === 0) {
+            !noFacets && this.computeFacets(this.query);
+        }
+        return this._search(true);
+    }
+}
+
+const DocumentSearchContext = createContext<DocumentSearch | undefined>(undefined);
+
+export function useDocumentSearch() {
+    return useContext(DocumentSearchContext)!;
+}
+
+export function useWatchDocumentSearchFacets() {
+    return useWatchSharedState(useDocumentSearch().facets);
+}
+
+export function useWatchDocumentSearchResult() {
+    const search = useDocumentSearch();
+    const result = useWatchSharedState(search.result);
+    return { ...result, search };
+}
+
+export function useDocumentSearchCount() {
+    const search = useDocumentSearch();
+    const result = useWatchSharedState(search.facets);
+    return result.total;
+}
+
+
+export { DocumentSearchContext as SearchContext };

package/src/features/store/objects/search/DocumentSearchProvider.tsx

@@ -0,0 +1,54 @@
+import { useUserSession } from "@vertesia/ui/session";
+import { FacetSpec, SupportedEmbeddingTypes } from "@vertesia/common";
+import React, { useMemo } from "react";
+import { DocumentSearch, SearchContext } from "./DocumentSearchContext";
+
+interface DocumentSearchProviderProps {
+    children: React.ReactNode;
+    limit?: number;
+    typeId?: string;
+    parent?: string;
+    facets?: FacetSpec[];
+    similarTo?: string; //vector search similarity
+    embeddingType?: SupportedEmbeddingTypes; //vector search similarity
+    collectionId?: string;
+    name?: string;
+}
+export function DocumentSearchProvider({ children, limit, parent, typeId, facets, similarTo, embeddingType, name, collectionId }: DocumentSearchProviderProps) {
+    const { store } = useUserSession();
+    const search = useMemo(() => {
+        let facetSpecs: FacetSpec[];
+        if (facets) {
+            facetSpecs = facets;
+        } else {
+            facetSpecs = [
+                {
+                    name: 'status',
+                    field: 'status'
+                },
+                {
+                    name: 'location',
+                    field: 'location'
+                }
+            ]
+            if (!typeId) {
+                facetSpecs.unshift({
+                    name: 'type',
+                    field: 'type'
+                })
+            }
+        }
+        const search = new DocumentSearch(store, limit).withFacets(facetSpecs);
+        search.collectionId = collectionId;
+        search.query.type = typeId;
+        search.query.parent = parent;
+        search.query.similarTo = similarTo;
+        search.query.embeddingType = embeddingType;
+        search.query.name = name;
+        return search;
+    }, [typeId, limit]);
+
+    return (
+        <SearchContext.Provider value={search}>{children}</SearchContext.Provider>
+    )
+}

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

@@ -0,0 +1,2 @@
+export * from "./DocumentSearchContext"
+export * from "./DocumentSearchProvider"

package/src/features/store/objects/selection/ObjectsActionContext.tsx

@@ -0,0 +1,196 @@
+import { createContext, ReactNode, useContext, useEffect, useMemo } from 'react';
+
+import { ErrorBox, useFetch, useToast } from '@vertesia/ui/core';
+import { useUserSession } from '@vertesia/ui/session';
+
+import { useDocumentSearch, useDocumentSelection } from '../../../store';
+import { AddToCollectionAction } from './actions/AddToCollectionAction';
+import { ChangeTypeAction } from './actions/ChangeTypeAction';
+import { DeleteObjectsAction } from './actions/DeleteObjectsAction';
+import { ExportPropertiesAction } from './actions/ExportPropertiesAction';
+import { RemoveFromCollectionAction } from './actions/RemoveFromCollectionAction';
+import { StartWorkflowAction, StartWorkflowComponent } from './actions/StartWorkflowComponent';
+import { ObjectsActionParams, ObjectsActionSpec } from './ObjectsActionSpec';
+
+export type ObjectsActionCallback = (params: ObjectsActionParams) => Promise<unknown>;
+
+export class ObjectsActionContext {
+    allActions: ObjectsActionSpec[] = [
+        ExportPropertiesAction,
+        ChangeTypeAction,
+        StartWorkflowAction,
+        AddToCollectionAction,
+        DeleteObjectsAction,
+        RemoveFromCollectionAction,
+    ];
+    wfRules: ObjectsActionSpec[] = [];
+    callbacks: Record<string, ObjectsActionCallback> = {};
+    startWorkflow?: ObjectsActionCallback;
+
+    constructor(public params: Omit<ObjectsActionParams, 'action'>) { }
+
+    get actions(): ObjectsActionSpec[] {
+        const isInCollection = !!this.params.selection?.collectionId;
+
+        if (isInCollection) {
+            return this.allActions.filter(action =>
+                action.id !== 'addToCollection' && action.id !== 'delete'
+            );
+        } else {
+            return this.allActions.filter(action =>
+                action.id !== 'removeFromCollection'
+            );
+        }
+    }
+
+    async loadWorkflows() {
+        this.params.client.workflows.rules.list().then((rules) => {
+            this.wfRules = rules.map(rule => (
+                {
+                    id: rule.id,
+                    name: rule.name,
+                    description: rule.description,
+                    confirm: false,
+                    isWorkflow: true,
+                    component: StartWorkflowComponent
+                }
+            )).sort((a, b) => a.name.localeCompare(b.name));
+        });
+        return this.wfRules;
+    }
+
+    registerCallback(name: string, cb: (params: ObjectsActionParams) => Promise<unknown>) {
+        this.callbacks[name] = cb;
+        return () => {
+            delete this.callbacks[name];
+        }
+    }
+
+    unregisterCallback(name: string) {
+        delete this.callbacks[name];
+    }
+
+    findAction(actionId: string) {
+        let action = this.allActions.find(a => a.id === actionId);
+        if (!action) {
+            action = this.wfRules.find(a => a.id === actionId);
+        }
+        return action;
+    }
+
+    async run(actionId: string): Promise<unknown> {
+        const action = this.findAction(actionId);
+        if (!action) {
+            throw new Error(`Action ${actionId} not found`);
+        }
+        const params = { ...this.params, action };
+        // if (action.isWorkflow) {
+        //     if (!this.startWorkflow) {
+        //         throw new Error("No startWorkflow callback set");
+        //     }
+        //     return this.startWorkflow(params);
+        // } else {
+        const cb = this.callbacks[actionId];
+        if (cb) {
+            return cb(params);
+        } else {
+            throw new Error("No action callback set");
+        }
+        //        }
+    }
+}
+
+const ObjectsActionContextReact = createContext<ObjectsActionContext>(undefined as any);
+
+interface ObjectsActionContextProps {
+    children: ReactNode;
+}
+export function ObjectsActionContextProvider({ children }: ObjectsActionContextProps) {
+    const selection = useDocumentSelection();
+    const toast = useToast();
+    const { client } = useUserSession();
+    const search = useDocumentSearch();
+
+    const { data: rules, error } = useFetch<ObjectsActionSpec[]>(() => {
+        return client.workflows.rules.list().then((rules) => {
+            return rules.map(rule => (
+                {
+                    id: rule.id,
+                    name: rule.name,
+                    description: rule.description,
+                    confirm: false,
+                    isWorkflow: true,
+                    component: StartWorkflowComponent
+                }
+            )).sort((a, b) => a.name.localeCompare(b.name));
+        });
+    }, []);
+
+    const context = useMemo(() => {
+        const context = new ObjectsActionContext({
+            selection, toast, client, search
+        });
+        context.wfRules = rules!;
+        return context;
+    }, [selection, rules]);
+
+    if (error) {
+        return <ErrorBox title="Failed to fetch workflows">{error.message}</ErrorBox>
+    }
+
+    return (
+        context && (
+            <ObjectsActionContextReact.Provider value={context}>
+                <Actions />
+                {children}
+            </ObjectsActionContextReact.Provider>
+        )
+    )
+}
+
+interface ActionsProps {
+}
+function Actions({ }: ActionsProps) {
+    const context = useObjectsActionContext();
+
+    const selection = context.params.selection;
+    const objectId = selection.getObjectId();
+    const objectIds = selection.isSingleSelection() && objectId ? [objectId] : selection.getObjectIds();
+
+    return (
+        <div style={{ display: 'none' }}>
+            {
+                context.allActions.map(action => (
+                    <action.component key={action.id} action={action} objectIds={objectIds} collectionId={selection.collectionId} />
+                ))
+            }
+        </div>
+    )
+}
+
+export function useObjectsActionContext() {
+    const ctx = useContext(ObjectsActionContextReact);
+    if (!ctx) {
+        throw new Error("You cannot use useActionContext outside an ActionProvider");
+    }
+    return ctx;
+}
+
+export function useObjectsActionCallback(name: string, cb: ObjectsActionCallback) {
+    const ctx = useObjectsActionContext();
+    useEffect(() => {
+        return ctx.registerCallback(name, cb);
+    }, [ctx, name, cb]);
+    return ctx;
+}
+
+export function useStartWorkflowCallback(cb: ObjectsActionCallback) {
+    const ctx = useObjectsActionContext();
+    useEffect(() => {
+        ctx.startWorkflow = cb;
+        return () => {
+            ctx.startWorkflow = undefined;
+        }
+    }, [cb, ctx]);
+    return ctx;
+}

package/src/features/store/objects/selection/ObjectsActionSpec.ts

@@ -0,0 +1,31 @@
+import { VertesiaClient } from "@vertesia/client";
+import { ToastFn } from "@vertesia/ui/core";
+import { DocumentSearch, DocumentSelection } from "../../../store";
+
+export interface ObjectsActionSpec {
+    id: string;
+    name: string;
+    description?: string;
+    confirm?: boolean;
+    confirmationText?: string;
+    component: ActionComponentType;
+    hideInList?: boolean;
+    destructive?: boolean;
+}
+
+export interface ObjectsActionParams {
+    action: ObjectsActionSpec,
+    client: VertesiaClient,
+    selection: DocumentSelection,
+    toast: ToastFn,
+    search: DocumentSearch,
+}
+
+export interface ActionComponentTypeProps {
+    action: ObjectsActionSpec,
+    objectIds: string[],
+    children?: React.ReactNode,
+    // the collection id if the action is being performed on a collection
+    collectionId?: string,
+}
+export type ActionComponentType = React.ComponentType<ActionComponentTypeProps>;

package/src/features/store/objects/selection/SelectionActions.tsx

@@ -0,0 +1,160 @@
+import { Button, Popover, PopoverContent, PopoverTrigger, SelectList } from '@vertesia/ui/core';
+import clsx from 'clsx';
+import { EllipsisVertical, X } from 'lucide-react';
+
+import { useState } from "react";
+import { DocumentSelection, DocumentUploadModal, useDocumentSelection } from "../../../store";
+import { ExportPropertiesAction } from "./actions/ExportPropertiesAction";
+import { StartWorkflowAction } from "./actions/StartWorkflowComponent";
+import { ObjectsActionContextProvider, useObjectsActionContext } from "./ObjectsActionContext";
+import { ObjectsActionSpec } from "./ObjectsActionSpec";
+
+export function SelectionActions() {
+    const selection = useDocumentSelection();
+    const size = selection.size();
+    const plural = size > 1 ? "s" : "";
+
+    const hasSelection = selection?.hasSelection();
+    const hasSingleSelection = selection?.isSingleSelection();
+
+    const onClearSelection = () => {
+        selection?.removeAll();
+    };
+
+    return (
+        <ObjectsActionContextProvider>
+            <div className="flex items-center gap-x-2">
+                {hasSelection && !hasSingleSelection &&
+                    <div className="flex items-center gap-x-1 shrink-0">
+                        <div className='text-sm nowrap'>{size} document{plural} selected</div>
+                        <Button title="Clear selection" variant={"ghost"}
+                            className=" rounded-md p-2"
+                            onClick={onClearSelection}>
+                            <X className="size-4" />
+                        </Button>
+                    </div>
+                }
+                <SelectionActionsPopover selection={selection}>
+                    <Button variant="ghost" alt="More action" size="sm">
+                        <EllipsisVertical size={16} />
+                    </Button>
+                </SelectionActionsPopover>
+                {/* StartWorkflowButton must be inside the context */}
+                {hasSelection && <ActionsWrapper selection={selection} />}
+            </div>
+        </ObjectsActionContextProvider>
+    )
+}
+
+// Wrapper component that accesses the context
+interface ActionsWrapperProps {
+    selection: DocumentSelection;
+}
+function ActionsWrapper({ }: ActionsWrapperProps) {
+    return <StartWorkflowButton />;
+}
+
+export function UploadObjectsButton({ collectionId }: { collectionId?: string }) {
+    const [files, setFiles] = useState<File[]>([]);
+    const selection = useDocumentSelection();
+
+    const hasSelection = selection?.hasSelection();
+
+    const selectFile = () => {
+        const fileInput = document.createElement("input");
+        fileInput.type = "file";
+        fileInput?.click();
+        fileInput.onchange = (event) => {
+            const files = (event.target as HTMLInputElement).files;
+            if (files) {
+                setFiles(Array.from(files));
+            }
+        };
+    };
+
+    return (
+        !hasSelection &&
+        <>
+            <Button onClick={() => selectFile()}>Upload</Button>
+            <DocumentUploadModal
+                collectionId={collectionId ?? ''}
+                isOpen={files.length > 0}
+                onClose={() => setFiles([])}
+                files={files}
+                title="Upload Files"
+                onUploadComplete={(result) => {
+                    if (result && result.success) {
+                        setFiles([]);
+                    }
+                }}
+            >
+                <div className="text-sm">
+                    Select the associated Content Type, or let the system choose or generate the type based on the
+                    content.
+                </div>
+            </DocumentUploadModal>
+        </>
+    );
+}
+
+function StartWorkflowButton() {
+    const ctx = useObjectsActionContext();
+
+    const selection = ctx.params.selection;
+    const hasSelection = selection.hasSelection();
+
+    return (
+        hasSelection &&
+        <Button onClick={() => ctx.run(StartWorkflowAction.id)}>Start Workflow</Button>
+    )
+}
+function optionLayout(option: ObjectsActionSpec) {
+    return {
+        label: option.name,
+        className: clsx('flex-1 px-2 py-2 hover:bg-accent nowrap', option.destructive ? 'text-destructive' : ''),
+    };
+}
+
+interface SelectionActionsPopoverProps {
+    children: React.ReactNode;
+    selection: DocumentSelection;
+}
+function SelectionActionsPopover({ selection, children }: SelectionActionsPopoverProps) {
+    const context = useObjectsActionContext();
+    const executeAction = (action: ObjectsActionSpec) => {
+        context.run(action.id);
+    };
+
+    return (
+        <Popover hover>
+            <PopoverTrigger>
+                {children}
+            </PopoverTrigger >
+            <PopoverContent className='p-0 w-50' align='end' sideOffset={6}>
+                <PopoverBody executeAction={executeAction} selection={selection} />
+            </PopoverContent>
+        </Popover >
+    )
+}
+
+interface PopoverBodyProps {
+    executeAction: (action: ObjectsActionSpec) => void;
+    selection: DocumentSelection;
+}
+function PopoverBody({ executeAction, selection }: PopoverBodyProps) {
+    const context = useObjectsActionContext();
+
+    const _executeAction = (action: ObjectsActionSpec) => {
+        executeAction(action);
+    }
+
+    const _selection = selection?.hasSelection() ? context.actions.filter(action => !action.hideInList) : [ExportPropertiesAction];
+
+    return (
+        <div className="rounded-md shadow-md py-2">
+            <div className="px-1 text-sm">
+                <SelectList options={_selection} optionLayout={optionLayout} onChange={_executeAction} noCheck />
+            </div>
+        </div>
+    );
+}