feat: merge additionalVirtuosoProps "components" property with VirtualizedMessageList's "virtuosoComponents"

[trophied]

Motivation

In cases where a consumer of VirtualizedMessageList might want to override the components that react-virtuoso allows them to using the components prop, the existing wrapper does allow you to pass in overrides, but, if you pass in any overrides, you end up opting out of the overrides provided by VirtualizedMessageList out of the box like Header, Footer, EmptyPlaceholder, and Item.

Proposed solution

It would be nice if the final value of components that is provided to react-virtuoso would was a combination of additionalVirtuosoProps.components and virtuosoProps (see here).

Something like the example below, though to preserve the memo it might require breaking out the components themselves as individual dependencies.

// VirtualizedMessageList.tsx

const { components, ...virtuosoProps } = additionalVirtuosoProps;

const virtuosoComponents: Partial<Components> = useMemo(() => {
  const EmptyPlaceholder: Components['EmptyPlaceholder'] = () => (
    <>
      {EmptyStateIndicator && (
        <EmptyStateIndicator listType={threadList ? 'thread' : 'message'} />
      )}
    </>
  );

  const Header: Components['Header'] = () =>
    loadingMore ? (
      <div className='str-chat__virtual-list__loading'>
        <LoadingIndicator size={20} />
      </div>
    ) : (
      head || null
    );

  const Footer: Components['Footer'] = () =>
    TypingIndicator ? <TypingIndicator avatarSize={24} /> : <></>;

  const streamChatVirtuosoComponents = {
    EmptyPlaceholder,
    Footer,
    Header,
    Item,
  }

  return components
    ? { ...streamChatVirtuosoComponents, ...components }
    : streamChatVirtuosoComponents
}, [components, loadingMore, head, Item]);

// ...

return (
  // ...
  <Virtuoso
    // ....
    components={virtuosoComponents}
    {...virtuosoProps}
    // ...
  />
  // ...
)

Acceptance Criteria

• Ability to set virtuoso components like Scroller through additionalVirtuosoProps without losing Header, Footer, EmptyPlaceholder, and Item components provided by VirtualizedMessageList in the process.

[MartinCupela]

fixed by #2140