fix: add ScrollToLatestMessageButton to ComponentContext (#3159)

Author: MartinCupela

src/components/MessageList/MessageList.tsx

@@ -43,7 +43,7 @@ import {
 } from '../../constants/limits';
 import { useLastOwnMessage } from './hooks/useLastOwnMessage';
 import { useReducedMotionPreference } from './hooks/useReducedMotionPreference';
-import { ScrollToLatestMessageButton } from './ScrollToLatestMessageButton';
+import { ScrollToLatestMessageButton as DefaultScrollToLatestMessageButton } from './ScrollToLatestMessageButton';
 import {
   NotificationList as DefaultNotificationList,
   useNotificationTarget,
@@ -128,6 +128,7 @@ const MessageListWithContext = (props: MessageListWithContextProps) => {
     MessageListWrapper = 'ul',
     NewMessageNotification = DefaultNewMessageNotification,
     NotificationList = DefaultNotificationList,
+    ScrollToLatestMessageButton = DefaultScrollToLatestMessageButton,
     TypingIndicator = DefaultTypingIndicator,
     UnreadMessagesNotification = DefaultUnreadMessagesNotification,
   } = useComponentContext();

src/components/MessageList/ScrollToLatestMessageButton.tsx

@@ -11,7 +11,7 @@ import { Badge } from '../Badge';
 import { Button } from '../Button';
 import { IconArrowDown } from '../Icons';
 
-type ScrollToLatestMessageButtonProps = {
+export type ScrollToLatestMessageButtonProps = {
   /** When true, user has jumped to an older message set and newer messages can be loaded */
   isNotAtLatestMessageSet?: boolean;
   isMessageListScrolledToBottom?: boolean;

src/components/MessageList/VirtualizedMessageList.tsx

@@ -41,8 +41,8 @@ import {
 } from './VirtualizedMessageListComponents';
 
 import {
+  ScrollToLatestMessageButton as DefaultScrollToLatestMessageButton,
   UnreadMessagesSeparator as DefaultUnreadMessagesSeparator,
-  ScrollToLatestMessageButton,
 } from '../MessageList';
 import { DateSeparator as DefaultDateSeparator } from '../DateSeparator';
 import { EventComponent as DefaultMessageSystem } from '../EventComponent';
@@ -253,6 +253,7 @@ const VirtualizedMessageListWithContext = (
     MessageSystem = DefaultMessageSystem,
     NewMessageNotification = DefaultNewMessageNotification,
     NotificationList = DefaultNotificationList,
+    ScrollToLatestMessageButton = DefaultScrollToLatestMessageButton,
     TypingIndicator,
     UnreadMessagesNotification = DefaultUnreadMessagesNotification,
     UnreadMessagesSeparator = DefaultUnreadMessagesSeparator,

src/context/ComponentContext.tsx

@@ -47,6 +47,7 @@ import {
   type ReactionSelectorProps,
   type RecordingPermissionDeniedNotificationProps,
   type ReminderNotificationProps,
+  type ScrollToLatestMessageButtonProps,
   type SearchResultsPresearchProps,
   type SearchSourceResultListProps,
   type SendButtonProps,
@@ -185,6 +186,8 @@ export type ComponentContextValue = {
   NotificationList?: React.ComponentType<NotificationListProps>;
   /** Custom UI component to display a notification when scrolled up the list and new messages arrive, defaults to and accepts same props as [NewMessageNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/NewMessageNotification.tsx) */
   NewMessageNotification?: React.ComponentType<NewMessageNotificationProps>;
+  /** Custom UI component to display the scroll-to-latest-message button in a `MessageList`, defaults to and accepts same props as: [ScrollToLatestMessageButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/ScrollToLatestMessageButton.tsx) */
+  ScrollToLatestMessageButton?: React.ComponentType<ScrollToLatestMessageButtonProps>;
   /** Custom UI component to display message replies, defaults to and accepts same props as: [MessageRepliesCountButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageRepliesCountButton.tsx) */
   MessageRepliesCountButton?: React.ComponentType<MessageRepliesCountButtonProps>;
   /** Custom UI component to display message delivery status, defaults to and accepts same props as: [MessageStatus](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageStatus.tsx) */