import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { AgentMessageType } from "@vertesia/common";
import MessageItem from "./MessageItem";
import { ThinkingMessages } from "../WaitingMessages";
// Helper function to determine if a message is a thinking message
function isThinkingMessage(message) {
    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) {
    return (message.type === AgentMessageType.ANSWER ||
        message.type === AgentMessageType.QUESTION ||
        message.type === AgentMessageType.COMPLETE ||
        message.type === AgentMessageType.IDLE ||
        message.type === AgentMessageType.REQUEST_INPUT ||
        message.type === AgentMessageType.TERMINATED);
}
export default function SlidingMessages({ messages, isCompleted }) {
    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 (_jsxs("div", { className: "flex flex-col space-y-6 overflow-y-auto py-4", children: [sortedPermanentMessages.map((message, index) => (_jsx(MessageItem, { message: message }, `${message.timestamp}-${index}`))), !isCompleted && latestThinkingMessage && (_jsx(MessageItem, { message: latestThinkingMessage, showPulsatingCircle: true })), messages.length === 0 && !isCompleted && (_jsx("div", { className: "flex items-center justify-center flex-1 text-center py-8", children: _jsx("div", { className: "flex items-center space-x-3 bg-blue-50 rounded-lg border border-blue-100 px-4 py-3", children: _jsx("div", { className: "text-sm text-blue-700 font-medium", children: ThinkingMessages[thinkingMessageIndex] }) }) }))] }));
}
//# sourceMappingURL=SlidingMessages.js.map