call-control-sdk 4.0.0 → 5.0.0

package/dist/index.mjs

@@ -20,44 +20,40 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // call-control-sdk/lib/components/callControlPanel.tsx
-import { useEffect as useEffect2, useState as useState5, useCallback as useCallback3 } from "react";
 import {
-  Paper as Paper2,
-  IconButton as IconButton2,
-  Typography as Typography2,
-  Menu,
-  Box as Box2,
-  Tooltip,
-  Fade,
-  useTheme,
-  Button as Button2,
-  Chip,
-  TextField as TextField2,
-  ButtonGroup,
-  MenuItem
-} from "@mui/material";
-import {
-  PauseCircle as PauseCircle2,
-  PlayCircle,
-  Mic,
-  MicOff,
+  ArrowDropDown,
   CallEnd as CallEnd2,
-  Groups,
+  Close as Close2,
   DragIndicator,
-  WifiCalling3,
+  Group,
+  History,
   Layers,
-  Phone,
-  Close as Close2,
+  Mic as Mic2,
+  MicOff as MicOff2,
+  Pause as Pause2,
   Pending,
-  Upcoming,
-  ArrowDropDown,
+  Phone,
+  PlayArrow as PlayArrow2,
   SupportAgent as SupportAgent2,
-  Tty,
-  TransferWithinAStation
+  TransferWithinAStation,
+  Upcoming,
+  WifiCalling3
 } from "@mui/icons-material";
-
-// call-control-sdk/lib/hooks/useSDKState.ts
-import { useState, useEffect } from "react";
+import {
+  Box as Box2,
+  Button as Button2,
+  Chip,
+  Fade,
+  IconButton as IconButton2,
+  Menu,
+  MenuItem,
+  Paper as Paper2,
+  TextField as TextField2,
+  Tooltip as Tooltip2,
+  Typography as Typography2,
+  useTheme as useTheme3
+} from "@mui/material";
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2, useState as useState5 } from "react";
 
 // call-control-sdk/lib/hooks/sdk-state.ts
 var SDKStateManager = class {
@@ -71,18 +67,74 @@ var SDKStateManager = class {
   getInitialState() {
     return {
       apiKey: null,
+      process: null,
+      agentId: "",
       isInitialized: false,
       isHolding: false,
       isMuted: false,
       status: "idle",
       callStartTime: null,
-      controlPanelPosition: { x: 0, y: 0 },
-      iframePosition: { x: 0, y: 0 },
+      controlPanelPosition: { x: 10, y: 10 },
+      iframePosition: { x: 10, y: 80 },
       callData: {
-        mobileNumber: "",
-        callReferenceId: "",
-        agentLoginId: ""
-      }
+        agent_id: "",
+        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
+        }
+      ]
     };
   }
   loadFromStorage() {
@@ -91,15 +143,26 @@ var SDKStateManager = class {
       if (stored) {
         const parsedState = JSON.parse(stored);
         this.state = __spreadProps(__spreadValues({}, this.state), {
+          apiKey: parsedState.apiKey || "",
+          agentId: parsedState.agentId || "",
+          process: parsedState.process || null,
+          isInitialized: parsedState.isInitialized || false,
           isHolding: parsedState.isHolding || false,
           isMuted: parsedState.isMuted || false,
           status: parsedState.status || "idle",
+          callStartTime: parsedState.callStartTime || null,
           controlPanelPosition: parsedState.controlPanelPosition || {
-            x: 50,
-            y: 50
+            x: 10,
+            y: 10
           },
-          iframePosition: parsedState.iframePosition || { x: 50, y: 50 },
-          callStartTime: parsedState.callStartTime || null
+          iframePosition: parsedState.iframePosition || { x: 10, y: 80 },
+          callData: parsedState.callData || {
+            mobileNumber: "",
+            callReferenceId: "",
+            agentLoginId: ""
+          },
+          // Fix: Properly handle conferenceLine with fallback to initial state
+          conferenceLine: parsedState.conferenceLine && Array.isArray(parsedState.conferenceLine) && parsedState.conferenceLine.length > 0 ? parsedState.conferenceLine : this.state.conferenceLine
         });
       }
     } catch (error) {
@@ -109,12 +172,18 @@ var SDKStateManager = class {
   saveToStorage() {
     try {
       const persistentState = {
+        apiKey: this.state.apiKey,
+        agentId: this.state.agentId,
+        process: this.state.process,
+        isInitialized: this.state.isInitialized,
         isHolding: this.state.isHolding,
         isMuted: this.state.isMuted,
         status: this.state.status,
+        callStartTime: this.state.callStartTime,
         controlPanelPosition: this.state.controlPanelPosition,
         iframePosition: this.state.iframePosition,
-        callStartTime: this.state.callStartTime
+        callData: this.state.callData,
+        conferenceLine: this.state.conferenceLine
       };
       localStorage.setItem(this.STORAGE_KEY, JSON.stringify(persistentState));
     } catch (error) {
@@ -124,12 +193,14 @@ var SDKStateManager = class {
   notifyListeners() {
     this.listeners.forEach((listener) => listener());
   }
-  initialize(apiKey) {
+  initialize(apiKey, agentId) {
     if (!apiKey || typeof apiKey !== "string" || apiKey.trim().length === 0) {
       throw new Error("API key not available");
     }
     this.state.apiKey = apiKey;
+    this.state.agentId = agentId;
     this.state.isInitialized = true;
+    this.saveToStorage();
     this.notifyListeners();
   }
   getState() {
@@ -159,6 +230,11 @@ var SDKStateManager = class {
     this.saveToStorage();
     this.notifyListeners();
   }
+  setProcess(process) {
+    this.state.process = process;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
   setControlPanelPosition(position) {
     this.state.controlPanelPosition = position;
     this.saveToStorage();
@@ -185,33 +261,64 @@ var SDKStateManager = class {
   }
   updateCallData(data) {
     this.state.callData = __spreadValues(__spreadValues({}, this.state.callData), data);
+    this.saveToStorage();
     this.notifyListeners();
   }
+  setConferenceLine(line) {
+    var _a;
+    if (!this.state.conferenceLine || !Array.isArray(this.state.conferenceLine)) {
+      console.warn("Conference line data corrupted, resetting to initial state");
+      this.state.conferenceLine = this.getInitialState().conferenceLine;
+    }
+    const conferenceLineData = (_a = this.state.conferenceLine) == null ? void 0 : _a.map((each) => {
+      if (each.line === line.line) {
+        return line;
+      }
+      return each;
+    });
+    this.state.conferenceLine = conferenceLineData;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  resetConferenceLines() {
+    this.state.conferenceLine = this.getInitialState().conferenceLine;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  clearStorageAndReset() {
+    try {
+      localStorage.removeItem(this.STORAGE_KEY);
+      this.state = this.getInitialState();
+      this.notifyListeners();
+    } catch (error) {
+      console.warn("Failed to clear localStorage:", error);
+    }
+  }
+  // Debug methods
+  debugStorage() {
+    try {
+      const stored = localStorage.getItem(this.STORAGE_KEY);
+      console.log("Current localStorage data:", stored);
+      if (stored) {
+        console.log("Parsed localStorage data:", JSON.parse(stored));
+      }
+      console.log("Current state:", this.state);
+    } catch (error) {
+      console.error("Error debugging storage:", error);
+    }
+  }
+  getConferenceLines() {
+    return this.state.conferenceLine || [];
+  }
 };
 var sdkStateManager = new SDKStateManager();
 
-// call-control-sdk/lib/hooks/useSDKState.ts
-function useSDKState() {
-  const [state, setState] = useState(sdkStateManager.getState());
-  useEffect(() => {
-    const unsubscribe = sdkStateManager.subscribe(() => {
-      setState(sdkStateManager.getState());
-    });
-    return unsubscribe;
-  }, []);
-  return state;
-}
-
 // call-control-sdk/lib/hooks/useDraggable.ts
-import {
-  useState as useState2,
-  useRef,
-  useCallback
-} from "react";
+import { useCallback, useRef, useState } from "react";
 function useDraggable(initialPosition, onPositionChange) {
-  const [position, setPosition] = useState2(initialPosition);
-  const [isDragging, setIsDragging] = useState2(false);
-  const dragRef = useRef(null);
+  const [position, setPosition] = useState(initialPosition);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragRef = useRef();
   const dragStart = useRef({ x: 0, y: 0 });
   const elementStart = useRef({ x: 0, y: 0 });
   const updatePosition = useCallback(
@@ -296,14 +403,22 @@ function useDraggable(initialPosition, onPositionChange) {
   };
 }
 
-// call-control-sdk/lib/services/request.ts
-import { useCallback as useCallback2, useReducer } from "react";
-
-// call-control-sdk/lib/services/axios.ts
-import axios from "axios";
+// call-control-sdk/lib/hooks/useSDKState.ts
+import { useState as useState2, useEffect } from "react";
+function useSDKState() {
+  const [state, setState] = useState2(sdkStateManager.getState());
+  useEffect(() => {
+    const unsubscribe = sdkStateManager.subscribe(() => {
+      setState(sdkStateManager.getState());
+    });
+    return unsubscribe;
+  }, []);
+  return state;
+}
 
 // call-control-sdk/lib/services/endPoint.ts
-var BASE_URL = "http://192.168.100.143:3010";
+var BASE_URL = "http://192.168.100.143:8095";
+var WS_BASE_URL = "ws://192.168.100.143:8095";
 var VERSION = {
   v1: "/api/v1"
 };
@@ -316,15 +431,26 @@ var END_POINT = {
   MUTE_CALL: `${BASE_URL}${VERSION.v1}/cti/mute-call?provider=convox`,
   UNMUTE_CALL: `${BASE_URL}${VERSION.v1}/cti/unmute-call?provider=convox`,
   END_CALL: `${BASE_URL}${VERSION.v1}/cti/end-call?provider=convox`,
-  LOGOUT: `${BASE_URL}${VERSION.v1}/cti//logout?provider=convox`,
+  LOGOUT: `${BASE_URL}${VERSION.v1}/cti/logout?provider=convox`,
   CONFERENCE_CALL: `${BASE_URL}${VERSION.v1}/cti/conference-call?provider=convox`,
   CONFERENCE_CALL_HOLD_OR_UN_HOLD: `${BASE_URL}${VERSION.v1}/cti/conference-call/hold-unhold?provider=convox`,
   CONFERENCE_CALL_MUTE_OT_UN_MUTE: `${BASE_URL}${VERSION.v1}/cti/conference-call/mute-unmute?provider=convox`,
   CONFERENCE_CALL_END: `${BASE_URL}${VERSION.v1}/cti/conference-call/hangup?provider=convox`,
-  TRANSFER_CALL: `${BASE_URL}${VERSION.v1}/cti/transfer?provider=convox`
+  CONFERENCE_CALL_END_ALL: `${BASE_URL}${VERSION.v1}/cti/conference-call/hangup-all-call?provider=convox`,
+  TRANSFER_CALL: `${BASE_URL}${VERSION.v1}/cti/transfer?provider=convox`,
+  AGENTS_LIST: `${BASE_URL}${VERSION.v1}/cti/users`,
+  PROCESS_LIST: `${BASE_URL}${VERSION.v1}/cti/processes-list`,
+  TRANSFER_TO_DETAILS: `${BASE_URL}${VERSION.v1}/cti/trasnfer-to-details?provider=convox`
+};
+var WS_END_POINT = {
+  WS: `${WS_BASE_URL}${VERSION.v1}/cti/ws`
 };
 
+// call-control-sdk/lib/services/request.ts
+import { useCallback as useCallback2, useReducer } from "react";
+
 // call-control-sdk/lib/services/axios.ts
+import axios from "axios";
 var token = "12345";
 var axiosInstance = axios.create({
   baseURL: BASE_URL,
@@ -454,21 +580,11 @@ var usePostRequest = (props = {}) => {
         payload: true
       });
       axios_default.post(url, payload, config).then((res) => {
-        var _a, _b;
-        if ((_a = res.data) == null ? void 0 : _a.success) {
-          dispatch({
-            type: "isSuccess",
-            payload: res.data
-          });
-          onSuccess == null ? void 0 : onSuccess(res.data, payload);
-        } else {
-          dispatch({
-            type: "isError",
-            payload: res.data
-          });
-          showToast((_b = res.data) == null ? void 0 : _b.message, "error");
-          onError == null ? void 0 : onError(res.data, payload);
-        }
+        dispatch({
+          type: "isSuccess",
+          payload: res.data
+        });
+        onSuccess == null ? void 0 : onSuccess(res.data, payload);
       }).catch((err) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
         const error = {
@@ -504,10 +620,11 @@ import {
   CallEnd,
   CallSplit,
   Close,
-  Group,
-  Logout,
-  PauseCircle,
+  Mic,
+  MicOff,
+  Pause,
   PhoneDisabled,
+  PlayArrow,
   SupportAgent
 } from "@mui/icons-material";
 import {
@@ -516,27 +633,191 @@ import {
   Dialog,
   IconButton,
   Paper,
-  Radio,
-  Stack,
   TextField,
   Typography,
   Autocomplete,
-  Grid
+  Grid,
+  Tooltip,
+  useTheme as useTheme2
 } from "@mui/material";
-import { useState as useState4 } from "react";
+import { useEffect as useEffect2, useState as useState4 } from "react";
+
+// call-control-sdk/lib/components/styles.ts
+import { useTheme } from "@mui/material";
+var useMyStyles = () => {
+  const theme = useTheme();
+  return {
+    disabled: {
+      padding: "0px",
+      margin: "0px",
+      minWidth: "40px !important",
+      borderRadius: "16px",
+      border: `1px solid rgb(206, 204, 204)`,
+      height: "40px",
+      "&:hover": {
+        boxShadow: " 0px 2px 2px rgba(0, 0, 0, 0.79)",
+        border: `1px solid ${theme.palette.primary.main}`
+      },
+      "&:active": {
+        bgcolor: "primary.main",
+        boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
+      }
+    },
+    enabled: {
+      padding: "0px",
+      margin: "0px",
+      minWidth: "40px !important",
+      borderRadius: "16px",
+      boxShadow: " 0px 2px 1px rgba(0, 0, 0, 0.507)",
+      border: `1px solid ${theme.palette.primary.main}`,
+      height: "40px",
+      "&:hover": {
+        boxShadow: " 0px 2px 1px rgba(0, 0, 0, 0.507)",
+        border: `1px solid ${theme.palette.primary.main}`
+      },
+      "&:active": {
+        bgcolor: "primary.main",
+        boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
+      }
+    },
+    outlined: {
+      padding: "0px",
+      margin: "0px",
+      minWidth: "40px !important",
+      borderRadius: "16px",
+      backgroundColor: theme.palette.grey[200],
+      boxShadow: `0px 2px 1px ${theme.palette.primary.light}`,
+      border: `0px solid ${theme.palette.primary.main}`,
+      height: "40px",
+      "&:hover": {
+        boxShadow: `0px 2px 1px ${theme.palette.primary.main}`,
+        border: `0px solid ${theme.palette.primary.main}`
+      },
+      "&:active": {
+        bgcolor: "primary.main",
+        boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
+      }
+    }
+  };
+};
+var styles_default = useMyStyles;
+
+// call-control-sdk/lib/components/dialog.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-function ConferenceDialog({
-  agentName = "agent_ravi",
-  lines = [],
-  onConference,
-  onExit,
-  onEndAllCalls,
-  open,
-  setOpen
-}) {
+function ConferenceDialog({ open, setOpen }) {
+  var _a, _b;
+  const state = useSDKState();
+  const { disabled, enabled, outlined } = styles_default();
+  const theme = useTheme2();
   const handleClose = () => {
     setOpen(false);
   };
+  const onConferenceLineUpdate = (line, data) => {
+    sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
+  };
+  const onConferenceCallStart = (line, data) => {
+    var _a2, _b2, _c, _d;
+    const line_used = __spreadValues(__spreadValues({}, line), data);
+    const payload = {
+      action: "EXTERNAL_CONFERENCE",
+      operation: `CALL${line_used.line}`,
+      line_used: String(line_used.line),
+      thirdparty_no: line_used.phone,
+      userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : "",
+      process: (_d = (_c = state.callData) == null ? void 0 : _c.process_name) != null ? _d : ""
+    };
+    axios_default.post(END_POINT.CONFERENCE_CALL, payload).then(() => {
+      sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
+    });
+  };
+  const onMergeConferenceCall = (line, data) => {
+    var _a2, _b2, _c, _d;
+    const line_used = __spreadValues(__spreadValues({}, line), data);
+    const payload = {
+      action: "EXTERNAL_CONFERENCE",
+      operation: `CONFERENCE`,
+      line_used: String(line_used.line),
+      thirdparty_no: line_used.phone,
+      userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : "",
+      process: (_d = (_c = state.callData) == null ? void 0 : _c.process_name) != null ? _d : ""
+    };
+    axios_default.post(END_POINT.CONFERENCE_CALL, payload).then(() => {
+      sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
+    });
+  };
+  const onHoldOrUnHoldConferenceCall = (line, data, type) => {
+    var _a2, _b2, _c, _d;
+    const line_used = __spreadValues(__spreadValues({}, line), data);
+    const payload = {
+      action: "EXTERNAL_CONFERENCE",
+      operation: type,
+      hold_channel_no: type === "HOLDUSER" ? `hold${line_used.line}` : `unhold${line_used.line}`,
+      // Change the line according where u intiated firstly
+      userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : "",
+      process: (_d = (_c = state.callData) == null ? void 0 : _c.process_name) != null ? _d : ""
+    };
+    axios_default.post(END_POINT.CONFERENCE_CALL_HOLD_OR_UN_HOLD, payload).then(() => {
+      sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
+    });
+  };
+  const onMuteOrUnMuteConferenceCall = (line, data, type) => {
+    var _a2, _b2, _c, _d;
+    const line_used = __spreadValues(__spreadValues({}, line), data);
+    const payload = {
+      action: "EXTERNAL_CONFERENCE",
+      operation: type,
+      channel_no: type === "MUTEUSER" ? `mute${line_used.line}` : `play${line_used.line}`,
+      userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : "",
+      thirdparty_no: line_used.phone,
+      process: (_d = (_c = state.callData) == null ? void 0 : _c.process_name) != null ? _d : ""
+    };
+    axios_default.post(END_POINT.CONFERENCE_CALL_MUTE_OT_UN_MUTE, payload).then(() => {
+      sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
+    });
+  };
+  const onEndConferenceCall = (line, data) => {
+    var _a2, _b2, _c, _d;
+    const line_used = __spreadValues(__spreadValues({}, line), data);
+    const payload = {
+      action: "EXTERNAL_CONFERENCE",
+      operation: "HANGUP_CHANNEL",
+      line_used: String(line_used.line - 1),
+      user_type: `THIRDPARTY${line_used.line - 1}`,
+      thirdparty_no: line_used.phone,
+      userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : "",
+      process: (_d = (_c = state.callData) == null ? void 0 : _c.process_name) != null ? _d : ""
+    };
+    axios_default.post(END_POINT.CONFERENCE_CALL_END, payload).then(() => {
+      sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
+    });
+  };
+  const onEndAllConferenceCalls = () => {
+    var _a2, _b2, _c, _d;
+    const payload = {
+      action: "EXTERNAL_CONFERENCE",
+      operation: "ENDCONFERENCE",
+      userid: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.agent_id) != null ? _b2 : "",
+      process: (_d = (_c = state.callData) == null ? void 0 : _c.process_name) != null ? _d : ""
+    };
+    axios_default.post(END_POINT.CONFERENCE_CALL_END_ALL, payload).then(() => {
+      sdkStateManager.resetConferenceLines();
+      handleClose();
+    });
+  };
+  useEffect2(() => {
+    var _a2, _b2, _c, _d;
+    const obj = {
+      line: 1,
+      status: (_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) != null ? _b2 : "",
+      type: "internal",
+      phone: (_d = (_c = state.callData) == null ? void 0 : _c.phone_number) != null ? _d : "",
+      isMute: false,
+      isHold: false,
+      isMergeCall: false,
+      isCallStart: true
+    };
+    sdkStateManager.setConferenceLine(obj);
+  }, []);
   return /* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsx2(
     Dialog,
     {
@@ -557,214 +838,276 @@ function ConferenceDialog({
             },
             children: [
               /* @__PURE__ */ jsxs(Typography, { variant: "body1", children: [
-                agentName,
-                " Conference"
+                (_a = state == null ? void 0 : state.agentId) != null ? _a : "",
+                " conference"
               ] }),
               /* @__PURE__ */ jsx2(IconButton, { onClick: handleClose, children: /* @__PURE__ */ jsx2(Close, {}) })
             ]
           }
         ),
-        /* @__PURE__ */ jsx2(
-          Stack,
-          {
-            direction: "row",
-            alignItems: "center",
-            justifyContent: "flex-end",
-            mr: 2,
-            children: /* @__PURE__ */ jsxs(
-              Stack,
-              {
-                display: "flex",
-                direction: "row",
-                alignItems: "center",
-                justifyContent: "center",
-                spacing: 1,
-                children: [
-                  /* @__PURE__ */ jsxs(
-                    Button,
-                    {
-                      variant: "contained",
-                      color: "success",
-                      onClick: onConference,
-                      sx: {
-                        borderRadius: "10px",
-                        textTransform: "capitalize"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx2(Group, { sx: { px: 0.5 } }),
-                        "Conference"
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    Button,
-                    {
-                      variant: "contained",
-                      color: "error",
-                      onClick: onExit,
-                      sx: {
-                        borderRadius: "10px",
-                        textTransform: "capitalize"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx2(Logout, { sx: { px: 0.5 } }),
-                        "Exit Conference"
-                      ]
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        ),
         /* @__PURE__ */ jsx2(
           Box,
           {
             sx: {
               boxShadow: "0px 1px 2px #e7e5e5ff",
-              padding: "6px",
+              padding: "2px 6px",
               margin: "0px 10px",
               borderRadius: "20px"
             },
-            children: lines.map((line, index) => /* @__PURE__ */ jsxs(
-              Box,
-              {
-                sx: {
-                  p: 1,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  gap: 1
-                },
-                children: [
-                  /* @__PURE__ */ jsx2(
-                    Box,
-                    {
-                      sx: {
-                        color: "white",
-                        bgcolor: "warning.main",
-                        fontWeight: "bold",
-                        fontSize: 14,
-                        minWidth: 70,
-                        textAlign: "center",
-                        border: "2px solid primary.main",
-                        borderRadius: "10px 50px 50px 10px"
-                      },
-                      children: /* @__PURE__ */ jsxs(Typography, { children: [
-                        "Line ",
-                        index + 1
-                      ] })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx2(
-                    Typography,
-                    {
-                      variant: "body2",
-                      sx: {
-                        px: 1,
-                        border: "2px solid gray",
-                        borderRadius: "10px",
-                        textAlign: "center",
-                        width: "80px",
-                        maxWidth: "100px"
-                      },
-                      children: line.status
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
-                    /* @__PURE__ */ jsx2(Radio, { checked: line.type === "Internal" }),
-                    /* @__PURE__ */ jsx2(Typography, { variant: "body2", children: "Internal" })
-                  ] }),
-                  /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
-                    /* @__PURE__ */ jsx2(Radio, { checked: line.type === "External" }),
-                    /* @__PURE__ */ jsx2(Typography, { variant: "body2", children: "External" })
-                  ] }),
-                  /* @__PURE__ */ jsx2(
-                    TextField,
-                    {
-                      size: "small",
-                      placeholder: "Phone Number",
-                      value: line.phone || ""
-                    }
-                  ),
-                  /* @__PURE__ */ jsx2(
-                    IconButton,
-                    {
-                      color: "success",
-                      sx: {
-                        bgcolor: "action.hover",
-                        "&:hover": { bgcolor: "action.selected" }
-                      },
-                      children: /* @__PURE__ */ jsx2(Call, {})
-                    }
-                  ),
-                  /* @__PURE__ */ jsx2(
-                    IconButton,
-                    {
-                      color: "info",
-                      sx: {
-                        bgcolor: "action.hover",
-                        "&:hover": { bgcolor: "action.selected" }
-                      },
-                      children: /* @__PURE__ */ jsx2(CallSplit, {})
-                    }
-                  ),
-                  /* @__PURE__ */ jsx2(
-                    IconButton,
-                    {
-                      color: "warning",
-                      sx: {
-                        bgcolor: "action.hover",
-                        "&:hover": { bgcolor: "action.selected" }
-                      },
-                      children: /* @__PURE__ */ jsx2(PauseCircle, {})
-                    }
-                  ),
-                  /* @__PURE__ */ jsx2(
-                    IconButton,
-                    {
-                      color: "error",
-                      sx: {
-                        bgcolor: "action.hover",
-                        "&:hover": { bgcolor: "action.selected" }
-                      },
-                      children: /* @__PURE__ */ jsx2(CallEnd, {})
-                    }
-                  )
-                ]
-              },
-              index
-            ))
-          }
-        ),
-        /* @__PURE__ */ jsx2(Box, { textAlign: "center", m: 2, children: /* @__PURE__ */ jsxs(
-          Button,
-          {
-            variant: "outlined",
-            color: "error",
-            size: "large",
-            onClick: onEndAllCalls,
-            sx: { px: 2, borderRadius: "20px", textTransform: "capitalize" },
-            children: [
-              /* @__PURE__ */ jsx2(
-                IconButton,
+            children: (_b = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _b.map((each, index) => {
+              var _a2, _b2;
+              return /* @__PURE__ */ jsxs(
+                Box,
                 {
                   sx: {
-                    bgcolor: "error.main",
-                    "&:hover": { bgcolor: "error.dark" },
-                    marginRight: "8px",
-                    width: "28px",
-                    height: "28px",
-                    fontSize: "12px",
-                    fontWeight: "600",
-                    lineHeight: "16px",
-                    letterSpacing: "0.02em",
-                    textTransform: "capitalize",
-                    color: "white",
+                    p: 1,
                     display: "flex",
                     alignItems: "center",
-                    justifyContent: "center",
-                    borderRadius: "50%"
+                    justifyContent: "space-between",
+                    gap: 1
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx2(
+                      Box,
+                      {
+                        sx: {
+                          color: "white",
+                          bgcolor: "warning.main",
+                          fontWeight: "bold",
+                          fontSize: 14,
+                          minWidth: 70,
+                          textAlign: "center",
+                          border: "2px solid primary.main",
+                          borderRadius: "10px 50px 50px 10px"
+                        },
+                        children: /* @__PURE__ */ jsx2(Typography, { children: (_a2 = each == null ? void 0 : each.line) != null ? _a2 : "" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      Typography,
+                      {
+                        variant: "body2",
+                        sx: {
+                          px: 1,
+                          border: "2px solid gray",
+                          borderRadius: "10px",
+                          textAlign: "center",
+                          width: "80px",
+                          maxWidth: "100px"
+                        },
+                        children: (_b2 = each == null ? void 0 : each.status) != null ? _b2 : ""
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      Button,
+                      {
+                        sx: {
+                          textTransform: "capitalize"
+                        },
+                        size: "small",
+                        children: /* @__PURE__ */ jsx2(Typography, { variant: "body2", children: (each == null ? void 0 : each.line) === 1 ? "Internal" : "External" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      TextField,
+                      {
+                        size: "small",
+                        placeholder: "Phone Number",
+                        value: (each == null ? void 0 : each.phone) || "",
+                        disabled: (each == null ? void 0 : each.line) === 1,
+                        onChange: (e) => {
+                          onConferenceLineUpdate(each, { phone: e.target.value });
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(Tooltip, { title: "Call", children: /* @__PURE__ */ jsx2(
+                      Button,
+                      {
+                        variant: (each == null ? void 0 : each.isCallStart) ? "outlined" : "contained",
+                        color: "success",
+                        sx: (each == null ? void 0 : each.isCallStart) ? __spreadValues({}, disabled) : __spreadProps(__spreadValues({}, enabled), {
+                          border: `0px solid ${theme.palette.success.light}`,
+                          "&:hover": {
+                            bgcolor: "error.light",
+                            boxShadow: `0px 2px 1px ${theme.palette.success.light}`,
+                            border: `0px solid ${theme.palette.success.light}`
+                          },
+                          "&:active": {
+                            bgcolor: "error.light",
+                            boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
+                          }
+                        }),
+                        onClick: () => {
+                          onConferenceCallStart(each, {
+                            isCallStart: true,
+                            status: "ONCALL"
+                          });
+                        },
+                        disabled: each == null ? void 0 : each.isCallStart,
+                        children: /* @__PURE__ */ jsx2(
+                          Call,
+                          {
+                            sx: { color: (each == null ? void 0 : each.isCallStart) ? "defalult" : "#fff" }
+                          }
+                        )
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx2(Tooltip, { title: "Merge Call", children: /* @__PURE__ */ jsx2(
+                      Button,
+                      {
+                        variant: (each == null ? void 0 : each.isMergeCall) ? "contained" : "outlined",
+                        sx: (each == null ? void 0 : each.isMergeCall) && (each == null ? void 0 : each.isCallStart) ? __spreadValues({}, disabled) : (each == null ? void 0 : each.isCallStart) ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                        onClick: () => {
+                          onMergeConferenceCall(each, {
+                            isMergeCall: true,
+                            status: "ONCALL"
+                          });
+                        },
+                        disabled: !(each == null ? void 0 : each.isCallStart),
+                        children: /* @__PURE__ */ jsx2(CallSplit, {})
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx2(Tooltip, { title: each.isHold ? "Hold" : "Un Hold", children: /* @__PURE__ */ jsx2(
+                      Button,
+                      {
+                        variant: (each == null ? void 0 : each.isHold) ? "contained" : "outlined",
+                        sx: (each == null ? void 0 : each.isHold) && (each == null ? void 0 : each.isCallStart) ? __spreadValues({}, disabled) : (each == null ? void 0 : each.isCallStart) ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                        onClick: () => {
+                          if (each.isHold) {
+                            onHoldOrUnHoldConferenceCall(
+                              each,
+                              { isHold: false },
+                              "UNHOLDUSER"
+                            );
+                          } else {
+                            onHoldOrUnHoldConferenceCall(
+                              each,
+                              { isHold: true },
+                              "HOLDUSER"
+                            );
+                          }
+                        },
+                        disabled: !(each == null ? void 0 : each.isCallStart),
+                        children: each.isHold ? /* @__PURE__ */ jsx2(PlayArrow, {}) : /* @__PURE__ */ jsx2(Pause, {})
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx2(Tooltip, { title: each.isMute ? "Mute" : "Un Mute", children: /* @__PURE__ */ jsx2(
+                      Button,
+                      {
+                        variant: (each == null ? void 0 : each.isMute) ? "contained" : "outlined",
+                        sx: (each == null ? void 0 : each.isMute) && (each == null ? void 0 : each.isCallStart) ? __spreadValues({}, disabled) : (each == null ? void 0 : each.isCallStart) ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                        onClick: () => {
+                          if (each.isMute) {
+                            onMuteOrUnMuteConferenceCall(
+                              each,
+                              { isMute: false },
+                              "PLAYUSER"
+                            );
+                          } else {
+                            onMuteOrUnMuteConferenceCall(
+                              each,
+                              { isMute: true },
+                              "MUTEUSER"
+                            );
+                          }
+                        },
+                        disabled: !(each == null ? void 0 : each.isCallStart),
+                        children: each.isMute ? /* @__PURE__ */ jsx2(MicOff, {}) : /* @__PURE__ */ jsx2(Mic, {})
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx2(Tooltip, { title: "End Call", children: (each == null ? void 0 : each.line) !== 1 ? /* @__PURE__ */ jsx2(
+                      Button,
+                      {
+                        variant: (each == null ? void 0 : each.isCallStart) ? "contained" : "outlined",
+                        color: "error",
+                        sx: (each == null ? void 0 : each.isCallStart) ? __spreadProps(__spreadValues({}, enabled), {
+                          minWidth: "60px !important",
+                          border: `0px solid ${theme.palette.error.light}`,
+                          "&:hover": {
+                            bgcolor: "error.light",
+                            boxShadow: `0px 2px 1px ${theme.palette.error.light}`,
+                            border: `0px solid ${theme.palette.error.light}`
+                          },
+                          "&:active": {
+                            bgcolor: "error.light",
+                            boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
+                          }
+                        }) : __spreadProps(__spreadValues({}, disabled), { minWidth: "60px !important" }),
+                        onClick: () => {
+                          onEndConferenceCall(each, {
+                            isCallStart: false,
+                            isMergeCall: false,
+                            isMute: false,
+                            isHold: false,
+                            status: "IDLE"
+                          });
+                        },
+                        disabled: !(each == null ? void 0 : each.isCallStart),
+                        children: /* @__PURE__ */ jsx2(CallEnd, {})
+                      }
+                    ) : /* @__PURE__ */ jsx2(
+                      Button,
+                      {
+                        variant: (each == null ? void 0 : each.isCallStart) ? "contained" : "outlined",
+                        sx: __spreadProps(__spreadValues({}, disabled), {
+                          visibility: "hidden",
+                          minWidth: "60px !important"
+                        }),
+                        onClick: () => {
+                          onEndConferenceCall(each, {
+                            isCallStart: false,
+                            isMergeCall: false,
+                            isMute: false,
+                            isHold: false,
+                            status: "IDLE"
+                          });
+                        },
+                        disabled: !(each == null ? void 0 : each.isCallStart),
+                        children: /* @__PURE__ */ jsx2(Typography, { children: /* @__PURE__ */ jsx2(
+                          CallEnd,
+                          {
+                            sx: {
+                              visibility: "hidden"
+                            }
+                          }
+                        ) })
+                      }
+                    ) })
+                  ]
+                },
+                index
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx2(Box, { textAlign: "center", m: 2, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outlined",
+            color: "error",
+            size: "large",
+            onClick: onEndAllConferenceCalls,
+            sx: { px: 2, borderRadius: "20px", textTransform: "capitalize" },
+            children: [
+              /* @__PURE__ */ jsx2(
+                IconButton,
+                {
+                  sx: {
+                    bgcolor: "error.main",
+                    "&:hover": { bgcolor: "error.dark" },
+                    marginRight: "8px",
+                    width: "28px",
+                    height: "28px",
+                    fontSize: "12px",
+                    fontWeight: "600",
+                    lineHeight: "16px",
+                    letterSpacing: "0.02em",
+                    textTransform: "capitalize",
+                    color: "white",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: "50%"
                   },
                   children: /* @__PURE__ */ jsx2(
                     PhoneDisabled,
@@ -778,7 +1121,7 @@ function ConferenceDialog({
                   )
                 }
               ),
-              "End Calls"
+              "End Conference"
             ]
           }
         ) })
@@ -787,42 +1130,79 @@ function ConferenceDialog({
   ) });
 }
 function CallTransferDialog({ open, setOpen }) {
-  const [transferCall] = usePostRequest();
-  const agentList = [
-    { name: "agent_ravi", status: "IDLE" },
-    { name: "rajesh", status: "IDLE" },
-    { name: "sudheer", status: "IDLE" },
-    { name: "test_user", status: "IDLE" }
-  ];
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const [transferCall] = usePostRequest({
+    onSuccess: (res) => {
+      console.log("res", res);
+      setOpen(false);
+    },
+    onError: (error) => {
+      console.log("error", error);
+    }
+  });
+  const state = useSDKState();
+  const [currentselecteTab, setCurrentselecteTab] = useState4("process");
+  const [getIdelAgentsList, { data: idleAgentsList }] = usePostRequest();
+  const [getProcessAndQueuesList, { data: processAndQueuesList }] = usePostRequest();
   const handleClose = () => {
     setOpen(false);
   };
-  const handleTransferCall = () => {
-    const payload = {
-      action: "CALL",
-      endcall_type: "",
-      mobile_number: "",
-      userid: "",
-      type: "",
-      transfer_to_agent_id: "",
-      transfer_to: "",
-      disposition: "",
-      set_followUp: "",
-      callreferenceid: "",
-      processid: "",
-      process_name: "",
-      refno: "",
-      transfer_to_queue: ""
-    };
-    transferCall(END_POINT.TRANSFER_CALL, payload);
+  const handleTransferCall = (data, type) => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _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;
+    console.log(data, "data34");
+    if (type === "PROCESS") {
+      const payload = {
+        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 : "",
+        type: "PROCESS",
+        transfer_to: (_e2 = data == null ? void 0 : data.process_name) != null ? _e2 : "",
+        callreferenceid: (_g2 = (_f2 = state.callData) == null ? void 0 : _f2.convox_id) != null ? _g2 : "",
+        processid: String((_i = (_h2 = state.callData) == null ? void 0 : _h2.process_id) != null ? _i : ""),
+        process_name: (_k = (_j = state.callData) == null ? void 0 : _j.process_name) != null ? _k : ""
+      };
+      transferCall(END_POINT.TRANSFER_CALL, payload);
+    } else if (type === "QUEUE") {
+      const payload = {
+        mobile_number: (_m = (_l = state.callData) == null ? void 0 : _l.phone_number) != null ? _m : "",
+        userid: (_o = (_n = state.callData) == null ? void 0 : _n.agent_id) != null ? _o : "",
+        type: "QUEUE",
+        transfer_to: (_p = data == null ? void 0 : data.queue_name) != null ? _p : "",
+        callreferenceid: (_r = (_q = state.callData) == null ? void 0 : _q.convox_id) != null ? _r : "",
+        processid: String((_t = (_s = state.callData) == null ? void 0 : _s.process_id) != null ? _t : ""),
+        process_name: (_v = (_u = state.callData) == null ? void 0 : _u.process_name) != null ? _v : ""
+      };
+      transferCall(END_POINT.TRANSFER_CALL, payload);
+    } else if (type === "AGENT") {
+      const payload = {
+        mobile_number: (_x = (_w = state.callData) == null ? void 0 : _w.phone_number) != null ? _x : "",
+        userid: (_z = (_y = state.callData) == null ? void 0 : _y.agent_id) != null ? _z : "",
+        type: "AGENT",
+        transfer_to: (_A = data == null ? void 0 : data.user_id) != null ? _A : "",
+        callreferenceid: (_C = (_B = state.callData) == null ? void 0 : _B.convox_id) != null ? _C : "",
+        processid: String((_E = (_D = state.callData) == null ? void 0 : _D.process_id) != null ? _E : ""),
+        process_name: (_G = (_F = state.callData) == null ? void 0 : _F.process_name) != null ? _G : ""
+      };
+      transferCall(END_POINT.TRANSFER_CALL, payload);
+    }
   };
+  useEffect2(() => {
+    getIdelAgentsList(END_POINT.AGENTS_LIST, {
+      status: "IDLE",
+      active: true
+    });
+    getProcessAndQueuesList(END_POINT.TRANSFER_TO_DETAILS, {
+      status: "ACTIVE",
+      active: true
+    });
+  }, []);
   return /* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsx2(
     Dialog,
     {
       open,
       "aria-labelledby": "alert-dialog-title",
       "aria-describedby": "alert-dialog-description",
-      maxWidth: "xs",
+      fullWidth: true,
+      maxWidth: "md",
       children: /* @__PURE__ */ jsxs(Paper, { sx: { borderRadius: 2 }, children: [
         /* @__PURE__ */ jsxs(
           Box,
@@ -840,7 +1220,7 @@ function CallTransferDialog({ open, setOpen }) {
             ]
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsxs(
           Box,
           {
             sx: {
@@ -849,55 +1229,254 @@ function CallTransferDialog({ open, setOpen }) {
               margin: "10px",
               borderRadius: "10px"
             },
-            children: agentList.map((line, index) => /* @__PURE__ */ jsxs(
-              Box,
-              {
-                sx: {
-                  p: 1,
-                  display: "flex",
-                  alignItems: "center",
-                  boxShadow: "1px 1px 4px #d3d3d3ff",
-                  padding: "6px",
-                  margin: "10px 0px",
-                  borderRadius: "10px",
-                  "&:hover": { bgcolor: "action.selected" }
-                },
-                children: [
-                  /* @__PURE__ */ jsxs(
-                    Typography,
+            children: [
+              /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [
+                /* @__PURE__ */ jsx2(
+                  Button,
+                  {
+                    variant: currentselecteTab === "process" ? "contained" : "outlined",
+                    onClick: () => setCurrentselecteTab("process"),
+                    children: "Process"
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  Button,
+                  {
+                    variant: currentselecteTab === "queues" ? "contained" : "outlined",
+                    onClick: () => setCurrentselecteTab("queues"),
+                    children: "Queues"
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  Button,
+                  {
+                    variant: currentselecteTab === "agents" ? "contained" : "outlined",
+                    onClick: () => setCurrentselecteTab("agents"),
+                    children: "Agents"
+                  }
+                )
+              ] }),
+              currentselecteTab === "process" && /* @__PURE__ */ jsx2(Box, { sx: { display: "flex", gap: 1 }, children: ((_b = (_a = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _a.process) == null ? void 0 : _b.length) > 0 ? (_d = (_c = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _c.process) == null ? void 0 : _d.map(
+                (process, index) => /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: {
+                      p: 1,
+                      display: "flex",
+                      alignItems: "center",
+                      boxShadow: "1px 1px 4px #d3d3d3ff",
+                      padding: "6px",
+                      margin: "10px 0px",
+                      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__ */ jsx2(SupportAgent, { sx: { marginRight: "4px" } }),
+                            process.process_name
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx2(
+                        IconButton,
+                        {
+                          color: "success",
+                          sx: {
+                            bgcolor: "action.hover",
+                            "&:hover": { bgcolor: "action.selected" }
+                          },
+                          onClick: () => {
+                            handleTransferCall(process, "PROCESS");
+                          },
+                          children: /* @__PURE__ */ jsx2(Call, {})
+                        }
+                      )
+                    ]
+                  },
+                  index
+                )
+              ) : /* @__PURE__ */ jsx2(
+                Typography,
+                {
+                  variant: "body1",
+                  sx: {
+                    fontSize: "12px",
+                    fontWeight: "600",
+                    letterSpacing: "0.02em",
+                    textTransform: "capitalize",
+                    textAlign: "center",
+                    width: "100%",
+                    margin: "10px 0px",
+                    color: "gray"
+                  },
+                  children: "No Process Found"
+                }
+              ) }),
+              currentselecteTab === "queues" && /* @__PURE__ */ jsx2(Box, { sx: { display: "flex", gap: 1 }, children: ((_f = (_e = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _e.queue) == null ? void 0 : _f.length) > 0 ? (_h = (_g = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _g.queue) == null ? void 0 : _h.map(
+                (queue, index) => {
+                  var _a2, _b2, _c2, _d2, _e2, _f2;
+                  return /* @__PURE__ */ jsxs(
+                    Box,
                     {
-                      variant: "body1",
                       sx: {
-                        mx: 1,
-                        width: "200px",
-                        maxWidth: "250px",
+                        p: 1,
                         display: "flex",
-                        alignItems: "center"
+                        alignItems: "center",
+                        boxShadow: "1px 1px 4px #d3d3d3ff",
+                        padding: "6px",
+                        margin: "10px 0px",
+                        borderRadius: "10px",
+                        "&:hover": { bgcolor: "action.selected" }
                       },
                       children: [
-                        /* @__PURE__ */ jsx2(SupportAgent, { sx: { marginRight: "4px" } }),
-                        line.name
+                        /* @__PURE__ */ jsxs(
+                          Typography,
+                          {
+                            variant: "body1",
+                            sx: {
+                              mx: 1,
+                              width: "200px",
+                              maxWidth: "250px",
+                              display: "flex",
+                              alignItems: "center"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx2(SupportAgent, { 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__ */ 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__ */ jsx2(
+                          IconButton,
+                          {
+                            color: "success",
+                            sx: {
+                              bgcolor: "action.hover",
+                              "&:hover": { bgcolor: "action.selected" }
+                            },
+                            onClick: () => {
+                              handleTransferCall(queue, "QUEUE");
+                            },
+                            children: /* @__PURE__ */ jsx2(Call, {})
+                          }
+                        )
                       ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx2(
-                    IconButton,
-                    {
-                      color: "success",
-                      sx: {
-                        bgcolor: "action.hover",
-                        "&:hover": { bgcolor: "action.selected" }
-                      },
-                      onClick: () => {
-                        handleTransferCall();
-                      },
-                      children: /* @__PURE__ */ jsx2(Call, {})
-                    }
-                  )
-                ]
-              },
-              index
-            ))
+                    },
+                    index
+                  );
+                }
+              ) : /* @__PURE__ */ jsx2(
+                Typography,
+                {
+                  variant: "body1",
+                  sx: {
+                    fontSize: "12px",
+                    fontWeight: "600",
+                    letterSpacing: "0.02em",
+                    textTransform: "capitalize",
+                    textAlign: "center",
+                    width: "100%",
+                    margin: "10px 0px",
+                    color: "gray"
+                  },
+                  children: "No Queues Found"
+                }
+              ) }),
+              currentselecteTab === "agents" && /* @__PURE__ */ jsx2(Box, { sx: { display: "flex", gap: 1 }, children: (idleAgentsList == null ? void 0 : idleAgentsList.length) > 0 ? idleAgentsList.map((agent, index) => /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  sx: {
+                    p: 1,
+                    display: "flex",
+                    alignItems: "center",
+                    boxShadow: "1px 1px 4px #d3d3d3ff",
+                    padding: "6px",
+                    margin: "10px 0px",
+                    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__ */ jsx2(SupportAgent, { sx: { marginRight: "4px" } }),
+                          agent.name
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      IconButton,
+                      {
+                        color: "success",
+                        sx: {
+                          bgcolor: "action.hover",
+                          "&:hover": { bgcolor: "action.selected" }
+                        },
+                        onClick: () => {
+                          handleTransferCall(agent, "AGENT");
+                        },
+                        children: /* @__PURE__ */ jsx2(Call, {})
+                      }
+                    )
+                  ]
+                },
+                index
+              )) : /* @__PURE__ */ jsx2(
+                Typography,
+                {
+                  variant: "body1",
+                  sx: {
+                    fontSize: "12px",
+                    fontWeight: "600",
+                    letterSpacing: "0.02em",
+                    textTransform: "capitalize",
+                    textAlign: "center",
+                    width: "100%",
+                    margin: "10px 0px",
+                    color: "gray"
+                  },
+                  children: "No Agents Found"
+                }
+              ) })
+            ]
           }
         )
       ] })
@@ -909,27 +1488,29 @@ function EndCallDispositionDialog({
   setOpen,
   onSubmitDisposition
 }) {
+  var _a, _b;
   const [formData, setFormData] = useState4({
-    disposition: null,
-    followUp: { label: "no" },
+    disposition: { label: "Resolved", value: "RES" },
+    followUp: { label: "No", value: "N" },
     callbackDate: "",
     callbackHrs: "",
     callbackMins: ""
   });
   const dispositionOptions = [
-    { label: "Interested" },
-    { label: "Not Interested" },
-    { label: "Callback Later" },
-    { label: "Wrong Number" }
+    { label: "Not Interested", value: "NI" },
+    { label: "Resolved", value: "RES" }
+  ];
+  const followUpOptions = [
+    { label: "Yes", value: "Y" },
+    { label: "No", value: "N" }
   ];
-  const followUpOptions = [{ label: "yes" }, { label: "no" }];
   const handleChange = (field, value) => {
     setFormData((prev) => __spreadProps(__spreadValues({}, prev), { [field]: value }));
   };
   const handleReset = () => {
     setFormData({
-      disposition: null,
-      followUp: { label: "no" },
+      disposition: { label: "Resolved", value: "RES" },
+      followUp: { label: "No", value: "N" },
       callbackDate: "",
       callbackHrs: "",
       callbackMins: ""
@@ -996,7 +1577,7 @@ function EndCallDispositionDialog({
                   renderInput: (params) => /* @__PURE__ */ jsx2(TextField, __spreadProps(__spreadValues({}, params), { label: "Follow Up", fullWidth: true }))
                 }
               ) }),
-              formData.followUp.label === "yes" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              ((_b = (_a = formData == null ? void 0 : formData.followUp) == null ? void 0 : _a.label) == null ? void 0 : _b.toLowerCase()) === "yes" && /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx2(Grid, { size: 6, children: /* @__PURE__ */ jsx2(
                   TextField,
                   {
@@ -1072,23 +1653,158 @@ function EndCallDispositionDialog({
     }
   ) });
 }
+function ProcessorListDialog({
+  open,
+  setOpen,
+  processList = [],
+  handleSelectedProcessor
+}) {
+  const handleClose = () => {
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsx2(
+    Dialog,
+    {
+      open,
+      "aria-labelledby": "alert-dialog-title",
+      "aria-describedby": "alert-dialog-description",
+      maxWidth: "xs",
+      children: /* @__PURE__ */ jsxs(Paper, { sx: { borderRadius: 2 }, children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              padding: "4px 16px",
+              boxShadow: "0px 1px 2px #f5f5f5ff"
+            },
+            children: [
+              /* @__PURE__ */ jsx2(Typography, { variant: "body1", children: " Process List" }),
+              /* @__PURE__ */ jsx2(IconButton, { onClick: handleClose, children: /* @__PURE__ */ jsx2(Close, {}) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          Box,
+          {
+            sx: {
+              boxShadow: "1px 1px 4px #d3d3d3ff",
+              padding: "6px 10px",
+              margin: "10px",
+              borderRadius: "10px"
+            },
+            children: (processList == null ? void 0 : processList.length) > 0 ? processList == null ? void 0 : processList.map((process, index) => /* @__PURE__ */ jsx2(
+              Box,
+              {
+                sx: {
+                  p: 1,
+                  display: "flex",
+                  alignItems: "center",
+                  boxShadow: "1px 1px 4px #d3d3d3ff",
+                  padding: "6px",
+                  margin: "10px 0px",
+                  borderRadius: "10px",
+                  cursor: "pointer",
+                  "&:hover": { bgcolor: "action.selected" }
+                },
+                onClick: () => {
+                  handleSelectedProcessor(process);
+                },
+                children: /* @__PURE__ */ jsxs(
+                  Typography,
+                  {
+                    variant: "body1",
+                    sx: {
+                      mx: 1,
+                      width: "200px",
+                      maxWidth: "250px",
+                      display: "flex",
+                      alignItems: "center"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx2(SupportAgent, { sx: { marginRight: "4px" } }),
+                      process.process_name
+                    ]
+                  }
+                )
+              },
+              index
+            )) : null
+          }
+        )
+      ] })
+    }
+  ) });
+}
+function CallHistoryDialog({ open, setOpen }) {
+  const handleClose = () => {
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsx2(
+    Dialog,
+    {
+      open,
+      "aria-labelledby": "alert-dialog-title",
+      "aria-describedby": "alert-dialog-description",
+      fullWidth: true,
+      maxWidth: "md",
+      children: /* @__PURE__ */ jsxs(Paper, { sx: { borderRadius: 2 }, children: [
+        /* @__PURE__ */ jsxs(
+          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 History" }),
+              /* @__PURE__ */ jsx2(IconButton, { onClick: handleClose, children: /* @__PURE__ */ jsx2(Close, {}) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          Box,
+          {
+            sx: {
+              boxShadow: "1px 1px 4px #d3d3d3ff",
+              margin: "10px",
+              borderRadius: "10px",
+              textAlign: "center",
+              fontSize: "16px",
+              fontWeight: "bold"
+            },
+            p: 6,
+            children: "Comming Soon..."
+          }
+        )
+      ] })
+    }
+  ) });
+}
 
 // call-control-sdk/lib/components/callControlPanel.tsx
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function CallControlPanel({ onDataChange }) {
-  const theme = useTheme();
+  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;
+  const theme = useTheme3();
+  const { disabled, enabled, outlined } = styles_default();
   const state = useSDKState();
+  const { showToast } = useToast();
+  const webSocketRef = useRef2(null);
   const [anchorEl, setAnchorEl] = useState5(null);
   const [showIframe, setShowIframe] = useState5(true);
-  const [statusAnchorEl, setStatusAnchorEl] = useState5(
-    null
-  );
-  const [dialerAnchorEl, setDialerAnchorEl] = useState5(
-    null
-  );
+  const [statusAnchorEl, setStatusAnchorEl] = useState5(null);
+  const [dialerAnchorEl, setDialerAnchorEl] = useState5(null);
   const [open, setOpen] = useState5(false);
   const [openCallTransfer, setOpenCallTransfer] = useState5(false);
   const [openCallDisposition, setOpenCallDisposition] = useState5(false);
+  const [openProcessorDialog, setOpenProcessorDialog] = useState5(false);
+  const [openCallHistoryDialog, setOpenCallHistoryDialog] = useState5(false);
   const [phoneNumber, setPhoneNumber] = useState5("");
   const [callDuration, setCallDuration] = useState5(0);
   const { position, isDragging, dragRef, handleMouseDown, handleTouchStart } = useDraggable(
@@ -1105,39 +1821,46 @@ function CallControlPanel({ onDataChange }) {
     state.iframePosition,
     (newPosition) => sdkStateManager.setIframePosition(newPosition)
   );
+  const [getProcessList, { data: processList }] = usePostRequest({
+    onSuccess: (res) => {
+      var _a2;
+      console.log("res", res);
+      if (res && res.processes && ((_a2 = res == null ? void 0 : res.processes) == null ? void 0 : _a2.length) > 1) {
+        setOpenProcessorDialog(true);
+      } else {
+        sdkStateManager.setProcess(res == null ? void 0 : res.processes[0]);
+        setOpenProcessorDialog(false);
+      }
+    },
+    onError: () => {
+      setOpenProcessorDialog(false);
+    }
+  });
   const [clickToCall] = usePostRequest();
-  const [holdOrUnHold] = usePostRequest();
-  const [muteOrUnMute] = usePostRequest();
+  const [holdOrUnHold] = usePostRequest({
+    onSuccess: () => {
+      sdkStateManager.setHolding(!state.isHolding);
+    },
+    onError: (error) => {
+      console.log("error", error);
+    }
+  });
+  const [muteOrUnMute] = usePostRequest({
+    onSuccess: () => {
+      sdkStateManager.setMuted(!state.isMuted);
+    },
+    onError: (error) => {
+      console.log("error", error);
+    }
+  });
   const [readyAgentStatus] = usePostRequest();
   const [updateAgentStatus] = usePostRequest();
   const [endCall] = usePostRequest();
-  useEffect2(() => {
-    let interval;
-    if (state.callStartTime) {
-      interval = setInterval(() => {
-        const elapsed = Math.floor((Date.now() - state.callStartTime) / 1e3);
-        setCallDuration(elapsed);
-      }, 1e3);
-    } else {
-      setCallDuration(0);
-    }
-    return () => {
-      if (interval) clearInterval(interval);
-    };
-  }, [state.callStartTime]);
-  useEffect2(() => {
-    if (onDataChange) {
-      onDataChange(state.callData);
-    }
-  }, [state.callData, onDataChange]);
   const formatDuration = useCallback3((seconds) => {
     const mins = Math.floor(seconds / 60);
     const secs = seconds % 60;
     return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
   }, []);
-  const handleOpenQueueCounts = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
   const handleCloseQueueCounts = () => {
     setAnchorEl(null);
   };
@@ -1158,445 +1881,449 @@ function CallControlPanel({ onDataChange }) {
   const handleCloseAgentStatus = () => {
     setStatusAnchorEl(null);
   };
-  const handleAgentReady = (status) => {
+  const handleAgentReady = () => {
     const payload = {
       action: "READYAGENT",
-      username: "string",
-      refno: "string"
+      userId: state.agentId
     };
     readyAgentStatus(END_POINT.READY_AGENT, payload);
-    sdkStateManager.setStatus(status);
   };
   const handleUpdateAgentStatus = (status) => {
-    sdkStateManager.setStatus(status);
     setStatusAnchorEl(null);
     const payload = {
-      action: "AGENTSTATUS",
-      phone_number: "string",
-      refno: "string",
-      username: "string",
-      ticket_id: 0
+      action: "AGENTBREAK",
+      break_type: status,
+      userId: state.agentId
     };
     updateAgentStatus(END_POINT.UPDATE_AGENT_BREAK, payload);
   };
   const handleStartCall = (number) => {
     if (number.length !== 10) {
+      showToast("Invalid phone number", "error");
       alert("Invalid phone number");
     } else if (!/^\d+$/.test(number)) {
-      alert("Invalid phone number");
+      showToast("Invalid phone number", "error");
     } else {
       const payload = {
         action: "CALL",
         phone_number: number,
-        refno: "string",
-        username: "string",
-        ticket_id: 0
+        userId: state.agentId
       };
       clickToCall(END_POINT.CLICK_TO_CALL, payload);
-      sdkStateManager.startCall();
     }
   };
   const handleHoldToggle = () => {
     const payload = {
       action: state.isHolding ? "UNHOLD" : "HOLD",
-      username: "string",
-      refno: "string"
+      userId: state.agentId
     };
     holdOrUnHold(END_POINT.HOLD_CALL, payload);
-    sdkStateManager.setHolding(!state.isHolding);
   };
   const handleMuteToggle = () => {
     const payload = {
       action: state.isMuted ? "UNMUTE" : "MUTE",
-      username: "string",
-      refno: "string"
+      userId: state.agentId
     };
-    if (state.isMuted) {
-      muteOrUnMute(END_POINT.UNMUTE_CALL, payload);
-    } else {
-      muteOrUnMute(END_POINT.MUTE_CALL, payload);
-    }
-    sdkStateManager.setMuted(!state.isMuted);
+    muteOrUnMute(END_POINT.MUTE_CALL, payload);
   };
   const handleEndCall = (data) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    console.log(data);
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2;
+    console.log("data", data);
     const payload = {
       action: "ENDCALL",
-      convoxid: "string",
-      username: "string",
-      processid: "101",
-      mobile_number: "string",
-      refno: "string",
-      disposition: (_b = (_a = data == null ? void 0 : data.disposition) == null ? void 0 : _a.label) != null ? _b : "",
-      set_followUp: (_d = (_c = data == null ? void 0 : data.followUp) == null ? void 0 : _c.label) != null ? _d : "",
-      callback_date: (_e = data == null ? void 0 : data.callbackDate) != null ? _e : "",
-      callback_hrs: (_f = data == null ? void 0 : data.callbackHrs) != null ? _f : "",
-      callback_mins: (_g = data == null ? void 0 : data.callbackMins) != null ? _g : ""
+      userId: state.agentId,
+      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 : "",
+      callreferenceid: (_g2 = (_f2 = state.callData) == null ? void 0 : _f2.convox_id) != null ? _g2 : "",
+      mobile_number: (_i2 = (_h2 = state.callData) == null ? void 0 : _h2.phone_number) != null ? _i2 : "",
+      disposition: (_k2 = (_j2 = data == null ? void 0 : data.disposition) == null ? void 0 : _j2.value) != null ? _k2 : "",
+      set_followUp: (_m2 = (_l2 = data == null ? void 0 : data.followUp) == null ? void 0 : _l2.value) != null ? _m2 : "",
+      callback_date: (_n2 = data == null ? void 0 : data.callbackDate) != null ? _n2 : "",
+      callback_hrs: (_o2 = data == null ? void 0 : data.callbackHrs) != null ? _o2 : "",
+      callback_mins: (_p2 = data == null ? void 0 : data.callbackMins) != null ? _p2 : "",
+      endcall_type: "CLOSE"
     };
     setPhoneNumber("");
     endCall(END_POINT.END_CALL, payload);
     sdkStateManager.endCall();
     setOpenCallDisposition(false);
   };
-  if (!state.isInitialized) {
-    return null;
+  useEffect3(() => {
+    let interval;
+    if (state.callData.status && state.callData.status === "ONCALL") {
+      interval = setInterval(() => {
+        const elapsed = Math.floor((Date.now() - state.callStartTime) / 1e3);
+        setCallDuration(elapsed);
+      }, 1e3);
+    } else {
+      setCallDuration(0);
+    }
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [state.callData.status]);
+  useEffect3(() => {
+    if (onDataChange) {
+      onDataChange(state.callData);
+    }
+  }, [state.callData, onDataChange]);
+  useEffect3(() => {
+    if (state.agentId) {
+      getProcessList(END_POINT.PROCESS_LIST, {
+        userId: state.agentId,
+        action: "GETAGENTPROCESSLIST",
+        refno: "1234221233"
+      });
+    } else {
+      console.log("No agentId available, skipping API call");
+    }
+  }, [state.agentId]);
+  useEffect3(() => {
+    if (state.agentId) {
+      webSocketRef.current = new WebSocket(`${WS_END_POINT.WS}?agent_id=${state.agentId}`);
+      webSocketRef.current.onopen = () => {
+        console.log("WebSocket connection established");
+      };
+      webSocketRef.current.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          console.log("parsedJSON:", data);
+          sdkStateManager.updateCallData(data);
+          if (data.status === "ONCALL") {
+            sdkStateManager.startCall();
+          }
+          if (data.status === "WRAPUP") {
+            sdkStateManager.endCall();
+          }
+        } catch (e) {
+          console.log("Raw message:", event.data);
+        }
+      };
+      webSocketRef.current.onclose = () => {
+        console.log("WebSocket connection closed");
+      };
+      webSocketRef.current.onerror = (error) => {
+        console.error("WebSocket error:", error);
+      };
+    }
+    return () => {
+      var _a2;
+      (_a2 = webSocketRef.current) == null ? void 0 : _a2.close();
+    };
+  }, [state.agentId]);
+  if (!state.isInitialized || !state.process) {
+    return /* @__PURE__ */ jsx3(Box2, { children: Boolean(openProcessorDialog) && /* @__PURE__ */ jsx3(
+      ProcessorListDialog,
+      {
+        processList: processList == null ? void 0 : processList.processes,
+        open: openProcessorDialog,
+        setOpen: setOpenProcessorDialog,
+        handleSelectedProcessor: (data) => {
+          sdkStateManager.setProcess(data);
+        }
+      }
+    ) });
   }
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx3(Fade, { in: true, timeout: 300, children: /* @__PURE__ */ jsx3(
-      Paper2,
+    /* @__PURE__ */ jsx3(
+      Fade,
       {
-        ref: dragRef,
-        elevation: isDragging ? 4 : 1,
-        sx: {
-          position: "fixed",
-          left: position.x,
-          top: position.y,
-          p: 1,
-          borderRadius: 3,
-          bgcolor: "background.paper",
-          zIndex: 99999,
-          transition: theme.transitions.create(["box-shadow", "transform"], {
-            duration: theme.transitions.duration.short
-          }),
-          minWidth: 320,
-          userSelect: "none"
-        },
-        children: /* @__PURE__ */ jsxs2(
-          Box2,
+        in: true,
+        timeout: 300,
+        children: /* @__PURE__ */ jsx3(
+          Paper2,
           {
+            ref: dragRef,
+            elevation: isDragging ? 4 : 1,
             sx: {
-              display: "flex",
-              alignItems: "center"
+              position: "fixed",
+              left: position.x,
+              top: position.y,
+              p: 0.5,
+              borderRadius: 3,
+              bgcolor: "background.paper",
+              zIndex: 99999,
+              transition: theme.transitions.create(["box-shadow", "transform"], {
+                duration: theme.transitions.duration.short
+              }),
+              userSelect: "none"
             },
-            children: [
-              /* @__PURE__ */ jsxs2(
-                Box2,
-                {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs2(
-                      Typography2,
-                      {
-                        variant: "h6",
-                        sx: {
-                          color: state.status === "on call" ? "success.main" : "text.secondary",
-                          marginRight: "8px",
-                          display: "flex",
-                          justifyContent: "space-between",
-                          alignItems: "center"
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxs2(
-                            IconButton2,
-                            {
-                              component: "div",
-                              sx: {
-                                cursor: "all-scroll"
-                              },
-                              onMouseDown: handleMouseDown,
-                              onTouchStart: handleTouchStart,
-                              children: [
-                                /* @__PURE__ */ jsx3(DragIndicator, {}),
-                                " "
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ jsx3(
-                            Box2,
-                            {
-                              sx: {
-                                marginRight: "10px"
-                              },
-                              children: /* @__PURE__ */ jsx3(Tooltip, { title: "Dial", children: /* @__PURE__ */ jsx3(
-                                IconButton2,
-                                {
-                                  onClick: (e) => {
-                                    if (state.status !== "on call" && state.status !== "break") {
-                                      handleOpenDialer(e);
-                                    }
-                                  },
-                                  sx: {
-                                    bgcolor: "action.hover",
-                                    "&:hover": {
-                                      bgcolor: "warning"
-                                    }
-                                  },
-                                  children: /* @__PURE__ */ jsx3(
-                                    WifiCalling3,
-                                    {
-                                      sx: {
-                                        color: state.status === "on call" || state.status === "break" ? "action.selected" : "success.main"
-                                      }
+            children: /* @__PURE__ */ jsxs2(
+              Box2,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs2(
+                    Box2,
+                    {
+                      sx: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs2(
+                          IconButton2,
+                          {
+                            component: "div",
+                            size: "small",
+                            sx: {
+                              cursor: "all-scroll"
+                            },
+                            onMouseDown: handleMouseDown,
+                            onTouchStart: handleTouchStart,
+                            children: [
+                              /* @__PURE__ */ jsx3(DragIndicator, {}),
+                              " "
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx3(
+                          Box2,
+                          {
+                            sx: {
+                              marginRight: "10px"
+                            },
+                            children: /* @__PURE__ */ jsx3(Tooltip2, { title: "Dial", children: /* @__PURE__ */ jsx3(
+                              IconButton2,
+                              {
+                                size: "small",
+                                onClick: (e) => {
+                                  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
+                                  if (((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) !== "ONCALL" && ((_d2 = (_c2 = state.callData) == null ? void 0 : _c2.status) == null ? void 0 : _d2.toUpperCase()) !== "BREAK" && ((_f2 = (_e2 = state.callData) == null ? void 0 : _e2.status) == null ? void 0 : _f2.toUpperCase()) !== "RINGING" && ((_h2 = (_g2 = state.callData) == null ? void 0 : _g2.status) == null ? void 0 : _h2.toUpperCase()) !== "WRAPUP") {
+                                    handleOpenDialer(e);
+                                  }
+                                },
+                                sx: {
+                                  bgcolor: "action.hover",
+                                  "&:hover": {
+                                    bgcolor: "warning"
+                                  }
+                                },
+                                children: /* @__PURE__ */ jsx3(
+                                  WifiCalling3,
+                                  {
+                                    sx: {
+                                      color: ((_b = (_a = state.callData) == null ? void 0 : _a.status) == null ? void 0 : _b.toUpperCase()) === "ONCALL" || ((_d = (_c = state.callData) == null ? void 0 : _c.status) == null ? void 0 : _d.toUpperCase()) === "BREAK" || ((_f = (_e = state.callData) == null ? void 0 : _e.status) == null ? void 0 : _f.toUpperCase()) === "RINGING" || ((_h = (_g = state.callData) == null ? void 0 : _g.status) == null ? void 0 : _h.toUpperCase()) === "WRAPUP" ? "action.selected" : "success.main"
                                     }
-                                  )
-                                }
-                              ) })
-                            }
-                          ),
-                          formatDuration(callDuration)
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs2(
-                      ButtonGroup,
-                      {
-                        disableElevation: true,
-                        variant: "contained",
-                        "aria-label": "Disabled button group",
-                        sx: {
-                          marginRight: "10px"
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx3(
-                            Button2,
-                            {
-                              sx: {
-                                fontWeight: "bold",
-                                borderRadius: "16px",
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "space-between"
-                              },
-                              variant: "outlined",
-                              children: /* @__PURE__ */ jsx3(
-                                Typography2,
-                                {
-                                  width: 70,
-                                  variant: "body2",
-                                  sx: {
-                                    fontWeight: "bold"
-                                  },
-                                  children: state.status.toUpperCase()
-                                }
-                              )
-                            }
-                          ),
-                          /* @__PURE__ */ jsxs2(
-                            Button2,
-                            {
-                              sx: {
-                                borderRadius: "16px",
-                                width: 20
-                              },
-                              variant: "outlined",
-                              onClick: handleOpenAgentStatus,
-                              disabled: Boolean(state.callStartTime),
-                              children: [
-                                /* @__PURE__ */ jsx3(ArrowDropDown, {}),
-                                " "
-                              ]
-                            }
-                          )
-                        ]
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs2(
-                Box2,
-                {
-                  sx: {
-                    display: "flex",
-                    gap: 1,
-                    justifyContent: "center",
-                    alignItems: "center"
-                  },
-                  children: [
-                    state.status === "break" && /* @__PURE__ */ jsx3(Tooltip, { title: "Agent Ready", children: /* @__PURE__ */ jsx3(
-                      IconButton2,
-                      {
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          handleAgentReady("idle");
-                        },
-                        color: "default",
-                        sx: {
-                          bgcolor: "error.dark",
-                          "&:hover": {
-                            bgcolor: "error.light"
+                                  }
+                                )
+                              }
+                            ) })
                           }
-                        },
-                        children: /* @__PURE__ */ jsx3(
-                          SupportAgent2,
+                        ),
+                        /* @__PURE__ */ jsx3(
+                          Typography2,
                           {
                             sx: {
-                              color: "white"
-                            }
+                              color: "success.main",
+                              width: "40px",
+                              marginRight: "10px"
+                            },
+                            children: formatDuration(callDuration)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx3(
+                          Typography2,
+                          {
+                            variant: "body2",
+                            sx: {
+                              fontWeight: "bold"
+                            },
+                            children: (_k = (_j = (_i = state.callData) == null ? void 0 : _i.status) == null ? void 0 : _j.toUpperCase()) != null ? _k : "N/A"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs2(
+                          Button2,
+                          {
+                            size: "small",
+                            variant: "text",
+                            onClick: handleOpenAgentStatus,
+                            disabled: Boolean(state.callStartTime),
+                            children: [
+                              /* @__PURE__ */ jsx3(ArrowDropDown, {}),
+                              " "
+                            ]
                           }
                         )
-                      }
-                    ) }),
-                    state.status === "wrap up" && /* @__PURE__ */ jsx3(Tooltip, { title: "Redial", children: /* @__PURE__ */ jsx3(
-                      IconButton2,
-                      {
-                        onClick: (e) => {
-                          e.stopPropagation();
-                        },
-                        color: "default",
-                        sx: {
-                          bgcolor: "action.hover",
-                          "&:hover": {
-                            bgcolor: "warning"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs2(
+                    Box2,
+                    {
+                      sx: {
+                        display: "flex",
+                        gap: 1,
+                        justifyContent: "center",
+                        alignItems: "center"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx3(Tooltip2, { title: "Agent Ready", children: /* @__PURE__ */ jsx3(
+                          Button2,
+                          {
+                            variant: ((_m = (_l = state.callData) == null ? void 0 : _l.status) == null ? void 0 : _m.toUpperCase()) === "BREAK" || ((_o = (_n = state.callData) == null ? void 0 : _n.status) == null ? void 0 : _o.toUpperCase()) === "MISSED" ? "outlined" : "contained",
+                            onClick: (e) => {
+                              var _a2, _b2, _c2, _d2;
+                              if (((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) === "BREAK" || ((_d2 = (_c2 = state.callData) == null ? void 0 : _c2.status) == null ? void 0 : _d2.toUpperCase()) === "MISSED") {
+                                e.stopPropagation();
+                                handleAgentReady();
+                              }
+                            },
+                            classes: {
+                              root: ((_q = (_p = state.callData) == null ? void 0 : _p.status) == null ? void 0 : _q.toUpperCase()) === "BREAK" || ((_s = (_r = state.callData) == null ? void 0 : _r.status) == null ? void 0 : _s.toUpperCase()) === "MISSED" ? "outlined" : "enabled"
+                            },
+                            sx: __spreadValues({}, ((_u = (_t = state.callData) == null ? void 0 : _t.status) == null ? void 0 : _u.toUpperCase()) === "BREAK" || ((_w = (_v = state.callData) == null ? void 0 : _v.status) == null ? void 0 : _w.toUpperCase()) === "MISSED" ? outlined : enabled),
+                            children: /* @__PURE__ */ jsx3(SupportAgent2, {})
                           }
-                        },
-                        children: /* @__PURE__ */ jsx3(Tty, {})
-                      }
-                    ) }),
-                    state.status === "on call" && /* @__PURE__ */ jsx3(Tooltip, { title: state.isHolding ? "Resume" : "Hold", children: /* @__PURE__ */ jsx3(
-                      IconButton2,
-                      {
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          handleHoldToggle();
-                        },
-                        color: state.isHolding ? "warning" : "default",
-                        sx: {
-                          bgcolor: state.isHolding ? "warning.info" : "action.hover"
-                        },
-                        children: state.isHolding ? /* @__PURE__ */ jsx3(PlayCircle, {}) : /* @__PURE__ */ jsx3(PauseCircle2, {})
-                      }
-                    ) }),
-                    state.status === "on call" && /* @__PURE__ */ jsx3(Tooltip, { title: state.isMuted ? "Unmute" : "Mute", children: /* @__PURE__ */ jsx3(
-                      IconButton2,
-                      {
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          handleMuteToggle();
-                        },
-                        color: state.isMuted ? "error" : "default",
-                        sx: {
-                          bgcolor: state.isMuted ? "error.info" : "action.hover"
-                        },
-                        children: state.isMuted ? /* @__PURE__ */ jsx3(MicOff, {}) : /* @__PURE__ */ jsx3(Mic, {})
-                      }
-                    ) }),
-                    state.status !== "on call" && /* @__PURE__ */ jsx3(Tooltip, { title: "Queue", children: /* @__PURE__ */ jsx3(
-                      IconButton2,
-                      {
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          handleOpenQueueCounts(e);
-                        },
-                        color: "default",
-                        sx: {
-                          bgcolor: "action.hover",
-                          "&:hover": {
-                            bgcolor: "warning"
+                        ) }),
+                        /* @__PURE__ */ jsx3(Tooltip2, { title: state.isHolding ? "Resume" : "Hold", children: /* @__PURE__ */ jsx3(
+                          Button2,
+                          {
+                            variant: state.isHolding && ((_y = (_x = state.callData) == null ? void 0 : _x.status) == null ? void 0 : _y.toUpperCase()) === "ONCALL" ? "contained" : "outlined",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleHoldToggle();
+                            },
+                            sx: state.isHolding && ((_A = (_z = state.callData) == null ? void 0 : _z.status) == null ? void 0 : _A.toUpperCase()) === "ONCALL" ? __spreadValues({}, enabled) : ((_C = (_B = state.callData) == null ? void 0 : _B.status) == null ? void 0 : _C.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                            disabled: ((_E = (_D = state.callData) == null ? void 0 : _D.status) == null ? void 0 : _E.toUpperCase()) !== "ONCALL" && !state.isHolding,
+                            children: state.isHolding ? /* @__PURE__ */ jsx3(PlayArrow2, {}) : /* @__PURE__ */ jsx3(Pause2, {})
                           }
-                        },
-                        children: /* @__PURE__ */ jsx3(Layers, {})
-                      }
-                    ) }),
-                    state.status === "on call" && /* @__PURE__ */ jsx3(Tooltip, { title: "Conference Call", children: /* @__PURE__ */ jsx3(
-                      IconButton2,
-                      {
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          setOpenCallTransfer(true);
-                        },
-                        color: "default",
-                        sx: {
-                          bgcolor: "action.hover",
-                          "&:hover": {
-                            bgcolor: "warning"
+                        ) }),
+                        /* @__PURE__ */ jsx3(Tooltip2, { title: state.isMuted ? "Unmute" : "Mute", children: /* @__PURE__ */ jsx3(
+                          Button2,
+                          {
+                            variant: state.isMuted && ((_G = (_F = state.callData) == null ? void 0 : _F.status) == null ? void 0 : _G.toUpperCase()) === "ONCALL" ? "contained" : "outlined",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleMuteToggle();
+                            },
+                            sx: state.isMuted && ((_I = (_H = state.callData) == null ? void 0 : _H.status) == null ? void 0 : _I.toUpperCase()) === "ONCALL" ? __spreadValues({}, enabled) : ((_K = (_J = state.callData) == null ? void 0 : _J.status) == null ? void 0 : _K.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                            disabled: ((_M = (_L = state.callData) == null ? void 0 : _L.status) == null ? void 0 : _M.toUpperCase()) !== "ONCALL" && !state.isMuted,
+                            children: state.isMuted ? /* @__PURE__ */ jsx3(MicOff2, {}) : /* @__PURE__ */ jsx3(Mic2, {})
                           }
-                        },
-                        children: /* @__PURE__ */ jsx3(TransferWithinAStation, {})
-                      }
-                    ) }),
-                    state.status === "on call" && /* @__PURE__ */ jsx3(Tooltip, { title: "Conference Call", children: /* @__PURE__ */ jsx3(
-                      IconButton2,
-                      {
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          setOpen(true);
-                        },
-                        color: "default",
-                        sx: {
-                          bgcolor: "action.hover",
-                          "&:hover": {
-                            bgcolor: "warning"
+                        ) }),
+                        /* @__PURE__ */ jsx3(Tooltip2, { title: "Transfer Call", children: /* @__PURE__ */ jsx3(
+                          Button2,
+                          {
+                            variant: openCallTransfer ? "contained" : "outlined",
+                            onClick: (e) => {
+                              var _a2, _b2;
+                              if (((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL") {
+                                e.stopPropagation();
+                                setOpenCallTransfer(true);
+                              }
+                            },
+                            sx: openCallTransfer ? __spreadValues({}, enabled) : ((_O = (_N = state.callData) == null ? void 0 : _N.status) == null ? void 0 : _O.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                            disabled: ((_Q = (_P = state.callData) == null ? void 0 : _P.status) == null ? void 0 : _Q.toUpperCase()) !== "ONCALL",
+                            children: /* @__PURE__ */ jsx3(TransferWithinAStation, {})
                           }
-                        },
-                        children: /* @__PURE__ */ jsx3(Groups, {})
-                      }
-                    ) }),
-                    state.status === "on call" && /* @__PURE__ */ jsx3(
-                      Tooltip,
-                      {
-                        title: state.status === "on call" ? "End Call" : "Start Call",
-                        children: /* @__PURE__ */ jsx3(
-                          IconButton2,
+                        ) }),
+                        /* @__PURE__ */ jsx3(Tooltip2, { title: "Conference Call", children: /* @__PURE__ */ jsx3(
+                          Button2,
+                          {
+                            variant: open ? "contained" : "outlined",
+                            onClick: (e) => {
+                              var _a2, _b2;
+                              if (((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL") {
+                                e.stopPropagation();
+                                setOpen(true);
+                              }
+                            },
+                            sx: open ? __spreadValues({}, enabled) : ((_S = (_R = state.callData) == null ? void 0 : _R.status) == null ? void 0 : _S.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                            disabled: ((_U = (_T = state.callData) == null ? void 0 : _T.status) == null ? void 0 : _U.toUpperCase()) !== "ONCALL",
+                            children: /* @__PURE__ */ jsx3(Group, {})
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx3(Tooltip2, { title: "Call History", children: /* @__PURE__ */ jsx3(
+                          Button2,
                           {
+                            variant: openCallHistoryDialog ? "contained" : "outlined",
                             onClick: (e) => {
                               e.stopPropagation();
-                              setOpenCallDisposition(true);
+                              setOpenCallHistoryDialog(true);
                             },
-                            color: "error",
-                            sx: {
-                              bgcolor: state.status === "on call" ? "error.main" : "gray",
-                              color: "white",
-                              "&:hover": {
-                                bgcolor: state.status === "on call" ? "error.light" : "gray"
+                            sx: openCallHistoryDialog ? __spreadValues({}, enabled) : __spreadValues({}, outlined),
+                            children: /* @__PURE__ */ jsx3(History, {})
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx3(Tooltip2, { title: "End Call", children: /* @__PURE__ */ jsx3(
+                          Button2,
+                          {
+                            variant: ((_W = (_V = state.callData) == null ? void 0 : _V.status) == null ? void 0 : _W.toUpperCase()) === "ONCALL" || ((_Y = (_X = state.callData) == null ? void 0 : _X.status) == null ? void 0 : _Y.toUpperCase()) === "RINGING" || ((__ = (_Z = state.callData) == null ? void 0 : _Z.status) == null ? void 0 : __.toUpperCase()) === "WRAPUP" ? "contained" : "outlined",
+                            onClick: (e) => {
+                              var _a2, _b2, _c2, _d2, _e2, _f2;
+                              if (((_b2 = (_a2 = state.callData) == null ? void 0 : _a2.status) == null ? void 0 : _b2.toUpperCase()) === "ONCALL" || ((_d2 = (_c2 = state.callData) == null ? void 0 : _c2.status) == null ? void 0 : _d2.toUpperCase()) === "RINGING" || ((_f2 = (_e2 = state.callData) == null ? void 0 : _e2.status) == null ? void 0 : _f2.toUpperCase()) === "WRAPUP") {
+                                e.stopPropagation();
+                                setOpenCallDisposition(true);
                               }
                             },
+                            sx: ((_aa = (_$ = state.callData) == null ? void 0 : _$.status) == null ? void 0 : _aa.toUpperCase()) === "ONCALL" || ((_ca = (_ba = state.callData) == null ? void 0 : _ba.status) == null ? void 0 : _ca.toUpperCase()) === "RINGING" || ((_ea = (_da = state.callData) == null ? void 0 : _da.status) == null ? void 0 : _ea.toUpperCase()) === "WRAPUP" ? __spreadProps(__spreadValues({}, enabled), {
+                              borderRight: "1px",
+                              backgroundColor: "error.main",
+                              minWidth: "60px !important",
+                              boxShadow: " 0px 2px 1px #5f3f3f",
+                              border: `1px solid ${theme.palette.error.light}`,
+                              height: "40px",
+                              "&:hover": {
+                                bgcolor: "error.light",
+                                boxShadow: " 0px 2px 1px #5f3f3f",
+                                border: `0px solid ${theme.palette.error.light}`
+                              },
+                              "&:active": {
+                                bgcolor: "error.light",
+                                boxShadow: `inset 1px -2px 4px ${theme.palette.primary.light}`
+                              }
+                            }) : __spreadProps(__spreadValues({}, disabled), {
+                              minWidth: "60px !important"
+                            }),
+                            disabled: ((_ga = (_fa = state.callData) == null ? void 0 : _fa.status) == null ? void 0 : _ga.toUpperCase()) !== "ONCALL" && ((_ia = (_ha = state.callData) == null ? void 0 : _ha.status) == null ? void 0 : _ia.toUpperCase()) !== "RINGING" && ((_ka = (_ja = state.callData) == null ? void 0 : _ja.status) == null ? void 0 : _ka.toUpperCase()) !== "WRAPUP",
                             children: /* @__PURE__ */ jsx3(CallEnd2, {})
                           }
-                        )
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
+                        ) })
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
           }
         )
       }
-    ) }),
-    Boolean(showIframe) && /* @__PURE__ */ jsx3(Fade, { in: true, timeout: 300, children: /* @__PURE__ */ jsx3(
-      Paper2,
+    ),
+    /* @__PURE__ */ jsx3(
+      Fade,
       {
-        ref: iframeDragRef,
-        elevation: iframeIsDragging ? 4 : 1,
-        sx: {
-          position: "fixed",
-          left: iframePosition.x,
-          top: iframePosition.y,
-          p: 1,
-          height: "auto",
-          borderRadius: 2,
-          bgcolor: "background.paper",
-          zIndex: 99999,
-          transition: theme.transitions.create(
-            ["box-shadow", "transform"],
-            {
-              duration: theme.transitions.duration.short
-            }
-          ),
-          userSelect: "none"
-        },
+        in: true,
+        timeout: 300,
         children: /* @__PURE__ */ jsxs2(
-          Box2,
+          Paper2,
           {
+            ref: iframeDragRef,
+            elevation: iframeIsDragging ? 4 : 1,
             sx: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              flexDirection: "column"
+              position: "fixed",
+              left: iframePosition.x,
+              top: iframePosition.y,
+              p: 1,
+              height: "auto",
+              borderRadius: 2,
+              bgcolor: "background.paper",
+              zIndex: 99999,
+              transition: theme.transitions.create(["box-shadow", "transform"], {
+                duration: theme.transitions.duration.short
+              }),
+              visibility: showIframe ? "visible" : "hidden",
+              userSelect: "none"
             },
             children: [
               /* @__PURE__ */ jsxs2(
                 Box2,
                 {
                   sx: {
-                    width: "100%",
-                    height: "auto",
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "space-between",
@@ -1621,16 +2348,17 @@ function CallControlPanel({ onDataChange }) {
               /* @__PURE__ */ jsx3(
                 "iframe",
                 {
-                  src: "https://h68.deepijatel.in/ConVoxCCS/iframe?agent_id=test&process_id=101",
-                  height: 300,
-                  width: 300
+                  src: `https://h68.deepijatel.in/ConVoxCCS/iframe?agent_id=${state.agentId}&process_id=${(_la = state.process) == null ? void 0 : _la.process_id}`,
+                  height: 380,
+                  width: 420,
+                  allow: "camera; microphone; autoplay"
                 }
               )
             ]
           }
         )
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsx3(
       Menu,
       {
@@ -1689,8 +2417,8 @@ function CallControlPanel({ onDataChange }) {
           zIndex: 99999
         },
         children: [
-          /* @__PURE__ */ jsx3(MenuItem, { onClick: () => handleUpdateAgentStatus("break"), children: "- Lunch" }),
-          /* @__PURE__ */ jsx3(MenuItem, { onClick: () => handleUpdateAgentStatus("break"), children: "- Tea" })
+          /* @__PURE__ */ jsx3(MenuItem, { onClick: () => handleUpdateAgentStatus("Lunch"), children: "- Lunch" }),
+          /* @__PURE__ */ jsx3(MenuItem, { onClick: () => handleUpdateAgentStatus("Tea"), children: "- Tea" })
         ]
       }
     ),
@@ -1759,18 +2487,7 @@ function CallControlPanel({ onDataChange }) {
       ConferenceDialog,
       {
         open,
-        setOpen,
-        agentName: "agent_Ravi",
-        lines: [
-          { status: "ON CALL", type: "External", phone: "7032491730" },
-          { status: "IDLE", type: "Internal", phone: "" },
-          { status: "IDLE", type: "External", phone: "" },
-          { status: "IDLE", type: "Internal", phone: "" },
-          { status: "IDLE", type: "External", phone: "" }
-        ],
-        onConference: () => console.log("Conference"),
-        onExit: () => console.log("Exit"),
-        onEndAllCalls: () => console.log("End All Calls")
+        setOpen
       }
     ),
     Boolean(openCallTransfer) && /* @__PURE__ */ jsx3(
@@ -1787,6 +2504,13 @@ function CallControlPanel({ onDataChange }) {
         setOpen: setOpenCallDisposition,
         onSubmitDisposition: handleEndCall
       }
+    ),
+    Boolean(openCallHistoryDialog) && /* @__PURE__ */ jsx3(
+      CallHistoryDialog,
+      {
+        open: openCallHistoryDialog,
+        setOpen: setOpenCallHistoryDialog
+      }
     )
   ] });
 }
@@ -2196,22 +2920,53 @@ if (typeof window !== "undefined") {
   window.EventTracker = eventTracker;
 }
 
+// call-control-sdk/lib/hooks/useLogout.ts
+import { useCallback as useCallback4 } from "react";
+var useLogout = (options = {}) => {
+  const { onSuccess, onError, onComplete } = options;
+  const state = useSDKState();
+  const [logOutAgent, logoutState] = usePostRequest({
+    onSuccess: (response) => {
+      onSuccess == null ? void 0 : onSuccess(response);
+      onComplete == null ? void 0 : onComplete();
+      sdkStateManager.clearStorageAndReset();
+      localStorage.clear();
+    },
+    onError: (error) => {
+      onError == null ? void 0 : onError(error);
+      onComplete == null ? void 0 : onComplete();
+    }
+  });
+  const handleLogout = useCallback4(() => {
+    const payload = {
+      action: "LOGOUTUSER",
+      userId: state.agentId || ""
+    };
+    logOutAgent(END_POINT.LOGOUT, payload);
+  }, [logOutAgent]);
+  return {
+    logout: handleLogout,
+    isLoading: logoutState.isLoading,
+    isSuccess: logoutState.isSuccess,
+    isError: logoutState.isError,
+    error: logoutState.error,
+    data: logoutState.data
+  };
+};
+var useLogout_default = useLogout;
+
 // call-control-sdk/index.ts
-function initSDK({
-  apiKey,
-  tenantId,
-  agentId,
-  baseUrl
-}) {
-  sdkStateManager.initialize(apiKey);
+function initSDK({ apiKey, tenantId, agentId }) {
+  sdkStateManager.initialize(apiKey, agentId);
   eventTracker.init({
     apiKey,
     tenantId,
     agentId,
-    baseUrl
+    baseUrl: BASE_URL
   });
 }
 export {
   CallControlPanel,
-  initSDK
+  initSDK,
+  useLogout_default as useLogout
 };