stream-chat-react 9.5.1 → 9.5.3

package/dist/browser.full-bundle.js

@@ -5510,23 +5510,6 @@ var StreamChatReact = (function (exports, React, streamChat, reactDom) {
 
     var ReactPlayer = unwrapExports(lib$8);
 
-    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||{};let nanoid = (size = 21) =>
-      crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {
-        byte &= 63;
-        if (byte < 36) {
-          id += byte.toString(36);
-        } else if (byte < 62) {
-          id += (byte - 26).toString(36).toUpperCase();
-        } else if (byte > 62) {
-          id += '-';
-        } else {
-          id += '_';
-        }
-        return id
-      }, '');
-
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedAttachmentActions = function (props) {
         var actionHandler = props.actionHandler, actions = props.actions, id = props.id, text = props.text;
         var handleActionClick = function (event, name, value) {
@@ -11781,20 +11764,20 @@ var StreamChatReact = (function (exports, React, streamChat, reactDom) {
                         ? 'actions'
                         : '';
         }
-        return (React__default['default'].createElement("div", { className: "str-chat__message-attachment str-chat__message-attachment--" + componentType + " str-chat__message-attachment--" + ((attachment === null || attachment === void 0 ? void 0 : attachment.type) || '') + " str-chat__message-attachment--" + componentType + "--" + extra, key: (isGalleryAttachmentType(attachment) ? '' : (attachment === null || attachment === void 0 ? void 0 : attachment.id) || nanoid()) + "-" + ((attachment === null || attachment === void 0 ? void 0 : attachment.type) || 'none') + " " }, children));
+        return (React__default['default'].createElement("div", { className: "str-chat__message-attachment str-chat__message-attachment--" + componentType + " str-chat__message-attachment--" + ((attachment === null || attachment === void 0 ? void 0 : attachment.type) || '') + " str-chat__message-attachment--" + componentType + "--" + extra }, children));
     };
     var renderAttachmentActions = function (props) {
         var _a;
         var actionHandler = props.actionHandler, attachment = props.attachment, _b = props.AttachmentActions, AttachmentActions$1 = _b === void 0 ? AttachmentActions : _b;
         if (!((_a = attachment.actions) === null || _a === void 0 ? void 0 : _a.length))
             return null;
-        return (React__default['default'].createElement(AttachmentActions$1, __assign$2({}, attachment, { actionHandler: function (event, name, value) { return actionHandler === null || actionHandler === void 0 ? void 0 : actionHandler(event, name, value); }, actions: attachment.actions, id: attachment.id || '', key: "key-actions-" + attachment.id, text: attachment.text || '' })));
+        return (React__default['default'].createElement(AttachmentActions$1, __assign$2({}, attachment, { actionHandler: function (event, name, value) { return actionHandler === null || actionHandler === void 0 ? void 0 : actionHandler(event, name, value); }, actions: attachment.actions, id: attachment.id || '', text: attachment.text || '' })));
     };
     var renderGallery = function (props) {
         var attachment = props.attachment, _a = props.Gallery, Gallery$1 = _a === void 0 ? Gallery : _a;
         return renderAttachmentWithinContainer({
             attachment: attachment,
-            children: React__default['default'].createElement(Gallery$1, { images: attachment.images || [], key: 'gallery' }),
+            children: React__default['default'].createElement(Gallery$1, { images: attachment.images || [] }),
             componentType: 'gallery',
         });
     };
@@ -11803,7 +11786,7 @@ var StreamChatReact = (function (exports, React, streamChat, reactDom) {
         if (attachment.actions && attachment.actions.length) {
             return renderAttachmentWithinContainer({
                 attachment: attachment,
-                children: (React__default['default'].createElement("div", { className: 'str-chat__attachment', key: "key-image-" + attachment.id },
+                children: (React__default['default'].createElement("div", { className: 'str-chat__attachment' },
                     React__default['default'].createElement(Image, __assign$2({}, attachment)),
                     renderAttachmentActions(props))),
                 componentType: 'image',
@@ -11811,7 +11794,7 @@ var StreamChatReact = (function (exports, React, streamChat, reactDom) {
         }
         return renderAttachmentWithinContainer({
             attachment: attachment,
-            children: React__default['default'].createElement(Image, __assign$2({}, attachment, { key: "key-image-" + attachment.id })),
+            children: React__default['default'].createElement(Image, __assign$2({}, attachment)),
             componentType: 'image',
         });
     };
@@ -11820,15 +11803,15 @@ var StreamChatReact = (function (exports, React, streamChat, reactDom) {
         if (attachment.actions && attachment.actions.length) {
             return renderAttachmentWithinContainer({
                 attachment: attachment,
-                children: (React__default['default'].createElement("div", { className: 'str-chat__attachment', key: "key-image-" + attachment.id },
-                    React__default['default'].createElement(Card, __assign$2({}, attachment, { key: "key-card-" + attachment.id })),
+                children: (React__default['default'].createElement("div", { className: 'str-chat__attachment' },
+                    React__default['default'].createElement(Card, __assign$2({}, attachment)),
                     renderAttachmentActions(props))),
                 componentType: 'card',
             });
         }
         return renderAttachmentWithinContainer({
             attachment: attachment,
-            children: React__default['default'].createElement(Card, __assign$2({}, attachment, { key: "key-card-" + attachment.id })),
+            children: React__default['default'].createElement(Card, __assign$2({}, attachment)),
             componentType: 'card',
         });
     };
@@ -11838,7 +11821,7 @@ var StreamChatReact = (function (exports, React, streamChat, reactDom) {
             return null;
         return renderAttachmentWithinContainer({
             attachment: attachment,
-            children: React__default['default'].createElement(File, { attachment: attachment, key: "key-file-" + attachment.id }),
+            children: React__default['default'].createElement(File, { attachment: attachment }),
             componentType: 'file',
         });
     };
@@ -11846,7 +11829,7 @@ var StreamChatReact = (function (exports, React, streamChat, reactDom) {
         var attachment = props.attachment, _a = props.Audio, Audio$1 = _a === void 0 ? Audio : _a;
         return renderAttachmentWithinContainer({
             attachment: attachment,
-            children: (React__default['default'].createElement("div", { className: 'str-chat__attachment', key: "key-video-" + attachment.id },
+            children: (React__default['default'].createElement("div", { className: 'str-chat__attachment' },
                 React__default['default'].createElement(Audio$1, { og: attachment }))),
             componentType: 'audio',
         });
@@ -11857,7 +11840,7 @@ var StreamChatReact = (function (exports, React, streamChat, reactDom) {
         if ((_a = attachment.actions) === null || _a === void 0 ? void 0 : _a.length) {
             return renderAttachmentWithinContainer({
                 attachment: attachment,
-                children: (React__default['default'].createElement("div", { className: 'str-chat__attachment str-chat__attachment-media', key: "key-video-" + attachment.id },
+                children: (React__default['default'].createElement("div", { className: 'str-chat__attachment str-chat__attachment-media' },
                     React__default['default'].createElement("div", { className: 'str-chat__player-wrapper' },
                         React__default['default'].createElement(Media, { className: 'react-player', controls: true, height: '100%', url: attachment.asset_url, width: '100%' })),
                     renderAttachmentActions(props))),
@@ -11866,7 +11849,7 @@ var StreamChatReact = (function (exports, React, streamChat, reactDom) {
         }
         return renderAttachmentWithinContainer({
             attachment: attachment,
-            children: (React__default['default'].createElement("div", { className: 'str-chat__player-wrapper', key: "key-video-" + attachment.id },
+            children: (React__default['default'].createElement("div", { className: 'str-chat__player-wrapper' },
                 React__default['default'].createElement(Media, { className: 'react-player', controls: true, height: '100%', url: attachment.asset_url, width: '100%' }))),
             componentType: 'media',
         });
@@ -11889,7 +11872,7 @@ var StreamChatReact = (function (exports, React, streamChat, reactDom) {
             })), [
                 gallery,
             ]) : attachments;
-        return (React__default['default'].createElement(React__default['default'].Fragment, null, newAttachments.map(function (attachment) {
+        var getContent = function (attachment) {
             if (isGalleryAttachmentType(attachment)) {
                 return renderGallery(__assign$2(__assign$2({}, rest), { attachment: attachment }));
             }
@@ -11906,7 +11889,8 @@ var StreamChatReact = (function (exports, React, streamChat, reactDom) {
                 return renderMedia(__assign$2(__assign$2({}, rest), { attachment: attachment }));
             }
             return renderCard(__assign$2(__assign$2({}, rest), { attachment: attachment }));
-        })));
+        };
+        return (React__default['default'].createElement(React__default['default'].Fragment, null, newAttachments.map(function (attachment, i) { return (React__default['default'].createElement(React__default['default'].Fragment, { key: i }, getContent(attachment))); })));
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
@@ -13562,6 +13546,23 @@ var StreamChatReact = (function (exports, React, streamChat, reactDom) {
     var linkifyjs = linkify;
     var linkifyjs_1 = linkifyjs.find;
 
+    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||{};let nanoid = (size = 21) =>
+      crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {
+        byte &= 63;
+        if (byte < 36) {
+          id += byte.toString(36);
+        } else if (byte < 62) {
+          id += (byte - 26).toString(36).toUpperCase();
+        } else if (byte > 62) {
+          id += '-';
+        } else {
+          id += '_';
+        }
+        return id
+      }, '');
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function escapeStringRegexp(string) {
     	if (typeof string !== 'string') {
     		throw new TypeError('Expected a string');
@@ -42183,9 +42184,10 @@ var StreamChatReact = (function (exports, React, streamChat, reactDom) {
         };
         var isUserResponseArray = function (output) { var _a; return ((_a = output[0]) === null || _a === void 0 ? void 0 : _a.id) != null; };
         var doSendMessage = function (message, customMessageData) { return __awaiter$1(void 0, void 0, void 0, function () {
-            var attachments, id, _a, mentioned_users, parent_id, text, mentions, messageData, messageResponse, error_1, stringError, parsedError;
-            return __generator$1(this, function (_b) {
-                switch (_b.label) {
+            var attachments, id, _a, mentioned_users, parent_id, text, mentions, messageData, messageResponse, existingMessage, i, msg, responseTimestamp, existingMessageTimestamp, responseIsTheNewest, error_1, stringError, parsedError;
+            var _b, _c;
+            return __generator$1(this, function (_d) {
+                switch (_d.label) {
                     case 0:
                         attachments = message.attachments, id = message.id, _a = message.mentioned_users, mentioned_users = _a === void 0 ? [] : _a, parent_id = message.parent_id, text = message.text;
                         mentions = isUserResponseArray(mentioned_users)
@@ -42195,29 +42197,43 @@ var StreamChatReact = (function (exports, React, streamChat, reactDom) {
                             })
                             : mentioned_users;
                         messageData = __assign$2({ attachments: attachments, id: id, mentioned_users: mentions, parent_id: parent_id, quoted_message_id: parent_id === (quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.parent_id) ? quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.id : undefined, text: text }, customMessageData);
-                        _b.label = 1;
+                        _d.label = 1;
                     case 1:
-                        _b.trys.push([1, 6, , 7]);
+                        _d.trys.push([1, 6, , 7]);
                         messageResponse = void 0;
                         if (!doSendMessageRequest) return [3 /*break*/, 3];
                         return [4 /*yield*/, doSendMessageRequest(channel.cid, messageData)];
                     case 2:
-                        messageResponse = _b.sent();
+                        messageResponse = _d.sent();
                         return [3 /*break*/, 5];
                     case 3: return [4 /*yield*/, channel.sendMessage(messageData)];
                     case 4:
-                        messageResponse = _b.sent();
-                        _b.label = 5;
+                        messageResponse = _d.sent();
+                        _d.label = 5;
                     case 5:
-                        // replace it after send is completed
-                        if (messageResponse === null || messageResponse === void 0 ? void 0 : messageResponse.message) {
+                        existingMessage = void 0;
+                        for (i = channel.state.messages.length - 1; i >= 0; i--) {
+                            msg = channel.state.messages[i];
+                            if (msg.id === messageData.id) {
+                                existingMessage = msg;
+                                break;
+                            }
+                        }
+                        responseTimestamp = new Date(((_b = messageResponse === null || messageResponse === void 0 ? void 0 : messageResponse.message) === null || _b === void 0 ? void 0 : _b.updated_at) || 0).getTime();
+                        existingMessageTimestamp = ((_c = existingMessage === null || existingMessage === void 0 ? void 0 : existingMessage.updated_at) === null || _c === void 0 ? void 0 : _c.getTime()) || 0;
+                        responseIsTheNewest = responseTimestamp > existingMessageTimestamp;
+                        // Replace the message payload after send is completed
+                        // We need to check for the newest message payload, because on slow network, the response can arrive later than WS events message.new, message.updated.
+                        // Always override existing message in status "sending"
+                        if ((messageResponse === null || messageResponse === void 0 ? void 0 : messageResponse.message) &&
+                            (responseIsTheNewest || (existingMessage === null || existingMessage === void 0 ? void 0 : existingMessage.status) === 'sending')) {
                             updateMessage(__assign$2(__assign$2({}, messageResponse.message), { status: 'received' }));
                         }
                         if (quotedMessage && parent_id === (quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.parent_id))
                             setQuotedMessage(undefined);
                         return [3 /*break*/, 7];
                     case 6:
-                        error_1 = _b.sent();
+                        error_1 = _d.sent();
                         stringError = JSON.stringify(error_1);
                         parsedError = stringError ? JSON.parse(stringError) : {};
                         updateMessage(__assign$2(__assign$2({}, message), { error: parsedError, errorStatusCode: parsedError.status || undefined, status: 'failed' }));
@@ -43383,7 +43399,7 @@ var StreamChatReact = (function (exports, React, 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 = '9.5.1';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version = '9.5.3';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;
@@ -46535,16 +46551,17 @@ var StreamChatReact = (function (exports, React, streamChat, reactDom) {
     }
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function usePrependedMessagesCount(messages, hasDateSeparator) {
-        var _a;
         var firstRealMessageIndex = hasDateSeparator ? 1 : 0;
-        var currentFirstMessageId = (_a = messages === null || messages === void 0 ? void 0 : messages[firstRealMessageIndex]) === null || _a === void 0 ? void 0 : _a.id;
-        var firstMessageId = React.useRef(currentFirstMessageId);
-        var earliestMessageId = React.useRef(currentFirstMessageId);
+        var firstMessageId = React.useRef();
+        var earliestMessageId = React.useRef();
         var previousNumItemsPrepended = React.useRef(0);
         var numItemsPrepended = React.useMemo(function () {
+            var _a;
             if (!messages || !messages.length) {
+                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) {
                 return previousNumItemsPrepended.current;
@@ -46561,8 +46578,9 @@ var StreamChatReact = (function (exports, React, streamChat, reactDom) {
                     return i;
                 }
             }
-            // if no match has found, we have jumped
+            // if no match has found, we have jumped - reset the prepend item count.
             firstMessageId.current = currentFirstMessageId;
+            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