'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Markdown from 'react-markdown';
import { useTranslation } from 'react-i18next';
import { cn } from '../../../lib/utils.js';
import { InteractiveMessageRole } from '../../../../../../packages/core/src/domain/generated/output.js';
const markdownComponents = {
    p: ({ children }) => _jsx("p", { className: "mb-2 leading-relaxed last:mb-0", children: children }),
    strong: ({ children }) => _jsx("strong", { className: "font-semibold", children: children }),
    em: ({ children }) => _jsx("em", { className: "italic", children: children }),
    code: ({ children, className }) => className ? (_jsx("code", { className: `${className} text-[11px]`, children: children })) : (_jsx("code", { className: "bg-background/50 rounded-md px-1.5 py-0.5 font-mono text-xs", children: children })),
    pre: ({ children }) => (_jsx("pre", { className: "bg-background/50 my-2 overflow-x-auto rounded-md p-3 font-mono text-xs leading-relaxed", children: children })),
    ul: ({ children }) => _jsx("ul", { className: "mb-2 list-disc ps-4 last:mb-0", children: children }),
    ol: ({ children }) => _jsx("ol", { className: "mb-2 list-decimal ps-4 last:mb-0", children: children }),
    li: ({ children }) => _jsx("li", { className: "mb-0.5", children: children }),
    h1: ({ children }) => _jsx("h1", { className: "mb-1 text-base font-bold", children: children }),
    h2: ({ children }) => _jsx("h2", { className: "mb-1 text-sm font-bold", children: children }),
    h3: ({ children }) => _jsx("h3", { className: "mb-1 text-sm font-semibold", children: children }),
    a: ({ children, href }) => (_jsx("a", { href: href, className: "text-blue-500 underline", target: "_blank", rel: "noopener noreferrer", children: children })),
    blockquote: ({ children }) => (_jsx("blockquote", { className: "border-muted-foreground/30 my-1 border-s-2 ps-3 italic opacity-80", children: children })),
};
function formatTime(ts) {
    try {
        const d = typeof ts === 'string' ? new Date(ts) : ts;
        return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    }
    catch {
        return '';
    }
}
/**
 * Renders a single chat message bubble with full markdown support.
 *
 * - User messages: right-aligned, primary background
 * - Assistant messages: left-aligned, muted background, markdown rendered
 * - When streaming=true and role=assistant: trailing blinking cursor is shown
 */
export function ChatMessageBubble({ role, content, timestamp, streaming = false, className, }) {
    const { t } = useTranslation('web');
    const isUser = role === InteractiveMessageRole.user;
    const timeStr = timestamp ? formatTime(timestamp) : null;
    return (_jsxs("div", { className: cn('flex w-full flex-col', isUser ? 'items-end' : 'items-start', className), "aria-label": isUser ? t('chat.yourMessage') : t('chat.agentMessage'), children: [_jsxs("div", { className: cn('max-w-[85%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed', isUser
                    ? 'bg-primary text-primary-foreground rounded-br-sm'
                    : 'bg-muted text-foreground rounded-bl-sm'), children: [isUser ? (_jsx("span", { className: "whitespace-pre-wrap", children: content })) : (_jsx(Markdown, { components: markdownComponents, children: content })), streaming && !isUser ? (_jsx("span", { "aria-label": t('chat.agentIsTyping'), className: "ms-0.5 inline-block h-3.5 w-0.5 animate-pulse bg-current align-middle opacity-75" })) : null] }), timeStr && !streaming ? (_jsx("span", { className: "text-muted-foreground mt-0.5 px-1 text-[10px]", children: timeStr })) : null] }));
}
