@shubh90/app-runtime 0.4.1 → 0.6.0

package/dist/chat/widget/hooks.js

@@ -0,0 +1,312 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ChatRequestError, fetchAgents, fetchThread, sendMessage, uploadFile } from "./api.js";
+import { mergeMessages, pollCursor, toMillis } from "../thread.js";
+import { advanceSeen } from "./thread.js";
+// A thread is read the way Plaza's own chat reads it: the opening screenful,
+// then only what changed. Open, that is often enough to feel live; closed, it
+// is only watching for a reply to badge.
+export const OPEN_POLL_MS = 3000;
+export const CLOSED_POLL_MS = 30000;
+/**
+ * The org's agents. "unavailable" when this person has no chat here — signed
+ * out, removed from the org, or chat turned off for the app — in which case the
+ * widget shows nothing at all.
+ */
+export function useAgents() {
+    const [state, setState] = useState({ status: "loading" });
+    useEffect(() => {
+        let cancelled = false;
+        let timer;
+        const load = (attempt) => {
+            fetchAgents().then((data) => {
+                if (cancelled)
+                    return;
+                const [first, ...rest] = data.agents;
+                setState(first === undefined
+                    ? { status: "unavailable" }
+                    : { status: "ready", data: { viewerId: data.viewerId, agents: [first, ...rest] } });
+            }, (error) => {
+                if (cancelled)
+                    return;
+                // No chat for this person here: that is an answer, not a failure.
+                if (error instanceof ChatRequestError && (error.status === 401 || error.status === 403)) {
+                    setState({ status: "unavailable" });
+                    return;
+                }
+                // Anything else is a moment's trouble; try again, backing off.
+                console.error("mii-chat: couldn't load agents", error);
+                timer = setTimeout(() => load(attempt + 1), agentsRetryDelay(attempt));
+            });
+        };
+        load(0);
+        return () => {
+            cancelled = true;
+            clearTimeout(timer);
+        };
+    }, []);
+    return state;
+}
+/** 5s, 10s, 20s, 40s, then every minute. */
+export function agentsRetryDelay(attempt) {
+    return Math.min(5000 * 2 ** attempt, 60000);
+}
+/** Signed out, or out of the org: polling again on a timer cannot change that. */
+export function endsPolling(error) {
+    return error instanceof ChatRequestError && (error.status === 401 || error.status === 403);
+}
+export function useThread(agentId, open) {
+    const [polled, setPolled] = useState([]);
+    // Messages Plaza accepted from a send, shown until a poll returns them. They
+    // stay out of the poll cursor: a send can land after a reply the last poll
+    // has not seen yet, and a cursor moved past it would never fetch that reply.
+    const [sent, setSent] = useState([]);
+    const [pending, setPending] = useState([]);
+    const [activity, setActivity] = useState(null);
+    const [loaded, setLoaded] = useState(false);
+    const [error, setError] = useState(null);
+    const polledRef = useRef([]);
+    const openRef = useRef(open);
+    const pollNow = useRef(() => undefined);
+    const agentRef = useRef(agentId);
+    openRef.current = open;
+    agentRef.current = agentId;
+    useEffect(() => {
+        let cancelled = false;
+        let timer;
+        let inFlight = false;
+        let again = false;
+        polledRef.current = [];
+        setPolled([]);
+        setSent([]);
+        setActivity(null);
+        setLoaded(false);
+        setError(null);
+        const poll = async () => {
+            // One poll at a time: asking again mid-flight runs once more after it,
+            // rather than starting a second loop that never stops.
+            if (inFlight) {
+                again = true;
+                return;
+            }
+            inFlight = true;
+            let ended = false;
+            clearTimeout(timer);
+            try {
+                const thread = await fetchThread(agentId, pollCursor(polledRef.current));
+                if (cancelled)
+                    return;
+                const merged = mergeMessages(polledRef.current, thread.messages);
+                polledRef.current = merged;
+                setPolled(merged);
+                setSent((current) => current.filter((message) => !merged.some((m) => m.id === message.id)));
+                setActivity(thread.activity);
+                setLoaded(true);
+                setError(null);
+            }
+            catch (caught) {
+                if (cancelled)
+                    return;
+                if (caught instanceof ChatRequestError) {
+                    setError(caught.message);
+                    // Signed out or out of the org: no timer. Opening the panel, the tab
+                    // or a send still asks, so signing in again brings the chat back.
+                    ended = endsPolling(caught);
+                }
+                else {
+                    console.error("mii-chat: couldn't load the thread", caught);
+                    setError("Couldn't reach the chat. Try again in a moment.");
+                }
+            }
+            finally {
+                inFlight = false;
+            }
+            if (cancelled || ended)
+                return;
+            if (again) {
+                again = false;
+                void poll();
+                return;
+            }
+            const visible = typeof document === "undefined" || document.visibilityState === "visible";
+            timer = setTimeout(() => void poll(), openRef.current && visible ? OPEN_POLL_MS : CLOSED_POLL_MS);
+        };
+        pollNow.current = () => void poll();
+        void poll();
+        return () => {
+            cancelled = true;
+            clearTimeout(timer);
+        };
+    }, [agentId]);
+    // Opening the panel, or coming back to the tab, should not wait out a slow poll.
+    useEffect(() => {
+        if (open)
+            pollNow.current();
+    }, [open]);
+    useEffect(() => {
+        const onVisible = () => {
+            if (document.visibilityState === "visible")
+                pollNow.current();
+        };
+        document.addEventListener("visibilitychange", onVisible);
+        return () => document.removeEventListener("visibilitychange", onVisible);
+    }, []);
+    const deliver = useCallback((item) => {
+        sendMessage(item.agentId, {
+            body: item.body,
+            attachments: item.attachments,
+            pageUrl: window.location.href
+        }).then((message) => {
+            // The person moved to another agent meanwhile: this thread is not on
+            // screen, and switching back reads it from Plaza.
+            setPending((current) => current.filter((p) => p.localId !== item.localId));
+            if (agentRef.current !== item.agentId)
+                return;
+            setSent((current) => [...current, message]);
+            pollNow.current();
+        }, (caught) => {
+            const problem = caught instanceof ChatRequestError ? caught.message : "Couldn't reach the chat. Try again in a moment.";
+            if (!(caught instanceof ChatRequestError))
+                console.error("mii-chat: send failed", caught);
+            setPending((current) => current.map((p) => (p.localId === item.localId ? { ...p, status: "failed", problem } : p)));
+        });
+    }, []);
+    const send = useCallback((body, attachments) => {
+        const item = {
+            localId: `local-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+            agentId,
+            body,
+            attachments,
+            status: "sending",
+            createdAt: new Date().toISOString()
+        };
+        setPending((current) => [...current, item]);
+        deliver(item);
+    }, [agentId, deliver]);
+    const retry = useCallback((localId) => {
+        const item = pending.find((p) => p.localId === localId);
+        if (item === undefined)
+            return;
+        const { localId: id, agentId: to, body, attachments, createdAt } = item;
+        const again = { localId: id, agentId: to, body, attachments, createdAt, status: "sending" };
+        setPending((current) => current.map((p) => (p.localId === localId ? again : p)));
+        deliver(again);
+    }, [deliver, pending]);
+    const discard = useCallback((localId) => {
+        setPending((current) => current.filter((p) => p.localId !== localId));
+    }, []);
+    const messages = useMemo(() => mergeMessages(polled, sent), [polled, sent]);
+    const shown = useMemo(() => pending.filter((p) => p.agentId === agentId), [pending, agentId]);
+    return { loaded, messages, pending: shown, activity, error, send, retry, discard };
+}
+/**
+ * What the next message would carry, or null when it cannot go yet: a file
+ * still uploading, or one that failed and has not been removed — a message is
+ * never sent quietly missing a file its author attached.
+ */
+export function outgoing(files, draft) {
+    const attachments = [];
+    for (const file of files) {
+        if (file.status !== "ready")
+            return null;
+        attachments.push(file.attachment);
+    }
+    const body = draft.trim();
+    return body === "" && attachments.length === 0 ? null : { body, attachments };
+}
+/** Files picked for the next message, uploaded the moment they are picked. */
+export function useStagedFiles() {
+    const [files, setFiles] = useState([]);
+    const previews = useRef(new Map());
+    const release = (localId) => {
+        const url = previews.current.get(localId);
+        if (url !== undefined) {
+            URL.revokeObjectURL(url);
+            previews.current.delete(localId);
+        }
+    };
+    useEffect(() => {
+        const held = previews.current;
+        return () => {
+            for (const url of held.values())
+                URL.revokeObjectURL(url);
+            held.clear();
+        };
+    }, []);
+    const add = useCallback((picked) => {
+        for (const file of picked) {
+            const localId = `file-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+            const preview = file.type.startsWith("image/") ? URL.createObjectURL(file) : null;
+            if (preview !== null)
+                previews.current.set(localId, preview);
+            setFiles((current) => [
+                ...current,
+                { localId, name: file.name, preview, status: "uploading" }
+            ]);
+            uploadFile(file).then((attachment) => setFiles((current) => current.map((f) => (f.localId === localId ? { ...f, status: "ready", attachment } : f))), (caught) => {
+                const problem = caught instanceof ChatRequestError ? caught.message : "Couldn't upload it.";
+                if (!(caught instanceof ChatRequestError))
+                    console.error("mii-chat: upload failed", caught);
+                setFiles((current) => current.map((f) => (f.localId === localId ? { ...f, status: "failed", problem } : f)));
+            });
+        }
+    }, []);
+    const remove = useCallback((localId) => {
+        release(localId);
+        setFiles((current) => current.filter((f) => f.localId !== localId));
+    }, []);
+    const clear = useCallback(() => {
+        for (const localId of [...previews.current.keys()])
+            release(localId);
+        setFiles([]);
+    }, []);
+    return { files, add, remove, clear };
+}
+/** "Seen up to" per agent, kept in this browser so the badge survives a reload. */
+export function useSeen(agentId) {
+    const key = `mii-chat:seen:${agentId}`;
+    const [seen, setSeen] = useState(() => readSeen(key));
+    useEffect(() => {
+        setSeen(readSeen(key));
+    }, [key]);
+    const mark = useCallback((at) => {
+        setSeen((current) => {
+            const next = advanceSeen(current, at);
+            if (next !== current && next.kind === "upTo")
+                writeStorage(key, JSON.stringify(next.at));
+            return next;
+        });
+    }, [key]);
+    return [seen, mark];
+}
+function readSeen(key) {
+    const stored = readStorage(key);
+    return stored === null ? { kind: "never" } : { kind: "upTo", at: JSON.parse(stored) };
+}
+export function readStorage(key) {
+    try {
+        return window.localStorage.getItem(key);
+    }
+    catch {
+        return null;
+    }
+}
+export function writeStorage(key, value) {
+    try {
+        window.localStorage.setItem(key, value);
+    }
+    catch {
+        // Storage blocked (privacy mode): the badge just forgets across reloads.
+    }
+}
+/** Whether a CSS media query matches, kept current. */
+export function useMediaQuery(query) {
+    const [matches, setMatches] = useState(() => typeof window !== "undefined" && window.matchMedia(query).matches);
+    useEffect(() => {
+        const list = window.matchMedia(query);
+        const update = () => setMatches(list.matches);
+        update();
+        list.addEventListener("change", update);
+        return () => list.removeEventListener("change", update);
+    }, [query]);
+    return matches;
+}

package/dist/chat/widget/icons.d.ts

@@ -0,0 +1,13 @@
+type IconProps = {
+    readonly size?: number;
+};
+/** The launcher's mark: a four-point sparkle, for the agents on the other end. */
+export declare const Sparkle: ({ size }: IconProps) => import("react").JSX.Element;
+export declare const ChevronDown: (props: IconProps) => import("react").JSX.Element;
+export declare const Close: (props: IconProps) => import("react").JSX.Element;
+export declare const Expand: (props: IconProps) => import("react").JSX.Element;
+export declare const Collapse: (props: IconProps) => import("react").JSX.Element;
+export declare const Paperclip: (props: IconProps) => import("react").JSX.Element;
+export declare const ArrowUp: (props: IconProps) => import("react").JSX.Element;
+export declare const Check: (props: IconProps) => import("react").JSX.Element;
+export {};

package/dist/chat/widget/icons.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function Icon({ size = 18, children }) {
+    return (_jsx("svg", { className: "i", width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": "true", children: children }));
+}
+/** The launcher's mark: a four-point sparkle, for the agents on the other end. */
+export const Sparkle = ({ size = 26 }) => (_jsx("svg", { className: "solid", width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M12 2.2c.25 0 .47.17.53.42l.96 3.9a4.4 4.4 0 0 0 3.2 3.2l3.9.96a.55.55 0 0 1 0 1.06l-3.9.96a4.4 4.4 0 0 0-3.2 3.2l-.96 3.9a.55.55 0 0 1-1.06 0l-.96-3.9a4.4 4.4 0 0 0-3.2-3.2l-3.9-.96a.55.55 0 0 1 0-1.06l3.9-.96a4.4 4.4 0 0 0 3.2-3.2l.96-3.9A.55.55 0 0 1 12 2.2Z" }) }));
+export const ChevronDown = (props) => (_jsx(Icon, { ...props, children: _jsx("path", { d: "M6 9l6 6 6-6" }) }));
+export const Close = (props) => (_jsxs(Icon, { ...props, children: [_jsx("path", { d: "M18 6L6 18" }), _jsx("path", { d: "M6 6l12 12" })] }));
+export const Expand = (props) => (_jsxs(Icon, { ...props, children: [_jsx("path", { d: "M15 3h6v6" }), _jsx("path", { d: "M9 21H3v-6" }), _jsx("path", { d: "M21 3l-7 7" }), _jsx("path", { d: "M3 21l7-7" })] }));
+export const Collapse = (props) => (_jsxs(Icon, { ...props, children: [_jsx("path", { d: "M4 14h6v6" }), _jsx("path", { d: "M20 10h-6V4" }), _jsx("path", { d: "M14 10l7-7" }), _jsx("path", { d: "M3 21l7-7" })] }));
+export const Paperclip = (props) => (_jsx(Icon, { ...props, children: _jsx("path", { d: "M21.4 11.1l-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5" }) }));
+export const ArrowUp = (props) => (_jsxs(Icon, { ...props, children: [_jsx("path", { d: "M12 19V5" }), _jsx("path", { d: "M5 12l7-7 7 7" })] }));
+export const Check = (props) => (_jsx(Icon, { ...props, children: _jsx("path", { d: "M5 12l5 5L20 7" }) }));

package/dist/chat/widget/styles.d.ts

@@ -0,0 +1 @@
+export declare const CHAT_CSS = "\n:host { all: initial; }\n* { box-sizing: border-box; }\n.root {\n  --brand: #16181c;\n  --brand-fg: #ffffff;\n  --ink: #16181c;\n  --ink-mid: #5b616b;\n  --ink-lo: #7c828c;\n  --surface: #ffffff;\n  --raised: #ffffff;\n  --line: #e8eaed;\n  --bubble: #f1f2f4;\n  --hover: #f4f5f7;\n  --chip: #f4f5f7;\n  --field: #ffffff;\n  --field-ring: #dfe2e6;\n  --scrim: rgba(16,18,24,.06);\n  --danger: #c92a3d;\n  --danger-soft: #fdecee;\n  --panel-shadow: 0 0 0 1px rgba(16,18,24,.06), 0 6px 16px -6px rgba(16,18,24,.18), 0 28px 60px -24px rgba(16,18,24,.35);\n  --pop-shadow: 0 0 0 1px rgba(16,18,24,.07), 0 12px 32px -10px rgba(16,18,24,.3);\n  --launcher-shadow:\n    inset 0 1px 0 rgba(255,255,255,.35),\n    inset 0 -2px 3px rgba(0,0,0,.14),\n    0 0 0 1px rgba(16,18,24,.08),\n    0 2px 4px rgba(16,18,24,.16),\n    0 10px 24px -8px rgba(16,18,24,.38);\n  --ease: cubic-bezier(0.32, 0.72, 0, 1);\n  --mii-ink: var(--ink);\n  --mii-ink-mid: var(--ink-mid);\n  --mii-ink-lo: var(--ink-lo);\n  --mii-surface: var(--raised);\n  --mii-surface-2: var(--chip);\n  --mii-line: var(--line);\n  --mii-link: var(--brand);\n  --mii-running: #0b83c4;\n  --mii-danger: var(--danger);\n  --mii-code-bg: rgba(127,127,127,.16);\n  --mii-code-keyword: #7e22ce;\n  --mii-code-string: #047857;\n  --mii-code-number: #b45309;\n  --mii-code-title: #1d4ed8;\n  --mii-code-builtin: #0e7490;\n  --mii-attachment-width: 240px;\n  --mii-activity-ground: var(--surface);\n  font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  font-size: 13.5px;\n  line-height: 1.45;\n  color: var(--ink);\n  -webkit-font-smoothing: antialiased;\n}\n.root[data-theme=\"dark\"] {\n  --ink: #eceef1;\n  --ink-mid: #a9aeb7;\n  --ink-lo: #858b95;\n  --surface: #17191d;\n  --raised: #202328;\n  --line: #2a2d33;\n  --bubble: #25282e;\n  --hover: #25282e;\n  --chip: #25282e;\n  --field: #1c1e23;\n  --field-ring: #34383f;\n  --scrim: rgba(0,0,0,.35);\n  --danger: #ff7d90;\n  --danger-soft: #3a1c22;\n  --mii-running: #4cb8f0;\n  --mii-code-keyword: #d8b4fe;\n  --mii-code-string: #6ee7b7;\n  --mii-code-number: #fcd34d;\n  --mii-code-title: #93c5fd;\n  --mii-code-builtin: #67e8f9;\n  --panel-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 20px -6px rgba(0,0,0,.6), 0 30px 64px -24px rgba(0,0,0,.8);\n  --pop-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 14px 36px -10px rgba(0,0,0,.75);\n  --launcher-shadow:\n    inset 0 1px 0 rgba(255,255,255,.45),\n    inset 0 -2px 3px rgba(0,0,0,.22),\n    0 0 0 1px rgba(255,255,255,.14),\n    0 2px 5px rgba(0,0,0,.5),\n    0 12px 28px -8px rgba(0,0,0,.85);\n}\nbutton { font: inherit; color: inherit; }\nbutton:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }\nsvg.i { display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }\nsvg.solid { display: block; }\n\n.launcher {\n  position: fixed; right: 20px; bottom: 20px; z-index: 2147483000;\n  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;\n  color: var(--brand-fg);\n  background:\n    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 48%, rgba(0,0,0,.08)),\n    var(--brand);\n  display: flex; align-items: center; justify-content: center;\n  box-shadow: var(--launcher-shadow);\n  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);\n}\n.launcher:hover { transform: translateY(-1px) scale(1.04); }\n.launcher:active { transform: scale(0.96); }\n/* A chevron's weight sits in its arms, so the geometric centre reads high. */\n.launcher .chevron { display: block; transform: translateY(1.5px); }\n.badge {\n  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;\n  border-radius: 10px; background: #e5484d; color: #fff; font-size: 11.5px; font-weight: 600;\n  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--surface);\n}\n.nudge {\n  position: fixed; right: 20px; bottom: 90px; z-index: 2147483000; width: 300px; max-width: calc(100vw - 40px);\n  background: var(--raised); color: var(--ink); border: 0; border-radius: 18px; padding: 12px 14px; cursor: pointer; text-align: left;\n  display: flex; gap: 10px; align-items: flex-start;\n  box-shadow: var(--pop-shadow);\n  animation: rise 260ms var(--ease) both;\n}\n.nudge .who { display: block; font-size: 13px; font-weight: 600; }\n.nudge .text { font-size: 13.5px; color: var(--ink-mid); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }\n\n.panel {\n  position: fixed; right: 20px; bottom: 90px; z-index: 2147483000;\n  width: 380px; height: min(640px, calc(100vh - 110px));\n  background: var(--surface); color: var(--ink); border-radius: 20px; overflow: hidden;\n  display: flex; flex-direction: column;\n  box-shadow: var(--panel-shadow);\n  animation: open 280ms var(--ease) both; transform-origin: 100% 100%;\n}\n.panel.expanded { top: 20px; bottom: 20px; width: min(680px, calc(100vw - 40px)); height: auto; }\n.panel.mobile { inset: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; animation: sheet 300ms var(--ease) both; }\n@keyframes open { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }\n@keyframes sheet { from { transform: translateY(100%); } to { transform: none; } }\n@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }\n\n.header { display: flex; align-items: center; gap: 4px; padding: 10px 8px 10px 10px; border-bottom: 1px solid var(--line); position: relative; }\n.panel.mobile .header { padding-top: max(10px, env(safe-area-inset-top)); }\n.agent-button {\n  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; border: 0; background: transparent;\n  padding: 6px; border-radius: 12px; cursor: pointer; text-align: left;\n}\n.agent-button:hover { background: var(--hover); }\n.agent-name { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; gap: 4px; }\n.icon-button {\n  width: 40px; height: 40px; border-radius: 10px; border: 0; background: transparent; color: var(--ink-mid);\n  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;\n}\n.icon-button:hover { background: var(--hover); color: var(--ink); }\n\n.avatar { border-radius: 50%; background: var(--chip); color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }\n.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }\n\n.picker-scrim { position: absolute; inset: 0; background: var(--scrim); z-index: 3; }\n.picker {\n  position: absolute; left: 10px; right: 10px; top: 64px; z-index: 4; max-height: 60%; overflow: auto;\n  background: var(--raised); border-radius: 16px; padding: 6px;\n  box-shadow: var(--pop-shadow);\n  animation: rise 200ms var(--ease) both;\n}\n.panel.mobile .picker-scrim { background: rgba(0,0,0,.4); }\n.panel.mobile .picker {\n  left: 0; right: 0; top: auto; bottom: 0; max-height: 75%; border-radius: 20px 20px 0 0;\n  padding: 8px 10px max(24px, env(safe-area-inset-bottom)); animation: sheet 260ms var(--ease) both;\n}\n.picker-title { font-size: 12px; color: var(--ink-mid); font-weight: 500; padding: 8px 10px 6px; }\n.option {\n  display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent;\n  padding: 10px; border-radius: 11px; min-height: 56px; text-align: left; cursor: pointer;\n}\n.option:hover, .option[aria-selected=\"true\"] { background: var(--hover); }\n.option-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }\n.option-name { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }\n.option-description { font-size: 12.5px; color: var(--ink-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.tag { font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 6px; background: var(--chip); color: var(--ink-mid); }\n\n.thread { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 4px; }\n.loading { margin: auto; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink-mid); font-size: 13px; text-align: center; padding: 0 24px; }\n.loading .spinner { width: 20px; height: 20px; }\n.empty { margin: auto 0 12px; display: flex; flex-direction: column; gap: 10px; padding: 8px 4px; }\n.empty-title { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }\n.empty-text { font-size: 13.5px; color: var(--ink-mid); }\n.day { align-self: center; font-size: 11.5px; color: var(--ink-lo); margin: 8px 0; }\n.row { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; }\n.row.mine { align-self: flex-end; flex-direction: column; align-items: flex-end; max-width: 84%; }\n.row.theirs .stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }\n.row.group-start { margin-top: 10px; }\n.avatar-slot { width: 26px; flex-shrink: 0; }\n.bubble { padding: 9px 13px; border-radius: 18px; overflow-wrap: anywhere; }\n.mine .bubble { background: var(--brand); color: var(--brand-fg); border-bottom-right-radius: 6px; }\n.theirs .bubble { background: var(--bubble); border-bottom-left-radius: 6px; }\n.mine .bubble p { margin: 0; white-space: pre-wrap; }\n/* The app's accent can be too light to read as link text on a bubble. */\n.theirs .bubble .mii-md a { color: inherit; }\n.thread > .mii-activity { margin: 10px 0 0; max-width: 88%; }\n.meta { font-size: 11px; color: var(--ink-lo); padding: 0 4px; }\n.meta.failed { color: var(--danger); }\n.meta button { border: 0; background: none; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font-size: 11px; }\n\n.notice { margin: 8px 12px 0; padding: 8px 12px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-size: 13px; }\n.composer { padding: 8px 12px 12px; }\n.panel.mobile .composer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }\n.staged { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 8px; }\n.chip { display: flex; align-items: center; gap: 6px; height: 30px; max-width: 220px; padding: 0 4px 0 8px; border-radius: 9px; background: var(--chip); font-size: 12.5px; color: var(--ink); }\n.chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.chip.failed { background: var(--danger-soft); color: var(--danger); }\n.upload-problem { margin-bottom: 6px; padding: 6px 10px; border-radius: 9px; background: var(--danger-soft); color: var(--danger); font-size: 12.5px; overflow-wrap: anywhere; }\n.chip button, .thumb button { width: 22px; height: 22px; border: 0; background: transparent; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-mid); flex-shrink: 0; }\n.thumb { position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); flex-shrink: 0; }\n.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.thumb.uploading img { opacity: .55; }\n.thumb.failed { box-shadow: inset 0 0 0 2px var(--danger); }\n.thumb .spinner { position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -8px; width: 16px; height: 16px; }\n.thumb button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--raised); color: var(--ink-mid); box-shadow: 0 1px 3px rgba(0,0,0,.25); }\n.spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--field-ring); border-top-color: var(--ink-mid); animation: spin .8s linear infinite; flex-shrink: 0; }\n@keyframes spin { to { transform: rotate(360deg); } }\n.box { display: flex; align-items: flex-end; gap: 2px; border-radius: 22px; padding: 5px 5px 5px 14px; box-shadow: inset 0 0 0 1px var(--field-ring); background: var(--field); }\n.box:focus-within { box-shadow: inset 0 0 0 1.5px var(--brand); }\n.box textarea {\n  flex: 1; border: 0; outline: none; resize: none; background: transparent; font: inherit; font-size: 13.5px; line-height: 1.45;\n  color: var(--ink); padding: 8px 0; max-height: 140px; min-height: 36px;\n}\n/* iOS zooms into any field under 16px. */\n.panel.mobile .box textarea { font-size: 16px; }\n.box textarea::placeholder { color: var(--ink-lo); }\n.send { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--brand); color: var(--brand-fg); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; margin-bottom: 1px; }\n.send:disabled { opacity: .35; cursor: default; }\n.drop { position: absolute; inset: 0; z-index: 5; background: var(--surface); opacity: .94; border: 2px dashed var(--brand); border-radius: inherit; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--ink); pointer-events: none; }\n.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n\n@media (prefers-reduced-motion: reduce) {\n  .launcher, .nudge, .panel, .picker, .spinner { animation: none !important; transition: none !important; }\n}\n";

package/dist/chat/widget/styles.js

@@ -0,0 +1,233 @@
+// The chat's whole stylesheet. It lives in the widget's shadow root, so nothing
+// here reaches the app and none of the app's CSS reaches in. `--brand` and
+// `--brand-fg` are the app's own `--primary` pair, read at runtime, and the
+// palette follows the app into dark mode.
+export const CHAT_CSS = `
+:host { all: initial; }
+* { box-sizing: border-box; }
+.root {
+  --brand: #16181c;
+  --brand-fg: #ffffff;
+  --ink: #16181c;
+  --ink-mid: #5b616b;
+  --ink-lo: #7c828c;
+  --surface: #ffffff;
+  --raised: #ffffff;
+  --line: #e8eaed;
+  --bubble: #f1f2f4;
+  --hover: #f4f5f7;
+  --chip: #f4f5f7;
+  --field: #ffffff;
+  --field-ring: #dfe2e6;
+  --scrim: rgba(16,18,24,.06);
+  --danger: #c92a3d;
+  --danger-soft: #fdecee;
+  --panel-shadow: 0 0 0 1px rgba(16,18,24,.06), 0 6px 16px -6px rgba(16,18,24,.18), 0 28px 60px -24px rgba(16,18,24,.35);
+  --pop-shadow: 0 0 0 1px rgba(16,18,24,.07), 0 12px 32px -10px rgba(16,18,24,.3);
+  --launcher-shadow:
+    inset 0 1px 0 rgba(255,255,255,.35),
+    inset 0 -2px 3px rgba(0,0,0,.14),
+    0 0 0 1px rgba(16,18,24,.08),
+    0 2px 4px rgba(16,18,24,.16),
+    0 10px 24px -8px rgba(16,18,24,.38);
+  --ease: cubic-bezier(0.32, 0.72, 0, 1);
+  --mii-ink: var(--ink);
+  --mii-ink-mid: var(--ink-mid);
+  --mii-ink-lo: var(--ink-lo);
+  --mii-surface: var(--raised);
+  --mii-surface-2: var(--chip);
+  --mii-line: var(--line);
+  --mii-link: var(--brand);
+  --mii-running: #0b83c4;
+  --mii-danger: var(--danger);
+  --mii-code-bg: rgba(127,127,127,.16);
+  --mii-code-keyword: #7e22ce;
+  --mii-code-string: #047857;
+  --mii-code-number: #b45309;
+  --mii-code-title: #1d4ed8;
+  --mii-code-builtin: #0e7490;
+  --mii-attachment-width: 240px;
+  --mii-activity-ground: var(--surface);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-size: 13.5px;
+  line-height: 1.45;
+  color: var(--ink);
+  -webkit-font-smoothing: antialiased;
+}
+.root[data-theme="dark"] {
+  --ink: #eceef1;
+  --ink-mid: #a9aeb7;
+  --ink-lo: #858b95;
+  --surface: #17191d;
+  --raised: #202328;
+  --line: #2a2d33;
+  --bubble: #25282e;
+  --hover: #25282e;
+  --chip: #25282e;
+  --field: #1c1e23;
+  --field-ring: #34383f;
+  --scrim: rgba(0,0,0,.35);
+  --danger: #ff7d90;
+  --danger-soft: #3a1c22;
+  --mii-running: #4cb8f0;
+  --mii-code-keyword: #d8b4fe;
+  --mii-code-string: #6ee7b7;
+  --mii-code-number: #fcd34d;
+  --mii-code-title: #93c5fd;
+  --mii-code-builtin: #67e8f9;
+  --panel-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 20px -6px rgba(0,0,0,.6), 0 30px 64px -24px rgba(0,0,0,.8);
+  --pop-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 14px 36px -10px rgba(0,0,0,.75);
+  --launcher-shadow:
+    inset 0 1px 0 rgba(255,255,255,.45),
+    inset 0 -2px 3px rgba(0,0,0,.22),
+    0 0 0 1px rgba(255,255,255,.14),
+    0 2px 5px rgba(0,0,0,.5),
+    0 12px 28px -8px rgba(0,0,0,.85);
+}
+button { font: inherit; color: inherit; }
+button:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
+svg.i { display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
+svg.solid { display: block; }
+
+.launcher {
+  position: fixed; right: 20px; bottom: 20px; z-index: 2147483000;
+  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
+  color: var(--brand-fg);
+  background:
+    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 48%, rgba(0,0,0,.08)),
+    var(--brand);
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: var(--launcher-shadow);
+  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
+}
+.launcher:hover { transform: translateY(-1px) scale(1.04); }
+.launcher:active { transform: scale(0.96); }
+/* A chevron's weight sits in its arms, so the geometric centre reads high. */
+.launcher .chevron { display: block; transform: translateY(1.5px); }
+.badge {
+  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
+  border-radius: 10px; background: #e5484d; color: #fff; font-size: 11.5px; font-weight: 600;
+  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--surface);
+}
+.nudge {
+  position: fixed; right: 20px; bottom: 90px; z-index: 2147483000; width: 300px; max-width: calc(100vw - 40px);
+  background: var(--raised); color: var(--ink); border: 0; border-radius: 18px; padding: 12px 14px; cursor: pointer; text-align: left;
+  display: flex; gap: 10px; align-items: flex-start;
+  box-shadow: var(--pop-shadow);
+  animation: rise 260ms var(--ease) both;
+}
+.nudge .who { display: block; font-size: 13px; font-weight: 600; }
+.nudge .text { font-size: 13.5px; color: var(--ink-mid); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+
+.panel {
+  position: fixed; right: 20px; bottom: 90px; z-index: 2147483000;
+  width: 380px; height: min(640px, calc(100vh - 110px));
+  background: var(--surface); color: var(--ink); border-radius: 20px; overflow: hidden;
+  display: flex; flex-direction: column;
+  box-shadow: var(--panel-shadow);
+  animation: open 280ms var(--ease) both; transform-origin: 100% 100%;
+}
+.panel.expanded { top: 20px; bottom: 20px; width: min(680px, calc(100vw - 40px)); height: auto; }
+.panel.mobile { inset: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; animation: sheet 300ms var(--ease) both; }
+@keyframes open { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
+@keyframes sheet { from { transform: translateY(100%); } to { transform: none; } }
+@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+
+.header { display: flex; align-items: center; gap: 4px; padding: 10px 8px 10px 10px; border-bottom: 1px solid var(--line); position: relative; }
+.panel.mobile .header { padding-top: max(10px, env(safe-area-inset-top)); }
+.agent-button {
+  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; border: 0; background: transparent;
+  padding: 6px; border-radius: 12px; cursor: pointer; text-align: left;
+}
+.agent-button:hover { background: var(--hover); }
+.agent-name { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; gap: 4px; }
+.icon-button {
+  width: 40px; height: 40px; border-radius: 10px; border: 0; background: transparent; color: var(--ink-mid);
+  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
+}
+.icon-button:hover { background: var(--hover); color: var(--ink); }
+
+.avatar { border-radius: 50%; background: var(--chip); color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
+.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
+
+.picker-scrim { position: absolute; inset: 0; background: var(--scrim); z-index: 3; }
+.picker {
+  position: absolute; left: 10px; right: 10px; top: 64px; z-index: 4; max-height: 60%; overflow: auto;
+  background: var(--raised); border-radius: 16px; padding: 6px;
+  box-shadow: var(--pop-shadow);
+  animation: rise 200ms var(--ease) both;
+}
+.panel.mobile .picker-scrim { background: rgba(0,0,0,.4); }
+.panel.mobile .picker {
+  left: 0; right: 0; top: auto; bottom: 0; max-height: 75%; border-radius: 20px 20px 0 0;
+  padding: 8px 10px max(24px, env(safe-area-inset-bottom)); animation: sheet 260ms var(--ease) both;
+}
+.picker-title { font-size: 12px; color: var(--ink-mid); font-weight: 500; padding: 8px 10px 6px; }
+.option {
+  display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent;
+  padding: 10px; border-radius: 11px; min-height: 56px; text-align: left; cursor: pointer;
+}
+.option:hover, .option[aria-selected="true"] { background: var(--hover); }
+.option-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
+.option-name { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
+.option-description { font-size: 12.5px; color: var(--ink-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tag { font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 6px; background: var(--chip); color: var(--ink-mid); }
+
+.thread { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 4px; }
+.loading { margin: auto; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink-mid); font-size: 13px; text-align: center; padding: 0 24px; }
+.loading .spinner { width: 20px; height: 20px; }
+.empty { margin: auto 0 12px; display: flex; flex-direction: column; gap: 10px; padding: 8px 4px; }
+.empty-title { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
+.empty-text { font-size: 13.5px; color: var(--ink-mid); }
+.day { align-self: center; font-size: 11.5px; color: var(--ink-lo); margin: 8px 0; }
+.row { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; }
+.row.mine { align-self: flex-end; flex-direction: column; align-items: flex-end; max-width: 84%; }
+.row.theirs .stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.row.group-start { margin-top: 10px; }
+.avatar-slot { width: 26px; flex-shrink: 0; }
+.bubble { padding: 9px 13px; border-radius: 18px; overflow-wrap: anywhere; }
+.mine .bubble { background: var(--brand); color: var(--brand-fg); border-bottom-right-radius: 6px; }
+.theirs .bubble { background: var(--bubble); border-bottom-left-radius: 6px; }
+.mine .bubble p { margin: 0; white-space: pre-wrap; }
+/* The app's accent can be too light to read as link text on a bubble. */
+.theirs .bubble .mii-md a { color: inherit; }
+.thread > .mii-activity { margin: 10px 0 0; max-width: 88%; }
+.meta { font-size: 11px; color: var(--ink-lo); padding: 0 4px; }
+.meta.failed { color: var(--danger); }
+.meta button { border: 0; background: none; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font-size: 11px; }
+
+.notice { margin: 8px 12px 0; padding: 8px 12px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-size: 13px; }
+.composer { padding: 8px 12px 12px; }
+.panel.mobile .composer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
+.staged { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 8px; }
+.chip { display: flex; align-items: center; gap: 6px; height: 30px; max-width: 220px; padding: 0 4px 0 8px; border-radius: 9px; background: var(--chip); font-size: 12.5px; color: var(--ink); }
+.chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.chip.failed { background: var(--danger-soft); color: var(--danger); }
+.upload-problem { margin-bottom: 6px; padding: 6px 10px; border-radius: 9px; background: var(--danger-soft); color: var(--danger); font-size: 12.5px; overflow-wrap: anywhere; }
+.chip button, .thumb button { width: 22px; height: 22px; border: 0; background: transparent; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-mid); flex-shrink: 0; }
+.thumb { position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); flex-shrink: 0; }
+.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.thumb.uploading img { opacity: .55; }
+.thumb.failed { box-shadow: inset 0 0 0 2px var(--danger); }
+.thumb .spinner { position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -8px; width: 16px; height: 16px; }
+.thumb button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--raised); color: var(--ink-mid); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
+.spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--field-ring); border-top-color: var(--ink-mid); animation: spin .8s linear infinite; flex-shrink: 0; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.box { display: flex; align-items: flex-end; gap: 2px; border-radius: 22px; padding: 5px 5px 5px 14px; box-shadow: inset 0 0 0 1px var(--field-ring); background: var(--field); }
+.box:focus-within { box-shadow: inset 0 0 0 1.5px var(--brand); }
+.box textarea {
+  flex: 1; border: 0; outline: none; resize: none; background: transparent; font: inherit; font-size: 13.5px; line-height: 1.45;
+  color: var(--ink); padding: 8px 0; max-height: 140px; min-height: 36px;
+}
+/* iOS zooms into any field under 16px. */
+.panel.mobile .box textarea { font-size: 16px; }
+.box textarea::placeholder { color: var(--ink-lo); }
+.send { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--brand); color: var(--brand-fg); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; margin-bottom: 1px; }
+.send:disabled { opacity: .35; cursor: default; }
+.drop { position: absolute; inset: 0; z-index: 5; background: var(--surface); opacity: .94; border: 2px dashed var(--brand); border-radius: inherit; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--ink); pointer-events: none; }
+.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+@media (prefers-reduced-motion: reduce) {
+  .launcher, .nudge, .panel, .picker, .spinner { animation: none !important; transition: none !important; }
+}
+`;

package/dist/chat/widget/thread.d.ts

@@ -0,0 +1,33 @@
+import type { ChatAttachment } from "../ui/types.js";
+export type { ActivityGroup as ChatActivity, ChatAttachment } from "../ui/types.js";
+export type ChatMessage = {
+    readonly id: string;
+    readonly conversationId: string;
+    readonly fromMiiId: string;
+    readonly body: string;
+    readonly createdAt: string;
+    readonly updatedAt: string;
+    readonly attachments: readonly ChatAttachment[];
+};
+export type ChatAgent = {
+    readonly id: string;
+    readonly name: string;
+    readonly avatarUrl: string | null;
+    readonly description: string | null;
+};
+/**
+ * How far the person has read a thread. `never`: this browser has not shown
+ * it, so its history is not news. `upTo` null: they saw it while it was empty.
+ */
+export type Seen = {
+    readonly kind: "never";
+} | {
+    readonly kind: "upTo";
+    readonly at: string | null;
+};
+/** Having seen a thread up to `at` (null: while it was empty). Never moves back. */
+export declare function advanceSeen(current: Seen, at: string | null): Seen;
+/** Messages from the agent the person has not seen. Their own are never unread. */
+export declare function unreadFrom(messages: readonly ChatMessage[], viewerId: string, seen: Seen): ChatMessage[];
+/** The newest createdAt in a thread, which is what "seen up to" records. */
+export declare function latestCreatedAt(messages: readonly ChatMessage[]): string | null;

package/dist/chat/widget/thread.js

@@ -0,0 +1,27 @@
+// The chat's model of a thread, kept free of React so it can be tested alone.
+import { toMillis } from "../thread.js";
+/** Having seen a thread up to `at` (null: while it was empty). Never moves back. */
+export function advanceSeen(current, at) {
+    if (current.kind === "upTo") {
+        if (at === null || (current.at !== null && toMillis(current.at) >= toMillis(at)))
+            return current;
+    }
+    return { kind: "upTo", at };
+}
+/** Messages from the agent the person has not seen. Their own are never unread. */
+export function unreadFrom(messages, viewerId, seen) {
+    if (seen.kind === "never")
+        return [];
+    const { at } = seen;
+    return messages.filter((message) => message.fromMiiId !== viewerId && (at === null || toMillis(message.createdAt) > toMillis(at)));
+}
+/** The newest createdAt in a thread, which is what "seen up to" records. */
+export function latestCreatedAt(messages) {
+    let latest = null;
+    for (const message of messages) {
+        if (latest === null || message.createdAt > latest) {
+            latest = message.createdAt;
+        }
+    }
+    return latest;
+}