@rehers/rehers-roleplay-sdk 2.2.0 → 2.4.0

package/README.md

@@ -47,7 +47,10 @@ Or load via CDN:
     onError: function(data) { console.error('Error:', data.code, data.message); },
   });
 
-  // 2b. Or mount into a container (full-page embed)
+  // 2b. Or mount the full app into a container (full-page embed)
+  SeamlessRoleplay.mount(document.getElementById('roleplay-container'));
+
+  // 2c. Or mount a call for a specific contact into a container
   SeamlessRoleplay.mount(document.getElementById('roleplay-container'), {
     name: 'Jane Smith',
     domain: 'acme.com',
@@ -110,9 +113,12 @@ Opens the roleplay in a modal dialog overlay.
 | `onClose` | `function` | No | Called when dialog closes |
 | `onError` | `function` | No | `({ code, message })` |
 
-### `SeamlessRoleplay.mount(container, data)`
+### `SeamlessRoleplay.mount(container, data?)`
+
+Mounts into a DOM element. Two modes:
 
-Mounts the roleplay into a DOM element (full-page embed). Same `data` options as `open()`.
+- **`mount(container)`** — embeds the full Roleplay app (dashboard, scenarios, call logs)
+- **`mount(container, data)`** — embeds a roleplay call for a specific contact (same `data` options as `open()`)
 
 ### `SeamlessRoleplay.addToScenario(options)`
 

package/index.d.ts

@@ -78,13 +78,15 @@ export interface SeamlessRoleplaySDK {
   init(options: SeamlessRoleplayInitOptions): void;
   /** Open the roleplay modal for a contact (dialog mode). */
   open(data: SeamlessRoleplayOpenData): void;
-  /** Mount the roleplay into a container element (full-page embed). */
-  mount(container: HTMLElement, data: SeamlessRoleplayOpenData): void;
+  /** Mount the full Roleplay app into a container (no data), or a call embed for a specific contact (with data). */
+  mount(container: HTMLElement, data?: SeamlessRoleplayOpenData): void;
   /** Open the add-to-scenario dialog for bulk contact import. */
   addToScenario(options: AddToScenarioOptions): void;
-  /** Close the roleplay dialog or unmount. */
+  /** Close the active dialog. Does not affect mount. */
   close(): void;
-  /** Destroy the SDK — clears state, timers, and DOM. */
+  /** Unmount the mounted embed. Does not affect dialogs. */
+  unmount(): void;
+  /** Destroy the SDK — clears state, timers, and DOM (both mount and dialogs). */
   destroy(): void;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rehers/rehers-roleplay-sdk",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "Seamless Roleplay SDK — embed roleplay call sessions via a modal + iframe",
   "main": "roleplay-sdk.js",
   "types": "index.d.ts",

package/roleplay-sdk.js

@@ -15,7 +15,7 @@
   var SESSION_TIMEOUT_MS = 15000;
   var SDK_LOG_PREFIX = "[SeamlessRoleplay]";
 
-  // ── State ───────────────────────────────────────────────────────────
+  // ── Auth state ────────────────────────────────────────────────────
   var publishableKey = null;
   var userId = null;
   var userEmail = null;
@@ -30,18 +30,25 @@
   var fetchingSession = null; // single-flight Promise
 
   var initCallbacks = { onReady: null, onError: null };
-  var callbacks = { onCallStarted: null, onCallEnded: null, onClose: null, onError: null };
-  var addToScenarioCallbacks = { onComplete: null, onClose: null, onError: null };
-  var addToScenarioPendingContacts = null;
+  var initCalled = false;
 
-  var overlay = null;
-  var iframe = null;
+  // ── Mount state (persistent embed — survives dialog open/close) ───
+  var mountIframe = null;
   var mountContainer = null;
-  var pendingContactData = null;
-  var mode = null; // "dialog" | "mount" | "add-to-scenario"
-  var listener = null;
-  var initCalled = false;
-  var closeTeardownTimer = null;
+  var mountContactData = null;
+  var mountCallbacks = { onCallStarted: null, onCallEnded: null, onClose: null, onError: null };
+  var mountListener = null;
+
+  // ── Dialog state (overlay — dialog or add-to-scenario) ────────────
+  var dialogOverlay = null;
+  var dialogIframe = null;
+  var dialogMode = null; // "dialog" | "add-to-scenario"
+  var dialogContactData = null;
+  var dialogCallbacks = { onCallStarted: null, onCallEnded: null, onClose: null, onError: null };
+  var dialogAddToScenarioCallbacks = { onComplete: null, onClose: null, onError: null };
+  var dialogAddToScenarioPendingContacts = null;
+  var dialogListener = null;
+  var dialogCloseTeardownTimer = null;
 
   // ── Safe logging ──────────────────────────────────────────────────
 
@@ -65,17 +72,17 @@
     return DEFAULT_API_ORIGIN;
   }
 
-  function sendToIframe(msg) {
+  function sendMsg(iframeEl, msg) {
     try {
-      if (iframe && iframe.contentWindow) {
-        iframe.contentWindow.postMessage(msg, getOrigin());
+      if (iframeEl && iframeEl.contentWindow) {
+        iframeEl.contentWindow.postMessage(msg, getOrigin());
       }
     } catch (e) {
-      logError("sendToIframe", e);
+      logError("sendMsg", e);
     }
   }
 
-  // ── Session management ──────────────────────────────────────────────
+  // ── Session management ────────────────────────────────────────────
 
   function fetchSession() {
     if (fetchingSession) return fetchingSession;
@@ -167,79 +174,90 @@
     }, delay);
   }
 
-  // ── Teardown ────────────────────────────────────────────────────────
+  // ── Teardown (dialog only — mount is independent) ─────────────────
 
-  function teardown() {
+  function teardownDialog() {
     try {
-      // Cancel any pending close→teardown timer so it can't destroy a new dialog
-      if (closeTeardownTimer) {
-        clearTimeout(closeTeardownTimer);
-        closeTeardownTimer = null;
+      if (dialogCloseTeardownTimer) {
+        clearTimeout(dialogCloseTeardownTimer);
+        dialogCloseTeardownTimer = null;
       }
 
-      if (mode === "dialog" || mode === "add-to-scenario") {
-        if (overlay && overlay.parentNode) {
-          overlay.parentNode.removeChild(overlay);
-        }
-        overlay = null;
-      } else if (mode === "mount") {
-        if (iframe && iframe.parentNode) {
-          iframe.parentNode.removeChild(iframe);
-        }
-        mountContainer = null;
+      if (dialogOverlay && dialogOverlay.parentNode) {
+        dialogOverlay.parentNode.removeChild(dialogOverlay);
       }
+      dialogOverlay = null;
+
+      if (dialogListener) {
+        window.removeEventListener("message", dialogListener);
+        dialogListener = null;
+      }
+    } catch (e) {
+      logError("teardownDialog", e);
+    }
 
-      if (listener) {
-        window.removeEventListener("message", listener);
-        listener = null;
+    dialogIframe = null;
+    dialogContactData = null;
+    dialogAddToScenarioPendingContacts = null;
+    dialogMode = null;
+    dialogCallbacks = { onCallStarted: null, onCallEnded: null, onClose: null, onError: null };
+    dialogAddToScenarioCallbacks = { onComplete: null, onClose: null, onError: null };
+  }
+
+  function teardownMount() {
+    try {
+      if (mountIframe && mountIframe.parentNode) {
+        mountIframe.parentNode.removeChild(mountIframe);
+      }
+      if (mountListener) {
+        window.removeEventListener("message", mountListener);
+        mountListener = null;
       }
     } catch (e) {
-      logError("teardown", e);
+      logError("teardownMount", e);
     }
 
-    // Always reset state even if DOM cleanup failed
-    iframe = null;
-    pendingContactData = null;
-    addToScenarioPendingContacts = null;
-    mode = null;
-    callbacks = { onCallStarted: null, onCallEnded: null, onClose: null, onError: null };
-    addToScenarioCallbacks = { onComplete: null, onClose: null, onError: null };
+    mountIframe = null;
+    mountContainer = null;
+    mountContactData = null;
+    mountCallbacks = { onCallStarted: null, onCallEnded: null, onClose: null, onError: null };
   }
 
-  // ── Message handler ─────────────────────────────────────────────────
+  // ── Message dispatch ──────────────────────────────────────────────
 
-  function dispatchInitToIframe(token) {
-    if (addToScenarioPendingContacts) {
+  function dispatchInitToTarget(targetIframe, contactData, atsContacts) {
+    if (atsContacts) {
       var msg = {
         type: "seamless-add-to-scenario-init",
-        sessionToken: token,
+        sessionToken: sessionToken,
         publishableKey: publishableKey,
         userId: userId,
-        contacts: addToScenarioPendingContacts,
+        contacts: atsContacts,
       };
       if (paymentLink) msg.paymentLink = paymentLink;
-      sendToIframe(msg);
-    } else if (token && pendingContactData) {
-      sendToIframe({
+      sendMsg(targetIframe, msg);
+    } else if (sessionToken) {
+      var msg = {
         type: "seamless-session-init",
-        sessionToken: token,
-        contact: {
-          name: pendingContactData.name,
-          domain: pendingContactData.domain,
-          company: pendingContactData.company,
-          title: pendingContactData.title,
-          companyDescription: pendingContactData.companyDescription || undefined,
-          liUrl: pendingContactData.liUrl || undefined,
-        },
-      });
+        sessionToken: sessionToken,
+        contact: contactData ? {
+          name: contactData.name,
+          domain: contactData.domain,
+          company: contactData.company,
+          title: contactData.title,
+          companyDescription: contactData.companyDescription || undefined,
+          liUrl: contactData.liUrl || undefined,
+        } : null,
+      };
+      sendMsg(targetIframe, msg);
     } else if (paymentLink) {
-      sendToIframe({
+      sendMsg(targetIframe, {
         type: "seamless-session-init",
         paymentLink: paymentLink,
         contact: null,
       });
     } else {
-      sendToIframe({
+      sendMsg(targetIframe, {
         type: "seamless-session-init",
         paymentLink: null,
         contact: null,
@@ -247,53 +265,104 @@
     }
   }
 
-  function handleMessage(event) {
+  // ── Mount message handler ─────────────────────────────────────────
+
+  function handleMountMessage(event) {
+    try {
+      if (event.origin !== getOrigin()) return;
+      if (!mountIframe || !event.source || event.source !== mountIframe.contentWindow) return;
+
+      var data = event.data;
+      if (!data || typeof data.type !== "string") return;
+
+      switch (data.type) {
+        case "ROLEPLAY_READY":
+          getSessionToken()
+            .then(function (token) {
+              dispatchInitToTarget(mountIframe, mountContactData, null);
+            })
+            .catch(function () {
+              dispatchInitToTarget(mountIframe, mountContactData, null);
+            });
+          break;
+
+        case "ROLEPLAY_CALL_STARTED":
+          if (mountCallbacks.onCallStarted) {
+            mountCallbacks.onCallStarted({ callId: data.callId });
+          }
+          break;
+
+        case "ROLEPLAY_CALL_ENDED":
+          if (mountCallbacks.onCallEnded) {
+            mountCallbacks.onCallEnded({ callId: data.callId, duration: data.duration });
+          }
+          break;
+
+        case "ROLEPLAY_ERROR":
+          if (mountCallbacks.onError) {
+            mountCallbacks.onError({ code: data.code, message: data.message });
+          }
+          break;
+
+        case "ROLEPLAY_CLOSED":
+          var onClose = mountCallbacks.onClose;
+          teardownMount();
+          if (onClose) onClose();
+          break;
+      }
+    } catch (e) {
+      logError("handleMountMessage", e);
+    }
+  }
+
+  // ── Dialog message handler ────────────────────────────────────────
+
+  function handleDialogMessage(event) {
     try {
       if (event.origin !== getOrigin()) return;
+      if (!dialogIframe || !event.source || event.source !== dialogIframe.contentWindow) return;
 
       var data = event.data;
       if (!data || typeof data.type !== "string") return;
 
       switch (data.type) {
         case "ROLEPLAY_READY":
-          // Ensure we have a fresh token before sending init to iframe
           getSessionToken()
             .then(function (token) {
-              dispatchInitToIframe(token);
+              dispatchInitToTarget(dialogIframe, dialogContactData, dialogAddToScenarioPendingContacts);
             })
             .catch(function () {
-              // Token refresh failed — send whatever we have (iframe will handle auth errors)
-              dispatchInitToIframe(sessionToken);
+              dispatchInitToTarget(dialogIframe, dialogContactData, dialogAddToScenarioPendingContacts);
             });
           break;
 
         case "ROLEPLAY_CALL_STARTED":
-          if (callbacks.onCallStarted) {
-            callbacks.onCallStarted({ callId: data.callId });
+          if (dialogCallbacks.onCallStarted) {
+            dialogCallbacks.onCallStarted({ callId: data.callId });
           }
           break;
 
         case "ROLEPLAY_CALL_ENDED":
-          if (callbacks.onCallEnded) {
-            callbacks.onCallEnded({ callId: data.callId, duration: data.duration });
+          if (dialogCallbacks.onCallEnded) {
+            dialogCallbacks.onCallEnded({ callId: data.callId, duration: data.duration });
           }
           break;
 
         case "ROLEPLAY_ERROR":
-          if (callbacks.onError) {
-            callbacks.onError({ code: data.code, message: data.message });
+          if (dialogCallbacks.onError) {
+            dialogCallbacks.onError({ code: data.code, message: data.message });
           }
           break;
 
         case "ROLEPLAY_CLOSED":
-          var onClose = callbacks.onClose;
-          teardown();
+          var onClose = dialogCallbacks.onClose;
+          teardownDialog();
           if (onClose) onClose();
           break;
 
         case "ADD_TO_SCENARIO_COMPLETE":
-          var atsOnComplete = addToScenarioCallbacks.onComplete;
-          teardown();
+          var atsOnComplete = dialogAddToScenarioCallbacks.onComplete;
+          teardownDialog();
           if (atsOnComplete) {
             atsOnComplete({
               scenarioId: data.scenarioId,
@@ -305,40 +374,40 @@
           break;
 
         case "ADD_TO_SCENARIO_ERROR":
-          if (addToScenarioCallbacks.onError) {
-            addToScenarioCallbacks.onError({ code: data.code, message: data.message });
+          if (dialogAddToScenarioCallbacks.onError) {
+            dialogAddToScenarioCallbacks.onError({ code: data.code, message: data.message });
           }
           break;
 
         case "ADD_TO_SCENARIO_CLOSED":
-          var atsOnClose = addToScenarioCallbacks.onClose;
-          teardown();
+          var atsOnClose = dialogAddToScenarioCallbacks.onClose;
+          teardownDialog();
           if (atsOnClose) atsOnClose();
           break;
       }
     } catch (e) {
-      logError("handleMessage", e);
+      logError("handleDialogMessage", e);
     }
   }
 
-  // ── Close ───────────────────────────────────────────────────────────
+  // ── Close (dialog only) ───────────────────────────────────────────
 
-  function close() {
+  function closeDialog() {
     try {
-      sendToIframe({ type: "roleplay-close" });
-      if (closeTeardownTimer) clearTimeout(closeTeardownTimer);
-      closeTeardownTimer = setTimeout(teardown, 300);
+      sendMsg(dialogIframe, { type: "roleplay-close" });
+      if (dialogCloseTeardownTimer) clearTimeout(dialogCloseTeardownTimer);
+      dialogCloseTeardownTimer = setTimeout(teardownDialog, 300);
     } catch (e) {
       logError("close", e);
-      teardown();
+      teardownDialog();
     }
   }
 
-  // ── Create iframe ───────────────────────────────────────────────────
+  // ── Create iframe ─────────────────────────────────────────────────
 
-  function createIframe() {
+  function createIframe(path) {
     var iframeEl = document.createElement("iframe");
-    iframeEl.src = getOrigin() + "/embed/roleplay-call";
+    iframeEl.src = getOrigin() + (path || "/embed/roleplay-call");
     iframeEl.allow = "camera; microphone; display-capture; autoplay";
     iframeEl.style.width = "100%";
     iframeEl.style.height = "100%";
@@ -347,7 +416,7 @@
     return iframeEl;
   }
 
-  // ── SDK API ─────────────────────────────────────────────────────────
+  // ── SDK API ───────────────────────────────────────────────────────
 
   var SeamlessRoleplay = {
     /**
@@ -415,19 +484,19 @@
           return;
         }
 
-        // If already open, tear down first (also cancels any pending close timer)
-        if (overlay || (iframe && mode)) teardown();
+        // Tear down any existing dialog (NOT the mount)
+        if (dialogOverlay || dialogIframe) teardownDialog();
 
-        pendingContactData = data;
-        callbacks.onCallStarted = data.onCallStarted || null;
-        callbacks.onCallEnded = data.onCallEnded || null;
-        callbacks.onClose = data.onClose || null;
-        callbacks.onError = data.onError || null;
-        mode = "dialog";
+        dialogContactData = data;
+        dialogCallbacks.onCallStarted = data.onCallStarted || null;
+        dialogCallbacks.onCallEnded = data.onCallEnded || null;
+        dialogCallbacks.onClose = data.onClose || null;
+        dialogCallbacks.onError = data.onError || null;
+        dialogMode = "dialog";
 
         // Listen for messages
-        listener = handleMessage;
-        window.addEventListener("message", listener);
+        dialogListener = handleDialogMessage;
+        window.addEventListener("message", dialogListener);
 
         // Build overlay
         var el = document.createElement("div");
@@ -477,7 +546,7 @@
         cbs.alignItems = "center";
         cbs.justifyContent = "center";
         cbs.lineHeight = "1";
-        closeBtn.addEventListener("click", close);
+        closeBtn.addEventListener("click", closeDialog);
 
         var iframeEl = createIframe();
 
@@ -486,15 +555,15 @@
         el.appendChild(container);
 
         el.addEventListener("click", function (e) {
-          if (e.target === el) close();
+          if (e.target === el) closeDialog();
         });
 
-        overlay = el;
-        iframe = iframeEl;
-        document.body.appendChild(overlay);
+        dialogOverlay = el;
+        dialogIframe = iframeEl;
+        document.body.appendChild(dialogOverlay);
       } catch (e) {
         logError("open", e);
-        teardown();
+        teardownDialog();
         if (data && typeof data.onError === "function") {
           try { data.onError({ code: "SDK_ERROR", message: e.message || "Unexpected error during open" }); } catch (_) {}
         }
@@ -502,7 +571,11 @@
     },
 
     /**
-     * Mount the roleplay into a container element (full-page embed).
+     * Mount the roleplay into a container element.
+     *
+     * Two modes:
+     *   mount(container)             — full app embed (dashboard, scenarios, call logs, etc.)
+     *   mount(container, contactData) — roleplay call embed for a specific contact
      */
     mount: function (container, data) {
       try {
@@ -514,32 +587,35 @@
           logError("mount", "requires a DOM element as first argument");
           return;
         }
-        if (!data || !data.name || !data.domain || !data.company || !data.title) {
-          logError("mount", "requires { name, domain, company, title }");
+
+        // If contact data is provided, validate required fields
+        var hasContactData = data && data.name && data.domain && data.company && data.title;
+        if (data && !hasContactData && (data.name || data.domain || data.company || data.title)) {
+          logError("mount", "contact data requires { name, domain, company, title }");
           return;
         }
 
-        // If already open, tear down first (also cancels any pending close timer)
-        if (overlay || (iframe && mode)) teardown();
+        // Tear down any existing mount (re-mount)
+        if (mountIframe) teardownMount();
 
-        pendingContactData = data;
-        callbacks.onCallStarted = data.onCallStarted || null;
-        callbacks.onCallEnded = data.onCallEnded || null;
-        callbacks.onClose = data.onClose || null;
-        callbacks.onError = data.onError || null;
-        mode = "mount";
+        mountContactData = hasContactData ? data : null;
+        mountCallbacks.onCallStarted = (data && data.onCallStarted) || null;
+        mountCallbacks.onCallEnded = (data && data.onCallEnded) || null;
+        mountCallbacks.onClose = (data && data.onClose) || null;
+        mountCallbacks.onError = (data && data.onError) || null;
         mountContainer = container;
 
         // Listen for messages
-        listener = handleMessage;
-        window.addEventListener("message", listener);
+        mountListener = handleMountMessage;
+        window.addEventListener("message", mountListener);
 
-        var iframeEl = createIframe();
-        iframe = iframeEl;
+        // No contact data → full app embed at root; with contact → /embed/roleplay-call
+        var iframeEl = createIframe(hasContactData ? "/embed/roleplay-call" : "/");
+        mountIframe = iframeEl;
         container.appendChild(iframeEl);
       } catch (e) {
         logError("mount", e);
-        teardown();
+        teardownMount();
         if (data && typeof data.onError === "function") {
           try { data.onError({ code: "SDK_ERROR", message: e.message || "Unexpected error during mount" }); } catch (_) {}
         }
@@ -579,18 +655,18 @@
           }
         }
 
-        // Tear down any existing dialog (also cancels any pending close timer)
-        if (overlay || (iframe && mode)) teardown();
+        // Tear down any existing dialog (NOT the mount)
+        if (dialogOverlay || dialogIframe) teardownDialog();
 
-        addToScenarioPendingContacts = opts.contacts;
-        addToScenarioCallbacks.onComplete = opts.onComplete || null;
-        addToScenarioCallbacks.onClose = opts.onClose || null;
-        addToScenarioCallbacks.onError = opts.onError || null;
-        mode = "add-to-scenario";
+        dialogAddToScenarioPendingContacts = opts.contacts;
+        dialogAddToScenarioCallbacks.onComplete = opts.onComplete || null;
+        dialogAddToScenarioCallbacks.onClose = opts.onClose || null;
+        dialogAddToScenarioCallbacks.onError = opts.onError || null;
+        dialogMode = "add-to-scenario";
 
         // Listen for messages
-        listener = handleMessage;
-        window.addEventListener("message", listener);
+        dialogListener = handleDialogMessage;
+        window.addEventListener("message", dialogListener);
 
         // Build overlay — wide, compact dialog
         var el = document.createElement("div");
@@ -654,22 +730,22 @@
         cbs.transition = "background 0.15s";
         closeBtn.addEventListener("mouseenter", function () { cbs.background = "rgba(0,0,0,0.15)"; });
         closeBtn.addEventListener("mouseleave", function () { cbs.background = "rgba(0,0,0,0.08)"; });
-        closeBtn.addEventListener("click", close);
+        closeBtn.addEventListener("click", closeDialog);
 
         container.appendChild(iframeEl);
         container.appendChild(closeBtn);
         el.appendChild(container);
 
         el.addEventListener("click", function (e) {
-          if (e.target === el) close();
+          if (e.target === el) closeDialog();
         });
 
-        overlay = el;
-        iframe = iframeEl;
-        document.body.appendChild(overlay);
+        dialogOverlay = el;
+        dialogIframe = iframeEl;
+        document.body.appendChild(dialogOverlay);
       } catch (e) {
         logError("addToScenario", e);
-        teardown();
+        teardownDialog();
         if (opts && typeof opts.onError === "function") {
           try { opts.onError({ code: "SDK_ERROR", message: e.message || "Unexpected error during addToScenario" }); } catch (_) {}
         }
@@ -677,19 +753,30 @@
     },
 
     /**
-     * Close the roleplay.
+     * Close the active dialog. Does not affect mount.
      */
     close: function () {
       try {
-        close();
+        closeDialog();
       } catch (e) {
         logError("close", e);
-        teardown();
+        teardownDialog();
+      }
+    },
+
+    /**
+     * Unmount the mounted embed. Does not affect dialogs.
+     */
+    unmount: function () {
+      try {
+        teardownMount();
+      } catch (e) {
+        logError("unmount", e);
       }
     },
 
     /**
-     * Destroy the SDK — clears state, timers, and DOM.
+     * Destroy the SDK — clears state, timers, and DOM (both mount and dialogs).
      */
     destroy: function () {
       try {
@@ -697,7 +784,8 @@
           clearTimeout(refreshTimer);
           refreshTimer = null;
         }
-        teardown();
+        teardownDialog();
+        teardownMount();
         publishableKey = null;
         userId = null;
         userEmail = null;