@oyehello/chat 0.1.1 → 0.3.0

package/dist/index.js

@@ -1,3 +1,6 @@
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+
 // src/errors.ts
 var ChatApiError = class extends Error {
   constructor(message, status, code, meta) {
@@ -157,7 +160,7 @@ function createChatClient(options) {
       seenTurnIds.add(ev.turnId);
       const m = streamingId ? messages.find((x) => x.id === streamingId) : void 0;
       if (m) {
-        m.text = ev.text;
+        m.text = ev.text || m.text;
         m.streaming = false;
         m.turnId = ev.turnId;
       } else {
@@ -279,7 +282,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();
@@ -341,42 +347,465 @@ function createChatClient(options) {
     }
   };
 }
+marked.setOptions({ gfm: true, breaks: true });
+var hookInstalled = false;
+function installLinkHook() {
+  if (hookInstalled) return;
+  DOMPurify.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.parse(text, { async: false });
+  return DOMPurify.sanitize(raw, {
+    ALLOWED_TAGS,
+    ALLOWED_ATTR,
+    ALLOW_DATA_ATTR: false,
+    ALLOWED_URI_REGEXP: /^(?:https?:|mailto:)/i
+  });
+}
+
+// src/styles.ts
+var STYLES = `
+  :host {
+    /* accent (consumer-overridable via --oc-accent) + its derivations */
+    --oc-ac: var(--oc-accent, #096DD9);
+    --oc-btn-rim: color-mix(in oklab, var(--oc-ac) 70%, black);
+    --oc-btn-edge: 0 6px 16px -10px color-mix(in oklab, var(--oc-ac) 55%, transparent);
+    --oc-danger: #D92D20;
+    --oc-ease: cubic-bezier(0.16,1,0.3,1);
+    --oc-bounce: cubic-bezier(0.18,0.89,0.32,1.13);
+    --oc-mono: 'Geist Mono', ui-monospace, monospace;
+    --oc-r-full: 999px;
+
+    /* light palette (base) */
+    --oc-bg: #FFFFFF; --oc-bg-sunk: #F6F8FB;
+    --oc-fg: #0A0D12; --oc-fg-muted: rgba(10,13,18,0.66); --oc-fg-dim: rgba(10,13,18,0.44);
+    --oc-border: rgba(9,13,20,0.10);
+    --oc-accent-text: color-mix(in oklab, var(--oc-ac) 88%, black);
+    --oc-tint-1: rgba(9,13,20,0.025); --oc-tint-2: rgba(9,13,20,0.04); --oc-tint-3: rgba(9,13,20,0.055);
+    --oc-field-bg: #FFFFFF; --oc-field-border: rgba(9,13,20,0.22);
+    --oc-glass-border: rgba(9,13,20,0.12);
+
+    position: fixed; right: 24px; bottom: 24px; z-index: 2147483000;
+    font-family: 'Geist', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+  @media (prefers-color-scheme: dark) {
+    :host(:not([theme="light"])) {
+      --oc-bg: #000000; --oc-bg-sunk: #000000;
+      --oc-fg: #FFFFFF; --oc-fg-muted: rgba(255,255,255,0.68); --oc-fg-dim: rgba(255,255,255,0.42);
+      --oc-border: rgba(255,255,255,0.09);
+      --oc-accent-text: color-mix(in oklab, var(--oc-ac) 62%, white);
+      --oc-tint-1: rgba(255,255,255,0.03); --oc-tint-2: rgba(255,255,255,0.05); --oc-tint-3: rgba(255,255,255,0.07);
+      --oc-field-bg: rgba(255,255,255,0.045); --oc-field-border: rgba(255,255,255,0.20);
+      --oc-glass-border: rgba(255,255,255,0.12);
+    }
+  }
+  :host([theme="dark"]) {
+    --oc-bg: #000000; --oc-bg-sunk: #000000;
+    --oc-fg: #FFFFFF; --oc-fg-muted: rgba(255,255,255,0.68); --oc-fg-dim: rgba(255,255,255,0.42);
+    --oc-border: rgba(255,255,255,0.09);
+    --oc-accent-text: color-mix(in oklab, var(--oc-ac) 62%, white);
+    --oc-tint-1: rgba(255,255,255,0.03); --oc-tint-2: rgba(255,255,255,0.05); --oc-tint-3: rgba(255,255,255,0.07);
+    --oc-field-bg: rgba(255,255,255,0.045); --oc-field-border: rgba(255,255,255,0.20);
+    --oc-glass-border: rgba(255,255,255,0.12);
+  }
+  * { box-sizing: border-box; }
+  button { font-family: inherit; }
+
+  .oc { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
+
+  /* \u2500\u2500 Launcher \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .launcher {
+    position: relative; flex: none; width: 46px; height: 46px; border-radius: var(--oc-r-full);
+    border: 1px solid var(--oc-btn-rim); background: var(--oc-ac);
+    box-shadow: 0 8px 22px -8px color-mix(in oklab, var(--oc-ac) 70%, transparent), 0 18px 48px -18px rgba(0,0,0,0.6);
+    color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
+    transition: transform .26s var(--oc-bounce), filter .2s var(--oc-ease); align-self: flex-end;
+  }
+  .launcher:hover { transform: scale(1.06); }
+  .launcher:active { transform: scale(0.93); }
+  .ring { pointer-events: none; position: absolute; inset: -1px; border-radius: var(--oc-r-full); border: 2px solid var(--oc-ac); opacity: 0; }
+  .oc.ring:not(.open) .ring { animation: w-ring 2.4s ease-out 1.1s 3; }
+  .ic-chat, .ic-close { position: absolute; display: flex; align-items: center; justify-content: center; transition: all .3s var(--oc-bounce); }
+  .ic-chat { width: 28px; height: 28px; opacity: 1; transform: rotate(0) scale(1); }
+  .ic-close { opacity: 0; transform: rotate(90deg) scale(0.6); }
+  .oc.open .ic-chat { opacity: 0; transform: rotate(-90deg) scale(0.6); }
+  .oc.open .ic-close { opacity: 1; transform: rotate(0) scale(1); }
+  .badge {
+    position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 5px;
+    border-radius: var(--oc-r-full); border: 2px solid var(--oc-bg-sunk); background: var(--oc-danger);
+    color: #fff; font-family: var(--oc-mono); font-size: 10px; font-weight: 700;
+    display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.4);
+    transition: all .26s var(--oc-bounce);
+  }
+  .oc.unread:not(.open) .badge { opacity: 1; transform: scale(1); }
+
+  /* \u2500\u2500 Teaser \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .teaser {
+    position: absolute; right: 0; bottom: 60px; display: none; align-items: center; gap: 11px;
+    opacity: 0; transform: translateY(8px) scale(0.94); pointer-events: none;
+    transition: opacity .3s var(--oc-ease), transform .38s var(--oc-bounce);
+  }
+  .oc.has-teaser .teaser { display: flex; }
+  .oc.teaser:not(.open) .teaser { opacity: 1; transform: none; pointer-events: auto; }
+  .teaser-btn {
+    max-width: 250px; display: flex; align-items: center; gap: 10px; padding: 11px 15px;
+    border-radius: 16px 16px 5px 16px; border: 1px solid var(--oc-glass-border); background: var(--oc-bg);
+    box-shadow: 0 10px 30px -14px rgba(0,0,0,0.5); color: var(--oc-fg); font-size: 13.5px; line-height: 1.45;
+    text-align: left; cursor: pointer; transition: transform .2s var(--oc-ease);
+  }
+  .teaser-btn:hover { transform: translateY(-1px); }
+  .teaser-btn .logo { flex: none; width: 24px; height: 24px; border-radius: 6px; overflow: hidden; color: var(--oc-ac); }
+  .teaser-x {
+    flex: none; width: 22px; height: 22px; border-radius: var(--oc-r-full); border: 1px solid var(--oc-border);
+    background: var(--oc-bg); color: var(--oc-fg-dim); display: flex; align-items: center; justify-content: center; cursor: pointer;
+  }
+  .teaser-x:hover { color: var(--oc-fg); }
+
+  /* \u2500\u2500 Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .panel {
+    position: relative; width: min(384px, calc(100vw - 40px)); height: min(560px, calc(100vh - 108px));
+    display: flex; flex-direction: column; border-radius: 20px; border: 1px solid var(--oc-glass-border);
+    background: var(--oc-bg); box-shadow: 0 12px 28px -12px rgba(0,0,0,0.28), 0 40px 90px -30px rgba(0,0,0,0.55);
+    overflow: hidden; transform-origin: bottom right;
+    opacity: 0; transform: translateY(16px) scale(0.94); pointer-events: none; visibility: hidden;
+    transition: opacity .24s var(--oc-ease), transform .34s var(--oc-bounce), visibility .34s, width .3s var(--oc-ease), height .3s var(--oc-ease);
+  }
+  .oc.open .panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
+  .oc.max .panel { width: min(720px, calc(100vw - 40px)); height: calc(100vh - 108px); }
+
+  .hd { position: relative; flex: none; display: flex; align-items: center; gap: 12px; padding: 13px 14px 12px; background: var(--oc-ac); color: #fff; overflow: hidden; }
+  .hd-grid { pointer-events: none; position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(255,255,255,0.11) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,0.11) 1px, transparent 1px); background-size: 26px 26px; }
+  .hd .logo { position: relative; flex: none; width: 32px; height: 32px; border-radius: 7px; overflow: hidden; color: rgba(255,255,255,0.22); }
+  .hd-txt { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+  .hd-title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .hd-status { display: flex; align-items: center; gap: 6px; font-size: 11.5px; opacity: 0.9; }
+  .hd-status .dot { width: 6px; height: 6px; border-radius: var(--oc-r-full); background: #7BE3A6; flex: none; }
+  .hd-status .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .hd-btn { position: relative; flex: none; width: 28px; height: 28px; border-radius: 8px; border: none; background: rgba(255,255,255,0.16); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .18s var(--oc-ease); }
+  .hd-btn:hover { background: rgba(255,255,255,0.28); }
+  .hd-btn .i { position: absolute; display: flex; transition: opacity .2s var(--oc-ease); }
+  .i-expand { opacity: 1; } .i-shrink { opacity: 0; }
+  .oc.max .i-expand { opacity: 0; } .oc.max .i-shrink { opacity: 1; }
+
+  .err { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 12px; color: #fff; background: var(--oc-danger); }
+  .err .retry { padding: 3px 10px; font-size: 11px; background: rgba(255,255,255,0.2); color: #fff; border: none; border-radius: 6px; cursor: pointer; }
+
+  /* \u2500\u2500 Message list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 16px 16px 26px; background: var(--oc-bg); scroll-behavior: smooth; }
+  .turn { display: flex; flex-direction: column; gap: 6px; animation: w-in .42s var(--oc-ease) both; }
+  .turn.bot { align-items: flex-start; } .turn.user { align-items: flex-end; }
+  .b { font-size: 13.5px; line-height: 1.55; text-wrap: pretty; word-break: break-word; }
+  .turn.bot .b { max-width: 86%; padding: 13px 15px; border-radius: 20px; background: var(--oc-tint-2); color: var(--oc-fg); }
+  .turn.user .b { max-width: 82%; padding: 11px 15px; border-radius: var(--oc-r-full); background: var(--oc-ac); color: #fff; }
+  .turn.human .b { max-width: 86%; padding: 13px 15px; border-radius: 20px; background: color-mix(in oklab, var(--oc-ac) 16%, transparent); color: var(--oc-fg); }
+  .src { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px; border-radius: var(--oc-r-full); border: 1px solid var(--oc-border); background: var(--oc-tint-1); max-width: 100%; }
+  .src .t { min-width: 0; font-size: 11.5px; color: var(--oc-fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .byline { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: 11.5px; color: var(--oc-fg-dim); }
+  .human-label { font-size: 11px; font-weight: 600; opacity: .7; margin-bottom: 2px; }
+
+  /* markdown inside a bot 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: var(--oc-accent-text); text-decoration: underline; text-underline-offset: 2px; }
+  .md code { font-family: var(--oc-mono); font-size: 12.5px; background: var(--oc-tint-3); padding: 1px 5px; border-radius: 5px; }
+  .md pre { background: color-mix(in oklab, var(--oc-fg) 10%, transparent); padding: 10px 12px; border-radius: 8px; overflow-x: auto; margin: 0 0 8px; }
+  .md pre code { background: none; padding: 0; }
+  .md blockquote { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid var(--oc-border); color: var(--oc-fg-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; }
+  .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: var(--oc-tint-3); border-radius: 6px; padding: 2px 8px; margin: 0 0 6px; }
+  .turn.user .att-chip { background: rgba(255,255,255,0.25); }
+
+  .typing { align-self: flex-start; display: flex; align-items: center; gap: 5px; padding: 13px 16px; border-radius: 20px; background: var(--oc-tint-2); animation: w-in .3s var(--oc-ease) both; }
+  .typing span { width: 6px; height: 6px; border-radius: var(--oc-r-full); background: var(--oc-fg-muted); animation: w-dot 1.2s ease-in-out infinite; }
+  .typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; }
+
+  .chips { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 2px; animation: w-in .42s var(--oc-ease) both; animation-delay: .3s; }
+  .chip { padding: 8px 13px; border-radius: var(--oc-r-full); border: 1px solid color-mix(in oklab, var(--oc-ac) 34%, transparent); background: color-mix(in oklab, var(--oc-ac) 10%, transparent); color: var(--oc-accent-text); font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all .18s var(--oc-ease); }
+  .chip:hover { background: color-mix(in oklab, var(--oc-ac) 18%, transparent); }
+
+  /* \u2500\u2500 Jump to latest \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .jump-wrap { position: relative; flex: none; height: 0; z-index: 2; display: flex; justify-content: center; }
+  .jump { position: absolute; bottom: 8px; width: 34px; height: 34px; border-radius: var(--oc-r-full); border: 1px solid var(--oc-border); background: var(--oc-bg); box-shadow: 0 8px 20px -10px rgba(0,0,0,0.5); color: var(--oc-fg-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(6px) scale(0.8); pointer-events: none; transition: all .22s var(--oc-ease); }
+  .oc.away .jump { opacity: 1; transform: none; pointer-events: auto; }
+  .jump:hover { color: var(--oc-fg); border-color: var(--oc-fg-dim); }
+
+  /* \u2500\u2500 Composer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .composer { flex: none; display: flex; flex-direction: column; gap: 9px; padding: 12px 14px 13px; background: var(--oc-bg); }
+  .field { display: flex; flex-direction: column; gap: 11px; padding: 13px 14px 11px; border-radius: 18px; border: 1px solid var(--oc-field-border); background: var(--oc-field-bg); transition: border-color .18s var(--oc-ease); }
+  .oc.focus .field { border-color: var(--oc-ac); }
+  .input { width: 100%; border: none; background: transparent; color: var(--oc-fg); font-size: 13.5px; line-height: 1.4; outline: none; padding: 0; resize: none; max-height: 108px; font-family: inherit; }
+  .input::placeholder { color: var(--oc-fg-dim); }
+  .acts { display: flex; align-items: center; gap: 16px; }
+  .act { flex: none; display: flex; border: none; background: transparent; padding: 4px; margin: -4px; color: var(--oc-fg-dim); cursor: pointer; transition: color .18s var(--oc-ease); }
+  .act:hover { color: var(--oc-fg-muted); }
+  .oc.emoji .act.emoji-btn { color: var(--oc-accent-text); }
+  .send { flex: none; margin-left: auto; width: 34px; height: 34px; border-radius: var(--oc-r-full); border: 1px solid var(--oc-border); background: var(--oc-tint-3); color: var(--oc-fg-dim); box-shadow: none; display: flex; align-items: center; justify-content: center; cursor: default; transition: all .22s var(--oc-ease); }
+  .oc.ready .send { border-color: var(--oc-btn-rim); background: var(--oc-ac); color: #fff; box-shadow: var(--oc-btn-edge); cursor: pointer; }
+  .oc.ready .send:hover { filter: brightness(1.1); }
+  .send:active { transform: scale(0.92); }
+
+  .foot { position: relative; display: none; text-align: center; font-size: 11.5px; line-height: 1.5; color: var(--oc-fg-dim); }
+  .oc.has-privacy .foot { display: block; }
+  .foot .priv { color: var(--oc-fg-muted); text-decoration: underline; text-underline-offset: 2px; cursor: default; }
+  .foot .tip { position: absolute; left: 0; right: 0; bottom: 16px; padding-bottom: 8px; z-index: 7; display: flex; justify-content: flex-end; pointer-events: none; opacity: 0; transition: opacity .18s var(--oc-ease); }
+  .oc.max .foot .tip { right: 188px; }
+  .foot:hover .tip { opacity: 1; }
+  .foot .tip-card { max-width: 100%; width: 262px; padding: 13px 15px; border-radius: 14px; border: 1px solid var(--oc-border); background: var(--oc-bg); box-shadow: 0 8px 22px -12px rgba(0,0,0,0.32); text-align: left; font-size: 11.5px; line-height: 1.55; color: var(--oc-fg-muted); text-wrap: pretty; transform: translateY(6px); transition: transform .24s var(--oc-bounce); }
+  .foot:hover .tip-card { transform: none; }
+  .foot .tip-card a { color: var(--oc-fg); text-decoration: underline; text-underline-offset: 2px; }
+
+  /* \u2500\u2500 Emoji picker \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .emoji-scrim { position: absolute; inset: 0; z-index: 3; display: none; }
+  .oc.emoji .emoji-scrim { display: block; }
+  .emoji-panel { position: absolute; left: 10px; right: 10px; bottom: 96px; z-index: 4; max-height: min(340px, 58%); display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--oc-border); background: var(--oc-bg); box-shadow: 0 18px 46px -18px rgba(0,0,0,0.6); overflow: hidden; opacity: 0; transform: translateY(10px) scale(0.96); transform-origin: bottom center; pointer-events: none; visibility: hidden; transition: opacity .18s var(--oc-ease), transform .26s var(--oc-bounce), visibility .26s; }
+  .oc.emoji .emoji-panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
+  .emoji-search { flex: none; display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--oc-border); color: var(--oc-fg-dim); }
+  .emoji-search input { flex: 1 1 auto; min-width: 0; border: none; background: transparent; color: var(--oc-fg); font-size: 14.5px; outline: none; font-family: inherit; }
+  .emoji-search input::placeholder { color: var(--oc-fg-dim); }
+  .emoji-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 16px; }
+  .emoji-grp { display: flex; flex-direction: column; gap: 6px; }
+  .emoji-grp + .emoji-grp { padding-top: 8px; }
+  .emoji-grp-name { font-family: var(--oc-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--oc-fg-dim); }
+  .emoji-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 2px; }
+  .emoji-grid button { display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 8px; border: none; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; transition: background .14s var(--oc-ease); }
+  .emoji-grid button:hover { background: var(--oc-tint-3); }
+  .emoji-empty { display: none; flex-direction: column; align-items: center; gap: 5px; padding: 26px 10px; text-align: center; }
+  .emoji-empty .h { font-size: 14px; color: var(--oc-fg); } .emoji-empty .s { font-size: 12.5px; color: var(--oc-fg-dim); }
+
+  @media (max-width: 480px) {
+    :host { right: 0; bottom: 0; }
+    .oc { padding: 0 16px 16px; }
+    .panel { position: fixed; inset: 0; width: 100vw; height: 100dvh; border-radius: 0; }
+    .oc.max .panel { width: 100vw; height: 100dvh; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .launcher, .panel, .teaser, .turn, .jump, .emoji-panel { transition: none; animation: none; }
+    .ring { animation: none; } .body { scroll-behavior: auto; }
+  }
+
+  @keyframes w-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
+  @keyframes w-dot { 0%,60%,100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
+  @keyframes w-ring { 0% { transform: scale(1); opacity: .5; } 70%,100% { transform: scale(1.7); opacity: 0; } }
+`;
+
+// src/icons.ts
+var logoMark = (rectFill) => `<svg viewBox="0 0 1032 1024" fill="none" style="display:block;width:100%;height:100%"><rect x="4" width="1024" height="1024" rx="150" fill="${rectFill}"></rect><path d="M430.924 831.644C270.203 859.983 138.14 760.606 111.329 608.551C84.5174 456.497 174.627 317.945 335.348 289.605C496.068 261.266 628.131 360.643 654.943 512.698C681.754 664.752 591.644 803.304 430.924 831.644ZM406.613 693.77C488.549 679.323 518.727 615.513 505.252 539.092C491.777 462.671 441.594 413.031 359.658 427.478C277.722 441.926 247.544 505.736 261.02 582.157C274.495 658.578 324.677 708.218 406.613 693.77ZM870.337 558.389L744.281 580.616C727.055 482.923 674.565 369.515 652.06 241.884L841.143 208.543C863.509 335.387 853.111 460.696 870.337 558.389ZM910.583 740.568L768.771 765.573L745.016 630.852L886.828 605.846L910.583 740.568Z" fill="#fff"></path></svg>`;
+var stroke = (w, path, size = 24) => `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${w}" stroke-linecap="round" stroke-linejoin="round" style="display:block;flex:none">${path}</svg>`;
+var ICON = {
+  close: (size = 19) => stroke(2.4, '<path d="M18 6 6 18M6 6l12 12"/>', size),
+  minus: stroke(2, '<path d="M6 12h12"/>', 15),
+  expand: stroke(2, '<path d="M15 4h5v5M20 4l-6.5 6.5M9 20H4v-5M4 20l6.5-6.5"/>', 15),
+  shrink: stroke(2, '<path d="M20 9h-5V4M15 9l5.5-5.5M4 15h5v5M9 15l-5.5 5.5"/>', 15),
+  chevronDown: stroke(2.1, '<path d="m6 9 6 6 6-6"/>', 16),
+  send: stroke(2.2, '<path d="M12 19V5M6 11l6-6 6 6"/>', 16),
+  paperclip: stroke(1.7, '<path d="M21 11.5 12.5 20a5.5 5.5 0 0 1-7.8-7.8l8.5-8.5a3.7 3.7 0 0 1 5.2 5.2l-8.5 8.5a1.8 1.8 0 0 1-2.6-2.6l7.9-7.8"/>', 17),
+  emoji: stroke(1.7, '<circle cx="12" cy="12" r="9"/><path d="M8.5 14.5a4.5 4.5 0 0 0 7 0M9 9.5h.01M15 9.5h.01"/>', 17),
+  mic: stroke(1.7, '<rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/>', 17),
+  search: stroke(1.9, '<circle cx="11" cy="11" r="7.5"/><path d="m21 21-4.3-4.3"/>', 17),
+  clear: stroke(2.2, '<path d="M18 6 6 18M6 6l12 12"/>', 15),
+  // Two-page "source" glyph for citation chips.
+  book: `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" style="display:block;flex:none;color:var(--oc-accent-text)"><path d="M3 5.5A2.5 2.5 0 0 1 5.5 3H11v18H5.5A2.5 2.5 0 0 1 3 18.5Z"/><path d="M21 5.5A2.5 2.5 0 0 0 18.5 3H13v18h5.5a2.5 2.5 0 0 0 2.5-2.5Z"/></svg>`,
+  teaserDismiss: stroke(2.4, '<path d="M18 6 6 18M6 6l12 12"/>', 12)
+};
+
+// src/emoji.ts
+var CATS = [
+  { name: "Frequently used", items: [
+    ["\u{1F44D}", "thumbs up"],
+    ["\u{1F64F}", "thanks"],
+    ["\u{1F44B}", "wave"],
+    ["\u2705", "done"],
+    ["\u{1F4DE}", "call"],
+    ["\u{1F60A}", "smile"],
+    ["\u2764\uFE0F", "heart"]
+  ] },
+  { name: "Smileys and emotion", items: [
+    ["\u{1F600}", "grinning"],
+    ["\u{1F603}", "smiley"],
+    ["\u{1F604}", "grin"],
+    ["\u{1F601}", "beaming"],
+    ["\u{1F606}", "squinting"],
+    ["\u{1F605}", "relief"],
+    ["\u{1F923}", "rolling"],
+    ["\u{1F602}", "tears of joy"],
+    ["\u{1F642}", "slightly smiling"],
+    ["\u{1F643}", "upside down"],
+    ["\u{1F609}", "wink"],
+    ["\u{1F607}", "halo"],
+    ["\u{1F970}", "smiling hearts"],
+    ["\u{1F60D}", "heart eyes"],
+    ["\u{1F618}", "kiss"],
+    ["\u{1F60B}", "yum"],
+    ["\u{1F914}", "thinking"],
+    ["\u{1F928}", "raised brow"],
+    ["\u{1F610}", "neutral"],
+    ["\u{1F644}", "eye roll"],
+    ["\u{1F62C}", "grimace"],
+    ["\u{1F625}", "sad"],
+    ["\u{1F622}", "crying"],
+    ["\u{1F62D}", "sobbing"],
+    ["\u{1F620}", "angry"],
+    ["\u{1F633}", "flushed"],
+    ["\u{1F929}", "star struck"],
+    ["\u{1F634}", "sleeping"]
+  ] },
+  { name: "Gestures", items: [
+    ["\u{1F44E}", "thumbs down"],
+    ["\u{1F44F}", "clap"],
+    ["\u{1F64C}", "raised hands"],
+    ["\u{1F91D}", "handshake"],
+    ["\u{1F44C}", "ok hand"],
+    ["\u270C\uFE0F", "victory"],
+    ["\u{1F4AA}", "strong"],
+    ["\u{1F440}", "eyes"],
+    ["\u{1F9E0}", "brain"],
+    ["\u{1F91F}", "love you"],
+    ["\u261D\uFE0F", "point up"],
+    ["\u{1F447}", "point down"],
+    ["\u{1F91A}", "raised back"],
+    ["\u{1F91E}", "fingers crossed"]
+  ] },
+  { name: "Work and travel", items: [
+    ["\u{1F4C5}", "calendar"],
+    ["\u{1F4C4}", "document"],
+    ["\u{1F4B0}", "money"],
+    ["\u{1F4CA}", "chart"],
+    ["\u{1F4E6}", "package"],
+    ["\u{1F3E5}", "hospital"],
+    ["\u{1F3E6}", "bank"],
+    ["\u{1F69A}", "truck"],
+    ["\u2708\uFE0F", "plane"],
+    ["\u{1F4F1}", "phone"],
+    ["\u{1F4BB}", "laptop"],
+    ["\u{1F50D}", "search"],
+    ["\u{1F4CC}", "pin"],
+    ["\u{1F514}", "bell"]
+  ] },
+  { name: "Symbols", items: [
+    ["\u{1F525}", "fire"],
+    ["\u2728", "sparkles"],
+    ["\u{1F389}", "celebrate"],
+    ["\u{1F4AF}", "hundred"],
+    ["\u26A0\uFE0F", "warning"],
+    ["\u274C", "cross"],
+    ["\u2B50", "star"],
+    ["\u{1F680}", "launch"],
+    ["\u{1F49A}", "green heart"],
+    ["\u{1F499}", "blue heart"],
+    ["\u{1F552}", "clock"],
+    ["\u{1F4A1}", "idea"],
+    ["\u{1F512}", "lock"],
+    ["\u{1F3AF}", "target"]
+  ] }
+];
+var toGroup = (name, items) => ({
+  name,
+  items: items.map(([ch, kw]) => ({ ch, name: kw }))
+});
+function emojiGroups(query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return CATS.map((c) => toGroup(c.name, c.items));
+  const hits = [];
+  for (const c of CATS) for (const e of c.items) {
+    if (e[1].indexOf(q) >= 0 && !hits.some((h) => h[0] === e[0])) hits.push(e);
+  }
+  if (!hits.length) return [];
+  return [toGroup(`${hits.length} result${hits.length === 1 ? "" : "s"}`, hits)];
+}
 
 // src/element.ts
-var HANDOFF_STATUS_TEXT = {
+var DEFAULT_STATUS = "Replies in a few seconds";
+var ATTACHMENT_ACCEPT = "image/*,application/pdf,text/plain,text/csv";
+var AWAY_THRESHOLD = 60;
+var HANDOFF_STATUS = {
   ai: null,
   awaiting_human: "Connecting you to a person\u2026",
   human: "You're chatting with a person"
 };
-var ATTACHMENT_ACCEPT = "image/*,application/pdf,text/plain,text/csv";
-var AGENT_TYPING_TEXT = "The agent is typing\u2026";
 var OyehelloChatElement = class extends HTMLElement {
-  static observedAttributes = ["api-key", "agent-id", "base-url", "title"];
+  static observedAttributes = ["api-key", "agent-id", "base-url", "title", "theme"];
+  // ── live client state ──
   client = null;
   off = null;
   messages = [];
   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;
-  // Last connection/runtime error message (client emits an 'error' event on a failed start() or
-  // send). Surfaced as a visible banner so a disabled composer always shows WHY, instead of sitting
-  // dead. Cleared when the client reaches a healthy state again.
   lastError = null;
-  // 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.
   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();
+  mdCache = /* @__PURE__ */ new Map();
+  receivedAt = /* @__PURE__ */ new Map();
+  // ── widget UI state ──
+  uiOpen = false;
+  started = false;
+  uiMax = false;
+  emojiOpen = false;
+  emojiQuery = "";
+  away = false;
+  // reader scrolled up
+  unseen = 0;
+  focused = false;
+  teaserActive = false;
+  renderedCount = 0;
+  renderedBotFinal = 0;
+  timers = [];
+  // ── shadow refs ──
+  oc;
+  bodyEl;
+  textareaEl;
+  fileEl;
+  titleEl;
+  statusEl;
+  errEl;
+  emojiListEl;
+  emojiSearchEl;
   connectedCallback() {
     if (!this.shadowRoot) this.attachShadow({ mode: "open" });
     const apiKey = this.getAttribute("api-key");
@@ -391,23 +820,44 @@ 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;
-        if (e.state === "ready" || e.state === "opening") this.lastError = null;
-      } 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;
-      else if (e.type === "error") this.lastError = e.error.message;
-      this.render();
-    });
-    this.render();
-    void this.client.start();
+    this.off = this.client.on((e) => this.onClientEvent(e));
+    this.renderShell();
+    this.renderMessages();
+    this.updateHeader();
+    this.updateStatus();
+    this.updateClasses();
+    let wasOpen = false;
+    try {
+      wasOpen = sessionStorage.getItem(this.key("open")) === "1";
+    } catch {
+    }
+    if (wasOpen) {
+      this.openPanel();
+      return;
+    }
+    this.updateClasses(true);
+    this.timers.push(setTimeout(() => {
+      this.oc?.classList.remove("ring");
+    }, 6e3));
+    const teaserText = this.getAttribute("teaser");
+    let dismissed = false;
+    try {
+      dismissed = sessionStorage.getItem(this.key("teaser")) === "0";
+    } catch {
+    }
+    if (teaserText && !dismissed) {
+      this.timers.push(setTimeout(() => {
+        if (!this.uiOpen) {
+          this.teaserActive = true;
+          this.updateClasses();
+        }
+      }, 1400));
+    }
   }
   disconnectedCallback() {
     this.off?.();
     void this.client?.end();
+    for (const t of this.timers) clearTimeout(t);
     for (const url of this.imagePreviewCache.values()) {
       if (typeof URL.revokeObjectURL === "function") URL.revokeObjectURL(url);
     }
@@ -417,37 +867,394 @@ var OyehelloChatElement = class extends HTMLElement {
     if (this.client) this.client.registerTools(handlers);
     else Object.assign(this.pendingTools, handlers);
   }
-  send(text, files) {
+  key(k) {
+    return `oyehello-chat:${k}:${this.getAttribute("agent-id") ?? ""}`;
+  }
+  get suggestions() {
+    return (this.getAttribute("suggestions") ?? "").split(",").map((s) => s.trim()).filter(Boolean);
+  }
+  // ── Shell (built once) ─────────────────────────────────────────────────────────────────────────
+  renderShell() {
+    const root = this.shadowRoot;
+    const hasTeaser = !!this.getAttribute("teaser");
+    const hasPrivacy = !!this.getAttribute("privacy-url");
+    const teaserText = this.getAttribute("teaser") ?? "";
+    root.innerHTML = `
+      <style>${STYLES}</style>
+      <div class="oc${hasTeaser ? " has-teaser" : ""}${hasPrivacy ? " has-privacy" : ""}">
+        <div class="panel" role="dialog" aria-label="Chat">
+          <div class="hd">
+            <span class="hd-grid"></span>
+            <span class="logo">${logoMark("currentColor")}</span>
+            <span class="hd-txt"><span class="hd-title">Chat</span><span class="hd-status"><span class="dot"></span><span class="t"></span></span></span>
+            <button type="button" class="hd-btn max" aria-label="Expand"><span class="i i-expand">${ICON.expand}</span><span class="i i-shrink">${ICON.shrink}</span></button>
+            <button type="button" class="hd-btn min" aria-label="Minimise">${ICON.minus}</button>
+          </div>
+          <div class="err" hidden></div>
+          <div class="body"></div>
+          <span class="emoji-scrim"></span>
+          <div class="emoji-panel">
+            <div class="emoji-search">${ICON.search}<input type="text" placeholder="Search emoji\u2026" aria-label="Search emoji" /></div>
+            <div class="emoji-list"></div>
+          </div>
+          <div class="jump-wrap"><button type="button" class="jump" aria-label="Jump to latest">${ICON.chevronDown}</button></div>
+          <div class="composer">
+            <form class="field">
+              <textarea class="input" rows="1" aria-label="message" placeholder="Ask a question\u2026"></textarea>
+              <div class="acts">
+                <button type="button" class="act attach" aria-label="Attach a file">${ICON.paperclip}</button>
+                <input type="file" accept="${ATTACHMENT_ACCEPT}" multiple hidden />
+                <button type="button" class="act emoji-btn" aria-label="Insert emoji">${ICON.emoji}</button>
+                <button type="button" class="act mic" aria-label="Send a voice note">${ICON.mic}</button>
+                <button type="submit" class="send" aria-label="Send">${ICON.send}</button>
+              </div>
+            </form>
+            <div class="foot">
+              <span>By chatting with us, you agree to our </span><span class="priv">Privacy Policy</span>
+              <span class="tip"><span class="tip-card">By chatting with us, you agree to the monitoring and recording of this chat to deliver our services and processing of your personal data in accordance with our Privacy Policy. <a href="${this.escapeAttr(this.getAttribute("privacy-url") ?? "#")}" target="_blank" rel="noopener noreferrer">See our Privacy Policy</a>.</span></span>
+            </div>
+          </div>
+        </div>
+
+        <div class="teaser">
+          <button type="button" class="teaser-btn"><span class="logo">${logoMark("currentColor")}</span><span>${escapeHtml(teaserText)}</span></button>
+          <button type="button" class="teaser-x" aria-label="Dismiss">${ICON.teaserDismiss}</button>
+        </div>
+
+        <button type="button" class="launcher" aria-label="Open chat">
+          <span class="ring"></span>
+          <span class="ic-chat">${logoMark("var(--oc-ac)")}</span>
+          <span class="ic-close">${ICON.close(19)}</span>
+          <span class="badge"></span>
+        </button>
+      </div>`;
+    this.oc = root.querySelector(".oc");
+    this.bodyEl = root.querySelector(".body");
+    this.textareaEl = root.querySelector("textarea.input");
+    this.fileEl = root.querySelector('input[type="file"]');
+    this.titleEl = root.querySelector(".hd-title");
+    this.statusEl = root.querySelector(".hd-status .t");
+    this.errEl = root.querySelector(".err");
+    this.emojiListEl = root.querySelector(".emoji-list");
+    this.emojiSearchEl = root.querySelector(".emoji-search input");
+    root.querySelector(".launcher").addEventListener("click", () => this.toggle());
+    root.querySelector(".hd-btn.min").addEventListener("click", () => this.closePanel());
+    root.querySelector(".hd-btn.max").addEventListener("click", () => {
+      this.uiMax = !this.uiMax;
+      this.updateClasses();
+    });
+    root.querySelector(".teaser-btn").addEventListener("click", () => this.openPanel());
+    root.querySelector(".teaser-x").addEventListener("click", () => this.dismissTeaser());
+    root.querySelector(".jump").addEventListener("click", () => this.scrollToBottom());
+    root.querySelector(".attach").addEventListener("click", () => this.fileEl.click());
+    this.fileEl.addEventListener("change", () => {
+      this.pendingFiles = this.fileEl.files ? Array.from(this.fileEl.files) : [];
+    });
+    root.querySelector(".emoji-btn").addEventListener("click", () => this.toggleEmoji());
+    root.querySelector(".emoji-scrim").addEventListener("click", () => this.closeEmoji());
+    this.emojiSearchEl.addEventListener("input", () => {
+      this.emojiQuery = this.emojiSearchEl.value;
+      this.renderEmoji();
+    });
+    this.bodyEl.addEventListener("scroll", () => this.onScroll());
+    root.querySelector("form.field").addEventListener("submit", (e) => {
+      e.preventDefault();
+      this.doSend();
+    });
+    this.textareaEl.addEventListener("input", () => {
+      this.autoGrow();
+      this.updateClasses();
+    });
+    this.textareaEl.addEventListener("focus", () => {
+      this.focused = true;
+      this.updateClasses();
+    });
+    this.textareaEl.addEventListener("blur", () => {
+      this.focused = false;
+      this.updateClasses();
+    });
+    this.textareaEl.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
+        e.preventDefault();
+        this.doSend();
+      }
+      if (e.key === "Escape") {
+        if (this.emojiOpen) this.closeEmoji();
+        else 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>`;
+  }
+  // ── State-class sync ──────────────────────────────────────────────────────────────────────────
+  updateClasses(initialRing = false) {
+    if (!this.oc) return;
+    const c = this.oc.classList;
+    c.toggle("open", this.uiOpen);
+    c.toggle("max", this.uiMax);
+    c.toggle("emoji", this.emojiOpen);
+    c.toggle("teaser", this.teaserActive);
+    c.toggle("away", this.away);
+    c.toggle("focus", this.focused);
+    c.toggle("ready", (this.textareaEl?.value.trim().length ?? 0) > 0);
+    c.toggle("unread", this.unseen > 0);
+    if (initialRing) c.add("ring");
+    const badge = this.oc.querySelector(".badge");
+    if (badge) badge.textContent = this.unseen > 9 ? "9+" : String(this.unseen);
+    const launcher = this.oc.querySelector(".launcher");
+    if (launcher) launcher.setAttribute("aria-label", this.uiOpen ? "Close chat" : "Open chat");
+  }
+  // ── Open / close ───────────────────────────────────────────────────────────────────────────────
+  toggle() {
+    this.uiOpen ? this.closePanel() : this.openPanel();
+  }
+  openPanel() {
+    this.uiOpen = true;
+    this.teaserActive = false;
+    this.unseen = 0;
+    try {
+      sessionStorage.setItem(this.key("open"), "1");
+    } catch {
+    }
+    if (!this.started && this.client) {
+      this.started = true;
+      void this.client.start();
+    }
+    this.updateClasses();
+    this.renderMessages();
+    this.scrollToBottom();
+    if (!this.textareaEl.disabled) setTimeout(() => this.textareaEl.focus(), 60);
+  }
+  closePanel() {
+    this.uiOpen = false;
+    this.uiMax = false;
+    this.emojiOpen = false;
+    try {
+      sessionStorage.setItem(this.key("open"), "0");
+    } catch {
+    }
+    this.updateClasses();
+  }
+  dismissTeaser() {
+    this.teaserActive = false;
+    try {
+      sessionStorage.setItem(this.key("teaser"), "0");
+    } catch {
+    }
+    this.updateClasses();
+  }
+  // ── 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.updateHeader();
+    } 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();
+  }
+  updateHeader() {
+    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;
+    const handoff = HANDOFF_STATUS[this.handoffState];
+    const text = this.state === "opening" ? "Connecting\u2026" : handoff ?? (this.getAttribute("status") ?? DEFAULT_STATUS);
+    if (this.statusEl) this.statusEl.textContent = text;
+    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 prevTop = body.scrollTop;
+    const added = this.messages.length - this.renderedCount;
+    const botFinal = this.messages.filter((m) => m.role === "assistant" && !m.streaming).length;
+    const newBotFinal = botFinal > this.renderedBotFinal;
+    const now = Date.now();
+    for (const m of this.messages) if (!this.receivedAt.has(m.id)) this.receivedAt.set(m.id, now);
+    const lastBot = (() => {
+      for (let i = this.messages.length - 1; i >= 0; i--) if (this.messages[i]?.role === "assistant") return i;
+      return -1;
+    })();
+    let html = this.messages.map((m, i) => this.turnHtml(m, i === lastBot && !this.agentTyping)).join("");
+    if (this.agentTyping) html += '<span class="typing"><span></span><span></span><span></span></span>';
+    const sugg = this.suggestions;
+    if (sugg.length > 0 && !this.agentTyping && this.state === "ready") {
+      html += `<span class="chips">${sugg.map((s, i) => `<button type="button" class="chip" data-chip="${i}">${escapeHtml(s)}</button>`).join("")}</span>`;
+    }
+    body.innerHTML = html;
+    this.hydrateAttachmentImages();
+    this.bindChips();
+    this.renderedCount = this.messages.length;
+    this.renderedBotFinal = botFinal;
+    if (!this.uiOpen) {
+      if (added > 0) this.unseen += added;
+      this.updateClasses();
+      return;
+    }
+    if (newBotFinal && !this.away) this.parkLastQuestion();
+    else if (!this.away) this.scrollToBottom();
+    else {
+      body.scrollTop = prevTop;
+      if (added > 0) this.unseen += added;
+    }
+    this.updateClasses();
+  }
+  // After a reply lands, float the question that prompted it to the top so the answer reads from its
+  // first line rather than its last (the design's behaviour).
+  parkLastQuestion() {
+    const users = this.bodyEl.querySelectorAll(".turn.user");
+    const last = users[users.length - 1];
+    if (!last) {
+      this.scrollToBottom();
+      return;
+    }
+    const top = Math.max(0, Math.min(last.offsetTop - 22, this.bodyEl.scrollHeight - this.bodyEl.clientHeight));
+    this.bodyEl.scrollTo({ top, behavior: "smooth" });
+  }
+  onScroll() {
+    const b = this.bodyEl;
+    const away = b.scrollHeight - b.scrollTop - b.clientHeight > AWAY_THRESHOLD;
+    if (away !== this.away) {
+      this.away = away;
+      if (!away) this.unseen = 0;
+      this.updateClasses();
+    }
+  }
+  scrollToBottom() {
+    if (!this.bodyEl) return;
+    this.bodyEl.scrollTop = this.bodyEl.scrollHeight;
+    this.away = false;
+    this.unseen = 0;
+    this.updateClasses();
+  }
+  // ── Composer ──────────────────────────────────────────────────────────────────────────────────
+  autoGrow() {
+    const ta = this.textareaEl;
+    ta.style.height = "auto";
+    ta.style.height = `${Math.min(ta.scrollHeight, 108)}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.away = false;
+    this.emojiOpen = false;
     void this.client?.sendMessage(text, files.length > 0 ? files : void 0);
+    this.textareaEl.value = "";
+    this.textareaEl.style.height = "auto";
+    this.updateClasses();
   }
-  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>`;
+  sendChip(text) {
+    this.away = false;
+    this.emojiOpen = false;
+    void this.client?.sendMessage(text);
+    this.updateClasses();
+  }
+  bindChips() {
+    const sugg = this.suggestions;
+    this.bodyEl.querySelectorAll(".chip[data-chip]").forEach((btn) => {
+      const i = Number(btn.getAttribute("data-chip"));
+      const text = sugg[i];
+      if (text) btn.addEventListener("click", () => this.sendChip(text));
+    });
+  }
+  // ── Emoji ─────────────────────────────────────────────────────────────────────────────────────
+  toggleEmoji() {
+    this.emojiOpen = !this.emojiOpen;
+    this.emojiQuery = "";
+    this.emojiSearchEl.value = "";
+    this.renderEmoji();
+    this.updateClasses();
+    if (this.emojiOpen) setTimeout(() => this.emojiSearchEl.focus(), 60);
+  }
+  closeEmoji() {
+    this.emojiOpen = false;
+    this.emojiQuery = "";
+    this.updateClasses();
+  }
+  renderEmoji() {
+    const groups = emojiGroups(this.emojiQuery);
+    let html = groups.map((g) => `
+      <div class="emoji-grp"><span class="emoji-grp-name">${escapeHtml(g.name)}</span>
+        <div class="emoji-grid">${g.items.map((e) => `<button type="button" title="${this.escapeAttr(e.name)}" aria-label="${this.escapeAttr(e.name)}" data-ch="${this.escapeAttr(e.ch)}">${e.ch}</button>`).join("")}</div>
+      </div>`).join("");
+    if (groups.length === 0) html = '<span class="emoji-empty" style="display:flex"><span class="h">No emoji match that</span><span class="s">Try a shorter word, like smile or call.</span></span>';
+    this.emojiListEl.innerHTML = html;
+    this.emojiListEl.querySelectorAll("button[data-ch]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        this.textareaEl.value += btn.getAttribute("data-ch") ?? "";
+        this.emojiOpen = false;
+        this.autoGrow();
+        this.updateClasses();
+        this.textareaEl.focus();
+      });
+    });
+  }
+  // ── Bubble rendering ──────────────────────────────────────────────────────────────────────────
+  turnHtml(m, isLastBot) {
+    const role = m.role === "user" ? "user" : m.role === "human" ? "human" : "bot";
+    const atts = (m.attachments ?? []).map((a) => this.renderAttachment(a)).join("");
+    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 = `<span class="b">${atts}<span class="md">${rendered}</span></span>`;
+    } else {
+      const label = m.role === "human" ? '<div class="human-label">Support</div>' : "";
+      content = `<span class="b">${label}${atts}${escapeHtml(m.text)}</span>`;
+    }
+    const src = m.sources && m.sources.length > 0 ? `<span class="src">${ICON.book}<span class="t">${escapeHtml("From " + (m.sources[0]?.title ?? ""))}</span></span>` : "";
+    const byline = role === "bot" && isLastBot ? `<span class="byline">${escapeHtml((this.agentName ?? "OyeHello") + " \xB7 AI agent \xB7 " + this.relTime(m.id))}</span>` : "";
+    return `<span class="turn ${role}">${content}${src}${byline}</span>`;
+  }
+  relTime(id) {
+    const t = this.receivedAt.get(id);
+    if (!t) return "just now";
+    const mins = Math.floor((Date.now() - t) / 6e4);
+    return mins <= 0 ? "just now" : `${mins} min ago`;
   }
   renderAttachment(a) {
     if (a.contentType.startsWith("image/")) {
       const cached = (a.name ? this.imagePreviewCache.get(a.name) : void 0) ?? this.resolvedUrlCache.get(a.storageRef);
       const srcAttr = cached ? ` src="${cached}"` : "";
-      return `<img class="att-thumb" data-oc-ref="${escapeHtml(a.storageRef)}"${srcAttr} alt="${escapeHtml(a.name ?? "image")}"/>`;
+      return `<img class="att-thumb" data-oc-ref="${this.escapeAttr(a.storageRef)}"${srcAttr} alt="${this.escapeAttr(a.name ?? "image")}"/>`;
     }
     return `<div class="att-chip">\u{1F4CE} ${escapeHtml(a.name ?? a.contentType)}</div>`;
   }
-  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]");
-    imgs.forEach((img) => {
+    this.shadowRoot.querySelectorAll("img.att-thumb[data-oc-ref]").forEach((img) => {
       if (img.hasAttribute("src")) return;
       const ref = img.getAttribute("data-oc-ref");
       if (!ref) return;
@@ -458,82 +1265,8 @@ 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 errBanner = this.state === "error" && this.lastError ? `<div class="err">Couldn't start chat: ${escapeHtml(this.lastError)}</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}
-        .err{padding:8px 14px;font-size:12px;color:#b91c1c;background:#fef2f2;border-bottom:1px solid #fecaca}
-        .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}${errBanner}
-        <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();
+  escapeAttr(s) {
+    return s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
   }
 };
 function escapeHtml(s) {