npm - @rehers/rehers-roleplay-sdk - Versions diffs - 2.4.2 → 2.5.1 - Mend

@rehers/rehers-roleplay-sdk 2.4.2 → 2.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -1,287 +1,240 @@
-# Roleplay SDK for the Seamless.AI Dashboard
+# Roleplay SDK for Seamless.AI
-This SDK is only for embedding Roleplay inside the Seamless.AI dashboard.
-Use it in these two places:
-- The dedicated Roleplay page or tab inside the Seamless dashboard
-- The Contact Search screen, where clicking `Roleplay` opens a dialog for a single contact
-The SDK must be initialized with the currently logged-in Seamless user before either embed flow is used.
-## Load the SDK
-Seamless can load the SDK in any of these three ways.
-### Option 1: Downloaded SDK file
-If Seamless is hosting the SDK file directly inside the dashboard:
-```html
-<script src="/path/to/roleplay-sdk.js"></script>
-```
-### Option 2: npm package
-If Seamless is bundling the SDK through the frontend codebase:
+## Install
 ```bash
 npm install @rehers/rehers-roleplay-sdk
 ```
-```js
-import SeamlessRoleplay from "@rehers/rehers-roleplay-sdk";
-```
-### Option 3: CDN script
-If Seamless wants to load the SDK without bundling it:
-```html
-<script src="https://unpkg.com/@rehers/rehers-roleplay-sdk"></script>
+---
+## 1. Wrap your app with the Provider
+Add this once, above all your routes. It initializes the SDK for the logged-in Seamless user.
+```tsx
+import { SeamlessRoleplayProvider } from "@rehers/rehers-roleplay-sdk/react";
+function App() {
+  // You already have the logged-in user from your auth/session.
+  // The SDK needs their id and email.
+  const me = useCurrentUser(); // however you get the logged-in user
+  return (
+    <SeamlessRoleplayProvider
+      publishableKey="pk_live_..."
+      userId={String(me.id)}
+      userEmail={me.username}
+      userRole={me.orgRole}
+      onReady={() => console.log("Roleplay SDK ready")}
+      onError={(err) => console.error("Roleplay SDK error", err)}
+    >
+      <Routes>
+        <Route path="/roleplay" element={<RoleplayPage />} />
+        <Route path="/contacts" element={<ContactSearch />} />
+        {/* ...your other routes */}
+      </Routes>
+    </SeamlessRoleplayProvider>
+  );
+}
 ```
-## Get the logged-in Seamless user
+If you fetch the user via API:
-Use the existing Seamless dashboard session and call:
-```js
-const meResponse = await fetch("https://api.seamless.ai/api/users/me", {
-  method: "GET",
+```ts
+const res = await fetch("https://api.seamless.ai/api/users/me", {
   credentials: "include",
-  headers: {
-    accept: "application/json, text/plain, */*",
-  },
-}).then((res) => res.json());
-```
+}).then((r) => r.json());
-Normalize the response before reading fields:
-```js
-const me = meResponse.data ?? meResponse;
+const me = res.data ?? res;
+// me.id       → pass as userId (convert to string)
+// me.username → pass as userEmail
+// me.orgRole  → pass as userRole directly
 ```
-## Required mapping for `init()`
-These are the values Seamless must pass into `SeamlessRoleplay.init(...)`:
-| SDK field | Seamless `/api/users/me` field |
-|---|---|
-| `userId` | `String(me.id)` |
-| `userEmail` | `me.username` |
-| `userRole` | Optional. Suggested mapping from `me.orgRole` / `me.isOrgAdmin` |
-Example:
-```js
-const seamlessUserId = String(me.id);
-const seamlessUserEmail = me.username;
-const seamlessUserRole =
-  me.orgRole === "owner" ? "owner" :
-  me.isOrgAdmin ? "admin" :
-  "member";
-```
+That's the only setup. Everything below just works.
-For the response shape currently returned by Seamless, this means:
+---
-```js
-const seamlessUserId = String(me.id);
-const seamlessUserEmail = me.username;
-```
+## 2. Full Roleplay page
-## Initialize the SDK once
+For the dedicated Roleplay tab/page, drop in `RoleplayEmbed`. It fills its container.
-Initialize the SDK once per page load using the logged-in Seamless user. Reuse that same initialized SDK for both the full-page embed and the Contact Search dialog.
+```tsx
+import { RoleplayEmbed } from "@rehers/rehers-roleplay-sdk/react";
-```js
-let roleplayReadyPromise;
-function ensureRoleplaySdkReady() {
-  if (roleplayReadyPromise) return roleplayReadyPromise;
-  roleplayReadyPromise = (async () => {
-    const meResponse = await fetch("https://api.seamless.ai/api/users/me", {
-      method: "GET",
-      credentials: "include",
-      headers: {
-        accept: "application/json, text/plain, */*",
-      },
-    }).then((res) => res.json());
-    const me = meResponse.data ?? meResponse;
-    const seamlessUserId = String(me.id);
-    const seamlessUserEmail = me.username;
-    const seamlessUserRole =
-      me.orgRole === "owner" ? "owner" :
-      me.isOrgAdmin ? "admin" :
-      "member";
-    await new Promise((resolve, reject) => {
-      SeamlessRoleplay.init({
-        publishableKey: ROLEPLAY_PUBLISHABLE_KEY,
-        userId: seamlessUserId,
-        userEmail: seamlessUserEmail,
-        userRole: seamlessUserRole,
-        onReady: resolve,
-        onError: reject,
-      });
-    });
-  })();
-  return roleplayReadyPromise;
+function RoleplayPage() {
+  return (
+    <RoleplayEmbed style={{ width: "100%", height: "100%" }} />
+  );
 }
 ```
-## Embed in the full Roleplay page
-Use `mount(container)` when Seamless has a dedicated Roleplay page or tab and the full content area should be the Roleplay app.
-```html
-<div id="roleplay-root" style="width: 100%; height: 100%;"></div>
-```
-```js
-async function mountRoleplayPage() {
-  await ensureRoleplaySdkReady();
-  const container = document.getElementById("roleplay-root");
-  SeamlessRoleplay.mount(container);
+Make sure the parent has a height (`height: 100%`, `height: 100vh`, `flex: 1`, etc).
+Mounts automatically. Cleans up automatically when the user navigates away.
+---
+## 3. Roleplay dialog on Contact Search
+When a user clicks "Roleplay" on a contact row, a dialog opens over the page.
+```tsx
+import { useState } from "react";
+import { RoleplayDialog } from "@rehers/rehers-roleplay-sdk/react";
+function ContactSearch() {
+  const [activeContact, setActiveContact] = useState(null);
+  return (
+    <>
+      {/* Your existing contact table — just add an onClick to each row's button */}
+      <table>
+        {contacts.map((contact) => (
+          <tr key={contact.id}>
+            <td>{contact.name}</td>
+            <td>{contact.company}</td>
+            <td>{contact.title}</td>
+            <td>
+              <button onClick={() => setActiveContact(contact)}>
+                Roleplay
+              </button>
+            </td>
+          </tr>
+        ))}
+      </table>
+      {/* This renders nothing visible — the SDK creates the overlay */}
+      <RoleplayDialog
+        open={activeContact !== null}
+        name={activeContact?.name ?? ""}
+        domain={activeContact?.domain ?? ""}
+        company={activeContact?.company ?? ""}
+        title={activeContact?.title ?? ""}
+        liUrl={activeContact?.linkedinUrl}
+        companyDescription={activeContact?.companyDescription}
+        onClose={() => setActiveContact(null)}
+        onError={(err) => console.error("Error", err)}
+      />
+    </>
+  );
 }
 ```
-If the Seamless page or tab is torn down, unmount the SDK:
-```js
-SeamlessRoleplay.unmount();
+**How it works:** Set `activeContact` to a contact object to open the dialog. Set it back to `null` to close. The `onClose` callback fires when the user closes it themselves.
+---
+## 4. Add to Scenario (bulk)
+When users select multiple contacts and click "Add to Scenario", a scenario picker dialog opens.
+```tsx
+import { useState } from "react";
+import { AddToScenarioDialog } from "@rehers/rehers-roleplay-sdk/react";
+function ContactSearch() {
+  const [selectedContacts, setSelectedContacts] = useState([]);
+  const [showScenario, setShowScenario] = useState(false);
+  return (
+    <>
+      {/* Your existing table with checkboxes that populate selectedContacts */}
+      <button
+        disabled={selectedContacts.length === 0}
+        onClick={() => setShowScenario(true)}
+      >
+        Add {selectedContacts.length} to Scenario
+      </button>
+      <AddToScenarioDialog
+        open={showScenario}
+        contacts={selectedContacts.map((c) => ({
+          name: c.name,
+          company: c.company,
+          title: c.title,
+          domain: c.domain,
+          liUrl: c.linkedinUrl,
+        }))}
+        onComplete={(data) => {
+          console.log(`Added ${data.addedCount} to ${data.scenarioName}`);
+          setShowScenario(false);
+          setSelectedContacts([]);
+        }}
+        onClose={() => setShowScenario(false)}
+        onError={(err) => console.error("Error", err)}
+      />
+    </>
+  );
+}
 ```
-## Embed in Contact Search
+Accepts 1 to 25 contacts. Each contact needs `name`, `company`, `title`, and `domain`.
-Use `open(contactData)` when the user clicks a `Roleplay` button from a single contact row on the Contact Search screen.
+---
-```js
-async function openRoleplayForContact(contact) {
-  await ensureRoleplaySdkReady();
-  SeamlessRoleplay.open({
-    name: contact.name,
-    domain: contact.domain,
-    company: contact.company,
-    title: contact.title,
-    liUrl: contact.linkedinUrl,
-    companyDescription: contact.companyDescription,
-    onCallStarted(data) {
-      console.log("Roleplay call started", data.callId);
-    },
-    onCallEnded(data) {
-      console.log("Roleplay call ended", data.callId, data.duration);
-    },
-    onClose() {
-      console.log("Roleplay dialog closed");
-    },
-    onError(err) {
-      console.error("Roleplay dialog error", err);
-    },
-  });
-}
-```
+## Contact field mapping
-The contact object passed to `open(...)` should map to:
+When passing contact data to `RoleplayDialog` or `AddToScenarioDialog`:
-| SDK field | Contact Search value |
+| SDK prop | Your contact field |
 |---|---|
-| `name` | Contact full name |
-| `domain` | Company domain |
+| `name` | Full name |
+| `domain` | Company domain (e.g. `"stripe.com"`) |
 | `company` | Company name |
-| `title` | Contact title |
-| `liUrl` | LinkedIn profile URL, if available |
-| `companyDescription` | Company description, if available |
-## Optional: add contacts to a scenario
-If Seamless wants to send multiple contacts into a scenario picker dialog, use `addToScenario(...)`.
-```js
-async function addContactsToScenario(contacts) {
-  await ensureRoleplaySdkReady();
-  SeamlessRoleplay.addToScenario({
-    contacts: contacts.map((contact) => ({
-      name: contact.name,
-      company: contact.company,
-      title: contact.title,
-      domain: contact.domain,
-      liUrl: contact.linkedinUrl,
-      companyDescription: contact.companyDescription,
-    })),
-    onComplete(data) {
-      console.log("Scenario import complete", data);
-    },
-    onClose() {
-      console.log("Add to scenario dialog closed");
-    },
-    onError(err) {
-      console.error("Add to scenario error", err);
-    },
-  });
-}
-```
-## Minimal API surface
-### `SeamlessRoleplay.init(options)`
-Initializes the SDK with the logged-in Seamless user.
-```js
-SeamlessRoleplay.init({
-  publishableKey,
-  userId,
-  userEmail,
-  userRole,
-  onReady,
-  onError,
-});
-```
+| `title` | Job title |
+| `liUrl` | LinkedIn URL (optional) |
+| `companyDescription` | Company description (optional) |
-### `SeamlessRoleplay.mount(container)`
+---
-Mounts the full Roleplay app into a dashboard container.
+## That's it
-### `SeamlessRoleplay.open(contactData)`
+- **Provider** wraps your app once — handles auth, sessions, cleanup
+- **RoleplayEmbed** is your full Roleplay page — one component
+- **RoleplayDialog** opens per-contact from Contact Search — controlled by a boolean
+- **AddToScenarioDialog** opens for bulk import — controlled by a boolean
-Opens the Roleplay dialog for a single contact.
+All three clean up after themselves. No manual `destroy()`, no `useEffect`, no refs.
-### `SeamlessRoleplay.addToScenario(options)`
+TypeScript types are included — your editor will autocomplete all props.
-Opens the bulk add-to-scenario dialog for 1 to 25 contacts.
+---
-### `SeamlessRoleplay.close()`
+## Trial and upgrade handling
-Closes the active dialog.
+If a user doesn't have a Roleplay subscription, the SDK shows the upgrade/trial UI automatically inside the iframe. No client-side logic needed.
-### `SeamlessRoleplay.unmount()`
+---
-Unmounts the full-page Roleplay embed.
+## Advanced: Vanilla JavaScript
-### `SeamlessRoleplay.destroy()`
+If you need the vanilla SDK without React:
-Destroys the SDK state, timers, mount, and dialogs.
+```js
+import "@rehers/rehers-roleplay-sdk";
-## Trial and upgrade handling
+// Initialize once
+SeamlessRoleplay.init({
+  publishableKey: "pk_live_...",
+  userId: "...",
+  userEmail: "...",
+  onReady() { console.log("ready"); },
+});
-If the backend responds with `USER_NOT_FOUND` during SDK session creation, the SDK handles the upgrade or trial UI automatically. Seamless does not need separate client-side logic for that case.
+// Full page embed
+SeamlessRoleplay.mount(document.getElementById("container"));
-## TypeScript
+// Contact dialog
+SeamlessRoleplay.open({ name: "...", domain: "...", company: "...", title: "..." });
-Type declarations are included with the SDK package.
+// Bulk import
+SeamlessRoleplay.addToScenario({ contacts: [...], onComplete(data) { } });
-```ts
-import type {
-  SeamlessRoleplaySDK,
-  SeamlessRoleplayInitOptions,
-  SeamlessRoleplayOpenData,
-  AddToScenarioOptions,
-} from "@rehers/rehers-roleplay-sdk";
+// Cleanup
+SeamlessRoleplay.close();     // close dialog
+SeamlessRoleplay.unmount();   // remove embed
+SeamlessRoleplay.destroy();   // full cleanup
 ```

package/index.d.ts CHANGED Viewed

@@ -30,10 +30,6 @@ export interface SeamlessRoleplayOpenData {
   companyDescription?: string;
   /** Optional LinkedIn profile URL */
   liUrl?: string;
-  /** Called when the roleplay call starts */
-  onCallStarted?: (data: { callId: string }) => void;
-  /** Called when the roleplay call ends */
-  onCallEnded?: (data: { callId: string; duration?: number }) => void;
   /** Called when the dialog/mount is closed */
   onClose?: () => void;
   /** Called on error during the session */

package/package.json CHANGED Viewed

@@ -1,14 +1,34 @@
 {
   "name": "@rehers/rehers-roleplay-sdk",
-  "version": "2.4.2",
+  "version": "2.5.1",
   "description": "Seamless Roleplay SDK — embed roleplay call sessions via a modal + iframe",
   "main": "roleplay-sdk.js",
   "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./roleplay-sdk.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    }
+  },
   "files": [
     "roleplay-sdk.js",
-    "index.d.ts"
+    "index.d.ts",
+    "react.js",
+    "react.d.ts"
   ],
-  "keywords": ["seamless", "roleplay", "sdk", "sales", "training"],
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true },
+    "react-dom": { "optional": true }
+  },
+  "keywords": ["seamless", "roleplay", "sdk", "sales", "training", "react"],
   "license": "UNLICENSED",
   "repository": {
     "type": "git",

package/react.d.ts ADDED Viewed

@@ -0,0 +1,59 @@
+import { type ReactNode } from "react";
+import type { SeamlessRoleplaySDK, AddToScenarioContact, AddToScenarioCompleteData } from "@rehers/rehers-roleplay-sdk";
+import "@rehers/rehers-roleplay-sdk";
+export type { AddToScenarioContact, AddToScenarioCompleteData };
+interface SeamlessRoleplayContextValue {
+    isReady: boolean;
+    error: {
+        code: string;
+        message: string;
+    } | null;
+    sdk: SeamlessRoleplaySDK;
+}
+export interface SeamlessRoleplayProviderProps {
+    publishableKey: string;
+    userId: string;
+    userEmail: string;
+    userRole?: "owner" | "admin" | "member";
+    userToken?: string;
+    origin?: string;
+    onReady?: () => void;
+    onError?: (error: {
+        code: string;
+        message: string;
+    }) => void;
+    children: ReactNode;
+}
+export declare function SeamlessRoleplayProvider({ publishableKey, userId, userEmail, userRole, userToken, origin, onReady, onError, children, }: SeamlessRoleplayProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useSeamlessRoleplay(): SeamlessRoleplayContextValue;
+export interface RoleplayDialogProps {
+    open: boolean;
+    name: string;
+    domain: string;
+    company: string;
+    title: string;
+    companyDescription?: string;
+    liUrl?: string;
+    onClose?: () => void;
+    onError?: (data: {
+        code: string;
+        message: string;
+    }) => void;
+}
+export declare function RoleplayDialog({ open: isOpen, name, domain, company, title, companyDescription, liUrl, onClose, onError, }: RoleplayDialogProps): null;
+export interface RoleplayEmbedProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function RoleplayEmbed({ className, style }: RoleplayEmbedProps): import("react/jsx-runtime").JSX.Element;
+export interface AddToScenarioDialogProps {
+    open: boolean;
+    contacts: AddToScenarioContact[];
+    onComplete?: (data: AddToScenarioCompleteData) => void;
+    onClose?: () => void;
+    onError?: (error: {
+        code: string;
+        message: string;
+    }) => void;
+}
+export declare function AddToScenarioDialog({ open: isOpen, contacts, onComplete, onClose, onError, }: AddToScenarioDialogProps): null;

package/react.js ADDED Viewed

@@ -0,0 +1,171 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+// Side-effect import: the SDK IIFE runs and sets window.SeamlessRoleplay.
+// Works with bundlers (Vite, webpack) and script tags alike.
+import "@rehers/rehers-roleplay-sdk";
+// ── Callback ref helper ─────────────────────────────────────────────
+// Keeps a ref in sync with the latest callback to avoid stale closures.
+function useCallbackRef(cb) {
+    const ref = useRef(cb);
+    useLayoutEffect(() => {
+        ref.current = cb;
+    });
+    return ref;
+}
+// ── SDK singleton access ────────────────────────────────────────────
+function getSDK() {
+    if (typeof window !== "undefined" && window.SeamlessRoleplay) {
+        return window.SeamlessRoleplay;
+    }
+    throw new Error("[SeamlessRoleplay/React] Could not find SeamlessRoleplay SDK. " +
+        'Make sure "@rehers/rehers-roleplay-sdk" is installed and loaded before the React wrapper.');
+}
+const SeamlessRoleplayContext = createContext(null);
+let providerMountCount = 0;
+export function SeamlessRoleplayProvider({ publishableKey, userId, userEmail, userRole, userToken, origin, onReady, onError, children, }) {
+    const [state, setState] = useState({ isReady: false, error: null });
+    const mountedRef = useRef(false);
+    const onReadyRef = useCallbackRef(onReady);
+    const onErrorRef = useCallbackRef(onError);
+    const sdk = useMemo(() => getSDK(), []);
+    useEffect(() => {
+        providerMountCount++;
+        if (providerMountCount > 1 && process.env.NODE_ENV !== "production") {
+            console.warn("[SeamlessRoleplay/React] Multiple SeamlessRoleplayProvider instances detected. " +
+                "The SDK is a singleton — only one Provider should be mounted at a time.");
+        }
+        mountedRef.current = true;
+        setState({ isReady: false, error: null });
+        sdk.init({
+            publishableKey,
+            userId,
+            userEmail,
+            userRole,
+            userToken,
+            origin,
+            onReady: () => {
+                var _a;
+                if (!mountedRef.current)
+                    return;
+                setState({ isReady: true, error: null });
+                (_a = onReadyRef.current) === null || _a === void 0 ? void 0 : _a.call(onReadyRef);
+            },
+            onError: (err) => {
+                var _a;
+                if (!mountedRef.current)
+                    return;
+                setState({ isReady: false, error: err });
+                (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, err);
+            },
+        });
+        return () => {
+            mountedRef.current = false;
+            providerMountCount--;
+            sdk.destroy();
+        };
+    }, [sdk, publishableKey, userId, userEmail, userRole, userToken, origin]);
+    const contextValue = useMemo(() => ({ ...state, sdk }), [state, sdk]);
+    return (_jsx(SeamlessRoleplayContext.Provider, { value: contextValue, children: children }));
+}
+// ── Hook ────────────────────────────────────────────────────────────
+export function useSeamlessRoleplay() {
+    const ctx = useContext(SeamlessRoleplayContext);
+    if (!ctx) {
+        throw new Error("[SeamlessRoleplay/React] useSeamlessRoleplay() must be used inside a <SeamlessRoleplayProvider>.");
+    }
+    return ctx;
+}
+export function RoleplayDialog({ open: isOpen, name, domain, company, title, companyDescription, liUrl, onClose, onError, }) {
+    const { isReady, sdk } = useSeamlessRoleplay();
+    const onCloseRef = useCallbackRef(onClose);
+    const onErrorRef = useCallbackRef(onError);
+    const isOpenRef = useRef(false);
+    useEffect(() => {
+        if (!isReady)
+            return;
+        if (isOpen) {
+            isOpenRef.current = true;
+            sdk.open({
+                name,
+                domain,
+                company,
+                title,
+                companyDescription,
+                liUrl,
+                onClose: () => {
+                    var _a;
+                    isOpenRef.current = false;
+                    (_a = onCloseRef.current) === null || _a === void 0 ? void 0 : _a.call(onCloseRef);
+                },
+                onError: (data) => { var _a; return (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, data); },
+            });
+        }
+        else if (isOpenRef.current) {
+            isOpenRef.current = false;
+            sdk.close();
+        }
+        return () => {
+            if (isOpenRef.current) {
+                isOpenRef.current = false;
+                sdk.close();
+            }
+        };
+    }, [isReady, isOpen, name, domain, company, title, companyDescription, liUrl, sdk]);
+    return null;
+}
+export function RoleplayEmbed({ className, style }) {
+    const { isReady, sdk } = useSeamlessRoleplay();
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (!isReady || !containerRef.current)
+            return;
+        sdk.mount(containerRef.current);
+        return () => {
+            sdk.unmount();
+        };
+    }, [isReady, sdk]);
+    return _jsx("div", { ref: containerRef, className: className, style: style });
+}
+export function AddToScenarioDialog({ open: isOpen, contacts, onComplete, onClose, onError, }) {
+    const { isReady, sdk } = useSeamlessRoleplay();
+    const onCompleteRef = useCallbackRef(onComplete);
+    const onCloseRef = useCallbackRef(onClose);
+    const onErrorRef = useCallbackRef(onError);
+    const isOpenRef = useRef(false);
+    const contactsRef = useRef(contacts);
+    useLayoutEffect(() => {
+        contactsRef.current = contacts;
+    });
+    useEffect(() => {
+        if (!isReady)
+            return;
+        if (isOpen) {
+            isOpenRef.current = true;
+            sdk.addToScenario({
+                contacts: contactsRef.current,
+                onComplete: (data) => {
+                    var _a;
+                    isOpenRef.current = false;
+                    (_a = onCompleteRef.current) === null || _a === void 0 ? void 0 : _a.call(onCompleteRef, data);
+                },
+                onClose: () => {
+                    var _a;
+                    isOpenRef.current = false;
+                    (_a = onCloseRef.current) === null || _a === void 0 ? void 0 : _a.call(onCloseRef);
+                },
+                onError: (err) => { var _a; return (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, err); },
+            });
+        }
+        else if (isOpenRef.current) {
+            isOpenRef.current = false;
+            sdk.close();
+        }
+        return () => {
+            if (isOpenRef.current) {
+                isOpenRef.current = false;
+                sdk.close();
+            }
+        };
+    }, [isReady, isOpen, sdk]);
+    return null;
+}

package/roleplay-sdk.js CHANGED Viewed

@@ -35,7 +35,7 @@
   // ── Mount state (persistent embed — survives dialog open/close) ───
   var mountIframe = null;
   var mountContainer = null;
-  var mountCallbacks = { onCallStarted: null, onCallEnded: null, onClose: null, onError: null };
+  var mountCallbacks = { onClose: null, onError: null };
   var mountListener = null;
   // ── Dialog state (overlay — dialog or add-to-scenario) ────────────
@@ -43,7 +43,7 @@
   var dialogIframe = null;
   var dialogMode = null; // "dialog" | "add-to-scenario"
   var dialogContactData = null;
-  var dialogCallbacks = { onCallStarted: null, onCallEnded: null, onClose: null, onError: null };
+  var dialogCallbacks = { onClose: null, onError: null };
   var dialogAddToScenarioCallbacks = { onComplete: null, onClose: null, onError: null };
   var dialogAddToScenarioPendingContacts = null;
   var dialogListener = null;
@@ -199,7 +199,7 @@
     dialogContactData = null;
     dialogAddToScenarioPendingContacts = null;
     dialogMode = null;
-    dialogCallbacks = { onCallStarted: null, onCallEnded: null, onClose: null, onError: null };
+    dialogCallbacks = { onClose: null, onError: null };
     dialogAddToScenarioCallbacks = { onComplete: null, onClose: null, onError: null };
   }
@@ -218,7 +218,7 @@
     mountIframe = null;
     mountContainer = null;
-    mountCallbacks = { onCallStarted: null, onCallEnded: null, onClose: null, onError: null };
+    mountCallbacks = { onClose: null, onError: null };
   }
   // ── Message dispatch ──────────────────────────────────────────────
@@ -284,18 +284,6 @@
             });
           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 });
@@ -334,18 +322,6 @@
             });
           break;
-        case "ROLEPLAY_CALL_STARTED":
-          if (dialogCallbacks.onCallStarted) {
-            dialogCallbacks.onCallStarted({ callId: data.callId });
-          }
-          break;
-        case "ROLEPLAY_CALL_ENDED":
-          if (dialogCallbacks.onCallEnded) {
-            dialogCallbacks.onCallEnded({ callId: data.callId, duration: data.duration });
-          }
-          break;
         case "ROLEPLAY_ERROR":
           if (dialogCallbacks.onError) {
             dialogCallbacks.onError({ code: data.code, message: data.message });
@@ -486,8 +462,6 @@
         if (dialogOverlay || dialogIframe) teardownDialog();
         dialogContactData = data;
-        dialogCallbacks.onCallStarted = data.onCallStarted || null;
-        dialogCallbacks.onCallEnded = data.onCallEnded || null;
         dialogCallbacks.onClose = data.onClose || null;
         dialogCallbacks.onError = data.onError || null;
         dialogMode = "dialog";
@@ -585,7 +559,7 @@
         // Tear down any existing mount (re-mount)
         if (mountIframe) teardownMount();
-        mountCallbacks = { onCallStarted: null, onCallEnded: null, onClose: null, onError: null };
+        mountCallbacks = { onClose: null, onError: null };
         mountContainer = container;
         // Listen for messages