@vertesia/ui 0.60.0 → 0.62.0

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 pb-2 mb-2 border-b-2 border-blue-200 dark:border-blue-900 sticky top-0 bg-white dark:bg-gray-900 z-10 pt-1">
+      {sortedWorkstreams.map(([id, name]) => (
+        <button
+          key={id}
+          className={`px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-colors flex items-center gap-1.5
+                        ${activeWorkstream === id
+              ? "bg-blue-200 text-blue-800 dark:bg-blue-800 dark:text-blue-200 border-b-2 border-blue-500"
+              : "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800/30 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 w-4 h-4 text-xs
+                                ${activeWorkstream === id
+                    ? "bg-blue-200 text-blue-800 dark:bg-blue-800 dark:text-blue-200"
+                    : "bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-300"
+                  }`}
+              >
+                {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="h-3 w-3 text-green-500" />
+                ) : (
+                  <Clock className="h-3 w-3 text-amber-500" />
+                ))}
+            </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,195 @@
+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 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 (![AgentMessageType.COMPLETE, AgentMessageType.IDLE, AgentMessageType.REQUEST_INPUT].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 (![AgentMessageType.COMPLETE, AgentMessageType.IDLE, AgentMessageType.REQUEST_INPUT].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 (![AgentMessageType.COMPLETE, AgentMessageType.IDLE, AgentMessageType.REQUEST_INPUT].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 ||
+                [AgentMessageType.COMPLETE, AgentMessageType.IDLE, AgentMessageType.REQUEST_INPUT].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);
+}

package/src/features/agent/chat/ModernAgentOutput/with-types.d.ts

@@ -0,0 +1,15 @@
+import { AgentMessage, Plan } from '@vertesia/common';
+
+// Define a compatible interface to help with type issues
+export interface WorkstreamFlowPanelProps {
+  messages: AgentMessage[];
+  plan?: Plan;
+  workstreamStatus: Map<string, 'pending' | 'in_progress' | 'completed'>;
+  isOpen?: boolean; // Make isOpen optional
+  onClose: () => void;
+}
+
+// Declare module for the WorkstreamFlowPanel
+declare module '../WorkstreamFlow' {
+  export const WorkstreamFlowPanel: React.FC<WorkstreamFlowPanelProps>;
+}