@rehers/rehers-roleplay-sdk 1.0.0

package/README.md

@@ -0,0 +1,84 @@
+# @rehers/seamless-sdk
+
+Lightweight vanilla JS SDK for embedding Seamless roleplay call sessions. Opens a modal with an iframe — no framework dependencies.
+
+## Install
+
+```bash
+npm install @rehers/seamless-sdk
+```
+
+Or load via CDN:
+
+```html
+<script src="https://unpkg.com/@rehers/seamless-sdk"></script>
+```
+
+## Usage
+
+```html
+<script src="https://unpkg.com/@rehers/seamless-sdk"></script>
+<script>
+  // 1. Initialize with a login pass from your backend
+  SeamlessRoleplay.init({
+    loginPass: 'lp_abc123...',
+    onCallEnd: function (data) {
+      console.log('Call ended:', data.callId, data.duration);
+    },
+  });
+
+  // 2. Open the roleplay modal for a contact
+  SeamlessRoleplay.open({
+    contactName: 'Jane Smith',
+    contactCompany: 'Acme Corp',
+    contactTitle: 'VP of Sales',
+    linkedinUrl: 'https://linkedin.com/in/jane-smith', // optional
+    scenarioId: 'sc_123', // optional — omit to show scenario picker
+  });
+
+  // 3. Close programmatically (user can also close via X button)
+  SeamlessRoleplay.close();
+
+  // 4. Full cleanup when done
+  SeamlessRoleplay.destroy();
+</script>
+```
+
+## API
+
+### `SeamlessRoleplay.init(options)`
+
+| Option | Type | Required | Description |
+|---|---|---|---|
+| `loginPass` | `string` | Yes | Seamless login pass obtained from your backend |
+| `appOrigin` | `string` | No | Override app origin (defaults to production) |
+| `onClose` | `() => void` | No | Called when modal closes |
+| `onCallStart` | `({ callId }) => void` | No | Called when a call begins |
+| `onCallEnd` | `({ callId, duration? }) => void` | No | Called when a call ends |
+| `onError` | `({ code, message }) => void` | No | Called on error |
+
+### `SeamlessRoleplay.open(contactData)`
+
+| Field | Type | Required | Description |
+|---|---|---|---|
+| `contactName` | `string` | Yes | Full name of the contact |
+| `contactCompany` | `string` | Yes | Company name |
+| `contactTitle` | `string` | Yes | Job title |
+| `linkedinUrl` | `string` | No | LinkedIn profile URL |
+| `scenarioId` | `string` | No | Auto-select a scenario (omit to show picker) |
+
+### `SeamlessRoleplay.close()`
+
+Closes the modal and notifies the iframe to end any active call.
+
+### `SeamlessRoleplay.destroy()`
+
+Full cleanup — removes all DOM elements and event listeners.
+
+## TypeScript
+
+Full type declarations are included. Import types with:
+
+```ts
+import type { SeamlessRoleplaySDK, SeamlessRoleplayInitOptions, SeamlessRoleplayContactData } from '@rehers/seamless-sdk';
+```

package/index.d.ts

@@ -0,0 +1,47 @@
+export interface SeamlessRoleplayInitOptions {
+  /** Seamless login pass for authentication */
+  loginPass: string;
+  /** Override the app origin (default: production URL) */
+  appOrigin?: string;
+  /** Called when the modal is closed */
+  onClose?: () => void;
+  /** Called when a call begins */
+  onCallStart?: (data: { callId: string }) => void;
+  /** Called when a call ends */
+  onCallEnd?: (data: { callId: string; duration?: number }) => void;
+  /** Called on error */
+  onError?: (data: { code: string; message: string }) => void;
+}
+
+export interface SeamlessRoleplayContactData {
+  /** Full name of the contact */
+  contactName: string;
+  /** Company of the contact */
+  contactCompany: string;
+  /** Job title of the contact */
+  contactTitle: string;
+  /** Optional LinkedIn profile URL */
+  linkedinUrl?: string;
+  /** Optional scenario ID to auto-select */
+  scenarioId?: string;
+}
+
+export interface SeamlessRoleplaySDK {
+  /** Initialize the SDK. Must be called before open(). */
+  init(options: SeamlessRoleplayInitOptions): void;
+  /** Open the roleplay modal with contact data. */
+  open(data: SeamlessRoleplayContactData): void;
+  /** Close the modal and notify the iframe. */
+  close(): void;
+  /** Full cleanup — remove DOM and event listeners. */
+  destroy(): void;
+}
+
+declare global {
+  interface Window {
+    SeamlessRoleplay: SeamlessRoleplaySDK;
+  }
+}
+
+declare const SeamlessRoleplay: SeamlessRoleplaySDK;
+export default SeamlessRoleplay;

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@rehers/rehers-roleplay-sdk",
+  "version": "1.0.0",
+  "description": "Seamless Roleplay SDK — embed roleplay call sessions via a modal + iframe",
+  "main": "roleplay-sdk.js",
+  "types": "index.d.ts",
+  "files": [
+    "roleplay-sdk.js",
+    "index.d.ts"
+  ],
+  "keywords": ["seamless", "roleplay", "sdk", "sales", "training"],
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rehers/seamless-frontend-independent"
+  }
+}

package/roleplay-sdk.js

@@ -0,0 +1,289 @@
+/**
+ * SeamlessRoleplay SDK
+ * Lightweight vanilla JS SDK for embedding roleplay call sessions.
+ *
+ * Usage:
+ *   SeamlessRoleplay.init({ loginPass: '...', onCallEnd: (data) => {} });
+ *   SeamlessRoleplay.open({ contactName: '...', contactCompany: '...', contactTitle: '...' });
+ *   SeamlessRoleplay.close();
+ *   SeamlessRoleplay.destroy();
+ */
+(function () {
+  "use strict";
+
+  var DEFAULT_APP_ORIGIN = "https://roleplaywithseamless.ai";
+
+  var config = null;
+  var overlay = null;
+  var iframe = null;
+  var pendingContactData = null;
+  var iframeAuthenticated = false;
+  var globalListener = null;
+
+  function resolveOrigin() {
+    return (config && config.appOrigin) || DEFAULT_APP_ORIGIN;
+  }
+
+  function sendToIframe(msg) {
+    if (iframe && iframe.contentWindow) {
+      iframe.contentWindow.postMessage(msg, resolveOrigin());
+    }
+  }
+
+  function handleMessage(event) {
+    if (!config) return;
+    var origin = resolveOrigin();
+    // Allow messages from the configured app origin
+    if (event.origin !== origin) return;
+
+    var data = event.data;
+    if (!data || typeof data.type !== "string") return;
+
+    switch (data.type) {
+      case "ROLEPLAY_READY":
+        // Iframe is loaded — send the login pass
+        if (config.loginPass) {
+          sendToIframe({
+            type: "seamless-login-pass",
+            loginPass: config.loginPass,
+          });
+        }
+        break;
+
+      case "ROLEPLAY_EMBED_AUTHENTICATED":
+        iframeAuthenticated = true;
+        // Send any pending contact data
+        if (pendingContactData) {
+          sendToIframe({
+            type: "roleplay-contact-data",
+            contactName: pendingContactData.contactName,
+            contactCompany: pendingContactData.contactCompany,
+            contactTitle: pendingContactData.contactTitle,
+            linkedinUrl: pendingContactData.linkedinUrl || undefined,
+            scenarioId: pendingContactData.scenarioId || undefined,
+          });
+          pendingContactData = null;
+        }
+        break;
+
+      case "ROLEPLAY_CALL_STARTED":
+        if (typeof config.onCallStart === "function") {
+          config.onCallStart({ callId: data.callId });
+        }
+        break;
+
+      case "ROLEPLAY_CALL_ENDED":
+        if (typeof config.onCallEnd === "function") {
+          config.onCallEnd({
+            callId: data.callId,
+            duration: data.duration,
+          });
+        }
+        break;
+
+      case "ROLEPLAY_CLOSED":
+        doClose();
+        break;
+
+      case "ROLEPLAY_ERROR":
+        if (typeof config.onError === "function") {
+          config.onError({ code: data.code, message: data.message });
+        }
+        break;
+    }
+  }
+
+  function createOverlay() {
+    var el = document.createElement("div");
+    el.id = "seamless-roleplay-overlay";
+    var s = el.style;
+    s.position = "fixed";
+    s.top = "0";
+    s.left = "0";
+    s.width = "100%";
+    s.height = "100%";
+    s.zIndex = "2147483647";
+    s.display = "flex";
+    s.alignItems = "center";
+    s.justifyContent = "center";
+    s.background = "rgba(0, 0, 0, 0.6)";
+    s.backdropFilter = "blur(4px)";
+
+    // Container
+    var container = document.createElement("div");
+    var cs = container.style;
+    cs.position = "relative";
+    cs.width = "90vw";
+    cs.maxWidth = "1100px";
+    cs.height = "85vh";
+    cs.maxHeight = "800px";
+    cs.borderRadius = "16px";
+    cs.overflow = "hidden";
+    cs.background = "#fff";
+    cs.boxShadow = "0 25px 60px rgba(0,0,0,0.3)";
+
+    // Close button
+    var closeBtn = document.createElement("button");
+    closeBtn.type = "button";
+    closeBtn.innerHTML = "×";
+    var cbs = closeBtn.style;
+    cbs.position = "absolute";
+    cbs.top = "12px";
+    cbs.right = "12px";
+    cbs.zIndex = "10";
+    cbs.width = "32px";
+    cbs.height = "32px";
+    cbs.border = "none";
+    cbs.borderRadius = "50%";
+    cbs.background = "rgba(0,0,0,0.08)";
+    cbs.color = "#333";
+    cbs.fontSize = "20px";
+    cbs.cursor = "pointer";
+    cbs.display = "flex";
+    cbs.alignItems = "center";
+    cbs.justifyContent = "center";
+    cbs.lineHeight = "1";
+    closeBtn.addEventListener("click", function () {
+      SeamlessRoleplay.close();
+    });
+
+    // Iframe
+    var appOrigin = resolveOrigin();
+    var iframeEl = document.createElement("iframe");
+    iframeEl.src = appOrigin + "/embed/roleplay-call";
+    iframeEl.allow = "camera; microphone; display-capture";
+    var ifs = iframeEl.style;
+    ifs.width = "100%";
+    ifs.height = "100%";
+    ifs.border = "none";
+    ifs.display = "block";
+
+    container.appendChild(closeBtn);
+    container.appendChild(iframeEl);
+    el.appendChild(container);
+
+    // Close on backdrop click
+    el.addEventListener("click", function (e) {
+      if (e.target === el) {
+        SeamlessRoleplay.close();
+      }
+    });
+
+    return { overlay: el, iframe: iframeEl };
+  }
+
+  function doClose() {
+    if (overlay && overlay.parentNode) {
+      overlay.parentNode.removeChild(overlay);
+    }
+    overlay = null;
+    iframe = null;
+    iframeAuthenticated = false;
+    pendingContactData = null;
+    if (typeof config.onClose === "function") {
+      config.onClose();
+    }
+  }
+
+  var SeamlessRoleplay = {
+    /**
+     * Initialize the SDK. Call once.
+     * @param {Object} opts
+     * @param {string} opts.loginPass - Seamless login pass for auth
+     * @param {string} [opts.appOrigin] - Override app origin (default: production)
+     * @param {Function} [opts.onClose] - Called when modal closes
+     * @param {Function} [opts.onCallStart] - Called when call begins
+     * @param {Function} [opts.onCallEnd] - Called when call ends ({ callId, duration })
+     * @param {Function} [opts.onError] - Called on error ({ code, message })
+     */
+    init: function (opts) {
+      if (!opts || !opts.loginPass) {
+        throw new Error(
+          "SeamlessRoleplay.init() requires { loginPass: string }"
+        );
+      }
+      config = {
+        loginPass: opts.loginPass,
+        appOrigin: opts.appOrigin || DEFAULT_APP_ORIGIN,
+        onClose: opts.onClose || null,
+        onCallStart: opts.onCallStart || null,
+        onCallEnd: opts.onCallEnd || null,
+        onError: opts.onError || null,
+      };
+
+      // Set up the global message listener
+      if (globalListener) {
+        window.removeEventListener("message", globalListener);
+      }
+      globalListener = handleMessage;
+      window.addEventListener("message", globalListener);
+    },
+
+    /**
+     * Open the roleplay modal with contact data.
+     * @param {Object} data
+     * @param {string} data.contactName
+     * @param {string} data.contactCompany
+     * @param {string} data.contactTitle
+     * @param {string} [data.linkedinUrl]
+     * @param {string} [data.scenarioId]
+     */
+    open: function (data) {
+      if (!config) {
+        throw new Error("Call SeamlessRoleplay.init() before open()");
+      }
+      if (!data || !data.contactName || !data.contactCompany || !data.contactTitle) {
+        throw new Error(
+          "SeamlessRoleplay.open() requires { contactName, contactCompany, contactTitle }"
+        );
+      }
+
+      // If already open, close first
+      if (overlay) {
+        doClose();
+      }
+
+      iframeAuthenticated = false;
+      pendingContactData = data;
+
+      var dom = createOverlay();
+      overlay = dom.overlay;
+      iframe = dom.iframe;
+      document.body.appendChild(overlay);
+    },
+
+    /**
+     * Close the modal. Sends roleplay-close to iframe, tears down DOM.
+     */
+    close: function () {
+      if (!overlay) return;
+      sendToIframe({ type: "roleplay-close" });
+      // Give iframe a moment to clean up, then force-close
+      setTimeout(doClose, 300);
+    },
+
+    /**
+     * Full cleanup — remove all event listeners and DOM.
+     */
+    destroy: function () {
+      if (overlay) {
+        doClose();
+      }
+      if (globalListener) {
+        window.removeEventListener("message", globalListener);
+        globalListener = null;
+      }
+      config = null;
+    },
+  };
+
+  // Expose globally
+  if (typeof window !== "undefined") {
+    window.SeamlessRoleplay = SeamlessRoleplay;
+  }
+
+  // Support CommonJS / ESM
+  if (typeof module !== "undefined" && module.exports) {
+    module.exports = SeamlessRoleplay;
+  }
+})();