@realtimexsco/live-chat 1.5.4 → 1.5.6

package/dist/index.cjs

@@ -912,12 +912,13 @@ var init_store_helpers = __esm({
 });
 
 // src/notifications/open-conversation.ts
-exports.OPEN_CONVERSATION_EVENT = void 0; exports.NOTIFICATION_CLICK_SW_TYPE = void 0; exports.PUSH_BROADCAST_CHANNEL = void 0; exports.PUSH_DATA_CACHE_NAME = void 0; var PENDING_STORAGE_KEY, PENDING_OPEN_CACHE_PATH; exports.resolveConversationIdFromPushData = void 0; var normalizePushMeta, parsePendingRaw; exports.peekPendingOpenConversation = void 0; exports.peekPendingOpenRequest = void 0; exports.consumePendingOpenConversation = void 0; exports.consumePendingOpenRequest = void 0; exports.requestOpenConversation = void 0; exports.buildChannelFromPushRequest = void 0; var mapConversationToChannel, stripConversationIdFromUrl, cacheRequestForPath; exports.consumePendingOpenFromPushCache = void 0; var readConversationIdFromLocation, consumedUrlConversationIds, lastHandledOpenId, lastHandledOpenAt, shouldHandleOpen, handleNotificationOpen; exports.installNotificationClickBridge = void 0;
+exports.OPEN_CONVERSATION_EVENT = void 0; exports.NOTIFICATION_CLICK_SW_TYPE = void 0; var CHAT_HEARTBEAT_SW_TYPE; exports.PUSH_BROADCAST_CHANNEL = void 0; exports.PUSH_DATA_CACHE_NAME = void 0; var PENDING_STORAGE_KEY, PENDING_OPEN_CACHE_PATH; exports.resolveConversationIdFromPushData = void 0; var normalizePushMeta, parsePendingRaw; exports.peekPendingOpenConversation = void 0; exports.peekPendingOpenRequest = void 0; exports.consumePendingOpenConversation = void 0; exports.consumePendingOpenRequest = void 0; exports.requestOpenConversation = void 0; exports.buildChannelFromPushRequest = void 0; var mapConversationToChannel, stripConversationIdFromUrl, cacheRequestForPath; exports.consumePendingOpenFromPushCache = void 0; var readConversationIdFromLocation, consumedUrlConversationIds, lastHandledOpenId, lastHandledOpenAt, shouldHandleOpen, handleNotificationOpen; exports.installNotificationClickBridge = void 0;
 var init_open_conversation = __esm({
   "src/notifications/open-conversation.ts"() {
     init_store_helpers();
     exports.OPEN_CONVERSATION_EVENT = "realtimex:open-conversation";
     exports.NOTIFICATION_CLICK_SW_TYPE = "realtimex:notification-click";
+    CHAT_HEARTBEAT_SW_TYPE = "realtimex:chat-heartbeat";
     exports.PUSH_BROADCAST_CHANNEL = "realtimex-push";
     exports.PUSH_DATA_CACHE_NAME = "realtimex-push-data-v1";
     PENDING_STORAGE_KEY = "realtimex:pending-open-conversation";
@@ -4639,6 +4640,67 @@ var init_utils2 = __esm({
   "src/lib/utils.ts"() {
   }
 });
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Tooltip.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  showArrow = true,
+  arrowClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    radixUi.Tooltip.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
+          radixUi.Tooltip.Arrow,
+          {
+            className: cn(
+              "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]",
+              arrowClassName
+            )
+          }
+        ) : null
+      ]
+    }
+  ) });
+}
+var init_tooltip = __esm({
+  "src/ui/tooltip.tsx"() {
+    init_utils2();
+  }
+});
 function Avatar({
   className,
   size = "default",
@@ -4778,9 +4840,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 = React11.useRef(null);
-      const audioRef = React11.useRef(null);
       const [hasFrame, setHasFrame] = React11.useState(false);
       React11.useEffect(() => {
         const el = videoRef.current;
@@ -4793,17 +4854,6 @@ var init_ParticipantView = __esm({
           setHasFrame(false);
         }
       }, [webcamOn, webcamStream]);
-      React11.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__ */ jsxRuntime.jsxs(
@@ -4836,8 +4886,7 @@ var init_ParticipantView = __esm({
                 )
               }
             ),
-            !isLocal && /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, autoPlay: true, playsInline: true }),
-            isHandRaised && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-2 left-2 flex size-7 items-center justify-center rounded-full bg-amber-400 text-neutral-900 shadow", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Hand, { size: 14 }) }),
+            isHandRaised && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Hand, { size: 14 }) }),
             !showVideo && /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { size: "lg", className: "size-20", children: [
               /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: fallbackImage, alt: name }),
               /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "bg-neutral-700 text-xl font-medium text-white", children: name.charAt(0).toUpperCase() })
@@ -4894,7 +4943,7 @@ var init_AudioCallView = __esm({
             }
           ),
           isMuted && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -right-1 -bottom-1 flex size-9 items-center justify-center rounded-full bg-neutral-700 ring-4 ring-neutral-900", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MicOff, { size: 16, className: "text-white/80" }) }),
-          isRemoteHandRaised && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-1 -top-1 flex size-9 items-center justify-center rounded-full bg-amber-400 text-neutral-900 ring-4 ring-neutral-900", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Hand, { size: 16 }) })
+          isRemoteHandRaised && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-1 -top-1 flex size-9 items-center justify-center rounded-full bg-amber-400 text-neutral-900 shadow-lg shadow-amber-400/30 ring-4 ring-neutral-900 animate-[bounce_1s_ease-in-out_2]", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Hand, { size: 16 }) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl font-semibold tracking-tight", children: name })
       ] });
@@ -4918,13 +4967,13 @@ var init_ScreenShareView = __esm({
           el.srcObject = null;
         }
       }, [screenShareOn, screenShareStream]);
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 px-1 pb-2 text-xs font-medium text-white/70", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MonitorUp, { size: 14 }),
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-1 items-center justify-center overflow-hidden rounded-2xl bg-black ring-1 ring-white/10 shadow-2xl", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("video", { ref: videoRef, playsInline: true, muted: isLocal, className: "max-h-full max-w-full object-contain" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-3 left-3 flex items-center gap-1.5 rounded-full bg-black/70 px-3 py-1.5 text-xs font-medium text-white shadow backdrop-blur-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MonitorUp, { size: 13, className: "text-indigo-300" }),
           isLocal ? "You are presenting" : `${displayName || "Someone"} is presenting`
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex flex-1 items-center justify-center overflow-hidden rounded-xl bg-black", children: /* @__PURE__ */ jsxRuntime.jsx("video", { ref: videoRef, playsInline: true, muted: isLocal, className: "max-h-full max-w-full object-contain" }) })
-      ] });
+        ] })
+      ] }) });
     };
     ScreenShareView_default = ScreenShareView;
   }
@@ -4964,22 +5013,47 @@ var init_popover = __esm({
     init_utils2();
   }
 });
-var circleBtn, idleBtnClass, activeBtnClass, QUICK_REACTIONS, CallControls, CallControls_default;
+var circleBtn, idleBtnClass, activeBtnClass, ControlButton, QUICK_REACTIONS, CallControls, CallControls_default;
 var init_CallControls = __esm({
   "src/call/CallControls.tsx"() {
     init_button();
     init_popover();
+    init_tooltip();
     init_utils2();
     init_call_store();
     circleBtn = "size-13 rounded-full text-white transition-all duration-150 disabled:opacity-40 hover:scale-105 active:scale-95";
     idleBtnClass = "bg-white/10 hover:bg-white/20";
     activeBtnClass = "bg-white text-neutral-900 hover:bg-white/90";
+    ControlButton = ({
+      icon,
+      label,
+      active,
+      activeClassName = activeBtnClass,
+      className,
+      onClick
+    }) => /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          "aria-label": label,
+          onClick,
+          className: cn(circleBtn, active ? activeClassName : idleBtnClass, className),
+          children: icon
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", className: "z-[1000000]", children: label })
+    ] });
     QUICK_REACTIONS = ["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F62E}", "\u{1F44F}", "\u{1F389}"];
     CallControls = ({
       sdk,
       onReaction,
       isHandRaised,
-      onToggleRaiseHand
+      onToggleRaiseHand,
+      isChatOpen,
+      onToggleChat,
+      isVideoActive
     }) => {
       const {
         toggleMic,
@@ -4988,81 +5062,124 @@ var init_CallControls = __esm({
         localWebcamOn,
         localScreenShareOn,
         toggleScreenShare,
+        recordingState,
+        startRecording,
+        stopRecording,
         leave
       } = sdk.useMeeting();
       const endCall = exports.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();
       };
       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-2 rounded-full bg-white/10 p-2 backdrop-blur-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 rounded-full bg-white/10 p-2 shadow-lg shadow-black/20 backdrop-blur-sm", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
+            ControlButton,
             {
-              variant: "ghost",
-              size: "icon",
-              className: cn(circleBtn, localMicOn ? idleBtnClass : activeBtnClass),
-              "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 })
+              icon: localMicOn ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MicOff, { size: 20 }),
+              label: localMicOn ? "Mute microphone" : "Unmute microphone",
+              active: !localMicOn,
+              onClick: () => toggleMic()
+            }
+          ),
+          isVideoActive ? /* @__PURE__ */ jsxRuntime.jsx(
+            ControlButton,
+            {
+              icon: localWebcamOn ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VideoOff, { size: 20 }),
+              label: localWebcamOn ? "Turn off camera" : "Turn on camera",
+              active: !localWebcamOn,
+              onClick: () => toggleWebcam()
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            ControlButton,
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { size: 20 }),
+              label: "Switch to video call",
+              onClick: () => toggleWebcam()
             }
           ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "mx-0.5 h-7 w-px shrink-0 bg-white/15" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
+            ControlButton,
             {
-              variant: "ghost",
-              size: "icon",
-              className: cn(circleBtn, localWebcamOn ? idleBtnClass : activeBtnClass),
-              "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 })
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MonitorUp, { size: 20 }),
+              label: localScreenShareOn ? "Stop sharing your screen" : "Share your screen",
+              active: localScreenShareOn,
+              activeClassName: "bg-indigo-500 hover:bg-indigo-400",
+              onClick: () => toggleScreenShare()
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
+            ControlButton,
             {
-              variant: "ghost",
-              size: "icon",
-              className: cn(circleBtn, localScreenShareOn ? "bg-indigo-500 hover:bg-indigo-400" : idleBtnClass),
-              "aria-label": localScreenShareOn ? "Stop sharing your screen" : "Share your screen",
-              onClick: () => toggleScreenShare(),
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MonitorUp, { size: 20 })
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx(
-            Button,
+            ControlButton,
             {
-              variant: "ghost",
-              size: "icon",
-              className: cn(circleBtn, isHandRaised ? "bg-amber-400 text-neutral-900 hover:bg-amber-300" : idleBtnClass),
-              "aria-label": isHandRaised ? "Lower hand" : "Raise hand",
-              onClick: onToggleRaiseHand,
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Hand, { size: 20 })
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Hand, { size: 20, className: isHandRaised ? "animate-[bounce_1s_ease-in-out_2]" : void 0 }),
+              label: isHandRaised ? "Lower hand" : "Raise hand",
+              active: isHandRaised,
+              activeClassName: "bg-amber-400 text-neutral-900 hover:bg-amber-300",
+              onClick: onToggleRaiseHand
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ControlButton,
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { size: 20 }),
+              label: isChatOpen ? "Close in-call chat" : "Open in-call chat",
+              active: isChatOpen,
+              onClick: onToggleChat
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: cn(circleBtn, idleBtnClass),
-                "aria-label": "Send a reaction",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Smile, { size: 20 })
-              }
-            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: cn(circleBtn, idleBtnClass),
+                  "aria-label": "Send a reaction",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Smile, { size: 20 })
+                }
+              ) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", className: "z-[1000000]", children: "React" })
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
               PopoverContent,
               {
                 side: "top",
                 align: "center",
-                className: "w-auto rounded-full border-white/10 bg-neutral-900 p-1.5 shadow-xl",
+                className: "z-[1000000] w-auto rounded-full border-white/10 bg-neutral-900 p-1.5 shadow-xl",
                 children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0.5", children: QUICK_REACTIONS.map((emoji) => /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     type: "button",
-                    className: "flex size-10 items-center justify-center rounded-full text-xl transition-transform hover:scale-125 hover:bg-white/10",
+                    className: "flex size-10 items-center justify-center rounded-full text-xl transition-transform hover:scale-125 hover:bg-white/10 active:scale-95",
                     "aria-label": `React with ${emoji}`,
                     onClick: () => onReaction(emoji),
                     children: emoji
@@ -5073,17 +5190,20 @@ var init_CallControls = __esm({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon",
-            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.PhoneOff, { size: 22 })
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              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.PhoneOff, { size: 22 })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", className: "z-[1000000]", children: "Leave call" })
+        ] })
       ] });
     };
     CallControls_default = CallControls;
@@ -5140,15 +5260,18 @@ var init_useCallReactions = __esm({
       }, []);
       const { send, localParticipant } = sdk.useMeeting({
         onData: (data) => {
+          console.log("[realtimex-call] data channel received:", data);
           try {
             const raw = typeof data.payload === "string" ? data.payload : new TextDecoder().decode(data.payload);
             const message = JSON.parse(raw);
+            console.log("[realtimex-call] data channel parsed:", message, "from", data.from);
             if (message.type === "reaction") {
               addFloatingReaction(message.emoji, data.from);
             } else if (message.type === "raise-hand") {
               setRaisedHands((prev) => ({ ...prev, [data.from]: message.raised }));
             }
-          } catch {
+          } catch (err) {
+            console.warn("[realtimex-call] data channel payload not decodable:", err, data);
           }
         }
       });
@@ -5161,12 +5284,22 @@ var init_useCallReactions = __esm({
           return next;
         });
       }, [localParticipant?.id]);
+      const sendDataMessage = React11.useCallback(
+        (message) => {
+          send(JSON.stringify(message)).then((ok) => {
+            console.log("[realtimex-call] data channel send result:", ok, message);
+          }).catch((err) => {
+            console.warn("[realtimex-call] data channel send failed:", err, message);
+          });
+        },
+        [send]
+      );
       const sendReaction = React11.useCallback(
         (emoji) => {
           if (localParticipant?.id) addFloatingReaction(emoji, localParticipant.id);
-          void send(JSON.stringify({ type: "reaction", emoji }));
+          sendDataMessage({ type: "reaction", emoji });
         },
-        [send, localParticipant?.id, addFloatingReaction]
+        [localParticipant?.id, addFloatingReaction, sendDataMessage]
       );
       const toggleRaiseHand = React11.useCallback(() => {
         setIsHandRaised((prev) => {
@@ -5174,15 +5307,15 @@ var init_useCallReactions = __esm({
           if (localParticipant?.id) {
             setRaisedHands((hands) => ({ ...hands, [localParticipant.id]: next }));
           }
-          void send(JSON.stringify({ type: "raise-hand", raised: next }));
+          sendDataMessage({ type: "raise-hand", raised: next });
           return next;
         });
-      }, [send, localParticipant?.id]);
+      }, [localParticipant?.id, sendDataMessage]);
       return { floatingReactions, raisedHands, isHandRaised, sendReaction, toggleRaiseHand };
     };
   }
 });
-var MeetingView, MeetingView_default;
+var RemoteParticipantWatcher, MeetingView, MeetingView_default;
 var init_MeetingView = __esm({
   "src/call/MeetingView.tsx"() {
     init_ParticipantView();
@@ -5193,11 +5326,48 @@ var init_MeetingView = __esm({
     init_useCallReactions();
     init_call_store();
     init_utils2();
-    MeetingView = ({ sdk, mode, peerName, peerAvatar }) => {
+    RemoteParticipantWatcher = ({
+      sdk,
+      participantId,
+      onWebcamChange
+    }) => {
+      const { webcamOn, micStream, micOn } = sdk.useParticipant(participantId);
+      const audioRef = React11.useRef(null);
+      React11.useEffect(() => {
+        onWebcamChange(participantId, webcamOn);
+        return () => onWebcamChange(participantId, false);
+      }, [participantId, webcamOn]);
+      React11.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__ */ jsxRuntime.jsx("audio", { ref: audioRef, autoPlay: true, playsInline: true });
+    };
+    MeetingView = ({
+      sdk,
+      mode,
+      peerName,
+      peerAvatar,
+      isChatOpen,
+      onToggleChat
+    }) => {
       const endCall = exports.useCallStore((s) => s.endCall);
       const [hasJoined, setHasJoined] = React11.useState(false);
       const hasJoinedRef = React11.useRef(false);
       const [groupView, setGroupView] = React11.useState("grid");
+      const [meetingState, setMeetingState] = React11.useState("CONNECTING");
+      const [remoteWebcamOn, setRemoteWebcamOn] = React11.useState({});
+      const handleRemoteWebcamChange = React11.useCallback((participantId, on) => {
+        setRemoteWebcamOn(
+          (prev) => prev[participantId] === on ? prev : { ...prev, [participantId]: on }
+        );
+      }, []);
       const {
         join,
         participants,
@@ -5213,7 +5383,8 @@ var init_MeetingView = __esm({
         onMeetingLeft: () => {
           if (!hasJoinedRef.current) return;
           endCall();
-        }
+        },
+        onMeetingStateChanged: ({ state }) => setMeetingState(state)
       });
       const { floatingReactions, raisedHands, isHandRaised, sendReaction, toggleRaiseHand } = useCallReactions(sdk);
       React11.useEffect(() => {
@@ -5229,149 +5400,58 @@ var init_MeetingView = __esm({
         (id) => id !== localParticipant?.id
       );
       const isGroup = remoteIds.length > 1;
+      const remoteParticipantWatchers = remoteIds.map((id) => /* @__PURE__ */ jsxRuntime.jsx(
+        RemoteParticipantWatcher,
+        {
+          sdk,
+          participantId: id,
+          onWebcamChange: handleRemoteWebcamChange
+        },
+        id
+      ));
+      const anyRemoteWebcamOn = Object.values(remoteWebcamOn).some(Boolean);
+      const showVideoGrid = mode === "video" || localWebcamOn || anyRemoteWebcamOn;
       const controls = /* @__PURE__ */ jsxRuntime.jsx(
         CallControls_default,
         {
           sdk,
           onReaction: sendReaction,
           isHandRaised,
-          onToggleRaiseHand: toggleRaiseHand
+          onToggleRaiseHand: toggleRaiseHand,
+          isChatOpen,
+          onToggleChat,
+          isVideoActive: showVideoGrid
         }
       );
+      const connectionStatusText = meetingState === "CONNECTING" ? "Connecting\u2026" : meetingState === "DISCONNECTED" ? "Reconnecting\u2026" : meetingState === "FAILED" ? "Connection lost" : null;
+      const statusBanner = connectionStatusText && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center justify-center gap-1.5 bg-amber-500/15 px-4 py-1.5 text-xs font-medium text-amber-300", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-1.5 animate-pulse rounded-full bg-amber-400" }),
+        connectionStatusText
+      ] });
       if (presenterId) {
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-1 flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(FloatingReactions_default, { reactions: floatingReactions }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ScreenShareView_default,
-            {
-              sdk,
-              presenterId,
-              isLocal: presenterId === localParticipant?.id,
-              className: "flex flex-1 flex-col overflow-hidden p-4 pb-2"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 overflow-x-auto px-4 pb-2", children: [
-            localParticipant?.id && /* @__PURE__ */ jsxRuntime.jsx(
-              ParticipantView_default,
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          remoteParticipantWatchers,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-1 flex-col", children: [
+            statusBanner,
+            /* @__PURE__ */ jsxRuntime.jsx(FloatingReactions_default, { reactions: floatingReactions }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ScreenShareView_default,
               {
                 sdk,
-                participantId: localParticipant.id,
-                isLocal: true,
-                isHandRaised: !!raisedHands[localParticipant.id],
-                className: "aspect-video h-20 min-h-0 w-32 shrink-0"
+                presenterId,
+                isLocal: presenterId === localParticipant?.id,
+                className: "flex flex-1 flex-col overflow-hidden p-4 pb-2"
               }
             ),
-            remoteIds.map((id) => /* @__PURE__ */ jsxRuntime.jsx(
-              ParticipantView_default,
-              {
-                sdk,
-                participantId: id,
-                fallbackName: peerName,
-                fallbackImage: peerAvatar,
-                isHandRaised: !!raisedHands[id],
-                className: "aspect-video h-20 min-h-0 w-32 shrink-0"
-              },
-              id
-            ))
-          ] }),
-          controls
-        ] });
-      }
-      const showVideoGrid = mode === "video" || localWebcamOn;
-      if (!showVideoGrid) {
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-1 flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(FloatingReactions_default, { reactions: floatingReactions }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            AudioCallView_default,
-            {
-              sdk,
-              remoteParticipantId: remoteIds[0],
-              peerName,
-              peerAvatar,
-              isRemoteHandRaised: !!(remoteIds[0] && raisedHands[remoteIds[0]])
-            }
-          ),
-          controls
-        ] });
-      }
-      const focusedId = groupView === "speaker" ? activeSpeakerId && activeSpeakerId !== localParticipant?.id ? activeSpeakerId : remoteIds[0] || localParticipant?.id : null;
-      const stripIds = focusedId ? [localParticipant?.id, ...remoteIds].filter(
-        (id) => !!id && id !== focusedId
-      ) : [];
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-1 flex-col", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(FloatingReactions_default, { reactions: floatingReactions }),
-        isGroup && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-1 px-4 pt-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              "aria-label": "Grid view",
-              onClick: () => setGroupView("grid"),
-              className: cn(
-                "flex size-8 items-center justify-center rounded-lg transition-colors",
-                groupView === "grid" ? "bg-white/15 text-white" : "text-white/50 hover:text-white/80"
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGrid, { size: 16 })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              "aria-label": "Speaker view",
-              onClick: () => setGroupView("speaker"),
-              className: cn(
-                "flex size-8 items-center justify-center rounded-lg transition-colors",
-                groupView === "speaker" ? "bg-white/15 text-white" : "text-white/50 hover:text-white/80"
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Rows3, { size: 16 })
-            }
-          )
-        ] }),
-        focusedId ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-3 overflow-y-auto p-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ParticipantView_default,
-            {
-              sdk,
-              participantId: focusedId,
-              isLocal: focusedId === localParticipant?.id,
-              fallbackName: peerName,
-              fallbackImage: peerAvatar,
-              isHandRaised: !!raisedHands[focusedId],
-              className: "min-h-[240px] flex-1"
-            }
-          ),
-          stripIds.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 overflow-x-auto", children: stripIds.map((id) => /* @__PURE__ */ jsxRuntime.jsx(
-            ParticipantView_default,
-            {
-              sdk,
-              participantId: id,
-              isLocal: id === localParticipant?.id,
-              fallbackName: peerName,
-              fallbackImage: peerAvatar,
-              isHandRaised: !!raisedHands[id],
-              className: "aspect-video h-20 min-h-0 w-32 shrink-0"
-            },
-            id
-          )) })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "grid flex-1 auto-rows-fr gap-3 overflow-y-auto p-4",
-            style: {
-              gridTemplateColumns: `repeat(${Math.min(
-                Math.max(remoteIds.length + 1, 1),
-                3
-              )}, minmax(0, 1fr))`
-            },
-            children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 overflow-x-auto px-4 pb-2", children: [
               localParticipant?.id && /* @__PURE__ */ jsxRuntime.jsx(
                 ParticipantView_default,
                 {
                   sdk,
                   participantId: localParticipant.id,
                   isLocal: true,
-                  isHandRaised: !!raisedHands[localParticipant.id]
+                  isHandRaised: !!raisedHands[localParticipant.id],
+                  className: "aspect-video h-20 min-h-0 w-32 shrink-0"
                 }
               ),
               remoteIds.map((id) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -5381,37 +5461,160 @@ var init_MeetingView = __esm({
                   participantId: id,
                   fallbackName: peerName,
                   fallbackImage: peerAvatar,
-                  isHandRaised: !!raisedHands[id]
+                  isHandRaised: !!raisedHands[id],
+                  className: "aspect-video h-20 min-h-0 w-32 shrink-0"
                 },
                 id
               ))
-            ]
-          }
-        ),
-        controls
-      ] });
-    };
-    MeetingView_default = MeetingView;
-  }
-});
-
-// src/call/CallSession.tsx
-var CallSession_exports = {};
-__export(CallSession_exports, {
-  default: () => CallSession_default
-});
-var CallSession, CallSession_default;
-var init_CallSession = __esm({
-  "src/call/CallSession.tsx"() {
-    init_useStore();
-    init_videosdk_loader();
-    init_MeetingView();
-    CallSession = ({
-      meetingId,
-      token,
-      mode,
-      peerName,
+            ] }),
+            controls
+          ] })
+        ] });
+      }
+      if (!showVideoGrid) {
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          remoteParticipantWatchers,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-1 flex-col", children: [
+            statusBanner,
+            /* @__PURE__ */ jsxRuntime.jsx(FloatingReactions_default, { reactions: floatingReactions }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              AudioCallView_default,
+              {
+                sdk,
+                remoteParticipantId: remoteIds[0],
+                peerName,
+                peerAvatar,
+                isRemoteHandRaised: !!(remoteIds[0] && raisedHands[remoteIds[0]])
+              }
+            ),
+            controls
+          ] })
+        ] });
+      }
+      const focusedId = groupView === "speaker" ? activeSpeakerId && activeSpeakerId !== localParticipant?.id ? activeSpeakerId : remoteIds[0] || localParticipant?.id : null;
+      const stripIds = focusedId ? [localParticipant?.id, ...remoteIds].filter(
+        (id) => !!id && id !== focusedId
+      ) : [];
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        remoteParticipantWatchers,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-1 flex-col", children: [
+          statusBanner,
+          /* @__PURE__ */ jsxRuntime.jsx(FloatingReactions_default, { reactions: floatingReactions }),
+          isGroup && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-1 px-4 pt-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Grid view",
+                onClick: () => setGroupView("grid"),
+                className: cn(
+                  "flex size-8 items-center justify-center rounded-lg transition-colors",
+                  groupView === "grid" ? "bg-white/15 text-white" : "text-white/50 hover:text-white/80"
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGrid, { size: 16 })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Speaker view",
+                onClick: () => setGroupView("speaker"),
+                className: cn(
+                  "flex size-8 items-center justify-center rounded-lg transition-colors",
+                  groupView === "speaker" ? "bg-white/15 text-white" : "text-white/50 hover:text-white/80"
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Rows3, { size: 16 })
+              }
+            )
+          ] }),
+          focusedId ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-3 overflow-y-auto p-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ParticipantView_default,
+              {
+                sdk,
+                participantId: focusedId,
+                isLocal: focusedId === localParticipant?.id,
+                fallbackName: peerName,
+                fallbackImage: peerAvatar,
+                isHandRaised: !!raisedHands[focusedId],
+                className: "min-h-[240px] flex-1"
+              }
+            ),
+            stripIds.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 overflow-x-auto", children: stripIds.map((id) => /* @__PURE__ */ jsxRuntime.jsx(
+              ParticipantView_default,
+              {
+                sdk,
+                participantId: id,
+                isLocal: id === localParticipant?.id,
+                fallbackName: peerName,
+                fallbackImage: peerAvatar,
+                isHandRaised: !!raisedHands[id],
+                className: "aspect-video h-20 min-h-0 w-32 shrink-0"
+              },
+              id
+            )) })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "grid flex-1 auto-rows-fr gap-3 overflow-y-auto p-4",
+              style: {
+                gridTemplateColumns: `repeat(${Math.min(
+                  Math.max(remoteIds.length + 1, 1),
+                  3
+                )}, minmax(0, 1fr))`
+              },
+              children: [
+                localParticipant?.id && /* @__PURE__ */ jsxRuntime.jsx(
+                  ParticipantView_default,
+                  {
+                    sdk,
+                    participantId: localParticipant.id,
+                    isLocal: true,
+                    isHandRaised: !!raisedHands[localParticipant.id]
+                  }
+                ),
+                remoteIds.map((id) => /* @__PURE__ */ jsxRuntime.jsx(
+                  ParticipantView_default,
+                  {
+                    sdk,
+                    participantId: id,
+                    fallbackName: peerName,
+                    fallbackImage: peerAvatar,
+                    isHandRaised: !!raisedHands[id]
+                  },
+                  id
+                ))
+              ]
+            }
+          ),
+          controls
+        ] })
+      ] });
+    };
+    MeetingView_default = MeetingView;
+  }
+});
+
+// src/call/CallSession.tsx
+var CallSession_exports = {};
+__export(CallSession_exports, {
+  default: () => CallSession_default
+});
+var CallSession, CallSession_default;
+var init_CallSession = __esm({
+  "src/call/CallSession.tsx"() {
+    init_useStore();
+    init_videosdk_loader();
+    init_MeetingView();
+    CallSession = ({
+      meetingId,
+      token,
+      mode,
+      peerName,
       peerAvatar,
+      isChatOpen,
+      onToggleChat,
       onError
     }) => {
       const [sdk, setSdk] = React11.useState(null);
@@ -5454,7 +5657,17 @@ var init_CallSession = __esm({
           token,
           reinitialiseMeetingOnConfigChange: false,
           joinWithoutUserInteraction: true,
-          children: /* @__PURE__ */ jsxRuntime.jsx(MeetingView_default, { sdk, mode, peerName, peerAvatar })
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            MeetingView_default,
+            {
+              sdk,
+              mode,
+              peerName,
+              peerAvatar,
+              isChatOpen,
+              onToggleChat
+            }
+          )
         }
       );
     };
@@ -5466,67 +5679,7 @@ var init_CallSession = __esm({
 init_useStore();
 init_api_service();
 init_socket_service2();
-
-// src/ui/tooltip.tsx
-init_utils2();
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Tooltip.Provider,
-    {
-      "data-slot": "tooltip-provider",
-      delayDuration,
-      ...props
-    }
-  );
-}
-function Tooltip({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Root, { "data-slot": "tooltip", ...props });
-}
-function TooltipTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
-}
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  showArrow = true,
-  arrowClassName,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    radixUi.Tooltip.Content,
-    {
-      "data-slot": "tooltip-content",
-      sideOffset,
-      className: cn(
-        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
-          radixUi.Tooltip.Arrow,
-          {
-            className: cn(
-              "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]",
-              arrowClassName
-            )
-          }
-        ) : null
-      ]
-    }
-  ) });
-}
-
-// src/chat/ChatContext.tsx
+init_tooltip();
 init_utils2();
 
 // src/config/chat-endpoints.ts
@@ -6447,11 +6600,353 @@ var useCallDuration = (startedAt) => {
   const pad = (n) => String(n).padStart(2, "0");
   return hours > 0 ? `${hours}:${pad(minutes)}:${pad(seconds)}` : `${pad(minutes)}:${pad(seconds)}`;
 };
+
+// src/call/CallChatPanel.tsx
+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;
+  }
+  reactDom.flushSync(apply);
+}
+
+// src/context/ChatThemeContext.tsx
+init_utils2();
+var ChatThemeContext = React11.createContext(null);
+var ChatThemeProvider = ({
+  children,
+  themeColor,
+  colorMode,
+  defaultColorMode = "light",
+  onColorModeChange,
+  showColorModeToggle = true
+}) => {
+  const isControlled = colorMode !== void 0;
+  const [internalMode, setInternalMode] = React11.useState(defaultColorMode);
+  const [isThemeTransitionReady, setIsThemeTransitionReady] = React11.useState(false);
+  const skipThemeTransitionRef = React11.useRef(true);
+  React11.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 = React11.useCallback(
+    (mode) => {
+      const apply = () => {
+        if (!isControlled) {
+          setInternalMode(mode);
+          saveChatColorMode(mode);
+        }
+        onColorModeChange?.(mode);
+      };
+      if (skipThemeTransitionRef.current) {
+        apply();
+        return;
+      }
+      withThemeTransition(apply);
+    },
+    [isControlled, onColorModeChange]
+  );
+  const toggleColorMode = React11.useCallback(() => {
+    setColorMode(resolvedMode === "dark" ? "light" : "dark");
+  }, [resolvedMode, setColorMode]);
+  const value = React11.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__ */ jsxRuntime.jsx(ChatThemeContext.Provider, { value, children });
+};
+var useChatTheme = () => {
+  const context = React11.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 = exports.useChatStore((s) => s.messagesByConversation[conversationId]);
+  const loggedUserDetails = exports.useChatStore((s) => s.loggedUserDetails);
+  const conversations = exports.useChatStore((s) => s.conversations);
+  const emitDmSend = exports.useChatStore((s) => s.emitDmSend);
+  const emitGroupMessageSend2 = exports.useChatStore((s) => s.emitGroupMessageSend);
+  const [text, setText] = React11.useState("");
+  const [optimistic, setOptimistic] = React11.useState([]);
+  const listEndRef = React11.useRef(null);
+  const loggedUserId = String(loggedUserDetails?._id || "");
+  const serverMessages = React11.useMemo(() => {
+    return (rawMessages || []).filter((m) => !m?.isSystemMessage && !m?.isDeletedForEveryone).map((m) => {
+      const senderId = String(m.sender?._id || m.sender || "");
+      return {
+        id: String(m._id || m.id || ""),
+        content: String(m.content || ""),
+        senderName: senderId === loggedUserId ? "You" : m.sender?.name || "Unknown",
+        isOwn: senderId === loggedUserId,
+        timestamp: m.createdAt || m.timestamp || (/* @__PURE__ */ new Date()).toISOString()
+      };
+    });
+  }, [rawMessages, loggedUserId]);
+  React11.useEffect(() => {
+    if (!optimistic.length) return;
+    setOptimistic(
+      (prev) => prev.filter(
+        (pending) => !serverMessages.some(
+          (real) => real.isOwn && real.content === pending.content
+        )
+      )
+    );
+  }, [serverMessages]);
+  const messages = React11.useMemo(
+    () => [...serverMessages, ...optimistic].sort(
+      (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
+    ),
+    [serverMessages, optimistic]
+  );
+  React11.useEffect(() => {
+    listEndRef.current?.scrollIntoView({ block: "end" });
+  }, [messages.length]);
+  const handleSend = () => {
+    const content = text.trim();
+    if (!content) return;
+    setText("");
+    setOptimistic((prev) => [
+      ...prev,
+      {
+        id: `pending-${Date.now()}`,
+        content,
+        senderName: "You",
+        isOwn: true,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        pending: true
+      }
+    ]);
+    const payload = {
+      tempId: `temp-${Date.now()}`,
+      sender: loggedUserId,
+      content,
+      type: "text",
+      conversationId
+    };
+    if (isGroupCall) {
+      emitGroupMessageSend2(payload);
+    } else {
+      const conversation = findConversationById(conversations, conversationId);
+      payload.receiver = getOtherParticipantId(conversation, loggedUserId);
+      emitDmSend(payload);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        scopeClassName,
+        "flex flex-col border-l border-(--chat-border) bg-(--chat-surface) text-(--chat-text)",
+        className
+      ),
+      style: themeStyles,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(chatSheetHeaderClass, "flex items-center justify-between"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: chatSheetTitleClass, children: "In-call chat" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(chatSheetBodyClass, "space-y-3"), children: [
+          messages.length === 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn("flex flex-col", message.isOwn ? "items-end" : "items-start"),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-0.5 text-[11px] font-medium text-(--chat-muted)", children: message.isOwn ? "You" : message.senderName }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { ref: listEndRef })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-t border-(--chat-border) p-3", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Send, { size: 16 })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var CallChatPanel_default = CallChatPanel;
 var CallSession2 = React11__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 conversationId = exports.useCallStore((s) => s.conversationId);
   const meetingId = exports.useCallStore((s) => s.meetingId);
   const token = exports.useCallStore((s) => s.token);
   const error = exports.useCallStore((s) => s.error);
@@ -6463,112 +6958,111 @@ var CallOverlay = () => {
   const reset = exports.useCallStore((s) => s.reset);
   const notifyServerCallFailed = exports.useCallStore((s) => s.notifyServerCallFailed);
   const [sessionError, setSessionError] = React11.useState(null);
+  const [isChatOpen, setIsChatOpen] = React11.useState(false);
   const secondsLeft = useRingCountdown(uiStatus === "ringing-out", callId);
   const duration = useCallDuration(callStartedAt);
   React11.useEffect(() => {
     setSessionError(null);
+    setIsChatOpen(false);
   }, [callId]);
   React11.useEffect(() => {
     if (sessionError) notifyServerCallFailed();
   }, [sessionError, notifyServerCallFailed]);
   const isOpen = uiStatus !== "idle" && uiStatus !== "incoming";
-  if (!isOpen || typeof document === "undefined") return null;
+  if (!isOpen) return null;
   const displayError = error || sessionError;
   const peerName = peer?.name || caller?.name || "";
   const peerAvatar = peer?.avatar || caller?.profileImage || void 0;
-  const isVideo = mode === "video";
-  return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        style: {
-          position: "fixed",
-          inset: 0,
-          width: "100vw",
-          height: "100vh",
-          zIndex: 2147483647
-        },
-        className: "flex flex-col overflow-hidden bg-gradient-to-b from-neutral-900 via-neutral-950 to-black text-white",
-        children: displayError ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-4 p-6 text-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-sm text-sm text-white/80", children: displayError }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "secondary", onClick: reset, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16, className: "mr-1" }),
-            " Close"
-          ] })
-        ] }) : uiStatus === "in-call" && meetingId && token && mode ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-3 text-sm text-white/70", children: [
-            isGroupCall && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { size: 14, className: "text-white/50" }),
-            peerName && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-white/90", children: peerName }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-white/30", children: "\xB7" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: duration })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            React11__namespace.default.Suspense,
-            {
-              fallback: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-3 text-white/80", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-8 animate-spin" }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: "Loading call\u2026" })
-              ] }),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                CallSession2,
-                {
-                  meetingId,
-                  token,
-                  mode,
-                  peerName,
-                  peerAvatar,
-                  onError: setSessionError
-                }
-              )
-            }
-          )
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-6 p-6 text-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
-            uiStatus === "ringing-out" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inline-flex size-32 animate-ping rounded-full bg-white/10" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "absolute inline-flex size-32 animate-ping rounded-full bg-white/5",
-                  style: { animationDelay: "0.6s" }
-                }
-              )
-            ] }),
-            peerName ? /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "relative size-28 ring-4 ring-white/10", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: peerAvatar, alt: peerName }),
-              /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "bg-neutral-700 text-3xl font-medium text-white", children: peerName.charAt(0).toUpperCase() })
-            ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex size-28 items-center justify-center rounded-full bg-white/10", children: isVideo ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { size: 36 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Phone, { size: 36 }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            peerName && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center justify-center gap-1.5 text-xl font-semibold tracking-tight", children: [
-              isGroupCall && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { size: 16, className: "text-white/50" }),
-              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"
-            ] })
+  const isVideo = mode === "video";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-40 flex flex-col overflow-hidden bg-gradient-to-b from-neutral-900 via-neutral-950 to-black text-white", children: displayError ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-4 p-6 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-sm text-sm text-white/80", children: displayError }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "secondary", onClick: reset, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16, className: "mr-1" }),
+      " Close"
+    ] })
+  ] }) : uiStatus === "in-call" && meetingId && token && mode && conversationId ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col min-h-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center justify-center gap-2 px-4 py-3 text-sm text-white/70", children: [
+      isGroupCall && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { size: 14, className: "text-white/50" }),
+      peerName && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-white/90", children: peerName }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-white/30", children: "\xB7" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: duration })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        React11__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" })
           ] }),
-          uiStatus === "ringing-out" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex flex-col items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: "size-16 rounded-full bg-red-600 text-white shadow-lg shadow-red-600/30 transition-transform hover:scale-105 hover:bg-red-500 active:scale-95",
-                "aria-label": "Cancel call",
-                onClick: cancelCall,
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PhoneOff, { size: 24 })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-white/60", children: "Cancel" })
-          ] })
-        ] })
-      }
-    ),
-    document.body
-  );
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            CallSession2,
+            {
+              meetingId,
+              token,
+              mode,
+              peerName,
+              peerAvatar,
+              isChatOpen,
+              onToggleChat: () => setIsChatOpen((v) => !v),
+              onError: setSessionError
+            }
+          )
+        }
+      ),
+      isChatOpen && /* @__PURE__ */ jsxRuntime.jsx(
+        CallChatPanel_default,
+        {
+          conversationId,
+          isGroupCall,
+          onClose: () => setIsChatOpen(false),
+          className: "hidden w-80 shrink-0 sm:flex"
+        }
+      )
+    ] })
+  ] }) : /* @__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.jsxs("p", { className: "flex items-center justify-center gap-1.5 text-xl font-semibold tracking-tight", children: [
+        isGroupCall && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { size: 16, className: "text-white/50" }),
+        peerName
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-sm text-white/60", children: [
+        uiStatus === "creating" && "Starting call\u2026",
+        uiStatus === "ringing-out" && `${isVideo ? "Video calling" : "Calling"}\u2026 \xB7 ${secondsLeft}s`,
+        uiStatus === "joining" && "Connecting\u2026"
+      ] })
+    ] }),
+    uiStatus === "ringing-out" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex flex-col items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "size-16 rounded-full bg-red-600 text-white shadow-lg shadow-red-600/30 transition-transform hover:scale-105 hover:bg-red-500 active:scale-95",
+          "aria-label": "Cancel call",
+          onClick: cancelCall,
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PhoneOff, { size: 24 })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-white/60", children: "Cancel" })
+    ] })
+  ] }) });
 };
 var CallOverlay_default = CallOverlay;
 
@@ -6904,162 +7398,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;
-  }
-  reactDom.flushSync(apply);
-}
-
-// src/context/ChatThemeContext.tsx
-init_utils2();
-var ChatThemeContext = React11.createContext(null);
-var ChatThemeProvider = ({
-  children,
-  themeColor,
-  colorMode,
-  defaultColorMode = "light",
-  onColorModeChange,
-  showColorModeToggle = true
-}) => {
-  const isControlled = colorMode !== void 0;
-  const [internalMode, setInternalMode] = React11.useState(defaultColorMode);
-  const [isThemeTransitionReady, setIsThemeTransitionReady] = React11.useState(false);
-  const skipThemeTransitionRef = React11.useRef(true);
-  React11.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 = React11.useCallback(
-    (mode) => {
-      const apply = () => {
-        if (!isControlled) {
-          setInternalMode(mode);
-          saveChatColorMode(mode);
-        }
-        onColorModeChange?.(mode);
-      };
-      if (skipThemeTransitionRef.current) {
-        apply();
-        return;
-      }
-      withThemeTransition(apply);
-    },
-    [isControlled, onColorModeChange]
-  );
-  const toggleColorMode = React11.useCallback(() => {
-    setColorMode(resolvedMode === "dark" ? "light" : "dark");
-  }, [resolvedMode, setColorMode]);
-  const value = React11.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__ */ jsxRuntime.jsx(ChatThemeContext.Provider, { value, children });
-};
-var useChatTheme = () => {
-  const context = React11.useContext(ChatThemeContext);
-  if (!context) {
-    throw new Error("useChatTheme must be used within ChatThemeProvider");
-  }
-  return context;
-};
 var ChatSheetContent = ({
   className,
   style,
@@ -7115,6 +7453,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 = exports.useCallStore((s) => s.uiStatus);
   const callId = exports.useCallStore((s) => s.callId);
@@ -7137,6 +7535,12 @@ var IncomingCallDialog = ({ ringtoneUrl }) => {
       el.pause();
     }
   }, [isOpen, ringtoneUrl]);
+  React11.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;
@@ -7404,7 +7808,7 @@ var Chat = ({
     }),
     [uiConfig.components, uiConfig.classNames, uiConfig.features]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(ChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(ChatCustomizationProvider, { customization, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chat-container-root flex h-full min-h-0 w-full flex-1 flex-col overflow-hidden", children: isSessionReady ? /* @__PURE__ */ jsxRuntime.jsxs(ChatEffectiveSettingsProvider, { enabled: true, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(ChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(ChatCustomizationProvider, { customization, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chat-container-root relative flex h-full min-h-0 w-full flex-1 flex-col overflow-hidden", children: isSessionReady ? /* @__PURE__ */ jsxRuntime.jsxs(ChatEffectiveSettingsProvider, { enabled: true, children: [
     children,
     /* @__PURE__ */ jsxRuntime.jsx(CallLayer_default, {})
   ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center text-gray-400 font-bold", children: "Initializing session..." }) }) }) }) });
@@ -7861,6 +8265,7 @@ init_avatar();
 
 // src/chat/ChatThemeToggle.tsx
 init_button();
+init_tooltip();
 init_utils2();
 var ChatThemeToggle = ({ className }) => {
   const { isDark, toggleColorMode } = useChatTheme();
@@ -7918,6 +8323,7 @@ var buildLoggedUserProfile = (loggedUserDetails) => ({
 
 // src/chat/sidebar/create-chat-dialog/CreateChatDialog.tsx
 init_button();
+init_tooltip();
 init_utils2();
 
 // src/chat/sidebar/create-chat-dialog/useCreateChatDialog.ts
@@ -8368,6 +8774,9 @@ function GroupCreateTab({
     ) })
   ] });
 }
+
+// src/chat/components/AdminPermissionTooltip.tsx
+init_tooltip();
 init_utils2();
 function AdminPermissionTooltip({
   disabled,
@@ -8994,6 +9403,7 @@ var LoggedUserSettingsContent_default = LoggedUserSettingsContent;
 
 // src/chat/sidebar/LoggedUserSettingsTrigger.tsx
 init_button();
+init_tooltip();
 init_utils2();
 var LoggedUserSettingsTrigger = ({
   onClick,
@@ -10660,6 +11070,7 @@ init_call_store();
 init_utils2();
 
 // src/chat/header/header-right/OptionsMenuItem.tsx
+init_tooltip();
 init_utils2();
 function OptionsMenuItem({
   icon: Icon,
@@ -11706,28 +12117,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) {
@@ -16342,6 +16731,7 @@ init_avatar();
 
 // src/chat/message/MessageReactions.tsx
 init_utils2();
+init_tooltip();
 var MessageReactions = ({
   groupedReactions,
   reactions,
@@ -20754,6 +21144,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;
@@ -20976,6 +21367,36 @@ var ForegroundPushBridge = ({ onPush }) => {
       window.removeEventListener(PUSH_CHANGED_EVENT, onPushChanged);
     };
   }, []);
+  React11.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);
+    };
+  }, []);
   React11.useEffect(() => {
     const onOpen = (event) => {
       const id = String(