@oyehello/chat 0.3.0 → 0.4.0

package/dist/index.d.cts

@@ -52,7 +52,19 @@ type ChatEvent = {
 } | {
     type: 'agent_typing';
     active: boolean;
+} | {
+    type: 'suggestions';
+    turnId: string;
+    items: string[];
 };
+interface WidgetConfig {
+    teaser: string;
+    brand: {
+        name: string | null;
+        logoUrl: string | null;
+        accentColor: string | null;
+    } | null;
+}
 interface OpenSessionResponse {
     sessionId: string;
     sessionToken: string;
@@ -116,6 +128,9 @@ type ChatClientEvent = {
 } | {
     type: 'agentTyping';
     active: boolean;
+} | {
+    type: 'suggestions';
+    items: string[];
 };
 type ChatToolHandler = (args: Record<string, unknown>) => unknown | Promise<unknown>;
 interface ChatClient {
@@ -127,6 +142,7 @@ interface ChatClient {
     on(listener: (e: ChatClientEvent) => void): () => void;
     registerTools(handlers: Record<string, ChatToolHandler>): void;
     getAttachmentUrl(storageRef: string): Promise<string>;
+    getWidgetConfig(): Promise<WidgetConfig>;
 }
 declare function createChatClient(options: ChatClientOptions): ChatClient;
 
@@ -158,20 +174,30 @@ declare class OyehelloChatElement extends HTMLElement {
     private renderedCount;
     private renderedBotFinal;
     private timers;
+    private serverSuggestions;
+    private teaserText;
+    private teaserShownOnce;
+    private idleTimer;
+    private idleReset;
     private oc;
     private bodyEl;
     private textareaEl;
     private fileEl;
     private titleEl;
     private statusEl;
-    private errEl;
     private emojiListEl;
     private emojiSearchEl;
     connectedCallback(): void;
+    private armIdleTeaser;
+    private teardownIdle;
+    private loadWidgetConfig;
+    private applyTeaserText;
+    private applyBrandLogo;
     disconnectedCallback(): void;
     registerTools(handlers: Record<string, ChatToolHandler>): void;
     private key;
-    private get suggestions();
+    private get attrSuggestions();
+    private get chipLabels();
     private renderShell;
     private renderError;
     private updateClasses;
@@ -200,4 +226,4 @@ declare class OyehelloChatElement extends HTMLElement {
     private escapeAttr;
 }
 
-export { ChatApiError, type ChatAttachmentDescriptor, type ChatClient, type ChatClientEvent, type ChatClientOptions, type ChatClientState, type ChatEvent, type ChatMessage, type ChatToolHandler, type OpenSessionResponse, OyehelloChatElement, createChatClient };
+export { ChatApiError, type ChatAttachmentDescriptor, type ChatClient, type ChatClientEvent, type ChatClientOptions, type ChatClientState, type ChatEvent, type ChatMessage, type ChatToolHandler, type OpenSessionResponse, OyehelloChatElement, type WidgetConfig, createChatClient };

package/dist/index.d.ts

@@ -52,7 +52,19 @@ type ChatEvent = {
 } | {
     type: 'agent_typing';
     active: boolean;
+} | {
+    type: 'suggestions';
+    turnId: string;
+    items: string[];
 };
+interface WidgetConfig {
+    teaser: string;
+    brand: {
+        name: string | null;
+        logoUrl: string | null;
+        accentColor: string | null;
+    } | null;
+}
 interface OpenSessionResponse {
     sessionId: string;
     sessionToken: string;
@@ -116,6 +128,9 @@ type ChatClientEvent = {
 } | {
     type: 'agentTyping';
     active: boolean;
+} | {
+    type: 'suggestions';
+    items: string[];
 };
 type ChatToolHandler = (args: Record<string, unknown>) => unknown | Promise<unknown>;
 interface ChatClient {
@@ -127,6 +142,7 @@ interface ChatClient {
     on(listener: (e: ChatClientEvent) => void): () => void;
     registerTools(handlers: Record<string, ChatToolHandler>): void;
     getAttachmentUrl(storageRef: string): Promise<string>;
+    getWidgetConfig(): Promise<WidgetConfig>;
 }
 declare function createChatClient(options: ChatClientOptions): ChatClient;
 
@@ -158,20 +174,30 @@ declare class OyehelloChatElement extends HTMLElement {
     private renderedCount;
     private renderedBotFinal;
     private timers;
+    private serverSuggestions;
+    private teaserText;
+    private teaserShownOnce;
+    private idleTimer;
+    private idleReset;
     private oc;
     private bodyEl;
     private textareaEl;
     private fileEl;
     private titleEl;
     private statusEl;
-    private errEl;
     private emojiListEl;
     private emojiSearchEl;
     connectedCallback(): void;
+    private armIdleTeaser;
+    private teardownIdle;
+    private loadWidgetConfig;
+    private applyTeaserText;
+    private applyBrandLogo;
     disconnectedCallback(): void;
     registerTools(handlers: Record<string, ChatToolHandler>): void;
     private key;
-    private get suggestions();
+    private get attrSuggestions();
+    private get chipLabels();
     private renderShell;
     private renderError;
     private updateClasses;
@@ -200,4 +226,4 @@ declare class OyehelloChatElement extends HTMLElement {
     private escapeAttr;
 }
 
-export { ChatApiError, type ChatAttachmentDescriptor, type ChatClient, type ChatClientEvent, type ChatClientOptions, type ChatClientState, type ChatEvent, type ChatMessage, type ChatToolHandler, type OpenSessionResponse, OyehelloChatElement, createChatClient };
+export { ChatApiError, type ChatAttachmentDescriptor, type ChatClient, type ChatClientEvent, type ChatClientOptions, type ChatClientState, type ChatEvent, type ChatMessage, type ChatToolHandler, type OpenSessionResponse, OyehelloChatElement, type WidgetConfig, createChatClient };

package/dist/index.global.js

@@ -37,6 +37,15 @@ var OyehelloChat = (function (exports) {
     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;
@@ -214,6 +223,8 @@ var OyehelloChat = (function (exports) {
         }
       } 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 () => {
@@ -281,6 +292,9 @@ var OyehelloChat = (function (exports) {
         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;
@@ -1972,8 +1986,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       DOMPurify.isSupported = false;
       return DOMPurify;
     }
-    let document = window2.document;
-    const originalDocument = document;
+    let document2 = window2.document;
+    const originalDocument = document2;
     const currentScript = originalDocument.currentScript;
     window2.DocumentFragment;
     const HTMLTemplateElement = window2.HTMLTemplateElement, Node = window2.Node, Element = window2.Element, NodeFilter = window2.NodeFilter, _window$NamedNodeMap = window2.NamedNodeMap;
@@ -1999,9 +2013,9 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       return getNodeName ? getNodeName(node) : node.nodeName;
     };
     if (typeof HTMLTemplateElement === "function") {
-      const template = document.createElement("template");
+      const template = document2.createElement("template");
       if (template.content && template.content.ownerDocument) {
-        document = template.content.ownerDocument;
+        document2 = template.content.ownerDocument;
       }
     }
     let trustedTypesPolicy;
@@ -2039,7 +2053,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       }
       return defaultTrustedTypesPolicy;
     };
-    const _document = document, implementation = _document.implementation, createNodeIterator = _document.createNodeIterator, createDocumentFragment = _document.createDocumentFragment, getElementsByTagName = _document.getElementsByTagName;
+    const _document = document2, implementation = _document.implementation, createNodeIterator = _document.createNodeIterator, createDocumentFragment = _document.createDocumentFragment, getElementsByTagName = _document.getElementsByTagName;
     const importNode = originalDocument.importNode;
     let hooks = _createHooksMap();
     DOMPurify.isSupported = typeof entries === "function" && typeof getParentNode === "function" && implementation && implementation.createHTMLDocument !== void 0;
@@ -2164,7 +2178,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     const DEFAULT_PARSER_MEDIA_TYPE = "text/html";
     let transformCaseFunc = null;
     let CONFIG = null;
-    const formElement = document.createElement("form");
+    const formElement = document2.createElement("form");
     const isRegexOrFunction = function isRegexOrFunction2(testValue) {
       return testValue instanceof RegExp || testValue instanceof Function;
     };
@@ -2592,7 +2606,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       }
       const body = doc.body || doc.documentElement;
       if (dirty && leadingWhitespace) {
-        body.insertBefore(document.createTextNode(leadingWhitespace), body.childNodes[0] || null);
+        body.insertBefore(document2.createTextNode(leadingWhitespace), body.childNodes[0] || null);
       }
       if (NAMESPACE === HTML_NAMESPACE) {
         return getElementsByTagName.call(doc, WHOLE_DOCUMENT ? "html" : "body")[0];
@@ -2827,7 +2841,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       if (_isPatchLinkageAttribute(lcName, lcTag)) {
         return false;
       }
-      if (SANITIZE_DOM && (lcName === "id" || lcName === "name") && (value in document || value in formElement)) {
+      if (SANITIZE_DOM && (lcName === "id" || lcName === "name") && (value in document2 || value in formElement)) {
         return false;
       }
       const nameIsPermitted = ALLOWED_ATTR2[lcName] || EXTRA_ELEMENT_HANDLING.attributeCheck instanceof Function && EXTRA_ELEMENT_HANDLING.attributeCheck(lcName, lcTag);
@@ -3407,8 +3421,11 @@ Please report this to https://github.com/markedjs/marked.`, e) {
   .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; }
@@ -3676,6 +3693,13 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     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;
@@ -3683,7 +3707,6 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     fileEl;
     titleEl;
     statusEl;
-    errEl;
     emojiListEl;
     emojiSearchEl;
     connectedCallback() {
@@ -3695,6 +3718,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         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);
@@ -3706,6 +3730,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       this.updateHeader();
       this.updateStatus();
       this.updateClasses();
+      void this.loadWidgetConfig();
       let wasOpen = false;
       try {
         wasOpen = sessionStorage.getItem(this.key("open")) === "1";
@@ -3719,24 +3744,81 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       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();
           }
-        }, 1400));
+        }, 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();
+          }
+          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);
@@ -3750,18 +3832,22 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     key(k2) {
       return `oyehello-chat:${k2}:${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>
@@ -3770,7 +3856,6 @@ Please report this to https://github.com/markedjs/marked.`, e) {
             <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">
@@ -3814,7 +3899,6 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       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());
@@ -3895,6 +3979,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       this.uiOpen = true;
       this.teaserActive = false;
       this.unseen = 0;
+      this.teardownIdle();
       try {
         sessionStorage.setItem(this.key("open"), "1");
       } catch {
@@ -3937,6 +4022,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         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();
@@ -3951,16 +4037,6 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       const handoff = HANDOFF_STATUS[this.handoffState];
       const text2 = this.state === "opening" ? "Connecting\u2026" : handoff ?? (this.getAttribute("status") ?? DEFAULT_STATUS);
       if (this.statusEl) this.statusEl.textContent = text2;
-      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() {
@@ -3978,10 +4054,13 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       })();
       let html2 = this.messages.map((m2, i) => this.turnHtml(m2, i === lastBot && !this.agentTyping)).join("");
       if (this.agentTyping) html2 += '<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") {
         html2 += `<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) {
+        html2 += `<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 = html2;
       this.hydrateAttachmentImages();
       this.bindChips();
@@ -4059,12 +4138,15 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       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 text2 = sugg[i];
         if (text2) btn.addEventListener("click", () => this.sendChip(text2));
       });
+      this.bodyEl.querySelector(".oc-err-retry")?.addEventListener("click", () => {
+        void this.client?.start();
+      });
     }
     // ── Emoji ─────────────────────────────────────────────────────────────────────────────────────
     toggleEmoji() {