@vertesia/ui 0.66.0 → 0.68.0

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,
@@ -254,7 +261,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}
@@ -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>
+    );
+}

package/src/features/facets/RunsFacetsNav.tsx

@@ -0,0 +1,166 @@
+import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
+import { useState } from 'react';
+import { VEnvironmentFacet } from './VEnvironmentFacet';
+import { VInteractionFacet } from './VInteractionFacet';
+import { VStringFacet } from './VStringFacet';
+import { VUserFacet } from './VUserFacet';
+import { SearchInterface } from './VFacetsNav';
+
+interface RunsFacetsNavProps {
+    facets: {
+        type?: any[];
+        interactions?: any[];
+        environments?: any[];
+        models?: any[];
+        statuses?: any[];
+        finish_reason?: any[];
+        created_by?: any[];
+    };
+    search: SearchInterface;
+}
+
+// Hook to create filter groups for runs
+export function useRunsFilterGroups(facets: RunsFacetsNavProps['facets']): FilterGroup[] {
+    const customFilterGroups: FilterGroup[] = [];
+
+    if (facets.interactions) {
+        const interactionFilterGroup = VInteractionFacet({
+            buckets: facets.interactions || [],
+            name: 'interaction',
+            placeholder: 'Interactions',
+        });
+        customFilterGroups.push(interactionFilterGroup);
+    }
+
+    if (facets.environments) {
+        const environmentFilterGroup = VEnvironmentFacet({
+            buckets: facets.environments || [],
+            name: 'Environments'
+        });
+        customFilterGroups.push(environmentFilterGroup);
+    }
+
+    if (facets.models) {
+        const modelFilterGroup = VStringFacet({
+            search: null as any, // This will be provided by the search context
+            buckets: facets.models || [],
+            name: 'Model'
+        });
+        customFilterGroups.push(modelFilterGroup);
+    }
+
+    if (facets.statuses) {
+        const statusFilterGroup = VStringFacet({
+            search: null as any, // This will be provided by the search context
+            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: null as any, // This will be provided by the search context
+            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);
+    }
+
+    const dateAfterFilterGroup = {
+        name: 'start',
+        placeholder: 'Date After',
+        type: 'date' as const,
+        multiple: false
+    };
+    customFilterGroups.push(dateAfterFilterGroup);
+
+    const dateBeforeFilterGroup = {
+        name: 'end',
+        placeholder: 'Date Before',
+        type: 'date' as const,
+        multiple: false
+    };
+    customFilterGroups.push(dateBeforeFilterGroup);
+
+    return customFilterGroups;
+}
+
+// Hook to create filter change handler for runs
+export function useRunsFilterHandler(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 === 'stringList') {
+                    filterValue = filter.value.map(v => typeof v === 'string' ? v : v.value);
+                } 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;
+                }
+
+                search.query[filterName] = filterValue;
+            }
+        });
+
+        search.search();
+    };
+}
+
+// Legacy component for backward compatibility
+export function RunsFacetsNav({ facets, search }: RunsFacetsNavProps) {
+    const [filters, setFilters] = useState<BaseFilter[]>([]);
+    const filterGroups = useRunsFilterGroups(facets);
+    const handleFilterLogic = useRunsFilterHandler(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>
+    );
+}

package/src/features/facets/VFacetsNav.tsx

@@ -1,11 +1,5 @@
-import { Filter as BaseFilter, FilterBar, FilterGroup } from '@vertesia/ui/core';
-import { useUserSession } from '@vertesia/ui/session';
+import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
 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;
@@ -21,10 +15,9 @@ interface FacetsNavProps {
     search: SearchInterface;
     textSearch?: string;
 }
-export function VFacetsNav({ facets, search, textSearch = '' }: FacetsNavProps) {
+export function VFacetsNav({ search, textSearch = '' }: FacetsNavProps) {
     const [filters, setFilters] = useState<BaseFilter[]>([]);
     const customFilterGroups: FilterGroup[] = [];
-    const { typeRegistry } = useUserSession();
 
     if (textSearch) {
         customFilterGroups.push({
@@ -35,121 +28,6 @@ export function VFacetsNav({ facets, search, textSearch = '' }: FacetsNavProps)
         });
     }
 
-    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);
-    }
-
-    /** Run table */
-    if (facets.interactions) {
-        const interactionFilterGroup = VInteractionFacet({
-            buckets: facets.interactions || [],
-            name: 'interaction',
-            placeholder: 'Interactions',
-        });
-        customFilterGroups.push(interactionFilterGroup);
-    }
-
-    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.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) => {
 
         const newFilters = typeof value === 'function' ? value(filters) : value;
@@ -188,10 +66,16 @@ export function VFacetsNav({ facets, search, textSearch = '' }: FacetsNavProps)
     };
 
     return (
-        <FilterBar
+        <FilterProvider
             filterGroups={customFilterGroups}
             filters={filters}
             setFilters={handleFilterChange}
-        />
+        >
+            <div className="flex gap-2 items-center">
+                <FilterBtn />
+                <FilterBar />
+                <FilterClear />
+            </div>
+        </FilterProvider>
     )
 }