call-control-sdk 6.4.5-beta.11 → 6.4.5-beta.12

package/dist/index.js

@@ -1360,8 +1360,8 @@ var styles_default = useStyles;
 
 // call-control-sdk/lib/components/dialog.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var ConferenceTableRow = ({ each, isMergeCall }) => {
-  var _a2, _b, _c, _d, _e;
+var ConferenceTableRow = ({ each }) => {
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K;
   const state = useSDKState();
   const { showToast } = useToast();
   const { disabled, enabled, outlined } = styles_default({
@@ -1373,7 +1373,6 @@ var ConferenceTableRow = ({ each, isMergeCall }) => {
   const [conferenceCallStart, setConferenceCallStart] = (0, import_react10.useState)(false);
   const [conferenceCallMerge, setConferenceCallMerge] = (0, import_react10.useState)(false);
   const [conferenceCallHoldOrUnHold, setConferenceCallHoldOrUnHold] = (0, import_react10.useState)(false);
-  const [conferenceCallMuteOrUnMute, setConferenceCallMuteOrUnMute] = (0, import_react10.useState)(false);
   const [conferenceCallEnd, setConferenceCallEnd] = (0, import_react10.useState)(false);
   const onConferenceLineUpdate = (line, data) => {
     sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
@@ -1449,30 +1448,6 @@ var ConferenceTableRow = ({ each, isMergeCall }) => {
       setConferenceCallHoldOrUnHold(false);
     });
   };
-  const onMuteOrUnMuteConferenceCall = (line, data, type) => {
-    var _a3, _b2, _c2, _d2;
-    const line_used = __spreadValues(__spreadValues({}, line), data);
-    setConferenceCallMuteOrUnMute(true);
-    const payload = {
-      action: "EXTERNAL_CONFERENCE",
-      operation: type,
-      channel_no: type === "MUTEUSER" ? `mute${line_used.line}` : `play${line_used.line}`,
-      userid: (_b2 = (_a3 = state.callData) == null ? void 0 : _a3.agent_id) != null ? _b2 : "",
-      thirdparty_no: line_used.phone,
-      process: (_d2 = (_c2 = state.callData) == null ? void 0 : _c2.process_name) != null ? _d2 : ""
-    };
-    axios_default.post(END_POINT.CONFERENCE_CALL_MUTE_OT_UN_MUTE, payload).then((res) => {
-      var _a4;
-      showToast((_a4 = res.data) == null ? void 0 : _a4.message, "success");
-      sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
-    }).catch((err) => {
-      var _a4, _b3, _c3, _d3;
-      const message = ((_b3 = (_a4 = err.response) == null ? void 0 : _a4.data) == null ? void 0 : _b3.detail) || ((_d3 = (_c3 = err.response) == null ? void 0 : _c3.data) == null ? void 0 : _d3.message) || err.message || "An unknown error occurred";
-      showToast(message, "error");
-    }).finally(() => {
-      setConferenceCallMuteOrUnMute(false);
-    });
-  };
   const onEndConferenceCall = (line, data) => {
     var _a3, _b2, _c2, _d2;
     const line_used = __spreadValues(__spreadValues({}, line), data);
@@ -1498,6 +1473,38 @@ var ConferenceTableRow = ({ each, isMergeCall }) => {
       setConferenceCallEnd(false);
     });
   };
+  const [holdOrUnHold, { isLoading: holdOrUnHoldLoading }] = usePostRequest({
+    onSuccess: () => {
+      sdkStateManager.setHolding(!state.isHolding);
+    },
+    onError: (error) => {
+      console.log("\u274C Hold operation error:", error);
+    }
+  });
+  const [muteOrUnMute, { isLoading: muteOrUnMuteLoading }] = usePostRequest({
+    onSuccess: () => {
+      sdkStateManager.setMuted(!state.isMuted);
+    },
+    onError: (error) => {
+      console.log("\u274C Mute operation error:", error);
+    }
+  });
+  const handleHoldToggle = () => {
+    var _a3;
+    const payload = {
+      action: ((_a3 = state.callData) == null ? void 0 : _a3.hold) === 1 ? "UNHOLD" : "HOLD",
+      userId: state.agentId
+    };
+    holdOrUnHold(END_POINT.HOLD_CALL, payload);
+  };
+  const handleMuteToggle = () => {
+    var _a3;
+    const payload = {
+      action: ((_a3 = state.callData) == null ? void 0 : _a3.mute) === 1 ? "UNMUTE" : "MUTE",
+      userId: state.agentId
+    };
+    muteOrUnMute(END_POINT.MUTE_CALL, payload);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     import_material3.TableRow,
     {
@@ -1509,7 +1516,9 @@ var ConferenceTableRow = ({ each, isMergeCall }) => {
           import_material3.TableCell,
           {
             sx: {
-              padding: "6px"
+              padding: "6px",
+              flex: 1,
+              width: "100px"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Typography, { children: [
               "Line ",
@@ -1522,7 +1531,8 @@ var ConferenceTableRow = ({ each, isMergeCall }) => {
           import_material3.TableCell,
           {
             sx: {
-              padding: "6px"
+              padding: "6px",
+              width: "100px"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               import_material3.Typography,
@@ -1530,7 +1540,8 @@ var ConferenceTableRow = ({ each, isMergeCall }) => {
                 variant: "body2",
                 sx: {
                   px: 1,
-                  borderRadius: "10px"
+                  borderRadius: "10px",
+                  flex: 1
                 },
                 children: (_e = each == null ? void 0 : each.status) != null ? _e : ""
               }
@@ -1541,25 +1552,8 @@ var ConferenceTableRow = ({ each, isMergeCall }) => {
           import_material3.TableCell,
           {
             sx: {
-              padding: "6px"
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              import_material3.Button,
-              {
-                sx: {
-                  textTransform: "capitalize"
-                },
-                size: "small",
-                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_material3.TableCell,
-          {
-            sx: {
-              padding: "6px"
+              padding: "6px",
+              flex: 1
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               import_material3.TextField,
@@ -1568,7 +1562,7 @@ var ConferenceTableRow = ({ each, isMergeCall }) => {
                 placeholder: "Phone Number",
                 fullWidth: true,
                 value: (each == null ? void 0 : each.phone) || "",
-                disabled: (each == null ? void 0 : each.line) === 1 || (each == null ? void 0 : each.status) === "ONCALL" || (each == null ? void 0 : each.status) === "DISCONNECTED" || (each == null ? void 0 : each.status) === "CONFERENCE" || (each == null ? void 0 : each.status) === "HOLD" || (each == null ? void 0 : each.status) === "MUTE",
+                disabled: (each == null ? void 0 : each.line) === 1 || (each == null ? void 0 : each.status) === "ONCALL" || (each == null ? void 0 : each.status) === "DISCONNECTED" || (each == null ? void 0 : each.status) === "CONFERENCE" || (each == null ? void 0 : each.status) === "HOLD" || (each == null ? void 0 : each.status) === "MUTE" || (each == null ? void 0 : each.status) === "DIALING" || (each == null ? void 0 : each.status) === "RINGING",
                 onChange: (e) => {
                   onConferenceLineUpdate(each, { phone: e.target.value });
                 }
@@ -1580,18 +1574,172 @@ var ConferenceTableRow = ({ each, isMergeCall }) => {
           import_material3.TableCell,
           {
             sx: {
-              padding: "6px"
+              padding: "6px",
+              // width: "200px",
+              flex: 1
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
               import_material3.Box,
               {
                 sx: {
+                  width: "100%",
                   display: "flex",
                   alignItems: "center",
-                  justifyContent: "space-around"
+                  justifyContent: "flex-start",
+                  gap: "10px"
                 },
                 children: [
-                  each.line !== 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: "Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  (each == null ? void 0 : each.line) === 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: ((_f = state.callData) == null ? void 0 : _f.hold) === 1 ? "Resume" : "Hold", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    import_material3.Button,
+                    {
+                      variant: ((_g = state.callData) == null ? void 0 : _g.hold) === 1 && ((_i = (_h = state.callData) == null ? void 0 : _h.status) == null ? void 0 : _i.toUpperCase()) === "ONCALL" ? "contained" : "outlined",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleHoldToggle();
+                      },
+                      sx: ((_j = state.callData) == null ? void 0 : _j.hold) === 1 && ((_l = (_k = state.callData) == null ? void 0 : _k.status) == null ? void 0 : _l.toUpperCase()) === "ONCALL" ? __spreadValues({}, enabled) : ((_n = (_m = state.callData) == null ? void 0 : _m.status) == null ? void 0 : _n.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                      disabled: ((_p = (_o = state.callData) == null ? void 0 : _o.status) == null ? void 0 : _p.toUpperCase()) !== "ONCALL" && ((_q = state.callData) == null ? void 0 : _q.hold) !== 1 || holdOrUnHoldLoading,
+                      children: ((_r = state.callData) == null ? void 0 : _r.hold) === 1 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                        import_material3.Box,
+                        {
+                          sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            gap: "5px",
+                            width: "98px"
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              import_material3.Typography,
+                              {
+                                sx: {
+                                  color: ((_s = state.callData) == null ? void 0 : _s.hold) === 1 ? "#fff" : "initial"
+                                },
+                                children: "Unhold"
+                              }
+                            ),
+                            holdOrUnHoldLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              import_material3.CircularProgress,
+                              {
+                                size: "16px",
+                                sx: {
+                                  color: theme.palette.primary.main
+                                }
+                              }
+                            ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.PlayArrow, {})
+                          ]
+                        }
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                        import_material3.Box,
+                        {
+                          sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            gap: "5px",
+                            width: "98px"
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              import_material3.Typography,
+                              {
+                                sx: {
+                                  color: ((_t = state.callData) == null ? void 0 : _t.hold) === 1 ? "#fff" : "#000"
+                                },
+                                children: "Hold"
+                              }
+                            ),
+                            holdOrUnHoldLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              import_material3.CircularProgress,
+                              {
+                                size: "16px",
+                                sx: {
+                                  color: theme.palette.primary.main
+                                }
+                              }
+                            ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Pause, {})
+                          ]
+                        }
+                      )
+                    }
+                  ) }),
+                  (each == null ? void 0 : each.line) === 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: ((_u = state.callData) == null ? void 0 : _u.mute) === 1 ? "Unmute" : "Mute", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    import_material3.Button,
+                    {
+                      variant: state.isHolding ? "outlined" : ((_v = state.callData) == null ? void 0 : _v.mute) === 1 && ((_x = (_w = state.callData) == null ? void 0 : _w.status) == null ? void 0 : _x.toUpperCase()) === "ONCALL" ? "contained" : "outlined",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleMuteToggle();
+                      },
+                      sx: ((_y = state.callData) == null ? void 0 : _y.hold) === 1 ? __spreadValues({}, disabled) : ((_z = state.callData) == null ? void 0 : _z.mute) === 1 && ((_B = (_A = state.callData) == null ? void 0 : _A.status) == null ? void 0 : _B.toUpperCase()) === "ONCALL" ? __spreadValues({}, enabled) : ((_D = (_C = state.callData) == null ? void 0 : _C.status) == null ? void 0 : _D.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                      disabled: ((_F = (_E = state.callData) == null ? void 0 : _E.status) == null ? void 0 : _F.toUpperCase()) !== "ONCALL" && ((_G = state.callData) == null ? void 0 : _G.mute) !== 1 || muteOrUnMuteLoading || ((_H = state.callData) == null ? void 0 : _H.hold) === 1,
+                      children: ((_I = state.callData) == null ? void 0 : _I.mute) === 1 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                        import_material3.Box,
+                        {
+                          sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            gap: "5px",
+                            width: "98px"
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              import_material3.Typography,
+                              {
+                                sx: {
+                                  color: ((_J = state.callData) == null ? void 0 : _J.mute) === 1 ? "#fff" : "initial"
+                                },
+                                children: "Unmute"
+                              }
+                            ),
+                            muteOrUnMuteLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              import_material3.CircularProgress,
+                              {
+                                size: "16px",
+                                sx: {
+                                  color: theme.palette.primary.main
+                                }
+                              }
+                            ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.MicOff, {})
+                          ]
+                        }
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                        import_material3.Box,
+                        {
+                          sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            gap: "5px",
+                            width: "98px"
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              import_material3.Typography,
+                              {
+                                sx: {
+                                  color: ((_K = state.callData) == null ? void 0 : _K.mute) === 1 ? "#fff" : "#000"
+                                },
+                                children: "Mute"
+                              }
+                            ),
+                            muteOrUnMuteLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              import_material3.CircularProgress,
+                              {
+                                size: "16px",
+                                sx: {
+                                  color: theme.palette.primary.main
+                                }
+                              }
+                            ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Mic, {})
+                          ]
+                        }
+                      )
+                    }
+                  ) }),
+                  (each == null ? void 0 : each.line) !== 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: "Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     import_material3.Button,
                     {
                       variant: (each == null ? void 0 : each.status) !== "IDLE" ? "outlined" : "contained",
@@ -1628,31 +1776,25 @@ var ConferenceTableRow = ({ each, isMergeCall }) => {
                       )
                     }
                   ) }),
-                  each.line === 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: "Merge Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  (each == null ? void 0 : each.line) !== 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: "Merge Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     import_material3.Button,
                     {
-                      variant: isMergeCall ? "contained" : "outlined",
-                      sx: isMergeCall ? __spreadProps(__spreadValues({}, enabled), { padding: "0px 16px" }) : __spreadProps(__spreadValues({}, disabled), { padding: "0px 16px" }),
+                      variant: (each == null ? void 0 : each.status) === "ONCALL" ? "contained" : "outlined",
+                      sx: (each == null ? void 0 : each.status) === "ONCALL" ? __spreadValues({}, enabled) : __spreadValues({}, disabled),
                       onClick: () => {
                         onMergeConferenceCall(each, {
                           isMergeCall: true
                         });
                       },
-                      disabled: !isMergeCall || conferenceCallMerge,
-                      children: [
-                        (each == null ? void 0 : each.isMergeCall) ? "Merged" : "Merge",
-                        conferenceCallMerge ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.CircularProgress, { size: "20px" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.CallSplit, {})
-                      ]
+                      disabled: (each == null ? void 0 : each.status) !== "ONCALL",
+                      children: conferenceCallMerge ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.CircularProgress, { size: "20px" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.CallSplit, {})
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: each.status !== "HOLD" ? "Hold" : "Un Hold", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  (each == null ? void 0 : each.line) !== 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: (each == null ? void 0 : each.status) !== "HOLD" ? "Hold" : "Un Hold", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     import_material3.Button,
                     {
-                      variant: each.status === "HOLD" ? "contained" : "outlined",
-                      sx: each.status === "DISCONNECTED" || (each == null ? void 0 : each.status) === "ONCALL" || (each == null ? void 0 : each.status) === "CONFERENCE" ? __spreadValues({}, disabled) : (each == null ? void 0 : each.status) === "ONCALL" || (each == null ? void 0 : each.status) === "CONFERENCE" ? (
-                        // each.status === "IDLE"
-                        __spreadValues({}, outlined)
-                      ) : __spreadValues({}, disabled),
+                      variant: (each == null ? void 0 : each.status) === "HOLD" ? "contained" : "outlined",
+                      sx: (each == null ? void 0 : each.status) === "CONFERENCE" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
                       onClick: () => {
                         if (each.status === "HOLD") {
                           onHoldOrUnHoldConferenceCall(each, { isHold: false }, "UNHOLDUSER");
@@ -1660,7 +1802,11 @@ var ConferenceTableRow = ({ each, isMergeCall }) => {
                           onHoldOrUnHoldConferenceCall(each, { isHold: true }, "HOLDUSER");
                         }
                       },
-                      disabled: (each == null ? void 0 : each.status) === "DISCONNECTED" || (each == null ? void 0 : each.status) === "IDLE" || conferenceCallHoldOrUnHold,
+                      disabled: (each == null ? void 0 : each.status) !== "CONFERENCE" && (each == null ? void 0 : each.status) !== "HOLD" || // each?.status === "IDLE" ||
+                      // each?.status === "ONCALL" ||
+                      // each?.status === "DIALING" ||
+                      // each?.status === "RINGING" ||
+                      conferenceCallHoldOrUnHold,
                       children: conferenceCallHoldOrUnHold ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         import_material3.CircularProgress,
                         {
@@ -1672,31 +1818,7 @@ var ConferenceTableRow = ({ each, isMergeCall }) => {
                       ) : each.status === "HOLD" ? /* @__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_material3.Tooltip, { title: each.status !== "MUTE" ? "Mute" : "Un Mute", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                    import_material3.Button,
-                    {
-                      variant: each.status === "MUTE" ? "contained" : "outlined",
-                      sx: each.status === "DISCONNECTED" || (each == null ? void 0 : each.status) === "ONCALL" || (each == null ? void 0 : each.status) === "CONFERENCE" ? __spreadValues({}, disabled) : (each == null ? void 0 : each.status) === "ONCALL" || (each == null ? void 0 : each.status) === "CONFERENCE" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
-                      onClick: () => {
-                        if (each.status === "MUTE") {
-                          onMuteOrUnMuteConferenceCall(each, { isMute: false }, "PLAYUSER");
-                        } else {
-                          onMuteOrUnMuteConferenceCall(each, { isMute: true }, "MUTEUSER");
-                        }
-                      },
-                      disabled: (each == null ? void 0 : each.status) === "DISCONNECTED" || (each == null ? void 0 : each.status) === "IDLE" || (each == null ? void 0 : each.status) === "HOLD" || conferenceCallMuteOrUnMute,
-                      children: conferenceCallMuteOrUnMute ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                        import_material3.CircularProgress,
-                        {
-                          size: "20px",
-                          sx: {
-                            color: theme.palette.primary.main
-                          }
-                        }
-                      ) : each.status === "MUTE" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.MicOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Mic, {})
-                    }
-                  ) }),
-                  (each == null ? void 0 : each.line) !== 1 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: "End Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  (each == null ? void 0 : each.line) !== 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Tooltip, { title: "End Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     import_material3.Button,
                     {
                       variant: (each == null ? void 0 : each.status) !== "IDLE" && (each == null ? void 0 : each.status) !== "DISCONNECTED" ? "contained" : "outlined",
@@ -1730,32 +1852,7 @@ var ConferenceTableRow = ({ each, isMergeCall }) => {
                         }
                       ) : /* @__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",
-                      color: "error",
-                      sx: {
-                        display: "none"
-                      },
-                      onClick: () => {
-                        onEndConferenceCall(each, {
-                          isCallStart: false,
-                          isMergeCall: false,
-                          isMute: false,
-                          isHold: false
-                        });
-                      },
-                      disabled: (each == null ? void 0 : each.status) === "IDLE" || (each == null ? void 0 : each.status) === "DISCONNECTED" || conferenceCallEnd,
-                      children: conferenceCallEnd ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                        import_material3.CircularProgress,
-                        {
-                          size: "20px",
-                          color: "error"
-                        }
-                      ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.CallEnd, {})
-                    }
-                  )
+                  ) })
                 ]
               }
             )
@@ -1796,22 +1893,12 @@ function ConferenceDialog() {
       setConferenceCallEndAll(false);
     });
   };
-  const isMergeCall = (0, import_react10.useMemo)(() => {
-    var _a3;
-    return (_a3 = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _a3.some((each) => {
-      if (each.line !== 1) {
-        return each.status === "ONCALL";
-      }
-      return false;
-    });
-  }, [state.conferenceLine]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_material3.Dialog,
     {
       open: state.openConferenceDialog,
       "aria-labelledby": "alert-dialog-title",
       "aria-describedby": "alert-dialog-description",
-      fullWidth: true,
       maxWidth: "md",
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.Paper, { sx: { borderRadius: 2 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -1880,15 +1967,6 @@ function ConferenceDialog() {
                                 children: "Status"
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                              import_material3.TableCell,
-                              {
-                                sx: {
-                                  padding: "6px"
-                                },
-                                children: "Call Type"
-                              }
-                            ),
                             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               import_material3.TableCell,
                               {
@@ -1910,13 +1988,7 @@ function ConferenceDialog() {
                           ]
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.TableBody, { children: state == null ? void 0 : state.conferenceLine.map((each) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                        ConferenceTableRow,
-                        {
-                          each,
-                          isMergeCall
-                        }
-                      )) })
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.TableBody, { children: state == null ? void 0 : state.conferenceLine.map((each) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ConferenceTableRow, { each })) })
                     ]
                   }
                 )
@@ -2767,7 +2839,7 @@ async function createAudioElement() {
   audio.loop = true;
   audio.volume = 0.7;
   audio.preload = "auto";
-  let audioUrl = null;
+  let audioUrl = "";
   try {
     audioUrl = await loadAudioAsBlob();
   } catch (error) {
@@ -2818,26 +2890,24 @@ function cleanupAudioResources() {
 
 // call-control-sdk/lib/components/callControls.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var getCombineConfrenceData = (conferenceData, apiData, data) => {
-  const updatedConferenceData = conferenceData.map((item) => {
-    var _a2, _b, _c;
+var getCombineConfrenceData = (localState, apiData) => {
+  const localConfrenceData = localState == null ? void 0 : localState.conferenceLine;
+  const apiConferenceData = apiData == null ? void 0 : apiData.conferencestatus;
+  const updatedConferenceData = localConfrenceData.map((item) => {
+    var _a2, _b, _c, _d, _e;
     if ((item == null ? void 0 : item.line) === 1) {
       const statusKey = `line_${item.line}_status`;
       return __spreadProps(__spreadValues({}, item), {
         line: 1,
-        status: (_a2 = apiData[statusKey]) != null ? _a2 : data == null ? void 0 : data.status,
-        phone: (_b = data == null ? void 0 : data.phone_number) != null ? _b : ""
-        // isMute: false,
-        // isHold: false,
-        // isMergeCall: false,
-        // isCallStart: true,
+        status: (_b = apiConferenceData[statusKey]) != null ? _b : (_a2 = localState == null ? void 0 : localState.callData) == null ? void 0 : _a2.status,
+        phone: (_d = (_c = localState == null ? void 0 : localState.callData) == null ? void 0 : _c.phone_number) != null ? _d : ""
       });
     } else {
       const statusKey = `line_${item.line}_status`;
       const phoneKey = `line_${item.line}_phonenumber`;
       return __spreadProps(__spreadValues({}, item), {
-        status: (_c = apiData[statusKey]) != null ? _c : "IDLE",
-        phone: apiData[phoneKey] !== "0" ? apiData[phoneKey] : ""
+        status: (_e = apiConferenceData[statusKey]) != null ? _e : item.status,
+        phone: apiConferenceData[phoneKey] === null || apiConferenceData[phoneKey] === "0" ? item.phone : apiConferenceData[phoneKey]
       });
     }
   });
@@ -2849,7 +2919,7 @@ var formatDuration = (seconds) => {
   return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
 };
 function CallControls({ onDataChange }) {
-  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa;
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma;
   const theme = (0, import_material4.useTheme)();
   const state = useSDKState();
   const { showToast } = useToast();
@@ -2864,7 +2934,7 @@ function CallControls({ onDataChange }) {
   const pingIntervalRef = (0, import_react11.useRef)(null);
   const reconnectAttemptsRef = (0, import_react11.useRef)(0);
   const maxReconnectAttempts = 60;
-  const baseReconnectDelay = 1e3;
+  const baseReconnectDelay = 2e3;
   const maxReconnectDelay = 3e4;
   const [anchorEl, setAnchorEl] = (0, import_react11.useState)(null);
   const [showIframe, setShowIframe] = (0, import_react11.useState)(true);
@@ -2914,7 +2984,11 @@ function CallControls({ onDataChange }) {
   });
   const [readyAgentStatus, { isLoading: agentReadyLoading }] = usePostRequest();
   const [updateAgentStatus, { isLoading }] = usePostRequest();
-  const [endCall, { isLoading: endCallLoading }] = usePostRequest();
+  const [endCall, { isLoading: endCallLoading }] = usePostRequest({
+    onSuccess: () => {
+      sdkStateManager.resetConferenceLines();
+    }
+  });
   const handleCloseQueueCounts = () => {
     setAnchorEl(null);
   };
@@ -2966,15 +3040,17 @@ function CallControls({ onDataChange }) {
     }
   };
   const handleHoldToggle = () => {
+    var _a3;
     const payload = {
-      action: state.isHolding ? "UNHOLD" : "HOLD",
+      action: ((_a3 = state.callData) == null ? void 0 : _a3.hold) === 1 ? "UNHOLD" : "HOLD",
       userId: state.agentId
     };
     holdOrUnHold(END_POINT.HOLD_CALL, payload);
   };
   const handleMuteToggle = () => {
+    var _a3;
     const payload = {
-      action: state.isMuted ? "UNMUTE" : "MUTE",
+      action: ((_a3 = state.callData) == null ? void 0 : _a3.mute) === 1 ? "UNMUTE" : "MUTE",
       userId: state.agentId
     };
     muteOrUnMute(END_POINT.MUTE_CALL, payload);
@@ -3110,11 +3186,8 @@ function CallControls({ onDataChange }) {
             console.log("\u{1F4E1} WebSocket pong received");
             return;
           }
-          const confrence = getCombineConfrenceData(
-            state == null ? void 0 : state.conferenceLine,
-            data == null ? void 0 : data.conferencestatus,
-            data
-          );
+          const rls = localStorage.getItem("call-control-sdk-state");
+          const confrence = getCombineConfrenceData(JSON.parse(rls || "{}"), data);
           sdkStateManager.updateCallData(data);
           sdkStateManager.updateConferenceData([...confrence]);
           if (data.status === "RINGING" || data.status === "DIALING") {
@@ -3123,22 +3196,19 @@ function CallControls({ onDataChange }) {
                 console.error("Failed to play ringtone:", error);
               });
             }
-          }
-          if (data.status === "ONCALL") {
+          } else {
             if (audioRef.current) {
               audioRef.current.pause();
               audioRef.current.currentTime = 0;
             }
+          }
+          if (data.status === "ONCALL") {
             sdkStateManager.startCall();
             if (!showIframe) {
               setShowIframe(true);
             }
           }
           if (data.status === "WRAPUP") {
-            if (audioRef.current) {
-              audioRef.current.pause();
-              audioRef.current.currentTime = 0;
-            }
             sdkStateManager.endCall();
           }
         } catch (e) {
@@ -3386,16 +3456,16 @@ function CallControls({ onDataChange }) {
                             children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.SupportAgent, {})
                           }
                         ) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: state.isHolding ? "Resume" : "Hold", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: ((_I = state.callData) == null ? void 0 : _I.hold) === 1 ? "Resume" : "Hold", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                           import_material4.Button,
                           {
-                            variant: state.isHolding && ((_J = (_I = state.callData) == null ? void 0 : _I.status) == null ? void 0 : _J.toUpperCase()) === "ONCALL" ? "contained" : "outlined",
+                            variant: ((_J = state.callData) == null ? void 0 : _J.hold) === 1 && ((_L = (_K = state.callData) == null ? void 0 : _K.status) == null ? void 0 : _L.toUpperCase()) === "ONCALL" ? "contained" : "outlined",
                             onClick: (e) => {
                               e.stopPropagation();
                               handleHoldToggle();
                             },
-                            sx: state.isHolding && ((_L = (_K = state.callData) == null ? void 0 : _K.status) == null ? void 0 : _L.toUpperCase()) === "ONCALL" ? __spreadValues({}, enabled) : ((_N = (_M = state.callData) == null ? void 0 : _M.status) == null ? void 0 : _N.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
-                            disabled: ((_P = (_O = state.callData) == null ? void 0 : _O.status) == null ? void 0 : _P.toUpperCase()) !== "ONCALL" && !state.isHolding || holdOrUnHoldLoading,
+                            sx: ((_M = state.callData) == null ? void 0 : _M.hold) === 1 && ((_O = (_N = state.callData) == null ? void 0 : _N.status) == null ? void 0 : _O.toUpperCase()) === "ONCALL" ? __spreadValues({}, enabled) : ((_Q = (_P = state.callData) == null ? void 0 : _P.status) == null ? void 0 : _Q.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                            disabled: ((_S = (_R = state.callData) == null ? void 0 : _R.status) == null ? void 0 : _S.toUpperCase()) !== "ONCALL" && ((_T = state.callData) == null ? void 0 : _T.hold) !== 1 || holdOrUnHoldLoading,
                             children: holdOrUnHoldLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                               import_material4.CircularProgress,
                               {
@@ -3404,19 +3474,19 @@ function CallControls({ onDataChange }) {
                                   color: theme.palette.primary.main
                                 }
                               }
-                            ) : state.isHolding ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.PlayArrow, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Pause, {})
+                            ) : ((_U = state.callData) == null ? void 0 : _U.hold) === 1 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.PlayArrow, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Pause, {})
                           }
                         ) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: state.isMuted ? "Unmute" : "Mute", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: ((_V = state.callData) == null ? void 0 : _V.mute) === 1 ? "Unmute" : "Mute", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                           import_material4.Button,
                           {
-                            variant: state.isMuted && ((_R = (_Q = state.callData) == null ? void 0 : _Q.status) == null ? void 0 : _R.toUpperCase()) === "ONCALL" ? "contained" : "outlined",
+                            variant: state.isHolding ? "outlined" : ((_W = state.callData) == null ? void 0 : _W.mute) === 1 && ((_Y = (_X = state.callData) == null ? void 0 : _X.status) == null ? void 0 : _Y.toUpperCase()) === "ONCALL" ? "contained" : "outlined",
                             onClick: (e) => {
                               e.stopPropagation();
                               handleMuteToggle();
                             },
-                            sx: state.isMuted && ((_T = (_S = state.callData) == null ? void 0 : _S.status) == null ? void 0 : _T.toUpperCase()) === "ONCALL" ? __spreadValues({}, enabled) : ((_V = (_U = state.callData) == null ? void 0 : _U.status) == null ? void 0 : _V.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
-                            disabled: ((_X = (_W = state.callData) == null ? void 0 : _W.status) == null ? void 0 : _X.toUpperCase()) !== "ONCALL" && !state.isMuted || muteOrUnMuteLoading,
+                            sx: ((_Z = state.callData) == null ? void 0 : _Z.hold) === 1 ? __spreadValues({}, disabled) : ((__ = state.callData) == null ? void 0 : __.mute) === 1 && ((_aa = (_$ = state.callData) == null ? void 0 : _$.status) == null ? void 0 : _aa.toUpperCase()) === "ONCALL" ? __spreadValues({}, enabled) : ((_ca = (_ba = state.callData) == null ? void 0 : _ba.status) == null ? void 0 : _ca.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                            disabled: ((_ea = (_da = state.callData) == null ? void 0 : _da.status) == null ? void 0 : _ea.toUpperCase()) !== "ONCALL" && ((_fa = state.callData) == null ? void 0 : _fa.mute) !== 1 || muteOrUnMuteLoading || ((_ga = state.callData) == null ? void 0 : _ga.hold) === 1,
                             children: muteOrUnMuteLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                               import_material4.CircularProgress,
                               {
@@ -3425,10 +3495,10 @@ function CallControls({ onDataChange }) {
                                   color: theme.palette.primary.main
                                 }
                               }
-                            ) : state.isMuted ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.MicOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Mic, {})
+                            ) : ((_ha = state.callData) == null ? void 0 : _ha.mute) === 1 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.MicOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Mic, {})
                           }
                         ) }),
-                        !((_Y = state.sdkConfig) == null ? void 0 : _Y.disableCallTransferButton) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Transfer Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        !((_ia = state.sdkConfig) == null ? void 0 : _ia.disableCallTransferButton) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Transfer Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                           import_material4.Button,
                           {
                             variant: state.openCallTransferDialog ? "contained" : "outlined",
@@ -3439,12 +3509,12 @@ function CallControls({ onDataChange }) {
                                 sdkStateManager.setOpenCallTransferDialog(true);
                               }
                             },
-                            sx: state.openCallTransferDialog ? __spreadValues({}, enabled) : ((__ = (_Z = state.callData) == null ? void 0 : _Z.status) == null ? void 0 : __.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
-                            disabled: ((_aa = (_$ = state.callData) == null ? void 0 : _$.status) == null ? void 0 : _aa.toUpperCase()) !== "ONCALL",
+                            sx: state.openCallTransferDialog ? __spreadValues({}, enabled) : ((_ka = (_ja = state.callData) == null ? void 0 : _ja.status) == null ? void 0 : _ka.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                            disabled: ((_ma = (_la = state.callData) == null ? void 0 : _la.status) == null ? void 0 : _ma.toUpperCase()) !== "ONCALL",
                             children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.TransferWithinAStation, {})
                           }
                         ) }),
-                        !((_ba = state.sdkConfig) == null ? void 0 : _ba.disableConferenceButton) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Conference Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        !((_na = state.sdkConfig) == null ? void 0 : _na.disableConferenceButton) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "Conference Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                           import_material4.Button,
                           {
                             variant: state.openConferenceDialog ? "contained" : "outlined",
@@ -3455,15 +3525,15 @@ function CallControls({ onDataChange }) {
                                 sdkStateManager.setOpenConferenceDialog(true);
                               }
                             },
-                            sx: state.openConferenceDialog ? __spreadValues({}, enabled) : ((_da = (_ca = state.callData) == null ? void 0 : _ca.status) == null ? void 0 : _da.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
-                            disabled: ((_fa = (_ea = state.callData) == null ? void 0 : _ea.status) == null ? void 0 : _fa.toUpperCase()) !== "ONCALL",
+                            sx: state.openConferenceDialog ? __spreadValues({}, enabled) : ((_pa = (_oa = state.callData) == null ? void 0 : _oa.status) == null ? void 0 : _pa.toUpperCase()) === "ONCALL" ? __spreadValues({}, outlined) : __spreadValues({}, disabled),
+                            disabled: ((_ra = (_qa = state.callData) == null ? void 0 : _qa.status) == null ? void 0 : _ra.toUpperCase()) !== "ONCALL",
                             children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Group, {})
                           }
                         ) }),
-                        !((_ga = state.sdkConfig) == null ? void 0 : _ga.disableEndCallButton) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "End Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        !((_sa = state.sdkConfig) == null ? void 0 : _sa.disableEndCallButton) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Tooltip, { title: "End Call", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                           import_material4.Button,
                           {
-                            variant: ((_ia = (_ha = state.callData) == null ? void 0 : _ha.status) == null ? void 0 : _ia.toUpperCase()) === "ONCALL" || ((_ka = (_ja = state.callData) == null ? void 0 : _ja.status) == null ? void 0 : _ka.toUpperCase()) === "RINGING" || ((_ma = (_la = state.callData) == null ? void 0 : _la.status) == null ? void 0 : _ma.toUpperCase()) === "WRAPUP" ? "contained" : "outlined",
+                            variant: ((_ua = (_ta = state.callData) == null ? void 0 : _ta.status) == null ? void 0 : _ua.toUpperCase()) === "ONCALL" || ((_wa = (_va = state.callData) == null ? void 0 : _va.status) == null ? void 0 : _wa.toUpperCase()) === "RINGING" || ((_ya = (_xa = state.callData) == null ? void 0 : _xa.status) == null ? void 0 : _ya.toUpperCase()) === "WRAPUP" ? "contained" : "outlined",
                             onClick: (e) => {
                               var _a3, _b2, _c2, _d2, _e2, _f2;
                               if (((_b2 = (_a3 = state.callData) == null ? void 0 : _a3.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") {
@@ -3471,7 +3541,7 @@ function CallControls({ onDataChange }) {
                                 setOpenCallDisposition(true);
                               }
                             },
-                            sx: ((_oa = (_na = state.callData) == null ? void 0 : _na.status) == null ? void 0 : _oa.toUpperCase()) === "ONCALL" || ((_qa = (_pa = state.callData) == null ? void 0 : _pa.status) == null ? void 0 : _qa.toUpperCase()) === "RINGING" || ((_sa = (_ra = state.callData) == null ? void 0 : _ra.status) == null ? void 0 : _sa.toUpperCase()) === "WRAPUP" ? __spreadProps(__spreadValues({}, enabled), {
+                            sx: ((_Aa = (_za = state.callData) == null ? void 0 : _za.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",
@@ -3490,7 +3560,7 @@ function CallControls({ onDataChange }) {
                             }) : __spreadProps(__spreadValues({}, disabled), {
                               minWidth: "60px !important"
                             }),
-                            disabled: ((_ua = (_ta = state.callData) == null ? void 0 : _ta.status) == null ? void 0 : _ua.toUpperCase()) !== "ONCALL" && ((_wa = (_va = state.callData) == null ? void 0 : _va.status) == null ? void 0 : _wa.toUpperCase()) !== "RINGING" && ((_ya = (_xa = state.callData) == null ? void 0 : _xa.status) == null ? void 0 : _ya.toUpperCase()) !== "WRAPUP" || endCallLoading,
+                            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" || endCallLoading,
                             children: endCallLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                               import_material4.CircularProgress,
                               {
@@ -3530,7 +3600,7 @@ function CallControls({ onDataChange }) {
               transition: theme.transitions.create(["box-shadow", "transform"], {
                 duration: theme.transitions.duration.short
               }),
-              visibility: showIframe && !((_za = state.sdkConfig) == null ? void 0 : _za.disableSoftPhone) ? "visible" : "hidden",
+              visibility: showIframe && !((_La = state.sdkConfig) == null ? void 0 : _La.disableSoftPhone) ? "visible" : "hidden",
               userSelect: "none"
             },
             children: [
@@ -3564,7 +3634,7 @@ function CallControls({ onDataChange }) {
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "iframe",
                 {
-                  src: `https://${IP}/ConVoxCCS/iframe?agent_id=${state.agentId}&process_id=${(_Aa = state.process) == null ? void 0 : _Aa.process_id}`,
+                  src: `https://${IP}/ConVoxCCS/iframe?agent_id=${state.agentId}&process_id=${(_Ma = state.process) == null ? void 0 : _Ma.process_id}`,
                   height: 380,
                   width: 420,
                   allow: "camera; microphone; autoplay",