nexus-shared 4.0.0 → 4.1.0

package/dist/Components/Messages/MailCompose.js

@@ -0,0 +1,154 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { iconPencil, iconSend, iconTrash, InlineIcon } from "nexus-icons";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { emptyMailDraft, mailDraftHasText, readMailDraft, writeMailDraft } from "../../Helpers/MailClientHelpers.js";
+import { MAIL_BODY_MAX, MAIL_SUBJECT_MAX, mailPeoplePicker, newMailClientId } from "../../Helpers/MessageHelpers.js";
+import { holdPickerItems } from "../../Helpers/PagedPicker.js";
+import { Button } from "../Documents/Button.js";
+import { CHAT_TOOLBAR } from "../Chats/ChatComposer.js";
+import { ChatFailure } from "../Chats/ChatParts.js";
+import { Dropdown } from "../Inputs/Dropdown.js";
+import { MarkdownEditor } from "../Inputs/MarkdownEditor.js";
+import { TextBox } from "../Inputs/TextBox.js";
+import { showMessageBox } from "../Layouts/MessageBox.js";
+import { Popup } from "../Layouts/Popup.js";
+import { MailPeople } from "./MailThread.js";
+/** The smallest the body's editor gets, however short the window. */
+const MIN_BODY = 120;
+/** A new mail or a reply, in a docked window. */
+export function MailComposeWindow({ open, onClose, source, userId, reply, initial, useDefaults = true, picker, draftKey, onSent, windowState, onWindowStateChange, className, }) {
+    const key = draftKey ?? (reply ? `reply:${String(reply.threadId)}` : "new");
+    // What the window holds, kept in a ref too so a close asks about what is there now.
+    const held = useRef(emptyMailDraft());
+    async function askToClose() {
+        if (!mailDraftHasText(held.current)) {
+            writeMailDraft(userId, key, null);
+            onClose();
+            return;
+        }
+        const answer = await showMessageBox({
+            title: "Keep this message?",
+            message: "It is not sent. Keep it as a draft to finish later, or discard it.",
+            tone: "question",
+            buttons: [
+                { value: "discard", label: "Discard", variant: "secondary" },
+                { value: "keep", label: "Keep draft", variant: "primary", autoFocus: true },
+            ],
+        });
+        if (answer === null)
+            return;
+        if (answer === "discard")
+            writeMailDraft(userId, key, null);
+        onClose();
+    }
+    return (_jsx(Popup, { open: open, onClose: () => void askToClose(), title: reply ? `Reply: ${reply.subject}` : "New message", icon: _jsx(InlineIcon, { icon: reply ? iconSend : iconPencil }), size: "md", height: "36rem", docked: true, minimizable: true, movable: false, reopen: "restore", flush: true, windowState: windowState, onWindowStateChange: onWindowStateChange, className: className, children: _jsx(MailComposeForm, { source: source, userId: userId, reply: reply ?? null, initial: initial, useDefaults: useDefaults, picker: picker, draftKey: key, held: held, onDiscard: () => {
+                writeMailDraft(userId, key, null);
+                onClose();
+            }, onSent: result => {
+                writeMailDraft(userId, key, null);
+                onSent?.(result);
+                onClose();
+            } }) }));
+}
+// The window's content: mounted each time it opens, so it reads the kept draft then.
+function MailComposeForm({ source, userId, reply, initial, useDefaults, picker: givenPicker, draftKey, held, onDiscard, onSent }) {
+    const picker = useMemo(() => givenPicker ?? mailPeoplePicker(source), [givenPicker, source]);
+    const [draft, setDraft] = useState(() => {
+        const kept = readMailDraft(userId, draftKey);
+        if (kept)
+            return kept;
+        return { ...emptyMailDraft(), ...(!reply && initial && { to: [...(initial.to ?? [])], cc: [...(initial.cc ?? [])], bcc: [...(initial.bcc ?? [])], subject: initial.subject ?? "" }), body: initial?.body ?? "" };
+    });
+    const [showCopies, setShowCopies] = useState(() => draft.cc.length > 0 || draft.bcc.length > 0);
+    const [clientId] = useState(newMailClientId);
+    const [sending, setSending] = useState(false);
+    const [error, setError] = useState(null);
+    const [tried, setTried] = useState(false);
+    held.current = draft;
+    // To from the reader's defaults, for a new mail with nobody named yet.
+    const asked = useRef(false);
+    useEffect(() => {
+        if (reply || !useDefaults || asked.current || draft.to.length > 0 || draft.cc.length > 0 || draft.bcc.length > 0)
+            return;
+        asked.current = true;
+        const controller = new AbortController();
+        source.defaults(controller.signal).then(defaults => {
+            holdPickerItems(picker, [...defaults.to, ...defaults.cc, ...defaults.bcc]);
+            const ids = (people) => people.filter(person => person.isActive !== false).map(person => person.id);
+            setDraft(was => (was.to.length || was.cc.length || was.bcc.length ? was : { ...was, to: ids(defaults.to), cc: ids(defaults.cc), bcc: ids(defaults.bcc) }));
+            if (defaults.cc.length || defaults.bcc.length)
+                setShowCopies(true);
+        }, () => undefined);
+        return () => controller.abort();
+        // Asked once per opening.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Kept as it is typed, a moment after the last key.
+    useEffect(() => {
+        const timer = setTimeout(() => writeMailDraft(userId, draftKey, { ...draft, savedAt: Date.now() }), 300);
+        return () => clearTimeout(timer);
+    }, [draft, userId, draftKey]);
+    // The body's editor fills what the window leaves it, as the window is resized or maximised.
+    const room = useRef(null);
+    const [bodyHeight, setBodyHeight] = useState(200);
+    const heightRef = useRef(bodyHeight);
+    heightRef.current = bodyHeight;
+    useLayoutEffect(() => {
+        const element = room.current;
+        if (!element)
+            return;
+        const measure = () => {
+            const editor = element.firstElementChild;
+            if (!editor || element.clientHeight <= 0)
+                return;
+            // The room inside the padding, less what the editor draws around its text: its bar and its status line.
+            const style = getComputedStyle(element);
+            const room = element.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);
+            const chrome = editor.offsetHeight - heightRef.current;
+            const next = Math.max(MIN_BODY, Math.floor(room - chrome));
+            if (Math.abs(next - heightRef.current) > 1)
+                setBodyHeight(next);
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    const set = (changes) => setDraft(was => ({ ...was, ...changes }));
+    const problems = [];
+    if (!reply && draft.to.length === 0)
+        problems.push("Name at least one person in To.");
+    if (!reply && draft.subject.trim() === "")
+        problems.push("Write a subject.");
+    if (draft.body.trim() === "")
+        problems.push("Write the message.");
+    async function send() {
+        setTried(true);
+        setError(null);
+        if (problems.length > 0)
+            return;
+        setSending(true);
+        try {
+            if (reply) {
+                await source.threadSource(reply.threadId).send({ body: draft.body.trim(), clientId, kind: "mail" });
+                onSent({ threadId: reply.threadId, reply: true });
+            }
+            else {
+                const sent = await source.compose({ to: draft.to, cc: draft.cc, bcc: draft.bcc, subject: draft.subject.trim(), body: draft.body.trim(), clientId });
+                onSent({ threadId: sent.id, reply: false });
+            }
+        }
+        catch (failure) {
+            setError(failure instanceof Error && failure.message ? failure.message : "The message was not sent.");
+            setSending(false);
+        }
+    }
+    const people = (name, label, autoFocus) => (_jsx(Dropdown, { multiple: true, name: `nx-mail-compose-${name}`, label: label, size: "sm", placeholder: "Search by name", value: draft[name], ...picker, onValueChange: (values) => set({ [name]: values }), error: tried && name === "to" && draft.to.length === 0 ? "Name at least one person." : undefined, autoFocus: autoFocus }));
+    return (_jsxs("div", { className: "nx-mail-compose", children: [_jsx("div", { className: "nx-mail-compose__fields", children: reply ? (_jsxs("p", { className: "nx-mail-compose__to", children: [_jsx("span", { className: "nx-mail-compose__label", children: "To" }), _jsx(MailPeople, { people: reply.people, userId: userId })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "nx-mail-compose__line", children: [people("to", "To", draft.to.length === 0), !showCopies && (_jsx(Button, { size: "sm", variant: "ghost", className: "nx-mail-compose__copies", onClick: () => setShowCopies(true), children: "Cc / Bcc" }))] }), showCopies && (_jsxs("div", { className: "nx-mail-compose__line", children: [people("cc", "Cc"), people("bcc", "Bcc")] })), _jsx(TextBox, { name: "nx-mail-compose-subject", label: "Subject", size: "sm", value: draft.subject, maxLength: MAIL_SUBJECT_MAX, onValueChange: subject => set({ subject }), error: tried && draft.subject.trim() === "" ? "Write a subject." : undefined })] })) }), _jsx("div", { ref: room, className: "nx-mail-compose__body", children: _jsx(MarkdownEditor, { name: "nx-mail-compose-body", "aria-label": "Message", placeholder: "Write your message\u2026", defaultValue: draft.body, modes: ["write", "preview"], toolbar: CHAT_TOOLBAR, toolbarOverflow: "menu", height: bodyHeight, minHeight: MIN_BODY, resizable: false, fullscreen: false, maxLength: MAIL_BODY_MAX, autoFocus: !!reply || draft.to.length > 0, error: tried && draft.body.trim() === "" ? "Write the message." : undefined, onValueChange: body => set({ body }), onKeyDown: event => {
+                        if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+                            event.preventDefault();
+                            void send();
+                        }
+                    } }) }), error && _jsx(ChatFailure, { message: error }), _jsxs("footer", { className: "nx-mail-compose__foot", children: [_jsx(Button, { variant: "ghost", hoverTone: "danger", icon: _jsx(InlineIcon, { icon: iconTrash }), "aria-label": "Discard draft", title: "Discard draft", onClick: onDiscard, disabled: sending }), _jsx("span", { className: "nx-mail-compose__saved", "aria-live": "polite", children: mailDraftHasText(draft) ? "Draft kept on this device" : "" }), _jsx(Button, { variant: "primary", icon: _jsx(InlineIcon, { icon: iconSend }), loading: sending, onClick: () => void send(), title: "Send (Ctrl+Enter)", children: "Send" })] })] }));
+}

package/dist/Components/Messages/MailReader.d.ts

@@ -0,0 +1,43 @@
+import { type ReactNode } from "react";
+import type { ChatId, ChatSummary } from "../../Interfaces/ChatInterfaces.ts";
+import type { MailDomain, MailInboxRow, MailThreadHead, MessageSource } from "../../Interfaces/MailInterfaces.ts";
+import type { MailDomainContext } from "./MailThread.tsx";
+/** What Discuss and Reply act on. */
+export interface MailReaderAction {
+    head: MailThreadHead;
+    /** The thread's chat lines held so far. */
+    discussion: number;
+}
+export interface MailReaderProps {
+    /** Where the mailbox's data comes from. */
+    source: MessageSource;
+    /** The conversation. */
+    threadId: ChatId;
+    /** Who is reading. */
+    userId: ChatId;
+    /** The list's row, drawn at once while the head is read. */
+    row?: MailInboxRow | null;
+    /** Discuss (n) on a mail, Open chat on a chat: the page opens the chat popup. Without it, no button. */
+    onDiscuss?: (action: MailReaderAction) => void;
+    /** Reply: the page opens a compose window for a mail in the thread. Without it, or when the reader may not write, no button. */
+    onReply?: (action: MailReaderAction) => void;
+    /** Buttons at the end of the subject's line: Archive, Move to inbox. */
+    actions?: ReactNode;
+    /** Draws the record a thread is about. Default its `DomainCard`, folded under 480px. */
+    renderDomain?: (domain: MailDomain, context: MailDomainContext) => ReactNode;
+    /** Grows when the page knows the thread changed (a reply sent from a compose window): the lines are read again. */
+    revision?: number;
+    /** The subject's heading level. Default 2. */
+    headingLevel?: 2 | 3 | 4;
+    /** Every time the head is read. */
+    onHead?: (head: MailThreadHead) => void;
+    /** Every time the counts change, a read thread included: the list's row clears its unread count. */
+    onSummary?: (summary: ChatSummary) => void;
+    /** Lines per page. Default 30. */
+    pageSize?: number;
+    /** Milliseconds between checks for new lines. 0 turns it off. Default 15,000. */
+    pollInterval?: number;
+    className?: string;
+}
+/** A conversation read as mail. */
+export declare function MailReader({ source, threadId, userId, row, onDiscuss, onReply, actions, renderDomain, revision, headingLevel, onHead, onSummary, pageSize, pollInterval, className, }: MailReaderProps): import("react").JSX.Element;

package/dist/Components/Messages/MailReader.js

@@ -0,0 +1,207 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { iconArrowBackUp, iconArrowRight, iconChevronDown, iconChevronRight, iconMessageCircle, InlineIcon } from "nexus-icons";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { chatDayLabel, chatLocalDate, chatPreviewText, chatTimeLabel, sameChatId } from "../../Helpers/ChatHelpers.js";
+import { useChat } from "../../Helpers/ChatHooks.js";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { useBrowserTimeZone, useDatePreferences } from "../../Helpers/DatePreferences.js";
+import { formatDateTime } from "../../Helpers/DateTimeHelpers.js";
+import { mailDiscussionCount, mailRowKind, mailTypeLabel } from "../../Helpers/MailClientHelpers.js";
+import { MAIL_ROLE_LABELS } from "../../Helpers/MessageHelpers.js";
+import { Button } from "../Documents/Button.js";
+import { ChatEventNote, ChatFailure } from "../Chats/ChatParts.js";
+import { DomainCard } from "../Domains/DomainCard.js";
+import { MarkdownView } from "../Viewers/MarkdownView.js";
+import { Avatar } from "../Viewers/Avatar.js";
+import { MailPeople } from "./MailThread.js";
+const REFUSED = "This message is not available to you.";
+const NARROW = 480;
+const errorStatus = (error) => {
+    const status = error?.status;
+    return typeof status === "number" ? status : undefined;
+};
+/** A head drawn from the list's row while the thread's own is read: the subject and the sender, nobody else yet. */
+function headFromRow(row) {
+    return {
+        id: row.id,
+        subject: row.subject,
+        from: { id: row.fromId, name: row.fromName, ...(row.fromAvatar && { avatar: row.fromAvatar }) },
+        to: [],
+        cc: [],
+        bcc: [],
+        myRole: row.myRole,
+        archived: row.archived,
+        canSend: true,
+        createdTime: row.lastMessageTime,
+        messageCount: row.messageCount,
+        unreadCount: row.unreadCount,
+        ...(row.threadKind && { threadKind: row.threadKind }),
+    };
+}
+/** A conversation read as mail. */
+export function MailReader({ source, threadId, userId, row, onDiscuss, onReply, actions, renderDomain, revision = 0, headingLevel = 2, onHead, onSummary, pageSize, pollInterval, className, }) {
+    const [head, setHead] = useState(null);
+    const [headState, setHeadState] = useState({ status: "loading" });
+    const [attempt, setAttempt] = useState(0);
+    const [cardRevision, setCardRevision] = useState(0);
+    const latest = useRef({ onHead, onSummary });
+    latest.current = { onHead, onSummary };
+    const chatSource = useMemo(() => source.threadSource(threadId), [source, threadId]);
+    const scope = useMemo(() => ({ domain: "mail-reader", parentId: threadId, userId }), [threadId, userId]);
+    const refused = headState.status === "refused";
+    const { store, state } = useChat({ scope, conversationId: threadId, source: chatSource, pageSize, pollInterval, enabled: !refused });
+    // The head, read whenever the thread changes, and again on Retry; the list's row stands in while it comes.
+    useEffect(() => {
+        const controller = new AbortController();
+        setHead(null);
+        setHeadState({ status: "loading" });
+        source.thread(threadId, controller.signal).then(next => {
+            setHead(next);
+            setHeadState({ status: "ready" });
+            latest.current.onHead?.(next);
+        }, error => {
+            if (controller.signal.aborted)
+                return;
+            const status = errorStatus(error);
+            if (status === 403 || status === 404)
+                setHeadState({ status: "refused" });
+            else
+                setHeadState({ status: "failed", message: error instanceof Error && error.message ? error.message : "The message could not be loaded." });
+        });
+        return () => controller.abort();
+    }, [source, threadId, attempt]);
+    // A reply sent from a compose window: the lines and the head are read again, the record's card too.
+    const seen = useRef(revision);
+    useEffect(() => {
+        if (seen.current === revision)
+            return;
+        seen.current = revision;
+        void store.refresh();
+        setCardRevision(count => count + 1);
+        source.thread(threadId).then(next => {
+            setHead(next);
+            latest.current.onHead?.(next);
+        }, () => undefined);
+    }, [revision, store, source, threadId]);
+    // Opening a conversation reads it: once its lines are in, the read mark goes to the newest.
+    useEffect(() => {
+        if (state.loaded && state.summary.unreadCount > 0)
+            void store.markRead();
+    }, [state.loaded, state.summary.unreadCount, store]);
+    useEffect(() => {
+        if (state.loaded)
+            latest.current.onSummary?.(state.summary);
+    }, [state.loaded, state.summary]);
+    // A notification arriving reads the record's card again: the module wrote it after changing the record.
+    const notes = state.messages.filter(message => message.kind === "notification").length;
+    const notesSeen = useRef(null);
+    useEffect(() => {
+        if (!state.loaded)
+            return;
+        if (notesSeen.current !== null && notes > notesSeen.current)
+            setCardRevision(count => count + 1);
+        notesSeen.current = notes;
+    }, [notes, state.loaded]);
+    // How wide the pane is: a record's card opens folded in a narrow one.
+    const frame = useRef(null);
+    const [narrow, setNarrow] = useState(null);
+    const [folded, setFolded] = useState(null);
+    useLayoutEffect(() => {
+        const element = frame.current;
+        if (!element)
+            return;
+        let known = false;
+        const read = () => {
+            const width = element.clientWidth;
+            if (width <= 0)
+                return;
+            if (known)
+                setNarrow(width < NARROW);
+            else
+                flushSync(() => setNarrow(width < NARROW));
+            known = true;
+        };
+        // The first width, read here, is set as any state; a later one from the observer is drawn before the browser paints.
+        if (element.clientWidth > 0) {
+            setNarrow(element.clientWidth < NARROW);
+            known = true;
+        }
+        const observer = new ResizeObserver(read);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [refused]);
+    const preferences = useDatePreferences();
+    const zone = useBrowserTimeZone();
+    const time = useMemo(() => ({ ...preferences, ...(zone && { timeZone: zone }) }), [preferences, zone]);
+    const shown = head ?? (row && sameChatId(row.id, threadId) ? headFromRow(row) : null);
+    const kind = shown?.threadKind ?? (row ? mailRowKind(row) : shown?.domain ? "domain" : "mail");
+    const discussion = mailDiscussionCount(state.messages);
+    const action = useCallback(() => (shown ? { head: shown, discussion } : null), [shown, discussion]);
+    const Heading = `h${headingLevel}`;
+    if (refused) {
+        return (_jsx("section", { className: cx("nx-mail-reader", className), children: _jsx("div", { className: "nx-mail__refused", role: "alert", children: _jsx("p", { children: REFUSED }) }) }));
+    }
+    const typeLabel = mailTypeLabel(kind, shown?.domain?.domainType ?? row?.domainType ?? null);
+    const mails = state.messages.filter(message => message.kind === "mail" || message.kind === "notification" || (kind !== "chat" && message === state.messages[0] && !message.kind));
+    const chats = state.messages.filter(message => (message.kind ?? "chat") === "chat");
+    const lastChat = chats[chats.length - 1];
+    const waiting = !state.loaded && state.loading;
+    const canReply = !!head && head.canSend && kind !== "chat";
+    const domain = shown?.domain &&
+        (renderDomain ? (renderDomain(shown.domain, { head: shown, revision: cardRevision })) : narrow === null ? null : (_jsx(DomainCard, { domain: shown.domain.domainType, id: shown.domain.id, label: shown.domain.label, revision: cardRevision, viewer: userId, headingLevel: (headingLevel + 1), collapsed: folded ?? narrow, onCollapsedChange: setFolded })));
+    return (_jsxs("section", { ref: frame, className: cx("nx-mail-reader", className), "data-kind": kind, "aria-busy": headState.status === "loading" || waiting || undefined, children: [_jsxs("header", { className: "nx-mail-reader__head", children: [_jsxs("div", { className: "nx-mail__title", children: [_jsx(Heading, { className: "nx-mail__subject", tabIndex: -1, "data-nx-focus": "", children: shown ? shown.subject || "(no subject)" : _jsx("span", { className: "nx-table__bone nx-record__bone nx-mail__bone", style: { width: "16rem" } }) }), _jsx("span", { className: "nx-table__tag nx-table__tag--plain nx-mailbox__chip", "data-kind": kind, children: typeLabel }), actions && _jsx("span", { className: "nx-mail__actions", children: actions })] }), shown && _jsx(MailHeadLine, { head: shown, kind: kind, userId: userId, time: time, known: !!head }), headState.status === "failed" && _jsx(ChatFailure, { message: headState.message, onRetry: () => setAttempt(count => count + 1) })] }), domain && _jsx("div", { className: "nx-mail-reader__domain", children: domain }), _jsxs("div", { className: "nx-mail-reader__body", children: [state.error && !state.loaded && _jsx(ChatFailure, { message: state.error, onRetry: () => void store.load() }), waiting && _jsx(MailBones, {}), kind === "chat" ? (state.loaded && _jsx(MailChatHead, { last: lastChat, count: chats.length, time: time })) : (_jsxs(_Fragment, { children: [state.hasMore && state.loaded && (_jsx("button", { type: "button", className: "nx-mail-reader__older", disabled: state.loadingOlder, onClick: () => void store.loadOlder(), children: state.loadingOlder ? "Loading earlier messages…" : "Show earlier messages" })), state.loaded && mails.length === 0 && _jsx("p", { className: "nx-mail-reader__empty", children: "This conversation has no mail yet: its messages are in the discussion." }), _jsx(MailItems, { mails: mails, userId: userId, time: time })] }))] }), (onDiscuss || (onReply && canReply)) && shown && (_jsxs("footer", { className: "nx-mail-reader__foot", children: [onDiscuss && (_jsx(Button, { variant: kind === "chat" ? "primary" : "secondary", icon: _jsx(InlineIcon, { icon: iconMessageCircle }), onClick: () => {
+                            const next = action();
+                            if (next)
+                                onDiscuss(next);
+                        }, children: kind === "chat" ? "Open chat" : `Discuss${state.loaded ? ` (${discussion}${state.hasMore ? "+" : ""})` : ""}` })), onReply && canReply && (_jsx(Button, { icon: _jsx(InlineIcon, { icon: iconArrowBackUp }), onClick: () => {
+                            const next = action();
+                            if (next)
+                                onReply(next);
+                        }, children: "Reply" }))] }))] }));
+}
+/** When, on one line: the day and the time in the reader's settings, the full moment on hover. */
+function MailWhen({ value, time }) {
+    if (!value)
+        return null;
+    const day = chatLocalDate(value, time.timeZone);
+    return (_jsx("time", { className: "nx-mail__time", dateTime: value, title: formatDateTime(value, time), children: day ? `${chatDayLabel(day, time)}, ${chatTimeLabel(value, time)}` : chatTimeLabel(value, time) }));
+}
+/** From → To · Cc · Bcc, and when it started: a letter's head, on as few lines as the names need. */
+function MailHeadLine({ head, kind, userId, time, known }) {
+    const others = kind === "chat" ? [...head.to, ...head.cc] : [];
+    return (_jsxs("div", { className: "nx-mail-reader__people", children: [_jsx(Avatar, { name: head.from.name, src: head.from.avatar }), _jsxs("p", { className: "nx-mail-reader__line", children: [_jsx("span", { className: "nx-mail-reader__from", children: head.from.name }), kind === "chat" ? (known && others.length > 0 && (_jsxs(_Fragment, { children: [_jsx(InlineIcon, { icon: iconArrowRight, className: "nx-mail-reader__arrow" }), _jsx(MailPeople, { people: others, userId: userId })] }))) : (_jsxs(_Fragment, { children: [known && (_jsxs(_Fragment, { children: [_jsx(InlineIcon, { icon: iconArrowRight, className: "nx-mail-reader__arrow" }), _jsx(MailPeople, { people: head.to, userId: userId })] })), head.cc.length > 0 && (_jsxs("span", { className: "nx-mail-reader__role", children: [_jsx("span", { className: "nx-mail-reader__dot", "aria-hidden": "true", children: "\u00B7" }), MAIL_ROLE_LABELS.cc, " ", _jsx(MailPeople, { people: head.cc, userId: userId })] })), head.bcc.length > 0 && (_jsxs("span", { className: "nx-mail-reader__role", children: [_jsx("span", { className: "nx-mail-reader__dot", "aria-hidden": "true", children: "\u00B7" }), MAIL_ROLE_LABELS.bcc, " ", _jsx(MailPeople, { people: head.bcc, userId: userId })] }))] })), _jsxs("span", { className: "nx-mail-reader__since", children: [kind === "chat" ? "Started " : "", _jsx(MailWhen, { value: head.createdTime, time: time })] })] })] }));
+}
+/** The mails of a thread: the newest open, the earlier ones folded to a line each that opens in place. */
+function MailItems({ mails, userId, time }) {
+    const [opened, setOpened] = useState(() => new Set());
+    const newest = mails[mails.length - 1];
+    return (_jsx("ol", { className: "nx-mail-reader__mails", children: mails.map(message => {
+            const key = String(message.clientId ?? message.id);
+            if (message.kind === "notification") {
+                return (_jsx("li", { className: "nx-mail-reader__note", children: _jsx(ChatEventNote, { message: message, time: time }) }, key));
+            }
+            const open = message === newest || opened.has(key);
+            const toggle = () => setOpened(was => {
+                const next = new Set(was);
+                if (next.has(key))
+                    next.delete(key);
+                else
+                    next.add(key);
+                return next;
+            });
+            const name = message.authorName || "Unknown";
+            return (_jsxs("li", { className: "nx-mail-reader__mail", children: [message === newest ? (_jsxs("div", { className: "nx-mail-reader__mail-head", children: [_jsxs("span", { className: "nx-mail-reader__author", children: [name, sameChatId(message.authorId, userId) && _jsx("span", { className: "nx-mail__you", children: "you" })] }), _jsx(MailWhen, { value: message.createdAt, time: time })] })) : (_jsxs("button", { type: "button", className: "nx-mail-reader__mail-head", "aria-expanded": open, onClick: toggle, children: [_jsx(InlineIcon, { icon: open ? iconChevronDown : iconChevronRight, className: "nx-mail-reader__fold" }), _jsx("span", { className: "nx-mail-reader__author", children: name }), !open && _jsx("span", { className: "nx-mail-reader__preview", children: chatPreviewText(message.body, 140) }), _jsx(MailWhen, { value: message.createdAt, time: time })] })), open && _jsx(MarkdownView, { className: "nx-mail-reader__text", value: message.body })] }, key));
+        }) }));
+}
+/** A chat read in the pane: how many lines it holds, and its last one, while the chat itself is in its popup. */
+function MailChatHead({ last, count, time }) {
+    if (!last)
+        return _jsx("p", { className: "nx-mail-reader__empty", children: "No messages yet. Open the chat to write the first." });
+    return (_jsxs("div", { children: [_jsxs("p", { className: "nx-mail-reader__count", children: [count === 1 ? "1 message" : `${count} messages`, " \u00B7 the last:"] }), _jsxs("div", { className: "nx-mail-reader__mail-head", children: [_jsx("span", { className: "nx-mail-reader__author", children: last.authorName || "Unknown" }), _jsx(MailWhen, { value: last.createdAt, time: time })] }), _jsx(MarkdownView, { className: "nx-mail-reader__text", value: last.body })] }));
+}
+/** The bones of a mail while its lines load: an author's line and three of text. */
+function MailBones() {
+    return (_jsxs("div", { className: "nx-mail-reader__bones", "aria-hidden": "true", children: [_jsx("span", { className: "nx-table__bone nx-mail__bone", style: { width: "9rem" } }), _jsx("span", { className: "nx-table__bone", style: { width: "92%" } }), _jsx("span", { className: "nx-table__bone", style: { width: "84%" } }), _jsx("span", { className: "nx-table__bone", style: { width: "60%" } })] }));
+}

package/dist/Components/Messages/MailThread.d.ts

@@ -0,0 +1,71 @@
+import { type ReactNode } from "react";
+import type { ChatId, ChatMessage, ChatSummary } from "../../Interfaces/ChatInterfaces.ts";
+import type { MailDomain, MailPerson, MailThreadHead, MessageSource } from "../../Interfaces/MailInterfaces.ts";
+/** What a thread's record slot is drawn with. */
+export interface MailDomainContext {
+    head: MailThreadHead;
+    /** Grows each time a notification arrives: a card drawn from the record reads it again when this changes. */
+    revision: number;
+}
+/** What arrived in a thread from someone else. */
+export interface MailThreadChange {
+    /** `notification` when any of the lines is one: the record it is about may have changed. */
+    reason: "notification" | "reply";
+    messages: readonly ChatMessage[];
+}
+export interface MailThreadProps {
+    /** Where the mailbox's data comes from: `apiMessageSource()` or `localMessageSource(...)`. */
+    source: MessageSource;
+    /** The thread. */
+    threadId: ChatId;
+    /** Who is reading: their lines sit on the right. */
+    userId: ChatId;
+    /** The head the page already holds, drawn at once when the thread opens and then read again. */
+    head?: MailThreadHead;
+    /**
+     * Draws the record the thread is about, under the people. Default: its card (`DomainCard`), read again when a
+     * notification arrives, when the kind has one in `defineChatDomains` - folded to its title and figures while the thread
+     * is narrower than 480px, as its width changes, until the reader folds or unfolds it; else the kind's name and the
+     * record's words. The head scrolls with the lines.
+     */
+    renderDomain?: (domain: MailDomain, context: MailDomainContext) => ReactNode;
+    /** Buttons at the end of the subject's line: Archive, Move to inbox. */
+    actions?: ReactNode;
+    /** The subject's heading level. Default 2. */
+    headingLevel?: 2 | 3 | 4;
+    /** Names shown on a line of people before the rest fold into "+2". Default 3. */
+    peopleShown?: number;
+    /** After lines from someone else arrive: a notification above all, whose record may have changed. */
+    onChanged?: (change: MailThreadChange) => void;
+    /** Every time the head is read: a list's row follows it. */
+    onHead?: (head: MailThreadHead) => void;
+    /** Every time the counts change, a read thread included: a list's row clears its unread count. */
+    onSummary?: (summary: ChatSummary) => void;
+    /** Lines per page. Default 30. */
+    pageSize?: number;
+    /** Milliseconds between checks for new lines. 0 turns it off. Default 15,000. */
+    pollInterval?: number;
+    /** How tall: pixels or a length. Default `min(70vh, 640px)`; `"100%"` fills what holds it. */
+    height?: number | string;
+    className?: string;
+}
+/** A mail thread: the head with its people and record, the lines, and the reply box. */
+export declare function MailThread({ source, threadId, userId, head: givenHead, renderDomain, actions, headingLevel, peopleShown, onChanged, onHead, onSummary, pageSize, pollInterval, height, className, }: MailThreadProps): import("react").JSX.Element;
+export interface MailPeopleProps {
+    people: readonly MailPerson[];
+    /** The reader: their own name says "you". */
+    userId?: ChatId;
+    /** Names shown before the rest fold into "+2". Default 3. */
+    shown?: number;
+    /** What an empty list says. Default "Nobody". */
+    empty?: string;
+}
+/**
+ * A list of people on one line, folded to its first names and a "+2" button that opens the rest in place: a thread sent
+ * to fifty people keeps a head of a few lines. Someone who has left keeps their name, muted.
+ */
+export declare function MailPeople({ people, userId, shown, empty }: MailPeopleProps): import("react").JSX.Element;
+/** The record a thread is about, as its words alone: the kind's name as the app gave it, and the record's own words. */
+export declare function MailDomainLine({ domain }: {
+    domain: MailDomain;
+}): import("react").JSX.Element;