stream-chat-react 10.11.0 → 10.13.0

package/dist/index.cjs.js

@@ -31006,7 +31006,7 @@ var MessageInputFlat = function () {
 var MessageInputV1 = function () {
     var _a = useChannelStateContext('MessageInputFlat'), acceptedFiles = _a.acceptedFiles, multipleUploads = _a.multipleUploads, quotedMessage = _a.quotedMessage;
     var t = useTranslationContext('MessageInputFlat').t;
-    var _b = useMessageInputContext('MessageInputFlat'), closeEmojiPicker = _b.closeEmojiPicker, cooldownRemaining = _b.cooldownRemaining, emojiPickerIsOpen = _b.emojiPickerIsOpen, handleSubmit = _b.handleSubmit, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, numberOfUploads = _b.numberOfUploads, openEmojiPicker = _b.openEmojiPicker, setCooldownRemaining = _b.setCooldownRemaining, uploadNewFiles = _b.uploadNewFiles;
+    var _b = useMessageInputContext('MessageInputFlat'), closeEmojiPicker = _b.closeEmojiPicker, cooldownRemaining = _b.cooldownRemaining, emojiPickerIsOpen = _b.emojiPickerIsOpen, handleSubmit = _b.handleSubmit, hideSendButton = _b.hideSendButton, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, numberOfUploads = _b.numberOfUploads, openEmojiPicker = _b.openEmojiPicker, setCooldownRemaining = _b.setCooldownRemaining, uploadNewFiles = _b.uploadNewFiles;
     var _c = useComponentContext('MessageInputFlat'), _d = _c.CooldownTimer, CooldownTimer$1 = _d === void 0 ? CooldownTimer : _d, _e = _c.EmojiIcon, EmojiIcon = _e === void 0 ? EmojiIconLarge : _e, _f = _c.FileUploadIcon, FileUploadIcon = _f === void 0 ? FileUploadIconFlat : _f, _g = _c.QuotedMessagePreview, QuotedMessagePreview$1 = _g === void 0 ? QuotedMessagePreview : _g, _h = _c.SendButton, SendButton$1 = _h === void 0 ? SendButton : _h, _j = _c.AttachmentPreviewList, AttachmentPreviewList = _j === void 0 ? UploadsPreview : _j;
     return (React__default["default"].createElement("div", { className: clsx('str-chat__input-flat', 'str-chat__message-input', {
             'str-chat__input-flat--send-button-active': !!SendButton$1,
@@ -31033,12 +31033,12 @@ var MessageInputV1 = function () {
                         React__default["default"].createElement(FileUploadButton, { accepts: acceptedFiles, disabled: maxFilesLeft === 0, handleFiles: uploadNewFiles, multiple: multipleUploads },
                             React__default["default"].createElement("span", { className: 'str-chat__input-flat-fileupload' },
                                 React__default["default"].createElement(FileUploadIcon, null)))))),
-                !cooldownRemaining && React__default["default"].createElement(SendButton$1, { sendMessage: handleSubmit })))));
+                !(cooldownRemaining || hideSendButton) && React__default["default"].createElement(SendButton$1, { sendMessage: handleSubmit })))));
 };
 var MessageInputV2 = function () {
     var _a = useChannelStateContext('MessageInputV2'), _b = _a.acceptedFiles, acceptedFiles = _b === void 0 ? [] : _b, multipleUploads = _a.multipleUploads, quotedMessage = _a.quotedMessage;
     var t = useTranslationContext('MessageInputV2').t;
-    var _c = useMessageInputContext('MessageInputV2'), closeEmojiPicker = _c.closeEmojiPicker, cooldownRemaining = _c.cooldownRemaining, emojiPickerIsOpen = _c.emojiPickerIsOpen, findAndEnqueueURLsToEnrich = _c.findAndEnqueueURLsToEnrich, handleSubmit = _c.handleSubmit, isUploadEnabled = _c.isUploadEnabled, linkPreviews = _c.linkPreviews, maxFilesLeft = _c.maxFilesLeft, message = _c.message, numberOfUploads = _c.numberOfUploads, openEmojiPicker = _c.openEmojiPicker, setCooldownRemaining = _c.setCooldownRemaining, text = _c.text, uploadNewFiles = _c.uploadNewFiles;
+    var _c = useMessageInputContext('MessageInputV2'), closeEmojiPicker = _c.closeEmojiPicker, cooldownRemaining = _c.cooldownRemaining, emojiPickerIsOpen = _c.emojiPickerIsOpen, findAndEnqueueURLsToEnrich = _c.findAndEnqueueURLsToEnrich, handleSubmit = _c.handleSubmit, hideSendButton = _c.hideSendButton, isUploadEnabled = _c.isUploadEnabled, linkPreviews = _c.linkPreviews, maxFilesLeft = _c.maxFilesLeft, message = _c.message, numberOfUploads = _c.numberOfUploads, openEmojiPicker = _c.openEmojiPicker, setCooldownRemaining = _c.setCooldownRemaining, text = _c.text, uploadNewFiles = _c.uploadNewFiles;
     var _d = useComponentContext('MessageInputV2'), _e = _d.AttachmentPreviewList, AttachmentPreviewList$1 = _e === void 0 ? AttachmentPreviewList : _e, _f = _d.CooldownTimer, CooldownTimer$1 = _f === void 0 ? CooldownTimer : _f, _g = _d.EmojiIcon, EmojiIcon = _g === void 0 ? EmojiPickerIcon : _g, _h = _d.FileUploadIcon, FileUploadIcon = _h === void 0 ? UploadIcon : _h, _j = _d.LinkPreviewList, LinkPreviewList$1 = _j === void 0 ? LinkPreviewList : _j, _k = _d.QuotedMessagePreview, QuotedMessagePreview$1 = _k === void 0 ? QuotedMessagePreview : _k, _l = _d.SendButton, SendButton$1 = _l === void 0 ? SendButton : _l;
     var _m = React.useState(null), referenceElement = _m[0], setReferenceElement = _m[1];
     var _o = React.useState(null), popperElement = _o[0], setPopperElement = _o[1];
@@ -31087,7 +31087,7 @@ var MessageInputV2 = function () {
                                 React__default["default"].createElement(EmojiPicker, null))),
                             React__default["default"].createElement("button", { "aria-label": 'Emoji picker', className: 'str-chat__emoji-picker-button', onClick: emojiPickerIsOpen ? closeEmojiPicker : openEmojiPicker, ref: setReferenceElement, type: 'button' },
                                 React__default["default"].createElement(EmojiIcon, null))))),
-                !message && (React__default["default"].createElement(React__default["default"].Fragment, null, cooldownRemaining ? (React__default["default"].createElement(CooldownTimer$1, { cooldownInterval: cooldownRemaining, setCooldownRemaining: setCooldownRemaining })) : (React__default["default"].createElement(SendButton$1, { disabled: !numberOfUploads && !text.length, sendMessage: handleSubmit }))))))));
+                !hideSendButton && (React__default["default"].createElement(React__default["default"].Fragment, null, cooldownRemaining ? (React__default["default"].createElement(CooldownTimer$1, { cooldownInterval: cooldownRemaining, setCooldownRemaining: setCooldownRemaining })) : (React__default["default"].createElement(SendButton$1, { disabled: !numberOfUploads && !text.length, sendMessage: handleSubmit }))))))));
 };
 
 var EditMessageForm = function () {
@@ -32099,7 +32099,7 @@ var useMessageInputState = function (props) {
 };
 
 var useCreateMessageInputContext = function (value) {
-    var additionalTextareaProps = value.additionalTextareaProps, attachments = value.attachments, autocompleteTriggers = value.autocompleteTriggers, cancelURLEnrichment = value.cancelURLEnrichment, clearEditingState = value.clearEditingState, closeCommandsList = value.closeCommandsList, closeEmojiPicker = value.closeEmojiPicker, closeMentionsList = value.closeMentionsList, cooldownInterval = value.cooldownInterval, cooldownRemaining = value.cooldownRemaining, disabled = value.disabled, disableMentions = value.disableMentions, dismissLinkPreview = value.dismissLinkPreview, doFileUploadRequest = value.doFileUploadRequest, doImageUploadRequest = value.doImageUploadRequest, emojiIndex = value.emojiIndex, emojiPickerIsOpen = value.emojiPickerIsOpen, emojiPickerRef = value.emojiPickerRef, errorHandler = value.errorHandler, fileOrder = value.fileOrder, fileUploads = value.fileUploads, findAndEnqueueURLsToEnrich = value.findAndEnqueueURLsToEnrich, focus = value.focus, grow = value.grow, handleChange = value.handleChange, handleEmojiKeyDown = value.handleEmojiKeyDown, handleSubmit = value.handleSubmit, imageOrder = value.imageOrder, imageUploads = value.imageUploads, insertText = value.insertText, isUploadEnabled = value.isUploadEnabled, linkPreviews = value.linkPreviews, maxFilesLeft = value.maxFilesLeft, maxRows = value.maxRows, mentionAllAppUsers = value.mentionAllAppUsers, mentioned_users = value.mentioned_users, mentionQueryParams = value.mentionQueryParams, message = value.message, noFiles = value.noFiles, numberOfUploads = value.numberOfUploads, onPaste = value.onPaste, onSelectEmoji = value.onSelectEmoji, onSelectUser = value.onSelectUser, openCommandsList = value.openCommandsList, openEmojiPicker = value.openEmojiPicker, openMentionsList = value.openMentionsList, overrideSubmitHandler = value.overrideSubmitHandler, parent = value.parent, publishTypingEvent = value.publishTypingEvent, removeFile = value.removeFile, removeImage = value.removeImage, setCooldownRemaining = value.setCooldownRemaining, setText = value.setText, shouldSubmit = value.shouldSubmit, showCommandsList = value.showCommandsList, showMentionsList = value.showMentionsList, text = value.text, textareaRef = value.textareaRef, uploadFile = value.uploadFile, uploadImage = value.uploadImage, uploadNewFiles = value.uploadNewFiles, useMentionsTransliteration = value.useMentionsTransliteration;
+    var additionalTextareaProps = value.additionalTextareaProps, attachments = value.attachments, autocompleteTriggers = value.autocompleteTriggers, cancelURLEnrichment = value.cancelURLEnrichment, clearEditingState = value.clearEditingState, closeCommandsList = value.closeCommandsList, closeEmojiPicker = value.closeEmojiPicker, closeMentionsList = value.closeMentionsList, cooldownInterval = value.cooldownInterval, cooldownRemaining = value.cooldownRemaining, disabled = value.disabled, disableMentions = value.disableMentions, dismissLinkPreview = value.dismissLinkPreview, doFileUploadRequest = value.doFileUploadRequest, doImageUploadRequest = value.doImageUploadRequest, emojiIndex = value.emojiIndex, emojiPickerIsOpen = value.emojiPickerIsOpen, emojiPickerRef = value.emojiPickerRef, errorHandler = value.errorHandler, fileOrder = value.fileOrder, fileUploads = value.fileUploads, findAndEnqueueURLsToEnrich = value.findAndEnqueueURLsToEnrich, focus = value.focus, grow = value.grow, handleChange = value.handleChange, handleEmojiKeyDown = value.handleEmojiKeyDown, handleSubmit = value.handleSubmit, hideSendButton = value.hideSendButton, imageOrder = value.imageOrder, imageUploads = value.imageUploads, insertText = value.insertText, isUploadEnabled = value.isUploadEnabled, linkPreviews = value.linkPreviews, maxFilesLeft = value.maxFilesLeft, maxRows = value.maxRows, mentionAllAppUsers = value.mentionAllAppUsers, mentioned_users = value.mentioned_users, mentionQueryParams = value.mentionQueryParams, message = value.message, noFiles = value.noFiles, numberOfUploads = value.numberOfUploads, onPaste = value.onPaste, onSelectEmoji = value.onSelectEmoji, onSelectUser = value.onSelectUser, openCommandsList = value.openCommandsList, openEmojiPicker = value.openEmojiPicker, openMentionsList = value.openMentionsList, overrideSubmitHandler = value.overrideSubmitHandler, parent = value.parent, publishTypingEvent = value.publishTypingEvent, removeFile = value.removeFile, removeImage = value.removeImage, setCooldownRemaining = value.setCooldownRemaining, setText = value.setText, shouldSubmit = value.shouldSubmit, showCommandsList = value.showCommandsList, showMentionsList = value.showMentionsList, text = value.text, textareaRef = value.textareaRef, uploadFile = value.uploadFile, uploadImage = value.uploadImage, uploadNewFiles = value.uploadNewFiles, useMentionsTransliteration = value.useMentionsTransliteration;
     var editing = message === null || message === void 0 ? void 0 : message.editing;
     var fileUploadsValue = Object.entries(fileUploads)
         // eslint-disable-next-line
@@ -32146,6 +32146,7 @@ var useCreateMessageInputContext = function (value) {
         handleChange: handleChange,
         handleEmojiKeyDown: handleEmojiKeyDown,
         handleSubmit: handleSubmit,
+        hideSendButton: hideSendButton,
         imageOrder: imageOrder,
         imageUploads: imageUploads,
         insertText: insertText,
@@ -32190,6 +32191,7 @@ var useCreateMessageInputContext = function (value) {
         emojiPickerIsOpen,
         fileUploadsValue,
         findAndEnqueueURLsToEnrich,
+        hideSendButton,
         imageUploadsValue,
         isUploadEnabled,
         linkPreviewsValue,
@@ -32242,7 +32244,7 @@ var MessageInputSmall = function () {
     var setQuotedMessage = useChannelActionContext('MessageInputSmall').setQuotedMessage;
     var t = useTranslationContext('MessageInputSmall').t;
     var channel = useChatContext('MessageInputSmall').channel;
-    var _b = useMessageInputContext('MessageInputSmall'), closeEmojiPicker = _b.closeEmojiPicker, cooldownRemaining = _b.cooldownRemaining, emojiPickerIsOpen = _b.emojiPickerIsOpen, handleSubmit = _b.handleSubmit, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, numberOfUploads = _b.numberOfUploads, openEmojiPicker = _b.openEmojiPicker, setCooldownRemaining = _b.setCooldownRemaining, uploadNewFiles = _b.uploadNewFiles;
+    var _b = useMessageInputContext('MessageInputSmall'), closeEmojiPicker = _b.closeEmojiPicker, cooldownRemaining = _b.cooldownRemaining, emojiPickerIsOpen = _b.emojiPickerIsOpen, handleSubmit = _b.handleSubmit, hideSendButton = _b.hideSendButton, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, numberOfUploads = _b.numberOfUploads, openEmojiPicker = _b.openEmojiPicker, setCooldownRemaining = _b.setCooldownRemaining, uploadNewFiles = _b.uploadNewFiles;
     var _c = useComponentContext('MessageInputSmall'), _d = _c.CooldownTimer, CooldownTimer$1 = _d === void 0 ? CooldownTimer : _d, _e = _c.EmojiIcon, EmojiIcon = _e === void 0 ? EmojiIconSmall : _e, _f = _c.FileUploadIcon, FileUploadIcon = _f === void 0 ? FileUploadIconFlat : _f, _g = _c.SendButton, SendButton$1 = _g === void 0 ? SendButton : _g, _h = _c.QuotedMessagePreview, QuotedMessagePreview$1 = _h === void 0 ? QuotedMessagePreview : _h;
     React.useEffect(function () {
         var handleQuotedMessageUpdate = function (e) {
@@ -32285,7 +32287,7 @@ var MessageInputSmall = function () {
                             React__default["default"].createElement("button", { "aria-label": 'Emoji picker', className: 'str-chat__small-message-input-emojiselect', onClick: emojiPickerIsOpen ? closeEmojiPicker : openEmojiPicker },
                                 React__default["default"].createElement(EmojiIcon, null))))),
                     React__default["default"].createElement(EmojiPicker, { small: true })),
-                !cooldownRemaining && React__default["default"].createElement(SendButton$1, { sendMessage: handleSubmit })))));
+                !(cooldownRemaining || hideSendButton) && React__default["default"].createElement(SendButton$1, { sendMessage: handleSubmit })))));
 };
 
 var MMLReact = React__default["default"].lazy(function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -32611,7 +32613,7 @@ var MessageSimpleWithContext = function (props) {
     });
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         editing && (React__default["default"].createElement(Modal, { onClose: clearEditingState, open: editing },
-            React__default["default"].createElement(MessageInput, __assign({ clearEditingState: clearEditingState, grow: true, Input: EditMessageInput, message: message }, additionalMessageInputProps)))),
+            React__default["default"].createElement(MessageInput, __assign({ clearEditingState: clearEditingState, grow: true, hideSendButton: true, Input: EditMessageInput, message: message }, additionalMessageInputProps)))),
         React__default["default"].createElement("div", { className: rootClassName, key: message.id },
             themeVersion === '1' && React__default["default"].createElement(MessageStatus$1, null),
             message.user && (React__default["default"].createElement(Avatar$1, { image: message.user.image, name: message.user.name || message.user.id, onClick: onUserClick, onMouseOver: onUserHover, user: message.user })),
@@ -33078,15 +33080,15 @@ var UnMemoizedChannel = function (props) {
 };
 var ChannelInner = function (props) {
     var _a;
-    var acceptedFiles = props.acceptedFiles, activeUnreadHandler = props.activeUnreadHandler, channel = props.channel, children = props.children, doMarkReadRequest = props.doMarkReadRequest, doSendMessageRequest = props.doSendMessageRequest, doUpdateMessageRequest = props.doUpdateMessageRequest, _b = props.dragAndDropWindow, dragAndDropWindow = _b === void 0 ? false : _b, _c = props.emojiData, emojiData = _c === void 0 ? defaultEmojiData : _c, enrichURLForPreviewConfig = props.enrichURLForPreviewConfig, _d = props.LoadingErrorIndicator, LoadingErrorIndicator$1 = _d === void 0 ? LoadingErrorIndicator : _d, _e = props.LoadingIndicator, LoadingIndicator = _e === void 0 ? LoadingChannel : _e, maxNumberOfFiles = props.maxNumberOfFiles, _f = props.multipleUploads, multipleUploads = _f === void 0 ? true : _f, onMentionsClick = props.onMentionsClick, onMentionsHover = props.onMentionsHover, _g = props.optionalMessageInputProps, optionalMessageInputProps = _g === void 0 ? {} : _g, skipMessageDataMemoization = props.skipMessageDataMemoization;
-    var _h = useChatContext('Channel'), client = _h.client, customClasses = _h.customClasses, latestMessageDatesByChannels = _h.latestMessageDatesByChannels, mutes = _h.mutes, theme = _h.theme;
+    var acceptedFiles = props.acceptedFiles, activeUnreadHandler = props.activeUnreadHandler, channel = props.channel, children = props.children, doMarkReadRequest = props.doMarkReadRequest, doSendMessageRequest = props.doSendMessageRequest, doUpdateMessageRequest = props.doUpdateMessageRequest, _b = props.dragAndDropWindow, dragAndDropWindow = _b === void 0 ? false : _b, _c = props.emojiData, emojiData = _c === void 0 ? defaultEmojiData : _c, enrichURLForPreviewConfig = props.enrichURLForPreviewConfig, _d = props.initializeOnMount, initializeOnMount = _d === void 0 ? true : _d, _e = props.LoadingErrorIndicator, LoadingErrorIndicator$1 = _e === void 0 ? LoadingErrorIndicator : _e, _f = props.LoadingIndicator, LoadingIndicator = _f === void 0 ? LoadingChannel : _f, maxNumberOfFiles = props.maxNumberOfFiles, _g = props.multipleUploads, multipleUploads = _g === void 0 ? true : _g, onMentionsClick = props.onMentionsClick, onMentionsHover = props.onMentionsHover, _h = props.optionalMessageInputProps, optionalMessageInputProps = _h === void 0 ? {} : _h, skipMessageDataMemoization = props.skipMessageDataMemoization;
+    var _j = useChatContext('Channel'), client = _j.client, customClasses = _j.customClasses, latestMessageDatesByChannels = _j.latestMessageDatesByChannels, mutes = _j.mutes, theme = _j.theme;
     var t = useTranslationContext('Channel').t;
-    var _j = useChannelContainerClasses({ customClasses: customClasses }), channelClass = _j.channelClass, chatClass = _j.chatClass, chatContainerClass = _j.chatContainerClass, windowsEmojiClass = _j.windowsEmojiClass;
-    var _k = React.useState(channel.getConfig()), channelConfig = _k[0], setChannelConfig = _k[1];
-    var _l = React.useState([]), notifications = _l[0], setNotifications = _l[1];
-    var _m = React.useState(), quotedMessage = _m[0], setQuotedMessage = _m[1];
+    var _k = useChannelContainerClasses({ customClasses: customClasses }), channelClass = _k.channelClass, chatClass = _k.chatClass, chatContainerClass = _k.chatContainerClass, windowsEmojiClass = _k.windowsEmojiClass;
+    var _l = React.useState(channel.getConfig()), channelConfig = _l[0], setChannelConfig = _l[1];
+    var _m = React.useState([]), notifications = _m[0], setNotifications = _m[1];
+    var _o = React.useState(), quotedMessage = _o[0], setQuotedMessage = _o[1];
     var notificationTimeouts = [];
-    var _o = React.useReducer(channelReducer, __assign(__assign({}, initialState), { loading: !channel.initialized })), state = _o[0], dispatch = _o[1];
+    var _p = React.useReducer(channelReducer, __assign(__assign({}, initialState), { loading: !channel.initialized })), state = _p[0], dispatch = _p[1];
     var isMounted = useIsMounted();
     var originalTitle = React.useRef('');
     var lastRead = React.useRef(new Date());
@@ -33207,7 +33209,7 @@ var ChannelInner = function (props) {
             return __generator(this, function (_d) {
                 switch (_d.label) {
                     case 0:
-                        if (!!channel.initialized) return [3 /*break*/, 4];
+                        if (!(!channel.initialized && initializeOnMount)) return [3 /*break*/, 4];
                         _d.label = 1;
                     case 1:
                         _d.trys.push([1, 3, , 4]);
@@ -33269,7 +33271,7 @@ var ChannelInner = function (props) {
             client.off('user.deleted', handleEvent);
             notificationTimeouts.forEach(clearTimeout);
         };
-    }, [channel.cid, doMarkReadRequest, channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.read_events]);
+    }, [channel.cid, doMarkReadRequest, channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.read_events, initializeOnMount]);
     React.useEffect(function () {
         var _a;
         if (!state.thread)
@@ -34193,7 +34195,9 @@ var usePaginatedChannels = function (client, filters, sort, options, activeChann
                     return [4 /*yield*/, client.queryChannels(filters, sort || {}, newOptions)];
                 case 2:
                     channelQueryResponse = _b.sent();
-                    newChannels = queryType === 'reload' ? channelQueryResponse : __spreadArray(__spreadArray([], channels, true), channelQueryResponse, true);
+                    newChannels = queryType === 'reload'
+                        ? channelQueryResponse
+                        : uniqBy__default["default"](__spreadArray(__spreadArray([], channels, true), channelQueryResponse, true), 'cid');
                     setChannels(newChannels);
                     setHasNextPage(channelQueryResponse.length >= newOptions.limit);
                     // Set active channel only on load of first page
@@ -34293,6 +34297,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;
@@ -34300,6 +34361,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 () {
@@ -34339,24 +34404,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);
@@ -34439,45 +34509,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)
@@ -34489,12 +34570,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,
@@ -34887,7 +34973,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '10.11.0';
+var version = '10.13.0';
 
 var useChat = function (_a) {
     var _b, _c;