@dxv-systems/helpdesk 0.0.0-stage → 0.1.0

package/dist/noise.d.ts

@@ -0,0 +1,17 @@
+import type { InternetMessageHeader, NoiseReason } from "./types";
+export interface NoiseInput {
+    from: string;
+    subject?: string;
+    headers?: InternetMessageHeader[] | Record<string, string | undefined>;
+    replyTo?: string[];
+    ownAddresses: string[];
+    connectedMailboxes: string[];
+}
+export type NoiseVerdict = {
+    action: "ignore" | "process";
+    reason: NoiseReason;
+    detail?: string;
+    customerAddress?: string;
+    suppressAutoResponse?: boolean;
+};
+export declare function classifyNoise(input: NoiseInput): NoiseVerdict;

package/dist/noise.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classifyNoise = classifyNoise;
+const MACHINE_LOCAL = /^(?:no[-_.]?reply|do[-_.]?not[-_.]?reply|mailer-daemon|postmaster|bounces?)(?:[+._-].*)?$/i;
+const EXCHANGE_SYSTEM_LOCAL = /^microsoftexchange[0-9a-f]{32}$/i;
+const OOO_SUBJECT = /^\s*(?:automatic reply|automatisch antwoord|auto[- ]?reply|autoreply|out of office|afwezigheidsmelding|abwesenheitsnotiz)\b/i;
+function headerMap(headers) {
+    const map = new Map();
+    if (!headers)
+        return map;
+    const entries = Array.isArray(headers)
+        ? headers.map((h) => [h.name, h.value])
+        : Object.entries(headers);
+    for (const [name, value] of entries) {
+        if (value === undefined || value === null)
+            continue;
+        const key = name.trim().toLowerCase();
+        map.set(key, map.has(key) ? `${map.get(key)}, ${String(value)}` : String(value));
+    }
+    return map;
+}
+function keyword(value) {
+    return (value ?? "").split(";")[0]?.trim().toLowerCase() ?? "";
+}
+function realReplyTo(input, from) {
+    const own = [...input.ownAddresses, ...input.connectedMailboxes].map((a) => a.trim().toLowerCase());
+    for (const raw of input.replyTo ?? []) {
+        const a = raw.trim().toLowerCase();
+        const local = a.split("@")[0] ?? "";
+        if (a.includes("@") && a !== from && !own.includes(a) && !MACHINE_LOCAL.test(local))
+            return a;
+    }
+    return null;
+}
+function classifyNoise(input) {
+    const from = input.from.trim().toLowerCase();
+    const h = headerMap(input.headers);
+    const ignore = (reason, detail) => ({
+        action: "ignore",
+        reason,
+        ...(detail ? { detail } : {}),
+    });
+    if (input.ownAddresses.some((a) => a.trim().toLowerCase() === from))
+        return ignore("own_address");
+    if (input.connectedMailboxes.some((a) => a.trim().toLowerCase() === from)) {
+        return ignore("connected_mailbox");
+    }
+    const local = from.split("@")[0] ?? "";
+    const contentType = (h.get("content-type") ?? "").toLowerCase();
+    const isNdrReport = contentType.includes("report-type=delivery-status") || contentType.includes("delivery-status");
+    if (isNdrReport || h.has("x-ms-exchange-message-is-ndr"))
+        return ignore("bounce", "ndr");
+    if (/^(?:mailer-daemon|postmaster)$/i.test(local))
+        return ignore("bounce", local);
+    if (EXCHANGE_SYSTEM_LOCAL.test(local))
+        return ignore("bounce", "exchange");
+    const auto = keyword(h.get("auto-submitted"));
+    if (auto && auto !== "no")
+        return ignore("auto_submitted", auto);
+    const precedence = keyword(h.get("precedence"));
+    if (["bulk", "junk", "list", "auto_reply"].includes(precedence))
+        return ignore("precedence", precedence);
+    if (h.has("x-autoreply") || h.has("x-autorespond") || OOO_SUBJECT.test(input.subject ?? "")) {
+        return ignore("out_of_office");
+    }
+    if (h.has("list-id") || h.has("list-unsubscribe"))
+        return ignore("mailing_list");
+    const suppressAutoResponse = (h.get("x-auto-response-suppress") ?? "").trim() !== "";
+    const flags = suppressAutoResponse ? { suppressAutoResponse } : {};
+    if (MACHINE_LOCAL.test(local)) {
+        const customer = realReplyTo(input, from);
+        if (customer)
+            return { action: "process", reason: "none", customerAddress: customer, ...flags };
+        return ignore("machine_sender", local);
+    }
+    return { action: "process", reason: "none", ...flags };
+}

package/dist/react.d.ts

@@ -0,0 +1,57 @@
+import { type ReactNode } from "react";
+import type { InboxThreadDetail } from "./inbox/types";
+export type { InboxActionResult, InboxThreadDetail, InboxThreadList, InboxThreadSummary, } from "./inbox/types";
+export interface HelpdeskInboxClassNames {
+    root: string;
+    layout: string;
+    listPane: string;
+    detailPane: string;
+    hiddenOnMobile: string;
+    title: string;
+    filters: string;
+    field: string;
+    label: string;
+    select: string;
+    list: string;
+    listItem: string;
+    listItemCurrent: string;
+    listItemTitle: string;
+    listItemMeta: string;
+    card: string;
+    heading: string;
+    subheading: string;
+    text: string;
+    muted: string;
+    meta: string;
+    badges: string;
+    badge: string;
+    badgeAttention: string;
+    badgeDone: string;
+    messages: string;
+    message: string;
+    messageHeader: string;
+    messageBody: string;
+    textarea: string;
+    actions: string;
+    primaryButton: string;
+    secondaryButton: string;
+    dangerButton: string;
+    linkButton: string;
+    banner: string;
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+    context: string;
+}
+export declare const DEFAULT_HELPDESK_INBOX_CLASSNAMES: HelpdeskInboxClassNames;
+export interface HelpdeskInboxProps {
+    apiBasePath?: string;
+    classNames?: Partial<HelpdeskInboxClassNames>;
+    pollIntervalMs?: number;
+    fetch?: typeof fetch;
+    renderCustomerContext?: (thread: InboxThreadDetail["thread"]) => ReactNode;
+    initialThreadId?: string;
+    onThreadChange?: (threadId: string | null) => void;
+}
+export declare function HelpdeskInbox({ apiBasePath, classNames, pollIntervalMs, fetch: fetchImpl, renderCustomerContext, initialThreadId, onThreadChange, }: HelpdeskInboxProps): import("react").JSX.Element;

package/dist/react.js

@@ -0,0 +1,431 @@
+"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");
+exports.DEFAULT_HELPDESK_INBOX_CLASSNAMES = {
+    root: "flex w-full flex-col gap-4 text-foreground",
+    layout: "flex w-full flex-col gap-6 md:flex-row md:items-start",
+    listPane: "flex min-w-0 flex-col gap-3 md:w-96 md:flex-none",
+    detailPane: "flex min-w-0 flex-1 flex-col gap-4",
+    hiddenOnMobile: "max-md:hidden",
+    title: "text-2xl font-bold leading-tight",
+    filters: "grid grid-cols-1 gap-3 sm:grid-cols-3 md:grid-cols-1",
+    field: "flex flex-col gap-1.5",
+    label: "text-sm font-semibold",
+    select: "h-11 w-full min-w-0 rounded-md border border-input bg-background px-3 text-base focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring",
+    list: "flex flex-col gap-2",
+    listItem: "flex min-h-11 w-full flex-col gap-1 rounded-md border border-border bg-card px-4 py-3 text-left text-card-foreground hover:bg-accent",
+    listItemCurrent: "flex min-h-11 w-full flex-col gap-1 rounded-md border border-primary bg-accent px-4 py-3 text-left text-card-foreground",
+    listItemTitle: "font-semibold break-words",
+    listItemMeta: "flex flex-wrap items-center gap-2 text-sm text-muted-foreground",
+    card: "flex flex-col gap-4 rounded-lg border border-border bg-card p-4 text-card-foreground sm:p-6",
+    heading: "text-xl font-bold break-words",
+    subheading: "text-base font-semibold",
+    text: "",
+    muted: "text-sm text-muted-foreground",
+    meta: "flex flex-col gap-1 text-sm text-muted-foreground break-words",
+    badges: "flex flex-wrap items-center gap-2",
+    badge: "whitespace-nowrap rounded-full bg-muted px-2.5 py-0.5 text-sm font-semibold",
+    badgeAttention: "whitespace-nowrap rounded-full bg-amber-50 px-2.5 py-0.5 text-sm font-semibold text-amber-900 dark:bg-amber-950 dark:text-amber-100",
+    badgeDone: "whitespace-nowrap rounded-full bg-emerald-50 px-2.5 py-0.5 text-sm font-semibold text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200",
+    messages: "flex flex-col gap-3",
+    message: "flex flex-col gap-2 rounded-md border border-border p-4",
+    messageHeader: "flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1 text-sm",
+    messageBody: "whitespace-pre-wrap break-words text-sm leading-relaxed",
+    textarea: "min-h-48 w-full rounded-md border border-input bg-background p-3 text-base leading-relaxed focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring read-only:bg-muted",
+    actions: "flex flex-wrap items-center gap-3",
+    primaryButton: "inline-flex min-h-11 items-center justify-center rounded-md bg-primary px-4 font-semibold text-primary-foreground hover:bg-primary/90 disabled:opacity-50",
+    secondaryButton: "inline-flex min-h-11 items-center justify-center rounded-md border border-border bg-background px-4 font-semibold hover:bg-accent disabled:opacity-50",
+    dangerButton: "inline-flex min-h-11 items-center justify-center rounded-md border border-destructive bg-background px-4 font-semibold text-destructive hover:bg-destructive/10 disabled:opacity-50",
+    linkButton: "inline-flex min-h-11 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 dateTime = new Intl.DateTimeFormat("nl-NL", { dateStyle: "medium", timeStyle: "short" });
+const formatDate = (iso) => dateTime.format(new Date(iso));
+function stateBadgeClass(cls, state) {
+    if (state === "review")
+        return cls.badgeAttention;
+    if (state === "sent" || state === "waiting" || state === "closed")
+        return cls.badgeDone;
+    return cls.badge;
+}
+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 concept 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 ?? [];
+    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.jsxs)("div", { className: cls.field, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: `${id}-view`, className: cls.label, children: "Tickets" }), (0, jsx_runtime_1.jsx)("select", { id: `${id}-view`, className: cls.select, value: view, onChange: (e) => setView(e.target.value), children: VIEWS.map((v) => ((0, jsx_runtime_1.jsx)("option", { value: v.value, children: v.label }, v.value))) })] }), (0, jsx_runtime_1.jsxs)("div", { className: cls.field, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: `${id}-assignee`, className: cls.label, children: "Toegewezen aan" }), (0, jsx_runtime_1.jsx)("select", { id: `${id}-assignee`, className: cls.select, value: assignee, onChange: (e) => setAssignee(e.target.value), 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)("div", { className: cls.field, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: `${id}-mailbox`, className: cls.label, children: "Mailbox" }), (0, jsx_runtime_1.jsxs)("select", { id: `${id}-mailbox`, className: cls.select, value: mailbox, onChange: (e) => setMailbox(e.target.value), 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.jsx)("span", { className: cls.listItemTitle, children: thread.subject || "(geen onderwerp)" }), (0, jsx_runtime_1.jsxs)("span", { className: cls.listItemMeta, children: [(0, jsx_runtime_1.jsx)("span", { children: thread.customerAddress }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: "\u00B7" }), (0, jsx_runtime_1.jsx)("span", { children: formatDate(thread.lastActivityAt) })] }), (0, jsx_runtime_1.jsxs)("span", { className: cls.listItemMeta, children: [(0, jsx_runtime_1.jsx)("span", { className: stateBadgeClass(cls, thread.state), children: messages_1.STATE_LABELS[thread.state] }), thread.state === "review" && thread.reviewReason && (0, jsx_runtime_1.jsx)("span", { children: messages_1.REVIEW_REASON_LABELS[thread.reviewReason] }), thread.assignee && (0, jsx_runtime_1.jsxs)("span", { children: ["Bij ", thread.assignee.name] }), showMailbox && (0, jsx_runtime_1.jsx)("span", { 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 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 ?? [] });
+                }
+                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, actions } = detail;
+    const can = (action) => actions.includes(action);
+    const isMine = thread.assignee?.id === detail.viewer.id;
+    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.jsx)("div", { children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.linkButton, onClick: onBack, children: "Terug naar tickets" }) }), (0, jsx_runtime_1.jsxs)("section", { className: cls.card, 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.badges, children: [(0, jsx_runtime_1.jsx)("span", { className: stateBadgeClass(cls, thread.state), children: messages_1.STATE_LABELS[thread.state] }), thread.state === "review" && thread.reviewReason && ((0, jsx_runtime_1.jsx)("span", { className: cls.badge, children: messages_1.REVIEW_REASON_LABELS[thread.reviewReason] })), (0, jsx_runtime_1.jsx)("span", { className: cls.badge, children: messages_1.WRITE_MODE_LABELS[pilot.writeMode] })] }), (0, jsx_runtime_1.jsxs)("div", { className: cls.meta, children: [(0, jsx_runtime_1.jsxs)("span", { children: ["Klant: ", thread.customerAddress] }), (0, jsx_runtime_1.jsxs)("span", { children: ["Mailbox: ", thread.mailbox] }), (0, jsx_runtime_1.jsxs)("span", { children: ["Laatste activiteit: ", formatDate(thread.lastActivityAt)] }), 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.actions, children: [(0, jsx_runtime_1.jsx)("span", { className: cls.muted, children: thread.assignee ? `Toegewezen aan ${isMine ? "jou" : thread.assignee.name}` : "Niet toegewezen" }), !isMine && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.secondaryButton, disabled: busy, onClick: () => run("assign"), children: "Aan mij toewijzen" })), thread.assignee && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.secondaryButton, disabled: busy, onClick: () => run("assign", { method: "DELETE" }), children: "Toewijzing weghalen" }))] })] }), (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.jsxs)("section", { "aria-labelledby": `${id}-messages`, className: cls.card, children: [(0, jsx_runtime_1.jsx)("h3", { id: `${id}-messages`, className: cls.subheading, children: "Berichten" }), (0, jsx_runtime_1.jsx)("ol", { className: cls.messages, children: detail.messages.map((m) => ((0, jsx_runtime_1.jsx)(MessageItem, { cls: cls, message: m, body: bodies.current.get(m.id) }, m.id))) })] }), (0, jsx_runtime_1.jsx)(DraftSection, { cls: cls, detail: detail, busy: busy, text: text, dirty: dirty, onText: (value) => {
+                    setText(value);
+                    setDirty(true);
+                }, act: act, run: run, can: can, uploadFile: uploadFile }), (0, jsx_runtime_1.jsx)(OtherActions, { cls: cls, busy: busy, can: can, run: run, draftInOutlook: pilot.writeMode === "drafts_in_outlook" && Boolean(detail.draft?.inOutlook) })] }));
+}
+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`;
+}
+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 AttachmentList({ cls, attachments }) {
+    if (attachments.length === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: cls.field, children: [(0, jsx_runtime_1.jsx)("span", { className: cls.label, children: attachments.length === 1 ? "Bijlage" : `Bijlagen (${attachments.length})` }), (0, jsx_runtime_1.jsx)("ul", { className: cls.list, children: attachments.map((a) => ((0, jsx_runtime_1.jsxs)("li", { children: [a.href ? ((0, jsx_runtime_1.jsx)("a", { href: a.href, download: a.name, className: cls.linkButton, children: a.name })) : ((0, jsx_runtime_1.jsx)("span", { children: a.name })), " ", (0, jsx_runtime_1.jsxs)("span", { className: cls.muted, children: ["(", formatSize(a.size), a.unavailable ? `, ${UNAVAILABLE_TEXT[a.unavailable]}` : "", ")"] })] }, a.id))) })] }));
+}
+function MessageItem({ cls, message, body, }) {
+    return ((0, jsx_runtime_1.jsxs)("li", { className: cls.message, children: [(0, jsx_runtime_1.jsxs)("div", { className: cls.messageHeader, children: [(0, jsx_runtime_1.jsx)("span", { className: cls.subheading, children: message.fromAddress }), (0, jsx_runtime_1.jsx)("span", { className: cls.muted, children: formatDate(message.receivedAt) })] }), (message.noise || message.removed) && ((0, jsx_runtime_1.jsxs)("div", { className: cls.badges, children: [message.noise && (0, jsx_runtime_1.jsx)("span", { className: cls.badge, children: "Automatisch bericht" }), message.removed && (0, jsx_runtime_1.jsx)("span", { className: cls.badge, children: "Niet meer in de Inbox" })] })), 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)("div", { className: cls.messageBody, children: body.text || "(leeg bericht)" }), body && "text" in body && (0, jsx_runtime_1.jsx)(AttachmentList, { cls: cls, attachments: body.attachments })] }));
+}
+function modeExplanation(mode, mailbox) {
+    switch (mode) {
+        case "read_only":
+            return "Deze mailbox staat op alleen lezen. Je kunt het concept lezen en aanpassen, maar er gaat niets naar Outlook en er wordt niets verstuurd.";
+        case "drafts_in_app":
+            return `Dit concept staat alleen in de app. Het gaat pas naar Outlook als je het goedkeurt, en wordt dan meteen verstuurd vanaf ${mailbox}.`;
+        case "drafts_in_outlook":
+            return `Dit concept staat ook in Outlook bij Concepten van ${mailbox}. Versturen gebeurt pas als je het goedkeurt.`;
+    }
+}
+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.field, children: [(0, jsx_runtime_1.jsx)("span", { className: cls.label, children: "Bijlagen" }), attachments.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: cls.list, children: attachments.map((a) => ((0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("span", { children: a.name }), " ", (0, jsx_runtime_1.jsxs)("span", { className: cls.muted, children: ["(", formatSize(a.size), ")"] }), " ", editable && !a.sent && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.linkButton, disabled: busy || uploading.length > 0, "aria-label": `${a.name} verwijderen`, onClick: () => run(`attachments/${encodeURIComponent(a.id)}`, { method: "DELETE" }), children: "Verwijderen" }))] }, 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.jsx)("label", { htmlFor: `${id}-file`, className: cls.secondaryButton, children: "Bijlage toevoegen" }), (0, jsx_runtime_1.jsx)("input", { id: `${id}-file`, type: "file", multiple: true, className: "sr-only", disabled: busy || uploading.length > 0, onChange: (e) => {
+                            const input = e.currentTarget;
+                            void choose(input.files).finally(() => {
+                                input.value = "";
+                            });
+                        } }), (0, jsx_runtime_1.jsx)("p", { className: cls.muted, children: "Samen hoogstens 20 MB en 10 bestanden. Ze gaan mee als je het antwoord goedkeurt." })] }))] }));
+}
+function attachmentNote(detail) {
+    const n = (detail.replyAttachments ?? []).filter((a) => !a.sent).length;
+    return n === 0 ? "" : n === 1 ? ", met 1 bijlage" : `, met ${n} bijlagen`;
+}
+function DraftSection({ 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;
+    if (!draft && thread.state !== "review")
+        return null;
+    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 concept om te versturen."
+                : send?.status === "unknown"
+                    ? "Geef eerst aan of het vorige antwoord is verstuurd."
+                    : null;
+    const sentView = send?.status === "sent" && !draft?.stale;
+    const showSend = thread.state === "review" && !sentView;
+    const canSend = can("send") && text.trim() !== "";
+    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.card, children: [(0, jsx_runtime_1.jsx)("h3", { id: `${id}-h`, className: cls.subheading, children: "Antwoord" }), writing && ((0, jsx_runtime_1.jsx)("p", { className: cls.info, "aria-live": "polite", children: "Er wordt een concept geschreven\u2026" })), draft?.status === "failed" && ((0, jsx_runtime_1.jsx)("p", { className: cls.warning, children: can("regenerate")
+                    ? "Het concept kon niet worden gemaakt. Laat een nieuw concept schrijven, schrijf zelf een antwoord of antwoord vanuit Outlook."
+                    : "Het concept kon niet worden gemaakt. Schrijf zelf een antwoord of antwoord vanuit Outlook." })), thread.reviewReason === "delivery_failed" && thread.state === "review" && ((0, jsx_runtime_1.jsx)("p", { className: cls.warning, children: "Dit antwoord is niet afgeleverd: het kwam terug als onbestelbaar. De reden staat bij Berichten. Stuur het opnieuw vanuit Outlook, bijvoorbeeld naar een ander adres, en kies daarna Al beantwoord in Outlook. Of kies Geen antwoord nodig." })), !draft && can("edit") && (0, jsx_runtime_1.jsx)("p", { className: cls.info, children: "Er is geen concept. Schrijf hieronder zelf het antwoord." }), draft?.stale && (0, jsx_runtime_1.jsx)("p", { className: cls.warning, children: "Na dit concept heeft de klant opnieuw gemaild. Lees de nieuwste mail voor je verstuurt." }), sentView ? ((0, jsx_runtime_1.jsxs)("div", { className: cls.field, children: [(0, jsx_runtime_1.jsx)("h4", { className: cls.label, children: "Verstuurd antwoord" }), (0, jsx_runtime_1.jsx)("div", { className: cls.messageBody, children: draft?.text || text || "(leeg)" }), (0, jsx_runtime_1.jsxs)("p", { className: cls.muted, children: ["Verstuurd op ", formatDate(send.at), " vanaf ", thread.mailbox, "."] }), (0, jsx_runtime_1.jsx)(ReplyAttachments, { cls: cls, attachments: (detail.replyAttachments ?? []).filter((a) => a.sent), busy: busy, editable: false, run: run, uploadFile: uploadFile })] })) : ((draft?.text !== null && draft?.text !== undefined) || can("edit")) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: cls.field, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: `${id}-text`, className: cls.label, children: draft?.text ? "Concept-antwoord" : "Jouw antwoord" }), (0, jsx_runtime_1.jsx)("textarea", { id: `${id}-text`, className: cls.textarea, value: text, readOnly: !can("edit"), "aria-describedby": `${id}-mode`, onChange: (e) => onText(e.target.value) })] }), (0, jsx_runtime_1.jsx)("p", { id: `${id}-mode`, className: cls.muted, children: modeExplanation(pilot.writeMode, thread.mailbox) }), can("edit") && ((0, jsx_runtime_1.jsx)("div", { className: cls.actions, children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.secondaryButton, disabled: busy || !dirty || text.trim() === "", onClick: () => run("draft", { method: "PUT", body: { text } }), children: "Concept opslaan" }) }))] })), !sentView && ((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 concept 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" })] })] })), showSend && confirming === null && ((0, jsx_runtime_1.jsxs)("div", { className: cls.actions, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.primaryButton, disabled: busy || !canSend, "aria-describedby": sendBlockedReason ? `${id}-blocked` : undefined, onClick: () => setConfirming("send"), children: "Goedkeuren en versturen" }), 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: cls.field, 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, draftInOutlook, }) {
+    const [confirmExternal, setConfirmExternal] = (0, react_1.useState)(false);
+    const [confirmDismiss, setConfirmDismiss] = (0, react_1.useState)(false);
+    const any = ["regenerate", "retry_placement", "replied_externally", "mark_waiting", "close", "unignore", "dismiss"].some((a) => can(a));
+    if (!any)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("section", { "aria-label": "Overige acties", className: cls.actions, children: [can("regenerate") && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.secondaryButton, disabled: busy, onClick: () => run("regenerate"), children: "Nieuw concept laten schrijven" })), can("retry_placement") && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.secondaryButton, disabled: busy, onClick: () => run("retry-placement"), children: "Opnieuw in Outlook zetten" })), 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" })), can("replied_externally") &&
+                (confirmExternal ? ((0, jsx_runtime_1.jsxs)("span", { role: "group", "aria-label": "Beantwoord in Outlook bevestigen", className: cls.actions, children: [(0, jsx_runtime_1.jsx)("span", { className: cls.text, children: "Al beantwoord in Outlook? Het concept wordt dan niet verstuurd." }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.dangerButton, disabled: busy, onClick: () => {
+                                setConfirmExternal(false);
+                                run("replied-externally");
+                            }, children: "Ja, al beantwoord" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.secondaryButton, onClick: () => setConfirmExternal(false), children: "Annuleren" })] })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.secondaryButton, disabled: busy, onClick: () => setConfirmExternal(true), children: "Al beantwoord in Outlook" }))), can("dismiss") &&
+                (confirmDismiss ? ((0, jsx_runtime_1.jsxs)("span", { role: "group", "aria-label": "Geen antwoord nodig bevestigen", className: cls.actions, children: [(0, jsx_runtime_1.jsxs)("span", { className: cls.text, children: ["Geen antwoord nodig? Er wordt niets verstuurd en het ticket gaat naar Genegeerd.", draftInOutlook ? " Het concept in Outlook wordt verwijderd." : ""] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.dangerButton, disabled: busy, onClick: () => {
+                                setConfirmDismiss(false);
+                                run("dismiss");
+                            }, children: "Ja, geen antwoord nodig" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.secondaryButton, onClick: () => setConfirmDismiss(false), children: "Annuleren" })] })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", className: cls.secondaryButton, disabled: busy, onClick: () => setConfirmDismiss(true), children: "Geen antwoord nodig" })))] }));
+}

package/dist/reply-attachments.d.ts

@@ -0,0 +1,28 @@
+import type { MailboxAccess } from "./controls";
+import type { HelpdeskDeps, ReplyAttachment } from "./types";
+export declare const MAX_REPLY_ATTACHMENT_BYTES: number;
+export declare const MAX_REPLY_ATTACHMENTS = 10;
+export declare function pendingReplyAttachments(deps: HelpdeskDeps, threadId: string): Promise<ReplyAttachment[]>;
+export declare function startReplyUpload(deps: HelpdeskDeps, input: {
+    threadId: string;
+    staffId: string;
+    name: string;
+    contentType: string;
+    size: number;
+}): Promise<{
+    uploadUrl: string;
+    uploadToken: string;
+    contentType: string;
+}>;
+export declare function addReplyAttachment(deps: HelpdeskDeps, input: {
+    threadId: string;
+    staffId: string;
+    uploadToken: string;
+}): Promise<ReplyAttachment>;
+export declare function removeReplyAttachment(deps: HelpdeskDeps, input: {
+    threadId: string;
+    attachmentId: string;
+}): Promise<void>;
+export declare function placeReplyAttachments(deps: HelpdeskDeps, access: MailboxAccess, threadId: string, draftId: string): Promise<void>;
+export declare function markReplyAttachmentsSent(deps: HelpdeskDeps, threadId: string, draftId: string | null, intentId: string): Promise<void>;
+export declare function discardPendingReplyAttachments(deps: HelpdeskDeps, threadId: string): Promise<void>;