stream-chat-react 11.22.0 → 11.23.0

package/dist/browser.full-bundle.js

@@ -10026,142 +10026,6 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
         return (React__default["default"].createElement("button", { className: 'str-chat__message-attachment-audio-widget--play-button', "data-testid": isPlaying ? 'pause-audio' : 'play-audio', onClick: onClick }, isPlaying ? React__default["default"].createElement(PauseIcon$1, null) : React__default["default"].createElement(PlayTriangleIcon, null)));
     };
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var resampleWaveformData = function (waveformData, amplitudesCount) {
-        return waveformData.length === amplitudesCount
-            ? waveformData
-            : waveformData.length > amplitudesCount
-                ? downSample(waveformData, amplitudesCount)
-                : upSample(waveformData, amplitudesCount);
-    };
-    /**
-     * The downSample function uses the Largest-Triangle-Three-Buckets (LTTB) algorithm.
-     * See the thesis Downsampling Time Series for Visual Representation by Sveinn Steinarsson for more (https://skemman.is/bitstream/1946/15343/3/SS_MSthesis.pdf)
-     * @param data
-     * @param targetOutputSize
-     */
-    function downSample(data, targetOutputSize) {
-        if (data.length <= targetOutputSize || targetOutputSize === 0) {
-            return data;
-        }
-        if (targetOutputSize === 1)
-            return [mean(data)];
-        var result = [];
-        // bucket size adjusted due to the fact that the first and the last item in the original data array is kept in target output
-        var bucketSize = (data.length - 2) / (targetOutputSize - 2);
-        var lastSelectedPointIndex = 0;
-        result.push(data[lastSelectedPointIndex]); // Always add the first point
-        var maxAreaPoint, maxArea, triangleArea;
-        for (var bucketIndex = 1; bucketIndex < targetOutputSize - 1; bucketIndex++) {
-            var previousBucketRefPoint = data[lastSelectedPointIndex];
-            var nextBucketMean = getNextBucketMean(data, bucketIndex, bucketSize);
-            var currentBucketStartIndex = Math.floor((bucketIndex - 1) * bucketSize) + 1;
-            var nextBucketStartIndex = Math.floor(bucketIndex * bucketSize) + 1;
-            var countUnitsBetweenAtoC = 1 + nextBucketStartIndex - currentBucketStartIndex;
-            maxArea = triangleArea = -1;
-            for (var currentPointIndex = currentBucketStartIndex; currentPointIndex < nextBucketStartIndex; currentPointIndex++) {
-                var countUnitsBetweenAtoB = Math.abs(currentPointIndex - currentBucketStartIndex) + 1;
-                var countUnitsBetweenBtoC = countUnitsBetweenAtoC - countUnitsBetweenAtoB;
-                var currentPointValue = data[currentPointIndex];
-                triangleArea = triangleAreaHeron(triangleBase(Math.abs(previousBucketRefPoint - currentPointValue), countUnitsBetweenAtoB), triangleBase(Math.abs(currentPointValue - nextBucketMean), countUnitsBetweenBtoC), triangleBase(Math.abs(previousBucketRefPoint - nextBucketMean), countUnitsBetweenAtoC));
-                if (triangleArea > maxArea) {
-                    maxArea = triangleArea;
-                    maxAreaPoint = data[currentPointIndex];
-                    lastSelectedPointIndex = currentPointIndex;
-                }
-            }
-            if (typeof maxAreaPoint !== 'undefined')
-                result.push(maxAreaPoint);
-        }
-        result.push(data[data.length - 1]); // Always add the last point
-        return result;
-    }
-    var triangleAreaHeron = function (a, b, c) {
-        var s = (a + b + c) / 2;
-        return Math.sqrt(s * (s - a) * (s - b) * (s - c));
-    };
-    var triangleBase = function (a, b) { return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); };
-    var mean = function (values) { return values.reduce(function (acc, value) { return acc + value; }, 0) / values.length; };
-    var getNextBucketMean = function (data, currentBucketIndex, bucketSize) {
-        var nextBucketStartIndex = Math.floor(currentBucketIndex * bucketSize) + 1;
-        var nextNextBucketStartIndex = Math.floor((currentBucketIndex + 1) * bucketSize) + 1;
-        nextNextBucketStartIndex =
-            nextNextBucketStartIndex < data.length ? nextNextBucketStartIndex : data.length;
-        return mean(data.slice(nextBucketStartIndex, nextNextBucketStartIndex));
-    };
-    var upSample = function (values, targetSize) {
-        if (!values.length) {
-            console.warn('Cannot extend empty array of amplitudes.');
-            return values;
-        }
-        if (values.length > targetSize) {
-            console.warn('Requested to extend the waveformData that is longer than the target list size');
-            return values;
-        }
-        if (targetSize === values.length)
-            return values;
-        // eslint-disable-next-line prefer-const
-        var _a = divMod(targetSize, values.length), bucketSize = _a[0], remainder = _a[1];
-        var result = [];
-        for (var i = 0; i < values.length; i++) {
-            var extra = remainder && remainder-- ? 1 : 0;
-            result.push.apply(result, Array(bucketSize + extra).fill(values[i]));
-        }
-        return result;
-    };
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var WaveProgressBar = function (_a) {
-        var _b = _a.amplitudesCount, amplitudesCount = _b === void 0 ? 40 : _b, _c = _a.progress, progress = _c === void 0 ? 0 : _c, seek = _a.seek, waveformData = _a.waveformData;
-        var _d = React$2.useState(null), progressIndicator = _d[0], setProgressIndicator = _d[1];
-        var isDragging = React$2.useRef(false);
-        var rootRef = React$2.useRef(null);
-        var handleDragStart = function (e) {
-            e.preventDefault();
-            if (!progressIndicator)
-                return;
-            isDragging.current = true;
-            progressIndicator.style.cursor = 'grabbing';
-        };
-        var handleDrag = function (e) {
-            if (!isDragging.current)
-                return;
-            // Due to throttling of seek, it is necessary to create a copy (snapshot) of the event.
-            // Otherwise, the event would be nullified at the point when the throttled function is executed.
-            seek(__assign({}, e));
-        };
-        var handleDragStop = React$2.useCallback(function () {
-            if (!progressIndicator)
-                return;
-            isDragging.current = false;
-            progressIndicator.style.removeProperty('cursor');
-        }, [progressIndicator]);
-        var resampledWaveformData = React$2.useMemo(function () { return resampleWaveformData(waveformData, amplitudesCount); }, [
-            amplitudesCount,
-            waveformData,
-        ]);
-        React$2.useEffect(function () {
-            document.addEventListener('pointerup', handleDragStop);
-            return function () {
-                document.removeEventListener('pointerup', handleDragStop);
-            };
-        }, [handleDragStop]);
-        if (!waveformData.length)
-            return null;
-        return (React__default["default"].createElement("div", { className: 'str-chat__wave-progress-bar__track', "data-testid": 'wave-progress-bar-track', onClick: seek, onPointerDown: handleDragStart, onPointerMove: handleDrag, onPointerUp: handleDragStop, ref: rootRef, role: 'progressbar' },
-            resampledWaveformData.map(function (amplitude, i) {
-                var _a;
-                return (React__default["default"].createElement("div", { className: clsx('str-chat__wave-progress-bar__amplitude-bar', (_a = {},
-                        _a['str-chat__wave-progress-bar__amplitude-bar--active'] = progress > (i / resampledWaveformData.length) * 100,
-                        _a)), "data-testid": 'amplitude-bar', key: "amplitude-".concat(i), style: {
-                        '--str-chat__wave-progress-bar__amplitude-bar-height': amplitude
-                            ? amplitude * 100 + '%'
-                            : '0%',
-                    } }));
-            }),
-            React__default["default"].createElement("div", { className: 'str-chat__wave-progress-bar__progress-indicator', "data-testid": 'wave-progress-bar-progress-indicator', ref: setProgressIndicator, style: { left: "".concat(progress < 0 ? 0 : progress > 100 ? 100 : progress, "%") } })));
-    };
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
-
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};/**
      * lodash (Custom Build) <https://lodash.com/>
      * Build: `lodash modularize exports="npm" -o ./`
@@ -10602,6 +10466,179 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
 
     var lodash_throttle = throttle;
 
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var resampleWaveformData = function (waveformData, amplitudesCount) {
+        return waveformData.length === amplitudesCount
+            ? waveformData
+            : waveformData.length > amplitudesCount
+                ? downSample(waveformData, amplitudesCount)
+                : upSample(waveformData, amplitudesCount);
+    };
+    /**
+     * The downSample function uses the Largest-Triangle-Three-Buckets (LTTB) algorithm.
+     * See the thesis Downsampling Time Series for Visual Representation by Sveinn Steinarsson for more (https://skemman.is/bitstream/1946/15343/3/SS_MSthesis.pdf)
+     * @param data
+     * @param targetOutputSize
+     */
+    function downSample(data, targetOutputSize) {
+        if (data.length <= targetOutputSize || targetOutputSize === 0) {
+            return data;
+        }
+        if (targetOutputSize === 1)
+            return [mean(data)];
+        var result = [];
+        // bucket size adjusted due to the fact that the first and the last item in the original data array is kept in target output
+        var bucketSize = (data.length - 2) / (targetOutputSize - 2);
+        var lastSelectedPointIndex = 0;
+        result.push(data[lastSelectedPointIndex]); // Always add the first point
+        var maxAreaPoint, maxArea, triangleArea;
+        for (var bucketIndex = 1; bucketIndex < targetOutputSize - 1; bucketIndex++) {
+            var previousBucketRefPoint = data[lastSelectedPointIndex];
+            var nextBucketMean = getNextBucketMean(data, bucketIndex, bucketSize);
+            var currentBucketStartIndex = Math.floor((bucketIndex - 1) * bucketSize) + 1;
+            var nextBucketStartIndex = Math.floor(bucketIndex * bucketSize) + 1;
+            var countUnitsBetweenAtoC = 1 + nextBucketStartIndex - currentBucketStartIndex;
+            maxArea = triangleArea = -1;
+            for (var currentPointIndex = currentBucketStartIndex; currentPointIndex < nextBucketStartIndex; currentPointIndex++) {
+                var countUnitsBetweenAtoB = Math.abs(currentPointIndex - currentBucketStartIndex) + 1;
+                var countUnitsBetweenBtoC = countUnitsBetweenAtoC - countUnitsBetweenAtoB;
+                var currentPointValue = data[currentPointIndex];
+                triangleArea = triangleAreaHeron(triangleBase(Math.abs(previousBucketRefPoint - currentPointValue), countUnitsBetweenAtoB), triangleBase(Math.abs(currentPointValue - nextBucketMean), countUnitsBetweenBtoC), triangleBase(Math.abs(previousBucketRefPoint - nextBucketMean), countUnitsBetweenAtoC));
+                if (triangleArea > maxArea) {
+                    maxArea = triangleArea;
+                    maxAreaPoint = data[currentPointIndex];
+                    lastSelectedPointIndex = currentPointIndex;
+                }
+            }
+            if (typeof maxAreaPoint !== 'undefined')
+                result.push(maxAreaPoint);
+        }
+        result.push(data[data.length - 1]); // Always add the last point
+        return result;
+    }
+    var triangleAreaHeron = function (a, b, c) {
+        var s = (a + b + c) / 2;
+        return Math.sqrt(s * (s - a) * (s - b) * (s - c));
+    };
+    var triangleBase = function (a, b) { return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); };
+    var mean = function (values) { return values.reduce(function (acc, value) { return acc + value; }, 0) / values.length; };
+    var getNextBucketMean = function (data, currentBucketIndex, bucketSize) {
+        var nextBucketStartIndex = Math.floor(currentBucketIndex * bucketSize) + 1;
+        var nextNextBucketStartIndex = Math.floor((currentBucketIndex + 1) * bucketSize) + 1;
+        nextNextBucketStartIndex =
+            nextNextBucketStartIndex < data.length ? nextNextBucketStartIndex : data.length;
+        return mean(data.slice(nextBucketStartIndex, nextNextBucketStartIndex));
+    };
+    var upSample = function (values, targetSize) {
+        if (!values.length) {
+            console.warn('Cannot extend empty array of amplitudes.');
+            return values;
+        }
+        if (values.length > targetSize) {
+            console.warn('Requested to extend the waveformData that is longer than the target list size');
+            return values;
+        }
+        if (targetSize === values.length)
+            return values;
+        // eslint-disable-next-line prefer-const
+        var _a = divMod(targetSize, values.length), bucketSize = _a[0], remainder = _a[1];
+        var result = [];
+        for (var i = 0; i < values.length; i++) {
+            var extra = remainder && remainder-- ? 1 : 0;
+            result.push.apply(result, Array(bucketSize + extra).fill(values[i]));
+        }
+        return result;
+    };
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var WaveProgressBar = function (_a) {
+        var _b = _a.amplitudesCount, amplitudesCount = _b === void 0 ? 40 : _b, _c = _a.progress, progress = _c === void 0 ? 0 : _c, _d = _a.relativeAmplitudeBarWidth, relativeAmplitudeBarWidth = _d === void 0 ? 2 : _d, _e = _a.relativeAmplitudeGap, relativeAmplitudeGap = _e === void 0 ? 1 : _e, seek = _a.seek, waveformData = _a.waveformData;
+        var _f = React$2.useState(null), progressIndicator = _f[0], setProgressIndicator = _f[1];
+        var isDragging = React$2.useRef(false);
+        var _g = React$2.useState(null), root = _g[0], setRoot = _g[1];
+        var _h = React$2.useState(), trackAxisX = _h[0], setTrackAxisX = _h[1];
+        var lastRootWidth = React$2.useRef();
+        var handleDragStart = function (e) {
+            e.preventDefault();
+            if (!progressIndicator)
+                return;
+            isDragging.current = true;
+            progressIndicator.style.cursor = 'grabbing';
+        };
+        var handleDrag = function (e) {
+            if (!isDragging.current)
+                return;
+            // Due to throttling of seek, it is necessary to create a copy (snapshot) of the event.
+            // Otherwise, the event would be nullified at the point when the throttled function is executed.
+            seek(__assign({}, e));
+        };
+        var handleDragStop = React$2.useCallback(function () {
+            if (!progressIndicator)
+                return;
+            isDragging.current = false;
+            progressIndicator.style.removeProperty('cursor');
+        }, [progressIndicator]);
+        var getTrackAxisX = React$2.useMemo(function () {
+            return lodash_throttle(function (rootWidth) {
+                if (rootWidth === lastRootWidth.current)
+                    return;
+                lastRootWidth.current = rootWidth;
+                var possibleAmpCount = Math.floor(rootWidth / (relativeAmplitudeGap + relativeAmplitudeBarWidth));
+                var tooManyAmplitudesToRender = possibleAmpCount < amplitudesCount;
+                var barCount = tooManyAmplitudesToRender ? possibleAmpCount : amplitudesCount;
+                var amplitudeBarWidthToGapRatio = relativeAmplitudeBarWidth / (relativeAmplitudeBarWidth + relativeAmplitudeGap);
+                var barWidth = barCount && (rootWidth / barCount) * amplitudeBarWidthToGapRatio;
+                setTrackAxisX({
+                    barCount: barCount,
+                    barWidth: barWidth,
+                    gap: barWidth * (relativeAmplitudeGap / relativeAmplitudeBarWidth),
+                });
+            }, 1);
+        }, [relativeAmplitudeBarWidth, relativeAmplitudeGap, amplitudesCount]);
+        var resampledWaveformData = React$2.useMemo(function () { return (trackAxisX ? resampleWaveformData(waveformData, trackAxisX.barCount) : []); }, [trackAxisX, waveformData]);
+        React$2.useEffect(function () {
+            document.addEventListener('pointerup', handleDragStop);
+            return function () {
+                document.removeEventListener('pointerup', handleDragStop);
+            };
+        }, [handleDragStop]);
+        React$2.useEffect(function () {
+            if (!root || typeof ResizeObserver === 'undefined')
+                return;
+            var observer = new ResizeObserver(function (_a) {
+                var entry = _a[0];
+                getTrackAxisX(entry.contentRect.width);
+            });
+            observer.observe(root);
+            return function () {
+                observer.disconnect();
+            };
+        }, [getTrackAxisX, root]);
+        React$2.useLayoutEffect(function () {
+            if (!root)
+                return;
+            var rootWidth = root.getBoundingClientRect().width;
+            getTrackAxisX(rootWidth);
+        }, [getTrackAxisX, root]);
+        if (!waveformData.length || (trackAxisX === null || trackAxisX === void 0 ? void 0 : trackAxisX.barCount) === 0)
+            return null;
+        return (React__default["default"].createElement("div", { className: 'str-chat__wave-progress-bar__track', "data-testid": 'wave-progress-bar-track', onClick: seek, onPointerDown: handleDragStart, onPointerMove: handleDrag, onPointerUp: handleDragStop, ref: setRoot, role: 'progressbar', style: {
+                '--str-chat__voice-recording-amplitude-bar-gap-width': (trackAxisX === null || trackAxisX === void 0 ? void 0 : trackAxisX.gap) + 'px',
+            } },
+            resampledWaveformData.map(function (amplitude, i) {
+                var _a;
+                return (React__default["default"].createElement("div", { className: clsx('str-chat__wave-progress-bar__amplitude-bar', (_a = {},
+                        _a['str-chat__wave-progress-bar__amplitude-bar--active'] = progress > (i / resampledWaveformData.length) * 100,
+                        _a)), "data-testid": 'amplitude-bar', key: "amplitude-".concat(i), style: {
+                        '--str-chat__voice-recording-amplitude-bar-width': (trackAxisX === null || trackAxisX === void 0 ? void 0 : trackAxisX.barWidth) + 'px',
+                        '--str-chat__wave-progress-bar__amplitude-bar-height': amplitude
+                            ? amplitude * 100 + '%'
+                            : '0%',
+                    } }));
+            }),
+            React__default["default"].createElement("div", { className: 'str-chat__wave-progress-bar__progress-indicator', "data-testid": 'wave-progress-bar-progress-indicator', ref: setProgressIndicator, style: { left: "".concat(progress < 0 ? 0 : progress > 100 ? 100 : progress, "%") } })));
+    };
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var isSeekable = function (audioElement) {
         return !(audioElement.duration === Infinity || isNaN(audioElement.duration));
     };
@@ -48313,7 +48350,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
             }
             case 'openThread': {
                 var channel = action.channel, message = action.message;
-                return __assign(__assign({}, state), { thread: message, threadMessages: message.id ? __assign({}, channel.state.threads)[message.id] || [] : [], threadSuppressAutoscroll: false });
+                return __assign(__assign({}, state), { thread: message, threadHasMore: true, threadMessages: message.id ? __assign({}, channel.state.threads)[message.id] || [] : [], threadSuppressAutoscroll: false });
             }
             case 'setError': {
                 var error = action.error;
@@ -51365,7 +51402,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
                 messageCreatedAt: normalizedTimestamp,
                 t: t,
                 tDateTimeParser: tDateTimeParser,
-                timestampTranslationKey: 'timestamp/Timestamp',
+                timestampTranslationKey: 'timestamp/MessageTimestamp',
             });
         }, [calendar, calendarFormats, format, formatDate, normalizedTimestamp, t, tDateTimeParser]);
         if (!when) {
@@ -58581,7 +58618,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
         }
         return newMessages;
     };
-    var getGroupStyles = function (message, previousMessage, nextMessage, noGroupByUser) {
+    var getGroupStyles = function (message, previousMessage, nextMessage, noGroupByUser, maxTimeBetweenGroupedMessages) {
         var _a, _b, _c, _d, _e, _f, _g;
         if (message.customType === CUSTOM_MESSAGE_TYPE.date)
             return '';
@@ -58593,22 +58630,32 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
             previousMessage.customType === CUSTOM_MESSAGE_TYPE.intro ||
             previousMessage.customType === CUSTOM_MESSAGE_TYPE.date ||
             previousMessage.type === 'system' ||
+            previousMessage.type === 'error' ||
             ((_b = previousMessage.attachments) === null || _b === void 0 ? void 0 : _b.length) !== 0 ||
             ((_c = message.user) === null || _c === void 0 ? void 0 : _c.id) !== ((_d = previousMessage.user) === null || _d === void 0 ? void 0 : _d.id) ||
-            previousMessage.type === 'error' ||
             previousMessage.deleted_at ||
             (message.reaction_groups && Object.keys(message.reaction_groups).length > 0) ||
-            isMessageEdited(previousMessage);
+            isMessageEdited(previousMessage) ||
+            (maxTimeBetweenGroupedMessages !== undefined &&
+                previousMessage.created_at &&
+                message.created_at &&
+                new Date(message.created_at).getTime() - new Date(previousMessage.created_at).getTime() >
+                    maxTimeBetweenGroupedMessages);
         var isBottomMessage = !nextMessage ||
+            nextMessage.customType === CUSTOM_MESSAGE_TYPE.intro ||
             nextMessage.customType === CUSTOM_MESSAGE_TYPE.date ||
             nextMessage.type === 'system' ||
-            nextMessage.customType === CUSTOM_MESSAGE_TYPE.intro ||
+            nextMessage.type === 'error' ||
             ((_e = nextMessage.attachments) === null || _e === void 0 ? void 0 : _e.length) !== 0 ||
             ((_f = message.user) === null || _f === void 0 ? void 0 : _f.id) !== ((_g = nextMessage.user) === null || _g === void 0 ? void 0 : _g.id) ||
-            nextMessage.type === 'error' ||
             nextMessage.deleted_at ||
             (nextMessage.reaction_groups && Object.keys(nextMessage.reaction_groups).length > 0) ||
-            isMessageEdited(message);
+            isMessageEdited(message) ||
+            (maxTimeBetweenGroupedMessages !== undefined &&
+                nextMessage.created_at &&
+                message.created_at &&
+                new Date(nextMessage.created_at).getTime() - new Date(message.created_at).getTime() >
+                    maxTimeBetweenGroupedMessages);
         if (!isTopMessage && !isBottomMessage) {
             if (message.deleted_at || message.type === 'error')
                 return 'single';
@@ -58640,7 +58687,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
     }
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};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 = useChatContext('useEnrichedMessages').client;
         var HeaderComponent = useComponentContext('useEnrichedMessages').HeaderComponent;
         var lastRead = React$2.useMemo(function () { var _a; return (_a = channel.lastRead) === null || _a === void 0 ? void 0 : _a.call(channel); }, [channel]);
@@ -58662,14 +58709,14 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
         var groupStylesFn = groupStyles || getGroupStyles;
         var messageGroupStyles = React$2.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 };
     };
 
@@ -59398,7 +59445,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};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 ? DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD : _g, restInternalInfiniteScrollProps = __rest(_f, ["threshold"]), _h = props.messageActions, messageActions = _h === void 0 ? Object.keys(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 ? 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 ? DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD : _g, restInternalInfiniteScrollProps = __rest(_f, ["threshold"]), maxTimeBetweenGroupedMessages = props.maxTimeBetweenGroupedMessages, _h = props.messageActions, messageActions = _h === void 0 ? Object.keys(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 ? 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 ? 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];
@@ -59431,6 +59478,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
             headerPosition: headerPosition,
             hideDeletedMessages: hideDeletedMessages,
             hideNewMessageSeparator: hideNewMessageSeparator,
+            maxTimeBetweenGroupedMessages: maxTimeBetweenGroupedMessages,
             messages: messages,
             noGroupByUser: noGroupByUser,
             reviewProcessedMessage: reviewProcessedMessage,
@@ -61076,8 +61124,8 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
         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);
@@ -61096,6 +61144,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
             ((_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 && isMessageEdited(maybePrevMessage)));
@@ -61118,7 +61167,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
         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(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(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 })))));
     };
@@ -61154,7 +61203,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
     }
     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 ? 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 ? 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
@@ -61217,7 +61266,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
         var groupStylesFn = groupStyles || getGroupStyles;
         var messageGroupStyles = React$2.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;
@@ -61225,7 +61274,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
         }, 
         // 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,
@@ -63864,7 +63913,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.22.0';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.23.0';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;