Skip to content

fix: add ScrollToLatestMessageButton to ComponentContext #3159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MartinCupela merged 1 commit into from
Apr 30, 2026
Merged

fix: add ScrollToLatestMessageButton to ComponentContext #3159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/components/MessageList/MessageList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -128,6 +128,7 @@ const MessageListWithContext = (props: MessageListWithContextProps) => {
MessageListWrapper = 'ul',
NewMessageNotification = DefaultNewMessageNotification,
NotificationList = DefaultNotificationList,
ScrollToLatestMessageButton = DefaultScrollToLatestMessageButton,
TypingIndicator = DefaultTypingIndicator,
UnreadMessagesNotification = DefaultUnreadMessagesNotification,
} = useComponentContext();
Expand Down
2 changes: 1 addition & 1 deletion src/components/MessageList/ScrollToLatestMessageButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
3 changes: 2 additions & 1 deletion src/components/MessageList/VirtualizedMessageList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -253,6 +253,7 @@ const VirtualizedMessageListWithContext = (
MessageSystem = DefaultMessageSystem,
NewMessageNotification = DefaultNewMessageNotification,
NotificationList = DefaultNotificationList,
ScrollToLatestMessageButton = DefaultScrollToLatestMessageButton,
TypingIndicator,
UnreadMessagesNotification = DefaultUnreadMessagesNotification,
UnreadMessagesSeparator = DefaultUnreadMessagesSeparator,
Expand Down
3 changes: 3 additions & 0 deletions src/context/ComponentContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ import {
type ReactionSelectorProps,
type RecordingPermissionDeniedNotificationProps,
type ReminderNotificationProps,
type ScrollToLatestMessageButtonProps,
type SearchResultsPresearchProps,
type SearchSourceResultListProps,
type SendButtonProps,
Expand Down Expand Up @@ -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) */
Expand Down