callix-dialer-widget 1.0.0 → 1.0.1

package/dist-widget/callix-dialer.es.js

@@ -53492,7 +53492,7 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout }) {
           void Promise.resolve(
             finishAfterCall({
               result: "success",
-              qualificationId: null
+              qualificationId: void 0
             })
           );
         }
@@ -54817,14 +54817,514 @@ function ActiveCallSummary({
     ] })
   ] }) });
 }
+function FaMicrophoneSlash(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 640 512" }, "child": [{ "tag": "path", "attr": { "d": "M633.82 458.1l-157.8-121.96C488.61 312.13 496 285.01 496 256v-48c0-8.84-7.16-16-16-16h-16c-8.84 0-16 7.16-16 16v48c0 17.92-3.96 34.8-10.72 50.2l-26.55-20.52c3.1-9.4 5.28-19.22 5.28-29.67V96c0-53.02-42.98-96-96-96s-96 42.98-96 96v45.36L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.36 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.41-6.97 4.16-17.02-2.82-22.45zM400 464h-56v-33.77c11.66-1.6 22.85-4.54 33.67-8.31l-50.11-38.73c-6.71.4-13.41.87-20.35.2-55.85-5.45-98.74-48.63-111.18-101.85L144 241.31v6.85c0 89.64 63.97 169.55 152 181.69V464h-56c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16z" }, "child": [] }] })(props);
+}
+function FaMicrophone(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 352 512" }, "child": [{ "tag": "path", "attr": { "d": "M176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zm160-160h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16z" }, "child": [] }] })(props);
+}
+function FaPause(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" }, "child": [] }] })(props);
+}
+function FaPhoneSlash(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 640 512" }, "child": [{ "tag": "path", "attr": { "d": "M268.2 381.4l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48c-10.7 4.6-16.5 16.1-13.9 27.5l24 104c2.5 10.8 12.1 18.6 23.4 18.6 100.7 0 193.7-32.4 269.7-86.9l-80-61.8c-10.9 6.5-22.1 12.7-33.6 18.1zm365.6 76.7L475.1 335.5C537.9 256.4 576 156.9 576 48c0-11.2-7.7-20.9-18.6-23.4l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-12.2 26.1-27.9 50.3-46 72.8L45.5 3.4C38.5-2 28.5-.8 23 6.2L3.4 31.4c-5.4 7-4.2 17 2.8 22.4l588.4 454.7c7 5.4 17 4.2 22.5-2.8l19.6-25.3c5.4-6.8 4.1-16.9-2.9-22.3z" }, "child": [] }] })(props);
+}
+function FaPhone(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z" }, "child": [] }] })(props);
+}
+function FaPlay(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" }, "child": [] }] })(props);
+}
+function FaVolumeDown(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 384 512" }, "child": [{ "tag": "path", "attr": { "d": "M215.03 72.04L126.06 161H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V89.02c0-21.47-25.96-31.98-40.97-16.98zm123.2 108.08c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 229.28 336 242.62 336 257c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.87z" }, "child": [] }] })(props);
+}
+function FaVolumeMute(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zM461.64 256l45.64-45.64c6.3-6.3 6.3-16.52 0-22.82l-22.82-22.82c-6.3-6.3-16.52-6.3-22.82 0L416 210.36l-45.64-45.64c-6.3-6.3-16.52-6.3-22.82 0l-22.82 22.82c-6.3 6.3-6.3 16.52 0 22.82L370.36 256l-45.63 45.63c-6.3 6.3-6.3 16.52 0 22.82l22.82 22.82c6.3 6.3 16.52 6.3 22.82 0L416 301.64l45.64 45.64c6.3 6.3 16.52 6.3 22.82 0l22.82-22.82c6.3-6.3 6.3-16.52 0-22.82L461.64 256z" }, "child": [] }] })(props);
+}
+function FaVolumeOff(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 256 512" }, "child": [{ "tag": "path", "attr": { "d": "M215 71l-89 89H24a24 24 0 0 0-24 24v144a24 24 0 0 0 24 24h102.06L215 441c15 15 41 4.47 41-17V88c0-21.47-26-32-41-17z" }, "child": [] }] })(props);
+}
+function FaVolumeUp(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 576 512" }, "child": [{ "tag": "path", "attr": { "d": "M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zm233.32-51.08c-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 78.98-39.55 152.09-105.82 195.58-11.17 7.32-14.29 22.34-6.95 33.5 7.04 10.71 21.93 14.56 33.51 6.95C528.27 439.58 576 351.33 576 256S528.27 72.43 448.35 19.97zM480 256c0-63.53-32.06-121.94-85.77-156.24-11.19-7.14-26.03-3.82-33.12 7.46s-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256zm-141.77-76.87c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.86z" }, "child": [] }] })(props);
+}
+function AudioControls() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-4 w-full max-w-md mx-auto mt-4 ", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(AudioInputControls, {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(AudioOutputControls, {})
+  ] });
+}
+function AudioInputControls() {
+  const [isMuted, setMute] = clientSdkReactExports.useCallOperatorAudioInputMuted();
+  function toggleMute() {
+    setMute(!isMuted);
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4 p-4 bg-gray-100 rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: toggleMute,
+      className: `p-3 rounded-full ${isMuted ? "bg-red-500 text-white" : "bg-gray-200"}`,
+      "aria-label": isMuted ? "Unmute" : "Mute",
+      children: isMuted ? /* @__PURE__ */ jsxRuntimeExports.jsx(FaMicrophoneSlash, { className: "h-6 w-6" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(FaMicrophone, { className: "h-6 w-6" })
+    }
+  ) });
+}
+function AudioOutputControls() {
+  const [isMuted, setMute] = clientSdkReactExports.useCallOperatorAudioOutputMuted();
+  const [volume, setVolume] = clientSdkReactExports.useCallOperatorAudioOutputVolume();
+  const handleVolumeChange = (e) => {
+    const newVolume = parseFloat(e.target.value);
+    setVolume(newVolume);
+  };
+  const toggleMute = () => {
+    setMute(!isMuted);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center w-full gap-4 p-4 bg-gray-100 rounded-lg", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: toggleMute,
+        className: `p-3 rounded-full ${isMuted ? "bg-red-500 text-white" : "bg-gray-200"}`,
+        "aria-label": isMuted ? "Unmute" : "Mute",
+        children: isMuted ? /* @__PURE__ */ jsxRuntimeExports.jsx(FaVolumeMute, { className: "h-6 w-6" }) : volume > 0.5 ? /* @__PURE__ */ jsxRuntimeExports.jsx(FaVolumeUp, { className: "h-6 w-6" }) : volume > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(FaVolumeDown, { className: "h-6 w-6" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(FaVolumeOff, { className: "h-6 w-6" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: "output-volume-control", className: "block text-sm font-medium mb-1", children: [
+        "Output: ",
+        Math.round(volume * 100),
+        "%"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "input",
+        {
+          type: "range",
+          id: "output-volume-control",
+          min: "0",
+          max: "1",
+          step: "0.01",
+          value: volume,
+          onChange: handleVolumeChange,
+          className: "w-full"
+        }
+      )
+    ] })
+  ] });
+}
+function CallButtons({ isConnected }) {
+  const currentCall = clientSdkReactExports.useCallOperatorCurrentCall();
+  const { answer, reject, hangup, hold, unhold } = clientSdkReactExports.useCallOperatorCurrentCallControls();
+  const [onHold, setOnHold] = useState(false);
+  const isIncoming = (currentCall == null ? void 0 : currentCall.direction) === "incoming";
+  function toggleHold() {
+    const newOnHold = !onHold;
+    setOnHold(newOnHold);
+    if (newOnHold) {
+      hold();
+    } else {
+      unhold();
+    }
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-4 justify-center", children: isConnected ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: toggleHold,
+        className: `px-6 py-3 flex items-center gap-2 ${onHold ? "bg-blue-500 hover:bg-blue-600" : "bg-yellow-500 hover:bg-yellow-600"} text-white rounded-lg transition-colors`,
+        children: [
+          onHold ? /* @__PURE__ */ jsxRuntimeExports.jsx(FaPlay, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(FaPause, {}),
+          onHold ? "Unhold" : "Hold"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => hangup(),
+        className: "px-6 py-3 flex items-center gap-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(FaPhoneSlash, {}),
+          "Hang Up"
+        ]
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    isIncoming && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => answer(),
+        className: "px-6 py-3 flex items-center gap-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(FaPhone, {}),
+          "Answer"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => reject(),
+        className: "px-6 py-3 flex items-center gap-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(FaPhoneSlash, {}),
+          "Reject"
+        ]
+      }
+    )
+  ] }) });
+}
+function CallDetails({ call }) {
+  if (!call) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white shadow-md rounded-lg p-6 max-w-md mx-auto", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold mb-2", children: "Call Details" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Call ID:" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: call.id })
+      ] }),
+      call.data.callUuid && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "UUID:" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: call.data.callUuid })
+      ] }),
+      call.data.protocol && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Protocol:" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: call.data.protocol })
+      ] })
+    ] })
+  ] });
+}
+function CallManagerAfterCall() {
+  const { finishAfterCall } = clientSdkReactExports.useCallOperatorControls();
+  const [callResult, setCallResult] = useState("success");
+  const [qualificationId, setQualificationId] = useState(null);
+  function handleFinishAfterCall() {
+    if (qualificationId != null) {
+      finishAfterCall({
+        result: callResult,
+        qualificationId
+      });
+    }
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 p-8 rounded-lg shadow-sm text-center", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-medium mb-2", children: "Call Ended" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center mb-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mr-2", children: "Call Result:" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ToggleButton,
+          {
+            label: "Success",
+            isEnabled: callResult === "success",
+            enabledClasses: "bg-green-500 text-white",
+            disabledClasses: "bg-gray-300 text-gray-700",
+            onEnable: () => {
+              setCallResult("success");
+              setQualificationId(null);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ToggleButton,
+          {
+            label: "Discard",
+            isEnabled: callResult === "failure",
+            enabledClasses: "bg-red-500 text-white",
+            disabledClasses: "bg-gray-300 text-gray-700",
+            onEnable: () => {
+              setCallResult("failure");
+              setQualificationId(null);
+            }
+          }
+        )
+      ] })
+    ] }),
+    callResult === "success" && /* @__PURE__ */ jsxRuntimeExports.jsx(SuccessQualificationSelector, { onSelect: setQualificationId }),
+    callResult === "failure" && /* @__PURE__ */ jsxRuntimeExports.jsx(DiscardQualificationSelector, { onSelect: setQualificationId }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        className: "mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700",
+        onClick: handleFinishAfterCall,
+        children: "Finish After Call"
+      }
+    )
+  ] }) });
+}
+function ToggleButton(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "button",
+    {
+      type: "button",
+      className: `p-2 ${props.classes ?? ""} ${props.isEnabled ? props.enabledClasses : props.disabledClasses}`,
+      onClick: props.isEnabled ? void 0 : props.onEnable,
+      children: props.label
+    }
+  );
+}
+function Selector(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "select",
+    {
+      className: "w-full p-2 border border-gray-300 rounded",
+      onChange: (e) => props.onSelect(Number(e.target.value)),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "-- Select Option --" }),
+        props.options.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: option.id, children: option.name }, option.id))
+      ]
+    }
+  );
+}
+function SuccessQualificationSelector(props) {
+  const successQualifications = clientSdkReactExports.useCallOperatorSuccessQualifications();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium mb-2", children: "Select Qualification" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Selector, { options: successQualifications, onSelect: props.onSelect })
+  ] });
+}
+function DiscardQualificationSelector(props) {
+  const discardQualifications = clientSdkReactExports.useCallOperatorDiscardQualifications();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium mb-2", children: "Select Qualification" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Selector, { options: discardQualifications, onSelect: props.onSelect })
+  ] });
+}
+function CallTimer({ call }) {
+  const [duration, setDuration] = useState(0);
+  useEffect(() => {
+    if (!call) {
+      setDuration(0);
+      return;
+    }
+    setDuration(call.currentDurationSeconds);
+    const timer = setInterval(() => {
+      if (call) {
+        setDuration(call.currentDurationSeconds);
+      }
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [call]);
+  const formatTime = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-2xl font-bold text-center py-4", children: formatTime(duration) });
+}
+const validatePhoneNumber = (phoneNumber) => {
+  if (!phoneNumber) {
+    return "Phone number is required";
+  }
+  const isValid2 = isValidPhoneNumber(phoneNumber, "BR");
+  if (!isValid2) {
+    return "Invalid phone number";
+  }
+  return null;
+};
+function ManualCallPanel() {
+  const { makeManualCall } = clientSdkReactExports.useCallOperatorControls();
+  const operatorState = clientSdkReactExports.useCallOperatorState();
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [isCalling, setIsCalling] = useState(false);
+  const [error2, setError] = useState(null);
+  useEffect(() => {
+    if ((operatorState == null ? void 0 : operatorState.state) === "callRinging" || (operatorState == null ? void 0 : operatorState.state) === "callInProgress") {
+      setIsCalling(false);
+      setPhoneNumber("");
+    }
+  }, [operatorState == null ? void 0 : operatorState.state]);
+  const handleCall = useCallback(() => {
+    const phoneNumberTrimmed = phoneNumber.trim();
+    const err = validatePhoneNumber(phoneNumberTrimmed);
+    setError(err);
+    if (err) {
+      return;
+    }
+    try {
+      setIsCalling(true);
+      makeManualCall(phoneNumberTrimmed);
+    } catch (e) {
+      console.error(e);
+      setError("Failed to start call");
+      setIsCalling(false);
+    }
+  }, [phoneNumber, makeManualCall]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "manual-call-number", className: "block text-sm font-medium text-gray-700 mb-1", children: "Phone Number" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "input",
+        {
+          id: "manual-call-number",
+          type: "tel",
+          inputMode: "tel",
+          autoComplete: "tel",
+          placeholder: "e.g. +5511999999999",
+          className: "w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+          value: phoneNumber,
+          onChange: (e) => {
+            setPhoneNumber(e.target.value);
+            if (error2) setError(null);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              handleCall();
+            }
+          },
+          disabled: isCalling
+        }
+      ),
+      error2 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-red-600", children: error2 })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleCall,
+        disabled: isCalling || !!validatePhoneNumber(phoneNumber),
+        className: "w-full flex justify-center items-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-white font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+        children: isCalling ? "Calling..." : "Call"
+      }
+    )
+  ] });
+}
+function RingingAnimation() {
+  const [visible, setVisible] = useState(true);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setVisible((prev) => !prev);
+    }, 500);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center my-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: `absolute inset-0 rounded-full bg-green-500 opacity-30 ${visible ? "scale-150" : "scale-100"} transition-transform duration-500`
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative z-10 w-12 h-12 bg-green-500 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        className: "w-6 h-6 text-white",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("title", { children: "Phone" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
+            }
+          )
+        ]
+      }
+    ) })
+  ] }) });
+}
+function CallManager() {
+  const callOperatorState = clientSdkReactExports.useCallOperatorState();
+  console.log("callOperatorState", callOperatorState);
+  if (!callOperatorState) {
+    return null;
+  }
+  if (callOperatorState.state === "starting") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 p-8 rounded-lg shadow-sm text-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-medium mb-2", children: "Initializing Call Operator" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600", children: "Please wait..." })
+    ] }) });
+  }
+  if (callOperatorState.state === "idle") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 p-8 rounded-lg shadow-sm w-full max-w-md space-y-6", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center space-y-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-medium", children: "No Active Call" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600", children: "You can place a manual outbound call below." })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ManualCallPanel, {})
+    ] }) });
+  }
+  if (callOperatorState.state === "onBreak") {
+    const serviceBreak = callOperatorState.break;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 p-8 rounded-lg shadow-sm text-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-medium mb-2", children: "On Break" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600", children: "You are currently on break." }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-gray-600", children: [
+        "Break: ",
+        serviceBreak.name,
+        " (",
+        serviceBreak.id,
+        ")"
+      ] })
+    ] }) });
+  }
+  if (callOperatorState.state === "callRinging") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-6 w-full max-w-lg mx-auto p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white shadow-lg rounded-lg overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-blue-600 text-white p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold text-center", children: "Incoming Call" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6 space-y-6", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(RingingAnimation, {}),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CallButtons, { isConnected: false }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CallDetails, { call: callOperatorState.call })
+      ] })
+    ] }) });
+  }
+  if (callOperatorState.state === "manualCallSetup" || callOperatorState.state === "manualCallRinging") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-6 w-full max-w-lg mx-auto p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white shadow-lg rounded-lg overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-blue-600 text-white p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold text-center", children: "Call in Progress" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6 space-y-6", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CallTimer, { call: callOperatorState.call }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CallButtons, { isConnected: false }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CallDetails, { call: callOperatorState.call })
+      ] })
+    ] }) });
+  }
+  if (callOperatorState.state === "callInProgress") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-6 w-full max-w-lg mx-auto p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white shadow-lg rounded-lg overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-blue-600 text-white p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold text-center", children: "Call in Progress" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6 space-y-6", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CallTimer, { call: callOperatorState.call }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CallButtons, { isConnected: true }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AudioControls, {}),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CallDetails, { call: callOperatorState.call }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CallInfoDisplay, {})
+      ] })
+    ] }) });
+  }
+  if (callOperatorState.state === "afterCall") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(CallManagerAfterCall, {});
+  }
+  if (callOperatorState.state === "error") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-red-50 p-8 rounded-lg shadow-sm text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-medium mb-2", children: "Error" }) }) });
+  }
+  if (callOperatorState.state === "offline") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gray-50 p-8 rounded-lg shadow-sm text-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-medium mb-2", children: "Offline" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600", children: "You are currently offline. Please check your connection." })
+    ] }) });
+  }
+}
 function InlineDialer({
   isAuthenticated,
   username,
   onLogin,
   onLogout,
   isLoadingSession,
-  sessionError,
-  children: children2
+  sessionError
 }) {
   const [inputUsername, setInputUsername] = useState(username ?? "");
   const [hasBlurred, setHasBlurred] = useState(false);
@@ -54975,7 +55475,7 @@ function InlineDialer({
             ] })
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`p-4`, children: children2 })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`p-4`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CallManager, {}) })
       ]
     }
   );
@@ -55025,12 +55525,6 @@ class CallixDialerWidget {
     }
   }
 }
-const STORAGE_KEYS = {
-  USERNAME: "callix_dialer_username",
-  SESSION_TOKEN: "callix_dialer_session_token",
-  DOMAIN: "callix_dialer_domain",
-  TIMESTAMP: "callix_dialer_timestamp"
-};
 const SESSION_EXPIRATION_MS = 8 * 60 * 60 * 1e3;
 function DialerWrapper({ options }) {
   const [username, setUsername] = useState(null);