@oyehello/chat 0.1.0 → 0.2.0

package/README.md

@@ -1,6 +1,8 @@
 # @oyehello/chat
 
-Framework-agnostic embeddable chat for oyehello agents — a `<oyehello-chat>` web component with a working default UI, plus a headless `createChatClient()` for custom UIs. Zero framework dependencies.
+Framework-agnostic embeddable chat for oyehello agents — a `<oyehello-chat>` web component that renders a **floating chat launcher** (bottom-right; click to open a chat window), plus a headless `createChatClient()` for custom UIs. Zero framework dependencies.
+
+The widget connects lazily (a session opens the first time the visitor opens the panel), renders assistant replies as **markdown** (sanitized), auto-scrolls unless the visitor has scrolled up — showing a "new messages" pill instead — and supports Shift+Enter for newlines. Theme the accent with the `--oc-accent` CSS variable. Just drop the tag anywhere on the page; it positions itself.
 
 ## Install
 ```bash
@@ -13,13 +15,13 @@ npm install @oyehello/chat
 <oyehello-chat
   api-key="ohk_pub_…"
   agent-id="agt_…"
-  base-url="https://call.hotreloads.ai"
+  base-url="https://api.oyehello.ai"
 ></oyehello-chat>
 ```
 Or via a plain script tag (no bundler):
 ```html
 <script src="https://unpkg.com/@oyehello/chat"></script>
-<oyehello-chat api-key="ohk_pub_…" agent-id="agt_…" base-url="https://call.hotreloads.ai"></oyehello-chat>
+<oyehello-chat api-key="ohk_pub_…" agent-id="agt_…" base-url="https://api.oyehello.ai"></oyehello-chat>
 ```
 Theme the accent with the `--oc-accent` CSS variable.
 
@@ -28,7 +30,7 @@ The custom element works in React too (React 19 natively; React 18 fine for thes
 ```tsx
 import '@oyehello/chat';
 export default function Chat() {
-  return <oyehello-chat api-key="ohk_pub_…" agent-id="agt_…" base-url="https://call.hotreloads.ai" />;
+  return <oyehello-chat api-key="ohk_pub_…" agent-id="agt_…" base-url="https://api.oyehello.ai" />;
 }
 ```
 TypeScript/TSX users add this ambient declaration once (e.g. `oyehello-chat.d.ts`) so the tag typechecks:
@@ -47,7 +49,7 @@ export {};
 ## Headless (build your own UI)
 ```js
 import { createChatClient } from '@oyehello/chat';
-const chat = createChatClient({ apiKey: 'ohk_pub_…', agentId: 'agt_…', baseUrl: 'https://call.hotreloads.ai' });
+const chat = createChatClient({ apiKey: 'ohk_pub_…', agentId: 'agt_…', baseUrl: 'https://api.oyehello.ai' });
 chat.on((e) => { if (e.type === 'messages') render(e.messages); });
 await chat.start();
 await chat.sendMessage('Hello');

package/dist/index.cjs

@@ -1,5 +1,12 @@
 'use strict';
 
+var marked = require('marked');
+var DOMPurify = require('dompurify');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
+
 // src/errors.ts
 var ChatApiError = class extends Error {
   constructor(message, status, code, meta) {
@@ -105,7 +112,7 @@ async function uploadToPresigned(uploadUrl, file, fetchImpl) {
 var seq = 0;
 var uid = (p) => `${p}_${Date.now().toString(36)}_${(seq++).toString(36)}`;
 function createChatClient(options) {
-  const fetchImpl = options.fetch ?? globalThis.fetch;
+  const fetchImpl = options.fetch ?? globalThis.fetch.bind(globalThis);
   const ES = options.eventSource ?? globalThis.EventSource;
   const maxAttachments = options.maxAttachments ?? 4;
   const maxAttachmentBytes = options.maxAttachmentBytes ?? 1e7;
@@ -281,7 +288,10 @@ function createChatClient(options) {
       return getAttachmentUrl({ baseUrl: options.baseUrl, sessionId: session.sessionId, sessionToken: session.sessionToken, storageRef, fetchImpl });
     },
     async start() {
-      if (state !== "idle") return;
+      if (state === "opening" || state === "ready") return;
+      closed = false;
+      clearReconnect();
+      reconnectAttempts = 0;
       setState("opening");
       try {
         await open();
@@ -343,6 +353,174 @@ function createChatClient(options) {
     }
   };
 }
+marked.marked.setOptions({ gfm: true, breaks: true });
+var hookInstalled = false;
+function installLinkHook() {
+  if (hookInstalled) return;
+  DOMPurify__default.default.addHook("afterSanitizeAttributes", (node) => {
+    if (node.nodeName === "A") {
+      node.setAttribute("target", "_blank");
+      node.setAttribute("rel", "noopener noreferrer nofollow");
+    }
+  });
+  hookInstalled = true;
+}
+var ALLOWED_TAGS = [
+  "p",
+  "br",
+  "strong",
+  "em",
+  "b",
+  "i",
+  "del",
+  "s",
+  "code",
+  "pre",
+  "blockquote",
+  "ul",
+  "ol",
+  "li",
+  "a",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "hr",
+  "table",
+  "thead",
+  "tbody",
+  "tr",
+  "th",
+  "td",
+  "span"
+];
+var ALLOWED_ATTR = ["href", "target", "rel", "class"];
+function renderMarkdown(text) {
+  installLinkHook();
+  const raw = marked.marked.parse(text, { async: false });
+  return DOMPurify__default.default.sanitize(raw, {
+    ALLOWED_TAGS,
+    ALLOWED_ATTR,
+    ALLOW_DATA_ATTR: false,
+    ALLOWED_URI_REGEXP: /^(?:https?:|mailto:)/i
+  });
+}
+
+// src/styles.ts
+var STYLES = `
+  :host {
+    --oc-accent: #2563eb;
+    --oc-fg: #111827;
+    --oc-muted: #6b7280;
+    --oc-surface: #ffffff;
+    --oc-surface-2: #f3f4f6;
+    --oc-border: #e5e7eb;
+    --oc-radius: 16px;
+    position: fixed; right: 20px; bottom: 20px; z-index: 2147483000;
+    font-family: system-ui, -apple-system, sans-serif;
+  }
+  * { box-sizing: border-box; }
+
+  /* Launcher */
+  .launcher {
+    width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
+    background: var(--oc-accent); color: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.25);
+    display: grid; place-items: center; transition: transform .15s ease, opacity .15s ease;
+  }
+  .launcher:hover { transform: scale(1.06); }
+  .launcher svg { width: 28px; height: 28px; }
+  .launcher .badge {
+    position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px;
+    border-radius: 10px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700;
+    display: grid; place-items: center; border: 2px solid var(--oc-surface);
+  }
+
+  /* Panel */
+  .panel {
+    position: absolute; right: 0; bottom: 74px; width: 384px; height: min(600px, calc(100vh - 120px));
+    background: var(--oc-surface); color: var(--oc-fg); border: 1px solid var(--oc-border);
+    border-radius: var(--oc-radius); box-shadow: 0 12px 48px rgba(0,0,0,.22);
+    display: flex; flex-direction: column; overflow: hidden;
+    transform-origin: bottom right; transition: transform .16s ease, opacity .16s ease;
+  }
+  .panel[hidden] { display: none; }
+  .panel.enter { opacity: 0; transform: translateY(8px) scale(.98); }
+
+  .hd { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--oc-border); }
+  .hd .title { font-weight: 700; font-size: 15px; flex: 1; }
+  .hd .close { background: none; border: none; cursor: pointer; color: var(--oc-muted); padding: 4px; border-radius: 6px; display: grid; place-items: center; }
+  .hd .close:hover { background: var(--oc-surface-2); }
+  .hd .close svg { width: 18px; height: 18px; }
+
+  .status { padding: 6px 16px; font-size: 12px; color: var(--oc-muted); background: #f9fafb; border-bottom: 1px solid var(--oc-border); }
+  .err { padding: 8px 16px; font-size: 12px; color: #b91c1c; background: #fef2f2; border-bottom: 1px solid #fecaca; display: flex; align-items: center; gap: 8px; }
+  .err .retry { padding: 3px 10px; font-size: 11px; background: #b91c1c; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
+
+  /* Message list */
+  .body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
+  .b { max-width: 85%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; word-break: break-word; }
+  .b.user { align-self: flex-end; background: var(--oc-accent); color: #fff; border-bottom-right-radius: 4px; }
+  .b.assistant { align-self: flex-start; background: var(--oc-surface-2); color: var(--oc-fg); border-bottom-left-radius: 4px; }
+  .b.human { align-self: flex-start; background: #dbeafe; color: var(--oc-fg); border-bottom-left-radius: 4px; }
+  .b.typing { font-style: italic; color: var(--oc-muted); }
+  .human-label { font-size: 11px; font-weight: 600; opacity: .7; margin-bottom: 2px; }
+
+  /* Markdown inside a bubble */
+  .md > :first-child { margin-top: 0; }
+  .md > :last-child { margin-bottom: 0; }
+  .md p { margin: 0 0 8px; }
+  .md ul, .md ol { margin: 0 0 8px; padding-left: 20px; }
+  .md li { margin: 2px 0; }
+  .md a { color: inherit; text-decoration: underline; }
+  .b.assistant .md a, .b.human .md a { color: var(--oc-accent); }
+  .md code { font-family: ui-monospace, monospace; font-size: 12.5px; background: rgba(0,0,0,.07); padding: 1px 5px; border-radius: 5px; }
+  .md pre { background: #0f172a; color: #e2e8f0; padding: 10px 12px; border-radius: 8px; overflow-x: auto; margin: 0 0 8px; }
+  .md pre code { background: none; padding: 0; color: inherit; }
+  .md blockquote { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid var(--oc-border); color: var(--oc-muted); }
+  .md h1, .md h2, .md h3, .md h4 { margin: 8px 0 6px; font-size: 15px; }
+  .md table { border-collapse: collapse; font-size: 13px; margin: 0 0 8px; display: block; overflow-x: auto; }
+  .md th, .md td { border: 1px solid var(--oc-border); padding: 4px 8px; }
+  .md hr { border: none; border-top: 1px solid var(--oc-border); margin: 8px 0; }
+
+  .src-row { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 6px; max-width: 85%; }
+  .src-chip { font-size: 11px; background: rgba(0,0,0,.06); color: #374151; border-radius: 6px; padding: 2px 8px; cursor: default; }
+  .att-thumb { display: block; max-width: 180px; max-height: 180px; border-radius: 8px; margin-bottom: 6px; }
+  .att-chip { display: inline-block; font-size: 12px; background: rgba(0,0,0,.08); border-radius: 6px; padding: 2px 8px; margin: 0 0 6px; }
+  .b.user .att-chip { background: rgba(255,255,255,.25); }
+
+  /* New-messages pill */
+  .pill {
+    position: absolute; left: 50%; transform: translateX(-50%); bottom: 78px;
+    background: var(--oc-accent); color: #fff; border: none; cursor: pointer;
+    font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
+    box-shadow: 0 4px 14px rgba(0,0,0,.25); display: flex; align-items: center; gap: 6px;
+  }
+  .pill[hidden] { display: none; }
+  .pill svg { width: 13px; height: 13px; }
+
+  /* Composer */
+  form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--oc-border); align-items: flex-end; }
+  textarea {
+    flex: 1; resize: none; max-height: 120px; padding: 9px 11px; border-radius: 10px;
+    border: 1px solid #d1d5db; font: inherit; font-size: 14px; line-height: 1.4; outline: none;
+  }
+  textarea:focus { border-color: var(--oc-accent); }
+  .send { padding: 0 14px; height: 38px; border-radius: 10px; border: none; background: var(--oc-accent); color: #fff; font-weight: 600; cursor: pointer; flex: 0 0 auto; }
+  .send:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
+
+  @media (max-width: 480px) {
+    :host { right: 0; bottom: 0; }
+    .panel { position: fixed; inset: 0; width: 100vw; height: 100dvh; border-radius: 0; bottom: 0; }
+    .launcher { position: fixed; right: 16px; bottom: 16px; }
+    .pill { bottom: 82px; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .launcher, .panel { transition: none; }
+    .body { scroll-behavior: auto; }
+  }
+`;
 
 // src/element.ts
 var HANDOFF_STATUS_TEXT = {
@@ -352,6 +530,11 @@ var HANDOFF_STATUS_TEXT = {
 };
 var ATTACHMENT_ACCEPT = "image/*,application/pdf,text/plain,text/csv";
 var AGENT_TYPING_TEXT = "The agent is typing\u2026";
+var PIN_THRESHOLD = 48;
+var ICON_CHAT = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>';
+var ICON_CLOSE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
+var ICON_DOWN = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>';
+var ICON_CLIP = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>';
 var OyehelloChatElement = class extends HTMLElement {
   static observedAttributes = ["api-key", "agent-id", "base-url", "title"];
   client = null;
@@ -360,21 +543,37 @@ var OyehelloChatElement = class extends HTMLElement {
   state = "idle";
   agentName = null;
   handoffState = "ai";
-  // Transient "agent is typing…" affordance (Phase 7 followups) - never a message, only rendered
-  // while a handoff is active (human/awaiting_human).
   agentTyping = false;
-  // registerTools() may be called before connectedCallback creates the client (e.g. right after
-  // document.createElement, before the element is attached). Buffer until the client exists.
+  lastError = null;
+  // registerTools() may run before connectedCallback creates the client — buffer until it exists.
   pendingTools = {};
-  // Files picked in the file input, staged until the form submits alongside the text.
   pendingFiles = [];
-  // Best-effort local thumbnail cache for images THIS widget instance just sent, keyed by filename -
-  // an instant blob src, no round-trip needed.
   imagePreviewCache = /* @__PURE__ */ new Map();
-  // Read-back URLs resolved lazily (via client.getAttachmentUrl) for images with no local blob (a
-  // reconnect, or an `attachment` SSE echo), keyed by storageRef. Cached across re-renders so the
-  // same image isn't re-fetched on every render() call.
   resolvedUrlCache = /* @__PURE__ */ new Map();
+  // Rendered-markdown cache for FINALIZED assistant/human messages (keyed by message id) so the whole
+  // history isn't re-parsed on every streamed token — only the live streaming message is re-rendered.
+  mdCache = /* @__PURE__ */ new Map();
+  // Widget UI state.
+  open = false;
+  started = false;
+  // lazy: the session opens on first panel open, not on page load
+  pinned = true;
+  // view is at/near the bottom
+  unseen = 0;
+  // messages that arrived while scrolled-up or while closed
+  renderedCount = 0;
+  // message count at the last renderMessages()
+  // Shadow-DOM refs (assigned once in renderShell).
+  panelEl;
+  bodyEl;
+  textareaEl;
+  sendEl;
+  fileEl;
+  pillEl;
+  badgeEl;
+  statusEl;
+  errEl;
+  titleEl;
   connectedCallback() {
     if (!this.shadowRoot) this.attachShadow({ mode: "open" });
     const apiKey = this.getAttribute("api-key");
@@ -389,16 +588,16 @@ var OyehelloChatElement = class extends HTMLElement {
       this.client.registerTools(this.pendingTools);
       this.pendingTools = {};
     }
-    this.off = this.client.on((e) => {
-      if (e.type === "messages") this.messages = e.messages;
-      else if (e.type === "state") this.state = e.state;
-      else if (e.type === "agent") this.agentName = e.agent.name;
-      else if (e.type === "handoff") this.handoffState = e.state;
-      else if (e.type === "agentTyping") this.agentTyping = e.active;
-      this.render();
-    });
-    this.render();
-    void this.client.start();
+    this.off = this.client.on((e) => this.onClientEvent(e));
+    this.renderShell();
+    this.updateTitle();
+    this.updateStatus();
+    let wasOpen = false;
+    try {
+      wasOpen = sessionStorage.getItem(this.openKey()) === "1";
+    } catch {
+    }
+    if (wasOpen) this.openPanel();
   }
   disconnectedCallback() {
     this.off?.();
@@ -412,18 +611,229 @@ var OyehelloChatElement = class extends HTMLElement {
     if (this.client) this.client.registerTools(handlers);
     else Object.assign(this.pendingTools, handlers);
   }
-  send(text, files) {
+  openKey() {
+    return `oyehello-chat:open:${this.getAttribute("agent-id") ?? ""}`;
+  }
+  // ── Shell (built once) ─────────────────────────────────────────────────────────────────────────
+  renderShell() {
+    const root = this.shadowRoot;
+    root.innerHTML = `
+      <style>${STYLES}</style>
+      <button class="launcher" part="launcher" aria-label="Open chat" aria-haspopup="dialog">
+        ${ICON_CHAT}<span class="badge" hidden></span>
+      </button>
+      <div class="panel" part="panel" role="dialog" aria-label="Chat" hidden>
+        <div class="hd"><span class="title">Chat</span><button class="close" aria-label="Close chat">${ICON_CLOSE}</button></div>
+        <div class="status" hidden></div>
+        <div class="err" hidden></div>
+        <div class="body"></div>
+        <button class="pill" type="button" hidden>${ICON_DOWN}<span class="pill-text">New messages</span></button>
+        <form>
+          <button type="button" class="attach" aria-label="Attach a file">${ICON_CLIP}</button>
+          <input type="file" accept="${ATTACHMENT_ACCEPT}" multiple hidden />
+          <textarea aria-label="message" rows="1" placeholder="Type a message\u2026"></textarea>
+          <button type="submit" class="send">Send</button>
+        </form>
+      </div>`;
+    this.panelEl = root.querySelector(".panel");
+    this.bodyEl = root.querySelector(".body");
+    this.textareaEl = root.querySelector("textarea");
+    this.sendEl = root.querySelector(".send");
+    this.fileEl = root.querySelector('input[type="file"]');
+    this.pillEl = root.querySelector(".pill");
+    this.badgeEl = root.querySelector(".badge");
+    this.statusEl = root.querySelector(".status");
+    this.errEl = root.querySelector(".err");
+    this.titleEl = root.querySelector(".title");
+    root.querySelector(".launcher").addEventListener("click", () => this.togglePanel());
+    root.querySelector(".close").addEventListener("click", () => this.closePanel());
+    root.querySelector(".attach").addEventListener("click", () => this.fileEl.click());
+    this.fileEl.addEventListener("change", () => {
+      this.pendingFiles = this.fileEl.files ? Array.from(this.fileEl.files) : [];
+    });
+    this.pillEl.addEventListener("click", () => this.scrollToBottom());
+    this.bodyEl.addEventListener("scroll", () => this.onBodyScroll());
+    root.querySelector("form").addEventListener("submit", (e) => {
+      e.preventDefault();
+      this.doSend();
+    });
+    this.textareaEl.addEventListener("input", () => this.autoGrow());
+    this.textareaEl.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
+        e.preventDefault();
+        this.doSend();
+      }
+    });
+    this.panelEl.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") this.closePanel();
+    });
+  }
+  renderError(msg) {
+    if (!this.shadowRoot) this.attachShadow({ mode: "open" });
+    console.error(msg);
+    this.shadowRoot.innerHTML = `<div style="position:fixed;right:16px;bottom:16px;color:#b91c1c;font:12px system-ui;background:#fef2f2;border:1px solid #fecaca;padding:8px 12px;border-radius:8px">${escapeHtml(msg)}</div>`;
+  }
+  // ── Open / close ───────────────────────────────────────────────────────────────────────────────
+  togglePanel() {
+    this.open ? this.closePanel() : this.openPanel();
+  }
+  openPanel() {
+    this.open = true;
+    try {
+      sessionStorage.setItem(this.openKey(), "1");
+    } catch {
+    }
+    this.panelEl.hidden = false;
+    this.panelEl.classList.add("enter");
+    requestAnimationFrame(() => this.panelEl.classList.remove("enter"));
+    if (!this.started && this.client) {
+      this.started = true;
+      void this.client.start();
+    }
+    this.renderMessages();
+    this.pinned = true;
+    this.unseen = 0;
+    this.updateBadge();
+    this.scrollToBottom();
+    if (!this.textareaEl.disabled) this.textareaEl.focus();
+  }
+  closePanel() {
+    this.open = false;
+    try {
+      sessionStorage.setItem(this.openKey(), "0");
+    } catch {
+    }
+    this.panelEl.hidden = true;
+  }
+  // ── Client events ─────────────────────────────────────────────────────────────────────────────
+  onClientEvent(e) {
+    if (e.type === "messages") this.messages = e.messages;
+    else if (e.type === "state") {
+      this.state = e.state;
+      if (e.state === "ready" || e.state === "opening") this.lastError = null;
+    } else if (e.type === "agent") {
+      this.agentName = e.agent.name;
+      this.updateTitle();
+    } else if (e.type === "handoff") this.handoffState = e.state;
+    else if (e.type === "agentTyping") this.agentTyping = e.active;
+    else if (e.type === "error") this.lastError = e.error.message;
+    this.updateStatus();
+    this.renderMessages();
+  }
+  updateTitle() {
+    if (this.titleEl) this.titleEl.textContent = this.getAttribute("title") ?? this.agentName ?? "Chat";
+  }
+  updateStatus() {
+    if (!this.textareaEl) return;
+    const disabled = this.state !== "ready";
+    this.textareaEl.disabled = disabled;
+    this.sendEl.disabled = disabled;
+    const st = this.state === "opening" ? "Connecting\u2026" : HANDOFF_STATUS_TEXT[this.handoffState];
+    this.statusEl.hidden = !st;
+    this.statusEl.textContent = st ?? "";
+    if (this.state === "error" && this.lastError) {
+      this.errEl.hidden = false;
+      this.errEl.innerHTML = `<span>Couldn't start chat: ${escapeHtml(this.lastError)}</span><button class="retry" type="button">Retry</button>`;
+      this.errEl.querySelector(".retry").addEventListener("click", () => {
+        void this.client?.start();
+      });
+    } else {
+      this.errEl.hidden = true;
+      this.errEl.innerHTML = "";
+    }
+  }
+  // ── Message list + scroll ─────────────────────────────────────────────────────────────────────
+  renderMessages() {
+    if (!this.bodyEl) return;
+    const body = this.bodyEl;
+    const atBottom = this.open && this.pinned;
+    const prevTop = body.scrollTop;
+    const added = this.messages.length - this.renderedCount;
+    const showTyping = this.agentTyping && (this.handoffState === "human" || this.handoffState === "awaiting_human");
+    let html = this.messages.map((m) => this.bubbleHtml(m)).join("");
+    if (showTyping) html += `<div class="b assistant typing">${escapeHtml(AGENT_TYPING_TEXT)}</div>`;
+    body.innerHTML = html;
+    this.hydrateAttachmentImages();
+    this.renderedCount = this.messages.length;
+    if (atBottom) this.scrollToBottom();
+    else {
+      if (this.open) body.scrollTop = prevTop;
+      if (added > 0) this.unseen += added;
+    }
+    this.updatePill();
+    this.updateBadge();
+  }
+  onBodyScroll() {
+    const b = this.bodyEl;
+    const nearBottom = b.scrollHeight - b.scrollTop - b.clientHeight < PIN_THRESHOLD;
+    this.pinned = nearBottom;
+    if (nearBottom) {
+      this.unseen = 0;
+      this.updateBadge();
+    }
+    this.updatePill();
+  }
+  scrollToBottom() {
+    if (!this.bodyEl) return;
+    this.bodyEl.scrollTop = this.bodyEl.scrollHeight;
+    this.pinned = true;
+    this.unseen = 0;
+    this.updatePill();
+    this.updateBadge();
+  }
+  updatePill() {
+    if (!this.pillEl) return;
+    this.pillEl.hidden = !(this.open && !this.pinned && this.unseen > 0);
+    const t = this.pillEl.querySelector(".pill-text");
+    if (t) t.textContent = this.unseen === 1 ? "1 new message" : `${this.unseen} new messages`;
+  }
+  updateBadge() {
+    if (!this.badgeEl) return;
+    const show = !this.open && this.unseen > 0;
+    this.badgeEl.hidden = !show;
+    this.badgeEl.textContent = this.unseen > 9 ? "9+" : String(this.unseen);
+  }
+  // ── Composer ──────────────────────────────────────────────────────────────────────────────────
+  autoGrow() {
+    const ta = this.textareaEl;
+    ta.style.height = "auto";
+    ta.style.height = `${Math.min(ta.scrollHeight, 120)}px`;
+  }
+  doSend() {
+    const text = this.textareaEl.value;
     if (!text.trim()) return;
+    const files = this.pendingFiles;
+    this.pendingFiles = [];
+    this.fileEl.value = "";
     for (const f of files) {
       if (f.type.startsWith("image/") && typeof URL.createObjectURL === "function" && !this.imagePreviewCache.has(f.name)) {
         this.imagePreviewCache.set(f.name, URL.createObjectURL(f));
       }
     }
+    this.pinned = true;
     void this.client?.sendMessage(text, files.length > 0 ? files : void 0);
+    this.textareaEl.value = "";
+    this.textareaEl.style.height = "auto";
   }
-  renderError(msg) {
-    if (!this.shadowRoot) this.attachShadow({ mode: "open" });
-    this.shadowRoot.innerHTML = `<div style="color:#b91c1c;font:13px system-ui;padding:12px">${escapeHtml(msg)}</div>`;
+  // ── Bubble rendering ──────────────────────────────────────────────────────────────────────────
+  bubbleHtml(m) {
+    const atts = (m.attachments ?? []).map((a) => this.renderAttachment(a)).join("");
+    const label = m.role === "human" ? '<div class="human-label">Support</div>' : "";
+    let content;
+    if (m.role === "assistant") {
+      let rendered = m.streaming ? void 0 : this.mdCache.get(m.id);
+      if (rendered === void 0) {
+        rendered = renderMarkdown(m.text || "");
+        if (!m.streaming) this.mdCache.set(m.id, rendered);
+      }
+      content = `<div class="md">${rendered}</div>`;
+    } else {
+      content = escapeHtml(m.text);
+    }
+    const streamingDots = m.streaming ? '<span aria-hidden="true">\u2026</span>' : "";
+    const bubble = `<div class="b ${m.role}">${label}${atts}${content}${streamingDots}</div>`;
+    const sources = m.sources && m.sources.length > 0 ? `<div class="src-row">${m.sources.map((s) => this.renderSource(s)).join("")}</div>` : "";
+    return bubble + sources;
   }
   renderAttachment(a) {
     if (a.contentType.startsWith("image/")) {
@@ -436,9 +846,6 @@ var OyehelloChatElement = class extends HTMLElement {
   renderSource(s) {
     return `<div class="src-chip" title="${escapeHtml(s.snippet)}">${escapeHtml(s.title)}</div>`;
   }
-  // After render() attaches the markup, resolve a read-back URL (via the client) for every image
-  // placeholder that has no src yet - a local blob or a previously-resolved URL already set one, so
-  // those are left untouched (no redundant network call).
   hydrateAttachmentImages() {
     if (!this.client) return;
     const imgs = this.shadowRoot.querySelectorAll("img.att-thumb[data-oc-ref]");
@@ -453,81 +860,6 @@ var OyehelloChatElement = class extends HTMLElement {
       });
     });
   }
-  render() {
-    const title = this.getAttribute("title") ?? this.agentName ?? "Chat";
-    const bubbles = this.messages.map((m) => {
-      const atts = (m.attachments ?? []).map((a) => this.renderAttachment(a)).join("");
-      const label = m.role === "human" ? '<div class="human-label">Support</div>' : "";
-      const bubble = `<div class="b ${m.role}">${label}${atts}${m.text ? escapeHtml(m.text) : ""}${m.streaming ? "\u2026" : ""}</div>`;
-      const sources = m.sources && m.sources.length > 0 ? `<div class="src-row">${m.sources.map((s) => this.renderSource(s)).join("")}</div>` : "";
-      return bubble + sources;
-    }).join("");
-    const statusText = HANDOFF_STATUS_TEXT[this.handoffState];
-    const status = statusText ? `<div class="status">${escapeHtml(statusText)}</div>` : "";
-    const showTyping = this.agentTyping && (this.handoffState === "human" || this.handoffState === "awaiting_human");
-    const typingIndicator = showTyping ? `<div class="b assistant typing">${escapeHtml(AGENT_TYPING_TEXT)}</div>` : "";
-    const disabled = this.state !== "ready" ? "disabled" : "";
-    const prevInput = this.shadowRoot.querySelector('input[aria-label="message"]');
-    const prevValue = prevInput?.value ?? "";
-    const prevSelectionStart = prevInput?.selectionStart ?? null;
-    const prevSelectionEnd = prevInput?.selectionEnd ?? null;
-    const hadFocus = !!prevInput && this.shadowRoot.activeElement === prevInput;
-    this.shadowRoot.innerHTML = `
-      <style>
-        :host{display:block;height:100%;min-height:320px;font-family:system-ui,sans-serif;--oc-accent:#2563eb}
-        .wrap{display:flex;flex-direction:column;height:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
-        .hd{padding:10px 14px;border-bottom:1px solid #e5e7eb;font-weight:600}
-        .body{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
-        .b{max-width:80%;padding:8px 12px;border-radius:12px;white-space:pre-wrap;word-break:break-word}
-        .b.user{align-self:flex-end;background:var(--oc-accent);color:#fff}
-        .b.assistant{align-self:flex-start;background:#f3f4f6;color:#111}
-        .b.human{align-self:flex-start;background:#dbeafe;color:#111}
-        .b.typing{font-style:italic;color:#6b7280;opacity:.85}
-        .human-label{font-size:11px;font-weight:600;opacity:.7;margin-bottom:2px}
-        .status{padding:6px 14px;font-size:12px;color:#6b7280;background:#f9fafb;border-bottom:1px solid #e5e7eb}
-        .att-thumb{display:block;max-width:160px;max-height:160px;border-radius:8px;margin-bottom:6px}
-        .att-chip{display:inline-block;font-size:12px;background:rgba(0,0,0,.08);border-radius:6px;padding:2px 8px;margin:0 0 6px}
-        .b.user .att-chip{background:rgba(255,255,255,.25)}
-        .src-row{align-self:flex-start;display:flex;flex-wrap:wrap;gap:6px;max-width:80%}
-        .src-chip{display:inline-block;font-size:11px;background:rgba(0,0,0,.06);color:#374151;border-radius:6px;padding:2px 8px;cursor:default}
-        form{display:flex;gap:8px;padding:10px;border-top:1px solid #e5e7eb;align-items:center}
-        input[aria-label="message"]{flex:1;padding:8px 10px;border-radius:8px;border:1px solid #d1d5db;font:inherit}
-        input[type="file"]{max-width:120px;font-size:12px}
-        button{padding:8px 14px;border-radius:8px;border:none;background:var(--oc-accent);color:#fff;font-weight:600;cursor:pointer}
-        button:disabled,input:disabled{opacity:.6;cursor:not-allowed}
-      </style>
-      <div class="wrap">
-        <div class="hd">${escapeHtml(title)}</div>
-        ${status}
-        <div class="body">${bubbles}${typingIndicator}</div>
-        <form>
-          <input aria-label="message" placeholder="Type a message\u2026" ${disabled}/>
-          <input type="file" accept="${ATTACHMENT_ACCEPT}" multiple ${disabled}/>
-          <button type="submit" ${disabled}>Send</button>
-        </form>
-      </div>`;
-    const form = this.shadowRoot.querySelector("form");
-    const input = this.shadowRoot.querySelector('input[aria-label="message"]');
-    const fileInput = this.shadowRoot.querySelector('input[type="file"]');
-    fileInput.addEventListener("change", () => {
-      this.pendingFiles = fileInput.files ? Array.from(fileInput.files) : [];
-    });
-    form.addEventListener("submit", (e) => {
-      e.preventDefault();
-      const files = this.pendingFiles;
-      this.pendingFiles = [];
-      this.send(input.value, files);
-      input.value = "";
-    });
-    if (prevValue) {
-      input.value = prevValue;
-      if (prevSelectionStart !== null && prevSelectionEnd !== null) input.setSelectionRange(prevSelectionStart, prevSelectionEnd);
-    }
-    if (hadFocus) input.focus();
-    const body = this.shadowRoot.querySelector(".body");
-    body.scrollTop = body.scrollHeight;
-    this.hydrateAttachmentImages();
-  }
 };
 function escapeHtml(s) {
   return s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);