stream-chat-react 11.19.0 → 11.20.0

package/dist/{Window-8c5139ab.js → Window-06cc5899.js}

@@ -1190,6 +1190,7 @@ var DEFAULT_JUMP_TO_PAGE_SIZE = 100;
 var DEFAULT_THREAD_PAGE_SIZE = 50;
 var DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
 var DEFAULT_UPLOAD_SIZE_LIMIT_BYTES = 100 * 1024 * 1024; // 100 MB
+var DEFAULT_HIGHLIGHT_DURATION = 500;
 
 var accentsMap = {
     a: 'á|à|ã|â|À|Á|Ã|Â',
@@ -2825,7 +2826,7 @@ var CloseIconRound = function () { return (React__default["default"].createEleme
     React__default["default"].createElement("path", { clipRule: 'evenodd', d: 'M28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14ZM26 14C26 20.6274 20.6274 26 14 26C7.37258 26 2 20.6274 2 14C2 7.37258 7.37258 2 14 2C20.6274 2 26 7.37258 26 14ZM19.59 7L21 8.41L15.41 14L21 19.59L19.59 21L14 15.41L8.41 21L7 19.59L12.59 14L7 8.41L8.41 7L14 12.59L19.59 7Z', fill: 'white', fillRule: 'evenodd' }))); };
 
 var Modal = function (_a) {
-    var children = _a.children, onClose = _a.onClose, open = _a.open;
+    var children = _a.children, className = _a.className, onClose = _a.onClose, open = _a.open;
     var t = useTranslationContext('Modal').t;
     var themeVersion = useChatContext('Modal').themeVersion;
     var innerRef = React.useRef(null);
@@ -2849,7 +2850,7 @@ var Modal = function (_a) {
     }, [onClose, open]);
     if (!open)
         return null;
-    return (React__default["default"].createElement("div", { className: 'str-chat__modal str-chat__modal--open', onClick: handleClick },
+    return (React__default["default"].createElement("div", { className: clsx('str-chat__modal str-chat__modal--open', className), onClick: handleClick },
         React__default["default"].createElement($9bf71ea28793e738$export$20e40289641fbbb6, { autoFocus: true, contain: true },
             React__default["default"].createElement("button", { className: 'str-chat__modal__close-button', ref: closeRef, title: t('Close') },
                 themeVersion === '2' && React__default["default"].createElement(CloseIconRound, null),
@@ -2920,7 +2921,7 @@ var UnMemoizedGallery = function (props) {
     });
     return (React__default["default"].createElement("div", { className: className },
         renderImages,
-        React__default["default"].createElement(Modal, { onClose: function () { return setModalOpen(function (modalOpen) { return !modalOpen; }); }, open: modalOpen },
+        React__default["default"].createElement(Modal, { className: 'str-chat__gallery-modal', onClose: function () { return setModalOpen(function (modalOpen) { return !modalOpen; }); }, open: modalOpen },
             React__default["default"].createElement(ModalGallery$1, { images: images, index: index }))));
 };
 /**
@@ -2939,7 +2940,7 @@ var ImageComponent = function (props) {
     var toggleModal = function () { return setModalIsOpen(function (modalIsOpen) { return !modalIsOpen; }); };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(BaseImage$1, exports.__assign({ alt: fallback, className: 'str-chat__message-attachment--img', "data-testid": 'image-test', onClick: toggleModal, src: imageSrc, style: style, tabIndex: 0, title: fallback }, dimensions, (innerRef && { ref: innerRef }))),
-        React__default["default"].createElement(Modal, { onClose: toggleModal, open: modalIsOpen },
+        React__default["default"].createElement(Modal, { className: 'str-chat__image-modal', onClose: toggleModal, open: modalIsOpen },
             React__default["default"].createElement(ModalGallery$1, { images: [props], index: 0 }))));
 };
 
@@ -36564,7 +36565,7 @@ var MessageErrorIcon = function () { return (React__default["default"].createEle
 
 function MessageBounceModal(_a) {
     var MessageBouncePrompt = _a.MessageBouncePrompt, modalProps = __rest(_a, ["MessageBouncePrompt"]);
-    return (React__default["default"].createElement(Modal, exports.__assign({}, modalProps),
+    return (React__default["default"].createElement(Modal, exports.__assign({ className: 'str-chat__message-bounce-modal' }, modalProps),
         React__default["default"].createElement(MessageBounceProvider, null,
             React__default["default"].createElement(MessageBouncePrompt, { onClose: modalProps.onClose }))));
 }
@@ -36809,9 +36810,9 @@ var showMessageActionsBox = function (actions, inThread) {
     }
     return true;
 };
-var areMessagesEqual = function (prevMessage, nextMessage) {
+function areMessagesEqual(prevMessage, nextMessage) {
     var _a, _b, _c, _d, _e, _f;
-    return prevMessage.deleted_at === nextMessage.deleted_at &&
+    return (prevMessage.deleted_at === nextMessage.deleted_at &&
         ((_a = prevMessage.latest_reactions) === null || _a === void 0 ? void 0 : _a.length) === ((_b = nextMessage.latest_reactions) === null || _b === void 0 ? void 0 : _b.length) &&
         ((_c = prevMessage.own_reactions) === null || _c === void 0 ? void 0 : _c.length) === ((_d = nextMessage.own_reactions) === null || _d === void 0 ? void 0 : _d.length) &&
         prevMessage.pinned === nextMessage.pinned &&
@@ -36820,8 +36821,11 @@ var areMessagesEqual = function (prevMessage, nextMessage) {
         prevMessage.text === nextMessage.text &&
         prevMessage.type === nextMessage.type &&
         prevMessage.updated_at === nextMessage.updated_at &&
-        ((_e = prevMessage.user) === null || _e === void 0 ? void 0 : _e.updated_at) === ((_f = nextMessage.user) === null || _f === void 0 ? void 0 : _f.updated_at);
-};
+        ((_e = prevMessage.user) === null || _e === void 0 ? void 0 : _e.updated_at) === ((_f = nextMessage.user) === null || _f === void 0 ? void 0 : _f.updated_at) &&
+        Boolean(prevMessage.quoted_message) === Boolean(nextMessage.quoted_message) &&
+        (!prevMessage.quoted_message ||
+            areMessagesEqual(prevMessage.quoted_message, nextMessage.quoted_message)));
+}
 var areMessagePropsEqual = function (prevProps, nextProps) {
     var prevMessage = prevProps.message, prevMessageUI = prevProps.Message;
     var nextMessage = nextProps.message, nextMessageUI = nextProps.Message;
@@ -39097,14 +39101,13 @@ var useEnterLeaveHandlers = function (_a) {
 
 var UnMemoizedMessageStatus = function (props) {
     var _a;
-    var propAvatar = props.Avatar, _b = props.messageType, messageType = _b === void 0 ? 'simple' : _b, _c = props.tooltipUserNameMapper, tooltipUserNameMapper = _c === void 0 ? mapToUserNameOrId : _c;
+    var propAvatar = props.Avatar, MessageDeliveredStatus = props.MessageDeliveredStatus, MessageReadStatus = props.MessageReadStatus, MessageSendingStatus = props.MessageSendingStatus, _b = props.messageType, messageType = _b === void 0 ? 'simple' : _b, _c = props.tooltipUserNameMapper, tooltipUserNameMapper = _c === void 0 ? mapToUserNameOrId : _c;
     var _d = useEnterLeaveHandlers(), handleEnter = _d.handleEnter, handleLeave = _d.handleLeave, tooltipVisible = _d.tooltipVisible;
-    var client = useChatContext('MessageStatus').client;
+    var _e = useChatContext('MessageStatus'), client = _e.client, themeVersion = _e.themeVersion;
     var contextAvatar = useComponentContext('MessageStatus').Avatar;
-    var _e = useMessageContext('MessageStatus'), isMyMessage = _e.isMyMessage, lastReceivedId = _e.lastReceivedId, message = _e.message, readBy = _e.readBy, threadList = _e.threadList;
+    var _f = useMessageContext('MessageStatus'), isMyMessage = _f.isMyMessage, lastReceivedId = _f.lastReceivedId, message = _f.message, readBy = _f.readBy, threadList = _f.threadList;
     var t = useTranslationContext('MessageStatus').t;
-    var themeVersion = useChatContext('MessageStatus').themeVersion;
-    var _f = React.useState(null), referenceElement = _f[0], setReferenceElement = _f[1];
+    var _g = React.useState(null), referenceElement = _g[0], setReferenceElement = _g[1];
     var Avatar$1 = propAvatar || contextAvatar || Avatar;
     if (!isMyMessage() || message.type === 'error')
         return null;
@@ -39121,19 +39124,23 @@ var UnMemoizedMessageStatus = function (props) {
             'message-status-received': delivered && !deliveredAndRead,
             'message-status-sending': sending,
         }), onMouseEnter: handleEnter, onMouseLeave: handleLeave, ref: setReferenceElement },
-        sending && (React__default["default"].createElement(React__default["default"].Fragment, null,
-            themeVersion === '1' && React__default["default"].createElement(Tooltip, null, t('Sending...')),
-            themeVersion === '2' && (React__default["default"].createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Sending...'))),
-            React__default["default"].createElement(LoadingIndicator, null))),
-        delivered && !deliveredAndRead && (React__default["default"].createElement(React__default["default"].Fragment, null,
-            themeVersion === '1' && React__default["default"].createElement(Tooltip, null, t('Delivered')),
-            themeVersion === '2' && (React__default["default"].createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Delivered'))),
-            themeVersion === '2' ? React__default["default"].createElement(MessageDeliveredIcon, null) : React__default["default"].createElement(DeliveredCheckIcon, null))),
-        deliveredAndRead && (React__default["default"].createElement(React__default["default"].Fragment, null,
-            themeVersion === '1' && (React__default["default"].createElement(Tooltip, null, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper))),
-            themeVersion === '2' && (React__default["default"].createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper))),
-            React__default["default"].createElement(Avatar$1, { image: lastReadUser.image, name: lastReadUser.name || lastReadUser.id, size: 15, user: lastReadUser }),
-            readBy.length > 2 && (React__default["default"].createElement("span", { className: "str-chat__message-".concat(messageType, "-status-number"), "data-testid": 'message-status-read-by-many' }, readBy.length - 1))))));
+        sending &&
+            (MessageSendingStatus ? (React__default["default"].createElement(MessageSendingStatus, null)) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+                themeVersion === '1' && React__default["default"].createElement(Tooltip, null, t('Sending...')),
+                themeVersion === '2' && (React__default["default"].createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Sending...'))),
+                React__default["default"].createElement(LoadingIndicator, null)))),
+        delivered &&
+            !deliveredAndRead &&
+            (MessageDeliveredStatus ? (React__default["default"].createElement(MessageDeliveredStatus, null)) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+                themeVersion === '1' && React__default["default"].createElement(Tooltip, null, t('Delivered')),
+                themeVersion === '2' && (React__default["default"].createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Delivered'))),
+                themeVersion === '2' ? React__default["default"].createElement(MessageDeliveredIcon, null) : React__default["default"].createElement(DeliveredCheckIcon, null)))),
+        deliveredAndRead &&
+            (MessageReadStatus ? (React__default["default"].createElement(MessageReadStatus, null)) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+                themeVersion === '1' && (React__default["default"].createElement(Tooltip, null, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper))),
+                themeVersion === '2' && (React__default["default"].createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper))),
+                React__default["default"].createElement(Avatar$1, { image: lastReadUser.image, name: lastReadUser.name || lastReadUser.id, size: 15, user: lastReadUser }),
+                readBy.length > 2 && (React__default["default"].createElement("span", { className: "str-chat__message-".concat(messageType, "-status-number"), "data-testid": 'message-status-read-by-many' }, readBy.length - 1)))))));
 };
 var MessageStatus = React__default["default"].memo(UnMemoizedMessageStatus);
 
@@ -54838,7 +54845,7 @@ function ReactionsListModal(_a) {
             ? __spreadArray([], reactionDetails, true).sort(legacySortReactionDetails)
             : reactionDetails;
     }, [legacySortReactionDetails, reactionDetails]);
-    return (React__default["default"].createElement(Modal, exports.__assign({}, modalProps),
+    return (React__default["default"].createElement(Modal, exports.__assign({}, modalProps, { className: clsx('str-chat__message-reactions-details-modal', modalProps.className) }),
         React__default["default"].createElement("div", { className: 'str-chat__message-reactions-details', "data-testid": 'reactions-list-modal' },
             React__default["default"].createElement("div", { className: 'str-chat__message-reactions-details-reaction-types' }, reactions.map(function (_a) {
                 var EmojiComponent = _a.EmojiComponent, reactionCount = _a.reactionCount, reactionType = _a.reactionType;
@@ -55658,7 +55665,7 @@ var MessageSimpleWithContext = function (props) {
         'str-chat__virtual-message__wrapper--group': groupedByUser,
     });
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        editing && (React__default["default"].createElement(Modal, { onClose: clearEditingState, open: editing },
+        editing && (React__default["default"].createElement(Modal, { className: 'str-chat__edit-message-modal', onClose: clearEditingState, open: editing },
             React__default["default"].createElement(MessageInput, exports.__assign({ clearEditingState: clearEditingState, grow: true, hideSendButton: true, Input: EditMessageInput, message: message }, additionalMessageInputProps)))),
         isBounceDialogOpen && (React__default["default"].createElement(MessageBounceModal, { MessageBouncePrompt: MessageBouncePrompt$1, onClose: function () { return setIsBounceDialogOpen(false); }, open: isBounceDialogOpen })),
         React__default["default"].createElement("div", { className: rootClassName, key: message.id },
@@ -57001,8 +57008,9 @@ var ChannelInner = function (props) {
         });
     };
     var clearHighlightedMessageTimeoutId = React.useRef(null);
-    var jumpToMessage = function (messageId, messageLimit) {
+    var jumpToMessage = React.useCallback(function (messageId, messageLimit, highlightDuration) {
         if (messageLimit === void 0) { messageLimit = DEFAULT_JUMP_TO_PAGE_SIZE; }
+        if (highlightDuration === void 0) { highlightDuration = DEFAULT_HIGHLIGHT_DURATION; }
         return __awaiter(void 0, void 0, void 0, function () {
             var indexOfMessage, hasMoreMessages;
             return __generator(this, function (_a) {
@@ -57026,13 +57034,13 @@ var ChannelInner = function (props) {
                         clearHighlightedMessageTimeoutId.current = setTimeout(function () {
                             clearHighlightedMessageTimeoutId.current = null;
                             dispatch({ type: 'clearHighlightedMessage' });
-                        }, 500);
+                        }, highlightDuration);
                         return [2 /*return*/];
                 }
             });
         });
-    };
-    var jumpToLatestMessage = function () { return __awaiter(void 0, void 0, void 0, function () {
+    }, [channel, loadMoreFinished]);
+    var jumpToLatestMessage = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
         var hasMoreOlder;
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -57047,9 +57055,10 @@ var ChannelInner = function (props) {
                     return [2 /*return*/];
             }
         });
-    }); };
-    var jumpToFirstUnreadMessage = React.useCallback(function (queryMessageLimit) {
+    }); }, [channel, loadMoreFinished]);
+    var jumpToFirstUnreadMessage = React.useCallback(function (queryMessageLimit, highlightDuration) {
         if (queryMessageLimit === void 0) { queryMessageLimit = DEFAULT_JUMP_TO_PAGE_SIZE; }
+        if (highlightDuration === void 0) { highlightDuration = DEFAULT_HIGHLIGHT_DURATION; }
         return __awaiter(void 0, void 0, void 0, function () {
             var lastReadMessageId, firstUnreadMessageId, isInCurrentMessageSet, hasMoreMessages, result, result, lastReadTimestamp, _a, lastReadMessageIndex, lastReadMessage, messages, firstMessageWithCreationDate, firstMessageTimestamp, result, targetId_1, indexOfTarget;
             var _b, _c, _d, _e;
@@ -57164,7 +57173,7 @@ var ChannelInner = function (props) {
                         clearHighlightedMessageTimeoutId.current = setTimeout(function () {
                             clearHighlightedMessageTimeoutId.current = null;
                             dispatch({ type: 'clearHighlightedMessage' });
-                        }, 500);
+                        }, highlightDuration);
                         return [2 /*return*/];
                 }
             });

package/dist/browser.full-bundle.js

@@ -9763,6 +9763,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
     var DEFAULT_THREAD_PAGE_SIZE = 50;
     var DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
     var DEFAULT_UPLOAD_SIZE_LIMIT_BYTES = 100 * 1024 * 1024; // 100 MB
+    var DEFAULT_HIGHLIGHT_DURATION = 500;
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var accentsMap = {
         a: 'á|à|ã|â|À|Á|Ã|Â',
@@ -11852,7 +11853,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
         React__default["default"].createElement("path", { clipRule: 'evenodd', d: 'M28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14ZM26 14C26 20.6274 20.6274 26 14 26C7.37258 26 2 20.6274 2 14C2 7.37258 7.37258 2 14 2C20.6274 2 26 7.37258 26 14ZM19.59 7L21 8.41L15.41 14L21 19.59L19.59 21L14 15.41L8.41 21L7 19.59L12.59 14L7 8.41L8.41 7L14 12.59L19.59 7Z', fill: 'white', fillRule: 'evenodd' }))); };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var Modal = function (_a) {
-        var children = _a.children, onClose = _a.onClose, open = _a.open;
+        var children = _a.children, className = _a.className, onClose = _a.onClose, open = _a.open;
         var t = useTranslationContext('Modal').t;
         var themeVersion = useChatContext('Modal').themeVersion;
         var innerRef = React$2.useRef(null);
@@ -11876,7 +11877,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
         }, [onClose, open]);
         if (!open)
             return null;
-        return (React__default["default"].createElement("div", { className: 'str-chat__modal str-chat__modal--open', onClick: handleClick },
+        return (React__default["default"].createElement("div", { className: clsx('str-chat__modal str-chat__modal--open', className), onClick: handleClick },
             React__default["default"].createElement($9bf71ea28793e738$export$20e40289641fbbb6, { autoFocus: true, contain: true },
                 React__default["default"].createElement("button", { className: 'str-chat__modal__close-button', ref: closeRef, title: t('Close') },
                     themeVersion === '2' && React__default["default"].createElement(CloseIconRound, null),
@@ -11958,7 +11959,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
         });
         return (React__default["default"].createElement("div", { className: className },
             renderImages,
-            React__default["default"].createElement(Modal, { onClose: function () { return setModalOpen(function (modalOpen) { return !modalOpen; }); }, open: modalOpen },
+            React__default["default"].createElement(Modal, { className: 'str-chat__gallery-modal', onClose: function () { return setModalOpen(function (modalOpen) { return !modalOpen; }); }, open: modalOpen },
                 React__default["default"].createElement(ModalGallery$1, { images: images, index: index }))));
     };
     /**
@@ -11977,7 +11978,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
         var toggleModal = function () { return setModalIsOpen(function (modalIsOpen) { return !modalIsOpen; }); };
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(BaseImage$1, __assign({ alt: fallback, className: 'str-chat__message-attachment--img', "data-testid": 'image-test', onClick: toggleModal, src: imageSrc, style: style, tabIndex: 0, title: fallback }, dimensions, (innerRef && { ref: innerRef }))),
-            React__default["default"].createElement(Modal, { onClose: toggleModal, open: modalIsOpen },
+            React__default["default"].createElement(Modal, { className: 'str-chat__image-modal', onClose: toggleModal, open: modalIsOpen },
                 React__default["default"].createElement(ModalGallery$1, { images: [props], index: 0 }))));
     };
 
@@ -48571,7 +48572,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function MessageBounceModal(_a) {
         var MessageBouncePrompt = _a.MessageBouncePrompt, modalProps = __rest(_a, ["MessageBouncePrompt"]);
-        return (React__default["default"].createElement(Modal, __assign({}, modalProps),
+        return (React__default["default"].createElement(Modal, __assign({ className: 'str-chat__message-bounce-modal' }, modalProps),
             React__default["default"].createElement(MessageBounceProvider, null,
                 React__default["default"].createElement(MessageBouncePrompt, { onClose: modalProps.onClose }))));
     }
@@ -48818,9 +48819,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
         }
         return true;
     };
-    var areMessagesEqual = function (prevMessage, nextMessage) {
+    function areMessagesEqual(prevMessage, nextMessage) {
         var _a, _b, _c, _d, _e, _f;
-        return prevMessage.deleted_at === nextMessage.deleted_at &&
+        return (prevMessage.deleted_at === nextMessage.deleted_at &&
             ((_a = prevMessage.latest_reactions) === null || _a === void 0 ? void 0 : _a.length) === ((_b = nextMessage.latest_reactions) === null || _b === void 0 ? void 0 : _b.length) &&
             ((_c = prevMessage.own_reactions) === null || _c === void 0 ? void 0 : _c.length) === ((_d = nextMessage.own_reactions) === null || _d === void 0 ? void 0 : _d.length) &&
             prevMessage.pinned === nextMessage.pinned &&
@@ -48829,8 +48830,11 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
             prevMessage.text === nextMessage.text &&
             prevMessage.type === nextMessage.type &&
             prevMessage.updated_at === nextMessage.updated_at &&
-            ((_e = prevMessage.user) === null || _e === void 0 ? void 0 : _e.updated_at) === ((_f = nextMessage.user) === null || _f === void 0 ? void 0 : _f.updated_at);
-    };
+            ((_e = prevMessage.user) === null || _e === void 0 ? void 0 : _e.updated_at) === ((_f = nextMessage.user) === null || _f === void 0 ? void 0 : _f.updated_at) &&
+            Boolean(prevMessage.quoted_message) === Boolean(nextMessage.quoted_message) &&
+            (!prevMessage.quoted_message ||
+                areMessagesEqual(prevMessage.quoted_message, nextMessage.quoted_message)));
+    }
     var areMessagePropsEqual = function (prevProps, nextProps) {
         var prevMessage = prevProps.message, prevMessageUI = prevProps.Message;
         var nextMessage = nextProps.message, nextMessageUI = nextProps.Message;
@@ -51142,14 +51146,13 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedMessageStatus = function (props) {
         var _a;
-        var propAvatar = props.Avatar, _b = props.messageType, messageType = _b === void 0 ? 'simple' : _b, _c = props.tooltipUserNameMapper, tooltipUserNameMapper = _c === void 0 ? mapToUserNameOrId : _c;
+        var propAvatar = props.Avatar, MessageDeliveredStatus = props.MessageDeliveredStatus, MessageReadStatus = props.MessageReadStatus, MessageSendingStatus = props.MessageSendingStatus, _b = props.messageType, messageType = _b === void 0 ? 'simple' : _b, _c = props.tooltipUserNameMapper, tooltipUserNameMapper = _c === void 0 ? mapToUserNameOrId : _c;
         var _d = useEnterLeaveHandlers(), handleEnter = _d.handleEnter, handleLeave = _d.handleLeave, tooltipVisible = _d.tooltipVisible;
-        var client = useChatContext('MessageStatus').client;
+        var _e = useChatContext('MessageStatus'), client = _e.client, themeVersion = _e.themeVersion;
         var contextAvatar = useComponentContext('MessageStatus').Avatar;
-        var _e = useMessageContext('MessageStatus'), isMyMessage = _e.isMyMessage, lastReceivedId = _e.lastReceivedId, message = _e.message, readBy = _e.readBy, threadList = _e.threadList;
+        var _f = useMessageContext('MessageStatus'), isMyMessage = _f.isMyMessage, lastReceivedId = _f.lastReceivedId, message = _f.message, readBy = _f.readBy, threadList = _f.threadList;
         var t = useTranslationContext('MessageStatus').t;
-        var themeVersion = useChatContext('MessageStatus').themeVersion;
-        var _f = React$2.useState(null), referenceElement = _f[0], setReferenceElement = _f[1];
+        var _g = React$2.useState(null), referenceElement = _g[0], setReferenceElement = _g[1];
         var Avatar$1 = propAvatar || contextAvatar || Avatar;
         if (!isMyMessage() || message.type === 'error')
             return null;
@@ -51166,19 +51169,23 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
                 'message-status-received': delivered && !deliveredAndRead,
                 'message-status-sending': sending,
             }), onMouseEnter: handleEnter, onMouseLeave: handleLeave, ref: setReferenceElement },
-            sending && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                themeVersion === '1' && React__default["default"].createElement(Tooltip, null, t('Sending...')),
-                themeVersion === '2' && (React__default["default"].createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Sending...'))),
-                React__default["default"].createElement(LoadingIndicator, null))),
-            delivered && !deliveredAndRead && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                themeVersion === '1' && React__default["default"].createElement(Tooltip, null, t('Delivered')),
-                themeVersion === '2' && (React__default["default"].createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Delivered'))),
-                themeVersion === '2' ? React__default["default"].createElement(MessageDeliveredIcon, null) : React__default["default"].createElement(DeliveredCheckIcon, null))),
-            deliveredAndRead && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                themeVersion === '1' && (React__default["default"].createElement(Tooltip, null, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper))),
-                themeVersion === '2' && (React__default["default"].createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper))),
-                React__default["default"].createElement(Avatar$1, { image: lastReadUser.image, name: lastReadUser.name || lastReadUser.id, size: 15, user: lastReadUser }),
-                readBy.length > 2 && (React__default["default"].createElement("span", { className: "str-chat__message-".concat(messageType, "-status-number"), "data-testid": 'message-status-read-by-many' }, readBy.length - 1))))));
+            sending &&
+                (MessageSendingStatus ? (React__default["default"].createElement(MessageSendingStatus, null)) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    themeVersion === '1' && React__default["default"].createElement(Tooltip, null, t('Sending...')),
+                    themeVersion === '2' && (React__default["default"].createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Sending...'))),
+                    React__default["default"].createElement(LoadingIndicator, null)))),
+            delivered &&
+                !deliveredAndRead &&
+                (MessageDeliveredStatus ? (React__default["default"].createElement(MessageDeliveredStatus, null)) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    themeVersion === '1' && React__default["default"].createElement(Tooltip, null, t('Delivered')),
+                    themeVersion === '2' && (React__default["default"].createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Delivered'))),
+                    themeVersion === '2' ? React__default["default"].createElement(MessageDeliveredIcon, null) : React__default["default"].createElement(DeliveredCheckIcon, null)))),
+            deliveredAndRead &&
+                (MessageReadStatus ? (React__default["default"].createElement(MessageReadStatus, null)) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    themeVersion === '1' && (React__default["default"].createElement(Tooltip, null, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper))),
+                    themeVersion === '2' && (React__default["default"].createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper))),
+                    React__default["default"].createElement(Avatar$1, { image: lastReadUser.image, name: lastReadUser.name || lastReadUser.id, size: 15, user: lastReadUser }),
+                    readBy.length > 2 && (React__default["default"].createElement("span", { className: "str-chat__message-".concat(messageType, "-status-number"), "data-testid": 'message-status-read-by-many' }, readBy.length - 1)))))));
     };
     var MessageStatus = React__default["default"].memo(UnMemoizedMessageStatus);
 
@@ -66961,7 +66968,7 @@ bitsperframe:             %d
                 ? __spreadArray([], reactionDetails, true).sort(legacySortReactionDetails)
                 : reactionDetails;
         }, [legacySortReactionDetails, reactionDetails]);
-        return (React__default["default"].createElement(Modal, __assign({}, modalProps),
+        return (React__default["default"].createElement(Modal, __assign({}, modalProps, { className: clsx('str-chat__message-reactions-details-modal', modalProps.className) }),
             React__default["default"].createElement("div", { className: 'str-chat__message-reactions-details', "data-testid": 'reactions-list-modal' },
                 React__default["default"].createElement("div", { className: 'str-chat__message-reactions-details-reaction-types' }, reactions.map(function (_a) {
                     var EmojiComponent = _a.EmojiComponent, reactionCount = _a.reactionCount, reactionType = _a.reactionType;
@@ -67785,7 +67792,7 @@ bitsperframe:             %d
             'str-chat__virtual-message__wrapper--group': groupedByUser,
         });
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            editing && (React__default["default"].createElement(Modal, { onClose: clearEditingState, open: editing },
+            editing && (React__default["default"].createElement(Modal, { className: 'str-chat__edit-message-modal', onClose: clearEditingState, open: editing },
                 React__default["default"].createElement(MessageInput, __assign({ clearEditingState: clearEditingState, grow: true, hideSendButton: true, Input: EditMessageInput, message: message }, additionalMessageInputProps)))),
             isBounceDialogOpen && (React__default["default"].createElement(MessageBounceModal, { MessageBouncePrompt: MessageBouncePrompt$1, onClose: function () { return setIsBounceDialogOpen(false); }, open: isBounceDialogOpen })),
             React__default["default"].createElement("div", { className: rootClassName, key: message.id },
@@ -68929,7 +68936,7 @@ bitsperframe:             %d
                     React__default["default"].createElement(HeaderComponent, null)));
             }
             else if (message.type === 'system') {
-                renderedMessages.push(React__default["default"].createElement("li", { key: message.id || message.created_at },
+                renderedMessages.push(React__default["default"].createElement("li", { "data-message-id": message.id, key: message.id || message.created_at },
                     React__default["default"].createElement(MessageSystem, { message: message })));
             }
             else {
@@ -70499,9 +70506,11 @@ bitsperframe:             %d
             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 };
+        }, [client, separateGiphyPreview]);
+        return {
+            giphyPreviewMessage: giphyPreviewMessage,
+            setGiphyPreviewMessage: separateGiphyPreview ? setGiphyPreviewMessage : undefined,
+        };
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useMessageSetKey = function (_a) {
@@ -71591,8 +71600,9 @@ bitsperframe:             %d
             });
         };
         var clearHighlightedMessageTimeoutId = React$2.useRef(null);
-        var jumpToMessage = function (messageId, messageLimit) {
+        var jumpToMessage = React$2.useCallback(function (messageId, messageLimit, highlightDuration) {
             if (messageLimit === void 0) { messageLimit = DEFAULT_JUMP_TO_PAGE_SIZE; }
+            if (highlightDuration === void 0) { highlightDuration = DEFAULT_HIGHLIGHT_DURATION; }
             return __awaiter(void 0, void 0, void 0, function () {
                 var indexOfMessage, hasMoreMessages;
                 return __generator(this, function (_a) {
@@ -71616,13 +71626,13 @@ bitsperframe:             %d
                             clearHighlightedMessageTimeoutId.current = setTimeout(function () {
                                 clearHighlightedMessageTimeoutId.current = null;
                                 dispatch({ type: 'clearHighlightedMessage' });
-                            }, 500);
+                            }, highlightDuration);
                             return [2 /*return*/];
                     }
                 });
             });
-        };
-        var jumpToLatestMessage = function () { return __awaiter(void 0, void 0, void 0, function () {
+        }, [channel, loadMoreFinished]);
+        var jumpToLatestMessage = React$2.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
             var hasMoreOlder;
             return __generator(this, function (_a) {
                 switch (_a.label) {
@@ -71637,9 +71647,10 @@ bitsperframe:             %d
                         return [2 /*return*/];
                 }
             });
-        }); };
-        var jumpToFirstUnreadMessage = React$2.useCallback(function (queryMessageLimit) {
+        }); }, [channel, loadMoreFinished]);
+        var jumpToFirstUnreadMessage = React$2.useCallback(function (queryMessageLimit, highlightDuration) {
             if (queryMessageLimit === void 0) { queryMessageLimit = DEFAULT_JUMP_TO_PAGE_SIZE; }
+            if (highlightDuration === void 0) { highlightDuration = DEFAULT_HIGHLIGHT_DURATION; }
             return __awaiter(void 0, void 0, void 0, function () {
                 var lastReadMessageId, firstUnreadMessageId, isInCurrentMessageSet, hasMoreMessages, result, result, lastReadTimestamp, _a, lastReadMessageIndex, lastReadMessage, messages, firstMessageWithCreationDate, firstMessageTimestamp, result, targetId_1, indexOfTarget;
                 var _b, _c, _d, _e;
@@ -71754,7 +71765,7 @@ bitsperframe:             %d
                             clearHighlightedMessageTimeoutId.current = setTimeout(function () {
                                 clearHighlightedMessageTimeoutId.current = null;
                                 dispatch({ type: 'clearHighlightedMessage' });
-                            }, 500);
+                            }, highlightDuration);
                             return [2 /*return*/];
                     }
                 });
@@ -73438,7 +73449,7 @@ bitsperframe:             %d
 
     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.19.0';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.20.0';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;