@remit/web-client 0.0.325 → 0.0.326

package/dist/src/components/compose/ComposeForm.js

@@ -0,0 +1,925 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { configOperationsGetConfigOptions, outboxDetailOperationsDeleteOutboxMessageMutation, outboxDetailOperationsGetOutboxMessageOptions, outboxDetailOperationsSendOutboxMessageMutation, } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { Banner, ComposeActionBar, ComposeAttachments, ComposeBodySkeleton, ComposeFormShell, ComposeHeader, ComposeQuoteMissingBanner, ComposeSubjectField, composeHeaderSummary, defaultComposeLanguages, modeOfDraft, NO_QUOTABLE_BODY_FORWARD_MESSAGE, QuotedText, SMTP_MISSING_MESSAGE, sanitizeQuotedHtml, unwrapLanguage, } from "@remit/ui";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { useComposeAttachments, } from "../../hooks/useComposeAttachments";
+import { useInlineImages } from "../../hooks/useInlineImages";
+import { useMessageBodyContent } from "../../hooks/useMessageBodyContent";
+import { useSaveDraft } from "../../hooks/useSaveDraft";
+import { useSignature } from "../../hooks/useSignature.js";
+import { isNotFound, softErrorMeta } from "../../lib/error-classifier";
+import { accountIsMissingSmtp } from "../settings/account-form-helpers.js";
+import { useErrorBanners } from "../ui/ErrorBannerProvider.js";
+import { buildMutationErrorBanner, formatErrorDetail, } from "../ui/error-banners.js";
+import { AddressField } from "./AddressField";
+import { ComposeSmtpMissingBanner } from "./ComposeSmtpMissingBanner";
+import { composeSpellcheck } from "./compose-spellcheck.js";
+import { mailSyncOffReason } from "./mail-sync-off-refusal.js";
+import { buildQuotedBlock, outgoingBody, textToHtml, } from "./quoted-message.js";
+const LazyComposeBody = lazy(() => import("@remit/ui/rich-text").then((m) => ({ default: m.ComposeBody })));
+import { useIsDesktop } from "../../hooks/useMediaQuery.js";
+import { useVisualViewport } from "../../hooks/useVisualViewport.js";
+import { OUTBOX_ROW_META, useCompose } from "./ComposeProvider";
+import { FromSelector } from "./FromSelector";
+const buildInitialHtml = (signaturePlainText) => {
+    if (!signaturePlainText)
+        return "";
+    return `<p></p><p>-- </p>${textToHtml(signaturePlainText)}`;
+};
+/**
+ * The document a new message opens on. One definition, because a form that
+ * starts a second message without remounting has to open on the same thing the
+ * first one did.
+ */
+const freshDocument = (signaturePlainText, seed) => {
+    if (!seed) {
+        return {
+            html: buildInitialHtml(signaturePlainText),
+            text: signaturePlainText,
+        };
+    }
+    return {
+        html: `${textToHtml(seed.body)}${buildInitialHtml(signaturePlainText)}`,
+        text: [seed.body, signaturePlainText].filter(Boolean).join("\n\n"),
+    };
+};
+const buildReplySubject = (subject) => {
+    if (!subject)
+        return "Re: ";
+    if (/^re:\s/i.test(subject))
+        return subject;
+    return `Re: ${subject}`;
+};
+const buildForwardSubject = (subject) => {
+    if (!subject)
+        return "Fwd: ";
+    if (/^fwd?:\s/i.test(subject))
+        return subject;
+    return `Fwd: ${subject}`;
+};
+const getReplyAddresses = (msg, mode, myEmail) => {
+    const { envelope } = msg;
+    const replyTo = envelope.replyTo.length > 0 ? envelope.replyTo : envelope.from;
+    const to = replyTo.map((a) => ({
+        email: a.normalizedEmail,
+        displayName: a.displayName,
+    }));
+    if (mode !== "reply-all")
+        return { to, cc: [] };
+    const myEmailLower = myEmail?.toLowerCase();
+    const toEmails = new Set(to.map((a) => a.email.toLowerCase()));
+    const cc = [...envelope.to, ...envelope.cc]
+        .filter((a) => a.normalizedEmail.toLowerCase() !== myEmailLower &&
+        !toEmails.has(a.normalizedEmail.toLowerCase()))
+        .map((a) => ({
+        email: a.normalizedEmail,
+        displayName: a.displayName,
+    }));
+    return { to, cc };
+};
+const getReferences = (msg) => {
+    const messageIdValue = msg.envelope.messageIdValue;
+    const ofType = (type) => msg.references
+        .filter((r) => r.referenceType === type)
+        .sort((a, b) => a.referenceOrder - b.referenceOrder)
+        .map((r) => r.messageIdValue);
+    const existingRefs = ofType("references");
+    const references = existingRefs.length > 0 ? [...existingRefs] : ofType("in_reply_to");
+    if (messageIdValue && !references.includes(messageIdValue)) {
+        references.push(messageIdValue);
+    }
+    return {
+        inReplyTo: messageIdValue,
+        references,
+    };
+};
+/**
+ * Naming To, not "a recipient". Sending goes through the draft, and a draft is
+ * created against `CreateOutboxMessageInput`, whose `@minItems(1)` is on
+ * `toAddresses` alone — so a message addressed only in Cc has a recipient and
+ * still cannot be sent from here, and being told to add one it can already see
+ * leaves it with nothing to do. The server's own send guard counts Cc and Bcc,
+ * because a Bcc-only envelope is real mail; it is answering whether the message
+ * has anywhere to go, which is not the question this one asks.
+ */
+const NO_TO_ADDRESS_MESSAGE = "Add a To address before sending.";
+/**
+ * Send waits for the message being quoted. Pressed before it lands, the send
+ * would go out carrying the answer and nothing of what it answers — the defect
+ * this refusal exists to make impossible rather than merely unlikely (#845.5).
+ */
+const QUOTE_LOADING_MESSAGE = "Loading the message you're quoting.";
+/**
+ * The quoted original could not be fetched. A forward without it is an empty
+ * message and a reply without it drops the thread, so the composer says so
+ * where the message is being written instead of sending a message the user
+ * believes carries the original.
+ */
+const QUOTE_FAILED_MESSAGE = "The message you're quoting couldn't be loaded, so it won't be included.";
+/**
+ * A file needs a draft to hang from, and a draft is created against its To
+ * address, so a message with none cannot take a file yet.
+ */
+const ATTACH_NEEDS_TO_ADDRESS = "Add a To address before attaching a file — the draft the file is kept with is saved against it.";
+/**
+ * Text a recipient field could not read as an address stops the send and is
+ * quoted back. It is on screen and it was meant for somebody, so sending
+ * without it would deliver a message to fewer people than it was addressed to,
+ * and the composer closing on the send would take the text with it.
+ */
+const unparsedRefusal = ({ label, text }) => `${label} holds "${text}", which is not an address.`;
+const firstUnparsed = (fields) => fields.find((field) => field.text.trim() !== "");
+const EMPTY_PENDING = { entries: [], unparsed: "" };
+const isFormEmpty = (toAddresses, ccAddresses, bccAddresses, subject, body) => toAddresses.length === 0 &&
+    ccAddresses.length === 0 &&
+    bccAddresses.length === 0 &&
+    subject.trim() === "" &&
+    body.text.trim() === "";
+const WiredComposeHeader = ({ documentGeneration, selectedAccountId, onAccountChange, toAddresses, setToAddresses, ccAddresses, setCcAddresses, bccAddresses, setBccAddresses, showCc, setShowCc, showBcc, setShowBcc, subject, setSubject, fieldHandles, onToPendingChange, }) => {
+    const isDesktop = useIsDesktop();
+    const { isKeyboardOpen } = useVisualViewport();
+    // What the user asked to see belongs to the document being written, not to
+    // the keyboard. Tying it to the keyboard collapsed the rows again the moment
+    // one came back up — over the recipient field being typed into, which took
+    // the keyboard down with it and started the cycle over.
+    const [expandedFor, setExpandedFor] = useState(undefined);
+    const expanded = expandedFor === documentGeneration;
+    const [focusWithin, setFocusWithin] = useState(false);
+    return (_jsx("div", { className: "contents", onFocusCapture: () => setFocusWithin(true), onBlurCapture: (event) => {
+            if (event.currentTarget.contains(event.relatedTarget))
+                return;
+            setFocusWithin(false);
+        }, children: _jsx(ComposeHeader, { collapsed: !isDesktop && isKeyboardOpen && !expanded && !focusWithin, onExpand: () => setExpandedFor(documentGeneration), summary: composeHeaderSummary({
+                to: toAddresses,
+                cc: ccAddresses,
+                bcc: bccAddresses,
+                subject,
+            }), from: _jsx(FromSelector, { selectedAccountId: selectedAccountId, onSelect: onAccountChange }), to: _jsx(AddressField, { label: "To", addresses: toAddresses, onChange: setToAddresses, placeholder: "Recipients", onPendingChange: onToPendingChange, ref: fieldHandles.to }), cc: showCc ? (_jsx(AddressField, { label: "Cc", addresses: ccAddresses, onChange: setCcAddresses, ref: fieldHandles.cc })) : undefined, bcc: showBcc ? (_jsx(AddressField, { label: "Bcc", addresses: bccAddresses, onChange: setBccAddresses, ref: fieldHandles.bcc })) : undefined, subject: _jsx(ComposeSubjectField, { value: subject, onChange: setSubject }), onShowCc: () => setShowCc(true), onShowBcc: () => setShowBcc(true) }) }));
+};
+export const ComposeForm = ({ mode, account, sourceMessage, outboxMessageId, seed, insertion, onDraftCreated, onClose, onAccountChange, layout = "fill", }) => {
+    const { startSendPolling } = useCompose();
+    const { pushError } = useErrorBanners();
+    const [toAddresses, setToAddresses] = useState([]);
+    const [ccAddresses, setCcAddresses] = useState([]);
+    const [bccAddresses, setBccAddresses] = useState([]);
+    /**
+     * What To is holding but has not committed. A press on Send takes it, so the
+     * refusal for having no recipient must not stand while an address is on
+     * screen — the button's own reason comes from this state, before the press.
+     */
+    const [pendingTo, setPendingTo] = useState(EMPTY_PENDING);
+    const toFieldRef = useRef(null);
+    const ccFieldRef = useRef(null);
+    const bccFieldRef = useRef(null);
+    const fieldHandles = useMemo(() => ({ to: toFieldRef, cc: ccFieldRef, bcc: bccFieldRef }), []);
+    /** A new document leaves nothing typed behind in a field that did not remount. */
+    const clearPendingFields = useCallback(() => {
+        toFieldRef.current?.clearPending();
+        ccFieldRef.current?.clearPending();
+        bccFieldRef.current?.clearPending();
+    }, []);
+    const [subject, setSubject] = useState("");
+    const [showCc, setShowCc] = useState(false);
+    const [showBcc, setShowBcc] = useState(false);
+    const [selectedAccountId, setSelectedAccountId] = useState(account?.accountId);
+    const [draftLoaded, setDraftLoaded] = useState(false);
+    /**
+     * The document the fields on screen belong to. It trails `outboxMessageId`
+     * for one commit whenever the document changes, and autosave has to sit that
+     * commit out — the fields still hold the message that has just been left.
+     */
+    const [openDocumentId, setOpenDocumentId] = useState(outboxMessageId);
+    /**
+     * What the server's copy of this document would autosave as, so a draft that
+     * is only being looked at writes nothing.
+     *
+     * Opening one runs the autosave effect on the render that fills the fields
+     * from the read, and that write is no longer free: an edit returns a settled
+     * failure to `draft` (#933), so opening a Failed message and pressing Escape
+     * would take it out of the Outbox with the reader having changed nothing. The
+     * first run after a load records what was loaded; only a payload that differs
+     * from it is an edit.
+     */
+    const loadedPayloadRef = useRef(undefined);
+    const captureLoadedPayloadRef = useRef(false);
+    const smtpConfigureRef = useRef(null);
+    const prevOutboxMessageIdRef = useRef(outboxMessageId);
+    /**
+     * Whether the document on screen came from a draft the server already held.
+     * A reply carries the message it answers whether it is being started or being
+     * resumed, so this is what separates the two: the source seeds a reply that
+     * has nothing behind it, and leaves a saved one holding the recipients and
+     * the subject the reader edited.
+     */
+    const resumedDraftRef = useRef(outboxMessageId !== undefined);
+    /**
+     * Whether the document on screen already carries the quoted original. True of
+     * exactly one thing: a draft read back from the server, which was saved with
+     * the quote in its body. Held as state rather than read off `resumedDraftRef`
+     * because the quote is assembled during render.
+     */
+    const [documentHoldsQuote, setDocumentHoldsQuote] = useState(outboxMessageId !== undefined);
+    /**
+     * The mode the fields on screen were last written for. A draft that is
+     * resumed holds what its reader saved and must not be overwritten when it
+     * mounts — but a switch of mode over the same message asks for different
+     * recipients, which is how Reply All reaches the Cc field (#796).
+     *
+     * Taken at mount rather than on the first run that has a source: the source
+     * is fetched fresh after a reload, so a reader who presses Reply All before
+     * it lands would otherwise have that press recorded as the mode the draft
+     * opened under, and Reply All would stay dead.
+     */
+    const seededModeRef = useRef(outboxMessageId !== undefined ? mode : undefined);
+    /**
+     * The reader's own address the recipients were last written against, absent
+     * until something has been written. The account resolves from the source's
+     * mailbox, so it lands after the source: a seed made before it arrived kept
+     * the reader in their own Cc (#819), and is redone once it does.
+     */
+    const seededMyEmailRef = useRef(undefined);
+    // Read where a mode change must not itself be the trigger.
+    const modeRef = useRef(mode);
+    modeRef.current = mode;
+    /**
+     * The identity this form has already taken from the surface that mounted it.
+     * A reply learns which account the message reached only once the mailbox it
+     * was delivered to resolves, which lands after the first render — so From
+     * follows the prop instead of only its initial value. Applied once per
+     * identity, so a reader who then picks another one keeps it.
+     */
+    const appliedAccountIdRef = useRef(account?.accountId);
+    useEffect(() => {
+        const accountId = account?.accountId;
+        if (!accountId || appliedAccountIdRef.current === accountId)
+            return;
+        appliedAccountIdRef.current = accountId;
+        // A saved draft carries the account it was written from; that is the one
+        // it reopens on.
+        if (resumedDraftRef.current)
+            return;
+        setSelectedAccountId(accountId);
+    }, [account?.accountId]);
+    // The document this form is on changed under it, so it starts again: another
+    // draft, or no draft at all. Without this the previous one's fields stay on
+    // screen and the new one never loads, because `draftLoaded` is still true
+    // from the session before (#536).
+    //
+    // "No draft at all" is Compose pressed while already composing — the address
+    // drops the draft segment and the same route stays matched, so nothing
+    // remounts the form. Leaving it alone there showed the old message under an
+    // address that said new one, and the next autosave took the create branch
+    // and wrote a second draft holding the first one's content.
+    //
+    // The one change that is not a different document is the first autosave
+    // adopting the id it just created. That is this session's own content coming
+    // back, and blanking the form there would throw away what is being typed.
+    useEffect(() => {
+        const previous = prevOutboxMessageIdRef.current;
+        if (previous === outboxMessageId)
+            return;
+        prevOutboxMessageIdRef.current = outboxMessageId;
+        if (previous === undefined)
+            return;
+        resumedDraftRef.current = outboxMessageId !== undefined;
+        setDocumentHoldsQuote(outboxMessageId !== undefined);
+        seededModeRef.current =
+            outboxMessageId !== undefined ? modeRef.current : undefined;
+        seededMyEmailRef.current = undefined;
+        // A draft brings its own body along in a moment; a new message opens on
+        // the signature, the same document a fresh mount would have started on.
+        const opening = outboxMessageId
+            ? { html: "", text: "" }
+            : freshDocument(signatureRef.current, seedRef.current);
+        setToAddresses([]);
+        setCcAddresses([]);
+        setBccAddresses([]);
+        clearPendingFields();
+        setSubject("");
+        setShowCc(false);
+        setShowBcc(false);
+        setInitialHtml(opening.html);
+        setInitialText(opening.text);
+        setBodyMode("rich");
+        setDraftLanguage(undefined);
+        setBody({ ...opening, formatting: [] });
+        setDocumentGeneration((generation) => generation + 1);
+        setDraftLoaded(false);
+        loadedPayloadRef.current = undefined;
+        captureLoadedPayloadRef.current = false;
+        setOpenDocumentId(outboxMessageId);
+    }, [outboxMessageId, clearPendingFields]);
+    const { signature } = useSignature(selectedAccountId);
+    // Read when a new message starts, never depended on: a signature arriving is
+    // not a reason to reopen the document somebody is typing in.
+    const signatureRef = useRef(signature.plainText);
+    signatureRef.current = signature.plainText;
+    const seedRef = useRef(seed);
+    seedRef.current = seed;
+    // The editor reads its document once, so this is the document it opens on,
+    // not the live value, and it is remounted when the generation changes. Only
+    // loading a different document bumps that — remounting mid-compose would take
+    // the caret, the focus and the undo history with it.
+    const [documentGeneration, setDocumentGeneration] = useState(0);
+    const [initialHtml, setInitialHtml] = useState(() => freshDocument(signature.plainText, seed).html);
+    const [initialText, setInitialText] = useState(() => freshDocument(signature.plainText, seed).text);
+    const [bodyMode, setBodyMode] = useState("rich");
+    // What the body is tagged with on the way out. The composer owns the value —
+    // it is the surface that has the text detection reads — and reports it here,
+    // because this is where a draft is written and where a send is assembled.
+    const [composeLanguage, setComposeLanguage] = useState("en");
+    const [draftLanguage, setDraftLanguage] = useState();
+    const [body, setBody] = useState(() => ({
+        ...freshDocument(signature.plainText, seed),
+        formatting: [],
+    }));
+    const [insertedVersion, setInsertedVersion] = useState(() => insertion?.version ?? 0);
+    const pendingInsertion = insertion &&
+        insertion.version > insertedVersion &&
+        (outboxMessageId === undefined || draftLoaded)
+        ? insertion
+        : undefined;
+    const { data: draftData, error: draftError } = useQuery({
+        ...outboxDetailOperationsGetOutboxMessageOptions({
+            path: { outboxMessageId: outboxMessageId ?? "" },
+        }),
+        enabled: !!outboxMessageId && !draftLoaded,
+        meta: OUTBOX_ROW_META,
+        retry: (failureCount, error) => !isNotFound(error) && failureCount < 1,
+    });
+    // The draft id is a path segment, so Back after a send — or a restored tab —
+    // reopens the composer on a row the send already filed and deleted. There is
+    // no document left to reopen and nothing failed, so the surface closes the way
+    // it closes on Send. Only the 404 is read this way; a lapsed session still
+    // escalates.
+    useEffect(() => {
+        if (!isNotFound(draftError))
+            return;
+        onClose();
+    }, [draftError, onClose]);
+    useEffect(() => {
+        if (!draftData || draftLoaded)
+            return;
+        setToAddresses(draftData.toAddresses.map((email) => ({ email, displayName: undefined })));
+        if (draftData.ccAddresses && draftData.ccAddresses.length > 0) {
+            setCcAddresses(draftData.ccAddresses.map((email) => ({
+                email,
+                displayName: undefined,
+            })));
+            setShowCc(true);
+        }
+        if (draftData.bccAddresses && draftData.bccAddresses.length > 0) {
+            setBccAddresses(draftData.bccAddresses.map((email) => ({
+                email,
+                displayName: undefined,
+            })));
+            setShowBcc(true);
+        }
+        if (draftData.subject)
+            setSubject(draftData.subject);
+        // A draft stores what would have been sent, so which surface it reopens in
+        // is read off that rather than a field of its own. A rich draft comes back
+        // from its HTML — reading its text into one paragraph, as this did, brought
+        // a formatted message back flattened.
+        // A rich draft carries its language in the `<div lang>` it was stored
+        // under; the editor reopens on what is inside that, so a reopened draft
+        // does not gain a second wrapper on its next autosave. A plain draft has
+        // no HTML to have carried one, and comes back on the account default.
+        const stored = unwrapLanguage(draftData.htmlBody ?? "");
+        const loadedHtml = stored.html;
+        const loadedText = draftData.textBody ?? "";
+        setBodyMode(modeOfDraft(draftData.htmlBody));
+        setDraftLanguage(stored.language ?? undefined);
+        setInitialHtml(loadedHtml);
+        setInitialText(loadedText);
+        setBody({ html: loadedHtml, text: loadedText, formatting: [] });
+        setDocumentGeneration((generation) => generation + 1);
+        setSelectedAccountId(draftData.accountId);
+        setDraftLoaded(true);
+        captureLoadedPayloadRef.current = true;
+    }, [draftData, draftLoaded]);
+    useEffect(() => {
+        if (!sourceMessage)
+            return;
+        // A draft the reader came back to holds what they saved, so mounting over
+        // it seeds nothing — but a switch of mode over the same message asks for
+        // a different answer, and rewrites the fields for it (#796). A rewrite
+        // made before the account resolved is redone when its address arrives,
+        // which is what takes the reader back out of their own Cc (#819).
+        if (resumedDraftRef.current && seededModeRef.current === mode) {
+            const seeded = seededMyEmailRef.current;
+            if (!seeded || seeded.myEmail === account?.email)
+                return;
+        }
+        seededModeRef.current = mode;
+        seededMyEmailRef.current = { myEmail: account?.email };
+        // The fields are being rewritten for a different answer, so what was typed
+        // into one and left there belongs to the answer being left behind. Without
+        // this the blur timer commits it into the new one 150 ms later.
+        clearPendingFields();
+        if (mode === "reply" || mode === "reply-all") {
+            const { to, cc } = getReplyAddresses(sourceMessage, mode, account?.email);
+            setToAddresses(to);
+            setCcAddresses(cc);
+            if (cc.length > 0)
+                setShowCc(true);
+            setSubject(buildReplySubject(sourceMessage.envelope.subject));
+        }
+        // A forward is addressed to nobody, so it writes the address fields the
+        // way a reply writes them. Setting only the subject read as "keep what is
+        // already there", which sent the forward to the person being answered
+        // (#797).
+        if (mode === "forward") {
+            setToAddresses([]);
+            setCcAddresses([]);
+            setBccAddresses([]);
+            setSubject(buildForwardSubject(sourceMessage.envelope.subject));
+        }
+    }, [mode, sourceMessage, account?.email, clearPendingFields]);
+    // Quoted reply/forward content lives at the per-part `contentUrl` since
+    // #224 PR 3 — fetch it via the same hook MessageBody uses.
+    const isQuoting = mode === "reply" || mode === "reply-all" || mode === "forward";
+    const { data: sourceBody, isLoading: quoteIsLoading, isError: quoteFailed, hasNoRenderablePart: sourceHasNoQuotableBody, refetch: refetchQuote, } = useMessageBodyContent({
+        messageId: sourceMessage?.message.messageId,
+        bodyParts: sourceMessage?.bodyParts,
+        enabled: isQuoting && !!sourceMessage,
+    });
+    const quoteMode = mode === "forward" ? "forward" : "reply";
+    /**
+     * The message being answered has not arrived yet, so the quote's own fetch
+     * cannot have started — it picks its part out of what has not landed. A send
+     * pressed in this window went out carrying none of the original and was
+     * refused by nothing, because "no part picked" reads the same here as "this
+     * message has no part to pick" (#1030).
+     */
+    const quoteSourceIsLoading = isQuoting && !sourceMessage;
+    /**
+     * The message being answered arrived carrying attachments and no text. A
+     * forward of it is refused: the composer sends a text body and an html body
+     * and no attachments, so the forward would arrive holding nothing of the
+     * original at all. A reply goes out — it carries the answer and the thread's
+     * references either way — and says the original is not quoted in it.
+     *
+     * Not stated for a resumed draft, whose body already holds whatever quote it
+     * was saved with; this composer is not the one that assembles it.
+     */
+    const quoteHasNoBody = isQuoting && !documentHoldsQuote && sourceHasNoQuotableBody;
+    const nothingToForward = quoteHasNoBody && quoteMode === "forward";
+    /**
+     * The original as it will be sent, and as it is shown while the answer is
+     * written — one value for both, because the two disagreeing is the whole of
+     * #845.5.
+     *
+     * Absent for a draft read back from the server: that document was saved with
+     * the quote already in it, so the editor holds it and appending a second copy
+     * would send the original twice.
+     */
+    const quotedBlock = useMemo(() => {
+        if (!isQuoting || !sourceMessage || documentHoldsQuote)
+            return undefined;
+        if (!sourceBody)
+            return undefined;
+        const body = sourceBody.kind === "html"
+            ? { kind: "html", content: sanitizeQuotedHtml(sourceBody.body) }
+            : { kind: "text", content: sourceBody.body };
+        return buildQuotedBlock(mode === "forward" ? "forward" : "reply", sourceMessage.envelope, body);
+    }, [isQuoting, sourceMessage, documentHoldsQuote, sourceBody, mode]);
+    const senderName = sourceMessage?.envelope.from[0]?.displayName ??
+        sourceMessage?.envelope.from[0]?.normalizedEmail;
+    // The draft this session just created holds what is already on screen, so
+    // there is nothing to read back — and reading it back would replace the
+    // document under the caret with the server's copy of it.
+    const adoptCreatedDraft = useCallback((createdId) => {
+        setDraftLoaded(true);
+        // What is on screen is what was just written, so the fields belong to
+        // the new draft the moment it exists — before the id has travelled out
+        // through the address and back. Waiting for that would hold the next
+        // autosave, and the last thing typed before a pause would not be saved.
+        setOpenDocumentId(createdId);
+        onDraftCreated(createdId);
+    }, [onDraftCreated]);
+    const { saveState, saveError, saveDraft, saveImmediately, stopAutoSave } = useSaveDraft({
+        outboxMessageId,
+        onDraftCreated: adoptCreatedDraft,
+    });
+    const ensureDraftForAttachment = useCallback(async () => {
+        if (outboxMessageId)
+            return { outcome: "ready", outboxMessageId };
+        if (!selectedAccountId) {
+            return {
+                outcome: "refused",
+                reason: "Choose an account to send from before attaching a file.",
+            };
+        }
+        if (toAddresses.length === 0) {
+            return { outcome: "refused", reason: ATTACH_NEEDS_TO_ADDRESS };
+        }
+        const { htmlBody, textBody } = outgoingBody(bodyMode, body, composeLanguage, quotedBlock);
+        const saved = await saveImmediately({
+            accountId: selectedAccountId,
+            toAddresses: toAddresses.map((a) => a.email),
+            ccAddresses: ccAddresses.length > 0 ? ccAddresses.map((a) => a.email) : undefined,
+            bccAddresses: bccAddresses.length > 0
+                ? bccAddresses.map((a) => a.email)
+                : undefined,
+            subject: subject || undefined,
+            textBody,
+            htmlBody,
+            ...(sourceMessage && (mode === "reply" || mode === "reply-all")
+                ? getReferences(sourceMessage)
+                : {}),
+        });
+        if (saved.outcome === "failed") {
+            return {
+                outcome: "refused",
+                reason: `The draft could not be saved, so the file was not attached: ${formatErrorDetail(saved.error) ?? "the request failed"}.`,
+            };
+        }
+        return { outcome: "ready", outboxMessageId: saved.outboxMessageId };
+    }, [
+        outboxMessageId,
+        selectedAccountId,
+        toAddresses,
+        ccAddresses,
+        bccAddresses,
+        subject,
+        body,
+        bodyMode,
+        composeLanguage,
+        quotedBlock,
+        sourceMessage,
+        mode,
+        saveImmediately,
+    ]);
+    const { items: attachmentItems, attach, retry: retryAttachment, remove: removeAttachment, load: loadAttachments, reset: resetAttachments, owns: ownsAttachment, isLoaded: attachmentsLoaded, refreshLinks: refreshAttachmentLinks, storedContent, onRemoved: onAttachmentRemoved, blockingReason: attachmentBlockingReason, } = useComposeAttachments({
+        ensureDraft: ensureDraftForAttachment,
+    });
+    const queryClient = useQueryClient();
+    const inlineImages = useInlineImages({
+        attach,
+        owns: ownsAttachment,
+        isLoaded: attachmentsLoaded,
+        storedContent,
+        refreshLinks: () => {
+            if (!outboxMessageId)
+                return Promise.resolve();
+            return queryClient
+                .fetchQuery({
+                ...outboxDetailOperationsGetOutboxMessageOptions({
+                    path: { outboxMessageId },
+                }),
+                staleTime: 0,
+            })
+                .then((draft) => refreshAttachmentLinks(draft.attachments));
+        },
+        onRemoved: onAttachmentRemoved,
+        draftAttachments: draftData && draftData.outboxMessageId === outboxMessageId
+            ? draftData.attachments
+            : [],
+        pushError,
+    });
+    const attachmentDocumentRef = useRef(outboxMessageId);
+    useEffect(() => {
+        const previous = attachmentDocumentRef.current;
+        if (previous === outboxMessageId)
+            return;
+        attachmentDocumentRef.current = outboxMessageId;
+        if (previous === undefined)
+            return;
+        resetAttachments(outboxMessageId);
+    }, [outboxMessageId, resetAttachments]);
+    const attachmentsLoadedForRef = useRef(undefined);
+    useEffect(() => {
+        if (!draftData || draftData.outboxMessageId !== outboxMessageId)
+            return;
+        if (attachmentsLoadedForRef.current === draftData.outboxMessageId)
+            return;
+        attachmentsLoadedForRef.current = draftData.outboxMessageId;
+        loadAttachments(draftData.outboxMessageId, draftData.attachments);
+    }, [draftData, outboxMessageId, loadAttachments]);
+    // Auto-save runs on a debounce, so a failure has no inline call site to
+    // surface it. Push the real error detail to a banner instead of leaving only
+    // the muted "Save failed" status dot. A fatal 5xx also hits the global
+    // escalation overlay via MutationCache.onError.
+    useEffect(() => {
+        if (!saveError)
+            return;
+        pushError({
+            title: "Couldn't save draft",
+            detail: formatErrorDetail(saveError) ?? "Saving the draft failed.",
+            error: saveError,
+        });
+    }, [saveError, pushError]);
+    // A refused send is reported below, next to the message it did not send, and
+    // the composer stays up so the user can fix the address and press it again.
+    // A 5xx still escalates.
+    const sendMutation = useMutation({
+        ...outboxDetailOperationsSendOutboxMessageMutation(),
+        meta: softErrorMeta,
+    });
+    const deleteMutation = useMutation({
+        ...outboxDetailOperationsDeleteOutboxMessageMutation(),
+        meta: softErrorMeta,
+        onError: (error) => {
+            // Discard closes the dialog optimistically. A soft 4xx (409/404 the
+            // draft is already gone) must not pass silently as success — surface a
+            // banner. A fatal 5xx still escalates through MutationCache.onError.
+            pushError(buildMutationErrorBanner("Couldn't discard draft", "The draft wasn't discarded.", error));
+        },
+    });
+    const { data: config } = useQuery({
+        ...configOperationsGetConfigOptions(),
+        staleTime: Infinity,
+    });
+    const selectedAccount = config?.accounts.find((a) => a.accountId === selectedAccountId);
+    const selectedAccountMissingSmtp = selectedAccount
+        ? accountIsMissingSmtp(selectedAccount)
+        : false;
+    const [mailOffRefusal, setMailOffRefusal] = useState();
+    const selectedAccountMailOffReason = mailOffRefusal && mailOffRefusal.accountId === selectedAccountId
+        ? mailOffRefusal.reason
+        : undefined;
+    // An account that has never been to the language setting falls back to what
+    // the browser already knows the user reads, which is an ordered answer.
+    const configured = selectedAccount?.composeLanguages;
+    const accountLanguages = useMemo(() => configured && configured.length > 0
+        ? configured
+        : defaultComposeLanguages(navigator.languages), [configured]);
+    // The editor reopens the checker whenever the composer's language changes,
+    // so the tag the chip and detection settle on is the only one it is ever
+    // asked for.
+    const spellcheck = useMemo(() => composeSpellcheck(pushError), [pushError]);
+    // The action bar refuses a second press while one is in flight, but the
+    // editor's own Cmd+Enter goes straight to `attemptSend`, and the write that
+    // now precedes the request widens the window a second press lands in.
+    const sendInFlightRef = useRef(false);
+    const [isSending, setIsSending] = useState(false);
+    // Every refusal carries the sentence that explains it. Send is never a
+    // no-op: the state it reads has no way to be blocked without a reason. A
+    // ready state carries the account the message goes out from, so the send
+    // path has no condition of its own left to refuse on in silence.
+    const readinessFor = useCallback((toCount, unparsed) => {
+        if (isSending)
+            return { status: "sending" };
+        if (!selectedAccountId) {
+            return { status: "blocked", reason: "Choose an account to send from." };
+        }
+        if (selectedAccountMailOffReason) {
+            return { status: "blocked", reason: selectedAccountMailOffReason };
+        }
+        if (selectedAccountMissingSmtp) {
+            return { status: "blocked", reason: SMTP_MISSING_MESSAGE };
+        }
+        if (quoteIsLoading || quoteSourceIsLoading) {
+            return { status: "blocked", reason: QUOTE_LOADING_MESSAGE };
+        }
+        if (attachmentBlockingReason) {
+            return { status: "blocked", reason: attachmentBlockingReason };
+        }
+        if (unparsed) {
+            return { status: "blocked", reason: unparsedRefusal(unparsed) };
+        }
+        if (toCount === 0) {
+            return { status: "blocked", reason: NO_TO_ADDRESS_MESSAGE };
+        }
+        // Last of the refusals: the others name something the writer can go and
+        // fix, and this one names something about the message being forwarded
+        // that they cannot. The banner above states it the whole time either
+        // way, so the press is better spent on the fixable thing.
+        if (nothingToForward) {
+            return {
+                status: "blocked",
+                reason: NO_QUOTABLE_BODY_FORWARD_MESSAGE,
+            };
+        }
+        return { status: "ready", accountId: selectedAccountId };
+    }, [
+        isSending,
+        selectedAccountId,
+        selectedAccountMailOffReason,
+        selectedAccountMissingSmtp,
+        quoteIsLoading,
+        quoteSourceIsLoading,
+        attachmentBlockingReason,
+        nothingToForward,
+    ]);
+    const sendReadiness = useMemo(() => readinessFor(toAddresses.length + pendingTo.entries.length, firstUnparsed([{ label: "To", text: pendingTo.unparsed }])), [readinessFor, toAddresses.length, pendingTo]);
+    const sendState = sendReadiness;
+    useEffect(() => {
+        if (!selectedAccountId)
+            return;
+        // Nor one that is on its way out. Send commits the address fields as it
+        // goes, which lands here as a recipient change and would re-arm the timer
+        // `stopAutoSave` has just dropped — a draft write arriving after the send
+        // took the row out of draft (#845.6).
+        if (sendInFlightRef.current)
+            return;
+        // Don't autosave a document the fields are no longer on. They trail the
+        // address by a commit whenever it changes, so writing here sends the
+        // message just left to whatever the address now names — the previous
+        // draft's content onto the next draft, or, with no draft named at all, a
+        // spurious second one holding it (#535/#536).
+        if (openDocumentId !== undefined && openDocumentId !== outboxMessageId)
+            return;
+        // Nor one still arriving: opening an existing draft leaves the fields
+        // mid-population until the read lands.
+        if (outboxMessageId && !draftLoaded)
+            return;
+        if (isFormEmpty(toAddresses, ccAddresses, bccAddresses, subject, body))
+            return;
+        const { htmlBody, textBody } = outgoingBody(bodyMode, body, composeLanguage, quotedBlock);
+        const payload = {
+            accountId: selectedAccountId,
+            toAddresses: toAddresses.map((a) => a.email),
+            ccAddresses: ccAddresses.length > 0 ? ccAddresses.map((a) => a.email) : undefined,
+            bccAddresses: bccAddresses.length > 0 ? bccAddresses.map((a) => a.email) : undefined,
+            subject: subject || undefined,
+            textBody,
+            htmlBody,
+        };
+        // Nor a document nobody has touched. Reopening one is not editing it, and
+        // a PATCH is now a status change as well as a content one (#933).
+        const fingerprint = JSON.stringify(payload);
+        if (captureLoadedPayloadRef.current) {
+            captureLoadedPayloadRef.current = false;
+            loadedPayloadRef.current = fingerprint;
+            return;
+        }
+        if (loadedPayloadRef.current === fingerprint)
+            return;
+        loadedPayloadRef.current = undefined;
+        saveDraft(payload);
+    }, [
+        selectedAccountId,
+        outboxMessageId,
+        openDocumentId,
+        draftLoaded,
+        toAddresses,
+        ccAddresses,
+        bccAddresses,
+        subject,
+        body,
+        bodyMode,
+        composeLanguage,
+        quotedBlock,
+        saveDraft,
+    ]);
+    const handleSend = useCallback(async (accountId, recipients) => {
+        if (sendInFlightRef.current)
+            return;
+        sendInFlightRef.current = true;
+        setIsSending(true);
+        try {
+            stopAutoSave();
+            const replyData = sourceMessage && (mode === "reply" || mode === "reply-all")
+                ? getReferences(sourceMessage)
+                : {};
+            const { htmlBody, textBody } = outgoingBody(bodyMode, body, composeLanguage, quotedBlock);
+            const createdThisAttempt = !outboxMessageId;
+            // The debounce dropped above may have been holding the last two seconds
+            // of typing, and an existing entry would otherwise go out as the server
+            // last saw it (#674). What is on screen is written first, and a write
+            // that fails stops the send rather than transmitting the older copy.
+            const flushed = await saveImmediately({
+                accountId,
+                toAddresses: recipients.to.map((a) => a.email),
+                ccAddresses: recipients.cc.length > 0
+                    ? recipients.cc.map((a) => a.email)
+                    : undefined,
+                bccAddresses: recipients.bcc.length > 0
+                    ? recipients.bcc.map((a) => a.email)
+                    : undefined,
+                subject: subject || undefined,
+                textBody,
+                htmlBody,
+                ...replyData,
+            });
+            if (flushed.outcome === "failed") {
+                pushError({
+                    title: "Couldn't send message",
+                    detail: formatErrorDetail(flushed.error) ??
+                        "Saving the message failed, so nothing was sent. Try again.",
+                    error: flushed.error,
+                });
+                return;
+            }
+            const messageId = flushed.outboxMessageId;
+            const sent = await sendMutation
+                .mutateAsync({
+                path: { outboxMessageId: messageId },
+            })
+                .catch((error) => {
+                const reason = mailSyncOffReason(error);
+                if (reason)
+                    setMailOffRefusal({ accountId, reason });
+                pushError({
+                    title: "Couldn't send message",
+                    detail: formatErrorDetail(error) ??
+                        (createdThisAttempt
+                            ? "The draft was saved but the send request failed. Try again from the Outbox."
+                            : "The send request failed. Try again."),
+                    error,
+                });
+                return null;
+            });
+            if (sent === null)
+                return;
+            stopAutoSave(messageId);
+            startSendPolling(messageId);
+            onClose();
+        }
+        finally {
+            sendInFlightRef.current = false;
+            setIsSending(false);
+        }
+    }, [
+        subject,
+        body,
+        bodyMode,
+        composeLanguage,
+        quotedBlock,
+        mode,
+        sourceMessage,
+        outboxMessageId,
+        saveImmediately,
+        sendMutation,
+        stopAutoSave,
+        startSendPolling,
+        pushError,
+        onClose,
+    ]);
+    const handleDiscard = useCallback(() => {
+        stopAutoSave(outboxMessageId);
+        if (outboxMessageId) {
+            deleteMutation.mutate({
+                path: { outboxMessageId },
+            });
+        }
+        onClose();
+    }, [stopAutoSave, outboxMessageId, deleteMutation, onClose]);
+    // The refusal is announced first and moved to second. Focus alone carried
+    // nothing to a screen reader — the banner above was already on screen, so
+    // the press read as the button doing nothing.
+    const reportBlocked = useCallback((reason) => {
+        pushError({ title: "Can't send yet", detail: reason });
+        if (reason !== SMTP_MISSING_MESSAGE)
+            return;
+        smtpConfigureRef.current?.focus();
+    }, [pushError]);
+    /**
+     * Send goes out to the addresses on screen, not to the ones the fields have
+     * got round to committing. Each field commits on blur behind a timer, and the
+     * press that sends is the press that blurs — so a recipient typed and left in
+     * the field is taken here, in the same tick, before the message is judged to
+     * have anywhere to go (#845.6).
+     */
+    const attemptSend = useCallback(() => {
+        if (sendReadiness.status === "sending")
+            return;
+        const to = fieldHandles.to.current?.commitPending();
+        const cc = fieldHandles.cc.current?.commitPending();
+        const bcc = fieldHandles.bcc.current?.commitPending();
+        const recipients = {
+            to: to?.addresses ?? toAddresses,
+            cc: cc?.addresses ?? ccAddresses,
+            bcc: bcc?.addresses ?? bccAddresses,
+        };
+        const readiness = readinessFor(recipients.to.length, firstUnparsed([
+            { label: "To", text: to?.unparsed ?? "" },
+            { label: "Cc", text: cc?.unparsed ?? "" },
+            { label: "Bcc", text: bcc?.unparsed ?? "" },
+        ]));
+        if (readiness.status === "sending")
+            return;
+        if (readiness.status === "blocked") {
+            reportBlocked(readiness.reason);
+            return;
+        }
+        void handleSend(readiness.accountId, recipients);
+    }, [
+        sendReadiness.status,
+        fieldHandles,
+        toAddresses,
+        ccAddresses,
+        bccAddresses,
+        readinessFor,
+        reportBlocked,
+        handleSend,
+    ]);
+    const handleAccountChange = useCallback((acct) => {
+        setSelectedAccountId(acct.accountId);
+        onAccountChange?.(acct);
+    }, [onAccountChange]);
+    return (_jsx(ComposeFormShell, { layout: layout, onDropFiles: (files) => {
+            void attach(files);
+        }, banner: _jsxs(_Fragment, { children: [selectedAccount && selectedAccountMissingSmtp ? (_jsx(ComposeSmtpMissingBanner, { accountId: selectedAccount.accountId, configureRef: smtpConfigureRef })) : null, quoteHasNoBody ? (_jsx(ComposeQuoteMissingBanner, { mode: quoteMode })) : null, quoteFailed ? (_jsxs(Banner, { tone: "warning", "data-testid": "compose-quote-failed", children: [_jsx("span", { children: QUOTE_FAILED_MESSAGE }), " ", _jsx("button", { type: "button", className: "underline", onClick: () => {
+                                void refetchQuote();
+                            }, children: "Try again" })] })) : null] }), header: _jsx(WiredComposeHeader, { documentGeneration: documentGeneration, selectedAccountId: selectedAccountId, onAccountChange: handleAccountChange, toAddresses: toAddresses, setToAddresses: setToAddresses, ccAddresses: ccAddresses, setCcAddresses: setCcAddresses, bccAddresses: bccAddresses, setBccAddresses: setBccAddresses, showCc: showCc, setShowCc: setShowCc, showBcc: showBcc, setShowBcc: setShowBcc, subject: subject, setSubject: setSubject, fieldHandles: fieldHandles, onToPendingChange: setPendingTo }), quoted: quotedBlock ? (_jsx(QuotedText, { text: quotedBlock.text, html: quotedBlock.html, senderName: senderName })) : undefined, attachments: _jsx(ComposeAttachments, { items: attachmentItems, onRemove: (key) => {
+                void removeAttachment(key);
+            }, onRetry: (key) => {
+                void retryAttachment(key);
+            } }), actionBar: _jsx(ComposeActionBar, { send: sendState, onSend: attemptSend, onBlocked: reportBlocked, onDiscard: handleDiscard, save: saveState, onAttach: (files) => {
+                void attach(files);
+            } }), children: _jsx(Suspense, { fallback: _jsx(ComposeBodySkeleton, {}), children: _jsx(LazyComposeBody, { mode: bodyMode, onModeChange: setBodyMode, initialHtml: initialHtml, initialText: initialText, onChange: setBody, onSubmit: attemptSend, initialCaret: mode === "new" ? "start" : undefined, onConversionError: pushError, languages: accountLanguages, initialLanguage: draftLanguage, onLanguageChange: setComposeLanguage, spellcheck: spellcheck, insertion: pendingInsertion, onInserted: setInsertedVersion, inlineImages: inlineImages }, documentGeneration) }) }));
+};