stream-chat-react 11.1.0 → 11.1.2

package/dist/browser.full-bundle.js

@@ -10007,7 +10007,16 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
 
     var ImageGallery = /*@__PURE__*/getDefaultExportFromCjs(imageGallery.exports);
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var ModalGallery = function (props) {
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var onError = function (e) {
+        // Prevent having alt attribute on img as the img takes the height of the alt text
+        // instead of the CSS / element width & height when the CSS mask (fallback) is applied.
+        e.target.alt = '';
+    };
+    var renderItem = function (_a) {
+        var original = _a.original, originalAlt = _a.originalAlt;
+        return (React__default["default"].createElement(BaseImage, { alt: originalAlt, className: 'image-gallery-image', onError: onError, src: original }));
+    };
+    var ModalGallery = function (props) {
         var images = props.images, index = props.index;
         var t = useTranslationContext('ModalGallery').t;
         var formattedArray = React$2.useMemo(function () {
@@ -10020,7 +10029,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 };
             });
         }, [images]);
-        return (React__default["default"].createElement(ImageGallery, { items: formattedArray, showIndex: true, showPlayButton: false, showThumbnails: false, startIndex: index }));
+        return (React__default["default"].createElement(ImageGallery, { items: formattedArray, renderItem: renderItem, showIndex: true, showPlayButton: false, showThumbnails: false, startIndex: index }));
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedGallery = function (props) {
@@ -43590,6 +43599,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
           currentTrigger: null,
           data: null,
           dataLoading: false,
+          isComposing: false,
           left: null,
           selectionEnd: 0,
           selectionStart: 0,
@@ -43640,22 +43650,23 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
           SuggestionItem,
           SuggestionList = List$1
         } = this.props;
+        const {
+          isComposing
+        } = this.state;
         const triggerProps = this.getTriggerProps();
-        if (triggerProps.values && triggerProps.currentTrigger && !(disableMentions && triggerProps.currentTrigger === '@')) {
-          return /*#__PURE__*/React__default["default"].createElement("div", {
-            className: clsx('rta__autocomplete', 'str-chat__suggestion-list-container', dropdownClassName),
-            ref: this.setDropdownRef,
-            style: dropdownStyle
-          }, /*#__PURE__*/React__default["default"].createElement(SuggestionList, _extends$2({
-            className: clsx('str-chat__suggestion-list', listClassName),
-            dropdownScroll: this._dropdownScroll,
-            itemClassName: clsx('str-chat__suggestion-list-item', itemClassName),
-            itemStyle: itemStyle,
-            onSelect: this._onSelect,
-            SuggestionItem: SuggestionItem
-          }, triggerProps)));
-        }
-        return null;
+        if (isComposing || !triggerProps.values || !triggerProps.currentTrigger || disableMentions && triggerProps.currentTrigger === '@') return null;
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: clsx('rta__autocomplete', 'str-chat__suggestion-list-container', dropdownClassName),
+          ref: this.setDropdownRef,
+          style: dropdownStyle
+        }, /*#__PURE__*/React__default["default"].createElement(SuggestionList, _extends$2({
+          className: clsx('str-chat__suggestion-list', listClassName),
+          dropdownScroll: this._dropdownScroll,
+          itemClassName: clsx('str-chat__suggestion-list-item', itemClassName),
+          itemStyle: itemStyle,
+          onSelect: this._onSelect,
+          SuggestionItem: SuggestionItem
+        }, triggerProps)));
       }
       render() {
         const {
@@ -43709,6 +43720,14 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             this._onClickAndBlurHandler(e);
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
           },
+          onCompositionEnd: () => this.setState(pv => ({
+            ...pv,
+            isComposing: false
+          })),
+          onCompositionStart: () => this.setState(pv => ({
+            ...pv,
+            isComposing: true
+          })),
           onFocus: e => {
             var _this$props$onFocus, _this$props;
             (_this$props$onFocus = (_this$props = this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props, e);
@@ -47788,19 +47807,22 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var CooldownTimer = function (_a) {
-        var cooldownInterval = _a.cooldownInterval, setCooldownRemaining = _a.setCooldownRemaining;
-        var _b = React$2.useState(cooldownInterval), seconds = _b[0], setSeconds = _b[1];
+        var cooldownInterval = _a.cooldownInterval;
+        var _b = React$2.useState(), seconds = _b[0], setSeconds = _b[1];
         React$2.useEffect(function () {
-            var countdownInterval = setInterval(function () {
-                if (seconds > 0) {
+            var countdownTimeout;
+            if (typeof seconds === 'number' && seconds > 0) {
+                countdownTimeout = setTimeout(function () {
                     setSeconds(seconds - 1);
-                }
-                else {
-                    setCooldownRemaining(0);
-                }
-            }, 1000);
-            return function () { return clearInterval(countdownInterval); };
-        });
+                }, 1000);
+            }
+            return function () {
+                clearTimeout(countdownTimeout);
+            };
+        }, [seconds]);
+        React$2.useEffect(function () {
+            setSeconds(cooldownInterval !== null && cooldownInterval !== void 0 ? cooldownInterval : 0);
+        }, [cooldownInterval]);
         return (React__default["default"].createElement("div", { className: 'str-chat__message-input-cooldown', "data-testid": 'cooldown-timer' }, seconds));
     };
 
@@ -48530,11 +48552,20 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 ? // prevent negative values
                     Math.max(0, (new Date().getTime() - ownLatestMessageDate.getTime()) / 1000)
                 : undefined;
-            setCooldownRemaining(!skipCooldown &&
+            var remaining = !skipCooldown &&
                 typeof timeSinceOwnLastMessage !== 'undefined' &&
                 cooldownInterval > timeSinceOwnLastMessage
                 ? Math.round(cooldownInterval - timeSinceOwnLastMessage)
-                : 0);
+                : 0;
+            setCooldownRemaining(remaining);
+            if (!remaining)
+                return;
+            var timeout = setTimeout(function () {
+                setCooldownRemaining(0);
+            }, remaining * 1000);
+            return function () {
+                clearTimeout(timeout);
+            };
         }, [cooldownInterval, ownLatestMessageDate, skipCooldown]);
         return {
             cooldownInterval: cooldownInterval,
@@ -50461,9 +50492,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var markReadThrottled = lodash_throttle(markRead, 500, { leading: true, trailing: true });
         var handleEvent = function (event) { return __awaiter(void 0, void 0, void 0, function () {
             var mainChannelUpdated, unread, messageDate, cid, oldestID;
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-            return __generator(this, function (_m) {
-                switch (_m.label) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            return __generator(this, function (_k) {
+                switch (_k.label) {
                     case 0:
                         if (event.message) {
                             dispatch({
@@ -50485,7 +50516,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                             if (((_a = event.message) === null || _a === void 0 ? void 0 : _a.parent_id) && !((_b = event.message) === null || _b === void 0 ? void 0 : _b.show_in_channel)) {
                                 mainChannelUpdated = false;
                             }
-                            if (mainChannelUpdated && ((_d = (_c = event.message) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.id) !== client.userID) {
+                            if (mainChannelUpdated) {
                                 if (!document.hidden) {
                                     markReadThrottled();
                                 }
@@ -50499,9 +50530,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                                     }
                                 }
                             }
-                            if (((_f = (_e = event.message) === null || _e === void 0 ? void 0 : _e.user) === null || _f === void 0 ? void 0 : _f.id) === client.userID &&
-                                ((_g = event === null || event === void 0 ? void 0 : event.message) === null || _g === void 0 ? void 0 : _g.created_at) &&
-                                ((_h = event === null || event === void 0 ? void 0 : event.message) === null || _h === void 0 ? void 0 : _h.cid)) {
+                            if (((_d = (_c = event.message) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.id) === client.userID &&
+                                ((_e = event === null || event === void 0 ? void 0 : event.message) === null || _e === void 0 ? void 0 : _e.created_at) &&
+                                ((_f = event === null || event === void 0 ? void 0 : event.message) === null || _f === void 0 ? void 0 : _f.cid)) {
                                 messageDate = new Date(event.message.created_at);
                                 cid = event.message.cid;
                                 if (!latestMessageDatesByChannels[cid] ||
@@ -50511,7 +50542,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                             }
                         }
                         if (!(event.type === 'user.deleted')) return [3 /*break*/, 2];
-                        oldestID = (_l = (_k = (_j = channel.state) === null || _j === void 0 ? void 0 : _j.messages) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.id;
+                        oldestID = (_j = (_h = (_g = channel.state) === null || _g === void 0 ? void 0 : _g.messages) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.id;
                         /**
                          * As the channel state is not normalized we re-fetch the channel data. Thus, we avoid having to search for user references in the channel state.
                          */
@@ -50525,8 +50556,8 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                          * As the channel state is not normalized we re-fetch the channel data. Thus, we avoid having to search for user references in the channel state.
                          */
                         // FIXME: we should use channelQueryOptions if they are available
-                        _m.sent();
-                        _m.label = 2;
+                        _k.sent();
+                        _k.label = 2;
                     case 2:
                         throttledCopyStateFromChannel();
                         return [2 /*return*/];
@@ -50588,6 +50619,13 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                                     hasMore: hasMoreMessagesProbably(channel.state.messages.length, (_e = (_d = channelQueryOptions === null || channelQueryOptions === void 0 ? void 0 : channelQueryOptions.messages) === null || _d === void 0 ? void 0 : _d.limit) !== null && _e !== void 0 ? _e : DEFAULT_INITIAL_CHANNEL_PAGE_SIZE),
                                     type: 'initStateFromChannel',
                                 });
+                                /**
+                                 * TODO: maybe pass last_read to the countUnread method to get proper value
+                                 * combined with channel.countUnread adjustment (_countMessageAsUnread)
+                                 * to allow counting own messages too
+                                 *
+                                 * const lastRead = channel.state.read[client.userID as string].last_read;
+                                 */
                                 if (channel.countUnread() > 0)
                                     markRead();
                                 // The more complex sync logic is done in Chat
@@ -52387,7 +52425,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
 
     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 = '11.1.0';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.1.2';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;
@@ -55183,11 +55221,14 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         };
     }
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var STATUSES_EXCLUDED_FROM_PREPEND = ['sending', 'failed'];
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var STATUSES_EXCLUDED_FROM_PREPEND = {
+        failed: true,
+        sending: true,
+    };
     function usePrependedMessagesCount(messages, hasDateSeparator) {
         var firstRealMessageIndex = hasDateSeparator ? 1 : 0;
-        var firstMessageId = React$2.useRef();
-        var earliestMessageId = React$2.useRef();
+        var firstMessageOnFirstLoadedPage = React$2.useRef();
+        var previousFirstMessageOnFirstLoadedPage = React$2.useRef();
         var previousNumItemsPrepended = React$2.useRef(0);
         var numItemsPrepended = React$2.useMemo(function () {
             var _a, _b;
@@ -55195,47 +55236,43 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 previousNumItemsPrepended.current = 0;
                 return 0;
             }
-            var currentFirstMessageId = (_a = messages === null || messages === void 0 ? void 0 : messages[firstRealMessageIndex]) === null || _a === void 0 ? void 0 : _a.id;
-            // if no new messages were prepended, return early (same amount as before)
-            if (currentFirstMessageId === earliestMessageId.current) {
+            var currentFirstMessage = messages === null || messages === void 0 ? void 0 : messages[firstRealMessageIndex];
+            var noNewMessages = (currentFirstMessage === null || currentFirstMessage === void 0 ? void 0 : currentFirstMessage.id) === ((_a = previousFirstMessageOnFirstLoadedPage.current) === null || _a === void 0 ? void 0 : _a.id);
+            // This is possible only, when sending messages very quickly (basically single char messages submitted like a crazy) in empty channel (first page)
+            // Optimistic UI update, when sending messages, can lead to a situation, when
+            // the order of the messages changes for a moment. This can happen, when a user
+            // sends multiple messages withing few milliseconds. E.g. we send a message A
+            // then message B. At first we have message array with both messages of status "sending"
+            // then response for message A is received with a new - later - created_at timestamp
+            // this leads to rearrangement of 1.B ("sending"), 2.A ("received"). Still firstMessageOnFirstLoadedPage.current
+            // points to message A, but now this message has index 1 => previousNumItemsPrepended.current === 1
+            // That in turn leads to incorrect index calculation in VirtualizedMessageList trying to access a message
+            // at non-existent index. Therefore, we ignore messages of status "sending" / "failed" in order they are
+            // not considered as prepended messages.
+            var firstMsgMovedAfterMessagesInExcludedStatus = (currentFirstMessage === null || currentFirstMessage === void 0 ? void 0 : currentFirstMessage.status) && STATUSES_EXCLUDED_FROM_PREPEND[currentFirstMessage.status];
+            if (noNewMessages || firstMsgMovedAfterMessagesInExcludedStatus) {
                 return previousNumItemsPrepended.current;
             }
-            if (!firstMessageId.current) {
-                firstMessageId.current = currentFirstMessageId;
+            if (!firstMessageOnFirstLoadedPage.current) {
+                firstMessageOnFirstLoadedPage.current = currentFirstMessage;
             }
-            earliestMessageId.current = currentFirstMessageId;
+            previousFirstMessageOnFirstLoadedPage.current = currentFirstMessage;
             // if new messages were prepended, find out how many
             // start with this number because there cannot be fewer prepended items than before
-            var adjustPrependedMessageCount = 0;
-            for (var i = previousNumItemsPrepended.current; i < messages.length; i += 1) {
-                // Optimistic UI update, when sending messages, can lead to a situation, when
-                // the order of the messages changes for a moment. This can happen, when a user
-                // sends multiple messages withing few milliseconds. E.g. we send a message A
-                // then message B. At first we have message array with both messages of status "sending"
-                // then response for message A is received with a new - later - created_at timestamp
-                // this leads to rearrangement of 1.B ("sending"), 2.A ("received"). Still firstMessageId.current
-                // points to message A, but now this message has index 1 => previousNumItemsPrepended.current === 1
-                // That in turn leads to incorrect index calculation in VirtualizedMessageList trying to access a message
-                // at non-existent index. Therefore, we ignore messages of status "sending" / "failed" in order they are
-                // not considered as prepended messages.
-                if (((_b = messages[i]) === null || _b === void 0 ? void 0 : _b.status) &&
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    STATUSES_EXCLUDED_FROM_PREPEND.includes(messages[i].status) &&
-                    messages[i].id !== firstMessageId.current) {
-                    adjustPrependedMessageCount++;
-                }
-                if (messages[i].id === firstMessageId.current) {
-                    previousNumItemsPrepended.current = i - adjustPrependedMessageCount;
-                    return previousNumItemsPrepended.current;
+            for (var prependedMessageCount = previousNumItemsPrepended.current; prependedMessageCount < messages.length; prependedMessageCount += 1) {
+                var messageIsFirstOnFirstLoadedPage = messages[prependedMessageCount].id === ((_b = firstMessageOnFirstLoadedPage.current) === null || _b === void 0 ? void 0 : _b.id);
+                if (messageIsFirstOnFirstLoadedPage) {
+                    previousNumItemsPrepended.current = prependedMessageCount;
+                    return prependedMessageCount;
                 }
             }
             // if no match has found, we have jumped - reset the prepended item count.
-            firstMessageId.current = currentFirstMessageId;
+            firstMessageOnFirstLoadedPage.current = currentFirstMessage;
             previousNumItemsPrepended.current = 0;
             return 0;
             // TODO: there's a bug here, the messages prop is the same array instance (something mutates it)
             // that's why the second dependency is necessary
-        }, [messages, messages === null || messages === void 0 ? void 0 : messages.length]);
+        }, [firstRealMessageIndex, messages, messages === null || messages === void 0 ? void 0 : messages.length]);
         return numItemsPrepended;
     }