@vertesia/ui 0.65.0 → 0.67.0

package/src/features/agent/chat/ModernAgentOutput/MessageItem.tsx

@@ -1,5 +1,5 @@
 import { AgentMessage, AgentMessageType } from "@vertesia/common";
-import { Button, useToast } from "@vertesia/ui/core";
+import { Badge, Button, useToast } from "@vertesia/ui/core";
 import { NavLink } from "@vertesia/ui/router";
 import { useUserSession } from "@vertesia/ui/session";
 import dayjs from "dayjs";
@@ -254,7 +254,7 @@ export default function MessageItem({ message, showPulsatingCircle = false }: Me
                     components={{
                         a: ({ node, ...props }: { node?: any; href?: string; children?: React.ReactNode }) => {
                             const href = props.href || "";
-                            if (href.startsWith("/store/")) {
+                            if (href.includes("/store/objects")) {
                                 return (
                                     <NavLink
                                         href={href}
@@ -483,28 +483,27 @@ export default function MessageItem({ message, showPulsatingCircle = false }: Me
                     <div className={showPulsatingCircle ? "animate-fadeIn" : ""}>
                         {getMessageIcon()}
                     </div>
-                    <span className="text-xs font-medium text-gray-700 ">{messageStyles.sender}</span>
+                    <span className="text-xs font-medium text-muted ">{messageStyles.sender}</span>
 
                     {/* Show workstream badge next to sender for better organization */}
                     {workstreamId !== "main" && workstreamId !== "all" && (
-                        <span className="bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded-full text-[10px] font-mono text-muted dark:text-gray-400 border border-gray-200 dark:border-gray-700">
+                        <Badge variant="default" className="text-xs text-muted">
                             {workstreamId}
-                        </span>
+                        </Badge>
                     )}
                 </div>
 
                 <div className="flex items-center gap-2">
-                    <span className="text-xs text-gray-400 dark:text-muted">
+                    <span className="text-xs text-muted">
                         {dayjs(message.timestamp).format("HH:mm:ss")}
                     </span>
                     <Button
-                        variant="ghost"
-                        size="xs"
+                        variant="ghost" size="xs"
                         onClick={copyToClipboard}
-                        className="text-gray-400 hover:text-muted dark:text-muted dark:hover:text-muted/30"
+                        className="text-muted"
                         title="Copy message"
                     >
-                        <CopyIcon className="h-3 w-3" />
+                        <CopyIcon className="size-3" />
                     </Button>
                 </div>
             </div>
@@ -529,7 +528,7 @@ export default function MessageItem({ message, showPulsatingCircle = false }: Me
                     <div className="mt-2">
                         <button
                             onClick={() => setShowDetails(!showDetails)}
-                            className="text-xs text-muted hover:text-gray-700 dark:text-gray-400 dark:hover:text-muted/30 flex items-center"
+                            className="text-xs text-muted flex items-center"
                         >
                             {showDetails ? "Hide" : "Show"} details
                             <svg
@@ -544,11 +543,11 @@ export default function MessageItem({ message, showPulsatingCircle = false }: Me
                         </button>
 
                         {showDetails && (
-                            <div className="mt-2 p-2 bg-gray-50 dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded text-sm">
+                            <div className="mt-2 p-2 bg-muted border border-mixer-muted/40 rounded text-sm">
                                 {typeof message.details === "string" ? (
                                     renderContent(message.details)
                                 ) : (
-                                    <pre className="text-xs font-mono whitespace-pre-wrap overflow-x-auto bg-gray-100 dark:bg-gray-800 p-2 rounded text-gray-700 ">
+                                    <pre className="text-xs font-mono whitespace-pre-wrap overflow-x-auto bg-muted p-2 rounded text-muted ">
                                         {JSON.stringify(message.details, null, 2)}
                                     </pre>
                                 )}

package/src/features/facets/VEnvironmentFacet.tsx

@@ -0,0 +1,42 @@
+import { FacetBucket } from '@vertesia/common';
+import { FilterGroup } from '@vertesia/ui/core';
+
+interface EnrichedFacetBucket extends FacetBucket {
+    name?: string;
+}
+
+interface EnvironmentFacetProps {
+    buckets: EnrichedFacetBucket[];
+    name: string;
+}
+
+export function VEnvironmentFacet({ buckets, name }: EnvironmentFacetProps): FilterGroup {
+    const options = buckets.map((bucket) => ({
+        label: `(${bucket.count})`,
+        value: bucket._id
+    }));
+
+    const filterGroup: FilterGroup = {
+        name: name.charAt(0).toUpperCase() + name.slice(1),
+        options: options,
+        type: "select",
+        labelRenderer: (environmentId: string) => {
+            const bucket = buckets.find(b => b._id === environmentId);
+            const displayName = bucket?.name || environmentId;
+
+            return (
+                <div className="w-full flex items-center">
+                    <span className="text-sm truncate">{displayName}</span>
+                    <span className="ml-2 text-xs">({bucket?.count || 0})</span>
+                </div>
+            );
+        },
+        filterBy: (optionValue: string, searchText: string) => {
+            const bucket = buckets.find(b => b._id === optionValue);
+            const searchName = bucket?.name || optionValue;
+            return searchName.toLowerCase().includes(searchText.toLowerCase());
+        }
+    };
+
+    return filterGroup;
+}

package/src/features/facets/VFacetsNav.tsx

@@ -1,13 +1,24 @@
 import { Filter as BaseFilter, FilterBar, FilterGroup } from '@vertesia/ui/core';
 import { useUserSession } from '@vertesia/ui/session';
 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;
+    setFilterValue(name: string, value: any): void;
+    clearFilters(autoSearch?: boolean): void;
+    search(): Promise<boolean | undefined>;
+    readonly isRunning: boolean;
+    query: Record<string, any>;
+}
+
 interface FacetsNavProps {
     facets: any;
-    search: any;
+    search: SearchInterface;
     textSearch?: string;
 }
 export function VFacetsNav({ facets, search, textSearch = '' }: FacetsNavProps) {
@@ -67,34 +78,77 @@ export function VFacetsNav({ facets, search, textSearch = '' }: FacetsNavProps)
         customFilterGroups.push(initiatedByFilterGroup);
     }
 
-    if (facets.start) {
-        customFilterGroups.push({
-            name: 'start',
-            placeholder: 'Date after',
-            type: 'date' as const,
-            options: []
+    /** Run table */
+    if (facets.interactions) {
+        const interactionFilterGroup = VInteractionFacet({
+            buckets: facets.interactions || [],
+            name: 'interaction',
+            placeholder: 'Interactions',
         });
+        customFilterGroups.push(interactionFilterGroup);
     }
 
-    if (facets.end) {
-        customFilterGroups.push({
-            name: 'end',
-            placeholder: 'Date before',
-            type: 'date' as const,
-            options: []
+    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.tags) {
-    //     customFilterGroups.push({
-    //         name: 'Tags',
-    //         type: 'text',
-    //         options: facets.tags.map((tag: string) => ({
-    //             label: tag,
-    //             value: tag
-    //         }))
-    //     });
-    // }
+    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) => {
 
@@ -106,21 +160,25 @@ export function VFacetsNav({ facets, search, textSearch = '' }: FacetsNavProps)
         }
         setFilters(newFilters);
 
+        // Reset the actual query before reapplying filters. Otherwise the removed filters remain.
+        search.clearFilters(false);
+
         newFilters.forEach(filter => {
             if (filter.value && filter.value.length > 0) {
                 const filterName = filter.name.toLowerCase();
-                const filterValue = filter.value[0].value;
+                const filterValue = filter.type === 'stringList' 
+                    ? filter.value.map(v => typeof v === 'string' ? v : v.value) 
+                    : Array.isArray(filter.value) && filter.value[0] && typeof filter.value[0] === 'object' 
+                        ? filter.value[0].value 
+                        : filter.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;
+                        search.query.name = filterValue;
                         break;
                     default:
-                        (search.query as any)[filterName] = filterValue;
+                        search.query[filterName] = filterValue;
                         break;
                 }
             }

package/src/features/facets/VInteractionFacet.tsx

@@ -0,0 +1,73 @@
+import { FacetBucket, InteractionStatus } from '@vertesia/common';
+import { Badge, FilterGroup } from '@vertesia/ui/core';
+
+interface EnrichedFacetBucket extends FacetBucket {
+    name?: string;
+    status?: string;
+    version?: number;
+}
+
+interface InteractionFacetProps {
+    buckets: EnrichedFacetBucket[];
+    name: string;
+    placeholder?: string;
+}
+
+export function VInteractionFacet({ buckets, name, placeholder }: InteractionFacetProps): FilterGroup {
+    const options = buckets.map((bucket) => ({
+        label: `(${bucket.count})`,
+        value: bucket._id
+    }));
+
+    const filterGroup: FilterGroup = {
+        name: name,
+        placeholder: placeholder || `${name.charAt(0).toUpperCase() + name.slice(1)}`,
+        options: options,
+        type: "select",
+        labelRenderer: (interactionId: string) => {
+            const bucket = buckets.find(b => b._id === interactionId);
+            const displayName = bucket?.name || interactionId;
+            
+            // Determine badge variant based on status
+            let badgeVariant: "success" | "attention" | "destructive" = "success";
+            if (bucket?.status) {
+                switch (bucket.status) {
+                    case InteractionStatus.published: 
+                        badgeVariant = "success"; 
+                        break;
+                    case InteractionStatus.archived: 
+                        badgeVariant = "destructive"; 
+                        break;
+                    default: 
+                        badgeVariant = "attention"; 
+                        break;
+                }
+            }
+            
+            const badgeText = bucket?.version && bucket?.status ? 
+                `v${bucket.version} ${bucket.status}` : 
+                bucket?.status || (bucket?.version ? `v${bucket.version}` : '');
+
+            return (
+                <div className="w-full flex items-center justify-between">
+                    <div className="flex flex-row flex-wrap items-center gap-2 min-w-0 flex-1">
+                        <span className="text-sm truncate">{displayName}</span>
+                        {badgeText && (
+                            <Badge variant={badgeVariant} className="text-xs w-fit">
+                                {badgeText}
+                            </Badge>
+                        )}
+                    </div>
+                    <span className="ml-2 text-xs shrink-0">({bucket?.count || 0})</span>
+                </div>
+            );
+        },
+        filterBy: (optionValue: string, searchText: string) => {
+            const bucket = buckets.find(b => b._id === optionValue);
+            const searchName = bucket?.name || optionValue;
+            return searchName.toLowerCase().includes(searchText.toLowerCase());
+        }
+    };
+
+    return filterGroup;
+}

package/src/features/facets/VStringFacet.tsx

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

package/src/features/facets/VUserFacet.tsx

@@ -5,19 +5,20 @@ import { UserInfo } from '../user/UserInfo';
 interface UserFacetProps {
     buckets: FacetBucket[];
     name: string;
+    placeholder?: string;
 }
 
-export function createUserFilterGroup({ buckets, name }: UserFacetProps): FilterGroup {
+export function createUserFilterGroup({ buckets, name, placeholder }: 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
+        name: name,
+        placeholder: placeholder || `${name.charAt(0).toUpperCase() + name.slice(1)}`,
         options: options,
         labelRenderer: (userRef: string) => {
             const isUnknownUser = userRef === 'Unknown User' || !userRef;
@@ -36,12 +37,12 @@ export function createUserFilterGroup({ buckets, name }: UserFacetProps): Filter
                     <span className="text-muted-foreground ml-2">({bucket?.count || 0})</span>
                 </div>
             );
-        }
+        },
     };
 
     return filterGroup;
 }
 
-export function VUserFacet({ buckets, name }: UserFacetProps) {
-    return createUserFilterGroup({ buckets, name });
+export function VUserFacet({ buckets, name, placeholder }: UserFacetProps) {
+    return createUserFilterGroup({ buckets, name, placeholder });
 }

package/src/features/layout/GenericPageNavHeader.tsx

@@ -40,7 +40,7 @@ export function GenericPageNavHeader({ className, children, title, description,
                         }
                     </div>
                 </div>
-                <div className="flex gap-x-4 shrink-0">{actions}</div>
+                <div className="flex gap-x-2 shrink-0">{actions}</div>
             </div>
             {children && <div className="w-full flex items-center">{children}</div>}
         </div>

package/src/features/magic-pdf/TextPageView.tsx

@@ -1,5 +1,4 @@
-import { JSONCode } from "@vertesia/ui/widgets";
-import { Theme, XMLViewer } from '@vertesia/ui/widgets';
+import { JSONCode, Theme, XMLViewer } from '@vertesia/ui/widgets';
 import { useEffect, useLayoutEffect, useState } from "react";
 import { usePdfPagesInfo } from "./PdfPageProvider";
 import { ViewType } from "./types";

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

@@ -1,11 +1,11 @@
 import { NavLink } from "@vertesia/ui/router";
 import { useUserSession } from "@vertesia/ui/session";
 import { FolderClosed, Search, Trash2 } from "lucide-react";
-import { Button, ConfirmModal, ErrorBox, Table, TBody, TR, useToast, VTooltip } from "@vertesia/ui/core";
-import { useFetch } from "@vertesia/ui/core";
+import { Button, ConfirmModal, ErrorBox, Table, TBody, TR, useToast, VTooltip, useFetch, EmptyCollection } from "@vertesia/ui/core";
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { useState, useEffect } from "react";
+import { CreateCollectionModal } from "./CreateCollection";
 
 dayjs.extend(relativeTime);
 
@@ -16,9 +16,10 @@ export function CollectionsTable({ }: CollectionsTableProps) {
     const toast = useToast();
     const [collectionToDelete, setCollectionToDelete] = useState<string | undefined>();
     const [isLoading, setIsLoading] = useState(true);
+    const [isOpen, setOpen] = useState(false);
 
     const { data: collections, error, refetch } = useFetch(() => client.store.collections.list(), []);
-    
+
     // Update loading state when data is fetched
     useEffect(() => {
         if (collections || error) {
@@ -32,7 +33,7 @@ export function CollectionsTable({ }: CollectionsTableProps) {
 
     const deleteCollection = async () => {
         if (!collectionToDelete) return;
-        
+
         try {
             await client.store.collections.delete(collectionToDelete);
             toast({
@@ -56,42 +57,50 @@ export function CollectionsTable({ }: CollectionsTableProps) {
 
     return (
         <>
-            {collections && <Table className="w-full">
-                <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Created</th>
-                        <th></th>
-                    </tr>
-                </thead>
-                <TBody columns={4} isLoading={isLoading}>
-                    {
-                        collections.map((c) => {
-                            return <TR key={c.id}>
-                                <td>
-                                    <div className="flex items-center gap-2">
-                                        {collectionIcon(c.dynamic)}
-                                        <NavLink href={`/collections/${c.id}`}>{c.name}</NavLink>
-                                    </div>
-                                </td>
-                                <td>{c.type?.name || "-"}</td>
-                                <td>{dayjs(c.created_at).fromNow()}</td>
-                                <td className="text-right">
-                                    <Button 
-                                        variant="destructive" 
-                                        size="sm"
-                                        onClick={() => setCollectionToDelete(c.id)}
-                                    >
-                                        <Trash2 className="size-4" />
-                                    </Button>
-                                </td>
-                            </TR>
-                        })
-                    }
-                </TBody>
-            </Table>}
-            
+            {collections &&
+                (collections.length > 0 ?
+                    (<Table className="w-full">
+                        <thead>
+                            <tr>
+                                <th>Name</th >
+                                <th>Type</th>
+                                <th>Created</th>
+                                <th></th>
+                            </tr >
+                        </thead >
+                        <TBody columns={4} isLoading={isLoading}>
+                            {
+                                collections.map((c) => {
+                                    return <TR key={c.id}>
+                                        <td>
+                                            <div className="flex items-center gap-2">
+                                                {collectionIcon(c.dynamic)}
+                                                <NavLink href={`/collections/${c.id}`}>{c.name}</NavLink>
+                                            </div>
+                                        </td>
+                                        <td>{c.type?.name || "-"}</td>
+                                        <td>{dayjs(c.created_at).fromNow()}</td>
+                                        <td className="text-right">
+                                            <Button
+                                                variant="destructive"
+                                                size="sm"
+                                                onClick={() => setCollectionToDelete(c.id)}
+                                            >
+                                                <Trash2 className="size-4" />
+                                            </Button>
+                                        </td>
+                                    </TR>
+                                })
+                            }
+                        </TBody>
+                    </Table >) :
+                    <EmptyCollection title="No Collections" buttonLabel='New Collections' onClick={() => setOpen(true)}>
+                        Get started by creating a new Collections.
+                    </EmptyCollection>)
+            }
+
+            <CreateCollectionModal isOpen={isOpen} onClose={() => setOpen(false)} />
+
             <ConfirmModal
                 isOpen={!!collectionToDelete}
                 title="Delete Collection"

package/src/features/store/collections/{CollectionsView.tsx → CreateCollection.tsx}

@@ -1,49 +1,9 @@
 import { CreateCollectionPayload } from "@vertesia/common";
-import {
-    Button, FormItem, Input, Styles,
-    Switch, useFlag, useToast, VModal,
-    VModalBody,
-    VModalFooter,
-    VModalTitle
-} from "@vertesia/ui/core";
-import { FullHeightLayout } from "@vertesia/ui/layout";
+import { useToast, VModalBody, FormItem, Styles, VModalFooter, Input, Switch, Button, VModal, VModalTitle } from "@vertesia/ui/core";
+import { SelectContentType } from "../types/SelectContentType";
 import { useNavigate } from "@vertesia/ui/router";
 import { useUserSession } from "@vertesia/ui/session";
 import { useState } from "react";
-import { GenericPageNavHeader } from "../../layout";
-import { SelectContentType } from "../../store";
-import { CollectionsTable } from "./CollectionsTable";
-
-interface CollectionsViewProps { }
-export function CollectionsView({ }: CollectionsViewProps) {
-    const actions = [<CreateCollectionButton key="create" />];
-    return (
-        <FullHeightLayout>
-            <GenericPageNavHeader
-                title="Collections"
-                breadcrumbs={[<span key="0">Collections</span>]}
-                description="Group objects together using a collection"
-                actions={actions}
-            />
-            <FullHeightLayout.Body>
-                <CollectionsTable />
-            </FullHeightLayout.Body>
-        </FullHeightLayout>
-    );
-}
-
-function CreateCollectionButton() {
-    const { on, off, isOn } = useFlag();
-    return (
-        <div>
-            <VModal onClose={off} isOpen={isOn}>
-                <VModalTitle>Create a Collection</VModalTitle>
-                <CreateCollectionForm onClose={off} />
-            </VModal>
-            <Button onClick={on}>Create Collection</Button>
-        </div>
-    );
-}
 
 interface CreateCollectionFormProps {
     onClose: () => void;
@@ -164,3 +124,16 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
         </form >
     );
 }
+
+interface CreateCollectionModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+export function CreateCollectionModal({ isOpen, onClose }: CreateCollectionModalProps) {
+    return (
+        <VModal onClose={onClose} isOpen={isOpen}>
+            <VModalTitle>Create a Collection</VModalTitle>
+            <CreateCollectionForm onClose={onClose} />
+        </VModal>
+    );
+}

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

@@ -5,7 +5,7 @@ import { useUserSession } from "@vertesia/ui/session";
 import { CodeMirrorEditor, EditorApi, GeneratedForm, ManagedObject } from "@vertesia/ui/widgets";
 import { basicSetup } from "codemirror";
 import { useMemo, useRef, useState } from "react";
-import { SelectContentType, stringifyTableLayout } from "../../store";
+import { SelectContentType, stringifyTableLayout } from "../types";
 
 const extensions = [basicSetup, json()];