@realtimexsco/live-chat 1.4.19 → 1.5.0

package/dist/index.cjs

@@ -685,12 +685,48 @@ var init_call_api = __esm({
     };
   }
 });
-var idleState; exports.useCallStore = void 0;
+
+// src/call/call.types.ts
+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 = {
+      AUDIO: "audio",
+      VIDEO: "video"
+    };
+    exports.CALL_STATUS = {
+      RINGING: "ringing",
+      ONGOING: "ongoing",
+      ENDED: "ended",
+      MISSED: "missed",
+      REJECTED: "rejected",
+      CANCELLED: "cancelled"
+    };
+    CALL_RING_TIMEOUT_MS = 4e4;
+    CLIENT_RING_FALLBACK_MS = CALL_RING_TIMEOUT_MS + 5e3;
+  }
+});
+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();
+    ringTimer = null;
+    clearRingTimer = () => {
+      if (ringTimer) clearTimeout(ringTimer);
+      ringTimer = null;
+    };
+    scheduleRingTimer = (callId, get, set) => {
+      clearRingTimer();
+      ringTimer = setTimeout(() => {
+        const state = get();
+        if (state.callId === callId && (state.uiStatus === "ringing-out" || state.uiStatus === "incoming")) {
+          set({ ...idleState });
+        }
+      }, CLIENT_RING_FALLBACK_MS);
+    };
     idleState = {
       uiStatus: "idle",
       callId: null,
@@ -700,13 +736,15 @@ var init_call_store = __esm({
       token: null,
       caller: null,
       participants: [],
-      error: null
+      error: null,
+      callee: null,
+      callStartedAt: null
     };
     exports.useCallStore = zustand.create((set, get) => ({
       ...idleState,
-      startCall: async (conversationId, mode) => {
+      startCall: async (conversationId, mode, callee) => {
         if (get().uiStatus !== "idle") return;
-        set({ ...idleState, uiStatus: "creating", conversationId, mode });
+        set({ ...idleState, uiStatus: "creating", conversationId, mode, callee: callee ?? null });
         try {
           const room = await exports.apiCreateCallRoom(conversationId, mode);
           set({
@@ -718,8 +756,10 @@ var init_call_store = __esm({
             token: room.token,
             participants: room.participants
           });
+          scheduleRingTimer(room.callId, get, set);
           exports.socketService.emitCallInvite({ callId: room.callId });
         } catch (err) {
+          clearRingTimer();
           set({
             ...idleState,
             error: err instanceof Error ? err.message : "Could not start the call"
@@ -731,16 +771,18 @@ var init_call_store = __esm({
         if (callId && uiStatus === "ringing-out") {
           exports.socketService.emitCallCancel({ callId });
         }
+        clearRingTimer();
         set({ ...idleState });
       },
       acceptCall: async () => {
         const { callId, meetingId } = get();
         if (!callId || !meetingId) return;
+        clearRingTimer();
         set({ uiStatus: "joining" });
         try {
           const join = await exports.apiFetchJoinToken(meetingId);
           exports.socketService.emitCallAccept({ callId });
-          set({ uiStatus: "in-call", token: join.token });
+          set({ uiStatus: "in-call", token: join.token, callStartedAt: Date.now() });
         } catch (err) {
           set({
             ...idleState,
@@ -753,6 +795,7 @@ var init_call_store = __esm({
         if (callId) {
           exports.socketService.emitCallReject({ callId, reason });
         }
+        clearRingTimer();
         set({ ...idleState });
       },
       endCall: () => {
@@ -760,9 +803,13 @@ var init_call_store = __esm({
         if (callId) {
           exports.socketService.emitCallEnd({ callId });
         }
+        clearRingTimer();
+        set({ ...idleState });
+      },
+      reset: () => {
+        clearRingTimer();
         set({ ...idleState });
       },
-      reset: () => set({ ...idleState }),
       _receiveIncoming: (payload) => {
         if (get().uiStatus !== "idle") return;
         set({
@@ -774,6 +821,7 @@ var init_call_store = __esm({
           caller: payload.caller,
           participants: payload.participants
         });
+        scheduleRingTimer(payload.callId, get, set);
       },
       _receiveAccepted: (payload) => {
         const state = get();
@@ -781,11 +829,17 @@ var init_call_store = __esm({
         if (state.uiStatus === "incoming") {
           const myUserId = exports.useChatStore.getState().loggedUserDetails?._id;
           if (payload.userId === myUserId) {
+            clearRingTimer();
             set({ ...idleState });
           }
           return;
         }
-        set({ uiStatus: "in-call", participants: payload.participants });
+        clearRingTimer();
+        set({
+          uiStatus: "in-call",
+          participants: payload.participants,
+          callStartedAt: Date.now()
+        });
       },
       // A single decline doesn't end a multi-callee call — the server only
       // moves the call to `rejected` (followed by `call_ended`) once every
@@ -799,17 +853,25 @@ var init_call_store = __esm({
       },
       _receiveCancelled: (payload) => {
         if (get().callId !== payload.callId) return;
+        clearRingTimer();
         set({ ...idleState });
       },
       _receiveEnded: (payload) => {
         if (get().callId !== payload.callId) return;
+        clearRingTimer();
         set({ ...idleState });
       },
       _receiveBusy: (payload) => {
         if (get().callId !== payload.callId) return;
+        clearRingTimer();
         set({ ...idleState, error: "That user is already on another call." });
       },
-      _receiveMissed: () => {
+      // 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.
+      _receiveMissed: (payload) => {
+        if (get().callId !== payload.callId) return;
+        clearRingTimer();
         set({ ...idleState });
       }
     }));
@@ -841,8 +903,8 @@ var init_call_listeners = __esm({
       socket.on(SOCKET_EVENTS.CALL_BUSY, (payload) => {
         exports.useCallStore.getState()._receiveBusy(payload);
       });
-      socket.on(SOCKET_EVENTS.CALL_MISSED, () => {
-        exports.useCallStore.getState()._receiveMissed();
+      socket.on(SOCKET_EVENTS.CALL_MISSED, (payload) => {
+        exports.useCallStore.getState()._receiveMissed(payload);
       });
     };
   }
@@ -4266,22 +4328,6 @@ var init_button = __esm({
     );
   }
 });
-
-// src/call/videosdk.loader.ts
-var loadVideoSDK;
-var init_videosdk_loader = __esm({
-  "src/call/videosdk.loader.ts"() {
-    loadVideoSDK = async () => {
-      try {
-        return await import('@videosdk.live/react-sdk');
-      } catch {
-        throw new Error(
-          'Audio/video calling needs the "@videosdk.live/react-sdk" package \u2014 run: npm install @videosdk.live/react-sdk'
-        );
-      }
-    };
-  }
-});
 function Avatar({
   className,
   size = "default",
@@ -4334,6 +4380,25 @@ var init_avatar = __esm({
     init_utils2();
   }
 });
+
+// src/call/videosdk.loader.ts
+var loadVideoSDK;
+var init_videosdk_loader = __esm({
+  "src/call/videosdk.loader.ts"() {
+    loadVideoSDK = async () => {
+      try {
+        return await import('@videosdk.live/react-sdk');
+      } catch (err) {
+        console.error("[realtimex-call] failed to load @videosdk.live/react-sdk:", err);
+        const message = err instanceof Error ? err.message : String(err);
+        const looksMissing = /Failed to resolve module|Cannot find module|find package/i.test(message);
+        throw new Error(
+          looksMissing ? 'Audio/video calling needs the "@videosdk.live/react-sdk" package \u2014 run: npm install @videosdk.live/react-sdk' : `Audio/video calling failed to load: ${message}`
+        );
+      }
+    };
+  }
+});
 var ParticipantView, ParticipantView_default;
 var init_ParticipantView = __esm({
   "src/call/ParticipantView.tsx"() {
@@ -4347,7 +4412,7 @@ var init_ParticipantView = __esm({
       fallbackImage,
       className
     }) => {
-      const { webcamStream, micStream, webcamOn, micOn, displayName } = sdk.useParticipant(participantId);
+      const { webcamStream, micStream, webcamOn, micOn, displayName, isActiveSpeaker } = sdk.useParticipant(participantId);
       const videoRef = React9.useRef(null);
       const audioRef = React9.useRef(null);
       React9.useEffect(() => {
@@ -4376,7 +4441,8 @@ var init_ParticipantView = __esm({
         "div",
         {
           className: cn(
-            "relative flex aspect-video min-h-[120px] items-center justify-center overflow-hidden rounded-xl bg-neutral-900",
+            "relative flex aspect-video min-h-[140px] items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-neutral-800 to-neutral-900 ring-1 ring-white/5 transition-shadow",
+            isActiveSpeaker && micOn && "ring-2 ring-emerald-400/80",
             className
           ),
           children: [
@@ -4393,17 +4459,14 @@ var init_ParticipantView = __esm({
               }
             ),
             !isLocal && /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, autoPlay: true, playsInline: true }),
-            !webcamOn && /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { size: "lg", className: "size-16", children: [
+            !webcamOn && /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { size: "lg", className: "size-20", children: [
               /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: fallbackImage, alt: name }),
-              /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "text-lg", children: name.charAt(0).toUpperCase() })
+              /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "bg-neutral-700 text-xl font-medium text-white", children: name.charAt(0).toUpperCase() })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-2 left-2 rounded-md bg-black/50 px-2 py-0.5 text-xs text-white", children: isLocal ? `${name} (You)` : name }),
-            !micOn && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-2 right-2 rounded-full bg-black/50 p-1 text-white", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" }),
-              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6" }),
-              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23" }),
-              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "19", x2: "12", y2: "23" })
-            ] }) })
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 bg-gradient-to-t from-black/70 to-transparent px-3 py-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs font-medium text-white drop-shadow", children: isLocal ? `${name} (You)` : name }),
+              !micOn && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MicOff, { size: 14, className: "shrink-0 text-white/80", strokeWidth: 2.25 })
+            ] })
           ]
         }
       );
@@ -4417,7 +4480,7 @@ var init_CallControls = __esm({
     init_button();
     init_utils2();
     init_call_store();
-    circleBtn = "size-12 rounded-full text-white transition-colors disabled:opacity-40";
+    circleBtn = "size-13 rounded-full text-white transition-all duration-150 disabled:opacity-40 hover:scale-105 active:scale-95";
     CallControls = ({ sdk, mode }) => {
       const { toggleMic, toggleWebcam, localMicOn, localWebcamOn, leave } = sdk.useMeeting();
       const endCall = exports.useCallStore((s) => s.endCall);
@@ -4425,38 +4488,46 @@ var init_CallControls = __esm({
         leave();
         endCall();
       };
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-4 py-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon",
-            className: cn(circleBtn, localMicOn ? "bg-white/15 hover:bg-white/25" : "bg-white/90 text-neutral-900 hover:bg-white"),
-            "aria-label": localMicOn ? "Mute microphone" : "Unmute microphone",
-            onClick: () => toggleMic(),
-            children: localMicOn ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MicOff, { size: 20 })
-          }
-        ),
-        mode === "video" && /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon",
-            className: cn(circleBtn, localWebcamOn ? "bg-white/15 hover:bg-white/25" : "bg-white/90 text-neutral-900 hover:bg-white"),
-            "aria-label": localWebcamOn ? "Turn camera off" : "Turn camera on",
-            onClick: () => toggleWebcam(),
-            children: localWebcamOn ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VideoOff, { size: 20 })
-          }
-        ),
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-5 py-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 rounded-full bg-white/10 p-2 backdrop-blur-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: cn(
+                circleBtn,
+                localMicOn ? "bg-white/10 hover:bg-white/20" : "bg-white text-neutral-900 hover:bg-white/90"
+              ),
+              "aria-label": localMicOn ? "Mute microphone" : "Unmute microphone",
+              onClick: () => toggleMic(),
+              children: localMicOn ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MicOff, { size: 20 })
+            }
+          ),
+          mode === "video" && /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: cn(
+                circleBtn,
+                localWebcamOn ? "bg-white/10 hover:bg-white/20" : "bg-white text-neutral-900 hover:bg-white/90"
+              ),
+              "aria-label": localWebcamOn ? "Turn camera off" : "Turn camera on",
+              onClick: () => toggleWebcam(),
+              children: localWebcamOn ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VideoOff, { size: 20 })
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
             variant: "ghost",
             size: "icon",
-            className: cn(circleBtn, "bg-red-600 hover:bg-red-500"),
+            className: cn(circleBtn, "bg-red-600 shadow-lg shadow-red-600/30 hover:bg-red-500"),
             "aria-label": "End call",
             onClick: handleLeave,
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Phone, { size: 20, className: "rotate-[135deg]" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PhoneOff, { size: 22 })
           }
         )
       ] });
@@ -6061,22 +6132,69 @@ 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,
     {
@@ -6085,7 +6203,7 @@ var CallOverlay = () => {
       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-neutral-950 p-0 text-white"
+        "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 }),
@@ -6093,41 +6211,69 @@ var CallOverlay = () => {
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16, className: "mr-1" }),
           " Close"
         ] })
-      ] }) : uiStatus === "in-call" && meetingId && token && mode ? /* @__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.jsx("div", { className: "flex size-20 items-center justify-center rounded-full bg-white/10", children: mode === "video" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { size: 32 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Phone, { size: 32 }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-white/80", children: [
-          uiStatus === "creating" && "Starting call\u2026",
-          uiStatus === "ringing-out" && "Calling\u2026",
-          uiStatus === "joining" && "Connecting\u2026"
+      ] }) : 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 })
         ] }),
-        uiStatus === "ringing-out" && /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          React9__namespace.default.Suspense,
           {
-            variant: "ghost",
-            size: "icon",
-            className: "size-12 rounded-full bg-red-600 text-white hover:bg-red-500",
-            "aria-label": "Cancel call",
-            onClick: cancelCall,
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PhoneOff, { size: 20 })
+            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" })
+        ] })
       ] })
     }
   ) });
@@ -6139,12 +6285,14 @@ init_utils2();
 init_call_store();
 var IncomingCallDialog = ({ ringtoneUrl }) => {
   const uiStatus = exports.useCallStore((s) => s.uiStatus);
+  const callId = exports.useCallStore((s) => s.callId);
   const caller = exports.useCallStore((s) => s.caller);
   const mode = exports.useCallStore((s) => s.mode);
   const acceptCall = exports.useCallStore((s) => s.acceptCall);
   const rejectCall = exports.useCallStore((s) => s.rejectCall);
   const audioRef = React9.useRef(null);
   const isOpen = uiStatus === "incoming";
+  const secondsLeft = useRingCountdown(isOpen, callId);
   React9.useEffect(() => {
     const el = audioRef.current;
     if (!el || !ringtoneUrl) return;
@@ -6157,6 +6305,7 @@ var IncomingCallDialog = ({ ringtoneUrl }) => {
   }, [isOpen, ringtoneUrl]);
   if (!isOpen) return null;
   const name = caller?.name || "Unknown caller";
+  const isVideo = mode === "video";
   return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { open: isOpen, onOpenChange: () => void 0, children: [
     ringtoneUrl && /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, src: ringtoneUrl, loop: true }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -6165,51 +6314,70 @@ var IncomingCallDialog = ({ ringtoneUrl }) => {
         showCloseButton: false,
         onEscapeKeyDown: (e) => e.preventDefault(),
         onPointerDownOutside: (e) => e.preventDefault(),
-        className: "max-w-xs rounded-2xl p-6 text-center",
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { size: "lg", className: "size-16", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: caller?.profileImage, alt: name }),
-            /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "text-lg", children: name.charAt(0).toUpperCase() })
+        className: "w-[min(340px,calc(100vw-2rem))] max-w-none overflow-hidden rounded-3xl border-0 bg-gradient-to-b from-neutral-800 to-neutral-950 p-0 text-white shadow-2xl",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-5 px-6 pt-9 pb-7", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inline-flex size-28 animate-ping rounded-full bg-emerald-400/20" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "absolute inline-flex size-28 animate-ping rounded-full bg-emerald-400/15",
+                style: { animationDelay: "0.6s" }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "relative size-24 ring-4 ring-white/10", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: caller?.profileImage, alt: name }),
+              /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "bg-neutral-700 text-2xl font-medium text-white", children: name.charAt(0).toUpperCase() })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "absolute -right-1 -bottom-1 flex size-8 items-center justify-center rounded-full ring-4 ring-neutral-900",
+                  isVideo ? "bg-indigo-500" : "bg-emerald-500"
+                ),
+                children: isVideo ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Phone, { size: 14 })
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-semibold text-(--chat-text)", children: name }),
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center justify-center gap-1 text-sm text-(--chat-muted)", children: [
-              mode === "video" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Phone, { size: 14 }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl font-semibold tracking-tight", children: name }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-sm text-white/50", children: [
               "Incoming ",
-              mode === "video" ? "video" : "voice",
-              " call\u2026"
+              isVideo ? "video" : "voice",
+              " call \xB7 ",
+              secondsLeft,
+              "s"
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center justify-center gap-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex items-center justify-center gap-10", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 Button,
                 {
                   variant: "ghost",
                   size: "icon",
-                  className: cn(
-                    "size-12 rounded-full bg-red-600 text-white hover:bg-red-500"
-                  ),
+                  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": "Decline call",
                   onClick: () => rejectCall(),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PhoneOff, { size: 20 })
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PhoneOff, { size: 24 })
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-(--chat-muted)", children: "Decline" })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-white/60", children: "Decline" })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 Button,
                 {
                   variant: "ghost",
                   size: "icon",
-                  className: "size-12 rounded-full bg-green-600 text-white hover:bg-green-500",
+                  className: "size-16 rounded-full bg-emerald-500 text-white shadow-lg shadow-emerald-500/30 transition-transform hover:scale-105 hover:bg-emerald-400 active:scale-95",
                   "aria-label": "Accept call",
                   onClick: () => acceptCall(),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Phone, { size: 20 })
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Phone, { size: 24 })
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-(--chat-muted)", children: "Accept" })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-white/60", children: "Accept" })
             ] })
           ] })
         ] })
@@ -10030,19 +10198,20 @@ var HeaderRightSide = ({
   const startCall = exports.useCallStore((s) => s.startCall);
   const showPhoneCall = features.showPhoneCall ?? defaultChatFeatures.showPhoneCall;
   const showVideoCall = features.showVideoCall ?? defaultChatFeatures.showVideoCall;
+  const callee = { name: activeChannel.name, avatar: activeChannel.avatar || activeChannel.image };
   const handlePhoneCall = () => {
     if (features.onPhoneCall) {
       features.onPhoneCall({ activeChannel, conversationId });
       return;
     }
-    if (conversationId) startCall(conversationId, "audio");
+    if (conversationId) startCall(conversationId, "audio", callee);
   };
   const handleVideoCall = () => {
     if (features.onVideoCall) {
       features.onVideoCall({ activeChannel, conversationId });
       return;
     }
-    if (conversationId) startCall(conversationId, "video");
+    if (conversationId) startCall(conversationId, "video", callee);
   };
   const headerItemGapClass = "gap-0.5";
   const headerIconBtnClass = "inline-flex size-6 shrink-0 items-center justify-center rounded-lg p-0 text-(--chat-muted) transition-colors hover:bg-(--chat-hover) hover:text-(--chat-text) has-[>svg]:p-0";
@@ -20744,27 +20913,10 @@ init_settings_types();
 init_api_service();
 init_call_store();
 init_call_api();
-
-// src/call/call.types.ts
-var CALL_MODES = {
-  AUDIO: "audio",
-  VIDEO: "video"
-};
-var CALL_STATUS = {
-  RINGING: "ringing",
-  ONGOING: "ongoing",
-  ENDED: "ended",
-  MISSED: "missed",
-  REJECTED: "rejected",
-  CANCELLED: "cancelled"
-};
-
-// src/index.ts
+init_call_types();
 var index_default = ChatMain_default;
 
 exports.AdminPermissionTooltip = AdminPermissionTooltip;
-exports.CALL_MODES = CALL_MODES;
-exports.CALL_STATUS = CALL_STATUS;
 exports.Calendar = Calendar;
 exports.CalendarDayButton = CalendarDayButton;
 exports.CallOverlay = CallOverlay_default;