@vertesia/ui 0.60.0 → 0.61.0

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

@@ -0,0 +1,246 @@
+import { AgentMessage, AgentMessageType, Plan } from "@vertesia/common";
+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";
+
+interface AllMessagesMixedProps {
+    messages: AgentMessage[];
+    bottomRef: React.RefObject<HTMLDivElement>;
+    viewMode?: 'stacked' | 'sliding';
+    isCompleted?: boolean;
+    plan?: Plan;
+    workstreamStatus?: Map<string, 'pending' | 'in_progress' | 'completed'>;
+    showPlanPanel?: boolean;
+    onTogglePlanPanel?: () => void;
+    plans?: Array<{ plan: Plan, timestamp: number }>;
+    activePlanIndex?: number;
+    onChangePlan?: (index: number) => void;
+    taskLabels?: Map<string, string>; // Maps task IDs to more descriptive labels
+}
+
+export default function AllMessagesMixed({
+    messages,
+    bottomRef,
+    viewMode = 'stacked',
+    isCompleted = false,
+    plan = { plan: [] },
+    workstreamStatus = new Map(),
+    showPlanPanel = false,
+    onTogglePlanPanel = () => { },
+    plans = [],
+    activePlanIndex = 0,
+    onChangePlan = () => { },
+}: AllMessagesMixedProps) {
+    const containerRef = React.useRef<HTMLDivElement | null>(null);
+    const [activeWorkstream, setActiveWorkstream] = useState<string>("all");
+
+    // Auto-scroll to bottom when messages change
+    useEffect(() => {
+        if (bottomRef.current) {
+            bottomRef.current.scrollIntoView({ behavior: "smooth" });
+        }
+    }, [messages, bottomRef]);
+
+    // Sort all messages chronologically
+    const sortedMessages = React.useMemo(
+        () =>
+            [...messages].sort((a, b) => {
+                const timeA = typeof a.timestamp === "number" ? a.timestamp : new Date(a.timestamp).getTime();
+                const timeB = typeof b.timestamp === "number" ? b.timestamp : new Date(b.timestamp).getTime();
+                return timeA - timeB;
+            }),
+        [messages],
+    );
+
+    // Get workstreams from messages - only from message.workstream_id
+    const workstreams = React.useMemo(() => {
+        // Just get the basic workstreams from the messages
+        const extractedWorkstreams = extractWorkstreams(sortedMessages);
+
+        // We'll keep taskLabels - they might be used for display purposes elsewhere
+        // but we won't use them to create new workstream tabs
+
+        return extractedWorkstreams;
+    }, [sortedMessages]);
+
+    // Count messages per workstream
+    const workstreamCounts = React.useMemo(() => {
+        const counts = new Map<string, number>();
+        counts.set("all", sortedMessages.length);
+
+        // Count main messages
+        const mainMessages = filterMessagesByWorkstream(sortedMessages, "main");
+        counts.set("main", mainMessages.length);
+
+        // Count other workstreams
+        sortedMessages.forEach((msg) => {
+            const workstreamId = getWorkstreamId(msg);
+            if (workstreamId !== "main") {
+                counts.set(workstreamId, (counts.get(workstreamId) || 0) + 1);
+            }
+        });
+
+        return counts;
+    }, [sortedMessages]);
+
+    // Filter messages based on active workstream
+    const displayMessages = React.useMemo(() => {
+        if (activeWorkstream === "all") {
+            return sortedMessages;
+        }
+        return filterMessagesByWorkstream(sortedMessages, activeWorkstream);
+    }, [sortedMessages, activeWorkstream]);
+
+    // Determine completion status for each workstream
+    const workstreamCompletionStatus = useMemo(() => {
+        const statusMap = new Map<string, boolean>();
+
+        // Group messages by workstream
+        const workstreamMessages = new Map<string, AgentMessage[]>();
+
+        sortedMessages.forEach(message => {
+            const workstreamId = getWorkstreamId(message);
+            if (!workstreamMessages.has(workstreamId)) {
+                workstreamMessages.set(workstreamId, []);
+            }
+            workstreamMessages.get(workstreamId)!.push(message);
+        });
+
+        // Check if each workstream is completed
+        for (const [workstreamId, msgs] of workstreamMessages.entries()) {
+            if (msgs.length > 0) {
+                const lastMessage = msgs[msgs.length - 1];
+                statusMap.set(workstreamId, [
+                    AgentMessageType.COMPLETE,
+                    AgentMessageType.IDLE,
+                    AgentMessageType.REQUEST_INPUT
+                ].includes(lastMessage.type));
+            }
+        }
+
+        return statusMap;
+    }, [sortedMessages]);
+
+    return (
+        <div
+            ref={containerRef}
+            className="flex-1 min-h-0 h-full overflow-y-auto py-2 px-4 sm:px-6 lg:px-8 flex flex-col relative"
+            data-testid="all-messages-mixed"
+            style={showPlanPanel ? { paddingRight: "350px" } : {}} // Only make space when panel is showing
+        >
+            {/* Plan panel - respect showPlanPanel flag */}
+            <InlineSlidingPlanPanel
+                plan={plan}
+                workstreamStatus={workstreamStatus}
+                isOpen={showPlanPanel}
+                onClose={onTogglePlanPanel}
+                plans={plans}
+                activePlanIndex={activePlanIndex}
+                onChangePlan={onChangePlan}
+            />
+
+
+            {/* Workstream tabs with completion indicators */}
+            <div className="sticky top-0 bg-white dark:bg-gray-900 z-10">
+                <WorkstreamTabs
+                    workstreams={workstreams}
+                    activeWorkstream={activeWorkstream}
+                    onSelectWorkstream={setActiveWorkstream}
+                    count={workstreamCounts}
+                    completionStatus={workstreamCompletionStatus}
+                />
+            </div>
+
+            {displayMessages.length === 0 ? (
+                <div className="flex items-center justify-center h-full text-center py-8">
+                    <div className="flex items-center px-4 py-3 text-gray-500 dark:text-gray-400">
+                        {activeWorkstream === "all"
+                            ? "Waiting for agent response..."
+                            : "No messages in this workstream yet..."}
+                    </div>
+                </div>
+            ) : (
+                <div className="flex-1 flex flex-col justify-start pb-4 space-y-2">
+                    {/* Show either all messages or just sliding view depending on viewMode */}
+                    {viewMode === 'stacked' ? (
+                        // Stacked view - show all messages in the current workstream
+                        // Add pulsating circle to the latest message if not completed
+                        displayMessages.map((message, index) => {
+                            // 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);
+
+                            return (
+                                <MessageItem
+                                    key={`${message.timestamp}-${index}`}
+                                    message={message}
+                                    showPulsatingCircle={isLatestNonCompletionMessage}
+                                />
+                            );
+                        })
+                    ) : (
+                        // Sliding view - only permanent messages and latest thinking from the current workstream
+                        <>
+                            {/* Get all messages to display in sliding view */}
+                            {(() => {
+                                // First get all permanent messages (ANSWER, QUESTION, COMPLETE, REQUEST_INPUT)
+                                const permanentMessages = displayMessages.filter(msg =>
+                                    msg.type === AgentMessageType.ANSWER ||
+                                    msg.type === AgentMessageType.QUESTION ||
+                                    msg.type === AgentMessageType.COMPLETE ||
+                                    msg.type === AgentMessageType.REQUEST_INPUT
+                                );
+
+                                // Then get the latest thinking message if not completed
+                                const latestThinkingMessage = !isCompleted ?
+                                    displayMessages
+                                        .filter(msg =>
+                                            msg.type === AgentMessageType.THOUGHT ||
+                                            msg.type === AgentMessageType.UPDATE ||
+                                            msg.type === AgentMessageType.PLAN)
+                                        .sort((a, b) => {
+                                            const timeA = typeof a.timestamp === 'number' ? a.timestamp : new Date(a.timestamp).getTime();
+                                            const timeB = typeof b.timestamp === 'number' ? b.timestamp : new Date(b.timestamp).getTime();
+                                            return timeB - timeA; // Sort descending - newest first
+                                        })[0]
+                                    : null;
+
+                                // Sort all messages by timestamp
+                                const allMessages = [...permanentMessages];
+                                if (latestThinkingMessage) {
+                                    allMessages.push(latestThinkingMessage);
+                                }
+
+                                allMessages.sort((a, b) => {
+                                    const timeA = typeof a.timestamp === 'number' ? a.timestamp : new Date(a.timestamp).getTime();
+                                    const timeB = typeof b.timestamp === 'number' ? b.timestamp : new Date(b.timestamp).getTime();
+                                    return timeA - timeB; // Sort ascending - oldest first
+                                });
+
+                                // Show pulsating circle only on the latest message if not completed
+                                return allMessages.map((message, index) => {
+                                    const isLatestMessage = !isCompleted &&
+                                        index === allMessages.length - 1 &&
+                                        ![AgentMessageType.COMPLETE, AgentMessageType.IDLE, AgentMessageType.REQUEST_INPUT].includes(message.type);
+
+                                    return (
+                                        <MessageItem
+                                            key={`${message.timestamp}-${index}`}
+                                            message={message}
+                                            showPulsatingCircle={isLatestMessage}
+                                        />
+                                    );
+                                });
+                            })()}
+
+                        </>
+                    )}
+                    <div ref={bottomRef} className="h-4" />
+                </div>
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,231 @@
+import { AsyncExecutionResult } from "@vertesia/client";
+import { Button, Command, CommandGroup, CommandItem, CommandList, Popover, PopoverContent, PopoverTrigger, useToast } from "@vertesia/ui/core";
+import { useUserSession } from "@vertesia/ui/session";
+import {
+    Bot,
+    ClipboardList,
+    CopyIcon,
+    DownloadCloudIcon,
+    ExternalLink,
+    MoreVertical,
+    Plus,
+    XIcon,
+} from "lucide-react";
+import { PayloadBuilderProvider, usePayloadBuilder } from "../../PayloadBuilder";
+import { getConversationUrl } from "./utils";
+
+interface HeaderProps {
+    title: string;
+    isCompleted: boolean;
+    onClose?: () => void;
+    isModal: boolean;
+    run: AsyncExecutionResult;
+    viewMode: "stacked" | "sliding";
+    onViewModeChange: (mode: "stacked" | "sliding") => void;
+    showPlanPanel: boolean;
+    hasPlan?: boolean;
+    onTogglePlanPanel: () => void;
+    onDownload?: () => void;
+    onCopyRunId?: () => void;
+    resetWorkflow?: () => void;
+}
+
+export default function Header({
+    title,
+    onClose,
+    isModal,
+    run,
+    viewMode,
+    onViewModeChange,
+    showPlanPanel,
+    hasPlan = false,
+    onTogglePlanPanel,
+    onDownload,
+    onCopyRunId,
+    resetWorkflow
+}: HeaderProps) {
+    return (
+        <PayloadBuilderProvider>
+            <div className="flex items-center justify-between py-1.5 px-2 border-b shadow-sm flex-shrink-0">
+                <div className="flex flex-wrap items-center space-x-2">
+                    <div className="flex items-center space-x-1">
+                        <Bot className="size-5 text-muted" />
+                        <span className="font-medium">{title}</span>
+                    </div>
+                    <span className="text-xs text-muted ml-1">
+                        (Run ID: {run.runId.substring(0, 8)}...)
+                    </span>
+                </div>
+                <div className="flex items-center space-x-2">
+                    {/* View Mode Toggle */}
+                    <div className="flex items-center space-x-1 bg-muted rounded p-0.5">
+                        <Button variant={viewMode === "stacked" ? "outline" : "ghost"} size="xs" className="rounded-l-md" onClick={() => onViewModeChange("stacked")}>
+                            Details
+                        </Button>
+                        <Button variant={viewMode === "sliding" ? "outline" : "ghost"} size="xs" className="rounded-l-md" onClick={() => onViewModeChange("sliding")}>
+                            Most Important
+                        </Button>
+                    </div>
+
+                    {/* Plan Panel Toggle - Nicer styled button */}
+                    <div className="relative">
+                        {/* Notification badge when plan is available but hidden */}
+                        {hasPlan && !showPlanPanel && (
+                            <span className="absolute -top-1 -right-1 w-2.5 h-2.5 bg-primary rounded-full border border-border z-10"></span>
+                        )}
+                        <Button
+                            size="sm"
+                            variant={showPlanPanel ? "primary" : "secondary"}
+                            onClick={onTogglePlanPanel}
+                            className={`transition-all duration-200 rounded-md`}
+                            title="Toggle plan panel"
+                        >
+                            <ClipboardList className="size-4 mr-1.5" />
+                            <span className="font-medium text-xs">{showPlanPanel ? "Hide Plan" : "Show Plan"}</span>
+                        </Button>
+                    </div>
+
+                    {/* More actions */}
+                    <MoreDropdown
+                        run={run}
+                        isModal={isModal}
+                        onClose={onClose}
+                        onDownload={onDownload}
+                        onCopyRunId={onCopyRunId}
+                        resetWorkflow={resetWorkflow}
+                    />
+                    {onClose && !isModal && (
+                        <Button size="xs" variant="ghost" onClick={onClose}>
+                            <XIcon className="size-4" />
+                        </Button>
+                    )}
+                </div>
+            </div>
+        </PayloadBuilderProvider>
+    );
+}
+
+function MoreDropdown({
+    run,
+    isModal,
+    onClose,
+    onDownload,
+    onCopyRunId,
+    resetWorkflow
+}: {
+    run: AsyncExecutionResult;
+    isModal: boolean;
+    onClose?: () => void;
+    onDownload?: () => void;
+    onCopyRunId?: () => void;
+    resetWorkflow?: () => void;
+}) {
+    const toast = useToast();
+    const { client } = useUserSession();
+    const builder = usePayloadBuilder();
+
+    const cancelWorkflow = async (run: AsyncExecutionResult) => {
+        try {
+            await client.store.workflows.terminate(run.workflowId, run.runId, "cancel");
+
+            toast({
+                status: "success",
+                title: "Workflow cancelled",
+                duration: 2000,
+            });
+
+            builder.reset();
+            resetWorkflow?.();
+
+            return true;
+        } catch (error) {
+            toast({
+                status: "error",
+                title: "Failed to cancel workflow",
+                duration: 2000,
+            });
+            return false;
+        }
+    };
+
+    const startNewAgent = () => {
+        builder.reset();
+        resetWorkflow?.();
+    }
+
+    const openUrl = (url: string) => {
+        window.open(url, "_blank");
+        return url;
+    }
+
+    return (
+        <Popover hover>
+            <PopoverTrigger>
+                <Button size="xs" variant="ghost" title="More actions">
+                    <MoreVertical className="size-4" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-48" align="end">
+                <div className="rounded-md shadow-lg z-50">
+                    <div className="py-1 min-w-36">
+                        <Command>
+                            <CommandList>
+                                <CommandGroup>
+                                    <div className="flex items-center px-3 py-1.5 text-xs text-gray-700 dark:text-gray-300">
+                                        <span className="text-muted">Actions</span>
+                                    </div>
+                                    {
+                                        isModal && (
+                                            <CommandItem className="text-xs" onSelect={() => openUrl(`/store/agent-runner?agentId=${run.runId}__${run.workflowId}`)}>
+                                                <ExternalLink className="size-3.5 mr-2 text-muted" /> Open in new tab
+                                            </CommandItem>
+                                        )
+                                    }
+                                    <CommandItem className="text-xs" onSelect={() => {
+                                        if (onCopyRunId) {
+                                            onCopyRunId();
+                                        } else {
+                                            navigator.clipboard.writeText(run.runId);
+                                            toast({
+                                                status: "success",
+                                                title: "Run ID copied",
+                                                duration: 2000,
+                                            });
+                                        }
+                                    }}>
+                                        <CopyIcon className="size-3.5 mr-2 text-muted" /> Copy Run ID
+                                    </CommandItem>
+                                    <CommandItem className="text-xs" onSelect={() => {
+                                        if (onDownload) {
+                                            onDownload();
+                                        } else {
+                                            getConversationUrl(client, run.runId).then((r) => window.open(r, "_blank"));
+                                        }
+                                    }}>
+                                        <DownloadCloudIcon className="size-3.5 mr-2 text-muted" /> Download
+                                        Conversation
+                                    </CommandItem>
+                                    {onClose && isModal && (
+                                        <CommandItem className="text-xs" onSelect={onClose}>
+                                            <XIcon className="size-3.5 mr-2 text-muted" /> Close
+                                        </CommandItem>
+                                    )}
+                                    <CommandItem className="text-xs text-destructive" onSelect={() => {
+                                        cancelWorkflow(run);
+                                    }}>
+                                        <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>
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+}

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

@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import { XIcon } from 'lucide-react';
+
+interface InlineSlideInPanelProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+    width?: string;
+}
+
+export default function InlineSlideInPanel({
+    isOpen,
+    onClose,
+    title,
+    children,
+    width = '320px'
+}: InlineSlideInPanelProps) {
+    const [mounted, setMounted] = useState(false);
+
+    // Debug logging
+    console.log("InlineSlideInPanel render:", { isOpen, mounted, title });
+
+    // Handle animation timing
+    useEffect(() => {
+        console.log("InlineSlideInPanel useEffect triggered. isOpen:", isOpen);
+        if (isOpen) {
+            console.log("InlineSlideInPanel setting mounted to true");
+            setMounted(true);
+        } else {
+            console.log("InlineSlideInPanel setting up timer to unmount");
+            const timer = setTimeout(() => {
+                console.log("InlineSlideInPanel timer fired, setting mounted to false");
+                setMounted(false);
+            }, 300); // Match transition duration
+            return () => clearTimeout(timer);
+        }
+    }, [isOpen]);
+    
+    if (!mounted && !isOpen) {
+        return null;
+    }
+    
+    return (
+        <div
+            className={`absolute top-12 right-0 bottom-0 z-40 bg-white dark:bg-gray-900 shadow-lg border-l border-gray-200 dark:border-gray-800 border-4 border-red-500`}
+            style={{ width, transform: 'none' }}
+        >
+            {/* Header */}
+            <div className="flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-800">
+                <h3 className="font-medium text-gray-800 dark:text-gray-200 text-sm">{title}</h3>
+                <button 
+                    className="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-full"
+                    onClick={onClose}
+                >
+                    <XIcon className="h-4 w-4" />
+                </button>
+            </div>
+            
+            {/* Content */}
+            <div className="p-3 overflow-y-auto" style={{ height: 'calc(100% - 44px)' }}>
+                {children}
+            </div>
+        </div>
+    );
+}