@realtimexsco/live-chat 1.5.2 → 1.5.3

package/dist/index.mjs

@@ -4,13 +4,13 @@ import { io } from 'socket.io-client';
 import { persist } from 'zustand/middleware';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { cva } from 'class-variance-authority';
-import { Dialog as Dialog$1, Slot, Avatar as Avatar$1, Tooltip as Tooltip$1, Switch as Switch$1, ScrollArea as ScrollArea$1, Popover as Popover$1, DropdownMenu as DropdownMenu$1, AlertDialog as AlertDialog$1 } from 'radix-ui';
+import { Slot, Avatar as Avatar$1, Dialog as Dialog$1, Tooltip as Tooltip$1, Switch as Switch$1, ScrollArea as ScrollArea$1, Popover as Popover$1, DropdownMenu as DropdownMenu$1, AlertDialog as AlertDialog$1 } from 'radix-ui';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
 import * as React9 from 'react';
 import React9__default, { createContext, useState, useEffect, useMemo, useContext, useCallback, useRef, useLayoutEffect, Fragment as Fragment$1, useSyncExternalStore } from 'react';
 import { Loader2, X, Video, Phone, PhoneOff, Sun, Moon, Settings, Search, UserPlus, ChevronDown, ArrowLeft, Users, WifiOff, Wifi, Sparkles, MessageSquareText, ChevronRight, Pin, Star, MoreVertical, Info, UserKey, ShieldUser, Paperclip, Clock, MessageSquareX, Trash2, LogOut, Ban, CheckCheck, Check, Camera, Save, Pencil, Mail, CornerUpLeft, CheckSquare, Smile, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, MessageCircleMore, History, Shield, Send, AlertCircle, ShieldCheck, UserMinus, MessageCircle, ExternalLink, Download, ChevronLeft, ZoomOut, ZoomIn, RotateCcw, Music, MicOff, Mic, VideoOff, XIcon, ArrowRight, MoreHorizontal, PinOff, StarOff, ImageIcon, Film, Play, Pause, FileText, FileSpreadsheet, FileIcon, MessageSquare, Eye, Captions } from 'lucide-react';
-import { flushSync } from 'react-dom';
+import { createPortal, flushSync } from 'react-dom';
 import EmojiPicker, { Theme } from 'emoji-picker-react';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
 import toast$1, { Toaster, toast } from 'react-hot-toast';
@@ -659,7 +659,7 @@ var init_call_api = __esm({
 });
 
 // src/call/call.types.ts
-var CALL_MODES, CALL_STATUS, CALL_RING_TIMEOUT_MS, CLIENT_RING_FALLBACK_MS, CALL_LOG_EVENT;
+var CALL_MODES, CALL_STATUS, CALL_RING_TIMEOUT_MS, CLIENT_RING_FALLBACK_MS;
 var init_call_types = __esm({
   "src/call/call.types.ts"() {
     CALL_MODES = {
@@ -676,22 +676,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, useCallStore;
+var ringTimer, clearRingTimer, scheduleRingTimer, idleState, useCallStore;
 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);
@@ -843,53 +836,60 @@ var init_call_store = __esm({
         }));
       },
       _receiveCancelled: (payload) => {
-        if (get().callId !== payload.callId) return;
-        clearRingTimer();
-        const myUserId = useStore.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 });
       }
     }));
@@ -4300,6 +4300,58 @@ var init_utils2 = __esm({
   "src/lib/utils.ts"() {
   }
 });
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.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__ */ jsx(
+    Avatar$1.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn("aspect-square size-full", className),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.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",
@@ -4354,58 +4406,6 @@ var init_button = __esm({
     );
   }
 });
-function Avatar({
-  className,
-  size = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Avatar$1.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__ */ jsx(
-    Avatar$1.Image,
-    {
-      "data-slot": "avatar-image",
-      className: cn("aspect-square size-full", className),
-      ...props
-    }
-  );
-}
-function AvatarFallback({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Avatar$1.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;
@@ -4441,6 +4441,7 @@ var init_ParticipantView = __esm({
       const { webcamStream, micStream, webcamOn, micOn, displayName, isActiveSpeaker } = sdk.useParticipant(participantId);
       const videoRef = useRef(null);
       const audioRef = useRef(null);
+      const [hasFrame, setHasFrame] = useState(false);
       useEffect(() => {
         const el = videoRef.current;
         if (!el) return;
@@ -4449,6 +4450,7 @@ var init_ParticipantView = __esm({
           el.play().catch(() => void 0);
         } else {
           el.srcObject = null;
+          setHasFrame(false);
         }
       }, [webcamOn, webcamStream]);
       useEffect(() => {
@@ -4463,6 +4465,7 @@ var init_ParticipantView = __esm({
         }
       }, [micOn, micStream, isLocal]);
       const name = displayName || fallbackName || "Participant";
+      const showVideo = webcamOn && hasFrame;
       return /* @__PURE__ */ jsxs(
         "div",
         {
@@ -4478,14 +4481,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__ */ jsx("audio", { ref: audioRef, autoPlay: true, playsInline: true }),
-            !webcamOn && /* @__PURE__ */ jsxs(Avatar, { size: "lg", className: "size-20", children: [
+            !showVideo && /* @__PURE__ */ jsxs(Avatar, { size: "lg", className: "size-20", children: [
               /* @__PURE__ */ jsx(AvatarImage, { src: fallbackImage, alt: name }),
               /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-neutral-700 text-xl font-medium text-white", children: name.charAt(0).toUpperCase() })
             ] }),
@@ -4500,6 +4504,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__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-6 p-6 text-center", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
+          /* @__PURE__ */ 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__ */ jsxs(
+            Avatar,
+            {
+              className: cn(
+                "relative size-28 ring-4 transition-colors duration-300",
+                isSpeaking ? "ring-emerald-400/80" : "ring-white/10"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(AvatarImage, { src: peerAvatar, alt: name }),
+                /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-neutral-700 text-3xl font-medium text-white", children: name.charAt(0).toUpperCase() })
+              ]
+            }
+          ),
+          isMuted && /* @__PURE__ */ 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__ */ jsx(MicOff, { size: 16, className: "text-white/80" }) })
+        ] }),
+        /* @__PURE__ */ 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"() {
@@ -4565,9 +4616,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 = useCallStore((s) => s.endCall);
       const [hasJoined, setHasJoined] = useState(false);
       const hasJoinedRef = useRef(false);
@@ -4590,7 +4642,23 @@ var init_MeetingView = __esm({
           /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx(
+            AudioCallView_default,
+            {
+              sdk,
+              remoteParticipantId: remoteIds[0],
+              peerName,
+              peerAvatar
+            }
+          ),
+          /* @__PURE__ */ jsx(CallControls_default, { sdk, mode })
+        ] });
+      }
       return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col", children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -4604,7 +4672,16 @@ var init_MeetingView = __esm({
             },
             children: [
               localParticipant?.id && /* @__PURE__ */ jsx(ParticipantView_default, { sdk, participantId: localParticipant.id, isLocal: true }),
-              remoteIds.map((id) => /* @__PURE__ */ jsx(ParticipantView_default, { sdk, participantId: id }, id))
+              remoteIds.map((id) => /* @__PURE__ */ jsx(
+                ParticipantView_default,
+                {
+                  sdk,
+                  participantId: id,
+                  fallbackName: peerName,
+                  fallbackImage: peerAvatar
+                },
+                id
+              ))
             ]
           }
         ),
@@ -4626,7 +4703,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] = useState(null);
       const userId = useStore((s) => s.loggedUserDetails?._id);
       const userName = useStore((s) => s.loggedUserDetails?.name);
@@ -4667,7 +4751,7 @@ var init_CallSession = __esm({
           token,
           reinitialiseMeetingOnConfigChange: false,
           joinWithoutUserInteraction: true,
-          children: /* @__PURE__ */ jsx(MeetingView_default, { sdk, mode })
+          children: /* @__PURE__ */ jsx(MeetingView_default, { sdk, mode, peerName, peerAvatar })
         }
       );
     };
@@ -5619,6 +5703,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] = useState(
+    Math.ceil(CALL_RING_TIMEOUT_MS / 1e3)
+  );
+  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] = useState(0);
+  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__default.lazy(() => Promise.resolve().then(() => (init_CallSession(), CallSession_exports)));
+var CallOverlay = () => {
+  const uiStatus = useCallStore((s) => s.uiStatus);
+  const mode = useCallStore((s) => s.mode);
+  const callId = useCallStore((s) => s.callId);
+  const meetingId = useCallStore((s) => s.meetingId);
+  const token = useCallStore((s) => s.token);
+  const error = useCallStore((s) => s.error);
+  const callee = useCallStore((s) => s.callee);
+  const caller = useCallStore((s) => s.caller);
+  const callStartedAt = useCallStore((s) => s.callStartedAt);
+  const cancelCall = useCallStore((s) => s.cancelCall);
+  const reset = useCallStore((s) => s.reset);
+  const notifyServerCallFailed = useCallStore((s) => s.notifyServerCallFailed);
+  const [sessionError, setSessionError] = useState(null);
+  const secondsLeft = useRingCountdown(uiStatus === "ringing-out", callId);
+  const duration = useCallDuration(callStartedAt);
+  useEffect(() => {
+    setSessionError(null);
+  }, [callId]);
+  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 createPortal(
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-4 p-6 text-center", children: [
+          /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-white/80", children: displayError }),
+          /* @__PURE__ */ jsxs(Button, { variant: "secondary", onClick: reset, children: [
+            /* @__PURE__ */ jsx(X, { size: 16, className: "mr-1" }),
+            " Close"
+          ] })
+        ] }) : uiStatus === "in-call" && meetingId && token && mode ? /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-3 text-sm text-white/70", children: [
+            peerName && /* @__PURE__ */ jsx("span", { className: "font-medium text-white/90", children: peerName }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-white/30", children: "\xB7" }),
+            /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: duration })
+          ] }),
+          /* @__PURE__ */ jsx(
+            React9__default.Suspense,
+            {
+              fallback: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-3 text-white/80", children: [
+                /* @__PURE__ */ jsx(Loader2, { className: "size-8 animate-spin" }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Loading call\u2026" })
+              ] }),
+              children: /* @__PURE__ */ jsx(
+                CallSession2,
+                {
+                  meetingId,
+                  token,
+                  mode,
+                  peerName,
+                  peerAvatar,
+                  onError: setSessionError
+                }
+              )
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-6 p-6 text-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
+            uiStatus === "ringing-out" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "absolute inline-flex size-32 animate-ping rounded-full bg-white/10" }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "absolute inline-flex size-32 animate-ping rounded-full bg-white/5",
+                  style: { animationDelay: "0.6s" }
+                }
+              )
+            ] }),
+            peerName ? /* @__PURE__ */ jsxs(Avatar, { className: "relative size-28 ring-4 ring-white/10", children: [
+              /* @__PURE__ */ jsx(AvatarImage, { src: peerAvatar, alt: peerName }),
+              /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-neutral-700 text-3xl font-medium text-white", children: peerName.charAt(0).toUpperCase() })
+            ] }) : /* @__PURE__ */ jsx("div", { className: "relative flex size-28 items-center justify-center rounded-full bg-white/10", children: isVideo ? /* @__PURE__ */ jsx(Video, { size: 36 }) : /* @__PURE__ */ jsx(Phone, { size: 36 }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            peerName && /* @__PURE__ */ jsx("p", { className: "text-xl font-semibold tracking-tight", children: peerName }),
+            /* @__PURE__ */ 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__ */ jsxs("div", { className: "mt-1 flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ 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__ */ jsx(PhoneOff, { size: 24 })
+              }
+            ),
+            /* @__PURE__ */ 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({
@@ -6157,161 +6402,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] = useState(
-    Math.ceil(CALL_RING_TIMEOUT_MS / 1e3)
-  );
-  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] = useState(0);
-  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__default.lazy(() => Promise.resolve().then(() => (init_CallSession(), CallSession_exports)));
-var CallOverlay = () => {
-  const uiStatus = useCallStore((s) => s.uiStatus);
-  const mode = useCallStore((s) => s.mode);
-  const callId = useCallStore((s) => s.callId);
-  const meetingId = useCallStore((s) => s.meetingId);
-  const token = useCallStore((s) => s.token);
-  const error = useCallStore((s) => s.error);
-  const callee = useCallStore((s) => s.callee);
-  const caller = useCallStore((s) => s.caller);
-  const callStartedAt = useCallStore((s) => s.callStartedAt);
-  const cancelCall = useCallStore((s) => s.cancelCall);
-  const reset = useCallStore((s) => s.reset);
-  const notifyServerCallFailed = useCallStore((s) => s.notifyServerCallFailed);
-  const [sessionError, setSessionError] = useState(null);
-  const secondsLeft = useRingCountdown(uiStatus === "ringing-out", callId);
-  const duration = useCallDuration(callStartedAt);
-  useEffect(() => {
-    setSessionError(null);
-  }, [callId]);
-  useEffect(() => {
-    if (sessionError) notifyServerCallFailed();
-  }, [sessionError, notifyServerCallFailed]);
-  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__ */ jsx(Dialog, { open: isOpen, onOpenChange: () => void 0, children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-4 p-6 text-center", children: [
-        /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-white/80", children: displayError }),
-        /* @__PURE__ */ jsxs(Button, { variant: "secondary", onClick: reset, children: [
-          /* @__PURE__ */ jsx(X, { size: 16, className: "mr-1" }),
-          " Close"
-        ] })
-      ] }) : uiStatus === "in-call" && meetingId && token && mode ? /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-3 text-sm text-white/70", children: [
-          peerName && /* @__PURE__ */ jsx("span", { className: "font-medium text-white/90", children: peerName }),
-          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-white/30", children: "\xB7" }),
-          /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: duration })
-        ] }),
-        /* @__PURE__ */ jsx(
-          React9__default.Suspense,
-          {
-            fallback: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-3 text-white/80", children: [
-              /* @__PURE__ */ jsx(Loader2, { className: "size-8 animate-spin" }),
-              /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Loading call\u2026" })
-            ] }),
-            children: /* @__PURE__ */ jsx(
-              CallSession2,
-              {
-                meetingId,
-                token,
-                mode,
-                onError: setSessionError
-              }
-            )
-          }
-        )
-      ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-6 p-6 text-center", children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
-          uiStatus === "ringing-out" && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { className: "absolute inline-flex size-32 animate-ping rounded-full bg-white/10" }),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "absolute inline-flex size-32 animate-ping rounded-full bg-white/5",
-                style: { animationDelay: "0.6s" }
-              }
-            )
-          ] }),
-          peerName ? /* @__PURE__ */ jsxs(Avatar, { className: "relative size-28 ring-4 ring-white/10", children: [
-            /* @__PURE__ */ jsx(AvatarImage, { src: peerAvatar, alt: peerName }),
-            /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-neutral-700 text-3xl font-medium text-white", children: peerName.charAt(0).toUpperCase() })
-          ] }) : /* @__PURE__ */ jsx("div", { className: "relative flex size-28 items-center justify-center rounded-full bg-white/10", children: isVideo ? /* @__PURE__ */ jsx(Video, { size: 36 }) : /* @__PURE__ */ jsx(Phone, { size: 36 }) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          peerName && /* @__PURE__ */ jsx("p", { className: "text-xl font-semibold tracking-tight", children: peerName }),
-          /* @__PURE__ */ 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__ */ jsxs("div", { className: "mt-1 flex flex-col items-center gap-2", children: [
-          /* @__PURE__ */ 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__ */ jsx(PhoneOff, { size: 24 })
-            }
-          ),
-          /* @__PURE__ */ 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();
@@ -6878,18 +6969,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) {
@@ -6947,28 +7026,6 @@ var useChatController = () => {
     );
   }, []);
   const { localMessages, setLocalMessages } = useChatSync();
-  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 = useStore((s) => s.emitDmSend);
   const emitGroupMessageSend2 = useStore((s) => s.emitGroupMessageSend);
   const emitMarkAsRead = useStore((s) => s.emitMarkAsRead);