@100mslive/roomkit-react 0.4.3-alpha.2 → 0.4.3-alpha.4

package/src/Prebuilt/components/Chat/ChatFooter.tsx

@@ -1,316 +0,0 @@
-import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
-import { useMedia } from 'react-use';
-import data from '@emoji-mart/data/sets/14/apple.json';
-import Picker from '@emoji-mart/react';
-import { HMSException, selectLocalPeer, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { EmojiIcon, PauseCircleIcon, SendIcon, VerticalMenuIcon } from '@100mslive/react-icons';
-import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover, styled, Text } from '../../..';
-import { IconButton } from '../../../IconButton';
-import { MoreSettings } from '../MoreSettings/MoreSettings';
-import { RaiseHand } from '../RaiseHand';
-// @ts-ignore: No implicit any
-import { ToastManager } from '../Toast/ToastManager';
-import { ChatSelectorContainer } from './ChatSelectorContainer';
-import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore: No implicit any
-import { useChatDraftMessage } from '../AppData/useChatState';
-// @ts-ignore: No implicit any
-import { useSetSubscribedChatSelector, useSubscribeChatSelector } from '../AppData/useUISettings';
-import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
-// @ts-ignore: No implicit any
-import { useEmojiPickerStyles } from './useEmojiPickerStyles';
-import { useDefaultChatSelection, useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
-import { CHAT_MESSAGE_LIMIT } from './utils';
-import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
-
-const 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 }: { onSelect: (emoji: any) => void }) {
-  const [showEmoji, setShowEmoji] = useState(false);
-  const ref = useEmojiPickerStyles(showEmoji);
-  return (
-    <Popover.Root open={showEmoji} onOpenChange={setShowEmoji}>
-      <Popover.Trigger asChild css={{ appearance: 'none' }}>
-        <BaseIconButton as="div">
-          <EmojiIcon />
-        </BaseIconButton>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <Popover.Content
-          alignOffset={-40}
-          sideOffset={16}
-          align="end"
-          css={{
-            p: 0,
-          }}
-        >
-          <Box
-            css={{
-              minWidth: 352,
-              minHeight: 435,
-            }}
-            ref={ref}
-          >
-            <Picker onEmojiSelect={onSelect} data={data} previewPosition="none" skinPosition="search" />
-          </Box>
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
-  );
-}
-
-export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => void; children?: ReactNode }) => {
-  const hmsActions = useHMSActions();
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const [draftMessage, setDraftMessage] = useChatDraftMessage();
-  const isMobile = useMedia(cssConfig.media.md);
-  const { elements, screenType } = useRoomLayoutConferencingScreen();
-  const message_placeholder = elements?.chat?.message_placeholder || 'Send a message';
-  const localPeer = useHMSStore(selectLocalPeer);
-  const isOverlayChat = elements?.chat?.is_overlay;
-  const canDisableChat = !!elements?.chat?.real_time_controls?.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] = useState(false);
-  const isLandscapeHLSStream = useLandscapeHLSStream();
-
-  useEffect(() => {
-    if (!selectedPeer.id && !selectedRole && !['Everyone', ''].includes(defaultSelection)) {
-      setRoleSelector(defaultSelection);
-    } else {
-      // @ts-ignore
-      if (!(isMobile || isLandscapeHLSStream) && !elements?.chat?.disable_autofocus) {
-        inputRef.current?.focus();
-      }
-    }
-  }, [defaultSelection, selectedPeer, selectedRole, setRoleSelector, isMobile, isLandscapeHLSStream, elements?.chat]);
-
-  const resetInputHeight = useCallback(() => {
-    if (inputRef.current) {
-      inputRef.current.style.height = `${Math.max(
-        32,
-        inputRef.current.value ? Math.min(inputRef.current.scrollHeight, 24 * 4) : 0,
-      )}px`;
-    }
-  }, []);
-
-  const updateInputHeight = useCallback(() => {
-    if (inputRef.current) {
-      inputRef.current.style.height = `${Math.max(32, Math.min(inputRef.current.scrollHeight, 24 * 4))}px`;
-    }
-  }, []);
-
-  const sendMessage = useCallback(async () => {
-    const message = inputRef?.current?.value;
-    if (!message || !message.trim().length) {
-      return;
-    }
-    try {
-      if (selectedRole) {
-        await hmsActions.sendGroupMessage(message, [selectedRole]);
-      } else if (selectedPeer.id) {
-        await hmsActions.sendDirectMessage(message, selectedPeer.id);
-      } else {
-        await hmsActions.sendBroadcastMessage(message);
-      }
-      inputRef.current.value = '';
-      resetInputHeight();
-      setTimeout(() => {
-        onSend(1);
-      }, 0);
-    } catch (error) {
-      const err = error as HMSException;
-      ToastManager.addToast({
-        title: err.message.startsWith('Invalid peer') ? `${selectedPeer.name} is not in this room` : err.message,
-      });
-    }
-  }, [selectedRole, selectedPeer, hmsActions, onSend]);
-
-  useEffect(() => {
-    const messageElement = inputRef.current;
-    if (messageElement) {
-      messageElement.value = draftMessage;
-      updateInputHeight();
-      setMessageLengthExceeded(draftMessage.length > CHAT_MESSAGE_LIMIT);
-    }
-  }, [draftMessage]);
-
-  useEffect(() => {
-    const messageElement = inputRef.current;
-    return () => {
-      setDraftMessage(messageElement?.value || '');
-    };
-  }, [setDraftMessage]);
-
-  if (isLocalPeerBlacklisted) {
-    return null;
-  }
-
-  return (
-    <Box css={{ position: 'relative' }}>
-      <Flex>
-        <ChatSelectorContainer />
-        {canDisableChat && isMobile && isOverlayChat ? (
-          <Flex align="center" justify="end" css={{ mb: '$4' }} onClick={e => e.stopPropagation()}>
-            <Popover.Root>
-              <Popover.Trigger asChild>
-                <IconButton css={{ border: '1px solid $border_bright' }}>
-                  <VerticalMenuIcon height="16" width="16" />
-                </IconButton>
-              </Popover.Trigger>
-              <Popover.Portal>
-                <Popover.Content
-                  align="end"
-                  side="top"
-                  onClick={() => {
-                    const chatState = {
-                      enabled: false,
-                      updatedBy: {
-                        peerId: localPeer?.id,
-                        userId: localPeer?.customerUserId,
-                        userName: localPeer?.name,
-                      },
-                      updatedAt: Date.now(),
-                    };
-                    hmsActions.sessionStore.set(SESSION_STORE_KEY.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' },
-                  }}
-                >
-                  <PauseCircleIcon />
-                  <Text variant="sm" css={{ fontWeight: '$semiBold' }}>
-                    Pause Chat
-                  </Text>
-                </Popover.Content>
-              </Popover.Portal>
-            </Popover.Root>
-          </Flex>
-        ) : null}
-      </Flex>
-      {selection && (
-        <Flex align={inputRef.current?.scrollHeight === 32 ? 'center' : 'end'} css={{ gap: '$4', w: '100%' }}>
-          <Flex
-            align="end"
-            css={{
-              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}
-            <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
-              autoFocus={!(isMobile || isLandscapeHLSStream)}
-              onKeyPress={async event => {
-                if (event.key === 'Enter') {
-                  if (!event.shiftKey && !messageLengthExceeded) {
-                    event.preventDefault();
-                    await 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 ? (
-              <EmojiPicker
-                onSelect={emoji => {
-                  if (inputRef.current) {
-                    inputRef.current.value += ` ${emoji.native} `;
-                  }
-                }}
-              />
-            ) : null}
-            <BaseIconButton
-              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"
-            >
-              <SendIcon />
-            </BaseIconButton>
-          </Flex>
-          {(isMwebHLSStream || isLandscapeHLSStream) && (
-            <>
-              <Flex
-                css={{
-                  alignItems: 'center',
-                }}
-                gap="2"
-              >
-                <RaiseHand css={{ bg: '$surface_default' }} />
-                <MoreSettings elements={elements} screenType={screenType} />
-              </Flex>
-            </>
-          )}
-        </Flex>
-      )}
-      {messageLengthExceeded && (
-        <Text variant="xs" css={{ color: '$alert_error_default', fontWeight: '$semiBold', mt: '$1', ml: '$7' }}>
-          Message cannot exceed 2000 characters
-        </Text>
-      )}
-    </Box>
-  );
-};

package/src/Prebuilt/components/Chat/ChatSelector.tsx

@@ -1,228 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { useMedia } from 'react-use';
-import {
-  HMSPeer,
-  HMSPeerType,
-  selectMessagesUnreadCountByPeerID,
-  selectMessagesUnreadCountByRole,
-  selectRemotePeers,
-  selectUnreadHMSMessagesCount,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { CheckIcon, PeopleIcon } from '@100mslive/react-icons';
-import { Box, CSS, Dropdown, Flex, HorizontalDivider, Text, Tooltip } from '../../..';
-import { config as cssConfig } from '../../../Theme';
-import { ParticipantSearch } from '../Footer/ParticipantList';
-import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore
-import { useSetSubscribedChatSelector } from '../AppData/useUISettings';
-import { useFilteredRoles } from '../../common/hooks';
-import { CHAT_SELECTOR } from '../../common/constants';
-
-const ChatDotIcon = () => {
-  return <Box css={{ size: '$6', bg: '$primary_default', mx: '$2', r: '$round' }} />;
-};
-
-const SelectorItem = ({
-  value,
-  active,
-  onClick,
-  unreadCount,
-  icon = undefined,
-}: {
-  value: string;
-  active: boolean;
-  onClick: () => void;
-  unreadCount: number;
-  icon?: React.JSX.Element;
-}) => {
-  const isMobile = useMedia(cssConfig.media.md);
-
-  const Root = !isMobile
-    ? Dropdown.Item
-    : ({ children, ...rest }: { children: React.ReactNode; css: CSS }) => (
-        <Flex {...rest} css={{ p: '$6 $8', ...rest.css }}>
-          {children}
-        </Flex>
-      );
-  return (
-    <Root
-      data-testid="chat_members"
-      css={{ align: 'center', px: '$10', py: '$4', bg: '$surface_default' }}
-      onClick={onClick}
-    >
-      <Text
-        variant="sm"
-        css={{ display: 'flex', alignItems: 'center', gap: '$4', fontWeight: '$semiBold', color: '$on_surface_high' }}
-      >
-        {icon}
-        {value}
-      </Text>
-      <Flex align="center" css={{ ml: 'auto', color: '$on_primary_high' }}>
-        {unreadCount > 0 && (
-          <Tooltip title={`${unreadCount} unread`}>
-            <Box css={{ mr: active ? '$3' : 0 }}>
-              <ChatDotIcon />
-            </Box>
-          </Tooltip>
-        )}
-        {active && <CheckIcon width={16} height={16} />}
-      </Flex>
-    </Root>
-  );
-};
-
-const SelectorHeader = React.memo(
-  ({ isHorizontalDivider = true, children }: { isHorizontalDivider?: boolean; children: React.ReactNode }) => {
-    return (
-      <Box css={{ flexShrink: 0 }}>
-        {isHorizontalDivider && <HorizontalDivider space={4} />}
-        <Text
-          variant="overline"
-          css={{ p: '$4 $10', fontWeight: '$semiBold', textTransform: 'uppercase', color: '$on_surface_medium' }}
-        >
-          {children}
-        </Text>
-      </Box>
-    );
-  },
-);
-
-const Everyone = React.memo(({ active }: { active: boolean }) => {
-  const unreadCount: number = useHMSStore(selectUnreadHMSMessagesCount);
-  const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
-  const [, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
-  return (
-    <SelectorItem
-      value="Everyone"
-      icon={<PeopleIcon />}
-      active={active}
-      unreadCount={unreadCount}
-      onClick={() => {
-        setPeerSelector({});
-        setRoleSelector('');
-      }}
-    />
-  );
-});
-
-const RoleItem = React.memo(({ role, active }: { role: string; active: boolean }) => {
-  const unreadCount: number = useHMSStore(selectMessagesUnreadCountByRole(role));
-  const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
-  const [, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
-  return (
-    <SelectorItem
-      value={role}
-      active={active}
-      unreadCount={unreadCount}
-      onClick={() => {
-        setPeerSelector({});
-        setRoleSelector(role);
-      }}
-    />
-  );
-});
-
-const PeerItem = ({ peerId, name, active }: { name: string; peerId: string; active: boolean }) => {
-  const unreadCount: number = useHMSStore(selectMessagesUnreadCountByPeerID(peerId));
-  const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
-  const [, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
-
-  return (
-    <SelectorItem
-      value={name}
-      active={active}
-      unreadCount={unreadCount}
-      onClick={() => {
-        setPeerSelector({ id: peerId, name });
-        setRoleSelector('');
-      }}
-    />
-  );
-};
-
-const VirtualizedSelectItemList = ({
-  peers,
-  selectedRole,
-  selectedPeerId,
-  searchValue,
-  isPublicChatEnabled,
-}: {
-  peers: HMSPeer[];
-  selectedRole: string;
-  selectedPeerId: string;
-  searchValue: string;
-  isPublicChatEnabled: boolean;
-}) => {
-  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: React.ReactNode[] = [];
-    if (isPublicChatEnabled && !searchValue) {
-      selectItems = [<Everyone active={!selectedRole && !selectedPeerId} />];
-    }
-    if (roles.length > 0 && !searchValue) {
-      selectItems.push(<SelectorHeader isHorizontalDivider={isPublicChatEnabled}>Roles</SelectorHeader>);
-      roles.forEach(userRole =>
-        selectItems.push(<RoleItem key={userRole} active={selectedRole === userRole} role={userRole} />),
-      );
-    }
-
-    if (filteredPeers.length > 0) {
-      selectItems.push(
-        <SelectorHeader isHorizontalDivider={isPublicChatEnabled || roles.length > 0}>Participants</SelectorHeader>,
-      );
-    }
-    filteredPeers.forEach(peer =>
-      selectItems.push(
-        <PeerItem key={peer.id} name={peer.name} peerId={peer.id} active={peer.id === selectedPeerId} />,
-      ),
-    );
-
-    return selectItems;
-  }, [isPublicChatEnabled, searchValue, selectedRole, selectedPeerId, roles, filteredPeers]);
-
-  return (
-    <Dropdown.Group css={{ overflowY: 'auto', maxHeight: '$64', bg: '$surface_default' }}>
-      {listItems.map((item, index) => (
-        <Box key={index}>{item}</Box>
-      ))}
-    </Dropdown.Group>
-  );
-};
-
-export const ChatSelector = ({ role, peerId }: { role: string; peerId: string }) => {
-  const { elements } = useRoomLayoutConferencingScreen();
-  const peers = useHMSStore(selectRemotePeers);
-  const [search, setSearch] = useState('');
-
-  const isPrivateChatEnabled = !!elements?.chat?.private_chat_enabled;
-  const isPublicChatEnabled = !!elements?.chat?.public_chat_enabled;
-
-  return (
-    <>
-      {peers.length > 0 && isPrivateChatEnabled && (
-        <Box css={{ px: '$4' }}>
-          <ParticipantSearch onSearch={setSearch} placeholder="Search for participants" />
-        </Box>
-      )}
-      <VirtualizedSelectItemList
-        selectedRole={role}
-        selectedPeerId={peerId}
-        peers={isPrivateChatEnabled ? peers : []}
-        isPublicChatEnabled={isPublicChatEnabled}
-        searchValue={search}
-      />
-    </>
-  );
-};

package/src/Prebuilt/components/Chat/ChatSelectorContainer.tsx

@@ -1,158 +0,0 @@
-import React, { useState } from 'react';
-import { useMedia } from 'react-use';
-import { ChevronDownIcon, ChevronUpIcon, CrossIcon, GroupIcon, PersonIcon } from '@100mslive/react-icons';
-import { Dropdown } from '../../../Dropdown';
-import { Box, Flex } from '../../../Layout';
-import { Sheet } from '../../../Sheet';
-import { Text } from '../../../Text';
-import { config as cssConfig } from '../../../Theme';
-import { ChatSelector } from './ChatSelector';
-import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore
-import { useSubscribeChatSelector } from '../AppData/useUISettings';
-import { useDefaultChatSelection, useFilteredRoles } from '../../common/hooks';
-import { CHAT_SELECTOR } from '../../common/constants';
-
-export const ChatSelectorContainer = () => {
-  const [open, setOpen] = useState(false);
-  const isMobile = useMedia(cssConfig.media.md);
-  const { elements } = useRoomLayoutConferencingScreen();
-  const isPrivateChatEnabled = !!elements?.chat?.private_chat_enabled;
-  const isPublicChatEnabled = !!elements?.chat?.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 (
-    <>
-      <Flex align="center" css={{ mb: '$8', flex: '1 1 0', pl: '$2' }}>
-        <Text variant="xs" css={{ color: '$on_surface_medium' }}>
-          {selection ? 'To' : 'Choose Participant'}
-        </Text>
-
-        {isMobile ? (
-          <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();
-            }}
-          >
-            <Text
-              variant="caption"
-              css={{
-                c: '$on_surface_high',
-                pr: '$2',
-                display: 'flex',
-                alignItems: 'center',
-                gap: '$1',
-                textTransform: selection !== selectedPeer.name ? 'capitalize' : undefined,
-              }}
-            >
-              {selection === CHAT_SELECTOR.EVERYONE ? (
-                <GroupIcon width={16} height={16} />
-              ) : (
-                <PersonIcon width={16} height={16} />
-              )}
-              {selection || 'Search'}
-            </Text>
-            {selection &&
-              (open ? <ChevronUpIcon width={16} height={16} /> : <ChevronDownIcon width={16} height={16} />)}
-          </Flex>
-        ) : (
-          <Dropdown.Root open={open} onOpenChange={value => setOpen(value)}>
-            <Dropdown.Trigger
-              asChild
-              data-testid="participant_list_filter"
-              css={{
-                background: '$primary_default',
-                c: '$on_primary_high',
-                r: '$0',
-                p: '$1 $2',
-                ml: '$6',
-              }}
-              tabIndex={0}
-            >
-              <Flex align="center" gap="1">
-                <Text
-                  variant="caption"
-                  css={{
-                    c: 'inherit',
-                    pr: '$2',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '$1',
-                    textTransform: selection !== selectedPeer.name ? 'capitalize' : undefined,
-                  }}
-                >
-                  {selection === CHAT_SELECTOR.EVERYONE ? (
-                    <GroupIcon width={16} height={16} />
-                  ) : (
-                    <PersonIcon width={16} height={16} />
-                  )}
-                  {selection || 'Search'}
-                </Text>
-                {selection && (
-                  <ChevronDownIcon
-                    style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 150ms ease' }}
-                    width={12}
-                    height={12}
-                  />
-                )}
-              </Flex>
-            </Dropdown.Trigger>
-
-            <Dropdown.Content
-              css={{
-                w: '$64',
-                overflow: 'hidden',
-                maxHeight: 'unset',
-                bg: '$surface_default',
-              }}
-              align="start"
-              sideOffset={8}
-            >
-              <ChatSelector role={selectedRole} peerId={selectedPeer.id} />
-            </Dropdown.Content>
-          </Dropdown.Root>
-        )}
-      </Flex>
-      {isMobile ? (
-        <Sheet.Root open={open} onOpenChange={value => setOpen(value)}>
-          <Sheet.Content css={{ pt: '$8' }}>
-            <Sheet.Title
-              css={{
-                display: 'flex',
-                w: '100%',
-                justifyContent: 'space-between',
-                px: '$10',
-                pb: '$4',
-                mb: '$8',
-                borderBottom: '1px solid $border_bright',
-              }}
-            >
-              <Text css={{ color: '$on_surface_medium', fontWeight: '$semiBold' }}>Chat with</Text>
-              <Sheet.Close css={{ color: '$on_surface_medium' }}>
-                <CrossIcon />
-              </Sheet.Close>
-            </Sheet.Title>
-            <Box
-              onClick={() => {
-                setOpen(false);
-              }}
-            >
-              <ChatSelector role={selectedRole} peerId={selectedPeer.id} />
-            </Box>
-          </Sheet.Content>
-        </Sheet.Root>
-      ) : null}
-    </>
-  );
-};