@guidelytech/guide-runtime 0.1.0 → 0.2.0

package/dist/messenger.js

@@ -0,0 +1,726 @@
+import {
+  createHelpView,
+  el
+} from "./chunk-SLBUGXNH.js";
+
+// src/messenger-styles.ts
+var MESSENGER_STYLES = `
+:host([data-g-messenger="bottom-right"]) .g-launcher.g-pos-bottom-right{right:72px}
+:host([data-g-messenger="bottom-left"]) .g-launcher.g-pos-bottom-left{left:72px}
+.g-m-launcher{position:fixed;z-index:calc(var(--g-z) + 1);pointer-events:auto;width:56px;height:56px;margin:16px;border-radius:999px;border:0;background:var(--g-primary);color:var(--g-primary-text);cursor:pointer;box-shadow:var(--g-shadow);display:inline-flex;align-items:center;justify-content:center;padding:0;transition:transform .15s}
+.g-m-launcher:hover{transform:scale(1.05)}
+.g-m-launcher:focus-visible{outline:2px solid var(--g-primary);outline-offset:3px}
+.g-m-launcher svg{width:26px;height:26px;fill:currentColor}
+.g-m-badge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#e11d48;color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--g-bg)}
+.g-messenger{bottom:76px;height:min(640px,calc(100vh - 110px))}
+.g-m-head{padding:16px 48px 14px 20px;background:var(--g-primary);color:var(--g-primary-text);position:relative;display:flex;align-items:center;gap:8px;min-height:56px}
+.g-m-head .g-close{color:inherit;top:50%;transform:translateY(-50%)}
+.g-m-head .g-close:hover,.g-m-head .g-close:focus-visible{background:rgba(255,255,255,.18);color:inherit}
+.g-m-head h2{margin:0;font-size:16px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.g-m-back{border:0;background:transparent;color:inherit;font:inherit;font-size:18px;cursor:pointer;width:32px;height:32px;border-radius:999px;margin-left:-8px}
+.g-m-back:hover,.g-m-back:focus-visible{background:rgba(255,255,255,.18);outline:none}
+.g-m-main{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
+.g-m-scroll{flex:1;overflow:auto;padding:16px}
+.g-m-hero{font-size:22px;font-weight:700;margin:4px 0 4px}
+.g-m-greet{color:var(--g-muted);margin:0 0 16px}
+.g-m-card{display:block;width:100%;text-align:left;border:1px solid var(--g-border);background:var(--g-bg);color:var(--g-text);border-radius:calc(var(--g-radius) * .8);padding:14px 16px;margin:0 0 12px;font:inherit;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04)}
+.g-m-card:hover{background:var(--g-subtle)}
+.g-m-card:focus-visible{outline:2px solid var(--g-primary);outline-offset:2px}
+.g-m-card-title{font-weight:600}
+.g-m-card-sub{color:var(--g-muted);font-size:13px;margin-top:2px}
+.g-m-row{display:flex;align-items:flex-start;gap:10px}
+.g-m-row .g-m-grow{flex:1;min-width:0}
+.g-m-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.g-m-time{color:var(--g-muted);font-size:12px;flex:none}
+.g-m-dot{width:8px;height:8px;border-radius:999px;background:var(--g-primary);flex:none;margin-top:6px}
+.g-m-tabs{display:flex;border-top:1px solid var(--g-border);background:var(--g-bg)}
+.g-m-tab{flex:1;border:0;background:transparent;color:var(--g-muted);font:inherit;font-size:12px;font-weight:600;padding:10px 4px 12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
+.g-m-tab[aria-selected="true"]{color:var(--g-primary)}
+.g-m-tab:focus-visible{outline:2px solid var(--g-primary);outline-offset:-2px}
+.g-m-tab-icon{font-size:18px;line-height:1}
+.g-m-log{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
+.g-m-msg{max-width:85%;display:flex;flex-direction:column;gap:4px}
+.g-m-msg.g-from-user{align-self:flex-end;align-items:flex-end}
+.g-m-msg.g-from-system{align-self:center;max-width:95%;text-align:center;color:var(--g-muted);font-size:12px}
+.g-m-author{font-size:12px;color:var(--g-muted);display:flex;align-items:center;gap:6px}
+.g-m-ai{font-size:10px;font-weight:700;letter-spacing:.04em;padding:1px 5px;border-radius:4px;background:var(--g-subtle);color:var(--g-muted)}
+.g-m-bubble{padding:10px 12px;border-radius:14px;background:var(--g-subtle);color:var(--g-text);overflow-wrap:anywhere}
+.g-from-user .g-m-bubble{background:var(--g-primary);color:var(--g-primary-text)}
+.g-from-user .g-m-bubble a{color:inherit}
+.g-m-bubble p{margin:0 0 8px}.g-m-bubble p:last-child{margin:0}
+.g-m-bubble ul,.g-m-bubble ol{margin:4px 0 8px;padding-left:20px}
+.g-m-bubble code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:color-mix(in srgb,var(--g-text) 8%,transparent);padding:1px 4px;border-radius:4px}
+.g-m-bubble a{color:var(--g-primary)}
+.g-m-failed .g-m-bubble{opacity:.7;font-style:italic}
+.g-m-typing{display:inline-flex;gap:4px;padding:4px 0}
+.g-m-typing span{width:6px;height:6px;border-radius:999px;background:var(--g-muted);animation:g-m-bounce 1s infinite}
+.g-m-typing span:nth-child(2){animation-delay:.15s}.g-m-typing span:nth-child(3){animation-delay:.3s}
+@keyframes g-m-bounce{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
+@media (prefers-reduced-motion: reduce){.g-m-typing span{animation:none}.g-m-launcher{transition:none}}
+.g-m-chips{display:flex;flex-direction:column;gap:6px;margin-top:2px}
+.g-m-chip{display:flex;align-items:center;gap:8px;text-align:left;border:1px solid var(--g-border);background:var(--g-bg);color:var(--g-text);border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;cursor:pointer}
+.g-m-chip:hover{background:var(--g-subtle)}
+.g-m-chip:focus-visible{outline:2px solid var(--g-primary);outline-offset:2px}
+.g-m-chip.g-m-guide{border-color:var(--g-primary);color:var(--g-primary);font-weight:600}
+.g-m-foot{border-top:1px solid var(--g-border);padding:10px 12px 12px;background:var(--g-bg)}
+.g-m-compose{display:flex;align-items:flex-end;gap:8px}
+.g-m-compose textarea{flex:1;resize:none;min-height:40px;max-height:120px;border:1px solid var(--g-border);border-radius:10px;padding:9px 10px;font:inherit;font-size:14px;color:var(--g-text);background:var(--g-bg)}
+.g-m-compose textarea:focus-visible{outline:2px solid var(--g-primary);outline-offset:1px}
+.g-m-send{width:40px;height:40px;border-radius:999px;border:0;background:var(--g-primary);color:var(--g-primary-text);cursor:pointer;font-size:18px;flex:none}
+.g-m-send:disabled{opacity:.45;cursor:not-allowed}
+.g-m-send:focus-visible{outline:2px solid var(--g-primary);outline-offset:2px}
+.g-m-human{border:0;background:transparent;color:var(--g-muted);font:inherit;font-size:12px;cursor:pointer;padding:6px 2px 0;text-decoration:underline}
+.g-m-human:hover{color:var(--g-text)}
+.g-m-rate{text-align:center;padding:4px 0 2px;font-size:13px;color:var(--g-muted)}
+.g-m-rate button{border:0;background:transparent;font-size:22px;cursor:pointer;padding:4px 8px;border-radius:8px}
+.g-m-rate button:hover,.g-m-rate button:focus-visible{background:var(--g-subtle);outline:none}
+.g-m-note{color:var(--g-muted);font-size:12px;margin-top:6px}
+.g-m-empty{color:var(--g-muted);text-align:center;padding:24px 8px}
+`;
+
+// src/render-safe.ts
+var CITATION = /\s*\[\[article:[^\]]*\]\]/g;
+var INLINE = /\*\*([^*\n]+)\*\*|`([^`\n]+)`|(!?)\[([^\]\n]{1,200})\]\((https?:\/\/[^\s)]+)\)|(https?:\/\/[^\s<>()"']+[^\s<>().,;:!?'"])/g;
+function stripCitationMarkers(text) {
+  return text.replace(CITATION, "");
+}
+function safeHttpUrl(raw) {
+  try {
+    const u = new URL(raw);
+    return u.protocol === "http:" || u.protocol === "https:" ? u.href : null;
+  } catch {
+    return null;
+  }
+}
+function link(doc, label, href) {
+  const url = safeHttpUrl(href);
+  if (!url) return doc.createTextNode(label);
+  const a = doc.createElement("a");
+  a.href = url;
+  a.target = "_blank";
+  a.rel = "noopener noreferrer nofollow";
+  a.textContent = label;
+  return a;
+}
+function appendInline(doc, parent, text) {
+  let last = 0;
+  for (const m of text.matchAll(INLINE)) {
+    const start = m.index ?? 0;
+    if (start > last) parent.appendChild(doc.createTextNode(text.slice(last, start)));
+    if (m[1] !== void 0) {
+      const b = doc.createElement("strong");
+      b.textContent = m[1];
+      parent.appendChild(b);
+    } else if (m[2] !== void 0) {
+      const c = doc.createElement("code");
+      c.textContent = m[2];
+      parent.appendChild(c);
+    } else if (m[4] !== void 0 && m[5] !== void 0) {
+      parent.appendChild(m[3] ? doc.createTextNode(m[4]) : link(doc, m[4], m[5]));
+    } else if (m[6] !== void 0) {
+      parent.appendChild(link(doc, m[6], m[6]));
+    }
+    last = start + m[0].length;
+  }
+  if (last < text.length) parent.appendChild(doc.createTextNode(text.slice(last)));
+}
+var BULLET = /^\s*[-*•]\s+/;
+var NUMBERED = /^\s*\d{1,3}[.)]\s+/;
+function renderSafeText(doc, text) {
+  const frag = doc.createDocumentFragment();
+  const blocks = stripCitationMarkers(text).replace(/\r\n?/g, "\n").trim().split(/\n{2,}/);
+  for (const block of blocks) {
+    if (!block.trim()) continue;
+    const lines = block.split("\n");
+    if (lines.every((l) => BULLET.test(l)) || lines.every((l) => NUMBERED.test(l))) {
+      const ordered = NUMBERED.test(lines[0]);
+      const list = doc.createElement(ordered ? "ol" : "ul");
+      for (const line of lines) {
+        const li = doc.createElement("li");
+        appendInline(doc, li, line.replace(ordered ? NUMBERED : BULLET, ""));
+        list.appendChild(li);
+      }
+      frag.appendChild(list);
+      continue;
+    }
+    const p = doc.createElement("p");
+    lines.forEach((line, i) => {
+      if (i) p.appendChild(doc.createElement("br"));
+      appendInline(doc, p, line);
+    });
+    frag.appendChild(p);
+  }
+  return frag;
+}
+
+// src/messenger.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+function chatIcon(doc) {
+  const svg = doc.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("aria-hidden", "true");
+  const path = doc.createElementNS(SVG_NS, "path");
+  path.setAttribute("d", "M12 3C6.5 3 2 6.8 2 11.5c0 2.4 1.2 4.6 3.1 6.1L4.5 21l3.9-2c1.1.3 2.3.5 3.6.5 5.5 0 10-3.8 10-8.5S17.5 3 12 3z");
+  svg.appendChild(path);
+  return svg;
+}
+function relativeTime(iso, now = Date.now()) {
+  const s = Math.max(0, Math.round((now - Date.parse(iso)) / 1e3));
+  if (!Number.isFinite(s) || s < 60) return "now";
+  if (s < 3600) return `${Math.floor(s / 60)}m`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h`;
+  return `${Math.floor(s / 86400)}d`;
+}
+function ensureStyles(scope) {
+  const root = scope.getRootNode();
+  const container = "host" in root ? root : scope.ownerDocument.head;
+  if (container.querySelector?.("style[data-g-messenger]")) return;
+  const style = scope.ownerDocument.createElement("style");
+  style.setAttribute("data-g-messenger", "");
+  style.textContent = MESSENGER_STYLES;
+  container.appendChild(style);
+}
+function renderMessenger(options) {
+  const { scope, config, api } = options;
+  const doc = scope.ownerDocument;
+  const poll = options.pollMs ?? { thread: 5e3, background: 6e4 };
+  ensureStyles(scope);
+  let open = false;
+  let destroyed = false;
+  let view = { kind: "tab", tab: "home" };
+  let conversations = [];
+  let messages = [];
+  let current = null;
+  const streaming = /* @__PURE__ */ new Map();
+  let sending = false;
+  let draft = "";
+  let articles = null;
+  let articlesLoading = false;
+  let threadTimer = null;
+  let backgroundTimer = null;
+  let threadSeq = 0;
+  const pos = `g-pos-${config.launcher.position}`;
+  const rootNode = scope.getRootNode();
+  const shadowHost = "host" in rootNode ? rootNode.host : null;
+  shadowHost?.setAttribute("data-g-messenger", config.launcher.position);
+  const root = el(doc, "div", "g-messenger-root");
+  const launcher = el(doc, "button", `g-m-launcher ${pos}`);
+  launcher.type = "button";
+  launcher.setAttribute("aria-label", `Open ${config.name}`);
+  launcher.setAttribute("aria-expanded", "false");
+  launcher.appendChild(chatIcon(doc));
+  const badge = el(doc, "span", "g-m-badge");
+  badge.hidden = true;
+  launcher.appendChild(badge);
+  if (options.hideLauncher) launcher.hidden = true;
+  const panel = el(doc, "div", `g-panel g-messenger ${pos}`);
+  panel.setAttribute("role", "dialog");
+  panel.setAttribute("aria-label", config.name);
+  panel.hidden = true;
+  const head = el(doc, "div", "g-m-head");
+  const main = el(doc, "div", "g-m-main");
+  const tabs = el(doc, "div", "g-m-tabs");
+  tabs.setAttribute("role", "tablist");
+  panel.append(head, main, tabs);
+  root.append(launcher, panel);
+  scope.appendChild(root);
+  const rcExtras = (ids = []) => ids.map((id) => options.guides?.find((g) => g.id === id || g.key === id)).filter((g) => !!g);
+  const help = createHelpView({
+    doc,
+    data: () => ({
+      collections: articles?.collections ?? options.resourceCenter?.collections ?? [],
+      articles: articles?.articles ?? options.resourceCenter?.articles ?? [],
+      recommended: rcExtras(options.resourceCenter?.recommendedGuideIds),
+      checklists: rcExtras(options.resourceCenter?.checklistGuideIds),
+      faqs: options.resourceCenter?.faqs,
+      links: options.resourceCenter?.links
+    }),
+    search: (q) => api.searchArticles(q),
+    loadArticle: (id) => api.getArticle(id),
+    onStartGuide: (id) => {
+      setOpen(false);
+      options.onStartGuide?.(id);
+    },
+    onOpenChecklist: (id) => {
+      setOpen(false);
+      options.onOpenChecklist?.(id);
+    },
+    onArticleView: options.onArticleView
+  });
+  const unreadTotal = () => conversations.reduce((n, c) => n + (c.unread > 0 ? 1 : 0), 0);
+  const updateBadge = () => {
+    const n = unreadTotal();
+    badge.hidden = n === 0 || open;
+    badge.textContent = n > 9 ? "9+" : String(n);
+    launcher.setAttribute("aria-label", n ? `Open ${config.name}, ${n} unread` : `Open ${config.name}`);
+  };
+  const upsertConversation = (c) => {
+    conversations = [c, ...conversations.filter((x) => x.id !== c.id)].sort((a, b) => b.lastMessageAt.localeCompare(a.lastMessageAt));
+    if (current?.id === c.id) current = c;
+    updateBadge();
+  };
+  const upsertMessage = (m) => {
+    const i = messages.findIndex((x) => x.id === m.id);
+    if (i >= 0) messages[i] = m;
+    else messages.push(m);
+    messages.sort((a, b) => a.createdAt.localeCompare(b.createdAt));
+    if (m.status !== "pending") streaming.delete(m.id);
+  };
+  const loadArticles = () => {
+    if (articles || articlesLoading) return;
+    articlesLoading = true;
+    api.listArticles().then((res) => {
+      articles = res;
+      if (view.kind === "tab" && view.tab === "help") help.render();
+    }).catch(() => {
+    }).finally(() => articlesLoading = false);
+  };
+  const refreshConversations = () => api.listConversations().then((list) => {
+    conversations = [...list].sort((a, b) => b.lastMessageAt.localeCompare(a.lastMessageAt));
+    updateBadge();
+    if (open && view.kind === "tab" && view.tab !== "help") render();
+  }).catch(() => {
+  });
+  function renderHead(title, back) {
+    head.textContent = "";
+    if (back) {
+      const b = el(doc, "button", "g-m-back", "\u2190");
+      b.type = "button";
+      b.setAttribute("aria-label", "Back");
+      b.addEventListener("click", back);
+      head.appendChild(b);
+    }
+    head.appendChild(el(doc, "h2", "", title));
+    const close = el(doc, "button", "g-close", "\xD7");
+    close.type = "button";
+    close.setAttribute("aria-label", "Close");
+    close.addEventListener("click", () => setOpen(false));
+    head.appendChild(close);
+  }
+  function renderTabs() {
+    tabs.textContent = "";
+    tabs.hidden = view.kind === "thread";
+    const items = [
+      ["home", "\u2302", "Home"],
+      ["messages", "\u{1F4AC}", "Messages"],
+      ["help", "?", "Help"]
+    ];
+    for (const [tab, icon, label] of items) {
+      const b = el(doc, "button", "g-m-tab");
+      b.type = "button";
+      b.setAttribute("role", "tab");
+      b.setAttribute("aria-selected", String(view.kind === "tab" && view.tab === tab));
+      const i = el(doc, "span", "g-m-tab-icon", icon);
+      i.setAttribute("aria-hidden", "true");
+      b.append(i, el(doc, "span", "", label));
+      b.addEventListener("click", () => go({ kind: "tab", tab }));
+      tabs.appendChild(b);
+    }
+  }
+  function conversationCard(c) {
+    const card = el(doc, "button", "g-m-card");
+    card.type = "button";
+    const row = el(doc, "div", "g-m-row");
+    if (c.unread > 0) row.appendChild(el(doc, "span", "g-m-dot"));
+    const text = el(doc, "div", "g-m-grow");
+    text.append(el(doc, "div", "g-m-card-title g-m-ellipsis", c.subject || "Conversation"), el(doc, "div", "g-m-card-sub g-m-ellipsis", c.lastMessagePreview));
+    row.append(text, el(doc, "span", "g-m-time", relativeTime(c.lastMessageAt)));
+    card.appendChild(row);
+    card.setAttribute("aria-label", `${c.subject || "Conversation"}${c.unread ? ", unread" : ""}`);
+    card.addEventListener("click", () => go({ kind: "thread", conversationId: c.id }));
+    return card;
+  }
+  function renderHome() {
+    renderHead(config.name);
+    const scroll = el(doc, "div", "g-m-scroll");
+    scroll.append(el(doc, "div", "g-m-hero", "Hi there \u{1F44B}"), el(doc, "p", "g-m-greet", config.greeting));
+    const ask = el(doc, "button", "g-m-card");
+    ask.type = "button";
+    ask.append(el(doc, "div", "g-m-card-title", "Ask a question"), el(doc, "div", "g-m-card-sub", config.aiAvailable ? `${config.name} answers right away, and the team can help too` : "The team will reply here"));
+    ask.addEventListener("click", () => go({ kind: "thread", conversationId: null }));
+    scroll.appendChild(ask);
+    const recent = conversations[0];
+    if (recent) {
+      scroll.appendChild(el(doc, "div", "g-rc-section", "Recent conversation"));
+      scroll.appendChild(conversationCard(recent));
+    }
+    const search = el(doc, "button", "g-m-card");
+    search.type = "button";
+    search.append(el(doc, "div", "g-m-card-title", "Search for help"), el(doc, "div", "g-m-card-sub", "Browse articles and guides"));
+    search.addEventListener("click", () => go({ kind: "tab", tab: "help" }));
+    scroll.appendChild(search);
+    main.appendChild(scroll);
+  }
+  function renderMessagesTab() {
+    renderHead("Messages");
+    const scroll = el(doc, "div", "g-m-scroll");
+    if (!conversations.length) scroll.appendChild(el(doc, "div", "g-m-empty", "No conversations yet."));
+    conversations.forEach((c) => scroll.appendChild(conversationCard(c)));
+    const start = el(doc, "button", "g-btn g-btn-primary", "Send us a message");
+    start.type = "button";
+    start.style.width = "100%";
+    start.addEventListener("click", () => go({ kind: "thread", conversationId: null }));
+    scroll.appendChild(start);
+    main.appendChild(scroll);
+  }
+  function renderHelpTab() {
+    renderHead("Help");
+    loadArticles();
+    help.render();
+    main.appendChild(help.el);
+  }
+  let log = null;
+  let foot = null;
+  let textarea = null;
+  let sendButton = null;
+  function messageNode(m) {
+    const wrap = el(doc, "div", `g-m-msg g-from-${m.author}${m.status === "failed" ? " g-m-failed" : ""}`);
+    if (m.author === "system") {
+      wrap.textContent = m.body;
+      return wrap;
+    }
+    if (m.author !== "user") {
+      const author = el(doc, "div", "g-m-author", m.author === "scout" ? config.name : m.authorName || "Support team");
+      if (m.author === "scout") author.appendChild(el(doc, "span", "g-m-ai", "AI"));
+      wrap.appendChild(author);
+    }
+    const bubble = el(doc, "div", "g-m-bubble");
+    const live = streaming.get(m.id);
+    if (m.status === "pending" && !live) {
+      const dots = el(doc, "span", "g-m-typing");
+      dots.setAttribute("aria-label", `${config.name} is typing`);
+      dots.append(el(doc, "span"), el(doc, "span"), el(doc, "span"));
+      bubble.appendChild(dots);
+    } else if (m.status === "failed") {
+      bubble.textContent = "This reply couldn't be completed.";
+    } else {
+      bubble.appendChild(renderSafeText(doc, live ?? m.body));
+    }
+    if (m.status === "pending") bubble.setAttribute("aria-busy", "true");
+    bubble.dataset.messageId = m.id;
+    wrap.appendChild(bubble);
+    if (m.citations.length || m.suggestedGuides.length) {
+      const chips = el(doc, "div", "g-m-chips");
+      for (const g of m.suggestedGuides) {
+        const b = el(doc, "button", "g-m-chip g-m-guide", `\u25B6 Show me: ${g.name}`);
+        b.type = "button";
+        b.addEventListener("click", () => {
+          setOpen(false);
+          options.onStartGuide?.(g.key);
+        });
+        chips.appendChild(b);
+      }
+      for (const c of m.citations) {
+        const b = el(doc, "button", "g-m-chip", `\u{1F4C4} ${c.title}`);
+        b.type = "button";
+        b.addEventListener("click", () => openArticle(c.articleId));
+        chips.appendChild(b);
+      }
+      wrap.appendChild(chips);
+    }
+    return wrap;
+  }
+  function renderLog() {
+    if (!log) return;
+    const atBottom = log.scrollHeight - log.scrollTop - log.clientHeight < 40;
+    log.textContent = "";
+    if (!messages.length) {
+      const intro = { id: "intro", author: config.aiAvailable ? "scout" : "agent", authorName: "Support team", body: config.greeting, citations: [], suggestedGuides: [], status: "complete", createdAt: (/* @__PURE__ */ new Date()).toISOString() };
+      log.appendChild(messageNode(intro));
+    }
+    messages.forEach((m) => log.appendChild(messageNode(m)));
+    if (atBottom || sending) log.scrollTop = log.scrollHeight;
+    renderFoot();
+  }
+  function renderFoot() {
+    if (!foot || !textarea || !sendButton) return;
+    sendButton.disabled = sending || !textarea.value.trim();
+    textarea.disabled = sending;
+    for (const extra of Array.from(foot.querySelectorAll(".g-m-human,.g-m-rate,.g-m-note"))) extra.remove();
+    if (current?.status === "closed" && current.rating == null) {
+      const rate = el(doc, "div", "g-m-rate", "How was this conversation? ");
+      for (const [score, face, label] of [
+        [1, "\u{1F61E}", "Bad"],
+        [3, "\u{1F610}", "OK"],
+        [5, "\u{1F600}", "Great"]
+      ]) {
+        const b = el(doc, "button", "", face);
+        b.type = "button";
+        b.setAttribute("aria-label", label);
+        b.addEventListener("click", () => {
+          if (!current) return;
+          const id = current.id;
+          current = { ...current, rating: score };
+          upsertConversation(current);
+          renderFoot();
+          api.rate(id, score).catch(() => {
+          });
+        });
+        rate.appendChild(b);
+      }
+      foot.prepend(rate);
+    } else if (current && current.rating != null && current.status === "closed") {
+      foot.prepend(el(doc, "div", "g-m-note", "Thanks for the feedback!"));
+    }
+    if (config.handoffEnabled && config.aiAvailable && current?.status === "bot" && !sending) {
+      const human = el(doc, "button", "g-m-human", "Talk to a person");
+      human.type = "button";
+      human.addEventListener("click", () => {
+        if (!current) return;
+        const id = current.id;
+        human.disabled = true;
+        api.handoff(id).then((res) => {
+          if (current?.id !== id) return;
+          upsertConversation(res.conversation);
+          res.messages.forEach(upsertMessage);
+          renderLog();
+        }).catch(() => human.disabled = false);
+      });
+      foot.appendChild(human);
+    }
+  }
+  function renderThread(conversationId) {
+    renderHead(current?.subject || (conversationId ? "Conversation" : "New conversation"), () => go({ kind: "tab", tab: "messages" }));
+    log = el(doc, "div", "g-m-log");
+    log.setAttribute("role", "log");
+    log.setAttribute("aria-live", "polite");
+    foot = el(doc, "div", "g-m-foot");
+    const compose = el(doc, "form", "g-m-compose");
+    textarea = el(doc, "textarea");
+    textarea.rows = 1;
+    textarea.maxLength = 4e3;
+    textarea.placeholder = current?.status === "open" ? "Reply to the team\u2026" : "Ask a question\u2026";
+    textarea.setAttribute("aria-label", "Message");
+    textarea.value = draft;
+    sendButton = el(doc, "button", "g-m-send", "\u2191");
+    sendButton.type = "submit";
+    sendButton.setAttribute("aria-label", "Send");
+    compose.append(textarea, sendButton);
+    foot.appendChild(compose);
+    textarea.addEventListener("input", () => {
+      draft = textarea.value;
+      if (sendButton) sendButton.disabled = sending || !draft.trim();
+    });
+    textarea.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
+        e.preventDefault();
+        submit();
+      }
+    });
+    compose.addEventListener("submit", (e) => {
+      e.preventDefault();
+      submit();
+    });
+    main.append(log, foot);
+    renderLog();
+    textarea.focus?.({ preventScroll: true });
+  }
+  function render() {
+    if (destroyed) return;
+    main.textContent = "";
+    log = foot = null;
+    textarea = null;
+    sendButton = null;
+    if (view.kind === "thread") renderThread(view.conversationId);
+    else if (view.tab === "home") renderHome();
+    else if (view.tab === "messages") renderMessagesTab();
+    else renderHelpTab();
+    renderTabs();
+  }
+  const handlers = (seq) => ({
+    onConversation(c) {
+      if (seq !== threadSeq) return;
+      current = c;
+      view = { kind: "thread", conversationId: c.id };
+      upsertConversation(c);
+    },
+    onMessage(m) {
+      if (seq !== threadSeq) return;
+      upsertMessage(m);
+      renderLog();
+    },
+    onDelta(id, text) {
+      if (seq !== threadSeq) return;
+      streaming.set(id, (streaming.get(id) ?? "") + text);
+      const bubble = log?.querySelector(`[data-message-id="${id}"]`);
+      if (!bubble) return renderLog();
+      bubble.textContent = "";
+      bubble.appendChild(renderSafeText(doc, streaming.get(id)));
+      if (log) log.scrollTop = log.scrollHeight;
+    },
+    onDone(m, c) {
+      if (seq !== threadSeq) return;
+      if (m) {
+        upsertMessage(m);
+        options.onMessage?.(m, c);
+      }
+      upsertConversation({ ...c, unread: 0 });
+      current = { ...c, unread: 0 };
+    },
+    onError() {
+    }
+  });
+  function submit() {
+    if (!textarea || sending) return;
+    const text = textarea.value.trim();
+    if (!text) return;
+    sending = true;
+    draft = "";
+    textarea.value = "";
+    renderFoot();
+    const seq = threadSeq;
+    const h = handlers(seq);
+    const done = current ? api.send(current.id, text, h) : api.start(text, h);
+    done.catch(() => {
+      if (seq !== threadSeq) return;
+      draft = text;
+      if (textarea) textarea.value = text;
+      const note = { id: `local_${Date.now()}`, author: "system", body: "Your message couldn't be sent. Please try again.", citations: [], suggestedGuides: [], status: "complete", createdAt: (/* @__PURE__ */ new Date()).toISOString() };
+      upsertMessage(note);
+    }).finally(() => {
+      if (seq !== threadSeq) return;
+      sending = false;
+      streaming.clear();
+      if (view.kind === "thread") {
+        if (current) renderHead(current.subject || "Conversation", () => go({ kind: "tab", tab: "messages" }));
+        renderLog();
+      }
+      scheduleThreadPoll();
+    });
+  }
+  function scheduleThreadPoll() {
+    if (threadTimer) clearTimeout(threadTimer);
+    threadTimer = null;
+    if (!open || view.kind !== "thread" || !current || destroyed) return;
+    threadTimer = setTimeout(pollThread, poll.thread);
+  }
+  function pollThread() {
+    if (!current || sending) return scheduleThreadPoll();
+    const seq = threadSeq;
+    const pending = messages.find((m) => m.status === "pending");
+    const last = messages.filter((m) => !m.id.startsWith("local_")).at(-1);
+    const since = pending ? new Date(Date.parse(pending.createdAt) - 1).toISOString() : last?.createdAt ?? null;
+    api.loadMessages(current.id, since).then((res) => {
+      if (seq !== threadSeq) return;
+      const before = messages.length;
+      const changed = res.messages.some((m) => {
+        const prev = messages.find((x) => x.id === m.id);
+        return !prev || prev.status !== m.status || prev.body !== m.body;
+      });
+      res.messages.forEach(upsertMessage);
+      upsertConversation({ ...res.conversation, unread: 0 });
+      current = { ...res.conversation, unread: 0 };
+      if (changed || messages.length !== before) {
+        renderLog();
+        res.messages.filter((m) => m.author !== "user").forEach((m) => options.onMessage?.(m, res.conversation));
+      } else renderFoot();
+    }).catch(() => {
+    }).finally(scheduleThreadPoll);
+  }
+  function go(next) {
+    threadSeq++;
+    if (threadTimer) clearTimeout(threadTimer);
+    threadTimer = null;
+    if (view.kind === "tab" && view.tab === "help" && !(next.kind === "tab" && next.tab === "help")) help.reset();
+    view = next;
+    if (next.kind === "thread") {
+      messages = [];
+      streaming.clear();
+      sending = false;
+      current = next.conversationId ? conversations.find((c) => c.id === next.conversationId) ?? null : null;
+      render();
+      if (next.conversationId) {
+        const seq = threadSeq;
+        api.loadMessages(next.conversationId).then((res) => {
+          if (seq !== threadSeq) return;
+          res.messages.forEach(upsertMessage);
+          current = { ...res.conversation, unread: 0 };
+          upsertConversation(current);
+          renderHead(current.subject || "Conversation", () => go({ kind: "tab", tab: "messages" }));
+          renderLog();
+        }).catch(() => {
+        }).finally(scheduleThreadPoll);
+      }
+    } else {
+      draft = "";
+      render();
+    }
+  }
+  function openArticle(id) {
+    go({ kind: "tab", tab: "help" });
+    help.openArticle(id);
+  }
+  function startBackgroundPoll() {
+    if (backgroundTimer) clearInterval(backgroundTimer);
+    backgroundTimer = setInterval(() => {
+      if (!open && conversations.length && !destroyed) void refreshConversations();
+    }, poll.background);
+  }
+  const setOpen = (v) => {
+    if (open === v || destroyed) return;
+    open = v;
+    panel.hidden = !v;
+    launcher.setAttribute("aria-expanded", String(v));
+    launcher.setAttribute("aria-label", v ? `Close ${config.name}` : `Open ${config.name}`);
+    updateBadge();
+    if (v) {
+      render();
+      void refreshConversations();
+      if (view.kind === "thread") scheduleThreadPoll();
+      options.onOpen?.();
+    } else {
+      if (threadTimer) clearTimeout(threadTimer);
+      threadTimer = null;
+      options.onClose?.();
+    }
+  };
+  launcher.addEventListener("click", () => setOpen(!open));
+  const onKey = (e) => {
+    if (e.key === "Escape") {
+      e.stopPropagation();
+      setOpen(false);
+      launcher.focus();
+    }
+  };
+  panel.addEventListener("keydown", onKey);
+  void refreshConversations();
+  startBackgroundPoll();
+  return {
+    el: root,
+    open(tab) {
+      if (tab) view = { kind: "tab", tab };
+      if (open && tab) render();
+      setOpen(true);
+    },
+    close: () => setOpen(false),
+    toggle: () => setOpen(!open),
+    isOpen: () => open,
+    showNewMessage(text) {
+      setOpen(true);
+      go({ kind: "thread", conversationId: null });
+      if (text && textarea) {
+        textarea.value = text.slice(0, 4e3);
+        draft = textarea.value;
+        renderFoot();
+      }
+    },
+    openArticle(id) {
+      setOpen(true);
+      openArticle(id);
+    },
+    destroy() {
+      destroyed = true;
+      if (threadTimer) clearTimeout(threadTimer);
+      if (backgroundTimer) clearInterval(backgroundTimer);
+      panel.removeEventListener("keydown", onKey);
+      help.destroy();
+      shadowHost?.removeAttribute("data-g-messenger");
+      root.remove();
+    }
+  };
+}
+export {
+  relativeTime,
+  renderMessenger
+};
+//# sourceMappingURL=messenger.js.map