stream-chat-react 10.11.0 → 10.12.0

package/dist/components/ChannelPreview/ChannelPreview.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ChatContextValue } from '../../context/ChatContext';
+import { MessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
 import type { Channel } from 'stream-chat';
 import type { AvatarProps } from '../Avatar/Avatar';
 import type { StreamMessage } from '../../context/ChannelStateContext';
@@ -15,6 +16,8 @@ export declare type ChannelPreviewUIComponentProps<StreamChatGenerics extends De
     lastMessage?: StreamMessage<StreamChatGenerics>;
     /** Latest message preview to display, will be a string or JSX element supporting markdown. */
     latestMessage?: string | JSX.Element;
+    /** Status describing whether own message has been delivered or read by another. If the last message is not an own message, then the status is undefined. */
+    messageDeliveryStatus?: MessageDeliveryStatus;
     /** Number of unread Messages */
     unread?: number;
 };

package/dist/components/ChannelPreview/ChannelPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/ChannelPreview/ChannelPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAOhE,OAAO,EAAE,gBAAgB,EAAkB,MAAM,2BAA2B,CAAC;AAG7E,OAAO,KAAK,EAAE,OAAO,EAAS,MAAM,aAAa,CAAC;AAElD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,8BAA8B,CACxC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,mBAAmB,CAAC,kBAAkB,CAAC,GAAG;IAC5C,kEAAkE;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAChD,8FAA8F;IAC9F,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,mBAAmB,CAC7B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,6MAA6M;IAC7M,OAAO,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACrC,sCAAsC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC5C,+LAA+L;IAC/L,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,+DAA+D;IAC/D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7C,6PAA6P;IAC7P,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,8BAA8B,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAClF,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CAAC;IAC5E,2CAA2C;IAC3C,QAAQ,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,cAAc,0JAyE1B,CAAC"}
+{"version":3,"file":"ChannelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/ChannelPreview/ChannelPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAOhE,OAAO,EAAE,gBAAgB,EAAkB,MAAM,2BAA2B,CAAC;AAE7E,OAAO,EAAE,qBAAqB,EAA4B,MAAM,kCAAkC,CAAC;AAEnG,OAAO,KAAK,EAAE,OAAO,EAAS,MAAM,aAAa,CAAC;AAElD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,8BAA8B,CACxC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,mBAAmB,CAAC,kBAAkB,CAAC,GAAG;IAC5C,kEAAkE;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAChD,8FAA8F;IAC9F,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,4JAA4J;IAC5J,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,mBAAmB,CAC7B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,6MAA6M;IAC7M,OAAO,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACrC,sCAAsC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC5C,+LAA+L;IAC/L,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,+DAA+D;IAC/D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7C,6PAA6P;IAC7P,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,8BAA8B,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAClF,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CAAC;IAC5E,2CAA2C;IAC3C,QAAQ,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,cAAc,0JA8E1B,CAAC"}

package/dist/components/ChannelPreview/ChannelPreview.js

@@ -6,6 +6,7 @@ import { useChannelPreviewInfo } from './hooks/useChannelPreviewInfo';
 import { getLatestMessagePreview } from './utils';
 import { useChatContext } from '../../context/ChatContext';
 import { useTranslationContext } from '../../context/TranslationContext';
+import { useMessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
 export 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;
@@ -13,6 +14,10 @@ export var ChannelPreview = function (props) {
     var _d = useChannelPreviewInfo({ channel: channel }), displayImage = _d.displayImage, displayTitle = _d.displayTitle;
     var _e = useState(channel.state.messages[channel.state.messages.length - 1]), lastMessage = _e[0], setLastMessage = _e[1];
     var _f = 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;
     useEffect(function () {
@@ -52,5 +57,5 @@ export var ChannelPreview = function (props) {
     if (!Preview)
         return null;
     var latestMessage = getLatestMessagePreview(channel, t, userLanguage);
-    return (React.createElement(Preview, __assign({}, props, { active: isActive, displayImage: displayImage, displayTitle: displayTitle, lastMessage: lastMessage, latestMessage: latestMessage, setActiveChannel: setActiveChannel, unread: unread })));
+    return (React.createElement(Preview, __assign({}, props, { active: isActive, displayImage: displayImage, displayTitle: displayTitle, lastMessage: lastMessage, latestMessage: latestMessage, messageDeliveryStatus: messageDeliveryStatus, setActiveChannel: setActiveChannel, unread: unread })));
 };

package/dist/components/ChannelPreview/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export { useChannelPreviewInfo } from './useChannelPreviewInfo';
+export { MessageDeliveryStatus } from './useMessageDeliveryStatus';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ChannelPreview/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ChannelPreview/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ChannelPreview/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/components/ChannelPreview/hooks/index.js

@@ -1 +1,2 @@
 export { useChannelPreviewInfo } from './useChannelPreviewInfo';
+export { MessageDeliveryStatus } from './useMessageDeliveryStatus';

package/dist/components/ChannelPreview/hooks/useMessageDeliveryStatus.d.ts

@@ -0,0 +1,17 @@
+import type { Channel } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type { StreamMessage } from '../../../context';
+export declare enum MessageDeliveryStatus {
+    DELIVERED = "delivered",
+    READ = "read"
+}
+declare type UseMessageStatusParamsChannelPreviewProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    channel: Channel<StreamChatGenerics>;
+    /** The last message received in a channel */
+    lastMessage?: StreamMessage<StreamChatGenerics>;
+};
+export declare const useMessageDeliveryStatus: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ channel, lastMessage, }: UseMessageStatusParamsChannelPreviewProps<StreamChatGenerics>) => {
+    messageDeliveryStatus: MessageDeliveryStatus | undefined;
+};
+export {};
+//# sourceMappingURL=useMessageDeliveryStatus.d.ts.map

package/dist/components/ChannelPreview/hooks/useMessageDeliveryStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageDeliveryStatus.d.ts","sourceRoot":"","sources":["../../../../src/components/ChannelPreview/hooks/useMessageDeliveryStatus.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAS,MAAM,aAAa,CAAC;AAIlD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,oBAAY,qBAAqB;IAC/B,SAAS,cAAc;IACvB,IAAI,SAAS;CACd;AAED,aAAK,yCAAyC,CAC5C,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,OAAO,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACrC,6CAA6C;IAC7C,WAAW,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACjD,CAAC;AAEF,eAAO,MAAM,wBAAwB;;CAwEpC,CAAC"}

package/dist/components/ChannelPreview/hooks/useMessageDeliveryStatus.js

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useChatContext } from '../../../context';
+export var MessageDeliveryStatus;
+(function (MessageDeliveryStatus) {
+    MessageDeliveryStatus["DELIVERED"] = "delivered";
+    MessageDeliveryStatus["READ"] = "read";
+})(MessageDeliveryStatus || (MessageDeliveryStatus = {}));
+export var useMessageDeliveryStatus = function (_a) {
+    var channel = _a.channel, lastMessage = _a.lastMessage;
+    var client = useChatContext().client;
+    var _b = useState(), messageDeliveryStatus = _b[0], setMessageDeliveryStatus = _b[1];
+    var isOwnMessage = 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]);
+    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
+            ? MessageDeliveryStatus.READ
+            : MessageDeliveryStatus.DELIVERED);
+    }, [channel.state.read, client, isOwnMessage, lastMessage]);
+    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(MessageDeliveryStatus.DELIVERED);
+        };
+        channel.on('message.new', handleMessageNew);
+        return function () {
+            channel.off('message.new', handleMessageNew);
+        };
+    }, [channel, client, isOwnMessage]);
+    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(MessageDeliveryStatus.READ);
+        };
+        channel.on('message.read', handleMarkRead);
+        return function () {
+            channel.off('message.read', handleMarkRead);
+        };
+    }, [channel, client, lastMessage, isOwnMessage]);
+    return {
+        messageDeliveryStatus: messageDeliveryStatus,
+    };
+};

package/dist/components/ChannelSearch/hooks/useChannelSearch.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { ChannelOrUserResponse } from '../utils';
-import type { ChannelFilters, ChannelOptions, ChannelSort, UserFilters, UserOptions, UserSort } from 'stream-chat';
-import type { Channel } from 'stream-chat';
+import type { Channel, ChannelFilters, ChannelOptions, ChannelSort, UserFilters, UserOptions, UserSort } from 'stream-chat';
 import type { SearchBarController } from '../SearchBar';
 import type { SearchInputController } from '../SearchInput';
 import type { SearchResultsController } from '../SearchResults';
@@ -37,6 +36,8 @@ export declare type ChannelSearchParams<StreamChatGenerics extends DefaultStream
     onSearchExit?: () => void;
     /** Custom handler function to run on search result item selection */
     onSelectResult?: (params: ChannelSearchFunctionParams<StreamChatGenerics>, result: ChannelOrUserResponse<StreamChatGenerics>) => Promise<void> | void;
+    /** The number of milliseconds to debounce the search query. The default interval is 200ms. */
+    searchDebounceIntervalMs?: number;
     /** Boolean to search for channels as well as users in the server query, default is false and just searches for users */
     searchForChannels?: boolean;
     /** Custom search function to override the default implementation */
@@ -48,5 +49,5 @@ export declare type ChannelSearchControllerParams<StreamChatGenerics extends Def
     /** Set the array of channels displayed in the ChannelList */
     setChannels: React.Dispatch<React.SetStateAction<Array<Channel<StreamChatGenerics>>>>;
 };
-export declare const useChannelSearch: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ channelType, clearSearchOnClickOutside, disabled, onSearch: onSearchCallback, onSearchExit, onSelectResult, searchForChannels, searchFunction, searchQueryParams, setChannels, }: ChannelSearchControllerParams<StreamChatGenerics>) => SearchController<StreamChatGenerics>;
+export declare const useChannelSearch: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ channelType, clearSearchOnClickOutside, disabled, onSearch: onSearchCallback, onSearchExit, onSelectResult, searchDebounceIntervalMs, searchForChannels, searchFunction, searchQueryParams, setChannels, }: ChannelSearchControllerParams<StreamChatGenerics>) => SearchController<StreamChatGenerics>;
 //# sourceMappingURL=useChannelSearch.d.ts.map

package/dist/components/ChannelSearch/hooks/useChannelSearch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useChannelSearch.d.ts","sourceRoot":"","sources":["../../../../src/components/ChannelSearch/hooks/useChannelSearch.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useChannelSearch.d.ts","sourceRoot":"","sources":["../../../../src/components/ChannelSearch/hooks/useChannelSearch.ts"],"names":[],"mappings":"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"}

package/dist/components/ChannelSearch/hooks/useChannelSearch.js

@@ -1,22 +1,27 @@
 import { __assign, __awaiter, __generator, __spreadArray } from "tslib";
 import { useCallback, useEffect, useRef, useState } from 'react';
-import throttle from 'lodash.throttle';
+import debounce from 'lodash.debounce';
 import uniqBy from 'lodash.uniqby';
 import { isChannel } from '../utils';
 import { useChatContext } from '../../../context/ChatContext';
 export 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 = useState(false), inputIsFocused = _g[0], setInputIsFocused = _g[1];
-    var _h = useState(''), query = _h[0], setQuery = _h[1];
-    var _j = useState([]), results = _j[0], setResults = _j[1];
-    var _k = 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 = useState(false), inputIsFocused = _h[0], setInputIsFocused = _h[1];
+    var _j = useState(''), query = _j[0], setQuery = _j[1];
+    var _k = useState([]), results = _k[0], setResults = _k[1];
+    var _l = useState(false), searching = _l[0], setSearching = _l[1];
+    var searchQueryPromiseInProgress = useRef();
+    var shouldIgnoreQueryResults = useRef(false);
     var inputRef = useRef(null);
     var searchBarRef = useRef(null);
     var clearState = useCallback(function () {
         setQuery('');
         setResults([]);
         setSearching(false);
+        if (searchQueryPromiseInProgress.current) {
+            shouldIgnoreQueryResults.current = true;
+        }
     }, []);
     var activateSearch = useCallback(function () {
         setInputIsFocused(true);
@@ -99,45 +104,56 @@ export var useChannelSearch = function (_a) {
         });
     }); }, [clearSearchOnClickOutside, client, exitSearch, onSelectResult, setActiveChannel, setChannels]);
     var getChannels = 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(getChannels, 200);
+    }); }, [client, searchForChannels, searchQueryParams]);
+    var scheduleGetChannels = useCallback(debounce(getChannels, searchDebounceIntervalMs), [
+        getChannels,
+        searchDebounceIntervalMs,
+    ]);
     var onSearch = useCallback(function (event) {
         event.preventDefault();
         if (disabled)
@@ -149,12 +165,17 @@ export 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,

package/dist/index.cjs.js

@@ -34293,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;
@@ -34300,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 () {
@@ -34339,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);
@@ -34439,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)
@@ -34489,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,
@@ -34887,7 +34969,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '10.11.0';
+var version = '10.12.0';
 
 var useChat = function (_a) {
     var _b, _c;