@100mslive/roomkit-react 0.3.24-alpha.0 → 0.3.24-alpha.1

package/dist/SidePaneTabs-NXHBI2JB.js

@@ -1,1354 +0,0 @@
-import {
-  Participant,
-  ParticipantList,
-  ParticipantSearch,
-  ROW_HEIGHT,
-  itemKey
-} from "./chunk-U4SQBXPZ.js";
-import {
-  AnnotisedMessage,
-  CHAT_MESSAGE_LIMIT,
-  ChatBody,
-  MoreSettings,
-  useIsPeerBlacklisted,
-  usePinnedMessages
-} from "./chunk-ETRNLEWQ.js";
-import "./chunk-3C7IESSI.js";
-import "./chunk-7FD3VT6Q.js";
-import {
-  RaiseHand
-} from "./chunk-OV6MVDCL.js";
-import "./chunk-AHI4HCY3.js";
-import {
-  useSidepaneResetOnLayoutUpdate
-} from "./chunk-LXJGCRKM.js";
-import {
-  Button,
-  HorizontalDivider,
-  Loading,
-  Mm,
-  Popover,
-  Sheet,
-  Tabs,
-  Xm,
-  useIsSidepaneTypeOpen,
-  useSidepaneReset,
-  useSidepaneToggle
-} from "./chunk-MG3UGW66.js";
-import {
-  Text
-} from "./chunk-MUKUP7JU.js";
-import {
-  Dropdown,
-  ToastManager,
-  useDefaultChatSelection,
-  useFilteredRoles,
-  useLandscapeHLSStream,
-  useMobileHLSStream
-} from "./chunk-DANANDDE.js";
-import {
-  Box,
-  Flex
-} from "./chunk-GOXRTCTY.js";
-import {
-  IconButton,
-  Tooltip,
-  getFormattedCount,
-  useRoomLayoutConferencingScreen,
-  useSetSubscribedChatSelector,
-  useSubscribeChatSelector
-} from "./chunk-BGSYLCVD.js";
-import {
-  APP_DATA,
-  CHAT_SELECTOR,
-  SIDE_PANE_OPTIONS,
-  __async,
-  __objRest,
-  __spreadProps,
-  __spreadValues,
-  config,
-  init_define_process_env,
-  styled
-} from "./chunk-GLAJUP3O.js";
-
-// src/Prebuilt/components/SidePaneTabs.tsx
-init_define_process_env();
-import React11, { useEffect as useEffect5, useState as useState6 } from "react";
-import { useMedia as useMedia6 } from "react-use";
-import { match as match2 } from "ts-pattern";
-import { selectPeerCount, useHMSStore as useHMSStore9 } from "@100mslive/react-sdk";
-import { CrossIcon as CrossIcon3 } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/Chat/Chat.tsx
-init_define_process_env();
-import React8, { Suspense, useCallback as useCallback4, useRef as useRef3 } from "react";
-import { useMedia as useMedia5 } from "react-use";
-import { match } from "ts-pattern";
-import { selectHMSMessagesCount, useHMSActions as useHMSActions4, useHMSStore as useHMSStore6, useHMSVanillaStore } from "@100mslive/react-sdk";
-import { ChevronDownIcon as ChevronDownIcon3 } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/Chat/ChatFooter.tsx
-init_define_process_env();
-import React3, { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
-import { useMedia as useMedia3 } from "react-use";
-import data from "@emoji-mart/data/sets/14/apple.json";
-import Picker from "@emoji-mart/react";
-import { selectLocalPeer, useHMSActions as useHMSActions2, useHMSStore as useHMSStore3 } from "@100mslive/react-sdk";
-import { EmojiIcon, PauseCircleIcon, SendIcon, VerticalMenuIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/Chat/ChatSelectorContainer.tsx
-init_define_process_env();
-import React2, { useState as useState2 } from "react";
-import { useMedia as useMedia2 } from "react-use";
-import { ChevronDownIcon, ChevronUpIcon, CrossIcon, GroupIcon, PersonIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/Chat/ChatSelector.tsx
-init_define_process_env();
-import React, { useMemo, useState } from "react";
-import { useMedia } from "react-use";
-import {
-  HMSPeerType,
-  selectMessagesUnreadCountByPeerID,
-  selectMessagesUnreadCountByRole,
-  selectRemotePeers,
-  selectUnreadHMSMessagesCount,
-  useHMSStore
-} from "@100mslive/react-sdk";
-import { CheckIcon, PeopleIcon } from "@100mslive/react-icons";
-var ChatDotIcon = () => {
-  return /* @__PURE__ */ React.createElement(Box, { css: { size: "$6", bg: "$primary_default", mx: "$2", r: "$round" } });
-};
-var SelectorItem = ({
-  value,
-  active,
-  onClick,
-  unreadCount,
-  icon = void 0
-}) => {
-  const isMobile = useMedia(config.media.md);
-  const Root = !isMobile ? Dropdown.Item : (_a) => {
-    var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-    return /* @__PURE__ */ React.createElement(Flex, __spreadProps(__spreadValues({}, rest), { css: __spreadValues({ p: "$6 $8" }, rest.css) }), children);
-  };
-  return /* @__PURE__ */ React.createElement(
-    Root,
-    {
-      "data-testid": "chat_members",
-      css: { align: "center", px: "$10", py: "$4", bg: "$surface_default" },
-      onClick
-    },
-    /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        variant: "sm",
-        css: { display: "flex", alignItems: "center", gap: "$4", fontWeight: "$semiBold", color: "$on_surface_high" }
-      },
-      icon,
-      value
-    ),
-    /* @__PURE__ */ React.createElement(Flex, { align: "center", css: { ml: "auto", color: "$on_primary_high" } }, unreadCount > 0 && /* @__PURE__ */ React.createElement(Tooltip, { title: `${unreadCount} unread` }, /* @__PURE__ */ React.createElement(Box, { css: { mr: active ? "$3" : 0 } }, /* @__PURE__ */ React.createElement(ChatDotIcon, null))), active && /* @__PURE__ */ React.createElement(CheckIcon, { width: 16, height: 16 }))
-  );
-};
-var SelectorHeader = React.memo(
-  ({ isHorizontalDivider = true, children }) => {
-    return /* @__PURE__ */ React.createElement(Box, { css: { flexShrink: 0 } }, isHorizontalDivider && /* @__PURE__ */ React.createElement(HorizontalDivider, { space: 4 }), /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        variant: "overline",
-        css: { p: "$4 $10", fontWeight: "$semiBold", textTransform: "uppercase", color: "$on_surface_medium" }
-      },
-      children
-    ));
-  }
-);
-var Everyone = React.memo(({ active }) => {
-  const unreadCount = useHMSStore(selectUnreadHMSMessagesCount);
-  const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
-  const [, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
-  return /* @__PURE__ */ React.createElement(
-    SelectorItem,
-    {
-      value: "Everyone",
-      icon: /* @__PURE__ */ React.createElement(PeopleIcon, null),
-      active,
-      unreadCount,
-      onClick: () => {
-        setPeerSelector({});
-        setRoleSelector("");
-      }
-    }
-  );
-});
-var RoleItem = React.memo(({ role, active }) => {
-  const unreadCount = useHMSStore(selectMessagesUnreadCountByRole(role));
-  const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
-  const [, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
-  return /* @__PURE__ */ React.createElement(
-    SelectorItem,
-    {
-      value: role,
-      active,
-      unreadCount,
-      onClick: () => {
-        setPeerSelector({});
-        setRoleSelector(role);
-      }
-    }
-  );
-});
-var PeerItem = ({ peerId, name, active }) => {
-  const unreadCount = useHMSStore(selectMessagesUnreadCountByPeerID(peerId));
-  const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
-  const [, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
-  return /* @__PURE__ */ React.createElement(
-    SelectorItem,
-    {
-      value: name,
-      active,
-      unreadCount,
-      onClick: () => {
-        setPeerSelector({ id: peerId, name });
-        setRoleSelector("");
-      }
-    }
-  );
-};
-var VirtualizedSelectItemList = ({
-  peers,
-  selectedRole,
-  selectedPeerId,
-  searchValue,
-  isPublicChatEnabled
-}) => {
-  const roles = useFilteredRoles();
-  const filteredPeers = useMemo(
-    () => peers.filter(
-      // search should be empty or search phrase should be included in name
-      (peer) => (!searchValue || peer.name.toLowerCase().includes(searchValue.toLowerCase())) && peer.type !== HMSPeerType.SIP
-    ),
-    [peers, searchValue]
-  );
-  const listItems = useMemo(() => {
-    let selectItems = [];
-    if (isPublicChatEnabled && !searchValue) {
-      selectItems = [/* @__PURE__ */ React.createElement(Everyone, { active: !selectedRole && !selectedPeerId })];
-    }
-    if (roles.length > 0 && !searchValue) {
-      selectItems.push(/* @__PURE__ */ React.createElement(SelectorHeader, { isHorizontalDivider: isPublicChatEnabled }, "Roles"));
-      roles.forEach(
-        (userRole) => selectItems.push(/* @__PURE__ */ React.createElement(RoleItem, { key: userRole, active: selectedRole === userRole, role: userRole }))
-      );
-    }
-    if (filteredPeers.length > 0) {
-      selectItems.push(
-        /* @__PURE__ */ React.createElement(SelectorHeader, { isHorizontalDivider: isPublicChatEnabled || roles.length > 0 }, "Participants")
-      );
-    }
-    filteredPeers.forEach(
-      (peer) => selectItems.push(
-        /* @__PURE__ */ React.createElement(PeerItem, { key: peer.id, name: peer.name, peerId: peer.id, active: peer.id === selectedPeerId })
-      )
-    );
-    return selectItems;
-  }, [isPublicChatEnabled, searchValue, selectedRole, selectedPeerId, roles, filteredPeers]);
-  return /* @__PURE__ */ React.createElement(Dropdown.Group, { css: { overflowY: "auto", maxHeight: "$64", bg: "$surface_default" } }, listItems.map((item, index) => /* @__PURE__ */ React.createElement(Box, { key: index }, item)));
-};
-var ChatSelector = ({ role, peerId }) => {
-  var _a, _b;
-  const { elements } = useRoomLayoutConferencingScreen();
-  const peers = useHMSStore(selectRemotePeers);
-  const [search, setSearch] = useState("");
-  const isPrivateChatEnabled = !!((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.private_chat_enabled);
-  const isPublicChatEnabled = !!((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.public_chat_enabled);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, peers.length > 0 && isPrivateChatEnabled && /* @__PURE__ */ React.createElement(Box, { css: { px: "$4" } }, /* @__PURE__ */ React.createElement(ParticipantSearch, { onSearch: setSearch, placeholder: "Search for participants" })), /* @__PURE__ */ React.createElement(
-    VirtualizedSelectItemList,
-    {
-      selectedRole: role,
-      selectedPeerId: peerId,
-      peers: isPrivateChatEnabled ? peers : [],
-      isPublicChatEnabled,
-      searchValue: search
-    }
-  ));
-};
-
-// src/Prebuilt/components/Chat/ChatSelectorContainer.tsx
-var ChatSelectorContainer = () => {
-  var _a, _b;
-  const [open, setOpen] = useState2(false);
-  const isMobile = useMedia2(config.media.md);
-  const { elements } = useRoomLayoutConferencingScreen();
-  const isPrivateChatEnabled = !!((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.private_chat_enabled);
-  const isPublicChatEnabled = !!((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.public_chat_enabled);
-  const roles = useFilteredRoles();
-  const selectedPeer = useSubscribeChatSelector(CHAT_SELECTOR.PEER);
-  const selectedRole = useSubscribeChatSelector(CHAT_SELECTOR.ROLE);
-  const defaultSelection = useDefaultChatSelection();
-  const selection = selectedPeer.name || selectedRole || defaultSelection;
-  if (!(isPrivateChatEnabled || isPublicChatEnabled || roles.length > 0) && !isPrivateChatEnabled && !selection) {
-    return null;
-  }
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Flex, { align: "center", css: { mb: "$8", flex: "1 1 0", pl: "$2" } }, /* @__PURE__ */ React2.createElement(Text, { variant: "xs", css: { color: "$on_surface_medium" } }, selection ? "To" : "Choose Participant"), isMobile ? /* @__PURE__ */ React2.createElement(
-    Flex,
-    {
-      align: "center",
-      css: { c: "$on_surface_medium", border: "1px solid $border_bright", r: "$0", p: "$1 $2", ml: "$6" },
-      gap: "1",
-      onClick: (e) => {
-        setOpen((value) => !value);
-        e.stopPropagation();
-      }
-    },
-    /* @__PURE__ */ React2.createElement(
-      Text,
-      {
-        variant: "caption",
-        css: {
-          c: "$on_surface_high",
-          pr: "$2",
-          display: "flex",
-          alignItems: "center",
-          gap: "$1",
-          textTransform: selection !== selectedPeer.name ? "capitalize" : void 0
-        }
-      },
-      selection === CHAT_SELECTOR.EVERYONE ? /* @__PURE__ */ React2.createElement(GroupIcon, { width: 16, height: 16 }) : /* @__PURE__ */ React2.createElement(PersonIcon, { width: 16, height: 16 }),
-      selection || "Search"
-    ),
-    selection && (open ? /* @__PURE__ */ React2.createElement(ChevronUpIcon, { width: 16, height: 16 }) : /* @__PURE__ */ React2.createElement(ChevronDownIcon, { width: 16, height: 16 }))
-  ) : /* @__PURE__ */ React2.createElement(Dropdown.Root, { open, onOpenChange: (value) => setOpen(value) }, /* @__PURE__ */ React2.createElement(
-    Dropdown.Trigger,
-    {
-      asChild: true,
-      "data-testid": "participant_list_filter",
-      css: {
-        background: "$primary_default",
-        r: "$0",
-        p: "$1 $2",
-        ml: "$6"
-      },
-      tabIndex: 0
-    },
-    /* @__PURE__ */ React2.createElement(Flex, { align: "center", css: { c: "$on_surface_medium" }, gap: "1" }, /* @__PURE__ */ React2.createElement(
-      Text,
-      {
-        variant: "caption",
-        css: {
-          c: "$on_surface_high",
-          pr: "$2",
-          display: "flex",
-          alignItems: "center",
-          gap: "$1",
-          textTransform: selection !== selectedPeer.name ? "capitalize" : void 0
-        }
-      },
-      selection === CHAT_SELECTOR.EVERYONE ? /* @__PURE__ */ React2.createElement(GroupIcon, { width: 16, height: 16 }) : /* @__PURE__ */ React2.createElement(PersonIcon, { width: 16, height: 16 }),
-      selection || "Search"
-    ), selection && /* @__PURE__ */ React2.createElement(
-      ChevronDownIcon,
-      {
-        style: { transform: open ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 150ms ease" },
-        width: 12,
-        height: 12
-      }
-    ))
-  ), /* @__PURE__ */ React2.createElement(
-    Dropdown.Content,
-    {
-      css: {
-        w: "$64",
-        overflow: "hidden",
-        maxHeight: "unset",
-        bg: "$surface_default"
-      },
-      align: "start",
-      sideOffset: 8
-    },
-    /* @__PURE__ */ React2.createElement(ChatSelector, { role: selectedRole, peerId: selectedPeer.id })
-  ))), isMobile ? /* @__PURE__ */ React2.createElement(Sheet.Root, { open, onOpenChange: (value) => setOpen(value) }, /* @__PURE__ */ React2.createElement(Sheet.Content, { css: { pt: "$8" } }, /* @__PURE__ */ React2.createElement(
-    Sheet.Title,
-    {
-      css: {
-        display: "flex",
-        w: "100%",
-        justifyContent: "space-between",
-        px: "$10",
-        pb: "$4",
-        mb: "$8",
-        borderBottom: "1px solid $border_bright"
-      }
-    },
-    /* @__PURE__ */ React2.createElement(Text, { css: { color: "$on_surface_medium", fontWeight: "$semiBold" } }, "Chat with"),
-    /* @__PURE__ */ React2.createElement(Sheet.Close, { css: { color: "$on_surface_medium" } }, /* @__PURE__ */ React2.createElement(CrossIcon, null))
-  ), /* @__PURE__ */ React2.createElement(
-    Box,
-    {
-      onClick: () => {
-        setOpen(false);
-      }
-    },
-    /* @__PURE__ */ React2.createElement(ChatSelector, { role: selectedRole, peerId: selectedPeer.id })
-  ))) : null);
-};
-
-// src/Prebuilt/components/AppData/useChatState.js
-init_define_process_env();
-import { useCallback } from "react";
-import { selectAppData, useHMSActions, useHMSStore as useHMSStore2 } from "@100mslive/react-sdk";
-var useChatDraftMessage = () => {
-  const hmsActions = useHMSActions();
-  let chatDraftMessage = useHMSStore2(selectAppData(APP_DATA.chatDraft));
-  if (chatDraftMessage === void 0 || chatDraftMessage === null) {
-    chatDraftMessage = "";
-  }
-  const setDraftMessage = useCallback(
-    (message) => {
-      hmsActions.setAppData(APP_DATA.chatDraft, message, true);
-    },
-    [hmsActions]
-  );
-  return [chatDraftMessage, setDraftMessage];
-};
-
-// src/Prebuilt/components/Chat/useEmojiPickerStyles.js
-init_define_process_env();
-import { useEffect, useRef } from "react";
-var useEmojiPickerStyles = (showing) => {
-  const ref = useRef(null);
-  useEffect(() => {
-    if (showing) {
-      setTimeout(() => {
-        var _a, _b;
-        const root = (_b = (_a = ref.current) == null ? void 0 : _a.querySelector("em-emoji-picker")) == null ? void 0 : _b.shadowRoot;
-        const style = document.createElement("style");
-        style.textContent = `
-          #root {
-            --em-rgb-color: var(--hms-ui-colors-on_surface_high);
-            --em-rgb-input: var(--hms-ui-colors-on_primary_high);
-            --em-color-border: var(--hms-ui-colors-surface_bright);
-            --color-b: var(--hms-ui-colors-on_surface_high);
-            --rgb-background: transparent;
-            color: var(--hms-ui-colors-on_surface_high);
-            font-family: var(--hms-ui-fonts-sans);
-          }
-          .sticky {
-            top: 0.25rem;
-            background-color: var(--hms-ui-colors-surface_bright);
-            margin-top: 0.5rem;
-          }
-        `;
-        root == null ? void 0 : root.appendChild(style);
-      }, 0);
-    }
-  }, [showing]);
-  return ref;
-};
-
-// src/Prebuilt/components/Chat/ChatFooter.tsx
-var TextArea = styled("textarea", {
-  width: "100%",
-  bg: "transparent",
-  color: "$on_primary_high",
-  resize: "none",
-  lineHeight: "1rem",
-  position: "relative",
-  fontFamily: "$sans",
-  fontSize: "100%",
-  margin: 0,
-  padding: 0,
-  top: "$3",
-  "&:focus": {
-    boxShadow: "none",
-    outline: "none"
-  }
-});
-function EmojiPicker({ onSelect }) {
-  const [showEmoji, setShowEmoji] = useState3(false);
-  const ref = useEmojiPickerStyles(showEmoji);
-  return /* @__PURE__ */ React3.createElement(Popover.Root, { open: showEmoji, onOpenChange: setShowEmoji }, /* @__PURE__ */ React3.createElement(Popover.Trigger, { asChild: true, css: { appearance: "none" } }, /* @__PURE__ */ React3.createElement(IconButton, { as: "div" }, /* @__PURE__ */ React3.createElement(EmojiIcon, null))), /* @__PURE__ */ React3.createElement(Popover.Portal, null, /* @__PURE__ */ React3.createElement(
-    Popover.Content,
-    {
-      alignOffset: -40,
-      sideOffset: 16,
-      align: "end",
-      css: {
-        p: 0
-      }
-    },
-    /* @__PURE__ */ React3.createElement(
-      Box,
-      {
-        css: {
-          minWidth: 352,
-          minHeight: 435
-        },
-        ref
-      },
-      /* @__PURE__ */ React3.createElement(Picker, { onEmojiSelect: onSelect, data, previewPosition: "none", skinPosition: "search" })
-    )
-  )));
-}
-var ChatFooter = ({ onSend, children }) => {
-  var _a, _b, _c, _d, _e;
-  const hmsActions = useHMSActions2();
-  const inputRef = useRef2(null);
-  const [draftMessage, setDraftMessage] = useChatDraftMessage();
-  const isMobile = useMedia3(config.media.md);
-  const { elements, screenType } = useRoomLayoutConferencingScreen();
-  const message_placeholder = ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.message_placeholder) || "Send a message";
-  const localPeer = useHMSStore3(selectLocalPeer);
-  const isOverlayChat = (_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.is_overlay;
-  const canDisableChat = !!((_d = (_c = elements == null ? void 0 : elements.chat) == null ? void 0 : _c.real_time_controls) == null ? void 0 : _d.can_disable_chat);
-  const selectedPeer = useSubscribeChatSelector(CHAT_SELECTOR.PEER);
-  const [selectedRole, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
-  const defaultSelection = useDefaultChatSelection();
-  const selection = selectedPeer.name || selectedRole || defaultSelection;
-  const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
-  const isMwebHLSStream = useMobileHLSStream();
-  const [messageLengthExceeded, setMessageLengthExceeded] = useState3(false);
-  const isLandscapeHLSStream = useLandscapeHLSStream();
-  useEffect2(() => {
-    var _a2, _b2;
-    if (!selectedPeer.id && !selectedRole && !["Everyone", ""].includes(defaultSelection)) {
-      setRoleSelector(defaultSelection);
-    } else {
-      if (!(isMobile || isLandscapeHLSStream) && !((_a2 = elements == null ? void 0 : elements.chat) == null ? void 0 : _a2.disable_autofocus)) {
-        (_b2 = inputRef.current) == null ? void 0 : _b2.focus();
-      }
-    }
-  }, [defaultSelection, selectedPeer, selectedRole, setRoleSelector, isMobile, isLandscapeHLSStream, elements == null ? void 0 : elements.chat]);
-  const resetInputHeight = useCallback2(() => {
-    if (inputRef.current) {
-      inputRef.current.style.height = `${Math.max(
-        32,
-        inputRef.current.value ? Math.min(inputRef.current.scrollHeight, 24 * 4) : 0
-      )}px`;
-    }
-  }, []);
-  const updateInputHeight = useCallback2(() => {
-    if (inputRef.current) {
-      inputRef.current.style.height = `${Math.max(32, Math.min(inputRef.current.scrollHeight, 24 * 4))}px`;
-    }
-  }, []);
-  const sendMessage = useCallback2(() => __async(void 0, null, function* () {
-    var _a2;
-    const message = (_a2 = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a2.value;
-    if (!message || !message.trim().length) {
-      return;
-    }
-    try {
-      if (selectedRole) {
-        yield hmsActions.sendGroupMessage(message, [selectedRole]);
-      } else if (selectedPeer.id) {
-        yield hmsActions.sendDirectMessage(message, selectedPeer.id);
-      } else {
-        yield hmsActions.sendBroadcastMessage(message);
-      }
-      inputRef.current.value = "";
-      resetInputHeight();
-      setTimeout(() => {
-        onSend(1);
-      }, 0);
-    } catch (error) {
-      const err = error;
-      ToastManager.addToast({
-        title: err.message.startsWith("Invalid peer") ? `${selectedPeer.name} is not in this room` : err.message
-      });
-    }
-  }), [selectedRole, selectedPeer, hmsActions, onSend]);
-  useEffect2(() => {
-    const messageElement = inputRef.current;
-    if (messageElement) {
-      messageElement.value = draftMessage;
-      updateInputHeight();
-      setMessageLengthExceeded(draftMessage.length > CHAT_MESSAGE_LIMIT);
-    }
-  }, [draftMessage]);
-  useEffect2(() => {
-    const messageElement = inputRef.current;
-    return () => {
-      setDraftMessage((messageElement == null ? void 0 : messageElement.value) || "");
-    };
-  }, [setDraftMessage]);
-  if (isLocalPeerBlacklisted) {
-    return null;
-  }
-  return /* @__PURE__ */ React3.createElement(Box, { css: { position: "relative" } }, /* @__PURE__ */ React3.createElement(Flex, null, /* @__PURE__ */ React3.createElement(ChatSelectorContainer, null), canDisableChat && isMobile && isOverlayChat ? /* @__PURE__ */ React3.createElement(Flex, { align: "center", justify: "end", css: { mb: "$4" }, onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React3.createElement(Popover.Root, null, /* @__PURE__ */ React3.createElement(Popover.Trigger, { asChild: true }, /* @__PURE__ */ React3.createElement(IconButton, { css: { border: "1px solid $border_bright" } }, /* @__PURE__ */ React3.createElement(VerticalMenuIcon, { height: "16", width: "16" }))), /* @__PURE__ */ React3.createElement(Popover.Portal, null, /* @__PURE__ */ React3.createElement(
-    Popover.Content,
-    {
-      align: "end",
-      side: "top",
-      onClick: () => {
-        const chatState = {
-          enabled: false,
-          updatedBy: {
-            peerId: localPeer == null ? void 0 : localPeer.id,
-            userId: localPeer == null ? void 0 : localPeer.customerUserId,
-            userName: localPeer == null ? void 0 : localPeer.name
-          },
-          updatedAt: Date.now()
-        };
-        hmsActions.sessionStore.set("chatState" /* CHAT_STATE */, chatState);
-      },
-      css: {
-        backgroundColor: "$surface_default",
-        display: "flex",
-        alignItems: "center",
-        gap: "$4",
-        borderRadius: "$1",
-        color: "$on_surface_high",
-        cursor: "pointer",
-        "&:hover": { backgroundColor: "$surface_dim" }
-      }
-    },
-    /* @__PURE__ */ React3.createElement(PauseCircleIcon, null),
-    /* @__PURE__ */ React3.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold" } }, "Pause Chat")
-  )))) : null), selection && /* @__PURE__ */ React3.createElement(Flex, { align: ((_e = inputRef.current) == null ? void 0 : _e.scrollHeight) === 32 ? "center" : "end", css: { gap: "$4", w: "100%" } }, /* @__PURE__ */ React3.createElement(
-    Flex,
-    {
-      align: "end",
-      css: __spreadValues({
-        bg: isOverlayChat && isMobile ? "$surface_dim" : "$surface_default",
-        minHeight: "$16",
-        position: "relative",
-        py: isOverlayChat && isMobile ? "$2" : "$6",
-        pl: "$8",
-        flexGrow: 1,
-        r: "$1",
-        "@md": {
-          minHeight: "$14",
-          boxSizing: "border-box"
-        }
-      }, isLandscapeHLSStream ? { minHeight: "$14", py: 0 } : {})
-    },
-    children,
-    /* @__PURE__ */ React3.createElement(
-      TextArea,
-      {
-        maxLength: CHAT_MESSAGE_LIMIT + 10,
-        css: {
-          c: "$on_surface_high",
-          "&:valid ~ .send-msg": { color: "$on_surface_high" },
-          "& ~ .send-msg": { color: "$on_surface_low" },
-          "&::placeholder": { color: "$on_surface_medium" },
-          border: "none"
-        },
-        placeholder: message_placeholder,
-        ref: inputRef,
-        required: true,
-        autoFocus: !(isMobile || isLandscapeHLSStream),
-        onKeyPress: (event) => __async(void 0, null, function* () {
-          if (event.key === "Enter") {
-            if (!event.shiftKey && !messageLengthExceeded) {
-              event.preventDefault();
-              yield sendMessage();
-            }
-          }
-        }),
-        autoComplete: "off",
-        "aria-autocomplete": "none",
-        onChange: (e) => {
-          updateInputHeight();
-          setMessageLengthExceeded(e.target.value.length > CHAT_MESSAGE_LIMIT);
-        },
-        onBlur: resetInputHeight,
-        onPaste: (e) => e.stopPropagation(),
-        onCut: (e) => e.stopPropagation(),
-        onCopy: (e) => e.stopPropagation()
-      }
-    ),
-    !isMobile && !isLandscapeHLSStream ? /* @__PURE__ */ React3.createElement(
-      EmojiPicker,
-      {
-        onSelect: (emoji) => {
-          if (inputRef.current) {
-            inputRef.current.value += ` ${emoji.native} `;
-          }
-        }
-      }
-    ) : null,
-    /* @__PURE__ */ React3.createElement(
-      IconButton,
-      {
-        className: "send-msg",
-        onClick: sendMessage,
-        disabled: messageLengthExceeded,
-        css: {
-          ml: "auto",
-          height: "max-content",
-          mr: "$4",
-          "&:hover": { c: isMobile ? "" : "$on_surface_medium" }
-        },
-        "data-testid": "send_msg_btn"
-      },
-      /* @__PURE__ */ React3.createElement(SendIcon, null)
-    )
-  ), (isMwebHLSStream || isLandscapeHLSStream) && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
-    Flex,
-    {
-      css: {
-        alignItems: "center"
-      },
-      gap: "2"
-    },
-    /* @__PURE__ */ React3.createElement(RaiseHand, { css: { bg: "$surface_default" } }),
-    /* @__PURE__ */ React3.createElement(MoreSettings, { elements, screenType })
-  ))), messageLengthExceeded && /* @__PURE__ */ React3.createElement(Text, { variant: "xs", css: { color: "$alert_error_default", fontWeight: "$semiBold", mt: "$1", ml: "$7" } }, "Message cannot exceed 2000 characters"));
-};
-
-// src/Prebuilt/components/Chat/ChatStates.tsx
-init_define_process_env();
-import React4, { useCallback as useCallback3 } from "react";
-import { selectLocalPeer as selectLocalPeer2, selectSessionStore, useHMSActions as useHMSActions3, useHMSStore as useHMSStore4 } from "@100mslive/react-sdk";
-var ChatPaused = () => {
-  var _a, _b;
-  const hmsActions = useHMSActions3();
-  const { elements } = useRoomLayoutConferencingScreen();
-  const can_disable_chat = !!((_b = (_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.real_time_controls) == null ? void 0 : _b.can_disable_chat);
-  const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy = "" } = useHMSStore4(selectSessionStore("chatState" /* CHAT_STATE */)) || {};
-  const localPeer = useHMSStore4(selectLocalPeer2);
-  const unPauseChat = useCallback3(
-    () => __async(void 0, null, function* () {
-      return yield hmsActions.sessionStore.set("chatState" /* CHAT_STATE */, {
-        enabled: true,
-        updatedBy: { userName: localPeer == null ? void 0 : localPeer.name, userId: localPeer == null ? void 0 : localPeer.customerUserId, peerId: localPeer == null ? void 0 : localPeer.id },
-        updatedAt: Date.now()
-      });
-    }),
-    [hmsActions, localPeer]
-  );
-  return isChatEnabled ? null : /* @__PURE__ */ React4.createElement(
-    Flex,
-    {
-      align: "center",
-      justify: "between",
-      css: { borderRadius: "$1", bg: "$surface_default", p: "$2 $4 $2 $8", w: "100%" }
-    },
-    /* @__PURE__ */ React4.createElement(Box, null, /* @__PURE__ */ React4.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold", color: "$on_surface_high" } }, "Chat paused"), /* @__PURE__ */ React4.createElement(
-      Text,
-      {
-        variant: "xs",
-        css: { color: "$on_surface_medium", maxWidth: "100%", overflow: "hidden", textOverflow: "ellipsis" }
-      },
-      "Chat has been paused by ",
-      (chatStateUpdatedBy == null ? void 0 : chatStateUpdatedBy.peerId) === (localPeer == null ? void 0 : localPeer.id) ? "you" : chatStateUpdatedBy == null ? void 0 : chatStateUpdatedBy.userName
-    )),
-    can_disable_chat ? /* @__PURE__ */ React4.createElement(Button, { css: { fontWeight: "$semiBold", fontSize: "$sm", borderRadius: "$2" }, onClick: unPauseChat }, "Resume") : /* @__PURE__ */ React4.createElement(React4.Fragment, null)
-  );
-};
-var ChatBlocked = () => {
-  const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
-  if (!isLocalPeerBlacklisted) {
-    return null;
-  }
-  return /* @__PURE__ */ React4.createElement(
-    Flex,
-    {
-      align: "center",
-      justify: "between",
-      css: { borderRadius: "$1", bg: "$surface_default", p: "$4 $4 $4 $8", w: "100%" }
-    },
-    /* @__PURE__ */ React4.createElement(Text, { variant: "sm", css: { color: "$on_surface_medium", textAlign: "center", w: "100%" } }, "You've been blocked from sending messages")
-  );
-};
-
-// src/Prebuilt/components/Chat/PinnedMessage.tsx
-init_define_process_env();
-import React7, { useEffect as useEffect3, useState as useState4 } from "react";
-import { useSwipeable } from "react-swipeable";
-import { useMedia as useMedia4 } from "react-use";
-import { selectSessionStore as selectSessionStore2, useHMSStore as useHMSStore5 } from "@100mslive/react-sdk";
-import { PinIcon, UnpinIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/Chat/ArrowNavigation.tsx
-init_define_process_env();
-import React5 from "react";
-import { ChevronDownIcon as ChevronDownIcon2, ChevronUpIcon as ChevronUpIcon2 } from "@100mslive/react-icons";
-var ArrowNavigation = ({
-  total,
-  index,
-  showPrevious,
-  showNext
-}) => {
-  if (total < 2) {
-    return null;
-  }
-  return /* @__PURE__ */ React5.createElement(Flex, { direction: "column", css: { gap: "$1" } }, /* @__PURE__ */ React5.createElement(
-    Flex,
-    {
-      onClick: showPrevious,
-      css: index === 0 ? { cursor: "not-allowed", color: "$on_surface_low" } : { cursor: "pointer", color: "$on_surface_medium" }
-    },
-    /* @__PURE__ */ React5.createElement(ChevronUpIcon2, { height: 20, width: 20 })
-  ), /* @__PURE__ */ React5.createElement(
-    Flex,
-    {
-      onClick: showNext,
-      css: index === total - 1 ? { cursor: "not-allowed", color: "$on_surface_low" } : { cursor: "pointer", color: "$on_surface_medium" }
-    },
-    /* @__PURE__ */ React5.createElement(ChevronDownIcon2, { height: 20, width: 20 })
-  ));
-};
-
-// src/Prebuilt/components/Chat/StickIndicator.tsx
-init_define_process_env();
-import React6 from "react";
-var StickIndicator = ({ total, index }) => {
-  const sticksCount = Math.min(3, total);
-  if (total < 2) {
-    return null;
-  }
-  return /* @__PURE__ */ React6.createElement(Flex, { direction: "column", css: { gap: "$1" } }, [...Array(sticksCount)].map((_, i) => /* @__PURE__ */ React6.createElement(
-    Box,
-    {
-      css: {
-        borderLeft: "2px solid",
-        height: "$4",
-        borderColor: i === index ? "$on_surface_high" : "$on_surface_low"
-      }
-    }
-  )));
-};
-
-// src/Prebuilt/components/Chat/PinnedMessage.tsx
-var PINNED_MESSAGE_LENGTH = 75;
-var PinnedMessage = () => {
-  var _a, _b, _c, _d;
-  const pinnedMessages = useHMSStore5(selectSessionStore2("pinnedMessages" /* PINNED_MESSAGES */));
-  const [pinnedMessageIndex, setPinnedMessageIndex] = useState4(0);
-  const { removePinnedMessage } = usePinnedMessages();
-  const isMobile = useMedia4(config.media.md);
-  const { elements } = useRoomLayoutConferencingScreen();
-  const canUnpinMessage = !!((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.allow_pinning_messages);
-  const [hideOverflow, setHideOverflow] = useState4(true);
-  const currentPinnedMessage = ((_b = pinnedMessages == null ? void 0 : pinnedMessages[pinnedMessageIndex]) == null ? void 0 : _b.text) || "";
-  const canOverflow = currentPinnedMessage.length > PINNED_MESSAGE_LENGTH;
-  const showPreviousPinnedMessage = () => {
-    const previousIndex = Math.max(pinnedMessageIndex - 1, 0);
-    setHideOverflow(pinnedMessages[previousIndex].text.length > PINNED_MESSAGE_LENGTH);
-    setPinnedMessageIndex(previousIndex);
-  };
-  const showNextPinnedMessage = () => {
-    const nextIndex = Math.min(pinnedMessageIndex + 1, pinnedMessages.length - 1);
-    setHideOverflow(pinnedMessages[nextIndex].text.length > PINNED_MESSAGE_LENGTH);
-    setPinnedMessageIndex(nextIndex);
-  };
-  const swipeHandlers = useSwipeable({
-    onSwipedUp: () => showNextPinnedMessage(),
-    onSwipedDown: () => showPreviousPinnedMessage()
-  });
-  useEffect3(() => {
-    const count = (pinnedMessages == null ? void 0 : pinnedMessages.length) || 1;
-    if (pinnedMessageIndex >= count) {
-      setPinnedMessageIndex(count - 1);
-    }
-  }, [pinnedMessageIndex, pinnedMessages]);
-  if (!pinnedMessages || pinnedMessages.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ React7.createElement(Flex, { align: "center", css: { w: "100%", gap: "$4" } }, !isMobile ? /* @__PURE__ */ React7.createElement(
-    ArrowNavigation,
-    {
-      index: pinnedMessageIndex,
-      total: pinnedMessages.length,
-      showPrevious: showPreviousPinnedMessage,
-      showNext: showNextPinnedMessage
-    }
-  ) : null, /* @__PURE__ */ React7.createElement(
-    Flex,
-    {
-      css: {
-        p: "$4",
-        color: "$on_surface_high",
-        bg: isMobile && ((_c = elements == null ? void 0 : elements.chat) == null ? void 0 : _c.is_overlay) ? "rgba(0, 0, 0, 0.64)" : "$surface_brighter",
-        r: "$1",
-        gap: "$4",
-        mb: "$8",
-        mt: "$8",
-        flexGrow: 1,
-        border: "1px solid $border_bright"
-      },
-      align: "center",
-      justify: "between"
-    },
-    isMobile ? /* @__PURE__ */ React7.createElement(StickIndicator, { index: pinnedMessageIndex, total: pinnedMessages.length }) : null,
-    /* @__PURE__ */ React7.createElement(
-      Box,
-      {
-        css: {
-          w: "100%",
-          maxHeight: "$18",
-          overflowY: "auto",
-          overflowX: "hidden",
-          wordBreak: "break-word",
-          "& p span": {
-            color: "$primary_default"
-          }
-        }
-      },
-      /* @__PURE__ */ React7.createElement(
-        Text,
-        __spreadProps(__spreadValues({
-          variant: "sm",
-          css: { color: "$on_surface_high" }
-        }, swipeHandlers), {
-          title: (_d = pinnedMessages[pinnedMessageIndex]) == null ? void 0 : _d.text
-        }),
-        /* @__PURE__ */ React7.createElement(
-          AnnotisedMessage,
-          {
-            message: currentPinnedMessage,
-            length: hideOverflow ? PINNED_MESSAGE_LENGTH : currentPinnedMessage.length
-          }
-        ),
-        canOverflow ? /* @__PURE__ */ React7.createElement("span", { style: { cursor: "pointer" }, onClick: () => setHideOverflow((prev) => !prev) }, "\xA0", hideOverflow ? "... See more" : "Collapse") : null
-      )
-    ),
-    canUnpinMessage ? /* @__PURE__ */ React7.createElement(
-      Flex,
-      {
-        onClick: () => {
-          removePinnedMessage(pinnedMessageIndex);
-          setPinnedMessageIndex(Math.max(0, pinnedMessageIndex - 1));
-        },
-        css: {
-          cursor: "pointer",
-          color: "$on_surface_medium",
-          "&:hover": { color: "$on_surface_high" },
-          "&:hover .hide-on-hover": { display: "none !important" },
-          "&:hover .show-on-hover": { display: "block !important" }
-        },
-        title: "Unpin Message"
-      },
-      /* @__PURE__ */ React7.createElement(UnpinIcon, { className: "show-on-hover", style: { display: "none" }, height: 20, width: 20 }),
-      /* @__PURE__ */ React7.createElement(PinIcon, { className: "hide-on-hover", style: { display: "block" }, height: 20, width: 20 })
-    ) : null
-  ));
-};
-
-// src/Prebuilt/components/Chat/Chat.tsx
-var MoreSettings2 = React8.lazy(
-  () => import("./MoreSettings-WSHMMNOC.js").then((module) => ({ default: module.MoreSettings }))
-);
-var RaiseHand2 = React8.lazy(() => import("./RaiseHand-K7NFLH7H.js").then((module) => ({ default: module.RaiseHand })));
-var EmojiReaction = React8.lazy(() => import("./EmojiReaction-23JDKJD4.js").then((module) => ({ default: module.EmojiReaction })));
-var Chat = () => {
-  var _a, _b;
-  const { elements, screenType } = useRoomLayoutConferencingScreen();
-  const listRef = useRef3(null);
-  const hmsActions = useHMSActions4();
-  const vanillaStore = useHMSVanillaStore();
-  const { enabled: isChatEnabled = true } = useHMSStore6(Xm("chatState" /* CHAT_STATE */)) || {};
-  const isMobile = useMedia5(config.media.md);
-  const isMobileHLSStream = useMobileHLSStream();
-  const isLandscapeStream = useLandscapeHLSStream();
-  useSidepaneResetOnLayoutUpdate("chat", SIDE_PANE_OPTIONS.CHAT);
-  const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
-  const scrollToBottom = useCallback4(
-    (unreadCount = 0) => {
-      var _a2;
-      if (listRef.current && listRef.current.scrollToItem && unreadCount > 0) {
-        const messagesCount = vanillaStore.getState(selectHMSMessagesCount);
-        (_a2 = listRef.current) == null ? void 0 : _a2.scrollToItem(messagesCount, "end");
-        requestAnimationFrame(() => {
-          var _a3;
-          (_a3 = listRef.current) == null ? void 0 : _a3.scrollToItem(messagesCount, "end");
-        });
-        hmsActions.setMessageRead(true);
-      }
-    },
-    [hmsActions, vanillaStore]
-  );
-  const streaming = isMobileHLSStream || isLandscapeStream;
-  return /* @__PURE__ */ React8.createElement(
-    Flex,
-    {
-      direction: "column",
-      justify: "end",
-      css: {
-        size: "100%",
-        gap: "$4"
-      }
-    },
-    isMobile && ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.is_overlay) && !streaming ? null : /* @__PURE__ */ React8.createElement(PinnedMessage, null),
-    /* @__PURE__ */ React8.createElement(ChatBody, { ref: listRef, scrollToBottom }),
-    /* @__PURE__ */ React8.createElement(Flex, { align: "center", css: { w: "100%", gap: "$2" } }, /* @__PURE__ */ React8.createElement(ChatPaused, null), /* @__PURE__ */ React8.createElement(ChatBlocked, null), streaming && (!isChatEnabled || isLocalPeerBlacklisted) && /* @__PURE__ */ React8.createElement(Suspense, { fallback: /* @__PURE__ */ React8.createElement(React8.Fragment, null) }, /* @__PURE__ */ React8.createElement(RaiseHand2, { css: { bg: "$surface_default" } }), /* @__PURE__ */ React8.createElement(MoreSettings2, { elements, screenType }))),
-    isMobile && ((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.is_overlay) && !streaming ? /* @__PURE__ */ React8.createElement(PinnedMessage, null) : null,
-    isChatEnabled ? /* @__PURE__ */ React8.createElement(ChatFooter, { onSend: scrollToBottom }, /* @__PURE__ */ React8.createElement(NewMessageIndicator, { scrollToBottom, listRef })) : null,
-    streaming && /* @__PURE__ */ React8.createElement(
-      Box,
-      {
-        css: __spreadValues({
-          position: "absolute"
-        }, match({ isLandscapeStream, isMobileHLSStream, isChatEnabled, isLocalPeerBlacklisted }).with(
-          {
-            isLandscapeStream: true,
-            isChatEnabled: true
-          },
-          () => ({ bottom: "$19", right: "$10" })
-        ).with(
-          {
-            isLandscapeStream: true,
-            isChatEnabled: false
-          },
-          () => ({ bottom: "$20", right: "$10" })
-        ).with(
-          {
-            isMobileHLSStream: true,
-            isChatEnabled: false
-          },
-          () => ({ bottom: "$19", right: "$8" })
-        ).with(
-          {
-            isMobileHLSStream: true,
-            isChatEnabled: true,
-            isLocalPeerBlacklisted: false
-          },
-          () => ({ bottom: "$17", right: "$8" })
-        ).with(
-          {
-            isLandscapeStream: false,
-            isChatEnabled: true,
-            isLocalPeerBlacklisted: true
-          },
-          () => ({ bottom: "$18", right: "$8" })
-        ).with(
-          {
-            isMobileHLSStream: true,
-            isLocalPeerBlacklisted: true
-          },
-          () => ({ bottom: "$20", right: "$8" })
-        ).otherwise(() => ({})))
-      },
-      /* @__PURE__ */ React8.createElement(Suspense, { fallback: /* @__PURE__ */ React8.createElement(React8.Fragment, null) }, /* @__PURE__ */ React8.createElement(EmojiReaction, null))
-    )
-  );
-};
-var NewMessageIndicator = ({
-  scrollToBottom,
-  listRef
-}) => {
-  const unreadCount = useHMSStore6(Mm);
-  if (!unreadCount || !listRef.current) {
-    return null;
-  }
-  const outerElement = listRef.current._outerRef;
-  if (outerElement && outerElement.clientHeight + outerElement.scrollTop + outerElement.offsetTop >= outerElement.scrollHeight) {
-    return null;
-  }
-  return /* @__PURE__ */ React8.createElement(
-    Flex,
-    {
-      justify: "center",
-      css: {
-        width: "100%",
-        left: 0,
-        bottom: "$28",
-        position: "absolute"
-      }
-    },
-    /* @__PURE__ */ React8.createElement(
-      Button,
-      {
-        variant: "standard",
-        onClick: () => {
-          scrollToBottom(unreadCount);
-        },
-        icon: true,
-        css: {
-          p: "$3 $4",
-          pl: "$6",
-          "& > svg": { ml: "$4" },
-          borderRadius: "$round",
-          fontSize: "$xs",
-          fontWeight: "$semiBold",
-          c: "$on_secondary_high"
-        }
-      },
-      "New ",
-      unreadCount === 1 ? "message" : "messages",
-      /* @__PURE__ */ React8.createElement(ChevronDownIcon3, { height: 16, width: 16 })
-    )
-  );
-};
-
-// src/Prebuilt/components/Footer/PaginatedParticipants.tsx
-init_define_process_env();
-import React9, { useEffect as useEffect4, useState as useState5 } from "react";
-import { useInView } from "react-intersection-observer";
-import { useMeasure } from "react-use";
-import { VariableSizeList } from "react-window";
-import { selectIsConnectedToRoom, useHMSStore as useHMSStore7, usePaginatedParticipants } from "@100mslive/react-sdk";
-import { ChevronLeftIcon, CrossIcon as CrossIcon2 } from "@100mslive/react-icons";
-var LoadMoreParticipants = ({
-  hasNext,
-  loadMore,
-  style
-}) => {
-  const { ref, inView } = useInView();
-  const [inProgress, setInProgress] = useState5(false);
-  useEffect4(() => {
-    if (hasNext && inView && !inProgress) {
-      setInProgress(true);
-      loadMore().catch(console.error).finally(() => setInProgress(false));
-    }
-  }, [hasNext, loadMore, inView, inProgress]);
-  return /* @__PURE__ */ React9.createElement(Flex, { ref, style, align: "center", justify: "center" }, inProgress ? /* @__PURE__ */ React9.createElement(Loading, { size: 16 }) : null);
-};
-var VirtualizedParticipantItem = React9.memo(
-  ({
-    index,
-    data: data2,
-    style
-  }) => {
-    if (!data2.peerList[index]) {
-      return /* @__PURE__ */ React9.createElement(LoadMoreParticipants, { hasNext: data2.hasNext, loadMore: data2.loadMorePeers, style });
-    }
-    return /* @__PURE__ */ React9.createElement(
-      Participant,
-      {
-        key: data2.peerList[index].id,
-        peer: data2.peerList[index],
-        isConnected: data2.isConnected,
-        style
-      }
-    );
-  }
-);
-var PaginatedParticipants = ({ roleName, onBack }) => {
-  const { peers, total, hasNext, loadPeers, loadMorePeers } = usePaginatedParticipants({ role: roleName, limit: 20 });
-  const [search, setSearch] = useState5("");
-  const filteredPeers = peers.filter((p) => {
-    var _a;
-    return (_a = p.name) == null ? void 0 : _a.toLowerCase().includes(search == null ? void 0 : search.toLowerCase());
-  });
-  const isConnected = useHMSStore7(selectIsConnectedToRoom);
-  const [ref, { width }] = useMeasure();
-  const height = ROW_HEIGHT * (filteredPeers.length + 1);
-  const resetSidePane = useSidepaneReset();
-  useEffect4(() => {
-    loadPeers();
-  }, []);
-  return /* @__PURE__ */ React9.createElement(Flex, { ref, direction: "column", css: { size: "100%", gap: "$4" } }, /* @__PURE__ */ React9.createElement(Flex, { align: "center" }, /* @__PURE__ */ React9.createElement(Flex, { align: "center", css: { flex: "1 1 0", cursor: "pointer" }, onClick: onBack }, /* @__PURE__ */ React9.createElement(ChevronLeftIcon, null), /* @__PURE__ */ React9.createElement(Text, { variant: "lg", css: { flex: "1 1 0" } }, "Participants")), /* @__PURE__ */ React9.createElement(
-    IconButton,
-    {
-      onClick: (e) => {
-        e.stopPropagation();
-        resetSidePane();
-      },
-      "data-testid": "close_sidepane"
-    },
-    /* @__PURE__ */ React9.createElement(CrossIcon2, null)
-  )), /* @__PURE__ */ React9.createElement(ParticipantSearch, { onSearch: (search2) => setSearch(search2), placeholder: `Search for ${roleName}` }), /* @__PURE__ */ React9.createElement(Flex, { direction: "column", css: { border: "1px solid $border_default", borderRadius: "$1", flex: "1 1 0" } }, /* @__PURE__ */ React9.createElement(Flex, { align: "center", css: { height: ROW_HEIGHT, borderBottom: "1px solid $border_default", px: "$8" } }, /* @__PURE__ */ React9.createElement(Text, { css: { fontSize: "$space$7" } }, roleName, "(", getFormattedCount(peers.length), "/", getFormattedCount(total), ")")), /* @__PURE__ */ React9.createElement(Box, { css: { flex: "1 1 0", overflowY: "auto", overflowX: "hidden", mr: "-$10" } }, /* @__PURE__ */ React9.createElement(
-    VariableSizeList,
-    {
-      itemSize: (index) => index === filteredPeers.length + 1 ? 16 : ROW_HEIGHT,
-      itemData: { peerList: filteredPeers, hasNext: hasNext(), loadMorePeers, isConnected: isConnected === true },
-      itemKey,
-      itemCount: filteredPeers.length + 1,
-      width,
-      height
-    },
-    VirtualizedParticipantItem
-  ))));
-};
-
-// src/Prebuilt/components/ChatSettings.tsx
-init_define_process_env();
-import React10 from "react";
-import { selectLocalPeer as selectLocalPeer3, selectSessionStore as selectSessionStore3, useHMSActions as useHMSActions5, useHMSStore as useHMSStore8 } from "@100mslive/react-sdk";
-import { PauseCircleIcon as PauseCircleIcon2, SettingsIcon } from "@100mslive/react-icons";
-var ChatSettings = () => {
-  var _a, _b;
-  const hmsActions = useHMSActions5();
-  const localPeer = useHMSStore8(selectLocalPeer3);
-  const { elements } = useRoomLayoutConferencingScreen();
-  const canPauseChat = !!((_b = (_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.real_time_controls) == null ? void 0 : _b.can_disable_chat);
-  const { enabled: isChatEnabled = true } = useHMSStore8(selectSessionStore3("chatState" /* CHAT_STATE */)) || {};
-  const showPause = canPauseChat && isChatEnabled;
-  if (!showPause) {
-    return null;
-  }
-  return /* @__PURE__ */ React10.createElement(Popover.Root, null, /* @__PURE__ */ React10.createElement(Popover.Trigger, { asChild: true, css: { px: "$4" } }, /* @__PURE__ */ React10.createElement(
-    Flex,
-    {
-      align: "center",
-      css: { color: "$on_surface_medium", "&:hover": { color: "$on_surface_high" }, cursor: "pointer" }
-    },
-    /* @__PURE__ */ React10.createElement(SettingsIcon, null)
-  )), /* @__PURE__ */ React10.createElement(Popover.Portal, null, /* @__PURE__ */ React10.createElement(
-    Popover.Content,
-    {
-      align: "end",
-      side: "bottom",
-      sideOffset: 2,
-      onClick: () => {
-        const chatState = {
-          enabled: false,
-          updatedBy: {
-            peerId: localPeer == null ? void 0 : localPeer.id,
-            userId: localPeer == null ? void 0 : localPeer.customerUserId,
-            userName: localPeer == null ? void 0 : localPeer.name
-          },
-          updatedAt: Date.now()
-        };
-        hmsActions.sessionStore.set("chatState" /* CHAT_STATE */, chatState);
-      },
-      css: {
-        backgroundColor: "$surface_default",
-        display: "flex",
-        alignItems: "center",
-        gap: "$4",
-        borderRadius: "$1",
-        color: "$on_surface_high",
-        cursor: "pointer",
-        "&:hover": { backgroundColor: "$surface_dim" }
-      }
-    },
-    /* @__PURE__ */ React10.createElement(PauseCircleIcon2, null),
-    /* @__PURE__ */ React10.createElement(Text, { variant: "sm", css: { fontWeight: "$semiBold" } }, "Pause Chat")
-  )));
-};
-
-// src/Prebuilt/components/SidePaneTabs.tsx
-var tabTriggerCSS = {
-  color: "$on_surface_low",
-  p: "$4",
-  fontWeight: "$semiBold",
-  fontSize: "$sm",
-  w: "100%",
-  justifyContent: "center",
-  '&[data-state="active"]': {
-    color: "$on_surface_high"
-  }
-};
-var ParticipantCount = ({ count }) => {
-  return count < 1e3 ? /* @__PURE__ */ React11.createElement("span", null, "(", count, ")") : /* @__PURE__ */ React11.createElement(Tooltip, { title: count }, /* @__PURE__ */ React11.createElement("span", null, "(", getFormattedCount(count), ")"));
-};
-var SidePaneTabs = React11.memo(({ active = SIDE_PANE_OPTIONS.CHAT, hideTab = false }) => {
-  var _a, _b;
-  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  const resetSidePane = useSidepaneReset();
-  const [activeTab, setActiveTab] = useState6(active);
-  const [activeRole, setActiveRole] = useState6("");
-  const peerCount = useHMSStore9(selectPeerCount);
-  const { elements, screenType } = useRoomLayoutConferencingScreen();
-  const chat_title = ((_a = elements == null ? void 0 : elements.chat) == null ? void 0 : _a.chat_title) || "Chat";
-  const showChat = !!(elements == null ? void 0 : elements.chat);
-  const showParticipants = !!(elements == null ? void 0 : elements.participant_list);
-  const hideTabs = !(showChat && showParticipants) || hideTab;
-  const isMobile = useMedia6(config.media.md);
-  const isOverlayChat = !!((_b = elements == null ? void 0 : elements.chat) == null ? void 0 : _b.is_overlay) && isMobile;
-  const { off_stage_roles = [] } = (elements == null ? void 0 : elements.on_stage_exp) || {};
-  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
-  const showChatSettings = showChat && isChatOpen && (!isMobile || !isOverlayChat);
-  useEffect5(() => {
-    match2({ activeTab, showChat, showParticipants }).with({ activeTab: SIDE_PANE_OPTIONS.CHAT, showChat: false, showParticipants: true }, () => {
-      setActiveTab(SIDE_PANE_OPTIONS.PARTICIPANTS);
-    }).with({ activeTab: SIDE_PANE_OPTIONS.PARTICIPANTS, showChat: true, showParticipants: false }, () => {
-      setActiveTab(SIDE_PANE_OPTIONS.CHAT);
-    }).with({ showChat: false, showParticipants: false }, () => {
-      resetSidePane();
-    });
-  }, [showChat, activeTab, showParticipants, resetSidePane]);
-  useEffect5(() => {
-    setActiveTab(active);
-  }, [active]);
-  if (activeRole) {
-    return /* @__PURE__ */ React11.createElement(
-      Flex,
-      {
-        direction: "column",
-        css: {
-          color: "$on_primary_high",
-          h: "100%",
-          transition: "margin 0.3s ease-in-out",
-          position: "relative"
-        }
-      },
-      /* @__PURE__ */ React11.createElement(Box, { css: { position: "absolute", left: 0, top: 0, size: "100%", zIndex: 21, bg: "$surface_dim" } }, /* @__PURE__ */ React11.createElement(PaginatedParticipants, { roleName: activeRole, onBack: () => setActiveRole("") }))
-    );
-  }
-  return /* @__PURE__ */ React11.createElement(
-    Flex,
-    {
-      direction: "column",
-      css: {
-        color: "$on_primary_high",
-        h: "100%",
-        transition: "margin 0.3s ease-in-out"
-      }
-    },
-    match2({ isOverlayChat, isChatOpen, showChat, hideTabs }).with({ isOverlayChat: true, isChatOpen: true, showChat: true }, () => /* @__PURE__ */ React11.createElement(Chat, null)).with({ hideTabs: true }, () => {
-      return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(Flex, { justify: "between", css: { w: "100%", "&:empty": { display: "none" } } }, /* @__PURE__ */ React11.createElement(
-        Text,
-        {
-          variant: "sm",
-          css: {
-            fontWeight: "$semiBold",
-            p: "$4",
-            c: "$on_surface_high",
-            pr: "$12",
-            "&:empty": { display: "none" }
-          }
-        },
-        activeTab === SIDE_PANE_OPTIONS.CHAT ? screenType !== "hls_live_streaming" && chat_title : /* @__PURE__ */ React11.createElement("span", null, "Participants\xA0", /* @__PURE__ */ React11.createElement(ParticipantCount, { count: peerCount }))
-      ), /* @__PURE__ */ React11.createElement(Flex, null, showChatSettings ? /* @__PURE__ */ React11.createElement(ChatSettings, null) : null, isOverlayChat && isChatOpen ? null : /* @__PURE__ */ React11.createElement(
-        IconButton,
-        {
-          css: {
-            my: "$1",
-            color: "$on_surface_medium",
-            "&:hover": { color: "$on_surface_high" },
-            "&:empty": { display: "none" }
-          },
-          onClick: (e) => {
-            e.stopPropagation();
-            if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
-              toggleChat();
-            } else {
-              toggleParticipants();
-            }
-          },
-          "data-testid": "close_chat"
-        },
-        screenType === "hls_live_streaming" && isChatOpen ? null : /* @__PURE__ */ React11.createElement(CrossIcon3, null)
-      ))), activeTab === SIDE_PANE_OPTIONS.CHAT ? /* @__PURE__ */ React11.createElement(Chat, null) : /* @__PURE__ */ React11.createElement(ParticipantList, { offStageRoles: off_stage_roles, onActive: setActiveRole }));
-    }).otherwise(() => {
-      return /* @__PURE__ */ React11.createElement(
-        Tabs.Root,
-        {
-          value: activeTab,
-          onValueChange: setActiveTab,
-          css: {
-            flexDirection: "column",
-            size: "100%"
-          }
-        },
-        /* @__PURE__ */ React11.createElement(Flex, { css: { w: "100%" } }, /* @__PURE__ */ React11.createElement(Tabs.List, { css: { flexGrow: 1, borderRadius: "$2", bg: "$surface_default" } }, /* @__PURE__ */ React11.createElement(Tabs.Trigger, { value: SIDE_PANE_OPTIONS.CHAT, onClick: toggleChat, css: tabTriggerCSS }, chat_title), /* @__PURE__ */ React11.createElement(Tabs.Trigger, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, onClick: toggleParticipants, css: tabTriggerCSS }, "Participants\xA0", /* @__PURE__ */ React11.createElement(ParticipantCount, { count: peerCount }))), showChatSettings ? /* @__PURE__ */ React11.createElement(ChatSettings, null) : null, isOverlayChat && isChatOpen ? null : /* @__PURE__ */ React11.createElement(
-          IconButton,
-          {
-            css: { my: "$1", color: "$on_surface_medium", "&:hover": { color: "$on_surface_high" } },
-            onClick: (e) => {
-              e.stopPropagation();
-              if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
-                toggleChat();
-              } else {
-                toggleParticipants();
-              }
-            },
-            "data-testid": "close_chat"
-          },
-          /* @__PURE__ */ React11.createElement(CrossIcon3, null)
-        )),
-        /* @__PURE__ */ React11.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.PARTICIPANTS, css: { p: 0 } }, /* @__PURE__ */ React11.createElement(ParticipantList, { offStageRoles: off_stage_roles, onActive: setActiveRole })),
-        /* @__PURE__ */ React11.createElement(Tabs.Content, { value: SIDE_PANE_OPTIONS.CHAT, css: { p: 0 } }, /* @__PURE__ */ React11.createElement(Chat, null))
-      );
-    })
-  );
-});
-export {
-  SidePaneTabs
-};
-//# sourceMappingURL=SidePaneTabs-NXHBI2JB.js.map