call-control-sdk 5.4.7 → 6.0.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/dist/index.d.mts +765 -21
- package/dist/index.d.ts +765 -21
- package/dist/index.js +84 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +84 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,10 +1,75 @@
|
|
|
1
1
|
import { SxProps } from '@mui/material';
|
|
2
|
-
import * as
|
|
2
|
+
import * as react from 'react';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
* @
|
|
5
|
+
* 🚪 Logout Custom Hook
|
|
6
|
+
*
|
|
7
|
+
* @function useLogout
|
|
8
|
+
* @description 🎯 Custom React hook that provides comprehensive agent logout functionality
|
|
9
|
+
* for the CTI SDK. It handles secure logout procedures, complete state cleanup,
|
|
10
|
+
* and storage management with intelligent error handling and proper cleanup.
|
|
11
|
+
*
|
|
12
|
+
* @returns {Object} Hook return object containing:
|
|
13
|
+
* - `logout: () => Promise<any>` - 🚪 Logout function
|
|
14
|
+
* - `isLoading: boolean` - ⏳ Loading state indicator
|
|
15
|
+
* - `isSuccess: boolean` - ✅ Success state indicator
|
|
16
|
+
* - `isError: boolean` - ❌ Error state indicator
|
|
17
|
+
* - `error: any` - 🛡️ Error object when logout fails
|
|
18
|
+
* - `data: any` - 📊 Response data from successful logout
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```typescript
|
|
22
|
+
* // Basic usage in a component
|
|
23
|
+
* const LogoutButton = () => {
|
|
24
|
+
* const {
|
|
25
|
+
* logout,
|
|
26
|
+
* isLoading,
|
|
27
|
+
* isSuccess,
|
|
28
|
+
* isError,
|
|
29
|
+
* error
|
|
30
|
+
* } = useLogout();
|
|
31
|
+
*
|
|
32
|
+
* const handleLogout = async () => {
|
|
33
|
+
* try {
|
|
34
|
+
* const result = await logout();
|
|
35
|
+
* console.log('🚪 Logout successful:', result);
|
|
36
|
+
* // Redirect to login page or handle success
|
|
37
|
+
* } catch (err) {
|
|
38
|
+
* console.error('❌ Logout failed:', err);
|
|
39
|
+
* }
|
|
40
|
+
* };
|
|
41
|
+
*
|
|
42
|
+
* return (
|
|
43
|
+
* <button
|
|
44
|
+
* onClick={handleLogout}
|
|
45
|
+
* disabled={isLoading}
|
|
46
|
+
* >
|
|
47
|
+
* {isLoading ? 'Logging out...' : 'Logout'}
|
|
48
|
+
* </button>
|
|
49
|
+
* );
|
|
50
|
+
* };
|
|
51
|
+
* ```
|
|
52
|
+
*
|
|
53
|
+
* @features
|
|
54
|
+
* - 🚪 Secure agent logout with API validation
|
|
55
|
+
* - 🗑️ Complete state cleanup and reset
|
|
56
|
+
* - 💾 Storage management (localStorage & sessionStorage)
|
|
57
|
+
* - ⏳ Comprehensive loading state management
|
|
58
|
+
* - 🛡️ Robust error handling and recovery
|
|
59
|
+
* - 📊 Real-time state updates via SDK manager
|
|
60
|
+
* - 🔄 Automatic storage cleanup
|
|
61
|
+
*
|
|
62
|
+
* @logic
|
|
63
|
+
* - 🔍 Retrieves agent state from localStorage
|
|
64
|
+
* - 📦 Constructs logout API payload
|
|
65
|
+
* - 📡 Makes API call to logout agent
|
|
66
|
+
* - 🗑️ Clears SDK state manager
|
|
67
|
+
* - 💾 Clears all storage (localStorage & sessionStorage)
|
|
68
|
+
* - 📊 Handles success/error states
|
|
69
|
+
* - ⏳ Manages loading states
|
|
70
|
+
*
|
|
71
|
+
* @since 1.0.0
|
|
72
|
+
* @author CTI SDK Team
|
|
8
73
|
*/
|
|
9
74
|
declare const useLogout: () => {
|
|
10
75
|
logout: () => Promise<any>;
|
|
@@ -16,9 +81,75 @@ declare const useLogout: () => {
|
|
|
16
81
|
};
|
|
17
82
|
|
|
18
83
|
/**
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
* @
|
|
84
|
+
* 📞 End Call Custom Hook
|
|
85
|
+
*
|
|
86
|
+
* @function useEndCall
|
|
87
|
+
* @description 🎯 Custom React hook that provides comprehensive call termination functionality
|
|
88
|
+
* for the CTI SDK. It handles call disposition capture, callback scheduling,
|
|
89
|
+
* and proper call cleanup with intelligent state management and error handling.
|
|
90
|
+
*
|
|
91
|
+
* @returns {Object} Hook return object containing:
|
|
92
|
+
* - `handleEndCall: (data: EndCallData) => Promise<any>` - 📞 Call termination function
|
|
93
|
+
* - `isLoading: boolean` - ⏳ Loading state indicator
|
|
94
|
+
* - `isSuccess: boolean` - ✅ Success state indicator
|
|
95
|
+
* - `isError: boolean` - ❌ Error state indicator
|
|
96
|
+
* - `error: any` - 🛡️ Error object when call fails
|
|
97
|
+
* - `data: any` - 📊 Response data from successful calls
|
|
98
|
+
*
|
|
99
|
+
* @example
|
|
100
|
+
* ```typescript
|
|
101
|
+
* // Basic usage in a component
|
|
102
|
+
* const EndCallButton = () => {
|
|
103
|
+
* const {
|
|
104
|
+
* handleEndCall,
|
|
105
|
+
* isLoading,
|
|
106
|
+
* isSuccess,
|
|
107
|
+
* isError,
|
|
108
|
+
* error
|
|
109
|
+
* } = useEndCall();
|
|
110
|
+
*
|
|
111
|
+
* const endCall = async () => {
|
|
112
|
+
* try {
|
|
113
|
+
* const result = await handleEndCall({
|
|
114
|
+
* disposition: "RES",
|
|
115
|
+
* followUp: "N"
|
|
116
|
+
* });
|
|
117
|
+
* console.log('📞 Call ended:', result);
|
|
118
|
+
* } catch (err) {
|
|
119
|
+
* console.error('❌ End call failed:', err);
|
|
120
|
+
* }
|
|
121
|
+
* };
|
|
122
|
+
*
|
|
123
|
+
* return (
|
|
124
|
+
* <button
|
|
125
|
+
* onClick={endCall}
|
|
126
|
+
* disabled={isLoading}
|
|
127
|
+
* >
|
|
128
|
+
* {isLoading ? 'Ending...' : 'End Call'}
|
|
129
|
+
* </button>
|
|
130
|
+
* );
|
|
131
|
+
* };
|
|
132
|
+
* ```
|
|
133
|
+
*
|
|
134
|
+
* @features
|
|
135
|
+
* - 🎯 Comprehensive call termination with disposition tracking
|
|
136
|
+
* - 📅 Callback scheduling and follow-up management
|
|
137
|
+
* - 🔄 Intelligent state cleanup and reset
|
|
138
|
+
* - ⏳ Comprehensive loading state management
|
|
139
|
+
* - 🛡️ Robust error handling and recovery
|
|
140
|
+
* - 📊 Real-time state updates via SDK manager
|
|
141
|
+
* - 🔄 Automatic call state management
|
|
142
|
+
*
|
|
143
|
+
* @logic
|
|
144
|
+
* - 🔍 Retrieves agent state from localStorage
|
|
145
|
+
* - 📦 Constructs comprehensive API payload
|
|
146
|
+
* - 📡 Makes API call to end call
|
|
147
|
+
* - 🔄 Updates SDK state manager
|
|
148
|
+
* - 📊 Handles success/error states
|
|
149
|
+
* - ⏳ Manages loading states
|
|
150
|
+
*
|
|
151
|
+
* @since 1.0.0
|
|
152
|
+
* @author CTI SDK Team
|
|
22
153
|
*/
|
|
23
154
|
declare const useEndCall: () => {
|
|
24
155
|
handleEndCall: (data: {
|
|
@@ -35,44 +166,478 @@ declare const useEndCall: () => {
|
|
|
35
166
|
data: null;
|
|
36
167
|
};
|
|
37
168
|
|
|
169
|
+
/**
|
|
170
|
+
* @interface CallData
|
|
171
|
+
* @description Comprehensive interface defining call-related data structure for CTI operations.
|
|
172
|
+
* Contains all necessary information about active calls, including metadata, status, and references.
|
|
173
|
+
*
|
|
174
|
+
* @declaration
|
|
175
|
+
* ```typescript
|
|
176
|
+
* interface CallData {
|
|
177
|
+
* mobileNumber?: string;
|
|
178
|
+
* callReferenceId?: string;
|
|
179
|
+
* convoxId?: string;
|
|
180
|
+
* type?: string;
|
|
181
|
+
* status?: string;
|
|
182
|
+
* agent_id?: string;
|
|
183
|
+
* phone_number?: string;
|
|
184
|
+
* event_time?: string;
|
|
185
|
+
* convox_id?: string;
|
|
186
|
+
* process_id?: string;
|
|
187
|
+
* process_name?: string;
|
|
188
|
+
* }
|
|
189
|
+
* ```
|
|
190
|
+
*
|
|
191
|
+
* @requiredParams None (all fields are optional for flexibility)
|
|
192
|
+
*
|
|
193
|
+
* @returnType Interface definition
|
|
194
|
+
*
|
|
195
|
+
* @example
|
|
196
|
+
* ```typescript
|
|
197
|
+
* const callData: CallData = {
|
|
198
|
+
* mobileNumber: "1234567890",
|
|
199
|
+
* callReferenceId: "REF123456",
|
|
200
|
+
* status: "ONCALL",
|
|
201
|
+
* agent_id: "agent001",
|
|
202
|
+
* process_id: "proc001",
|
|
203
|
+
* process_name: "Sales Process"
|
|
204
|
+
* };
|
|
205
|
+
* ```
|
|
206
|
+
*
|
|
207
|
+
* @return Interface definition for call data structure
|
|
208
|
+
*
|
|
209
|
+
* @conclusion Essential data structure for all call-related operations and state management.
|
|
210
|
+
*/
|
|
38
211
|
interface CallData {
|
|
212
|
+
/** Mobile number of the caller or callee */
|
|
39
213
|
mobileNumber?: string;
|
|
214
|
+
/** Unique reference identifier for the call */
|
|
40
215
|
callReferenceId?: string;
|
|
216
|
+
/** Convox system identifier for the call */
|
|
41
217
|
convoxId?: string;
|
|
218
|
+
/** Type of call (inbound, outbound, internal, etc.) */
|
|
42
219
|
type?: string;
|
|
220
|
+
/** Current status of the call (ONCALL, RINGING, WRAPUP, etc.) */
|
|
43
221
|
status?: string;
|
|
222
|
+
/** Agent identifier associated with the call */
|
|
44
223
|
agent_id?: string;
|
|
224
|
+
/** Phone number involved in the call */
|
|
45
225
|
phone_number?: string;
|
|
226
|
+
/** Timestamp when the call event occurred */
|
|
46
227
|
event_time?: string;
|
|
228
|
+
/** Convox system call ID */
|
|
47
229
|
convox_id?: string;
|
|
230
|
+
/** Process identifier for the call */
|
|
48
231
|
process_id?: string;
|
|
232
|
+
/** Name of the process handling the call */
|
|
49
233
|
process_name?: string;
|
|
50
234
|
}
|
|
235
|
+
/**
|
|
236
|
+
* @interface CallControlPanelProps
|
|
237
|
+
* @description Props interface for the main CallControlPanel component.
|
|
238
|
+
* Defines the properties that can be passed to customize the call control interface behavior.
|
|
239
|
+
*
|
|
240
|
+
* @declaration
|
|
241
|
+
* ```typescript
|
|
242
|
+
* interface CallControlPanelProps {
|
|
243
|
+
* onDataChange?: (data: CallData) => void;
|
|
244
|
+
* }
|
|
245
|
+
* ```
|
|
246
|
+
*
|
|
247
|
+
* @requiredParams None (all props are optional)
|
|
248
|
+
*
|
|
249
|
+
* @returnType Interface definition
|
|
250
|
+
*
|
|
251
|
+
* @example
|
|
252
|
+
* ```tsx
|
|
253
|
+
* <CallControlPanel
|
|
254
|
+
* onDataChange={(callData) => {
|
|
255
|
+
* console.log('Call status changed:', callData.status);
|
|
256
|
+
* // Handle call data updates
|
|
257
|
+
* }}
|
|
258
|
+
* />
|
|
259
|
+
* ```
|
|
260
|
+
*
|
|
261
|
+
* @return Interface definition for component props
|
|
262
|
+
*
|
|
263
|
+
* @conclusion Provides flexible configuration for the call control panel component.
|
|
264
|
+
*/
|
|
51
265
|
interface CallControlPanelProps {
|
|
52
|
-
|
|
266
|
+
/** Optional callback function triggered when call data changes */
|
|
267
|
+
onDataChange?: (data: CallData) => void;
|
|
53
268
|
}
|
|
54
|
-
|
|
269
|
+
/**
|
|
270
|
+
* @type CallStatus
|
|
271
|
+
* @description Union type defining all possible call statuses in the CTI system.
|
|
272
|
+
* Represents the various states a call can be in during its lifecycle.
|
|
273
|
+
*
|
|
274
|
+
* @declaration
|
|
275
|
+
* ```typescript
|
|
276
|
+
* type CallStatus =
|
|
277
|
+
* | "idle"
|
|
278
|
+
* | "ready"
|
|
279
|
+
* | "break"
|
|
280
|
+
* | "on call"
|
|
281
|
+
* | "wrap up"
|
|
282
|
+
* | "dial"
|
|
283
|
+
* | "hold"
|
|
284
|
+
* | "mute";
|
|
285
|
+
* ```
|
|
286
|
+
*
|
|
287
|
+
* @requiredParams None (type definition)
|
|
288
|
+
*
|
|
289
|
+
* @returnType Union type definition
|
|
290
|
+
*
|
|
291
|
+
* @example
|
|
292
|
+
* ```typescript
|
|
293
|
+
* const currentStatus: CallStatus = "on call";
|
|
294
|
+
* const agentStatus: CallStatus = "ready";
|
|
295
|
+
* ```
|
|
296
|
+
*
|
|
297
|
+
* @return Union type with all possible call status values
|
|
298
|
+
*
|
|
299
|
+
* @conclusion Essential type for call state management and UI updates.
|
|
300
|
+
*/
|
|
301
|
+
type CallStatus = "idle" /** Agent is idle and available */ | "ready" /** Agent is ready to receive calls */ | "break" /** Agent is on break */ | "on call" /** Agent is currently on a call */ | "wrap up" /** Agent is in wrap-up phase after call */ | "dial" /** Agent is dialing a number */ | "hold" /** Call is on hold */ | "mute"; /** Call is muted */
|
|
302
|
+
/**
|
|
303
|
+
* @type ConferenceLineTypes
|
|
304
|
+
* @description Type definition for individual conference line data structure.
|
|
305
|
+
* Represents a single line in a conference call with its state and controls.
|
|
306
|
+
*
|
|
307
|
+
* @declaration
|
|
308
|
+
* ```typescript
|
|
309
|
+
* type ConferenceLineTypes = {
|
|
310
|
+
* line: number;
|
|
311
|
+
* status: string;
|
|
312
|
+
* type: "external" | "internal" | "";
|
|
313
|
+
* phone: string;
|
|
314
|
+
* isMute: boolean;
|
|
315
|
+
* isHold: boolean;
|
|
316
|
+
* isCallStart: boolean;
|
|
317
|
+
* isMergeCall: boolean;
|
|
318
|
+
* };
|
|
319
|
+
* ```
|
|
320
|
+
*
|
|
321
|
+
* @requiredParams None (type definition)
|
|
322
|
+
*
|
|
323
|
+
* @returnType Type definition
|
|
324
|
+
*
|
|
325
|
+
* @example
|
|
326
|
+
* ```typescript
|
|
327
|
+
* const conferenceLine: ConferenceLineTypes = {
|
|
328
|
+
* line: 1,
|
|
329
|
+
* status: "ONCALL",
|
|
330
|
+
* type: "internal",
|
|
331
|
+
* phone: "1234567890",
|
|
332
|
+
* isMute: false,
|
|
333
|
+
* isHold: false,
|
|
334
|
+
* isCallStart: true,
|
|
335
|
+
* isMergeCall: false
|
|
336
|
+
* };
|
|
337
|
+
* ```
|
|
338
|
+
*
|
|
339
|
+
* @return Type definition for conference line data
|
|
340
|
+
*
|
|
341
|
+
* @conclusion Essential type for conference call management and line state tracking.
|
|
342
|
+
*/
|
|
343
|
+
type ConferenceLineTypes = {
|
|
344
|
+
/** Line number identifier (1, 2, 3, etc.) */
|
|
345
|
+
line: number;
|
|
346
|
+
/** Current status of the line (ONCALL, IDLE, LINE USED, etc.) */
|
|
347
|
+
status: string;
|
|
348
|
+
/** Type of line (internal for agent, external for third party) */
|
|
349
|
+
type: "external" | "internal" | "";
|
|
350
|
+
/** Phone number associated with this line */
|
|
351
|
+
phone: string;
|
|
352
|
+
/** Whether the line is currently muted */
|
|
353
|
+
isMute: boolean;
|
|
354
|
+
/** Whether the line is currently on hold */
|
|
355
|
+
isHold: boolean;
|
|
356
|
+
/** Whether a call has been started on this line */
|
|
357
|
+
isCallStart: boolean;
|
|
358
|
+
/** Whether this line is merged into a conference */
|
|
359
|
+
isMergeCall: boolean;
|
|
360
|
+
};
|
|
361
|
+
/**
|
|
362
|
+
* @interface SDKConfig
|
|
363
|
+
* @description Configuration interface for customizing the Call Control SDK behavior.
|
|
364
|
+
* Allows disabling specific features and customizing the visual appearance of components.
|
|
365
|
+
*
|
|
366
|
+
* @declaration
|
|
367
|
+
* ```typescript
|
|
368
|
+
* interface SDKConfig {
|
|
369
|
+
* disableEndCallButton?: boolean;
|
|
370
|
+
* disabledDialButton?: boolean;
|
|
371
|
+
* disableCallTransferButton?: boolean;
|
|
372
|
+
* isDraggable?: boolean;
|
|
373
|
+
* disableSoftPhone?: boolean;
|
|
374
|
+
* disableConferenceButton?: boolean;
|
|
375
|
+
* disabled?: SxProps;
|
|
376
|
+
* enabled?: SxProps;
|
|
377
|
+
* outlined?: SxProps;
|
|
378
|
+
* }
|
|
379
|
+
* ```
|
|
380
|
+
*
|
|
381
|
+
* @requiredParams None (all configuration options are optional)
|
|
382
|
+
*
|
|
383
|
+
* @returnType Interface definition
|
|
384
|
+
*
|
|
385
|
+
* @example
|
|
386
|
+
* ```typescript
|
|
387
|
+
* const sdkConfig: SDKConfig = {
|
|
388
|
+
* disableEndCallButton: false,
|
|
389
|
+
* disabledDialButton: true,
|
|
390
|
+
* isDraggable: true,
|
|
391
|
+
* disableSoftPhone: false,
|
|
392
|
+
* enabled: { backgroundColor: 'green' },
|
|
393
|
+
* disabled: { backgroundColor: 'gray' }
|
|
394
|
+
* };
|
|
395
|
+
* ```
|
|
396
|
+
*
|
|
397
|
+
* @return Interface definition for SDK configuration
|
|
398
|
+
*
|
|
399
|
+
* @conclusion Provides comprehensive customization options for the CTI interface.
|
|
400
|
+
*/
|
|
55
401
|
interface SDKConfig {
|
|
402
|
+
/** Whether to disable the end call button */
|
|
56
403
|
disableEndCallButton?: boolean;
|
|
404
|
+
/** Whether to disable the dial button */
|
|
57
405
|
disabledDialButton?: boolean;
|
|
406
|
+
/** Whether to disable the call transfer button */
|
|
58
407
|
disableCallTransferButton?: boolean;
|
|
408
|
+
/** Whether the control panel should be draggable */
|
|
59
409
|
isDraggable?: boolean;
|
|
410
|
+
/** Whether to disable the soft phone iframe */
|
|
60
411
|
disableSoftPhone?: boolean;
|
|
412
|
+
/** Whether to disable the conference button */
|
|
61
413
|
disableConferenceButton?: boolean;
|
|
414
|
+
/** Custom styles for disabled button states */
|
|
62
415
|
disabled?: SxProps;
|
|
416
|
+
/** Custom styles for enabled button states */
|
|
63
417
|
enabled?: SxProps;
|
|
418
|
+
/** Custom styles for outlined button states */
|
|
64
419
|
outlined?: SxProps;
|
|
65
420
|
}
|
|
421
|
+
/**
|
|
422
|
+
* @interface SDKState
|
|
423
|
+
* @description Comprehensive state interface for the Call Control SDK.
|
|
424
|
+
* Contains all necessary state information for managing CTI operations, UI state, and call data.
|
|
425
|
+
*
|
|
426
|
+
* @declaration
|
|
427
|
+
* ```typescript
|
|
428
|
+
* interface SDKState {
|
|
429
|
+
* openConferenceDialog: boolean;
|
|
430
|
+
* openCallTransferDialog: boolean;
|
|
431
|
+
* process?: { process_id: number; process_name: string } | null;
|
|
432
|
+
* agentId: string;
|
|
433
|
+
* sdkConfig: SDKConfig | null;
|
|
434
|
+
* isInitialized: boolean;
|
|
435
|
+
* isHolding: boolean;
|
|
436
|
+
* isMuted: boolean;
|
|
437
|
+
* status: CallStatus;
|
|
438
|
+
* convox_id?: string;
|
|
439
|
+
* process_id?: number;
|
|
440
|
+
* callStartTime: number | null;
|
|
441
|
+
* position?: { x: number; y: number };
|
|
442
|
+
* controlPanelPosition: { x: number; y: number };
|
|
443
|
+
* iframePosition: { x: number; y: number };
|
|
444
|
+
* callData: CallData;
|
|
445
|
+
* conferenceLine: ConferenceLineTypes[];
|
|
446
|
+
* }
|
|
447
|
+
* ```
|
|
448
|
+
*
|
|
449
|
+
* @requiredParams None (interface definition)
|
|
450
|
+
*
|
|
451
|
+
* @returnType Interface definition
|
|
452
|
+
*
|
|
453
|
+
* @example
|
|
454
|
+
* ```typescript
|
|
455
|
+
* const sdkState: SDKState = {
|
|
456
|
+
* openConferenceDialog: false,
|
|
457
|
+
* openCallTransferDialog: false,
|
|
458
|
+
* agentId: "agent001",
|
|
459
|
+
* sdkConfig: { isDraggable: true },
|
|
460
|
+
* isInitialized: true,
|
|
461
|
+
* isHolding: false,
|
|
462
|
+
* isMuted: false,
|
|
463
|
+
* status: "idle",
|
|
464
|
+
* callStartTime: null,
|
|
465
|
+
* controlPanelPosition: { x: 10, y: 10 },
|
|
466
|
+
* iframePosition: { x: 10, y: 80 },
|
|
467
|
+
* callData: {},
|
|
468
|
+
* conferenceLine: []
|
|
469
|
+
* };
|
|
470
|
+
* ```
|
|
471
|
+
*
|
|
472
|
+
* @return Interface definition for SDK state management
|
|
473
|
+
*
|
|
474
|
+
* @conclusion Central state interface that manages all aspects of the CTI system.
|
|
475
|
+
*/
|
|
476
|
+
interface SDKState {
|
|
477
|
+
/** Whether the conference dialog is currently open */
|
|
478
|
+
openConferenceDialog: boolean;
|
|
479
|
+
/** Whether the call transfer dialog is currently open */
|
|
480
|
+
openCallTransferDialog: boolean;
|
|
481
|
+
/** Currently selected process information */
|
|
482
|
+
process?: {
|
|
483
|
+
process_id: number;
|
|
484
|
+
process_name: string;
|
|
485
|
+
} | null;
|
|
486
|
+
/** Unique identifier for the agent */
|
|
487
|
+
agentId: string;
|
|
488
|
+
/** SDK configuration settings */
|
|
489
|
+
sdkConfig: SDKConfig | null;
|
|
490
|
+
/** Whether the SDK has been successfully initialized */
|
|
491
|
+
isInitialized: boolean;
|
|
492
|
+
/** Whether the current call is on hold */
|
|
493
|
+
isHolding: boolean;
|
|
494
|
+
/** Whether the current call is muted */
|
|
495
|
+
isMuted: boolean;
|
|
496
|
+
/** Current agent/call status */
|
|
497
|
+
status: CallStatus;
|
|
498
|
+
/** Convox system call identifier */
|
|
499
|
+
convox_id?: string;
|
|
500
|
+
/** Process identifier for the current call */
|
|
501
|
+
process_id?: number;
|
|
502
|
+
/** Timestamp when the current call started */
|
|
503
|
+
callStartTime: number | null;
|
|
504
|
+
/** Current position of draggable elements */
|
|
505
|
+
position?: {
|
|
506
|
+
x: number;
|
|
507
|
+
y: number;
|
|
508
|
+
};
|
|
509
|
+
/** Position of the main control panel */
|
|
510
|
+
controlPanelPosition: {
|
|
511
|
+
x: number;
|
|
512
|
+
y: number;
|
|
513
|
+
};
|
|
514
|
+
/** Position of the soft phone iframe */
|
|
515
|
+
iframePosition: {
|
|
516
|
+
x: number;
|
|
517
|
+
y: number;
|
|
518
|
+
};
|
|
519
|
+
/** Current call data and metadata */
|
|
520
|
+
callData: CallData;
|
|
521
|
+
/** Array of conference lines and their states */
|
|
522
|
+
conferenceLine: ConferenceLineTypes[];
|
|
523
|
+
}
|
|
66
524
|
|
|
525
|
+
/**
|
|
526
|
+
* @fileoverview 📞 Click-to-Call Hook for CTI SDK
|
|
527
|
+
*
|
|
528
|
+
* This file contains the useClickToCall custom hook that provides comprehensive call initiation
|
|
529
|
+
* functionality for the CTI SDK. It handles both regular calls and conference calls with
|
|
530
|
+
* intelligent state management and error handling.
|
|
531
|
+
*
|
|
532
|
+
* 🎯 Key Features:
|
|
533
|
+
* - 📱 Regular call initiation for idle agents
|
|
534
|
+
* - 👥 Conference call initiation for agents on calls
|
|
535
|
+
* - 🔄 Intelligent state detection and routing
|
|
536
|
+
* - ⏳ Loading states and error handling
|
|
537
|
+
* - 📊 Real-time state updates
|
|
538
|
+
* - 🛡️ Comprehensive error management
|
|
539
|
+
*
|
|
540
|
+
* @author CTI SDK Team
|
|
541
|
+
* @version 5.4.8
|
|
542
|
+
* @since 1.0.0
|
|
543
|
+
*/
|
|
544
|
+
/**
|
|
545
|
+
* 📱 Start Call Payload Interface
|
|
546
|
+
*
|
|
547
|
+
* @interface StartCallPayload
|
|
548
|
+
* @description 📊 Defines the structure for call initiation payload data
|
|
549
|
+
* Contains the mobile number required to initiate a call
|
|
550
|
+
*
|
|
551
|
+
* @properties
|
|
552
|
+
* - `mobileNumber: string` - 📱 The phone number to call (required)
|
|
553
|
+
*
|
|
554
|
+
* @example
|
|
555
|
+
* ```typescript
|
|
556
|
+
* // Basic call initiation payload
|
|
557
|
+
* const callPayload: StartCallPayload = {
|
|
558
|
+
* mobileNumber: "1234567890"
|
|
559
|
+
* };
|
|
560
|
+
*
|
|
561
|
+
* // Usage in component
|
|
562
|
+
* const { handleStartCall } = useClickToCall();
|
|
563
|
+
* await handleStartCall({ mobileNumber: "9876543210" });
|
|
564
|
+
* ```
|
|
565
|
+
*
|
|
566
|
+
* @since 1.0.0
|
|
567
|
+
* @author CTI SDK Team
|
|
568
|
+
*/
|
|
67
569
|
interface StartCallPayload {
|
|
68
570
|
mobileNumber: string;
|
|
69
571
|
}
|
|
70
572
|
/**
|
|
71
|
-
*
|
|
72
|
-
*
|
|
73
|
-
* @
|
|
573
|
+
* 📞 Click-to-Call Custom Hook
|
|
574
|
+
*
|
|
575
|
+
* @function useClickToCall
|
|
576
|
+
* @description 🎯 Custom React hook that provides comprehensive call initiation functionality
|
|
577
|
+
* for the CTI SDK. It intelligently handles both regular calls and conference calls
|
|
578
|
+
* based on the current agent state, with proper loading states and error handling.
|
|
579
|
+
*
|
|
580
|
+
* @returns {Object} Hook return object containing:
|
|
581
|
+
* - `handleStartCall: (data: StartCallPayload) => Promise<any>` - 📞 Call initiation function
|
|
582
|
+
* - `isLoading: boolean` - ⏳ Loading state indicator
|
|
583
|
+
* - `isSuccess: boolean` - ✅ Success state indicator
|
|
584
|
+
* - `isError: boolean` - ❌ Error state indicator
|
|
585
|
+
* - `error: any` - 🛡️ Error object when call fails
|
|
586
|
+
* - `data: any` - 📊 Response data from successful calls
|
|
587
|
+
*
|
|
74
588
|
* @example
|
|
75
|
-
*
|
|
589
|
+
* ```typescript
|
|
590
|
+
* // Basic usage in a component
|
|
591
|
+
* const CallButton = () => {
|
|
592
|
+
* const {
|
|
593
|
+
* handleStartCall,
|
|
594
|
+
* isLoading,
|
|
595
|
+
* isSuccess,
|
|
596
|
+
* isError,
|
|
597
|
+
* error
|
|
598
|
+
* } = useClickToCall();
|
|
599
|
+
*
|
|
600
|
+
* const makeCall = async () => {
|
|
601
|
+
* try {
|
|
602
|
+
* const result = await handleStartCall({
|
|
603
|
+
* mobileNumber: "1234567890"
|
|
604
|
+
* });
|
|
605
|
+
* console.log('📞 Call initiated:', result);
|
|
606
|
+
* } catch (err) {
|
|
607
|
+
* console.error('❌ Call failed:', err);
|
|
608
|
+
* }
|
|
609
|
+
* };
|
|
610
|
+
*
|
|
611
|
+
* return (
|
|
612
|
+
* <button
|
|
613
|
+
* onClick={makeCall}
|
|
614
|
+
* disabled={isLoading}
|
|
615
|
+
* >
|
|
616
|
+
* {isLoading ? 'Calling...' : 'Make Call'}
|
|
617
|
+
* </button>
|
|
618
|
+
* );
|
|
619
|
+
* };
|
|
620
|
+
* ```
|
|
621
|
+
*
|
|
622
|
+
* @features
|
|
623
|
+
* - 🎯 Intelligent call routing based on agent state
|
|
624
|
+
* - 📱 Regular call initiation for idle agents
|
|
625
|
+
* - 👥 Conference call initiation for busy agents
|
|
626
|
+
* - ⏳ Comprehensive loading state management
|
|
627
|
+
* - 🛡️ Robust error handling and recovery
|
|
628
|
+
* - 📊 Real-time state updates via SDK manager
|
|
629
|
+
* - 🔄 Automatic conference dialog management
|
|
630
|
+
*
|
|
631
|
+
* @logic
|
|
632
|
+
* - 🔍 Checks agent status from localStorage state
|
|
633
|
+
* - 📞 Initiates regular call if agent is IDLE
|
|
634
|
+
* - 👥 Initiates conference call if agent is ONCALL
|
|
635
|
+
* - ⚠️ Shows alert if agent is not ready
|
|
636
|
+
* - 🔄 Updates conference line state for conference calls
|
|
637
|
+
* - 🎭 Opens conference dialog for conference calls
|
|
638
|
+
*
|
|
639
|
+
* @since 1.0.0
|
|
640
|
+
* @author CTI SDK Team
|
|
76
641
|
*/
|
|
77
642
|
declare const useClickToCall: () => {
|
|
78
643
|
handleStartCall: (data: StartCallPayload) => Promise<any>;
|
|
@@ -83,19 +648,198 @@ declare const useClickToCall: () => {
|
|
|
83
648
|
data: null;
|
|
84
649
|
};
|
|
85
650
|
|
|
86
|
-
|
|
651
|
+
/**
|
|
652
|
+
* @function CallControlPanel
|
|
653
|
+
* @description Main wrapper component that provides the complete call control interface.
|
|
654
|
+
* Wraps the CallControls component with necessary providers and context.
|
|
655
|
+
*
|
|
656
|
+
* @declaration
|
|
657
|
+
* ```typescript
|
|
658
|
+
* function CallControlPanel(props: CallControlPanelProps): JSX.Element
|
|
659
|
+
* ```
|
|
660
|
+
*
|
|
661
|
+
* @requiredParams
|
|
662
|
+
* - `props: CallControlPanelProps` - Component props including optional data change callback
|
|
663
|
+
*
|
|
664
|
+
* @returnType `JSX.Element`
|
|
665
|
+
*
|
|
666
|
+
* @example
|
|
667
|
+
* ```tsx
|
|
668
|
+
* // Basic usage
|
|
669
|
+
* <CallControlPanel />
|
|
670
|
+
*
|
|
671
|
+
* // With data change callback
|
|
672
|
+
* <CallControlPanel
|
|
673
|
+
* onDataChange={(callData) => {
|
|
674
|
+
* console.log('Call data updated:', callData);
|
|
675
|
+
* // Handle call data changes
|
|
676
|
+
* }}
|
|
677
|
+
* />
|
|
678
|
+
* ```
|
|
679
|
+
*
|
|
680
|
+
* @return React component providing complete call control interface
|
|
681
|
+
*
|
|
682
|
+
* @conclusion Primary component for integrating CTI functionality into React applications.
|
|
683
|
+
*/
|
|
684
|
+
declare const CallControlPanel: react.NamedExoticComponent<CallControlPanelProps>;
|
|
685
|
+
|
|
686
|
+
/**
|
|
687
|
+
* @fileoverview Call Control SDK - Main Entry Point
|
|
688
|
+
* @description Comprehensive CTI (Computer Telephony Integration) SDK for React applications.
|
|
689
|
+
* Provides complete call control functionality including dialing, conferencing, transferring,
|
|
690
|
+
* and real-time call management with WebSocket integration.
|
|
691
|
+
*
|
|
692
|
+
* @author Achala IT Solutions
|
|
693
|
+
* @version 1.0.0
|
|
694
|
+
* @since 2024
|
|
695
|
+
*/
|
|
87
696
|
|
|
88
697
|
/**
|
|
89
|
-
*
|
|
90
|
-
* @
|
|
91
|
-
*
|
|
698
|
+
* @interface InitSDKParams
|
|
699
|
+
* @description Parameters required for SDK initialization
|
|
700
|
+
*
|
|
701
|
+
* @declaration
|
|
702
|
+
* ```typescript
|
|
703
|
+
* interface InitSDKParams {
|
|
704
|
+
* apiKey: string;
|
|
705
|
+
* tenantId: string;
|
|
706
|
+
* agentId: string;
|
|
707
|
+
* sdkConfig?: SDKConfig;
|
|
708
|
+
* }
|
|
709
|
+
* ```
|
|
710
|
+
*
|
|
711
|
+
* @requiredParams
|
|
712
|
+
* - `apiKey: string` - Authentication key for SDK access
|
|
713
|
+
* - `tenantId: string` - Tenant identifier for multi-tenancy support
|
|
714
|
+
* - `agentId: string` - Agent identifier for call management
|
|
715
|
+
*
|
|
716
|
+
* @returnType Interface definition
|
|
717
|
+
*
|
|
718
|
+
* @example
|
|
719
|
+
* ```typescript
|
|
720
|
+
* const initParams: InitSDKParams = {
|
|
721
|
+
* apiKey: "your-api-key",
|
|
722
|
+
* tenantId: "tenant-123",
|
|
723
|
+
* agentId: "agent-456",
|
|
724
|
+
* sdkConfig: {
|
|
725
|
+
* isDraggable: true,
|
|
726
|
+
* disableSoftPhone: false
|
|
727
|
+
* }
|
|
728
|
+
* };
|
|
729
|
+
* ```
|
|
730
|
+
*
|
|
731
|
+
* @return Interface definition for SDK initialization parameters
|
|
732
|
+
*
|
|
733
|
+
* @conclusion Essential interface for proper SDK initialization with all required parameters.
|
|
92
734
|
*/
|
|
93
|
-
|
|
735
|
+
interface InitSDKParams {
|
|
736
|
+
/** Authentication key for SDK access */
|
|
94
737
|
apiKey: string;
|
|
738
|
+
/** Tenant identifier for multi-tenancy support */
|
|
95
739
|
tenantId: string;
|
|
740
|
+
/** Agent identifier for call management */
|
|
96
741
|
agentId: string;
|
|
742
|
+
/** Optional SDK configuration for customizing behavior */
|
|
97
743
|
sdkConfig?: SDKConfig;
|
|
98
|
-
}
|
|
99
|
-
|
|
744
|
+
}
|
|
745
|
+
/**
|
|
746
|
+
* @function initSDK
|
|
747
|
+
* @description Initializes the Call Control SDK with authentication credentials and configuration.
|
|
748
|
+
* Sets up event tracking, state management, and establishes connection to the CTI system.
|
|
749
|
+
*
|
|
750
|
+
* @declaration
|
|
751
|
+
* ```typescript
|
|
752
|
+
* function initSDK(params: InitSDKParams): Promise<void>
|
|
753
|
+
* ```
|
|
754
|
+
*
|
|
755
|
+
* @requiredParams
|
|
756
|
+
* - `params: InitSDKParams` - Object containing API key, tenant ID, agent ID, and optional config
|
|
757
|
+
*
|
|
758
|
+
* @returnType `Promise<void>`
|
|
759
|
+
*
|
|
760
|
+
* @example
|
|
761
|
+
* ```typescript
|
|
762
|
+
* // Basic initialization
|
|
763
|
+
* await initSDK({
|
|
764
|
+
* apiKey: "your-api-key",
|
|
765
|
+
* tenantId: "tenant-123",
|
|
766
|
+
* agentId: "agent-456"
|
|
767
|
+
* });
|
|
768
|
+
*
|
|
769
|
+
* // With custom configuration
|
|
770
|
+
* await initSDK({
|
|
771
|
+
* apiKey: "your-api-key",
|
|
772
|
+
* tenantId: "tenant-123",
|
|
773
|
+
* agentId: "agent-456",
|
|
774
|
+
* sdkConfig: {
|
|
775
|
+
* isDraggable: true,
|
|
776
|
+
* disableSoftPhone: false,
|
|
777
|
+
* disableEndCallButton: false
|
|
778
|
+
* }
|
|
779
|
+
* });
|
|
780
|
+
* ```
|
|
781
|
+
*
|
|
782
|
+
* @return Promise that resolves when initialization is complete
|
|
783
|
+
*
|
|
784
|
+
* @throws {Error} When API key is missing or invalid
|
|
785
|
+
* @throws {Error} When tenant ID is missing or invalid
|
|
786
|
+
* @throws {Error} When agent ID is missing or invalid
|
|
787
|
+
* @throws {Error} When initialization fails due to network or authentication issues
|
|
788
|
+
*
|
|
789
|
+
* @conclusion Critical function that must be called before using any SDK functionality.
|
|
790
|
+
*/
|
|
791
|
+
declare function initSDK({ apiKey, tenantId, agentId, sdkConfig, }: InitSDKParams): Promise<void>;
|
|
792
|
+
/**
|
|
793
|
+
* @function getSDKVersion
|
|
794
|
+
* @description Returns the current version of the Call Control SDK
|
|
795
|
+
*
|
|
796
|
+
* @declaration
|
|
797
|
+
* ```typescript
|
|
798
|
+
* function getSDKVersion(): string
|
|
799
|
+
* ```
|
|
800
|
+
*
|
|
801
|
+
* @requiredParams None
|
|
802
|
+
*
|
|
803
|
+
* @returnType `string`
|
|
804
|
+
*
|
|
805
|
+
* @example
|
|
806
|
+
* ```typescript
|
|
807
|
+
* const version = getSDKVersion();
|
|
808
|
+
* console.log(`Using Call Control SDK version: ${version}`);
|
|
809
|
+
* ```
|
|
810
|
+
*
|
|
811
|
+
* @return Current SDK version string
|
|
812
|
+
*
|
|
813
|
+
* @conclusion Utility function for version checking and debugging purposes.
|
|
814
|
+
*/
|
|
815
|
+
declare function getSDKVersion(): string;
|
|
816
|
+
/**
|
|
817
|
+
* @function isSDKInitialized
|
|
818
|
+
* @description Checks if the SDK has been successfully initialized
|
|
819
|
+
*
|
|
820
|
+
* @declaration
|
|
821
|
+
* ```typescript
|
|
822
|
+
* function isSDKInitialized(): boolean
|
|
823
|
+
* ```
|
|
824
|
+
*
|
|
825
|
+
* @requiredParams None
|
|
826
|
+
*
|
|
827
|
+
* @returnType `boolean`
|
|
828
|
+
*
|
|
829
|
+
* @example
|
|
830
|
+
* ```typescript
|
|
831
|
+
* if (isSDKInitialized()) {
|
|
832
|
+
* // SDK is ready to use
|
|
833
|
+
* console.log("SDK is initialized and ready");
|
|
834
|
+
* } else {
|
|
835
|
+
* console.log("SDK needs to be initialized first");
|
|
836
|
+
* }
|
|
837
|
+
* ```
|
|
838
|
+
*
|
|
839
|
+
* @return True if SDK is initialized, false otherwise
|
|
840
|
+
*
|
|
841
|
+
* @conclusion Utility function for checking SDK initialization status before using features.
|
|
842
|
+
*/
|
|
843
|
+
declare function isSDKInitialized(): boolean;
|
|
100
844
|
|
|
101
|
-
export { CallControlPanel, type CallControlPanelProps, type CallData, type CallStatus, initSDK, useClickToCall, useEndCall, useLogout };
|
|
845
|
+
export { CallControlPanel, type CallControlPanelProps, type CallData, type CallStatus, type ConferenceLineTypes, type SDKConfig, type SDKState, getSDKVersion, initSDK, isSDKInitialized, useClickToCall, useEndCall, useLogout };
|