sceyt-chat-react-uikit 1.7.1-beta.17 → 1.7.1-beta.19

package/index.js

@@ -10397,7 +10397,7 @@ var messageSlice = createSlice({
           return msg.tid === message.tid || msg.id === message.id;
         });
       });
-      if (direction === MESSAGE_LOAD_DIRECTION.PREV) {
+      if (direction === MESSAGE_LOAD_DIRECTION.PREV && newMessagesLength > 0) {
         if (currentMessagesLength + newMessagesLength >= MESSAGES_MAX_LENGTH) {
           var _state$activeChannelM;
           setHasNextCached(true);
@@ -10419,7 +10419,7 @@ var messageSlice = createSlice({
           var _state$activeChannelM3;
           (_state$activeChannelM3 = state.activeChannelMessages).splice.apply(_state$activeChannelM3, [0, 0].concat(messagesIsNotIncludeInActiveChannelMessages));
         }
-      } else if (direction === 'next') {
+      } else if (direction === 'next' && newMessagesLength > 0) {
         if (currentMessagesLength >= MESSAGES_MAX_LENGTH) {
           var _state$activeChannelM4;
           setHasPrevCached(true);
@@ -18520,7 +18520,7 @@ function getMessagesQuery(action) {
       case 1:
         _action$payload = action.payload, channel = _action$payload.channel, loadWithLastMessage = _action$payload.loadWithLastMessage, messageId = _action$payload.messageId, limit = _action$payload.limit, withDeliveredMessages = _action$payload.withDeliveredMessages, highlight = _action$payload.highlight, behavior = _action$payload.behavior;
         if (!(channel.id && !channel.isMockChannel)) {
-          _context9.n = 47;
+          _context9.n = 48;
           break;
         }
         SceytChatClient = getClient();
@@ -18548,6 +18548,7 @@ function getMessagesQuery(action) {
           break;
         }
         setHasPrevCached(false);
+        setMessagesToMap(channel.id, []);
         setAllMessages([]);
         _context9.n = 3;
         return effects.call(messageQuery.loadPreviousMessageId, '0');
@@ -18606,11 +18607,11 @@ function getMessagesQuery(action) {
         _context9.n = 12;
         return effects.put(setScrollToMessagesAC(messageId, highlight, behavior));
       case 12:
-        _context9.n = 45;
+        _context9.n = 46;
         break;
       case 13:
         if (!messageId) {
-          _context9.n = 25;
+          _context9.n = 26;
           break;
         }
         _allMessages = getAllMessages();
@@ -18619,7 +18620,7 @@ function getMessagesQuery(action) {
         });
         maxLengthPart = MESSAGES_MAX_LENGTH / 2;
         if (!(messageIndex >= maxLengthPart)) {
-          _context9.n = 15;
+          _context9.n = 16;
           break;
         }
         result.messages = _allMessages.slice(messageIndex - maxLengthPart, messageIndex + maxLengthPart);
@@ -18628,151 +18629,160 @@ function getMessagesQuery(action) {
       case 14:
         setHasPrevCached(messageIndex > maxLengthPart);
         setHasNextCached(_allMessages.length > maxLengthPart);
+        _context9.n = 15;
+        return effects.put(setMessagesHasPrevAC(true));
+      case 15:
         _context9.n = 22;
         break;
-      case 15:
+      case 16:
         messageQuery.limit = MESSAGES_MAX_LENGTH;
         log.info('load by message id from server ...............', messageId);
-        _context9.n = 16;
+        _context9.n = 17;
         return effects.call(messageQuery.loadNearMessageId, messageId);
-      case 16:
+      case 17:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 19;
+          _context9.n = 20;
           break;
         }
-        messageQuery.limit = (MESSAGES_MAX_LENGTH - 50) / 2;
-        _context9.n = 17;
+        messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
+        _context9.n = 18;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 17:
+      case 18:
         _secondResult = _context9.v;
         messageQuery.reverse = false;
-        _context9.n = 18;
+        _context9.n = 19;
         return effects.call(messageQuery.loadNextMessageId, result.messages[result.messages.length - 1].id);
-      case 18:
+      case 19:
         thirdResult = _context9.v;
         result.messages = [].concat(_secondResult.messages, result.messages, thirdResult.messages);
         result.hasNext = _secondResult.hasNext;
         messageQuery.reverse = true;
-      case 19:
-        log.info('result from server ....... ', result);
         _context9.n = 20;
-        return effects.put(setMessagesHasNextAC(true));
+        return effects.put(setMessagesHasPrevAC(_secondResult.hasNext));
       case 20:
+        log.info('result from server ....... ', result);
         _context9.n = 21;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
       case 21:
+        setMessagesToMap(channel.id, result.messages);
         setAllMessages([].concat(result.messages));
         setHasPrevCached(false);
         setHasNextCached(false);
       case 22:
         _context9.n = 23;
-        return effects.put(setScrollToMessagesAC(messageId, true, behavior));
+        return effects.put(setMessagesHasNextAC(true));
       case 23:
         _context9.n = 24;
-        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+        return effects.put(setScrollToMessagesAC(messageId, true, behavior));
       case 24:
-        _context9.n = 45;
-        break;
+        _context9.n = 25;
+        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
       case 25:
+        _context9.n = 46;
+        break;
+      case 26:
         if (!(channel.newMessageCount && channel.lastDisplayedMessageId)) {
-          _context9.n = 38;
+          _context9.n = 39;
           break;
         }
+        setMessagesToMap(channel.id, []);
         setAllMessages([]);
         messageQuery.limit = MESSAGES_MAX_LENGTH;
         if (!Number(channel.lastDisplayedMessageId)) {
-          _context9.n = 31;
+          _context9.n = 32;
           break;
         }
-        _context9.n = 26;
+        _context9.n = 27;
         return effects.call(messageQuery.loadNearMessageId, channel.lastDisplayedMessageId);
-      case 26:
+      case 27:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 30;
+          _context9.n = 31;
           break;
         }
         messageQuery.limit = channel.newMessageCount > 25 ? (MESSAGES_MAX_LENGTH - 50) / 2 : MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 27;
+        _context9.n = 28;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 27:
+      case 28:
         _secondResult2 = _context9.v;
         if (!(channel.newMessageCount > 25)) {
-          _context9.n = 29;
+          _context9.n = 30;
           break;
         }
         messageQuery.reverse = false;
-        _context9.n = 28;
+        _context9.n = 29;
         return effects.call(messageQuery.loadNextMessageId, result.messages[result.messages.length - 1].id);
-      case 28:
+      case 29:
         _thirdResult = _context9.v;
         result.messages = [].concat(_secondResult2.messages, result.messages, _thirdResult.messages);
         messageQuery.reverse = true;
-        _context9.n = 30;
+        _context9.n = 31;
         break;
-      case 29:
-        result.messages = [].concat(_secondResult2.messages, result.messages);
       case 30:
-        _context9.n = 34;
-        break;
+        result.messages = [].concat(_secondResult2.messages, result.messages);
       case 31:
-        _context9.n = 32;
-        return effects.call(messageQuery.loadPrevious);
+        _context9.n = 35;
+        break;
       case 32:
+        _context9.n = 33;
+        return effects.call(messageQuery.loadPrevious);
+      case 33:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 34;
+          _context9.n = 35;
           break;
         }
         messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 33;
+        _context9.n = 34;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 33:
+      case 34:
         _secondResult3 = _context9.v;
         result.messages = [].concat(_secondResult3.messages, result.messages);
         result.hasNext = _secondResult3.hasNext;
-      case 34:
-        setMessagesToMap(channel.id, result.messages);
-        _context9.n = 35;
-        return effects.put(setMessagesHasPrevAC(true));
       case 35:
         _context9.n = 36;
-        return effects.put(setMessagesHasNextAC(channel.lastMessage && result.messages.length > 0 && channel.lastMessage.id !== result.messages[result.messages.length - 1].id));
+        return effects.put(setMessagesHasPrevAC(true));
       case 36:
-        setAllMessages([].concat(result.messages));
         _context9.n = 37;
-        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
+        return effects.put(setMessagesHasNextAC(channel.lastMessage && result.messages.length > 0 && channel.lastMessage.id !== result.messages[result.messages.length - 1].id));
       case 37:
-        _context9.n = 45;
-        break;
+        setMessagesToMap(channel.id, result.messages);
+        setAllMessages([].concat(result.messages));
+        _context9.n = 38;
+        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
       case 38:
+        _context9.n = 46;
+        break;
+      case 39:
+        setMessagesToMap(channel.id, []);
         setAllMessages([]);
         if (!(cachedMessages && cachedMessages.length)) {
-          _context9.n = 39;
+          _context9.n = 40;
           break;
         }
+        setMessagesToMap(channel.id, []);
         setAllMessages([].concat(cachedMessages));
-        _context9.n = 39;
+        _context9.n = 40;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(cachedMessages))));
-      case 39:
+      case 40:
         log.info('load message from server');
-        _context9.n = 40;
+        _context9.n = 41;
         return effects.call(messageQuery.loadPrevious);
-      case 40:
+      case 41:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 42;
+          _context9.n = 43;
           break;
         }
         messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 41;
+        _context9.n = 42;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 41:
+      case 42:
         _secondResult4 = _context9.v;
         result.messages = [].concat(_secondResult4.messages, result.messages);
         result.hasNext = _secondResult4.hasNext;
-      case 42:
+      case 43:
         updatedMessages = [];
         result.messages.forEach(function (msg) {
           var updatedMessage = updateMessageOnMap(channel.id, {
@@ -18784,18 +18794,18 @@ function getMessagesQuery(action) {
         });
         setMessagesToMap(channel.id, updatedMessages);
         setAllMessages([].concat(updatedMessages));
-        _context9.n = 43;
-        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(updatedMessages))));
-      case 43:
         _context9.n = 44;
-        return effects.put(setMessagesHasPrevAC(result.hasNext));
+        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(updatedMessages))));
       case 44:
         _context9.n = 45;
-        return effects.put(setMessagesHasNextAC(false));
+        return effects.put(setMessagesHasPrevAC(result.hasNext));
       case 45:
+        _context9.n = 46;
+        return effects.put(setMessagesHasNextAC(false));
+      case 46:
         pendingMessages = getPendingMessages(channel.id);
         if (!(pendingMessages && pendingMessages.length)) {
-          _context9.n = 46;
+          _context9.n = 47;
           break;
         }
         _messagesMap = {};
@@ -18805,35 +18815,35 @@ function getMessagesQuery(action) {
         filteredPendingMessages = pendingMessages.filter(function (msg) {
           return !_messagesMap[msg.tid || ''];
         });
-        _context9.n = 46;
+        _context9.n = 47;
         return effects.put(addMessagesAC(filteredPendingMessages, MESSAGE_LOAD_DIRECTION.NEXT));
-      case 46:
-        _context9.n = 48;
-        break;
       case 47:
+        _context9.n = 49;
+        break;
+      case 48:
         if (!channel.isMockChannel) {
-          _context9.n = 48;
+          _context9.n = 49;
           break;
         }
-        _context9.n = 48;
+        _context9.n = 49;
         return effects.put(setMessagesAC([]));
-      case 48:
-        _context9.n = 50;
-        break;
       case 49:
-        _context9.p = 49;
-        _t9 = _context9.v;
-        log.error('error in message query', _t9);
+        _context9.n = 51;
+        break;
       case 50:
         _context9.p = 50;
-        _context9.n = 51;
-        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+        _t9 = _context9.v;
+        log.error('error in message query', _t9);
       case 51:
-        return _context9.f(50);
+        _context9.p = 51;
+        _context9.n = 52;
+        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
       case 52:
+        return _context9.f(51);
+      case 53:
         return _context9.a(2);
     }
-  }, _marked7$1, null, [[0, 49, 50, 52]]);
+  }, _marked7$1, null, [[0, 50, 51, 53]]);
 }
 function getMessageQuery(action) {
   var payload, channelId, messageId, channel, messages, fetchedMessage, _t0;
@@ -18979,25 +18989,38 @@ function loadMoreMessages(action) {
         _context1.n = 11;
         return effects.put(addMessagesAC(JSON.parse(JSON.stringify(result.messages)), direction));
       case 11:
-        _context1.n = 13;
+        _context1.n = 16;
         break;
       case 12:
         _context1.n = 13;
         return effects.put(addMessagesAC([], direction));
       case 13:
+        if (!(direction === MESSAGE_LOAD_DIRECTION.NEXT)) {
+          _context1.n = 15;
+          break;
+        }
         _context1.n = 14;
-        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+        return effects.put(setMessagesHasNextAC(false));
       case 14:
         _context1.n = 16;
         break;
       case 15:
-        _context1.p = 15;
+        _context1.n = 16;
+        return effects.put(setMessagesHasPrevAC(false));
+      case 16:
+        _context1.n = 17;
+        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+      case 17:
+        _context1.n = 19;
+        break;
+      case 18:
+        _context1.p = 18;
         _t1 = _context1.v;
         log.error('error in load more messages', _t1);
-      case 16:
+      case 19:
         return _context1.a(2);
     }
-  }, _marked9$1, null, [[0, 15]]);
+  }, _marked9$1, null, [[0, 18]]);
 }
 function addReaction(action) {
   var payload, channelId, messageId, key, score, reason, enforceUnique, user, channel, _yield$call, _message2, reaction, channelUpdateParam, _t10;
@@ -31331,7 +31354,7 @@ var OGMetadata = function OGMetadata(_ref) {
             var queryBuilder = new client.MessageLinkOGQueryBuilder(url);
             return Promise.resolve(queryBuilder.build()).then(function (query) {
               return Promise.resolve(query.loadOGData()).then(function (metadata) {
-                return Promise.resolve(storeMetadata(url.replace('https://', '').replace('http://', ''), metadata)).then(function () {
+                return Promise.resolve(storeMetadata(url, metadata)).then(function () {
                   setMetadata(metadata);
                 });
               });
@@ -31354,7 +31377,7 @@ var OGMetadata = function OGMetadata(_ref) {
     if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url) {
       var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
       if (url) {
-        getMetadata(url.replace('https://', '').replace('http://', '')).then(function (cachedMetadata) {
+        getMetadata(url).then(function (cachedMetadata) {
           try {
             if (cachedMetadata) {
               setMetadata(cachedMetadata);
@@ -31403,14 +31426,8 @@ var OGMetadata = function OGMetadata(_ref) {
       };
     }
   }, [metadata === null || metadata === void 0 ? void 0 : (_metadata$og6 = metadata.og) === null || _metadata$og6 === void 0 ? void 0 : (_metadata$og6$image = _metadata$og6.image) === null || _metadata$og6$image === void 0 ? void 0 : (_metadata$og6$image$ = _metadata$og6$image[0]) === null || _metadata$og6$image$ === void 0 ? void 0 : _metadata$og6$image$.url]);
-  var calculatedImageWidth = React.useMemo(function () {
-    if (imageWidth > 400) {
-      return 400;
-    }
-    return imageWidth;
-  }, [imageWidth]);
   var calculatedImageHeight = React.useMemo(function () {
-    return imageHeight / (imageWidth / calculatedImageWidth);
+    return imageHeight / (imageWidth / 400);
   }, [imageWidth, imageHeight]);
   return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
     showOGMetadata: !!showOGMetadata
@@ -31420,17 +31437,17 @@ var OGMetadata = function OGMetadata(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement(ImageContainer, {
     showOGMetadata: !!showOGMetadata && !imageLoadError && imageLoaded,
-    width: calculatedImageWidth,
+    width: 400,
     height: calculatedImageHeight
   }, metadata !== null && metadata !== void 0 && (_metadata$og7 = metadata.og) !== null && _metadata$og7 !== void 0 && (_metadata$og7$image = _metadata$og7.image) !== null && _metadata$og7$image !== void 0 && (_metadata$og7$image$ = _metadata$og7$image[0]) !== null && _metadata$og7$image$ !== void 0 && _metadata$og7$image$.url && !imageLoadError ? (/*#__PURE__*/React__default.createElement(Img, {
     src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og8 = metadata.og) === null || _metadata$og8 === void 0 ? void 0 : (_metadata$og8$image = _metadata$og8.image) === null || _metadata$og8$image === void 0 ? void 0 : (_metadata$og8$image$ = _metadata$og8$image[0]) === null || _metadata$og8$image$ === void 0 ? void 0 : _metadata$og8$image$.url,
     alt: 'OG metadata image',
-    width: calculatedImageWidth,
+    width: 400,
     height: calculatedImageHeight
   })) : null), showOGMetadata && imageLoaded ? (/*#__PURE__*/React__default.createElement(OGText, null, /*#__PURE__*/React__default.createElement(Url, {
-    maxWidth: calculatedImageWidth
+    maxWidth: 400
   }, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og9 = metadata.og) !== null && _metadata$og9 !== void 0 && _metadata$og9.title ? (/*#__PURE__*/React__default.createElement(Title, {
-    maxWidth: calculatedImageWidth
+    maxWidth: 400
   }, metadata !== null && metadata !== void 0 && (_metadata$og0 = metadata.og) !== null && _metadata$og0 !== void 0 && (_metadata$og0$favicon = _metadata$og0.favicon) !== null && _metadata$og0$favicon !== void 0 && _metadata$og0$favicon.url && !faviconLoadError ? (/*#__PURE__*/React__default.createElement(Favicon, {
     src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : (_metadata$og1$favicon = _metadata$og1.favicon) === null || _metadata$og1$favicon === void 0 ? void 0 : _metadata$og1$favicon.url,
     onLoad: function onLoad() {
@@ -31439,9 +31456,9 @@ var OGMetadata = function OGMetadata(_ref) {
     onError: function onError() {
       return setFaviconLoadError(true);
     }
-  })) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og10 = metadata.og) === null || _metadata$og10 === void 0 ? void 0 : _metadata$og10.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og11 = metadata.og) !== null && _metadata$og11 !== void 0 && _metadata$og11.description ? (/*#__PURE__*/React__default.createElement(Desc, {
-    maxWidth: calculatedImageWidth
-  }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : _metadata$og12.description)) : null)) : null));
+  })) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og10 = metadata.og) === null || _metadata$og10 === void 0 ? void 0 : _metadata$og10.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og11 = metadata.og) !== null && _metadata$og11 !== void 0 && _metadata$og11.description ? /*#__PURE__*/React__default.createElement(Desc, {
+    maxWidth: 400
+  }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : _metadata$og12.description) : null)) : null));
 };
 var OGMetadataContainer = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  min-width: inherit;\n  max-width: inherit;\n  display: grid;\n  grid-template-columns: 1fr;\n  background-color: rgba(0, 0, 0, 0.034);\n  border-radius: 6px;\n  margin-bottom: 0.4rem;\n  margin: 0 auto;\n  margin-bottom: ", ";\n  &:hover {\n    background-color: rgba(0, 0, 0, 0.1);\n    cursor: pointer;\n  }\n"])), function (_ref2) {
   var showOGMetadata = _ref2.showOGMetadata;
@@ -31474,24 +31491,12 @@ var Desc = styled__default.p(_templateObject6$f || (_templateObject6$f = _tagged
   var maxWidth = _ref9.maxWidth;
   return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
 });
-var Img = styled__default.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  max-width: ", ";\n  min-width: ", ";\n  max-height: ", ";\n  min-height: ", ";\n  width: ", ";\n  height: ", ";\n  object-fit: cover;\n  transition: height 0.2s ease;\n"])), function (_ref0) {
+var Img = styled__default.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  object-fit: cover;\n  transition: height 0.2s ease;\n"])), function (_ref0) {
   var width = _ref0.width;
-  return width + "px";
+  return width && "\n    max-width: " + (width + "px") + ";\n    min-width: " + (width + "px") + ";\n    width: " + (width + "px") + ";\n  ";
 }, function (_ref1) {
-  var width = _ref1.width;
-  return width + "px";
-}, function (_ref10) {
-  var height = _ref10.height;
-  return height + "px";
-}, function (_ref11) {
-  var height = _ref11.height;
-  return height + "px";
-}, function (_ref12) {
-  var width = _ref12.width;
-  return width + "px";
-}, function (_ref13) {
-  var height = _ref13.height;
-  return height + "px";
+  var height = _ref1.height;
+  return height && "\n    max-height: " + (height + "px") + ";\n    min-height: " + (height + "px") + ";\n    height: " + (height + "px") + ";\n  ";
 });
 var Favicon = styled__default.img(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n  transition: all 0.2s ease;\n  width: 24px;\n  height: 24px;\n  object-fit: contain;\n  margin-right: 4px;\n"])));
 
@@ -33096,6 +33101,7 @@ var MessageList = function MessageList(_ref2) {
   var loadingRef = React.useRef(false);
   var messagesIndexMapRef = React.useRef({});
   var scrollRafRef = React.useRef(null);
+  var loadingMessagesTimeoutRef = React.useRef(null);
   var renderTopDate = function renderTopDate() {
     var container = scrollRef.current;
     if (!container) return;
@@ -33452,7 +33458,7 @@ var MessageList = function MessageList(_ref2) {
         setUnreadMessageId('');
       }
     }
-  }, [messages]);
+  }, [messages, hiddenMessagesProperties, user === null || user === void 0 ? void 0 : user.id]);
   React.useEffect(function () {
     if (scrollRef.current) {
       var isAtBottom = scrollRef.current.scrollTop > -50;
@@ -33470,7 +33476,7 @@ var MessageList = function MessageList(_ref2) {
           scrollRef.current.style.scrollBehavior = 'smooth';
         }
         if (loadFromServerRef.current) {
-          setTimeout(function () {
+          var timeout = setTimeout(function () {
             loadingRef.current = false;
             loadFromServerRef.current = false;
             nextDisableRef.current = false;
@@ -33482,6 +33488,10 @@ var MessageList = function MessageList(_ref2) {
               handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.NEXT, LOAD_MAX_MESSAGE_COUNT);
             }
           }, 50);
+          if (loadingMessagesTimeoutRef.current) {
+            clearTimeout(loadingMessagesTimeoutRef.current);
+          }
+          loadingMessagesTimeoutRef.current = timeout;
         } else {
           loadingRef.current = false;
           if (shouldLoadMessagesRef.current === 'prev') {
@@ -33532,7 +33542,37 @@ var MessageList = function MessageList(_ref2) {
         setPreviousScrollTop(0);
       });
     }
+    return function () {
+      if (loadingMessagesTimeoutRef.current) {
+        clearTimeout(loadingMessagesTimeoutRef.current);
+      }
+    };
   }, [messages]);
+  React.useEffect(function () {
+    if (messagesLoading === LOADING_STATE.LOADED) {
+      var timeout = setTimeout(function () {
+        loadingRef.current = false;
+        loadFromServerRef.current = false;
+        nextDisableRef.current = false;
+        var currentIndex = messagesIndexMapRef.current[lastVisibleMessageId];
+        if (shouldLoadMessagesRef.current === 'prev' && typeof currentIndex === 'number' && currentIndex < 15) {
+          handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.PREV, LOAD_MAX_MESSAGE_COUNT);
+        }
+        if (shouldLoadMessagesRef.current === 'next' && typeof currentIndex === 'number' && currentIndex > messages.length - 15) {
+          handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.NEXT, LOAD_MAX_MESSAGE_COUNT);
+        }
+      }, 50);
+      if (loadingMessagesTimeoutRef.current) {
+        clearTimeout(loadingMessagesTimeoutRef.current);
+      }
+      loadingMessagesTimeoutRef.current = timeout;
+    }
+    return function () {
+      if (loadingMessagesTimeoutRef.current) {
+        clearTimeout(loadingMessagesTimeoutRef.current);
+      }
+    };
+  }, [messagesLoading, messages, lastVisibleMessageId]);
   React.useEffect(function () {
     log.info('connection status is changed.. .... ', connectionStatus, 'channel  ... ', channel);
     if (connectionStatus === CONNECTION_STATUS.CONNECTED) {
@@ -41168,10 +41208,10 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
   };
   var handleScrollToLastMessage = function handleScrollToLastMessage(messageId) {
     try {
-      dispatch(scrollToNewMessageAC(true, false, false));
       if (messages.findIndex(function (msg) {
         return msg.id === messageId;
       }) >= 10) {
+        dispatch(scrollToNewMessageAC(true, false, false));
         dispatch(setMessagesLoadingStateAC(LOADING_STATE.LOADING));
         var repliedMessage = document.getElementById(messageId);
         if (repliedMessage) {

package/index.modern.js

@@ -10376,7 +10376,7 @@ var messageSlice = createSlice({
           return msg.tid === message.tid || msg.id === message.id;
         });
       });
-      if (direction === MESSAGE_LOAD_DIRECTION.PREV) {
+      if (direction === MESSAGE_LOAD_DIRECTION.PREV && newMessagesLength > 0) {
         if (currentMessagesLength + newMessagesLength >= MESSAGES_MAX_LENGTH) {
           var _state$activeChannelM;
           setHasNextCached(true);
@@ -10398,7 +10398,7 @@ var messageSlice = createSlice({
           var _state$activeChannelM3;
           (_state$activeChannelM3 = state.activeChannelMessages).splice.apply(_state$activeChannelM3, [0, 0].concat(messagesIsNotIncludeInActiveChannelMessages));
         }
-      } else if (direction === 'next') {
+      } else if (direction === 'next' && newMessagesLength > 0) {
         if (currentMessagesLength >= MESSAGES_MAX_LENGTH) {
           var _state$activeChannelM4;
           setHasPrevCached(true);
@@ -18499,7 +18499,7 @@ function getMessagesQuery(action) {
       case 1:
         _action$payload = action.payload, channel = _action$payload.channel, loadWithLastMessage = _action$payload.loadWithLastMessage, messageId = _action$payload.messageId, limit = _action$payload.limit, withDeliveredMessages = _action$payload.withDeliveredMessages, highlight = _action$payload.highlight, behavior = _action$payload.behavior;
         if (!(channel.id && !channel.isMockChannel)) {
-          _context9.n = 47;
+          _context9.n = 48;
           break;
         }
         SceytChatClient = getClient();
@@ -18527,6 +18527,7 @@ function getMessagesQuery(action) {
           break;
         }
         setHasPrevCached(false);
+        setMessagesToMap(channel.id, []);
         setAllMessages([]);
         _context9.n = 3;
         return call(messageQuery.loadPreviousMessageId, '0');
@@ -18585,11 +18586,11 @@ function getMessagesQuery(action) {
         _context9.n = 12;
         return put(setScrollToMessagesAC(messageId, highlight, behavior));
       case 12:
-        _context9.n = 45;
+        _context9.n = 46;
         break;
       case 13:
         if (!messageId) {
-          _context9.n = 25;
+          _context9.n = 26;
           break;
         }
         _allMessages = getAllMessages();
@@ -18598,7 +18599,7 @@ function getMessagesQuery(action) {
         });
         maxLengthPart = MESSAGES_MAX_LENGTH / 2;
         if (!(messageIndex >= maxLengthPart)) {
-          _context9.n = 15;
+          _context9.n = 16;
           break;
         }
         result.messages = _allMessages.slice(messageIndex - maxLengthPart, messageIndex + maxLengthPart);
@@ -18607,151 +18608,160 @@ function getMessagesQuery(action) {
       case 14:
         setHasPrevCached(messageIndex > maxLengthPart);
         setHasNextCached(_allMessages.length > maxLengthPart);
+        _context9.n = 15;
+        return put(setMessagesHasPrevAC(true));
+      case 15:
         _context9.n = 22;
         break;
-      case 15:
+      case 16:
         messageQuery.limit = MESSAGES_MAX_LENGTH;
         log.info('load by message id from server ...............', messageId);
-        _context9.n = 16;
+        _context9.n = 17;
         return call(messageQuery.loadNearMessageId, messageId);
-      case 16:
+      case 17:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 19;
+          _context9.n = 20;
           break;
         }
-        messageQuery.limit = (MESSAGES_MAX_LENGTH - 50) / 2;
-        _context9.n = 17;
+        messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
+        _context9.n = 18;
         return call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 17:
+      case 18:
         _secondResult = _context9.v;
         messageQuery.reverse = false;
-        _context9.n = 18;
+        _context9.n = 19;
         return call(messageQuery.loadNextMessageId, result.messages[result.messages.length - 1].id);
-      case 18:
+      case 19:
         thirdResult = _context9.v;
         result.messages = [].concat(_secondResult.messages, result.messages, thirdResult.messages);
         result.hasNext = _secondResult.hasNext;
         messageQuery.reverse = true;
-      case 19:
-        log.info('result from server ....... ', result);
         _context9.n = 20;
-        return put(setMessagesHasNextAC(true));
+        return put(setMessagesHasPrevAC(_secondResult.hasNext));
       case 20:
+        log.info('result from server ....... ', result);
         _context9.n = 21;
         return put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
       case 21:
+        setMessagesToMap(channel.id, result.messages);
         setAllMessages([].concat(result.messages));
         setHasPrevCached(false);
         setHasNextCached(false);
       case 22:
         _context9.n = 23;
-        return put(setScrollToMessagesAC(messageId, true, behavior));
+        return put(setMessagesHasNextAC(true));
       case 23:
         _context9.n = 24;
-        return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+        return put(setScrollToMessagesAC(messageId, true, behavior));
       case 24:
-        _context9.n = 45;
-        break;
+        _context9.n = 25;
+        return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
       case 25:
+        _context9.n = 46;
+        break;
+      case 26:
         if (!(channel.newMessageCount && channel.lastDisplayedMessageId)) {
-          _context9.n = 38;
+          _context9.n = 39;
           break;
         }
+        setMessagesToMap(channel.id, []);
         setAllMessages([]);
         messageQuery.limit = MESSAGES_MAX_LENGTH;
         if (!Number(channel.lastDisplayedMessageId)) {
-          _context9.n = 31;
+          _context9.n = 32;
           break;
         }
-        _context9.n = 26;
+        _context9.n = 27;
         return call(messageQuery.loadNearMessageId, channel.lastDisplayedMessageId);
-      case 26:
+      case 27:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 30;
+          _context9.n = 31;
           break;
         }
         messageQuery.limit = channel.newMessageCount > 25 ? (MESSAGES_MAX_LENGTH - 50) / 2 : MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 27;
+        _context9.n = 28;
         return call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 27:
+      case 28:
         _secondResult2 = _context9.v;
         if (!(channel.newMessageCount > 25)) {
-          _context9.n = 29;
+          _context9.n = 30;
           break;
         }
         messageQuery.reverse = false;
-        _context9.n = 28;
+        _context9.n = 29;
         return call(messageQuery.loadNextMessageId, result.messages[result.messages.length - 1].id);
-      case 28:
+      case 29:
         _thirdResult = _context9.v;
         result.messages = [].concat(_secondResult2.messages, result.messages, _thirdResult.messages);
         messageQuery.reverse = true;
-        _context9.n = 30;
+        _context9.n = 31;
         break;
-      case 29:
-        result.messages = [].concat(_secondResult2.messages, result.messages);
       case 30:
-        _context9.n = 34;
-        break;
+        result.messages = [].concat(_secondResult2.messages, result.messages);
       case 31:
-        _context9.n = 32;
-        return call(messageQuery.loadPrevious);
+        _context9.n = 35;
+        break;
       case 32:
+        _context9.n = 33;
+        return call(messageQuery.loadPrevious);
+      case 33:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 34;
+          _context9.n = 35;
           break;
         }
         messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 33;
+        _context9.n = 34;
         return call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 33:
+      case 34:
         _secondResult3 = _context9.v;
         result.messages = [].concat(_secondResult3.messages, result.messages);
         result.hasNext = _secondResult3.hasNext;
-      case 34:
-        setMessagesToMap(channel.id, result.messages);
-        _context9.n = 35;
-        return put(setMessagesHasPrevAC(true));
       case 35:
         _context9.n = 36;
-        return put(setMessagesHasNextAC(channel.lastMessage && result.messages.length > 0 && channel.lastMessage.id !== result.messages[result.messages.length - 1].id));
+        return put(setMessagesHasPrevAC(true));
       case 36:
-        setAllMessages([].concat(result.messages));
         _context9.n = 37;
-        return put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
+        return put(setMessagesHasNextAC(channel.lastMessage && result.messages.length > 0 && channel.lastMessage.id !== result.messages[result.messages.length - 1].id));
       case 37:
-        _context9.n = 45;
-        break;
+        setMessagesToMap(channel.id, result.messages);
+        setAllMessages([].concat(result.messages));
+        _context9.n = 38;
+        return put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
       case 38:
+        _context9.n = 46;
+        break;
+      case 39:
+        setMessagesToMap(channel.id, []);
         setAllMessages([]);
         if (!(cachedMessages && cachedMessages.length)) {
-          _context9.n = 39;
+          _context9.n = 40;
           break;
         }
+        setMessagesToMap(channel.id, []);
         setAllMessages([].concat(cachedMessages));
-        _context9.n = 39;
+        _context9.n = 40;
         return put(setMessagesAC(JSON.parse(JSON.stringify(cachedMessages))));
-      case 39:
+      case 40:
         log.info('load message from server');
-        _context9.n = 40;
+        _context9.n = 41;
         return call(messageQuery.loadPrevious);
-      case 40:
+      case 41:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 42;
+          _context9.n = 43;
           break;
         }
         messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 41;
+        _context9.n = 42;
         return call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 41:
+      case 42:
         _secondResult4 = _context9.v;
         result.messages = [].concat(_secondResult4.messages, result.messages);
         result.hasNext = _secondResult4.hasNext;
-      case 42:
+      case 43:
         updatedMessages = [];
         result.messages.forEach(function (msg) {
           var updatedMessage = updateMessageOnMap(channel.id, {
@@ -18763,18 +18773,18 @@ function getMessagesQuery(action) {
         });
         setMessagesToMap(channel.id, updatedMessages);
         setAllMessages([].concat(updatedMessages));
-        _context9.n = 43;
-        return put(setMessagesAC(JSON.parse(JSON.stringify(updatedMessages))));
-      case 43:
         _context9.n = 44;
-        return put(setMessagesHasPrevAC(result.hasNext));
+        return put(setMessagesAC(JSON.parse(JSON.stringify(updatedMessages))));
       case 44:
         _context9.n = 45;
-        return put(setMessagesHasNextAC(false));
+        return put(setMessagesHasPrevAC(result.hasNext));
       case 45:
+        _context9.n = 46;
+        return put(setMessagesHasNextAC(false));
+      case 46:
         pendingMessages = getPendingMessages(channel.id);
         if (!(pendingMessages && pendingMessages.length)) {
-          _context9.n = 46;
+          _context9.n = 47;
           break;
         }
         _messagesMap = {};
@@ -18784,35 +18794,35 @@ function getMessagesQuery(action) {
         filteredPendingMessages = pendingMessages.filter(function (msg) {
           return !_messagesMap[msg.tid || ''];
         });
-        _context9.n = 46;
+        _context9.n = 47;
         return put(addMessagesAC(filteredPendingMessages, MESSAGE_LOAD_DIRECTION.NEXT));
-      case 46:
-        _context9.n = 48;
-        break;
       case 47:
+        _context9.n = 49;
+        break;
+      case 48:
         if (!channel.isMockChannel) {
-          _context9.n = 48;
+          _context9.n = 49;
           break;
         }
-        _context9.n = 48;
+        _context9.n = 49;
         return put(setMessagesAC([]));
-      case 48:
-        _context9.n = 50;
-        break;
       case 49:
-        _context9.p = 49;
-        _t9 = _context9.v;
-        log.error('error in message query', _t9);
+        _context9.n = 51;
+        break;
       case 50:
         _context9.p = 50;
-        _context9.n = 51;
-        return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+        _t9 = _context9.v;
+        log.error('error in message query', _t9);
       case 51:
-        return _context9.f(50);
+        _context9.p = 51;
+        _context9.n = 52;
+        return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
       case 52:
+        return _context9.f(51);
+      case 53:
         return _context9.a(2);
     }
-  }, _marked7$1, null, [[0, 49, 50, 52]]);
+  }, _marked7$1, null, [[0, 50, 51, 53]]);
 }
 function getMessageQuery(action) {
   var payload, channelId, messageId, channel, messages, fetchedMessage, _t0;
@@ -18958,25 +18968,38 @@ function loadMoreMessages(action) {
         _context1.n = 11;
         return put(addMessagesAC(JSON.parse(JSON.stringify(result.messages)), direction));
       case 11:
-        _context1.n = 13;
+        _context1.n = 16;
         break;
       case 12:
         _context1.n = 13;
         return put(addMessagesAC([], direction));
       case 13:
+        if (!(direction === MESSAGE_LOAD_DIRECTION.NEXT)) {
+          _context1.n = 15;
+          break;
+        }
         _context1.n = 14;
-        return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+        return put(setMessagesHasNextAC(false));
       case 14:
         _context1.n = 16;
         break;
       case 15:
-        _context1.p = 15;
+        _context1.n = 16;
+        return put(setMessagesHasPrevAC(false));
+      case 16:
+        _context1.n = 17;
+        return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+      case 17:
+        _context1.n = 19;
+        break;
+      case 18:
+        _context1.p = 18;
         _t1 = _context1.v;
         log.error('error in load more messages', _t1);
-      case 16:
+      case 19:
         return _context1.a(2);
     }
-  }, _marked9$1, null, [[0, 15]]);
+  }, _marked9$1, null, [[0, 18]]);
 }
 function addReaction(action) {
   var payload, channelId, messageId, key, score, reason, enforceUnique, user, channel, _yield$call, _message2, reaction, channelUpdateParam, _t10;
@@ -31310,7 +31333,7 @@ var OGMetadata = function OGMetadata(_ref) {
             var queryBuilder = new client.MessageLinkOGQueryBuilder(url);
             return Promise.resolve(queryBuilder.build()).then(function (query) {
               return Promise.resolve(query.loadOGData()).then(function (metadata) {
-                return Promise.resolve(storeMetadata(url.replace('https://', '').replace('http://', ''), metadata)).then(function () {
+                return Promise.resolve(storeMetadata(url, metadata)).then(function () {
                   setMetadata(metadata);
                 });
               });
@@ -31333,7 +31356,7 @@ var OGMetadata = function OGMetadata(_ref) {
     if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url) {
       var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
       if (url) {
-        getMetadata(url.replace('https://', '').replace('http://', '')).then(function (cachedMetadata) {
+        getMetadata(url).then(function (cachedMetadata) {
           try {
             if (cachedMetadata) {
               setMetadata(cachedMetadata);
@@ -31382,14 +31405,8 @@ var OGMetadata = function OGMetadata(_ref) {
       };
     }
   }, [metadata === null || metadata === void 0 ? void 0 : (_metadata$og6 = metadata.og) === null || _metadata$og6 === void 0 ? void 0 : (_metadata$og6$image = _metadata$og6.image) === null || _metadata$og6$image === void 0 ? void 0 : (_metadata$og6$image$ = _metadata$og6$image[0]) === null || _metadata$og6$image$ === void 0 ? void 0 : _metadata$og6$image$.url]);
-  var calculatedImageWidth = useMemo(function () {
-    if (imageWidth > 400) {
-      return 400;
-    }
-    return imageWidth;
-  }, [imageWidth]);
   var calculatedImageHeight = useMemo(function () {
-    return imageHeight / (imageWidth / calculatedImageWidth);
+    return imageHeight / (imageWidth / 400);
   }, [imageWidth, imageHeight]);
   return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
     showOGMetadata: !!showOGMetadata
@@ -31399,17 +31416,17 @@ var OGMetadata = function OGMetadata(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement(ImageContainer, {
     showOGMetadata: !!showOGMetadata && !imageLoadError && imageLoaded,
-    width: calculatedImageWidth,
+    width: 400,
     height: calculatedImageHeight
   }, metadata !== null && metadata !== void 0 && (_metadata$og7 = metadata.og) !== null && _metadata$og7 !== void 0 && (_metadata$og7$image = _metadata$og7.image) !== null && _metadata$og7$image !== void 0 && (_metadata$og7$image$ = _metadata$og7$image[0]) !== null && _metadata$og7$image$ !== void 0 && _metadata$og7$image$.url && !imageLoadError ? (/*#__PURE__*/React__default.createElement(Img, {
     src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og8 = metadata.og) === null || _metadata$og8 === void 0 ? void 0 : (_metadata$og8$image = _metadata$og8.image) === null || _metadata$og8$image === void 0 ? void 0 : (_metadata$og8$image$ = _metadata$og8$image[0]) === null || _metadata$og8$image$ === void 0 ? void 0 : _metadata$og8$image$.url,
     alt: 'OG metadata image',
-    width: calculatedImageWidth,
+    width: 400,
     height: calculatedImageHeight
   })) : null), showOGMetadata && imageLoaded ? (/*#__PURE__*/React__default.createElement(OGText, null, /*#__PURE__*/React__default.createElement(Url, {
-    maxWidth: calculatedImageWidth
+    maxWidth: 400
   }, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og9 = metadata.og) !== null && _metadata$og9 !== void 0 && _metadata$og9.title ? (/*#__PURE__*/React__default.createElement(Title, {
-    maxWidth: calculatedImageWidth
+    maxWidth: 400
   }, metadata !== null && metadata !== void 0 && (_metadata$og0 = metadata.og) !== null && _metadata$og0 !== void 0 && (_metadata$og0$favicon = _metadata$og0.favicon) !== null && _metadata$og0$favicon !== void 0 && _metadata$og0$favicon.url && !faviconLoadError ? (/*#__PURE__*/React__default.createElement(Favicon, {
     src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : (_metadata$og1$favicon = _metadata$og1.favicon) === null || _metadata$og1$favicon === void 0 ? void 0 : _metadata$og1$favicon.url,
     onLoad: function onLoad() {
@@ -31418,9 +31435,9 @@ var OGMetadata = function OGMetadata(_ref) {
     onError: function onError() {
       return setFaviconLoadError(true);
     }
-  })) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og10 = metadata.og) === null || _metadata$og10 === void 0 ? void 0 : _metadata$og10.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og11 = metadata.og) !== null && _metadata$og11 !== void 0 && _metadata$og11.description ? (/*#__PURE__*/React__default.createElement(Desc, {
-    maxWidth: calculatedImageWidth
-  }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : _metadata$og12.description)) : null)) : null));
+  })) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og10 = metadata.og) === null || _metadata$og10 === void 0 ? void 0 : _metadata$og10.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og11 = metadata.og) !== null && _metadata$og11 !== void 0 && _metadata$og11.description ? /*#__PURE__*/React__default.createElement(Desc, {
+    maxWidth: 400
+  }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : _metadata$og12.description) : null)) : null));
 };
 var OGMetadataContainer = styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  min-width: inherit;\n  max-width: inherit;\n  display: grid;\n  grid-template-columns: 1fr;\n  background-color: rgba(0, 0, 0, 0.034);\n  border-radius: 6px;\n  margin-bottom: 0.4rem;\n  margin: 0 auto;\n  margin-bottom: ", ";\n  &:hover {\n    background-color: rgba(0, 0, 0, 0.1);\n    cursor: pointer;\n  }\n"])), function (_ref2) {
   var showOGMetadata = _ref2.showOGMetadata;
@@ -31453,24 +31470,12 @@ var Desc = styled.p(_templateObject6$f || (_templateObject6$f = _taggedTemplateL
   var maxWidth = _ref9.maxWidth;
   return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
 });
-var Img = styled.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  max-width: ", ";\n  min-width: ", ";\n  max-height: ", ";\n  min-height: ", ";\n  width: ", ";\n  height: ", ";\n  object-fit: cover;\n  transition: height 0.2s ease;\n"])), function (_ref0) {
+var Img = styled.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  object-fit: cover;\n  transition: height 0.2s ease;\n"])), function (_ref0) {
   var width = _ref0.width;
-  return width + "px";
+  return width && "\n    max-width: " + (width + "px") + ";\n    min-width: " + (width + "px") + ";\n    width: " + (width + "px") + ";\n  ";
 }, function (_ref1) {
-  var width = _ref1.width;
-  return width + "px";
-}, function (_ref10) {
-  var height = _ref10.height;
-  return height + "px";
-}, function (_ref11) {
-  var height = _ref11.height;
-  return height + "px";
-}, function (_ref12) {
-  var width = _ref12.width;
-  return width + "px";
-}, function (_ref13) {
-  var height = _ref13.height;
-  return height + "px";
+  var height = _ref1.height;
+  return height && "\n    max-height: " + (height + "px") + ";\n    min-height: " + (height + "px") + ";\n    height: " + (height + "px") + ";\n  ";
 });
 var Favicon = styled.img(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n  transition: all 0.2s ease;\n  width: 24px;\n  height: 24px;\n  object-fit: contain;\n  margin-right: 4px;\n"])));
 
@@ -33075,6 +33080,7 @@ var MessageList = function MessageList(_ref2) {
   var loadingRef = useRef(false);
   var messagesIndexMapRef = useRef({});
   var scrollRafRef = useRef(null);
+  var loadingMessagesTimeoutRef = useRef(null);
   var renderTopDate = function renderTopDate() {
     var container = scrollRef.current;
     if (!container) return;
@@ -33431,7 +33437,7 @@ var MessageList = function MessageList(_ref2) {
         setUnreadMessageId('');
       }
     }
-  }, [messages]);
+  }, [messages, hiddenMessagesProperties, user === null || user === void 0 ? void 0 : user.id]);
   useEffect(function () {
     if (scrollRef.current) {
       var isAtBottom = scrollRef.current.scrollTop > -50;
@@ -33449,7 +33455,7 @@ var MessageList = function MessageList(_ref2) {
           scrollRef.current.style.scrollBehavior = 'smooth';
         }
         if (loadFromServerRef.current) {
-          setTimeout(function () {
+          var timeout = setTimeout(function () {
             loadingRef.current = false;
             loadFromServerRef.current = false;
             nextDisableRef.current = false;
@@ -33461,6 +33467,10 @@ var MessageList = function MessageList(_ref2) {
               handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.NEXT, LOAD_MAX_MESSAGE_COUNT);
             }
           }, 50);
+          if (loadingMessagesTimeoutRef.current) {
+            clearTimeout(loadingMessagesTimeoutRef.current);
+          }
+          loadingMessagesTimeoutRef.current = timeout;
         } else {
           loadingRef.current = false;
           if (shouldLoadMessagesRef.current === 'prev') {
@@ -33511,7 +33521,37 @@ var MessageList = function MessageList(_ref2) {
         setPreviousScrollTop(0);
       });
     }
+    return function () {
+      if (loadingMessagesTimeoutRef.current) {
+        clearTimeout(loadingMessagesTimeoutRef.current);
+      }
+    };
   }, [messages]);
+  useEffect(function () {
+    if (messagesLoading === LOADING_STATE.LOADED) {
+      var timeout = setTimeout(function () {
+        loadingRef.current = false;
+        loadFromServerRef.current = false;
+        nextDisableRef.current = false;
+        var currentIndex = messagesIndexMapRef.current[lastVisibleMessageId];
+        if (shouldLoadMessagesRef.current === 'prev' && typeof currentIndex === 'number' && currentIndex < 15) {
+          handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.PREV, LOAD_MAX_MESSAGE_COUNT);
+        }
+        if (shouldLoadMessagesRef.current === 'next' && typeof currentIndex === 'number' && currentIndex > messages.length - 15) {
+          handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.NEXT, LOAD_MAX_MESSAGE_COUNT);
+        }
+      }, 50);
+      if (loadingMessagesTimeoutRef.current) {
+        clearTimeout(loadingMessagesTimeoutRef.current);
+      }
+      loadingMessagesTimeoutRef.current = timeout;
+    }
+    return function () {
+      if (loadingMessagesTimeoutRef.current) {
+        clearTimeout(loadingMessagesTimeoutRef.current);
+      }
+    };
+  }, [messagesLoading, messages, lastVisibleMessageId]);
   useEffect(function () {
     log.info('connection status is changed.. .... ', connectionStatus, 'channel  ... ', channel);
     if (connectionStatus === CONNECTION_STATUS.CONNECTED) {
@@ -41147,10 +41187,10 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
   };
   var handleScrollToLastMessage = function handleScrollToLastMessage(messageId) {
     try {
-      dispatch(scrollToNewMessageAC(true, false, false));
       if (messages.findIndex(function (msg) {
         return msg.id === messageId;
       }) >= 10) {
+        dispatch(scrollToNewMessageAC(true, false, false));
         dispatch(setMessagesLoadingStateAC(LOADING_STATE.LOADING));
         var repliedMessage = document.getElementById(messageId);
         if (repliedMessage) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sceyt-chat-react-uikit",
-  "version": "1.7.1-beta.17",
+  "version": "1.7.1-beta.19",
   "description": "Interactive React UI Components for Sceyt Chat.",
   "author": "Sceyt",
   "license": "MIT",