feat: add VirtualizedMessageListContext

src/components/MessageList/VirtualizedMessageList.tsx

@@ -60,6 +60,7 @@ import {
 } from '../../context/ChannelStateContext';
 import { ChatContextValue, useChatContext } from '../../context/ChatContext';
 import { ComponentContextValue, useComponentContext } from '../../context/ComponentContext';
+import { VirtualizedMessageListContextProvider } from '../../context/VirtualizedMessageListContext';
 
 import type { Channel, ChannelState as StreamChannelState, UserResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
@@ -439,7 +440,7 @@ const VirtualizedMessageListWithContext = <
     : 'virtualized-message-list-dialog-manager';
 
   return (
-    <>
+    <VirtualizedMessageListContextProvider value={{ scrollToBottom }}>
       <MessageListMainPanel>
         <DialogManagerProvider id={dialogManagerId}>
           {!threadList && showUnreadMessagesNotification && (
@@ -524,7 +525,7 @@ const VirtualizedMessageListWithContext = <
         unreadCount={threadList ? undefined : channelUnreadUiState?.unread_messages}
       />
       {giphyPreviewMessage && <GiphyPreviewMessage message={giphyPreviewMessage} />}
-    </>
+    </VirtualizedMessageListContextProvider>
   );
 };
 

src/context/VirtualizedMessageListContext.tsx

@@ -0,0 +1,27 @@
+import React, { createContext, PropsWithChildren, useContext } from 'react';
+
+export type VirtualizedMessageListContextValue = {
+  /** Function that scrolls the list to the bottom. */
+  scrollToBottom: () => void;
+};
+
+export const VirtualizedMessageListContext = createContext<
+  VirtualizedMessageListContextValue | undefined
+>(undefined);
+
+/**
+ * Context provider for components rendered within the `VirtualizedMessageList`
+ */
+export const VirtualizedMessageListContextProvider = ({
+  children,
+  value,
+}: PropsWithChildren<{
+  value: VirtualizedMessageListContextValue;
+}>) => (
+  <VirtualizedMessageListContext.Provider value={value as VirtualizedMessageListContextValue}>
+    {children}
+  </VirtualizedMessageListContext.Provider>
+);
+
+export const useVirtualizedMessageListContext = () =>
+  useContext(VirtualizedMessageListContext) as VirtualizedMessageListContextValue;