ahs-cti 0.0.2-beta.1

package/dist/index.js

@@ -0,0 +1,4569 @@
+"use strict";
+var __create = Object.create;
+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 __getProtoOf = Object.getPrototypeOf;
+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 });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// call-control-sdk/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CallControlPanel: () => CallControlPanel,
+  getSDKVersion: () => getSDKVersion,
+  initSDK: () => initSDK,
+  isSDKInitialized: () => isSDKInitialized,
+  useClickToCall: () => useClickToCall,
+  useEndCall: () => useEndCall,
+  useGetAuthorizationToken: () => useGetAuthorizationToken,
+  useGetCallerData: () => useGetCallerData,
+  useLogout: () => useLogout
+});
+module.exports = __toCommonJS(index_exports);
+
+// call-control-sdk/lib/hooks/eventsTracker.ts
+var EventTrackerSDK = class {
+  constructor() {
+    __publicField(this, "config", null);
+    __publicField(this, "ticketId", null);
+    __publicField(this, "baseUrl", "");
+    __publicField(this, "flushTimer", null);
+  }
+  async init(config) {
+    this.config = __spreadValues({
+      retryAttempts: 3,
+      queueSize: 100,
+      flushInterval: 5e3
+    }, config);
+    this.baseUrl = config.baseUrl || (typeof window !== "undefined" ? window.location.origin : "");
+    const ticket = await this.createTicket();
+    this.startPeriodicFlush();
+    return ticket;
+  }
+  isInitialized() {
+    return this.config !== null && this.ticketId !== null;
+  }
+  getConfig() {
+    return this.config;
+  }
+  getTicketId() {
+    return this.ticketId;
+  }
+  async createTicket() {
+    if (!this.config) {
+      throw new Error("EventTracker not initialized");
+    }
+    try {
+      const response = await this.makeRequest("/api/v1/auth/login", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          userId: this.config.agentId,
+          // sessionId: this.config.sessionId,
+          password: this.config.password
+        })
+      });
+      const data = await response.json();
+      this.ticketId = data.ticketId;
+      return data;
+    } catch (error) {
+      throw error;
+    }
+  }
+  async makeRequest(url, options) {
+    var _a2;
+    const fullUrl = `${this.baseUrl}${url}`;
+    const maxRetries = ((_a2 = this.config) == null ? void 0 : _a2.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");
+  }
+  startPeriodicFlush() {
+    if (this.flushTimer) {
+      clearInterval(this.flushTimer);
+    }
+  }
+};
+var eventTracker = new EventTrackerSDK();
+if (typeof window !== "undefined") {
+  window.EventTracker = eventTracker;
+}
+
+// call-control-sdk/lib/hooks/sdk-state.ts
+var import_vault = require("@react-solutions/vault");
+
+// call-control-sdk/lib/services/endPoint.ts
+var BASE_URL = "";
+var VERSION = {
+  v1: "/api/v1"
+};
+var END_POINT = {
+  LOGIN: `${BASE_URL}${VERSION.v1}/cti/login?provider=convox`,
+  READY_AGENT: `${BASE_URL}${VERSION.v1}/cti/ready-agent?provider=convox`,
+  UPDATE_AGENT_BREAK: `${BASE_URL}${VERSION.v1}/cti/update-agent-status?provider=convox`,
+  CLICK_TO_CALL: `${BASE_URL}${VERSION.v1}/cti/calls?provider=convox`,
+  HOLD_CALL: `${BASE_URL}${VERSION.v1}/cti/calls/hold?provider=convox`,
+  MUTE_CALL: `${BASE_URL}${VERSION.v1}/cti/calls/mute?provider=convox`,
+  UNMUTE_CALL: `${BASE_URL}${VERSION.v1}/cti/unmute-call?provider=convox`,
+  END_CALL: `${BASE_URL}${VERSION.v1}/cti/calls/end?provider=convox`,
+  LOGOUT: `${BASE_URL}${VERSION.v1}/cti/logout?provider=convox`,
+  CONFERENCE_CALL: `${BASE_URL}${VERSION.v1}/cti/calls/conference?provider=convox`,
+  CONFERENCE_CALL_HOLD_OR_UN_HOLD: `${BASE_URL}${VERSION.v1}/cti/calls/conference/hold?provider=convox`,
+  CONFERENCE_CALL_MUTE_OT_UN_MUTE: `${BASE_URL}${VERSION.v1}/cti/calls/conference/mute?provider=convox`,
+  CONFERENCE_CALL_END: `${BASE_URL}${VERSION.v1}/cti/calls/conference/hangup?provider=convox`,
+  CONFERENCE_CALL_END_ALL: `${BASE_URL}${VERSION.v1}/cti/calls/conference/hangup/all?provider=convox`,
+  CONFERENCE_CALL_TRANSFER: `${BASE_URL}${VERSION.v1}/cti/calls/conference/transfer?provider=convox`,
+  TRANSFER_CALL: `${BASE_URL}${VERSION.v1}/cti/calls/transfer?provider=convox`,
+  AGENTS_LIST: `${BASE_URL}${VERSION.v1}/cti/users`,
+  PROCESS_LIST: `${BASE_URL}${VERSION.v1}/cti/processes-list`,
+  BREAKS_LIST: `${BASE_URL}${VERSION.v1}/cti/breaks`,
+  TRANSFER_TO_DETAILS: `${BASE_URL}${VERSION.v1}/cti/transfer-to-details?provider=convox`,
+  SEND_NOTIFICATIONS: `${BASE_URL}${VERSION.v1}/cti/notifications/send`,
+  CALL_HISTORY: `${BASE_URL}${VERSION.v1}/dashboard/call-history`,
+  SENTIMENTAL_ANALYSIS: `${BASE_URL}${VERSION.v1}/users/get_sentiment_analysis`,
+  DISPOSITIONS: `${BASE_URL}${VERSION.v1}/cti/calls/dispositions`,
+  HOSPITALS_SERVICES: `${BASE_URL}${VERSION.v1}/cti/hospital/services`,
+  BLIEND_TRANSFER: `${BASE_URL}${VERSION.v1}/cti/calls/blind_transfer?provider=convox`
+};
+var STORAGE_KEY = "call-control-sdk-state";
+
+// call-control-sdk/lib/hooks/sdk-state.ts
+var SDKStateManager = class {
+  constructor() {
+    __publicField(this, "state");
+    __publicField(this, "listeners", []);
+    __publicField(this, "STORAGE_KEY", STORAGE_KEY);
+    __publicField(this, "apiKey");
+    __publicField(this, "tenantId");
+    this.state = this.getInitialState();
+    this.loadFromStorage();
+  }
+  getInitialState() {
+    var _a2, _b;
+    return {
+      authorization: void 0,
+      process: null,
+      agentId: "",
+      openConferenceDialog: false,
+      openCallTransferDialog: false,
+      isInitialized: false,
+      sdkConfig: {
+        disableEndCallButton: false,
+        disabledDialButton: false,
+        disabledMoreOptionsButton: false,
+        enableSmsServices: false,
+        enableQueueName: false,
+        disableCallTransferButton: false,
+        isDraggable: true,
+        disableSoftPhone: false,
+        disableConferenceButton: false,
+        disabled: {},
+        enabled: {},
+        outlined: {}
+      },
+      urlConfig: {
+        baseURL: "",
+        iframeURL: "",
+        iframeAPIURL: "",
+        webSocketURL: "",
+        password: ""
+      },
+      callStartTime: null,
+      controlPanelPosition: { x: 10, y: 10 },
+      iframePosition: { x: ((_a2 = window.screen) == null ? void 0 : _a2.availWidth) - 460, y: ((_b = window.screen) == null ? void 0 : _b.height) - 580 },
+      callData: {
+        agent_id: "",
+        queue_name: "",
+        hold: 0,
+        mute: 0,
+        status: "",
+        type: "",
+        event_time: "",
+        phone_number: ""
+      },
+      conferenceLine: [
+        {
+          line: 1,
+          status: "IDLE",
+          type: "",
+          phone: "",
+          isMute: false,
+          isHold: false,
+          isCallStart: false,
+          isMergeCall: false
+        },
+        {
+          line: 2,
+          status: "IDLE",
+          type: "",
+          phone: "",
+          isMute: false,
+          isHold: false,
+          isCallStart: false,
+          isMergeCall: false
+        },
+        {
+          line: 3,
+          status: "IDLE",
+          type: "",
+          phone: "",
+          isMute: false,
+          isHold: false,
+          isCallStart: false,
+          isMergeCall: false
+        },
+        {
+          line: 4,
+          status: "IDLE",
+          type: "",
+          phone: "",
+          isMute: false,
+          isHold: false,
+          isCallStart: false,
+          isMergeCall: false
+        },
+        {
+          line: 5,
+          status: "IDLE",
+          type: "",
+          phone: "",
+          isMute: false,
+          isHold: false,
+          isCallStart: false,
+          isMergeCall: false
+        }
+      ],
+      hold: 0,
+      mute: 0,
+      agentStatus: ""
+    };
+  }
+  loadFromStorage() {
+    var _a2, _b;
+    try {
+      const stored = (0, import_vault.getItem)(this.STORAGE_KEY);
+      if (stored) {
+        const parsedState = stored;
+        this.state = __spreadProps(__spreadValues({}, this.state), {
+          agentId: parsedState.agentId || "",
+          authorization: parsedState.authorization || void 0,
+          process: parsedState.process || null,
+          openConferenceDialog: (parsedState == null ? void 0 : parsedState.openConferenceDialog) || false,
+          openCallTransferDialog: (parsedState == null ? void 0 : parsedState.openCallTransferDialog) || false,
+          isInitialized: parsedState.isInitialized || false,
+          sdkConfig: parsedState.sdkConfig || {
+            disableEndCallButton: false,
+            disabledMoreOptionsButton: false,
+            enableSmsServices: false,
+            enableQueueName: false,
+            disabledDialButton: false,
+            disableCallTransferButton: false,
+            isDraggable: true,
+            disableSoftPhone: false,
+            disableConferenceButton: false,
+            disabled: {},
+            enabled: {},
+            outlined: {}
+          },
+          urlConfig: parsedState.urlConfig || {
+            baseURL: "",
+            iframeURL: "",
+            iframeAPIURL: "",
+            webSocketURL: "",
+            password: ""
+          },
+          callStartTime: parsedState.callStartTime || null,
+          controlPanelPosition: parsedState.controlPanelPosition || {
+            x: 10,
+            y: 10
+          },
+          iframePosition: parsedState.iframePosition || {
+            x: ((_a2 = window.screen) == null ? void 0 : _a2.availWidth) - 460,
+            y: ((_b = window.screen) == null ? void 0 : _b.height) - 580
+          },
+          callData: parsedState.callData || {
+            mobileNumber: "",
+            callReferenceId: "",
+            agent_id: "",
+            status: "",
+            type: "",
+            event_time: "",
+            phone_number: ""
+          },
+          conferenceLine: parsedState.conferenceLine && Array.isArray(parsedState.conferenceLine) && parsedState.conferenceLine.length > 0 ? parsedState.conferenceLine : this.state.conferenceLine,
+          agentStatus: parsedState.agentStatus
+        });
+      }
+    } catch (error) {
+      console.warn("Failed to load SDK state:", error);
+    }
+  }
+  saveToStorage() {
+    try {
+      const persistentState = {
+        agentId: this.state.agentId,
+        authorization: this.state.authorization,
+        process: this.state.process,
+        isInitialized: this.state.isInitialized,
+        openConferenceDialog: this.state.openConferenceDialog,
+        openCallTransferDialog: this.state.openCallTransferDialog,
+        sdkConfig: this.state.sdkConfig,
+        urlConfig: this.state.urlConfig,
+        callStartTime: this.state.callStartTime,
+        controlPanelPosition: this.state.controlPanelPosition,
+        iframePosition: this.state.iframePosition,
+        callData: this.state.callData,
+        conferenceLine: this.state.conferenceLine,
+        agentStatus: this.state.agentStatus
+      };
+      (0, import_vault.setItem)(this.STORAGE_KEY, persistentState);
+    } catch (error) {
+      console.warn("Failed to save SDK state:", error);
+    }
+  }
+  notifyListeners() {
+    this.listeners.forEach((listener) => listener());
+  }
+  validateCredentials(apiKey, tenantId) {
+    if (!apiKey || typeof apiKey !== "string" || apiKey.trim().length === 0) {
+      throw new Error("API key not available");
+    }
+    if (!tenantId || typeof tenantId !== "string" || tenantId.trim().length === 0) {
+      throw new Error("Tenant ID not available");
+    }
+    this.apiKey = apiKey.trim();
+    this.tenantId = tenantId.trim();
+  }
+  initialize(apiKey, tenantId, agentId, sdkConfig, initResult, urlConfig) {
+    this.validateCredentials(apiKey, tenantId);
+    if (!agentId || typeof agentId !== "string" || agentId.trim().length === 0) {
+      throw new Error("Agent ID not available");
+    } else {
+      this.state.agentId = agentId;
+      this.state.openConferenceDialog = false;
+      this.state.openCallTransferDialog = false;
+      this.state.authorization = initResult;
+      this.state.sdkConfig = __spreadValues({
+        disableEndCallButton: false,
+        disabledDialButton: false,
+        enableSmsServices: false,
+        disabledMoreOptionsButton: false,
+        enableQueueName: false,
+        disableCallTransferButton: false,
+        isDraggable: true,
+        disableSoftPhone: false,
+        disableConferenceButton: false,
+        disabled: {},
+        enabled: {},
+        outlined: {}
+      }, sdkConfig);
+      this.state.urlConfig = {
+        baseURL: (urlConfig == null ? void 0 : urlConfig.baseURL) || "",
+        iframeURL: (urlConfig == null ? void 0 : urlConfig.iframeURL) || "",
+        iframeAPIURL: (urlConfig == null ? void 0 : urlConfig.iframeAPIURL) || "",
+        webSocketURL: (urlConfig == null ? void 0 : urlConfig.webSocketURL) || "",
+        password: (urlConfig == null ? void 0 : urlConfig.password) || ""
+      };
+      this.state.isInitialized = true;
+      this.saveToStorage();
+      this.notifyListeners();
+    }
+  }
+  getState() {
+    return __spreadValues({}, this.state);
+  }
+  getCredentials() {
+    return { apiKey: this.apiKey, tenantId: this.tenantId };
+  }
+  getSdkAuthToken() {
+    var _a2;
+    return (_a2 = this.state.authorization) == null ? void 0 : _a2.accessToken;
+  }
+  subscribe(listener) {
+    this.listeners.push(listener);
+    return () => {
+      const index = this.listeners.indexOf(listener);
+      if (index > -1) {
+        this.listeners.splice(index, 1);
+      }
+    };
+  }
+  // public setHolding(isHolding: boolean): void {
+  // 	this.state.isHolding = isHolding;
+  // 	this.saveToStorage();
+  // 	this.notifyListeners();
+  // }
+  // public setMuted(isMuted: boolean): void {
+  // 	this.state.isMuted = isMuted;
+  // 	this.saveToStorage();
+  // 	this.notifyListeners();
+  // }
+  setProcess(process) {
+    this.state.process = process;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  setControlPanelPosition(position) {
+    this.state.controlPanelPosition = position;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  setIframePosition(position) {
+    this.state.iframePosition = position;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  startCall() {
+    this.state.callStartTime = Date.now();
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  endCall() {
+    this.state.callStartTime = null;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  setInitCheck() {
+    this.state.isInitialized = false;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  setOpenConferenceDialog(open) {
+    this.state.openConferenceDialog = open;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  setOpenCallTransferDialog(open) {
+    this.state.openCallTransferDialog = open;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  setAgentStatus(status) {
+    this.state.agentStatus = status;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  updateCallData(data) {
+    this.state.callData = __spreadValues(__spreadValues({}, this.state.callData), data);
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  updateConferenceData(data) {
+    this.state.conferenceLine = [...data];
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  setConferenceLine(line) {
+    var _a2;
+    if (!this.state.conferenceLine || !Array.isArray(this.state.conferenceLine)) {
+      this.state.conferenceLine = this.getInitialState().conferenceLine;
+    }
+    const conferenceLineData = (_a2 = this.state.conferenceLine) == null ? void 0 : _a2.map((each) => {
+      if (each.line === line.line) {
+        return line;
+      }
+      return each;
+    });
+    this.state.conferenceLine = conferenceLineData;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  resetConferenceLines() {
+    this.state.conferenceLine = [
+      {
+        line: 1,
+        status: "IDLE",
+        type: "",
+        phone: "",
+        isMute: false,
+        isHold: false,
+        isCallStart: false,
+        isMergeCall: false
+      },
+      {
+        line: 2,
+        status: "IDLE",
+        type: "",
+        phone: "",
+        isMute: false,
+        isHold: false,
+        isCallStart: false,
+        isMergeCall: false
+      },
+      {
+        line: 3,
+        status: "IDLE",
+        type: "",
+        phone: "",
+        isMute: false,
+        isHold: false,
+        isCallStart: false,
+        isMergeCall: false
+      },
+      {
+        line: 4,
+        status: "IDLE",
+        type: "",
+        phone: "",
+        isMute: false,
+        isHold: false,
+        isCallStart: false,
+        isMergeCall: false
+      },
+      {
+        line: 5,
+        status: "IDLE",
+        type: "",
+        phone: "",
+        isMute: false,
+        isHold: false,
+        isCallStart: false,
+        isMergeCall: false
+      }
+    ];
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  clearStorageAndReset() {
+    try {
+      (0, import_vault.removeItem)(this.STORAGE_KEY);
+      this.state = this.getInitialState();
+      this.notifyListeners();
+    } catch (error) {
+      console.warn("Failed to clear:", error);
+    }
+  }
+  getConferenceLines() {
+    return this.state.conferenceLine || [];
+  }
+};
+var sdkStateManager = new SDKStateManager();
+
+// call-control-sdk/lib/hooks/useLogout.ts
+var import_react = require("react");
+
+// call-control-sdk/lib/services/axios.ts
+var import_axios = __toESM(require("axios"));
+var _a;
+var DEFAULT_TOKEN = (_a = sdkStateManager.getSdkAuthToken()) != null ? _a : "";
+var REQUEST_TIMEOUT = 6e4;
+function getAuthToken() {
+  var _a2;
+  return (_a2 = sdkStateManager.getSdkAuthToken()) != null ? _a2 : "";
+}
+function createAxiosInstance() {
+  var _a2, _b, _c, _d, _e, _f;
+  const instance = import_axios.default.create({
+    baseURL: (_b = (_a2 = sdkStateManager.getState()) == null ? void 0 : _a2.urlConfig) == null ? void 0 : _b.baseURL,
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "x-tenant-id": (_d = (_c = sdkStateManager.getCredentials()) == null ? void 0 : _c.tenantId) != null ? _d : "",
+      "x-api-key": (_f = (_e = sdkStateManager.getCredentials()) == null ? void 0 : _e.apiKey) != null ? _f : "",
+      Authorization: `${DEFAULT_TOKEN}`
+    },
+    timeout: REQUEST_TIMEOUT,
+    withCredentials: false
+  });
+  instance.interceptors.request.use(
+    (config) => {
+      const token = getAuthToken();
+      if (token && config.headers) {
+        config.headers.Authorization = `${token}`;
+      }
+      config.metadata = { startTime: (/* @__PURE__ */ new Date()).getTime() };
+      return config;
+    },
+    (error) => {
+      console.error("Request interceptor error:", error);
+      return Promise.reject(error);
+    }
+  );
+  instance.interceptors.response.use(
+    (response) => {
+      return response;
+    },
+    async (error) => {
+      var _a3;
+      const originalRequest = error.config;
+      if (((_a3 = error.response) == null ? void 0 : _a3.status) === 401 && !originalRequest._retry) {
+        sdkStateManager.setInitCheck();
+        console.warn("Unauthorized request, attempting retry...");
+      }
+      if (!error.response) {
+        console.error("Network error:", error.message);
+        error.message = "Network error: Please check your internet connection";
+      }
+      if (error.response && error.response.status >= 500) {
+        console.error("Server error:", error.response.status, error.response.data);
+        error.message = "Server error: Please try again later";
+      }
+      return Promise.reject(error);
+    }
+  );
+  return instance;
+}
+var axiosInstance = createAxiosInstance();
+var axios_default = axiosInstance;
+
+// call-control-sdk/lib/hooks/useLogout.ts
+var import_vault2 = require("@react-solutions/vault");
+
+// call-control-sdk/lib/services/usbLight.ts
+var USB_LIGHT_BASE_URL = `http://localhost:5000`;
+var USB_LIGHT_ON = (color) => {
+  return `${USB_LIGHT_BASE_URL}/light/${color}/on`;
+};
+var USB_LIGHT_FLASH = (color, number) => {
+  return `${USB_LIGHT_BASE_URL}/light/${color}/flash${number}`;
+};
+var USB_LIGHT_ALL_OFF = () => {
+  return `${USB_LIGHT_BASE_URL}/all/off`;
+};
+var USB_LIGHT_REQUEST = (url, init) => {
+  return fetch(url, init);
+};
+
+// call-control-sdk/lib/hooks/useLogout.ts
+var useLogout = () => {
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const [success, setSuccess] = (0, import_react.useState)(false);
+  const [isError, setIsError] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [data, setData] = (0, import_react.useState)(null);
+  const handleLogout = (0, import_react.useCallback)(async () => {
+    USB_LIGHT_REQUEST(USB_LIGHT_ALL_OFF());
+    const state = (0, import_vault2.getItem)(STORAGE_KEY);
+    setLoading(true);
+    const payload = {
+      action: "LOGOUTUSER",
+      userId: state.agentId || ""
+    };
+    return axios_default.post(END_POINT.LOGOUT, payload).then((res) => {
+      sdkStateManager.clearStorageAndReset();
+      (0, import_vault2.removeItem)(STORAGE_KEY);
+      setData(res == null ? void 0 : res.data);
+      setSuccess(true);
+      return res == null ? void 0 : res.data;
+    }).catch((err) => {
+      var _a2, _b, _c, _d;
+      setIsError(true);
+      setError(err);
+      if ((_c = (_b = (_a2 = err == null ? void 0 : err.response) == null ? void 0 : _a2.data) == null ? void 0 : _b.data) == null ? void 0 : _c.clearAgentData) {
+        sdkStateManager.clearStorageAndReset();
+        (0, import_vault2.removeItem)(STORAGE_KEY);
+      }
+      return (_d = err == null ? void 0 : err.response) == null ? void 0 : _d.data;
+    }).finally(() => {
+      setLoading(false);
+    });
+  }, []);
+  return {
+    logout: handleLogout,
+    isLoading: loading,
+    isSuccess: success,
+    isError,
+    error,
+    data
+  };
+};
+
+// call-control-sdk/lib/hooks/useEndCall.ts
+var import_react2 = require("react");
+var import_vault3 = require("@react-solutions/vault");
+var useEndCall = () => {
+  const [loading, setLoading] = (0, import_react2.useState)(false);
+  const [success, setSuccess] = (0, import_react2.useState)(false);
+  const [isError, setIsError] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const [data, setData] = (0, import_react2.useState)(null);
+  const handleEndCall = (0, import_react2.useCallback)(
+    async (data2) => {
+      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+      const state = (0, import_vault3.getItem)(STORAGE_KEY);
+      setLoading(true);
+      const payload = {
+        action: "ENDCALL",
+        userId: state == null ? void 0 : state.agentId,
+        processid: (_c = (_b = (_a2 = state == null ? void 0 : state.process) == null ? void 0 : _a2.process_id) == null ? void 0 : _b.toString()) != null ? _c : "",
+        process_name: (_e = (_d = state == null ? void 0 : state.process) == null ? void 0 : _d.process_name) != null ? _e : "",
+        callreferenceid: (_g = (_f = state == null ? void 0 : state.callData) == null ? void 0 : _f.convox_id) != null ? _g : "",
+        mobile_number: (_i = (_h = state == null ? void 0 : state.callData) == null ? void 0 : _h.phone_number) != null ? _i : "",
+        disposition: (_j = data2 == null ? void 0 : data2.disposition) != null ? _j : "RES",
+        set_followUp: (_k = data2 == null ? void 0 : data2.followUp) != null ? _k : "N",
+        callback_date: (_l = data2 == null ? void 0 : data2.callbackDate) != null ? _l : "",
+        callback_hrs: (_m = data2 == null ? void 0 : data2.callbackHrs) != null ? _m : "",
+        callback_mins: (_n = data2 == null ? void 0 : data2.callbackMins) != null ? _n : "",
+        endcall_type: "CLOSE",
+        patient_enquiry: (_o = data2 == null ? void 0 : data2.patientLog) != null ? _o : null
+      };
+      return axios_default.post(END_POINT.END_CALL, payload, {
+        params: {
+          isBreak: (_p = data2 == null ? void 0 : data2.isBreak) != null ? _p : false
+        }
+      }).then((res) => {
+        sdkStateManager.resetConferenceLines();
+        sdkStateManager.endCall();
+        setData(res == null ? void 0 : res.data);
+        setSuccess(true);
+        return res == null ? void 0 : res.data;
+      }).catch((err) => {
+        var _a3;
+        setIsError(true);
+        setError(err);
+        return (_a3 = err == null ? void 0 : err.response) == null ? void 0 : _a3.data;
+      }).finally(() => {
+        setLoading(false);
+      });
+    },
+    []
+  );
+  return {
+    handleEndCall,
+    isLoading: loading,
+    isSuccess: success,
+    isError,
+    error,
+    data
+  };
+};
+
+// call-control-sdk/lib/hooks/useClickToCall.ts
+var import_react3 = require("react");
+var import_vault4 = require("@react-solutions/vault");
+var useClickToCall = () => {
+  const [loading, setLoading] = (0, import_react3.useState)(false);
+  const [success, setSuccess] = (0, import_react3.useState)(false);
+  const [isError, setIsError] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const [data, setData] = (0, import_react3.useState)(null);
+  const handleStartCall = (0, import_react3.useCallback)(async (data2) => {
+    var _a2, _b, _c, _d, _e, _f, _g, _h;
+    const state = (0, import_vault4.getItem)(STORAGE_KEY);
+    setLoading(true);
+    if (((_a2 = state == null ? void 0 : state.callData) == null ? void 0 : _a2.status) === "IDLE") {
+      const payload = {
+        action: "CALL",
+        userId: state == null ? void 0 : state.agentId,
+        phone_number: data2 == null ? void 0 : data2.mobileNumber
+      };
+      return axios_default.post(END_POINT.CLICK_TO_CALL, payload).then((res) => {
+        sdkStateManager.resetConferenceLines();
+        setData(res == null ? void 0 : res.data);
+        setSuccess(true);
+        return res == null ? void 0 : res.data;
+      }).catch((err) => {
+        var _a3;
+        setIsError(true);
+        setError(err);
+        return (_a3 = err == null ? void 0 : err.response) == null ? void 0 : _a3.data;
+      }).finally(() => {
+        setLoading(false);
+      });
+    } else if (((_b = state == null ? void 0 : state.callData) == null ? void 0 : _b.status) === "ONCALL") {
+      const line_used = (_d = (_c = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _c.filter((each) => each.line !== 1)) == null ? void 0 : _d.find((each) => each.status === "IDLE" && !(each == null ? void 0 : each.isCallStart));
+      const payload = {
+        action: "EXTERNAL_CONFERENCE",
+        operation: `CALL${line_used.line}`,
+        line_used: String(line_used.line),
+        thirdparty_no: data2 == null ? void 0 : data2.mobileNumber,
+        userid: (_f = (_e = state.callData) == null ? void 0 : _e.agent_id) != null ? _f : "",
+        process: (_h = (_g = state.callData) == null ? void 0 : _g.process_name) != null ? _h : ""
+      };
+      return axios_default.post(END_POINT.CONFERENCE_CALL, payload).then((res) => {
+        setData(res == null ? void 0 : res.data);
+        setSuccess(true);
+        sdkStateManager.setOpenConferenceDialog(true);
+        return res == null ? void 0 : res.data;
+      }).catch((err) => {
+        var _a3;
+        setIsError(true);
+        setError(err);
+        return (_a3 = err == null ? void 0 : err.response) == null ? void 0 : _a3.data;
+      }).finally(() => {
+        setLoading(false);
+      });
+    } else {
+      alert("Agent is not ready");
+    }
+  }, []);
+  return {
+    handleStartCall,
+    isLoading: loading,
+    isSuccess: success,
+    isError,
+    error,
+    data
+  };
+};
+
+// call-control-sdk/lib/hooks/useGetCallerData.ts
+var import_react4 = require("react");
+var useGetCallerData = () => {
+  const { process_id, process_name, status, phone_number, agent_id, convox_id } = sdkStateManager.getState().callData;
+  const initialCallData = {
+    phone_number,
+    status,
+    callReferenceId: convox_id,
+    agent_id,
+    process_id,
+    process_name
+  };
+  const [callData, setCallData] = (0, import_react4.useState)(initialCallData);
+  (0, import_react4.useEffect)(() => {
+    const unsubscribe = sdkStateManager.subscribe(() => {
+      const { process_id: process_id2, process_name: process_name2, status: status2, phone_number: phone_number2, agent_id: agent_id2, convox_id: convox_id2 } = sdkStateManager.getState().callData;
+      const currentCallData = {
+        phone_number: phone_number2,
+        status: status2,
+        callReferenceId: convox_id2,
+        agent_id: agent_id2,
+        process_id: process_id2,
+        process_name: process_name2
+      };
+      setCallData(currentCallData);
+    });
+    return unsubscribe;
+  }, []);
+  return callData;
+};
+
+// call-control-sdk/lib/hooks/useGetAuthorizationToken.ts
+var import_react5 = require("react");
+var useGetAuthorizationToken = () => {
+  const [token, setToken] = (0, import_react5.useState)(sdkStateManager.getSdkAuthToken());
+  (0, import_react5.useEffect)(() => {
+    const unsubscribe = sdkStateManager.subscribe(() => {
+      setToken(sdkStateManager.getSdkAuthToken());
+    });
+    return unsubscribe;
+  }, []);
+  return token;
+};
+
+// call-control-sdk/lib/components/callControlPanel.tsx
+var import_react13 = require("react");
+
+// call-control-sdk/lib/components/callControls.tsx
+var import_icons_material2 = require("@mui/icons-material");
+var import_material4 = require("@mui/material");
+var import_react11 = require("react");
+
+// call-control-sdk/lib/components/dialog.tsx
+var import_icons_material = require("@mui/icons-material");
+var import_material3 = require("@mui/material");
+var import_react9 = require("react");
+
+// call-control-sdk/lib/hooks/useSDKState.ts
+var import_react6 = require("react");
+function useSDKState() {
+  const [state, setState] = (0, import_react6.useState)(sdkStateManager.getState());
+  (0, import_react6.useEffect)(() => {
+    const unsubscribe = sdkStateManager.subscribe(() => {
+      setState(sdkStateManager.getState());
+    });
+    return unsubscribe;
+  }, []);
+  return state;
+}
+
+// call-control-sdk/lib/services/request.ts
+var import_react8 = require("react");
+
+// call-control-sdk/lib/services/toastMessage.tsx
+var import_react7 = require("react");
+var import_material = require("@mui/material");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ToastContext = (0, import_react7.createContext)(void 0);
+var useToast = () => {
+  const ctx = (0, import_react7.useContext)(ToastContext);
+  if (!ctx) throw new Error("useToast must be used inside ToastProvider");
+  return ctx;
+};
+var ToastProvider = ({ children }) => {
+  const [open, setOpen] = (0, import_react7.useState)(false);
+  const [message, setMessage] = (0, import_react7.useState)("");
+  const [severity, setSeverity] = (0, import_react7.useState)("info");
+  const showToast = (msg, sev = "info") => {
+    setMessage(msg);
+    setSeverity(sev);
+    setOpen(true);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ToastContext.Provider, { value: { showToast }, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_material.Snackbar,
+      {
+        open,
+        color: severity,
+        autoHideDuration: 3e3,
+        onClose: () => setOpen(false),
+        anchorOrigin: { vertical: "top", horizontal: "right" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_material.Alert,
+          {
+            variant: "filled",
+            severity,
+            onClose: () => setOpen(false),
+            sx: { width: "100%" },
+            children: message
+          }
+        )
+      }
+    )
+  ] });
+};
+
+// call-control-sdk/lib/services/request.ts
+var initialState = {
+  isLoading: false,
+  isSuccess: false,
+  isError: false,
+  error: null,
+  data: null
+};
+var reducer = (state, action) => {
+  if (action.type === "isLoading") {
+    return __spreadProps(__spreadValues({}, state), {
+      isLoading: action.payload
+    });
+  } else if (action.type === "isSuccess") {
+    return __spreadProps(__spreadValues({}, state), {
+      isSuccess: true,
+      data: action.payload
+    });
+  } else if (action.type === "isError") {
+    return __spreadProps(__spreadValues({}, state), {
+      isError: true,
+      error: action.payload
+    });
+  } else if (action.type === "reset") {
+    return {
+      isLoading: false,
+      isSuccess: false,
+      isError: false,
+      error: null,
+      data: null
+    };
+  }
+  throw Error("Unknown action.");
+};
+var useGetRequest = (props = {}) => {
+  const { onSuccess = null, onError = null } = props;
+  const { showToast } = useToast();
+  const [state, dispatch] = (0, import_react8.useReducer)(reducer, initialState);
+  const getRequest = (0, import_react8.useCallback)(
+    (url, config = {}) => {
+      dispatch({
+        type: "isLoading",
+        payload: true
+      });
+      axios_default.get(url, config).then((res) => {
+        var _a2, _b;
+        if ((_a2 = res.data) == null ? void 0 : _a2.success) {
+          dispatch({
+            type: "isSuccess",
+            payload: res.data
+          });
+          onSuccess == null ? void 0 : onSuccess(res.data, config);
+        } else {
+          dispatch({
+            type: "isError",
+            payload: res.data
+          });
+          showToast((_b = res.data) == null ? void 0 : _b.message, "error");
+          onError == null ? void 0 : onError(res.data, config);
+        }
+      }).catch((err) => {
+        var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+        const error = {
+          status: (_b = (_a2 = err.response) == null ? void 0 : _a2.status) != null ? _b : 500,
+          message: ((_d = (_c = err.response) == null ? void 0 : _c.data) == null ? void 0 : _d.detail) || ((_f = (_e = err.response) == null ? void 0 : _e.data) == null ? void 0 : _f.message) || err.message || "An unknown error occurred",
+          data: (_h = (_g = err.response) == null ? void 0 : _g.data) != null ? _h : null,
+          statusText: (_j = (_i = err.response) == null ? void 0 : _i.statusText) != null ? _j : "",
+          code: (_k = err == null ? void 0 : err.code) != null ? _k : "",
+          name: (_l = err == null ? void 0 : err.name) != null ? _l : ""
+        };
+        showToast(error.message, "error");
+        dispatch({
+          type: "isError",
+          payload: error
+        });
+        onError == null ? void 0 : onError(error, config);
+      }).finally(() => {
+        dispatch({
+          type: "isLoading",
+          payload: false
+        });
+      });
+    },
+    [onSuccess, onError, showToast]
+  );
+  return [getRequest, state];
+};
+var usePostRequest = (props = {}) => {
+  const { onSuccess = null, onError = null, disabledSuccessToast = false } = props;
+  const { showToast } = useToast();
+  const [state, dispatch] = (0, import_react8.useReducer)(reducer, initialState);
+  const postRequest = (0, import_react8.useCallback)(
+    async (url, payload, config = {}) => {
+      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+      dispatch({
+        type: "isLoading",
+        payload: true
+      });
+      try {
+        try {
+          const res = await axios_default.post(url, payload, config);
+          dispatch({
+            type: "isSuccess",
+            payload: res.data
+          });
+          onSuccess == null ? void 0 : onSuccess(res.data, payload);
+          if (!disabledSuccessToast) {
+            showToast((_a2 = res.data) == null ? void 0 : _a2.message, "success");
+          }
+        } catch (err) {
+          const error = {
+            status: (_c = (_b = err.response) == null ? void 0 : _b.status) != null ? _c : 500,
+            message: ((_e = (_d = err.response) == null ? void 0 : _d.data) == null ? void 0 : _e.detail) || ((_g = (_f = err.response) == null ? void 0 : _f.data) == null ? void 0 : _g.message) || err.message || "An unknown error occurred",
+            data: (_i = (_h = err.response) == null ? void 0 : _h.data) != null ? _i : null,
+            statusText: (_k = (_j = err.response) == null ? void 0 : _j.statusText) != null ? _k : "",
+            code: (_l = err == null ? void 0 : err.code) != null ? _l : "",
+            name: (_m = err == null ? void 0 : err.name) != null ? _m : ""
+          };
+          showToast(error.message, "error");
+          dispatch({
+            type: "isError",
+            payload: error
+          });
+          onError == null ? void 0 : onError(error, payload);
+        }
+      } finally {
+        dispatch({
+          type: "isLoading",
+          payload: false
+        });
+      }
+    },
+    [onSuccess, onError, showToast]
+  );
+  return [postRequest, state];
+};
+
+// call-control-sdk/lib/components/styles.ts
+var import_material2 = require("@mui/material");
+var useStyles = ({
+  disabled,
+  enabled,
+  outlined
+}) => {
+  const theme = (0, import_material2.useTheme)();
+  return {
+    disabled: __spreadValues({
+      padding: "0px",
+      margin: "0px",
+      minWidth: "40px !important",
+      borderRadius: "16px",
+      border: `1px solid rgb(206, 204, 204)`,
+      height: "40px",
+      "&:hover": {
+        boxShadow: " 0px 2px 2px rgba(0, 0, 0, 0.79)",
+        border: `1px solid ${theme.palette.primary.main}`
+      },
+      "&:active": {
+        bgcolor: "primary.main",
+        boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
+      }
+    }, disabled),
+    enabled: __spreadValues({
+      padding: "0px",
+      margin: "0px",
+      minWidth: "40px !important",
+      borderRadius: "16px",
+      boxShadow: " 0px 2px 1px rgba(0, 0, 0, 0.507)",
+      border: `1px solid ${theme.palette.primary.main}`,
+      height: "40px",
+      "&:hover": {
+        boxShadow: " 0px 2px 1px rgba(0, 0, 0, 0.507)",
+        border: `1px solid ${theme.palette.primary.main}`
+      },
+      "&:active": {
+        bgcolor: "primary.main",
+        boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
+      }
+    }, enabled),
+    outlined: __spreadValues({
+      padding: "0px",
+      margin: "0px",
+      minWidth: "40px !important",
+      borderRadius: "16px",
+      backgroundColor: theme.palette.grey[200],
+      boxShadow: `0px 2px 1px ${theme.palette.primary.light}`,
+      border: `0px solid ${theme.palette.primary.main}`,
+      height: "40px",
+      "&:hover": {
+        boxShadow: `0px 2px 1px ${theme.palette.primary.main}`,
+        border: `0px solid ${theme.palette.primary.main}`
+      },
+      "&:active": {
+        bgcolor: "primary.main",
+        boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
+      }
+    }, outlined)
+  };
+};
+var styles_default = useStyles;
+
+// call-control-sdk/lib/components/dialog.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ConferenceTableRow = ({ each, isLineDialing }) => {
+  var _a2, _b, _c, _d, _e, _f;
+  const state = useSDKState();
+  const theme = (0, import_material3.useTheme)();
+  const { showToast } = useToast();
+  const { disabled, enabled, outlined } = styles_default({
+    disabled: ((_a2 = state.sdkConfig) == null ? void 0 : _a2.disabled) || {},
+    enabled: ((_b = state.sdkConfig) == null ? void 0 : _b.enabled) || {},
+    outlined: ((_c = state.sdkConfig) == null ? void 0 : _c.outlined) || {}
+  });
+  const [conferenceCallStart, setConferenceCallStart] = (0, import_react9.useState)(false);
+  const [conferenceCallMerge, setConferenceCallMerge] = (0, import_react9.useState)(false);
+  const [conferenceCallHoldOrUnHold, setConferenceCallHoldOrUnHold] = (0, import_react9.useState)(false);
+  const [conferenceCallEnd, setConferenceCallEnd] = (0, import_react9.useState)(false);
+  const onConferenceLineUpdate = (line, data) => {
+    sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
+  };
+  const onConferenceCallStart = (line, data) => {
+    var _a3, _b2, _c2, _d2;
+    const line_used = __spreadValues(__spreadValues({}, line), data);
+    setConferenceCallStart(true);
+    const payload = {
+      action: "EXTERNAL_CONFERENCE",
+      operation: `CALL${line_used.line}`,
+      line_used: String(line_used.line),
+      thirdparty_no: line_used.phone,
+      userid: (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.agent_id) != null ? _b2 : "",
+      process: (_d2 = (_c2 = state.callData) == null ? void 0 : _c2.process_name) != null ? _d2 : ""
+    };
+    axios_default.post(END_POINT.CONFERENCE_CALL, payload).then((res) => {
+      var _a4;
+      showToast((_a4 = res.data) == null ? void 0 : _a4.message, "success");
+    }).catch((err) => {
+      var _a4, _b3, _c3, _d3;
+      const message = ((_b3 = (_a4 = err.response) == null ? void 0 : _a4.data) == null ? void 0 : _b3.detail) || ((_d3 = (_c3 = err.response) == null ? void 0 : _c3.data) == null ? void 0 : _d3.message) || err.message || "An unknown error occurred";
+      showToast(message, "error");
+    }).finally(() => {
+      setConferenceCallStart(false);
+    });
+  };
+  const onMergeConferenceCall = (line, data) => {
+    var _a3, _b2, _c2, _d2;
+    const line_used = __spreadValues(__spreadValues({}, line), data);
+    setConferenceCallMerge(true);
+    const payload = {
+      action: "EXTERNAL_CONFERENCE",
+      operation: `CONFERENCE`,
+      line_used: String(line_used.line),
+      thirdparty_no: line_used.phone,
+      userid: (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.agent_id) != null ? _b2 : "",
+      process: (_d2 = (_c2 = state.callData) == null ? void 0 : _c2.process_name) != null ? _d2 : ""
+    };
+    axios_default.post(END_POINT.CONFERENCE_CALL, payload).then((res) => {
+      var _a4, _b3, _c3;
+      if (((_a4 = state.callData) == null ? void 0 : _a4.hold) === 1) {
+        handleHoldToggle();
+      }
+      if (((_b3 = state.callData) == null ? void 0 : _b3.mute) === 1) {
+        handleMuteToggle();
+      }
+      showToast((_c3 = res.data) == null ? void 0 : _c3.message, "success");
+    }).catch((err) => {
+      var _a4, _b3, _c3, _d3;
+      const message = ((_b3 = (_a4 = err.response) == null ? void 0 : _a4.data) == null ? void 0 : _b3.detail) || ((_d3 = (_c3 = err.response) == null ? void 0 : _c3.data) == null ? void 0 : _d3.message) || err.message || "An unknown error occurred";
+      showToast(message, "error");
+    }).finally(() => {
+      setConferenceCallMerge(false);
+    });
+  };
+  const onHoldOrUnHoldConferenceCall = (line, data, type) => {
+    var _a3, _b2, _c2, _d2;
+    const line_used = __spreadValues(__spreadValues({}, line), data);
+    setConferenceCallHoldOrUnHold(true);
+    const payload = {
+      action: "EXTERNAL_CONFERENCE",
+      operation: type,
+      hold_channel_no: type === "HOLDUSER" ? `hold${line_used.line}` : `unhold${line_used.line}`,
+      userid: (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.agent_id) != null ? _b2 : "",
+      process: (_d2 = (_c2 = state.callData) == null ? void 0 : _c2.process_name) != null ? _d2 : ""
+    };
+    axios_default.post(END_POINT.CONFERENCE_CALL_HOLD_OR_UN_HOLD, payload).then((res) => {
+      var _a4;
+      showToast((_a4 = res.data) == null ? void 0 : _a4.message, "success");
+    }).catch((err) => {
+      var _a4, _b3, _c3, _d3;
+      const message = ((_b3 = (_a4 = err.response) == null ? void 0 : _a4.data) == null ? void 0 : _b3.detail) || ((_d3 = (_c3 = err.response) == null ? void 0 : _c3.data) == null ? void 0 : _d3.message) || err.message || "An unknown error occurred";
+      showToast(message, "error");
+    }).finally(() => {
+      setConferenceCallHoldOrUnHold(false);
+    });
+  };
+  const onEndConferenceCall = (line, data) => {
+    var _a3, _b2, _c2, _d2;
+    const line_used = __spreadValues(__spreadValues({}, line), data);
+    setConferenceCallEnd(true);
+    const payload = {
+      action: "EXTERNAL_CONFERENCE",
+      operation: "HANGUP_CHANNEL",
+      line_used: String(line_used.line),
+      user_type: `THIRDPARTY${line_used.line - 1}`,
+      thirdparty_no: line_used.phone,
+      userid: (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.agent_id) != null ? _b2 : "",
+      process: (_d2 = (_c2 = state.callData) == null ? void 0 : _c2.process_name) != null ? _d2 : ""
+    };
+    axios_default.post(END_POINT.CONFERENCE_CALL_END, payload).then((res) => {
+      var _a4;
+      showToast((_a4 = res.data) == null ? void 0 : _a4.message, "success");
+    }).catch((err) => {
+      var _a4, _b3, _c3, _d3;
+      const message = ((_b3 = (_a4 = err.response) == null ? void 0 : _a4.data) == null ? void 0 : _b3.detail) || ((_d3 = (_c3 = err.response) == null ? void 0 : _c3.data) == null ? void 0 : _d3.message) || err.message || "An unknown error occurred";
+      showToast(message, "error");
+    }).finally(() => {
+      setConferenceCallEnd(false);
+    });
+  };
+  const [holdOrUnHold] = usePostRequest();
+  const [muteOrUnMute] = usePostRequest();
+  const handleHoldToggle = () => {
+    var _a3;
+    const payload = {
+      action: ((_a3 = state.callData) == null ? void 0 : _a3.hold) === 1 ? "UNHOLD" /* UNHOLD */ : "HOLD" /* HOLD */,
+      userId: state.agentId
+    };
+    holdOrUnHold(END_POINT.HOLD_CALL, payload);
+  };
+  const handleMuteToggle = () => {
+    var _a3;
+    const payload = {
+      action: ((_a3 = state.callData) == null ? void 0 : _a3.mute) === 1 ? "UNMUTE" /* UNMUTE */ : "MUTE" /* MUTE */,
+      userId: state.agentId
+    };
+    muteOrUnMute(END_POINT.MUTE_CALL, payload);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_material3.TableRow,
+    {
+      sx: {
+        border: "2px solid #fff"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_material3.TableCell,
+          {
+            sx: {
+              padding: "6px",
+              flex: 1,
+              width: "100px"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Typography, { children: [
+              "Line ",
+              (_d = each == null ? void 0 : each.line) != null ? _d : "",
+              ". "
+            ] })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_material3.TableCell,
+          {
+            sx: {
+              padding: "6px",
+              width: "150px"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_material3.Typography,
+              {
+                variant: "body2",
+                sx: {
+                  px: 1,
+                  borderRadius: "10px",
+                  width: "150px"
+                },
+                children: (_e = each == null ? void 0 : each.status) != null ? _e : ""
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_material3.TableCell,
+          {
+            sx: {
+              padding: "6px",
+              flex: 1
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_material3.TextField,
+              {
+                size: "small",
+                placeholder: "Phone Number",
+                fullWidth: true,
+                value: (each == null ? void 0 : each.phone) || "",
+                disabled: (each == null ? void 0 : each.line) === 1 || [
+                  "ONCALL" /* ONCALL */,
+                  "DISCONNECTED" /* DISCONNECTED */,
+                  "CONFERENCE" /* CONFERENCE */,
+                  "HOLD" /* HOLD */,
+                  "MUTE" /* MUTE */,
+                  "DIALING" /* DIALING */,
+                  "RINGING" /* RINGING */
+                ].includes((_f = each == null ? void 0 : each.status) != null ? _f : "") || isLineDialing,
+                onChange: (e) => {
+                  onConferenceLineUpdate(each, { phone: e.target.value });
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_material3.TableCell,
+          {
+            sx: {
+              padding: "6px",
+              flex: 1
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              import_material3.Box,
+              {
+                sx: {
+                  width: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "flex-start",
+                  gap: "10px"
+                },
+                children: [
+                  (each == null ? void 0 : each.line) === 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: (each == null ? void 0 : each.status) !== "HOLD" /* HOLD */ ? "Hold" : "Resume", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    import_material3.Button,
+                    {
+                      variant: (each == null ? void 0 : each.status) === "HOLD" /* HOLD */ ? "contained" : "outlined",
+                      sx: (each == null ? void 0 : each.status) === "CONFERENCE" /* CONFERENCE */ ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                      onClick: () => {
+                        if (each.status === "HOLD" /* HOLD */) {
+                          onHoldOrUnHoldConferenceCall(each, { isHold: false }, "UNHOLDUSER");
+                        } else {
+                          onHoldOrUnHoldConferenceCall(each, { isHold: true }, "HOLDUSER");
+                        }
+                      },
+                      disabled: (each == null ? void 0 : each.status) !== "CONFERENCE" /* CONFERENCE */ && (each == null ? void 0 : each.status) !== "HOLD" /* HOLD */ || conferenceCallHoldOrUnHold,
+                      children: each.status === "HOLD" /* HOLD */ ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                        import_material3.Box,
+                        {
+                          sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            gap: "5px",
+                            width: "98px"
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              import_material3.Typography,
+                              {
+                                variant: "body2",
+                                sx: {
+                                  fontSize: "12px",
+                                  color: each.status === "HOLD" /* HOLD */ ? "#fff" : "initial"
+                                },
+                                children: "Unhold"
+                              }
+                            ),
+                            conferenceCallHoldOrUnHold ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              import_material3.CircularProgress,
+                              {
+                                size: "16px",
+                                sx: {
+                                  color: theme.palette.primary.main
+                                }
+                              }
+                            ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.PlayArrow, {})
+                          ]
+                        }
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                        import_material3.Box,
+                        {
+                          sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            gap: "5px",
+                            width: "98px"
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              import_material3.Typography,
+                              {
+                                variant: "body2",
+                                sx: {
+                                  color: each.status === "HOLD" /* HOLD */ ? "#fff" : "#000",
+                                  fontSize: "12px"
+                                },
+                                children: "Hold"
+                              }
+                            ),
+                            conferenceCallHoldOrUnHold ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              import_material3.CircularProgress,
+                              {
+                                size: "16px",
+                                sx: {
+                                  color: theme.palette.primary.main
+                                }
+                              }
+                            ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Pause, {})
+                          ]
+                        }
+                      )
+                    }
+                  ) }),
+                  (each == null ? void 0 : each.line) !== 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: "Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    import_material3.Button,
+                    {
+                      variant: (each == null ? void 0 : each.status) !== "IDLE" /* IDLE */ ? "outlined" : "contained",
+                      color: "success",
+                      sx: (each == null ? void 0 : each.status) !== "IDLE" /* IDLE */ ? __spreadValues({}, disabled) : __spreadProps(__spreadValues({}, enabled), {
+                        border: `0px solid ${theme.palette.success.light}`,
+                        "&:hover": {
+                          bgcolor: "success.light",
+                          boxShadow: `0px 2px 1px ${theme.palette.success.light}`,
+                          border: `0px solid ${theme.palette.success.light}`
+                        },
+                        "&:active": {
+                          bgcolor: "success.light",
+                          boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
+                        }
+                      }),
+                      onClick: () => {
+                        onConferenceCallStart(each, {});
+                      },
+                      disabled: (each == null ? void 0 : each.status) !== "IDLE" /* IDLE */ || isLineDialing,
+                      children: conferenceCallStart ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        import_material3.CircularProgress,
+                        {
+                          size: "20px",
+                          color: "success"
+                        }
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        import_icons_material.Call,
+                        {
+                          sx: {
+                            color: (each == null ? void 0 : each.status) !== "IDLE" /* IDLE */ ? "default" : "#f3f2f2"
+                          }
+                        }
+                      )
+                    }
+                  ) }),
+                  (each == null ? void 0 : each.line) !== 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: "Merge Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    import_material3.Button,
+                    {
+                      variant: (each == null ? void 0 : each.status) === "ONCALL" /* ONCALL */ ? "contained" : "outlined",
+                      sx: (each == null ? void 0 : each.status) === "ONCALL" /* ONCALL */ ? __spreadValues({}, enabled) : __spreadValues({}, disabled),
+                      onClick: () => {
+                        onMergeConferenceCall(each, {
+                          isMergeCall: true
+                        });
+                      },
+                      disabled: (each == null ? void 0 : each.status) !== "ONCALL" /* ONCALL */,
+                      children: conferenceCallMerge ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.CircularProgress, { size: "20px" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.CallSplit, {})
+                    }
+                  ) }),
+                  (each == null ? void 0 : each.line) !== 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: (each == null ? void 0 : each.status) !== "HOLD" /* HOLD */ ? "Hold" : "Resume", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    import_material3.Button,
+                    {
+                      variant: (each == null ? void 0 : each.status) === "HOLD" /* HOLD */ ? "contained" : "outlined",
+                      sx: (each == null ? void 0 : each.status) === "CONFERENCE" /* CONFERENCE */ ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                      onClick: () => {
+                        if (each.status === "HOLD" /* HOLD */) {
+                          onHoldOrUnHoldConferenceCall(each, { isHold: false }, "UNHOLDUSER");
+                        } else {
+                          onHoldOrUnHoldConferenceCall(each, { isHold: true }, "HOLDUSER");
+                        }
+                      },
+                      disabled: (each == null ? void 0 : each.status) !== "CONFERENCE" /* CONFERENCE */ && (each == null ? void 0 : each.status) !== "HOLD" /* HOLD */ || conferenceCallHoldOrUnHold,
+                      children: conferenceCallHoldOrUnHold ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        import_material3.CircularProgress,
+                        {
+                          size: "20px",
+                          sx: {
+                            color: theme.palette.primary.main
+                          }
+                        }
+                      ) : each.status === "HOLD" /* HOLD */ ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.PlayArrow, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Pause, {})
+                    }
+                  ) }),
+                  (each == null ? void 0 : each.line) !== 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: "End Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    import_material3.Button,
+                    {
+                      variant: (each == null ? void 0 : each.status) !== "IDLE" /* IDLE */ && (each == null ? void 0 : each.status) !== "DISCONNECTED" /* DISCONNECTED */ ? "contained" : "outlined",
+                      color: "error",
+                      sx: (each == null ? void 0 : each.status) !== "IDLE" /* IDLE */ && (each == null ? void 0 : each.status) !== "DISCONNECTED" /* DISCONNECTED */ ? __spreadProps(__spreadValues({}, enabled), {
+                        border: `0px solid ${theme.palette.error.light}`,
+                        "&:hover": {
+                          bgcolor: "error.light",
+                          boxShadow: `0px 2px 1px ${theme.palette.error.light}`,
+                          border: `0px solid ${theme.palette.error.light}`
+                        },
+                        "&:active": {
+                          bgcolor: "error.light",
+                          boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
+                        }
+                      }) : __spreadValues({}, disabled),
+                      onClick: () => {
+                        onEndConferenceCall(each, {
+                          isCallStart: false,
+                          isMergeCall: false,
+                          isMute: false,
+                          isHold: false
+                        });
+                      },
+                      disabled: (each == null ? void 0 : each.status) === "IDLE" /* IDLE */ || (each == null ? void 0 : each.status) === "DISCONNECTED" /* DISCONNECTED */ || conferenceCallEnd,
+                      children: conferenceCallEnd ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        import_material3.CircularProgress,
+                        {
+                          size: "20px",
+                          color: "error"
+                        }
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.CallEnd, {})
+                    }
+                  ) })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    },
+    each.line
+  );
+};
+function ConferenceDialog() {
+  var _a2, _b, _c, _d, _e, _f, _g;
+  const state = useSDKState();
+  const { showToast } = useToast();
+  const [conferenceCallEndAll, setConferenceCallEndAll] = (0, import_react9.useState)(false);
+  const handleClose = () => {
+    sdkStateManager.setOpenConferenceDialog(false);
+  };
+  const onEndAllConferenceCalls = () => {
+    var _a3, _b2, _c2, _d2;
+    setConferenceCallEndAll(true);
+    const payload = {
+      action: "EXTERNAL_CONFERENCE",
+      operation: "ENDCONFERENCE",
+      userid: (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.agent_id) != null ? _b2 : "",
+      process: (_d2 = (_c2 = state.callData) == null ? void 0 : _c2.process_name) != null ? _d2 : ""
+    };
+    axios_default.post(END_POINT.CONFERENCE_CALL_END_ALL, payload).then((res) => {
+      var _a4;
+      showToast((_a4 = res.data) == null ? void 0 : _a4.message, "success");
+      sdkStateManager.resetConferenceLines();
+      handleClose();
+    }).catch((err) => {
+      var _a4, _b3, _c3, _d3;
+      const message = ((_b3 = (_a4 = err.response) == null ? void 0 : _a4.data) == null ? void 0 : _b3.detail) || ((_d3 = (_c3 = err.response) == null ? void 0 : _c3.data) == null ? void 0 : _d3.message) || err.message || "An unknown error occurred";
+      showToast(message, "error");
+    }).finally(() => {
+      setConferenceCallEndAll(false);
+    });
+  };
+  const handleTransferConferenceCall = () => {
+    var _a3, _b2, _c2, _d2;
+    const payload = {
+      action: "TRANSFERAPI",
+      userid: (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.agent_id) != null ? _b2 : "",
+      process_name: (_d2 = (_c2 = state.callData) == null ? void 0 : _c2.process_name) != null ? _d2 : ""
+    };
+    axios_default.post(END_POINT.CONFERENCE_CALL_TRANSFER, payload).then((res) => {
+      var _a4;
+      showToast((_a4 = res.data) == null ? void 0 : _a4.message, "success");
+      sdkStateManager.resetConferenceLines();
+      handleClose();
+    }).catch((err) => {
+      var _a4, _b3, _c3, _d3;
+      const message = ((_b3 = (_a4 = err.response) == null ? void 0 : _a4.data) == null ? void 0 : _b3.detail) || ((_d3 = (_c3 = err.response) == null ? void 0 : _c3.data) == null ? void 0 : _d3.message) || err.message || "An unknown error occurred";
+      showToast(message, "error");
+    });
+  };
+  const isLineDialing = (_a2 = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _a2.some((item) => (item == null ? void 0 : item.status) === "DIALING" /* DIALING */);
+  const conferenceLineCount = (_d = (_c = (_b = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _b.filter((item) => (item == null ? void 0 : item.status) === "CONFERENCE" /* CONFERENCE */)) == null ? void 0 : _c.length) != null ? _d : 0;
+  const isHold = (_e = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _e.some((item) => (item == null ? void 0 : item.status) === "HOLD" /* HOLD */);
+  const isOnCall = (_f = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _f.some((item) => (item == null ? void 0 : item.status) === "ONCALL" /* ONCALL */);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_material3.Dialog,
+    {
+      open: state.openConferenceDialog,
+      "aria-labelledby": "alert-dialog-title",
+      "aria-describedby": "alert-dialog-description",
+      maxWidth: "md",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          import_material3.Box,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              padding: "0px 16px",
+              paddingBottom: "6px",
+              boxShadow: "1px 1px 2px #e7e5e5ff",
+              margin: "10px 0px"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                import_material3.Typography,
+                {
+                  variant: "body1",
+                  color: "primary.main",
+                  sx: { textTransform: "uppercase", fontWeight: "bold", fontSize: "14px" },
+                  children: [
+                    (_g = state == null ? void 0 : state.agentId) != null ? _g : "",
+                    " conference"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Box, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_material3.Button,
+                  {
+                    color: "primary",
+                    variant: "outlined",
+                    onClick: handleTransferConferenceCall,
+                    disabled: conferenceLineCount <= 1 || isHold || isLineDialing || isOnCall,
+                    startIcon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.TransferWithinAStation, {}),
+                    children: "Exit Conference"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_material3.IconButton,
+                  {
+                    onClick: handleClose,
+                    color: "primary",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, { sx: { color: "primary.main" } })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_material3.Box,
+          {
+            sx: {
+              boxShadow: "1px 1px 2px #e7e5e5ff",
+              margin: "0px 15px",
+              borderRadius: "20px"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_material3.TableContainer,
+              {
+                component: import_material3.Paper,
+                sx: {
+                  outline: "0px solid gray !important",
+                  boxShadow: "1px 1px 6px #e7e5e5ff"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  import_material3.Table,
+                  {
+                    sx: {
+                      border: "4px solid #ffffff !important"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                        import_material3.TableRow,
+                        {
+                          sx: {
+                            border: "2px solid #f3f3f3ff !important"
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              import_material3.TableCell,
+                              {
+                                sx: {
+                                  padding: "6px"
+                                },
+                                children: "Line"
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              import_material3.TableCell,
+                              {
+                                sx: {
+                                  padding: "6px"
+                                },
+                                children: "Status"
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              import_material3.TableCell,
+                              {
+                                sx: {
+                                  padding: "6px"
+                                },
+                                children: "Mobile Number"
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              import_material3.TableCell,
+                              {
+                                sx: {
+                                  padding: "6px"
+                                },
+                                children: "Call Actions"
+                              }
+                            )
+                          ]
+                        }
+                      ) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.TableBody, { children: state == null ? void 0 : state.conferenceLine.map((each) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        ConferenceTableRow,
+                        {
+                          each,
+                          isLineDialing
+                        }
+                      )) })
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_material3.Box,
+          {
+            textAlign: "center",
+            m: 2,
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              import_material3.Button,
+              {
+                variant: "outlined",
+                color: "error",
+                size: "large",
+                onClick: onEndAllConferenceCalls,
+                disabled: conferenceCallEndAll || conferenceLineCount <= 0,
+                sx: { px: 2, borderRadius: "20px", textTransform: "capitalize" },
+                children: [
+                  conferenceCallEndAll ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    import_material3.CircularProgress,
+                    {
+                      size: "20px",
+                      color: "error",
+                      sx: {
+                        marginRight: "8px"
+                      }
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    import_material3.IconButton,
+                    {
+                      sx: {
+                        bgcolor: "error.main",
+                        "&:hover": { bgcolor: "error.dark" },
+                        marginRight: "8px",
+                        width: "28px",
+                        height: "28px",
+                        fontSize: "12px",
+                        fontWeight: "600",
+                        lineHeight: "16px",
+                        letterSpacing: "0.02em",
+                        textTransform: "capitalize",
+                        color: "white",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        borderRadius: "50%"
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        import_icons_material.PhoneDisabled,
+                        {
+                          sx: {
+                            color: "white",
+                            fontSize: "16px",
+                            fontWeight: "600"
+                          }
+                        }
+                      )
+                    }
+                  ),
+                  "End Conference"
+                ]
+              }
+            )
+          }
+        )
+      ] })
+    }
+  ) });
+}
+function CallTransferDialog({ open }) {
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
+  const state = useSDKState();
+  const [mobileNumber, setMobileNumber] = (0, import_react9.useState)("");
+  const [transferCall] = usePostRequest({
+    onSuccess: () => {
+      sdkStateManager.setOpenCallTransferDialog(false);
+    }
+  });
+  const [blindTransferCall] = usePostRequest({
+    onSuccess: () => {
+      sdkStateManager.setOpenCallTransferDialog(false);
+    }
+  });
+  const [currentselecteTab, setCurrentselecteTab] = (0, import_react9.useState)("process");
+  const [getIdelAgentsList, { data: idleAgentsList, isLoading: isIdleAgentsListLoading }] = usePostRequest({
+    disabledSuccessToast: true
+  });
+  const [
+    getHospitalsServicesList,
+    { data: hospitalsServicesList, isLoading: isHospitalsServicesListLoading }
+  ] = useGetRequest({
+    disabledSuccessToast: true
+  });
+  const [
+    getProcessAndQueuesList,
+    { data: processAndQueuesList, isLoading: isProcessAndQueuesListLoading }
+  ] = usePostRequest({
+    disabledSuccessToast: true
+  });
+  const handleClose = () => {
+    sdkStateManager.setOpenCallTransferDialog(false);
+  };
+  const handleTransferCall = (data, type) => {
+    var _a3, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L;
+    if (type === "PROCESS") {
+      const payload = {
+        mobile_number: (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.phone_number) != null ? _b2 : "",
+        userid: (_d2 = (_c2 = state.callData) == null ? void 0 : _c2.agent_id) != null ? _d2 : "",
+        type: "PROCESS",
+        transfer_to: (_e2 = data == null ? void 0 : data.process_name) != null ? _e2 : "",
+        callreferenceid: (_g2 = (_f2 = state.callData) == null ? void 0 : _f2.convox_id) != null ? _g2 : "",
+        processid: String((_i2 = (_h2 = state.callData) == null ? void 0 : _h2.process_id) != null ? _i2 : ""),
+        process_name: (_k2 = (_j2 = state.callData) == null ? void 0 : _j2.process_name) != null ? _k2 : ""
+      };
+      transferCall(END_POINT.TRANSFER_CALL, payload);
+    } else if (type === "QUEUE") {
+      const payload = {
+        mobile_number: (_m2 = (_l2 = state.callData) == null ? void 0 : _l2.phone_number) != null ? _m2 : "",
+        userid: (_o2 = (_n2 = state.callData) == null ? void 0 : _n2.agent_id) != null ? _o2 : "",
+        type: "QUEUE",
+        transfer_to: (_p2 = data == null ? void 0 : data.queue_name) != null ? _p2 : "",
+        callreferenceid: (_r2 = (_q2 = state.callData) == null ? void 0 : _q2.convox_id) != null ? _r2 : "",
+        processid: String((_t2 = (_s2 = state.callData) == null ? void 0 : _s2.process_id) != null ? _t2 : ""),
+        process_name: (_v = (_u2 = state.callData) == null ? void 0 : _u2.process_name) != null ? _v : ""
+      };
+      transferCall(END_POINT.TRANSFER_CALL, payload);
+    } else if (type === "AGENT") {
+      const payload = {
+        mobile_number: (_x = (_w = state.callData) == null ? void 0 : _w.phone_number) != null ? _x : "",
+        userid: (_z = (_y = state.callData) == null ? void 0 : _y.agent_id) != null ? _z : "",
+        type: "AGENT",
+        transfer_to: (_A = data == null ? void 0 : data.user_id) != null ? _A : "",
+        callreferenceid: (_C = (_B = state.callData) == null ? void 0 : _B.convox_id) != null ? _C : "",
+        processid: String((_E = (_D = state.callData) == null ? void 0 : _D.process_id) != null ? _E : ""),
+        process_name: (_G = (_F = state.callData) == null ? void 0 : _F.process_name) != null ? _G : ""
+      };
+      transferCall(END_POINT.TRANSFER_CALL, payload);
+    } else if (type === "OTHER") {
+      const payload = {
+        action: "BLIND_TRANSFER",
+        userid: (_I = (_H = state.callData) == null ? void 0 : _H.agent_id) != null ? _I : "",
+        callreferenceid: (_K = (_J = state.callData) == null ? void 0 : _J.convox_id) != null ? _K : "",
+        blind_transfer_no: (_L = data == null ? void 0 : data.mobile_number) != null ? _L : ""
+      };
+      blindTransferCall(END_POINT.BLIEND_TRANSFER, payload);
+    }
+  };
+  (0, import_react9.useEffect)(() => {
+    getIdelAgentsList(END_POINT.AGENTS_LIST, {
+      status: "IDLE",
+      active: true
+    });
+    getProcessAndQueuesList(END_POINT.TRANSFER_TO_DETAILS, {
+      status: "ACTIVE",
+      active: true
+    });
+    getHospitalsServicesList(END_POINT.HOSPITALS_SERVICES);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_material3.Dialog,
+    {
+      open,
+      "aria-labelledby": "alert-dialog-title",
+      "aria-describedby": "alert-dialog-description",
+      fullWidth: true,
+      maxWidth: "sm",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          import_material3.Box,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              padding: "4px 16px",
+              boxShadow: "0px 1px 2px #f5f5f5ff"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { variant: "body1", children: " Call Transfer" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          import_material3.Box,
+          {
+            sx: {
+              margin: "10px",
+              borderRadius: "10px"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Box, { sx: { display: "flex", gap: 1, margin: "10px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_material3.Button,
+                  {
+                    variant: currentselecteTab === "process" ? "contained" : "outlined",
+                    onClick: () => {
+                      setCurrentselecteTab("process");
+                    },
+                    children: "Process"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_material3.Button,
+                  {
+                    variant: currentselecteTab === "queues" ? "contained" : "outlined",
+                    onClick: () => {
+                      setCurrentselecteTab("queues");
+                    },
+                    children: "Queues"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_material3.Button,
+                  {
+                    variant: currentselecteTab === "agents" ? "contained" : "outlined",
+                    onClick: () => {
+                      setCurrentselecteTab("agents");
+                      getIdelAgentsList(END_POINT.AGENTS_LIST, {
+                        status: "IDLE",
+                        active: true
+                      });
+                    },
+                    children: "Agents"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_material3.Button,
+                  {
+                    variant: currentselecteTab === "others" ? "contained" : "outlined",
+                    onClick: () => {
+                      setCurrentselecteTab("others");
+                    },
+                    children: "Others"
+                  }
+                )
+              ] }),
+              (isProcessAndQueuesListLoading || isIdleAgentsListLoading || isHospitalsServicesListLoading) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                import_material3.Box,
+                {
+                  sx: {
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    height: "80px"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.CircularProgress, {}),
+                    " "
+                  ]
+                }
+              ),
+              !isProcessAndQueuesListLoading && !isIdleAgentsListLoading && !isHospitalsServicesListLoading && currentselecteTab === "process" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_material3.Box,
+                {
+                  sx: {
+                    display: "grid",
+                    gridTemplateColumns: ((_a2 = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _a2.process) && ((_c = (_b = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _b.process) == null ? void 0 : _c.length) > 0 ? "repeat(2, 1fr)" : "repeat(1, 1fr)",
+                    gap: 1,
+                    padding: "10px",
+                    flexWrap: "wrap",
+                    boxShadow: "1px 1px 4px #d3d3d3ff",
+                    borderRadius: "10px"
+                  },
+                  children: ((_d = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _d.process) && ((_f = (_e = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _e.process) == null ? void 0 : _f.length) > 0 ? (_h = (_g = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _g.process) == null ? void 0 : _h.map((process, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                    import_material3.Box,
+                    {
+                      sx: {
+                        p: 1,
+                        display: "flex",
+                        alignItems: "center",
+                        boxShadow: "1px 1px 4px #d3d3d3ff",
+                        padding: "6px",
+                        borderRadius: "10px",
+                        "&:hover": { bgcolor: "action.selected" }
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                          import_material3.Typography,
+                          {
+                            variant: "body1",
+                            sx: {
+                              mx: 1,
+                              width: "200px",
+                              maxWidth: "250px",
+                              display: "flex",
+                              alignItems: "center"
+                            },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.MemoryOutlined, { sx: { marginRight: "4px" } }),
+                              process.process_name
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_material3.IconButton,
+                          {
+                            color: "success",
+                            sx: {
+                              bgcolor: "action.hover",
+                              "&:hover": { bgcolor: "action.selected" }
+                            },
+                            onClick: () => {
+                              handleTransferCall(process, "PROCESS");
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
+                          }
+                        )
+                      ]
+                    },
+                    index
+                  )) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                    import_material3.Box,
+                    {
+                      sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        flexDirection: "column"
+                      },
+                      p: 2,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Upcoming, { color: "primary" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_material3.Typography,
+                          {
+                            variant: "body1",
+                            sx: {
+                              fontSize: "16px",
+                              letterSpacing: "0.02em",
+                              textTransform: "capitalize",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              width: "100%",
+                              margin: "10px 0px",
+                              color: "primary.main",
+                              height: "20px"
+                            },
+                            children: "No Process Found"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ),
+              !isProcessAndQueuesListLoading && !isIdleAgentsListLoading && !isHospitalsServicesListLoading && currentselecteTab === "queues" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_material3.Box,
+                {
+                  sx: {
+                    display: "grid",
+                    gridTemplateColumns: ((_i = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _i.queue) && ((_k = (_j = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _j.queue) == null ? void 0 : _k.length) > 0 ? "repeat(2, 1fr)" : "repeat(1, 1fr)",
+                    gap: 1,
+                    padding: "10px",
+                    flexWrap: "wrap",
+                    boxShadow: "1px 1px 4px #d3d3d3ff",
+                    borderRadius: "10px"
+                  },
+                  children: ((_l = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _l.queue) && ((_n = (_m = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _m.queue) == null ? void 0 : _n.length) > 0 ? (_p = (_o = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _o.queue) == null ? void 0 : _p.map((queue, index) => {
+                    var _a3, _b2, _c2, _d2, _e2, _f2;
+                    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      import_material3.Box,
+                      {
+                        sx: {
+                          p: 1,
+                          display: "flex",
+                          alignItems: "center",
+                          boxShadow: "1px 1px 4px #d3d3d3ff",
+                          padding: "6px",
+                          borderRadius: "10px",
+                          "&:hover": { bgcolor: "action.selected" }
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                            import_material3.Typography,
+                            {
+                              variant: "body1",
+                              sx: {
+                                mx: 1,
+                                width: "200px",
+                                maxWidth: "250px",
+                                display: "flex",
+                                alignItems: "center"
+                              },
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Airlines, { sx: { marginRight: "4px" } }),
+                                queue.queue_name,
+                                ((_c2 = (_b2 = (_a3 = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _a3.process) == null ? void 0 : _b2.find(
+                                  (process) => process.process_id === queue.process_id
+                                )) == null ? void 0 : _c2.process_name) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                  import_material3.Typography,
+                                  {
+                                    variant: "body1",
+                                    sx: {
+                                      fontSize: "12px",
+                                      fontWeight: "600",
+                                      letterSpacing: "0.02em",
+                                      textTransform: "capitalize",
+                                      color: "gray"
+                                    },
+                                    children: "(" + ((_f2 = (_e2 = (_d2 = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _d2.process) == null ? void 0 : _e2.find(
+                                      (process) => process.process_id === queue.process_id
+                                    )) == null ? void 0 : _f2.process_name) + ")"
+                                  }
+                                ) : ""
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            import_material3.IconButton,
+                            {
+                              color: "success",
+                              sx: {
+                                bgcolor: "action.hover",
+                                "&:hover": { bgcolor: "action.selected" }
+                              },
+                              onClick: () => {
+                                handleTransferCall(queue, "QUEUE");
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
+                            }
+                          )
+                        ]
+                      },
+                      index
+                    );
+                  }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                    import_material3.Box,
+                    {
+                      sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        flexDirection: "column"
+                      },
+                      p: 2,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Upcoming, { color: "primary" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_material3.Typography,
+                          {
+                            variant: "body1",
+                            sx: {
+                              fontSize: "16px",
+                              letterSpacing: "0.02em",
+                              textTransform: "capitalize",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              width: "100%",
+                              margin: "10px 0px",
+                              color: "primary.main",
+                              height: "20px"
+                            },
+                            children: "No Queues Found"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ),
+              !isProcessAndQueuesListLoading && !isIdleAgentsListLoading && !isHospitalsServicesListLoading && currentselecteTab === "agents" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_material3.Box,
+                {
+                  sx: {
+                    display: "grid",
+                    gridTemplateColumns: (idleAgentsList == null ? void 0 : idleAgentsList.data) && ((_q = idleAgentsList == null ? void 0 : idleAgentsList.data) == null ? void 0 : _q.length) > 0 ? "repeat(2, 1fr)" : "repeat(1, 1fr)",
+                    gap: 1,
+                    padding: "10px",
+                    flexWrap: "wrap",
+                    boxShadow: "1px 1px 4px #d3d3d3ff",
+                    borderRadius: "10px"
+                  },
+                  children: (idleAgentsList == null ? void 0 : idleAgentsList.data) && ((_r = idleAgentsList == null ? void 0 : idleAgentsList.data) == null ? void 0 : _r.length) > 0 ? (_s = idleAgentsList == null ? void 0 : idleAgentsList.data) == null ? void 0 : _s.map((agent, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                    import_material3.Box,
+                    {
+                      sx: {
+                        p: 1,
+                        display: "flex",
+                        alignItems: "center",
+                        boxShadow: "1px 1px 4px #d3d3d3ff",
+                        padding: "6px",
+                        borderRadius: "10px",
+                        "&:hover": { bgcolor: "action.selected" }
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                          import_material3.Typography,
+                          {
+                            variant: "body1",
+                            sx: {
+                              mx: 1,
+                              width: "200px",
+                              maxWidth: "250px",
+                              display: "flex",
+                              alignItems: "center"
+                            },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.SupportAgent, { sx: { marginRight: "4px" } }),
+                              agent.name
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_material3.IconButton,
+                          {
+                            color: "success",
+                            sx: {
+                              bgcolor: "action.hover",
+                              "&:hover": { bgcolor: "action.selected" }
+                            },
+                            onClick: () => {
+                              handleTransferCall(agent, "AGENT");
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
+                          }
+                        )
+                      ]
+                    },
+                    index
+                  )) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                    import_material3.Box,
+                    {
+                      sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        flexDirection: "column"
+                      },
+                      p: 2,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Upcoming, { color: "primary" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_material3.Typography,
+                          {
+                            variant: "body1",
+                            sx: {
+                              fontSize: "16px",
+                              letterSpacing: "0.02em",
+                              textTransform: "capitalize",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              width: "100%",
+                              margin: "10px 0px",
+                              color: "primary.main",
+                              height: "20px"
+                            },
+                            children: "No Agents Found"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ),
+              !isProcessAndQueuesListLoading && !isIdleAgentsListLoading && !isHospitalsServicesListLoading && currentselecteTab === "others" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                import_material3.Box,
+                {
+                  sx: {
+                    display: "grid",
+                    gridTemplateColumns: "repeat(2, 1fr)",
+                    gap: 1,
+                    padding: "10px",
+                    flexWrap: "wrap",
+                    boxShadow: "1px 1px 4px #d3d3d3ff",
+                    borderRadius: "10px"
+                  },
+                  children: [
+                    (hospitalsServicesList == null ? void 0 : hospitalsServicesList.data) && ((_t = hospitalsServicesList == null ? void 0 : hospitalsServicesList.data) == null ? void 0 : _t.length) > 0 && ((_u = hospitalsServicesList == null ? void 0 : hospitalsServicesList.data) == null ? void 0 : _u.map((service, index) => {
+                      var _a3, _b2, _c2;
+                      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                        import_material3.Box,
+                        {
+                          sx: {
+                            p: 1,
+                            display: "flex",
+                            alignItems: "center",
+                            boxShadow: "1px 1px 4px #d3d3d3ff",
+                            padding: "6px",
+                            borderRadius: "10px",
+                            "&:hover": { bgcolor: "action.selected" }
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                              import_material3.Typography,
+                              {
+                                variant: "body1",
+                                sx: {
+                                  mx: 1,
+                                  width: "200px",
+                                  maxWidth: "250px",
+                                  display: "flex",
+                                  alignItems: "center"
+                                },
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Roofing, { sx: { marginRight: "4px" } }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: `${(_a3 = service == null ? void 0 : service.description) != null ? _a3 : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Box, { sx: { color: "text.secondary" }, children: [
+                                    service.name,
+                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                      import_material3.Box,
+                                      {
+                                        sx: {
+                                          fontSize: "9px",
+                                          fontWeight: "600",
+                                          letterSpacing: "0.02em",
+                                          textTransform: "capitalize",
+                                          color: "gray",
+                                          textOverflow: "ellipsis",
+                                          whiteSpace: "nowrap",
+                                          overflow: "hidden",
+                                          maxWidth: "160px"
+                                        },
+                                        children: (_b2 = service == null ? void 0 : service.description) != null ? _b2 : ""
+                                      }
+                                    )
+                                  ] }) })
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: (_c2 = service == null ? void 0 : service.phone_number) != null ? _c2 : "", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              import_material3.IconButton,
+                              {
+                                color: "success",
+                                sx: {
+                                  bgcolor: "action.hover",
+                                  "&:hover": { bgcolor: "action.selected" }
+                                },
+                                onClick: () => {
+                                  var _a4;
+                                  handleTransferCall(
+                                    {
+                                      mobile_number: (_a4 = service == null ? void 0 : service.phone_number) != null ? _a4 : ""
+                                    },
+                                    "OTHER"
+                                  );
+                                },
+                                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
+                              }
+                            ) })
+                          ]
+                        },
+                        index
+                      );
+                    })),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      import_material3.Box,
+                      {
+                        sx: {
+                          p: 1,
+                          display: "flex",
+                          alignItems: "center",
+                          boxShadow: "1px 1px 4px #d3d3d3ff",
+                          padding: "6px",
+                          borderRadius: "10px"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            import_material3.Typography,
+                            {
+                              variant: "body1",
+                              sx: {
+                                mx: 1,
+                                width: "200px",
+                                maxWidth: "250px",
+                                display: "flex",
+                                alignItems: "center"
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                import_material3.TextField,
+                                {
+                                  size: "small",
+                                  name: "others",
+                                  label: "Mobile number",
+                                  variant: "outlined",
+                                  type: "tel",
+                                  value: mobileNumber,
+                                  onChange: (e) => {
+                                    const v = e.target.value;
+                                    if (/^\d*$/.test(v)) {
+                                      setMobileNumber(v);
+                                    }
+                                  },
+                                  slotProps: {
+                                    htmlInput: {
+                                      inputMode: "numeric",
+                                      maxLength: 11
+                                    }
+                                  },
+                                  placeholder: "Enter mobile number",
+                                  autoComplete: "off"
+                                }
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            import_material3.Tooltip,
+                            {
+                              title: mobileNumber ? `Call To - ${mobileNumber}` : "Enter mobile number",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                import_material3.IconButton,
+                                {
+                                  color: "success",
+                                  sx: {
+                                    bgcolor: "action.hover",
+                                    "&:hover": { bgcolor: "action.selected" }
+                                  },
+                                  onClick: () => {
+                                    handleTransferCall(
+                                      {
+                                        mobile_number: mobileNumber != null ? mobileNumber : ""
+                                      },
+                                      "OTHER"
+                                    );
+                                  },
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
+                                }
+                              )
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    }
+  ) });
+}
+function EndCallDispositionDialog({ open, setOpen, onSubmitDisposition }) {
+  var _a2, _b, _c, _d, _e;
+  const [getDispositions, data] = useGetRequest();
+  const [formData, setFormData] = (0, import_react9.useState)({
+    disposition: { label: "Resolved", value: "RES" },
+    followUp: { label: "No", value: "N" },
+    callbackDate: "",
+    callbackHrs: "",
+    callbackMins: "",
+    selected_break: false
+  });
+  const followUpOptions = [
+    { label: "Yes", value: "Y" },
+    { label: "No", value: "N" }
+  ];
+  const handleChange = (field, value) => {
+    setFormData((prev) => __spreadProps(__spreadValues({}, prev), { [field]: value }));
+  };
+  const handleReset = () => {
+    setFormData({
+      disposition: { label: "Resolved", value: "RES" },
+      followUp: { label: "No", value: "N" },
+      callbackDate: "",
+      callbackHrs: "",
+      callbackMins: "",
+      selected_break: false
+    });
+  };
+  const handleClose = () => {
+    handleReset();
+    setOpen(false);
+  };
+  (0, import_react9.useEffect)(() => {
+    getDispositions(END_POINT.DISPOSITIONS);
+  }, []);
+  const dispositionsOptions = (0, import_react9.useMemo)(() => {
+    var _a3, _b2;
+    return ((_b2 = (_a3 = data == null ? void 0 : data.data) == null ? void 0 : _a3.data) == null ? void 0 : _b2.map((item) => ({
+      label: item.name,
+      value: item.code
+    }))) || [];
+  }, [(_a2 = data == null ? void 0 : data.data) == null ? void 0 : _a2.data]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_material3.Dialog,
+    {
+      open,
+      "aria-labelledby": "alert-dialog-title",
+      "aria-describedby": "alert-dialog-description",
+      fullWidth: true,
+      maxWidth: "xs",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_material3.Box,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              padding: "4px 16px",
+              boxShadow: "0px 1px 2px #f5f5f5ff"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              import_material3.Typography,
+              {
+                variant: "body1",
+                m: 1,
+                children: [
+                  " ",
+                  "Call Disposition"
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          import_material3.Box,
+          {
+            sx: {
+              boxShadow: "1px 1px 4px #d3d3d3ff",
+              padding: "10px",
+              margin: "10px",
+              borderRadius: "10px"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                import_material3.Box,
+                {
+                  display: "flex",
+                  gap: 2,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_material3.Autocomplete,
+                      {
+                        value: formData.disposition,
+                        options: dispositionsOptions,
+                        getOptionLabel: (opt) => opt.label,
+                        onChange: (_, val) => handleChange("disposition", val),
+                        size: "small",
+                        renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_material3.TextField,
+                          __spreadProps(__spreadValues({}, params), {
+                            label: "Disposition",
+                            fullWidth: true
+                          })
+                        ),
+                        sx: { flex: 1 }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_material3.Autocomplete,
+                      {
+                        options: followUpOptions,
+                        getOptionLabel: (opt) => opt.label,
+                        value: formData.followUp,
+                        onChange: (_, val) => handleChange("followUp", val),
+                        size: "small",
+                        renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_material3.TextField,
+                          __spreadProps(__spreadValues({}, params), {
+                            label: "Follow Up",
+                            fullWidth: true
+                          })
+                        ),
+                        sx: { flex: 1 }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                import_material3.Box,
+                {
+                  display: "flex",
+                  gap: 2,
+                  mt: 2,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      import_material3.Box,
+                      {
+                        sx: {
+                          flex: "1",
+                          border: "1px solid #bdbdbd",
+                          borderRadius: "5px"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            import_material3.Checkbox,
+                            {
+                              name: "selected_break",
+                              sx: {
+                                padding: "6px"
+                              },
+                              checked: formData.selected_break,
+                              onChange: (event) => {
+                                handleChange("selected_break", event.target.checked);
+                              },
+                              slotProps: {
+                                input: { "aria-label": "controlled" }
+                              }
+                            }
+                          ),
+                          " ",
+                          "Mark as break"
+                        ]
+                      }
+                    ),
+                    ((_c = (_b = formData == null ? void 0 : formData.followUp) == null ? void 0 : _b.label) == null ? void 0 : _c.toLowerCase()) === "yes" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_material3.TextField,
+                      {
+                        size: "small",
+                        label: "Callback Date",
+                        type: "date",
+                        slotProps: {
+                          inputLabel: { shrink: true }
+                        },
+                        value: formData.callbackDate,
+                        onChange: (e) => handleChange("callbackDate", e.target.value),
+                        fullWidth: true,
+                        sx: { flex: 1 }
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Box, { sx: { flex: 1 } })
+                  ]
+                }
+              ),
+              ((_e = (_d = formData == null ? void 0 : formData.followUp) == null ? void 0 : _d.label) == null ? void 0 : _e.toLowerCase()) === "yes" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                import_material3.Box,
+                {
+                  display: "flex",
+                  gap: 2,
+                  mt: 2,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_material3.TextField,
+                      {
+                        size: "small",
+                        label: "Hours (0-23)",
+                        type: "text",
+                        value: formData.callbackHrs,
+                        onChange: (e) => handleChange("callbackHrs", e.target.value),
+                        fullWidth: true,
+                        sx: { flex: 1 }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_material3.TextField,
+                      {
+                        size: "small",
+                        label: "Minutes (0-59)",
+                        type: "text",
+                        value: formData.callbackMins,
+                        onChange: (e) => handleChange("callbackMins", e.target.value),
+                        fullWidth: true,
+                        sx: { flex: 1 }
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          import_material3.Box,
+          {
+            textAlign: "right",
+            m: 2,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_material3.Button,
+                {
+                  variant: "outlined",
+                  color: "error",
+                  size: "large",
+                  onClick: handleClose,
+                  sx: {
+                    px: 2,
+                    mx: 1,
+                    borderRadius: "10px",
+                    textTransform: "capitalize"
+                  },
+                  children: "cancel"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_material3.Button,
+                {
+                  variant: "contained",
+                  color: "primary",
+                  size: "large",
+                  onClick: () => onSubmitDisposition(formData),
+                  sx: { px: 2, borderRadius: "10px", textTransform: "capitalize" },
+                  children: "Submit"
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    }
+  ) });
+}
+function ProcessorListDialog({
+  open,
+  setOpen,
+  processList = null,
+  handleSelectedProcessor
+}) {
+  const handleClose = () => {
+    setOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_material3.Dialog,
+    {
+      open,
+      "aria-labelledby": "alert-dialog-title",
+      "aria-describedby": "alert-dialog-description",
+      maxWidth: "xs",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          import_material3.Box,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              padding: "4px 16px",
+              boxShadow: "0px 1px 2px #f5f5f5ff"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { variant: "body1", children: " Process List" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_material3.Box,
+          {
+            sx: {
+              boxShadow: "1px 1px 4px #d3d3d3ff",
+              padding: "6px 10px",
+              margin: "10px",
+              borderRadius: "10px"
+            },
+            children: processList.length > 0 ? processList == null ? void 0 : processList.map((process, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_material3.Box,
+              {
+                sx: {
+                  p: 1,
+                  display: "flex",
+                  alignItems: "center",
+                  boxShadow: "1px 1px 4px #d3d3d3ff",
+                  padding: "6px",
+                  margin: "10px 0px",
+                  borderRadius: "10px",
+                  cursor: "pointer",
+                  "&:hover": { bgcolor: "action.selected" }
+                },
+                onClick: () => {
+                  handleSelectedProcessor(process);
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  import_material3.Typography,
+                  {
+                    variant: "body1",
+                    sx: {
+                      mx: 1,
+                      width: "200px",
+                      maxWidth: "250px",
+                      display: "flex",
+                      alignItems: "center"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.SupportAgent, { sx: { marginRight: "4px" } }),
+                      process.process_name
+                    ]
+                  }
+                )
+              },
+              index
+            )) : null
+          }
+        )
+      ] })
+    }
+  ) });
+}
+function CallHistoryDialog({ open, setOpen }) {
+  const handleClose = () => {
+    setOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_material3.Dialog,
+    {
+      open,
+      "aria-labelledby": "alert-dialog-title",
+      "aria-describedby": "alert-dialog-description",
+      fullWidth: true,
+      maxWidth: "md",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          import_material3.Box,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              padding: "4px 16px",
+              boxShadow: "0px 1px 2px #f5f5f5ff"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { variant: "body1", children: " Call History" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_material3.Box,
+          {
+            sx: {
+              boxShadow: "1px 1px 4px #d3d3d3ff",
+              margin: "10px",
+              borderRadius: "10px",
+              textAlign: "center",
+              fontSize: "16px",
+              fontWeight: "bold"
+            },
+            p: 6,
+            children: "Coming Soon..."
+          }
+        )
+      ] })
+    }
+  ) });
+}
+
+// call-control-sdk/lib/hooks/useDraggable.ts
+var import_react10 = require("react");
+function useDraggable(initialPosition, onPositionChange) {
+  const [position, setPosition] = (0, import_react10.useState)(initialPosition);
+  const [isDragging, setIsDragging] = (0, import_react10.useState)(false);
+  const dragRef = (0, import_react10.useRef)();
+  const dragStart = (0, import_react10.useRef)({ x: 0, y: 0 });
+  const elementStart = (0, import_react10.useRef)({ x: 0, y: 0 });
+  const updatePosition = (0, import_react10.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 == null ? void 0 : onPositionChange(constrainedPosition);
+    },
+    [onPositionChange]
+  );
+  const handleStart = (0, import_react10.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 = (0, import_react10.useCallback)(
+    (e) => {
+      e.preventDefault();
+      handleStart(e.clientX, e.clientY);
+    },
+    [handleStart]
+  );
+  const handleTouchStart = (0, import_react10.useCallback)(
+    (e) => {
+      e.preventDefault();
+      const touch = e.touches[0];
+      if (touch) {
+        handleStart(touch.clientX, touch.clientY);
+      }
+    },
+    [handleStart]
+  );
+  return {
+    position,
+    isDragging,
+    dragRef,
+    handleMouseDown,
+    handleTouchStart
+  };
+}
+
+// call-control-sdk/lib/services/micController.ts
+function createMicController(constraints = { audio: true }) {
+  let stream = null;
+  let muted = false;
+  async function start() {
+    if (stream) return;
+    stream = await navigator.mediaDevices.getUserMedia(constraints);
+    stream.getAudioTracks().forEach((track) => track.enabled = true);
+    muted = false;
+  }
+  function setEnabled(enabled) {
+    if (!stream) return;
+    stream.getAudioTracks().forEach((track) => track.enabled = enabled);
+    muted = !enabled;
+  }
+  function mute() {
+    setEnabled(false);
+  }
+  function unmute() {
+    setEnabled(true);
+  }
+  function toggleMute() {
+    if (muted) {
+      unmute();
+    } else {
+      mute();
+    }
+  }
+  function stop() {
+    if (!stream) return;
+    stream.getTracks().forEach((t) => t.stop());
+    stream = null;
+    muted = false;
+  }
+  function isMuted() {
+    return muted;
+  }
+  function getStream() {
+    return stream;
+  }
+  return {
+    start,
+    stop,
+    mute,
+    unmute,
+    toggleMute,
+    isMuted,
+    getStream
+  };
+}
+
+// call-control-sdk/lib/utils/audioLoader.ts
+var import_incoming = __toESM(require("./incoming-4WP3FJI4.mp3"));
+var audioBlobUrl = null;
+var audioBuffer = null;
+async function loadAudioAsBlob() {
+  if (audioBlobUrl) {
+    return audioBlobUrl;
+  }
+  if (import_incoming.default.startsWith("data:") || import_incoming.default.startsWith("http://") || import_incoming.default.startsWith("https://") || import_incoming.default.startsWith("blob:")) {
+    return import_incoming.default;
+  }
+  try {
+    const response = await fetch(import_incoming.default);
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+    const blob = await response.blob();
+    if (blob.size === 0) {
+      throw new Error("Empty blob");
+    }
+    audioBlobUrl = URL.createObjectURL(blob);
+    return audioBlobUrl;
+  } catch (error) {
+    console.error("Could not create blob URL, using direct URL:", error);
+    return import_incoming.default;
+  }
+}
+async function createAudioElement() {
+  const audio = new Audio();
+  audio.loop = true;
+  audio.volume = 0.7;
+  audio.preload = "auto";
+  let audioUrl = "";
+  try {
+    audioUrl = await loadAudioAsBlob();
+  } catch (error) {
+    console.warn("Failed to load audio as blob, trying direct URL:", error);
+    audioUrl = import_incoming.default;
+  }
+  const tryLoadAudio = async (url) => {
+    return new Promise((resolve) => {
+      const checkCanPlay = () => {
+        const canPlay = audio.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA;
+        if (canPlay) {
+          resolve(true);
+          return;
+        }
+        if (audio.error) {
+          resolve(false);
+          return;
+        }
+        setTimeout(checkCanPlay, 100);
+      };
+      audio.addEventListener("canplay", () => resolve(true), { once: true });
+      audio.addEventListener("error", () => resolve(false), { once: true });
+      audio.src = url;
+      audio.load();
+      setTimeout(() => resolve(false), 2e3);
+    });
+  };
+  let loaded = await tryLoadAudio(audioUrl);
+  if (!loaded && audioUrl !== import_incoming.default) {
+    loaded = await tryLoadAudio(import_incoming.default);
+    if (loaded) {
+      audioUrl = import_incoming.default;
+    }
+  }
+  return audio;
+}
+function cleanupAudioResources() {
+  if (audioBlobUrl) {
+    URL.revokeObjectURL(audioBlobUrl);
+    audioBlobUrl = null;
+  }
+  audioBuffer = null;
+}
+
+// call-control-sdk/lib/components/callControls.tsx
+var import_vault5 = require("@react-solutions/vault");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var getCombineConfrenceData = (localState, apiData) => {
+  const localConfrenceData = localState == null ? void 0 : localState.conferenceLine;
+  const apiConferenceData = apiData == null ? void 0 : apiData.conferencestatus;
+  const updatedConferenceData = localConfrenceData.map((item) => {
+    var _a2, _b, _c, _d, _e;
+    if ((item == null ? void 0 : item.line) === 1) {
+      const statusKey = `line_${item.line}_status`;
+      return __spreadProps(__spreadValues({}, item), {
+        line: 1,
+        status: (_b = apiConferenceData[statusKey]) != null ? _b : (_a2 = localState == null ? void 0 : localState.callData) == null ? void 0 : _a2.status,
+        phone: (_d = (_c = localState == null ? void 0 : localState.callData) == null ? void 0 : _c.phone_number) != null ? _d : ""
+      });
+    } else {
+      const statusKey = `line_${item.line}_status`;
+      const phoneKey = `line_${item.line}_phonenumber`;
+      return __spreadProps(__spreadValues({}, item), {
+        status: (_e = apiConferenceData[statusKey]) != null ? _e : item.status,
+        phone: apiConferenceData[phoneKey] === null || apiConferenceData[phoneKey] === "0" ? item.phone : apiConferenceData[phoneKey]
+      });
+    }
+  });
+  return updatedConferenceData;
+};
+var formatDuration = (seconds) => {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+};
+function CallControls({ onDataChange }) {
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za;
+  const theme = (0, import_material4.useTheme)();
+  const state = useSDKState();
+  const { showToast } = useToast();
+  const { disabled, enabled, outlined } = styles_default({
+    disabled: ((_a2 = state.sdkConfig) == null ? void 0 : _a2.disabled) || {},
+    enabled: ((_b = state.sdkConfig) == null ? void 0 : _b.enabled) || {},
+    outlined: ((_c = state.sdkConfig) == null ? void 0 : _c.outlined) || {}
+  });
+  const micRef = (0, import_react11.useRef)(null);
+  const webSocketRef = (0, import_react11.useRef)(null);
+  const audioRef = (0, import_react11.useRef)(null);
+  const reconnectTimeoutRef = (0, import_react11.useRef)(null);
+  const pingIntervalRef = (0, import_react11.useRef)(null);
+  const reconnectAttemptsRef = (0, import_react11.useRef)(0);
+  const hasFlashedRef = (0, import_react11.useRef)(false);
+  const lastEventTimeRef = (0, import_react11.useRef)(null);
+  const maxReconnectAttempts = 60;
+  const baseReconnectDelay = 2e3;
+  const maxReconnectDelay = 3e4;
+  const [anchorEl, setAnchorEl] = (0, import_react11.useState)(null);
+  const [statusAnchorEl, setStatusAnchorEl] = (0, import_react11.useState)(null);
+  const [dialerAnchorEl, setDialerAnchorEl] = (0, import_react11.useState)(null);
+  const [ambulanceAnchorEl, setAmbulanceAnchorEl] = (0, import_react11.useState)(null);
+  const [moreOptionsAnchorEl, setMoreOptionsAnchorEl] = (0, import_react11.useState)(null);
+  const [showIframe, setShowIframe] = (0, import_react11.useState)(true);
+  const [openCallDisposition, setOpenCallDisposition] = (0, import_react11.useState)(false);
+  const [openProcessorDialog, setOpenProcessorDialog] = (0, import_react11.useState)(false);
+  const [openCallHistoryDialog, setOpenCallHistoryDialog] = (0, import_react11.useState)(false);
+  const [processList, setProcessList] = (0, import_react11.useState)(null);
+  const [breaksList, setBreaksList] = (0, import_react11.useState)(null);
+  const [phoneNumber, setPhoneNumber] = (0, import_react11.useState)("");
+  const [callDuration, setCallDuration] = (0, import_react11.useState)(0);
+  const [callWrapuptime, setCallWrapuptime] = (0, import_react11.useState)(null);
+  const { position, isDragging, dragRef, handleMouseDown, handleTouchStart } = useDraggable(
+    state.controlPanelPosition,
+    (newPosition) => sdkStateManager.setControlPanelPosition(newPosition)
+  );
+  const {
+    position: iframePosition,
+    isDragging: iframeIsDragging,
+    dragRef: iframeDragRef,
+    handleMouseDown: iframeHandleMouseDown,
+    handleTouchStart: iframeHandleTouchStart
+  } = useDraggable(
+    state.iframePosition,
+    (newPosition) => sdkStateManager.setIframePosition(newPosition)
+  );
+  const [clickToCall, { isLoading: clickToCallLoading }] = usePostRequest({
+    onSuccess: () => {
+      setPhoneNumber("");
+      setDialerAnchorEl(null);
+    }
+  });
+  const [holdOrUnHold, { isLoading: holdOrUnHoldLoading }] = usePostRequest();
+  const [muteOrUnMute, { isLoading: muteOrUnMuteLoading }] = usePostRequest();
+  const [readyAgentStatus, { isLoading: agentReadyLoading }] = usePostRequest({
+    onSuccess: () => {
+      sdkStateManager.setAgentStatus("");
+    }
+  });
+  const [updateAgentStatus, { isLoading }] = usePostRequest();
+  const [sendNotification] = usePostRequest();
+  const [endCall, { isLoading: endCallLoading }] = usePostRequest({
+    onSuccess: () => {
+      sdkStateManager.endCall();
+      setOpenCallDisposition(false);
+      sdkStateManager.resetConferenceLines();
+    }
+  });
+  const handleCloseQueueCounts = () => {
+    setAnchorEl(null);
+  };
+  const handleOpenDialer = (event) => {
+    setShowIframe(true);
+    setDialerAnchorEl(event.currentTarget);
+  };
+  const handleOpenAbulanceServices = (event) => {
+    setAmbulanceAnchorEl(event.currentTarget);
+  };
+  const handleOpenMoreOptions = (event) => {
+    setMoreOptionsAnchorEl(event.currentTarget);
+  };
+  const handleCloseDialer = () => {
+    setDialerAnchorEl(null);
+  };
+  const handleCloseAmbulance = () => {
+    setAmbulanceAnchorEl(null);
+  };
+  const handleCloseMoreOptions = () => {
+    setMoreOptionsAnchorEl(null);
+  };
+  const handleOpenAgentStatus = (event) => {
+    setStatusAnchorEl(event.currentTarget);
+  };
+  const handleCloseAgentStatus = () => {
+    setStatusAnchorEl(null);
+  };
+  const handleAgentReady = () => {
+    const payload = {
+      action: "READYAGENT",
+      userId: state.agentId
+    };
+    readyAgentStatus(END_POINT.READY_AGENT, payload);
+  };
+  const handleUpdateAgentStatus = (status) => {
+    setStatusAnchorEl(null);
+    const payload = {
+      action: "AGENTBREAK",
+      break_type: status,
+      userId: state.agentId
+    };
+    updateAgentStatus(END_POINT.UPDATE_AGENT_BREAK, payload).then(() => {
+      sdkStateManager.setAgentStatus(status);
+    });
+  };
+  const handleStartCall = (number) => {
+    if (number.length !== 10) {
+      showToast("Invalid phone number", "error");
+    } else if (!/^\d+$/.test(number)) {
+      showToast("Invalid phone number", "error");
+    } else {
+      const payload = {
+        action: "CALL",
+        phone_number: number,
+        userId: state.agentId
+      };
+      clickToCall(END_POINT.CLICK_TO_CALL, payload);
+    }
+  };
+  const handleHoldToggle = () => {
+    var _a3;
+    const payload = {
+      action: ((_a3 = state.callData) == null ? void 0 : _a3.hold) === 1 ? "UNHOLD" /* UNHOLD */ : "HOLD" /* HOLD */,
+      userId: state.agentId
+    };
+    holdOrUnHold(END_POINT.HOLD_CALL, payload);
+  };
+  const handleMuteToggle = () => {
+    var _a3;
+    const payload = {
+      action: ((_a3 = state.callData) == null ? void 0 : _a3.mute) === 1 ? "UNMUTE" /* UNMUTE */ : "MUTE" /* MUTE */,
+      userId: state.agentId
+    };
+    muteOrUnMute(END_POINT.MUTE_CALL, payload);
+  };
+  const handleEndCall = (data) => {
+    var _a3, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2;
+    const payload = {
+      action: "ENDCALL",
+      userId: state.agentId,
+      processid: (_c2 = (_b2 = (_a3 = state.process) == null ? void 0 : _a3.process_id) == null ? void 0 : _b2.toString()) != null ? _c2 : "",
+      process_name: (_e2 = (_d2 = state.process) == null ? void 0 : _d2.process_name) != null ? _e2 : "",
+      callreferenceid: (_g2 = (_f2 = state.callData) == null ? void 0 : _f2.convox_id) != null ? _g2 : "",
+      mobile_number: (_i2 = (_h2 = state.callData) == null ? void 0 : _h2.phone_number) != null ? _i2 : "",
+      disposition: (_k2 = (_j2 = data == null ? void 0 : data.disposition) == null ? void 0 : _j2.value) != null ? _k2 : "",
+      set_followUp: (_m2 = (_l2 = data == null ? void 0 : data.followUp) == null ? void 0 : _l2.value) != null ? _m2 : "",
+      callback_date: (_n2 = data == null ? void 0 : data.callbackDate) != null ? _n2 : "",
+      callback_hrs: (_o2 = data == null ? void 0 : data.callbackHrs) != null ? _o2 : "",
+      callback_mins: (_p2 = data == null ? void 0 : data.callbackMins) != null ? _p2 : "",
+      endcall_type: "CLOSE"
+    };
+    setPhoneNumber("");
+    endCall(END_POINT.END_CALL, payload, {
+      params: {
+        isBreak: (_q2 = data == null ? void 0 : data.selected_break) != null ? _q2 : false
+      }
+    });
+  };
+  (0, import_react11.useEffect)(() => {
+    const handleBeforeUnload = (e) => {
+      e.preventDefault();
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, []);
+  (0, import_react11.useEffect)(() => {
+    const mic = createMicController();
+    micRef.current = mic;
+    mic.start().catch((err) => {
+      console.error("Failed to start mic:", err);
+    });
+    const handleKeyDown = (event) => {
+      var _a3, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
+      const fullState = (0, import_vault5.getItem)(STORAGE_KEY);
+      const key = (_a3 = event.key) == null ? void 0 : _a3.toLowerCase();
+      if (!event.altKey || ((_b2 = fullState == null ? void 0 : fullState.callData) == null ? void 0 : _b2.status) !== "ONCALL" /* ONCALL */) {
+        return;
+      }
+      if (key === "m" && String((_c2 = fullState == null ? void 0 : fullState.callData) == null ? void 0 : _c2.mute) === "0") {
+        event.preventDefault();
+        (_d2 = micRef.current) == null ? void 0 : _d2.mute();
+        const payload = {
+          action: "MUTE" /* MUTE */,
+          userId: fullState.agentId
+        };
+        muteOrUnMute(END_POINT.MUTE_CALL, payload);
+      }
+      if (key === "u" && String((_e2 = fullState == null ? void 0 : fullState.callData) == null ? void 0 : _e2.mute) === "1") {
+        event.preventDefault();
+        const payload = {
+          action: "UNMUTE" /* UNMUTE */,
+          userId: fullState.agentId
+        };
+        muteOrUnMute(END_POINT.MUTE_CALL, payload);
+        (_f2 = micRef.current) == null ? void 0 : _f2.unmute();
+      }
+      if (key === "h" && String((_g2 = fullState == null ? void 0 : fullState.callData) == null ? void 0 : _g2.hold) === "0") {
+        event.preventDefault();
+        const payload = {
+          action: "HOLD" /* HOLD */,
+          userId: fullState.agentId
+        };
+        holdOrUnHold(END_POINT.HOLD_CALL, payload);
+      }
+      if (key === "r" && String((_h2 = fullState == null ? void 0 : fullState.callData) == null ? void 0 : _h2.hold) === "1") {
+        event.preventDefault();
+        const payload = {
+          action: "UNHOLD" /* UNHOLD */,
+          userId: fullState.agentId
+        };
+        holdOrUnHold(END_POINT.HOLD_CALL, payload);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+  (0, import_react11.useEffect)(() => {
+    let interval;
+    let wrapUpinterval;
+    if (state.callData.status && state.callData.status === "ONCALL" /* ONCALL */) {
+      interval = setInterval(() => {
+        const elapsed = Math.floor((Date.now() - state.callStartTime) / 1e3);
+        setCallDuration(elapsed);
+      }, 1e3);
+    } else {
+      setCallDuration(0);
+    }
+    if (state.callData.status && state.callData.status === "WRAPUP" /* WRAPUP */ && callWrapuptime !== null) {
+      wrapUpinterval = setInterval(() => {
+        setCallWrapuptime((prevTime) => {
+          if (prevTime === null || prevTime <= 1) {
+            clearInterval(wrapUpinterval);
+            handleEndCall({
+              disposition: { label: "Resolved", value: "AUTO_WRAPUP" },
+              followUp: { label: "No", value: "N" },
+              callbackDate: "",
+              callbackHrs: "",
+              callbackMins: "",
+              selected_break: false
+            });
+            return null;
+          }
+          return prevTime - 1;
+        });
+      }, 1e3);
+    }
+    return () => {
+      if (interval) clearInterval(interval);
+      if (wrapUpinterval) clearInterval(wrapUpinterval);
+    };
+  }, [state.callData.status]);
+  (0, import_react11.useEffect)(() => {
+    createAudioElement().then((audio) => {
+      audioRef.current = audio;
+    }).catch((error) => {
+      console.error("Failed to load audio element:", error);
+    });
+    return () => {
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current.currentTime = 0;
+        audioRef.current.src = "";
+        audioRef.current = null;
+      }
+      cleanupAudioResources();
+    };
+  }, []);
+  (0, import_react11.useEffect)(() => {
+    if (onDataChange && state.callData) {
+      const { process_id, process_name, status, phone_number, agent_id, convox_id } = state.callData;
+      const callData = {
+        phone_number,
+        status,
+        callReferenceId: convox_id,
+        agent_id,
+        process_id,
+        process_name
+      };
+      onDataChange(callData);
+    }
+  }, [state.callData, onDataChange]);
+  (0, import_react11.useEffect)(() => {
+    if (state.agentId) {
+      axios_default.post(END_POINT.PROCESS_LIST, {
+        userId: state.agentId,
+        action: "GETAGENTPROCESSLIST",
+        refno: "1234221233"
+      }).then((res) => {
+        const data = {
+          "process_id": 101,
+          "process_name": "ConVoxProcess"
+        };
+        sdkStateManager.setProcess(data);
+      }).catch((err) => {
+        showToast(err.response.data.message, "error");
+      });
+      axios_default.get(END_POINT.BREAKS_LIST).then((res) => {
+        var _a3, _b2, _c2;
+        if (res && ((_a3 = res.data) == null ? void 0 : _a3.data) && ((_c2 = (_b2 = res == null ? void 0 : res.data) == null ? void 0 : _b2.data) == null ? void 0 : _c2.length)) {
+          setBreaksList(res.data.data);
+        }
+      }).catch((err) => {
+        showToast(err.response.data.message, "error");
+      });
+    }
+  }, [state.agentId]);
+  const connectWebSocket = () => {
+    var _a3, _b2;
+    if (!state.agentId) {
+      return;
+    }
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+    try {
+      webSocketRef.current = new WebSocket(`${(_a3 = state.urlConfig) == null ? void 0 : _a3.webSocketURL}?agent_id=${state.agentId}&accessToken=${(_b2 = state.authorization) == null ? void 0 : _b2.accessToken}`);
+      webSocketRef.current.onopen = () => {
+        console.log("\u{1F310} WebSocket connection established");
+        reconnectAttemptsRef.current = 0;
+        if (pingIntervalRef.current) {
+          clearInterval(pingIntervalRef.current);
+        }
+        pingIntervalRef.current = setInterval(() => {
+          if (webSocketRef.current && webSocketRef.current.readyState === WebSocket.OPEN) {
+            try {
+              webSocketRef.current.send(JSON.stringify({ type: "ping" }));
+            } catch (error) {
+              console.error("Failed to send ping:", error);
+            }
+          }
+        }, 3e4);
+      };
+      webSocketRef.current.onmessage = (event) => {
+        var _a4, _b3, _c2, _d2, _e2;
+        try {
+          const data = JSON.parse(event.data);
+          if (data.type === "pong") {
+            return;
+          }
+          const sdkState = (0, import_vault5.getItem)(STORAGE_KEY);
+          const confrence = getCombineConfrenceData(sdkState, data);
+          const callData = {
+            agent_id: data == null ? void 0 : data.agent_id,
+            status: data == null ? void 0 : data.status,
+            type: data == null ? void 0 : data.type,
+            event_time: data == null ? void 0 : data.event_time,
+            phone_number: data == null ? void 0 : data.phone_number,
+            convox_id: data == null ? void 0 : data.convox_id,
+            process_id: data == null ? void 0 : data.process_id,
+            process_name: data == null ? void 0 : data.process_name,
+            hold: data == null ? void 0 : data.hold,
+            mute: data == null ? void 0 : data.mute,
+            mode: data == null ? void 0 : data.mode,
+            queue_name: data == null ? void 0 : data.queue_name
+          };
+          sdkStateManager.updateCallData(callData);
+          sdkStateManager.updateConferenceData([...confrence]);
+          if (["RINGING" /* RINGING */, "DIALING" /* DIALING */].includes(data.status)) {
+            setShowIframe(true);
+            setCallWrapuptime((_b3 = (_a4 = sdkState == null ? void 0 : sdkState.sdkConfig) == null ? void 0 : _a4.auto_wrapup_time) != null ? _b3 : null);
+            sdkStateManager.updateConferenceData([
+              {
+                line: 1,
+                status: "IDLE",
+                type: "",
+                phone: "",
+                isMute: false,
+                isHold: false,
+                isCallStart: false,
+                isMergeCall: false
+              },
+              {
+                line: 2,
+                status: "IDLE",
+                type: "",
+                phone: "",
+                isMute: false,
+                isHold: false,
+                isCallStart: false,
+                isMergeCall: false
+              },
+              {
+                line: 3,
+                status: "IDLE",
+                type: "",
+                phone: "",
+                isMute: false,
+                isHold: false,
+                isCallStart: false,
+                isMergeCall: false
+              },
+              {
+                line: 4,
+                status: "IDLE",
+                type: "",
+                phone: "",
+                isMute: false,
+                isHold: false,
+                isCallStart: false,
+                isMergeCall: false
+              },
+              {
+                line: 5,
+                status: "IDLE",
+                type: "",
+                phone: "",
+                isMute: false,
+                isHold: false,
+                isCallStart: false,
+                isMergeCall: false
+              }
+            ]);
+            if ((data == null ? void 0 : data.mode) !== "manual" && audioRef.current && ((_c2 = state == null ? void 0 : state.sdkConfig) == null ? void 0 : _c2.enableRingtone)) {
+              audioRef.current.play().catch((error) => {
+                console.error("Failed to play ringtone:", error);
+              });
+            }
+          } else {
+            if (audioRef.current) {
+              audioRef.current.pause();
+              audioRef.current.currentTime = 0;
+            }
+          }
+          if (data.status === "IDLE" /* IDLE */) {
+            USB_LIGHT_REQUEST(USB_LIGHT_ON("green"));
+          } else if ((data == null ? void 0 : data.mute) !== 1 && (data == null ? void 0 : data.hold) !== 1 && data.status === "ONCALL" /* ONCALL */) {
+            USB_LIGHT_REQUEST(USB_LIGHT_ON("red"));
+            sdkStateManager.startCall();
+            if (!showIframe) {
+              setShowIframe(true);
+            }
+          } else if (((data == null ? void 0 : data.mute) === 1 || (data == null ? void 0 : data.hold) === 1) && data.status === "ONCALL" /* ONCALL */) {
+            USB_LIGHT_REQUEST(USB_LIGHT_FLASH("red", 1));
+          } else if (data.status === "BREAK" /* BREAK */) {
+            const breakTime = (_d2 = sdkState == null ? void 0 : sdkState.sdkConfig) == null ? void 0 : _d2.break_time;
+            const eventTime = (_e2 = data == null ? void 0 : data.event_time) != null ? _e2 : null;
+            if (eventTime !== lastEventTimeRef.current) {
+              hasFlashedRef.current = false;
+              lastEventTimeRef.current = eventTime;
+            }
+            let isOverLimit = false;
+            if (breakTime && eventTime) {
+              const differenceInMinutes = ((/* @__PURE__ */ new Date()).getTime() - new Date(eventTime).getTime()) / 6e4;
+              if (Number(differenceInMinutes.toFixed(0)) >= Number(breakTime)) {
+                isOverLimit = true;
+              }
+            }
+            if (isOverLimit) {
+              if (!hasFlashedRef.current) {
+                USB_LIGHT_REQUEST(USB_LIGHT_FLASH("yellow", 1));
+                hasFlashedRef.current = true;
+              }
+            } else {
+              USB_LIGHT_REQUEST(USB_LIGHT_ON("yellow"));
+            }
+          } else if (data.status === "WRAPUP" /* WRAPUP */) {
+            USB_LIGHT_REQUEST(USB_LIGHT_FLASH("green", 1));
+            sdkStateManager.endCall();
+          }
+        } catch (e) {
+          console.error("\u{1F4E8} Raw message:", event.data);
+        }
+      };
+      webSocketRef.current.onclose = (event) => {
+        if (pingIntervalRef.current) {
+          clearInterval(pingIntervalRef.current);
+          pingIntervalRef.current = null;
+        }
+        if (event.code !== 1e3 && reconnectAttemptsRef.current < maxReconnectAttempts) {
+          reconnectAttemptsRef.current += 1;
+          const delay = Math.min(
+            baseReconnectDelay * Math.pow(2, reconnectAttemptsRef.current - 1),
+            maxReconnectDelay
+          );
+          console.warn(
+            `\u{1F504} Attempting to reconnect WebSocket (attempt ${reconnectAttemptsRef.current}/${maxReconnectAttempts}) in ${delay}ms`
+          );
+          reconnectTimeoutRef.current = setTimeout(() => {
+            connectWebSocket();
+          }, delay);
+        } else if (reconnectAttemptsRef.current >= maxReconnectAttempts) {
+          showToast("WebSocket connection failed. Please refresh the page.", "error");
+        }
+      };
+      webSocketRef.current.onerror = (error) => {
+        console.error("\u274C WebSocket error:", error);
+      };
+    } catch (error) {
+      if (reconnectAttemptsRef.current < maxReconnectAttempts) {
+        reconnectAttemptsRef.current += 1;
+        const delay = Math.min(
+          baseReconnectDelay * Math.pow(2, reconnectAttemptsRef.current - 1),
+          maxReconnectDelay
+        );
+        reconnectTimeoutRef.current = setTimeout(() => {
+          connectWebSocket();
+        }, delay);
+      }
+    }
+  };
+  (0, import_react11.useEffect)(() => {
+    if (state.agentId) {
+      connectWebSocket();
+    }
+    return () => {
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+        reconnectTimeoutRef.current = null;
+      }
+      if (pingIntervalRef.current) {
+        clearInterval(pingIntervalRef.current);
+        pingIntervalRef.current = null;
+      }
+      if (webSocketRef.current) {
+        webSocketRef.current.close(1e3, "Component unmounting");
+        webSocketRef.current = null;
+      }
+      reconnectAttemptsRef.current = 0;
+    };
+  }, [state.agentId]);
+  const handleSendSMS = (data) => {
+    var _a3;
+    sendNotification(END_POINT.SEND_NOTIFICATIONS, {
+      phone_number: (_a3 = data == null ? void 0 : data.phone_number) != null ? _a3 : "",
+      type: "ambulance"
+    });
+  };
+  if (!state.isInitialized || !state.process) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { children: Boolean(openProcessorDialog) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      ProcessorListDialog,
+      {
+        processList,
+        open: openProcessorDialog,
+        setOpen: setOpenProcessorDialog,
+        handleSelectedProcessor: (data) => {
+          sdkStateManager.setProcess(data);
+        }
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_material4.Fade,
+      {
+        in: true,
+        timeout: 300,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_material4.Paper,
+          {
+            ref: ((_d = state.sdkConfig) == null ? void 0 : _d.isDraggable) ? dragRef : null,
+            elevation: isDragging ? 4 : ((_e = state.sdkConfig) == null ? void 0 : _e.isDraggable) ? 1 : 0,
+            sx: {
+              position: ((_f = state.sdkConfig) == null ? void 0 : _f.isDraggable) ? "fixed" : "relative",
+              left: ((_g = state.sdkConfig) == null ? void 0 : _g.isDraggable) ? position.x : "auto",
+              top: ((_h = state.sdkConfig) == null ? void 0 : _h.isDraggable) ? position.y : "auto",
+              display: "inline-block",
+              width: "auto",
+              flexShrink: 0,
+              whiteSpace: "nowrap",
+              p: 0.5,
+              borderRadius: 3,
+              bgcolor: "background.paper",
+              zIndex: ((_i = state.sdkConfig) == null ? void 0 : _i.isDraggable) ? Number.MAX_SAFE_INTEGER : 0,
+              transition: theme.transitions.create(["box-shadow", "transform"], {
+                duration: theme.transitions.duration.short
+              }),
+              userSelect: "none"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              import_material4.Box,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                    import_material4.Box,
+                    {
+                      sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 1,
+                        margin: "0px 10px"
+                      },
+                      children: [
+                        ((_j = state.sdkConfig) == null ? void 0 : _j.isDraggable) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                          import_material4.IconButton,
+                          {
+                            component: "div",
+                            size: "small",
+                            sx: {
+                              cursor: "all-scroll"
+                            },
+                            onMouseDown: handleMouseDown,
+                            onTouchStart: handleTouchStart,
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.DragIndicator, {}),
+                              " "
+                            ]
+                          }
+                        ),
+                        ((_k = state.sdkConfig) == null ? void 0 : _k.enableQueueName) && ((_l = state == null ? void 0 : state.callData) == null ? void 0 : _l.queue_name) && ((_m = state == null ? void 0 : state.callData) == null ? void 0 : _m.mode) !== "manual" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Chip, { label: (_n = state == null ? void 0 : state.callData) == null ? void 0 : _n.queue_name }),
+                        !((_o = state.sdkConfig) == null ? void 0 : _o.disabledDialButton) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Dial", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_material4.IconButton,
+                          {
+                            size: "small",
+                            onClick: (e) => {
+                              var _a3, _b2;
+                              if (![
+                                "BREAK" /* BREAK */,
+                                "ONCALL" /* ONCALL */,
+                                "RINGING" /* RINGING */,
+                                "WRAPUP" /* WRAPUP */
+                              ].includes((_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase())) {
+                                handleOpenDialer(e);
+                              }
+                            },
+                            disabled: [
+                              "BREAK" /* BREAK */,
+                              "ONCALL" /* ONCALL */,
+                              "RINGING" /* RINGING */,
+                              "WRAPUP" /* WRAPUP */
+                            ].includes(state.callData.status.toUpperCase()),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              import_icons_material2.WifiCalling3,
+                              {
+                                sx: {
+                                  color: [
+                                    "BREAK" /* BREAK */,
+                                    "ONCALL" /* ONCALL */,
+                                    "RINGING" /* RINGING */,
+                                    "WRAPUP" /* WRAPUP */
+                                  ].includes(state.callData.status.toUpperCase()) ? "action.selected" : "success.main"
+                                }
+                              }
+                            )
+                          }
+                        ) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { onClick: () => setShowIframe(true), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_material4.Typography,
+                          {
+                            sx: {
+                              color: "success.main",
+                              width: "40px",
+                              marginRight: "10px",
+                              fontSize: "18px",
+                              fontWeight: "600",
+                              cursor: "pointer"
+                            },
+                            children: state.callData.status === "WRAPUP" /* WRAPUP */ && callWrapuptime !== null ? formatDuration(callWrapuptime) : formatDuration(callDuration)
+                          }
+                        ) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_material4.Chip,
+                          {
+                            sx: {
+                              padding: "18px 0px"
+                            },
+                            label: isLoading || agentReadyLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              import_material4.Box,
+                              {
+                                sx: {
+                                  fontWeight: "bold",
+                                  width: "60px",
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center"
+                                },
+                                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.CircularProgress, { size: "20px" })
+                              }
+                            ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              import_material4.Typography,
+                              {
+                                variant: "body2",
+                                sx: {
+                                  fontWeight: "bold",
+                                  width: "60px",
+                                  textAlign: "center"
+                                },
+                                children: (_r = (_q = (_p = state.callData) == null ? void 0 : _p.status) == null ? void 0 : _q.toUpperCase()) != null ? _r : "N/A"
+                              }
+                            ),
+                            onClick: handleOpenAgentStatus,
+                            deleteIcon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.KeyboardArrowDown, { color: "primary" }),
+                            onDelete: handleOpenAgentStatus
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                    import_material4.Box,
+                    {
+                      sx: {
+                        display: "flex",
+                        gap: 1,
+                        justifyContent: "center",
+                        alignItems: "center"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Agent Ready", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_material4.Button,
+                          {
+                            variant: ["BREAK" /* BREAK */, "MISSED" /* MISSED */].includes(
+                              (_t = (_s = state.callData) == null ? void 0 : _s.status) == null ? void 0 : _t.toUpperCase()
+                            ) ? "outlined" : "contained",
+                            onClick: (e) => {
+                              var _a3, _b2;
+                              if (["BREAK" /* BREAK */, "MISSED" /* MISSED */].includes(
+                                (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()
+                              )) {
+                                e.stopPropagation();
+                                handleAgentReady();
+                              }
+                            },
+                            classes: {
+                              root: ["BREAK" /* BREAK */, "MISSED" /* MISSED */].includes(
+                                (_v = (_u = state.callData) == null ? void 0 : _u.status) == null ? void 0 : _v.toUpperCase()
+                              ) ? "outlined" : "enabled"
+                            },
+                            sx: __spreadValues({}, ["BREAK" /* BREAK */, "MISSED" /* MISSED */].includes(
+                              (_x = (_w = state.callData) == null ? void 0 : _w.status) == null ? void 0 : _x.toUpperCase()
+                            ) ? outlined : enabled),
+                            disabled: agentReadyLoading,
+                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.SupportAgent, {})
+                          }
+                        ) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: ((_y = state.callData) == null ? void 0 : _y.hold) === 1 ? "Resume" : "Hold", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_material4.Button,
+                          {
+                            variant: ((_z = state.callData) == null ? void 0 : _z.hold) === 1 && ((_B = (_A = state.callData) == null ? void 0 : _A.status) == null ? void 0 : _B.toUpperCase()) === "ONCALL" /* ONCALL */ ? "contained" : "outlined",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleHoldToggle();
+                            },
+                            sx: ((_C = state.callData) == null ? void 0 : _C.hold) === 1 && ((_E = (_D = state.callData) == null ? void 0 : _D.status) == null ? void 0 : _E.toUpperCase()) === "ONCALL" /* ONCALL */ ? __spreadValues({}, enabled) : ((_G = (_F = state.callData) == null ? void 0 : _F.status) == null ? void 0 : _G.toUpperCase()) === "ONCALL" /* ONCALL */ ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                            disabled: ((_I = (_H = state.callData) == null ? void 0 : _H.status) == null ? void 0 : _I.toUpperCase()) !== "ONCALL" /* ONCALL */ && ((_J = state.callData) == null ? void 0 : _J.hold) !== 1 || holdOrUnHoldLoading,
+                            children: holdOrUnHoldLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              import_material4.CircularProgress,
+                              {
+                                size: "20px",
+                                sx: {
+                                  color: theme.palette.primary.main
+                                }
+                              }
+                            ) : ((_K = state.callData) == null ? void 0 : _K.hold) === 1 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.PlayArrow, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Pause, {})
+                          }
+                        ) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: ((_L = state.callData) == null ? void 0 : _L.mute) === 1 ? "Unmute" : "Mute", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_material4.Button,
+                          {
+                            variant: ((_M = state.callData) == null ? void 0 : _M.mute) === 1 && ((_O = (_N = state.callData) == null ? void 0 : _N.status) == null ? void 0 : _O.toUpperCase()) === "ONCALL" /* ONCALL */ ? "contained" : "outlined",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleMuteToggle();
+                            },
+                            sx: ((_P = state.callData) == null ? void 0 : _P.hold) === 1 ? __spreadValues({}, disabled) : ((_Q = state.callData) == null ? void 0 : _Q.mute) === 1 && ((_S = (_R = state.callData) == null ? void 0 : _R.status) == null ? void 0 : _S.toUpperCase()) === "ONCALL" /* ONCALL */ ? __spreadValues({}, enabled) : ((_U = (_T = state.callData) == null ? void 0 : _T.status) == null ? void 0 : _U.toUpperCase()) === "ONCALL" /* ONCALL */ ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                            disabled: ((_W = (_V = state.callData) == null ? void 0 : _V.status) == null ? void 0 : _W.toUpperCase()) !== "ONCALL" /* ONCALL */ && ((_X = state.callData) == null ? void 0 : _X.mute) !== 1 || muteOrUnMuteLoading || ((_Y = state.callData) == null ? void 0 : _Y.hold) === 1,
+                            children: muteOrUnMuteLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              import_material4.CircularProgress,
+                              {
+                                size: "20px",
+                                sx: {
+                                  color: theme.palette.primary.main
+                                }
+                              }
+                            ) : ((_Z = state.callData) == null ? void 0 : _Z.mute) === 1 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.MicOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Mic, {})
+                          }
+                        ) }),
+                        !((__ = state.sdkConfig) == null ? void 0 : __.disableCallTransferButton) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Transfer Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_material4.Button,
+                          {
+                            variant: state.openCallTransferDialog ? "contained" : "outlined",
+                            onClick: (e) => {
+                              var _a3, _b2;
+                              if (((_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL" /* ONCALL */) {
+                                e.stopPropagation();
+                                sdkStateManager.setOpenCallTransferDialog(true);
+                              }
+                            },
+                            sx: state.openCallTransferDialog ? __spreadValues({}, enabled) : ((_aa = (_$ = state.callData) == null ? void 0 : _$.status) == null ? void 0 : _aa.toUpperCase()) === "ONCALL" /* ONCALL */ ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                            disabled: ((_ca = (_ba = state.callData) == null ? void 0 : _ba.status) == null ? void 0 : _ca.toUpperCase()) !== "ONCALL" /* ONCALL */,
+                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.TransferWithinAStation, {})
+                          }
+                        ) }),
+                        !((_da = state.sdkConfig) == null ? void 0 : _da.disableConferenceButton) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Conference Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_material4.Button,
+                          {
+                            variant: state.openConferenceDialog ? "contained" : "outlined",
+                            onClick: (e) => {
+                              var _a3, _b2;
+                              if (((_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL" /* ONCALL */) {
+                                e.stopPropagation();
+                                sdkStateManager.setOpenConferenceDialog(true);
+                              }
+                            },
+                            sx: state.openConferenceDialog ? __spreadValues({}, enabled) : ((_fa = (_ea = state.callData) == null ? void 0 : _ea.status) == null ? void 0 : _fa.toUpperCase()) === "ONCALL" /* ONCALL */ ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                            disabled: ((_ha = (_ga = state.callData) == null ? void 0 : _ga.status) == null ? void 0 : _ha.toUpperCase()) !== "ONCALL" /* ONCALL */,
+                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Group, {})
+                          }
+                        ) }),
+                        ((_ia = state.sdkConfig) == null ? void 0 : _ia.enableSmsServices) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Send SMS", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_material4.Button,
+                          {
+                            variant: Boolean(ambulanceAnchorEl) ? "contained" : "outlined",
+                            onClick: (e) => {
+                              var _a3, _b2;
+                              if (["ONCALL" /* ONCALL */, "WRAPUP" /* WRAPUP */].includes(
+                                (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()
+                              )) {
+                                e.stopPropagation();
+                                handleOpenAbulanceServices(e);
+                              }
+                            },
+                            sx: Boolean(ambulanceAnchorEl) ? __spreadValues({}, enabled) : ["ONCALL" /* ONCALL */, "WRAPUP" /* WRAPUP */].includes(
+                              (_ka = (_ja = state.callData) == null ? void 0 : _ja.status) == null ? void 0 : _ka.toUpperCase()
+                            ) ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                            disabled: !["ONCALL" /* ONCALL */, "WRAPUP" /* WRAPUP */].includes(
+                              (_ma = (_la = state.callData) == null ? void 0 : _la.status) == null ? void 0 : _ma.toUpperCase()
+                            ),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.SmsSharp, {})
+                          }
+                        ) }),
+                        !((_na = state.sdkConfig) == null ? void 0 : _na.disableEndCallButton) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "End Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_material4.Button,
+                          {
+                            variant: [
+                              "ONCALL" /* ONCALL */,
+                              "RINGING" /* RINGING */,
+                              "DIALING" /* DIALING */,
+                              "WRAPUP" /* WRAPUP */
+                            ].includes((_pa = (_oa = state.callData) == null ? void 0 : _oa.status) == null ? void 0 : _pa.toUpperCase()) ? "contained" : "outlined",
+                            onClick: (e) => {
+                              var _a3, _b2;
+                              if ([
+                                "ONCALL" /* ONCALL */,
+                                "RINGING" /* RINGING */,
+                                "DIALING" /* DIALING */,
+                                "WRAPUP" /* WRAPUP */
+                              ].includes((_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase())) {
+                                e.stopPropagation();
+                                setOpenCallDisposition(true);
+                              }
+                            },
+                            sx: [
+                              "ONCALL" /* ONCALL */,
+                              "RINGING" /* RINGING */,
+                              "DIALING" /* DIALING */,
+                              "WRAPUP" /* WRAPUP */
+                            ].includes((_ra = (_qa = state.callData) == null ? void 0 : _qa.status) == null ? void 0 : _ra.toUpperCase()) ? __spreadProps(__spreadValues({}, enabled), {
+                              borderRight: "1px",
+                              backgroundColor: "error.main",
+                              minWidth: "60px !important",
+                              boxShadow: " 0px 2px 1px #5f3f3f",
+                              border: `1px solid ${theme.palette.error.light}`,
+                              height: "40px",
+                              "&:hover": {
+                                bgcolor: "error.light",
+                                boxShadow: " 0px 2px 1px #5f3f3f",
+                                border: `0px solid ${theme.palette.error.light}`
+                              },
+                              "&:active": {
+                                bgcolor: "error.light",
+                                boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
+                              }
+                            }) : __spreadProps(__spreadValues({}, disabled), {
+                              minWidth: "60px !important"
+                            }),
+                            disabled: ![
+                              "ONCALL" /* ONCALL */,
+                              "RINGING" /* RINGING */,
+                              "DIALING" /* DIALING */,
+                              "WRAPUP" /* WRAPUP */
+                            ].includes((_ta = (_sa = state.callData) == null ? void 0 : _sa.status) == null ? void 0 : _ta.toUpperCase()) || endCallLoading,
+                            children: endCallLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              import_material4.CircularProgress,
+                              {
+                                size: "20px",
+                                color: "error"
+                              }
+                            ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.CallEnd, {})
+                          }
+                        ) }),
+                        !((_ua = state.sdkConfig) == null ? void 0 : _ua.disabledMoreOptionsButton) && processList && (processList == null ? void 0 : processList.length) > 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Switch Process", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_material4.Button,
+                          {
+                            variant: Boolean(moreOptionsAnchorEl) ? "contained" : "outlined",
+                            onClick: (e) => {
+                              var _a3, _b2;
+                              if (["BREAK" /* BREAK */, "IDLE" /* IDLE */].includes(
+                                (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()
+                              )) {
+                                e.stopPropagation();
+                                handleOpenMoreOptions(e);
+                              }
+                            },
+                            sx: Boolean(moreOptionsAnchorEl) ? __spreadValues({}, enabled) : __spreadValues({}, outlined),
+                            disabled: !["BREAK" /* BREAK */, "IDLE" /* IDLE */].includes(
+                              (_wa = (_va = state.callData) == null ? void 0 : _va.status) == null ? void 0 : _wa.toUpperCase()
+                            ),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.MoreVert, {})
+                          }
+                        ) })
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_material4.Fade,
+      {
+        in: true,
+        timeout: 300,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          import_material4.Paper,
+          {
+            ref: iframeDragRef,
+            elevation: iframeIsDragging ? 4 : 1,
+            sx: {
+              position: "absolute",
+              left: iframePosition.x,
+              top: iframePosition.y,
+              borderRadius: 2,
+              bgcolor: "background.paper",
+              zIndex: Number.MAX_SAFE_INTEGER,
+              transition: theme.transitions.create(["box-shadow", "transform"], {
+                duration: theme.transitions.duration.short
+              }),
+              visibility: showIframe && !((_xa = state.sdkConfig) == null ? void 0 : _xa.disableSoftPhone) ? "visible" : "hidden",
+              userSelect: "none"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                import_material4.Box,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    cursor: "all-scroll",
+                    padding: "0px 10px"
+                  },
+                  onMouseDown: iframeHandleMouseDown,
+                  onTouchStart: iframeHandleTouchStart,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      import_icons_material2.DragIndicator,
+                      {
+                        sx: {
+                          transform: "rotate(90deg)",
+                          color: "#7b7b7b"
+                        }
+                      }
+                    ),
+                    " ",
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.IconButton, { onClick: () => setShowIframe(false), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Close, {}) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "iframe",
+                {
+                  src: `${(_ya = state.urlConfig) == null ? void 0 : _ya.iframeURL}/static/phone/cti_index.html?user_id=${state.agentId}&api_url=${(_za = state.urlConfig) == null ? void 0 : _za.iframeAPIURL}`,
+                  height: 380,
+                  width: 420,
+                  allow: "camera; microphone; autoplay",
+                  style: {
+                    border: "none"
+                  }
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_material4.Menu,
+      {
+        anchorEl: dialerAnchorEl,
+        open: Boolean(dialerAnchorEl),
+        onClose: handleCloseDialer,
+        onClick: (e) => e.stopPropagation(),
+        sx: {
+          zIndex: 99999
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          import_material4.Box,
+          {
+            sx: {
+              all: "unset",
+              padding: "10px",
+              "&hover": {
+                backgroundColor: "white"
+              }
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_material4.TextField,
+                {
+                  size: "small",
+                  value: phoneNumber,
+                  placeholder: "Enter Mobile No.",
+                  onChange: (e) => {
+                    const value = e.target.value;
+                    setPhoneNumber(value);
+                  },
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                      handleStartCall(phoneNumber);
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_material4.IconButton,
+                {
+                  color: "info",
+                  onClick: () => {
+                    handleStartCall(phoneNumber);
+                  },
+                  children: clickToCallLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    import_material4.CircularProgress,
+                    {
+                      size: "20px",
+                      sx: {
+                        color: theme.palette.success.main
+                      }
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Phone, { color: "success" })
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_material4.Menu,
+      {
+        anchorEl: ambulanceAnchorEl,
+        open: Boolean(ambulanceAnchorEl),
+        onClose: handleCloseAmbulance,
+        onClick: (e) => e.stopPropagation(),
+        sx: {
+          zIndex: 99999
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_material4.Box,
+          {
+            sx: {
+              all: "unset",
+              padding: " 0px 20px",
+              "&hover": {
+                backgroundColor: "white"
+              },
+              display: "flex",
+              alignItems: "center"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Ambulance Service", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              import_material4.Button,
+              {
+                color: "primary",
+                variant: "outlined",
+                onClick: () => {
+                  handleSendSMS(state.callData);
+                },
+                children: [
+                  "Ambulance",
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                    import_material4.Box,
+                    {
+                      sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        backgroundColor: "green",
+                        color: "#fff",
+                        marginLeft: "14px",
+                        padding: "2px 6px",
+                        borderRadius: "10px"
+                      },
+                      children: [
+                        "Send",
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_icons_material2.SendRounded,
+                          {
+                            sx: {
+                              marginLeft: "8px",
+                              width: "18px",
+                              transform: "rotate(-16deg)"
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            ) })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_material4.Menu,
+      {
+        anchorEl: moreOptionsAnchorEl,
+        open: Boolean(moreOptionsAnchorEl),
+        onClose: handleCloseMoreOptions,
+        onClick: (e) => e.stopPropagation(),
+        sx: {
+          zIndex: 99999
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_material4.Box,
+          {
+            sx: {
+              all: "unset",
+              padding: " 0px 20px",
+              "&hover": {
+                backgroundColor: "white"
+              },
+              display: "flex",
+              alignItems: "center",
+              flexDirection: "column",
+              gap: 1
+            },
+            children: processList == null ? void 0 : processList.map((item) => {
+              var _a3, _b2, _c2;
+              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_material4.Box,
+                {
+                  sx: {
+                    width: "100%"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: (_a3 = item == null ? void 0 : item.process_name) != null ? _a3 : "", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    import_material4.Button,
+                    {
+                      color: "primary",
+                      variant: ((_b2 = state == null ? void 0 : state.process) == null ? void 0 : _b2.process_id) === (item == null ? void 0 : item.process_id) ? "contained" : "outlined",
+                      onClick: () => {
+                        sdkStateManager.setProcess(item);
+                      },
+                      sx: {
+                        width: "100%"
+                      },
+                      children: (_c2 = item == null ? void 0 : item.process_name) != null ? _c2 : ""
+                    }
+                  ) })
+                },
+                item == null ? void 0 : item.process_id
+              );
+            })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_material4.Menu,
+      {
+        anchorEl: statusAnchorEl,
+        open: Boolean(statusAnchorEl),
+        onClose: handleCloseAgentStatus,
+        onClick: (e) => e.stopPropagation(),
+        sx: {
+          zIndex: 99999
+        },
+        children: !breaksList || (breaksList == null ? void 0 : breaksList.length) === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.MenuItem, { onClick: () => handleUpdateAgentStatus("Lunch"), children: "- Break" }) : breaksList == null ? void 0 : breaksList.map((item) => {
+          var _a3, _b2, _c2;
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            import_material4.MenuItem,
+            {
+              sx: {
+                // hilight background of selected
+                backgroundColor: ((_a3 = state == null ? void 0 : state.callData) == null ? void 0 : _a3.status) === "BREAK" && (state == null ? void 0 : state.agentStatus) === (item == null ? void 0 : item.type) ? "primary.main" : "transparent",
+                color: ((_b2 = state == null ? void 0 : state.callData) == null ? void 0 : _b2.status) === "BREAK" && (state == null ? void 0 : state.agentStatus) === (item == null ? void 0 : item.type) ? "white" : "primary.main",
+                ":hover": {
+                  backgroundColor: ((_c2 = state == null ? void 0 : state.callData) == null ? void 0 : _c2.status) === "BREAK" && (state == null ? void 0 : state.agentStatus) === (item == null ? void 0 : item.type) ? "primary.dark" : "selected.hover"
+                  // color:
+                  // 	state?.callData?.status === "BREAK" && state?.agentStatus === item?.type ?
+                  // 		"primary.main"
+                  // 	:	"primary.main",
+                }
+              },
+              onClick: () => handleUpdateAgentStatus(item == null ? void 0 : item.type),
+              children: [
+                "- ",
+                item == null ? void 0 : item.type
+              ]
+            },
+            item == null ? void 0 : item.type
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_material4.Menu,
+      {
+        anchorEl,
+        open: Boolean(anchorEl),
+        onClose: handleCloseQueueCounts,
+        onClick: (e) => e.stopPropagation(),
+        sx: {
+          zIndex: 99999
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          import_material4.Box,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "flex-start",
+              flexDirection: "column",
+              padding: "0px 10px",
+              "&hover": {
+                backgroundColor: "white"
+              }
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_material4.Chip,
+                {
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Layers, { color: "secondary" }),
+                  variant: "outlined",
+                  label: "Waiting - 25",
+                  sx: {
+                    margin: "4px 2px"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_material4.Chip,
+                {
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Pending, { color: "info" }),
+                  label: "Pending - 99+",
+                  variant: "outlined",
+                  sx: {
+                    margin: "4px 2px"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_material4.Chip,
+                {
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Upcoming, { color: "success" }),
+                  variant: "outlined",
+                  label: "Upcoming - 66",
+                  sx: {
+                    margin: "4px 2px"
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    Boolean(state.openConferenceDialog) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ConferenceDialog, {}),
+    Boolean(state.openCallTransferDialog) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CallTransferDialog, { open: state.openCallTransferDialog }),
+    Boolean(openCallDisposition) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      EndCallDispositionDialog,
+      {
+        open: openCallDisposition,
+        setOpen: setOpenCallDisposition,
+        onSubmitDisposition: handleEndCall
+      }
+    ),
+    Boolean(openCallHistoryDialog) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      CallHistoryDialog,
+      {
+        open: openCallHistoryDialog,
+        setOpen: setOpenCallHistoryDialog
+      }
+    )
+  ] });
+}
+
+// call-control-sdk/lib/components/SDKProvider.tsx
+var import_react12 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var SDKProvider = (0, import_react12.memo)(({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ToastProvider, { children });
+});
+SDKProvider.displayName = "SDKProvider";
+
+// call-control-sdk/lib/components/callControlPanel.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var CallControlPanel = (0, import_react13.memo)(({ onDataChange }) => {
+  const handleDataChange = (0, import_react13.useCallback)(
+    (data) => {
+      try {
+        if (onDataChange && typeof onDataChange === "function") {
+          onDataChange(data);
+        }
+      } catch (error) {
+        console.error("Error in CallControlPanel data change handler:", error);
+      }
+    },
+    [onDataChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SDKProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CallControls, { onDataChange: handleDataChange }) });
+});
+CallControlPanel.displayName = "CallControlPanel";
+
+// call-control-sdk/index.ts
+async function initSDK({
+  apiKey,
+  tenantId,
+  agentId,
+  sdkConfig,
+  urlConfig
+}) {
+  if (!apiKey || typeof apiKey !== "string" || apiKey.trim().length === 0) {
+    throw new Error(
+      "SDK initialization failed: API key is required and must be a non-empty string"
+    );
+  }
+  if (!tenantId || typeof tenantId !== "string" || tenantId.trim().length === 0) {
+    throw new Error(
+      "SDK initialization failed: Tenant ID is required and must be a non-empty string"
+    );
+  }
+  if (!agentId || typeof agentId !== "string" || agentId.trim().length === 0) {
+    throw new Error(
+      "SDK initialization failed: Agent ID is required and must be a non-empty string"
+    );
+  }
+  try {
+    const initResult = await eventTracker.init({
+      apiKey: apiKey.trim(),
+      tenantId: tenantId.trim(),
+      agentId: agentId.trim(),
+      password: urlConfig == null ? void 0 : urlConfig.password,
+      baseUrl: urlConfig == null ? void 0 : urlConfig.baseURL
+    });
+    const res = {
+      accessToken: initResult == null ? void 0 : initResult.accessToken,
+      expiration: initResult == null ? void 0 : initResult.expiration,
+      ticketId: initResult == null ? void 0 : initResult.ticketId
+    };
+    if (initResult) {
+      console.info("SDK initialized successfully");
+      sdkStateManager.initialize(
+        apiKey.trim(),
+        tenantId.trim(),
+        agentId.trim(),
+        __spreadValues(__spreadValues({}, initResult == null ? void 0 : initResult.call_controls), sdkConfig),
+        res
+      );
+    } else {
+      sdkStateManager.setInitCheck();
+      throw new Error(
+        "SDK initialization failed: Unable to establish connection with the CTI system"
+      );
+    }
+  } catch (error) {
+    sdkStateManager.setInitCheck();
+    if (error instanceof Error) {
+      throw error;
+    } else {
+      throw new Error(`SDK initialization failed: ${String(error)}`);
+    }
+  }
+}
+function getSDKVersion() {
+  return "6.x.x";
+}
+function isSDKInitialized() {
+  return sdkStateManager.getState().isInitialized;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CallControlPanel,
+  getSDKVersion,
+  initSDK,
+  isSDKInitialized,
+  useClickToCall,
+  useEndCall,
+  useGetAuthorizationToken,
+  useGetCallerData,
+  useLogout
+});
+//# sourceMappingURL=index.js.map