@100mslive/roomkit-react 0.1.6-alpha.0 → 0.1.6-alpha.2

package/src/Prebuilt/components/Chat/{ChatFooter.jsx → ChatFooter.tsx}

@@ -1,13 +1,17 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
 import { useHMSActions } from '@100mslive/react-sdk';
 import { EmojiIcon, SendIcon } from '@100mslive/react-icons';
-import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover, styled } from '../../../';
+import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover, styled } from '../../..';
+// @ts-ignore
 import { ToastManager } from '../Toast/ToastManager';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // import { ChatSelectorContainer } from './ChatSelectorContainer';
+// @ts-ignore
 import { useChatDraftMessage } from '../AppData/useChatState';
+// @ts-ignore
 import { useEmojiPickerStyles } from './useEmojiPickerStyles';
 
 const TextArea = styled('textarea', {
@@ -28,7 +32,7 @@ const TextArea = styled('textarea', {
   },
 });
 
-function EmojiPicker({ onSelect }) {
+function EmojiPicker({ onSelect }: { onSelect: (emoji: any) => void }) {
   const [showEmoji, setShowEmoji] = useState(false);
   const ref = useEmojiPickerStyles(showEmoji);
   return (
@@ -62,14 +66,26 @@ function EmojiPicker({ onSelect }) {
   );
 }
 
-export const ChatFooter = ({ role, peerId, onSend, children /* onSelect, selection, screenType */ }) => {
+export const ChatFooter = ({
+  role,
+  peerId,
+  onSend,
+  children /* onSelect, selection, screenType */,
+}: {
+  role: any;
+  peerId: string;
+  onSend: any;
+  children: ReactNode;
+}) => {
   const hmsActions = useHMSActions();
-  const inputRef = useRef(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
   const [draftMessage, setDraftMessage] = useChatDraftMessage();
   const isMobile = useMedia(cssConfig.media.md);
+  const { elements } = useRoomLayoutConferencingScreen();
+  const isOverlayChat = elements?.chat?.is_overlay;
 
   const sendMessage = useCallback(async () => {
-    const message = inputRef.current.value;
+    const message = inputRef?.current?.value;
     if (!message || !message.trim().length) {
       return;
     }
@@ -86,7 +102,8 @@ export const ChatFooter = ({ role, peerId, onSend, children /* onSelect, selecti
         onSend();
       }, 0);
     } catch (error) {
-      ToastManager.addToast({ title: error.message });
+      const err = error as Error;
+      ToastManager.addToast({ title: err.message });
     }
   }, [role, peerId, hmsActions, onSend]);
 
@@ -113,7 +130,7 @@ export const ChatFooter = ({ role, peerId, onSend, children /* onSelect, selecti
         <Flex
           align="center"
           css={{
-            bg: isMobile ? '$surface_dim' : '$surface_default',
+            bg: isOverlayChat && isMobile ? '$surface_dim' : '$surface_default',
             minHeight: '$16',
             maxHeight: '$24',
             position: 'relative',
@@ -130,9 +147,15 @@ export const ChatFooter = ({ role, peerId, onSend, children /* onSelect, selecti
         >
           {children}
           <TextArea
+            css={{
+              c: '$on_surface_high',
+              '&:valid ~ .send-msg': { color: '$on_surface_high' },
+              '& ~ .send-msg': { color: '$on_surface_low' },
+            }}
             placeholder="Send a message...."
             ref={inputRef}
-            autoFocus
+            required
+            autoFocus={!isMobile}
             onKeyPress={async event => {
               if (event.key === 'Enter') {
                 if (!event.shiftKey) {
@@ -149,19 +172,21 @@ export const ChatFooter = ({ role, peerId, onSend, children /* onSelect, selecti
           />
           {!isMobile ? (
             <EmojiPicker
-              onSelect={emoji => {
-                inputRef.current.value += ` ${emoji.native} `;
+              onSelect={(emoji: any) => {
+                if (inputRef.current) {
+                  inputRef.current.value += ` ${emoji.native} `;
+                }
               }}
             />
           ) : null}
           <BaseIconButton
+            className="send-msg"
             onClick={sendMessage}
             css={{
               ml: 'auto',
               height: 'max-content',
               mr: '$4',
-              color: '$on_surface_low',
-              '&:hover': { c: '$on_surface_high' },
+              '&:hover': { c: isMobile ? '' : '$on_surface_medium' },
             }}
             data-testid="send_msg_btn"
           >

package/src/Prebuilt/components/Chat/useEmojiPickerStyles.js

@@ -9,16 +9,17 @@ export const useEmojiPickerStyles = showing => {
         const style = document.createElement('style');
         style.textContent = `
           #root {
-            --em-rgb-color: var(--hms-ui-colors-on_primary_high);
+            --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_default);
-            --color-b: 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_primary_high);
+            color: var(--hms-ui-colors-on_surface_high);
             font-family: var(--hms-ui-fonts-sans);
           }
           .sticky {
             background-color: var(--hms-ui-colors-surface_bright);
+            margin-top: 0.5rem;
           }
         `;
         root?.appendChild(style);

package/src/Prebuilt/components/Connection/{ConnectionIndicator.jsx → ConnectionIndicator.tsx}

@@ -1,7 +1,8 @@
 import React from 'react';
 import { selectConnectionQualityByPeerID, useHMSStore } from '@100mslive/react-sdk';
 import { PoorConnectivityIcon } from '@100mslive/react-icons';
-import { styled, Tooltip, useTheme } from '../../../';
+import { styled, Tooltip, useTheme } from '../../..';
+// @ts-ignore
 import { getColor, getTooltipText } from './connectionQualityUtils';
 
 const Wrapper = styled('span', {
@@ -10,7 +11,6 @@ const Wrapper = styled('span', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: '$background_dim',
   borderRadius: '$round',
   variants: {
     isTile: {
@@ -22,7 +22,15 @@ const Wrapper = styled('span', {
   },
 });
 
-export const ConnectionIndicator = ({ peerId, isTile = false }) => {
+export const ConnectionIndicator = ({
+  peerId,
+  isTile = false,
+  hideBg = false,
+}: {
+  peerId: string;
+  isTile?: boolean;
+  hideBg?: boolean;
+}) => {
   const downlinkQuality = useHMSStore(selectConnectionQualityByPeerID(peerId))?.downlinkQuality;
   const { theme } = useTheme();
   const defaultColor = theme.colors.surface_brighter;
@@ -41,7 +49,7 @@ export const ConnectionIndicator = ({ peerId, isTile = false }) => {
   const size = isTile ? 12 : 16;
   return (
     <Tooltip title={getTooltipText(downlinkQuality)}>
-      <Wrapper isTile={isTile} data-testid="tile_network">
+      <Wrapper isTile={isTile} data-testid="tile_network" css={{ backgroundColor: hideBg ? '' : '$surface_bright' }}>
         <svg
           width={size}
           height={size}

package/src/Prebuilt/components/Connection/{TileConnection.jsx → TileConnection.tsx}

@@ -1,9 +1,23 @@
 import React from 'react';
 import { PinIcon, SpotlightIcon } from '@100mslive/react-icons';
-import { Flex, styled, Text, textEllipsis } from '../../../';
+import { Flex, styled, Text, textEllipsis } from '../../..';
 import { ConnectionIndicator } from './ConnectionIndicator';
 
-const TileConnection = ({ name, peerId, hideLabel, width, spotlighted, pinned }) => {
+const TileConnection = ({
+  name,
+  peerId,
+  hideLabel,
+  width,
+  spotlighted,
+  pinned,
+}: {
+  name: string;
+  peerId: string;
+  hideLabel: boolean;
+  width?: number;
+  spotlighted?: boolean;
+  pinned?: boolean;
+}) => {
   return (
     <Wrapper>
       {!hideLabel ? (
@@ -11,26 +25,26 @@ const TileConnection = ({ name, peerId, hideLabel, width, spotlighted, pinned })
           <Flex align="center">
             {pinned && (
               <IconWrapper>
-                <PinIcon width="15" height="15" css={{ display: 'block' }} />
+                <PinIcon width="15" height="15" />
               </IconWrapper>
             )}
             {spotlighted && (
               <IconWrapper>
-                <SpotlightIcon width="15" height="15" css={{ display: 'block' }} />
+                <SpotlightIcon width="15" height="15" />
               </IconWrapper>
             )}
             <Text
               css={{
                 c: '$on_surface_high',
                 verticalAlign: 'baseline',
-                ...textEllipsis(width - 60),
+                ...(width ? textEllipsis(width - 60) : {}),
               }}
               variant="xs"
             >
               {name}
             </Text>
           </Flex>
-          <ConnectionIndicator isTile peerId={peerId} />
+          <ConnectionIndicator isTile peerId={peerId} hideBg />
         </>
       ) : null}
     </Wrapper>

package/src/Prebuilt/components/EmojiReaction.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import { useMedia } from 'react-use';
 import data from '@emoji-mart/data/sets/14/apple.json';
 import { init } from 'emoji-mart';
@@ -34,13 +34,8 @@ export const EmojiReaction = () => {
   // const { isStreamingOn } = useRecordingStreaming();
   const isMobile = useMedia(cssConfig.media.md);
 
-  const onEmojiEvent = useCallback(data => {
-    window.showFlyingEmoji(data?.emojiId, data?.senderId);
-  }, []);
-
   const { sendEvent } = useCustomEvent({
     type: EMOJI_REACTION_TYPE,
-    onEvent: onEmojiEvent,
   });
 
   const sendReaction = async emojiId => {
@@ -51,6 +46,7 @@ export const EmojiReaction = () => {
     };
     // TODO: RT find a way to figure out hls-viewer roles
     sendEvent(data, { roleNames: roles });
+    window.showFlyingEmoji?.({ emojiId, senderId: localPeerId });
     /* if (isStreamingOn) {
       try {
         await hmsActions.sendHLSTimedMetadata([

package/src/Prebuilt/components/Footer/{ChatToggle.jsx → ChatToggle.tsx}

@@ -1,9 +1,12 @@
 import React from 'react';
 import { selectUnreadHMSMessagesCount, useHMSStore } from '@100mslive/react-sdk';
 import { ChatIcon, ChatUnreadIcon } from '@100mslive/react-icons';
-import { Tooltip } from '../../../';
+import { Tooltip } from '../../..';
+// @ts-ignore: No implicit Any
 import IconButton from '../../IconButton';
+// @ts-ignore: No implicit Any
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
+// @ts-ignore: No implicit Any
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
 export const ChatToggle = () => {

package/src/Prebuilt/components/Footer/Footer.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { Suspense, useEffect } from 'react';
 import { useMedia } from 'react-use';
 import {
   ConferencingScreen,
   DefaultConferencingScreen_Elements,
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
+import { Chat_ChatState } from '@100mslive/types-prebuilt/elements/chat';
 import { config as cssConfig, Footer as AppFooter } from '../../..';
 // @ts-ignore: No implicit Any
 import { AudioVideoToggle } from '../AudioVideoToggle';
@@ -22,6 +23,12 @@ import { ScreenshareToggle } from '../ScreenShareToggle';
 import { ChatToggle } from './ChatToggle';
 // @ts-ignore: No implicit Any
 import { ParticipantCount } from './ParticipantList';
+// @ts-ignore: No implicit Any
+import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
+// @ts-ignore: No implicit Any
+import { SIDE_PANE_OPTIONS } from '../../common/constants';
+// @ts-ignore: No implicit Any
+const VirtualBackground = React.lazy(() => import('../../plugins/VirtualBackground/VirtualBackground'));
 
 export const Footer = ({
   screenType,
@@ -31,6 +38,18 @@ export const Footer = ({
   elements: DefaultConferencingScreen_Elements | HLSLiveStreamingScreen_Elements;
 }) => {
   const isMobile = useMedia(cssConfig.media.md);
+  const isOverlayChat = !!elements?.chat?.is_overlay;
+  const openByDefault = elements?.chat?.initial_state === Chat_ChatState.CHAT_STATE_OPEN;
+
+  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
+  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+
+  useEffect(() => {
+    if (!isChatOpen && openByDefault) {
+      toggleChat();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [toggleChat, openByDefault]);
 
   return (
     <AppFooter.Root
@@ -40,7 +59,8 @@ export const Footer = ({
           justifyContent: 'center',
           gap: '$10',
           position: 'relative',
-          zIndex: 20,
+          // To prevent it from showing over the sidepane if chat type is not overlay
+          zIndex: isOverlayChat ? 20 : 1,
         },
       }}
     >
@@ -55,6 +75,11 @@ export const Footer = ({
       >
         {isMobile ? <LeaveRoom screenType={screenType} /> : null}
         <AudioVideoToggle />
+        {isMobile ? null : (
+          <Suspense fallback={<></>}>
+            <VirtualBackground />
+          </Suspense>
+        )}
       </AppFooter.Left>
       <AppFooter.Center
         css={{
@@ -73,15 +98,15 @@ export const Footer = ({
         ) : (
           <>
             <ScreenshareToggle />
-            {screenType === 'hls_live_streaming' ? <RaiseHand /> : null}
+            <RaiseHand />
             {elements?.emoji_reactions && <EmojiReaction />}
             <LeaveRoom screenType={screenType} />
           </>
         )}
       </AppFooter.Center>
       <AppFooter.Right>
-        {elements?.chat && <ChatToggle />}
-        <ParticipantCount />
+        {!isMobile && elements?.chat && <ChatToggle />}
+        {elements?.participant_list && <ParticipantCount />}
         <MoreSettings elements={elements} screenType={screenType} />
       </AppFooter.Right>
     </AppFooter.Root>

package/src/Prebuilt/components/Footer/ParticipantList.jsx

@@ -21,12 +21,10 @@ import {
 } from '@100mslive/react-icons';
 import { Box, config as cssConfig, Dropdown, Flex, Input, Text, textEllipsis } from '../../..';
 import IconButton from '../../IconButton';
-import { useRoomLayout } from '../../provider/roomLayoutProvider';
-import { ChatParticipantHeader } from '../Chat/ChatParticipantHeader';
 import { ConnectionIndicator } from '../Connection/ConnectionIndicator';
-import { RoleChangeModal } from '../RoleChangeModal';
 import { ToastManager } from '../Toast/ToastManager';
 import { RoleAccordion } from './RoleAccordion';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
 import { useParticipants } from '../../common/hooks';
 import { isInternalRole } from '../../common/utils';
@@ -46,7 +44,6 @@ export const ParticipantList = () => {
     peersOrderedByRoles[participant.roleName].push(participant);
   });
 
-  const [selectedPeerId, setSelectedPeerId] = useState(null);
   const onSearch = useCallback(value => {
     setFilter(filterValue => {
       if (!filterValue) {
@@ -63,7 +60,6 @@ export const ParticipantList = () => {
   return (
     <Fragment>
       <Flex direction="column" css={{ size: '100%', gap: '$4' }}>
-        <ChatParticipantHeader activeTabValue={SIDE_PANE_OPTIONS.PARTICIPANTS} />
         {!filter?.search && participants.length === 0 ? null : <ParticipantSearch onSearch={onSearch} inSidePane />}
         {participants.length === 0 ? (
           <Flex align="center" justify="center" css={{ w: '100%', p: '$8 0' }}>
@@ -75,16 +71,7 @@ export const ParticipantList = () => {
           handRaisedList={handRaisedPeers}
           isConnected={isConnected}
           filter={filter}
-          setSelectedPeerId={setSelectedPeerId}
         />
-        {selectedPeerId && (
-          <RoleChangeModal
-            peerId={selectedPeerId}
-            onOpenChange={value => {
-              !value && setSelectedPeerId(null);
-            }}
-          />
-        )}
       </Flex>
     </Fragment>
   );
@@ -126,13 +113,7 @@ export const ParticipantCount = () => {
   );
 };
 
-const VirtualizedParticipants = ({
-  peersOrderedByRoles = {},
-  isConnected,
-  setSelectedPeerId,
-  filter,
-  handRaisedList = [],
-}) => {
+const VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter, handRaisedList = [] }) => {
   return (
     <Flex
       direction="column"
@@ -149,7 +130,6 @@ const VirtualizedParticipants = ({
         roleName="Hand Raised"
         filter={filter}
         isConnected={isConnected}
-        setSelectedPeerId={setSelectedPeerId}
         isHandRaisedAccordion
       />
       {Object.keys(peersOrderedByRoles).map(role => (
@@ -158,7 +138,6 @@ const VirtualizedParticipants = ({
           peerList={peersOrderedByRoles[role]}
           roleName={role}
           isConnected={isConnected}
-          setSelectedPeerId={setSelectedPeerId}
           filter={filter}
         />
       ))}
@@ -166,7 +145,7 @@ const VirtualizedParticipants = ({
   );
 };
 
-export const Participant = ({ peer, isConnected, setSelectedPeerId }) => {
+export const Participant = ({ peer, isConnected }) => {
   const localPeerId = useHMSStore(selectLocalPeerID);
   return (
     <Flex
@@ -186,14 +165,7 @@ export const Participant = ({ peer, isConnected, setSelectedPeerId }) => {
         {peer.name} {localPeerId === peer.id ? '(You)' : ''}
       </Text>
       {isConnected ? (
-        <ParticipantActions
-          peerId={peer.id}
-          isLocal={peer.id === localPeerId}
-          role={peer.roleName}
-          onSettings={() => {
-            setSelectedPeerId(peer.id);
-          }}
-        />
+        <ParticipantActions peerId={peer.id} isLocal={peer.id === localPeerId} role={peer.roleName} />
       ) : null}
     </Flex>
   );
@@ -202,7 +174,7 @@ export const Participant = ({ peer, isConnected, setSelectedPeerId }) => {
 /**
  * shows settings to change for a participant like changing their role
  */
-const ParticipantActions = React.memo(({ onSettings, peerId, role, isLocal }) => {
+const ParticipantActions = React.memo(({ peerId, role, isLocal }) => {
   const isHandRaised = useHMSStore(selectPeerMetadata(peerId))?.isHandRaised;
   const canChangeRole = useHMSStore(selectPermissions)?.changeRole;
   const shouldShowMoreActions = canChangeRole;
@@ -214,7 +186,6 @@ const ParticipantActions = React.memo(({ onSettings, peerId, role, isLocal }) =>
       css={{
         flexShrink: 0,
         gap: '$8',
-        mt: '$2',
       }}
     >
       <ConnectionIndicator peerId={peerId} />
@@ -238,24 +209,26 @@ const ParticipantActions = React.memo(({ onSettings, peerId, role, isLocal }) =>
       ) : null}
 
       {shouldShowMoreActions && !isInternalRole(role) && !isLocal ? (
-        <ParticipantMoreActions onRoleChange={onSettings} peerId={peerId} role={role} />
+        <ParticipantMoreActions peerId={peerId} role={role} />
       ) : null}
     </Flex>
   );
 });
 
-const ParticipantMoreActions = ({ onRoleChange, peerId, role }) => {
+const ParticipantMoreActions = ({ peerId, role }) => {
   const hmsActions = useHMSActions();
   const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = useHMSStore(selectPermissions);
-  const layout = useRoomLayout();
+  const { elements } = useRoomLayoutConferencingScreen();
   const {
     bring_to_stage_label,
     remove_from_stage_label,
     on_stage_role,
     off_stage_roles = [],
-  } = layout?.screens?.conferencing?.default?.elements.on_stage_exp || {};
-  const canBringToStage = off_stage_roles.includes(role);
+  } = elements.on_stage_exp || {};
   const isInStage = role === on_stage_role;
+  const shouldShowStageRoleChange =
+    canChangeRole &&
+    ((isInStage && remove_from_stage_label) || (off_stage_roles?.includes(role) && bring_to_stage_label));
   const prevRole = useHMSStore(selectPeerMetadata(peerId))?.prevRole;
   const localPeerId = useHMSStore(selectLocalPeerID);
   const isLocal = localPeerId === peerId;
@@ -263,7 +236,7 @@ const ParticipantMoreActions = ({ onRoleChange, peerId, role }) => {
 
   const handleStageAction = async () => {
     if (isInStage) {
-      hmsActions.changeRoleOfPeer(peerId, prevRole || off_stage_roles[0]);
+      prevRole && hmsActions.changeRoleOfPeer(peerId, prevRole, true);
     } else {
       await hmsActions.changeRoleOfPeer(peerId, on_stage_role);
     }
@@ -296,21 +269,14 @@ const ParticipantMoreActions = ({ onRoleChange, peerId, role }) => {
       </Dropdown.Trigger>
       <Dropdown.Portal>
         <Dropdown.Content align="end" sideOffset={8} css={{ w: '$64', bg: '$surface_default' }}>
-          {canChangeRole && canBringToStage ? (
+          {shouldShowStageRoleChange ? (
             <Dropdown.Item css={{ bg: '$surface_default' }} onClick={() => handleStageAction()}>
               <ChangeRoleIcon />
               <Text variant="sm" css={{ ml: '$4', fontWeight: '$semiBold', c: '$on_surface_high' }}>
                 {isInStage ? remove_from_stage_label : bring_to_stage_label}
               </Text>
             </Dropdown.Item>
-          ) : (
-            <Dropdown.Item css={{ bg: '$surface_default' }} onClick={() => onRoleChange(peerId)}>
-              <ChangeRoleIcon />
-              <Text variant="sm" css={{ ml: '$4', fontWeight: '$semiBold', c: '$on_surface_high' }}>
-                Change Role
-              </Text>
-            </Dropdown.Item>
-          )}
+          ) : null}
 
           {!isLocal && canRemoveOthers && (
             <Dropdown.Item

package/src/Prebuilt/components/Footer/{RoleAccordion.jsx → RoleAccordion.tsx}

@@ -1,53 +1,61 @@
 import React from 'react';
 import { useMeasure } from 'react-use';
 import { FixedSizeList } from 'react-window';
+import { HMSPeer } from '@100mslive/react-sdk';
 import { Accordion } from '../../../Accordion';
 import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+// @ts-ignore: No implicit Any
 import { Participant } from './ParticipantList';
+import { RoleOptions } from './RoleOptions';
+// @ts-ignore: No implicit Any
 import { getFormattedCount } from '../../common/utils';
 
 const ROW_HEIGHT = 50;
 
-function itemKey(index, data) {
+interface ItemData {
+  peerList: HMSPeer[];
+  isConnected: boolean;
+}
+
+function itemKey(index: number, data: ItemData) {
   return data.peerList[index].id;
 }
 
-const VirtualizedParticipantItem = React.memo(({ index, data }) => {
-  return (
-    <Participant
-      key={data.peerList[index].id}
-      peer={data.peerList[index]}
-      isConnected={data.isConnected}
-      setSelectedPeerId={data.setSelectedPeerId}
-    />
-  );
+const VirtualizedParticipantItem = React.memo(({ index, data }: { index: number; data: ItemData }) => {
+  return <Participant key={data.peerList[index].id} peer={data.peerList[index]} isConnected={data.isConnected} />;
 });
 
 export const RoleAccordion = ({
   peerList = [],
   roleName,
-  setSelectedPeerId,
   isConnected,
   filter,
   isHandRaisedAccordion = false,
+}: ItemData & {
+  roleName: string;
+  isHandRaisedAccordion?: boolean;
+  filter?: { search: string };
 }) => {
-  const [ref, { width }] = useMeasure();
-  const height = ROW_HEIGHT * peerList.length;
+  const [ref, { width }] = useMeasure<HTMLDivElement>();
   const showAcordion = filter?.search ? peerList.some(peer => peer.name.toLowerCase().includes(filter.search)) : true;
+
   if (!showAcordion || (isHandRaisedAccordion && filter?.search) || peerList.length === 0) {
     return null;
   }
+  const height = ROW_HEIGHT * peerList.length;
 
   return (
-    <Flex direction="column" css={{ flexGrow: 1 }} ref={ref}>
+    <Flex direction="column" css={{ flexGrow: 1, '&:hover .role_actions': { visibility: 'visible' } }} ref={ref}>
       <Accordion.Root
         type="single"
         collapsible
         defaultValue={roleName}
-        css={{ borderRadius: '$3', border: '1px solid $border_bright' }}
+        css={{ borderRadius: '$1', border: '1px solid $border_bright' }}
       >
         <Accordion.Item value={roleName}>
           <Accordion.Header
+            iconStyles={{ c: '$on_surface_high' }}
             css={{
               textTransform: 'capitalize',
               p: '$6 $8',
@@ -56,13 +64,21 @@ export const RoleAccordion = ({
               c: '$on_surface_medium',
             }}
           >
-            {roleName} {`(${getFormattedCount(peerList.length)})`}
+            <Flex justify="between" css={{ flexGrow: 1, pr: '$6' }}>
+              <Text
+                variant="sm"
+                css={{ fontWeight: '$semiBold', textTransform: 'capitalize', color: '$on_surface_medium' }}
+              >
+                {roleName} {`(${getFormattedCount(peerList.length)})`}
+              </Text>
+              <RoleOptions roleName={roleName} peerList={peerList} />
+            </Flex>
           </Accordion.Header>
           <Accordion.Content>
             <Box css={{ borderTop: '1px solid $border_default' }} />
             <FixedSizeList
               itemSize={ROW_HEIGHT}
-              itemData={{ peerList, isConnected, setSelectedPeerId }}
+              itemData={{ peerList, isConnected }}
               itemKey={itemKey}
               itemCount={peerList.length}
               width={width}