stream-chat-react 10.11.0 → 10.12.0

package/dist/browser.full-bundle.js

@@ -46834,6 +46834,63 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         return muted;
     };
 
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};exports.MessageDeliveryStatus = void 0;
+    (function (MessageDeliveryStatus) {
+        MessageDeliveryStatus["DELIVERED"] = "delivered";
+        MessageDeliveryStatus["READ"] = "read";
+    })(exports.MessageDeliveryStatus || (exports.MessageDeliveryStatus = {}));
+    var useMessageDeliveryStatus = function (_a) {
+        var channel = _a.channel, lastMessage = _a.lastMessage;
+        var client = useChatContext().client;
+        var _b = React$2.useState(), messageDeliveryStatus = _b[0], setMessageDeliveryStatus = _b[1];
+        var isOwnMessage = React$2.useCallback(function (message) { var _a; return client.user && ((_a = message === null || message === void 0 ? void 0 : message.user) === null || _a === void 0 ? void 0 : _a.id) === client.user.id; }, [client]);
+        React$2.useEffect(function () {
+            var lastMessageIsOwn = isOwnMessage(lastMessage);
+            if (!(lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.created_at) || !lastMessageIsOwn)
+                return;
+            var lastMessageCreatedAtDate = typeof lastMessage.created_at === 'string'
+                ? new Date(lastMessage.created_at)
+                : lastMessage.created_at;
+            var channelReadByOthersAfterLastMessageUpdate = Object.values(channel.state.read).some(function (_a) {
+                var channelLastMarkedReadDate = _a.last_read, user = _a.user;
+                var ignoreOwnReadStatus = client.user && user.id !== client.user.id;
+                return ignoreOwnReadStatus && lastMessageCreatedAtDate < channelLastMarkedReadDate;
+            });
+            setMessageDeliveryStatus(channelReadByOthersAfterLastMessageUpdate
+                ? exports.MessageDeliveryStatus.READ
+                : exports.MessageDeliveryStatus.DELIVERED);
+        }, [channel.state.read, client, isOwnMessage, lastMessage]);
+        React$2.useEffect(function () {
+            var handleMessageNew = function (event) {
+                // the last message is not mine, so do not show the delivery status
+                if (!isOwnMessage(event.message)) {
+                    return setMessageDeliveryStatus(undefined);
+                }
+                return setMessageDeliveryStatus(exports.MessageDeliveryStatus.DELIVERED);
+            };
+            channel.on('message.new', handleMessageNew);
+            return function () {
+                channel.off('message.new', handleMessageNew);
+            };
+        }, [channel, client, isOwnMessage]);
+        React$2.useEffect(function () {
+            if (!isOwnMessage(lastMessage))
+                return;
+            var handleMarkRead = function (event) {
+                var _a, _b;
+                if (((_a = event.user) === null || _a === void 0 ? void 0 : _a.id) !== ((_b = client.user) === null || _b === void 0 ? void 0 : _b.id))
+                    setMessageDeliveryStatus(exports.MessageDeliveryStatus.READ);
+            };
+            channel.on('message.read', handleMarkRead);
+            return function () {
+                channel.off('message.read', handleMarkRead);
+            };
+        }, [channel, client, lastMessage, isOwnMessage]);
+        return {
+            messageDeliveryStatus: messageDeliveryStatus,
+        };
+    };
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var ChannelPreview = function (props) {
         var channel = props.channel, _a = props.Preview, Preview = _a === void 0 ? ChannelPreviewMessenger : _a, channelUpdateCount = props.channelUpdateCount;
         var _b = useChatContext('ChannelPreview'), activeChannel = _b.channel, client = _b.client, setActiveChannel = _b.setActiveChannel;
@@ -46841,6 +46898,10 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         var _d = useChannelPreviewInfo({ channel: channel }), displayImage = _d.displayImage, displayTitle = _d.displayTitle;
         var _e = React$2.useState(channel.state.messages[channel.state.messages.length - 1]), lastMessage = _e[0], setLastMessage = _e[1];
         var _f = React$2.useState(0), unread = _f[0], setUnread = _f[1];
+        var messageDeliveryStatus = useMessageDeliveryStatus({
+            channel: channel,
+            lastMessage: lastMessage,
+        }).messageDeliveryStatus;
         var isActive = (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.cid) === channel.cid;
         var muted = useIsChannelMuted(channel).muted;
         React$2.useEffect(function () {
@@ -46880,24 +46941,29 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         if (!Preview)
             return null;
         var latestMessage = getLatestMessagePreview(channel, t, userLanguage);
-        return (React__default["default"].createElement(Preview, __assign({}, props, { active: isActive, displayImage: displayImage, displayTitle: displayTitle, lastMessage: lastMessage, latestMessage: latestMessage, setActiveChannel: setActiveChannel, unread: unread })));
+        return (React__default["default"].createElement(Preview, __assign({}, props, { active: isActive, displayImage: displayImage, displayTitle: displayTitle, lastMessage: lastMessage, latestMessage: latestMessage, messageDeliveryStatus: messageDeliveryStatus, setActiveChannel: setActiveChannel, unread: unread })));
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var isChannel = function (output) { return output.cid != null; };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChannelSearch = function (_a) {
-        var _b = _a.channelType, channelType = _b === void 0 ? 'messaging' : _b, _c = _a.clearSearchOnClickOutside, clearSearchOnClickOutside = _c === void 0 ? true : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, onSearchCallback = _a.onSearch, onSearchExit = _a.onSearchExit, onSelectResult = _a.onSelectResult, _e = _a.searchForChannels, searchForChannels = _e === void 0 ? false : _e, searchFunction = _a.searchFunction, searchQueryParams = _a.searchQueryParams, setChannels = _a.setChannels;
-        var _f = useChatContext('useChannelSearch'), client = _f.client, setActiveChannel = _f.setActiveChannel, themeVersion = _f.themeVersion;
-        var _g = React$2.useState(false), inputIsFocused = _g[0], setInputIsFocused = _g[1];
-        var _h = React$2.useState(''), query = _h[0], setQuery = _h[1];
-        var _j = React$2.useState([]), results = _j[0], setResults = _j[1];
-        var _k = React$2.useState(false), searching = _k[0], setSearching = _k[1];
+        var _b = _a.channelType, channelType = _b === void 0 ? 'messaging' : _b, _c = _a.clearSearchOnClickOutside, clearSearchOnClickOutside = _c === void 0 ? true : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, onSearchCallback = _a.onSearch, onSearchExit = _a.onSearchExit, onSelectResult = _a.onSelectResult, _e = _a.searchDebounceIntervalMs, searchDebounceIntervalMs = _e === void 0 ? 300 : _e, _f = _a.searchForChannels, searchForChannels = _f === void 0 ? false : _f, searchFunction = _a.searchFunction, searchQueryParams = _a.searchQueryParams, setChannels = _a.setChannels;
+        var _g = useChatContext('useChannelSearch'), client = _g.client, setActiveChannel = _g.setActiveChannel, themeVersion = _g.themeVersion;
+        var _h = React$2.useState(false), inputIsFocused = _h[0], setInputIsFocused = _h[1];
+        var _j = React$2.useState(''), query = _j[0], setQuery = _j[1];
+        var _k = React$2.useState([]), results = _k[0], setResults = _k[1];
+        var _l = React$2.useState(false), searching = _l[0], setSearching = _l[1];
+        var searchQueryPromiseInProgress = React$2.useRef();
+        var shouldIgnoreQueryResults = React$2.useRef(false);
         var inputRef = React$2.useRef(null);
         var searchBarRef = React$2.useRef(null);
         var clearState = React$2.useCallback(function () {
             setQuery('');
             setResults([]);
             setSearching(false);
+            if (searchQueryPromiseInProgress.current) {
+                shouldIgnoreQueryResults.current = true;
+            }
         }, []);
         var activateSearch = React$2.useCallback(function () {
             setInputIsFocused(true);
@@ -46980,45 +47046,56 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             });
         }); }, [clearSearchOnClickOutside, client, exitSearch, onSelectResult, setActiveChannel, setChannels]);
         var getChannels = React$2.useCallback(function (text) { return __awaiter(void 0, void 0, void 0, function () {
-            var userResponse, channelResponse, _a, channels, users_1, users, error_1;
+            var results, userQueryPromise, users, channelQueryPromise, _a, channels, users, error_1;
             var _b, _c, _d, _e, _f, _g;
             return __generator(this, function (_h) {
                 switch (_h.label) {
                     case 0:
-                        if (!text || searching)
-                            return [2 /*return*/];
-                        setSearching(true);
+                        results = [];
                         _h.label = 1;
                     case 1:
                         _h.trys.push([1, 6, , 7]);
-                        return [4 /*yield*/, client.queryUsers(__assign({ $or: [{ id: { $autocomplete: text } }, { name: { $autocomplete: text } }], id: { $ne: client.userID } }, (_b = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.userFilters) === null || _b === void 0 ? void 0 : _b.filters), __assign({ id: 1 }, (_c = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.userFilters) === null || _c === void 0 ? void 0 : _c.sort), __assign({ limit: 8 }, (_d = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.userFilters) === null || _d === void 0 ? void 0 : _d.options))];
+                        userQueryPromise = client.queryUsers(__assign({ $or: [{ id: { $autocomplete: text } }, { name: { $autocomplete: text } }], id: { $ne: client.userID } }, (_b = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.userFilters) === null || _b === void 0 ? void 0 : _b.filters), __assign({ id: 1 }, (_c = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.userFilters) === null || _c === void 0 ? void 0 : _c.sort), __assign({ limit: 8 }, (_d = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.userFilters) === null || _d === void 0 ? void 0 : _d.options));
+                        if (!!searchForChannels) return [3 /*break*/, 3];
+                        searchQueryPromiseInProgress.current = userQueryPromise;
+                        return [4 /*yield*/, searchQueryPromiseInProgress.current];
                     case 2:
-                        userResponse = _h.sent();
-                        if (!searchForChannels) return [3 /*break*/, 4];
-                        channelResponse = client.queryChannels(__assign({ name: { $autocomplete: text } }, (_e = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.channelFilters) === null || _e === void 0 ? void 0 : _e.filters), ((_f = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.channelFilters) === null || _f === void 0 ? void 0 : _f.sort) || {}, __assign({ limit: 5 }, (_g = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.channelFilters) === null || _g === void 0 ? void 0 : _g.options));
-                        return [4 /*yield*/, Promise.all([channelResponse, userResponse])];
-                    case 3:
-                        _a = _h.sent(), channels = _a[0], users_1 = _a[1].users;
-                        setResults(__spreadArray(__spreadArray([], channels, true), users_1, true));
-                        setSearching(false);
-                        return [2 /*return*/];
-                    case 4: return [4 /*yield*/, Promise.resolve(userResponse)];
-                    case 5:
                         users = (_h.sent()).users;
-                        setResults(users);
-                        return [3 /*break*/, 7];
+                        results = users;
+                        return [3 /*break*/, 5];
+                    case 3:
+                        channelQueryPromise = client.queryChannels(__assign({ name: { $autocomplete: text } }, (_e = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.channelFilters) === null || _e === void 0 ? void 0 : _e.filters), ((_f = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.channelFilters) === null || _f === void 0 ? void 0 : _f.sort) || {}, __assign({ limit: 5 }, (_g = searchQueryParams === null || searchQueryParams === void 0 ? void 0 : searchQueryParams.channelFilters) === null || _g === void 0 ? void 0 : _g.options));
+                        searchQueryPromiseInProgress.current = Promise.all([
+                            channelQueryPromise,
+                            userQueryPromise,
+                        ]);
+                        return [4 /*yield*/, searchQueryPromiseInProgress.current];
+                    case 4:
+                        _a = _h.sent(), channels = _a[0], users = _a[1].users;
+                        results = __spreadArray(__spreadArray([], channels, true), users, true);
+                        _h.label = 5;
+                    case 5: return [3 /*break*/, 7];
                     case 6:
                         error_1 = _h.sent();
-                        clearState();
                         console.error(error_1);
                         return [3 /*break*/, 7];
                     case 7:
                         setSearching(false);
+                        if (!shouldIgnoreQueryResults.current) {
+                            setResults(results);
+                        }
+                        else {
+                            shouldIgnoreQueryResults.current = false;
+                        }
+                        searchQueryPromiseInProgress.current = undefined;
                         return [2 /*return*/];
                 }
             });
-        }); }, [client, searching, searchForChannels]);
-        var getChannelsThrottled = lodash_throttle(getChannels, 200);
+        }); }, [client, searchForChannels, searchQueryParams]);
+        var scheduleGetChannels = React$2.useCallback(lodash_debounce(getChannels, searchDebounceIntervalMs), [
+            getChannels,
+            searchDebounceIntervalMs,
+        ]);
         var onSearch = React$2.useCallback(function (event) {
             event.preventDefault();
             if (disabled)
@@ -47030,12 +47107,17 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
                     setSearching: setSearching,
                 }, event);
             }
-            else {
+            else if (event.target.value) {
+                setSearching(true);
                 setQuery(event.target.value);
-                getChannelsThrottled(event.target.value);
+                scheduleGetChannels(event.target.value);
+            }
+            else if (!event.target.value) {
+                clearState();
+                scheduleGetChannels.cancel();
             }
             onSearchCallback === null || onSearchCallback === void 0 ? void 0 : onSearchCallback(event);
-        }, [disabled, getChannelsThrottled, onSearchCallback, searchFunction]);
+        }, [clearState, disabled, scheduleGetChannels, onSearchCallback, searchFunction]);
         return {
             activateSearch: activateSearch,
             clearState: clearState,
@@ -47440,7 +47522,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '10.11.0';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '10.12.0';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;