feat: support overriding components in MessageList (#2890)

### 🎯 Goal

This PR aligns overriding functionality between the
VirtualizedMessageList (VML) and the regular MessageList (ML).

The goal is to be able to integrate components like React Aria's
[GridList](https://react-spectrum.adobe.com/react-aria/GridList.html)
into ML.

Currently, VML supports overriding the list and item components via
`additionalVirtuosoProps.components`. This PR adds the same ability to
ML via the ComponentContext.

### 🛠 Implementation details

We add two more components to ComponentContext:
- MessageListWrapper wraps all message list items (default is `ul`).
- MessageListItem wraps each message list item (default is `li`).

These components are consumed in MessageList and in `renderMessages()`
respectively.

This makes the following usage possible:

```jsx
<Chat client={client}>
  <Channel channel={channel}>
    <ComponentProvider value={{
      MessageListItem: (props) => (
        <div data-testid='message-list-item' {...props} />
      ),
      MessageListWrapper: (props) => (
        <div data-testid='message-list-wrapper' {...props} />
      ),
    }}>
      <MessageList {...msgListProps} />
    </ComponentProvider>
  </Channel>
</Chat>
```

Sometimes it's also valuable to be able to access the current
`RenderedMessage` item from MessageListItem component. In VML it's
possible by accessing Virtuoso's context to get `processedMessages` and
using the `data-index` attribute to get item's index.

To align this functionality with ML, this PR adds `processedMessages` to
MessageListContext, and adds `data-index` attribute to message list
items.

### 🎨 UI Changes

None by default.

Author: myandrienko

src/components/MessageList/MessageList.tsx

@@ -87,7 +87,6 @@ const MessageListWithContext = (props: MessageListWithContextProps) => {
   } = props;
 
   const [listElement, setListElement] = React.useState<HTMLDivElement | null>(null);
-  const [ulElement, setUlElement] = React.useState<HTMLUListElement | null>(null);
 
   const { customClasses } = useChatContext('MessageList');
 
@@ -96,6 +95,7 @@ const MessageListWithContext = (props: MessageListWithContextProps) => {
     LoadingIndicator = DefaultLoadingIndicator,
     MessageListMainPanel = DefaultMessageListMainPanel,
     MessageListNotifications = DefaultMessageListNotifications,
+    MessageListWrapper = 'ul',
     MessageNotification = DefaultMessageNotification,
     TypingIndicator = DefaultTypingIndicator,
     UnreadMessagesNotification = DefaultUnreadMessagesNotification,
@@ -214,7 +214,7 @@ const MessageListWithContext = (props: MessageListWithContextProps) => {
 
   React.useLayoutEffect(() => {
     if (highlightedMessageId) {
-      const element = ulElement?.querySelector(
+      const element = listElement?.querySelector(
         `[data-message-id='${highlightedMessageId}']`,
       );
       element?.scrollIntoView({ block: 'center' });
@@ -230,7 +230,13 @@ const MessageListWithContext = (props: MessageListWithContextProps) => {
     : `message-list-dialog-manager-${id}`;
 
   return (
-    <MessageListContextProvider value={{ listElement, scrollToBottom }}>
+    <MessageListContextProvider
+      value={{
+        listElement,
+        processedMessages: enrichedMessages,
+        scrollToBottom,
+      }}
+    >
       <MessageListMainPanel>
         <DialogManagerProvider id={dialogManagerId}>
           {!threadList && showUnreadMessagesNotification && (
@@ -264,9 +270,9 @@ const MessageListWithContext = (props: MessageListWithContextProps) => {
                 threshold={loadMoreScrollThreshold}
                 {...restInternalInfiniteScrollProps}
               >
-                <ul className='str-chat__ul' ref={setUlElement}>
+                <MessageListWrapper className='str-chat__ul'>
                   {elements}
-                </ul>
+                </MessageListWrapper>
                 <TypingIndicator threadList={threadList} />
 
                 <div key='bottom' />

src/components/MessageList/__tests__/MessageList.test.js

@@ -20,7 +20,11 @@ import {
 import { Chat } from '../../Chat';
 import { MessageList } from '../MessageList';
 import { Channel } from '../../Channel';
-import { useChannelActionContext, useMessageContext } from '../../../context';
+import {
+  ComponentProvider,
+  useChannelActionContext,
+  useMessageContext,
+} from '../../../context';
 import { EmptyStateIndicator as EmptyStateIndicatorMock } from '../../EmptyStateIndicator';
 import { ScrollToBottomButton } from '../ScrollToBottomButton';
 import { MessageListNotifications } from '../MessageListNotifications';
@@ -47,11 +51,13 @@ const mockedChannelData = generateChannel({
 
 const Avatar = () => <div data-testid='custom-avatar'>Avatar</div>;
 
-const renderComponent = ({ channelProps, chatClient, msgListProps }) =>
+const renderComponent = ({ channelProps, chatClient, components = {}, msgListProps }) =>
   render(
     <Chat client={chatClient}>
       <Channel {...channelProps}>
-        <MessageList {...msgListProps} />
+        <ComponentProvider value={components}>
+          <MessageList {...msgListProps} />
+        </ComponentProvider>
       </Channel>
     </Chat>,
   );
@@ -875,4 +881,48 @@ describe('MessageList', () => {
       expect(notificationFunc).toHaveBeenCalledWith(expect.objectContaining(message));
     });
   });
+
+  describe('list wrapper and list item overrides', () => {
+    it('uses provided list wrapper', async () => {
+      await act(() => {
+        renderComponent({
+          channelProps: { channel },
+          chatClient,
+          components: {
+            MessageListWrapper: (props) => (
+              <div data-testid='message-list-wrapper' {...props} />
+            ),
+          },
+        });
+      });
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('message-list-wrapper')).toBeInTheDocument();
+      });
+    });
+
+    it('uses provided list item wrapper', async () => {
+      await act(() => {
+        renderComponent({
+          channelProps: { channel },
+          chatClient,
+          components: {
+            MessageListItem: (props) => (
+              <div data-testid='message-list-item' {...props} />
+            ),
+            MessageListWrapper: (props) => (
+              <div data-testid='message-list-wrapper' {...props} />
+            ),
+          },
+        });
+      });
+
+      await waitFor(() => {
+        const item = screen.queryByTestId('message-list-item');
+        expect(item).toBeInTheDocument();
+        expect(item.dataset.index).toBeDefined();
+        expect(screen.queryByText(message1.text)).toBeInTheDocument();
+      });
+    });
+  });
 });

src/components/MessageList/renderMessages.tsx

@@ -64,6 +64,7 @@ export function defaultRenderMessages({
   const {
     DateSeparator = DefaultDateSeparator,
     HeaderComponent,
+    MessageListItem = 'li',
     MessageSystem = DefaultMessageSystem,
     UnreadMessagesSeparator = DefaultUnreadMessagesSeparator,
   } = components;
@@ -75,30 +76,31 @@ export function defaultRenderMessages({
     const message = messages[index];
     if (isDateSeparatorMessage(message)) {
       renderedMessages.push(
-        <li key={`${message.date.toISOString()}-i`}>
+        <MessageListItem data-index={index} key={`${message.date.toISOString()}-i`}>
           <DateSeparator
             date={message.date}
             formatDate={messageProps.formatDate}
             unread={message.unread}
           />
-        </li>,
+        </MessageListItem>,
       );
     } else if (isIntroMessage(message)) {
       if (HeaderComponent) {
         renderedMessages.push(
-          <li key='intro'>
+          <MessageListItem data-index={index} key='intro'>
             <HeaderComponent />
-          </li>,
+          </MessageListItem>,
         );
       }
     } else if (message.type === 'system') {
       renderedMessages.push(
-        <li
+        <MessageListItem
+          data-index={index}
           data-message-id={message.id}
           key={message.id || message.created_at.toISOString()}
         >
           <MessageSystem message={message} />
-        </li>,
+        </MessageListItem>,
       );
     } else {
       if (!firstMessage) {
@@ -121,14 +123,15 @@ export function defaultRenderMessages({
       renderedMessages.push(
         <Fragment key={message.id || message.created_at.toISOString()}>
           {isFirstUnreadMessage && UnreadMessagesSeparator && (
-            <li className='str-chat__li str-chat__unread-messages-separator-wrapper'>
+            <MessageListItem className='str-chat__li str-chat__unread-messages-separator-wrapper'>
               <UnreadMessagesSeparator
                 unreadCount={channelUnreadUiState?.unread_messages}
               />
-            </li>
+            </MessageListItem>
           )}
-          <li
+          <MessageListItem
             className={messageClass}
+            data-index={index}
             data-message-id={message.id}
             data-testid={messageClass}
           >
@@ -141,7 +144,7 @@ export function defaultRenderMessages({
               readBy={readData[message.id] || []}
               {...messageProps}
             />
-          </li>
+          </MessageListItem>
         </Fragment>,
       );
       previousMessage = message;

src/context/ComponentContext.tsx

@@ -240,6 +240,10 @@ export type ComponentContextValue = {
   UnreadMessagesSeparator?: React.ComponentType<UnreadMessagesSeparatorProps>;
   /** Custom UI component to display a message in the `VirtualizedMessageList`, does not have a default implementation */
   VirtualMessage?: React.ComponentType<FixedHeightMessageProps>;
+  /** Custom UI component to wrap MessageList children. Default is the `ul` tag */
+  MessageListWrapper?: React.ComponentType;
+  /** Custom UI component to wrap each element of MessageList. Default is the `li` tag */
+  MessageListItem?: React.ComponentType;
 };
 
 export const ComponentContext = React.createContext<ComponentContextValue>({});

src/context/MessageListContext.tsx

@@ -1,7 +1,10 @@
 import React, { createContext, useContext } from 'react';
 import type { PropsWithChildren } from 'react';
+import type { RenderedMessage } from '../components';
 
 export type MessageListContextValue = {
+  /** Enriched message list, including date separators and intro message (if enabled) */
+  processedMessages: RenderedMessage[];
   /** The scroll container within which the messages and typing indicator are rendered */
   listElement: HTMLDivElement | null;
   /** Function that scrolls the `listElement` to the bottom. */