ahs-cti 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/index.mjs

@@ -1,23 +1,17 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import {
+  END_POINT,
+  SDKProvider,
+  SDK_MENU_CODES,
+  SDK_PERMISSIONS,
+  SDK_WILDCARD,
+  STORAGE_KEY,
+  __publicField,
+  __spreadProps,
+  __spreadValues,
+  axios_default,
+  sdkStateManager,
+  useToast
+} from "./chunk-6AM6THQM.mjs";
 
 // call-control-sdk/lib/hooks/eventsTracker.ts
 var EventTrackerSDK = class {
@@ -72,9 +66,9 @@ var EventTrackerSDK = class {
     }
   }
   async makeRequest(url, options) {
-    var _a2;
+    var _a;
     const fullUrl = `${this.baseUrl}${url}`;
-    const maxRetries = ((_a2 = this.config) == null ? void 0 : _a2.retryAttempts) || 3;
+    const maxRetries = ((_a = this.config) == null ? void 0 : _a.retryAttempts) || 3;
     for (let attempt = 1; attempt <= maxRetries; attempt++) {
       try {
         const response = await fetch(fullUrl, options);
@@ -100,587 +94,30 @@ if (typeof window !== "undefined") {
   window.EventTracker = eventTracker;
 }
 
-// call-control-sdk/lib/hooks/sdk-state.ts
-import { getItem, removeItem, setItem } from "@react-solutions/vault";
-
-// call-control-sdk/lib/utils/storage.ts
-var STORAGE_KEY = "call-control-sdk-state";
-
-// call-control-sdk/lib/permissions/sdk-constants.ts
-var SDK_PERMISSIONS = {
-  // main object key constants
-  CALLS: "calls",
-  CALL_TRANSFER: "call_transfer",
-  CALL_CONFERENCE: "call_conference",
-  // in each object has items list of objects
-  CALL_INBOUND: "call_inbound",
-  CALL_OUTBOUND: "call_outbound",
-  CONFERENCE: "call_conference",
-  TRANSFER_BLIND: "call_transfer_blind",
-  TRANSFER_ATTENDED: "call_transfer_attended",
-  TRANSFER_WARM: "call_transfer_warm"
-};
-
-// 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,
-        disableBlindTransfer: false,
-        disableAttendedTransfer: false,
-        disableWarmTransfer: false,
-        isDraggable: true,
-        disableSoftPhone: false,
-        disableConferenceButton: false,
-        disableHoldButton: false,
-        disableMuteButton: false,
-        disabled: {},
-        enabled: {},
-        outlined: {}
-      },
-      urlConfig: {
-        baseURL: "",
-        iframeURL: "",
-        iframeAPIURL: "",
-        webSocketURL: "",
-        coreBaseURL: "",
-        id: "",
-        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: -1,
-        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: "",
-      sdk: null,
-      isPermissionsLoaded: false
-    };
-  }
-  loadFromStorage() {
-    var _a2, _b;
-    try {
-      const stored = 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,
-            disableBlindTransfer: false,
-            disableAttendedTransfer: false,
-            disableWarmTransfer: false,
-            isDraggable: true,
-            disableSoftPhone: false,
-            disableConferenceButton: false,
-            disableHoldButton: false,
-            disableMuteButton: false,
-            disabled: {},
-            enabled: {},
-            outlined: {}
-          },
-          urlConfig: parsedState.urlConfig || {
-            id: "",
-            baseURL: "",
-            iframeURL: "",
-            iframeAPIURL: "",
-            webSocketURL: "",
-            coreBaseURL: "",
-            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,
-          sdk: parsedState.sdk || null,
-          isPermissionsLoaded: parsedState.isPermissionsLoaded || false
-        });
-      }
-    } 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,
-        sdk: this.state.sdk,
-        isPermissionsLoaded: this.state.isPermissionsLoaded
-      };
-      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, urlConfig, initResult, sdkConfig) {
-    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(__spreadValues({
-        disableEndCallButton: false,
-        disabledDialButton: false,
-        disabledMoreOptionsButton: false,
-        enableQueueName: false,
-        disableCallTransferButton: false,
-        disableBlindTransfer: false,
-        disableAttendedTransfer: false,
-        disableWarmTransfer: false,
-        isDraggable: true,
-        disableSoftPhone: false,
-        disableConferenceButton: false,
-        disableHoldButton: false,
-        disableMuteButton: false,
-        disabled: {},
-        enabled: {},
-        outlined: {}
-      }, sdkConfig), initResult == null ? void 0 : initResult.callControls);
-      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) || "",
-        coreBaseURL: (urlConfig == null ? void 0 : urlConfig.coreBaseURL) || "",
-        id: (urlConfig == null ? void 0 : urlConfig.id) || "",
-        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 {
-      removeItem(this.STORAGE_KEY);
-      this.state = this.getInitialState();
-      this.notifyListeners();
-    } catch (error) {
-      console.warn("Failed to clear:", error);
-    }
-  }
-  getConferenceLines() {
-    return this.state.conferenceLine || [];
-  }
-  /**
-   * Update SDK config with permission-based controls.
-   * Merges the provided controls with existing config.
-   */
-  updateSDKConfigFromPermissions(permissionControls) {
-    this.state.sdkConfig = __spreadValues(__spreadValues({}, this.state.sdkConfig), permissionControls);
-    this.saveToStorage();
-    this.notifyListeners();
-  }
-  // ============ Entitlement Logic (Ported from SDKPermissionManager) ============
-  /**
-   * Set user information (entitlements) from login response
-   */
-  setSDKPermissions(userInfo) {
-    var _a2;
-    if (!userInfo) return;
-    const sdk = (_a2 = userInfo.entitlements) == null ? void 0 : _a2.sdk;
-    this.state.sdk = sdk;
-    this.state.isPermissionsLoaded = true;
-    const permissionControls = this.getControlsConfig();
-    this.updateSDKConfigFromPermissions(permissionControls);
-    this.saveToStorage();
-    this.notifyListeners();
-  }
-  /**
-   * Check if a bit is enabled in entitlements
-   */
-  isBitEnabled(category, bitCode) {
-    var _a2;
-    const sdk = this.state.sdk;
-    if (!sdk) return false;
-    const categoryEntitlement = sdk[category];
-    if (!categoryEntitlement) return false;
-    if (!categoryEntitlement.enabled) return false;
-    if (!bitCode) return true;
-    const bit = (_a2 = categoryEntitlement.items) == null ? void 0 : _a2.find(
-      (item) => item.code === bitCode
-    );
-    return bit ? bit.enabled : false;
-  }
-  /**
-   * Get SDK controls configuration derived exclusively from structured entitlements.
-   */
-  getControlsConfig() {
-    const { sdk, isPermissionsLoaded } = this.state;
-    if (!isPermissionsLoaded || !sdk) {
-      return {
-        disabledDialButton: true,
-        disableEndCallButton: true,
-        disableCallTransferButton: true,
-        disableBlindTransfer: true,
-        disableAttendedTransfer: true,
-        disableWarmTransfer: true,
-        disableConferenceButton: true,
-        disableHoldButton: true,
-        disableMuteButton: true,
-        disabledMoreOptionsButton: true
-      };
-    }
-    const isDialAllowed = this.isBitEnabled(
-      "calls",
-      SDK_PERMISSIONS.CALL_OUTBOUND
-    );
-    const isInboundAllowed = this.isBitEnabled(
-      "calls",
-      SDK_PERMISSIONS.CALL_INBOUND
-    );
-    const isAnyCallAllowed = isDialAllowed || isInboundAllowed;
-    const isHoldAllowed = isAnyCallAllowed;
-    const isMuteAllowed = isAnyCallAllowed;
-    const isEndCallAllowed = isAnyCallAllowed;
-    const isConferenceAllowed = this.isBitEnabled("call_conference", "");
-    const isTransferEnabled = this.isBitEnabled("call_transfer", "");
-    const isBlindAllowed = this.isBitEnabled(
-      "call_transfer",
-      SDK_PERMISSIONS.TRANSFER_BLIND
-    );
-    const isAttendedAllowed = this.isBitEnabled(
-      "call_transfer",
-      SDK_PERMISSIONS.TRANSFER_ATTENDED
-    );
-    const isWarmAllowed = this.isBitEnabled(
-      "call_transfer",
-      SDK_PERMISSIONS.TRANSFER_WARM
-    );
-    return {
-      disabledDialButton: !isDialAllowed,
-      disableEndCallButton: !isEndCallAllowed,
-      disableCallTransferButton: !isTransferEnabled,
-      disableBlindTransfer: !isBlindAllowed,
-      disableAttendedTransfer: !isAttendedAllowed,
-      disableWarmTransfer: !isWarmAllowed,
-      disableConferenceButton: !isConferenceAllowed,
-      disableHoldButton: !isHoldAllowed,
-      disableMuteButton: !isMuteAllowed,
-      disabledMoreOptionsButton: false
-    };
-  }
-};
-var sdkStateManager = new SDKStateManager();
-
 // call-control-sdk/lib/hooks/useLogout.ts
 import { useCallback, useState } from "react";
-import { getItem as getItem2, removeItem as removeItem2 } from "@react-solutions/vault";
+import { removeSession } from "@react-solutions/vault";
 var useLogout = () => {
   const [loading, setLoading] = useState(false);
   const [success, setSuccess] = useState(false);
   const [isError, setIsError] = useState(false);
   const [error, setError] = useState(null);
   const [data, setData] = useState(null);
+  const { showToast } = useToast();
   const handleLogout = useCallback(async () => {
-    const state = getItem2(STORAGE_KEY);
+    var _a, _b;
     setLoading(true);
-    const payload = {
-      action: "LOGOUTUSER",
-      userId: state.agentId || ""
-    };
-    sdkStateManager.clearStorageAndReset();
-    removeItem2(STORAGE_KEY);
-    setSuccess(true);
+    try {
+      await axios_default.post(END_POINT.AUTH_LOGOUT);
+    } catch (err) {
+      const message = ((_b = (_a = err == null ? void 0 : err.response) == null ? void 0 : _a.data) == null ? void 0 : _b.message) || "Logout failed. Please try again.";
+      showToast(message, "error");
+    } finally {
+      sdkStateManager.clearStorageAndReset();
+      removeSession(STORAGE_KEY);
+      setSuccess(true);
+      setLoading(false);
+    }
   }, []);
   return {
     logout: handleLogout,
@@ -694,188 +131,7 @@ var useLogout = () => {
 
 // call-control-sdk/lib/hooks/useEndCall.ts
 import { useCallback as useCallback2, useState as useState2 } from "react";
-
-// call-control-sdk/lib/services/endPoint.ts
-var getBaseURL = () => {
-  var _a2, _b, _c;
-  return ((_c = (_b = (_a2 = sdkStateManager) == null ? void 0 : _a2.getState()) == null ? void 0 : _b.urlConfig) == null ? void 0 : _c.baseURL) || "";
-};
-var getCoreURL = () => {
-  var _a2, _b, _c;
-  return ((_c = (_b = (_a2 = sdkStateManager) == null ? void 0 : _a2.getState()) == null ? void 0 : _b.urlConfig) == null ? void 0 : _c.coreBaseURL) || "";
-};
-var BASE_URL = getBaseURL();
-var CORE_URL = getCoreURL();
-var VERSION = {
-  v1: "/api/v1"
-};
-var END_POINT = {
-  get LOGIN() {
-    return `${getBaseURL()}${VERSION.v1}/cti/login?provider=convox`;
-  },
-  get READY_AGENT() {
-    return `${getCoreURL()}${VERSION.v1}/agents/ready`;
-  },
-  get UPDATE_AGENT_BREAK() {
-    return `${getCoreURL()}${VERSION.v1}/agents/status`;
-  },
-  get CLICK_TO_CALL() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/dial`;
-  },
-  get HOLD_CALL() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/hold`;
-  },
-  get MUTE_CALL() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/mute`;
-  },
-  get UNMUTE_CALL() {
-    return `${getCoreURL()}${VERSION.v1}/cti/mute`;
-  },
-  get END_CALL() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/hangup`;
-  },
-  get LOGOUT() {
-    return `${getBaseURL()}${VERSION.v1}/cti/logout?provider=convox`;
-  },
-  get CONFERENCE_CALL() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/conference/add`;
-  },
-  get CONFERENCE_MERGE_CALL() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/conference/merge`;
-  },
-  get CONFERENCE_CALL_HOLD_OR_UN_HOLD() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/hold`;
-  },
-  get CONFERENCE_CALL_MUTE_OT_UN_MUTE() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/mute`;
-  },
-  get CONFERENCE_CALL_END() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/hangup`;
-  },
-  get CONFERENCE_CALL_END_ALL() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/hangup`;
-  },
-  get CONFERENCE_CALL_TRANSFER() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/conference/transfer`;
-  },
-  get TRANSFER_CALL() {
-    return `${getCoreURL()}${VERSION.v1}/cti/calls/transfer-call`;
-  },
-  get AGENTS_LIST() {
-    return `${getBaseURL()}${VERSION.v1}/cti/users`;
-  },
-  get PROCESS_LIST() {
-    return `${getBaseURL()}${VERSION.v1}/cti/processes-list`;
-  },
-  get BREAKS_LIST() {
-    return `${getBaseURL()}${VERSION.v1}/cti/breaks`;
-  },
-  get TRANSFER_TO_DETAILS() {
-    return `${getBaseURL()}${VERSION.v1}/cti/transfer-to-details?provider=convox`;
-  },
-  get SEND_NOTIFICATIONS() {
-    return `${getBaseURL()}${VERSION.v1}/cti/notifications/send`;
-  },
-  get CALL_HISTORY() {
-    return `${getBaseURL()}${VERSION.v1}/dashboard/call-history`;
-  },
-  get SENTIMENTAL_ANALYSIS() {
-    return `${getBaseURL()}${VERSION.v1}/users/get_sentiment_analysis`;
-  },
-  get DISPOSITIONS() {
-    return `${getBaseURL()}${VERSION.v1}/cti/calls/dispositions`;
-  },
-  SET_CALL_DISPOSITION: (callUuid) => `${getBaseURL()}${VERSION.v1}/calls/${callUuid}/disposition`,
-  get HOSPITALS_SERVICES() {
-    return `${getBaseURL()}${VERSION.v1}/cti/hospital/services`;
-  },
-  get BLIEND_TRANSFER() {
-    return `${getBaseURL()}${VERSION.v1}/cti/calls/blind_transfer?provider=convox`;
-  },
-  // Permissions
-  get USER_PERMISSIONS() {
-    return `${getBaseURL()}${VERSION.v1}/rbac/users/me/permissions`;
-  }
-};
-
-// call-control-sdk/lib/services/axios.ts
-import axios from "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;
-  const instance = axios.create({
-    // baseURL: sdkStateManager.getState()?.urlConfig?.baseURL,
-    headers: {
-      "Content-Type": "application/json",
-      Accept: "application/json",
-      "x-tenant-id": (_b = (_a2 = sdkStateManager.getCredentials()) == null ? void 0 : _a2.tenantId) != null ? _b : "",
-      "x-api-key": (_d = (_c = sdkStateManager.getCredentials()) == null ? void 0 : _c.apiKey) != null ? _d : "",
-      Authorization: DEFAULT_TOKEN ? DEFAULT_TOKEN.startsWith("Bearer ") ? DEFAULT_TOKEN : `Bearer ${DEFAULT_TOKEN}` : ""
-    },
-    timeout: REQUEST_TIMEOUT,
-    withCredentials: false
-  });
-  instance.interceptors.request.use(
-    (config) => {
-      const token = getAuthToken();
-      if (token && config.headers) {
-        const authToken = token.startsWith("Bearer ") ? token : `Bearer ${token}`;
-        config.headers.Authorization = authToken;
-      }
-      console.log("API Request:", {
-        url: config.url,
-        method: config.method,
-        hasToken: !!token,
-        tokenStartsWithBearer: token == null ? void 0 : token.startsWith("Bearer "),
-        headers: {
-          Authorization: config.headers.Authorization,
-          "x-tenant-id": config.headers["x-tenant-id"],
-          "x-api-key": config.headers["x-api-key"]
-        }
-      });
-      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/useEndCall.ts
-import { getItem as getItem3 } from "@react-solutions/vault";
+import { getSession } from "@react-solutions/vault";
 var useEndCall = () => {
   const [loading, setLoading] = useState2(false);
   const [success, setSuccess] = useState2(false);
@@ -884,13 +140,13 @@ var useEndCall = () => {
   const [data, setData] = useState2(null);
   const handleEndCall = useCallback2(
     async (data2) => {
-      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
-      const state = getItem3(STORAGE_KEY);
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+      const state = getSession(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 : "",
+        processid: (_c = (_b = (_a = state == null ? void 0 : state.process) == null ? void 0 : _a.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 : "",
@@ -913,10 +169,10 @@ var useEndCall = () => {
         setSuccess(true);
         return res == null ? void 0 : res.data;
       }).catch((err) => {
-        var _a3;
+        var _a2;
         setIsError(true);
         setError(err);
-        return (_a3 = err == null ? void 0 : err.response) == null ? void 0 : _a3.data;
+        return (_a2 = err == null ? void 0 : err.response) == null ? void 0 : _a2.data;
       }).finally(() => {
         setLoading(false);
       });
@@ -935,7 +191,7 @@ var useEndCall = () => {
 
 // call-control-sdk/lib/hooks/useClickToCall.ts
 import { useCallback as useCallback3, useState as useState3 } from "react";
-import { getItem as getItem4 } from "@react-solutions/vault";
+import { getSession as getSession2 } from "@react-solutions/vault";
 var useClickToCall = () => {
   const [loading, setLoading] = useState3(false);
   const [success, setSuccess] = useState3(false);
@@ -943,10 +199,10 @@ var useClickToCall = () => {
   const [error, setError] = useState3(null);
   const [data, setData] = useState3(null);
   const handleStartCall = useCallback3(async (data2) => {
-    var _a2, _b, _c, _d, _e, _f, _g, _h;
-    const state = getItem4(STORAGE_KEY);
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const state = getSession2(STORAGE_KEY);
     setLoading(true);
-    if (((_a2 = state == null ? void 0 : state.callData) == null ? void 0 : _a2.status) === "IDLE") {
+    if (((_a = state == null ? void 0 : state.callData) == null ? void 0 : _a.status) === "IDLE") {
       const payload = {
         action: "CALL",
         userId: state == null ? void 0 : state.agentId,
@@ -958,10 +214,10 @@ var useClickToCall = () => {
         setSuccess(true);
         return res == null ? void 0 : res.data;
       }).catch((err) => {
-        var _a3;
+        var _a2;
         setIsError(true);
         setError(err);
-        return (_a3 = err == null ? void 0 : err.response) == null ? void 0 : _a3.data;
+        return (_a2 = err == null ? void 0 : err.response) == null ? void 0 : _a2.data;
       }).finally(() => {
         setLoading(false);
       });
@@ -981,10 +237,10 @@ var useClickToCall = () => {
         sdkStateManager.setOpenConferenceDialog(true);
         return res == null ? void 0 : res.data;
       }).catch((err) => {
-        var _a3;
+        var _a2;
         setIsError(true);
         setError(err);
-        return (_a3 = err == null ? void 0 : err.response) == null ? void 0 : _a3.data;
+        return (_a2 = err == null ? void 0 : err.response) == null ? void 0 : _a2.data;
       }).finally(() => {
         setLoading(false);
       });
@@ -1059,8 +315,81 @@ function useSDKState() {
   return state;
 }
 
+// call-control-sdk/lib/hooks/useCallMonitoring.ts
+import { useCallback as useCallback4, useState as useState7 } from "react";
+var useCallMonitoring = () => {
+  const [loading, setLoading] = useState7(false);
+  const [success, setSuccess] = useState7(false);
+  const [isError, setIsError] = useState7(false);
+  const [error, setError] = useState7(null);
+  const [data, setData] = useState7(null);
+  const resetState = () => {
+    setSuccess(false);
+    setIsError(false);
+    setError(null);
+  };
+  const startMonitoring2 = useCallback4(async (payload) => {
+    resetState();
+    setLoading(true);
+    return axios_default.post(END_POINT.SUPERVISOR_CALL_LISTEN, payload).then((res) => {
+      setData(res == null ? void 0 : res.data);
+      setSuccess(true);
+      return res == null ? void 0 : res.data;
+    }).catch((err) => {
+      var _a;
+      setIsError(true);
+      setError(err);
+      return (_a = err == null ? void 0 : err.response) == null ? void 0 : _a.data;
+    }).finally(() => {
+      setLoading(false);
+    });
+  }, []);
+  const stopMonitoring2 = useCallback4(async (payload) => {
+    resetState();
+    setLoading(true);
+    return axios_default.post(END_POINT.SUPERVISOR_CALL_LEAVE, payload).then((res) => {
+      setData(res == null ? void 0 : res.data);
+      setSuccess(true);
+      return res == null ? void 0 : res.data;
+    }).catch((err) => {
+      var _a;
+      setIsError(true);
+      setError(err);
+      return (_a = err == null ? void 0 : err.response) == null ? void 0 : _a.data;
+    }).finally(() => {
+      setLoading(false);
+    });
+  }, []);
+  const changeMode = useCallback4(async (payload) => {
+    resetState();
+    setLoading(true);
+    return axios_default.post(END_POINT.SUPERVISOR_CALL_CHANGE_MODE, payload).then((res) => {
+      setData(res == null ? void 0 : res.data);
+      setSuccess(true);
+      return res == null ? void 0 : res.data;
+    }).catch((err) => {
+      var _a;
+      setIsError(true);
+      setError(err);
+      return (_a = err == null ? void 0 : err.response) == null ? void 0 : _a.data;
+    }).finally(() => {
+      setLoading(false);
+    });
+  }, []);
+  return {
+    startMonitoring: startMonitoring2,
+    stopMonitoring: stopMonitoring2,
+    changeMode,
+    isLoading: loading,
+    isSuccess: success,
+    isError,
+    error,
+    data
+  };
+};
+
 // call-control-sdk/lib/components/callControlPanel.tsx
-import { memo as memo2, useCallback as useCallback6 } from "react";
+import { memo, useCallback as useCallback7 } from "react";
 
 // call-control-sdk/lib/components/callControls.tsx
 import {
@@ -1091,8 +420,8 @@ import {
   CircularProgress as CircularProgress2,
   Fade,
   IconButton as IconButton2,
-  Menu,
-  MenuItem,
+  Menu as Menu2,
+  MenuItem as MenuItem2,
   Paper as Paper2,
   TextField as TextField2,
   Tooltip as Tooltip2,
@@ -1112,8 +441,10 @@ import {
   Pause,
   PhoneDisabled,
   PlayArrow,
+  RecordVoiceOver,
   Roofing,
   SupportAgent,
+  TransferWithinAStation,
   Upcoming
 } from "@mui/icons-material";
 import {
@@ -1121,6 +452,8 @@ import {
   Button,
   Dialog,
   IconButton,
+  Menu,
+  MenuItem,
   Paper,
   TextField,
   Typography,
@@ -1139,53 +472,7 @@ import {
 import { useEffect as useEffect4, useMemo, useState as useState8 } from "react";
 
 // call-control-sdk/lib/services/request.ts
-import { useCallback as useCallback4, useReducer } from "react";
-
-// call-control-sdk/lib/services/toastMessage.tsx
-import { createContext, useContext, useState as useState7 } from "react";
-import { Snackbar, Alert } from "@mui/material";
-import { jsx, jsxs } from "react/jsx-runtime";
-var ToastContext = createContext(void 0);
-var useToast = () => {
-  const ctx = useContext(ToastContext);
-  if (!ctx) throw new Error("useToast must be used inside ToastProvider");
-  return ctx;
-};
-var ToastProvider = ({ children }) => {
-  const [open, setOpen] = useState7(false);
-  const [message, setMessage] = useState7("");
-  const [severity, setSeverity] = useState7("info");
-  const showToast = (msg, sev = "info") => {
-    setMessage(msg);
-    setSeverity(sev);
-    setOpen(true);
-  };
-  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { showToast }, children: [
-    children,
-    /* @__PURE__ */ jsx(
-      Snackbar,
-      {
-        open,
-        color: severity,
-        autoHideDuration: 3e3,
-        onClose: () => setOpen(false),
-        anchorOrigin: { vertical: "top", horizontal: "right" },
-        children: /* @__PURE__ */ jsx(
-          Alert,
-          {
-            variant: "filled",
-            severity,
-            onClose: () => setOpen(false),
-            sx: { width: "100%" },
-            children: message
-          }
-        )
-      }
-    )
-  ] });
-};
-
-// call-control-sdk/lib/services/request.ts
+import { useCallback as useCallback5, useReducer } from "react";
 var initialState = {
   isLoading: false,
   isSuccess: false,
@@ -1223,15 +510,15 @@ var useGetRequest = (props = {}) => {
   const { onSuccess = null, onError = null } = props;
   const { showToast } = useToast();
   const [state, dispatch] = useReducer(reducer, initialState);
-  const getRequest = useCallback4(
+  const getRequest = useCallback5(
     (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) {
+        var _a, _b;
+        if ((_a = res.data) == null ? void 0 : _a.success) {
           dispatch({
             type: "isSuccess",
             payload: res.data
@@ -1246,9 +533,9 @@ var useGetRequest = (props = {}) => {
           onError == null ? void 0 : onError(res.data, config);
         }
       }).catch((err) => {
-        var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+        var _a, _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,
+          status: (_b = (_a = err.response) == null ? void 0 : _a.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 : "",
@@ -1276,9 +563,9 @@ var usePostRequest = (props = {}) => {
   const { onSuccess = null, onError = null, disabledSuccessToast = false } = props;
   const { showToast } = useToast();
   const [state, dispatch] = useReducer(reducer, initialState);
-  const postRequest = useCallback4(
+  const postRequest = useCallback5(
     async (url, payload, config = {}) => {
-      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
       dispatch({
         type: "isLoading",
         payload: true
@@ -1292,7 +579,7 @@ var usePostRequest = (props = {}) => {
           });
           onSuccess == null ? void 0 : onSuccess(res.data, payload);
           if (!disabledSuccessToast) {
-            showToast((_a2 = res.data) == null ? void 0 : _a2.message, "success");
+            showToast((_a = res.data) == null ? void 0 : _a.message, "success");
           }
         } catch (err) {
           const error = {
@@ -1387,14 +674,14 @@ var useStyles = ({
 var styles_default = useStyles;
 
 // call-control-sdk/lib/components/dialog.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ConferenceTableRow = ({ each, isLineDialing }) => {
-  var _a2, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const state = useSDKState();
   const theme = useTheme2();
   const { showToast } = useToast();
   const { disabled, enabled, outlined } = styles_default({
-    disabled: ((_a2 = state.sdkConfig) == null ? void 0 : _a2.disabled) || {},
+    disabled: ((_a = state.sdkConfig) == null ? void 0 : _a.disabled) || {},
     enabled: ((_b = state.sdkConfig) == null ? void 0 : _b.enabled) || {},
     outlined: ((_c = state.sdkConfig) == null ? void 0 : _c.outlined) || {}
   });
@@ -1412,9 +699,9 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
     sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
   };
   const onConferenceCallStart = (line, data) => {
-    var _a3, _b2, _c2, _d2, _e2, _f2;
+    var _a2, _b2, _c2, _d2, _e2, _f2;
     const line_used = __spreadValues(__spreadValues({}, line), data);
-    if (line_used.phone === ((_a3 = state.callData) == null ? void 0 : _a3.phone_number)) {
+    if (line_used.phone === ((_a2 = state.callData) == null ? void 0 : _a2.phone_number)) {
       showToast("Cannot conference with the active call number", "error");
       return;
     }
@@ -1441,18 +728,18 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
       process: (_f2 = (_e2 = state.callData) == null ? void 0 : _e2.process_name) != null ? _f2 : ""
     };
     axios_default.post(END_POINT.CONFERENCE_CALL, payload).then((res) => {
-      var _a4;
-      showToast((_a4 = res.data) == null ? void 0 : _a4.message, "success");
+      var _a3;
+      showToast((_a3 = res.data) == null ? void 0 : _a3.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";
+      var _a3, _b3, _c3, _d3;
+      const message = ((_b3 = (_a3 = err.response) == null ? void 0 : _a3.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, _e2, _f2;
+    var _a2, _b2, _c2, _d2, _e2, _f2;
     const line_used = __spreadValues(__spreadValues({}, line), data);
     setConferenceCallMerge(true);
     const payload = {
@@ -1460,13 +747,13 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
       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 : -1,
+      userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : -1,
       process: (_d2 = (_c2 = state.callData) == null ? void 0 : _c2.process_name) != null ? _d2 : "",
       convox_id: (_f2 = (_e2 = state.callData) == null ? void 0 : _e2.convox_id) != null ? _f2 : ""
     };
     axios_default.post(END_POINT.CONFERENCE_MERGE_CALL, payload).then((res) => {
-      var _a4, _b3, _c3;
-      if (((_a4 = state.callData) == null ? void 0 : _a4.hold) === 1) {
+      var _a3, _b3, _c3;
+      if (((_a3 = state.callData) == null ? void 0 : _a3.hold) === 1) {
         handleHoldToggle();
       }
       if (((_b3 = state.callData) == null ? void 0 : _b3.mute) === 1) {
@@ -1474,39 +761,39 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
       }
       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";
+      var _a3, _b3, _c3, _d3;
+      const message = ((_b3 = (_a3 = err.response) == null ? void 0 : _a3.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, _e2, _f2;
+    var _a2, _b2, _c2, _d2, _e2, _f2;
     const line_used = __spreadValues(__spreadValues({}, line), data);
     setConferenceCallHoldOrUnHold(true);
     const payload = {
       action: type === "HOLDUSER" ? "HOLD" : "UNHOLD",
       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 : -1,
+      userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : -1,
       process: (_d2 = (_c2 = state.callData) == null ? void 0 : _c2.process_name) != null ? _d2 : "",
       convox_id: (_f2 = (_e2 = state.callData) == null ? void 0 : _e2.convox_id) != null ? _f2 : "",
       line_number: Number(line_used.line)
     };
     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");
+      var _a3;
+      showToast((_a3 = res.data) == null ? void 0 : _a3.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";
+      var _a3, _b3, _c3, _d3;
+      const message = ((_b3 = (_a3 = err.response) == null ? void 0 : _a3.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, _e2, _f2;
+    var _a2, _b2, _c2, _d2, _e2, _f2;
     const line_used = __spreadValues(__spreadValues({}, line), data);
     if (line_used.line === 1) {
       showToast("Cannot end the primary call from conference controls", "error");
@@ -1519,16 +806,16 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
       line_number: Number(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 : -1,
+      userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : -1,
       process: (_d2 = (_c2 = state.callData) == null ? void 0 : _c2.process_name) != null ? _d2 : "",
       convox_id: (_f2 = (_e2 = state.callData) == null ? void 0 : _e2.convox_id) != null ? _f2 : ""
     };
     axios_default.post(END_POINT.CONFERENCE_CALL_END, payload).then((res) => {
-      var _a4;
-      showToast((_a4 = res.data) == null ? void 0 : _a4.message, "success");
+      var _a3;
+      showToast((_a3 = res.data) == null ? void 0 : _a3.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";
+      var _a3, _b3, _c3, _d3;
+      const message = ((_b3 = (_a3 = err.response) == null ? void 0 : _a3.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);
@@ -1537,29 +824,29 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
   const [holdOrUnHold] = usePostRequest();
   const [muteOrUnMute] = usePostRequest();
   const handleHoldToggle = () => {
-    var _a3;
+    var _a2;
     const payload = {
-      action: ((_a3 = state.callData) == null ? void 0 : _a3.hold) === 1 ? "UNHOLD" /* UNHOLD */ : "HOLD" /* HOLD */,
+      action: ((_a2 = state.callData) == null ? void 0 : _a2.hold) === 1 ? "UNHOLD" /* UNHOLD */ : "HOLD" /* HOLD */,
       userId: state.agentId
     };
     holdOrUnHold(END_POINT.HOLD_CALL, payload);
   };
   const handleMuteToggle = () => {
-    var _a3;
+    var _a2;
     const payload = {
-      action: ((_a3 = state.callData) == null ? void 0 : _a3.mute) === 1 ? "UNMUTE" /* UNMUTE */ : "MUTE" /* MUTE */,
+      action: ((_a2 = state.callData) == null ? void 0 : _a2.mute) === 1 ? "UNMUTE" /* UNMUTE */ : "MUTE" /* MUTE */,
       userId: state.agentId
     };
     muteOrUnMute(END_POINT.MUTE_CALL, payload);
   };
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs(
     TableRow,
     {
       sx: {
         border: "2px solid #fff"
       },
       children: [
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx(
           TableCell,
           {
             sx: {
@@ -1567,21 +854,21 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
               flex: 1,
               width: "100px"
             },
-            children: /* @__PURE__ */ jsxs2(Typography, { children: [
+            children: /* @__PURE__ */ jsxs(Typography, { children: [
               "Line ",
               (_f = each == null ? void 0 : each.line) != null ? _f : "",
               ". "
             ] })
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx(
           TableCell,
           {
             sx: {
               padding: "6px",
               width: "150px"
             },
-            children: /* @__PURE__ */ jsx2(
+            children: /* @__PURE__ */ jsx(
               Typography,
               {
                 variant: "body2",
@@ -1595,14 +882,14 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
             )
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx(
           TableCell,
           {
             sx: {
               padding: "6px",
               flex: 1
             },
-            children: /* @__PURE__ */ jsx2(
+            children: /* @__PURE__ */ jsx(
               TextField,
               {
                 size: "small",
@@ -1627,14 +914,14 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
             )
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx(
           TableCell,
           {
             sx: {
               padding: "6px",
               flex: 1
             },
-            children: /* @__PURE__ */ jsxs2(
+            children: /* @__PURE__ */ jsxs(
               Box,
               {
                 sx: {
@@ -1645,7 +932,7 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
                   gap: "10px"
                 },
                 children: [
-                  (each == null ? void 0 : each.line) === 1 && /* @__PURE__ */ jsx2(Tooltip, { title: (each == null ? void 0 : each.status) !== "HOLD" /* HOLD */ ? "Hold" : "Resume", children: /* @__PURE__ */ jsx2(
+                  (each == null ? void 0 : each.line) === 1 && /* @__PURE__ */ jsx(Tooltip, { title: (each == null ? void 0 : each.status) !== "HOLD" /* HOLD */ ? "Hold" : "Resume", children: /* @__PURE__ */ jsx(
                     Button,
                     {
                       variant: (each == null ? void 0 : each.status) === "HOLD" /* HOLD */ ? "contained" : "outlined",
@@ -1658,7 +945,7 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
                         }
                       },
                       disabled: (each == null ? void 0 : each.status) !== "CONFERENCE" /* CONFERENCE */ && (each == null ? void 0 : each.status) !== "HOLD" /* HOLD */ || conferenceCallHoldOrUnHold,
-                      children: each.status === "HOLD" /* HOLD */ ? /* @__PURE__ */ jsxs2(
+                      children: each.status === "HOLD" /* HOLD */ ? /* @__PURE__ */ jsxs(
                         Box,
                         {
                           sx: {
@@ -1669,7 +956,7 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
                             width: "98px"
                           },
                           children: [
-                            /* @__PURE__ */ jsx2(
+                            /* @__PURE__ */ jsx(
                               Typography,
                               {
                                 variant: "body2",
@@ -1680,10 +967,10 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
                                 children: "Unhold"
                               }
                             ),
-                            conferenceCallHoldOrUnHold ? /* @__PURE__ */ jsx2(CircularProgress, { size: "16px", sx: { color: theme.palette.primary.main } }) : /* @__PURE__ */ jsx2(PlayArrow, {})
+                            conferenceCallHoldOrUnHold ? /* @__PURE__ */ jsx(CircularProgress, { size: "16px", sx: { color: theme.palette.primary.main } }) : /* @__PURE__ */ jsx(PlayArrow, {})
                           ]
                         }
-                      ) : /* @__PURE__ */ jsxs2(
+                      ) : /* @__PURE__ */ jsxs(
                         Box,
                         {
                           sx: {
@@ -1694,7 +981,7 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
                             width: "98px"
                           },
                           children: [
-                            /* @__PURE__ */ jsx2(
+                            /* @__PURE__ */ jsx(
                               Typography,
                               {
                                 variant: "body2",
@@ -1702,17 +989,17 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
                                 children: "Hold"
                               }
                             ),
-                            conferenceCallHoldOrUnHold ? /* @__PURE__ */ jsx2(CircularProgress, { size: "16px", sx: { color: theme.palette.primary.main } }) : /* @__PURE__ */ jsx2(Pause, {})
+                            conferenceCallHoldOrUnHold ? /* @__PURE__ */ jsx(CircularProgress, { size: "16px", sx: { color: theme.palette.primary.main } }) : /* @__PURE__ */ jsx(Pause, {})
                           ]
                         }
                       )
                     }
                   ) }),
-                  (each == null ? void 0 : each.line) !== 1 && /* @__PURE__ */ jsx2(
+                  (each == null ? void 0 : each.line) !== 1 && /* @__PURE__ */ jsx(
                     Tooltip,
                     {
                       title: hasPhoneConflict ? phoneConflictHelperText || "Cannot dial this number" : "Call",
-                      children: /* @__PURE__ */ jsx2("span", { children: /* @__PURE__ */ jsx2(
+                      children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
                         Button,
                         {
                           variant: (each == null ? void 0 : each.status) !== "IDLE" /* IDLE */ ? "outlined" : "contained",
@@ -1733,7 +1020,7 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
                             onConferenceCallStart(each, {});
                           },
                           disabled: (each == null ? void 0 : each.status) !== "IDLE" /* IDLE */ || isLineDialing || hasPhoneConflict,
-                          children: conferenceCallStart ? /* @__PURE__ */ jsx2(CircularProgress, { size: "20px", color: "success" }) : /* @__PURE__ */ jsx2(
+                          children: conferenceCallStart ? /* @__PURE__ */ jsx(CircularProgress, { size: "20px", color: "success" }) : /* @__PURE__ */ jsx(
                             Call,
                             {
                               sx: {
@@ -1745,7 +1032,7 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
                       ) })
                     }
                   ),
-                  (each == null ? void 0 : each.line) !== 1 && /* @__PURE__ */ jsx2(Tooltip, { title: "Merge Call", children: /* @__PURE__ */ jsx2(
+                  (each == null ? void 0 : each.line) !== 1 && /* @__PURE__ */ jsx(Tooltip, { title: "Merge Call", children: /* @__PURE__ */ jsx(
                     Button,
                     {
                       variant: (each == null ? void 0 : each.status) === "ONCALL" /* ONCALL */ ? "contained" : "outlined",
@@ -1754,10 +1041,10 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
                         onMergeConferenceCall(each, { isMergeCall: true });
                       },
                       disabled: (each == null ? void 0 : each.status) !== "ONCALL" /* ONCALL */,
-                      children: conferenceCallMerge ? /* @__PURE__ */ jsx2(CircularProgress, { size: "20px" }) : /* @__PURE__ */ jsx2(CallSplit, {})
+                      children: conferenceCallMerge ? /* @__PURE__ */ jsx(CircularProgress, { size: "20px" }) : /* @__PURE__ */ jsx(CallSplit, {})
                     }
                   ) }),
-                  (each == null ? void 0 : each.line) !== 1 && /* @__PURE__ */ jsx2(Tooltip, { title: (each == null ? void 0 : each.status) !== "HOLD" /* HOLD */ ? "Hold" : "Resume", children: /* @__PURE__ */ jsx2(
+                  (each == null ? void 0 : each.line) !== 1 && /* @__PURE__ */ jsx(Tooltip, { title: (each == null ? void 0 : each.status) !== "HOLD" /* HOLD */ ? "Hold" : "Resume", children: /* @__PURE__ */ jsx(
                     Button,
                     {
                       variant: (each == null ? void 0 : each.status) === "HOLD" /* HOLD */ ? "contained" : "outlined",
@@ -1770,10 +1057,10 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
                         }
                       },
                       disabled: (each == null ? void 0 : each.status) !== "CONFERENCE" /* CONFERENCE */ && (each == null ? void 0 : each.status) !== "HOLD" /* HOLD */ || conferenceCallHoldOrUnHold,
-                      children: conferenceCallHoldOrUnHold ? /* @__PURE__ */ jsx2(CircularProgress, { size: "20px", sx: { color: theme.palette.primary.main } }) : each.status === "HOLD" /* HOLD */ ? /* @__PURE__ */ jsx2(PlayArrow, {}) : /* @__PURE__ */ jsx2(Pause, {})
+                      children: conferenceCallHoldOrUnHold ? /* @__PURE__ */ jsx(CircularProgress, { size: "20px", sx: { color: theme.palette.primary.main } }) : each.status === "HOLD" /* HOLD */ ? /* @__PURE__ */ jsx(PlayArrow, {}) : /* @__PURE__ */ jsx(Pause, {})
                     }
                   ) }),
-                  (each == null ? void 0 : each.line) !== 1 && /* @__PURE__ */ jsx2(Tooltip, { title: "End Call", children: /* @__PURE__ */ jsx2(
+                  (each == null ? void 0 : each.line) !== 1 && /* @__PURE__ */ jsx(Tooltip, { title: "End Call", children: /* @__PURE__ */ jsx(
                     Button,
                     {
                       variant: (each == null ? void 0 : each.status) !== "IDLE" /* IDLE */ && (each == null ? void 0 : each.status) !== "DISCONNECTED" /* DISCONNECTED */ ? "contained" : "outlined",
@@ -1799,7 +1086,7 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
                         });
                       },
                       disabled: (each == null ? void 0 : each.status) === "IDLE" /* IDLE */ || (each == null ? void 0 : each.status) === "DISCONNECTED" /* DISCONNECTED */ || conferenceCallEnd,
-                      children: conferenceCallEnd ? /* @__PURE__ */ jsx2(CircularProgress, { size: "20px", color: "error" }) : /* @__PURE__ */ jsx2(CallEnd, {})
+                      children: conferenceCallEnd ? /* @__PURE__ */ jsx(CircularProgress, { size: "20px", color: "error" }) : /* @__PURE__ */ jsx(CallEnd, {})
                     }
                   ) })
                 ]
@@ -1813,7 +1100,7 @@ var ConferenceTableRow = ({ each, isLineDialing }) => {
   );
 };
 function ConferenceDialog() {
-  var _a2, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g;
   const state = useSDKState();
   const { showToast } = useToast();
   const [conferenceCallEndAll, setConferenceCallEndAll] = useState8(false);
@@ -1821,12 +1108,12 @@ function ConferenceDialog() {
     sdkStateManager.setOpenConferenceDialog(false);
   };
   const onEndAllConferenceCalls = () => {
-    var _a3, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l, _m, _n, _o;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l, _m, _n, _o;
     setConferenceCallEndAll(true);
     const payload = {
       action: "EXTERNAL_CONFERENCE",
       operation: "ENDCONFERENCE",
-      userid: (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.agent_id) != null ? _b2 : -1,
+      userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : -1,
       process: (_d2 = (_c2 = state.callData) == null ? void 0 : _c2.process_name) != null ? _d2 : "",
       processid: (_g2 = (_f2 = (_e2 = state.process) == null ? void 0 : _e2.process_id) == null ? void 0 : _f2.toString()) != null ? _g2 : "",
       process_name: (_i = (_h = state.process) == null ? void 0 : _h.process_name) != null ? _i : "",
@@ -1835,23 +1122,23 @@ function ConferenceDialog() {
       mobile_number: (_o = (_n = state.callData) == null ? void 0 : _n.phone_number) != null ? _o : ""
     };
     axios_default.post(END_POINT.CONFERENCE_CALL_END_ALL, payload).then((res) => {
-      var _a4;
-      showToast((_a4 = res.data) == null ? void 0 : _a4.message, "success");
+      var _a3;
+      showToast((_a3 = res.data) == null ? void 0 : _a3.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";
+      var _a3, _b3, _c3, _d3;
+      const message = ((_b3 = (_a3 = err.response) == null ? void 0 : _a3.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, _e2, _f2, _g2, _h, _i, _j, _k, _l, _m, _n, _o;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l, _m, _n, _o;
     const payload = {
       action: "TRANSFERAPI",
-      userid: (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.agent_id) != null ? _b2 : -1,
+      userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : -1,
       process: (_d2 = (_c2 = state.callData) == null ? void 0 : _c2.process_name) != null ? _d2 : "",
       processid: (_g2 = (_f2 = (_e2 = state.process) == null ? void 0 : _e2.process_id) == null ? void 0 : _f2.toString()) != null ? _g2 : "",
       process_name: (_i = (_h = state.process) == null ? void 0 : _h.process_name) != null ? _i : "",
@@ -1860,29 +1147,30 @@ function ConferenceDialog() {
       mobile_number: (_o = (_n = state.callData) == null ? void 0 : _n.phone_number) != null ? _o : ""
     };
     axios_default.post(END_POINT.CONFERENCE_CALL_TRANSFER, payload).then((res) => {
-      var _a4;
-      showToast((_a4 = res.data) == null ? void 0 : _a4.message, "success");
+      var _a3;
+      showToast((_a3 = res.data) == null ? void 0 : _a3.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";
+      var _a3, _b3, _c3, _d3;
+      const message = ((_b3 = (_a3 = err.response) == null ? void 0 : _a3.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 isLineDialing = (_a = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _a.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__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     Dialog,
     {
       open: state.openConferenceDialog,
       "aria-labelledby": "alert-dialog-title",
       "aria-describedby": "alert-dialog-description",
       maxWidth: "md",
-      children: /* @__PURE__ */ jsxs2(Paper, { sx: { borderRadius: 2 }, children: [
-        /* @__PURE__ */ jsxs2(
+      slotProps: { paper: { sx: { minWidth: 800 } } },
+      children: /* @__PURE__ */ jsxs(Paper, { sx: { borderRadius: 2 }, children: [
+        /* @__PURE__ */ jsxs(
           Box,
           {
             sx: {
@@ -1895,7 +1183,7 @@ function ConferenceDialog() {
               margin: "10px 0px"
             },
             children: [
-              /* @__PURE__ */ jsxs2(
+              /* @__PURE__ */ jsxs(
                 Typography,
                 {
                   variant: "body1",
@@ -1907,18 +1195,18 @@ function ConferenceDialog() {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx2(Box, { children: /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
                 IconButton,
                 {
                   onClick: handleClose,
                   color: "primary",
-                  children: /* @__PURE__ */ jsx2(Close, { sx: { color: "primary.main" } })
+                  children: /* @__PURE__ */ jsx(Close, { sx: { color: "primary.main" } })
                 }
               ) })
             ]
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx(
           Box,
           {
             sx: {
@@ -1926,7 +1214,7 @@ function ConferenceDialog() {
               margin: "0px 15px",
               borderRadius: "20px"
             },
-            children: /* @__PURE__ */ jsx2(
+            children: /* @__PURE__ */ jsx(
               TableContainer,
               {
                 component: Paper,
@@ -1934,20 +1222,20 @@ function ConferenceDialog() {
                   outline: "0px solid gray !important",
                   boxShadow: "1px 1px 6px #e7e5e5ff"
                 },
-                children: /* @__PURE__ */ jsxs2(Table, { sx: { border: "4px solid #ffffff !important" }, children: [
-                  /* @__PURE__ */ jsx2(TableHead, { children: /* @__PURE__ */ jsxs2(TableRow, { sx: { border: "2px solid #f3f3f3ff !important" }, children: [
-                    /* @__PURE__ */ jsx2(TableCell, { sx: { padding: "6px" }, children: "Line" }),
-                    /* @__PURE__ */ jsx2(TableCell, { sx: { padding: "6px" }, children: "Status" }),
-                    /* @__PURE__ */ jsx2(TableCell, { sx: { padding: "6px" }, children: "Mobile Number" }),
-                    /* @__PURE__ */ jsx2(TableCell, { sx: { padding: "6px" }, children: "Call Actions" })
+                children: /* @__PURE__ */ jsxs(Table, { sx: { border: "4px solid #ffffff !important" }, children: [
+                  /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { sx: { border: "2px solid #f3f3f3ff !important" }, children: [
+                    /* @__PURE__ */ jsx(TableCell, { sx: { padding: "6px" }, children: "Line" }),
+                    /* @__PURE__ */ jsx(TableCell, { sx: { padding: "6px" }, children: "Status" }),
+                    /* @__PURE__ */ jsx(TableCell, { sx: { padding: "6px" }, children: "Mobile Number" }),
+                    /* @__PURE__ */ jsx(TableCell, { sx: { padding: "6px" }, children: "Call Actions" })
                   ] }) }),
-                  /* @__PURE__ */ jsx2(TableBody, { children: state == null ? void 0 : state.conferenceLine.map((each) => /* @__PURE__ */ jsx2(ConferenceTableRow, { each, isLineDialing }, each.line)) })
+                  /* @__PURE__ */ jsx(TableBody, { children: state == null ? void 0 : state.conferenceLine.map((each) => /* @__PURE__ */ jsx(ConferenceTableRow, { each, isLineDialing }, each.line)) })
                 ] })
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx2(Box, { textAlign: "center", m: 2, children: /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsx(Box, { textAlign: "center", m: 2, children: /* @__PURE__ */ jsxs(
           Button,
           {
             variant: "outlined",
@@ -1957,14 +1245,14 @@ function ConferenceDialog() {
             disabled: conferenceCallEndAll || conferenceLineCount <= 0,
             sx: { px: 2, borderRadius: "20px", textTransform: "capitalize" },
             children: [
-              conferenceCallEndAll ? /* @__PURE__ */ jsx2(
+              conferenceCallEndAll ? /* @__PURE__ */ jsx(
                 CircularProgress,
                 {
                   size: "20px",
                   color: "error",
                   sx: { marginRight: "8px" }
                 }
-              ) : /* @__PURE__ */ jsx2(
+              ) : /* @__PURE__ */ jsx(
                 IconButton,
                 {
                   sx: {
@@ -1984,7 +1272,7 @@ function ConferenceDialog() {
                     justifyContent: "center",
                     borderRadius: "50%"
                   },
-                  children: /* @__PURE__ */ jsx2(PhoneDisabled, { sx: { color: "white", fontSize: "16px", fontWeight: "600" } })
+                  children: /* @__PURE__ */ jsx(PhoneDisabled, { sx: { color: "white", fontSize: "16px", fontWeight: "600" } })
                 }
               ),
               "End Conference"
@@ -1996,7 +1284,7 @@ function ConferenceDialog() {
   ) });
 }
 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, _v;
+  var _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;
   const state = useSDKState();
   const [mobileNumber, setMobileNumber] = useState8("");
   const [transferCall, { isLoading: isTransferLoading }] = usePostRequest({
@@ -2004,7 +1292,25 @@ function CallTransferDialog({ open }) {
       sdkStateManager.setOpenCallTransferDialog(false);
     }
   });
+  const [initiateConsultCall] = usePostRequest({});
+  const [completeConsultTransfer, { isLoading: isCompleteConsultLoading }] = usePostRequest({
+    onSuccess: () => {
+      sdkStateManager.setConsultInfo(null);
+      sdkStateManager.setOpenCallTransferDialog(false);
+    }
+  });
+  const [cancelConsultTransfer, { isLoading: isCancelConsultLoading }] = usePostRequest({
+    onSuccess: () => {
+      sdkStateManager.setConsultInfo(null);
+    }
+  });
   const [currentselecteTab, setCurrentselecteTab] = useState8("queues");
+  const [transferMenuAnchor, setTransferMenuAnchor] = useState8(null);
+  const [pendingTransferData, setPendingTransferData] = useState8(null);
+  const blindEnabled = !((_a = state.sdkConfig) == null ? void 0 : _a.disableBlindTransfer);
+  const attendedEnabled = !((_b = state.sdkConfig) == null ? void 0 : _b.disableAttendedTransfer);
+  const enabledTransferModeCount = (blindEnabled ? 1 : 0) + (attendedEnabled ? 1 : 0);
+  const singleTransferMode = enabledTransferModeCount === 1 ? blindEnabled ? "DEFAULT" : "CONSULT" : null;
   const [getIdelAgentsList, { data: idleAgentsList, isLoading: isIdleAgentsListLoading }] = usePostRequest({ disabledSuccessToast: true });
   const [
     getHospitalsServicesList,
@@ -2017,11 +1323,11 @@ function CallTransferDialog({ open }) {
   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, _v2, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N;
+  const handleTransferCall = (data, type, mode = "DEFAULT") => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2, _x2, _y2, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N;
     if (type === "PROCESS") {
       const payload = {
-        mobile_number: (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.phone_number) != null ? _b2 : "",
+        mobile_number: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.phone_number) != null ? _b2 : "",
         userid: (_d2 = (_c2 = state.callData) == null ? void 0 : _c2.agent_id) != null ? _d2 : -1,
         type: "PROCESS",
         transfer_to: (_e2 = data == null ? void 0 : data.process_name) != null ? _e2 : "",
@@ -2043,25 +1349,43 @@ function CallTransferDialog({ open }) {
       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 : "",
+        mobile_number: (_x2 = (_w2 = state.callData) == null ? void 0 : _w2.phone_number) != null ? _x2 : "",
+        userid: (_z = (_y2 = state.callData) == null ? void 0 : _y2.agent_id) != null ? _z : "",
         type: "AGENT",
+        transfer_type: mode === "CONSULT" ? "ATTENDED" : "BLIND",
         transfer_to: (_B = (_A = data == null ? void 0 : data.id) == null ? void 0 : _A.toString()) != null ? _B : "",
         callreferenceid: (_D = (_C = state.callData) == null ? void 0 : _C.convox_id) != null ? _D : "",
         processid: String((_F = (_E = state.callData) == null ? void 0 : _E.process_id) != null ? _F : ""),
         process_name: (_H = (_G = state.callData) == null ? void 0 : _G.process_name) != null ? _H : ""
       };
-      transferCall(END_POINT.TRANSFER_CALL, payload);
+      if (mode === "CONSULT") {
+        initiateConsultCall(END_POINT.TRANSFER_CALL, payload);
+      } else {
+        transferCall(END_POINT.TRANSFER_CALL, payload);
+      }
     } else if (type === "OTHER") {
       const payload = {
-        action: "BLIND_TRANSFER",
+        action: mode === "CONSULT" ? "ATTENDED" : "BLIND_TRANSFER",
+        transfer_type: mode === "CONSULT" ? "ATTENDED" : "BLIND",
         type: "OTHER",
         transfer_to: (_I = data == null ? void 0 : data.mobile_number) != null ? _I : "",
         userid: (_K = (_J = state.callData) == null ? void 0 : _J.agent_id) != null ? _K : -1,
         callreferenceid: (_M = (_L = state.callData) == null ? void 0 : _L.convox_id) != null ? _M : "",
         blind_transfer_no: (_N = data == null ? void 0 : data.mobile_number) != null ? _N : ""
       };
-      transferCall(END_POINT.TRANSFER_CALL, payload);
+      if (mode === "CONSULT") {
+        initiateConsultCall(END_POINT.TRANSFER_CALL, payload);
+      } else {
+        transferCall(END_POINT.TRANSFER_CALL, payload);
+      }
+    }
+  };
+  const handleTransferClick = (e, data, type) => {
+    if (singleTransferMode) {
+      handleTransferCall(data, type, singleTransferMode);
+    } else {
+      setPendingTransferData({ data, type });
+      setTransferMenuAnchor(e.currentTarget);
     }
   };
   useEffect4(() => {
@@ -2069,181 +1393,145 @@ function CallTransferDialog({ open }) {
     getProcessAndQueuesList(END_POINT.TRANSFER_TO_DETAILS, { status: "ACTIVE", active: true });
     getHospitalsServicesList(END_POINT.HOSPITALS_SERVICES);
   }, []);
-  return /* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsx2(
-    Dialog,
-    {
-      open,
-      "aria-labelledby": "alert-dialog-title",
-      "aria-describedby": "alert-dialog-description",
-      fullWidth: true,
-      maxWidth: "sm",
-      children: /* @__PURE__ */ jsxs2(Paper, { sx: { borderRadius: 2 }, children: [
-        /* @__PURE__ */ jsxs2(
-          Box,
-          {
-            sx: {
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-              padding: "4px 16px",
-              boxShadow: "0px 1px 2px #f5f5f5ff"
-            },
-            children: [
-              /* @__PURE__ */ jsx2(Typography, { variant: "body1", children: " Call Transfer" }),
-              /* @__PURE__ */ jsx2(IconButton, { onClick: handleClose, children: /* @__PURE__ */ jsx2(Close, {}) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs2(Box, { sx: { margin: "10px", borderRadius: "10px" }, children: [
-          /* @__PURE__ */ jsxs2(Box, { sx: { display: "flex", gap: 1, margin: "10px" }, children: [
-            /* @__PURE__ */ jsx2(
-              Button,
-              {
-                variant: currentselecteTab === "queues" ? "contained" : "outlined",
-                onClick: () => setCurrentselecteTab("queues"),
-                children: "Queues"
-              }
-            ),
-            /* @__PURE__ */ jsx2(
-              Button,
-              {
-                variant: currentselecteTab === "agents" ? "contained" : "outlined",
-                onClick: () => {
-                  setCurrentselecteTab("agents");
-                  getIdelAgentsList(END_POINT.AGENTS_LIST, { status: "IDLE", active: true });
-                },
-                children: "Agents"
-              }
-            ),
-            !((_a2 = state.sdkConfig) == null ? void 0 : _a2.disableBlindTransfer) && /* @__PURE__ */ jsx2(
-              Button,
-              {
-                variant: currentselecteTab === "others" ? "contained" : "outlined",
-                onClick: () => setCurrentselecteTab("others"),
-                children: "Others"
-              }
-            )
-          ] }),
-          (isProcessAndQueuesListLoading || isIdleAgentsListLoading || isHospitalsServicesListLoading || isTransferLoading) && /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open,
+        "aria-labelledby": "alert-dialog-title",
+        "aria-describedby": "alert-dialog-description",
+        maxWidth: "md",
+        slotProps: { paper: { sx: { minWidth: 600 } } },
+        children: /* @__PURE__ */ jsxs(Paper, { sx: { borderRadius: 2 }, children: [
+          /* @__PURE__ */ jsxs(
             Box,
             {
               sx: {
                 display: "flex",
-                justifyContent: "center",
                 alignItems: "center",
-                height: "80px"
-              },
-              children: /* @__PURE__ */ jsx2(CircularProgress, {})
-            }
-          ),
-          !isProcessAndQueuesListLoading && !isIdleAgentsListLoading && !isHospitalsServicesListLoading && !isTransferLoading && currentselecteTab === "process" && /* @__PURE__ */ jsx2(
-            Box,
-            {
-              sx: {
-                display: "grid",
-                gridTemplateColumns: ((_b = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _b.process) && ((_d = (_c = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _c.process) == null ? void 0 : _d.length) > 0 ? "repeat(2, 1fr)" : "repeat(1, 1fr)",
-                gap: 1,
-                padding: "10px",
-                flexWrap: "wrap",
-                boxShadow: "1px 1px 4px #d3d3d3ff",
-                borderRadius: "10px"
+                padding: "4px 16px",
+                boxShadow: "0px 1px 2px #f5f5f5ff",
+                position: "relative"
               },
-              children: ((_e = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _e.process) && ((_g = (_f = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _f.process) == null ? void 0 : _g.length) > 0 ? (_i = (_h = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _h.process) == null ? void 0 : _i.map((process, index) => /* @__PURE__ */ jsxs2(
-                Box,
-                {
-                  sx: {
-                    p: 1,
-                    display: "flex",
-                    alignItems: "center",
-                    boxShadow: "1px 1px 4px #d3d3d3ff",
-                    padding: "6px",
-                    borderRadius: "10px",
-                    "&:hover": { bgcolor: "action.selected" }
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs2(
-                      Typography,
+              children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { flex: 1 }, children: " Call Transfer" }),
+                /* @__PURE__ */ jsxs(Box, { sx: { position: "absolute", left: "50%", transform: "translateX(-50%)" }, children: [
+                  state.consultInfo && ((_c = state.consultInfo.status) == null ? void 0 : _c.toUpperCase()) === "RINGING" /* RINGING */ && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                    /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { whiteSpace: "nowrap" }, children: "Trying to consult" }),
+                    /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: "inline-flex", gap: "3px", alignItems: "flex-end", height: "14px" }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(Box, { component: "span", sx: {
+                      "@keyframes jumpDot": {
+                        "0%, 60%, 100%": { transform: "translateY(0)" },
+                        "30%": { transform: "translateY(-5px)" }
+                      },
+                      animation: "jumpDot 1s ease-in-out infinite",
+                      animationDelay: `${i * 0.15}s`,
+                      fontSize: "14px",
+                      fontWeight: 700,
+                      lineHeight: 1,
+                      display: "inline-block"
+                    }, children: "." }, i)) })
+                  ] }),
+                  state.consultInfo && ((_d = state.consultInfo.status) == null ? void 0 : _d.toUpperCase()) === "ONCALL" /* ONCALL */ && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
                       {
-                        variant: "body1",
-                        sx: {
-                          mx: 1,
-                          width: "200px",
-                          maxWidth: "250px",
-                          display: "flex",
-                          alignItems: "center"
+                        variant: "outlined",
+                        size: "small",
+                        startIcon: isCompleteConsultLoading ? /* @__PURE__ */ jsx(CircularProgress, { size: 14 }) : /* @__PURE__ */ jsx(TransferWithinAStation, { sx: { fontSize: 16 } }),
+                        disabled: isCompleteConsultLoading || isCancelConsultLoading,
+                        onClick: () => {
+                          if (state.consultInfo) {
+                            completeConsultTransfer(END_POINT.TRANSFER_COMPLETE, {}, {
+                              params: { call_uuid: state.consultInfo.call_uuid }
+                            });
+                          }
                         },
-                        children: [
-                          /* @__PURE__ */ jsx2(MemoryOutlined, { sx: { marginRight: "4px" } }),
-                          process.process_name
-                        ]
+                        children: "Transfer"
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
-                      IconButton,
+                    /* @__PURE__ */ jsx(
+                      Button,
                       {
-                        color: "success",
-                        sx: {
-                          bgcolor: "action.hover",
-                          "&:hover": { bgcolor: "action.selected" }
+                        variant: "outlined",
+                        size: "small",
+                        color: "error",
+                        startIcon: isCancelConsultLoading ? /* @__PURE__ */ jsx(CircularProgress, { size: 14 }) : /* @__PURE__ */ jsx(PhoneDisabled, { sx: { fontSize: 16 } }),
+                        disabled: isCancelConsultLoading || isCompleteConsultLoading,
+                        onClick: () => {
+                          if (state.consultInfo) {
+                            cancelConsultTransfer(END_POINT.TRANSFER_CANCEL, {
+                              status: state.consultInfo.status,
+                              participant_identifier: state.consultInfo.participant_identifier,
+                              channel_id: state.consultInfo.channel_id,
+                              call_uuid: state.consultInfo.call_uuid,
+                              bridge_id: state.consultInfo.bridge_id
+                            });
+                          }
                         },
-                        onClick: () => handleTransferCall(process, "PROCESS"),
-                        children: /* @__PURE__ */ jsx2(Call, {})
+                        children: "Cancel"
                       }
                     )
-                  ]
-                },
-                index
-              )) : /* @__PURE__ */ jsxs2(
-                Box,
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(Box, { sx: { flex: 1, display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx(IconButton, { onClick: handleClose, children: /* @__PURE__ */ jsx(Close, {}) }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { sx: { margin: "10px", borderRadius: "10px" }, children: [
+            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1, margin: "10px" }, children: [
+              /* @__PURE__ */ jsx(
+                Button,
                 {
-                  sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    flexDirection: "column"
+                  variant: currentselecteTab === "queues" ? "contained" : "outlined",
+                  onClick: () => setCurrentselecteTab("queues"),
+                  children: "Queues"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: currentselecteTab === "agents" ? "contained" : "outlined",
+                  onClick: () => {
+                    setCurrentselecteTab("agents");
+                    getIdelAgentsList(END_POINT.AGENTS_LIST, { status: "IDLE", active: true });
                   },
-                  p: 2,
-                  children: [
-                    /* @__PURE__ */ jsx2(Upcoming, { color: "primary" }),
-                    /* @__PURE__ */ jsx2(
-                      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"
-                      }
-                    )
-                  ]
+                  children: "Agents"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: currentselecteTab === "others" ? "contained" : "outlined",
+                  onClick: () => setCurrentselecteTab("others"),
+                  children: "Others"
                 }
               )
-            }
-          ),
-          !isProcessAndQueuesListLoading && !isIdleAgentsListLoading && !isHospitalsServicesListLoading && !isTransferLoading && currentselecteTab === "queues" && /* @__PURE__ */ jsx2(
-            Box,
-            {
-              sx: {
-                display: "grid",
-                gridTemplateColumns: ((_j = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _j.queue) && ((_l = (_k = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _k.queue) == null ? void 0 : _l.length) > 0 ? "repeat(2, 1fr)" : "repeat(1, 1fr)",
-                gap: 1,
-                padding: "10px",
-                flexWrap: "wrap",
-                boxShadow: "1px 1px 4px #d3d3d3ff",
-                borderRadius: "10px"
-              },
-              children: ((_m = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _m.queue) && ((_o = (_n = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _n.queue) == null ? void 0 : _o.length) > 0 ? (_q = (_p = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _p.queue) == null ? void 0 : _q.map((queue, index) => {
-                var _a3, _b2, _c2, _d2, _e2, _f2;
-                return /* @__PURE__ */ jsxs2(
+            ] }),
+            (isProcessAndQueuesListLoading || isIdleAgentsListLoading || isHospitalsServicesListLoading || isTransferLoading) && /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  height: "80px"
+                },
+                children: /* @__PURE__ */ jsx(CircularProgress, {})
+              }
+            ),
+            !isProcessAndQueuesListLoading && !isIdleAgentsListLoading && !isHospitalsServicesListLoading && !isTransferLoading && currentselecteTab === "process" && /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  display: "grid",
+                  gridTemplateColumns: ((_e = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _e.process) && ((_g = (_f = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _f.process) == null ? void 0 : _g.length) > 0 ? "repeat(2, 1fr)" : "repeat(1, 1fr)",
+                  gap: 1,
+                  padding: "10px",
+                  flexWrap: "wrap",
+                  boxShadow: "1px 1px 4px #d3d3d3ff",
+                  borderRadius: "10px"
+                },
+                children: ((_h = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _h.process) && ((_j = (_i = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _i.process) == null ? void 0 : _j.length) > 0 ? (_l = (_k = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _k.process) == null ? void 0 : _l.map((process, index) => /* @__PURE__ */ jsxs(
                   Box,
                   {
                     sx: {
@@ -2256,7 +1544,7 @@ function CallTransferDialog({ open }) {
                       "&:hover": { bgcolor: "action.selected" }
                     },
                     children: [
-                      /* @__PURE__ */ jsxs2(
+                      /* @__PURE__ */ jsxs(
                         Typography,
                         {
                           variant: "body1",
@@ -2268,30 +1556,12 @@ function CallTransferDialog({ open }) {
                             alignItems: "center"
                           },
                           children: [
-                            /* @__PURE__ */ jsx2(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__ */ jsx2(
-                              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__ */ jsx(MemoryOutlined, { sx: { marginRight: "4px" } }),
+                            process.process_name
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsx2(
+                      /* @__PURE__ */ jsx(Tooltip, { title: state.consultInfo ? "Please complete or cancel the ongoing consult transfer before proceeding." : "", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
                         IconButton,
                         {
                           color: "success",
@@ -2299,161 +1569,345 @@ function CallTransferDialog({ open }) {
                             bgcolor: "action.hover",
                             "&:hover": { bgcolor: "action.selected" }
                           },
-                          onClick: () => handleTransferCall(queue, "QUEUE"),
-                          children: /* @__PURE__ */ jsx2(Call, {})
+                          disabled: !!state.consultInfo,
+                          onClick: () => handleTransferCall(process, "PROCESS"),
+                          children: /* @__PURE__ */ jsx(Call, {})
                         }
-                      )
+                      ) }) })
                     ]
                   },
                   index
-                );
-              }) : /* @__PURE__ */ jsxs2(
-                Box,
-                {
-                  sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    flexDirection: "column"
+                )) : /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      flexDirection: "column"
+                    },
+                    p: 2,
+                    children: [
+                      /* @__PURE__ */ jsx(Upcoming, { color: "primary" }),
+                      /* @__PURE__ */ jsx(
+                        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 && !isTransferLoading && currentselecteTab === "queues" && /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  display: "grid",
+                  gridTemplateColumns: ((_m = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _m.queue) && ((_o = (_n = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _n.queue) == null ? void 0 : _o.length) > 0 ? "repeat(2, 1fr)" : "repeat(1, 1fr)",
+                  gap: 1,
+                  padding: "10px",
+                  flexWrap: "wrap",
+                  boxShadow: "1px 1px 4px #d3d3d3ff",
+                  borderRadius: "10px"
+                },
+                children: ((_p = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _p.queue) && ((_r = (_q = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _q.queue) == null ? void 0 : _r.length) > 0 ? (_t = (_s = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _s.queue) == null ? void 0 : _t.map((queue, index) => {
+                  var _a2, _b2, _c2, _d2, _e2, _f2;
+                  return /* @__PURE__ */ jsxs(
+                    Box,
+                    {
+                      sx: {
+                        p: 1,
+                        display: "flex",
+                        alignItems: "center",
+                        boxShadow: "1px 1px 4px #d3d3d3ff",
+                        padding: "6px",
+                        borderRadius: "10px",
+                        "&:hover": { bgcolor: "action.selected" }
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs(
+                          Typography,
+                          {
+                            variant: "body1",
+                            sx: {
+                              mx: 1,
+                              width: "200px",
+                              maxWidth: "250px",
+                              display: "flex",
+                              alignItems: "center"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx(Airlines, { sx: { marginRight: "4px" } }),
+                              queue.queue_name,
+                              ((_c2 = (_b2 = (_a2 = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _a2.process) == null ? void 0 : _b2.find(
+                                (process) => process.process_id === queue.process_id
+                              )) == null ? void 0 : _c2.process_name) ? /* @__PURE__ */ jsx(
+                                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__ */ jsx(Tooltip, { title: state.consultInfo ? "Please complete or cancel the ongoing consult transfer before proceeding." : "", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+                          IconButton,
+                          {
+                            color: "success",
+                            sx: {
+                              bgcolor: "action.hover",
+                              "&:hover": { bgcolor: "action.selected" }
+                            },
+                            disabled: !!state.consultInfo,
+                            onClick: () => handleTransferCall(queue, "QUEUE"),
+                            children: /* @__PURE__ */ jsx(Call, {})
+                          }
+                        ) }) })
+                      ]
+                    },
+                    index
+                  );
+                }) : /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      flexDirection: "column"
+                    },
+                    p: 2,
+                    children: [
+                      /* @__PURE__ */ jsx(Upcoming, { color: "primary" }),
+                      /* @__PURE__ */ jsx(
+                        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 && !isTransferLoading && currentselecteTab === "agents" && /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  display: "grid",
+                  gridTemplateColumns: (idleAgentsList == null ? void 0 : idleAgentsList.data) && ((_u = idleAgentsList == null ? void 0 : idleAgentsList.data) == null ? void 0 : _u.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) && ((_v = idleAgentsList == null ? void 0 : idleAgentsList.data) == null ? void 0 : _v.length) > 0 ? (_w = idleAgentsList == null ? void 0 : idleAgentsList.data) == null ? void 0 : _w.map((agent, index) => /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: {
+                      p: 1,
+                      display: "flex",
+                      alignItems: "center",
+                      boxShadow: "1px 1px 4px #d3d3d3ff",
+                      padding: "6px",
+                      borderRadius: "10px",
+                      "&:hover": { bgcolor: "action.selected" }
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        Typography,
+                        {
+                          variant: "body1",
+                          sx: {
+                            mx: 1,
+                            width: "200px",
+                            maxWidth: "250px",
+                            display: "flex",
+                            alignItems: "center"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(SupportAgent, { sx: { marginRight: "4px" } }),
+                            agent.name
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Tooltip, { title: state.consultInfo ? "Please complete or cancel the ongoing consult transfer before proceeding." : "", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          color: "success",
+                          sx: {
+                            bgcolor: "action.hover",
+                            "&:hover": { bgcolor: "action.selected" }
+                          },
+                          disabled: !!state.consultInfo,
+                          onClick: (e) => handleTransferClick(e, agent, "AGENT"),
+                          children: /* @__PURE__ */ jsx(Call, {})
+                        }
+                      ) }) })
+                    ]
                   },
-                  p: 2,
-                  children: [
-                    /* @__PURE__ */ jsx2(Upcoming, { color: "primary" }),
-                    /* @__PURE__ */ jsx2(
-                      Typography,
+                  index
+                )) : /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      flexDirection: "column"
+                    },
+                    p: 2,
+                    children: [
+                      /* @__PURE__ */ jsx(Upcoming, { color: "primary" }),
+                      /* @__PURE__ */ jsx(
+                        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 && !isTransferLoading && currentselecteTab === "others" && /* @__PURE__ */ jsxs(
+              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) && ((_x = hospitalsServicesList == null ? void 0 : hospitalsServicesList.data) == null ? void 0 : _x.length) > 0 && ((_y = hospitalsServicesList == null ? void 0 : hospitalsServicesList.data) == null ? void 0 : _y.map((service, index) => {
+                    var _a2, _b2, _c2;
+                    return /* @__PURE__ */ jsxs(
+                      Box,
                       {
-                        variant: "body1",
                         sx: {
-                          fontSize: "16px",
-                          letterSpacing: "0.02em",
-                          textTransform: "capitalize",
+                          p: 1,
                           display: "flex",
                           alignItems: "center",
-                          justifyContent: "center",
-                          width: "100%",
-                          margin: "10px 0px",
-                          color: "primary.main",
-                          height: "20px"
-                        },
-                        children: "No Queues Found"
-                      }
-                    )
-                  ]
-                }
-              )
-            }
-          ),
-          !isProcessAndQueuesListLoading && !isIdleAgentsListLoading && !isHospitalsServicesListLoading && !isTransferLoading && currentselecteTab === "agents" && /* @__PURE__ */ jsx2(
-            Box,
-            {
-              sx: {
-                display: "grid",
-                gridTemplateColumns: (idleAgentsList == null ? void 0 : idleAgentsList.data) && ((_r = idleAgentsList == null ? void 0 : idleAgentsList.data) == null ? void 0 : _r.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) && ((_s = idleAgentsList == null ? void 0 : idleAgentsList.data) == null ? void 0 : _s.length) > 0 ? (_t = idleAgentsList == null ? void 0 : idleAgentsList.data) == null ? void 0 : _t.map((agent, index) => /* @__PURE__ */ jsxs2(
-                Box,
-                {
-                  sx: {
-                    p: 1,
-                    display: "flex",
-                    alignItems: "center",
-                    boxShadow: "1px 1px 4px #d3d3d3ff",
-                    padding: "6px",
-                    borderRadius: "10px",
-                    "&:hover": { bgcolor: "action.selected" }
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs2(
-                      Typography,
-                      {
-                        variant: "body1",
-                        sx: {
-                          mx: 1,
-                          width: "200px",
-                          maxWidth: "250px",
-                          display: "flex",
-                          alignItems: "center"
+                          boxShadow: "1px 1px 4px #d3d3d3ff",
+                          padding: "6px",
+                          borderRadius: "10px",
+                          "&:hover": { bgcolor: "action.selected" }
                         },
                         children: [
-                          /* @__PURE__ */ jsx2(SupportAgent, { sx: { marginRight: "4px" } }),
-                          agent.name
+                          /* @__PURE__ */ jsxs(
+                            Typography,
+                            {
+                              variant: "body1",
+                              sx: {
+                                mx: 1,
+                                width: "200px",
+                                maxWidth: "250px",
+                                display: "flex",
+                                alignItems: "center"
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx(Roofing, { sx: { marginRight: "4px" } }),
+                                /* @__PURE__ */ jsx(Tooltip, { title: `${(_a2 = service == null ? void 0 : service.description) != null ? _a2 : ""}`, children: /* @__PURE__ */ jsxs(Box, { sx: { color: "text.secondary" }, children: [
+                                  service.name,
+                                  /* @__PURE__ */ jsx(
+                                    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__ */ jsx(Tooltip, { title: state.consultInfo ? "Please complete or cancel the ongoing consult transfer before proceeding." : (_c2 = service == null ? void 0 : service.phone_number) != null ? _c2 : "", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+                            IconButton,
+                            {
+                              color: "success",
+                              disabled: !!state.consultInfo,
+                              sx: {
+                                bgcolor: "action.hover",
+                                "&:hover": { bgcolor: "action.selected" }
+                              },
+                              onClick: (e) => {
+                                var _a3;
+                                return handleTransferClick(e, { mobile_number: (_a3 = service == null ? void 0 : service.phone_number) != null ? _a3 : "" }, "OTHER");
+                              },
+                              children: /* @__PURE__ */ jsx(Call, {})
+                            }
+                          ) }) })
                         ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx2(
-                      IconButton,
-                      {
-                        color: "success",
-                        sx: {
-                          bgcolor: "action.hover",
-                          "&:hover": { bgcolor: "action.selected" }
-                        },
-                        onClick: () => {
-                          handleTransferCall(agent, "AGENT");
-                        },
-                        children: /* @__PURE__ */ jsx2(Call, {})
-                      }
-                    )
-                  ]
-                },
-                index
-              )) : /* @__PURE__ */ jsxs2(
-                Box,
-                {
-                  sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    flexDirection: "column"
-                  },
-                  p: 2,
-                  children: [
-                    /* @__PURE__ */ jsx2(Upcoming, { color: "primary" }),
-                    /* @__PURE__ */ jsx2(
-                      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 && !isTransferLoading && currentselecteTab === "others" && /* @__PURE__ */ jsxs2(
-            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) && ((_u = hospitalsServicesList == null ? void 0 : hospitalsServicesList.data) == null ? void 0 : _u.length) > 0 && ((_v = hospitalsServicesList == null ? void 0 : hospitalsServicesList.data) == null ? void 0 : _v.map((service, index) => {
-                  var _a3, _b2, _c2;
-                  return /* @__PURE__ */ jsxs2(
+                      },
+                      index
+                    );
+                  })),
+                  /* @__PURE__ */ jsxs(
                     Box,
                     {
                       sx: {
@@ -2461,12 +1915,11 @@ function CallTransferDialog({ open }) {
                         display: "flex",
                         alignItems: "center",
                         boxShadow: "1px 1px 4px #d3d3d3ff",
-                        padding: "6px",
-                        borderRadius: "10px",
-                        "&:hover": { bgcolor: "action.selected" }
+                        padding: "6px",
+                        borderRadius: "10px"
                       },
                       children: [
-                        /* @__PURE__ */ jsxs2(
+                        /* @__PURE__ */ jsx(
                           Typography,
                           {
                             variant: "body1",
@@ -2477,135 +1930,106 @@ function CallTransferDialog({ open }) {
                               display: "flex",
                               alignItems: "center"
                             },
-                            children: [
-                              /* @__PURE__ */ jsx2(Roofing, { sx: { marginRight: "4px" } }),
-                              /* @__PURE__ */ jsx2(Tooltip, { title: `${(_a3 = service == null ? void 0 : service.description) != null ? _a3 : ""}`, children: /* @__PURE__ */ jsxs2(Box, { sx: { color: "text.secondary" }, children: [
-                                service.name,
-                                /* @__PURE__ */ jsx2(
-                                  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 : ""
+                            children: /* @__PURE__ */ jsx(
+                              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__ */ jsx2(Tooltip, { title: (_c2 = service == null ? void 0 : service.phone_number) != null ? _c2 : "", children: /* @__PURE__ */ jsx2(
-                          IconButton,
+                        /* @__PURE__ */ jsx(
+                          Tooltip,
                           {
-                            color: "success",
-                            sx: {
-                              bgcolor: "action.hover",
-                              "&:hover": { bgcolor: "action.selected" }
-                            },
-                            onClick: () => {
-                              var _a4;
-                              return handleTransferCall(
-                                { mobile_number: (_a4 = service == null ? void 0 : service.phone_number) != null ? _a4 : "" },
-                                "OTHER"
-                              );
-                            },
-                            children: /* @__PURE__ */ jsx2(Call, {})
+                            title: state.consultInfo ? "Please complete or cancel the ongoing consult transfer before proceeding." : mobileNumber ? `Call To - ${mobileNumber}` : "Enter mobile number",
+                            children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+                              IconButton,
+                              {
+                                color: "success",
+                                disabled: !!state.consultInfo,
+                                sx: {
+                                  bgcolor: "action.hover",
+                                  "&:hover": { bgcolor: "action.selected" }
+                                },
+                                onClick: (e) => handleTransferClick(e, { mobile_number: mobileNumber != null ? mobileNumber : "" }, "OTHER"),
+                                children: /* @__PURE__ */ jsx(Call, {})
+                              }
+                            ) })
                           }
-                        ) })
+                        )
                       ]
-                    },
-                    index
-                  );
-                })),
-                /* @__PURE__ */ jsxs2(
-                  Box,
-                  {
-                    sx: {
-                      p: 1,
-                      display: "flex",
-                      alignItems: "center",
-                      boxShadow: "1px 1px 4px #d3d3d3ff",
-                      padding: "6px",
-                      borderRadius: "10px"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx2(
-                        Typography,
-                        {
-                          variant: "body1",
-                          sx: {
-                            mx: 1,
-                            width: "200px",
-                            maxWidth: "250px",
-                            display: "flex",
-                            alignItems: "center"
-                          },
-                          children: /* @__PURE__ */ jsx2(
-                            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__ */ jsx2(
-                        Tooltip,
-                        {
-                          title: mobileNumber ? `Call To - ${mobileNumber}` : "Enter mobile number",
-                          children: /* @__PURE__ */ jsx2(
-                            IconButton,
-                            {
-                              color: "success",
-                              sx: {
-                                bgcolor: "action.hover",
-                                "&:hover": { bgcolor: "action.selected" }
-                              },
-                              onClick: () => handleTransferCall({ mobile_number: mobileNumber != null ? mobileNumber : "" }, "OTHER"),
-                              children: /* @__PURE__ */ jsx2(Call, {})
-                            }
-                          )
-                        }
-                      )
-                    ]
-                  }
-                )
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Menu,
+      {
+        anchorEl: transferMenuAnchor,
+        open: Boolean(transferMenuAnchor),
+        onClose: () => setTransferMenuAnchor(null),
+        anchorOrigin: { vertical: "top", horizontal: "left" },
+        transformOrigin: { vertical: "bottom", horizontal: "left" },
+        children: [
+          blindEnabled && /* @__PURE__ */ jsxs(
+            MenuItem,
+            {
+              onClick: () => {
+                if (pendingTransferData) handleTransferCall(pendingTransferData.data, pendingTransferData.type, "DEFAULT");
+                setTransferMenuAnchor(null);
+              },
+              sx: { gap: 1 },
+              children: [
+                /* @__PURE__ */ jsx(TransferWithinAStation, { fontSize: "small", color: "primary" }),
+                "Transfer"
+              ]
+            }
+          ),
+          attendedEnabled && /* @__PURE__ */ jsxs(
+            MenuItem,
+            {
+              onClick: () => {
+                if (pendingTransferData) handleTransferCall(pendingTransferData.data, pendingTransferData.type, "CONSULT");
+                setTransferMenuAnchor(null);
+              },
+              sx: { gap: 1 },
+              children: [
+                /* @__PURE__ */ jsx(RecordVoiceOver, { fontSize: "small", color: "primary" }),
+                "Consult then Transfer"
               ]
             }
           )
-        ] })
-      ] })
-    }
-  ) });
+        ]
+      }
+    )
+  ] });
 }
 function EndCallDispositionDialog({ open, setOpen, onSubmitDisposition }) {
-  var _a2, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e;
   const [getDispositions, data] = useGetRequest();
   const [formData, setFormData] = useState8({
     disposition: { label: "", value: "", id: 0 },
@@ -2642,23 +2066,23 @@ function EndCallDispositionDialog({ open, setOpen, onSubmitDisposition }) {
     getDispositions(END_POINT.DISPOSITIONS);
   }, []);
   const dispositionsOptions = useMemo(() => {
-    var _a3, _b2, _c2, _d2;
-    return ((_d2 = (_c2 = (_b2 = (_a3 = data == null ? void 0 : data.data) == null ? void 0 : _a3.data) == null ? void 0 : _b2.filter((item) => item.name !== "Resolved")) == null ? void 0 : _c2.map((item) => ({
+    var _a2, _b2, _c2, _d2;
+    return ((_d2 = (_c2 = (_b2 = (_a2 = data == null ? void 0 : data.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.filter((item) => item.name !== "Resolved")) == null ? void 0 : _c2.map((item) => ({
       label: item.name,
       value: item.code,
       id: item.disposition_id
     }))) == null ? void 0 : _d2.sort((a, b) => a.label.localeCompare(b.label))) || [];
-  }, [(_a2 = data == null ? void 0 : data.data) == null ? void 0 : _a2.data]);
-  return /* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsx2(
+  }, [(_a = data == null ? void 0 : data.data) == null ? void 0 : _a.data]);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     Dialog,
     {
       open,
       "aria-labelledby": "alert-dialog-title",
       "aria-describedby": "alert-dialog-description",
-      fullWidth: true,
       maxWidth: "xs",
-      children: /* @__PURE__ */ jsxs2(Paper, { sx: { borderRadius: 2 }, children: [
-        /* @__PURE__ */ jsx2(
+      slotProps: { paper: { sx: { minWidth: 500 } } },
+      children: /* @__PURE__ */ jsxs(Paper, { sx: { borderRadius: 2 }, children: [
+        /* @__PURE__ */ jsx(
           Box,
           {
             sx: {
@@ -2668,7 +2092,7 @@ function EndCallDispositionDialog({ open, setOpen, onSubmitDisposition }) {
               padding: "4px 16px",
               boxShadow: "0px 1px 2px #f5f5f5ff"
             },
-            children: /* @__PURE__ */ jsxs2(
+            children: /* @__PURE__ */ jsxs(
               Typography,
               {
                 variant: "body1",
@@ -2681,7 +2105,7 @@ function EndCallDispositionDialog({ open, setOpen, onSubmitDisposition }) {
             )
           }
         ),
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs(
           Box,
           {
             sx: {
@@ -2691,13 +2115,13 @@ function EndCallDispositionDialog({ open, setOpen, onSubmitDisposition }) {
               borderRadius: "10px"
             },
             children: [
-              /* @__PURE__ */ jsxs2(
+              /* @__PURE__ */ jsxs(
                 Box,
                 {
                   display: "flex",
                   gap: 2,
                   children: [
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx(
                       Autocomplete,
                       {
                         value: formData.disposition,
@@ -2705,7 +2129,7 @@ function EndCallDispositionDialog({ open, setOpen, onSubmitDisposition }) {
                         getOptionLabel: (opt) => opt.label,
                         onChange: (_, val) => handleChange("disposition", val),
                         size: "small",
-                        renderInput: (params) => /* @__PURE__ */ jsx2(
+                        renderInput: (params) => /* @__PURE__ */ jsx(
                           TextField,
                           __spreadProps(__spreadValues({}, params), {
                             label: "Disposition",
@@ -2715,7 +2139,7 @@ function EndCallDispositionDialog({ open, setOpen, onSubmitDisposition }) {
                         sx: { flex: 1 }
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx(
                       Autocomplete,
                       {
                         options: followUpOptions,
@@ -2723,7 +2147,7 @@ function EndCallDispositionDialog({ open, setOpen, onSubmitDisposition }) {
                         value: formData.followUp,
                         onChange: (_, val) => handleChange("followUp", val),
                         size: "small",
-                        renderInput: (params) => /* @__PURE__ */ jsx2(
+                        renderInput: (params) => /* @__PURE__ */ jsx(
                           TextField,
                           __spreadProps(__spreadValues({}, params), {
                             label: "Follow Up",
@@ -2736,14 +2160,14 @@ function EndCallDispositionDialog({ open, setOpen, onSubmitDisposition }) {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs2(
+              /* @__PURE__ */ jsxs(
                 Box,
                 {
                   display: "flex",
                   gap: 2,
                   mt: 2,
                   children: [
-                    /* @__PURE__ */ jsxs2(
+                    /* @__PURE__ */ jsxs(
                       Box,
                       {
                         sx: {
@@ -2752,7 +2176,7 @@ function EndCallDispositionDialog({ open, setOpen, onSubmitDisposition }) {
                           borderRadius: "5px"
                         },
                         children: [
-                          /* @__PURE__ */ jsx2(
+                          /* @__PURE__ */ jsx(
                             Checkbox,
                             {
                               name: "selected_break",
@@ -2773,7 +2197,7 @@ function EndCallDispositionDialog({ open, setOpen, onSubmitDisposition }) {
                         ]
                       }
                     ),
-                    ((_c = (_b = formData == null ? void 0 : formData.followUp) == null ? void 0 : _b.label) == null ? void 0 : _c.toLowerCase()) === "yes" ? /* @__PURE__ */ jsx2(
+                    ((_c = (_b = formData == null ? void 0 : formData.followUp) == null ? void 0 : _b.label) == null ? void 0 : _c.toLowerCase()) === "yes" ? /* @__PURE__ */ jsx(
                       TextField,
                       {
                         size: "small",
@@ -2787,37 +2211,37 @@ function EndCallDispositionDialog({ open, setOpen, onSubmitDisposition }) {
                         fullWidth: true,
                         sx: { flex: 1 }
                       }
-                    ) : /* @__PURE__ */ jsx2(Box, { sx: { flex: 1 } })
+                    ) : /* @__PURE__ */ jsx(Box, { sx: { flex: 1 } })
                   ]
                 }
               ),
-              ((_e = (_d = formData == null ? void 0 : formData.followUp) == null ? void 0 : _d.label) == null ? void 0 : _e.toLowerCase()) === "yes" && /* @__PURE__ */ jsxs2(
+              ((_e = (_d = formData == null ? void 0 : formData.followUp) == null ? void 0 : _d.label) == null ? void 0 : _e.toLowerCase()) === "yes" && /* @__PURE__ */ jsxs(
                 Box,
                 {
                   display: "flex",
                   gap: 2,
                   mt: 2,
                   children: [
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx(
                       Autocomplete,
                       {
                         size: "small",
                         options: Array.from({ length: 24 }, (_, i) => String(i).padStart(2, "0")),
                         value: formData.callbackHrs || null,
                         onChange: (_, value) => handleChange("callbackHrs", value || ""),
-                        renderInput: (params) => /* @__PURE__ */ jsx2(TextField, __spreadProps(__spreadValues({}, params), { label: "Hours (0-23)" })),
+                        renderInput: (params) => /* @__PURE__ */ jsx(TextField, __spreadProps(__spreadValues({}, params), { label: "Hours (0-23)" })),
                         fullWidth: true,
                         sx: { flex: 1 }
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx(
                       Autocomplete,
                       {
                         size: "small",
                         options: Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0")),
                         value: formData.callbackMins || null,
                         onChange: (_, value) => handleChange("callbackMins", value || ""),
-                        renderInput: (params) => /* @__PURE__ */ jsx2(TextField, __spreadProps(__spreadValues({}, params), { label: "Minutes (0-59)" })),
+                        renderInput: (params) => /* @__PURE__ */ jsx(TextField, __spreadProps(__spreadValues({}, params), { label: "Minutes (0-59)" })),
                         fullWidth: true,
                         sx: { flex: 1 }
                       }
@@ -2825,7 +2249,7 @@ function EndCallDispositionDialog({ open, setOpen, onSubmitDisposition }) {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx2(Box, { mt: 2, children: /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx(Box, { mt: 2, children: /* @__PURE__ */ jsx(
                 TextField,
                 {
                   size: "small",
@@ -2841,13 +2265,13 @@ function EndCallDispositionDialog({ open, setOpen, onSubmitDisposition }) {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs(
           Box,
           {
             textAlign: "right",
             m: 2,
             children: [
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx(
                 Button,
                 {
                   variant: "outlined",
@@ -2863,7 +2287,7 @@ function EndCallDispositionDialog({ open, setOpen, onSubmitDisposition }) {
                   children: "cancel"
                 }
               ),
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx(
                 Button,
                 {
                   variant: "contained",
@@ -2890,15 +2314,16 @@ function ProcessorListDialog({
   const handleClose = () => {
     setOpen(false);
   };
-  return /* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     Dialog,
     {
       open,
       "aria-labelledby": "alert-dialog-title",
       "aria-describedby": "alert-dialog-description",
       maxWidth: "xs",
-      children: /* @__PURE__ */ jsxs2(Paper, { sx: { borderRadius: 2 }, children: [
-        /* @__PURE__ */ jsxs2(
+      slotProps: { paper: { sx: { minWidth: 500 } } },
+      children: /* @__PURE__ */ jsxs(Paper, { sx: { borderRadius: 2 }, children: [
+        /* @__PURE__ */ jsxs(
           Box,
           {
             sx: {
@@ -2909,12 +2334,12 @@ function ProcessorListDialog({
               boxShadow: "0px 1px 2px #f5f5f5ff"
             },
             children: [
-              /* @__PURE__ */ jsx2(Typography, { variant: "body1", children: " Process List" }),
-              /* @__PURE__ */ jsx2(IconButton, { onClick: handleClose, children: /* @__PURE__ */ jsx2(Close, {}) })
+              /* @__PURE__ */ jsx(Typography, { variant: "body1", children: " Process List" }),
+              /* @__PURE__ */ jsx(IconButton, { onClick: handleClose, children: /* @__PURE__ */ jsx(Close, {}) })
             ]
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx(
           Box,
           {
             sx: {
@@ -2923,7 +2348,7 @@ function ProcessorListDialog({
               margin: "10px",
               borderRadius: "10px"
             },
-            children: processList.length > 0 ? processList == null ? void 0 : processList.map((process, index) => /* @__PURE__ */ jsx2(
+            children: processList.length > 0 ? processList == null ? void 0 : processList.map((process, index) => /* @__PURE__ */ jsx(
               Box,
               {
                 sx: {
@@ -2940,7 +2365,7 @@ function ProcessorListDialog({
                 onClick: () => {
                   handleSelectedProcessor(process);
                 },
-                children: /* @__PURE__ */ jsxs2(
+                children: /* @__PURE__ */ jsxs(
                   Typography,
                   {
                     variant: "body1",
@@ -2952,7 +2377,7 @@ function ProcessorListDialog({
                       alignItems: "center"
                     },
                     children: [
-                      /* @__PURE__ */ jsx2(SupportAgent, { sx: { marginRight: "4px" } }),
+                      /* @__PURE__ */ jsx(SupportAgent, { sx: { marginRight: "4px" } }),
                       process.process_name
                     ]
                   }
@@ -2970,16 +2395,16 @@ function CallHistoryDialog({ open, setOpen }) {
   const handleClose = () => {
     setOpen(false);
   };
-  return /* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     Dialog,
     {
       open,
       "aria-labelledby": "alert-dialog-title",
       "aria-describedby": "alert-dialog-description",
-      fullWidth: true,
       maxWidth: "md",
-      children: /* @__PURE__ */ jsxs2(Paper, { sx: { borderRadius: 2 }, children: [
-        /* @__PURE__ */ jsxs2(
+      slotProps: { paper: { sx: { minWidth: 500 } } },
+      children: /* @__PURE__ */ jsxs(Paper, { sx: { borderRadius: 2 }, children: [
+        /* @__PURE__ */ jsxs(
           Box,
           {
             sx: {
@@ -2990,12 +2415,12 @@ function CallHistoryDialog({ open, setOpen }) {
               boxShadow: "0px 1px 2px #f5f5f5ff"
             },
             children: [
-              /* @__PURE__ */ jsx2(Typography, { variant: "body1", children: " Call History" }),
-              /* @__PURE__ */ jsx2(IconButton, { onClick: handleClose, children: /* @__PURE__ */ jsx2(Close, {}) })
+              /* @__PURE__ */ jsx(Typography, { variant: "body1", children: " Call History" }),
+              /* @__PURE__ */ jsx(IconButton, { onClick: handleClose, children: /* @__PURE__ */ jsx(Close, {}) })
             ]
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx(
           Box,
           {
             sx: {
@@ -3016,14 +2441,14 @@ function CallHistoryDialog({ open, setOpen }) {
 }
 
 // call-control-sdk/lib/hooks/useDraggable.ts
-import { useCallback as useCallback5, useRef, useState as useState9 } from "react";
+import { useCallback as useCallback6, useRef, useState as useState9 } from "react";
 function useDraggable(initialPosition, onPositionChange) {
   const [position, setPosition] = useState9(initialPosition);
   const [isDragging, setIsDragging] = useState9(false);
   const dragRef = useRef();
   const dragStart = useRef({ x: 0, y: 0 });
   const elementStart = useRef({ x: 0, y: 0 });
-  const updatePosition = useCallback5(
+  const updatePosition = useCallback6(
     (newPosition) => {
       const element = dragRef.current;
       if (!element) return;
@@ -3039,7 +2464,7 @@ function useDraggable(initialPosition, onPositionChange) {
     },
     [onPositionChange]
   );
-  const handleStart = useCallback5(
+  const handleStart = useCallback6(
     (clientX, clientY) => {
       setIsDragging(true);
       dragStart.current = { x: clientX, y: clientY };
@@ -3079,14 +2504,14 @@ function useDraggable(initialPosition, onPositionChange) {
     },
     [position, updatePosition]
   );
-  const handleMouseDown = useCallback5(
+  const handleMouseDown = useCallback6(
     (e) => {
       e.preventDefault();
       handleStart(e.clientX, e.clientY);
     },
     [handleStart]
   );
-  const handleTouchStart = useCallback5(
+  const handleTouchStart = useCallback6(
     (e) => {
       e.preventDefault();
       const touch = e.touches[0];
@@ -3234,18 +2659,18 @@ function cleanupAudioResources() {
 }
 
 // call-control-sdk/lib/components/callControls.tsx
-import { getItem as getItem5 } from "@react-solutions/vault";
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { getSession as getSession3 } from "@react-solutions/vault";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "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;
+    var _a, _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 == null ? void 0 : apiConferenceData[statusKey]) != null ? _b : (_a2 = localState == null ? void 0 : localState.callData) == null ? void 0 : _a2.status,
+        status: (_b = apiConferenceData == null ? void 0 : apiConferenceData[statusKey]) != null ? _b : (_a = localState == null ? void 0 : localState.callData) == null ? void 0 : _a.status,
         phone: (_d = (_c = localState == null ? void 0 : localState.callData) == null ? void 0 : _c.phone_number) != null ? _d : ""
       });
     } else {
@@ -3270,12 +2695,12 @@ var formatDuration = (seconds) => {
   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, _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, __a, _$a, _ab;
+  var _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, _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, _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, __a, _$a, _ab, _bb, _cb, _db, _eb, _fb, _gb, _hb, _ib, _jb, _kb, _lb;
   const theme = useTheme3();
   const state = useSDKState();
   const { showToast } = useToast();
   const { disabled, enabled, outlined } = styles_default({
-    disabled: ((_a2 = state.sdkConfig) == null ? void 0 : _a2.disabled) || {},
+    disabled: ((_a = state.sdkConfig) == null ? void 0 : _a.disabled) || {},
     enabled: ((_b = state.sdkConfig) == null ? void 0 : _b.enabled) || {},
     outlined: ((_c = state.sdkConfig) == null ? void 0 : _c.outlined) || {}
   });
@@ -3322,7 +2747,7 @@ function CallControls({ onDataChange }) {
     state.iframePosition,
     (newPosition) => sdkStateManager.setIframePosition(newPosition)
   );
-  const [clickToCall, { isLoading: clickToCallLoading }] = usePostRequest({
+  const [clickToCall2, { isLoading: clickToCallLoading }] = usePostRequest({
     onSuccess: () => {
       setPhoneNumber("");
       setDialerAnchorEl(null);
@@ -3337,7 +2762,7 @@ function CallControls({ onDataChange }) {
   });
   const [updateAgentStatus, { isLoading }] = usePostRequest();
   const [sendNotification] = usePostRequest();
-  const [endCall, { isLoading: endCallLoading }] = usePostRequest({
+  const [endCall2, { isLoading: endCallLoading }] = usePostRequest({
     onSuccess: () => {
       sdkStateManager.endCall();
       setOpenCallDisposition(false);
@@ -3381,9 +2806,9 @@ function CallControls({ onDataChange }) {
     readyAgentStatus(END_POINT.READY_AGENT, payload);
   };
   const handleUpdateAgentStatus = (status) => {
-    var _a3, _b2;
+    var _a2, _b2;
     setStatusAnchorEl(null);
-    const currentStatus = (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase();
+    const currentStatus = (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase();
     if (["ONCALL" /* ONCALL */, "RINGING" /* RINGING */, "DIALING" /* DIALING */, "WRAPUP" /* WRAPUP */].includes(currentStatus)) {
       showToast("Cannot put agent on break while on a call", "error");
       return;
@@ -3408,31 +2833,31 @@ function CallControls({ onDataChange }) {
         phone_number: number,
         userId: state.agentId
       };
-      clickToCall(END_POINT.CLICK_TO_CALL, payload);
+      clickToCall2(END_POINT.CLICK_TO_CALL, payload);
     }
   };
   const handleHoldToggle = () => {
-    var _a3;
+    var _a2;
     const payload = {
-      action: ((_a3 = state.callData) == null ? void 0 : _a3.hold) === 1 ? "UNHOLD" /* UNHOLD */ : "HOLD" /* HOLD */,
+      action: ((_a2 = state.callData) == null ? void 0 : _a2.hold) === 1 ? "UNHOLD" /* UNHOLD */ : "HOLD" /* HOLD */,
       userId: state.agentId
     };
     holdOrUnHold(END_POINT.HOLD_CALL, payload);
   };
   const handleMuteToggle = () => {
-    var _a3;
+    var _a2;
     const payload = {
-      action: ((_a3 = state.callData) == null ? void 0 : _a3.mute) === 1 ? "UNMUTE" /* UNMUTE */ : "MUTE" /* MUTE */,
+      action: ((_a2 = state.callData) == null ? void 0 : _a2.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;
+    var _a2, _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 : "",
+      processid: (_c2 = (_b2 = (_a2 = state.process) == null ? void 0 : _a2.process_id) == null ? void 0 : _b2.toString()) != null ? _c2 : "",
       process_name: (_e2 = (_d2 = state.process) == null ? void 0 : _d2.process_name) != null ? _e2 : "",
       convox_id: (_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 : "",
@@ -3444,13 +2869,13 @@ function CallControls({ onDataChange }) {
       endcall_type: "CLOSE"
     };
     setPhoneNumber("");
-    endCall(END_POINT.END_CALL, payload, {
+    endCall2(END_POINT.END_CALL, payload, {
       params: {
         isBreak: (_q2 = data == null ? void 0 : data.selected_break) != null ? _q2 : false
       }
     }).then(() => {
-      var _a4, _b3, _c3, _d3, _e3, _f3, _g3, _h3, _i3;
-      const callUuid = (_a4 = state.callData) == null ? void 0 : _a4.convox_id;
+      var _a3, _b3, _c3, _d3, _e3, _f3, _g3, _h3, _i3;
+      const callUuid = (_a3 = state.callData) == null ? void 0 : _a3.convox_id;
       if (callUuid) {
         let callbackScheduledAt = null;
         if (((_b3 = data == null ? void 0 : data.followUp) == null ? void 0 : _b3.value) === "Y" && (data == null ? void 0 : data.callbackDate)) {
@@ -3483,9 +2908,9 @@ function CallControls({ onDataChange }) {
       console.error("Failed to start mic:", err);
     });
     const handleKeyDown = (event) => {
-      var _a3, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
-      const fullState = getItem5(STORAGE_KEY);
-      const key = (_a3 = event.key) == null ? void 0 : _a3.toLowerCase();
+      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
+      const fullState = getSession3(STORAGE_KEY);
+      const key = (_a2 = event.key) == null ? void 0 : _a2.toLowerCase();
       if (!event.altKey || ((_b2 = fullState == null ? void 0 : fullState.callData) == null ? void 0 : _b2.status) !== "ONCALL" /* ONCALL */) {
         return;
       }
@@ -3565,9 +2990,9 @@ function CallControls({ onDataChange }) {
     };
   }, [state.callData.status]);
   useEffect5(() => {
-    var _a3, _b2, _c2;
+    var _a2, _b2, _c2;
     let holdInterval;
-    const isOnCall = ((_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL" /* ONCALL */;
+    const isOnCall = ((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL" /* ONCALL */;
     const isOnHold2 = ((_c2 = state.callData) == null ? void 0 : _c2.hold) === 1;
     if (isOnHold2 && isOnCall) {
       if (!holdStartTimeRef.current) {
@@ -3587,9 +3012,9 @@ function CallControls({ onDataChange }) {
     };
   }, [(_d = state.callData) == null ? void 0 : _d.hold, (_e = state.callData) == null ? void 0 : _e.status]);
   useEffect5(() => {
-    var _a3, _b2, _c2, _d2;
+    var _a2, _b2, _c2, _d2;
     let muteInterval;
-    const isOnCall = ((_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL" /* ONCALL */;
+    const isOnCall = ((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL" /* ONCALL */;
     const isMuted2 = ((_c2 = state.callData) == null ? void 0 : _c2.mute) === 1;
     const isHeld = ((_d2 = state.callData) == null ? void 0 : _d2.hold) === 1;
     if (isMuted2 && isOnCall && !isHeld) {
@@ -3642,9 +3067,13 @@ function CallControls({ onDataChange }) {
   useEffect5(() => {
     if (state.agentId) {
       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)) {
+        var _a2, _b2, _c2, _d2;
+        if (res && ((_a2 = res.data) == null ? void 0 : _a2.data) && ((_c2 = (_b2 = res == null ? void 0 : res.data) == null ? void 0 : _b2.data) == null ? void 0 : _c2.length)) {
           setBreaksList(res.data.data);
+          const liveStatus = (_d2 = sdkStateManager.getState().callData) == null ? void 0 : _d2.status;
+          if (!liveStatus) {
+            handleUpdateAgentStatus(res.data.data[0].type);
+          }
         }
       }).catch((err) => {
         showToast(err.response.data.message, "error");
@@ -3652,7 +3081,7 @@ function CallControls({ onDataChange }) {
     }
   }, [state.agentId]);
   const connectWebSocket = () => {
-    var _a3, _b2;
+    var _a2, _b2;
     if (!state.agentId) {
       return;
     }
@@ -3661,7 +3090,7 @@ function CallControls({ onDataChange }) {
       reconnectTimeoutRef.current = null;
     }
     try {
-      webSocketRef.current = new WebSocket(`${(_a3 = state.urlConfig) == null ? void 0 : _a3.webSocketURL}/api/v1/ws/agent/events?token=${(_b2 = state.authorization) == null ? void 0 : _b2.accessToken}`);
+      webSocketRef.current = new WebSocket(`${(_a2 = state.urlConfig) == null ? void 0 : _a2.webSocketURL}/api/v1/ws/agent/events?token=${(_b2 = state.authorization) == null ? void 0 : _b2.accessToken}`);
       webSocketRef.current.onopen = () => {
         console.log("\u{1F310} WebSocket connection established");
         reconnectAttemptsRef.current = 0;
@@ -3679,13 +3108,13 @@ function CallControls({ onDataChange }) {
         }, 3e4);
       };
       webSocketRef.current.onmessage = (event) => {
-        var _a4, _b3, _c2, _d2, _e2;
+        var _a3, _b3, _c2, _d2, _e2, _f2;
         try {
           const data = JSON.parse(event.data);
           if (data.type === "pong") {
             return;
           }
-          const sdkState = getItem5(STORAGE_KEY);
+          const sdkState = getSession3(STORAGE_KEY);
           const confrence = getCombineConfrenceData(sdkState, data);
           const callData = {
             agent_id: data == null ? void 0 : data.agent_id,
@@ -3703,9 +3132,15 @@ function CallControls({ onDataChange }) {
           };
           sdkStateManager.updateCallData(callData);
           sdkStateManager.updateConferenceData([...confrence]);
+          sdkStateManager.setConsultInfo((_a3 = data.consult_info) != null ? _a3 : null);
+          if (data == null ? void 0 : data.call_consult_controls) {
+            sdkStateManager.updateSDKConfigFromPermissions(data.call_consult_controls);
+          } else {
+            sdkStateManager.resetConsultControls();
+          }
           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);
+            setCallWrapuptime((_c2 = (_b3 = sdkState == null ? void 0 : sdkState.sdkConfig) == null ? void 0 : _b3.auto_wrapup_time) != null ? _c2 : null);
             sdkStateManager.updateConferenceData([
               {
                 line: 1,
@@ -3758,7 +3193,7 @@ function CallControls({ onDataChange }) {
                 isMergeCall: false
               }
             ]);
-            if ((data == null ? void 0 : data.mode) !== "manual" && audioRef.current && ((_c2 = state == null ? void 0 : state.sdkConfig) == null ? void 0 : _c2.enableRingtone)) {
+            if ((data == null ? void 0 : data.mode) !== "manual" && audioRef.current && ((_d2 = state == null ? void 0 : state.sdkConfig) == null ? void 0 : _d2.enableRingtone)) {
               audioRef.current.play().catch((error) => {
                 console.error("Failed to play ringtone:", error);
               });
@@ -3782,8 +3217,8 @@ function CallControls({ onDataChange }) {
             }
           } else if (((data == null ? void 0 : data.mute) === 1 || (data == null ? void 0 : data.hold) === 1) && data.status === "ONCALL" /* ONCALL */) {
           } 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;
+            const breakTime = (_e2 = sdkState == null ? void 0 : sdkState.sdkConfig) == null ? void 0 : _e2.break_time;
+            const eventTime = (_f2 = data == null ? void 0 : data.event_time) != null ? _f2 : null;
             if (eventTime !== lastEventTimeRef.current) {
               hasFlashedRef.current = false;
               lastEventTimeRef.current = eventTime;
@@ -3866,14 +3301,14 @@ function CallControls({ onDataChange }) {
     };
   }, [state.agentId]);
   const handleSendSMS = (data) => {
-    var _a3;
+    var _a2;
     sendNotification(END_POINT.SEND_NOTIFICATIONS, {
-      phone_number: (_a3 = data == null ? void 0 : data.phone_number) != null ? _a3 : "",
+      phone_number: (_a2 = data == null ? void 0 : data.phone_number) != null ? _a2 : "",
       type: "ambulance"
     });
   };
   if (!state.isInitialized) {
-    return /* @__PURE__ */ jsx3(Box2, { children: Boolean(openProcessorDialog) && /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx2(Box2, { children: Boolean(openProcessorDialog) && /* @__PURE__ */ jsx2(
       ProcessorListDialog,
       {
         processList,
@@ -3887,48 +3322,51 @@ function CallControls({ onDataChange }) {
   }
   const isOnHold = ((_h = state.callData) == null ? void 0 : _h.hold) === 1 && ((_j = (_i = state.callData) == null ? void 0 : _i.status) == null ? void 0 : _j.toUpperCase()) === "ONCALL" /* ONCALL */;
   const isMuted = ((_k = state.callData) == null ? void 0 : _k.mute) === 1 && ((_m = (_l = state.callData) == null ? void 0 : _l.status) == null ? void 0 : _m.toUpperCase()) === "ONCALL" /* ONCALL */;
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsx3(Box2, { children: /* @__PURE__ */ jsx3(Fade, { in: true, timeout: 300, children: /* @__PURE__ */ jsx3(
+  const isVertical = ((_n = state.sdkConfig) == null ? void 0 : _n.sdkPosition) === "vertical";
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2(Box2, { children: /* @__PURE__ */ jsx2(Fade, { in: true, timeout: 300, children: /* @__PURE__ */ jsx2(
       Paper2,
       {
-        ref: ((_n = state.sdkConfig) == null ? void 0 : _n.isDraggable) ? dragRef : null,
-        elevation: isDragging ? 4 : ((_o = state.sdkConfig) == null ? void 0 : _o.isDraggable) ? 1 : 0,
+        ref: ((_o = state.sdkConfig) == null ? void 0 : _o.isDraggable) ? dragRef : null,
+        elevation: isDragging ? 4 : ((_p = state.sdkConfig) == null ? void 0 : _p.isDraggable) ? 1 : 0,
         sx: {
-          position: ((_p = state.sdkConfig) == null ? void 0 : _p.isDraggable) ? "fixed" : "relative",
-          left: ((_q = state.sdkConfig) == null ? void 0 : _q.isDraggable) ? position.x : "auto",
-          top: ((_r = state.sdkConfig) == null ? void 0 : _r.isDraggable) ? position.y : "auto",
+          position: ((_q = state.sdkConfig) == null ? void 0 : _q.isDraggable) ? "fixed" : "relative",
+          left: ((_r = state.sdkConfig) == null ? void 0 : _r.isDraggable) ? position.x : "auto",
+          top: ((_s = state.sdkConfig) == null ? void 0 : _s.isDraggable) ? position.y : "auto",
           display: "inline-block",
-          width: "auto",
+          width: isVertical ? "180px" : "auto",
           flexShrink: 0,
           whiteSpace: "nowrap",
           p: 0.5,
           borderRadius: 3,
           bgcolor: "background.paper",
-          zIndex: ((_s = state.sdkConfig) == null ? void 0 : _s.isDraggable) ? Number.MAX_SAFE_INTEGER : 0,
+          zIndex: ((_t = state.sdkConfig) == null ? void 0 : _t.isDraggable) ? Number.MAX_SAFE_INTEGER : 0,
           transition: theme.transitions.create(["box-shadow", "transform"], {
             duration: theme.transitions.duration.short
           }),
           userSelect: "none"
         },
-        children: /* @__PURE__ */ jsxs3(
+        children: /* @__PURE__ */ jsxs2(
           Box2,
           {
             sx: {
               display: "flex",
-              alignItems: "center"
+              flexDirection: isVertical ? "column" : "row",
+              alignItems: isVertical ? "stretch" : "center"
             },
             children: [
-              /* @__PURE__ */ jsxs3(
+              /* @__PURE__ */ jsxs2(
                 Box2,
                 {
                   sx: {
                     display: "flex",
-                    alignItems: "center",
+                    flexDirection: isVertical ? "column" : "row",
+                    alignItems: isVertical ? "stretch" : "center",
                     gap: 1,
-                    margin: "0px 10px"
+                    margin: isVertical ? "10px 8px 4px 8px" : "0px 10px"
                   },
                   children: [
-                    ((_t = state.sdkConfig) == null ? void 0 : _t.isDraggable) && /* @__PURE__ */ jsx3(
+                    ((_u = state.sdkConfig) == null ? void 0 : _u.isDraggable) && /* @__PURE__ */ jsx2(
                       IconButton2,
                       {
                         component: "div",
@@ -3938,22 +3376,63 @@ function CallControls({ onDataChange }) {
                         },
                         onMouseDown: handleMouseDown,
                         onTouchStart: handleTouchStart,
-                        children: /* @__PURE__ */ jsx3(DragIndicator, {})
+                        children: /* @__PURE__ */ jsx2(DragIndicator, {})
                       }
                     ),
-                    ((_u = state.sdkConfig) == null ? void 0 : _u.enableQueueName) && ((_v = state == null ? void 0 : state.callData) == null ? void 0 : _v.queue_name) && ((_w = state == null ? void 0 : state.callData) == null ? void 0 : _w.mode) !== "manual" && /* @__PURE__ */ jsx3(Chip, { label: (_x = state == null ? void 0 : state.callData) == null ? void 0 : _x.queue_name }),
-                    /* @__PURE__ */ jsx3(Tooltip2, { title: ((_y = state.sdkConfig) == null ? void 0 : _y.disabledDialButton) ? "Outbound call feature is disabled" : "Dial", children: /* @__PURE__ */ jsx3(Box2, { component: "span", children: /* @__PURE__ */ jsx3(
+                    ((_v = state.sdkConfig) == null ? void 0 : _v.enableQueueName) && ((_w = state == null ? void 0 : state.callData) == null ? void 0 : _w.queue_name) && ((_x = state == null ? void 0 : state.callData) == null ? void 0 : _x.mode) !== "manual" && /* @__PURE__ */ jsx2(Chip, { label: (_y = state == null ? void 0 : state.callData) == null ? void 0 : _y.queue_name }),
+                    /* @__PURE__ */ jsx2(Tooltip2, { title: ((_z = state.sdkConfig) == null ? void 0 : _z.disabledDialButton) ? "Outbound call feature is disabled" : "Dial", children: /* @__PURE__ */ jsx2(Box2, { component: "span", sx: isVertical ? { display: "block" } : {}, children: isVertical ? /* @__PURE__ */ jsx2(
+                      Button2,
+                      {
+                        variant: "outlined",
+                        startIcon: /* @__PURE__ */ jsx2(WifiCalling3, {}),
+                        onClick: (e) => {
+                          var _a2, _b2, _c2;
+                          if (![
+                            "BREAK" /* BREAK */,
+                            "ONCALL" /* ONCALL */,
+                            "RINGING" /* RINGING */,
+                            "WRAPUP" /* WRAPUP */
+                          ].includes((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) && !((_c2 = state.sdkConfig) == null ? void 0 : _c2.disabledDialButton)) {
+                            handleOpenDialer(e);
+                          }
+                        },
+                        disabled: [
+                          "BREAK" /* BREAK */,
+                          "ONCALL" /* ONCALL */,
+                          "RINGING" /* RINGING */,
+                          "WRAPUP" /* WRAPUP */
+                        ].includes((_A = state.callData.status) == null ? void 0 : _A.toUpperCase()) || ((_B = state.sdkConfig) == null ? void 0 : _B.disabledDialButton),
+                        sx: {
+                          justifyContent: "flex-start",
+                          width: "100%",
+                          px: 2,
+                          color: [
+                            "BREAK" /* BREAK */,
+                            "ONCALL" /* ONCALL */,
+                            "RINGING" /* RINGING */,
+                            "WRAPUP" /* WRAPUP */
+                          ].includes((_C = state.callData.status) == null ? void 0 : _C.toUpperCase()) || ((_D = state.sdkConfig) == null ? void 0 : _D.disabledDialButton) ? "action.selected" : "success.main",
+                          borderColor: [
+                            "BREAK" /* BREAK */,
+                            "ONCALL" /* ONCALL */,
+                            "RINGING" /* RINGING */,
+                            "WRAPUP" /* WRAPUP */
+                          ].includes((_E = state.callData.status) == null ? void 0 : _E.toUpperCase()) || ((_F = state.sdkConfig) == null ? void 0 : _F.disabledDialButton) ? "action.selected" : "success.main"
+                        },
+                        children: "Dial"
+                      }
+                    ) : /* @__PURE__ */ jsx2(
                       IconButton2,
                       {
                         size: "small",
                         onClick: (e) => {
-                          var _a3, _b2, _c2;
+                          var _a2, _b2, _c2;
                           if (![
                             "BREAK" /* BREAK */,
                             "ONCALL" /* ONCALL */,
                             "RINGING" /* RINGING */,
                             "WRAPUP" /* WRAPUP */
-                          ].includes((_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()) && !((_c2 = state.sdkConfig) == null ? void 0 : _c2.disabledDialButton)) {
+                          ].includes((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) && !((_c2 = state.sdkConfig) == null ? void 0 : _c2.disabledDialButton)) {
                             handleOpenDialer(e);
                           }
                         },
@@ -3962,8 +3441,8 @@ function CallControls({ onDataChange }) {
                           "ONCALL" /* ONCALL */,
                           "RINGING" /* RINGING */,
                           "WRAPUP" /* WRAPUP */
-                        ].includes((_z = state.callData.status) == null ? void 0 : _z.toUpperCase()) || ((_A = state.sdkConfig) == null ? void 0 : _A.disabledDialButton),
-                        children: /* @__PURE__ */ jsx3(
+                        ].includes((_G = state.callData.status) == null ? void 0 : _G.toUpperCase()) || ((_H = state.sdkConfig) == null ? void 0 : _H.disabledDialButton),
+                        children: /* @__PURE__ */ jsx2(
                           WifiCalling3,
                           {
                             sx: {
@@ -3972,13 +3451,13 @@ function CallControls({ onDataChange }) {
                                 "ONCALL" /* ONCALL */,
                                 "RINGING" /* RINGING */,
                                 "WRAPUP" /* WRAPUP */
-                              ].includes((_B = state.callData.status) == null ? void 0 : _B.toUpperCase()) || ((_C = state.sdkConfig) == null ? void 0 : _C.disabledDialButton) ? "action.selected" : "success.main"
+                              ].includes((_I = state.callData.status) == null ? void 0 : _I.toUpperCase()) || ((_J = state.sdkConfig) == null ? void 0 : _J.disabledDialButton) ? "action.selected" : "success.main"
                             }
                           }
                         )
                       }
                     ) }) }),
-                    /* @__PURE__ */ jsxs3(
+                    /* @__PURE__ */ jsxs2(
                       Box2,
                       {
                         onClick: () => setShowIframe(true),
@@ -3991,7 +3470,7 @@ function CallControls({ onDataChange }) {
                           marginRight: "10px"
                         },
                         children: [
-                          /* @__PURE__ */ jsx3(
+                          /* @__PURE__ */ jsx2(
                             Typography2,
                             {
                               sx: {
@@ -4003,7 +3482,7 @@ function CallControls({ onDataChange }) {
                               children: state.callData.status === "WRAPUP" /* WRAPUP */ && callWrapuptime !== null ? formatDuration(callWrapuptime) : formatDuration(callDuration)
                             }
                           ),
-                          isOnHold && /* @__PURE__ */ jsxs3(
+                          isOnHold && /* @__PURE__ */ jsxs2(
                             Box2,
                             {
                               sx: {
@@ -4018,8 +3497,8 @@ function CallControls({ onDataChange }) {
                                 mt: "2px"
                               },
                               children: [
-                                /* @__PURE__ */ jsx3(Pause2, { sx: { fontSize: "11px" } }),
-                                /* @__PURE__ */ jsx3(
+                                /* @__PURE__ */ jsx2(Pause2, { sx: { fontSize: "11px" } }),
+                                /* @__PURE__ */ jsx2(
                                   Typography2,
                                   {
                                     sx: {
@@ -4033,7 +3512,7 @@ function CallControls({ onDataChange }) {
                               ]
                             }
                           ),
-                          isMuted && !isOnHold && /* @__PURE__ */ jsxs3(
+                          isMuted && !isOnHold && /* @__PURE__ */ jsxs2(
                             Box2,
                             {
                               sx: {
@@ -4048,8 +3527,8 @@ function CallControls({ onDataChange }) {
                                 mt: "2px"
                               },
                               children: [
-                                /* @__PURE__ */ jsx3(MicOff, { sx: { fontSize: "11px" } }),
-                                /* @__PURE__ */ jsx3(
+                                /* @__PURE__ */ jsx2(MicOff, { sx: { fontSize: "11px" } }),
+                                /* @__PURE__ */ jsx2(
                                   Typography2,
                                   {
                                     sx: {
@@ -4066,11 +3545,11 @@ function CallControls({ onDataChange }) {
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx2(
                       Chip,
                       {
                         sx: { padding: "18px 0px" },
-                        label: isLoading || agentReadyLoading ? /* @__PURE__ */ jsx3(
+                        label: isLoading || agentReadyLoading ? /* @__PURE__ */ jsx2(
                           Box2,
                           {
                             sx: {
@@ -4080,9 +3559,9 @@ function CallControls({ onDataChange }) {
                               alignItems: "center",
                               justifyContent: "center"
                             },
-                            children: /* @__PURE__ */ jsx3(CircularProgress2, { size: "20px" })
+                            children: /* @__PURE__ */ jsx2(CircularProgress2, { size: "20px" })
                           }
-                        ) : /* @__PURE__ */ jsx3(
+                        ) : /* @__PURE__ */ jsx2(
                           Typography2,
                           {
                             variant: "body2",
@@ -4091,37 +3570,40 @@ function CallControls({ onDataChange }) {
                               width: "60px",
                               textAlign: "center"
                             },
-                            children: (_F = (_E = (_D = state.callData) == null ? void 0 : _D.status) == null ? void 0 : _E.toUpperCase()) != null ? _F : "N/A"
+                            children: (_M = (_L = (_K = state.callData) == null ? void 0 : _K.status) == null ? void 0 : _L.toUpperCase()) != null ? _M : "N/A"
                           }
                         ),
                         onClick: handleOpenAgentStatus,
-                        deleteIcon: /* @__PURE__ */ jsx3(KeyboardArrowDown, { color: "primary" }),
+                        deleteIcon: /* @__PURE__ */ jsx2(KeyboardArrowDown, { color: "primary" }),
                         onDelete: handleOpenAgentStatus
                       }
                     )
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs3(
+              /* @__PURE__ */ jsxs2(
                 Box2,
                 {
                   sx: {
                     display: "flex",
+                    flexDirection: isVertical ? "column" : "row",
                     gap: 1,
                     justifyContent: "center",
-                    alignItems: "center"
+                    alignItems: isVertical ? "stretch" : "center",
+                    margin: isVertical ? "0px 8px 8px 8px" : "0px"
                   },
                   children: [
-                    /* @__PURE__ */ jsx3(Tooltip2, { title: "Agent Ready", children: /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx2(Tooltip2, { title: "Agent Ready", children: /* @__PURE__ */ jsx2(
                       Button2,
                       {
                         variant: ["BREAK" /* BREAK */, "MISSED" /* MISSED */].includes(
-                          (_H = (_G = state.callData) == null ? void 0 : _G.status) == null ? void 0 : _H.toUpperCase()
+                          (_O = (_N = state.callData) == null ? void 0 : _N.status) == null ? void 0 : _O.toUpperCase()
                         ) ? "outlined" : "contained",
+                        startIcon: isVertical ? /* @__PURE__ */ jsx2(SupportAgent2, {}) : void 0,
                         onClick: (e) => {
-                          var _a3, _b2;
+                          var _a2, _b2;
                           if (["BREAK" /* BREAK */, "MISSED" /* MISSED */].includes(
-                            (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()
+                            (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()
                           )) {
                             e.stopPropagation();
                             handleAgentReady();
@@ -4129,115 +3611,120 @@ function CallControls({ onDataChange }) {
                         },
                         classes: {
                           root: ["BREAK" /* BREAK */, "MISSED" /* MISSED */].includes(
-                            (_J = (_I = state.callData) == null ? void 0 : _I.status) == null ? void 0 : _J.toUpperCase()
+                            (_Q = (_P = state.callData) == null ? void 0 : _P.status) == null ? void 0 : _Q.toUpperCase()
                           ) ? "outlined" : "enabled"
                         },
-                        sx: __spreadValues({}, ["BREAK" /* BREAK */, "MISSED" /* MISSED */].includes(
-                          (_L = (_K = state.callData) == null ? void 0 : _K.status) == null ? void 0 : _L.toUpperCase()
-                        ) ? outlined : enabled),
+                        sx: __spreadValues(__spreadValues({}, ["BREAK" /* BREAK */, "MISSED" /* MISSED */].includes(
+                          (_S = (_R = state.callData) == null ? void 0 : _R.status) == null ? void 0 : _S.toUpperCase()
+                        ) ? outlined : enabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }),
                         disabled: agentReadyLoading,
-                        children: /* @__PURE__ */ jsx3(SupportAgent2, {})
+                        children: isVertical ? "Agent Ready" : /* @__PURE__ */ jsx2(SupportAgent2, {})
                       }
                     ) }),
-                    /* @__PURE__ */ jsx3(Tooltip2, { title: ((_M = state.sdkConfig) == null ? void 0 : _M.disableHoldButton) ? "Hold feature is disabled" : ((_N = state.callData) == null ? void 0 : _N.hold) === 1 ? "Resume" : "Hold", children: /* @__PURE__ */ jsx3(Box2, { component: "span", children: /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx2(Tooltip2, { title: ((_T = state.sdkConfig) == null ? void 0 : _T.disableHoldButton) ? "Hold feature is disabled" : ((_U = state.callData) == null ? void 0 : _U.hold) === 1 ? "Resume" : "Hold", children: /* @__PURE__ */ jsx2(Box2, { component: "span", sx: isVertical ? { display: "block" } : {}, children: /* @__PURE__ */ jsx2(
                       Button2,
                       {
-                        variant: ((_O = state.callData) == null ? void 0 : _O.hold) === 1 && ((_Q = (_P = state.callData) == null ? void 0 : _P.status) == null ? void 0 : _Q.toUpperCase()) === "ONCALL" /* ONCALL */ ? "contained" : "outlined",
+                        variant: ((_V = state.callData) == null ? void 0 : _V.hold) === 1 && ((_X = (_W = state.callData) == null ? void 0 : _W.status) == null ? void 0 : _X.toUpperCase()) === "ONCALL" /* ONCALL */ ? "contained" : "outlined",
+                        startIcon: isVertical ? holdOrUnHoldLoading ? void 0 : ((_Y = state.callData) == null ? void 0 : _Y.hold) === 1 ? /* @__PURE__ */ jsx2(PlayArrow2, {}) : /* @__PURE__ */ jsx2(Pause2, {}) : void 0,
                         onClick: (e) => {
-                          var _a3;
+                          var _a2;
                           e.stopPropagation();
-                          if (!((_a3 = state.sdkConfig) == null ? void 0 : _a3.disableHoldButton)) {
+                          if (!((_a2 = state.sdkConfig) == null ? void 0 : _a2.disableHoldButton)) {
                             handleHoldToggle();
                           }
                         },
-                        sx: ((_R = state.callData) == null ? void 0 : _R.hold) === 1 && ((_T = (_S = state.callData) == null ? void 0 : _S.status) == null ? void 0 : _T.toUpperCase()) === "ONCALL" /* ONCALL */ ? __spreadValues({}, enabled) : ((_V = (_U = state.callData) == null ? void 0 : _U.status) == null ? void 0 : _V.toUpperCase()) === "ONCALL" /* ONCALL */ && !((_W = state.sdkConfig) == null ? void 0 : _W.disableHoldButton) ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
-                        disabled: ((_Y = (_X = state.callData) == null ? void 0 : _X.status) == null ? void 0 : _Y.toUpperCase()) !== "ONCALL" /* ONCALL */ && ((_Z = state.callData) == null ? void 0 : _Z.hold) !== 1 || holdOrUnHoldLoading || ((__ = state.sdkConfig) == null ? void 0 : __.disableHoldButton),
-                        children: holdOrUnHoldLoading ? /* @__PURE__ */ jsx3(
+                        sx: ((_Z = state.callData) == null ? void 0 : _Z.hold) === 1 && ((_$ = (__ = state.callData) == null ? void 0 : __.status) == null ? void 0 : _$.toUpperCase()) === "ONCALL" /* ONCALL */ ? __spreadValues(__spreadValues({}, enabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : ((_ba = (_aa = state.callData) == null ? void 0 : _aa.status) == null ? void 0 : _ba.toUpperCase()) === "ONCALL" /* ONCALL */ && !((_ca = state.sdkConfig) == null ? void 0 : _ca.disableHoldButton) ? __spreadValues(__spreadValues({}, outlined), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : __spreadValues(__spreadValues({}, disabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }),
+                        disabled: ((_ea = (_da = state.callData) == null ? void 0 : _da.status) == null ? void 0 : _ea.toUpperCase()) !== "ONCALL" /* ONCALL */ && ((_fa = state.callData) == null ? void 0 : _fa.hold) !== 1 || holdOrUnHoldLoading || ((_ga = state.sdkConfig) == null ? void 0 : _ga.disableHoldButton),
+                        children: holdOrUnHoldLoading ? /* @__PURE__ */ jsx2(
                           CircularProgress2,
                           {
                             size: "20px",
                             sx: { color: theme.palette.primary.main }
                           }
-                        ) : ((_$ = state.callData) == null ? void 0 : _$.hold) === 1 ? /* @__PURE__ */ jsx3(PlayArrow2, {}) : /* @__PURE__ */ jsx3(Pause2, {})
+                        ) : isVertical ? ((_ha = state.callData) == null ? void 0 : _ha.hold) === 1 ? "Resume" : "Hold" : ((_ia = state.callData) == null ? void 0 : _ia.hold) === 1 ? /* @__PURE__ */ jsx2(PlayArrow2, {}) : /* @__PURE__ */ jsx2(Pause2, {})
                       }
                     ) }) }),
-                    /* @__PURE__ */ jsx3(Tooltip2, { title: ((_aa = state.sdkConfig) == null ? void 0 : _aa.disableMuteButton) ? "Mute feature is disabled" : ((_ba = state.callData) == null ? void 0 : _ba.mute) === 1 ? "Unmute" : "Mute", children: /* @__PURE__ */ jsx3(Box2, { component: "span", children: /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx2(Tooltip2, { title: ((_ja = state.sdkConfig) == null ? void 0 : _ja.disableMuteButton) ? "Mute feature is disabled" : ((_ka = state.callData) == null ? void 0 : _ka.mute) === 1 ? "Unmute" : "Mute", children: /* @__PURE__ */ jsx2(Box2, { component: "span", sx: isVertical ? { display: "block" } : {}, children: /* @__PURE__ */ jsx2(
                       Button2,
                       {
-                        variant: ((_ca = state.callData) == null ? void 0 : _ca.mute) === 1 && ((_ea = (_da = state.callData) == null ? void 0 : _da.status) == null ? void 0 : _ea.toUpperCase()) === "ONCALL" /* ONCALL */ ? "contained" : "outlined",
+                        variant: ((_la = state.callData) == null ? void 0 : _la.mute) === 1 && ((_na = (_ma = state.callData) == null ? void 0 : _ma.status) == null ? void 0 : _na.toUpperCase()) === "ONCALL" /* ONCALL */ ? "contained" : "outlined",
+                        startIcon: isVertical ? muteOrUnMuteLoading ? void 0 : ((_oa = state.callData) == null ? void 0 : _oa.mute) === 1 ? /* @__PURE__ */ jsx2(MicOff, {}) : /* @__PURE__ */ jsx2(Mic, {}) : void 0,
                         onClick: (e) => {
-                          var _a3;
+                          var _a2;
                           e.stopPropagation();
-                          if (!((_a3 = state.sdkConfig) == null ? void 0 : _a3.disableMuteButton)) {
+                          if (!((_a2 = state.sdkConfig) == null ? void 0 : _a2.disableMuteButton)) {
                             handleMuteToggle();
                           }
                         },
-                        sx: ((_fa = state.sdkConfig) == null ? void 0 : _fa.disableMuteButton) || ((_ga = state.callData) == null ? void 0 : _ga.hold) === 1 ? __spreadValues({}, disabled) : ((_ha = state.callData) == null ? void 0 : _ha.mute) === 1 && ((_ja = (_ia = state.callData) == null ? void 0 : _ia.status) == null ? void 0 : _ja.toUpperCase()) === "ONCALL" /* ONCALL */ ? __spreadValues({}, enabled) : ((_la = (_ka = state.callData) == null ? void 0 : _ka.status) == null ? void 0 : _la.toUpperCase()) === "ONCALL" /* ONCALL */ ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
-                        disabled: ((_na = (_ma = state.callData) == null ? void 0 : _ma.status) == null ? void 0 : _na.toUpperCase()) !== "ONCALL" /* ONCALL */ && ((_oa = state.callData) == null ? void 0 : _oa.mute) !== 1 || muteOrUnMuteLoading || ((_pa = state.callData) == null ? void 0 : _pa.hold) === 1 || ((_qa = state.sdkConfig) == null ? void 0 : _qa.disableMuteButton),
-                        children: muteOrUnMuteLoading ? /* @__PURE__ */ jsx3(
+                        sx: ((_pa = state.sdkConfig) == null ? void 0 : _pa.disableMuteButton) || ((_qa = state.callData) == null ? void 0 : _qa.hold) === 1 ? __spreadValues(__spreadValues({}, disabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : ((_ra = state.callData) == null ? void 0 : _ra.mute) === 1 && ((_ta = (_sa = state.callData) == null ? void 0 : _sa.status) == null ? void 0 : _ta.toUpperCase()) === "ONCALL" /* ONCALL */ ? __spreadValues(__spreadValues({}, enabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : ((_va = (_ua = state.callData) == null ? void 0 : _ua.status) == null ? void 0 : _va.toUpperCase()) === "ONCALL" /* ONCALL */ ? __spreadValues(__spreadValues({}, outlined), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : __spreadValues(__spreadValues({}, disabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }),
+                        disabled: ((_xa = (_wa = state.callData) == null ? void 0 : _wa.status) == null ? void 0 : _xa.toUpperCase()) !== "ONCALL" /* ONCALL */ && ((_ya = state.callData) == null ? void 0 : _ya.mute) !== 1 || muteOrUnMuteLoading || ((_za = state.callData) == null ? void 0 : _za.hold) === 1 || ((_Aa = state.sdkConfig) == null ? void 0 : _Aa.disableMuteButton),
+                        children: muteOrUnMuteLoading ? /* @__PURE__ */ jsx2(
                           CircularProgress2,
                           {
                             size: "20px",
                             sx: { color: theme.palette.primary.main }
                           }
-                        ) : ((_ra = state.callData) == null ? void 0 : _ra.mute) === 1 ? /* @__PURE__ */ jsx3(MicOff, {}) : /* @__PURE__ */ jsx3(Mic, {})
+                        ) : isVertical ? ((_Ba = state.callData) == null ? void 0 : _Ba.mute) === 1 ? "Unmute" : "Mute" : ((_Ca = state.callData) == null ? void 0 : _Ca.mute) === 1 ? /* @__PURE__ */ jsx2(MicOff, {}) : /* @__PURE__ */ jsx2(Mic, {})
                       }
                     ) }) }),
-                    /* @__PURE__ */ jsx3(Tooltip2, { title: ((_sa = state.sdkConfig) == null ? void 0 : _sa.disableCallTransferButton) ? "Transfer Call feature is disabled" : "Transfer Call", children: /* @__PURE__ */ jsx3(Box2, { component: "span", children: /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx2(Tooltip2, { title: ((_Da = state.sdkConfig) == null ? void 0 : _Da.disableCallTransferButton) ? "Transfer Call feature is disabled" : "Transfer Call", children: /* @__PURE__ */ jsx2(Box2, { component: "span", sx: isVertical ? { display: "block" } : {}, children: /* @__PURE__ */ jsx2(
                       Button2,
                       {
                         variant: state.openCallTransferDialog ? "contained" : "outlined",
+                        startIcon: isVertical ? /* @__PURE__ */ jsx2(TransferWithinAStation2, {}) : void 0,
                         onClick: (e) => {
-                          var _a3, _b2, _c2;
-                          if (((_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL" /* ONCALL */ && !((_c2 = state.sdkConfig) == null ? void 0 : _c2.disableCallTransferButton)) {
+                          var _a2, _b2, _c2;
+                          if (((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL" /* ONCALL */ && !((_c2 = state.sdkConfig) == null ? void 0 : _c2.disableCallTransferButton)) {
                             e.stopPropagation();
                             sdkStateManager.setOpenCallTransferDialog(true);
                           }
                         },
-                        sx: state.openCallTransferDialog ? __spreadValues({}, enabled) : ((_ua = (_ta = state.callData) == null ? void 0 : _ta.status) == null ? void 0 : _ua.toUpperCase()) === "ONCALL" /* ONCALL */ && !((_va = state.sdkConfig) == null ? void 0 : _va.disableCallTransferButton) ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
-                        disabled: ((_xa = (_wa = state.callData) == null ? void 0 : _wa.status) == null ? void 0 : _xa.toUpperCase()) !== "ONCALL" /* ONCALL */ || ((_ya = state.sdkConfig) == null ? void 0 : _ya.disableCallTransferButton),
-                        children: /* @__PURE__ */ jsx3(TransferWithinAStation2, {})
+                        sx: state.openCallTransferDialog ? __spreadValues(__spreadValues({}, enabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : ((_Fa = (_Ea = state.callData) == null ? void 0 : _Ea.status) == null ? void 0 : _Fa.toUpperCase()) === "ONCALL" /* ONCALL */ && !((_Ga = state.sdkConfig) == null ? void 0 : _Ga.disableCallTransferButton) ? __spreadValues(__spreadValues({}, outlined), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : __spreadValues(__spreadValues({}, disabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }),
+                        disabled: ((_Ia = (_Ha = state.callData) == null ? void 0 : _Ha.status) == null ? void 0 : _Ia.toUpperCase()) !== "ONCALL" /* ONCALL */ || ((_Ja = state.sdkConfig) == null ? void 0 : _Ja.disableCallTransferButton),
+                        children: isVertical ? "Transfer" : /* @__PURE__ */ jsx2(TransferWithinAStation2, {})
                       }
                     ) }) }),
-                    /* @__PURE__ */ jsx3(Tooltip2, { title: ((_za = state.sdkConfig) == null ? void 0 : _za.disableConferenceButton) ? "Conference Call feature is disabled" : "Conference Call", children: /* @__PURE__ */ jsx3(Box2, { component: "span", children: /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx2(Tooltip2, { title: ((_Ka = state.sdkConfig) == null ? void 0 : _Ka.disableConferenceButton) ? "Conference Call feature is disabled" : "Conference Call", children: /* @__PURE__ */ jsx2(Box2, { component: "span", sx: isVertical ? { display: "block" } : {}, children: /* @__PURE__ */ jsx2(
                       Button2,
                       {
                         variant: state.openConferenceDialog ? "contained" : "outlined",
+                        startIcon: isVertical ? /* @__PURE__ */ jsx2(Group, {}) : void 0,
                         onClick: (e) => {
-                          var _a3, _b2, _c2;
-                          if (((_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL" /* ONCALL */ && !((_c2 = state.sdkConfig) == null ? void 0 : _c2.disableConferenceButton)) {
+                          var _a2, _b2, _c2;
+                          if (((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL" /* ONCALL */ && !((_c2 = state.sdkConfig) == null ? void 0 : _c2.disableConferenceButton)) {
                             e.stopPropagation();
                             sdkStateManager.setOpenConferenceDialog(true);
                           }
                         },
-                        sx: state.openConferenceDialog ? __spreadValues({}, enabled) : ((_Ba = (_Aa = state.callData) == null ? void 0 : _Aa.status) == null ? void 0 : _Ba.toUpperCase()) === "ONCALL" /* ONCALL */ && !((_Ca = state.sdkConfig) == null ? void 0 : _Ca.disableConferenceButton) ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
-                        disabled: ((_Ea = (_Da = state.callData) == null ? void 0 : _Da.status) == null ? void 0 : _Ea.toUpperCase()) !== "ONCALL" /* ONCALL */ || ((_Fa = state.sdkConfig) == null ? void 0 : _Fa.disableConferenceButton),
-                        children: /* @__PURE__ */ jsx3(Group, {})
+                        sx: state.openConferenceDialog ? __spreadValues(__spreadValues({}, enabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : ((_Ma = (_La = state.callData) == null ? void 0 : _La.status) == null ? void 0 : _Ma.toUpperCase()) === "ONCALL" /* ONCALL */ && !((_Na = state.sdkConfig) == null ? void 0 : _Na.disableConferenceButton) ? __spreadValues(__spreadValues({}, outlined), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : __spreadValues(__spreadValues({}, disabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }),
+                        disabled: ((_Pa = (_Oa = state.callData) == null ? void 0 : _Oa.status) == null ? void 0 : _Pa.toUpperCase()) !== "ONCALL" /* ONCALL */ || ((_Qa = state.sdkConfig) == null ? void 0 : _Qa.disableConferenceButton),
+                        children: isVertical ? "Conference" : /* @__PURE__ */ jsx2(Group, {})
                       }
                     ) }) }),
-                    ((_Ga = state.sdkConfig) == null ? void 0 : _Ga.enableSmsServices) && /* @__PURE__ */ jsx3(Tooltip2, { title: "Send SMS", children: /* @__PURE__ */ jsx3(
+                    ((_Ra = state.sdkConfig) == null ? void 0 : _Ra.enableSmsServices) && /* @__PURE__ */ jsx2(Tooltip2, { title: "Send SMS", children: /* @__PURE__ */ jsx2(
                       Button2,
                       {
                         variant: Boolean(ambulanceAnchorEl) ? "contained" : "outlined",
+                        startIcon: isVertical ? /* @__PURE__ */ jsx2(SmsSharp, {}) : void 0,
                         onClick: (e) => {
-                          var _a3, _b2;
+                          var _a2, _b2;
                           if (["ONCALL" /* ONCALL */, "WRAPUP" /* WRAPUP */].includes(
-                            (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()
+                            (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()
                           )) {
                             e.stopPropagation();
                             handleOpenAbulanceServices(e);
                           }
                         },
-                        sx: Boolean(ambulanceAnchorEl) ? __spreadValues({}, enabled) : ["ONCALL" /* ONCALL */, "WRAPUP" /* WRAPUP */].includes(
-                          (_Ia = (_Ha = state.callData) == null ? void 0 : _Ha.status) == null ? void 0 : _Ia.toUpperCase()
-                        ) ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                        sx: Boolean(ambulanceAnchorEl) ? __spreadValues(__spreadValues({}, enabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : ["ONCALL" /* ONCALL */, "WRAPUP" /* WRAPUP */].includes(
+                          (_Ta = (_Sa = state.callData) == null ? void 0 : _Sa.status) == null ? void 0 : _Ta.toUpperCase()
+                        ) ? __spreadValues(__spreadValues({}, outlined), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : __spreadValues(__spreadValues({}, disabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }),
                         disabled: !["ONCALL" /* ONCALL */, "WRAPUP" /* WRAPUP */].includes(
-                          (_Ka = (_Ja = state.callData) == null ? void 0 : _Ja.status) == null ? void 0 : _Ka.toUpperCase()
+                          (_Va = (_Ua = state.callData) == null ? void 0 : _Ua.status) == null ? void 0 : _Va.toUpperCase()
                         ),
-                        children: /* @__PURE__ */ jsx3(SmsSharp, {})
+                        children: isVertical ? "Send SMS" : /* @__PURE__ */ jsx2(SmsSharp, {})
                       }
                     ) }),
-                    /* @__PURE__ */ jsx3(Tooltip2, { title: ((_La = state.sdkConfig) == null ? void 0 : _La.disableEndCallButton) ? "End Call feature is disabled" : "End Call", children: /* @__PURE__ */ jsx3(Box2, { component: "span", children: /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx2(Tooltip2, { title: ((_Wa = state.sdkConfig) == null ? void 0 : _Wa.disableEndCallButton) ? "End Call feature is disabled" : "End Call", children: /* @__PURE__ */ jsx2(Box2, { component: "span", sx: isVertical ? { display: "block" } : {}, children: /* @__PURE__ */ jsx2(
                       Button2,
                       {
                         variant: [
@@ -4245,15 +3732,16 @@ function CallControls({ onDataChange }) {
                           "RINGING" /* RINGING */,
                           "DIALING" /* DIALING */,
                           "WRAPUP" /* WRAPUP */
-                        ].includes((_Na = (_Ma = state.callData) == null ? void 0 : _Ma.status) == null ? void 0 : _Na.toUpperCase()) && !((_Oa = state.sdkConfig) == null ? void 0 : _Oa.disableEndCallButton) ? "contained" : "outlined",
+                        ].includes((_Ya = (_Xa = state.callData) == null ? void 0 : _Xa.status) == null ? void 0 : _Ya.toUpperCase()) && !((_Za = state.sdkConfig) == null ? void 0 : _Za.disableEndCallButton) ? "contained" : "outlined",
+                        startIcon: isVertical && !endCallLoading ? /* @__PURE__ */ jsx2(CallEnd2, {}) : void 0,
                         onClick: (e) => {
-                          var _a3, _b2, _c2;
+                          var _a2, _b2, _c2;
                           if ([
                             "ONCALL" /* ONCALL */,
                             "RINGING" /* RINGING */,
                             "DIALING" /* DIALING */,
                             "WRAPUP" /* WRAPUP */
-                          ].includes((_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()) && !((_c2 = state.sdkConfig) == null ? void 0 : _c2.disableEndCallButton)) {
+                          ].includes((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) && !((_c2 = state.sdkConfig) == null ? void 0 : _c2.disableEndCallButton)) {
                             e.stopPropagation();
                             setOpenCallDisposition(true);
                           }
@@ -4263,7 +3751,7 @@ function CallControls({ onDataChange }) {
                           "RINGING" /* RINGING */,
                           "DIALING" /* DIALING */,
                           "WRAPUP" /* WRAPUP */
-                        ].includes((_Qa = (_Pa = state.callData) == null ? void 0 : _Pa.status) == null ? void 0 : _Qa.toUpperCase()) && !((_Ra = state.sdkConfig) == null ? void 0 : _Ra.disableEndCallButton) ? __spreadProps(__spreadValues({}, enabled), {
+                        ].includes((_$a = (__a = state.callData) == null ? void 0 : __a.status) == null ? void 0 : _$a.toUpperCase()) && !((_ab = state.sdkConfig) == null ? void 0 : _ab.disableEndCallButton) ? __spreadValues(__spreadProps(__spreadValues({}, enabled), {
                           borderRight: "1px",
                           backgroundColor: "error.main",
                           minWidth: "60px !important",
@@ -4279,36 +3767,37 @@ function CallControls({ onDataChange }) {
                             bgcolor: "error.light",
                             boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
                           }
-                        }) : __spreadProps(__spreadValues({}, disabled), {
+                        }), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : __spreadValues(__spreadProps(__spreadValues({}, disabled), {
                           minWidth: "60px !important"
-                        }),
+                        }), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }),
                         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 || ((_Ua = state.sdkConfig) == null ? void 0 : _Ua.disableEndCallButton),
-                        children: endCallLoading ? /* @__PURE__ */ jsx3(CircularProgress2, { size: "20px", color: "error" }) : /* @__PURE__ */ jsx3(CallEnd2, {})
+                        ].includes((_cb = (_bb = state.callData) == null ? void 0 : _bb.status) == null ? void 0 : _cb.toUpperCase()) || endCallLoading || ((_db = state.sdkConfig) == null ? void 0 : _db.disableEndCallButton),
+                        children: endCallLoading ? /* @__PURE__ */ jsx2(CircularProgress2, { size: "20px", color: "error" }) : isVertical ? "End Call" : /* @__PURE__ */ jsx2(CallEnd2, {})
                       }
                     ) }) }),
-                    !((_Va = state.sdkConfig) == null ? void 0 : _Va.disabledMoreOptionsButton) && processList && (processList == null ? void 0 : processList.length) > 1 && /* @__PURE__ */ jsx3(Tooltip2, { title: "Switch Process", children: /* @__PURE__ */ jsx3(
+                    !((_eb = state.sdkConfig) == null ? void 0 : _eb.disabledMoreOptionsButton) && processList && (processList == null ? void 0 : processList.length) > 1 && /* @__PURE__ */ jsx2(Tooltip2, { title: "Switch Process", children: /* @__PURE__ */ jsx2(
                       Button2,
                       {
                         variant: Boolean(moreOptionsAnchorEl) ? "contained" : "outlined",
+                        startIcon: isVertical ? /* @__PURE__ */ jsx2(MoreVert, {}) : void 0,
                         onClick: (e) => {
-                          var _a3, _b2;
+                          var _a2, _b2;
                           if (["BREAK" /* BREAK */, "IDLE" /* IDLE */].includes(
-                            (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.status) == null ? void 0 : _b2.toUpperCase()
+                            (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()
                           )) {
                             e.stopPropagation();
                             handleOpenMoreOptions(e);
                           }
                         },
-                        sx: Boolean(moreOptionsAnchorEl) ? __spreadValues({}, enabled) : __spreadValues({}, outlined),
+                        sx: Boolean(moreOptionsAnchorEl) ? __spreadValues(__spreadValues({}, enabled), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }) : __spreadValues(__spreadValues({}, outlined), isVertical && { justifyContent: "flex-start", width: "100%", px: 2 }),
                         disabled: !["BREAK" /* BREAK */, "IDLE" /* IDLE */].includes(
-                          (_Xa = (_Wa = state.callData) == null ? void 0 : _Wa.status) == null ? void 0 : _Xa.toUpperCase()
+                          (_gb = (_fb = state.callData) == null ? void 0 : _fb.status) == null ? void 0 : _gb.toUpperCase()
                         ),
-                        children: /* @__PURE__ */ jsx3(MoreVert, {})
+                        children: isVertical ? "Switch Process" : /* @__PURE__ */ jsx2(MoreVert, {})
                       }
                     ) })
                   ]
@@ -4319,12 +3808,12 @@ function CallControls({ onDataChange }) {
         )
       }
     ) }) }),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx2(
       Fade,
       {
         in: true,
         timeout: 300,
-        children: /* @__PURE__ */ jsxs3(
+        children: /* @__PURE__ */ jsxs2(
           Paper2,
           {
             ref: iframeDragRef,
@@ -4339,11 +3828,11 @@ function CallControls({ onDataChange }) {
               transition: theme.transitions.create(["box-shadow", "transform"], {
                 duration: theme.transitions.duration.short
               }),
-              visibility: showIframe && !((_Ya = state.sdkConfig) == null ? void 0 : _Ya.disableSoftPhone) ? "visible" : "hidden",
+              visibility: showIframe && !((_hb = state.sdkConfig) == null ? void 0 : _hb.disableSoftPhone) ? "visible" : "hidden",
               userSelect: "none"
             },
             children: [
-              /* @__PURE__ */ jsxs3(
+              /* @__PURE__ */ jsxs2(
                 Box2,
                 {
                   sx: {
@@ -4356,7 +3845,7 @@ function CallControls({ onDataChange }) {
                   onMouseDown: iframeHandleMouseDown,
                   onTouchStart: iframeHandleTouchStart,
                   children: [
-                    /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx2(
                       DragIndicator,
                       {
                         sx: {
@@ -4366,15 +3855,15 @@ function CallControls({ onDataChange }) {
                       }
                     ),
                     " ",
-                    /* @__PURE__ */ jsx3(Typography2, { variant: "subtitle1", fontWeight: 600, textAlign: "center", children: "ahs-cti" }),
-                    /* @__PURE__ */ jsx3(IconButton2, { onClick: () => setShowIframe(false), children: /* @__PURE__ */ jsx3(Close2, {}) })
+                    /* @__PURE__ */ jsx2(Typography2, { variant: "subtitle1", fontWeight: 600, textAlign: "center", children: "ahs-cti" }),
+                    /* @__PURE__ */ jsx2(IconButton2, { onClick: () => setShowIframe(false), children: /* @__PURE__ */ jsx2(Close2, {}) })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx3(Box2, { children: /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx2(Box2, { children: /* @__PURE__ */ jsx2(
                 "iframe",
                 {
-                  src: `${(_Za = state.urlConfig) == null ? void 0 : _Za.iframeURL}/static/phone/index.html?user_id=${(__a = state.urlConfig) == null ? void 0 : __a.id}&api_url=${(_$a = state.urlConfig) == null ? void 0 : _$a.iframeAPIURL}&token=${(_ab = state.authorization) == null ? void 0 : _ab.accessToken}`,
+                  src: `${(_ib = state.urlConfig) == null ? void 0 : _ib.iframeURL}/static/phone/index.html?user_id=${(_jb = state.urlConfig) == null ? void 0 : _jb.id}&api_url=${(_kb = state.urlConfig) == null ? void 0 : _kb.iframeAPIURL}&token=${(_lb = state.authorization) == null ? void 0 : _lb.accessToken}`,
                   height: 380,
                   width: 420,
                   allow: "camera; microphone; autoplay",
@@ -4388,8 +3877,8 @@ function CallControls({ onDataChange }) {
         )
       }
     ),
-    /* @__PURE__ */ jsx3(
-      Menu,
+    /* @__PURE__ */ jsx2(
+      Menu2,
       {
         anchorEl: dialerAnchorEl,
         open: Boolean(dialerAnchorEl),
@@ -4398,7 +3887,7 @@ function CallControls({ onDataChange }) {
         sx: {
           zIndex: 99999
         },
-        children: /* @__PURE__ */ jsxs3(
+        children: /* @__PURE__ */ jsxs2(
           Box2,
           {
             sx: {
@@ -4409,7 +3898,7 @@ function CallControls({ onDataChange }) {
               }
             },
             children: [
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx2(
                 TextField2,
                 {
                   size: "small",
@@ -4426,14 +3915,14 @@ function CallControls({ onDataChange }) {
                   }
                 }
               ),
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx2(
                 IconButton2,
                 {
                   color: "info",
                   onClick: () => {
                     handleStartCall(phoneNumber);
                   },
-                  children: clickToCallLoading ? /* @__PURE__ */ jsx3(
+                  children: clickToCallLoading ? /* @__PURE__ */ jsx2(
                     CircularProgress2,
                     {
                       size: "20px",
@@ -4441,7 +3930,7 @@ function CallControls({ onDataChange }) {
                         color: theme.palette.success.main
                       }
                     }
-                  ) : /* @__PURE__ */ jsx3(Phone, { color: "success" })
+                  ) : /* @__PURE__ */ jsx2(Phone, { color: "success" })
                 }
               )
             ]
@@ -4449,8 +3938,8 @@ function CallControls({ onDataChange }) {
         )
       }
     ),
-    /* @__PURE__ */ jsx3(
-      Menu,
+    /* @__PURE__ */ jsx2(
+      Menu2,
       {
         anchorEl: ambulanceAnchorEl,
         open: Boolean(ambulanceAnchorEl),
@@ -4459,7 +3948,7 @@ function CallControls({ onDataChange }) {
         sx: {
           zIndex: 99999
         },
-        children: /* @__PURE__ */ jsx3(
+        children: /* @__PURE__ */ jsx2(
           Box2,
           {
             sx: {
@@ -4471,7 +3960,7 @@ function CallControls({ onDataChange }) {
               display: "flex",
               alignItems: "center"
             },
-            children: /* @__PURE__ */ jsx3(Tooltip2, { title: "Ambulance Service", children: /* @__PURE__ */ jsxs3(
+            children: /* @__PURE__ */ jsx2(Tooltip2, { title: "Ambulance Service", children: /* @__PURE__ */ jsxs2(
               Button2,
               {
                 color: "primary",
@@ -4481,7 +3970,7 @@ function CallControls({ onDataChange }) {
                 },
                 children: [
                   "Ambulance",
-                  /* @__PURE__ */ jsxs3(
+                  /* @__PURE__ */ jsxs2(
                     Box2,
                     {
                       sx: {
@@ -4495,7 +3984,7 @@ function CallControls({ onDataChange }) {
                       },
                       children: [
                         "Send",
-                        /* @__PURE__ */ jsx3(
+                        /* @__PURE__ */ jsx2(
                           SendRounded,
                           {
                             sx: {
@@ -4515,8 +4004,8 @@ function CallControls({ onDataChange }) {
         )
       }
     ),
-    /* @__PURE__ */ jsx3(
-      Menu,
+    /* @__PURE__ */ jsx2(
+      Menu2,
       {
         anchorEl: moreOptionsAnchorEl,
         open: Boolean(moreOptionsAnchorEl),
@@ -4525,7 +4014,7 @@ function CallControls({ onDataChange }) {
         sx: {
           zIndex: 99999
         },
-        children: /* @__PURE__ */ jsx3(
+        children: /* @__PURE__ */ jsx2(
           Box2,
           {
             sx: {
@@ -4540,14 +4029,14 @@ function CallControls({ onDataChange }) {
               gap: 1
             },
             children: processList == null ? void 0 : processList.map((item) => {
-              var _a3, _b2, _c2;
-              return /* @__PURE__ */ jsx3(
+              var _a2, _b2, _c2;
+              return /* @__PURE__ */ jsx2(
                 Box2,
                 {
                   sx: {
                     width: "100%"
                   },
-                  children: /* @__PURE__ */ jsx3(Tooltip2, { title: (_a3 = item == null ? void 0 : item.process_name) != null ? _a3 : "", children: /* @__PURE__ */ jsx3(
+                  children: /* @__PURE__ */ jsx2(Tooltip2, { title: (_a2 = item == null ? void 0 : item.process_name) != null ? _a2 : "", children: /* @__PURE__ */ jsx2(
                     Button2,
                     {
                       color: "primary",
@@ -4569,8 +4058,8 @@ function CallControls({ onDataChange }) {
         )
       }
     ),
-    /* @__PURE__ */ jsx3(
-      Menu,
+    /* @__PURE__ */ jsx2(
+      Menu2,
       {
         anchorEl: statusAnchorEl,
         open: Boolean(statusAnchorEl),
@@ -4579,14 +4068,14 @@ function CallControls({ onDataChange }) {
         sx: {
           zIndex: 99999
         },
-        children: !breaksList || (breaksList == null ? void 0 : breaksList.length) === 0 ? /* @__PURE__ */ jsx3(MenuItem, { onClick: () => handleUpdateAgentStatus("Lunch"), children: "- Break" }) : breaksList == null ? void 0 : breaksList.map((item) => {
-          var _a3, _b2, _c2;
-          return /* @__PURE__ */ jsxs3(
-            MenuItem,
+        children: !breaksList || (breaksList == null ? void 0 : breaksList.length) === 0 ? /* @__PURE__ */ jsx2(MenuItem2, { onClick: () => handleUpdateAgentStatus("Lunch"), children: "- Break" }) : breaksList == null ? void 0 : breaksList.map((item) => {
+          var _a2, _b2, _c2;
+          return /* @__PURE__ */ jsxs2(
+            MenuItem2,
             {
               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",
+                backgroundColor: ((_a2 = state == null ? void 0 : state.callData) == null ? void 0 : _a2.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"
@@ -4607,8 +4096,8 @@ function CallControls({ onDataChange }) {
         })
       }
     ),
-    /* @__PURE__ */ jsx3(
-      Menu,
+    /* @__PURE__ */ jsx2(
+      Menu2,
       {
         anchorEl,
         open: Boolean(anchorEl),
@@ -4617,7 +4106,7 @@ function CallControls({ onDataChange }) {
         sx: {
           zIndex: 99999
         },
-        children: /* @__PURE__ */ jsxs3(
+        children: /* @__PURE__ */ jsxs2(
           Box2,
           {
             sx: {
@@ -4630,10 +4119,10 @@ function CallControls({ onDataChange }) {
               }
             },
             children: [
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx2(
                 Chip,
                 {
-                  icon: /* @__PURE__ */ jsx3(Layers, { color: "secondary" }),
+                  icon: /* @__PURE__ */ jsx2(Layers, { color: "secondary" }),
                   variant: "outlined",
                   label: "Waiting - 25",
                   sx: {
@@ -4641,10 +4130,10 @@ function CallControls({ onDataChange }) {
                   }
                 }
               ),
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx2(
                 Chip,
                 {
-                  icon: /* @__PURE__ */ jsx3(Pending, { color: "info" }),
+                  icon: /* @__PURE__ */ jsx2(Pending, { color: "info" }),
                   label: "Pending - 99+",
                   variant: "outlined",
                   sx: {
@@ -4652,10 +4141,10 @@ function CallControls({ onDataChange }) {
                   }
                 }
               ),
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx2(
                 Chip,
                 {
-                  icon: /* @__PURE__ */ jsx3(Upcoming2, { color: "success" }),
+                  icon: /* @__PURE__ */ jsx2(Upcoming2, { color: "success" }),
                   variant: "outlined",
                   label: "Upcoming - 66",
                   sx: {
@@ -4668,9 +4157,9 @@ function CallControls({ onDataChange }) {
         )
       }
     ),
-    Boolean(state.openConferenceDialog) && /* @__PURE__ */ jsx3(ConferenceDialog, {}),
-    Boolean(state.openCallTransferDialog) && /* @__PURE__ */ jsx3(CallTransferDialog, { open: state.openCallTransferDialog }),
-    Boolean(openCallDisposition) && /* @__PURE__ */ jsx3(
+    Boolean(state.openConferenceDialog) && /* @__PURE__ */ jsx2(ConferenceDialog, {}),
+    Boolean(state.openCallTransferDialog) && /* @__PURE__ */ jsx2(CallTransferDialog, { open: state.openCallTransferDialog }),
+    Boolean(openCallDisposition) && /* @__PURE__ */ jsx2(
       EndCallDispositionDialog,
       {
         open: openCallDisposition,
@@ -4678,7 +4167,7 @@ function CallControls({ onDataChange }) {
         onSubmitDisposition: handleEndCall
       }
     ),
-    Boolean(openCallHistoryDialog) && /* @__PURE__ */ jsx3(
+    Boolean(openCallHistoryDialog) && /* @__PURE__ */ jsx2(
       CallHistoryDialog,
       {
         open: openCallHistoryDialog,
@@ -4688,18 +4177,12 @@ function CallControls({ onDataChange }) {
   ] });
 }
 
-// call-control-sdk/lib/components/SDKProvider.tsx
-import { memo } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var SDKProvider = memo(({ children }) => {
-  return /* @__PURE__ */ jsx4(ToastProvider, { children });
-});
-SDKProvider.displayName = "SDKProvider";
-
 // call-control-sdk/lib/components/callControlPanel.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var CallControlPanel = memo2(({ onDataChange }) => {
-  const handleDataChange = useCallback6(
+import { jsx as jsx3 } from "react/jsx-runtime";
+var CallControlPanel = memo(({ onDataChange }) => {
+  var _a;
+  const { sdk } = useSDKState();
+  const handleDataChange = useCallback7(
     (data) => {
       try {
         if (onDataChange && typeof onDataChange === "function") {
@@ -4711,10 +4194,342 @@ var CallControlPanel = memo2(({ onDataChange }) => {
     },
     [onDataChange]
   );
-  return /* @__PURE__ */ jsx5(SDKProvider, { children: /* @__PURE__ */ jsx5(CallControls, { onDataChange: handleDataChange }) });
+  const sdkObject = sdk == null ? void 0 : sdk.calls;
+  const hasDialerAccess = (sdkObject == null ? void 0 : sdkObject.enabled) && ((_a = sdkObject == null ? void 0 : sdkObject.items) == null ? void 0 : _a.some(
+    (item) => item.code === SDK_PERMISSIONS.CALL_OUTBOUND || item.code === SDK_PERMISSIONS.CALL_INBOUND
+  ));
+  if (!hasDialerAccess) return null;
+  return /* @__PURE__ */ jsx3(SDKProvider, { children: /* @__PURE__ */ jsx3(CallControls, { onDataChange: handleDataChange }) });
 });
 CallControlPanel.displayName = "CallControlPanel";
 
+// call-control-sdk/lib/pages/sdkPages.tsx
+import React3 from "react";
+
+// call-control-sdk/lib/hooks/useSDKPermissions.ts
+import { useState as useState11, useEffect as useEffect6, useCallback as useCallback8 } from "react";
+function useSDKPermissions() {
+  var _a, _b;
+  const [state, setState] = useState11(() => sdkStateManager.getState());
+  useEffect6(() => {
+    const unsubscribe = sdkStateManager.subscribe(() => {
+      setState(sdkStateManager.getState());
+    });
+    return unsubscribe;
+  }, []);
+  const hasPermission = useCallback8(
+    (permission) => sdkStateManager.hasPermission(permission),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.userPermissions]
+  );
+  const hasAnyPermission = useCallback8(
+    (permissions) => sdkStateManager.hasAnyPermission(permissions),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.userPermissions]
+  );
+  const hasAllPermissions = useCallback8(
+    (permissions) => sdkStateManager.hasAllPermissions(permissions),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.userPermissions]
+  );
+  const hasMenuFeature = useCallback8(
+    (code) => sdkStateManager.hasMenuFeature(code),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.menuEntitlements]
+  );
+  return {
+    permissions: (_a = state.userPermissions) != null ? _a : [],
+    menuEntitlements: (_b = state.menuEntitlements) != null ? _b : [],
+    isLoaded: state.isPermissionsLoaded,
+    hasPermission,
+    hasAnyPermission,
+    hasAllPermissions,
+    hasMenuFeature
+  };
+}
+
+// call-control-sdk/lib/components/SDKAccessDenied.tsx
+import { Box as Box3, Typography as Typography3 } from "@mui/material";
+import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var SDKAccessDenied = ({
+  message = "You don't have permission to view this page."
+}) => /* @__PURE__ */ jsxs3(
+  Box3,
+  {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: 300,
+    gap: 2,
+    p: 4,
+    children: [
+      /* @__PURE__ */ jsx4(LockOutlinedIcon, { sx: { fontSize: 56, color: "text.disabled" } }),
+      /* @__PURE__ */ jsx4(Typography3, { variant: "h6", fontWeight: 600, color: "text.secondary", children: "Access Denied" }),
+      /* @__PURE__ */ jsx4(Typography3, { variant: "body2", color: "text.disabled", textAlign: "center", children: message })
+    ]
+  }
+);
+
+// call-control-sdk/lib/components/SDKPermissionGuard.tsx
+import { Fragment as Fragment3, jsx as jsx5 } from "react/jsx-runtime";
+var SDKPermissionGuard = ({
+  children,
+  permission,
+  permissions,
+  requireAll = false,
+  menuFeature,
+  requireAllMenus = false,
+  fallback,
+  showFallback = true,
+  onDenied
+}) => {
+  const { isLoaded, hasPermission, hasAnyPermission, hasAllPermissions, hasMenuFeature } = useSDKPermissions();
+  if (!isLoaded) return null;
+  const isAllowed = checkAccess({
+    permission,
+    permissions,
+    requireAll,
+    menuFeature,
+    requireAllMenus,
+    hasPermission,
+    hasAnyPermission,
+    hasAllPermissions,
+    hasMenuFeature
+  });
+  if (!isAllowed) {
+    onDenied == null ? void 0 : onDenied();
+    if (fallback !== void 0) return /* @__PURE__ */ jsx5(Fragment3, { children: fallback });
+    if (showFallback) return /* @__PURE__ */ jsx5(SDKAccessDenied, {});
+    return null;
+  }
+  return /* @__PURE__ */ jsx5(Fragment3, { children });
+};
+function checkAccess({
+  permission,
+  permissions,
+  requireAll,
+  menuFeature,
+  requireAllMenus,
+  hasPermission,
+  hasAnyPermission,
+  hasAllPermissions,
+  hasMenuFeature
+}) {
+  const menuCodes = menuFeature ? Array.isArray(menuFeature) ? menuFeature : [menuFeature] : [];
+  const hasNoGuards = !permission && (!permissions || permissions.length === 0) && menuCodes.length === 0;
+  if (hasNoGuards) return true;
+  if (menuCodes.length > 0) {
+    const menuGranted = requireAllMenus ? menuCodes.every((c) => hasMenuFeature(c)) : menuCodes.some((c) => hasMenuFeature(c));
+    if (!menuGranted) return false;
+  }
+  if (permission && !hasPermission(permission)) return false;
+  if (permissions && permissions.length > 0) {
+    const granted = requireAll ? hasAllPermissions(permissions) : hasAnyPermission(permissions);
+    if (!granted) return false;
+  }
+  return true;
+}
+
+// call-control-sdk/lib/pages/sdkPages.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function withGuard(menuCodes, loader) {
+  return React3.lazy(async () => {
+    const mod = await loader();
+    const Page = mod.default;
+    const Guarded = (props) => /* @__PURE__ */ jsx6(SDKPermissionGuard, { menuFeature: menuCodes, children: /* @__PURE__ */ jsx6(Page, __spreadValues({}, props)) });
+    return { default: Guarded };
+  });
+}
+var SDKPages = {
+  CallHistory: withGuard(SDK_MENU_CODES.CALL_HISTORY, () => import("./callHistory-TZ7SSXSN.mjs"))
+};
+
+// call-control-sdk/lib/hooks/useClickToConference.ts
+import { useCallback as useCallback9, useEffect as useEffect7, useRef as useRef3, useState as useState12 } from "react";
+import { getSession as getSession4 } from "@react-solutions/vault";
+var useClickToConference = () => {
+  const [loading, setLoading] = useState12(false);
+  const [success, setSuccess] = useState12(false);
+  const [isError, setIsError] = useState12(false);
+  const [error, setError] = useState12(null);
+  const [data, setData] = useState12(null);
+  const pendingLineRef = useRef3(null);
+  const prevConferenceRef = useRef3([]);
+  useEffect7(() => {
+    if (pendingLineRef.current === null) return;
+    const unsubscribe = sdkStateManager.subscribe(() => {
+      var _a;
+      const state = sdkStateManager.getState();
+      const targetLine = pendingLineRef.current;
+      if (targetLine === null) return;
+      const line = (_a = state.conferenceLine) == null ? void 0 : _a.find(
+        (l) => l.line === targetLine
+      );
+      if (line && line.status !== "IDLE") {
+        pendingLineRef.current = null;
+        prevConferenceRef.current = [];
+        sdkStateManager.setOpenConferenceDialog(true);
+      }
+    });
+    return unsubscribe;
+  }, [loading]);
+  const handleStartConferenceCall = useCallback9(
+    async (payload) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      const state = getSession4(STORAGE_KEY);
+      if (((_a = state == null ? void 0 : state.callData) == null ? void 0 : _a.status) !== "ONCALL") {
+        const msg = "Conference call requires an active call (ONCALL status)";
+        setIsError(true);
+        setError(new Error(msg));
+        throw new Error(msg);
+      }
+      const availableLine = payload.lineNumber != null ? (_b = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _b.find(
+        (l) => l.line === payload.lineNumber
+      ) : (_d = (_c = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _c.filter((l) => l.line !== 1)) == null ? void 0 : _d.find((l) => l.status === "IDLE" && !(l == null ? void 0 : l.isCallStart));
+      if (!availableLine) {
+        const msg = "No available conference line found";
+        setIsError(true);
+        setError(new Error(msg));
+        throw new Error(msg);
+      }
+      const requestPayload = {
+        action: "EXTERNAL_CONFERENCE",
+        operation: `CALL${availableLine.line}`,
+        target: payload.mobileNumber,
+        line_number: Number(availableLine.line),
+        userid: (_f = (_e = state.callData) == null ? void 0 : _e.agent_id) != null ? _f : -1,
+        process: (_h = (_g = state.callData) == null ? void 0 : _g.process_name) != null ? _h : ""
+      };
+      setLoading(true);
+      setIsError(false);
+      setError(null);
+      setSuccess(false);
+      pendingLineRef.current = availableLine.line;
+      return axios_default.post(END_POINT.CONFERENCE_CALL, requestPayload).then((res) => {
+        setData(res == null ? void 0 : res.data);
+        setSuccess(true);
+        return res == null ? void 0 : res.data;
+      }).catch((err) => {
+        var _a2;
+        pendingLineRef.current = null;
+        setIsError(true);
+        setError(err);
+        return (_a2 = err == null ? void 0 : err.response) == null ? void 0 : _a2.data;
+      }).finally(() => {
+        setLoading(false);
+      });
+    },
+    []
+  );
+  return {
+    handleStartConferenceCall,
+    isLoading: loading,
+    isSuccess: success,
+    isError,
+    error,
+    data
+  };
+};
+
+// call-control-sdk/lib/angular-services/index.ts
+import { getSession as getSession5, removeSession as removeSession2 } from "@react-solutions/vault";
+async function clickToCall(payload) {
+  const state = getSession5(STORAGE_KEY);
+  const body = {
+    action: "CALL",
+    userId: state == null ? void 0 : state.agentId,
+    phone_number: payload.mobileNumber
+  };
+  try {
+    const res = await axios_default.post(END_POINT.CLICK_TO_CALL, body);
+    sdkStateManager.resetConferenceLines();
+    if (!(res == null ? void 0 : res.success)) {
+      throw res;
+    }
+    return res.data;
+  } catch (err) {
+    throw err;
+  }
+}
+async function clickToConference(payload) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const state = getSession5(STORAGE_KEY);
+  const availableLine = payload.lineNumber != null ? (_a = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _a.find((l) => l.line === payload.lineNumber) : (_c = (_b = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _b.filter((l) => l.line !== 1)) == null ? void 0 : _c.find((l) => l.status === "IDLE" && !(l == null ? void 0 : l.isCallStart));
+  if (!availableLine) {
+    throw new Error("No available conference line found");
+  }
+  const body = {
+    action: "EXTERNAL_CONFERENCE",
+    operation: `CALL${availableLine.line}`,
+    target: payload.mobileNumber,
+    line_number: Number(availableLine.line),
+    userid: (_e = (_d = state.callData) == null ? void 0 : _d.agent_id) != null ? _e : -1,
+    process: (_g = (_f = state.callData) == null ? void 0 : _f.process_name) != null ? _g : ""
+  };
+  try {
+    const res = await axios_default.post(END_POINT.CONFERENCE_CALL, body);
+    sdkStateManager.setOpenConferenceDialog(true);
+    if (!(res == null ? void 0 : res.success)) {
+      throw res;
+    }
+    return res.data;
+  } catch (err) {
+    throw new Error((_j = (_i = (_h = err == null ? void 0 : err.response) == null ? void 0 : _h.data) == null ? void 0 : _i.message) != null ? _j : "Conference call API failed");
+  }
+}
+async function endCall(options = {}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  const state = getSession5(STORAGE_KEY);
+  const body = {
+    action: "ENDCALL",
+    userId: state == null ? void 0 : state.agentId,
+    processid: (_c = (_b = (_a = state == null ? void 0 : state.process) == null ? void 0 : _a.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 = options.disposition) != null ? _j : "RES",
+    set_followUp: (_k = options.followUp) != null ? _k : "N",
+    callback_date: (_l = options.callbackDate) != null ? _l : "",
+    callback_hrs: (_m = options.callbackHrs) != null ? _m : "",
+    callback_mins: (_n = options.callbackMins) != null ? _n : "",
+    endcall_type: "CLOSE",
+    patient_enquiry: (_o = options.patientLog) != null ? _o : null
+  };
+  const res = await axios_default.post(END_POINT.END_CALL, body, {
+    params: { isBreak: (_p = options.isBreak) != null ? _p : false }
+  });
+  sdkStateManager.resetConferenceLines();
+  sdkStateManager.endCall();
+  return res.data;
+}
+async function logout() {
+  var _a, _b;
+  let logoutError;
+  try {
+    await axios_default.post(END_POINT.AUTH_LOGOUT);
+  } catch (err) {
+    logoutError = new Error(((_b = (_a = err == null ? void 0 : err.response) == null ? void 0 : _a.data) == null ? void 0 : _b.message) || "Logout failed. Please try again.");
+  } finally {
+    sdkStateManager.clearStorageAndReset();
+    removeSession2(STORAGE_KEY);
+  }
+  if (logoutError) throw logoutError;
+}
+async function startMonitoring(payload) {
+  const res = await axios_default.post(END_POINT.SUPERVISOR_CALL_LISTEN, payload);
+  return res.data;
+}
+async function stopMonitoring(payload) {
+  const res = await axios_default.post(END_POINT.SUPERVISOR_CALL_LEAVE, payload);
+  return res.data;
+}
+async function changeMonitorMode(payload) {
+  const res = await axios_default.post(END_POINT.SUPERVISOR_CALL_CHANGE_MODE, payload);
+  return res.data;
+}
+
 // call-control-sdk/index.ts
 async function initSDK({
   apiKey,
@@ -4754,7 +4569,8 @@ async function initSDK({
       accessToken: initResult.accessToken,
       expiration: initResult.expiration,
       ticketId: initResult.ticketId,
-      callControls: callcontrolConfig
+      callControls: callcontrolConfig,
+      userInfo: initResult.userInfo
     };
     console.info("SDK initialized successfully");
     sdkStateManager.initialize(
@@ -4781,15 +4597,31 @@ function isSDKInitialized() {
 }
 export {
   CallControlPanel,
+  SDKAccessDenied,
+  SDKPages,
+  SDKPermissionGuard,
+  SDK_MENU_CODES,
   SDK_PERMISSIONS,
+  SDK_WILDCARD,
+  changeMonitorMode,
+  clickToCall,
+  clickToConference,
+  endCall,
   getSDKVersion,
   initSDK,
   isSDKInitialized,
+  logout,
+  sdkStateManager,
+  startMonitoring,
+  stopMonitoring,
+  useCallMonitoring,
   useClickToCall,
+  useClickToConference,
   useEndCall,
   useGetAuthorizationToken,
   useGetCallerData,
   useLogout,
+  useSDKPermissions,
   useSDKState
 };
 //# sourceMappingURL=index.mjs.map