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

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.6-alpha.0",
+  "version": "0.1.6-alpha.2",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -62,6 +62,7 @@
     "@types/lodash.merge": "^4.6.6",
     "@types/mdx": "2.0.2",
     "@types/react": "^18.1.0",
+    "@types/react-window": "^1.8.5",
     "babel-loader": "^8.2.5",
     "babel-plugin-react-require": "3.1.3",
     "react": "^18.1.0",
@@ -75,11 +76,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.15-alpha.0",
-    "@100mslive/hms-virtual-background": "1.11.15-alpha.0",
-    "@100mslive/react-icons": "0.8.15-alpha.0",
-    "@100mslive/react-sdk": "0.8.15-alpha.0",
-    "@100mslive/types-prebuilt": "0.11.0",
+    "@100mslive/hls-player": "0.1.15-alpha.2",
+    "@100mslive/hms-virtual-background": "1.11.15-alpha.2",
+    "@100mslive/react-icons": "0.8.15-alpha.2",
+    "@100mslive/react-sdk": "0.8.15-alpha.2",
+    "@100mslive/types-prebuilt": "0.12.0",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
     "@radix-ui/react-accordion": "1.0.0",
@@ -114,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "447c3c90520aec5943d996050e263de842a61be2"
+  "gitHead": "e9017621fb9f9594f985d47483ccab4bed324a35"
 }

package/src/Prebuilt/App.tsx

@@ -13,8 +13,6 @@ import {
 // @ts-ignore: No implicit Any
 import { AppData } from './components/AppData/AppData';
 // @ts-ignore: No implicit Any
-import { BeamSpeakerLabelsLogging } from './components/AudioLevel/BeamSpeakerLabelsLogging';
-// @ts-ignore: No implicit Any
 import AuthToken from './components/AuthToken';
 // @ts-ignore: No implicit Any
 import { ErrorBoundary } from './components/ErrorBoundary';
@@ -40,6 +38,9 @@ import { HMSPrebuiltContext, useHMSPrebuiltContext } from './AppContext';
 import { FlyingEmoji } from './plugins/FlyingEmoji';
 // @ts-ignore: No implicit Any
 import { RemoteStopScreenshare } from './plugins/RemoteStopScreenshare';
+// @ts-ignore: No implicit Any
+import { useIsNotificationDisabled } from './components/AppData/useUISettings';
+import { useAutoStartStreaming } from './components/hooks/useAutoStartStreaming';
 import {
   useRoomLayoutLeaveScreen,
   useRoomLayoutPreviewScreen,
@@ -76,16 +77,6 @@ export type HMSPrebuiltRefType = {
   hmsNotifications: IHMSNotifications;
 };
 
-// TODO: remove now that there are options to change to portrait
-const getAspectRatio = ({ width, height }: { width: number; height: number }) => {
-  const host = process.env.REACT_APP_HOST_NAME || '';
-  const portraitDomains = (process.env.REACT_APP_PORTRAIT_MODE_DOMAINS || '').split(',');
-  if (portraitDomains.includes(host) && width > height) {
-    return { width: height, height: width };
-  }
-  return { width, height };
-};
-
 export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps>(
   (
     {
@@ -102,9 +93,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
     },
     ref,
   ) => {
-    const aspectRatio = '1-1';
     const metadata = '';
-    const { 0: width, 1: height } = aspectRatio.split('-').map(el => parseInt(el));
     const reactiveStore = useRef<HMSPrebuiltRefType>();
 
     const [hydrated, setHydrated] = React.useState(false);
@@ -217,7 +206,6 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
                       // no updates to the themes are fired if the name is same.
                       // TODO: cache the theme and do deep check to trigger name change in the theme
                       themeType={`${theme.name}-${Date.now()}`}
-                      aspectRatio={getAspectRatio({ width, height })}
                       theme={{
                         //@ts-ignore: Prebuilt theme to match stiches theme
                         colors: theme.palette,
@@ -261,6 +249,7 @@ const Redirector = ({ showPreview }: { showPreview: boolean }) => {
 const RouteList = () => {
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
+  useAutoStartStreaming();
   return (
     <Routes>
       {isPreviewScreenEnabled ? (
@@ -268,7 +257,7 @@ const RouteList = () => {
           <Route
             path=":roomId/:role"
             element={
-              <Suspense fallback={<FullPageProgress loadingText="Loading preview..." />}>
+              <Suspense fallback={<FullPageProgress text="Loading preview..." />}>
                 <PreviewContainer />
               </Suspense>
             }
@@ -276,7 +265,7 @@ const RouteList = () => {
           <Route
             path=":roomId"
             element={
-              <Suspense fallback={<FullPageProgress loadingText="Loading preview..." />}>
+              <Suspense fallback={<FullPageProgress text="Loading preview..." />}>
                 <PreviewContainer />
               </Suspense>
             }
@@ -287,7 +276,7 @@ const RouteList = () => {
         <Route
           path=":roomId/:role"
           element={
-            <Suspense fallback={<FullPageProgress loadingText="Joining..." />}>
+            <Suspense fallback={<FullPageProgress text="Joining..." />}>
               <Conference />
             </Suspense>
           }
@@ -295,7 +284,7 @@ const RouteList = () => {
         <Route
           path=":roomId"
           element={
-            <Suspense fallback={<FullPageProgress loadingText="Joining..." />}>
+            <Suspense fallback={<FullPageProgress text="Joining..." />}>
               <Conference />
             </Suspense>
           }
@@ -350,16 +339,16 @@ function AppRoutes({
   defaultAuthToken?: string;
 }) {
   const roomLayout = useRoomLayout();
+  const isNotificationsDisabled = useIsNotificationDisabled();
   return (
     <Router>
       <>
         <ToastContainer />
         <Notifications />
         <BackSwipe />
-        <FlyingEmoji />
+        {!isNotificationsDisabled && <FlyingEmoji />}
         <RemoteStopScreenshare />
         <KeyboardHandler />
-        <BeamSpeakerLabelsLogging />
         <AuthToken authTokenByRoomCodeEndpoint={authTokenByRoomCodeEndpoint} defaultAuthToken={defaultAuthToken} />
         {roomLayout && (
           <Routes>

package/src/Prebuilt/AppContext.tsx

@@ -6,7 +6,7 @@ type HMSPrebuiltContextType = {
   role?: string;
   userName?: string;
   userId?: string;
-  endpoints?: object;
+  endpoints?: Record<string, string>;
   onLeave?: () => void;
 };
 

package/src/Prebuilt/IconButton.jsx

@@ -9,11 +9,21 @@ const IconButton = styled(BaseIconButton, {
   r: '$1',
   variants: {
     active: {
+      true: {
+        color: '$on_surface_high',
+        backgroundColor: '$transparent',
+      },
       false: {
         border: '1px solid transparent',
         color: '$on_primary_high',
       },
     },
+    disabled: {
+      true: {
+        backgroundColor: '$surface_brighter',
+        color: '$on_surface_low',
+      },
+    },
   },
 });
 

package/src/Prebuilt/common/PeersSorter.ts

@@ -60,7 +60,7 @@ class PeersSorter {
     // delete to insert at beginning
     this.lruPeers.delete(speaker.id);
     const lruPeerArray = Array.from(this.lruPeers);
-    while (lruPeerArray.length >= this.tilesPerPage) {
+    while (lruPeerArray.length >= this.tilesPerPage && lruPeerArray.length) {
       lruPeerArray.pop();
     }
     this.lruPeers = new Set([speaker.id, ...lruPeerArray]);

package/src/Prebuilt/common/constants.js

@@ -29,7 +29,6 @@ export const APP_DATA = {
   appConfig: 'appConfig',
   sidePane: 'sidePane',
   hlsStats: 'hlsStats',
-  hlsViewerRole: 'hlsViewerRole',
   waitingViewerRole: 'waitingViewerRole',
   subscribedNotifications: 'subscribedNotifications',
   logo: 'logo',
@@ -45,10 +44,10 @@ export const APP_DATA = {
   pdfConfig: 'pdfConfig',
   minimiseInset: 'minimiseInset',
   activeScreensharePeerId: 'activeScreensharePeerId',
+  disableNotificiations: 'disableNotificiations',
 };
 export const UI_SETTINGS = {
   isAudioOnly: 'isAudioOnly',
-  isHeadless: 'isHeadless',
   maxTileCount: 'maxTileCount',
   uiViewMode: 'uiViewMode',
   showStatsOnTiles: 'showStatsOnTiles',

package/src/Prebuilt/common/utils.js

@@ -40,7 +40,7 @@ export const arrayIntersection = (a, b) => {
 
 export const getMetadata = metadataString => {
   try {
-    return metadataString === '' ? {} : JSON.parse(metadataString);
+    return !metadataString ? {} : JSON.parse(metadataString);
   } catch (error) {
     return {};
   }

package/src/Prebuilt/components/AppData/AppData.jsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import {
   HMSRoomState,
   selectAvailableRoleNames,
+  selectFullAppData,
   selectHLSState,
   selectIsConnectedToRoom,
   selectLocalPeerRoleName,
@@ -36,7 +37,6 @@ export const getAppDetails = appDetails => {
 const initialAppData = {
   [APP_DATA.uiSettings]: {
     [UI_SETTINGS.isAudioOnly]: false,
-    [UI_SETTINGS.isHeadless]: false,
     [UI_SETTINGS.maxTileCount]: 9,
     [UI_SETTINGS.showStatsOnTiles]: false,
     [UI_SETTINGS.enableAmbientMusic]: false,
@@ -65,6 +65,7 @@ const initialAppData = {
   [APP_DATA.authToken]: '',
   [APP_DATA.minimiseInset]: false,
   [APP_DATA.activeScreensharePeerId]: '',
+  [APP_DATA.disableNotificiations]: false,
 };
 
 export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {
@@ -76,6 +77,7 @@ export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {
   const roleNames = useHMSStore(selectAvailableRoleNames);
   const rolesMap = useHMSStore(selectRolesMap);
   const localPeerRole = useHMSStore(selectLocalPeerRoleName);
+  const appData = useHMSStore(selectFullAppData);
 
   useEffect(() => {
     if (!isConnected && sidePane && sidePane !== SIDE_PANE_OPTIONS.PARTICIPANTS) {
@@ -84,12 +86,16 @@ export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {
   }, [isConnected, sidePane, resetSidePane]);
 
   useEffect(() => {
-    hmsActions.initAppData(initialAppData);
+    hmsActions.initAppData({
+      ...initialAppData,
+      ...appData,
+    });
     hmsActions.setFrameworkInfo({
       type: 'react-web',
       isPrebuilt: true,
       version: React.version,
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hmsActions]);
 
   useEffect(() => {

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

@@ -11,7 +11,7 @@ import {
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
-import { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../../common/constants';
+import { APP_DATA, SESSION_STORE_KEY } from '../../common/constants';
 
 /**
  * fields saved related to UI settings in store's app data can be
@@ -46,11 +46,6 @@ export const useSetUiSettings = uiSettingKey => {
   return [value, setValue];
 };
 
-export const useIsHeadless = () => {
-  const isHeadless = useUISettings(UI_SETTINGS.isHeadless);
-  return isHeadless;
-};
-
 export const useWaitingViewerRole = () => {
   return useHMSStore(selectAppData(APP_DATA.waitingViewerRole));
 };
@@ -90,6 +85,11 @@ export const useSubscribedNotifications = notificationKey => {
   return notificationPreference;
 };
 
+export const useIsNotificationDisabled = () => {
+  const notificationPreference = useHMSStore(selectAppDataByPath(APP_DATA.disableNotificiations));
+  return notificationPreference;
+};
+
 export const useSetSubscribedNotifications = notificationKey => {
   const value = useSubscribedNotifications(notificationKey);
   const setValue = useSetAppData({

package/src/Prebuilt/components/AudioVideoToggle.jsx

@@ -67,16 +67,17 @@ export const AudioVideoToggle = ({ hideOptions = false }) => {
   const videoTrackId = useHMSStore(selectLocalVideoTrackID);
   const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTrackId));
   const roomState = useHMSStore(selectRoomState);
-  const isAudioPermitted = toggleAudio && audioInput?.length > 0;
-  const isVideoPermitted = toggleVideo && videoInput?.length > 0;
+  const hasAudioDevices = audioInput?.length > 0;
+  const hasVideoDevices = videoInput?.length > 0;
 
   return (
     <Fragment>
       {toggleAudio ? (
-        hideOptions ? (
+        hideOptions || !hasAudioDevices ? (
           <Tooltip title={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '⌘' : 'ctrl'} + d)`}>
             <IconButton
               active={isLocalAudioEnabled}
+              disabled={!toggleAudio}
               onClick={toggleAudio}
               key="toggleAudio"
               data-testid="audio_btn"
@@ -92,7 +93,7 @@ export const AudioVideoToggle = ({ hideOptions = false }) => {
         ) : (
           <IconButtonWithOptions
             options={formattedAudioInputList}
-            disabled={!isAudioPermitted}
+            disabled={!toggleAudio}
             onDisabledClick={toggleAudio}
             tooltipMessage={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '⌘' : 'ctrl'} + d)`}
             icon={
@@ -110,11 +111,12 @@ export const AudioVideoToggle = ({ hideOptions = false }) => {
       ) : null}
 
       {toggleVideo ? (
-        hideOptions ? (
+        hideOptions || !hasVideoDevices ? (
           <Tooltip title={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}>
             <IconButton
               key="toggleVideo"
               active={isLocalVideoEnabled}
+              disabled={!toggleVideo}
               onClick={toggleVideo}
               data-testid="video_btn"
               className="__cancel-drag-event"
@@ -128,7 +130,7 @@ export const AudioVideoToggle = ({ hideOptions = false }) => {
           </Tooltip>
         ) : (
           <IconButtonWithOptions
-            disabled={!isVideoPermitted}
+            disabled={!toggleVideo}
             onDisabledClick={toggleVideo}
             options={formattedVideoInputList}
             tooltipMessage={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}

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

@@ -17,7 +17,7 @@ import { Text } from '../../../Text';
 import { config as cssConfig } from '../../../Theme';
 import { AnnotisedMessage, ChatBody } from './ChatBody';
 import { ChatFooter } from './ChatFooter';
-import { ChatParticipantHeader } from './ChatParticipantHeader';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useSetSubscribedChatSelector } from '../AppData/useUISettings';
 import { useSetPinnedMessage } from '../hooks/useSetPinnedMessage';
 import { useUnreadCount } from './useUnreadCount';
@@ -66,7 +66,7 @@ const PinnedMessage = ({ clearPinnedMessage }) => {
   ) : null;
 };
 
-export const Chat = ({ screenType }) => {
+export const Chat = ({ screenType, hideControls = false }) => {
   const notification = useHMSNotifications(HMSNotificationTypes.PEER_LEFT);
   const [peerSelector, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
   const [roleSelector, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
@@ -76,10 +76,11 @@ export const Chat = ({ screenType }) => {
     peerId: peerSelector && peerName ? peerSelector : '',
     selection: roleSelector ? roleSelector : peerSelector && peerName ? peerName : 'Everyone',
   });
-  const [isSelectorOpen, setSelectorOpen] = useState(false);
+  const [isSelectorOpen] = useState(false);
   const listRef = useRef(null);
   const hmsActions = useHMSActions();
   const { setPinnedMessage } = useSetPinnedMessage();
+
   useEffect(() => {
     if (notification && notification.data && peerSelector === notification.data.id) {
       setPeerSelector('');
@@ -92,8 +93,15 @@ export const Chat = ({ screenType }) => {
   }, [notification, peerSelector, setPeerSelector]);
 
   const storeMessageSelector = selectHMSMessagesCount;
+  const { elements } = useRoomLayoutConferencingScreen();
   const isMobile = useMedia(cssConfig.media.md);
 
+  let isScrolledToBottom = false;
+  if (listRef.current) {
+    const currentRef = listRef.current._outerRef;
+    isScrolledToBottom = currentRef.scrollHeight - currentRef.clientHeight - currentRef.scrollTop < 10;
+  }
+
   const messagesCount = useHMSStore(storeMessageSelector) || 0;
   const scrollToBottom = useCallback(
     (unreadCount = 0) => {
@@ -109,13 +117,18 @@ export const Chat = ({ screenType }) => {
   );
 
   return (
-    <Flex direction="column" css={{ size: '100%', gap: '$4' }}>
-      {!isMobile ? (
-        <>
-          <ChatParticipantHeader selectorOpen={isSelectorOpen} onToggle={() => setSelectorOpen(value => !value)} />
-          <PinnedMessage clearPinnedMessage={setPinnedMessage} />
-        </>
-      ) : null}
+    <Flex
+      direction="column"
+      css={{
+        size: '100%',
+        gap: '$4',
+        marginTop: hideControls && elements?.chat?.is_overlay ? '$17' : '0',
+        transition: 'margin 0.3s ease-in-out',
+      }}
+    >
+      {isMobile && elements?.chat?.is_overlay ? null : (
+        <>{elements?.chat?.allow_pinning_messages ? <PinnedMessage clearPinnedMessage={setPinnedMessage} /> : null}</>
+      )}
 
       <ChatBody
         role={chatOptions.role}
@@ -140,7 +153,7 @@ export const Chat = ({ screenType }) => {
         }}
         peerId={chatOptions.peerId}
       >
-        {!isSelectorOpen && (
+        {!isSelectorOpen && !isScrolledToBottom && (
           <NewMessageIndicator role={chatOptions.role} peerId={chatOptions.peerId} scrollToBottom={scrollToBottom} />
         )}
       </ChatFooter>

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

@@ -14,7 +14,7 @@ import {
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
-import { CopyIcon, PinIcon, VerticalMenuIcon } from '@100mslive/react-icons';
+import { PinIcon, VerticalMenuIcon } from '@100mslive/react-icons';
 import { Dropdown } from '../../../Dropdown';
 import { IconButton } from '../../../IconButton';
 import { Box, Flex } from '../../../Layout';
@@ -22,7 +22,7 @@ import { Text } from '../../../Text';
 import { config as cssConfig, styled } from '../../../Theme';
 import { Tooltip } from '../../../Tooltip';
 import emptyChat from '../../images/empty-chat.svg';
-import { ToastManager } from '../Toast/ToastManager';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useSetPinnedMessage } from '../hooks/useSetPinnedMessage';
 
 const formatTime = date => {
@@ -126,10 +126,9 @@ const getMessageType = ({ roles, receiver }) => {
   }
   return receiver ? 'private' : '';
 };
-const ChatActions = ({ onPin, showPinAction, messageContent }) => {
+const ChatActions = ({ onPin, showPinAction }) => {
   const [open, setOpen] = useState(false);
-  const isMobile = useMedia(cssConfig.media.md);
-  if (!isMobile && !showPinAction) {
+  if (!showPinAction) {
     return null;
   }
 
@@ -154,8 +153,7 @@ const ChatActions = ({ onPin, showPinAction, messageContent }) => {
               Pin Message
             </Text>
           </Dropdown.Item>
-          {isMobile && showPinAction ? <Dropdown.ItemSeparator css={{ my: 0 }} /> : null}
-          {isMobile ? (
+          {/* {isMobile ? (
             <Dropdown.Item
               data-testid="copy_message_btn"
               onClick={() => {
@@ -177,7 +175,7 @@ const ChatActions = ({ onPin, showPinAction, messageContent }) => {
                 Copy Message
               </Text>
             </Dropdown.Item>
-          ) : null}
+          ) : null} */}
         </Dropdown.Content>
       </Dropdown.Portal>
     </Dropdown.Root>
@@ -203,7 +201,8 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi
     }
   }, [index, setRowHeight]);
   const isMobile = useMedia(cssConfig.media.md);
-
+  const { elements } = useRoomLayoutConferencingScreen();
+  const isOverlay = elements?.chat?.is_overlay && isMobile;
   const hmsActions = useHMSActions();
   const localPeerId = useHMSStore(selectLocalPeerID);
   const permissions = useHMSStore(selectPermissions);
@@ -212,7 +211,7 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi
     receiver: message.recipientPeer,
   });
   // show pin action only if peer has remove others permission and the message is of broadcast type
-  const showPinAction = permissions.removeOthers && !messageType;
+  const showPinAction = permissions.removeOthers && !messageType && elements?.chat?.allow_pinning_messages;
 
   useEffect(() => {
     if (message.id && !message.read && inView) {
@@ -233,7 +232,7 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi
         css={{
           flexWrap: 'wrap',
           // Theme independent color, token should not be used for transparent chat
-          bg: messageType ? (isMobile ? 'rgba(0, 0, 0, 0.64)' : '$surface_default') : undefined,
+          bg: messageType ? (isOverlay ? 'rgba(0, 0, 0, 0.64)' : '$surface_default') : undefined,
           r: messageType ? '$1' : undefined,
           px: messageType ? '$4' : '$2',
           py: messageType ? '$4' : 0,
@@ -244,7 +243,7 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi
       >
         <Text
           css={{
-            color: '$on_surface_high',
+            color: isOverlay ? '#FFF' : '$on_surface_high',
             fontWeight: '$semiBold',
             display: 'inline-flex',
             alignItems: 'center',
@@ -255,23 +254,23 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi
         >
           <Flex align="baseline">
             {message.senderName === 'You' || !message.senderName ? (
-              <SenderName as="span" variant="sm">
+              <SenderName as="span" variant="sm" css={{ color: isOverlay ? '#FFF' : '$on_surface_high' }}>
                 {message.senderName || 'Anonymous'}
               </SenderName>
             ) : (
               <Tooltip title={message.senderName} side="top" align="start">
-                <SenderName as="span" variant="sm">
+                <SenderName as="span" variant="sm" css={{ color: isOverlay ? '#FFF' : '$on_surface_high' }}>
                   {message.senderName}
                 </SenderName>
               </Tooltip>
             )}
-            {!isMobile ? (
+            {!isOverlay ? (
               <Text
                 as="span"
                 variant="xs"
                 css={{
                   ml: '$4',
-                  color: '$on_primary_medium',
+                  color: '$on_surface_medium',
                   flexShrink: 0,
                 }}
               >
@@ -284,18 +283,17 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi
             receiver={message.recipientPeer}
             roles={message.recipientRoles}
           />
-          {!isMobile ? (
-            <ChatActions onPin={onPin} showPinAction={showPinAction} messageContent={message.message} />
-          ) : null}
+          {!isOverlay ? <ChatActions onPin={onPin} showPinAction={showPinAction} /> : null}
         </Text>
         <Text
-          variant="body2"
+          variant="sm"
           css={{
             w: '100%',
             mt: '$2',
             wordBreak: 'break-word',
             whiteSpace: 'pre-wrap',
             userSelect: 'all',
+            color: isOverlay ? '#FFF' : '$on_surface_high',
           }}
           onClick={e => e.stopPropagation()}
         >
@@ -395,8 +393,9 @@ export const ChatBody = React.forwardRef(({ role, peerId, scrollToBottom }, list
   let messages = useHMSStore(storeMessageSelector);
   messages = useMemo(() => messages?.filter(message => message.type === 'chat') || [], [messages]);
   const isMobile = useMedia(cssConfig.media.md);
+  const { elements } = useRoomLayoutConferencingScreen();
 
-  if (messages.length === 0 && !isMobile) {
+  if (messages.length === 0 && !(isMobile && elements?.chat?.is_overlay)) {
     return (
       <Flex
         css={{