@100mslive/roomkit-react 0.1.14 → 0.1.16

package/src/Prebuilt/components/Chat/ChatBody.jsx

@@ -7,10 +7,11 @@ import {
   selectHMSMessages,
   selectLocalPeerID,
   selectLocalPeerName,
-  selectMessagesByPeerID,
-  selectMessagesByRole,
+  selectLocalPeerRoleName,
+  selectPeerNameByID,
   selectPermissions,
   selectSessionStore,
+  selectUnreadHMSMessagesCount,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
@@ -19,6 +20,7 @@ import {
   CrossCircleIcon,
   CrossIcon,
   EyeCloseIcon,
+  PeopleRemoveIcon,
   PinIcon,
   ReplyIcon,
   VerticalMenuIcon,
@@ -34,10 +36,9 @@ import emptyChat from '../../images/empty-chat.svg';
 import { ToastManager } from '../Toast/ToastManager';
 import { MwebChatOption } from './MwebChatOption';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useSetSubscribedChatSelector, useSubscribeChatSelector } from '../AppData/useUISettings';
+import { useSetSubscribedChatSelector } from '../AppData/useUISettings';
 import { useChatBlacklist } from '../hooks/useChatBlacklist';
 import { useSetPinnedMessages } from '../hooks/useSetPinnedMessages';
-import { useUnreadCount } from './useUnreadCount';
 import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
 
 const iconStyle = { height: '1.125rem', width: '1.125rem' };
@@ -70,27 +71,28 @@ const MessageTypeContainer = ({ left, right }) => {
     <Flex
       align="center"
       css={{
-        position: 'absolute',
-        right: 0,
-        zIndex: 1,
+        ml: '$2',
         mr: '$4',
-        p: '$2',
-        border: '1px solid $border_bright',
-        r: '$0',
-        gap: '$3',
+        gap: '$space$2',
       }}
-      className="message_type_container"
     >
       {left && (
-        <SenderName variant="caption" as="span" css={{ color: '$on_surface_medium' }}>
+        <SenderName
+          variant="xs"
+          as="span"
+          css={{ color: '$on_surface_medium', textTransform: 'capitalize', fontWeight: '$regular' }}
+        >
           {left}
         </SenderName>
       )}
       {right && (
         <SenderName
           as="span"
-          variant="caption"
-          css={{ color: '$on_surface_high', textTransform: 'capitalize', fontWeight: '$semiBold' }}
+          variant="overline"
+          css={{
+            color: '$on_surface_medium',
+            fontWeight: '$regular',
+          }}
         >
           {right}
         </SenderName>
@@ -99,13 +101,17 @@ const MessageTypeContainer = ({ left, right }) => {
   );
 };
 
-const MessageType = ({ roles, receiver }) => {
+const MessageType = ({ roles, hasCurrentUserSent, receiver }) => {
+  const peerName = useHMSStore(selectPeerNameByID(receiver));
+  const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
   if (receiver) {
-    return <MessageTypeContainer left="Direct Message" />;
+    return (
+      <MessageTypeContainer left={hasCurrentUserSent ? `${peerName ? `to ${peerName}` : ''}` : 'to You'} right="(DM)" />
+    );
   }
 
-  if (roles && roles.length > 0) {
-    return <MessageTypeContainer left="To Group" right={roles[0]} />;
+  if (roles && roles.length) {
+    return <MessageTypeContainer left={`to ${hasCurrentUserSent ? roles[0] : localPeerRoleName}`} right="(Group)" />;
   }
   return null;
 };
@@ -153,8 +159,8 @@ const getMessageType = ({ roles, receiver }) => {
 const ChatActions = ({
   onPin,
   showPinAction,
-  onReplyPrivately,
-  showReplyPrivateAction,
+  onReply,
+  showReply,
   message,
   sentByLocalPeer,
   isMobile,
@@ -167,6 +173,8 @@ const ChatActions = ({
     can_block_user: false,
   };
   const [open, setOpen] = useState(false);
+  const actions = useHMSActions();
+  const canRemoveOthers = useHMSStore(selectPermissions)?.removeOthers;
   const { blacklistItem: blacklistPeer } = useChatBlacklist(SESSION_STORE_KEY.CHAT_PEER_BLACKLIST);
 
   const { blacklistItem: blacklistMessage, blacklistedIDs: blacklistedMessageIDs = [] } = useChatBlacklist(
@@ -199,11 +207,11 @@ const ChatActions = ({
 
   const options = {
     reply: {
-      text: 'Reply Privately',
-      tooltipText: 'Reply privately',
+      text: message.recipientRoles?.length ? 'Reply to Group' : 'Reply Privately',
+      tooltipText: message.recipientRoles?.length ? 'Reply to Group' : 'Reply Privately',
       icon: <ReplyIcon style={iconStyle} />,
-      onClick: onReplyPrivately,
-      show: showReplyPrivateAction,
+      onClick: onReply,
+      show: showReply,
     },
     pin: {
       text: 'Pin message',
@@ -220,7 +228,7 @@ const ChatActions = ({
       show: true,
     },
     hide: {
-      text: 'Hide for everyone',
+      text: message.recipientPeer ? 'Hide for both' : 'Hide for everyone',
       icon: <EyeCloseIcon style={iconStyle} />,
       onClick: async () => {
         blacklistMessage(message.id);
@@ -235,6 +243,19 @@ const ChatActions = ({
       color: '$alert_error_default',
       show: can_block_user && !sentByLocalPeer,
     },
+    remove: {
+      text: 'Remove Partipant',
+      icon: <PeopleRemoveIcon style={iconStyle} />,
+      color: '$alert_error_default',
+      show: canRemoveOthers && !sentByLocalPeer,
+      onClick: async () => {
+        try {
+          await actions.removePeer(message.sender, '');
+        } catch (error) {
+          ToastManager.addToast({ title: error.message, variant: 'error' });
+        }
+      },
+    },
   };
 
   if (isMobile) {
@@ -316,7 +337,7 @@ const ChatActions = ({
           </Tooltip>
         ) : null}
 
-        {options.block.show || options.hide.show ? (
+        {options.block.show || options.hide.show || options.remove.show ? (
           <Tooltip boxCss={tooltipBoxCSS} title="More actions">
             <Dropdown.Trigger asChild>
               <IconButton>
@@ -353,6 +374,18 @@ const ChatActions = ({
               </Text>
             </Dropdown.Item>
           ) : null}
+          {options.remove.show ? (
+            <Dropdown.Item
+              data-testid="remove_peer_btn"
+              onClick={options.remove.onClick}
+              css={{ color: options.remove.color }}
+            >
+              {options.remove.icon}
+              <Text variant="sm" css={{ ml: '$4', color: 'inherit', fontWeight: '$semiBold' }}>
+                {options.remove.text}
+              </Text>
+            </Dropdown.Item>
+          ) : null}
         </Dropdown.Content>
       </Dropdown.Portal>
     </Dropdown.Root>
@@ -363,7 +396,7 @@ const SenderName = styled(Text, {
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
-  maxWidth: '16ch',
+  maxWidth: '14ch',
   minWidth: 0,
   color: '$on_surface_high',
   fontWeight: '$semiBold',
@@ -381,20 +414,25 @@ const ChatMessage = React.memo(
     }, [index, setRowHeight]);
     const isMobile = useMedia(cssConfig.media.md);
     const isPrivateChatEnabled = !!elements?.chat?.private_chat_enabled;
+    const roleWhiteList = elements?.chat?.roles_whitelist || [];
     const isOverlay = elements?.chat?.is_overlay && isMobile;
     const hmsActions = useHMSActions();
     const localPeerId = useHMSStore(selectLocalPeerID);
-    const permissions = useHMSStore(selectPermissions);
-    const selectedPeer = useSubscribeChatSelector(CHAT_SELECTOR.PEER_ID);
-    const selectedRole = useSubscribeChatSelector(CHAT_SELECTOR.ROLE);
-    const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
+    const [selectedRole, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
+    const [selectedPeer, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
     const messageType = getMessageType({
       roles: message.recipientRoles,
       receiver: message.recipientPeer,
     });
     const [openSheet, setOpenSheet] = useState(false);
-    // show pin action only if peer has remove others permission and the message is of broadcast type
-    const showPinAction = permissions.removeOthers && !messageType && elements?.chat?.allow_pinning_messages;
+    const showPinAction = !!elements?.chat?.allow_pinning_messages;
+    let showReply = false;
+    if (message.recipientRoles && roleWhiteList.includes(message.recipientRoles[0])) {
+      showReply = true;
+    } else if (message.sender !== selectedPeer.id && message.sender !== localPeerId && isPrivateChatEnabled) {
+      showReply = true;
+    }
+
     useEffect(() => {
       if (message.id && !message.read && inView) {
         hmsActions.setMessageRead(true, message.id);
@@ -428,7 +466,7 @@ const ChatMessage = React.memo(
             position: 'relative',
             // Theme independent color, token should not be used for transparent chat
             bg:
-              messageType && !(selectedPeer || selectedRole)
+              messageType && !(selectedPeer.id || selectedRole)
                 ? isOverlay
                   ? 'rgba(0, 0, 0, 0.64)'
                   : '$surface_default'
@@ -482,31 +520,45 @@ const ChatMessage = React.memo(
                   </SenderName>
                 </Tooltip>
               )}
-              {!isOverlay ? (
-                <Text
-                  as="span"
-                  variant="caption"
-                  css={{
-                    ml: '$2',
-                    color: '$on_surface_medium',
-                    flexShrink: 0,
-                  }}
-                >
-                  {formatTime(message.time)}
-                </Text>
-              ) : null}
+              <MessageType
+                hasCurrentUserSent={message.sender === localPeerId}
+                receiver={message.recipientPeer}
+                roles={message.recipientRoles}
+              />
             </Flex>
-            {!(selectedPeer || selectedRole) && (
-              <MessageType receiver={message.recipientPeer} roles={message.recipientRoles} />
-            )}
 
+            {!isOverlay ? (
+              <Text
+                as="span"
+                variant="caption"
+                css={{
+                  color: '$on_surface_medium',
+                  flexShrink: 0,
+                  position: 'absolute',
+                  right: 0,
+                  zIndex: 1,
+                  mr: '$4',
+                  p: '$2',
+                }}
+              >
+                {formatTime(message.time)}
+              </Text>
+            ) : null}
             <ChatActions
               onPin={onPin}
               showPinAction={showPinAction}
               message={message}
               sentByLocalPeer={message.sender === localPeerId}
-              onReplyPrivately={() => setPeerSelector(message.sender)}
-              showReplyPrivateAction={!selectedPeer && message.sender !== localPeerId && isPrivateChatEnabled}
+              onReply={() => {
+                if (message.recipientRoles?.length) {
+                  setRoleSelector(message.recipientRoles[0]);
+                  setPeerSelector({});
+                } else {
+                  setRoleSelector('');
+                  setPeerSelector({ id: message.sender, name: message.senderName });
+                }
+              }}
+              showReply={showReply}
               isMobile={isMobile}
               openSheet={openSheet}
               setOpenSheet={setOpenSheet}
@@ -622,27 +674,16 @@ const VirtualizedChatMessages = React.forwardRef(({ messages, unreadCount = 0, s
 });
 
 export const ChatBody = React.forwardRef(({ scrollToBottom }, listRef) => {
-  const selectedPeer = useSubscribeChatSelector(CHAT_SELECTOR.PEER_ID);
-  const selectedRole = useSubscribeChatSelector(CHAT_SELECTOR.ROLE);
-  let storeMessageSelector;
-  if (selectedRole) {
-    storeMessageSelector = selectMessagesByRole(selectedRole);
-  } else if (selectedPeer) {
-    storeMessageSelector = selectMessagesByPeerID(selectedPeer);
-  } else {
-    storeMessageSelector = selectHMSMessages;
-  }
-  let messages = useHMSStore(storeMessageSelector) || [];
+  let messages = useHMSStore(selectHMSMessages);
   const blacklistedMessageIDs = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST)) || [];
   const getFilteredMessages = () => {
     const blacklistedMessageIDSet = new Set(blacklistedMessageIDs);
-
     return messages?.filter(message => message.type === 'chat' && !blacklistedMessageIDSet.has(message.id)) || [];
   };
 
   const isMobile = useMedia(cssConfig.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
-  const unreadCount = useUnreadCount({ role: selectedRole, peerId: selectedPeer });
+  const unreadCount = useHMSStore(selectUnreadHMSMessagesCount);
 
   if (messages.length === 0 && !(isMobile && elements?.chat?.is_overlay)) {
     return (

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

@@ -2,7 +2,7 @@ import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'reac
 import { useMedia } from 'react-use';
 import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
-import { selectLocalPeer, selectPeerNameByID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+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';
@@ -14,9 +14,10 @@ import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvid
 // @ts-ignore
 import { useChatDraftMessage } from '../AppData/useChatState';
 // @ts-ignore
-import { useSubscribeChatSelector } from '../AppData/useUISettings';
+import { useSetSubscribedChatSelector, useSubscribeChatSelector } from '../AppData/useUISettings';
 // @ts-ignore
 import { useEmojiPickerStyles } from './useEmojiPickerStyles';
+import { useDefaultChatSelection } from '../../common/hooks';
 import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
 
 const TextArea = styled('textarea', {
@@ -81,11 +82,17 @@ export const ChatFooter = ({ onSend, children }: { onSend: () => void; children:
   const localPeer = useHMSStore(selectLocalPeer);
   const isOverlayChat = elements?.chat?.is_overlay;
   const canDisableChat = !!elements?.chat?.real_time_controls?.can_disable_chat;
-  const isPublicChatEnabled = !!elements?.chat?.public_chat_enabled;
-  const selectedPeer = useSubscribeChatSelector(CHAT_SELECTOR.PEER_ID);
-  const selectedRole = useSubscribeChatSelector(CHAT_SELECTOR.ROLE);
-  const selectorPeerName = useHMSStore(selectPeerNameByID(selectedPeer));
-  const selection = selectorPeerName || selectedRole || CHAT_SELECTOR.EVERYONE;
+  const selectedPeer = useSubscribeChatSelector(CHAT_SELECTOR.PEER);
+  const [selectedRole, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
+  const defaultSelection = useDefaultChatSelection();
+  const selection = selectedPeer.name || selectedRole || defaultSelection;
+  useEffect(() => {
+    if (!selectedPeer.id && !selectedRole && !['Everyone', ''].includes(defaultSelection)) {
+      setRoleSelector(defaultSelection);
+    } else {
+      inputRef.current?.focus();
+    }
+  }, [defaultSelection, selectedPeer, selectedRole, setRoleSelector]);
   const sendMessage = useCallback(async () => {
     const message = inputRef?.current?.value;
     if (!message || !message.trim().length) {
@@ -94,8 +101,8 @@ export const ChatFooter = ({ onSend, children }: { onSend: () => void; children:
     try {
       if (selectedRole) {
         await hmsActions.sendGroupMessage(message, [selectedRole]);
-      } else if (selectedPeer) {
-        await hmsActions.sendDirectMessage(message, selectedPeer);
+      } else if (selectedPeer.id) {
+        await hmsActions.sendDirectMessage(message, selectedPeer.id);
       } else {
         await hmsActions.sendBroadcastMessage(message);
       }
@@ -104,8 +111,10 @@ export const ChatFooter = ({ onSend, children }: { onSend: () => void; children:
         onSend();
       }, 0);
     } catch (error) {
-      const err = error as Error;
-      ToastManager.addToast({ title: err.message });
+      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]);
 
@@ -172,7 +181,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: () => void; children:
           </Flex>
         ) : null}
       </Flex>
-      {!(selection === CHAT_SELECTOR.EVERYONE && !isPublicChatEnabled) && (
+      {selection && (
         <Flex align="center" css={{ gap: '$4', w: '100%' }}>
           <Flex
             align="center"

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

@@ -11,7 +11,6 @@ import {
 import { CheckIcon, PeopleIcon } from '@100mslive/react-icons';
 import { Box, CSS, Dropdown, Flex, HorizontalDivider, Text, Tooltip } from '../../..';
 import { config as cssConfig } from '../../../Theme';
-// @ts-ignore
 import { ParticipantSearch } from '../Footer/ParticipantList';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore
@@ -90,7 +89,7 @@ const SelectorHeader = React.memo(
 
 const Everyone = React.memo(({ active }: { active: boolean }) => {
   const unreadCount: number = useHMSStore(selectUnreadHMSMessagesCount);
-  const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
+  const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
   const [, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
   return (
     <SelectorItem
@@ -99,7 +98,7 @@ const Everyone = React.memo(({ active }: { active: boolean }) => {
       active={active}
       unreadCount={unreadCount}
       onClick={() => {
-        setPeerSelector('');
+        setPeerSelector({});
         setRoleSelector('');
       }}
     />
@@ -108,7 +107,7 @@ const Everyone = React.memo(({ active }: { active: boolean }) => {
 
 const RoleItem = React.memo(({ role, active }: { role: string; active: boolean }) => {
   const unreadCount: number = useHMSStore(selectMessagesUnreadCountByRole(role));
-  const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
+  const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
   const [, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
   return (
     <SelectorItem
@@ -116,7 +115,7 @@ const RoleItem = React.memo(({ role, active }: { role: string; active: boolean }
       active={active}
       unreadCount={unreadCount}
       onClick={() => {
-        setPeerSelector('');
+        setPeerSelector({});
         setRoleSelector(role);
       }}
     />
@@ -125,7 +124,7 @@ const RoleItem = React.memo(({ role, active }: { role: string; active: boolean }
 
 const PeerItem = ({ peerId, name, active }: { name: string; peerId: string; active: boolean }) => {
   const unreadCount: number = useHMSStore(selectMessagesUnreadCountByPeerID(peerId));
-  const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
+  const [, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
   const [, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
 
   return (
@@ -134,7 +133,7 @@ const PeerItem = ({ peerId, name, active }: { name: string; peerId: string; acti
       active={active}
       unreadCount={unreadCount}
       onClick={() => {
-        setPeerSelector(peerId);
+        setPeerSelector({ id: peerId, name });
         setRoleSelector('');
       }}
     />
@@ -146,14 +145,15 @@ const VirtualizedSelectItemList = ({
   selectedRole,
   selectedPeerId,
   searchValue,
+  isPublicChatEnabled,
 }: {
   peers: HMSPeer[];
   selectedRole: string;
   selectedPeerId: string;
   searchValue: string;
+  isPublicChatEnabled: boolean;
 }) => {
   const roles = useFilteredRoles();
-  const isMobile = useMedia(cssConfig.media.md);
   const filteredPeers = useMemo(
     () =>
       peers.filter(
@@ -164,15 +164,22 @@ const VirtualizedSelectItemList = ({
   );
 
   const listItems = useMemo(() => {
-    const selectItems = !searchValue ? [<Everyone active={!selectedRole && !selectedPeerId} />] : [];
-
-    roles.length > 0 && !searchValue && selectItems.push(<SelectorHeader>Roles</SelectorHeader>);
-    !searchValue &&
+    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} />),
       );
+    }
 
-    filteredPeers.length > 0 && selectItems.push(<SelectorHeader>Participants</SelectorHeader>);
+    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} />,
@@ -180,23 +187,14 @@ const VirtualizedSelectItemList = ({
     );
 
     return selectItems;
-  }, [searchValue, selectedRole, selectedPeerId, roles, filteredPeers]);
+  }, [isPublicChatEnabled, searchValue, selectedRole, selectedPeerId, roles, filteredPeers]);
 
-  if (!isMobile) {
-    return (
-      <Dropdown.Group css={{ overflowY: 'auto', maxHeight: '$64', bg: '$surface_default' }}>
-        {listItems.map((item, index) => (
-          <Box key={index}>{item}</Box>
-        ))}
-      </Dropdown.Group>
-    );
-  }
   return (
-    <>
+    <Dropdown.Group css={{ overflowY: 'auto', maxHeight: '$64', bg: '$surface_default' }}>
       {listItems.map((item, index) => (
         <Box key={index}>{item}</Box>
       ))}
-    </>
+    </Dropdown.Group>
   );
 };
 
@@ -206,6 +204,7 @@ export const ChatSelector = ({ role, peerId }: { role: string; peerId: string })
   const [search, setSearch] = useState('');
 
   const isPrivateChatEnabled = !!elements?.chat?.private_chat_enabled;
+  const isPublicChatEnabled = !!elements?.chat?.public_chat_enabled;
 
   return (
     <>
@@ -218,6 +217,7 @@ export const ChatSelector = ({ role, peerId }: { role: string; peerId: string })
         selectedRole={role}
         selectedPeerId={peerId}
         peers={isPrivateChatEnabled ? peers : []}
+        isPublicChatEnabled={isPublicChatEnabled}
         searchValue={search}
       />
     </>

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

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { useMedia } from 'react-use';
-import { selectPeerNameByID, useHMSStore } from '@100mslive/react-sdk';
-import { ChevronDownIcon, ChevronUpIcon, CrossIcon, PeopleIcon, PersonIcon } from '@100mslive/react-icons';
+import { ChevronDownIcon, ChevronUpIcon, CrossIcon, GroupIcon, PersonIcon } from '@100mslive/react-icons';
 import { Dropdown } from '../../../Dropdown';
 import { Box, Flex } from '../../../Layout';
 import { Sheet } from '../../../Sheet';
@@ -11,7 +10,7 @@ import { ChatSelector } from './ChatSelector';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore
 import { useSubscribeChatSelector } from '../AppData/useUISettings';
-import { useFilteredRoles } from '../../common/hooks';
+import { useDefaultChatSelection, useFilteredRoles } from '../../common/hooks';
 import { CHAT_SELECTOR } from '../../common/constants';
 
 export const ChatSelectorContainer = () => {
@@ -21,10 +20,10 @@ export const ChatSelectorContainer = () => {
   const isPrivateChatEnabled = !!elements?.chat?.private_chat_enabled;
   const isPublicChatEnabled = !!elements?.chat?.public_chat_enabled;
   const roles = useFilteredRoles();
-  const selectedPeer = useSubscribeChatSelector(CHAT_SELECTOR.PEER_ID);
+  const selectedPeer = useSubscribeChatSelector(CHAT_SELECTOR.PEER);
   const selectedRole = useSubscribeChatSelector(CHAT_SELECTOR.ROLE);
-  const selectorPeerName = useHMSStore(selectPeerNameByID(selectedPeer));
-  const selection = selectorPeerName || selectedRole || CHAT_SELECTOR.EVERYONE;
+  const defaultSelection = useDefaultChatSelection();
+  const selection = selectedPeer.name || selectedRole || defaultSelection;
 
   if (!(isPrivateChatEnabled || isPublicChatEnabled || roles.length > 0) && !isPrivateChatEnabled && !selection) {
     return null;
@@ -47,18 +46,18 @@ export const ChatSelectorContainer = () => {
             }}
           >
             <Text
-              variant="xs"
+              variant="caption"
               css={{
                 c: '$on_surface_high',
                 pr: '$2',
                 display: 'flex',
                 alignItems: 'center',
                 gap: '$1',
-                textTransform: 'capitalize',
+                textTransform: selection !== selectedPeer.name ? 'capitalize' : undefined,
               }}
             >
               {selection === CHAT_SELECTOR.EVERYONE ? (
-                <PeopleIcon width={16} height={16} />
+                <GroupIcon width={16} height={16} />
               ) : (
                 <PersonIcon width={16} height={16} />
               )}
@@ -73,7 +72,7 @@ export const ChatSelectorContainer = () => {
               asChild
               data-testid="participant_list_filter"
               css={{
-                border: '1px solid $border_bright',
+                background: '$primary_default',
                 r: '$0',
                 p: '$1 $2',
                 ml: '$6',
@@ -82,22 +81,22 @@ export const ChatSelectorContainer = () => {
             >
               <Flex align="center" css={{ c: '$on_surface_medium' }} gap="1">
                 <Text
-                  variant="xs"
+                  variant="caption"
                   css={{
                     c: '$on_surface_high',
                     pr: '$2',
                     display: 'flex',
                     alignItems: 'center',
                     gap: '$1',
-                    textTransform: 'capitalize',
+                    textTransform: selection !== selectedPeer.name ? 'capitalize' : undefined,
                   }}
                 >
                   {selection === CHAT_SELECTOR.EVERYONE ? (
-                    <PeopleIcon width={16} height={16} />
+                    <GroupIcon width={16} height={16} />
                   ) : (
                     <PersonIcon width={16} height={16} />
                   )}
-                  {selection}
+                  {selection || 'Search'}
                 </Text>
                 {selection && (
                   <ChevronDownIcon
@@ -119,7 +118,7 @@ export const ChatSelectorContainer = () => {
               align="start"
               sideOffset={8}
             >
-              <ChatSelector role={selectedRole} peerId={selectedPeer} />
+              <ChatSelector role={selectedRole} peerId={selectedPeer.id} />
             </Dropdown.Content>
           </Dropdown.Root>
         )}
@@ -148,7 +147,7 @@ export const ChatSelectorContainer = () => {
                 setOpen(false);
               }}
             >
-              <ChatSelector role={selectedRole} peerId={selectedPeer} />
+              <ChatSelector role={selectedRole} peerId={selectedPeer.id} />
             </Box>
           </Sheet.Content>
         </Sheet.Root>