call-control-sdk 5.2.0 → 5.2.2

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 -127
  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,210 +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
- followUp: "N", // Y or N
104
- });
105
- };
106
-
107
- return (
108
- {isLoading ? "Ending Call..." : "End Call"}
109
- {isSuccess && "Call ended successfully"}
110
- {isError && `Error: ${error?.message}`}
111
- );
112
- }
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
+ }
113
150
  ```
114
151
 
115
- useEndCall Hook for handling **end-call functionality** from your application.
116
- It manages the API request, state (`loading`, `success`, `error`), and automatically resets the call
117
- state when a call ends.
152
+ ---
118
153
 
119
- ## ■ API
154
+ ## 🛠 Core API
120
155
 
121
- ### `useEndCall()`
156
+ ### `initSDK(config)`
122
157
 
123
- Returns an object with the following properties:
158
+ Initializes the SDK. Must be called **before using any components or hooks**.
124
159
 
125
- - `handleEndCall` -> `(data: EndCallPayload) => void` | Function to trigger the end call request.
126
- Requires call disposition data.
127
- - `isSuccess` -> `boolean` | `true` if the API request completed successfully. |
128
- - `isError` -> `boolean` | `true` if an error occurred during the request. |
129
- - `error` -> `any` | Error object returned from the failed request. |
130
- - `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 |
131
167
 
132
168
  ---
133
169
 
134
- ## ■ Payload Structure
170
+ ### `CallControlPanel`
135
171
 
136
- The `handleEndCall` function accepts an object with the following fields:
172
+ Draggable control panel for call management.
137
173
 
138
- ```typescript
139
- {
140
- disposition?: string; // Call disposition (default: "RES")
141
- followUp?: string; // Whether to set follow-up ("Y" or "N")
142
- }
143
- ```
174
+ **Props**:
175
+
176
+ | Prop | Type | Required | Description |
177
+ | --------------- | -------- | -------- | -------------------------------------------------------------------------------------------------- |
178
+ | `onDataChange?` | function | ❌ | Callback fired when call data changes. Receives `{ mobileNumber, callReferenceId, agentLoginId }`. |
179
+
180
+ ---
144
181
 
145
- ## API Reference
182
+ ### `updateCallData(data: Partial<CallData>)`
146
183
 
147
- ### `initSDK({apiKey: "apiKey",tenantId: "tenantId",agentId: "agentId",})`
184
+ Update call data programmatically.
148
185
 
149
- Initializes the SDK with an API key, tenantId, agentId, baseUrl. Must be called before using any components.
186
+ **Parameters**:
150
187
 
151
- **Parameters:**
188
+ | Field | Type | Description |
189
+ | ------------------ | ------ | ---------------------- |
190
+ | `mobileNumber?` | string | Mobile phone number |
191
+ | `callReferenceId?` | string | Unique call reference |
192
+ | `agentLoginId?` | string | Agent login identifier |
152
193
 
153
- - `apiKey` (string): Your API key for SDK authentication
154
- - `tenantId` (string): Your Tenant Id key for Events authentication
155
- - `agentId` (string): Agent Id for access call controls
194
+ ---
156
195
 
157
- **Throws:** Error if API key is missing or invalid
196
+ ## 🪝 Hooks
158
197
 
159
- ### `CallControlPanel`
198
+ ### `useLogout()`
160
199
 
161
- The main draggable control panel component.
200
+ Logs out the current agent.
162
201
 
163
- **Props:**
202
+ ```tsx
203
+ const { logOut } = useLogout();
204
+ <button onClick={logOut}>Logout</button>;
205
+ ```
164
206
 
165
- - `onDataChange?` (function): Callback fired when call data changes
166
- - Parameters: `{ mobileNumber: string, callReferenceId: string, agentLoginId: string }`
207
+ ---
167
208
 
168
- ### `updateCallData(data: Partial<CallData>)`
209
+ ### `useEndCall()`
169
210
 
170
- Updates the call data that will be passed to the `onDataChange` callback.
211
+ Hook for ending an active call.
171
212
 
172
- **Parameters:**
213
+ **Returns**:
173
214
 
174
- - `data.mobileNumber?` (string): Mobile phone number
175
- - `data.callReferenceId?` (string): Call reference ID
176
- - `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 |
177
223
 
178
- ## Control Features
224
+ ---
179
225
 
180
- ### Status Management
226
+ ## 📦 Payloads
181
227
 
182
- - **Idle**: Default state, no active call
183
- - **Break**: Agent is on break
228
+ ### `EndCallPayload`
184
229
 
185
- ### Call Controls
230
+ ```ts
231
+ interface EndCallPayload {
232
+ disposition?: string; // Call disposition (default: "RES")
233
+ }
234
+ ```
186
235
 
187
- - **Hold/Resume**: Toggle call hold state
188
- - **Mute/Unmute**: Toggle microphone
189
- - **End Call**: Terminate active call
190
- - **More Menu**: Access status change options
236
+ ---
191
237
 
192
- ### Persistent State
238
+ ## 🎛 Control Features
193
239
 
194
- 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
195
243
 
196
- - Hold/mute states
197
- - Agent status
198
- - Panel position
199
- - Call timer state
244
+ ---
245
+
246
+ ## 🌍 Browser Support
200
247
 
201
- ## Browser Support
248
+ - ✅ Chrome 60+
249
+ - ✅ Firefox 60+
250
+ - ✅ Safari 12+
251
+ - ✅ Edge 79+
202
252
 
203
- - Chrome 60+
204
- - Firefox 60+
205
- - Safari 12+
206
- - Edge 79+
253
+ ---
207
254
 
208
- ## License
255
+ ## 📄 License
209
256
 
210
257
  MIT © 2025