VirtualizedMessageListComponents.tsx

import clsx from 'clsx';
import throttle from 'lodash.throttle';
import React from 'react';
import type { ItemProps, ListItem } from 'react-virtuoso';

import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';
import { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';
import { Message } from '../Message';

import { useComponentContext } from '../../context';
import type { GroupStyle, RenderedMessage } from './utils';
import { getIsFirstUnreadMessage, isDateSeparatorMessage, isIntroMessage } from './utils';
import { omitUndefinedProps } from './omitUndefinedProps';
import type { VirtuosoContext } from './VirtualizedMessageList';
import type { UnknownType } from '../../types/types';
import { useThreadContext } from '../Threads';

const PREPEND_OFFSET = 10 ** 7;

export function calculateItemIndex(virtuosoIndex: number, numItemsPrepended: number) {
  return virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
}

export function calculateFirstItemIndex(numItemsPrepended: number) {
  return PREPEND_OFFSET - numItemsPrepended;
}

export const makeItemsRenderedHandler = (
  renderedItemsActions: Array<(msg: RenderedMessage[]) => void>,
  processedMessages: RenderedMessage[],
) =>
  throttle((items: ListItem<UnknownType>[]) => {
    const renderedMessages = items
      .map((item) => {
        if (!item.originalIndex) return undefined;
        return processedMessages[calculateItemIndex(item.originalIndex, PREPEND_OFFSET)];
      })
      .filter((msg) => !!msg);
    renderedItemsActions.forEach((action) =>
      action(renderedMessages as RenderedMessage[]),
    );
  }, 200);

type CommonVirtuosoComponentProps = {
  context?: VirtuosoContext;
};
// `display: inline-block` traps the items' CSS margins, preventing incorrect item measurements.
export const Item = ({ context, ...props }: ItemProps & CommonVirtuosoComponentProps) => {
  if (!context) return <></>;

  const message =
    context.processedMessages[
      calculateItemIndex(props['data-item-index'], context.numItemsPrepended)
    ];
  const groupStyles: GroupStyle = context.messageGroupStyles[message.id];

  return (
    <div
      {...props}
      className={
        context?.customClasses?.virtualMessage ||
        clsx('str-chat__virtual-list-message-wrapper str-chat__li', {
          [`str-chat__li--${groupStyles}`]: groupStyles,
        })
      }
    />
  );
};
export const Header = ({ context }: CommonVirtuosoComponentProps) => {
  const { LoadingIndicator = DefaultLoadingIndicator } = useComponentContext();

  return (
    <>
      {context?.head}
      {context?.loadingMore && LoadingIndicator && (
        <div className='str-chat__virtual-list__loading'>
          <LoadingIndicator />
        </div>
      )}
    </>
  );
};
export const EmptyPlaceholder = ({ context }: CommonVirtuosoComponentProps) => {
  const thread = useThreadContext();
  const isThreadList = !!thread;
  const { EmptyStateIndicator = DefaultEmptyStateIndicator } = useComponentContext();
  // Virtuoso can render the empty placeholder first even when `totalCount` > 0, so hide it while
  // there are messages.
  if (
    typeof context?.processedMessages !== 'undefined' &&
    context.processedMessages.length > 0
  )
    return null;

  return (
    <>
      {EmptyStateIndicator && (
        <EmptyStateIndicator listType={isThreadList ? 'thread' : 'message'} />
      )}
    </>
  );
};

export const messageRenderer = (
  virtuosoIndex: number,
  _data: UnknownType,
  virtuosoContext: VirtuosoContext,
) => {
  const {
    additionalMessageComposerProps,
    channel,
    closeReactionSelectorOnClick,
    customMessageRenderer,
    DateSeparator,
    firstUnreadMessageId,
    focusedMessageId,
    formatDate,
    lastOwnMessage,
    lastReadDate,
    lastReadMessageId,
    lastReceivedMessageId,
    messageGroupStyles,
    MessageSystem,
    numItemsPrepended,
    onMentionsClick,
    onMentionsHover,
    onUserClick,
    onUserHover,
    ownMessagesDeliveredToOthers,
    ownMessagesReadByOthers,
    processedMessages: messageList,
    reactionDetailsSort,
    renderText,
    returnAllReadData,
    showAvatar,
    sortReactions,
    unreadMessageCount = 0,
    UnreadMessagesSeparator,
    unsafeHTML,
    virtuosoRef,
  } = virtuosoContext;

  const streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);

  if (customMessageRenderer) {
    return customMessageRenderer(messageList, streamMessageIndex);
  }

  const message = messageList[streamMessageIndex];

  // Virtuoso breaks on null or zero height.
  if (!message || isIntroMessage(message)) return <div style={{ height: '1px' }}></div>;

  if (isDateSeparatorMessage(message)) {
    return DateSeparator ? (
      <DateSeparator date={message.date} unread={message.unread} />
    ) : null;
  }

  if (message.type === 'system') {
    return MessageSystem ? (
      <MessageSystem {...omitUndefinedProps({ unsafeHTML })} message={message} />
    ) : null;
  }

  const isFirstUnreadMessage = getIsFirstUnreadMessage({
    channel,
    firstUnreadMessageId,
    isFirstMessage: streamMessageIndex === 0,
    lastReadAt: lastReadDate,
    lastReadMessageId,
    message,
    previousMessage: streamMessageIndex ? messageList[streamMessageIndex - 1] : undefined,
    unreadCount: unreadMessageCount,
  });

  return (
    <>
      {isFirstUnreadMessage && (
        <div className='str-chat__unread-messages-separator-wrapper'>
          <UnreadMessagesSeparator unreadCount={unreadMessageCount} />
        </div>
      )}
      <Message
        additionalMessageComposerProps={additionalMessageComposerProps}
        autoscrollToBottom={virtuosoRef.current?.autoscrollToBottom}
        closeReactionSelectorOnClick={closeReactionSelectorOnClick}
        deliveredTo={ownMessagesDeliveredToOthers[message.id] || []}
        formatDate={formatDate}
        groupStyles={[messageGroupStyles[message.id] ?? '']}
        highlighted={focusedMessageId === message.id}
        lastOwnMessage={lastOwnMessage}
        lastReceivedId={lastReceivedMessageId}
        message={message}
        onMentionsClick={onMentionsClick}
        onMentionsHover={onMentionsHover}
        onUserClick={onUserClick}
        onUserHover={onUserHover}
        reactionDetailsSort={reactionDetailsSort}
        readBy={ownMessagesReadByOthers[message.id] || []}
        renderText={renderText}
        returnAllReadData={returnAllReadData}
        showAvatar={showAvatar}
        sortReactions={sortReactions}
        unsafeHTML={unsafeHTML}
      />
    </>
  );
};