@vertesia/ui 0.79.0 → 0.79.1

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

@@ -16,19 +16,24 @@ import { useUserSession } from "@vertesia/ui/session";
  * @returns A dropdown to select a collection.
 **/
 interface SelectCollectionProps {
-    value?: string; // Collection ID
-    onChange: (collectionId: string | undefined, collection?: CollectionItem) => void;
+    value?: string | string[];
+    onChange: (collectionId: string | string[] | undefined, collection?: CollectionItem | CollectionItem[]) => void;
     disabled?: boolean;
     placeholder?: string;
     searchPlaceholder?: string;
+    filterOut?: string[]; // collection IDs to filter out from the list
+    allowDynamic?: boolean;
+    multiple?: boolean;
 }
-export function SelectCollection({ onChange, value, disabled = false, placeholder = "Select a collection", searchPlaceholder = "Search collections" }: SelectCollectionProps) {
+
+export function SelectCollection({ onChange, value, disabled = false, placeholder = "Select a collection", searchPlaceholder = "Search collections", filterOut, allowDynamic = true, multiple = false }: SelectCollectionProps) {
     const { client } = useUserSession();
 
     const [searchQuery, setSearchQuery] = useState('');
     const [isSearching, setIsSearching] = useState(false);
+    const [useServerSearch, setUseServerSearch] = useState(false);
 
-    // Debounce the search query to avoid excessive API calls
+    // Debounce the search query to avoid excessive API calls (only used for server-side search)
     const debouncedSearchQuery = useDebounce(searchQuery, 300);
 
     // Memoize the search function to prevent unnecessary re-renders
@@ -37,29 +42,63 @@ export function SelectCollection({ onChange, value, disabled = false, placeholde
         const trimmedQuery = query.trim();
 
         const collections = await client.store.collections.search({
-            dynamic: false,
-            name: trimmedQuery || undefined
+            dynamic: allowDynamic ? undefined : false,
+            name: useServerSearch ? (trimmedQuery || undefined) : undefined
         });
 
         setIsSearching(false);
+
+        // Check if we hit the maximum limit (1000 collections) - if so, enable server-side search
+        if (!useServerSearch && collections.length >= 1000) {
+            setUseServerSearch(true);
+        }
+
+        // Filter out collections if filterOut is provided
+        if (filterOut && filterOut.length > 0) {
+            return collections.filter(col => !filterOut.includes(col.id));
+        }
         return collections;
-    }, [client]);
+    }, [client, allowDynamic, filterOut, useServerSearch]);
 
-    // Fetch collections based on debounced search query
+    // Fetch collections based on search mode
     const { data: collections, error } = useFetch(
-        () => searchCollections(debouncedSearchQuery),
-        [debouncedSearchQuery, searchCollections]
+        () => searchCollections(useServerSearch ? debouncedSearchQuery : ''),
+        [useServerSearch ? debouncedSearchQuery : '', searchCollections]
     );
 
-    // Memoize the selected collection to avoid recalculation on every render
+    // Memoize the selected collection(s)
     const selectedCollection = useMemo(() => {
-        return collections?.find((collection: CollectionItem) => collection.id === value);
-    }, [collections, value]);
+        if (!collections) return multiple ? [] : undefined;
+
+        if (multiple && Array.isArray(value)) {
+            return collections.filter((collection: CollectionItem) => value.includes(collection.id));
+        } else if (!multiple && typeof value === 'string') {
+            return collections.find((collection: CollectionItem) => collection.id === value);
+        }
+        return multiple ? [] : undefined;
+    }, [collections, value, multiple]);
 
     // Handle collection selection
     const handleSelect = useCallback((collection: CollectionItem) => {
-        onChange(collection.id, collection);
-    }, [onChange]);
+        if (multiple) {
+            const currentValues = Array.isArray(value) ? value : [];
+            const isSelected = currentValues.includes(collection.id);
+
+            if (isSelected) {
+                // Remove from selection
+                const newValues = currentValues.filter(id => id !== collection.id);
+                const newCollections = collections?.filter(c => newValues.includes(c.id)) || [];
+                onChange(newValues, newCollections);
+            } else {
+                // Add to selection
+                const newValues = [...currentValues, collection.id];
+                const newCollections = collections?.filter(c => newValues.includes(c.id)) || [];
+                onChange(newValues, newCollections);
+            }
+        } else {
+            onChange(collection.id, collection);
+        }
+    }, [onChange, value, collections, multiple]);
 
     // Handle clear selection
     const handleClear = useCallback(() => {
@@ -71,6 +110,24 @@ export function SelectCollection({ onChange, value, disabled = false, placeholde
         setSearchQuery(query);
     }, []);
 
+    const hasSearchQuery = searchQuery.trim().length > 0;
+
+    // Client-side filtering when not using server search
+    const filteredCollections = useMemo(() => {
+        if (!collections) return [];
+
+        // If using server search, collections are already filtered by the server
+        if (useServerSearch) return collections;
+
+        // Otherwise, do client-side filtering
+        if (!hasSearchQuery) return collections;
+
+        const queryLower = searchQuery.toLowerCase();
+        return collections.filter(col => col.name.toLowerCase().includes(queryLower));
+    }, [collections, useServerSearch, hasSearchQuery, searchQuery]);
+
+    const showClearOption = selectedCollection && hasSearchQuery;
+
     // Show error state
     if (error) {
         return (
@@ -80,8 +137,18 @@ export function SelectCollection({ onChange, value, disabled = false, placeholde
         );
     }
 
-    const hasSearchQuery = searchQuery.trim().length > 0;
-    const showClearOption = selectedCollection && hasSearchQuery;
+    // Get display text for the button
+    const getDisplayText = () => {
+        if (multiple && Array.isArray(selectedCollection) && selectedCollection.length > 0) {
+            if (selectedCollection.length === 1) {
+                return selectedCollection[0].name;
+            }
+            return `${selectedCollection.length} collections selected`;
+        } else if (!multiple && selectedCollection && !Array.isArray(selectedCollection)) {
+            return selectedCollection.name;
+        }
+        return placeholder;
+    };
 
     return (
         <Popover>
@@ -94,7 +161,7 @@ export function SelectCollection({ onChange, value, disabled = false, placeholde
                     disabled={disabled}
                 >
                     <span className="truncate flex-1 text-left min-w-0">
-                        {selectedCollection ? selectedCollection.name : placeholder}
+                        {getDisplayText()}
                     </span>
                     <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                 </Button>
@@ -125,7 +192,7 @@ export function SelectCollection({ onChange, value, disabled = false, placeholde
                     </CommandEmpty>
                     <CommandGroup className="max-h-[300px] overflow-auto">
                         {
-                            showClearOption && (
+                            showClearOption && !multiple && (
                                 <CommandItem
                                     value="__clear__"
                                     onSelect={handleClear}
@@ -136,40 +203,29 @@ export function SelectCollection({ onChange, value, disabled = false, placeholde
                             )
                         }
                         {
-                            collections?.map((collection: CollectionItem) => (
-                                <CommandItem
-                                    key={collection.id}
-                                    value={collection.id}
-                                    onSelect={() => handleSelect(collection)}
-                                    className={cn(
-                                        "flex items-center justify-between",
-                                        value === collection.id ? "bg-muted/20" : ""
-                                    )}
-                                >
-                                    <div className="flex flex-col flex-1 min-w-0">
-                                        <span className="truncate font-medium">
-                                            {collection.name}
-                                        </span>
-                                        {
-                                            collection.description && (
-                                                <span className="text-sm text-muted-foreground truncate">
-                                                    {collection.description}
-                                                </span>
-                                            )
-                                        }
-                                    </div>
-                                    <Check
-                                        className={cn(
-                                            "ml-2 h-4 w-4 shrink-0",
-                                            value === collection.id ? "opacity-100" : "opacity-0"
+                            filteredCollections.map((collection: CollectionItem) => {
+                                const isSelected = multiple && Array.isArray(value)
+                                    ? value.includes(collection.id)
+                                    : value === collection.id;
+
+                                return (
+                                    <CommandItem
+                                        key={collection.id}
+                                        value={collection.id}
+                                        onSelect={() => handleSelect(collection)}
+                                        className="flex items-center justify-between"
+                                    >
+                                        <span className="truncate">{collection.name}</span>
+                                        {isSelected && (
+                                            <Check className="ml-2 h-4 w-4 shrink-0" />
                                         )}
-                                    />
-                                </CommandItem>
-                            ))
+                                    </CommandItem>
+                                );
+                            })
                         }
                     </CommandGroup>
                 </Command>
             </PopoverContent>
         </Popover>
     );
-}
+}

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

@@ -6,7 +6,7 @@ import {
 } from '@vertesia/ui/core';
 import { useNavigate } from "@vertesia/ui/router";
 import { TypeRegistry, useUserSession } from '@vertesia/ui/session';
-import { Download, RefreshCw, Eye } from 'lucide-react';
+import { Download, RefreshCw, ExternalLink } from 'lucide-react';
 import { useDocumentFilterGroups, useDocumentFilterHandler } from "../../facets/DocumentsFacetsNav";
 import { VectorSearchWidget } from './components/VectorSearchWidget';
 import { ContentDispositionButton } from './components/ContentDispositionButton';
@@ -18,8 +18,8 @@ import { ContentOverview } from './components/ContentOverview';
 import { useDownloadDocument } from './components/useDownloadObject';
 
 const defaultLayout: ColumnLayout[] = [
-    { name: "ID", field: "id", type: "string?slice=-7" },
-    { name: "Name", field: ".", type: "objectLink" },
+    { name: "ID", field: "id", type: "objectId?slice=-7" },
+    { name: "Name", field: ".", type: "objectName" },
     { name: "Type", field: "type.name", type: "string" },
     { name: "Status", field: "status", type: "string" },
     { name: "Updated At", field: "updated_at", type: "date" },
@@ -90,7 +90,7 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
     const [isReady, setIsReady] = useState(false);
     const [selectedObject, setSelectedObject] = useState<ContentObjectItem | null>(null);
     const { typeRegistry } = useUserSession();
-    const { search, isLoading, error, objects } = useWatchDocumentSearchResult();
+    const { search, isLoading, error, objects, hasMore } = useWatchDocumentSearchResult();
     const [actualLayout, setActualLayout] = useState<ColumnLayout[]>(
         typeRegistry ? layout || getTableLayout(typeRegistry, search.query.type) : defaultLayout,
     );
@@ -105,6 +105,7 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
     // Trigger initial search when component mounts
     useEffect(() => {
         if (!isReady && objects.length === 0) {
+            setLoaded(0);
             // Manually set loading state to show spinner during initial load
             search._updateRunningState(true);
             search.search().then(() => {
@@ -116,6 +117,12 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
         }
     }, []);
 
+    useEffect(() => {
+        if (objects.length < loaded) {
+            setLoaded(objects.length);
+        }
+    }, [objects.length, loaded]);
+
     useIntersectionObserver(loadMoreRef, () => {
         if (isReady && objects.length > 0 && objects.length != loaded) {
             setIsReady(false);
@@ -197,75 +204,134 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
                 } else {
                     url.searchParams.delete('filters');
                 }
-                window.history.replaceState({}, '', url.toString());
+                window.history.replaceState(window.history.state || {}, '', url.toString());
             }
         } catch (error) {
             console.error("Failed to clean start/end filters from URL:", error);
         }
     }
 
+    const navigate = useNavigate();
+    const onRowClick = (object: ContentObjectItem) => {
+        navigate(`/objects/${object.id}`);
+    }
+
+    const previewObject = (objectId: string) => {
+        const obj = objects.find(o => o.id === objectId) || null;
+        setSelectedObject(obj);
+    }
+
     return (
         <div className="flex flex-col gap-y-2">
             <OverviewDrawer object={selectedObject} onClose={() => setSelectedObject(null)} />
             {
                 error && <ErrorBox title="Error">{error.message}</ErrorBox>
             }
-            <div className="sticky top-0 z-10 bg-background pb-2">
-                {
-                    allowFilter && (
-                        <FilterProvider
-                            filterGroups={filterGroups}
-                            filters={filters}
-                            setFilters={handleFilterChange}
-                        >
-                            <div className="flex flex-row gap-4 items-center justify-between w-full">
-                                <div className="flex gap-2 items-center w-2/3">
-                                    {
-                                        allowSearch && <VectorSearchWidget onChange={handleVectorSearch} isLoading={isLoading} refresh={refreshTrigger} className="w-full" />
-                                    }
-                                    <FilterBtn />
-                                </div>
-                                <div className="flex gap-1 items-center">
-                                    <Button variant="outline" onClick={handleRefetch} alt="Refresh"><RefreshCw size={16} /></Button>
-                                    <ContentDispositionButton onUpdate={setIsGridView} />
-                                </div>
-                            </div>
-                            <div className="flex gap-2 items-center">
-                                <FilterBar />
-                                <FilterClear />
-                            </div>
-                        </FilterProvider>
-                    )
-                }
-                {
-                    !allowFilter && (
+            <Toolsbar
+                isLoading={isLoading}
+                refreshTrigger={refreshTrigger}
+                allowFilter={allowFilter}
+                allowSearch={allowSearch}
+                filterGroups={filterGroups}
+                filters={filters}
+                handleFilterChange={handleFilterChange}
+                handleVectorSearch={handleVectorSearch}
+                handleRefetch={handleRefetch}
+                setIsGridView={setIsGridView}
+            />
+            <DocumentTable
+                objects={objects}
+                isLoading={!objects.length && isLoading}
+                layout={actualLayout}
+                onRowClick={onRowClick}
+                previewObject={previewObject}
+                selectedObject={selectedObject}
+                onUpload={onUpload}
+                isGridView={isGridView}
+                collectionId={searchContext.collectionId} // Pass the collection ID from context
+            />
+            {hasMore ? (
+                <div ref={loadMoreRef} className="w-full flex justify-center" >
+                    <Spinner size='xl' />
+                </div>
+            ) : (
+                <div className="text-muted text-center text-sm py-1">
+                    {`All ${objects.length} objects loaded.`}
+                </div>
+            )}
+        </div>
+    );
+}
+
+interface ToolsbarProps {
+    isLoading: boolean;
+    refreshTrigger: number;
+    allowFilter: boolean;
+    allowSearch: boolean;
+    filterGroups: ReturnType<typeof useDocumentFilterGroups>;
+    filters: BaseFilter[];
+    handleFilterChange: React.Dispatch<React.SetStateAction<BaseFilter[]>>;
+    handleVectorSearch: (query?: ComplexSearchQuery) => void;
+    handleRefetch: () => void;
+    setIsGridView: React.Dispatch<React.SetStateAction<boolean>>;
+}
+function Toolsbar(props: ToolsbarProps) {
+    const {
+        isLoading,
+        refreshTrigger,
+        allowFilter,
+        allowSearch,
+        filterGroups,
+        filters,
+        handleFilterChange,
+        handleVectorSearch,
+        handleRefetch,
+        setIsGridView
+    } = props;
+
+    return (
+        <div className="sticky top-0 z-10 bg-background py-2">
+            {
+                allowFilter && (
+                    <FilterProvider
+                        filterGroups={filterGroups}
+                        filters={filters}
+                        setFilters={handleFilterChange}
+                    >
                         <div className="flex flex-row gap-4 items-center justify-between w-full">
                             <div className="flex gap-2 items-center w-2/3">
                                 {
-                                    allowSearch && <VectorSearchWidget onChange={handleVectorSearch} isLoading={isLoading} refresh={refreshTrigger} />
+                                    allowSearch && <VectorSearchWidget onChange={handleVectorSearch} isLoading={isLoading} refresh={refreshTrigger} className="w-full" />
                                 }
+                                <FilterBtn />
                             </div>
                             <div className="flex gap-1 items-center">
                                 <Button variant="outline" onClick={handleRefetch} alt="Refresh"><RefreshCw size={16} /></Button>
                                 <ContentDispositionButton onUpdate={setIsGridView} />
                             </div>
                         </div>
-                    )
-                }
-            </div>
-            <DocumentTable
-                objects={objects}
-                isLoading={!objects.length && isLoading}
-                layout={actualLayout}
-                onRowClick={setSelectedObject}
-                onUpload={onUpload}
-                isGridView={isGridView}
-                collectionId={searchContext.collectionId} // Pass the collection ID from context
-            />
+                        <div className="flex gap-2 items-center pt-2">
+                            <FilterBar />
+                            <FilterClear />
+                        </div>
+                    </FilterProvider>
+                )
+            }
             {
-                isLoading && <div className='flex justify-center'><Spinner size='xl' /></div>
+                !allowFilter && (
+                    <div className="flex flex-row gap-4 items-center justify-between w-full">
+                        <div className="flex gap-2 items-center w-2/3">
+                            {
+                                allowSearch && <VectorSearchWidget onChange={handleVectorSearch} isLoading={isLoading} refresh={refreshTrigger} />
+                            }
+                        </div>
+                        <div className="flex gap-1 items-center">
+                            <Button variant="outline" onClick={handleRefetch} alt="Refresh"><RefreshCw size={16} /></Button>
+                            <ContentDispositionButton onUpdate={setIsGridView} />
+                        </div>
+                    </div>
+                )
             }
-            <div ref={loadMoreRef} />
         </div>
     );
 }
@@ -284,7 +350,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}`)}>
-                    <Eye className="size-4" />
+                    <ExternalLink className="size-4" />
                 </Button>
                 {object.content?.source && (
                     <Button variant="ghost" size="sm" title="Download" onClick={onDownload}>
@@ -294,7 +360,7 @@ function OverviewDrawer({ object, onClose }: OverviewDrawerProps) {
             </div>
             <Divider className="my-2" />
             <div className="pt-2">
-                <ContentOverview object={object as unknown as ContentObject} loadText />
+                <ContentOverview key={object.id} object={object as ContentObject} loadText />
             </div>
         </SidePanel>
     ) : null;

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

@@ -10,8 +10,8 @@ import { useDocumentSearch } from "./search/DocumentSearchContext";
 import { FileWithMetadata, DocumentUploadModal, useSmartFileUploadProcessing } from "./upload";
 
 const defaultLayout: ExtendedColumnLayout[] = [
-    { name: "ID", field: "id", type: "string?slice=-7" },
-    { name: "Name", field: ".", type: "objectLink" },
+    { name: "ID", field: "id", type: "objectId?slice=-7" },
+    { name: "Name", field: ".", type: "objectName" },
     { name: "Type", field: "type.name", type: "string" },
     { name: "Status", field: "status", type: "string" },
     { name: "Updated At", field: "updated_at", type: "date" },
@@ -19,6 +19,8 @@ const defaultLayout: ExtendedColumnLayout[] = [
 
 interface DocumentTableProps extends DocumentTableImplProps {
     isGridView?: boolean;
+    previewObject?: (objectId: string) => void;
+    selectedObject?: ContentObjectItem | null;
     onUpload?: (files: File[], type: string | null, collectionId?: string) => Promise<unknown>; // if defined, accept drag drop to upload
     collectionId?: string; // Important: Add collection ID to ensure uploads go to the right collection
 }
@@ -303,6 +305,8 @@ interface DocumentTableImplProps {
     onSelectionChange?: (selection: DocumentSelection) => void;
     highlightRow?: (item: ContentObjectItem) => boolean;
     rowActions?: (item: ContentObjectItem) => React.ReactNode[];
+    previewObject?: (objectId: string) => void;
+    selectedObject?: ContentObjectItem | null;
     isGridView?: boolean;
 }
 function DocumentTableImpl({
@@ -311,6 +315,8 @@ function DocumentTableImpl({
     isLoading,
     onRowClick,
     onSelectionChange,
+    previewObject,
+    selectedObject,
     isGridView,
 }: DocumentTableImplProps) {
     const selection = useOptionalDocumentSelection();
@@ -363,8 +369,8 @@ function DocumentTableImpl({
     const columns = useMemo(() => {
         // avoid rendering empty layouts
         const actualLayout = layout.length > 0 ? layout : defaultLayout;
-        return actualLayout.map((col) => new DocumentTableColumn(col));
-    }, [layout]);
+        return actualLayout.map((col) => new DocumentTableColumn(col, previewObject));
+    }, [layout, previewObject]);
 
     return isGridView ? (
         <DocumentGridView
@@ -372,6 +378,8 @@ function DocumentTableImpl({
             isLoading={isLoading}
             columns={columns}
             onRowClick={onRowClick}
+            previewObject={previewObject}
+            selectedObject={selectedObject}
             selection={selection}
             toggleAll={toggleAll}
             onSelectionChange={_onSelectionChange}
@@ -382,6 +390,8 @@ function DocumentTableImpl({
             isLoading={isLoading}
             columns={columns}
             onRowClick={onRowClick}
+            previewObject={previewObject}
+            selectedObject={selectedObject}
             selection={selection}
             toggleAll={toggleAll}
             onSelectionChange={_onSelectionChange}