call-control-sdk 6.2.1 → 6.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.
- package/LICENSE +53 -0
- package/README.md +314 -166
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -4
package/LICENSE
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
PROPRIETARY SOFTWARE LICENSE AGREEMENT
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 CTI SDK Team. All rights reserved.
|
|
4
|
+
|
|
5
|
+
IMPORTANT: READ CAREFULLY BEFORE USING THIS SOFTWARE
|
|
6
|
+
|
|
7
|
+
This software and associated documentation files (the "Software") are proprietary
|
|
8
|
+
and confidential. The Software is licensed, not sold, to you by Call Control SDK
|
|
9
|
+
("Licensor") under the terms of this license agreement.
|
|
10
|
+
|
|
11
|
+
1. GRANT OF LICENSE
|
|
12
|
+
Subject to the terms and conditions of this agreement, Licensor hereby grants
|
|
13
|
+
you a limited, non-exclusive, non-transferable license to use the Software
|
|
14
|
+
solely for your internal business purposes.
|
|
15
|
+
|
|
16
|
+
2. RESTRICTIONS
|
|
17
|
+
You may NOT:
|
|
18
|
+
- Copy, modify, adapt, or create derivative works of the Software
|
|
19
|
+
- Reverse engineer, decompile, disassemble, or attempt to derive source code
|
|
20
|
+
- Distribute, sublicense, rent, lease, or transfer the Software
|
|
21
|
+
- Remove or alter any proprietary notices or labels on the Software
|
|
22
|
+
- Use the Software for any purpose other than as expressly permitted
|
|
23
|
+
|
|
24
|
+
3. OWNERSHIP
|
|
25
|
+
The Software and all intellectual property rights therein remain the exclusive
|
|
26
|
+
property of Licensor. This license does not grant you any ownership rights.
|
|
27
|
+
|
|
28
|
+
4. CONFIDENTIALITY
|
|
29
|
+
The Software contains confidential and proprietary information. You agree to:
|
|
30
|
+
- Maintain strict confidentiality
|
|
31
|
+
- Not disclose the Software to any third parties
|
|
32
|
+
- Use reasonable care to protect the Software from unauthorized access
|
|
33
|
+
|
|
34
|
+
5. TERMINATION
|
|
35
|
+
This license is effective until terminated. Licensor may terminate this
|
|
36
|
+
license immediately if you breach any terms. Upon termination, you must
|
|
37
|
+
destroy all copies of the Software.
|
|
38
|
+
|
|
39
|
+
6. NO WARRANTY
|
|
40
|
+
THE SOFTWARE IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
41
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO WARRANTIES OF MERCHANTABILITY,
|
|
42
|
+
FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT.
|
|
43
|
+
|
|
44
|
+
7. LIMITATION OF LIABILITY
|
|
45
|
+
IN NO EVENT SHALL LICENSOR BE LIABLE FOR ANY DAMAGES WHATSOEVER ARISING
|
|
46
|
+
OUT OF THE USE OR INABILITY TO USE THE SOFTWARE.
|
|
47
|
+
|
|
48
|
+
8. GOVERNING LAW
|
|
49
|
+
This agreement shall be governed by and construed in accordance with the
|
|
50
|
+
laws of [Your Jurisdiction].
|
|
51
|
+
|
|
52
|
+
By using this Software, you acknowledge that you have read this agreement,
|
|
53
|
+
understand it, and agree to be bound by its terms and conditions.
|
package/README.md
CHANGED
|
@@ -1,107 +1,189 @@
|
|
|
1
|
-
|
|
1
|
+
<div align="center">
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Call Control SDK
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://www.npmjs.com/package/call-control-sdk)
|
|
6
|
+
[](https://www.npmjs.com/package/call-control-sdk)
|
|
7
|
+
[](https://bundlephobia.com/package/call-control-sdk)
|
|
8
|
+
[](https://github.com/your-org/call-control-sdk/blob/main/LICENSE)
|
|
6
9
|
|
|
7
|
-
|
|
8
|
-
- 🖱️ **Draggable Interface** – Movable panel with persisted position
|
|
9
|
-
- 💾 **State Persistence** – control storage
|
|
10
|
-
- ⏱️ **Live Call Timer** – Real-time call duration tracking
|
|
11
|
-
- 🎨 **Material-UI Design** – Responsive and accessible UI
|
|
12
|
-
- 📱 **Touch Support** – Works seamlessly on desktop and mobile
|
|
13
|
-
- 🔧 **TypeScript Support** – Full type safety and IntelliSense
|
|
14
|
-
- 🎪 **Singleton State** – Consistent shared state across components
|
|
10
|
+
**A powerful, lightweight SDK for real-time call management**
|
|
15
11
|
|
|
16
|
-
|
|
12
|
+
<div align="center">
|
|
13
|
+
🔑 **AUTHORIZED ACCESS REQUIRED** - API Key & Tenant ID
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
### 🔑 **License Features**
|
|
17
|
+
|
|
18
|
+
- **API Key Authentication** - Secure access through authorized API keys
|
|
19
|
+
- **Tenant ID Management** - Multi-tenant support with isolated access
|
|
20
|
+
- **Cross-Platform Support** - Use across web, mobile, desktop, and server platforms
|
|
21
|
+
- **Usage Monitoring** - Real-time tracking and compliance monitoring
|
|
22
|
+
- **Flexible Deployment** - Deploy on authorized platforms with proper credentials
|
|
23
|
+
|
|
24
|
+
### 🔒 **Access Requirements**
|
|
25
|
+
|
|
26
|
+
To use this SDK, you must have:
|
|
27
|
+
|
|
28
|
+
- ✅ **Valid API Key** - Issued by CTI SDK Team
|
|
29
|
+
- ✅ **Active Tenant ID** - Registered and in good standing
|
|
30
|
+
- ✅ **Active Subscription** - Current and compliant
|
|
31
|
+
- ✅ **Authorized Platform** - Using on approved platforms only
|
|
32
|
+
|
|
33
|
+
### 🚫 **Prohibited Activities**
|
|
34
|
+
|
|
35
|
+
- **No Unauthorized Access** - Cannot use without valid credentials
|
|
36
|
+
- **No Credential Sharing** - API keys and tenant IDs are confidential
|
|
37
|
+
- **No Reverse Engineering** - Cannot decompile or reverse engineer
|
|
38
|
+
- **No Platform Violations** - Must use only on authorized platforms
|
|
39
|
+
- **No Usage Abuse** - Cannot exceed subscription limits
|
|
40
|
+
|
|
41
|
+
## **Unauthorized access or misuse may result in immediate termination and legal action.**
|
|
42
|
+
|
|
43
|
+
## 📑 Table of Contents
|
|
44
|
+
|
|
45
|
+
- [✨ Key Features](#-key-features)
|
|
46
|
+
- [📦 Installation](#-installation)
|
|
47
|
+
- [🚀 Quick Start](#-quick-start)
|
|
48
|
+
- [1️⃣ Initialize the SDK](#1️⃣-initialize-the-sdk)
|
|
49
|
+
- [2️⃣ Add Call Control Panel](#2️⃣-add-call-control-panel)
|
|
50
|
+
- [3️⃣ Use Call Management Hooks](#3️⃣-use-call-management-hooks)
|
|
51
|
+
- [🔧 Configuration Options](#-configuration-options)
|
|
52
|
+
- [📚 API Reference](#-api-reference)
|
|
53
|
+
- [🔧 Core Functions](#-core-functions)
|
|
54
|
+
- [🪝 React Hooks](#-react-hooks)
|
|
55
|
+
- [📦 Data Types](#-data-types)
|
|
56
|
+
- [🎛 Control Features](#-control-features)
|
|
57
|
+
- [🌍 Browser Support](#-browser-support)
|
|
58
|
+
- [📄 License](#-license)
|
|
59
|
+
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
## ✨ Key Features
|
|
65
|
+
|
|
66
|
+
<table>
|
|
67
|
+
<tr>
|
|
68
|
+
<td width="100%">
|
|
69
|
+
|
|
70
|
+
### 🎯 **Complete Call Control**
|
|
71
|
+
|
|
72
|
+
- Hold/Resume calls
|
|
73
|
+
- Mute/Unmute functionality
|
|
74
|
+
- Agent status management
|
|
75
|
+
- End call with disposition
|
|
76
|
+
|
|
77
|
+
</td>
|
|
78
|
+
<td width="100%">
|
|
79
|
+
|
|
80
|
+
### 🖱️ **Intuitive Interface**
|
|
81
|
+
|
|
82
|
+
- Draggable control panel
|
|
83
|
+
- Persistent position memory
|
|
84
|
+
- Touch-friendly design
|
|
85
|
+
- Responsive layout
|
|
86
|
+
|
|
87
|
+
</td>
|
|
88
|
+
</tr>
|
|
89
|
+
<tr>
|
|
90
|
+
<td width="100%">
|
|
91
|
+
|
|
92
|
+
### 💾 **Smart State Management**
|
|
93
|
+
|
|
94
|
+
- Real-time call timer
|
|
95
|
+
- Persistent state storage
|
|
96
|
+
- Singleton state pattern
|
|
97
|
+
- Cross-component sync
|
|
98
|
+
|
|
99
|
+
</td>
|
|
100
|
+
<td width="100%">
|
|
101
|
+
|
|
102
|
+
### 🎨 **Modern Design**
|
|
103
|
+
|
|
104
|
+
- Material-UI components
|
|
105
|
+
- TypeScript support
|
|
106
|
+
- Accessible UI patterns
|
|
107
|
+
- Customizable styling
|
|
108
|
+
|
|
109
|
+
</td>
|
|
110
|
+
</tr>
|
|
111
|
+
</table>
|
|
112
|
+
|
|
113
|
+
## 📦 Installation
|
|
114
|
+
|
|
115
|
+
<div align="center">
|
|
17
116
|
|
|
18
117
|
```bash
|
|
19
118
|
npm install call-control-sdk
|
|
20
119
|
```
|
|
21
120
|
|
|
22
|
-
|
|
121
|
+
</div>
|
|
23
122
|
|
|
24
|
-
|
|
25
|
-
react react-dom axios @mui/material @mui/icons-material @emotion/react @emotion/styled
|
|
26
|
-
```
|
|
123
|
+
### 🔑 Required Dependencies
|
|
27
124
|
|
|
28
|
-
|
|
125
|
+
Make sure you have these peer dependencies installed:
|
|
29
126
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
4. [Hooks](#-hooks)
|
|
37
|
-
- [useLogout](#uselogout)
|
|
38
|
-
- [useClickToCall](#useClickToCall)
|
|
39
|
-
- [useEndCall](#useendcall)
|
|
127
|
+
<div align="center">
|
|
128
|
+
```bash
|
|
129
|
+
npm install react react-dom axios @mui/material @mui/icons-material @emotion/react @emotion/styled
|
|
130
|
+
```
|
|
131
|
+
</div>
|
|
132
|
+
---
|
|
40
133
|
|
|
41
|
-
|
|
42
|
-
6. [Control Features](#-control-features)
|
|
43
|
-
7. [Browser Support](#-browser-support)
|
|
44
|
-
8. [License](#-license)
|
|
134
|
+
## 🚀 Quick Start
|
|
45
135
|
|
|
46
|
-
###
|
|
136
|
+
### 1️⃣ **Initialize the SDK**
|
|
47
137
|
|
|
48
|
-
|
|
138
|
+
First, initialize the SDK at the root of your application:
|
|
49
139
|
|
|
50
140
|
```tsx
|
|
51
141
|
import { useEffect } from "react";
|
|
52
142
|
import { initSDK } from "call-control-sdk";
|
|
53
143
|
|
|
54
|
-
// Initialize at the top level of your app
|
|
55
144
|
function App() {
|
|
56
145
|
useEffect(() => {
|
|
57
|
-
// Initialize the SDK.
|
|
58
146
|
try {
|
|
59
147
|
initSDK({
|
|
60
148
|
apiKey: "your-api-key",
|
|
61
149
|
tenantId: "your-tenant-id",
|
|
62
150
|
agentId: "your-agent-id",
|
|
63
151
|
});
|
|
64
|
-
console.log("SDK initialized successfully");
|
|
152
|
+
console.log("✅ SDK initialized successfully");
|
|
65
153
|
} catch (error) {
|
|
66
|
-
console.error("SDK initialization failed:", error);
|
|
154
|
+
console.error("❌ SDK initialization failed:", error);
|
|
67
155
|
}
|
|
68
156
|
}, []);
|
|
69
157
|
|
|
70
|
-
return <
|
|
158
|
+
return <YourAppContent />;
|
|
71
159
|
}
|
|
72
160
|
```
|
|
73
161
|
|
|
74
|
-
|
|
162
|
+
### 2️⃣ **Add Call Control Panel**
|
|
163
|
+
|
|
164
|
+
Drop in the draggable call control panel anywhere in your app:
|
|
75
165
|
|
|
76
166
|
```tsx
|
|
77
167
|
import { CallControlPanel } from "call-control-sdk";
|
|
78
168
|
|
|
79
|
-
export default function
|
|
80
|
-
const
|
|
81
|
-
console.log("Call data updated:", data);
|
|
169
|
+
export default function AgentDashboard() {
|
|
170
|
+
const handleCallDataChange = (data) => {
|
|
171
|
+
console.log("📞 Call data updated:", data);
|
|
172
|
+
// Handle call data changes (mobileNumber, callReferenceId, agentLoginId)
|
|
82
173
|
};
|
|
83
174
|
|
|
84
175
|
return (
|
|
85
176
|
<div>
|
|
86
177
|
<h1>Agent Dashboard</h1>
|
|
87
|
-
<CallControlPanel onDataChange={
|
|
178
|
+
<CallControlPanel onDataChange={handleCallDataChange} />
|
|
88
179
|
</div>
|
|
89
180
|
);
|
|
90
181
|
}
|
|
91
182
|
```
|
|
92
183
|
|
|
93
|
-
|
|
184
|
+
### 3️⃣ **Use Call Management Hooks**
|
|
94
185
|
|
|
95
|
-
|
|
96
|
-
import { useLogout } from "call-control-sdk";
|
|
97
|
-
|
|
98
|
-
export default function LogoutButton() {
|
|
99
|
-
const { logout, isLoading, isSuccess, isError, error } = useLogout();
|
|
100
|
-
return <button onClick={logout}>Logout</button>;
|
|
101
|
-
}
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
#### 4. Start Call
|
|
186
|
+
#### 🔴 **Start a Call**
|
|
105
187
|
|
|
106
188
|
```tsx
|
|
107
189
|
import { useClickToCall } from "call-control-sdk";
|
|
@@ -109,26 +191,24 @@ import { useClickToCall } from "call-control-sdk";
|
|
|
109
191
|
export default function CallButton() {
|
|
110
192
|
const { handleStartCall, isLoading, isSuccess, isError, error } = useClickToCall();
|
|
111
193
|
|
|
112
|
-
const
|
|
113
|
-
handleStartCall({
|
|
194
|
+
const startCall = () => {
|
|
195
|
+
handleStartCall({
|
|
196
|
+
mobileNumber: "1234567890",
|
|
197
|
+
});
|
|
114
198
|
};
|
|
115
199
|
|
|
116
200
|
return (
|
|
117
|
-
<
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
</button>
|
|
124
|
-
{isSuccess && <p>✅ Call ended successfully</p>}
|
|
125
|
-
{isError && <p>❌ Error: {error?.message}</p>}
|
|
126
|
-
</div>
|
|
201
|
+
<button
|
|
202
|
+
onClick={startCall}
|
|
203
|
+
disabled={isLoading}
|
|
204
|
+
>
|
|
205
|
+
{isLoading ? "🔄 Calling..." : "📞 Start Call"}
|
|
206
|
+
</button>
|
|
127
207
|
);
|
|
128
208
|
}
|
|
129
209
|
```
|
|
130
210
|
|
|
131
|
-
####
|
|
211
|
+
#### 🔚 **End a Call**
|
|
132
212
|
|
|
133
213
|
```tsx
|
|
134
214
|
import { useEndCall } from "call-control-sdk";
|
|
@@ -136,165 +216,233 @@ import { useEndCall } from "call-control-sdk";
|
|
|
136
216
|
export default function EndCallButton() {
|
|
137
217
|
const { handleEndCall, isLoading, isSuccess, isError, error } = useEndCall();
|
|
138
218
|
|
|
139
|
-
const
|
|
219
|
+
const endCall = () => {
|
|
140
220
|
handleEndCall({
|
|
141
221
|
disposition: "RES", // Call disposition
|
|
142
222
|
});
|
|
143
223
|
};
|
|
144
224
|
|
|
145
225
|
return (
|
|
146
|
-
<
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
</button>
|
|
153
|
-
{isSuccess && <p>✅ Call ended successfully</p>}
|
|
154
|
-
{isError && <p>❌ Error: {error?.message}</p>}
|
|
155
|
-
</div>
|
|
226
|
+
<button
|
|
227
|
+
onClick={endCall}
|
|
228
|
+
disabled={isLoading}
|
|
229
|
+
>
|
|
230
|
+
{isLoading ? "🔄 Ending..." : "🔚 End Call"}
|
|
231
|
+
</button>
|
|
156
232
|
);
|
|
157
233
|
}
|
|
158
234
|
```
|
|
159
235
|
|
|
160
|
-
|
|
236
|
+
#### 🚪 **Agent Logout**
|
|
161
237
|
|
|
162
|
-
|
|
238
|
+
```tsx
|
|
239
|
+
import { useLogout } from "call-control-sdk";
|
|
163
240
|
|
|
164
|
-
|
|
241
|
+
export default function LogoutButton() {
|
|
242
|
+
const { logout, isLoading, isSuccess, isError, error } = useLogout();
|
|
165
243
|
|
|
166
|
-
|
|
244
|
+
return (
|
|
245
|
+
<button
|
|
246
|
+
onClick={logout}
|
|
247
|
+
disabled={isLoading}
|
|
248
|
+
>
|
|
249
|
+
{isLoading ? "🔄 Logging out..." : "🚪 Logout"}
|
|
250
|
+
</button>
|
|
251
|
+
);
|
|
252
|
+
}
|
|
253
|
+
```
|
|
167
254
|
|
|
168
|
-
|
|
169
|
-
| ---------- | ------ | -------- | ----------------------------------- |
|
|
170
|
-
| `apiKey` | string | ✅ | API key for authentication |
|
|
171
|
-
| `tenantId` | string | ✅ | Tenant ID for events/authentication |
|
|
172
|
-
| `agentId` | string | ✅ | Agent ID for call controls |
|
|
255
|
+
---
|
|
173
256
|
|
|
174
|
-
|
|
257
|
+
## 🔧 Configuration Options
|
|
175
258
|
|
|
176
|
-
|
|
259
|
+
Customize the SDK behavior to fit your needs:
|
|
177
260
|
|
|
178
|
-
|
|
261
|
+
```tsx
|
|
262
|
+
initSDK({
|
|
263
|
+
// Required configuration
|
|
264
|
+
apiKey: "your-api-key",
|
|
265
|
+
tenantId: "your-tenant-id",
|
|
266
|
+
agentId: "your-agent-id",
|
|
267
|
+
|
|
268
|
+
// Optional customization
|
|
269
|
+
disableEndCallButton: false, // Hide end call button
|
|
270
|
+
disabledDialButton: false, // Hide dial button
|
|
271
|
+
disableCallTransferButton: false, // Hide transfer button
|
|
272
|
+
disableConferenceButton: false, // Hide conference button
|
|
273
|
+
disableSoftPhone: false, // Hide soft phone iframe
|
|
274
|
+
isDraggable: true, // Enable/disable dragging
|
|
275
|
+
|
|
276
|
+
// Custom styling (Material-UI SxProps)
|
|
277
|
+
disabled: { opacity: 0.5 }, // Disabled button styles
|
|
278
|
+
enabled: { color: "primary" }, // Enabled button styles
|
|
279
|
+
outlined: { border: "1px solid" }, // Outlined button styles
|
|
280
|
+
});
|
|
281
|
+
```
|
|
179
282
|
|
|
180
|
-
|
|
181
|
-
| --------------- | -------- | -------- | -------------------------------------------------------------------------------------------------- |
|
|
182
|
-
| `onDataChange?` | function | ❌ | Callback fired when call data changes. Receives `{ mobileNumber, callReferenceId, agentLoginId }`. |
|
|
283
|
+
### 🎨 **Styling Options**
|
|
183
284
|
|
|
184
|
-
|
|
285
|
+
| Option | Type | Default | Description |
|
|
286
|
+
| --------------------------- | --------- | ------- | --------------------------------- |
|
|
287
|
+
| `disableEndCallButton` | `boolean` | `false` | Hide the "End Call" button |
|
|
288
|
+
| `disabledDialButton` | `boolean` | `false` | Hide the "Dial" button |
|
|
289
|
+
| `disableCallTransferButton` | `boolean` | `false` | Hide the "Call Transfer" button |
|
|
290
|
+
| `disableConferenceButton` | `boolean` | `false` | Hide the "Conference" button |
|
|
291
|
+
| `disableSoftPhone` | `boolean` | `false` | Hide the embedded soft phone |
|
|
292
|
+
| `isDraggable` | `boolean` | `true` | Enable/disable panel dragging |
|
|
293
|
+
| `disabled` | `SxProps` | - | Custom styles for disabled states |
|
|
294
|
+
| `enabled` | `SxProps` | - | Custom styles for enabled states |
|
|
295
|
+
| `outlined` | `SxProps` | - | Custom styles for outlined states |
|
|
185
296
|
|
|
186
|
-
|
|
297
|
+
---
|
|
187
298
|
|
|
188
|
-
|
|
299
|
+
## 📚 API Reference
|
|
189
300
|
|
|
190
|
-
|
|
191
|
-
| ------------------ | ------ | ---------------------- |
|
|
192
|
-
| `mobileNumber?` | string | Mobile phone number |
|
|
193
|
-
| `callReferenceId?` | string | Unique call reference |
|
|
194
|
-
| `agentLoginId?` | string | Agent login identifier |
|
|
301
|
+
### 🔧 **Core Functions**
|
|
195
302
|
|
|
196
|
-
|
|
303
|
+
#### `initSDK(config)`
|
|
197
304
|
|
|
198
|
-
|
|
305
|
+
Initialize the SDK with your configuration. **Must be called before using any components or hooks.**
|
|
199
306
|
|
|
200
|
-
|
|
307
|
+
```tsx
|
|
308
|
+
initSDK({
|
|
309
|
+
apiKey: string, // ✅ Required - API key for authentication
|
|
310
|
+
tenantId: string, // ✅ Required - Tenant ID for events/authentication
|
|
311
|
+
agentId: string, // ✅ Required - Agent ID for call controls
|
|
312
|
+
// ... plus optional configuration options
|
|
313
|
+
});
|
|
314
|
+
```
|
|
201
315
|
|
|
202
|
-
|
|
203
|
-
| --------------------------- | ------- | ------- | -------------------------------------------------------------- |
|
|
204
|
-
| `disableEndCallButton` | boolean | false | Disable the "End Call" button |
|
|
205
|
-
| `disabledDialButton` | boolean | false | Disable the "Dial" button |
|
|
206
|
-
| `disableCallTransferButton` | boolean | false | Disable the "Call Transfer" button |
|
|
207
|
-
| `isDraggable` | boolean | true | Make the control panel draggable |
|
|
208
|
-
| `disableSoftPhone` | boolean | false | Disable the embedded soft phone iframe |
|
|
209
|
-
| `disableConferenceButton` | boolean | false | Disable the "Conference" button |
|
|
210
|
-
| `disabled` | SxProps | - | Custom styles for disabled button states (Material-UI SxProps) |
|
|
211
|
-
| `enabled` | SxProps | - | Custom styles for enabled button states (Material-UI SxProps) |
|
|
212
|
-
| `outlined` | SxProps | - | Custom styles for outlined button states (Material-UI SxProps) |
|
|
316
|
+
#### `CallControlPanel`
|
|
213
317
|
|
|
214
|
-
|
|
318
|
+
Draggable control panel component for call management.
|
|
215
319
|
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
}
|
|
320
|
+
```tsx
|
|
321
|
+
<CallControlPanel
|
|
322
|
+
onDataChange={(data) => {
|
|
323
|
+
// data: { mobileNumber, callReferenceId, agentLoginId }
|
|
324
|
+
console.log("Call data updated:", data);
|
|
325
|
+
}}
|
|
326
|
+
/>
|
|
222
327
|
```
|
|
223
328
|
|
|
224
|
-
### 🪝 Hooks
|
|
329
|
+
### 🪝 **React Hooks**
|
|
225
330
|
|
|
226
331
|
#### `useLogout()`
|
|
227
332
|
|
|
228
|
-
|
|
333
|
+
Hook for agent logout functionality.
|
|
229
334
|
|
|
230
335
|
```tsx
|
|
231
|
-
const {
|
|
232
|
-
|
|
336
|
+
const { logout, isLoading, isSuccess, isError, error } = useLogout();
|
|
337
|
+
|
|
338
|
+
// Returns:
|
|
339
|
+
// - logout: () => void - Function to trigger logout
|
|
340
|
+
// - isLoading: boolean - Loading state
|
|
341
|
+
// - isSuccess: boolean - Success state
|
|
342
|
+
// - isError: boolean - Error state
|
|
343
|
+
// - error: any - Error object if failed
|
|
233
344
|
```
|
|
234
345
|
|
|
235
|
-
#### `
|
|
346
|
+
#### `useClickToCall()`
|
|
236
347
|
|
|
237
|
-
Hook for
|
|
348
|
+
Hook for initiating calls to mobile numbers.
|
|
238
349
|
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
350
|
+
```tsx
|
|
351
|
+
const { handleStartCall, isLoading, isSuccess, isError, error, data } = useClickToCall();
|
|
352
|
+
|
|
353
|
+
// Usage:
|
|
354
|
+
handleStartCall({ mobileNumber: "1234567890" });
|
|
355
|
+
|
|
356
|
+
// Returns:
|
|
357
|
+
// - handleStartCall: (payload: StartCallPayload) => void
|
|
358
|
+
// - isLoading: boolean - Loading state
|
|
359
|
+
// - isSuccess: boolean - Success state
|
|
360
|
+
// - isError: boolean - Error state
|
|
361
|
+
// - error: any - Error object if failed
|
|
362
|
+
// - data: any - API response on success
|
|
363
|
+
```
|
|
249
364
|
|
|
250
365
|
#### `useEndCall()`
|
|
251
366
|
|
|
252
|
-
Hook for ending
|
|
367
|
+
Hook for ending active calls.
|
|
253
368
|
|
|
254
|
-
|
|
369
|
+
```tsx
|
|
370
|
+
const { handleEndCall, isLoading, isSuccess, isError, error, data } = useEndCall();
|
|
371
|
+
|
|
372
|
+
// Usage:
|
|
373
|
+
handleEndCall({ disposition: "RES" });
|
|
374
|
+
|
|
375
|
+
// Returns:
|
|
376
|
+
// - handleEndCall: (payload: EndCallPayload) => void
|
|
377
|
+
// - isLoading: boolean - Loading state
|
|
378
|
+
// - isSuccess: boolean - Success state
|
|
379
|
+
// - isError: boolean - Error state
|
|
380
|
+
// - error: any - Error object if failed
|
|
381
|
+
// - data: any - API response on success
|
|
382
|
+
```
|
|
255
383
|
|
|
256
|
-
|
|
257
|
-
| --------------- | -------- | --------------------------------------------------------------- |
|
|
258
|
-
| `handleEndCall` | function | `(payload: EndCallPayload) => void` – triggers end-call request |
|
|
259
|
-
| `isLoading` | boolean | True while request is pending |
|
|
260
|
-
| `isSuccess` | boolean | True if request succeeded |
|
|
261
|
-
| `isError` | boolean | True if request failed |
|
|
262
|
-
| `error` | any | Error object if failed |
|
|
263
|
-
| `data` | any | API response on success |
|
|
384
|
+
---
|
|
264
385
|
|
|
265
|
-
|
|
386
|
+
## 📦 **Data Types**
|
|
266
387
|
|
|
267
|
-
|
|
388
|
+
### `StartCallPayload`
|
|
268
389
|
|
|
269
|
-
```
|
|
270
|
-
interface
|
|
271
|
-
mobileNumber?: string; // Mobile number
|
|
390
|
+
```tsx
|
|
391
|
+
interface StartCallPayload {
|
|
392
|
+
mobileNumber?: string; // Mobile number to call
|
|
272
393
|
}
|
|
273
394
|
```
|
|
274
395
|
|
|
275
|
-
|
|
396
|
+
### `EndCallPayload`
|
|
276
397
|
|
|
277
|
-
```
|
|
398
|
+
```tsx
|
|
278
399
|
interface EndCallPayload {
|
|
279
400
|
disposition?: string; // Call disposition (default: "RES")
|
|
280
401
|
}
|
|
281
402
|
```
|
|
282
403
|
|
|
283
|
-
|
|
404
|
+
---
|
|
405
|
+
|
|
406
|
+
## 🎛 **Control Features**
|
|
407
|
+
|
|
408
|
+
### 📞 **Call Management**
|
|
409
|
+
|
|
410
|
+
- **Hold/Resume** - Pause and resume active calls
|
|
411
|
+
- **Mute/Unmute** - Control audio during calls
|
|
412
|
+
- **End Call** - Terminate calls with disposition tracking
|
|
413
|
+
- **Agent Status** - Switch between Idle/Break states
|
|
414
|
+
|
|
415
|
+
### 💾 **State Persistence**
|
|
416
|
+
|
|
417
|
+
- **Call Timer** - Real-time duration tracking
|
|
418
|
+
- **Panel Position** - Remembers draggable panel location
|
|
419
|
+
- **Agent Status** - Maintains current status across sessions
|
|
420
|
+
- **Call State** - Preserves hold/mute states
|
|
284
421
|
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
422
|
+
---
|
|
423
|
+
|
|
424
|
+
## 🌍 **Browser Support**
|
|
425
|
+
|
|
426
|
+
<div align="left">
|
|
288
427
|
|
|
289
|
-
|
|
428
|
+
| Browser | Version | Status |
|
|
429
|
+
| ----------------------------------------------------------------------------- | ------- | ------------ |
|
|
430
|
+
|  | 60+ | ✅ Supported |
|
|
431
|
+
|  | 60+ | ✅ Supported |
|
|
432
|
+
|  | 12+ | ✅ Supported |
|
|
433
|
+
|  | 79+ | ✅ Supported |
|
|
290
434
|
|
|
291
|
-
|
|
292
|
-
✅ Firefox 60+
|
|
293
|
-
✅ Safari 12+
|
|
294
|
-
✅ Edge 79+
|
|
435
|
+
</div>
|
|
295
436
|
|
|
296
437
|
---
|
|
297
438
|
|
|
298
|
-
|
|
439
|
+
## 📄 **License**
|
|
440
|
+
|
|
441
|
+
<div align="center">
|
|
442
|
+
|
|
443
|
+
**REDIX LICENSE** © 2025
|
|
444
|
+
|
|
445
|
+
[][PROPRIETARY]
|
|
446
|
+
[][ACHALA]
|
|
299
447
|
|
|
300
|
-
|
|
448
|
+
</div>
|
package/dist/index.d.mts
CHANGED
|
@@ -6,7 +6,7 @@ import React from 'react';
|
|
|
6
6
|
* Provides complete call control functionality including dialing, conferencing, transferring,
|
|
7
7
|
* and real-time call management with WebSocket integration.
|
|
8
8
|
*
|
|
9
|
-
* @author
|
|
9
|
+
* @author CTI SDK Team
|
|
10
10
|
* @version 6.x.x
|
|
11
11
|
* @since 2024
|
|
12
12
|
*/
|