stream-chat-react 11.3.0 → 11.4.0

package/dist/browser.full-bundle.js

@@ -9863,6 +9863,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             audioRef.current.play();
             return function () {
                 var _a;
+                // eslint-disable-next-line react-hooks/exhaustive-deps
                 (_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.pause();
                 window.clearInterval(interval);
             };
@@ -10028,7 +10029,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                     source: imageSrc,
                 };
             });
-        }, [images]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [images]);
         return (React__default["default"].createElement(ImageGallery, { items: formattedArray, renderItem: renderItem, showIndex: true, showPlayButton: false, showThumbnails: false, startIndex: index }));
     };
 
@@ -14648,6 +14651,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 var config = videoAttachmentSizeHandler(attachment, videoElement.current, shouldGenerateVideoThumbnail);
                 setAttachmentConfiguration(config);
             }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [videoElement, videoAttachmentSizeHandler, attachment]);
         var content = (React__default["default"].createElement("div", { className: 'str-chat__player-wrapper', "data-testid": 'video-wrapper', ref: videoElement, style: getCssDimensionsVariables(attachment.thumb_url || '') },
             React__default["default"].createElement(Media, { className: 'react-player', config: { file: { attributes: { poster: attachmentConfiguration === null || attachmentConfiguration === void 0 ? void 0 : attachmentConfiguration.thumbUrl } } }, controls: true, height: '100%', url: attachmentConfiguration === null || attachmentConfiguration === void 0 ? void 0 : attachmentConfiguration.url, width: '100%' })));
@@ -14683,6 +14687,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
      */
     var Attachment = function (props) {
         var attachments = props.attachments;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         var groupedAttachments = React$2.useMemo(function () { return renderGroupedAttachments(props); }, [attachments]);
         return (React__default["default"].createElement("div", { className: 'str-chat__attachment-list' }, ATTACHMENT_GROUPS_ORDER.reduce(function (acc, groupName) { return __spreadArray(__spreadArray([], acc, true), groupedAttachments[groupName], true); }, [])));
     };
@@ -44761,7 +44766,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             watcher_count: watcher_count,
             watcherCount: watcherCount,
             watchers: watchers,
-        }); }, [
+        }); }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
             channelId,
             debounceURLEnrichmentMs,
             enrichURLForPreview,
@@ -44798,7 +44805,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var typingValue = Object.keys(typing || {}).join();
         var typingContext = React$2.useMemo(function () { return ({
             typing: typing,
-        }); }, [typingValue]);
+        }); }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [typingValue]);
         return typingContext;
     };
 
@@ -45316,29 +45325,15 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         })));
     };
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedMessageActionsBox = function (props) {
-        var getMessageActions = props.getMessageActions, handleDelete = props.handleDelete, handleEdit = props.handleEdit, handleFlag = props.handleFlag, handleMute = props.handleMute, handlePin = props.handlePin, isUserMuted = props.isUserMuted, mine = props.mine, _a = props.open, open = _a === void 0 ? false : _a;
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedMessageActionsBox = React__default["default"].forwardRef(function (props, ref) {
+        var getMessageActions = props.getMessageActions, handleDelete = props.handleDelete, handleEdit = props.handleEdit, handleFlag = props.handleFlag, handleMute = props.handleMute, handlePin = props.handlePin, isUserMuted = props.isUserMuted; 
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        props.mine; var _a = props.open, open = _a === void 0 ? false : _a, restDivProps = __rest(props, ["getMessageActions", "handleDelete", "handleEdit", "handleFlag", "handleMute", "handlePin", "isUserMuted", "mine", "open"]);
         var _b = useComponentContext('MessageActionsBox').CustomMessageActionsList, CustomMessageActionsList$1 = _b === void 0 ? CustomMessageActionsList : _b;
         var setQuotedMessage = useChannelActionContext('MessageActionsBox').setQuotedMessage;
-        var _c = useMessageContext('MessageActionsBox'), customMessageActions = _c.customMessageActions, message = _c.message, messageListRect = _c.messageListRect;
+        var _c = useMessageContext('MessageActionsBox'), customMessageActions = _c.customMessageActions, message = _c.message;
         var t = useTranslationContext('MessageActionsBox').t;
-        var _d = React$2.useState(false), reverse = _d[0], setReverse = _d[1];
         var messageActions = getMessageActions();
-        var checkIfReverse = React$2.useCallback(function (containerElement) {
-            if (!containerElement) {
-                setReverse(false);
-                return;
-            }
-            if (open) {
-                var containerRect = containerElement.getBoundingClientRect();
-                if (mine) {
-                    setReverse(!!messageListRect && containerRect.left < messageListRect.left);
-                }
-                else {
-                    setReverse(!!messageListRect && containerRect.right + 5 > messageListRect.right);
-                }
-            }
-        }, [messageListRect, mine, open]);
         var handleQuote = function () {
             setQuotedMessage(message);
             var elements = message.parent_id
@@ -45350,12 +45345,10 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             }
         };
         var rootClassName = clsx('str-chat__message-actions-box', {
-            'str-chat__message-actions-box--mine': mine,
             'str-chat__message-actions-box--open': open,
-            'str-chat__message-actions-box--reverse': reverse,
         });
         var buttonClassName = 'str-chat__message-actions-list-item str-chat__message-actions-list-item-button';
-        return (React__default["default"].createElement("div", { className: rootClassName, "data-testid": 'message-actions-box', ref: checkIfReverse },
+        return (React__default["default"].createElement("div", __assign({}, restDivProps, { className: rootClassName, "data-testid": 'message-actions-box', ref: ref }),
             React__default["default"].createElement("div", { "aria-label": 'Message Options', className: 'str-chat__message-actions-list', role: 'listbox' },
                 React__default["default"].createElement(CustomMessageActionsList$1, { customMessageActions: customMessageActions, message: message }),
                 messageActions.indexOf(MESSAGE_ACTIONS.quote) > -1 && (React__default["default"].createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleQuote, role: 'option' }, t('Reply'))),
@@ -45364,126 +45357,12 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 messageActions.indexOf(MESSAGE_ACTIONS.mute) > -1 && (React__default["default"].createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleMute, role: 'option' }, isUserMuted() ? t('Unmute') : t('Mute'))),
                 messageActions.indexOf(MESSAGE_ACTIONS.edit) > -1 && (React__default["default"].createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleEdit, role: 'option' }, t('Edit Message'))),
                 messageActions.indexOf(MESSAGE_ACTIONS.delete) > -1 && (React__default["default"].createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleDelete, role: 'option' }, t('Delete'))))));
-    };
+    });
     /**
      * A popup box that displays the available actions on a message, such as edit, delete, pin, etc.
      */
     var MessageActionsBox = React__default["default"].memo(UnMemoizedMessageActionsBox);
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var MessageActions = function (props) {
-        var _a = props.ActionsIcon, ActionsIcon$1 = _a === void 0 ? ActionsIcon : _a, _b = props.customWrapperClass, customWrapperClass = _b === void 0 ? '' : _b, propGetMessageActions = props.getMessageActions, propHandleDelete = props.handleDelete, propHandleFlag = props.handleFlag, propHandleMute = props.handleMute, propHandlePin = props.handlePin, inline = props.inline, propMessage = props.message, messageWrapperRef = props.messageWrapperRef, mine = props.mine;
-        var mutes = useChatContext('MessageActions').mutes;
-        var _c = useMessageContext('MessageActions'), customMessageActions = _c.customMessageActions, contextGetMessageActions = _c.getMessageActions, contextHandleDelete = _c.handleDelete, contextHandleFlag = _c.handleFlag, contextHandleMute = _c.handleMute, contextHandlePin = _c.handlePin, isMyMessage = _c.isMyMessage, contextMessage = _c.message, setEditingState = _c.setEditingState;
-        var getMessageActions = propGetMessageActions || contextGetMessageActions;
-        var handleDelete = propHandleDelete || contextHandleDelete;
-        var handleFlag = propHandleFlag || contextHandleFlag;
-        var handleMute = propHandleMute || contextHandleMute;
-        var handlePin = propHandlePin || contextHandlePin;
-        var message = propMessage || contextMessage;
-        var _d = React$2.useState(false), actionsBoxOpen = _d[0], setActionsBoxOpen = _d[1];
-        var isMuted = React$2.useCallback(function () { return isUserMuted(message, mutes); }, [message, mutes]);
-        var hideOptions = React$2.useCallback(function (event) {
-            if (event instanceof KeyboardEvent && event.key !== 'Escape') {
-                return;
-            }
-            setActionsBoxOpen(false);
-        }, []);
-        var messageActions = getMessageActions();
-        var messageDeletedAt = !!(message === null || message === void 0 ? void 0 : message.deleted_at);
-        React$2.useEffect(function () {
-            if (messageWrapperRef === null || messageWrapperRef === void 0 ? void 0 : messageWrapperRef.current) {
-                messageWrapperRef.current.addEventListener('mouseleave', hideOptions);
-            }
-        }, [hideOptions, messageWrapperRef]);
-        React$2.useEffect(function () {
-            if (messageDeletedAt) {
-                document.removeEventListener('click', hideOptions);
-            }
-        }, [hideOptions, messageDeletedAt]);
-        React$2.useEffect(function () {
-            if (!actionsBoxOpen)
-                return;
-            document.addEventListener('click', hideOptions);
-            document.addEventListener('keyup', hideOptions);
-            return function () {
-                document.removeEventListener('click', hideOptions);
-                document.removeEventListener('keyup', hideOptions);
-            };
-        }, [actionsBoxOpen, hideOptions]);
-        if (!messageActions.length && !customMessageActions)
-            return null;
-        return (React__default["default"].createElement(MessageActionsWrapper, { customWrapperClass: customWrapperClass, inline: inline, setActionsBoxOpen: setActionsBoxOpen },
-            React__default["default"].createElement(MessageActionsBox, { getMessageActions: getMessageActions, handleDelete: handleDelete, handleEdit: setEditingState, handleFlag: handleFlag, handleMute: handleMute, handlePin: handlePin, isUserMuted: isMuted, mine: mine ? mine() : isMyMessage(), open: actionsBoxOpen }),
-            React__default["default"].createElement("button", { "aria-expanded": actionsBoxOpen, "aria-haspopup": 'true', "aria-label": 'Open Message Actions Menu', className: 'str-chat__message-actions-box-button' },
-                React__default["default"].createElement(ActionsIcon$1, { className: 'str-chat__message-action-icon' }))));
-    };
-    var MessageActionsWrapper = function (props) {
-        var children = props.children, customWrapperClass = props.customWrapperClass, inline = props.inline, setActionsBoxOpen = props.setActionsBoxOpen;
-        var defaultWrapperClass = "\n  str-chat__message-simple__actions__action\n  str-chat__message-simple__actions__action--options\n  str-chat__message-actions-container";
-        var wrapperClass = customWrapperClass || defaultWrapperClass;
-        var onClickOptionsAction = function (event) {
-            event.stopPropagation();
-            setActionsBoxOpen(function (prev) { return !prev; });
-        };
-        var wrapperProps = {
-            className: wrapperClass,
-            'data-testid': 'message-actions',
-            onClick: onClickOptionsAction,
-        };
-        if (inline)
-            return React__default["default"].createElement("span", __assign({}, wrapperProps), children);
-        return React__default["default"].createElement("div", __assign({}, wrapperProps), children);
-    };
-
-    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 UnMemoizedMessageOptions = function (props) {
-        var _a = props.ActionsIcon, ActionsIcon$1 = _a === void 0 ? ActionsIcon : _a, _b = props.displayReplies, displayReplies = _b === void 0 ? true : _b, propHandleOpenThread = props.handleOpenThread, messageWrapperRef = props.messageWrapperRef, _c = props.ReactionIcon, ReactionIcon$1 = _c === void 0 ? ReactionIcon : _c, _d = props.theme, theme = _d === void 0 ? 'simple' : _d, _e = props.ThreadIcon, ThreadIcon$1 = _e === void 0 ? ThreadIcon : _e;
-        var _f = useMessageContext('MessageOptions'), customMessageActions = _f.customMessageActions, getMessageActions = _f.getMessageActions, contextHandleOpenThread = _f.handleOpenThread, initialMessage = _f.initialMessage, message = _f.message, onReactionListClick = _f.onReactionListClick, threadList = _f.threadList;
-        var handleOpenThread = propHandleOpenThread || contextHandleOpenThread;
-        var messageActions = getMessageActions();
-        var showActionsBox = showMessageActionsBox(messageActions, threadList) || !!customMessageActions;
-        var shouldShowReactions = messageActions.indexOf(MESSAGE_ACTIONS.react) > -1;
-        var shouldShowReplies = messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1 && displayReplies && !threadList;
-        if (!message.type ||
-            message.type === 'error' ||
-            message.type === 'system' ||
-            message.type === 'ephemeral' ||
-            message.status === 'failed' ||
-            message.status === 'sending' ||
-            initialMessage) {
-            return null;
-        }
-        var rootClassName = "str-chat__message-".concat(theme, "__actions str-chat__message-options");
-        return (React__default["default"].createElement("div", { className: rootClassName, "data-testid": 'message-options' },
-            showActionsBox && (React__default["default"].createElement(MessageActions, { ActionsIcon: ActionsIcon$1, messageWrapperRef: messageWrapperRef })),
-            shouldShowReplies && (React__default["default"].createElement("button", { "aria-label": 'Open Thread', className: "str-chat__message-".concat(theme, "__actions__action str-chat__message-").concat(theme, "__actions__action--thread str-chat__message-reply-in-thread-button"), "data-testid": 'thread-action', onClick: handleOpenThread },
-                React__default["default"].createElement(ThreadIcon$1, { className: 'str-chat__message-action-icon' }))),
-            shouldShowReactions && (React__default["default"].createElement("button", { "aria-label": 'Open Reaction Selector', className: "str-chat__message-".concat(theme, "__actions__action str-chat__message-").concat(theme, "__actions__action--reactions str-chat__message-reactions-button"), "data-testid": 'message-reaction-action', onClick: onReactionListClick },
-                React__default["default"].createElement(ReactionIcon$1, { className: 'str-chat__message-action-icon' })))));
-    };
-    var MessageOptions = React__default["default"].memo(UnMemoizedMessageOptions);
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedMessageRepliesCountButton = function (props) {
-        var labelPlural = props.labelPlural, labelSingle = props.labelSingle, onClick = props.onClick, _a = props.reply_count, reply_count = _a === void 0 ? 0 : _a;
-        var t = useTranslationContext('MessageRepliesCountButton').t;
-        var themeVersion = useChatContext('MessageRepliesCountButton').themeVersion;
-        if (!reply_count)
-            return null;
-        var replyCountText = t('replyCount', { count: reply_count });
-        if (labelPlural && reply_count > 1) {
-            replyCountText = "".concat(reply_count, " ").concat(labelPlural);
-        }
-        else if (labelSingle) {
-            replyCountText = "1 ".concat(labelSingle);
-        }
-        return (React__default["default"].createElement("div", { className: 'str-chat__message-simple-reply-button str-chat__message-replies-count-button-wrapper' },
-            React__default["default"].createElement("button", { className: 'str-chat__message-replies-count-button', "data-testid": 'replies-count-button', onClick: onClick },
-                themeVersion === '1' && React__default["default"].createElement(ReplyIcon, null),
-                replyCountText)));
-    };
-    var MessageRepliesCountButton = React__default["default"].memo(UnMemoizedMessageRepliesCountButton);
-
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};React__namespace.createContext();
     React__namespace.createContext();
 
@@ -47418,6 +47297,160 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};// Public components
      // Public types
 
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function useMessageActionsBoxPopper(_a) {
+        var open = _a.open, placement = _a.placement, referenceElement = _a.referenceElement;
+        var popperElementRef = React$2.useRef(null);
+        var _b = usePopper(referenceElement, popperElementRef.current, {
+            modifiers: [
+                {
+                    name: 'eventListeners',
+                    options: {
+                        // It's not safe to update popper position on resize and scroll, since popper's
+                        // reference element might not be visible at the time.
+                        resize: false,
+                        scroll: false,
+                    },
+                },
+            ],
+            placement: placement,
+        }), attributes = _b.attributes, styles = _b.styles, update = _b.update;
+        React$2.useEffect(function () {
+            if (open) {
+                // Since the popper's reference element might not be (and usually is not) visible
+                // all the time, it's safer to force popper update before showing it.
+                update === null || update === void 0 ? void 0 : update();
+            }
+        }, [open, update]);
+        return {
+            attributes: attributes,
+            popperElementRef: popperElementRef,
+            styles: styles,
+        };
+    }
+
+    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 MessageActions = function (props) {
+        var _a = props.ActionsIcon, ActionsIcon$1 = _a === void 0 ? ActionsIcon : _a, _b = props.customWrapperClass, customWrapperClass = _b === void 0 ? '' : _b, propGetMessageActions = props.getMessageActions, propHandleDelete = props.handleDelete, propHandleFlag = props.handleFlag, propHandleMute = props.handleMute, propHandlePin = props.handlePin, inline = props.inline, propMessage = props.message, messageWrapperRef = props.messageWrapperRef, mine = props.mine;
+        var mutes = useChatContext('MessageActions').mutes;
+        var _c = useMessageContext('MessageActions'), customMessageActions = _c.customMessageActions, contextGetMessageActions = _c.getMessageActions, contextHandleDelete = _c.handleDelete, contextHandleFlag = _c.handleFlag, contextHandleMute = _c.handleMute, contextHandlePin = _c.handlePin, isMyMessage = _c.isMyMessage, contextMessage = _c.message, setEditingState = _c.setEditingState;
+        var getMessageActions = propGetMessageActions || contextGetMessageActions;
+        var handleDelete = propHandleDelete || contextHandleDelete;
+        var handleFlag = propHandleFlag || contextHandleFlag;
+        var handleMute = propHandleMute || contextHandleMute;
+        var handlePin = propHandlePin || contextHandlePin;
+        var message = propMessage || contextMessage;
+        var isMine = mine ? mine() : isMyMessage();
+        var _d = React$2.useState(false), actionsBoxOpen = _d[0], setActionsBoxOpen = _d[1];
+        var isMuted = React$2.useCallback(function () { return isUserMuted(message, mutes); }, [message, mutes]);
+        var hideOptions = React$2.useCallback(function (event) {
+            if (event instanceof KeyboardEvent && event.key !== 'Escape') {
+                return;
+            }
+            setActionsBoxOpen(false);
+        }, []);
+        var messageActions = getMessageActions();
+        var messageDeletedAt = !!(message === null || message === void 0 ? void 0 : message.deleted_at);
+        React$2.useEffect(function () {
+            if (messageWrapperRef === null || messageWrapperRef === void 0 ? void 0 : messageWrapperRef.current) {
+                messageWrapperRef.current.addEventListener('mouseleave', hideOptions);
+            }
+        }, [hideOptions, messageWrapperRef]);
+        React$2.useEffect(function () {
+            if (messageDeletedAt) {
+                document.removeEventListener('click', hideOptions);
+            }
+        }, [hideOptions, messageDeletedAt]);
+        React$2.useEffect(function () {
+            if (!actionsBoxOpen)
+                return;
+            document.addEventListener('click', hideOptions);
+            document.addEventListener('keyup', hideOptions);
+            return function () {
+                document.removeEventListener('click', hideOptions);
+                document.removeEventListener('keyup', hideOptions);
+            };
+        }, [actionsBoxOpen, hideOptions]);
+        var actionsBoxButtonRef = React$2.useRef(null);
+        var _e = useMessageActionsBoxPopper({
+            open: actionsBoxOpen,
+            placement: isMine ? 'top-end' : 'top-start',
+            referenceElement: actionsBoxButtonRef.current,
+        }), attributes = _e.attributes, popperElementRef = _e.popperElementRef, styles = _e.styles;
+        if (!messageActions.length && !customMessageActions)
+            return null;
+        return (React__default["default"].createElement(MessageActionsWrapper, { customWrapperClass: customWrapperClass, inline: inline, setActionsBoxOpen: setActionsBoxOpen },
+            React__default["default"].createElement(MessageActionsBox, __assign({}, attributes.popper, { getMessageActions: getMessageActions, handleDelete: handleDelete, handleEdit: setEditingState, handleFlag: handleFlag, handleMute: handleMute, handlePin: handlePin, isUserMuted: isMuted, mine: isMine, open: actionsBoxOpen, ref: popperElementRef, style: styles.popper })),
+            React__default["default"].createElement("button", { "aria-expanded": actionsBoxOpen, "aria-haspopup": 'true', "aria-label": 'Open Message Actions Menu', className: 'str-chat__message-actions-box-button', ref: actionsBoxButtonRef },
+                React__default["default"].createElement(ActionsIcon$1, { className: 'str-chat__message-action-icon' }))));
+    };
+    var MessageActionsWrapper = function (props) {
+        var children = props.children, customWrapperClass = props.customWrapperClass, inline = props.inline, setActionsBoxOpen = props.setActionsBoxOpen;
+        var defaultWrapperClass = "\n  str-chat__message-simple__actions__action\n  str-chat__message-simple__actions__action--options\n  str-chat__message-actions-container";
+        var wrapperClass = customWrapperClass || defaultWrapperClass;
+        var onClickOptionsAction = function (event) {
+            event.stopPropagation();
+            setActionsBoxOpen(function (prev) { return !prev; });
+        };
+        var wrapperProps = {
+            className: wrapperClass,
+            'data-testid': 'message-actions',
+            onClick: onClickOptionsAction,
+        };
+        if (inline)
+            return React__default["default"].createElement("span", __assign({}, wrapperProps), children);
+        return React__default["default"].createElement("div", __assign({}, wrapperProps), children);
+    };
+
+    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 UnMemoizedMessageOptions = function (props) {
+        var _a = props.ActionsIcon, ActionsIcon$1 = _a === void 0 ? ActionsIcon : _a, _b = props.displayReplies, displayReplies = _b === void 0 ? true : _b, propHandleOpenThread = props.handleOpenThread, messageWrapperRef = props.messageWrapperRef, _c = props.ReactionIcon, ReactionIcon$1 = _c === void 0 ? ReactionIcon : _c, _d = props.theme, theme = _d === void 0 ? 'simple' : _d, _e = props.ThreadIcon, ThreadIcon$1 = _e === void 0 ? ThreadIcon : _e;
+        var _f = useMessageContext('MessageOptions'), customMessageActions = _f.customMessageActions, getMessageActions = _f.getMessageActions, contextHandleOpenThread = _f.handleOpenThread, initialMessage = _f.initialMessage, message = _f.message, onReactionListClick = _f.onReactionListClick, threadList = _f.threadList;
+        var handleOpenThread = propHandleOpenThread || contextHandleOpenThread;
+        var messageActions = getMessageActions();
+        var showActionsBox = showMessageActionsBox(messageActions, threadList) || !!customMessageActions;
+        var shouldShowReactions = messageActions.indexOf(MESSAGE_ACTIONS.react) > -1;
+        var shouldShowReplies = messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1 && displayReplies && !threadList;
+        if (!message.type ||
+            message.type === 'error' ||
+            message.type === 'system' ||
+            message.type === 'ephemeral' ||
+            message.status === 'failed' ||
+            message.status === 'sending' ||
+            initialMessage) {
+            return null;
+        }
+        var rootClassName = "str-chat__message-".concat(theme, "__actions str-chat__message-options");
+        return (React__default["default"].createElement("div", { className: rootClassName, "data-testid": 'message-options' },
+            showActionsBox && (React__default["default"].createElement(MessageActions, { ActionsIcon: ActionsIcon$1, messageWrapperRef: messageWrapperRef })),
+            shouldShowReplies && (React__default["default"].createElement("button", { "aria-label": 'Open Thread', className: "str-chat__message-".concat(theme, "__actions__action str-chat__message-").concat(theme, "__actions__action--thread str-chat__message-reply-in-thread-button"), "data-testid": 'thread-action', onClick: handleOpenThread },
+                React__default["default"].createElement(ThreadIcon$1, { className: 'str-chat__message-action-icon' }))),
+            shouldShowReactions && (React__default["default"].createElement("button", { "aria-label": 'Open Reaction Selector', className: "str-chat__message-".concat(theme, "__actions__action str-chat__message-").concat(theme, "__actions__action--reactions str-chat__message-reactions-button"), "data-testid": 'message-reaction-action', onClick: onReactionListClick },
+                React__default["default"].createElement(ReactionIcon$1, { className: 'str-chat__message-action-icon' })))));
+    };
+    var MessageOptions = React__default["default"].memo(UnMemoizedMessageOptions);
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedMessageRepliesCountButton = function (props) {
+        var labelPlural = props.labelPlural, labelSingle = props.labelSingle, onClick = props.onClick, _a = props.reply_count, reply_count = _a === void 0 ? 0 : _a;
+        var t = useTranslationContext('MessageRepliesCountButton').t;
+        var themeVersion = useChatContext('MessageRepliesCountButton').themeVersion;
+        if (!reply_count)
+            return null;
+        var replyCountText = t('replyCount', { count: reply_count });
+        if (labelPlural && reply_count > 1) {
+            replyCountText = "".concat(reply_count, " ").concat(labelPlural);
+        }
+        else if (labelSingle) {
+            replyCountText = "1 ".concat(labelSingle);
+        }
+        return (React__default["default"].createElement("div", { className: 'str-chat__message-simple-reply-button str-chat__message-replies-count-button-wrapper' },
+            React__default["default"].createElement("button", { className: 'str-chat__message-replies-count-button', "data-testid": 'replies-count-button', onClick: onClick },
+                themeVersion === '1' && React__default["default"].createElement(ReplyIcon, null),
+                replyCountText)));
+    };
+    var MessageRepliesCountButton = React__default["default"].memo(UnMemoizedMessageRepliesCountButton);
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var Tooltip = function (_a) {
         var children = _a.children, rest = __rest(_a, ["children"]);
         return (React__default["default"].createElement("div", __assign({ className: 'str-chat__tooltip' }, rest), children));
@@ -47544,6 +47577,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var message = propMessage || contextMessage;
         var hasAttachment = messageHasAttachments(message);
         var messageTextToRender = ((_b = message.i18n) === null || _b === void 0 ? void 0 : _b["".concat(userLanguage, "_text")]) || message.text;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         var messageText = React$2.useMemo(function () { return renderText$1(messageTextToRender, message.mentioned_users); }, [
             message.mentioned_users,
             messageTextToRender,
@@ -48063,6 +48097,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             });
             return Object.values(uniqueUsers);
         }, [members, watchers]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         var queryMembersThrottled = React$2.useCallback(lodash_throttle(function (query, onReady) { return __awaiter(void 0, void 0, void 0, function () {
             var response, users, error_1;
             return __generator(this, function (_a) {
@@ -48372,6 +48407,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 channel === null || channel === void 0 ? void 0 : channel.off('message.deleted', handleQuotedMessageUpdate);
                 channel === null || channel === void 0 ? void 0 : channel.off('message.updated', handleQuotedMessageUpdate);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [channel, quotedMessage]);
         return themeVersion === '2' ? (React__default["default"].createElement(MessageInputV2, null)) : (React__default["default"].createElement(MessageInputV1, null));
     };
@@ -48539,6 +48575,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var removeImage = React$2.useCallback(function (id) {
             dispatch({ id: id, type: 'removeImageUpload' });
             // TODO: cancel upload if still uploading
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         var uploadImage = React$2.useCallback(function (id) { return __awaiter(void 0, void 0, void 0, function () {
             var img, file, canUpload, response, error_1, errorMessage, alreadyRemoved;
@@ -48614,7 +48651,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                         return [2 /*return*/];
                 }
             });
-        }); }, [imageUploads, channel, doImageUploadRequest, errorHandler, removeImage]);
+        }); }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [imageUploads, channel, doImageUploadRequest, errorHandler, removeImage]);
         React$2.useEffect(function () {
             var upload = Object.values(imageUploads).find(function (imageUpload) { return imageUpload.state === 'uploading' && imageUpload.file; });
             if (!upload)
@@ -48636,10 +48675,12 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var t = useTranslationContext('useFileUploads').t;
         var uploadFile = React$2.useCallback(function (id) {
             dispatch({ id: id, state: 'uploading', type: 'setFileUpload' });
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         var removeFile = React$2.useCallback(function (id) {
             // TODO: cancel upload if still uploading
             dispatch({ id: id, type: 'removeFileUpload' });
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         React$2.useEffect(function () {
             (function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -48711,6 +48752,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                     }
                 });
             }); })();
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [fileUploads, channel, doFileUploadRequest, errorHandler, removeFile]);
         return {
             removeFile: removeFile,
@@ -48762,7 +48804,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 }
             });
             (_a = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }, [maxFilesLeft, noFiles]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [maxFilesLeft, noFiles]);
         return {
             maxFilesLeft: maxFilesLeft,
             numberOfUploads: numberOfUploads,
@@ -48813,7 +48857,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 },
                 type: 'setText',
             });
-        }, [additionalTextareaProps, newCursorPosition, textareaRef]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [additionalTextareaProps, newCursorPosition, textareaRef]);
         React$2.useEffect(function () {
             var textareaElement = textareaRef.current;
             if (textareaElement && newCursorPosition.current !== undefined) {
@@ -48836,7 +48882,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             if (publishTypingEvent && newText && channel) {
                 streamChat.logChatPromiseExecution(channel.keystroke(parent === null || parent === void 0 ? void 0 : parent.id), 'start typing event');
             }
-        }, [channel, findAndEnqueueURLsToEnrich, parent, publishTypingEvent]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [channel, findAndEnqueueURLsToEnrich, parent, publishTypingEvent]);
         return {
             handleChange: handleChange,
             insertText: insertText,
@@ -49070,7 +49118,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                     }
                 });
             }); })(clipboardEvent);
-        }, [insertText, uploadNewFiles]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [insertText, uploadNewFiles]);
         return { onPaste: onPaste };
     };
 
@@ -49094,7 +49144,10 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 mode: exports.SetLinkPreviewMode.UPSERT,
                 type: 'setLinkPreviews',
             });
-        }, [onLinkPreviewDismissed]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [onLinkPreviewDismissed]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         var findAndEnqueueURLsToEnrich = React$2.useCallback(lodash_debounce(function (text, mode) {
             if (mode === void 0) { mode = exports.SetLinkPreviewMode.SET; }
             var urls = findURLFn
@@ -49160,6 +49213,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                     });
                 });
             });
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [shouldDiscardEnrichQueries, linkPreviews]);
         return {
             cancelURLEnrichment: cancelURLEnrichment,
@@ -49453,7 +49507,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             uploadImage: uploadImage,
             uploadNewFiles: uploadNewFiles,
             useMentionsTransliteration: useMentionsTransliteration,
-        }); }, [
+        }); }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
             cancelURLEnrichment,
             cooldownInterval,
             cooldownRemaining,
@@ -49536,6 +49592,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 channel === null || channel === void 0 ? void 0 : channel.off('message.deleted', handleQuotedMessageUpdate);
                 channel === null || channel === void 0 ? void 0 : channel.off('message.updated', handleQuotedMessageUpdate);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [channel, quotedMessage]);
         return (React__default["default"].createElement("div", { className: 'str-chat__small-message-input__wrapper' },
             React__default["default"].createElement(ImageDropzone, { accept: acceptedFiles, disabled: !isUploadEnabled || maxFilesLeft === 0 || !!cooldownRemaining, handleFiles: uploadNewFiles, maxNumberOfFiles: maxFilesLeft, multiple: multipleUploads },
@@ -49698,8 +49755,11 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var message = useMessageContext('useProcessReactions').message;
         var contextReactionOptions = useComponentContext('useProcessReactions').reactionOptions;
         var reactionOptions = propReactionOptions !== null && propReactionOptions !== void 0 ? propReactionOptions : contextReactionOptions;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         var latestReactions = propReactions || message.latest_reactions || [];
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         var ownReactions = propOwnReactions || (message === null || message === void 0 ? void 0 : message.own_reactions) || [];
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         var reactionCounts = propReactionCounts || message.reaction_counts || {};
         var iHaveReactedWithReaction = React$2.useCallback(function (reactionType) { return ownReactions.find(function (reaction) { return reaction.type === reactionType; }); }, [ownReactions]);
         var getEmojiByReactionType = React$2.useCallback(function (reactionType) { return reactionOptions.find(function (_a) {
@@ -50211,7 +50271,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
     //  The MessageList should have configurable the limit for performing the requests.
     //  This parameter would then be used within these functions
     var hasMoreMessagesProbably = function (returnedCountMessages, limit) {
-        return returnedCountMessages === limit;
+        return returnedCountMessages >= limit;
     };
     // @deprecated
     var hasNotMoreMessages = function (returnedCountMessages, limit) {
@@ -50385,7 +50445,65 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         url.searchParams.set('w', resizeDimensions.width.toString());
     };
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=streamChat.logChatPromiseExecution;window.StreamChat.Channel=Channel$1;window.ICAL=window.ICAL||{};var UnMemoizedChannel = function (props) {
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};/**
+     * Component to display system and channel event messages
+     */
+    var UnMemoizedEventComponent = function (props) {
+        var _a, _b, _c;
+        var _d = props.Avatar, Avatar$1 = _d === void 0 ? Avatar : _d, message = props.message;
+        var tDateTimeParser = useTranslationContext('EventComponent').tDateTimeParser;
+        var _e = message.created_at, created_at = _e === void 0 ? '' : _e, event = message.event, text = message.text, type = message.type;
+        var getDateOptions = { messageCreatedAt: created_at.toString(), tDateTimeParser: tDateTimeParser };
+        if (type === 'system')
+            return (React__default["default"].createElement("div", { className: 'str-chat__message--system', "data-testid": 'message-system' },
+                React__default["default"].createElement("div", { className: 'str-chat__message--system__text' },
+                    React__default["default"].createElement("div", { className: 'str-chat__message--system__line' }),
+                    React__default["default"].createElement("p", null, text),
+                    React__default["default"].createElement("div", { className: 'str-chat__message--system__line' })),
+                React__default["default"].createElement("div", { className: 'str-chat__message--system__date' },
+                    React__default["default"].createElement("strong", null,
+                        getDateString(__assign(__assign({}, getDateOptions), { format: 'dddd' })),
+                        " "),
+                    "at ",
+                    getDateString(__assign(__assign({}, getDateOptions), { format: 'hh:mm A' })))));
+        if ((event === null || event === void 0 ? void 0 : event.type) === 'member.removed' || (event === null || event === void 0 ? void 0 : event.type) === 'member.added') {
+            var name_1 = ((_a = event.user) === null || _a === void 0 ? void 0 : _a.name) || ((_b = event.user) === null || _b === void 0 ? void 0 : _b.id);
+            var sentence = "".concat(name_1, " ").concat(event.type === 'member.added' ? 'has joined the chat' : 'was removed from the chat');
+            return (React__default["default"].createElement("div", { className: 'str-chat__event-component__channel-event' },
+                React__default["default"].createElement(Avatar$1, { image: (_c = event.user) === null || _c === void 0 ? void 0 : _c.image, name: name_1, user: event.user }),
+                React__default["default"].createElement("div", { className: 'str-chat__event-component__channel-event__content' },
+                    React__default["default"].createElement("em", { className: 'str-chat__event-component__channel-event__sentence' }, sentence),
+                    React__default["default"].createElement("div", { className: 'str-chat__event-component__channel-event__date' }, getDateString(__assign(__assign({}, getDateOptions), { format: 'LT' }))))));
+        }
+        return null;
+    };
+    var EventComponent = React__default["default"].memo(UnMemoizedEventComponent);
+
+    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 UnMemoizedDateSeparator = function (props) {
+        var messageCreatedAt = props.date, formatDate = props.formatDate, _a = props.position, position = _a === void 0 ? 'right' : _a, unread = props.unread;
+        var _b = useTranslationContext('DateSeparator'), t = _b.t, tDateTimeParser = _b.tDateTimeParser;
+        var formattedDate = getDateString({
+            calendar: true,
+            formatDate: formatDate,
+            messageCreatedAt: messageCreatedAt,
+            tDateTimeParser: tDateTimeParser,
+        });
+        return (React__default["default"].createElement("div", { className: 'str-chat__date-separator', "data-testid": 'date-separator' },
+            (position === 'right' || position === 'center') && (React__default["default"].createElement("hr", { className: 'str-chat__date-separator-line' })),
+            React__default["default"].createElement("div", { className: 'str-chat__date-separator-date' }, unread ? "".concat(t('New'), " - ").concat(formattedDate) : formattedDate),
+            (position === 'left' || position === 'center') && (React__default["default"].createElement("hr", { className: 'str-chat__date-separator-line' }))));
+    };
+    /**
+     * A simple date separator between messages.
+     */
+    var DateSeparator = React__default["default"].memo(UnMemoizedDateSeparator);
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=streamChat.logChatPromiseExecution;window.StreamChat.Channel=Channel$1;window.ICAL=window.ICAL||{};var isUserResponseArray = function (output) { var _a; return ((_a = output[0]) === null || _a === void 0 ? void 0 : _a.id) != null; };
+    var UnMemoizedChannel = function (props) {
         var propsChannel = props.channel, _a = props.EmptyPlaceholder, EmptyPlaceholder = _a === void 0 ? null : _a, LoadingErrorIndicator = props.LoadingErrorIndicator, _b = props.LoadingIndicator, LoadingIndicator = _b === void 0 ? LoadingChannel : _b;
         var _c = useChatContext('Channel'), contextChannel = _c.channel, channelsQueryState = _c.channelsQueryState, customClasses = _c.customClasses, theme = _c.theme;
         var _d = useChannelContainerClasses({
@@ -50606,6 +50724,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 client.off('user.deleted', handleEvent);
                 notificationTimeouts.forEach(clearTimeout);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [
             channel.cid,
             channelQueryOptions,
@@ -50624,14 +50743,12 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         /** MESSAGE */
         // Adds a temporary notification to message list, will be removed after 5 seconds
         var addNotification = makeAddNotifications(setNotifications, notificationTimeouts);
-        var loadMoreFinished = lodash_debounce(function (hasMore, messages) {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        var loadMoreFinished = React$2.useCallback(lodash_debounce(function (hasMore, messages) {
             if (!isMounted.current)
                 return;
             dispatch({ hasMore: hasMore, messages: messages, type: 'loadMoreFinished' });
-        }, 2000, {
-            leading: true,
-            trailing: true,
-        });
+        }, 2000, { leading: true, trailing: true }), []);
         var loadMore = function (limit) {
             if (limit === void 0) { limit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE; }
             return __awaiter(void 0, void 0, void 0, function () {
@@ -50675,12 +50792,12 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var loadMoreNewer = function (limit) {
             if (limit === void 0) { limit = 100; }
             return __awaiter(void 0, void 0, void 0, function () {
-                var newestMessage, newestId, perPage, queryResponse, e_3, hasMoreNewer;
+                var newestMessage, newestId, perPage, queryResponse, e_3, hasMoreNewerMessages;
                 var _a, _b;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
-                            if (!online.current || !window.navigator.onLine)
+                            if (!online.current || !window.navigator.onLine || !state.hasMoreNewer)
                                 return [2 /*return*/, 0];
                             newestMessage = (_a = state === null || state === void 0 ? void 0 : state.messages) === null || _a === void 0 ? void 0 : _a[((_b = state === null || state === void 0 ? void 0 : state.messages) === null || _b === void 0 ? void 0 : _b.length) - 1];
                             if (state.loadingMore || state.loadingMoreNewer)
@@ -50704,8 +50821,12 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                             dispatch({ loadingMoreNewer: false, type: 'setLoadingMoreNewer' });
                             return [2 /*return*/, 0];
                         case 4:
-                            hasMoreNewer = channel.state.messages !== channel.state.latestMessages;
-                            dispatch({ hasMoreNewer: hasMoreNewer, messages: channel.state.messages, type: 'loadMoreNewerFinished' });
+                            hasMoreNewerMessages = channel.state.messages !== channel.state.latestMessages;
+                            dispatch({
+                                hasMoreNewer: hasMoreNewerMessages,
+                                messages: channel.state.messages,
+                                type: 'loadMoreNewerFinished',
+                            });
                             return [2 /*return*/, queryResponse.messages.length];
                     }
                 });
@@ -50790,7 +50911,6 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 type: 'copyMessagesFromChannel',
             });
         };
-        var isUserResponseArray = function (output) { var _a; return ((_a = output[0]) === null || _a === void 0 ? void 0 : _a.id) != null; };
         var doSendMessage = function (message, customMessageData, options) { return __awaiter(void 0, void 0, void 0, function () {
             var attachments, id, _a, mentioned_users, parent_id, text, mentions, messageData, messageResponse, existingMessage, i, msg, responseTimestamp, existingMessageTimestamp, responseIsTheNewest, error_1, stringError, parsedError;
             var _b, _c;
@@ -50910,17 +51030,18 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             event === null || event === void 0 ? void 0 : event.preventDefault();
             dispatch({ type: 'closeThread' });
         };
-        var loadMoreThreadFinished = lodash_debounce(function (threadHasMore, threadMessages) {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        var loadMoreThreadFinished = React$2.useCallback(lodash_debounce(function (threadHasMore, threadMessages) {
             dispatch({
                 threadHasMore: threadHasMore,
                 threadMessages: threadMessages,
                 type: 'loadMoreThreadFinished',
             });
-        }, 2000, { leading: true, trailing: true });
+        }, 2000, { leading: true, trailing: true }), []);
         var loadMoreThread = function (limit) {
             if (limit === void 0) { limit = DEFAULT_THREAD_PAGE_SIZE; }
             return __awaiter(void 0, void 0, void 0, function () {
-                var parentID, oldMessages, oldestMessageID, queryResponse, threadHasMoreMessages, newThreadMessages;
+                var parentId, oldMessages, oldestMessageId, queryResponse, threadHasMoreMessages, newThreadMessages;
                 var _a;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
@@ -50929,23 +51050,23 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                             if (state.threadLoadingMore || !state.thread)
                                 return [2 /*return*/];
                             dispatch({ type: 'startLoadingThread' });
-                            parentID = state.thread.id;
-                            if (!parentID) {
+                            parentId = state.thread.id;
+                            if (!parentId) {
                                 return [2 /*return*/, dispatch({ type: 'closeThread' })];
                             }
-                            oldMessages = channel.state.threads[parentID] || [];
-                            oldestMessageID = (_a = oldMessages[0]) === null || _a === void 0 ? void 0 : _a.id;
+                            oldMessages = channel.state.threads[parentId] || [];
+                            oldestMessageId = (_a = oldMessages[0]) === null || _a === void 0 ? void 0 : _a.id;
                             _b.label = 1;
                         case 1:
                             _b.trys.push([1, 3, , 4]);
-                            return [4 /*yield*/, channel.getReplies(parentID, {
-                                    id_lt: oldestMessageID,
+                            return [4 /*yield*/, channel.getReplies(parentId, {
+                                    id_lt: oldestMessageId,
                                     limit: limit,
                                 })];
                         case 2:
                             queryResponse = _b.sent();
                             threadHasMoreMessages = hasMoreMessagesProbably(queryResponse.messages.length, limit);
-                            newThreadMessages = channel.state.threads[parentID] || [];
+                            newThreadMessages = channel.state.threads[parentId] || [];
                             // next set loadingMore to false so we can start asking for more data
                             loadMoreThreadFinished(threadHasMoreMessages, newThreadMessages);
                             return [3 /*break*/, 4];
@@ -50982,7 +51103,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             setQuotedMessage: setQuotedMessage,
             skipMessageDataMemoization: skipMessageDataMemoization,
             updateMessage: updateMessage,
-        }); }, [
+        }); }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
             channel.cid,
             deleteMessage,
             enrichURLForPreviewConfig === null || enrichURLForPreviewConfig === void 0 ? void 0 : enrichURLForPreviewConfig.findURLFn,
@@ -51005,7 +51128,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 BaseImage: props.BaseImage,
                 CooldownTimer: props.CooldownTimer,
                 CustomMessageActionsList: props.CustomMessageActionsList,
-                DateSeparator: props.DateSeparator,
+                DateSeparator: props.DateSeparator || DateSeparator,
                 EditMessageInput: props.EditMessageInput,
                 EmojiPicker: props.EmojiPicker,
                 emojiSearchIndex: props.emojiSearchIndex,
@@ -51023,7 +51146,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 MessageOptions: props.MessageOptions,
                 MessageRepliesCountButton: props.MessageRepliesCountButton,
                 MessageStatus: props.MessageStatus,
-                MessageSystem: props.MessageSystem,
+                MessageSystem: props.MessageSystem || EventComponent,
                 MessageTimestamp: props.MessageTimestamp,
                 ModalGallery: props.ModalGallery,
                 PinIndicator: props.PinIndicator,
@@ -51040,7 +51163,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 TypingIndicator: props.TypingIndicator,
                 VirtualMessage: props.VirtualMessage,
             });
-        }, [props.reactionOptions]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [props.reactionOptions]);
         var typingContextValue = useCreateTypingContext({
             typing: typing,
         });
@@ -51156,6 +51281,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('user.updated', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         return {
             displayImage: overrideImage || displayImage,
@@ -51258,6 +51384,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('channel.deleted', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [customHandler]);
     };
 
@@ -51283,6 +51410,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('channel.hidden', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [customHandler]);
     };
 
@@ -51302,6 +51430,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('channel.truncated', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [customHandler]);
     };
 
@@ -51330,6 +51459,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('channel.updated', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [customHandler]);
     };
 
@@ -51363,6 +51493,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('channel.visible', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [customHandler]);
     };
 
@@ -51378,6 +51509,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('connection.recovered', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
     };
 
@@ -51419,6 +51551,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('message.new', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [lockChannelOrder]);
     };
 
@@ -51479,6 +51612,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('notification.added_to_channel', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [customHandler]);
     };
 
@@ -51514,6 +51648,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('notification.message_new', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [customHandler]);
     };
 
@@ -51532,6 +51667,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('notification.removed_from_channel', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [customHandler]);
     };
 
@@ -51551,6 +51687,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         // memoize props
         var filterString = React$2.useMemo(function () { return JSON.stringify(filters); }, [filters]);
         var sortString = React$2.useMemo(function () { return JSON.stringify(sort); }, [sort]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         var queryChannels = function (queryType) { return __awaiter(void 0, void 0, void 0, function () {
             var offset, newOptions, channelQueryResponse, newChannels, err_1;
             var _a;
@@ -51619,6 +51756,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         }, [client, throttleRecover]);
         React$2.useEffect(function () {
             queryChannels('reload');
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [filterString, sortString]);
         return {
             channels: channels,
@@ -51649,6 +51787,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('user.presence.changed', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
     };
 
@@ -51691,6 +51830,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             var handleEvent = function () { return setMuted(channel.muteStatus()); };
             client.on('notification.channel_mutes_updated', handleEvent);
             return function () { return client.off('notification.channel_mutes_updated', handleEvent); };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [muted]);
         return muted;
     };
@@ -51774,6 +51914,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             };
             client.on('notification.mark_read', handleEvent);
             return function () { return client.off('notification.mark_read', handleEvent); };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         var refreshUnreadCount = React$2.useCallback(function () {
             if (isActive || muted) {
@@ -51798,6 +51939,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 channel.off('message.updated', handleEvent);
                 channel.off('message.deleted', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [refreshUnreadCount, channelUpdateCount]);
         if (!Preview)
             return null;
@@ -51854,6 +51996,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             };
             document.addEventListener('click', clickListener);
             return function () { return document.removeEventListener('click', clickListener); };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [disabled, inputIsFocused, query, exitSearch, clearSearchOnClickOutside]);
         React$2.useEffect(function () {
             if (!inputRef.current || disabled)
@@ -51865,8 +52008,10 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             inputRef.current.addEventListener('keydown', handleKeyDown);
             return function () {
                 var _a;
+                // eslint-disable-next-line react-hooks/exhaustive-deps
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', handleKeyDown);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [disabled]);
         var selectResult = React$2.useCallback(function (result) { return __awaiter(void 0, void 0, void 0, function () {
             var selectedChannel, newChannel;
@@ -51905,7 +52050,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                         return [2 /*return*/];
                 }
             });
-        }); }, [clearSearchOnClickOutside, client, exitSearch, onSelectResult, setActiveChannel, setChannels]);
+        }); }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [clearSearchOnClickOutside, client, exitSearch, onSelectResult, setActiveChannel, setChannels]);
         var getChannels = React$2.useCallback(function (text) { return __awaiter(void 0, void 0, void 0, function () {
             var results, userQueryPromise, users, channelQueryPromise, _a, channels, users, error_1;
             var _b, _c, _d, _e, _f, _g;
@@ -51953,6 +52100,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 }
             });
         }); }, [client, searchForChannels, searchQueryParams]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         var scheduleGetChannels = React$2.useCallback(lodash_debounce(getChannels, searchDebounceIntervalMs), [
             getChannels,
             searchDebounceIntervalMs,
@@ -52060,11 +52208,13 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 (_a = props.inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('focus', handleFocus);
                 (_b = props.inputRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('blur', handleBlur);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         var handleClearClick = React$2.useCallback(function () {
             var _a;
             exitSearch();
             (_a = inputProps.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         var closeAppMenu = React$2.useCallback(function () { return setMenuIsOpen(false); }, []);
         return (React__default["default"].createElement("div", { className: 'str-chat__channel-search-bar', "data-testid": 'search-bar', ref: searchBarRef },
@@ -52150,7 +52300,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                     return setFocusedResult(undefined);
                 }
             }
-        }, [focusedResult]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [focusedResult]);
         React$2.useEffect(function () {
             document.addEventListener('keydown', handleKeyDown, false);
             return function () { return document.removeEventListener('keydown', handleKeyDown); };
@@ -52233,6 +52385,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var loading = typeof isLoading !== 'undefined' ? isLoading : refreshing;
         React$2.useEffect(function () {
             deprecationAndReplacementWarning([[{ refreshing: refreshing }, { isLoading: isLoading }]], 'LoadMoreButton');
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         return (React__default["default"].createElement("div", { className: 'str-chat__load-more-button' },
             React__default["default"].createElement("button", { "aria-label": 'Load More Channels', className: 'str-chat__load-more-button__button str-chat__cta-button', "data-testid": 'load-more-button', disabled: loading, onClick: onClick }, loading ? React__default["default"].createElement(LoadingIndicator, null) : childrenOrDefaultString)));
@@ -52244,6 +52397,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var loadingState = typeof isLoading !== 'undefined' ? isLoading : refreshing;
         React$2.useEffect(function () {
             deprecationAndReplacementWarning([[{ refreshing: refreshing }, { isLoading: isLoading }]], 'LoadMorePaginator');
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
             !reverse && children,
@@ -52315,11 +52469,13 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 setSearchActive(true);
             }
             (_a = additionalChannelSearchProps === null || additionalChannelSearchProps === void 0 ? void 0 : additionalChannelSearchProps.onSearch) === null || _a === void 0 ? void 0 : _a.call(additionalChannelSearchProps, event);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         var onSearchExit = React$2.useCallback(function () {
             var _a;
             setSearchActive(false);
             (_a = additionalChannelSearchProps === null || additionalChannelSearchProps === void 0 ? void 0 : additionalChannelSearchProps.onSearchExit) === null || _a === void 0 ? void 0 : _a.call(additionalChannelSearchProps);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         var _u = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler, recoveryThrottleIntervalMs), channels = _u.channels, hasNextPage = _u.hasNextPage, loadNextPage = _u.loadNextPage, setChannels = _u.setChannels;
         var loadedChannels = channelRenderFilterFn ? channelRenderFilterFn(channels) : channels;
@@ -52347,6 +52503,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 client.off('channel.deleted', handleEvent);
                 client.off('channel.hidden', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [channel === null || channel === void 0 ? void 0 : channel.cid]);
         var renderChannel = function (item) {
             var previewProps = {
@@ -52386,7 +52543,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
 
     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.3.0';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.4.0';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;
@@ -52428,6 +52585,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             };
             client.on('notification.mutes_updated', handleEvent);
             return function () { return client.off('notification.mutes_updated', handleEvent); };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [clientMutes === null || clientMutes === void 0 ? void 0 : clientMutes.length]);
         React$2.useEffect(function () {
             var _a;
@@ -52443,6 +52601,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             streami18n.getTranslators().then(function (translator) {
                 setTranslators(__assign(__assign({}, translator), { userLanguage: userLanguage || defaultLanguage }));
             });
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [i18nInstance]);
         var setActiveChannel = React$2.useCallback(function (activeChannel, watchers, event) {
             if (watchers === void 0) { watchers = {}; }
@@ -52504,7 +52663,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             theme: theme,
             themeVersion: themeVersion,
             useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
-        }); }, [
+        }); }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
             channelCid,
             channelsQueryError,
             channelsQueryInProgress,
@@ -52607,63 +52768,6 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
 
     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 UnMemoizedDateSeparator = function (props) {
-        var messageCreatedAt = props.date, formatDate = props.formatDate, _a = props.position, position = _a === void 0 ? 'right' : _a, unread = props.unread;
-        var _b = useTranslationContext('DateSeparator'), t = _b.t, tDateTimeParser = _b.tDateTimeParser;
-        var formattedDate = getDateString({
-            calendar: true,
-            formatDate: formatDate,
-            messageCreatedAt: messageCreatedAt,
-            tDateTimeParser: tDateTimeParser,
-        });
-        return (React__default["default"].createElement("div", { className: 'str-chat__date-separator', "data-testid": 'date-separator' },
-            (position === 'right' || position === 'center') && (React__default["default"].createElement("hr", { className: 'str-chat__date-separator-line' })),
-            React__default["default"].createElement("div", { className: 'str-chat__date-separator-date' }, unread ? "".concat(t('New'), " - ").concat(formattedDate) : formattedDate),
-            (position === 'left' || position === 'center') && (React__default["default"].createElement("hr", { className: 'str-chat__date-separator-line' }))));
-    };
-    /**
-     * A simple date separator between messages.
-     */
-    var DateSeparator = React__default["default"].memo(UnMemoizedDateSeparator);
-
-    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||{};
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};/**
-     * Component to display system and channel event messages
-     */
-    var UnMemoizedEventComponent = function (props) {
-        var _a, _b, _c;
-        var _d = props.Avatar, Avatar$1 = _d === void 0 ? Avatar : _d, message = props.message;
-        var tDateTimeParser = useTranslationContext('EventComponent').tDateTimeParser;
-        var _e = message.created_at, created_at = _e === void 0 ? '' : _e, event = message.event, text = message.text, type = message.type;
-        var getDateOptions = { messageCreatedAt: created_at.toString(), tDateTimeParser: tDateTimeParser };
-        if (type === 'system')
-            return (React__default["default"].createElement("div", { className: 'str-chat__message--system', "data-testid": 'message-system' },
-                React__default["default"].createElement("div", { className: 'str-chat__message--system__text' },
-                    React__default["default"].createElement("div", { className: 'str-chat__message--system__line' }),
-                    React__default["default"].createElement("p", null, text),
-                    React__default["default"].createElement("div", { className: 'str-chat__message--system__line' })),
-                React__default["default"].createElement("div", { className: 'str-chat__message--system__date' },
-                    React__default["default"].createElement("strong", null,
-                        getDateString(__assign(__assign({}, getDateOptions), { format: 'dddd' })),
-                        " "),
-                    "at ",
-                    getDateString(__assign(__assign({}, getDateOptions), { format: 'hh:mm A' })))));
-        if ((event === null || event === void 0 ? void 0 : event.type) === 'member.removed' || (event === null || event === void 0 ? void 0 : event.type) === 'member.added') {
-            var name_1 = ((_a = event.user) === null || _a === void 0 ? void 0 : _a.name) || ((_b = event.user) === null || _b === void 0 ? void 0 : _b.id);
-            var sentence = "".concat(name_1, " ").concat(event.type === 'member.added' ? 'has joined the chat' : 'was removed from the chat');
-            return (React__default["default"].createElement("div", { className: 'str-chat__event-component__channel-event' },
-                React__default["default"].createElement(Avatar$1, { image: (_c = event.user) === null || _c === void 0 ? void 0 : _c.image, name: name_1, user: event.user }),
-                React__default["default"].createElement("div", { className: 'str-chat__event-component__channel-event__content' },
-                    React__default["default"].createElement("em", { className: 'str-chat__event-component__channel-event__sentence' }, sentence),
-                    React__default["default"].createElement("div", { className: 'str-chat__event-component__channel-event__date' }, getDateString(__assign(__assign({}, getDateOptions), { format: 'LT' }))))));
-        }
-        return null;
-    };
-    var EventComponent = React__default["default"].memo(UnMemoizedEventComponent);
-
     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||{};/**
@@ -52721,6 +52825,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 [{ hasMore: hasMore }, { hasPreviousPage: hasPreviousPage }],
                 [{ loadMore: loadMore }, { loadPreviousPage: loadPreviousPage }],
             ], 'InfiniteScroll');
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         React$2.useLayoutEffect(function () {
             var _a;
@@ -53078,7 +53183,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             var newOwnReactions = add
                 ? __spreadArray([reaction], ((message === null || message === void 0 ? void 0 : message.own_reactions) || []), true) : (_b = message === null || message === void 0 ? void 0 : message.own_reactions) === null || _b === void 0 ? void 0 : _b.filter(function (item) { return item.type !== reaction.type; });
             return __assign(__assign({}, message), { latest_reactions: newReactions || message.latest_reactions, own_reactions: newOwnReactions, reaction_counts: newReactionCounts, reaction_scores: newReactionCounts });
-        }, [client.user, client.userID]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [client.user, client.userID]);
         var createReactionPreview = function (type) {
             var _a;
             return ({
@@ -53184,7 +53291,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 return;
             }
             setShowDetailedReactions(false);
-        }, [setShowDetailedReactions, reactionSelectorRef]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [setShowDetailedReactions, reactionSelectorRef]);
         React$2.useEffect(function () {
             var messageWrapper = messageWrapperRef === null || messageWrapperRef === void 0 ? void 0 : messageWrapperRef.current;
             if (showDetailedReactions && !hasListener.current) {
@@ -53469,7 +53578,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                     acc[message.id] = style;
                 return acc;
             }, {});
-        }, [messagesWithDates, noGroupByUser]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [messagesWithDates, noGroupByUser]);
         return { messageGroupStyles: messageGroupStyles, messages: messagesWithDates };
     };
 
@@ -53484,9 +53595,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useMessageListElements = function (props) {
-        var enrichedMessages = props.enrichedMessages, internalMessageProps = props.internalMessageProps, messageGroupStyles = props.messageGroupStyles, read = props.read, returnAllReadData = props.returnAllReadData, threadList = props.threadList;
+        var enrichedMessages = props.enrichedMessages, internalMessageProps = props.internalMessageProps, messageGroupStyles = props.messageGroupStyles, read = props.read, renderMessages = props.renderMessages, returnAllReadData = props.returnAllReadData, threadList = props.threadList;
         var _a = useChatContext('useMessageListElements'), client = _a.client, customClasses = _a.customClasses;
-        var _b = useComponentContext('useMessageListElements'), _c = _b.DateSeparator, DateSeparator$1 = _c === void 0 ? DateSeparator : _c, HeaderComponent = _b.HeaderComponent, _d = _b.MessageSystem, MessageSystem = _d === void 0 ? EventComponent : _d;
+        var components = useComponentContext('useMessageListElements');
         // get the readData, but only for messages submitted by the user themselves
         var readData = useLastReadData({
             messages: enrichedMessages,
@@ -53494,34 +53605,28 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             returnAllReadData: returnAllReadData,
             userID: client.userID,
         });
-        var lastReceivedId = React$2.useMemo(function () { return getLastReceived(enrichedMessages); }, [enrichedMessages]);
+        var lastReceivedMessageId = React$2.useMemo(function () { return getLastReceived(enrichedMessages); }, [
+            enrichedMessages,
+        ]);
         var elements = React$2.useMemo(function () {
-            return enrichedMessages.map(function (message) {
-                if (message.customType === CUSTOM_MESSAGE_TYPE.date &&
-                    message.date &&
-                    isDate(message.date)) {
-                    return (React__default["default"].createElement("li", { key: "".concat(message.date.toISOString(), "-i") },
-                        React__default["default"].createElement(DateSeparator$1, { date: message.date, formatDate: internalMessageProps.formatDate, unread: message.unread })));
-                }
-                if (message.customType === CUSTOM_MESSAGE_TYPE.intro && HeaderComponent) {
-                    return (React__default["default"].createElement("li", { key: 'intro' },
-                        React__default["default"].createElement(HeaderComponent, null)));
-                }
-                if (message.type === 'system') {
-                    return (React__default["default"].createElement("li", { key: message.id || message.created_at },
-                        React__default["default"].createElement(MessageSystem, { message: message })));
-                }
-                var groupStyles = messageGroupStyles[message.id] || '';
-                var messageClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.message) || "str-chat__li str-chat__li--".concat(groupStyles);
-                return (React__default["default"].createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass, key: message.id || message.created_at },
-                    React__default["default"].createElement(Message, __assign({ groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [], threadList: threadList }, internalMessageProps))));
+            return renderMessages({
+                components: components,
+                customClasses: customClasses,
+                lastReceivedMessageId: lastReceivedMessageId,
+                messageGroupStyles: messageGroupStyles,
+                messages: enrichedMessages,
+                readData: readData,
+                sharedMessageProps: __assign(__assign({}, internalMessageProps), { threadList: threadList }),
             });
-        }, [
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
             enrichedMessages,
             internalMessageProps,
-            lastReceivedId,
+            lastReceivedMessageId,
             messageGroupStyles,
             readData,
+            renderMessages,
             threadList,
         ]);
         return elements;
@@ -53578,6 +53683,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             }
             messages.current = newMessages;
             measures.current = newMeasures;
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [measures, messages, params.messages]);
         return function (scrollTopValue) {
             scrollTop.current = scrollTopValue;
@@ -53607,6 +53713,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 setWrapperRect(listElement.getBoundingClientRect());
                 scrollToBottom();
             }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [listElement, hasMoreNewer]);
         var updateScrollTop = useMessageListScrollManager({
             loadMoreScrollThreshold: loadMoreScrollThreshold,
@@ -53761,24 +53868,50 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         return React__default["default"].createElement(React__default["default"].Fragment, null, children);
     };
 
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function defaultRenderMessages(_a) {
+        var components = _a.components, customClasses = _a.customClasses, lastReceivedId = _a.lastReceivedMessageId, messageGroupStyles = _a.messageGroupStyles, messages = _a.messages, readData = _a.readData, messageProps = _a.sharedMessageProps;
+        var DateSeparator = components.DateSeparator, HeaderComponent = components.HeaderComponent, MessageSystem = components.MessageSystem;
+        return messages.map(function (message) {
+            if (message.customType === CUSTOM_MESSAGE_TYPE.date &&
+                message.date &&
+                isDate(message.date) &&
+                DateSeparator) {
+                return (React__default["default"].createElement("li", { key: "".concat(message.date.toISOString(), "-i") },
+                    React__default["default"].createElement(DateSeparator, { date: message.date, formatDate: messageProps.formatDate, unread: message.unread })));
+            }
+            if (message.customType === CUSTOM_MESSAGE_TYPE.intro && HeaderComponent) {
+                return (React__default["default"].createElement("li", { key: 'intro' },
+                    React__default["default"].createElement(HeaderComponent, null)));
+            }
+            if (message.type === 'system' && MessageSystem) {
+                return (React__default["default"].createElement("li", { key: message.id || message.created_at },
+                    React__default["default"].createElement(MessageSystem, { message: message })));
+            }
+            var groupStyles = messageGroupStyles[message.id] || '';
+            var messageClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.message) || "str-chat__li str-chat__li--".concat(groupStyles);
+            return (React__default["default"].createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass, key: message.id || message.created_at },
+                React__default["default"].createElement(Message, __assign({ groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [] }, messageProps))));
+        });
+    }
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var MessageListWithContext = function (props) {
         var channel = props.channel, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? false : _a, groupStyles = props.groupStyles, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, internalInfiniteScrollProps = props.internalInfiniteScrollProps, _d = props.messageActions, messageActions = _d === void 0 ? Object.keys(MESSAGE_ACTIONS) : _d, _e = props.messages, messages = _e === void 0 ? [] : _e, notifications = props.notifications, _f = props.noGroupByUser, noGroupByUser = _f === void 0 ? false : _f, _g = props.pinPermissions, pinPermissions = _g === void 0 ? defaultPinPermissions : _g, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
         _h = props.returnAllReadData, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
-        returnAllReadData = _h === void 0 ? false : _h, _j = props.threadList, threadList = _j === void 0 ? false : _j, _k = props.unsafeHTML, unsafeHTML = _k === void 0 ? false : _k, headerPosition = props.headerPosition, read = props.read, _l = props.messageLimit, messageLimit = _l === void 0 ? 100 : _l, loadMoreCallback = props.loadMore, loadMoreNewerCallback = props.loadMoreNewer, _m = props.hasMoreNewer, hasMoreNewer = _m === void 0 ? false : _m, suppressAutoscroll = props.suppressAutoscroll, highlightedMessageId = props.highlightedMessageId, _o = props.jumpToLatestMessage, jumpToLatestMessage = _o === void 0 ? function () { return Promise.resolve(); } : _o;
-        var _p = React__default["default"].useState(null), listElement = _p[0], setListElement = _p[1];
-        var _q = React__default["default"].useState(null), ulElement = _q[0], setUlElement = _q[1];
+        returnAllReadData = _h === void 0 ? false : _h, _j = props.threadList, threadList = _j === void 0 ? false : _j, _k = props.unsafeHTML, unsafeHTML = _k === void 0 ? false : _k, headerPosition = props.headerPosition, read = props.read, _l = props.renderMessages, renderMessages = _l === void 0 ? defaultRenderMessages : _l, _m = props.messageLimit, messageLimit = _m === void 0 ? 100 : _m, loadMoreCallback = props.loadMore, loadMoreNewerCallback = props.loadMoreNewer, _o = props.hasMoreNewer, hasMoreNewer = _o === void 0 ? false : _o, suppressAutoscroll = props.suppressAutoscroll, highlightedMessageId = props.highlightedMessageId, _p = props.jumpToLatestMessage, jumpToLatestMessage = _p === void 0 ? function () { return Promise.resolve(); } : _p;
+        var _q = React__default["default"].useState(null), listElement = _q[0], setListElement = _q[1];
+        var _r = React__default["default"].useState(null), ulElement = _r[0], setUlElement = _r[1];
         var customClasses = useChatContext('MessageList').customClasses;
-        var _r = useComponentContext('MessageList'), _s = _r.EmptyStateIndicator, EmptyStateIndicator$1 = _s === void 0 ? EmptyStateIndicator : _s, _t = _r.LoadingIndicator, LoadingIndicator$1 = _t === void 0 ? LoadingIndicator : _t, _u = _r.MessageListNotifications, MessageListNotifications$1 = _u === void 0 ? MessageListNotifications : _u, _v = _r.MessageNotification, MessageNotification$1 = _v === void 0 ? MessageNotification : _v, _w = _r.TypingIndicator, TypingIndicator$1 = _w === void 0 ? TypingIndicator : _w;
+        var _s = useComponentContext('MessageList'), _t = _s.EmptyStateIndicator, EmptyStateIndicator$1 = _t === void 0 ? EmptyStateIndicator : _t, _u = _s.LoadingIndicator, LoadingIndicator$1 = _u === void 0 ? LoadingIndicator : _u, _v = _s.MessageListNotifications, MessageListNotifications$1 = _v === void 0 ? MessageListNotifications : _v, _w = _s.MessageNotification, MessageNotification$1 = _w === void 0 ? MessageNotification : _w, _x = _s.TypingIndicator, TypingIndicator$1 = _x === void 0 ? TypingIndicator : _x;
         var loadMoreScrollThreshold = (internalInfiniteScrollProps === null || internalInfiniteScrollProps === void 0 ? void 0 : internalInfiniteScrollProps.threshold) || 250;
-        var _x = useScrollLocationLogic({
+        var _y = useScrollLocationLogic({
             hasMoreNewer: hasMoreNewer,
             listElement: listElement,
             loadMoreScrollThreshold: loadMoreScrollThreshold,
             messages: messages,
             scrolledUpThreshold: props.scrolledUpThreshold,
             suppressAutoscroll: suppressAutoscroll,
-        }), hasNewMessages = _x.hasNewMessages, isMessageListScrolledToBottom = _x.isMessageListScrolledToBottom, onScroll = _x.onScroll, scrollToBottom = _x.scrollToBottom, wrapperRect = _x.wrapperRect;
-        var _y = useEnrichedMessages({
+        }), hasNewMessages = _y.hasNewMessages, isMessageListScrolledToBottom = _y.isMessageListScrolledToBottom, onScroll = _y.onScroll, scrollToBottom = _y.scrollToBottom, wrapperRect = _y.wrapperRect;
+        var _z = useEnrichedMessages({
             channel: channel,
             disableDateSeparator: disableDateSeparator,
             groupStyles: groupStyles,
@@ -53787,7 +53920,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             hideNewMessageSeparator: hideNewMessageSeparator,
             messages: messages,
             noGroupByUser: noGroupByUser,
-        }), messageGroupStyles = _y.messageGroupStyles, enrichedMessages = _y.messages;
+        }), messageGroupStyles = _z.messageGroupStyles, enrichedMessages = _z.messages;
         var elements = useMessageListElements({
             enrichedMessages: enrichedMessages,
             internalMessageProps: {
@@ -53818,6 +53951,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             },
             messageGroupStyles: messageGroupStyles,
             read: read,
+            renderMessages: renderMessages,
             returnAllReadData: returnAllReadData,
             threadList: threadList,
         });
@@ -53856,6 +53990,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 var element = ulElement === null || ulElement === void 0 ? void 0 : ulElement.querySelector("[data-message-id='".concat(highlightedMessageId, "']"));
                 element === null || element === void 0 ? void 0 : element.scrollIntoView({ block: 'center' });
             }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [highlightedMessageId]);
         var showEmptyStateIndicator = elements.length === 0 && !threadList;
         return (React__default["default"].createElement(MessageListContextProvider, { value: { listElement: listElement, scrollToBottom: scrollToBottom } },
@@ -53923,6 +54058,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off(observedEvent, handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [activeChannel, isMessageListScrolledToBottom, observedEvent, replyCount, thread]);
         React$2.useEffect(function () {
             if (isMessageListScrolledToBottom) {
@@ -55233,6 +55369,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return 0;
             // TODO: there's a bug here, the messages prop is the same array instance (something mutates it)
             // that's why the second dependency is necessary
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [firstRealMessageIndex, messages, messages === null || messages === void 0 ? void 0 : messages.length]);
         return numItemsPrepended;
     }
@@ -55257,6 +55394,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 initialFocusRegistered.current = true;
                 recheckForNewOwnMessage();
             }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [messages, messages === null || messages === void 0 ? void 0 : messages.length]);
         return recheckForNewOwnMessage;
     }
@@ -55276,6 +55414,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             if (separateGiphyPreview)
                 client.on('message.new', handleEvent);
             return function () { return client.off('message.new', handleEvent); };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [separateGiphyPreview]);
         return { giphyPreviewMessage: giphyPreviewMessage, setGiphyPreviewMessage: setGiphyPreviewMessage };
     };
@@ -55325,6 +55464,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 window.removeEventListener('focus', scrollToBottomIfConfigured);
                 window.removeEventListener('blur', resetNewMessagesReceivedInBackground);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [scrollToBottomIfConfigured]);
     };
 
@@ -55423,7 +55563,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         return messages.length - 1;
     }
     var VirtualizedMessageListWithContext = function (props) {
-        var additionalMessageInputProps = props.additionalMessageInputProps, _a = props.additionalVirtuosoProps, additionalVirtuosoProps = _a === void 0 ? {} : _a, channel = props.channel, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageActions = props.customMessageActions, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _b = props.disableDateSeparator, disableDateSeparator = _b === void 0 ? true : _b, groupStyles = props.groupStyles, hasMore = props.hasMore, hasMoreNewer = props.hasMoreNewer, head = props.head, _c = props.hideDeletedMessages, hideDeletedMessages = _c === void 0 ? false : _c, _d = props.hideNewMessageSeparator, hideNewMessageSeparator = _d === void 0 ? false : _d, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, MessageUIComponentFromProps = props.Message, messageActions = props.messageActions, _e = props.messageLimit, messageLimit = _e === void 0 ? 100 : _e, messages = props.messages, notifications = props.notifications, 
+        var additionalMessageInputProps = props.additionalMessageInputProps, _a = props.additionalVirtuosoProps, additionalVirtuosoProps = _a === void 0 ? {} : _a, channel = props.channel, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageActions = props.customMessageActions, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _b = props.disableDateSeparator, disableDateSeparator = _b === void 0 ? true : _b, groupStyles = props.groupStyles, hasMoreNewer = props.hasMoreNewer, head = props.head, _c = props.hideDeletedMessages, hideDeletedMessages = _c === void 0 ? false : _c, _d = props.hideNewMessageSeparator, hideNewMessageSeparator = _d === void 0 ? false : _d, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, MessageUIComponentFromProps = props.Message, messageActions = props.messageActions, _e = props.messageLimit, messageLimit = _e === void 0 ? 100 : _e, messages = props.messages, notifications = props.notifications, 
         // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
         _f = props.overscan, 
         // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
@@ -55457,6 +55597,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 setGiphyPreviewMessage: setGiphyPreviewMessage,
                 userId: client.userID || '',
             });
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [
             disableDateSeparator,
             hideDeletedMessages,
@@ -55486,6 +55627,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             }, {});
         }, 
         // 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 _w = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer), atBottom = _w.atBottom, isMessageListScrolledToBottom = _w.isMessageListScrolledToBottom, newMessagesNotification = _w.newMessagesNotification, setIsMessageListScrolledToBottom = _w.setIsMessageListScrolledToBottom, setNewMessagesNotification = _w.setNewMessagesNotification;
         var scrollToBottom = React$2.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -55535,19 +55677,14 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var atBottomStateChange = function (isAtBottom) {
             atBottom.current = isAtBottom;
             setIsMessageListScrolledToBottom(isAtBottom);
-            if (isAtBottom && newMessagesNotification) {
-                setNewMessagesNotification(false);
+            if (isAtBottom) {
+                loadMoreNewer === null || loadMoreNewer === void 0 ? void 0 : loadMoreNewer(messageLimit);
+                setNewMessagesNotification === null || setNewMessagesNotification === void 0 ? void 0 : setNewMessagesNotification(false);
             }
         };
-        var startReached = function () {
-            if (hasMore && loadMore) {
-                loadMore(messageLimit);
-            }
-        };
-        var endReached = function () {
-            if (hasMoreNewer && loadMoreNewer) {
-                loadMoreNewer(messageLimit);
-            }
+        var atTopStateChange = function (isAtTop) {
+            if (isAtTop)
+                loadMore === null || loadMore === void 0 ? void 0 : loadMore(messageLimit);
         };
         React$2.useEffect(function () {
             var _a;
@@ -55557,13 +55694,14 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                     (_a = virtuoso.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex({ align: 'center', index: index });
                 }
             }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [highlightedMessageId]);
         if (!processedMessages)
             return null;
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(MessageListMainPanel, null,
                 React__default["default"].createElement("div", { className: (customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualizedMessageList) || 'str-chat__virtual-list' },
-                    React__default["default"].createElement(on$1, __assign({ atBottomStateChange: atBottomStateChange, atBottomThreshold: 200, className: 'str-chat__message-list-scroll', components: __assign({ EmptyPlaceholder: EmptyPlaceholder, Footer: Footer, Header: Header, Item: Item$1 }, virtuosoComponentsFromProps), computeItemKey: computeItemKey, context: {
+                    React__default["default"].createElement(on$1, __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$1 }, virtuosoComponentsFromProps), computeItemKey: computeItemKey, context: {
                             additionalMessageInputProps: additionalMessageInputProps,
                             closeReactionSelectorOnClick: closeReactionSelectorOnClick,
                             customClasses: customClasses,
@@ -55583,7 +55721,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                             shouldGroupByUser: shouldGroupByUser,
                             threadList: threadList,
                             virtuosoRef: virtuoso,
-                        }, endReached: endReached, firstItemIndex: calculateFirstItemIndex(numItemsPrepended), followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId), itemContent: messageRenderer, itemSize: fractionalItemSize, key: messageSetKey, overscan: overscan, ref: virtuoso, startReached: startReached, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, overridingVirtuosoProps, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {}))))),
+                        }, firstItemIndex: calculateFirstItemIndex(numItemsPrepended), followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId), itemContent: messageRenderer, itemSize: fractionalItemSize, key: messageSetKey, overscan: overscan, ref: virtuoso, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, overridingVirtuosoProps, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {}))))),
             React__default["default"].createElement(MessageListNotifications$1, { hasNewMessages: newMessagesNotification, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification$1, notifications: notifications, scrollToBottom: scrollToBottom, threadList: threadList }),
             giphyPreviewMessage && React__default["default"].createElement(GiphyPreviewMessage$1, { message: giphyPreviewMessage })));
     };
@@ -55667,6 +55805,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 // FIXME: integrators can customize channel query options but cannot customize channel.getReplies() options
                 loadMoreThread();
             }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         if (!thread)
             return null;
@@ -79973,6 +80112,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
     exports.defaultDateTimeParser = defaultDateTimeParser;
     exports.defaultPinPermissions = defaultPinPermissions;
     exports.defaultReactionOptions = defaultReactionOptions;
+    exports.defaultRenderMessages = defaultRenderMessages;
     exports.defaultScrollToItem = defaultScrollToItem;
     exports.defaultTimestampFormat = defaultTimestampFormat;
     exports.defaultTranslatorFunction = defaultTranslatorFunction;