sceyt-chat-react-uikit 1.7.6-beta.5 → 1.7.6-beta.7

package/index.modern.js

@@ -9101,15 +9101,6 @@ var query = {
   ReactionsQuery: null,
   PollVotesQueries: {}
 };
-var unreadScrollTo = {
-  isScrolled: true
-};
-function getUnreadScrollTo() {
-  return unreadScrollTo.isScrolled;
-}
-function setUnreadScrollTo(state) {
-  unreadScrollTo.isScrolled = state;
-}
 function getUploadImageIcon() {
   return UploadImageIcon;
 }
@@ -10314,6 +10305,11 @@ function showScrollToNewMessageButtonAC(state) {
     state: state
   });
 }
+function setUnreadScrollToAC(state) {
+  return setUnreadScrollTo({
+    state: state
+  });
+}
 function loadMoreMessagesAC(channelId, limit, direction, messageId, hasNext) {
   return {
     type: LOAD_MORE_MESSAGES,
@@ -10646,6 +10642,51 @@ var MESSAGE_LOAD_DIRECTION = {
   PREV: 'prev',
   NEXT: 'next'
 };
+var shouldSkipDeliveryStatusUpdate = function shouldSkipDeliveryStatusUpdate(markerName, currentDeliveryStatus) {
+  if (markerName === MESSAGE_DELIVERY_STATUS.SENT && (currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.SENT || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.DELIVERED || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.READ || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
+    return true;
+  }
+  if (markerName === MESSAGE_DELIVERY_STATUS.DELIVERED && (currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.DELIVERED || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.READ || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
+    return true;
+  }
+  if (markerName === MESSAGE_DELIVERY_STATUS.READ && (currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.READ || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
+    return true;
+  }
+  if (markerName === MESSAGE_DELIVERY_STATUS.PLAYED && currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED) {
+    return true;
+  }
+  return false;
+};
+var updateMessageDeliveryStatusAndMarkers = function updateMessageDeliveryStatusAndMarkers(message, markerName) {
+  var _message$markerTotals;
+  if (shouldSkipDeliveryStatusUpdate(markerName, message.deliveryStatus)) {
+    return {
+      markerTotals: message.markerTotals,
+      deliveryStatus: message.deliveryStatus
+    };
+  }
+  var markerInMarkersTotal = message === null || message === void 0 ? void 0 : (_message$markerTotals = message.markerTotals) === null || _message$markerTotals === void 0 ? void 0 : _message$markerTotals.find(function (marker) {
+    return marker.name === markerName;
+  });
+  if (!markerInMarkersTotal) {
+    return {
+      markerTotals: [].concat(message.markerTotals || [], [{
+        name: markerName,
+        count: 1
+      }]),
+      deliveryStatus: markerName
+    };
+  } else {
+    return {
+      markerTotals: message.markerTotals.map(function (marker) {
+        return marker.name === markerName ? _extends({}, marker, {
+          count: marker.count + 1
+        }) : marker;
+      }),
+      deliveryStatus: markerName
+    };
+  }
+};
 var sendMessageHandler;
 var setSendMessageHandler = function setSendMessageHandler(handler) {
   sendMessageHandler = handler;
@@ -10677,7 +10718,8 @@ var updateMessageOnAllMessages = function updateMessageOnAllMessages(messageId,
       if (updatedParams.state === MESSAGE_STATUS.DELETE) {
         return _extends({}, updatedParams);
       }
-      var updatedMessage = _extends({}, message, updatedParams);
+      var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(message, updatedParams.deliveryStatus);
+      var updatedMessage = _extends({}, message, updatedParams, statusUpdatedMessage);
       if (voteDetails) {
         updatedMessage = _extends({}, updatedMessage, {
           pollDetails: handleVoteDetails(voteDetails, updatedMessage)
@@ -10688,6 +10730,15 @@ var updateMessageOnAllMessages = function updateMessageOnAllMessages(messageId,
     return message;
   });
 };
+var updateMessageStatusOnAllMessages = function updateMessageStatusOnAllMessages(name, markersMap) {
+  activeChannelAllMessages = activeChannelAllMessages.map(function (message) {
+    if (markersMap[message.id]) {
+      var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(message, name);
+      return _extends({}, message, statusUpdatedMessage);
+    }
+    return message;
+  });
+};
 var removeMessageFromAllMessages = function removeMessageFromAllMessages(messageId) {
   activeChannelAllMessages = [].concat(activeChannelAllMessages).filter(function (msg) {
     return !(msg.id === messageId || msg.tid === messageId);
@@ -10695,12 +10746,11 @@ var removeMessageFromAllMessages = function removeMessageFromAllMessages(message
 };
 var updateMarkersOnAllMessages = function updateMarkersOnAllMessages(markersMap, name) {
   activeChannelAllMessages = activeChannelAllMessages.map(function (message) {
-    if (markersMap[message.id] && (message.deliveryStatus === MESSAGE_DELIVERY_STATUS.SENT || name === MESSAGE_DELIVERY_STATUS.READ)) {
-      return _extends({}, message, {
-        deliveryStatus: name
-      });
+    if (!markersMap[message.id]) {
+      return message;
     }
-    return message;
+    var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(message, name);
+    return _extends({}, message, statusUpdatedMessage);
   });
 };
 var getAllMessages = function getAllMessages() {
@@ -10778,7 +10828,8 @@ function updateMessageOnMap(channelId, updatedMessage, voteDetails) {
       var _pendingMessagesMap$c;
       var updatedPendingMessages = (_pendingMessagesMap$c = pendingMessagesMap[channelId]) === null || _pendingMessagesMap$c === void 0 ? void 0 : _pendingMessagesMap$c.map(function (msg) {
         if (msg.tid === updatedMessage.messageId) {
-          return _extends({}, msg, updatedMessage.params);
+          var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(msg, updatedMessage.params.deliveryStatus);
+          return _extends({}, msg, updatedMessage.params, statusUpdatedMessage);
         }
         return msg;
       });
@@ -10800,7 +10851,8 @@ function updateMessageOnMap(channelId, updatedMessage, voteDetails) {
           messagesList.push(_extends({}, mes, updatedMessageData));
           continue;
         } else {
-          updatedMessageData = _extends({}, mes, updatedMessage.params);
+          var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(mes, updatedMessage.params.deliveryStatus);
+          updatedMessageData = _extends({}, mes, updatedMessage.params, statusUpdatedMessage);
           var voteDetailsData = void 0;
           if (voteDetails) {
             voteDetailsData = handleVoteDetails(voteDetails, updatedMessageData);
@@ -10899,12 +10951,11 @@ function updateMessageStatusOnMap(channelId, newMarkers) {
     messagesMap[channelId] = messagesMap[channelId].map(function (mes) {
       var name = newMarkers.name;
       var markersMap = newMarkers.markersMap;
-      if (markersMap[mes.id] && (mes.deliveryStatus === MESSAGE_DELIVERY_STATUS.SENT || name === MESSAGE_DELIVERY_STATUS.READ)) {
-        return _extends({}, mes, {
-          deliveryStatus: name
-        });
+      if (!markersMap[mes.id]) {
+        return mes;
       }
-      return mes;
+      var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(mes, name);
+      return _extends({}, mes, statusUpdatedMessage);
     });
   }
 }
@@ -11125,7 +11176,8 @@ var initialState$1 = {
   pollVotesLoadingState: {},
   pollVotesInitialCount: null,
   pendingPollActions: {},
-  pendingMessagesMap: {}
+  pendingMessagesMap: {},
+  unreadScrollTo: true
 };
 var messageSlice = createSlice({
   name: 'messages',
@@ -11159,6 +11211,9 @@ var messageSlice = createSlice({
     setShowScrollToNewMessageButton: function setShowScrollToNewMessageButton(state, action) {
       state.showScrollToNewMessageButton = action.payload.state;
     },
+    setUnreadScrollTo: function setUnreadScrollTo(state, action) {
+      state.unreadScrollTo = action.payload.state;
+    },
     setMessages: function setMessages(state, action) {
       state.activeChannelMessages = action.payload.messages;
     },
@@ -11219,8 +11274,18 @@ var messageSlice = createSlice({
         markersMap = _action$payload2.markersMap;
       var markerName = name;
       for (var index = 0; index < state.activeChannelMessages.length; index++) {
-        if (markersMap[state.activeChannelMessages[index].id] && (state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.SENT || markerName === MESSAGE_DELIVERY_STATUS.READ) && state.activeChannelMessages[index].state !== 'Deleted') {
-          state.activeChannelMessages[index].deliveryStatus = markerName;
+        if (!markersMap[state.activeChannelMessages[index].id]) {
+          continue;
+        }
+        if (state.activeChannelMessages[index].state !== 'Deleted') {
+          var message = state.activeChannelMessages[index];
+          var _updateMessageDeliver = updateMessageDeliveryStatusAndMarkers(message, markerName),
+            markerTotals = _updateMessageDeliver.markerTotals,
+            deliveryStatus = _updateMessageDeliver.deliveryStatus;
+          state.activeChannelMessages[index] = _extends({}, message, {
+            markerTotals: markerTotals,
+            deliveryStatus: deliveryStatus
+          });
         }
       }
     },
@@ -11237,10 +11302,15 @@ var messageSlice = createSlice({
           if (params.state === MESSAGE_STATUS.DELETE) {
             return _extends({}, params);
           } else {
-            var messageData = _extends({}, message, params);
+            var statusUpdatedMessage = null;
+            if (params !== null && params !== void 0 && params.deliveryStatus) {
+              statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(message, params.deliveryStatus);
+            }
+            var messageOldData = _extends({}, message, params, statusUpdatedMessage);
+            var messageData = _extends({}, messageOldData);
             if (voteDetails) {
-              messageData = _extends({}, messageData, {
-                pollDetails: handleVoteDetails(voteDetails, messageData)
+              messageData = _extends({}, messageOldData, {
+                pollDetails: handleVoteDetails(voteDetails, messageOldData)
               });
             }
             if (messageData.deliveryStatus !== MESSAGE_DELIVERY_STATUS.PENDING) {
@@ -11684,6 +11754,7 @@ var _messageSlice$actions = messageSlice.actions,
   setScrollToMentionedMessage = _messageSlice$actions.setScrollToMentionedMessage,
   setScrollToNewMessage = _messageSlice$actions.setScrollToNewMessage,
   setShowScrollToNewMessageButton = _messageSlice$actions.setShowScrollToNewMessageButton,
+  setUnreadScrollTo = _messageSlice$actions.setUnreadScrollTo,
   setMessages = _messageSlice$actions.setMessages,
   addMessages = _messageSlice$actions.addMessages,
   updateMessagesStatus = _messageSlice$actions.updateMessagesStatus,
@@ -14777,9 +14848,7 @@ function watchForEvents() {
                 _context2.n = 58;
                 return put(scrollToNewMessageAC(true, false, true));
               case 58:
-                if (getMessagesFromMap(_channel5.id) && getMessagesFromMap(_channel5.id).length) {
-                  addMessageToMap(_channel5.id, message);
-                }
+                addMessageToMap(_channel5.id, message);
                 _context2.n = 59;
                 return put(updateChannelDataAC(_channel5.id, {
                   messageCount: channelForAdd.messageCount,
@@ -14979,6 +15048,7 @@ function watchForEvents() {
                   name: markerList.name,
                   markersMap: markersMap
                 });
+                updateMessageStatusOnAllMessages(markerList.name, markersMap);
                 _context2.n = 77;
                 return put(updateMessagesMarkersAC(channelId, markerList.name, markerList));
               case 77:
@@ -16847,7 +16917,7 @@ function switchChannel(action) {
         }
         currentActiveChannel = getChannelFromMap(getActiveChannelId());
         _context10.n = 11;
-        return call(setUnreadScrollTo, true);
+        return put(setUnreadScrollToAC(true));
       case 11:
         _context10.n = 12;
         return call(setActiveChannelId, channel && channel.id);
@@ -18491,6 +18561,9 @@ var pendingPollActionsSelector = function pendingPollActionsSelector(store) {
 var pendingMessagesMapSelector = function pendingMessagesMapSelector(store) {
   return store.MessageReducer.pendingMessagesMap;
 };
+var unreadScrollToSelector = function unreadScrollToSelector(store) {
+  return store.MessageReducer.unreadScrollTo;
+};
 
 var getFrame = function getFrame(videoSrc, time) {
   try {
@@ -19212,15 +19285,12 @@ function sendTextMessage(action) {
         throw new Error('Connection required to send message');
       case 17:
         _context4.n = 18;
-        return put(getMessagesAC(channel, true, channel.lastMessage.id, undefined, undefined, false));
-      case 18:
-        _context4.n = 19;
         return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 19:
-        _context4.n = 22;
+      case 18:
+        _context4.n = 21;
         break;
-      case 20:
-        _context4.p = 20;
+      case 19:
+        _context4.p = 19;
         _t3 = _context4.v;
         log.error('error on send text message ... ', _t3);
         updateMessageOnMap(channel.id, {
@@ -19230,23 +19300,23 @@ function sendTextMessage(action) {
           }
         });
         if (!(activeChannelId === channel.id)) {
-          _context4.n = 21;
+          _context4.n = 20;
           break;
         }
         updateMessageOnAllMessages(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         });
-        _context4.n = 21;
+        _context4.n = 20;
         return put(updateMessageAC(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         }));
-      case 21:
-        _context4.n = 22;
+      case 20:
+        _context4.n = 21;
         return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 22:
+      case 21:
         return _context4.a(2);
     }
-  }, _marked2$2, null, [[3, 20]]);
+  }, _marked2$2, null, [[3, 19]]);
 }
 function forwardMessage(action) {
   var payload, message, channelId, connectionState, isForward, channel, SceytChatClient, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, pollDetails, messageToSend, pendingMessage, activeChannelId, isCachedChannel, hasNextMessages, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam, _t4;
@@ -19918,7 +19988,7 @@ function editMessage(action) {
   }, _marked6$1, null, [[0, 5]]);
 }
 function getMessagesQuery(action) {
-  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, behavior, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, _secondResult2, _thirdResult, _secondResult3, _secondResult4, updatedMessages, pendingMessages, _messagesMap, filteredPendingMessages, _t9;
+  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, behavior, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, _secondResult2, _thirdResult, _secondResult3, _secondResult4, updatedMessages, lastMessageId, _allMessages2, allMessagesAfterLastMessage, pendingMessages, _messagesMap, filteredPendingMessages, _t9;
   return _regenerator().w(function (_context9) {
     while (1) switch (_context9.p = _context9.n) {
       case 0:
@@ -20199,13 +20269,19 @@ function getMessagesQuery(action) {
           updateMessageOnAllMessages(msg.id, updatedMessage || msg);
           updatedMessages.push(updatedMessage || msg);
         });
+        lastMessageId = updatedMessages[updatedMessages.length - 1].id;
+        _allMessages2 = getAllMessages();
+        allMessagesAfterLastMessage = _allMessages2.filter(function (msg) {
+          return msg.id > lastMessageId;
+        });
+        updatedMessages = [].concat(updatedMessages, allMessagesAfterLastMessage);
         setMessagesToMap(channel.id, updatedMessages);
-        setAllMessages([].concat(updatedMessages));
+        setAllMessages(updatedMessages);
         _context9.n = 44;
         return put(setMessagesAC(JSON.parse(JSON.stringify(updatedMessages))));
       case 44:
         _context9.n = 45;
-        return put(setMessagesHasPrevAC(result.hasNext));
+        return put(setMessagesHasPrevAC(true));
       case 45:
         _context9.n = 46;
         return put(setMessagesHasNextAC(false));
@@ -34761,7 +34837,8 @@ var OGMetadata = function OGMetadata(_ref) {
   var _useColor = useColors(),
     incomingMessageBackgroundX = _useColor[THEME_COLORS.INCOMING_MESSAGE_BACKGROUND_X],
     outgoingMessageBackgroundX = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND_X],
-    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
+    textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY];
   var attachment = useMemo(function () {
     return attachments.find(function (attachment) {
       return attachment.type === attachmentTypes.link;
@@ -34887,7 +34964,7 @@ var OGMetadata = function OGMetadata(_ref) {
     }
   }, []);
   useEffect(function () {
-    if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url && !metadata) {
+    if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url && !(oGMetadata !== null && oGMetadata !== void 0 && oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url])) {
       setShouldAnimate(true);
       var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
       if (url) {
@@ -34895,6 +34972,7 @@ var OGMetadata = function OGMetadata(_ref) {
           try {
             if (cachedMetadata) {
               handleMetadata(cachedMetadata);
+              setMetadataLoaded(true);
             }
             ogMetadataQueryBuilder(url);
             return Promise.resolve();
@@ -34907,7 +34985,7 @@ var OGMetadata = function OGMetadata(_ref) {
         });
       }
     }
-  }, [attachment, metadata]);
+  }, [attachment, oGMetadata === null || oGMetadata === void 0 ? void 0 : oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url]]);
   var ogUrl = useMemo(function () {
     var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
     var urlObj = validateUrl(url);
@@ -34942,18 +35020,23 @@ var OGMetadata = function OGMetadata(_ref) {
       link: 4
     };
   }, [order]);
+  var MIN_IMAGE_HEIGHT = 180;
+  var MAX_IMAGE_HEIGHT = 400;
+  var showImage = useMemo(function () {
+    return hasImage && calculatedImageHeight >= MIN_IMAGE_HEIGHT && calculatedImageHeight <= MAX_IMAGE_HEIGHT;
+  }, [hasImage, calculatedImageHeight]);
   useEffect(function () {
     if (metadataLoaded || oGMetadata !== null && oGMetadata !== void 0 && oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url]) {
-      if (metadata && metadataGetSuccessCallback && (hasImage || faviconUrl)) {
-        metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, true, hasImage);
+      if (oGMetadata !== null && oGMetadata !== void 0 && oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url] && metadataGetSuccessCallback && metadata) {
+        metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, true, showImage, metadata);
       } else {
-        metadataGetSuccessCallback === null || metadataGetSuccessCallback === void 0 ? void 0 : metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, false, false);
+        metadataGetSuccessCallback === null || metadataGetSuccessCallback === void 0 ? void 0 : metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, false, false, metadata);
       }
     }
-  }, [metadata, metadataLoaded, oGMetadata, attachment === null || attachment === void 0 ? void 0 : attachment.url, hasImage]);
+  }, [metadataLoaded, oGMetadata, attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata]);
   var elements = useMemo(function () {
-    var _resolvedOrder$image, _metadata$og11, _metadata$og11$image, _metadata$og11$image$, _resolvedOrder$title, _metadata$og12, _metadata$og13, _resolvedOrder$descri, _metadata$og14, _metadata$og15, _resolvedOrder$link;
-    return [hasImage ? {
+    var _resolvedOrder$image, _metadata$og11, _metadata$og11$image, _metadata$og11$image$, _resolvedOrder$title, _metadata$og12, _metadata$og13, _metadata$og13$title, _resolvedOrder$descri, _metadata$og14, _metadata$og15, _metadata$og15$descri, _resolvedOrder$link;
+    return [showImage ? {
       key: 'image',
       order: (_resolvedOrder$image = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.image) != null ? _resolvedOrder$image : 1,
       render: (/*#__PURE__*/React__default.createElement(ImageContainer, {
@@ -34974,8 +35057,9 @@ var OGMetadata = function OGMetadata(_ref) {
       render: ogShowTitle && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : _metadata$og12.title) && (/*#__PURE__*/React__default.createElement(Title$3, {
         maxWidth: maxWidth,
         shouldAnimate: shouldAnimate,
-        padding: infoPadding
-      }, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og13 = metadata.og) === null || _metadata$og13 === void 0 ? void 0 : _metadata$og13.title)))
+        padding: infoPadding,
+        color: textPrimary
+      }, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og13 = metadata.og) === null || _metadata$og13 === void 0 ? void 0 : (_metadata$og13$title = _metadata$og13.title) === null || _metadata$og13$title === void 0 ? void 0 : _metadata$og13$title.trim())))
     }, {
       key: 'description',
       order: (_resolvedOrder$descri = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.description) != null ? _resolvedOrder$descri : 3,
@@ -34984,7 +35068,7 @@ var OGMetadata = function OGMetadata(_ref) {
         shouldAnimate: shouldAnimate,
         color: textSecondary,
         padding: infoPadding
-      }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og15 = metadata.og) === null || _metadata$og15 === void 0 ? void 0 : _metadata$og15.description))
+      }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og15 = metadata.og) === null || _metadata$og15 === void 0 ? void 0 : (_metadata$og15$descri = _metadata$og15.description) === null || _metadata$og15$descri === void 0 ? void 0 : _metadata$og15$descri.trim()))
     }, {
       key: 'link',
       order: (_resolvedOrder$link = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.link) != null ? _resolvedOrder$link : 4,
@@ -35042,7 +35126,8 @@ var OGMetadata = function OGMetadata(_ref) {
     borderRadius: ogContainerBorderRadius,
     padding: ogContainerPadding,
     className: ogContainerClassName,
-    containerMargin: ogContainerMargin
+    containerMargin: ogContainerMargin,
+    maxWidth: maxWidth
   }, isInviteLink ? {
     as: 'div',
     onClick: function onClick() {
@@ -35056,84 +35141,90 @@ var OGMetadata = function OGMetadata(_ref) {
   }), content);
 };
 var sharedKeyframes = "\n  @keyframes fadeInSlideUp {\n    from {\n      opacity: 0;\n      transform: translateY(10px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes expandHeight {\n    from {\n      max-height: 0;\n      opacity: 0;\n    }\n    to {\n      max-height: 1000px;\n      opacity: 1;\n    }\n  }\n";
-var OGMetadataContainer = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  min-width: inherit;\n  max-width: inherit;\n  width: 100%;\n  display: grid;\n  grid-template-columns: 1fr;\n  background-color: ", ";\n  border-radius: ", ";\n  margin: ", ";\n  // margin-bottom: ", ";\n  padding: ", ";\n  text-decoration: none;\n  color: inherit;\n  &:hover {\n    opacity: 0.9;\n    cursor: pointer;\n  }\n"])), function (_ref2) {
-  var showBackground = _ref2.showBackground,
-    customBg = _ref2.customBg,
-    bgColor = _ref2.bgColor;
-  return showBackground ? customBg != null ? customBg : bgColor : 'transparent';
+var OGMetadataContainer = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  min-width: inherit;\n  max-width: ", ";\n  width: 100%;\n  display: grid;\n  grid-template-columns: 1fr;\n  border-radius: 8px;\n  background-color: ", ";\n  border-radius: ", ";\n  margin: ", ";\n  // margin-bottom: ", ";\n  padding: ", ";\n  text-decoration: none;\n  // color: inherit;\n  &:hover {\n    opacity: 0.9;\n    cursor: pointer;\n  }\n"])), function (_ref2) {
+  var maxWidth = _ref2.maxWidth;
+  return maxWidth ? maxWidth + "px" : 'inherit';
 }, function (_ref3) {
-  var borderRadius = _ref3.borderRadius;
-  return borderRadius !== undefined ? borderRadius : '8px';
+  var showBackground = _ref3.showBackground,
+    customBg = _ref3.customBg,
+    bgColor = _ref3.bgColor;
+  return showBackground ? customBg != null ? customBg : bgColor : 'transparent';
 }, function (_ref4) {
-  var containerMargin = _ref4.containerMargin;
-  return containerMargin != null ? containerMargin : '0.8rem auto 0';
+  var borderRadius = _ref4.borderRadius;
+  return borderRadius !== undefined ? borderRadius : '8px';
 }, function (_ref5) {
-  var showOGMetadata = _ref5.showOGMetadata;
-  return showOGMetadata ? '0.4rem' : '0';
+  var containerMargin = _ref5.containerMargin;
+  return containerMargin != null ? containerMargin : '0.8rem auto 0';
 }, function (_ref6) {
-  var padding = _ref6.padding;
+  var showOGMetadata = _ref6.showOGMetadata;
+  return showOGMetadata ? '0.4rem' : '0';
+}, function (_ref7) {
+  var padding = _ref7.padding;
   return padding != null ? padding : '0';
 });
-var ImageContainer = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 100%;\n  height: ", ";\n  opacity: ", ";\n  margin: 0 auto;\n  overflow: hidden;\n  ", "\n"])), sharedKeyframes, function (_ref7) {
-  var containerHeight = _ref7.containerHeight;
+var ImageContainer = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 100%;\n  height: ", ";\n  opacity: ", ";\n  margin: 0 auto;\n  border-radius: 8px 8px 0 0;\n  overflow: hidden;\n  ", "\n"])), sharedKeyframes, function (_ref8) {
+  var containerHeight = _ref8.containerHeight;
   return containerHeight ? containerHeight + "px" : '0px';
-}, function (_ref8) {
-  var showOGMetadata = _ref8.showOGMetadata,
-    containerHeight = _ref8.containerHeight;
-  return showOGMetadata && containerHeight ? 1 : 0;
 }, function (_ref9) {
-  var shouldAnimate = _ref9.shouldAnimate,
-    showOGMetadata = _ref9.showOGMetadata,
+  var showOGMetadata = _ref9.showOGMetadata,
     containerHeight = _ref9.containerHeight;
+  return showOGMetadata && containerHeight ? 1 : 0;
+}, function (_ref0) {
+  var shouldAnimate = _ref0.shouldAnimate,
+    showOGMetadata = _ref0.showOGMetadata,
+    containerHeight = _ref0.containerHeight;
   return shouldAnimate && showOGMetadata && containerHeight && "\n    animation: expandHeight 0.3s ease-out forwards;\n  ";
 });
-var OGText = styled.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  ", "\n  ", ";\n"])), sharedKeyframes, function (_ref0) {
-  var shouldAnimate = _ref0.shouldAnimate;
+var OGText = styled.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  ", "\n  ", ";\n"])), sharedKeyframes, function (_ref1) {
+  var shouldAnimate = _ref1.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeInSlideUp 0.3s ease-out forwards;\n  ";
-}, function (_ref1) {
-  var margin = _ref1.margin;
+}, function (_ref10) {
+  var margin = _ref10.margin;
   return margin ? '12px' : '0';
 });
-var Title$3 = styled.p(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: bold;\n  font-size: 13px;\n  line-height: 16px;\n  margin: 8px 0 0 0;\n  padding: ", ";\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref10) {
-  var padding = _ref10.padding;
+var Title$3 = styled.p(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  ", "\n  // font-family: Inter;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 18px;\n  letter-spacing: 0px;\n  color: ", ";\n  margin: 4px 0 0 0;\n  padding: ", ";\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref11) {
+  var color = _ref11.color;
+  return color;
+}, function (_ref12) {
+  var padding = _ref12.padding;
   return padding != null ? padding : '0';
-}, function (_ref11) {
-  var maxWidth = _ref11.maxWidth;
+}, function (_ref13) {
+  var maxWidth = _ref13.maxWidth;
   return maxWidth && "\n    max-width: " + maxWidth + "px;\n  ";
-}, function (_ref12) {
-  var shouldAnimate = _ref12.shouldAnimate;
+}, function (_ref14) {
+  var shouldAnimate = _ref14.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeInSlideUp 0.3s ease-out 0.1s backwards;\n  ";
 });
-var Desc = styled.p(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  margin: 0 0 8px 0;\n  padding: ", ";\n  color: ", ";\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref13) {
-  var padding = _ref13.padding;
+var Desc = styled.p(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  margin: 4px 0 4px 0;\n  padding: ", ";\n  color: ", ";\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref15) {
+  var padding = _ref15.padding;
   return padding != null ? padding : '0';
-}, function (_ref14) {
-  var color = _ref14.color;
+}, function (_ref16) {
+  var color = _ref16.color;
   return color;
-}, function (_ref15) {
-  var maxWidth = _ref15.maxWidth;
+}, function (_ref17) {
+  var maxWidth = _ref17.maxWidth;
   return maxWidth && "\n    max-width: " + maxWidth + "px;\n  ";
-}, function (_ref16) {
-  var shouldAnimate = _ref16.shouldAnimate;
+}, function (_ref18) {
+  var shouldAnimate = _ref18.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeInSlideUp 0.3s ease-out 0.2s backwards;\n  ";
 });
-var Url = styled.p(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  margin: 0 0 12px 0;\n  padding: ", ";\n  color: gray;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref17) {
-  var padding = _ref17.padding;
+var Url = styled.p(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  margin: 0 0 12px 0;\n  padding: ", ";\n  color: gray;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref19) {
+  var padding = _ref19.padding;
   return padding != null ? padding : '0';
-}, function (_ref18) {
-  var maxWidth = _ref18.maxWidth;
+}, function (_ref20) {
+  var maxWidth = _ref20.maxWidth;
   return maxWidth && "\n    max-width: " + maxWidth + "px;\n  ";
-}, function (_ref19) {
-  var shouldAnimate = _ref19.shouldAnimate;
+}, function (_ref21) {
+  var shouldAnimate = _ref21.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeInSlideUp 0.3s ease-out 0.3s backwards;\n  ";
 });
-var Img = styled.img(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  border-radius: inherit;\n  ", "\n"])), sharedKeyframes, function (_ref20) {
-  var shouldAnimate = _ref20.shouldAnimate;
+var Img = styled.img(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  // object-fit: cover;\n  // object-position: center;\n  // image-rendering: auto;\n  border-radius: inherit;\n  ", "\n"])), sharedKeyframes, function (_ref22) {
+  var shouldAnimate = _ref22.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeIn 0.4s ease-out forwards;\n  ";
 });
-var OGRow = styled.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n"])));
+var OGRow = styled.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 0;\n"])));
 var OGTextWrapper = styled.div(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n  flex: 1 1 auto;\n"])));
-var FaviconContainer = styled.div(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose(["\n  width: 52px;\n  height: 52px;\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 12px;\n  flex: 0 0 52px;\n"])));
+var FaviconContainer = styled.div(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose(["\n  width: 52px;\n  height: 52px;\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 8px;\n  flex: 0 0 52px;\n"])));
 var FaviconImg = styled.img(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n"])));
 
 var _templateObject$G, _templateObject2$B, _templateObject3$v, _templateObject4$r, _templateObject5$m;
@@ -35362,6 +35453,41 @@ var MessageBody = function MessageBody(_ref) {
   var selectionIsActive = useMemo(function () {
     return selectedMessagesMap && selectedMessagesMap.size > 0;
   }, [selectedMessagesMap]);
+  var hasLongLinkAttachmentUrl = useMemo(function () {
+    if (!linkAttachment || !linkAttachment.url) return false;
+    return linkAttachment.url.length > 100;
+  }, [linkAttachment]);
+  var oGMetadata = useSelector(function (state) {
+    return state.MessageReducer.oGMetadata;
+  });
+  var linkMetadata = useMemo(function () {
+    if (!(linkAttachment !== null && linkAttachment !== void 0 && linkAttachment.url)) return null;
+    return (oGMetadata === null || oGMetadata === void 0 ? void 0 : oGMetadata[linkAttachment.url]) || null;
+  }, [oGMetadata, linkAttachment === null || linkAttachment === void 0 ? void 0 : linkAttachment.url]);
+  var ogMetadataContainerWidth = useMemo(function () {
+    var _linkMetadata$og, _linkMetadata$og$imag, _linkMetadata$og$imag2, _linkMetadata$og2, _linkMetadata$og3, _linkMetadata$og3$fav;
+    if (!linkMetadata || !linkAttachment) return (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400;
+    if (hasLongLinkAttachmentUrl) {
+      return 400;
+    }
+    var hasImage = (linkMetadata === null || linkMetadata === void 0 ? void 0 : (_linkMetadata$og = linkMetadata.og) === null || _linkMetadata$og === void 0 ? void 0 : (_linkMetadata$og$imag = _linkMetadata$og.image) === null || _linkMetadata$og$imag === void 0 ? void 0 : (_linkMetadata$og$imag2 = _linkMetadata$og$imag[0]) === null || _linkMetadata$og$imag2 === void 0 ? void 0 : _linkMetadata$og$imag2.url) && (linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.imageWidth) && (linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.imageHeight);
+    var imageWidth = linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.imageWidth;
+    var imageHeight = linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.imageHeight;
+    var calculatedImageHeight = imageWidth && imageHeight ? imageHeight / (imageWidth / ((ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400)) : 0;
+    var showImage = hasImage && calculatedImageHeight >= 180 && calculatedImageHeight <= 400;
+    var hasDescription = linkMetadata === null || linkMetadata === void 0 ? void 0 : (_linkMetadata$og2 = linkMetadata.og) === null || _linkMetadata$og2 === void 0 ? void 0 : _linkMetadata$og2.description;
+    var hasFavicon = (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogShowFavicon) && (linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.faviconLoaded) && (linkMetadata === null || linkMetadata === void 0 ? void 0 : (_linkMetadata$og3 = linkMetadata.og) === null || _linkMetadata$og3 === void 0 ? void 0 : (_linkMetadata$og3$fav = _linkMetadata$og3.favicon) === null || _linkMetadata$og3$fav === void 0 ? void 0 : _linkMetadata$og3$fav.url);
+    if (showImage) {
+      return 400;
+    }
+    if (hasDescription && hasFavicon) {
+      return 336;
+    }
+    if (hasDescription) {
+      return 356;
+    }
+    return (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400;
+  }, [linkMetadata, linkAttachment, ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth, ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogShowFavicon, hasLongLinkAttachmentUrl]);
   var handleRemoveFailedAttachment = function handleRemoveFailedAttachment(attachmentId) {
     log.info('remove attachment .. ', attachmentId);
   };
@@ -35379,7 +35505,10 @@ var MessageBody = function MessageBody(_ref) {
     },
     borderRadius: borderRadius,
     withAttachments: notLinkAttachment,
-    attachmentWidth: withAttachments ? mediaAttachment ? attachmentMetas && getSendAttachmentsAsSeparateMessages() && attachmentMetas.szw && calculateRenderedImageWidth(attachmentMetas.szw, attachmentMetas.szh, mediaAttachment.type === attachmentTypes.image ? imageAttachmentMaxWidth : videoAttachmentMaxWidth, mediaAttachment.type === attachmentTypes.image ? imageAttachmentMaxHeight : videoAttachmentMaxHeight)[0] || 420 : message.attachments[0].type === attachmentTypes.voice ? 254 : message.attachments[0].type === attachmentTypes.file ? fileAttachmentsBoxWidth : undefined : undefined,
+    hasLinkAttachment: !!linkAttachment,
+    hasLongLinkAttachmentUrl: hasLongLinkAttachmentUrl,
+    attachmentWidth: withAttachments ? mediaAttachment ? attachmentMetas && getSendAttachmentsAsSeparateMessages() && attachmentMetas.szw && calculateRenderedImageWidth(attachmentMetas.szw, attachmentMetas.szh, mediaAttachment.type === attachmentTypes.image ? imageAttachmentMaxWidth : videoAttachmentMaxWidth, mediaAttachment.type === attachmentTypes.image ? imageAttachmentMaxHeight : videoAttachmentMaxHeight)[0] || 400 : message.attachments[0].type === attachmentTypes.voice ? 254 : message.attachments[0].type === attachmentTypes.file ? fileAttachmentsBoxWidth : undefined : undefined,
+    ogMetadataMaxWidth: ogMetadataContainerWidth,
     noBody: !message.body && !withAttachments,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
@@ -35535,7 +35664,7 @@ var MessageBody = function MessageBody(_ref) {
     unsupportedMessage: unsupportedMessage,
     unsupportedMessageColor: textSecondary
   }, ogContainerFirst && linkAttachment && !mediaAttachment && !withMediaAttachment && !fileAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
-    maxWidth: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400,
+    maxWidth: ogMetadataContainerWidth,
     maxHeight: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxHeight,
     attachments: [linkAttachment],
     state: message.state,
@@ -35574,7 +35703,7 @@ var MessageBody = function MessageBody(_ref) {
   }))), !withAttachments && message.state === MESSAGE_STATUS.DELETE ? (/*#__PURE__*/React__default.createElement(MessageStatusDeleted$1, {
     color: textSecondary
   }, " Message was deleted. ")) : '', !ogContainerFirst && linkAttachment && !mediaAttachment && !withMediaAttachment && !fileAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
-    maxWidth: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400,
+    maxWidth: ogMetadataContainerWidth,
     maxHeight: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxHeight,
     attachments: [linkAttachment],
     state: message.state,
@@ -35596,7 +35725,7 @@ var MessageBody = function MessageBody(_ref) {
     ogContainerBackground: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerBackground,
     infoPadding: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.infoPadding,
     isInviteLink: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.isInviteLink
-  })), messageStatusAndTimePosition === 'onMessage' && !notLinkAttachment && (messageStatusVisible || messageTimeVisible) ? (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
+  })), messageStatusAndTimePosition === 'onMessage' && !notLinkAttachment && !!linkAttachment && (messageStatusVisible || messageTimeVisible) ? (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
     message: message,
     showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
     messageStatusDisplayingType: messageStatusDisplayingType,
@@ -35612,25 +35741,31 @@ var MessageBody = function MessageBody(_ref) {
     messageStatusVisible: !!messageStatusVisible,
     leftMargin: true,
     messageTimeColorOnAttachment: messageTimeColorOnAttachment || textSecondary
-  })) : null), notLinkAttachment && messageStatusAndTimePosition === 'onMessage' && (messageStatusVisible || messageTimeVisible) && (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
-    message: message,
-    showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
-    messageStatusDisplayingType: messageStatusDisplayingType,
-    messageStatusSize: messageStatusSize,
-    messageStatusColor: message.attachments[0].type === 'voice' ? textSecondary : message.attachments[0].type === 'image' || message.attachments[0].type === 'video' ? textOnPrimary : messageStateColor || textSecondary,
-    messageReadStatusColor: messageReadStatusColor,
-    messageStateFontSize: messageStateFontSize,
-    messageStateColor: messageStateColor,
-    messageTimeFontSize: messageTimeFontSize,
-    messageTimeColor: messageTimeColor,
-    messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
-    messageTimeVisible: !!messageTimeVisible,
-    messageStatusVisible: !!messageStatusVisible,
-    withAttachment: withAttachments,
-    leftMargin: true,
-    fileAttachment: withAttachments && (message.attachments[0].type === 'file' || message.attachments[0].type === 'voice'),
-    messageTimeColorOnAttachment: message.attachments[0].type === 'voice' ? textSecondary : message.attachments[0].type === 'image' || message.attachments[0].type === 'video' ? textOnPrimary : textSecondary
-  })), withAttachments && message.attachments.map(function (attachment) {
+  })) : null), notLinkAttachment && messageStatusAndTimePosition === 'onMessage' && (messageStatusVisible || messageTimeVisible) && function () {
+    var nonLinkAttachment = message.attachments.find(function (a) {
+      return a.type !== attachmentTypes.link;
+    });
+    var attachmentType = nonLinkAttachment === null || nonLinkAttachment === void 0 ? void 0 : nonLinkAttachment.type;
+    return /*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
+      message: message,
+      showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
+      messageStatusDisplayingType: messageStatusDisplayingType,
+      messageStatusSize: messageStatusSize,
+      messageStatusColor: attachmentType === 'voice' ? textSecondary : attachmentType === 'image' || attachmentType === 'video' ? textOnPrimary : messageStateColor || textSecondary,
+      messageReadStatusColor: messageReadStatusColor,
+      messageStateFontSize: messageStateFontSize,
+      messageStateColor: messageStateColor,
+      messageTimeFontSize: messageTimeFontSize,
+      messageTimeColor: messageTimeColor,
+      messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
+      messageTimeVisible: !!messageTimeVisible,
+      messageStatusVisible: !!messageStatusVisible,
+      withAttachment: withAttachments,
+      leftMargin: true,
+      fileAttachment: withAttachments && (attachmentType === 'file' || attachmentType === 'voice'),
+      messageTimeColorOnAttachment: attachmentType === 'voice' ? textSecondary : attachmentType === 'image' || attachmentType === 'video' ? textOnPrimary : textSecondary
+    });
+  }(), withAttachments && message.attachments.map(function (attachment) {
     return /*#__PURE__*/React__default.createElement(Attachment$1, {
       key: attachment.tid || attachment.url,
       handleMediaItemClick: selectionIsActive ? undefined : handleMediaItemClick,
@@ -35703,7 +35838,7 @@ var MessageStatusDeleted$1 = styled.span(_templateObject2$B || (_templateObject2
 }, function (props) {
   return props.fontSize;
 });
-var MessageBodyContainer = styled.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: ", ";\n  //display: inline-block;\n  border-radius: ", ";\n  direction: ", ";\n  max-width: ", ";\n  width: max-content;\n  padding: ", ";\n  //direction: ", ";\n  //overflow: ", ";\n  transition: all 0.3s;\n  transform-origin: right;\n"])), function (props) {
+var MessageBodyContainer = styled.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: ", ";\n  //display: inline-block;\n  border-radius: ", ";\n  direction: ", ";\n  max-width: ", ";\n  width: ", ";\n  overflow-wrap: break-word;\n  word-break: break-word;\n\n  ", "\n  padding: ", ";\n  //direction: ", ";\n  //overflow: ", ";\n  transition: all 0.3s;\n  transform-origin: right;\n"])), function (props) {
   var _props$outgoingMessag, _props$incomingMessag;
   return props.isSelfMessage ? (_props$outgoingMessag = props.outgoingMessageStyles) === null || _props$outgoingMessag === void 0 ? void 0 : _props$outgoingMessag.background : (_props$incomingMessag = props.incomingMessageStyles) === null || _props$incomingMessag === void 0 ? void 0 : _props$incomingMessag.background;
 }, function (props) {
@@ -35711,10 +35846,14 @@ var MessageBodyContainer = styled.div(_templateObject3$v || (_templateObject3$v
 }, function (props) {
   return props.rtlDirection ? 'initial' : '';
 }, function (props) {
-  return props.withAttachments ? props.attachmentWidth && props.attachmentWidth < 420 ? props.attachmentWidth < 165 ? props.isReplyMessage ? '210px' : '165px' : props.attachmentWidth + "px" : '420px' : '100%';
+  return props.hasLinkAttachment && !props.withAttachments ? props.ogMetadataMaxWidth ? props.ogMetadataMaxWidth + "px" : '416px' : props.hasLongLinkAttachmentUrl && !props.withAttachments ? '400px' : props.withAttachments ? props.attachmentWidth && props.attachmentWidth < 400 ? props.attachmentWidth < 165 ? props.isReplyMessage ? '210px' : '165px' : props.attachmentWidth + "px" : '400px' : '100%';
+}, function (props) {
+  return props.hasLinkAttachment && !props.withAttachments && props.ogMetadataMaxWidth ? props.ogMetadataMaxWidth + "px" : props.hasLongLinkAttachmentUrl && !props.withAttachments ? '416px' : 'max-content';
+}, function (props) {
+  return props.hasLongLinkAttachmentUrl && "\n    & a {\n      overflow-wrap: anywhere;\n      word-break: break-all;\n      white-space: normal;\n      max-width: " + (props.withAttachments ? '400px' : props.hasLinkAttachment && props.ogMetadataMaxWidth ? props.ogMetadataMaxWidth + "px" : '416px') + ";\n    }\n  ";
 }, function (props) {
   var _props$outgoingMessag2, _props$incomingMessag2;
-  return props.withAttachments ? props.isReplyMessage ? '1px 0 0 ' : '0' : props.isSelfMessage ? ((_props$outgoingMessag2 = props.outgoingMessageStyles) === null || _props$outgoingMessag2 === void 0 ? void 0 : _props$outgoingMessag2.background) === 'inherit' ? '0' : '8px 12px' : ((_props$incomingMessag2 = props.incomingMessageStyles) === null || _props$incomingMessag2 === void 0 ? void 0 : _props$incomingMessag2.background) === 'inherit' ? ' 0' : '8px 12px';
+  return props.withAttachments ? props.isReplyMessage ? '1px 0 0 ' : '0' : props.hasLinkAttachment ? '8px' : props.isSelfMessage ? ((_props$outgoingMessag2 = props.outgoingMessageStyles) === null || _props$outgoingMessag2 === void 0 ? void 0 : _props$outgoingMessag2.background) === 'inherit' ? '0' : '8px 12px' : ((_props$incomingMessag2 = props.incomingMessageStyles) === null || _props$incomingMessag2 === void 0 ? void 0 : _props$incomingMessag2.background) === 'inherit' ? ' 0' : '8px 12px';
 }, function (props) {
   return props.isSelfMessage ? 'initial' : '';
 }, function (props) {
@@ -36381,6 +36520,7 @@ var Message$1 = function Message(_ref) {
     reactionsPopupHorizontalPosition = _useState10[0],
     setReactionsPopupHorizontalPosition = _useState10[1];
   var scrollToNewMessage = useSelector(scrollToNewMessageSelector, shallowEqual);
+  var unreadScrollTo = useSelector(unreadScrollToSelector, shallowEqual);
   var messageItemRef = useRef();
   var isVisible = useOnScreen(messageItemRef);
   var reactionsCount = message.reactionTotals && message.reactionTotals.reduce(function (prevValue, currentValue) {
@@ -36534,11 +36674,6 @@ var Message$1 = function Message(_ref) {
     setFrequentlyEmojisOpen(false);
   };
   var handleSendReadMarker = function handleSendReadMarker() {
-    if (isVisible && message.incoming && !(message.userMarkers && message.userMarkers.length && message.userMarkers.find(function (marker) {
-      return marker.name === MESSAGE_DELIVERY_STATUS.READ;
-    })) && channel.newMessageCount && channel.newMessageCount > 0 && connectionStatus === CONNECTION_STATUS.CONNECTED) {
-      dispatch(markMessagesAsReadAC(channel.id, [message.id]));
-    }
     if (!message.userMarkers.find(function (marker) {
       return marker.name === MESSAGE_DELIVERY_STATUS.DELIVERED;
     })) {
@@ -36548,6 +36683,11 @@ var Message$1 = function Message(_ref) {
         dispatch(markMessagesAsDeliveredAC(channel.id, [message.id]));
       }
     }
+    if (isVisible && message.incoming && !(message.userMarkers && message.userMarkers.length && message.userMarkers.find(function (marker) {
+      return marker.name === MESSAGE_DELIVERY_STATUS.READ;
+    })) && channel.newMessageCount && channel.newMessageCount > 0 && connectionStatus === CONNECTION_STATUS.CONNECTED && !unreadScrollTo) {
+      dispatch(markMessagesAsReadAC(channel.id, [message.id]));
+    }
   };
   var handleForwardMessage = function handleForwardMessage(channelIds) {
     if (channelIds && channelIds.length) {
@@ -36585,7 +36725,7 @@ var Message$1 = function Message(_ref) {
     }
   };
   useEffect(function () {
-    if (isVisible) {
+    if (isVisible && !unreadScrollTo) {
       var _channel$lastMessage;
       if (setLastVisibleMessageId) {
         setLastVisibleMessageId(message.id);
@@ -37283,6 +37423,9 @@ var MessageList = function MessageList(_ref2) {
   var dispatch = useDispatch();
   var theme = useSelector(themeSelector);
   var channel = useSelector(activeChannelSelector);
+  var _useState = useState(false),
+    scrollIntoView = _useState[0],
+    setScrollIntoView = _useState[1];
   var contactsMap = useSelector(contactsMapSelector, shallowEqual);
   var connectionStatus = useSelector(connectionStatusSelector, shallowEqual);
   var openedMessageMenuId = useSelector(openedMessageMenuSelector, shallowEqual);
@@ -37301,43 +37444,44 @@ var MessageList = function MessageList(_ref2) {
   var pollPendingPollActions = useSelector(pendingPollActionsSelector, shallowEqual);
   var pendingMessagesMap = useSelector(pendingMessagesMapSelector, shallowEqual);
   var showScrollToNewMessageButton = useSelector(showScrollToNewMessageButtonSelector, shallowEqual);
+  var unreadScrollTo = useSelector(unreadScrollToSelector, shallowEqual);
   var messages = useSelector(activeChannelMessagesSelector, shallowEqual) || [];
-  var _useState = useState(''),
-    unreadMessageId = _useState[0],
-    setUnreadMessageId = _useState[1];
-  var _useState2 = useState(null),
-    mediaFile = _useState2[0],
-    setMediaFile = _useState2[1];
+  var _useState2 = useState(''),
+    unreadMessageId = _useState2[0],
+    setUnreadMessageId = _useState2[1];
   var _useState3 = useState(null),
-    isDragging = _useState3[0],
-    setIsDragging = _useState3[1];
+    mediaFile = _useState3[0],
+    setMediaFile = _useState3[1];
   var _useState4 = useState(null),
-    showTopDate = _useState4[0],
-    setShowTopDate = _useState4[1];
-  var _useState5 = useState(false),
-    stopScrolling = _useState5[0],
-    setStopScrolling = _useState5[1];
+    isDragging = _useState4[0],
+    setIsDragging = _useState4[1];
+  var _useState5 = useState(null),
+    showTopDate = _useState5[0],
+    setShowTopDate = _useState5[1];
   var _useState6 = useState(false),
-    isScrolling = _useState6[0],
-    setIsScrolling = _useState6[1];
+    stopScrolling = _useState6[0],
+    setStopScrolling = _useState6[1];
+  var _useState7 = useState(false),
+    isScrolling = _useState7[0],
+    setIsScrolling = _useState7[1];
   var hideTopDateTimeout = useRef(null);
-  var _useState7 = useState(''),
-    lastVisibleMessageId = _useState7[0],
-    _setLastVisibleMessageId = _useState7[1];
-  var _useState8 = useState(null),
-    scrollToReply = _useState8[0],
-    setScrollToReply = _useState8[1];
-  var _useState9 = useState(0),
-    previousScrollTop = _useState9[0],
-    setPreviousScrollTop = _useState9[1];
-  var _useState0 = useState(false),
-    shouldPreserveScroll = _useState0[0],
-    setShouldPreserveScroll = _useState0[1];
+  var _useState8 = useState(''),
+    lastVisibleMessageId = _useState8[0],
+    _setLastVisibleMessageId = _useState8[1];
+  var _useState9 = useState(null),
+    scrollToReply = _useState9[0],
+    setScrollToReply = _useState9[1];
+  var _useState0 = useState(0),
+    previousScrollTop = _useState0[0],
+    setPreviousScrollTop = _useState0[1];
+  var _useState1 = useState(false),
+    shouldPreserveScroll = _useState1[0],
+    setShouldPreserveScroll = _useState1[1];
   var messageForReply = {};
   var attachmentsSelected = false;
-  var _useState1 = useState(''),
-    topDateLabel = _useState1[0],
-    setTopDateLabel = _useState1[1];
+  var _useState10 = useState(''),
+    topDateLabel = _useState10[0],
+    setTopDateLabel = _useState10[1];
   var scrollRef = useRef(null);
   var loadFromServerRef = useRef(false);
   var loadDirectionRef = useRef('');
@@ -37826,6 +37970,8 @@ var MessageList = function MessageList(_ref2) {
     };
   }, [messagesLoading, messages, lastVisibleMessageId]);
   useEffect(function () {
+    var interval = null;
+    log.info('connection status is changed.. .... ', connectionStatus, 'channel  ... ', channel);
     if (connectionStatus === CONNECTION_STATUS.CONNECTED) {
       Object.keys(pendingMessagesMap).forEach(function (key) {
         pendingMessagesMap[key].forEach(function (msg) {
@@ -37835,37 +37981,49 @@ var MessageList = function MessageList(_ref2) {
       if (Object.keys(pollPendingPollActions).length > 0) {
         dispatch(resendPendingPollActionsAC(connectionStatus));
       }
+      var count = 0;
+      interval = setInterval(function () {
+        if (count > 20) {
+          clearInterval(interval);
+        }
+        count++;
+        if (channel.id && Object.keys(pollPendingPollActions).length === 0 && Object.keys(pendingMessagesMap).length === 0) {
+          clearInterval(interval);
+          loadingRef.current = false;
+          prevDisableRef.current = false;
+          nextDisableRef.current = false;
+          clearMessagesMap();
+          removeAllMessages();
+          dispatch(getMessagesAC(channel));
+        }
+      }, 100);
     }
-  }, [connectionStatus]);
-  useEffect(function () {
-    log.info('connection status is changed.. .... ', connectionStatus, 'channel  ... ', channel);
-    if (connectionStatus === CONNECTION_STATUS.CONNECTED) {
-      if (channel.id && Object.keys(pollPendingPollActions).length === 0 && Object.keys(pendingMessagesMap).length === 0) {
-        loadingRef.current = false;
-        prevDisableRef.current = false;
-        nextDisableRef.current = false;
-        clearMessagesMap();
-        removeAllMessages();
-        dispatch(getMessagesAC(channel));
+    return function () {
+      if (interval) {
+        clearInterval(interval);
       }
-    }
-  }, [connectionStatus, pollPendingPollActions, pendingMessagesMap]);
+    };
+  }, [connectionStatus]);
   useEffect(function () {
-    var unreadScrollTo = getUnreadScrollTo();
     if (channel.newMessageCount && channel.newMessageCount > 0 && unreadScrollTo) {
-      if (scrollRef.current) {
-        scrollRef.current.style.scrollBehavior = 'inherit';
+      var scrollElement = document.getElementById('scrollableDiv');
+      if (scrollElement) {
+        scrollElement.style.scrollBehavior = 'inherit';
       }
       var lastReadMessageNode = document.getElementById(channel.lastDisplayedMessageId);
-      if (lastReadMessageNode) {
-        scrollRef.current.scrollTop = lastReadMessageNode.offsetTop;
-        if (scrollRef.current) {
-          scrollRef.current.style.scrollBehavior = 'smooth';
-        }
-        setUnreadScrollTo(false);
+      if (lastReadMessageNode && scrollElement) {
+        scrollElement.scrollTo({
+          top: lastReadMessageNode.offsetTop - 200,
+          behavior: 'smooth'
+        });
+        setScrollIntoView(true);
+        setTimeout(function () {
+          dispatch(setUnreadScrollToAC(false));
+          setScrollIntoView(false);
+        }, 100);
       }
     }
-  }, [channel.id, channel.newMessageCount, channel.lastDisplayedMessageId]);
+  }, [channel.id, channel.newMessageCount, scrollRef.current, unreadScrollTo, channel.lastDisplayedMessageId, scrollIntoView, messages.length]);
   useEffect(function () {
     return function () {
       if (hideTopDateTimeout.current) {