@tbisoftware/phone 2.0.8 → 2.0.10

package/dist/usePhoneManager-CDKZ09Gg.js

@@ -0,0 +1,649 @@
+import { jsx as t, jsxs as s, Fragment as se } from "react/jsx-runtime";
+import { useState as v, useRef as $, useEffect as M, useCallback as U, createContext as oe, useContext as ae } from "react";
+import { J as G, d as le, c as K, f as J, P as ce } from "./index-8z_LWKp3.js";
+let _ = null, V = null;
+function ie(e) {
+  return `${e.websocketUrl}|${e.sipUri}|${e.authorizationUser}`;
+}
+function de(e) {
+  const f = ie(e);
+  if (_ && V === f)
+    return _;
+  if (_ && V !== f) {
+    try {
+      _.ua.stop();
+    } catch {
+    }
+    _ = null;
+  }
+  V = f;
+  const u = {
+    sockets: [new G.WebSocketInterface(e.websocketUrl)],
+    uri: e.sipUri,
+    password: e.password,
+    registrar_server: e.registrarServer,
+    display_name: e.displayName,
+    authorization_user: e.authorizationUser,
+    connection_recovery_min_interval: 2,
+    connection_recovery_max_interval: 30
+  }, d = new G.UA(u), y = document.createElement("audio");
+  y.autoplay = !0;
+  const h = {
+    ua: d,
+    audio: y,
+    isStarted: !1,
+    listeners: /* @__PURE__ */ new Set()
+  };
+  return d.on("connecting", () => {
+    h.listeners.forEach((o) => o.onConnecting?.());
+  }), d.on("connected", () => {
+    h.listeners.forEach((o) => o.onConnected?.());
+  }), d.on("disconnected", () => {
+    h.listeners.forEach((o) => o.onDisconnected?.());
+  }), d.on("registered", () => {
+    h.listeners.forEach((o) => o.onRegistered?.());
+  }), d.on("unregistered", () => {
+    h.listeners.forEach((o) => o.onUnregistered?.());
+  }), d.on("registrationFailed", (o) => {
+    h.listeners.forEach((a) => a.onRegistrationFailed?.(o?.cause));
+  }), d.on("newRTCSession", (o) => {
+    const a = o.session;
+    if (a.direction === "incoming") {
+      const n = a.remote_identity, g = n?.uri?.user || "Unknown", z = n?.display_name || void 0;
+      h.listeners.forEach((N) => N.onIncomingSession?.(a, g, z)), a.on("peerconnection", () => {
+        a.connection.addEventListener("addstream", (N) => {
+          var b = document.createElement("audio");
+          N.streams !== void 0 && N.streams.length !== 0 && (b.srcObject = N.streams[0], b.play());
+        }), a.connection.addEventListener("track", (N) => {
+          var b = document.createElement("audio");
+          b.srcObject = N.streams[0], b.play();
+        });
+      });
+      return;
+    }
+    h.listeners.forEach((n) => n.onNewSession?.(a)), a.connection && (a.connection.addEventListener("addstream", (n) => {
+      var g = document.createElement("audio");
+      n.streams !== void 0 && n.streams.length !== 0 && (g.srcObject = n.streams[0], g.play());
+    }), a.connection.addEventListener("track", (n) => {
+      var g = document.createElement("audio");
+      g.srcObject = n.streams[0], g.play();
+    }));
+  }), _ = h, h;
+}
+function ue(e) {
+  e.isStarted || (e.ua.start(), e.isStarted = !0);
+}
+function me(e, f) {
+  e.listeners.add(f);
+}
+function he(e, f) {
+  e.listeners.delete(f);
+}
+function fe(e) {
+  return {
+    isReady: e.ua.isRegistered(),
+    isConnected: e.ua.isConnected()
+  };
+}
+const X = oe(null);
+function ge({
+  config: e,
+  children: f,
+  onCallStart: i,
+  onCallEnd: u,
+  onStatusChange: d,
+  onIncomingCall: y
+}) {
+  const [h, o] = v(""), [a, n] = v("disconnected"), [g, z] = v(null), [N, b] = v(0), [j, L] = v([]), [T, C] = v(!1), [c, I] = v("disconnected"), [m, k] = v(!1), [E, D] = v(null), S = $(null), l = $(null), H = $(null);
+  M(() => {
+    l.current = g;
+  }, [g]);
+  const Z = U(() => {
+    m || (k(!0), I("connecting"));
+  }, [m]);
+  M(() => {
+    if (!m) return;
+    const r = de(e);
+    H.current = r;
+    const x = fe(r);
+    x.isReady ? (C(!0), I("connected")) : x.isConnected && I("connected");
+    const R = {
+      onConnecting: () => I("connecting"),
+      onConnected: () => I("connected"),
+      onDisconnected: () => {
+        I("disconnected"), C(!1);
+      },
+      onRegistered: () => {
+        C(!0), I("connected");
+      },
+      onUnregistered: () => C(!1),
+      onRegistrationFailed: (w) => {
+        console.error("Registration failed:", w), C(!1), I("failed");
+      },
+      onNewSession: (w) => {
+        S.current = w;
+      },
+      onIncomingSession: (w, p, B) => {
+        if (S.current) {
+          w.terminate({ status_code: 486, reason_phrase: "Busy Here" });
+          return;
+        }
+        D({ session: w, callerNumber: p, callerName: B }), o(p), n("ringing"), y?.(p, B), w.on("failed", (O) => {
+          console.error("Incoming call failed:", O?.cause), n("failed"), P(p, 0, "missed"), D(null), S.current = null, setTimeout(() => n("disconnected"), 3e3);
+        }), w.on("ended", () => {
+          n("ended");
+          const O = l.current, q = O ? Math.floor((Date.now() - O) / 1e3) : 0;
+          P(p, q, "completed"), u?.(p, q, "completed"), D(null), S.current = null, setTimeout(() => {
+            n("disconnected"), z(null);
+          }, 2e3);
+        }), w.on("confirmed", () => {
+          n("confirmed"), z(Date.now()), D(null);
+        });
+      }
+    };
+    return me(r, R), ue(r), () => {
+      he(r, R);
+    };
+  }, [m, e.websocketUrl, e.sipUri, e.password, e.registrarServer, e.displayName, e.authorizationUser]), M(() => {
+    d?.(a);
+  }, [a, d]), M(() => {
+    const r = localStorage.getItem("tbi-phone-call-history");
+    if (r)
+      try {
+        L(JSON.parse(r));
+      } catch (x) {
+        console.error("Error loading call history", x);
+      }
+  }, []), M(() => {
+    j.length > 0 && localStorage.setItem("tbi-phone-call-history", JSON.stringify(j));
+  }, [j]), M(() => {
+    if (a === "confirmed" && g) {
+      const r = setInterval(() => {
+        b(Math.floor((Date.now() - g) / 1e3));
+      }, 1e3);
+      return () => clearInterval(r);
+    } else
+      b(0);
+  }, [a, g]), M(() => {
+    const r = (x) => {
+      const R = x.detail.number;
+      a === "disconnected" && W(R);
+    };
+    return window.addEventListener("StartCallEvent", r), () => {
+      window.removeEventListener("StartCallEvent", r);
+    };
+  }, [a]);
+  const P = U((r, x, R) => {
+    const w = {
+      id: Date.now().toString(),
+      number: r,
+      timestamp: Date.now(),
+      duration: x,
+      status: R
+    };
+    L((p) => [w, ...p].slice(0, 50));
+  }, []), ee = U(() => {
+    S.current && (S.current.terminate(), S.current = null), D(null);
+  }, []), te = U(() => {
+    if (!E) return;
+    const { session: r, callerNumber: x } = E, R = {
+      mediaConstraints: { audio: !0, video: !1 }
+    };
+    try {
+      r.answer(R), S.current = r, i?.(x);
+    } catch (w) {
+      console.error("Failed to answer call:", w), n("failed"), P(x, 0, "missed"), D(null), setTimeout(() => n("disconnected"), 3e3);
+    }
+  }, [E, i, P]), ne = U(() => {
+    if (!E) return;
+    const { session: r, callerNumber: x } = E;
+    try {
+      r.terminate({ status_code: 603, reason_phrase: "Decline" });
+    } catch (R) {
+      console.error("Failed to reject call:", R);
+    }
+    P(x, 0, "missed"), D(null), n("disconnected");
+  }, [E, P]), W = U((r) => {
+    const x = H.current;
+    if (!r.trim() || !x) return;
+    if (!T) {
+      console.warn("Phone is not ready yet. Please wait for registration.");
+      return;
+    }
+    o(r), i?.(r);
+    const w = {
+      eventHandlers: {
+        progress: () => {
+          n("progress");
+        },
+        failed: (p) => {
+          console.error("Call failed:", p?.cause), n("failed"), P(r, 0, "failed"), u?.(r, 0, "failed"), S.current = null, setTimeout(() => n("disconnected"), 3e3);
+        },
+        ended: () => {
+          n("ended");
+          const p = l.current, B = p ? Math.floor((Date.now() - p) / 1e3) : 0;
+          P(r, B, "completed"), u?.(r, B, "completed"), S.current = null, setTimeout(() => {
+            n("disconnected"), z(null);
+          }, 2e3);
+        },
+        confirmed: () => {
+          n("confirmed"), z(Date.now());
+        }
+      },
+      mediaConstraints: { audio: !0, video: !1 }
+    };
+    n("progress");
+    try {
+      const p = x.ua.call(r, w);
+      S.current = p;
+    } catch (p) {
+      console.error("Failed to start call:", p), n("failed"), P(r, 0, "failed"), setTimeout(() => n("disconnected"), 3e3);
+    }
+  }, [P, i, u, T]), re = {
+    status: a,
+    callNumber: h,
+    setCallNumber: o,
+    callHistory: j,
+    currentCallDuration: N,
+    startCall: W,
+    endCall: ee,
+    answerCall: te,
+    rejectCall: ne,
+    isReady: T,
+    connectionStatus: c,
+    isInitialized: m,
+    initialize: Z,
+    incomingCall: E
+  };
+  return /* @__PURE__ */ t(X.Provider, { value: re, children: f });
+}
+function pe() {
+  const e = ae(X);
+  if (!e)
+    throw new Error("usePhone must be used within a PhoneProvider");
+  return e;
+}
+const F = ({ className: e }) => /* @__PURE__ */ t("svg", { className: e, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" }) }), Q = ({ className: e }) => /* @__PURE__ */ t("svg", { className: e, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M15.05 5A7 7 0 0 1 19 8.95M15.05 1A11 11 0 0 1 23 8.94m-1 7.98v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) }), xe = ({ className: e }) => /* @__PURE__ */ t("svg", { className: e, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.12-.74-.03-1.02.24l-2.2 2.2c-2.83-1.45-5.15-3.76-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM19 12h2c0-4.97-4.03-9-9-9v2c3.87 0 7 3.13 7 7zm-4 0h2c0-2.76-2.24-5-5-5v2c1.66 0 3 1.34 3 3z" }) }), A = ({ className: e }) => /* @__PURE__ */ t("svg", { className: e, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08a.956.956 0 0 1-.29-.7c0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28a11.27 11.27 0 0 0-2.67-1.85.996.996 0 0 1-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z" }) }), Y = ({ className: e }) => /* @__PURE__ */ t("svg", { className: e, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M6.5 5.5 12 11l7-7-1-1-6 6-4.5-4.5H11V3H5v6h1.5V5.5zm17.21 11.17C20.66 13.78 16.54 12 12 12 7.46 12 3.34 13.78.29 16.67c-.18.18-.29.43-.29.71s.11.53.29.71l2.48 2.48c.18.18.43.29.71.29.27 0 .52-.11.7-.28.79-.74 1.69-1.36 2.66-1.85.33-.16.56-.5.56-.9v-3.1c1.45-.48 3-.73 4.6-.73 1.6 0 3.15.25 4.6.72v3.1c0 .39.23.74.56.9.98.49 1.87 1.12 2.67 1.85.18.18.43.28.7.28.28 0 .53-.11.71-.29l2.48-2.48c.18-.18.29-.43.29-.71s-.12-.52-.3-.7z" }) }), ve = ({ className: e }) => /* @__PURE__ */ s("svg", { className: e, viewBox: "0 0 24 24", fill: "currentColor", children: [
+  /* @__PURE__ */ t("path", { d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" }),
+  /* @__PURE__ */ t("path", { d: "M16 3l-5 5-2-2-1.5 1.5L11 11l6.5-6.5z" })
+] }), ye = ({ className: e }) => /* @__PURE__ */ s("svg", { className: e, viewBox: "0 0 24 24", fill: "currentColor", children: [
+  /* @__PURE__ */ t("path", { d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" }),
+  /* @__PURE__ */ t("path", { d: "M19 6.41L17.59 5 15 7.59 12.41 5 11 6.41 13.59 9 11 11.59 12.41 13 15 10.41 17.59 13 19 11.59 16.41 9z" })
+] }), be = ({ className: e }) => /* @__PURE__ */ t("svg", { className: e, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" }) }), Ce = ({ className: e }) => /* @__PURE__ */ t("svg", { className: e, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }), we = ({ className: e }) => /* @__PURE__ */ t("svg", { className: e, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z" }) });
+function Ne({ className: e, labels: f }) {
+  const {
+    status: i,
+    callNumber: u,
+    setCallNumber: d,
+    callHistory: y,
+    currentCallDuration: h,
+    startCall: o,
+    endCall: a,
+    answerCall: n,
+    rejectCall: g,
+    isReady: z,
+    connectionStatus: N,
+    isInitialized: b,
+    initialize: j,
+    incomingCall: L
+  } = pe(), [T, C] = v(!1), c = { ...le, ...f }, m = (() => {
+    switch (i) {
+      case "ringing":
+        return { text: c.incomingCall, color: "text-blue-500", Icon: Q };
+      case "progress":
+        return { text: `${c.calling}...`, color: "text-yellow-500", Icon: Q };
+      case "confirmed":
+        return { text: `${c.inCall} - ${J(h)}`, color: "text-green-500", Icon: xe };
+      case "failed":
+        return { text: c.callEnded, color: "text-red-500", Icon: Y };
+      case "ended":
+        return { text: c.callEnded, color: "text-gray-500", Icon: A };
+      default:
+        return { text: c.inactive, color: "text-gray-300", Icon: F };
+    }
+  })();
+  return /* @__PURE__ */ s("div", { className: K(
+    "tbi-phone w-full max-w-md mx-auto bg-white rounded-2xl shadow-lg border border-gray-200 p-2",
+    e
+  ), children: [
+    !b && /* @__PURE__ */ t("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ t(
+      "button",
+      {
+        onClick: j,
+        className: "h-8 w-8 flex items-center justify-center rounded-xl bg-gray-100 hover:bg-green-100 hover:text-green-600 text-gray-500 transition-colors",
+        type: "button",
+        title: c.turnOn,
+        children: /* @__PURE__ */ t(we, { className: "w-5 h-5" })
+      }
+    ) }),
+    b && i === "disconnected" && /* @__PURE__ */ s("div", { className: "flex gap-2 items-center", children: [
+      /* @__PURE__ */ t(
+        "button",
+        {
+          onClick: () => C(!0),
+          className: "h-8 w-8 flex items-center justify-center rounded-xl border border-gray-200 hover:bg-gray-50 transition-colors",
+          type: "button",
+          children: /* @__PURE__ */ t(be, { className: "w-4 h-4" })
+        }
+      ),
+      /* @__PURE__ */ t(
+        "input",
+        {
+          type: "text",
+          value: u,
+          onChange: (k) => d(k.target.value),
+          onKeyDown: (k) => {
+            k.key === "Enter" && o(u);
+          },
+          placeholder: c.placeholder,
+          className: "flex-1 w-full h-8 px-3 rounded-xl border border-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
+        }
+      ),
+      /* @__PURE__ */ t(
+        "button",
+        {
+          onClick: () => o(u),
+          disabled: u.length < 9 || !z,
+          className: "h-8 w-8 flex items-center justify-center rounded-xl bg-green-500 hover:bg-green-600 disabled:bg-gray-300 disabled:cursor-not-allowed text-white transition-colors",
+          type: "button",
+          title: z ? "Call" : "Connecting...",
+          children: N === "connecting" ? /* @__PURE__ */ t("div", { className: "w-4 h-4 border-2 border-white rounded-full animate-spin" }) : /* @__PURE__ */ t(F, { className: "w-4 h-4" })
+        }
+      )
+    ] }),
+    i === "progress" && /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-3 py-6", children: [
+      /* @__PURE__ */ s("div", { className: "relative", children: [
+        /* @__PURE__ */ t(m.Icon, { className: "w-12 h-12 text-yellow-500 animate-pulse" }),
+        /* @__PURE__ */ t("div", { className: "absolute inset-0 rounded-full border-4 border-yellow-500/30 animate-ping" })
+      ] }),
+      /* @__PURE__ */ s("div", { className: "text-center", children: [
+        /* @__PURE__ */ s("p", { className: "text-base font-semibold", children: [
+          c.calling,
+          " ",
+          u
+        ] }),
+        /* @__PURE__ */ t("p", { className: "text-sm text-gray-500", children: c.waitingResponse })
+      ] }),
+      /* @__PURE__ */ s(
+        "button",
+        {
+          onClick: a,
+          className: "flex items-center gap-2 px-6 py-2 rounded-full bg-red-500 hover:bg-red-600 text-white text-sm font-medium transition-colors",
+          type: "button",
+          children: [
+            /* @__PURE__ */ t(A, { className: "w-4 h-4" }),
+            c.cancel
+          ]
+        }
+      )
+    ] }),
+    i === "ringing" && L && /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-3 py-6", children: [
+      /* @__PURE__ */ s("div", { className: "relative", children: [
+        /* @__PURE__ */ t(m.Icon, { className: "w-12 h-12 text-blue-500 animate-bounce" }),
+        /* @__PURE__ */ t("div", { className: "absolute inset-0 rounded-full border-4 border-blue-500/30 animate-ping" })
+      ] }),
+      /* @__PURE__ */ s("div", { className: "text-center", children: [
+        /* @__PURE__ */ t("p", { className: "text-sm text-gray-500", children: c.incomingCall }),
+        /* @__PURE__ */ t("p", { className: "text-base font-semibold", children: L.callerNumber })
+      ] }),
+      /* @__PURE__ */ s("div", { className: "flex gap-3", children: [
+        /* @__PURE__ */ s(
+          "button",
+          {
+            onClick: g,
+            className: "flex items-center gap-2 px-6 py-2 rounded-full bg-red-500 hover:bg-red-600 text-white text-sm font-medium transition-colors",
+            type: "button",
+            children: [
+              /* @__PURE__ */ t(A, { className: "w-4 h-4" }),
+              c.reject
+            ]
+          }
+        ),
+        /* @__PURE__ */ s(
+          "button",
+          {
+            onClick: n,
+            className: "flex items-center gap-2 px-6 py-2 rounded-full bg-green-500 hover:bg-green-600 text-white text-sm font-medium transition-colors",
+            type: "button",
+            children: [
+              /* @__PURE__ */ t(F, { className: "w-4 h-4" }),
+              c.answer
+            ]
+          }
+        )
+      ] })
+    ] }),
+    i === "confirmed" && /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-4 py-6", children: [
+      /* @__PURE__ */ s("div", { className: "relative", children: [
+        /* @__PURE__ */ t(m.Icon, { className: "w-12 h-12 text-green-500" }),
+        /* @__PURE__ */ t("div", { className: "absolute inset-0 rounded-full bg-green-500/20 animate-pulse" })
+      ] }),
+      /* @__PURE__ */ s("div", { className: "text-center space-y-1", children: [
+        /* @__PURE__ */ t("p", { className: "text-xl font-bold", children: u }),
+        /* @__PURE__ */ t("p", { className: "text-2xl font-mono text-green-600 tabular-nums", children: J(h) })
+      ] }),
+      /* @__PURE__ */ s(
+        "button",
+        {
+          onClick: a,
+          className: "flex items-center gap-2 px-6 py-2 rounded-full bg-red-500 hover:bg-red-600 text-white text-sm font-medium transition-colors",
+          type: "button",
+          children: [
+            /* @__PURE__ */ t(A, { className: "w-4 h-4" }),
+            c.hangUp
+          ]
+        }
+      )
+    ] }),
+    (i === "failed" || i === "ended") && /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-3 py-6", children: [
+      /* @__PURE__ */ t(
+        m.Icon,
+        {
+          className: K(
+            "w-12 h-12",
+            i === "failed" ? "text-red-500" : "text-gray-500"
+          )
+        }
+      ),
+      /* @__PURE__ */ t("div", { className: "text-center", children: /* @__PURE__ */ t("p", { className: "text-base font-semibold", children: m.text }) })
+    ] }),
+    T && /* @__PURE__ */ s("div", { className: "fixed inset-0 z-50 flex", children: [
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: "fixed inset-0 bg-black/50",
+          onClick: () => C(!1)
+        }
+      ),
+      /* @__PURE__ */ t("div", { className: "fixed right-0 top-0 h-full w-full max-w-md bg-white shadow-xl", style: { backgroundColor: "white" }, children: /* @__PURE__ */ s("div", { className: "flex flex-col h-full", children: [
+        /* @__PURE__ */ s("div", { className: "flex items-center justify-between p-4 border-b", children: [
+          /* @__PURE__ */ s("div", { children: [
+            /* @__PURE__ */ t("h2", { className: "text-lg font-semibold", children: c.callHistory }),
+            /* @__PURE__ */ t("p", { className: "text-sm text-gray-500", children: y.length === 0 ? c.noCallsRegistered : `${y.length} ${c.callsRegistered}` })
+          ] }),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => C(!1),
+              className: "h-8 w-8 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors",
+              type: "button",
+              children: /* @__PURE__ */ t(Ce, { className: "w-5 h-5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t("div", { className: "flex-1 overflow-y-auto p-4", children: y.length === 0 ? /* @__PURE__ */ s("div", { className: "text-center py-12 text-gray-500", children: [
+          /* @__PURE__ */ t(A, { className: "w-12 h-12 mx-auto mb-2 opacity-50" }),
+          /* @__PURE__ */ t("p", { children: c.noCalls })
+        ] }) : /* @__PURE__ */ t("div", { className: "space-y-2", children: y.map((k, E) => /* @__PURE__ */ t(
+          Ie,
+          {
+            entry: k,
+            index: E,
+            onCall: () => {
+              d(k.number), C(!1), o(k.number);
+            }
+          },
+          k.id
+        )) }) })
+      ] }) })
+    ] })
+  ] });
+}
+function Ie({
+  entry: e,
+  index: f,
+  onCall: i
+}) {
+  const u = () => {
+    switch (e.status) {
+      case "completed":
+        return /* @__PURE__ */ t(ve, { className: "w-4 h-4 text-green-600" });
+      case "failed":
+        return /* @__PURE__ */ t(ye, { className: "w-4 h-4 text-red-600" });
+      case "missed":
+        return /* @__PURE__ */ t(Y, { className: "w-4 h-4 text-yellow-600" });
+    }
+  }, d = () => {
+    switch (e.status) {
+      case "completed":
+        return "bg-green-100";
+      case "failed":
+        return "bg-red-100";
+      case "missed":
+        return "bg-yellow-100";
+    }
+  };
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: "flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors duration-200",
+      style: { animationDelay: `${f * 30}ms` },
+      children: [
+        /* @__PURE__ */ t("div", { className: K(
+          "w-9 h-9 rounded-full flex items-center justify-center shrink-0",
+          d()
+        ), children: u() }),
+        /* @__PURE__ */ s("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ t("p", { className: "font-medium text-sm truncate", children: e.number }),
+          /* @__PURE__ */ s("div", { className: "flex items-center gap-2 text-xs text-gray-500", children: [
+            /* @__PURE__ */ t("span", { children: new Date(e.timestamp).toLocaleString("es-ES", {
+              day: "2-digit",
+              month: "2-digit",
+              hour: "2-digit",
+              minute: "2-digit"
+            }) }),
+            e.duration > 0 && /* @__PURE__ */ s(se, { children: [
+              /* @__PURE__ */ t("span", { children: "•" }),
+              /* @__PURE__ */ t("span", { className: "font-mono tabular-nums", children: J(e.duration) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            onClick: i,
+            className: "h-8 w-8 flex items-center justify-center shrink-0 rounded-lg hover:bg-gray-100 transition-colors",
+            type: "button",
+            children: /* @__PURE__ */ t(F, { className: "w-4 h-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function Ee({ config: e, className: f, onCallStart: i, onCallEnd: u, onStatusChange: d, labels: y }) {
+  return /* @__PURE__ */ t(
+    ge,
+    {
+      config: e,
+      onCallStart: i,
+      onCallEnd: u,
+      onStatusChange: d,
+      children: /* @__PURE__ */ t(Ne, { className: f, labels: y })
+    }
+  );
+}
+function He(e, f = {}) {
+  const {
+    onCallStart: i,
+    onCallEnd: u,
+    onStatusChange: d,
+    onConnectionChange: y,
+    persistHistory: h = !0,
+    historyKey: o = "tbi-phone-call-history"
+  } = f, [a, n] = v("disconnected"), [g, z] = v(""), [N, b] = v([]), [j, L] = v(0), [T, C] = v(!1), [c, I] = v("connecting"), m = $(null);
+  M(() => {
+    const l = new ce(
+      e,
+      {
+        onStatusChange: (H) => {
+          n(H), d?.(H);
+        },
+        onConnectionChange: (H) => {
+          I(H), (H === "connected" || H === "disconnected" || H === "failed") && C(l.state.isReady), y?.(H);
+        },
+        onCallStart: i,
+        onCallEnd: u,
+        onDurationUpdate: L,
+        onHistoryUpdate: b,
+        onRegistered: () => C(!0),
+        onUnregistered: () => C(!1)
+      },
+      {
+        persistHistory: h,
+        historyKey: o
+      }
+    );
+    return l.initialize(), m.current = l, n(l.state.status), z(l.state.callNumber), b(l.state.callHistory), C(l.state.isReady), I(l.state.connectionStatus), () => {
+      l.destroy(), m.current = null;
+    };
+  }, [
+    e.websocketUrl,
+    e.sipUri,
+    e.password,
+    e.registrarServer,
+    e.displayName,
+    e.authorizationUser,
+    h,
+    o
+  ]), M(() => {
+    m.current && m.current.setEvents({
+      onCallStart: i,
+      onCallEnd: u,
+      onStatusChange: (l) => {
+        n(l), d?.(l);
+      },
+      onConnectionChange: (l) => {
+        I(l), y?.(l);
+      }
+    });
+  }, [i, u, d, y]);
+  const k = U((l) => {
+    z(l), m.current?.setCallNumber(l);
+  }, []), E = U((l) => {
+    m.current?.startCall(l);
+  }, []), D = U(() => {
+    m.current?.endCall();
+  }, []), S = U(() => {
+    m.current?.clearHistory(), b([]);
+  }, []);
+  return {
+    status: a,
+    callNumber: g,
+    setCallNumber: k,
+    callHistory: N,
+    clearCallHistory: S,
+    currentCallDuration: j,
+    startCall: E,
+    endCall: D,
+    isReady: T,
+    connectionStatus: c,
+    ua: m.current?.ua ?? null
+  };
+}
+export {
+  Ee as P,
+  ge as a,
+  He as b,
+  pe as u
+};