import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const statusLabel = (phase) => {
    switch (phase) {
        case 'completed':
            return 'Completed';
        case 'started':
        default:
            return 'In progress';
    }
};
const summarizeReasoning = (summary) => {
    if (!summary) {
        return null;
    }
    if (typeof summary === 'string') {
        return summary.trim().length > 0 ? summary : null;
    }
    if (Array.isArray(summary)) {
        const flattened = summary
            .map((item) => {
            if (typeof item === 'string')
                return item;
            if (item && typeof item === 'object' && 'text' in item && typeof item.text === 'string') {
                return item.text;
            }
            return JSON.stringify(item);
        })
            .join(' ')
            .trim();
        return flattened.length > 0 ? flattened : null;
    }
    if (typeof summary === 'object') {
        try {
            const value = JSON.stringify(summary);
            return value.length > 0 ? value : null;
        }
        catch (error) {
            console.warn('Unable to serialize reasoning summary', error, summary);
        }
    }
    return null;
};
export const LlmActivityCard = ({ events }) => {
    if (!events || events.length === 0) {
        return null;
    }
    return (_jsx("div", { className: 'flex justify-start', "aria-live": 'polite', children: _jsxs("div", { className: 'mt-3 w-full max-w-xl space-y-3 rounded-md border border-purple-200 bg-purple-50 p-3 text-xs text-purple-800 shadow-sm', children: [_jsxs("div", { className: 'flex items-center gap-2 text-purple-600', children: [_jsx("span", { className: 'flex h-2.5 w-2.5 items-center justify-center', children: _jsx("span", { className: 'h-2.5 w-2.5 animate-pulse rounded-full bg-purple-500', "aria-hidden": 'true' }) }), _jsx("p", { className: 'font-semibold uppercase tracking-wide', children: "LLM activity" })] }), _jsx("div", { className: 'space-y-2', children: events.map((event) => {
                        const summaryText = summarizeReasoning(event.summary) ?? 'The model is reasoning through this step.';
                        const formattedTime = new Date(event.timestamp).toLocaleTimeString(undefined, {
                            hour: '2-digit',
                            minute: '2-digit'
                        });
                        return (_jsxs("div", { className: 'rounded-md border border-purple-200 bg-white/60 px-3 py-2 shadow-sm', children: [_jsxs("div", { className: 'flex items-center justify-between gap-3 text-purple-600', children: [_jsx("span", { className: 'text-[10px] font-medium uppercase tracking-wider', children: statusLabel(event.phase) }), _jsx("span", { className: 'text-[10px] font-medium text-purple-400', children: formattedTime })] }), _jsx("p", { className: 'mt-1 text-sm text-purple-700', children: summaryText })] }, `${event.id}-${event.phase}`));
                    }) })] }) }));
};
export default LlmActivityCard;
