@100mslive/roomkit-react 0.3.22-alpha.1 → 0.3.22-alpha.3

package/dist/chunk-2J5WS52X.js

@@ -0,0 +1,2595 @@
+import {
+  StopRecordingInSheet
+} from "./chunk-QKXHQ6DV.js";
+import {
+  EmojiReaction
+} from "./chunk-LO4BXA4G.js";
+import {
+  useMyMetadata
+} from "./chunk-RTWNTT77.js";
+import {
+  Accordion,
+  ActionTile,
+  Button,
+  ChangeNameModal,
+  Checkbox,
+  Dialog,
+  DialogContent,
+  DialogDropdownTrigger,
+  DialogRow,
+  DialogSelect,
+  Ee,
+  HorizontalDivider,
+  Input,
+  Label,
+  Loading,
+  NoiseCancellation,
+  PictureInPicture,
+  RadioGroup,
+  RoleChangeModal,
+  SettingsModal_default,
+  Sheet,
+  Switch,
+  TextArea,
+  formatBytes,
+  trackSourceOptions,
+  trackTypeOptions,
+  useDropdownSelection,
+  useIsSidepaneTypeOpen,
+  usePIPWindow,
+  usePollViewToggle,
+  useSheetToggle,
+  useSidepaneToggle
+} from "./chunk-26D5FDBW.js";
+import {
+  Text
+} from "./chunk-JKWX7W4K.js";
+import {
+  Dropdown,
+  ToastManager,
+  useDropdownList,
+  useFilteredRoles,
+  useLandscapeHLSStream,
+  useMobileHLSStream,
+  useRecordingHandler
+} from "./chunk-BQOT4DK7.js";
+import {
+  Box,
+  Flex
+} from "./chunk-7QZJMUHM.js";
+import {
+  IconButton,
+  IconButton_default,
+  Tooltip,
+  getFormattedCount,
+  usePinnedTrack,
+  useRoomLayoutConferencingScreen,
+  useRoomLayoutHeader,
+  useSetAppDataByKey,
+  useSetIsCaptionEnabled,
+  useSetSubscribedChatSelector,
+  useSetUiSettings,
+  useShowPolls
+} from "./chunk-ENHSO6YN.js";
+import {
+  APP_DATA,
+  CAPTION_TOAST,
+  CHAT_SELECTOR,
+  DEFAULT_PORTAL_CONTAINER,
+  RTMP_RECORD_DEFAULT_RESOLUTION,
+  RTMP_RECORD_RESOLUTION_MAX,
+  RTMP_RECORD_RESOLUTION_MIN,
+  SHEET_OPTIONS,
+  SIDE_PANE_OPTIONS,
+  UI_SETTINGS,
+  __async,
+  __publicField,
+  __spreadValues,
+  config,
+  getCssText,
+  init_define_process_env,
+  isMacOS,
+  styled
+} from "./chunk-TBXRX6MK.js";
+
+// src/Prebuilt/components/MoreSettings/MoreSettings.tsx
+init_define_process_env();
+import React20 from "react";
+import { useMedia as useMedia4 } from "react-use";
+
+// src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx
+init_define_process_env();
+import React18, { Fragment as Fragment2, useState as useState12 } from "react";
+import { HMSHLSPlayer } from "@100mslive/hls-player";
+import { match as match2 } from "ts-pattern";
+import {
+  HMSTranscriptionMode as HMSTranscriptionMode2,
+  selectAppData,
+  selectIsTranscriptionAllowedByMode,
+  selectIsTranscriptionEnabled as selectIsTranscriptionEnabled2,
+  selectLocalPeerID as selectLocalPeerID4,
+  useHMSActions as useHMSActions12,
+  useHMSStore as useHMSStore11
+} from "@100mslive/react-sdk";
+import {
+  BrbIcon,
+  CheckIcon as CheckIcon2,
+  HamburgerMenuIcon,
+  InfoIcon as InfoIcon2,
+  OpenCaptionIcon,
+  PipIcon as PipIcon2,
+  SettingsIcon
+} from "@100mslive/react-icons";
+
+// src/Prebuilt/components/PIP/index.jsx
+init_define_process_env();
+import React2 from "react";
+
+// src/Prebuilt/components/PIP/PIPComponent.tsx
+init_define_process_env();
+import React, { useCallback, useEffect, useState } from "react";
+import { selectPeers, selectTracksMap, useHMSActions, useHMSVanillaStore } from "@100mslive/react-sdk";
+import { PipIcon } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/PIP/SetupMediaSession.js
+init_define_process_env();
+import { selectIsLocalAudioEnabled, selectIsLocalVideoEnabled } from "@100mslive/react-sdk";
+var SetupMediaSession = class {
+  constructor() {
+    __publicField(this, "setup", (actions, store) => {
+      this.actions = actions;
+      this.store = store;
+      this.initState();
+      this.setUpHandlers();
+    });
+    __publicField(this, "initState", () => {
+      var _a, _b, _c, _d;
+      const isMicActive = this.store.getState(selectIsLocalAudioEnabled);
+      const isCamActive = this.store.getState(selectIsLocalVideoEnabled);
+      (_b = (_a = navigator.mediaSession) == null ? void 0 : _a.setMicrophoneActive) == null ? void 0 : _b.call(_a, isMicActive);
+      (_d = (_c = navigator.mediaSession) == null ? void 0 : _c.setCameraActive) == null ? void 0 : _d.call(_c, isCamActive);
+      this.store.subscribe((isMicActive2) => {
+        var _a2, _b2;
+        (_b2 = (_a2 = navigator.mediaSession) == null ? void 0 : _a2.setMicrophoneActive) == null ? void 0 : _b2.call(_a2, isMicActive2);
+      }, selectIsLocalAudioEnabled);
+      this.store.subscribe((isCamActive2) => {
+        var _a2, _b2;
+        (_b2 = (_a2 = navigator.mediaSession) == null ? void 0 : _a2.setCameraActive) == null ? void 0 : _b2.call(_a2, isCamActive2);
+      }, selectIsLocalVideoEnabled);
+    });
+    __publicField(this, "toggleMic", () => __async(this, null, function* () {
+      console.log("toggle mic clicked in pip");
+      const current = this.store.getState(selectIsLocalAudioEnabled);
+      yield this.actions.setLocalAudioEnabled(!current);
+    }));
+    __publicField(this, "toggleCam", () => __async(this, null, function* () {
+      console.log("toggle cam clicked in pip");
+      const current = this.store.getState(selectIsLocalVideoEnabled);
+      yield this.actions.setLocalVideoEnabled(!current);
+    }));
+    __publicField(this, "leave", () => {
+      console.log("leave called from pip");
+      this.actions.leave();
+    });
+    __publicField(this, "setUpHandlers", () => {
+      if (navigator.mediaSession) {
+        try {
+          navigator.mediaSession.setActionHandler("togglemicrophone", this.toggleMic);
+          navigator.mediaSession.setActionHandler("togglecamera", this.toggleCam);
+          navigator.mediaSession.setActionHandler("hangup", this.leave);
+        } catch (err) {
+          console.error("error in setting media session handlers", err);
+        }
+      }
+    });
+  }
+};
+var MediaSession = new SetupMediaSession();
+
+// src/Prebuilt/components/PIP/PIPComponent.tsx
+var PIPComponent = ({ content = null }) => {
+  const [isPipOn, setIsPipOn] = useState(PictureInPicture.isOn());
+  const hmsActions = useHMSActions();
+  const store = useHMSVanillaStore();
+  const onPipToggle = useCallback(() => {
+    if (!isPipOn) {
+      PictureInPicture.start(hmsActions, setIsPipOn).catch((err) => console.error("error in starting pip", err));
+      MediaSession.setup(hmsActions, store);
+    } else {
+      PictureInPicture.stop().catch((err) => console.error("error in stopping pip", err));
+    }
+  }, [hmsActions, isPipOn, store]);
+  if (!PictureInPicture.isSupported()) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, content ? /* @__PURE__ */ React.createElement(Flex, { css: { w: "100%" }, onClick: () => onPipToggle(), "data-testid": "pip_btn" }, content) : /* @__PURE__ */ React.createElement(Tooltip, { title: `${isPipOn ? "Deactivate" : "Activate"} picture in picture view` }, /* @__PURE__ */ React.createElement(IconButton_default, { active: !isPipOn, key: "pip", onClick: () => onPipToggle(), "data-testid": "pip_btn" }, /* @__PURE__ */ React.createElement(PipIcon, null))));
+};
+var ActivatedPIP = () => {
+  const store = useHMSVanillaStore();
+  const pinnedTrack = usePinnedTrack();
+  useEffect(() => {
+    function subscribeToStore() {
+      return store.subscribe((tracksMap) => {
+        let pipPeers = store.getState(selectPeers);
+        if (pinnedTrack) {
+          pipPeers = pipPeers.filter((peer) => pinnedTrack.peerId === peer.id);
+        }
+        PictureInPicture.updatePeersAndTracks(pipPeers, tracksMap).catch((err) => {
+          console.error("error in updating pip", err);
+        });
+      }, selectTracksMap);
+    }
+    let unsubscribe = PictureInPicture.isOn() ? subscribeToStore() : void 0;
+    PictureInPicture.listenToStateChange((isOn) => {
+      if (isOn) {
+        if (!unsubscribe) {
+          unsubscribe = subscribeToStore();
+        }
+      } else {
+        unsubscribe == null ? void 0 : unsubscribe();
+        unsubscribe = void 0;
+      }
+    });
+    return () => {
+      unsubscribe == null ? void 0 : unsubscribe();
+      unsubscribe = void 0;
+    };
+  }, [pinnedTrack, store]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null);
+};
+var PIPComponent_default = PIPComponent;
+
+// src/Prebuilt/components/PIP/index.jsx
+var PIP = ({ content = null }) => {
+  return /* @__PURE__ */ React2.createElement(PIPComponent_default, { content });
+};
+
+// src/Prebuilt/components/PIP/PIPChat.tsx
+init_define_process_env();
+import React7, { useCallback as useCallback6, useEffect as useEffect4, useMemo as useMemo2, useState as useState5 } from "react";
+import {
+  selectHMSMessages as selectHMSMessages2,
+  selectLocalPeerID as selectLocalPeerID2,
+  selectPeerNameByID as selectPeerNameByID3,
+  selectSessionStore as selectSessionStore5,
+  selectUnreadHMSMessagesCount as selectUnreadHMSMessagesCount2,
+  useHMSStore as useHMSStore5
+} from "@100mslive/react-sdk";
+import { SendIcon } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/Chat/ChatBody.tsx
+init_define_process_env();
+import React6, { Fragment, useCallback as useCallback5, useEffect as useEffect3, useLayoutEffect, useMemo, useRef, useState as useState4 } from "react";
+import { useMedia as useMedia2 } from "react-use";
+import AutoSizer from "react-virtualized-auto-sizer";
+import { VariableSizeList } from "react-window";
+import {
+  selectHMSMessages,
+  selectLocalPeerID,
+  selectLocalPeerName as selectLocalPeerName2,
+  selectLocalPeerRoleName,
+  selectPeerNameByID as selectPeerNameByID2,
+  selectSessionStore as selectSessionStore4,
+  selectUnreadHMSMessagesCount,
+  useHMSActions as useHMSActions5,
+  useHMSStore as useHMSStore4,
+  useHMSVanillaStore as useHMSVanillaStore3
+} from "@100mslive/react-sdk";
+import { SolidPinIcon } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/Chat/ChatActions.tsx
+init_define_process_env();
+import React4, { useCallback as useCallback4, useState as useState2 } from "react";
+import { selectLocalPeerName, selectPermissions, useHMSActions as useHMSActions4, useHMSStore as useHMSStore2 } from "@100mslive/react-sdk";
+import {
+  CopyIcon,
+  CrossCircleIcon,
+  CrossIcon,
+  EyeCloseIcon,
+  PeopleRemoveIcon,
+  PinIcon,
+  ReplyGroupIcon,
+  ReplyIcon,
+  VerticalMenuIcon
+} from "@100mslive/react-icons";
+
+// src/Prebuilt/components/Chat/MwebChatOption.tsx
+init_define_process_env();
+import React3 from "react";
+var MwebChatOption = ({
+  icon,
+  text,
+  onClick,
+  color = "$on_surface_high"
+}) => {
+  return /* @__PURE__ */ React3.createElement(Flex, { align: "center", css: { w: "100%", color, cursor: "pointer", gap: "$4", p: "$8" }, onClick }, icon, /* @__PURE__ */ React3.createElement(Text, { variant: "sm", css: { color, fontWeight: "$semiBold" } }, text));
+};
+
+// src/Prebuilt/components/hooks/useChatBlacklist.ts
+init_define_process_env();
+import { useCallback as useCallback2 } from "react";
+import { selectLocalPeer, selectSessionStore, useHMSActions as useHMSActions2, useHMSStore } from "@100mslive/react-sdk";
+var useChatBlacklist = (sessionStoreKey) => {
+  const hmsActions = useHMSActions2();
+  const blacklistedIDs = useHMSStore(selectSessionStore(sessionStoreKey));
+  const blacklistItem = useCallback2(
+    (blacklistID) => __async(void 0, null, function* () {
+      yield hmsActions.sessionStore.set(sessionStoreKey, [...blacklistedIDs || [], blacklistID]).catch((err) => ToastManager.addToast({ title: err.description }));
+    }),
+    [hmsActions, sessionStoreKey, blacklistedIDs]
+  );
+  return { blacklistItem, blacklistedIDs };
+};
+var useIsPeerBlacklisted = ({ local = false, peerCustomerUserId = "" }) => {
+  const localPeer = useHMSStore(selectLocalPeer);
+  const blacklistedPeerIDs = useHMSStore(selectSessionStore("chatPeerBlacklist" /* CHAT_PEER_BLACKLIST */)) || [];
+  return blacklistedPeerIDs == null ? void 0 : blacklistedPeerIDs.includes(local ? localPeer == null ? void 0 : localPeer.customerUserId : peerCustomerUserId);
+};
+
+// src/Prebuilt/components/hooks/usePinnedMessages.ts
+init_define_process_env();
+import { useCallback as useCallback3 } from "react";
+import {
+  selectPeerNameByID,
+  selectSessionStore as selectSessionStore2,
+  useHMSActions as useHMSActions3,
+  useHMSVanillaStore as useHMSVanillaStore2
+} from "@100mslive/react-sdk";
+var usePinnedMessages = () => {
+  const hmsActions = useHMSActions3();
+  const vanillaStore = useHMSVanillaStore2();
+  const setPinnedMessages = useCallback3(
+    (message, pinnedBy) => __async(void 0, null, function* () {
+      const peerName = vanillaStore.getState(selectPeerNameByID(message == null ? void 0 : message.sender)) || (message == null ? void 0 : message.senderName);
+      const newPinnedMessage = { text: "", id: message.id, pinnedBy };
+      if (message && peerName) {
+        newPinnedMessage["text"] = `${peerName}: ${message.message}`;
+      } else if (message) {
+        newPinnedMessage["text"] = message.message;
+      }
+      const pinnedMessages = vanillaStore.getState(selectSessionStore2("pinnedMessages" /* PINNED_MESSAGES */)) || [];
+      if (!(pinnedMessages == null ? void 0 : pinnedMessages.find((pinnedMessage) => pinnedMessage.id === newPinnedMessage.id))) {
+        yield hmsActions.sessionStore.set("pinnedMessages" /* PINNED_MESSAGES */, [...pinnedMessages, newPinnedMessage].slice(-3)).catch((err) => ToastManager.addToast({ title: err.description }));
+      }
+    }),
+    [hmsActions, vanillaStore]
+  );
+  const removePinnedMessage = useCallback3(
+    (indexToRemove) => __async(void 0, null, function* () {
+      const pinnedMessages = vanillaStore.getState(selectSessionStore2("pinnedMessages" /* PINNED_MESSAGES */)) || [];
+      if (pinnedMessages[indexToRemove]) {
+        yield hmsActions.sessionStore.set(
+          "pinnedMessages" /* PINNED_MESSAGES */,
+          pinnedMessages.filter((_, index) => index !== indexToRemove)
+        ).catch((err) => ToastManager.addToast({ title: err.description }));
+      }
+    }),
+    [hmsActions, vanillaStore]
+  );
+  const unpinBlacklistedMessages = useCallback3(
+    (blacklistedMessageIDSet) => __async(void 0, null, function* () {
+      const pinnedMessages = vanillaStore.getState(selectSessionStore2("pinnedMessages" /* PINNED_MESSAGES */)) || [];
+      const filteredPinnedMessages = pinnedMessages == null ? void 0 : pinnedMessages.filter(
+        (pinnedMessage) => !(blacklistedMessageIDSet == null ? void 0 : blacklistedMessageIDSet.has(pinnedMessage.id))
+      );
+      yield hmsActions.sessionStore.set("pinnedMessages" /* PINNED_MESSAGES */, filteredPinnedMessages).catch((err) => ToastManager.addToast({ title: err.description }));
+    }),
+    [hmsActions, vanillaStore]
+  );
+  return { setPinnedMessages, removePinnedMessage, unpinBlacklistedMessages };
+};
+
+// src/Prebuilt/components/Chat/ChatActions.tsx
+var iconStyle = { height: "1.125rem", width: "1.125rem" };
+var tooltipBoxCSS = {
+  fontSize: "$xs",
+  backgroundColor: "$surface_default",
+  p: "$1 $5",
+  fontWeight: "$regular",
+  borderRadius: "$3"
+};
+var ChatActions = ({
+  showPinAction,
+  onReply,
+  onReplyGroup,
+  showReply,
+  message,
+  sentByLocalPeer,
+  isMobile,
+  openSheet,
+  setOpenSheet
+}) => {
+  var _a, _b;
+  const { elements } = useRoomLayoutConferencingScreen();
+  const { can_hide_message = false, can_block_user = false } = ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.real_time_controls) || {};
+  const { roles_whitelist = [] } = (elements == null ? void 0 : elements.chat) || {};
+  const [open, setOpen] = useState2(false);
+  const actions = useHMSActions4();
+  const canRemoveOthers = (_b = useHMSStore2(selectPermissions)) == null ? void 0 : _b.removeOthers;
+  const { blacklistItem: blacklistPeer } = useChatBlacklist("chatPeerBlacklist" /* CHAT_PEER_BLACKLIST */);
+  const localPeerName = useHMSStore2(selectLocalPeerName);
+  const { setPinnedMessages, unpinBlacklistedMessages } = usePinnedMessages();
+  const { blacklistItem: blacklistMessage, blacklistedIDs: blacklistedMessageIDs } = useChatBlacklist(
+    "chatMessageBlacklist" /* CHAT_MESSAGE_BLACKLIST */
+  );
+  const isSenderBlocked = useIsPeerBlacklisted({ peerCustomerUserId: message.senderUserId });
+  const updatePinnedMessages = useCallback4(
+    (messageID = "") => {
+      const blacklistedMessageIDSet = /* @__PURE__ */ new Set([...blacklistedMessageIDs || [], messageID]);
+      unpinBlacklistedMessages(blacklistedMessageIDSet);
+    },
+    [blacklistedMessageIDs, unpinBlacklistedMessages]
+  );
+  const copyMessageContent = useCallback4(() => {
+    try {
+      navigator == null ? void 0 : navigator.clipboard.writeText(message.message);
+      ToastManager.addToast({
+        title: "Message copied successfully"
+      });
+    } catch (e) {
+      console.log(e);
+      ToastManager.addToast({
+        title: "Could not copy message"
+      });
+    }
+  }, [message]);
+  const options = {
+    reply: {
+      text: "Reply privately",
+      tooltipText: "Reply privately",
+      icon: /* @__PURE__ */ React4.createElement(ReplyIcon, { style: iconStyle }),
+      onClick: onReply,
+      show: showReply
+    },
+    replyGroup: {
+      text: "Reply to group",
+      tooltipText: "Reply to group",
+      icon: /* @__PURE__ */ React4.createElement(ReplyGroupIcon, { style: iconStyle }),
+      onClick: onReplyGroup,
+      show: !!message.senderRole && roles_whitelist.includes(message.senderRole)
+    },
+    pin: {
+      text: "Pin message",
+      tooltipText: "Pin",
+      icon: /* @__PURE__ */ React4.createElement(PinIcon, { style: iconStyle }),
+      onClick: () => setPinnedMessages(message, localPeerName || ""),
+      show: showPinAction
+    },
+    copy: {
+      text: "Copy text",
+      tooltipText: "Copy",
+      icon: /* @__PURE__ */ React4.createElement(CopyIcon, { style: iconStyle }),
+      onClick: copyMessageContent,
+      show: true
+    },
+    hide: {
+      text: message.recipientPeer ? "Hide for both" : "Hide for everyone",
+      icon: /* @__PURE__ */ React4.createElement(EyeCloseIcon, { style: iconStyle }),
+      onClick: () => __async(void 0, null, function* () {
+        blacklistMessage(message.id);
+        updatePinnedMessages(message.id);
+      }),
+      show: !!can_hide_message
+    },
+    block: {
+      text: "Block from chat",
+      icon: /* @__PURE__ */ React4.createElement(CrossCircleIcon, { style: iconStyle }),
+      onClick: () => __async(void 0, null, function* () {
+        if (message.senderUserId) {
+          blacklistPeer(message.senderUserId);
+        }
+      }),
+      color: "$alert_error_default",
+      show: !!can_block_user && !sentByLocalPeer && !isSenderBlocked
+    },
+    remove: {
+      text: "Remove participant",
+      icon: /* @__PURE__ */ React4.createElement(PeopleRemoveIcon, { style: iconStyle }),
+      color: "$alert_error_default",
+      show: !!canRemoveOthers && !sentByLocalPeer,
+      onClick: () => __async(void 0, null, function* () {
+        if (!message.sender) {
+          return;
+        }
+        try {
+          yield actions.removePeer(message.sender, "");
+        } catch (error) {
+          ToastManager.addToast({ title: error.message, variant: "error" });
+        }
+      })
+    }
+  };
+  if (isMobile) {
+    return /* @__PURE__ */ React4.createElement(Sheet.Root, { open: openSheet, onOpenChange: setOpenSheet }, /* @__PURE__ */ React4.createElement(Sheet.Content, { css: { bg: "$surface_default", pb: "$14" }, onClick: (e) => setOpenSheet(false, e) }, /* @__PURE__ */ React4.createElement(
+      Sheet.Title,
+      {
+        css: {
+          display: "flex",
+          color: "$on_surface_high",
+          w: "100%",
+          justifyContent: "space-between",
+          mt: "$8",
+          fontSize: "$md",
+          px: "$10",
+          pb: "$8",
+          borderBottom: "1px solid $border_bright",
+          alignItems: "center"
+        }
+      },
+      "Message options",
+      /* @__PURE__ */ React4.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: (e) => setOpenSheet(false, e) }, /* @__PURE__ */ React4.createElement(CrossIcon, null))
+    ), Object.keys(options).map((optionKey) => {
+      const option = options[optionKey];
+      return option.show ? /* @__PURE__ */ React4.createElement(
+        MwebChatOption,
+        {
+          key: optionKey,
+          text: option.text,
+          icon: option.icon,
+          onClick: option.onClick,
+          color: option == null ? void 0 : option.color
+        }
+      ) : null;
+    })));
+  }
+  return /* @__PURE__ */ React4.createElement(Dropdown.Root, { open, onOpenChange: setOpen, css: { "@md": { display: "none" } } }, /* @__PURE__ */ React4.createElement(
+    Flex,
+    {
+      className: "chat_actions",
+      css: {
+        background: "$surface_bright",
+        borderRadius: "$1",
+        p: "$2",
+        opacity: open ? 1 : 0,
+        position: "absolute",
+        top: 0,
+        right: 0,
+        zIndex: 1,
+        "@md": { opacity: 1 }
+      }
+    },
+    options.reply.show ? /* @__PURE__ */ React4.createElement(Tooltip, { boxCss: tooltipBoxCSS, title: options.reply.tooltipText }, /* @__PURE__ */ React4.createElement(IconButton, { "data-testid": "reply_message_btn", onClick: options.reply.onClick }, options.reply.icon)) : null,
+    options.replyGroup.show ? /* @__PURE__ */ React4.createElement(Tooltip, { boxCss: tooltipBoxCSS, title: options.replyGroup.tooltipText }, /* @__PURE__ */ React4.createElement(IconButton, { "data-testid": "reply_group_message_btn", onClick: options.replyGroup.onClick }, options.replyGroup.icon)) : null,
+    options.pin.show ? /* @__PURE__ */ React4.createElement(Tooltip, { boxCss: tooltipBoxCSS, title: options.pin.tooltipText }, /* @__PURE__ */ React4.createElement(IconButton, { "data-testid": "pin_message_btn", onClick: options.pin.onClick }, options.pin.icon)) : null,
+    options.copy.show ? /* @__PURE__ */ React4.createElement(Tooltip, { boxCss: tooltipBoxCSS, title: options.copy.tooltipText }, /* @__PURE__ */ React4.createElement(IconButton, { onClick: options.copy.onClick, "data-testid": "copy_message_btn" }, /* @__PURE__ */ React4.createElement(CopyIcon, { style: iconStyle }))) : null,
+    options.block.show || options.hide.show || options.remove.show ? /* @__PURE__ */ React4.createElement(Tooltip, { boxCss: tooltipBoxCSS, title: "More actions" }, /* @__PURE__ */ React4.createElement(Dropdown.Trigger, { asChild: true }, /* @__PURE__ */ React4.createElement(IconButton, null, /* @__PURE__ */ React4.createElement(VerticalMenuIcon, { style: iconStyle })))) : null
+  ), /* @__PURE__ */ React4.createElement(Dropdown.Portal, null, /* @__PURE__ */ React4.createElement(
+    Dropdown.Content,
+    {
+      sideOffset: 5,
+      align: "end",
+      css: { width: "$48", backgroundColor: "$surface_bright", py: "$0", border: "1px solid $border_bright" }
+    },
+    options.hide.show ? /* @__PURE__ */ React4.createElement(Dropdown.Item, { "data-testid": "hide_message_btn", onClick: options.hide.onClick }, options.hide.icon, /* @__PURE__ */ React4.createElement(Text, { variant: "sm", css: { ml: "$4", fontWeight: "$semiBold" } }, options.hide.text)) : null,
+    options.block.show ? /* @__PURE__ */ React4.createElement(
+      Dropdown.Item,
+      {
+        "data-testid": "block_peer_btn",
+        onClick: options.block.onClick,
+        css: { color: options.block.color }
+      },
+      options.block.icon,
+      /* @__PURE__ */ React4.createElement(Text, { variant: "sm", css: { ml: "$4", color: "inherit", fontWeight: "$semiBold" } }, options.block.text)
+    ) : null,
+    options.remove.show ? /* @__PURE__ */ React4.createElement(
+      Dropdown.Item,
+      {
+        "data-testid": "remove_peer_btn",
+        onClick: options.remove.onClick,
+        css: { color: options.remove.color }
+      },
+      options.remove.icon,
+      /* @__PURE__ */ React4.createElement(Text, { variant: "sm", css: { ml: "$4", color: "inherit", fontWeight: "$semiBold" } }, options.remove.text)
+    ) : null
+  )));
+};
+
+// src/Prebuilt/components/Chat/EmptyChat.tsx
+init_define_process_env();
+import React5 from "react";
+import { useMedia } from "react-use";
+
+// src/Prebuilt/images/empty-chat.svg
+var empty_chat_default = "./empty-chat.svg";
+
+// src/Prebuilt/components/Chat/EmptyChat.tsx
+var EmptyChat = () => {
+  var _a;
+  const { elements } = useRoomLayoutConferencingScreen();
+  const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
+  const isMobile = useMedia(config.media.md);
+  const canSendMessages = elements.chat && (elements.chat.public_chat_enabled || elements.chat.private_chat_enabled || elements.chat.roles_whitelist && elements.chat.roles_whitelist.length) && !isLocalPeerBlacklisted;
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeStream = useLandscapeHLSStream();
+  const streaming = isMobileHLSStream || isLandscapeStream;
+  if (isMobile && ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) && !streaming)
+    return /* @__PURE__ */ React5.createElement(React5.Fragment, null);
+  return /* @__PURE__ */ React5.createElement(
+    Flex,
+    {
+      css: {
+        width: "100%",
+        flex: "1 1 0",
+        textAlign: "center",
+        px: "$4"
+      },
+      align: "center",
+      justify: "center"
+    },
+    /* @__PURE__ */ React5.createElement(Box, null, /* @__PURE__ */ React5.createElement(Box, { css: { m: "0 auto", mt: "$4", "@media (max-height: 575px)": { display: "none" } } }, /* @__PURE__ */ React5.createElement("img", { src: empty_chat_default, style: { display: "inline" }, alt: "Empty Chat", height: 132, width: 185 })), /* @__PURE__ */ React5.createElement(Text, { variant: "h5", css: { mt: "$8", c: "$on_surface_high" } }, canSendMessages ? "Start a conversation" : "No messages yet"), canSendMessages ? /* @__PURE__ */ React5.createElement(
+      Text,
+      {
+        variant: "sm",
+        css: { mt: "$4", maxWidth: "80%", textAlign: "center", mx: "auto", c: "$on_surface_medium" }
+      },
+      "There are no messages here yet. Start a conversation by sending a message."
+    ) : null)
+  );
+};
+
+// src/Prebuilt/components/hooks/usePinnedBy.tsx
+init_define_process_env();
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { selectSessionStore as selectSessionStore3, useHMSStore as useHMSStore3 } from "@100mslive/react-sdk";
+var usePinnedBy = (messageId) => {
+  const pinnedMessages = useHMSStore3(selectSessionStore3("pinnedMessages" /* PINNED_MESSAGES */));
+  const [pinnedBy, setPinnedBy] = useState3("");
+  useEffect2(() => {
+    let match4 = "";
+    pinnedMessages == null ? void 0 : pinnedMessages.forEach((pinnedMessage) => {
+      if (pinnedMessage.id === messageId) {
+        match4 = pinnedMessage.pinnedBy;
+      }
+    });
+    setPinnedBy(match4);
+  }, [messageId, pinnedMessages]);
+  return pinnedBy;
+};
+
+// src/Prebuilt/components/Chat/utils.ts
+init_define_process_env();
+var formatTime = (date) => {
+  if (!(date instanceof Date)) {
+    return "";
+  }
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const suffix = hours > 11 ? "PM" : "AM";
+  return `${hours < 10 ? "0" : ""}${hours}:${minutes < 10 ? "0" : ""}${minutes} ${suffix}`;
+};
+var CHAT_MESSAGE_LIMIT = 2e3;
+
+// src/Prebuilt/components/Chat/ChatBody.tsx
+var rowHeights = {};
+var listInstance = null;
+function getRowHeight(index) {
+  var _a;
+  return ((_a = rowHeights[index]) == null ? void 0 : _a.size) || 72;
+}
+var setRowHeight = (index, id, size) => {
+  var _a, _b;
+  if (((_a = rowHeights[index]) == null ? void 0 : _a.id) === id && ((_b = rowHeights[index]) == null ? void 0 : _b.size) === size) {
+    return;
+  }
+  listInstance == null ? void 0 : listInstance.resetAfterIndex(Math.max(index - 1, 0));
+  Object.assign(rowHeights, { [index]: { size, id } });
+};
+var getMessageBackgroundColor = (messageType, selectedPeerID, selectedRole, isOverlay) => {
+  if (messageType && !(selectedPeerID || selectedRole)) {
+    return isOverlay ? "rgba(0, 0, 0, 0.64)" : "$surface_default";
+  }
+  return "";
+};
+var MessageTypeContainer = ({ left, right }) => {
+  return /* @__PURE__ */ React6.createElement(
+    Flex,
+    {
+      align: "center",
+      css: {
+        ml: "$2",
+        mr: "$4",
+        gap: "$space$2",
+        flexWrap: "nowrap"
+      }
+    },
+    left && /* @__PURE__ */ React6.createElement(
+      Text,
+      {
+        variant: "xs",
+        as: "span",
+        css: {
+          color: "$on_surface_medium",
+          textTransform: "capitalize",
+          fontWeight: "$regular",
+          whiteSpace: "nowrap"
+        }
+      },
+      left
+    ),
+    right && /* @__PURE__ */ React6.createElement(
+      Text,
+      {
+        as: "span",
+        variant: "overline",
+        css: {
+          color: "$on_surface_medium",
+          fontWeight: "$regular",
+          whiteSpace: "nowrap"
+        }
+      },
+      right
+    )
+  );
+};
+var MessageType = ({
+  roles,
+  hasCurrentUserSent,
+  receiver
+}) => {
+  const peerName = useHMSStore4(selectPeerNameByID2(receiver));
+  const localPeerRoleName = useHMSStore4(selectLocalPeerRoleName);
+  if (receiver) {
+    return /* @__PURE__ */ React6.createElement(MessageTypeContainer, { left: hasCurrentUserSent ? `${peerName ? `to ${peerName}` : ""}` : "to You", right: "(DM)" });
+  }
+  if (roles && roles.length) {
+    return /* @__PURE__ */ React6.createElement(MessageTypeContainer, { left: `to ${hasCurrentUserSent ? roles[0] : localPeerRoleName}`, right: "(Group)" });
+  }
+  return null;
+};
+var URL_REGEX = /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
+var Link = styled("a", {
+  color: "$primary_default",
+  wordBreak: "break-word",
+  "&:hover": {
+    textDecoration: "underline"
+  }
+});
+var AnnotisedMessage = ({ message, length }) => {
+  if (!message) {
+    return /* @__PURE__ */ React6.createElement(Fragment, null);
+  }
+  return /* @__PURE__ */ React6.createElement(Fragment, null, message.trim().split(/(\s)/).map(
+    (part) => URL_REGEX.test(part) ? /* @__PURE__ */ React6.createElement(Link, { href: part, key: part, target: "_blank", rel: "noopener noreferrer" }, part.slice(0, length)) : part.slice(0, length)
+  ));
+};
+var getMessageType = ({ roles, receiver }) => {
+  if (roles && roles.length > 0) {
+    return "role";
+  }
+  return receiver ? "private" : "";
+};
+var SenderName = styled(Text, {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  width: "100%",
+  minWidth: 0,
+  color: "$on_surface_high",
+  fontWeight: "$semiBold"
+});
+var ChatMessage = React6.memo(
+  ({ index, style = {}, message }) => {
+    var _a, _b, _c;
+    const { elements } = useRoomLayoutConferencingScreen();
+    const rowRef = useRef(null);
+    const isMobile = useMedia2(config.media.md);
+    const isPrivateChatEnabled = !!((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.private_chat_enabled);
+    const isOverlay = ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.is_overlay) && isMobile;
+    const localPeerId = useHMSStore4(selectLocalPeerID);
+    const [selectedRole, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
+    const [selectedPeer, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
+    const messageType = getMessageType({
+      roles: message.recipientRoles,
+      receiver: message.recipientPeer
+    });
+    const [openSheet, setOpenSheetBare] = useState4(false);
+    const showPinAction = !!((_c = elements == null ? void 0 : elements.chat) == null ? void 0 : _c.allow_pinning_messages);
+    const showReply = message.sender !== selectedPeer.id && message.sender !== localPeerId && isPrivateChatEnabled;
+    useLayoutEffect(() => {
+      if (rowRef.current) {
+        setRowHeight(index, message.id, rowRef.current.clientHeight);
+      }
+    }, [index, message.id]);
+    const setOpenSheet = (value, e) => {
+      e == null ? void 0 : e.stopPropagation();
+      setOpenSheetBare(value);
+    };
+    return /* @__PURE__ */ React6.createElement(
+      Box,
+      {
+        css: {
+          mb: "$5",
+          pr: "$10",
+          mt: "$4",
+          "&:not(:hover} .chat_actions": { display: "none" },
+          "&:hover .chat_actions": { display: "flex", opacity: 1 }
+        },
+        style
+      },
+      /* @__PURE__ */ React6.createElement(
+        Flex,
+        {
+          ref: rowRef,
+          align: "center",
+          css: {
+            flexWrap: "wrap",
+            position: "relative",
+            // Theme independent color, token should not be used for transparent chat
+            background: getMessageBackgroundColor(messageType, selectedPeer.id, selectedRole, !!isOverlay),
+            r: "$1",
+            p: "$4",
+            userSelect: "none",
+            "@md": {
+              cursor: "pointer"
+            },
+            "&:hover": {
+              background: "linear-gradient(277deg, $surface_default 0%, $surface_dim 60.87%)"
+            }
+          },
+          "data-testid": "chat_msg",
+          onClick: (e) => {
+            if (isMobile) {
+              setOpenSheet(true, e);
+            }
+          }
+        },
+        /* @__PURE__ */ React6.createElement(PinnedBy, { messageId: message.id, index, rowRef }),
+        /* @__PURE__ */ React6.createElement(
+          Text,
+          {
+            css: {
+              color: isOverlay ? "#FFF" : "$on_surface_high",
+              fontWeight: "$semiBold",
+              display: "flex",
+              alignItems: "center",
+              alignSelf: "stretch",
+              width: "100%"
+            },
+            as: "div"
+          },
+          /* @__PURE__ */ React6.createElement(
+            Flex,
+            {
+              align: "baseline",
+              css: {
+                flexWrap: "nowrap",
+                maxWidth: "calc(100% - 10ch)",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              }
+            },
+            message.senderName === "You" || !message.senderName ? /* @__PURE__ */ React6.createElement(
+              SenderName,
+              {
+                as: "span",
+                variant: "sub2",
+                css: { color: isOverlay ? "#FFF" : "$on_surface_high", fontWeight: "$semiBold" }
+              },
+              message.senderName || "Anonymous"
+            ) : /* @__PURE__ */ React6.createElement(Tooltip, { title: message.senderName, side: "top", align: "start", boxCss: { zIndex: 50 } }, /* @__PURE__ */ React6.createElement(
+              SenderName,
+              {
+                as: "span",
+                variant: "sub2",
+                css: { color: isOverlay ? "#FFF" : "$on_surface_high", fontWeight: "$semiBold" }
+              },
+              message.sender === localPeerId ? `${message.senderName} (You)` : message.senderName
+            )),
+            /* @__PURE__ */ React6.createElement(
+              MessageType,
+              {
+                hasCurrentUserSent: message.sender === localPeerId,
+                receiver: message.recipientPeer,
+                roles: message.recipientRoles
+              }
+            )
+          ),
+          !isOverlay ? /* @__PURE__ */ React6.createElement(
+            Text,
+            {
+              as: "span",
+              variant: "caption",
+              css: {
+                color: "$on_surface_medium",
+                flexShrink: 0,
+                position: "absolute",
+                right: 0,
+                zIndex: 1,
+                mr: "$4",
+                p: "$2"
+              }
+            },
+            formatTime(message.time)
+          ) : null,
+          /* @__PURE__ */ React6.createElement(
+            ChatActions,
+            {
+              showPinAction,
+              message,
+              sentByLocalPeer: message.sender === localPeerId,
+              onReply: () => {
+                setRoleSelector("");
+                setPeerSelector({ id: message.sender, name: message.senderName });
+              },
+              onReplyGroup: () => {
+                if (message.senderRole) {
+                  setRoleSelector(message.senderRole);
+                  setPeerSelector({});
+                }
+              },
+              showReply,
+              isMobile,
+              openSheet,
+              setOpenSheet
+            }
+          )
+        ),
+        /* @__PURE__ */ React6.createElement(
+          Text,
+          {
+            variant: "sm",
+            css: {
+              w: "100%",
+              mt: "$2",
+              wordBreak: "break-word",
+              whiteSpace: "pre-wrap",
+              userSelect: "all",
+              color: isOverlay ? "#FFF" : "$on_surface_high"
+            },
+            onClick: (e) => {
+              setOpenSheet(true, e);
+            }
+          },
+          /* @__PURE__ */ React6.createElement(AnnotisedMessage, { message: message.message })
+        )
+      )
+    );
+  }
+);
+var MessageWrapper = React6.memo(
+  ({ index, style, data }) => {
+    return /* @__PURE__ */ React6.createElement(ChatMessage, { style, index, key: data[index].id, message: data[index] });
+  }
+);
+var VirtualizedChatMessages = React6.forwardRef(({ messages, scrollToBottom }, listRef) => {
+  const hmsActions = useHMSActions5();
+  const itemKey = useCallback5((index, data) => {
+    return data[index].id;
+  }, []);
+  useEffect3(() => {
+    requestAnimationFrame(() => scrollToBottom(1));
+  }, [scrollToBottom]);
+  return /* @__PURE__ */ React6.createElement(
+    Box,
+    {
+      css: {
+        mr: "-$10",
+        h: "100%"
+      }
+    },
+    /* @__PURE__ */ React6.createElement(
+      AutoSizer,
+      {
+        style: {
+          width: "90%"
+        }
+      },
+      ({ height, width }) => /* @__PURE__ */ React6.createElement(
+        VariableSizeList,
+        {
+          ref: (node) => {
+            if (node) {
+              listRef.current = node;
+              listInstance = node;
+            }
+          },
+          itemCount: messages.length,
+          itemSize: getRowHeight,
+          itemData: messages,
+          width,
+          height,
+          style: {
+            overflowX: "hidden"
+          },
+          itemKey,
+          onItemsRendered: ({ visibleStartIndex, visibleStopIndex }) => {
+            for (let i = visibleStartIndex; i <= visibleStopIndex; i++) {
+              if (!messages[i].read) {
+                hmsActions.setMessageRead(true, messages[i].id);
+              }
+            }
+          }
+        },
+        MessageWrapper
+      )
+    )
+  );
+});
+var ChatBody = React6.forwardRef(
+  ({ scrollToBottom }, listRef) => {
+    const messages = useHMSStore4(selectHMSMessages);
+    const blacklistedMessageIDs = useHMSStore4(selectSessionStore4("chatMessageBlacklist" /* CHAT_MESSAGE_BLACKLIST */));
+    const filteredMessages = useMemo(() => {
+      const blacklistedMessageIDSet = new Set(blacklistedMessageIDs || []);
+      return (messages == null ? void 0 : messages.filter((message) => message.type === "chat" && !blacklistedMessageIDSet.has(message.id))) || [];
+    }, [blacklistedMessageIDs, messages]);
+    const vanillaStore = useHMSVanillaStore3();
+    const rerenderOnFirstMount = useRef(false);
+    useEffect3(() => {
+      const unsubscribe = vanillaStore.subscribe(() => {
+        if (!listRef.current) {
+          return;
+        }
+        const outerElement = listRef.current._outerRef;
+        if (outerElement && outerElement.clientHeight + outerElement.scrollTop + outerElement.offsetTop >= outerElement.scrollHeight) {
+          requestAnimationFrame(() => scrollToBottom(1));
+        }
+      }, selectUnreadHMSMessagesCount);
+      return unsubscribe;
+    }, [vanillaStore, listRef, scrollToBottom]);
+    useEffect3(() => {
+      if (filteredMessages.length > 0 && (listRef == null ? void 0 : listRef.current) && !rerenderOnFirstMount.current) {
+        rerenderOnFirstMount.current = true;
+        listRef.current.resetAfterIndex(0);
+      }
+    }, [listRef, filteredMessages]);
+    return filteredMessages.length === 0 ? /* @__PURE__ */ React6.createElement(EmptyChat, null) : /* @__PURE__ */ React6.createElement(VirtualizedChatMessages, { messages: filteredMessages, ref: listRef, scrollToBottom });
+  }
+);
+var PinnedBy = ({
+  messageId,
+  index,
+  rowRef
+}) => {
+  const pinnedBy = usePinnedBy(messageId);
+  const localPeerName = useHMSStore4(selectLocalPeerName2);
+  useLayoutEffect(() => {
+    if (rowRef == null ? void 0 : rowRef.current) {
+      if (pinnedBy) {
+        rowRef.current.style.background = "linear-gradient(277deg, var(--hms-ui-colors-surface_default) 0%, var(--hms-ui-colors-surface_dim) 60.87%)";
+      } else {
+        rowRef.current.style.background = "";
+      }
+      setRowHeight(index, messageId, rowRef == null ? void 0 : rowRef.current.clientHeight);
+    }
+  }, [index, messageId, pinnedBy, rowRef]);
+  if (!pinnedBy) {
+    return null;
+  }
+  return /* @__PURE__ */ React6.createElement(Flex, { align: "center", css: { gap: "$2", mb: "$2", color: "$on_surface_low" } }, /* @__PURE__ */ React6.createElement(SolidPinIcon, { height: 12, width: 12 }), /* @__PURE__ */ React6.createElement(Text, { variant: "xs", css: { color: "inherit" } }, "Pinned by ", localPeerName === pinnedBy ? "you" : pinnedBy));
+};
+
+// src/Prebuilt/components/PIP/PIPChat.tsx
+var PIPChat = () => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  const messages = useHMSStore5(selectHMSMessages2);
+  const localPeerID = useHMSStore5(selectLocalPeerID2);
+  const count = useHMSStore5(selectUnreadHMSMessagesCount2);
+  const [unreadMessageCount, setUnreadMessageCount] = useState5(0);
+  const getSenderName = useCallback6(
+    (senderName, senderID) => {
+      const slicedName = senderName.length > 10 ? senderName.slice(0, 10) + "..." : senderName;
+      return slicedName + (senderID === localPeerID ? " (You)" : "");
+    },
+    [localPeerID]
+  );
+  useEffect4(() => {
+    const timeoutId = setTimeout(() => {
+      setUnreadMessageCount(count);
+    }, 100);
+    return () => clearTimeout(timeoutId);
+  }, [count]);
+  const blacklistedMessageIDs = useHMSStore5(selectSessionStore5("chatMessageBlacklist" /* CHAT_MESSAGE_BLACKLIST */));
+  const filteredMessages = useMemo2(() => {
+    const blacklistedMessageIDSet = new Set(blacklistedMessageIDs || []);
+    return (messages == null ? void 0 : messages.filter((message) => message.type === "chat" && !blacklistedMessageIDSet.has(message.id))) || [];
+  }, [blacklistedMessageIDs, messages]);
+  const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy = "" } = useHMSStore5(selectSessionStore5("chatState" /* CHAT_STATE */)) || {};
+  const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
+  const { elements } = useRoomLayoutConferencingScreen();
+  const message_placeholder = ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.message_placeholder) || "Send a message";
+  const canSendChatMessages = !!((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.public_chat_enabled) || !!((_d = (_c = elements == null ? void 0 : elements.chat) == null ? void 0 : _c.roles_whitelist) == null ? void 0 : _d.length) || !!((_e = elements == null ? void 0 : elements.chat) == null ? void 0 : _e.private_chat_enabled);
+  const getChatStatus = useCallback6(() => {
+    if (isLocalPeerBlacklisted)
+      return "You've been blocked from sending messages";
+    if (!isChatEnabled)
+      return `Chat has been paused by ${chatStateUpdatedBy.peerId === localPeerID ? "you" : chatStateUpdatedBy == null ? void 0 : chatStateUpdatedBy.userName}`;
+    return message_placeholder;
+  }, [
+    chatStateUpdatedBy.peerId,
+    chatStateUpdatedBy == null ? void 0 : chatStateUpdatedBy.userName,
+    isChatEnabled,
+    isLocalPeerBlacklisted,
+    localPeerID,
+    message_placeholder
+  ]);
+  return /* @__PURE__ */ React7.createElement("div", { style: { height: "100%" } }, /* @__PURE__ */ React7.createElement(
+    Box,
+    {
+      id: "chat-container",
+      css: {
+        bg: "$surface_dim",
+        overflowY: "auto",
+        // Subtracting height of footer
+        h: canSendChatMessages ? "calc(100% - 87px)" : "100%",
+        position: "relative"
+      }
+    },
+    unreadMessageCount ? /* @__PURE__ */ React7.createElement(
+      Box,
+      {
+        id: "new-message-notif",
+        style: {
+          position: "fixed",
+          bottom: "76px",
+          right: "4px"
+        }
+      },
+      /* @__PURE__ */ React7.createElement(
+        Text,
+        {
+          variant: "xs",
+          css: { cursor: "pointer" },
+          style: { color: "white", background: "gray", padding: "4px", borderRadius: "4px" }
+        },
+        unreadMessageCount === 1 ? "New message" : `${unreadMessageCount} new messages`
+      )
+    ) : "",
+    filteredMessages.length === 0 ? /* @__PURE__ */ React7.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          width: "100%",
+          alignItems: "center",
+          justifyContent: "center"
+        }
+      },
+      /* @__PURE__ */ React7.createElement(Text, { variant: "h5", css: { mt: "$8", c: "$on_surface_high" } }, canSendChatMessages ? "Start a conversation" : "No messages yet"),
+      canSendChatMessages ? /* @__PURE__ */ React7.createElement(Text, { variant: "sm", style: { maxWidth: "80%", textAlign: "center", marginTop: "4px" } }, "There are no messages here yet. Start a conversation by sending a message.") : ""
+    ) : filteredMessages.map((message) => /* @__PURE__ */ React7.createElement(Box, { className: "pip-message", key: message.id, id: message.id, style: { padding: "8px 0.75rem" } }, /* @__PURE__ */ React7.createElement(Flex, { style: { width: "100%", alignItems: "center", justifyContent: "between" } }, /* @__PURE__ */ React7.createElement(
+      Text,
+      {
+        style: { display: "flex", justifyContent: "between", width: "100%", alignItems: "center" },
+        css: {
+          color: "$on_surface_high",
+          fontWeight: "$semiBold"
+        }
+      },
+      /* @__PURE__ */ React7.createElement(Flex, { style: { flexGrow: 1, gap: "2px", alignItems: "center" } }, message.senderName === "You" || !message.senderName ? /* @__PURE__ */ React7.createElement(Text, { as: "span", variant: "sub2", css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, message.senderName || "Anonymous") : /* @__PURE__ */ React7.createElement(Tooltip, { title: message.senderName, side: "top", align: "start" }, /* @__PURE__ */ React7.createElement(Text, { as: "span", variant: "sub2", css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, getSenderName(message.senderName, message == null ? void 0 : message.sender))), /* @__PURE__ */ React7.createElement(
+        MessageTitle,
+        {
+          localPeerID,
+          recipientPeer: message.recipientPeer,
+          recipientRoles: message.recipientRoles
+        }
+      )),
+      /* @__PURE__ */ React7.createElement(
+        Text,
+        {
+          variant: "xs",
+          css: {
+            color: "$on_surface_medium",
+            flexShrink: 0,
+            p: "$2",
+            whitespace: "nowrap"
+          }
+        },
+        formatTime(message.time)
+      )
+    )), /* @__PURE__ */ React7.createElement(
+      Text,
+      {
+        variant: "sm",
+        css: {
+          w: "100%",
+          mt: "$2",
+          wordBreak: "break-word",
+          whiteSpace: "pre-wrap",
+          userSelect: "all",
+          color: "$on_surface_high"
+        }
+      },
+      /* @__PURE__ */ React7.createElement(AnnotisedMessage, { message: message.message })
+    ))),
+    /* @__PURE__ */ React7.createElement("div", { id: "marker", style: { height: filteredMessages.length ? "1px" : 0 } })
+  ), canSendChatMessages && /* @__PURE__ */ React7.createElement(Box, { css: { bg: "$surface_dim" } }, /* @__PURE__ */ React7.createElement(Flex, { css: { px: "$4", pb: "3px", gap: "$2", alignItems: "center" } }, /* @__PURE__ */ React7.createElement(Text, { variant: "caption" }, "To:"), /* @__PURE__ */ React7.createElement(Flex, { css: { bg: "$primary_bright", color: "$on_primary_high", r: "$2" } }, /* @__PURE__ */ React7.createElement(
+    "select",
+    {
+      id: "selector",
+      style: {
+        background: "inherit",
+        color: "inherit",
+        border: "none",
+        outline: "none",
+        borderRadius: "4px",
+        padding: "0 2px"
+      },
+      defaultValue: ((_f = elements.chat) == null ? void 0 : _f.public_chat_enabled) ? "Everyone" : (_h = (_g = elements.chat) == null ? void 0 : _g.roles_whitelist) == null ? void 0 : _h[0]
+    },
+    (_j = (_i = elements.chat) == null ? void 0 : _i.roles_whitelist) == null ? void 0 : _j.map((role) => /* @__PURE__ */ React7.createElement("option", { key: role, value: role }, role)),
+    ((_k = elements.chat) == null ? void 0 : _k.public_chat_enabled) ? /* @__PURE__ */ React7.createElement("option", { value: "Everyone" }, "Everyone") : ""
+  ))), /* @__PURE__ */ React7.createElement(
+    Flex,
+    {
+      align: "center",
+      css: {
+        bg: "$surface_default",
+        minHeight: "$16",
+        width: "100%",
+        py: "$6",
+        pl: "$4",
+        boxSizing: "border-box",
+        gap: "$2",
+        r: "$2"
+      }
+    },
+    /* @__PURE__ */ React7.createElement(
+      TextArea,
+      {
+        id: "chat-input",
+        maxLength: CHAT_MESSAGE_LIMIT,
+        disabled: !isChatEnabled || isLocalPeerBlacklisted,
+        rows: 1,
+        css: {
+          w: "100%",
+          c: "$on_surface_high",
+          p: "0.75rem 0.75rem !important",
+          border: "none",
+          resize: "none"
+        },
+        placeholder: getChatStatus(),
+        required: true,
+        autoComplete: "off",
+        "aria-autocomplete": "none"
+      }
+    ),
+    /* @__PURE__ */ React7.createElement(
+      IconButton_default,
+      {
+        id: "send-btn",
+        disabled: !isChatEnabled || isLocalPeerBlacklisted,
+        title: getChatStatus(),
+        css: {
+          ml: "auto",
+          height: "max-content",
+          mr: "$4",
+          "&:hover": { c: "$on_surface_medium" }
+        },
+        "data-testid": "send_msg_btn"
+      },
+      /* @__PURE__ */ React7.createElement(SendIcon, null)
+    )
+  )));
+};
+var MessageTitle = ({
+  recipientPeer,
+  recipientRoles,
+  localPeerID
+}) => {
+  const peerName = useHMSStore5(selectPeerNameByID3(recipientPeer));
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, recipientRoles ? /* @__PURE__ */ React7.createElement(Text, { as: "span", variant: "sub2", css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, "to ", recipientRoles, " (Group)") : null, recipientPeer ? /* @__PURE__ */ React7.createElement(Text, { as: "span", variant: "sub2", css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, "to ", recipientPeer === localPeerID ? "You" : peerName, " (DM)") : null);
+};
+
+// src/Prebuilt/components/PIP/PIPChatOption.tsx
+init_define_process_env();
+import React8 from "react";
+import { ExternalLinkIcon } from "@100mslive/react-icons";
+var PIPChatOption = ({ openChat, showPIPChat }) => {
+  if (!showPIPChat) {
+    return /* @__PURE__ */ React8.createElement(React8.Fragment, null);
+  }
+  return /* @__PURE__ */ React8.createElement(Dropdown.Item, { onClick: openChat, "data-testid": "pip_chat_btn" }, /* @__PURE__ */ React8.createElement(ExternalLinkIcon, null), /* @__PURE__ */ React8.createElement(Text, { variant: "sm", css: { ml: "$4", color: "$on_surface_high" } }, "Pop out Chat"));
+};
+
+// src/Prebuilt/components/PIP/PIPWindow.tsx
+init_define_process_env();
+import { createPortal } from "react-dom";
+var PIPWindow = ({ pipWindow, children }) => {
+  pipWindow.document.body.style.margin = "0";
+  pipWindow.document.body.style.overflow = "clip";
+  return createPortal(children, pipWindow.document.body);
+};
+
+// src/Prebuilt/components/Settings/StartRecording.jsx
+init_define_process_env();
+import React10, { useState as useState7 } from "react";
+import { selectPermissions as selectPermissions2, useHMSActions as useHMSActions6, useHMSStore as useHMSStore6, useRecordingStreaming } from "@100mslive/react-sdk";
+import { AlertTriangleIcon } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/Streaming/ResolutionInput.jsx
+init_define_process_env();
+import React9, { useCallback as useCallback7, useState as useState6 } from "react";
+import { InfoIcon } from "@100mslive/react-icons";
+var ResolutionInput = ({ onResolutionChange, disabled, tooltipText, css, testId }) => {
+  const [resolution, setResolution] = useState6(RTMP_RECORD_DEFAULT_RESOLUTION);
+  const resolutionChangeHandler = useCallback7(
+    (event) => {
+      const { name, value } = event.target;
+      let width = name === "resWidth" ? Number(value) : resolution.width;
+      let height = name === "resHeight" ? Number(value) : resolution.height;
+      if (width === 0) {
+        width = null;
+      }
+      if (height === 0) {
+        height = null;
+      }
+      const newResolution = {
+        width: !isNaN(width) ? width : RTMP_RECORD_DEFAULT_RESOLUTION.width,
+        height: !isNaN(height) ? height : RTMP_RECORD_DEFAULT_RESOLUTION.height
+      };
+      setResolution(newResolution);
+    },
+    [resolution]
+  );
+  return /* @__PURE__ */ React9.createElement(DialogRow, { breakSm: true, css }, /* @__PURE__ */ React9.createElement(Flex, { gap: 1 }, /* @__PURE__ */ React9.createElement(Label, { css: { mb: "$8" } }, "Resolution"), tooltipText && /* @__PURE__ */ React9.createElement(Tooltip, { title: tooltipText }, /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement(InfoIcon, { color: "#B0C3DB" })))), /* @__PURE__ */ React9.createElement(
+    Flex,
+    {
+      justify: "between",
+      css: { width: !tooltipText ? "100%" : "70%", "@sm": { width: "100%" } },
+      gap: 2,
+      direction: "column"
+    },
+    /* @__PURE__ */ React9.createElement(Flex, { justify: "between", gap: 2 }, /* @__PURE__ */ React9.createElement(Flex, { direction: "column", css: { width: "50%" } }, /* @__PURE__ */ React9.createElement(Text, { variant: "xs" }, "Width"), /* @__PURE__ */ React9.createElement(
+      Input,
+      {
+        "data-testid": `${testId}_width`,
+        css: { width: "100%", mt: "$4" },
+        name: "resWidth",
+        value: resolution.width,
+        onChange: resolutionChangeHandler,
+        readOnly: disabled,
+        min: RTMP_RECORD_RESOLUTION_MIN,
+        max: RTMP_RECORD_RESOLUTION_MAX,
+        onBlur: () => onResolutionChange(resolution),
+        type: "number"
+      }
+    )), /* @__PURE__ */ React9.createElement(Flex, { direction: "column", css: { width: "50%" } }, /* @__PURE__ */ React9.createElement(Text, { variant: "xs" }, "Height"), /* @__PURE__ */ React9.createElement(
+      Input,
+      {
+        "data-testid": `${testId}_height`,
+        css: { width: "100%", mt: "$4" },
+        name: "resHeight",
+        value: resolution.height,
+        onChange: resolutionChangeHandler,
+        onBlur: () => onResolutionChange(resolution),
+        readOnly: disabled,
+        min: RTMP_RECORD_RESOLUTION_MIN,
+        max: RTMP_RECORD_RESOLUTION_MAX,
+        type: "number"
+      }
+    )))
+  ));
+};
+
+// src/Prebuilt/components/Settings/StartRecording.jsx
+var StartRecording = ({ open, onOpenChange }) => {
+  const permissions = useHMSStore6(selectPermissions2);
+  const [resolution, setResolution] = useState7(RTMP_RECORD_DEFAULT_RESOLUTION);
+  const { startRecording, recordingStarted } = useRecordingHandler();
+  const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming();
+  const hmsActions = useHMSActions6();
+  if (!(permissions == null ? void 0 : permissions.browserRecording) || isHLSRunning) {
+    return null;
+  }
+  if (isBrowserRecordingOn) {
+    return /* @__PURE__ */ React10.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React10.createElement(Dialog.Portal, null, /* @__PURE__ */ React10.createElement(
+      Dialog.Content,
+      {
+        css: {
+          width: "min(400px,80%)",
+          p: "$10",
+          bg: "#201617"
+        }
+      },
+      /* @__PURE__ */ React10.createElement(Dialog.Title, null, /* @__PURE__ */ React10.createElement(Flex, { gap: 2, css: { c: "$alert_error_default" } }, /* @__PURE__ */ React10.createElement(AlertTriangleIcon, null), /* @__PURE__ */ React10.createElement(Text, { css: { c: "inherit" }, variant: "h6" }, "End Recording"))),
+      /* @__PURE__ */ React10.createElement(Text, { variant: "sm", css: { c: "$on_surface_medium", my: "$8" } }, "Are you sure you want to end recording? You can\u2019t undo this action."),
+      /* @__PURE__ */ React10.createElement(Flex, { justify: "end", css: { mt: "$12" } }, /* @__PURE__ */ React10.createElement(Dialog.Close, { asChild: true }, /* @__PURE__ */ React10.createElement(Button, { outlined: true, css: { borderColor: "$secondary_bright", mr: "$4" } }, "Don't end")), /* @__PURE__ */ React10.createElement(
+        Button,
+        {
+          "data-testid": "stop_recording_confirm_mobile",
+          variant: "danger",
+          icon: true,
+          onClick: () => __async(void 0, null, function* () {
+            try {
+              yield hmsActions.stopRTMPAndRecording();
+            } catch (error) {
+              ToastManager.addToast({
+                title: error.message,
+                variant: "error"
+              });
+            }
+            onOpenChange(false);
+          })
+        },
+        "End recording"
+      ))
+    )));
+  }
+  return /* @__PURE__ */ React10.createElement(Dialog.Root, { open, onOpenChange }, /* @__PURE__ */ React10.createElement(Dialog.Content, { css: { width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React10.createElement(Dialog.Title, null, /* @__PURE__ */ React10.createElement(Text, { variant: "h6" }, "Start Recording")), /* @__PURE__ */ React10.createElement(
+    ResolutionInput,
+    {
+      testId: "recording_resolution_mobile",
+      css: { flexDirection: "column", alignItems: "start" },
+      onResolutionChange: setResolution
+    }
+  ), /* @__PURE__ */ React10.createElement(
+    Button,
+    {
+      "data-testid": "start_recording_confirm_mobile",
+      variant: "primary",
+      icon: true,
+      css: { ml: "auto" },
+      type: "submit",
+      disabled: recordingStarted || isStreamingOn,
+      onClick: () => __async(void 0, null, function* () {
+        yield startRecording(resolution);
+        onOpenChange(false);
+      })
+    },
+    "Start"
+  )));
+};
+var StartRecording_default = StartRecording;
+
+// src/Prebuilt/components/StatsForNerds.jsx
+init_define_process_env();
+import React11, { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef2, useState as useState8 } from "react";
+import { match, P } from "ts-pattern";
+import {
+  selectHMSStats,
+  selectLocalPeerID as selectLocalPeerID3,
+  selectPeersMap,
+  selectTracksMap as selectTracksMap2,
+  useHMSActions as useHMSActions7,
+  useHMSStatsStore,
+  useHMSStore as useHMSStore7
+} from "@100mslive/react-sdk";
+var StatsForNerds = ({ onOpenChange }) => {
+  var _a;
+  const tracksWithLabels = useTracksWithLabel();
+  const statsOptions = useMemo3(
+    () => [{ id: "local-peer", label: "Local Peer Stats" }, ...tracksWithLabels],
+    [tracksWithLabels]
+  );
+  const hmsActions = useHMSActions7();
+  const details = hmsActions.getDebugInfo();
+  const [selectedStat, setSelectedStat] = useState8(statsOptions[0]);
+  const [showStatsOnTiles, setShowStatsOnTiles] = useSetUiSettings(UI_SETTINGS.showStatsOnTiles);
+  const [open, setOpen] = useState8(false);
+  const ref = useRef2();
+  const selectionBg = useDropdownSelection();
+  useEffect5(() => {
+    if (selectedStat.id !== "local-peer" && !tracksWithLabels.find((track) => track.id === selectedStat.id)) {
+      setSelectedStat("local-peer");
+    }
+  }, [tracksWithLabels, selectedStat]);
+  return /* @__PURE__ */ React11.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React11.createElement(Dialog.Portal, null, /* @__PURE__ */ React11.createElement(Dialog.Overlay, null), /* @__PURE__ */ React11.createElement(
+    Dialog.Content,
+    {
+      css: {
+        width: "min(500px, 95%)",
+        height: "min(656px, 90%)",
+        overflowY: "auto"
+      }
+    },
+    /* @__PURE__ */ React11.createElement(Dialog.Title, { css: { p: "$4 0" } }, /* @__PURE__ */ React11.createElement(Flex, { justify: "between" }, /* @__PURE__ */ React11.createElement(Flex, { align: "center", css: { mb: "$1" } }, /* @__PURE__ */ React11.createElement(Text, { variant: "h6", inline: true }, "Stats For Nerds")), /* @__PURE__ */ React11.createElement(Dialog.DefaultClose, { "data-testid": "stats_dialog_close_icon" }))),
+    /* @__PURE__ */ React11.createElement(HorizontalDivider, { css: { mt: "0.8rem" } }),
+    /* @__PURE__ */ React11.createElement(Flex, { justify: "start", gap: 4, css: { m: "$10 0" } }, /* @__PURE__ */ React11.createElement(Switch, { checked: showStatsOnTiles, onCheckedChange: setShowStatsOnTiles }), /* @__PURE__ */ React11.createElement(Text, { variant: "body2", css: { fontWeight: "$semiBold" } }, "Show Stats on Tiles")),
+    /* @__PURE__ */ React11.createElement(
+      Flex,
+      {
+        direction: "column",
+        css: {
+          mb: "$12",
+          position: "relative",
+          minWidth: 0
+        }
+      },
+      /* @__PURE__ */ React11.createElement(Label, { variant: "body2", css: { c: "$on_surface_high" } }, "Stats For"),
+      /* @__PURE__ */ React11.createElement(Dropdown.Root, { "data-testid": "dialog_select_Stats For", open, onOpenChange: setOpen }, /* @__PURE__ */ React11.createElement(
+        DialogDropdownTrigger,
+        {
+          title: selectedStat.label || "Select Stats",
+          css: { mt: "$4" },
+          titleCSS: { mx: 0 },
+          open,
+          ref
+        }
+      ), /* @__PURE__ */ React11.createElement(Dropdown.Portal, null, /* @__PURE__ */ React11.createElement(Dropdown.Content, { align: "start", sideOffset: 8, css: { w: (_a = ref.current) == null ? void 0 : _a.clientWidth, zIndex: 1e3 } }, statsOptions.map((option) => {
+        const isSelected = option.id === selectedStat.id && option.layer === selectedStat.layer;
+        return /* @__PURE__ */ React11.createElement(
+          Dropdown.Item,
+          {
+            key: `${option.id}-${option.layer || ""}`,
+            onClick: () => {
+              setSelectedStat(option);
+            },
+            css: {
+              px: "$9",
+              bg: isSelected ? selectionBg : void 0,
+              c: isSelected ? "$on_primary_high" : "$on_primary_high"
+            }
+          },
+          option.label
+        );
+      }))))
+    ),
+    selectedStat.id === "local-peer" ? /* @__PURE__ */ React11.createElement(LocalPeerStats, null) : /* @__PURE__ */ React11.createElement(TrackStats, { trackID: selectedStat.id, layer: selectedStat.layer, local: selectedStat.local }),
+    /* @__PURE__ */ React11.createElement(Flex, { justify: "start", gap: 4, css: { m: "$10 0", w: "100%" } }, /* @__PURE__ */ React11.createElement(DebugInfo, { details }))
+  )));
+};
+var useTracksWithLabel = () => {
+  const tracksMap = useHMSStore7(selectTracksMap2);
+  const peersMap = useHMSStore7(selectPeersMap);
+  const localPeerID = useHMSStore7(selectLocalPeerID3);
+  const tracksWithLabels = useMemo3(
+    () => Object.values(tracksMap).reduce((res, track) => {
+      var _a, _b;
+      const peerName = (_a = peersMap[track.peerId]) == null ? void 0 : _a.name;
+      const isLocalTrack = track.peerId === localPeerID;
+      if (isLocalTrack && ((_b = track.layerDefinitions) == null ? void 0 : _b.length)) {
+        res = res.concat(
+          track.layerDefinitions.map(({ layer }) => {
+            return {
+              id: track.id,
+              layer,
+              local: true,
+              label: `${peerName} ${track.source} ${track.type} - ${layer}`
+            };
+          })
+        );
+        return res;
+      }
+      res.push({
+        id: track.id,
+        local: isLocalTrack,
+        label: `${peerName} ${track.source} ${track.type}`
+      });
+      return res;
+    }, []),
+    [tracksMap, peersMap, localPeerID]
+  );
+  return tracksWithLabels;
+};
+var LocalPeerStats = () => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const stats = useHMSStatsStore(selectHMSStats.localPeerStats);
+  if (!stats) {
+    return null;
+  }
+  return /* @__PURE__ */ React11.createElement(Flex, { css: { flexWrap: "wrap", gap: "$10" } }, /* @__PURE__ */ React11.createElement(StatsRow, { label: "Packets Lost", value: (_a = stats.subscribe) == null ? void 0 : _a.packetsLost }), /* @__PURE__ */ React11.createElement(StatsRow, { label: "Jitter", value: (_b = stats.subscribe) == null ? void 0 : _b.jitter }), /* @__PURE__ */ React11.createElement(StatsRow, { label: "Publish Bitrate", value: formatBytes((_c = stats.publish) == null ? void 0 : _c.bitrate, "b/s") }), /* @__PURE__ */ React11.createElement(StatsRow, { label: "Subscribe Bitrate", value: formatBytes((_d = stats.subscribe) == null ? void 0 : _d.bitrate, "b/s") }), /* @__PURE__ */ React11.createElement(
+    StatsRow,
+    {
+      label: "Available Outgoing Bitrate",
+      value: formatBytes((_e = stats.publish) == null ? void 0 : _e.availableOutgoingBitrate, "b/s")
+    }
+  ), /* @__PURE__ */ React11.createElement(StatsRow, { label: "Total Bytes Sent", value: formatBytes((_f = stats.publish) == null ? void 0 : _f.bytesSent) }), /* @__PURE__ */ React11.createElement(StatsRow, { label: "Total Bytes Received", value: formatBytes((_g = stats.subscribe) == null ? void 0 : _g.bytesReceived) }), /* @__PURE__ */ React11.createElement(
+    StatsRow,
+    {
+      label: "Round Trip Time",
+      value: `${(((((_h = stats.publish) == null ? void 0 : _h.currentRoundTripTime) || 0) + (((_i = stats.subscribe) == null ? void 0 : _i.currentRoundTripTime) || 0)) / 2).toFixed(3) * 1e3} ms`
+    }
+  ));
+};
+var TrackStats = ({ trackID, layer, local }) => {
+  var _a;
+  const selector = match({ trackID, layer, local }).with(
+    {
+      layer: P.when((layer2) => !!layer2)
+    },
+    () => selectHMSStats.localVideoTrackStatsByLayer(layer)(trackID)
+  ).with({ local: P.when((local2) => !!local2) }, () => selectHMSStats.localAudioTrackStatsByID(trackID)).otherwise(() => selectHMSStats.trackStatsByID(trackID));
+  const stats = useHMSStatsStore(selector);
+  if (!stats) {
+    return null;
+  }
+  const inbound = stats.type.includes("inbound");
+  return /* @__PURE__ */ React11.createElement(Flex, { css: { flexWrap: "wrap", gap: "$10" } }, /* @__PURE__ */ React11.createElement(StatsRow, { label: "Type", value: stats.type + " " + stats.kind }), /* @__PURE__ */ React11.createElement(StatsRow, { label: "Bitrate", value: formatBytes(stats.bitrate, "b/s") }), /* @__PURE__ */ React11.createElement(StatsRow, { label: "Packets Lost", value: stats.packetsLost }), /* @__PURE__ */ React11.createElement(StatsRow, { label: "Jitter", value: (_a = stats.jitter) == null ? void 0 : _a.toFixed(3) }), /* @__PURE__ */ React11.createElement(
+    StatsRow,
+    {
+      label: inbound ? "Bytes Received" : "Bytes Sent",
+      value: formatBytes(inbound ? stats.bytesReceived : stats.bytesSent)
+    }
+  ), stats.kind === "video" && /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(StatsRow, { label: "Framerate", value: stats.framesPerSecond }), !inbound && /* @__PURE__ */ React11.createElement(StatsRow, { label: "Quality Limitation Reason", value: stats.qualityLimitationReason })), /* @__PURE__ */ React11.createElement(
+    StatsRow,
+    {
+      label: "Round Trip Time",
+      value: stats.roundTripTime ? `${(stats.roundTripTime * 1e3).toFixed(3)} ms` : "-"
+    }
+  ));
+};
+var DebugInfo = ({ details }) => {
+  var _a;
+  return /* @__PURE__ */ React11.createElement(Accordion.Root, { type: "single", collapsible: true, css: { w: "100%" } }, /* @__PURE__ */ React11.createElement(Accordion.Item, { value: "Debug Info" }, /* @__PURE__ */ React11.createElement(Accordion.Header, null, /* @__PURE__ */ React11.createElement(Label, { variant: "body2", css: { c: "$on_surface_high" } }, "Debug Info")), /* @__PURE__ */ React11.createElement(Accordion.Content, null, /* @__PURE__ */ React11.createElement(Flex, { css: { flexWrap: "wrap", mt: "$10", gap: "$10" } }, /* @__PURE__ */ React11.createElement(StatsRow, { css: { w: "100%" }, label: "Websocket URL", value: details == null ? void 0 : details.websocketURL }), /* @__PURE__ */ React11.createElement(StatsRow, { css: { w: "100%" }, label: "Init Endpoint", value: details == null ? void 0 : details.initEndpoint }), /* @__PURE__ */ React11.createElement(StatsRow, { css: { w: "100%" }, label: "Enabled flags", value: (_a = details == null ? void 0 : details.enabledFlags) == null ? void 0 : _a.join(", ") })))));
+};
+var StatsRow = React11.memo(({ label, value, css }) => /* @__PURE__ */ React11.createElement(Box, { css: __spreadValues({ bg: "$surface_bright", w: "calc(50% - $6)", p: "$8", r: "$3" }, css) }, /* @__PURE__ */ React11.createElement(
+  Text,
+  {
+    variant: "overline",
+    css: {
+      fontWeight: "$semiBold",
+      color: "$on_surface_medium",
+      textTransform: "uppercase"
+    }
+  },
+  label
+), /* @__PURE__ */ React11.createElement(Text, { variant: "sub1", css: { fontWeight: "$semiBold", color: "$on_surface_high" } }, value || "-")));
+
+// src/Prebuilt/components/MoreSettings/BulkRoleChangeModal.jsx
+init_define_process_env();
+import React12, { useCallback as useCallback8, useRef as useRef3, useState as useState9 } from "react";
+import { useHMSActions as useHMSActions8 } from "@100mslive/react-sdk";
+import { AlertTriangleIcon as AlertTriangleIcon2, ChangeRoleIcon, CheckIcon } from "@100mslive/react-icons";
+var BulkRoleChangeModal = ({ onOpenChange }) => {
+  var _a, _b;
+  const roles = useFilteredRoles();
+  const hmsActions = useHMSActions8();
+  const ref = useRef3(null);
+  const roleRef = useRef3(null);
+  const [selectedBulkRole, setBulkRole] = useState9([]);
+  const [selectedRole, setRole] = useState9("");
+  const [bulkRoleDialog, setBulkRoleDialog] = useState9(false);
+  const [roleDialog, setRoleDialog] = useState9(false);
+  const [errorMessage, setErrorMessage] = useState9("");
+  const [isSubmiting, setIsSubmiting] = useState9(false);
+  const changeBulkRole = useCallback8(() => __async(void 0, null, function* () {
+    if (selectedBulkRole.length > 0 && selectedRole) {
+      try {
+        setIsSubmiting(true);
+        yield hmsActions.changeRoleOfPeersWithRoles(selectedBulkRole, selectedRole);
+        setIsSubmiting(false);
+        setErrorMessage("");
+        onOpenChange(false);
+      } catch (err) {
+        setErrorMessage((err == null ? void 0 : err.message) ? err == null ? void 0 : err.message : "Unknown error");
+        setIsSubmiting(false);
+      }
+    }
+  }), [selectedBulkRole, selectedRole, hmsActions, onOpenChange]);
+  return /* @__PURE__ */ React12.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React12.createElement(DialogContent, { title: "Bulk Role Change", Icon: ChangeRoleIcon }, /* @__PURE__ */ React12.createElement(DialogRow, null, /* @__PURE__ */ React12.createElement(Text, null, "For Roles: "), /* @__PURE__ */ React12.createElement(
+    Dropdown.Root,
+    {
+      open: bulkRoleDialog,
+      onOpenChange: (value) => {
+        if (value) {
+          setBulkRoleDialog(value);
+        }
+      },
+      modal: false
+    },
+    /* @__PURE__ */ React12.createElement(
+      DialogDropdownTrigger,
+      {
+        ref,
+        title: selectedBulkRole.length === 0 ? "Select Multiple Roles" : selectedBulkRole.toString(),
+        css: {
+          w: "70%",
+          p: "$8"
+        },
+        open: bulkRoleDialog
+      }
+    ),
+    /* @__PURE__ */ React12.createElement(
+      Dropdown.Content,
+      {
+        css: { w: (_a = ref.current) == null ? void 0 : _a.clientWidth, zIndex: 1e3 },
+        onInteractOutside: () => {
+          if (bulkRoleDialog) {
+            setBulkRoleDialog(false);
+          }
+        }
+      },
+      roles && roles.map((role) => {
+        return /* @__PURE__ */ React12.createElement(
+          Dropdown.CheckboxItem,
+          {
+            key: role,
+            checked: selectedBulkRole.includes(role),
+            onCheckedChange: (value) => {
+              setBulkRole((selection) => {
+                return value ? [...selection, role] : selection.filter((selectedRole2) => selectedRole2 !== role);
+              });
+              setErrorMessage("");
+            }
+          },
+          /* @__PURE__ */ React12.createElement(Checkbox.Root, { css: { margin: "$2" }, checked: selectedBulkRole.includes(role) }, /* @__PURE__ */ React12.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React12.createElement(CheckIcon, { width: 16, height: 16 }))),
+          role
+        );
+      })
+    )
+  )), /* @__PURE__ */ React12.createElement(DialogRow, null, /* @__PURE__ */ React12.createElement(Text, null, "To Role: "), /* @__PURE__ */ React12.createElement(Dropdown.Root, { open: roleDialog, onOpenChange: (value) => setRoleDialog(value) }, /* @__PURE__ */ React12.createElement(
+    DialogDropdownTrigger,
+    {
+      ref: roleRef,
+      title: selectedRole || "Select Role",
+      css: {
+        w: "70%",
+        p: "$8"
+      },
+      open: roleDialog
+    }
+  ), /* @__PURE__ */ React12.createElement(Dropdown.Content, { css: { w: (_b = roleRef.current) == null ? void 0 : _b.clientWidth, zIndex: 1e3 } }, roles && roles.map((role) => {
+    return /* @__PURE__ */ React12.createElement(
+      Dropdown.Item,
+      {
+        key: role,
+        onSelect: () => {
+          setRole(role);
+          setErrorMessage("");
+        }
+      },
+      role
+    );
+  })))), /* @__PURE__ */ React12.createElement(DialogRow, null, errorMessage && /* @__PURE__ */ React12.createElement(Flex, { gap: 2, css: { c: "$alert_error_default", w: "70%", ml: "auto" } }, /* @__PURE__ */ React12.createElement(AlertTriangleIcon2, null), /* @__PURE__ */ React12.createElement(Text, { css: { c: "inherit" } }, errorMessage))), /* @__PURE__ */ React12.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React12.createElement(Button, { variant: "primary", onClick: changeBulkRole, disabled: !(selectedRole && selectedBulkRole.length > 0) }, isSubmiting && /* @__PURE__ */ React12.createElement(Loading, { css: { color: "$on_primary_medium" } }), "Apply"))));
+};
+
+// src/Prebuilt/components/MoreSettings/CaptionModal.tsx
+init_define_process_env();
+import React14 from "react";
+import { useMedia as useMedia3 } from "react-use";
+
+// src/Prebuilt/components/MoreSettings/CaptionContent.tsx
+init_define_process_env();
+import React13 from "react";
+import { HMSTranscriptionMode, selectIsTranscriptionEnabled, useHMSActions as useHMSActions9, useHMSStore as useHMSStore8 } from "@100mslive/react-sdk";
+import { AlertTriangleIcon as AlertTriangleIcon3, CrossIcon as CrossIcon2 } from "@100mslive/react-icons";
+var CaptionContent = ({ isMobile, onExit }) => {
+  const DURATION = 2e3;
+  const actions = useHMSActions9();
+  const isTranscriptionEnabled = useHMSStore8(selectIsTranscriptionEnabled);
+  const [toastId, setToastId] = useSetAppDataByKey(CAPTION_TOAST.captionToast);
+  const [isCaptionEnabled, setIsCaptionEnabled] = useSetIsCaptionEnabled();
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
+    Text,
+    {
+      variant: isMobile ? "md" : "lg",
+      css: {
+        color: "$on_surface_high",
+        fontWeight: "$semiBold",
+        display: "flex",
+        "@md": { px: "$8" }
+      }
+    },
+    isTranscriptionEnabled ? "Disable" : "Enable",
+    " Closed Caption (CC) for this session?",
+    /* @__PURE__ */ React13.createElement(
+      Box,
+      {
+        css: { color: "inherit", ml: "auto", "&:hover": { color: "$on_surface_medium", cursor: "pointer" } },
+        onClick: onExit
+      },
+      /* @__PURE__ */ React13.createElement(CrossIcon2, null)
+    )
+  ), !isMobile ? /* @__PURE__ */ React13.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", mt: "$4", "@md": { px: "$8" } } }, "This will ", isTranscriptionEnabled ? "disable" : "enable", " Closed Captions for everyone in this room. You can\xA0", isTranscriptionEnabled ? "enable" : "disable", " it later.") : null, /* @__PURE__ */ React13.createElement(
+    Flex,
+    {
+      justify: "between",
+      align: "center",
+      css: {
+        width: "100%",
+        gap: "$md",
+        mt: "$10",
+        "@md": { px: "$4" }
+      }
+    },
+    isMobile ? null : /* @__PURE__ */ React13.createElement(Button, { variant: "standard", css: { w: "100%" }, outlined: true, onClick: onExit }, "Cancel"),
+    /* @__PURE__ */ React13.createElement(
+      Flex,
+      {
+        direction: "column",
+        justify: "between",
+        align: "center",
+        css: {
+          width: "100%",
+          "@md": { px: "$4" }
+        }
+      },
+      isMobile && isTranscriptionEnabled ? /* @__PURE__ */ React13.createElement(
+        Button,
+        {
+          variant: "standard",
+          css: { w: "100%", mb: "$4" },
+          outlined: true,
+          onClick: () => {
+            setIsCaptionEnabled(!isCaptionEnabled);
+            onExit();
+          }
+        },
+        isCaptionEnabled ? "Hide For Me" : "Show For Me"
+      ) : null,
+      /* @__PURE__ */ React13.createElement(
+        Button,
+        {
+          variant: isTranscriptionEnabled ? "danger" : "primary",
+          css: { width: "100%" },
+          "data-testid": "popup_change_btn",
+          onClick: () => __async(void 0, null, function* () {
+            try {
+              if (isTranscriptionEnabled) {
+                yield actions.stopTranscription({
+                  mode: HMSTranscriptionMode.CAPTION
+                });
+                setIsCaptionEnabled(false);
+                const id2 = ToastManager.replaceToast(toastId, {
+                  title: `Disabling Closed Caption for everyone.`,
+                  variant: "standard",
+                  duration: DURATION,
+                  icon: /* @__PURE__ */ React13.createElement(Loading, { color: "currentColor" })
+                });
+                setToastId(id2);
+                onExit();
+                return;
+              }
+              yield actions.startTranscription({
+                mode: HMSTranscriptionMode.CAPTION
+              });
+              const id = ToastManager.replaceToast(toastId, {
+                title: `Enabling Closed Caption for everyone.`,
+                variant: "standard",
+                duration: DURATION,
+                icon: /* @__PURE__ */ React13.createElement(Loading, { color: "currentColor" })
+              });
+              setToastId(id);
+            } catch (err) {
+              const id = ToastManager.replaceToast(toastId, {
+                title: `Failed to ${isTranscriptionEnabled ? "disable" : "enable"} closed caption`,
+                variant: "error",
+                icon: /* @__PURE__ */ React13.createElement(AlertTriangleIcon3, { style: { marginRight: "0.5rem" } })
+              });
+              setToastId(id);
+            } finally {
+              setIsCaptionEnabled(true);
+            }
+            onExit();
+          })
+        },
+        isTranscriptionEnabled ? "Disable" : "Enable",
+        " for Everyone"
+      )
+    )
+  ), isMobile && /* @__PURE__ */ React13.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", pb: "$4", mb: "$8", "@md": { px: "$8", mt: "$4" } } }, "This will ", isTranscriptionEnabled ? "disable" : "enable", " Closed Captions for everyone in this room. You can\xA0", isTranscriptionEnabled ? "enable" : "disable", " it later."));
+};
+
+// src/Prebuilt/components/MoreSettings/CaptionModal.tsx
+var CaptionModal = ({ onOpenChange }) => {
+  const isMobile = useMedia3(config.media.md);
+  const props = {
+    isMobile,
+    onExit: () => {
+      onOpenChange(false);
+    }
+  };
+  if (isMobile) {
+    return /* @__PURE__ */ React14.createElement(Sheet.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React14.createElement(Sheet.Content, { css: { bg: "$surface_dim", p: "$8 0" } }, /* @__PURE__ */ React14.createElement(CaptionContent, __spreadValues({}, props))));
+  }
+  return /* @__PURE__ */ React14.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React14.createElement(Dialog.Portal, null, /* @__PURE__ */ React14.createElement(Dialog.Overlay, null), /* @__PURE__ */ React14.createElement(Dialog.Content, { css: { bg: "$surface_dim", width: "min(400px,80%)", p: "$10" } }, /* @__PURE__ */ React14.createElement(CaptionContent, __spreadValues({}, props)))));
+};
+
+// src/Prebuilt/components/MoreSettings/FullScreenItem.tsx
+init_define_process_env();
+import React15 from "react";
+import { ExpandIcon } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/hooks/useFullscreen.ts
+init_define_process_env();
+import { useCallback as useCallback9, useEffect as useEffect6, useState as useState10 } from "react";
+import screenfull from "screenfull";
+var useFullscreen = () => {
+  const [isFullScreenEnabled, setIsFullScreenEnabled] = useState10(screenfull.isFullscreen);
+  const toggle = useCallback9(() => __async(void 0, null, function* () {
+    if (!screenfull.isEnabled) {
+      ToastManager.addToast({ title: "Fullscreen feature not supported" });
+      return;
+    }
+    try {
+      const container = document.querySelector(DEFAULT_PORTAL_CONTAINER);
+      if (isFullScreenEnabled) {
+        yield screenfull.exit();
+      } else if (container) {
+        yield screenfull.request(container);
+      }
+    } catch (err) {
+      ToastManager.addToast({ title: err.message });
+    }
+  }), [isFullScreenEnabled]);
+  useEffect6(() => {
+    const onChange = () => {
+      setIsFullScreenEnabled(screenfull.isFullscreen);
+    };
+    if (screenfull.isEnabled) {
+      screenfull.on("change", onChange);
+    }
+    return () => {
+      if (screenfull.isEnabled) {
+        screenfull.off("change", onChange);
+      }
+    };
+  }, []);
+  return {
+    allowed: screenfull.isEnabled,
+    isFullscreen: isFullScreenEnabled,
+    toggleFullscreen: toggle
+  };
+};
+
+// src/Prebuilt/components/MoreSettings/FullScreenItem.tsx
+var FullScreenItem = () => {
+  const { allowed, isFullscreen, toggleFullscreen } = useFullscreen();
+  if (!allowed) {
+    return null;
+  }
+  return /* @__PURE__ */ React15.createElement(
+    Dropdown.Item,
+    {
+      onClick: () => {
+        toggleFullscreen();
+      },
+      "data-testid": "full_screen_btn"
+    },
+    /* @__PURE__ */ React15.createElement(ExpandIcon, null),
+    /* @__PURE__ */ React15.createElement(Text, { variant: "sm", css: { ml: "$4" } }, isFullscreen ? "Exit " : "Go ", "Fullscreen")
+  );
+};
+
+// src/Prebuilt/components/MoreSettings/MuteAllModal.tsx
+init_define_process_env();
+import React17, { useCallback as useCallback10, useState as useState11 } from "react";
+import {
+  selectAvailableRoleNames,
+  useHMSActions as useHMSActions10,
+  useHMSStore as useHMSStore10
+} from "@100mslive/react-sdk";
+import { MicOffIcon } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/MoreSettings/MuteAllContent.tsx
+init_define_process_env();
+import React16 from "react";
+import { selectPermissions as selectPermissions3, useHMSStore as useHMSStore9 } from "@100mslive/react-sdk";
+var MuteAllContent = (props) => {
+  const roles = props.roles || [];
+  const permissions = useHMSStore9(selectPermissions3);
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
+    DialogSelect,
+    {
+      title: "Role",
+      options: [{ label: "All Roles", value: "" }, ...roles.map((role) => ({ label: role, value: role }))],
+      selected: props.selectedRole,
+      keyField: "value",
+      labelField: "label",
+      onChange: props.setRole
+    }
+  ), /* @__PURE__ */ React16.createElement(
+    DialogSelect,
+    {
+      title: "Track type",
+      options: trackTypeOptions,
+      selected: props.trackType,
+      onChange: props.setTrackType,
+      keyField: "value",
+      labelField: "label"
+    }
+  ), /* @__PURE__ */ React16.createElement(
+    DialogSelect,
+    {
+      title: "Track source",
+      options: trackSourceOptions,
+      selected: props.selectedSource,
+      onChange: props.setSource,
+      keyField: "value",
+      labelField: "label"
+    }
+  ), /* @__PURE__ */ React16.createElement(DialogRow, null, /* @__PURE__ */ React16.createElement(Text, { variant: "md" }, "Track status"), /* @__PURE__ */ React16.createElement(RadioGroup.Root, { value: String(props.enabled), onValueChange: (value) => props.setEnabled(value === "true") }, (permissions == null ? void 0 : permissions.mute) && /* @__PURE__ */ React16.createElement(Flex, { align: "center", css: { mr: "$8" } }, /* @__PURE__ */ React16.createElement(RadioGroup.Item, { value: "false", id: "trackDisableRadio", css: { mr: "$4" } }, /* @__PURE__ */ React16.createElement(RadioGroup.Indicator, null)), /* @__PURE__ */ React16.createElement(Label, { htmlFor: "trackDisableRadio" }, "Mute")), (permissions == null ? void 0 : permissions.unmute) && /* @__PURE__ */ React16.createElement(Flex, { align: "center", css: { cursor: "pointer" } }, /* @__PURE__ */ React16.createElement(RadioGroup.Item, { value: "true", id: "trackEnableRadio", css: { mr: "$4" } }, /* @__PURE__ */ React16.createElement(RadioGroup.Indicator, null)), /* @__PURE__ */ React16.createElement(Label, { htmlFor: "trackEnableRadio" }, "Request Unmute")))), /* @__PURE__ */ React16.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React16.createElement(Button, { variant: "primary", onClick: props.muteAll, css: { w: (props == null ? void 0 : props.isMobile) ? "100%" : "" } }, "Apply")));
+};
+
+// src/Prebuilt/components/MoreSettings/MuteAllModal.tsx
+var MuteAllModal = ({
+  onOpenChange,
+  isMobile = false
+}) => {
+  const roles = useHMSStore10(selectAvailableRoleNames);
+  const hmsActions = useHMSActions10();
+  const [enabled, setEnabled] = useState11(false);
+  const [trackType, setTrackType] = useState11();
+  const [selectedRole, setRole] = useState11();
+  const [selectedSource, setSource] = useState11();
+  const muteAll = useCallback10(() => __async(void 0, null, function* () {
+    yield hmsActions.setRemoteTracksEnabled({
+      enabled,
+      type: trackType,
+      source: selectedSource,
+      roles: selectedRole ? [selectedRole] : void 0
+    });
+    onOpenChange(false);
+  }), [selectedRole, enabled, trackType, selectedSource, hmsActions, onOpenChange]);
+  const props = {
+    muteAll,
+    roles,
+    enabled,
+    setEnabled,
+    trackType,
+    setTrackType,
+    selectedRole,
+    setRole,
+    selectedSource,
+    setSource,
+    isMobile
+  };
+  if (isMobile) {
+    return /* @__PURE__ */ React17.createElement(Sheet.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React17.createElement(Sheet.Content, { css: { px: "$10" } }, /* @__PURE__ */ React17.createElement(MuteAllContent, __spreadValues({}, props))));
+  }
+  return /* @__PURE__ */ React17.createElement(Dialog.Root, { defaultOpen: true, onOpenChange }, /* @__PURE__ */ React17.createElement(DialogContent, { title: "Mute/Unmute Remote Tracks", Icon: MicOffIcon }, /* @__PURE__ */ React17.createElement(MuteAllContent, __spreadValues({}, props))));
+};
+
+// src/Prebuilt/components/PIP/usePIPChat.tsx
+init_define_process_env();
+import { useEffect as useEffect7 } from "react";
+import { useHMSActions as useHMSActions11 } from "@100mslive/react-sdk";
+var usePIPChat = () => {
+  const hmsActions = useHMSActions11();
+  const { isSupported, requestPipWindow, pipWindow, closePipWindow } = usePIPWindow();
+  useEffect7(() => {
+    if (document && pipWindow) {
+      const style = document.createElement("style");
+      style.id = "stitches";
+      style.textContent = getCssText();
+      pipWindow.document.head.appendChild(style);
+    }
+  }, [pipWindow]);
+  useEffect7(() => {
+    if (pipWindow) {
+      const chatContainer = pipWindow.document.getElementById("chat-container");
+      const selector = pipWindow.document.getElementById("selector");
+      const sendBtn = pipWindow.document.getElementById("send-btn");
+      const pipChatInput = pipWindow.document.getElementById("chat-input");
+      const marker = pipWindow.document.getElementById("marker");
+      marker == null ? void 0 : marker.scrollIntoView({ block: "end" });
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting && entry.target.id) {
+              hmsActions.setMessageRead(true, entry.target.id);
+            }
+          });
+        },
+        {
+          root: chatContainer,
+          threshold: 0.8
+        }
+      );
+      const mutationObserver = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.addedNodes.length > 0) {
+            const newMessages = mutation.addedNodes;
+            newMessages.forEach((message) => {
+              const messageId = message == null ? void 0 : message.id;
+              if (messageId === "new-message-notif") {
+                message.addEventListener(
+                  "click",
+                  () => setTimeout(() => marker == null ? void 0 : marker.scrollIntoView({ block: "end", behavior: "smooth" }), 0)
+                );
+              } else if (messageId)
+                observer.observe(message);
+            });
+          }
+        });
+      });
+      mutationObserver.observe(chatContainer, {
+        childList: true
+      });
+      const sendMessage = () => __async(void 0, null, function* () {
+        const selection = (selector == null ? void 0 : selector.value) || "Everyone";
+        if (selection === "Everyone") {
+          yield hmsActions.sendBroadcastMessage(pipChatInput.value.trim());
+        } else {
+          yield hmsActions.sendGroupMessage(pipChatInput.value.trim(), [selection]);
+        }
+        pipChatInput.value = "";
+        setTimeout(() => marker == null ? void 0 : marker.scrollIntoView({ block: "end", behavior: "smooth" }), 0);
+      });
+      if (sendBtn && hmsActions && pipChatInput) {
+        const pipMessages = pipWindow.document.getElementsByClassName("pip-message");
+        [...pipMessages].forEach((message) => {
+          if (message.id) {
+            hmsActions.setMessageRead(true, message.id);
+          }
+        });
+        const sendOnEnter = (e) => {
+          if (e.key === "Enter")
+            sendMessage();
+        };
+        sendBtn.addEventListener("click", sendMessage);
+        pipChatInput.addEventListener("keypress", sendOnEnter);
+        return () => {
+          sendBtn.removeEventListener("click", sendMessage);
+          pipChatInput.removeEventListener("keypress", sendOnEnter);
+          mutationObserver.disconnect();
+          observer.disconnect();
+        };
+      }
+    }
+  }, [pipWindow, hmsActions]);
+  useEffect7(() => {
+    return () => {
+      pipWindow && closePipWindow();
+    };
+  }, [closePipWindow, pipWindow]);
+  return { isSupported, requestPipWindow, pipWindow };
+};
+
+// src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx
+var MODALS = {
+  CHANGE_NAME: "changeName",
+  SELF_ROLE_CHANGE: "selfRoleChange",
+  MORE_SETTINGS: "moreSettings",
+  START_RECORDING: "startRecording",
+  DEVICE_SETTINGS: "deviceSettings",
+  STATS_FOR_NERDS: "statsForNerds",
+  BULK_ROLE_CHANGE: "bulkRoleChange",
+  MUTE_ALL: "muteAll",
+  EMBED_URL: "embedUrl",
+  CAPTION: "caption"
+};
+var DesktopOptions = ({
+  elements,
+  screenType
+}) => {
+  const localPeerId = useHMSStore11(selectLocalPeerID4);
+  const hmsActions = useHMSActions12();
+  const enablHlsStats = useHMSStore11(selectAppData(APP_DATA.hlsStats));
+  const [openModals, setOpenModals] = useState12(/* @__PURE__ */ new Set());
+  const { isBRBOn, toggleBRB } = useMyMetadata();
+  const isPipOn = PictureInPicture.isOn();
+  const isBRBEnabled = !!(elements == null ? void 0 : elements.brb);
+  const isTranscriptionAllowed = useHMSStore11(selectIsTranscriptionAllowedByMode(HMSTranscriptionMode2.CAPTION));
+  const isTranscriptionEnabled = useHMSStore11(selectIsTranscriptionEnabled2);
+  const { isSupported, pipWindow, requestPipWindow } = usePIPChat();
+  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
+  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+  const showPipChatOption = !!(elements == null ? void 0 : elements.chat) && isSupported && !pipWindow;
+  useDropdownList({ open: openModals.size > 0, name: "MoreSettings" });
+  const updateState = (modalName, value) => {
+    setOpenModals((modals) => {
+      const copy = new Set(modals);
+      if (value) {
+        copy.clear();
+        copy.add(modalName);
+      } else {
+        copy.delete(modalName);
+      }
+      return copy;
+    });
+  };
+  return /* @__PURE__ */ React18.createElement(Fragment2, null, isSupported && pipWindow ? /* @__PURE__ */ React18.createElement(PIPWindow, { pipWindow }, /* @__PURE__ */ React18.createElement(PIPChat, null)) : null, /* @__PURE__ */ React18.createElement(
+    Dropdown.Root,
+    {
+      open: openModals.has(MODALS.MORE_SETTINGS),
+      onOpenChange: (value) => updateState(MODALS.MORE_SETTINGS, value),
+      modal: false
+    },
+    /* @__PURE__ */ React18.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React18.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "more_settings_btn" }, /* @__PURE__ */ React18.createElement(IconButton_default, null, /* @__PURE__ */ React18.createElement(HamburgerMenuIcon, null)))),
+    /* @__PURE__ */ React18.createElement(
+      Dropdown.Content,
+      {
+        sideOffset: 5,
+        align: "end",
+        css: {
+          py: "$0",
+          maxHeight: "unset",
+          "@md": { w: "$64" },
+          "div[role='separator']:first-child": {
+            display: "none"
+          }
+        }
+      },
+      isBRBEnabled && screenType !== "hls_live_streaming" ? /* @__PURE__ */ React18.createElement(Dropdown.Item, { onClick: toggleBRB, "data-testid": "brb_btn" }, /* @__PURE__ */ React18.createElement(BrbIcon, null), /* @__PURE__ */ React18.createElement(Text, { variant: "sm", css: { ml: "$4", color: "$on_surface_high" } }, "Be Right Back"), /* @__PURE__ */ React18.createElement(Flex, { justify: "end", css: { color: "$on_surface_high", flexGrow: "1" } }, isBRBOn ? /* @__PURE__ */ React18.createElement(CheckIcon2, null) : null)) : null,
+      isTranscriptionAllowed ? /* @__PURE__ */ React18.createElement(
+        Dropdown.Item,
+        {
+          "data-testid": "closed_caption_admin",
+          onClick: () => {
+            updateState(MODALS.CAPTION, true);
+          }
+        },
+        /* @__PURE__ */ React18.createElement(OpenCaptionIcon, null),
+        /* @__PURE__ */ React18.createElement(Flex, { direction: "column", css: { flexGrow: "1" } }, /* @__PURE__ */ React18.createElement(Text, { variant: "sm", css: { ml: "$4", color: "$on_surface_high" } }, "Closed Captions"), /* @__PURE__ */ React18.createElement(Text, { variant: "caption", css: { ml: "$4", color: "$on_surface_medium" } }, isTranscriptionEnabled ? "Enabled" : "Disabled")),
+        /* @__PURE__ */ React18.createElement(Switch, { id: "closed_caption_start_stop", checked: isTranscriptionEnabled, disabled: false })
+      ) : null,
+      screenType !== "hls_live_streaming" ? /* @__PURE__ */ React18.createElement(Dropdown.Item, { css: { p: 0, "&:empty": { display: "none" } } }, /* @__PURE__ */ React18.createElement(
+        PIP,
+        {
+          content: /* @__PURE__ */ React18.createElement(Flex, { css: { w: "100%", h: "100%", p: "$8" } }, /* @__PURE__ */ React18.createElement(PipIcon2, null), /* @__PURE__ */ React18.createElement(Text, { variant: "sm", css: { ml: "$4" } }, isPipOn ? "Disable" : "Enable", " Picture-in-Picture"))
+        }
+      )) : null,
+      /* @__PURE__ */ React18.createElement(
+        PIPChatOption,
+        {
+          showPIPChat: showPipChatOption,
+          openChat: () => __async(void 0, null, function* () {
+            isChatOpen && toggleChat();
+            yield requestPipWindow(350, 500);
+          })
+        }
+      ),
+      /* @__PURE__ */ React18.createElement(FullScreenItem, null),
+      /* @__PURE__ */ React18.createElement(Dropdown.ItemSeparator, { css: { mx: 0 } }),
+      /* @__PURE__ */ React18.createElement(Dropdown.Item, { onClick: () => updateState(MODALS.DEVICE_SETTINGS, true), "data-testid": "device_settings_btn" }, /* @__PURE__ */ React18.createElement(SettingsIcon, null), /* @__PURE__ */ React18.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Settings")),
+      match2({ screenType, isSupported: HMSHLSPlayer.isSupported() }).with({ screenType: "hls_live_streaming", isSupported: false }, () => null).with({ screenType: "hls_live_streaming", isSupported: true }, () => {
+        return /* @__PURE__ */ React18.createElement(
+          Dropdown.Item,
+          {
+            onClick: () => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats),
+            "data-testid": "hls_stats"
+          },
+          /* @__PURE__ */ React18.createElement(
+            Checkbox.Root,
+            {
+              css: { margin: "$2" },
+              checked: enablHlsStats,
+              onCheckedChange: () => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)
+            },
+            /* @__PURE__ */ React18.createElement(Checkbox.Indicator, null, /* @__PURE__ */ React18.createElement(CheckIcon2, { width: 16, height: 16 }))
+          ),
+          /* @__PURE__ */ React18.createElement(Flex, { justify: "between", css: { width: "100%" } }, /* @__PURE__ */ React18.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Show HLS Stats"), /* @__PURE__ */ React18.createElement(Text, { variant: "sm", css: { ml: "$4" } }, `${isMacOS ? "\u2318" : "ctrl"} + ]`))
+        );
+      }).otherwise(() => /* @__PURE__ */ React18.createElement(
+        Dropdown.Item,
+        {
+          onClick: () => updateState(MODALS.STATS_FOR_NERDS, true),
+          "data-testid": "stats_for_nerds_btn"
+        },
+        /* @__PURE__ */ React18.createElement(InfoIcon2, null),
+        /* @__PURE__ */ React18.createElement(Text, { variant: "sm", css: { ml: "$4" } }, "Stats for Nerds")
+      ))
+    )
+  ), openModals.has(MODALS.BULK_ROLE_CHANGE) && /* @__PURE__ */ React18.createElement(BulkRoleChangeModal, { onOpenChange: (value) => updateState(MODALS.BULK_ROLE_CHANGE, value) }), openModals.has(MODALS.MUTE_ALL) && /* @__PURE__ */ React18.createElement(MuteAllModal, { onOpenChange: (value) => updateState(MODALS.MUTE_ALL, value) }), openModals.has(MODALS.START_RECORDING) && /* @__PURE__ */ React18.createElement(StartRecording_default, { open: true, onOpenChange: (value) => updateState(MODALS.START_RECORDING, value) }), openModals.has(MODALS.DEVICE_SETTINGS) && /* @__PURE__ */ React18.createElement(
+    SettingsModal_default,
+    {
+      open: true,
+      onOpenChange: (value) => updateState(MODALS.DEVICE_SETTINGS, value),
+      screenType
+    }
+  ), openModals.has(MODALS.STATS_FOR_NERDS) && /* @__PURE__ */ React18.createElement(StatsForNerds, { open: true, onOpenChange: (value) => updateState(MODALS.STATS_FOR_NERDS, value) }), openModals.has(MODALS.SELF_ROLE_CHANGE) && /* @__PURE__ */ React18.createElement(
+    RoleChangeModal,
+    {
+      peerId: localPeerId,
+      onOpenChange: (value) => updateState(MODALS.SELF_ROLE_CHANGE, value)
+    }
+  ), openModals.has(MODALS.CAPTION) && /* @__PURE__ */ React18.createElement(CaptionModal, { onOpenChange: (value) => updateState(MODALS.CAPTION, value) }));
+};
+
+// src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx
+init_define_process_env();
+import React19, { useRef as useRef4, useState as useState14 } from "react";
+import { useClickAway } from "react-use";
+import { match as match3 } from "ts-pattern";
+import {
+  HMSTranscriptionMode as HMSTranscriptionMode3,
+  selectIsConnectedToRoom,
+  selectIsLocalVideoEnabled as selectIsLocalVideoEnabled2,
+  selectIsTranscriptionAllowedByMode as selectIsTranscriptionAllowedByMode2,
+  selectIsTranscriptionEnabled as selectIsTranscriptionEnabled3,
+  selectPeerCount,
+  selectPermissions as selectPermissions4,
+  useHMSActions as useHMSActions13,
+  useHMSStore as useHMSStore13,
+  useRecordingStreaming as useRecordingStreaming2
+} from "@100mslive/react-sdk";
+import {
+  BrbIcon as BrbIcon2,
+  ClosedCaptionIcon,
+  CrossIcon as CrossIcon3,
+  EmojiIcon,
+  HamburgerMenuIcon as HamburgerMenuIcon2,
+  HandIcon,
+  HandRaiseSlashedIcon,
+  InfoIcon as InfoIcon3,
+  OpenCaptionIcon as OpenCaptionIcon2,
+  PeopleIcon,
+  QuizActiveIcon,
+  QuizIcon,
+  RecordIcon,
+  SettingsIcon as SettingsIcon2,
+  VirtualBackgroundIcon
+} from "@100mslive/react-icons";
+
+// src/Prebuilt/components/hooks/useUnreadPollQuizPresent.tsx
+init_define_process_env();
+import { useEffect as useEffect8, useState as useState13 } from "react";
+import { HMSNotificationTypes, useHMSNotifications, useHMSStore as useHMSStore12 } from "@100mslive/react-sdk";
+var useUnreadPollQuizPresent = () => {
+  const localPeerID = useHMSStore12(Ee);
+  const notification = useHMSNotifications(HMSNotificationTypes.POLL_STARTED);
+  const [unreadPollQuiz, setUnreadPollQuiz] = useState13(false);
+  useEffect8(() => {
+    if (!notification) {
+      return;
+    }
+    setUnreadPollQuiz(notification.data.startedBy !== localPeerID);
+  }, [localPeerID, notification]);
+  return { unreadPollQuiz, setUnreadPollQuiz };
+};
+
+// src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx
+var MODALS2 = {
+  CHANGE_NAME: "changeName",
+  SELF_ROLE_CHANGE: "selfRoleChange",
+  MORE_SETTINGS: "moreSettings",
+  START_RECORDING: "startRecording",
+  DEVICE_SETTINGS: "deviceSettings",
+  STATS_FOR_NERDS: "statsForNerds",
+  BULK_ROLE_CHANGE: "bulkRoleChange",
+  MUTE_ALL: "muteAll",
+  EMBED_URL: "embedUrl",
+  CAPTION: "caption"
+};
+var MwebOptions = ({
+  elements,
+  screenType
+}) => {
+  const hmsActions = useHMSActions13();
+  const permissions = useHMSStore13(selectPermissions4);
+  const isConnected = useHMSStore13(selectIsConnectedToRoom);
+  const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming2();
+  const [openModals, setOpenModals] = useState14(/* @__PURE__ */ new Set());
+  const [openOptionsSheet, setOpenOptionsSheet] = useState14(false);
+  const [openSettingsSheet, setOpenSettingsSheet] = useState14(false);
+  const [showEmojiCard, setShowEmojiCard] = useState14(false);
+  const [showRecordingOn, setShowRecordingOn] = useState14(false);
+  const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  const { showPolls } = useShowPolls();
+  const togglePollView = usePollViewToggle();
+  const peerCount = useHMSStore13(selectPeerCount);
+  const emojiCardRef = useRef4(null);
+  const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
+  const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
+  const { title, description } = useRoomLayoutHeader();
+  const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeHLSStream = useLandscapeHLSStream();
+  const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
+  const isLocalVideoEnabled = useHMSStore13(selectIsLocalVideoEnabled2);
+  const { startRecording, isRecordingLoading } = useRecordingHandler();
+  const isTranscriptionAllowed = useHMSStore13(selectIsTranscriptionAllowedByMode2(HMSTranscriptionMode3.CAPTION));
+  const isTranscriptionEnabled = useHMSStore13(selectIsTranscriptionEnabled3);
+  const [isCaptionEnabled] = useSetIsCaptionEnabled();
+  useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: "MoreSettings" });
+  const updateState = (modalName, value) => {
+    setOpenModals((modals) => {
+      const copy = new Set(modals);
+      if (value) {
+        copy.add(modalName);
+      } else {
+        copy.delete(modalName);
+      }
+      return copy;
+    });
+  };
+  useClickAway(emojiCardRef, () => setShowEmojiCard(false));
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(Sheet.Root, { open: openOptionsSheet, onOpenChange: setOpenOptionsSheet }, /* @__PURE__ */ React19.createElement(Tooltip, { title: "More options" }, /* @__PURE__ */ React19.createElement(Sheet.Trigger, { asChild: true, "data-testid": "more_settings_btn" }, /* @__PURE__ */ React19.createElement(IconButton_default, { css: { bg: isMobileHLSStream || isLandscapeHLSStream ? "$surface_default" : "" } }, /* @__PURE__ */ React19.createElement(HamburgerMenuIcon2, null)))), /* @__PURE__ */ React19.createElement(Sheet.Content, { css: { bg: "$surface_dim", pb: "$14" } }, /* @__PURE__ */ React19.createElement(
+    Sheet.Title,
+    {
+      css: {
+        display: "flex",
+        color: "$on_surface_high",
+        w: "100%",
+        justifyContent: "space-between",
+        fontSize: "$md",
+        mt: "$8",
+        px: "$10",
+        pb: "$8",
+        borderBottom: "1px solid $border_default",
+        mb: "$8",
+        alignItems: "center"
+      }
+    },
+    "Options",
+    /* @__PURE__ */ React19.createElement(Sheet.Close, null, /* @__PURE__ */ React19.createElement(Box, { css: { color: "$on_surface_high" } }, /* @__PURE__ */ React19.createElement(CrossIcon3, null)))
+  ), /* @__PURE__ */ React19.createElement(
+    Box,
+    {
+      css: {
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr 1fr",
+        gridTemplateRows: "auto",
+        gridColumnGap: "$6",
+        gridRowGap: "$8",
+        px: "$9"
+      }
+    },
+    (elements == null ? void 0 : elements.participant_list) && /* @__PURE__ */ React19.createElement(
+      ActionTile.Root,
+      {
+        onClick: () => {
+          toggleParticipants();
+          setOpenOptionsSheet(false);
+        }
+      },
+      /* @__PURE__ */ React19.createElement(ActionTile.Count, null, getFormattedCount(peerCount)),
+      /* @__PURE__ */ React19.createElement(PeopleIcon, null),
+      /* @__PURE__ */ React19.createElement(ActionTile.Title, null, "Participants")
+    ),
+    elements.hand_raise ? /* @__PURE__ */ React19.createElement(
+      ActionTile.Root,
+      {
+        active: isHandRaised,
+        onClick: () => {
+          toggleHandRaise();
+          setOpenOptionsSheet(false);
+        }
+      },
+      isHandRaised ? /* @__PURE__ */ React19.createElement(HandRaiseSlashedIcon, null) : /* @__PURE__ */ React19.createElement(HandIcon, null),
+      /* @__PURE__ */ React19.createElement(ActionTile.Title, null, isHandRaised ? "Lower" : "Raise", " Hand")
+    ) : null,
+    /* @__PURE__ */ React19.createElement(NoiseCancellation, { setOpenOptionsSheet, actionTile: true }),
+    isTranscriptionAllowed ? /* @__PURE__ */ React19.createElement(
+      ActionTile.Root,
+      {
+        onClick: () => {
+          setOpenOptionsSheet(false);
+          updateState(MODALS2.CAPTION, true);
+        }
+      },
+      isTranscriptionEnabled && isCaptionEnabled ? /* @__PURE__ */ React19.createElement(ClosedCaptionIcon, null) : /* @__PURE__ */ React19.createElement(OpenCaptionIcon2, null),
+      /* @__PURE__ */ React19.createElement(ActionTile.Title, null, "Closed Caption")
+    ) : null,
+    isLocalVideoEnabled && !!(elements == null ? void 0 : elements.virtual_background) ? /* @__PURE__ */ React19.createElement(
+      ActionTile.Root,
+      {
+        onClick: () => {
+          toggleVB();
+          setOpenOptionsSheet(false);
+        }
+      },
+      /* @__PURE__ */ React19.createElement(VirtualBackgroundIcon, null),
+      /* @__PURE__ */ React19.createElement(ActionTile.Title, null, "Virtual Background")
+    ) : null,
+    (elements == null ? void 0 : elements.emoji_reactions) && !(isLandscapeHLSStream || isMobileHLSStream) && /* @__PURE__ */ React19.createElement(
+      ActionTile.Root,
+      {
+        onClick: () => {
+          setShowEmojiCard(true);
+          setOpenOptionsSheet(false);
+        }
+      },
+      /* @__PURE__ */ React19.createElement(EmojiIcon, null),
+      /* @__PURE__ */ React19.createElement(ActionTile.Title, null, "Emoji Reactions")
+    ),
+    showPolls && /* @__PURE__ */ React19.createElement(
+      ActionTile.Root,
+      {
+        onClick: () => {
+          togglePollView();
+          setOpenOptionsSheet(false);
+          setUnreadPollQuiz(false);
+        }
+      },
+      unreadPollQuiz ? /* @__PURE__ */ React19.createElement(QuizActiveIcon, null) : /* @__PURE__ */ React19.createElement(QuizIcon, null),
+      /* @__PURE__ */ React19.createElement(ActionTile.Title, null, "Polls and Quizzes")
+    ),
+    (elements == null ? void 0 : elements.brb) && /* @__PURE__ */ React19.createElement(
+      ActionTile.Root,
+      {
+        active: isBRBOn,
+        onClick: () => {
+          toggleBRB();
+          setOpenOptionsSheet(false);
+        }
+      },
+      /* @__PURE__ */ React19.createElement(BrbIcon2, null),
+      /* @__PURE__ */ React19.createElement(ActionTile.Title, null, "Be Right Back")
+    ),
+    /* @__PURE__ */ React19.createElement(
+      ActionTile.Root,
+      {
+        onClick: () => {
+          setOpenSettingsSheet(true);
+          setOpenOptionsSheet(false);
+        }
+      },
+      /* @__PURE__ */ React19.createElement(SettingsIcon2, null),
+      /* @__PURE__ */ React19.createElement(ActionTile.Title, null, "Settings")
+    ),
+    isConnected && (permissions == null ? void 0 : permissions.browserRecording) ? /* @__PURE__ */ React19.createElement(
+      ActionTile.Root,
+      {
+        disabled: isHLSRunning,
+        onClick: () => __async(void 0, null, function* () {
+          if (isRecordingLoading) {
+            return;
+          }
+          if (isBrowserRecordingOn || isStreamingOn) {
+            setOpenOptionsSheet(false);
+            setShowRecordingOn(true);
+          } else {
+            yield startRecording();
+            setOpenOptionsSheet(false);
+          }
+          if (isHLSRunning) {
+            setOpenOptionsSheet(false);
+          }
+        })
+      },
+      isRecordingLoading ? /* @__PURE__ */ React19.createElement(Loading, null) : /* @__PURE__ */ React19.createElement(RecordIcon, null),
+      /* @__PURE__ */ React19.createElement(ActionTile.Title, null, match3({ isBrowserRecordingOn, isRecordingLoading }).with({ isBrowserRecordingOn: true, isRecordingLoading: false }, () => "Recording On").with({ isRecordingLoading: true }, () => "Starting Recording").with({ isRecordingLoading: false }, () => "Start Recording").otherwise(() => null))
+    ) : null,
+    title || description ? /* @__PURE__ */ React19.createElement(
+      ActionTile.Root,
+      {
+        onClick: () => {
+          setOpenOptionsSheet(false);
+          toggleDetailsSheet();
+        }
+      },
+      /* @__PURE__ */ React19.createElement(InfoIcon3, null),
+      /* @__PURE__ */ React19.createElement(ActionTile.Title, null, "About Session")
+    ) : null
+  ))), /* @__PURE__ */ React19.createElement(SettingsModal_default, { open: openSettingsSheet, onOpenChange: setOpenSettingsSheet, screenType }), openModals.has(MODALS2.MUTE_ALL) && /* @__PURE__ */ React19.createElement(MuteAllModal, { onOpenChange: (value) => updateState(MODALS2.MUTE_ALL, value), isMobile: true }), openModals.has(MODALS2.CHANGE_NAME) && /* @__PURE__ */ React19.createElement(
+    ChangeNameModal,
+    {
+      onOpenChange: (value) => updateState(MODALS2.CHANGE_NAME, value),
+      openParentSheet: () => setOpenOptionsSheet(true)
+    }
+  ), openModals.has(MODALS2.CAPTION) && /* @__PURE__ */ React19.createElement(CaptionModal, { onOpenChange: (value) => updateState(MODALS2.CAPTION, value) }), showEmojiCard && /* @__PURE__ */ React19.createElement(
+    Box,
+    {
+      ref: emojiCardRef,
+      css: {
+        maxWidth: "100%",
+        w: "100%",
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: "$18",
+        bg: "$surface_default",
+        zIndex: "10",
+        p: "$8",
+        pb: 0,
+        r: "$1",
+        mx: "$4"
+      }
+    },
+    /* @__PURE__ */ React19.createElement(EmojiReaction, { showCard: true })
+  ), showRecordingOn && /* @__PURE__ */ React19.createElement(
+    StopRecordingInSheet,
+    {
+      onClose: () => setShowRecordingOn(false),
+      onStopRecording: () => __async(void 0, null, function* () {
+        try {
+          yield hmsActions.stopRTMPAndRecording();
+          setShowRecordingOn(false);
+        } catch (error) {
+          ToastManager.addToast({
+            // @ts-ignore
+            title: error.message,
+            variant: "error"
+          });
+        }
+      })
+    }
+  ));
+};
+
+// src/Prebuilt/components/MoreSettings/MoreSettings.tsx
+var MoreSettings = ({
+  elements,
+  screenType
+}) => {
+  const isMobile = useMedia4(config.media.md);
+  const isLandscapeHLSStream = useLandscapeHLSStream();
+  return isMobile || isLandscapeHLSStream ? /* @__PURE__ */ React20.createElement(MwebOptions, { elements, screenType }) : /* @__PURE__ */ React20.createElement(DesktopOptions, { elements, screenType });
+};
+
+export {
+  useIsPeerBlacklisted,
+  usePinnedMessages,
+  CHAT_MESSAGE_LIMIT,
+  AnnotisedMessage,
+  ChatBody,
+  ActivatedPIP,
+  useUnreadPollQuizPresent,
+  MoreSettings
+};
+//# sourceMappingURL=chunk-2J5WS52X.js.map