'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useRef, useEffect, useState } from 'react';
import { MessageSquare, ChevronDown, ChevronRight, Activity } from 'lucide-react';
import { InteractiveMessageRole } from '../../../../../../packages/core/src/domain/generated/output.js';
import { ChatMessageBubble } from './ChatMessageBubble.js';
/**
 * Scrollable message list rendering all persisted messages plus an optional
 * in-progress streaming bubble at the bottom. Auto-scrolls to the newest
 * message whenever messages or streamingContent changes.
 */
export function ChatMessageList({ messages, streamingContent, isAgentThinking = false, activityLog = [], isLoading = false, emptyStateMessage = 'No messages yet.', }) {
    const bottomRef = useRef(null);
    // Auto-scroll to bottom when messages or streaming content changes
    useEffect(() => {
        bottomRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
    }, [messages.length, streamingContent, isAgentThinking, activityLog.length]);
    if (isLoading) {
        return (_jsx("div", { className: "flex flex-1 flex-col gap-3 overflow-y-auto p-4", children: [1, 2, 3].map((i) => (_jsx("div", { className: `flex ${i % 2 === 0 ? 'justify-end' : 'justify-start'}`, children: _jsx("div", { className: "bg-muted h-10 animate-pulse rounded-2xl", style: { width: `${40 + i * 15}%` } }) }, i))) }));
    }
    if (messages.length === 0 && streamingContent === null && !isAgentThinking) {
        return (_jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 p-8 text-center", children: [_jsx(MessageSquare, { className: "text-muted-foreground h-8 w-8" }), _jsx("p", { className: "text-muted-foreground text-sm", children: emptyStateMessage })] }));
    }
    return (_jsx("div", { className: "flex flex-1 flex-col overflow-y-auto p-4", role: "log", "aria-label": "Chat messages", "aria-live": "polite", children: _jsxs("div", { className: "flex flex-col gap-3", children: [messages.map((message) => (_jsx(ChatMessageBubble, { role: message.role, content: message.content, timestamp: message.createdAt, streaming: false }, message.id))), isAgentThinking && streamingContent === null ? (_jsx(ThinkingIndicator, { activityLog: activityLog })) : null, streamingContent !== null && (_jsxs(_Fragment, { children: [activityLog.length > 0 && _jsx(ActivityLogCollapsible, { entries: activityLog }), _jsx(ChatMessageBubble, { role: InteractiveMessageRole.assistant, content: streamingContent, streaming: true })] })), _jsx("div", { ref: bottomRef })] }) }));
}
/** Animated thinking indicator with expandable activity log. */
function ThinkingIndicator({ activityLog }) {
    const [expanded, setExpanded] = useState(false);
    const latestEntry = activityLog.length > 0 ? activityLog[activityLog.length - 1] : null;
    return (_jsx("div", { className: "flex w-full flex-col items-start", "aria-label": "Agent is thinking", children: _jsxs("div", { className: "bg-muted text-foreground rounded-2xl rounded-bl-sm px-4 py-2.5 text-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "inline-block size-1.5 animate-bounce rounded-full bg-current opacity-60 [animation-delay:0ms]" }), _jsx("span", { className: "inline-block size-1.5 animate-bounce rounded-full bg-current opacity-60 [animation-delay:150ms]" }), _jsx("span", { className: "inline-block size-1.5 animate-bounce rounded-full bg-current opacity-60 [animation-delay:300ms]" })] }), latestEntry ? (_jsx("span", { className: "text-muted-foreground text-xs", children: latestEntry })) : (_jsx("span", { className: "text-muted-foreground text-xs", children: "Thinking..." }))] }), activityLog.length > 1 && (_jsxs("button", { onClick: () => setExpanded(!expanded), className: "text-muted-foreground hover:text-foreground mt-1.5 flex items-center gap-1 text-[11px] transition-colors", children: [expanded ? _jsx(ChevronDown, { className: "size-3" }) : _jsx(ChevronRight, { className: "size-3" }), activityLog.length, " steps"] })), expanded && activityLog.length > 1 ? (_jsx("div", { className: "border-muted-foreground/20 mt-2 border-t pt-2", children: activityLog.map((entry, i) => (_jsxs("div", { className: "text-muted-foreground flex items-center gap-1.5 py-0.5 text-[11px]", children: [_jsx(Activity, { className: "size-2.5 shrink-0 opacity-50" }), _jsx("span", { children: entry })] }, `${entry.slice(0, 20)}-${i}`))) })) : null] }) }));
}
/** Collapsible activity log shown above streaming content. */
function ActivityLogCollapsible({ entries }) {
    const [expanded, setExpanded] = useState(false);
    return (_jsxs("div", { className: "flex w-full justify-start", children: [_jsxs("button", { onClick: () => setExpanded(!expanded), className: "text-muted-foreground hover:text-foreground flex items-center gap-1.5 rounded-md px-2 py-1 text-[11px] transition-colors", children: [_jsx(Activity, { className: "size-3 opacity-50" }), expanded ? _jsx(ChevronDown, { className: "size-3" }) : _jsx(ChevronRight, { className: "size-3" }), entries.length, " agent actions"] }), expanded ? (_jsx("div", { className: "bg-muted/50 ms-2 rounded-md px-3 py-2", children: entries.map((entry, i) => (_jsxs("div", { className: "text-muted-foreground flex items-center gap-1.5 py-0.5 text-[11px]", children: [_jsx(Activity, { className: "size-2.5 shrink-0 opacity-50" }), _jsx("span", { children: entry })] }, `${entry.slice(0, 20)}-${i}`))) })) : null] }));
}
