stream-chat-react 10.10.2 → 10.12.0

package/dist/i18n/Streami18n.js

@@ -6,6 +6,8 @@ import updateLocale from 'dayjs/plugin/updateLocale';
 import LocalizedFormat from 'dayjs/plugin/localizedFormat';
 import localeData from 'dayjs/plugin/localeData';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
 import { deTranslations, enTranslations, esTranslations, frTranslations, hiTranslations, itTranslations, jaTranslations, koTranslations, nlTranslations, ptTranslations, ruTranslations, trTranslations, } from './translations';
 var defaultNS = 'translation';
 var defaultLng = 'en';
@@ -25,6 +27,8 @@ import 'dayjs/locale/tr';
 // to make sure I don't mess up language at other places in app.
 import 'dayjs/locale/en';
 Dayjs.extend(updateLocale);
+Dayjs.extend(utc);
+Dayjs.extend(timezone);
 Dayjs.updateLocale('de', {
     calendar: {
         lastDay: '[gestern um] LT',
@@ -193,6 +197,9 @@ var en_locale = {
 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.
@@ -436,6 +443,7 @@ var Streami18n = /** @class */ (function () {
         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);
@@ -485,19 +493,18 @@ var Streami18n = /** @class */ (function () {
                 "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);
         };
     }
     /**

package/dist/index.cjs.js

@@ -14,6 +14,8 @@ var i18n = require('i18next');
 var updateLocale = require('dayjs/plugin/updateLocale');
 var localeData = require('dayjs/plugin/localeData');
 var relativeTime = require('dayjs/plugin/relativeTime');
+var utc = require('dayjs/plugin/utc');
+var timezone = require('dayjs/plugin/timezone');
 require('dayjs/locale/de');
 require('dayjs/locale/es');
 require('dayjs/locale/fr');
@@ -88,6 +90,8 @@ var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var updateLocale__default = /*#__PURE__*/_interopDefaultLegacy(updateLocale);
 var localeData__default = /*#__PURE__*/_interopDefaultLegacy(localeData);
 var relativeTime__default = /*#__PURE__*/_interopDefaultLegacy(relativeTime);
+var utc__default = /*#__PURE__*/_interopDefaultLegacy(utc);
+var timezone__default = /*#__PURE__*/_interopDefaultLegacy(timezone);
 var ImageGallery__default = /*#__PURE__*/_interopDefaultLegacy(ImageGallery);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var linkify__namespace = /*#__PURE__*/_interopNamespace(linkify);
@@ -609,6 +613,8 @@ var Cancel="İptal";var Close="Kapat";var Delete="Sil";var Delivered="İletildi"
 var defaultNS = 'translation';
 var defaultLng = 'en';
 Dayjs__default["default"].extend(updateLocale__default["default"]);
+Dayjs__default["default"].extend(utc__default["default"]);
+Dayjs__default["default"].extend(timezone__default["default"]);
 Dayjs__default["default"].updateLocale('de', {
     calendar: {
         lastDay: '[gestern um] LT',
@@ -777,6 +783,9 @@ var en_locale = {
 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.
@@ -1020,6 +1029,7 @@ var Streami18n = /** @class */ (function () {
         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__default["default"]);
@@ -1069,19 +1079,18 @@ var Streami18n = /** @class */ (function () {
                 "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);
         };
     }
     /**
@@ -30422,7 +30431,7 @@ var CooldownTimer = function (_a) {
         }, 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));
 };
 
 var useCommandTrigger = function () {
@@ -31138,9 +31147,12 @@ var useCooldownTimer = function () {
     }, [messages, (_a = client.user) === null || _a === void 0 ? void 0 : _a.id, latestMessageDatesByChannels, channel.cid]);
     React.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]);
@@ -32575,6 +32587,13 @@ var MessageSimpleWithContext = function (props) {
     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;
@@ -32584,7 +32603,7 @@ var MessageSimpleWithContext = function (props) {
         '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,
@@ -32601,8 +32620,8 @@ var MessageSimpleWithContext = function (props) {
                 }), "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 }),
@@ -34274,6 +34293,63 @@ var useIsChannelMuted = function (channel) {
     return muted;
 };
 
+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.useState(), messageDeliveryStatus = _b[0], setMessageDeliveryStatus = _b[1];
+    var isOwnMessage = React.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.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.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.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,
+    };
+};
+
 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;
@@ -34281,6 +34357,10 @@ var ChannelPreview = function (props) {
     var _d = useChannelPreviewInfo({ channel: channel }), displayImage = _d.displayImage, displayTitle = _d.displayTitle;
     var _e = React.useState(channel.state.messages[channel.state.messages.length - 1]), lastMessage = _e[0], setLastMessage = _e[1];
     var _f = React.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.useEffect(function () {
@@ -34320,24 +34400,29 @@ var ChannelPreview = function (props) {
     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 })));
 };
 
 var isChannel = function (output) { return output.cid != null; };
 
 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.useState(false), inputIsFocused = _g[0], setInputIsFocused = _g[1];
-    var _h = React.useState(''), query = _h[0], setQuery = _h[1];
-    var _j = React.useState([]), results = _j[0], setResults = _j[1];
-    var _k = React.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.useState(false), inputIsFocused = _h[0], setInputIsFocused = _h[1];
+    var _j = React.useState(''), query = _j[0], setQuery = _j[1];
+    var _k = React.useState([]), results = _k[0], setResults = _k[1];
+    var _l = React.useState(false), searching = _l[0], setSearching = _l[1];
+    var searchQueryPromiseInProgress = React.useRef();
+    var shouldIgnoreQueryResults = React.useRef(false);
     var inputRef = React.useRef(null);
     var searchBarRef = React.useRef(null);
     var clearState = React.useCallback(function () {
         setQuery('');
         setResults([]);
         setSearching(false);
+        if (searchQueryPromiseInProgress.current) {
+            shouldIgnoreQueryResults.current = true;
+        }
     }, []);
     var activateSearch = React.useCallback(function () {
         setInputIsFocused(true);
@@ -34420,45 +34505,56 @@ var useChannelSearch = function (_a) {
         });
     }); }, [clearSearchOnClickOutside, client, exitSearch, onSelectResult, setActiveChannel, setChannels]);
     var getChannels = React.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 = throttle__default["default"](getChannels, 200);
+    }); }, [client, searchForChannels, searchQueryParams]);
+    var scheduleGetChannels = React.useCallback(debounce__default["default"](getChannels, searchDebounceIntervalMs), [
+        getChannels,
+        searchDebounceIntervalMs,
+    ]);
     var onSearch = React.useCallback(function (event) {
         event.preventDefault();
         if (disabled)
@@ -34470,12 +34566,17 @@ var useChannelSearch = function (_a) {
                 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,
@@ -34868,7 +34969,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '10.10.2';
+var version = '10.12.0';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -35520,7 +35621,7 @@ notifications) {
 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.useCallback(function (add, reaction, message) {
         var _a, _b;
@@ -35544,7 +35645,7 @@ var useReactionHandler = function (message) {
             ? __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,
@@ -35556,33 +35657,32 @@ var useReactionHandler = function (message) {
     };
     var toggleReaction = throttle__default["default"](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];
@@ -35637,12 +35737,10 @@ var useReactionHandler = function (message) {
     }); };
 };
 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.useState(false), showDetailedReactions = _d[0], setShowDetailedReactions = _d[1];
+    var _a = useChannelStateContext('useReactionClick').channelCapabilities, channelCapabilities = _a === void 0 ? {} : _a;
+    var _b = React.useState(false), showDetailedReactions = _b[0], setShowDetailedReactions = _b[1];
     var hasListener = React.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.useCallback(function (event) {
         var _a;
@@ -35690,9 +35788,8 @@ var useReactionClick = function (message, reactionSelectorRef, messageWrapperRef
         }
     }, [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 {