@vertesia/ui 0.67.0 → 0.68.0

package/src/features/agent/PayloadBuilder.tsx

@@ -8,10 +8,12 @@ import React, { createContext, useContext, useEffect, useState } from "react";
 
 export interface ConversationWorkflowPayload {
     interaction?: Interaction | undefined;
-    environment?: ExecutionEnvironmentRef | undefined;
-    model?: string;
-    prompt_data?: JSONObject | undefined,
-    tools: string[],
+    config: {
+        environment?: ExecutionEnvironmentRef | undefined;
+        model?: string;
+    }
+    data?: JSONObject | undefined,
+    tool_names: string[],
 }
 
 export class PayloadBuilder implements ConversationWorkflowPayload {
@@ -19,6 +21,7 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
     _debug_mode: boolean = false;
     _collection: string | undefined;
     _start: boolean = false;
+    _preserveRunValues: boolean = false;
 
     payload: ConversationWorkflowPayload;
     private _interactionParamsSchema?: JSONSchema4 | null;
@@ -29,8 +32,10 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
 
     constructor(public vertesia: VertesiaClient, public updateState: (data: PayloadBuilder) => void) {
         this.payload = {
-            model: '',
-            tools: [],
+            config: {
+                model: '',
+            },
+            tool_names: [],
         }
     }
 
@@ -48,6 +53,7 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
         builder._inputValidator = this._inputValidator;
         builder._start = this._start;
         builder._collection = this._collection;
+        builder._preserveRunValues = this._preserveRunValues;
         return builder;
     }
 
@@ -97,18 +103,18 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
             this._interactionParamsSchema = mergePromptsSchema(this.interaction as PopulatedInteraction) as JSONSchema4;
             // Reset the validator when schema changes
             this._inputValidator = undefined;
-            if (interaction) {
+            if (interaction && !this._preserveRunValues) {
                 if (interaction.environment) {
                     if (typeof interaction.environment === 'string') {
                         this.vertesia.environments.retrieve(interaction.environment).then((environment) => this.environment = environment);
                     } else {
-                        this.payload.environment = interaction.environment;
+                        this.payload.config.environment = interaction.environment;
                     }
                 }
                 if (interaction.model) {
-                    this.payload.model = interaction.model;
+                    this.payload.config.model = interaction.model;
                 } else {
-                    this.payload.model = this.environment?.default_model && supportsToolUse(this.environment.default_model, this.environment.provider)
+                    this.payload.config.model = this.environment?.default_model && supportsToolUse(this.environment.default_model, this.environment.provider)
                         ? this.environment.default_model : undefined;
                 }
             }
@@ -117,44 +123,50 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
     }
 
     get environment() {
-        return this.payload.environment;
+        return this.payload.config.environment;
     }
     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;
+        if (environment?.id !== this.payload.config.environment?.id) {
+            this.payload.config.environment = environment;
+            if (!this._preserveRunValues) {
+                this.payload.config.model = environment?.default_model && supportsToolUse(environment.default_model, environment.provider)
+                    ? environment.default_model : undefined;
+            }
 
             this.onStateChanged();
         }
     }
 
     get model() {
-        return this.payload.model;
+        return this.payload.config.model;
     }
     set model(model: string | undefined) {
-        if (model !== this.payload.model) {
-            this.payload.model = model;
+        if (model !== this.payload.config.model) {
+            this.payload.config.model = model;
             this.onStateChanged();
         }
     }
 
-    get tools() {
-        return this.payload.tools;
+    get tool_names() {
+        return this.payload.tool_names;
     }
-    set tools(tools: string[]) {
-        this.payload.tools = tools;
+    set tool_names(tools: string[]) {
+        this.payload.tool_names = tools;
         this.onStateChanged();
     }
 
-    get prompt_data(): JSONObject | undefined {
-        return this.payload.prompt_data;
+    get data(): JSONObject | undefined {
+        return this.payload.data;
     }
-    set prompt_data(prompt_data: JSONObject) {
-        this.payload.prompt_data = prompt_data;
+    set data(prompt_data: JSONObject) {
+        this.payload.data = prompt_data;
         this.onStateChanged();
     }
 
+    get config() {
+        return this.payload.config;
+    }
+
     set run(run: AsyncExecutionResult | { workflow_id: string; run_id: string }) {
         console.log("run", run);
         this.onStateChanged();
@@ -171,6 +183,14 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
         return this._start;
     }
 
+    get preserveRunValues(): boolean {
+        return this._preserveRunValues;
+    }
+
+    set preserveRunValues(value: boolean) {
+        this._preserveRunValues = value;
+    }
+
     get interactionParamsSchema(): JSONSchema4 | null | undefined {
         return this._interactionParamsSchema;
     }
@@ -187,15 +207,20 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
         this._interactive = true;
         this._debug_mode = false;
         this._collection = undefined;
+        this._preserveRunValues = false;
         this.payload = {
-            model: '',
-            tools: [],
+            config: {
+                environment: undefined,
+                model: '',
+            },
+            tool_names: [],
             interaction: undefined,
-            environment: undefined,
-            prompt_data: undefined
+            data: undefined
         };
         this._interactionParamsSchema = null;
         this._inputValidator = undefined;
+        this.model = undefined;
+        this.environment = undefined;
 
         this.onStateChanged();
 
@@ -219,7 +244,7 @@ export class PayloadBuilder implements ConversationWorkflowPayload {
             };
         }
 
-        const prompt_data = this.payload.prompt_data || {};
+        const prompt_data = this.payload.data || {};
         const isValid = this._inputValidator.validate(prompt_data);
 
         if (!isValid) {

package/src/features/agent/chat/ModernAgentConversation.tsx

@@ -489,10 +489,16 @@ function ModernAgentConversationInner({
 
         const lastMessage = messages[messages.length - 1];
         if (lastMessage) {
-            if (interactive) {
-                setShowInput(true);
-            } else {
-                setShowInput(lastMessage.type === AgentMessageType.REQUEST_INPUT);
+            if (lastMessage.type === AgentMessageType.TERMINATED) {
+                setShowInput(false);
+                setWorkflowStatus("TERMINATED");
+            }
+            else {
+                if (interactive) {
+                    setShowInput(true);
+                } else {
+                    setShowInput(lastMessage.type === AgentMessageType.REQUEST_INPUT);
+                }
             }
         }
     }, [messages, plans, activePlanIndex]);

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

@@ -3,7 +3,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import InlineSlidingPlanPanel from "./InlineSlidingPlanPanel";
 import MessageItem from "./MessageItem";
 import WorkstreamTabs, { extractWorkstreams, filterMessagesByWorkstream } from "./WorkstreamTabs";
-import { getWorkstreamId } from "./utils";
+import { DONE_STATES, getWorkstreamId } from "./utils";
 
 interface AllMessagesMixedProps {
     messages: AgentMessage[];
@@ -115,7 +115,8 @@ export default function AllMessagesMixed({
                 statusMap.set(workstreamId, [
                     AgentMessageType.COMPLETE,
                     AgentMessageType.IDLE,
-                    AgentMessageType.REQUEST_INPUT
+                    AgentMessageType.REQUEST_INPUT,
+                    AgentMessageType.TERMINATED
                 ].includes(lastMessage.type));
             }
         }
@@ -171,7 +172,7 @@ export default function AllMessagesMixed({
                             // Find if this is the latest non-completion message
                             const isLatestNonCompletionMessage = !isCompleted &&
                                 index === displayMessages.length - 1 &&
-                                ![AgentMessageType.COMPLETE, AgentMessageType.IDLE, AgentMessageType.REQUEST_INPUT].includes(message.type);
+                                !DONE_STATES.includes(message.type);
 
                             return (
                                 <MessageItem
@@ -186,12 +187,12 @@ export default function AllMessagesMixed({
                         <>
                             {/* Get all messages to display in sliding view */}
                             {(() => {
-                                // First get all permanent messages (ANSWER, QUESTION, COMPLETE, REQUEST_INPUT)
+                                // First get all permanent messages (ANSWER, QUESTION, COMPLETE, REQUEST_INPUT, TERMINATED)
                                 const permanentMessages = displayMessages.filter(msg =>
                                     msg.type === AgentMessageType.ANSWER ||
                                     msg.type === AgentMessageType.QUESTION ||
                                     msg.type === AgentMessageType.COMPLETE ||
-                                    msg.type === AgentMessageType.REQUEST_INPUT
+                                    msg.type === AgentMessageType.TERMINATED
                                 );
 
                                 // Then get the latest thinking message if not completed
@@ -224,7 +225,7 @@ export default function AllMessagesMixed({
                                 return allMessages.map((message, index) => {
                                     const isLatestMessage = !isCompleted &&
                                         index === allMessages.length - 1 &&
-                                        ![AgentMessageType.COMPLETE, AgentMessageType.IDLE, AgentMessageType.REQUEST_INPUT].includes(message.type);
+                                        !DONE_STATES.includes(message.type);
 
                                     return (
                                         <MessageItem

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

@@ -44,10 +44,17 @@ export default function MessageItem({ message, showPulsatingCircle = false }: Me
             case AgentMessageType.COMPLETE:
                 return {
                     ...baseStyle,
-                    containerClass: "bg-white border-l-4 border-l-green-500 shadow-sm",
+                    containerClass: "bg-white border-l-4 border-l-success shadow-sm",
                     iconComponent: <CheckCircle className="size-4 text-success" />,
                     sender: "Completed",
                 };
+            case AgentMessageType.TERMINATED:
+                return {
+                    ...baseStyle,
+                    containerClass: "bg-white border-l-4 border-l-attention shadow-sm",
+                    iconComponent: <CheckCircle className="size-4 text-attention" />,
+                    sender: "Terminated",
+                };
             case AgentMessageType.QUESTION:
                 return {
                     ...baseStyle,
@@ -377,6 +384,8 @@ export default function MessageItem({ message, showPulsatingCircle = false }: Me
                 return "border-l-success bg-success";
             case AgentMessageType.PLAN:
                 return "border-l-attention bg-attention";
+            case AgentMessageType.TERMINATED:
+                return "border-l-muted bg-muted";
             default:
                 return "border-l-indigo-500 dark:border-l-indigo-400 bg-indigo-50/50 dark:bg-indigo-900/10";
         }
@@ -437,6 +446,8 @@ export default function MessageItem({ message, showPulsatingCircle = false }: Me
                 );
             case AgentMessageType.COMPLETE:
                 return <CheckCircle className={`size-4 ${iconColor}`} />;
+            case AgentMessageType.TERMINATED:
+                return <CheckCircle className={`size-4 ${iconColor}`} />;
             case AgentMessageType.IDLE:
                 return <Clock className={`size-4 ${iconColor}`} />;
             case AgentMessageType.REQUEST_INPUT:

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

@@ -27,7 +27,8 @@ function isPermanentMessage(message: AgentMessage): boolean {
         message.type === AgentMessageType.QUESTION ||
         message.type === AgentMessageType.COMPLETE ||
         message.type === AgentMessageType.IDLE ||
-        message.type === AgentMessageType.REQUEST_INPUT
+        message.type === AgentMessageType.REQUEST_INPUT || 
+        message.type === AgentMessageType.TERMINATED
     );
 }
 

package/src/features/agent/chat/ModernAgentOutput/utils.ts

@@ -17,6 +17,14 @@ export function insertMessageInTimeline(arr: AgentMessage[], m: AgentMessage) {
  * This function checks the main workstream status to determine if the conversation is complete
  * For multi-workstream scenarios, we keep streaming until the main workstream is complete
  */
+
+export const DONE_STATES = [
+    AgentMessageType.COMPLETE,
+    AgentMessageType.IDLE,
+    AgentMessageType.REQUEST_INPUT,
+    AgentMessageType.TERMINATED,
+];
+
 export function isInProgress(messages: AgentMessage[]) {
     if (!messages.length) return true;
 
@@ -46,7 +54,7 @@ export function isInProgress(messages: AgentMessage[]) {
         console.log(`[isInProgress] Last message type in only workstream: ${lastMessage.type}`);
 
         // Check if this single workstream is completed
-        if (![AgentMessageType.COMPLETE, AgentMessageType.IDLE, AgentMessageType.REQUEST_INPUT].includes(
+        if (!DONE_STATES.includes(
             lastMessage.type
         )) {
             console.log("[isInProgress] Only workstream is still in progress");
@@ -71,7 +79,7 @@ export function isInProgress(messages: AgentMessage[]) {
         const lastMainMessage = mainWorkstreamMsgs[mainWorkstreamMsgs.length - 1];
         console.log(`[isInProgress] Last message type in main workstream: ${lastMainMessage.type}`);
 
-        if (![AgentMessageType.COMPLETE, AgentMessageType.IDLE, AgentMessageType.REQUEST_INPUT].includes(
+        if (!DONE_STATES.includes(
             lastMainMessage.type
         )) {
             console.log("[isInProgress] Main workstream is still in progress");
@@ -89,7 +97,7 @@ export function isInProgress(messages: AgentMessage[]) {
     for (const [workstreamId, msgs] of workstreamMessages.entries()) {
         if (msgs.length > 0) {
             const lastMessage = msgs[msgs.length - 1];
-            if (![AgentMessageType.COMPLETE, AgentMessageType.IDLE, AgentMessageType.REQUEST_INPUT].includes(
+            if (!DONE_STATES.includes(
                 lastMessage.type
             )) {
                 console.log(`[isInProgress] Workstream ${workstreamId} is still active`);
@@ -168,7 +176,7 @@ export function getWorkstreamStatusMap(messages: AgentMessage[]): Map<string, "p
             );
 
             if (hasCompleteMessage ||
-                [AgentMessageType.COMPLETE, AgentMessageType.IDLE, AgentMessageType.REQUEST_INPUT].includes(lastMessage.type)) {
+                DONE_STATES.includes(lastMessage.type)) {
                 console.log(`[getWorkstreamStatusMap] Marking workstream ${workstreamId} as completed`);
                 statusMap.set(workstreamId, "completed");
             } else {

package/src/features/facets/DocumentsFacetsNav.tsx

@@ -0,0 +1,171 @@
+import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
+import { useUserSession } from '@vertesia/ui/session';
+import { useState } from 'react';
+import { VStringFacet } from './VStringFacet';
+import { VTypeFacet } from './VTypeFacet';
+import { SearchInterface } from './VFacetsNav';
+
+interface DocumentsFacetsNavProps {
+    facets: {
+        type?: any[];
+        status?: any[];
+        role?: any[];
+        location?: any[];
+        tags?: string[];
+    };
+    search: SearchInterface;
+}
+
+// Hook to create filter groups for documents
+export function useDocumentFilterGroups(facets: DocumentsFacetsNavProps['facets']): FilterGroup[] {
+    const { typeRegistry } = useUserSession();
+    const customFilterGroups: FilterGroup[] = [];
+
+    customFilterGroups.push({
+        placeholder: 'Name or ID',
+        name: 'name',
+        type: 'text',
+        options: [],
+    });
+
+    if (facets.type) {
+        const typeFilterGroup = VTypeFacet({
+            buckets: facets.type || [],
+            typeRegistry: typeRegistry,
+            type: 'select',
+            multiple: true
+        });
+        customFilterGroups.push(typeFilterGroup);
+    }
+
+    if (facets.status) {
+        const statusFilterGroup = VStringFacet({
+            search: null as any, // This will be provided by the search context
+            buckets: facets.status || [],
+            name: 'Status',
+            type: 'select',
+            multiple: true
+        });
+        customFilterGroups.push(statusFilterGroup);
+    }
+
+    if (facets.tags) {
+        customFilterGroups.push({
+            name: 'Tags',
+            type: 'stringList',
+            options: facets.tags.map((tag: string) => ({
+                label: tag,
+                value: tag
+            }))
+        });
+    }
+
+    customFilterGroups.push({
+        name: 'created_at',
+        placeholder: 'Created Date',
+        type: 'date',
+        multiple: true,
+        options: []
+    });
+
+    customFilterGroups.push({
+        name: 'updated_at',
+        placeholder: 'Updated Date',
+        type: 'date',
+        multiple: true,
+        options: []
+    });
+
+    return customFilterGroups;
+}
+
+// Hook to create filter change handler for documents
+export function useDocumentFilterHandler(search: SearchInterface) {
+    return (newFilters: BaseFilter[]) => {
+        if (newFilters.length === 0) {
+            search.clearFilters();
+            return;
+        }
+
+        search.clearFilters(false);
+
+        newFilters.forEach(filter => {
+            if (filter.value && filter.value.length > 0) {
+                const filterName = filter.name;
+                
+                let filterValue;
+                if (filter.type === 'date' && filter.multiple) {
+                    // Handle date range filters
+                    if (Array.isArray(filter.value) && filter.value.length > 0) {
+                        if (filter.value.length === 1) {
+                            // Single date - use as both start and end
+                            const dateValue = typeof filter.value[0] === 'object' ? (filter.value[0] as any).value : filter.value[0];
+                            filterValue = {
+                                gte: dateValue,
+                                lte: dateValue
+                            };
+                        } else if (filter.value.length === 2) {
+                            // Date range - start and end dates
+                            const startDate = typeof filter.value[0] === 'object' ? (filter.value[0] as any).value : filter.value[0];
+                            const endDate = typeof filter.value[1] === 'object' ? (filter.value[1] as any).value : filter.value[1];
+                            filterValue = {
+                                gte: startDate,
+                                lte: endDate
+                            };
+                        }
+                    }
+                } else if (filter.multiple) {
+                    filterValue = Array.isArray(filter.value) 
+                        ? filter.value.map((v: any) => typeof v === 'object' && v.value ? v.value : v)
+                        : [typeof filter.value === 'object' && (filter.value as any).value ? (filter.value as any).value : filter.value];
+                } else {
+                    // Single value - don't wrap in array
+                    filterValue = Array.isArray(filter.value) && filter.value[0] && typeof filter.value[0] === 'object'
+                        ? (filter.value[0] as any).value
+                        : Array.isArray(filter.value) && filter.value[0] 
+                            ? filter.value[0]
+                            : filter.value;
+                }
+                
+                if (filterName === 'name') {
+                    search.query.search_term = filterValue;
+                    search.query.name = filterValue;
+                } else {
+                    search.query[filterName] = filterValue;
+                }
+            }
+        });
+
+        search.search();
+    };
+}
+
+// Legacy component for backward compatibility
+export function DocumentsFacetsNav({
+    facets,
+    search,
+}: DocumentsFacetsNavProps) {
+    const [filters, setFilters] = useState<BaseFilter[]>([]);
+    const filterGroups = useDocumentFilterGroups(facets);
+    const handleFilterLogic = useDocumentFilterHandler(search);
+
+    const handleFilterChange: React.Dispatch<React.SetStateAction<BaseFilter[]>> = (value) => {
+        const newFilters = typeof value === 'function' ? value(filters) : value;
+        setFilters(newFilters);
+        handleFilterLogic(newFilters);
+    };
+
+    return (
+        <FilterProvider
+            filterGroups={filterGroups}
+            filters={filters}
+            setFilters={handleFilterChange}
+        >
+            <div className="flex gap-2 items-center">
+                <FilterBtn />
+                <FilterBar />
+                <FilterClear />
+            </div>
+        </FilterProvider>
+    );
+}