@vertesia/ui 0.59.0 → 0.61.0

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

@@ -0,0 +1,123 @@
+import { Plan } from "@vertesia/common";
+import { AlertCircle, CheckCircle, Circle, Clock } from "lucide-react";
+
+interface PlanPanelProps {
+    plan: Plan;
+    workstreamStatus: Map<string, "pending" | "in_progress" | "completed">;
+    isVisible: boolean;
+}
+
+export default function PlanPanel({ plan, workstreamStatus, isVisible }: PlanPanelProps) {
+    if (!isVisible) return null;
+
+    return (
+        <div className="border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 p-3 shadow-sm transition-all duration-300 ease-in-out transform">
+            <div className="text-xs font-medium mb-2 text-gray-800 dark:text-gray-200">Agent Plan</div>
+
+            {/* Plan Steps */}
+            {plan.plan && plan.plan.length > 0 ? (
+                <div className="space-y-1.5">
+                    {plan.plan.map((task, index) => {
+                        // Extract task info
+                        const taskId = task.id.toString();
+                        const taskGoal = task.goal;
+
+                        // Determine task status - use task.status if available or lookup from workstream
+                        let status: "pending" | "in_progress" | "completed" | "skipped" = task.status || "pending";
+                        if (workstreamStatus.has(taskId)) {
+                            status = workstreamStatus.get(taskId)!;
+                        }
+
+                        // Determine status icon and style
+                        let StatusIcon = Circle;
+                        let statusColor = "text-gray-400";
+
+                        if (status === "in_progress") {
+                            StatusIcon = Clock;
+                            statusColor = "text-blue-500";
+                        } else if (status === "completed") {
+                            StatusIcon = CheckCircle;
+                            statusColor = "text-green-500";
+                        }
+
+                        return (
+                            <div key={index} className="flex items-start">
+                                <div className={`mr-1.5 mt-0.5 ${statusColor}`}>
+                                    <StatusIcon className="h-3.5 w-3.5" />
+                                </div>
+                                <div className="text-xs">
+                                    <span className="text-gray-700 dark:text-gray-300">{taskGoal}</span>
+                                    <span className="ml-1 bg-gray-200 dark:bg-gray-700 px-1 py-0.5 rounded text-[10px] font-mono">
+                                        {taskId}
+                                    </span>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            ) : (
+                <div className="text-xs text-gray-500 dark:text-gray-400 italic flex items-center">
+                    <AlertCircle className="h-3.5 w-3.5 mr-1.5 text-amber-500" />
+                    No plan detected yet
+                </div>
+            )}
+
+            {/* Workstream Status Summary */}
+            {workstreamStatus.size > 1 && (
+                <div className="mt-3 pt-2 border-t border-gray-200 dark:border-gray-700">
+                    <div className="text-xs font-medium mb-1.5 text-gray-800 dark:text-gray-200">Workstreams</div>
+                    <div className="grid grid-cols-2 gap-1.5">
+                        {Array.from(workstreamStatus.entries())
+                            // Filter to only show real workstreams (main or those with valid names - not numeric IDs)
+                            .filter(([id, _]) => {
+                                // Always show 'main' workstream
+                                if (id === "main") return true;
+
+                                // Don't show if it's a pure numeric ID (likely a task)
+                                if (/^\d+$/.test(id)) return false;
+
+                                // Don't show workstreams that are actually tasks (have matching IDs in plan)
+                                if (plan?.plan) {
+                                    const matchingTask = plan.plan.find((task) => task.id?.toString() === id);
+                                    return !matchingTask; // Keep if no matching task found
+                                }
+                                return true;
+                            })
+                            .map(([id, status]) => {
+                                let StatusIcon = Circle;
+                                let statusColor = "text-gray-400";
+                                let statusText = "Pending";
+
+                                if (status === "in_progress") {
+                                    StatusIcon = Clock;
+                                    statusColor = "text-blue-500";
+                                    statusText = "In Progress";
+                                } else if (status === "completed") {
+                                    StatusIcon = CheckCircle;
+                                    statusColor = "text-green-500";
+                                    statusText = "Completed";
+                                }
+
+                                // Format workstream IDs for better display
+                                const displayId = id === "main" ? "Main" : id;
+
+                                return (
+                                    <div key={id} className="flex items-center">
+                                        <div className={`mr-1.5 ${statusColor}`}>
+                                            <StatusIcon className="h-3 w-3" />
+                                        </div>
+                                        <span className="text-[10px] font-medium text-gray-600 dark:text-gray-400">
+                                            {displayId}
+                                        </span>
+                                        <span className="text-[10px] text-gray-500 dark:text-gray-500 ml-1">
+                                            {statusText}
+                                        </span>
+                                    </div>
+                                );
+                            })}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

package/src/features/agent/chat/ModernAgentOutput/README-image-support.md

@@ -0,0 +1,43 @@
+# Image Support in ModernAgentOutput
+
+The ModernAgentOutput component now supports displaying images that are sent from tools using the `image:<gcspath>` format.
+
+## How it works
+
+1. **Tool Output**: When a tool like `analyze_image` generates an image, it posts a message with markdown image syntax:
+   ```
+   ![alt text](image:path/to/image.jpg)
+   ```
+
+2. **URL Resolution**: The MessageItem component automatically:
+   - Detects `image:<gcspath>` patterns in the message content
+   - Calls `client.files.getDownloadUrl(gcspath)` to get a signed URL
+   - Replaces the `image:` URL with the signed URL
+
+3. **Image Display**: Images are rendered with:
+   - Responsive sizing (`max-w-full h-auto`)
+   - Rounded corners and shadow
+   - Click to open in new tab functionality
+   - Loading state while URLs are being resolved
+
+## Example Usage
+
+When the analyze_image tool sends:
+```typescript
+await vertesia.workflows.postMessage(updateChannelId, {
+    message: `New image generated ![processed-image](image:agents/conversation-123/processed-1.jpg)`,
+    type: AgentMessageType.UPDATE,
+});
+```
+
+The component will:
+1. Show "Loading images..." while resolving the URL
+2. Replace `image:agents/conversation-123/processed-1.jpg` with a signed URL
+3. Display the image inline in the conversation
+
+## Implementation Details
+
+- Async URL resolution happens in a `useEffect` hook
+- All image URLs in a message are resolved in parallel for performance
+- Failed URL resolutions fall back to the original markdown (won't break)
+- The component handles both regular markdown images and `image:` URLs

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

@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react';
+import { XIcon } from 'lucide-react';
+
+interface SlideInPanelProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+    width?: string;
+}
+
+export default function SlideInPanel({ 
+    isOpen, 
+    onClose, 
+    title, 
+    children, 
+    width = '320px' 
+}: SlideInPanelProps) {
+    const [mounted, setMounted] = useState(false);
+    
+    // Handle animation timing
+    useEffect(() => {
+        if (isOpen) {
+            setMounted(true);
+        } else {
+            const timer = setTimeout(() => {
+                setMounted(false);
+            }, 300); // Match transition duration
+            return () => clearTimeout(timer);
+        }
+    }, [isOpen]);
+    
+    if (!mounted && !isOpen) {
+        return null;
+    }
+    
+    return (
+        <>
+            {/* Backdrop overlay */}
+            <div 
+                className={`fixed inset-0 bg-black/10 dark:bg-black/30 z-40 transition-opacity duration-300 ${
+                    isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+                }`} 
+                onClick={onClose}
+            />
+            
+            {/* Slide-in panel */}
+            <div 
+                className={`fixed top-0 right-0 bottom-0 z-50 bg-white dark:bg-gray-900 shadow-lg border-l border-gray-200 dark:border-gray-800 transition-transform duration-300 ease-in-out ${
+                    isOpen ? 'translate-x-0' : 'translate-x-full'
+                }`}
+                style={{ width }}
+            >
+                {/* Header */}
+                <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800">
+                    <h3 className="font-medium text-gray-800 dark:text-gray-200">{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-5 w-5" />
+                    </button>
+                </div>
+                
+                {/* Content */}
+                <div className="p-4 overflow-y-auto" style={{ height: 'calc(100% - 57px)' }}>
+                    {children}
+                </div>
+            </div>
+        </>
+    );
+}

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

@@ -0,0 +1,96 @@
+import React from "react";
+import { AgentMessage, AgentMessageType } from "@vertesia/common";
+import MessageItem from "./MessageItem";
+import { ThinkingMessages } from "../WaitingMessages";
+
+interface SlidingMessagesProps {
+    messages: AgentMessage[];
+    isCompleted: boolean;
+}
+
+// Helper function to determine if a message is a thinking message
+function isThinkingMessage(message: AgentMessage): boolean {
+    return (
+        message.type === AgentMessageType.THOUGHT ||
+        message.type === AgentMessageType.UPDATE ||
+        message.type === AgentMessageType.PLAN ||
+        message.type === AgentMessageType.ERROR ||
+        message.type === AgentMessageType.WARNING ||
+        message.type === AgentMessageType.SYSTEM
+    );
+}
+
+// Helper function to determine if a message is a permanent message
+function isPermanentMessage(message: AgentMessage): boolean {
+    return (
+        message.type === AgentMessageType.ANSWER ||
+        message.type === AgentMessageType.QUESTION ||
+        message.type === AgentMessageType.COMPLETE ||
+        message.type === AgentMessageType.IDLE ||
+        message.type === AgentMessageType.REQUEST_INPUT
+    );
+}
+
+export default function SlidingMessages({ messages, isCompleted }: SlidingMessagesProps) {
+    const [thinkingMessageIndex, setThinkingMessageIndex] = React.useState(0);
+    
+    // Rotate thinking messages for the indicator
+    React.useEffect(() => {
+        if (!isCompleted) {
+            const interval = setInterval(() => {
+                setThinkingMessageIndex(() => Math.floor(Math.random() * (ThinkingMessages.length - 1)));
+            }, 4000);
+            return () => clearInterval(interval);
+        }
+    }, [isCompleted]);
+    
+    // Permanent messages are always displayed
+    const permanentMessages = messages.filter(isPermanentMessage);
+
+    // Get thinking messages and find the latest one
+    const thinkingMessages = messages.filter(isThinkingMessage).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)
+    });
+    
+    const latestThinkingMessage = thinkingMessages.length > 0 ? thinkingMessages[0] : null;
+    
+    // Sort permanent messages by timestamp (oldest first)
+    const sortedPermanentMessages = [...permanentMessages].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;
+    });
+    
+    return (
+        <div className="flex flex-col space-y-6 overflow-y-auto py-4">
+            {/* Display permanent messages */}
+            {sortedPermanentMessages.map((message, index) => (
+                <MessageItem
+                    key={`${message.timestamp}-${index}`}
+                    message={message}
+                />
+            ))}
+
+            {/* Only show the latest thinking message when not completed */}
+            {!isCompleted && latestThinkingMessage && (
+                <MessageItem
+                    message={latestThinkingMessage}
+                    showPulsatingCircle={true}
+                />
+            )}
+
+            {/* If no messages and not completed, show a placeholder thinking message */}
+            {messages.length === 0 && !isCompleted && (
+                <div className="flex items-center justify-center flex-1 text-center py-8">
+                    <div className="flex items-center space-x-3 bg-blue-50 rounded-lg border border-blue-100 px-4 py-3">
+                        <div className="text-sm text-blue-700 font-medium">
+                            {ThinkingMessages[thinkingMessageIndex]}
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,185 @@
+import { Plan } from "@vertesia/common";
+import { AlertCircle, CheckCircle, Circle, Clock } from "lucide-react";
+import SlideInPanel from "./SlideInPanel";
+
+interface PlanPanelProps {
+    plan?: Plan;
+    workstreamStatus: Map<string, "pending" | "in_progress" | "completed">;
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClose }: PlanPanelProps) {
+    return (
+        plan && (
+            <SlideInPanel isOpen={isOpen} onClose={onClose} title="Agent Plan" width="350px">
+                {/* Plan Summary */}
+                <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-md border border-blue-100 dark:border-blue-800">
+                    <div className="text-sm font-medium text-blue-700 dark:text-blue-300 mb-1">Plan Progress</div>
+                    <div className="flex items-center gap-2">
+                        <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
+                            <div
+                                className="bg-blue-600 h-2.5 rounded-full"
+                                style={{
+                                    width: `${plan.plan && plan.plan.length
+                                        ? Math.round(
+                                            (Array.from(workstreamStatus.values()).filter(
+                                                (status) => status === "completed",
+                                            ).length /
+                                                Math.max(1, workstreamStatus.size)) *
+                                            100,
+                                        )
+                                        : 0
+                                        }%`,
+                                }}
+                            />
+                        </div>
+                        <span className="text-xs text-gray-600 dark:text-gray-400">
+                            {plan.plan && plan.plan.length
+                                ? `${Array.from(workstreamStatus.values()).filter((status) => status === "completed").length}/${workstreamStatus.size}`
+                                : "0/0"}
+                        </span>
+                    </div>
+                </div>
+
+                {/* Detailed Plan Steps */}
+                <div className="rounded-md border border-gray-200 dark:border-gray-800">
+                    <div className="p-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/50">
+                        <div className="font-medium text-sm">Step-by-Step Plan</div>
+                    </div>
+
+                    <div className="divide-y divide-gray-100 dark:divide-gray-800">
+                        {plan.plan && plan.plan.length > 0 ? (
+                            plan.plan.map((task, index) => {
+                                // Extract task info with null checks
+                                const taskId = task.id ? task.id.toString() : `task-${index}`;
+                                const taskGoal = task.goal || `Task ${index + 1}`;
+
+                                // Determine task status - use task.status if available or lookup from workstream
+                                let status: "pending" | "in_progress" | "completed" | "skipped" =
+                                    task.status || "pending";
+                                if (workstreamStatus.has(taskId)) {
+                                    status = workstreamStatus.get(taskId)!;
+                                }
+
+                                // Determine status icon and style
+                                let StatusIcon = Circle;
+                                let statusColor = "text-gray-400";
+                                let bgColor = "";
+
+                                if (status === "in_progress") {
+                                    StatusIcon = Clock;
+                                    statusColor = "text-blue-500";
+                                    bgColor = "bg-blue-50/50 dark:bg-blue-900/10";
+                                } else if (status === "completed") {
+                                    StatusIcon = CheckCircle;
+                                    statusColor = "text-green-500";
+                                }
+
+                                return (
+                                    <div key={index} className={`flex p-3 ${bgColor}`}>
+                                        <div className={`mr-3 mt-0.5 flex-shrink-0 ${statusColor}`}>
+                                            <StatusIcon className="h-4 w-4" />
+                                        </div>
+                                        <div>
+                                            <div className="text-sm text-gray-800 dark:text-gray-200">{taskGoal}</div>
+                                            <div className="mt-1">
+                                                <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
+                                                    {taskId}
+                                                </span>
+                                                <span
+                                                    className={`ml-2 text-xs ${status === "completed"
+                                                        ? "text-green-600 dark:text-green-400"
+                                                        : status === "in_progress"
+                                                            ? "text-blue-600 dark:text-blue-400"
+                                                            : "text-gray-500 dark:text-gray-400"
+                                                        }`}
+                                                >
+                                                    {status === "completed"
+                                                        ? "Completed"
+                                                        : status === "in_progress"
+                                                            ? "In Progress"
+                                                            : "Pending"}
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                );
+                            })
+                        ) : (
+                            <div className="p-4 text-center text-gray-500 dark:text-gray-400 italic">
+                                <AlertCircle className="h-5 w-5 mx-auto mb-2 text-amber-500" />
+                                <p>No plan has been detected yet</p>
+                                <p className="text-xs mt-1">Plans will appear here when the agent creates one</p>
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                {/* Workstream Status Summary */}
+                {workstreamStatus.size > 1 && (
+                    <div className="mt-4 rounded-md border border-gray-200 dark:border-gray-800">
+                        <div className="p-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/50">
+                            <div className="font-medium text-sm">Workstreams</div>
+                        </div>
+                        <div className="p-3">
+                            <div className="grid grid-cols-1 gap-2">
+                                {Array.from(workstreamStatus.entries())
+                                    // Filter to only show real workstreams (main or those with valid names - not numeric IDs)
+                                    .filter(([id, _]) => {
+                                        // Always show 'main' workstream
+                                        if (id === "main") return true;
+
+                                        // Don't show if it's a pure numeric ID (likely a task)
+                                        if (/^\d+$/.test(id)) return false;
+
+                                        // Don't show workstreams that are actually tasks (have matching IDs in plan)
+                                        if (plan?.plan) {
+                                            const matchingTask = plan.plan.find((task) => task.id?.toString() === id);
+                                            return !matchingTask; // Keep if no matching task found
+                                        }
+                                        return true;
+                                    })
+                                    .map(([id, status]) => {
+                                        let StatusIcon = Circle;
+                                        let statusColor = "text-gray-400";
+                                        let statusBg = "bg-gray-100 dark:bg-gray-800";
+                                        let statusText = "Pending";
+
+                                        if (status === "in_progress") {
+                                            StatusIcon = Clock;
+                                            statusColor = "text-blue-500";
+                                            statusBg = "bg-blue-100 dark:bg-blue-800/30";
+                                            statusText = "In Progress";
+                                        } else if (status === "completed") {
+                                            StatusIcon = CheckCircle;
+                                            statusColor = "text-green-500";
+                                            statusBg = "bg-green-100 dark:bg-green-800/30";
+                                            statusText = "Completed";
+                                        }
+
+                                        // Format workstream IDs for better display
+                                        const displayId = id === "main" ? "Main Workstream" : id;
+
+                                        return (
+                                            <div key={id} className={`flex items-center p-2 rounded ${statusBg}`}>
+                                                <div className={`mr-2 ${statusColor}`}>
+                                                    <StatusIcon className="h-4 w-4" />
+                                                </div>
+                                                <div className="flex-1">
+                                                    <span className="text-sm font-medium text-gray-800 dark:text-gray-300">
+                                                        {displayId}
+                                                    </span>
+                                                </div>
+                                                <span className="text-xs font-medium">{statusText}</span>
+                                            </div>
+                                        );
+                                    })}
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </SlideInPanel>
+        )
+    );
+}

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

@@ -0,0 +1,33 @@
+import { AgentMessage } from "@vertesia/common";
+import React from "react";
+import MessageItem from "./MessageItem";
+
+interface StackedMessagesProps {
+    messages: AgentMessage[];
+    isCompleted: boolean;
+}
+
+export default function StackedMessages({ messages }: StackedMessagesProps) {
+    // Sort all messages in ascending chronological order (oldest first)
+    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]
+    );
+
+    return (
+        <div className="flex flex-col overflow-y-auto space-y-6 py-4">
+            {sortedMessages.map((message, index) => (
+                <MessageItem
+                    key={`${message.timestamp}-${index}`}
+                    message={message}
+                    showPulsatingCircle={false}
+                />
+            ))}
+        </div>
+    );
+}