@vertesia/ui 0.79.0 → 0.79.1

package/src/features/facets/CollectionsFacetsNav.tsx

@@ -1,6 +1,7 @@
 import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
 import { useState } from 'react';
 import { SearchInterface } from './utils/SearchInterface';
+import { useUserSession } from '@vertesia/ui/session';
 
 interface CollectionsFacetsNavProps {
     facets: {
@@ -13,6 +14,8 @@ interface CollectionsFacetsNavProps {
 // Hook to create filter groups for collections
 export function useCollectionsFilterGroups(facets: CollectionsFacetsNavProps['facets']): FilterGroup[] {
     void facets;
+    const { typeRegistry } = useUserSession();
+
     const customFilterGroups: FilterGroup[] = [];
 
     // Add name filter as text type
@@ -24,6 +27,24 @@ export function useCollectionsFilterGroups(facets: CollectionsFacetsNavProps['fa
     };
     customFilterGroups.push(nameFilterGroup);
 
+    // add type filter as select type
+    if (typeRegistry) {
+        const typeOptions = typeRegistry.types.map(type => {
+            return {
+                label: type.name,
+                value: type.id
+            }
+        });
+        const typeFilterGroup = {
+            name: 'types',
+            placeholder: 'Type',
+            type: 'select' as const,
+            multiple: true,
+            options: typeOptions
+        };
+        customFilterGroups.push(typeFilterGroup);
+    }
+
     return customFilterGroups;
 }
 

package/src/features/facets/InteractionsFacetsNav.tsx

@@ -7,6 +7,7 @@ interface InteractionsFacetsNavProps {
         tags?: any[];
     };
     search: SearchInterface;
+    env?: string | null;
 }
 
 // Hook to create filter groups for interactions
@@ -32,6 +33,14 @@ export function useInteractionsFilterGroups(facets: InteractionsFacetsNavProps['
     };
     customFilterGroups.push(promptNameFilterGroup);
 
+    const ModelFilterGroup = {
+        name: 'model',
+        placeholder: 'Model',
+        type: 'text' as const,
+        multiple: false
+    };
+    customFilterGroups.push(ModelFilterGroup);
+
     // Add tags filter as stringList type (allows custom input)
     const tagsFilterGroup = {
         name: 'tags',
@@ -46,10 +55,11 @@ export function useInteractionsFilterGroups(facets: InteractionsFacetsNavProps['
 
 // Hook to create filter change handler for interactions
 export function useInteractionsFilterHandler(search: SearchInterface) {
+
     return (newFilters: BaseFilter[]) => {
         if (newFilters.length === 0) {
-            // Clear filters without applying defaults - user wants to remove all filters
-            search.clearFilters(true, false);
+            search.clearFilters(true, true);
+
             return;
         }
 
@@ -79,7 +89,7 @@ export function useInteractionsFilterHandler(search: SearchInterface) {
             }
         });
 
-        search.search();
+        search.search(true);
     };
 }
 

package/src/features/facets/utils/SearchInterface.tsx

@@ -1,8 +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(): Promise<boolean | undefined>;
+    search(applyDefaults?: boolean): Promise<boolean | undefined>;
+    setDefaultKeys(keys: defaultKeys[]): void;
     readonly isRunning: boolean;
     query: Record<string, any>;
 }

package/src/features/facets/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;

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.">

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

@@ -1,10 +1,12 @@
 import { json } from "@codemirror/lang-json";
-import { Collection, CreateCollectionPayload } from "@vertesia/common";
-import { Button, ErrorBox, FormItem, Input, Styles, useFetch, useToast } from "@vertesia/ui/core";
-import { useUserSession } from "@vertesia/ui/session";
-import { CodeMirrorEditor, EditorApi, GeneratedForm, ManagedObject } from "@vertesia/ui/widgets";
+import dayjs from "dayjs";
 import { basicSetup } from "codemirror";
 import { useMemo, useRef, useState } from "react";
+import { UserInfo } from "@vertesia/ui/features";
+import { useUserSession } from "@vertesia/ui/session";
+import { Collection, CreateCollectionPayload } from "@vertesia/common";
+import { CodeMirrorEditor, EditorApi, GeneratedForm, ManagedObject } from "@vertesia/ui/widgets";
+import { Button, ErrorBox, FormItem, Input, Styles, Textarea, useFetch, useToast, Panel } from "@vertesia/ui/core";
 import { SelectContentType, stringifyTableLayout } from "../types";
 
 const extensions = [basicSetup, json()];
@@ -54,7 +56,7 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
             });
             return;
         }
-        
+
         const payload: Partial<CreateCollectionPayload> = {
             name: metadata.name,
             description: metadata.description,
@@ -131,61 +133,82 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
 
     return (
         <div className="flex flex-col gap-4 py-2">
-            <FormItem label="Name" required>
-                <Input value={metadata.name} onChange={(v) => setField("name", v)} />
-            </FormItem>
-            <FormItem label="Description">
-                <textarea
-                    className={Styles.INPUT}
-                    value={metadata.description}
-                    onChange={(e) => setField("description", e.target.value)}
-                />
-            </FormItem>
-            {
-                !collection.dynamic &&
-                <FormItem label="Allowed Content Types" description="Select which content types can be added to the collection. If not set, then all content types are allowed.">
+            <Panel title="Configuration"
+                action={
+                    <Button size="lg" isDisabled={isUpdating} onClick={onSubmit}>
+                        Save
+                    </Button>
+                }>
+                <div className="flex justify-between mb-2">
+                    <div className="w-1/2 gap-2 flex flex-col">
+                        <div className="text-sm font-medium mb-1">Created By</div>
+                        <div className="gap-2 flex items-center">
+                            <UserInfo userRef={collection.created_by} showTitle />
+                            <span>at {dayjs(collection.created_at).format("YYYY-MM-DD HH:mm:ss")}</span>
+                        </div>
+                    </div>
+                    <div className="w-1/2 gap-2 flex flex-col">
+                        <div className="text-sm font-medium mb-1">Updated By</div>
+                        <div className="gap-2 flex items-center">
+                            <UserInfo userRef={collection.updated_by} showTitle />
+                            <span>at {dayjs(collection.updated_at).format("YYYY-MM-DD HH:mm:ss")}</span>
+                        </div>
+                    </div>
+                </div>
+                <FormItem label="Name" required>
+                    <Input value={metadata.name} onChange={(v) => setField("name", v)} />
+                </FormItem>
+                <FormItem label="Description">
+                    <Textarea
+                        value={metadata.description}
+                        onChange={(e) => setField("description", e)}
+                    />
+                </FormItem>
+                {
+                    !collection.dynamic &&
+                    <FormItem label="Allowed Content Types" description="Select which content types can be added to the collection. If not set, then all content types are allowed.">
+                        <SelectContentType
+                            defaultValue={metadata.allowed_types || null}
+                            onChange={(v) => {
+                                if (Array.isArray(v)) {
+                                    setField("allowed_types", v.map(type => type.id));
+                                } else {
+                                    setField("allowed_types", v ? [v.id] : []);
+                                }
+                            }}
+                            isClearable multiple
+                        />
+                    </FormItem>
+                }
+                {
+                    collection.dynamic && (
+                        <FormItem label="Query" description="Define the query to dynamically fetch content for the collection.">
+                            <Textarea
+                                className={Styles.INPUT}
+                                value={metadata.query}
+                                onChange={(e) => setField("query", e)}
+                            />
+                        </FormItem>
+                    )
+                }
+                <FormItem label="Table Layout" description="Define a custom layout for displaying the collection in tables.">
+                    <CodeMirrorEditor className="border-1 rounded-md border-border"
+                        value={tableLayoutValue} extensions={extensions} editorRef={tableLayoutRef} />
+                </FormItem>
+                <FormItem label="Type" description="Select a content type to assign custom properties and data to the collection.">
                     <SelectContentType
-                        defaultValue={metadata.allowed_types || null}
+                        defaultValue={metadata.type || null}
                         onChange={(v) => {
                             if (Array.isArray(v)) {
-                                setField("allowed_types", v.map(type => type.id));
+                                setField("type", v.length > 0 ? v[0].id : null);
                             } else {
-                                setField("allowed_types", v ? [v.id] : []);
+                                setField("type", v?.id || null);
                             }
                         }}
-                        isClearable multiple
+                        isClearable
                     />
                 </FormItem>
-            }
-            {collection.dynamic && (
-                <FormItem label="Query" description="Define the query to dynamically fetch content for the collection.">
-                    <textarea
-                        className={Styles.INPUT}
-                        value={metadata.query}
-                        onChange={(e) => setField("query", e.target.value)}
-                    />
-                </FormItem>
-            )}
-            <FormItem label="Table Layout" description="Define a custom layout for displaying the collection in tables.">
-                <CodeMirrorEditor className="border-1 rounded-md border-border"
-                    value={tableLayoutValue} extensions={extensions} editorRef={tableLayoutRef} />
-            </FormItem>
-            <FormItem label="Type" description="Select a content type to assign custom properties and data to the collection.">
-                <SelectContentType
-                    defaultValue={metadata.type || null}
-                    onChange={(v) => {
-                        if (Array.isArray(v)) {
-                            setField("type", v.length > 0 ? v[0].id : null);
-                        } else {
-                            setField("type", v?.id || null);
-                        }
-                    }}
-                    isClearable
-                />
-            </FormItem>
-            <Button size="lg" className="w-min my-4" isDisabled={isUpdating} onClick={onSubmit}>
-                Save Metadata
-            </Button>
+            </Panel>
 
             {typeId && <PropertiesEditor typeId={typeId} collection={collection} />}
         </div>
@@ -197,28 +220,22 @@ interface PropertiesEditorProps {
     collection: Collection;
 }
 function PropertiesEditor({ typeId, collection }: PropertiesEditorProps) {
+    const toast = useToast();
     const { client } = useUserSession();
+    const [isUpdating, setIsUpdating] = useState(false);
+
     const { data: type, error } = useFetch(() => client.store.types.retrieve(typeId), [typeId]);
+    const schema = type?.object_schema || {};
+    const object = useMemo(() => new ManagedObject(schema, collection.properties || {}), [schema, collection.properties]);
+
     if (error) {
         return <ErrorBox title="Failed to load type">{error.message}</ErrorBox>;
     }
 
-    return (
-        <Section title="Properties">
-            {type && <PropertiesForm collection={collection} schema={type.object_schema} />}
-        </Section>
-    );
-}
+    if (!type) {
+        return null;
+    }
 
-interface PropertiesFormProps {
-    schema: any;
-    collection: Collection;
-}
-function PropertiesForm({ schema = {}, collection }: PropertiesFormProps) {
-    const { client } = useUserSession();
-    const toast = useToast();
-    const object = useMemo(() => new ManagedObject(schema, collection.properties || {}), [schema, collection]);
-    const [isUpdating, setIsUpdating] = useState(false);
 
     const _onSave = (data: any) => {
         const payload = { properties: data || {} };
@@ -247,23 +264,12 @@ function PropertiesForm({ schema = {}, collection }: PropertiesFormProps) {
     };
 
     return (
-        <GeneratedForm object={object} onSubmit={_onSave}>
-            <Button size="lg" isLoading={isUpdating} className="my-4" variant="primary" type="submit">
-                Save Properties
-            </Button>
-        </GeneratedForm>
-    );
-}
-
-interface SectionProps {
-    children: React.ReactNode;
-    title: string;
-}
-function Section({ children, title }: SectionProps) {
-    return (
-        <div className="my-4">
-            <div className="text-lg text-gray-700 font-semibold border-b border-b-gray-300 py-2 mb-4">{title}</div>
-            {children}
-        </div>
+        <Panel title="Properties" action={
+            <Button size="lg" isLoading={isUpdating} type="submit">
+                Save
+            </Button>}
+        >
+            <GeneratedForm object={object} onSubmit={_onSave} />
+        </Panel>
     );
 }