@dxv-systems/helpdesk 0.0.0-stage → 0.2.0

package/dist/react.js

@@ -0,0 +1,576 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_HELPDESK_INBOX_CLASSNAMES = void 0;
+exports.HelpdeskInbox = HelpdeskInbox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const messages_1 = require("./inbox/messages");
+const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background";
+const AVATAR = "flex h-9 w-9 flex-none items-center justify-center rounded-full text-sm font-semibold";
+const BADGE = "whitespace-nowrap rounded-full px-2 py-0.5 text-xs font-semibold";
+const BUBBLE = "flex min-w-0 flex-1 flex-col gap-2.5 rounded-xl border px-4 py-3.5";
+exports.DEFAULT_HELPDESK_INBOX_CLASSNAMES = {
+    root: "flex w-full flex-col gap-4 text-sm leading-normal text-foreground",
+    layout: "flex w-full flex-col gap-6 md:flex-row md:items-start",
+    listPane: "flex min-w-0 flex-col gap-4 md:w-80 md:flex-none lg:w-[340px]",
+    detailPane: "flex min-w-0 flex-1 flex-col gap-4",
+    hiddenOnMobile: "max-md:hidden",
+    title: "text-2xl font-bold leading-tight tracking-tight",
+    filters: "grid grid-cols-2 gap-2",
+    field: "flex min-w-0 flex-col gap-1",
+    fieldWide: "col-span-2 flex min-w-0 flex-col gap-1",
+    label: "text-xs font-medium text-muted-foreground",
+    selectWrap: "relative",
+    select: `h-10 w-full min-w-0 appearance-none rounded-md border border-input bg-background pl-3 pr-9 text-sm text-foreground ${FOCUS}`,
+    selectIcon: "pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground",
+    list: "flex flex-col gap-1.5",
+    listItem: `flex w-full flex-col gap-1 rounded-lg border border-border bg-card px-3.5 py-3 text-left text-card-foreground hover:bg-accent ${FOCUS}`,
+    listItemCurrent: `flex w-full flex-col gap-1 rounded-lg border border-ring bg-accent px-3.5 py-3 text-left text-card-foreground ${FOCUS}`,
+    listItemTop: "flex items-baseline justify-between gap-2",
+    listItemTitle: "min-w-0 font-semibold break-words",
+    listItemTime: "whitespace-nowrap text-xs text-muted-foreground",
+    listItemMeta: "flex flex-wrap items-center gap-x-2 gap-y-1 text-muted-foreground",
+    card: "flex flex-col gap-3 rounded-xl border border-border bg-card p-4 text-card-foreground",
+    header: "flex flex-col gap-3 border-b border-border pb-4",
+    headerTop: "flex flex-wrap items-start justify-between gap-3",
+    headerActions: "relative flex flex-wrap items-center gap-2",
+    heading: "text-2xl font-bold leading-tight tracking-tight break-words",
+    subheading: "text-base font-semibold",
+    text: "",
+    muted: "text-sm text-muted-foreground",
+    meta: "flex flex-wrap items-center gap-2 text-sm text-muted-foreground break-words",
+    badge: `${BADGE} bg-muted text-foreground`,
+    badgeAttention: `${BADGE} bg-amber-50 text-amber-900 dark:bg-amber-950 dark:text-amber-100`,
+    badgeDone: `${BADGE} bg-emerald-50 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200`,
+    badgeError: `${BADGE} bg-destructive/10 text-destructive`,
+    reasonNote: "text-xs text-muted-foreground",
+    toolButton: `inline-flex h-9 items-center gap-2 rounded-md border border-border bg-card px-3 text-sm font-medium hover:bg-accent disabled:opacity-50 ${FOCUS}`,
+    assignedChip: "inline-flex h-9 items-center gap-2 rounded-md border border-border px-3 text-sm font-medium text-muted-foreground",
+    iconButton: `inline-flex h-9 w-9 items-center justify-center rounded-md border border-border bg-card hover:bg-accent disabled:opacity-50 ${FOCUS}`,
+    menu: "absolute right-0 top-full z-20 mt-1 flex min-w-56 flex-col rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
+    menuItem: "flex min-h-10 w-full items-center rounded-sm px-3 text-left text-sm hover:bg-accent focus-visible:bg-accent focus-visible:outline-none",
+    backLink: "inline-flex min-h-10 items-center self-start font-semibold text-primary underline-offset-4 hover:underline md:hidden",
+    conversation: "flex flex-col gap-3",
+    entry: "flex items-start gap-3",
+    entryOurs: "flex flex-row-reverse items-start gap-3",
+    avatar: `${AVATAR} bg-secondary text-secondary-foreground`,
+    avatarOurs: `${AVATAR} bg-primary text-primary-foreground`,
+    avatarEvent: `${AVATAR} bg-destructive/10 text-destructive`,
+    message: `${BUBBLE} border-border bg-card text-card-foreground`,
+    messageOurs: `${BUBBLE} border-primary/20 bg-primary/5 text-foreground sm:max-w-[85%]`,
+    messageEvent: `${BUBBLE} border-destructive/40 bg-destructive/5 text-foreground`,
+    messageHeader: "flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1",
+    messageBody: "whitespace-pre-wrap break-words leading-relaxed",
+    emptyBody: "italic text-muted-foreground",
+    eventTitle: "font-semibold text-destructive",
+    details: "text-sm text-muted-foreground [&>summary]:cursor-pointer",
+    detailsPre: "mt-2 whitespace-pre-wrap break-words rounded-md bg-background px-3 py-2.5 font-mono text-xs text-foreground",
+    fileChips: "flex flex-wrap gap-2",
+    fileChip: "inline-flex max-w-full items-center gap-2.5 rounded-md border border-border bg-muted/50 px-3 py-2 text-foreground no-underline hover:bg-accent",
+    fileChipName: "font-medium break-all",
+    fileChipMeta: "text-xs text-muted-foreground",
+    sentNote: "inline-flex items-center gap-1.5 text-xs text-muted-foreground",
+    composer: "flex flex-col gap-3 rounded-xl border border-ring/40 bg-card p-4 text-card-foreground",
+    composerHeader: "flex flex-wrap items-center justify-between gap-2",
+    aiChip: "inline-flex items-center gap-1.5 rounded-full bg-accent px-2.5 py-0.5 text-xs text-accent-foreground",
+    composerFooter: "flex flex-wrap items-center justify-between gap-3 border-t border-border pt-3",
+    replyChip: "inline-flex max-w-full items-center gap-2 rounded-md border border-border bg-muted/50 px-2.5 py-1.5",
+    chipRemove: `inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50 ${FOCUS}`,
+    dashedButton: "inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-md border border-dashed border-border px-2.5 hover:bg-accent focus-within:ring-2 focus-within:ring-ring",
+    srOnly: "sr-only",
+    icon: "h-4 w-4 flex-none",
+    textarea: `min-h-48 w-full resize-y rounded-md border border-input bg-background px-3.5 py-3 text-base leading-relaxed ${FOCUS} read-only:bg-muted`,
+    actions: "flex flex-wrap items-center gap-2",
+    primaryButton: `inline-flex min-h-10 items-center justify-center gap-2 rounded-md bg-primary px-4 font-semibold text-primary-foreground hover:bg-primary/90 disabled:opacity-50 ${FOCUS}`,
+    secondaryButton: `inline-flex min-h-10 items-center justify-center gap-2 rounded-md border border-border bg-background px-3.5 font-medium hover:bg-accent disabled:opacity-50 ${FOCUS}`,
+    dangerButton: `inline-flex min-h-10 items-center justify-center rounded-md border border-destructive bg-background px-3.5 font-semibold text-destructive hover:bg-destructive/10 disabled:opacity-50 ${FOCUS}`,
+    linkButton: "inline-flex min-h-10 items-center font-semibold text-primary underline-offset-4 hover:underline",
+    banner: "rounded-md border border-amber-300 bg-amber-50 px-4 py-3 text-sm font-semibold text-amber-900 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-100",
+    success: "rounded-md bg-emerald-50 px-4 py-3 text-sm font-semibold text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200",
+    warning: "rounded-md bg-amber-50 px-4 py-3 text-sm text-amber-900 dark:bg-amber-950 dark:text-amber-100",
+    error: "rounded-md bg-destructive/10 px-4 py-3 text-sm text-destructive",
+    info: "rounded-md bg-muted px-4 py-3 text-sm",
+    context: "flex flex-col gap-2",
+};
+class ApiError extends Error {
+    constructor(code, message, status) {
+        super(message);
+        this.code = code;
+        this.status = status;
+    }
+}
+const GENERIC_ERROR = "Er ging iets mis. Probeer het opnieuw.";
+const errorText = (error) => (error instanceof ApiError ? error.message : GENERIC_ERROR);
+function useApi(basePath, fetchImpl) {
+    return (0, react_1.useCallback)(async (path, init = {}) => {
+        const headers = { Accept: "application/json" };
+        if (init.body !== undefined)
+            headers["Content-Type"] = "application/json";
+        const doFetch = fetchImpl ?? fetch;
+        const response = await doFetch(`${basePath.replace(/\/$/, "")}/${path}`, {
+            method: init.method ?? "GET",
+            headers,
+            credentials: "same-origin",
+            body: init.body === undefined ? undefined : JSON.stringify(init.body),
+        });
+        const body = (await response.json().catch(() => ({})));
+        if (!response.ok) {
+            const code = typeof body.error === "string" ? body.error : "error";
+            const message = typeof body.message === "string" ? body.message : GENERIC_ERROR;
+            throw new ApiError(code, message, response.status);
+        }
+        return { status: response.status, body: body };
+    }, [basePath, fetchImpl]);
+}
+const VIEWS = [
+    { value: "review", label: "Te beoordelen", states: ["review"] },
+    { value: "new", label: "Nieuw", states: ["new", "drafted"] },
+    { value: "sent", label: "Verstuurd en wachtend", states: ["sent", "waiting"] },
+    { value: "closed", label: "Gesloten", states: ["closed"] },
+    { value: "ignored", label: "Genegeerd", states: ["ignored"] },
+    { value: "all", label: "Alles", states: null },
+];
+const ASSIGNEE_OPTIONS = [
+    { value: "", label: "Iedereen" },
+    { value: "me", label: "Aan mij" },
+    { value: "none", label: "Niet toegewezen" },
+];
+const timeOfDay = new Intl.DateTimeFormat("nl-NL", { hour: "2-digit", minute: "2-digit" });
+const dayMonth = new Intl.DateTimeFormat("nl-NL", { day: "numeric", month: "short" });
+const dayMonthTime = new Intl.DateTimeFormat("nl-NL", { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" });
+const formatDate = (iso) => dayMonthTime.format(new Date(iso));
+function listTime(iso) {
+    const at = new Date(iso);
+    return at.toDateString() === new Date().toDateString() ? timeOfDay.format(at) : dayMonth.format(at);
+}
+function statusBadge(cls, state, reason) {
+    if (state === "review" && reason === "delivery_failed") {
+        return { label: messages_1.REVIEW_REASON_LABELS.delivery_failed, className: cls.badgeError, note: null };
+    }
+    if (state === "review") {
+        return { label: messages_1.STATE_LABELS.review, className: cls.badgeAttention, note: reason ? messages_1.REVIEW_REASON_LABELS[reason] : null };
+    }
+    const done = state === "sent" || state === "waiting" || state === "closed";
+    return { label: messages_1.STATE_LABELS[state], className: done ? cls.badgeDone : cls.badge, note: null };
+}
+function StatusBadge({ cls, state, reason, withNote }) {
+    const b = statusBadge(cls, state, reason);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: b.className, children: b.label }), withNote && b.note && (0, jsx_runtime_1.jsx)("span", { className: cls.reasonNote, children: b.note })] }));
+}
+function initials(address) {
+    const local = address.split("@")[0] ?? "";
+    const parts = local.split(/[._+-]+/).filter((p) => /[a-z]/i.test(p));
+    const letters = parts.length > 1 ? `${parts[0][0]}${parts[1][0]}` : (parts[0] ?? local).replace(/[^a-z]/gi, "").slice(0, 2);
+    return (letters || "?").toUpperCase();
+}
+function formatSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${Math.round(bytes / 1024)} kB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1).replace(".", ",")} MB`;
+}
+function fileType(name) {
+    const ext = /\.([a-z0-9]{1,5})$/i.exec(name)?.[1];
+    return ext ? ext.toUpperCase() : "Bestand";
+}
+const ICON_PATHS = {
+    chevron: ["M6 9l6 6 6-6"],
+    user: ["M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8z", "M4 21c0-4 4-6 8-6s8 2 8 6"],
+    more: ["M5 12h.01", "M12 12h.01", "M19 12h.01"],
+    file: ["M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z", "M14 3v5h5"],
+    paperclip: ["M21 12.5l-8.5 8.5a5 5 0 0 1-7-7L14 5.5a3.5 3.5 0 0 1 5 5L10.5 19"],
+    close: ["M6 6l12 12", "M18 6L6 18"],
+    send: ["M22 2L11 13", "M22 2l-7 20-4-9-9-4z"],
+    check: ["M20 6L9 17l-5-5"],
+    warning: ["M12 9v4", "M12 17h.01", "M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"],
+    sparkle: ["M12 3l1.8 4.7L18 9.5l-4.2 1.8L12 16l-1.8-4.7L6 9.5l4.2-1.8z"],
+};
+function Icon({ name, className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: name === "more" ? 3 : 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", className: className, children: ICON_PATHS[name].map((d) => ((0, jsx_runtime_1.jsx)("path", { d: d }, d))) }));
+}
+function Select({ cls, id, label, value, onChange, wide = false, children, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: wide ? cls.fieldWide : cls.field, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: cls.label, children: label }), (0, jsx_runtime_1.jsxs)("div", { className: cls.selectWrap, children: [(0, jsx_runtime_1.jsx)("select", { id: id, className: cls.select, value: value, onChange: (e) => onChange(e.target.value), children: children }), (0, jsx_runtime_1.jsx)(Icon, { name: "chevron", className: cls.selectIcon })] })] }));
+}
+const syncSince = new Intl.DateTimeFormat("nl-NL", { weekday: "long", hour: "2-digit", minute: "2-digit" });
+function SyncIssueBanner({ cls, issues }) {
+    const since = issues.map((i) => i.failingSince).sort()[0];
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "status", className: cls.warning, children: ["Microsoft 365 is niet bereikbaar sinds ", syncSince.format(new Date(since)), issues.length > 1 ? "" : ` (${issues[0].mailbox})`, ". Nieuwe mail komt binnen zodra het weer werkt; er gaat niets verloren."] }));
+}
+function PausedBanner({ cls }) {
+    return ((0, jsx_runtime_1.jsx)("div", { role: "status", className: cls.banner, "data-helpdesk-paused": "", children: "De helpdesk staat op pauze. Er wordt geen mail opgehaald, geen voorstel geschreven en niets verstuurd. Je kunt tickets wel bekijken." }));
+}
+function HelpdeskInbox({ apiBasePath = messages_1.HELPDESK_BASE_PATH, classNames, pollIntervalMs = 30000, fetch: fetchImpl, renderCustomerContext, initialThreadId, onThreadChange, }) {
+    const cls = (0, react_1.useMemo)(() => ({ ...exports.DEFAULT_HELPDESK_INBOX_CLASSNAMES, ...classNames }), [classNames]);
+    const api = useApi(apiBasePath, fetchImpl);
+    const id = (0, react_1.useId)();
+    const [view, setView] = (0, react_1.useState)("review");
+    const [assignee, setAssignee] = (0, react_1.useState)("");
+    const [mailbox, setMailbox] = (0, react_1.useState)("");
+    const [list, setList] = (0, react_1.useState)(null);
+    const [pages, setPages] = (0, react_1.useState)(1);
+    const [listError, setListError] = (0, react_1.useState)(null);
+    const [loadingMore, setLoadingMore] = (0, react_1.useState)(false);
+    const [selected, setSelected] = (0, react_1.useState)(initialThreadId ?? null);
+    const [detailPaused, setDetailPaused] = (0, react_1.useState)(null);
+    const interval = Math.max(5000, pollIntervalMs);
+    const query = (0, react_1.useCallback)((cursor) => {
+        const params = new URLSearchParams();
+        const states = VIEWS.find((v) => v.value === view)?.states;
+        if (states)
+            params.set("state", states.join(","));
+        if (assignee)
+            params.set("assignee", assignee);
+        if (mailbox)
+            params.set("mailbox", mailbox);
+        if (cursor)
+            params.set("cursor", cursor);
+        const qs = params.toString();
+        return qs ? `threads?${qs}` : "threads";
+    }, [view, assignee, mailbox]);
+    const loadFirst = (0, react_1.useCallback)(async () => {
+        try {
+            const { body } = await api(query(null));
+            setList(body);
+            setPages(1);
+            setListError(null);
+        }
+        catch (error) {
+            setListError(errorText(error));
+        }
+    }, [api, query]);
+    (0, react_1.useEffect)(() => {
+        void loadFirst();
+    }, [loadFirst]);
+    (0, react_1.useEffect)(() => {
+        if (pages > 1)
+            return;
+        const timer = setInterval(() => void loadFirst(), interval);
+        return () => clearInterval(timer);
+    }, [loadFirst, interval, pages]);
+    const loadMore = async () => {
+        if (!list?.nextCursor)
+            return;
+        setLoadingMore(true);
+        try {
+            const { body } = await api(query(list.nextCursor));
+            setList({ ...body, threads: [...list.threads, ...body.threads] });
+            setPages((p) => p + 1);
+        }
+        catch (error) {
+            setListError(errorText(error));
+        }
+        finally {
+            setLoadingMore(false);
+        }
+    };
+    const select = (threadId) => {
+        setSelected(threadId);
+        if (threadId === null)
+            setDetailPaused(null);
+        onThreadChange?.(threadId);
+    };
+    const viewStates = (0, react_1.useRef)(null);
+    viewStates.current = VIEWS.find((v) => v.value === view)?.states ?? null;
+    const onThreadUpdated = (0, react_1.useCallback)((detail) => {
+        setDetailPaused(detail.pilot.paused);
+        const { id: threadId, state, reviewReason, assignee: owner } = detail.thread;
+        const outOfView = viewStates.current !== null && !viewStates.current.includes(state);
+        setList((current) => current
+            ? {
+                ...current,
+                threads: current.threads.flatMap((t) => t.id !== threadId ? [t] : outOfView ? [] : [{ ...t, state, reviewReason, assignee: owner }]),
+            }
+            : current);
+    }, []);
+    const paused = detailPaused ?? list?.pilot.paused ?? false;
+    const mailboxes = list?.pilot.mailboxes ?? [];
+    const viewCount = list ? ` (${list.threads.length}${list.nextCursor ? "+" : ""})` : "";
+    return ((0, jsx_runtime_1.jsxs)("div", { className: cls.root, "data-helpdesk-inbox": "", children: [paused && (0, jsx_runtime_1.jsx)(PausedBanner, { cls: cls }), (list?.syncIssues ?? []).length > 0 && (0, jsx_runtime_1.jsx)(SyncIssueBanner, { cls: cls, issues: list.syncIssues }), (0, jsx_runtime_1.jsxs)("div", { className: cls.layout, children: [(0, jsx_runtime_1.jsxs)("section", { "aria-labelledby": `${id}-list`, className: `${cls.listPane} ${selected ? cls.hiddenOnMobile : ""}`.trim(), children: [(0, jsx_runtime_1.jsx)("h1", { id: `${id}-list`, className: cls.title, children: "Helpdesk" }), (0, jsx_runtime_1.jsxs)("div", { className: cls.filters, children: [(0, jsx_runtime_1.jsx)(Select, { cls: cls, id: `${id}-view`, label: "Status", value: view, onChange: setView, children: VIEWS.map((v) => ((0, jsx_runtime_1.jsxs)("option", { value: v.value, children: [v.label, v.value === view ? viewCount : ""] }, v.value))) }), (0, jsx_runtime_1.jsx)(Select, { cls: cls, id: `${id}-assignee`, label: "Toegewezen", value: assignee, onChange: setAssignee, children: ASSIGNEE_OPTIONS.map((o) => ((0, jsx_runtime_1.jsx)("option", { value: o.value, children: o.label }, o.value))) }), mailboxes.length > 1 && ((0, jsx_runtime_1.jsxs)(Select, { cls: cls, id: `${id}-mailbox`, label: "Mailbox", value: mailbox, onChange: setMailbox, wide: true, children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Alle mailboxen" }), mailboxes.map((m) => ((0, jsx_runtime_1.jsx)("option", { value: m.address, children: m.address }, m.address)))] }))] }), listError && ((0, jsx_runtime_1.jsx)("p", { role: "alert", className: cls.error, children: listError })), !list && !listError && ((0, jsx_runtime_1.jsx)("p", { className: cls.muted, "aria-live": "polite", children: "Laden\u2026" })), list && list.threads.length === 0 && (0, jsx_runtime_1.jsx)("p", { className: cls.muted, children: "Geen tickets in deze weergave." }), list && list.threads.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { "aria-label": "Tickets", className: cls.list, children: list.threads.map((t) => ((0, jsx_runtime_1.jsx)(ThreadListItem, { cls: cls, thread: t, current: t.id === selected, showMailbox: mailboxes.length > 1, onSelect: select }, t.id))) })), list?.nextCursor && ((0, jsx_runtime_1.jsx)("div", { className: cls.actions, children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.secondaryButton, disabled: loadingMore, onClick: () => void loadMore(), children: loadingMore ? "Laden…" : "Meer laden" }) }))] }), (0, jsx_runtime_1.jsx)("div", { className: `${cls.detailPane} ${selected ? "" : cls.hiddenOnMobile}`.trim(), children: selected ? ((0, jsx_runtime_1.jsx)(ThreadView, { cls: cls, api: api, fetchImpl: fetchImpl, threadId: selected, pollIntervalMs: interval, renderCustomerContext: renderCustomerContext, onBack: () => select(null), onUpdated: onThreadUpdated }, selected)) : ((0, jsx_runtime_1.jsx)("p", { className: cls.muted, children: "Kies een ticket om het te bekijken." })) })] })] }));
+}
+function ThreadListItem({ cls, thread, current, showMailbox, onSelect, }) {
+    return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: current ? cls.listItemCurrent : cls.listItem, "aria-current": current ? "true" : undefined, onClick: () => onSelect(thread.id), children: [(0, jsx_runtime_1.jsxs)("span", { className: cls.listItemTop, children: [(0, jsx_runtime_1.jsx)("span", { className: cls.listItemTitle, children: thread.subject || "(geen onderwerp)" }), (0, jsx_runtime_1.jsx)("time", { dateTime: thread.lastActivityAt, className: cls.listItemTime, children: listTime(thread.lastActivityAt) })] }), (0, jsx_runtime_1.jsx)("span", { className: cls.listItemMeta, children: thread.customerAddress }), (0, jsx_runtime_1.jsxs)("span", { className: cls.listItemMeta, children: [(0, jsx_runtime_1.jsx)(StatusBadge, { cls: cls, state: thread.state, reason: thread.reviewReason, withNote: true }), thread.assignee && (0, jsx_runtime_1.jsxs)("span", { className: cls.reasonNote, children: ["Bij ", thread.assignee.name] }), showMailbox && (0, jsx_runtime_1.jsx)("span", { className: cls.reasonNote, children: thread.mailbox })] })] }) }));
+}
+function ThreadView({ cls, api, fetchImpl, threadId, pollIntervalMs, renderCustomerContext, onBack, onUpdated }) {
+    const id = (0, react_1.useId)();
+    const headingRef = (0, react_1.useRef)(null);
+    const [detail, setDetail] = (0, react_1.useState)(null);
+    const [loadError, setLoadError] = (0, react_1.useState)(null);
+    const [notice, setNotice] = (0, react_1.useState)(null);
+    const [busy, setBusy] = (0, react_1.useState)(false);
+    const [text, setText] = (0, react_1.useState)("");
+    const [dirty, setDirty] = (0, react_1.useState)(false);
+    const [confirming, setConfirming] = (0, react_1.useState)(null);
+    const bodies = (0, react_1.useRef)(new Map());
+    const [, setBodiesVersion] = (0, react_1.useState)(0);
+    const apply = (0, react_1.useCallback)((next, keepText) => {
+        setDetail(next);
+        onUpdated(next);
+        if (!keepText) {
+            setText(next.draft?.text ?? "");
+            setDirty(false);
+        }
+    }, [onUpdated]);
+    const dirtyRef = (0, react_1.useRef)(dirty);
+    dirtyRef.current = dirty;
+    const detailRef = (0, react_1.useRef)(detail);
+    detailRef.current = detail;
+    const load = (0, react_1.useCallback)(async () => {
+        try {
+            const { body } = await api(`threads/${encodeURIComponent(threadId)}`);
+            apply(body, dirtyRef.current);
+            setLoadError(null);
+        }
+        catch (error) {
+            setLoadError(errorText(error));
+        }
+    }, [api, threadId, apply]);
+    (0, react_1.useEffect)(() => {
+        void load();
+    }, [load]);
+    (0, react_1.useEffect)(() => {
+        const timer = setInterval(() => void load(), pollIntervalMs);
+        return () => clearInterval(timer);
+    }, [load, pollIntervalMs]);
+    const loaded = detail !== null;
+    (0, react_1.useEffect)(() => {
+        if (loaded)
+            headingRef.current?.focus();
+    }, [loaded]);
+    const messageIds = detail?.messages.map((m) => m.id).join(",") ?? "";
+    (0, react_1.useEffect)(() => {
+        if (!messageIds)
+            return;
+        let cancelled = false;
+        void (async () => {
+            for (const messageId of messageIds.split(",")) {
+                const cached = bodies.current.get(messageId);
+                if (cached && "text" in cached)
+                    continue;
+                try {
+                    const { body } = await api(`threads/${encodeURIComponent(threadId)}/messages/${encodeURIComponent(messageId)}`);
+                    bodies.current.set(messageId, { text: body.text, attachments: body.attachments ?? [], bounce: body.bounce ?? null });
+                }
+                catch (error) {
+                    bodies.current.set(messageId, { error: errorText(error) });
+                }
+                if (cancelled)
+                    return;
+                setBodiesVersion((v) => v + 1);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [api, threadId, messageIds]);
+    const act = (0, react_1.useCallback)(async (path, init = {}) => {
+        setBusy(true);
+        setNotice(null);
+        try {
+            const { body } = await api(`threads/${encodeURIComponent(threadId)}/${path}`, {
+                method: init.method ?? "POST",
+                body: init.body,
+            });
+            const draftUnchanged = (body.detail.draft?.text ?? null) === (detailRef.current?.draft?.text ?? null);
+            apply(body.detail, dirtyRef.current && draftUnchanged);
+            const kind = body.outcome === "unknown_outcome" || body.outcome === "in_progress" ? "warning" : "success";
+            setNotice({ kind, text: body.message });
+            return body;
+        }
+        catch (error) {
+            setNotice({ kind: "error", text: errorText(error) });
+            if (error instanceof ApiError && error.code !== "invalid_input")
+                void load();
+            throw error;
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [api, threadId, apply, load]);
+    const run = (path, init) => void act(path, init).catch(() => undefined);
+    const uploadFile = async (file) => {
+        const thread = encodeURIComponent(threadId);
+        let target;
+        try {
+            ({ body: target } = await api(`threads/${thread}/attachments/upload`, {
+                method: "POST",
+                body: { name: file.name, contentType: file.type || "application/octet-stream", size: file.size },
+            }));
+            const put = await (fetchImpl ?? fetch)(target.uploadUrl, { method: "PUT", headers: { "Content-Type": target.contentType }, body: file });
+            if (!put.ok)
+                throw new ApiError("upload_failed", `${file.name} kon niet worden geüpload. Probeer het opnieuw.`, put.status);
+        }
+        catch (error) {
+            setNotice({ kind: "error", text: errorText(error) });
+            return;
+        }
+        await act("attachments", { body: { uploadToken: target.uploadToken } }).catch(() => undefined);
+    };
+    if (!detail) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: cls.card, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.linkButton, onClick: onBack, children: "Terug naar tickets" }) }), loadError ? ((0, jsx_runtime_1.jsx)("p", { role: "alert", className: cls.error, children: loadError })) : ((0, jsx_runtime_1.jsx)("p", { className: cls.muted, "aria-live": "polite", children: "Ticket laden\u2026" }))] }));
+    }
+    const { thread, pilot, draft, send } = detail;
+    const can = (action) => detail.actions.includes(action);
+    const bounced = thread.state === "review" && thread.reviewReason === "delivery_failed";
+    const sentReply = send?.status === "sent" && draft?.text && !draft.stale ? { text: draft.text, at: send.at } : null;
+    const showComposer = !bounced && !sentReply && (draft !== null || thread.state === "review");
+    const menuItems = [];
+    if (!bounced && can("dismiss"))
+        menuItems.push({ key: "dismiss", label: "Geen antwoord nodig", onSelect: () => setConfirming("dismiss") });
+    if (!bounced && can("replied_externally")) {
+        menuItems.push({ key: "external", label: "Al beantwoord in Outlook", onSelect: () => setConfirming("external") });
+    }
+    if (thread.assignee)
+        menuItems.push({ key: "unassign", label: "Toewijzing weghalen", onSelect: () => run("assign", { method: "DELETE" }) });
+    return ((0, jsx_runtime_1.jsxs)("article", { "aria-labelledby": `${id}-subject`, className: cls.detailPane, "data-thread-state": thread.state, "data-write-mode": pilot.writeMode, children: [(0, jsx_runtime_1.jsxs)("header", { className: cls.header, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.backLink, onClick: onBack, children: "Terug naar tickets" }), (0, jsx_runtime_1.jsxs)("div", { className: cls.headerTop, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)("h2", { id: `${id}-subject`, ref: headingRef, tabIndex: -1, className: cls.heading, children: thread.subject || "(geen onderwerp)" }), (0, jsx_runtime_1.jsxs)("div", { className: cls.meta, children: [(0, jsx_runtime_1.jsx)(StatusBadge, { cls: cls, state: thread.state, reason: thread.reviewReason, withNote: false }), pilot.writeMode === "read_only" && (0, jsx_runtime_1.jsx)("span", { className: cls.badge, children: "Alleen lezen" }), (0, jsx_runtime_1.jsx)("span", { children: thread.customerAddress }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: "\u00B7" }), (0, jsx_runtime_1.jsxs)("span", { children: ["naar ", thread.mailbox] })] }), (thread.relatedThreadId || (thread.state === "ignored" && thread.dismissedBy)) && ((0, jsx_runtime_1.jsxs)("div", { className: cls.meta, children: [thread.relatedThreadId && (0, jsx_runtime_1.jsx)("span", { children: "Vervolg op een eerder ticket" }), thread.state === "ignored" && thread.dismissedBy && ((0, jsx_runtime_1.jsxs)("span", { children: ["Geen antwoord nodig, gemarkeerd door ", thread.dismissedBy === detail.viewer.id ? "jou" : "een collega"] }))] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: cls.headerActions, children: [(0, jsx_runtime_1.jsx)(Assignment, { cls: cls, detail: detail, busy: busy, run: run }), menuItems.length > 0 && (0, jsx_runtime_1.jsx)(MoreActions, { cls: cls, busy: busy, items: menuItems })] })] }), confirming && ((0, jsx_runtime_1.jsx)(ConfirmAction, { cls: cls, kind: confirming, busy: busy, onCancel: () => setConfirming(null), onConfirm: () => {
+                            setConfirming(null);
+                            run(confirming === "dismiss" ? "dismiss" : "replied-externally");
+                        } }))] }), (0, jsx_runtime_1.jsx)("div", { "aria-live": "polite", role: "status", children: notice && notice.kind !== "error" && (0, jsx_runtime_1.jsx)("p", { className: notice.kind === "success" ? cls.success : cls.warning, children: notice.text }) }), notice?.kind === "error" && ((0, jsx_runtime_1.jsx)("p", { role: "alert", className: cls.error, children: notice.text })), renderCustomerContext && (0, jsx_runtime_1.jsx)("section", { className: cls.context, children: renderCustomerContext(thread) }), (0, jsx_runtime_1.jsx)(Conversation, { cls: cls, detail: detail, bodies: bodies.current, sentReply: sentReply }), bounced && (can("replied_externally") || can("dismiss")) && (0, jsx_runtime_1.jsx)(BouncedNextSteps, { cls: cls, busy: busy, can: can, run: run }), showComposer && ((0, jsx_runtime_1.jsx)(Composer, { cls: cls, detail: detail, busy: busy, text: text, dirty: dirty, onText: (value) => {
+                    setText(value);
+                    setDirty(true);
+                }, act: act, run: run, can: can, uploadFile: uploadFile })), showComposer && thread.state === "review" && (can("dismiss") || can("replied_externally")) && ((0, jsx_runtime_1.jsxs)("p", { className: cls.muted, children: ["Geen antwoord nodig of al vanuit Outlook beantwoord? Kies het bij ", (0, jsx_runtime_1.jsx)("strong", { className: "font-medium text-foreground", children: "Meer acties" }), " ", "bovenaan."] })), (0, jsx_runtime_1.jsx)(OtherActions, { cls: cls, busy: busy, can: can, run: run })] }));
+}
+function Assignment({ cls, detail, busy, run }) {
+    const owner = detail.thread.assignee;
+    if (owner && owner.id === detail.viewer.id) {
+        return ((0, jsx_runtime_1.jsxs)("span", { className: cls.assignedChip, children: [(0, jsx_runtime_1.jsx)(Icon, { name: "user", className: cls.icon }), "Toegewezen aan jou"] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: cls.toolButton, disabled: busy, onClick: () => run("assign"), children: [(0, jsx_runtime_1.jsx)(Icon, { name: "user", className: cls.icon }), owner ? `Toegewezen aan ${owner.name} · Aan mij` : "Niet toegewezen · Aan mij"] }));
+}
+function MoreActions({ cls, busy, items }) {
+    const id = (0, react_1.useId)();
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const wrapRef = (0, react_1.useRef)(null);
+    const toggleRef = (0, react_1.useRef)(null);
+    const firstRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        firstRef.current?.focus();
+        const onPointer = (e) => {
+            if (wrapRef.current && !wrapRef.current.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", onPointer);
+        return () => document.removeEventListener("mousedown", onPointer);
+    }, [open]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: wrapRef, className: "relative", onKeyDown: (e) => {
+            if (e.key === "Escape" && open) {
+                setOpen(false);
+                toggleRef.current?.focus();
+            }
+        }, children: [(0, jsx_runtime_1.jsx)("button", { ref: toggleRef, type: "button", className: cls.iconButton, "aria-label": "Meer acties", "aria-expanded": open, "aria-controls": `${id}-menu`, disabled: busy, onClick: () => setOpen((o) => !o), children: (0, jsx_runtime_1.jsx)(Icon, { name: "more", className: cls.icon }) }), open && ((0, jsx_runtime_1.jsx)("div", { id: `${id}-menu`, className: cls.menu, children: items.map((item, i) => ((0, jsx_runtime_1.jsx)("button", { ref: i === 0 ? firstRef : undefined, type: "button", className: cls.menuItem, onClick: () => {
+                        setOpen(false);
+                        item.onSelect();
+                    }, children: item.label }, item.key))) }))] }));
+}
+function ConfirmAction({ cls, kind, busy, onConfirm, onCancel, }) {
+    const external = kind === "external";
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "group", "aria-label": external ? "Beantwoord in Outlook bevestigen" : "Geen antwoord nodig bevestigen", className: cls.actions, children: [(0, jsx_runtime_1.jsx)("span", { className: cls.text, children: external
+                    ? "Al beantwoord in Outlook? Het antwoord in de helpdesk wordt dan niet verstuurd."
+                    : "Geen antwoord nodig? Er wordt niets verstuurd en het ticket gaat naar Genegeerd." }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.dangerButton, disabled: busy, onClick: onConfirm, children: external ? "Ja, al beantwoord" : "Ja, geen antwoord nodig" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.secondaryButton, onClick: onCancel, autoFocus: true, children: "Annuleren" })] }));
+}
+const UNAVAILABLE_TEXT = {
+    item: "bijgevoegde mail, open deze in Outlook",
+    reference: "link naar een gedeeld bestand, open deze in Outlook",
+    too_large: "te groot om hier te openen, open de mail in Outlook",
+};
+function FileChips({ cls, attachments }) {
+    if (attachments.length === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("ul", { "aria-label": attachments.length === 1 ? "Bijlage" : `Bijlagen (${attachments.length})`, className: cls.fileChips, children: attachments.map((a) => {
+            const type = a.kind === "item" ? "Mail" : a.kind === "reference" ? "Link" : fileType(a.name);
+            const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon, { name: "file", className: cls.icon }), (0, jsx_runtime_1.jsxs)("span", { className: "flex min-w-0 flex-col leading-snug", children: [(0, jsx_runtime_1.jsx)("span", { className: cls.fileChipName, children: a.name }), (0, jsx_runtime_1.jsxs)("span", { className: cls.fileChipMeta, children: [type, " \u00B7 ", formatSize(a.size), a.unavailable ? `, ${UNAVAILABLE_TEXT[a.unavailable]}` : ""] })] })] }));
+            return ((0, jsx_runtime_1.jsx)("li", { className: "max-w-full", children: a.href ? ((0, jsx_runtime_1.jsx)("a", { href: a.href, download: a.name, className: cls.fileChip, children: content })) : ((0, jsx_runtime_1.jsx)("span", { className: cls.fileChip, children: content })) }, a.id));
+        }) }));
+}
+function Conversation({ cls, detail, bodies, sentReply, }) {
+    const entries = detail.messages.map((m) => ({ kind: m.bounce ? "bounce" : "mail", at: m.receivedAt, message: m }));
+    if (sentReply)
+        entries.push({ kind: "reply", at: sentReply.at, text: sentReply.text });
+    entries.sort((a, b) => a.at.localeCompare(b.at));
+    const sentFiles = (detail.replyAttachments ?? []).filter((a) => a.sent);
+    return ((0, jsx_runtime_1.jsx)("ol", { "aria-label": "Gesprek", className: cls.conversation, children: entries.map((e) => e.kind === "reply" ? ((0, jsx_runtime_1.jsxs)("li", { className: cls.entryOurs, children: [(0, jsx_runtime_1.jsx)("span", { className: cls.avatarOurs, children: (0, jsx_runtime_1.jsx)(Icon, { name: "send", className: cls.icon }) }), (0, jsx_runtime_1.jsxs)("article", { className: cls.messageOurs, children: [(0, jsx_runtime_1.jsxs)("div", { className: cls.messageHeader, children: [(0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("strong", { className: "font-semibold", children: "Jouw antwoord" }), " ", (0, jsx_runtime_1.jsxs)("span", { className: "text-muted-foreground", children: ["\u00B7 vanaf ", detail.thread.mailbox] })] }), (0, jsx_runtime_1.jsx)("time", { dateTime: e.at, className: cls.muted, children: formatDate(e.at) })] }), (0, jsx_runtime_1.jsx)("div", { className: cls.messageBody, children: e.text }), sentFiles.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { "aria-label": "Verstuurde bijlagen", className: cls.fileChips, children: sentFiles.map((a) => ((0, jsx_runtime_1.jsxs)("li", { className: cls.replyChip, children: [(0, jsx_runtime_1.jsx)("span", { className: "break-all", children: a.name }), " ", (0, jsx_runtime_1.jsx)("span", { className: cls.fileChipMeta, children: formatSize(a.size) })] }, a.id))) })), (0, jsx_runtime_1.jsxs)("span", { className: cls.sentNote, children: [(0, jsx_runtime_1.jsx)(Icon, { name: "check", className: cls.icon }), "Verstuurd, staat in Verzonden items"] })] })] }, "reply")) : e.kind === "bounce" ? ((0, jsx_runtime_1.jsx)(BounceItem, { cls: cls, message: e.message, body: bodies.get(e.message.id) }, e.message.id)) : ((0, jsx_runtime_1.jsx)(MessageItem, { cls: cls, message: e.message, body: bodies.get(e.message.id) }, e.message.id))) }));
+}
+function MessageItem({ cls, message, body }) {
+    return ((0, jsx_runtime_1.jsxs)("li", { className: cls.entry, children: [(0, jsx_runtime_1.jsx)("span", { className: cls.avatar, "aria-hidden": "true", children: initials(message.fromAddress) }), (0, jsx_runtime_1.jsxs)("article", { className: cls.message, children: [(0, jsx_runtime_1.jsxs)("div", { className: cls.messageHeader, children: [(0, jsx_runtime_1.jsxs)("span", { className: "min-w-0 break-words", children: [(0, jsx_runtime_1.jsx)("strong", { className: "font-semibold", children: message.fromAddress }), " ", (0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground", children: "\u00B7 klant" }), message.noise && (0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground", children: " \u00B7 automatisch bericht" }), message.removed && (0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground", children: " \u00B7 niet meer in de Inbox" })] }), (0, jsx_runtime_1.jsx)("time", { dateTime: message.receivedAt, className: cls.muted, children: formatDate(message.receivedAt) })] }), body === undefined && (0, jsx_runtime_1.jsx)("p", { className: cls.muted, children: "Bericht laden\u2026" }), body && "error" in body && (0, jsx_runtime_1.jsx)("p", { className: cls.muted, children: body.error }), body && "text" in body &&
+                        (body.text ? ((0, jsx_runtime_1.jsx)("div", { className: cls.messageBody, children: body.text })) : ((0, jsx_runtime_1.jsx)("p", { className: cls.emptyBody, children: body.attachments.length > 0 ? "Geen tekst, alleen een bijlage." : "Geen tekst." }))), body && "text" in body && (0, jsx_runtime_1.jsx)(FileChips, { cls: cls, attachments: body.attachments })] })] }));
+}
+function BounceItem({ cls, message, body }) {
+    const report = body && "text" in body ? body.bounce : null;
+    const reason = report?.reason ?? "De ontvangende server weigerde het bericht.";
+    const diagnostic = report ? report.diagnostic : body && "text" in body ? body.text : "";
+    return ((0, jsx_runtime_1.jsxs)("li", { className: cls.entry, "data-bounce": "", children: [(0, jsx_runtime_1.jsx)("span", { className: cls.avatarEvent, children: (0, jsx_runtime_1.jsx)(Icon, { name: "warning", className: cls.icon }) }), (0, jsx_runtime_1.jsxs)("div", { className: cls.messageEvent, children: [(0, jsx_runtime_1.jsxs)("div", { className: cls.messageHeader, children: [(0, jsx_runtime_1.jsx)("strong", { className: cls.eventTitle, children: "Jouw antwoord is niet afgeleverd" }), (0, jsx_runtime_1.jsx)("time", { dateTime: message.receivedAt, className: cls.muted, children: formatDate(message.receivedAt) })] }), body === undefined && (0, jsx_runtime_1.jsx)("p", { className: cls.muted, children: "Bericht laden\u2026" }), body && "error" in body && (0, jsx_runtime_1.jsx)("p", { className: cls.muted, children: body.error }), body && "text" in body && (0, jsx_runtime_1.jsx)("p", { children: reason }), diagnostic && ((0, jsx_runtime_1.jsxs)("details", { className: cls.details, children: [(0, jsx_runtime_1.jsx)("summary", { children: "Technische details van Microsoft" }), (0, jsx_runtime_1.jsx)("pre", { className: cls.detailsPre, children: diagnostic })] }))] })] }));
+}
+function BouncedNextSteps({ cls, busy, can, run }) {
+    const id = (0, react_1.useId)();
+    return ((0, jsx_runtime_1.jsxs)("section", { "aria-labelledby": `${id}-h`, className: cls.card, children: [(0, jsx_runtime_1.jsx)("h3", { id: `${id}-h`, className: cls.subheading, children: "Wat nu?" }), (0, jsx_runtime_1.jsx)("p", { className: cls.text, children: "De klant heeft je antwoord niet. Stuur het opnieuw vanuit Outlook, bijvoorbeeld naar een ander adres van de klant, of sluit het ticket als het niet meer nodig is." }), (0, jsx_runtime_1.jsxs)("div", { className: cls.actions, children: [can("replied_externally") && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.primaryButton, disabled: busy, onClick: () => run("replied-externally"), children: "Opnieuw verstuurd vanuit Outlook" })), can("dismiss") && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.secondaryButton, disabled: busy, onClick: () => run("dismiss"), children: "Geen antwoord meer nodig" }))] })] }));
+}
+function ReplyAttachments({ cls, attachments, busy, editable, run, uploadFile, }) {
+    const id = (0, react_1.useId)();
+    const [uploading, setUploading] = (0, react_1.useState)([]);
+    if (!editable && attachments.length === 0)
+        return null;
+    const choose = async (files) => {
+        const list = files ? Array.from(files) : [];
+        setUploading(list.map((f) => f.name));
+        for (const file of list)
+            await uploadFile(file);
+        setUploading([]);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: cls.actions, children: [attachments.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { "aria-label": "Bijlagen bij je antwoord", className: cls.fileChips, children: attachments.map((a) => ((0, jsx_runtime_1.jsxs)("li", { className: cls.replyChip, children: [(0, jsx_runtime_1.jsx)("span", { className: "break-all", children: a.name }), " ", (0, jsx_runtime_1.jsx)("span", { className: cls.fileChipMeta, children: formatSize(a.size) }), editable && !a.sent && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.chipRemove, disabled: busy || uploading.length > 0, "aria-label": `${a.name} verwijderen`, onClick: () => run(`attachments/${encodeURIComponent(a.id)}`, { method: "DELETE" }), children: (0, jsx_runtime_1.jsx)(Icon, { name: "close", className: "h-3.5 w-3.5" }) }))] }, a.id))) })), uploading.length > 0 && ((0, jsx_runtime_1.jsxs)("p", { className: cls.muted, "aria-live": "polite", children: ["Uploaden: ", uploading.join(", "), "\u2026"] })), editable && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: `${id}-file`, className: cls.dashedButton, children: [(0, jsx_runtime_1.jsx)(Icon, { name: "paperclip", className: "h-3.5 w-3.5 flex-none" }), "Bijlage toevoegen", (0, jsx_runtime_1.jsx)("input", { id: `${id}-file`, type: "file", multiple: true, className: cls.srOnly, disabled: busy || uploading.length > 0, onChange: (e) => {
+                                    const input = e.currentTarget;
+                                    void choose(input.files).finally(() => {
+                                        input.value = "";
+                                    });
+                                } })] }), (0, jsx_runtime_1.jsx)("span", { className: cls.reasonNote, children: "Max. 10 bestanden, samen 20 MB" })] }))] }));
+}
+function attachmentNote(detail) {
+    const n = (detail.replyAttachments ?? []).filter((a) => !a.sent).length;
+    return n === 0 ? "" : n === 1 ? ", met 1 bijlage" : `, met ${n} bijlagen`;
+}
+function footerNote(mode, mailbox) {
+    return mode === "read_only"
+        ? "Deze mailbox staat op alleen lezen. Je kunt het antwoord lezen en aanpassen, maar er wordt niets verstuurd."
+        : `Wordt verstuurd vanaf ${mailbox}.`;
+}
+function Composer({ cls, detail, busy, text, dirty, onText, act, run, can, uploadFile }) {
+    const id = (0, react_1.useId)();
+    const [confirming, setConfirming] = (0, react_1.useState)(null);
+    const { thread, pilot, draft, send } = detail;
+    const writing = draft?.status === "requested" || draft?.status === "started";
+    const sendBlockedReason = pilot.paused
+        ? "De helpdesk staat op pauze, daarom kan er nu niets worden verstuurd."
+        : pilot.writeMode === "read_only"
+            ? "Versturen staat uit: deze mailbox staat op alleen lezen."
+            : !draft?.text
+                ? "Er is nog geen antwoord om te versturen."
+                : send?.status === "unknown"
+                    ? "Geef eerst aan of het vorige antwoord is verstuurd."
+                    : null;
+    const showSend = thread.state === "review";
+    const canSend = can("send") && text.trim() !== "";
+    const showText = (draft?.text !== null && draft?.text !== undefined) || can("edit");
+    const sendNow = async (acceptStale) => {
+        try {
+            if (dirty)
+                await act("draft", { method: "PUT", body: { text } });
+            await act("send", { body: acceptStale ? { acceptStale: true } : {} });
+            setConfirming(null);
+        }
+        catch (error) {
+            setConfirming(error instanceof ApiError && error.code === "stale_draft" ? "stale" : null);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("section", { "aria-labelledby": `${id}-h`, className: cls.composer, children: [(0, jsx_runtime_1.jsxs)("div", { className: cls.composerHeader, children: [(0, jsx_runtime_1.jsx)("h3", { id: `${id}-h`, className: cls.subheading, children: "Jouw antwoord" }), draft?.fromDrafter && ((0, jsx_runtime_1.jsxs)("span", { className: cls.aiChip, children: [(0, jsx_runtime_1.jsx)(Icon, { name: "sparkle", className: "h-3.5 w-3.5 flex-none" }), "Voorstel van de AI \u00B7 pas aan waar nodig"] }))] }), writing && ((0, jsx_runtime_1.jsx)("p", { className: cls.info, "aria-live": "polite", children: "Er wordt een voorstel geschreven\u2026" })), draft?.status === "failed" && ((0, jsx_runtime_1.jsx)("p", { className: cls.warning, children: can("regenerate")
+                    ? "Het voorstel kon niet worden gemaakt. Laat een nieuw voorstel schrijven, schrijf zelf een antwoord of antwoord vanuit Outlook."
+                    : "Het voorstel kon niet worden gemaakt. Schrijf zelf een antwoord of antwoord vanuit Outlook." })), !draft && can("edit") && (0, jsx_runtime_1.jsx)("p", { className: cls.info, children: "Er is geen voorstel. Schrijf hieronder zelf het antwoord." }), draft?.stale && (0, jsx_runtime_1.jsx)("p", { className: cls.warning, children: "Na dit voorstel heeft de klant opnieuw gemaild. Lees de nieuwste mail voor je verstuurt." }), showText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: `${id}-text`, className: cls.srOnly, children: ["Antwoord aan ", thread.customerAddress] }), (0, jsx_runtime_1.jsx)("textarea", { id: `${id}-text`, className: cls.textarea, rows: 7, value: text, readOnly: !can("edit"), "aria-describedby": `${id}-mode`, onChange: (e) => onText(e.target.value) })] })), (0, jsx_runtime_1.jsx)(ReplyAttachments, { cls: cls, attachments: (detail.replyAttachments ?? []).filter((a) => !a.sent), busy: busy, editable: can("attach"), run: run, uploadFile: uploadFile }), send?.status === "unknown" && ((0, jsx_runtime_1.jsxs)("div", { role: "group", "aria-label": "Verzending controleren", className: cls.warning, children: [(0, jsx_runtime_1.jsxs)("p", { children: ["Het is niet zeker of het vorige antwoord is verstuurd. Kijk in Outlook bij Verzonden items van ", thread.mailbox, ". Heeft Microsoft een storing? Dan controleert de helpdesk vanzelf of het antwoord nog klaarstaat zodra Microsoft weer werkt."] }), (0, jsx_runtime_1.jsxs)("div", { className: cls.actions, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.secondaryButton, disabled: busy || !can("resolve_send"), onClick: () => run("resolve-send", { body: { outcome: "sent" } }), children: "Het staat in Verzonden items" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.secondaryButton, disabled: busy || !can("resolve_send"), onClick: () => run("resolve-send", { body: { outcome: "not_sent" } }), children: "Het is niet verstuurd" })] })] })), (showText || showSend) && ((0, jsx_runtime_1.jsxs)("div", { className: cls.composerFooter, children: [(0, jsx_runtime_1.jsx)("p", { id: `${id}-mode`, className: cls.muted, children: footerNote(pilot.writeMode, thread.mailbox) }), confirming === null && ((0, jsx_runtime_1.jsxs)("div", { className: cls.actions, children: [can("regenerate") && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.secondaryButton, disabled: busy, onClick: () => run("regenerate"), children: "Nieuw voorstel" })), can("edit") && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.secondaryButton, disabled: busy || !dirty || text.trim() === "", onClick: () => run("draft", { method: "PUT", body: { text } }), children: "Opslaan" })), showSend && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: cls.primaryButton, disabled: busy || !canSend, "aria-describedby": sendBlockedReason && !can("send") ? `${id}-blocked` : undefined, onClick: () => setConfirming("send"), children: [(0, jsx_runtime_1.jsx)(Icon, { name: "send", className: cls.icon }), "Goedkeuren en versturen"] }))] }))] })), showSend && confirming === null && sendBlockedReason && !can("send") && ((0, jsx_runtime_1.jsx)("p", { id: `${id}-blocked`, className: cls.muted, children: sendBlockedReason })), showSend && confirming !== null && ((0, jsx_runtime_1.jsxs)("div", { role: "group", "aria-label": "Versturen bevestigen", className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsxs)("p", { className: cls.text, children: [confirming === "stale"
+                                ? "Er is een nieuwere mail van de klant. Wil je dit antwoord toch versturen?"
+                                : `Dit antwoord gaat nu naar ${thread.customerAddress}, vanaf ${thread.mailbox}${attachmentNote(detail)}.`, dirty ? " Je wijzigingen worden eerst opgeslagen." : ""] }), (0, jsx_runtime_1.jsxs)("div", { className: cls.actions, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.primaryButton, disabled: busy, onClick: () => void sendNow(confirming === "stale"), children: confirming === "stale" ? "Toch versturen" : "Ja, versturen" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.secondaryButton, disabled: busy, onClick: () => setConfirming(null), children: "Annuleren" })] })] }))] }));
+}
+function OtherActions({ cls, busy, can, run }) {
+    if (!can("unignore") && !can("mark_waiting") && !can("close"))
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("section", { "aria-label": "Overige acties", className: cls.actions, children: [can("unignore") && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.secondaryButton, disabled: busy, onClick: () => run("unignore"), children: "Toch behandelen" })), can("mark_waiting") && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.secondaryButton, disabled: busy, onClick: () => run("waiting"), children: "Wacht op klant" })), can("close") && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.secondaryButton, disabled: busy, onClick: () => run("close"), children: "Ticket sluiten" }))] }));
+}