@vertesia/ui 0.59.0 → 0.61.0

package/src/features/agent/chat/SlidingThinkingIndicator.tsx

@@ -0,0 +1,459 @@
+import { AgentMessage, AgentMessageType } from "@vertesia/common";
+import { Button, cn } from "@vertesia/ui/core";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
+import { AnimatedThinkingDots, PulsatingCircle, PulsingMessageLoader } from "./AnimatedThinkingDots";
+import MessageItem from "./ModernAgentOutput/MessageItem";
+import { ThinkingMessages } from "./WaitingMessages";
+
+interface SlidingThinkingIndicatorProps {
+    messages: AgentMessage[];
+    isCompleted: boolean;
+    thinkingMessageIndex: number;
+    className?: string;
+    renderMessage?: (message: AgentMessage) => React.ReactNode;
+    // Optional props to control showDetails from parent
+    showDetails?: boolean;
+    onShowDetailsChange?: (show: boolean) => void;
+}
+
+type ViewMode = "sliding" | "stacked";
+
+export function SlidingThinkingIndicator({
+    messages,
+    isCompleted,
+    thinkingMessageIndex,
+    className,
+    renderMessage,
+    showDetails: externalShowDetails,
+    onShowDetailsChange,
+}: SlidingThinkingIndicatorProps) {
+    // Use external state if provided, otherwise use internal state
+    const [internalShowDetails, setInternalShowDetails] = useState(false);
+
+    // Use external state if provided, otherwise use internal state
+    const showDetails = externalShowDetails !== undefined ? externalShowDetails : internalShowDetails;
+
+    // Function to update showDetails state (internal or external)
+    const setShowDetails = (value: boolean) => {
+        if (onShowDetailsChange) {
+            onShowDetailsChange(value);
+        } else {
+            setInternalShowDetails(value);
+        }
+    };
+
+    const [viewMode, setViewMode] = useState<ViewMode>(() => {
+        // Initialize from localStorage if available
+        if (typeof window !== "undefined") {
+            const savedMode = window.localStorage.getItem("agent-view-mode");
+            return (savedMode === "stacked" ? "stacked" : "sliding") as ViewMode;
+        }
+        return "sliding";
+    });
+    const [visibleMessage, setVisibleMessage] = useState<AgentMessage | null>(null);
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    // Listen for view mode changes from the top bar
+    useEffect(() => {
+        const handleViewModeChange = () => {
+            if (typeof window !== "undefined") {
+                const newMode = window.localStorage.getItem("agent-view-mode");
+                setViewMode(newMode === "stacked" ? "stacked" : "sliding");
+            }
+        };
+
+        window.addEventListener("agent-view-mode-changed", handleViewModeChange);
+        return () => {
+            window.removeEventListener("agent-view-mode-changed", handleViewModeChange);
+        };
+    }, []);
+
+    // Filter for thinking-type messages
+    const thinkingMessages = messages.filter(
+        (msg) =>
+            msg.type === AgentMessageType.THOUGHT ||
+            msg.type === AgentMessageType.UPDATE ||
+            msg.type === AgentMessageType.PLAN,
+    );
+
+    // Track recent messages for cascading display
+    const [recentMessages, setRecentMessages] = useState<AgentMessage[]>([]);
+
+    // Keep track of the previous permanent message count
+    const [prevPermanentCount, setPrevPermanentCount] = useState(0);
+
+    // Update messages to display when thinking messages change
+    useEffect(() => {
+        // Show details is enabled - don't need to manage sliding messages
+        if (showDetails) {
+            return;
+        }
+
+        // Get permanent messages to detect when a new permanent message arrives
+        const permanentMessages = getPermanentMessages(messages);
+
+        // Check if we received a new permanent message
+        const receivedNewPermanentMessage = permanentMessages.length > prevPermanentCount;
+
+        // Update previous permanent message count for next check
+        if (permanentMessages.length !== prevPermanentCount) {
+            setPrevPermanentCount(permanentMessages.length);
+        }
+
+        if (thinkingMessages.length > 0 && !isCompleted) {
+            // Get sorted recent messages (latest 3)
+            const sortedMessages = [...thinkingMessages]
+                .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;
+                })
+                .slice(0, 3);
+
+            // Get the latest message
+            const latestMessage = sortedMessages[0];
+
+            // Clear messages when we get a new permanent message (e.g., after a pause)
+            if (receivedNewPermanentMessage) {
+                setVisibleMessage(null);
+                setRecentMessages([]);
+                setIsTransitioning(false);
+
+                // If there are new thinking messages after the permanent message, show them
+                if (latestMessage) {
+                    setTimeout(() => {
+                        setVisibleMessage(latestMessage);
+                        setRecentMessages(sortedMessages);
+                    }, 500); // Small delay to ensure UI updates correctly
+                }
+                return;
+            }
+
+            // Check if we have new messages
+            const hasNewMessage =
+                !visibleMessage ||
+                (latestMessage &&
+                    // Compare timestamps properly accounting for different formats
+                    (typeof latestMessage.timestamp === "number" || typeof visibleMessage.timestamp === "number"
+                        ? // If either is a number, convert both to numbers for comparison
+                        (typeof latestMessage.timestamp === "number"
+                            ? latestMessage.timestamp
+                            : new Date(latestMessage.timestamp).getTime()) !==
+                        (typeof visibleMessage.timestamp === "number"
+                            ? visibleMessage.timestamp
+                            : new Date(visibleMessage.timestamp).getTime())
+                        : latestMessage.timestamp !== visibleMessage.timestamp));
+
+            if (hasNewMessage) {
+                // If we already have a message, transition it out before showing the new one
+                if (visibleMessage) {
+                    setIsTransitioning(true);
+
+                    // Clear any existing timeout
+                    if (timeoutRef.current) {
+                        clearTimeout(timeoutRef.current);
+                    }
+
+                    // Set timeout to switch to the new messages after transition
+                    timeoutRef.current = setTimeout(() => {
+                        setVisibleMessage(latestMessage);
+                        setRecentMessages(sortedMessages);
+
+                        // Small delay before showing the new message (for better visual effect)
+                        setTimeout(() => {
+                            setIsTransitioning(false);
+                        }, 50);
+                    }, 400); // Match with our animation duration
+                } else {
+                    // No current message, just show the new ones
+                    setVisibleMessage(latestMessage);
+                    setRecentMessages(sortedMessages);
+
+                    // Add a small delay for animation to start from the correct state
+                    setTimeout(() => {
+                        setIsTransitioning(false);
+                    }, 10);
+                }
+            } else if (recentMessages.length === 0) {
+                // Initial setup - populate recent messages
+                setRecentMessages(sortedMessages);
+            }
+        } else if (isCompleted && !showDetails) {
+            // When completed, don't remove messages if showDetails is true
+            // Only fade out the message if we're completed and not showing details
+            if (visibleMessage) {
+                setIsTransitioning(true);
+
+                // Clear any existing timeout
+                if (timeoutRef.current) {
+                    clearTimeout(timeoutRef.current);
+                }
+
+                // Set timeout to remove the message after transition
+                timeoutRef.current = setTimeout(() => {
+                    setVisibleMessage(null);
+                    setRecentMessages([]);
+                }, 400); // Match with our animation duration
+            }
+        }
+
+        // Cleanup timeout on unmount
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, [messages, isCompleted, showDetails, prevPermanentCount]);
+
+    // Choose the color based on message type (using valid color values)
+    const getThinkingColor = (message: AgentMessage | null): "blue" | "purple" | "teal" | "green" => {
+        if (!message) return "blue";
+
+        switch (message.type) {
+            case AgentMessageType.THOUGHT:
+                return "purple";
+            case AgentMessageType.PLAN:
+                return "teal";
+            case AgentMessageType.UPDATE:
+            default:
+                return "blue";
+        }
+    };
+
+    // Get the messageText with thinking message replacement
+    const getMessageText = (message: AgentMessage | null): string => {
+        if (!message) return ThinkingMessages[thinkingMessageIndex];
+
+        let messageText = message.message || ThinkingMessages[thinkingMessageIndex];
+
+        // Replace %thinking_message% placeholder with a thinking message
+        if (messageText.includes("%thinking_message%")) {
+            messageText = messageText.replace(/%thinking_message%/g, ThinkingMessages[thinkingMessageIndex]);
+        }
+
+        return messageText;
+    };
+
+    // Using the modernized MessageItem component to render thinking messages
+    const ThinkingMessageItem = React.memo(({ message }: { message: AgentMessage }) => {
+        // Replace the textContent with the thinking message text if needed
+        const modifiedMessage = {
+            ...message,
+            message: getMessageText(message),
+        };
+
+        // Simple implementation with just MessageItem and PulsatingCircle
+        return (
+            <div className="message-item-container">
+                <MessageItem
+                    message={modifiedMessage}
+                    showPulsatingCircle={true}
+                />
+            </div>
+        );
+    });
+
+    // Use provided render function or our component
+    const renderThinkingMessage =
+        renderMessage || ((message: AgentMessage) => <ThinkingMessageItem message={message} />);
+
+    // Sort thinking messages by timestamp (reverse order - newest first)
+    const sortedThinkingMessages = [...thinkingMessages].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; // Reversed order - newest first
+    });
+
+    return (
+        <div className={cn("relative w-full p-0 m-0", className)}>
+            {thinkingMessages.length > 0 && (
+                <div className="flex justify-end items-center mb-2">
+                    <Button
+                        size="xs"
+                        variant="ghost"
+                        onClick={() => setShowDetails(!showDetails)}
+                        className="text-slate-500 hover:text-slate-700 flex items-center gap-1 text-xs"
+                        title={showDetails ? "Hide thinking details" : "Show all messages"}
+                    >
+                        {showDetails ? (
+                            <>
+                                <EyeOffIcon className="h-3 w-3" /> Hide details
+                            </>
+                        ) : (
+                            <>
+                                <EyeIcon className="h-3 w-3" /> Show details
+                            </>
+                        )}
+                    </Button>
+                </div>
+            )}
+
+            {/* Render based on view mode */}
+            {
+                (showDetails || thinkingMessages.length > 0) &&
+                (showDetails ? (
+                    // Show details view - always show all thinking messages regardless of completion state
+                    <div className="space-y-1 space-y-reverse max-h-[300px] overflow-y-auto pr-1 flex flex-col-reverse">
+                        {sortedThinkingMessages.map((message, index) => (
+                            <div
+                                key={`${message.timestamp}-${index}`}
+                                className="animate-slide-in-bottom"
+                                data-workstream-id={message.workstream_id || "main"}
+                            >
+                                {renderThinkingMessage(message)}
+                            </div>
+                        ))}
+                    </div>
+                ) : !isCompleted ? (
+                    // Not showing details and not completed - use sliding/stacked view
+                    viewMode === "sliding" ? (
+                        // Progressive Fading View - Show recent messages with fading effect
+                        <div
+                            className={cn(
+                                "relative overflow-hidden flex flex-col-reverse space-y-reverse space-y-2 p-0 m-0 w-full",
+                                { hidden: recentMessages.length === 0 },
+                            )}
+                        >
+                            {/* For each recent message, render with different opacity based on recency */}
+                            {recentMessages.map((message, index) => (
+                                <div
+                                    key={`${message.timestamp}-${index}`}
+                                    className={cn(
+                                        "flex items-center", // Align items horizontally on same line
+                                        // Use the new animations for smoother transitions
+                                        {
+                                            // Latest message (index 0) animated with slide in/out from bottom
+                                            "animate-slide-in-bottom": index === 0 && !isTransitioning,
+                                            "animate-slide-out-bottom": index === 0 && isTransitioning,
+
+                                            // Older messages with progressively lower opacity and subtle animations
+                                            "opacity-70": index === 1,
+                                            "opacity-40": index === 2,
+                                        },
+                                    )}
+                                    style={{
+                                        zIndex: recentMessages.length - index,
+                                        transform: `scale(${1 - index * 0.03})`, // Slightly smaller for older messages
+                                        // No indentation - keep all messages aligned on the left
+                                    }}
+                                    data-workstream-id={message.workstream_id || "main"}
+                                >
+                                    {/* Only show pulsating circle for the most recent message */}
+                                    {index === 0 ? (
+                                        renderThinkingMessage(message)
+                                    ) : (
+                                        <div
+                                            className={cn(
+                                                "py-2 px-3 border-l-2 bg-white dark:bg-slate-800 flex items-center w-full",
+                                                "transition-all duration-200 ease-in-out rounded-r-md",
+                                                // Set border color based on message type
+                                                {
+                                                    "border-blue-400 dark:border-blue-500":
+                                                        getThinkingColor(message) === "blue",
+                                                    "border-purple-400 dark:border-purple-500":
+                                                        getThinkingColor(message) === "purple",
+                                                    "border-teal-400 dark:border-teal-500":
+                                                        getThinkingColor(message) === "teal",
+                                                },
+                                            )}
+                                        >
+                                            {/* Add an indicator based on message type */}
+                                            <div className="mr-2">
+                                                {getThinkingColor(message) === "blue" && (
+                                                    <div className="w-4">
+                                                        <PulsingMessageLoader
+                                                            message=""
+                                                            color="blue"
+                                                            className="scale-75 transform-gpu origin-left"
+                                                        />
+                                                    </div>
+                                                )}
+                                                {getThinkingColor(message) === "purple" && (
+                                                    <PulsatingCircle
+                                                        size="sm"
+                                                        color="purple"
+                                                        className="scale-75"
+                                                    />
+                                                )}
+                                                {getThinkingColor(message) === "teal" && (
+                                                    <AnimatedThinkingDots
+                                                        color="teal"
+                                                        className="scale-75 transform-gpu origin-left"
+                                                    />
+                                                )}
+                                            </div>
+
+                                            <div
+                                                className={cn(
+                                                    "text-sm font-medium flex-1 overflow-hidden text-ellipsis mr-3",
+                                                    {
+                                                        "text-blue-700 dark:text-blue-300":
+                                                            getThinkingColor(message) === "blue",
+                                                        "text-purple-700 dark:text-purple-300":
+                                                            getThinkingColor(message) === "purple",
+                                                        "text-teal-700 dark:text-teal-300":
+                                                            getThinkingColor(message) === "teal",
+                                                    },
+                                                )}
+                                            >
+                                                {getMessageText(message)}
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                            ))}
+                        </div>
+                    ) : (
+                        // Stacked View - Show all thinking messages
+                        <div className="space-y-1 space-y-reverse max-h-[300px] overflow-y-auto pr-1 flex flex-col-reverse">
+                            {sortedThinkingMessages.map((message, index) => (
+                                <div
+                                    key={`${message.timestamp}-${index}`}
+                                    className="animate-slide-in-bottom"
+                                    data-workstream-id={message.workstream_id || "main"}
+                                >
+                                    {renderThinkingMessage(message)}
+                                </div>
+                            ))}
+                        </div>
+                    )
+                ) : null) // When completed and not showing details, don't show anything
+            }
+        </div>
+    );
+}
+
+// Helper function to determine if a message is a thinking message (transient)
+export 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 (always displayed)
+export 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
+    );
+}
+
+// Helper function to get all thinking messages
+export function getThinkingMessages(messages: AgentMessage[]): AgentMessage[] {
+    return messages.filter(isThinkingMessage);
+}
+
+// Helper function to get all permanent messages
+export function getPermanentMessages(messages: AgentMessage[]): AgentMessage[] {
+    return messages.filter(isPermanentMessage);
+}

package/src/features/agent/chat/WaitingMessages.ts

@@ -0,0 +1,66 @@
+export const ThinkingMessages = [
+    // Original messages
+    "Brewing some code magic...",
+    "Doing the robot dance...",
+    "Cooking up something good...",
+    "Working my gears...",
+
+    // Tech-inspired messages
+    "Parsing the possibilities...",
+    "Crunching the numbers...",
+    "Connecting the digital dots...",
+    "Processing at maximum capacity...",
+    "Searching through my circuits...",
+    "Running advanced algorithms...",
+    "Computing optimal solutions...",
+    "Loading brilliance.exe...",
+    "Scanning the knowledge base...",
+    "Optimizing response protocols...",
+
+    // Playful messages
+    "Having a quick brainstorm...",
+    "Thinking cap firmly on...",
+    "Pondering the digital universe...",
+    "Consulting my silicon wisdom...",
+    "Untangling the logic knots...",
+    "Assembling clever responses...",
+    "Mixing thoughtful ingredients...",
+    "Polishing the perfect answer...",
+    "Taking a momentary mind sprint...",
+    "Connecting virtual synapses...",
+
+    // Food-themed messages
+    "Baking fresh ideas...",
+    "Stirring the thought pot...",
+    "Simmering solutions slowly...",
+    "Whipping up a smart response...",
+    "Adding a dash of intelligence...",
+    "Preparing a gourmet answer...",
+
+    // Nature-themed messages
+    "Growing brilliant ideas...",
+    "Cultivating the perfect response...",
+    "Gathering digital nectar...",
+    "Planting seeds of solutions...",
+
+    // Journey-themed messages
+    "Exploring the data landscape...",
+    "Mapping the solution path...",
+    "Navigating through possibilities...",
+    "Charting the course to answers...",
+    "Embarking on a thought expedition...",
+
+    // Creative-themed messages
+    "Sketching out concepts...",
+    "Painting with digital brushstrokes...",
+    "Composing my response symphony...",
+    "Crafting precision answers...",
+    "Weaving threads of information...",
+
+    // Time-themed messages
+    "Just a moment of processing...",
+    "Taking a quick thinking break...",
+    "Almost there, final touches...",
+    "Putting the pieces together...",
+    "Making progress, hold tight...",
+];

package/src/features/agent/chat/index.ts

@@ -0,0 +1,4 @@
+export * from "./JumpingDots";
+export { ModernAgentConversation } from "./ModernAgentConversation";
+export * from "./WaitingMessages";
+export * from "./AnimatedThinkingDots";

package/src/features/agent/index.ts

@@ -0,0 +1,2 @@
+export * from "./chat";
+export * from "./PayloadBuilder";

package/src/features/errors/PanelErrorBoundary.tsx

@@ -0,0 +1,30 @@
+import { MessageBox } from '@vertesia/ui/core';
+import { VertesiaErrorBoundary } from './VertesiaErrorBoundary';
+import { ReactNode } from 'react';
+
+export function PanelErrorBoundary({ children }: { children: ReactNode }) {
+    return (
+        <VertesiaErrorBoundary fallback={PanelErrorFallback}>
+            {children}
+        </VertesiaErrorBoundary>
+    );
+}
+
+function PanelErrorFallback({ error }: { error?: Error }) {
+    return (
+        <MessageBox status="error" title="Sorry, something went wrong...">
+            <div className='mb-4'>
+                Our team has been notified and will be quickly working on resolving it.
+                If you&apos;d like to escalate or simply contact us, please email us at&nbsp;
+
+                <a className='text-info' href="mailto:support@vertesiahq.com">support@vertesiahq.com</a>.
+            </div>
+
+            {error?.message &&
+                <code className='w-full mt-4 text-sm text-muted break-words'>
+                    {error.message}
+                </code>
+            }
+        </MessageBox>
+    );
+}

package/src/features/errors/RowErrorBoundary.tsx

@@ -0,0 +1,28 @@
+import { VertesiaErrorBoundary } from "./VertesiaErrorBoundary";
+import { ReactNode } from "react";
+
+interface ErrorBoundaryProps {
+    children: ReactNode;
+    fallback?: ReactNode;
+}
+
+export function RowErrorBoundary({ children }: ErrorBoundaryProps) {
+
+    return (
+        <VertesiaErrorBoundary fallback={RowErrorFallback}>
+            {children}
+        </VertesiaErrorBoundary>
+    )
+}
+
+function RowErrorFallback({ error }: { error?: Error }) {
+    return (
+        <tr>
+            <td colSpan={100}>
+                <span className="text-xs"> Cannot display row</span>
+                <br />
+                <span className="bg-gray-400">{error?.message}</span>
+            </td>
+        </tr>
+    )
+}

package/src/features/errors/VertesiaErrorBoundary.tsx

@@ -0,0 +1,28 @@
+import { ReactNode, ComponentType } from "react"
+import { ErrorBoundary } from "react-error-boundary";
+
+export interface ErrorFallbackComponentProps {
+    error: any;
+    resetErrorBoundary: (...args: any[]) => void;
+}
+export type ErrorBoundaryProps = {
+    children: ReactNode;
+    fallback: ComponentType<ErrorFallbackComponentProps>;
+};
+
+export function VertesiaErrorBoundary({ children, fallback }: ErrorBoundaryProps) {
+    if (ErrorBoundaryInstance) { // custom error boundary?
+        return <ErrorBoundaryInstance fallback={fallback}>{children}</ErrorBoundaryInstance>
+    } else {
+        return <ErrorBoundary FallbackComponent={fallback}>{children}</ErrorBoundary>
+    }
+}
+
+let ErrorBoundaryInstance: ComponentType<{
+    fallback: ComponentType<ErrorFallbackComponentProps>;
+    children: ReactNode;
+}> | null = null;
+
+export function setErrorBoundaryComponent(ErrorBoundaryComponent: ComponentType<ErrorBoundaryProps>) {
+    ErrorBoundaryInstance = ErrorBoundaryComponent;
+}

package/src/features/errors/WidgetErrorBoundary.tsx

@@ -0,0 +1,27 @@
+import { VertesiaErrorBoundary } from './VertesiaErrorBoundary';
+import { ReactNode } from 'react';
+
+export function WidgetErrorBoundary({ children }: { children: ReactNode }) {
+
+    return (
+        <VertesiaErrorBoundary fallback={WidgetErrorFallback}>
+            {children}
+        </VertesiaErrorBoundary>
+    )
+}
+
+function WidgetErrorFallback({ error }: { error?: Error }) {
+
+    console.log('WidgetError', error);
+
+    return (
+        <div className="text-sm">
+            Sorry, this area cannot be loaded or rendered.
+            {error?.message &&
+                <pre>
+                    {error.message}
+                </pre>
+            }
+        </div>
+    )
+}

package/src/features/errors/index.ts

@@ -0,0 +1,4 @@
+export * from "./VertesiaErrorBoundary";
+export * from "./PanelErrorBoundary";
+export * from "./RowErrorBoundary";
+export * from "./WidgetErrorBoundary";