@vertesia/ui 0.24.0-dev.202601221707

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

@@ -0,0 +1,167 @@
+import { AgentMessage } from "@vertesia/common";
+import { CheckCircle, Clock } from "lucide-react";
+import { getWorkstreamId } from "./utils";
+
+interface WorkstreamTabsProps {
+  workstreams: Map<string, string>; // Map of workstream_id to displayName
+  activeWorkstream: string;
+  onSelectWorkstream: (id: string) => void;
+  count?: Map<string, number>; // Optional count of messages per workstream
+  completionStatus?: Map<string, boolean>; // Optional completion status per workstream
+}
+
+/**
+ * Component that displays tabs for different workstreams
+ */
+export default function WorkstreamTabs({
+  workstreams,
+  activeWorkstream,
+  onSelectWorkstream,
+  count,
+  completionStatus,
+}: WorkstreamTabsProps) {
+  // Create a new map with just the core workstreams
+  const filteredWorkstreams = new Map<string, string>();
+  filteredWorkstreams.set("all", "All Messages");
+  filteredWorkstreams.set("main", "Main");
+
+  // Only add actual workstreams from messages (not our test workstreams)
+  workstreams.forEach((name, id) => {
+    if (
+      id !== "all" &&
+      id !== "main" &&
+      id !== "research_france" &&
+      id !== "statistics"
+    ) {
+      filteredWorkstreams.set(id, name);
+    }
+  });
+
+  // Replace workstreams with our filtered version
+  workstreams = filteredWorkstreams;
+  // Sort workstream entries in a predictable order:
+  // 1. 'all' first
+  // 2. 'main' second
+  // 3. The rest alphabetically by ID
+  const sortedWorkstreams = Array.from(workstreams.entries()).sort(
+    ([idA], [idB]) => {
+      if (idA === "all") return -1;
+      if (idB === "all") return 1;
+      if (idA === "main") return -1;
+      if (idB === "main") return 1;
+      return idA.localeCompare(idB);
+    },
+  );
+
+  // Only show tabs if there are multiple workstreams (more than just 'all' and 'main')
+  const hasMultipleWorkstreams = sortedWorkstreams.length > 2;
+
+  // If there are no multiple workstreams, return an empty div to maintain layout
+  if (!hasMultipleWorkstreams) {
+    return <div className="py-1"></div>;
+  }
+
+  return (
+    <div className="flex overflow-x-auto space-x-1 mb-2 bg-muted border-b-2 border-muted/20 sticky top-0 z-10">
+      {sortedWorkstreams.map(([id, name]) => (
+        <button
+          key={id}
+          className={`px-2 py-1 text-xs font-medium whitespace-nowrap transition-colors flex items-center gap-1.5
+                        ${activeWorkstream === id
+              ? "bg-info text-info border-b-2 border-info"
+              : "text-muted hover:bg-muted border-b-2 border-transparent"
+            }`}
+          onClick={() => onSelectWorkstream(id)}
+          title={name.length > 20 ? name : undefined}
+        >
+          {/* Shorten long names for better UI */}
+          {name.length > 20 ? name.substring(0, 18) + "..." : name}
+          {count && count.has(id) && count.get(id)! > 0 && (
+            <div className="flex items-center space-x-1">
+              <span
+                className={`inline-flex items-center justify-center p-1 text-xs rounded-full
+                                ${activeWorkstream === id
+                    ? "bg-info text-info"
+                    : "bg-muted text-muted"
+                  }`}
+              >
+                {count.get(id)}
+              </span>
+              {/* Show completion status indicator if we have it and it's not 'all' */}
+              {completionStatus &&
+                id !== "all" &&
+                (completionStatus.get(id) ? (
+                  <CheckCircle className="size-3 text-success" />
+                ) : (
+                  <Clock className="size-3 text-attention" />
+                ))}
+            </div>
+          )}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Helper function to extract workstream information from messages
+ */
+export function extractWorkstreams(
+  messages: AgentMessage[],
+): Map<string, string> {
+  const workstreams = new Map<string, string>();
+
+  // Always include "all" and "main" workstreams
+  workstreams.set("all", "All Messages");
+  workstreams.set("main", "Main");
+
+  // Extract workstream IDs directly from message.workstream_id only
+  messages.forEach((message) => {
+    if (
+      message.workstream_id &&
+      message.workstream_id !== "main" &&
+      message.workstream_id !== "all" &&
+      !workstreams.has(message.workstream_id)
+    ) {
+      // Use the workstream_id as both the ID and the display name
+      workstreams.set(message.workstream_id, message.workstream_id);
+      console.log(`Found workstream: ${message.workstream_id}`);
+    }
+  });
+
+  // Special case: if there's only the 'main' workstream, we want to explicitly make sure it exists
+  // This ensures that both 'all' and 'main' are added if no additional workstreams are found
+  if (workstreams.size <= 2 && !workstreams.has("main")) {
+    workstreams.set("main", "Main");
+  }
+
+  console.log("Final workstreams map:", workstreams);
+
+  return workstreams;
+}
+
+/**
+ * Filter messages by workstream
+ */
+export function filterMessagesByWorkstream(
+  messages: AgentMessage[],
+  workstreamId: string,
+): AgentMessage[] {
+  if (workstreamId === "all") {
+    // Show all messages, no filtering needed
+    return [...messages];
+  } else if (workstreamId === "main") {
+    // For the main workstream, show only messages that belong to the main workstream
+    // This excludes messages that belong to specific tasks/workstreams
+    return messages.filter((message) => {
+      const msgWorkstreamId = getWorkstreamId(message);
+      return msgWorkstreamId === "main";
+    });
+  } else {
+    // For specific workstreams, show only messages that match the workstream_id
+    return messages.filter((message) => {
+      const msgWorkstreamId = getWorkstreamId(message);
+      return msgWorkstreamId === workstreamId;
+    });
+  }
+}

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

@@ -0,0 +1,527 @@
+import dayjs from "dayjs";
+import { AgentMessage, AgentMessageType } from "@vertesia/common";
+import { VertesiaClient } from "@vertesia/client";
+
+export function insertMessageInTimeline(arr: AgentMessage[], m: AgentMessage) {
+    const t = typeof m.timestamp === "number" ? m.timestamp : new Date(m.timestamp).getTime();
+    const idx = arr.findIndex((a) => {
+        const at = typeof a.timestamp === "number" ? a.timestamp : new Date(a.timestamp).getTime();
+        return at > t;
+    });
+    if (idx === -1) arr.push(m);
+    else arr.splice(idx, 0, m);
+}
+
+/**
+ * Check if a conversation is still in progress
+ * 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;
+
+    // First, group messages by workstream
+    const workstreamMessages = new Map<string, AgentMessage[]>();
+
+    messages.forEach((message) => {
+        const workstreamId = getWorkstreamId(message);
+        if (!workstreamMessages.has(workstreamId)) {
+            workstreamMessages.set(workstreamId, []);
+        }
+        workstreamMessages.get(workstreamId)!.push(message);
+    });
+
+    // Log all workstreams we found for debugging
+    console.log("[isInProgress] Workstreams found:", Array.from(workstreamMessages.keys()));
+
+    // If there's only one workstream and it's not "main", we should treat it as the main one
+    // This handles cases where a conversation might not have an explicit main workstream
+    if (workstreamMessages.size === 1 && !workstreamMessages.has("main")) {
+        const onlyWorkstreamId = workstreamMessages.keys().next().value || "unknown";
+        console.log(`[isInProgress] Only one workstream found (${onlyWorkstreamId}), treating as main`);
+
+        const onlyWorkstreamMsgs = workstreamMessages.get(onlyWorkstreamId)!;
+        const lastMessage = onlyWorkstreamMsgs[onlyWorkstreamMsgs.length - 1];
+
+        console.log(`[isInProgress] Last message type in only workstream: ${lastMessage.type}`);
+
+        // Check if this single workstream is completed
+        if (!DONE_STATES.includes(
+            lastMessage.type
+        )) {
+            console.log("[isInProgress] Only workstream is still in progress");
+            return true;
+        }
+
+        console.log("[isInProgress] Only workstream is completed");
+        return false;
+    }
+
+    // Check the main workstream if it exists
+    if (workstreamMessages.has("main")) {
+        const mainWorkstreamMsgs = workstreamMessages.get("main")!;
+
+        // If there are no messages in the main workstream, the conversation is still in progress
+        if (mainWorkstreamMsgs.length === 0) {
+            console.log("[isInProgress] Main workstream exists but has no messages, still in progress");
+            return true;
+        }
+
+        // Check if the main workstream is completed
+        const lastMainMessage = mainWorkstreamMsgs[mainWorkstreamMsgs.length - 1];
+        console.log(`[isInProgress] Last message type in main workstream: ${lastMainMessage.type}`);
+
+        if (!DONE_STATES.includes(
+            lastMainMessage.type
+        )) {
+            console.log("[isInProgress] Main workstream is still in progress");
+            return true;
+        }
+
+        console.log("[isInProgress] Main workstream is completed");
+        return false;
+    }
+
+    // If we get here, there are multiple workstreams but no "main" workstream
+    // We'll keep the conversation active if any workstream is still active
+    console.log("[isInProgress] Multiple workstreams but no main, checking if any are still active");
+
+    for (const [workstreamId, msgs] of workstreamMessages.entries()) {
+        if (msgs.length > 0) {
+            const lastMessage = msgs[msgs.length - 1];
+            if (!DONE_STATES.includes(
+                lastMessage.type
+            )) {
+                console.log(`[isInProgress] Workstream ${workstreamId} is still active`);
+                return true;
+            }
+        }
+    }
+
+    console.log("[isInProgress] All workstreams are completed");
+    return false;
+}
+
+export const formatRelative = (ts: number | string) =>
+    typeof ts === "number" ? dayjs(ts).fromNow() : dayjs(new Date(ts)).fromNow();
+
+/**
+ * Extract the workstream ID from a message
+ * @param message The agent message to analyze
+ * @returns The workstream ID (defaults to 'main' if none found)
+ */
+export function getWorkstreamId(message: AgentMessage): string {
+    // Only use the direct workstream_id property on the message
+    if (message.workstream_id) {
+        // For debugging COMPLETE messages
+        if (message.type === AgentMessageType.COMPLETE) {
+            console.log("[getWorkstreamId] COMPLETE message with workstream_id:", message.workstream_id);
+        }
+        return message.workstream_id;
+    }
+
+    // For debugging COMPLETE messages without workstream_id
+    if (message.type === AgentMessageType.COMPLETE) {
+        console.log("[getWorkstreamId] COMPLETE message without workstream_id, defaulting to 'main'");
+    }
+
+    // Default to 'main' workstream
+    return "main";
+}
+
+/**
+ * Get a map of workstream IDs to their completion status
+ * @param messages List of agent messages
+ * @returns Map of workstream IDs to completion status ('pending', 'in_progress', or 'completed')
+ */
+export function getWorkstreamStatusMap(messages: AgentMessage[]): Map<string, "pending" | "in_progress" | "completed"> {
+    const workstreamMessages = new Map<string, AgentMessage[]>();
+    const statusMap = new Map<string, "pending" | "in_progress" | "completed">();
+
+    // Group messages by workstream
+    messages.forEach((message) => {
+        const workstreamId = getWorkstreamId(message);
+        if (!workstreamMessages.has(workstreamId)) {
+            workstreamMessages.set(workstreamId, []);
+            // Initialize all workstreams as pending
+            statusMap.set(workstreamId, "pending");
+        }
+        workstreamMessages.get(workstreamId)!.push(message);
+    });
+
+    // Log all workstreams found
+    console.log("[getWorkstreamStatusMap] Found workstreams:", Array.from(workstreamMessages.keys()));
+
+    // Determine status based on last message type
+    for (const [workstreamId, msgs] of workstreamMessages.entries()) {
+        if (msgs.length > 0) {
+            // Mark as in_progress by default if there are any messages
+            statusMap.set(workstreamId, "in_progress");
+
+            // Check if completed based on last message or any COMPLETE message
+            const lastMessage = msgs[msgs.length - 1];
+
+            // Check for any COMPLETE message in this workstream
+            const hasCompleteMessage = msgs.some(msg =>
+                msg.type === AgentMessageType.COMPLETE &&
+                (msg.workstream_id === workstreamId || (!msg.workstream_id && workstreamId === 'main'))
+            );
+
+            if (hasCompleteMessage ||
+                DONE_STATES.includes(lastMessage.type)) {
+                console.log(`[getWorkstreamStatusMap] Marking workstream ${workstreamId} as completed`);
+                statusMap.set(workstreamId, "completed");
+            } else {
+                console.log(`[getWorkstreamStatusMap] Workstream ${workstreamId} is in_progress`);
+            }
+        }
+    }
+
+    // Log final status map for debugging
+    console.log("[getWorkstreamStatusMap] Final status map:",
+        Array.from(statusMap.entries()).map(([id, status]) => `${id}: ${status}`).join(', '));
+
+    return statusMap;
+}
+
+// Helper function to get conversation URL - used by other components
+export async function getConversationUrl(
+    vertesia: VertesiaClient,
+    workflowRunId: string,
+): Promise<string> {
+    return vertesia.files
+        .getDownloadUrl(`agents/${workflowRunId}/conversation.json`)
+        .then((r) => r.url);
+}
+
+/**
+ * Represents a group of messages for display purposes
+ * Either a single message or a group of consecutive tool calls
+ */
+export type MessageGroup =
+    | { type: 'single'; message: AgentMessage }
+    | { type: 'tool_group'; messages: AgentMessage[]; firstTimestamp: number | string };
+
+/**
+ * Streaming message data structure
+ */
+export interface StreamingData {
+    text: string;
+    workstreamId?: string;
+    isComplete?: boolean;
+    startTimestamp: number;
+}
+
+/**
+ * Tool execution status for display purposes
+ */
+export type ToolExecutionStatus = "running" | "completed" | "error" | "warning";
+
+/**
+ * Extended group type that includes streaming messages for interleaved rendering
+ */
+export type RenderableGroup =
+    | { type: 'single'; message: AgentMessage }
+    | { type: 'tool_group'; messages: AgentMessage[]; firstTimestamp: number; toolRunId?: string; toolStatus?: ToolExecutionStatus }
+    | { type: 'streaming'; streamingId: string; text: string; workstreamId?: string; startTimestamp: number; isComplete?: boolean };
+
+/**
+ * Check if a message is a tool call (THOUGHT with tool details)
+ */
+export function isToolCallMessage(message: AgentMessage): boolean {
+    return message.type === AgentMessageType.THOUGHT && !!message.details?.tool;
+}
+
+/**
+ * Get the tool_run_id from a message's details, if present
+ */
+export function getToolRunId(message: AgentMessage): string | undefined {
+    return message.details?.tool_run_id;
+}
+
+/**
+ * Get the tool_iteration from a message's details, if present
+ * This is used to group parallel tool calls from the same iteration
+ */
+export function getToolIteration(message: AgentMessage): number | undefined {
+    return message.details?.tool_iteration;
+}
+
+/**
+ * Get the tool execution status from a message's details
+ */
+export function getToolStatus(message: AgentMessage): ToolExecutionStatus | undefined {
+    return message.details?.tool_status;
+}
+
+/**
+ * Group consecutive tool call messages together for a cleaner display
+ * Non-tool messages remain as single items
+ *
+ * @param messages Sorted array of messages
+ * @returns Array of message groups
+ */
+export function groupConsecutiveToolCalls(messages: AgentMessage[]): MessageGroup[] {
+    const groups: MessageGroup[] = [];
+    let currentToolGroup: AgentMessage[] = [];
+
+    const flushToolGroup = () => {
+        if (currentToolGroup.length > 0) {
+            if (currentToolGroup.length === 1) {
+                // Single tool call - no need to group
+                groups.push({ type: 'single', message: currentToolGroup[0] });
+            } else {
+                // Multiple consecutive tool calls - group them
+                groups.push({
+                    type: 'tool_group',
+                    messages: currentToolGroup,
+                    firstTimestamp: currentToolGroup[0].timestamp
+                });
+            }
+            currentToolGroup = [];
+        }
+    };
+
+    for (const message of messages) {
+        if (isToolCallMessage(message)) {
+            currentToolGroup.push(message);
+        } else {
+            // Flush any pending tool group before adding non-tool message
+            flushToolGroup();
+            groups.push({ type: 'single', message });
+        }
+    }
+
+    // Flush any remaining tool group
+    flushToolGroup();
+
+    return groups;
+}
+
+/**
+ * Helper to get timestamp as number
+ */
+function getTimestampMs(timestamp: number | string): number {
+    return typeof timestamp === "number" ? timestamp : new Date(timestamp).getTime();
+}
+
+/**
+ * Group messages with streaming messages interleaved in chronological order
+ * Messages with the same tool_iteration are grouped together (parallel tool calls)
+ * Messages with the same tool_run_id are grouped together (same tool execution)
+ * Messages without either fall back to consecutive grouping
+ *
+ * @param messages Sorted array of messages
+ * @param streamingMessages Map of streaming messages by ID
+ * @param activeWorkstream Optional workstream filter
+ * @returns Array of renderable groups with streaming interleaved
+ */
+export function groupMessagesWithStreaming(
+    messages: AgentMessage[],
+    streamingMessages: Map<string, StreamingData>,
+    activeWorkstream?: string
+): RenderableGroup[] {
+    // First pass: collect messages by tool_iteration (for parallel tool calls in same iteration)
+    const iterationGroups = new Map<number, {
+        messages: AgentMessage[];
+        firstTimestamp: number;
+    }>();
+
+    // Also collect messages by tool_run_id (for sub-messages within same tool)
+    const toolRunGroups = new Map<string, {
+        messages: AgentMessage[];
+        firstTimestamp: number;
+    }>();
+
+    // Messages without tool_iteration or tool_run_id will be processed separately
+    const standaloneMessages: AgentMessage[] = [];
+
+    for (const message of messages) {
+        if (isToolCallMessage(message)) {
+            const toolIteration = getToolIteration(message);
+            const toolRunId = getToolRunId(message);
+
+            if (toolIteration !== undefined) {
+                // Group by tool_iteration - this groups parallel tool calls together
+                if (!iterationGroups.has(toolIteration)) {
+                    iterationGroups.set(toolIteration, {
+                        messages: [],
+                        firstTimestamp: getTimestampMs(message.timestamp)
+                    });
+                }
+                iterationGroups.get(toolIteration)!.messages.push(message);
+            } else if (toolRunId) {
+                // Fallback: group by tool_run_id if no iteration
+                if (!toolRunGroups.has(toolRunId)) {
+                    toolRunGroups.set(toolRunId, {
+                        messages: [],
+                        firstTimestamp: getTimestampMs(message.timestamp)
+                    });
+                }
+                toolRunGroups.get(toolRunId)!.messages.push(message);
+            } else {
+                // No tool_iteration or tool_run_id - will use consecutive grouping
+                standaloneMessages.push(message);
+            }
+        } else {
+            standaloneMessages.push(message);
+        }
+    }
+
+    // Create unified list of items with timestamps
+    type GroupedItem =
+        | { kind: 'message'; message: AgentMessage; timestamp: number }
+        | { kind: 'streaming'; streamingId: string; data: StreamingData; timestamp: number }
+        | { kind: 'iteration_group'; iteration: number; messages: AgentMessage[]; timestamp: number }
+        | { kind: 'tool_run'; toolRunId: string; messages: AgentMessage[]; timestamp: number };
+
+    const items: GroupedItem[] = [];
+
+    // Add iteration groups (parallel tool calls from same iteration)
+    iterationGroups.forEach((group, iteration) => {
+        items.push({
+            kind: 'iteration_group',
+            iteration,
+            messages: group.messages,
+            timestamp: group.firstTimestamp
+        });
+    });
+
+    // Add tool_run groups as single items
+    toolRunGroups.forEach((group, toolRunId) => {
+        items.push({
+            kind: 'tool_run',
+            toolRunId,
+            messages: group.messages,
+            timestamp: group.firstTimestamp
+        });
+    });
+
+    // Add standalone messages
+    for (const message of standaloneMessages) {
+        items.push({
+            kind: 'message',
+            message,
+            timestamp: getTimestampMs(message.timestamp)
+        });
+    }
+
+    // Add streaming messages (filter by workstream if specified)
+    streamingMessages.forEach((data, streamingId) => {
+        // Skip empty streaming messages
+        if (!data.text) return;
+
+        // Filter by workstream if specified
+        if (activeWorkstream && activeWorkstream !== "all") {
+            const streamWorkstream = data.workstreamId || "main";
+            if (activeWorkstream !== streamWorkstream) return;
+        }
+
+        items.push({
+            kind: 'streaming',
+            streamingId,
+            data,
+            timestamp: data.startTimestamp
+        });
+    });
+
+    // Sort by timestamp, but streaming always goes at the end
+    items.sort((a, b) => {
+        // Streaming messages always come last
+        if (a.kind === 'streaming' && b.kind !== 'streaming') return 1;
+        if (b.kind === 'streaming' && a.kind !== 'streaming') return -1;
+        // Both streaming or both non-streaming: sort by timestamp
+        return a.timestamp - b.timestamp;
+    });
+
+    // Build final groups with consecutive grouping for standalone tool messages
+    const groups: RenderableGroup[] = [];
+    let currentToolGroup: AgentMessage[] = [];
+
+    const flushToolGroup = () => {
+        if (currentToolGroup.length > 0) {
+            if (currentToolGroup.length === 1) {
+                groups.push({ type: 'single', message: currentToolGroup[0] });
+            } else {
+                groups.push({
+                    type: 'tool_group',
+                    messages: currentToolGroup,
+                    firstTimestamp: getTimestampMs(currentToolGroup[0].timestamp)
+                });
+            }
+            currentToolGroup = [];
+        }
+    };
+
+    for (const item of items) {
+        if (item.kind === 'streaming') {
+            // Streaming breaks consecutive tool grouping
+            flushToolGroup();
+            groups.push({
+                type: 'streaming',
+                streamingId: item.streamingId,
+                text: item.data.text,
+                workstreamId: item.data.workstreamId,
+                startTimestamp: item.data.startTimestamp,
+                isComplete: item.data.isComplete
+            });
+        } else if (item.kind === 'iteration_group') {
+            // Iteration group - parallel tool calls from same iteration
+            flushToolGroup();
+            // Sort messages within the group by timestamp
+            const sortedMessages = [...item.messages].sort(
+                (a, b) => getTimestampMs(a.timestamp) - getTimestampMs(b.timestamp)
+            );
+            // Get the latest status from the group
+            const latestStatus = sortedMessages.reduce<ToolExecutionStatus | undefined>(
+                (status, msg) => getToolStatus(msg) || status,
+                undefined
+            );
+            groups.push({
+                type: 'tool_group',
+                messages: sortedMessages,
+                firstTimestamp: item.timestamp,
+                toolStatus: latestStatus
+            });
+        } else if (item.kind === 'tool_run') {
+            // Tool run group - already grouped by tool_run_id
+            flushToolGroup();
+            // Sort messages within the group by timestamp
+            const sortedMessages = [...item.messages].sort(
+                (a, b) => getTimestampMs(a.timestamp) - getTimestampMs(b.timestamp)
+            );
+            // Get the latest status from the group
+            const latestStatus = sortedMessages.reduce<ToolExecutionStatus | undefined>(
+                (status, msg) => getToolStatus(msg) || status,
+                undefined
+            );
+            groups.push({
+                type: 'tool_group',
+                messages: sortedMessages,
+                firstTimestamp: item.timestamp,
+                toolRunId: item.toolRunId,
+                toolStatus: latestStatus
+            });
+        } else if (isToolCallMessage(item.message)) {
+            // Standalone tool message - use consecutive grouping
+            currentToolGroup.push(item.message);
+        } else {
+            // Non-tool message breaks grouping
+            flushToolGroup();
+            groups.push({ type: 'single', message: item.message });
+        }
+    }
+
+    // Flush any remaining tool group
+    flushToolGroup();
+
+    return groups;
+}