@vertesia/ui 0.24.0-dev.202601221707

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

@@ -0,0 +1,228 @@
+import { AgentMessage, BatchProgressDetails, BatchItemStatus } from "@vertesia/common";
+import { Button, useToast } from "@vertesia/ui/core";
+import dayjs from "dayjs";
+import {
+    CheckCircle,
+    AlertCircle,
+    ChevronDown,
+    ChevronRight,
+    CopyIcon,
+    Layers,
+    Loader2,
+} from "lucide-react";
+import { useState, memo } from "react";
+import { PulsatingCircle } from "../AnimatedThinkingDots";
+
+interface BatchProgressPanelProps {
+    message: AgentMessage;
+    batchData: BatchProgressDetails;
+    isRunning?: boolean;
+}
+
+function BatchProgressPanelComponent({ message, batchData, isRunning = false }: BatchProgressPanelProps) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const toast = useToast();
+
+    const { tool_name, total, completed, succeeded, failed, items, started_at, completed_at } = batchData;
+
+    const progress = total > 0 ? (completed / total) * 100 : 0;
+    const hasErrors = failed > 0;
+    const isComplete = completed === total && !isRunning;
+
+    // Determine overall status
+    const getOverallStatus = () => {
+        if (isRunning || !isComplete) return "running";
+        if (failed === total) return "error";
+        if (failed > 0) return "warning";
+        return "completed";
+    };
+
+    const overallStatus = getOverallStatus();
+
+    // Status indicator
+    const renderStatusIndicator = () => {
+        if (isRunning || !isComplete) {
+            return <PulsatingCircle size="sm" color="blue" />;
+        }
+        if (overallStatus === "completed") {
+            return <CheckCircle className="size-4 text-success" />;
+        }
+        if (overallStatus === "error" || overallStatus === "warning") {
+            return <AlertCircle className="size-4 text-destructive" />;
+        }
+        return <Layers className="size-4 text-purple-600" />;
+    };
+
+    // Border color based on status
+    const getBorderColor = () => {
+        if (overallStatus === "completed") return "border-l-success";
+        if (overallStatus === "error") return "border-l-destructive";
+        if (overallStatus === "warning") return "border-l-attention";
+        return "border-l-blue-500";
+    };
+
+    // Progress bar color
+    const getProgressColor = () => {
+        if (hasErrors) return "bg-attention";
+        if (isComplete) return "bg-success";
+        return "bg-blue-500";
+    };
+
+    const copyToClipboard = () => {
+        const content = JSON.stringify(batchData, null, 2);
+        navigator.clipboard.writeText(content).then(() => {
+            toast({
+                status: "success",
+                title: "Copied batch details to clipboard",
+                duration: 2000,
+            });
+        });
+    };
+
+    const duration = completed_at
+        ? completed_at - started_at
+        : Date.now() - started_at;
+    const durationSec = (duration / 1000).toFixed(1);
+
+    return (
+        <div className={`border-l-4 ${getBorderColor()} shadow-md overflow-hidden bg-white dark:bg-gray-900 mb-5`}>
+            {/* Header */}
+            <div
+                className="flex items-center justify-between px-4 py-2 border-b border-gray-100/80 dark:border-gray-800/80 bg-blue-50/50 dark:bg-blue-900/10 cursor-pointer"
+                onClick={() => setIsExpanded(!isExpanded)}
+            >
+                <div className="flex items-center gap-2">
+                    {renderStatusIndicator()}
+                    <span className="text-xs font-medium text-muted">Batch</span>
+                    <span className="text-xs text-blue-600 dark:text-blue-400 font-medium">
+                        {tool_name}
+                    </span>
+                    <span className="text-xs text-muted">
+                        {completed}/{total}
+                    </span>
+                    {isExpanded ? (
+                        <ChevronDown className="size-3 text-muted" />
+                    ) : (
+                        <ChevronRight className="size-3 text-muted" />
+                    )}
+                </div>
+
+                <div className="flex items-center gap-2">
+                    <span className="text-xs text-muted">
+                        {durationSec}s
+                    </span>
+                    <span className="text-xs text-muted">
+                        {dayjs(started_at).format("HH:mm:ss")}
+                    </span>
+                    <Button
+                        variant="ghost"
+                        size="xs"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            copyToClipboard();
+                        }}
+                        className="text-muted"
+                        title="Copy batch details"
+                    >
+                        <CopyIcon className="size-3" />
+                    </Button>
+                </div>
+            </div>
+
+            {/* Progress bar */}
+            <div className="px-4 py-2 bg-gray-50/50 dark:bg-gray-800/30">
+                <div className="flex items-center gap-3">
+                    <div className="flex-1 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                        <div
+                            className={`h-full ${getProgressColor()} transition-all duration-300 ease-out`}
+                            style={{ width: `${progress}%` }}
+                        />
+                    </div>
+                    <div className="flex items-center gap-2 text-xs">
+                        {succeeded > 0 && (
+                            <span className="text-success flex items-center gap-1">
+                                <CheckCircle className="size-3" />
+                                {succeeded}
+                            </span>
+                        )}
+                        {failed > 0 && (
+                            <span className="text-destructive flex items-center gap-1">
+                                <AlertCircle className="size-3" />
+                                {failed}
+                            </span>
+                        )}
+                        {isRunning && completed < total && (
+                            <span className="text-blue-500 flex items-center gap-1">
+                                <Loader2 className="size-3 animate-spin" />
+                                {total - completed}
+                            </span>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            {/* Expanded item list */}
+            {isExpanded && items.length > 0 && (
+                <div className="max-h-64 overflow-y-auto">
+                    {items.map((item: BatchItemStatus) => (
+                        <div
+                            key={item.id}
+                            className="flex items-center gap-2 px-4 py-1.5 text-xs border-b border-gray-100 dark:border-gray-800 last:border-b-0 hover:bg-gray-50 dark:hover:bg-gray-800/50"
+                        >
+                            {/* Status icon */}
+                            <div className="w-4 flex-shrink-0">
+                                {item.status === "success" && (
+                                    <CheckCircle className="size-3 text-success" />
+                                )}
+                                {item.status === "error" && (
+                                    <AlertCircle className="size-3 text-destructive" />
+                                )}
+                                {item.status === "running" && (
+                                    <Loader2 className="size-3 text-blue-500 animate-spin" />
+                                )}
+                                {item.status === "pending" && (
+                                    <div className="size-3 rounded-full border border-gray-300 dark:border-gray-600" />
+                                )}
+                            </div>
+
+                            {/* Item ID */}
+                            <span className="font-mono text-muted w-24 truncate flex-shrink-0" title={item.id}>
+                                {item.id}
+                            </span>
+
+                            {/* Message */}
+                            <span className="text-muted truncate flex-1" title={item.message}>
+                                {item.message || (item.status === "pending" ? "Waiting..." : "")}
+                            </span>
+
+                            {/* Duration */}
+                            {item.duration_ms !== undefined && (
+                                <span className="text-muted flex-shrink-0">
+                                    {(item.duration_ms / 1000).toFixed(1)}s
+                                </span>
+                            )}
+                        </div>
+                    ))}
+                </div>
+            )}
+
+            {/* Summary message if collapsed and has message */}
+            {!isExpanded && message.message && (
+                <div className="px-4 py-2 text-xs text-muted">
+                    {message.message}
+                </div>
+            )}
+        </div>
+    );
+}
+
+// Memoize to prevent unnecessary re-renders
+const BatchProgressPanel = memo(BatchProgressPanelComponent, (prevProps, nextProps) => {
+    if (prevProps.isRunning !== nextProps.isRunning) return false;
+    if (prevProps.batchData.completed !== nextProps.batchData.completed) return false;
+    if (prevProps.batchData.succeeded !== nextProps.batchData.succeeded) return false;
+    if (prevProps.batchData.failed !== nextProps.batchData.failed) return false;
+    return true;
+});
+
+export default BatchProgressPanel;

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, XIcon } from "lucide-react";
+import { PayloadBuilderProvider, usePayloadBuilder } from "../../PayloadBuilder";
+import { getConversationUrl } from "./utils";
+
+export 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;
+    onExportPdf?: () => void;
+    /** Additional className for the outer container */
+    className?: string;
+    /** Additional className for the title section */
+    titleClassName?: string;
+    /** Additional className for the actions section */
+    actionsClassName?: string;
+}
+
+export default function Header({
+    title,
+    onClose,
+    isModal,
+    run,
+    viewMode,
+    onViewModeChange,
+    showPlanPanel,
+    hasPlan = false,
+    onTogglePlanPanel,
+    onDownload,
+    onCopyRunId,
+    resetWorkflow,
+    onExportPdf,
+    className,
+    titleClassName,
+    actionsClassName,
+}: HeaderProps) {
+    return (
+        <PayloadBuilderProvider>
+            <div className={`flex flex-wrap items-end justify-between py-1.5 px-2 border-b shadow-sm flex-shrink-0 ${className || ""}`}>
+                <div className={`flex flex-wrap items-center space-x-2 ${titleClassName || ""}`}>
+                    <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 justify-end items-center space-x-2 ml-auto ${actionsClassName || ""}`}>
+                    {/* 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}
+                        onExportPdf={onExportPdf}
+                    />
+                    {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,
+    onExportPdf,
+}: {
+    run: AsyncExecutionResult;
+    isModal: boolean;
+    onClose?: () => void;
+    onDownload?: () => void;
+    onCopyRunId?: () => void;
+    resetWorkflow?: () => void;
+    onExportPdf?: () => 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 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>
+                                    {onExportPdf && (
+                                        <CommandItem className="text-xs" onSelect={onExportPdf}>
+                                            <DownloadCloudIcon className="size-3.5 mr-2 text-muted" /> Export as PDF
+                                        </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>
+                                </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>
+    );
+}