stream-chat-react 8.1.1 → 8.1.3

package/dist/browser.full-bundle.js

@@ -5522,7 +5522,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
     var Audio = React__default['default'].memo(UnMemoizedAudio);
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
-    var dist$2 = createCommonjsModule$1(function (module, exports) {
+    var dist$1 = createCommonjsModule$1(function (module, exports) {
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.sanitizeUrl = void 0;
     var invalidProtocolRegex = /^([^\w]*)(javascript|data|vbscript)/im;
@@ -5562,14 +5562,14 @@ var StreamChatReact = (function (exports, React, streamChat) {
     exports.sanitizeUrl = sanitizeUrl;
     });
 
-    unwrapExports(dist$2);
-    var dist_1$1 = dist$2.sanitizeUrl;
+    unwrapExports(dist$1);
+    var dist_1 = dist$1.sanitizeUrl;
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedSafeAnchor = function (props) {
         var children = props.children, className = props.className, download = props.download, href = props.href, rel = props.rel, target = props.target;
         if (!href)
             return null;
-        var sanitized = dist_1$1(href);
+        var sanitized = dist_1(href);
         return (React__default['default'].createElement("a", { "aria-label": 'Attachment', className: className, download: download, href: sanitized, rel: rel, target: target }, children));
     };
     var SafeAnchor = React__default['default'].memo(UnMemoizedSafeAnchor);
@@ -7729,6 +7729,8 @@ var StreamChatReact = (function (exports, React, streamChat) {
         var _a = React.useState(0), index = _a[0], setIndex = _a[1];
         var _b = React.useState(false), modalOpen = _b[0], setModalOpen = _b[1];
         var t = useTranslationContext('Gallery').t;
+        var countImagesDisplayedInPreview = 4;
+        var lastImageIndexInPreview = countImagesDisplayedInPreview - 1;
         var toggleModal = function (selectedIndex) {
             if (modalOpen) {
                 setModalOpen(false);
@@ -7745,16 +7747,17 @@ var StreamChatReact = (function (exports, React, streamChat) {
                 source: image.image_url || image.thumb_url || '',
             }); });
         }, [images]);
-        var renderImages = images.slice(0, 3).map(function (image, i) { return (React__default['default'].createElement("button", { className: 'str-chat__gallery-image', "data-testid": 'gallery-image', key: "gallery-image-" + i, onClick: function () { return toggleModal(i); } },
-            React__default['default'].createElement("img", { alt: 'User uploaded content', src: image.image_url || image.thumb_url }))); });
-        return (React__default['default'].createElement("div", { className: "str-chat__gallery " + (images.length > 3 ? 'str-chat__gallery--square' : '') },
-            renderImages,
-            images.length > 3 && (React__default['default'].createElement("button", { className: 'str-chat__gallery-placeholder', onClick: function () { return toggleModal(3); }, style: {
-                    backgroundImage: "url(" + images[3].image_url + ")",
+        var renderImages = images.slice(0, countImagesDisplayedInPreview).map(function (image, i) {
+            return i === lastImageIndexInPreview && images.length > countImagesDisplayedInPreview ? (React__default['default'].createElement("button", { className: 'str-chat__gallery-placeholder', key: "gallery-image-" + i, onClick: function () { return toggleModal(i); }, style: {
+                    backgroundImage: "url(" + images[lastImageIndexInPreview].image_url + ")",
                 } },
                 React__default['default'].createElement("p", null, t('{{ imageCount }} more', {
-                    imageCount: images.length - 3,
-                })))),
+                    imageCount: images.length - countImagesDisplayedInPreview,
+                })))) : (React__default['default'].createElement("button", { className: 'str-chat__gallery-image', "data-testid": 'gallery-image', key: "gallery-image-" + i, onClick: function () { return toggleModal(i); } },
+                React__default['default'].createElement("img", { alt: 'User uploaded content', src: image.image_url || image.thumb_url })));
+        });
+        return (React__default['default'].createElement("div", { className: "str-chat__gallery " + (images.length > lastImageIndexInPreview ? 'str-chat__gallery--square' : '') },
+            renderImages,
             React__default['default'].createElement(ModalComponent, { images: formattedArray, index: index, modalIsOpen: modalOpen, toggleModal: function () { return setModalOpen(!modalOpen); } })));
     };
     /**
@@ -7768,7 +7771,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
     var ImageComponent = function (props) {
         var _a = React.useState(false), modalIsOpen = _a[0], setModalIsOpen = _a[1];
         var fallback = props.fallback, image_url = props.image_url, thumb_url = props.thumb_url;
-        var imageSrc = dist_1$1(image_url || thumb_url);
+        var imageSrc = dist_1(image_url || thumb_url);
         var formattedArray = [
             { original: imageSrc, originalAlt: 'User uploaded content', source: imageSrc },
         ];
@@ -19133,7 +19136,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
     var postprocess_1 = postprocess;
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
-    var dist$1 = fromMarkdown;
+    var dist = fromMarkdown;
 
     // These three are compiled away in the `dist/`
 
@@ -19952,7 +19955,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
     }
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
-    var mdastUtilFromMarkdown = dist$1;
+    var mdastUtilFromMarkdown = dist;
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
     var remarkParse = parse;
@@ -35562,7 +35565,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
                     return type;
                 }).join() : '') + pinned + reply_count + status + (updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
                     ? updated_at.toISOString()
-                    : updated_at || '') + (user === null || user === void 0 ? void 0 : user.image) + (user === null || user === void 0 ? void 0 : user.name);
+                    : updated_at || '') + (user === null || user === void 0 ? void 0 : user.updated_at);
             })
                 .join();
         var memoizedThreadMessageData = threadMessages
@@ -35573,7 +35576,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
                 return type;
             }).join() : '') + pinned + status + (updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
                 ? updated_at.toISOString()
-                : updated_at || '') + (user === null || user === void 0 ? void 0 : user.image) + (user === null || user === void 0 ? void 0 : user.name);
+                : updated_at || '') + (user === null || user === void 0 ? void 0 : user.updated_at);
         })
             .join();
         var channelStateContext = React.useMemo(function () { return ({
@@ -35988,7 +35991,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
         return true;
     };
     var areMessagePropsEqual = function (prevProps, nextProps) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f;
         var prevMessage = prevProps.message, prevMessageUI = prevProps.Message;
         var nextMessage = nextProps.message, nextMessageUI = nextProps.Message;
         if (prevMessageUI !== nextMessageUI)
@@ -36007,8 +36010,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
             prevMessage.text === nextMessage.text &&
             prevMessage.type === nextMessage.type &&
             prevMessage.updated_at === nextMessage.updated_at &&
-            ((_e = prevMessage.user) === null || _e === void 0 ? void 0 : _e.image) === ((_f = nextMessage.user) === null || _f === void 0 ? void 0 : _f.image) &&
-            ((_g = prevMessage.user) === null || _g === void 0 ? void 0 : _g.name) === ((_h = nextMessage.user) === null || _h === void 0 ? void 0 : _h.name);
+            ((_e = prevMessage.user) === null || _e === void 0 ? void 0 : _e.updated_at) === ((_f = nextMessage.user) === null || _f === void 0 ? void 0 : _f.updated_at);
         if (!messagesAreEqual)
             return false;
         var deepEqualProps = reactFastCompare(nextProps.readBy, prevProps.readBy) &&
@@ -36022,7 +36024,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
         );
     };
     var areMessageUIPropsEqual = function (prevProps, nextProps) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         var prevLastReceivedId = prevProps.lastReceivedId, prevMessage = prevProps.message;
         var nextLastReceivedId = nextProps.lastReceivedId, nextMessage = nextProps.message;
         if (prevProps.editing !== nextProps.editing)
@@ -36042,7 +36044,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
             prevLastReceivedId !== nextLastReceivedId) {
             return false;
         }
-        var messagesAreEqual = prevMessage.deleted_at === nextMessage.deleted_at &&
+        return (prevMessage.deleted_at === nextMessage.deleted_at &&
             ((_e = prevMessage.latest_reactions) === null || _e === void 0 ? void 0 : _e.length) === ((_f = nextMessage.latest_reactions) === null || _f === void 0 ? void 0 : _f.length) &&
             ((_g = prevMessage.own_reactions) === null || _g === void 0 ? void 0 : _g.length) === ((_h = nextMessage.own_reactions) === null || _h === void 0 ? void 0 : _h.length) &&
             prevMessage.pinned === nextMessage.pinned &&
@@ -36051,11 +36053,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
             prevMessage.text === nextMessage.text &&
             prevMessage.type === nextMessage.type &&
             prevMessage.updated_at === nextMessage.updated_at &&
-            ((_j = prevMessage.user) === null || _j === void 0 ? void 0 : _j.image) === ((_k = nextMessage.user) === null || _k === void 0 ? void 0 : _k.image) &&
-            ((_l = prevMessage.user) === null || _l === void 0 ? void 0 : _l.name) === ((_m = nextMessage.user) === null || _m === void 0 ? void 0 : _m.name);
-        if (!messagesAreEqual)
-            return false;
-        return true;
+            ((_j = prevMessage.user) === null || _j === void 0 ? void 0 : _j.updated_at) === ((_k = nextMessage.user) === null || _k === void 0 ? void 0 : _k.updated_at));
     };
     var messageHasReactions = function (message) { return !!(message === null || message === void 0 ? void 0 : message.latest_reactions) && !!message.latest_reactions.length; };
     var messageHasAttachments = function (message) { return !!(message === null || message === void 0 ? void 0 : message.attachments) && !!message.attachments.length; };
@@ -38986,25 +38984,27 @@ var StreamChatReact = (function (exports, React, streamChat) {
                         _a.sent();
                         addNotification(t('Edit message request failed'), 'error');
                         return [3 /*break*/, 4];
-                    case 4: return [3 /*break*/, 12];
+                    case 4: return [3 /*break*/, 13];
                     case 5:
-                        _a.trys.push([5, 11, , 12]);
+                        _a.trys.push([5, 12, , 13]);
                         dispatch({ type: 'clear' });
-                        if (!overrideSubmitHandler) return [3 /*break*/, 6];
-                        overrideSubmitHandler(__assign$2(__assign$2({}, updatedMessage), { parent: parent }), channel.cid);
-                        return [3 /*break*/, 8];
-                    case 6: return [4 /*yield*/, sendMessage(__assign$2(__assign$2({}, updatedMessage), { parent: parent }), customMessageData)];
-                    case 7:
+                        if (!overrideSubmitHandler) return [3 /*break*/, 7];
+                        return [4 /*yield*/, overrideSubmitHandler(__assign$2(__assign$2({}, updatedMessage), { parent: parent }), channel.cid, customMessageData)];
+                    case 6:
                         _a.sent();
-                        _a.label = 8;
+                        return [3 /*break*/, 9];
+                    case 7: return [4 /*yield*/, sendMessage(__assign$2(__assign$2({}, updatedMessage), { parent: parent }), customMessageData)];
                     case 8:
-                        if (!publishTypingEvent) return [3 /*break*/, 10];
-                        return [4 /*yield*/, channel.stopTyping()];
+                        _a.sent();
+                        _a.label = 9;
                     case 9:
+                        if (!publishTypingEvent) return [3 /*break*/, 11];
+                        return [4 /*yield*/, channel.stopTyping()];
+                    case 10:
                         _a.sent();
-                        _a.label = 10;
-                    case 10: return [3 /*break*/, 12];
-                    case 11:
+                        _a.label = 11;
+                    case 11: return [3 /*break*/, 13];
+                    case 12:
                         _a.sent();
                         dispatch({
                             getNewText: function () { return text; },
@@ -39016,8 +39016,8 @@ var StreamChatReact = (function (exports, React, streamChat) {
                             });
                         }
                         addNotification(t('Send message request failed'), 'error');
-                        return [3 /*break*/, 12];
-                    case 12: return [2 /*return*/];
+                        return [3 /*break*/, 13];
+                    case 13: return [2 /*return*/];
                 }
             });
         }); };
@@ -40478,15 +40478,20 @@ var StreamChatReact = (function (exports, React, streamChat) {
 
     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 img = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='78px' height='78px' viewBox='0 0 78 78' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e %3c!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch --%3e %3ctitle%3eCombined Shape%3c/title%3e %3cdesc%3eCreated with Sketch.%3c/desc%3e %3cg id='Interactions' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e %3cg id='Connection-Error-_-Connectivity' transform='translate(-270.000000%2c -30.000000)' fill='%23CF1F25'%3e %3cg id='109-network-connection' transform='translate(270.000000%2c 30.000000)'%3e %3cpath d='M66.4609744%2c11.414231 C81.6225232%2c26.5757798 81.6225232%2c51.157545 66.4609744%2c66.3188467 C51.2994256%2c81.4803954 26.7176604%2c81.4803954 11.5563587%2c66.3188467 C-3.60519004%2c51.1572979 -3.60519004%2c26.5755327 11.5563587%2c11.414231 C26.7179075%2c-3.74731776 51.2996727%2c-3.74731776 66.4609744%2c11.414231 Z M54.7853215%2c45.8823776 L54.7853215%2c40.5882574 C54.7853215%2c39.613638 53.9952341%2c38.8235506 53.0206147%2c38.8235506 L44.9576695%2c38.8235506 L41.428256%2c42.3529641 L51.255555%2c42.3529641 L51.255555%2c45.8823776 L54.7853215%2c45.8823776 Z M40.6659027%2c43.1153174 L37.8988425%2c45.8823776 L40.6659027%2c45.8823776 L40.6659027%2c43.1153174 Z M51.1764962%2c56.4702653 L58.2353232%2c56.4702653 C59.2099355%2c56.4702653 60.00003%2c55.6801708 60.00003%2c54.7055585 L60.00003%2c51.176145 C60.00003%2c50.2015327 59.2099355%2c49.4114382 58.2353232%2c49.4114382 L51.1764962%2c49.4114382 C50.2018839%2c49.4114382 49.4117894%2c50.2015327 49.4117894%2c51.176145 L49.4117894%2c54.7055585 C49.4117894%2c55.6801708 50.2018839%2c56.4702653 51.1764962%2c56.4702653 Z M35.2941353%2c56.4702653 L42.3529624%2c56.4702653 C43.3275746%2c56.4702653 44.1176691%2c55.6801708 44.1176691%2c54.7055585 L44.1176691%2c51.176145 C44.1176691%2c50.2015327 43.3275746%2c49.4114382 42.3529624%2c49.4114382 L35.2941353%2c49.4114382 C34.319523%2c49.4114382 33.5294285%2c50.2015327 33.5294285%2c51.176145 L33.5294285%2c54.7055585 C33.5294285%2c55.6801708 34.319523%2c56.4702653 35.2941353%2c56.4702653 Z M56.6964989%2c19.0874231 C56.007381%2c18.3985134 54.8903216%2c18.3985134 54.2012036%2c19.087423 L45.882376%2c27.4062507 L45.882376%2c19.4117761 C45.882376%2c18.4371568 45.0922885%2c17.6470693 44.1176692%2c17.6470693 L33.5294286%2c17.6470693 C32.5548092%2c17.6470694 31.7647218%2c18.4371568 31.7647218%2c19.4117761 L31.7647218%2c30.0000167 C31.7647219%2c30.9746363 32.5548092%2c31.7647237 33.5294285%2c31.7647237 L41.5239031%2c31.7647237 L34.4650761%2c38.8235508 L24.7058947%2c38.8235508 C23.7312753%2c38.8235508 22.9411879%2c39.6136382 22.9411879%2c40.5882575 L22.9411879%2c45.8823778 L26.4706014%2c45.8823778 L26.4706014%2c42.3529643 L30.9356624%2c42.3529643 L23.8768354%2c49.4117914 L19.4117743%2c49.4117914 C18.4371549%2c49.4117914 17.6470675%2c50.2018788 17.6470675%2c51.1764981 L17.6470675%2c54.7059117 C17.6504049%2c54.9674302 17.7129076%2c55.2248042 17.8298886%2c55.4587302 L16.4456526%2c56.8429662 C15.7446193%2c57.5200453 15.7252005%2c58.6372282 16.4022825%2c59.3382615 C17.0793616%2c60.0392948 18.1965445%2c60.0587136 18.8975778%2c59.3816316 C18.9122847%2c59.3674273 18.9267436%2c59.3529684 18.940948%2c59.3382615 L56.6964963%2c21.5830662 C57.3856425%2c20.8939094 57.3856425%2c19.7765747 56.6964963%2c19.0874179 Z' id='Combined-Shape'%3e%3c/path%3e %3c/g%3e %3c/g%3e %3c/g%3e%3c/svg%3e";
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var ConnectionErrorIcon = function () { return (React__default['default'].createElement("svg", { height: '78px', version: '1.1', viewBox: '0 0 78 78', width: '78px', xmlns: 'http://www.w3.org/2000/svg' },
+        React__default['default'].createElement("title", null, "Connection Error"),
+        React__default['default'].createElement("g", { fill: 'none', fillRule: 'evenodd', id: 'Interactions', stroke: 'none', strokeWidth: '1' },
+            React__default['default'].createElement("g", { fill: '#CF1F25', id: 'Connection-Error-_-Connectivity', transform: 'translate(-270.000000, -30.000000)' },
+                React__default['default'].createElement("g", { id: '109-network-connection', transform: 'translate(270.000000, 30.000000)' },
+                    React__default['default'].createElement("path", { d: 'M66.4609744,11.414231 C81.6225232,26.5757798 81.6225232,51.157545 66.4609744,66.3188467 C51.2994256,81.4803954 26.7176604,81.4803954 11.5563587,66.3188467 C-3.60519004,51.1572979 -3.60519004,26.5755327 11.5563587,11.414231 C26.7179075,-3.74731776 51.2996727,-3.74731776 66.4609744,11.414231 Z M54.7853215,45.8823776 L54.7853215,40.5882574 C54.7853215,39.613638 53.9952341,38.8235506 53.0206147,38.8235506 L44.9576695,38.8235506 L41.428256,42.3529641 L51.255555,42.3529641 L51.255555,45.8823776 L54.7853215,45.8823776 Z M40.6659027,43.1153174 L37.8988425,45.8823776 L40.6659027,45.8823776 L40.6659027,43.1153174 Z M51.1764962,56.4702653 L58.2353232,56.4702653 C59.2099355,56.4702653 60.00003,55.6801708 60.00003,54.7055585 L60.00003,51.176145 C60.00003,50.2015327 59.2099355,49.4114382 58.2353232,49.4114382 L51.1764962,49.4114382 C50.2018839,49.4114382 49.4117894,50.2015327 49.4117894,51.176145 L49.4117894,54.7055585 C49.4117894,55.6801708 50.2018839,56.4702653 51.1764962,56.4702653 Z M35.2941353,56.4702653 L42.3529624,56.4702653 C43.3275746,56.4702653 44.1176691,55.6801708 44.1176691,54.7055585 L44.1176691,51.176145 C44.1176691,50.2015327 43.3275746,49.4114382 42.3529624,49.4114382 L35.2941353,49.4114382 C34.319523,49.4114382 33.5294285,50.2015327 33.5294285,51.176145 L33.5294285,54.7055585 C33.5294285,55.6801708 34.319523,56.4702653 35.2941353,56.4702653 Z M56.6964989,19.0874231 C56.007381,18.3985134 54.8903216,18.3985134 54.2012036,19.087423 L45.882376,27.4062507 L45.882376,19.4117761 C45.882376,18.4371568 45.0922885,17.6470693 44.1176692,17.6470693 L33.5294286,17.6470693 C32.5548092,17.6470694 31.7647218,18.4371568 31.7647218,19.4117761 L31.7647218,30.0000167 C31.7647219,30.9746363 32.5548092,31.7647237 33.5294285,31.7647237 L41.5239031,31.7647237 L34.4650761,38.8235508 L24.7058947,38.8235508 C23.7312753,38.8235508 22.9411879,39.6136382 22.9411879,40.5882575 L22.9411879,45.8823778 L26.4706014,45.8823778 L26.4706014,42.3529643 L30.9356624,42.3529643 L23.8768354,49.4117914 L19.4117743,49.4117914 C18.4371549,49.4117914 17.6470675,50.2018788 17.6470675,51.1764981 L17.6470675,54.7059117 C17.6504049,54.9674302 17.7129076,55.2248042 17.8298886,55.4587302 L16.4456526,56.8429662 C15.7446193,57.5200453 15.7252005,58.6372282 16.4022825,59.3382615 C17.0793616,60.0392948 18.1965445,60.0587136 18.8975778,59.3816316 C18.9122847,59.3674273 18.9267436,59.3529684 18.940948,59.3382615 L56.6964963,21.5830662 C57.3856425,20.8939094 57.3856425,19.7765747 56.6964963,19.0874179 Z', id: 'Combined-Shape' })))))); };
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedChatDown = function (props) {
-        var image = props.image, text = props.text, _a = props.type, type = _a === void 0 ? 'Error' : _a;
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedChatDown = function (_a) {
+        var _b = _a.image, image = _b === void 0 ? React__default['default'].createElement(ConnectionErrorIcon, null) : _b, text = _a.text, _c = _a.type, type = _c === void 0 ? 'Error' : _c;
         var t = useTranslationContext('ChatDown').t;
         return (React__default['default'].createElement("div", { className: 'str-chat__down' },
             React__default['default'].createElement(LoadingChannels, null),
             React__default['default'].createElement("div", { className: 'str-chat__down-main' },
-                React__default['default'].createElement("img", { alt: 'Connection error', "data-testid": 'chatdown-img', src: image || img }),
+                typeof image === 'string' ? (React__default['default'].createElement("img", { alt: 'Connection error', "data-testid": 'chatdown-img', src: image })) : (image),
                 React__default['default'].createElement("h1", null, type),
                 React__default['default'].createElement("h3", { "aria-live": 'assertive' }, text || t('Error connecting to chat, refresh the page to try again.')))));
     };
@@ -40982,8 +40987,10 @@ var StreamChatReact = (function (exports, React, streamChat) {
         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;
         var _c = useTranslationContext('ChannelPreview'), t = _c.t, userLanguage = _c.userLanguage;
-        var _d = React.useState(channel.state.messages[channel.state.messages.length - 1]), lastMessage = _d[0], setLastMessage = _d[1];
-        var _e = React.useState(0), unread = _e[0], setUnread = _e[1];
+        var _d = React.useState(getDisplayTitle(channel, client.user)), displayTitle = _d[0], setDisplayTitle = _d[1];
+        var _e = React.useState(getDisplayImage(channel, client.user)), displayImage = _e[0], setDisplayImage = _e[1];
+        var _f = React.useState(channel.state.messages[channel.state.messages.length - 1]), lastMessage = _f[0], setLastMessage = _f[1];
+        var _g = React.useState(0), unread = _g[0], setUnread = _g[1];
         var isActive = (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.cid) === channel.cid;
         var muted = useIsChannelMuted(channel).muted;
         React.useEffect(function () {
@@ -41020,10 +41027,24 @@ var StreamChatReact = (function (exports, React, streamChat) {
                 channel.off('message.deleted', handleEvent);
             };
         }, [refreshUnreadCount, channelUpdateCount]);
+        React.useEffect(function () {
+            var handleEvent = function () {
+                setDisplayTitle(function (displayTitle) {
+                    var newDisplayTitle = getDisplayTitle(channel, client.user);
+                    return displayTitle !== newDisplayTitle ? newDisplayTitle : displayTitle;
+                });
+                setDisplayImage(function (displayImage) {
+                    var newDisplayImage = getDisplayImage(channel, client.user);
+                    return displayImage !== newDisplayImage ? newDisplayImage : displayImage;
+                });
+            };
+            client.on('user.updated', handleEvent);
+            return function () {
+                client.off('user.updated', handleEvent);
+            };
+        }, []);
         if (!Preview)
             return null;
-        var displayImage = getDisplayImage(channel, client.user);
-        var displayTitle = getDisplayTitle(channel, client.user);
         var latestMessage = getLatestMessagePreview(channel, t, userLanguage);
         return (React__default['default'].createElement(Preview, __assign$2({}, props, { active: isActive, displayImage: displayImage, displayTitle: displayTitle, lastMessage: lastMessage, latestMessage: latestMessage, setActiveChannel: setActiveChannel, unread: unread })));
     };
@@ -44946,7 +44967,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
 
     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 = '8.1.1';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version = '8.1.3';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;
@@ -47910,7 +47931,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
     var ThreadInner = function (props) {
         var additionalMessageInputProps = props.additionalMessageInputProps, additionalMessageListProps = props.additionalMessageListProps, additionalParentMessageProps = props.additionalParentMessageProps, additionalVirtualizedMessageListProps = props.additionalVirtualizedMessageListProps, _a = props.autoFocus, autoFocus = _a === void 0 ? true : _a, _b = props.enableDateSeparator, enableDateSeparator = _b === void 0 ? false : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? false : _c, PropInput = props.Input, PropMessage = props.Message, virtualized = props.virtualized;
         var _d = useChannelStateContext('Thread'), thread = _d.thread, threadHasMore = _d.threadHasMore, threadLoadingMore = _d.threadLoadingMore, threadMessages = _d.threadMessages;
-        var _e = useChannelActionContext('Thread'), closeThread = _e.closeThread, loadMoreThread = _e.loadMoreThread;
+        var _e = useChannelActionContext('Thread'), closeThread = _e.closeThread, loadMoreThread = _e.loadMoreThread, sendMessage = _e.sendMessage;
         var customClasses = useChatContext('Thread').customClasses;
         var _f = useComponentContext('Thread'), ContextInput = _f.ThreadInput, ContextMessage = _f.Message, _g = _f.ThreadHeader, ThreadHeader = _g === void 0 ? DefaultThreadHeader : _g, _h = _f.ThreadStart, ThreadStart = _h === void 0 ? DefaultThreadStart : _h, _j = _f.VirtualMessage, VirtualMessage = _j === void 0 ? FixedHeightMessage : _j;
         var messageList = React.useRef(null);
@@ -47923,15 +47944,19 @@ var StreamChatReact = (function (exports, React, streamChat) {
                 loadMoreThread();
             }
         }, []);
-        React.useEffect(function () {
-            if (messageList.current && (threadMessages === null || threadMessages === void 0 ? void 0 : threadMessages.length)) {
-                var _a = messageList.current, clientHeight = _a.clientHeight, scrollHeight = _a.scrollHeight, scrollTop = _a.scrollTop;
-                var scrollDown = clientHeight + scrollTop !== scrollHeight;
-                if (scrollDown) {
-                    messageList.current.scrollTop = scrollHeight - clientHeight;
+        var threadSubmitHandler = function (message, _, customMessageData) { return __awaiter$1(void 0, void 0, void 0, function () {
+            return __generator$1(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, sendMessage(message, customMessageData)];
+                    case 1:
+                        _a.sent();
+                        if (messageList.current) {
+                            messageList.current.scrollTop = messageList.current.scrollHeight;
+                        }
+                        return [2 /*return*/];
                 }
-            }
-        }, [threadMessages === null || threadMessages === void 0 ? void 0 : threadMessages.length]);
+            });
+        }); };
         if (!thread)
             return null;
         var threadClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.thread) || 'str-chat__thread';
@@ -47941,7 +47966,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
                 React__default['default'].createElement(Message, __assign$2({ initialMessage: true, message: thread, Message: ThreadMessage || FallbackMessage, threadList: true }, additionalParentMessageProps)),
                 React__default['default'].createElement(ThreadStart, null),
                 React__default['default'].createElement(ThreadMessageList, __assign$2({ disableDateSeparator: !enableDateSeparator, hasMore: threadHasMore, loadingMore: threadLoadingMore, loadMore: loadMoreThread, Message: ThreadMessage || FallbackMessage, messages: threadMessages || [], threadList: true }, (virtualized ? additionalVirtualizedMessageListProps : additionalMessageListProps)))),
-            React__default['default'].createElement(MessageInput, __assign$2({ focus: autoFocus, Input: ThreadInput, parent: thread, publishTypingEvent: false }, additionalMessageInputProps))));
+            React__default['default'].createElement(MessageInput, __assign$2({ focus: autoFocus, Input: ThreadInput, overrideSubmitHandler: threadSubmitHandler, parent: thread, publishTypingEvent: false }, additionalMessageInputProps))));
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
@@ -52626,41 +52651,6 @@ var StreamChatReact = (function (exports, React, streamChat) {
 
     var src = parseXml;
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
-    var dist = createCommonjsModule$1(function (module, exports) {
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.sanitizeUrl = void 0;
-    var invalidProtocolRegex = /^(%20|\s)*(javascript|data|vbscript)/im;
-    var ctrlCharactersRegex = /[^\x20-\x7EÀ-ž]/gim;
-    var urlSchemeRegex = /^([^:]+):/gm;
-    var relativeFirstCharacters = [".", "/"];
-    function isRelativeUrlWithoutProtocol(url) {
-        return relativeFirstCharacters.indexOf(url[0]) > -1;
-    }
-    function sanitizeUrl(url) {
-        if (!url) {
-            return "about:blank";
-        }
-        var sanitizedUrl = url.replace(ctrlCharactersRegex, "").trim();
-        if (isRelativeUrlWithoutProtocol(sanitizedUrl)) {
-            return sanitizedUrl;
-        }
-        var urlSchemeParseResults = sanitizedUrl.match(urlSchemeRegex);
-        if (!urlSchemeParseResults) {
-            return sanitizedUrl;
-        }
-        var urlScheme = urlSchemeParseResults[0];
-        if (invalidProtocolRegex.test(urlScheme)) {
-            return "about:blank";
-        }
-        return sanitizedUrl;
-    }
-    exports.sanitizeUrl = sanitizeUrl;
-    });
-
-    unwrapExports(dist);
-    var dist_1 = dist.sanitizeUrl;
-
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
     var ical = createCommonjsModule$1(function (module) {
     /* This Source Code Form is subject to the terms of the Mozilla Public