@doany-ai/inbox 0.0.0-stage → 0.1.0

package/dist/components/inbox-widget.js

@@ -0,0 +1,442 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "@doany-ai/app-core";
+import { FieldError } from "@doany-ai/app-core/form";
+import { Button } from "@doany-ai/app-core/ui/button";
+import { ArrowLeft, ArrowUp, CalendarDays, ChevronDown, Home, Loader2, Mail, MessageCircle, MessageSquareText, MoreHorizontal, Phone, Send, X } from "lucide-react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { EMAIL_MAX, EMAIL_PATTERN, MESSAGE_MAX, backAtParts, hashWithoutLinkToken, isHiddenPath, linkTokenIn, relativeTime } from "../format.js";
+import { useInbox } from "../hooks.js";
+import { aiNoticeText, eventText, inboxLabels, privacyNoticeParts, saysTheWait, suggestedQuestionTexts } from "../labels.js";
+import { PRIVACY_DISMISSED_KEY, sessionMark, setSessionMark } from "../storage.js";
+import { Avatar, EventLine, HomeCard, MessageRow, OwnBubble, TheirBubble, TypingDots, usePageVisible } from "./parts.js";
+/** The times under the bubbles are worked out again this often. */
+const CLOCK_MS = 30000;
+function browserLanguage() {
+    return typeof navigator !== "undefined" && navigator.language ? navigator.language : undefined;
+}
+function problemText(problem, labels) {
+    switch (problem) {
+        case "contact_limit":
+            return labels.contactLimit;
+        case "chat_limit":
+            return labels.tryLater;
+        case "rate_limited":
+            return labels.rateLimited;
+        case "not_published":
+            return labels.notPublished;
+        case "off":
+            return labels.off;
+        case "closed":
+            return labels.closed;
+        case "failed":
+            return labels.sendFailed;
+        default:
+            return null;
+    }
+}
+/**
+ * What this page tells the platform it can show with each message: a Book
+ * online row (`book_online`, when the site has a booking page), so the
+ * receptionist sends clients there instead of handing them to the team; and
+ * offer cards (`offer_booking`, when the site draws its booking flow).
+ */
+function pageCapabilities(bookHref, renderBooking) {
+    const found = [...(bookHref ? ["book_online"] : []), ...(renderBooking ? ["offer_booking"] : [])];
+    return found.length ? found : undefined;
+}
+/** A bubble from the business's side (not an event, not the client's). */
+const isTheirs = (message) => message.kind !== "event" && message.author !== "client" && (message.kind === "offer" || Boolean(message.text));
+/** "5 min. ago", or the label for under a minute; empty when the time cannot be read. */
+function timeAgo(iso, now, labels, locale) {
+    return relativeTime(iso, now, locale) ?? labels.justNow;
+}
+/**
+ * The byline under each group of bubbles from the business's side, by the id
+ * of the group's last message: "Annie · AI receptionist · 5 min. ago" for the
+ * receptionist, "Jo · 5 min. ago" for a person on the team.
+ */
+function bylines(messages, labels, receptionist, now, locale) {
+    const found = new Map();
+    messages.forEach((message, index) => {
+        if (!isTheirs(message))
+            return;
+        const next = messages[index + 1];
+        if (next && isTheirs(next) && next.author === message.author && next.author_name === message.author_name)
+            return;
+        const who = message.author === "receptionist" ? [message.author_name || receptionist, labels.aiReceptionist] : [message.author_name || labels.team];
+        found.set(message.id, [...who, timeAgo(message.occurred_at, now, labels, locale)].filter(Boolean).join(" · "));
+    });
+    return found;
+}
+/**
+ * The chat button and its panel, for a site. Mount it once, inside the
+ * router and outside the sign-in gate, beside `<Toaster />`. It reads the
+ * business's settings itself and shows nothing where the business has no
+ * button, on its hidden paths, or before the settings are read.
+ */
+export function InboxWidget({ bookHref, renderBooking, privacyHref, labels: given, locale, className }) {
+    const labels = useMemo(() => inboxLabels(given), [given]);
+    const location = useLocation();
+    const navigate = useNavigate();
+    const [open, setOpen] = useState(false);
+    // What is typed in the chat's box outlives the panel: closing it, or the
+    // business turning the button off for a while, loses nothing.
+    const [composer, setComposer] = useState("");
+    const wakeRef = useRef(() => { });
+    const launcherRef = useRef(null);
+    const onShow = useCallback(() => wakeRef.current(), []);
+    const visible = usePageVisible(onShow);
+    const inbox = useInbox({
+        open,
+        visible,
+        pagePath: location.pathname,
+        language: browserLanguage(),
+        capabilities: pageCapabilities(bookHref, renderBooking),
+    });
+    wakeRef.current = inbox.wake;
+    // The settings last seen enabled: a panel left open when the business turns
+    // the button off keeps its words while it says the chat is not available.
+    const lastOn = useRef(null);
+    if (inbox.config?.enabled)
+        lastOn.current = inbox.config;
+    const config = inbox.config?.enabled ? inbox.config : open ? lastOn.current : null;
+    // A reply's email links here with #doany_inbox=<token>: read it, take only
+    // that key off the address (through the router, keeping its state), then
+    // open the chat with it.
+    const handledLink = useRef(null);
+    const { resume } = inbox;
+    useEffect(() => {
+        const token = linkTokenIn(location.hash);
+        if (!token || handledLink.current === token)
+            return;
+        handledLink.current = token;
+        navigate({ pathname: location.pathname, search: location.search, hash: hashWithoutLinkToken(location.hash) }, { replace: true, state: location.state });
+        setOpen(true);
+        void resume(token);
+    }, [location.hash, location.pathname, location.search, location.state, navigate, resume]);
+    const hidden = isHiddenPath(location.pathname, config?.hidden_paths);
+    useEffect(() => {
+        if (hidden)
+            setOpen(false);
+    }, [hidden]);
+    // The panel is gone: the keyboard goes back to the button that opened it,
+    // once the button is drawn again (a phone hides it under the full-screen panel).
+    const refocus = useRef(false);
+    useEffect(() => {
+        if (!open && refocus.current)
+            launcherRef.current?.focus();
+        refocus.current = false;
+    }, [open]);
+    if (!config || hidden || !inbox.ready)
+        return null;
+    const left = config.corner === "left";
+    const name = config.label || labels.askUs;
+    return (_jsxs("div", { className: cn("inbox-widget", className), "data-doany-inbox": "", children: [open ? (_jsx(Panel, { inbox: inbox, config: config, labels: labels, left: left, bookHref: bookHref, renderBooking: renderBooking, privacyHref: privacyHref, locale: locale, composer: composer, setComposer: setComposer, onClose: () => {
+                    refocus.current = true;
+                    setOpen(false);
+                }, navigate: (to) => navigate(to) })) : null, _jsxs("button", { ref: launcherRef, type: "button", "aria-expanded": open, "aria-haspopup": "dialog", "aria-label": open ? labels.close : name, title: open ? labels.close : name, onClick: () => {
+                    refocus.current = open;
+                    setOpen((was) => !was);
+                }, className: cn("fixed bottom-4 z-40 inline-flex h-14 w-14 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-card transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", left ? "left-4" : "right-4", 
+                // Under the full-screen panel on a phone, where each header has its own close.
+                open && "max-[480px]:hidden"), children: [open ? _jsx(ChevronDown, { "aria-hidden": "true", className: "h-6 w-6" }) : _jsx(MessageCircle, { "aria-hidden": "true", className: "h-6 w-6" }), inbox.unread && !open ? (_jsx("span", { className: "absolute right-0 top-0 h-3.5 w-3.5 rounded-full bg-destructive ring-2 ring-background", children: _jsx("span", { className: "sr-only", children: labels.unread }) })) : null] })] }));
+}
+const headerButton = "h-8 w-8 shrink-0";
+function Panel({ inbox, config, labels, left, bookHref, renderBooking, privacyHref, locale, composer, setComposer, onClose, navigate, }) {
+    const titleId = useId();
+    const panelRef = useRef(null);
+    const scrollRef = useRef(null);
+    const business = config.business?.name ?? "";
+    const receptionist = config.receptionist?.name ?? "Annie";
+    const paths = config.paths ?? { ask: false, book: false, call: null, email: null, message: false };
+    const hosts = config.link_hosts ?? [];
+    const availability = config.availability;
+    const back = availability && !availability.open ? backAtParts(availability.back_at, locale) : null;
+    const backText = back ? labels.backAt(back.day, back.time) : null;
+    // While closed, "Back Mon 9:00" already says how long the wait is.
+    const repliesText = availability?.open && availability.replies_within != null ? labels.repliesWithin(availability.replies_within) : null;
+    // A handover line ends with the same wait: the next opening while closed, the usual reply time while open.
+    const wait = { business, repliesWithin: availability?.open ? (availability.replies_within ?? null) : null, backAt: backText };
+    const waitSaid = useMemo(() => saysTheWait(inbox.messages), [inbox.messages]);
+    const inThread = inbox.hasChat || inbox.pending !== null;
+    const offOrGone = inbox.off || !inbox.config?.enabled;
+    const canBook = paths.book && Boolean(bookHref);
+    // One way to write: to the receptionist while it answers, else to the team.
+    const canWrite = paths.ask || paths.message;
+    const [view, setView] = useState(inThread ? "chat" : "home");
+    // Who a first message goes to. Talk to a person, before the chat starts, sends it to the team.
+    const [intent, setIntent] = useState(inbox.draft?.intent ?? (paths.ask ? "ask" : "person"));
+    const [email, setEmail] = useState(inbox.draft?.contact?.email ?? "");
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        const timer = setInterval(() => setNow(Date.now()), CLOCK_MS);
+        return () => clearInterval(timer);
+    }, []);
+    const answered = inbox.messages.some((message) => message.author === "receptionist");
+    // The receptionist is who the visitor talks to: it answers here, or already has.
+    const withAi = answered || (paths.ask && (inThread || intent === "ask"));
+    const hello = config.receptionist?.greeting || (paths.ask ? labels.greeting(receptionist, business) : labels.teamGreeting(business));
+    const who = withAi ? receptionist : business;
+    const signed = useMemo(() => bylines(inbox.messages, labels, receptionist, now, locale), [inbox.messages, labels, receptionist, now, locale]);
+    useEffect(() => {
+        panelRef.current?.focus();
+    }, []);
+    // A chat that arrives (the first message, an emailed link) opens the conversation.
+    useEffect(() => {
+        if (inThread)
+            setView("chat");
+    }, [inThread]);
+    // A refused first message comes back as a draft: show it where it was written.
+    const { draft } = inbox;
+    useEffect(() => {
+        if (!draft || inThread)
+            return;
+        setView("chat");
+        setIntent(draft.intent);
+        if (draft.contact?.email)
+            setEmail(draft.contact.email);
+        if (draft.text && !composer)
+            setComposer(draft.text);
+        // Only a new draft moves the view.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [draft, inThread]);
+    // A view that took the focused control away with it (Back, a tab, Start a
+    // new chat) leaves the keyboard on the panel, not on the page behind it.
+    // The conversation's box takes it first, in its own effect.
+    useEffect(() => {
+        if (document.activeElement === document.body)
+            panelRef.current?.focus();
+    }, [view, inThread]);
+    useEffect(() => {
+        const element = scrollRef.current;
+        if (element && view === "chat")
+            element.scrollTop = element.scrollHeight;
+    }, [inbox.messages.length, inbox.replyPending, inbox.pending, view]);
+    const goBook = () => {
+        if (!bookHref)
+            return;
+        onClose();
+        if (bookHref.startsWith("/"))
+            navigate(bookHref);
+        else
+            window.location.assign(bookHref);
+    };
+    // The privacy line: until the first message, or until the visitor hides it for this browser session.
+    const [privacyHidden, setPrivacyHidden] = useState(() => sessionMark(PRIVACY_DISMISSED_KEY));
+    const privacy = privacyHref && !inThread && !privacyHidden
+        ? {
+            href: privacyHref,
+            // A path on this site opens through the router. The panel stays open
+            // beside the page, except on a phone, where it covers the page.
+            open: () => {
+                if (window.matchMedia?.("(max-width: 480px)").matches)
+                    onClose();
+                navigate(privacyHref);
+            },
+            dismiss: () => {
+                setSessionMark(PRIVACY_DISMISSED_KEY);
+                setPrivacyHidden(true);
+            },
+        }
+        : null;
+    // The questions to press instead of typing one: only before the first message, and only to the receptionist.
+    const suggestions = useMemo(() => (paths.ask && !inThread && intent === "ask" ? suggestedQuestionTexts(config.suggested_questions, labels) : []), [paths.ask, inThread, intent, config.suggested_questions, labels]);
+    const openChat = () => {
+        if (!inThread)
+            setIntent(paths.ask ? "ask" : "person");
+        setView("chat");
+    };
+    const startNew = () => {
+        inbox.newChat();
+        setComposer("");
+        setEmail("");
+        setIntent(paths.ask ? "ask" : "person");
+        setView("home");
+    };
+    // Escape closes the panel only when nothing inside it already used the key:
+    // the ⋯ menu closes itself on Escape and marks it handled.
+    const onKeyDown = (event) => {
+        if (event.key === "Escape" && !event.defaultPrevented)
+            onClose();
+    };
+    // The box gives way to one line: closed, or off (the business turned the
+    // button off, during a chat or since the settings were read).
+    const boxLine = inbox.closed ? labels.closed : offOrGone ? labels.off : null;
+    const problem = boxLine && (inbox.problem === "off" || inbox.problem === "closed") ? null : problemText(inbox.problem, labels);
+    const reachUs = (inbox.problem === "contact_limit" || inbox.problem === "chat_limit") && (paths.call || paths.email);
+    // The first message is still on its way: nothing else goes before it.
+    const boxDisabled = boxLine !== null || inbox.pending !== null;
+    const toPerson = async () => {
+        if (!inbox.hasChat) {
+            setIntent("person");
+            return;
+        }
+        if (boxDisabled || inbox.busy)
+            return;
+        if (await inbox.askForPerson(composer.trim() || undefined))
+            setComposer("");
+    };
+    // Talk to a person: in a chat the AI answers, or before it starts where the team also takes messages.
+    const offerPerson = paths.ask && (inbox.hasChat ? true : !inThread && paths.message && intent === "ask");
+    const chatEmail = inbox.me?.signed_in ? null : (inbox.email ?? (inbox.pending?.email || null));
+    const close = (onPrimary = false) => (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: cn(headerButton, onPrimary && "text-primary-foreground hover:bg-primary-foreground/15 hover:text-primary-foreground"), "aria-label": labels.close, onClick: onClose, children: _jsx(X, { "aria-hidden": "true" }) }));
+    const notices = inbox.linkExpired || backText || repliesText || availability?.away_notice ? (_jsxs("div", { className: "space-y-1", children: [inbox.linkExpired ? _jsx(EventLine, { children: labels.linkExpired }) : null, backText ? _jsx(EventLine, { children: backText }) : null, repliesText ? _jsx(EventLine, { children: repliesText }) : null, availability?.away_notice ? _jsx(EventLine, { children: availability.away_notice }) : null] })) : null;
+    const alerts = boxLine || problem || reachUs ? (_jsxs("div", { role: "alert", className: "space-y-2", children: [boxLine ? _jsx(EventLine, { children: boxLine }) : null, problem && !(inbox.problem === "chat_limit" && reachUs) ? _jsx(EventLine, { children: problem }) : null, reachUs ? _jsx(ReachUs, { call: paths.call, email: paths.email, labels: labels }) : null] })) : null;
+    const branding = config.branding ? (_jsx("div", { className: "px-4 pb-2 pt-1 text-center text-xs text-muted-foreground", children: _jsx("a", { href: "https://doany.ai", target: "_blank", rel: "noopener noreferrer", className: "hover:text-foreground", children: labels.poweredBy }) })) : null;
+    const tabs = (_jsxs("nav", { className: "grid grid-cols-2 border-t border-border", children: [_jsx(TabButton, { icon: Home, current: view === "home", onClick: () => setView("home"), children: labels.homeTab }), _jsx(TabButton, { icon: MessageSquareText, current: view === "messages", onClick: () => setView("messages"), badge: inbox.unread ? labels.unread : null, children: labels.messagesTab })] }));
+    const last = inbox.messages[inbox.messages.length - 1];
+    const lastOffer = [...inbox.messages].reverse().find((message) => message.kind === "offer" && message.author !== "client");
+    const lastCode = last?.kind === "event" && typeof last.payload?.code === "string" ? last.payload.code : undefined;
+    const preview = last
+        ? last.kind === "event"
+            ? eventText(lastCode, labels, waitSaid.has(last.id) ? wait : null) || labels.teamWillReply
+            : (last.text ?? "")
+        : (inbox.pending?.text ?? "");
+    const lastTeam = [...inbox.messages].reverse().find((message) => message.author === "team" && message.kind !== "event");
+    const rowName = lastTeam && !answered ? lastTeam.author_name || labels.team : who;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": "true", "data-inbox-glow": "", className: cn("pointer-events-none fixed bottom-20 z-40 h-[min(40rem,calc(100dvh-6rem))] w-[min(25rem,calc(100vw-2rem))] scale-[1.04] rounded-[2rem] bg-gradient-to-br from-primary/60 via-primary/15 to-primary/50 blur-xl max-[480px]:hidden", left ? "left-4" : "right-4") }), _jsx("div", { ref: panelRef, role: "dialog", "aria-labelledby": titleId, tabIndex: -1, onKeyDown: onKeyDown, "data-view": view, className: cn("fixed bottom-20 z-40 flex h-[min(40rem,calc(100dvh-6rem))] w-[min(25rem,calc(100vw-2rem))] flex-col overflow-hidden rounded-2xl border border-border bg-card text-card-foreground shadow-card focus:outline-none", left ? "left-4" : "right-4", 
+                // A phone gets the whole screen.
+                "max-[480px]:inset-0 max-[480px]:h-auto max-[480px]:w-auto max-[480px]:rounded-none max-[480px]:border-0"), children: view === "home" ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [_jsxs("div", { className: "bg-primary px-5 pb-6 pt-4 text-primary-foreground", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h2", { id: titleId, className: "min-w-0 flex-1 truncate font-heading text-base font-semibold", children: business }), close(true)] }), _jsx("p", { className: "mt-10 whitespace-pre-wrap font-heading text-2xl font-semibold leading-snug [overflow-wrap:anywhere]", children: hello })] }), _jsx("div", { "aria-hidden": "true", className: "h-12 bg-gradient-to-b from-primary to-card" }), _jsxs("div", { className: "-mt-10 space-y-2 px-4 pb-4", children: [canWrite ? (_jsx(HomeCard, { icon: MessageSquareText, title: paths.ask ? labels.ask : labels.message, sub: paths.ask ? labels.askSub(receptionist) : labels.messageSub, onClick: openChat })) : null, canBook ? _jsx(HomeCard, { icon: CalendarDays, title: labels.book, onClick: goBook }) : null, paths.call ? _jsx(HomeCard, { icon: Phone, title: labels.call, sub: paths.call, href: `tel:${paths.call}` }) : null, notices ? _jsx("div", { className: "pt-2", children: notices }) : null, !inThread && alerts ? _jsx("div", { className: "pt-2", children: alerts }) : null] })] }), tabs, branding] })) : view === "messages" ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border px-4 py-3", children: [_jsx("h2", { id: titleId, className: "min-w-0 flex-1 truncate font-heading text-base font-semibold", children: labels.messagesTab }), close()] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: inThread ? (_jsxs("button", { type: "button", className: "flex w-full items-center gap-3 border-b border-border px-4 py-3 text-left transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring", onClick: () => setView("chat"), children: [_jsx(Avatar, { name: rowName }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm font-semibold", children: rowName }), _jsx("span", { className: "block truncate text-xs text-muted-foreground", children: preview })] }), _jsxs("span", { className: "flex shrink-0 flex-col items-end gap-1 text-xs text-muted-foreground", children: [last ? _jsx("span", { children: timeAgo(last.occurred_at, now, labels, locale) }) : null, inbox.unread ? (_jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-primary", children: _jsx("span", { className: "sr-only", children: labels.unread }) })) : null] })] })) : (_jsx("p", { className: "px-4 py-10 text-center text-sm text-muted-foreground", children: labels.noMessages })) }), canWrite && !boxLine ? (_jsx("div", { className: "flex justify-center px-4 pb-3", children: _jsxs(Button, { type: "button", className: "rounded-full", onClick: openChat, children: [paths.ask ? labels.ask : labels.message, _jsx(Send, { "aria-hidden": "true" })] }) })) : null, tabs, branding] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2.5", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: headerButton, "aria-label": labels.back, onClick: () => setView("messages"), children: _jsx(ArrowLeft, { "aria-hidden": "true" }) }), _jsx(Avatar, { name: who }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h2", { id: titleId, className: "truncate font-heading text-sm font-semibold", children: who }), _jsx("p", { className: "truncate text-xs text-muted-foreground", children: withAi ? labels.teamCanHelp : labels.messageSub })] }), chatEmail || offerPerson || inThread ? (_jsx(MoreMenu, { label: labels.more, children: (done) => (_jsxs(_Fragment, { children: [chatEmail ? _jsx("p", { className: "px-3 py-1.5 text-xs text-muted-foreground [overflow-wrap:anywhere]", children: labels.chattingAs(chatEmail) }) : null, offerPerson ? (_jsx(MenuItem, { disabled: inbox.hasChat && (boxDisabled || inbox.busy), onClick: () => {
+                                                    done();
+                                                    void toPerson();
+                                                }, children: labels.askForPerson })) : null, inThread ? (_jsx(MenuItem, { onClick: () => {
+                                                    done();
+                                                    startNew();
+                                                }, children: labels.startNewChat })) : null] })) })) : null, close()] }), _jsxs("div", { ref: scrollRef, className: "min-h-0 flex-1 space-y-3 overflow-y-auto px-4 py-4", children: [inbox.linkExpired ? _jsx(EventLine, { children: labels.linkExpired }) : null, withAi ? (_jsxs("div", { className: "space-y-1.5", children: [_jsx(TheirBubble, { children: aiNoticeText(labels, receptionist, business) }), _jsx(TheirBubble, { byline: `${receptionist} · ${labels.aiReceptionist}`, children: hello })] })) : (_jsx(TheirBubble, { byline: business || null, children: config.receptionist?.greeting || labels.teamGreeting(business) })), inThread ? (
+                                // A log: a screen reader says each line as it arrives, without taking the keyboard.
+                                _jsxs("div", { role: "log", "aria-live": "polite", "aria-relevant": "additions text", "aria-labelledby": titleId, className: "space-y-3", children: [inbox.messages.map((message) => (_jsx(MessageRow, { message: message, labels: labels, hosts: hosts, wait: waitSaid.has(message.id) ? wait : null, byline: signed.get(message.id) ?? null, locale: locale, renderBooking: renderBooking, onBooked: (result) => void inbox.reportBooking(result), newest: message.id === last?.id, latestOffer: message.id === lastOffer?.id }, message.id))), inbox.pending ? (_jsx(OwnBubble, { status: inbox.pending.state === "failed" ? (_jsxs(_Fragment, { children: [_jsx("span", { children: labels.notSent }), _jsx("button", { type: "button", className: "font-semibold text-foreground underline underline-offset-2", onClick: () => void inbox.retryPending(), disabled: inbox.busy, children: labels.tryAgain })] })) : (_jsx("span", { children: labels.sending })), children: inbox.pending.text })) : null, inbox.replyPending && inbox.hasChat ? _jsx(TypingDots, { label: labels.typing }) : null] })) : null, alerts] }), !boxLine && (inThread || canWrite) ? (_jsx(Composer, { inbox: inbox, labels: labels, intent: paths.ask ? intent : "person", askEmail: !inThread && (!inbox.signedIn || inbox.problem === "details_required"), email: email, setEmail: setEmail, text: composer, setText: setComposer, disabled: boxDisabled, suggestions: suggestions, privacy: privacy })) : null, branding] })) })] }));
+}
+function TabButton({ icon: Icon, current, onClick, badge, children }) {
+    return (_jsxs("button", { type: "button", "aria-current": current ? "page" : undefined, onClick: onClick, className: cn("relative flex flex-col items-center gap-0.5 px-2 py-2 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring", current ? "text-primary" : "text-muted-foreground hover:text-foreground"), children: [_jsxs("span", { className: "relative", children: [_jsx(Icon, { "aria-hidden": "true", className: "h-5 w-5" }), badge ? (_jsx("span", { className: "absolute -right-1.5 -top-1 h-2.5 w-2.5 rounded-full bg-destructive ring-2 ring-card", children: _jsx("span", { className: "sr-only", children: badge }) })) : null] }), children] }));
+}
+/** The conversation's ⋯ menu. Escape closes it and leaves the panel open. */
+function MoreMenu({ label, children }) {
+    const [open, setOpen] = useState(false);
+    const wrapRef = useRef(null);
+    const buttonRef = useRef(null);
+    const done = () => setOpen(false);
+    useEffect(() => {
+        if (!open)
+            return;
+        wrapRef.current?.querySelector('[role="menuitem"]:not([disabled])')?.focus();
+        const outside = (event) => {
+            if (!wrapRef.current?.contains(event.target))
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", outside);
+        return () => document.removeEventListener("mousedown", outside);
+    }, [open]);
+    const onKeyDown = (event) => {
+        if (!open)
+            return;
+        if (event.key === "Escape") {
+            event.preventDefault();
+            setOpen(false);
+            buttonRef.current?.focus();
+            return;
+        }
+        if (event.key !== "ArrowDown" && event.key !== "ArrowUp")
+            return;
+        const items = Array.from(wrapRef.current?.querySelectorAll('[role="menuitem"]:not([disabled])') ?? []);
+        if (!items.length)
+            return;
+        event.preventDefault();
+        const at = items.indexOf(document.activeElement);
+        items[(at + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]?.focus();
+    };
+    return (_jsxs("div", { ref: wrapRef, className: "relative", onKeyDown: onKeyDown, children: [_jsx(Button, { ref: buttonRef, type: "button", variant: "ghost", size: "icon", className: headerButton, "aria-label": label, "aria-haspopup": "menu", "aria-expanded": open, onClick: () => setOpen((was) => !was), children: _jsx(MoreHorizontal, { "aria-hidden": "true" }) }), open ? (_jsx("div", { role: "menu", "aria-label": label, className: "absolute right-0 top-full z-10 mt-1 w-56 rounded-xl border border-border bg-popover py-1 text-popover-foreground shadow-card", children: children(done) })) : null] }));
+}
+function MenuItem({ children, onClick, disabled }) {
+    return (_jsx("button", { type: "button", role: "menuitem", disabled: disabled, onClick: onClick, className: "block w-full px-3 py-2 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50", children: children }));
+}
+function ReachUs({ call, email, labels }) {
+    return (_jsxs("div", { className: "flex flex-wrap justify-center gap-2", children: [call ? (_jsx(Button, { asChild: true, variant: "outline", size: "sm", children: _jsxs("a", { href: `tel:${call}`, children: [_jsx(Phone, { "aria-hidden": "true" }), labels.call, " ", call] }) })) : null, email ? (_jsx(Button, { asChild: true, variant: "outline", size: "sm", children: _jsxs("a", { href: `mailto:${email}`, children: [_jsx(Mail, { "aria-hidden": "true" }), labels.emailUs] }) })) : null] }));
+}
+/**
+ * The conversation's one box. Until this browser has a chat it starts with an
+ * email row (a signed-in account skips it); then it is the message alone.
+ */
+function Composer({ inbox, labels, intent, askEmail, email, setEmail, text: typed, setText, disabled, suggestions, privacy, }) {
+    const id = useId();
+    const emailRef = useRef(null);
+    const boxRef = useRef(null);
+    const [error, setError] = useState(null);
+    // The box takes the keyboard when the conversation opens and once it can be
+    // typed in again: the email first while it is asked for. Focus that is on
+    // anything else in the panel stays there.
+    useEffect(() => {
+        const field = (askEmail && !email ? emailRef.current : null) ?? boxRef.current;
+        const active = document.activeElement;
+        const lost = active === document.body || active === field?.closest('[role="dialog"]') || (active instanceof HTMLButtonElement && active.disabled);
+        if (!disabled && field && lost)
+            field.focus();
+        // The email row leaving (the chat started) is not a reason to move the keyboard.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [disabled]);
+    // `given` is a suggested question pressed with the email already there: sent as typed words are.
+    const submit = async (event, given) => {
+        event?.preventDefault();
+        if (disabled || inbox.busy)
+            return;
+        const text = given ?? typed;
+        if (inbox.hasChat) {
+            if (text.trim() && (await inbox.send(text)))
+                setText("");
+            return;
+        }
+        let contact;
+        if (askEmail) {
+            const typed = email.trim();
+            const found = !typed ? labels.emailRequired : typed.length > EMAIL_MAX || !EMAIL_PATTERN.test(typed) ? labels.emailFormat : null;
+            setError(found);
+            if (found) {
+                emailRef.current?.focus();
+                return;
+            }
+            contact = { email: typed };
+        }
+        if (!text.trim()) {
+            boxRef.current?.focus();
+            return;
+        }
+        if (await inbox.start({ text, intent, contact })) {
+            setText("");
+            // The email row is gone and Send was the last thing pressed: the next message is typed here.
+            boxRef.current?.focus();
+        }
+    };
+    // A suggested question goes into the box. With the email still to give, the
+    // keyboard goes to the email row and Send sends both; otherwise it is sent at once.
+    const ask = (question) => {
+        if (disabled || inbox.busy)
+            return;
+        setText(question);
+        if (askEmail && !email.trim()) {
+            emailRef.current?.focus();
+            return;
+        }
+        void submit(undefined, question);
+    };
+    const [beforeLink, afterLink] = privacyNoticeParts(labels);
+    return (_jsxs("form", { noValidate: true, className: "px-3 pb-2 pt-1", onSubmit: (event) => void submit(event), children: [suggestions.length ? (_jsx("div", { role: "group", "aria-label": labels.suggestedQuestions, className: "flex flex-wrap justify-end gap-1.5 pb-2", children: suggestions.map((question) => (_jsx("button", { type: "button", disabled: disabled || inbox.busy, onClick: () => ask(question), className: "max-w-full rounded-full border border-border bg-background px-3 py-1.5 text-left text-sm text-foreground transition-colors [overflow-wrap:anywhere] hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", children: question }, question))) })) : null, privacy ? (_jsxs("div", { className: "flex items-start justify-center gap-1 pb-1.5 pl-1 text-xs text-muted-foreground", children: [_jsxs("p", { className: "min-w-0 py-0.5 [overflow-wrap:anywhere]", children: [beforeLink, _jsx("a", { href: privacy.href, className: "underline underline-offset-2 hover:text-foreground", onClick: (event) => {
+                                    // Another site, or a press that asks for a new tab or window, is the browser's.
+                                    if (!privacy.href.startsWith("/") || privacy.href.startsWith("//") || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0)
+                                        return;
+                                    event.preventDefault();
+                                    privacy.open();
+                                }, children: labels.privacyPolicy }), afterLink] }), _jsx("button", { type: "button", "aria-label": labels.dismiss, title: labels.dismiss, className: "shrink-0 rounded p-0.5 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: () => {
+                            privacy.dismiss();
+                            // The line took the pressed × with it: the keyboard goes back to the box.
+                            ((askEmail && !email ? emailRef.current : null) ?? boxRef.current)?.focus();
+                        }, children: _jsx(X, { "aria-hidden": "true", className: "h-3.5 w-3.5" }) })] })) : null, _jsxs("div", { className: "rounded-2xl border border-input bg-background focus-within:border-ring focus-within:ring-1 focus-within:ring-ring", children: [askEmail ? (_jsxs("div", { className: "border-b border-border px-3.5 py-2", children: [_jsx("label", { htmlFor: `${id}-email`, className: "sr-only", children: labels.emailLabel }), _jsx("input", { ref: emailRef, id: `${id}-email`, type: "email", inputMode: "email", autoComplete: "email", maxLength: EMAIL_MAX, placeholder: labels.emailPlaceholder, value: email, disabled: disabled, onChange: (event) => {
+                                    setEmail(event.target.value);
+                                    if (error)
+                                        setError(null);
+                                }, "aria-invalid": error ? true : undefined, "aria-describedby": error ? `${id}-email-error` : undefined, "aria-required": "true", className: "w-full bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:opacity-50" }), _jsx(FieldError, { id: `${id}-email-error`, message: error ?? undefined })] })) : null, _jsxs("div", { className: "flex items-end gap-2 py-1.5 pl-3.5 pr-1.5", children: [_jsx("label", { htmlFor: `${id}-message`, className: "sr-only", children: labels.messageLabel }), _jsx("textarea", { ref: boxRef, id: `${id}-message`, rows: 1, value: typed, maxLength: MESSAGE_MAX, placeholder: labels.messagePlaceholder, onChange: (event) => setText(event.target.value), onKeyDown: (event) => {
+                                    if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+                                        event.preventDefault();
+                                        void submit();
+                                    }
+                                }, disabled: disabled, className: "max-h-32 min-h-9 flex-1 resize-none bg-transparent py-1.5 text-sm leading-relaxed text-foreground outline-none [field-sizing:content] placeholder:text-muted-foreground disabled:opacity-50" }), _jsx(Button, { type: "submit", size: "icon", className: "h-9 w-9 shrink-0 rounded-full", "aria-label": inbox.busy ? labels.sending : labels.send, disabled: disabled || inbox.busy || !typed.trim(), children: inbox.busy ? _jsx(Loader2, { "aria-hidden": "true", className: "animate-spin" }) : _jsx(ArrowUp, { "aria-hidden": "true" }) })] })] })] }));
+}

package/dist/components/parts.d.ts

@@ -0,0 +1,67 @@
+import { type ElementType, type ReactNode } from "react";
+import { type InboxLabels, type InboxWait } from "../labels.js";
+import type { InboxBooked, InboxBookingHooks, InboxBookingOffer, InboxMessage } from "../types.js";
+/** Plain text, with links only to the site's own hosts. */
+export declare function MessageText({ text, hosts }: {
+    text: string;
+    hosts: readonly string[];
+}): import("react").JSX.Element;
+/**
+ * A line from the business's side: the receptionist, a team member, or the
+ * greeting. `byline` goes under the last bubble of a group: who wrote it and when.
+ */
+export declare function TheirBubble({ children, byline }: {
+    children: ReactNode;
+    byline?: string | null;
+}): import("react").JSX.Element;
+/** The round initial beside a name: the site's primary colour, tinted. */
+export declare function Avatar({ name, className }: {
+    name: string;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function OwnBubble({ children, status }: {
+    children: ReactNode;
+    status?: ReactNode;
+}): import("react").JSX.Element;
+/** A fixed line the platform wrote (by its code): centered, quiet. The safety line stands out. */
+export declare function EventLine({ children, urgent }: {
+    children: ReactNode;
+    urgent?: boolean;
+}): import("react").JSX.Element;
+/** Draws the site's booking flow for an offer; `hooks.onBooked` goes to the flow's `onBooked`. */
+export type RenderBooking = (offer: InboxBookingOffer, hooks: InboxBookingHooks) => ReactNode;
+export declare function MessageRow({ message, labels, hosts, wait, byline, locale, renderBooking, onBooked, newest, latestOffer, }: {
+    message: InboxMessage;
+    labels: InboxLabels;
+    hosts: readonly string[];
+    /** Under the last bubble of a group from the business's side: "Annie · AI receptionist · 5 min. ago". */
+    byline?: string | null;
+    /** For a handover line: how long the team takes, or null when a later line says it (`saysTheWait`). */
+    wait: InboxWait | null;
+    /** For an offer's day. */
+    locale?: string;
+    renderBooking?: RenderBooking;
+    /** A booking made from an offer card. */
+    onBooked?: (result: InboxBooked) => void;
+    /** The thread's newest message: an offer here shows its booking flow already open. */
+    newest?: boolean;
+    /** The thread's latest offer: a flow that is open stays open until a newer offer arrives. */
+    latestOffer?: boolean;
+}): import("react").JSX.Element | null;
+/**
+ * Three dots while an answer is on its way. The words are real text for a
+ * screen reader: the message log around it announces them when they appear.
+ */
+export declare function TypingDots({ label }: {
+    label: string;
+}): import("react").JSX.Element;
+/** One of Home's cards: a full-width row with an arrow, a button or a link. */
+export declare function HomeCard({ icon: Icon, title, sub, href, onClick }: {
+    icon: ElementType;
+    title: string;
+    sub?: string | null;
+    href?: string;
+    onClick?: () => void;
+}): import("react").JSX.Element;
+/** Whether the page is in front: replies are marked seen only then. */
+export declare function usePageVisible(onShow: () => void): boolean;