call-control-sdk 2.0.0 → 2.2.0

package/dist/index.js

@@ -1,9 +1,25 @@
 "use strict";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -23,12 +39,416 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 var index_exports = {};
 __export(index_exports, {
   CallControlPanel: () => CallControlPanel,
-  initCallSDK: () => initCallSDK,
-  updateCallData: () => updateCallData
+  initSDK: () => initSDK
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/lib/sdk-state.ts
+// src/lib/hooks/eventsTracker.ts
+var EventTrackerSDK = class {
+  constructor() {
+    __publicField(this, "config", null);
+    __publicField(this, "ticketId", null);
+    __publicField(this, "baseUrl", "");
+    __publicField(this, "eventQueue", []);
+    __publicField(this, "isOnline", true);
+    __publicField(this, "retryQueue", []);
+    __publicField(this, "flushTimer", null);
+  }
+  /**
+   * Initialize the EventTracker SDK
+   * @param config Configuration object
+   */
+  async init(config) {
+    this.config = __spreadValues({
+      autoTrack: true,
+      retryAttempts: 3,
+      queueSize: 100,
+      flushInterval: 5e3
+    }, config);
+    this.baseUrl = config.baseUrl || (typeof window !== "undefined" ? window.location.origin : "");
+    this.setupNetworkDetection();
+    const ticket = await this.createTicket();
+    this.startPeriodicFlush();
+    console.log("EventTracker SDK initialized successfully");
+    return ticket;
+  }
+  /**
+   * Check if the SDK is initialized
+   */
+  isInitialized() {
+    return this.config !== null && this.ticketId !== null;
+  }
+  /**
+   * Get the current configuration
+   */
+  getConfig() {
+    return this.config;
+  }
+  /**
+   * Get the current ticket ID
+   */
+  getTicketId() {
+    return this.ticketId;
+  }
+  /**
+   * Create a new ticket
+   */
+  async createTicket() {
+    if (!this.config) {
+      throw new Error("EventTracker not initialized");
+    }
+    try {
+      const response = await this.makeRequest("/api/v1/et/init", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-API-Key": this.config.apiKey
+        },
+        body: JSON.stringify({
+          agentId: this.config.agentId,
+          sessionId: this.config.sessionId
+        })
+      });
+      if (!response.ok) {
+        throw new Error(
+          `Failed to initialize: ${response.status} ${response.statusText}`
+        );
+      }
+      const data = await response.json();
+      this.ticketId = data.ticketId;
+      if (this.config.autoTrack) {
+        this.setupAutoTracking();
+      }
+      return this.ticketId;
+    } catch (error) {
+      console.error("EventTracker initialization failed:", error);
+      throw error;
+    }
+  }
+  /**
+   * Log an event
+   * @param eventType The type of event
+   * @param eventData Optional event data
+   */
+  async logEvent(eventType, eventData) {
+    if (!this.config || !this.ticketId) {
+      console.warn("EventTracker not initialized, skipping event:", eventType);
+      return;
+    }
+    const event = {
+      eventType,
+      eventData,
+      timestamp: Date.now()
+    };
+    this.eventQueue.push(event);
+    if (this.eventQueue.length > (this.config.queueSize || 100)) {
+      this.eventQueue.shift();
+    }
+    if (this.isOnline) {
+      try {
+        await this.sendEvent(event);
+      } catch (error) {
+        console.warn("Failed to send event, will retry later:", error);
+      }
+    }
+  }
+  /**
+   * Send an event to the server
+   */
+  async sendEvent(event) {
+    if (!this.config || !this.ticketId) return;
+    try {
+      const response = await this.makeRequest("/api/v1/et/event", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-API-Key": this.config.apiKey
+        },
+        body: JSON.stringify({
+          ticketId: this.ticketId,
+          eventType: event.eventType,
+          eventData: event.eventData
+        })
+      });
+      if (!response.ok) {
+        throw new Error(
+          `Failed to log event: ${response.status} ${response.statusText}`
+        );
+      }
+      const index = this.eventQueue.findIndex(
+        (e) => e.timestamp === event.timestamp
+      );
+      if (index > -1) {
+        this.eventQueue.splice(index, 1);
+      }
+    } catch (error) {
+      console.error("Event logging failed:", error);
+      this.retryQueue.push(() => this.sendEvent(event));
+    }
+  }
+  /**
+   * Close the current ticket
+   */
+  async closeTicket() {
+    if (!this.config || !this.ticketId) {
+      throw new Error("EventTracker not initialized");
+    }
+    await this.flush();
+    try {
+      const response = await this.makeRequest("/api/v1/et/close", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-API-Key": this.config.apiKey
+        },
+        body: JSON.stringify({
+          ticketId: this.ticketId
+        })
+      });
+      if (!response.ok) {
+        throw new Error(
+          `Failed to close ticket: ${response.status} ${response.statusText}`
+        );
+      }
+      this.ticketId = null;
+      this.stopPeriodicFlush();
+      console.log("Ticket closed successfully");
+    } catch (error) {
+      console.error("Ticket close failed:", error);
+      throw error;
+    }
+  }
+  /**
+   * Flush all pending events
+   */
+  async flush() {
+    if (!this.isOnline || this.eventQueue.length === 0) return;
+    const eventsToFlush = [...this.eventQueue];
+    for (const event of eventsToFlush) {
+      await this.sendEvent(event);
+    }
+    const retryItems = [...this.retryQueue];
+    this.retryQueue = [];
+    for (const retryFn of retryItems) {
+      try {
+        await retryFn();
+      } catch (error) {
+        console.error("Retry failed:", error);
+      }
+    }
+  }
+  /**
+   * Make an HTTP request with retry logic
+   */
+  async makeRequest(url, options) {
+    var _a;
+    const fullUrl = `${this.baseUrl}${url}`;
+    const maxRetries = ((_a = this.config) == null ? void 0 : _a.retryAttempts) || 3;
+    for (let attempt = 1; attempt <= maxRetries; attempt++) {
+      try {
+        const response = await fetch(fullUrl, options);
+        return response;
+      } catch (error) {
+        if (attempt === maxRetries) {
+          throw error;
+        }
+        const delay = Math.min(1e3 * Math.pow(2, attempt - 1), 1e4);
+        await new Promise((resolve) => setTimeout(resolve, delay));
+      }
+    }
+    throw new Error("Max retries exceeded");
+  }
+  /**
+   * Set up automatic event tracking
+   */
+  setupAutoTracking() {
+    var _a;
+    if (typeof window === "undefined" || !((_a = this.config) == null ? void 0 : _a.autoTrack)) return;
+    const autoTrackConfig = this.config.autoTrack === true ? {} : this.config.autoTrack;
+    if (autoTrackConfig.pageVisits !== false) {
+      this.logEvent("pageVisit", {
+        url: window.location.href,
+        title: document.title,
+        referrer: document.referrer,
+        userAgent: navigator.userAgent,
+        viewport: {
+          width: window.innerWidth,
+          height: window.innerHeight
+        },
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      }).catch((error) => console.warn("Failed to track page visit:", error));
+    }
+    if (autoTrackConfig.clicks !== false) {
+      document.addEventListener("click", (event) => {
+        var _a2;
+        const target = event.target;
+        if (target.tagName === "BUTTON" || target.tagName === "A" || target.onclick || target.getAttribute("role") === "button" || target instanceof HTMLButtonElement && target.type === "button") {
+          this.logEvent("click", {
+            element: target.tagName,
+            text: (_a2 = target.textContent) == null ? void 0 : _a2.trim().substring(0, 100),
+            // Limit text length
+            href: target.getAttribute("href"),
+            id: target.id,
+            className: target.className,
+            role: target.getAttribute("role"),
+            position: {
+              x: event.clientX,
+              y: event.clientY
+            },
+            timestamp: (/* @__PURE__ */ new Date()).toISOString()
+          }).catch((error) => console.warn("Failed to track click:", error));
+        }
+      });
+    }
+    if (autoTrackConfig.forms !== false) {
+      document.addEventListener("submit", (event) => {
+        const target = event.target;
+        const formData = new FormData(target);
+        const formFields = {};
+        formData.forEach((value, key) => {
+          formFields[key] = value.toString();
+        });
+        this.logEvent("formSubmission", {
+          formId: target.id,
+          action: target.action,
+          method: target.method,
+          fields: Object.keys(formFields),
+          fieldCount: Object.keys(formFields).length,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        }).catch(
+          (error) => console.warn("Failed to track form submission:", error)
+        );
+      });
+    }
+    if (autoTrackConfig.inputs !== false) {
+      let inputTimer;
+      document.addEventListener("input", (event) => {
+        const target = event.target;
+        if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT") {
+          clearTimeout(inputTimer);
+          inputTimer = setTimeout(() => {
+            var _a2;
+            this.logEvent("fieldChange", {
+              element: target.tagName,
+              type: target.getAttribute("type"),
+              name: target.getAttribute("name"),
+              id: target.id,
+              valueLength: ((_a2 = target.value) == null ? void 0 : _a2.length) || 0,
+              timestamp: (/* @__PURE__ */ new Date()).toISOString()
+            }).catch(
+              (error) => console.warn("Failed to track field change:", error)
+            );
+          }, 1e3);
+        }
+      });
+    }
+    const sessionStartTime = Date.now();
+    window.addEventListener("beforeunload", () => {
+      const sessionDuration = Date.now() - sessionStartTime;
+      this.logEvent("pageUnload", {
+        url: window.location.href,
+        sessionDuration,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      });
+      if (this.ticketId) {
+        navigator.sendBeacon(
+          `${this.baseUrl}/api/v1/et/close`,
+          JSON.stringify({
+            ticketId: this.ticketId
+          })
+        );
+      }
+    });
+    if (autoTrackConfig.visibility !== false) {
+      document.addEventListener("visibilitychange", () => {
+        this.logEvent("visibilityChange", {
+          hidden: document.hidden,
+          visibilityState: document.visibilityState,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        });
+      });
+    }
+    if (autoTrackConfig.errors !== false) {
+      window.addEventListener("error", (event) => {
+        this.logEvent("jsError", {
+          message: event.message,
+          filename: event.filename,
+          lineno: event.lineno,
+          colno: event.colno,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        });
+      });
+      window.addEventListener("unhandledrejection", (event) => {
+        var _a2;
+        this.logEvent("unhandledRejection", {
+          reason: (_a2 = event.reason) == null ? void 0 : _a2.toString(),
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        });
+      });
+    }
+    if (autoTrackConfig.performance !== false && typeof window.performance !== "undefined" && window.performance.navigation) {
+      window.addEventListener("load", () => {
+        setTimeout(() => {
+          const navigation = window.performance.navigation;
+          const timing = window.performance.timing;
+          this.logEvent("performanceMetrics", {
+            navigationTime: timing.navigationStart,
+            loadTime: timing.loadEventEnd - timing.navigationStart,
+            domReady: timing.domContentLoadedEventEnd - timing.navigationStart,
+            renderTime: timing.loadEventEnd - timing.domContentLoadedEventEnd,
+            navigationType: navigation.type,
+            redirectCount: navigation.redirectCount,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString()
+          });
+        }, 1e3);
+      });
+    }
+  }
+  /**
+   * Set up network detection
+   */
+  setupNetworkDetection() {
+    if (typeof window === "undefined") return;
+    this.isOnline = navigator.onLine;
+    window.addEventListener("online", () => {
+      this.isOnline = true;
+      console.log("EventTracker: Back online, flushing queued events");
+      this.flush();
+    });
+    window.addEventListener("offline", () => {
+      this.isOnline = false;
+      console.log("EventTracker: Offline, queueing events");
+    });
+  }
+  /**
+   * Start periodic flush timer
+   */
+  startPeriodicFlush() {
+    var _a;
+    if (this.flushTimer) {
+      clearInterval(this.flushTimer);
+    }
+    const interval = ((_a = this.config) == null ? void 0 : _a.flushInterval) || 5e3;
+    this.flushTimer = setInterval(() => {
+      this.flush();
+    }, interval);
+  }
+  /**
+   * Stop periodic flush timer
+   */
+  stopPeriodicFlush() {
+    if (this.flushTimer) {
+      clearInterval(this.flushTimer);
+      this.flushTimer = null;
+    }
+  }
+};
+var eventTracker = new EventTrackerSDK();
+if (typeof window !== "undefined") {
+  window.EventTracker = eventTracker;
+}
+
+// src/lib/hooks/sdk-state.ts
 var SDKStateManager = class {
   constructor() {
     __publicField(this, "state");
@@ -45,7 +465,8 @@ var SDKStateManager = class {
       isMuted: false,
       status: "idle",
       callStartTime: null,
-      position: { x: 50, y: 50 },
+      controlPanelPosition: { x: 0, y: 0 },
+      iframePosition: { x: 0, y: 0 },
       callData: {
         mobileNumber: "",
         callReferenceId: "",
@@ -58,14 +479,14 @@ var SDKStateManager = class {
       const stored = localStorage.getItem(this.STORAGE_KEY);
       if (stored) {
         const parsedState = JSON.parse(stored);
-        this.state = {
-          ...this.state,
+        this.state = __spreadProps(__spreadValues({}, this.state), {
           isHolding: parsedState.isHolding || false,
           isMuted: parsedState.isMuted || false,
           status: parsedState.status || "idle",
-          position: parsedState.position || { x: 50, y: 50 },
+          controlPanelPosition: parsedState.controlPanelPosition || { x: 50, y: 50 },
+          iframePosition: parsedState.iframePosition || { x: 50, y: 50 },
           callStartTime: parsedState.callStartTime || null
-        };
+        });
       }
     } catch (error) {
       console.warn("Failed to load SDK state from localStorage:", error);
@@ -77,7 +498,8 @@ var SDKStateManager = class {
         isHolding: this.state.isHolding,
         isMuted: this.state.isMuted,
         status: this.state.status,
-        position: this.state.position,
+        controlPanelPosition: this.state.controlPanelPosition,
+        iframePosition: this.state.iframePosition,
         callStartTime: this.state.callStartTime
       };
       localStorage.setItem(this.STORAGE_KEY, JSON.stringify(persistentState));
@@ -97,7 +519,7 @@ var SDKStateManager = class {
     this.notifyListeners();
   }
   getState() {
-    return { ...this.state };
+    return __spreadValues({}, this.state);
   }
   subscribe(listener) {
     this.listeners.push(listener);
@@ -123,8 +545,13 @@ var SDKStateManager = class {
     this.saveToStorage();
     this.notifyListeners();
   }
-  setPosition(position) {
-    this.state.position = position;
+  setControlPanelPosition(position) {
+    this.state.controlPanelPosition = position;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  setIframePosition(position) {
+    this.state.iframePosition = position;
     this.saveToStorage();
     this.notifyListeners();
   }
@@ -143,7 +570,7 @@ var SDKStateManager = class {
     this.notifyListeners();
   }
   updateCallData(data) {
-    this.state.callData = { ...this.state.callData, ...data };
+    this.state.callData = __spreadValues(__spreadValues({}, this.state.callData), data);
     this.notifyListeners();
   }
 };
@@ -187,7 +614,7 @@ function useDraggable(initialPosition, onPositionChange) {
         y: Math.max(0, Math.min(newPosition.y, viewportHeight - rect.height))
       };
       setPosition(constrainedPosition);
-      onPositionChange?.(constrainedPosition);
+      onPositionChange == null ? void 0 : onPositionChange(constrainedPosition);
     },
     [onPositionChange]
   );
@@ -199,11 +626,10 @@ function useDraggable(initialPosition, onPositionChange) {
       const handleMove = (moveClientX, moveClientY) => {
         const deltaX = moveClientX - dragStart.current.x;
         const deltaY = moveClientY - dragStart.current.y;
-        const newPosition = {
+        updatePosition({
           x: elementStart.current.x + deltaX,
           y: elementStart.current.y + deltaY
-        };
-        updatePosition(newPosition);
+        });
       };
       const handleMouseMove = (e) => {
         e.preventDefault();
@@ -264,11 +690,19 @@ function CallControlPanel({ onDataChange }) {
   const theme = (0, import_material.useTheme)();
   const state = useSDKState();
   const [anchorEl, setAnchorEl] = (0, import_react3.useState)(null);
+  const [phoneNumber, setPhoneNumber] = (0, import_react3.useState)("");
+  const [dialerAnchorEl, setDialerAnchorEl] = (0, import_react3.useState)(
+    null
+  );
   const [moreOptionsAnchorEl, setMoreOptionsAnchorEl] = (0, import_react3.useState)(null);
   const [callDuration, setCallDuration] = (0, import_react3.useState)(0);
   const { position, isDragging, dragRef, handleMouseDown, handleTouchStart } = useDraggable(
-    state.position,
-    (newPosition) => sdkStateManager.setPosition(newPosition)
+    state.controlPanelPosition,
+    (newPosition) => sdkStateManager.setControlPanelPosition(newPosition)
+  );
+  const { position: xposition, isDragging: xisDragging, dragRef: xdragRef, handleMouseDown: xhandleMouseDown, handleTouchStart: xhandleTouchStart } = useDraggable(
+    state.iframePosition,
+    (newPosition) => sdkStateManager.setIframePosition(newPosition)
   );
   (0, import_react3.useEffect)(() => {
     let interval;
@@ -301,9 +735,9 @@ function CallControlPanel({ onDataChange }) {
       case "break":
         return "warning";
       case "idle":
-        return "default";
+        return "info";
       default:
-        return "default";
+        return "info";
     }
   }, []);
   const handleHoldToggle = () => {
@@ -314,13 +748,17 @@ function CallControlPanel({ onDataChange }) {
   };
   const handleStatusChange = (newStatus) => {
     sdkStateManager.setStatus(newStatus);
-    setAnchorEl(null);
+    setMoreOptionsAnchorEl(null);
   };
   const handleEndCall = () => {
     sdkStateManager.endCall();
   };
-  const handleStartCall = () => {
-    sdkStateManager.startCall();
+  const handleStartCall = (number) => {
+    if (number.length !== 10) {
+      alert("Invalid phone number");
+    } else {
+      sdkStateManager.startCall();
+    }
   };
   const handleMoreClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -334,6 +772,15 @@ function CallControlPanel({ onDataChange }) {
   const handleMoreOptionsClose = () => {
     setMoreOptionsAnchorEl(null);
   };
+  const handleOpenDialer = (event) => {
+    setDialerAnchorEl(event.currentTarget);
+  };
+  const handleCloseDialer = () => {
+    setDialerAnchorEl(null);
+  };
+  if (!state.isInitialized) {
+    return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Fade, { in: true, timeout: 300, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_material.Paper,
@@ -351,7 +798,6 @@ function CallControlPanel({ onDataChange }) {
           transition: theme.transitions.create(["box-shadow", "transform"], {
             duration: theme.transitions.duration.short
           }),
-          transform: isDragging ? "scale(1.01)" : "scale(1)",
           minWidth: 320,
           userSelect: "none"
         },
@@ -386,24 +832,33 @@ function CallControlPanel({ onDataChange }) {
                           alignItems: "center"
                         },
                         children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.DragIndicator, {}),
+                          " ",
                           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                            import_icons_material.DragIndicator,
+                            import_material.Box,
                             {
                               sx: {
                                 marginRight: "10px"
-                              }
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Dial", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                import_material.IconButton,
+                                {
+                                  onClick: (e) => {
+                                    handleOpenDialer(e);
+                                  },
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.WifiCalling3, { color: "success" })
+                                }
+                              ) })
                             }
                           ),
-                          " ",
                           formatDuration(callDuration)
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Status", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Status", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                       import_material.Button,
                       {
                         sx: {
-                          backgroundColor: getStatusColor(state.status),
                           fontWeight: "bold",
                           borderRadius: "16px",
                           display: "flex",
@@ -411,25 +866,20 @@ function CallControlPanel({ onDataChange }) {
                           justifyContent: "space-between",
                           marginRight: "8px"
                         },
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          handleMoreClick(e);
-                        },
+                        color: getStatusColor(state.status),
                         variant: "outlined",
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                            import_material.Typography,
-                            {
-                              width: 50,
-                              variant: "body2",
-                              sx: {
-                                fontWeight: "bold"
-                              },
-                              children: state.status.toUpperCase()
-                            }
-                          ),
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.KeyboardArrowDown, {})
-                        ]
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_material.Typography,
+                          {
+                            width: 50,
+                            variant: "body2",
+                            sx: {
+                              color: getStatusColor(state.status),
+                              fontWeight: "bold"
+                            },
+                            children: state.status.toUpperCase()
+                          }
+                        )
                       }
                     ) })
                   ]
@@ -489,6 +939,23 @@ function CallControlPanel({ onDataChange }) {
                         children: state.isMuted ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.MicOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Mic, {})
                       }
                     ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Queue", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_material.IconButton,
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          handleMoreClick(e);
+                        },
+                        color: "default",
+                        sx: {
+                          bgcolor: "action.hover",
+                          "&:hover": {
+                            bgcolor: "warning"
+                          }
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Layers, {})
+                      }
+                    ) }),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "More Options", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                       import_material.IconButton,
                       {
@@ -508,14 +975,16 @@ function CallControlPanel({ onDataChange }) {
                       {
                         onClick: (e) => {
                           e.stopPropagation();
-                          (state.callStartTime ? handleEndCall : handleStartCall)();
+                          if (state.callStartTime) {
+                            handleEndCall();
+                          }
                         },
                         color: "error",
                         sx: {
-                          bgcolor: state.callStartTime ? "error.main" : "success.light",
+                          bgcolor: state.callStartTime ? "error.main" : "gray",
                           color: "white",
                           "&:hover": {
-                            bgcolor: state.callStartTime ? "error.light" : "success.dark"
+                            bgcolor: state.callStartTime ? "error.light" : "gray"
                           }
                         },
                         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.CallEnd, {})
@@ -529,64 +998,172 @@ function CallControlPanel({ onDataChange }) {
         )
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Fade, { in: true, timeout: 300, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_material.Paper,
+      {
+        ref: xdragRef,
+        elevation: xisDragging ? 2 : 1,
+        sx: {
+          position: "fixed",
+          left: xposition.x,
+          top: xposition.y,
+          p: 1,
+          height: "auto",
+          // borderRadius: 3,
+          bgcolor: "background.paper",
+          cursor: xisDragging ? "grabbing" : "grab",
+          transition: theme.transitions.create(["box-shadow", "transform"], {
+            duration: theme.transitions.duration.short
+          }),
+          // minWidth: 320,
+          userSelect: "none"
+        },
+        onMouseDown: xhandleMouseDown,
+        onTouchStart: xhandleTouchStart,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "column"
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_material.Box,
+            {
+              sx: {
+                width: "100%",
+                height: "auto",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.DragIndicator, { sx: {
+                  transform: "rotate(90deg)"
+                } }),
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Close, {}) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "iframe",
+            {
+              src: "https://h68.deepijatel.in/ConVoxCCS",
+              height: 300
+            }
+          )
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_material.Menu,
+      {
+        anchorEl: dialerAnchorEl,
+        open: Boolean(dialerAnchorEl),
+        onClose: handleCloseDialer,
+        onClick: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_material.Box,
+          {
+            sx: {
+              all: "unset",
+              padding: "10px",
+              "&hover": {
+                backgroundColor: "white"
+              }
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_material.TextField,
+                {
+                  size: "small",
+                  value: phoneNumber,
+                  placeholder: "Enter Mobile No.",
+                  onChange: (e) => {
+                    setPhoneNumber(e.target.value);
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_material.IconButton,
+                {
+                  color: "info",
+                  onClick: () => {
+                    handleStartCall(phoneNumber);
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Phone, { color: "success" })
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_material.Menu,
       {
         anchorEl,
         open: Boolean(anchorEl),
         onClose: handleMoreClose,
         onClick: (e) => e.stopPropagation(),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_material.MenuItem,
-            {
-              onClick: () => handleStatusChange("ready"),
-              sx: {
-                backgroundColor: state.status === "ready" ? "#0038f01c" : "initial"
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                import_material.Box,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_material.Box,
+          {
+            sx: {
+              all: "unset",
+              padding: "0px 10px",
+              "&hover": {
+                backgroundColor: "white"
+              }
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Badge, { badgeContent: 100, color: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_material.Chip,
+                {
+                  avatar: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Avatar, { children: "Q" }),
+                  variant: "outlined",
+                  label: "Waiting"
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_material.Badge,
                 {
+                  badgeContent: 100,
+                  color: "warning",
                   sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 1
+                    margin: "10px"
                   },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Phone, { color: "success" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "Ready" })
-                  ]
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_material.Chip,
+                    {
+                      avatar: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Avatar, { children: "C" }),
+                      label: "Pending",
+                      variant: "outlined"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_material.Badge,
+                {
+                  badgeContent: 100,
+                  color: "info",
+                  sx: {
+                    margin: "10px"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_material.Chip,
+                    {
+                      avatar: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Avatar, { children: "C" }),
+                      variant: "outlined",
+                      label: "Upcoming"
+                    }
+                  )
                 }
               )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_material.MenuItem,
-            {
-              onClick: () => handleStatusChange("break"),
-              sx: {
-                backgroundColor: state.status === "break" ? "#0038f01c" : "initial"
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.FreeBreakfast, { color: "error" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "Break" })
-              ] })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_material.MenuItem,
-            {
-              onClick: () => handleStatusChange("idle"),
-              sx: {
-                backgroundColor: state.status === "idle" ? "#0038f01c" : "initial"
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.AirlineSeatIndividualSuite, { color: "warning" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "Idle" })
-              ] })
-            }
-          )
-        ]
+            ]
+          }
+        )
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -605,9 +1182,13 @@ function CallControlPanel({ onDataChange }) {
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Groups, { color: "secondary" }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "Conference Call" })
           ] }) }),
-          /* @__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: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.SpatialAudioOff, { color: "secondary" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "Queue Waiting" })
+          /* @__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: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.FreeBreakfast, { color: "secondary" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "Break" })
+          ] }) }),
+          /* @__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: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.AirlineSeatIndividualSuite, { color: "secondary" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "Idle" })
           ] }) })
         ]
       }
@@ -616,15 +1197,22 @@ function CallControlPanel({ onDataChange }) {
 }
 
 // src/index.ts
-function initCallSDK(sdkApiKey) {
-  sdkStateManager.initialize(sdkApiKey);
-}
-function updateCallData(data) {
-  sdkStateManager.updateCallData(data);
+function initSDK({
+  apiKey,
+  tenantId,
+  agentId,
+  baseUrl
+}) {
+  sdkStateManager.initialize(apiKey);
+  eventTracker.init({
+    apiKey,
+    tenantId,
+    agentId,
+    baseUrl
+  });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CallControlPanel,
-  initCallSDK,
-  updateCallData
+  initSDK
 });