stream-chat-react 10.4.1 → 10.4.3

package/dist/index.cjs.js

@@ -23797,7 +23797,7 @@ var mentionsMarkdownPlugin = function (mentioned_users) { return function () {
                 // valid cases:   "text @", "@", " @"
                 // invalid cases: "text@", "@text",
                 /.?\s?@$|^@$/.test(node.value) &&
-                nextChildHref.startsWith('mailto:')) {
+                (nextChildHref === null || nextChildHref === void 0 ? void 0 : nextChildHref.startsWith('mailto:'))) {
                 var newTextValue = node.value.replace(/@$/, '');
                 var username = nextChildHref.replace('mailto:', '');
                 parent.children[index] = u('text', newTextValue);
@@ -28364,7 +28364,8 @@ var useUserTrigger = function (params) {
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, client.queryUsers(__assign({ $or: [{ id: { $autocomplete: query } }, { name: { $autocomplete: query } }], id: { $ne: client.userID } }, mentionQueryParams.filters), __assign({ id: 1 }, mentionQueryParams.sort), __assign({ limit: 10 }, mentionQueryParams.options))];
+                    return [4 /*yield*/, client.queryUsers(__assign({ $or: [{ id: { $autocomplete: query } }, { name: { $autocomplete: query } }], id: { $ne: client.userID } }, mentionQueryParams.filters), Array.isArray(mentionQueryParams.sort)
+                            ? __spreadArray([{ id: 1 }], mentionQueryParams.sort, true) : __assign({ id: 1 }, mentionQueryParams.sort), __assign({ limit: 10 }, mentionQueryParams.options))];
                 case 2:
                     users = (_a.sent()).users;
                     if (onReady && users.length) {
@@ -30342,24 +30343,28 @@ var EditMessageForm = function () {
 };
 
 var useCooldownTimer = function () {
+    var _a;
     var latestMessageDatesByChannels = useChatContext('useCooldownTimer').latestMessageDatesByChannels;
-    var channel = useChannelStateContext('useCooldownTimer').channel;
-    var _a = (channel.data ||
-        {}), cooldownInterval = _a.cooldown, own_capabilities = _a.own_capabilities;
-    var _b = React.useState(), cooldownRemaining = _b[0], setCooldownRemaining = _b[1];
+    var _b = useChannelStateContext('useCooldownTimer'), channel = _b.channel, _c = _b.messages, messages = _c === void 0 ? [] : _c;
+    var client = useChatContext('useCooldownTimer').client;
+    var _d = React.useState(), cooldownRemaining = _d[0], setCooldownRemaining = _d[1];
+    var _e = (channel.data ||
+        {}), cooldownInterval = _e.cooldown, own_capabilities = _e.own_capabilities;
     var skipCooldown = !(own_capabilities === null || own_capabilities === void 0 ? void 0 : own_capabilities.includes('slow-mode'));
+    var ownLatestMessageDate = React.useMemo(function () {
+        var _a, _b;
+        return (_a = latestMessageDatesByChannels[channel.cid]) !== null && _a !== void 0 ? _a : (_b = __spreadArray([], messages, true).sort(function (a, b) { var _a, _b; return ((_a = b.created_at) === null || _a === void 0 ? void 0 : _a.getTime()) - ((_b = a.created_at) === null || _b === void 0 ? void 0 : _b.getTime()); })
+            .find(function (v) { var _a, _b; return ((_a = v.user) === null || _a === void 0 ? void 0 : _a.id) === ((_b = client.user) === null || _b === void 0 ? void 0 : _b.id); })) === null || _b === void 0 ? void 0 : _b.created_at;
+    }, [messages, (_a = client.user) === null || _a === void 0 ? void 0 : _a.id, latestMessageDatesByChannels, channel.cid]);
     React.useEffect(function () {
-        var latestMessageDate = latestMessageDatesByChannels[channel.cid];
-        if (!cooldownInterval || !latestMessageDate) {
+        if (skipCooldown || !cooldownInterval || !ownLatestMessageDate)
             return;
-        }
-        var remainingCooldown = Math.round(cooldownInterval - (new Date().getTime() - latestMessageDate.getTime()) / 1000);
-        if (remainingCooldown > 0 && !skipCooldown) {
+        var remainingCooldown = Math.round(cooldownInterval - (new Date().getTime() - ownLatestMessageDate.getTime()) / 1000);
+        if (remainingCooldown > 0)
             setCooldownRemaining(remainingCooldown);
-        }
-    }, [channel.id, cooldownInterval, latestMessageDatesByChannels[channel.cid]]);
+    }, [cooldownInterval, ownLatestMessageDate, skipCooldown]);
     return {
-        cooldownInterval: cooldownInterval || 0,
+        cooldownInterval: cooldownInterval !== null && cooldownInterval !== void 0 ? cooldownInterval : 0,
         cooldownRemaining: cooldownRemaining,
         setCooldownRemaining: setCooldownRemaining,
     };
@@ -33771,7 +33776,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '10.4.1';
+var version = '10.4.3';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -33957,9 +33962,12 @@ var Chat = function (props) {
     var children = props.children, client = props.client, customClasses = props.customClasses, customStyles = props.customStyles, _a = props.darkMode, darkMode = _a === void 0 ? false : _a, defaultLanguage = props.defaultLanguage, i18nInstance = props.i18nInstance, _b = props.initialNavOpen, initialNavOpen = _b === void 0 ? true : _b, _c = props.theme, theme = _c === void 0 ? 'messaging light' : _c, _d = props.useImageFlagEmojisOnWindows, useImageFlagEmojisOnWindows = _d === void 0 ? false : _d;
     var _e = useChat({ client: client, defaultLanguage: defaultLanguage, i18nInstance: i18nInstance, initialNavOpen: initialNavOpen }), channel = _e.channel, closeMobileNav = _e.closeMobileNav, getAppSettings = _e.getAppSettings, latestMessageDatesByChannels = _e.latestMessageDatesByChannels, mutes = _e.mutes, navOpen = _e.navOpen, openMobileNav = _e.openMobileNav, setActiveChannel = _e.setActiveChannel, translators = _e.translators;
     var channelsQueryState = useChannelsQueryState();
-    var themeVersion = (getComputedStyle(document.documentElement)
-        .getPropertyValue('--str-chat__theme-version')
-        .replace(' ', '') || '1');
+    var themeVersion = typeof window !== 'undefined'
+        ? (window
+            .getComputedStyle(document.documentElement)
+            .getPropertyValue('--str-chat__theme-version')
+            .replace(' ', '') || '1')
+        : '1';
     useCustomStyles(darkMode ? darkModeTheme : customStyles);
     var chatContextValue = useCreateChatContext({
         channel: channel,
@@ -34064,6 +34072,8 @@ var InfiniteScroll = function (props) {
         if (listenToScroll) {
             listenToScroll(offset, reverseOffset, threshold);
         }
+        if (isLoading)
+            return;
         if (reverseOffset < Number(threshold) &&
             typeof loadPreviousPageFn === 'function' &&
             hasPreviousPageFlag) {
@@ -34075,10 +34085,11 @@ var InfiniteScroll = function (props) {
     }, [
         hasPreviousPageFlag,
         hasNextPageFlag,
-        threshold,
+        isLoading,
         listenToScroll,
         loadPreviousPageFn,
         loadNextPageFn,
+        threshold,
     ]);
     React.useEffect(function () {
         deprecationAndReplacementWarning([
@@ -34088,19 +34099,18 @@ var InfiniteScroll = function (props) {
             [{ loadMore: loadMore }, { loadPreviousPage: loadPreviousPage }],
         ], 'InfiniteScroll');
     }, []);
-    React.useEffect(function () {
+    React.useLayoutEffect(function () {
         var _a;
         var scrollElement = (_a = scrollComponent.current) === null || _a === void 0 ? void 0 : _a.parentNode;
-        if (isLoading || !scrollElement) {
-            return function () { return undefined; };
-        }
+        if (!scrollElement)
+            return;
         scrollElement.addEventListener('scroll', scrollListener, useCapture);
         scrollElement.addEventListener('resize', scrollListener, useCapture);
         return function () {
             scrollElement.removeEventListener('scroll', scrollListener, useCapture);
             scrollElement.removeEventListener('resize', scrollListener, useCapture);
         };
-    }, [initialLoad, isLoading, scrollListener, useCapture]);
+    }, [initialLoad, scrollListener, useCapture]);
     React.useEffect(function () {
         var _a;
         var scrollElement = (_a = scrollComponent.current) === null || _a === void 0 ? void 0 : _a.parentNode;
@@ -34891,8 +34901,9 @@ var useMessageListElements = function (props) {
     return elements;
 };
 
+// FIXME: change this generic name to something like useAdjustScrollPositionToListSize
 function useMessageListScrollManager(params) {
-    var onScrollBy = params.onScrollBy, scrollContainerMeasures = params.scrollContainerMeasures, scrolledUpThreshold = params.scrolledUpThreshold, scrollToBottom = params.scrollToBottom, showNewMessages = params.showNewMessages;
+    var loadMoreScrollThreshold = params.loadMoreScrollThreshold, onScrollBy = params.onScrollBy, scrollContainerMeasures = params.scrollContainerMeasures, scrolledUpThreshold = params.scrolledUpThreshold, scrollToBottom = params.scrollToBottom, showNewMessages = params.showNewMessages;
     var client = useChatContext('useMessageListScrollManager').client;
     var measures = React.useRef({
         offsetHeight: 0,
@@ -34900,7 +34911,7 @@ function useMessageListScrollManager(params) {
     });
     var messages = React.useRef();
     var scrollTop = React.useRef(0);
-    React.useEffect(function () {
+    React.useLayoutEffect(function () {
         var _a, _b, _c;
         var prevMeasures = measures.current;
         var prevMessages = messages.current;
@@ -34914,8 +34925,8 @@ function useMessageListScrollManager(params) {
             if (prevMessages.length < newMessages.length) {
                 // messages added to the top
                 if ((lastPrevMessage === null || lastPrevMessage === void 0 ? void 0 : lastPrevMessage.id) === lastNewMessage.id) {
-                    var listHeightDelta = newMeasures.scrollHeight - prevMeasures.scrollHeight;
-                    if (scrollTop.current === 0) {
+                    if (scrollTop.current < loadMoreScrollThreshold) {
+                        var listHeightDelta = newMeasures.scrollHeight - prevMeasures.scrollHeight;
                         onScrollBy(listHeightDelta);
                     }
                 }
@@ -34948,7 +34959,7 @@ function useMessageListScrollManager(params) {
 }
 
 var useScrollLocationLogic = function (params) {
-    var _a = params.messages, messages = _a === void 0 ? [] : _a, _b = params.scrolledUpThreshold, scrolledUpThreshold = _b === void 0 ? 200 : _b, hasMoreNewer = params.hasMoreNewer, suppressAutoscroll = params.suppressAutoscroll, listElement = params.listElement;
+    var loadMoreScrollThreshold = params.loadMoreScrollThreshold, _a = params.messages, messages = _a === void 0 ? [] : _a, _b = params.scrolledUpThreshold, scrolledUpThreshold = _b === void 0 ? 200 : _b, hasMoreNewer = params.hasMoreNewer, suppressAutoscroll = params.suppressAutoscroll, listElement = params.listElement;
     var _c = React.useState(false), hasNewMessages = _c[0], setHasNewMessages = _c[1];
     var _d = React.useState(), wrapperRect = _d[0], setWrapperRect = _d[1];
     var _e = React.useState(true), isMessageListScrolledToBottom = _e[0], setIsMessageListScrolledToBottom = _e[1];
@@ -34972,6 +34983,7 @@ var useScrollLocationLogic = function (params) {
         }
     }, [listElement, hasMoreNewer]);
     var updateScrollTop = useMessageListScrollManager({
+        loadMoreScrollThreshold: loadMoreScrollThreshold,
         messages: messages,
         onScrollBy: function (scrollBy) {
             listElement === null || listElement === void 0 ? void 0 : listElement.scrollBy({ top: scrollBy });
@@ -35120,16 +35132,18 @@ var MessageListMainPanel = function (_a) {
 };
 
 var MessageListWithContext = function (props) {
-    var channel = props.channel, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? false : _a, groupStyles = props.groupStyles, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, _d = props.messageActions, messageActions = _d === void 0 ? Object.keys(MESSAGE_ACTIONS) : _d, _e = props.messages, messages = _e === void 0 ? [] : _e, notifications = props.notifications, _f = props.noGroupByUser, noGroupByUser = _f === void 0 ? false : _f, _g = props.pinPermissions, pinPermissions = _g === void 0 ? defaultPinPermissions : _g, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
+    var channel = props.channel, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? false : _a, groupStyles = props.groupStyles, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, internalInfiniteScrollProps = props.internalInfiniteScrollProps, _d = props.messageActions, messageActions = _d === void 0 ? Object.keys(MESSAGE_ACTIONS) : _d, _e = props.messages, messages = _e === void 0 ? [] : _e, notifications = props.notifications, _f = props.noGroupByUser, noGroupByUser = _f === void 0 ? false : _f, _g = props.pinPermissions, pinPermissions = _g === void 0 ? defaultPinPermissions : _g, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
     _h = props.returnAllReadData, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
     returnAllReadData = _h === void 0 ? false : _h, _j = props.threadList, threadList = _j === void 0 ? false : _j, _k = props.unsafeHTML, unsafeHTML = _k === void 0 ? false : _k, headerPosition = props.headerPosition, read = props.read, _l = props.messageLimit, messageLimit = _l === void 0 ? 100 : _l, loadMoreCallback = props.loadMore, loadMoreNewerCallback = props.loadMoreNewer, _m = props.hasMoreNewer, hasMoreNewer = _m === void 0 ? false : _m, suppressAutoscroll = props.suppressAutoscroll, highlightedMessageId = props.highlightedMessageId, _o = props.jumpToLatestMessage, jumpToLatestMessage = _o === void 0 ? function () { return Promise.resolve(); } : _o;
     var _p = React__default["default"].useState(null), listElement = _p[0], setListElement = _p[1];
     var _q = React__default["default"].useState(null), ulElement = _q[0], setUlElement = _q[1];
     var customClasses = useChatContext('MessageList').customClasses;
     var _r = useComponentContext('MessageList'), _s = _r.EmptyStateIndicator, EmptyStateIndicator$1 = _s === void 0 ? EmptyStateIndicator : _s, _t = _r.LoadingIndicator, LoadingIndicator$1 = _t === void 0 ? LoadingIndicator : _t, _u = _r.MessageListNotifications, MessageListNotifications$1 = _u === void 0 ? MessageListNotifications : _u, _v = _r.MessageNotification, MessageNotification$1 = _v === void 0 ? MessageNotification : _v, _w = _r.TypingIndicator, TypingIndicator$1 = _w === void 0 ? TypingIndicator : _w;
+    var loadMoreScrollThreshold = (internalInfiniteScrollProps === null || internalInfiniteScrollProps === void 0 ? void 0 : internalInfiniteScrollProps.threshold) || 250;
     var _x = useScrollLocationLogic({
         hasMoreNewer: hasMoreNewer,
         listElement: listElement,
+        loadMoreScrollThreshold: loadMoreScrollThreshold,
         messages: messages,
         scrolledUpThreshold: props.scrolledUpThreshold,
         suppressAutoscroll: suppressAutoscroll,
@@ -35216,7 +35230,7 @@ var MessageListWithContext = function (props) {
     var showEmptyStateIndicator = elements.length === 0 && !threadList;
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(MessageListMainPanel, null,
-            React__default["default"].createElement("div", { className: "".concat(messageListClass, " ").concat(threadListClass), onScroll: onScroll, ref: setListElement, tabIndex: 0 }, showEmptyStateIndicator ? (React__default["default"].createElement(EmptyStateIndicator$1, { key: 'empty-state-indicator', listType: threadList ? 'thread' : 'message' })) : (React__default["default"].createElement(InfiniteScroll, __assign({ className: 'str-chat__reverse-infinite-scroll  str-chat__message-list-scroll', "data-testid": 'reverse-infinite-scroll', hasNextPage: props.hasMoreNewer, hasPreviousPage: props.hasMore, head: props.head, isLoading: props.loadingMore, loader: React__default["default"].createElement("div", { className: 'str-chat__list__loading', key: 'loading-indicator' }, props.loadingMore && React__default["default"].createElement(LoadingIndicator$1, { size: 20 })), loadNextPage: loadMoreNewer, loadPreviousPage: loadMore }, props.internalInfiniteScrollProps),
+            React__default["default"].createElement("div", { className: "".concat(messageListClass, " ").concat(threadListClass), onScroll: onScroll, ref: setListElement, tabIndex: 0 }, showEmptyStateIndicator ? (React__default["default"].createElement(EmptyStateIndicator$1, { key: 'empty-state-indicator', listType: threadList ? 'thread' : 'message' })) : (React__default["default"].createElement(InfiniteScroll, __assign({ className: 'str-chat__reverse-infinite-scroll  str-chat__message-list-scroll', "data-testid": 'reverse-infinite-scroll', hasNextPage: props.hasMoreNewer, hasPreviousPage: props.hasMore, head: props.head, isLoading: props.loadingMore, loader: React__default["default"].createElement("div", { className: 'str-chat__list__loading', key: 'loading-indicator' }, props.loadingMore && React__default["default"].createElement(LoadingIndicator$1, { size: 20 })), loadNextPage: loadMoreNewer, loadPreviousPage: loadMore }, props.internalInfiniteScrollProps, { threshold: loadMoreScrollThreshold }),
                 React__default["default"].createElement("ul", { className: 'str-chat__ul', ref: setUlElement }, elements),
                 React__default["default"].createElement(TypingIndicator$1, { threadList: threadList }),
                 React__default["default"].createElement("div", { key: 'bottom' }))))),