call-control-sdk 2.3.0 → 3.1.0

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 (3) hide show
  1. package/dist/index.js +980 -625
  2. package/dist/index.mjs +1055 -681
  3. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -35,7 +35,7 @@ var __copyProps = (to, from, except, desc) => {
35
35
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
36
36
  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
37
37
 
38
- // src/index.ts
38
+ // call-control-sdk/index.ts
39
39
  var index_exports = {};
40
40
  __export(index_exports, {
41
41
  CallControlPanel: () => CallControlPanel,
@@ -43,480 +43,86 @@ __export(index_exports, {
43
43
  });
44
44
  module.exports = __toCommonJS(index_exports);
45
45
 
46
- // src/lib/hooks/eventsTracker.ts
47
- var EventTrackerSDK = class {
46
+ // call-control-sdk/lib/components/callControlPanel.tsx
47
+ var import_react3 = require("react");
48
+ var import_material2 = require("@mui/material");
49
+ var import_icons_material2 = require("@mui/icons-material");
50
+
51
+ // call-control-sdk/lib/hooks/useSDKState.ts
52
+ var import_react = require("react");
53
+
54
+ // call-control-sdk/lib/hooks/sdk-state.ts
55
+ var SDKStateManager = class {
48
56
  constructor() {
49
- __publicField(this, "config", null);
50
- __publicField(this, "ticketId", null);
51
- __publicField(this, "baseUrl", "");
52
- __publicField(this, "eventQueue", []);
53
- __publicField(this, "isOnline", true);
54
- __publicField(this, "retryQueue", []);
55
- __publicField(this, "flushTimer", null);
56
- }
57
- /**
58
- * Initialize the EventTracker SDK
59
- * @param config Configuration object
60
- */
61
- async init(config) {
62
- this.config = __spreadValues({
63
- autoTrack: true,
64
- retryAttempts: 3,
65
- queueSize: 100,
66
- flushInterval: 5e3
67
- }, config);
68
- this.baseUrl = config.baseUrl || (typeof window !== "undefined" ? window.location.origin : "");
69
- this.setupNetworkDetection();
70
- const ticket = await this.createTicket();
71
- this.startPeriodicFlush();
72
- console.log("EventTracker SDK initialized successfully");
73
- return ticket;
74
- }
75
- /**
76
- * Check if the SDK is initialized
77
- */
78
- isInitialized() {
79
- return this.config !== null && this.ticketId !== null;
80
- }
81
- /**
82
- * Get the current configuration
83
- */
84
- getConfig() {
85
- return this.config;
86
- }
87
- /**
88
- * Get the current ticket ID
89
- */
90
- getTicketId() {
91
- return this.ticketId;
57
+ __publicField(this, "state");
58
+ __publicField(this, "listeners", []);
59
+ __publicField(this, "STORAGE_KEY", "call-control-sdk-state");
60
+ this.state = this.getInitialState();
61
+ this.loadFromStorage();
92
62
  }
93
- /**
94
- * Create a new ticket
95
- */
96
- async createTicket() {
97
- if (!this.config) {
98
- throw new Error("EventTracker not initialized");
99
- }
100
- try {
101
- const response = await this.makeRequest("/api/v1/et/init", {
102
- method: "POST",
103
- headers: {
104
- "Content-Type": "application/json",
105
- "X-API-Key": this.config.apiKey
106
- },
107
- body: JSON.stringify({
108
- agentId: this.config.agentId,
109
- sessionId: this.config.sessionId
110
- })
111
- });
112
- if (!response.ok) {
113
- throw new Error(
114
- `Failed to initialize: ${response.status} ${response.statusText}`
115
- );
116
- }
117
- const data = await response.json();
118
- this.ticketId = data.ticketId;
119
- if (this.config.autoTrack) {
120
- this.setupAutoTracking();
63
+ getInitialState() {
64
+ return {
65
+ apiKey: null,
66
+ isInitialized: false,
67
+ isHolding: false,
68
+ isMuted: false,
69
+ status: "idle",
70
+ callStartTime: null,
71
+ controlPanelPosition: { x: 0, y: 0 },
72
+ iframePosition: { x: 0, y: 0 },
73
+ callData: {
74
+ mobileNumber: "",
75
+ callReferenceId: "",
76
+ agentLoginId: ""
121
77
  }
122
- return this.ticketId;
123
- } catch (error) {
124
- console.error("EventTracker initialization failed:", error);
125
- throw error;
126
- }
127
- }
128
- /**
129
- * Log an event
130
- * @param eventType The type of event
131
- * @param eventData Optional event data
132
- */
133
- async logEvent(eventType, eventData) {
134
- if (!this.config || !this.ticketId) {
135
- console.warn("EventTracker not initialized, skipping event:", eventType);
136
- return;
137
- }
138
- const event = {
139
- eventType,
140
- eventData,
141
- timestamp: Date.now()
142
78
  };
143
- this.eventQueue.push(event);
144
- if (this.eventQueue.length > (this.config.queueSize || 100)) {
145
- this.eventQueue.shift();
146
- }
147
- if (this.isOnline) {
148
- try {
149
- await this.sendEvent(event);
150
- } catch (error) {
151
- console.warn("Failed to send event, will retry later:", error);
152
- }
153
- }
154
79
  }
155
- /**
156
- * Send an event to the server
157
- */
158
- async sendEvent(event) {
159
- if (!this.config || !this.ticketId) return;
80
+ loadFromStorage() {
160
81
  try {
161
- const response = await this.makeRequest("/api/v1/et/event", {
162
- method: "POST",
163
- headers: {
164
- "Content-Type": "application/json",
165
- "X-API-Key": this.config.apiKey
166
- },
167
- body: JSON.stringify({
168
- ticketId: this.ticketId,
169
- eventType: event.eventType,
170
- eventData: event.eventData
171
- })
172
- });
173
- if (!response.ok) {
174
- throw new Error(
175
- `Failed to log event: ${response.status} ${response.statusText}`
176
- );
177
- }
178
- const index = this.eventQueue.findIndex(
179
- (e) => e.timestamp === event.timestamp
180
- );
181
- if (index > -1) {
182
- this.eventQueue.splice(index, 1);
82
+ const stored = localStorage.getItem(this.STORAGE_KEY);
83
+ if (stored) {
84
+ const parsedState = JSON.parse(stored);
85
+ this.state = __spreadProps(__spreadValues({}, this.state), {
86
+ isHolding: parsedState.isHolding || false,
87
+ isMuted: parsedState.isMuted || false,
88
+ status: parsedState.status || "idle",
89
+ controlPanelPosition: parsedState.controlPanelPosition || {
90
+ x: 50,
91
+ y: 50
92
+ },
93
+ iframePosition: parsedState.iframePosition || { x: 50, y: 50 },
94
+ callStartTime: parsedState.callStartTime || null
95
+ });
183
96
  }
184
97
  } catch (error) {
185
- console.error("Event logging failed:", error);
186
- this.retryQueue.push(() => this.sendEvent(event));
98
+ console.warn("Failed to load SDK state from localStorage:", error);
187
99
  }
188
100
  }
189
- /**
190
- * Close the current ticket
191
- */
192
- async closeTicket() {
193
- if (!this.config || !this.ticketId) {
194
- throw new Error("EventTracker not initialized");
195
- }
196
- await this.flush();
101
+ saveToStorage() {
197
102
  try {
198
- const response = await this.makeRequest("/api/v1/et/close", {
199
- method: "POST",
200
- headers: {
201
- "Content-Type": "application/json",
202
- "X-API-Key": this.config.apiKey
203
- },
204
- body: JSON.stringify({
205
- ticketId: this.ticketId
206
- })
207
- });
208
- if (!response.ok) {
209
- throw new Error(
210
- `Failed to close ticket: ${response.status} ${response.statusText}`
211
- );
212
- }
213
- this.ticketId = null;
214
- this.stopPeriodicFlush();
215
- console.log("Ticket closed successfully");
103
+ const persistentState = {
104
+ isHolding: this.state.isHolding,
105
+ isMuted: this.state.isMuted,
106
+ status: this.state.status,
107
+ controlPanelPosition: this.state.controlPanelPosition,
108
+ iframePosition: this.state.iframePosition,
109
+ callStartTime: this.state.callStartTime
110
+ };
111
+ localStorage.setItem(this.STORAGE_KEY, JSON.stringify(persistentState));
216
112
  } catch (error) {
217
- console.error("Ticket close failed:", error);
218
- throw error;
113
+ console.warn("Failed to save SDK state to localStorage:", error);
219
114
  }
220
115
  }
221
- /**
222
- * Flush all pending events
223
- */
224
- async flush() {
225
- if (!this.isOnline || this.eventQueue.length === 0) return;
226
- const eventsToFlush = [...this.eventQueue];
227
- for (const event of eventsToFlush) {
228
- await this.sendEvent(event);
229
- }
230
- const retryItems = [...this.retryQueue];
231
- this.retryQueue = [];
232
- for (const retryFn of retryItems) {
233
- try {
234
- await retryFn();
235
- } catch (error) {
236
- console.error("Retry failed:", error);
237
- }
238
- }
116
+ notifyListeners() {
117
+ this.listeners.forEach((listener) => listener());
239
118
  }
240
- /**
241
- * Make an HTTP request with retry logic
242
- */
243
- async makeRequest(url, options) {
244
- var _a;
245
- const fullUrl = `${this.baseUrl}${url}`;
246
- const maxRetries = ((_a = this.config) == null ? void 0 : _a.retryAttempts) || 3;
247
- for (let attempt = 1; attempt <= maxRetries; attempt++) {
248
- try {
249
- const response = await fetch(fullUrl, options);
250
- return response;
251
- } catch (error) {
252
- if (attempt === maxRetries) {
253
- throw error;
254
- }
255
- const delay = Math.min(1e3 * Math.pow(2, attempt - 1), 1e4);
256
- await new Promise((resolve) => setTimeout(resolve, delay));
257
- }
119
+ initialize(apiKey) {
120
+ if (!apiKey || typeof apiKey !== "string" || apiKey.trim().length === 0) {
121
+ throw new Error("API key not available");
258
122
  }
259
- throw new Error("Max retries exceeded");
260
- }
261
- /**
262
- * Set up automatic event tracking
263
- */
264
- setupAutoTracking() {
265
- var _a;
266
- if (typeof window === "undefined" || !((_a = this.config) == null ? void 0 : _a.autoTrack)) return;
267
- const autoTrackConfig = this.config.autoTrack === true ? {} : this.config.autoTrack;
268
- if (autoTrackConfig.pageVisits !== false) {
269
- this.logEvent("pageVisit", {
270
- url: window.location.href,
271
- title: document.title,
272
- referrer: document.referrer,
273
- userAgent: navigator.userAgent,
274
- viewport: {
275
- width: window.innerWidth,
276
- height: window.innerHeight
277
- },
278
- timestamp: (/* @__PURE__ */ new Date()).toISOString()
279
- }).catch((error) => console.warn("Failed to track page visit:", error));
280
- }
281
- if (autoTrackConfig.clicks !== false) {
282
- document.addEventListener("click", (event) => {
283
- var _a2;
284
- const target = event.target;
285
- if (target.tagName === "BUTTON" || target.tagName === "A" || target.onclick || target.getAttribute("role") === "button" || target instanceof HTMLButtonElement && target.type === "button") {
286
- this.logEvent("click", {
287
- element: target.tagName,
288
- text: (_a2 = target.textContent) == null ? void 0 : _a2.trim().substring(0, 100),
289
- // Limit text length
290
- href: target.getAttribute("href"),
291
- id: target.id,
292
- className: target.className,
293
- role: target.getAttribute("role"),
294
- position: {
295
- x: event.clientX,
296
- y: event.clientY
297
- },
298
- timestamp: (/* @__PURE__ */ new Date()).toISOString()
299
- }).catch((error) => console.warn("Failed to track click:", error));
300
- }
301
- });
302
- }
303
- if (autoTrackConfig.forms !== false) {
304
- document.addEventListener("submit", (event) => {
305
- const target = event.target;
306
- const formData = new FormData(target);
307
- const formFields = {};
308
- formData.forEach((value, key) => {
309
- formFields[key] = value.toString();
310
- });
311
- this.logEvent("formSubmission", {
312
- formId: target.id,
313
- action: target.action,
314
- method: target.method,
315
- fields: Object.keys(formFields),
316
- fieldCount: Object.keys(formFields).length,
317
- timestamp: (/* @__PURE__ */ new Date()).toISOString()
318
- }).catch(
319
- (error) => console.warn("Failed to track form submission:", error)
320
- );
321
- });
322
- }
323
- if (autoTrackConfig.inputs !== false) {
324
- let inputTimer;
325
- document.addEventListener("input", (event) => {
326
- const target = event.target;
327
- if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT") {
328
- clearTimeout(inputTimer);
329
- inputTimer = setTimeout(() => {
330
- var _a2;
331
- this.logEvent("fieldChange", {
332
- element: target.tagName,
333
- type: target.getAttribute("type"),
334
- name: target.getAttribute("name"),
335
- id: target.id,
336
- valueLength: ((_a2 = target.value) == null ? void 0 : _a2.length) || 0,
337
- timestamp: (/* @__PURE__ */ new Date()).toISOString()
338
- }).catch(
339
- (error) => console.warn("Failed to track field change:", error)
340
- );
341
- }, 1e3);
342
- }
343
- });
344
- }
345
- const sessionStartTime = Date.now();
346
- window.addEventListener("beforeunload", () => {
347
- const sessionDuration = Date.now() - sessionStartTime;
348
- this.logEvent("pageUnload", {
349
- url: window.location.href,
350
- sessionDuration,
351
- timestamp: (/* @__PURE__ */ new Date()).toISOString()
352
- });
353
- if (this.ticketId) {
354
- navigator.sendBeacon(
355
- `${this.baseUrl}/api/v1/et/close`,
356
- JSON.stringify({
357
- ticketId: this.ticketId
358
- })
359
- );
360
- }
361
- });
362
- if (autoTrackConfig.visibility !== false) {
363
- document.addEventListener("visibilitychange", () => {
364
- this.logEvent("visibilityChange", {
365
- hidden: document.hidden,
366
- visibilityState: document.visibilityState,
367
- timestamp: (/* @__PURE__ */ new Date()).toISOString()
368
- });
369
- });
370
- }
371
- if (autoTrackConfig.errors !== false) {
372
- window.addEventListener("error", (event) => {
373
- this.logEvent("jsError", {
374
- message: event.message,
375
- filename: event.filename,
376
- lineno: event.lineno,
377
- colno: event.colno,
378
- timestamp: (/* @__PURE__ */ new Date()).toISOString()
379
- });
380
- });
381
- window.addEventListener("unhandledrejection", (event) => {
382
- var _a2;
383
- this.logEvent("unhandledRejection", {
384
- reason: (_a2 = event.reason) == null ? void 0 : _a2.toString(),
385
- timestamp: (/* @__PURE__ */ new Date()).toISOString()
386
- });
387
- });
388
- }
389
- if (autoTrackConfig.performance !== false && typeof window.performance !== "undefined" && window.performance.navigation) {
390
- window.addEventListener("load", () => {
391
- setTimeout(() => {
392
- const navigation = window.performance.navigation;
393
- const timing = window.performance.timing;
394
- this.logEvent("performanceMetrics", {
395
- navigationTime: timing.navigationStart,
396
- loadTime: timing.loadEventEnd - timing.navigationStart,
397
- domReady: timing.domContentLoadedEventEnd - timing.navigationStart,
398
- renderTime: timing.loadEventEnd - timing.domContentLoadedEventEnd,
399
- navigationType: navigation.type,
400
- redirectCount: navigation.redirectCount,
401
- timestamp: (/* @__PURE__ */ new Date()).toISOString()
402
- });
403
- }, 1e3);
404
- });
405
- }
406
- }
407
- /**
408
- * Set up network detection
409
- */
410
- setupNetworkDetection() {
411
- if (typeof window === "undefined") return;
412
- this.isOnline = navigator.onLine;
413
- window.addEventListener("online", () => {
414
- this.isOnline = true;
415
- console.log("EventTracker: Back online, flushing queued events");
416
- this.flush();
417
- });
418
- window.addEventListener("offline", () => {
419
- this.isOnline = false;
420
- console.log("EventTracker: Offline, queueing events");
421
- });
422
- }
423
- /**
424
- * Start periodic flush timer
425
- */
426
- startPeriodicFlush() {
427
- var _a;
428
- if (this.flushTimer) {
429
- clearInterval(this.flushTimer);
430
- }
431
- const interval = ((_a = this.config) == null ? void 0 : _a.flushInterval) || 5e3;
432
- this.flushTimer = setInterval(() => {
433
- this.flush();
434
- }, interval);
435
- }
436
- /**
437
- * Stop periodic flush timer
438
- */
439
- stopPeriodicFlush() {
440
- if (this.flushTimer) {
441
- clearInterval(this.flushTimer);
442
- this.flushTimer = null;
443
- }
444
- }
445
- };
446
- var eventTracker = new EventTrackerSDK();
447
- if (typeof window !== "undefined") {
448
- window.EventTracker = eventTracker;
449
- }
450
-
451
- // src/lib/hooks/sdk-state.ts
452
- var SDKStateManager = class {
453
- constructor() {
454
- __publicField(this, "state");
455
- __publicField(this, "listeners", []);
456
- __publicField(this, "STORAGE_KEY", "call-control-sdk-state");
457
- this.state = this.getInitialState();
458
- this.loadFromStorage();
459
- }
460
- getInitialState() {
461
- return {
462
- apiKey: null,
463
- isInitialized: false,
464
- isHolding: false,
465
- isMuted: false,
466
- status: "idle",
467
- callStartTime: null,
468
- controlPanelPosition: { x: 0, y: 0 },
469
- iframePosition: { x: 0, y: 0 },
470
- callData: {
471
- mobileNumber: "",
472
- callReferenceId: "",
473
- agentLoginId: ""
474
- }
475
- };
476
- }
477
- loadFromStorage() {
478
- try {
479
- const stored = localStorage.getItem(this.STORAGE_KEY);
480
- if (stored) {
481
- const parsedState = JSON.parse(stored);
482
- this.state = __spreadProps(__spreadValues({}, this.state), {
483
- isHolding: parsedState.isHolding || false,
484
- isMuted: parsedState.isMuted || false,
485
- status: parsedState.status || "idle",
486
- controlPanelPosition: parsedState.controlPanelPosition || { x: 50, y: 50 },
487
- iframePosition: parsedState.iframePosition || { x: 50, y: 50 },
488
- callStartTime: parsedState.callStartTime || null
489
- });
490
- }
491
- } catch (error) {
492
- console.warn("Failed to load SDK state from localStorage:", error);
493
- }
494
- }
495
- saveToStorage() {
496
- try {
497
- const persistentState = {
498
- isHolding: this.state.isHolding,
499
- isMuted: this.state.isMuted,
500
- status: this.state.status,
501
- controlPanelPosition: this.state.controlPanelPosition,
502
- iframePosition: this.state.iframePosition,
503
- callStartTime: this.state.callStartTime
504
- };
505
- localStorage.setItem(this.STORAGE_KEY, JSON.stringify(persistentState));
506
- } catch (error) {
507
- console.warn("Failed to save SDK state to localStorage:", error);
508
- }
509
- }
510
- notifyListeners() {
511
- this.listeners.forEach((listener) => listener());
512
- }
513
- initialize(apiKey) {
514
- if (!apiKey || typeof apiKey !== "string" || apiKey.trim().length === 0) {
515
- throw new Error("API key not available");
516
- }
517
- this.state.apiKey = apiKey;
518
- this.state.isInitialized = true;
519
- this.notifyListeners();
123
+ this.state.apiKey = apiKey;
124
+ this.state.isInitialized = true;
125
+ this.notifyListeners();
520
126
  }
521
127
  getState() {
522
128
  return __spreadValues({}, this.state);
@@ -576,13 +182,7 @@ var SDKStateManager = class {
576
182
  };
577
183
  var sdkStateManager = new SDKStateManager();
578
184
 
579
- // src/lib/components/CallControlPanel.tsx
580
- var import_react3 = require("react");
581
- var import_material = require("@mui/material");
582
- var import_icons_material = require("@mui/icons-material");
583
-
584
- // src/lib/hooks/useSDKState.ts
585
- var import_react = require("react");
185
+ // call-control-sdk/lib/hooks/useSDKState.ts
586
186
  function useSDKState() {
587
187
  const [state, setState] = (0, import_react.useState)(sdkStateManager.getState());
588
188
  (0, import_react.useEffect)(() => {
@@ -594,7 +194,7 @@ function useSDKState() {
594
194
  return state;
595
195
  }
596
196
 
597
- // src/lib/hooks/useDraggable.ts
197
+ // call-control-sdk/lib/hooks/useDraggable.ts
598
198
  var import_react2 = require("react");
599
199
  function useDraggable(initialPosition, onPositionChange) {
600
200
  const [position, setPosition] = (0, import_react2.useState)(initialPosition);
@@ -684,13 +284,304 @@ function useDraggable(initialPosition, onPositionChange) {
684
284
  };
685
285
  }
686
286
 
687
- // src/lib/components/CallControlPanel.tsx
287
+ // call-control-sdk/lib/components/dialog.tsx
288
+ var import_icons_material = require("@mui/icons-material");
289
+ var import_material = require("@mui/material");
688
290
  var import_jsx_runtime = require("react/jsx-runtime");
291
+ function ReusableDialog({
292
+ agentName = "Agent_ravi",
293
+ lines = [],
294
+ onConference,
295
+ onExit,
296
+ onTransfer,
297
+ onEndAllCalls,
298
+ open,
299
+ setOpen
300
+ }) {
301
+ const handleClose = () => {
302
+ setOpen(false);
303
+ };
304
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
305
+ import_material.Dialog,
306
+ {
307
+ open,
308
+ "aria-labelledby": "alert-dialog-title",
309
+ "aria-describedby": "alert-dialog-description",
310
+ fullWidth: true,
311
+ maxWidth: "md",
312
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Paper, { sx: { borderRadius: 2 }, children: [
313
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
314
+ import_material.Box,
315
+ {
316
+ sx: {
317
+ display: "flex",
318
+ justifyContent: "space-between",
319
+ alignItems: "center",
320
+ padding: "4px 16px"
321
+ // boxShadow:"0px 1px 2px #ccc"
322
+ },
323
+ children: [
324
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Typography, { variant: "body1", children: [
325
+ agentName,
326
+ " Conference"
327
+ ] }),
328
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Close, {}) })
329
+ ]
330
+ }
331
+ ),
332
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
333
+ import_material.Stack,
334
+ {
335
+ direction: "row",
336
+ alignItems: "center",
337
+ justifyContent: "flex-end",
338
+ mr: 2,
339
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
340
+ import_material.Stack,
341
+ {
342
+ display: "flex",
343
+ direction: "row",
344
+ alignItems: "center",
345
+ justifyContent: "center",
346
+ spacing: 1,
347
+ children: [
348
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
349
+ import_material.Button,
350
+ {
351
+ variant: "contained",
352
+ color: "success",
353
+ onClick: onConference,
354
+ sx: {
355
+ borderRadius: "10px",
356
+ textTransform: "capitalize"
357
+ },
358
+ children: [
359
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Group, { sx: { px: 0.5 } }),
360
+ "Conference"
361
+ ]
362
+ }
363
+ ),
364
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
365
+ import_material.Button,
366
+ {
367
+ variant: "contained",
368
+ color: "error",
369
+ onClick: onExit,
370
+ sx: {
371
+ borderRadius: "10px",
372
+ textTransform: "capitalize"
373
+ },
374
+ children: [
375
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Logout, { sx: { px: 0.5 } }),
376
+ "Exit Conference"
377
+ ]
378
+ }
379
+ ),
380
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
381
+ import_material.Button,
382
+ {
383
+ variant: "contained",
384
+ color: "inherit",
385
+ onClick: onTransfer,
386
+ sx: {
387
+ borderRadius: "10px",
388
+ textTransform: "capitalize"
389
+ },
390
+ children: [
391
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.TransferWithinAStation, { sx: { px: 0.5 } }),
392
+ "Transfer"
393
+ ]
394
+ }
395
+ )
396
+ ]
397
+ }
398
+ )
399
+ }
400
+ ),
401
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
402
+ import_material.Box,
403
+ {
404
+ sx: {
405
+ boxShadow: "0px 1px 2px #e7e5e5ff",
406
+ padding: "6px",
407
+ margin: "0px 10px",
408
+ borderRadius: "20px"
409
+ },
410
+ children: lines.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
411
+ import_material.Box,
412
+ {
413
+ sx: {
414
+ p: 1,
415
+ display: "flex",
416
+ alignItems: "center",
417
+ justifyContent: "space-between",
418
+ // borderBottom:"1px solid #ecebebff",
419
+ gap: 1
420
+ // bgcolor: "#fafafa",
421
+ },
422
+ children: [
423
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
424
+ import_material.Box,
425
+ {
426
+ sx: {
427
+ // px: 1,
428
+ // py: 0.5,
429
+ color: "white",
430
+ bgcolor: "warning.main",
431
+ fontWeight: "bold",
432
+ fontSize: 14,
433
+ minWidth: 70,
434
+ textAlign: "center",
435
+ border: "2px solid primary.main",
436
+ borderRadius: "10px 50px 50px 10px"
437
+ },
438
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Typography, { children: [
439
+ "Line ",
440
+ index + 1
441
+ ] })
442
+ }
443
+ ),
444
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
445
+ import_material.Typography,
446
+ {
447
+ variant: "body2",
448
+ sx: {
449
+ px: 1,
450
+ // borderRadius: 1,
451
+ border: "2px solid gray",
452
+ borderRadius: "10px",
453
+ // color: "#fff",
454
+ textAlign: "center",
455
+ width: "80px",
456
+ maxWidth: "100px"
457
+ },
458
+ children: line.status
459
+ }
460
+ ),
461
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { display: "flex", alignItems: "center", children: [
462
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Radio, { checked: line.type === "Internal" }),
463
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "body2", children: "Internal" })
464
+ ] }),
465
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { display: "flex", alignItems: "center", children: [
466
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Radio, { checked: line.type === "External" }),
467
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "body2", children: "External" })
468
+ ] }),
469
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
470
+ import_material.TextField,
471
+ {
472
+ size: "small",
473
+ placeholder: "Phone Number",
474
+ value: line.phone || ""
475
+ }
476
+ ),
477
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
478
+ import_material.IconButton,
479
+ {
480
+ color: "success",
481
+ sx: {
482
+ bgcolor: "action.hover",
483
+ "&:hover": { bgcolor: "action.selected" }
484
+ },
485
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Call, {})
486
+ }
487
+ ),
488
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
489
+ import_material.IconButton,
490
+ {
491
+ color: "info",
492
+ sx: {
493
+ bgcolor: "action.hover",
494
+ "&:hover": { bgcolor: "action.selected" }
495
+ },
496
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.CallSplit, {})
497
+ }
498
+ ),
499
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
500
+ import_material.IconButton,
501
+ {
502
+ color: "warning",
503
+ sx: {
504
+ bgcolor: "action.hover",
505
+ "&:hover": { bgcolor: "action.selected" }
506
+ },
507
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.PauseCircle, {})
508
+ }
509
+ ),
510
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
511
+ import_material.IconButton,
512
+ {
513
+ color: "error",
514
+ sx: {
515
+ bgcolor: "action.hover",
516
+ "&:hover": { bgcolor: "action.selected" }
517
+ },
518
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.CallEnd, {})
519
+ }
520
+ )
521
+ ]
522
+ },
523
+ index
524
+ ))
525
+ }
526
+ ),
527
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { textAlign: "center", m: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
528
+ import_material.Button,
529
+ {
530
+ variant: "outlined",
531
+ color: "error",
532
+ size: "large",
533
+ onClick: onEndAllCalls,
534
+ sx: { px: 2, borderRadius: "20px", textTransform: "capitalize" },
535
+ children: [
536
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
537
+ import_material.IconButton,
538
+ {
539
+ sx: {
540
+ bgcolor: "error.main",
541
+ "&:hover": { bgcolor: "error.dark" },
542
+ marginRight: "8px",
543
+ width: "28px",
544
+ height: "28px",
545
+ fontSize: "12px",
546
+ fontWeight: "600",
547
+ lineHeight: "16px",
548
+ letterSpacing: "0.02em",
549
+ textTransform: "capitalize",
550
+ color: "white",
551
+ display: "flex",
552
+ alignItems: "center",
553
+ justifyContent: "center",
554
+ borderRadius: "50%"
555
+ },
556
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
557
+ import_icons_material.PhoneDisabled,
558
+ {
559
+ sx: {
560
+ color: "white",
561
+ fontSize: "16px",
562
+ fontWeight: "600"
563
+ }
564
+ }
565
+ )
566
+ }
567
+ ),
568
+ "End Calls"
569
+ ]
570
+ }
571
+ ) })
572
+ ] })
573
+ }
574
+ ) });
575
+ }
576
+
577
+ // call-control-sdk/lib/components/callControlPanel.tsx
578
+ var import_jsx_runtime2 = require("react/jsx-runtime");
689
579
  function CallControlPanel({ onDataChange }) {
690
- const theme = (0, import_material.useTheme)();
580
+ const theme = (0, import_material2.useTheme)();
691
581
  const state = useSDKState();
692
582
  const [anchorEl, setAnchorEl] = (0, import_react3.useState)(null);
693
583
  const [phoneNumber, setPhoneNumber] = (0, import_react3.useState)("");
584
+ const [open, setOpen] = (0, import_react3.useState)(false);
694
585
  const [dialerAnchorEl, setDialerAnchorEl] = (0, import_react3.useState)(
695
586
  null
696
587
  );
@@ -700,7 +591,13 @@ function CallControlPanel({ onDataChange }) {
700
591
  state.controlPanelPosition,
701
592
  (newPosition) => sdkStateManager.setControlPanelPosition(newPosition)
702
593
  );
703
- const { position: xposition, isDragging: xisDragging, dragRef: xdragRef, handleMouseDown: xhandleMouseDown, handleTouchStart: xhandleTouchStart } = useDraggable(
594
+ const {
595
+ position: iframePosition,
596
+ isDragging: iframeIsDragging,
597
+ dragRef: iframeDragRef,
598
+ handleMouseDown: iframeHandleMouseDown,
599
+ handleTouchStart: iframeHandleTouchStart
600
+ } = useDraggable(
704
601
  state.iframePosition,
705
602
  (newPosition) => sdkStateManager.setIframePosition(newPosition)
706
603
  );
@@ -763,9 +660,6 @@ function CallControlPanel({ onDataChange }) {
763
660
  const handleMoreClick = (event) => {
764
661
  setAnchorEl(event.currentTarget);
765
662
  };
766
- const handleMoreOptions = (event) => {
767
- setMoreOptionsAnchorEl(event.currentTarget);
768
- };
769
663
  const handleMoreClose = () => {
770
664
  setAnchorEl(null);
771
665
  };
@@ -781,12 +675,12 @@ function CallControlPanel({ onDataChange }) {
781
675
  if (!state.isInitialized) {
782
676
  return null;
783
677
  }
784
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
785
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Fade, { in: true, timeout: 300, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
786
- import_material.Paper,
678
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
679
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Fade, { in: true, timeout: 300, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
680
+ import_material2.Paper,
787
681
  {
788
682
  ref: dragRef,
789
- elevation: isDragging ? 2 : 1,
683
+ elevation: isDragging ? 4 : 1,
790
684
  sx: {
791
685
  position: "fixed",
792
686
  left: position.x,
@@ -794,25 +688,23 @@ function CallControlPanel({ onDataChange }) {
794
688
  p: 1,
795
689
  borderRadius: 3,
796
690
  bgcolor: "background.paper",
797
- cursor: isDragging ? "grabbing" : "grab",
691
+ // cursor: "all-scroll",
798
692
  transition: theme.transitions.create(["box-shadow", "transform"], {
799
693
  duration: theme.transitions.duration.short
800
694
  }),
801
695
  minWidth: 320,
802
696
  userSelect: "none"
803
697
  },
804
- onMouseDown: handleMouseDown,
805
- onTouchStart: handleTouchStart,
806
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
807
- import_material.Box,
698
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
699
+ import_material2.Box,
808
700
  {
809
701
  sx: {
810
702
  display: "flex",
811
703
  alignItems: "center"
812
704
  },
813
705
  children: [
814
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
815
- import_material.Box,
706
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
707
+ import_material2.Box,
816
708
  {
817
709
  sx: {
818
710
  display: "flex",
@@ -820,8 +712,8 @@ function CallControlPanel({ onDataChange }) {
820
712
  alignItems: "center"
821
713
  },
822
714
  children: [
823
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
824
- import_material.Typography,
715
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
716
+ import_material2.Typography,
825
717
  {
826
718
  variant: "h6",
827
719
  sx: {
@@ -832,21 +724,34 @@ function CallControlPanel({ onDataChange }) {
832
724
  alignItems: "center"
833
725
  },
834
726
  children: [
835
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.DragIndicator, {}),
836
- " ",
837
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
838
- import_material.Box,
727
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
728
+ import_material2.IconButton,
729
+ {
730
+ component: "div",
731
+ sx: {
732
+ cursor: "all-scroll"
733
+ },
734
+ onMouseDown: handleMouseDown,
735
+ onTouchStart: handleTouchStart,
736
+ children: [
737
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.DragIndicator, {}),
738
+ " "
739
+ ]
740
+ }
741
+ ),
742
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
743
+ import_material2.Box,
839
744
  {
840
745
  sx: {
841
746
  marginRight: "10px"
842
747
  },
843
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Dial", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
844
- import_material.IconButton,
748
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Tooltip, { title: "Dial", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
749
+ import_material2.IconButton,
845
750
  {
846
751
  onClick: (e) => {
847
752
  handleOpenDialer(e);
848
753
  },
849
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.WifiCalling3, { color: "success" })
754
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.WifiCalling3, { color: "success" })
850
755
  }
851
756
  ) })
852
757
  }
@@ -855,8 +760,8 @@ function CallControlPanel({ onDataChange }) {
855
760
  ]
856
761
  }
857
762
  ),
858
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Status", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
859
- import_material.Button,
763
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Tooltip, { title: "Status", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
764
+ import_material2.Button,
860
765
  {
861
766
  sx: {
862
767
  fontWeight: "bold",
@@ -868,8 +773,8 @@ function CallControlPanel({ onDataChange }) {
868
773
  },
869
774
  color: getStatusColor(state.status),
870
775
  variant: "outlined",
871
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
872
- import_material.Typography,
776
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
777
+ import_material2.Typography,
873
778
  {
874
779
  width: 50,
875
780
  variant: "body2",
@@ -885,8 +790,8 @@ function CallControlPanel({ onDataChange }) {
885
790
  ]
886
791
  }
887
792
  ),
888
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
889
- import_material.Box,
793
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
794
+ import_material2.Box,
890
795
  {
891
796
  sx: {
892
797
  display: "flex",
@@ -895,8 +800,8 @@ function CallControlPanel({ onDataChange }) {
895
800
  alignItems: "center"
896
801
  },
897
802
  children: [
898
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Redial", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
899
- import_material.IconButton,
803
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Tooltip, { title: "Redial", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
804
+ import_material2.IconButton,
900
805
  {
901
806
  onClick: (e) => {
902
807
  e.stopPropagation();
@@ -908,11 +813,11 @@ function CallControlPanel({ onDataChange }) {
908
813
  bgcolor: "warning"
909
814
  }
910
815
  },
911
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Cached, {})
816
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.Cached, {})
912
817
  }
913
818
  ) }),
914
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: state.isHolding ? "Resume" : "Hold", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
915
- import_material.IconButton,
819
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Tooltip, { title: state.isHolding ? "Resume" : "Hold", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
820
+ import_material2.IconButton,
916
821
  {
917
822
  onClick: (e) => {
918
823
  e.stopPropagation();
@@ -922,11 +827,11 @@ function CallControlPanel({ onDataChange }) {
922
827
  sx: {
923
828
  bgcolor: state.isHolding ? "warning.info" : "action.hover"
924
829
  },
925
- children: state.isHolding ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.PlayCircle, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.PauseCircle, {})
830
+ children: state.isHolding ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.PlayCircle, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.PauseCircle, {})
926
831
  }
927
832
  ) }),
928
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: state.isMuted ? "Unmute" : "Mute", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
929
- import_material.IconButton,
833
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Tooltip, { title: state.isMuted ? "Unmute" : "Mute", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
834
+ import_material2.IconButton,
930
835
  {
931
836
  onClick: (e) => {
932
837
  e.stopPropagation();
@@ -936,11 +841,11 @@ function CallControlPanel({ onDataChange }) {
936
841
  sx: {
937
842
  bgcolor: state.isMuted ? "error.info" : "action.hover"
938
843
  },
939
- children: state.isMuted ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.MicOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Mic, {})
844
+ children: state.isMuted ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.MicOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.Mic, {})
940
845
  }
941
846
  ) }),
942
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Queue", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
943
- import_material.IconButton,
847
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Tooltip, { title: "Queue", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
848
+ import_material2.IconButton,
944
849
  {
945
850
  onClick: (e) => {
946
851
  e.stopPropagation();
@@ -953,25 +858,28 @@ function CallControlPanel({ onDataChange }) {
953
858
  bgcolor: "warning"
954
859
  }
955
860
  },
956
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Layers, {})
861
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.Layers, {})
957
862
  }
958
863
  ) }),
959
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "More Options", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
960
- import_material.IconButton,
864
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Tooltip, { title: "Conference Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
865
+ import_material2.IconButton,
961
866
  {
962
867
  onClick: (e) => {
963
868
  e.stopPropagation();
964
- handleMoreOptions(e);
869
+ setOpen(true);
965
870
  },
871
+ color: "default",
966
872
  sx: {
967
873
  bgcolor: "action.hover",
968
- "&:hover": { bgcolor: "action.selected" }
874
+ "&:hover": {
875
+ bgcolor: "warning"
876
+ }
969
877
  },
970
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.MoreVert, {})
878
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.Groups, {})
971
879
  }
972
880
  ) }),
973
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: state.callStartTime ? "End Call" : "Start Call", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
974
- import_material.IconButton,
881
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Tooltip, { title: state.callStartTime ? "End Call" : "Start Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
882
+ import_material2.IconButton,
975
883
  {
976
884
  onClick: (e) => {
977
885
  e.stopPropagation();
@@ -987,7 +895,7 @@ function CallControlPanel({ onDataChange }) {
987
895
  bgcolor: state.callStartTime ? "error.light" : "gray"
988
896
  }
989
897
  },
990
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.CallEnd, {})
898
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.CallEnd, {})
991
899
  }
992
900
  ) })
993
901
  ]
@@ -998,72 +906,94 @@ function CallControlPanel({ onDataChange }) {
998
906
  )
999
907
  }
1000
908
  ) }),
1001
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Fade, { in: true, timeout: 300, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1002
- import_material.Paper,
909
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Fade, { in: true, timeout: 300, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
910
+ import_material2.Paper,
1003
911
  {
1004
- ref: xdragRef,
1005
- elevation: xisDragging ? 2 : 1,
912
+ ref: iframeDragRef,
913
+ elevation: iframeIsDragging ? 4 : 1,
1006
914
  sx: {
1007
915
  position: "fixed",
1008
- left: xposition.x,
1009
- top: xposition.y,
916
+ left: iframePosition.x,
917
+ top: iframePosition.y,
1010
918
  p: 1,
1011
919
  height: "auto",
1012
- // borderRadius: 3,
920
+ borderRadius: 2,
1013
921
  bgcolor: "background.paper",
1014
- cursor: xisDragging ? "grabbing" : "grab",
922
+ // cursor: iframeIsDragging ? "grabbing" : "grab",
1015
923
  transition: theme.transitions.create(["box-shadow", "transform"], {
1016
924
  duration: theme.transitions.duration.short
1017
925
  }),
1018
926
  // minWidth: 320,
1019
927
  userSelect: "none"
1020
928
  },
1021
- onMouseDown: xhandleMouseDown,
1022
- onTouchStart: xhandleTouchStart,
1023
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { sx: {
1024
- display: "flex",
1025
- alignItems: "center",
1026
- justifyContent: "center",
1027
- flexDirection: "column"
1028
- }, children: [
1029
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1030
- import_material.Box,
1031
- {
1032
- sx: {
1033
- width: "100%",
1034
- height: "auto",
1035
- display: "flex",
1036
- alignItems: "center",
1037
- justifyContent: "space-between"
1038
- },
1039
- children: [
1040
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.DragIndicator, { sx: {
1041
- transform: "rotate(90deg)"
1042
- } }),
1043
- " ",
1044
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Close, {}) })
1045
- ]
1046
- }
1047
- ),
1048
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1049
- "iframe",
1050
- {
1051
- src: "https://h68.deepijatel.in/ConVoxCCS",
1052
- height: 300
1053
- }
1054
- )
1055
- ] })
929
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
930
+ import_material2.Box,
931
+ {
932
+ sx: {
933
+ display: "flex",
934
+ alignItems: "center",
935
+ justifyContent: "center",
936
+ flexDirection: "column"
937
+ },
938
+ children: [
939
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
940
+ import_material2.Box,
941
+ {
942
+ sx: {
943
+ width: "100%",
944
+ height: "auto",
945
+ display: "flex",
946
+ alignItems: "center",
947
+ justifyContent: "space-between"
948
+ },
949
+ children: [
950
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
951
+ import_material2.IconButton,
952
+ {
953
+ component: "div",
954
+ sx: {
955
+ cursor: "all-scroll"
956
+ },
957
+ onMouseDown: iframeHandleMouseDown,
958
+ onTouchStart: iframeHandleTouchStart,
959
+ children: [
960
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
961
+ import_icons_material2.DragIndicator,
962
+ {
963
+ sx: {
964
+ transform: "rotate(90deg)"
965
+ }
966
+ }
967
+ ),
968
+ " "
969
+ ]
970
+ }
971
+ ),
972
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.IconButton, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.Close, {}) })
973
+ ]
974
+ }
975
+ ),
976
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
977
+ "iframe",
978
+ {
979
+ src: "https://h68.deepijatel.in/ConVoxCCS/iframe?agent_id=test&process_id=101",
980
+ height: 300
981
+ }
982
+ )
983
+ ]
984
+ }
985
+ )
1056
986
  }
1057
987
  ) }),
1058
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1059
- import_material.Menu,
988
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
989
+ import_material2.Menu,
1060
990
  {
1061
991
  anchorEl: dialerAnchorEl,
1062
992
  open: Boolean(dialerAnchorEl),
1063
993
  onClose: handleCloseDialer,
1064
994
  onClick: (e) => e.stopPropagation(),
1065
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1066
- import_material.Box,
995
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
996
+ import_material2.Box,
1067
997
  {
1068
998
  sx: {
1069
999
  all: "unset",
@@ -1073,8 +1003,8 @@ function CallControlPanel({ onDataChange }) {
1073
1003
  }
1074
1004
  },
1075
1005
  children: [
1076
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1077
- import_material.TextField,
1006
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1007
+ import_material2.TextField,
1078
1008
  {
1079
1009
  size: "small",
1080
1010
  value: phoneNumber,
@@ -1084,14 +1014,14 @@ function CallControlPanel({ onDataChange }) {
1084
1014
  }
1085
1015
  }
1086
1016
  ),
1087
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1088
- import_material.IconButton,
1017
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1018
+ import_material2.IconButton,
1089
1019
  {
1090
1020
  color: "info",
1091
1021
  onClick: () => {
1092
1022
  handleStartCall(phoneNumber);
1093
1023
  },
1094
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Phone, { color: "success" })
1024
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.Phone, { color: "success" })
1095
1025
  }
1096
1026
  )
1097
1027
  ]
@@ -1099,66 +1029,58 @@ function CallControlPanel({ onDataChange }) {
1099
1029
  )
1100
1030
  }
1101
1031
  ),
1102
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1103
- import_material.Menu,
1032
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1033
+ import_material2.Menu,
1104
1034
  {
1105
1035
  anchorEl,
1106
1036
  open: Boolean(anchorEl),
1107
1037
  onClose: handleMoreClose,
1108
1038
  onClick: (e) => e.stopPropagation(),
1109
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1110
- import_material.Box,
1039
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1040
+ import_material2.Box,
1111
1041
  {
1112
1042
  sx: {
1113
- all: "unset",
1043
+ // all: "unset",
1044
+ display: "flex",
1045
+ justifyContent: "flex-start",
1046
+ flexDirection: "column",
1114
1047
  padding: "0px 10px",
1115
1048
  "&hover": {
1116
1049
  backgroundColor: "white"
1117
1050
  }
1118
1051
  },
1119
1052
  children: [
1120
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Badge, { badgeContent: 100, color: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1121
- import_material.Chip,
1053
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1054
+ import_material2.Chip,
1122
1055
  {
1123
- avatar: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Avatar, { children: "Q" }),
1056
+ icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.Layers, { color: "secondary" }),
1124
1057
  variant: "outlined",
1125
- label: "Waiting"
1058
+ label: "Waiting - 25",
1059
+ sx: {
1060
+ margin: "4px 2px"
1061
+ }
1126
1062
  }
1127
- ) }),
1128
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1129
- import_material.Badge,
1063
+ ),
1064
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1065
+ import_material2.Chip,
1130
1066
  {
1131
- badgeContent: 100,
1132
- color: "warning",
1067
+ icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.Pending, { color: "info" }),
1068
+ label: "Pending - 99+",
1069
+ variant: "outlined",
1133
1070
  sx: {
1134
- margin: "10px"
1135
- },
1136
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1137
- import_material.Chip,
1138
- {
1139
- avatar: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Avatar, { children: "C" }),
1140
- label: "Pending",
1141
- variant: "outlined"
1142
- }
1143
- )
1071
+ margin: "4px 2px"
1072
+ }
1144
1073
  }
1145
1074
  ),
1146
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1147
- import_material.Badge,
1075
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1076
+ import_material2.Chip,
1148
1077
  {
1149
- badgeContent: 100,
1150
- color: "info",
1078
+ icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.Upcoming, { color: "success" }),
1079
+ variant: "outlined",
1080
+ label: "Upcoming - 66",
1151
1081
  sx: {
1152
- margin: "10px"
1153
- },
1154
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1155
- import_material.Chip,
1156
- {
1157
- avatar: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Avatar, { children: "C" }),
1158
- variant: "outlined",
1159
- label: "Upcoming"
1160
- }
1161
- )
1082
+ margin: "4px 2px"
1083
+ }
1162
1084
  }
1163
1085
  )
1164
1086
  ]
@@ -1166,37 +1088,470 @@ function CallControlPanel({ onDataChange }) {
1166
1088
  )
1167
1089
  }
1168
1090
  ),
1169
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1170
- import_material.Menu,
1091
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1092
+ import_material2.Menu,
1171
1093
  {
1172
1094
  anchorEl: moreOptionsAnchorEl,
1173
1095
  open: Boolean(moreOptionsAnchorEl),
1174
1096
  onClose: handleMoreOptionsClose,
1175
1097
  onClick: (e) => e.stopPropagation(),
1176
1098
  children: [
1177
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.MenuItem, { onClick: () => setMoreOptionsAnchorEl(null), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
1178
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.TransferWithinAStation, { color: "secondary" }),
1179
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "Call Transfer" })
1180
- ] }) }),
1181
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.MenuItem, { onClick: () => setMoreOptionsAnchorEl(null), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
1182
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Groups, { color: "secondary" }),
1183
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "Conference Call" })
1099
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.MenuItem, { onClick: () => setMoreOptionsAnchorEl(null), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
1100
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.TransferWithinAStation, { color: "secondary" }),
1101
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { children: "Call Transfer" })
1184
1102
  ] }) }),
1185
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.MenuItem, { onClick: () => handleStatusChange("break"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
1186
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.FreeBreakfast, { color: "secondary" }),
1187
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "Break" })
1103
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1104
+ import_material2.MenuItem,
1105
+ {
1106
+ onClick: () => {
1107
+ setOpen(true);
1108
+ setMoreOptionsAnchorEl(null);
1109
+ },
1110
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
1111
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.Groups, { color: "secondary" }),
1112
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { children: "Conference Call" })
1113
+ ] })
1114
+ }
1115
+ ),
1116
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.MenuItem, { onClick: () => handleStatusChange("break"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
1117
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.FreeBreakfast, { color: "secondary" }),
1118
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { children: "Break" })
1188
1119
  ] }) }),
1189
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.MenuItem, { onClick: () => handleStatusChange("idle"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
1190
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.AirlineSeatIndividualSuite, { color: "secondary" }),
1191
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "Idle" })
1120
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.MenuItem, { onClick: () => handleStatusChange("idle"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
1121
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material2.AirlineSeatIndividualSuite, { color: "secondary" }),
1122
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { children: "Idle" })
1192
1123
  ] }) })
1193
1124
  ]
1194
1125
  }
1126
+ ),
1127
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1128
+ ReusableDialog,
1129
+ {
1130
+ open,
1131
+ setOpen,
1132
+ agentName: "Agent_Ravi",
1133
+ lines: [
1134
+ { status: "ON CALL", type: "External", phone: "7032491730" },
1135
+ { status: "IDLE", type: "Internal", phone: "" },
1136
+ { status: "IDLE", type: "External", phone: "" },
1137
+ { status: "IDLE", type: "Internal", phone: "" },
1138
+ { status: "IDLE", type: "External", phone: "" }
1139
+ ],
1140
+ onConference: () => console.log("Conference"),
1141
+ onExit: () => console.log("Exit"),
1142
+ onTransfer: () => console.log("Transfer"),
1143
+ onEndAllCalls: () => console.log("End All Calls")
1144
+ }
1195
1145
  )
1196
1146
  ] });
1197
1147
  }
1198
1148
 
1199
- // src/index.ts
1149
+ // call-control-sdk/lib/hooks/eventsTracker.ts
1150
+ var EventTrackerSDK = class {
1151
+ constructor() {
1152
+ __publicField(this, "config", null);
1153
+ __publicField(this, "ticketId", null);
1154
+ __publicField(this, "baseUrl", "");
1155
+ __publicField(this, "eventQueue", []);
1156
+ __publicField(this, "isOnline", true);
1157
+ __publicField(this, "retryQueue", []);
1158
+ __publicField(this, "flushTimer", null);
1159
+ }
1160
+ /**
1161
+ * Initialize the EventTracker SDK
1162
+ * @param config Configuration object
1163
+ */
1164
+ async init(config) {
1165
+ this.config = __spreadValues({
1166
+ autoTrack: true,
1167
+ retryAttempts: 3,
1168
+ queueSize: 100,
1169
+ flushInterval: 5e3
1170
+ }, config);
1171
+ this.baseUrl = config.baseUrl || (typeof window !== "undefined" ? window.location.origin : "");
1172
+ this.setupNetworkDetection();
1173
+ const ticket = await this.createTicket();
1174
+ this.startPeriodicFlush();
1175
+ console.log("EventTracker SDK initialized successfully");
1176
+ return ticket;
1177
+ }
1178
+ /**
1179
+ * Check if the SDK is initialized
1180
+ */
1181
+ isInitialized() {
1182
+ return this.config !== null && this.ticketId !== null;
1183
+ }
1184
+ /**
1185
+ * Get the current configuration
1186
+ */
1187
+ getConfig() {
1188
+ return this.config;
1189
+ }
1190
+ /**
1191
+ * Get the current ticket ID
1192
+ */
1193
+ getTicketId() {
1194
+ return this.ticketId;
1195
+ }
1196
+ /**
1197
+ * Create a new ticket
1198
+ */
1199
+ async createTicket() {
1200
+ if (!this.config) {
1201
+ throw new Error("EventTracker not initialized");
1202
+ }
1203
+ try {
1204
+ const response = await this.makeRequest("/api/v1/et/init", {
1205
+ method: "POST",
1206
+ headers: {
1207
+ "Content-Type": "application/json",
1208
+ "X-API-Key": this.config.apiKey
1209
+ },
1210
+ body: JSON.stringify({
1211
+ agentId: this.config.agentId,
1212
+ sessionId: this.config.sessionId
1213
+ })
1214
+ });
1215
+ if (!response.ok) {
1216
+ throw new Error(
1217
+ `Failed to initialize: ${response.status} ${response.statusText}`
1218
+ );
1219
+ }
1220
+ const data = await response.json();
1221
+ this.ticketId = data.ticketId;
1222
+ if (this.config.autoTrack) {
1223
+ this.setupAutoTracking();
1224
+ }
1225
+ return this.ticketId;
1226
+ } catch (error) {
1227
+ console.error("EventTracker initialization failed:", error);
1228
+ throw error;
1229
+ }
1230
+ }
1231
+ /**
1232
+ * Log an event
1233
+ * @param eventType The type of event
1234
+ * @param eventData Optional event data
1235
+ */
1236
+ async logEvent(eventType, eventData) {
1237
+ if (!this.config || !this.ticketId) {
1238
+ console.warn("EventTracker not initialized, skipping event:", eventType);
1239
+ return;
1240
+ }
1241
+ const event = {
1242
+ eventType,
1243
+ eventData,
1244
+ timestamp: Date.now()
1245
+ };
1246
+ this.eventQueue.push(event);
1247
+ if (this.eventQueue.length > (this.config.queueSize || 100)) {
1248
+ this.eventQueue.shift();
1249
+ }
1250
+ if (this.isOnline) {
1251
+ try {
1252
+ await this.sendEvent(event);
1253
+ } catch (error) {
1254
+ console.warn("Failed to send event, will retry later:", error);
1255
+ }
1256
+ }
1257
+ }
1258
+ /**
1259
+ * Send an event to the server
1260
+ */
1261
+ async sendEvent(event) {
1262
+ if (!this.config || !this.ticketId) return;
1263
+ try {
1264
+ const response = await this.makeRequest("/api/v1/et/event", {
1265
+ method: "POST",
1266
+ headers: {
1267
+ "Content-Type": "application/json",
1268
+ "X-API-Key": this.config.apiKey
1269
+ },
1270
+ body: JSON.stringify({
1271
+ ticketId: this.ticketId,
1272
+ eventType: event.eventType,
1273
+ eventData: event.eventData
1274
+ })
1275
+ });
1276
+ if (!response.ok) {
1277
+ throw new Error(
1278
+ `Failed to log event: ${response.status} ${response.statusText}`
1279
+ );
1280
+ }
1281
+ const index = this.eventQueue.findIndex(
1282
+ (e) => e.timestamp === event.timestamp
1283
+ );
1284
+ if (index > -1) {
1285
+ this.eventQueue.splice(index, 1);
1286
+ }
1287
+ } catch (error) {
1288
+ console.error("Event logging failed:", error);
1289
+ this.retryQueue.push(() => this.sendEvent(event));
1290
+ }
1291
+ }
1292
+ /**
1293
+ * Close the current ticket
1294
+ */
1295
+ async closeTicket() {
1296
+ if (!this.config || !this.ticketId) {
1297
+ throw new Error("EventTracker not initialized");
1298
+ }
1299
+ await this.flush();
1300
+ try {
1301
+ const response = await this.makeRequest("/api/v1/et/close", {
1302
+ method: "POST",
1303
+ headers: {
1304
+ "Content-Type": "application/json",
1305
+ "X-API-Key": this.config.apiKey
1306
+ },
1307
+ body: JSON.stringify({
1308
+ ticketId: this.ticketId
1309
+ })
1310
+ });
1311
+ if (!response.ok) {
1312
+ throw new Error(
1313
+ `Failed to close ticket: ${response.status} ${response.statusText}`
1314
+ );
1315
+ }
1316
+ this.ticketId = null;
1317
+ this.stopPeriodicFlush();
1318
+ console.log("Ticket closed successfully");
1319
+ } catch (error) {
1320
+ console.error("Ticket close failed:", error);
1321
+ throw error;
1322
+ }
1323
+ }
1324
+ /**
1325
+ * Flush all pending events
1326
+ */
1327
+ async flush() {
1328
+ if (!this.isOnline || this.eventQueue.length === 0) return;
1329
+ const eventsToFlush = [...this.eventQueue];
1330
+ for (const event of eventsToFlush) {
1331
+ await this.sendEvent(event);
1332
+ }
1333
+ const retryItems = [...this.retryQueue];
1334
+ this.retryQueue = [];
1335
+ for (const retryFn of retryItems) {
1336
+ try {
1337
+ await retryFn();
1338
+ } catch (error) {
1339
+ console.error("Retry failed:", error);
1340
+ }
1341
+ }
1342
+ }
1343
+ /**
1344
+ * Make an HTTP request with retry logic
1345
+ */
1346
+ async makeRequest(url, options) {
1347
+ var _a;
1348
+ const fullUrl = `${this.baseUrl}${url}`;
1349
+ const maxRetries = ((_a = this.config) == null ? void 0 : _a.retryAttempts) || 3;
1350
+ for (let attempt = 1; attempt <= maxRetries; attempt++) {
1351
+ try {
1352
+ const response = await fetch(fullUrl, options);
1353
+ return response;
1354
+ } catch (error) {
1355
+ if (attempt === maxRetries) {
1356
+ throw error;
1357
+ }
1358
+ const delay = Math.min(1e3 * Math.pow(2, attempt - 1), 1e4);
1359
+ await new Promise((resolve) => setTimeout(resolve, delay));
1360
+ }
1361
+ }
1362
+ throw new Error("Max retries exceeded");
1363
+ }
1364
+ /**
1365
+ * Set up automatic event tracking
1366
+ */
1367
+ setupAutoTracking() {
1368
+ var _a;
1369
+ if (typeof window === "undefined" || !((_a = this.config) == null ? void 0 : _a.autoTrack)) return;
1370
+ const autoTrackConfig = this.config.autoTrack === true ? {} : this.config.autoTrack;
1371
+ if (autoTrackConfig.pageVisits !== false) {
1372
+ this.logEvent("pageVisit", {
1373
+ url: window.location.href,
1374
+ title: document.title,
1375
+ referrer: document.referrer,
1376
+ userAgent: navigator.userAgent,
1377
+ viewport: {
1378
+ width: window.innerWidth,
1379
+ height: window.innerHeight
1380
+ },
1381
+ timestamp: (/* @__PURE__ */ new Date()).toISOString()
1382
+ }).catch((error) => console.warn("Failed to track page visit:", error));
1383
+ }
1384
+ if (autoTrackConfig.clicks !== false) {
1385
+ document.addEventListener("click", (event) => {
1386
+ var _a2;
1387
+ const target = event.target;
1388
+ if (target.tagName === "BUTTON" || target.tagName === "A" || target.onclick || target.getAttribute("role") === "button" || target instanceof HTMLButtonElement && target.type === "button") {
1389
+ this.logEvent("click", {
1390
+ element: target.tagName,
1391
+ text: (_a2 = target.textContent) == null ? void 0 : _a2.trim().substring(0, 100),
1392
+ // Limit text length
1393
+ href: target.getAttribute("href"),
1394
+ id: target.id,
1395
+ className: target.className,
1396
+ role: target.getAttribute("role"),
1397
+ position: {
1398
+ x: event.clientX,
1399
+ y: event.clientY
1400
+ },
1401
+ timestamp: (/* @__PURE__ */ new Date()).toISOString()
1402
+ }).catch((error) => console.warn("Failed to track click:", error));
1403
+ }
1404
+ });
1405
+ }
1406
+ if (autoTrackConfig.forms !== false) {
1407
+ document.addEventListener("submit", (event) => {
1408
+ const target = event.target;
1409
+ const formData = new FormData(target);
1410
+ const formFields = {};
1411
+ formData.forEach((value, key) => {
1412
+ formFields[key] = value.toString();
1413
+ });
1414
+ this.logEvent("formSubmission", {
1415
+ formId: target.id,
1416
+ action: target.action,
1417
+ method: target.method,
1418
+ fields: Object.keys(formFields),
1419
+ fieldCount: Object.keys(formFields).length,
1420
+ timestamp: (/* @__PURE__ */ new Date()).toISOString()
1421
+ }).catch(
1422
+ (error) => console.warn("Failed to track form submission:", error)
1423
+ );
1424
+ });
1425
+ }
1426
+ if (autoTrackConfig.inputs !== false) {
1427
+ let inputTimer;
1428
+ document.addEventListener("input", (event) => {
1429
+ const target = event.target;
1430
+ if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT") {
1431
+ clearTimeout(inputTimer);
1432
+ inputTimer = setTimeout(() => {
1433
+ var _a2;
1434
+ this.logEvent("fieldChange", {
1435
+ element: target.tagName,
1436
+ type: target.getAttribute("type"),
1437
+ name: target.getAttribute("name"),
1438
+ id: target.id,
1439
+ valueLength: ((_a2 = target.value) == null ? void 0 : _a2.length) || 0,
1440
+ timestamp: (/* @__PURE__ */ new Date()).toISOString()
1441
+ }).catch(
1442
+ (error) => console.warn("Failed to track field change:", error)
1443
+ );
1444
+ }, 1e3);
1445
+ }
1446
+ });
1447
+ }
1448
+ const sessionStartTime = Date.now();
1449
+ window.addEventListener("beforeunload", () => {
1450
+ const sessionDuration = Date.now() - sessionStartTime;
1451
+ this.logEvent("pageUnload", {
1452
+ url: window.location.href,
1453
+ sessionDuration,
1454
+ timestamp: (/* @__PURE__ */ new Date()).toISOString()
1455
+ });
1456
+ if (this.ticketId) {
1457
+ navigator.sendBeacon(
1458
+ `${this.baseUrl}/api/v1/et/close`,
1459
+ JSON.stringify({
1460
+ ticketId: this.ticketId
1461
+ })
1462
+ );
1463
+ }
1464
+ });
1465
+ if (autoTrackConfig.visibility !== false) {
1466
+ document.addEventListener("visibilitychange", () => {
1467
+ this.logEvent("visibilityChange", {
1468
+ hidden: document.hidden,
1469
+ visibilityState: document.visibilityState,
1470
+ timestamp: (/* @__PURE__ */ new Date()).toISOString()
1471
+ });
1472
+ });
1473
+ }
1474
+ if (autoTrackConfig.errors !== false) {
1475
+ window.addEventListener("error", (event) => {
1476
+ this.logEvent("jsError", {
1477
+ message: event.message,
1478
+ filename: event.filename,
1479
+ lineno: event.lineno,
1480
+ colno: event.colno,
1481
+ timestamp: (/* @__PURE__ */ new Date()).toISOString()
1482
+ });
1483
+ });
1484
+ window.addEventListener("unhandledrejection", (event) => {
1485
+ var _a2;
1486
+ this.logEvent("unhandledRejection", {
1487
+ reason: (_a2 = event.reason) == null ? void 0 : _a2.toString(),
1488
+ timestamp: (/* @__PURE__ */ new Date()).toISOString()
1489
+ });
1490
+ });
1491
+ }
1492
+ if (autoTrackConfig.performance !== false && typeof window.performance !== "undefined" && window.performance.navigation) {
1493
+ window.addEventListener("load", () => {
1494
+ setTimeout(() => {
1495
+ const navigation = window.performance.navigation;
1496
+ const timing = window.performance.timing;
1497
+ this.logEvent("performanceMetrics", {
1498
+ navigationTime: timing.navigationStart,
1499
+ loadTime: timing.loadEventEnd - timing.navigationStart,
1500
+ domReady: timing.domContentLoadedEventEnd - timing.navigationStart,
1501
+ renderTime: timing.loadEventEnd - timing.domContentLoadedEventEnd,
1502
+ navigationType: navigation.type,
1503
+ redirectCount: navigation.redirectCount,
1504
+ timestamp: (/* @__PURE__ */ new Date()).toISOString()
1505
+ });
1506
+ }, 1e3);
1507
+ });
1508
+ }
1509
+ }
1510
+ /**
1511
+ * Set up network detection
1512
+ */
1513
+ setupNetworkDetection() {
1514
+ if (typeof window === "undefined") return;
1515
+ this.isOnline = navigator.onLine;
1516
+ window.addEventListener("online", () => {
1517
+ this.isOnline = true;
1518
+ console.log("EventTracker: Back online, flushing queued events");
1519
+ this.flush();
1520
+ });
1521
+ window.addEventListener("offline", () => {
1522
+ this.isOnline = false;
1523
+ console.log("EventTracker: Offline, queueing events");
1524
+ });
1525
+ }
1526
+ /**
1527
+ * Start periodic flush timer
1528
+ */
1529
+ startPeriodicFlush() {
1530
+ var _a;
1531
+ if (this.flushTimer) {
1532
+ clearInterval(this.flushTimer);
1533
+ }
1534
+ const interval = ((_a = this.config) == null ? void 0 : _a.flushInterval) || 5e3;
1535
+ this.flushTimer = setInterval(() => {
1536
+ this.flush();
1537
+ }, interval);
1538
+ }
1539
+ /**
1540
+ * Stop periodic flush timer
1541
+ */
1542
+ stopPeriodicFlush() {
1543
+ if (this.flushTimer) {
1544
+ clearInterval(this.flushTimer);
1545
+ this.flushTimer = null;
1546
+ }
1547
+ }
1548
+ };
1549
+ var eventTracker = new EventTrackerSDK();
1550
+ if (typeof window !== "undefined") {
1551
+ window.EventTracker = eventTracker;
1552
+ }
1553
+
1554
+ // call-control-sdk/index.ts
1200
1555
  function initSDK({
1201
1556
  apiKey,
1202
1557
  tenantId,