call-control-sdk 2.0.0 → 2.1.0

package/dist/index.mjs

@@ -2,7 +2,407 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
-// 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 = {
+      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) {
+    const fullUrl = `${this.baseUrl}${url}`;
+    const maxRetries = this.config?.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() {
+    if (typeof window === "undefined" || !this.config?.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) => {
+        const target = event.target;
+        if (target.tagName === "BUTTON" || target.tagName === "A" || target.onclick || target.getAttribute("role") === "button") {
+          this.logEvent("click", {
+            element: target.tagName,
+            text: target.textContent?.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(() => {
+            this.logEvent("fieldChange", {
+              element: target.tagName,
+              type: target.getAttribute("type"),
+              name: target.getAttribute("name"),
+              id: target.id,
+              valueLength: target.value?.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) => {
+        this.logEvent("unhandledRejection", {
+          reason: event.reason?.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() {
+    if (this.flushTimer) {
+      clearInterval(this.flushTimer);
+    }
+    const interval = this.config?.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");
@@ -135,7 +535,11 @@ import {
   Tooltip,
   Fade,
   useTheme,
-  Button
+  Button,
+  Badge,
+  Chip,
+  Avatar,
+  TextField
 } from "@mui/material";
 import {
   PauseCircle,
@@ -144,15 +548,15 @@ import {
   MicOff,
   MoreVert,
   CallEnd,
-  KeyboardArrowDown,
   Cached,
   FreeBreakfast,
   AirlineSeatIndividualSuite,
   TransferWithinAStation,
   Groups,
-  Phone,
   DragIndicator,
-  SpatialAudioOff
+  WifiCalling3,
+  Layers,
+  Phone
 } from "@mui/icons-material";
 
 // src/lib/hooks/useSDKState.ts
@@ -204,11 +608,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();
@@ -269,6 +672,10 @@ function CallControlPanel({ onDataChange }) {
   const theme = useTheme();
   const state = useSDKState();
   const [anchorEl, setAnchorEl] = useState3(null);
+  const [phoneNumber, setPhoneNumber] = useState3("");
+  const [dialerAnchorEl, setDialerAnchorEl] = useState3(
+    null
+  );
   const [moreOptionsAnchorEl, setMoreOptionsAnchorEl] = useState3(null);
   const [callDuration, setCallDuration] = useState3(0);
   const { position, isDragging, dragRef, handleMouseDown, handleTouchStart } = useDraggable(
@@ -306,9 +713,9 @@ function CallControlPanel({ onDataChange }) {
       case "break":
         return "warning";
       case "idle":
-        return "default";
+        return "info";
       default:
-        return "default";
+        return "info";
     }
   }, []);
   const handleHoldToggle = () => {
@@ -319,13 +726,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);
@@ -339,6 +750,12 @@ function CallControlPanel({ onDataChange }) {
   const handleMoreOptionsClose = () => {
     setMoreOptionsAnchorEl(null);
   };
+  const handleOpenDialer = (event) => {
+    setDialerAnchorEl(event.currentTarget);
+  };
+  const handleCloseDialer = () => {
+    setDialerAnchorEl(null);
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Fade, { in: true, timeout: 300, children: /* @__PURE__ */ jsx(
       Paper,
@@ -356,7 +773,7 @@ function CallControlPanel({ onDataChange }) {
           transition: theme.transitions.create(["box-shadow", "transform"], {
             duration: theme.transitions.duration.short
           }),
-          transform: isDragging ? "scale(1.01)" : "scale(1)",
+          // transform: isDragging ? "scale(1.01)" : "scale(1)",
           minWidth: 320,
           userSelect: "none"
         },
@@ -391,24 +808,33 @@ function CallControlPanel({ onDataChange }) {
                           alignItems: "center"
                         },
                         children: [
+                          /* @__PURE__ */ jsx(DragIndicator, {}),
+                          " ",
                           /* @__PURE__ */ jsx(
-                            DragIndicator,
+                            Box,
                             {
                               sx: {
                                 marginRight: "10px"
-                              }
+                              },
+                              children: /* @__PURE__ */ jsx(Tooltip, { title: "Dial", children: /* @__PURE__ */ jsx(
+                                IconButton,
+                                {
+                                  onClick: (e) => {
+                                    handleOpenDialer(e);
+                                  },
+                                  children: /* @__PURE__ */ jsx(WifiCalling3, { color: "success" })
+                                }
+                              ) })
                             }
                           ),
-                          " ",
                           formatDuration(callDuration)
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsx(Tooltip, { title: "Status", children: /* @__PURE__ */ jsxs(
+                    /* @__PURE__ */ jsx(Tooltip, { title: "Status", children: /* @__PURE__ */ jsx(
                       Button,
                       {
                         sx: {
-                          backgroundColor: getStatusColor(state.status),
                           fontWeight: "bold",
                           borderRadius: "16px",
                           display: "flex",
@@ -416,25 +842,20 @@ function CallControlPanel({ onDataChange }) {
                           justifyContent: "space-between",
                           marginRight: "8px"
                         },
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          handleMoreClick(e);
-                        },
+                        color: getStatusColor(state.status),
                         variant: "outlined",
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            Typography,
-                            {
-                              width: 50,
-                              variant: "body2",
-                              sx: {
-                                fontWeight: "bold"
-                              },
-                              children: state.status.toUpperCase()
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(KeyboardArrowDown, {})
-                        ]
+                        children: /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            width: 50,
+                            variant: "body2",
+                            sx: {
+                              color: getStatusColor(state.status),
+                              fontWeight: "bold"
+                            },
+                            children: state.status.toUpperCase()
+                          }
+                        )
                       }
                     ) })
                   ]
@@ -494,6 +915,23 @@ function CallControlPanel({ onDataChange }) {
                         children: state.isMuted ? /* @__PURE__ */ jsx(MicOff, {}) : /* @__PURE__ */ jsx(Mic, {})
                       }
                     ) }),
+                    /* @__PURE__ */ jsx(Tooltip, { title: "Queue", children: /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          handleMoreClick(e);
+                        },
+                        color: "default",
+                        sx: {
+                          bgcolor: "action.hover",
+                          "&:hover": {
+                            bgcolor: "warning"
+                          }
+                        },
+                        children: /* @__PURE__ */ jsx(Layers, {})
+                      }
+                    ) }),
                     /* @__PURE__ */ jsx(Tooltip, { title: "More Options", children: /* @__PURE__ */ jsx(
                       IconButton,
                       {
@@ -513,14 +951,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__ */ jsx(CallEnd, {})
@@ -534,64 +974,115 @@ function CallControlPanel({ onDataChange }) {
         )
       }
     ) }),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
+      Menu,
+      {
+        anchorEl: dialerAnchorEl,
+        open: Boolean(dialerAnchorEl),
+        onClose: handleCloseDialer,
+        onClick: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              all: "unset",
+              padding: "10px",
+              "&hover": {
+                backgroundColor: "white"
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  size: "small",
+                  value: phoneNumber,
+                  placeholder: "Enter Mobile No.",
+                  onChange: (e) => {
+                    setPhoneNumber(e.target.value);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  color: "info",
+                  onClick: () => {
+                    handleStartCall(phoneNumber);
+                  },
+                  children: /* @__PURE__ */ jsx(Phone, { color: "success" })
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
       Menu,
       {
         anchorEl,
         open: Boolean(anchorEl),
         onClose: handleMoreClose,
         onClick: (e) => e.stopPropagation(),
-        children: [
-          /* @__PURE__ */ jsx(
-            MenuItem,
-            {
-              onClick: () => handleStatusChange("ready"),
-              sx: {
-                backgroundColor: state.status === "ready" ? "#0038f01c" : "initial"
-              },
-              children: /* @__PURE__ */ jsxs(
-                Box,
+        children: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              all: "unset",
+              padding: "0px 10px",
+              "&hover": {
+                backgroundColor: "white"
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(Badge, { badgeContent: 100, color: "secondary", children: /* @__PURE__ */ jsx(
+                Chip,
+                {
+                  avatar: /* @__PURE__ */ jsx(Avatar, { children: "Q" }),
+                  variant: "outlined",
+                  label: "Waiting"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                Badge,
                 {
+                  badgeContent: 100,
+                  color: "warning",
                   sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 1
+                    margin: "10px"
                   },
-                  children: [
-                    /* @__PURE__ */ jsx(Phone, { color: "success" }),
-                    /* @__PURE__ */ jsx(Typography, { children: "Ready" })
-                  ]
+                  children: /* @__PURE__ */ jsx(
+                    Chip,
+                    {
+                      avatar: /* @__PURE__ */ jsx(Avatar, { children: "C" }),
+                      label: "Pending",
+                      variant: "outlined"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Badge,
+                {
+                  badgeContent: 100,
+                  color: "info",
+                  sx: {
+                    margin: "10px"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    Chip,
+                    {
+                      avatar: /* @__PURE__ */ jsx(Avatar, { children: "C" }),
+                      variant: "outlined",
+                      label: "Upcoming"
+                    }
+                  )
                 }
               )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            MenuItem,
-            {
-              onClick: () => handleStatusChange("break"),
-              sx: {
-                backgroundColor: state.status === "break" ? "#0038f01c" : "initial"
-              },
-              children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-                /* @__PURE__ */ jsx(FreeBreakfast, { color: "error" }),
-                /* @__PURE__ */ jsx(Typography, { children: "Break" })
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            MenuItem,
-            {
-              onClick: () => handleStatusChange("idle"),
-              sx: {
-                backgroundColor: state.status === "idle" ? "#0038f01c" : "initial"
-              },
-              children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-                /* @__PURE__ */ jsx(AirlineSeatIndividualSuite, { color: "warning" }),
-                /* @__PURE__ */ jsx(Typography, { children: "Idle" })
-              ] })
-            }
-          )
-        ]
+            ]
+          }
+        )
       }
     ),
     /* @__PURE__ */ jsxs(
@@ -610,9 +1101,13 @@ function CallControlPanel({ onDataChange }) {
             /* @__PURE__ */ jsx(Groups, { color: "secondary" }),
             /* @__PURE__ */ jsx(Typography, { children: "Conference Call" })
           ] }) }),
-          /* @__PURE__ */ jsx(MenuItem, { onClick: () => setMoreOptionsAnchorEl(null), children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-            /* @__PURE__ */ jsx(SpatialAudioOff, { color: "secondary" }),
-            /* @__PURE__ */ jsx(Typography, { children: "Queue Waiting" })
+          /* @__PURE__ */ jsx(MenuItem, { onClick: () => handleStatusChange("break"), children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ jsx(FreeBreakfast, { color: "secondary" }),
+            /* @__PURE__ */ jsx(Typography, { children: "Break" })
+          ] }) }),
+          /* @__PURE__ */ jsx(MenuItem, { onClick: () => handleStatusChange("idle"), children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ jsx(AirlineSeatIndividualSuite, { color: "secondary" }),
+            /* @__PURE__ */ jsx(Typography, { children: "Idle" })
           ] }) })
         ]
       }
@@ -621,14 +1116,16 @@ function CallControlPanel({ onDataChange }) {
 }
 
 // src/index.ts
-function initCallSDK(sdkApiKey) {
+function initSDK(sdkApiKey, tenantId, agentId, baseUrl) {
   sdkStateManager.initialize(sdkApiKey);
-}
-function updateCallData(data) {
-  sdkStateManager.updateCallData(data);
+  eventTracker.init({
+    apiKey: sdkApiKey,
+    tenantId,
+    agentId,
+    baseUrl
+  });
 }
 export {
   CallControlPanel,
-  initCallSDK,
-  updateCallData
+  initSDK
 };