@realtimexsco/live-chat 1.5.5 → 1.5.6

package/dist/index.mjs

@@ -9,7 +9,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as React11 from 'react';
 import React11__default, { createContext, useState, useEffect, useMemo, useContext, useCallback, useRef, useLayoutEffect, Fragment as Fragment$1, useSyncExternalStore } from 'react';
-import { Loader2, X, Users, Video, Phone, PhoneOff, Sun, Moon, Settings, Search, UserPlus, ChevronDown, ArrowLeft, 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, LayoutGrid, Rows3, MessageCircle, ExternalLink, Download, ChevronLeft, ZoomOut, ZoomIn, RotateCcw, Music, Hand, MicOff, MonitorUp, XIcon, ArrowRight, MoreHorizontal, PinOff, StarOff, ImageIcon, Film, Play, Pause, FileText, FileSpreadsheet, FileIcon, MessageSquare, Eye, Captions, Mic, VideoOff } from 'lucide-react';
+import { Loader2, X, Users, Video, Phone, PhoneOff, Sun, Moon, Settings, Search, UserPlus, ChevronDown, ArrowLeft, 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, LayoutGrid, Rows3, MessageCircle, ExternalLink, Download, ChevronLeft, ZoomOut, ZoomIn, RotateCcw, Music, Hand, MicOff, MonitorUp, XIcon, ArrowRight, MoreHorizontal, PinOff, StarOff, ImageIcon, Film, Play, Pause, FileText, FileSpreadsheet, FileIcon, MessageSquare, Eye, Captions, Mic, VideoOff, Circle } from 'lucide-react';
 import { flushSync } from 'react-dom';
 import EmojiPicker, { Theme } from 'emoji-picker-react';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
@@ -884,12 +884,13 @@ var init_store_helpers = __esm({
 });
 
 // src/notifications/open-conversation.ts
-var OPEN_CONVERSATION_EVENT, NOTIFICATION_CLICK_SW_TYPE, PUSH_BROADCAST_CHANNEL, PUSH_DATA_CACHE_NAME, PENDING_STORAGE_KEY, PENDING_OPEN_CACHE_PATH, resolveConversationIdFromPushData, normalizePushMeta, parsePendingRaw, peekPendingOpenConversation, peekPendingOpenRequest, consumePendingOpenConversation, consumePendingOpenRequest, requestOpenConversation, buildChannelFromPushRequest, mapConversationToChannel, stripConversationIdFromUrl, cacheRequestForPath, consumePendingOpenFromPushCache, readConversationIdFromLocation, consumedUrlConversationIds, lastHandledOpenId, lastHandledOpenAt, shouldHandleOpen, handleNotificationOpen, installNotificationClickBridge;
+var OPEN_CONVERSATION_EVENT, NOTIFICATION_CLICK_SW_TYPE, CHAT_HEARTBEAT_SW_TYPE, PUSH_BROADCAST_CHANNEL, PUSH_DATA_CACHE_NAME, PENDING_STORAGE_KEY, PENDING_OPEN_CACHE_PATH, resolveConversationIdFromPushData, normalizePushMeta, parsePendingRaw, peekPendingOpenConversation, peekPendingOpenRequest, consumePendingOpenConversation, consumePendingOpenRequest, requestOpenConversation, buildChannelFromPushRequest, mapConversationToChannel, stripConversationIdFromUrl, cacheRequestForPath, consumePendingOpenFromPushCache, readConversationIdFromLocation, consumedUrlConversationIds, lastHandledOpenId, lastHandledOpenAt, shouldHandleOpen, handleNotificationOpen, installNotificationClickBridge;
 var init_open_conversation = __esm({
   "src/notifications/open-conversation.ts"() {
     init_store_helpers();
     OPEN_CONVERSATION_EVENT = "realtimex:open-conversation";
     NOTIFICATION_CLICK_SW_TYPE = "realtimex:notification-click";
+    CHAT_HEARTBEAT_SW_TYPE = "realtimex:chat-heartbeat";
     PUSH_BROADCAST_CHANNEL = "realtimex-push";
     PUSH_DATA_CACHE_NAME = "realtimex-push-data-v1";
     PENDING_STORAGE_KEY = "realtimex:pending-open-conversation";
@@ -4811,9 +4812,8 @@ var init_ParticipantView = __esm({
       isHandRaised = false,
       className
     }) => {
-      const { webcamStream, micStream, webcamOn, micOn, displayName, isActiveSpeaker } = sdk.useParticipant(participantId);
+      const { webcamStream, 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;
@@ -4826,17 +4826,6 @@ var init_ParticipantView = __esm({
           setHasFrame(false);
         }
       }, [webcamOn, webcamStream]);
-      useEffect(() => {
-        if (isLocal) return;
-        const el = audioRef.current;
-        if (!el) return;
-        if (micOn && micStream?.track) {
-          el.srcObject = new MediaStream([micStream.track]);
-          el.play().catch(() => void 0);
-        } else {
-          el.srcObject = null;
-        }
-      }, [micOn, micStream, isLocal]);
       const name = displayName || fallbackName || "Participant";
       const showVideo = webcamOn && hasFrame;
       return /* @__PURE__ */ jsxs(
@@ -4869,7 +4858,6 @@ var init_ParticipantView = __esm({
                 )
               }
             ),
-            !isLocal && /* @__PURE__ */ jsx("audio", { ref: audioRef, autoPlay: true, playsInline: true }),
             isHandRaised && /* @__PURE__ */ jsx("span", { className: "absolute top-2 left-2 flex size-7 items-center justify-center rounded-full bg-amber-400 text-neutral-900 shadow-lg shadow-amber-400/30 animate-[bounce_1s_ease-in-out_2]", children: /* @__PURE__ */ jsx(Hand, { size: 14 }) }),
             !showVideo && /* @__PURE__ */ jsxs(Avatar, { size: "lg", className: "size-20", children: [
               /* @__PURE__ */ jsx(AvatarImage, { src: fallbackImage, alt: name }),
@@ -5036,7 +5024,8 @@ var init_CallControls = __esm({
       isHandRaised,
       onToggleRaiseHand,
       isChatOpen,
-      onToggleChat
+      onToggleChat,
+      isVideoActive
     }) => {
       const {
         toggleMic,
@@ -5045,9 +5034,28 @@ var init_CallControls = __esm({
         localWebcamOn,
         localScreenShareOn,
         toggleScreenShare,
+        recordingState,
+        startRecording,
+        stopRecording,
         leave
       } = sdk.useMeeting();
       const endCall = useCallStore((s) => s.endCall);
+      const isRecording = recordingState === "RECORDING_STARTED" || recordingState === "RECORDING_STARTING";
+      const isRecordingBusy = recordingState === "RECORDING_STARTING" || recordingState === "RECORDING_STOPPING";
+      const handleToggleRecording = () => {
+        if (isRecordingBusy) return;
+        if (isRecording) {
+          stopRecording();
+          return;
+        }
+        startRecording("", "", {
+          layout: { type: "GRID", priority: "SPEAKER", gridSize: 4 },
+          orientation: "landscape",
+          theme: "DEFAULT",
+          mode: "video-and-audio",
+          quality: "high"
+        });
+      };
       const handleLeave = () => {
         leave();
         endCall();
@@ -5063,7 +5071,7 @@ var init_CallControls = __esm({
               onClick: () => toggleMic()
             }
           ),
-          /* @__PURE__ */ jsx(
+          isVideoActive ? /* @__PURE__ */ jsx(
             ControlButton,
             {
               icon: localWebcamOn ? /* @__PURE__ */ jsx(Video, { size: 20 }) : /* @__PURE__ */ jsx(VideoOff, { size: 20 }),
@@ -5071,6 +5079,13 @@ var init_CallControls = __esm({
               active: !localWebcamOn,
               onClick: () => toggleWebcam()
             }
+          ) : /* @__PURE__ */ jsx(
+            ControlButton,
+            {
+              icon: /* @__PURE__ */ jsx(Video, { size: 20 }),
+              label: "Switch to video call",
+              onClick: () => toggleWebcam()
+            }
           ),
           /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mx-0.5 h-7 w-px shrink-0 bg-white/15" }),
           /* @__PURE__ */ jsx(
@@ -5083,6 +5098,16 @@ var init_CallControls = __esm({
               onClick: () => toggleScreenShare()
             }
           ),
+          /* @__PURE__ */ jsx(
+            ControlButton,
+            {
+              icon: /* @__PURE__ */ jsx(Circle, { size: 14, className: cn("fill-current", isRecording && "animate-pulse") }),
+              label: isRecording ? "Stop recording" : "Start recording",
+              active: isRecording,
+              activeClassName: "bg-red-600 hover:bg-red-500",
+              onClick: handleToggleRecording
+            }
+          ),
           /* @__PURE__ */ jsx(
             ControlButton,
             {
@@ -5262,7 +5287,7 @@ var init_useCallReactions = __esm({
     };
   }
 });
-var RemoteWebcamWatcher, MeetingView, MeetingView_default;
+var RemoteParticipantWatcher, MeetingView, MeetingView_default;
 var init_MeetingView = __esm({
   "src/call/MeetingView.tsx"() {
     init_ParticipantView();
@@ -5273,17 +5298,28 @@ var init_MeetingView = __esm({
     init_useCallReactions();
     init_call_store();
     init_utils2();
-    RemoteWebcamWatcher = ({
+    RemoteParticipantWatcher = ({
       sdk,
       participantId,
-      onChange
+      onWebcamChange
     }) => {
-      const { webcamOn } = sdk.useParticipant(participantId);
+      const { webcamOn, micStream, micOn } = sdk.useParticipant(participantId);
+      const audioRef = useRef(null);
       useEffect(() => {
-        onChange(participantId, webcamOn);
-        return () => onChange(participantId, false);
+        onWebcamChange(participantId, webcamOn);
+        return () => onWebcamChange(participantId, false);
       }, [participantId, webcamOn]);
-      return null;
+      useEffect(() => {
+        const el = audioRef.current;
+        if (!el) return;
+        if (micOn && micStream?.track) {
+          el.srcObject = new MediaStream([micStream.track]);
+          el.play().catch(() => void 0);
+        } else {
+          el.srcObject = null;
+        }
+      }, [micOn, micStream]);
+      return /* @__PURE__ */ jsx("audio", { ref: audioRef, autoPlay: true, playsInline: true });
     };
     MeetingView = ({
       sdk,
@@ -5336,7 +5372,17 @@ var init_MeetingView = __esm({
         (id) => id !== localParticipant?.id
       );
       const isGroup = remoteIds.length > 1;
-      const webcamWatchers = remoteIds.map((id) => /* @__PURE__ */ jsx(RemoteWebcamWatcher, { sdk, participantId: id, onChange: handleRemoteWebcamChange }, id));
+      const remoteParticipantWatchers = remoteIds.map((id) => /* @__PURE__ */ jsx(
+        RemoteParticipantWatcher,
+        {
+          sdk,
+          participantId: id,
+          onWebcamChange: handleRemoteWebcamChange
+        },
+        id
+      ));
+      const anyRemoteWebcamOn = Object.values(remoteWebcamOn).some(Boolean);
+      const showVideoGrid = mode === "video" || localWebcamOn || anyRemoteWebcamOn;
       const controls = /* @__PURE__ */ jsx(
         CallControls_default,
         {
@@ -5345,7 +5391,8 @@ var init_MeetingView = __esm({
           isHandRaised,
           onToggleRaiseHand: toggleRaiseHand,
           isChatOpen,
-          onToggleChat
+          onToggleChat,
+          isVideoActive: showVideoGrid
         }
       );
       const connectionStatusText = meetingState === "CONNECTING" ? "Connecting\u2026" : meetingState === "DISCONNECTED" ? "Reconnecting\u2026" : meetingState === "FAILED" ? "Connection lost" : null;
@@ -5355,7 +5402,7 @@ var init_MeetingView = __esm({
       ] });
       if (presenterId) {
         return /* @__PURE__ */ jsxs(Fragment, { children: [
-          webcamWatchers,
+          remoteParticipantWatchers,
           /* @__PURE__ */ jsxs("div", { className: "relative flex flex-1 flex-col", children: [
             statusBanner,
             /* @__PURE__ */ jsx(FloatingReactions_default, { reactions: floatingReactions }),
@@ -5396,11 +5443,9 @@ var init_MeetingView = __esm({
           ] })
         ] });
       }
-      const anyRemoteWebcamOn = Object.values(remoteWebcamOn).some(Boolean);
-      const showVideoGrid = mode === "video" || localWebcamOn || anyRemoteWebcamOn;
       if (!showVideoGrid) {
         return /* @__PURE__ */ jsxs(Fragment, { children: [
-          webcamWatchers,
+          remoteParticipantWatchers,
           /* @__PURE__ */ jsxs("div", { className: "relative flex flex-1 flex-col", children: [
             statusBanner,
             /* @__PURE__ */ jsx(FloatingReactions_default, { reactions: floatingReactions }),
@@ -5423,7 +5468,7 @@ var init_MeetingView = __esm({
         (id) => !!id && id !== focusedId
       ) : [];
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        webcamWatchers,
+        remoteParticipantWatchers,
         /* @__PURE__ */ jsxs("div", { className: "relative flex flex-1 flex-col", children: [
           statusBanner,
           /* @__PURE__ */ jsx(FloatingReactions_default, { reactions: floatingReactions }),
@@ -6533,7 +6578,186 @@ init_useStore();
 init_store_helpers();
 init_utils2();
 init_button();
+
+// src/chat/lib/chat-theme.ts
+init_utils2();
+var getChatScopeClass = (isDark) => cn("chat-theme-scope", isDark && "dark");
+var chatSheetContentClass = "flex w-full flex-col gap-0 p-0 bg-(--chat-surface) text-(--chat-text)";
+var chatSheetHeaderClass = "border-b border-(--chat-border) px-4 py-3 pr-11 text-left";
+var chatSheetBodyClass = "chat-message-scroll flex-1 overflow-y-auto bg-(--chat-surface) p-3";
+var chatSheetTitleClass = "text-[13px] font-semibold tracking-tight text-(--chat-text)";
+var chatSheetSubtitleClass = "text-[11px] text-(--chat-muted)";
+var chatDetailRowClass = "flex items-start justify-between gap-3 border-b border-(--chat-border) py-2.5 last:border-b-0";
+var chatDetailLabelClass = "text-[11px] text-(--chat-muted)";
+var chatDetailValueClass = "text-[13px] font-medium text-(--chat-text) text-right";
+var chatDialogContentClass = "overflow-hidden rounded-2xl border border-(--chat-border) bg-(--chat-surface) p-0 text-(--chat-text) shadow-[var(--chat-shadow)]";
+var chatDropdownContentClass = "rounded-xl border border-(--chat-border) bg-(--chat-surface) text-(--chat-text) shadow-lg";
+var chatOptionsMenuClass = "min-w-[220px] rounded-xl border border-(--chat-border) bg-(--chat-surface) p-1.5 text-(--chat-text) shadow-[0_10px_40px_rgba(0,0,0,0.12)]";
+var chatOptionsMenuLabelClass = "px-2.5 pb-0.5 pt-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-(--chat-muted)";
+var chatOptionsMenuSeparatorClass = "my-1.5 h-px bg-(--chat-border)";
+var chatOptionsMenuItemClass = "cursor-pointer gap-2.5 rounded-lg px-2.5 py-2 text-[13px] font-medium text-(--chat-text) focus:bg-(--chat-hover) focus:text-(--chat-text) data-[highlighted]:bg-(--chat-hover) [&_svg]:size-[15px] [&_svg]:shrink-0 [&_svg]:text-(--chat-muted)";
+var chatOptionsMenuItemDestructiveClass = "cursor-pointer gap-2.5 rounded-lg px-2.5 py-2 text-[13px] font-medium text-(--chat-danger-text) focus:bg-red-500/10 focus:text-(--chat-danger-text) data-[highlighted]:bg-red-500/10 data-[highlighted]:text-(--chat-danger-text) [&_svg]:size-[15px] [&_svg]:shrink-0 [&_svg]:!text-(--chat-danger-text)";
+var chatOptionsMenuSubTriggerClass = "cursor-pointer gap-2.5 rounded-lg px-2.5 py-2 pr-7 text-[13px] font-medium text-(--chat-text) focus:bg-(--chat-hover) focus:text-(--chat-text) data-[highlighted]:bg-(--chat-hover) data-[state=open]:bg-(--chat-hover) [&_svg]:size-[15px] [&_svg]:shrink-0 [&_svg]:text-(--chat-muted)";
+var chatPopoverContentClass = "w-auto border border-(--chat-border) bg-(--chat-surface) p-0 text-(--chat-text) shadow-2xl";
+var chatInputClass = "border border-(--chat-border) bg-(--chat-input-bg) text-(--chat-text) shadow-none placeholder:text-(--chat-muted) focus-visible:border-(--chat-theme-20) focus-visible:ring-2 focus-visible:ring-(--chat-theme-10)";
+var chatSidebarSearchShellClass = "relative flex min-w-0 flex-1 items-center rounded-lg border border-(--chat-border) bg-(--chat-search-bg) px-2.5 transition-colors focus-within:border-(--chat-theme) focus-within:shadow-[0_0_0_2px_var(--chat-theme-10)]";
+var chatSidebarSearchInputClass = "h-8 w-full min-w-0 border-0 bg-transparent px-1.5 text-xs text-(--chat-text) shadow-none outline-none placeholder:text-(--chat-muted)/60 focus-visible:border-0 focus-visible:shadow-none focus-visible:ring-0";
+var chatSelectClass = "h-10 w-full cursor-pointer appearance-none rounded-xl border border-(--chat-border) bg-(--chat-input-bg) pl-3 pr-9 text-sm text-(--chat-text) shadow-none focus-visible:border-(--chat-theme-20) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--chat-theme-10)";
+var chatListItemClass = "transition-colors hover:bg-(--chat-hover)";
+var chatLoadMoreButtonClass = "h-7 gap-1 rounded-full border border-(--chat-border) bg-(--chat-elevated) px-4 text-[10px] font-medium text-(--chat-text) transition-colors hover:border-(--chat-theme-20) hover:bg-(--chat-theme-5) hover:text-(--chat-theme) disabled:opacity-50 [&_svg]:size-3 [&_svg]:text-current";
+var chatDrawerSectionHeadingClass = "mb-1 px-0.5 text-[10px] font-semibold tracking-wide text-(--chat-muted)";
+var chatHeaderToolbarIconProps = { size: 14, strokeWidth: 1.75 };
+var chatSavedMessageModalIconClass = "shrink-0 text-(--chat-theme)";
+var chatHeaderToolbarIconLgProps = { size: 22, strokeWidth: 1.75 };
+var chatHeaderToolbarIconSmProps = { size: 11, strokeWidth: 1.75 };
+var chatDrawerFileRowClass = "flex items-center gap-2 rounded-md border border-(--chat-border)/70 bg-(--chat-elevated) px-2 py-1.5 transition-colors hover:bg-(--chat-hover)/50";
+var chatDrawerFileIconWrapClass = "flex size-8 shrink-0 items-center justify-center rounded-md bg-(--chat-hover)";
+var chatDrawerMediaFrameClass = "overflow-hidden rounded-md border border-(--chat-border)/70 bg-(--chat-elevated)";
+var buildChatThemeStyles = (themeColor) => ({
+  "--chat-theme": themeColor,
+  "--chat-theme-5": `${themeColor}0D`,
+  "--chat-theme-10": `${themeColor}1A`,
+  "--chat-theme-20": `${themeColor}33`,
+  "--chat-theme-40": `${themeColor}66`,
+  "--chat-theme-60": `${themeColor}99`,
+  "--read-tick-color": themeColor.toLowerCase() === "#0000ff" || themeColor.toLowerCase().includes("007aff") ? "#00e5ff" : "#40C4FF"
+});
+
+// src/chat/lib/chat-theme-storage.ts
+var STORAGE_KEY = "chat-color-mode";
+var loadChatColorMode = () => {
+  if (typeof window === "undefined") return null;
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    return stored === "dark" || stored === "light" ? stored : null;
+  } catch {
+    return null;
+  }
+};
+var saveChatColorMode = (mode) => {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(STORAGE_KEY, mode);
+  } catch {
+  }
+};
+var CHAT_THEME_SHELL_CLASS = "chat-theme-shell";
+function withThemeTransition(apply) {
+  if (typeof document === "undefined") {
+    apply();
+    return;
+  }
+  flushSync(apply);
+}
+
+// src/context/ChatThemeContext.tsx
+init_utils2();
+var ChatThemeContext = createContext(null);
+var ChatThemeProvider = ({
+  children,
+  themeColor,
+  colorMode,
+  defaultColorMode = "light",
+  onColorModeChange,
+  showColorModeToggle = true
+}) => {
+  const isControlled = colorMode !== void 0;
+  const [internalMode, setInternalMode] = useState(defaultColorMode);
+  const [isThemeTransitionReady, setIsThemeTransitionReady] = useState(false);
+  const skipThemeTransitionRef = useRef(true);
+  useLayoutEffect(() => {
+    if (!isControlled) {
+      const stored = loadChatColorMode();
+      if (stored) {
+        setInternalMode(stored);
+      }
+    }
+    const frame = requestAnimationFrame(() => {
+      skipThemeTransitionRef.current = false;
+      setIsThemeTransitionReady(true);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [isControlled]);
+  const resolvedMode = isControlled ? colorMode : internalMode;
+  const isDark = resolvedMode === "dark";
+  const setColorMode = useCallback(
+    (mode) => {
+      const apply = () => {
+        if (!isControlled) {
+          setInternalMode(mode);
+          saveChatColorMode(mode);
+        }
+        onColorModeChange?.(mode);
+      };
+      if (skipThemeTransitionRef.current) {
+        apply();
+        return;
+      }
+      withThemeTransition(apply);
+    },
+    [isControlled, onColorModeChange]
+  );
+  const toggleColorMode = useCallback(() => {
+    setColorMode(resolvedMode === "dark" ? "light" : "dark");
+  }, [resolvedMode, setColorMode]);
+  const value = useMemo(
+    () => ({
+      colorMode: resolvedMode,
+      isDark,
+      isThemeTransitionReady,
+      themeColor,
+      themeStyles: buildChatThemeStyles(themeColor),
+      scopeClassName: cn(
+        getChatScopeClass(isDark),
+        !isThemeTransitionReady && "chat-theme-no-transition"
+      ),
+      setColorMode,
+      toggleColorMode,
+      showColorModeToggle
+    }),
+    [
+      resolvedMode,
+      isDark,
+      isThemeTransitionReady,
+      themeColor,
+      setColorMode,
+      toggleColorMode,
+      showColorModeToggle
+    ]
+  );
+  return /* @__PURE__ */ jsx(ChatThemeContext.Provider, { value, children });
+};
+var useChatTheme = () => {
+  const context = useContext(ChatThemeContext);
+  if (!context) {
+    throw new Error("useChatTheme must be used within ChatThemeProvider");
+  }
+  return context;
+};
+
+// src/chat/lib/chat-message-bubble.ts
+init_utils2();
+function getBubbleCornerClasses(isSender) {
+  return isSender ? "rounded-tl-[18px] rounded-tr-[18px] rounded-bl-[18px] rounded-br-none" : "rounded-tl-[18px] rounded-tr-[18px] rounded-br-[18px] rounded-bl-none";
+}
+function getChatBubbleClasses({
+  isSender = false,
+  surface,
+  className
+}) {
+  const resolvedSurface = surface ?? (isSender ? "sent" : "received");
+  const isNeutral = resolvedSurface === "neutral";
+  return cn(
+    "relative",
+    getBubbleCornerClasses(isSender),
+    resolvedSurface === "sent" && "chat-bubble-sent bg-(--chat-theme) text-white",
+    resolvedSurface === "received" && "chat-bubble-received border border-(--chat-border)/60 bg-(--chat-incoming-bubble) text-(--chat-incoming-text)",
+    isNeutral && "chat-bubble-received border border-(--chat-border)/60 bg-(--chat-incoming-bubble) text-(--chat-incoming-text)",
+    className
+  );
+}
 var CallChatPanel = ({ conversationId, isGroupCall, onClose, className }) => {
+  const { scopeClassName, themeStyles } = useChatTheme();
   const rawMessages = useStore((s) => s.messagesByConversation[conversationId]);
   const loggedUserDetails = useStore((s) => s.loggedUserDetails);
   const conversations = useStore((s) => s.conversations);
@@ -6604,68 +6828,89 @@ var CallChatPanel = ({ conversationId, isGroupCall, onClose, className }) => {
       emitDmSend(payload);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col border-l border-white/10 bg-neutral-950/95", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-white/10 px-4 py-3", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-white/90", children: "In-call chat" }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          "aria-label": "Close chat panel",
-          onClick: onClose,
-          className: "flex size-7 items-center justify-center rounded-lg text-white/60 transition-colors hover:bg-white/10 hover:text-white",
-          children: /* @__PURE__ */ jsx(X, { size: 16 })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-3 overflow-y-auto px-4 py-3", children: [
-      messages.length === 0 && /* @__PURE__ */ jsx("p", { className: "pt-6 text-center text-xs text-white/40", children: "No messages yet \u2014 say hi without leaving the call." }),
-      messages.map((message) => /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", message.isOwn && "items-end"), children: [
-        /* @__PURE__ */ jsx("span", { className: "mb-0.5 text-[11px] font-medium text-white/40", children: message.isOwn ? "You" : message.senderName }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "max-w-[85%] rounded-2xl px-3 py-1.5 text-sm break-words",
-              message.isOwn ? "rounded-br-sm bg-(--chat-theme,#4f46e5) text-white" : "rounded-bl-sm bg-white/10 text-white/90",
-              message.pending && "opacity-60"
-            ),
-            children: message.content
-          }
-        )
-      ] }, message.id)),
-      /* @__PURE__ */ jsx("div", { ref: listEndRef })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-t border-white/10 p-3", children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          value: text,
-          onChange: (e) => setText(e.target.value),
-          onKeyDown: (e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-              e.preventDefault();
-              handleSend();
-            }
-          },
-          placeholder: "Message\u2026",
-          className: "min-w-0 flex-1 rounded-full border border-white/10 bg-white/5 px-3.5 py-2 text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-1 focus:ring-white/30"
-        }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        scopeClassName,
+        "flex flex-col border-l border-(--chat-border) bg-(--chat-surface) text-(--chat-text)",
+        className
       ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "ghost",
-          size: "icon",
-          "aria-label": "Send message",
-          disabled: !text.trim(),
-          onClick: handleSend,
-          className: "size-9 shrink-0 rounded-full bg-white/10 text-white hover:bg-white/20 disabled:opacity-30",
-          children: /* @__PURE__ */ jsx(Send, { size: 16 })
-        }
-      )
-    ] })
-  ] });
+      style: themeStyles,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn(chatSheetHeaderClass, "flex items-center justify-between"), children: [
+          /* @__PURE__ */ jsx("p", { className: chatSheetTitleClass, children: "In-call chat" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Close chat panel",
+              onClick: onClose,
+              className: "flex size-7 items-center justify-center rounded-lg text-(--chat-muted) transition-colors hover:bg-(--chat-hover) hover:text-(--chat-text)",
+              children: /* @__PURE__ */ jsx(X, { size: 16 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: cn(chatSheetBodyClass, "space-y-3"), children: [
+          messages.length === 0 && /* @__PURE__ */ jsx("p", { className: "pt-6 text-center text-xs text-(--chat-muted)", children: "No messages yet \u2014 say hi without leaving the call." }),
+          messages.map((message) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn("flex flex-col", message.isOwn ? "items-end" : "items-start"),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "mb-0.5 text-[11px] font-medium text-(--chat-muted)", children: message.isOwn ? "You" : message.senderName }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      getChatBubbleClasses({ isSender: message.isOwn }),
+                      "max-w-[85%] px-3 py-1.5 text-sm break-words",
+                      message.pending && "opacity-60"
+                    ),
+                    children: message.content
+                  }
+                )
+              ]
+            },
+            message.id
+          )),
+          /* @__PURE__ */ jsx("div", { ref: listEndRef })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-t border-(--chat-border) p-3", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              value: text,
+              onChange: (e) => setText(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  handleSend();
+                }
+              },
+              placeholder: "Message\u2026",
+              className: cn(chatInputClass, "min-w-0 flex-1 rounded-full px-3.5 py-2 text-sm")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              "aria-label": "Send message",
+              disabled: !text.trim(),
+              onClick: handleSend,
+              className: cn(
+                "size-9 shrink-0 rounded-full transition-colors",
+                text.trim() ? "bg-(--chat-theme) text-white hover:opacity-90" : "bg-(--chat-hover) text-(--chat-muted)"
+              ),
+              children: /* @__PURE__ */ jsx(Send, { size: 16 })
+            }
+          )
+        ] })
+      ]
+    }
+  );
 };
 var CallChatPanel_default = CallChatPanel;
 var CallSession2 = React11__default.lazy(() => Promise.resolve().then(() => (init_CallSession(), CallSession_exports)));
@@ -7125,162 +7370,6 @@ function AlertDialogCancel({
 
 // src/chat/ChatOverlay.tsx
 init_utils2();
-
-// src/chat/lib/chat-theme.ts
-init_utils2();
-var getChatScopeClass = (isDark) => cn("chat-theme-scope", isDark && "dark");
-var chatSheetContentClass = "flex w-full flex-col gap-0 p-0 bg-(--chat-surface) text-(--chat-text)";
-var chatSheetHeaderClass = "border-b border-(--chat-border) px-4 py-3 pr-11 text-left";
-var chatSheetBodyClass = "chat-message-scroll flex-1 overflow-y-auto bg-(--chat-surface) p-3";
-var chatSheetTitleClass = "text-[13px] font-semibold tracking-tight text-(--chat-text)";
-var chatSheetSubtitleClass = "text-[11px] text-(--chat-muted)";
-var chatDetailRowClass = "flex items-start justify-between gap-3 border-b border-(--chat-border) py-2.5 last:border-b-0";
-var chatDetailLabelClass = "text-[11px] text-(--chat-muted)";
-var chatDetailValueClass = "text-[13px] font-medium text-(--chat-text) text-right";
-var chatDialogContentClass = "overflow-hidden rounded-2xl border border-(--chat-border) bg-(--chat-surface) p-0 text-(--chat-text) shadow-[var(--chat-shadow)]";
-var chatDropdownContentClass = "rounded-xl border border-(--chat-border) bg-(--chat-surface) text-(--chat-text) shadow-lg";
-var chatOptionsMenuClass = "min-w-[220px] rounded-xl border border-(--chat-border) bg-(--chat-surface) p-1.5 text-(--chat-text) shadow-[0_10px_40px_rgba(0,0,0,0.12)]";
-var chatOptionsMenuLabelClass = "px-2.5 pb-0.5 pt-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-(--chat-muted)";
-var chatOptionsMenuSeparatorClass = "my-1.5 h-px bg-(--chat-border)";
-var chatOptionsMenuItemClass = "cursor-pointer gap-2.5 rounded-lg px-2.5 py-2 text-[13px] font-medium text-(--chat-text) focus:bg-(--chat-hover) focus:text-(--chat-text) data-[highlighted]:bg-(--chat-hover) [&_svg]:size-[15px] [&_svg]:shrink-0 [&_svg]:text-(--chat-muted)";
-var chatOptionsMenuItemDestructiveClass = "cursor-pointer gap-2.5 rounded-lg px-2.5 py-2 text-[13px] font-medium text-(--chat-danger-text) focus:bg-red-500/10 focus:text-(--chat-danger-text) data-[highlighted]:bg-red-500/10 data-[highlighted]:text-(--chat-danger-text) [&_svg]:size-[15px] [&_svg]:shrink-0 [&_svg]:!text-(--chat-danger-text)";
-var chatOptionsMenuSubTriggerClass = "cursor-pointer gap-2.5 rounded-lg px-2.5 py-2 pr-7 text-[13px] font-medium text-(--chat-text) focus:bg-(--chat-hover) focus:text-(--chat-text) data-[highlighted]:bg-(--chat-hover) data-[state=open]:bg-(--chat-hover) [&_svg]:size-[15px] [&_svg]:shrink-0 [&_svg]:text-(--chat-muted)";
-var chatPopoverContentClass = "w-auto border border-(--chat-border) bg-(--chat-surface) p-0 text-(--chat-text) shadow-2xl";
-var chatInputClass = "border border-(--chat-border) bg-(--chat-input-bg) text-(--chat-text) shadow-none placeholder:text-(--chat-muted) focus-visible:border-(--chat-theme-20) focus-visible:ring-2 focus-visible:ring-(--chat-theme-10)";
-var chatSidebarSearchShellClass = "relative flex min-w-0 flex-1 items-center rounded-lg border border-(--chat-border) bg-(--chat-search-bg) px-2.5 transition-colors focus-within:border-(--chat-theme) focus-within:shadow-[0_0_0_2px_var(--chat-theme-10)]";
-var chatSidebarSearchInputClass = "h-8 w-full min-w-0 border-0 bg-transparent px-1.5 text-xs text-(--chat-text) shadow-none outline-none placeholder:text-(--chat-muted)/60 focus-visible:border-0 focus-visible:shadow-none focus-visible:ring-0";
-var chatSelectClass = "h-10 w-full cursor-pointer appearance-none rounded-xl border border-(--chat-border) bg-(--chat-input-bg) pl-3 pr-9 text-sm text-(--chat-text) shadow-none focus-visible:border-(--chat-theme-20) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--chat-theme-10)";
-var chatListItemClass = "transition-colors hover:bg-(--chat-hover)";
-var chatLoadMoreButtonClass = "h-7 gap-1 rounded-full border border-(--chat-border) bg-(--chat-elevated) px-4 text-[10px] font-medium text-(--chat-text) transition-colors hover:border-(--chat-theme-20) hover:bg-(--chat-theme-5) hover:text-(--chat-theme) disabled:opacity-50 [&_svg]:size-3 [&_svg]:text-current";
-var chatDrawerSectionHeadingClass = "mb-1 px-0.5 text-[10px] font-semibold tracking-wide text-(--chat-muted)";
-var chatHeaderToolbarIconProps = { size: 14, strokeWidth: 1.75 };
-var chatSavedMessageModalIconClass = "shrink-0 text-(--chat-theme)";
-var chatHeaderToolbarIconLgProps = { size: 22, strokeWidth: 1.75 };
-var chatHeaderToolbarIconSmProps = { size: 11, strokeWidth: 1.75 };
-var chatDrawerFileRowClass = "flex items-center gap-2 rounded-md border border-(--chat-border)/70 bg-(--chat-elevated) px-2 py-1.5 transition-colors hover:bg-(--chat-hover)/50";
-var chatDrawerFileIconWrapClass = "flex size-8 shrink-0 items-center justify-center rounded-md bg-(--chat-hover)";
-var chatDrawerMediaFrameClass = "overflow-hidden rounded-md border border-(--chat-border)/70 bg-(--chat-elevated)";
-var buildChatThemeStyles = (themeColor) => ({
-  "--chat-theme": themeColor,
-  "--chat-theme-5": `${themeColor}0D`,
-  "--chat-theme-10": `${themeColor}1A`,
-  "--chat-theme-20": `${themeColor}33`,
-  "--chat-theme-40": `${themeColor}66`,
-  "--chat-theme-60": `${themeColor}99`,
-  "--read-tick-color": themeColor.toLowerCase() === "#0000ff" || themeColor.toLowerCase().includes("007aff") ? "#00e5ff" : "#40C4FF"
-});
-
-// src/chat/lib/chat-theme-storage.ts
-var STORAGE_KEY = "chat-color-mode";
-var loadChatColorMode = () => {
-  if (typeof window === "undefined") return null;
-  try {
-    const stored = localStorage.getItem(STORAGE_KEY);
-    return stored === "dark" || stored === "light" ? stored : null;
-  } catch {
-    return null;
-  }
-};
-var saveChatColorMode = (mode) => {
-  if (typeof window === "undefined") return;
-  try {
-    localStorage.setItem(STORAGE_KEY, mode);
-  } catch {
-  }
-};
-var CHAT_THEME_SHELL_CLASS = "chat-theme-shell";
-function withThemeTransition(apply) {
-  if (typeof document === "undefined") {
-    apply();
-    return;
-  }
-  flushSync(apply);
-}
-
-// src/context/ChatThemeContext.tsx
-init_utils2();
-var ChatThemeContext = createContext(null);
-var ChatThemeProvider = ({
-  children,
-  themeColor,
-  colorMode,
-  defaultColorMode = "light",
-  onColorModeChange,
-  showColorModeToggle = true
-}) => {
-  const isControlled = colorMode !== void 0;
-  const [internalMode, setInternalMode] = useState(defaultColorMode);
-  const [isThemeTransitionReady, setIsThemeTransitionReady] = useState(false);
-  const skipThemeTransitionRef = useRef(true);
-  useLayoutEffect(() => {
-    if (!isControlled) {
-      const stored = loadChatColorMode();
-      if (stored) {
-        setInternalMode(stored);
-      }
-    }
-    const frame = requestAnimationFrame(() => {
-      skipThemeTransitionRef.current = false;
-      setIsThemeTransitionReady(true);
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [isControlled]);
-  const resolvedMode = isControlled ? colorMode : internalMode;
-  const isDark = resolvedMode === "dark";
-  const setColorMode = useCallback(
-    (mode) => {
-      const apply = () => {
-        if (!isControlled) {
-          setInternalMode(mode);
-          saveChatColorMode(mode);
-        }
-        onColorModeChange?.(mode);
-      };
-      if (skipThemeTransitionRef.current) {
-        apply();
-        return;
-      }
-      withThemeTransition(apply);
-    },
-    [isControlled, onColorModeChange]
-  );
-  const toggleColorMode = useCallback(() => {
-    setColorMode(resolvedMode === "dark" ? "light" : "dark");
-  }, [resolvedMode, setColorMode]);
-  const value = useMemo(
-    () => ({
-      colorMode: resolvedMode,
-      isDark,
-      isThemeTransitionReady,
-      themeColor,
-      themeStyles: buildChatThemeStyles(themeColor),
-      scopeClassName: cn(
-        getChatScopeClass(isDark),
-        !isThemeTransitionReady && "chat-theme-no-transition"
-      ),
-      setColorMode,
-      toggleColorMode,
-      showColorModeToggle
-    }),
-    [
-      resolvedMode,
-      isDark,
-      isThemeTransitionReady,
-      themeColor,
-      setColorMode,
-      toggleColorMode,
-      showColorModeToggle
-    ]
-  );
-  return /* @__PURE__ */ jsx(ChatThemeContext.Provider, { value, children });
-};
-var useChatTheme = () => {
-  const context = useContext(ChatThemeContext);
-  if (!context) {
-    throw new Error("useChatTheme must be used within ChatThemeProvider");
-  }
-  return context;
-};
 var ChatSheetContent = ({
   className,
   style,
@@ -7336,6 +7425,66 @@ init_avatar();
 init_button();
 init_utils2();
 init_call_store();
+
+// src/call/ringtone.ts
+var audioCtx = null;
+var scheduledTimer = null;
+var activeOscillators = [];
+var RING_ON_MS = 1200;
+var RING_OFF_MS = 2400;
+var RING_FREQUENCIES = [440, 480];
+var getContext = () => {
+  if (typeof window === "undefined") return null;
+  const Ctor = window.AudioContext || window.webkitAudioContext;
+  if (!Ctor) return null;
+  if (!audioCtx || audioCtx.state === "closed") audioCtx = new Ctor();
+  return audioCtx;
+};
+var stopOscillators = () => {
+  activeOscillators.forEach((osc) => {
+    try {
+      osc.stop();
+    } catch {
+    }
+  });
+  activeOscillators = [];
+};
+var ringBurst = (ctx) => {
+  const onSeconds = RING_ON_MS / 1e3;
+  const gain = ctx.createGain();
+  gain.gain.setValueAtTime(0, ctx.currentTime);
+  gain.gain.linearRampToValueAtTime(0.15, ctx.currentTime + 0.05);
+  gain.gain.setValueAtTime(0.15, ctx.currentTime + onSeconds - 0.05);
+  gain.gain.linearRampToValueAtTime(0, ctx.currentTime + onSeconds);
+  gain.connect(ctx.destination);
+  RING_FREQUENCIES.forEach((freq) => {
+    const osc = ctx.createOscillator();
+    osc.type = "sine";
+    osc.frequency.value = freq;
+    osc.connect(gain);
+    osc.start();
+    osc.stop(ctx.currentTime + onSeconds);
+    activeOscillators.push(osc);
+  });
+};
+var playDefaultRingtone = () => {
+  if (scheduledTimer) return;
+  const ctx = getContext();
+  if (!ctx) return;
+  ctx.resume().catch(() => void 0);
+  const cycle = () => {
+    ringBurst(ctx);
+    scheduledTimer = setTimeout(cycle, RING_ON_MS + RING_OFF_MS);
+  };
+  cycle();
+};
+var stopDefaultRingtone = () => {
+  if (scheduledTimer) {
+    clearTimeout(scheduledTimer);
+    scheduledTimer = null;
+  }
+  stopOscillators();
+};
 var IncomingCallDialog = ({ ringtoneUrl }) => {
   const uiStatus = useCallStore((s) => s.uiStatus);
   const callId = useCallStore((s) => s.callId);
@@ -7358,6 +7507,12 @@ var IncomingCallDialog = ({ ringtoneUrl }) => {
       el.pause();
     }
   }, [isOpen, ringtoneUrl]);
+  useEffect(() => {
+    if (ringtoneUrl) return;
+    if (isOpen) playDefaultRingtone();
+    else stopDefaultRingtone();
+    return () => stopDefaultRingtone();
+  }, [isOpen, ringtoneUrl]);
   if (!isOpen) return null;
   const callerName = caller?.name || "Unknown caller";
   const name = isGroupCall ? peer?.name || callerName : callerName;
@@ -11934,28 +12089,6 @@ function MessageForwardedLabel({ isSender, className, overlay }) {
     }
   );
 }
-
-// src/chat/lib/chat-message-bubble.ts
-init_utils2();
-function getBubbleCornerClasses(isSender) {
-  return isSender ? "rounded-tl-[18px] rounded-tr-[18px] rounded-bl-[18px] rounded-br-none" : "rounded-tl-[18px] rounded-tr-[18px] rounded-br-[18px] rounded-bl-none";
-}
-function getChatBubbleClasses({
-  isSender = false,
-  surface,
-  className
-}) {
-  const resolvedSurface = surface ?? (isSender ? "sent" : "received");
-  const isNeutral = resolvedSurface === "neutral";
-  return cn(
-    "relative",
-    getBubbleCornerClasses(isSender),
-    resolvedSurface === "sent" && "chat-bubble-sent bg-(--chat-theme) text-white",
-    resolvedSurface === "received" && "chat-bubble-received border border-(--chat-border)/60 bg-(--chat-incoming-bubble) text-(--chat-incoming-text)",
-    isNeutral && "chat-bubble-received border border-(--chat-border)/60 bg-(--chat-incoming-bubble) text-(--chat-incoming-text)",
-    className
-  );
-}
 init_utils2();
 init_client();
 function getPreviewKind(name) {
@@ -20983,6 +21116,7 @@ init_normalize_helpers();
 init_useStore();
 init_open_conversation();
 var RETRY_DELAYS_MS = [1e3, 3e3, 8e3, 2e4];
+var CHAT_HEARTBEAT_INTERVAL_MS = 15e3;
 var recentToastIds = /* @__PURE__ */ new Set();
 var rememberToastId = (id) => {
   if (!id) return true;
@@ -21205,6 +21339,36 @@ var ForegroundPushBridge = ({ onPush }) => {
       window.removeEventListener(PUSH_CHANGED_EVENT, onPushChanged);
     };
   }, []);
+  useEffect(() => {
+    if (typeof navigator === "undefined" || !("serviceWorker" in navigator)) {
+      return;
+    }
+    let interval = null;
+    const sendHeartbeat = () => {
+      navigator.serviceWorker.getRegistration().then(
+        (registration) => registration?.active?.postMessage({ type: CHAT_HEARTBEAT_SW_TYPE })
+      ).catch(() => void 0);
+    };
+    const startHeartbeat = () => {
+      if (interval || !getStoredPushToken()) return;
+      sendHeartbeat();
+      interval = setInterval(sendHeartbeat, CHAT_HEARTBEAT_INTERVAL_MS);
+    };
+    const stopHeartbeat = () => {
+      if (interval) clearInterval(interval);
+      interval = null;
+    };
+    startHeartbeat();
+    const onPushChanged = (event) => {
+      if (event.detail?.enabled) startHeartbeat();
+      else stopHeartbeat();
+    };
+    window.addEventListener(PUSH_CHANGED_EVENT, onPushChanged);
+    return () => {
+      stopHeartbeat();
+      window.removeEventListener(PUSH_CHANGED_EVENT, onPushChanged);
+    };
+  }, []);
   useEffect(() => {
     const onOpen = (event) => {
       const id = String(