@stack-mode/site-manager-kit 0.0.0-stage → 1.44.1

package/src/site-chat-panel.tsx

@@ -0,0 +1,537 @@
+"use client";
+
+import { useCallback, useEffect, useId, useRef, useState, type CSSProperties, type FormEvent, type KeyboardEvent, type ReactNode } from "react";
+import { readChatStream, textOn, type ChatConfig, type ChatLeadResult, type ChatSlots } from "./chat-types";
+
+export type SiteChatProps = {
+  config: ChatConfig;
+  /** A CSS color for the button, the visitor's messages and links. Defaults to the site's accent from Site Manager. */
+  accent?: string;
+  /** "auto" follows the visitor's device. */
+  theme?: "auto" | "light" | "dark";
+  position?: "right" | "left";
+  /** The site's chat route. */
+  endpoint?: string;
+  /** Raise the button above something else fixed in that corner (a cookie bar), in pixels. */
+  offset?: number;
+};
+
+type Msg = { id: string; role: "visitor" | "assistant"; text: string; pending?: boolean };
+type Stage = "chat" | "details" | "slots";
+type Saved = { conversationId: string | null; messages: Msg[]; leadSent: boolean };
+
+const VISITOR_KEY = "bp_chat_visitor";
+const SAVED_KEY = "bp_chat";
+const MAX_CHARS = 1000;
+
+const rid = () => (typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `${Date.now()}-${Math.random().toString(36).slice(2)}`);
+
+// Storage can be blocked (private windows, strict settings). The chat still works, it just forgets on reload.
+function read<T>(store: "local" | "session", key: string): T | null {
+  try {
+    const s = store === "local" ? window.localStorage : window.sessionStorage;
+    const v = s.getItem(key);
+    return v ? (JSON.parse(v) as T) : null;
+  } catch {
+    return null;
+  }
+}
+function write(store: "local" | "session", key: string, value: unknown) {
+  try {
+    (store === "local" ? window.localStorage : window.sessionStorage).setItem(key, JSON.stringify(value));
+  } catch {
+    // Not kept: fine.
+  }
+}
+
+function visitorId(): string {
+  const have = read<string>("local", VISITOR_KEY);
+  if (have && /^[\w-]{8,100}$/.test(have)) return have;
+  const id = rid();
+  write("local", VISITOR_KEY, id);
+  return id;
+}
+
+/** Links in a reply become clickable: full https addresses and this site's own paths. Everything else stays text. */
+function linkify(text: string): ReactNode[] {
+  const out: ReactNode[] = [];
+  const re = /(https?:\/\/[^\s<>()]+[^\s<>().,!?:;'"])|(^|\s)(\/[a-z0-9][\w\-/]*)/gi;
+  let last = 0;
+  for (const m of text.matchAll(re)) {
+    const start = m.index ?? 0;
+    const lead = m[2] ?? "";
+    const href = m[1] ?? m[3];
+    const at = start + (m[1] ? 0 : lead.length);
+    out.push(text.slice(last, at));
+    out.push(
+      <a key={at} href={href} target={m[1] ? "_blank" : undefined} rel={m[1] ? "noopener noreferrer" : undefined}>
+        {href}
+      </a>,
+    );
+    last = at + href.length;
+  }
+  out.push(text.slice(last));
+  return out;
+}
+
+function attribution(): { landingPath?: string; referrer?: string } {
+  const a = read<{ landingPath?: string; referrer?: string }>("session", "bp_attribution");
+  return a ? { landingPath: a.landingPath, referrer: a.referrer } : {};
+}
+
+const CSS = `
+.bpc{--bpc-bg:#ffffff;--bpc-surface:#f4f5f7;--bpc-text:#16181d;--bpc-muted:#5f6573;--bpc-border:rgba(20,22,28,.12);--bpc-shadow:0 24px 60px -18px rgba(15,18,25,.35),0 2px 6px rgba(15,18,25,.08);
+  position:fixed;z-index:2147483000;bottom:calc(20px + var(--bpc-offset,0px));font-size:15px;line-height:1.45;font-family:inherit;color:var(--bpc-text)}
+.bpc[data-theme=dark]{--bpc-bg:#14161b;--bpc-surface:#1d2027;--bpc-text:#eceef3;--bpc-muted:#a0a6b4;--bpc-border:rgba(255,255,255,.1);--bpc-shadow:0 24px 60px -18px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.4)}
+@media (prefers-color-scheme:dark){.bpc[data-theme=auto]{--bpc-bg:#14161b;--bpc-surface:#1d2027;--bpc-text:#eceef3;--bpc-muted:#a0a6b4;--bpc-border:rgba(255,255,255,.1);--bpc-shadow:0 24px 60px -18px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.4)}}
+.bpc[data-pos=right]{right:20px}.bpc[data-pos=left]{left:20px}
+.bpc *{box-sizing:border-box}
+.bpc-launch{all:unset;cursor:pointer;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--bpc-accent);color:var(--bpc-on-accent);
+  box-shadow:0 12px 32px -8px color-mix(in srgb,var(--bpc-accent) 70%,transparent),0 0 0 1px color-mix(in srgb,var(--bpc-accent) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.25);
+  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
+.bpc-launch:hover{transform:translateY(-2px) scale(1.04)}.bpc-launch:active{transform:scale(.97)}
+.bpc-launch:focus-visible{outline:3px solid color-mix(in srgb,var(--bpc-accent) 45%,transparent);outline-offset:3px}
+.bpc-launch svg{transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s}
+.bpc-pulse{position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:0 0 0 0 color-mix(in srgb,var(--bpc-accent) 55%,transparent);animation:bpc-pulse 2.4s ease-out 1s 3}
+@keyframes bpc-pulse{to{box-shadow:0 0 0 18px transparent}}
+.bpc-panel{position:absolute;bottom:76px;width:min(392px,calc(100vw - 32px));height:min(620px,calc(100dvh - 120px));display:flex;flex-direction:column;overflow:hidden;
+  background:var(--bpc-bg);border:1px solid var(--bpc-border);border-radius:22px;box-shadow:var(--bpc-shadow);transform-origin:bottom right;animation:bpc-in .28s cubic-bezier(.2,.8,.2,1)}
+.bpc[data-pos=right] .bpc-panel{right:0}.bpc[data-pos=left] .bpc-panel{left:0;transform-origin:bottom left}
+@keyframes bpc-in{from{opacity:0;transform:translateY(12px) scale(.96)}}
+.bpc-head{position:relative;display:flex;align-items:center;gap:12px;padding:16px 16px 14px;color:var(--bpc-on-accent);
+  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--bpc-accent) 80%,#fff) 0%,var(--bpc-accent) 45%,color-mix(in srgb,var(--bpc-accent) 70%,#000) 100%)}
+.bpc-head::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent)}
+.bpc-avatar{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:12px;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
+.bpc-title{flex:1;min-width:0}.bpc-title b{display:block;font-size:16px;font-weight:650;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.bpc-title span{display:flex;align-items:center;gap:6px;font-size:12px;opacity:.9}
+.bpc-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.25)}
+.bpc-x{all:unset;cursor:pointer;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:inherit;opacity:.85}
+.bpc-x:hover{opacity:1;background:rgba(255,255,255,.15)}.bpc-x:focus-visible{outline:2px solid rgba(255,255,255,.8)}
+.bpc-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;overscroll-behavior:contain}
+.bpc-msg{max-width:86%;padding:10px 14px;border-radius:18px;white-space:pre-wrap;word-wrap:break-word;animation:bpc-msg .22s ease-out}
+@keyframes bpc-msg{from{opacity:0;transform:translateY(6px)}}
+.bpc-msg a{color:inherit;text-decoration:underline;text-underline-offset:2px}
+.bpc-a{align-self:flex-start;background:var(--bpc-surface);border-bottom-left-radius:6px}
+.bpc-a a{color:var(--bpc-text);text-decoration-color:var(--bpc-accent);text-decoration-thickness:2px}
+.bpc-v{align-self:flex-end;background:var(--bpc-accent);color:var(--bpc-on-accent);border-bottom-right-radius:6px}
+.bpc-typing{display:inline-flex;gap:4px;padding:4px 2px}.bpc-typing i{width:7px;height:7px;border-radius:50%;background:var(--bpc-muted);opacity:.5;animation:bpc-b 1.2s infinite}
+.bpc-typing i:nth-child(2){animation-delay:.15s}.bpc-typing i:nth-child(3){animation-delay:.3s}
+@keyframes bpc-b{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
+.bpc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
+.bpc-chip{all:unset;cursor:pointer;padding:7px 12px;border-radius:999px;font-size:13.5px;border:1px solid color-mix(in srgb,var(--bpc-accent) 40%,var(--bpc-border));color:var(--bpc-text);background:color-mix(in srgb,var(--bpc-accent) 7%,var(--bpc-bg));transition:background .15s,transform .15s}
+.bpc-chip:hover{background:color-mix(in srgb,var(--bpc-accent) 15%,var(--bpc-bg));transform:translateY(-1px)}
+.bpc-chip:focus-visible{outline:2px solid var(--bpc-accent);outline-offset:2px}.bpc-chip[aria-pressed=true]{background:var(--bpc-accent);color:var(--bpc-on-accent);border-color:var(--bpc-accent)}
+.bpc-card{align-self:stretch;border:1px solid var(--bpc-border);background:var(--bpc-bg);border-radius:16px;padding:14px;display:grid;gap:10px;box-shadow:0 1px 0 var(--bpc-border);animation:bpc-msg .22s ease-out}
+.bpc-card h3{margin:0;font-size:14.5px;font-weight:650}.bpc-card p{margin:0;color:var(--bpc-muted);font-size:13px}
+.bpc-row{display:flex;gap:8px;flex-wrap:wrap}
+.bpc-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;border-radius:12px;font-weight:600;font-size:14px;background:var(--bpc-accent);color:var(--bpc-on-accent);transition:filter .15s,transform .15s}
+.bpc-btn:hover{filter:brightness(1.07)}.bpc-btn:active{transform:scale(.98)}.bpc-btn[disabled]{opacity:.5;cursor:default}
+.bpc-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--bpc-accent) 45%,transparent);outline-offset:2px}
+.bpc-ghost{background:transparent;color:var(--bpc-text);box-shadow:inset 0 0 0 1px var(--bpc-border)}.bpc-ghost:hover{background:var(--bpc-surface);filter:none}
+.bpc-field{display:grid;gap:4px;font-size:12.5px;color:var(--bpc-muted)}
+.bpc-in{font:inherit;font-size:14.5px;color:var(--bpc-text);background:var(--bpc-surface);border:1px solid transparent;border-radius:11px;padding:9px 11px;width:100%;transition:border-color .15s,box-shadow .15s}
+.bpc-in:focus{outline:none;border-color:var(--bpc-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--bpc-accent) 22%,transparent)}
+.bpc-err{color:#dc2626;font-size:12px}
+.bpc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
+.bpc-foot{border-top:1px solid var(--bpc-border);padding:10px 12px 8px;background:var(--bpc-bg)}
+.bpc-compose{display:flex;align-items:flex-end;gap:8px;background:var(--bpc-surface);border-radius:16px;padding:6px 6px 6px 14px;border:1px solid transparent;transition:border-color .15s,box-shadow .15s}
+.bpc-compose:focus-within{border-color:color-mix(in srgb,var(--bpc-accent) 60%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--bpc-accent) 16%,transparent)}
+.bpc-compose textarea{flex:1;resize:none;border:0;background:transparent;font:inherit;font-size:15px;color:var(--bpc-text);max-height:120px;padding:7px 0;outline:none}
+.bpc-send{all:unset;cursor:pointer;display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:12px;background:var(--bpc-accent);color:var(--bpc-on-accent);transition:transform .15s,opacity .15s}
+.bpc-send[disabled]{opacity:.35;cursor:default}.bpc-send:not([disabled]):hover{transform:translateY(-1px)}
+.bpc-send:focus-visible{outline:3px solid color-mix(in srgb,var(--bpc-accent) 45%,transparent)}
+.bpc-note{margin:7px 4px 0;font-size:11px;color:var(--bpc-muted);text-align:center}
+.bpc-days{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
+@media (max-width:480px){.bpc[data-open=true]{inset:0;bottom:0}.bpc[data-open=true] .bpc-launch{display:none}
+  .bpc[data-open=true] .bpc-panel{position:fixed;inset:0;width:100%;height:100dvh;border-radius:0;bottom:0}}
+@media (prefers-reduced-motion:reduce){.bpc *{animation:none!important;transition:none!important}}
+`;
+
+const ChatIcon = () => (
+  <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M8 9h8M8 13h5" />
+    <path d="M12 20l-3-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-3l-3 3z" />
+  </svg>
+);
+const CloseIcon = ({ size = 22 }: { size?: number }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
+    <path d="M18 6L6 18M6 6l12 12" />
+  </svg>
+);
+const SendIcon = () => (
+  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M5 12h14M13 6l6 6-6 6" />
+  </svg>
+);
+const SparkIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M12 3l1.9 4.6L18.5 9.5l-4.6 1.9L12 16l-1.9-4.6L5.5 9.5l4.6-1.9L12 3zM19 15l.9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9L19 15z" />
+  </svg>
+);
+
+export function SiteChatPanel({ config, accent, theme = "auto", position = "right", endpoint = "/api/blueprint/chat", offset = 0 }: SiteChatProps) {
+  const [open, setOpen] = useState(false);
+  const [messages, setMessages] = useState<Msg[]>([]);
+  const [conversationId, setConversationId] = useState<string | null>(null);
+  const [draft, setDraft] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [offer, setOffer] = useState<{ booking: boolean } | null>(null);
+  const [stage, setStage] = useState<Stage>("chat");
+  const [leadSent, setLeadSent] = useState(false);
+  const [slots, setSlots] = useState<ChatSlots | null | "loading" | "none">(null);
+  const [day, setDay] = useState(0);
+  const [slot, setSlot] = useState<{ start: string; label: string; date: string } | null>(null);
+  const [details, setDetails] = useState({ name: "", email: "", phone: "", message: "", hp: "" });
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [sending, setSending] = useState(false);
+  const [notice, setNotice] = useState<string | null>(null);
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const launchRef = useRef<HTMLButtonElement>(null);
+  const panelId = useId();
+
+  // Pick up where the visitor left off on another page of the site, for this tab.
+  // Saving waits for this, so the first render's empty chat never overwrites the one being restored.
+  const [restored, setRestored] = useState(false);
+  useEffect(() => {
+    const s = read<Saved>("session", SAVED_KEY);
+    if (s) {
+      setMessages(s.messages.filter((m) => !m.pending));
+      setConversationId(s.conversationId);
+      setLeadSent(s.leadSent);
+    }
+    setRestored(true);
+  }, []);
+  useEffect(() => {
+    if (restored && !busy) write("session", SAVED_KEY, { conversationId, messages: messages.slice(-60), leadSent } satisfies Saved);
+  }, [restored, messages, conversationId, leadSent, busy]);
+  useEffect(() => {
+    bodyRef.current?.scrollTo({ top: bodyRef.current.scrollHeight });
+  }, [messages, offer, stage, slots, notice]);
+  useEffect(() => {
+    if (open && stage === "chat") inputRef.current?.focus();
+  }, [open, stage]);
+
+  const close = useCallback(() => {
+    setOpen(false);
+    launchRef.current?.focus();
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: globalThis.KeyboardEvent) => e.key === "Escape" && close();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, close]);
+
+  async function ask(text: string) {
+    const message = text.replace(/\s+/g, " ").trim().slice(0, MAX_CHARS);
+    if (!message || busy) return;
+    setDraft("");
+    setNotice(null);
+    setOffer(null);
+    const replyId = rid();
+    setMessages((m) => [...m, { id: rid(), role: "visitor", text: message }, { id: replyId, role: "assistant", text: "", pending: true }]);
+    setBusy(true);
+    const update = (fn: (m: Msg) => Msg) => setMessages((list) => list.map((x) => (x.id === replyId ? fn(x) : x)));
+    try {
+      const res = await fetch(endpoint, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ type: "message", conversationId, visitorId: visitorId(), message, pageUrl: window.location.href, hp: details.hp }),
+      });
+      if (!res.ok || !res.body) {
+        const err = ((await res.json().catch(() => null)) as { error?: string } | null)?.error;
+        const text =
+          res.status === 429
+            ? "You're sending messages quickly. Give it a minute, then try again."
+            : err === "conversation_full"
+              ? "This chat has reached its limit. Leave your details and the team will pick it up from here."
+              : "Sorry, the chat isn't available right now. Please try again in a moment.";
+        update((m) => ({ ...m, text, pending: false }));
+        if (err === "conversation_full") setOffer({ booking: config.canBook });
+        return;
+      }
+      await readChatStream(res.body, (e) => {
+        if (e.type === "start") setConversationId(e.conversationId);
+        else if (e.type === "delta") update((m) => ({ ...m, text: m.text + e.text, pending: false }));
+        else if (e.type === "done" && (e.handoff || e.unanswered) && !leadSent) setOffer({ booking: e.booking });
+      });
+      update((m) => ({ ...m, pending: false, text: m.text || "Sorry, I didn't get an answer. Please try again." }));
+    } catch {
+      update((m) => ({ ...m, pending: false, text: m.text || "Sorry, the connection dropped. Please try again." }));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function loadSlots() {
+    setStage("slots");
+    setSlot(null);
+    setSlots("loading");
+    try {
+      const res = await fetch(`${endpoint}?slots=1`);
+      const data = res.ok ? ((await res.json()) as ChatSlots) : null;
+      const days = data?.days.filter((d) => d.slots.length) ?? [];
+      setSlots(data && days.length ? { ...data, days } : "none");
+      setDay(0);
+    } catch {
+      setSlots("none");
+    }
+  }
+
+  function startDetails() {
+    const lastQuestion = [...messages].reverse().find((m) => m.role === "visitor")?.text ?? "";
+    setDetails((d) => ({ ...d, message: d.message || lastQuestion }));
+    setErrors({});
+    setStage("details");
+  }
+
+  async function sendLead(e: FormEvent) {
+    e.preventDefault();
+    if (!conversationId) return;
+    const errs: Record<string, string> = {};
+    if (!details.name.trim()) errs.name = "Add your name";
+    if (!details.email.trim() && !details.phone.trim()) errs.email = "Add an email or phone so the team can reply";
+    if (details.email.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(details.email.trim())) errs.email = "Check the email address";
+    setErrors(errs);
+    if (Object.keys(errs).length) return;
+    setSending(true);
+    try {
+      const res = await fetch(endpoint, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ type: "lead", conversationId, visitorId: visitorId(), ...details, slot: slot?.start, attribution: attribution() }),
+      });
+      const r = (await res.json().catch(() => ({ ok: false, error: "unavailable" }))) as ChatLeadResult;
+      if (r.ok) {
+        setLeadSent(true);
+        setOffer(null);
+        const when = slot ? ` You're booked for ${slot.label} on ${dayLabel(slot.date)}.` : "";
+        setMessages((m) => [...m, { id: rid(), role: "assistant", text: `${r.successMessage}${when}` }]);
+        setStage("chat");
+        return;
+      }
+      if (r.error === "slot_taken") {
+        setNotice("That time was just taken. Pick another.");
+        void loadSlots();
+        return;
+      }
+      if (r.error === "invalid" && r.fields) setErrors(Object.fromEntries(Object.entries(r.fields).map(([k, v]) => [k === "slot" ? "message" : k, v])));
+      else setErrors({ message: r.error === "rate_limited" ? "Too many requests. Try again in a little while." : "Couldn't send. Please try again." });
+    } finally {
+      setSending(false);
+    }
+  }
+
+  function onKey(e: KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+      void ask(draft);
+    }
+  }
+
+  const color = accent ?? config.accent ?? "#2563eb";
+  const style = { "--bpc-accent": color, "--bpc-on-accent": textOn(color), "--bpc-offset": `${offset}px` } as CSSProperties;
+  const daysList = slots && typeof slots === "object" ? slots.days : [];
+  const showChips = !messages.length && config.suggestedQuestions.length > 0;
+
+  return (
+    <div className="bpc" data-theme={theme} data-pos={position} data-open={open} style={style}>
+      <style>{CSS}</style>
+      {open ? (
+        <div className="bpc-panel" id={panelId} role="dialog" aria-label={`Chat with ${config.name}`}>
+          <div className="bpc-head">
+            <span className="bpc-avatar">
+              <SparkIcon />
+            </span>
+            <span className="bpc-title">
+              <b>{config.name}</b>
+              <span>
+                <i className="bpc-dot" aria-hidden /> AI assistant · answers from this website
+              </span>
+            </span>
+            <button type="button" className="bpc-x" onClick={close} aria-label="Close chat">
+              <CloseIcon />
+            </button>
+          </div>
+
+          <div className="bpc-body" ref={bodyRef} aria-live="polite" aria-relevant="additions text">
+            <div className="bpc-msg bpc-a">{config.greeting}</div>
+            {showChips ? (
+              <div className="bpc-chips">
+                {config.suggestedQuestions.map((q) => (
+                  <button key={q} type="button" className="bpc-chip" onClick={() => void ask(q)}>
+                    {q}
+                  </button>
+                ))}
+              </div>
+            ) : null}
+            {messages.map((m) => (
+              <div key={m.id} className={`bpc-msg ${m.role === "visitor" ? "bpc-v" : "bpc-a"}`}>
+                {m.pending && !m.text ? (
+                  <span className="bpc-typing" aria-label={`${config.name} is writing`}>
+                    <i />
+                    <i />
+                    <i />
+                  </span>
+                ) : m.role === "assistant" ? (
+                  linkify(m.text)
+                ) : (
+                  m.text
+                )}
+              </div>
+            ))}
+
+            {offer && stage === "chat" && !busy ? (
+              <div className="bpc-card">
+                <h3>{offer.booking ? "Want to set up a time?" : "Want the team to reach out?"}</h3>
+                <p>
+                  {offer.booking ? "Pick an open time, or leave your details and someone will get back to you." : "Leave your details and someone will get back to you."} This conversation goes with it, so
+                  you won&apos;t have to repeat yourself.
+                </p>
+                <div className="bpc-row">
+                  {offer.booking ? (
+                    <button type="button" className="bpc-btn" onClick={() => void loadSlots()}>
+                      Book a time
+                    </button>
+                  ) : null}
+                  <button type="button" className={`bpc-btn ${offer.booking ? "bpc-ghost" : ""}`} onClick={startDetails}>
+                    Leave my details
+                  </button>
+                  <button type="button" className="bpc-btn bpc-ghost" onClick={() => setOffer(null)}>
+                    Not now
+                  </button>
+                </div>
+              </div>
+            ) : null}
+
+            {stage === "slots" ? (
+              <div className="bpc-card">
+                <h3>Pick a time</h3>
+                {notice ? <p className="bpc-err">{notice}</p> : null}
+                {slots === "loading" ? (
+                  <span className="bpc-typing" aria-label="Loading times">
+                    <i />
+                    <i />
+                    <i />
+                  </span>
+                ) : slots === "none" || !daysList.length ? (
+                  <>
+                    <p>There are no open times in the next week. Leave your details and the team will find one with you.</p>
+                    <div className="bpc-row">
+                      <button type="button" className="bpc-btn" onClick={startDetails}>
+                        Leave my details
+                      </button>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <div className="bpc-days" role="tablist" aria-label="Days">
+                      {daysList.map((d, i) => (
+                        <button key={d.date} type="button" role="tab" aria-selected={i === day} aria-pressed={i === day} className="bpc-chip" onClick={() => setDay(i)}>
+                          {dayLabel(d.date)}
+                        </button>
+                      ))}
+                    </div>
+                    <div className="bpc-chips">
+                      {daysList[day]?.slots.map((s) => (
+                        <button key={s.start} type="button" className="bpc-chip" aria-pressed={slot?.start === s.start} onClick={() => setSlot({ start: s.start, label: s.label, date: daysList[day].date })}>
+                          {s.label}
+                        </button>
+                      ))}
+                    </div>
+                    <div className="bpc-row">
+                      <button type="button" className="bpc-btn" disabled={!slot} onClick={startDetails}>
+                        Continue
+                      </button>
+                      <button type="button" className="bpc-btn bpc-ghost" onClick={() => setStage("chat")}>
+                        Back
+                      </button>
+                    </div>
+                  </>
+                )}
+              </div>
+            ) : null}
+
+            {stage === "details" ? (
+              <form className="bpc-card" onSubmit={(e) => void sendLead(e)} noValidate>
+                <h3>{slot ? `Book ${slot.label}, ${dayLabel(slot.date)}` : "Your details"}</h3>
+                <label className="bpc-field">
+                  Name
+                  <input className="bpc-in" autoComplete="name" value={details.name} onChange={(e) => setDetails({ ...details, name: e.target.value })} maxLength={200} autoFocus />
+                  {errors.name ? <span className="bpc-err">{errors.name}</span> : null}
+                </label>
+                <label className="bpc-field">
+                  Email
+                  <input className="bpc-in" type="email" autoComplete="email" inputMode="email" value={details.email} onChange={(e) => setDetails({ ...details, email: e.target.value })} maxLength={320} />
+                  {errors.email ? <span className="bpc-err">{errors.email}</span> : null}
+                </label>
+                <label className="bpc-field">
+                  Phone
+                  <input className="bpc-in" type="tel" autoComplete="tel" inputMode="tel" value={details.phone} onChange={(e) => setDetails({ ...details, phone: e.target.value })} maxLength={40} />
+                  {errors.phone ? <span className="bpc-err">{errors.phone}</span> : null}
+                </label>
+                <label className="bpc-field">
+                  Message
+                  <textarea className="bpc-in" rows={3} value={details.message} onChange={(e) => setDetails({ ...details, message: e.target.value })} maxLength={2000} />
+                  {errors.message ? <span className="bpc-err">{errors.message}</span> : null}
+                </label>
+                <label className="bpc-hp" aria-hidden>
+                  Leave this empty
+                  <input tabIndex={-1} autoComplete="off" value={details.hp} onChange={(e) => setDetails({ ...details, hp: e.target.value })} />
+                </label>
+                <div className="bpc-row">
+                  <button type="submit" className="bpc-btn" disabled={sending}>
+                    {sending ? "Sending..." : slot ? "Book it" : "Send"}
+                  </button>
+                  <button type="button" className="bpc-btn bpc-ghost" onClick={() => setStage(slot ? "slots" : "chat")}>
+                    Back
+                  </button>
+                </div>
+              </form>
+            ) : null}
+          </div>
+
+          <div className="bpc-foot">
+            <form
+              className="bpc-compose"
+              onSubmit={(e) => {
+                e.preventDefault();
+                void ask(draft);
+              }}
+            >
+              <textarea
+                ref={inputRef}
+                rows={1}
+                value={draft}
+                maxLength={MAX_CHARS}
+                placeholder="Ask a question"
+                aria-label="Your message"
+                onKeyDown={onKey}
+                onChange={(e) => {
+                  setDraft(e.target.value);
+                  e.target.style.height = "auto";
+                  e.target.style.height = `${Math.min(e.target.scrollHeight, 120)}px`;
+                }}
+              />
+              <button type="submit" className="bpc-send" disabled={busy || !draft.trim()} aria-label="Send">
+                <SendIcon />
+              </button>
+            </form>
+            <p className="bpc-note">AI answers from this website&apos;s information. Chats are kept {config.retentionDays} days.</p>
+          </div>
+        </div>
+      ) : null}
+      <button ref={launchRef} type="button" className="bpc-launch" aria-expanded={open} aria-controls={open ? panelId : undefined} aria-label={open ? "Close chat" : `Chat with ${config.name}`} onClick={() => (open ? close() : setOpen(true))}>
+        {!open && !messages.length ? <span className="bpc-pulse" aria-hidden /> : null}
+        {open ? <CloseIcon size={24} /> : <ChatIcon />}
+      </button>
+    </div>
+  );
+}
+
+/** "Thu, Nov 6" from "2026-11-06", read as a calendar day (no time zone shift). */
+function dayLabel(date: string): string {
+  const [y, m, d] = date.split("-").map(Number);
+  return new Date(Date.UTC(y, m - 1, d, 12)).toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric", timeZone: "UTC" });
+}

package/src/site-chat.tsx

@@ -0,0 +1,26 @@
+import { bp, tagsFor } from "./client";
+import type { ChatConfig } from "./chat-types";
+import { SiteChatPanel, type SiteChatProps } from "./site-chat-panel";
+
+/** The chat's settings, cached like other reads and refreshed when they change in Site Manager. Null when off. */
+export async function getChatConfig(): Promise<ChatConfig | null> {
+  try {
+    return await bp<ChatConfig>("/chat", { tags: tagsFor("site_chat") });
+  } catch {
+    // Website Chat is off for the site (403), or Site Manager can't be reached: no chat rather than a broken page.
+    return null;
+  }
+}
+
+/**
+ * Put once inside <body> in app/layout.tsx, with the chat route at app/api/blueprint/chat/route.ts. Shows a chat
+ * button on every page while Website Chat is live in Site Manager, and nothing otherwise.
+ *
+ *   <SiteChat />                          the site's accent from Site Manager, light or dark from the visitor's device
+ *   <SiteChat accent="#0e7c66" theme="light" position="left" />
+ */
+export async function SiteChat(props: Omit<SiteChatProps, "config">) {
+  const config = await getChatConfig();
+  if (!config?.live) return null;
+  return <SiteChatPanel config={config} {...props} />;
+}

package/src/sitemap.ts

@@ -0,0 +1,26 @@
+import type { MetadataRoute } from "next";
+import { bp, tagsFor } from "./client";
+import type { SitemapEntry } from "./types";
+
+/** Pure: Site Manager's entries to Next's sitemap format, plus any extra entries the site adds. */
+export function buildSitemap(entries: SitemapEntry[], extra: MetadataRoute.Sitemap = []): MetadataRoute.Sitemap {
+  const seen = new Set<string>();
+  const out: MetadataRoute.Sitemap = [];
+  for (const e of [...entries.map((x) => ({ url: x.url, lastModified: new Date(x.lastModified) })), ...extra]) {
+    // Absolute and without a trailing slash, the home page included.
+    const url = e.url.replace(/\/+$/, "");
+    if (seen.has(url)) continue;
+    seen.add(url);
+    out.push({ ...e, url });
+  }
+  return out;
+}
+
+/**
+ * For `app/sitemap.ts`: every page Site Manager lists (no noindex, no redirected paths, no pages of sections that
+ * are off), with real last-modified dates.
+ */
+export async function sitemap(extra: MetadataRoute.Sitemap = []): Promise<MetadataRoute.Sitemap> {
+  const entries = (await bp<SitemapEntry[]>("/sitemap", { tags: tagsFor("seo", "redirects") })) ?? [];
+  return buildSitemap(entries, extra);
+}