call-control-sdk 4.1.0 → 5.0.0

package/dist/index.js

@@ -49,17 +49,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 var index_exports = {};
 __export(index_exports, {
   CallControlPanel: () => CallControlPanel,
-  initSDK: () => initSDK
+  initSDK: () => initSDK,
+  useLogout: () => useLogout_default
 });
 module.exports = __toCommonJS(index_exports);
 
 // call-control-sdk/lib/components/callControlPanel.tsx
-var import_react6 = require("react");
-var import_material3 = require("@mui/material");
 var import_icons_material2 = require("@mui/icons-material");
-
-// call-control-sdk/lib/hooks/useSDKState.ts
-var import_react = require("react");
+var import_material4 = require("@mui/material");
+var import_react6 = require("react");
 
 // call-control-sdk/lib/hooks/sdk-state.ts
 var SDKStateManager = class {
@@ -73,6 +71,7 @@ var SDKStateManager = class {
   getInitialState() {
     return {
       apiKey: null,
+      process: null,
       agentId: "",
       isInitialized: false,
       isHolding: false,
@@ -82,9 +81,11 @@ var SDKStateManager = class {
       controlPanelPosition: { x: 10, y: 10 },
       iframePosition: { x: 10, y: 80 },
       callData: {
-        mobileNumber: "",
-        callReferenceId: "",
-        agentLoginId: ""
+        agent_id: "",
+        status: "",
+        type: "",
+        event_time: "",
+        phone_number: ""
       },
       conferenceLine: [
         {
@@ -94,7 +95,8 @@ var SDKStateManager = class {
           phone: "",
           isMute: false,
           isHold: false,
-          isCallStart: false
+          isCallStart: false,
+          isMergeCall: false
         },
         {
           line: 2,
@@ -103,7 +105,8 @@ var SDKStateManager = class {
           phone: "",
           isMute: false,
           isHold: false,
-          isCallStart: false
+          isCallStart: false,
+          isMergeCall: false
         },
         {
           line: 3,
@@ -112,7 +115,8 @@ var SDKStateManager = class {
           phone: "",
           isMute: false,
           isHold: false,
-          isCallStart: false
+          isCallStart: false,
+          isMergeCall: false
         },
         {
           line: 4,
@@ -121,7 +125,8 @@ var SDKStateManager = class {
           phone: "",
           isMute: false,
           isHold: false,
-          isCallStart: false
+          isCallStart: false,
+          isMergeCall: false
         },
         {
           line: 5,
@@ -130,7 +135,8 @@ var SDKStateManager = class {
           phone: "",
           isMute: false,
           isHold: false,
-          isCallStart: false
+          isCallStart: false,
+          isMergeCall: false
         }
       ]
     };
@@ -143,6 +149,7 @@ var SDKStateManager = class {
         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,
@@ -158,7 +165,8 @@ var SDKStateManager = class {
             callReferenceId: "",
             agentLoginId: ""
           },
-          conferenceLine: parsedState.conferenceLine || []
+          // 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) {
@@ -170,6 +178,7 @@ var SDKStateManager = class {
       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,
@@ -225,6 +234,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();
@@ -251,46 +265,67 @@ var SDKStateManager = class {
   }
   updateCallData(data) {
     this.state.callData = __spreadValues(__spreadValues({}, this.state.callData), data);
+    this.saveToStorage();
     this.notifyListeners();
   }
   setConferenceLine(line) {
     var _a;
-    const conferenceLineData = (_a = this.state.conferenceLine) == null ? void 0 : _a.map(
-      (each) => {
-        if (each.line === line.line) {
-          return line;
-        }
-        return each;
+    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] = (0, import_react.useState)(sdkStateManager.getState());
-  (0, import_react.useEffect)(() => {
-    const unsubscribe = sdkStateManager.subscribe(() => {
-      setState(sdkStateManager.getState());
-    });
-    return unsubscribe;
-  }, []);
-  return state;
-}
-
 // call-control-sdk/lib/hooks/useDraggable.ts
-var import_react2 = require("react");
+var import_react = require("react");
 function useDraggable(initialPosition, onPositionChange) {
-  const [position, setPosition] = (0, import_react2.useState)(initialPosition);
-  const [isDragging, setIsDragging] = (0, import_react2.useState)(false);
-  const dragRef = (0, import_react2.useRef)(null);
-  const dragStart = (0, import_react2.useRef)({ x: 0, y: 0 });
-  const elementStart = (0, import_react2.useRef)({ x: 0, y: 0 });
-  const updatePosition = (0, import_react2.useCallback)(
+  const [position, setPosition] = (0, import_react.useState)(initialPosition);
+  const [isDragging, setIsDragging] = (0, import_react.useState)(false);
+  const dragRef = (0, import_react.useRef)();
+  const dragStart = (0, import_react.useRef)({ x: 0, y: 0 });
+  const elementStart = (0, import_react.useRef)({ x: 0, y: 0 });
+  const updatePosition = (0, import_react.useCallback)(
     (newPosition) => {
       const element = dragRef.current;
       if (!element) return;
@@ -306,7 +341,7 @@ function useDraggable(initialPosition, onPositionChange) {
     },
     [onPositionChange]
   );
-  const handleStart = (0, import_react2.useCallback)(
+  const handleStart = (0, import_react.useCallback)(
     (clientX, clientY) => {
       setIsDragging(true);
       dragStart.current = { x: clientX, y: clientY };
@@ -346,14 +381,14 @@ function useDraggable(initialPosition, onPositionChange) {
     },
     [position, updatePosition]
   );
-  const handleMouseDown = (0, import_react2.useCallback)(
+  const handleMouseDown = (0, import_react.useCallback)(
     (e) => {
       e.preventDefault();
       handleStart(e.clientX, e.clientY);
     },
     [handleStart]
   );
-  const handleTouchStart = (0, import_react2.useCallback)(
+  const handleTouchStart = (0, import_react.useCallback)(
     (e) => {
       e.preventDefault();
       const touch = e.touches[0];
@@ -372,14 +407,22 @@ function useDraggable(initialPosition, onPositionChange) {
   };
 }
 
-// call-control-sdk/lib/services/request.ts
-var import_react4 = require("react");
-
-// call-control-sdk/lib/services/axios.ts
-var import_axios = __toESM(require("axios"));
+// call-control-sdk/lib/hooks/useSDKState.ts
+var import_react2 = require("react");
+function useSDKState() {
+  const [state, setState] = (0, import_react2.useState)(sdkStateManager.getState());
+  (0, import_react2.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:8095";
+var WS_BASE_URL = "ws://192.168.100.143:8095";
 var VERSION = {
   v1: "/api/v1"
 };
@@ -392,15 +435,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
+var import_react4 = require("react");
 
 // call-control-sdk/lib/services/axios.ts
+var import_axios = __toESM(require("axios"));
 var token = "12345";
 var axiosInstance = import_axios.default.create({
   baseURL: BASE_URL,
@@ -530,21 +584,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 = {
@@ -576,35 +620,196 @@ var usePostRequest = (props = {}) => {
 
 // call-control-sdk/lib/components/dialog.tsx
 var import_icons_material = require("@mui/icons-material");
-var import_material2 = require("@mui/material");
+var import_material3 = require("@mui/material");
 var import_react5 = require("react");
+
+// call-control-sdk/lib/components/styles.ts
+var import_material2 = require("@mui/material");
+var useMyStyles = () => {
+  const theme = (0, import_material2.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
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function ConferenceDialog({
-  onConference,
-  onExit,
-  onEndAllCalls,
-  open,
-  setOpen
-}) {
+function ConferenceDialog({ open, setOpen }) {
   var _a, _b;
   const state = useSDKState();
+  const { disabled, enabled, outlined } = styles_default();
+  const theme = (0, import_material3.useTheme)();
   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();
+    });
+  };
+  (0, import_react5.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_material2.Dialog,
+    import_material3.Dialog,
     {
       open,
       "aria-labelledby": "alert-dialog-title",
       "aria-describedby": "alert-dialog-description",
       fullWidth: true,
       maxWidth: "md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Paper, { sx: { borderRadius: 2 }, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-          import_material2.Box,
+          import_material3.Box,
           {
             sx: {
               display: "flex",
@@ -613,80 +818,27 @@ function ConferenceDialog({
               padding: "4px 16px"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Typography, { variant: "body1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Typography, { variant: "body1", children: [
                 (_a = state == null ? void 0 : state.agentId) != null ? _a : "",
                 " conference"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) })
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) })
             ]
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          import_material2.Stack,
-          {
-            direction: "row",
-            alignItems: "center",
-            justifyContent: "flex-end",
-            mr: 2,
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-              import_material2.Stack,
-              {
-                display: "flex",
-                direction: "row",
-                alignItems: "center",
-                justifyContent: "center",
-                spacing: 1,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                    import_material2.Button,
-                    {
-                      variant: "contained",
-                      color: "success",
-                      onClick: onConference,
-                      sx: {
-                        borderRadius: "10px",
-                        textTransform: "capitalize"
-                      },
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Group, { sx: { px: 0.5 } }),
-                        "Conference"
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                    import_material2.Button,
-                    {
-                      variant: "contained",
-                      color: "error",
-                      onClick: onExit,
-                      sx: {
-                        borderRadius: "10px",
-                        textTransform: "capitalize"
-                      },
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Logout, { sx: { px: 0.5 } }),
-                        "Exit Conference"
-                      ]
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          import_material2.Box,
+          import_material3.Box,
           {
             sx: {
               boxShadow: "0px 1px 2px #e7e5e5ff",
-              padding: "6px",
+              padding: "2px 6px",
               margin: "0px 10px",
               borderRadius: "20px"
             },
             children: (_b = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _b.map((each, index) => {
               var _a2, _b2;
               return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                import_material2.Box,
+                import_material3.Box,
                 {
                   sx: {
                     p: 1,
@@ -697,7 +849,7 @@ function ConferenceDialog({
                   },
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      import_material2.Box,
+                      import_material3.Box,
                       {
                         sx: {
                           color: "white",
@@ -709,11 +861,11 @@ function ConferenceDialog({
                           border: "2px solid primary.main",
                           borderRadius: "10px 50px 50px 10px"
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { children: (_a2 = each == null ? void 0 : each.line) != null ? _a2 : "" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { children: (_a2 = each == null ? void 0 : each.line) != null ? _a2 : "" })
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      import_material2.Typography,
+                      import_material3.Typography,
                       {
                         variant: "body2",
                         sx: {
@@ -727,128 +879,145 @@ function ConferenceDialog({
                         children: (_b2 = each == null ? void 0 : each.status) != null ? _b2 : ""
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                      import_material2.Button,
-                      {
-                        sx: {
-                          textTransform: "capitalize"
-                        },
-                        size: "small",
-                        onClick: () => {
-                          onConferenceLineUpdate(each, { type: "internal" });
-                        },
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Radio, { checked: (each == null ? void 0 : each.type) === "internal" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: "body2", children: "Internal" })
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                      import_material2.Button,
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_material3.Button,
                       {
                         sx: {
                           textTransform: "capitalize"
                         },
                         size: "small",
-                        onClick: () => {
-                          onConferenceLineUpdate(each, { type: "external" });
-                        },
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Radio, { checked: each.type === "external" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: "body2", children: "External" })
-                        ]
+                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { variant: "body2", children: (each == null ? void 0 : each.line) === 1 ? "Internal" : "External" })
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      import_material2.TextField,
+                      import_material3.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__ */ (0, import_jsx_runtime2.jsx)(import_material2.Tooltip, { title: "Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      import_material2.IconButton,
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: "Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_material3.Button,
                       {
+                        variant: (each == null ? void 0 : each.isCallStart) ? "outlined" : "contained",
                         color: "success",
-                        sx: {
-                          bgcolor: "action.hover",
-                          "&:hover": { bgcolor: "action.selected" }
-                        },
+                        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: () => {
-                          onConferenceLineUpdate(each, {
+                          onConferenceCallStart(each, {
                             isCallStart: true,
-                            status: "ON CALL"
+                            status: "ONCALL"
                           });
                         },
                         disabled: each == null ? void 0 : each.isCallStart,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_icons_material.Call,
+                          {
+                            sx: { color: (each == null ? void 0 : each.isCallStart) ? "defalult" : "#fff" }
+                          }
+                        )
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Tooltip, { title: "Merge Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      import_material2.IconButton,
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: "Merge Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_material3.Button,
                       {
-                        color: "info",
-                        sx: {
-                          bgcolor: "action.hover",
-                          "&:hover": { bgcolor: "action.selected" }
+                        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__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.CallSplit, {})
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Tooltip, { title: each.isHold ? "Hold" : "Un Hold", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      import_material2.IconButton,
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: each.isHold ? "Hold" : "Un Hold", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_material3.Button,
                       {
-                        color: each.isHold ? "warning" : "info",
-                        sx: {
-                          bgcolor: "action.hover",
-                          "&:hover": { bgcolor: "action.selected" }
-                        },
+                        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) {
-                            onConferenceLineUpdate(each, { isHold: false });
+                            onHoldOrUnHoldConferenceCall(
+                              each,
+                              { isHold: false },
+                              "UNHOLDUSER"
+                            );
                           } else {
-                            onConferenceLineUpdate(each, { isHold: true });
+                            onHoldOrUnHoldConferenceCall(
+                              each,
+                              { isHold: true },
+                              "HOLDUSER"
+                            );
                           }
                         },
                         disabled: !(each == null ? void 0 : each.isCallStart),
-                        children: each.isHold ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.PlayCircle, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.PauseCircle, {})
+                        children: each.isHold ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.PlayArrow, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Pause, {})
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Tooltip, { title: each.isMute ? "Mute" : "Un Mute", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      import_material2.IconButton,
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: each.isMute ? "Mute" : "Un Mute", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_material3.Button,
                       {
-                        color: each.isMute ? "error" : "info",
-                        sx: {
-                          bgcolor: "action.hover",
-                          "&:hover": { bgcolor: "action.selected" }
-                        },
+                        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) {
-                            onConferenceLineUpdate(each, { isMute: false });
+                            onMuteOrUnMuteConferenceCall(
+                              each,
+                              { isMute: false },
+                              "PLAYUSER"
+                            );
                           } else {
-                            onConferenceLineUpdate(each, { isMute: true });
+                            onMuteOrUnMuteConferenceCall(
+                              each,
+                              { isMute: true },
+                              "MUTEUSER"
+                            );
                           }
                         },
                         disabled: !(each == null ? void 0 : each.isCallStart),
                         children: each.isMute ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.MicOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Mic, {})
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Tooltip, { title: "End Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      import_material2.IconButton,
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: "End Call", children: (each == null ? void 0 : each.line) !== 1 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_material3.Button,
                       {
+                        variant: (each == null ? void 0 : each.isCallStart) ? "contained" : "outlined",
                         color: "error",
-                        sx: {
-                          bgcolor: "action.hover",
-                          "&:hover": { bgcolor: "action.selected" }
-                        },
+                        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: () => {
-                          onConferenceLineUpdate(each, {
+                          onEndConferenceCall(each, {
                             isCallStart: false,
+                            isMergeCall: false,
                             isMute: false,
                             isHold: false,
                             status: "IDLE"
@@ -857,6 +1026,33 @@ function ConferenceDialog({
                         disabled: !(each == null ? void 0 : each.isCallStart),
                         children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.CallEnd, {})
                       }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_material3.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__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_icons_material.CallEnd,
+                          {
+                            sx: {
+                              visibility: "hidden"
+                            }
+                          }
+                        ) })
+                      }
                     ) })
                   ]
                 },
@@ -865,17 +1061,17 @@ function ConferenceDialog({
             })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Box, { textAlign: "center", m: 2, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-          import_material2.Button,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Box, { textAlign: "center", m: 2, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          import_material3.Button,
           {
             variant: "outlined",
             color: "error",
             size: "large",
-            onClick: onEndAllCalls,
+            onClick: onEndAllConferenceCalls,
             sx: { px: 2, borderRadius: "20px", textTransform: "capitalize" },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                import_material2.IconButton,
+                import_material3.IconButton,
                 {
                   sx: {
                     bgcolor: "error.main",
@@ -906,7 +1102,7 @@ function ConferenceDialog({
                   )
                 }
               ),
-              "End Calls"
+              "End Conference"
             ]
           }
         ) })
@@ -915,45 +1111,82 @@ 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] = (0, import_react5.useState)("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);
+    }
   };
+  (0, import_react5.useEffect)(() => {
+    getIdelAgentsList(END_POINT.AGENTS_LIST, {
+      status: "IDLE",
+      active: true
+    });
+    getProcessAndQueuesList(END_POINT.TRANSFER_TO_DETAILS, {
+      status: "ACTIVE",
+      active: true
+    });
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_material2.Dialog,
+    import_material3.Dialog,
     {
       open,
       "aria-labelledby": "alert-dialog-title",
       "aria-describedby": "alert-dialog-description",
-      maxWidth: "xs",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Paper, { sx: { borderRadius: 2 }, children: [
+      fullWidth: true,
+      maxWidth: "md",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-          import_material2.Box,
+          import_material3.Box,
           {
             sx: {
               display: "flex",
@@ -963,13 +1196,13 @@ function CallTransferDialog({ open, setOpen }) {
               boxShadow: "0px 1px 2px #f5f5f5ff"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: "body1", children: " Call Transfer" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) })
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { variant: "body1", children: " Call Transfer" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          import_material2.Box,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          import_material3.Box,
           {
             sx: {
               boxShadow: "1px 1px 4px #d3d3d3ff",
@@ -977,55 +1210,254 @@ function CallTransferDialog({ open, setOpen }) {
               margin: "10px",
               borderRadius: "10px"
             },
-            children: agentList.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-              import_material2.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__ */ (0, import_jsx_runtime2.jsxs)(
-                    import_material2.Typography,
-                    {
-                      variant: "body1",
-                      sx: {
-                        mx: 1,
-                        width: "200px",
-                        maxWidth: "250px",
-                        display: "flex",
-                        alignItems: "center"
-                      },
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.SupportAgent, { sx: { marginRight: "4px" } }),
-                        line.name
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                    import_material2.IconButton,
-                    {
-                      color: "success",
-                      sx: {
-                        bgcolor: "action.hover",
-                        "&:hover": { bgcolor: "action.selected" }
-                      },
-                      onClick: () => {
-                        handleTransferCall();
-                      },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
-                    }
-                  )
-                ]
-              },
-              index
-            ))
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Box, { sx: { display: "flex", gap: 1 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_material3.Button,
+                  {
+                    variant: currentselecteTab === "process" ? "contained" : "outlined",
+                    onClick: () => setCurrentselecteTab("process"),
+                    children: "Process"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_material3.Button,
+                  {
+                    variant: currentselecteTab === "queues" ? "contained" : "outlined",
+                    onClick: () => setCurrentselecteTab("queues"),
+                    children: "Queues"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_material3.Button,
+                  {
+                    variant: currentselecteTab === "agents" ? "contained" : "outlined",
+                    onClick: () => setCurrentselecteTab("agents"),
+                    children: "Agents"
+                  }
+                )
+              ] }),
+              currentselecteTab === "process" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.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__ */ (0, import_jsx_runtime2.jsxs)(
+                  import_material3.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__ */ (0, import_jsx_runtime2.jsxs)(
+                        import_material3.Typography,
+                        {
+                          variant: "body1",
+                          sx: {
+                            mx: 1,
+                            width: "200px",
+                            maxWidth: "250px",
+                            display: "flex",
+                            alignItems: "center"
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.SupportAgent, { sx: { marginRight: "4px" } }),
+                            process.process_name
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        import_material3.IconButton,
+                        {
+                          color: "success",
+                          sx: {
+                            bgcolor: "action.hover",
+                            "&:hover": { bgcolor: "action.selected" }
+                          },
+                          onClick: () => {
+                            handleTransferCall(process, "PROCESS");
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
+                        }
+                      )
+                    ]
+                  },
+                  index
+                )
+              ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_material3.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__ */ (0, import_jsx_runtime2.jsx)(import_material3.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__ */ (0, import_jsx_runtime2.jsxs)(
+                    import_material3.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__ */ (0, import_jsx_runtime2.jsxs)(
+                          import_material3.Typography,
+                          {
+                            variant: "body1",
+                            sx: {
+                              mx: 1,
+                              width: "200px",
+                              maxWidth: "250px",
+                              display: "flex",
+                              alignItems: "center"
+                            },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.SupportAgent, { sx: { marginRight: "4px" } }),
+                              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__ */ (0, import_jsx_runtime2.jsx)(
+                                import_material3.Typography,
+                                {
+                                  variant: "body1",
+                                  sx: {
+                                    fontSize: "12px",
+                                    fontWeight: "600",
+                                    letterSpacing: "0.02em",
+                                    textTransform: "capitalize",
+                                    color: "gray"
+                                  },
+                                  children: "(" + ((_f2 = (_e2 = (_d2 = processAndQueuesList == null ? void 0 : processAndQueuesList.data) == null ? void 0 : _d2.process) == null ? void 0 : _e2.find(
+                                    (process) => process.process_id === queue.process_id
+                                  )) == null ? void 0 : _f2.process_name) + ")"
+                                }
+                              ) : ""
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_material3.IconButton,
+                          {
+                            color: "success",
+                            sx: {
+                              bgcolor: "action.hover",
+                              "&:hover": { bgcolor: "action.selected" }
+                            },
+                            onClick: () => {
+                              handleTransferCall(queue, "QUEUE");
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
+                          }
+                        )
+                      ]
+                    },
+                    index
+                  );
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_material3.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__ */ (0, import_jsx_runtime2.jsx)(import_material3.Box, { sx: { display: "flex", gap: 1 }, children: (idleAgentsList == null ? void 0 : idleAgentsList.length) > 0 ? idleAgentsList.map((agent, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                import_material3.Box,
+                {
+                  sx: {
+                    p: 1,
+                    display: "flex",
+                    alignItems: "center",
+                    boxShadow: "1px 1px 4px #d3d3d3ff",
+                    padding: "6px",
+                    margin: "10px 0px",
+                    borderRadius: "10px",
+                    "&:hover": { bgcolor: "action.selected" }
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      import_material3.Typography,
+                      {
+                        variant: "body1",
+                        sx: {
+                          mx: 1,
+                          width: "200px",
+                          maxWidth: "250px",
+                          display: "flex",
+                          alignItems: "center"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.SupportAgent, { sx: { marginRight: "4px" } }),
+                          agent.name
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_material3.IconButton,
+                      {
+                        color: "success",
+                        sx: {
+                          bgcolor: "action.hover",
+                          "&:hover": { bgcolor: "action.selected" }
+                        },
+                        onClick: () => {
+                          handleTransferCall(agent, "AGENT");
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
+                      }
+                    )
+                  ]
+                },
+                index
+              )) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_material3.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"
+                }
+              ) })
+            ]
           }
         )
       ] })
@@ -1037,27 +1469,29 @@ function EndCallDispositionDialog({
   setOpen,
   onSubmitDisposition
 }) {
+  var _a, _b;
   const [formData, setFormData] = (0, import_react5.useState)({
-    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: ""
@@ -1068,16 +1502,16 @@ function EndCallDispositionDialog({
     setOpen(false);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_material2.Dialog,
+    import_material3.Dialog,
     {
       open,
       "aria-labelledby": "alert-dialog-title",
       "aria-describedby": "alert-dialog-description",
       fullWidth: true,
       maxWidth: "xs",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Paper, { sx: { borderRadius: 2 }, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          import_material2.Box,
+          import_material3.Box,
           {
             sx: {
               display: "flex",
@@ -1086,14 +1520,14 @@ function EndCallDispositionDialog({
               padding: "4px 16px",
               boxShadow: "0px 1px 2px #f5f5f5ff"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Typography, { variant: "body1", m: 1, children: [
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Typography, { variant: "body1", m: 1, children: [
               " ",
               "Call Disposition"
             ] })
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          import_material2.Box,
+          import_material3.Box,
           {
             sx: {
               boxShadow: "1px 1px 4px #d3d3d3ff",
@@ -1101,32 +1535,32 @@ function EndCallDispositionDialog({
               margin: "10px",
               borderRadius: "10px"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Grid, { container: true, spacing: 2, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                import_material2.Autocomplete,
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Grid, { container: true, spacing: 2, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_material3.Autocomplete,
                 {
                   value: formData.disposition,
                   options: dispositionOptions,
                   getOptionLabel: (opt) => opt.label,
                   onChange: (_, val) => handleChange("disposition", val),
                   size: "small",
-                  renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.TextField, __spreadProps(__spreadValues({}, params), { label: "Disposition", fullWidth: true }))
+                  renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.TextField, __spreadProps(__spreadValues({}, params), { label: "Disposition", fullWidth: true }))
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                import_material2.Autocomplete,
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_material3.Autocomplete,
                 {
                   options: followUpOptions,
                   getOptionLabel: (opt) => opt.label,
                   value: formData.followUp,
                   onChange: (_, val) => handleChange("followUp", val),
                   size: "small",
-                  renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.TextField, __spreadProps(__spreadValues({}, params), { label: "Follow Up", fullWidth: true }))
+                  renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.TextField, __spreadProps(__spreadValues({}, params), { label: "Follow Up", fullWidth: true }))
                 }
               ) }),
-              formData.followUp.label === "yes" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  import_material2.TextField,
+              ((_b = (_a = formData == null ? void 0 : formData.followUp) == null ? void 0 : _a.label) == null ? void 0 : _b.toLowerCase()) === "yes" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_material3.TextField,
                   {
                     size: "small",
                     label: "Callback Date",
@@ -1139,8 +1573,8 @@ function EndCallDispositionDialog({
                     fullWidth: true
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  import_material2.TextField,
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_material3.TextField,
                   {
                     size: "small",
                     label: "Hours (0-23)",
@@ -1151,8 +1585,8 @@ function EndCallDispositionDialog({
                     fullWidth: true
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  import_material2.TextField,
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Grid, { size: 6, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_material3.TextField,
                   {
                     size: "small",
                     label: "Minutes (0-59)",
@@ -1167,9 +1601,9 @@ function EndCallDispositionDialog({
             ] })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Box, { textAlign: "right", m: 2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Box, { textAlign: "right", m: 2, children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_material2.Button,
+            import_material3.Button,
             {
               variant: "outlined",
               color: "error",
@@ -1185,7 +1619,7 @@ function EndCallDispositionDialog({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_material2.Button,
+            import_material3.Button,
             {
               variant: "contained",
               color: "primary",
@@ -1200,24 +1634,158 @@ function EndCallDispositionDialog({
     }
   ) });
 }
+function ProcessorListDialog({
+  open,
+  setOpen,
+  processList = [],
+  handleSelectedProcessor
+}) {
+  const handleClose = () => {
+    setOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_material3.Dialog,
+    {
+      open,
+      "aria-labelledby": "alert-dialog-title",
+      "aria-describedby": "alert-dialog-description",
+      maxWidth: "xs",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          import_material3.Box,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              padding: "4px 16px",
+              boxShadow: "0px 1px 2px #f5f5f5ff"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { variant: "body1", children: " Process List" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_material3.Box,
+          {
+            sx: {
+              boxShadow: "1px 1px 4px #d3d3d3ff",
+              padding: "6px 10px",
+              margin: "10px",
+              borderRadius: "10px"
+            },
+            children: (processList == null ? void 0 : processList.length) > 0 ? processList == null ? void 0 : processList.map((process, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_material3.Box,
+              {
+                sx: {
+                  p: 1,
+                  display: "flex",
+                  alignItems: "center",
+                  boxShadow: "1px 1px 4px #d3d3d3ff",
+                  padding: "6px",
+                  margin: "10px 0px",
+                  borderRadius: "10px",
+                  cursor: "pointer",
+                  "&:hover": { bgcolor: "action.selected" }
+                },
+                onClick: () => {
+                  handleSelectedProcessor(process);
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  import_material3.Typography,
+                  {
+                    variant: "body1",
+                    sx: {
+                      mx: 1,
+                      width: "200px",
+                      maxWidth: "250px",
+                      display: "flex",
+                      alignItems: "center"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.SupportAgent, { sx: { marginRight: "4px" } }),
+                      process.process_name
+                    ]
+                  }
+                )
+              },
+              index
+            )) : null
+          }
+        )
+      ] })
+    }
+  ) });
+}
+function CallHistoryDialog({ open, setOpen }) {
+  const handleClose = () => {
+    setOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_material3.Dialog,
+    {
+      open,
+      "aria-labelledby": "alert-dialog-title",
+      "aria-describedby": "alert-dialog-description",
+      fullWidth: true,
+      maxWidth: "md",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          import_material3.Box,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              padding: "4px 16px",
+              boxShadow: "0px 1px 2px #f5f5f5ff"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Typography, { variant: "body1", children: " Call History" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_material3.Box,
+          {
+            sx: {
+              boxShadow: "1px 1px 4px #d3d3d3ff",
+              margin: "10px",
+              borderRadius: "10px",
+              textAlign: "center",
+              fontSize: "16px",
+              fontWeight: "bold"
+            },
+            p: 6,
+            children: "Comming Soon..."
+          }
+        )
+      ] })
+    }
+  ) });
+}
 
 // call-control-sdk/lib/components/callControlPanel.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function CallControlPanel({ onDataChange }) {
-  const theme = (0, import_material3.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 = (0, import_material4.useTheme)();
+  const { disabled, enabled, outlined } = styles_default();
   const state = useSDKState();
   const { showToast } = useToast();
+  const webSocketRef = (0, import_react6.useRef)(null);
   const [anchorEl, setAnchorEl] = (0, import_react6.useState)(null);
   const [showIframe, setShowIframe] = (0, import_react6.useState)(true);
-  const [statusAnchorEl, setStatusAnchorEl] = (0, import_react6.useState)(
-    null
-  );
-  const [dialerAnchorEl, setDialerAnchorEl] = (0, import_react6.useState)(
-    null
-  );
+  const [statusAnchorEl, setStatusAnchorEl] = (0, import_react6.useState)(null);
+  const [dialerAnchorEl, setDialerAnchorEl] = (0, import_react6.useState)(null);
   const [open, setOpen] = (0, import_react6.useState)(false);
   const [openCallTransfer, setOpenCallTransfer] = (0, import_react6.useState)(false);
   const [openCallDisposition, setOpenCallDisposition] = (0, import_react6.useState)(false);
+  const [openProcessorDialog, setOpenProcessorDialog] = (0, import_react6.useState)(false);
+  const [openCallHistoryDialog, setOpenCallHistoryDialog] = (0, import_react6.useState)(false);
   const [phoneNumber, setPhoneNumber] = (0, import_react6.useState)("");
   const [callDuration, setCallDuration] = (0, import_react6.useState)(0);
   const { position, isDragging, dragRef, handleMouseDown, handleTouchStart } = useDraggable(
@@ -1234,39 +1802,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();
-  (0, import_react6.useEffect)(() => {
-    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]);
-  (0, import_react6.useEffect)(() => {
-    if (onDataChange) {
-      onDataChange(state.callData);
-    }
-  }, [state.callData, onDataChange]);
   const formatDuration = (0, import_react6.useCallback)((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);
   };
@@ -1287,24 +1862,19 @@ 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);
   };
@@ -1318,415 +1888,423 @@ function CallControlPanel({ onDataChange }) {
       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;
+  (0, import_react6.useEffect)(() => {
+    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]);
+  (0, import_react6.useEffect)(() => {
+    if (onDataChange) {
+      onDataChange(state.callData);
+    }
+  }, [state.callData, onDataChange]);
+  (0, import_react6.useEffect)(() => {
+    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]);
+  (0, import_react6.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { children: Boolean(openProcessorDialog) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      ProcessorListDialog,
+      {
+        processList: processList == null ? void 0 : processList.processes,
+        open: openProcessorDialog,
+        setOpen: setOpenProcessorDialog,
+        handleSelectedProcessor: (data) => {
+          sdkStateManager.setProcess(data);
+        }
+      }
+    ) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Fade, { in: true, timeout: 300, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_material3.Paper,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_material4.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__ */ (0, import_jsx_runtime3.jsxs)(
-          import_material3.Box,
+        in: true,
+        timeout: 300,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_material4.Paper,
           {
+            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__ */ (0, import_jsx_runtime3.jsxs)(
-                import_material3.Box,
-                {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center"
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                      import_material3.Typography,
-                      {
-                        variant: "h6",
-                        sx: {
-                          color: state.status === "on call" ? "success.main" : "text.secondary",
-                          marginRight: "8px",
-                          display: "flex",
-                          justifyContent: "space-between",
-                          alignItems: "center"
-                        },
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                            import_material3.IconButton,
-                            {
-                              component: "div",
-                              sx: {
-                                cursor: "all-scroll"
-                              },
-                              onMouseDown: handleMouseDown,
-                              onTouchStart: handleTouchStart,
-                              children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.DragIndicator, {}),
-                                " "
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                            import_material3.Box,
-                            {
-                              sx: {
-                                marginRight: "10px"
-                              },
-                              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Tooltip, { title: "Dial", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                                import_material3.IconButton,
-                                {
-                                  onClick: (e) => {
-                                    if (state.status !== "on call" && state.status !== "break") {
-                                      handleOpenDialer(e);
-                                    }
-                                  },
-                                  sx: {
-                                    bgcolor: "action.hover",
-                                    "&:hover": {
-                                      bgcolor: "warning"
-                                    }
-                                  },
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                                    import_icons_material2.WifiCalling3,
-                                    {
-                                      sx: {
-                                        color: state.status === "on call" || state.status === "break" ? "action.selected" : "success.main"
-                                      }
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              import_material4.Box,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                    import_material4.Box,
+                    {
+                      sx: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                          import_material4.IconButton,
+                          {
+                            component: "div",
+                            size: "small",
+                            sx: {
+                              cursor: "all-scroll"
+                            },
+                            onMouseDown: handleMouseDown,
+                            onTouchStart: handleTouchStart,
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.DragIndicator, {}),
+                              " "
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_material4.Box,
+                          {
+                            sx: {
+                              marginRight: "10px"
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Dial", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              import_material4.IconButton,
+                              {
+                                size: "small",
+                                onClick: (e) => {
+                                  var _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__ */ (0, import_jsx_runtime3.jsx)(
+                                  import_icons_material2.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__ */ (0, import_jsx_runtime3.jsxs)(
-                      import_material3.ButtonGroup,
-                      {
-                        disableElevation: true,
-                        variant: "contained",
-                        "aria-label": "Disabled button group",
-                        sx: {
-                          marginRight: "10px"
-                        },
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                            import_material3.Button,
-                            {
-                              sx: {
-                                fontWeight: "bold",
-                                borderRadius: "16px",
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "space-between"
-                              },
-                              variant: "outlined",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                                import_material3.Typography,
-                                {
-                                  width: 70,
-                                  variant: "body2",
-                                  sx: {
-                                    fontWeight: "bold"
-                                  },
-                                  children: state.status.toUpperCase()
-                                }
-                              )
-                            }
-                          ),
-                          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                            import_material3.Button,
-                            {
-                              sx: {
-                                borderRadius: "16px",
-                                width: 20
-                              },
-                              variant: "outlined",
-                              onClick: handleOpenAgentStatus,
-                              disabled: Boolean(state.callStartTime),
-                              children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.ArrowDropDown, {}),
-                                " "
-                              ]
-                            }
-                          )
-                        ]
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                import_material3.Box,
-                {
-                  sx: {
-                    display: "flex",
-                    gap: 1,
-                    justifyContent: "center",
-                    alignItems: "center"
-                  },
-                  children: [
-                    state.status === "break" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Tooltip, { title: "Agent Ready", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      import_material3.IconButton,
-                      {
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          handleAgentReady("idle");
-                        },
-                        color: "default",
-                        sx: {
-                          bgcolor: "error.dark",
-                          "&:hover": {
-                            bgcolor: "error.light"
+                                  }
+                                )
+                              }
+                            ) })
                           }
-                        },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                          import_icons_material2.SupportAgent,
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_material4.Typography,
                           {
                             sx: {
-                              color: "white"
-                            }
+                              color: "success.main",
+                              width: "40px",
+                              marginRight: "10px"
+                            },
+                            children: formatDuration(callDuration)
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_material4.Typography,
+                          {
+                            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__ */ (0, import_jsx_runtime3.jsxs)(
+                          import_material4.Button,
+                          {
+                            size: "small",
+                            variant: "text",
+                            onClick: handleOpenAgentStatus,
+                            disabled: Boolean(state.callStartTime),
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.ArrowDropDown, {}),
+                              " "
+                            ]
                           }
                         )
-                      }
-                    ) }),
-                    state.status === "wrap up" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Tooltip, { title: "Redial", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      import_material3.IconButton,
-                      {
-                        onClick: (e) => {
-                          e.stopPropagation();
-                        },
-                        color: "default",
-                        sx: {
-                          bgcolor: "action.hover",
-                          "&:hover": {
-                            bgcolor: "warning"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                    import_material4.Box,
+                    {
+                      sx: {
+                        display: "flex",
+                        gap: 1,
+                        justifyContent: "center",
+                        alignItems: "center"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Agent Ready", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_material4.Button,
+                          {
+                            variant: ((_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__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.SupportAgent, {})
                           }
-                        },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Tty, {})
-                      }
-                    ) }),
-                    state.status === "on call" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Tooltip, { title: state.isHolding ? "Resume" : "Hold", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      import_material3.IconButton,
-                      {
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          handleHoldToggle();
-                        },
-                        color: state.isHolding ? "warning" : "default",
-                        sx: {
-                          bgcolor: state.isHolding ? "warning.info" : "action.hover"
-                        },
-                        children: state.isHolding ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.PlayCircle, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.PauseCircle, {})
-                      }
-                    ) }),
-                    state.status === "on call" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Tooltip, { title: state.isMuted ? "Unmute" : "Mute", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      import_material3.IconButton,
-                      {
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          handleMuteToggle();
-                        },
-                        color: state.isMuted ? "error" : "default",
-                        sx: {
-                          bgcolor: state.isMuted ? "error.info" : "action.hover"
-                        },
-                        children: state.isMuted ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.MicOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Mic, {})
-                      }
-                    ) }),
-                    state.status !== "on call" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Tooltip, { title: "Queue", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      import_material3.IconButton,
-                      {
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          handleOpenQueueCounts(e);
-                        },
-                        color: "default",
-                        sx: {
-                          bgcolor: "action.hover",
-                          "&:hover": {
-                            bgcolor: "warning"
+                        ) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: state.isHolding ? "Resume" : "Hold", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_material4.Button,
+                          {
+                            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__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.PlayArrow, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Pause, {})
                           }
-                        },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Layers, {})
-                      }
-                    ) }),
-                    state.status === "on call" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Tooltip, { title: "Conference Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      import_material3.IconButton,
-                      {
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          setOpenCallTransfer(true);
-                        },
-                        color: "default",
-                        sx: {
-                          bgcolor: "action.hover",
-                          "&:hover": {
-                            bgcolor: "warning"
+                        ) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: state.isMuted ? "Unmute" : "Mute", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_material4.Button,
+                          {
+                            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__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.MicOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Mic, {})
                           }
-                        },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.TransferWithinAStation, {})
-                      }
-                    ) }),
-                    state.status === "on call" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Tooltip, { title: "Conference Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      import_material3.IconButton,
-                      {
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          setOpen(true);
-                        },
-                        color: "default",
-                        sx: {
-                          bgcolor: "action.hover",
-                          "&:hover": {
-                            bgcolor: "warning"
+                        ) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Transfer Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_material4.Button,
+                          {
+                            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__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.TransferWithinAStation, {})
                           }
-                        },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Groups, {})
-                      }
-                    ) }),
-                    state.status === "on call" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      import_material3.Tooltip,
-                      {
-                        title: state.status === "on call" ? "End Call" : "Start Call",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                          import_material3.IconButton,
+                        ) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Conference Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_material4.Button,
+                          {
+                            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__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Group, {})
+                          }
+                        ) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Call History", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_material4.Button,
                           {
+                            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__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.History, {})
+                          }
+                        ) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "End Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          import_material4.Button,
+                          {
+                            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__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.CallEnd, {})
                           }
-                        )
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
+                        ) })
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
           }
         )
       }
-    ) }),
-    Boolean(showIframe) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Fade, { in: true, timeout: 300, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_material3.Paper,
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_material4.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__ */ (0, import_jsx_runtime3.jsxs)(
-          import_material3.Box,
+          import_material4.Paper,
           {
+            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__ */ (0, import_jsx_runtime3.jsxs)(
-                import_material3.Box,
+                import_material4.Box,
                 {
                   sx: {
-                    width: "100%",
-                    height: "auto",
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "space-between",
@@ -1744,25 +2322,26 @@ function CallControlPanel({ onDataChange }) {
                       }
                     ),
                     " ",
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.IconButton, { onClick: () => setShowIframe(false), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Close, {}) })
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.IconButton, { onClick: () => setShowIframe(false), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Close, {}) })
                   ]
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "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__ */ (0, import_jsx_runtime3.jsx)(
-      import_material3.Menu,
+      import_material4.Menu,
       {
         anchorEl: dialerAnchorEl,
         open: Boolean(dialerAnchorEl),
@@ -1772,7 +2351,7 @@ function CallControlPanel({ onDataChange }) {
           zIndex: 99999
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-          import_material3.Box,
+          import_material4.Box,
           {
             sx: {
               all: "unset",
@@ -1783,7 +2362,7 @@ function CallControlPanel({ onDataChange }) {
             },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                import_material3.TextField,
+                import_material4.TextField,
                 {
                   size: "small",
                   value: phoneNumber,
@@ -1794,7 +2373,7 @@ function CallControlPanel({ onDataChange }) {
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                import_material3.IconButton,
+                import_material4.IconButton,
                 {
                   color: "info",
                   onClick: () => {
@@ -1809,7 +2388,7 @@ function CallControlPanel({ onDataChange }) {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      import_material3.Menu,
+      import_material4.Menu,
       {
         anchorEl: statusAnchorEl,
         open: Boolean(statusAnchorEl),
@@ -1819,13 +2398,13 @@ function CallControlPanel({ onDataChange }) {
           zIndex: 99999
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.MenuItem, { onClick: () => handleUpdateAgentStatus("break"), children: "- Lunch Break" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.MenuItem, { onClick: () => handleUpdateAgentStatus("break"), children: "- Tea Break" })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.MenuItem, { onClick: () => handleUpdateAgentStatus("Lunch"), children: "- Lunch" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.MenuItem, { onClick: () => handleUpdateAgentStatus("Tea"), children: "- Tea" })
         ]
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_material3.Menu,
+      import_material4.Menu,
       {
         anchorEl,
         open: Boolean(anchorEl),
@@ -1835,7 +2414,7 @@ function CallControlPanel({ onDataChange }) {
           zIndex: 99999
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-          import_material3.Box,
+          import_material4.Box,
           {
             sx: {
               display: "flex",
@@ -1848,7 +2427,7 @@ function CallControlPanel({ onDataChange }) {
             },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                import_material3.Chip,
+                import_material4.Chip,
                 {
                   icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Layers, { color: "secondary" }),
                   variant: "outlined",
@@ -1859,7 +2438,7 @@ function CallControlPanel({ onDataChange }) {
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                import_material3.Chip,
+                import_material4.Chip,
                 {
                   icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Pending, { color: "info" }),
                   label: "Pending - 99+",
@@ -1870,7 +2449,7 @@ function CallControlPanel({ onDataChange }) {
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                import_material3.Chip,
+                import_material4.Chip,
                 {
                   icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Upcoming, { color: "success" }),
                   variant: "outlined",
@@ -1889,10 +2468,7 @@ function CallControlPanel({ onDataChange }) {
       ConferenceDialog,
       {
         open,
-        setOpen,
-        onConference: () => console.log("Conference"),
-        onExit: () => console.log("Exit"),
-        onEndAllCalls: () => console.log("End All Calls")
+        setOpen
       }
     ),
     Boolean(openCallTransfer) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -1909,6 +2485,13 @@ function CallControlPanel({ onDataChange }) {
         setOpen: setOpenCallDisposition,
         onSubmitDisposition: handleEndCall
       }
+    ),
+    Boolean(openCallHistoryDialog) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      CallHistoryDialog,
+      {
+        open: openCallHistoryDialog,
+        setOpen: setOpenCallHistoryDialog
+      }
     )
   ] });
 }
@@ -2318,23 +2901,54 @@ if (typeof window !== "undefined") {
   window.EventTracker = eventTracker;
 }
 
+// call-control-sdk/lib/hooks/useLogout.ts
+var import_react7 = require("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 = (0, import_react7.useCallback)(() => {
+    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
-}) {
+function initSDK({ apiKey, tenantId, agentId }) {
   sdkStateManager.initialize(apiKey, agentId);
   eventTracker.init({
     apiKey,
     tenantId,
     agentId,
-    baseUrl
+    baseUrl: BASE_URL
   });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CallControlPanel,
-  initSDK
+  initSDK,
+  useLogout
 });