@100mslive/roomkit-react 0.4.3-alpha.2 → 0.4.3-alpha.4

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

@@ -1,493 +0,0 @@
-import React, { Fragment, useCallback, useEffect, useLayoutEffect, 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,
-  selectLocalPeerID,
-  selectLocalPeerName,
-  selectLocalPeerRoleName,
-  selectPeerNameByID,
-  selectSessionStore,
-  selectUnreadHMSMessagesCount,
-  useHMSActions,
-  useHMSStore,
-  useHMSVanillaStore,
-} from '@100mslive/react-sdk';
-import { SolidPinIcon } from '@100mslive/react-icons';
-import { Box, Flex } from '../../../Layout';
-import { Text } from '../../../Text';
-import { config as cssConfig, styled } from '../../../Theme';
-import { Tooltip } from '../../../Tooltip';
-import { ChatActions } from './ChatActions';
-import { EmptyChat } from './EmptyChat';
-import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore: No implicit Any
-import { useSetSubscribedChatSelector } from '../AppData/useUISettings';
-import { usePinnedBy } from '../hooks/usePinnedBy';
-import { formatTime } from './utils';
-import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
-
-const rowHeights: Record<number, { size: number; id: string }> = {};
-let listInstance: VariableSizeList | null = null; //eslint-disable-line
-function getRowHeight(index: number) {
-  // 72 will be default row height for any message length
-  return rowHeights[index]?.size || 72;
-}
-
-const setRowHeight = (index: number, id: string, size: number) => {
-  if (rowHeights[index]?.id === id && rowHeights[index]?.size === size) {
-    return;
-  }
-  listInstance?.resetAfterIndex(Math.max(index - 1, 0));
-  Object.assign(rowHeights, { [index]: { size, id } });
-};
-
-const getMessageBackgroundColor = (
-  messageType: string,
-  selectedPeerID: string,
-  selectedRole: string,
-  isOverlay: boolean,
-) => {
-  if (messageType && !(selectedPeerID || selectedRole)) {
-    return isOverlay ? 'rgba(0, 0, 0, 0.64)' : '$surface_default';
-  }
-  return '';
-};
-
-const MessageTypeContainer = ({ left, right }: { left?: string; right?: string }) => {
-  return (
-    <Flex
-      align="center"
-      css={{
-        ml: '$2',
-        mr: '$4',
-        gap: '$space$2',
-        flexWrap: 'nowrap',
-      }}
-    >
-      {left && (
-        <Text
-          variant="xs"
-          as="span"
-          css={{
-            color: '$on_surface_medium',
-            textTransform: 'capitalize',
-            fontWeight: '$regular',
-            whiteSpace: 'nowrap',
-          }}
-        >
-          {left}
-        </Text>
-      )}
-      {right && (
-        <Text
-          as="span"
-          variant="overline"
-          css={{
-            color: '$on_surface_medium',
-            fontWeight: '$regular',
-            whiteSpace: 'nowrap',
-          }}
-        >
-          {right}
-        </Text>
-      )}
-    </Flex>
-  );
-};
-
-export 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, length }: { message: string; length?: number }) => {
-  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.slice(0, length)}
-            </Link>
-          ) : (
-            part.slice(0, length)
-          ),
-        )}
-    </Fragment>
-  );
-};
-
-const getMessageType = ({ roles, receiver }: { roles?: HMSRoleName[]; receiver?: HMSPeerID }) => {
-  if (roles && roles.length > 0) {
-    return 'role';
-  }
-  return receiver ? 'private' : '';
-};
-
-export const SenderName = styled(Text, {
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  width: '100%',
-  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 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, setOpenSheetBare] = useState(false);
-    const showPinAction = !!elements?.chat?.allow_pinning_messages;
-    const showReply = message.sender !== selectedPeer.id && message.sender !== localPeerId && isPrivateChatEnabled;
-    useLayoutEffect(() => {
-      if (rowRef.current) {
-        setRowHeight(index, message.id, rowRef.current.clientHeight);
-      }
-    }, [index, message.id]);
-
-    const setOpenSheet = (value: boolean, e?: React.MouseEvent<HTMLElement, MouseEvent>) => {
-      e?.stopPropagation();
-      setOpenSheetBare(value);
-    };
-
-    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
-            background: getMessageBackgroundColor(messageType, selectedPeer.id, selectedRole, !!isOverlay),
-            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={e => {
-            if (isMobile) {
-              setOpenSheet(true, e);
-            }
-          }}
-        >
-          <PinnedBy messageId={message.id} index={index} rowRef={rowRef} />
-          <Text
-            css={{
-              color: isOverlay ? '#FFF' : '$on_surface_high',
-              fontWeight: '$semiBold',
-              display: 'flex',
-              alignItems: 'center',
-              alignSelf: 'stretch',
-              width: '100%',
-            }}
-            as="div"
-          >
-            <Flex
-              align="baseline"
-              css={{
-                flexWrap: 'nowrap',
-                maxWidth: 'calc(100% - 10ch)',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-              }}
-            >
-              {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" boxCss={{ zIndex: 50 }}>
-                  <SenderName
-                    as="span"
-                    variant="sub2"
-                    css={{ color: isOverlay ? '#FFF' : '$on_surface_high', fontWeight: '$semiBold' }}
-                  >
-                    {message.sender === localPeerId ? `${message.senderName} (You)` : 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={() => {
-                setRoleSelector('');
-                setPeerSelector({ id: message.sender, name: message.senderName });
-              }}
-              onReplyGroup={() => {
-                if (message.senderRole) {
-                  setRoleSelector(message.senderRole);
-                  setPeerSelector({});
-                }
-              }}
-              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 => {
-              setOpenSheet(true, e);
-            }}
-          >
-            <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={node => {
-              if (node) {
-                // @ts-ignore
-                listRef.current = node;
-                listInstance = node;
-              }
-            }}
-            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 vanillaStore = useHMSVanillaStore();
-    const rerenderOnFirstMount = useRef(false);
-
-    useEffect(() => {
-      const unsubscribe = vanillaStore.subscribe(() => {
-        // @ts-ignore
-        if (!listRef.current) {
-          return;
-        }
-        // @ts-ignore
-        const outerElement = listRef.current._outerRef;
-        if (
-          outerElement &&
-          outerElement.clientHeight + outerElement.scrollTop + outerElement.offsetTop >= outerElement.scrollHeight
-        ) {
-          requestAnimationFrame(() => scrollToBottom(1));
-        }
-      }, selectUnreadHMSMessagesCount);
-      return unsubscribe;
-    }, [vanillaStore, listRef, scrollToBottom]);
-
-    useEffect(() => {
-      // @ts-ignore
-      if (filteredMessages.length > 0 && listRef?.current && !rerenderOnFirstMount.current) {
-        rerenderOnFirstMount.current = true;
-        // @ts-ignore
-        listRef.current.resetAfterIndex(0);
-      }
-    }, [listRef, filteredMessages]);
-
-    return filteredMessages.length === 0 ? (
-      <EmptyChat />
-    ) : (
-      <VirtualizedChatMessages messages={filteredMessages} ref={listRef} scrollToBottom={scrollToBottom} />
-    );
-  },
-);
-
-const PinnedBy = ({
-  messageId,
-  index,
-  rowRef,
-}: {
-  messageId: string;
-  index: number;
-  rowRef?: React.MutableRefObject<HTMLDivElement | null>;
-}) => {
-  const pinnedBy = usePinnedBy(messageId);
-  const localPeerName = useHMSStore(selectLocalPeerName);
-
-  useLayoutEffect(() => {
-    if (rowRef?.current) {
-      if (pinnedBy) {
-        rowRef.current.style.background =
-          'linear-gradient(277deg, var(--hms-ui-colors-surface_default) 0%, var(--hms-ui-colors-surface_dim) 60.87%)';
-      } else {
-        rowRef.current.style.background = '';
-      }
-      setRowHeight(index, messageId, rowRef?.current.clientHeight);
-    }
-  }, [index, messageId, pinnedBy, rowRef]);
-
-  if (!pinnedBy) {
-    return null;
-  }
-
-  return (
-    <Flex align="center" css={{ gap: '$2', mb: '$2', color: '$on_surface_low' }}>
-      <SolidPinIcon height={12} width={12} />
-      <Text variant="xs" css={{ color: 'inherit' }}>
-        Pinned by {localPeerName === pinnedBy ? 'you' : pinnedBy}
-      </Text>
-    </Flex>
-  );
-};