stream-chat-react 10.10.2 → 10.12.0

package/dist/browser.full-bundle.js

@@ -9993,6 +9993,24 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
 
     var relativeTime = relativeTime$1.exports;
 
+    var utc$1 = {exports: {}};
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
+    (function (module, exports) {
+    	!function(t,i){module.exports=i();}(commonjsGlobal,function(){return function(t,i,e){var s=i.prototype;e.utc=function(t){return new i({date:t,utc:!0,args:arguments})},s.utc=function(t){var i=e(this.toDate(),{locale:this.$L,utc:!0});return t?i.add(this.utcOffset(),"minute"):i},s.local=function(){return e(this.toDate(),{locale:this.$L,utc:!1})};var f=s.parse;s.parse=function(t){t.utc&&(this.$u=!0),this.$utils().u(t.$offset)||(this.$offset=t.$offset),f.call(this,t);};var n=s.init;s.init=function(){if(this.$u){var t=this.$d;this.$y=t.getUTCFullYear(),this.$M=t.getUTCMonth(),this.$D=t.getUTCDate(),this.$W=t.getUTCDay(),this.$H=t.getUTCHours(),this.$m=t.getUTCMinutes(),this.$s=t.getUTCSeconds(),this.$ms=t.getUTCMilliseconds();}else n.call(this);};var u=s.utcOffset;s.utcOffset=function(t,i){var e=this.$utils().u;if(e(t))return this.$u?0:e(this.$offset)?u.call(this):this.$offset;var s=Math.abs(t)<=16?60*t:t,f=this;if(i)return f.$offset=s,f.$u=0===t,f;if(0!==t){var n=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();(f=this.local().add(s+n,"minute")).$offset=s,f.$x.$localOffset=n;}else f=this.utc();return f};var o=s.format;s.format=function(t){var i=t||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return o.call(this,i)},s.valueOf=function(){var t=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||(new Date).getTimezoneOffset());return this.$d.valueOf()-6e4*t},s.isUTC=function(){return !!this.$u},s.toISOString=function(){return this.toDate().toISOString()},s.toString=function(){return this.toDate().toUTCString()};var r=s.toDate;s.toDate=function(t){return "s"===t&&this.$offset?e(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():r.call(this)};var a=s.diff;s.diff=function(t,i,s){if(t&&this.$u===t.$u)return a.call(this,t,i,s);var f=this.local(),n=e(t).local();return a.call(f,n,i,s)};}});
+    } (utc$1));
+
+    var utc = utc$1.exports;
+
+    var timezone$1 = {exports: {}};
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
+    (function (module, exports) {
+    	!function(t,e){module.exports=e();}(commonjsGlobal,function(){var t={year:0,month:1,day:2,hour:3,minute:4,second:5},e={};return function(n,i,r){var o,u=r().utcOffset(),a=function(t,n,i){void 0===i&&(i={});var r=new Date(t);return function(t,n){void 0===n&&(n={});var i=n.timeZoneName||"short",r=t+"|"+i,o=e[r];return o||(o=new Intl.DateTimeFormat("en-US",{hour12:!1,timeZone:t,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",timeZoneName:i}),e[r]=o),o}(n,i).formatToParts(r)},f=function(e,n){for(var i=a(e,n),o=[],u=0;u<i.length;u+=1){var f=i[u],s=f.type,m=f.value,c=t[s];c>=0&&(o[c]=parseInt(m,10));}var d=o[3],v=24===d?0:d,h=o[0]+"-"+o[1]+"-"+o[2]+" "+v+":"+o[4]+":"+o[5]+":000",l=+e;return (r.utc(h).valueOf()-(l-=l%1e3))/6e4},s=i.prototype;s.tz=function(t,e){void 0===t&&(t=o);var n=this.utcOffset(),i=this.toDate().toLocaleString("en-US",{timeZone:t}),a=Math.round((this.toDate()-new Date(i))/1e3/60),f=r(i).$set("millisecond",this.$ms).utcOffset(u-a,!0);if(e){var s=f.utcOffset();f=f.add(n-s,"minute");}return f.$x.$timezone=t,f},s.offsetName=function(t){var e=this.$x.$timezone||r.tz.guess(),n=a(this.valueOf(),e,{timeZoneName:t}).find(function(t){return "timezonename"===t.type.toLowerCase()});return n&&n.value};var m=s.startOf;s.startOf=function(t,e){if(!this.$x||!this.$x.$timezone)return m.call(this,t,e);var n=r(this.format("YYYY-MM-DD HH:mm:ss:SSS"));return m.call(n,t,e).tz(this.$x.$timezone,!0)},r.tz=function(t,e,n){var i=n&&e,u=n||e||o,a=f(+r(),u);if("string"!=typeof t)return r(t).tz(u);var s=function(t,e,n){var i=t-60*e*1e3,r=f(i,n);if(e===r)return [i,e];var o=f(i-=60*(r-e)*1e3,n);return r===o?[i,r]:[t-60*Math.min(r,o)*1e3,Math.max(r,o)]}(r.utc(t,i).valueOf(),a,u),m=s[0],c=s[1],d=r(m).utcOffset(c);return d.$x.$timezone=u,d},r.tz.guess=function(){return Intl.DateTimeFormat().resolvedOptions().timeZone},r.tz.setDefault=function(t){o=t;};}});
+    } (timezone$1));
+
+    var timezone = timezone$1.exports;
+
     var de$3 = {exports: {}};
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
@@ -10080,6 +10098,8 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var defaultNS = 'translation';
     var defaultLng = 'en';
     dayjs_minExports.extend(updateLocale);
+    dayjs_minExports.extend(utc);
+    dayjs_minExports.extend(timezone);
     dayjs_minExports.updateLocale('de', {
         calendar: {
             lastDay: '[gestern um] LT',
@@ -10248,6 +10268,9 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
     var isDayJs = function (dateTimeParser) {
         return dateTimeParser.extend !== undefined;
     };
+    var supportsTz = function (dateTimeParser) {
+        return dateTimeParser.tz !== undefined;
+    };
     /**
      * Wrapper around [i18next](https://www.i18next.com/) class for Stream related translations.
      * Instance of this class should be provided to Chat component to handle translations.
@@ -10491,6 +10514,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             this.logger = finalOptions.logger;
             this.currentLanguage = finalOptions.language;
             this.DateTimeParser = finalOptions.DateTimeParser;
+            this.timezone = finalOptions.timezone;
             try {
                 if (this.DateTimeParser && isDayJs(this.DateTimeParser)) {
                     this.DateTimeParser.extend(localizedFormat);
@@ -10540,19 +10564,18 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
                     "register the locale config with Streami18n using registerTranslation(language, translation, customDayjsLocale)");
             }
             this.tDateTimeParser = function (timestamp) {
-                if (finalOptions.disableDateTimeTranslations || !_this.localeExists(_this.currentLanguage)) {
-                    /**
-                     * TS needs to know which is being called to accept the chain call
-                     */
-                    if (isDayJs(_this.DateTimeParser)) {
-                        return _this.DateTimeParser(timestamp).locale(defaultLng);
-                    }
-                    return _this.DateTimeParser(timestamp).locale(defaultLng);
-                }
+                var language = finalOptions.disableDateTimeTranslations || !_this.localeExists(_this.currentLanguage)
+                    ? defaultLng
+                    : _this.currentLanguage;
                 if (isDayJs(_this.DateTimeParser)) {
-                    return _this.DateTimeParser(timestamp).locale(_this.currentLanguage);
+                    return supportsTz(_this.DateTimeParser)
+                        ? _this.DateTimeParser(timestamp).tz(_this.timezone).locale(language)
+                        : _this.DateTimeParser(timestamp).locale(language);
+                }
+                if (supportsTz(_this.DateTimeParser) && _this.timezone) {
+                    return _this.DateTimeParser(timestamp).tz(_this.timezone).locale(language);
                 }
-                return _this.DateTimeParser(timestamp).locale(_this.currentLanguage);
+                return _this.DateTimeParser(timestamp).locale(language);
             };
         }
         /**
@@ -42937,7 +42960,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             }, 1000);
             return function () { return clearInterval(countdownInterval); };
         });
-        return (React__default["default"].createElement("div", { className: 'str-chat__message-input-cooldown', "data-testid": 'cooldown-timer' }, seconds === 0 ? null : seconds));
+        return (React__default["default"].createElement("div", { className: 'str-chat__message-input-cooldown', "data-testid": 'cooldown-timer' }, seconds));
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useCommandTrigger = function () {
@@ -43653,9 +43676,12 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         }, [messages, (_a = client.user) === null || _a === void 0 ? void 0 : _a.id, latestMessageDatesByChannels, channel.cid]);
         React$2.useEffect(function () {
             var timeSinceOwnLastMessage = ownLatestMessageDate
-                ? (new Date().getTime() - ownLatestMessageDate.getTime()) / 1000
+                ? // prevent negative values
+                    Math.max(0, (new Date().getTime() - ownLatestMessageDate.getTime()) / 1000)
                 : undefined;
-            setCooldownRemaining(!skipCooldown && timeSinceOwnLastMessage && cooldownInterval > timeSinceOwnLastMessage
+            setCooldownRemaining(!skipCooldown &&
+                typeof timeSinceOwnLastMessage !== 'undefined' &&
+                cooldownInterval > timeSinceOwnLastMessage
                 ? Math.round(cooldownInterval - timeSinceOwnLastMessage)
                 : 0);
         }, [cooldownInterval, ownLatestMessageDate, skipCooldown]);
@@ -45098,6 +45124,13 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         if (message.deleted_at || message.type === 'deleted') {
             return React__default["default"].createElement(MessageDeleted$1, { message: message });
         }
+        /** FIXME: isReactionEnabled should be removed with next major version and a proper centralized permissions logic should be put in place
+         * With the current permissions implementation it would be sth like:
+         * const messageActions = getMessageActions();
+         * const canReact = messageActions.includes(MESSAGE_ACTIONS.react);
+         */
+        var canReact = isReactionEnabled;
+        var canShowReactions = hasReactions;
         var showMetadata = !groupedByUser || endOfGroup;
         var showReplyCountButton = !threadList && !!message.reply_count;
         var allowRetry = message.status === 'failed' && message.errorStatusCode !== 403;
@@ -45107,7 +45140,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             'pinned-message': message.pinned,
             'str-chat__message--has-attachment': hasAttachment,
             'str-chat__message--highlighted': highlighted,
-            'str-chat__message--with-reactions str-chat__message-with-thread-link': hasReactions && isReactionEnabled,
+            'str-chat__message--with-reactions str-chat__message-with-thread-link': canShowReactions,
             'str-chat__message-send-can-be-retried': (message === null || message === void 0 ? void 0 : message.status) === 'failed' && (message === null || message === void 0 ? void 0 : message.errorStatusCode) !== 403,
             'str-chat__virtual-message__wrapper--end': endOfGroup,
             'str-chat__virtual-message__wrapper--first': firstOfGroup,
@@ -45124,8 +45157,8 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
                     }), "data-testid": 'message-inner', onClick: allowRetry ? function () { return handleRetry(message); } : undefined, onKeyUp: allowRetry ? function () { return handleRetry(message); } : undefined },
                     React__default["default"].createElement(MessageOptions$1, null),
                     React__default["default"].createElement("div", { className: 'str-chat__message-reactions-host' },
-                        hasReactions && isReactionEnabled && React__default["default"].createElement(ReactionsList$1, { reverse: true }),
-                        showDetailedReactions && isReactionEnabled && (React__default["default"].createElement(ReactionSelector$1, { ref: reactionSelectorRef }))),
+                        canShowReactions && React__default["default"].createElement(ReactionsList$1, { reverse: true }),
+                        showDetailedReactions && canReact && React__default["default"].createElement(ReactionSelector$1, { ref: reactionSelectorRef })),
                     React__default["default"].createElement("div", { className: 'str-chat__message-bubble' },
                         ((_a = message.attachments) === null || _a === void 0 ? void 0 : _a.length) && !message.quoted_message ? (React__default["default"].createElement(Attachment, { actionHandler: handleAction, attachments: message.attachments })) : null,
                         React__default["default"].createElement(MessageText, { message: message, renderText: renderText }),
@@ -46801,6 +46834,63 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         return muted;
     };
 
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};exports.MessageDeliveryStatus = void 0;
+    (function (MessageDeliveryStatus) {
+        MessageDeliveryStatus["DELIVERED"] = "delivered";
+        MessageDeliveryStatus["READ"] = "read";
+    })(exports.MessageDeliveryStatus || (exports.MessageDeliveryStatus = {}));
+    var useMessageDeliveryStatus = function (_a) {
+        var channel = _a.channel, lastMessage = _a.lastMessage;
+        var client = useChatContext().client;
+        var _b = React$2.useState(), messageDeliveryStatus = _b[0], setMessageDeliveryStatus = _b[1];
+        var isOwnMessage = React$2.useCallback(function (message) { var _a; return client.user && ((_a = message === null || message === void 0 ? void 0 : message.user) === null || _a === void 0 ? void 0 : _a.id) === client.user.id; }, [client]);
+        React$2.useEffect(function () {
+            var lastMessageIsOwn = isOwnMessage(lastMessage);
+            if (!(lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.created_at) || !lastMessageIsOwn)
+                return;
+            var lastMessageCreatedAtDate = typeof lastMessage.created_at === 'string'
+                ? new Date(lastMessage.created_at)
+                : lastMessage.created_at;
+            var channelReadByOthersAfterLastMessageUpdate = Object.values(channel.state.read).some(function (_a) {
+                var channelLastMarkedReadDate = _a.last_read, user = _a.user;
+                var ignoreOwnReadStatus = client.user && user.id !== client.user.id;
+                return ignoreOwnReadStatus && lastMessageCreatedAtDate < channelLastMarkedReadDate;
+            });
+            setMessageDeliveryStatus(channelReadByOthersAfterLastMessageUpdate
+                ? exports.MessageDeliveryStatus.READ
+                : exports.MessageDeliveryStatus.DELIVERED);
+        }, [channel.state.read, client, isOwnMessage, lastMessage]);
+        React$2.useEffect(function () {
+            var handleMessageNew = function (event) {
+                // the last message is not mine, so do not show the delivery status
+                if (!isOwnMessage(event.message)) {
+                    return setMessageDeliveryStatus(undefined);
+                }
+                return setMessageDeliveryStatus(exports.MessageDeliveryStatus.DELIVERED);
+            };
+            channel.on('message.new', handleMessageNew);
+            return function () {
+                channel.off('message.new', handleMessageNew);
+            };
+        }, [channel, client, isOwnMessage]);
+        React$2.useEffect(function () {
+            if (!isOwnMessage(lastMessage))
+                return;
+            var handleMarkRead = function (event) {
+                var _a, _b;
+                if (((_a = event.user) === null || _a === void 0 ? void 0 : _a.id) !== ((_b = client.user) === null || _b === void 0 ? void 0 : _b.id))
+                    setMessageDeliveryStatus(exports.MessageDeliveryStatus.READ);
+            };
+            channel.on('message.read', handleMarkRead);
+            return function () {
+                channel.off('message.read', handleMarkRead);
+            };
+        }, [channel, client, lastMessage, isOwnMessage]);
+        return {
+            messageDeliveryStatus: messageDeliveryStatus,
+        };
+    };
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var ChannelPreview = function (props) {
         var channel = props.channel, _a = props.Preview, Preview = _a === void 0 ? ChannelPreviewMessenger : _a, channelUpdateCount = props.channelUpdateCount;
         var _b = useChatContext('ChannelPreview'), activeChannel = _b.channel, client = _b.client, setActiveChannel = _b.setActiveChannel;
@@ -46808,6 +46898,10 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         var _d = useChannelPreviewInfo({ channel: channel }), displayImage = _d.displayImage, displayTitle = _d.displayTitle;
         var _e = React$2.useState(channel.state.messages[channel.state.messages.length - 1]), lastMessage = _e[0], setLastMessage = _e[1];
         var _f = React$2.useState(0), unread = _f[0], setUnread = _f[1];
+        var messageDeliveryStatus = useMessageDeliveryStatus({
+            channel: channel,
+            lastMessage: lastMessage,
+        }).messageDeliveryStatus;
         var isActive = (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.cid) === channel.cid;
         var muted = useIsChannelMuted(channel).muted;
         React$2.useEffect(function () {
@@ -46847,24 +46941,29 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         if (!Preview)
             return null;
         var latestMessage = getLatestMessagePreview(channel, t, userLanguage);
-        return (React__default["default"].createElement(Preview, __assign({}, props, { active: isActive, displayImage: displayImage, displayTitle: displayTitle, lastMessage: lastMessage, latestMessage: latestMessage, setActiveChannel: setActiveChannel, unread: unread })));
+        return (React__default["default"].createElement(Preview, __assign({}, props, { active: isActive, displayImage: displayImage, displayTitle: displayTitle, lastMessage: lastMessage, latestMessage: latestMessage, messageDeliveryStatus: messageDeliveryStatus, setActiveChannel: setActiveChannel, unread: unread })));
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var isChannel = function (output) { return output.cid != null; };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChannelSearch = function (_a) {
-        var _b = _a.channelType, channelType = _b === void 0 ? 'messaging' : _b, _c = _a.clearSearchOnClickOutside, clearSearchOnClickOutside = _c === void 0 ? true : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, onSearchCallback = _a.onSearch, onSearchExit = _a.onSearchExit, onSelectResult = _a.onSelectResult, _e = _a.searchForChannels, searchForChannels = _e === void 0 ? false : _e, searchFunction = _a.searchFunction, searchQueryParams = _a.searchQueryParams, setChannels = _a.setChannels;
-        var _f = useChatContext('useChannelSearch'), client = _f.client, setActiveChannel = _f.setActiveChannel, themeVersion = _f.themeVersion;
-        var _g = React$2.useState(false), inputIsFocused = _g[0], setInputIsFocused = _g[1];
-        var _h = React$2.useState(''), query = _h[0], setQuery = _h[1];
-        var _j = React$2.useState([]), results = _j[0], setResults = _j[1];
-        var _k = React$2.useState(false), searching = _k[0], setSearching = _k[1];
+        var _b = _a.channelType, channelType = _b === void 0 ? 'messaging' : _b, _c = _a.clearSearchOnClickOutside, clearSearchOnClickOutside = _c === void 0 ? true : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, onSearchCallback = _a.onSearch, onSearchExit = _a.onSearchExit, onSelectResult = _a.onSelectResult, _e = _a.searchDebounceIntervalMs, searchDebounceIntervalMs = _e === void 0 ? 300 : _e, _f = _a.searchForChannels, searchForChannels = _f === void 0 ? false : _f, searchFunction = _a.searchFunction, searchQueryParams = _a.searchQueryParams, setChannels = _a.setChannels;
+        var _g = useChatContext('useChannelSearch'), client = _g.client, setActiveChannel = _g.setActiveChannel, themeVersion = _g.themeVersion;
+        var _h = React$2.useState(false), inputIsFocused = _h[0], setInputIsFocused = _h[1];
+        var _j = React$2.useState(''), query = _j[0], setQuery = _j[1];
+        var _k = React$2.useState([]), results = _k[0], setResults = _k[1];
+        var _l = React$2.useState(false), searching = _l[0], setSearching = _l[1];
+        var searchQueryPromiseInProgress = React$2.useRef();
+        var shouldIgnoreQueryResults = React$2.useRef(false);
         var inputRef = React$2.useRef(null);
         var searchBarRef = React$2.useRef(null);
         var clearState = React$2.useCallback(function () {
             setQuery('');
             setResults([]);
             setSearching(false);
+            if (searchQueryPromiseInProgress.current) {
+                shouldIgnoreQueryResults.current = true;
+            }
         }, []);
         var activateSearch = React$2.useCallback(function () {
             setInputIsFocused(true);
@@ -46947,45 +47046,56 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             });
         }); }, [clearSearchOnClickOutside, client, exitSearch, onSelectResult, setActiveChannel, setChannels]);
         var getChannels = React$2.useCallback(function (text) { return __awaiter(void 0, void 0, void 0, function () {
-            var userResponse, channelResponse, _a, channels, users_1, users, error_1;
+            var results, userQueryPromise, users, channelQueryPromise, _a, channels, users, error_1;
             var _b, _c, _d, _e, _f, _g;
             return __generator(this, function (_h) {
                 switch (_h.label) {
                     case 0:
-                        if (!text || searching)
-                            return [2 /*return*/];
-                        setSearching(true);
+                        results = [];
                         _h.label = 1;
                     case 1:
                         _h.trys.push([1, 6, , 7]);
-                        return [4 /*yield*/, client.queryUsers(__assign({ $or: [{ id: { $autocomplete: text } }, { name: { $autocomplete: text } }], id: { $ne: client.userID } }, (_b = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.userFilters) === null || _b === void 0 ? void 0 : _b.filters), __assign({ id: 1 }, (_c = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.userFilters) === null || _c === void 0 ? void 0 : _c.sort), __assign({ limit: 8 }, (_d = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.userFilters) === null || _d === void 0 ? void 0 : _d.options))];
+                        userQueryPromise = client.queryUsers(__assign({ $or: [{ id: { $autocomplete: text } }, { name: { $autocomplete: text } }], id: { $ne: client.userID } }, (_b = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.userFilters) === null || _b === void 0 ? void 0 : _b.filters), __assign({ id: 1 }, (_c = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.userFilters) === null || _c === void 0 ? void 0 : _c.sort), __assign({ limit: 8 }, (_d = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.userFilters) === null || _d === void 0 ? void 0 : _d.options));
+                        if (!!searchForChannels) return [3 /*break*/, 3];
+                        searchQueryPromiseInProgress.current = userQueryPromise;
+                        return [4 /*yield*/, searchQueryPromiseInProgress.current];
                     case 2:
-                        userResponse = _h.sent();
-                        if (!searchForChannels) return [3 /*break*/, 4];
-                        channelResponse = client.queryChannels(__assign({ name: { $autocomplete: text } }, (_e = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.channelFilters) === null || _e === void 0 ? void 0 : _e.filters), ((_f = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.channelFilters) === null || _f === void 0 ? void 0 : _f.sort) || {}, __assign({ limit: 5 }, (_g = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.channelFilters) === null || _g === void 0 ? void 0 : _g.options));
-                        return [4 /*yield*/, Promise.all([channelResponse, userResponse])];
-                    case 3:
-                        _a = _h.sent(), channels = _a[0], users_1 = _a[1].users;
-                        setResults(__spreadArray(__spreadArray([], channels, true), users_1, true));
-                        setSearching(false);
-                        return [2 /*return*/];
-                    case 4: return [4 /*yield*/, Promise.resolve(userResponse)];
-                    case 5:
                         users = (_h.sent()).users;
-                        setResults(users);
-                        return [3 /*break*/, 7];
+                        results = users;
+                        return [3 /*break*/, 5];
+                    case 3:
+                        channelQueryPromise = client.queryChannels(__assign({ name: { $autocomplete: text } }, (_e = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.channelFilters) === null || _e === void 0 ? void 0 : _e.filters), ((_f = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.channelFilters) === null || _f === void 0 ? void 0 : _f.sort) || {}, __assign({ limit: 5 }, (_g = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.channelFilters) === null || _g === void 0 ? void 0 : _g.options));
+                        searchQueryPromiseInProgress.current = Promise.all([
+                            channelQueryPromise,
+                            userQueryPromise,
+                        ]);
+                        return [4 /*yield*/, searchQueryPromiseInProgress.current];
+                    case 4:
+                        _a = _h.sent(), channels = _a[0], users = _a[1].users;
+                        results = __spreadArray(__spreadArray([], channels, true), users, true);
+                        _h.label = 5;
+                    case 5: return [3 /*break*/, 7];
                     case 6:
                         error_1 = _h.sent();
-                        clearState();
                         console.error(error_1);
                         return [3 /*break*/, 7];
                     case 7:
                         setSearching(false);
+                        if (!shouldIgnoreQueryResults.current) {
+                            setResults(results);
+                        }
+                        else {
+                            shouldIgnoreQueryResults.current = false;
+                        }
+                        searchQueryPromiseInProgress.current = undefined;
                         return [2 /*return*/];
                 }
             });
-        }); }, [client, searching, searchForChannels]);
-        var getChannelsThrottled = lodash_throttle(getChannels, 200);
+        }); }, [client, searchForChannels, searchQueryParams]);
+        var scheduleGetChannels = React$2.useCallback(lodash_debounce(getChannels, searchDebounceIntervalMs), [
+            getChannels,
+            searchDebounceIntervalMs,
+        ]);
         var onSearch = React$2.useCallback(function (event) {
             event.preventDefault();
             if (disabled)
@@ -46997,12 +47107,17 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
                     setSearching: setSearching,
                 }, event);
             }
-            else {
+            else if (event.target.value) {
+                setSearching(true);
                 setQuery(event.target.value);
-                getChannelsThrottled(event.target.value);
+                scheduleGetChannels(event.target.value);
+            }
+            else if (!event.target.value) {
+                clearState();
+                scheduleGetChannels.cancel();
             }
             onSearchCallback === null || onSearchCallback === void 0 ? void 0 : onSearchCallback(event);
-        }, [disabled, getChannelsThrottled, onSearchCallback, searchFunction]);
+        }, [clearState, disabled, scheduleGetChannels, onSearchCallback, searchFunction]);
         return {
             activateSearch: activateSearch,
             clearState: clearState,
@@ -47407,7 +47522,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
 
     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 = '10.10.2';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '10.12.0';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;
@@ -48075,7 +48190,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var reactionHandlerWarning = "Reaction handler was called, but it is missing one of its required arguments.\nMake sure the ChannelAction and ChannelState contexts are properly set and the hook is initialized with a valid message.";
     var useReactionHandler = function (message) {
         var updateMessage = useChannelActionContext('useReactionHandler').updateMessage;
-        var channel = useChannelStateContext('useReactionHandler').channel;
+        var _a = useChannelStateContext('useReactionHandler'), channel = _a.channel, channelCapabilities = _a.channelCapabilities;
         var client = useChatContext('useReactionHandler').client;
         var createMessagePreview = React$2.useCallback(function (add, reaction, message) {
             var _a, _b;
@@ -48099,7 +48214,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
                 ? __spreadArray([reaction], ((message === null || message === void 0 ? void 0 : message.own_reactions) || []), true) : (_b = message === null || message === void 0 ? void 0 : message.own_reactions) === null || _b === void 0 ? void 0 : _b.filter(function (item) { return item.type !== reaction.type; });
             return __assign(__assign({}, message), { latest_reactions: newReactions || message.latest_reactions, own_reactions: newOwnReactions, reaction_counts: newReactionCounts, reaction_scores: newReactionCounts });
         }, [client.user, client.userID]);
-        var creatReactionPreview = function (type) {
+        var createReactionPreview = function (type) {
             var _a;
             return ({
                 message_id: message === null || message === void 0 ? void 0 : message.id,
@@ -48111,33 +48226,32 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         };
         var toggleReaction = lodash_throttle(function (id, type, add) { return __awaiter(void 0, void 0, void 0, function () {
             var newReaction, tempMessage, messageResponse, _a;
-            var _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
-                        if (!message || ((_b = channel.data) === null || _b === void 0 ? void 0 : _b.frozen))
+                        if (!message || !channelCapabilities['send-reaction'])
                             return [2 /*return*/];
-                        newReaction = creatReactionPreview(type);
+                        newReaction = createReactionPreview(type);
                         tempMessage = createMessagePreview(add, newReaction, message);
-                        _c.label = 1;
+                        _b.label = 1;
                     case 1:
-                        _c.trys.push([1, 6, , 7]);
+                        _b.trys.push([1, 6, , 7]);
                         updateMessage(tempMessage);
                         if (!add) return [3 /*break*/, 3];
                         return [4 /*yield*/, channel.sendReaction(id, { type: type })];
                     case 2:
-                        _a = _c.sent();
+                        _a = _b.sent();
                         return [3 /*break*/, 5];
                     case 3: return [4 /*yield*/, channel.deleteReaction(id, type)];
                     case 4:
-                        _a = _c.sent();
-                        _c.label = 5;
+                        _a = _b.sent();
+                        _b.label = 5;
                     case 5:
                         messageResponse = _a;
                         updateMessage(messageResponse.message);
                         return [3 /*break*/, 7];
                     case 6:
-                        _c.sent();
+                        _b.sent();
                         // revert to the original message if the API call fails
                         updateMessage(message);
                         return [3 /*break*/, 7];
@@ -48192,12 +48306,10 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         }); };
     };
     var useReactionClick = function (message, reactionSelectorRef, messageWrapperRef, closeReactionSelectorOnClick) {
-        var _a;
-        var _b = useChannelStateContext('useReactionClick'), channel = _b.channel, _c = _b.channelCapabilities, channelCapabilities = _c === void 0 ? {} : _c, channelConfig = _b.channelConfig;
-        var _d = React$2.useState(false), showDetailedReactions = _d[0], setShowDetailedReactions = _d[1];
+        var _a = useChannelStateContext('useReactionClick').channelCapabilities, channelCapabilities = _a === void 0 ? {} : _a;
+        var _b = React$2.useState(false), showDetailedReactions = _b[0], setShowDetailedReactions = _b[1];
         var hasListener = React$2.useRef(false);
-        var isFrozen = !!((_a = channel.data) === null || _a === void 0 ? void 0 : _a.frozen);
-        var isReactionEnabled = ((channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.reactions) !== false && channelCapabilities['send-reaction']) || isFrozen;
+        var isReactionEnabled = channelCapabilities['send-reaction'];
         var messageDeleted = !!(message === null || message === void 0 ? void 0 : message.deleted_at);
         var closeDetailedReactions = React$2.useCallback(function (event) {
             var _a;
@@ -48245,9 +48357,8 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             }
         }, [messageDeleted, closeDetailedReactions, messageWrapperRef]);
         var onReactionListClick = function (event) {
-            if (event === null || event === void 0 ? void 0 : event.stopPropagation) {
-                event.stopPropagation();
-            }
+            var _a;
+            (_a = event === null || event === void 0 ? void 0 : event.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(event);
             setShowDetailedReactions(function (prev) { return !prev; });
         };
         return {