call-control-sdk 5.2.1 → 5.2.3

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
  1. package/README.md +174 -125
  2. package/dist/index.js +1 -1
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +1 -1
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -1,208 +1,257 @@
1
- # Call Control SDK
1
+ # 📞 Call Control SDK
2
2
 
3
- Call control SDK component, providing control panel for call management.
3
+ [![npm version](https://img.shields.io/npm/v/call-control-sdk.svg?color=blue&logo=npm)](https://www.npmjs.com/package/call-control-sdk)
4
+ [![npm downloads](https://img.shields.io/npm/dm/call-control-sdk.svg?color=green)](https://www.npmjs.com/package/call-control-sdk)
5
+ [![bundle size](https://img.shields.io/bundlephobia/minzip/call-control-sdk?color=orange)](https://bundlephobia.com/package/call-control-sdk)
6
+ [![license](https://img.shields.io/npm/l/call-control-sdk.svg)](#-license)
4
7
 
5
- ## Features
8
+ 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**.
6
9
 
7
- - 🎯 **Complete Call Control**: Hold, Mute, Status management, and End Call functionality
8
- - 🖱️ **Draggable Interface**: Movable control panel that persists position
9
- - 💾 **State Persistence**: All control states saved in localStorage
10
- - ⏱️ **Live Call Timer**: Real-time call duration tracking
11
- - 🎨 **Material-UI Design**: Beautiful, responsive design with MUI components
12
- - 📱 **Touch Support**: Works on both desktop and mobile devices
13
- - 🔧 **TypeScript Support**: Full type safety and IntelliSense
14
- - 🎪 **Singleton Pattern**: Shared state management across components
10
+ ---
11
+
12
+ ## 🎥 Demo Preview
13
+
14
+ <img src="https://raw.githubusercontent.com/your-repo/demo.gif" alt="Call Control SDK Demo" width="600" />
15
+
16
+ ---
17
+
18
+ ## ✨ Features
19
+
20
+ - 🎯 **Complete Call Control** – Hold, Mute, Status management, and End Call
21
+ - 🖱️ **Draggable Interface** – Movable panel with persisted position
22
+ - 💾 **State Persistence** – Saves control states in `localStorage`
23
+ - ⏱️ **Live Call Timer** – Real-time call duration tracking
24
+ - 🎨 **Material-UI Design** – Responsive and accessible UI
25
+ - 📱 **Touch Support** – Works seamlessly on desktop and mobile
26
+ - 🔧 **TypeScript Support** – Full type safety and IntelliSense
27
+ - 🎪 **Singleton State** – Consistent shared state across components
28
+
29
+ ---
15
30
 
16
- ## Installation
31
+ ## 📦 Installation
17
32
 
18
33
  ```bash
19
34
  npm install call-control-sdk
20
35
  ```
21
36
 
22
- ## Peer Dependencies
23
-
24
- Make sure you have these installed in your application:
37
+ ### 🔑 Peer Dependencies
25
38
 
26
39
  ```bash
27
40
  npm install react react-dom axios @mui/material @mui/icons-material @emotion/react @emotion/styled
28
41
  ```
29
42
 
30
- ## Quick Start
43
+ ---
44
+
45
+ ## 📚 Table of Contents
46
+
47
+ 1. [Getting Started](#-getting-started)
48
+ 2. [Core API](#-core-api)
49
+ - [initSDK](#initsdk)
50
+ - [CallControlPanel](#callcontrolpanel)
51
+ - [updateCallData](#updatecalldata)
52
+ 3. [Hooks](#-hooks)
53
+ - [useLogout](#uselogout)
54
+ - [useEndCall](#useendcall)
55
+ 4. [Payloads](#-payloads)
56
+ 5. [Control Features](#-control-features)
57
+ 6. [Browser Support](#-browser-support)
58
+ 7. [License](#-license)
59
+
60
+ ---
61
+
62
+ ## 🚀 Getting Started
31
63
 
32
64
  ### 1. Initialize the SDK
33
65
 
34
- ```typescript
66
+ ```tsx
67
+ import { useEffect } from "react";
35
68
  import { initSDK } from "call-control-sdk";
36
69
 
37
70
  // Initialize at the top level of your app
38
- useEffect(() => {
39
- // Initialize the SDK.
40
- try {
41
- initSDK({
42
- apiKey: "apiKey",
43
- tenantId: "tenantId",
44
- agentId: "agentId",
45
- });
46
- console.log("SDK initialized successfully");
47
- } catch (error) {
48
- console.error("SDK initialization failed:", error);
49
- }
50
- }, []);
71
+ function App() {
72
+ useEffect(() => {
73
+ // Initialize the SDK.
74
+ try {
75
+ initSDK({
76
+ apiKey: "your-api-key",
77
+ tenantId: "your-tenant-id",
78
+ agentId: "your-agent-id",
79
+ });
80
+ console.log("SDK initialized successfully");
81
+ } catch (error) {
82
+ console.error("SDK initialization failed:", error);
83
+ }
84
+ }, []);
85
+
86
+ return <h1>My App</h1>;
87
+ }
51
88
  ```
52
89
 
53
- ### 2. Use the CallControlPanel
90
+ ---
54
91
 
55
- ```typescript
56
- import React from 'react';
57
- import { CallControlPanel } from 'call-control-sdk';
92
+ ### 2. Add the Call Control Panel
58
93
 
59
- function App() {
60
- const handleDataChange = ({ mobileNumber, callReferenceId, agentLoginId }) => {
61
- console.log('Call data updated:', { mobileNumber, callReferenceId, agentLoginId });
94
+ ```tsx
95
+ import { CallControlPanel } from "call-control-sdk";
96
+
97
+ export default function App() {
98
+ const handleDataChange = (data) => {
99
+ console.log("Call data updated:", data);
62
100
  };
63
101
 
64
102
  return (
65
103
  <div>
66
- <h1>My Application</h1>
104
+ <h1>Agent Dashboard</h1>
67
105
  <CallControlPanel onDataChange={handleDataChange} />
68
106
  </div>
69
107
  );
70
108
  }
71
109
  ```
72
110
 
73
- ### 3. Use the useLogout Hook
111
+ ---
74
112
 
75
- ```typescript
76
- import React from 'react';
77
- import { useLogout } from 'call-control-sdk';
113
+ ### 3. Logout Agent
78
114
 
79
- function App() {
115
+ ```tsx
116
+ import { useLogout } from "call-control-sdk";
80
117
 
81
- return (
82
- <div>
83
- <button onClick={useLogout}>Logout</button>
84
- </div>
85
- );
118
+ export default function LogoutButton() {
119
+ const { logout, isLoading, isSuccess, isError, error } = useLogout();
120
+ return <button onClick={logout}>Logout</button>;
86
121
  }
87
122
  ```
88
123
 
89
- - `useLogout` is used to logout the agent.
124
+ ---
90
125
 
91
- ### 4. Use the useEndCall Hook
126
+ ### 4. End Call
92
127
 
93
- ```typescript
94
- import React from "react";
95
- import { useEndCall } from "call-control-sdk";
128
+ ```tsx
129
+ import { useEndCall } from "call-control-sdk";
96
130
 
97
- export default function EndCallButton() {
98
- const { handleEndCall, isLoading, isSuccess, isError, error, data } = useEndCall();
131
+ export default function EndCallButton() {
132
+ const { handleEndCall, isLoading, isSuccess, isError, error } = useEndCall();
99
133
 
100
- const onEndCall = () => {
101
- handleEndCall({
134
+ const onEndCall = () => {
135
+ handleEndCall({
102
136
  disposition: "RES", // Call disposition
103
- });
104
- };
105
-
106
- return (
107
- {isLoading ? "Ending Call..." : "End Call"}
108
- {isSuccess && "Call ended successfully"}
109
- {isError && `Error: ${error?.message}`}
110
- );
111
- }
137
+ });
138
+ };
139
+
140
+ return (
141
+ <div>
142
+ <button onClick={onEndCall} disabled={isLoading}>
143
+ {isLoading ? "Ending Call..." : "End Call"}
144
+ </button>
145
+ {isSuccess && <p>✅ Call ended successfully</p>}
146
+ {isError && <p>❌ Error: {error?.message}</p>}
147
+ </div>
148
+ );
149
+ }
112
150
  ```
113
151
 
114
- useEndCall Hook for handling **end-call functionality** from your application.
115
- It manages the API request, state (`loading`, `success`, `error`), and automatically resets the call
116
- state when a call ends.
152
+ ---
117
153
 
118
- ## ■ API
154
+ ## 🛠 Core API
119
155
 
120
- ### `useEndCall()`
156
+ ### `initSDK(config)`
121
157
 
122
- Returns an object with the following properties:
158
+ Initializes the SDK. Must be called **before using any components or hooks**.
123
159
 
124
- - `handleEndCall` -> `(data: EndCallPayload) => void` | Function to trigger the end call request.
125
- Requires call disposition data.
126
- - `isSuccess` -> `boolean` | `true` if the API request completed successfully. |
127
- - `isError` -> `boolean` | `true` if an error occurred during the request. |
128
- - `error` -> `any` | Error object returned from the failed request. |
129
- - `data` -> `any` | Response data returned by the API on success. |
160
+ **Parameters**:
161
+
162
+ | Name | Type | Required | Description |
163
+ | ---------- | ------ | -------- | ----------------------------------- |
164
+ | `apiKey` | string | ✅ | API key for authentication |
165
+ | `tenantId` | string | ✅ | Tenant ID for events/authentication |
166
+ | `agentId` | string | ✅ | Agent ID for call controls |
130
167
 
131
168
  ---
132
169
 
133
- ## ■ Payload Structure
170
+ ### `CallControlPanel`
134
171
 
135
- The `handleEndCall` function accepts an object with the following fields:
172
+ Draggable control panel for call management.
136
173
 
137
- ```typescript
138
- {
139
- disposition?: string; // Call disposition (default: "RES")
140
- }
141
- ```
174
+ **Props**:
175
+
176
+ | Prop | Type | Required | Description |
177
+ | --------------- | -------- | -------- | -------------------------------------------------------------------------------------------------- |
178
+ | `onDataChange?` | function | ❌ | Callback fired when call data changes. Receives `{ mobileNumber, callReferenceId, agentLoginId }`. |
179
+
180
+ ---
142
181
 
143
- ## API Reference
182
+ ### `updateCallData(data: Partial<CallData>)`
144
183
 
145
- ### `initSDK({apiKey: "apiKey",tenantId: "tenantId",agentId: "agentId",})`
184
+ Update call data programmatically.
146
185
 
147
- Initializes the SDK with an API key, tenantId, agentId, baseUrl. Must be called before using any components.
186
+ **Parameters**:
148
187
 
149
- **Parameters:**
188
+ | Field | Type | Description |
189
+ | ------------------ | ------ | ---------------------- |
190
+ | `mobileNumber?` | string | Mobile phone number |
191
+ | `callReferenceId?` | string | Unique call reference |
192
+ | `agentLoginId?` | string | Agent login identifier |
150
193
 
151
- - `apiKey` (string): Your API key for SDK authentication
152
- - `tenantId` (string): Your Tenant Id key for Events authentication
153
- - `agentId` (string): Agent Id for access call controls
194
+ ---
154
195
 
155
- **Throws:** Error if API key is missing or invalid
196
+ ## 🪝 Hooks
156
197
 
157
- ### `CallControlPanel`
198
+ ### `useLogout()`
158
199
 
159
- The main draggable control panel component.
200
+ Logs out the current agent.
160
201
 
161
- **Props:**
202
+ ```tsx
203
+ const { logOut } = useLogout();
204
+ <button onClick={logOut}>Logout</button>;
205
+ ```
162
206
 
163
- - `onDataChange?` (function): Callback fired when call data changes
164
- - Parameters: `{ mobileNumber: string, callReferenceId: string, agentLoginId: string }`
207
+ ---
165
208
 
166
- ### `updateCallData(data: Partial<CallData>)`
209
+ ### `useEndCall()`
167
210
 
168
- Updates the call data that will be passed to the `onDataChange` callback.
211
+ Hook for ending an active call.
169
212
 
170
- **Parameters:**
213
+ **Returns**:
171
214
 
172
- - `data.mobileNumber?` (string): Mobile phone number
173
- - `data.callReferenceId?` (string): Call reference ID
174
- - `data.agentLoginId?` (string): Agent login ID
215
+ | Key | Type | Description |
216
+ | --------------- | -------- | --------------------------------------------------------------- |
217
+ | `handleEndCall` | function | `(payload: EndCallPayload) => void` – triggers end-call request |
218
+ | `isLoading` | boolean | True while request is pending |
219
+ | `isSuccess` | boolean | True if request succeeded |
220
+ | `isError` | boolean | True if request failed |
221
+ | `error` | any | Error object if failed |
222
+ | `data` | any | API response on success |
175
223
 
176
- ## Control Features
224
+ ---
177
225
 
178
- ### Status Management
226
+ ## 📦 Payloads
179
227
 
180
- - **Idle**: Default state, no active call
181
- - **Break**: Agent is on break
228
+ ### `EndCallPayload`
182
229
 
183
- ### Call Controls
230
+ ```ts
231
+ interface EndCallPayload {
232
+ disposition?: string; // Call disposition (default: "RES")
233
+ }
234
+ ```
184
235
 
185
- - **Hold/Resume**: Toggle call hold state
186
- - **Mute/Unmute**: Toggle microphone
187
- - **End Call**: Terminate active call
188
- - **More Menu**: Access status change options
236
+ ---
189
237
 
190
- ### Persistent State
238
+ ## 🎛 Control Features
191
239
 
192
- All control states are automatically persistent:
240
+ - **Status Management**: Idle / Break
241
+ - **Call Controls**: Hold / Resume, Mute / Unmute, End Call, Agent Status
242
+ - **Persistent State**: Hold, mute, agent status, panel position, call timer
193
243
 
194
- - Hold/mute states
195
- - Agent status
196
- - Panel position
197
- - Call timer state
244
+ ---
245
+
246
+ ## 🌍 Browser Support
198
247
 
199
- ## Browser Support
248
+ - ✅ Chrome 60+
249
+ - ✅ Firefox 60+
250
+ - ✅ Safari 12+
251
+ - ✅ Edge 79+
200
252
 
201
- - Chrome 60+
202
- - Firefox 60+
203
- - Safari 12+
204
- - Edge 79+
253
+ ---
205
254
 
206
- ## License
255
+ ## 📄 License
207
256
 
208
257
  MIT © 2025