@100mslive/roomkit-react 0.1.15 → 0.1.16

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.15",
+  "version": "0.1.16",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,11 +76,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.24",
-    "@100mslive/hms-virtual-background": "1.11.24",
-    "@100mslive/react-icons": "0.8.24",
-    "@100mslive/react-sdk": "0.8.24",
-    "@100mslive/types-prebuilt": "0.12.4",
+    "@100mslive/hls-player": "0.1.25",
+    "@100mslive/hms-virtual-background": "1.11.25",
+    "@100mslive/react-icons": "0.8.25",
+    "@100mslive/react-sdk": "0.8.25",
+    "@100mslive/types-prebuilt": "0.12.5",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
     "@radix-ui/react-accordion": "1.0.0",
@@ -115,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "49795c5577e2d578fc0a8f372f3290dd0a52c9b2"
+  "gitHead": "096d50e1ffbeb9f2ec895b630952d2ad9694dfee"
 }

package/src/Prebuilt/AppStateContext.tsx

@@ -55,7 +55,7 @@ export const useAppStateManager = () => {
       setActiveState(PrebuiltStates.MEETING);
     } else if (
       prevRoomState &&
-      [HMSRoomState.Reconnecting, HMSRoomState.Connected].includes(prevRoomState) &&
+      [HMSRoomState.Reconnecting, HMSRoomState.Connected, HMSRoomState.Connecting].includes(prevRoomState) &&
       [HMSRoomState.Disconnecting, HMSRoomState.Disconnected].includes(roomState)
     ) {
       const goTo = isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING;

package/src/Prebuilt/common/PeersSorter.ts

@@ -53,6 +53,7 @@ class PeersSorter {
 
   moveSpeakerToFront = (speaker?: HMSPeer) => {
     if (!speaker) {
+      this.maintainLruSize(this.tilesPerPage);
       this.updateListeners();
       return;
     }
@@ -62,11 +63,9 @@ class PeersSorter {
     }
     // delete to insert at beginning
     this.lruPeers.delete(speaker.id);
-    const lruPeerArray = Array.from(this.lruPeers);
-    while (lruPeerArray.length >= this.tilesPerPage && lruPeerArray.length) {
-      lruPeerArray.pop();
-    }
-    this.lruPeers = new Set([speaker.id, ...lruPeerArray]);
+    // - 1 as we are going to insert the new speaker
+    this.maintainLruSize(this.tilesPerPage - 1);
+    this.lruPeers = new Set([speaker.id, ...this.lruPeers]);
     this.updateListeners();
   };
 
@@ -98,6 +97,14 @@ class PeersSorter {
     });
     this.listeners.forEach(listener => listener?.(orderedPeers));
   };
+
+  private maintainLruSize = (size: number) => {
+    const lruPeerArray = Array.from(this.lruPeers);
+    while (lruPeerArray.length > size && lruPeerArray.length) {
+      lruPeerArray.pop();
+    }
+    this.lruPeers = new Set(lruPeerArray);
+  };
 }
 
 export default PeersSorter;

package/src/Prebuilt/common/constants.ts

@@ -17,7 +17,7 @@ export const RTMP_RECORD_DEFAULT_RESOLUTION = {
 export const EMOJI_REACTION_TYPE = 'EMOJI_REACTION';
 
 export const CHAT_SELECTOR = {
-  PEER_ID: 'peer_id',
+  PEER: 'peer',
   ROLE: 'role',
   EVERYONE: 'Everyone',
 };
@@ -33,7 +33,6 @@ export const APP_DATA = {
   waitingViewerRole: 'waitingViewerRole',
   subscribedNotifications: 'subscribedNotifications',
   logo: 'logo',
-  appLayout: 'appLayout',
   hlsStarted: 'hlsStarted',
   rtmpStarted: 'rtmpStarted',
   recordingStarted: 'recordingStarted',
@@ -122,15 +121,15 @@ export enum INTERACTION_TYPE {
 export enum QUESTION_TYPE_TITLE {
   'single-choice' = 'Single Choice',
   'multiple-choice' = 'Multiple Choice',
-  // "short-answer": "Short Answer",
-  // "long-answer": "Long Answer",
+  'short-answer' = 'Short Answer',
+  'long-answer' = 'Long Answer',
 }
 
 export enum QUESTION_TYPE {
   SINGLE_CHOICE = 'single-choice',
   MULTIPLE_CHOICE = 'multiple-choice',
-  // SHORT_ANSWER: "short-answer",
-  // LONG_ANSWER: "long-answer",
+  SHORT_ANSWER = 'short-answer',
+  LONG_ANSWER = 'long-answer',
 }
 
 export const ROLE_CHANGE_DECLINED = 'role_change_declined';

package/src/Prebuilt/common/hooks.ts

@@ -12,6 +12,7 @@ import {
 } from '@100mslive/react-sdk';
 import { useRoomLayout } from '../provider/roomLayoutProvider';
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { CHAT_SELECTOR } from './constants';
 /**
  * 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,
@@ -55,6 +56,21 @@ export const useFilteredRoles = () => {
   return elements?.chat?.roles_whitelist || [];
 };
 
+export const useDefaultChatSelection = () => {
+  const { elements } = useRoomLayoutConferencingScreen();
+  const roles = useFilteredRoles();
+  // default is everyone for public chat
+  if (elements?.chat?.public_chat_enabled) {
+    return CHAT_SELECTOR.EVERYONE;
+  }
+  // sending first role as default
+  if (roles.length > 0) {
+    return roles[0];
+  }
+  // sending empty
+  return '';
+};
+
 export const useShowStreamingUI = () => {
   const layout = useRoomLayout();
   const { join_form } = layout?.screens?.preview?.default?.elements || {};

package/src/Prebuilt/common/utils.js

@@ -1,4 +1,3 @@
-import { isEqual } from 'lodash';
 import { QUESTION_TYPE } from './constants';
 
 // eslint-disable-next-line complexity
@@ -159,11 +158,11 @@ export const getPeerParticipationSummary = (poll, localPeerID, localCustomerUser
     if (!peerResponse?.[0]) {
       return;
     }
-    const submission = [peerResponse[0].option] || peerResponse[0].options;
-    const answer =
-      [questions[peerResponse[0].questionIndex - 1].answer?.option] ||
-      questions[peerResponse[0].questionIndex - 1].answer?.options;
-    const isCorrect = isEqual(submission, answer);
+    const isCorrect = checkCorrectAnswer(
+      questions[peerResponse[0].questionIndex - 1].answer,
+      peerResponse[0],
+      questions[peerResponse[0].questionIndex - 1].type,
+    );
     if (isCorrect) {
       score += questions[peerResponse[0].questionIndex - 1]?.weight || 0;
       correctResponses++;

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

@@ -1,11 +1,8 @@
 import React, { useEffect } from 'react';
 import {
   HMSRoomState,
-  selectAvailableRoleNames,
   selectFullAppData,
   selectHLSState,
-  selectLocalPeerRoleName,
-  selectRolesMap,
   selectRoomState,
   selectRTMPState,
   useHMSActions,
@@ -13,8 +10,6 @@ import {
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
 //@ts-ignore
-import { normalizeAppPolicyConfig } from '../init/initUtils';
-//@ts-ignore
 import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
 // @ts-ignore
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from './useSidepane';
@@ -49,7 +44,7 @@ const initialAppData = {
   [APP_DATA.chatOpen]: false,
   [APP_DATA.chatSelector]: {
     [CHAT_SELECTOR.ROLE]: '',
-    [CHAT_SELECTOR.PEER_ID]: '',
+    [CHAT_SELECTOR.PEER]: {},
   },
   [APP_DATA.chatDraft]: '',
   [APP_DATA.sidePane]: '',
@@ -73,9 +68,6 @@ const initialAppData = {
 export const AppData = React.memo(() => {
   const hmsActions = useHMSActions();
   const [preferences = {}] = useUserPreferences(UserPreferencesKeys.UI_SETTINGS);
-  const roleNames = useHMSStore(selectAvailableRoleNames);
-  const rolesMap = useHMSStore(selectRolesMap);
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
   const appData = useHMSStore(selectFullAppData);
 
   useEffect(() => {
@@ -109,13 +101,6 @@ export const AppData = React.memo(() => {
     hmsActions.setAppData(APP_DATA.subscribedNotifications, preferences.subscribedNotifications, true);
   }, [preferences.subscribedNotifications, hmsActions]);
 
-  useEffect(() => {
-    if (localPeerRole) {
-      const config = normalizeAppPolicyConfig(roleNames, rolesMap);
-      hmsActions.setAppData(APP_DATA.appLayout, config[localPeerRole]);
-    }
-  }, [roleNames, rolesMap, localPeerRole, hmsActions]);
-
   return <ResetStreamingStart />;
 });
 

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

@@ -1,13 +1,7 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
-import { selectLocalPeer, selectPeerByID, selectSessionStore } from '@100mslive/hms-video-store';
-import {
-  HMSNotificationTypes,
-  selectHMSMessagesCount,
-  useHMSActions,
-  useHMSNotifications,
-  useHMSStore,
-} from '@100mslive/react-sdk';
+import { selectLocalPeer, selectSessionStore, selectUnreadHMSMessagesCount } from '@100mslive/hms-video-store';
+import { selectHMSMessagesCount, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { ChevronDownIcon } from '@100mslive/react-icons';
 import { Button } from '../../../Button';
 import { Flex } from '../../../Layout';
@@ -17,33 +11,18 @@ import { ChatFooter } from './ChatFooter';
 import { ChatBlocked, ChatPaused } from './ChatStates';
 import { PinnedMessage } from './PinnedMessage';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useSetSubscribedChatSelector } from '../AppData/useUISettings';
 import { useSetPinnedMessages } from '../hooks/useSetPinnedMessages';
-import { useUnreadCount } from './useUnreadCount';
-import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
+import { SESSION_STORE_KEY } from '../../common/constants';
 
 export const Chat = () => {
   const { elements, screenType } = useRoomLayoutConferencingScreen();
-  const notification = useHMSNotifications(HMSNotificationTypes.PEER_LEFT);
-  const [selectedPeer, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
-  const [selectedRole, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
   const localPeer = useHMSStore(selectLocalPeer);
   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 && selectedPeer === notification.data.id) {
-      setPeerSelector('');
-      setRoleSelector('');
-    }
-    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);
@@ -97,17 +76,15 @@ export const Chat = () => {
 
       {isChatEnabled && !isLocalPeerBlacklisted ? (
         <ChatFooter onSend={() => scrollToBottom(1)} screenType={screenType}>
-          {!isSelectorOpen && !isScrolledToBottom && (
-            <NewMessageIndicator role={selectedRole} peerId={selectedPeer} scrollToBottom={scrollToBottom} />
-          )}
+          {!isSelectorOpen && !isScrolledToBottom && <NewMessageIndicator scrollToBottom={scrollToBottom} />}
         </ChatFooter>
       ) : null}
     </Flex>
   );
 };
 
-const NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
-  const unreadCount = useUnreadCount({ role, peerId });
+const NewMessageIndicator = ({ scrollToBottom }) => {
+  const unreadCount = useHMSStore(selectUnreadHMSMessagesCount);
   if (!unreadCount) {
     return null;
   }

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 (