stream-chat-react 8.1.1 → 8.1.3

package/dist/index.cjs.js

@@ -448,6 +448,8 @@ var UnMemoizedGallery = function (props) {
     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);
@@ -464,16 +466,17 @@ var UnMemoizedGallery = function (props) {
             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); } })));
 };
 /**
@@ -2185,7 +2188,7 @@ var useCreateChannelStateContext = function (value) {
                 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
@@ -2196,7 +2199,7 @@ var useCreateChannelStateContext = function (value) {
             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 ({
@@ -2609,7 +2612,7 @@ var showMessageActionsBox = function (actions, inThread) {
     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)
@@ -2628,8 +2631,7 @@ var areMessagePropsEqual = function (prevProps, nextProps) {
         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 = deepequal__default['default'](nextProps.readBy, prevProps.readBy) &&
@@ -2643,7 +2645,7 @@ var areMessagePropsEqual = function (prevProps, nextProps) {
     );
 };
 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)
@@ -2663,7 +2665,7 @@ var areMessageUIPropsEqual = function (prevProps, nextProps) {
         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 &&
@@ -2672,11 +2674,7 @@ var areMessageUIPropsEqual = function (prevProps, nextProps) {
         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; };
@@ -4800,25 +4798,27 @@ var useSubmitHandler = function (props, state, dispatch, numberOfUploads) {
                     _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(__assign({}, updatedMessage), { parent: parent }), channel.cid);
-                    return [3 /*break*/, 8];
-                case 6: return [4 /*yield*/, sendMessage(__assign(__assign({}, updatedMessage), { parent: parent }), customMessageData)];
-                case 7:
+                    if (!overrideSubmitHandler) return [3 /*break*/, 7];
+                    return [4 /*yield*/, overrideSubmitHandler(__assign(__assign({}, updatedMessage), { parent: parent }), channel.cid, customMessageData)];
+                case 6:
                     _a.sent();
-                    _a.label = 8;
+                    return [3 /*break*/, 9];
+                case 7: return [4 /*yield*/, sendMessage(__assign(__assign({}, 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; },
@@ -4830,8 +4830,8 @@ var useSubmitHandler = function (props, state, dispatch, numberOfUploads) {
                         });
                     }
                     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*/];
             }
         });
     }); };
@@ -6278,15 +6278,20 @@ var UnMemoizedChannelHeader = function (props) {
  */
 var ChannelHeader = React__default['default'].memo(UnMemoizedChannelHeader);
 
-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";
+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' })))))); };
 
-var UnMemoizedChatDown = function (props) {
-    var image = props.image, text = props.text, _a = props.type, type = _a === void 0 ? 'Error' : _a;
+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.')))));
 };
@@ -6782,8 +6787,10 @@ var ChannelPreview = function (props) {
     var channel = props.channel, _a = props.Preview, Preview = _a === void 0 ? ChannelPreviewMessenger : _a, channelUpdateCount = props.channelUpdateCount;
     var _b = useChatContext('ChannelPreview'), activeChannel = _b.channel, client = _b.client, setActiveChannel = _b.setActiveChannel;
     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 () {
@@ -6820,10 +6827,24 @@ var ChannelPreview = function (props) {
             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({}, props, { active: isActive, displayImage: displayImage, displayTitle: displayTitle, lastMessage: lastMessage, latestMessage: latestMessage, setActiveChannel: setActiveChannel, unread: unread })));
 };
@@ -7779,7 +7800,7 @@ var Streami18n = /** @class */ (function () {
     return Streami18n;
 }());
 
-var version = '8.1.1';
+var version = '8.1.3';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -9508,7 +9529,7 @@ var DefaultThreadStart = function () {
 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);
@@ -9521,15 +9542,19 @@ var ThreadInner = function (props) {
             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(void 0, void 0, void 0, function () {
+        return __generator(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';
@@ -9539,7 +9564,7 @@ var ThreadInner = function (props) {
             React__default['default'].createElement(Message, __assign({ initialMessage: true, message: thread, Message: ThreadMessage || FallbackMessage, threadList: true }, additionalParentMessageProps)),
             React__default['default'].createElement(ThreadStart, null),
             React__default['default'].createElement(ThreadMessageList, __assign({ disableDateSeparator: !enableDateSeparator, hasMore: threadHasMore, loadingMore: threadLoadingMore, loadMore: loadMoreThread, Message: ThreadMessage || FallbackMessage, messages: threadMessages || [], threadList: true }, (virtualized ? additionalVirtualizedMessageListProps : additionalMessageListProps)))),
-        React__default['default'].createElement(MessageInput, __assign({ focus: autoFocus, Input: ThreadInput, parent: thread, publishTypingEvent: false }, additionalMessageInputProps))));
+        React__default['default'].createElement(MessageInput, __assign({ focus: autoFocus, Input: ThreadInput, overrideSubmitHandler: threadSubmitHandler, parent: thread, publishTypingEvent: false }, additionalMessageInputProps))));
 };
 
 var UnMemoizedWindow = function (props) {