@vertesia/ui 0.78.0 → 0.79.0

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

@@ -1,46 +1,175 @@
-import { ErrorBox, useFetch, VSelectBox } from "@vertesia/ui/core";
-import { useUserSession } from "@vertesia/ui/session";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
 
-interface SelectCollectionProps {
-    value?: string; // Collection ID
-    onChange: (collectionId: string | undefined, collection?: any) => void;
-    disabled?: boolean;
-    className?: string;
-}
+import { CollectionItem } from "@vertesia/common";
+import {
+    Button, cn, ErrorBox, useDebounce, useFetch,
+    Popover, PopoverContent, PopoverTrigger,
+    Command, CommandEmpty, CommandGroup, CommandItem, CommandInput
+} from "@vertesia/ui/core";
+import { useUserSession } from "@vertesia/ui/session";
 
 /**
  * A component to select a collection from a list of collections.
  * It fetches the collections from the store and displays them in a dropdown.
  * @param props - The properties for the component.
  * @returns A dropdown to select a collection.
- */
-export function SelectCollection({ onChange, value, disabled = false, className }: SelectCollectionProps) {
+**/
+interface SelectCollectionProps {
+    value?: string; // Collection ID
+    onChange: (collectionId: string | undefined, collection?: CollectionItem) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    searchPlaceholder?: string;
+}
+export function SelectCollection({ onChange, value, disabled = false, placeholder = "Select a collection", searchPlaceholder = "Search collections" }: SelectCollectionProps) {
     const { client } = useUserSession();
-    const { data: collections, error } = useFetch(() => client.store.collections.search({ dynamic: false }), []);
 
+    const [searchQuery, setSearchQuery] = useState('');
+    const [isSearching, setIsSearching] = useState(false);
+
+    // Debounce the search query to avoid excessive API calls
+    const debouncedSearchQuery = useDebounce(searchQuery, 300);
+
+    // Memoize the search function to prevent unnecessary re-renders
+    const searchCollections = useCallback(async (query: string) => {
+        setIsSearching(true);
+        const trimmedQuery = query.trim();
+
+        const collections = await client.store.collections.search({
+            dynamic: false,
+            name: trimmedQuery || undefined
+        });
+
+        setIsSearching(false);
+        return collections;
+    }, [client]);
+
+    // Fetch collections based on debounced search query
+    const { data: collections, error } = useFetch(
+        () => searchCollections(debouncedSearchQuery),
+        [debouncedSearchQuery, searchCollections]
+    );
+
+    // Memoize the selected collection to avoid recalculation on every render
+    const selectedCollection = useMemo(() => {
+        return collections?.find((collection: CollectionItem) => collection.id === value);
+    }, [collections, value]);
+
+    // Handle collection selection
+    const handleSelect = useCallback((collection: CollectionItem) => {
+        onChange(collection.id, collection);
+    }, [onChange]);
+
+    // Handle clear selection
+    const handleClear = useCallback(() => {
+        onChange(undefined, undefined);
+    }, [onChange]);
+
+    // Handle search input change
+    const handleSearchChange = useCallback((query: string) => {
+        setSearchQuery(query);
+    }, []);
+
+    // Show error state
     if (error) {
-        return <ErrorBox title='Collection fetch failed'>{error.message}</ErrorBox>
+        return (
+            <ErrorBox title="Collection fetch failed">
+                {error.message}
+            </ErrorBox>
+        );
     }
 
-    // Find the selected collection object from the ID
-    const selectedCollection = value ? collections?.find(col => col.id === value) : undefined;
-
-    const handleChange = (collection: any) => {
-        // Call onChange with both the ID and the full collection object
-        onChange(collection?.id, collection);
-    };
+    const hasSearchQuery = searchQuery.trim().length > 0;
+    const showClearOption = selectedCollection && hasSearchQuery;
 
     return (
-        <VSelectBox
-            filterBy={"name"}
-            value={selectedCollection}
-            onChange={handleChange}
-            placeholder="Select a collection"
-            options={collections || []}
-            optionLabel={(col: any) => col.name}
-            by="id"
-            className={className}
-            disabled={disabled}
-        />
+        <Popover>
+            <PopoverTrigger asChild>
+                <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-haspopup="listbox"
+                    className={cn("w-full justify-between min-w-0")}
+                    disabled={disabled}
+                >
+                    <span className="truncate flex-1 text-left min-w-0">
+                        {selectedCollection ? selectedCollection.name : placeholder}
+                    </span>
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="mt-2 mb-2 w-[var(--radix-popover-trigger-width)] p-0" align="start">
+                <Command shouldFilter={false}>
+                    <div className="flex justify-between items-center border-b px-3" cmdk-input-wrapper="">
+                        <CommandInput
+                            placeholder={searchPlaceholder}
+                            value={searchQuery}
+                            onValueChange={handleSearchChange}
+                            className="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                        />
+                        {
+                            isSearching && (
+                                <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+                            )
+                        }
+                    </div>
+                    <CommandEmpty>
+                        {
+                            isSearching
+                                ? "Searching..."
+                                : hasSearchQuery
+                                    ? "No collections found."
+                                    : "No collections available."
+                        }
+                    </CommandEmpty>
+                    <CommandGroup className="max-h-[300px] overflow-auto">
+                        {
+                            showClearOption && (
+                                <CommandItem
+                                    value="__clear__"
+                                    onSelect={handleClear}
+                                    className="text-muted-foreground"
+                                >
+                                    Clear selection
+                                </CommandItem>
+                            )
+                        }
+                        {
+                            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"
+                                        )}
+                                    />
+                                </CommandItem>
+                            ))
+                        }
+                    </CommandGroup>
+                </Command>
+            </PopoverContent>
+        </Popover>
     );
-}
+}

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

@@ -1,7 +1,6 @@
 import { useRef, useState, useEffect } from "react";
 import { ColumnLayout, ContentObject, ContentObjectItem, ComplexSearchQuery } from '@vertesia/common';
 import {
-   
     Button, Divider, ErrorBox, SidePanel, Spinner, useIntersectionObserver, useToast,
     FilterProvider, FilterBtn, FilterBar, FilterClear, Filter as BaseFilter
 } from '@vertesia/ui/core';
@@ -102,7 +101,7 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
     const [filters, setFilters] = useState<BaseFilter[]>([]);
 
     const loadMoreRef = useRef<HTMLDivElement>(null);
-    
+
     // Trigger initial search when component mounts
     useEffect(() => {
         if (!isReady && objects.length === 0) {
@@ -151,10 +150,14 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
         } else if (query && query.full_text) {
             search.query.full_text = query.full_text;
             search.search().then(() => setIsReady(true));
-        } else {
-            delete search.query.vector;
-            delete search.query.full_text;
-            search.search().then(() => setIsReady(true));
+        } else if (query === undefined) {
+            // Only clear search if this is a user-initiated clear (not initialization)
+            // The VectorSearchWidget calls onChange(undefined) during initialization
+            if (isReady) {
+                delete search.query.vector;
+                delete search.query.full_text;
+                search.search().then(() => setIsReady(true));
+            }
         }
     };
 
@@ -207,47 +210,49 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
             {
                 error && <ErrorBox title="Error">{error.message}</ErrorBox>
             }
-            {
-                allowFilter && (
-                    <FilterProvider
-                        filterGroups={filterGroups}
-                        filters={filters}
-                        setFilters={handleFilterChange}
-                    >
+            <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 && (
                         <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" />
+                                    allowSearch && <VectorSearchWidget onChange={handleVectorSearch} isLoading={isLoading} refresh={refreshTrigger} />
                                 }
-                                <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 && (
-                    <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>
             <DocumentTable
                 objects={objects}
                 isLoading={!objects.length && isLoading}