@vertesia/ui 0.78.0 → 0.79.1

package/src/features/facets/PromptsFacetsNav.tsx

@@ -0,0 +1,110 @@
+import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
+import { useState } from 'react';
+import { SearchInterface } from './utils/SearchInterface';
+
+interface PromptsFacetsNavProps {
+    facets: {
+        role?: any[];
+        status?: any[];
+        tags?: any[];
+    };
+    search: SearchInterface;
+}
+
+// Hook to create filter groups for prompts
+export function usePromptsFilterGroups(facets: PromptsFacetsNavProps['facets']): FilterGroup[] {
+    void facets;
+    const customFilterGroups: FilterGroup[] = [];
+
+    // Add name filter as text type
+    const nameFilterGroup = {
+        name: 'name',
+        placeholder: 'Name',
+        type: 'text' as const,
+        multiple: false
+    };
+    customFilterGroups.push(nameFilterGroup);
+
+    // Add role filter as select type if role facets are available
+    if (facets.role && facets.role.length > 0) {
+        const rolesFilterGroup = {
+            name: 'role',
+            placeholder: 'Role',
+            type: 'select' as const,
+            options: facets.role.map((facet: { _id: string; count: number }) => ({
+                label: facet._id,
+                value: facet._id,
+                count: facet.count
+            })),
+        };
+        customFilterGroups.push(rolesFilterGroup);
+    }
+
+    return customFilterGroups;
+}
+
+// Hook to create filter change handler for prompts
+export function usePromptsFilterHandler(search: SearchInterface) {
+    return (newFilters: BaseFilter[]) => {
+        if (newFilters.length === 0) {
+            // Clear filters without applying defaults - user wants to remove all filters
+            search.clearFilters(true, false);
+            return;
+        }
+
+        // Clear all filters first without defaults, then apply new ones
+        search.clearFilters(false, 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();
+    };
+}
+
+// Component for prompts filtering
+export function PromptsFacetsNav({ facets, search }: PromptsFacetsNavProps) {
+    const [filters, setFilters] = useState<BaseFilter[]>([]);
+    const filterGroups = usePromptsFilterGroups(facets);
+    const handleFilterLogic = usePromptsFilterHandler(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/RunsFacetsNav.tsx

@@ -1,10 +1,11 @@
-import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
+import { Button, 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';
+import { VEnvironmentFacet } from './utils/VEnvironmentFacet';
+import { VInteractionFacet } from './utils/VInteractionFacet';
+import { VStringFacet } from './utils/VStringFacet';
+import { VUserFacet } from './utils/VUserFacet';
+import { SearchInterface } from './utils/SearchInterface';
+import { RefreshCw } from 'lucide-react';
 
 interface RunsFacetsNavProps {
     facets: {
@@ -24,6 +25,14 @@ interface RunsFacetsNavProps {
 export function useRunsFilterGroups(facets: RunsFacetsNavProps['facets']): FilterGroup[] {
     const customFilterGroups: FilterGroup[] = [];
 
+    const runIdFilterGroup = {
+        name: 'run_ids',
+        placeholder: 'Run ID',
+        type: 'text' as const,
+        multiple: false
+    };
+    customFilterGroups.push(runIdFilterGroup);
+
     if (facets.interactions) {
         const interactionFilterGroup = VInteractionFacet({
             buckets: facets.interactions || [],
@@ -108,6 +117,14 @@ export function useRunsFilterGroups(facets: RunsFacetsNavProps['facets']): Filte
     };
     customFilterGroups.push(dateBeforeFilterGroup);
 
+    const workflowRunIdFilterGroup = {
+        name: 'workflow_run_ids',
+        placeholder: 'Workflow Run ID',
+        type: 'text' as const,
+        multiple: false
+    };
+    customFilterGroups.push(workflowRunIdFilterGroup);
+
     return customFilterGroups;
 }
 
@@ -130,18 +147,23 @@ export function useRunsFilterHandler(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;
                 }
 
+                // Force array format for backend fields that expect arrays
+                if ((filterName === 'run_ids' || filterName === 'workflow_run_ids') && !Array.isArray(filterValue)) {
+                    filterValue = [filterValue];
+                }
+
                 search.query[filterName] = filterValue;
             }
         });
@@ -162,14 +184,23 @@ export function RunsFacetsNav({ facets, search }: RunsFacetsNavProps) {
         handleFilterLogic(newFilters);
     };
 
+    const handleRefetch = () => {
+        search.search();
+    }
+
     return (
         <FilterProvider
             filterGroups={filterGroups}
             filters={filters}
             setFilters={handleFilterChange}
         >
-            <div className="flex gap-2 items-center">
+            <div className='flex justify-between mb-1'>
                 <FilterBtn />
+                <Button onClick={handleRefetch} variant='outline' title="Refresh">
+                    <RefreshCw className="size-5" />
+                </Button>
+            </div>
+            <div className='flex gap-2 items-center'>
                 <FilterBar />
                 <FilterClear />
             </div>

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/src/features/facets/utils/SearchInterface.tsx

@@ -0,0 +1,12 @@
+interface defaultKeys {
+    [key: string]: string;
+}
+export interface SearchInterface {
+    getFilterValue(name: string): any;
+    setFilterValue(name: string, value: any): void;
+    clearFilters(autoSearch?: boolean, applyDefaults?: boolean): void;
+    search(applyDefaults?: boolean): Promise<boolean | undefined>;
+    setDefaultKeys(keys: defaultKeys[]): void;
+    readonly isRunning: boolean;
+    query: Record<string, any>;
+}

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

@@ -1,9 +1,10 @@
 import { FacetBucket } from "@vertesia/common";
 import { FilterGroup } from "@vertesia/ui/core";
+import { TypeRegistry } from "@vertesia/ui/session";
 
 interface VTypeFacetProps {
     buckets: FacetBucket[];
-    typeRegistry: any;
+    typeRegistry?: TypeRegistry;
     type?: 'select';
     multiple?: boolean;
 }
@@ -11,6 +12,9 @@ interface 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();
+    if (!typeRegistry) {
+        console.warn("Type names cannot be resolved");
+    }
     buckets.forEach((bucket) => {
         let name;
         let typeId = bucket._id;
@@ -19,7 +23,7 @@ export function VTypeFacet({ buckets, typeRegistry, type = 'select', multiple =
             typeId = "Document";
             name = "Document";
         } else {
-            name = typeRegistry.getTypeName(bucket._id);
+            name = typeRegistry?.getTypeName(bucket._id);
             if (!name) {
                 console.warn("Content Object Type not found", bucket._id);
                 name = bucket._id;
@@ -33,10 +37,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/layout/GenericPageNavHeader.tsx

@@ -2,7 +2,9 @@ import clsx from 'clsx';
 import { ReactElement, ReactNode } from 'react';
 
 import { ChevronRight, Info } from 'lucide-react';
-import { VTooltip } from '@vertesia/ui/core';
+import { VTooltip, Breadcrumbs } from '@vertesia/ui/core';
+import { capitalize } from 'lodash-es';
+import { useNavigate } from '@vertesia/ui/router';
 
 interface GenericPageNavHeaderProps {
     title: string | ReactElement;
@@ -12,22 +14,83 @@ interface GenericPageNavHeaderProps {
     isCompact?: boolean
     children?: ReactNode
     className?: string
+    useDynamicBreadcrumbs?: boolean;
 }
 
-export function GenericPageNavHeader({ className, children, title, description, actions, breadcrumbs, isCompact = false }: GenericPageNavHeaderProps) {
+export function GenericPageNavHeader({ className, children, title, description, actions, breadcrumbs, isCompact = false, useDynamicBreadcrumbs = true }: GenericPageNavHeaderProps) {
+    const navigate = useNavigate();
+
+    const buildBreadcrumbLabel = (entry: any): string => {
+        const href = entry?.href || '';
+        if (!href) return 'Page';
+        
+        const cleanHref = href.split('#')[0].split('?')[0];
+        const pathSegments: string[] = (cleanHref as string).split('/').filter((segment: string) => segment.length > 0);
+        
+        if (pathSegments.length === 3) {
+            const secondSegment = pathSegments[1];
+            return `${capitalize(secondSegment)} Detail`;
+        } else if (pathSegments.length >= 2) {
+            return capitalize(pathSegments[pathSegments.length - 1]);
+        } else if (pathSegments.length === 1) {
+            return capitalize(pathSegments[0]);
+        }
+        
+        return 'Page';
+    }
+
+    // Build breadcrumb items from history chain and current breadcrumbs
+    const buildBreadcrumbItems = (): Array<{ label: string, href?: string, onClick?: () => void }> => {
+        const items: Array<{ label: string, href?: string, onClick?: () => void, clearHistory?: boolean }> = [];
+
+        // Add items from history chain
+        if (useDynamicBreadcrumbs && typeof window !== 'undefined' && window.history.state?.historyChain) {
+            const historyChain = window.history.state.historyChain;
+            historyChain.forEach((entry: any, index: number) => {
+                const stepsBack = historyChain.length - index;
+                items.push({
+                    label: buildBreadcrumbLabel(entry),
+                    href: entry.href,
+                    onClick: () => window.history.go(-stepsBack)
+                });
+            });
+        }
+
+        // Add current page breadcrumbs
+        if (breadcrumbs && breadcrumbs.length > 0) {
+            breadcrumbs.forEach((breadcrumb: any) => {
+                // Extract text content from React element
+                const label = typeof breadcrumb?.props?.children === 'string'
+                    ? breadcrumb.props.children
+                    : 'Page';
+
+                items.push(( breadcrumb?.props?.href ) ? {
+                    href: breadcrumb?.props?.href,
+                    label: label,
+                    onClick: () => navigate(breadcrumb.props.href, { replace: breadcrumb.props.clearBreadcrumbs }),
+                } : {
+                    label: label
+                });
+            });
+        }
+
+        return items;
+    };
+
+    const breadcrumbItems = buildBreadcrumbItems();
+
     return (
         <div className={clsx(isCompact ? 'pb-0' : 'pb-2', 'p-4 flex flex-col', className)}>
             <div className='flex items-start gap-4'>
                 <div className="w-full flex place-content-between h-auto min-h-8 flex-col items-start">
                     <nav className="flex-1 flex justify-start text-xs">
-                        {breadcrumbs?.map((breadcrumb, index) => {
-                            return (
-                                <div className="flex items-center text-muted" key={index}>
-                                    {breadcrumb}
-                                    {index < breadcrumbs.length - 1 && <ChevronRight className="w-3.5 h-3.5" />}
-                                </div>
-                            )
-                        })}
+                        {breadcrumbItems.length > 0 && (
+                            <Breadcrumbs
+                                path={breadcrumbItems}
+                                separator={<ChevronRight className="w-3.5 h-3.5" />}
+                                maxItems={4}
+                            />
+                        )}
                     </nav>
                     <div className='flex gap-2 items-center'>
                         <h1 className="text-xl font-semibold break-all">{title}</h1>

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

@@ -2,6 +2,7 @@ import { useUserSession, TypeRegistry } from "@vertesia/ui/session";
 import { Collection } from "@vertesia/common";
 import { DocumentSearchResultsWithDropZone, DocumentSearchResults } from "../objects/DocumentSearchResults";
 import { useToast } from "@vertesia/ui/core";
+import { useDocumentSearch } from "../objects/search/DocumentSearchContext";
 
 
 interface BrowseCollectionViewProps {
@@ -10,6 +11,9 @@ interface BrowseCollectionViewProps {
 export function BrowseCollectionView({ collection }: BrowseCollectionViewProps) {
     const toast = useToast();
     const { client, typeRegistry } = useUserSession();
+    const search = useDocumentSearch();
+    search.query.all_revisions = true;
+    
     const onUploadDone = async (objectIds: string[]) => {
         if (objectIds.length > 0) {
             await client.store.collections.addMembers(collection.id, objectIds).catch(err => {

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

@@ -1,5 +1,5 @@
 import { CreateCollectionPayload } from "@vertesia/common";
-import { useToast, VModalBody, FormItem, Styles, VModalFooter, Input, Switch, Button, VModal, VModalTitle } from "@vertesia/ui/core";
+import { useToast, VModalBody, FormItem, VModalFooter, Input, Switch, Button, VModal, VModalTitle, Textarea } from "@vertesia/ui/core";
 import { SelectContentType } from "../types/SelectContentType";
 import { useNavigate } from "@vertesia/ui/router";
 import { useUserSession } from "@vertesia/ui/session";
@@ -80,10 +80,9 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
                     <Input type="text" value={payload.name || ""} onChange={(value) => setPayloadProp("name", value)} />
                 </FormItem>
                 <FormItem label="Description" className="mt-2">
-                    <textarea
-                        className={Styles.INPUT}
+                    <Textarea
                         value={payload.description || ""}
-                        onChange={(ev) => setPayloadProp("description", ev.target.value)}
+                        onChange={(ev) => setPayloadProp("description", ev)}
                     />
                 </FormItem>
                 <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.">