@acornly/ui 0.1.0 → 0.3.0

package/dist/chat-panel.js

@@ -0,0 +1,760 @@
+import { CHAT_LIMITS, focusLabel, lineage, } from "./chat-protocol.js";
+import { ChatCallError, buildRequest, conversationView, draftTakeaway, estimateTokens, proxyTransport, relayTransport, runTurn, } from "./chat-model.js";
+import { collectMarks, outlineItems, textTree } from "./chat-picker.js";
+import { h, styleElement } from "./dom.js";
+import { activeElement } from "./focus.js";
+import { PARTS } from "./parts.js";
+const CHAT_CSS = `
+.ctx-chat[hidden] { display: none; }
+.ctx-chat { position: fixed; z-index: 1; top: 0; bottom: 0; right: 0; box-sizing: border-box; width: min(380px, 100vw); display: flex; flex-direction: column; background: var(--_background); color: var(--_foreground); border-left: 1px solid var(--_border); box-shadow: var(--_shadow); font: inherit; text-align: start; }
+@media (max-width: 520px) { .ctx-chat { top: auto; left: 0; width: 100vw; height: 62vh; height: 62dvh; padding-bottom: env(safe-area-inset-bottom); border-left: 0; border-top: 1px solid var(--_border); border-radius: var(--_radius) var(--_radius) 0 0; } }
+.ctx-chat-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--_border); }
+.ctx-chat h2 { margin: 0; font-size: 1.07em; font-weight: 500; }
+.ctx-chat button { font: inherit; }
+.ctx-chat-x { all: unset; padding: 2px 6px; color: var(--_muted); font-size: 18px; line-height: 1; cursor: pointer; }
+.ctx-chat-x:focus-visible, .ctx-chat-link:focus-visible, .ctx-chat-pill:focus-visible { outline: 2px solid var(--_accent); }
+.ctx-chat-chip { margin: 10px 14px 0; padding: 8px 10px; border: 1px solid var(--_border); border-radius: calc(var(--_radius) - 4px); font-size: 0.9em; }
+.ctx-chat-chip strong { font-weight: 600; }
+.ctx-chat-link { all: unset; margin-inline-start: 8px; color: var(--_accent); font-weight: 600; cursor: pointer; }
+.ctx-chat-chip details { margin-top: 4px; color: var(--_muted); font-size: 0.9em; }
+.ctx-chat-chip ul { margin: 4px 0 0; padding-inline-start: 18px; }
+.ctx-chat-offer { margin: 6px 14px 0; font-size: 0.86em; color: var(--_muted); }
+.ctx-chat-tree { list-style: none; margin: 6px 0 0; padding: 0; max-height: 40vh; overflow: auto; border-top: 1px solid var(--_border); }
+.ctx-chat-tree [role="treeitem"] { padding: 4px 8px; cursor: pointer; }
+.ctx-chat-tree [role="treeitem"]:focus-visible { outline: 2px solid var(--_accent); outline-offset: -2px; }
+.ctx-chat-tree [aria-selected="true"] { font-weight: 600; }
+.ctx-chat-log { flex: 1; overflow: auto; padding: 10px 14px; }
+.ctx-chat-q { margin: 10px 0 4px auto; max-width: 85%; width: fit-content; padding: 6px 10px; border-radius: calc(var(--_radius) - 4px); background: color-mix(in srgb, var(--_accent) 12%, transparent); white-space: pre-wrap; }
+.ctx-chat-a { margin: 4px 0 10px; line-height: 1.45; }
+.ctx-chat-a p { margin: 0 0 6px; }
+.ctx-chat-typing { display: inline-flex; gap: 4px; padding: 6px 2px; }
+.ctx-chat-typing span:not(.ctx-chat-sr) { width: 6px; height: 6px; border-radius: 50%; background: var(--_muted); animation: ctx-chat-dot 1.2s ease-in-out infinite; }
+.ctx-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
+.ctx-chat-typing span:nth-child(3) { animation-delay: 0.3s; }
+@keyframes ctx-chat-dot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
+@media (prefers-reduced-motion: reduce) { .ctx-chat-typing span:not(.ctx-chat-sr) { animation: none; opacity: 0.6; } }
+.ctx-chat-meta { color: var(--_muted); font-size: 0.79em; }
+.ctx-chat-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
+.ctx-chat-pill { all: unset; padding: 3px 12px; border: 1px solid var(--_border); border-radius: 999px; font-size: 0.86em; cursor: pointer; }
+.ctx-chat-pill:hover { border-color: var(--_accent); }
+.ctx-chat-pill[data-primary] { background: var(--_accent); border-color: var(--_accent); color: var(--_accent-contrast); }
+.ctx-chat-keep textarea, .ctx-chat-form textarea { box-sizing: border-box; width: 100%; min-height: 3em; padding: 6px 8px; border: 1px solid var(--_border); border-radius: calc(var(--_radius) - 6px); background: transparent; color: inherit; font: inherit; resize: vertical; }
+.ctx-chat-form { padding: 10px 14px; border-top: 1px solid var(--_border); }
+.ctx-chat-note { margin: 4px 0 0; color: var(--_muted); font-size: 0.79em; }
+.ctx-chat-error { margin: 6px 0 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--_accent) 30%, var(--_border)); border-radius: calc(var(--_radius) - 4px); background: color-mix(in srgb, var(--_accent) 8%, transparent); color: var(--_foreground); line-height: 1.45; }
+.ctx-chat-error a { display: block; width: fit-content; margin-top: 8px; padding: 3px 12px; border-radius: 999px; background: var(--_accent); color: var(--_accent-contrast); font-size: 0.86em; font-weight: 600; text-decoration: none; }
+.ctx-chat-error a:focus-visible { outline: 2px solid var(--_accent); outline-offset: 2px; }
+.ctx-chat-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.ctx-chat-modes { display: flex; gap: 6px; margin-bottom: 6px; }
+.ctx-chat-modes .ctx-chat-pill[aria-pressed="true"] { border-color: var(--_accent); color: var(--_accent); font-weight: 600; }
+.ctx-chat-mic[data-listening] { border-color: var(--_accent); color: var(--_accent); }
+.ctx-chat-mic[data-listening]::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-inline-end: 6px; border-radius: 50%; background: currentColor; vertical-align: 0.1em; }
+`;
+/** The acorn target for an item: its anchor, found by id first, then by quote and source. */
+export function keptTarget(item) {
+    if (!item.anchor)
+        return null;
+    return {
+        source: item.anchor.source,
+        selector: [
+            { type: "ProviderSelector", provider: "acornly-context", version: 1, value: { id: item.id } },
+            ...(item.anchor.quote
+                ? [{ type: "TextQuoteSelector", exact: item.anchor.quote }]
+                : []),
+        ],
+    };
+}
+/** The model proxy's reasons a failed ask names, with the hub page that fixes each one it can. */
+const REASONS = new Map([
+    ["no_grant", { label: "noGrant", page: "openAppsYouUse" }],
+    ["no_key", { label: "noKey", page: "openYourAi" }],
+    ["budget_exhausted", { label: "budgetExhausted", page: "openAppsYouUse" }],
+    ["inactive", { label: "inactive" }],
+    ["rate_limited", { label: "rateLimited" }],
+]);
+const HUB_PAGES = { openAppsYouUse: "/apps-you-use", openYourAi: "/ai" };
+/** The proxy's reason for a failed call, when the panel names it. */
+function reasonOf(error) {
+    return error instanceof ChatCallError && error.code ? REASONS.get(error.code) : undefined;
+}
+/** A page on the app's hub; an unset or non-http(s) `hubUrl` falls back to the hosted hub. */
+export function hubLink(hubUrl, path) {
+    try {
+        const url = new URL(path, hubUrl ?? "https://acornly.ai");
+        if (url.protocol === "https:" || url.protocol === "http:")
+            return url.href;
+    }
+    catch {
+        // An unparseable hubUrl is the app's mistake; the hosted hub still helps the person.
+    }
+    return new URL(path, "https://acornly.ai").href;
+}
+export function openChatPanel(layer, options, labels, initial, initialMode) {
+    const doc = layer.ownerDocument;
+    const returnFocus = activeElement(doc);
+    let snapshot = initial.snapshot;
+    let dropped = initial.dropped;
+    let focus = [...snapshot.focus];
+    const loaded = new Map();
+    // The conversation's copy of its focus and the focus's ancestors, as last seen (design doc, 11).
+    const kept = new Map();
+    const turns = [];
+    let unusable = false;
+    let capped = false;
+    let busy = null;
+    let picking = null;
+    let closed = false;
+    const direct = options.proxy ? proxyTransport(options.proxy) : null;
+    const relay = options.relay ? relayTransport(options.relay) : null;
+    // Comment beside Ask when the app saves comments; Comment alone when it has no model to call.
+    const canAsk = direct !== null || relay !== null;
+    const canComment = options.onComment !== undefined;
+    let mode = canComment && (initialMode === "comment" || !canAsk) ? "comment" : "ask";
+    const transport = () => snapshot.rules?.guard === "relay" ? relay : (direct ?? relay);
+    /** The guard the rules ask for; `false` when they ask for a callback the app did not give. */
+    const guard = () => snapshot.rules?.guard === "callback" ? (options.guard ?? false) : undefined;
+    /** What the conversation sees: the latest snapshot, plus its focus once the app moves on. */
+    const view = () => conversationView(snapshot, kept).view;
+    const title = h(doc, "h2", { id: "ctx-chat-title" }, labels.title);
+    const x = h(doc, "button", { class: "ctx-chat-x", type: "button", "aria-label": labels.close }, "×");
+    const chipLabel = h(doc, "strong", {});
+    const change = h(doc, "button", { class: "ctx-chat-link", type: "button" }, labels.change);
+    const details = h(doc, "details", {});
+    const treeBox = h(doc, "div", {});
+    const chip = h(doc, "div", { class: "ctx-chat-chip" }, `${labels.about} `, chipLabel, change, details, treeBox);
+    const offerBox = h(doc, "div", { class: "ctx-chat-offer", "aria-live": "polite" });
+    const log = h(doc, "div", { class: "ctx-chat-log", role: "log", "aria-live": "polite" });
+    const input = h(doc, "textarea", {
+        "aria-label": labels.placeholder,
+        placeholder: labels.placeholder,
+        rows: "2",
+    });
+    const send = h(doc, "button", { class: "ctx-chat-pill", type: "submit", "data-primary": "" }, labels.send);
+    const recognizer = options.speech === false ? null : speechRecognizer(doc);
+    const mic = recognizer
+        ? h(doc, "button", { class: "ctx-chat-pill ctx-chat-mic", type: "button" }, labels.speak)
+        : null;
+    const status = h(doc, "p", { class: "ctx-chat-note", "aria-live": "polite" });
+    const modeNote = h(doc, "p", { class: "ctx-chat-note" });
+    const modeButtons = new Map();
+    const modes = h(doc, "div", {
+        class: "ctx-chat-modes",
+        role: "group",
+        "aria-label": labels.modes,
+    });
+    if (canAsk && canComment) {
+        for (const [m, label] of [
+            ["ask", labels.modeAsk],
+            ["comment", labels.modeComment],
+        ]) {
+            const button = h(doc, "button", { class: "ctx-chat-pill", type: "button" }, label);
+            button.addEventListener("click", () => {
+                setMode(m);
+                input.focus();
+            });
+            modeButtons.set(m, button);
+            modes.append(button);
+        }
+    }
+    // Speaking's own line, so it never takes the place of the chat's status.
+    const heard = h(doc, "p", { class: "ctx-chat-note", "aria-live": "polite" });
+    const form = h(doc, "form", { class: "ctx-chat-form" }, ...(modeButtons.size > 0 ? [modes] : []), input, h(doc, "div", { class: "ctx-chat-row" }, send, mic), status, heard, modeNote);
+    const element = h(doc, "aside", { class: "ctx-chat", part: PARTS.chat, "aria-labelledby": "ctx-chat-title" }, styleElement(doc, CHAT_CSS), h(doc, "div", { class: "ctx-chat-header" }, title, x), chip, offerBox, log, form);
+    layer.append(element);
+    /** Switches the form between asking the chat and commenting on the item. */
+    function setMode(next) {
+        mode = next;
+        const comment = mode === "comment";
+        for (const [m, button] of modeButtons)
+            button.setAttribute("aria-pressed", String(m === mode));
+        const placeholder = comment ? labels.commentPlaceholder : labels.placeholder;
+        input.placeholder = placeholder;
+        input.setAttribute("aria-label", placeholder);
+        send.textContent = comment ? labels.commentSave : labels.send;
+        modeNote.textContent = comment ? labels.commentNote : labels.notStored;
+        title.textContent = comment && !canAsk ? labels.modeComment : labels.title;
+    }
+    function itemById(id) {
+        return view().items.find((item) => item.id === id) ?? loaded.get(id);
+    }
+    /** Copies the focus and its ancestors as they are now, so later turns stay about them. */
+    function keepFocus() {
+        const now = view();
+        const next = new Map();
+        for (const id of focus) {
+            const line = lineage(now, id);
+            const own = loaded.get(id);
+            if (line.length === 0 && own)
+                next.set(id, own);
+            for (const item of line)
+                next.set(item.id, item);
+        }
+        kept.clear();
+        for (const [id, item] of next)
+            kept.set(id, item);
+    }
+    function renderChip() {
+        chipLabel.textContent = focusLabel(view(), focus) || (loaded.get(focus[0] ?? "")?.label ?? "");
+        const never = snapshot.rules?.never ?? [];
+        details.replaceChildren();
+        if (never.length > 0 || dropped.length > 0) {
+            details.append(h(doc, "summary", {}, labels.rules));
+            if (never.length > 0)
+                details.append(h(doc, "ul", {}, ...never.map((line) => h(doc, "li", {}, line))));
+            if (dropped.length > 0) {
+                details.append(h(doc, "p", {}, labels.dropped), h(doc, "ul", {}, ...dropped.map((d) => h(doc, "li", {}, d))));
+            }
+        }
+        details.hidden = details.childElementCount === 0;
+    }
+    function renderOffer() {
+        offerBox.replaceChildren();
+        const now = snapshot.focus;
+        if (turns.length === 0 || now.join("\n") === focus.join("\n"))
+            return;
+        const switchTo = h(doc, "button", { class: "ctx-chat-link", type: "button" }, labels.askInstead);
+        switchTo.addEventListener("click", () => setFocus([...now]));
+        offerBox.append(labels.nowOn(focusLabel(snapshot, now)), switchTo);
+    }
+    function setFocus(next) {
+        focus = next;
+        kept.clear();
+        treeBox.replaceChildren();
+        renderChip();
+        renderOffer();
+        status.textContent = labels.nowAsking(chipLabel.textContent ?? "");
+    }
+    function openTree() {
+        const onScreen = new Set(collectMarks(doc, snapshot, options.rect).keys());
+        const tree = textTree({
+            doc,
+            snapshot,
+            focus,
+            onScreen,
+            labels: { tree: labels.tree, inFocus: labels.inFocus, onScreen: labels.onScreen },
+            onPick: (id) => {
+                setFocus([id]);
+                change.focus();
+            },
+        });
+        treeBox.replaceChildren(tree);
+        tree.querySelector('[tabindex="0"]')?.focus();
+    }
+    // From the keyboard "Change" opens the text tree; with a pointer, the outlines over the page.
+    let pointer = false;
+    change.addEventListener("pointerdown", () => (pointer = true));
+    change.addEventListener("click", () => {
+        const viaPointer = pointer;
+        pointer = false;
+        if (treeBox.firstChild) {
+            treeBox.replaceChildren();
+            return;
+        }
+        // The panel steps aside first, so what it covers can be picked.
+        element.hidden = true;
+        const marks = viaPointer ? collectMarks(doc, snapshot, options.rect) : new Map();
+        if (marks.size === 0) {
+            element.hidden = false;
+            return openTree();
+        }
+        picking = outlineItems({
+            layer,
+            snapshot,
+            marks,
+            focus,
+            labels: { hint: labels.pickHint, list: labels.pickList, cancel: labels.cancel },
+            onPick: (id) => {
+                element.hidden = false;
+                picking = null;
+                setFocus([id]);
+                change.focus();
+            },
+            onList: () => {
+                element.hidden = false;
+                picking = null;
+                openTree();
+            },
+            onCancel: () => {
+                element.hidden = false;
+                picking = null;
+                change.focus();
+            },
+        });
+    });
+    async function renderReply(el, text) {
+        const { markdownFragment } = await import("./markdown/render.js");
+        const { source, math } = options.renderMath ? protectMath(text) : { source: text, math: [] };
+        const fragment = markdownFragment(source, doc);
+        if (options.renderMath && math.length > 0)
+            restoreMath(fragment, math, options.renderMath);
+        el.replaceChildren(fragment);
+    }
+    function offerButtons(offers, into) {
+        for (const offer of offers) {
+            const hb = snapshot.handBacks?.find((b) => b.id === offer.handBack);
+            if (!hb)
+                continue;
+            const item = itemById(offer.item);
+            const button = h(doc, "button", { class: "ctx-chat-pill", type: "button" }, item && offer.item !== focus[0] ? `${hb.label}: ${item.label}` : hb.label);
+            button.addEventListener("click", () => options.onHandBack?.(offer.handBack, offer.item));
+            into.append(button);
+        }
+    }
+    function keptItem() {
+        const now = view();
+        for (const id of focus) {
+            const found = lineage(now, id).find((item) => item.anchor) ??
+                (loaded.get(id)?.anchor ? loaded.get(id) : undefined);
+            if (found)
+                return found;
+        }
+        return undefined;
+    }
+    function keepButton(turn, row) {
+        const item = keptItem();
+        if (!item || !options.onKeep)
+            return;
+        const keep = h(doc, "button", { class: "ctx-chat-pill", type: "button" }, labels.keep);
+        keep.addEventListener("click", async () => {
+            const t = transport();
+            if (!t)
+                return;
+            keep.disabled = true;
+            const box = h(doc, "div", { class: "ctx-chat-keep" });
+            turn.el.append(box);
+            const check = guard();
+            if (capped || check === false) {
+                // No draft without the app's guard, or past chat's share: the person writes their own.
+                box.append(h(doc, "p", { class: "ctx-chat-meta" }, capped ? labels.capReached : labels.noGuard));
+            }
+            else {
+                box.append(h(doc, "p", { class: "ctx-chat-meta" }, labels.drafting));
+            }
+            let draft = "";
+            if (!capped && check !== false) {
+                try {
+                    const abort = new AbortController();
+                    draft = await draftTakeaway(turn, snapshot, options.model, t, abort.signal, check);
+                }
+                catch (error) {
+                    if (error instanceof ChatCallError && error.code === "feature_cap")
+                        capped = true;
+                    // A reason the person can act on (a spent budget, say) is said here too.
+                    if (!capped && reasonOf(error))
+                        box.append(failure(error));
+                    draft = "";
+                }
+            }
+            const area = h(doc, "textarea", { "aria-label": labels.takeaway });
+            area.value = draft;
+            const save = h(doc, "button", { class: "ctx-chat-pill", type: "button", "data-primary": "" }, labels.save);
+            const cancel = h(doc, "button", { class: "ctx-chat-pill", type: "button" }, labels.cancel);
+            const note = capped || check === false ? [box.firstChild] : [];
+            box.replaceChildren(...note, area, h(doc, "div", { class: "ctx-chat-row" }, save, cancel));
+            area.focus();
+            cancel.addEventListener("click", () => {
+                box.remove();
+                keep.disabled = false;
+            });
+            save.addEventListener("click", async () => {
+                const text = area.value.trim();
+                const target = keptTarget(item);
+                if (!text || !target)
+                    return;
+                save.disabled = true;
+                const takeaway = noteOn(item, text, target);
+                try {
+                    await options.onKeep(takeaway);
+                    box.replaceChildren(h(doc, "p", { class: "ctx-chat-meta" }, labels.kept));
+                }
+                catch {
+                    save.disabled = false;
+                    box.append(h(doc, "p", { class: "ctx-chat-meta ctx-chat-error" }, labels.keepFailed));
+                }
+            });
+        });
+        row.append(keep);
+    }
+    /** A takeaway or comment on `item`, as the app saves it. */
+    function noteOn(item, text, target) {
+        const note = { text, item: item.id, target, about: item.about ?? [] };
+        if (item.anchor?.quote)
+            note.quote = item.anchor.quote;
+        return note;
+    }
+    /** Saves a comment on the item in focus (or its nearest ancestor that can be anchored to). */
+    async function comment(text) {
+        const item = keptItem();
+        const target = item && keptTarget(item);
+        if (!item || !target) {
+            status.textContent = labels.noAnchor;
+            return false;
+        }
+        busy = new AbortController();
+        send.disabled = true;
+        status.textContent = "";
+        try {
+            await options.onComment(noteOn(item, text, target));
+            log.append(h(doc, "div", { class: "ctx-chat-q" }, text), h(doc, "p", { class: "ctx-chat-meta" }, labels.commented(item.label)));
+            return true;
+        }
+        catch {
+            status.textContent = labels.commentFailed;
+            return false;
+        }
+        finally {
+            busy = null;
+            send.disabled = false;
+            log.scrollTop = log.scrollHeight;
+        }
+    }
+    async function ask(question) {
+        const t = transport();
+        if (!t) {
+            status.textContent = labels.noTransport;
+            return;
+        }
+        if (unusable) {
+            status.textContent = labels.badContext;
+            return;
+        }
+        if (capped) {
+            status.textContent = labels.capReached;
+            return;
+        }
+        const check = guard();
+        if (check === false) {
+            // The rules ask for the app's guard and there is none: nothing is sent (fails closed).
+            status.textContent = labels.noGuard;
+            return;
+        }
+        if (turns.length >= CHAT_LIMITS.turns)
+            return full();
+        keepFocus();
+        const turnInput = {
+            snapshot,
+            focus,
+            loaded,
+            kept,
+            history: turns,
+            question,
+            model: options.model,
+        };
+        const { body } = await buildRequest(turnInput);
+        if (estimateTokens(body) > CHAT_LIMITS.conversationTokens)
+            return full();
+        const el = h(doc, "div", { class: "ctx-chat-a" });
+        const turn = { question, reply: "", el };
+        log.append(h(doc, "div", { class: "ctx-chat-q" }, question), el);
+        // The reply as it streams, its Markdown drawn once a frame, after dots while nothing has come.
+        const live = h(doc, "div", { class: "ctx-chat-live" });
+        const typing = h(doc, "div", { class: "ctx-chat-typing", role: "status" }, h(doc, "span", {}), h(doc, "span", {}), h(doc, "span", {}), h(doc, "span", { class: "ctx-chat-sr" }, labels.thinking));
+        el.append(live, typing);
+        let streamed = "";
+        let frame = 0;
+        const drawLive = () => {
+            frame = 0;
+            void renderReply(live, streamed);
+            log.scrollTop = log.scrollHeight;
+        };
+        busy = new AbortController();
+        send.disabled = true;
+        // Screen readers hear the reply once it is whole, not each frame of it.
+        log.setAttribute("aria-busy", "true");
+        const reads = [];
+        try {
+            const result = await runTurn(turnInput, {
+                transport: t,
+                load: async (id) => {
+                    const item = (await options.load?.(id)) ?? null;
+                    if (item)
+                        loaded.set(item.id, item);
+                    return item;
+                },
+                guard: check,
+                onText: (text) => {
+                    streamed += text;
+                    typing.remove();
+                    frame ||= (doc.defaultView ?? window).requestAnimationFrame(drawLive);
+                },
+                onRead: (item) => {
+                    reads.push(item.label);
+                    el.append(typing);
+                },
+                signal: busy.signal,
+            });
+            if (frame)
+                (doc.defaultView ?? window).cancelAnimationFrame(frame);
+            turn.reply = result.refused ? labels.refused : result.reply;
+            turns.push(turn);
+            const body = h(doc, "div", {});
+            el.replaceChildren(body);
+            await renderReply(body, turn.reply);
+            if (reads.length > 0)
+                el.append(h(doc, "p", { class: "ctx-chat-meta" }, labels.read(reads)));
+            const row = h(doc, "div", { class: "ctx-chat-row" });
+            const offers = result.refused
+                ? (snapshot.rules?.insteadOffer ?? []).map((handBack) => ({
+                    handBack,
+                    item: focus[0] ?? "",
+                }))
+                : result.offers;
+            offerButtons(offers, row);
+            if (!result.refused)
+                keepButton(turn, row);
+            if (row.firstChild)
+                el.append(row);
+            if (result.dropped.length > 0)
+                dropped = [...new Set([...dropped, ...result.dropped])];
+            renderChip();
+            renderOffer();
+        }
+        catch (error) {
+            if (error instanceof ChatCallError && error.code === "feature_cap")
+                capped = true;
+            el.replaceChildren(failure(error));
+        }
+        finally {
+            busy = null;
+            send.disabled = false;
+            log.removeAttribute("aria-busy");
+            log.scrollTop = log.scrollHeight;
+        }
+    }
+    /** Why an ask failed, with a link to the hub page that fixes it when the proxy said why. */
+    function failure(error) {
+        if (capped)
+            return h(doc, "p", { class: "ctx-chat-error" }, labels.capReached);
+        const reason = reasonOf(error);
+        if (!reason)
+            return h(doc, "p", { class: "ctx-chat-error" }, labels.failed);
+        const link = reason.page &&
+            h(doc, "a", {
+                href: hubLink(options.hubUrl, HUB_PAGES[reason.page]),
+                target: "_blank",
+                rel: "noopener noreferrer",
+            }, labels[reason.page], h(doc, "span", { class: "ctx-chat-sr" }, ` ${labels.newTab}`));
+        return h(doc, "p", { class: "ctx-chat-error" }, labels[reason.label], link && " ", link);
+    }
+    function full() {
+        status.replaceChildren(labels.full, " ");
+        const fresh = h(doc, "button", { class: "ctx-chat-link", type: "button" }, labels.newChat);
+        fresh.addEventListener("click", () => {
+            turns.length = 0;
+            loaded.clear();
+            kept.clear();
+            log.replaceChildren();
+            status.replaceChildren();
+            setFocus([...snapshot.focus]);
+        });
+        status.append(fresh);
+    }
+    // Speaking (#734): the browser's recognizer writes into the box; nothing is sent until Send.
+    let dictation = null;
+    let starting = false;
+    let stopping = false;
+    function showListening(on, note = "") {
+        mic.toggleAttribute("data-listening", on);
+        mic.textContent = on ? labels.stopSpeaking : labels.speak;
+        heard.textContent = note;
+        try {
+            options.onListening?.(on);
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    async function startListening() {
+        if (dictation || starting || !recognizer)
+            return;
+        starting = true;
+        stopping = false;
+        let speech;
+        try {
+            speech = await import("./chat-speech.js");
+        }
+        catch {
+            starting = false;
+            // The messages are in the chunk that failed; Speak goes, and typing stays.
+            mic.hidden = true;
+            return;
+        }
+        // Sending, typing or closing while the chunk loaded cancels the start.
+        if (!starting || closed)
+            return;
+        starting = false;
+        const said = { ...speech.DEFAULT_SPEECH_LABELS, ...labels };
+        // What the person typed stays; the words they speak follow it.
+        const typed = input.value.trimEnd();
+        const lang = (options.speech && options.speech.lang) || doc.documentElement.lang || undefined;
+        const own = speech.dictate(recognizer, {
+            lang,
+            onText: (text) => {
+                if (dictation !== own)
+                    return;
+                input.value = typed && text ? `${typed} ${text}` : typed || text;
+            },
+            onEnd: (error) => {
+                if (dictation !== own)
+                    return;
+                dictation = null;
+                showListening(false, error ? speech.speechError(error, said) : "");
+                // Back to the box after Stop; not when the browser ends it, which would pop up a keyboard.
+                if (stopping && !closed)
+                    input.focus();
+                stopping = false;
+            },
+        });
+        dictation = own;
+        showListening(true, said.listening);
+    }
+    /** Stops listening now, keeping the box as it is (the person sends, types or closes). */
+    function dropListening() {
+        starting = stopping = false;
+        const own = dictation;
+        if (!own)
+            return;
+        dictation = null;
+        own.abort();
+        showListening(false);
+    }
+    mic?.addEventListener("click", () => {
+        if (!dictation)
+            return void startListening();
+        stopping = true;
+        dictation.stop();
+    });
+    // The person typing takes the box back.
+    input.addEventListener("input", () => dropListening());
+    form.addEventListener("submit", (event) => {
+        event.preventDefault();
+        const question = input.value.trim();
+        if (!question || busy)
+            return;
+        dropListening();
+        input.value = "";
+        if (mode === "comment") {
+            // A comment that was not saved stays in the box, to try again.
+            void comment(question).then((saved) => {
+                if (!saved && !input.value)
+                    input.value = question;
+            });
+        }
+        else {
+            void ask(question);
+        }
+    });
+    input.addEventListener("keydown", (event) => {
+        if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+            event.preventDefault();
+            form.requestSubmit();
+        }
+    });
+    x.addEventListener("click", () => panel.close());
+    element.addEventListener("keydown", (event) => {
+        if (event.key !== "Escape" || treeBox.firstChild)
+            return;
+        // Escape stops listening first, and closes the chat on the next press (or while Speak loads).
+        if (dictation)
+            dropListening();
+        else
+            panel.close();
+    });
+    renderChip();
+    setMode(mode);
+    input.focus();
+    const panel = {
+        element,
+        setContext(next, nextDropped) {
+            unusable = next === null;
+            if (unusable)
+                status.textContent = labels.badContext;
+            else if (status.textContent === labels.badContext)
+                status.textContent = "";
+            if (next === null)
+                return;
+            snapshot = next;
+            dropped = nextDropped;
+            // Rules follow the screen: content the app now withholds leaves what later turns resend.
+            for (const item of next.items) {
+                if (item.content?.some((part) => part.use === "label-only"))
+                    loaded.delete(item.id);
+            }
+            if (turns.length === 0 && !busy)
+                focus = [...next.focus];
+            renderChip();
+            renderOffer();
+        },
+        ask(next, nextMode) {
+            if (turns.length === 0)
+                setFocus([...(next ?? snapshot.focus)]);
+            else if (next)
+                renderOffer();
+            if (nextMode && (nextMode === "ask" ? canAsk : canComment))
+                setMode(nextMode);
+            element.hidden = false;
+            input.focus();
+        },
+        close() {
+            if (closed)
+                return;
+            closed = true;
+            dropListening();
+            busy?.abort();
+            picking?.close();
+            element.remove();
+            options.onClose?.();
+            if (returnFocus instanceof HTMLElement && returnFocus.isConnected)
+                returnFocus.focus();
+        },
+    };
+    return panel;
+}
+/** The browser's speech recognizer, or `null` where it has none (Firefox today). */
+function speechRecognizer(doc) {
+    const win = doc.defaultView;
+    return win?.SpeechRecognition ?? win?.webkitSpeechRecognition ?? null;
+}
+const MATH = /\$\$([^$]+)\$\$|\$([^$\n]+)\$|\\\((.+?)\\\)|\\\[(.+?)\\\]/gs;
+/** Marks a math span's place while Markdown is rendered: invisible separators around its index. */
+const SLOT = /\u2063M(\d+)\u2063/g;
+/** Takes `$…$`, `$$…$$`, `\(…\)` and `\[…\]` out of a reply before Markdown can alter them. */
+export function protectMath(text) {
+    const math = [];
+    const source = text.replace(MATH, (raw, block, inline, paren, bracket) => {
+        const tex = (block ?? inline ?? paren ?? bracket ?? "");
+        math.push({ tex, display: block !== undefined || bracket !== undefined, raw });
+        return `\u2063M${math.length - 1}\u2063`;
+    });
+    return { source, math };
+}
+/** Puts each math span back, drawn by the app's renderer (or as written, if it throws). */
+function restoreMath(root, math, render) {
+    const walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    const texts = [];
+    for (let node = walker.nextNode(); node; node = walker.nextNode())
+        texts.push(node);
+    for (const text of texts) {
+        const value = text.data;
+        if (!value.includes("\u2063"))
+            continue;
+        const parts = [];
+        let last = 0;
+        for (const match of value.matchAll(SLOT)) {
+            parts.push(value.slice(last, match.index));
+            const span = math[Number(match[1])];
+            if (span) {
+                try {
+                    parts.push(render(span.tex, span.display));
+                }
+                catch {
+                    parts.push(span.raw);
+                }
+            }
+            last = match.index + match[0].length;
+        }
+        parts.push(value.slice(last));
+        text.replaceWith(...parts);
+    }
+}
+//# sourceMappingURL=chat-panel.js.map