@vertesia/ui 0.77.0 → 0.78.0-dev-28b447d

package/src/features/facets/WorkflowExecutionsFacetsNav.tsx

@@ -1,8 +1,8 @@
 import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
 import { useState } from 'react';
-import { VStringFacet } from './VStringFacet';
-import { VUserFacet } from './VUserFacet';
-import { SearchInterface } from './VFacetsNav';
+import { VStringFacet } from './utils/VStringFacet';
+import { VUserFacet } from './utils/VUserFacet';
+import { SearchInterface } from './utils/SearchInterface';
 
 interface WorkflowExecutionsFacetsNavProps {
     facets: {
@@ -17,7 +17,7 @@ export function useWorkflowExecutionsFilterGroups(facets: WorkflowExecutionsFace
     const customFilterGroups: FilterGroup[] = [];
 
     customFilterGroups.push({
-        placeholder: 'Search by Workflow or Run ID',
+        placeholder: 'Workflow or Run ID',
         name: 'name',
         type: 'text',
         options: [],
@@ -27,7 +27,8 @@ export function useWorkflowExecutionsFilterGroups(facets: WorkflowExecutionsFace
         const statusFilterGroup = VStringFacet({
             search: null as any, // This will be provided by the search context
             buckets: facets.status || [],
-            name: 'Status'
+            name: 'status',
+            placeholder: 'Status'
         });
         customFilterGroups.push(statusFilterGroup);
     }
@@ -35,7 +36,8 @@ export function useWorkflowExecutionsFilterGroups(facets: WorkflowExecutionsFace
     if (facets.initiated_by) {
         const initiatedByFilterGroup = VUserFacet({
             buckets: facets.initiated_by || [],
-            name: 'User'
+            name: 'initiated_by',
+            placeholder: 'Initiated By'
         });
         customFilterGroups.push(initiatedByFilterGroup);
     }
@@ -76,14 +78,14 @@ export function useWorkflowExecutionsFilterHandler(search: SearchInterface) {
                 if (filter.type === 'stringList') {
                     filterValue = filter.value.map(v => typeof v === 'string' ? v : v.value);
                 } else if (filter.multiple) {
-                    filterValue = Array.isArray(filter.value) 
+                    filterValue = Array.isArray(filter.value)
                         ? filter.value.map((v: any) => typeof v === 'object' && v.value ? v.value : v)
                         : [typeof filter.value === 'object' && (filter.value as any).value ? (filter.value as any).value : filter.value];
                 } else {
                     // Single value - don't wrap in array
                     filterValue = Array.isArray(filter.value) && filter.value[0] && typeof filter.value[0] === 'object'
                         ? (filter.value[0] as any).value
-                        : Array.isArray(filter.value) && filter.value[0] 
+                        : Array.isArray(filter.value) && filter.value[0]
                             ? filter.value[0]
                             : filter.value;
                 }

package/src/features/facets/index.ts

@@ -1,14 +1,16 @@
-export { EnvironmentFacet } from "./EnvironmentFacet";
-export * from "./FacetsNav";
-export { StringFacet } from "./StringFacet";
-export { StringListFacet } from "./StringListFacet";
-export { TypeFacet } from "./TypeFacet";
+export * from "./utils/SearchInterface";
 
-export * from "./VFacetsNav";
-export { VStringFacet } from "./VStringFacet";
-export { VTypeFacet } from "./VTypeFacet";
-export { VUserFacet } from "./VUserFacet";
+export { StringFacet } from "./utils/StringFacet";
+export { StringListFacet } from "./utils/StringListFacet";
+export { TypeFacet } from "./utils/TypeFacet";
+export { VStringFacet } from "./utils/VStringFacet";
+export { VTypeFacet } from "./utils/VTypeFacet";
+export { VUserFacet } from "./utils/VUserFacet";
 
+export { EnvironmentFacet } from "./EnvironmentFacet";
 export { RunsFacetsNav, useRunsFilterGroups, useRunsFilterHandler } from "./RunsFacetsNav";
 export { WorkflowExecutionsFacetsNav, useWorkflowExecutionsFilterGroups, useWorkflowExecutionsFilterHandler } from "./WorkflowExecutionsFacetsNav";
 export { DocumentsFacetsNav, useDocumentFilterGroups, useDocumentFilterHandler } from "./DocumentsFacetsNav";
+export { InteractionsFacetsNav, useInteractionsFilterGroups, useInteractionsFilterHandler } from "./InteractionsFacetsNav";
+export { PromptsFacetsNav, usePromptsFilterGroups, usePromptsFilterHandler } from "./PromptsFacetsNav";
+export { CollectionsFacetsNav, useCollectionsFilterGroups, useCollectionsFilterHandler } from "./CollectionsFacetsNav";

package/{lib/types/features/facets/VFacetsNav.d.ts → src/features/facets/utils/SearchInterface.tsx}

@@ -6,11 +6,3 @@ export interface SearchInterface {
     readonly isRunning: boolean;
     query: Record<string, any>;
 }
-interface FacetsNavProps {
-    facets: any;
-    search: SearchInterface;
-    textSearch?: string;
-}
-export declare function VFacetsNav({ search, textSearch }: FacetsNavProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=VFacetsNav.d.ts.map

package/src/features/facets/{VTypeFacet.tsx → utils/VTypeFacet.tsx}

@@ -33,10 +33,13 @@ export function VTypeFacet({ buckets, typeRegistry, type = 'select', multiple =
     });
 
     const options = buckets.map((bucket) => {
-        const typeId = bucket._id || "Document";
+        const actualId = bucket._id;
+        const displayKey = actualId || "Document";
+        const typeData = typeDataMap.get(displayKey);
+        
         return {
-            value: typeId,
-            label: `(${bucket.count})`
+            value: actualId,
+            label: typeData ? `${typeData.name} (${typeData.count})` : `Unknown (${bucket.count})`
         };
     });
 

package/src/features/facets/{VUserFacet.tsx → utils/VUserFacet.tsx}

@@ -1,6 +1,6 @@
 import { FacetBucket } from '@vertesia/common';
 import { FilterGroup } from '@vertesia/ui/core';
-import { UserInfo } from '../user/UserInfo';
+import { UserInfo } from '../../user/UserInfo';
 
 interface UserFacetProps {
     buckets: FacetBucket[];

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

@@ -42,7 +42,19 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
     }, [collection.table_layout]);
 
     const onSubmit = () => {
-        const query = metadata.query ? JSON.parse(metadata.query) : undefined;
+        let query: any = undefined;
+        try {
+            query = metadata.query ? JSON.parse(metadata.query) : undefined;
+        } catch (err: any) {
+            toast({
+                title: "Invalid Query JSON",
+                description: err.message,
+                status: "error",
+                duration: 5000,
+            });
+            return;
+        }
+        
         const payload: Partial<CreateCollectionPayload> = {
             name: metadata.name,
             description: metadata.description,
@@ -65,6 +77,7 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
                 status: "error",
                 duration: 5000,
             });
+            return;
         }
         if (tableLayoutRef.current) {
             const layout = tableLayoutRef.current.getValue();

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 } from "react";
+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';
@@ -12,6 +11,7 @@ import { useDocumentFilterGroups, useDocumentFilterHandler } from "../../facets/
 import { VectorSearchWidget } from './components/VectorSearchWidget';
 import { ContentDispositionButton } from './components/ContentDispositionButton';
 import { DocumentTable } from './DocumentTable';
+import { ExtendedColumnLayout } from './layout/DocumentTableColumn';
 import { useDocumentSearch, useWatchDocumentSearchFacets, useWatchDocumentSearchResult } from './search/DocumentSearchContext';
 import { useDocumentUploadHandler } from './upload/useUploadHandler';
 import { ContentOverview } from './components/ContentOverview';
@@ -27,7 +27,13 @@ const defaultLayout: ColumnLayout[] = [
 
 function getTableLayout(registry: TypeRegistry, type: string | undefined): ColumnLayout[] {
     const layout = type ? registry.getTypeLayout(type) : defaultLayout;
-    return layout ?? defaultLayout;
+    console.log('[DEBUG] getTableLayout called with type:', type);
+    console.log('[DEBUG] Layout from registry:', layout);
+    console.log('[DEBUG] Using defaultLayout?', layout === defaultLayout);
+    const result = layout ?? defaultLayout;
+    console.log('[DEBUG] Final layout:', result);
+    console.log('[DEBUG] Has Status field?', result.some(col => col.field === 'status'));
+    return result;
 }
 
 interface DocumentSearchResultsWithDropZoneProps {
@@ -91,9 +97,17 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
     const [selectedObject, setSelectedObject] = useState<ContentObjectItem | null>(null);
     const { typeRegistry } = useUserSession();
     const { search, isLoading, error, objects } = useWatchDocumentSearchResult();
+
+    console.log('[DEBUG] DocumentSearchResults - layout prop:', layout);
+    console.log('[DEBUG] DocumentSearchResults - search.query.type:', search.query.type);
+    console.log('[DEBUG] DocumentSearchResults - typeRegistry exists?', !!typeRegistry);
+
     const [actualLayout, setActualLayout] = useState<ColumnLayout[]>(
         typeRegistry ? layout || getTableLayout(typeRegistry, search.query.type) : defaultLayout,
     );
+
+    console.log('[DEBUG] DocumentSearchResults - actualLayout:', actualLayout);
+    console.log('[DEBUG] DocumentSearchResults - actualLayout has Status?', actualLayout.some(col => col.field === 'status'));
     //TODO _setRefreshTrigger state not used
     const [refreshTrigger, _setRefreshTrigger] = useState(0);
     const [loaded, setLoaded] = useState(0);
@@ -101,6 +115,21 @@ 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) {
+            // Manually set loading state to show spinner during initial load
+            search._updateRunningState(true);
+            search.search().then(() => {
+                setIsReady(true);
+            }).catch(err => {
+                console.error('Initial search failed:', err);
+                search._updateRunningState(false);
+            });
+        }
+    }, []);
+
     useIntersectionObserver(loadMoreRef, () => {
         if (isReady && objects.length > 0 && objects.length != loaded) {
             setIsReady(false);
@@ -126,7 +155,8 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
                     {
                         name: "Search Score",
                         field: "score",
-                    } satisfies ColumnLayout,
+                        render: (item) => (item as any).score?.toFixed(4) || "0.0000"
+                    } satisfies ExtendedColumnLayout,
                 ];
                 setActualLayout(layout);
             }
@@ -134,10 +164,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));
+            }
         }
     };
 
@@ -190,47 +224,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}