stream-chat-react 11.1.1 → 11.2.0

package/dist/browser.full-bundle.js

@@ -10007,7 +10007,16 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
 
     var ImageGallery = /*@__PURE__*/getDefaultExportFromCjs(imageGallery.exports);
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var ModalGallery = function (props) {
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var onError = function (e) {
+        // Prevent having alt attribute on img as the img takes the height of the alt text
+        // instead of the CSS / element width & height when the CSS mask (fallback) is applied.
+        e.target.alt = '';
+    };
+    var renderItem = function (_a) {
+        var original = _a.original, originalAlt = _a.originalAlt;
+        return (React__default["default"].createElement(BaseImage, { alt: originalAlt, className: 'image-gallery-image', onError: onError, src: original }));
+    };
+    var ModalGallery = function (props) {
         var images = props.images, index = props.index;
         var t = useTranslationContext('ModalGallery').t;
         var formattedArray = React$2.useMemo(function () {
@@ -10020,7 +10029,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 };
             });
         }, [images]);
-        return (React__default["default"].createElement(ImageGallery, { items: formattedArray, showIndex: true, showPlayButton: false, showThumbnails: false, startIndex: index }));
+        return (React__default["default"].createElement(ImageGallery, { items: formattedArray, renderItem: renderItem, showIndex: true, showPlayButton: false, showThumbnails: false, startIndex: index }));
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedGallery = function (props) {
@@ -43590,6 +43599,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
           currentTrigger: null,
           data: null,
           dataLoading: false,
+          isComposing: false,
           left: null,
           selectionEnd: 0,
           selectionStart: 0,
@@ -43640,22 +43650,23 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
           SuggestionItem,
           SuggestionList = List$1
         } = this.props;
+        const {
+          isComposing
+        } = this.state;
         const triggerProps = this.getTriggerProps();
-        if (triggerProps.values && triggerProps.currentTrigger && !(disableMentions && triggerProps.currentTrigger === '@')) {
-          return /*#__PURE__*/React__default["default"].createElement("div", {
-            className: clsx('rta__autocomplete', 'str-chat__suggestion-list-container', dropdownClassName),
-            ref: this.setDropdownRef,
-            style: dropdownStyle
-          }, /*#__PURE__*/React__default["default"].createElement(SuggestionList, _extends$2({
-            className: clsx('str-chat__suggestion-list', listClassName),
-            dropdownScroll: this._dropdownScroll,
-            itemClassName: clsx('str-chat__suggestion-list-item', itemClassName),
-            itemStyle: itemStyle,
-            onSelect: this._onSelect,
-            SuggestionItem: SuggestionItem
-          }, triggerProps)));
-        }
-        return null;
+        if (isComposing || !triggerProps.values || !triggerProps.currentTrigger || disableMentions && triggerProps.currentTrigger === '@') return null;
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: clsx('rta__autocomplete', 'str-chat__suggestion-list-container', dropdownClassName),
+          ref: this.setDropdownRef,
+          style: dropdownStyle
+        }, /*#__PURE__*/React__default["default"].createElement(SuggestionList, _extends$2({
+          className: clsx('str-chat__suggestion-list', listClassName),
+          dropdownScroll: this._dropdownScroll,
+          itemClassName: clsx('str-chat__suggestion-list-item', itemClassName),
+          itemStyle: itemStyle,
+          onSelect: this._onSelect,
+          SuggestionItem: SuggestionItem
+        }, triggerProps)));
       }
       render() {
         const {
@@ -43709,6 +43720,14 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             this._onClickAndBlurHandler(e);
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
           },
+          onCompositionEnd: () => this.setState(pv => ({
+            ...pv,
+            isComposing: false
+          })),
+          onCompositionStart: () => this.setState(pv => ({
+            ...pv,
+            isComposing: true
+          })),
           onFocus: e => {
             var _this$props$onFocus, _this$props;
             (_this$props$onFocus = (_this$props = this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props, e);
@@ -47655,14 +47674,14 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var EmojiIconLarge = function () {
         var t = useTranslationContext('EmojiIconLarge').t;
-        return (React__default["default"].createElement("svg", { height: '28', width: '28', xmlns: 'http://www.w3.org/2000/svg' },
+        return (React__default["default"].createElement("svg", { height: '28', viewBox: '0 0 28 28', width: '28', xmlns: 'http://www.w3.org/2000/svg' },
             React__default["default"].createElement("title", null, t('Open emoji picker')),
             React__default["default"].createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
                 React__default["default"].createElement("path", { d: 'M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z' }))));
     };
     var EmojiIconSmall = function () {
         var t = useTranslationContext('EmojiIconSmall').t;
-        return (React__default["default"].createElement("svg", { height: '14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
+        return (React__default["default"].createElement("svg", { height: '14', viewBox: '0 0 14 14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
             React__default["default"].createElement("title", null, t('Open emoji picker')),
             React__default["default"].createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
                 React__default["default"].createElement("path", { d: 'M6.7 1.42C3.73 1.42 1.42 3.73 1.42 6.7c0 2.97 2.31 5.28 5.28 5.28c2.97 0 5.28-2.31 5.28-5.28c0-2.97-2.31-5.28-5.28-5.28zM.1 6.7c0-3.63 2.97-6.6 6.6-6.6s6.6 2.97 6.6 6.6s-2.97 6.6-6.6 6.6s-6.6-2.97-6.6-6.6zM6.04 5.05c0 .55-.44.99-.99.99s-.99-.44-.99-.99s.44-.99.99-.99s.99.44.99.99zM9.34 5.05c0 .55-.44.99-.99.99s-.99-.44-.99-.99s.44-.99.99-.99s.99.44.99.99zM3.73 7.47c.33-.22.66-.11.88.11c.33.44.88.99 1.65 1.1c.66.22 1.54.11 2.64-1.1c.22-.22.66-.33.88 0c.22.22.33.66 0 .88c-1.21 1.43-2.64 1.87-3.85 1.65c-1.1-.22-1.98-.99-2.42-1.65c-.22-.33-.11-.66.22-.99z' }))));
@@ -47673,13 +47692,13 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             React__default["default"].createElement("path", { d: 'M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z' })))); };
     var FileUploadIcon = function () {
         var t = useTranslationContext('FileUploadIcon').t;
-        return (React__default["default"].createElement("svg", { height: '14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
+        return (React__default["default"].createElement("svg", { height: '14', viewBox: '0 0 14 14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
             React__default["default"].createElement("title", null, t('Attach files')),
             React__default["default"].createElement("path", { d: 'M7 .5c3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5S.5 10.59.5 7 3.41.5 7 .5zm0 12c3.031 0 5.5-2.469 5.5-5.5S10.031 1.5 7 1.5A5.506 5.506 0 0 0 1.5 7c0 3.034 2.469 5.5 5.5 5.5zM7.506 3v3.494H11v1.05H7.506V11h-1.05V7.544H3v-1.05h3.456V3h1.05z', fillRule: 'nonzero' })));
     };
     var FileUploadIconFlat = function () {
         var t = useTranslationContext('FileUploadIconFlat').t;
-        return (React__default["default"].createElement("svg", { height: '14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
+        return (React__default["default"].createElement("svg", { height: '14', viewBox: '0 0 14 14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
             React__default["default"].createElement("title", null, t('Attach files')),
             React__default["default"].createElement("path", { d: 'M1.667.333h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H1.667a1.333 1.333 0 0 1-1.334-1.334V1.667C.333.93.93.333 1.667.333zm2 1.334a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333zm-2 9.333v1.333h10.666v-4l-2-2-4 4-2-2L1.667 11z', fillRule: 'nonzero' })));
     };
@@ -47788,19 +47807,22 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var CooldownTimer = function (_a) {
-        var cooldownInterval = _a.cooldownInterval, setCooldownRemaining = _a.setCooldownRemaining;
-        var _b = React$2.useState(cooldownInterval), seconds = _b[0], setSeconds = _b[1];
+        var cooldownInterval = _a.cooldownInterval;
+        var _b = React$2.useState(), seconds = _b[0], setSeconds = _b[1];
         React$2.useEffect(function () {
-            var countdownInterval = setInterval(function () {
-                if (seconds > 0) {
+            var countdownTimeout;
+            if (typeof seconds === 'number' && seconds > 0) {
+                countdownTimeout = setTimeout(function () {
                     setSeconds(seconds - 1);
-                }
-                else {
-                    setCooldownRemaining(0);
-                }
-            }, 1000);
-            return function () { return clearInterval(countdownInterval); };
-        });
+                }, 1000);
+            }
+            return function () {
+                clearTimeout(countdownTimeout);
+            };
+        }, [seconds]);
+        React$2.useEffect(function () {
+            setSeconds(cooldownInterval !== null && cooldownInterval !== void 0 ? cooldownInterval : 0);
+        }, [cooldownInterval]);
         return (React__default["default"].createElement("div", { className: 'str-chat__message-input-cooldown', "data-testid": 'cooldown-timer' }, seconds));
     };
 
@@ -48530,11 +48552,20 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 ? // prevent negative values
                     Math.max(0, (new Date().getTime() - ownLatestMessageDate.getTime()) / 1000)
                 : undefined;
-            setCooldownRemaining(!skipCooldown &&
+            var remaining = !skipCooldown &&
                 typeof timeSinceOwnLastMessage !== 'undefined' &&
                 cooldownInterval > timeSinceOwnLastMessage
                 ? Math.round(cooldownInterval - timeSinceOwnLastMessage)
-                : 0);
+                : 0;
+            setCooldownRemaining(remaining);
+            if (!remaining)
+                return;
+            var timeout = setTimeout(function () {
+                setCooldownRemaining(0);
+            }, remaining * 1000);
+            return function () {
+                clearTimeout(timeout);
+            };
         }, [cooldownInterval, ownLatestMessageDate, skipCooldown]);
         return {
             cooldownInterval: cooldownInterval,
@@ -50461,9 +50492,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var markReadThrottled = lodash_throttle(markRead, 500, { leading: true, trailing: true });
         var handleEvent = function (event) { return __awaiter(void 0, void 0, void 0, function () {
             var mainChannelUpdated, unread, messageDate, cid, oldestID;
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-            return __generator(this, function (_m) {
-                switch (_m.label) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            return __generator(this, function (_k) {
+                switch (_k.label) {
                     case 0:
                         if (event.message) {
                             dispatch({
@@ -50485,7 +50516,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                             if (((_a = event.message) === null || _a === void 0 ? void 0 : _a.parent_id) && !((_b = event.message) === null || _b === void 0 ? void 0 : _b.show_in_channel)) {
                                 mainChannelUpdated = false;
                             }
-                            if (mainChannelUpdated && ((_d = (_c = event.message) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.id) !== client.userID) {
+                            if (mainChannelUpdated) {
                                 if (!document.hidden) {
                                     markReadThrottled();
                                 }
@@ -50499,9 +50530,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                                     }
                                 }
                             }
-                            if (((_f = (_e = event.message) === null || _e === void 0 ? void 0 : _e.user) === null || _f === void 0 ? void 0 : _f.id) === client.userID &&
-                                ((_g = event === null || event === void 0 ? void 0 : event.message) === null || _g === void 0 ? void 0 : _g.created_at) &&
-                                ((_h = event === null || event === void 0 ? void 0 : event.message) === null || _h === void 0 ? void 0 : _h.cid)) {
+                            if (((_d = (_c = event.message) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.id) === client.userID &&
+                                ((_e = event === null || event === void 0 ? void 0 : event.message) === null || _e === void 0 ? void 0 : _e.created_at) &&
+                                ((_f = event === null || event === void 0 ? void 0 : event.message) === null || _f === void 0 ? void 0 : _f.cid)) {
                                 messageDate = new Date(event.message.created_at);
                                 cid = event.message.cid;
                                 if (!latestMessageDatesByChannels[cid] ||
@@ -50511,7 +50542,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                             }
                         }
                         if (!(event.type === 'user.deleted')) return [3 /*break*/, 2];
-                        oldestID = (_l = (_k = (_j = channel.state) === null || _j === void 0 ? void 0 : _j.messages) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.id;
+                        oldestID = (_j = (_h = (_g = channel.state) === null || _g === void 0 ? void 0 : _g.messages) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.id;
                         /**
                          * As the channel state is not normalized we re-fetch the channel data. Thus, we avoid having to search for user references in the channel state.
                          */
@@ -50525,8 +50556,8 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                          * As the channel state is not normalized we re-fetch the channel data. Thus, we avoid having to search for user references in the channel state.
                          */
                         // FIXME: we should use channelQueryOptions if they are available
-                        _m.sent();
-                        _m.label = 2;
+                        _k.sent();
+                        _k.label = 2;
                     case 2:
                         throttledCopyStateFromChannel();
                         return [2 /*return*/];
@@ -50588,6 +50619,13 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                                     hasMore: hasMoreMessagesProbably(channel.state.messages.length, (_e = (_d = channelQueryOptions === null || channelQueryOptions === void 0 ? void 0 : channelQueryOptions.messages) === null || _d === void 0 ? void 0 : _d.limit) !== null && _e !== void 0 ? _e : DEFAULT_INITIAL_CHANNEL_PAGE_SIZE),
                                     type: 'initStateFromChannel',
                                 });
+                                /**
+                                 * TODO: maybe pass last_read to the countUnread method to get proper value
+                                 * combined with channel.countUnread adjustment (_countMessageAsUnread)
+                                 * to allow counting own messages too
+                                 *
+                                 * const lastRead = channel.state.read[client.userID as string].last_read;
+                                 */
                                 if (channel.countUnread() > 0)
                                     markRead();
                                 // The more complex sync logic is done in Chat
@@ -51399,22 +51437,27 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         return uniqBy(__spreadArray([channel], channels, true), 'cid');
     };
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useMessageNewListener = function (setChannels, lockChannelOrder, allowNewMessagesFromUnfilteredChannels) {
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useMessageNewListener = function (setChannels, customHandler, lockChannelOrder, allowNewMessagesFromUnfilteredChannels) {
         if (lockChannelOrder === void 0) { lockChannelOrder = false; }
         if (allowNewMessagesFromUnfilteredChannels === void 0) { allowNewMessagesFromUnfilteredChannels = true; }
         var client = useChatContext('useMessageNewListener').client;
         React$2.useEffect(function () {
             var handleEvent = function (event) {
-                setChannels(function (channels) {
-                    var channelInList = channels.filter(function (channel) { return channel.cid === event.cid; }).length > 0;
-                    if (!channelInList && allowNewMessagesFromUnfilteredChannels && event.channel_type) {
-                        var channel = client.channel(event.channel_type, event.channel_id);
-                        return uniqBy(__spreadArray([channel], channels, true), 'cid');
-                    }
-                    if (!lockChannelOrder)
-                        return moveChannelUp({ channels: channels, cid: event.cid || '' });
-                    return channels;
-                });
+                if (customHandler && typeof customHandler === 'function') {
+                    customHandler(setChannels, event);
+                }
+                else {
+                    setChannels(function (channels) {
+                        var channelInList = channels.filter(function (channel) { return channel.cid === event.cid; }).length > 0;
+                        if (!channelInList && allowNewMessagesFromUnfilteredChannels && event.channel_type) {
+                            var channel = client.channel(event.channel_type, event.channel_id);
+                            return uniqBy(__spreadArray([channel], channels, true), 'cid');
+                        }
+                        if (!lockChannelOrder)
+                            return moveChannelUp({ channels: channels, cid: event.cid || '' });
+                        return channels;
+                    });
+                }
             };
             client.on('message.new', handleEvent);
             return function () {
@@ -52258,7 +52301,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
     var DEFAULT_SORT = {};
     var UnMemoizedChannelList = function (props) {
         var _a, _b;
-        var additionalChannelSearchProps = props.additionalChannelSearchProps, _c = props.Avatar, Avatar$1 = _c === void 0 ? Avatar : _c, allowNewMessagesFromUnfilteredChannels = props.allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn = props.channelRenderFilterFn, _d = props.ChannelSearch, ChannelSearch$1 = _d === void 0 ? ChannelSearch : _d, customActiveChannel = props.customActiveChannel, _e = props.EmptyStateIndicator, EmptyStateIndicator$1 = _e === void 0 ? EmptyStateIndicator : _e, filters = props.filters, _f = props.LoadingErrorIndicator, LoadingErrorIndicator = _f === void 0 ? ChatDown : _f, _g = props.LoadingIndicator, LoadingIndicator = _g === void 0 ? LoadingChannels : _g, _h = props.List, List = _h === void 0 ? ChannelListMessenger : _h, lockChannelOrder = props.lockChannelOrder, onAddedToChannel = props.onAddedToChannel, onChannelDeleted = props.onChannelDeleted, onChannelHidden = props.onChannelHidden, onChannelTruncated = props.onChannelTruncated, onChannelUpdated = props.onChannelUpdated, onChannelVisible = props.onChannelVisible, onMessageNew = props.onMessageNew, onRemovedFromChannel = props.onRemovedFromChannel, options = props.options, _j = props.Paginator, Paginator = _j === void 0 ? LoadMorePaginator : _j, Preview = props.Preview, recoveryThrottleIntervalMs = props.recoveryThrottleIntervalMs, renderChannels = props.renderChannels, _k = props.sendChannelsToList, sendChannelsToList = _k === void 0 ? false : _k, _l = props.setActiveChannelOnMount, setActiveChannelOnMount = _l === void 0 ? true : _l, _m = props.showChannelSearch, showChannelSearch = _m === void 0 ? false : _m, _o = props.sort, sort = _o === void 0 ? DEFAULT_SORT : _o, _p = props.watchers, watchers = _p === void 0 ? {} : _p;
+        var additionalChannelSearchProps = props.additionalChannelSearchProps, _c = props.Avatar, Avatar$1 = _c === void 0 ? Avatar : _c, allowNewMessagesFromUnfilteredChannels = props.allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn = props.channelRenderFilterFn, _d = props.ChannelSearch, ChannelSearch$1 = _d === void 0 ? ChannelSearch : _d, customActiveChannel = props.customActiveChannel, _e = props.EmptyStateIndicator, EmptyStateIndicator$1 = _e === void 0 ? EmptyStateIndicator : _e, filters = props.filters, _f = props.LoadingErrorIndicator, LoadingErrorIndicator = _f === void 0 ? ChatDown : _f, _g = props.LoadingIndicator, LoadingIndicator = _g === void 0 ? LoadingChannels : _g, _h = props.List, List = _h === void 0 ? ChannelListMessenger : _h, lockChannelOrder = props.lockChannelOrder, onAddedToChannel = props.onAddedToChannel, onChannelDeleted = props.onChannelDeleted, onChannelHidden = props.onChannelHidden, onChannelTruncated = props.onChannelTruncated, onChannelUpdated = props.onChannelUpdated, onChannelVisible = props.onChannelVisible, onMessageNew = props.onMessageNew, onMessageNewHandler = props.onMessageNewHandler, onRemovedFromChannel = props.onRemovedFromChannel, options = props.options, _j = props.Paginator, Paginator = _j === void 0 ? LoadMorePaginator : _j, Preview = props.Preview, recoveryThrottleIntervalMs = props.recoveryThrottleIntervalMs, renderChannels = props.renderChannels, _k = props.sendChannelsToList, sendChannelsToList = _k === void 0 ? false : _k, _l = props.setActiveChannelOnMount, setActiveChannelOnMount = _l === void 0 ? true : _l, _m = props.showChannelSearch, showChannelSearch = _m === void 0 ? false : _m, _o = props.sort, sort = _o === void 0 ? DEFAULT_SORT : _o, _p = props.watchers, watchers = _p === void 0 ? {} : _p;
         var _q = useChatContext('ChannelList'), channel = _q.channel, channelsQueryState = _q.channelsQueryState, client = _q.client, closeMobileNav = _q.closeMobileNav, customClasses = _q.customClasses, _r = _q.navOpen, navOpen = _r === void 0 ? false : _r, setActiveChannel = _q.setActiveChannel, theme = _q.theme, useImageFlagEmojisOnWindows = _q.useImageFlagEmojisOnWindows;
         var channelListRef = React$2.useRef(null);
         var _s = React$2.useState(0), channelUpdateCount = _s[0], setChannelUpdateCount = _s[1];
@@ -52325,7 +52368,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         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;
         useMobileNavigation(channelListRef, navOpen, closeMobileNav);
-        useMessageNewListener(setChannels, lockChannelOrder, allowNewMessagesFromUnfilteredChannels);
+        useMessageNewListener(setChannels, onMessageNewHandler, lockChannelOrder, allowNewMessagesFromUnfilteredChannels);
         useNotificationMessageNewListener(setChannels, onMessageNew, allowNewMessagesFromUnfilteredChannels);
         useNotificationAddedToChannelListener(setChannels, onAddedToChannel, allowNewMessagesFromUnfilteredChannels);
         useNotificationRemovedFromChannelListener(setChannels, onRemovedFromChannel);
@@ -52387,7 +52430,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.1.1';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.2.0';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;