@vertesia/ui 0.60.0 → 0.61.0

package/src/features/facets/EnvironmentFacet.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+
+import { FacetBucket, FacetNameBucket } from '@vertesia/common';
+import { SelectBox } from '@vertesia/ui/core';
+import { useUserSession } from '@vertesia/ui/session';
+import { facetOptionNameLabel } from './utils';
+
+interface EnvironmentFacetProps {
+    search: any;
+    buckets: FacetBucket[];
+    placeholder?: string;
+    className?: string;
+}
+export function EnvironmentFacet({ search, buckets, placeholder = "All Environments", className }: EnvironmentFacetProps) {
+    const { client } = useUserSession();
+
+    const [options, setOptions] = useState<FacetNameBucket[]>([]);
+
+    const filterValue = search.getFilterValue("environment") as string;
+    const onChange = (option: FacetBucket | undefined) => {
+        search.setFilterValue("environment", option?._id);
+    }
+
+    useEffect(() => {
+        if (client) {
+            const options = buckets.map(async (bucket) => {
+                let name;
+                await client.environments.retrieve(bucket._id).then((environment) => {
+                    name = environment.name;
+                }).catch(() => {
+                    name = `${bucket._id} (deleted)`;
+                });
+                if (!name) {
+                    name = bucket._id;
+                }
+                return {
+                    ...bucket,
+                    name
+                }
+            })
+            Promise.all(options).then(resolvedOptions => {
+                resolvedOptions.sort((a, b) => a.name.localeCompare(b.name));
+                setOptions(resolvedOptions);
+            });
+        }
+    }, [buckets, client]);
+
+    const value = options?.find((option) => option._id === filterValue);
+
+    return (
+        <SelectBox filterBy="name" className={className} isClearable optionLabel={facetOptionNameLabel} options={options} value={value} onChange={onChange} by='_id' placeholder={placeholder} />
+    )
+}

package/src/features/facets/FacetsNav.tsx

@@ -0,0 +1,19 @@
+import { StringFacet } from './StringFacet';
+import { StringListFacet } from './StringListFacet';
+import { TypeFacet } from './TypeFacet';
+
+interface FacetsNavProps {
+    facets: any;
+    search: any;
+}
+export function FacetsNav({ facets, search }: FacetsNavProps) {
+    return (
+        <div className='flex items-center gap-x-4 w-full'>
+            {facets.role && <StringFacet search={search} className="flex-1" name="role" buckets={facets.role || []} placeholder="Filter by Role" />}
+            {facets.type && <TypeFacet search={search} className="flex-1" buckets={facets.type || []} />}
+            {facets.status && <StringFacet search={search} className="flex-1" name="status" buckets={facets.status || []} placeholder="Filter by Status" />}
+            {facets.location && <StringFacet search={search} className="flex-1" name="location" buckets={facets.location || []} placeholder="Filter by Location" />}
+            {facets.tags && <StringListFacet search={search} className="flex-1" name='tags' buckets={facets.tags || []} placeholder="Filter by Tags" />}
+        </div>
+    )
+}

package/src/features/facets/InteractionFacet.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+
+import { FacetBucket, FacetNameBucket } from '@vertesia/common';
+import { SelectBox } from '@vertesia/ui/core';
+import { useUserSession } from '@vertesia/ui/session';
+import { facetOptionNameLabel } from './utils';
+
+interface InteractionFacetProps {
+    search: any;
+    buckets: FacetBucket[];
+    placeholder?: string;
+    className?: string;
+}
+export function InteractionFacet({ search, buckets, placeholder = "All Interactions", className }: InteractionFacetProps) {
+    const { client } = useUserSession();
+
+    const [options, setOptions] = useState<FacetNameBucket[]>([]);
+
+    const filterValue = search.getFilterValue("interaction") as string;
+    const onChange = (option: FacetBucket | undefined) => {
+        search.setFilterValue("interaction", option?._id);
+    }
+
+    useEffect(() => {
+        if (client) {
+            const options = buckets.map(async (bucket) => {
+                let name;
+                await client.interactions.retrieve(bucket._id).then((interaction) => {
+                    name = interaction.name;
+                }).catch(() => {
+                    name = `${bucket._id} (deleted)`;
+                });
+                if (!name) {
+                    name = bucket._id;
+                }
+                return {
+                    ...bucket,
+                    name
+                }
+            })
+            Promise.all(options).then(resolvedOptions => {
+                resolvedOptions.sort((a, b) => a.name.localeCompare(b.name));
+                setOptions(resolvedOptions);
+            });
+        }
+    }, [buckets, client]);
+
+    const value = options?.find((option) => option._id === filterValue);
+
+    return (
+        <SelectBox filterBy="name" className={className} isClearable optionLabel={facetOptionNameLabel} options={options} value={value} onChange={onChange} by='_id' placeholder={placeholder} />
+    )
+}

package/src/features/facets/StringFacet.tsx

@@ -0,0 +1,23 @@
+import { FacetBucket } from '@vertesia/common';
+import { SelectBox } from '@vertesia/ui/core';
+import { facetOptionLabel } from './utils';
+
+interface StringFacetProps {
+    search: any;
+    buckets: FacetBucket[];
+    name: string;
+    placeholder?: string;
+    className?: string;
+}
+export function StringFacet({ search, buckets, name, placeholder, className }: StringFacetProps) {
+    const filterValue = search.getFilterValue(name) as string;
+    const onChange = (option: FacetBucket | undefined) => {
+        search.setFilterValue(name, option?._id);
+    }
+
+    const value = buckets?.find((option) => JSON.stringify(option._id) === JSON.stringify(filterValue));
+
+    return (
+        <SelectBox filterBy="_id" className={className} isClearable optionLabel={facetOptionLabel} options={buckets} value={value} onChange={onChange} by='_id' placeholder={placeholder} />
+    )
+}

package/src/features/facets/StringListFacet.tsx

@@ -0,0 +1,22 @@
+import { FacetBucket } from '@vertesia/common';
+import { InputList } from '@vertesia/ui/core';
+import { useEffect, useState } from 'react';
+
+interface StringListFacetProps {
+    search: any;
+    buckets: FacetBucket[];
+    name: string;
+    placeholder?: string;
+    className?: string;
+}
+export function StringListFacet({ search, name, placeholder, className }: StringListFacetProps) {
+    const [tags, setTags] = useState<string[]>([]);
+
+    useEffect(() => {
+        search.setFilterValue(name, tags);
+    }, [tags]);
+
+    return (
+        <InputList className={className} value={tags} onChange={setTags} placeholder={placeholder} />
+    )
+}

package/src/features/facets/TypeFacet.tsx

@@ -0,0 +1,59 @@
+import { useUserSession } from "@vertesia/ui/session";
+import { FacetBucket } from "@vertesia/common";
+import { SelectBox } from "@vertesia/ui/core";
+import { useEffect, useState } from "react";
+
+interface TypeFacetBucket {
+    name: string;
+    _id: string;
+    count: number;
+}
+
+export function facetOptionLabel(bucket: TypeFacetBucket) {
+    return `${bucket.name} (${bucket.count})`;
+}
+
+interface TypeFacetProps {
+    search: any;
+    buckets: FacetBucket[];
+    placeholder?: string;
+    className?: string;
+}
+export function TypeFacet({ search, buckets, placeholder = "Filter by Type", className }: TypeFacetProps) {
+    const [options, setOptions] = useState<TypeFacetBucket[]>([]);
+    const { typeRegistry } = useUserSession();
+    const filterValue = search.getFilterValue("type") as string;
+    const onChange = (option: FacetBucket | undefined) => {
+        search.setFilterValue("type", option?._id);
+    }
+
+    useEffect(() => {
+        if (typeRegistry) {
+            const options = buckets.map((bucket) => {
+                let name;
+                if (bucket._id == null) {
+                    bucket._id = "Document";
+                    name = "Document"
+                } else {
+                    name = typeRegistry.getTypeName(bucket._id);
+                    if (!name) {
+                        console.warn("Content Object Type not found", bucket._id)
+                        name = bucket._id
+                    }
+                }
+                return {
+                    ...bucket,
+                    name
+                }
+            })
+            options.sort((a, b) => a.name.localeCompare(b.name));
+            setOptions(options);
+        }
+    }, [buckets, typeRegistry]);
+
+    const value = options?.find((option) => option._id === filterValue);
+
+    return (
+        <SelectBox filterBy="name" className={className} isClearable optionLabel={facetOptionLabel} options={options} value={value} onChange={onChange} by='_id' placeholder={placeholder} />
+    )
+}

package/src/features/facets/TypeOptions.tsx

@@ -0,0 +1,22 @@
+import { useUserSession } from "@vertesia/ui/session";
+import { FacetBucket } from "@vertesia/common";
+import { FilterOption } from "@vertesia/ui/core";
+
+export function TypeOptionLabel(buckets: FacetBucket[]): FilterOption[] {
+    const { typeRegistry } = useUserSession();
+
+    return buckets.map((bucket) => {
+        let name;
+        if (bucket._id == null) {
+            bucket._id = "Document";
+            name = "Document";
+        } else {
+            name = typeRegistry?.getTypeName(bucket._id) || bucket._id;
+        }
+
+        return {
+            name: `${name} (${bucket.count})`,
+            value: bucket._id,
+        };
+    }).sort((a, b) => a.name.localeCompare(b.name));
+}

package/src/features/facets/UserFacet.tsx

@@ -0,0 +1,61 @@
+import { FacetBucket } from "@vertesia/common";
+import { SelectBox } from "@vertesia/ui/core";
+import { useEffect, useState } from "react";
+import { UserInfo } from '../user/UserInfo';
+
+export function facetOptionLabel(bucket: FacetBucket) {
+    if (bucket._id == null) {
+        return `UnKnown User (${bucket.count})`;
+    }
+    else {
+        return (
+            <UserInfo userRef={bucket._id} showTitle={true} size={"sm"} />
+        );
+    }
+}
+
+interface UserFacetProps {
+    search: any;
+    buckets: FacetBucket[];
+    placeholder?: string;
+    className?: string;
+    name: string;
+}
+
+export function UserFacet({ search, buckets, placeholder = "Filter by User", className }: UserFacetProps) {
+    const [options, setOptions] = useState<FacetBucket[]>([]);
+    const filterValue = search.getFilterValue("created_by") as string;
+
+    const onChange = (option: FacetBucket | undefined) => {
+        search.setFilterValue("created_by", option?._id);
+    }
+
+    useEffect(() => {
+        const fetchOptions = async () => {
+            const options = await Promise.all(buckets.map(async (bucket) => {
+                return {
+                    ...bucket,
+                }
+            }));
+            setOptions(options);
+        };
+        fetchOptions();
+    }, [buckets]);
+
+
+    const value = options?.find((option) => option._id === filterValue);
+
+    return (
+        <SelectBox
+            filterBy="name"
+            className={className}
+            isClearable
+            optionLabel={facetOptionLabel}
+            options={options}
+            value={value}
+            onChange={onChange}
+            by='_id'
+            placeholder={placeholder}
+        />
+    )
+}

package/src/features/facets/VFacetsNav.tsx

@@ -0,0 +1,139 @@
+import { Filter as BaseFilter, FilterBar, FilterGroup } from '@vertesia/ui/core';
+import { useUserSession } from '@vertesia/ui/session';
+import { useState } from 'react';
+import { VStringFacet } from './VStringFacet';
+import { VTypeFacet } from './VTypeFacet';
+import { VUserFacet } from './VUserFacet';
+
+interface FacetsNavProps {
+    facets: any;
+    search: any;
+    textSearch?: string;
+}
+export function VFacetsNav({ facets, search, textSearch = '' }: FacetsNavProps) {
+    const [filters, setFilters] = useState<BaseFilter[]>([]);
+    const customFilterGroups: FilterGroup[] = [];
+    const { typeRegistry } = useUserSession();
+
+    if (textSearch) {
+        customFilterGroups.push({
+            placeholder: textSearch,
+            name: 'name',
+            type: 'text',
+            options: [],
+        });
+    }
+
+    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);
+    }
+
+    if (facets.start) {
+        customFilterGroups.push({
+            name: 'start',
+            placeholder: 'Date after',
+            type: 'date' as const,
+            options: []
+        });
+    }
+
+    if (facets.end) {
+        customFilterGroups.push({
+            name: 'end',
+            placeholder: 'Date before',
+            type: 'date' as const,
+            options: []
+        });
+    }
+
+    // if (facets.tags) {
+    //     customFilterGroups.push({
+    //         name: 'Tags',
+    //         type: 'text',
+    //         options: facets.tags.map((tag: string) => ({
+    //             label: tag,
+    //             value: tag
+    //         }))
+    //     });
+    // }
+
+    const handleFilterChange: React.Dispatch<React.SetStateAction<BaseFilter[]>> = (value) => {
+
+        const newFilters = typeof value === 'function' ? value(filters) : value;
+        if (newFilters.length === 0) {
+            search.clearFilters();
+            setFilters([]);
+            return;
+        }
+        setFilters(newFilters);
+
+        newFilters.forEach(filter => {
+            if (filter.value && filter.value.length > 0) {
+                const filterName = filter.name.toLowerCase();
+                const filterValue = filter.value[0].value;
+
+                // Map filter names to the expected field names
+                switch (filterName) {
+                    case 'name':
+                        search.query.search_term = filterValue;
+                        break;
+                    case 'user':
+                        search.query.initiated_by = filterValue === 'Unknown User' ? 'unknown' : filterValue;
+                        break;
+                    default:
+                        (search.query as any)[filterName] = filterValue;
+                        break;
+                }
+            }
+        });
+
+        search.search();
+    };
+
+    return (
+        <FilterBar
+            filterGroups={customFilterGroups}
+            filters={filters}
+            setFilters={handleFilterChange}
+        />
+    )
+}

package/src/features/facets/VStringFacet.tsx

@@ -0,0 +1,34 @@
+import { facetOptionLabel } from './utils';
+import { FacetBucket } from '@vertesia/common';
+import { FilterGroup } from '@vertesia/ui/core';
+
+interface StringFacetProps {
+    buckets: FacetBucket[];
+    name: string;
+}
+
+export function createStringFilterGroup({ buckets, name }: StringFacetProps): FilterGroup {
+    const options = buckets.map((bucket) => ({
+        label: facetOptionLabel(bucket),
+        value: bucket._id
+    }));
+
+    const filterGroup: FilterGroup = {
+        name: name.charAt(0).toUpperCase() + name.slice(1),
+        options: options,
+        type: "select"
+
+    };
+
+    return filterGroup;
+}
+
+export function VStringFacet({ buckets, name, }: {
+    search: any;
+    buckets: FacetBucket[];
+    name: string;
+    placeholder?: string;
+    className?: string;
+}) {
+    return createStringFilterGroup({ buckets, name });
+}

package/src/features/facets/VTypeFacet.tsx

@@ -0,0 +1,72 @@
+import { FacetBucket } from "@vertesia/common";
+import { FilterGroup } from "@vertesia/ui/core";
+
+interface VTypeFacetProps {
+    buckets: FacetBucket[];
+    typeRegistry: any;
+}
+
+export function VTypeFacet({ buckets, typeRegistry }: VTypeFacetProps) {
+    // Create a map for quick lookups of type names and counts
+    const typeDataMap = new Map();
+    buckets.forEach((bucket) => {
+        let name;
+        let typeId = bucket._id;
+
+        if (bucket._id == null) {
+            typeId = "Document";
+            name = "Document";
+        } else {
+            name = typeRegistry.getTypeName(bucket._id);
+            if (!name) {
+                console.warn("Content Object Type not found", bucket._id);
+                name = bucket._id;
+            }
+        }
+
+        typeDataMap.set(typeId, {
+            name,
+            count: bucket.count
+        });
+    });
+
+    // 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',
+        options: options,
+        labelRenderer: (typeId: string) => {
+            const typeData = typeDataMap.get(typeId);
+            if (!typeData) {
+                console.warn(`Type data not found for ${typeId}`);
+                return typeId;
+            }
+
+            return (
+                <div className="w-full flex items-center">
+                    <span className="text-sm truncate">{typeData.name}</span>
+                    <span className="ml-2 text-xs">({typeData.count})</span>
+                </div>
+            );
+        },
+        filterBy: (optionValue: string, searchText: string) => {
+            const typeData = typeDataMap.get(optionValue);
+            if (!typeData) {
+                console.warn(`Type name not found for ${optionValue}`);
+                return false;
+            }
+            return typeData.name.toLowerCase().includes(searchText.toLowerCase());
+        }
+    };
+
+    return customFilterGroups;
+}

package/src/features/facets/VUserFacet.tsx

@@ -0,0 +1,47 @@
+import { FacetBucket } from '@vertesia/common';
+import { FilterGroup } from '@vertesia/ui/core';
+import { UserInfo } from '../user/UserInfo';
+
+interface UserFacetProps {
+    buckets: FacetBucket[];
+    name: string;
+}
+
+export function createUserFilterGroup({ buckets, name }: UserFacetProps): FilterGroup {
+    const options = buckets.map((bucket) => {
+        return {
+            value: bucket._id,
+            // Store the count for use in labelRenderer
+            label: `(${bucket.count})`
+        };
+    });
+
+    const filterGroup: FilterGroup = {
+        name: name.charAt(0).toUpperCase() + name.slice(1), // Capitalize first letter
+        options: options,
+        labelRenderer: (userRef: string) => {
+            const isUnknownUser = userRef === 'Unknown User' || !userRef;
+
+            if (isUnknownUser) {
+                // Find the count for this user from buckets
+                const bucket = buckets.find(b => b._id === userRef);
+                return `Unknown User (${bucket?.count || 0})`;
+            }
+
+            // 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>
+            );
+        }
+    };
+
+    return filterGroup;
+}
+
+export function VUserFacet({ buckets, name }: UserFacetProps) {
+    return createUserFilterGroup({ buckets, name });
+}

package/src/features/facets/index.ts

@@ -0,0 +1,11 @@
+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";

package/src/features/facets/utils.tsx

@@ -0,0 +1,9 @@
+import { FacetBucket, FacetNameBucket } from '@vertesia/common';
+
+export function facetOptionLabel(bucket: FacetBucket) {
+    return `${bucket._id} (${bucket.count})`;
+}
+
+export function facetOptionNameLabel(bucket: FacetNameBucket) {
+    return `${bucket.name} (${bucket.count})`;
+}

package/src/features/index.ts

@@ -1,2 +1,10 @@
+export * from "./activity-doc/index.js";
+export * from "./agent";
+export * from "./errors/index.js";
+export * from "./facets/index.js";
+export * from "./layout/index.js";
+export * from "./magic-pdf/index.js";
 export * from "./permissions/index.js";
-export * from "./activity-doc/index.js";
+export * from "./store/index.js";
+export * from "./user/index.js";
+export * from "./utils/index.js";