stream-chat-react 11.21.0 → 11.23.0

package/dist/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Window = require('./Window-6c9f7581.js');
+var Window = require('./Window-a963f22a.js');
 var React = require('react');
 var streamChat = require('stream-chat');
 var throttle = require('lodash.throttle');
@@ -117,7 +117,7 @@ var GiphyPreviewMessage = function (props) {
 };
 
 var useEnrichedMessages = function (args) {
-    var channel = args.channel, disableDateSeparator = args.disableDateSeparator, groupStyles = args.groupStyles, headerPosition = args.headerPosition, hideDeletedMessages = args.hideDeletedMessages, hideNewMessageSeparator = args.hideNewMessageSeparator, messages = args.messages, noGroupByUser = args.noGroupByUser, reviewProcessedMessage = args.reviewProcessedMessage;
+    var channel = args.channel, disableDateSeparator = args.disableDateSeparator, groupStyles = args.groupStyles, headerPosition = args.headerPosition, hideDeletedMessages = args.hideDeletedMessages, hideNewMessageSeparator = args.hideNewMessageSeparator, maxTimeBetweenGroupedMessages = args.maxTimeBetweenGroupedMessages, messages = args.messages, noGroupByUser = args.noGroupByUser, reviewProcessedMessage = args.reviewProcessedMessage;
     var client = Window.useChatContext('useEnrichedMessages').client;
     var HeaderComponent = Window.useComponentContext('useEnrichedMessages').HeaderComponent;
     var lastRead = React.useMemo(function () { var _a; return (_a = channel.lastRead) === null || _a === void 0 ? void 0 : _a.call(channel); }, [channel]);
@@ -139,14 +139,14 @@ var useEnrichedMessages = function (args) {
     var groupStylesFn = groupStyles || Window.getGroupStyles;
     var messageGroupStyles = React.useMemo(function () {
         return messagesWithDates.reduce(function (acc, message, i) {
-            var style = groupStylesFn(message, messagesWithDates[i - 1], messagesWithDates[i + 1], noGroupByUser);
+            var style = groupStylesFn(message, messagesWithDates[i - 1], messagesWithDates[i + 1], noGroupByUser, maxTimeBetweenGroupedMessages);
             if (style)
                 acc[message.id] = style;
             return acc;
         }, {});
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [messagesWithDates, noGroupByUser]);
+    [maxTimeBetweenGroupedMessages, messagesWithDates, noGroupByUser]);
     return { messageGroupStyles: messageGroupStyles, messages: messagesWithDates };
 };
 
@@ -526,6 +526,8 @@ var InfiniteScroll = function (props) {
     var hasNextPageFlag = hasNextPage || hasMoreNewer;
     var hasPreviousPageFlag = hasPreviousPage || hasMore;
     var scrollComponent = React.useRef();
+    var previousOffset = React.useRef();
+    var previousReverseOffset = React.useRef();
     var scrollListenerRef = React.useRef();
     scrollListenerRef.current = function () {
         var element = scrollComponent.current;
@@ -541,7 +543,11 @@ var InfiniteScroll = function (props) {
         }
         if (isLoading)
             return;
-        // FIXME: this triggers loadMore call when a user types messages in thread and the scroll container container expands
+        if (previousOffset.current === offset && previousReverseOffset.current === reverseOffset)
+            return;
+        previousOffset.current = offset;
+        previousReverseOffset.current = reverseOffset;
+        // FIXME: this triggers loadMore call when a user types messages in thread and the scroll container expands
         if (reverseOffset < Number(threshold) &&
             typeof loadPreviousPageFn === 'function' &&
             hasPreviousPageFlag) {
@@ -560,7 +566,7 @@ var InfiniteScroll = function (props) {
         ], 'InfiniteScroll');
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    React.useLayoutEffect(function () {
+    React.useEffect(function () {
         var _a;
         var scrollElement = (_a = scrollComponent.current) === null || _a === void 0 ? void 0 : _a.parentNode;
         if (!scrollElement)
@@ -651,7 +657,7 @@ function defaultRenderMessages(_a) {
 
 var MessageListWithContext = function (props) {
     var _a;
-    var channel = props.channel, channelUnreadUiState = props.channelUnreadUiState, _b = props.disableDateSeparator, disableDateSeparator = _b === void 0 ? false : _b, groupStyles = props.groupStyles, _c = props.hideDeletedMessages, hideDeletedMessages = _c === void 0 ? false : _c, _d = props.hideNewMessageSeparator, hideNewMessageSeparator = _d === void 0 ? false : _d, _e = props.internalInfiniteScrollProps, _f = _e === void 0 ? {} : _e, _g = _f.threshold, loadMoreScrollThreshold = _g === void 0 ? Window.DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD : _g, restInternalInfiniteScrollProps = Window.__rest(_f, ["threshold"]), _h = props.messageActions, messageActions = _h === void 0 ? Object.keys(Window.MESSAGE_ACTIONS) : _h, _j = props.messages, messages = _j === void 0 ? [] : _j, notifications = props.notifications, _k = props.noGroupByUser, noGroupByUser = _k === void 0 ? false : _k, _l = props.pinPermissions, pinPermissions = _l === void 0 ? Window.defaultPinPermissions : _l, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
+    var channel = props.channel, channelUnreadUiState = props.channelUnreadUiState, _b = props.disableDateSeparator, disableDateSeparator = _b === void 0 ? false : _b, groupStyles = props.groupStyles, _c = props.hideDeletedMessages, hideDeletedMessages = _c === void 0 ? false : _c, _d = props.hideNewMessageSeparator, hideNewMessageSeparator = _d === void 0 ? false : _d, _e = props.internalInfiniteScrollProps, _f = _e === void 0 ? {} : _e, _g = _f.threshold, loadMoreScrollThreshold = _g === void 0 ? Window.DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD : _g, restInternalInfiniteScrollProps = Window.__rest(_f, ["threshold"]), maxTimeBetweenGroupedMessages = props.maxTimeBetweenGroupedMessages, _h = props.messageActions, messageActions = _h === void 0 ? Object.keys(Window.MESSAGE_ACTIONS) : _h, _j = props.messages, messages = _j === void 0 ? [] : _j, notifications = props.notifications, _k = props.noGroupByUser, noGroupByUser = _k === void 0 ? false : _k, _l = props.pinPermissions, pinPermissions = _l === void 0 ? Window.defaultPinPermissions : _l, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
     _m = props.returnAllReadData, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
     returnAllReadData = _m === void 0 ? false : _m, _o = props.threadList, threadList = _o === void 0 ? false : _o, _p = props.unsafeHTML, unsafeHTML = _p === void 0 ? false : _p, headerPosition = props.headerPosition, read = props.read, _q = props.renderMessages, renderMessages = _q === void 0 ? defaultRenderMessages : _q, reviewProcessedMessage = props.reviewProcessedMessage, _r = props.messageLimit, messageLimit = _r === void 0 ? Window.DEFAULT_NEXT_CHANNEL_PAGE_SIZE : _r, loadMoreCallback = props.loadMore, loadMoreNewerCallback = props.loadMoreNewer, _s = props.hasMoreNewer, hasMoreNewer = _s === void 0 ? false : _s, reactionDetailsSort = props.reactionDetailsSort, showUnreadNotificationAlways = props.showUnreadNotificationAlways, sortReactionDetails = props.sortReactionDetails, sortReactions = props.sortReactions, suppressAutoscroll = props.suppressAutoscroll, highlightedMessageId = props.highlightedMessageId, _t = props.jumpToLatestMessage, jumpToLatestMessage = _t === void 0 ? function () { return Promise.resolve(); } : _t;
     var _u = React__default["default"].useState(null), listElement = _u[0], setListElement = _u[1];
@@ -684,6 +690,7 @@ var MessageListWithContext = function (props) {
         headerPosition: headerPosition,
         hideDeletedMessages: hideDeletedMessages,
         hideNewMessageSeparator: hideNewMessageSeparator,
+        maxTimeBetweenGroupedMessages: maxTimeBetweenGroupedMessages,
         messages: messages,
         noGroupByUser: noGroupByUser,
         reviewProcessedMessage: reviewProcessedMessage,
@@ -1074,8 +1081,8 @@ var Footer = function () {
     return TypingIndicator ? React__default["default"].createElement(TypingIndicator, { avatarSize: 24 }) : null;
 };
 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, formatDate = virtuosoContext.formatDate, 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 _a, _b, _c, _d, _e, _f, _g, _h;
+    var additionalMessageInputProps = virtuosoContext.additionalMessageInputProps, closeReactionSelectorOnClick = virtuosoContext.closeReactionSelectorOnClick, customMessageActions = virtuosoContext.customMessageActions, customMessageRenderer = virtuosoContext.customMessageRenderer, DateSeparator = virtuosoContext.DateSeparator, firstUnreadMessageId = virtuosoContext.firstUnreadMessageId, formatDate = virtuosoContext.formatDate, lastReadDate = virtuosoContext.lastReadDate, lastReadMessageId = virtuosoContext.lastReadMessageId, lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, MessageUIComponent = virtuosoContext.Message, messageActions = virtuosoContext.messageActions, messageGroupStyles = virtuosoContext.messageGroupStyles, MessageSystem = virtuosoContext.MessageSystem, numItemsPrepended = virtuosoContext.numItemsPrepended, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers, messageList = virtuosoContext.processedMessages, reactionDetailsSort = virtuosoContext.reactionDetailsSort, shouldGroupByUser = virtuosoContext.shouldGroupByUser, sortReactionDetails = virtuosoContext.sortReactionDetails, sortReactions = virtuosoContext.sortReactions, _j = virtuosoContext.unreadMessageCount, unreadMessageCount = _j === void 0 ? 0 : _j, UnreadMessagesSeparator = virtuosoContext.UnreadMessagesSeparator, virtuosoRef = virtuosoContext.virtuosoRef;
     var streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
     if (customMessageRenderer) {
         return customMessageRenderer(messageList, streamMessageIndex);
@@ -1094,6 +1101,7 @@ var messageRenderer = function (virtuosoIndex, _data, virtuosoContext) {
         ((_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];
+    // FIXME: firstOfGroup & endOfGroup should be derived from groupStyles which apply a more complex logic
     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) ||
             (maybePrevMessage && Window.isMessageEdited(maybePrevMessage)));
@@ -1116,7 +1124,7 @@ var messageRenderer = function (virtuosoIndex, _data, virtuosoContext) {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         showUnreadSeparatorAbove && (React__default["default"].createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
             React__default["default"].createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount }))),
-        React__default["default"].createElement(Window.Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: (_g = virtuosoRef.current) === null || _g === void 0 ? void 0 : _g.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 }),
+        React__default["default"].createElement(Window.Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: (_g = virtuosoRef.current) === null || _g === void 0 ? void 0 : _g.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, formatDate: formatDate, groupedByUser: groupedByUser, groupStyles: [(_h = messageGroupStyles[message.id]) !== null && _h !== void 0 ? _h : ''], lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions }),
         showUnreadSeparatorBelow && (React__default["default"].createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
             React__default["default"].createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount })))));
 };
@@ -1152,7 +1160,7 @@ function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
 }
 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, formatDate = props.formatDate, 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 ? Window.DEFAULT_NEXT_CHANNEL_PAGE_SIZE : _g, messages = props.messages, notifications = props.notifications, 
+    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, formatDate = props.formatDate, 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, maxTimeBetweenGroupedMessages = props.maxTimeBetweenGroupedMessages, MessageUIComponentFromProps = props.Message, messageActions = props.messageActions, _g = props.messageLimit, messageLimit = _g === void 0 ? Window.DEFAULT_NEXT_CHANNEL_PAGE_SIZE : _g, messages = props.messages, notifications = props.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
@@ -1215,7 +1223,7 @@ var VirtualizedMessageListWithContext = function (props) {
     var groupStylesFn = groupStyles || Window.getGroupStyles;
     var messageGroupStyles = React.useMemo(function () {
         return processedMessages.reduce(function (acc, message, i) {
-            var style = groupStylesFn(message, processedMessages[i - 1], processedMessages[i + 1], !shouldGroupByUser);
+            var style = groupStylesFn(message, processedMessages[i - 1], processedMessages[i + 1], !shouldGroupByUser, maxTimeBetweenGroupedMessages);
             if (style)
                 acc[message.id] = style;
             return acc;
@@ -1223,7 +1231,7 @@ var VirtualizedMessageListWithContext = function (props) {
     }, 
     // 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]);
+    [maxTimeBetweenGroupedMessages, 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;
     useMarkRead({
         isMessageListScrolledToBottom: isMessageListScrolledToBottom,
@@ -1354,7 +1362,7 @@ function VirtualizedMessageList(props) {
     return (React__default["default"].createElement(VirtualizedMessageListWithContext, Window.__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)));
 }
 
-var version = '11.21.0';
+var version = '11.23.0';
 
 var useChat = function (_a) {
     var _b, _c;