@vertesia/ui 0.64.0 → 0.66.0

package/src/features/agent/PayloadBuilder.tsx

@@ -1,8 +1,9 @@
 import { AsyncExecutionResult, VertesiaClient } from "@vertesia/client";
-import { ExecutionEnvironmentRef, Interaction, JSONSchema, mergePromptsSchema, PopulatedInteraction } from "@vertesia/common";
+import { ExecutionEnvironmentRef, Interaction, mergePromptsSchema, PopulatedInteraction, supportsToolUse } from "@vertesia/common";
 import { JSONObject } from "@vertesia/json";
 import { useUserSession } from "@vertesia/ui/session";
 import Ajv, { ValidateFunction } from "ajv";
+import type { JSONSchema4 } from "json-schema";
 import React, { createContext, useContext, useEffect, useState } from "react";
 
 export interface ConversationWorkflowPayload {
@@ -15,13 +16,15 @@ export interface ConversationWorkflowPayload {
 
 export class PayloadBuilder implements ConversationWorkflowPayload {
     _interactive: boolean = true;
+    _debug_mode: boolean = false;
+    _collection: string | undefined;
     _start: boolean = false;
 
     payload: ConversationWorkflowPayload;
-    interactionParamsSchema?: JSONSchema | null;
+    private _interactionParamsSchema?: JSONSchema4 | null;
     private _inputValidator?: {
         validate: ValidateFunction;
-        schema: JSONSchema;
+        schema: JSONSchema4;
     };
 
     constructor(public vertesia: VertesiaClient, public updateState: (data: PayloadBuilder) => void) {
@@ -32,22 +35,26 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
     }
 
     onStateChanged() {
-        this.updateState(this.clone());
+        const newInstance = this.clone();
+        this.updateState(newInstance);
     }
 
     clone() {
         const builder = new PayloadBuilder(this.vertesia, this.updateState);
-        builder.interactionParamsSchema = this.interactionParamsSchema;
+        builder._interactionParamsSchema = this._interactionParamsSchema;
         builder.payload = this.payload;
         builder._interactive = this._interactive;
+        builder._debug_mode = this._debug_mode;
         builder._inputValidator = this._inputValidator;
         builder._start = this._start;
+        builder._collection = this._collection;
         return builder;
     }
 
     get interactive() {
         return this._interactive;
     }
+
     set interactive(interactive: boolean) {
         if (interactive !== this._interactive) {
             this._interactive = interactive;
@@ -55,21 +62,42 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
         }
     }
 
+    get debug_mode() {
+        return this._debug_mode;
+    }
+
+    set debug_mode(debug_mode: boolean) {
+        if (debug_mode !== this._debug_mode) {
+            this._debug_mode = debug_mode;
+            this.onStateChanged();
+        }
+    }
+
+    get collection() {
+        return this._collection;
+    }
+
+    set collection(collection: string | undefined) {
+        if (collection !== this._collection) {
+            this._collection = collection;
+            this.onStateChanged();
+        }
+    }
+
+    get search_scope() {
+        return this._collection ? "collection" : undefined;
+    }
+
     get interaction() {
         return this.payload.interaction;
     }
     set interaction(interaction: Interaction | undefined) {
         if (interaction?.id !== this.payload.interaction?.id) {
             this.payload.interaction = interaction;
-            this.interactionParamsSchema = mergePromptsSchema(this.interaction as PopulatedInteraction) as JSONSchema;
+            this._interactionParamsSchema = mergePromptsSchema(this.interaction as PopulatedInteraction) as JSONSchema4;
             // Reset the validator when schema changes
             this._inputValidator = undefined;
             if (interaction) {
-                if (interaction.model) {
-                    this.payload.model = interaction.model;
-                } else {
-                    this.payload.model = undefined;
-                }
                 if (interaction.environment) {
                     if (typeof interaction.environment === 'string') {
                         this.vertesia.environments.retrieve(interaction.environment).then((environment) => this.environment = environment);
@@ -77,6 +105,12 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
                         this.payload.environment = interaction.environment;
                     }
                 }
+                if (interaction.model) {
+                    this.payload.model = interaction.model;
+                } else {
+                    this.payload.model = this.environment?.default_model && supportsToolUse(this.environment.default_model, this.environment.provider)
+                        ? this.environment.default_model : undefined;
+                }
             }
             this.onStateChanged();
         }
@@ -88,6 +122,9 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
     set environment(environment: ExecutionEnvironmentRef | undefined) {
         if (environment?.id !== this.payload.environment?.id) {
             this.payload.environment = environment;
+            this.payload.model = environment?.default_model && supportsToolUse(environment.default_model, environment.provider)
+                ? environment.default_model : undefined;
+
             this.onStateChanged();
         }
     }
@@ -134,9 +171,22 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
         return this._start;
     }
 
+    get interactionParamsSchema(): JSONSchema4 | null | undefined {
+        return this._interactionParamsSchema;
+    }
+
+    set interactionParamsSchema(schema: JSONSchema4 | null | undefined) {
+        if (this._interactionParamsSchema !== schema) {
+            this._interactionParamsSchema = schema;
+            this.onStateChanged();
+        }
+    }
+
     reset() {
         this._start = false;
         this._interactive = true;
+        this._debug_mode = false;
+        this._collection = undefined;
         this.payload = {
             model: '',
             tools: [],
@@ -144,7 +194,7 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
             environment: undefined,
             prompt_data: undefined
         };
-        this.interactionParamsSchema = null;
+        this._interactionParamsSchema = null;
         this._inputValidator = undefined;
 
         this.onStateChanged();
@@ -156,16 +206,16 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
     }
 
     validateInput(): { isValid: boolean; errorMessage?: string } {
-        if (!this.interactionParamsSchema) {
+        if (!this._interactionParamsSchema) {
             return { isValid: true };
         }
 
         // If schema has changed or validator not initialized, recompile
-        if (!this._inputValidator || this._inputValidator.schema !== this.interactionParamsSchema) {
+        if (!this._inputValidator || this._inputValidator.schema !== this._interactionParamsSchema) {
             const ajv = new Ajv({ strict: false });
             this._inputValidator = {
-                validate: ajv.compile(this.interactionParamsSchema),
-                schema: this.interactionParamsSchema
+                validate: ajv.compile(this._interactionParamsSchema),
+                schema: this._interactionParamsSchema
             };
         }
 

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

@@ -8,7 +8,6 @@ import {
     DownloadCloudIcon,
     ExternalLink,
     MoreVertical,
-    Plus,
     XIcon,
 } from "lucide-react";
 import { PayloadBuilderProvider, usePayloadBuilder } from "../../PayloadBuilder";
@@ -148,11 +147,6 @@ function MoreDropdown({
         }
     };
 
-    const startNewAgent = () => {
-        builder.reset();
-        resetWorkflow?.();
-    }
-
     const openUrl = (url: string) => {
         window.open(url, "_blank");
         return url;
@@ -215,11 +209,6 @@ function MoreDropdown({
                                     }}>
                                         <XIcon className="size-3.5 mr-2 text-destructive" /> Cancel Workflow
                                     </CommandItem>
-                                    {!isModal && (
-                                        <CommandItem className="text-xs" onSelect={startNewAgent}>
-                                            <Plus className="size-3.5 mr-2 text-muted" /> Start a new Agent
-                                        </CommandItem>
-                                    )}
                                 </CommandGroup>
                             </CommandList>
                         </Command>

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";
@@ -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/PdfPageProvider.tsx

@@ -83,14 +83,14 @@ function getBasePath(objectId: string) {
     return `${ADVANCED_PROCESSING_PREFIX}/${objectId}`;
 }
 
-function getPageImagePath(objectId: string, pageNumber: number, ext = ".jpeg") {
+function getPageImagePath(objectId: string, pageNumber: number, ext = ".jpg") {
     return `${getBasePath(objectId)}/pages/page-${pageNumber}${ext}`;
 }
 
 function getPageAnnotatedImagePath(
     objectId: string,
     pageNumber: number,
-    ext = ".jpeg",
+    ext = ".jpg",
 ) {
     return `${getBasePath(objectId)}/pages/page-${pageNumber}-annotated${ext}`;
 }
@@ -98,7 +98,7 @@ function getPageAnnotatedImagePath(
 function getPageInstrumentedImagePath(
     objectId: string,
     pageNumber: number,
-    ext = ".jpeg",
+    ext = ".jpg",
 ) {
     return `${getBasePath(objectId)}/pages/page-${pageNumber}.instrumented${ext}`;
 }