@returningai/widget-sdk 1.4.0 → 1.4.2

package/dist/rai-widget.js

@@ -10336,6 +10336,9 @@ var lottie_light = { exports: {} };
 var lottie_lightExports = lottie_light.exports;
 const lottie = /* @__PURE__ */ getDefaultExportFromCjs(lottie_lightExports);
 function storageKey(config) {
+  return `${config.storagePrefix}-${config.widgetId}-${config.container}-auth`;
+}
+function legacyStorageKey(config) {
   return `${config.storagePrefix}-${config.widgetId}-auth`;
 }
 function errorSettingsKey(config) {
@@ -10354,13 +10357,21 @@ function saveToStorage(config, state) {
 }
 function loadFromStorage(config, state) {
   try {
-    const raw = localStorage.getItem(storageKey(config));
+    let raw = localStorage.getItem(storageKey(config));
+    const loadedLegacyKey = !raw;
+    if (!raw) {
+      raw = localStorage.getItem(legacyStorageKey(config));
+    }
     if (!raw) return false;
     const parsed = JSON.parse(raw);
     if (parsed.refreshToken && !isTokenExpired(parsed.refreshTokenExpiry)) {
       state.refreshToken = parsed.refreshToken;
       state.tokenFamily = parsed.tokenFamily;
       state.refreshTokenExpiry = parsed.refreshTokenExpiry;
+      if (loadedLegacyKey) {
+        saveToStorage(config, state);
+        localStorage.removeItem(legacyStorageKey(config));
+      }
       return true;
     }
     clearStorage(config);
@@ -10372,6 +10383,7 @@ function loadFromStorage(config, state) {
 function clearStorage(config) {
   try {
     localStorage.removeItem(storageKey(config));
+    localStorage.removeItem(legacyStorageKey(config));
   } catch {
   }
 }
@@ -10412,6 +10424,16 @@ function setTokens(config, state, data, onRefreshScheduled) {
     onRefreshScheduled();
   }
 }
+function buildIdentityProof(config) {
+  const proof = {};
+  if (config.embedToken) {
+    proof.embedToken = config.embedToken;
+  }
+  if (config.userIdentifiers && Object.keys(config.userIdentifiers).length > 0) {
+    proof.userIdentifiers = config.userIdentifiers;
+  }
+  return proof;
+}
 async function authenticateServerless(config, state, onRefreshScheduled) {
   const nonce = crypto.randomUUID();
   const timestamp = Date.now();
@@ -10428,14 +10450,9 @@ async function authenticateServerless(config, state, onRefreshScheduled) {
       const body = {
         nonce,
         timestamp,
-        widgetType: config.widgetType
+        widgetType: config.widgetType,
+        ...buildIdentityProof(config)
       };
-      if (config.embedToken) {
-        body.embedToken = config.embedToken;
-      }
-      if (config.userIdentifiers && Object.keys(config.userIdentifiers).length > 0) {
-        body.userIdentifiers = config.userIdentifiers;
-      }
       const response = await fetch(`${config.apiUrl}/${config.widgetId}/auth/serverless`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -10531,6 +10548,13 @@ async function refreshAccessToken(config, state, onRefreshScheduled, sendToken)
   }
   state.isRefreshing = true;
   state.refreshPromise = (async () => {
+    const reauthenticateAfterRefreshFailure = async () => {
+      clearState(state);
+      clearStorage(config);
+      const authed = await authenticateServerless(config, state, onRefreshScheduled);
+      if (authed && sendToken) sendToken();
+      return authed;
+    };
     try {
       const response = await fetch(`${config.apiUrl}/${config.widgetId}/auth/refresh`, {
         method: "POST",
@@ -10538,13 +10562,14 @@ async function refreshAccessToken(config, state, onRefreshScheduled, sendToken)
           "Content-Type": "application/json",
           Authorization: `Bearer ${state.refreshToken}`
         },
-        body: JSON.stringify({ widgetType: config.widgetType })
+        body: JSON.stringify({
+          widgetType: config.widgetType,
+          ...buildIdentityProof(config)
+        })
       });
       if (!response.ok) {
-        if (response.status === 401 || response.status === 403) {
-          clearState(state);
-          clearStorage(config);
-          return authenticateServerless(config, state, onRefreshScheduled);
+        if (response.status === 400 || response.status === 401 || response.status === 403) {
+          return reauthenticateAfterRefreshFailure();
         }
         const error = await response.json().catch(() => ({ error: "Token refresh failed" }));
         throw new Error(error.error || `HTTP ${response.status}`);
@@ -10557,9 +10582,7 @@ async function refreshAccessToken(config, state, onRefreshScheduled, sendToken)
       if (sendToken) sendToken();
       return true;
     } catch {
-      clearState(state);
-      clearStorage(config);
-      return authenticateServerless(config, state, onRefreshScheduled);
+      return reauthenticateAfterRefreshFailure();
     } finally {
       state.isRefreshing = false;
       state.refreshPromise = null;
@@ -10804,6 +10827,11 @@ const DEFINED_ATTRS = /* @__PURE__ */ new Set([
   "accent",
   "font"
 ]);
+function isUserIdentifierAttribute(name) {
+  const normalized = name.toLowerCase();
+  if (!normalized.startsWith("data-")) return false;
+  return !DEFINED_ATTRS.has(normalized.slice(5));
+}
 const WIDGET_GLOBALS = {
   store: "RaiStoreWidget",
   channel: "RaiChannelWidget",
@@ -11030,6 +11058,13 @@ function readConfig(el, existingId) {
     firstPaintFont: get("font") || void 0
   };
 }
+function identitySignatureForConfig(config) {
+  const identifiers = Object.keys(config.userIdentifiers || {}).sort().map((key) => [key, config.userIdentifiers[key]]);
+  return JSON.stringify({
+    embedToken: config.embedToken || "",
+    userIdentifiers: identifiers
+  });
+}
 function createInitialState() {
   return {
     accessToken: null,
@@ -11064,11 +11099,20 @@ class BaseWidget extends HTMLElement {
     __publicField(this, "intersectionObserver");
     // #3
     __publicField(this, "themeObserver");
+    __publicField(this, "identityAttributeObserver");
+    __publicField(this, "identitySignature", "");
+    __publicField(this, "hasAttemptedInit", false);
+    __publicField(this, "initGeneration", 0);
     __publicField(this, "lottieInstances", []);
     this.shadow = this.attachShadow({ mode: "closed" });
   }
+  static get observedAttributes() {
+    return ["embed-token", "data-embed-token"];
+  }
   connectedCallback() {
     this.config = readConfig(this, void 0);
+    this.identitySignature = identitySignatureForConfig(this.config);
+    this.setupIdentityAttributeObserver();
     const style = document.createElement("style");
     style.textContent = widgetCSS;
     this.shadow.appendChild(style);
@@ -11098,13 +11142,49 @@ class BaseWidget extends HTMLElement {
     }
   }
   disconnectedCallback() {
-    var _a, _b;
+    var _a, _b, _c;
     (_a = this.intersectionObserver) == null ? void 0 : _a.disconnect();
     (_b = this.themeObserver) == null ? void 0 : _b.disconnect();
-    if (this.cleanupListener) this.cleanupListener();
+    (_c = this.identityAttributeObserver) == null ? void 0 : _c.disconnect();
+    this.teardownMountedWidget();
     this.clearLottieInstances();
     clearState(this.state);
   }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name !== "embed-token" && name !== "data-embed-token") return;
+    this.handleIdentityConfigChange();
+  }
+  setupIdentityAttributeObserver() {
+    var _a;
+    (_a = this.identityAttributeObserver) == null ? void 0 : _a.disconnect();
+    this.identityAttributeObserver = new MutationObserver((mutations) => {
+      const hasIdentityAttributeChange = mutations.some(
+        (mutation) => mutation.type === "attributes" && !!mutation.attributeName && isUserIdentifierAttribute(mutation.attributeName)
+      );
+      if (hasIdentityAttributeChange) {
+        this.handleIdentityConfigChange();
+      }
+    });
+    this.identityAttributeObserver.observe(this, { attributes: true });
+  }
+  handleIdentityConfigChange() {
+    if (!this.isConnected || !this.config) return;
+    const nextConfig = readConfig(this, this.config.communityId);
+    const nextIdentitySignature = identitySignatureForConfig(nextConfig);
+    if (nextIdentitySignature === this.identitySignature) {
+      this.config = nextConfig;
+      return;
+    }
+    const previousConfig = this.config;
+    this.config = nextConfig;
+    this.identitySignature = nextIdentitySignature;
+    clearStorage(previousConfig);
+    clearStorage(this.config);
+    if (this.hasAttemptedInit) {
+      void this.reload();
+    }
+  }
   // ── DOM event helper (#1) ─────────────────────────────────────────────
   emit(type, detail) {
     this.dispatchEvent(
@@ -11416,12 +11496,19 @@ class BaseWidget extends HTMLElement {
   }
   // ── Initialization ─────────────────────────────────────────────────────
   async init() {
+    const initId = ++this.initGeneration;
+    this.hasAttemptedInit = true;
     if (!this.config.communityId) {
       this.showError();
       return;
     }
     await fetchErrorSettings(this.config, this.state);
+    if (!this.isCurrentInit(initId)) return;
     const launchWidget = () => {
+      var _a;
+      if (!this.isCurrentInit(initId)) return;
+      (_a = this.errorEl) == null ? void 0 : _a.classList.remove("visible");
+      this.shadow.querySelectorAll(".rai-custom-error").forEach((el) => el.remove());
       if (this.config.bundleUrl) {
         this.mountWidget();
       } else {
@@ -11434,6 +11521,7 @@ class BaseWidget extends HTMLElement {
         this.state,
         () => this.scheduleRefresh()
       );
+      if (!this.isCurrentInit(initId)) return;
       if (authed2) {
         this.emit("rai-authenticated");
         launchWidget();
@@ -11450,6 +11538,7 @@ class BaseWidget extends HTMLElement {
         this.state,
         () => this.scheduleRefresh()
       );
+      if (!this.isCurrentInit(initId)) return;
       if (authed2) {
         this.emit("rai-authenticated");
         launchWidget();
@@ -11465,6 +11554,7 @@ class BaseWidget extends HTMLElement {
         this.state,
         () => this.scheduleRefresh()
       );
+      if (!this.isCurrentInit(initId)) return;
       if (!refreshed) {
         this.showError();
         return;
@@ -11479,6 +11569,7 @@ class BaseWidget extends HTMLElement {
       this.state,
       () => this.scheduleRefresh()
     );
+    if (!this.isCurrentInit(initId)) return;
     if (authed) {
       this.emit("rai-authenticated");
       launchWidget();
@@ -11486,7 +11577,26 @@ class BaseWidget extends HTMLElement {
       this.showError();
     }
   }
+  isCurrentInit(initId) {
+    return this.isConnected && initId === this.initGeneration;
+  }
+  teardownMountedWidget() {
+    if (this.cleanupListener) {
+      this.cleanupListener();
+      this.cleanupListener = void 0;
+    }
+    if (this.state.syncTimer) {
+      clearInterval(this.state.syncTimer);
+      this.state.syncTimer = null;
+    }
+    this.state.iframe = null;
+    this.shadow.querySelectorAll("iframe").forEach((el) => el.remove());
+    this.querySelectorAll('[data-rai-widget-root="true"]').forEach(
+      (el) => el.remove()
+    );
+  }
   createIframe() {
+    this.teardownMountedWidget();
     const iframe = document.createElement("iframe");
     iframe.src = this.buildWidgetUrl(this.config);
     iframe.allow = "clipboard-write";
@@ -11524,6 +11634,7 @@ class BaseWidget extends HTMLElement {
   // ── Bundle mode (no-iframe) ──────────────────────────────────────────
   async mountWidget() {
     try {
+      this.teardownMountedWidget();
       const bundleApiUrl = this.config.v2ApiUrl || resolveV2ApiUrl(this.config.domainKey);
       const w = window;
       if (!w.DomainKey) {
@@ -11640,13 +11751,21 @@ class BaseWidget extends HTMLElement {
   // ── Logout helper ─────────────────────────────────────────────────────
   async logoutAndClear() {
     await logout(this.config, this.state);
-    this.shadow.querySelectorAll("iframe").forEach((el) => el.remove());
+    this.teardownMountedWidget();
     this.emit("rai-logout");
   }
   // ── Public API ────────────────────────────────────────────────────────
   async reload() {
+    var _a;
+    const previousConfig = this.config;
+    this.config = readConfig(this, (_a = this.config) == null ? void 0 : _a.communityId);
+    this.identitySignature = identitySignatureForConfig(this.config);
+    this.style.width = this.config.width;
+    this.style.height = this.config.height;
+    clearStorage(previousConfig);
+    clearStorage(this.config);
+    this.teardownMountedWidget();
     clearState(this.state);
-    this.shadow.querySelectorAll("iframe").forEach((el) => el.remove());
     await this.init();
   }
   async logoutPublic() {
@@ -11767,7 +11886,7 @@ class CustomWidget extends BaseWidget {
     }
   }
 }
-console.log(`[rai-widget] v${"1.4.0"}`);
+console.log(`[rai-widget] v${"1.4.2"}`);
 class StoreWidgetCompat extends StoreWidget {
 }
 const WIDGET_REGISTRY = [
@@ -11831,7 +11950,7 @@ function exposePublicApi() {
   })();
   const widget = container == null ? void 0 : container.querySelector(ALL_WIDGET_SELECTOR);
   window.ReturningAIWidget = {
-    version: "1.4.0",
+    version: "1.4.2",
     reload: () => (widget == null ? void 0 : widget.reload()) ?? Promise.resolve(),
     logout: () => (widget == null ? void 0 : widget.logoutPublic()) ?? Promise.resolve(),
     isAuthenticated: () => (widget == null ? void 0 : widget.isAuthenticated()) ?? false,

package/dist/types/BaseWidget.d.ts

@@ -1,6 +1,7 @@
 import type { WidgetConfig } from "./types";
 export declare function readConfig(el: Element, existingId?: string): WidgetConfig;
 export declare abstract class BaseWidget extends HTMLElement {
+    static get observedAttributes(): string[];
     protected shadow: ShadowRoot;
     protected config: WidgetConfig;
     private state;
@@ -10,11 +11,18 @@ export declare abstract class BaseWidget extends HTMLElement {
     private cleanupListener?;
     private intersectionObserver?;
     private themeObserver?;
+    private identityAttributeObserver?;
+    private identitySignature;
+    private hasAttemptedInit;
+    private initGeneration;
     private lottieInstances;
     constructor();
     protected abstract buildWidgetUrl(config: WidgetConfig): string;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private setupIdentityAttributeObserver;
+    private handleIdentityConfigChange;
     private emit;
     /**
      * Apply widget-defined CSS colors before first paint so the loader uses
@@ -77,6 +85,8 @@ export declare abstract class BaseWidget extends HTMLElement {
     private showError;
     private renderCustomError;
     private init;
+    private isCurrentInit;
+    private teardownMountedWidget;
     private createIframe;
     private mountWidget;
     private scheduleRefresh;

package/package.json

@@ -1,33 +1,35 @@
-{
-  "name": "@returningai/widget-sdk",
-  "version": "1.4.0",
-  "description": "Shadow DOM isolated widget SDK for ReturningAI",
-  "main": "dist/rai-widget.iife.js",
-  "module": "dist/rai-widget.js",
-  "types": "dist/types/index.d.ts",
-  "sideEffects": true,
-  "exports": {
-    ".": {
-      "import": "./dist/rai-widget.js",
-      "default": "./dist/rai-widget.iife.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "build:min": "vite build --mode production",
-    "types": "tsc --emitDeclarationOnly --outDir dist/types",
-    "prepublishOnly": "npm run build:min && npm run types"
-  },
-  "devDependencies": {
-    "terser": "^5.46.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.0"
-  },
-  "dependencies": {
-    "lottie-web": "^5.13.0"
-  }
-}
+{
+  "name": "@returningai/widget-sdk",
+  "version": "1.4.2",
+  "description": "Shadow DOM isolated widget SDK for ReturningAI",
+  "main": "dist/rai-widget.iife.js",
+  "module": "dist/rai-widget.js",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": true,
+  "exports": {
+    ".": {
+      "import": "./dist/rai-widget.js",
+      "default": "./dist/rai-widget.iife.js"
+    }
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:min": "vite build --mode production",
+    "types": "tsc --emitDeclarationOnly --outDir dist/types",
+    "prepublishOnly": "npm run build:min && npm run types"
+  },
+  "devDependencies": {
+    "terser": "^5.46.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.0"
+  },
+  "dependencies": {
+    "lottie-web": "^5.13.0"
+  }
+}