feat: add openThread prop to VirtualizedMessageList (#2523)

Author: MartinCupela

docusaurus/docs/React/components/core-components/message-list.mdx

@@ -396,11 +396,32 @@ Custom action handler function to run on hover of user avatar.
 
 ### openThread
 
-Custom action handler to open a [`Thread`](./thread.mdx) component.
+Custom handler invoked when the button in the `Message` component that opens [`Thread`](./thread.mdx) component is clicked. To be able to define custom logic to `openThread`, we need to have a wrapper around `MessageList` component and reach out to `ChannelActionContext` for the default `openThread` function.
 
-| Type     | Default                                                                                      |
-| -------- | -------------------------------------------------------------------------------------------- |
-| function | [ChannelActionContextValue['openThread']](../contexts/channel-action-context.mdx#openthread) |
+```tsx
+import { useCallback } from 'react';
+import { MessageList, useChannelActionContext } from 'stream-chat-react';
+import type { StreamMessage } from 'stream-chat-react';
+import type { StreamChatGenerics } from './types';
+
+const MessageListWrapper = () => {
+  const { openThread: contextOpenThread } = useChannelActionContext<StreamChatGenerics>();
+
+  const openThread = useCallback(
+    (message: StreamMessage<StreamChatGenerics>, event?: React.BaseSyntheticEvent) => {
+      // custom logic
+      contextOpenThread(message, event);
+    },
+    [contextOpenThread],
+  );
+
+  return <MessageList openThread={openThread} />;
+};
+```
+
+| Type                                                                 | Default                                                                                      |
+| -------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+| `(message: StreamMessage, event?: React.BaseSyntheticEvent) => void` | [ChannelActionContextValue['openThread']](../contexts/channel-action-context.mdx#openthread) |
 
 ### pinPermissions
 

docusaurus/docs/React/components/core-components/virtualized-list.mdx

@@ -209,6 +209,35 @@ The messages to render in the list, provide your own array to override the data
 | ----- | -------------------------------------------------------------------------------------- |
 | array | [ChannelStateContextValue['messages']](../contexts/channel-state-context.mdx#messages) |
 
+### openThread
+
+Custom handler invoked when the button in the `Message` component that opens [`Thread`](./thread.mdx) component is clicked. To be able to define custom logic to `openThread`, we need to have a wrapper around `VirtualizedMessageList` component and reach out to `ChannelActionContext` for the default `openThread` function.
+
+```tsx
+import { useCallback } from 'react';
+import { VirtualizedMessageList, useChannelActionContext } from 'stream-chat-react';
+import type { StreamMessage } from 'stream-chat-react';
+import type { StreamChatGenerics } from './types';
+
+const MessageListWrapper = () => {
+  const { openThread: contextOpenThread } = useChannelActionContext<StreamChatGenerics>();
+
+  const openThread = useCallback(
+    (message: StreamMessage<StreamChatGenerics>, event?: React.BaseSyntheticEvent) => {
+      // custom logic
+      contextOpenThread(message, event);
+    },
+    [contextOpenThread],
+  );
+
+  return <VirtualizedMessageList openThread={openThread} />;
+};
+```
+
+| Type                                                                 | Default                                                                                      |
+| -------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+| `(message: StreamMessage, event?: React.BaseSyntheticEvent) => void` | [ChannelActionContextValue['openThread']](../contexts/channel-action-context.mdx#openthread) |
+
 ### overscan
 
 The amount of extra content the list should render in addition to what's necessary to fill in the viewport.

src/components/MessageList/VirtualizedMessageList.tsx

@@ -65,20 +65,24 @@ import type { Channel, ChannelState as StreamChannelState, UserResponse } from '
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import { DEFAULT_NEXT_CHANNEL_PAGE_SIZE } from '../../constants/limits';
 
-type VirtualizedMessageListPropsForContext =
+type PropsDrilledToMessage =
   | 'additionalMessageInputProps'
-  | 'closeReactionSelectorOnClick'
   | 'customMessageActions'
-  | 'customMessageRenderer'
   | 'formatDate'
+  | 'messageActions'
+  | 'openThread'
+  | 'reactionDetailsSort'
+  | 'sortReactions'
+  | 'sortReactionDetails';
+
+type VirtualizedMessageListPropsForContext =
+  | PropsDrilledToMessage
+  | 'closeReactionSelectorOnClick'
+  | 'customMessageRenderer'
   | 'head'
   | 'loadingMore'
   | 'Message'
-  | 'messageActions'
   | 'shouldGroupByUser'
-  | 'reactionDetailsSort'
-  | 'sortReactions'
-  | 'sortReactionDetails'
   | 'threadList';
 
 /**
@@ -202,6 +206,7 @@ const VirtualizedMessageListWithContext = <
     messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE,
     messages,
     notifications,
+    openThread,
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
     overscan = 0,
     read,
@@ -469,6 +474,7 @@ const VirtualizedMessageListWithContext = <
                 messageGroupStyles,
                 MessageSystem,
                 numItemsPrepended,
+                openThread,
                 ownMessagesReadByOthers,
                 processedMessages,
                 reactionDetailsSort,
@@ -518,15 +524,6 @@ const VirtualizedMessageListWithContext = <
   );
 };
 
-type PropsDrilledToMessage =
-  | 'additionalMessageInputProps'
-  | 'customMessageActions'
-  | 'formatDate'
-  | 'messageActions'
-  | 'reactionDetailsSort'
-  | 'sortReactions'
-  | 'sortReactionDetails';
-
 export type VirtualizedMessageListProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 > = Partial<Pick<MessageProps<StreamChatGenerics>, PropsDrilledToMessage>> & {

src/components/MessageList/VirtualizedMessageListComponents.tsx

@@ -135,6 +135,7 @@ export const messageRenderer = <
     messageGroupStyles,
     MessageSystem,
     numItemsPrepended,
+    openThread,
     ownMessagesReadByOthers,
     processedMessages: messageList,
     reactionDetailsSort,
@@ -225,6 +226,7 @@ export const messageRenderer = <
         message={message}
         Message={MessageUIComponent}
         messageActions={messageActions}
+        openThread={openThread}
         reactionDetailsSort={reactionDetailsSort}
         readBy={ownMessagesReadByOthers[message.id] || []}
         sortReactionDetails={sortReactionDetails}