stream-chat-react 11.20.0 → 12.0.0-rc.1

package/dist/components/MessageList/VirtualizedMessageList.js

@@ -1,4 +1,3 @@
-import { __assign, __awaiter, __generator, __rest } from "tslib";
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { Virtuoso, } from 'react-virtuoso';
 import { GiphyPreviewMessage as DefaultGiphyPreviewMessage } from './GiphyPreviewMessage';
@@ -11,7 +10,7 @@ import { MessageListMainPanel } from './MessageListMainPanel';
 import { getGroupStyles, getLastReceived, processMessages, } from './utils';
 import { MessageSimple } from '../Message';
 import { UnreadMessagesNotification as DefaultUnreadMessagesNotification } from './UnreadMessagesNotification';
-import { calculateFirstItemIndex, calculateItemIndex, EmptyPlaceholder, Footer, Header, Item, makeItemsRenderedHandler, messageRenderer, } from './VirtualizedMessageListComponents';
+import { calculateFirstItemIndex, calculateItemIndex, EmptyPlaceholder, Header, Item, makeItemsRenderedHandler, messageRenderer, } from './VirtualizedMessageListComponents';
 import { useChannelActionContext, } from '../../context/ChannelActionContext';
 import { useChannelStateContext, } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
@@ -24,9 +23,9 @@ function captureResizeObserverExceededError(e) {
     }
 }
 function useCaptureResizeObserverExceededError() {
-    useEffect(function () {
+    useEffect(() => {
         window.addEventListener('error', captureResizeObserverExceededError);
-        return function () {
+        return () => {
             window.removeEventListener('error', captureResizeObserverExceededError);
         };
     }, []);
@@ -35,40 +34,37 @@ function fractionalItemSize(element) {
     return element.getBoundingClientRect().height;
 }
 function findMessageIndex(messages, id) {
-    return messages.findIndex(function (message) { return message.id === id; });
+    return messages.findIndex((message) => message.id === id);
 }
 function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
     if (highlightedMessageId) {
-        var index = findMessageIndex(messages, highlightedMessageId);
+        const index = findMessageIndex(messages, highlightedMessageId);
         if (index !== -1) {
-            return { align: 'center', index: index };
+            return { align: 'center', index };
         }
     }
     return messages.length - 1;
 }
-var VirtualizedMessageListWithContext = function (props) {
-    var _a, _b;
-    var additionalMessageInputProps = props.additionalMessageInputProps, _c = props.additionalVirtuosoProps, additionalVirtuosoProps = _c === void 0 ? {} : _c, channel = props.channel, channelUnreadUiState = props.channelUnreadUiState, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageActions = props.customMessageActions, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _d = props.disableDateSeparator, disableDateSeparator = _d === void 0 ? true : _d, groupStyles = props.groupStyles, hasMoreNewer = props.hasMoreNewer, head = props.head, _e = props.hideDeletedMessages, hideDeletedMessages = _e === void 0 ? false : _e, _f = props.hideNewMessageSeparator, hideNewMessageSeparator = _f === void 0 ? false : _f, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, MessageUIComponentFromProps = props.Message, messageActions = props.messageActions, _g = props.messageLimit, messageLimit = _g === void 0 ? DEFAULT_NEXT_CHANNEL_PAGE_SIZE : _g, messages = props.messages, notifications = props.notifications, 
+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, Message: MessageUIComponentFromProps, messageActions, messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE, messages, notifications, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
-    _h = props.overscan, 
-    // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
-    overscan = _h === void 0 ? 0 : _h, read = props.read, _j = props.returnAllReadData, returnAllReadData = _j === void 0 ? false : _j, reviewProcessedMessage = props.reviewProcessedMessage, scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _k = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _k === void 0 ? false : _k, _l = props.separateGiphyPreview, separateGiphyPreview = _l === void 0 ? false : _l, _m = props.shouldGroupByUser, shouldGroupByUser = _m === void 0 ? false : _m, showUnreadNotificationAlways = props.showUnreadNotificationAlways, reactionDetailsSort = props.reactionDetailsSort, sortReactionDetails = props.sortReactionDetails, sortReactions = props.sortReactions, _o = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _o === void 0 ? 'smooth' : _o, suppressAutoscroll = props.suppressAutoscroll, threadList = props.threadList;
-    var virtuosoComponentsFromProps = additionalVirtuosoProps.components, overridingVirtuosoProps = __rest(additionalVirtuosoProps, ["components"]);
+    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;
     // Stops errors generated from react-virtuoso to bubble up
     // to Sentry or other tracking tools.
     useCaptureResizeObserverExceededError();
-    var _p = useComponentContext('VirtualizedMessageList'), DateSeparator = _p.DateSeparator, _q = _p.GiphyPreviewMessage, GiphyPreviewMessage = _q === void 0 ? DefaultGiphyPreviewMessage : _q, _r = _p.MessageListNotifications, MessageListNotifications = _r === void 0 ? DefaultMessageListNotifications : _r, _s = _p.MessageNotification, MessageNotification = _s === void 0 ? DefaultMessageNotification : _s, MessageSystem = _p.MessageSystem, _t = _p.UnreadMessagesNotification, UnreadMessagesNotification = _t === void 0 ? DefaultUnreadMessagesNotification : _t, UnreadMessagesSeparator = _p.UnreadMessagesSeparator, _u = _p.VirtualMessage, MessageUIComponentFromContext = _u === void 0 ? MessageSimple : _u;
-    var MessageUIComponent = MessageUIComponentFromProps || MessageUIComponentFromContext;
-    var _v = useChatContext('VirtualizedMessageList'), client = _v.client, customClasses = _v.customClasses;
-    var virtuoso = useRef(null);
-    var lastRead = useMemo(function () { var _a; return (_a = channel.lastRead) === null || _a === void 0 ? void 0 : _a.call(channel); }, [channel]);
-    var _w = useUnreadMessagesNotificationVirtualized({
-        lastRead: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read,
+    const { DateSeparator, GiphyPreviewMessage = DefaultGiphyPreviewMessage, MessageListNotifications = DefaultMessageListNotifications, MessageNotification = DefaultMessageNotification, MessageSystem, UnreadMessagesNotification = DefaultUnreadMessagesNotification, UnreadMessagesSeparator, VirtualMessage: MessageUIComponentFromContext = MessageSimple, TypingIndicator, } = useComponentContext('VirtualizedMessageList');
+    const MessageUIComponent = MessageUIComponentFromProps || MessageUIComponentFromContext;
+    const { client, customClasses } = useChatContext('VirtualizedMessageList');
+    const virtuoso = useRef(null);
+    const lastRead = useMemo(() => channel.lastRead?.(), [channel]);
+    const { show: showUnreadMessagesNotification, toggleShowUnreadMessagesNotification, } = useUnreadMessagesNotificationVirtualized({
+        lastRead: channelUnreadUiState?.last_read,
         showAlways: !!showUnreadNotificationAlways,
-        unreadCount: (_a = channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages) !== null && _a !== void 0 ? _a : 0,
-    }), showUnreadMessagesNotification = _w.show, toggleShowUnreadMessagesNotification = _w.toggleShowUnreadMessagesNotification;
-    var _x = useGiphyPreview(separateGiphyPreview), giphyPreviewMessage = _x.giphyPreviewMessage, setGiphyPreviewMessage = _x.setGiphyPreviewMessage;
-    var processedMessages = useMemo(function () {
+        unreadCount: channelUnreadUiState?.unread_messages ?? 0,
+    });
+    const { giphyPreviewMessage, setGiphyPreviewMessage } = useGiphyPreview(separateGiphyPreview);
+    const processedMessages = useMemo(() => {
         if (typeof messages === 'undefined') {
             return [];
         }
@@ -80,12 +76,12 @@ var VirtualizedMessageListWithContext = function (props) {
         }
         return processMessages({
             enableDateSeparator: !disableDateSeparator,
-            hideDeletedMessages: hideDeletedMessages,
-            hideNewMessageSeparator: hideNewMessageSeparator,
-            lastRead: lastRead,
-            messages: messages,
-            reviewProcessedMessage: reviewProcessedMessage,
-            setGiphyPreviewMessage: setGiphyPreviewMessage,
+            hideDeletedMessages,
+            hideNewMessageSeparator,
+            lastRead,
+            messages,
+            reviewProcessedMessage,
+            setGiphyPreviewMessage,
             userId: client.userID || '',
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -95,56 +91,47 @@ var VirtualizedMessageListWithContext = function (props) {
         hideNewMessageSeparator,
         lastRead,
         messages,
-        messages === null || messages === void 0 ? void 0 : messages.length,
+        messages?.length,
         client.userID,
     ]);
     // get the mapping of own messages to array of users who read them
-    var ownMessagesReadByOthers = useLastReadData({
+    const ownMessagesReadByOthers = useLastReadData({
         messages: processedMessages,
-        read: read,
-        returnAllReadData: returnAllReadData,
+        read,
+        returnAllReadData,
         userID: client.userID,
     });
-    var lastReceivedMessageId = useMemo(function () { return getLastReceived(processedMessages); }, [
+    const lastReceivedMessageId = useMemo(() => getLastReceived(processedMessages), [
         processedMessages,
     ]);
-    var groupStylesFn = groupStyles || getGroupStyles;
-    var messageGroupStyles = useMemo(function () {
-        return processedMessages.reduce(function (acc, message, i) {
-            var style = groupStylesFn(message, processedMessages[i - 1], processedMessages[i + 1], !shouldGroupByUser);
-            if (style)
-                acc[message.id] = style;
-            return acc;
-        }, {});
-    }, 
+    const groupStylesFn = groupStyles || getGroupStyles;
+    const messageGroupStyles = useMemo(() => processedMessages.reduce((acc, message, i) => {
+        const style = groupStylesFn(message, processedMessages[i - 1], processedMessages[i + 1], !shouldGroupByUser);
+        if (style)
+            acc[message.id] = style;
+        return acc;
+    }, {}), 
     // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [processedMessages.length, shouldGroupByUser, groupStylesFn]);
-    var _y = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer), atBottom = _y.atBottom, isMessageListScrolledToBottom = _y.isMessageListScrolledToBottom, newMessagesNotification = _y.newMessagesNotification, setIsMessageListScrolledToBottom = _y.setIsMessageListScrolledToBottom, setNewMessagesNotification = _y.setNewMessagesNotification;
+    const { atBottom, isMessageListScrolledToBottom, newMessagesNotification, setIsMessageListScrolledToBottom, setNewMessagesNotification, } = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer);
     useMarkRead({
-        isMessageListScrolledToBottom: isMessageListScrolledToBottom,
+        isMessageListScrolledToBottom,
         messageListIsThread: !!threadList,
-        unreadCount: (_b = channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages) !== null && _b !== void 0 ? _b : 0,
-        wasMarkedUnread: !!(channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.first_unread_message_id),
+        unreadCount: channelUnreadUiState?.unread_messages ?? 0,
+        wasMarkedUnread: !!channelUnreadUiState?.first_unread_message_id,
     });
-    var scrollToBottom = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!hasMoreNewer) return [3 /*break*/, 2];
-                    return [4 /*yield*/, jumpToLatestMessage()];
-                case 1:
-                    _a.sent();
-                    return [2 /*return*/];
-                case 2:
-                    if (virtuoso.current) {
-                        virtuoso.current.scrollToIndex(processedMessages.length - 1);
-                    }
-                    setNewMessagesNotification(false);
-                    return [2 /*return*/];
-            }
-        });
-    }); }, [
+    const scrollToBottom = useCallback(async () => {
+        if (hasMoreNewer) {
+            await jumpToLatestMessage();
+            return;
+        }
+        if (virtuoso.current) {
+            virtuoso.current.scrollToIndex(processedMessages.length - 1);
+        }
+        setNewMessagesNotification(false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
         virtuoso,
         processedMessages,
         setNewMessagesNotification,
@@ -153,12 +140,12 @@ var VirtualizedMessageListWithContext = function (props) {
         hasMoreNewer,
         jumpToLatestMessage,
     ]);
-    useScrollToBottomOnNewMessage({ messages: messages, scrollToBottom: scrollToBottom, scrollToLatestMessageOnFocus: scrollToLatestMessageOnFocus });
-    var numItemsPrepended = usePrependedMessagesCount(processedMessages, !disableDateSeparator);
-    var messageSetKey = useMessageSetKey({ messages: messages }).messageSetKey;
-    var shouldForceScrollToBottom = useShouldForceScrollToBottom(processedMessages, client.userID);
-    var handleItemsRendered = useMemo(function () { return makeItemsRenderedHandler([toggleShowUnreadMessagesNotification], processedMessages); }, [processedMessages, toggleShowUnreadMessagesNotification]);
-    var followOutput = function (isAtBottom) {
+    useScrollToBottomOnNewMessage({ messages, scrollToBottom, scrollToLatestMessageOnFocus });
+    const numItemsPrepended = usePrependedMessagesCount(processedMessages, !disableDateSeparator);
+    const { messageSetKey } = useMessageSetKey({ messages });
+    const shouldForceScrollToBottom = useShouldForceScrollToBottom(processedMessages, client.userID);
+    const handleItemsRendered = useMemo(() => makeItemsRenderedHandler([toggleShowUnreadMessagesNotification], processedMessages), [processedMessages, toggleShowUnreadMessagesNotification]);
+    const followOutput = (isAtBottom) => {
         if (hasMoreNewer || suppressAutoscroll) {
             return false;
         }
@@ -168,35 +155,31 @@ var VirtualizedMessageListWithContext = function (props) {
         // a message from another user has been received - don't scroll to bottom unless already there
         return isAtBottom ? stickToBottomScrollBehavior : false;
     };
-    var computeItemKey = useCallback(function (index, _, _a) {
-        var numItemsPrepended = _a.numItemsPrepended, processedMessages = _a.processedMessages;
-        return processedMessages[calculateItemIndex(index, numItemsPrepended)].id;
-    }, []);
-    var atBottomStateChange = function (isAtBottom) {
+    const computeItemKey = useCallback((index, _, { numItemsPrepended, processedMessages }) => processedMessages[calculateItemIndex(index, numItemsPrepended)].id, []);
+    const atBottomStateChange = (isAtBottom) => {
         atBottom.current = isAtBottom;
         setIsMessageListScrolledToBottom(isAtBottom);
         if (isAtBottom) {
-            loadMoreNewer === null || loadMoreNewer === void 0 ? void 0 : loadMoreNewer(messageLimit);
-            setNewMessagesNotification === null || setNewMessagesNotification === void 0 ? void 0 : setNewMessagesNotification(false);
+            loadMoreNewer?.(messageLimit);
+            setNewMessagesNotification?.(false);
         }
     };
-    var atTopStateChange = function (isAtTop) {
+    const atTopStateChange = (isAtTop) => {
         if (isAtTop) {
-            loadMore === null || loadMore === void 0 ? void 0 : loadMore(messageLimit);
+            loadMore?.(messageLimit);
         }
     };
-    useEffect(function () {
-        var scrollTimeout;
+    useEffect(() => {
+        let scrollTimeout;
         if (highlightedMessageId) {
-            var index_1 = findMessageIndex(processedMessages, highlightedMessageId);
-            if (index_1 !== -1) {
-                scrollTimeout = setTimeout(function () {
-                    var _a;
-                    (_a = virtuoso.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex({ align: 'center', index: index_1 });
+            const index = findMessageIndex(processedMessages, highlightedMessageId);
+            if (index !== -1) {
+                scrollTimeout = setTimeout(() => {
+                    virtuoso.current?.scrollToIndex({ align: 'center', index });
                 }, 0);
             }
         }
-        return function () {
+        return () => {
             clearTimeout(scrollTimeout);
         };
     }, [highlightedMessageId, processedMessages]);
@@ -204,38 +187,45 @@ var VirtualizedMessageListWithContext = function (props) {
         return null;
     return (React.createElement(React.Fragment, null,
         React.createElement(MessageListMainPanel, null,
-            !threadList && showUnreadMessagesNotification && (React.createElement(UnreadMessagesNotification, { unreadCount: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages })),
-            React.createElement("div", { className: (customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualizedMessageList) || 'str-chat__virtual-list' },
-                React.createElement(Virtuoso, __assign({ atBottomStateChange: atBottomStateChange, atBottomThreshold: 100, atTopStateChange: atTopStateChange, atTopThreshold: 100, className: 'str-chat__message-list-scroll', components: __assign({ EmptyPlaceholder: EmptyPlaceholder, Footer: Footer, Header: Header, Item: Item }, virtuosoComponentsFromProps), computeItemKey: computeItemKey, context: {
-                        additionalMessageInputProps: additionalMessageInputProps,
-                        closeReactionSelectorOnClick: closeReactionSelectorOnClick,
-                        customClasses: customClasses,
-                        customMessageActions: customMessageActions,
-                        customMessageRenderer: customMessageRenderer,
-                        DateSeparator: DateSeparator,
-                        firstUnreadMessageId: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.first_unread_message_id,
-                        head: head,
-                        lastReadDate: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read,
-                        lastReadMessageId: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read_message_id,
-                        lastReceivedMessageId: lastReceivedMessageId,
-                        loadingMore: loadingMore,
+            !threadList && showUnreadMessagesNotification && (React.createElement(UnreadMessagesNotification, { unreadCount: channelUnreadUiState?.unread_messages })),
+            React.createElement("div", { className: customClasses?.virtualizedMessageList || 'str-chat__virtual-list' },
+                React.createElement(Virtuoso, { atBottomStateChange: atBottomStateChange, atBottomThreshold: 100, atTopStateChange: atTopStateChange, atTopThreshold: 100, className: 'str-chat__message-list-scroll', components: {
+                        EmptyPlaceholder,
+                        Header,
+                        Item,
+                        ...virtuosoComponentsFromProps,
+                    }, computeItemKey: computeItemKey, context: {
+                        additionalMessageInputProps,
+                        closeReactionSelectorOnClick,
+                        customClasses,
+                        customMessageActions,
+                        customMessageRenderer,
+                        DateSeparator,
+                        firstUnreadMessageId: channelUnreadUiState?.first_unread_message_id,
+                        formatDate,
+                        head,
+                        lastReadDate: channelUnreadUiState?.last_read,
+                        lastReadMessageId: channelUnreadUiState?.last_read_message_id,
+                        lastReceivedMessageId,
+                        loadingMore,
                         Message: MessageUIComponent,
-                        messageActions: messageActions,
-                        messageGroupStyles: messageGroupStyles,
-                        MessageSystem: MessageSystem,
-                        numItemsPrepended: numItemsPrepended,
-                        ownMessagesReadByOthers: ownMessagesReadByOthers,
-                        processedMessages: processedMessages,
-                        reactionDetailsSort: reactionDetailsSort,
-                        shouldGroupByUser: shouldGroupByUser,
-                        sortReactionDetails: sortReactionDetails,
-                        sortReactions: sortReactions,
-                        threadList: threadList,
-                        unreadMessageCount: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages,
-                        UnreadMessagesSeparator: UnreadMessagesSeparator,
+                        messageActions,
+                        messageGroupStyles,
+                        MessageSystem,
+                        numItemsPrepended,
+                        ownMessagesReadByOthers,
+                        processedMessages,
+                        reactionDetailsSort,
+                        shouldGroupByUser,
+                        sortReactionDetails,
+                        sortReactions,
+                        threadList,
+                        unreadMessageCount: channelUnreadUiState?.unread_messages,
+                        UnreadMessagesSeparator,
                         virtuosoRef: virtuoso,
-                    }, firstItemIndex: calculateFirstItemIndex(numItemsPrepended), followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId), itemContent: messageRenderer, itemSize: fractionalItemSize, itemsRendered: handleItemsRendered, key: messageSetKey, overscan: overscan, ref: virtuoso, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, overridingVirtuosoProps, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {}))))),
-        React.createElement(MessageListNotifications, { hasNewMessages: newMessagesNotification, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottom, threadList: threadList, unreadCount: threadList ? undefined : channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages }),
+                    }, firstItemIndex: calculateFirstItemIndex(numItemsPrepended), followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId), itemContent: messageRenderer, itemSize: fractionalItemSize, itemsRendered: handleItemsRendered, key: messageSetKey, overscan: overscan, ref: virtuoso, style: { overflowX: 'hidden' }, totalCount: processedMessages.length, ...overridingVirtuosoProps, ...(scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), ...(defaultItemHeight ? { defaultItemHeight } : {}) })),
+            TypingIndicator && React.createElement(TypingIndicator, null)),
+        React.createElement(MessageListNotifications, { hasNewMessages: newMessagesNotification, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottom, threadList: threadList, unreadCount: threadList ? undefined : channelUnreadUiState?.unread_messages }),
         giphyPreviewMessage && React.createElement(GiphyPreviewMessage, { message: giphyPreviewMessage })));
 };
 /**
@@ -243,8 +233,8 @@ var VirtualizedMessageListWithContext = function (props) {
  * It is a consumer of the React contexts set in [Channel](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Channel/Channel.tsx).
  */
 export function VirtualizedMessageList(props) {
-    var _a = useChannelActionContext('VirtualizedMessageList'), jumpToLatestMessage = _a.jumpToLatestMessage, loadMore = _a.loadMore, loadMoreNewer = _a.loadMoreNewer;
-    var _b = useChannelStateContext('VirtualizedMessageList'), channel = _b.channel, channelUnreadUiState = _b.channelUnreadUiState, hasMore = _b.hasMore, hasMoreNewer = _b.hasMoreNewer, highlightedMessageId = _b.highlightedMessageId, loadingMore = _b.loadingMore, loadingMoreNewer = _b.loadingMoreNewer, contextMessages = _b.messages, notifications = _b.notifications, read = _b.read, suppressAutoscroll = _b.suppressAutoscroll;
-    var messages = props.messages || contextMessages;
-    return (React.createElement(VirtualizedMessageListWithContext, __assign({ channel: channel, channelUnreadUiState: channelUnreadUiState, hasMore: !!hasMore, hasMoreNewer: !!hasMoreNewer, highlightedMessageId: highlightedMessageId, jumpToLatestMessage: jumpToLatestMessage, loadingMore: !!loadingMore, loadingMoreNewer: !!loadingMoreNewer, loadMore: loadMore, loadMoreNewer: loadMoreNewer, messages: messages, notifications: notifications, read: read, suppressAutoscroll: suppressAutoscroll }, props)));
+    const { jumpToLatestMessage, loadMore, loadMoreNewer, } = useChannelActionContext('VirtualizedMessageList');
+    const { channel, channelUnreadUiState, hasMore, hasMoreNewer, highlightedMessageId, loadingMore, loadingMoreNewer, messages: contextMessages, notifications, read, suppressAutoscroll, } = useChannelStateContext('VirtualizedMessageList');
+    const messages = props.messages || contextMessages;
+    return (React.createElement(VirtualizedMessageListWithContext, { channel: channel, channelUnreadUiState: channelUnreadUiState, hasMore: !!hasMore, hasMoreNewer: !!hasMoreNewer, highlightedMessageId: highlightedMessageId, jumpToLatestMessage: jumpToLatestMessage, loadingMore: !!loadingMore, loadingMoreNewer: !!loadingMoreNewer, loadMore: loadMore, loadMoreNewer: loadMoreNewer, messages: messages, notifications: notifications, read: read, suppressAutoscroll: suppressAutoscroll, ...props }));
 }

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

@@ -1,3 +1,4 @@
+/// <reference types="lodash" />
 import React from 'react';
 import { ItemProps, ListItem } from 'react-virtuoso';
 import { StreamMessage } from '../../context';
@@ -5,21 +6,12 @@ import type { VirtuosoContext } from './VirtualizedMessageList';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 export declare function calculateItemIndex(virtuosoIndex: number, numItemsPrepended: number): number;
 export declare function calculateFirstItemIndex(numItemsPrepended: number): number;
-export declare const makeItemsRenderedHandler: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(renderedItemsActions: ((msg: StreamMessage<StreamChatGenerics>[]) => void)[], processedMessages: StreamMessage<StreamChatGenerics>[]) => import("lodash").DebouncedFunc<(items: ListItem<UnknownType>[]) => void>;
+export declare const makeItemsRenderedHandler: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(renderedItemsActions: Array<(msg: StreamMessage<StreamChatGenerics>[]) => void>, processedMessages: StreamMessage<StreamChatGenerics>[]) => import("lodash").DebouncedFunc<(items: ListItem<UnknownType>[]) => void>;
 type CommonVirtuosoComponentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     context?: VirtuosoContext<StreamChatGenerics>;
 };
-export declare const Item: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, ...props }: Pick<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "style" | "children"> & {
-    'data-index': number;
-    'data-item-index': number;
-    'data-item-group-index'?: number | undefined;
-    'data-known-size': number;
-} & CommonVirtuosoComponentProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const Item: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, ...props }: ItemProps & CommonVirtuosoComponentProps<StreamChatGenerics>) => React.JSX.Element;
 export declare const Header: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, }: CommonVirtuosoComponentProps<StreamChatGenerics>) => React.JSX.Element | null;
 export declare const EmptyPlaceholder: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, }: CommonVirtuosoComponentProps<StreamChatGenerics>) => React.JSX.Element;
-export declare const Footer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => React.JSX.Element | null;
 export declare const messageRenderer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(virtuosoIndex: number, _data: UnknownType, virtuosoContext: VirtuosoContext<StreamChatGenerics>) => React.JSX.Element | null;
 export {};
-//# sourceMappingURL=VirtualizedMessageListComponents.d.ts.map

package/dist/components/MessageList/VirtualizedMessageListComponents.js

@@ -1,4 +1,3 @@
-import { __assign, __rest } from "tslib";
 import clsx from 'clsx';
 import throttle from 'lodash.throttle';
 import React from 'react';
@@ -7,67 +6,53 @@ import { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';
 import { isMessageEdited, Message } from '../Message';
 import { useComponentContext } from '../../context';
 import { isDateSeparatorMessage } from './utils';
-var PREPEND_OFFSET = Math.pow(10, 7);
+const PREPEND_OFFSET = 10 ** 7;
 export function calculateItemIndex(virtuosoIndex, numItemsPrepended) {
     return virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
 }
 export function calculateFirstItemIndex(numItemsPrepended) {
     return PREPEND_OFFSET - numItemsPrepended;
 }
-export var makeItemsRenderedHandler = function (renderedItemsActions, processedMessages) {
-    return throttle(function (items) {
-        var renderedMessages = items
-            .map(function (item) {
-            if (!item.originalIndex)
-                return undefined;
-            return processedMessages[calculateItemIndex(item.originalIndex, PREPEND_OFFSET)];
-        })
-            .filter(function (msg) { return !!msg; });
-        renderedItemsActions.forEach(function (action) {
-            return action(renderedMessages);
-        });
-    }, 200);
-};
+export const makeItemsRenderedHandler = (renderedItemsActions, processedMessages) => throttle((items) => {
+    const renderedMessages = items
+        .map((item) => {
+        if (!item.originalIndex)
+            return undefined;
+        return processedMessages[calculateItemIndex(item.originalIndex, PREPEND_OFFSET)];
+    })
+        .filter((msg) => !!msg);
+    renderedItemsActions.forEach((action) => action(renderedMessages));
+}, 200);
 // using 'display: inline-block'
 // traps CSS margins of the item elements, preventing incorrect item measurements
-export var Item = function (_a) {
-    var _b;
-    var _c;
-    var context = _a.context, props = __rest(_a, ["context"]);
+export const Item = ({ context, ...props }) => {
     if (!context)
         return React.createElement(React.Fragment, null);
-    var message = context.processedMessages[calculateItemIndex(props['data-item-index'], context.numItemsPrepended)];
-    var groupStyles = context.messageGroupStyles[message.id];
-    return (React.createElement("div", __assign({}, props, { className: ((_c = context === null || context === void 0 ? void 0 : context.customClasses) === null || _c === void 0 ? void 0 : _c.virtualMessage) ||
-            clsx('str-chat__virtual-list-message-wrapper str-chat__li', (_b = {},
-                _b["str-chat__li--".concat(groupStyles)] = groupStyles,
-                _b)) })));
+    const message = context.processedMessages[calculateItemIndex(props['data-item-index'], context.numItemsPrepended)];
+    const groupStyles = context.messageGroupStyles[message.id];
+    return (React.createElement("div", { ...props, className: context?.customClasses?.virtualMessage ||
+            clsx('str-chat__virtual-list-message-wrapper str-chat__li', {
+                [`str-chat__li--${groupStyles}`]: groupStyles,
+            }) }));
 };
-export var Header = function (_a) {
-    var context = _a.context;
-    var _b = useComponentContext('VirtualizedMessageListHeader').LoadingIndicator, LoadingIndicator = _b === void 0 ? DefaultLoadingIndicator : _b;
-    if (!(context === null || context === void 0 ? void 0 : context.loadingMore))
+export const Header = ({ context, }) => {
+    const { LoadingIndicator = DefaultLoadingIndicator } = useComponentContext('VirtualizedMessageListHeader');
+    if (!context?.loadingMore)
         return null;
     return LoadingIndicator ? (React.createElement("div", { className: 'str-chat__virtual-list__loading' },
-        React.createElement(LoadingIndicator, { size: 20 }))) : ((context === null || context === void 0 ? void 0 : context.head) || null);
-};
-export var EmptyPlaceholder = function (_a) {
-    var context = _a.context;
-    var _b = useComponentContext('VirtualizedMessageList').EmptyStateIndicator, EmptyStateIndicator = _b === void 0 ? DefaultEmptyStateIndicator : _b;
-    return (React.createElement(React.Fragment, null, EmptyStateIndicator && (React.createElement(EmptyStateIndicator, { listType: (context === null || context === void 0 ? void 0 : context.threadList) ? 'thread' : 'message' }))));
+        React.createElement(LoadingIndicator, { size: 20 }))) : (context?.head || null);
 };
-export var Footer = function () {
-    var TypingIndicator = useComponentContext('VirtualizedMessageList').TypingIndicator;
-    return TypingIndicator ? React.createElement(TypingIndicator, { avatarSize: 24 }) : null;
+export const EmptyPlaceholder = ({ context, }) => {
+    const { EmptyStateIndicator = DefaultEmptyStateIndicator, } = useComponentContext('VirtualizedMessageList');
+    return (React.createElement(React.Fragment, null, EmptyStateIndicator && (React.createElement(EmptyStateIndicator, { listType: context?.threadList ? 'thread' : 'message' }))));
 };
-export var messageRenderer = function (virtuosoIndex, _data, virtuosoContext) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    var additionalMessageInputProps = virtuosoContext.additionalMessageInputProps, closeReactionSelectorOnClick = virtuosoContext.closeReactionSelectorOnClick, customMessageActions = virtuosoContext.customMessageActions, customMessageRenderer = virtuosoContext.customMessageRenderer, DateSeparator = virtuosoContext.DateSeparator, firstUnreadMessageId = virtuosoContext.firstUnreadMessageId, lastReadDate = virtuosoContext.lastReadDate, lastReadMessageId = virtuosoContext.lastReadMessageId, lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, MessageUIComponent = virtuosoContext.Message, messageActions = virtuosoContext.messageActions, MessageSystem = virtuosoContext.MessageSystem, numItemsPrepended = virtuosoContext.numItemsPrepended, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers, messageList = virtuosoContext.processedMessages, reactionDetailsSort = virtuosoContext.reactionDetailsSort, shouldGroupByUser = virtuosoContext.shouldGroupByUser, sortReactionDetails = virtuosoContext.sortReactionDetails, sortReactions = virtuosoContext.sortReactions, _h = virtuosoContext.unreadMessageCount, unreadMessageCount = _h === void 0 ? 0 : _h, UnreadMessagesSeparator = virtuosoContext.UnreadMessagesSeparator, virtuosoRef = virtuosoContext.virtuosoRef;
-    var streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
+export const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
+    const { additionalMessageInputProps, closeReactionSelectorOnClick, customMessageActions, customMessageRenderer, DateSeparator, firstUnreadMessageId, formatDate, lastReadDate, lastReadMessageId, lastReceivedMessageId, Message: MessageUIComponent, messageActions, MessageSystem, numItemsPrepended, ownMessagesReadByOthers, processedMessages: messageList, reactionDetailsSort, shouldGroupByUser, sortReactionDetails, sortReactions, unreadMessageCount = 0, UnreadMessagesSeparator, virtuosoRef, } = virtuosoContext;
+    const streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
     if (customMessageRenderer) {
         return customMessageRenderer(messageList, streamMessageIndex);
     }
-    var message = messageList[streamMessageIndex];
+    const message = messageList[streamMessageIndex];
     if (!message)
         return React.createElement("div", { style: { height: '1px' } }); // returning null or zero height breaks the virtuoso
     if (isDateSeparatorMessage(message)) {
@@ -76,34 +61,34 @@ export var messageRenderer = function (virtuosoIndex, _data, virtuosoContext) {
     if (message.type === 'system') {
         return MessageSystem ? React.createElement(MessageSystem, { message: message }) : null;
     }
-    var groupedByUser = shouldGroupByUser &&
+    const groupedByUser = shouldGroupByUser &&
         streamMessageIndex > 0 &&
-        ((_a = message.user) === null || _a === void 0 ? void 0 : _a.id) === ((_b = messageList[streamMessageIndex - 1].user) === null || _b === void 0 ? void 0 : _b.id);
-    var maybePrevMessage = messageList[streamMessageIndex - 1];
-    var maybeNextMessage = messageList[streamMessageIndex + 1];
-    var firstOfGroup = shouldGroupByUser &&
-        (((_c = message.user) === null || _c === void 0 ? void 0 : _c.id) !== ((_d = maybePrevMessage === null || maybePrevMessage === void 0 ? void 0 : maybePrevMessage.user) === null || _d === void 0 ? void 0 : _d.id) ||
+        message.user?.id === messageList[streamMessageIndex - 1].user?.id;
+    const maybePrevMessage = messageList[streamMessageIndex - 1];
+    const maybeNextMessage = messageList[streamMessageIndex + 1];
+    const firstOfGroup = shouldGroupByUser &&
+        (message.user?.id !== maybePrevMessage?.user?.id ||
             (maybePrevMessage && isMessageEdited(maybePrevMessage)));
-    var endOfGroup = shouldGroupByUser &&
-        (((_e = message.user) === null || _e === void 0 ? void 0 : _e.id) !== ((_f = maybeNextMessage === null || maybeNextMessage === void 0 ? void 0 : maybeNextMessage.user) === null || _f === void 0 ? void 0 : _f.id) || isMessageEdited(message));
-    var createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
-    var lastReadTimestamp = lastReadDate === null || lastReadDate === void 0 ? void 0 : lastReadDate.getTime();
-    var isFirstMessage = streamMessageIndex === 0;
-    var isNewestMessage = lastReadMessageId === lastReceivedMessageId;
-    var isLastReadMessage = message.id === lastReadMessageId ||
+    const endOfGroup = shouldGroupByUser &&
+        (message.user?.id !== maybeNextMessage?.user?.id || isMessageEdited(message));
+    const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
+    const lastReadTimestamp = lastReadDate?.getTime();
+    const isFirstMessage = streamMessageIndex === 0;
+    const isNewestMessage = lastReadMessageId === lastReceivedMessageId;
+    const isLastReadMessage = message.id === lastReadMessageId ||
         (!unreadMessageCount && createdAtTimestamp === lastReadTimestamp);
-    var isFirstUnreadMessage = firstUnreadMessageId === message.id ||
+    const isFirstUnreadMessage = firstUnreadMessageId === message.id ||
         (!!unreadMessageCount &&
             createdAtTimestamp &&
             lastReadTimestamp &&
             createdAtTimestamp > lastReadTimestamp &&
             isFirstMessage);
-    var showUnreadSeparatorAbove = !lastReadMessageId && isFirstUnreadMessage;
-    var showUnreadSeparatorBelow = isLastReadMessage && !isNewestMessage && (firstUnreadMessageId || !!unreadMessageCount);
+    const showUnreadSeparatorAbove = !lastReadMessageId && isFirstUnreadMessage;
+    const showUnreadSeparatorBelow = isLastReadMessage && !isNewestMessage && (firstUnreadMessageId || !!unreadMessageCount);
     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: (_g = virtuosoRef.current) === null || _g === void 0 ? void 0 : _g.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, groupedByUser: groupedByUser, lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions }),
+        React.createElement(Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: virtuosoRef.current?.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, formatDate: formatDate, groupedByUser: groupedByUser, lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions }),
         showUnreadSeparatorBelow && (React.createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
             React.createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount })))));
 };

package/dist/components/MessageList/hooks/MessageList/index.d.ts

@@ -3,4 +3,3 @@ export * from './useMessageListElements';
 export * from './useMessageListScrollManager';
 export * from './useScrollLocationLogic';
 export * from './useUnreadMessagesNotification';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/MessageList/hooks/MessageList/useEnrichedMessages.d.ts

@@ -9,23 +9,10 @@ export declare const useEnrichedMessages: <StreamChatGenerics extends DefaultStr
     hideNewMessageSeparator: boolean;
     messages: StreamMessage<StreamChatGenerics>[];
     noGroupByUser: boolean;
-    groupStyles?: ((message: StreamMessage<StreamChatGenerics>, previousMessage: StreamMessage<StreamChatGenerics>, nextMessage: StreamMessage<StreamChatGenerics>, noGroupByUser: boolean) => GroupStyle) | undefined;
-    headerPosition?: number | undefined;
-    reviewProcessedMessage?: ((params: {
-        changes: StreamMessage<StreamChatGenerics>[];
-        context: {
-            userId: string;
-            enableDateSeparator?: boolean | undefined;
-            hideDeletedMessages?: boolean | undefined;
-            hideNewMessageSeparator?: boolean | undefined;
-            lastRead?: Date | null | undefined;
-        };
-        index: number;
-        messages: StreamMessage<StreamChatGenerics>[];
-        processedMessages: StreamMessage<StreamChatGenerics>[];
-    }) => StreamMessage<StreamChatGenerics>[]) | undefined;
+    groupStyles?: (message: StreamMessage<StreamChatGenerics>, previousMessage: StreamMessage<StreamChatGenerics>, nextMessage: StreamMessage<StreamChatGenerics>, noGroupByUser: boolean) => GroupStyle;
+    headerPosition?: number;
+    reviewProcessedMessage?: ProcessMessagesParams<StreamChatGenerics>['reviewProcessedMessage'];
 }) => {
     messageGroupStyles: Record<string, GroupStyle>;
     messages: StreamMessage<StreamChatGenerics>[];
 };
-//# sourceMappingURL=useEnrichedMessages.d.ts.map