@vertesia/ui 0.67.0 → 0.68.0

package/src/features/facets/RunsFacetsNav.tsx

@@ -0,0 +1,166 @@
+import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
+import { useState } from 'react';
+import { VEnvironmentFacet } from './VEnvironmentFacet';
+import { VInteractionFacet } from './VInteractionFacet';
+import { VStringFacet } from './VStringFacet';
+import { VUserFacet } from './VUserFacet';
+import { SearchInterface } from './VFacetsNav';
+
+interface RunsFacetsNavProps {
+    facets: {
+        type?: any[];
+        interactions?: any[];
+        environments?: any[];
+        models?: any[];
+        statuses?: any[];
+        finish_reason?: any[];
+        created_by?: any[];
+    };
+    search: SearchInterface;
+}
+
+// Hook to create filter groups for runs
+export function useRunsFilterGroups(facets: RunsFacetsNavProps['facets']): FilterGroup[] {
+    const customFilterGroups: FilterGroup[] = [];
+
+    if (facets.interactions) {
+        const interactionFilterGroup = VInteractionFacet({
+            buckets: facets.interactions || [],
+            name: 'interaction',
+            placeholder: 'Interactions',
+        });
+        customFilterGroups.push(interactionFilterGroup);
+    }
+
+    if (facets.environments) {
+        const environmentFilterGroup = VEnvironmentFacet({
+            buckets: facets.environments || [],
+            name: 'Environments'
+        });
+        customFilterGroups.push(environmentFilterGroup);
+    }
+
+    if (facets.models) {
+        const modelFilterGroup = VStringFacet({
+            search: null as any, // This will be provided by the search context
+            buckets: facets.models || [],
+            name: 'Model'
+        });
+        customFilterGroups.push(modelFilterGroup);
+    }
+
+    if (facets.statuses) {
+        const statusFilterGroup = VStringFacet({
+            search: null as any, // This will be provided by the search context
+            buckets: facets.statuses || [],
+            name: 'Status'
+        });
+        customFilterGroups.push(statusFilterGroup);
+    }
+
+    if (facets.finish_reason) {
+        const processedFinishReason = facets.finish_reason.map((bucket: any) => ({
+            ...bucket,
+            _id: bucket._id === null ? 'none' : bucket._id
+        }));
+
+        const finishReasonFilterGroup = VStringFacet({
+            search: null as any, // This will be provided by the search context
+            buckets: processedFinishReason,
+            name: 'finish_reason',
+            placeholder: 'Finish Reason'
+        });
+        customFilterGroups.push(finishReasonFilterGroup);
+    }
+
+    if (facets.created_by) {
+        const createdByFilterGroup = VUserFacet({
+            buckets: facets.created_by || [],
+            name: 'created_by',
+            placeholder: 'Created By'
+        });
+        customFilterGroups.push(createdByFilterGroup);
+    }
+
+    const dateAfterFilterGroup = {
+        name: 'start',
+        placeholder: 'Date After',
+        type: 'date' as const,
+        multiple: false
+    };
+    customFilterGroups.push(dateAfterFilterGroup);
+
+    const dateBeforeFilterGroup = {
+        name: 'end',
+        placeholder: 'Date Before',
+        type: 'date' as const,
+        multiple: false
+    };
+    customFilterGroups.push(dateBeforeFilterGroup);
+
+    return customFilterGroups;
+}
+
+// Hook to create filter change handler for runs
+export function useRunsFilterHandler(search: SearchInterface) {
+    return (newFilters: BaseFilter[]) => {
+        if (newFilters.length === 0) {
+            search.clearFilters();
+            return;
+        }
+
+        search.clearFilters(false);
+
+        newFilters.forEach(filter => {
+            if (filter.value && filter.value.length > 0) {
+                const filterName = filter.name;
+                let filterValue;
+                if (filter.type === 'stringList') {
+                    filterValue = filter.value.map(v => typeof v === 'string' ? v : v.value);
+                } else if (filter.multiple) {
+                    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] 
+                            ? filter.value[0]
+                            : filter.value;
+                }
+
+                search.query[filterName] = filterValue;
+            }
+        });
+
+        search.search();
+    };
+}
+
+// Legacy component for backward compatibility
+export function RunsFacetsNav({ facets, search }: RunsFacetsNavProps) {
+    const [filters, setFilters] = useState<BaseFilter[]>([]);
+    const filterGroups = useRunsFilterGroups(facets);
+    const handleFilterLogic = useRunsFilterHandler(search);
+
+    const handleFilterChange: React.Dispatch<React.SetStateAction<BaseFilter[]>> = (value) => {
+        const newFilters = typeof value === 'function' ? value(filters) : value;
+        setFilters(newFilters);
+        handleFilterLogic(newFilters);
+    };
+
+    return (
+        <FilterProvider
+            filterGroups={filterGroups}
+            filters={filters}
+            setFilters={handleFilterChange}
+        >
+            <div className="flex gap-2 items-center">
+                <FilterBtn />
+                <FilterBar />
+                <FilterClear />
+            </div>
+        </FilterProvider>
+    );
+}

package/src/features/facets/VFacetsNav.tsx

@@ -1,11 +1,5 @@
-import { Filter as BaseFilter, FilterBar, FilterGroup } from '@vertesia/ui/core';
-import { useUserSession } from '@vertesia/ui/session';
+import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
 import { useState } from 'react';
-import { VEnvironmentFacet } from './VEnvironmentFacet';
-import { VInteractionFacet } from './VInteractionFacet';
-import { VStringFacet } from './VStringFacet';
-import { VTypeFacet } from './VTypeFacet';
-import { VUserFacet } from './VUserFacet';
 
 export interface SearchInterface {
     getFilterValue(name: string): any;
@@ -21,10 +15,9 @@ interface FacetsNavProps {
     search: SearchInterface;
     textSearch?: string;
 }
-export function VFacetsNav({ facets, search, textSearch = '' }: FacetsNavProps) {
+export function VFacetsNav({ search, textSearch = '' }: FacetsNavProps) {
     const [filters, setFilters] = useState<BaseFilter[]>([]);
     const customFilterGroups: FilterGroup[] = [];
-    const { typeRegistry } = useUserSession();
 
     if (textSearch) {
         customFilterGroups.push({
@@ -35,121 +28,6 @@ export function VFacetsNav({ facets, search, textSearch = '' }: FacetsNavProps)
         });
     }
 
-    if (facets.type) {
-        const typeFilterGroup = VTypeFacet({
-            buckets: facets.type || [],
-            typeRegistry: typeRegistry,
-        });
-        customFilterGroups.push(typeFilterGroup);
-    }
-
-    if (facets.status) {
-        const statusFilterGroup = VStringFacet({
-            search,
-            buckets: facets.status || [],
-            name: 'Status'
-        });
-        customFilterGroups.push(statusFilterGroup);
-    }
-
-    if (facets.role) {
-        const roleFilterGroup = VStringFacet({
-            search,
-            buckets: facets.role || [],
-            name: 'Role'
-        });
-        customFilterGroups.push(roleFilterGroup);
-    }
-
-    if (facets.location) {
-        const locationFilterGroup = VStringFacet({
-            search,
-            buckets: facets.location || [],
-            name: 'Location'
-        });
-        customFilterGroups.push(locationFilterGroup);
-    }
-
-    if (facets.initiated_by) {
-        const initiatedByFilterGroup = VUserFacet({
-            buckets: facets.initiated_by || [],
-            name: 'User'
-        });
-        customFilterGroups.push(initiatedByFilterGroup);
-    }
-
-    /** Run table */
-    if (facets.interactions) {
-        const interactionFilterGroup = VInteractionFacet({
-            buckets: facets.interactions || [],
-            name: 'interaction',
-            placeholder: 'Interactions',
-        });
-        customFilterGroups.push(interactionFilterGroup);
-    }
-
-    if (facets.environments) {
-        const environmentFilterGroup = VEnvironmentFacet({
-            buckets: facets.environments || [],
-            name: 'Environments'
-        });
-        customFilterGroups.push(environmentFilterGroup);
-    }
-
-    if (facets.models) {
-        const modelFilterGroup = VStringFacet({
-            search,
-            buckets: facets.models || [],
-            name: 'Model'
-        });
-        customFilterGroups.push(modelFilterGroup);
-    }
-
-    if (facets.statuses) {
-        const statusFilterGroup = VStringFacet({
-            search,
-            buckets: facets.statuses || [],
-            name: 'Status'
-        });
-        customFilterGroups.push(statusFilterGroup);
-    }
-
-    if (facets.finish_reason) {
-        const processedFinishReason = facets.finish_reason.map((bucket: any) => ({
-            ...bucket,
-            _id: bucket._id === null ? 'none' : bucket._id
-        }));
-
-        const finishReasonFilterGroup = VStringFacet({
-            search,
-            buckets: processedFinishReason,
-            name: 'finish_reason',
-            placeholder: 'Finish Reason'
-        });
-        customFilterGroups.push(finishReasonFilterGroup);
-    }
-
-    if (facets.created_by) {
-        const createdByFilterGroup = VUserFacet({
-            buckets: facets.created_by || [],
-            name: 'created_by',
-            placeholder: 'Created By'
-        });
-        customFilterGroups.push(createdByFilterGroup);
-    }
-    
-    if (facets.tags) {
-        customFilterGroups.push({
-            name: 'Tags',
-            type: 'stringList',
-            options: facets.tags.map((tag: string) => ({
-                label: tag,
-                value: tag
-            }))
-        });
-    }
-    /** Run table */
-
     const handleFilterChange: React.Dispatch<React.SetStateAction<BaseFilter[]>> = (value) => {
 
         const newFilters = typeof value === 'function' ? value(filters) : value;
@@ -188,10 +66,16 @@ export function VFacetsNav({ facets, search, textSearch = '' }: FacetsNavProps)
     };
 
     return (
-        <FilterBar
+        <FilterProvider
             filterGroups={customFilterGroups}
             filters={filters}
             setFilters={handleFilterChange}
-        />
+        >
+            <div className="flex gap-2 items-center">
+                <FilterBtn />
+                <FilterBar />
+                <FilterClear />
+            </div>
+        </FilterProvider>
     )
 }

package/src/features/facets/VStringFacet.tsx

@@ -6,9 +6,11 @@ interface StringFacetProps {
     buckets: FacetBucket[];
     name: string;
     placeholder?: string;
+    type?: 'select';
+    multiple?: boolean;
 }
 
-export function createStringFilterGroup({ buckets, name, placeholder }: StringFacetProps): FilterGroup {
+export function createStringFilterGroup({ buckets, name, placeholder, type = 'select', multiple = false }: StringFacetProps): FilterGroup {
     const options = buckets.map((bucket) => ({
         label: facetOptionLabel(bucket),
         value: bucket._id
@@ -17,19 +19,23 @@ export function createStringFilterGroup({ buckets, name, placeholder }: StringFa
     const filterGroup: FilterGroup = {
         name: name,
         options: options,
-        type: "select",
+        type: type,
+        multiple: multiple,
         placeholder: `${placeholder ?? `${name.charAt(0).toUpperCase() + name.slice(1)}`}`,
+        ...({ allowCreate: false })
     };
 
     return filterGroup;
 }
 
-export function VStringFacet({ buckets, name, placeholder}: {
+export function VStringFacet({ buckets, name, placeholder, type, multiple }: {
     search: any;
     buckets: FacetBucket[];
     name: string;
     placeholder?: string;
     className?: string;
+    type?: 'select';
+    multiple?: boolean;
 }) {
-    return createStringFilterGroup({ buckets, name, placeholder });
+    return createStringFilterGroup({ buckets, name, placeholder, type, multiple });
 }

package/src/features/facets/VTypeFacet.tsx

@@ -4,9 +4,11 @@ import { FilterGroup } from "@vertesia/ui/core";
 interface VTypeFacetProps {
     buckets: FacetBucket[];
     typeRegistry: any;
+    type?: 'select';
+    multiple?: boolean;
 }
 
-export function VTypeFacet({ buckets, typeRegistry }: VTypeFacetProps) {
+export function VTypeFacet({ buckets, typeRegistry, type = 'select', multiple = false }: VTypeFacetProps) {
     // Create a map for quick lookups of type names and counts
     const typeDataMap = new Map();
     buckets.forEach((bucket) => {
@@ -30,19 +32,18 @@ export function VTypeFacet({ buckets, typeRegistry }: VTypeFacetProps) {
         });
     });
 
-    // Create options with just raw values
     const options = buckets.map((bucket) => {
         const typeId = bucket._id || "Document";
         return {
             value: typeId,
-            // Store count as simple fallback label
             label: `(${bucket.count})`
         };
     });
 
     const customFilterGroups: FilterGroup = {
-        name: 'Type',
-        type: 'select',
+        name: 'Types',
+        type: type,
+        multiple: multiple,
         options: options,
         labelRenderer: (typeId: string) => {
             const typeData = typeDataMap.get(typeId);

package/src/features/facets/VUserFacet.tsx

@@ -32,9 +32,11 @@ export function createUserFilterGroup({ buckets, name, placeholder }: UserFacetP
             // For known users, render UserInfo with count
             const bucket = buckets.find(b => b._id === userRef);
             return (
-                <div className="flex items-center justify-between w-full">
-                    <UserInfo userRef={userRef} showTitle={true} size="sm" />
-                    <span className="text-muted-foreground ml-2">({bucket?.count || 0})</span>
+                <div className="flex items-center w-full gap-2">
+                    <div className="flex-1 min-w-0 flex items-center truncate">
+                        <UserInfo userRef={userRef} showTitle={true} size="sm" />
+                    </div>
+                    <span className="text-muted-foreground flex-shrink-0">({bucket?.count || 0})</span>
                 </div>
             );
         },

package/src/features/facets/WorkflowExecutionsFacetsNav.tsx

@@ -0,0 +1,132 @@
+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';
+
+interface WorkflowExecutionsFacetsNavProps {
+    facets: {
+        status?: any[];
+        initiated_by?: any[];
+    };
+    search: SearchInterface;
+}
+
+// Hook to create filter groups for workflow executions
+export function useWorkflowExecutionsFilterGroups(facets: WorkflowExecutionsFacetsNavProps['facets']): FilterGroup[] {
+    const customFilterGroups: FilterGroup[] = [];
+
+    customFilterGroups.push({
+        placeholder: 'Search by Workflow or Run ID',
+        name: 'name',
+        type: 'text',
+        options: [],
+    });
+
+    if (facets.status) {
+        const statusFilterGroup = VStringFacet({
+            search: null as any, // This will be provided by the search context
+            buckets: facets.status || [],
+            name: 'Status'
+        });
+        customFilterGroups.push(statusFilterGroup);
+    }
+
+    if (facets.initiated_by) {
+        const initiatedByFilterGroup = VUserFacet({
+            buckets: facets.initiated_by || [],
+            name: 'User'
+        });
+        customFilterGroups.push(initiatedByFilterGroup);
+    }
+
+    const dateAfterFilterGroup = {
+        name: 'start',
+        placeholder: 'Date After',
+        type: 'date' as const,
+        multiple: false
+    };
+    customFilterGroups.push(dateAfterFilterGroup);
+
+    const dateBeforeFilterGroup = {
+        name: 'end',
+        placeholder: 'Date Before',
+        type: 'date' as const,
+        multiple: false
+    };
+    customFilterGroups.push(dateBeforeFilterGroup);
+
+    return customFilterGroups;
+}
+
+// Hook to create filter change handler for workflow executions
+export function useWorkflowExecutionsFilterHandler(search: SearchInterface) {
+    return (newFilters: BaseFilter[]) => {
+        if (newFilters.length === 0) {
+            search.clearFilters();
+            return;
+        }
+
+        search.clearFilters(false);
+
+        newFilters.forEach(filter => {
+            if (filter.value && filter.value.length > 0) {
+                const filterName = filter.name;
+                let filterValue;
+                if (filter.type === 'stringList') {
+                    filterValue = filter.value.map(v => typeof v === 'string' ? v : v.value);
+                } else if (filter.multiple) {
+                    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] 
+                            ? filter.value[0]
+                            : filter.value;
+                }
+
+                if (filterName === 'name') {
+                    search.query.search_term = filterValue;
+                    search.query.name = filterValue;
+                } else {
+                    search.query[filterName] = filterValue;
+                }
+            }
+        });
+
+        search.search();
+    };
+}
+
+// Legacy component for backward compatibility
+export function WorkflowExecutionsFacetsNav({
+    facets,
+    search,
+}: WorkflowExecutionsFacetsNavProps) {
+    const [filters, setFilters] = useState<BaseFilter[]>([]);
+    const filterGroups = useWorkflowExecutionsFilterGroups(facets);
+    const handleFilterLogic = useWorkflowExecutionsFilterHandler(search);
+
+    const handleFilterChange: React.Dispatch<React.SetStateAction<BaseFilter[]>> = (value) => {
+        const newFilters = typeof value === 'function' ? value(filters) : value;
+        setFilters(newFilters);
+        handleFilterLogic(newFilters);
+    };
+
+    return (
+        <FilterProvider
+            filterGroups={filterGroups}
+            filters={filters}
+            setFilters={handleFilterChange}
+        >
+            <div className="flex gap-2 items-center">
+                <FilterBtn />
+                <FilterBar />
+                <FilterClear />
+            </div>
+        </FilterProvider>
+    );
+}

package/src/features/facets/index.ts

@@ -1,11 +1,14 @@
 export { EnvironmentFacet } from "./EnvironmentFacet";
 export * from "./FacetsNav";
-export { InteractionFacet } from "./InteractionFacet";
 export { StringFacet } from "./StringFacet";
 export { StringListFacet } from "./StringListFacet";
 export { TypeFacet } from "./TypeFacet";
-export { UserFacet } from "./UserFacet";
+
 export * from "./VFacetsNav";
 export { VStringFacet } from "./VStringFacet";
 export { VTypeFacet } from "./VTypeFacet";
 export { VUserFacet } from "./VUserFacet";
+
+export { RunsFacetsNav, useRunsFilterGroups, useRunsFilterHandler } from "./RunsFacetsNav";
+export { WorkflowExecutionsFacetsNav, useWorkflowExecutionsFilterGroups, useWorkflowExecutionsFilterHandler } from "./WorkflowExecutionsFacetsNav";
+export { DocumentsFacetsNav, useDocumentFilterGroups, useDocumentFilterHandler } from "./DocumentsFacetsNav";

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

@@ -18,7 +18,7 @@ export function CollectionsTable({ }: CollectionsTableProps) {
     const [isLoading, setIsLoading] = useState(true);
     const [isOpen, setOpen] = useState(false);
 
-    const { data: collections, error, refetch } = useFetch(() => client.store.collections.list(), []);
+    const { data: collections, error, refetch } = useFetch(() => client.store.collections.search({}), []);
 
     // Update loading state when data is fetched
     useEffect(() => {
@@ -57,7 +57,8 @@ export function CollectionsTable({ }: CollectionsTableProps) {
 
     return (
         <>
-            {collections &&
+            {
+                collections &&
                 (collections.length > 0 ?
                     (<Table className="w-full">
                         <thead>

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

@@ -86,10 +86,25 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
                         onChange={(ev) => setPayloadProp("description", ev.target.value)}
                     />
                 </FormItem>
-                <FormItem label="Dynamic Collection" className="mt-2" direction="row" description="Dynamic Collection is based on a query vs. users manully adding content.">
+                <FormItem label="Dynamic Collection" className="mt-2" direction="row" description="Dynamically fetch content for the collection based on a query. If not enabled, then content must be added by users or agents.">
                     <Switch value={payload.dynamic || false} onChange={(value) => setPayloadProp("dynamic", value)} />
                 </FormItem>
-                <FormItem label="Type" className="mt-2" description="This is optional and drives what properties are used to describe a collection">
+                { !payload.dynamic &&
+                    <FormItem label="Allowed Content Types" className="mt-4" description="Optionally select which content types can be added to the collection. If not set, then all content types are allowed.">
+                        <SelectContentType
+                            defaultValue={payload.allowed_types || null}
+                            onChange={(v) => {
+                                if (Array.isArray(v)) {
+                                    setPayloadProp("allowed_types", v.map(type => type.id));
+                                } else {
+                                    setPayloadProp("allowed_types", v ? [v.id] : []);
+                                }
+                            }}
+                            isClearable multiple
+                        />
+                    </FormItem>
+                }
+                <FormItem label="Type" className="mt-2" description="Optionally select a content type to assign custom properties and data to the collection.">
                     <SelectContentType
                         defaultValue={payload.type || null}
                         onChange={(v) => {
@@ -102,19 +117,6 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
                         isClearable
                     />
                 </FormItem>
-                <FormItem label="Allowed Content Types" className="mt-4">
-                    <SelectContentType
-                        defaultValue={payload.allowed_types || null}
-                        onChange={(v) => {
-                            if (Array.isArray(v)) {
-                                setPayloadProp("allowed_types", v.map(type => type.id));
-                            } else {
-                                setPayloadProp("allowed_types", v ? [v.id] : []);
-                            }
-                        }}
-                        isClearable multiple
-                    />
-                </FormItem>
             </VModalBody>
             <VModalFooter>
                 <Button isDisabled={isProcessing} onClick={onCreate}>