@realtimexsco/live-chat 1.5.1 → 1.5.3

package/dist/index.cjs

@@ -8,9 +8,9 @@ var socket_ioClient = require('socket.io-client');
 var middleware = require('zustand/middleware');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var classVarianceAuthority = require('class-variance-authority');
 var radixUi = require('radix-ui');
 var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
 var React9 = require('react');
 var lucideReact = require('lucide-react');
 var reactDom = require('react-dom');
@@ -687,7 +687,7 @@ var init_call_api = __esm({
 });
 
 // src/call/call.types.ts
-exports.CALL_MODES = void 0; exports.CALL_STATUS = void 0; var CALL_RING_TIMEOUT_MS, CLIENT_RING_FALLBACK_MS, CALL_LOG_EVENT;
+exports.CALL_MODES = void 0; exports.CALL_STATUS = void 0; var CALL_RING_TIMEOUT_MS, CLIENT_RING_FALLBACK_MS;
 var init_call_types = __esm({
   "src/call/call.types.ts"() {
     exports.CALL_MODES = {
@@ -704,22 +704,15 @@ var init_call_types = __esm({
     };
     CALL_RING_TIMEOUT_MS = 4e4;
     CLIENT_RING_FALLBACK_MS = CALL_RING_TIMEOUT_MS + 5e3;
-    CALL_LOG_EVENT = "realtimex:call-log";
   }
 });
-var emitCallLog, ringTimer, clearRingTimer, scheduleRingTimer, idleState; exports.useCallStore = void 0;
+var ringTimer, clearRingTimer, scheduleRingTimer, idleState; exports.useCallStore = void 0;
 var init_call_store = __esm({
   "src/call/call.store.ts"() {
     init_useStore();
     init_socket_service2();
     init_call_api();
     init_call_types();
-    emitCallLog = (entry) => {
-      try {
-        window.dispatchEvent(new CustomEvent(CALL_LOG_EVENT, { detail: entry }));
-      } catch {
-      }
-    };
     ringTimer = null;
     clearRingTimer = () => {
       if (ringTimer) clearTimeout(ringTimer);
@@ -817,6 +810,12 @@ var init_call_store = __esm({
         clearRingTimer();
         set({ ...idleState });
       },
+      notifyServerCallFailed: () => {
+        const { callId } = get();
+        if (callId) {
+          exports.socketService.emitCallEnd({ callId });
+        }
+      },
       _receiveIncoming: (payload) => {
         const currentStatus = get().uiStatus;
         if (currentStatus !== "idle") {
@@ -865,53 +864,60 @@ var init_call_store = __esm({
         }));
       },
       _receiveCancelled: (payload) => {
-        if (get().callId !== payload.callId) return;
-        clearRingTimer();
-        const myUserId = exports.useChatStore.getState().loggedUserDetails?._id;
-        if (payload.endedBy !== myUserId) {
-          emitCallLog({
-            conversationId: payload.conversationId,
-            mode: payload.mode,
-            outcome: "missed",
-            durationSeconds: 0
-          });
+        const state = get();
+        if (state.callId !== payload.callId) return;
+        if (state.uiStatus === "in-call") {
+          console.warn(
+            `[realtimex-call] call_cancelled for ${payload.callId} ignored \u2014 this call is already in-call locally; treating as a stale event.`
+          );
+          return;
         }
+        clearRingTimer();
         set({ ...idleState });
       },
+      // Missed/ended/declined/etc. call log messages are now persisted by the
+      // backend as real chat messages (CALLS_API.md §3.5) — they arrive
+      // through the normal dm_receive/group_message_receive pipeline with
+      // isSystemMessage: true, so they render automatically with zero extra
+      // code here. Nothing to do on this event beyond resetting local state.
       _receiveEnded: (payload) => {
         if (get().callId !== payload.callId) return;
         clearRingTimer();
-        emitCallLog({
-          conversationId: payload.conversationId,
-          mode: payload.mode,
-          outcome: payload.durationSeconds > 0 ? "completed" : "declined",
-          durationSeconds: payload.durationSeconds
-        });
         set({ ...idleState });
       },
       _receiveBusy: (payload) => {
-        if (get().callId !== payload.callId) return;
+        const state = get();
+        if (state.callId !== payload.callId) return;
+        if (state.uiStatus === "in-call") {
+          console.warn(
+            `[realtimex-call] call_busy for ${payload.callId} ignored \u2014 this call is already in-call locally; treating as a stale event.`
+          );
+          return;
+        }
         clearRingTimer();
-        emitCallLog({
-          conversationId: payload.conversationId,
-          mode: payload.mode,
-          outcome: "busy",
-          durationSeconds: 0
-        });
         set({ ...idleState, error: "That user is already on another call." });
       },
       // Guarded by callId like every other _receive* handler — a late/stale
       // call_missed for a call that has already ended (accepted, rejected,
       // or replaced by a new one) must not clobber whatever is happening now.
+      //
+      // Live testing once caught the backend's 40s ring-timeout firing
+      // call_missed for a callId that was already call_accepted (timer not
+      // cancelled on accept). Backend has since added an atomic
+      // only-from-ringing guard (CALLS_API.md §3.3) so this should no longer
+      // happen — the uiStatus check below is kept as defense-in-depth rather
+      // than removed, since it costs nothing and a regression here would
+      // otherwise kill a live call outright.
       _receiveMissed: (payload) => {
-        if (get().callId !== payload.callId) return;
+        const state = get();
+        if (state.callId !== payload.callId) return;
+        if (state.uiStatus === "in-call") {
+          console.warn(
+            `[realtimex-call] call_missed for ${payload.callId} ignored \u2014 this call is already in-call locally; treating as a stale event.`
+          );
+          return;
+        }
         clearRingTimer();
-        emitCallLog({
-          conversationId: payload.conversationId,
-          mode: payload.mode,
-          outcome: "missed",
-          durationSeconds: 0
-        });
         set({ ...idleState });
       }
     }));
@@ -4322,6 +4328,58 @@ var init_utils2 = __esm({
   "src/lib/utils.ts"() {
   }
 });
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Avatar.Root,
+    {
+      "data-slot": "avatar",
+      "data-size": size,
+      className: cn(
+        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Avatar.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn("aspect-square size-full", className),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Avatar.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var init_avatar = __esm({
+  "src/ui/avatar.tsx"() {
+    init_utils2();
+  }
+});
 function Button({
   className,
   variant = "default",
@@ -4376,58 +4434,6 @@ var init_button = __esm({
     );
   }
 });
-function Avatar({
-  className,
-  size = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Avatar.Root,
-    {
-      "data-slot": "avatar",
-      "data-size": size,
-      className: cn(
-        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AvatarImage({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Avatar.Image,
-    {
-      "data-slot": "avatar-image",
-      className: cn("aspect-square size-full", className),
-      ...props
-    }
-  );
-}
-function AvatarFallback({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Avatar.Fallback,
-    {
-      "data-slot": "avatar-fallback",
-      className: cn(
-        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
-        className
-      ),
-      ...props
-    }
-  );
-}
-var init_avatar = __esm({
-  "src/ui/avatar.tsx"() {
-    init_utils2();
-  }
-});
 
 // src/call/videosdk.loader.ts
 var loadVideoSDK;
@@ -4463,6 +4469,7 @@ var init_ParticipantView = __esm({
       const { webcamStream, micStream, webcamOn, micOn, displayName, isActiveSpeaker } = sdk.useParticipant(participantId);
       const videoRef = React9.useRef(null);
       const audioRef = React9.useRef(null);
+      const [hasFrame, setHasFrame] = React9.useState(false);
       React9.useEffect(() => {
         const el = videoRef.current;
         if (!el) return;
@@ -4471,6 +4478,7 @@ var init_ParticipantView = __esm({
           el.play().catch(() => void 0);
         } else {
           el.srcObject = null;
+          setHasFrame(false);
         }
       }, [webcamOn, webcamStream]);
       React9.useEffect(() => {
@@ -4485,6 +4493,7 @@ var init_ParticipantView = __esm({
         }
       }, [micOn, micStream, isLocal]);
       const name = displayName || fallbackName || "Participant";
+      const showVideo = webcamOn && hasFrame;
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -4500,14 +4509,15 @@ var init_ParticipantView = __esm({
                 ref: videoRef,
                 muted: isLocal,
                 playsInline: true,
+                onPlaying: () => setHasFrame(true),
                 className: cn(
                   "size-full object-cover",
-                  webcamOn ? "block" : "hidden"
+                  showVideo ? "block" : "hidden"
                 )
               }
             ),
             !isLocal && /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, autoPlay: true, playsInline: true }),
-            !webcamOn && /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { size: "lg", className: "size-20", children: [
+            !showVideo && /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { size: "lg", className: "size-20", children: [
               /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: fallbackImage, alt: name }),
               /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "bg-neutral-700 text-xl font-medium text-white", children: name.charAt(0).toUpperCase() })
             ] }),
@@ -4522,6 +4532,53 @@ var init_ParticipantView = __esm({
     ParticipantView_default = ParticipantView;
   }
 });
+var AudioCallView, AudioCallView_default;
+var init_AudioCallView = __esm({
+  "src/call/AudioCallView.tsx"() {
+    init_avatar();
+    init_utils2();
+    AudioCallView = ({
+      sdk,
+      remoteParticipantId,
+      peerName,
+      peerAvatar
+    }) => {
+      const remote = remoteParticipantId ? sdk.useParticipant(remoteParticipantId) : null;
+      const name = remote?.displayName || peerName || "In call";
+      const isSpeaking = !!remote?.isActiveSpeaker && remote?.micOn;
+      const isMuted = remote != null && !remote.micOn;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-6 p-6 text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "absolute inline-flex size-36 rounded-full bg-emerald-400/15 transition-opacity duration-300",
+                isSpeaking ? "animate-ping opacity-100" : "opacity-0"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Avatar,
+            {
+              className: cn(
+                "relative size-28 ring-4 transition-colors duration-300",
+                isSpeaking ? "ring-emerald-400/80" : "ring-white/10"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: peerAvatar, alt: name }),
+                /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "bg-neutral-700 text-3xl font-medium text-white", children: name.charAt(0).toUpperCase() })
+              ]
+            }
+          ),
+          isMuted && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -right-1 -bottom-1 flex size-9 items-center justify-center rounded-full bg-neutral-700 ring-4 ring-neutral-900", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MicOff, { size: 16, className: "text-white/80" }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl font-semibold tracking-tight", children: name })
+      ] });
+    };
+    AudioCallView_default = AudioCallView;
+  }
+});
 var circleBtn, CallControls, CallControls_default;
 var init_CallControls = __esm({
   "src/call/CallControls.tsx"() {
@@ -4587,9 +4644,10 @@ var MeetingView, MeetingView_default;
 var init_MeetingView = __esm({
   "src/call/MeetingView.tsx"() {
     init_ParticipantView();
+    init_AudioCallView();
     init_CallControls();
     init_call_store();
-    MeetingView = ({ sdk, mode }) => {
+    MeetingView = ({ sdk, mode, peerName, peerAvatar }) => {
       const endCall = exports.useCallStore((s) => s.endCall);
       const [hasJoined, setHasJoined] = React9.useState(false);
       const hasJoinedRef = React9.useRef(false);
@@ -4612,7 +4670,23 @@ var init_MeetingView = __esm({
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: "Connecting\u2026" })
         ] });
       }
-      const remoteIds = Array.from(participants.keys());
+      const remoteIds = Array.from(participants.keys()).filter(
+        (id) => id !== localParticipant?.id
+      );
+      if (mode === "audio") {
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            AudioCallView_default,
+            {
+              sdk,
+              remoteParticipantId: remoteIds[0],
+              peerName,
+              peerAvatar
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(CallControls_default, { sdk, mode })
+        ] });
+      }
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
@@ -4626,7 +4700,16 @@ var init_MeetingView = __esm({
             },
             children: [
               localParticipant?.id && /* @__PURE__ */ jsxRuntime.jsx(ParticipantView_default, { sdk, participantId: localParticipant.id, isLocal: true }),
-              remoteIds.map((id) => /* @__PURE__ */ jsxRuntime.jsx(ParticipantView_default, { sdk, participantId: id }, id))
+              remoteIds.map((id) => /* @__PURE__ */ jsxRuntime.jsx(
+                ParticipantView_default,
+                {
+                  sdk,
+                  participantId: id,
+                  fallbackName: peerName,
+                  fallbackImage: peerAvatar
+                },
+                id
+              ))
             ]
           }
         ),
@@ -4648,7 +4731,14 @@ var init_CallSession = __esm({
     init_useStore();
     init_videosdk_loader();
     init_MeetingView();
-    CallSession = ({ meetingId, token, mode, onError }) => {
+    CallSession = ({
+      meetingId,
+      token,
+      mode,
+      peerName,
+      peerAvatar,
+      onError
+    }) => {
       const [sdk, setSdk] = React9.useState(null);
       const userId = exports.useChatStore((s) => s.loggedUserDetails?._id);
       const userName = exports.useChatStore((s) => s.loggedUserDetails?.name);
@@ -4689,7 +4779,7 @@ var init_CallSession = __esm({
           token,
           reinitialiseMeetingOnConfigChange: false,
           joinWithoutUserInteraction: true,
-          children: /* @__PURE__ */ jsxRuntime.jsx(MeetingView_default, { sdk, mode })
+          children: /* @__PURE__ */ jsxRuntime.jsx(MeetingView_default, { sdk, mode, peerName, peerAvatar })
         }
       );
     };
@@ -5641,6 +5731,167 @@ function useEffectiveSettingsOptional() {
   };
 }
 
+// src/call/CallOverlay.tsx
+init_avatar();
+init_button();
+init_call_store();
+
+// src/call/useRingCountdown.ts
+init_call_types();
+var useRingCountdown = (active, callId) => {
+  const [secondsLeft, setSecondsLeft] = React9.useState(
+    Math.ceil(CALL_RING_TIMEOUT_MS / 1e3)
+  );
+  React9.useEffect(() => {
+    if (!active) return;
+    const startedAt = Date.now();
+    setSecondsLeft(Math.ceil(CALL_RING_TIMEOUT_MS / 1e3));
+    const id = setInterval(() => {
+      const remainingMs = CALL_RING_TIMEOUT_MS - (Date.now() - startedAt);
+      setSecondsLeft(Math.max(0, Math.ceil(remainingMs / 1e3)));
+    }, 1e3);
+    return () => clearInterval(id);
+  }, [active, callId]);
+  return secondsLeft;
+};
+var useCallDuration = (startedAt) => {
+  const [elapsedMs, setElapsedMs] = React9.useState(0);
+  React9.useEffect(() => {
+    if (!startedAt) {
+      setElapsedMs(0);
+      return;
+    }
+    setElapsedMs(Date.now() - startedAt);
+    const id = setInterval(() => setElapsedMs(Date.now() - startedAt), 1e3);
+    return () => clearInterval(id);
+  }, [startedAt]);
+  const totalSeconds = Math.max(0, Math.floor(elapsedMs / 1e3));
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = totalSeconds % 60;
+  const pad = (n) => String(n).padStart(2, "0");
+  return hours > 0 ? `${hours}:${pad(minutes)}:${pad(seconds)}` : `${pad(minutes)}:${pad(seconds)}`;
+};
+var CallSession2 = React9__namespace.default.lazy(() => Promise.resolve().then(() => (init_CallSession(), CallSession_exports)));
+var CallOverlay = () => {
+  const uiStatus = exports.useCallStore((s) => s.uiStatus);
+  const mode = exports.useCallStore((s) => s.mode);
+  const callId = exports.useCallStore((s) => s.callId);
+  const meetingId = exports.useCallStore((s) => s.meetingId);
+  const token = exports.useCallStore((s) => s.token);
+  const error = exports.useCallStore((s) => s.error);
+  const callee = exports.useCallStore((s) => s.callee);
+  const caller = exports.useCallStore((s) => s.caller);
+  const callStartedAt = exports.useCallStore((s) => s.callStartedAt);
+  const cancelCall = exports.useCallStore((s) => s.cancelCall);
+  const reset = exports.useCallStore((s) => s.reset);
+  const notifyServerCallFailed = exports.useCallStore((s) => s.notifyServerCallFailed);
+  const [sessionError, setSessionError] = React9.useState(null);
+  const secondsLeft = useRingCountdown(uiStatus === "ringing-out", callId);
+  const duration = useCallDuration(callStartedAt);
+  React9.useEffect(() => {
+    setSessionError(null);
+  }, [callId]);
+  React9.useEffect(() => {
+    if (sessionError) notifyServerCallFailed();
+  }, [sessionError, notifyServerCallFailed]);
+  const isOpen = uiStatus !== "idle" && uiStatus !== "incoming";
+  if (!isOpen || typeof document === "undefined") return null;
+  const displayError = error || sessionError;
+  const peerName = callee?.name || caller?.name || "";
+  const peerAvatar = callee?.avatar || caller?.profileImage || void 0;
+  const isVideo = mode === "video";
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          width: "100vw",
+          height: "100vh",
+          zIndex: 2147483647
+        },
+        className: "flex flex-col overflow-hidden bg-gradient-to-b from-neutral-900 via-neutral-950 to-black text-white",
+        children: displayError ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-4 p-6 text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-sm text-sm text-white/80", children: displayError }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "secondary", onClick: reset, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16, className: "mr-1" }),
+            " Close"
+          ] })
+        ] }) : uiStatus === "in-call" && meetingId && token && mode ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-3 text-sm text-white/70", children: [
+            peerName && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-white/90", children: peerName }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-white/30", children: "\xB7" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: duration })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            React9__namespace.default.Suspense,
+            {
+              fallback: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-3 text-white/80", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-8 animate-spin" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: "Loading call\u2026" })
+              ] }),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                CallSession2,
+                {
+                  meetingId,
+                  token,
+                  mode,
+                  peerName,
+                  peerAvatar,
+                  onError: setSessionError
+                }
+              )
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-6 p-6 text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
+            uiStatus === "ringing-out" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inline-flex size-32 animate-ping rounded-full bg-white/10" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "absolute inline-flex size-32 animate-ping rounded-full bg-white/5",
+                  style: { animationDelay: "0.6s" }
+                }
+              )
+            ] }),
+            peerName ? /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "relative size-28 ring-4 ring-white/10", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: peerAvatar, alt: peerName }),
+              /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "bg-neutral-700 text-3xl font-medium text-white", children: peerName.charAt(0).toUpperCase() })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex size-28 items-center justify-center rounded-full bg-white/10", children: isVideo ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { size: 36 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Phone, { size: 36 }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            peerName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl font-semibold tracking-tight", children: peerName }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-sm text-white/60", children: [
+              uiStatus === "creating" && "Starting call\u2026",
+              uiStatus === "ringing-out" && `${isVideo ? "Video calling" : "Calling"}\u2026 \xB7 ${secondsLeft}s`,
+              uiStatus === "joining" && "Connecting\u2026"
+            ] })
+          ] }),
+          uiStatus === "ringing-out" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "size-16 rounded-full bg-red-600 text-white shadow-lg shadow-red-600/30 transition-transform hover:scale-105 hover:bg-red-500 active:scale-95",
+                "aria-label": "Cancel call",
+                onClick: cancelCall,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PhoneOff, { size: 24 })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-white/60", children: "Cancel" })
+          ] })
+        ] })
+      }
+    ),
+    document.body
+  );
+};
+var CallOverlay_default = CallOverlay;
+
 // src/ui/dialog.tsx
 init_utils2();
 function Dialog({
@@ -6179,154 +6430,7 @@ var ChatAlertDialogContent = ({
   );
 };
 
-// src/call/CallOverlay.tsx
-init_avatar();
-init_button();
-init_utils2();
-init_call_store();
-
-// src/call/useRingCountdown.ts
-init_call_types();
-var useRingCountdown = (active, callId) => {
-  const [secondsLeft, setSecondsLeft] = React9.useState(
-    Math.ceil(CALL_RING_TIMEOUT_MS / 1e3)
-  );
-  React9.useEffect(() => {
-    if (!active) return;
-    const startedAt = Date.now();
-    setSecondsLeft(Math.ceil(CALL_RING_TIMEOUT_MS / 1e3));
-    const id = setInterval(() => {
-      const remainingMs = CALL_RING_TIMEOUT_MS - (Date.now() - startedAt);
-      setSecondsLeft(Math.max(0, Math.ceil(remainingMs / 1e3)));
-    }, 1e3);
-    return () => clearInterval(id);
-  }, [active, callId]);
-  return secondsLeft;
-};
-var useCallDuration = (startedAt) => {
-  const [elapsedMs, setElapsedMs] = React9.useState(0);
-  React9.useEffect(() => {
-    if (!startedAt) {
-      setElapsedMs(0);
-      return;
-    }
-    setElapsedMs(Date.now() - startedAt);
-    const id = setInterval(() => setElapsedMs(Date.now() - startedAt), 1e3);
-    return () => clearInterval(id);
-  }, [startedAt]);
-  const totalSeconds = Math.max(0, Math.floor(elapsedMs / 1e3));
-  const hours = Math.floor(totalSeconds / 3600);
-  const minutes = Math.floor(totalSeconds % 3600 / 60);
-  const seconds = totalSeconds % 60;
-  const pad = (n) => String(n).padStart(2, "0");
-  return hours > 0 ? `${hours}:${pad(minutes)}:${pad(seconds)}` : `${pad(minutes)}:${pad(seconds)}`;
-};
-var CallSession2 = React9__namespace.default.lazy(() => Promise.resolve().then(() => (init_CallSession(), CallSession_exports)));
-var CallOverlay = () => {
-  const uiStatus = exports.useCallStore((s) => s.uiStatus);
-  const mode = exports.useCallStore((s) => s.mode);
-  const callId = exports.useCallStore((s) => s.callId);
-  const meetingId = exports.useCallStore((s) => s.meetingId);
-  const token = exports.useCallStore((s) => s.token);
-  const error = exports.useCallStore((s) => s.error);
-  const callee = exports.useCallStore((s) => s.callee);
-  const caller = exports.useCallStore((s) => s.caller);
-  const callStartedAt = exports.useCallStore((s) => s.callStartedAt);
-  const cancelCall = exports.useCallStore((s) => s.cancelCall);
-  const reset = exports.useCallStore((s) => s.reset);
-  const [sessionError, setSessionError] = React9.useState(null);
-  const secondsLeft = useRingCountdown(uiStatus === "ringing-out", callId);
-  const duration = useCallDuration(callStartedAt);
-  const isOpen = uiStatus !== "idle" && uiStatus !== "incoming";
-  if (!isOpen) return null;
-  const displayError = error || sessionError;
-  const peerName = callee?.name || caller?.name || "";
-  const peerAvatar = callee?.avatar || caller?.profileImage || void 0;
-  const isVideo = mode === "video";
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: () => void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
-    ChatDialogContent,
-    {
-      showCloseButton: false,
-      onEscapeKeyDown: (e) => e.preventDefault(),
-      onPointerDownOutside: (e) => e.preventDefault(),
-      className: cn(
-        "fixed inset-0 top-0 left-0 z-100 flex h-screen w-screen max-w-none",
-        "translate-x-0 translate-y-0 flex-col rounded-none border-0 bg-gradient-to-b from-neutral-900 via-neutral-950 to-black p-0 text-white"
-      ),
-      children: displayError ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-4 p-6 text-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-sm text-sm text-white/80", children: displayError }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "secondary", onClick: reset, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16, className: "mr-1" }),
-          " Close"
-        ] })
-      ] }) : uiStatus === "in-call" && meetingId && token && mode ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-3 text-sm text-white/70", children: [
-          peerName && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-white/90", children: peerName }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-white/30", children: "\xB7" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: duration })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          React9__namespace.default.Suspense,
-          {
-            fallback: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-3 text-white/80", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-8 animate-spin" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: "Loading call\u2026" })
-            ] }),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              CallSession2,
-              {
-                meetingId,
-                token,
-                mode,
-                onError: setSessionError
-              }
-            )
-          }
-        )
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-6 p-6 text-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
-          uiStatus === "ringing-out" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inline-flex size-32 animate-ping rounded-full bg-white/10" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: "absolute inline-flex size-32 animate-ping rounded-full bg-white/5",
-                style: { animationDelay: "0.6s" }
-              }
-            )
-          ] }),
-          peerName ? /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "relative size-28 ring-4 ring-white/10", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: peerAvatar, alt: peerName }),
-            /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "bg-neutral-700 text-3xl font-medium text-white", children: peerName.charAt(0).toUpperCase() })
-          ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex size-28 items-center justify-center rounded-full bg-white/10", children: isVideo ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { size: 36 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Phone, { size: 36 }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          peerName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl font-semibold tracking-tight", children: peerName }),
-          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-sm text-white/60", children: [
-            uiStatus === "creating" && "Starting call\u2026",
-            uiStatus === "ringing-out" && `${isVideo ? "Video calling" : "Calling"}\u2026 \xB7 ${secondsLeft}s`,
-            uiStatus === "joining" && "Connecting\u2026"
-          ] })
-        ] }),
-        uiStatus === "ringing-out" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex flex-col items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              className: "size-16 rounded-full bg-red-600 text-white shadow-lg shadow-red-600/30 transition-transform hover:scale-105 hover:bg-red-500 active:scale-95",
-              "aria-label": "Cancel call",
-              onClick: cancelCall,
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PhoneOff, { size: 24 })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-white/60", children: "Cancel" })
-        ] })
-      ] })
-    }
-  ) });
-};
-var CallOverlay_default = CallOverlay;
+// src/call/IncomingCallDialog.tsx
 init_avatar();
 init_button();
 init_utils2();
@@ -6893,18 +6997,6 @@ var installNotificationClickBridge = (options = {}) => {
 };
 
 // src/hooks/useChatController.ts
-init_call_types();
-function formatCallLogText(entry) {
-  const label = entry.mode === "video" ? "video" : "voice";
-  if (entry.outcome === "missed") return `Missed ${label} call`;
-  if (entry.outcome === "declined") return `${label === "video" ? "Video" : "Voice"} call declined`;
-  if (entry.outcome === "busy") return `${label === "video" ? "Video" : "Voice"} call \xB7 not answered`;
-  const totalSeconds = Math.max(0, Math.floor(entry.durationSeconds));
-  const minutes = Math.floor(totalSeconds / 60);
-  const seconds = totalSeconds % 60;
-  const duration = `${minutes}:${String(seconds).padStart(2, "0")}`;
-  return `${label === "video" ? "Video" : "Voice"} call \xB7 ${duration}`;
-}
 function resolveMessageType(content, attachments) {
   if (attachments.length === 0) return "text";
   if (!content.trim() && attachments.length === 1) {
@@ -6962,28 +7054,6 @@ var useChatController = () => {
     );
   }, []);
   const { localMessages, setLocalMessages } = useChatSync();
-  React9.useEffect(() => {
-    const handleCallLog = (event) => {
-      const entry = event.detail;
-      if (!entry?.conversationId) return;
-      const logMessage = {
-        id: `call-log-${Date.now()}-${Math.random().toString(36).slice(2)}`,
-        content: formatCallLogText(entry),
-        sender: "system",
-        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-        isOwnMessage: false,
-        isSystemMessage: true,
-        channelId: entry.conversationId,
-        conversationId: entry.conversationId
-      };
-      setLocalMessages((prev) => ({
-        ...prev,
-        [entry.conversationId]: [...prev[entry.conversationId] || [], logMessage]
-      }));
-    };
-    window.addEventListener(CALL_LOG_EVENT, handleCallLog);
-    return () => window.removeEventListener(CALL_LOG_EVENT, handleCallLog);
-  }, [setLocalMessages]);
   const emitDmSend = exports.useChatStore((s) => s.emitDmSend);
   const emitGroupMessageSend2 = exports.useChatStore((s) => s.emitGroupMessageSend);
   const emitMarkAsRead = exports.useChatStore((s) => s.emitMarkAsRead);