stream-chat-react 12.1.0 → 12.2.1

package/dist/components/ChannelList/ChannelList.d.ts

@@ -7,6 +7,7 @@ import { ChannelSearchProps } from '../ChannelSearch/ChannelSearch';
 import { EmptyStateIndicatorProps } from '../EmptyStateIndicator';
 import { LoadMorePaginatorProps } from '../LoadMore/LoadMorePaginator';
 import type { Channel, ChannelFilters, ChannelOptions, ChannelSort, Event } from 'stream-chat';
+import type { TranslationContextValue } from '../../context/TranslationContext';
 import type { DefaultStreamChatGenerics, PaginatorProps } from '../../types/types';
 export type ChannelListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     /** Additional props for underlying ChannelSearch component and channel search controller, [available props](https://getstream.io/chat/docs/sdk/react/utility-components/channel_search/#props) */
@@ -32,6 +33,8 @@ export type ChannelListProps<StreamChatGenerics extends DefaultStreamChatGeneric
     EmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>;
     /** An object containing channel query filters */
     filters?: ChannelFilters<StreamChatGenerics>;
+    /** Custom function that generates the message preview in ChannelPreview component */
+    getLatestMessagePreview?: (channel: Channel<StreamChatGenerics>, t: TranslationContextValue['t'], userLanguage: TranslationContextValue['userLanguage']) => string | JSX.Element;
     /** Custom UI component to display the container for the queried channels, defaults to and accepts same props as: [ChannelListMessenger](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelListMessenger.tsx) */
     List?: React.ComponentType<ChannelListMessengerProps<StreamChatGenerics>>;
     /** Custom UI component to display the loading error indicator, defaults to component that renders null */

package/dist/components/ChannelList/ChannelList.js

@@ -28,7 +28,7 @@ const DEFAULT_FILTERS = {};
 const DEFAULT_OPTIONS = {};
 const DEFAULT_SORT = {};
 const UnMemoizedChannelList = (props) => {
-    const { additionalChannelSearchProps, Avatar = DefaultAvatar, allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn, ChannelSearch = DefaultChannelSearch, customActiveChannel, customQueryChannels, EmptyStateIndicator = DefaultEmptyStateIndicator, filters, LoadingErrorIndicator = NullComponent, LoadingIndicator = LoadingChannels, List = ChannelListMessenger, lockChannelOrder, onAddedToChannel, onChannelDeleted, onChannelHidden, onChannelTruncated, onChannelUpdated, onChannelVisible, onMessageNew, onMessageNewHandler, onRemovedFromChannel, options, Paginator = LoadMorePaginator, Preview, recoveryThrottleIntervalMs, renderChannels, sendChannelsToList = false, setActiveChannelOnMount = true, showChannelSearch = false, sort = DEFAULT_SORT, watchers = {}, } = props;
+    const { additionalChannelSearchProps, Avatar = DefaultAvatar, allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn, ChannelSearch = DefaultChannelSearch, customActiveChannel, customQueryChannels, EmptyStateIndicator = DefaultEmptyStateIndicator, filters, getLatestMessagePreview, LoadingErrorIndicator = NullComponent, LoadingIndicator = LoadingChannels, List = ChannelListMessenger, lockChannelOrder, onAddedToChannel, onChannelDeleted, onChannelHidden, onChannelTruncated, onChannelUpdated, onChannelVisible, onMessageNew, onMessageNewHandler, onRemovedFromChannel, options, Paginator = LoadMorePaginator, Preview, recoveryThrottleIntervalMs, renderChannels, sendChannelsToList = false, setActiveChannelOnMount = true, showChannelSearch = false, sort = DEFAULT_SORT, watchers = {}, } = props;
     const { channel, channelsQueryState, client, closeMobileNav, customClasses, navOpen = false, setActiveChannel, theme, useImageFlagEmojisOnWindows, } = useChatContext('ChannelList');
     const channelListRef = useRef(null);
     const [channelUpdateCount, setChannelUpdateCount] = useState(0);
@@ -66,7 +66,9 @@ const UnMemoizedChannelList = (props) => {
      * For some events, inner properties on the channel will update but the shallow comparison will not
      * force a re-render. Incrementing this dummy variable ensures the channel previews update.
      */
-    const forceUpdate = () => setChannelUpdateCount((count) => count + 1);
+    const forceUpdate = useCallback(() => setChannelUpdateCount((count) => count + 1), [
+        setChannelUpdateCount,
+    ]);
     const onSearch = useCallback((event) => {
         if (!event.target.value) {
             setSearchActive(false);
@@ -117,6 +119,7 @@ const UnMemoizedChannelList = (props) => {
             channel: item,
             // forces the update of preview component on channel update
             channelUpdateCount,
+            getLatestMessagePreview,
             key: item.cid,
             Preview,
             setActiveChannel,

package/dist/components/ChannelList/hooks/useChannelDeletedListener.js

@@ -12,7 +12,7 @@ export const useChannelDeletedListener = (setChannels, customHandler) => {
                     const channelIndex = channels.findIndex((channel) => channel.cid === event.cid);
                     if (channelIndex < 0)
                         return [...channels];
-                    // Remove the deleted channel from the list.s
+                    // Remove the deleted channel from the list
                     channels.splice(channelIndex, 1);
                     return [...channels];
                 });
@@ -22,6 +22,5 @@ export const useChannelDeletedListener = (setChannels, customHandler) => {
         return () => {
             client.off('channel.deleted', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [customHandler]);
+    }, [client, customHandler, setChannels]);
 };

package/dist/components/ChannelList/hooks/useChannelHiddenListener.js

@@ -22,6 +22,5 @@ export const useChannelHiddenListener = (setChannels, customHandler) => {
         return () => {
             client.off('channel.hidden', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [customHandler]);
+    }, [client, customHandler, setChannels]);
 };

package/dist/components/ChannelList/hooks/useChannelTruncatedListener.js

@@ -16,6 +16,5 @@ export const useChannelTruncatedListener = (setChannels, customHandler, forceUpd
         return () => {
             client.off('channel.truncated', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [customHandler]);
+    }, [client, customHandler, forceUpdate, setChannels]);
 };

package/dist/components/ChannelList/hooks/useChannelUpdatedListener.js

@@ -28,6 +28,5 @@ export const useChannelUpdatedListener = (setChannels, customHandler, forceUpdat
         return () => {
             client.off('channel.updated', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [customHandler]);
+    }, [client, customHandler, forceUpdate, setChannels]);
 };

package/dist/components/ChannelList/hooks/useChannelVisibleListener.js

@@ -22,6 +22,5 @@ export const useChannelVisibleListener = (setChannels, customHandler) => {
         return () => {
             client.off('channel.visible', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [customHandler]);
+    }, [client, customHandler, setChannels]);
 };

package/dist/components/ChannelList/hooks/useConnectionRecoveredListener.js

@@ -12,6 +12,5 @@ export const useConnectionRecoveredListener = (forceUpdate) => {
         return () => {
             client.off('connection.recovered', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [client, forceUpdate]);
 };

package/dist/components/ChannelList/hooks/useMessageNewListener.js

@@ -26,6 +26,11 @@ export const useMessageNewListener = (setChannels, customHandler, lockChannelOrd
         return () => {
             client.off('message.new', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [lockChannelOrder]);
+    }, [
+        allowNewMessagesFromUnfilteredChannels,
+        client,
+        customHandler,
+        lockChannelOrder,
+        setChannels,
+    ]);
 };

package/dist/components/ChannelList/hooks/useNotificationAddedToChannelListener.js

@@ -29,6 +29,5 @@ export const useNotificationAddedToChannelListener = (setChannels, customHandler
         return () => {
             client.off('notification.added_to_channel', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [customHandler]);
+    }, [allowNewMessagesFromUnfilteredChannels, client, customHandler, setChannels]);
 };

package/dist/components/ChannelList/hooks/useNotificationMessageNewListener.js

@@ -22,6 +22,5 @@ export const useNotificationMessageNewListener = (setChannels, customHandler, al
         return () => {
             client.off('notification.message_new', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [customHandler]);
+    }, [allowNewMessagesFromUnfilteredChannels, client, customHandler, setChannels]);
 };

package/dist/components/ChannelList/hooks/useNotificationRemovedFromChannelListener.js

@@ -15,6 +15,5 @@ export const useNotificationRemovedFromChannelListener = (setChannels, customHan
         return () => {
             client.off('notification.removed_from_channel', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [customHandler]);
+    }, [client, customHandler, setChannels]);
 };

package/dist/components/ChannelList/hooks/useUserPresenceChangedListener.js

@@ -20,6 +20,5 @@ export const useUserPresenceChangedListener = (setChannels) => {
         return () => {
             client.off('user.presence.changed', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [client, setChannels]);
 };

package/dist/components/ChannelPreview/ChannelPreview.d.ts

@@ -4,6 +4,7 @@ import { MessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
 import type { Channel } from 'stream-chat';
 import type { AvatarProps } from '../Avatar/Avatar';
 import type { StreamMessage } from '../../context/ChannelStateContext';
+import type { TranslationContextValue } from '../../context/TranslationContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export type ChannelPreviewUIComponentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = ChannelPreviewProps<StreamChatGenerics> & {
     /** If the component's channel is the active (selected) Channel */
@@ -14,8 +15,10 @@ export type ChannelPreviewUIComponentProps<StreamChatGenerics extends DefaultStr
     displayTitle?: string;
     /** The last message received in a channel */
     lastMessage?: StreamMessage<StreamChatGenerics>;
-    /** Latest message preview to display, will be a string or JSX element supporting markdown. */
+    /** @deprecated Use latestMessagePreview prop instead. */
     latestMessage?: string | JSX.Element;
+    /** Latest message preview to display, will be a string or JSX element supporting markdown. */
+    latestMessagePreview?: string | JSX.Element;
     /** Status describing whether own message has been delivered or read by another. If the last message is not an own message, then the status is undefined. */
     messageDeliveryStatus?: MessageDeliveryStatus;
     /** Number of unread Messages */
@@ -32,6 +35,8 @@ export type ChannelPreviewProps<StreamChatGenerics extends DefaultStreamChatGene
     channelUpdateCount?: number;
     /** Custom class for the channel preview root */
     className?: string;
+    /** Custom function that generates the message preview in ChannelPreview component */
+    getLatestMessagePreview?: (channel: Channel<StreamChatGenerics>, t: TranslationContextValue['t'], userLanguage: TranslationContextValue['userLanguage']) => string | JSX.Element;
     key?: string;
     /** Custom ChannelPreview click handler function */
     onSelect?: (event: React.MouseEvent) => void;

package/dist/components/ChannelPreview/ChannelPreview.js

@@ -3,12 +3,12 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { ChannelPreviewMessenger } from './ChannelPreviewMessenger';
 import { useIsChannelMuted } from './hooks/useIsChannelMuted';
 import { useChannelPreviewInfo } from './hooks/useChannelPreviewInfo';
-import { getLatestMessagePreview } from './utils';
+import { getLatestMessagePreview as defaultGetLatestMessagePreview } from './utils';
 import { useChatContext } from '../../context/ChatContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useMessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
 export const ChannelPreview = (props) => {
-    const { channel, Preview = ChannelPreviewMessenger, channelUpdateCount } = props;
+    const { channel, Preview = ChannelPreviewMessenger, channelUpdateCount, getLatestMessagePreview = defaultGetLatestMessagePreview, } = props;
     const { channel: activeChannel, client, setActiveChannel } = useChatContext('ChannelPreview');
     const { t, userLanguage } = useTranslationContext('ChannelPreview');
     const { displayImage, displayTitle } = useChannelPreviewInfo({ channel });
@@ -54,23 +54,25 @@ export const ChannelPreview = (props) => {
     }, 400), [channel, muted]);
     useEffect(() => {
         refreshUnreadCount();
-        const handleEvent = (event) => {
-            if (event.message)
-                setLastMessage(event.message);
+        const handleEvent = () => {
+            setLastMessage(channel.state.latestMessages[channel.state.latestMessages.length - 1]);
             refreshUnreadCount();
         };
         channel.on('message.new', handleEvent);
         channel.on('message.updated', handleEvent);
         channel.on('message.deleted', handleEvent);
+        channel.on('message.undeleted', handleEvent);
+        channel.on('channel.truncated', handleEvent);
         return () => {
             channel.off('message.new', handleEvent);
             channel.off('message.updated', handleEvent);
             channel.off('message.deleted', handleEvent);
+            channel.off('message.undeleted', handleEvent);
+            channel.off('channel.truncated', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [refreshUnreadCount, channelUpdateCount]);
+    }, [channel, refreshUnreadCount, channelUpdateCount]);
     if (!Preview)
         return null;
-    const latestMessage = getLatestMessagePreview(channel, t, userLanguage);
-    return (React.createElement(Preview, { ...props, active: isActive, displayImage: displayImage, displayTitle: displayTitle, lastMessage: lastMessage, latestMessage: latestMessage, messageDeliveryStatus: messageDeliveryStatus, setActiveChannel: setActiveChannel, unread: unread }));
+    const latestMessagePreview = getLatestMessagePreview(channel, t, userLanguage);
+    return (React.createElement(Preview, { ...props, active: isActive, displayImage: displayImage, displayTitle: displayTitle, lastMessage: lastMessage, latestMessage: latestMessagePreview, latestMessagePreview: latestMessagePreview, messageDeliveryStatus: messageDeliveryStatus, setActiveChannel: setActiveChannel, unread: unread }));
 };

package/dist/components/ChannelPreview/ChannelPreviewMessenger.js

@@ -2,7 +2,7 @@ import React, { useRef } from 'react';
 import clsx from 'clsx';
 import { Avatar as DefaultAvatar } from '../Avatar';
 const UnMemoizedChannelPreviewMessenger = (props) => {
-    const { active, Avatar = DefaultAvatar, channel, className: customClassName = '', displayImage, displayTitle, latestMessage, onSelect: customOnSelectChannel, setActiveChannel, unread, watchers, } = props;
+    const { active, Avatar = DefaultAvatar, channel, className: customClassName = '', displayImage, displayTitle, latestMessagePreview, onSelect: customOnSelectChannel, setActiveChannel, unread, watchers, } = props;
     const channelPreviewButton = useRef(null);
     const avatarName = displayTitle || channel.state.messages[channel.state.messages.length - 1]?.user?.id;
     const onSelectChannel = (e) => {
@@ -24,7 +24,7 @@ const UnMemoizedChannelPreviewMessenger = (props) => {
                 React.createElement("div", { className: 'str-chat__channel-preview-messenger--name' },
                     React.createElement("span", null, displayTitle)),
                 !!unread && (React.createElement("div", { className: 'str-chat__channel-preview-unread-badge', "data-testid": 'unread-badge' }, unread))),
-            React.createElement("div", { className: 'str-chat__channel-preview-messenger--last-message' }, latestMessage))));
+            React.createElement("div", { className: 'str-chat__channel-preview-messenger--last-message' }, latestMessagePreview))));
 };
 /**
  * Used as preview component for channel item in [ChannelList](#channellist) component.

package/dist/components/ChannelPreview/utils.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactMarkdown from 'react-markdown';
 export const renderPreviewText = (text) => React.createElement(ReactMarkdown, { skipHtml: true }, text);
 export const getLatestMessagePreview = (channel, t, userLanguage = 'en') => {
-    const latestMessage = channel.state.messages[channel.state.messages.length - 1];
+    const latestMessage = channel.state.latestMessages[channel.state.latestMessages.length - 1];
     const previewTextToRender = latestMessage?.i18n?.[`${userLanguage}_text`] ||
         latestMessage?.text;
     if (!latestMessage) {
@@ -12,8 +12,7 @@ export const getLatestMessagePreview = (channel, t, userLanguage = 'en') => {
         return t('Message deleted');
     }
     if (previewTextToRender) {
-        const renderedText = renderPreviewText(previewTextToRender);
-        return renderedText;
+        return renderPreviewText(previewTextToRender);
     }
     if (latestMessage.command) {
         return `/${latestMessage.command}`;

package/dist/components/MessageList/VirtualizedMessageList.d.ts

@@ -8,7 +8,8 @@ import { ChatContextValue } from '../../context/ChatContext';
 import { ComponentContextValue } from '../../context/ComponentContext';
 import type { UserResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
-type VirtualizedMessageListPropsForContext = 'additionalMessageInputProps' | 'closeReactionSelectorOnClick' | 'customMessageActions' | 'customMessageRenderer' | 'formatDate' | 'head' | 'loadingMore' | 'Message' | 'messageActions' | 'shouldGroupByUser' | 'reactionDetailsSort' | 'sortReactions' | 'sortReactionDetails' | 'threadList';
+type PropsDrilledToMessage = 'additionalMessageInputProps' | 'customMessageActions' | 'formatDate' | 'messageActions' | 'openThread' | 'reactionDetailsSort' | 'sortReactions' | 'sortReactionDetails';
+type VirtualizedMessageListPropsForContext = PropsDrilledToMessage | 'closeReactionSelectorOnClick' | 'customMessageRenderer' | 'head' | 'loadingMore' | 'Message' | 'shouldGroupByUser' | 'threadList';
 /**
  * Context object provided to some Virtuoso props that are functions (components rendered by Virtuoso and other functions)
  */
@@ -36,7 +37,6 @@ export type VirtuosoContext<StreamChatGenerics extends DefaultStreamChatGenerics
     /** The number of unread messages in the current channel. */
     unreadMessageCount?: number;
 };
-type PropsDrilledToMessage = 'additionalMessageInputProps' | 'customMessageActions' | 'formatDate' | 'messageActions' | 'reactionDetailsSort' | 'sortReactions' | 'sortReactionDetails';
 export type VirtualizedMessageListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageProps<StreamChatGenerics>, PropsDrilledToMessage>> & {
     /** Additional props to be passed the underlying [`react-virtuoso` virtualized list dependency](https://virtuoso.dev/virtuoso-api-reference/) */
     additionalVirtuosoProps?: VirtuosoProps<UnknownType, VirtuosoContext<StreamChatGenerics>>;

package/dist/components/MessageList/VirtualizedMessageList.js

@@ -50,7 +50,7 @@ function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
     return messages.length - 1;
 }
 const VirtualizedMessageListWithContext = (props) => {
-    const { additionalMessageInputProps, additionalVirtuosoProps = {}, channel, channelUnreadUiState, closeReactionSelectorOnClick, customMessageActions, customMessageRenderer, defaultItemHeight, disableDateSeparator = true, formatDate, groupStyles, hasMoreNewer, head, hideDeletedMessages = false, hideNewMessageSeparator = false, highlightedMessageId, jumpToLatestMessage, loadingMore, loadMore, loadMoreNewer, maxTimeBetweenGroupedMessages, Message: MessageUIComponentFromProps, messageActions, messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE, messages, notifications, 
+    const { additionalMessageInputProps, additionalVirtuosoProps = {}, channel, channelUnreadUiState, closeReactionSelectorOnClick, customMessageActions, customMessageRenderer, defaultItemHeight, disableDateSeparator = true, formatDate, groupStyles, hasMoreNewer, head, hideDeletedMessages = false, hideNewMessageSeparator = false, highlightedMessageId, jumpToLatestMessage, loadingMore, loadMore, loadMoreNewer, maxTimeBetweenGroupedMessages, Message: MessageUIComponentFromProps, messageActions, messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE, messages, notifications, openThread, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
     overscan = 0, read, returnAllReadData = false, reviewProcessedMessage, scrollSeekPlaceHolder, scrollToLatestMessageOnFocus = false, separateGiphyPreview = false, shouldGroupByUser = false, showUnreadNotificationAlways, reactionDetailsSort, sortReactionDetails, sortReactions, stickToBottomScrollBehavior = 'smooth', suppressAutoscroll, threadList, } = props;
     const { components: virtuosoComponentsFromProps, ...overridingVirtuosoProps } = additionalVirtuosoProps;
@@ -218,6 +218,7 @@ const VirtualizedMessageListWithContext = (props) => {
                             messageGroupStyles,
                             MessageSystem,
                             numItemsPrepended,
+                            openThread,
                             ownMessagesReadByOthers,
                             processedMessages,
                             reactionDetailsSort,

package/dist/components/MessageList/VirtualizedMessageListComponents.js

@@ -47,7 +47,7 @@ export const EmptyPlaceholder = ({ context, }) => {
     return (React.createElement(React.Fragment, null, EmptyStateIndicator && (React.createElement(EmptyStateIndicator, { listType: context?.threadList ? 'thread' : 'message' }))));
 };
 export const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
-    const { additionalMessageInputProps, closeReactionSelectorOnClick, customMessageActions, customMessageRenderer, DateSeparator, firstUnreadMessageId, formatDate, lastReadDate, lastReadMessageId, lastReceivedMessageId, Message: MessageUIComponent, messageActions, messageGroupStyles, MessageSystem, numItemsPrepended, ownMessagesReadByOthers, processedMessages: messageList, reactionDetailsSort, shouldGroupByUser, sortReactionDetails, sortReactions, threadList, unreadMessageCount = 0, UnreadMessagesSeparator, virtuosoRef, } = virtuosoContext;
+    const { additionalMessageInputProps, closeReactionSelectorOnClick, customMessageActions, customMessageRenderer, DateSeparator, firstUnreadMessageId, formatDate, lastReadDate, lastReadMessageId, lastReceivedMessageId, Message: MessageUIComponent, messageActions, messageGroupStyles, MessageSystem, numItemsPrepended, openThread, ownMessagesReadByOthers, processedMessages: messageList, reactionDetailsSort, shouldGroupByUser, sortReactionDetails, sortReactions, threadList, unreadMessageCount = 0, UnreadMessagesSeparator, virtuosoRef, } = virtuosoContext;
     const streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
     if (customMessageRenderer) {
         return customMessageRenderer(messageList, streamMessageIndex);
@@ -89,7 +89,7 @@ export const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
     return (React.createElement(React.Fragment, null,
         showUnreadSeparatorAbove && (React.createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
             React.createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount }))),
-        React.createElement(Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: virtuosoRef.current?.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, formatDate: formatDate, groupedByUser: groupedByUser, groupStyles: [messageGroupStyles[message.id] ?? ''], lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions, threadList: threadList }),
+        React.createElement(Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: virtuosoRef.current?.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, formatDate: formatDate, groupedByUser: groupedByUser, groupStyles: [messageGroupStyles[message.id] ?? ''], lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, openThread: openThread, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions, threadList: threadList }),
         showUnreadSeparatorBelow && (React.createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
             React.createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount })))));
 };

package/dist/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.d.ts

@@ -1,7 +1,6 @@
 import { StreamMessage } from '../../../../context';
 import { DefaultStreamChatGenerics } from '../../../../types/types';
 type UseScrollToBottomOnNewMessageParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    /** */
     scrollToBottom: () => void;
     messages?: StreamMessage<StreamChatGenerics>[];
     /** When `true`, the list will scroll to the latest message when the window regains focus */

package/dist/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.js

@@ -1,28 +1,32 @@
-import React, { useCallback, useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 export const useScrollToBottomOnNewMessage = ({ messages, scrollToBottom, scrollToLatestMessageOnFocus, }) => {
-    const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = React.useState(false);
-    const resetNewMessagesReceivedInBackground = useCallback(() => {
-        setNewMessagesReceivedInBackground(false);
-    }, []);
-    useEffect(() => {
-        setNewMessagesReceivedInBackground(true);
-    }, [messages]);
-    const scrollToBottomIfConfigured = useCallback((event) => {
+    const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = useState(false);
+    const scrollToBottomIfConfigured = useRef();
+    scrollToBottomIfConfigured.current = (event) => {
         if (!scrollToLatestMessageOnFocus ||
             !newMessagesReceivedInBackground ||
-            event.target !== window)
+            event.target !== window) {
             return;
+        }
         setTimeout(scrollToBottom, 100);
-    }, [scrollToLatestMessageOnFocus, scrollToBottom, newMessagesReceivedInBackground]);
+    };
     useEffect(() => {
+        setNewMessagesReceivedInBackground(true);
+    }, [messages]);
+    useEffect(() => {
+        const handleFocus = (event) => {
+            scrollToBottomIfConfigured.current?.(event);
+        };
+        const handleBlur = () => {
+            setNewMessagesReceivedInBackground(false);
+        };
         if (typeof window !== 'undefined') {
-            window.addEventListener('focus', scrollToBottomIfConfigured);
-            window.addEventListener('blur', resetNewMessagesReceivedInBackground);
+            window.addEventListener('focus', handleFocus);
+            window.addEventListener('blur', handleBlur);
         }
         return () => {
-            window.removeEventListener('focus', scrollToBottomIfConfigured);
-            window.removeEventListener('blur', resetNewMessagesReceivedInBackground);
+            window.removeEventListener('focus', handleFocus);
+            window.removeEventListener('blur', handleBlur);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [scrollToBottomIfConfigured]);
+    }, []);
 };