/**
 * Clarification message — numbered Q&A with inline response forms.
 */
'use client';
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { RoleAvatar, format_relative } from './shared.js';
export function Clarification({ msg, role, on_respond }) {
    if (!msg.clarification)
        return null;
    return (_jsx("div", { className: "space-y-4 mt-1", children: msg.clarification.questions.map((q, i) => (_jsxs("div", { className: "border-l-2 border-[#2563EB]/20 pl-3", children: [_jsxs("p", { className: "text-[13px] text-[#0F172A] leading-relaxed", children: [i + 1, ". ", q.text] }), q.response ? (_jsxs("div", { className: "mt-2 bg-[#F0FDF4] border border-[#BBF7D0] rounded-md px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2 mb-1", children: [_jsx(RoleAvatar, { role: "client", name: q.response_by, size: "sm" }), _jsx("span", { className: "text-[12px] font-medium text-[#0F172A]", children: q.response_by }), q.response_time && _jsx("span", { className: "text-[11px] text-[#94A3B8]", children: format_relative(q.response_time) })] }), _jsx("p", { className: "text-[13px] text-[#334155] leading-relaxed", children: q.response })] })) : role === 'client' ? (_jsxs("div", { className: "mt-2", children: [_jsx("textarea", { className: "w-full border border-[#E2E8F0] rounded-md px-3 py-2 text-[13px] resize-none focus:outline-none focus:ring-1 focus:ring-[#2563EB] placeholder:text-[#CBD5E1]", rows: 2, placeholder: "Type your response..." }), _jsxs("div", { className: "flex justify-end gap-2 mt-1.5", children: [_jsx("button", { className: "text-[11px] text-[#64748B] cursor-pointer", children: "Attach file" }), _jsx("button", { className: "text-[11px] font-medium text-white bg-[#2563EB] px-3 py-1 rounded hover:bg-[#1D4ED8] cursor-pointer", children: "Reply" })] })] })) : (_jsx("p", { className: "mt-1 text-[11px] text-[#CBD5E1] italic", children: "Awaiting response" }))] }, q.id))) }));
}
//# sourceMappingURL=clarification.js.map