@100mslive/roomkit-react 0.1.0

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

@@ -0,0 +1,155 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  HMSNotificationTypes,
+  selectHMSMessagesCount,
+  selectPeerNameByID,
+  selectPermissions,
+  selectSessionStore,
+  useHMSActions,
+  useHMSNotifications,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { ChevronDownIcon, CrossIcon, PinIcon } from '@100mslive/react-icons';
+import { Button } from '../../../Button';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import IconButton from '../../IconButton';
+import { AnnotisedMessage, ChatBody } from './ChatBody';
+import { ChatFooter } from './ChatFooter';
+import { ChatHeader } from './ChatHeader';
+import { useSetSubscribedChatSelector } from '../AppData/useUISettings';
+import { useSetPinnedMessage } from '../hooks/useSetPinnedMessage';
+import { useUnreadCount } from './useUnreadCount';
+import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
+
+const PinnedMessage = ({ clearPinnedMessage }) => {
+  const permissions = useHMSStore(selectPermissions);
+  const pinnedMessage = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGE));
+
+  return pinnedMessage ? (
+    <Flex css={{ p: '$8', color: '$textMedEmp', bg: '$surfaceLight', r: '$1' }} align="center" justify="between">
+      <Box>
+        <PinIcon />
+      </Box>
+      <Box
+        css={{
+          ml: '$8',
+          color: '$textMedEmp',
+          w: '100%',
+          maxHeight: '$18',
+          overflowY: 'auto',
+        }}
+      >
+        <Text variant="sm">
+          <AnnotisedMessage message={pinnedMessage} />
+        </Text>
+      </Box>
+      {permissions.removeOthers && (
+        <IconButton onClick={() => clearPinnedMessage()}>
+          <CrossIcon />
+        </IconButton>
+      )}
+    </Flex>
+  ) : null;
+};
+
+export const Chat = () => {
+  const notification = useHMSNotifications(HMSNotificationTypes.PEER_LEFT);
+  const [peerSelector, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
+  const [roleSelector, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
+  const peerName = useHMSStore(selectPeerNameByID(peerSelector));
+  const [chatOptions, setChatOptions] = useState({
+    role: roleSelector || '',
+    peerId: peerSelector && peerName ? peerSelector : '',
+    selection: roleSelector ? roleSelector : peerSelector && peerName ? peerName : 'Everyone',
+  });
+  const [isSelectorOpen, setSelectorOpen] = useState(false);
+  const listRef = useRef(null);
+  const hmsActions = useHMSActions();
+  const { setPinnedMessage } = useSetPinnedMessage();
+  useEffect(() => {
+    if (notification && notification.data && peerSelector === notification.data.id) {
+      setPeerSelector('');
+      setChatOptions({
+        role: '',
+        peerId: '',
+        selection: 'Everyone',
+      });
+    }
+  }, [notification, peerSelector, setPeerSelector]);
+
+  const storeMessageSelector = selectHMSMessagesCount;
+
+  const messagesCount = useHMSStore(storeMessageSelector) || 0;
+  const scrollToBottom = useCallback(
+    (unreadCount = 0) => {
+      if (listRef.current && listRef.current.scrollToItem && unreadCount > 0) {
+        listRef.current?.scrollToItem(messagesCount, 'end');
+        requestAnimationFrame(() => {
+          listRef.current?.scrollToItem(messagesCount, 'end');
+        });
+        hmsActions.setMessageRead(true);
+      }
+    },
+    [hmsActions, messagesCount],
+  );
+
+  return (
+    <Flex direction="column" css={{ size: '100%' }}>
+      <ChatHeader
+        selectorOpen={isSelectorOpen}
+        selection={chatOptions.selection}
+        onSelect={({ role, peerId, selection }) => {
+          setChatOptions({
+            role,
+            peerId,
+            selection,
+          });
+          setPeerSelector(peerId);
+          setRoleSelector(role);
+        }}
+        role={chatOptions.role}
+        peerId={chatOptions.peerId}
+        onToggle={() => {
+          setSelectorOpen(value => !value);
+        }}
+      />
+      <PinnedMessage clearPinnedMessage={setPinnedMessage} />
+
+      <ChatBody role={chatOptions.role} peerId={chatOptions.peerId} ref={listRef} scrollToBottom={scrollToBottom} />
+      <ChatFooter role={chatOptions.role} peerId={chatOptions.peerId} onSend={() => scrollToBottom(1)}>
+        {!isSelectorOpen && (
+          <NewMessageIndicator role={chatOptions.role} peerId={chatOptions.peerId} scrollToBottom={scrollToBottom} />
+        )}
+      </ChatFooter>
+    </Flex>
+  );
+};
+
+const NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
+  const unreadCount = useUnreadCount({ role, peerId });
+  if (!unreadCount) {
+    return null;
+  }
+  return (
+    <Flex
+      justify="center"
+      css={{
+        width: '100%',
+        left: 0,
+        bottom: '100%',
+        position: 'absolute',
+      }}
+    >
+      <Button
+        onClick={() => {
+          scrollToBottom(unreadCount);
+        }}
+        css={{ p: '$2 $4', '& > svg': { ml: '$4' } }}
+      >
+        New Messages
+        <ChevronDownIcon width={16} height={16} />
+      </Button>
+    </Flex>
+  );
+};

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

@@ -0,0 +1,370 @@
+import React, { Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { VariableSizeList } from 'react-window';
+import {
+  selectHMSMessages,
+  selectLocalPeerID,
+  selectLocalPeerRoleName,
+  selectMessagesByPeerID,
+  selectMessagesByRole,
+  selectPeerNameByID,
+  selectPermissions,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { HorizontalMenuIcon, PinIcon } 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 { Tooltip } from '../../../Tooltip';
+import { useSetPinnedMessage } from '../hooks/useSetPinnedMessage';
+
+const formatTime = date => {
+  if (!(date instanceof Date)) {
+    return '';
+  }
+  let hours = date.getHours();
+  let mins = date.getMinutes();
+  const suffix = hours > 11 ? 'PM' : 'AM';
+  if (hours < 10) {
+    hours = '0' + hours;
+  }
+  if (mins < 10) {
+    mins = '0' + mins;
+  }
+  return `${hours}:${mins} ${suffix}`;
+};
+
+const MessageTypeContainer = ({ left, right }) => {
+  return (
+    <Flex
+      align="center"
+      css={{
+        ml: 'auto',
+        mr: '$4',
+        p: '$2 $4',
+        border: '1px solid $textDisabled',
+        r: '$0',
+      }}
+    >
+      {left && (
+        <SenderName variant="tiny" as="span" css={{ color: '$textMedEmp' }}>
+          {left}
+        </SenderName>
+      )}
+      {left && right && <Box css={{ borderLeft: '1px solid $textDisabled', mx: '$4', h: '$8' }} />}
+      {right && (
+        <SenderName as="span" variant="tiny">
+          {right}
+        </SenderName>
+      )}
+    </Flex>
+  );
+};
+
+const MessageType = ({ roles, hasCurrentUserSent, receiver }) => {
+  const peerName = useHMSStore(selectPeerNameByID(receiver));
+  const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
+  if (receiver) {
+    return (
+      <MessageTypeContainer
+        left={hasCurrentUserSent ? `${peerName ? `TO ${peerName}` : ''}` : 'TO YOU'}
+        right="PRIVATE"
+      />
+    );
+  }
+
+  if (roles && roles.length) {
+    return <MessageTypeContainer left="TO" right={hasCurrentUserSent ? roles.join(',') : localPeerRoleName} />;
+  }
+  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: '$brandDefault',
+  wordBreak: 'break-word',
+  '&:hover': {
+    textDecoration: 'underline',
+  },
+});
+
+export const AnnotisedMessage = ({ message }) => {
+  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 }) => {
+  if (roles && roles.length > 0) {
+    return 'role';
+  }
+  return receiver ? 'private' : '';
+};
+
+const ChatActions = ({ onPin }) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dropdown.Root open={open} onOpenChange={setOpen}>
+      <Dropdown.Trigger asChild>
+        <IconButton>
+          <Tooltip title="More options">
+            <Box>
+              <HorizontalMenuIcon />
+            </Box>
+          </Tooltip>
+        </IconButton>
+      </Dropdown.Trigger>
+      <Dropdown.Portal>
+        <Dropdown.Content sideOffset={5} align="end" css={{ width: '$48' }}>
+          <Dropdown.Item data-testid="pin_message_btn" onClick={onPin}>
+            <PinIcon />
+            <Text variant="sm" css={{ ml: '$4' }}>
+              Pin Message
+            </Text>
+          </Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Portal>
+    </Dropdown.Root>
+  );
+};
+
+const SenderName = styled(Text, {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  maxWidth: '24ch',
+  minWidth: 0,
+});
+
+const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPin }) => {
+  const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true });
+  const rowRef = useRef(null);
+  useEffect(() => {
+    if (rowRef.current) {
+      setRowHeight(index, rowRef.current.clientHeight);
+    }
+  }, [index, setRowHeight]);
+
+  const hmsActions = useHMSActions();
+  const localPeerId = useHMSStore(selectLocalPeerID);
+  const permissions = useHMSStore(selectPermissions);
+  const messageType = getMessageType({
+    roles: message.recipientRoles,
+    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;
+
+  useEffect(() => {
+    if (message.id && !message.read && inView) {
+      hmsActions.setMessageRead(true, message.id);
+    }
+  }, [message.read, hmsActions, inView, message.id]);
+
+  return (
+    <Box ref={ref} as="div" css={{ mb: '$10', pr: '$10' }} style={style}>
+      <Flex
+        ref={rowRef}
+        align="center"
+        css={{
+          flexWrap: 'wrap',
+          bg: messageType ? '$surfaceLight' : undefined,
+          r: messageType ? '$1' : undefined,
+          px: messageType ? '$4' : '$2',
+          py: messageType ? '$4' : 0,
+          userSelect: 'none',
+        }}
+        key={message.time}
+        data-testid="chat_msg"
+      >
+        <Text
+          css={{
+            color: '$textHighEmp',
+            fontWeight: '$semiBold',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            width: '100%',
+          }}
+          as="div"
+        >
+          <Flex align="center">
+            {message.senderName === 'You' || !message.senderName ? (
+              <SenderName as="span">{message.senderName || 'Anonymous'}</SenderName>
+            ) : (
+              <Tooltip title={message.senderName} side="top" align="start">
+                <SenderName as="span">{message.senderName}</SenderName>
+              </Tooltip>
+            )}
+            <Text
+              as="span"
+              variant="sm"
+              css={{
+                ml: '$4',
+                color: '$textSecondary',
+                flexShrink: 0,
+              }}
+            >
+              {formatTime(message.time)}
+            </Text>
+          </Flex>
+          <MessageType
+            hasCurrentUserSent={message.sender === localPeerId}
+            receiver={message.recipientPeer}
+            roles={message.recipientRoles}
+          />
+          {showPinAction && <ChatActions onPin={onPin} />}
+        </Text>
+        <Text
+          variant="body2"
+          css={{
+            w: '100%',
+            mt: '$2',
+            wordBreak: 'break-word',
+            whiteSpace: 'pre-wrap',
+            userSelect: 'all',
+          }}
+          onClick={e => e.stopPropagation()}
+        >
+          <AnnotisedMessage message={message.message} />
+        </Text>
+      </Flex>
+    </Box>
+  );
+});
+const ChatList = React.forwardRef(
+  ({ width, height, setRowHeight, getRowHeight, messages, scrollToBottom }, listRef) => {
+    const { setPinnedMessage } = useSetPinnedMessage();
+    useLayoutEffect(() => {
+      if (listRef.current && listRef.current.scrollToItem) {
+        scrollToBottom(1);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [listRef]);
+
+    return (
+      <VariableSizeList
+        ref={listRef}
+        itemCount={messages.length}
+        itemSize={getRowHeight}
+        width={width}
+        height={height - 1}
+        style={{
+          overflowX: 'hidden',
+        }}
+      >
+        {({ index, style }) => (
+          <ChatMessage
+            style={style}
+            index={index}
+            key={messages[index].id}
+            message={messages[index]}
+            setRowHeight={setRowHeight}
+            onPin={() => setPinnedMessage(messages[index])}
+          />
+        )}
+      </VariableSizeList>
+    );
+  },
+);
+const VirtualizedChatMessages = React.forwardRef(({ messages, scrollToBottom }, listRef) => {
+  const rowHeights = useRef({});
+
+  function getRowHeight(index) {
+    // 72 will be default row height for any message length
+    // 16 will add margin value as clientHeight don't include margin
+    return rowHeights.current[index] + 16 || 72;
+  }
+
+  const setRowHeight = useCallback(
+    (index, size) => {
+      listRef.current.resetAfterIndex(0);
+      rowHeights.current = { ...rowHeights.current, [index]: size };
+    },
+    [listRef],
+  );
+
+  return (
+    <Box
+      css={{
+        mr: '-$10',
+        h: '100%',
+      }}
+      as="div"
+    >
+      <AutoSizer
+        style={{
+          width: '90%',
+        }}
+      >
+        {({ height, width }) => (
+          <ChatList
+            width={width}
+            height={height}
+            messages={messages}
+            setRowHeight={setRowHeight}
+            getRowHeight={getRowHeight}
+            scrollToBottom={scrollToBottom}
+            ref={listRef}
+          />
+        )}
+      </AutoSizer>
+    </Box>
+  );
+});
+
+export const ChatBody = React.forwardRef(({ role, peerId, scrollToBottom }, listRef) => {
+  const storeMessageSelector = role
+    ? selectMessagesByRole(role)
+    : peerId
+    ? selectMessagesByPeerID(peerId)
+    : selectHMSMessages;
+  const messages = useHMSStore(storeMessageSelector) || [];
+
+  if (messages.length === 0) {
+    return (
+      <Flex
+        css={{
+          width: '100%',
+          height: '100%',
+          textAlign: 'center',
+          px: '$4',
+        }}
+        align="center"
+        justify="center"
+      >
+        <Text>There are no messages here</Text>
+      </Flex>
+    );
+  }
+
+  return (
+    <Fragment>
+      <VirtualizedChatMessages messages={messages} scrollToBottom={scrollToBottom} ref={listRef} />
+    </Fragment>
+  );
+});

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

@@ -0,0 +1,150 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+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, Flex, IconButton, Popover, styled } from '../../../';
+import { ToastManager } from '../Toast/ToastManager';
+import { useChatDraftMessage } from '../AppData/useChatState';
+import { useEmojiPickerStyles } from './useEmojiPickerStyles';
+
+const TextArea = styled('textarea', {
+  width: '100%',
+  bg: 'transparent',
+  color: '$textPrimary',
+  resize: 'none',
+  lineHeight: '1rem',
+  position: 'relative',
+  fontFamily: '$sans',
+  fontSize: '100%',
+  margin: 0,
+  padding: 0,
+  top: '$3',
+  '&:focus': {
+    boxShadow: 'none',
+    outline: 'none',
+  },
+});
+
+function EmojiPicker({ onSelect }) {
+  const [showEmoji, setShowEmoji] = useState(false);
+  const ref = useEmojiPickerStyles(showEmoji);
+  return (
+    <Popover.Root open={showEmoji} onOpenChange={setShowEmoji}>
+      <Popover.Trigger asChild css={{ appearance: 'none' }}>
+        <IconButton as="div">
+          <EmojiIcon />
+        </IconButton>
+      </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 }) => {
+  const hmsActions = useHMSActions();
+  const inputRef = useRef(null);
+  const [draftMessage, setDraftMessage] = useChatDraftMessage();
+
+  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) {
+      ToastManager.addToast({ title: error.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 (
+    <Flex
+      align="center"
+      css={{
+        bg: '$surfaceLight',
+        minHeight: '$16',
+        maxHeight: '$24',
+        position: 'relative',
+        py: '$6',
+        pl: '$8',
+        r: '$1',
+      }}
+    >
+      {children}
+      <TextArea
+        placeholder="Write something here"
+        ref={inputRef}
+        autoFocus
+        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()}
+      />
+      <EmojiPicker
+        onSelect={emoji => {
+          inputRef.current.value += ` ${emoji.native} `;
+        }}
+      />
+      <IconButton
+        onClick={sendMessage}
+        css={{ ml: 'auto', height: 'max-content', mr: '$4' }}
+        data-testid="send_msg_btn"
+      >
+        <SendIcon />
+      </IconButton>
+    </Flex>
+  );
+};