sceyt-chat-react-uikit 1.7.4-beta.7 → 1.7.4-beta.8

package/index.js

@@ -10822,7 +10822,6 @@ var _messageSlice$actions = messageSlice.actions,
   removeSelectedMessage = _messageSlice$actions.removeSelectedMessage,
   clearSelectedMessages = _messageSlice$actions.clearSelectedMessages,
   setOGMetadata = _messageSlice$actions.setOGMetadata,
-  updateOGMetadata = _messageSlice$actions.updateOGMetadata,
   setMessageMarkers = _messageSlice$actions.setMessageMarkers,
   setMessagesMarkersLoadingState = _messageSlice$actions.setMessagesMarkersLoadingState,
   updateMessagesMarkers = _messageSlice$actions.updateMessagesMarkers;
@@ -11987,12 +11986,6 @@ function setOGMetadataAC(url, metadata) {
     metadata: metadata
   });
 }
-function updateOGMetadataAC(url, metadata) {
-  return updateOGMetadata({
-    url: url,
-    metadata: metadata
-  });
-}
 function setUpdateMessageAttachmentAC(url, attachmentUrl) {
   return updateMessageAttachment({
     url: url,
@@ -18250,15 +18243,9 @@ function sendMessage(action) {
         _t2 = _context3.v;
         log.error('error on send message ... ', _t2);
       case 19:
-        _context3.p = 19;
-        _context3.n = 20;
-        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 20:
-        return _context3.f(19);
-      case 21:
         return _context3.a(2);
     }
-  }, _marked$3, null, [[1, 18, 19, 21]]);
+  }, _marked$3, null, [[1, 18]]);
 }
 function sendTextMessage(action) {
   var payload, message, connectionState, channelId, channel, sendMessageTid, activeChannelId, SceytChatClient, createChannelData, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, messageToSend, pendingMessage, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam, _t3;
@@ -18414,12 +18401,15 @@ function sendTextMessage(action) {
         throw new Error('Connection required to send message');
       case 17:
         _context4.n = 18;
-        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+        return effects.put(getMessagesAC(channel, true, channel.lastMessage.id, undefined, undefined, false));
       case 18:
-        _context4.n = 21;
-        break;
+        _context4.n = 19;
+        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
       case 19:
-        _context4.p = 19;
+        _context4.n = 22;
+        break;
+      case 20:
+        _context4.p = 20;
         _t3 = _context4.v;
         log.error('error on send text message ... ', _t3);
         updateMessageOnMap(channel.id, {
@@ -18429,23 +18419,23 @@ function sendTextMessage(action) {
           }
         });
         if (!(activeChannelId === channel.id)) {
-          _context4.n = 20;
+          _context4.n = 21;
           break;
         }
         updateMessageOnAllMessages(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         });
-        _context4.n = 20;
+        _context4.n = 21;
         return effects.put(updateMessageAC(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         }));
-      case 20:
-        _context4.n = 21;
-        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
       case 21:
+        _context4.n = 22;
+        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+      case 22:
         return _context4.a(2);
     }
-  }, _marked2$2, null, [[3, 19]]);
+  }, _marked2$2, null, [[3, 20]]);
 }
 function forwardMessage(action) {
   var payload, message, channelId, connectionState, isForward, channel, SceytChatClient, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, messageToSend, pendingMessage, activeChannelId, isCachedChannel, hasNextMessages, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam, _t4;
@@ -19083,7 +19073,7 @@ function editMessage(action) {
   }, _marked6$1, null, [[0, 5]]);
 }
 function getMessagesQuery(action) {
-  var _action$payload, channel, loadWithLastMessage, messageId, limit, highlight, behavior, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, shouldReloadFromServer, secondResult, pendingMessages, messagesMap, uniqueMessagesMap, currentMessagesInState, preservedMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, _secondResult2, _thirdResult, _secondResult3, _pendingMessages, _messagesMap, filteredPendingMessages, _secondResult4, updatedMessages, _currentMessagesInState, _messagesMap2, preservedFromRedux, _pendingMessages2, _messagesMap3, _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, pendingMessages, _messagesMap, filteredPendingMessages, _t9;
   return _regenerator().w(function (_context9) {
     while (1) switch (_context9.p = _context9.n) {
       case 0:
@@ -19091,9 +19081,9 @@ function getMessagesQuery(action) {
         _context9.n = 1;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADING));
       case 1:
-        _action$payload = action.payload, channel = _action$payload.channel, loadWithLastMessage = _action$payload.loadWithLastMessage, messageId = _action$payload.messageId, limit = _action$payload.limit, highlight = _action$payload.highlight, behavior = _action$payload.behavior;
+        _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 = 50;
+          _context9.n = 48;
           break;
         }
         SceytChatClient = getClient();
@@ -19111,14 +19101,13 @@ function getMessagesQuery(action) {
           hasNext: false
         };
         if (!loadWithLastMessage) {
-          _context9.n = 14;
+          _context9.n = 13;
           break;
         }
         allMessages = getAllMessages();
         havLastMessage = allMessages && allMessages.length && channel.lastMessage && allMessages[allMessages.length - 1] && allMessages[allMessages.length - 1].id === channel.lastMessage.id;
-        shouldReloadFromServer = channel.newMessageCount && channel.newMessageCount > 0 || !havLastMessage;
-        if (!shouldReloadFromServer) {
-          _context9.n = 9;
+        if (!(channel.newMessageCount && channel.newMessageCount > 0 || !havLastMessage)) {
+          _context9.n = 8;
           break;
         }
         setHasPrevCached(false);
@@ -19140,86 +19129,52 @@ function getMessagesQuery(action) {
         result.messages = [].concat(secondResult.messages, result.messages);
         result.hasNext = secondResult.hasNext;
       case 5:
-        pendingMessages = getPendingMessages(channel.id) || [];
+        sentMessages = [];
+        if (withDeliveredMessages) {
+          sentMessages = getFromAllMessagesByMessageId('', '', true);
+        }
         messagesMap = {};
         result.messages.forEach(function (msg) {
-          if (msg.id) messagesMap[msg.id] = msg;
-          if (msg.tid) messagesMap[msg.tid] = msg;
+          messagesMap[msg.tid || ''] = msg;
         });
-        pendingMessages.forEach(function (msg) {
-          var alreadyExists = msg.id && messagesMap[msg.id] || msg.tid && messagesMap[msg.tid] || msg.tid && msg.id && (messagesMap[msg.tid] || messagesMap[msg.id]);
-          if (!alreadyExists) {
-            if (msg.id) messagesMap[msg.id] = msg;
-            if (msg.tid) messagesMap[msg.tid] = msg;
-          }
-        });
-        uniqueMessagesMap = {};
-        result.messages = result.messages.filter(function (msg) {
-          var key = msg.id || msg.tid;
-          if (key && !uniqueMessagesMap[key]) {
-            uniqueMessagesMap[key] = msg;
-            return true;
-          }
-          return false;
-        });
-        pendingMessages.forEach(function (msg) {
-          var key = msg.id || msg.tid;
-          var alreadyExists = msg.id && uniqueMessagesMap[msg.id] || msg.tid && uniqueMessagesMap[msg.tid];
-          if (!alreadyExists && key && !uniqueMessagesMap[key]) {
-            uniqueMessagesMap[key] = msg;
-            result.messages.push(msg);
-          }
+        filteredSentMessages = sentMessages.filter(function (msg) {
+          return !messagesMap[msg.tid || ''];
         });
+        result.messages = [].concat(result.messages, filteredSentMessages).slice(filteredSentMessages.length);
         _context9.n = 6;
-        return effects.select(function (state) {
-          return state.MessageReducer.activeChannelMessages;
-        });
-      case 6:
-        currentMessagesInState = _context9.v;
-        preservedMessages = [];
-        currentMessagesInState.forEach(function (msg) {
-          var key = msg.id || msg.tid;
-          var alreadyExists = msg.id && uniqueMessagesMap[msg.id] || msg.tid && uniqueMessagesMap[msg.tid];
-          if (!alreadyExists && key && !uniqueMessagesMap[key]) {
-            uniqueMessagesMap[key] = msg;
-            result.messages.push(msg);
-            preservedMessages.push(msg);
-          }
-        });
-        _context9.n = 7;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 7:
+      case 6:
         setMessagesToMap(channel.id, result.messages);
         setAllMessages(result.messages);
-        _context9.n = 8;
-        return effects.put(setMessagesHasPrevAC(result.hasNext));
-      case 8:
-        _context9.n = 11;
+        _context9.n = 7;
+        return effects.put(setMessagesHasPrevAC(true));
+      case 7:
+        _context9.n = 10;
         break;
-      case 9:
+      case 8:
         result.messages = getFromAllMessagesByMessageId('', '', true);
-        _context9.n = 10;
+        _context9.n = 9;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
+      case 9:
+        _context9.n = 10;
+        return effects.put(setMessagesHasPrevAC(true));
       case 10:
         _context9.n = 11;
-        return effects.put(setMessagesHasPrevAC(true));
-      case 11:
-        _context9.n = 12;
         return effects.put(setMessagesHasNextAC(false));
-      case 12:
+      case 11:
         setHasNextCached(false);
         if (!messageId) {
-          _context9.n = 13;
+          _context9.n = 12;
           break;
         }
-        _context9.n = 13;
+        _context9.n = 12;
         return effects.put(setScrollToMessagesAC(messageId, highlight, behavior));
-      case 13:
-        _context9.n = 49;
+      case 12:
+        _context9.n = 46;
         break;
-      case 14:
+      case 13:
         if (!messageId) {
-          _context9.n = 27;
+          _context9.n = 26;
           break;
         }
         _allMessages = getAllMessages();
@@ -19228,182 +19183,168 @@ function getMessagesQuery(action) {
         });
         maxLengthPart = MESSAGES_MAX_LENGTH / 2;
         if (!(messageIndex >= maxLengthPart)) {
-          _context9.n = 17;
+          _context9.n = 16;
           break;
         }
         result.messages = _allMessages.slice(messageIndex - maxLengthPart, messageIndex + maxLengthPart);
-        _context9.n = 15;
+        _context9.n = 14;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 15:
+      case 14:
         setHasPrevCached(messageIndex > maxLengthPart);
         setHasNextCached(_allMessages.length > maxLengthPart);
-        _context9.n = 16;
+        _context9.n = 15;
         return effects.put(setMessagesHasPrevAC(true));
-      case 16:
-        _context9.n = 23;
+      case 15:
+        _context9.n = 22;
         break;
-      case 17:
+      case 16:
         messageQuery.limit = MESSAGES_MAX_LENGTH;
         log.info('load by message id from server ...............', messageId);
-        _context9.n = 18;
+        _context9.n = 17;
         return effects.call(messageQuery.loadNearMessageId, messageId);
-      case 18:
+      case 17:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 21;
+          _context9.n = 20;
           break;
         }
         messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 19;
+        _context9.n = 18;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 19:
+      case 18:
         _secondResult = _context9.v;
         messageQuery.reverse = false;
-        _context9.n = 20;
+        _context9.n = 19;
         return effects.call(messageQuery.loadNextMessageId, result.messages[result.messages.length - 1].id);
-      case 20:
+      case 19:
         thirdResult = _context9.v;
         result.messages = [].concat(_secondResult.messages, result.messages, thirdResult.messages);
         result.hasNext = _secondResult.hasNext;
         messageQuery.reverse = true;
-        _context9.n = 21;
+        _context9.n = 20;
         return effects.put(setMessagesHasPrevAC(_secondResult.hasNext));
-      case 21:
-        _context9.n = 22;
+      case 20:
+        _context9.n = 21;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 22:
+      case 21:
         setMessagesToMap(channel.id, result.messages);
         setAllMessages([].concat(result.messages));
         setHasPrevCached(false);
         setHasNextCached(false);
+      case 22:
+        _context9.n = 23;
+        return effects.put(setMessagesHasNextAC(true));
       case 23:
         _context9.n = 24;
-        return effects.put(setMessagesHasNextAC(true));
+        return effects.put(setScrollToMessagesAC(messageId, true, behavior));
       case 24:
         _context9.n = 25;
-        return effects.put(setScrollToMessagesAC(messageId, true, behavior));
-      case 25:
-        _context9.n = 26;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 26:
-        _context9.n = 49;
+      case 25:
+        _context9.n = 46;
         break;
-      case 27:
+      case 26:
         if (!(channel.newMessageCount && channel.lastDisplayedMessageId)) {
-          _context9.n = 40;
+          _context9.n = 39;
           break;
         }
         setMessagesToMap(channel.id, []);
         setAllMessages([]);
         messageQuery.limit = MESSAGES_MAX_LENGTH;
         if (!Number(channel.lastDisplayedMessageId)) {
-          _context9.n = 33;
+          _context9.n = 32;
           break;
         }
-        _context9.n = 28;
+        _context9.n = 27;
         return effects.call(messageQuery.loadNearMessageId, channel.lastDisplayedMessageId);
-      case 28:
+      case 27:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 32;
+          _context9.n = 31;
           break;
         }
         messageQuery.limit = channel.newMessageCount > 25 ? (MESSAGES_MAX_LENGTH - 50) / 2 : MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 29;
+        _context9.n = 28;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 29:
+      case 28:
         _secondResult2 = _context9.v;
         if (!(channel.newMessageCount > 25)) {
-          _context9.n = 31;
+          _context9.n = 30;
           break;
         }
         messageQuery.reverse = false;
-        _context9.n = 30;
+        _context9.n = 29;
         return effects.call(messageQuery.loadNextMessageId, result.messages[result.messages.length - 1].id);
-      case 30:
+      case 29:
         _thirdResult = _context9.v;
         result.messages = [].concat(_secondResult2.messages, result.messages, _thirdResult.messages);
         messageQuery.reverse = true;
-        _context9.n = 32;
+        _context9.n = 31;
         break;
-      case 31:
+      case 30:
         result.messages = [].concat(_secondResult2.messages, result.messages);
-      case 32:
-        _context9.n = 36;
+      case 31:
+        _context9.n = 35;
         break;
-      case 33:
-        _context9.n = 34;
+      case 32:
+        _context9.n = 33;
         return effects.call(messageQuery.loadPrevious);
-      case 34:
+      case 33:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 36;
+          _context9.n = 35;
           break;
         }
         messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 35;
+        _context9.n = 34;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 35:
+      case 34:
         _secondResult3 = _context9.v;
         result.messages = [].concat(_secondResult3.messages, result.messages);
         result.hasNext = _secondResult3.hasNext;
+      case 35:
+        _context9.n = 36;
+        return effects.put(setMessagesHasPrevAC(true));
       case 36:
         _context9.n = 37;
-        return effects.put(setMessagesHasPrevAC(true));
-      case 37:
-        _context9.n = 38;
         return effects.put(setMessagesHasNextAC(channel.lastMessage && result.messages.length > 0 && channel.lastMessage.id !== result.messages[result.messages.length - 1].id));
-      case 38:
-        _pendingMessages = getPendingMessages(channel.id);
-        if (_pendingMessages && _pendingMessages.length) {
-          _messagesMap = {};
-          result.messages.forEach(function (msg) {
-            if (msg.tid) _messagesMap[msg.tid] = true;
-            if (msg.id) _messagesMap[msg.id] = true;
-          });
-          filteredPendingMessages = _pendingMessages.filter(function (msg) {
-            return !(_messagesMap[msg.tid || ''] || _messagesMap[msg.id || '']);
-          });
-          if (filteredPendingMessages.length > 0) {
-            result.messages = [].concat(result.messages, filteredPendingMessages);
-          }
-        }
+      case 37:
         setMessagesToMap(channel.id, result.messages);
         setAllMessages([].concat(result.messages));
-        _context9.n = 39;
+        _context9.n = 38;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 39:
-        _context9.n = 49;
+      case 38:
+        _context9.n = 46;
         break;
-      case 40:
+      case 39:
         setMessagesToMap(channel.id, []);
         setAllMessages([]);
         if (!(cachedMessages && cachedMessages.length)) {
-          _context9.n = 41;
+          _context9.n = 40;
           break;
         }
         setMessagesToMap(channel.id, []);
         setAllMessages([].concat(cachedMessages));
-        _context9.n = 41;
+        _context9.n = 40;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(cachedMessages))));
-      case 41:
+      case 40:
         log.info('load message from server');
-        _context9.n = 42;
+        _context9.n = 41;
         return effects.call(messageQuery.loadPrevious);
-      case 42:
+      case 41:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 44;
+          _context9.n = 43;
           break;
         }
         messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 43;
+        _context9.n = 42;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 43:
+      case 42:
         _secondResult4 = _context9.v;
         result.messages = [].concat(_secondResult4.messages, result.messages);
         result.hasNext = _secondResult4.hasNext;
-      case 44:
+      case 43:
         updatedMessages = [];
         result.messages.forEach(function (msg) {
           var updatedMessage = updateMessageOnMap(channel.id, {
@@ -19413,86 +19354,58 @@ function getMessagesQuery(action) {
           updateMessageOnAllMessages(msg.id, updatedMessage || msg);
           updatedMessages.push(updatedMessage || msg);
         });
-        _context9.n = 45;
-        return effects.select(function (state) {
-          return state.MessageReducer.activeChannelMessages;
-        });
-      case 45:
-        _currentMessagesInState = _context9.v;
-        _messagesMap2 = {};
-        updatedMessages.forEach(function (msg) {
-          if (msg.tid) _messagesMap2[msg.tid] = true;
-          if (msg.id) _messagesMap2[msg.id] = true;
-        });
-        preservedFromRedux = [];
-        _currentMessagesInState.forEach(function (msg) {
-          var alreadyExists = msg.id && _messagesMap2[msg.id] || msg.tid && _messagesMap2[msg.tid];
-          if (!alreadyExists) {
-            var key = msg.id || msg.tid;
-            if (key && !_messagesMap2[key]) {
-              _messagesMap2[key] = true;
-              updatedMessages.push(msg);
-              preservedFromRedux.push(msg);
-            }
-          }
-        });
         setMessagesToMap(channel.id, updatedMessages);
         setAllMessages([].concat(updatedMessages));
-        _context9.n = 46;
+        _context9.n = 44;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(updatedMessages))));
-      case 46:
-        _context9.n = 47;
+      case 44:
+        _context9.n = 45;
         return effects.put(setMessagesHasPrevAC(result.hasNext));
-      case 47:
-        _context9.n = 48;
+      case 45:
+        _context9.n = 46;
         return effects.put(setMessagesHasNextAC(false));
-      case 48:
-        _pendingMessages2 = getPendingMessages(channel.id);
-        if (!(_pendingMessages2 && _pendingMessages2.length)) {
-          _context9.n = 49;
+      case 46:
+        pendingMessages = getPendingMessages(channel.id);
+        if (!(pendingMessages && pendingMessages.length)) {
+          _context9.n = 47;
           break;
         }
-        _messagesMap3 = {};
-        updatedMessages.forEach(function (msg) {
-          if (msg.tid) _messagesMap3[msg.tid] = true;
-          if (msg.id) _messagesMap3[msg.id] = true;
+        _messagesMap = {};
+        result.messages.forEach(function (msg) {
+          _messagesMap[msg.tid || ''] = msg;
         });
-        _filteredPendingMessages = _pendingMessages2.filter(function (msg) {
-          return !(_messagesMap3[msg.tid || ''] || _messagesMap3[msg.id || '']);
+        filteredPendingMessages = pendingMessages.filter(function (msg) {
+          return !_messagesMap[msg.tid || ''];
         });
-        if (!(_filteredPendingMessages.length > 0)) {
+        _context9.n = 47;
+        return effects.put(addMessagesAC(filteredPendingMessages, MESSAGE_LOAD_DIRECTION.NEXT));
+      case 47:
+        _context9.n = 49;
+        break;
+      case 48:
+        if (!channel.isMockChannel) {
           _context9.n = 49;
           break;
         }
         _context9.n = 49;
-        return effects.put(addMessagesAC(_filteredPendingMessages, MESSAGE_LOAD_DIRECTION.NEXT));
+        return effects.put(setMessagesAC([]));
       case 49:
         _context9.n = 51;
         break;
       case 50:
-        if (!channel.isMockChannel) {
-          _context9.n = 51;
-          break;
-        }
-        _context9.n = 51;
-        return effects.put(setMessagesAC([]));
-      case 51:
-        _context9.n = 53;
-        break;
-      case 52:
-        _context9.p = 52;
+        _context9.p = 50;
         _t9 = _context9.v;
         log.error('error in message query', _t9);
-      case 53:
-        _context9.p = 53;
-        _context9.n = 54;
+      case 51:
+        _context9.p = 51;
+        _context9.n = 52;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 54:
-        return _context9.f(53);
-      case 55:
+      case 52:
+        return _context9.f(51);
+      case 53:
         return _context9.a(2);
     }
-  }, _marked7$1, null, [[0, 52, 53, 55]]);
+  }, _marked7$1, null, [[0, 50, 51, 53]]);
 }
 function getMessageQuery(action) {
   var payload, channelId, messageId, channel, messages, fetchedMessage, _t0;
@@ -32429,7 +32342,7 @@ var MessageStatusUpdated = styled__default.span(_templateObject4$m || (_template
   return props.color;
 });
 
-var _templateObject$C, _templateObject2$x, _templateObject3$r, _templateObject4$n, _templateObject5$i, _templateObject6$g, _templateObject7$e, _templateObject8$d;
+var _templateObject$C, _templateObject2$x, _templateObject3$r, _templateObject4$n, _templateObject5$i, _templateObject6$g, _templateObject7$e, _templateObject8$d, _templateObject9$b, _templateObject0$a, _templateObject1$7;
 var validateUrl = function validateUrl(url) {
   try {
     var urlObj = new URL(url);
@@ -32439,10 +32352,37 @@ var validateUrl = function validateUrl(url) {
   }
 };
 var OGMetadata = function OGMetadata(_ref) {
-  var _metadata$og4, _metadata$og4$image, _metadata$og4$image$, _metadata$og5, _metadata$og5$image, _metadata$og5$image$, _metadata$og6, _metadata$og7, _metadata$og7$favicon, _metadata$og8, _metadata$og8$favicon, _metadata$og9, _metadata$og0, _metadata$og1;
+  var _metadata$og7, _metadata$og7$image, _metadata$og7$image$, _metadata$og9, _metadata$og9$favicon, _metadata$og13, _metadata$og14, _metadata$og15;
   var attachments = _ref.attachments,
     state = _ref.state,
     incoming = _ref.incoming,
+    _ref$ogShowUrl = _ref.ogShowUrl,
+    ogShowUrl = _ref$ogShowUrl === void 0 ? false : _ref$ogShowUrl,
+    _ref$ogShowTitle = _ref.ogShowTitle,
+    ogShowTitle = _ref$ogShowTitle === void 0 ? true : _ref$ogShowTitle,
+    _ref$ogShowDescriptio = _ref.ogShowDescription,
+    ogShowDescription = _ref$ogShowDescriptio === void 0 ? true : _ref$ogShowDescriptio,
+    _ref$ogShowFavicon = _ref.ogShowFavicon,
+    ogShowFavicon = _ref$ogShowFavicon === void 0 ? true : _ref$ogShowFavicon,
+    _ref$order = _ref.order,
+    order = _ref$order === void 0 ? {
+      image: 1,
+      title: 2,
+      description: 3,
+      link: 4
+    } : _ref$order,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? 400 : _ref$maxWidth,
+    maxHeight = _ref.maxHeight,
+    ogContainerBorderRadius = _ref.ogContainerBorderRadius,
+    ogContainerPadding = _ref.ogContainerPadding,
+    ogContainerClassName = _ref.ogContainerClassName,
+    _ref$ogContainerShowB = _ref.ogContainerShowBackground,
+    ogContainerShowBackground = _ref$ogContainerShowB === void 0 ? true : _ref$ogContainerShowB,
+    ogContainerBackground = _ref.ogContainerBackground,
+    _ref$infoPadding = _ref.infoPadding,
+    infoPadding = _ref$infoPadding === void 0 ? '0 8px' : _ref$infoPadding,
+    ogContainerMargin = _ref.ogContainerMargin,
     _ref$target = _ref.target,
     target = _ref$target === void 0 ? '_blank' : _ref$target;
   var dispatch = useDispatch();
@@ -32451,7 +32391,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];
+    outgoingMessageBackgroundX = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND_X],
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
   var attachment = React.useMemo(function () {
     return attachments.find(function (attachment) {
       return attachment.type === attachmentTypes.link;
@@ -32459,28 +32400,25 @@ var OGMetadata = function OGMetadata(_ref) {
   }, [attachments]);
   var metadata = React.useMemo(function () {
     return oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url] || null;
-  }, [oGMetadata, attachment === null || attachment === void 0 ? void 0 : attachment.url]);
+  }, [oGMetadata, attachment]);
   var _useState = React.useState(false),
     imageLoadError = _useState[0],
     setImageLoadError = _useState[1];
   var _useState2 = React.useState(false),
-    faviconLoadError = _useState2[0],
-    setFaviconLoadError = _useState2[1];
-  var _useState3 = React.useState(false),
-    shouldAnimate = _useState3[0],
-    setShouldAnimate = _useState3[1];
+    shouldAnimate = _useState2[0],
+    setShouldAnimate = _useState2[1];
   var handleMetadata = React.useCallback(function (metadata) {
     if (metadata) {
       dispatch(setOGMetadataAC(attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata));
     } else {
       dispatch(setOGMetadataAC(attachment === null || attachment === void 0 ? void 0 : attachment.url, null));
     }
-  }, []);
+  }, [dispatch, attachment]);
   var ogMetadataQueryBuilder = React.useCallback(function (url) {
     try {
       var client = getClient();
       var _temp3 = function () {
-        if (client) {
+        if (client && client.connectionState === CONNECTION_STATUS.CONNECTED) {
           var _temp2 = _catch(function () {
             var queryBuilder = new client.MessageLinkOGQueryBuilder(url);
             return Promise.resolve(queryBuilder.build()).then(function (query) {
@@ -32527,7 +32465,7 @@ var OGMetadata = function OGMetadata(_ref) {
               });
             });
           }, function () {
-            console.log('Failed to fetch OG metadata');
+            console.log('Failed to fetch OG metadata', url);
             handleMetadata(null);
           });
           if (_temp2 && _temp2.then) return _temp2.then(function () {});
@@ -32539,7 +32477,7 @@ var OGMetadata = function OGMetadata(_ref) {
     } catch (e) {
       return Promise.reject(e);
     }
-  }, []);
+  }, [handleMetadata]);
   React.useEffect(function () {
     if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url && !metadata) {
       setShouldAnimate(true);
@@ -32560,7 +32498,7 @@ var OGMetadata = function OGMetadata(_ref) {
         });
       }
     }
-  }, [attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata]);
+  }, [attachment, metadata, handleMetadata, ogMetadataQueryBuilder]);
   var ogUrl = React.useMemo(function () {
     var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
     var urlObj = validateUrl(url);
@@ -32568,132 +32506,206 @@ var OGMetadata = function OGMetadata(_ref) {
       return urlObj.hostname;
     }
     return url;
-  }, [attachment === null || attachment === void 0 ? void 0 : attachment.url]);
+  }, [attachment]);
   var showOGMetadata = React.useMemo(function () {
-    var _metadata$og2, _metadata$og3;
-    return state !== 'deleted' && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og2 = metadata.og) === null || _metadata$og2 === void 0 ? void 0 : _metadata$og2.title) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og3 = metadata.og) === null || _metadata$og3 === void 0 ? void 0 : _metadata$og3.description) && metadata;
+    var _metadata$og2, _metadata$og3, _metadata$og4, _metadata$og4$image, _metadata$og4$image$, _metadata$og5, _metadata$og5$favicon;
+    return state !== 'deleted' && ((metadata === null || metadata === void 0 ? void 0 : (_metadata$og2 = metadata.og) === null || _metadata$og2 === void 0 ? void 0 : _metadata$og2.title) || (metadata === null || metadata === void 0 ? void 0 : (_metadata$og3 = metadata.og) === null || _metadata$og3 === void 0 ? void 0 : _metadata$og3.description) || (metadata === null || metadata === void 0 ? void 0 : (_metadata$og4 = metadata.og) === null || _metadata$og4 === void 0 ? void 0 : (_metadata$og4$image = _metadata$og4.image) === null || _metadata$og4$image === void 0 ? void 0 : (_metadata$og4$image$ = _metadata$og4$image[0]) === null || _metadata$og4$image$ === void 0 ? void 0 : _metadata$og4$image$.url) || (metadata === null || metadata === void 0 ? void 0 : (_metadata$og5 = metadata.og) === null || _metadata$og5 === void 0 ? void 0 : (_metadata$og5$favicon = _metadata$og5.favicon) === null || _metadata$og5$favicon === void 0 ? void 0 : _metadata$og5$favicon.url)) && metadata;
   }, [state, metadata]);
   var calculatedImageHeight = React.useMemo(function () {
-    if (!(metadata !== null && metadata !== void 0 && metadata.imageWidth)) {
+    if (!(metadata !== null && metadata !== void 0 && metadata.imageWidth) || !(metadata !== null && metadata !== void 0 && metadata.imageHeight)) {
       return 0;
     }
-    return (metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight) / ((metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth) / 400);
-  }, [metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth, metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight]);
-  return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
+    return (metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight) / ((metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth) / maxWidth);
+  }, [metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth, metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight, maxWidth]);
+  var hasImage = React.useMemo(function () {
+    var _metadata$og6, _metadata$og6$image, _metadata$og6$image$;
+    return (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) && !imageLoadError;
+  }, [metadata === null || metadata === void 0 ? void 0 : (_metadata$og7 = metadata.og) === null || _metadata$og7 === void 0 ? void 0 : (_metadata$og7$image = _metadata$og7.image) === null || _metadata$og7$image === void 0 ? void 0 : (_metadata$og7$image$ = _metadata$og7$image[0]) === null || _metadata$og7$image$ === void 0 ? void 0 : _metadata$og7$image$.url, imageLoadError]);
+  var faviconUrl = React.useMemo(function () {
+    var _metadata$og8, _metadata$og8$favicon;
+    return metadata === null || metadata === void 0 ? void 0 : (_metadata$og8 = metadata.og) === null || _metadata$og8 === void 0 ? void 0 : (_metadata$og8$favicon = _metadata$og8.favicon) === null || _metadata$og8$favicon === void 0 ? void 0 : _metadata$og8$favicon.url;
+  }, [metadata === null || metadata === void 0 ? void 0 : (_metadata$og9 = metadata.og) === null || _metadata$og9 === void 0 ? void 0 : (_metadata$og9$favicon = _metadata$og9.favicon) === null || _metadata$og9$favicon === void 0 ? void 0 : _metadata$og9$favicon.url]);
+  var resolvedOrder = React.useMemo(function () {
+    return order || {
+      image: 1,
+      title: 2,
+      description: 3,
+      link: 4
+    };
+  }, [order]);
+  var elements = React.useMemo(function () {
+    var _resolvedOrder$image, _metadata$og0, _metadata$og0$image, _metadata$og0$image$, _resolvedOrder$title, _metadata$og1, _metadata$og10, _resolvedOrder$descri, _metadata$og11, _metadata$og12, _resolvedOrder$link;
+    return [hasImage ? {
+      key: 'image',
+      order: (_resolvedOrder$image = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.image) != null ? _resolvedOrder$image : 1,
+      render: (/*#__PURE__*/React__default.createElement(ImageContainer, {
+        showOGMetadata: !!showOGMetadata,
+        containerWidth: maxWidth,
+        containerHeight: calculatedImageHeight,
+        shouldAnimate: shouldAnimate,
+        maxWidth: maxWidth,
+        maxHeight: maxHeight || calculatedImageHeight
+      }, /*#__PURE__*/React__default.createElement(Img, {
+        src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og0 = metadata.og) === null || _metadata$og0 === void 0 ? void 0 : (_metadata$og0$image = _metadata$og0.image) === null || _metadata$og0$image === void 0 ? void 0 : (_metadata$og0$image$ = _metadata$og0$image[0]) === null || _metadata$og0$image$ === void 0 ? void 0 : _metadata$og0$image$.url,
+        alt: 'OG image',
+        shouldAnimate: shouldAnimate
+      })))
+    } : null, {
+      key: 'title',
+      order: (_resolvedOrder$title = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.title) != null ? _resolvedOrder$title : 2,
+      render: ogShowTitle && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : _metadata$og1.title) && (/*#__PURE__*/React__default.createElement(Title$2, {
+        maxWidth: maxWidth,
+        shouldAnimate: shouldAnimate,
+        padding: infoPadding
+      }, /*#__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)))
+    }, {
+      key: 'description',
+      order: (_resolvedOrder$descri = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.description) != null ? _resolvedOrder$descri : 3,
+      render: ogShowDescription && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og11 = metadata.og) === null || _metadata$og11 === void 0 ? void 0 : _metadata$og11.description) && (/*#__PURE__*/React__default.createElement(Desc, {
+        maxWidth: maxWidth,
+        shouldAnimate: shouldAnimate,
+        color: textSecondary,
+        padding: infoPadding
+      }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : _metadata$og12.description))
+    }, {
+      key: 'link',
+      order: (_resolvedOrder$link = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.link) != null ? _resolvedOrder$link : 4,
+      render: ogShowUrl && (/*#__PURE__*/React__default.createElement(Url, {
+        maxWidth: maxWidth,
+        shouldAnimate: shouldAnimate,
+        padding: infoPadding
+      }, ogUrl))
+    }].filter(function (el) {
+      return !!el;
+    }).sort(function (a, b) {
+      var _a$order, _b$order;
+      return ((_a$order = a.order) != null ? _a$order : 0) - ((_b$order = b.order) != null ? _b$order : 0);
+    });
+  }, [hasImage, resolvedOrder, showOGMetadata, maxWidth, calculatedImageHeight, maxHeight, metadata === null || metadata === void 0 ? void 0 : (_metadata$og13 = metadata.og) === null || _metadata$og13 === void 0 ? void 0 : _metadata$og13.image, shouldAnimate, ogShowTitle, metadata === null || metadata === void 0 ? void 0 : (_metadata$og14 = metadata.og) === null || _metadata$og14 === void 0 ? void 0 : _metadata$og14.title, infoPadding, ogShowDescription, metadata === null || metadata === void 0 ? void 0 : (_metadata$og15 = metadata.og) === null || _metadata$og15 === void 0 ? void 0 : _metadata$og15.description, textSecondary, ogShowUrl, ogUrl]);
+  var textContent = React.useMemo(function () {
+    return /*#__PURE__*/React__default.createElement(OGText, {
+      shouldAnimate: shouldAnimate,
+      margin: ogContainerShowBackground
+    }, elements.filter(function (el) {
+      return el.key !== 'image';
+    }).map(function (el) {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+        key: el.key
+      }, el.render);
+    }));
+  }, [elements, shouldAnimate, ogContainerShowBackground]);
+  var content = React.useMemo(function () {
+    return hasImage ? (/*#__PURE__*/React__default.createElement(OGText, {
+      shouldAnimate: shouldAnimate,
+      margin: ogContainerShowBackground
+    }, elements.map(function (el) {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+        key: el.key
+      }, el.render);
+    }))) : ogShowFavicon && faviconUrl ? (/*#__PURE__*/React__default.createElement(OGRow, null, /*#__PURE__*/React__default.createElement(OGTextWrapper, null, textContent), /*#__PURE__*/React__default.createElement(FaviconContainer, {
+      "aria-hidden": 'true'
+    }, /*#__PURE__*/React__default.createElement(FaviconImg, {
+      src: faviconUrl,
+      alt: ''
+    })))) : textContent;
+  }, [hasImage, elements, shouldAnimate, ogContainerShowBackground, ogShowFavicon, faviconUrl, textContent]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: 'ogmetadata-container'
+  }, /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
     showOGMetadata: !!showOGMetadata,
-    bgColor: incoming ? incomingMessageBackgroundX : outgoingMessageBackgroundX
-  }, /*#__PURE__*/React__default.createElement("div", {
-    onClick: function onClick() {
-      window.open(attachment === null || attachment === void 0 ? void 0 : attachment.url, target);
-    },
-    style: {
-      width: showOGMetadata ? '100%' : 'auto'
-    }
-  }, /*#__PURE__*/React__default.createElement(ImageContainer, {
-    showOGMetadata: !!showOGMetadata && !imageLoadError,
-    containerWidth: 400,
-    containerHeight: calculatedImageHeight,
-    shouldAnimate: shouldAnimate
-  }, metadata !== null && metadata !== void 0 && (_metadata$og4 = metadata.og) !== null && _metadata$og4 !== void 0 && (_metadata$og4$image = _metadata$og4.image) !== null && _metadata$og4$image !== void 0 && (_metadata$og4$image$ = _metadata$og4$image[0]) !== null && _metadata$og4$image$ !== void 0 && _metadata$og4$image$.url && !imageLoadError ? (/*#__PURE__*/React__default.createElement(Img, {
-    src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og5 = metadata.og) === null || _metadata$og5 === void 0 ? void 0 : (_metadata$og5$image = _metadata$og5.image) === null || _metadata$og5$image === void 0 ? void 0 : (_metadata$og5$image$ = _metadata$og5$image[0]) === null || _metadata$og5$image$ === void 0 ? void 0 : _metadata$og5$image$.url,
-    alt: 'OG metadata image',
-    imageWidth: 400,
-    imageHeight: calculatedImageHeight,
-    shouldAnimate: shouldAnimate
-  })) : null), showOGMetadata ? (/*#__PURE__*/React__default.createElement(OGText, {
-    shouldAnimate: shouldAnimate
-  }, /*#__PURE__*/React__default.createElement(Url, {
-    maxWidth: 400,
-    shouldAnimate: shouldAnimate
-  }, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og6 = metadata.og) !== null && _metadata$og6 !== void 0 && _metadata$og6.title ? (/*#__PURE__*/React__default.createElement(Title$2, {
-    maxWidth: 400,
-    shouldAnimate: shouldAnimate
-  }, metadata !== null && metadata !== void 0 && (_metadata$og7 = metadata.og) !== null && _metadata$og7 !== void 0 && (_metadata$og7$favicon = _metadata$og7.favicon) !== null && _metadata$og7$favicon !== void 0 && _metadata$og7$favicon.url && !faviconLoadError ? (/*#__PURE__*/React__default.createElement(Favicon, {
-    shouldAnimate: shouldAnimate,
-    src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og8 = metadata.og) === null || _metadata$og8 === void 0 ? void 0 : (_metadata$og8$favicon = _metadata$og8.favicon) === null || _metadata$og8$favicon === void 0 ? void 0 : _metadata$og8$favicon.url,
-    onLoad: function onLoad() {
-      return setFaviconLoadError(false);
-    },
-    onError: function onError() {
-      dispatch(updateOGMetadataAC(attachment === null || attachment === void 0 ? void 0 : attachment.url, _extends({}, metadata, {
-        og: _extends({}, metadata === null || metadata === void 0 ? void 0 : metadata.og, {
-          favicon: {
-            url: ''
-          }
-        })
-      })));
-      setFaviconLoadError(true);
-    }
-  })) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og9 = metadata.og) === null || _metadata$og9 === void 0 ? void 0 : _metadata$og9.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og0 = metadata.og) !== null && _metadata$og0 !== void 0 && _metadata$og0.description ? (/*#__PURE__*/React__default.createElement(Desc, {
-    maxWidth: 400,
-    shouldAnimate: shouldAnimate
-  }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : _metadata$og1.description)) : null)) : null));
-};
-var OGMetadataContainer = styled__default.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  min-width: inherit;\n  max-width: inherit;\n  display: grid;\n  grid-template-columns: 1fr;\n  background-color: ", ";\n  border-radius: 6px;\n  margin-bottom: 0.4rem;\n  margin: 0 auto;\n  margin-bottom: ", ";\n  &:hover {\n    opacity: 0.9;\n    cursor: pointer;\n  }\n"])), function (_ref2) {
-  var bgColor = _ref2.bgColor;
-  return bgColor;
+    bgColor: incoming ? incomingMessageBackgroundX : outgoingMessageBackgroundX,
+    showBackground: ogContainerShowBackground,
+    customBg: ogContainerBackground,
+    borderRadius: ogContainerBorderRadius,
+    padding: ogContainerPadding,
+    className: ogContainerClassName,
+    containerMargin: ogContainerMargin,
+    as: "a",
+    href: attachment === null || attachment === void 0 ? void 0 : attachment.url,
+    target: target,
+    rel: target === '_blank' ? 'noopener noreferrer' : undefined
+  }, 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__default.div(_templateObject$C || (_templateObject$C = _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';
 }, function (_ref3) {
-  var showOGMetadata = _ref3.showOGMetadata;
-  return showOGMetadata ? '0.8rem' : '0';
-});
-var ImageContainer = styled__default.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n\n  opacity: ", ";\n  overflow: hidden;\n  margin: 0 auto;\n  padding: ", ";\n  ", "\n"])), function (_ref4) {
-  var containerWidth = _ref4.containerWidth;
-  return containerWidth ? "\n    max-width: " + (containerWidth + "px") + ";\n  " : "\n    max-width: 100%;\n    width: 100%;\n  ";
+  var borderRadius = _ref3.borderRadius;
+  return borderRadius !== undefined ? borderRadius : '8px';
+}, function (_ref4) {
+  var containerMargin = _ref4.containerMargin;
+  return containerMargin != null ? containerMargin : '0.8rem auto 0';
 }, function (_ref5) {
-  var containerHeight = _ref5.containerHeight,
-    showOGMetadata = _ref5.showOGMetadata;
-  return containerHeight ? "\n    max-height: " + (containerHeight + "px") + ";\n    height: " + (showOGMetadata ? containerHeight + "px" : '0') + ";\n  " : "\n      height: 0;\n  ";
+  var showOGMetadata = _ref5.showOGMetadata;
+  return showOGMetadata ? '0.4rem' : '0';
 }, function (_ref6) {
-  var showOGMetadata = _ref6.showOGMetadata,
-    containerHeight = _ref6.containerHeight;
-  return showOGMetadata && containerHeight ? 1 : 0;
-}, function (_ref7) {
-  var showOGMetadata = _ref7.showOGMetadata,
-    containerHeight = _ref7.containerHeight;
-  return showOGMetadata && containerHeight ? '4px' : '0';
-}, function (_ref8) {
-  var shouldAnimate = _ref8.shouldAnimate;
-  return shouldAnimate && "\n    transition: height 0.2s ease;\n  ";
-});
-var OGText = styled__default.div(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n  padding: 0.5rem;\n  margin: 0;\n  ", "\n"])), function (_ref9) {
-  var shouldAnimate = _ref9.shouldAnimate;
-  return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
+  var padding = _ref6.padding;
+  return padding != null ? padding : '0';
 });
-var Url = styled__default.p(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n  font-weight: normal;\n  font-size: 13px;\n  padding: 0;\n  margin: 0 0 12px 0;\n  color: gray;\n  ", "\n  ", "\n"])), function (_ref0) {
-  var maxWidth = _ref0.maxWidth;
-  return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
+var ImageContainer = styled__default.div(_templateObject2$x || (_templateObject2$x = _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;
+  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,
+    containerHeight = _ref9.containerHeight;
+  return shouldAnimate && showOGMetadata && containerHeight && "\n    animation: expandHeight 0.3s ease-out forwards;\n  ";
+});
+var OGText = styled__default.div(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  ", "\n  ", ";\n"])), sharedKeyframes, function (_ref0) {
+  var shouldAnimate = _ref0.shouldAnimate;
+  return shouldAnimate && "\n    animation: fadeInSlideUp 0.3s ease-out forwards;\n  ";
 }, function (_ref1) {
-  var shouldAnimate = _ref1.shouldAnimate;
-  return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
+  var margin = _ref1.margin;
+  return margin ? '12px' : '0';
 });
-var Title$2 = styled__default.p(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n  font-weight: bold;\n  font-size: 13px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  ", "\n  ", "\n"])), function (_ref10) {
-  var maxWidth = _ref10.maxWidth;
-  return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
+var Title$2 = styled__default.p(_templateObject4$n || (_templateObject4$n = _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;
+  return padding != null ? padding : '0';
 }, function (_ref11) {
-  var shouldAnimate = _ref11.shouldAnimate;
-  return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
-});
-var Desc = styled__default.p(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["\n  font-weight: normal;\n  font-size: 13px;\n  padding: 0;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  ", "\n  ", "\n"])), function (_ref12) {
-  var maxWidth = _ref12.maxWidth;
-  return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
-}, function (_ref13) {
-  var shouldAnimate = _ref13.shouldAnimate;
-  return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
-});
-var Img = styled__default.img(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  object-fit: cover;\n  ", "\n"])), function (_ref14) {
-  var imageWidth = _ref14.imageWidth;
-  return imageWidth && "\n    max-width: 100%;\n    width: " + ("calc(" + imageWidth + "px - 8px)") + ";\n  ";
+  var maxWidth = _ref11.maxWidth;
+  return maxWidth && "\n    max-width: " + maxWidth + "px;\n  ";
+}, function (_ref12) {
+  var shouldAnimate = _ref12.shouldAnimate;
+  return shouldAnimate && "\n    animation: fadeInSlideUp 0.3s ease-out 0.1s backwards;\n  ";
+});
+var Desc = styled__default.p(_templateObject5$i || (_templateObject5$i = _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;
+  return padding != null ? padding : '0';
+}, function (_ref14) {
+  var color = _ref14.color;
+  return color;
 }, function (_ref15) {
-  var imageHeight = _ref15.imageHeight;
-  return imageHeight && "\n    max-height: " + (imageHeight + "px") + ";\n    min-height: " + (imageHeight + "px") + ";\n    height: " + (imageHeight + "px") + ";\n  ";
+  var maxWidth = _ref15.maxWidth;
+  return maxWidth && "\n    max-width: " + maxWidth + "px;\n  ";
 }, function (_ref16) {
   var shouldAnimate = _ref16.shouldAnimate;
-  return shouldAnimate && "\n    transition: height 0.2s ease;\n  ";
-});
-var Favicon = styled__default.img(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 24px;\n  height: 24px;\n  object-fit: contain;\n  margin-right: 4px;\n"])), function (_ref17) {
-  var shouldAnimate = _ref17.shouldAnimate;
-  return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
-});
+  return shouldAnimate && "\n    animation: fadeInSlideUp 0.3s ease-out 0.2s backwards;\n  ";
+});
+var Url = styled__default.p(_templateObject6$g || (_templateObject6$g = _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;
+  return padding != null ? padding : '0';
+}, function (_ref18) {
+  var maxWidth = _ref18.maxWidth;
+  return maxWidth && "\n    max-width: " + maxWidth + "px;\n  ";
+}, function (_ref19) {
+  var shouldAnimate = _ref19.shouldAnimate;
+  return shouldAnimate && "\n    animation: fadeInSlideUp 0.3s ease-out 0.3s backwards;\n  ";
+});
+var Img = styled__default.img(_templateObject7$e || (_templateObject7$e = _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;
+  return shouldAnimate && "\n    animation: fadeIn 0.4s ease-out forwards;\n  ";
+});
+var OGRow = styled__default.div(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n"])));
+var OGTextWrapper = styled__default.div(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n  flex: 1 1 auto;\n"])));
+var FaviconContainer = styled__default.div(_templateObject0$a || (_templateObject0$a = _taggedTemplateLiteralLoose(["\n  width: 52px;\n  height: 52px;\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 12px;\n  flex: 0 0 52px;\n"])));
+var FaviconImg = styled__default.img(_templateObject1$7 || (_templateObject1$7 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n"])));
 
 var _templateObject$D, _templateObject2$y, _templateObject3$s, _templateObject4$o, _templateObject5$j;
 var MessageBody = function MessageBody(_ref) {
@@ -32838,6 +32850,7 @@ var MessageBody = function MessageBody(_ref) {
     messageTextRef = _ref.messageTextRef,
     handleOpenUserProfile = _ref.handleOpenUserProfile,
     shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention,
+    ogMetadataProps = _ref.ogMetadataProps,
     unsupportedMessage = _ref.unsupportedMessage;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
@@ -32885,6 +32898,10 @@ var MessageBody = function MessageBody(_ref) {
   var linkAttachment = message.attachments.find(function (a) {
     return a.type === attachmentTypes.link;
   });
+  var ogContainerOrder = ogMetadataProps && ogMetadataProps.ogLayoutOrder || 'og-first';
+  var ogContainerFirst = React.useMemo(function () {
+    return ogContainerOrder === 'og-first';
+  }, [ogContainerOrder]);
   var messageOwnerIsNotCurrentUser = !!(message.user && message.user.id !== user.id && message.user.id);
   var mediaAttachment = React.useMemo(function () {
     return withAttachments && message.attachments.find(function (attachment) {
@@ -33071,10 +33088,28 @@ var MessageBody = function MessageBody(_ref) {
     linkColor: linkColor,
     unsupportedMessage: unsupportedMessage,
     unsupportedMessageColor: textSecondary
-  }, linkAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
+  }, ogContainerFirst && linkAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
+    maxWidth: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400,
+    maxHeight: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxHeight,
     attachments: [linkAttachment],
     state: message.state,
-    incoming: message.incoming
+    incoming: message.incoming,
+    ogShowUrl: ogMetadataProps ? ogMetadataProps.ogShowUrl : undefined,
+    ogShowTitle: ogMetadataProps ? ogMetadataProps.ogShowTitle : undefined,
+    ogShowDescription: ogMetadataProps ? ogMetadataProps.ogShowDescription : undefined,
+    ogShowFavicon: ogMetadataProps ? ogMetadataProps.ogShowFavicon : undefined,
+    order: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.order) || {
+      image: 3,
+      title: 1,
+      description: 2,
+      link: 4
+    },
+    ogContainerBorderRadius: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerBorderRadius,
+    ogContainerPadding: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerPadding,
+    ogContainerClassName: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerClassName,
+    ogContainerShowBackground: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerShowBackground,
+    ogContainerBackground: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerBackground,
+    infoPadding: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.infoPadding
   })), /*#__PURE__*/React__default.createElement("span", {
     ref: messageTextRef
   }, MessageTextFormat({
@@ -33089,7 +33124,29 @@ var MessageBody = function MessageBody(_ref) {
     unsupportedMessage: unsupportedMessage
   })), !withAttachments && message.state === MESSAGE_STATUS.DELETE ? (/*#__PURE__*/React__default.createElement(MessageStatusDeleted$1, {
     color: textSecondary
-  }, " Message was deleted. ")) : '', messageStatusAndTimePosition === 'onMessage' && !notLinkAttachment && (messageStatusVisible || messageTimeVisible) ? (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
+  }, " Message was deleted. ")) : '', !ogContainerFirst && linkAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
+    maxWidth: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400,
+    maxHeight: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxHeight,
+    attachments: [linkAttachment],
+    state: message.state,
+    incoming: message.incoming,
+    ogShowUrl: ogMetadataProps ? ogMetadataProps.ogShowUrl : undefined,
+    ogShowTitle: ogMetadataProps ? ogMetadataProps.ogShowTitle : undefined,
+    ogShowDescription: ogMetadataProps ? ogMetadataProps.ogShowDescription : undefined,
+    ogShowFavicon: ogMetadataProps ? ogMetadataProps.ogShowFavicon : undefined,
+    order: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.order) || {
+      image: 1,
+      title: 2,
+      description: 3,
+      link: 4
+    },
+    ogContainerBorderRadius: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerBorderRadius,
+    ogContainerPadding: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerPadding,
+    ogContainerClassName: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerClassName,
+    ogContainerShowBackground: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerShowBackground,
+    ogContainerBackground: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerBackground,
+    infoPadding: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.infoPadding
+  })), messageStatusAndTimePosition === 'onMessage' && !notLinkAttachment && (messageStatusVisible || messageTimeVisible) ? (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
     message: message,
     showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
     messageStatusDisplayingType: messageStatusDisplayingType,
@@ -33173,9 +33230,10 @@ var MessageBody = function MessageBody(_ref) {
   }))));
 };
 var MessageBody$1 = /*#__PURE__*/React__default.memo(MessageBody, function (prevProps, nextProps) {
-  return !!(prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.prevMessage === nextProps.prevMessage && prevProps.nextMessage === nextProps.nextMessage && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.contactsMap === nextProps.contactsMap && prevProps.connectionStatus === nextProps.connectionStatus && prevProps.openedMessageMenuId === nextProps.openedMessageMenuId && prevProps.ownMessageOnRightSide === nextProps.ownMessageOnRightSide && prevProps.showSenderNameOnDirectChannel === nextProps.showSenderNameOnDirectChannel && prevProps.showSenderNameOnGroupChannel === nextProps.showSenderNameOnGroupChannel && prevProps.showSenderNameOnOwnMessages === nextProps.showSenderNameOnOwnMessages && prevProps.messageStatusAndTimePosition === nextProps.messageStatusAndTimePosition && prevProps.messageStatusDisplayingType === nextProps.messageStatusDisplayingType && prevProps.outgoingMessageStyles === nextProps.outgoingMessageStyles && prevProps.incomingMessageStyles === nextProps.incomingMessageStyles && prevProps.ownRepliedMessageBackground === nextProps.ownRepliedMessageBackground && prevProps.incomingRepliedMessageBackground === nextProps.incomingRepliedMessageBackground && prevProps.showMessageStatus === nextProps.showMessageStatus && prevProps.showMessageTimeAndStatusOnlyOnHover === nextProps.showMessageTimeAndStatusOnlyOnHover && prevProps.showMessageTime === nextProps.showMessageTime && prevProps.showMessageStatusForEachMessage === nextProps.showMessageStatusForEachMessage && prevProps.showMessageTimeForEachMessage === nextProps.showMessageTimeForEachMessage && prevProps.messageReaction === nextProps.messageReaction && prevProps.editMessage === nextProps.editMessage && prevProps.copyMessage === nextProps.copyMessage && prevProps.replyMessage === nextProps.replyMessage && prevProps.replyMessageInThread === nextProps.replyMessageInThread && prevProps.forwardMessage === nextProps.forwardMessage && prevProps.deleteMessage === nextProps.deleteMessage && prevProps.selectMessage === nextProps.selectMessage && prevProps.allowEditDeleteIncomingMessage === nextProps.allowEditDeleteIncomingMessage && prevProps.reportMessage === nextProps.reportMessage && prevProps.reactionIcon === nextProps.reactionIcon && prevProps.editIcon === nextProps.editIcon && prevProps.copyIcon === nextProps.copyIcon && prevProps.replyIcon === nextProps.replyIcon && prevProps.replyInThreadIcon === nextProps.replyInThreadIcon && prevProps.forwardIcon === nextProps.forwardIcon && prevProps.deleteIcon === nextProps.deleteIcon && prevProps.selectIcon === nextProps.selectIcon && prevProps.starIcon === nextProps.starIcon && prevProps.staredIcon === nextProps.staredIcon && prevProps.reportIcon === nextProps.reportIcon && prevProps.fixEmojiCategoriesTitleOnTop === nextProps.fixEmojiCategoriesTitleOnTop && prevProps.emojisCategoryIconsPosition === nextProps.emojisCategoryIconsPosition && prevProps.emojisContainerBorderRadius === nextProps.emojisContainerBorderRadius && prevProps.reactionIconOrder === nextProps.reactionIconOrder && prevProps.editIconOrder === nextProps.editIconOrder && prevProps.copyIconOrder === nextProps.copyIconOrder && prevProps.replyIconOrder === nextProps.replyIconOrder && prevProps.replyInThreadIconOrder === nextProps.replyInThreadIconOrder && prevProps.forwardIconOrder === nextProps.forwardIconOrder && prevProps.deleteIconOrder === nextProps.deleteIconOrder && prevProps.selectIconOrder === nextProps.selectIconOrder && prevProps.starIconOrder === nextProps.starIconOrder && prevProps.reportIconOrder === nextProps.reportIconOrder && prevProps.reactionIconTooltipText === nextProps.reactionIconTooltipText && prevProps.editIconTooltipText === nextProps.editIconTooltipText && prevProps.copyIconTooltipText === nextProps.copyIconTooltipText && prevProps.replyIconTooltipText === nextProps.replyIconTooltipText && prevProps.replyInThreadIconTooltipText === nextProps.replyInThreadIconTooltipText && prevProps.forwardIconTooltipText === nextProps.forwardIconTooltipText && prevProps.deleteIconTooltipText === nextProps.deleteIconTooltipText && prevProps.selectIconTooltipText === nextProps.selectIconTooltipText && prevProps.starIconTooltipText === nextProps.starIconTooltipText && prevProps.reportIconTooltipText === nextProps.reportIconTooltipText && prevProps.messageActionIconsColor === nextProps.messageActionIconsColor && prevProps.inlineReactionIcon === nextProps.inlineReactionIcon && prevProps.messageStatusSize === nextProps.messageStatusSize && prevProps.messageStatusColor === nextProps.messageStatusColor && prevProps.messageReadStatusColor === nextProps.messageReadStatusColor && prevProps.messageStateFontSize === nextProps.messageStateFontSize && prevProps.messageStateColor === nextProps.messageStateColor && prevProps.messageTimeFontSize === nextProps.messageTimeFontSize && prevProps.messageTimeColor === nextProps.messageTimeColor && prevProps.messageStatusAndTimeLineHeight === nextProps.messageStatusAndTimeLineHeight && prevProps.fileAttachmentsBoxWidth === nextProps.fileAttachmentsBoxWidth && prevProps.fileAttachmentsBoxBackground === nextProps.fileAttachmentsBoxBackground && prevProps.fileAttachmentsBoxBorder === nextProps.fileAttachmentsBoxBorder && prevProps.fileAttachmentsTitleColor === nextProps.fileAttachmentsTitleColor && prevProps.fileAttachmentsSizeColor === nextProps.fileAttachmentsSizeColor && prevProps.fileAttachmentsIcon === nextProps.fileAttachmentsIcon && prevProps.imageAttachmentMaxWidth === nextProps.imageAttachmentMaxWidth && prevProps.imageAttachmentMaxHeight === nextProps.imageAttachmentMaxHeight && prevProps.videoAttachmentMaxWidth === nextProps.videoAttachmentMaxWidth && prevProps.videoAttachmentMaxHeight === nextProps.videoAttachmentMaxHeight && prevProps.theme === nextProps.theme && prevProps.messageTextFontSize === nextProps.messageTextFontSize && prevProps.messageTextLineHeight === nextProps.messageTextLineHeight && prevProps.messageActionsShow === nextProps.messageActionsShow && prevProps.emojisPopupOpen === nextProps.emojisPopupOpen && prevProps.emojisPopupPosition === nextProps.emojisPopupPosition && prevProps.frequentlyEmojisOpen === nextProps.frequentlyEmojisOpen);
+  var _prevProps$ogMetadata, _nextProps$ogMetadata, _prevProps$ogMetadata2, _nextProps$ogMetadata2, _prevProps$ogMetadata3, _nextProps$ogMetadata3, _prevProps$ogMetadata4, _nextProps$ogMetadata4, _prevProps$ogMetadata5, _nextProps$ogMetadata5, _prevProps$ogMetadata6, _nextProps$ogMetadata6;
+  return !!(prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.prevMessage === nextProps.prevMessage && prevProps.nextMessage === nextProps.nextMessage && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.contactsMap === nextProps.contactsMap && prevProps.connectionStatus === nextProps.connectionStatus && prevProps.openedMessageMenuId === nextProps.openedMessageMenuId && prevProps.ownMessageOnRightSide === nextProps.ownMessageOnRightSide && prevProps.showSenderNameOnDirectChannel === nextProps.showSenderNameOnDirectChannel && prevProps.showSenderNameOnGroupChannel === nextProps.showSenderNameOnGroupChannel && prevProps.showSenderNameOnOwnMessages === nextProps.showSenderNameOnOwnMessages && prevProps.messageStatusAndTimePosition === nextProps.messageStatusAndTimePosition && prevProps.messageStatusDisplayingType === nextProps.messageStatusDisplayingType && prevProps.outgoingMessageStyles === nextProps.outgoingMessageStyles && prevProps.incomingMessageStyles === nextProps.incomingMessageStyles && prevProps.ownRepliedMessageBackground === nextProps.ownRepliedMessageBackground && prevProps.incomingRepliedMessageBackground === nextProps.incomingRepliedMessageBackground && prevProps.showMessageStatus === nextProps.showMessageStatus && prevProps.showMessageTimeAndStatusOnlyOnHover === nextProps.showMessageTimeAndStatusOnlyOnHover && prevProps.showMessageTime === nextProps.showMessageTime && prevProps.showMessageStatusForEachMessage === nextProps.showMessageStatusForEachMessage && prevProps.showMessageTimeForEachMessage === nextProps.showMessageTimeForEachMessage && prevProps.messageReaction === nextProps.messageReaction && prevProps.editMessage === nextProps.editMessage && prevProps.copyMessage === nextProps.copyMessage && prevProps.replyMessage === nextProps.replyMessage && prevProps.replyMessageInThread === nextProps.replyMessageInThread && prevProps.forwardMessage === nextProps.forwardMessage && prevProps.deleteMessage === nextProps.deleteMessage && prevProps.selectMessage === nextProps.selectMessage && prevProps.allowEditDeleteIncomingMessage === nextProps.allowEditDeleteIncomingMessage && prevProps.reportMessage === nextProps.reportMessage && prevProps.reactionIcon === nextProps.reactionIcon && prevProps.editIcon === nextProps.editIcon && prevProps.copyIcon === nextProps.copyIcon && prevProps.replyIcon === nextProps.replyIcon && prevProps.replyInThreadIcon === nextProps.replyInThreadIcon && prevProps.forwardIcon === nextProps.forwardIcon && prevProps.deleteIcon === nextProps.deleteIcon && prevProps.selectIcon === nextProps.selectIcon && prevProps.starIcon === nextProps.starIcon && prevProps.staredIcon === nextProps.staredIcon && prevProps.reportIcon === nextProps.reportIcon && prevProps.fixEmojiCategoriesTitleOnTop === nextProps.fixEmojiCategoriesTitleOnTop && prevProps.emojisCategoryIconsPosition === nextProps.emojisCategoryIconsPosition && prevProps.emojisContainerBorderRadius === nextProps.emojisContainerBorderRadius && prevProps.reactionIconOrder === nextProps.reactionIconOrder && prevProps.editIconOrder === nextProps.editIconOrder && prevProps.copyIconOrder === nextProps.copyIconOrder && prevProps.replyIconOrder === nextProps.replyIconOrder && prevProps.replyInThreadIconOrder === nextProps.replyInThreadIconOrder && prevProps.forwardIconOrder === nextProps.forwardIconOrder && prevProps.deleteIconOrder === nextProps.deleteIconOrder && prevProps.selectIconOrder === nextProps.selectIconOrder && prevProps.starIconOrder === nextProps.starIconOrder && prevProps.reportIconOrder === nextProps.reportIconOrder && prevProps.reactionIconTooltipText === nextProps.reactionIconTooltipText && prevProps.editIconTooltipText === nextProps.editIconTooltipText && prevProps.copyIconTooltipText === nextProps.copyIconTooltipText && prevProps.replyIconTooltipText === nextProps.replyIconTooltipText && prevProps.replyInThreadIconTooltipText === nextProps.replyInThreadIconTooltipText && prevProps.forwardIconTooltipText === nextProps.forwardIconTooltipText && prevProps.deleteIconTooltipText === nextProps.deleteIconTooltipText && prevProps.selectIconTooltipText === nextProps.selectIconTooltipText && prevProps.starIconTooltipText === nextProps.starIconTooltipText && prevProps.reportIconTooltipText === nextProps.reportIconTooltipText && prevProps.messageActionIconsColor === nextProps.messageActionIconsColor && prevProps.inlineReactionIcon === nextProps.inlineReactionIcon && prevProps.messageStatusSize === nextProps.messageStatusSize && prevProps.messageStatusColor === nextProps.messageStatusColor && prevProps.messageReadStatusColor === nextProps.messageReadStatusColor && prevProps.messageStateFontSize === nextProps.messageStateFontSize && prevProps.messageStateColor === nextProps.messageStateColor && prevProps.messageTimeFontSize === nextProps.messageTimeFontSize && prevProps.messageTimeColor === nextProps.messageTimeColor && prevProps.messageStatusAndTimeLineHeight === nextProps.messageStatusAndTimeLineHeight && prevProps.fileAttachmentsBoxWidth === nextProps.fileAttachmentsBoxWidth && prevProps.fileAttachmentsBoxBackground === nextProps.fileAttachmentsBoxBackground && prevProps.fileAttachmentsBoxBorder === nextProps.fileAttachmentsBoxBorder && prevProps.fileAttachmentsTitleColor === nextProps.fileAttachmentsTitleColor && prevProps.fileAttachmentsSizeColor === nextProps.fileAttachmentsSizeColor && prevProps.fileAttachmentsIcon === nextProps.fileAttachmentsIcon && prevProps.imageAttachmentMaxWidth === nextProps.imageAttachmentMaxWidth && prevProps.imageAttachmentMaxHeight === nextProps.imageAttachmentMaxHeight && prevProps.videoAttachmentMaxWidth === nextProps.videoAttachmentMaxWidth && prevProps.videoAttachmentMaxHeight === nextProps.videoAttachmentMaxHeight && prevProps.theme === nextProps.theme && prevProps.messageTextFontSize === nextProps.messageTextFontSize && prevProps.messageTextLineHeight === nextProps.messageTextLineHeight && prevProps.messageActionsShow === nextProps.messageActionsShow && prevProps.emojisPopupOpen === nextProps.emojisPopupOpen && prevProps.emojisPopupPosition === nextProps.emojisPopupPosition && prevProps.frequentlyEmojisOpen === nextProps.frequentlyEmojisOpen && (((_prevProps$ogMetadata = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata === void 0 ? void 0 : _prevProps$ogMetadata.ogLayoutOrder) || 'og-first') === (((_nextProps$ogMetadata = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata === void 0 ? void 0 : _nextProps$ogMetadata.ogLayoutOrder) || 'og-first') && ((_prevProps$ogMetadata2 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata2 === void 0 ? void 0 : _prevProps$ogMetadata2.ogShowUrl) === ((_nextProps$ogMetadata2 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata2 === void 0 ? void 0 : _nextProps$ogMetadata2.ogShowUrl) && ((_prevProps$ogMetadata3 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata3 === void 0 ? void 0 : _prevProps$ogMetadata3.ogShowTitle) === ((_nextProps$ogMetadata3 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata3 === void 0 ? void 0 : _nextProps$ogMetadata3.ogShowTitle) && ((_prevProps$ogMetadata4 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata4 === void 0 ? void 0 : _prevProps$ogMetadata4.ogShowDescription) === ((_nextProps$ogMetadata4 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata4 === void 0 ? void 0 : _nextProps$ogMetadata4.ogShowDescription) && ((_prevProps$ogMetadata5 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata5 === void 0 ? void 0 : _prevProps$ogMetadata5.ogShowFavicon) === ((_nextProps$ogMetadata5 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata5 === void 0 ? void 0 : _nextProps$ogMetadata5.ogShowFavicon) && ((_prevProps$ogMetadata6 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata6 === void 0 ? void 0 : _prevProps$ogMetadata6.order) === ((_nextProps$ogMetadata6 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata6 === void 0 ? void 0 : _nextProps$ogMetadata6.order));
 });
-var ForwardedTitle = styled__default.h3(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n  //margin: ", ";\n  margin: 0;\n  padding: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n\n  & > svg {\n    margin-right: 4px;\n    width: 16px;\n    height: 16px;\n    color: ", ";\n  }\n"])), function (props) {
+var ForwardedTitle = styled__default.h3(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n  // margin: ", ";\n  margin: 0;\n  padding: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n\n  & > svg {\n    margin-right: 4px;\n    width: 16px;\n    height: 16px;\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.withAttachments && props.withBody ? '0' : '0 0 4px';
@@ -33227,7 +33285,7 @@ var FrequentlyEmojisContainer = styled__default.div(_templateObject5$j || (_temp
   return props.rtlDirection && '0';
 });
 
-var _templateObject$E, _templateObject2$z, _templateObject3$t, _templateObject4$p, _templateObject5$k, _templateObject6$h, _templateObject7$f, _templateObject8$e, _templateObject9$b, _templateObject0$a, _templateObject1$7;
+var _templateObject$E, _templateObject2$z, _templateObject3$t, _templateObject4$p, _templateObject5$k, _templateObject6$h, _templateObject7$f, _templateObject8$e, _templateObject9$c, _templateObject0$b, _templateObject1$8;
 var defaultFormatDate = function defaultFormatDate(date) {
   var m = moment(date);
   if (m.isSame(moment(), 'day')) {
@@ -33623,7 +33681,7 @@ var RowDate = styled__default.div(_templateObject7$f || (_templateObject7$f = _t
 var Empty = styled__default.div(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  text-align: center;\n  padding: 16px 0;\n  font-size: 14px;\n  height: calc(100% - 32px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n"])), function (p) {
   return p.color;
 });
-var DropdownRoot = styled__default.div(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  ", "\n  z-index: 15;\n  background: ", ";\n  box-shadow: 0px 0px 24px 0px #11153929;\n  border-radius: 16px;\n  direction: initial;\n  visibility: ", ";\n"])), function (p) {
+var DropdownRoot = styled__default.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  ", "\n  z-index: 15;\n  background: ", ";\n  box-shadow: 0px 0px 24px 0px #11153929;\n  border-radius: 16px;\n  direction: initial;\n  visibility: ", ";\n"])), function (p) {
   return p.flip ? 'auto' : 'calc(100% + 8px)';
 }, function (p) {
   return p.flip ? 'calc(100% + 8px)' : 'auto';
@@ -33635,7 +33693,7 @@ var DropdownRoot = styled__default.div(_templateObject9$b || (_templateObject9$b
 }, function (p) {
   return p.ready ? 'visible' : 'hidden';
 });
-var Panel = styled__default.div(_templateObject0$a || (_templateObject0$a = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  border-radius: 16px;\n  overflow: hidden;\n  transition: height 0.25s ease;\n  height: ", ";\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n"])), function (p) {
+var Panel = styled__default.div(_templateObject0$b || (_templateObject0$b = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  border-radius: 16px;\n  overflow: hidden;\n  transition: height 0.25s ease;\n  height: ", ";\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n"])), function (p) {
   return p.bg;
 }, function (p) {
   return p.open ? Math.min(p.heightPx || 0, parseInt(String(p.maxHeight || '300'), 10) || 300) + "px" : '0';
@@ -33644,9 +33702,9 @@ var Panel = styled__default.div(_templateObject0$a || (_templateObject0$a = _tag
 }, function (p) {
   return p.minWidth || '340px';
 });
-var Content = styled__default.div(_templateObject1$7 || (_templateObject1$7 = _taggedTemplateLiteralLoose(["\n  padding: 16px 12px;\n  height: 100%;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n"])));
+var Content = styled__default.div(_templateObject1$8 || (_templateObject1$8 = _taggedTemplateLiteralLoose(["\n  padding: 16px 12px;\n  height: 100%;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n"])));
 
-var _templateObject$F, _templateObject2$A, _templateObject3$u, _templateObject4$q, _templateObject5$l, _templateObject6$i, _templateObject7$g, _templateObject8$f, _templateObject9$c, _templateObject0$b, _templateObject1$8, _templateObject10$4, _templateObject11$4, _templateObject12$3;
+var _templateObject$F, _templateObject2$A, _templateObject3$u, _templateObject4$q, _templateObject5$l, _templateObject6$i, _templateObject7$g, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$9, _templateObject10$4, _templateObject11$4, _templateObject12$3;
 var Message$1 = function Message(_ref) {
   var message = _ref.message,
     channel = _ref.channel,
@@ -33800,6 +33858,23 @@ var Message$1 = function Message(_ref) {
     messageTextLineHeight = _ref.messageTextLineHeight,
     messageTimeColorOnAttachment = _ref.messageTimeColorOnAttachment,
     shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention,
+    _ref$ogMetadataProps = _ref.ogMetadataProps,
+    ogMetadataProps = _ref$ogMetadataProps === void 0 ? {
+      maxWidth: 400,
+      maxHeight: undefined,
+      ogLayoutOrder: 'link-first',
+      ogShowUrl: false,
+      ogShowTitle: true,
+      ogShowDescription: true,
+      ogShowFavicon: true,
+      order: {
+        image: 1,
+        title: 2,
+        description: 3,
+        link: 4
+      },
+      infoPadding: '0 8px'
+    } : _ref$ogMetadataProps,
     _ref$showInfoMessageP = _ref.showInfoMessageProps,
     showInfoMessageProps = _ref$showInfoMessageP === void 0 ? {} : _ref$showInfoMessageP;
   var _useColor = useColors(),
@@ -34302,6 +34377,7 @@ var Message$1 = function Message(_ref) {
     messageTimeColorOnAttachment: messageTimeColorOnAttachment || textOnPrimary,
     handleOpenUserProfile: handleOpenUserProfile,
     shouldOpenUserProfileForMention: shouldOpenUserProfileForMention,
+    ogMetadataProps: ogMetadataProps,
     unsupportedMessage: unsupportedMessage
   })), messageStatusAndTimePosition === 'bottomOfMessage' && (messageStatusVisible || messageTimeVisible) && (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
     message: message,
@@ -34444,7 +34520,7 @@ var EmptySelection = styled__default.span(_templateObject8$f || (_templateObject
 }, function (props) {
   return props.disabled && '0.5';
 });
-var ReactionsContainer = styled__default.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  margin-left: ", ";\n  margin-right: ", ";\n\n  margin-top: 4px;\n  justify-content: flex-end;\n  border: ", ";\n  box-shadow: ", ";\n  filter: drop-shadow(0px 0px 2px rgba(17, 21, 57, 0.08));\n  border-radius: ", ";\n  background-color: ", ";\n  padding: ", ";\n  z-index: 9;\n  ", ";\n  overflow: hidden;\n  height: ", ";\n  transition: all 0.3s;\n"])), function (props) {
+var ReactionsContainer = styled__default.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  margin-left: ", ";\n  margin-right: ", ";\n\n  margin-top: 4px;\n  justify-content: flex-end;\n  border: ", ";\n  box-shadow: ", ";\n  filter: drop-shadow(0px 0px 2px rgba(17, 21, 57, 0.08));\n  border-radius: ", ";\n  background-color: ", ";\n  padding: ", ";\n  z-index: 9;\n  ", ";\n  overflow: hidden;\n  height: ", ";\n  transition: all 0.3s;\n"])), function (props) {
   return props.rtlDirection && 'auto';
 }, function (props) {
   return !props.rtlDirection && 'auto';
@@ -34463,10 +34539,10 @@ var ReactionsContainer = styled__default.div(_templateObject9$c || (_templateObj
 }, function (props) {
   return props.isReacted ? '16px' : '0';
 });
-var MessageReactionsCont = styled__default.div(_templateObject0$b || (_templateObject0$b = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  max-width: 300px;\n  direction: ", ";\n  cursor: pointer;\n"])), function (props) {
+var MessageReactionsCont = styled__default.div(_templateObject0$c || (_templateObject0$c = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  max-width: 300px;\n  direction: ", ";\n  cursor: pointer;\n"])), function (props) {
   return props.rtlDirection && 'ltr';
 });
-var MessageStatus$1 = styled__default.span(_templateObject1$8 || (_templateObject1$8 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  margin-left: 4px;\n  text-align: right;\n  height: ", ";\n  & > svg {\n    height: 16px;\n    width: 16px;\n  }\n"])), function (props) {
+var MessageStatus$1 = styled__default.span(_templateObject1$9 || (_templateObject1$9 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  margin-left: 4px;\n  text-align: right;\n  height: ", ";\n  & > svg {\n    height: 16px;\n    width: 16px;\n  }\n"])), function (props) {
   return props.height || '14px';
 });
 var HiddenMessageTime$1 = styled__default.span(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n  display: ", ";\n  font-weight: 400;\n  font-size: ", ";\n  color: ", ";\n"])), function (props) {
@@ -34505,7 +34581,7 @@ var MessageItem = styled__default.div(_templateObject12$3 || (_templateObject12$
   return props.hoverBackground || '';
 }, HiddenMessageTime$1, MessageStatus$1);
 
-var _templateObject$G, _templateObject2$B, _templateObject3$v, _templateObject4$r, _templateObject5$m, _templateObject6$j, _templateObject7$h, _templateObject8$g, _templateObject9$d, _templateObject0$c, _templateObject1$9;
+var _templateObject$G, _templateObject2$B, _templateObject3$v, _templateObject4$r, _templateObject5$m, _templateObject6$j, _templateObject7$h, _templateObject8$g, _templateObject9$e, _templateObject0$d, _templateObject1$a;
 var CreateMessageDateDivider = function CreateMessageDateDivider(_ref) {
   var lastIndex = _ref.lastIndex,
     currentMessageDate = _ref.currentMessageDate,
@@ -34692,7 +34768,24 @@ var MessageList = function MessageList(_ref2) {
     hiddenMessagesProperties = _ref2.hiddenMessagesProperties,
     shouldOpenUserProfileForMention = _ref2.shouldOpenUserProfileForMention,
     _ref2$showInfoMessage = _ref2.showInfoMessageProps,
-    showInfoMessageProps = _ref2$showInfoMessage === void 0 ? {} : _ref2$showInfoMessage;
+    showInfoMessageProps = _ref2$showInfoMessage === void 0 ? {} : _ref2$showInfoMessage,
+    _ref2$ogMetadataProps = _ref2.ogMetadataProps,
+    ogMetadataProps = _ref2$ogMetadataProps === void 0 ? {
+      maxWidth: 400,
+      maxHeight: undefined,
+      ogLayoutOrder: 'link-first',
+      ogShowUrl: false,
+      ogShowTitle: true,
+      ogShowDescription: true,
+      ogShowFavicon: true,
+      order: {
+        image: 1,
+        title: 2,
+        description: 3,
+        link: 4
+      },
+      infoPadding: '0 8px'
+    } : _ref2$ogMetadataProps;
   var _useColor = useColors(),
     outgoingMessageBackground = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND],
     themeBackgroundColor = _useColor[THEME_COLORS.BACKGROUND],
@@ -35523,7 +35616,8 @@ var MessageList = function MessageList(_ref2) {
       messageTimeColor: messageTimeColor,
       messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
       shouldOpenUserProfileForMention: shouldOpenUserProfileForMention,
-      showInfoMessageProps: showInfoMessageProps
+      showInfoMessageProps: showInfoMessageProps,
+      ogMetadataProps: ogMetadataProps
     }))), isUnreadMessage ? (/*#__PURE__*/React__default.createElement(MessageDivider, {
       theme: theme,
       newMessagesSeparatorTextColor: newMessagesSeparatorTextColor,
@@ -35607,13 +35701,13 @@ var DropAttachmentArea = styled__default.div(_templateObject7$h || (_templateObj
 var MessageWrapper = styled__default.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n  &.highlight {\n    & .message_item {\n      transition: all 0.2s ease-in-out;\n      padding-top: 4px;\n      padding-bottom: 4px;\n      background-color: ", ";\n    }\n  }\n\n  & .message_item {\n    transition: all 0.2s ease-in-out;\n  }\n"])), function (props) {
   return props.highlightBg || '#d5d5d5';
 });
-var NoMessagesContainer = styled__default.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  color: ", ";\n"])), function (props) {
+var NoMessagesContainer = styled__default.div(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var NoMessagesTitle = styled__default.h4(_templateObject0$c || (_templateObject0$c = _taggedTemplateLiteralLoose(["\n  margin: 12px 0 8px;\n  font-family: Inter, sans-serif;\n  text-align: center;\n  font-size: 20px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px;\n  color: ", ";\n"])), function (props) {
+var NoMessagesTitle = styled__default.h4(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose(["\n  margin: 12px 0 8px;\n  font-family: Inter, sans-serif;\n  text-align: center;\n  font-size: 20px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var NoMessagesText = styled__default.p(_templateObject1$9 || (_templateObject1$9 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  text-align: center;\n  font-feature-settings:\n    'clig' off,\n    'liga' off;\n  font-family: Inter, sans-serif;\n  font-size: 15px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  color: ", ";\n"])), function (props) {
+var NoMessagesText = styled__default.p(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  text-align: center;\n  font-feature-settings:\n    'clig' off,\n    'liga' off;\n  font-family: Inter, sans-serif;\n  font-size: 15px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
 
@@ -35764,7 +35858,24 @@ var MessagesContainer = function MessagesContainer(_ref) {
     hiddenMessagesProperties = _ref$hiddenMessagesPr === void 0 ? [] : _ref$hiddenMessagesPr,
     shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention,
     _ref$showInfoMessageP = _ref.showInfoMessageProps,
-    showInfoMessageProps = _ref$showInfoMessageP === void 0 ? {} : _ref$showInfoMessageP;
+    showInfoMessageProps = _ref$showInfoMessageP === void 0 ? {} : _ref$showInfoMessageP,
+    _ref$ogMetadataProps = _ref.ogMetadataProps,
+    ogMetadataProps = _ref$ogMetadataProps === void 0 ? {
+      maxWidth: 400,
+      maxHeight: undefined,
+      ogLayoutOrder: 'link-first',
+      ogShowUrl: false,
+      ogShowTitle: true,
+      ogShowDescription: true,
+      ogShowFavicon: true,
+      order: {
+        image: 1,
+        title: 2,
+        description: 3,
+        link: 4
+      },
+      infoPadding: '0 8px'
+    } : _ref$ogMetadataProps;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MessageList, {
     fontFamily: fontFamily,
     ownMessageOnRightSide: ownMessageOnRightSide,
@@ -35895,7 +36006,8 @@ var MessagesContainer = function MessagesContainer(_ref) {
     messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
     hiddenMessagesProperties: hiddenMessagesProperties,
     shouldOpenUserProfileForMention: shouldOpenUserProfileForMention,
-    showInfoMessageProps: showInfoMessageProps
+    showInfoMessageProps: showInfoMessageProps,
+    ogMetadataProps: ogMetadataProps
   }));
 };
 
@@ -38225,7 +38337,7 @@ var RecordingAnimation = function RecordingAnimation(_ref2) {
   }));
 };
 
-var _templateObject$M, _templateObject2$H, _templateObject3$A, _templateObject4$v, _templateObject5$q, _templateObject6$m, _templateObject7$k, _templateObject8$i, _templateObject9$e, _templateObject0$d, _templateObject1$a, _templateObject10$5, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1;
+var _templateObject$M, _templateObject2$H, _templateObject3$A, _templateObject4$v, _templateObject5$q, _templateObject6$m, _templateObject7$k, _templateObject8$i, _templateObject9$f, _templateObject0$e, _templateObject1$b, _templateObject10$5, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1;
 function AutoFocusPlugin(_ref) {
   var messageForReply = _ref.messageForReply;
   var _useLexicalComposerCo = LexicalComposerContext.useLexicalComposerContext(),
@@ -39857,10 +39969,10 @@ var CloseEditMode = styled__default.span(_templateObject6$m || (_templateObject6
 });
 var UserName$1 = styled__default.span(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n  font-weight: 500;\n  margin-left: 4px;\n"])));
 var ReplyMessageBody$1 = styled__default.div(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n  word-break: break-word;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
-var EditReplyMessageHeader = styled__default.h4(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  margin: 0 0 2px;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n\n  > svg {\n    margin-right: 4px;\n    width: 16px;\n    height: 16px;\n  }\n"])), function (props) {
+var EditReplyMessageHeader = styled__default.h4(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n  display: flex;\n  margin: 0 0 2px;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n\n  > svg {\n    margin-right: 4px;\n    width: 16px;\n    height: 16px;\n  }\n"])), function (props) {
   return props.color;
 });
-var AddAttachmentIcon = styled__default.span(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: ", ";\n  align-items: center;\n  margin: 0 8px;\n  cursor: pointer;\n  line-height: 13px;\n  z-index: 2;\n  order: ", ";\n\n  > svg {\n    ", ";\n    width: 24px;\n  }\n\n  &:hover > svg {\n    color: ", ";\n  }\n"])), function (props) {
+var AddAttachmentIcon = styled__default.span(_templateObject0$e || (_templateObject0$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: ", ";\n  align-items: center;\n  margin: 0 8px;\n  cursor: pointer;\n  line-height: 13px;\n  z-index: 2;\n  order: ", ";\n\n  > svg {\n    ", ";\n    width: 24px;\n  }\n\n  &:hover > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.height ? props.height + "px" : '36px';
 }, function (props) {
   return props.order === 0 || props.order ? props.order : 1;
@@ -39869,7 +39981,7 @@ var AddAttachmentIcon = styled__default.span(_templateObject0$d || (_templateObj
 }, function (props) {
   return props.hoverColor;
 });
-var SendMessageInputContainer = styled__default.div(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  position: relative;\n  min-height: ", ";\n  box-sizing: border-box;\n  border-radius: ", ";\n\n  & .dropdown-trigger.open {\n    color: #ccc;\n\n    & ", " {\n      & > svg {\n        color: ", ";\n      }\n    ;\n    }\n  }\n}\n"])), function (props) {
+var SendMessageInputContainer = styled__default.div(_templateObject1$b || (_templateObject1$b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  position: relative;\n  min-height: ", ";\n  box-sizing: border-box;\n  border-radius: ", ";\n\n  & .dropdown-trigger.open {\n    color: #ccc;\n\n    & ", " {\n      & > svg {\n        color: ", ";\n      }\n    ;\n    }\n  }\n}\n"])), function (props) {
   return props.minHeight || '36px';
 }, function (props) {
   return props.messageForReply ? '0 0 4px 4px' : '4px';
@@ -40200,7 +40312,7 @@ function SvgUnpin(props) {
   })));
 }
 
-var _templateObject$N, _templateObject2$I, _templateObject3$B, _templateObject4$w, _templateObject5$r, _templateObject6$n, _templateObject7$l, _templateObject8$j, _templateObject9$f, _templateObject0$e, _templateObject1$b, _templateObject10$6, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
+var _templateObject$N, _templateObject2$I, _templateObject3$B, _templateObject4$w, _templateObject5$r, _templateObject6$n, _templateObject7$l, _templateObject8$j, _templateObject9$g, _templateObject0$f, _templateObject1$c, _templateObject10$6, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
 var Actions = function Actions(_ref) {
   var setActionsHeight = _ref.setActionsHeight,
     channel = _ref.channel,
@@ -40676,9 +40788,9 @@ var DefaultMutedIcon = styled__default(SvgUnmuteNotifications)(_templateObject5$
 var DefaultMuteIcon = styled__default(SvgNotifications)(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose([""])));
 var DefaultStarIcon = styled__default(SvgStar)(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose([""])));
 var DefaultUnpinIcon = styled__default(SvgUnpin)(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose([""])));
-var DefaultPinIcon = styled__default(SvgPin)(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose([""])));
-var DefaultMarkAsRead = styled__default(SvgMarkAsRead)(_templateObject0$e || (_templateObject0$e = _taggedTemplateLiteralLoose([""])));
-var DefaultMarkAsUnRead = styled__default(SvgMarkAsUnRead)(_templateObject1$b || (_templateObject1$b = _taggedTemplateLiteralLoose([""])));
+var DefaultPinIcon = styled__default(SvgPin)(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose([""])));
+var DefaultMarkAsRead = styled__default(SvgMarkAsRead)(_templateObject0$f || (_templateObject0$f = _taggedTemplateLiteralLoose([""])));
+var DefaultMarkAsUnRead = styled__default(SvgMarkAsUnRead)(_templateObject1$c || (_templateObject1$c = _taggedTemplateLiteralLoose([""])));
 var DefaultBlockIcon = styled__default(SvgBlockChannel)(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose([""])));
 var DefaultReportIcon = styled__default(SvgReport)(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose([""])));
 var DefaultClearIcon = styled__default(SvgClear)(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose([""])));
@@ -40900,7 +41012,7 @@ function ResetLinkConfirmModal(_ref) {
   });
 }
 
-var _templateObject$P, _templateObject2$K, _templateObject3$D, _templateObject4$x, _templateObject5$s, _templateObject6$o, _templateObject7$m, _templateObject8$k, _templateObject9$g, _templateObject0$f, _templateObject1$c, _templateObject10$7, _templateObject11$7, _templateObject12$6, _templateObject13$5;
+var _templateObject$P, _templateObject2$K, _templateObject3$D, _templateObject4$x, _templateObject5$s, _templateObject6$o, _templateObject7$m, _templateObject8$k, _templateObject9$h, _templateObject0$g, _templateObject1$d, _templateObject10$7, _templateObject11$7, _templateObject12$6, _templateObject13$5;
 function InviteLinkModal(_ref) {
   var _getInviteLinkOptions, _tabs$link, _tabs$qr, _tabs$link2, _tabs$qr2;
   var onClose = _ref.onClose,
@@ -41400,11 +41512,11 @@ var LinkInput = styled__default.input(_templateObject7$m || (_templateObject7$m
   return p.color;
 });
 var CopyButton = styled__default.button(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n"])));
-var CopyButtonWrapper = styled__default.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])));
-var SectionTitle = styled__default.h4(_templateObject0$f || (_templateObject0$f = _taggedTemplateLiteralLoose(["\n  margin: 16px 0 8px;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
+var CopyButtonWrapper = styled__default.div(_templateObject9$h || (_templateObject9$h = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var SectionTitle = styled__default.h4(_templateObject0$g || (_templateObject0$g = _taggedTemplateLiteralLoose(["\n  margin: 16px 0 8px;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
   return p.color;
 });
-var HistoryRow = styled__default.div(_templateObject1$c || (_templateObject1$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 12px;\n"])));
+var HistoryRow = styled__default.div(_templateObject1$d || (_templateObject1$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 12px;\n"])));
 var Switch = styled__default.div(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n  width: 44px;\n  height: 26px;\n  border-radius: 13px;\n  background: ", ";\n  position: relative;\n  cursor: pointer;\n  transition: background 0.2s ease;\n\n  &:after {\n    content: '';\n    position: absolute;\n    top: 3px;\n    left: ", ";\n    width: 20px;\n    height: 20px;\n    background: #fff;\n    border-radius: 50%;\n    transition: left 0.2s ease;\n  }\n"])), function (p) {
   return p.active ? p.accent : 'rgba(226,226,226,1)';
 }, function (p) {
@@ -41420,7 +41532,7 @@ var QrHint = styled__default.p(_templateObject13$5 || (_templateObject13$5 = _ta
   return p.color;
 });
 
-var _templateObject$Q, _templateObject2$L, _templateObject3$E, _templateObject4$y, _templateObject5$t, _templateObject6$p, _templateObject7$n, _templateObject8$l, _templateObject9$h;
+var _templateObject$Q, _templateObject2$L, _templateObject3$E, _templateObject4$y, _templateObject5$t, _templateObject6$p, _templateObject7$n, _templateObject8$l, _templateObject9$i;
 var Members = function Members(_ref) {
   var _members$find;
   var channel = _ref.channel,
@@ -41764,7 +41876,7 @@ var MemberItem$1 = styled__default.li(_templateObject8$l || (_templateObject8$l
 }, function (props) {
   return props.hoverBackground;
 }, EditMemberIcon, UserStatus);
-var RoleBadge = styled__default.span(_templateObject9$h || (_templateObject9$h = _taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 2px 8px;\n  border-radius: 12px;\n  margin-left: 4px;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 16px;\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: 12px;\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n    opacity: 0.1;\n  }\n"])), function (props) {
+var RoleBadge = styled__default.span(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 2px 8px;\n  border-radius: 12px;\n  margin-left: 4px;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 16px;\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: 12px;\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n    opacity: 0.1;\n  }\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.backgroundColor;
@@ -42799,7 +42911,7 @@ var EditChannel = function EditChannel(_ref) {
   })));
 };
 
-var _templateObject$Z, _templateObject2$S, _templateObject3$J, _templateObject4$D, _templateObject5$x, _templateObject6$s, _templateObject7$q, _templateObject8$o, _templateObject9$i, _templateObject0$g, _templateObject1$d, _templateObject10$8, _templateObject11$8;
+var _templateObject$Z, _templateObject2$S, _templateObject3$J, _templateObject4$D, _templateObject5$x, _templateObject6$s, _templateObject7$q, _templateObject8$o, _templateObject9$j, _templateObject0$h, _templateObject1$e, _templateObject10$8, _templateObject11$8;
 var Details = function Details(_ref) {
   var _activeChannel$member;
   var detailsTitleText = _ref.detailsTitleText,
@@ -43265,17 +43377,17 @@ var ChannelInfo$4 = styled__default.div(_templateObject7$q || (_templateObject7$
 var DetailsHeader = styled__default.div(_templateObject8$o || (_templateObject8$o = _taggedTemplateLiteralLoose(["\n  border-bottom: 6px solid ", ";\n  align-items: center;\n  box-sizing: border-box;\n  padding: 20px 16px;\n"])), function (props) {
   return props.borderColor;
 });
-var ChannelAvatarAndName = styled__default.div(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  flex-direction: ", ";\n"])), function (props) {
+var ChannelAvatarAndName = styled__default.div(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  flex-direction: ", ";\n"])), function (props) {
   return props.direction;
 });
-var ChannelName$1 = styled__default(SectionHeader)(_templateObject0$g || (_templateObject0$g = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  max-width: ", ";\n  text-overflow: ellipsis;\n  text-color: ", ";\n  overflow: hidden;\n  text-transform: ", ";\n"])), function (props) {
+var ChannelName$1 = styled__default(SectionHeader)(_templateObject0$h || (_templateObject0$h = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  max-width: ", ";\n  text-overflow: ellipsis;\n  text-color: ", ";\n  overflow: hidden;\n  text-transform: ", ";\n"])), function (props) {
   return props.isDirect ? '200px' : '168px';
 }, function (props) {
   return props.color;
 }, function (props) {
   return props.uppercase && 'uppercase';
 });
-var ChannelNameWrapper = styled__default.div(_templateObject1$d || (_templateObject1$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
+var ChannelNameWrapper = styled__default.div(_templateObject1$e || (_templateObject1$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
 var EditButton = styled__default.span(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n  margin-left: 6px;\n  cursor: pointer;\n  color: #b2b6be;\n"])));
 var PhoneNumberContainer = styled__default.span(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: text;\n"])));