@100mslive/roomkit-react 0.1.18-alpha.1 → 0.1.18

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

@@ -0,0 +1,444 @@
+import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useMedia } from 'react-use';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { VariableSizeList } from 'react-window';
+import {
+  HMSMessage,
+  HMSPeerID,
+  HMSRoleName,
+  selectHMSMessages,
+  selectHMSMessagesCount,
+  selectLocalPeerID,
+  selectLocalPeerRoleName,
+  selectPeerNameByID,
+  selectSessionStore,
+  useHMSActions,
+  useHMSStore,
+  useHMSVanillaStore,
+} from '@100mslive/react-sdk';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { config as cssConfig, styled } from '../../../Theme';
+import { Tooltip } from '../../../Tooltip';
+// @ts-ignore
+import emptyChat from '../../images/empty-chat.svg';
+import { ChatActions } from './ChatActions';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore: No implicit Any
+import { useSetSubscribedChatSelector } from '../AppData/useUISettings';
+import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
+
+const formatTime = (date: Date) => {
+  if (!(date instanceof Date)) {
+    return '';
+  }
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const suffix = hours > 11 ? 'PM' : 'AM';
+  return `${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes} ${suffix}`;
+};
+
+const rowHeights: Record<number, number> = {};
+function getRowHeight(index: number) {
+  // 72 will be default row height for any message length
+  // 16 will add margin value as clientHeight don't include margin
+  return rowHeights[index] + 16 || 72;
+}
+
+const setRowHeight = (index: number, size: number) => {
+  Object.assign(rowHeights, { [index]: size });
+};
+
+const MessageTypeContainer = ({ left, right }: { left?: string; right?: string }) => {
+  return (
+    <Flex
+      align="center"
+      css={{
+        ml: '$2',
+        mr: '$4',
+        gap: '$space$2',
+      }}
+    >
+      {left && (
+        <SenderName
+          variant="xs"
+          as="span"
+          css={{ color: '$on_surface_medium', textTransform: 'capitalize', fontWeight: '$regular' }}
+        >
+          {left}
+        </SenderName>
+      )}
+      {right && (
+        <SenderName
+          as="span"
+          variant="overline"
+          css={{
+            color: '$on_surface_medium',
+            fontWeight: '$regular',
+          }}
+        >
+          {right}
+        </SenderName>
+      )}
+    </Flex>
+  );
+};
+
+const MessageType = ({
+  roles,
+  hasCurrentUserSent,
+  receiver,
+}: {
+  roles?: HMSRoleName[];
+  hasCurrentUserSent: boolean;
+  receiver?: HMSPeerID;
+}) => {
+  const peerName = useHMSStore(selectPeerNameByID(receiver));
+  const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
+  if (receiver) {
+    return (
+      <MessageTypeContainer left={hasCurrentUserSent ? `${peerName ? `to ${peerName}` : ''}` : 'to You'} right="(DM)" />
+    );
+  }
+
+  if (roles && roles.length) {
+    return <MessageTypeContainer left={`to ${hasCurrentUserSent ? roles[0] : localPeerRoleName}`} right="(Group)" />;
+  }
+  return null;
+};
+
+const URL_REGEX =
+  /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
+
+const Link = styled('a', {
+  color: '$primary_default',
+  wordBreak: 'break-word',
+  '&:hover': {
+    textDecoration: 'underline',
+  },
+});
+
+export const AnnotisedMessage = ({ message }: { message: string }) => {
+  if (!message) {
+    return <Fragment />;
+  }
+
+  return (
+    <Fragment>
+      {message
+        .trim()
+        .split(/(\s)/)
+        .map(part =>
+          URL_REGEX.test(part) ? (
+            <Link href={part} key={part} target="_blank" rel="noopener noreferrer">
+              {part}
+            </Link>
+          ) : (
+            part
+          ),
+        )}
+    </Fragment>
+  );
+};
+
+const getMessageType = ({ roles, receiver }: { roles?: HMSRoleName[]; receiver?: HMSPeerID }) => {
+  if (roles && roles.length > 0) {
+    return 'role';
+  }
+  return receiver ? 'private' : '';
+};
+const SenderName = styled(Text, {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  maxWidth: '14ch',
+  minWidth: 0,
+  color: '$on_surface_high',
+  fontWeight: '$semiBold',
+});
+
+const ChatMessage = React.memo(
+  ({ index, style = {}, message }: { message: HMSMessage; index: number; style: React.CSSProperties }) => {
+    const { elements } = useRoomLayoutConferencingScreen();
+    const rowRef = useRef<HTMLDivElement | null>(null);
+    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 localPeerId = useHMSStore(selectLocalPeerID);
+    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);
+    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 (rowRef.current) {
+        setRowHeight(index, rowRef.current.clientHeight);
+      }
+    }, [index]);
+
+    return (
+      <Box
+        css={{
+          mb: '$5',
+          pr: '$10',
+          mt: '$4',
+          '&:not(:hover} .chat_actions': { display: 'none' },
+          '&:hover .chat_actions': { display: 'flex', opacity: 1 },
+        }}
+        style={style}
+      >
+        <Flex
+          ref={rowRef}
+          align="center"
+          css={{
+            flexWrap: 'wrap',
+            position: 'relative',
+            // Theme independent color, token should not be used for transparent chat
+            bg:
+              messageType && !(selectedPeer.id || selectedRole)
+                ? isOverlay
+                  ? 'rgba(0, 0, 0, 0.64)'
+                  : '$surface_default'
+                : undefined,
+            r: '$1',
+            p: '$4',
+            userSelect: 'none',
+            '@md': {
+              cursor: 'pointer',
+            },
+            '&:hover': {
+              background: 'linear-gradient(277deg, $surface_default 0%, $surface_dim 60.87%)',
+            },
+          }}
+          data-testid="chat_msg"
+          onClick={() => {
+            if (isMobile) {
+              setOpenSheet(true);
+            }
+          }}
+        >
+          <Text
+            css={{
+              color: isOverlay ? '#FFF' : '$on_surface_high',
+              fontWeight: '$semiBold',
+              display: 'flex',
+              alignItems: 'center',
+              alignSelf: 'stretch',
+              width: '100%',
+            }}
+            as="div"
+          >
+            <Flex align="baseline">
+              {message.senderName === 'You' || !message.senderName ? (
+                <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="sub2"
+                    css={{ color: isOverlay ? '#FFF' : '$on_surface_high', fontWeight: '$semiBold' }}
+                  >
+                    {message.senderName}
+                  </SenderName>
+                </Tooltip>
+              )}
+              <MessageType
+                hasCurrentUserSent={message.sender === localPeerId}
+                receiver={message.recipientPeer}
+                roles={message.recipientRoles}
+              />
+            </Flex>
+
+            {!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
+              showPinAction={showPinAction}
+              message={message}
+              sentByLocalPeer={message.sender === localPeerId}
+              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}
+            />
+          </Text>
+          <Text
+            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();
+              setOpenSheet(true);
+            }}
+          >
+            <AnnotisedMessage message={message.message} />
+          </Text>
+        </Flex>
+      </Box>
+    );
+  },
+);
+
+const MessageWrapper = React.memo(
+  ({ index, style, data }: { index: number; style: React.CSSProperties; data: HMSMessage[] }) => {
+    return <ChatMessage style={style} index={index} key={data[index].id} message={data[index]} />;
+  },
+);
+
+const VirtualizedChatMessages = React.forwardRef<
+  VariableSizeList,
+  { messages: HMSMessage[]; scrollToBottom: (count: number) => void }
+>(({ messages, scrollToBottom }, listRef) => {
+  const hmsActions = useHMSActions();
+  const itemKey = useCallback((index: number, data: HMSMessage[]) => {
+    return data[index].id;
+  }, []);
+  useEffect(() => {
+    requestAnimationFrame(() => scrollToBottom(1));
+  }, [scrollToBottom]);
+  return (
+    <Box
+      css={{
+        mr: '-$10',
+        h: '100%',
+      }}
+    >
+      <AutoSizer
+        style={{
+          width: '90%',
+        }}
+      >
+        {({ height, width }: { height: number; width: number }) => (
+          <VariableSizeList
+            ref={listRef}
+            itemCount={messages.length}
+            itemSize={getRowHeight}
+            itemData={messages}
+            width={width}
+            height={height}
+            style={{
+              overflowX: 'hidden',
+            }}
+            itemKey={itemKey}
+            onItemsRendered={({ visibleStartIndex, visibleStopIndex }) => {
+              for (let i = visibleStartIndex; i <= visibleStopIndex; i++) {
+                if (!messages[i].read) {
+                  hmsActions.setMessageRead(true, messages[i].id);
+                }
+              }
+            }}
+          >
+            {MessageWrapper}
+          </VariableSizeList>
+        )}
+      </AutoSizer>
+    </Box>
+  );
+});
+
+export const ChatBody = React.forwardRef<VariableSizeList, { scrollToBottom: (count: number) => void }>(
+  ({ scrollToBottom }: { scrollToBottom: (count: number) => void }, listRef) => {
+    const messages = useHMSStore(selectHMSMessages);
+    const blacklistedMessageIDs = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST));
+    const filteredMessages = useMemo(() => {
+      const blacklistedMessageIDSet = new Set(blacklistedMessageIDs || []);
+      return messages?.filter(message => message.type === 'chat' && !blacklistedMessageIDSet.has(message.id)) || [];
+    }, [blacklistedMessageIDs, messages]);
+
+    const isMobile = useMedia(cssConfig.media.md);
+    const { elements } = useRoomLayoutConferencingScreen();
+    const vanillaStore = useHMSVanillaStore();
+
+    useEffect(() => {
+      const unsubscribe = vanillaStore.subscribe(() => {
+        // @ts-ignore
+        if (!listRef?.current) {
+          return;
+        }
+        // @ts-ignore
+        const outerElement = listRef.current._outerRef;
+        // @ts-ignore
+        if (outerElement.scrollHeight - (listRef.current.state.scrollOffset + outerElement.offsetHeight) <= 10) {
+          scrollToBottom(1);
+        }
+      }, selectHMSMessagesCount);
+      return unsubscribe;
+    }, [vanillaStore, listRef, scrollToBottom]);
+
+    if (filteredMessages.length === 0 && !(isMobile && elements?.chat?.is_overlay)) {
+      return (
+        <Flex
+          css={{
+            width: '100%',
+            flex: '1 1 0',
+            textAlign: 'center',
+            px: '$4',
+          }}
+          align="center"
+          justify="center"
+        >
+          <Box>
+            <img src={emptyChat} alt="Empty Chat" height={132} width={185} style={{ margin: '0 auto' }} />
+            <Text variant="h5" css={{ mt: '$8', c: '$on_surface_high' }}>
+              Start a conversation
+            </Text>
+            <Text
+              variant="sm"
+              css={{ mt: '$4', maxWidth: '80%', textAlign: 'center', mx: 'auto', c: '$on_surface_medium' }}
+            >
+              There are no messages here yet. Start a conversation by sending a message.
+            </Text>
+          </Box>
+        </Flex>
+      );
+    }
+
+    return <VirtualizedChatMessages messages={filteredMessages} ref={listRef} scrollToBottom={scrollToBottom} />;
+  },
+);

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

@@ -10,11 +10,11 @@ import { IconButton } from '../../../IconButton';
 import { ToastManager } from '../Toast/ToastManager';
 import { ChatSelectorContainer } from './ChatSelectorContainer';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// import { ChatSelectorContainer } from './ChatSelectorContainer';
 // @ts-ignore
 import { useChatDraftMessage } from '../AppData/useChatState';
 // @ts-ignore
 import { useSetSubscribedChatSelector, useSubscribeChatSelector } from '../AppData/useUISettings';
+import { useIsLocalPeerBlacklisted } from '../hooks/useChatBlacklist';
 // @ts-ignore
 import { useEmojiPickerStyles } from './useEmojiPickerStyles';
 import { useDefaultChatSelection } from '../../common/hooks';
@@ -72,7 +72,7 @@ function EmojiPicker({ onSelect }: { onSelect: (emoji: any) => void }) {
   );
 }
 
-export const ChatFooter = ({ onSend, children }: { onSend: () => void; children: ReactNode }) => {
+export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => void; children: ReactNode }) => {
   const hmsActions = useHMSActions();
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [draftMessage, setDraftMessage] = useChatDraftMessage();
@@ -86,6 +86,8 @@ export const ChatFooter = ({ onSend, children }: { onSend: () => void; children:
   const [selectedRole, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
   const defaultSelection = useDefaultChatSelection();
   const selection = selectedPeer.name || selectedRole || defaultSelection;
+  const isLocalPeerBlacklisted = useIsLocalPeerBlacklisted();
+
   useEffect(() => {
     if (!selectedPeer.id && !selectedRole && !['Everyone', ''].includes(defaultSelection)) {
       setRoleSelector(defaultSelection);
@@ -108,7 +110,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: () => void; children:
       }
       inputRef.current.value = '';
       setTimeout(() => {
-        onSend();
+        onSend(1);
       }, 0);
     } catch (error) {
       const err = error as HMSException;
@@ -132,6 +134,10 @@ export const ChatFooter = ({ onSend, children }: { onSend: () => void; children:
     };
   }, [setDraftMessage]);
 
+  if (isLocalPeerBlacklisted) {
+    return null;
+  }
+
   return (
     <Box>
       <Flex>

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

@@ -4,6 +4,7 @@ import { Button } from '../../../Button';
 import { Box, Flex } from '../../../Layout';
 import { Text } from '../../../Text';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useIsLocalPeerBlacklisted } from '../hooks/useChatBlacklist';
 import { SESSION_STORE_KEY } from '../../common/constants';
 
 export const ChatPaused = () => {
@@ -54,6 +55,10 @@ export const ChatPaused = () => {
 };
 
 export const ChatBlocked = () => {
+  const isLocalPeerBlacklisted = useIsLocalPeerBlacklisted();
+  if (!isLocalPeerBlacklisted) {
+    return null;
+  }
   return (
     <Flex
       align="center"

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

@@ -11,7 +11,7 @@ export const MwebChatOption = ({
   icon: any;
   text: string;
   onClick: () => void | Promise<void>;
-  color: string;
+  color?: string;
 }) => {
   return (
     <Flex align="center" css={{ w: '100%', color, cursor: 'pointer', gap: '$4', p: '$8' }} onClick={onClick}>

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

@@ -11,13 +11,15 @@ import { ArrowNavigation } from './ArrowNavigation';
 import { AnnotisedMessage } from './ChatBody';
 import { StickIndicator } from './StickIndicator';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useSetPinnedMessages } from '../hooks/useSetPinnedMessages';
 import { SESSION_STORE_KEY } from '../../common/constants';
 
 const PINNED_MESSAGE_LENGTH = 75;
 
-export const PinnedMessage = ({ clearPinnedMessage }: { clearPinnedMessage: (index: number) => void }) => {
+export const PinnedMessage = () => {
   const pinnedMessages = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES));
   const [pinnedMessageIndex, setPinnedMessageIndex] = useState(0);
+  const { removePinnedMessage } = useSetPinnedMessages();
   const isMobile = useMedia(cssConfig.media.md);
 
   const { elements } = useRoomLayoutConferencingScreen();
@@ -117,7 +119,7 @@ export const PinnedMessage = ({ clearPinnedMessage }: { clearPinnedMessage: (ind
         {canUnpinMessage ? (
           <Flex
             onClick={() => {
-              clearPinnedMessage(pinnedMessageIndex);
+              removePinnedMessage(pinnedMessageIndex);
               setPinnedMessageIndex(Math.max(0, pinnedMessageIndex - 1));
             }}
             css={{

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

@@ -1,21 +1,30 @@
 import React from 'react';
-import { QuizIcon } from '@100mslive/react-icons';
+import { QuizActiveIcon, QuizIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../..';
 // @ts-ignore: No implicit Any
 import IconButton from '../../IconButton';
 // @ts-ignore: No implicit Any
 import { useIsSidepaneTypeOpen, usePollViewToggle } from '../AppData/useSidepane';
+import { useUnreadPollQuizPresent } from '../hooks/useUnreadPollQuizPresent';
 // @ts-ignore: No implicit Any
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
 export const PollsToggle = () => {
   const isPollsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.POLLS);
   const togglePollView = usePollViewToggle();
+  const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
 
   return (
     <Tooltip key="polls" title={`${isPollsOpen ? 'Close' : 'Open'} polls and quizzes`}>
-      <IconButton onClick={togglePollView} active={!isPollsOpen} data-testid="polls_btn">
-        <QuizIcon />
+      <IconButton
+        onClick={() => {
+          togglePollView();
+          setUnreadPollQuiz(false);
+        }}
+        active={!isPollsOpen}
+        data-testid="polls_btn"
+      >
+        {unreadPollQuiz ? <QuizActiveIcon /> : <QuizIcon />}
       </IconButton>
     </Tooltip>
   );

package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx

@@ -18,6 +18,7 @@ import {
   HandIcon,
   HandRaiseSlashedIcon,
   PeopleIcon,
+  QuizActiveIcon,
   QuizIcon,
   RecordIcon,
   SettingsIcon,
@@ -48,6 +49,7 @@ import { useShowPolls } from '../../AppData/useUISettings';
 import { useDropdownList } from '../../hooks/useDropdownList';
 // @ts-ignore: No implicit any
 import { useMyMetadata } from '../../hooks/useMetadata';
+import { useUnreadPollQuizPresent } from '../../hooks/useUnreadPollQuizPresent';
 // @ts-ignore: No implicit any
 import { getFormattedCount } from '../../../common/utils';
 // @ts-ignore: No implicit any
@@ -92,6 +94,7 @@ export const MwebOptions = ({
   const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
   const { toggleAudio, toggleVideo } = useAVToggle();
   const noAVPermissions = !(toggleAudio || toggleVideo);
+  const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
   // const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
 
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
@@ -202,9 +205,10 @@ export const MwebOptions = ({
                 onClick={() => {
                   togglePollView();
                   setOpenOptionsSheet(false);
+                  setUnreadPollQuiz(false);
                 }}
               >
-                <QuizIcon />
+                {unreadPollQuiz ? <QuizActiveIcon /> : <QuizIcon />}
                 <ActionTile.Title>Polls and Quizzes</ActionTile.Title>
               </ActionTile.Root>
             )}

package/src/Prebuilt/components/Polls/common/MultipleChoiceOptions.jsx

@@ -51,7 +51,7 @@ export const MultipleChoiceOptions = ({
               </Checkbox.Root>
             ) : null}
 
-            {isStopped && correctOptionIndexes.includes(option.index) ? (
+            {isStopped && correctOptionIndexes?.includes(option.index) ? (
               <Flex css={{ color: '$on_surface_high' }}>
                 <CheckCircleIcon />
               </Flex>

package/src/Prebuilt/components/SidePaneTabs.tsx

@@ -107,16 +107,37 @@ export const SidePaneTabs = React.memo<{
         <>
           {hideTabs ? (
             <>
-              <Text variant="sm" css={{ fontWeight: '$semiBold', p: '$4', c: '$on_surface_high', pr: '$12' }}>
-                {showChat ? (
-                  chat_title
-                ) : (
-                  <span>
-                    Participants <ParticipantCount count={peerCount} />
-                  </span>
-                )}
-              </Text>
-
+              <Flex justify="between" css={{ w: '100%' }}>
+                <Text variant="sm" css={{ fontWeight: '$semiBold', p: '$4', c: '$on_surface_high', pr: '$12' }}>
+                  {showChat ? (
+                    chat_title
+                  ) : (
+                    <span>
+                      Participants&nbsp;
+                      <ParticipantCount count={peerCount} />
+                    </span>
+                  )}
+                </Text>
+                <Flex>
+                  {showChatSettings ? <ChatSettings /> : null}
+                  {isOverlayChat && isChatOpen ? null : (
+                    <IconButton
+                      css={{ my: '$1', color: '$on_surface_medium', '&:hover': { color: '$on_surface_high' } }}
+                      onClick={e => {
+                        e.stopPropagation();
+                        if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
+                          toggleChat();
+                        } else {
+                          toggleParticipants();
+                        }
+                      }}
+                      data-testid="close_chat"
+                    >
+                      <CrossIcon />
+                    </IconButton>
+                  )}
+                </Flex>
+              </Flex>
               {showChat ? <Chat /> : <ParticipantList offStageRoles={off_stage_roles} onActive={setActiveRole} />}
             </>
           ) : (
@@ -148,7 +169,8 @@ export const SidePaneTabs = React.memo<{
                       color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? '$on_surface_low' : '$on_surface_high',
                     }}
                   >
-                    Participants &nbsp; <ParticipantCount count={peerCount} />
+                    Participants&nbsp;
+                    <ParticipantCount count={peerCount} />
                   </Tabs.Trigger>
                 </Tabs.List>
                 {showChatSettings ? <ChatSettings /> : null}