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

package/dist/SidePaneTabs-NXHBI2JB.js

@@ -0,0 +1,1354 @@
+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