stream-chat-react 11.3.0 → 11.4.0

package/dist/index.cjs.js

@@ -163,6 +163,7 @@ var useAudioController = function () {
         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);
         };
@@ -317,7 +318,9 @@ var ModalGallery = function (props) {
                 source: imageSrc,
             };
         });
-    }, [images]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [images]);
     return (React__default["default"].createElement(ImageGallery__default["default"], { items: formattedArray, renderItem: renderItem, showIndex: true, showPlayButton: false, showThumbnails: false, startIndex: index }));
 };
 
@@ -3226,6 +3229,7 @@ var MediaContainer = function (props) {
             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%' })));
@@ -3261,6 +3265,7 @@ var ATTACHMENT_GROUPS_ORDER = [
  */
 var Attachment = function (props) {
     var attachments = props.attachments;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     var groupedAttachments = React.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 icons.__spreadArray(icons.__spreadArray([], acc, true), groupedAttachments[groupName], true); }, [])));
 };
@@ -31622,7 +31627,9 @@ var useCreateChannelStateContext = function (value) {
         watcher_count: watcher_count,
         watcherCount: watcherCount,
         watchers: watchers,
-    }); }, [
+    }); }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
         channelId,
         debounceURLEnrichmentMs,
         enrichURLForPreview,
@@ -31659,7 +31666,9 @@ var useCreateTypingContext = function (value) {
     var typingValue = Object.keys(typing || {}).join();
     var typingContext = React.useMemo(function () { return ({
         typing: typing,
-    }); }, [typingValue]);
+    }); }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [typingValue]);
     return typingContext;
 };
 
@@ -32175,29 +32184,15 @@ var CustomMessageActionsList = function (props) {
     })));
 };
 
-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;
+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 = icons.__rest(props, ["getMessageActions", "handleDelete", "handleEdit", "handleFlag", "handleMute", "handlePin", "isUserMuted", "mine", "open"]);
     var _b = icons.useComponentContext('MessageActionsBox').CustomMessageActionsList, CustomMessageActionsList$1 = _b === void 0 ? CustomMessageActionsList : _b;
     var setQuotedMessage = icons.useChannelActionContext('MessageActionsBox').setQuotedMessage;
-    var _c = icons.useMessageContext('MessageActionsBox'), customMessageActions = _c.customMessageActions, message = _c.message, messageListRect = _c.messageListRect;
+    var _c = icons.useMessageContext('MessageActionsBox'), customMessageActions = _c.customMessageActions, message = _c.message;
     var t = icons.useTranslationContext('MessageActionsBox').t;
-    var _d = React.useState(false), reverse = _d[0], setReverse = _d[1];
     var messageActions = getMessageActions();
-    var checkIfReverse = React.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
@@ -32209,12 +32204,10 @@ var UnMemoizedMessageActionsBox = function (props) {
         }
     };
     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", icons.__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'))),
@@ -32223,12 +32216,43 @@ var UnMemoizedMessageActionsBox = function (props) {
             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);
 
+function useMessageActionsBoxPopper(_a) {
+    var open = _a.open, placement = _a.placement, referenceElement = _a.referenceElement;
+    var popperElementRef = React.useRef(null);
+    var _b = icons.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.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,
+    };
+}
+
 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 = icons.useChatContext('MessageActions').mutes;
@@ -32239,6 +32263,7 @@ var MessageActions = function (props) {
     var handleMute = propHandleMute || contextHandleMute;
     var handlePin = propHandlePin || contextHandlePin;
     var message = propMessage || contextMessage;
+    var isMine = mine ? mine() : isMyMessage();
     var _d = React.useState(false), actionsBoxOpen = _d[0], setActionsBoxOpen = _d[1];
     var isMuted = React.useCallback(function () { return isUserMuted(message, mutes); }, [message, mutes]);
     var hideOptions = React.useCallback(function (event) {
@@ -32269,11 +32294,17 @@ var MessageActions = function (props) {
             document.removeEventListener('keyup', hideOptions);
         };
     }, [actionsBoxOpen, hideOptions]);
+    var actionsBoxButtonRef = React.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, { 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(MessageActionsBox, icons.__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) {
@@ -32440,6 +32471,7 @@ var UnMemoizedMessageTextComponent = function (props) {
     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.useMemo(function () { return renderText$1(messageTextToRender, message.mentioned_users); }, [
         message.mentioned_users,
         messageTextToRender,
@@ -32885,6 +32917,7 @@ var useUserTrigger = function (params) {
         });
         return Object.values(uniqueUsers);
     }, [members, watchers]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     var queryMembersThrottled = React.useCallback(throttle__default["default"](function (query, onReady) { return icons.__awaiter(void 0, void 0, void 0, function () {
         var response, users, error_1;
         return icons.__generator(this, function (_a) {
@@ -33194,6 +33227,7 @@ var MessageInputFlat = function () {
             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));
 };
@@ -33361,6 +33395,7 @@ var useImageUploads = function (props, state, dispatch) {
     var removeImage = React.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.useCallback(function (id) { return icons.__awaiter(void 0, void 0, void 0, function () {
         var img, file, canUpload, response, error_1, errorMessage, alreadyRemoved;
@@ -33436,7 +33471,9 @@ var useImageUploads = function (props, state, dispatch) {
                     return [2 /*return*/];
             }
         });
-    }); }, [imageUploads, channel, doImageUploadRequest, errorHandler, removeImage]);
+    }); }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [imageUploads, channel, doImageUploadRequest, errorHandler, removeImage]);
     React.useEffect(function () {
         var upload = Object.values(imageUploads).find(function (imageUpload) { return imageUpload.state === 'uploading' && imageUpload.file; });
         if (!upload)
@@ -33458,10 +33495,12 @@ var useFileUploads = function (props, state, dispatch) {
     var t = icons.useTranslationContext('useFileUploads').t;
     var uploadFile = React.useCallback(function (id) {
         dispatch({ id: id, state: 'uploading', type: 'setFileUpload' });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var removeFile = React.useCallback(function (id) {
         // TODO: cancel upload if still uploading
         dispatch({ id: id, type: 'removeFileUpload' });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     React.useEffect(function () {
         (function () { return icons.__awaiter(void 0, void 0, void 0, function () {
@@ -33533,6 +33572,7 @@ var useFileUploads = function (props, state, dispatch) {
                 }
             });
         }); })();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [fileUploads, channel, doFileUploadRequest, errorHandler, removeFile]);
     return {
         removeFile: removeFile,
@@ -33584,7 +33624,9 @@ var useAttachments = function (props, state, dispatch, textareaRef) {
             }
         });
         (_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,
@@ -33635,7 +33677,9 @@ var useMessageInputText = function (props, state, dispatch, findAndEnqueueURLsTo
             },
             type: 'setText',
         });
-    }, [additionalTextareaProps, newCursorPosition, textareaRef]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [additionalTextareaProps, newCursorPosition, textareaRef]);
     React.useEffect(function () {
         var textareaElement = textareaRef.current;
         if (textareaElement && newCursorPosition.current !== undefined) {
@@ -33658,7 +33702,9 @@ var useMessageInputText = function (props, state, dispatch, findAndEnqueueURLsTo
         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,
@@ -33892,7 +33938,9 @@ var usePasteHandler = function (uploadNewFiles, insertText, isUploadEnabled, fin
                 }
             });
         }); })(clipboardEvent);
-    }, [insertText, uploadNewFiles]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [insertText, uploadNewFiles]);
     return { onPaste: onPaste };
 };
 
@@ -33916,7 +33964,10 @@ var useLinkPreviews = function (_a) {
             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.useCallback(debounce__default["default"](function (text, mode) {
         if (mode === void 0) { mode = exports.SetLinkPreviewMode.SET; }
         var urls = findURLFn
@@ -33982,6 +34033,7 @@ var useLinkPreviews = function (_a) {
                 });
             });
         });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [shouldDiscardEnrichQueries, linkPreviews]);
     return {
         cancelURLEnrichment: cancelURLEnrichment,
@@ -34273,7 +34325,9 @@ var useCreateMessageInputContext = function (value) {
         uploadImage: uploadImage,
         uploadNewFiles: uploadNewFiles,
         useMentionsTransliteration: useMentionsTransliteration,
-    }); }, [
+    }); }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
         cancelURLEnrichment,
         cooldownInterval,
         cooldownRemaining,
@@ -34356,6 +34410,7 @@ var MessageInputSmall = function () {
             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 },
@@ -34514,8 +34569,11 @@ var useProcessReactions = function (params) {
     var message = icons.useMessageContext('useProcessReactions').message;
     var contextReactionOptions = icons.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.useCallback(function (reactionType) { return ownReactions.find(function (reaction) { return reaction.type === reactionType; }); }, [ownReactions]);
     var getEmojiByReactionType = React.useCallback(function (reactionType) { return reactionOptions.find(function (_a) {
@@ -35025,7 +35083,7 @@ var getGroupStyles = function (message, previousMessage, nextMessage, noGroupByU
 //  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) {
@@ -35199,6 +35257,60 @@ var addResizingParamsToUrl = function (resizeDimensions, url) {
     url.searchParams.set('w', resizeDimensions.width.toString());
 };
 
+/**
+ * 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 = icons.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(icons.__assign(icons.__assign({}, getDateOptions), { format: 'dddd' })),
+                    " "),
+                "at ",
+                getDateString(icons.__assign(icons.__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(icons.__assign(icons.__assign({}, getDateOptions), { format: 'LT' }))))));
+    }
+    return null;
+};
+var EventComponent = React__default["default"].memo(UnMemoizedEventComponent);
+
+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 = icons.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);
+
+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 = icons.useChatContext('Channel'), contextChannel = _c.channel, channelsQueryState = _c.channelsQueryState, customClasses = _c.customClasses, theme = _c.theme;
@@ -35420,6 +35532,7 @@ var ChannelInner = function (props) {
             client.off('user.deleted', handleEvent);
             notificationTimeouts.forEach(clearTimeout);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         channel.cid,
         channelQueryOptions,
@@ -35438,14 +35551,12 @@ var ChannelInner = function (props) {
     /** MESSAGE */
     // Adds a temporary notification to message list, will be removed after 5 seconds
     var addNotification = makeAddNotifications(setNotifications, notificationTimeouts);
-    var loadMoreFinished = debounce__default["default"](function (hasMore, messages) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var loadMoreFinished = React.useCallback(debounce__default["default"](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 icons.__awaiter(void 0, void 0, void 0, function () {
@@ -35489,12 +35600,12 @@ var ChannelInner = function (props) {
     var loadMoreNewer = function (limit) {
         if (limit === void 0) { limit = 100; }
         return icons.__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 icons.__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)
@@ -35518,8 +35629,12 @@ var ChannelInner = function (props) {
                         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];
                 }
             });
@@ -35604,7 +35719,6 @@ var ChannelInner = function (props) {
             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 icons.__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;
@@ -35724,17 +35838,18 @@ var ChannelInner = function (props) {
         event === null || event === void 0 ? void 0 : event.preventDefault();
         dispatch({ type: 'closeThread' });
     };
-    var loadMoreThreadFinished = debounce__default["default"](function (threadHasMore, threadMessages) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var loadMoreThreadFinished = React.useCallback(debounce__default["default"](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 icons.__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 icons.__generator(this, function (_b) {
                 switch (_b.label) {
@@ -35743,23 +35858,23 @@ var ChannelInner = function (props) {
                         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];
@@ -35796,7 +35911,9 @@ var ChannelInner = function (props) {
         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,
@@ -35819,7 +35936,7 @@ var ChannelInner = function (props) {
             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,
@@ -35837,7 +35954,7 @@ var ChannelInner = function (props) {
             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,
@@ -35854,7 +35971,9 @@ var ChannelInner = function (props) {
             TypingIndicator: props.TypingIndicator,
             VirtualMessage: props.VirtualMessage,
         });
-    }, [props.reactionOptions]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.reactionOptions]);
     var typingContextValue = useCreateTypingContext({
         typing: typing,
     });
@@ -35968,6 +36087,7 @@ var useChannelPreviewInfo = function (props) {
         return function () {
             client.off('user.updated', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return {
         displayImage: overrideImage || displayImage,
@@ -36068,6 +36188,7 @@ var useChannelDeletedListener = function (setChannels, customHandler) {
         return function () {
             client.off('channel.deleted', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [customHandler]);
 };
 
@@ -36093,6 +36214,7 @@ var useChannelHiddenListener = function (setChannels, customHandler) {
         return function () {
             client.off('channel.hidden', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [customHandler]);
 };
 
@@ -36112,6 +36234,7 @@ var useChannelTruncatedListener = function (setChannels, customHandler, forceUpd
         return function () {
             client.off('channel.truncated', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [customHandler]);
 };
 
@@ -36140,6 +36263,7 @@ var useChannelUpdatedListener = function (setChannels, customHandler, forceUpdat
         return function () {
             client.off('channel.updated', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [customHandler]);
 };
 
@@ -36173,6 +36297,7 @@ var useChannelVisibleListener = function (setChannels, customHandler) {
         return function () {
             client.off('channel.visible', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [customHandler]);
 };
 
@@ -36188,6 +36313,7 @@ var useConnectionRecoveredListener = function (forceUpdate) {
         return function () {
             client.off('connection.recovered', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 };
 
@@ -36229,6 +36355,7 @@ var useMessageNewListener = function (setChannels, customHandler, lockChannelOrd
         return function () {
             client.off('message.new', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [lockChannelOrder]);
 };
 
@@ -36289,6 +36416,7 @@ var useNotificationAddedToChannelListener = function (setChannels, customHandler
         return function () {
             client.off('notification.added_to_channel', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [customHandler]);
 };
 
@@ -36324,6 +36452,7 @@ var useNotificationMessageNewListener = function (setChannels, customHandler, al
         return function () {
             client.off('notification.message_new', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [customHandler]);
 };
 
@@ -36342,6 +36471,7 @@ var useNotificationRemovedFromChannelListener = function (setChannels, customHan
         return function () {
             client.off('notification.removed_from_channel', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [customHandler]);
 };
 
@@ -36361,6 +36491,7 @@ var usePaginatedChannels = function (client, filters, sort, options, activeChann
     // memoize props
     var filterString = React.useMemo(function () { return JSON.stringify(filters); }, [filters]);
     var sortString = React.useMemo(function () { return JSON.stringify(sort); }, [sort]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     var queryChannels = function (queryType) { return icons.__awaiter(void 0, void 0, void 0, function () {
         var offset, newOptions, channelQueryResponse, newChannels, err_1;
         var _a;
@@ -36429,6 +36560,7 @@ var usePaginatedChannels = function (client, filters, sort, options, activeChann
     }, [client, throttleRecover]);
     React.useEffect(function () {
         queryChannels('reload');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [filterString, sortString]);
     return {
         channels: channels,
@@ -36459,6 +36591,7 @@ var useUserPresenceChangedListener = function (setChannels) {
         return function () {
             client.off('user.presence.changed', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 };
 
@@ -36501,6 +36634,7 @@ var useIsChannelMuted = function (channel) {
         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;
 };
@@ -36584,6 +36718,7 @@ var ChannelPreview = function (props) {
         };
         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.useCallback(function () {
         if (isActive || muted) {
@@ -36608,6 +36743,7 @@ var ChannelPreview = function (props) {
             channel.off('message.updated', handleEvent);
             channel.off('message.deleted', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [refreshUnreadCount, channelUpdateCount]);
     if (!Preview)
         return null;
@@ -36664,6 +36800,7 @@ var useChannelSearch = function (_a) {
         };
         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.useEffect(function () {
         if (!inputRef.current || disabled)
@@ -36675,8 +36812,10 @@ var useChannelSearch = function (_a) {
         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.useCallback(function (result) { return icons.__awaiter(void 0, void 0, void 0, function () {
         var selectedChannel, newChannel;
@@ -36715,7 +36854,9 @@ var useChannelSearch = function (_a) {
                     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.useCallback(function (text) { return icons.__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;
@@ -36763,6 +36904,7 @@ var useChannelSearch = function (_a) {
             }
         });
     }); }, [client, searchForChannels, searchQueryParams]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     var scheduleGetChannels = React.useCallback(debounce__default["default"](getChannels, searchDebounceIntervalMs), [
         getChannels,
         searchDebounceIntervalMs,
@@ -36870,11 +37012,13 @@ var SearchBar = function (props) {
             (_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.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.useCallback(function () { return setMenuIsOpen(false); }, []);
     return (React__default["default"].createElement("div", { className: 'str-chat__channel-search-bar', "data-testid": 'search-bar', ref: searchBarRef },
@@ -36956,7 +37100,9 @@ var SearchResults = function (props) {
                 return setFocusedResult(undefined);
             }
         }
-    }, [focusedResult]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [focusedResult]);
     React.useEffect(function () {
         document.addEventListener('keydown', handleKeyDown, false);
         return function () { return document.removeEventListener('keydown', handleKeyDown); };
@@ -37037,6 +37183,7 @@ var UnMemoizedLoadMoreButton = function (_a) {
     var loading = typeof isLoading !== 'undefined' ? isLoading : refreshing;
     React.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)));
@@ -37048,6 +37195,7 @@ var UnMemoizedLoadMorePaginator = function (props) {
     var loadingState = typeof isLoading !== 'undefined' ? isLoading : refreshing;
     React.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,
@@ -37119,11 +37267,13 @@ var UnMemoizedChannelList = function (props) {
             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.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;
@@ -37151,6 +37301,7 @@ var UnMemoizedChannelList = function (props) {
             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 = {
@@ -37184,7 +37335,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '11.3.0';
+var version = '11.4.0';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -37226,6 +37377,7 @@ var useChat = function (_a) {
         };
         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.useEffect(function () {
         var _a;
@@ -37241,6 +37393,7 @@ var useChat = function (_a) {
         streami18n.getTranslators().then(function (translator) {
             setTranslators(icons.__assign(icons.__assign({}, translator), { userLanguage: userLanguage || defaultLanguage }));
         });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [i18nInstance]);
     var setActiveChannel = React.useCallback(function (activeChannel, watchers, event) {
         if (watchers === void 0) { watchers = {}; }
@@ -37302,7 +37455,9 @@ var useCreateChatContext = function (value) {
         theme: theme,
         themeVersion: themeVersion,
         useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
-    }); }, [
+    }); }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
         channelCid,
         channelsQueryError,
         channelsQueryInProgress,
@@ -37399,59 +37554,6 @@ var Chat = function (props) {
         React__default["default"].createElement(icons.TranslationProvider, { value: translators }, children)));
 };
 
-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 = icons.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);
-
-/**
- * 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 = icons.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(icons.__assign(icons.__assign({}, getDateOptions), { format: 'dddd' })),
-                    " "),
-                "at ",
-                getDateString(icons.__assign(icons.__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(icons.__assign(icons.__assign({}, getDateOptions), { format: 'LT' }))))));
-    }
-    return null;
-};
-var EventComponent = React__default["default"].memo(UnMemoizedEventComponent);
-
 /**
  * Prevents Chrome hangups
  * See: https://stackoverflow.com/questions/47524205/random-high-content-download-time-in-chrome/47684257#47684257
@@ -37507,6 +37609,7 @@ var InfiniteScroll = function (props) {
             [{ hasMore: hasMore }, { hasPreviousPage: hasPreviousPage }],
             [{ loadMore: loadMore }, { loadPreviousPage: loadPreviousPage }],
         ], 'InfiniteScroll');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     React.useLayoutEffect(function () {
         var _a;
@@ -37860,7 +37963,9 @@ var useReactionHandler = function (message) {
         var newOwnReactions = add
             ? icons.__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 icons.__assign(icons.__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 ({
@@ -37966,7 +38071,9 @@ var useReactionClick = function (message, reactionSelectorRef, messageWrapperRef
             return;
         }
         setShowDetailedReactions(false);
-    }, [setShowDetailedReactions, reactionSelectorRef]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setShowDetailedReactions, reactionSelectorRef]);
     React.useEffect(function () {
         var messageWrapper = messageWrapperRef === null || messageWrapperRef === void 0 ? void 0 : messageWrapperRef.current;
         if (showDetailedReactions && !hasListener.current) {
@@ -38245,7 +38352,9 @@ var useEnrichedMessages = function (args) {
                 acc[message.id] = style;
             return acc;
         }, {});
-    }, [messagesWithDates, noGroupByUser]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [messagesWithDates, noGroupByUser]);
     return { messageGroupStyles: messageGroupStyles, messages: messagesWithDates };
 };
 
@@ -38260,9 +38369,9 @@ var useLastReadData = function (props) {
 };
 
 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 = icons.useChatContext('useMessageListElements'), client = _a.client, customClasses = _a.customClasses;
-    var _b = icons.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 = icons.useComponentContext('useMessageListElements');
     // get the readData, but only for messages submitted by the user themselves
     var readData = useLastReadData({
         messages: enrichedMessages,
@@ -38270,34 +38379,28 @@ var useMessageListElements = function (props) {
         returnAllReadData: returnAllReadData,
         userID: client.userID,
     });
-    var lastReceivedId = React.useMemo(function () { return getLastReceived(enrichedMessages); }, [enrichedMessages]);
+    var lastReceivedMessageId = React.useMemo(function () { return getLastReceived(enrichedMessages); }, [
+        enrichedMessages,
+    ]);
     var elements = React.useMemo(function () {
-        return enrichedMessages.map(function (message) {
-            if (message.customType === CUSTOM_MESSAGE_TYPE.date &&
-                message.date &&
-                icons.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, icons.__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: icons.__assign(icons.__assign({}, internalMessageProps), { threadList: threadList }),
         });
-    }, [
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
         enrichedMessages,
         internalMessageProps,
-        lastReceivedId,
+        lastReceivedMessageId,
         messageGroupStyles,
         readData,
+        renderMessages,
         threadList,
     ]);
     return elements;
@@ -38354,6 +38457,7 @@ function useMessageListScrollManager(params) {
         }
         messages.current = newMessages;
         measures.current = newMeasures;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [measures, messages, params.messages]);
     return function (scrollTopValue) {
         scrollTop.current = scrollTopValue;
@@ -38383,6 +38487,7 @@ var useScrollLocationLogic = function (params) {
             setWrapperRect(listElement.getBoundingClientRect());
             scrollToBottom();
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [listElement, hasMoreNewer]);
     var updateScrollTop = useMessageListScrollManager({
         loadMoreScrollThreshold: loadMoreScrollThreshold,
@@ -38533,24 +38638,50 @@ var MessageListMainPanel = function (_a) {
     return React__default["default"].createElement(React__default["default"].Fragment, null, children);
 };
 
+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 &&
+            icons.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, icons.__assign({ groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [] }, messageProps))));
+    });
+}
+
 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 = icons.useChatContext('MessageList').customClasses;
-    var _r = icons.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 = icons.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,
@@ -38559,7 +38690,7 @@ var MessageListWithContext = function (props) {
         hideNewMessageSeparator: hideNewMessageSeparator,
         messages: messages,
         noGroupByUser: noGroupByUser,
-    }), messageGroupStyles = _y.messageGroupStyles, enrichedMessages = _y.messages;
+    }), messageGroupStyles = _z.messageGroupStyles, enrichedMessages = _z.messages;
     var elements = useMessageListElements({
         enrichedMessages: enrichedMessages,
         internalMessageProps: {
@@ -38590,6 +38721,7 @@ var MessageListWithContext = function (props) {
         },
         messageGroupStyles: messageGroupStyles,
         read: read,
+        renderMessages: renderMessages,
         returnAllReadData: returnAllReadData,
         threadList: threadList,
     });
@@ -38628,6 +38760,7 @@ var MessageListWithContext = function (props) {
             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(icons.MessageListContextProvider, { value: { listElement: listElement, scrollToBottom: scrollToBottom } },
@@ -38695,6 +38828,7 @@ var UnMemoizedScrollToBottomButton = function (props) {
         return function () {
             client.off(observedEvent, handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [activeChannel, isMessageListScrolledToBottom, observedEvent, replyCount, thread]);
     React.useEffect(function () {
         if (isMessageListScrolledToBottom) {
@@ -38805,6 +38939,7 @@ function usePrependedMessagesCount(messages, hasDateSeparator) {
         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;
 }
@@ -38829,6 +38964,7 @@ function useShouldForceScrollToBottom(messages, currentUserId) {
             initialFocusRegistered.current = true;
             recheckForNewOwnMessage();
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [messages, messages === null || messages === void 0 ? void 0 : messages.length]);
     return recheckForNewOwnMessage;
 }
@@ -38846,6 +38982,7 @@ var useGiphyPreview = function (separateGiphyPreview) {
         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 };
 };
@@ -38895,6 +39032,7 @@ var useScrollToBottomOnNewMessage = function (_a) {
             window.removeEventListener('focus', scrollToBottomIfConfigured);
             window.removeEventListener('blur', resetNewMessagesReceivedInBackground);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [scrollToBottomIfConfigured]);
 };
 
@@ -38991,7 +39129,7 @@ function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
     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
@@ -39025,6 +39163,7 @@ var VirtualizedMessageListWithContext = function (props) {
             setGiphyPreviewMessage: setGiphyPreviewMessage,
             userId: client.userID || '',
         });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         disableDateSeparator,
         hideDeletedMessages,
@@ -39054,6 +39193,7 @@ var VirtualizedMessageListWithContext = function (props) {
         }, {});
     }, 
     // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [processedMessages.length, shouldGroupByUser, groupStylesFn]);
     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.useCallback(function () { return icons.__awaiter(void 0, void 0, void 0, function () {
@@ -39103,19 +39243,14 @@ var VirtualizedMessageListWithContext = function (props) {
     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.useEffect(function () {
         var _a;
@@ -39125,13 +39260,14 @@ var VirtualizedMessageListWithContext = function (props) {
                 (_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(reactVirtuoso.Virtuoso, icons.__assign({ atBottomStateChange: atBottomStateChange, atBottomThreshold: 200, className: 'str-chat__message-list-scroll', components: icons.__assign({ EmptyPlaceholder: EmptyPlaceholder, Footer: Footer, Header: Header, Item: Item }, virtuosoComponentsFromProps), computeItemKey: computeItemKey, context: {
+                React__default["default"].createElement(reactVirtuoso.Virtuoso, icons.__assign({ atBottomStateChange: atBottomStateChange, atBottomThreshold: 100, atTopStateChange: atTopStateChange, atTopThreshold: 100, className: 'str-chat__message-list-scroll', components: icons.__assign({ EmptyPlaceholder: EmptyPlaceholder, Footer: Footer, Header: Header, Item: Item }, virtuosoComponentsFromProps), computeItemKey: computeItemKey, context: {
                         additionalMessageInputProps: additionalMessageInputProps,
                         closeReactionSelectorOnClick: closeReactionSelectorOnClick,
                         customClasses: customClasses,
@@ -39151,7 +39287,7 @@ var VirtualizedMessageListWithContext = function (props) {
                         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 })));
 };
@@ -39233,6 +39369,7 @@ var ThreadInner = function (props) {
             // 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;
@@ -39456,6 +39593,7 @@ exports.darkModeTheme = darkModeTheme;
 exports.defaultAllowedTagNames = defaultAllowedTagNames;
 exports.defaultPinPermissions = defaultPinPermissions;
 exports.defaultReactionOptions = defaultReactionOptions;
+exports.defaultRenderMessages = defaultRenderMessages;
 exports.defaultScrollToItem = defaultScrollToItem;
 exports.defaultTimestampFormat = defaultTimestampFormat;
 exports.emojiMarkdownPlugin = emojiMarkdownPlugin;