@oyehello/chat 0.3.0 → 0.4.0

package/README.md

@@ -6,6 +6,8 @@ The widget connects lazily (a session opens the first time the visitor opens the
 
 ### Attributes
 
+The **accent/logo/name** (workspace brand), the **teaser** (a chat-agent setting), and the **quick-reply chips** (generated from the agent's flow after each reply) are served automatically by the API — the attributes below just override them.
+
 | Attribute | Required | What it is |
 | --- | --- | --- |
 | `api-key` | yes | Publishable key (`ohk_pub_…`) |

package/dist/index.cjs

@@ -43,6 +43,15 @@ async function openSession(opts) {
   if (!res.ok) throw await asError(res);
   return await res.json();
 }
+async function getWidgetConfig(opts) {
+  const res = await opts.fetchImpl(`${opts.baseUrl}/chat/widget-config?agentId=${encodeURIComponent(opts.agentId)}`, {
+    method: "GET",
+    credentials: "omit",
+    headers: { Authorization: `Bearer ${opts.apiKey}` }
+  });
+  if (!res.ok) throw await asError(res);
+  return await res.json();
+}
 async function postMessage(opts) {
   const body = { text: opts.text };
   if (opts.attachments && opts.attachments.length > 0) body.attachments = opts.attachments;
@@ -220,6 +229,8 @@ function createChatClient(options) {
       }
     } else if (ev.type === "agent_typing") {
       emit({ type: "agentTyping", active: !!ev.active });
+    } else if (ev.type === "suggestions") {
+      emit({ type: "suggestions", items: Array.isArray(ev.items) ? ev.items : [] });
     }
   };
   const openStream = async () => {
@@ -287,6 +298,9 @@ function createChatClient(options) {
       if (!session) throw new Error("call start() before getAttachmentUrl");
       return getAttachmentUrl({ baseUrl: options.baseUrl, sessionId: session.sessionId, sessionToken: session.sessionToken, storageRef, fetchImpl });
     },
+    getWidgetConfig() {
+      return getWidgetConfig({ baseUrl: options.baseUrl, apiKey: options.apiKey, agentId: options.agentId, fetchImpl });
+    },
     async start() {
       if (state === "opening" || state === "ready") return;
       closed = false;
@@ -533,8 +547,11 @@ var STYLES = `
   .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; }
+  /* Inline connection error, shown inside the chat window (no banner) */
+  .oc-err { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 16px; text-align: center; }
+  .oc-err-t { font-size: 13px; line-height: 1.5; color: var(--oc-fg-muted); text-wrap: pretty; }
+  .oc-err-retry { padding: 7px 15px; font-size: 12.5px; font-weight: 500; border-radius: var(--oc-r-full); border: 1px solid var(--oc-border); background: var(--oc-tint-2); color: var(--oc-fg); cursor: pointer; transition: background .18s var(--oc-ease); }
+  .oc-err-retry:hover { background: var(--oc-tint-3); }
 
   /* \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; }
@@ -802,6 +819,13 @@ var OyehelloChatElement = class extends HTMLElement {
   renderedCount = 0;
   renderedBotFinal = 0;
   timers = [];
+  // Server (flow) suggestions for the latest turn; null until the first `suggestions` event, then the
+  // widget prefers these over the static `suggestions` attribute.
+  serverSuggestions = null;
+  teaserText = "Need a hand? Ask me anything.";
+  teaserShownOnce = false;
+  idleTimer = null;
+  idleReset = null;
   // ── shadow refs ──
   oc;
   bodyEl;
@@ -809,7 +833,6 @@ var OyehelloChatElement = class extends HTMLElement {
   fileEl;
   titleEl;
   statusEl;
-  errEl;
   emojiListEl;
   emojiSearchEl;
   connectedCallback() {
@@ -821,6 +844,7 @@ var OyehelloChatElement = class extends HTMLElement {
       this.renderError("oyehello-chat: api-key, agent-id and base-url are required");
       return;
     }
+    this.teaserText = this.getAttribute("teaser") || this.teaserText;
     this.client = createChatClient({ apiKey, agentId, baseUrl });
     if (Object.keys(this.pendingTools).length > 0) {
       this.client.registerTools(this.pendingTools);
@@ -832,6 +856,7 @@ var OyehelloChatElement = class extends HTMLElement {
     this.updateHeader();
     this.updateStatus();
     this.updateClasses();
+    void this.loadWidgetConfig();
     let wasOpen = false;
     try {
       wasOpen = sessionStorage.getItem(this.key("open")) === "1";
@@ -845,24 +870,81 @@ var OyehelloChatElement = class extends HTMLElement {
     this.timers.push(setTimeout(() => {
       this.oc?.classList.remove("ring");
     }, 6e3));
-    const teaserText = this.getAttribute("teaser");
+    this.armIdleTeaser();
+  }
+  // Show the teaser once the visitor has been idle (no page interaction) for 10s — unless the panel
+  // is already open or the teaser was dismissed this session. Fires at most once.
+  armIdleTeaser() {
     let dismissed = false;
     try {
       dismissed = sessionStorage.getItem(this.key("teaser")) === "0";
     } catch {
     }
-    if (teaserText && !dismissed) {
-      this.timers.push(setTimeout(() => {
-        if (!this.uiOpen) {
+    if (dismissed) return;
+    const reset = () => {
+      if (this.idleTimer) clearTimeout(this.idleTimer);
+      this.idleTimer = setTimeout(() => {
+        if (!this.uiOpen && !this.teaserShownOnce) {
           this.teaserActive = true;
+          this.teaserShownOnce = true;
           this.updateClasses();
+          this.teardownIdle();
+        }
+      }, 1e4);
+    };
+    this.idleReset = reset;
+    for (const ev of ["mousemove", "keydown", "scroll", "touchstart", "click"]) document.addEventListener(ev, reset, { passive: true });
+    reset();
+  }
+  teardownIdle() {
+    if (this.idleTimer) {
+      clearTimeout(this.idleTimer);
+      this.idleTimer = null;
+    }
+    if (this.idleReset) {
+      for (const ev of ["mousemove", "keydown", "scroll", "touchstart", "click"]) document.removeEventListener(ev, this.idleReset);
+      this.idleReset = null;
+    }
+  }
+  async loadWidgetConfig() {
+    try {
+      const cfg = await this.client.getWidgetConfig();
+      if (!this.getAttribute("teaser") && cfg.teaser) {
+        this.teaserText = cfg.teaser;
+        this.applyTeaserText();
+      }
+      if (cfg.brand) {
+        if (cfg.brand.accentColor) this.style.setProperty("--oc-accent", cfg.brand.accentColor);
+        if (cfg.brand.name && !this.getAttribute("title")) {
+          this.agentName = cfg.brand.name;
+          this.updateHeader();
         }
-      }, 1400));
+        if (cfg.brand.logoUrl) this.applyBrandLogo(cfg.brand.logoUrl);
+      }
+    } catch {
     }
   }
+  applyTeaserText() {
+    const el = this.shadowRoot?.querySelector(".teaser-btn span:last-child");
+    if (el) el.textContent = this.teaserText;
+  }
+  applyBrandLogo(url) {
+    const set = (host) => {
+      if (!host) return;
+      host.textContent = "";
+      const img = document.createElement("img");
+      img.src = url;
+      img.alt = "";
+      img.style.cssText = "width:100%;height:100%;object-fit:contain";
+      host.appendChild(img);
+    };
+    set(this.shadowRoot?.querySelector(".hd .logo"));
+    set(this.shadowRoot?.querySelector(".teaser-btn .logo"));
+  }
   disconnectedCallback() {
     this.off?.();
     void this.client?.end();
+    this.teardownIdle();
     for (const t of this.timers) clearTimeout(t);
     for (const url of this.imagePreviewCache.values()) {
       if (typeof URL.revokeObjectURL === "function") URL.revokeObjectURL(url);
@@ -876,18 +958,22 @@ var OyehelloChatElement = class extends HTMLElement {
   key(k) {
     return `oyehello-chat:${k}:${this.getAttribute("agent-id") ?? ""}`;
   }
-  get suggestions() {
+  // Static fallback chips from the `suggestions` attribute (for embedders without flow-driven ones).
+  get attrSuggestions() {
     return (this.getAttribute("suggestions") ?? "").split(",").map((s) => s.trim()).filter(Boolean);
   }
+  // Effective chips: server (flow) suggestions once received, else the static attribute fallback.
+  get chipLabels() {
+    return this.serverSuggestions ?? this.attrSuggestions;
+  }
   // ── Shell (built once) ─────────────────────────────────────────────────────────────────────────
   renderShell() {
     const root = this.shadowRoot;
-    const hasTeaser = !!this.getAttribute("teaser");
     const hasPrivacy = !!this.getAttribute("privacy-url");
-    const teaserText = this.getAttribute("teaser") ?? "";
+    const teaserText = this.teaserText;
     root.innerHTML = `
       <style>${STYLES}</style>
-      <div class="oc${hasTeaser ? " has-teaser" : ""}${hasPrivacy ? " has-privacy" : ""}">
+      <div class="oc has-teaser${hasPrivacy ? " has-privacy" : ""}">
         <div class="panel" role="dialog" aria-label="Chat">
           <div class="hd">
             <span class="hd-grid"></span>
@@ -896,7 +982,6 @@ var OyehelloChatElement = class extends HTMLElement {
             <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">
@@ -940,7 +1025,6 @@ var OyehelloChatElement = class extends HTMLElement {
     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());
@@ -1021,6 +1105,7 @@ var OyehelloChatElement = class extends HTMLElement {
     this.uiOpen = true;
     this.teaserActive = false;
     this.unseen = 0;
+    this.teardownIdle();
     try {
       sessionStorage.setItem(this.key("open"), "1");
     } catch {
@@ -1063,6 +1148,7 @@ var OyehelloChatElement = class extends HTMLElement {
       this.updateHeader();
     } else if (e.type === "handoff") this.handoffState = e.state;
     else if (e.type === "agentTyping") this.agentTyping = e.active;
+    else if (e.type === "suggestions") this.serverSuggestions = e.items;
     else if (e.type === "error") this.lastError = e.error.message;
     this.updateStatus();
     this.renderMessages();
@@ -1077,16 +1163,6 @@ var OyehelloChatElement = class extends HTMLElement {
     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() {
@@ -1104,10 +1180,13 @@ var OyehelloChatElement = class extends HTMLElement {
     })();
     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;
+    const sugg = this.chipLabels;
     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>`;
     }
+    if (this.state === "error" && this.lastError) {
+      html += `<div class="oc-err"><span class="oc-err-t">${escapeHtml(this.lastError)}</span><button type="button" class="oc-err-retry">Try again</button></div>`;
+    }
     body.innerHTML = html;
     this.hydrateAttachmentImages();
     this.bindChips();
@@ -1185,12 +1264,15 @@ var OyehelloChatElement = class extends HTMLElement {
     this.updateClasses();
   }
   bindChips() {
-    const sugg = this.suggestions;
+    const sugg = this.chipLabels;
     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));
     });
+    this.bodyEl.querySelector(".oc-err-retry")?.addEventListener("click", () => {
+      void this.client?.start();
+    });
   }
   // ── Emoji ─────────────────────────────────────────────────────────────────────────────────────
   toggleEmoji() {