@rehers/rehers-roleplay-sdk 2.4.1 → 2.5.0

package/README.md

@@ -9,21 +9,274 @@ Use it in these two places:
 
 The SDK must be initialized with the currently logged-in Seamless user before either embed flow is used.
 
-## Load the SDK
+## Install
 
-If Seamless is using the downloaded SDK file directly:
+```bash
+npm install @rehers/rehers-roleplay-sdk
+```
+
+---
+
+## React Integration (Recommended)
+
+If the Seamless dashboard is built with React, use the React bindings. They handle SDK lifecycle, cleanup, and stale closures automatically.
+
+```tsx
+import {
+  SeamlessRoleplayProvider,
+  RoleplayDialog,
+  RoleplayEmbed,
+  AddToScenarioDialog,
+  useSeamlessRoleplay,
+} from "@rehers/rehers-roleplay-sdk/react";
+```
+
+### Get the logged-in Seamless user
+
+Use the existing Seamless dashboard session and call:
+
+```ts
+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";
+```
+
+### Wrap your app with the Provider
+
+Add `SeamlessRoleplayProvider` once, near the root of the Seamless dashboard. It initializes the SDK and makes it available to all child components.
+
+```tsx
+function App() {
+  return (
+    <SeamlessRoleplayProvider
+      publishableKey={ROLEPLAY_PUBLISHABLE_KEY}
+      userId={seamlessUserId}
+      userEmail={seamlessUserEmail}
+      userRole={seamlessUserRole}
+      onReady={() => console.log("Roleplay SDK ready")}
+      onError={(err) => console.error("Roleplay SDK error", err)}
+    >
+      <Dashboard />
+    </SeamlessRoleplayProvider>
+  );
+}
+```
+
+### Embed the full Roleplay page
+
+Use `RoleplayEmbed` when Seamless has a dedicated Roleplay page or tab and the full content area should be the Roleplay app.
+
+```tsx
+function RoleplayPage() {
+  return (
+    <RoleplayEmbed
+      style={{ width: "100%", height: "100vh" }}
+      onCallStarted={(data) => console.log("Call started", data.callId)}
+      onCallEnded={(data) => console.log("Call ended", data.callId, data.duration)}
+      onError={(err) => console.error("Roleplay error", err)}
+    />
+  );
+}
+```
+
+The embed mounts when the component mounts and cleans up automatically when it unmounts. No manual teardown needed.
+
+### Open a dialog from Contact Search
+
+Use `RoleplayDialog` when the user clicks a `Roleplay` button from a single contact row on the Contact Search screen.
+
+```tsx
+function ContactRow({ contact }) {
+  const [showRoleplay, setShowRoleplay] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setShowRoleplay(true)}>Roleplay</button>
+
+      <RoleplayDialog
+        open={showRoleplay}
+        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={() => setShowRoleplay(false)}
+        onError={(err) => {
+          console.error("Roleplay dialog error", err);
+        }}
+      />
+    </>
+  );
+}
+```
+
+The dialog opens when `open` becomes `true` and closes when it becomes `false`. All callbacks always see the latest props and state — no stale closures.
+
+### Add contacts to a scenario
+
+Use `AddToScenarioDialog` to send multiple contacts into a scenario picker dialog.
+
+```tsx
+function BulkActions({ selectedContacts }) {
+  const [showATS, setShowATS] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setShowATS(true)}>Add to Scenario</button>
+
+      <AddToScenarioDialog
+        open={showATS}
+        contacts={selectedContacts.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);
+          setShowATS(false);
+        }}
+        onClose={() => setShowATS(false)}
+        onError={(err) => {
+          console.error("Add to scenario error", err);
+        }}
+      />
+    </>
+  );
+}
+```
+
+Supports 1 to 25 contacts per call. Each contact requires `name`, `company`, `title`, and `domain`.
+
+### Use the hook for imperative access
+
+If you need direct access to SDK methods instead of declarative components:
+
+```tsx
+function CustomButton({ contact }) {
+  const { isReady, open, close } = useSeamlessRoleplay();
+
+  return (
+    <button
+      disabled={!isReady}
+      onClick={() =>
+        open({
+          ...contact,
+          onClose: () => console.log("closed"),
+        })
+      }
+    >
+      Start Roleplay
+    </button>
+  );
+}
+```
+
+### React props reference
+
+#### `SeamlessRoleplayProvider`
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `publishableKey` | `string` | Yes | Publishable API key (`pk_live_...` or `pk_test_...`) |
+| `userId` | `string` | Yes | `String(me.id)` from Seamless `/api/users/me` |
+| `userEmail` | `string` | Yes | `me.username` from Seamless `/api/users/me` |
+| `userRole` | `"owner" \| "admin" \| "member"` | No | User role for syncing permissions |
+| `userToken` | `string` | No | Signed JWT for identity verification |
+| `origin` | `string` | No | Override iframe origin (dev/testing only) |
+| `onReady` | `() => void` | No | Called when SDK session is ready |
+| `onError` | `(error) => void` | No | Called on initialization error |
+
+#### `RoleplayEmbed`
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `className` | `string` | No | CSS class for the container div |
+| `style` | `CSSProperties` | No | Inline styles for the container div |
+| `onCallStarted` | `(data) => void` | No | Called when a roleplay call starts |
+| `onCallEnded` | `(data) => void` | No | Called when a roleplay call ends |
+| `onClose` | `() => void` | No | Called when the embed is closed |
+| `onError` | `(data) => void` | No | Called on error |
+
+#### `RoleplayDialog`
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `open` | `boolean` | Yes | Whether the dialog is open |
+| `name` | `string` | Yes | Contact full name |
+| `domain` | `string` | Yes | Company domain (e.g. `"stripe.com"`) |
+| `company` | `string` | Yes | Company name |
+| `title` | `string` | Yes | Contact job title |
+| `companyDescription` | `string` | No | Company description |
+| `liUrl` | `string` | No | LinkedIn profile URL |
+| `onCallStarted` | `(data) => void` | No | Called when the roleplay call starts |
+| `onCallEnded` | `(data) => void` | No | Called when the roleplay call ends |
+| `onClose` | `() => void` | No | Called when the dialog is closed |
+| `onError` | `(data) => void` | No | Called on error |
+
+#### `AddToScenarioDialog`
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `open` | `boolean` | Yes | Whether the dialog is open |
+| `contacts` | `AddToScenarioContact[]` | Yes | Array of contacts (1–25) |
+| `onComplete` | `(data) => void` | No | Called on successful import |
+| `onClose` | `() => void` | No | Called when dialog is closed |
+| `onError` | `(error) => void` | No | Called on error |
+
+#### `useSeamlessRoleplay()`
+
+Returns `{ isReady, error, sdk }`. Must be used inside a `SeamlessRoleplayProvider`.
+
+---
+
+## Raw JavaScript Integration
+
+If the Seamless dashboard does not use React, or if you need direct imperative control, use the vanilla SDK directly.
+
+### Load the SDK
+
+#### Option 1: npm import
+
+```js
+import SeamlessRoleplay from "@rehers/rehers-roleplay-sdk";
+```
+
+#### Option 2: Script tag (hosted file)
 
 ```html
 <script src="/path/to/roleplay-sdk.js"></script>
 ```
 
-If Seamless is using the npm package:
+#### Option 3: CDN script
 
-```bash
-npm install @rehers/rehers-roleplay-sdk
+```html
+<script src="https://unpkg.com/@rehers/rehers-roleplay-sdk"></script>
 ```
 
-## Get the logged-in Seamless user
+### Get the logged-in Seamless user
 
 Use the existing Seamless dashboard session and call:
 
@@ -43,7 +296,7 @@ Normalize the response before reading fields:
 const me = meResponse.data ?? meResponse;
 ```
 
-## Required mapping for `init()`
+### Required mapping for `init()`
 
 These are the values Seamless must pass into `SeamlessRoleplay.init(...)`:
 
@@ -64,14 +317,7 @@ const seamlessUserRole =
   "member";
 ```
 
-For the response shape currently returned by Seamless, this means:
-
-```js
-const seamlessUserId = String(me.id);
-const seamlessUserEmail = me.username;
-```
-
-## Initialize the SDK once
+### Initialize the SDK once
 
 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.
 
@@ -115,7 +361,7 @@ function ensureRoleplaySdkReady() {
 }
 ```
 
-## Embed in the full Roleplay page
+### 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.
 
@@ -138,7 +384,7 @@ If the Seamless page or tab is torn down, unmount the SDK:
 SeamlessRoleplay.unmount();
 ```
 
-## Embed in Contact Search
+### Embed in Contact Search
 
 Use `open(contactData)` when the user clicks a `Roleplay` button from a single contact row on the Contact Search screen.
 
@@ -180,7 +426,7 @@ The contact object passed to `open(...)` should map to:
 | `liUrl` | LinkedIn profile URL, if available |
 | `companyDescription` | Company description, if available |
 
-## Optional: add contacts to a scenario
+### Add contacts to a scenario
 
 If Seamless wants to send multiple contacts into a scenario picker dialog, use `addToScenario(...)`.
 
@@ -210,9 +456,9 @@ async function addContactsToScenario(contacts) {
 }
 ```
 
-## Minimal API surface
+### API reference
 
-### `SeamlessRoleplay.init(options)`
+#### `SeamlessRoleplay.init(options)`
 
 Initializes the SDK with the logged-in Seamless user.
 
@@ -227,30 +473,32 @@ SeamlessRoleplay.init({
 });
 ```
 
-### `SeamlessRoleplay.mount(container)`
+#### `SeamlessRoleplay.mount(container)`
 
 Mounts the full Roleplay app into a dashboard container.
 
-### `SeamlessRoleplay.open(contactData)`
+#### `SeamlessRoleplay.open(contactData)`
 
 Opens the Roleplay dialog for a single contact.
 
-### `SeamlessRoleplay.addToScenario(options)`
+#### `SeamlessRoleplay.addToScenario(options)`
 
 Opens the bulk add-to-scenario dialog for 1 to 25 contacts.
 
-### `SeamlessRoleplay.close()`
+#### `SeamlessRoleplay.close()`
 
 Closes the active dialog.
 
-### `SeamlessRoleplay.unmount()`
+#### `SeamlessRoleplay.unmount()`
 
 Unmounts the full-page Roleplay embed.
 
-### `SeamlessRoleplay.destroy()`
+#### `SeamlessRoleplay.destroy()`
 
 Destroys the SDK state, timers, mount, and dialogs.
 
+---
+
 ## Trial and upgrade handling
 
 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.
@@ -260,10 +508,21 @@ If the backend responds with `USER_NOT_FOUND` during SDK session creation, the S
 Type declarations are included with the SDK package.
 
 ```ts
+// Vanilla SDK types
 import type {
   SeamlessRoleplaySDK,
   SeamlessRoleplayInitOptions,
   SeamlessRoleplayOpenData,
   AddToScenarioOptions,
 } from "@rehers/rehers-roleplay-sdk";
+
+// React bindings types
+import type {
+  SeamlessRoleplayProviderProps,
+  RoleplayDialogProps,
+  RoleplayEmbedProps,
+  AddToScenarioDialogProps,
+  AddToScenarioContact,
+  AddToScenarioCompleteData,
+} from "@rehers/rehers-roleplay-sdk/react";
 ```

package/package.json

@@ -1,14 +1,34 @@
 {
   "name": "@rehers/rehers-roleplay-sdk",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "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

@@ -0,0 +1,78 @@
+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;
+    onCallStarted?: (data: {
+        callId: string;
+    }) => void;
+    onCallEnded?: (data: {
+        callId: string;
+        duration?: number;
+    }) => void;
+    onClose?: () => void;
+    onError?: (data: {
+        code: string;
+        message: string;
+    }) => void;
+}
+export declare function RoleplayDialog({ open: isOpen, name, domain, company, title, companyDescription, liUrl, onCallStarted, onCallEnded, onClose, onError, }: RoleplayDialogProps): null;
+export interface RoleplayEmbedProps {
+    className?: string;
+    style?: React.CSSProperties;
+    onCallStarted?: (data: {
+        callId: string;
+    }) => void;
+    onCallEnded?: (data: {
+        callId: string;
+        duration?: number;
+    }) => void;
+    onClose?: () => void;
+    onError?: (data: {
+        code: string;
+        message: string;
+    }) => void;
+}
+export declare function RoleplayEmbed({ className, style, onCallStarted, onCallEnded, onClose, onError, }: 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

@@ -0,0 +1,224 @@
+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, onCallStarted, onCallEnded, onClose, onError, }) {
+    const { isReady, sdk } = useSeamlessRoleplay();
+    const onCallStartedRef = useCallbackRef(onCallStarted);
+    const onCallEndedRef = useCallbackRef(onCallEnded);
+    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,
+                onCallStarted: (data) => { var _a; return (_a = onCallStartedRef.current) === null || _a === void 0 ? void 0 : _a.call(onCallStartedRef, data); },
+                onCallEnded: (data) => { var _a; return (_a = onCallEndedRef.current) === null || _a === void 0 ? void 0 : _a.call(onCallEndedRef, data); },
+                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;
+}
+// ── RoleplayEmbed ───────────────────────────────────────────────────
+// The vanilla SDK's mount() doesn't accept callbacks, so RoleplayEmbed
+// sets up its own postMessage listener after mount() appends the iframe.
+const DEFAULT_APP_ORIGIN = "https://app.roleplaywithseamless.ai";
+export function RoleplayEmbed({ className, style, onCallStarted, onCallEnded, onClose, onError, }) {
+    const { isReady, sdk } = useSeamlessRoleplay();
+    const containerRef = useRef(null);
+    const onCallStartedRef = useCallbackRef(onCallStarted);
+    const onCallEndedRef = useCallbackRef(onCallEnded);
+    const onCloseRef = useCallbackRef(onClose);
+    const onErrorRef = useCallbackRef(onError);
+    useEffect(() => {
+        if (!isReady || !containerRef.current)
+            return;
+        sdk.mount(containerRef.current);
+        // Grab the iframe that mount() just appended
+        const iframe = containerRef.current.querySelector("iframe");
+        if (!iframe)
+            return;
+        const hasCallbacks = onCallStarted || onCallEnded || onClose || onError;
+        let listener = null;
+        if (hasCallbacks) {
+            listener = (event) => {
+                var _a, _b, _c, _d;
+                if (event.origin !== DEFAULT_APP_ORIGIN)
+                    return;
+                if (!iframe.contentWindow || event.source !== iframe.contentWindow)
+                    return;
+                const data = event.data;
+                if (!data || typeof data.type !== "string")
+                    return;
+                switch (data.type) {
+                    case "ROLEPLAY_CALL_STARTED":
+                        (_a = onCallStartedRef.current) === null || _a === void 0 ? void 0 : _a.call(onCallStartedRef, { callId: data.callId });
+                        break;
+                    case "ROLEPLAY_CALL_ENDED":
+                        (_b = onCallEndedRef.current) === null || _b === void 0 ? void 0 : _b.call(onCallEndedRef, {
+                            callId: data.callId,
+                            duration: data.duration,
+                        });
+                        break;
+                    case "ROLEPLAY_ERROR":
+                        (_c = onErrorRef.current) === null || _c === void 0 ? void 0 : _c.call(onErrorRef, {
+                            code: data.code,
+                            message: data.message,
+                        });
+                        break;
+                    case "ROLEPLAY_CLOSED":
+                        (_d = onCloseRef.current) === null || _d === void 0 ? void 0 : _d.call(onCloseRef);
+                        break;
+                }
+            };
+            window.addEventListener("message", listener);
+        }
+        return () => {
+            if (listener)
+                window.removeEventListener("message", listener);
+            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;
+}