"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useState } from "react";
import { Streamdown } from "streamdown";
import { MessageType } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
import { cn } from "@stigmer/theme";
import { MARKDOWN_COMPONENTS } from "../internal/markdown-components";
import { useRenderTracer } from "../internal/dev";
/**
 * Renders a single message in the conversation thread.
 *
 * - `MESSAGE_HUMAN` — plain text with muted background
 * - `MESSAGE_AI` — markdown-rendered via Streamdown with block-level
 *   memoization and streaming-aware incomplete-syntax healing
 * - `MESSAGE_THINKING` — collapsible thinking block with subdued styling,
 *   collapsed by default showing a brief summary
 * - `MESSAGE_SYSTEM` — small muted text
 * - `MESSAGE_TOOL` / `UNSPECIFIED` — renders nothing (tool results are
 *   consumed by {@link ToolCallGroup})
 *
 * Wrapped in `React.memo` — structural sharing (T04) guarantees that
 * unchanged messages keep the same object reference, so completed
 * messages skip re-renders entirely during streaming.
 *
 * Purely presentational — no data fetching, no state.
 * All visual properties flow through `--stgm-*` tokens.
 *
 * @example
 * ```tsx
 * <MessageEntry message={agentMessage} />
 * ```
 */
export const MessageEntry = memo(function MessageEntry({ message, className, }) {
    useRenderTracer("MessageEntry", {
        messageType: message.type,
        contentLength: message.content.length,
        isStreaming: message.isStreaming,
    });
    switch (message.type) {
        case MessageType.MESSAGE_HUMAN:
            return _jsx(HumanMessage, { content: message.content, className: className });
        case MessageType.MESSAGE_AI:
            return (_jsx(AiMessage, { content: message.content, isStreaming: message.isStreaming, className: className }));
        case MessageType.MESSAGE_THINKING:
            return (_jsx(ThinkingMessage, { content: message.content, isStreaming: message.isStreaming, className: className }));
        case MessageType.MESSAGE_SYSTEM:
            return _jsx(SystemMessage, { content: message.content, className: className });
        default:
            return null;
    }
});
function HumanMessage({ content, className, }) {
    return (_jsx("div", { role: "article", "aria-label": "User message", className: cn("ms-[20%] rounded-lg bg-muted-subtle px-4 py-3", className), children: _jsx("p", { className: "text-sm text-foreground whitespace-pre-wrap", children: content }) }));
}
function AiMessage({ content, isStreaming, className, }) {
    useRenderTracer("AiMessage", { contentLength: content.length, isStreaming });
    return (_jsx("div", { role: "article", "aria-label": "AI response", "aria-busy": isStreaming, className: cn("px-4 py-3", className), children: _jsx("div", { className: "stgm-prose", children: _jsx(Streamdown, { components: MARKDOWN_COMPONENTS, isAnimating: isStreaming, caret: "block", children: content }) }) }));
}
const THINKING_PREVIEW_LENGTH = 80;
function ThinkingMessage({ content, isStreaming, className, }) {
    const [expanded, setExpanded] = useState(false);
    const hasContent = content.trim().length > 0;
    if (!hasContent && !isStreaming)
        return null;
    const preview = content.length > THINKING_PREVIEW_LENGTH
        ? content.slice(0, THINKING_PREVIEW_LENGTH).trimEnd() + "..."
        : content;
    return (_jsxs("div", { role: "article", "aria-label": "Model thinking", className: cn("px-4 py-1.5", className), children: [_jsxs("button", { type: "button", "aria-expanded": expanded, onClick: () => setExpanded((v) => !v), className: cn("flex items-center gap-1.5 text-xs text-muted-foreground transition-colors", "hover:text-foreground cursor-pointer"), children: [_jsx(ThinkingIcon, { isStreaming: isStreaming }), _jsx("span", { className: "min-w-0 truncate", children: isStreaming && !hasContent
                            ? "Thinking..."
                            : expanded
                                ? "Thinking"
                                : preview }), hasContent && _jsx(ChevronIcon, { expanded: expanded })] }), expanded && hasContent && (_jsx("div", { className: "mt-1.5 border-l-2 border-muted-foreground/20 pl-3", children: _jsxs("p", { className: "text-xs text-muted-foreground whitespace-pre-wrap leading-relaxed", children: [content, isStreaming && (_jsx("span", { className: "inline-block w-[2px] h-[0.8em] bg-muted-foreground align-text-bottom animate-pulse ml-0.5", "aria-hidden": "true" }))] }) }))] }));
}
function SystemMessage({ content, className, }) {
    return (_jsx("div", { role: "article", "aria-label": "System message", className: cn("px-4 py-2", className), children: _jsx("p", { className: "text-xs text-muted-foreground italic", children: content }) }));
}
function ThinkingIcon({ isStreaming }) {
    if (isStreaming) {
        return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", className: "shrink-0 animate-spin", "aria-hidden": "true", children: _jsx("path", { d: "M6 1.5A4.5 4.5 0 1 1 1.5 6", strokeLinecap: "round" }) }));
    }
    return (_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0", "aria-hidden": "true", children: [_jsx("circle", { cx: "6", cy: "5", r: "3.5" }), _jsx("path", { d: "M4.5 9.5C4.5 8.5 5 8 6 8s1.5.5 1.5 1.5" }), _jsx("circle", { cx: "5", cy: "4.5", r: "0.5", fill: "currentColor" }), _jsx("circle", { cx: "7", cy: "4.5", r: "0.5", fill: "currentColor" })] }));
}
function ChevronIcon({ expanded }) {
    return (_jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: cn("shrink-0 transition-transform duration-150", expanded && "rotate-90"), "aria-hidden": "true", children: _jsx("path", { d: "M3.5 2L6.5 5L3.5 8" }) }));
}
//# sourceMappingURL=MessageEntry.js.map