@realtimexsco/live-chat 1.5.4 → 1.5.5

package/dist/index.cjs

@@ -4639,6 +4639,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",
@@ -4837,7 +4898,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 +4955,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 +4979,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 +5025,46 @@ 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
     }) => {
       const {
         toggleMic,
@@ -4996,73 +5081,80 @@ var init_CallControls = __esm({
         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()
             }
           ),
           /* @__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: 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("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, 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.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, 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 +5165,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 +5235,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 +5259,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 +5282,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 RemoteWebcamWatcher, MeetingView, MeetingView_default;
 var init_MeetingView = __esm({
   "src/call/MeetingView.tsx"() {
     init_ParticipantView();
@@ -5193,11 +5301,37 @@ var init_MeetingView = __esm({
     init_useCallReactions();
     init_call_store();
     init_utils2();
-    MeetingView = ({ sdk, mode, peerName, peerAvatar }) => {
+    RemoteWebcamWatcher = ({
+      sdk,
+      participantId,
+      onChange
+    }) => {
+      const { webcamOn } = sdk.useParticipant(participantId);
+      React11.useEffect(() => {
+        onChange(participantId, webcamOn);
+        return () => onChange(participantId, false);
+      }, [participantId, webcamOn]);
+      return null;
+    };
+    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 +5347,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 +5364,47 @@ var init_MeetingView = __esm({
         (id) => id !== localParticipant?.id
       );
       const isGroup = remoteIds.length > 1;
+      const webcamWatchers = remoteIds.map((id) => /* @__PURE__ */ jsxRuntime.jsx(RemoteWebcamWatcher, { sdk, participantId: id, onChange: handleRemoteWebcamChange }, id));
       const controls = /* @__PURE__ */ jsxRuntime.jsx(
         CallControls_default,
         {
           sdk,
           onReaction: sendReaction,
           isHandRaised,
-          onToggleRaiseHand: toggleRaiseHand
+          onToggleRaiseHand: toggleRaiseHand,
+          isChatOpen,
+          onToggleChat
         }
       );
+      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: [
+          webcamWatchers,
+          /* @__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,14 +5414,137 @@ 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
+            ] }),
+            controls
+          ] })
+        ] });
+      }
+      const anyRemoteWebcamOn = Object.values(remoteWebcamOn).some(Boolean);
+      const showVideoGrid = mode === "video" || localWebcamOn || anyRemoteWebcamOn;
+      if (!showVideoGrid) {
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          webcamWatchers,
+          /* @__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: [
+        webcamWatchers,
+        /* @__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;
@@ -5412,6 +5568,8 @@ var init_CallSession = __esm({
       mode,
       peerName,
       peerAvatar,
+      isChatOpen,
+      onToggleChat,
       onError
     }) => {
       const [sdk, setSdk] = React11.useState(null);
@@ -5454,7 +5612,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 +5634,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 +6555,153 @@ 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();
+var CallChatPanel = ({ conversationId, isGroupCall, onClose, className }) => {
+  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("flex flex-col border-l border-white/10 bg-neutral-950/95", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-white/10 px-4 py-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-white/90", 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-white/60 transition-colors hover:bg-white/10 hover:text-white",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-3 overflow-y-auto px-4 py-3", children: [
+      messages.length === 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col", message.isOwn && "items-end"), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-0.5 text-[11px] font-medium text-white/40", children: message.isOwn ? "You" : message.senderName }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { ref: listEndRef })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-t border-white/10 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: "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"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ 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 +6713,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 })
+  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" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            React11__namespace.default.Suspense,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            CallSession2,
             {
-              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
-                }
-              )
+              meetingId,
+              token,
+              mode,
+              peerName,
+              peerAvatar,
+              isChatOpen,
+              onToggleChat: () => setIsChatOpen((v) => !v),
+              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"
-            ] })
-          ] }),
-          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
-  );
+        }
+      ),
+      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;
 
@@ -7404,7 +7653,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 +8110,7 @@ init_avatar();
 
 // src/chat/ChatThemeToggle.tsx
 init_button();
+init_tooltip();
 init_utils2();
 var ChatThemeToggle = ({ className }) => {
   const { isDark, toggleColorMode } = useChatTheme();
@@ -7918,6 +8168,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 +8619,9 @@ function GroupCreateTab({
     ) })
   ] });
 }
+
+// src/chat/components/AdminPermissionTooltip.tsx
+init_tooltip();
 init_utils2();
 function AdminPermissionTooltip({
   disabled,
@@ -8994,6 +9248,7 @@ var LoggedUserSettingsContent_default = LoggedUserSettingsContent;
 
 // src/chat/sidebar/LoggedUserSettingsTrigger.tsx
 init_button();
+init_tooltip();
 init_utils2();
 var LoggedUserSettingsTrigger = ({
   onClick,
@@ -10660,6 +10915,7 @@ init_call_store();
 init_utils2();
 
 // src/chat/header/header-right/OptionsMenuItem.tsx
+init_tooltip();
 init_utils2();
 function OptionsMenuItem({
   icon: Icon,
@@ -16342,6 +16598,7 @@ init_avatar();
 
 // src/chat/message/MessageReactions.tsx
 init_utils2();
+init_tooltip();
 var MessageReactions = ({
   groupedReactions,
   reactions,