@100mslive/roomkit-react 0.1.13-alpha.0 → 0.1.13

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.13-alpha.0",
+  "version": "0.1.13",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,10 +76,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.22-alpha.0",
-    "@100mslive/hms-virtual-background": "1.11.22-alpha.0",
-    "@100mslive/react-icons": "0.8.22-alpha.0",
-    "@100mslive/react-sdk": "0.8.22-alpha.0",
+    "@100mslive/hls-player": "0.1.22",
+    "@100mslive/hms-virtual-background": "1.11.22",
+    "@100mslive/react-icons": "0.8.22",
+    "@100mslive/react-sdk": "0.8.22",
     "@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": "b12ee3cc718d94936eb45de704bd29f823a5cad9"
+  "gitHead": "543b9152024ee7e4554701f1387b1af32906b58a"
 }

package/src/Prebuilt/components/AuthToken.jsx

@@ -1,9 +1,12 @@
 import React, { useEffect, useState } from 'react';
+import { useSessionStorage } from 'react-use';
+import { v4 } from 'uuid';
 import { useHMSActions } from '@100mslive/react-sdk';
 import { styled } from '../../Theme';
 import { useHMSPrebuiltContext } from '../AppContext';
 import { ErrorDialog } from '../primitives/DialogContent';
 import { useSetAppDataByKey } from './AppData/useUISettings';
+import { UserPreferencesKeys } from './hooks/useUserPreferences';
 import { APP_DATA } from '../common/constants';
 
 /**
@@ -21,6 +24,13 @@ const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken })
   const [error, setError] = useState({ title: '', body: '' });
   let authToken = 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) {
@@ -33,10 +43,10 @@ const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken })
     }
 
     hmsActions
-      .getAuthTokenByRoomCode({ roomCode, userId }, { endpoint: authTokenByRoomCodeEndpoint })
+      .getAuthTokenByRoomCode({ roomCode, userId: userId || savedUserId }, { endpoint: authTokenByRoomCodeEndpoint })
       .then(token => setAuthTokenInAppData(token))
       .catch(error => setError(convertError(error)));
-  }, [hmsActions, authToken, authTokenByRoomCodeEndpoint, setAuthTokenInAppData, roomCode, userId]);
+  }, [hmsActions, authToken, authTokenByRoomCodeEndpoint, setAuthTokenInAppData, roomCode, userId, savedUserId]);
 
   if (error.title) {
     return <ErrorDialog title={error.title}>{error.body}</ErrorDialog>;

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
-import { selectLocalPeerID, selectSessionStore } from '@100mslive/hms-video-store';
+import { selectLocalPeer, selectSessionStore } from '@100mslive/hms-video-store';
 import {
   HMSNotificationTypes,
   selectHMSMessagesCount,
@@ -28,7 +28,7 @@ export const Chat = ({ screenType }) => {
   const [peerSelector, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
   const [roleSelector, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
   const peerName = useHMSStore(selectPeerNameByID(peerSelector));
-  const localPeerId = useHMSStore(selectLocalPeerID);
+  const localPeer = useHMSStore(selectLocalPeer);
   const [chatOptions, setChatOptions] = useState({
     role: roleSelector || '',
     peerId: peerSelector && peerName ? peerSelector : '',
@@ -52,7 +52,7 @@ export const Chat = ({ screenType }) => {
   }, [notification, peerSelector, setPeerSelector]);
   const blacklistedPeerIDs = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_PEER_BLACKLIST)) || [];
   const blacklistedPeerIDSet = new Set(blacklistedPeerIDs);
-  const isLocalPeerBlacklisted = blacklistedPeerIDSet.has(localPeerId);
+  const isLocalPeerBlacklisted = blacklistedPeerIDSet.has(localPeer?.customerUserId);
   const storeMessageSelector = selectHMSMessagesCount;
   const { elements } = useRoomLayoutConferencingScreen();
   const { enabled: isChatEnabled = true } = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE)) || {};
@@ -88,9 +88,7 @@ export const Chat = ({ screenType }) => {
     >
       {isMobile && elements?.chat?.is_overlay ? null : (
         <>
-          {elements?.chat?.allow_pinning_messages ? (
-            <PinnedMessage clearPinnedMessage={index => removePinnedMessage(pinnedMessages, index)} />
-          ) : null}
+          <PinnedMessage clearPinnedMessage={index => removePinnedMessage(pinnedMessages, index)} />
         </>
       )}
 
@@ -107,7 +105,7 @@ export const Chat = ({ screenType }) => {
 
       {isLocalPeerBlacklisted ? <ChatBlocked /> : null}
 
-      {isMobile && elements?.chat?.is_overlay && elements?.chat?.allow_pinning_messages ? (
+      {isMobile && elements?.chat?.is_overlay ? (
         <PinnedMessage clearPinnedMessage={index => removePinnedMessage(pinnedMessages, index)} />
       ) : null}
 

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

@@ -34,6 +34,13 @@ import { useUnreadCount } from './useUnreadCount';
 import { SESSION_STORE_KEY } from '../../common/constants';
 
 const iconStyle = { height: '1.125rem', width: '1.125rem' };
+const tooltipBoxCSS = {
+  fontSize: '$xs',
+  backgroundColor: '$surface_default',
+  p: '$1 $5',
+  fontWeight: '$regular',
+  borderRadius: '$3',
+};
 
 const formatTime = date => {
   if (!(date instanceof Date)) {
@@ -136,7 +143,7 @@ const getMessageType = ({ roles, receiver }) => {
   }
   return receiver ? 'private' : '';
 };
-const ChatActions = ({ onPin, showPinAction, message, peerId, sentByLocalPeer, isMobile, openSheet, setOpenSheet }) => {
+const ChatActions = ({ onPin, showPinAction, message, sentByLocalPeer, isMobile, openSheet, setOpenSheet }) => {
   const { elements } = useRoomLayoutConferencingScreen();
   const { can_hide_message, can_block_user } = elements?.chat?.real_time_controls || {
     can_hide_message: false,
@@ -144,23 +151,23 @@ const ChatActions = ({ onPin, showPinAction, message, peerId, sentByLocalPeer, i
   };
   const [open, setOpen] = useState(false);
   const blacklistedPeerIDs = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_PEER_BLACKLIST)) || [];
-  const { blacklistItem: blacklistMessage } = useChatBlacklist(SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST);
+  const { blacklistItem: blacklistPeer } = useChatBlacklist(SESSION_STORE_KEY.CHAT_PEER_BLACKLIST);
 
   const blacklistedMessageIDs = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST)) || [];
-  const { blacklistItem: blacklistPeer } = useChatBlacklist(SESSION_STORE_KEY.CHAT_PEER_BLACKLIST);
+  const { blacklistItem: blacklistMessage } = useChatBlacklist(SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST);
+
   const { unpinBlacklistedMessages } = useSetPinnedMessages();
 
   const pinnedMessages = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES)) || [];
 
-  useEffect(() => {
-    if (!(blacklistedPeerIDs.length || blacklistedMessageIDs.length)) {
-      return;
-    }
-    const blacklistedMessageIDSet = new Set(blacklistedMessageIDs);
-    const blacklistedPeerIDSet = new Set(blacklistedPeerIDs);
-
-    unpinBlacklistedMessages(pinnedMessages, blacklistedPeerIDSet, blacklistedMessageIDSet);
-  }, [blacklistedMessageIDs, blacklistedPeerIDs, pinnedMessages, unpinBlacklistedMessages]);
+  const updatePinnedMessages = useCallback(
+    ({ messageID = '', peerID = '' }) => {
+      const blacklistedMessageIDSet = new Set([...blacklistedMessageIDs, messageID]);
+      const blacklistedPeerIDSet = new Set([...blacklistedPeerIDs, peerID]);
+      unpinBlacklistedMessages(pinnedMessages, blacklistedPeerIDSet, blacklistedMessageIDSet);
+    },
+    [pinnedMessages, blacklistedMessageIDs, blacklistedPeerIDs],
+  );
 
   const copyMessageContent = useCallback(() => {
     try {
@@ -179,12 +186,14 @@ const ChatActions = ({ onPin, showPinAction, message, peerId, sentByLocalPeer, i
   const options = {
     pin: {
       text: 'Pin message',
+      tooltipText: 'Pin',
       icon: <PinIcon style={iconStyle} />,
       onClick: onPin,
       show: showPinAction,
     },
     copy: {
       text: 'Copy text',
+      tooltipText: 'Copy',
       icon: <CopyIcon style={iconStyle} />,
       onClick: copyMessageContent,
       show: true,
@@ -192,13 +201,19 @@ const ChatActions = ({ onPin, showPinAction, message, peerId, sentByLocalPeer, i
     hide: {
       text: 'Hide for everyone',
       icon: <EyeCloseIcon style={iconStyle} />,
-      onClick: async () => blacklistMessage(blacklistedPeerIDs, message.id),
+      onClick: async () => {
+        blacklistMessage(blacklistedMessageIDs, message.id);
+        updatePinnedMessages({ messageID: message.id });
+      },
       show: can_hide_message,
     },
     block: {
       text: 'Block from chat',
       icon: <CrossCircleIcon style={iconStyle} />,
-      onClick: async () => blacklistPeer(blacklistedMessageIDs, peerId),
+      onClick: async () => {
+        blacklistPeer(blacklistedPeerIDs, message?.senderUserId);
+        updatePinnedMessages({ peerID: message?.senderUserId });
+      },
       color: '$alert_error_default',
       show: can_block_user && !sentByLocalPeer,
     },
@@ -258,25 +273,29 @@ const ChatActions = ({ onPin, showPinAction, message, peerId, sentByLocalPeer, i
         }}
       >
         {options.pin.show ? (
-          <IconButton data-testid="pin_message_btn" onClick={options.pin.onClick}>
-            {options.pin.icon}
-          </IconButton>
+          <Tooltip boxCss={tooltipBoxCSS} title={options.pin.tooltipText}>
+            <IconButton data-testid="pin_message_btn" onClick={options.pin.onClick}>
+              {options.pin.icon}
+            </IconButton>
+          </Tooltip>
         ) : null}
 
         {options.copy.show ? (
-          <IconButton onClick={options.copy.onClick} data-testid="copy_message_btn">
-            <CopyIcon style={iconStyle} />
-          </IconButton>
+          <Tooltip boxCss={tooltipBoxCSS} title={options.copy.tooltipText}>
+            <IconButton onClick={options.copy.onClick} data-testid="copy_message_btn">
+              <CopyIcon style={iconStyle} />
+            </IconButton>
+          </Tooltip>
         ) : null}
 
         {options.block.show || options.hide.show ? (
-          <Dropdown.Trigger asChild>
-            <IconButton>
-              <Tooltip title="More options">
+          <Tooltip boxCss={tooltipBoxCSS} title="More actions">
+            <Dropdown.Trigger asChild>
+              <IconButton>
                 <VerticalMenuIcon style={iconStyle} />
-              </Tooltip>
-            </IconButton>
-          </Dropdown.Trigger>
+              </IconButton>
+            </Dropdown.Trigger>
+          </Tooltip>
         ) : null}
       </Flex>
       <Dropdown.Portal>
@@ -344,7 +363,6 @@ const ChatMessage = React.memo(
     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;
-
     useEffect(() => {
       if (message.id && !message.read && inView) {
         hmsActions.setMessageRead(true, message.id);
@@ -362,9 +380,9 @@ const ChatMessage = React.memo(
         ref={ref}
         as="div"
         css={{
-          mb: '$10',
+          mb: '$5',
           pr: '$10',
-          mt: '$8',
+          mt: '$4',
           '&:hover .chat_actions': { opacity: 1 },
         }}
         style={style}
@@ -376,13 +394,15 @@ const ChatMessage = React.memo(
             flexWrap: 'wrap',
             // Theme independent color, token should not be used for transparent chat
             bg: messageType ? (isOverlay ? 'rgba(0, 0, 0, 0.64)' : '$surface_default') : undefined,
-            r: messageType ? '$1' : undefined,
-            px: messageType ? '$4' : '$2',
-            py: messageType ? '$4' : 0,
+            r: '$1',
+            p: '$1 $2',
             userSelect: 'none',
             '@md': {
               cursor: 'pointer',
             },
+            '&:hover': {
+              background: 'linear-gradient(277deg, $surface_default 0%, $surface_dim 60.87%)',
+            },
           }}
           key={message.time}
           data-testid="chat_msg"
@@ -439,7 +459,6 @@ const ChatMessage = React.memo(
               onPin={onPin}
               showPinAction={showPinAction}
               message={message}
-              peerId={message.sender}
               sentByLocalPeer={message.sender === localPeerId}
               isMobile={isMobile}
               openSheet={openSheet}
@@ -571,7 +590,7 @@ export const ChatBody = React.forwardRef(({ role, peerId, scrollToBottom, blackl
         message =>
           message.type === 'chat' &&
           !blacklistedMessageIDSet.has(message.id) &&
-          !blacklistedPeerIDSet.has(message.sender),
+          !blacklistedPeerIDSet.has(message?.senderUserId),
       ) || []
     );
   };

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

@@ -2,7 +2,7 @@ import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'reac
 import { useMedia } from 'react-use';
 import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
-import { selectLocalPeerName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { selectLocalPeer, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { EmojiIcon, PauseCircleIcon, SendIcon, VerticalMenuIcon } from '@100mslive/react-icons';
 import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover, styled, Text } from '../../..';
 import { IconButton } from '../../../IconButton';
@@ -86,9 +86,9 @@ export const ChatFooter = ({
   const isMobile = useMedia(cssConfig.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
   const message_placeholder = elements?.chat?.message_placeholder || 'Send a message';
-  const localPeerName = useHMSStore(selectLocalPeerName);
+  const localPeer = useHMSStore(selectLocalPeer);
   const isOverlayChat = elements?.chat?.is_overlay;
-  const can_disable_chat = !!elements?.chat?.real_time_controls?.can_disable_chat;
+  const canDisableChat = !!elements?.chat?.real_time_controls?.can_disable_chat;
 
   const sendMessage = useCallback(async () => {
     const message = inputRef?.current?.value;
@@ -132,7 +132,7 @@ export const ChatFooter = ({
       {/* {screenType !== 'hls_live_streaming' ? (
         <ChatSelectorContainer onSelect={onSelect} role={role} peerId={peerId} selection={selection} />
       ) : null} */}
-      {can_disable_chat ? (
+      {canDisableChat ? (
         <Flex align="center" justify="end" css={{ w: '100%', mb: '$4' }}>
           <Popover.Root>
             <Popover.Trigger asChild>
@@ -145,10 +145,16 @@ export const ChatFooter = ({
                 align="end"
                 side="top"
                 onClick={() => {
-                  hmsActions.sessionStore.set(SESSION_STORE_KEY.CHAT_STATE, {
+                  const chatState = {
                     enabled: false,
-                    updatedBy: localPeerName,
-                  });
+                    updatedBy: {
+                      peerId: localPeer?.id,
+                      userId: localPeer?.customerUserId,
+                      userName: localPeer?.name,
+                    },
+                    updatedAt: Date.now(),
+                  };
+                  hmsActions.sessionStore.set(SESSION_STORE_KEY.CHAT_STATE, chatState);
                 }}
                 css={{
                   backgroundColor: '$surface_default',

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

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { selectLocalPeerName, selectSessionStore, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { selectLocalPeer, selectSessionStore, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { Button } from '../../../Button';
 import { Box, Flex } from '../../../Layout';
 import { Text } from '../../../Text';
@@ -10,17 +10,19 @@ export const ChatPaused = () => {
   const hmsActions = useHMSActions();
   const { elements } = useRoomLayoutConferencingScreen();
   const { can_disable_chat } = elements?.chat.real_time_controls || false;
-  const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy = '' } =
+  const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy } =
     useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE)) || {};
-  const localPeerName = useHMSStore(selectLocalPeerName);
+
+  const localPeer = useHMSStore(selectLocalPeer);
 
   const unPauseChat = useCallback(
     async () =>
       await hmsActions.sessionStore.set(SESSION_STORE_KEY.CHAT_STATE, {
         enabled: true,
-        updatedBy: localPeerName,
+        updatedBy: { userName: localPeer.name, userId: localPeer?.customerUserId, peerId: localPeer.id },
+        updatedAt: Date.now(),
       }),
-    [hmsActions, localPeerName],
+    [hmsActions, localPeer],
   );
 
   return isChatEnabled ? null : (
@@ -37,7 +39,7 @@ export const ChatPaused = () => {
           variant="xs"
           css={{ color: '$on_surface_medium', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}
         >
-          Chat has been paused by {chatStateUpdatedBy}
+          Chat has been paused by {chatStateUpdatedBy?.peerId === localPeer.id ? 'you' : chatStateUpdatedBy?.userName}
         </Text>
       </Box>
       {can_disable_chat ? (

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

@@ -27,7 +27,7 @@ export const Navigation = ({
         <Box
           css={{
             borderLeft: '2px solid',
-            height: '$8',
+            height: '$4',
             borderColor: i === index ? '$on_surface_high' : '$on_surface_low',
           }}
         />

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useSwipeable } from 'react-swipeable';
 import { useMedia } from 'react-use';
-import { selectPermissions, selectSessionStore, useHMSStore } from '@100mslive/react-sdk';
+import { selectSessionStore, useHMSStore } from '@100mslive/react-sdk';
 import { CrossIcon, PinIcon } from '@100mslive/react-icons';
 import { Box, Flex } from '../../../Layout';
 import { Text } from '../../../Text';
@@ -16,13 +16,12 @@ import { SESSION_STORE_KEY } from '../../common/constants';
 const PINNED_MESSAGE_LENGTH = 75;
 
 export const PinnedMessage = ({ clearPinnedMessage }: { clearPinnedMessage: (index: number) => void }) => {
-  const permissions = useHMSStore(selectPermissions);
   const pinnedMessages = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES)) || [];
   const [pinnedMessageIndex, setPinnedMessageIndex] = useState(0);
   const isMobile = useMedia(cssConfig.media.md);
 
   const [hideOverflow, setHideOverflow] = useState(false);
-
+  const canOverflow = pinnedMessages?.[pinnedMessageIndex]?.text?.length > PINNED_MESSAGE_LENGTH || false;
   const formattedPinnedMessage = hideOverflow
     ? `${pinnedMessages?.[pinnedMessageIndex]?.text.slice(0, PINNED_MESSAGE_LENGTH)}... `
     : pinnedMessages?.[pinnedMessageIndex]?.text;
@@ -94,24 +93,23 @@ export const PinnedMessage = ({ clearPinnedMessage }: { clearPinnedMessage: (ind
         >
           <Text variant="sm" css={{ color: '$on_surface_medium' }} {...swipeHandlers}>
             <AnnotisedMessage message={formattedPinnedMessage} />
-            {hideOverflow ? (
-              <span style={{ cursor: 'pointer' }} onClick={() => setHideOverflow(false)}>
-                See more
+            {canOverflow ? (
+              <span style={{ cursor: 'pointer' }} onClick={() => setHideOverflow(prev => !prev)}>
+                $nbsp;{hideOverflow ? 'See more' : 'Collapse'}
               </span>
             ) : null}
           </Text>
         </Box>
-        {permissions?.removeOthers && (
-          <Flex
-            onClick={() => {
-              clearPinnedMessage(pinnedMessageIndex);
-              setPinnedMessageIndex(Math.max(0, pinnedMessageIndex - 1));
-            }}
-            css={{ cursor: 'pointer', color: '$on_surface_medium', '&:hover': { color: '$on_surface_high' } }}
-          >
-            <CrossIcon />
-          </Flex>
-        )}
+
+        <Flex
+          onClick={() => {
+            clearPinnedMessage(pinnedMessageIndex);
+            setPinnedMessageIndex(Math.max(0, pinnedMessageIndex - 1));
+          }}
+          css={{ cursor: 'pointer', color: '$on_surface_medium', '&:hover': { color: '$on_surface_high' } }}
+        >
+          <CrossIcon />
+        </Flex>
       </Flex>
     </Flex>
   ) : null;

package/src/Prebuilt/components/Notifications/ChatNotifications.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+import { v4 as uuid } from 'uuid';
+import { selectLocalPeerID, selectSessionStore, useHMSStore } from '@100mslive/react-sdk';
+import { ChatIcon, ChatUnreadIcon } from '@100mslive/react-icons';
+// @ts-ignore
+import { ToastManager } from '../Toast/ToastManager';
+import { SESSION_STORE_KEY } from '../../common/constants';
+
+const NOTIFICATION_TIME_DIFFERENCE = 5000;
+
+export const ChatNotifications = () => {
+  const chatState = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE));
+  const localPeerId = useHMSStore(selectLocalPeerID);
+
+  useEffect(() => {
+    if (!chatState || chatState.updatedBy?.peerId === localPeerId) {
+      return;
+    }
+
+    const showToast = Date.now() - chatState.updatedAt < NOTIFICATION_TIME_DIFFERENCE;
+
+    if (!showToast) {
+      return;
+    }
+
+    const notification = {
+      id: uuid(),
+      icon: chatState.enabled ? <ChatUnreadIcon /> : <ChatIcon />,
+      title: `Chat ${chatState.enabled ? 'resumed' : 'paused'} by ${chatState.updatedBy?.userName}`,
+    };
+    ToastManager.addToast(notification);
+  }, [chatState]);
+  return <></>;
+};

package/src/Prebuilt/components/Notifications/Notifications.tsx

@@ -20,6 +20,7 @@ import { ToastBatcher } from '../Toast/ToastBatcher';
 // @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
 import { AutoplayBlockedModal } from './AutoplayBlockedModal';
+import { ChatNotifications } from './ChatNotifications';
 import { InitErrorModal } from './InitErrorModal';
 import { PeerNotifications } from './PeerNotifications';
 import { PermissionErrorModal } from './PermissionErrorModal';
@@ -186,6 +187,7 @@ export function Notifications() {
       <AutoplayBlockedModal />
       <PermissionErrorModal />
       <InitErrorModal />
+      <ChatNotifications />
     </>
   );
 }

package/src/Prebuilt/components/Polls/Voting/QuestionCard.jsx

@@ -1,6 +1,6 @@
 // @ts-check
 import React, { useCallback, useMemo, useState } from 'react';
-import { selectLocalPeerID, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { selectLocalPeer, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { ChevronLeftIcon, ChevronRightIcon } from '@100mslive/react-icons';
 import { Box, Button, Flex, IconButton, Input, styled, Text } from '../../../../';
 import { checkCorrectAnswer } from '../../../common/utils';
@@ -38,9 +38,11 @@ export const QuestionCard = ({
   rolesThatCanViewResponses,
 }) => {
   const actions = useHMSActions();
-  const localPeerID = useHMSStore(selectLocalPeerID);
-  const localPeerResponse = responses?.find(response => response.peer?.peerid === localPeerID);
-  const isLocalPeerCreator = localPeerID === startedBy;
+  const localPeer = useHMSStore(selectLocalPeer);
+  const localPeerResponse = responses?.find(
+    response => response.peer?.peerid === localPeer?.id || response.peer?.userid === localPeer?.customerUserId,
+  );
+  const isLocalPeerCreator = localPeer?.id === startedBy;
   const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
   const roleCanViewResponse =
     !rolesThatCanViewResponses ||

package/src/Prebuilt/components/Polls/Voting/TimedVoting.jsx

@@ -8,8 +8,9 @@ import { QuestionCard } from './QuestionCard';
  * @returns
  */
 export const TimedView = ({ poll }) => {
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const activeQuestion = poll.questions?.[currentIndex];
+  // backend question index starts at 1
+  const [currentIndex, setCurrentIndex] = useState(1);
+  const activeQuestion = poll.questions?.find(question => question.index === currentIndex);
   if (!activeQuestion) {
     return null;
   }

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

@@ -19,10 +19,12 @@ export const VoteCount = ({ isQuiz, voteCount, isCorrectAnswer }) => {
           {isCorrectAnswer ? 'Correct' : 'Incorrect'}
         </Text>
       )}
-      <Text variant="sm" css={{ color: '$on_surface_medium' }}>
-        {voteCount}&nbsp;
-        {voteCount === 1 ? 'vote' : 'votes'}
-      </Text>
+      {voteCount ? (
+        <Text variant="sm" css={{ color: '$on_surface_medium' }}>
+          {voteCount}&nbsp;
+          {voteCount === 1 ? 'vote' : 'votes'}
+        </Text>
+      ) : null}
     </Flex>
   );
 };

package/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -186,7 +186,7 @@ const PreviewJoin = ({
           />
         </Box>
       </Container>
-      <Box css={{ position: 'absolute', right: '0', top: 0, height: '100%' }}>
+      <Box css={{ position: 'absolute', right: '0', top: 0, height: '100%', overflow: 'hidden' }}>
         <SidePane screenType="default" />
       </Box>
     </Flex>

package/src/Prebuilt/components/Toast/ToastConfig.jsx

@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
 import { selectPeerByID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import {
-  ChatIcon,
   ChatUnreadIcon,
   ConnectivityIcon,
   HandIcon,
@@ -146,24 +145,6 @@ export const ToastConfig = {
       };
     },
   },
-  CHAT_PAUSED: {
-    single: notification => {
-      return {
-        title: `Chat paused by ${notification.data?.name}`,
-        icon: <ChatIcon />,
-        action: <ChatAction />,
-      };
-    },
-  },
-  CHAT_RESUMED: {
-    single: notification => {
-      return {
-        title: `Chat resumed by ${notification.data?.name}`,
-        icon: <ChatUnreadIcon />,
-        action: <ChatAction />,
-      };
-    },
-  },
   RECONNECTED: {
     single: () => {
       return {