call-control-sdk 5.3.0 → 5.3.4

package/README.md

@@ -1,265 +1,266 @@
-### Call Control SDK [![npm version](https://img.shields.io/npm/v/call-control-sdk.svg?color=blue)](https://www.npmjs.com/package/call-control-sdk) [![npm downloads](https://img.shields.io/npm/dm/call-control-sdk.svg?color=green)](https://www.npmjs.com/package/call-control-sdk)
-
-A lightweight SDK that provides a **draggable call control panel** and utility hooks for managing calls in real-time. Built with **TypeScript**, **Material-UI**, and designed for **agent productivity**.
-
-### ✨ Features
-
-- 🎯 **Complete Call Control** – Hold, Mute, Status management, and End Call
-- 🖱️ **Draggable Interface** – Movable panel with persisted position
-- 💾 **State Persistence** – Saves control states in `localStorage`
-- ⏱️ **Live Call Timer** – Real-time call duration tracking
-- 🎨 **Material-UI Design** – Responsive and accessible UI
-- 📱 **Touch Support** – Works seamlessly on desktop and mobile
-- 🔧 **TypeScript Support** – Full type safety and IntelliSense
-- 🎪 **Singleton State** – Consistent shared state across components
-
-
-
-### 📦 Installation [![bundle size](https://img.shields.io/bundlephobia/minzip/call-control-sdk?color=orange&fontSize=12px)](https://bundlephobia.com/package/call-control-sdk)
-
-```bash
-npm install call-control-sdk
-```
-
-### 🔑 Peer Dependencies
-
-```bash
-npm install react react-dom axios @mui/material @mui/icons-material @emotion/react @emotion/styled
-```
-
-### 📚 Table of Contents
-
-1. [Getting Started](#-getting-started)
-2. [Core API](#-core-api)
-   - [initSDK](#initsdk)
-   - [CallControlPanel](#callcontrolpanel)
-   - [updateCallData](#updatecalldata)
-3. [Hooks](#-hooks)
-   - [useLogout](#uselogout)
-   - [useClickToCall](#useClickToCall)
-   - [useEndCall](#useendcall)
-4. [Payloads](#-payloads)
-5. [Control Features](#-control-features)
-6. [Browser Support](#-browser-support)
-7. [License](#-license)
-
-### 🚀 Getting Started
-
-#### 1. Initialize the SDK
-
-```tsx
-import { useEffect } from "react";
-import { initSDK } from "call-control-sdk";
-
-// Initialize at the top level of your app
-function App() {
-  useEffect(() => {
-    // Initialize the SDK.
-    try {
-      initSDK({
-        apiKey: "your-api-key",
-        tenantId: "your-tenant-id",
-        agentId: "your-agent-id",
-      });
-      console.log("SDK initialized successfully");
-    } catch (error) {
-      console.error("SDK initialization failed:", error);
-    }
-  }, []);
-
-  return <h1>My App</h1>;
-}
-```
-
-#### 2. Add the Call Control Panel
-
-```tsx
-import { CallControlPanel } from "call-control-sdk";
-
-export default function App() {
-  const handleDataChange = (data) => {
-    console.log("Call data updated:", data);
-  };
-
-  return (
-    <div>
-      <h1>Agent Dashboard</h1>
-      <CallControlPanel onDataChange={handleDataChange} />
-    </div>
-  );
-}
-```
-
-#### 3. Logout Agent
-
-```tsx
-import { useLogout } from "call-control-sdk";
-
-export default function LogoutButton() {
-  const { logout, isLoading, isSuccess, isError, error } = useLogout();
-  return <button onClick={logout}>Logout</button>;
-}
-```
-
-#### 4. Start Call
-
-```tsx
-import { useClickToCall } from "call-control-sdk";
-
-export default function CallButton() {
-  const { handleStartCall, isLoading, isSuccess, isError, error } = useClickToCall();
-
-  const onStartCall = () => {
-    handleStartCall({ mobileNumber: "1111111111" });
-  };
-
-  return (
-    <div>
-      <button onClick={onStartCall} disabled={isLoading}>
-        { "Call"}
-      </button>
-      {isSuccess && <p>✅ Call ended successfully</p>}
-      {isError && <p>❌ Error: {error?.message}</p>}
-    </div>
-  );
-}
-```
-#### 5. End Call
-
-```tsx
-import { useEndCall } from "call-control-sdk";
-
-export default function EndCallButton() {
-  const { handleEndCall, isLoading, isSuccess, isError, error } = useEndCall();
-
-  const onEndCall = () => {
-    handleEndCall({
-      disposition: "RES", // Call disposition
-    });
-  };
-
-  return (
-    <div>
-      <button onClick={onEndCall} disabled={isLoading}>
-        {isLoading ? "Ending Call..." : "End Call"}
-      </button>
-      {isSuccess && <p>✅ Call ended successfully</p>}
-      {isError && <p>❌ Error: {error?.message}</p>}
-    </div>
-  );
-}
-```
-
-### 🛠 Core API
-
-#### `initSDK(config)`
-
-Initializes the SDK. Must be called **before using any components or hooks**.
-
-**Parameters**:
-
-| Name       | Type   | Required | Description                         |
-| ---------- | ------ | -------- | ----------------------------------- |
-| `apiKey`   | string | ✅       | API key for authentication          |
-| `tenantId` | string | ✅       | Tenant ID for events/authentication |
-| `agentId`  | string | ✅       | Agent ID for call controls          |
-
-#### `CallControlPanel`
-
-Draggable control panel for call management.
-
-**Props**:
-
-| Prop            | Type     | Required | Description                                                                                        |
-| --------------- | -------- | -------- | -------------------------------------------------------------------------------------------------- |
-| `onDataChange?` | function | ❌       | Callback fired when call data changes. Receives `{ mobileNumber, callReferenceId, agentLoginId }`. |
-
-#### `updateCallData(data: Partial<CallData>)`
-
-Update call data programmatically.
-
-**Parameters**:
-
-| Field              | Type   | Description            |
-| ------------------ | ------ | ---------------------- |
-| `mobileNumber?`    | string | Mobile phone number    |
-| `callReferenceId?` | string | Unique call reference  |
-| `agentLoginId?`    | string | Agent login identifier |
-
-### 🪝 Hooks
-
-#### `useLogout()`
-
-Logs out the current agent.
-
-```tsx
-const { logOut } = useLogout();
-<button onClick={logOut}>Logout</button>;
-```
-
-#### `useStartCall()`
-
-Hook for call to mobile number.
-
-**Returns**:
-
-| Key             | Type     | Description                                                     |
-| --------------- | -------- | --------------------------------------------------------------- |
-| `handleStartCall` | function | `(payload: StartCallPayload) => void` – triggers end-call request |
-| `isLoading`     | boolean  | True while request is pending                                   |
-| `isSuccess`     | boolean  | True if request succeeded                                       |
-| `isError`       | boolean  | True if request failed                                          |
-| `error`         | any      | Error object if failed                                          |
-| `data`          | any      | API response on success                                         |
-
-#### `useEndCall()`
-
-Hook for ending an active call.
-
-**Returns**:
-
-| Key             | Type     | Description                                                     |
-| --------------- | -------- | --------------------------------------------------------------- |
-| `handleEndCall` | function | `(payload: EndCallPayload) => void` – triggers end-call request |
-| `isLoading`     | boolean  | True while request is pending                                   |
-| `isSuccess`     | boolean  | True if request succeeded                                       |
-| `isError`       | boolean  | True if request failed                                          |
-| `error`         | any      | Error object if failed                                          |
-| `data`          | any      | API response on success                                         |
-
-### 📦 Payloads
-
-#### `StartCallPayload`
-
-```ts
-interface EndCallPayload {
-  mobileNumber?: string; // Mobile number
-}
-```
-
-#### `EndCallPayload`
-
-```ts
-interface EndCallPayload {
-  disposition?: string; // Call disposition (default: "RES")
-}
-```
-
-### 🎛 Control Features
-
- **Status Management**: Idle / Break
- **Call Controls**: Hold / Resume, Mute / Unmute, End Call, Agent Status
- **Persistent State**: Hold, mute, agent status, panel position, call timer
-
-### 🌍 Browser Support
-
- ✅ Chrome 60+
- ✅ Firefox 60+
- ✅ Safari 12+
- ✅ Edge 79+
-
----
-
-### 📄 License
-
-MIT © 2025 [![license](https://img.shields.io/npm/l/call-control-sdk.svg)](#-license)
+### Call Control SDK [![npm version](https://img.shields.io/npm/v/call-control-sdk.svg?color=blue)](https://www.npmjs.com/package/call-control-sdk) [![npm downloads](https://img.shields.io/npm/dm/call-control-sdk.svg?color=green)](https://www.npmjs.com/package/call-control-sdk)
+
+A lightweight SDK that provides a **draggable call control panel** and utility hooks for managing calls in real-time. Built with **TypeScript**, **Material-UI**, and designed for **agent productivity**.
+
+### ✨ Features
+
+- 🎯 **Complete Call Control** – Hold, Mute, Status management, and End Call
+- 🖱️ **Draggable Interface** – Movable panel with persisted position
+- 💾 **State Persistence** – Saves control states in `localStorage`
+- ⏱️ **Live Call Timer** – Real-time call duration tracking
+- 🎨 **Material-UI Design** – Responsive and accessible UI
+- 📱 **Touch Support** – Works seamlessly on desktop and mobile
+- 🔧 **TypeScript Support** – Full type safety and IntelliSense
+- 🎪 **Singleton State** – Consistent shared state across components
+
+
+
+### 📦 Installation [![bundle size](https://img.shields.io/bundlephobia/minzip/call-control-sdk?color=orange&fontSize=12px)](https://bundlephobia.com/package/call-control-sdk)
+
+```bash
+npm install call-control-sdk
+```
+
+### 🔑 Peer Dependencies
+
+```bash
+npm install react react-dom axios @mui/material @mui/icons-material @emotion/react @emotion/styled
+```
+
+### 📚 Table of Contents
+
+1. [Getting Started](#-getting-started)
+2. [Core API](#-core-api)
+   - [initSDK](#initsdk)
+   - [CallControlPanel](#callcontrolpanel)
+   - [updateCallData](#updatecalldata)
+3. [Hooks](#-hooks)
+   - [useLogout](#uselogout)
+   - [useClickToCall](#useClickToCall)
+   - [useEndCall](#useendcall)
+4. [Payloads](#-payloads)
+5. [Control Features](#-control-features)
+6. [Browser Support](#-browser-support)
+7. [License](#-license)
+
+### 🚀 Getting Started
+
+#### 1. Initialize the SDK
+
+```tsx
+import { useEffect } from "react";
+import { initSDK } from "call-control-sdk";
+
+// Initialize at the top level of your app
+function App() {
+  useEffect(() => {
+    // Initialize the SDK.
+    try {
+      initSDK({
+        apiKey: "your-api-key",
+        tenantId: "your-tenant-id",
+        agentId: "your-agent-id",
+      });
+      console.log("SDK initialized successfully");
+    } catch (error) {
+      console.error("SDK initialization failed:", error);
+    }
+  }, []);
+
+  return <h1>My App</h1>;
+}
+```
+
+#### 2. Add the Call Control Panel
+
+```tsx
+import { CallControlPanel } from "call-control-sdk";
+
+export default function App() {
+  const handleDataChange = (data) => {
+    console.log("Call data updated:", data);
+  };
+
+  return (
+    <div>
+      <h1>Agent Dashboard</h1>
+      <CallControlPanel onDataChange={handleDataChange} />
+    </div>
+  );
+}
+```
+
+#### 3. Logout Agent
+
+```tsx
+import { useLogout } from "call-control-sdk";
+
+export default function LogoutButton() {
+  const { logout, isLoading, isSuccess, isError, error } = useLogout();
+  return <button onClick={logout}>Logout</button>;
+}
+```
+
+#### 4. Start Call
+
+```tsx
+import { useClickToCall } from "call-control-sdk";
+
+export default function CallButton() {
+  const { handleStartCall, isLoading, isSuccess, isError, error } = useClickToCall();
+
+  const onStartCall = () => {
+    handleStartCall({ mobileNumber: "1111111111" });
+  };
+
+  return (
+    <div>
+      <button onClick={onStartCall} disabled={isLoading}>
+        { "Call"}
+      </button>
+      {isSuccess && <p>✅ Call ended successfully</p>}
+      {isError && <p>❌ Error: {error?.message}</p>}
+    </div>
+  );
+}
+```
+#### 5. End Call
+
+```tsx
+import { useEndCall } from "call-control-sdk";
+
+export default function EndCallButton() {
+  const { handleEndCall, isLoading, isSuccess, isError, error } = useEndCall();
+
+  const onEndCall = () => {
+    handleEndCall({
+      disposition: "RES", // Call disposition
+    });
+  };
+
+  return (
+    <div>
+      <button onClick={onEndCall} disabled={isLoading}>
+        {isLoading ? "Ending Call..." : "End Call"}
+      </button>
+      {isSuccess && <p>✅ Call ended successfully</p>}
+      {isError && <p>❌ Error: {error?.message}</p>}
+    </div>
+  );
+}
+```
+
+### 🛠 Core API
+
+#### `initSDK(config)`
+
+Initializes the SDK. Must be called **before using any components or hooks**.
+
+**Parameters**:
+
+| Name       | Type   | Required | Description                         |
+| ---------- | ------ | -------- | ----------------------------------- |
+| `apiKey`   | string | ✅       | API key for authentication          |
+| `tenantId` | string | ✅       | Tenant ID for events/authentication |
+| `agentId`  | string | ✅       | Agent ID for call controls          |
+
+#### `CallControlPanel`
+
+Draggable control panel for call management.
+
+**Props**:
+
+| Prop            | Type     | Required | Description                                                                                        |
+| --------------- | -------- | -------- | -------------------------------------------------------------------------------------------------- |
+| `onDataChange?` | function | ❌       | Callback fired when call data changes. Receives `{ mobileNumber, callReferenceId, agentLoginId }`. |
+
+#### `updateCallData(data: Partial<CallData>)`
+
+Update call data programmatically.
+
+**Parameters**:
+
+| Field              | Type   | Description            |
+| ------------------ | ------ | ---------------------- |
+| `mobileNumber?`    | string | Mobile phone number    |
+| `callReferenceId?` | string | Unique call reference  |
+| `agentLoginId?`    | string | Agent login identifier |
+
+### 🪝 Hooks
+
+#### `useLogout()`
+
+Logs out the current agent.
+
+```tsx
+const { logOut } = useLogout();
+<button onClick={logOut}>Logout</button>;
+```
+
+#### `useStartCall()`
+
+Hook for call to mobile number.
+
+**Returns**:
+
+| Key             | Type     | Description                                                     |
+| --------------- | -------- | --------------------------------------------------------------- |
+| `handleStartCall` | function | `(payload: StartCallPayload) => void` – triggers end-call request |
+| `isLoading`     | boolean  | True while request is pending                                   |
+| `isSuccess`     | boolean  | True if request succeeded                                       |
+| `isError`       | boolean  | True if request failed                                          |
+| `error`         | any      | Error object if failed                                          |
+| `data`          | any      | API response on success                                         |
+
+#### `useEndCall()`
+
+Hook for ending an active call.
+
+**Returns**:
+
+| Key             | Type     | Description                                                     |
+| --------------- | -------- | --------------------------------------------------------------- |
+| `handleEndCall` | function | `(payload: EndCallPayload) => void` – triggers end-call request |
+| `isLoading`     | boolean  | True while request is pending                                   |
+| `isSuccess`     | boolean  | True if request succeeded                                       |
+| `isError`       | boolean  | True if request failed                                          |
+| `error`         | any      | Error object if failed                                          |
+| `data`          | any      | API response on success                                         |
+
+### 📦 Payloads
+
+#### `StartCallPayload`
+
+```ts
+interface EndCallPayload {
+  mobileNumber?: string; // Mobile number
+}
+```
+
+#### `EndCallPayload`
+
+```ts
+interface EndCallPayload {
+  disposition?: string; // Call disposition (default: "RES")
+}
+```
+
+### 🎛 Control Features
+
+ **Status Management**: Idle / Break
+ **Call Controls**: Hold / Resume, Mute / Unmute, End Call, Agent Status
+ **Persistent State**: Hold, mute, agent status, panel position, call timer
+
+### 🌍 Browser Support
+
+. ✅ Chrome 60+
+. ✅ Firefox 60+
+. ✅ Safari 12+
+. ✅ Edge 79+
+
+
+---
+
+### 📄 License
+
+MIT © 2025 [![license](https://img.shields.io/npm/l/call-control-sdk.svg)](#-license)

package/dist/index.d.mts

@@ -1,3 +1,4 @@
+import { SxProps } from '@mui/material';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -34,25 +35,6 @@ declare const useEndCall: () => {
     data: null;
 };
 
-interface StartCallPayload {
-    mobileNumber: string;
-}
-/**
- * Custom hook for handling end call functionality
- * @param options - Optional callbacks for success, error, and completion
- * @returns Object containing logout function and loading state
- * @example
- * handleStartCall({ mobileNumber: "1111111111" });
- */
-declare const useClickToCall: () => {
-    handleStartCall: (data: StartCallPayload) => Promise<any>;
-    isLoading: boolean;
-    isSuccess: boolean;
-    isError: boolean;
-    error: null;
-    data: null;
-};
-
 interface CallData {
     mobileNumber?: string;
     callReferenceId?: string;
@@ -70,6 +52,14 @@ interface CallControlPanelProps {
     onDataChange?: (data: any) => void;
 }
 type CallStatus = "idle" | "ready" | "break" | "on call" | "wrap up" | "dial" | "hold" | "mute";
+interface SDKConfig {
+    showEndCallButton?: boolean;
+    showTransferButton?: boolean;
+    showConferenceButton?: boolean;
+    disabled?: SxProps;
+    enabled?: SxProps;
+    outlined?: SxProps;
+}
 
 declare function CallControlPanel({ onDataChange }: CallControlPanelProps): react_jsx_runtime.JSX.Element;
 
@@ -82,7 +72,8 @@ type intiSDKParams = {
     apiKey: string;
     tenantId: string;
     agentId: string;
+    sdkConfig?: SDKConfig;
 };
-declare function initSDK({ apiKey, tenantId, agentId }: intiSDKParams): void;
+declare function initSDK({ apiKey, tenantId, agentId, sdkConfig, }: intiSDKParams): void;
 
-export { CallControlPanel, type CallControlPanelProps, type CallData, type CallStatus, initSDK, useClickToCall, useEndCall, useLogout };
+export { CallControlPanel, type CallControlPanelProps, type CallData, type CallStatus, initSDK, useEndCall, useLogout };

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { SxProps } from '@mui/material';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -34,25 +35,6 @@ declare const useEndCall: () => {
     data: null;
 };
 
-interface StartCallPayload {
-    mobileNumber: string;
-}
-/**
- * Custom hook for handling end call functionality
- * @param options - Optional callbacks for success, error, and completion
- * @returns Object containing logout function and loading state
- * @example
- * handleStartCall({ mobileNumber: "1111111111" });
- */
-declare const useClickToCall: () => {
-    handleStartCall: (data: StartCallPayload) => Promise<any>;
-    isLoading: boolean;
-    isSuccess: boolean;
-    isError: boolean;
-    error: null;
-    data: null;
-};
-
 interface CallData {
     mobileNumber?: string;
     callReferenceId?: string;
@@ -70,6 +52,14 @@ interface CallControlPanelProps {
     onDataChange?: (data: any) => void;
 }
 type CallStatus = "idle" | "ready" | "break" | "on call" | "wrap up" | "dial" | "hold" | "mute";
+interface SDKConfig {
+    showEndCallButton?: boolean;
+    showTransferButton?: boolean;
+    showConferenceButton?: boolean;
+    disabled?: SxProps;
+    enabled?: SxProps;
+    outlined?: SxProps;
+}
 
 declare function CallControlPanel({ onDataChange }: CallControlPanelProps): react_jsx_runtime.JSX.Element;
 
@@ -82,7 +72,8 @@ type intiSDKParams = {
     apiKey: string;
     tenantId: string;
     agentId: string;
+    sdkConfig?: SDKConfig;
 };
-declare function initSDK({ apiKey, tenantId, agentId }: intiSDKParams): void;
+declare function initSDK({ apiKey, tenantId, agentId, sdkConfig, }: intiSDKParams): void;
 
-export { CallControlPanel, type CallControlPanelProps, type CallData, type CallStatus, initSDK, useClickToCall, useEndCall, useLogout };
+export { CallControlPanel, type CallControlPanelProps, type CallData, type CallStatus, initSDK, useEndCall, useLogout };