@100mslive/roomkit-react 0.1.5 → 0.1.6-alpha.1

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

@@ -1,5 +1,6 @@
-import React, { Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
+import { useMedia } from 'react-use';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { VariableSizeList } from 'react-window';
 import {
@@ -13,13 +14,15 @@ import {
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
-import { HorizontalMenuIcon, PinIcon } from '@100mslive/react-icons';
+import { PinIcon, VerticalMenuIcon } from '@100mslive/react-icons';
 import { Dropdown } from '../../../Dropdown';
 import { IconButton } from '../../../IconButton';
 import { Box, Flex } from '../../../Layout';
 import { Text } from '../../../Text';
-import { styled } from '../../../Theme';
+import { config as cssConfig, styled } from '../../../Theme';
 import { Tooltip } from '../../../Tooltip';
+import emptyChat from '../../images/empty-chat.svg';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useSetPinnedMessage } from '../hooks/useSetPinnedMessage';
 
 const formatTime = date => {
@@ -46,7 +49,7 @@ const MessageTypeContainer = ({ left, right }) => {
         ml: 'auto',
         mr: '$4',
         p: '$2 $4',
-        border: '1px solid $on_surface_low',
+        border: '1px solid $border_bright',
         r: '$0',
       }}
     >
@@ -55,9 +58,9 @@ const MessageTypeContainer = ({ left, right }) => {
           {left}
         </SenderName>
       )}
-      {left && right && <Box css={{ borderLeft: '1px solid $on_surface_low', mx: '$4', h: '$8' }} />}
+      {left && right && <Box css={{ borderLeft: '1px solid $border_bright', mx: '$4', h: '$8' }} />}
       {right && (
-        <SenderName as="span" variant="tiny">
+        <SenderName as="span" variant="tiny" css={{ textTransform: 'uppercase' }}>
           {right}
         </SenderName>
       )}
@@ -123,16 +126,18 @@ const getMessageType = ({ roles, receiver }) => {
   }
   return receiver ? 'private' : '';
 };
-
-const ChatActions = ({ onPin }) => {
+const ChatActions = ({ onPin, showPinAction }) => {
   const [open, setOpen] = useState(false);
+  if (!showPinAction) {
+    return null;
+  }
 
   return (
     <Dropdown.Root open={open} onOpenChange={setOpen}>
-      <Dropdown.Trigger asChild>
+      <Dropdown.Trigger className="chat_actions" css={{ opacity: open ? 1 : 0, '@md': { opacity: 1 } }} asChild>
         <IconButton>
           <Tooltip title="More options">
-            <HorizontalMenuIcon />
+            <VerticalMenuIcon />
           </Tooltip>
         </IconButton>
       </Dropdown.Trigger>
@@ -140,7 +145,7 @@ const ChatActions = ({ onPin }) => {
         <Dropdown.Content
           sideOffset={5}
           align="end"
-          css={{ width: '$48', backgroundColor: '$surface_bright', py: '$0' }}
+          css={{ width: '$48', backgroundColor: '$surface_bright', py: '$0', border: '1px solid $border_bright' }}
         >
           <Dropdown.Item data-testid="pin_message_btn" onClick={onPin}>
             <PinIcon />
@@ -148,6 +153,29 @@ const ChatActions = ({ onPin }) => {
               Pin Message
             </Text>
           </Dropdown.Item>
+          {/* {isMobile ? (
+            <Dropdown.Item
+              data-testid="copy_message_btn"
+              onClick={() => {
+                try {
+                  navigator?.clipboard.writeText(messageContent);
+                  ToastManager.addToast({
+                    title: 'Message copied successfully',
+                  });
+                } catch (e) {
+                  console.log(e);
+                  ToastManager.addToast({
+                    title: 'Could not copy message',
+                  });
+                }
+              }}
+            >
+              <CopyIcon />
+              <Text variant="sm" css={{ ml: '$4' }}>
+                Copy Message
+              </Text>
+            </Dropdown.Item>
+          ) : null} */}
         </Dropdown.Content>
       </Dropdown.Portal>
     </Dropdown.Root>
@@ -160,6 +188,8 @@ const SenderName = styled(Text, {
   whiteSpace: 'nowrap',
   maxWidth: '24ch',
   minWidth: 0,
+  color: '$on_surface_high',
+  fontWeight: '$semiBold',
 });
 
 const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPin }) => {
@@ -170,7 +200,9 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi
       setRowHeight(index, rowRef.current.clientHeight);
     }
   }, [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);
@@ -179,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) {
@@ -188,13 +220,19 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi
   }, [message.read, hmsActions, inView, message.id]);
 
   return (
-    <Box ref={ref} as="div" css={{ mb: '$10', pr: '$10' }} style={style}>
+    <Box
+      ref={ref}
+      as="div"
+      css={{ mb: '$10', pr: '$10', mt: '$8', '&:hover .chat_actions': { opacity: 1 } }}
+      style={style}
+    >
       <Flex
         ref={rowRef}
         align="center"
         css={{
           flexWrap: 'wrap',
-          bg: messageType ? '$surface_bright' : undefined,
+          // 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,
@@ -205,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',
@@ -214,41 +252,48 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi
           }}
           as="div"
         >
-          <Flex align="center">
+          <Flex align="baseline">
             {message.senderName === 'You' || !message.senderName ? (
-              <SenderName as="span">{message.senderName || 'Anonymous'}</SenderName>
+              <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">{message.senderName}</SenderName>
+                <SenderName as="span" variant="sm" css={{ color: isOverlay ? '#FFF' : '$on_surface_high' }}>
+                  {message.senderName}
+                </SenderName>
               </Tooltip>
             )}
-            <Text
-              as="span"
-              variant="sm"
-              css={{
-                ml: '$4',
-                color: '$on_primary_medium',
-                flexShrink: 0,
-              }}
-            >
-              {formatTime(message.time)}
-            </Text>
+            {!isOverlay ? (
+              <Text
+                as="span"
+                variant="xs"
+                css={{
+                  ml: '$4',
+                  color: '$on_surface_medium',
+                  flexShrink: 0,
+                }}
+              >
+                {formatTime(message.time)}
+              </Text>
+            ) : null}
           </Flex>
           <MessageType
             hasCurrentUserSent={message.sender === localPeerId}
             receiver={message.recipientPeer}
             roles={message.recipientRoles}
           />
-          {showPinAction && <ChatActions onPin={onPin} />}
+          {!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()}
         >
@@ -345,21 +390,35 @@ export const ChatBody = React.forwardRef(({ role, peerId, scrollToBottom }, list
     : peerId
     ? selectMessagesByPeerID(peerId)
     : selectHMSMessages;
-  const messages = useHMSStore(storeMessageSelector) || [];
+  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) {
+  if (messages.length === 0 && !(isMobile && elements?.chat?.is_overlay)) {
     return (
       <Flex
         css={{
           width: '100%',
-          height: '100%',
+          flex: '1 1 0',
           textAlign: 'center',
           px: '$4',
         }}
         align="center"
         justify="center"
       >
-        <Text>There are no messages here</Text>
+        <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>
     );
   }

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

@@ -0,0 +1,199 @@
+import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { useMedia } from 'react-use';
+import data from '@emoji-mart/data';
+import Picker from '@emoji-mart/react';
+import { useHMSActions } from '@100mslive/react-sdk';
+import { EmojiIcon, SendIcon } from '@100mslive/react-icons';
+import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover, styled } from '../../..';
+// @ts-ignore
+import { ToastManager } from '../Toast/ToastManager';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// import { ChatSelectorContainer } from './ChatSelectorContainer';
+// @ts-ignore
+import { useChatDraftMessage } from '../AppData/useChatState';
+// @ts-ignore
+import { useEmojiPickerStyles } from './useEmojiPickerStyles';
+
+const TextArea = styled('textarea', {
+  width: '100%',
+  bg: 'transparent',
+  color: '$on_primary_high',
+  resize: 'none',
+  lineHeight: '1rem',
+  position: 'relative',
+  fontFamily: '$sans',
+  fontSize: '100%',
+  margin: 0,
+  padding: 0,
+  top: '$3',
+  '&:focus': {
+    boxShadow: 'none',
+    outline: 'none',
+  },
+});
+
+function EmojiPicker({ onSelect }: { onSelect: (emoji: any) => void }) {
+  const [showEmoji, setShowEmoji] = useState(false);
+  const ref = useEmojiPickerStyles(showEmoji);
+  return (
+    <Popover.Root open={showEmoji} onOpenChange={setShowEmoji}>
+      <Popover.Trigger asChild css={{ appearance: 'none' }}>
+        <BaseIconButton as="div">
+          <EmojiIcon />
+        </BaseIconButton>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          alignOffset={-40}
+          sideOffset={16}
+          align="end"
+          css={{
+            p: 0,
+          }}
+        >
+          <Box
+            css={{
+              minWidth: 352,
+              minHeight: 435,
+            }}
+            ref={ref}
+          >
+            <Picker onEmojiSelect={onSelect} data={data} previewPosition="none" skinPosition="search" />
+          </Box>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
+
+export const ChatFooter = ({
+  role,
+  peerId,
+  onSend,
+  children /* onSelect, selection, screenType */,
+}: {
+  role: any;
+  peerId: string;
+  onSend: any;
+  children: ReactNode;
+}) => {
+  const hmsActions = useHMSActions();
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [draftMessage, setDraftMessage] = useChatDraftMessage();
+  const isMobile = useMedia(cssConfig.media.md);
+  const { elements } = useRoomLayoutConferencingScreen();
+  const isOverlayChat = elements?.chat?.is_overlay;
+
+  const sendMessage = useCallback(async () => {
+    const message = inputRef?.current?.value;
+    if (!message || !message.trim().length) {
+      return;
+    }
+    try {
+      if (role) {
+        await hmsActions.sendGroupMessage(message, [role]);
+      } else if (peerId) {
+        await hmsActions.sendDirectMessage(message, peerId);
+      } else {
+        await hmsActions.sendBroadcastMessage(message);
+      }
+      inputRef.current.value = '';
+      setTimeout(() => {
+        onSend();
+      }, 0);
+    } catch (error) {
+      const err = error as Error;
+      ToastManager.addToast({ title: err.message });
+    }
+  }, [role, peerId, hmsActions, onSend]);
+
+  useEffect(() => {
+    const messageElement = inputRef.current;
+    if (messageElement) {
+      messageElement.value = draftMessage;
+    }
+  }, [draftMessage]);
+
+  useEffect(() => {
+    const messageElement = inputRef.current;
+    return () => {
+      setDraftMessage(messageElement?.value || '');
+    };
+  }, [setDraftMessage]);
+
+  return (
+    <>
+      {/* {screenType !== 'hls_live_streaming' ? (
+        <ChatSelectorContainer onSelect={onSelect} role={role} peerId={peerId} selection={selection} />
+      ) : null} */}
+      <Flex align="center" css={{ gap: '$4', w: '100%' }}>
+        <Flex
+          align="center"
+          css={{
+            bg: isOverlayChat && isMobile ? '$surface_dim' : '$surface_default',
+            minHeight: '$16',
+            maxHeight: '$24',
+            position: 'relative',
+            py: '$6',
+            pl: '$8',
+            flexGrow: 1,
+            r: '$1',
+            '@md': {
+              minHeight: 'unset',
+              h: '$14',
+              boxSizing: 'border-box',
+            },
+          }}
+        >
+          {children}
+          <TextArea
+            css={{
+              c: '$on_surface_high',
+              '&:valid ~ .send-msg': { color: '$on_surface_high' },
+              '& ~ .send-msg': { color: '$on_surface_low' },
+            }}
+            placeholder="Send a message...."
+            ref={inputRef}
+            required
+            autoFocus={!isMobile}
+            onKeyPress={async event => {
+              if (event.key === 'Enter') {
+                if (!event.shiftKey) {
+                  event.preventDefault();
+                  await sendMessage();
+                }
+              }
+            }}
+            autoComplete="off"
+            aria-autocomplete="none"
+            onPaste={e => e.stopPropagation()}
+            onCut={e => e.stopPropagation()}
+            onCopy={e => e.stopPropagation()}
+          />
+          {!isMobile ? (
+            <EmojiPicker
+              onSelect={(emoji: any) => {
+                if (inputRef.current) {
+                  inputRef.current.value += ` ${emoji.native} `;
+                }
+              }}
+            />
+          ) : null}
+          <BaseIconButton
+            className="send-msg"
+            onClick={sendMessage}
+            css={{
+              ml: 'auto',
+              height: 'max-content',
+              mr: '$4',
+              '&:hover': { c: isMobile ? '' : '$on_surface_medium' },
+            }}
+            data-testid="send_msg_btn"
+          >
+            <SendIcon />
+          </BaseIconButton>
+        </Flex>
+      </Flex>
+    </>
+  );
+};

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

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { selectPeerCount, useHMSStore } from '@100mslive/react-sdk';
+import { CrossIcon } from '@100mslive/react-icons';
+import { Flex, IconButton, Tabs, Text } from '../../..';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useSidepaneToggle } from '../AppData/useSidepane';
+import { SIDE_PANE_OPTIONS } from '../../common/constants';
+
+const tabTriggerCSS = {
+  color: '$on_surface_high',
+  p: '$4',
+  fontWeight: '$semiBold',
+  fontSize: '$sm',
+  w: '100%',
+  justifyContent: 'center',
+};
+
+export const ChatParticipantHeader = React.memo(({ activeTabValue = SIDE_PANE_OPTIONS.CHAT }) => {
+  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+  const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  const [activeTab, setActiveTab] = useState(activeTabValue);
+  const peerCount = useHMSStore(selectPeerCount);
+  const { elements } = useRoomLayoutConferencingScreen();
+  const showChat = !!elements?.chat;
+  const showParticipants = !!elements?.participant_list;
+  const hideTabs = !(showChat && showParticipants);
+
+  return (
+    <Flex
+      align="center"
+      css={{
+        color: '$on_primary_high',
+        h: '$16',
+      }}
+    >
+      {hideTabs ? (
+        <Text variant="sm" css={{ fontWeight: '$semiBold', c: '$on_surface_high' }}>
+          {showChat ? 'Chat' : `Participants (${peerCount})`}
+        </Text>
+      ) : (
+        <Flex css={{ w: '100%', bg: '$surface_default', borderRadius: '$2' }}>
+          <Tabs.Root value={activeTab} onValueChange={setActiveTab} css={{ w: '100%' }}>
+            <Tabs.List css={{ w: '100%', p: '$2' }}>
+              <Tabs.Trigger
+                value={SIDE_PANE_OPTIONS.CHAT}
+                onClick={toggleChat}
+                css={{
+                  ...tabTriggerCSS,
+                  color: activeTab !== SIDE_PANE_OPTIONS.CHAT ? '$on_surface_low' : '$on_surface_high',
+                }}
+              >
+                Chat
+              </Tabs.Trigger>
+              <Tabs.Trigger
+                value={SIDE_PANE_OPTIONS.PARTICIPANTS}
+                onClick={toggleParticipants}
+                css={{
+                  ...tabTriggerCSS,
+                  color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? '$on_surface_low' : '$on_surface_high',
+                }}
+              >
+                Participants ({peerCount})
+              </Tabs.Trigger>
+            </Tabs.List>
+          </Tabs.Root>
+        </Flex>
+      )}
+      <IconButton
+        css={{ ml: 'auto' }}
+        onClick={e => {
+          e.stopPropagation();
+          if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
+            toggleChat();
+          } else {
+            toggleParticipants();
+          }
+        }}
+        data-testid="close_chat"
+      >
+        <CrossIcon />
+      </IconButton>
+    </Flex>
+  );
+});

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

@@ -1,6 +1,4 @@
-import React, { Fragment, useMemo, useState } from 'react';
-import { useMeasure } from 'react-use';
-import { FixedSizeList } from 'react-window';
+import React, { useMemo, useState } from 'react';
 import {
   selectMessagesUnreadCountByPeerID,
   selectMessagesUnreadCountByRole,
@@ -19,7 +17,11 @@ const ChatDotIcon = () => {
 
 const SelectorItem = ({ value, active, onClick, unreadCount }) => {
   return (
-    <Dropdown.Item data-testid="chat_members" css={{ align: 'center', px: '$10' }} onClick={onClick}>
+    <Dropdown.Item
+      data-testid="chat_members"
+      css={{ align: 'center', px: '$10', bg: '$surface_default' }}
+      onClick={onClick}
+    >
       <Text variant="sm">{value}</Text>
       <Flex align="center" css={{ ml: 'auto', color: '$on_primary_high' }}>
         {unreadCount > 0 && (
@@ -89,7 +91,6 @@ const PeerItem = ({ onSelect, peerId, name, active }) => {
 };
 
 const VirtualizedSelectItemList = ({ peers, selectedRole, selectedPeerId, searchValue, onSelect }) => {
-  const [ref, { width, height }] = useMeasure();
   const roles = useFilteredRoles();
   const filteredPeers = useMemo(
     () =>
@@ -127,14 +128,12 @@ const VirtualizedSelectItemList = ({ peers, selectedRole, selectedPeerId, search
   }, [onSelect, selectedRole, selectedPeerId, roles, filteredPeers]);
 
   return (
-    <Dropdown.Group ref={ref} css={{ height: '$64', overflowY: 'auto' }}>
-      <FixedSizeList itemSize={52} itemCount={listItems.length} width={width} height={height}>
-        {({ index, style }) => (
-          <div style={style} key={index}>
-            {listItems[index]}
-          </div>
-        )}
-      </FixedSizeList>
+    <Dropdown.Group css={{ overflowY: 'auto', maxHeight: '$64', bg: '$surface_default' }}>
+      <Box>
+        {listItems.map((item, index) => (
+          <Box key={index}>{item}</Box>
+        ))}
+      </Box>
     </Dropdown.Group>
   );
 };
@@ -144,10 +143,10 @@ export const ChatSelector = ({ role, peerId, onSelect }) => {
   const [search, setSearch] = useState('');
 
   return (
-    <Fragment>
+    <>
       {peers.length > 0 && (
-        <Box css={{ px: '$8' }}>
-          <ParticipantSearch onSearch={setSearch} placeholder="Search participants" />
+        <Box css={{ px: '$4' }}>
+          <ParticipantSearch onSearch={setSearch} placeholder="Search for participants" />
         </Box>
       )}
       <VirtualizedSelectItemList
@@ -157,6 +156,6 @@ export const ChatSelector = ({ role, peerId, onSelect }) => {
         peers={peers}
         searchValue={search}
       />
-    </Fragment>
+    </>
   );
 };