import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import MessageItem from "./MessageItem";
export default function StackedMessages({ messages }) {
    // 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 (_jsx("div", { className: "flex flex-col overflow-y-auto space-y-6 py-4", children: sortedMessages.map((message, index) => (_jsx(MessageItem, { message: message, showPulsatingCircle: false }, `${message.timestamp}-${index}`))) }));
}
//# sourceMappingURL=StackedMessages.js.map