call-control-sdk 1.0.0 → 2.1.0

package/dist/index.mjs

@@ -0,0 +1,1131 @@
+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/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");
+    __publicField(this, "listeners", []);
+    __publicField(this, "STORAGE_KEY", "call-control-sdk-state");
+    this.state = this.getInitialState();
+    this.loadFromStorage();
+  }
+  getInitialState() {
+    return {
+      apiKey: null,
+      isInitialized: false,
+      isHolding: false,
+      isMuted: false,
+      status: "idle",
+      callStartTime: null,
+      position: { x: 50, y: 50 },
+      callData: {
+        mobileNumber: "",
+        callReferenceId: "",
+        agentLoginId: ""
+      }
+    };
+  }
+  loadFromStorage() {
+    try {
+      const stored = localStorage.getItem(this.STORAGE_KEY);
+      if (stored) {
+        const parsedState = JSON.parse(stored);
+        this.state = {
+          ...this.state,
+          isHolding: parsedState.isHolding || false,
+          isMuted: parsedState.isMuted || false,
+          status: parsedState.status || "idle",
+          position: parsedState.position || { x: 50, y: 50 },
+          callStartTime: parsedState.callStartTime || null
+        };
+      }
+    } catch (error) {
+      console.warn("Failed to load SDK state from localStorage:", error);
+    }
+  }
+  saveToStorage() {
+    try {
+      const persistentState = {
+        isHolding: this.state.isHolding,
+        isMuted: this.state.isMuted,
+        status: this.state.status,
+        position: this.state.position,
+        callStartTime: this.state.callStartTime
+      };
+      localStorage.setItem(this.STORAGE_KEY, JSON.stringify(persistentState));
+    } catch (error) {
+      console.warn("Failed to save SDK state to localStorage:", error);
+    }
+  }
+  notifyListeners() {
+    this.listeners.forEach((listener) => listener());
+  }
+  initialize(apiKey) {
+    if (!apiKey || typeof apiKey !== "string" || apiKey.trim().length === 0) {
+      throw new Error("API key not available");
+    }
+    this.state.apiKey = apiKey;
+    this.state.isInitialized = true;
+    this.notifyListeners();
+  }
+  getState() {
+    return { ...this.state };
+  }
+  subscribe(listener) {
+    this.listeners.push(listener);
+    return () => {
+      const index = this.listeners.indexOf(listener);
+      if (index > -1) {
+        this.listeners.splice(index, 1);
+      }
+    };
+  }
+  setHolding(isHolding) {
+    this.state.isHolding = isHolding;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  setMuted(isMuted) {
+    this.state.isMuted = isMuted;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  setStatus(status) {
+    this.state.status = status;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  setPosition(position) {
+    this.state.position = position;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  startCall() {
+    this.state.callStartTime = Date.now();
+    this.state.status = "ready";
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  endCall() {
+    this.state.callStartTime = null;
+    this.state.status = "idle";
+    this.state.isHolding = false;
+    this.state.isMuted = false;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  updateCallData(data) {
+    this.state.callData = { ...this.state.callData, ...data };
+    this.notifyListeners();
+  }
+};
+var sdkStateManager = new SDKStateManager();
+
+// src/lib/components/CallControlPanel.tsx
+import { useEffect as useEffect2, useState as useState3, useCallback as useCallback2 } from "react";
+import {
+  Paper,
+  IconButton,
+  Typography,
+  Menu,
+  MenuItem,
+  Box,
+  Tooltip,
+  Fade,
+  useTheme,
+  Button,
+  Badge,
+  Chip,
+  Avatar,
+  TextField
+} from "@mui/material";
+import {
+  PauseCircle,
+  PlayCircle,
+  Mic,
+  MicOff,
+  MoreVert,
+  CallEnd,
+  Cached,
+  FreeBreakfast,
+  AirlineSeatIndividualSuite,
+  TransferWithinAStation,
+  Groups,
+  DragIndicator,
+  WifiCalling3,
+  Layers,
+  Phone
+} from "@mui/icons-material";
+
+// src/lib/hooks/useSDKState.ts
+import { useState, useEffect } from "react";
+function useSDKState() {
+  const [state, setState] = useState(sdkStateManager.getState());
+  useEffect(() => {
+    const unsubscribe = sdkStateManager.subscribe(() => {
+      setState(sdkStateManager.getState());
+    });
+    return unsubscribe;
+  }, []);
+  return state;
+}
+
+// src/lib/hooks/useDraggable.ts
+import {
+  useState as useState2,
+  useRef,
+  useCallback
+} from "react";
+function useDraggable(initialPosition, onPositionChange) {
+  const [position, setPosition] = useState2(initialPosition);
+  const [isDragging, setIsDragging] = useState2(false);
+  const dragRef = useRef(null);
+  const dragStart = useRef({ x: 0, y: 0 });
+  const elementStart = useRef({ x: 0, y: 0 });
+  const updatePosition = useCallback(
+    (newPosition) => {
+      const element = dragRef.current;
+      if (!element) return;
+      const rect = element.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const constrainedPosition = {
+        x: Math.max(0, Math.min(newPosition.x, viewportWidth - rect.width)),
+        y: Math.max(0, Math.min(newPosition.y, viewportHeight - rect.height))
+      };
+      setPosition(constrainedPosition);
+      onPositionChange?.(constrainedPosition);
+    },
+    [onPositionChange]
+  );
+  const handleStart = useCallback(
+    (clientX, clientY) => {
+      setIsDragging(true);
+      dragStart.current = { x: clientX, y: clientY };
+      elementStart.current = position;
+      const handleMove = (moveClientX, moveClientY) => {
+        const deltaX = moveClientX - dragStart.current.x;
+        const deltaY = moveClientY - dragStart.current.y;
+        updatePosition({
+          x: elementStart.current.x + deltaX,
+          y: elementStart.current.y + deltaY
+        });
+      };
+      const handleMouseMove = (e) => {
+        e.preventDefault();
+        handleMove(e.clientX, e.clientY);
+      };
+      const handleTouchMove = (e) => {
+        e.preventDefault();
+        const touch = e.touches[0];
+        if (touch) {
+          handleMove(touch.clientX, touch.clientY);
+        }
+      };
+      const handleEnd = () => {
+        setIsDragging(false);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleEnd);
+        document.removeEventListener("touchmove", handleTouchMove);
+        document.removeEventListener("touchend", handleEnd);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleEnd);
+      document.addEventListener("touchmove", handleTouchMove, {
+        passive: false
+      });
+      document.addEventListener("touchend", handleEnd);
+    },
+    [position, updatePosition]
+  );
+  const handleMouseDown = useCallback(
+    (e) => {
+      e.preventDefault();
+      handleStart(e.clientX, e.clientY);
+    },
+    [handleStart]
+  );
+  const handleTouchStart = useCallback(
+    (e) => {
+      e.preventDefault();
+      const touch = e.touches[0];
+      if (touch) {
+        handleStart(touch.clientX, touch.clientY);
+      }
+    },
+    [handleStart]
+  );
+  return {
+    position,
+    isDragging,
+    dragRef,
+    handleMouseDown,
+    handleTouchStart
+  };
+}
+
+// src/lib/components/CallControlPanel.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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(
+    state.position,
+    (newPosition) => sdkStateManager.setPosition(newPosition)
+  );
+  useEffect2(() => {
+    let interval;
+    if (state.callStartTime) {
+      interval = setInterval(() => {
+        const elapsed = Math.floor((Date.now() - state.callStartTime) / 1e3);
+        setCallDuration(elapsed);
+      }, 1e3);
+    } else {
+      setCallDuration(0);
+    }
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [state.callStartTime]);
+  useEffect2(() => {
+    if (onDataChange) {
+      onDataChange(state.callData);
+    }
+  }, [state.callData, onDataChange]);
+  const formatDuration = useCallback2((seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+  }, []);
+  const getStatusColor = useCallback2((status) => {
+    switch (status) {
+      case "ready":
+        return "success";
+      case "break":
+        return "warning";
+      case "idle":
+        return "info";
+      default:
+        return "info";
+    }
+  }, []);
+  const handleHoldToggle = () => {
+    sdkStateManager.setHolding(!state.isHolding);
+  };
+  const handleMuteToggle = () => {
+    sdkStateManager.setMuted(!state.isMuted);
+  };
+  const handleStatusChange = (newStatus) => {
+    sdkStateManager.setStatus(newStatus);
+    setMoreOptionsAnchorEl(null);
+  };
+  const handleEndCall = () => {
+    sdkStateManager.endCall();
+  };
+  const handleStartCall = (number) => {
+    if (number.length !== 10) {
+      alert("Invalid phone number");
+    } else {
+      sdkStateManager.startCall();
+    }
+  };
+  const handleMoreClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleMoreOptions = (event) => {
+    setMoreOptionsAnchorEl(event.currentTarget);
+  };
+  const handleMoreClose = () => {
+    setAnchorEl(null);
+  };
+  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,
+      {
+        ref: dragRef,
+        elevation: isDragging ? 2 : 1,
+        sx: {
+          position: "fixed",
+          left: position.x,
+          top: position.y,
+          p: 1,
+          borderRadius: 3,
+          bgcolor: "background.paper",
+          cursor: isDragging ? "grabbing" : "grab",
+          transition: theme.transitions.create(["box-shadow", "transform"], {
+            duration: theme.transitions.duration.short
+          }),
+          // transform: isDragging ? "scale(1.01)" : "scale(1)",
+          minWidth: 320,
+          userSelect: "none"
+        },
+        onMouseDown: handleMouseDown,
+        onTouchStart: handleTouchStart,
+        children: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      Typography,
+                      {
+                        variant: "h6",
+                        sx: {
+                          color: state.callStartTime ? "success.main" : "text.secondary",
+                          marginRight: "8px",
+                          display: "flex",
+                          justifyContent: "space-between",
+                          alignItems: "center"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(DragIndicator, {}),
+                          " ",
+                          /* @__PURE__ */ jsx(
+                            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__ */ jsx(
+                      Button,
+                      {
+                        sx: {
+                          fontWeight: "bold",
+                          borderRadius: "16px",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          marginRight: "8px"
+                        },
+                        color: getStatusColor(state.status),
+                        variant: "outlined",
+                        children: /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            width: 50,
+                            variant: "body2",
+                            sx: {
+                              color: getStatusColor(state.status),
+                              fontWeight: "bold"
+                            },
+                            children: state.status.toUpperCase()
+                          }
+                        )
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    gap: 1,
+                    justifyContent: "center",
+                    alignItems: "center"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Tooltip, { title: "Redial", children: /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                        },
+                        color: "default",
+                        sx: {
+                          bgcolor: "action.hover",
+                          "&:hover": {
+                            bgcolor: "warning"
+                          }
+                        },
+                        children: /* @__PURE__ */ jsx(Cached, {})
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(Tooltip, { title: state.isHolding ? "Resume" : "Hold", children: /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          handleHoldToggle();
+                        },
+                        color: state.isHolding ? "warning" : "default",
+                        sx: {
+                          bgcolor: state.isHolding ? "warning.info" : "action.hover"
+                        },
+                        children: state.isHolding ? /* @__PURE__ */ jsx(PlayCircle, {}) : /* @__PURE__ */ jsx(PauseCircle, {})
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(Tooltip, { title: state.isMuted ? "Unmute" : "Mute", children: /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          handleMuteToggle();
+                        },
+                        color: state.isMuted ? "error" : "default",
+                        sx: {
+                          bgcolor: state.isMuted ? "error.info" : "action.hover"
+                        },
+                        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,
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          handleMoreOptions(e);
+                        },
+                        sx: {
+                          bgcolor: "action.hover",
+                          "&:hover": { bgcolor: "action.selected" }
+                        },
+                        children: /* @__PURE__ */ jsx(MoreVert, {})
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(Tooltip, { title: state.callStartTime ? "End Call" : "Start Call", children: /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          if (state.callStartTime) {
+                            handleEndCall();
+                          }
+                        },
+                        color: "error",
+                        sx: {
+                          bgcolor: state.callStartTime ? "error.main" : "gray",
+                          color: "white",
+                          "&:hover": {
+                            bgcolor: state.callStartTime ? "error.light" : "gray"
+                          }
+                        },
+                        children: /* @__PURE__ */ jsx(CallEnd, {})
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) }),
+    /* @__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__ */ 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: {
+                    margin: "10px"
+                  },
+                  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__ */ jsxs(
+      Menu,
+      {
+        anchorEl: moreOptionsAnchorEl,
+        open: Boolean(moreOptionsAnchorEl),
+        onClose: handleMoreOptionsClose,
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx(MenuItem, { onClick: () => setMoreOptionsAnchorEl(null), children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ jsx(TransferWithinAStation, { color: "secondary" }),
+            /* @__PURE__ */ jsx(Typography, { children: "Call Transfer" })
+          ] }) }),
+          /* @__PURE__ */ jsx(MenuItem, { onClick: () => setMoreOptionsAnchorEl(null), children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ jsx(Groups, { color: "secondary" }),
+            /* @__PURE__ */ jsx(Typography, { children: "Conference Call" })
+          ] }) }),
+          /* @__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" })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/index.ts
+function initSDK(sdkApiKey, tenantId, agentId, baseUrl) {
+  sdkStateManager.initialize(sdkApiKey);
+  eventTracker.init({
+    apiKey: sdkApiKey,
+    tenantId,
+    agentId,
+    baseUrl
+  });
+}
+export {
+  CallControlPanel,
+  initSDK
+};