@oyehello/chat 0.4.0 → 0.5.0

package/README.md

@@ -36,9 +36,10 @@ npm install @oyehello/chat
 ```
 Or via a plain script tag (no bundler):
 ```html
-<script src="https://unpkg.com/@oyehello/chat"></script>
+<script src="https://unpkg.com/@oyehello/chat@0.5.0"></script>
 <oyehello-chat api-key="ohk_pub_…" agent-id="agt_…" base-url="https://api.oyehello.ai"></oyehello-chat>
 ```
+Pin a specific version (`@0.5.0` above) rather than the bare package name, so a customer's site loads the exact widget it was tested against instead of silently auto-upgrading on every publish.
 Theme the accent with the `--oc-accent` CSS variable.
 
 ### React

package/dist/index.cjs

@@ -21,6 +21,9 @@ var ChatApiError = class extends Error {
   meta;
 };
 
+// src/protocol.ts
+var CHAT_PROTOCOL_VERSION = 1;
+
 // src/transport.ts
 async function asError(res, fallbackCode) {
   let body = {};
@@ -31,9 +34,10 @@ async function asError(res, fallbackCode) {
   return new ChatApiError(body.error ?? `HTTP ${res.status}`, res.status, body.code ?? fallbackCode, body.meta);
 }
 async function openSession(opts) {
-  const body = { agentId: opts.agentId };
+  const body = { agentId: opts.agentId, protocol: CHAT_PROTOCOL_VERSION };
   if (opts.user) body.user = opts.user;
   if (opts.clientTools && opts.clientTools.length > 0) body.clientTools = opts.clientTools;
+  if (opts.fingerprint) body.fingerprint = opts.fingerprint;
   const res = await opts.fetchImpl(`${opts.baseUrl}/chat/sessions`, {
     method: "POST",
     credentials: "omit",
@@ -117,6 +121,50 @@ async function uploadToPresigned(uploadUrl, file, fetchImpl) {
   if (!res.ok) throw new ChatApiError(`attachment upload failed with HTTP ${res.status}`, res.status);
 }
 
+// src/fingerprint.ts
+async function sha256Hex(input) {
+  const g = globalThis;
+  try {
+    if (g.crypto?.subtle && typeof TextEncoder !== "undefined") {
+      const buf = await g.crypto.subtle.digest("SHA-256", new TextEncoder().encode(input));
+      return Array.from(new Uint8Array(buf)).map((b) => b.toString(16).padStart(2, "0")).join("").slice(0, 32);
+    }
+  } catch {
+  }
+  let h = 5381;
+  for (let i = 0; i < input.length; i++) h = (h << 5) + h + input.charCodeAt(i) >>> 0;
+  return h.toString(16).padStart(8, "0");
+}
+async function computeDeviceFingerprint() {
+  try {
+    const nav = typeof navigator !== "undefined" ? navigator : null;
+    if (!nav) return null;
+    const scr = typeof screen !== "undefined" ? screen : null;
+    const tz = (() => {
+      try {
+        return Intl.DateTimeFormat().resolvedOptions().timeZone;
+      } catch {
+        return "";
+      }
+    })();
+    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : "";
+    const signals = [
+      nav.userAgent,
+      Array.isArray(nav.languages) ? nav.languages.join(",") : "",
+      nav.language,
+      nav.platform,
+      nav.hardwareConcurrency,
+      nav.deviceMemory,
+      scr ? `${scr.width}x${scr.height}x${scr.colorDepth}` : "",
+      dpr,
+      tz
+    ].map((v) => String(v ?? "")).join("|");
+    return await sha256Hex(signals);
+  } catch {
+    return null;
+  }
+}
+
 // src/client.ts
 var seq = 0;
 var uid = (p) => `${p}_${Date.now().toString(36)}_${(seq++).toString(36)}`;
@@ -137,6 +185,8 @@ function createChatClient(options) {
   let reconnectTimer = null;
   let reconnectAttempts = 0;
   let closed = false;
+  let warnedProtocol = false;
+  let deviceFingerprint;
   const toolHandlers = /* @__PURE__ */ new Map();
   const clearReconnect = () => {
     if (reconnectTimer) {
@@ -231,6 +281,12 @@ function createChatClient(options) {
       emit({ type: "agentTyping", active: !!ev.active });
     } else if (ev.type === "suggestions") {
       emit({ type: "suggestions", items: Array.isArray(ev.items) ? ev.items : [] });
+    } else if (ev.type === "done") {
+      closed = true;
+      clearReconnect();
+      es?.close();
+      es = null;
+      setState("ended");
     }
   };
   const openStream = async () => {
@@ -273,7 +329,15 @@ function createChatClient(options) {
     }, delay);
   };
   const open = async () => {
-    session = await openSession({ baseUrl: options.baseUrl, apiKey: options.apiKey, agentId: options.agentId, user: options.user, clientTools: Array.from(toolHandlers.keys()), fetchImpl });
+    if (deviceFingerprint === void 0) deviceFingerprint = await computeDeviceFingerprint().catch(() => null);
+    session = await openSession({ baseUrl: options.baseUrl, apiKey: options.apiKey, agentId: options.agentId, user: options.user, clientTools: Array.from(toolHandlers.keys()), fingerprint: deviceFingerprint ?? void 0, fetchImpl });
+    if (!warnedProtocol && typeof session.protocol === "number" && session.protocol !== CHAT_PROTOCOL_VERSION) {
+      warnedProtocol = true;
+      try {
+        console.warn(`[oyehello-chat] SDK protocol v${CHAT_PROTOCOL_VERSION} vs server v${session.protocol} - update @oyehello/chat to the latest version.`);
+      } catch {
+      }
+    }
     emit({ type: "agent", agent: session.agent });
     await openStream();
   };
@@ -364,6 +428,20 @@ function createChatClient(options) {
       es?.close();
       es = null;
       setState("ended");
+    },
+    reset() {
+      es?.close();
+      es = null;
+      clearReconnect();
+      session = null;
+      streamingId = null;
+      handoffState = "ai";
+      messages.length = 0;
+      seenTurnIds.clear();
+      seenCallIds.clear();
+      emit({ type: "messages", messages: [] });
+      emit({ type: "handoff", state: "ai" });
+      setState("idle");
     }
   };
 }
@@ -553,6 +631,12 @@ var STYLES = `
   .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); }
 
+  /* Session-ended state, inside the chat window */
+  .oc-ended { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 16px; text-align: center; }
+  .oc-ended-t { font-size: 13.5px; line-height: 1.5; color: var(--oc-fg-muted); text-wrap: pretty; }
+  .oc-newmsg { padding: 9px 18px; font-size: 13px; font-weight: 600; border-radius: var(--oc-r-full); border: 1px solid var(--oc-btn-rim); background: var(--oc-ac); color: #fff; box-shadow: var(--oc-btn-edge); cursor: pointer; transition: filter .18s var(--oc-ease); }
+  .oc-newmsg:hover { filter: brightness(1.08); }
+
   /* \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; }
@@ -822,8 +906,19 @@ var OyehelloChatElement = class extends HTMLElement {
   // 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;
+  // The live streaming assistant bubble's markdown element + message id — so growing tokens patch just
+  // that element in place instead of rebuilding the whole message list on every token.
+  streamId = null;
+  streamEl = null;
+  audioCtx = null;
   teaserText = "Need a hand? Ask me anything.";
   teaserShownOnce = false;
+  // Staffed-hours: set from widget-config. When offline, the panel shows offlineMessage and the
+  // composer is disabled (opening a session is refused server-side anyway).
+  offline = false;
+  offlineMessage = "We're offline right now. Please check back during business hours.";
+  configLoaded = false;
+  // widget-config resolved (so we know online/offline before starting)
   idleTimer = null;
   idleReset = null;
   // ── shadow refs ──
@@ -921,7 +1016,19 @@ var OyehelloChatElement = class extends HTMLElement {
         }
         if (cfg.brand.logoUrl) this.applyBrandLogo(cfg.brand.logoUrl);
       }
+      if (cfg.offline) {
+        this.offline = true;
+        if (cfg.offlineMessage) this.offlineMessage = cfg.offlineMessage;
+        this.renderMessages();
+        this.updateStatus();
+      }
     } catch {
+    } finally {
+      this.configLoaded = true;
+      if (this.uiOpen && !this.started && !this.offline && this.client) {
+        this.started = true;
+        void this.client.start();
+      }
     }
   }
   applyTeaserText() {
@@ -1110,7 +1217,7 @@ var OyehelloChatElement = class extends HTMLElement {
       sessionStorage.setItem(this.key("open"), "1");
     } catch {
     }
-    if (!this.started && this.client) {
+    if (!this.started && this.client && this.configLoaded && !this.offline) {
       this.started = true;
       void this.client.start();
     }
@@ -1158,16 +1265,22 @@ var OyehelloChatElement = class extends HTMLElement {
   }
   updateStatus() {
     if (!this.textareaEl) return;
-    const disabled = this.state !== "ready";
+    const disabled = this.state !== "ready" || this.offline;
     this.textareaEl.disabled = disabled;
     const handoff = HANDOFF_STATUS[this.handoffState];
-    const text = this.state === "opening" ? "Connecting\u2026" : handoff ?? (this.getAttribute("status") ?? DEFAULT_STATUS);
+    const text = this.offline ? "Offline" : this.state === "opening" ? "Connecting\u2026" : handoff ?? (this.getAttribute("status") ?? DEFAULT_STATUS);
     if (this.statusEl) this.statusEl.textContent = text;
   }
   // ── Message list + scroll ─────────────────────────────────────────────────────────────────────
   renderMessages() {
     if (!this.bodyEl) return;
     const body = this.bodyEl;
+    const last = this.messages[this.messages.length - 1];
+    if (this.uiOpen && this.streamEl && last && last.id === this.streamId && last.role === "assistant" && last.streaming && this.messages.length === this.renderedCount) {
+      this.streamEl.innerHTML = renderMarkdown(last.text || "");
+      if (!this.away) this.scrollToBottom();
+      return;
+    }
     const prevTop = body.scrollTop;
     const added = this.messages.length - this.renderedCount;
     const botFinal = this.messages.filter((m) => m.role === "assistant" && !m.streaming).length;
@@ -1187,13 +1300,29 @@ var OyehelloChatElement = class extends HTMLElement {
     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>`;
     }
+    if (this.state === "ended") {
+      html += `<div class="oc-ended"><span class="oc-ended-t">Your conversation has ended.</span><button type="button" class="oc-newmsg">New message</button></div>`;
+    }
+    if (this.offline && this.messages.length === 0 && this.state !== "ended") {
+      html += `<div class="oc-ended"><span class="oc-ended-t">${escapeHtml(this.offlineMessage)}</span></div>`;
+    }
     body.innerHTML = html;
     this.hydrateAttachmentImages();
     this.bindChips();
     this.renderedCount = this.messages.length;
     this.renderedBotFinal = botFinal;
+    this.streamId = null;
+    this.streamEl = null;
+    if (last && last.role === "assistant" && last.streaming) {
+      const mds = this.bodyEl.querySelectorAll(".turn.bot .md");
+      this.streamEl = mds[mds.length - 1] ?? null;
+      if (this.streamEl) this.streamId = last.id;
+    }
     if (!this.uiOpen) {
-      if (added > 0) this.unseen += added;
+      if (added > 0) {
+        this.unseen += added;
+        this.maybeChime();
+      }
       this.updateClasses();
       return;
     }
@@ -1201,7 +1330,10 @@ var OyehelloChatElement = class extends HTMLElement {
     else if (!this.away) this.scrollToBottom();
     else {
       body.scrollTop = prevTop;
-      if (added > 0) this.unseen += added;
+      if (added > 0) {
+        this.unseen += added;
+        this.maybeChime();
+      }
     }
     this.updateClasses();
   }
@@ -1252,6 +1384,7 @@ var OyehelloChatElement = class extends HTMLElement {
     }
     this.away = false;
     this.emojiOpen = false;
+    this.serverSuggestions = [];
     void this.client?.sendMessage(text, files.length > 0 ? files : void 0);
     this.textareaEl.value = "";
     this.textareaEl.style.height = "auto";
@@ -1260,6 +1393,7 @@ var OyehelloChatElement = class extends HTMLElement {
   sendChip(text) {
     this.away = false;
     this.emojiOpen = false;
+    this.serverSuggestions = [];
     void this.client?.sendMessage(text);
     this.updateClasses();
   }
@@ -1273,6 +1407,56 @@ var OyehelloChatElement = class extends HTMLElement {
     this.bodyEl.querySelector(".oc-err-retry")?.addEventListener("click", () => {
       void this.client?.start();
     });
+    this.bodyEl.querySelector(".oc-newmsg")?.addEventListener("click", () => this.startFresh());
+  }
+  // Reset the thread and open a brand-new session (the widget's "New message" after a session ended).
+  startFresh() {
+    this.serverSuggestions = null;
+    this.receivedAt.clear();
+    this.mdCache.clear();
+    this.streamId = null;
+    this.streamEl = null;
+    this.renderedCount = 0;
+    this.renderedBotFinal = 0;
+    this.away = false;
+    this.unseen = 0;
+    this.client?.reset();
+    this.started = true;
+    void this.client?.start();
+    setTimeout(() => this.textareaEl?.focus(), 60);
+  }
+  // A short two-tone chime for an incoming message the visitor hasn't seen (panel closed or scrolled
+  // up). Off when the `sound="off"` attribute is set. Uses WebAudio (no asset); silent if unavailable
+  // or the browser hasn't allowed audio yet.
+  maybeChime() {
+    const last = this.messages[this.messages.length - 1];
+    if (last && (last.role === "assistant" || last.role === "human")) this.playChime();
+  }
+  playChime() {
+    if (this.getAttribute("sound") === "off") return;
+    try {
+      const Ctx = window.AudioContext ?? window.webkitAudioContext;
+      if (!Ctx) return;
+      if (!this.audioCtx) this.audioCtx = new Ctx();
+      const ctx = this.audioCtx;
+      if (ctx.state === "suspended") void ctx.resume();
+      const now = ctx.currentTime;
+      [880, 1174.66].forEach((freq, i) => {
+        const osc = ctx.createOscillator();
+        const gain = ctx.createGain();
+        osc.type = "sine";
+        osc.frequency.value = freq;
+        const t = now + i * 0.11;
+        gain.gain.setValueAtTime(1e-4, t);
+        gain.gain.exponentialRampToValueAtTime(0.12, t + 0.02);
+        gain.gain.exponentialRampToValueAtTime(1e-4, t + 0.18);
+        osc.connect(gain);
+        gain.connect(ctx.destination);
+        osc.start(t);
+        osc.stop(t + 0.2);
+      });
+    } catch {
+    }
   }
   // ── Emoji ─────────────────────────────────────────────────────────────────────────────────────
   toggleEmoji() {