@realtimexsco/live-chat 1.4.19 → 1.5.0

package/dist/index.mjs

@@ -9,7 +9,7 @@ import { Dialog as Dialog$1, Slot, Avatar as Avatar$1, Tooltip as Tooltip$1, Swi
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 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, Mic, MicOff, VideoOff, XIcon, ArrowRight, MoreHorizontal, PinOff, StarOff, ImageIcon, Film, Play, Pause, FileText, FileSpreadsheet, FileIcon, MessageSquare, Eye, Captions } from 'lucide-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 EmojiPicker, { Theme } from 'emoji-picker-react';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
@@ -657,12 +657,48 @@ var init_call_api = __esm({
     };
   }
 });
-var idleState, useCallStore;
+
+// src/call/call.types.ts
+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 = {
+      AUDIO: "audio",
+      VIDEO: "video"
+    };
+    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, useCallStore;
 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,
@@ -672,13 +708,15 @@ var init_call_store = __esm({
       token: null,
       caller: null,
       participants: [],
-      error: null
+      error: null,
+      callee: null,
+      callStartedAt: null
     };
     useCallStore = 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 apiCreateCallRoom(conversationId, mode);
           set({
@@ -690,8 +728,10 @@ var init_call_store = __esm({
             token: room.token,
             participants: room.participants
           });
+          scheduleRingTimer(room.callId, get, set);
           socket_service_default.emitCallInvite({ callId: room.callId });
         } catch (err) {
+          clearRingTimer();
           set({
             ...idleState,
             error: err instanceof Error ? err.message : "Could not start the call"
@@ -703,16 +743,18 @@ var init_call_store = __esm({
         if (callId && uiStatus === "ringing-out") {
           socket_service_default.emitCallCancel({ callId });
         }
+        clearRingTimer();
         set({ ...idleState });
       },
       acceptCall: async () => {
         const { callId, meetingId } = get();
         if (!callId || !meetingId) return;
+        clearRingTimer();
         set({ uiStatus: "joining" });
         try {
           const join = await apiFetchJoinToken(meetingId);
           socket_service_default.emitCallAccept({ callId });
-          set({ uiStatus: "in-call", token: join.token });
+          set({ uiStatus: "in-call", token: join.token, callStartedAt: Date.now() });
         } catch (err) {
           set({
             ...idleState,
@@ -725,6 +767,7 @@ var init_call_store = __esm({
         if (callId) {
           socket_service_default.emitCallReject({ callId, reason });
         }
+        clearRingTimer();
         set({ ...idleState });
       },
       endCall: () => {
@@ -732,9 +775,13 @@ var init_call_store = __esm({
         if (callId) {
           socket_service_default.emitCallEnd({ callId });
         }
+        clearRingTimer();
+        set({ ...idleState });
+      },
+      reset: () => {
+        clearRingTimer();
         set({ ...idleState });
       },
-      reset: () => set({ ...idleState }),
       _receiveIncoming: (payload) => {
         if (get().uiStatus !== "idle") return;
         set({
@@ -746,6 +793,7 @@ var init_call_store = __esm({
           caller: payload.caller,
           participants: payload.participants
         });
+        scheduleRingTimer(payload.callId, get, set);
       },
       _receiveAccepted: (payload) => {
         const state = get();
@@ -753,11 +801,17 @@ var init_call_store = __esm({
         if (state.uiStatus === "incoming") {
           const myUserId = useStore.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
@@ -771,17 +825,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 });
       }
     }));
@@ -813,8 +875,8 @@ var init_call_listeners = __esm({
       socket.on(SOCKET_EVENTS.CALL_BUSY, (payload) => {
         useCallStore.getState()._receiveBusy(payload);
       });
-      socket.on(SOCKET_EVENTS.CALL_MISSED, () => {
-        useCallStore.getState()._receiveMissed();
+      socket.on(SOCKET_EVENTS.CALL_MISSED, (payload) => {
+        useCallStore.getState()._receiveMissed(payload);
       });
     };
   }
@@ -4238,22 +4300,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",
@@ -4306,6 +4352,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"() {
@@ -4319,7 +4384,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 = useRef(null);
       const audioRef = useRef(null);
       useEffect(() => {
@@ -4348,7 +4413,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: [
@@ -4365,17 +4431,14 @@ var init_ParticipantView = __esm({
               }
             ),
             !isLocal && /* @__PURE__ */ jsx("audio", { ref: audioRef, autoPlay: true, playsInline: true }),
-            !webcamOn && /* @__PURE__ */ jsxs(Avatar, { size: "lg", className: "size-16", children: [
+            !webcamOn && /* @__PURE__ */ jsxs(Avatar, { size: "lg", className: "size-20", children: [
               /* @__PURE__ */ jsx(AvatarImage, { src: fallbackImage, alt: name }),
-              /* @__PURE__ */ jsx(AvatarFallback, { className: "text-lg", children: name.charAt(0).toUpperCase() })
+              /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-neutral-700 text-xl font-medium text-white", children: name.charAt(0).toUpperCase() })
             ] }),
-            /* @__PURE__ */ 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__ */ jsx("span", { className: "absolute top-2 right-2 rounded-full bg-black/50 p-1 text-white", children: /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-              /* @__PURE__ */ jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" }),
-              /* @__PURE__ */ jsx("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6" }),
-              /* @__PURE__ */ jsx("path", { d: "M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23" }),
-              /* @__PURE__ */ jsx("line", { x1: "12", y1: "19", x2: "12", y2: "23" })
-            ] }) })
+            /* @__PURE__ */ 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__ */ jsx("span", { className: "truncate text-xs font-medium text-white drop-shadow", children: isLocal ? `${name} (You)` : name }),
+              !micOn && /* @__PURE__ */ jsx(MicOff, { size: 14, className: "shrink-0 text-white/80", strokeWidth: 2.25 })
+            ] })
           ]
         }
       );
@@ -4389,7 +4452,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 = useCallStore((s) => s.endCall);
@@ -4397,38 +4460,46 @@ var init_CallControls = __esm({
         leave();
         endCall();
       };
-      return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4 py-6", children: [
-        /* @__PURE__ */ 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__ */ jsx(Mic, { size: 20 }) : /* @__PURE__ */ jsx(MicOff, { size: 20 })
-          }
-        ),
-        mode === "video" && /* @__PURE__ */ 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__ */ jsx(Video, { size: 20 }) : /* @__PURE__ */ jsx(VideoOff, { size: 20 })
-          }
-        ),
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-5 py-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-full bg-white/10 p-2 backdrop-blur-sm", children: [
+          /* @__PURE__ */ 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__ */ jsx(Mic, { size: 20 }) : /* @__PURE__ */ jsx(MicOff, { size: 20 })
+            }
+          ),
+          mode === "video" && /* @__PURE__ */ 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__ */ jsx(Video, { size: 20 }) : /* @__PURE__ */ jsx(VideoOff, { size: 20 })
+            }
+          )
+        ] }),
         /* @__PURE__ */ 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__ */ jsx(Phone, { size: 20, className: "rotate-[135deg]" })
+            children: /* @__PURE__ */ jsx(PhoneOff, { size: 22 })
           }
         )
       ] });
@@ -6033,22 +6104,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] = 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 [sessionError, setSessionError] = 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__ */ jsx(Dialog, { open: isOpen, onOpenChange: () => void 0, children: /* @__PURE__ */ jsx(
     ChatDialogContent,
     {
@@ -6057,7 +6175,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__ */ 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 }),
@@ -6065,41 +6183,69 @@ var CallOverlay = () => {
           /* @__PURE__ */ jsx(X, { size: 16, className: "mr-1" }),
           " Close"
         ] })
-      ] }) : uiStatus === "in-call" && meetingId && token && mode ? /* @__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__ */ jsx("div", { className: "flex size-20 items-center justify-center rounded-full bg-white/10", children: mode === "video" ? /* @__PURE__ */ jsx(Video, { size: 32 }) : /* @__PURE__ */ jsx(Phone, { size: 32 }) }),
-        /* @__PURE__ */ 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__ */ 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 })
         ] }),
-        uiStatus === "ringing-out" && /* @__PURE__ */ jsx(
-          Button,
+        /* @__PURE__ */ jsx(
+          React9__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__ */ jsx(PhoneOff, { size: 20 })
+            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" })
+        ] })
       ] })
     }
   ) });
@@ -6111,12 +6257,14 @@ init_utils2();
 init_call_store();
 var IncomingCallDialog = ({ ringtoneUrl }) => {
   const uiStatus = useCallStore((s) => s.uiStatus);
+  const callId = useCallStore((s) => s.callId);
   const caller = useCallStore((s) => s.caller);
   const mode = useCallStore((s) => s.mode);
   const acceptCall = useCallStore((s) => s.acceptCall);
   const rejectCall = useCallStore((s) => s.rejectCall);
   const audioRef = useRef(null);
   const isOpen = uiStatus === "incoming";
+  const secondsLeft = useRingCountdown(isOpen, callId);
   useEffect(() => {
     const el = audioRef.current;
     if (!el || !ringtoneUrl) return;
@@ -6129,6 +6277,7 @@ var IncomingCallDialog = ({ ringtoneUrl }) => {
   }, [isOpen, ringtoneUrl]);
   if (!isOpen) return null;
   const name = caller?.name || "Unknown caller";
+  const isVideo = mode === "video";
   return /* @__PURE__ */ jsxs(Dialog, { open: isOpen, onOpenChange: () => void 0, children: [
     ringtoneUrl && /* @__PURE__ */ jsx("audio", { ref: audioRef, src: ringtoneUrl, loop: true }),
     /* @__PURE__ */ jsx(
@@ -6137,51 +6286,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__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
-          /* @__PURE__ */ jsxs(Avatar, { size: "lg", className: "size-16", children: [
-            /* @__PURE__ */ jsx(AvatarImage, { src: caller?.profileImage, alt: name }),
-            /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col items-center gap-5 px-6 pt-9 pb-7", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
+            /* @__PURE__ */ jsx("span", { className: "absolute inline-flex size-28 animate-ping rounded-full bg-emerald-400/20" }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "absolute inline-flex size-28 animate-ping rounded-full bg-emerald-400/15",
+                style: { animationDelay: "0.6s" }
+              }
+            ),
+            /* @__PURE__ */ jsxs(Avatar, { className: "relative size-24 ring-4 ring-white/10", children: [
+              /* @__PURE__ */ jsx(AvatarImage, { src: caller?.profileImage, alt: name }),
+              /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-neutral-700 text-2xl font-medium text-white", children: name.charAt(0).toUpperCase() })
+            ] }),
+            /* @__PURE__ */ 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__ */ jsx(Video, { size: 14 }) : /* @__PURE__ */ jsx(Phone, { size: 14 })
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-base font-semibold text-(--chat-text)", children: name }),
-            /* @__PURE__ */ jsxs("p", { className: "flex items-center justify-center gap-1 text-sm text-(--chat-muted)", children: [
-              mode === "video" ? /* @__PURE__ */ jsx(Video, { size: 14 }) : /* @__PURE__ */ jsx(Phone, { size: 14 }),
+          /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xl font-semibold tracking-tight", children: name }),
+            /* @__PURE__ */ 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__ */ jsxs("div", { className: "mt-2 flex items-center justify-center gap-6", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center justify-center gap-10", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
               /* @__PURE__ */ 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__ */ jsx(PhoneOff, { size: 20 })
+                  children: /* @__PURE__ */ jsx(PhoneOff, { size: 24 })
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: "text-xs text-(--chat-muted)", children: "Decline" })
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-white/60", children: "Decline" })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
               /* @__PURE__ */ 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__ */ jsx(Phone, { size: 20 })
+                  children: /* @__PURE__ */ jsx(Phone, { size: 24 })
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: "text-xs text-(--chat-muted)", children: "Accept" })
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-white/60", children: "Accept" })
             ] })
           ] })
         ] })
@@ -10002,19 +10170,20 @@ var HeaderRightSide = ({
   const startCall = 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";
@@ -20716,22 +20885,7 @@ 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;
 
 export { ADMIN_PERMISSION_DENIED_MESSAGE, AdminPermissionTooltip, CALLS_NOT_ALLOWED_BY_PLATFORM_MESSAGE, CALLS_NOT_CONFIGURED_MESSAGE, CALL_MODES, CALL_STATUS, CHAT_API_KEYS, CHAT_GET_API_KEYS, Calendar, CalendarDayButton, CallOverlay_default as CallOverlay, Channel, ChannelHeaderView_default as ChannelHeader, ChannelListView_default as ChannelList, ChannelListItem_default as ChannelListItem, Chat, ChatAlertsProvider, ChatAvatar_default as ChatAvatar, ChatCustomizationProvider, ChatDateJumpMenu, ChatEffectiveSettingsProvider, ChatLayout_default as ChatLayout, ChatLocaleProvider, ChatMain_default as ChatMain, ChatThemeProvider, ChatViewport, DEFAULT_EFFECTIVE_SETTINGS, DefaultChannelListItem, DefaultChatAvatar, DefaultChatLayout_default as DefaultChatLayout, ForegroundPushBridge, ForwardModalView as ForwardModal, HeaderCallActions_default as HeaderCallActions, IncomingCallDialog_default as IncomingCallDialog, LoggedUserDetails_default as LoggedUserDetails, LoggedUserSettingsContent_default as LoggedUserSettingsContent, LoggedUserSettingsDialog_default as LoggedUserSettingsDialog, LoggedUserSettingsTrigger_default as LoggedUserSettingsTrigger, ChannelMessageBoxView_default as MessageInput, MessageItemView as MessageItem, ActiveChannelMessagesView_default as MessageList, NOTIFICATION_CLICK_SW_TYPE, OPEN_CONVERSATION_EVENT, PUSH_BROADCAST_CHANNEL, PUSH_CHANGED_EVENT, PUSH_DATA_CACHE_NAME, PushNotificationToggle, apiCreateCallRoom, apiFetchCallDetail, apiFetchCallHistory, apiFetchJoinToken, apiGetPushConfig, apiGetPushPreference, apiRegisterPushToken, apiRemovePushToken, apiUpdatePushPreference, buildChannelFromPushRequest, buildLoggedUserProfile, buildVersionedApiUrl, capitalizeFirst, clampJumpDate, consumePendingOpenConversation, consumePendingOpenFromPushCache, consumePendingOpenRequest, index_default as default, defaultChatClassNames, defaultChatComponents, defaultChatFeatures, defaultChatLayoutConfig, disablePushOnThisDevice, downloadFile, enablePushOnThisDevice, fetchEffectiveSettings, getChatApiVersions, getChatBaseUrl, getChatQueryParamApis, getChatQueryParams, getChatQueryParamsByApi, getChatSocketUrl, getFirstAndLastNameOneCharacter, getResponsiveWidth, getSocketConfig, getStoredPushToken, installNotificationClickBridge, isEmpty, isPushSupported, mergeChatCustomization, mergeChatLayoutConfig, onForegroundPush, packageDefaultComponents, peekPendingOpenConversation, peekPendingOpenRequest, requestOpenConversation, resolveApiRoot, resolveApiUrl, resolveChatApiKey, resolveConversationIdFromPushData, resolveJumpDateBounds, resolveJumpPreset, resolveJumpStep, resolveSocketUrl, setChatAccessToken, setChatApiVersions, setChatBaseURL, setChatClientId, setChatPushApiVersion, setChatQueryParamApis, setChatQueryParams, setChatQueryParamsByApi, setChatSocketUrl, showNotification, smoothScrollToMessage, socket_service_default as socketService, startOfLocalDay, toDateInputValue, uniqueList, useAdminFeatureGate, useCallStore, useChatAlerts, useChatContext, useChatController, useChatCustomization, useChatCustomizationOptional, useChatFeatures, useChatFeaturesOptional, useChatLocale, useStore as useChatStore, useChatTheme, useEffectiveSettings, useEffectiveSettingsOptional, usePushNotifications };