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

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.14-alpha.0",
+  "version": "0.1.14-alpha.2",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,10 +76,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.23-alpha.0",
-    "@100mslive/hms-virtual-background": "1.11.23-alpha.0",
-    "@100mslive/react-icons": "0.8.23-alpha.0",
-    "@100mslive/react-sdk": "0.8.23-alpha.0",
+    "@100mslive/hls-player": "0.1.23-alpha.2",
+    "@100mslive/hms-virtual-background": "1.11.23-alpha.2",
+    "@100mslive/react-icons": "0.8.23-alpha.2",
+    "@100mslive/react-sdk": "0.8.23-alpha.2",
     "@100mslive/types-prebuilt": "0.12.4",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -115,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "47c92f0479d2c2066f78d66333d669a33e5e38e6"
+  "gitHead": "1b964f1d356fe098de341574a63a6c3b5332e418"
 }

package/src/Prebuilt/common/constants.ts

@@ -19,6 +19,7 @@ export const EMOJI_REACTION_TYPE = 'EMOJI_REACTION';
 export const CHAT_SELECTOR = {
   PEER_ID: 'peer_id',
   ROLE: 'role',
+  EVERYONE: 'Everyone',
 };
 
 export const APP_DATA = {

package/src/Prebuilt/common/{hooks.js → hooks.ts}

@@ -1,4 +1,3 @@
-// @ts-check
 import { useEffect, useRef, useState } from 'react';
 import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 import {
@@ -12,7 +11,7 @@ import {
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import { useRoomLayout } from '../provider/roomLayoutProvider';
-
+import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 /**
  * Hook to execute a callback when alone in room(after a certain 5d of time)
  * @param {number} thresholdMs The threshold(in ms) after which the callback is executed,
@@ -52,8 +51,8 @@ export const useWhenAloneInRoom = (thresholdMs = 5 * 60 * 1000) => {
 };
 
 export const useFilteredRoles = () => {
-  const roles = useHMSStore(selectAvailableRoleNames);
-  return roles;
+  const { elements } = useRoomLayoutConferencingScreen();
+  return elements?.chat?.roles_whitelist || [];
 };
 
 export const useShowStreamingUI = () => {
@@ -63,7 +62,7 @@ export const useShowStreamingUI = () => {
 };
 
 // The search results should not have role name matches
-export const useParticipants = params => {
+export const useParticipants = (params?: { metadata?: { isHandRaised?: boolean }; role?: string; search?: string }) => {
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const peerCount = useHMSStore(selectPeerCount);
   const availableRoles = useHMSStore(selectAvailableRoleNames);

package/src/Prebuilt/components/AppData/AppData.tsx

@@ -96,6 +96,7 @@ export const AppData = React.memo(() => {
     const uiSettings = preferences || {};
     const updatedSettings = {
       ...uiSettings,
+      [UI_SETTINGS.isAudioOnly]: undefined,
       [UI_SETTINGS.uiViewMode]: uiSettings.uiViewMode || UI_MODE_GRID,
     };
     hmsActions.setAppData(APP_DATA.uiSettings, updatedSettings, true);

package/src/Prebuilt/components/AppData/useUISettings.js

@@ -13,7 +13,7 @@ import {
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
-import { APP_DATA, POLL_STATE, SESSION_STORE_KEY } from '../../common/constants';
+import { APP_DATA, POLL_STATE, SESSION_STORE_KEY, UI_SETTINGS } from '../../common/constants';
 
 /**
  * fields saved related to UI settings in store's app data can be
@@ -154,6 +154,7 @@ const useSetAppData = ({ key1, key2 }) => {
       const appData = store.getState(selectAppData());
       setPreferences({
         ...appData.uiSettings,
+        [UI_SETTINGS.isAudioOnly]: undefined,
         subscribedNotifications: appData.subscribedNotifications,
       });
     },

package/src/Prebuilt/components/AuthToken.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useSessionStorage } from 'react-use';
-import { v4 } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { useHMSActions } from '@100mslive/react-sdk';
 import { styled } from '../../Theme';
 import { useHMSPrebuiltContext } from '../AppContext';
@@ -26,12 +26,6 @@ const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken })
   const [, setAuthTokenInAppData] = useSetAppDataByKey(APP_DATA.authToken);
   const [savedUserId, setSavedUserId] = useSessionStorage(UserPreferencesKeys.USER_ID);
 
-  useEffect(() => {
-    if (!savedUserId && !userId) {
-      setSavedUserId(v4());
-    }
-  }, [savedUserId, setSavedUserId, userId]);
-
   useEffect(() => {
     if (authToken) {
       setAuthTokenInAppData(authToken);
@@ -42,11 +36,25 @@ const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken })
       return;
     }
 
+    if (!savedUserId && !userId) {
+      setSavedUserId(uuid());
+      return;
+    }
+
     hmsActions
       .getAuthTokenByRoomCode({ roomCode, userId: userId || savedUserId }, { endpoint: authTokenByRoomCodeEndpoint })
       .then(token => setAuthTokenInAppData(token))
       .catch(error => setError(convertError(error)));
-  }, [hmsActions, authToken, authTokenByRoomCodeEndpoint, setAuthTokenInAppData, roomCode, userId, savedUserId]);
+  }, [
+    hmsActions,
+    authToken,
+    authTokenByRoomCodeEndpoint,
+    setAuthTokenInAppData,
+    roomCode,
+    userId,
+    savedUserId,
+    setSavedUserId,
+  ]);
 
   if (error.title) {
     return <ErrorDialog title={error.title}>{error.body}</ErrorDialog>;

package/src/Prebuilt/components/Chat/{Navigation.tsx → ArrowNavigation.tsx}

@@ -1,40 +1,24 @@
 import React from 'react';
 import { ChevronDownIcon, ChevronUpIcon } from '@100mslive/react-icons';
-import { Box, Flex } from '../../../Layout';
+import { Flex } from '../../../Layout';
 
-export const Navigation = ({
+export const ArrowNavigation = ({
   total,
   index,
   showPrevious,
   showNext,
-  isMobile,
 }: {
   total: number;
   index: number;
   showPrevious: () => void;
   showNext: () => void;
-  isMobile: boolean;
 }) => {
-  const sticksCount = Math.min(3, total);
-
   if (total < 2) {
     return null;
   }
 
-  return isMobile ? (
+  return (
     <Flex direction="column" css={{ gap: '$1' }}>
-      {[...Array(sticksCount)].map((_, i) => (
-        <Box
-          css={{
-            borderLeft: '2px solid',
-            height: '$4',
-            borderColor: i === index ? '$on_surface_high' : '$on_surface_low',
-          }}
-        />
-      ))}
-    </Flex>
-  ) : (
-    <Flex direction="column" css={{ gap: '$4' }}>
       <Flex
         onClick={showPrevious}
         css={

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

@@ -1,10 +1,9 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
-import { selectLocalPeer, selectSessionStore } from '@100mslive/hms-video-store';
+import { selectLocalPeer, selectPeerByID, selectSessionStore } from '@100mslive/hms-video-store';
 import {
   HMSNotificationTypes,
   selectHMSMessagesCount,
-  selectPeerNameByID,
   useHMSActions,
   useHMSNotifications,
   useHMSStore,
@@ -23,38 +22,32 @@ import { useSetPinnedMessages } from '../hooks/useSetPinnedMessages';
 import { useUnreadCount } from './useUnreadCount';
 import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
 
-export const Chat = ({ screenType }) => {
+export const Chat = () => {
+  const { elements, screenType } = useRoomLayoutConferencingScreen();
   const notification = useHMSNotifications(HMSNotificationTypes.PEER_LEFT);
-  const [peerSelector, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
-  const [roleSelector, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
-  const peerName = useHMSStore(selectPeerNameByID(peerSelector));
+  const [selectedPeer, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
+  const [selectedRole, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
   const localPeer = useHMSStore(selectLocalPeer);
-  const [chatOptions, setChatOptions] = useState({
-    role: roleSelector || '',
-    peerId: peerSelector && peerName ? peerSelector : '',
-    selection: roleSelector ? roleSelector : peerSelector && peerName ? peerName : 'Everyone',
-  });
   const [isSelectorOpen] = useState(false);
   const listRef = useRef(null);
   const hmsActions = useHMSActions();
   const { removePinnedMessage } = useSetPinnedMessages();
   const pinnedMessages = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES)) || [];
+  const isPeerPresent = !!useHMSStore(selectPeerByID(selectedPeer));
 
   useEffect(() => {
-    if (notification && notification.data && peerSelector === notification.data.id) {
+    if (notification && notification.data && selectedPeer === notification.data.id) {
       setPeerSelector('');
-      setChatOptions({
-        role: '',
-        peerId: '',
-        selection: 'Everyone',
-      });
+      setRoleSelector('');
     }
-  }, [notification, peerSelector, setPeerSelector]);
+    if (selectedPeer && !isPeerPresent) {
+      setPeerSelector('');
+    }
+  }, [notification, selectedPeer, setPeerSelector, setRoleSelector, isPeerPresent]);
   const blacklistedPeerIDs = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_PEER_BLACKLIST)) || [];
   const blacklistedPeerIDSet = new Set(blacklistedPeerIDs);
   const isLocalPeerBlacklisted = blacklistedPeerIDSet.has(localPeer?.customerUserId);
   const storeMessageSelector = selectHMSMessagesCount;
-  const { elements } = useRoomLayoutConferencingScreen();
   const { enabled: isChatEnabled = true } = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE)) || {};
   const isMobile = useMedia(cssConfig.media.md);
 
@@ -92,14 +85,7 @@ export const Chat = ({ screenType }) => {
         </>
       )}
 
-      <ChatBody
-        role={chatOptions.role}
-        peerId={chatOptions.peerId}
-        ref={listRef}
-        scrollToBottom={scrollToBottom}
-        screenType={screenType}
-        blacklistedPeerIDs={blacklistedPeerIDs}
-      />
+      <ChatBody ref={listRef} scrollToBottom={scrollToBottom} screenType={screenType} />
 
       <ChatPaused />
 
@@ -110,24 +96,9 @@ export const Chat = ({ screenType }) => {
       ) : null}
 
       {isChatEnabled && !isLocalPeerBlacklisted ? (
-        <ChatFooter
-          role={chatOptions.role}
-          onSend={() => scrollToBottom(1)}
-          selection={chatOptions.selection}
-          screenType={screenType}
-          onSelect={({ role, peerId, selection }) => {
-            setChatOptions({
-              role,
-              peerId,
-              selection,
-            });
-            setPeerSelector(peerId);
-            setRoleSelector(role);
-          }}
-          peerId={chatOptions.peerId}
-        >
+        <ChatFooter onSend={() => scrollToBottom(1)} screenType={screenType}>
           {!isSelectorOpen && !isScrolledToBottom && (
-            <NewMessageIndicator role={chatOptions.role} peerId={chatOptions.peerId} scrollToBottom={scrollToBottom} />
+            <NewMessageIndicator role={selectedRole} peerId={selectedPeer} scrollToBottom={scrollToBottom} />
           )}
         </ChatFooter>
       ) : null}

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

@@ -7,16 +7,22 @@ import {
   selectHMSMessages,
   selectLocalPeerID,
   selectLocalPeerName,
-  selectLocalPeerRoleName,
   selectMessagesByPeerID,
   selectMessagesByRole,
-  selectPeerNameByID,
   selectPermissions,
   selectSessionStore,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
-import { CopyIcon, CrossCircleIcon, CrossIcon, EyeCloseIcon, PinIcon, VerticalMenuIcon } from '@100mslive/react-icons';
+import {
+  CopyIcon,
+  CrossCircleIcon,
+  CrossIcon,
+  EyeCloseIcon,
+  PinIcon,
+  ReplyIcon,
+  VerticalMenuIcon,
+} from '@100mslive/react-icons';
 import { Dropdown } from '../../../Dropdown';
 import { IconButton } from '../../../IconButton';
 import { Box, Flex } from '../../../Layout';
@@ -28,10 +34,11 @@ 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 { useChatBlacklist } from '../hooks/useChatBlacklist';
 import { useSetPinnedMessages } from '../hooks/useSetPinnedMessages';
 import { useUnreadCount } from './useUnreadCount';
-import { SESSION_STORE_KEY } from '../../common/constants';
+import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
 
 const iconStyle = { height: '1.125rem', width: '1.125rem' };
 const tooltipBoxCSS = {
@@ -63,21 +70,28 @@ const MessageTypeContainer = ({ left, right }) => {
     <Flex
       align="center"
       css={{
-        ml: 'auto',
+        position: 'absolute',
+        right: 0,
+        zIndex: 1,
         mr: '$4',
-        p: '$2 $4',
+        p: '$2',
         border: '1px solid $border_bright',
         r: '$0',
+        gap: '$3',
       }}
+      className="message_type_container"
     >
       {left && (
-        <SenderName variant="tiny" as="span" css={{ color: '$on_surface_medium' }}>
+        <SenderName variant="caption" as="span" css={{ color: '$on_surface_medium' }}>
           {left}
         </SenderName>
       )}
-      {left && right && <Box css={{ borderLeft: '1px solid $border_bright', mx: '$4', h: '$8' }} />}
       {right && (
-        <SenderName as="span" variant="tiny" css={{ textTransform: 'uppercase' }}>
+        <SenderName
+          as="span"
+          variant="caption"
+          css={{ color: '$on_surface_high', textTransform: 'capitalize', fontWeight: '$semiBold' }}
+        >
           {right}
         </SenderName>
       )}
@@ -85,20 +99,13 @@ const MessageTypeContainer = ({ left, right }) => {
   );
 };
 
-const MessageType = ({ roles, hasCurrentUserSent, receiver }) => {
-  const peerName = useHMSStore(selectPeerNameByID(receiver));
-  const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
+const MessageType = ({ roles, receiver }) => {
   if (receiver) {
-    return (
-      <MessageTypeContainer
-        left={hasCurrentUserSent ? `${peerName ? `TO ${peerName}` : ''}` : 'TO YOU'}
-        right="PRIVATE"
-      />
-    );
+    return <MessageTypeContainer left="Direct Message" />;
   }
 
-  if (roles && roles.length) {
-    return <MessageTypeContainer left="TO" right={hasCurrentUserSent ? roles.join(',') : localPeerRoleName} />;
+  if (roles && roles.length > 0) {
+    return <MessageTypeContainer left="To Group" right={roles[0]} />;
   }
   return null;
 };
@@ -143,30 +150,37 @@ const getMessageType = ({ roles, receiver }) => {
   }
   return receiver ? 'private' : '';
 };
-const ChatActions = ({ onPin, showPinAction, message, sentByLocalPeer, isMobile, openSheet, setOpenSheet }) => {
+const ChatActions = ({
+  onPin,
+  showPinAction,
+  onReplyPrivately,
+  showReplyPrivateAction,
+  message,
+  sentByLocalPeer,
+  isMobile,
+  openSheet,
+  setOpenSheet,
+}) => {
   const { elements } = useRoomLayoutConferencingScreen();
   const { can_hide_message, can_block_user } = elements?.chat?.real_time_controls || {
     can_hide_message: false,
     can_block_user: false,
   };
   const [open, setOpen] = useState(false);
-  const blacklistedPeerIDs = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_PEER_BLACKLIST)) || [];
   const { blacklistItem: blacklistPeer } = useChatBlacklist(SESSION_STORE_KEY.CHAT_PEER_BLACKLIST);
 
-  const blacklistedMessageIDs = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST)) || [];
-  const { blacklistItem: blacklistMessage } = useChatBlacklist(SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST);
-
+  const { blacklistItem: blacklistMessage, blacklistedIDs: blacklistedMessageIDs = [] } = useChatBlacklist(
+    SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST,
+  );
   const { unpinBlacklistedMessages } = useSetPinnedMessages();
 
-  const pinnedMessages = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES)) || [];
-
+  const pinnedMessages = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES));
   const updatePinnedMessages = useCallback(
-    ({ messageID = '', peerID = '' }) => {
+    (messageID = '') => {
       const blacklistedMessageIDSet = new Set([...blacklistedMessageIDs, messageID]);
-      const blacklistedPeerIDSet = new Set([...blacklistedPeerIDs, peerID]);
-      unpinBlacklistedMessages(pinnedMessages, blacklistedPeerIDSet, blacklistedMessageIDSet);
+      unpinBlacklistedMessages(pinnedMessages, blacklistedMessageIDSet);
     },
-    [pinnedMessages, blacklistedMessageIDs, blacklistedPeerIDs],
+    [blacklistedMessageIDs, unpinBlacklistedMessages, pinnedMessages],
   );
 
   const copyMessageContent = useCallback(() => {
@@ -184,6 +198,13 @@ const ChatActions = ({ onPin, showPinAction, message, sentByLocalPeer, isMobile,
   }, [message]);
 
   const options = {
+    reply: {
+      text: 'Reply Privately',
+      tooltipText: 'Reply privately',
+      icon: <ReplyIcon style={iconStyle} />,
+      onClick: onReplyPrivately,
+      show: showReplyPrivateAction,
+    },
     pin: {
       text: 'Pin message',
       tooltipText: 'Pin',
@@ -202,18 +223,15 @@ const ChatActions = ({ onPin, showPinAction, message, sentByLocalPeer, isMobile,
       text: 'Hide for everyone',
       icon: <EyeCloseIcon style={iconStyle} />,
       onClick: async () => {
-        blacklistMessage(blacklistedMessageIDs, message.id);
-        updatePinnedMessages({ messageID: message.id });
+        blacklistMessage(message.id);
+        updatePinnedMessages(message.id);
       },
       show: can_hide_message,
     },
     block: {
       text: 'Block from chat',
       icon: <CrossCircleIcon style={iconStyle} />,
-      onClick: async () => {
-        blacklistPeer(blacklistedPeerIDs, message?.senderUserId);
-        updatePinnedMessages({ peerID: message?.senderUserId });
-      },
+      onClick: async () => blacklistPeer(message?.senderUserId),
       color: '$alert_error_default',
       show: can_block_user && !sentByLocalPeer,
     },
@@ -269,9 +287,19 @@ const ChatActions = ({ onPin, showPinAction, message, sentByLocalPeer, isMobile,
           borderRadius: '$1',
           p: '$2',
           opacity: open ? 1 : 0,
+          position: 'absolute',
+          right: 0,
+          zIndex: 1,
           '@md': { opacity: 1 },
         }}
       >
+        {options.reply.show ? (
+          <Tooltip boxCss={tooltipBoxCSS} title={options.reply.tooltipText}>
+            <IconButton data-testid="reply_message_btn" onClick={options.reply.onClick}>
+              {options.reply.icon}
+            </IconButton>
+          </Tooltip>
+        ) : null}
         {options.pin.show ? (
           <Tooltip boxCss={tooltipBoxCSS} title={options.pin.tooltipText}>
             <IconButton data-testid="pin_message_btn" onClick={options.pin.onClick}>
@@ -335,7 +363,7 @@ const SenderName = styled(Text, {
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
-  maxWidth: '24ch',
+  maxWidth: '16ch',
   minWidth: 0,
   color: '$on_surface_high',
   fontWeight: '$semiBold',
@@ -344,6 +372,7 @@ const SenderName = styled(Text, {
 const ChatMessage = React.memo(
   ({ index, style = {}, message, setRowHeight, isLast = false, unreadCount = 0, scrollToBottom, onPin }) => {
     const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true });
+    const { elements } = useRoomLayoutConferencingScreen();
     const rowRef = useRef(null);
     useEffect(() => {
       if (rowRef.current) {
@@ -351,11 +380,14 @@ const ChatMessage = React.memo(
       }
     }, [index, setRowHeight]);
     const isMobile = useMedia(cssConfig.media.md);
-    const { elements } = useRoomLayoutConferencingScreen();
+    const isPrivateChatEnabled = !!elements?.chat?.private_chat_enabled;
     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 messageType = getMessageType({
       roles: message.recipientRoles,
       receiver: message.recipientPeer,
@@ -383,7 +415,8 @@ const ChatMessage = React.memo(
           mb: '$5',
           pr: '$10',
           mt: '$4',
-          '&:hover .chat_actions': { opacity: 1 },
+          '&:not(:hover} .chat_actions': { display: 'none' },
+          '&:hover .chat_actions': { display: 'flex', opacity: 1 },
         }}
         style={style}
       >
@@ -392,10 +425,16 @@ const ChatMessage = React.memo(
           align="center"
           css={{
             flexWrap: 'wrap',
+            position: 'relative',
             // Theme independent color, token should not be used for transparent chat
-            bg: messageType ? (isOverlay ? 'rgba(0, 0, 0, 0.64)' : '$surface_default') : undefined,
+            bg:
+              messageType && !(selectedPeer || selectedRole)
+                ? isOverlay
+                  ? 'rgba(0, 0, 0, 0.64)'
+                  : '$surface_default'
+                : undefined,
             r: '$1',
-            p: '$1 $2',
+            p: '$4',
             userSelect: 'none',
             '@md': {
               cursor: 'pointer',
@@ -416,21 +455,29 @@ const ChatMessage = React.memo(
             css={{
               color: isOverlay ? '#FFF' : '$on_surface_high',
               fontWeight: '$semiBold',
-              display: 'inline-flex',
+              display: 'flex',
               alignItems: 'center',
-              justifyContent: 'space-between',
+              alignSelf: 'stretch',
               width: '100%',
             }}
             as="div"
           >
             <Flex align="baseline">
               {message.senderName === 'You' || !message.senderName ? (
-                <SenderName as="span" variant="sm" css={{ color: isOverlay ? '#FFF' : '$on_surface_high' }}>
+                <SenderName
+                  as="span"
+                  variant="sub2"
+                  css={{ color: isOverlay ? '#FFF' : '$on_surface_high', fontWeight: '$semiBold' }}
+                >
                   {message.senderName || 'Anonymous'}
                 </SenderName>
               ) : (
                 <Tooltip title={message.senderName} side="top" align="start">
-                  <SenderName as="span" variant="sm" css={{ color: isOverlay ? '#FFF' : '$on_surface_high' }}>
+                  <SenderName
+                    as="span"
+                    variant="sub2"
+                    css={{ color: isOverlay ? '#FFF' : '$on_surface_high', fontWeight: '$semiBold' }}
+                  >
                     {message.senderName}
                   </SenderName>
                 </Tooltip>
@@ -438,9 +485,9 @@ const ChatMessage = React.memo(
               {!isOverlay ? (
                 <Text
                   as="span"
-                  variant="xs"
+                  variant="caption"
                   css={{
-                    ml: '$4',
+                    ml: '$2',
                     color: '$on_surface_medium',
                     flexShrink: 0,
                   }}
@@ -449,17 +496,17 @@ const ChatMessage = React.memo(
                 </Text>
               ) : null}
             </Flex>
-            <MessageType
-              hasCurrentUserSent={message.sender === localPeerId}
-              receiver={message.recipientPeer}
-              roles={message.recipientRoles}
-            />
+            {!(selectedPeer || selectedRole) && (
+              <MessageType receiver={message.recipientPeer} roles={message.recipientRoles} />
+            )}
 
             <ChatActions
               onPin={onPin}
               showPinAction={showPinAction}
               message={message}
               sentByLocalPeer={message.sender === localPeerId}
+              onReplyPrivately={() => setPeerSelector(message.sender)}
+              showReplyPrivateAction={!selectedPeer && message.sender !== localPeerId && isPrivateChatEnabled}
               isMobile={isMobile}
               openSheet={openSheet}
               setOpenSheet={setOpenSheet}
@@ -574,30 +621,28 @@ const VirtualizedChatMessages = React.forwardRef(({ messages, unreadCount = 0, s
   );
 });
 
-export const ChatBody = React.forwardRef(({ role, peerId, scrollToBottom, blacklistedPeerIDs }, listRef) => {
-  const storeMessageSelector = role
-    ? selectMessagesByRole(role)
-    : peerId
-    ? selectMessagesByPeerID(peerId)
-    : selectHMSMessages;
+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) || [];
   const blacklistedMessageIDs = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST)) || [];
   const getFilteredMessages = () => {
     const blacklistedMessageIDSet = new Set(blacklistedMessageIDs);
-    const blacklistedPeerIDSet = new Set(blacklistedPeerIDs);
-    return (
-      messages?.filter(
-        message =>
-          message.type === 'chat' &&
-          !blacklistedMessageIDSet.has(message.id) &&
-          !blacklistedPeerIDSet.has(message?.senderUserId),
-      ) || []
-    );
+
+    return messages?.filter(message => message.type === 'chat' && !blacklistedMessageIDSet.has(message.id)) || [];
   };
 
   const isMobile = useMedia(cssConfig.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
-  const unreadCount = useUnreadCount({ role, peerId });
+  const unreadCount = useUnreadCount({ role: selectedRole, peerId: selectedPeer });
 
   if (messages.length === 0 && !(isMobile && elements?.chat?.is_overlay)) {
     return (