@spilki/widget 0.1.4 → 1.0.27

package/dist/widget.es.js

@@ -1,9 +1,16 @@
-const O = `
+const W = `
   <style>
     :host {
       all: initial;
       position: fixed;
       z-index: 2147483000;
+      bottom: 24px;
+    }
+    :host([data-position="bottom-right"]) {
+      right: 24px;
+    }
+    :host([data-position="bottom-left"]) {
+      left: 24px;
     }
     button {
       all: unset;
@@ -44,11 +51,11 @@ const O = `
     </span>
   </button>
 `;
-function A(r) {
+function L(r) {
   const e = document.createElement("div");
-  e.setAttribute("part", "bubble-root"), e.style.setProperty("--spilki-accent", r.color), e.style.position = "fixed", e.style.bottom = "24px", e.style[r.position === "bottom-right" ? "right" : "left"] = "24px";
+  e.setAttribute("part", "bubble-root"), e.setAttribute("data-position", r.position), e.style.setProperty("--spilki-accent", r.color);
   const t = e.attachShadow({ mode: "open" });
-  t.innerHTML = O;
+  t.innerHTML = W;
   const s = t.querySelector("button");
   return s.addEventListener("click", () => r.onClick()), {
     element: e,
@@ -58,41 +65,103 @@ function A(r) {
     destroy() {
       e.remove();
     },
-    setOpen(n) {
-      s.setAttribute("aria-expanded", String(n));
+    setOpen(o) {
+      s.setAttribute("aria-expanded", String(o)), s.setAttribute("aria-label", o ? "Close chat" : "Open chat");
     }
   };
 }
-const M = ':host{--spilki-bg-light: #ffffff;--spilki-bg-dark: #0f172a;--spilki-text-light: #0f172a;--spilki-text-dark: #f8fafc;--spilki-border-light: rgba(15, 23, 42, .1);--spilki-border-dark: rgba(148, 163, 184, .25);--spilki-shadow: 0 10px 40px rgba(15, 23, 42, .2);--spilki-radius: 16px;--spilki-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;color:inherit;font-family:var(--spilki-font)}.wrapper{width:100%;height:100%;display:flex;flex-direction:column;background:var(--spilki-surface);color:var(--spilki-text);border-radius:var(--spilki-radius);box-shadow:var(--spilki-shadow);border:1px solid var(--spilki-border);overflow:hidden}header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--spilki-surface);border-bottom:1px solid var(--spilki-border)}header h1{font-size:1rem;margin:0;display:flex;align-items:center;gap:.5rem}header button.close{border:none;background:transparent;color:inherit;font-size:1.25rem;cursor:pointer}header .status-dot{width:10px;height:10px;border-radius:999px;background:var(--spilki-accent)}.messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem}.message{display:flex;flex-direction:column;gap:.25rem;max-width:85%;line-height:1.4;word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-wrap}.message.user{align-self:flex-end;text-align:right}.message .bubble{padding:.6rem .8rem;border-radius:1rem;background:#6366f126}.message.user .bubble{background:var(--spilki-accent);color:#fff}.message.bot .bubble{background:#94a3b826}.input-area{display:flex;align-items:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--spilki-border)}.input-area textarea{flex:1;resize:none;min-height:2.5rem;max-height:6rem;border-radius:.75rem;border:1px solid var(--spilki-border);padding:.6rem .75rem;font-family:inherit;font-size:.95rem;background:var(--spilki-surface);color:var(--spilki-text)}.input-area button{border:none;border-radius:999px;padding:.6rem 1.1rem;background:var(--spilki-accent);color:#fff;font-weight:600;cursor:pointer}.typing{font-size:.75rem;color:#94a3b8e6;padding:0 1rem .75rem}.offline{font-size:.8rem;padding:0 1rem;color:#f97316}:host([data-theme="dark"]){--spilki-surface: var(--spilki-bg-dark);--spilki-text: var(--spilki-text-dark);--spilki-border: var(--spilki-border-dark)}:host([data-theme="light"]){--spilki-surface: var(--spilki-bg-light);--spilki-text: var(--spilki-text-light);--spilki-border: var(--spilki-border-light)}:host([data-theme="dark"]) .message .bubble{background:#94a3b81f}:host([data-theme="dark"]) .message.bot .bubble{background:#6366f126}:host([data-theme="dark"]) .input-area textarea{background:#0f172ad9}.messages::-webkit-scrollbar,.input-area textarea::-webkit-scrollbar{width:6px}.messages::-webkit-scrollbar-track,.input-area textarea::-webkit-scrollbar-track{background:transparent}.messages::-webkit-scrollbar-thumb,.input-area textarea::-webkit-scrollbar-thumb{background:#94a3b84d;border-radius:999px}.messages::-webkit-scrollbar-thumb:hover,.input-area textarea::-webkit-scrollbar-thumb:hover{background:#94a3b880}:host([data-theme="dark"]) .messages::-webkit-scrollbar-thumb,:host([data-theme="dark"]) .input-area textarea::-webkit-scrollbar-thumb{background:#fff3}:host([data-theme="dark"]) .messages::-webkit-scrollbar-thumb:hover,:host([data-theme="dark"]) .input-area textarea::-webkit-scrollbar-thumb:hover{background:#ffffff59}.messages{scroll-behavior:smooth}';
-class C {
+const B = "https://api.spilki.ai", S = {
+  welcome: "Hi! I'm your assistant.",
+  placeholder: "Type a message…",
+  sendLabel: "Send",
+  typing: "Assistant is typing…",
+  offline: "Unable to connect. Please try again later.",
+  title: "Spilki Assistant"
+}, g = {
+  apiBase: B,
+  position: "bottom-right",
+  theme: "auto",
+  color: "#6366f1",
+  welcome: S.welcome,
+  persist: !0,
+  i18n: S
+};
+function K(r) {
+  var t, s, i, o, c, a, n;
+  const e = { ...S, ...(t = r.i18n) != null ? t : {} };
+  return {
+    ...g,
+    ...r,
+    apiBase: (s = r.apiBase) != null ? s : g.apiBase,
+    i18n: e,
+    welcome: (i = r.welcome) != null ? i : e.welcome,
+    position: (o = r.position) != null ? o : g.position,
+    theme: (c = r.theme) != null ? c : g.theme,
+    color: (a = r.color) != null ? a : g.color,
+    persist: (n = r.persist) != null ? n : g.persist
+  };
+}
+function P(r = "msg") {
+  return typeof crypto != "undefined" && crypto.randomUUID ? crypto.randomUUID() : `${r}-${Math.random().toString(16).slice(2)}`;
+}
+function D() {
+  var r, e;
+  return (e = (r = window.matchMedia) == null ? void 0 : r.call(window, "(prefers-color-scheme: dark)").matches) != null ? e : !1;
+}
+function C(r) {
+  return r === "light" || r === "dark" ? r : D() ? "dark" : "light";
+}
+function y(r, e = 30) {
+  return r.slice(-e);
+}
+function N(r) {
+  if (!r || r.length === 0) return;
+  const e = window.location.origin;
+  r.includes(e) || console.warn(
+    `SpilkiWidget: current origin ${e} not in allowedOriginsHint: ${r.join(", ")}`
+  );
+}
+const F = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+function H(r) {
+  const e = new Date(r), t = /* @__PURE__ */ new Date(), s = (n) => String(n).padStart(2, "0"), i = `${s(e.getHours())}:${s(e.getMinutes())}`, o = new Date(t.getFullYear(), t.getMonth(), t.getDate()).getTime(), c = o - 864e5, a = new Date(e.getFullYear(), e.getMonth(), e.getDate()).getTime();
+  return a === o ? `Today at ${i}` : a === c ? `Yesterday at ${i}` : `${F[e.getMonth()]} ${e.getDate()}, ${i}`;
+}
+const U = ':host{--spilki-bg-light: #ffffff;--spilki-bg-dark: #0f172a;--spilki-text-light: #0f172a;--spilki-text-dark: #f8fafc;--spilki-border-light: rgba(15, 23, 42, .1);--spilki-border-dark: rgba(148, 163, 184, .25);--spilki-shadow: 0 10px 40px rgba(15, 23, 42, .2);--spilki-radius: 16px;--spilki-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;color:inherit;font-family:var(--spilki-font)}.wrapper{width:100%;height:100%;display:flex;flex-direction:column;background:var(--spilki-surface);color:var(--spilki-text);border-radius:var(--spilki-radius);box-shadow:var(--spilki-shadow);border:1px solid var(--spilki-border);overflow:hidden}header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--spilki-surface);border-bottom:1px solid var(--spilki-border)}header h1{font-size:1rem;margin:0;display:flex;align-items:center;gap:.5rem}header button.close{border:none;background:transparent;color:inherit;font-size:1.25rem;cursor:pointer}header button.close:focus-visible{outline:2px solid var(--spilki-accent);outline-offset:2px;border-radius:4px}header .status-dot{width:10px;height:10px;border-radius:999px;background:var(--spilki-accent)}.messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem;scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.3) transparent}.message{display:flex;flex-direction:column;gap:.25rem;max-width:85%;line-height:1.4;word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-wrap}.message.user{align-self:flex-end;text-align:right}.message .bubble{padding:.6rem .8rem;border-radius:1rem;background:#6366f126}.message.user .bubble{background:var(--spilki-accent);color:#fff}.message.bot .bubble{background:#94a3b826}.input-area{display:flex;align-items:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--spilki-border)}.input-area textarea{flex:1;resize:none;min-height:2.5rem;max-height:6rem;border-radius:.75rem;border:1px solid var(--spilki-border);padding:.6rem .75rem;font-family:inherit;font-size:.95rem;background:var(--spilki-surface);color:var(--spilki-text);scrollbar-width:thin;.input-area textarea:focus-visible{outline:2px solid var(--spilki-accent);outline-offset:-1px}scrollbar-color:rgba(148,163,184,.3) transparent}.input-area button{border:none;border-radius:999px;padding:.6rem 1.1rem;background:var(--spilki-accent);color:#fff;font-weight:600;cursor:pointer}.input-area button:focus-visible{outline:2px solid #fff;outline-offset:2px}.typing{font-size:.75rem;color:#94a3b8e6;padding:0 1rem .75rem}.offline{font-size:.8rem;padding:0 1rem;color:#f97316}:host([data-theme="dark"]){--spilki-surface: var(--spilki-bg-dark);--spilki-text: var(--spilki-text-dark);--spilki-border: var(--spilki-border-dark)}:host([data-theme="dark"]) .messages,:host([data-theme="dark"]) .input-area textarea{scrollbar-color:rgba(255,255,255,.2) transparent}:host([data-theme="light"]){--spilki-surface: var(--spilki-bg-light);--spilki-text: var(--spilki-text-light);--spilki-border: var(--spilki-border-light)}:host([data-theme="dark"]) .message .bubble{background:#94a3b81f}:host([data-theme="dark"]) .message.bot .bubble{background:#6366f126}:host([data-theme="dark"]) .input-area textarea{background:#0f172ad9}.messages::-webkit-scrollbar,.input-area textarea::-webkit-scrollbar{width:6px}.messages::-webkit-scrollbar-track,.input-area textarea::-webkit-scrollbar-track{background:transparent}.messages::-webkit-scrollbar-thumb,.input-area textarea::-webkit-scrollbar-thumb{background:#94a3b84d;border-radius:999px}.messages::-webkit-scrollbar-thumb:hover,.input-area textarea::-webkit-scrollbar-thumb:hover{background:#94a3b880}:host([data-theme="dark"]) .messages::-webkit-scrollbar-thumb,:host([data-theme="dark"]) .input-area textarea::-webkit-scrollbar-thumb{background:#fff3}:host([data-theme="dark"]) .messages::-webkit-scrollbar-thumb:hover,:host([data-theme="dark"]) .input-area textarea::-webkit-scrollbar-thumb:hover{background:#ffffff59}.messages{scroll-behavior:smooth}.conversation-separator{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;cursor:pointer;user-select:none;font-size:.7rem;color:#94a3b8b3;white-space:nowrap}.conversation-separator:before,.conversation-separator:after{content:"";flex:1;height:1px;background:var(--spilki-border)}.conversation-separator:hover{color:#94a3b8e6}.conversation-separator:focus-visible{outline:2px solid var(--spilki-accent);outline-offset:2px;border-radius:4px}.conversation-history{display:none;flex-direction:column;gap:.5rem}.conversation-history.expanded{display:flex}';
+function b(r) {
+  return r.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+class z {
   constructor(e) {
-    this.options = e, this.focusable = [], this.open = !1, this.host = document.createElement("div"), this.host.setAttribute("part", "panel-root"), this.host.style.position = "fixed", this.host.style.bottom = "96px", this.host.style[e.position === "bottom-right" ? "right" : "left"] = "24px", this.host.style.width = "360px", this.host.style.maxWidth = "calc(100vw - 32px)", this.host.style.height = "520px", this.host.style.display = "none", this.host.style.zIndex = "2147483001", this.shadow = this.host.attachShadow({ mode: "open" }), this.shadow.innerHTML = `
-      <style>${M}</style>
-      <div class="wrapper" role="dialog" aria-modal="true" aria-label="${e.i18n.title}">
+    this.options = e, this.focusable = [], this.seenIds = /* @__PURE__ */ new Set(), this.open = !1, this.host = document.createElement("div"), this.host.setAttribute("part", "panel-root"), this.host.style.position = "fixed", this.host.style.bottom = "96px", this.host.style[e.position === "bottom-right" ? "right" : "left"] = "24px", this.host.style.width = "360px", this.host.style.maxWidth = "calc(100vw - 32px)", this.host.style.height = "520px", this.host.style.display = "none", this.host.style.zIndex = "2147483001", this.shadow = this.host.attachShadow({ mode: "open" });
+    const t = b(e.i18n.title), s = b(e.i18n.typing), i = b(e.i18n.offline), o = b(e.i18n.placeholder), c = b(e.i18n.sendLabel);
+    this.shadow.innerHTML = `
+      <style>${U}</style>
+      <div class="wrapper" role="dialog" aria-modal="true" aria-label="${t}">
         <header>
-          <h1><span class="status-dot" aria-hidden="true"></span>${e.i18n.title}</h1>
+          <h1><span class="status-dot" aria-hidden="true"></span>${t}</h1>
           <button class="close" type="button" aria-label="Close">×</button>
         </header>
-        <div class="messages" part="messages"></div>
-        <div class="typing" hidden>${e.i18n.typing}</div>
-        <div class="offline" hidden>${e.i18n.offline}</div>
+        <div class="messages" part="messages" role="log" aria-live="polite" aria-label="Chat messages"></div>
+        <div class="typing" hidden aria-live="polite" aria-atomic="true">${s}</div>
+        <div class="offline" hidden aria-live="assertive" aria-atomic="true">${i}</div>
         <div class="input-area">
-          <textarea rows="2" placeholder="${e.i18n.placeholder}" aria-label="${e.i18n.placeholder}"></textarea>
-          <button type="button">${e.i18n.sendLabel}</button>
+          <textarea rows="2" placeholder="${o}" aria-label="${o}"></textarea>
+          <button type="button">${c}</button>
         </div>
       </div>
-    `, this.host.dataset.theme = e.theme, this.host.style.setProperty("--spilki-accent", e.color), this.messagesEl = this.shadow.querySelector(".messages"), this.typingEl = this.shadow.querySelector(".typing"), this.input = this.shadow.querySelector("textarea"), this.offlineEl = this.shadow.querySelector(".offline"), this.sendButton = this.shadow.querySelector(".input-area button"), this.shadow.querySelector("header .close").addEventListener("click", () => this.options.onClose()), this.sendButton.addEventListener("click", () => this.send()), this.input.addEventListener("keydown", (s) => {
-      s.key === "Enter" && !s.shiftKey ? (s.preventDefault(), this.send()) : s.key === "Escape" && this.options.onClose();
-    }), this.shadow.addEventListener("keydown", (s) => {
-      const i = s;
-      i.key === "Escape" && this.options.onClose(), i.key === "Tab" && this.trapFocus(i);
-    }), this.shadow.addEventListener("focusin", () => this.collectFocusable()), this.collectFocusable();
+    `, this.host.dataset.theme = e.theme, this.host.style.setProperty("--spilki-accent", e.color), this.messagesEl = this.shadow.querySelector(".messages"), this.typingEl = this.shadow.querySelector(".typing"), this.input = this.shadow.querySelector("textarea"), this.offlineEl = this.shadow.querySelector(".offline"), this.sendButton = this.shadow.querySelector(".input-area button"), this.closeButton = this.shadow.querySelector("header .close"), this.handleCloseClick = () => this.options.onClose(), this.handleSendClick = () => this.send(), this.handleInputKeydown = (a) => {
+      a.key === "Enter" && !a.shiftKey ? (a.preventDefault(), this.send()) : a.key === "Escape" && this.options.onClose();
+    }, this.handleShadowKeydown = (a) => {
+      const n = a;
+      n.key === "Escape" && this.options.onClose(), n.key === "Tab" && this.trapFocus(n);
+    }, this.handleFocusin = () => this.collectFocusable(), this.closeButton.addEventListener("click", this.handleCloseClick), this.sendButton.addEventListener("click", this.handleSendClick), this.input.addEventListener("keydown", this.handleInputKeydown), this.shadow.addEventListener("keydown", this.handleShadowKeydown), this.shadow.addEventListener("focusin", this.handleFocusin), this.collectFocusable();
   }
   mount() {
     document.body.appendChild(this.host);
   }
+  // #4: remove all event listeners before removing DOM
   destroy() {
-    this.host.remove();
+    this.closeButton.removeEventListener("click", this.handleCloseClick), this.sendButton.removeEventListener("click", this.handleSendClick), this.input.removeEventListener("keydown", this.handleInputKeydown), this.shadow.removeEventListener("keydown", this.handleShadowKeydown), this.shadow.removeEventListener("focusin", this.handleFocusin), this.host.remove();
   }
   show() {
     this.open || (this.open = !0, this.host.style.display = "block", this.focusInput());
@@ -108,19 +177,27 @@ class C {
   updateTheme(e) {
     this.host.dataset.theme = e;
   }
+  // #16: rebuild seen IDs on full re-render
   updateMessages(e) {
-    this.messagesEl.innerHTML = "", e.forEach((t) => {
-      const s = document.createElement("div");
-      s.className = `message ${t.author}`, s.setAttribute("data-author", t.author);
-      const i = document.createElement("div");
-      i.className = "bubble", i.textContent = t.text, s.appendChild(i), this.messagesEl.appendChild(s);
-    }), this.messagesEl.scrollTop = this.messagesEl.scrollHeight;
+    this.messagesEl.innerHTML = "", this.seenIds.clear(), e.forEach((t) => {
+      this.seenIds.add(t.id), this.messagesEl.appendChild(this.createMessageElement(t));
+    }), this.messagesEl.scrollTop = this.messagesEl.scrollHeight, this.collectFocusable();
+  }
+  // Render conversation groups with collapsed history separators
+  renderWithConversations(e, t) {
+    this.messagesEl.innerHTML = "", this.seenIds.clear();
+    for (const s of e) {
+      s.messages.forEach((a) => this.seenIds.add(a.id));
+      const i = this.createHistoryContainer(s.messages), o = s.messages[s.messages.length - 1].ts, c = this.createSeparatorElement(o, i);
+      this.messagesEl.appendChild(i), this.messagesEl.appendChild(c);
+    }
+    t.forEach((s) => {
+      this.seenIds.add(s.id), this.messagesEl.appendChild(this.createMessageElement(s));
+    }), this.messagesEl.scrollTop = this.messagesEl.scrollHeight, this.collectFocusable();
   }
+  // #16: deduplicate; #19: smart scroll; #21: update focus trap
   appendMessage(e) {
-    const t = document.createElement("div");
-    t.className = `message ${e.author}`, t.setAttribute("data-author", e.author);
-    const s = document.createElement("div");
-    s.className = "bubble", s.textContent = e.text, t.appendChild(s), this.messagesEl.appendChild(t), this.messagesEl.scrollTop = this.messagesEl.scrollHeight;
+    this.seenIds.has(e.id) || (this.seenIds.add(e.id), this.messagesEl.appendChild(this.createMessageElement(e)), this.scrollToBottomIfNeeded(), this.collectFocusable());
   }
   setTyping(e) {
     this.typingEl.toggleAttribute("hidden", !e);
@@ -135,6 +212,43 @@ class C {
     const e = this.input.value.trim();
     e && (this.options.onSend(e), this.clearInput());
   }
+  // #29 #34: extract shared message element creation; #25: semantic labels
+  createMessageElement(e) {
+    const t = document.createElement("div");
+    t.className = `message ${e.author}`, t.setAttribute("data-author", e.author), t.setAttribute("role", "article"), t.setAttribute(
+      "aria-label",
+      // #25
+      e.author === "user" ? "You" : "Assistant"
+    );
+    const s = document.createElement("div");
+    return s.className = "bubble", s.textContent = e.text, t.appendChild(s), t;
+  }
+  createSeparatorElement(e, t) {
+    const s = document.createElement("div");
+    s.className = "conversation-separator", s.setAttribute("role", "button"), s.setAttribute("tabindex", "0"), s.setAttribute("aria-expanded", "false"), s.setAttribute("aria-label", "Show previous conversation"), s.textContent = H(e);
+    const i = () => {
+      const o = t.classList.toggle("expanded");
+      s.setAttribute("aria-expanded", String(o)), s.setAttribute(
+        "aria-label",
+        o ? "Hide previous conversation" : "Show previous conversation"
+      );
+    };
+    return s.addEventListener("click", i), s.addEventListener("keydown", (o) => {
+      const c = o;
+      (c.key === "Enter" || c.key === " ") && (c.preventDefault(), i());
+    }), s;
+  }
+  createHistoryContainer(e) {
+    const t = document.createElement("div");
+    return t.className = "conversation-history", e.forEach((s) => {
+      t.appendChild(this.createMessageElement(s));
+    }), t;
+  }
+  // #19: only auto-scroll if user is near the bottom
+  scrollToBottomIfNeeded() {
+    const e = this.messagesEl;
+    e.scrollHeight - e.scrollTop - e.clientHeight < 100 && (e.scrollTop = e.scrollHeight);
+  }
   collectFocusable() {
     const e = this.shadow.querySelectorAll(
       'button, textarea, [href], [tabindex]:not([tabindex="-1"])'
@@ -149,61 +263,10 @@ class C {
     e.shiftKey && i === t ? (e.preventDefault(), s.focus()) : !e.shiftKey && i === s && (e.preventDefault(), t.focus());
   }
 }
-const W = "https://api.spilki.ai", g = {
-  welcome: "Hi! I'm your assistant.",
-  placeholder: "Type a message…",
-  sendLabel: "Send",
-  typing: "Assistant is typing…",
-  offline: "Unable to connect. Please try again later.",
-  title: "Spilki Assistant"
-}, p = {
-  apiBase: W,
-  position: "bottom-right",
-  theme: "auto",
-  color: "#6366f1",
-  welcome: g.welcome,
-  persist: !0,
-  i18n: g
-};
-function $(r) {
-  var t, s, i, n, l, a, h;
-  const e = { ...g, ...(t = r.i18n) != null ? t : {} };
-  return {
-    ...p,
-    ...r,
-    apiBase: (s = r.apiBase) != null ? s : p.apiBase,
-    i18n: e,
-    welcome: (i = r.welcome) != null ? i : e.welcome,
-    position: (n = r.position) != null ? n : p.position,
-    theme: (l = r.theme) != null ? l : p.theme,
-    color: (a = r.color) != null ? a : p.color,
-    persist: (h = r.persist) != null ? h : p.persist
-  };
-}
-function B(r = "msg") {
-  return typeof crypto != "undefined" && crypto.randomUUID ? crypto.randomUUID() : `${r}-${Math.random().toString(16).slice(2)}`;
-}
-function L() {
-  var r, e;
-  return (e = (r = window.matchMedia) == null ? void 0 : r.call(window, "(prefers-color-scheme: dark)").matches) != null ? e : !1;
-}
-function x(r) {
-  return r === "light" || r === "dark" ? r : L() ? "dark" : "light";
-}
-function u(r, e = 30) {
-  return r.slice(-e);
-}
-function K(r) {
-  if (!r || r.length === 0) return;
-  const e = window.location.origin;
-  r.includes(e) || console.warn(
-    `SpilkiWidget: current origin ${e} not in allowedOriginsHint: ${r.join(", ")}`
-  );
-}
-const d = 1500, v = 8e3;
-class P {
+const f = 1500, I = 8e3;
+class J {
   constructor(e, t) {
-    this.sessionId = null, this.currentKind = null, this.stopped = !1, this.backoff = d, this.options = e, this.handlers = t;
+    this.sessionId = null, this.currentKind = null, this.stopped = !1, this.backoff = f, this.connectPromise = null, this.options = e, this.handlers = t;
   }
   setAccessToken(e) {
     this.options.accessToken = e;
@@ -215,10 +278,20 @@ class P {
     var e, t;
     return (t = (e = this.sessionId) != null ? e : this.options.sessionId) != null ? t : null;
   }
+  // #3: connect lock — return in-flight promise if already connecting
   async connect() {
-    var l, a;
+    if (this.connectPromise) return this.connectPromise;
+    this.connectPromise = this.doConnect();
+    try {
+      return await this.connectPromise;
+    } finally {
+      this.connectPromise = null;
+    }
+  }
+  async doConnect() {
+    var c, a;
     this.stopped = !1;
-    const e = `${this.options.apiBase.replace(/\/$/, "")}/widget/session`, t = (a = (l = this.sessionId) != null ? l : this.options.sessionId) != null ? a : void 0, s = {
+    const e = `${this.options.apiBase.replace(/\/$/, "")}/widget/session`, t = (a = (c = this.sessionId) != null ? c : this.options.sessionId) != null ? a : void 0, s = {
       organisationId: this.options.org,
       sessionId: t,
       userAgent: typeof navigator != "undefined" ? navigator.userAgent : "",
@@ -234,34 +307,36 @@ class P {
     });
     if (!i.ok)
       throw new Error(`SpilkiWidget: connect failed (${i.status})`);
-    const n = await i.json();
-    return this.sessionId = n.sessionId, this.options.sessionId = n.sessionId, this.backoff = d, await this.startTransport(n), n;
-  }
-  async send(e) {
-    var n, l;
-    const t = {
-      sessionId: (l = (n = this.sessionId) != null ? n : this.options.sessionId) != null ? l : "",
-      text: e
+    const o = await i.json();
+    return this.sessionId = o.sessionId, this.options.sessionId = o.sessionId, this.backoff = f, await this.startTransport(o), o;
+  }
+  async send(e, t) {
+    var c, a;
+    const s = {
+      sessionId: (a = (c = this.sessionId) != null ? c : this.options.sessionId) != null ? a : "",
+      text: e,
+      ...t ? { messageId: t } : {}
     };
-    if (!t.sessionId)
+    if (!s.sessionId)
       throw new Error("SpilkiWidget: missing session id");
     if (this.currentKind === "ws" && this.ws && this.ws.readyState === WebSocket.OPEN) {
-      this.ws.send(JSON.stringify({ type: "message", payload: t }));
+      this.ws.send(JSON.stringify({ type: "message", payload: s }));
       return;
     }
-    const s = `${this.options.apiBase.replace(/\/$/, "")}/widget/message`, i = await fetch(s, {
+    const i = `${this.options.apiBase.replace(/\/$/, "")}/widget/message`, o = await fetch(i, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
-        ...this.options.accessToken ? { "X-Authorization": `Bearer ${this.options.accessToken}` } : {}
+        "X-Authorization": `Bearer ${this.options.accessToken}`
       },
-      body: JSON.stringify(t)
+      body: JSON.stringify(s)
     });
-    if (!i.ok)
-      throw new Error(`SpilkiWidget: send failed (${i.status})`);
+    if (!o.ok)
+      throw new Error(`SpilkiWidget: send failed (${o.status})`);
   }
-  stop() {
-    this.stopped = !0, this.backoff = d, this.ws && (this.ws.close(), this.ws = void 0), this.sse && (this.sse.close(), this.sse = void 0), this.pollTimer && (clearTimeout(this.pollTimer), this.pollTimer = void 0), this.currentKind = null;
+  // #1: accept resetBackoff param; #8 #9: clear retryTimer
+  stop(e = !0) {
+    this.stopped = !0, e && (this.backoff = f), this.retryTimer && (clearTimeout(this.retryTimer), this.retryTimer = void 0), this.ws && (this.wsOnOpen && this.ws.removeEventListener("open", this.wsOnOpen), this.wsOnMessage && this.ws.removeEventListener("message", this.wsOnMessage), this.wsOnClose && this.ws.removeEventListener("close", this.wsOnClose), this.wsOnError && this.ws.removeEventListener("error", this.wsOnError), this.ws.close(), this.ws = void 0), this.wsOnOpen = this.wsOnMessage = this.wsOnClose = this.wsOnError = void 0, this.sseAbort && (this.sseAbort.abort(), this.sseAbort = void 0), this.pollTimer && (clearTimeout(this.pollTimer), this.pollTimer = void 0), this.currentKind = null;
   }
   async startTransport(e) {
     if (this.stopped) return;
@@ -276,72 +351,105 @@ class P {
       }
     throw new Error("SpilkiWidget: unable to establish transport");
   }
+  // #5: store named handler refs for WS cleanup
   startWs(e) {
     return new Promise((t, s) => {
       try {
         const i = new WebSocket(e);
-        this.ws = i, i.addEventListener("open", () => {
+        this.ws = i, this.wsOnOpen = () => {
           if (this.stopped) {
             i.close();
             return;
           }
-          this.currentKind = "ws", this.handlers.onOpen("ws"), this.backoff = d, t();
-        }), i.addEventListener("message", (n) => this.handleIncoming(n.data)), i.addEventListener("close", () => {
+          this.currentKind = "ws", this.handlers.onOpen("ws"), this.backoff = f, t();
+        }, this.wsOnMessage = (o) => this.handleIncoming(o.data), this.wsOnClose = () => {
           this.stopped || this.retryFallback("ws");
-        }), i.addEventListener("error", () => {
+        }, this.wsOnError = () => {
           this.handlers.onError(new Error("SpilkiWidget: websocket error")), i.readyState !== WebSocket.OPEN && s(new Error("WebSocket failed"));
-        });
+        }, i.addEventListener("open", this.wsOnOpen), i.addEventListener("message", this.wsOnMessage), i.addEventListener("close", this.wsOnClose), i.addEventListener("error", this.wsOnError);
       } catch (i) {
         s(i);
       }
     });
   }
+  // SPLK-271: fetch-based SSE with X-Authorization header (EventSource can't send headers)
   startSse(e) {
     return new Promise((t, s) => {
-      if (typeof EventSource == "undefined") {
-        s(new Error("SSE not supported"));
-        return;
-      }
-      const i = new EventSource(e);
-      this.sse = i;
-      let n = !1;
-      i.addEventListener("open", () => {
-        if (n = !0, this.stopped) {
-          i.close();
+      const i = new AbortController();
+      this.sseAbort = i, fetch(e, {
+        headers: {
+          Accept: "text/event-stream",
+          "X-Authorization": `Bearer ${this.options.accessToken}`
+        },
+        signal: i.signal
+      }).then((o) => {
+        if (!o.ok || !o.body) {
+          s(new Error("SSE failed"));
           return;
         }
-        this.currentKind = "sse", this.handlers.onOpen("sse"), this.backoff = d, t();
-      }), i.addEventListener("message", (l) => this.handleIncoming(l.data)), i.addEventListener("error", () => {
-        if (!n) {
-          s(new Error("SSE failed"));
+        if (this.stopped) {
+          i.abort();
           return;
         }
-        this.handlers.onError(new Error("SpilkiWidget: SSE error")), !this.stopped && this.retryFallback("sse");
+        this.currentKind = "sse", this.handlers.onOpen("sse"), this.backoff = f, t();
+        const c = o.body.getReader(), a = new TextDecoder();
+        let n = "";
+        const h = () => {
+          c.read().then(({ done: u, value: v }) => {
+            var w;
+            if (u || this.stopped) {
+              this.stopped || (this.handlers.onError(new Error("SpilkiWidget: SSE stream ended")), this.retryFallback("sse"));
+              return;
+            }
+            n += a.decode(v, { stream: !0 });
+            const d = n.split(`
+
+`);
+            n = (w = d.pop()) != null ? w : "";
+            for (const k of d)
+              for (const m of k.split(`
+`))
+                m.startsWith("data:") && this.handleIncoming(m.slice(5).trim());
+            h();
+          }).catch((u) => {
+            i.signal.aborted || (this.handlers.onError(u), this.stopped || this.retryFallback("sse"));
+          });
+        };
+        h();
+      }).catch((o) => {
+        i.signal.aborted || s(o);
       });
     });
   }
+  // #15: add auth header to poll fetch
   async startPoll(e) {
-    this.currentKind = "poll", this.handlers.onOpen("poll"), this.backoff = d;
+    this.currentKind = "poll", this.handlers.onOpen("poll"), this.backoff = f;
     const t = async () => {
       if (!this.stopped)
         try {
-          const s = await fetch(e);
+          const s = await fetch(e, {
+            headers: {
+              "X-Authorization": `Bearer ${this.options.accessToken}`
+            }
+          });
           if (!s.ok) throw new Error(`Poll failed ${s.status}`);
           const i = await s.json();
-          u(i).forEach((n) => this.handlers.onMessage(n)), this.backoff = d;
+          y(i).forEach((o) => this.handlers.onMessage(o)), this.backoff = f;
         } catch (s) {
-          this.handlers.onError(s), this.backoff = Math.min(this.backoff * 1.5, v);
+          this.handlers.onError(s), this.backoff = Math.min(this.backoff * 1.5, I);
         } finally {
           this.stopped || (this.pollTimer = window.setTimeout(t, this.backoff));
         }
     };
     await t();
   }
+  // #1: preserve backoff by calling stop(false); #8: check stopped before reconnect
   retryFallback(e) {
-    this.stopped || (this.stop(), this.backoff = Math.min(this.backoff * 1.5, v), setTimeout(() => {
-      this.handlers.onError(new Error(`SpilkiWidget: retrying after ${e}`)), this.connect().catch((t) => this.handlers.onError(t));
+    this.stopped || (this.stop(!1), this.backoff = Math.min(this.backoff * 1.5, I), this.retryTimer = window.setTimeout(() => {
+      this.stopped || (this.handlers.onError(new Error(`SpilkiWidget: retrying after ${e}`)), this.connect().catch((t) => this.handlers.onError(t)));
     }, this.backoff));
   }
+  // #17: don't display raw garbage on parse failure
   handleIncoming(e) {
     try {
       const t = JSON.parse(e);
@@ -351,13 +459,7 @@ class P {
       }
       this.dispatchIncoming(t);
     } catch {
-      const t = {
-        id: `${Date.now()}`,
-        author: "bot",
-        text: e,
-        ts: Date.now()
-      };
-      this.handlers.onMessage(t);
+      console.error("SpilkiWidget: failed to parse incoming message", e);
     }
   }
   dispatchIncoming(e) {
@@ -369,18 +471,23 @@ class P {
     this.handlers.onMessage(e);
   }
 }
-const f = 30;
-class U {
+const A = 30 * 60 * 1e3, x = 30;
+class q {
   constructor(e, t) {
     this.org = e, this.listeners = /* @__PURE__ */ new Set(), this.state = {
       isOpen: !1,
       isTyping: !1,
       isConnected: !1,
       messages: []
-    }, this.historyKey = `spilki-history:${e}`, this.sessionKey = `spilki-session:${e}`, this.tokenKey = `spilki-token:${e}`, this.persist = t.persist, this.state.messages = this.loadMessages();
+    }, this.historyKey = `spilki-history:${e}`, this.sessionKey = `spilki-session:${e}`, this.tokenKey = `spilki-token:${e}`, this.activityKey = `spilki-activity:${e}`, this.persist = t.persist, this.state.messages = this.loadMessages();
   }
   get snapshot() {
-    return { ...this.state, messages: [...this.state.messages] };
+    return {
+      isOpen: this.state.isOpen,
+      isTyping: this.state.isTyping,
+      isConnected: this.state.isConnected,
+      messages: this.state.messages
+    };
   }
   subscribe(e) {
     return this.listeners.add(e), () => this.listeners.delete(e);
@@ -400,15 +507,15 @@ class U {
   addMessage(e) {
     var s, i;
     const t = {
-      id: (s = e.id) != null ? s : B("msg"),
+      id: (s = e.id) != null ? s : P("msg"),
       ts: (i = e.ts) != null ? i : Date.now(),
       author: e.author,
       text: e.text
     };
-    return this.state.messages = u([...this.state.messages, t], f), this.persistMessages(), this.emit(), t;
+    return this.state.messages = y([...this.state.messages, t], x), this.persistMessages(), this.touchActivity(), this.emit(), t;
   }
   setMessages(e) {
-    this.state.messages = u(e, f), this.persistMessages(), this.emit();
+    this.state.messages = y(e, x), this.persistMessages(), this.emit();
   }
   clearMessages() {
     this.state.messages = [], this.persistMessages(), this.emit();
@@ -461,6 +568,36 @@ class U {
         console.error("SpilkiWidget: unable to remove item", e);
       }
   }
+  get lastActivityTs() {
+    if (!this.persist) return 0;
+    try {
+      const e = localStorage.getItem(this.activityKey);
+      return e ? Number(e) : 0;
+    } catch {
+      return 0;
+    }
+  }
+  touchActivity() {
+    if (this.persist)
+      try {
+        localStorage.setItem(this.activityKey, String(Date.now()));
+      } catch (e) {
+        console.error("SpilkiWidget: unable to set item", e);
+      }
+  }
+  isSessionExpired() {
+    const e = this.lastActivityTs;
+    return e === 0 ? !1 : Date.now() - e >= A;
+  }
+  getConversationGroups() {
+    const e = this.state.messages;
+    if (e.length === 0) return [];
+    const t = [];
+    let s = { startTs: e[0].ts, messages: [e[0]] };
+    for (let i = 1; i < e.length; i++)
+      e[i].ts - e[i - 1].ts >= A ? (t.push(s), s = { startTs: e[i].ts, messages: [e[i]] }) : s.messages.push(e[i]);
+    return t.push(s), t;
+  }
   emit() {
     this.listeners.forEach((e) => e());
   }
@@ -478,13 +615,13 @@ class U {
       const e = localStorage.getItem(this.historyKey);
       if (!e) return [];
       const t = JSON.parse(e);
-      return Array.isArray(t) ? u(t, f) : [];
+      return Array.isArray(t) ? y(t, x) : [];
     } catch (e) {
       return console.error("SpilkiWidget: unable to load messages", e), [];
     }
   }
 }
-function N(r) {
+function _(r) {
   const e = r.replace(/-/g, "+").replace(/_/g, "/"), t = e.padEnd(e.length + (4 - e.length % 4) % 4, "=");
   if (typeof atob == "function")
     return decodeURIComponent(
@@ -495,24 +632,24 @@ function N(r) {
     return s.from(t, "base64").toString("utf8");
   throw new Error("SpilkiWidget: no base64 decoder available");
 }
-function D(r) {
+function j(r) {
   if (!r) return null;
   const e = r.split(".");
   if (e.length < 2) return null;
   try {
-    const t = N(e[1]);
+    const t = _(e[1]);
     return JSON.parse(t);
   } catch (t) {
     return console.error("SpilkiWidget: unable to parse JWT", t), null;
   }
 }
-function F(r) {
-  const e = D(r);
-  if (!(e != null && e.exp)) return !1;
+function Y(r) {
+  const e = j(r);
+  if (!(e != null && e.exp) || typeof e.exp != "number") return !0;
   const t = Math.floor(Date.now() / 1e3);
-  return e.exp < t;
+  return e.exp < t + 60;
 }
-const z = {
+const R = {
   onOpen() {
   },
   onClose() {
@@ -524,7 +661,7 @@ const z = {
   onTransportChange() {
   }
 };
-async function H(r, e, t) {
+async function X(r, e, t) {
   const s = `${r.replace(/\/$/, "")}/widget/install`, i = await fetch(s, {
     method: "POST",
     headers: { "Content-Type": "application/json", Origin: window.location.origin },
@@ -533,7 +670,7 @@ async function H(r, e, t) {
   if (!i.ok) throw new Error(`SpilkiWidget: install failed (${i.status})`);
   return (await i.json()).accessToken;
 }
-async function q(r, e) {
+async function G(r, e) {
   const t = `${r.replace(/\/$/, "")}/widget/refresh`, s = await fetch(t, {
     method: "POST",
     headers: { "X-Authorization": `Bearer ${e}`, Origin: window.location.origin }
@@ -541,43 +678,52 @@ async function q(r, e) {
   if (!s.ok) throw new Error(`SpilkiWidget: refresh failed (${s.status})`);
   return (await s.json()).accessToken;
 }
-function E(r) {
-  var k, w, y, S;
+function M(r) {
+  var m, E, T, O;
   if (!r.org)
     throw new Error("SpilkiWidget: org is required");
-  const e = $(r);
-  K(e.allowedOriginsHint);
-  const t = { ...z, ...(k = e.hooks) != null ? k : {} }, s = new U(e.org, { persist: e.persist });
-  let i = (w = s.accessToken) != null ? w : void 0;
-  const n = async () => {
-    if (!i) {
-      if (!r.installationToken) throw new Error("SpilkiWidget: missing installationToken");
-      if (!r.org) throw new Error("SpilkiWidget: missing org");
-      i = await H(e.apiBase, r.installationToken, r.org), s.persistAccessToken(i), h.setAccessToken(i);
-      return;
+  const e = K(r);
+  N(e.allowedOriginsHint);
+  const t = { ...R, ...(m = e.hooks) != null ? m : {} }, s = new q(e.org, { persist: e.persist });
+  let i = (E = s.accessToken) != null ? E : void 0, o = null;
+  const c = async () => o || (o = (async () => {
+    try {
+      if (i && Y(i))
+        try {
+          i = await G(e.apiBase, i), s.persistAccessToken(i), h.setAccessToken(i);
+          return;
+        } catch {
+          i = void 0, s.clearAccessToken();
+        }
+      if (!i) {
+        if (!r.installationToken) throw new Error("SpilkiWidget: missing installationToken");
+        if (!r.org) throw new Error("SpilkiWidget: missing org");
+        i = await X(e.apiBase, r.installationToken, r.org), s.persistAccessToken(i), h.setAccessToken(i);
+      }
+    } finally {
+      o = null;
     }
-    F(i) && (i = await q(e.apiBase, i), s.persistAccessToken(i), h.setAccessToken(i));
-  }, l = A({
+  })(), o), a = L({
     color: e.color,
-    position: (y = e.position) != null ? y : "bottom-right",
+    position: (T = e.position) != null ? T : "bottom-right",
     onClick: () => {
       s.snapshot.isOpen ? (s.close(), t.onClose()) : (s.open(), t.onOpen());
     }
-  }), a = new C({
+  }), n = new z({
     color: e.color,
-    theme: x(e.theme),
-    position: (S = e.position) != null ? S : "bottom-right",
+    theme: C(e.theme),
+    position: (O = e.position) != null ? O : "bottom-right",
     i18n: e.i18n,
     onClose: () => {
       s.close(), t.onClose();
     },
-    onSend: (o) => {
-      const c = s.addMessage({ author: "user", text: o });
-      a.appendMessage(c), n().then(() => h.send(o)).catch((I) => {
-        t.onError(I), s.setConnected(!1), a.setOffline(!0);
+    onSend: (l) => {
+      const p = s.addMessage({ author: "user", text: l });
+      n.appendMessage(p), c().then(() => h.send(l, p.id)).catch(($) => {
+        t.onError($), s.setConnected(!1), n.setOffline(!0);
       });
     }
-  }), h = new P(
+  }), h = new J(
     {
       apiBase: e.apiBase,
       accessToken: i,
@@ -585,46 +731,45 @@ function E(r) {
       sessionId: s.sessionId
     },
     {
-      onOpen(o) {
-        m.transport = o, t.onTransportChange(o), s.setConnected(!0), a.setOffline(!1);
+      onOpen(l) {
+        k.transport = l, t.onTransportChange(l), s.setConnected(!0), n.setOffline(!1);
       },
-      onMessage(o) {
-        const c = s.addMessage(o);
-        a.appendMessage(c), t.onMessage(c);
+      onMessage(l) {
+        const p = s.addMessage(l);
+        n.appendMessage(p), t.onMessage(p);
       },
-      onTyping(o) {
-        s.setTyping(o);
+      onTyping(l) {
+        s.setTyping(l);
       },
-      onError(o) {
-        t.onError(o), s.setConnected(!1), s.snapshot.isOpen && a.setOffline(!0);
+      onError(l) {
+        t.onError(l), s.setConnected(!1), s.snapshot.isOpen && n.setOffline(!0);
       }
     }
   );
-  l.mount(), a.mount();
-  const b = s.snapshot.messages;
-  if (b.length === 0 && e.welcome) {
-    const o = {
+  a.mount(), n.mount();
+  const u = s.snapshot.messages, v = s.isSessionExpired(), d = s.getConversationGroups();
+  if (u.length === 0 && e.welcome) {
+    const l = {
       id: "welcome",
       author: "bot",
       text: e.welcome,
       ts: Date.now()
     };
-    s.addMessage(o), a.appendMessage(o);
-  } else
-    a.updateMessages(b);
-  const T = s.subscribe(() => {
-    const o = s.snapshot;
-    l.setOpen(o.isOpen), a.setTyping(o.isTyping), a.setOffline(!o.isConnected), a.updateTheme(x(e.theme)), o.isOpen ? a.show() : a.hide();
+    s.addMessage(l), n.appendMessage(l);
+  } else v && u.length > 0 ? n.renderWithConversations(d, []) : d.length > 1 ? n.renderWithConversations(d.slice(0, -1), d[d.length - 1].messages) : n.updateMessages(u);
+  const w = s.subscribe(() => {
+    const l = s.snapshot;
+    a.setOpen(l.isOpen), n.setTyping(l.isTyping), n.setOffline(!l.isConnected), n.updateTheme(C(e.theme)), l.isOpen ? n.show() : n.hide();
   });
-  n().then(
-    () => h.connect().then((o) => {
-      var c;
-      e.persist && s.persistSession(o.sessionId), s.setConnected(!0), t.onTransportChange((c = h.kind) != null ? c : "ws");
+  c().then(
+    () => h.connect().then((l) => {
+      var p;
+      e.persist && s.persistSession(l.sessionId), s.setConnected(!0), t.onTransportChange((p = h.kind) != null ? p : "ws");
     })
-  ).catch((o) => {
-    t.onError(o), s.setConnected(!1), a.setOffline(!0);
+  ).catch((l) => {
+    t.onError(l), s.setConnected(!1), n.setOffline(!0);
   });
-  const m = {
+  const k = {
     transport: null,
     open() {
       s.open(), t.onOpen();
@@ -633,12 +778,12 @@ function E(r) {
       s.close(), t.onClose();
     },
     destroy() {
-      T(), h.stop(), l.destroy(), a.destroy();
+      w(), h.stop(), a.destroy(), n.destroy();
     }
   };
-  return m;
+  return k;
 }
-function J() {
+function V() {
   var s, i;
   if (typeof document == "undefined") return;
   const r = document.currentScript;
@@ -650,7 +795,7 @@ function J() {
     console.error("SpilkiWidget: data-org and is required for auto init");
     return;
   }
-  E({
+  M({
     org: t,
     installationToken: e.installationToken,
     apiBase: e.apiBase,
@@ -658,13 +803,10 @@ function J() {
     theme: (i = e.theme) != null ? i : void 0
   });
 }
-if (typeof window != "undefined") {
-  const r = window;
-  r.SpilkiWidget = r.SpilkiWidget || {}, r.SpilkiWidget.init = (e) => E(e);
-}
-J();
+typeof window != "undefined" && (window.SpilkiWidget = window.SpilkiWidget || {}, window.SpilkiWidget.init = (r) => M(r));
+V();
 export {
-  J as autoInit,
-  E as initSpilkiWidget
+  V as autoInit,
+  M as initSpilkiWidget
 };
 //# sourceMappingURL=widget.es.js.map