@rehers/rehers-roleplay-sdk 2.5.2 → 2.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rehers/rehers-roleplay-sdk",
-  "version": "2.5.2",
+  "version": "2.5.4",
   "description": "Seamless Roleplay SDK — embed roleplay call sessions via a modal + iframe",
   "main": "roleplay-sdk.js",
   "types": "index.d.ts",
@@ -32,6 +32,6 @@
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
-    "url": "https://github.com/rehers/seamless-frontend-independent"
+    "url": "git+https://github.com/rehers/seamless-frontend-independent.git"
   }
 }

package/roleplay-sdk.js

@@ -28,6 +28,8 @@
   var sessionExpiresAt = 0; // epoch ms
   var refreshTimer = null;
   var fetchingSession = null; // single-flight Promise
+  var activeSessionXhr = null;
+  var activeInitVersion = 0;
 
   var initCallbacks = { onReady: null, onError: null };
   var initCalled = false;
@@ -48,6 +50,17 @@
   var dialogAddToScenarioPendingContacts = null;
   var dialogListener = null;
   var dialogCloseTeardownTimer = null;
+  var dialogRevealTimer = null;
+  var mountRevealTimer = null;
+
+  // Max wait before we reveal the iframe even if it never sends ROLEPLAY_READY.
+  // Prevents users from staring at an empty container if the hosted app is slow
+  // or fails to signal. 3s is conservative; the handshake normally lands in < 500ms.
+  var IFRAME_REVEAL_FALLBACK_MS = 3000;
+
+  function revealIframe(iframeEl) {
+    if (iframeEl) iframeEl.style.opacity = "1";
+  }
 
   // ── Safe logging ──────────────────────────────────────────────────
 
@@ -93,24 +106,54 @@
 
   // ── Session management ────────────────────────────────────────────
 
+  function clearSessionRequest() {
+    if (activeSessionXhr) {
+      try {
+        activeSessionXhr.abort();
+      } catch (_) {}
+      activeSessionXhr = null;
+    }
+    fetchingSession = null;
+  }
+
   function fetchSession() {
-    if (fetchingSession) return fetchingSession;
+    var requestInitVersion = activeInitVersion;
+
+    if (fetchingSession && fetchingSession.initVersion === requestInitVersion) {
+      return fetchingSession.promise;
+    }
 
-    fetchingSession = new Promise(function (resolve, reject) {
+    var requestPromise = new Promise(function (resolve, reject) {
       var url = getApiOrigin() + "/api/sdk/session";
       var body = userToken
         ? { userToken: userToken }
         : { userId: userId, userEmail: userEmail, userRole: userRole };
 
       var xhr = new XMLHttpRequest();
+      activeSessionXhr = xhr;
       xhr.open("POST", url, true);
       xhr.setRequestHeader("Content-Type", "application/json");
       xhr.setRequestHeader("X-Publishable-Key", publishableKey);
       xhr.withCredentials = false;
       xhr.timeout = SESSION_TIMEOUT_MS;
 
+      function cleanupRequest() {
+        if (activeSessionXhr === xhr) {
+          activeSessionXhr = null;
+        }
+        if (fetchingSession && fetchingSession.promise === requestPromise) {
+          fetchingSession = null;
+        }
+      }
+
       xhr.onload = function () {
-        fetchingSession = null;
+        cleanupRequest();
+
+        if (requestInitVersion !== activeInitVersion) {
+          reject({ code: "ABORTED", message: "Stale session response ignored" });
+          return;
+        }
+
         var data;
         try {
           data = JSON.parse(xhr.responseText);
@@ -143,24 +186,29 @@
       };
 
       xhr.onerror = function () {
-        fetchingSession = null;
+        cleanupRequest();
         reject({ code: "NETWORK_ERROR", message: "Network error contacting session endpoint" });
       };
 
       xhr.ontimeout = function () {
-        fetchingSession = null;
+        cleanupRequest();
         reject({ code: "TIMEOUT", message: "Session request timed out after " + SESSION_TIMEOUT_MS + "ms" });
       };
 
       xhr.onabort = function () {
-        fetchingSession = null;
+        cleanupRequest();
         reject({ code: "ABORTED", message: "Session request was aborted" });
       };
 
       xhr.send(JSON.stringify(body));
     });
 
-    return fetchingSession;
+    fetchingSession = {
+      initVersion: requestInitVersion,
+      promise: requestPromise,
+    };
+
+    return requestPromise;
   }
 
   function getSessionToken() {
@@ -190,6 +238,10 @@
         clearTimeout(dialogCloseTeardownTimer);
         dialogCloseTeardownTimer = null;
       }
+      if (dialogRevealTimer) {
+        clearTimeout(dialogRevealTimer);
+        dialogRevealTimer = null;
+      }
 
       if (dialogOverlay && dialogOverlay.parentNode) {
         dialogOverlay.parentNode.removeChild(dialogOverlay);
@@ -214,6 +266,10 @@
 
   function teardownMount() {
     try {
+      if (mountRevealTimer) {
+        clearTimeout(mountRevealTimer);
+        mountRevealTimer = null;
+      }
       if (mountIframe && mountIframe.parentNode) {
         mountIframe.parentNode.removeChild(mountIframe);
       }
@@ -284,6 +340,11 @@
 
       switch (data.type) {
         case "ROLEPLAY_READY":
+          if (mountRevealTimer) {
+            clearTimeout(mountRevealTimer);
+            mountRevealTimer = null;
+          }
+          revealIframe(mountIframe);
           getSessionToken()
             .then(function (token) {
               dispatchInitToTarget(mountIframe, null, null);
@@ -322,6 +383,11 @@
 
       switch (data.type) {
         case "ROLEPLAY_READY":
+          if (dialogRevealTimer) {
+            clearTimeout(dialogRevealTimer);
+            dialogRevealTimer = null;
+          }
+          revealIframe(dialogIframe);
           getSessionToken()
             .then(function (token) {
               dispatchInitToTarget(dialogIframe, dialogContactData, dialogAddToScenarioPendingContacts);
@@ -332,9 +398,9 @@
           break;
 
         case "ROLEPLAY_ERROR":
-          if (dialogCallbacks.onError) {
-            dialogCallbacks.onError({ code: data.code, message: data.message });
-          }
+          var regularOnError = dialogCallbacks.onError;
+          teardownDialog();
+          if (regularOnError) regularOnError({ code: data.code, message: data.message });
           break;
 
         case "ROLEPLAY_CLOSED":
@@ -357,9 +423,9 @@
           break;
 
         case "ADD_TO_SCENARIO_ERROR":
-          if (dialogAddToScenarioCallbacks.onError) {
-            dialogAddToScenarioCallbacks.onError({ code: data.code, message: data.message });
-          }
+          var atsOnError = dialogAddToScenarioCallbacks.onError;
+          teardownDialog();
+          if (atsOnError) atsOnError({ code: data.code, message: data.message });
           break;
 
         case "ADD_TO_SCENARIO_CLOSED":
@@ -379,10 +445,30 @@
     try {
       sendMsg(dialogIframe, { type: "roleplay-close" });
       if (dialogCloseTeardownTimer) clearTimeout(dialogCloseTeardownTimer);
-      dialogCloseTeardownTimer = setTimeout(teardownDialog, 300);
+      dialogCloseTeardownTimer = setTimeout(function () {
+        // Fallback path: iframe didn't respond with ROLEPLAY_CLOSED or
+        // ADD_TO_SCENARIO_CLOSED. Fire the host's onClose ourselves so
+        // React state (or any controlled caller) can re-render cleanly
+        // and reopen the dialog later.
+        var mode = dialogMode;
+        var atsClose = dialogAddToScenarioCallbacks.onClose;
+        var regularClose = dialogCallbacks.onClose;
+        teardownDialog();
+        try {
+          if (mode === "add-to-scenario" && atsClose) atsClose();
+          else if (regularClose) regularClose();
+        } catch (_) {}
+      }, 300);
     } catch (e) {
       logError("close", e);
+      var mode2 = dialogMode;
+      var atsClose2 = dialogAddToScenarioCallbacks.onClose;
+      var regularClose2 = dialogCallbacks.onClose;
       teardownDialog();
+      try {
+        if (mode2 === "add-to-scenario" && atsClose2) atsClose2();
+        else if (regularClose2) regularClose2();
+      } catch (_) {}
     }
   }
 
@@ -396,6 +482,11 @@
     iframeEl.style.height = "100%";
     iframeEl.style.border = "none";
     iframeEl.style.display = "block";
+    // Start invisible. The host app flashes a brief unstyled loader before it's
+    // ready; we reveal the iframe once ROLEPLAY_READY arrives (or after a
+    // fallback timeout). See revealIframe() callers.
+    iframeEl.style.opacity = "0";
+    iframeEl.style.transition = "opacity 120ms ease-out";
     return iframeEl;
   }
 
@@ -407,6 +498,7 @@
      */
     init: function (opts) {
       try {
+        var initVersion = activeInitVersion + 1;
         var hasUserToken = !!(opts && opts.userToken && String(opts.userToken).trim());
         var hasLegacyIdentity = !!(opts && opts.userId && opts.userEmail);
 
@@ -427,7 +519,8 @@
           clearTimeout(refreshTimer);
           refreshTimer = null;
         }
-        fetchingSession = null;
+        activeInitVersion = initVersion;
+        clearSessionRequest();
         sessionToken = null;
         sessionExpiresAt = 0;
         paymentLink = null;
@@ -445,6 +538,7 @@
         // Fetch session immediately
         fetchSession()
           .then(function (result) {
+            if (initVersion !== activeInitVersion) return;
             if (result.trialMode && !paymentLink) {
               // User not found and no payment link from server — still call onReady
               // The open() will show an error state in the iframe
@@ -452,6 +546,8 @@
             if (initCallbacks.onReady) initCallbacks.onReady();
           })
           .catch(function (err) {
+            if (initVersion !== activeInitVersion) return;
+            if (err && err.code === "ABORTED") return;
             if (initCallbacks.onError) {
               initCallbacks.onError({ code: err.code || "INIT_ERROR", message: err.message || "Initialization failed" });
             }
@@ -553,6 +649,13 @@
         dialogOverlay = el;
         dialogIframe = iframeEl;
         document.body.appendChild(dialogOverlay);
+
+        // Fallback: reveal the iframe even if ROLEPLAY_READY never arrives.
+        if (dialogRevealTimer) clearTimeout(dialogRevealTimer);
+        dialogRevealTimer = setTimeout(function () {
+          revealIframe(dialogIframe);
+          dialogRevealTimer = null;
+        }, IFRAME_REVEAL_FALLBACK_MS);
       } catch (e) {
         logError("open", e);
         teardownDialog();
@@ -589,6 +692,13 @@
         var iframeEl = createIframe("/");
         mountIframe = iframeEl;
         container.appendChild(iframeEl);
+
+        // Fallback: reveal the iframe even if ROLEPLAY_READY never arrives.
+        if (mountRevealTimer) clearTimeout(mountRevealTimer);
+        mountRevealTimer = setTimeout(function () {
+          revealIframe(mountIframe);
+          mountRevealTimer = null;
+        }, IFRAME_REVEAL_FALLBACK_MS);
       } catch (e) {
         logError("mount", e);
         teardownMount();
@@ -679,6 +789,9 @@
         iframeEl.style.top = "0";
         iframeEl.style.left = "0";
         iframeEl.style.zIndex = "1";
+        // Hide until ROLEPLAY_READY so we don't flash the host app's pre-init state.
+        iframeEl.style.opacity = "0";
+        iframeEl.style.transition = "opacity 120ms ease-out";
 
         var closeBtn = document.createElement("button");
         closeBtn.type = "button";
@@ -716,6 +829,13 @@
         dialogOverlay = el;
         dialogIframe = iframeEl;
         document.body.appendChild(dialogOverlay);
+
+        // Fallback: reveal the iframe even if ROLEPLAY_READY never arrives.
+        if (dialogRevealTimer) clearTimeout(dialogRevealTimer);
+        dialogRevealTimer = setTimeout(function () {
+          revealIframe(dialogIframe);
+          dialogRevealTimer = null;
+        }, IFRAME_REVEAL_FALLBACK_MS);
       } catch (e) {
         logError("addToScenario", e);
         teardownDialog();
@@ -753,10 +873,12 @@
      */
     destroy: function () {
       try {
+        activeInitVersion++;
         if (refreshTimer) {
           clearTimeout(refreshTimer);
           refreshTimer = null;
         }
+        clearSessionRequest();
         teardownDialog();
         teardownMount();
         publishableKey = null;
@@ -767,7 +889,6 @@
         paymentLink = null;
         sessionToken = null;
         sessionExpiresAt = 0;
-        fetchingSession = null;
         initCallbacks = { onReady: null, onError: null };
         initCalled = false;
       } catch (e) {