sceyt-chat-react-uikit 1.7.6-beta.4 → 1.7.6-beta.6

package/index.modern.js

@@ -11219,7 +11219,16 @@ var messageSlice = createSlice({
         markersMap = _action$payload2.markersMap;
       var markerName = name;
       for (var index = 0; index < state.activeChannelMessages.length; index++) {
-        if (markersMap[state.activeChannelMessages[index].id] && (state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.SENT || markerName === MESSAGE_DELIVERY_STATUS.READ) && state.activeChannelMessages[index].state !== 'Deleted') {
+        if (markerName === MESSAGE_DELIVERY_STATUS.DELIVERED && (state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.DELIVERED || state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.READ || state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
+          continue;
+        }
+        if (markerName === MESSAGE_DELIVERY_STATUS.READ && (state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.READ || state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
+          continue;
+        }
+        if (markerName === MESSAGE_DELIVERY_STATUS.PLAYED && state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED) {
+          continue;
+        }
+        if (markersMap[state.activeChannelMessages[index].id] && state.activeChannelMessages[index].state !== 'Deleted') {
           state.activeChannelMessages[index].deliveryStatus = markerName;
         }
       }
@@ -14408,7 +14417,7 @@ function watchForEvents() {
           };
         });
         _loop = /*#__PURE__*/_regenerator().m(function _callee2() {
-          var _yield$take, type, args, createdChannel, channelFilterTypes, getFromContacts, channelExists, _chan, channel, _chan2, _channel, member, _channelExists, _activeChannelId, groupName, updateChannelData, _channel2, _channelExists2, _channel3, removedMembers, _activeChannelId2, _channelExists3, activeChannel, _updateChannelData, _groupName, _channel4, addedMembers, _activeChannelId3, _channelExists4, _updateChannelData2, _groupName2, updatedChannel, _channelExists5, subject, avatarUrl, muted, mutedTill, metadata, _activeChannelId4, _groupName3, _channel5, message, messageToHandle, _channelFilterTypes, _activeChannelId5, _channelExists6, channelForAdd, hasNextMessage, _groupName4, showNotifications, tabIsActive, _state$ThemeReducer$n, _state$ThemeReducer$n2, _state$ThemeReducer$n3, _state$ThemeReducer$n4, _state$ThemeReducer$n5, _state$ThemeReducer$n6, contactsMap, _getFromContacts, state, theme, accentColor, textSecondary, messageBody, channelId, markerList, _channel6, _activeChannelId6, updateLastMessage, markersMap, activeChannelMessages, lastMessage, _channelId, _channel7, _channel8, deletedMessage, _activeChannelId7, _channelExists7, _channel9, _message, _activeChannelId8, _channelExists8, _channel0, user, _message2, reaction, isSelf, _activeChannelId9, _state$ThemeReducer$n7, _state$ThemeReducer$n8, _state$ThemeReducer$n9, _state$ThemeReducer$n0, _state$ThemeReducer$n1, _state$ThemeReducer$n10, _contactsMap, _getFromContacts2, _state, _theme, _accentColor, _textSecondary, _messageBody, channelUpdateParams, _pollDetailsData$chan, _pollDetailsData$chan2, _channel1, pollDetails, messageId, pollDetailsData, _activeChannelId0, addedVotes, deletedVotes, objs, _iterator, _step, vote, _iterator2, _step2, _vote, _i, _objs, obj, _store$getState$Messa, key, hasNext, _i2, _objs2, _obj, _pollDetailsData$chan3, _channel10, _pollDetails, _messageId, _pollDetailsData, _activeChannelId1, _deletedVotes, _objs3, _iterator3, _step3, _vote2, _i3, _objs4, _obj2, _i4, _objs5, _obj3, _pollDetailsData2$cha, _channel11, _pollDetails2, _messageId2, _activeChannelId10, _pollDetailsData2, retractedVotes, _objs6, _iterator4, _step4, _vote4, _i5, _objs7, _obj4, _iterator5, _step5, _vote3, _channel12, _messageId3, _activeChannelId11, _obj5, _channel13, _user, _message3, _reaction, channelFromMap, _isSelf, _activeChannelId12, _channelUpdateParams, _channel14, _updatedChannel, _channel15, _activeChannelId13, channelExist, _channel16, _channel17, _channel18, _channel19, _channel20, _channel21, _channel22, _groupName5, _channel23, _groupName6, _channel24, members, _activeChannelId14, i, _channel25, _channel26, _channelId2, from, name, status, _t, _t2;
+          var _yield$take, type, args, createdChannel, channelFilterTypes, getFromContacts, channelExists, _chan, channel, _chan2, _channel, member, _channelExists, _activeChannelId, groupName, updateChannelData, _channel2, _channelExists2, _channel3, removedMembers, _activeChannelId2, _channelExists3, activeChannel, _updateChannelData, _groupName, _channel4, addedMembers, _activeChannelId3, _channelExists4, _updateChannelData2, _groupName2, updatedChannel, _channelExists5, subject, avatarUrl, muted, mutedTill, metadata, _activeChannelId4, _groupName3, _channel5, message, messageToHandle, _channelFilterTypes, _activeChannelId5, _channelExists6, channelForAdd, hasNextMessage, _groupName4, showNotifications, tabIsActive, _state$ThemeReducer$n, _state$ThemeReducer$n2, _state$ThemeReducer$n3, _state$ThemeReducer$n4, _state$ThemeReducer$n5, _state$ThemeReducer$n6, contactsMap, _getFromContacts, state, theme, accentColor, textSecondary, messageBody, channelId, markerList, _channel6, _activeChannelId6, updateLastMessage, markersMap, activeChannelMessages, _loop2, _iterator, _step, lastMessage, _channelId, _channel7, _channel8, deletedMessage, _activeChannelId7, _channelExists7, _channel9, _message, _activeChannelId8, _channelExists8, _channel0, user, _message2, reaction, isSelf, _activeChannelId9, _state$ThemeReducer$n7, _state$ThemeReducer$n8, _state$ThemeReducer$n9, _state$ThemeReducer$n0, _state$ThemeReducer$n1, _state$ThemeReducer$n10, _contactsMap, _getFromContacts2, _state, _theme, _accentColor, _textSecondary, _messageBody, channelUpdateParams, _pollDetailsData$chan, _pollDetailsData$chan2, _channel1, pollDetails, messageId, pollDetailsData, _activeChannelId0, addedVotes, deletedVotes, objs, _iterator2, _step2, vote, _iterator3, _step3, _vote, _i, _objs, obj, _store$getState$Messa, key, hasNext, _i2, _objs2, _obj, _pollDetailsData$chan3, _channel10, _pollDetails, _messageId, _pollDetailsData, _activeChannelId1, _deletedVotes, _objs3, _iterator4, _step4, _vote2, _i3, _objs4, _obj2, _i4, _objs5, _obj3, _pollDetailsData2$cha, _channel11, _pollDetails2, _messageId2, _activeChannelId10, _pollDetailsData2, retractedVotes, _objs6, _iterator5, _step5, _vote4, _i5, _objs7, _obj4, _iterator6, _step6, _vote3, _channel12, _messageId3, _activeChannelId11, _obj5, _channel13, _user, _message3, _reaction, channelFromMap, _isSelf, _activeChannelId12, _channelUpdateParams, _channel14, _updatedChannel, _channel15, _activeChannelId13, channelExist, _channel16, _channel17, _channel18, _channel19, _channel20, _channel21, _channel22, _groupName5, _channel23, _groupName6, _channel24, members, _activeChannelId14, i, _channel25, _channel26, _channelId2, from, name, status, _t, _t2;
           return _regenerator().w(function (_context2) {
             while (1) switch (_context2.p = _context2.n) {
               case 0:
@@ -14420,7 +14429,7 @@ function watchForEvents() {
                 type = _yield$take.type;
                 args = _yield$take.args;
                 _t = type;
-                _context2.n = _t === CHANNEL_EVENT_TYPES.CREATE ? 2 : _t === CHANNEL_EVENT_TYPES.JOIN ? 7 : _t === CHANNEL_EVENT_TYPES.LEAVE ? 9 : _t === CHANNEL_EVENT_TYPES.BLOCK ? 22 : _t === CHANNEL_EVENT_TYPES.UNBLOCK ? 24 : _t === CHANNEL_EVENT_TYPES.KICK_MEMBERS ? 25 : _t === CHANNEL_EVENT_TYPES.ADD_MEMBERS ? 36 : _t === CHANNEL_EVENT_TYPES.UPDATE_CHANNEL ? 46 : _t === CHANNEL_EVENT_TYPES.MESSAGE ? 51 : _t === CHANNEL_EVENT_TYPES.MESSAGE_MARKERS_RECEIVED ? 68 : _t === CHANNEL_EVENT_TYPES.DELETE ? 75 : _t === CHANNEL_EVENT_TYPES.DELETE_MESSAGE ? 77 : _t === CHANNEL_EVENT_TYPES.EDIT_MESSAGE ? 82 : _t === CHANNEL_EVENT_TYPES.REACTION_ADDED ? 87 : _t === CHANNEL_EVENT_TYPES.POLL_ADDED ? 95 : _t === CHANNEL_EVENT_TYPES.POLL_DELETED ? 105 : _t === CHANNEL_EVENT_TYPES.POLL_RETRACTED ? 113 : _t === CHANNEL_EVENT_TYPES.POLL_CLOSED ? 121 : _t === CHANNEL_EVENT_TYPES.REACTION_DELETED ? 125 : _t === CHANNEL_EVENT_TYPES.UNREAD_MESSAGES_INFO ? 130 : _t === CHANNEL_EVENT_TYPES.CLEAR_HISTORY ? 133 : _t === CHANNEL_EVENT_TYPES.MUTE ? 139 : _t === CHANNEL_EVENT_TYPES.UNMUTE ? 141 : _t === CHANNEL_EVENT_TYPES.PINED ? 143 : _t === CHANNEL_EVENT_TYPES.UNPINED ? 145 : _t === CHANNEL_EVENT_TYPES.HIDE ? 147 : _t === CHANNEL_EVENT_TYPES.UNHIDE ? 149 : _t === CHANNEL_EVENT_TYPES.CHANNEL_MARKED_AS_UNREAD ? 151 : _t === CHANNEL_EVENT_TYPES.CHANNEL_MARKED_AS_READ ? 154 : _t === CHANNEL_EVENT_TYPES.CHANGE_ROLE ? 157 : _t === CHANNEL_EVENT_TYPES.FROZEN ? 164 : _t === CHANNEL_EVENT_TYPES.UNFROZEN ? 165 : _t === CHANNEL_EVENT_TYPES.CHANNEL_EVENT ? 166 : _t === CONNECTION_EVENT_TYPES.CONNECTION_STATUS_CHANGED ? 175 : 178;
+                _context2.n = _t === CHANNEL_EVENT_TYPES.CREATE ? 2 : _t === CHANNEL_EVENT_TYPES.JOIN ? 7 : _t === CHANNEL_EVENT_TYPES.LEAVE ? 9 : _t === CHANNEL_EVENT_TYPES.BLOCK ? 22 : _t === CHANNEL_EVENT_TYPES.UNBLOCK ? 24 : _t === CHANNEL_EVENT_TYPES.KICK_MEMBERS ? 25 : _t === CHANNEL_EVENT_TYPES.ADD_MEMBERS ? 36 : _t === CHANNEL_EVENT_TYPES.UPDATE_CHANNEL ? 46 : _t === CHANNEL_EVENT_TYPES.MESSAGE ? 51 : _t === CHANNEL_EVENT_TYPES.MESSAGE_MARKERS_RECEIVED ? 68 : _t === CHANNEL_EVENT_TYPES.DELETE ? 78 : _t === CHANNEL_EVENT_TYPES.DELETE_MESSAGE ? 80 : _t === CHANNEL_EVENT_TYPES.EDIT_MESSAGE ? 85 : _t === CHANNEL_EVENT_TYPES.REACTION_ADDED ? 90 : _t === CHANNEL_EVENT_TYPES.POLL_ADDED ? 98 : _t === CHANNEL_EVENT_TYPES.POLL_DELETED ? 108 : _t === CHANNEL_EVENT_TYPES.POLL_RETRACTED ? 116 : _t === CHANNEL_EVENT_TYPES.POLL_CLOSED ? 124 : _t === CHANNEL_EVENT_TYPES.REACTION_DELETED ? 128 : _t === CHANNEL_EVENT_TYPES.UNREAD_MESSAGES_INFO ? 133 : _t === CHANNEL_EVENT_TYPES.CLEAR_HISTORY ? 136 : _t === CHANNEL_EVENT_TYPES.MUTE ? 142 : _t === CHANNEL_EVENT_TYPES.UNMUTE ? 144 : _t === CHANNEL_EVENT_TYPES.PINED ? 146 : _t === CHANNEL_EVENT_TYPES.UNPINED ? 148 : _t === CHANNEL_EVENT_TYPES.HIDE ? 150 : _t === CHANNEL_EVENT_TYPES.UNHIDE ? 152 : _t === CHANNEL_EVENT_TYPES.CHANNEL_MARKED_AS_UNREAD ? 154 : _t === CHANNEL_EVENT_TYPES.CHANNEL_MARKED_AS_READ ? 157 : _t === CHANNEL_EVENT_TYPES.CHANGE_ROLE ? 160 : _t === CHANNEL_EVENT_TYPES.FROZEN ? 167 : _t === CHANNEL_EVENT_TYPES.UNFROZEN ? 168 : _t === CHANNEL_EVENT_TYPES.CHANNEL_EVENT ? 169 : _t === CONNECTION_EVENT_TYPES.CONNECTION_STATUS_CHANGED ? 178 : 181;
                 break;
               case 2:
                 createdChannel = args.createdChannel;
@@ -14454,7 +14463,7 @@ function watchForEvents() {
                   addChannelToAllChannels(createdChannel);
                 }
               case 6:
-                return _context2.a(3, 179);
+                return _context2.a(3, 182);
               case 7:
                 channel = args.channel;
                 log.info('channel JOIN ... . ', channel);
@@ -14465,7 +14474,7 @@ function watchForEvents() {
                 if (!_chan2) {
                   addChannelToAllChannels(channel);
                 }
-                return _context2.a(3, 179);
+                return _context2.a(3, 182);
               case 9:
                 _channel = args.channel, member = args.member;
                 log.info('channel LEAVE ... ', _channel, member);
@@ -14533,7 +14542,7 @@ function watchForEvents() {
                   mutedTill: _channel.mutedTill
                 });
               case 21:
-                return _context2.a(3, 179);
+                return _context2.a(3, 182);
               case 22:
                 log.info('channel BLOCK ... ');
                 _channel2 = args.channel;
@@ -14545,10 +14554,10 @@ function watchForEvents() {
                 _context2.n = 23;
                 return put(removeChannelAC(_channel2.id));
               case 23:
-                return _context2.a(3, 179);
+                return _context2.a(3, 182);
               case 24:
                 log.info('channel UNBLOCK ... ');
-                return _context2.a(3, 179);
+                return _context2.a(3, 182);
               case 25:
                 _channel3 = args.channel, removedMembers = args.removedMembers;
                 log.info('channel KICK_MEMBERS ... ', removedMembers);
@@ -14618,7 +14627,7 @@ function watchForEvents() {
                   muted: _channel3.muted,
                   mutedTill: _channel3.mutedTill
                 });
-                return _context2.a(3, 179);
+                return _context2.a(3, 182);
               case 36:
                 _channel4 = args.channel, addedMembers = args.addedMembers;
                 log.info('channel ADD_MEMBERS ... ', addedMembers);
@@ -14673,7 +14682,7 @@ function watchForEvents() {
                   muted: _channel4.muted,
                   mutedTill: _channel4.mutedTill
                 });
-                return _context2.a(3, 179);
+                return _context2.a(3, 182);
               case 46:
                 log.info('channel UPDATE_CHANNEL ... ');
                 updatedChannel = args.updatedChannel;
@@ -14720,7 +14729,7 @@ function watchForEvents() {
                   mutedTill: mutedTill,
                   metadata: isJSON(metadata) ? JSON.parse(metadata) : metadata
                 });
-                return _context2.a(3, 179);
+                return _context2.a(3, 182);
               case 51:
                 _channel5 = args.channel, message = args.message;
                 log.info('channel MESSAGE ... id : ', message.id, ', channel.id: ', _channel5.id);
@@ -14885,7 +14894,7 @@ function watchForEvents() {
                 });
                 updateChannelLastMessageOnAllChannels(_channel5.id, _channel5.lastMessage);
               case 67:
-                return _context2.a(3, 179);
+                return _context2.a(3, 182);
               case 68:
                 channelId = args.channelId, markerList = args.markerList;
                 _context2.n = 69;
@@ -14894,7 +14903,7 @@ function watchForEvents() {
                 _channel6 = _context2.v;
                 log.info('channel MESSAGE_MARKERS_RECEIVED ... channel: ', _channel6, 'markers list: ', markerList);
                 if (!_channel6) {
-                  _context2.n = 74;
+                  _context2.n = 77;
                   break;
                 }
                 _context2.n = 70;
@@ -14904,11 +14913,12 @@ function watchForEvents() {
                 updateLastMessage = false;
                 markersMap = {};
                 activeChannelMessages = getMessagesFromMap(_activeChannelId6);
-                markerList.messageIds.forEach(/*#__PURE__*/_regenerator().m(function _callee(messageId) {
-                  var isPendingMessage;
+                _loop2 = /*#__PURE__*/_regenerator().m(function _callee() {
+                  var messageId, isPendingMessage;
                   return _regenerator().w(function (_context) {
                     while (1) switch (_context.n) {
                       case 0:
+                        messageId = _step.value;
                         if (!(activeChannelMessages !== null && activeChannelMessages !== void 0 && activeChannelMessages.find(function (message) {
                           return message.id === messageId;
                         }))) {
@@ -14942,100 +14952,111 @@ function watchForEvents() {
                         return _context.a(2);
                     }
                   }, _callee);
-                }));
+                });
+                _iterator = _createForOfIteratorHelperLoose(markerList.messageIds);
+              case 71:
+                if ((_step = _iterator()).done) {
+                  _context2.n = 73;
+                  break;
+                }
+                return _context2.d(_regeneratorValues(_loop2()), 72);
+              case 72:
+                _context2.n = 71;
+                break;
+              case 73:
                 if (!updateLastMessage) {
-                  _context2.n = 71;
+                  _context2.n = 74;
                   break;
                 }
                 lastMessage = _extends({}, _channel6.lastMessage, {
                   deliveryStatus: markerList.name
                 });
                 updateChannelLastMessageOnAllChannels(_channel6.id, lastMessage);
-                _context2.n = 71;
+                _context2.n = 74;
                 return put(updateChannelLastMessageStatusAC(lastMessage, _channel6));
-              case 71:
+              case 74:
                 if (!(_activeChannelId6 === channelId)) {
-                  _context2.n = 73;
+                  _context2.n = 76;
                   break;
                 }
-                _context2.n = 72;
+                _context2.n = 75;
                 return put(updateMessagesStatusAC(markerList.name, markersMap));
-              case 72:
+              case 75:
                 updateMarkersOnAllMessages(markersMap, markerList.name);
-              case 73:
+              case 76:
                 updateMessageStatusOnMap(_channel6.id, {
                   name: markerList.name,
                   markersMap: markersMap
                 });
-                _context2.n = 74;
+                _context2.n = 77;
                 return put(updateMessagesMarkersAC(channelId, markerList.name, markerList));
-              case 74:
-                return _context2.a(3, 179);
-              case 75:
+              case 77:
+                return _context2.a(3, 182);
+              case 78:
                 _channelId = args.channelId;
                 log.info('channel DELETE ... ');
                 _channel7 = getChannelFromMap(_channelId);
-                _context2.n = 76;
+                _context2.n = 79;
                 return put(setChannelToRemoveAC(_channel7));
-              case 76:
+              case 79:
                 deleteChannelFromAllChannels(_channelId);
-                return _context2.a(3, 179);
-              case 77:
+                return _context2.a(3, 182);
+              case 80:
                 _channel8 = args.channel, deletedMessage = args.deletedMessage;
-                _context2.n = 78;
+                _context2.n = 81;
                 return call(getActiveChannelId);
-              case 78:
+              case 81:
                 _activeChannelId7 = _context2.v;
                 log.info('channel DELETE_MESSAGE ... ');
                 _channelExists7 = checkChannelExists(_channel8.id);
                 if (!(_channel8.id === _activeChannelId7)) {
-                  _context2.n = 79;
+                  _context2.n = 82;
                   break;
                 }
                 updateMessageOnAllMessages(deletedMessage.id, deletedMessage);
-                _context2.n = 79;
+                _context2.n = 82;
                 return put(updateMessageAC(deletedMessage.id, deletedMessage));
-              case 79:
+              case 82:
                 updateMessageOnMap(_channel8.id, {
                   messageId: deletedMessage.id,
                   params: deletedMessage
                 });
                 if (!_channelExists7) {
-                  _context2.n = 81;
+                  _context2.n = 84;
                   break;
                 }
-                _context2.n = 80;
+                _context2.n = 83;
                 return put(updateChannelDataAC(_channel8.id, {
                   newMessageCount: _channel8.newMessageCount,
                   muted: _channel8.muted,
                   mutedTill: _channel8.mutedTill
                 }));
-              case 80:
+              case 83:
                 if (!(_channel8.lastMessage.id === deletedMessage.id)) {
-                  _context2.n = 81;
+                  _context2.n = 84;
                   break;
                 }
-                _context2.n = 81;
+                _context2.n = 84;
                 return put(updateChannelLastMessageAC(deletedMessage, _channel8));
-              case 81:
+              case 84:
                 updateChannelOnAllChannels(_channel8.id, {
                   newMessageCount: _channel8.newMessageCount,
                   muted: _channel8.muted,
                   mutedTill: _channel8.mutedTill
                 }, deletedMessage);
-                return _context2.a(3, 179);
-              case 82:
+                return _context2.a(3, 182);
+              case 85:
                 _channel9 = args.channel, _message = args.message;
-                _context2.n = 83;
+                _context2.n = 86;
                 return call(getActiveChannelId);
-              case 83:
+              case 86:
                 _activeChannelId8 = _context2.v;
                 _channelExists8 = checkChannelExists(_channel9.id);
                 if (!(_channel9.id === _activeChannelId8)) {
-                  _context2.n = 85;
+                  _context2.n = 88;
                   break;
                 }
-                _context2.n = 84;
+                _context2.n = 87;
                 return put(updateMessageAC(_message.id, {
                   body: _message.body,
                   state: _message.state,
@@ -15044,7 +15065,7 @@ function watchForEvents() {
                   mentionedUsers: _message.mentionedUsers,
                   updatedAt: _message.updatedAt
                 }));
-              case 84:
+              case 87:
                 updateMessageOnAllMessages(_message.id, {
                   body: _message.body,
                   state: _message.state,
@@ -15053,18 +15074,18 @@ function watchForEvents() {
                   mentionedUsers: _message.mentionedUsers,
                   updatedAt: _message.updatedAt
                 });
-              case 85:
+              case 88:
                 if (!_channelExists8) {
-                  _context2.n = 86;
+                  _context2.n = 89;
                   break;
                 }
                 if (!(_channel9.lastMessage.id === _message.id)) {
-                  _context2.n = 86;
+                  _context2.n = 89;
                   break;
                 }
-                _context2.n = 86;
+                _context2.n = 89;
                 return put(updateChannelLastMessageAC(_message, _channel9));
-              case 86:
+              case 89:
                 if (checkChannelExistsOnMessagesMap(_channel9.id)) {
                   updateMessageOnMap(_channel9.id, {
                     messageId: _message.id,
@@ -15072,38 +15093,38 @@ function watchForEvents() {
                   });
                 }
                 updateChannelOnAllChannels(_channel9.id, {}, _message);
-                return _context2.a(3, 179);
-              case 87:
+                return _context2.a(3, 182);
+              case 90:
                 _channel0 = args.channel, user = args.user, _message2 = args.message, reaction = args.reaction;
                 isSelf = user.id === SceytChatClient.user.id;
-                _context2.n = 88;
+                _context2.n = 91;
                 return call(getActiveChannelId);
-              case 88:
+              case 91:
                 _activeChannelId9 = _context2.v;
                 if (!(_channel0.id === _activeChannelId9)) {
-                  _context2.n = 90;
+                  _context2.n = 93;
                   break;
                 }
-                _context2.n = 89;
+                _context2.n = 92;
                 return put(addReactionToMessageAC(_message2, reaction, isSelf));
-              case 89:
+              case 92:
                 addReactionOnAllMessages(_message2, reaction, true);
-              case 90:
+              case 93:
                 if (!(_message2.user.id === SceytChatClient.user.id)) {
-                  _context2.n = 94;
+                  _context2.n = 97;
                   break;
                 }
                 if (!(!isSelf && Notification.permission === 'granted')) {
-                  _context2.n = 92;
+                  _context2.n = 95;
                   break;
                 }
                 if (!(document.visibilityState !== 'visible' || _channel0.id !== _activeChannelId9)) {
-                  _context2.n = 92;
+                  _context2.n = 95;
                   break;
                 }
-                _context2.n = 91;
+                _context2.n = 94;
                 return select(contactsMapSelector);
-              case 91:
+              case 94:
                 _contactsMap = _context2.v;
                 _getFromContacts2 = getShowOnlyContactUsers();
                 _state = store.getState();
@@ -15123,9 +15144,9 @@ function watchForEvents() {
                 setNotification(_messageBody, reaction.user, _channel0, reaction.key, _message2.attachments && _message2.attachments.length ? _message2.attachments.find(function (att) {
                   return att.type !== attachmentTypes.link;
                 }) : undefined);
-              case 92:
+              case 95:
                 if (!(_channel0.newReactions && _channel0.newReactions.length)) {
-                  _context2.n = 93;
+                  _context2.n = 96;
                   break;
                 }
                 channelUpdateParams = {
@@ -15135,9 +15156,9 @@ function watchForEvents() {
                   muted: _channel0.muted,
                   mutedTill: _channel0.mutedTill
                 };
-                _context2.n = 93;
+                _context2.n = 96;
                 return put(updateChannelDataAC(_channel0.id, channelUpdateParams));
-              case 93:
+              case 96:
                 updateChannelOnAllChannels(_channel0.id, {
                   userMessageReactions: _channel0.newReactions,
                   lastReactedMessage: _message2,
@@ -15145,31 +15166,31 @@ function watchForEvents() {
                   muted: _channel0.muted,
                   mutedTill: _channel0.mutedTill
                 });
-              case 94:
+              case 97:
                 if (checkChannelExistsOnMessagesMap(_channel0.id)) {
                   addReactionToMessageOnMap(_channel0.id, _message2, reaction, true);
                 }
-                return _context2.a(3, 179);
-              case 95:
+                return _context2.a(3, 182);
+              case 98:
                 _channel1 = args.channel, pollDetails = args.pollDetails, messageId = args.messageId;
                 pollDetailsData = pollDetails;
-                _context2.n = 96;
+                _context2.n = 99;
                 return call(getActiveChannelId);
-              case 96:
+              case 99:
                 _activeChannelId0 = _context2.v;
                 addedVotes = (pollDetailsData === null || pollDetailsData === void 0 ? void 0 : (_pollDetailsData$chan = pollDetailsData.changedVotes) === null || _pollDetailsData$chan === void 0 ? void 0 : _pollDetailsData$chan.addedVotes) || [];
                 deletedVotes = (pollDetailsData === null || pollDetailsData === void 0 ? void 0 : (_pollDetailsData$chan2 = pollDetailsData.changedVotes) === null || _pollDetailsData$chan2 === void 0 ? void 0 : _pollDetailsData$chan2.removedVotes) || [];
                 objs = [];
-                for (_iterator = _createForOfIteratorHelperLoose(deletedVotes); !(_step = _iterator()).done;) {
-                  vote = _step.value;
+                for (_iterator2 = _createForOfIteratorHelperLoose(deletedVotes); !(_step2 = _iterator2()).done;) {
+                  vote = _step2.value;
                   objs.push({
                     type: vote.user.id === SceytChatClient.user.id ? 'deleteOwn' : 'delete',
                     vote: vote,
                     incrementVotesPerOptionCount: -((deletedVotes === null || deletedVotes === void 0 ? void 0 : deletedVotes.length) || 0)
                   });
                 }
-                for (_iterator2 = _createForOfIteratorHelperLoose(addedVotes); !(_step2 = _iterator2()).done;) {
-                  _vote = _step2.value;
+                for (_iterator3 = _createForOfIteratorHelperLoose(addedVotes); !(_step3 = _iterator3()).done;) {
+                  _vote = _step3.value;
                   objs.push({
                     type: _vote.user.id === SceytChatClient.user.id ? 'addOwn' : 'add',
                     vote: _vote,
@@ -15177,39 +15198,39 @@ function watchForEvents() {
                   });
                 }
                 _i = 0, _objs = objs;
-              case 97:
+              case 100:
                 if (!(_i < _objs.length)) {
-                  _context2.n = 101;
+                  _context2.n = 104;
                   break;
                 }
                 obj = _objs[_i];
                 if (!(pollDetailsData !== null && pollDetailsData !== void 0 && pollDetailsData.id && obj.vote)) {
-                  _context2.n = 100;
+                  _context2.n = 103;
                   break;
                 }
                 key = pollDetailsData.id + "_" + obj.vote.optionId;
                 hasNext = ((_store$getState$Messa = store.getState().MessageReducer.pollVotesHasMore) === null || _store$getState$Messa === void 0 ? void 0 : _store$getState$Messa[key]) || false;
                 if (!(obj.type === 'addOwn')) {
-                  _context2.n = 99;
+                  _context2.n = 102;
                   break;
                 }
-                _context2.n = 98;
+                _context2.n = 101;
                 return put(addPollVotesToListAC(pollDetailsData.id, obj.vote.optionId, [obj.vote], hasNext, undefined));
-              case 98:
-                _context2.n = 100;
+              case 101:
+                _context2.n = 103;
                 break;
-              case 99:
-                _context2.n = 100;
+              case 102:
+                _context2.n = 103;
                 return put(deletePollVotesFromListAC(pollDetailsData.id, obj.vote.optionId, [obj.vote], messageId));
-              case 100:
+              case 103:
                 _i++;
-                _context2.n = 97;
+                _context2.n = 100;
                 break;
-              case 101:
+              case 104:
                 _i2 = 0, _objs2 = objs;
-              case 102:
+              case 105:
                 if (!(_i2 < _objs2.length)) {
-                  _context2.n = 104;
+                  _context2.n = 107;
                   break;
                 }
                 _obj = _objs2[_i2];
@@ -15222,29 +15243,29 @@ function watchForEvents() {
                   incrementVotesPerOptionCount: _obj.incrementVotesPerOptionCount
                 });
                 if (!(_channel1.id === _activeChannelId0)) {
-                  _context2.n = 103;
+                  _context2.n = 106;
                   break;
                 }
                 updateMessageOnAllMessages(messageId, {}, _obj);
-                _context2.n = 103;
+                _context2.n = 106;
                 return put(updateMessageAC(messageId, {}, undefined, _obj));
-              case 103:
+              case 106:
                 _i2++;
-                _context2.n = 102;
+                _context2.n = 105;
                 break;
-              case 104:
-                return _context2.a(3, 179);
-              case 105:
+              case 107:
+                return _context2.a(3, 182);
+              case 108:
                 _channel10 = args.channel, _pollDetails = args.pollDetails, _messageId = args.messageId;
                 _pollDetailsData = _pollDetails;
-                _context2.n = 106;
+                _context2.n = 109;
                 return call(getActiveChannelId);
-              case 106:
+              case 109:
                 _activeChannelId1 = _context2.v;
                 _deletedVotes = (_pollDetailsData === null || _pollDetailsData === void 0 ? void 0 : (_pollDetailsData$chan3 = _pollDetailsData.changedVotes) === null || _pollDetailsData$chan3 === void 0 ? void 0 : _pollDetailsData$chan3.removedVotes) || [];
                 _objs3 = [];
-                for (_iterator3 = _createForOfIteratorHelperLoose(_deletedVotes); !(_step3 = _iterator3()).done;) {
-                  _vote2 = _step3.value;
+                for (_iterator4 = _createForOfIteratorHelperLoose(_deletedVotes); !(_step4 = _iterator4()).done;) {
+                  _vote2 = _step4.value;
                   _objs3.push({
                     type: _vote2.user.id === SceytChatClient.user.id ? 'deleteOwn' : 'delete',
                     vote: _vote2,
@@ -15252,27 +15273,27 @@ function watchForEvents() {
                   });
                 }
                 _i3 = 0, _objs4 = _objs3;
-              case 107:
+              case 110:
                 if (!(_i3 < _objs4.length)) {
-                  _context2.n = 109;
+                  _context2.n = 112;
                   break;
                 }
                 _obj2 = _objs4[_i3];
                 if (!(_pollDetailsData !== null && _pollDetailsData !== void 0 && _pollDetailsData.id && _obj2.vote)) {
-                  _context2.n = 108;
+                  _context2.n = 111;
                   break;
                 }
-                _context2.n = 108;
+                _context2.n = 111;
                 return put(deletePollVotesFromListAC(_pollDetailsData.id, _obj2.vote.optionId, [_obj2.vote], _messageId));
-              case 108:
+              case 111:
                 _i3++;
-                _context2.n = 107;
+                _context2.n = 110;
                 break;
-              case 109:
+              case 112:
                 _i4 = 0, _objs5 = _objs3;
-              case 110:
+              case 113:
                 if (!(_i4 < _objs5.length)) {
-                  _context2.n = 112;
+                  _context2.n = 115;
                   break;
                 }
                 _obj3 = _objs5[_i4];
@@ -15281,29 +15302,29 @@ function watchForEvents() {
                   params: {}
                 }, _obj3);
                 if (!(_channel10.id === _activeChannelId1)) {
-                  _context2.n = 111;
+                  _context2.n = 114;
                   break;
                 }
                 updateMessageOnAllMessages(_messageId, {}, _obj3);
-                _context2.n = 111;
+                _context2.n = 114;
                 return put(updateMessageAC(_messageId, {}, undefined, _obj3));
-              case 111:
+              case 114:
                 _i4++;
-                _context2.n = 110;
+                _context2.n = 113;
                 break;
-              case 112:
-                return _context2.a(3, 179);
-              case 113:
+              case 115:
+                return _context2.a(3, 182);
+              case 116:
                 _channel11 = args.channel, _pollDetails2 = args.pollDetails, _messageId2 = args.messageId;
-                _context2.n = 114;
+                _context2.n = 117;
                 return call(getActiveChannelId);
-              case 114:
+              case 117:
                 _activeChannelId10 = _context2.v;
                 _pollDetailsData2 = _pollDetails2;
                 retractedVotes = (_pollDetailsData2 === null || _pollDetailsData2 === void 0 ? void 0 : (_pollDetailsData2$cha = _pollDetailsData2.changedVotes) === null || _pollDetailsData2$cha === void 0 ? void 0 : _pollDetailsData2$cha.removedVotes) || [];
                 _objs6 = [];
-                for (_iterator4 = _createForOfIteratorHelperLoose(retractedVotes); !(_step4 = _iterator4()).done;) {
-                  _vote4 = _step4.value;
+                for (_iterator5 = _createForOfIteratorHelperLoose(retractedVotes); !(_step5 = _iterator5()).done;) {
+                  _vote4 = _step5.value;
                   _objs6.push({
                     type: _vote4.user.id === SceytChatClient.user.id ? 'deleteOwn' : 'delete',
                     vote: _vote4,
@@ -15311,9 +15332,9 @@ function watchForEvents() {
                   });
                 }
                 _i5 = 0, _objs7 = _objs6;
-              case 115:
+              case 118:
                 if (!(_i5 < _objs7.length)) {
-                  _context2.n = 120;
+                  _context2.n = 123;
                   break;
                 }
                 _obj4 = _objs7[_i5];
@@ -15322,40 +15343,40 @@ function watchForEvents() {
                   params: {}
                 }, _obj4);
                 if (!(_pollDetailsData2 !== null && _pollDetailsData2 !== void 0 && _pollDetailsData2.id && retractedVotes.length > 0)) {
-                  _context2.n = 118;
+                  _context2.n = 121;
                   break;
                 }
-                _iterator5 = _createForOfIteratorHelperLoose(retractedVotes);
-              case 116:
-                if ((_step5 = _iterator5()).done) {
-                  _context2.n = 118;
+                _iterator6 = _createForOfIteratorHelperLoose(retractedVotes);
+              case 119:
+                if ((_step6 = _iterator6()).done) {
+                  _context2.n = 121;
                   break;
                 }
-                _vote3 = _step5.value;
-                _context2.n = 117;
+                _vote3 = _step6.value;
+                _context2.n = 120;
                 return put(deletePollVotesFromListAC(_pollDetailsData2.id, _vote3.optionId, [_vote3], _messageId2));
-              case 117:
-                _context2.n = 116;
+              case 120:
+                _context2.n = 119;
                 break;
-              case 118:
+              case 121:
                 if (!(_channel11.id === _activeChannelId10)) {
-                  _context2.n = 119;
+                  _context2.n = 122;
                   break;
                 }
                 updateMessageOnAllMessages(_messageId2, {}, _obj4);
-                _context2.n = 119;
+                _context2.n = 122;
                 return put(updateMessageAC(_messageId2, {}, undefined, _obj4));
-              case 119:
+              case 122:
                 _i5++;
-                _context2.n = 115;
+                _context2.n = 118;
                 break;
-              case 120:
-                return _context2.a(3, 179);
-              case 121:
+              case 123:
+                return _context2.a(3, 182);
+              case 124:
                 _channel12 = args.channel, _messageId3 = args.messageId;
-                _context2.n = 122;
+                _context2.n = 125;
                 return call(getActiveChannelId);
-              case 122:
+              case 125:
                 _activeChannelId11 = _context2.v;
                 _obj5 = {
                   type: 'close',
@@ -15366,54 +15387,54 @@ function watchForEvents() {
                   params: {}
                 }, _obj5);
                 if (!(_channel12.id === _activeChannelId11)) {
-                  _context2.n = 124;
+                  _context2.n = 127;
                   break;
                 }
                 updateMessageOnAllMessages(_messageId3, {}, _obj5);
-                _context2.n = 123;
+                _context2.n = 126;
                 return put(updateMessageAC(_messageId3, {}, undefined, _obj5));
-              case 123:
-                return _context2.a(3, 179);
-              case 124:
-                return _context2.a(3, 179);
-              case 125:
+              case 126:
+                return _context2.a(3, 182);
+              case 127:
+                return _context2.a(3, 182);
+              case 128:
                 _channel13 = args.channel, _user = args.user, _message3 = args.message, _reaction = args.reaction;
                 log.info('channel REACTION_DELETED ... ', _channel13);
                 channelFromMap = getChannelFromMap(_channel13.id);
                 _isSelf = _user.id === SceytChatClient.user.id;
-                _context2.n = 126;
+                _context2.n = 129;
                 return call(getActiveChannelId);
-              case 126:
+              case 129:
                 _activeChannelId12 = _context2.v;
                 if (!(_channel13.id === _activeChannelId12)) {
-                  _context2.n = 128;
+                  _context2.n = 131;
                   break;
                 }
-                _context2.n = 127;
+                _context2.n = 130;
                 return put(deleteReactionFromMessageAC(_message3, _reaction, _isSelf));
-              case 127:
+              case 130:
                 removeReactionOnAllMessages(_message3, _reaction, true);
-              case 128:
+              case 131:
                 _channelUpdateParams = JSON.parse(JSON.stringify(_channel13));
                 if (channelFromMap && channelFromMap.lastReactedMessage && channelFromMap.lastReactedMessage.id === _message3.id) {
                   _channelUpdateParams.lastReactedMessage = null;
                 }
-                _context2.n = 129;
+                _context2.n = 132;
                 return put(updateChannelDataAC(_channel13.id, _channelUpdateParams));
-              case 129:
+              case 132:
                 updateChannelOnAllChannels(_channel13.id, _channelUpdateParams);
                 if (checkChannelExistsOnMessagesMap(_channel13.id)) {
                   removeReactionToMessageOnMap(_channel13.id, _message3, _reaction, true);
                 }
-                return _context2.a(3, 179);
-              case 130:
+                return _context2.a(3, 182);
+              case 133:
                 _channel14 = args.channel;
                 if (!_channel14) {
-                  _context2.n = 132;
+                  _context2.n = 135;
                   break;
                 }
                 _updatedChannel = JSON.parse(JSON.stringify(_channel14));
-                _context2.n = 131;
+                _context2.n = 134;
                 return put(updateChannelDataAC(_channel14.id, {
                   lastMessage: _channel14.lastMessage,
                   newMessageCount: _channel14.newMessageCount,
@@ -15426,36 +15447,36 @@ function watchForEvents() {
                   lastDisplayedMessageId: _channel14.lastDisplayedMessageId,
                   messageRetentionPeriod: _channel14.messageRetentionPeriod
                 }));
-              case 131:
+              case 134:
                 updateChannelOnAllChannels(_channel14.id, _updatedChannel);
-              case 132:
-                return _context2.a(3, 179);
-              case 133:
+              case 135:
+                return _context2.a(3, 182);
+              case 136:
                 _channel15 = args.channel;
                 log.info('CLEAR_HISTORY: ', _channel15);
-                _context2.n = 134;
+                _context2.n = 137;
                 return call(getActiveChannelId);
-              case 134:
+              case 137:
                 _activeChannelId13 = _context2.v;
-                _context2.n = 135;
+                _context2.n = 138;
                 return call(checkChannelExists, _channel15.id);
-              case 135:
+              case 138:
                 channelExist = _context2.v;
                 if (!(_channel15.id === _activeChannelId13)) {
-                  _context2.n = 137;
+                  _context2.n = 140;
                   break;
                 }
-                _context2.n = 136;
+                _context2.n = 139;
                 return put(clearMessagesAC());
-              case 136:
+              case 139:
                 removeAllMessages();
-              case 137:
+              case 140:
                 removeMessagesFromMap(_channel15.id);
                 if (!channelExist) {
-                  _context2.n = 138;
+                  _context2.n = 141;
                   break;
                 }
-                _context2.n = 138;
+                _context2.n = 141;
                 return put(updateChannelDataAC(_channel15.id, {
                   lastMessage: null,
                   newMessageCount: 0,
@@ -15463,7 +15484,7 @@ function watchForEvents() {
                   muted: _channel15.muted,
                   mutedTill: _channel15.mutedTill
                 }));
-              case 138:
+              case 141:
                 updateChannelOnAllChannels(_channel15.id, {
                   lastMessage: null,
                   newMessageCount: 0,
@@ -15471,173 +15492,173 @@ function watchForEvents() {
                   muted: _channel15.muted,
                   mutedTill: _channel15.mutedTill
                 });
-                return _context2.a(3, 179);
-              case 139:
+                return _context2.a(3, 182);
+              case 142:
                 _channel16 = args.channel;
                 log.info('channel MUTE ... ');
-                _context2.n = 140;
+                _context2.n = 143;
                 return put(updateChannelDataAC(_channel16.id, {
                   muted: _channel16.muted,
                   mutedTill: _channel16.mutedTill
                 }));
-              case 140:
+              case 143:
                 updateChannelOnAllChannels(_channel16.id, {
                   muted: _channel16.muted,
                   mutedTill: _channel16.mutedTill
                 });
-                return _context2.a(3, 179);
-              case 141:
+                return _context2.a(3, 182);
+              case 144:
                 _channel17 = args.channel;
                 log.info('channel UNMUTE ... ');
-                _context2.n = 142;
+                _context2.n = 145;
                 return put(updateChannelDataAC(_channel17.id, {
                   muted: _channel17.muted,
                   mutedTill: _channel17.mutedTill
                 }));
-              case 142:
+              case 145:
                 updateChannelOnAllChannels(_channel17.id, {
                   muted: _channel17.muted,
                   mutedTill: _channel17.mutedTill
                 });
-                return _context2.a(3, 179);
-              case 143:
+                return _context2.a(3, 182);
+              case 146:
                 _channel18 = args.channel;
                 log.info('channel PINED ... ');
-                _context2.n = 144;
+                _context2.n = 147;
                 return put(updateChannelDataAC(_channel18.id, {
                   pinnedAt: _channel18.pinnedAt
                 }, true));
-              case 144:
+              case 147:
                 updateChannelOnAllChannels(_channel18.id, {
                   pinnedAt: _channel18.pinnedAt
                 });
-                return _context2.a(3, 179);
-              case 145:
+                return _context2.a(3, 182);
+              case 148:
                 _channel19 = args.channel;
                 log.info('channel UNPINED ... ');
-                _context2.n = 146;
+                _context2.n = 149;
                 return put(updateChannelDataAC(_channel19.id, {
                   pinnedAt: _channel19.pinnedAt
                 }, false, true));
-              case 146:
+              case 149:
                 updateChannelOnAllChannels(_channel19.id, {
                   pinnedAt: _channel19.pinnedAt
                 });
-                return _context2.a(3, 179);
-              case 147:
+                return _context2.a(3, 182);
+              case 150:
                 _channel20 = args.channel;
                 log.info('channel HIDE ... ');
-                _context2.n = 148;
+                _context2.n = 151;
                 return put(setChannelToHideAC(_channel20));
-              case 148:
-                return _context2.a(3, 179);
-              case 149:
+              case 151:
+                return _context2.a(3, 182);
+              case 152:
                 _channel21 = args.channel;
                 log.info('channel UNHIDE ... ');
-                _context2.n = 150;
+                _context2.n = 153;
                 return put(setChannelToUnHideAC(_channel21));
-              case 150:
-                return _context2.a(3, 179);
-              case 151:
+              case 153:
+                return _context2.a(3, 182);
+              case 154:
                 _channel22 = args.channel;
-                _context2.n = 152;
+                _context2.n = 155;
                 return put(updateChannelDataAC(_channel22.id, {
                   unread: _channel22.unread,
                   muted: _channel22.muted,
                   mutedTill: _channel22.mutedTill
                 }));
-              case 152:
+              case 155:
                 _groupName5 = getChannelGroupName(_channel22);
-                _context2.n = 153;
+                _context2.n = 156;
                 return put(updateSearchedChannelDataAC(_channel22.id, {
                   unread: _channel22.unread
                 }, _groupName5));
-              case 153:
+              case 156:
                 updateChannelOnAllChannels(_channel22.id, {
                   unread: _channel22.unread
                 });
-                return _context2.a(3, 179);
-              case 154:
+                return _context2.a(3, 182);
+              case 157:
                 _channel23 = args.channel;
-                _context2.n = 155;
+                _context2.n = 158;
                 return put(updateChannelDataAC(_channel23.id, {
                   unread: _channel23.unread,
                   muted: _channel23.muted,
                   mutedTill: _channel23.mutedTill
                 }));
-              case 155:
+              case 158:
                 _groupName6 = getChannelGroupName(_channel23);
-                _context2.n = 156;
+                _context2.n = 159;
                 return put(updateSearchedChannelDataAC(_channel23.id, {
                   unread: _channel23.unread
                 }, _groupName6));
-              case 156:
+              case 159:
                 updateChannelOnAllChannels(_channel23.id, {
                   unread: _channel23.unread
                 });
-                return _context2.a(3, 179);
-              case 157:
+                return _context2.a(3, 182);
+              case 160:
                 _channel24 = args.channel, members = args.members;
                 log.info('channel CHANGE_ROLE  channel ... ', _channel24);
                 log.info('channel CHANGE_ROLE  member ... ', members);
-                _context2.n = 158;
+                _context2.n = 161;
                 return call(getActiveChannelId);
-              case 158:
+              case 161:
                 _activeChannelId14 = _context2.v;
                 if (!(_channel24.id === _activeChannelId14)) {
-                  _context2.n = 159;
+                  _context2.n = 162;
                   break;
                 }
-                _context2.n = 159;
+                _context2.n = 162;
                 return put(updateMembersAC(members));
-              case 159:
+              case 162:
                 i = 0;
-              case 160:
+              case 163:
                 if (!(i < members.length)) {
-                  _context2.n = 163;
+                  _context2.n = 166;
                   break;
                 }
                 if (!(members[i].id === SceytChatClient.user.id)) {
-                  _context2.n = 162;
+                  _context2.n = 165;
                   break;
                 }
-                _context2.n = 161;
+                _context2.n = 164;
                 return put(updateChannelDataAC(_channel24.id, {
                   userRole: members[i].role,
                   muted: _channel24.muted,
                   mutedTill: _channel24.mutedTill
                 }));
-              case 161:
+              case 164:
                 updateChannelOnAllChannels(_channel24.id, {
                   userRole: members[i].role,
                   muted: _channel24.muted,
                   mutedTill: _channel24.mutedTill
                 });
-              case 162:
+              case 165:
                 i++;
-                _context2.n = 160;
+                _context2.n = 163;
                 break;
-              case 163:
-                return _context2.a(3, 179);
-              case 164:
+              case 166:
+                return _context2.a(3, 182);
+              case 167:
                 _channel25 = args.channel;
                 log.info('channel frozen  channel ... ', _channel25);
-                return _context2.a(3, 179);
-              case 165:
+                return _context2.a(3, 182);
+              case 168:
                 _channel26 = args.channel;
                 log.info('channel unfrozen  channel ... ', _channel26);
-                return _context2.a(3, 179);
-              case 166:
+                return _context2.a(3, 182);
+              case 169:
                 _channelId2 = args.channelId, from = args.from, name = args.name;
                 log.info('channel event received >>>... . . . . . ', args);
                 if (!(from.id === SceytChatClient.user.id)) {
-                  _context2.n = 167;
+                  _context2.n = 170;
                   break;
                 }
-                return _context2.a(3, 179);
-              case 167:
+                return _context2.a(3, 182);
+              case 170:
                 if (!(name === 'start_typing')) {
-                  _context2.n = 169;
+                  _context2.n = 172;
                   break;
                 }
                 if (!usersTimeout[_channelId2]) {
@@ -15649,27 +15670,27 @@ function watchForEvents() {
                 usersTimeout[_channelId2][from.id] = setTimeout(function () {
                   channelListener.onReceivedChannelEvent(_channelId2, from, 'stop_typing');
                 }, 5000);
-                _context2.n = 168;
+                _context2.n = 171;
                 return put(switchTypingIndicatorAC(true, _channelId2, from));
-              case 168:
-                _context2.n = 174;
+              case 171:
+                _context2.n = 177;
                 break;
-              case 169:
+              case 172:
                 if (!(name === 'stop_typing')) {
-                  _context2.n = 171;
+                  _context2.n = 174;
                   break;
                 }
                 if (usersTimeout[_channelId2] && usersTimeout[_channelId2][from.id]) {
                   clearTimeout(usersTimeout[_channelId2][from.id]);
                 }
-                _context2.n = 170;
+                _context2.n = 173;
                 return put(switchTypingIndicatorAC(false, _channelId2, from));
-              case 170:
-                _context2.n = 174;
+              case 173:
+                _context2.n = 177;
                 break;
-              case 171:
+              case 174:
                 if (!(name === 'start_recording')) {
-                  _context2.n = 173;
+                  _context2.n = 176;
                   break;
                 }
                 if (!usersTimeout[_channelId2]) {
@@ -15681,50 +15702,50 @@ function watchForEvents() {
                 usersTimeout[_channelId2][from.id] = setTimeout(function () {
                   channelListener.onReceivedChannelEvent(_channelId2, from, 'stop_recording');
                 }, 5000);
-                _context2.n = 172;
+                _context2.n = 175;
                 return put(switchRecordingIndicatorAC(true, _channelId2, from));
-              case 172:
-                _context2.n = 174;
+              case 175:
+                _context2.n = 177;
                 break;
-              case 173:
+              case 176:
                 if (!(name === 'stop_recording')) {
-                  _context2.n = 174;
+                  _context2.n = 177;
                   break;
                 }
                 if (usersTimeout[_channelId2] && usersTimeout[_channelId2][from.id]) {
                   clearTimeout(usersTimeout[_channelId2][from.id]);
                 }
-                _context2.n = 174;
+                _context2.n = 177;
                 return put(switchRecordingIndicatorAC(false, _channelId2, from));
-              case 174:
-                return _context2.a(3, 179);
-              case 175:
+              case 177:
+                return _context2.a(3, 182);
+              case 178:
                 status = args.status;
                 log.info('connection status changed . . . . . ', status);
-                _context2.n = 176;
+                _context2.n = 179;
                 return put(setConnectionStatusAC(status));
-              case 176:
+              case 179:
                 if (!(status === CONNECTION_STATUS.CONNECTED)) {
-                  _context2.n = 177;
+                  _context2.n = 180;
                   break;
                 }
-                _context2.n = 177;
+                _context2.n = 180;
                 return put(getRolesAC());
-              case 177:
-                return _context2.a(3, 179);
-              case 178:
+              case 180:
+                return _context2.a(3, 182);
+              case 181:
                 log.warn('UNHANDLED EVENT FROM REDUX-SAGA EVENT-CHANNEL');
-              case 179:
-                _context2.n = 181;
+              case 182:
+                _context2.n = 184;
                 break;
-              case 180:
-                _context2.p = 180;
+              case 183:
+                _context2.p = 183;
                 _t2 = _context2.v;
                 log.error('Error in watchForEvents:', _t2);
-              case 181:
+              case 184:
                 return _context2.a(2);
             }
-          }, _callee2, null, [[0, 180]]);
+          }, _callee2, null, [[0, 183]]);
         });
       case 1:
         return _context3.d(_regeneratorValues(_loop()), 2);
@@ -34749,7 +34770,8 @@ var OGMetadata = function OGMetadata(_ref) {
   var _useColor = useColors(),
     incomingMessageBackgroundX = _useColor[THEME_COLORS.INCOMING_MESSAGE_BACKGROUND_X],
     outgoingMessageBackgroundX = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND_X],
-    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
+    textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY];
   var attachment = useMemo(function () {
     return attachments.find(function (attachment) {
       return attachment.type === attachmentTypes.link;
@@ -34875,7 +34897,7 @@ var OGMetadata = function OGMetadata(_ref) {
     }
   }, []);
   useEffect(function () {
-    if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url && !metadata) {
+    if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url && !(oGMetadata !== null && oGMetadata !== void 0 && oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url])) {
       setShouldAnimate(true);
       var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
       if (url) {
@@ -34883,6 +34905,7 @@ var OGMetadata = function OGMetadata(_ref) {
           try {
             if (cachedMetadata) {
               handleMetadata(cachedMetadata);
+              setMetadataLoaded(true);
             }
             ogMetadataQueryBuilder(url);
             return Promise.resolve();
@@ -34895,7 +34918,7 @@ var OGMetadata = function OGMetadata(_ref) {
         });
       }
     }
-  }, [attachment, metadata]);
+  }, [attachment, oGMetadata === null || oGMetadata === void 0 ? void 0 : oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url]]);
   var ogUrl = useMemo(function () {
     var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
     var urlObj = validateUrl(url);
@@ -34930,18 +34953,23 @@ var OGMetadata = function OGMetadata(_ref) {
       link: 4
     };
   }, [order]);
+  var MIN_IMAGE_HEIGHT = 180;
+  var MAX_IMAGE_HEIGHT = 400;
+  var showImage = useMemo(function () {
+    return hasImage && calculatedImageHeight >= MIN_IMAGE_HEIGHT && calculatedImageHeight <= MAX_IMAGE_HEIGHT;
+  }, [hasImage, calculatedImageHeight]);
   useEffect(function () {
     if (metadataLoaded || oGMetadata !== null && oGMetadata !== void 0 && oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url]) {
-      if (metadata && metadataGetSuccessCallback && (hasImage || faviconUrl)) {
-        metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, true, hasImage);
+      if (oGMetadata !== null && oGMetadata !== void 0 && oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url] && metadataGetSuccessCallback && metadata) {
+        metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, true, showImage, metadata);
       } else {
-        metadataGetSuccessCallback === null || metadataGetSuccessCallback === void 0 ? void 0 : metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, false, false);
+        metadataGetSuccessCallback === null || metadataGetSuccessCallback === void 0 ? void 0 : metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, false, false, metadata);
       }
     }
-  }, [metadata, metadataLoaded, oGMetadata, attachment === null || attachment === void 0 ? void 0 : attachment.url, hasImage]);
+  }, [metadataLoaded, oGMetadata, attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata]);
   var elements = useMemo(function () {
-    var _resolvedOrder$image, _metadata$og11, _metadata$og11$image, _metadata$og11$image$, _resolvedOrder$title, _metadata$og12, _metadata$og13, _resolvedOrder$descri, _metadata$og14, _metadata$og15, _resolvedOrder$link;
-    return [hasImage ? {
+    var _resolvedOrder$image, _metadata$og11, _metadata$og11$image, _metadata$og11$image$, _resolvedOrder$title, _metadata$og12, _metadata$og13, _metadata$og13$title, _resolvedOrder$descri, _metadata$og14, _metadata$og15, _metadata$og15$descri, _resolvedOrder$link;
+    return [showImage ? {
       key: 'image',
       order: (_resolvedOrder$image = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.image) != null ? _resolvedOrder$image : 1,
       render: (/*#__PURE__*/React__default.createElement(ImageContainer, {
@@ -34962,8 +34990,9 @@ var OGMetadata = function OGMetadata(_ref) {
       render: ogShowTitle && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : _metadata$og12.title) && (/*#__PURE__*/React__default.createElement(Title$3, {
         maxWidth: maxWidth,
         shouldAnimate: shouldAnimate,
-        padding: infoPadding
-      }, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og13 = metadata.og) === null || _metadata$og13 === void 0 ? void 0 : _metadata$og13.title)))
+        padding: infoPadding,
+        color: textPrimary
+      }, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og13 = metadata.og) === null || _metadata$og13 === void 0 ? void 0 : (_metadata$og13$title = _metadata$og13.title) === null || _metadata$og13$title === void 0 ? void 0 : _metadata$og13$title.trim())))
     }, {
       key: 'description',
       order: (_resolvedOrder$descri = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.description) != null ? _resolvedOrder$descri : 3,
@@ -34972,7 +35001,7 @@ var OGMetadata = function OGMetadata(_ref) {
         shouldAnimate: shouldAnimate,
         color: textSecondary,
         padding: infoPadding
-      }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og15 = metadata.og) === null || _metadata$og15 === void 0 ? void 0 : _metadata$og15.description))
+      }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og15 = metadata.og) === null || _metadata$og15 === void 0 ? void 0 : (_metadata$og15$descri = _metadata$og15.description) === null || _metadata$og15$descri === void 0 ? void 0 : _metadata$og15$descri.trim()))
     }, {
       key: 'link',
       order: (_resolvedOrder$link = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.link) != null ? _resolvedOrder$link : 4,
@@ -35030,7 +35059,8 @@ var OGMetadata = function OGMetadata(_ref) {
     borderRadius: ogContainerBorderRadius,
     padding: ogContainerPadding,
     className: ogContainerClassName,
-    containerMargin: ogContainerMargin
+    containerMargin: ogContainerMargin,
+    maxWidth: maxWidth
   }, isInviteLink ? {
     as: 'div',
     onClick: function onClick() {
@@ -35044,84 +35074,90 @@ var OGMetadata = function OGMetadata(_ref) {
   }), content);
 };
 var sharedKeyframes = "\n  @keyframes fadeInSlideUp {\n    from {\n      opacity: 0;\n      transform: translateY(10px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes expandHeight {\n    from {\n      max-height: 0;\n      opacity: 0;\n    }\n    to {\n      max-height: 1000px;\n      opacity: 1;\n    }\n  }\n";
-var OGMetadataContainer = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  min-width: inherit;\n  max-width: inherit;\n  width: 100%;\n  display: grid;\n  grid-template-columns: 1fr;\n  background-color: ", ";\n  border-radius: ", ";\n  margin: ", ";\n  // margin-bottom: ", ";\n  padding: ", ";\n  text-decoration: none;\n  color: inherit;\n  &:hover {\n    opacity: 0.9;\n    cursor: pointer;\n  }\n"])), function (_ref2) {
-  var showBackground = _ref2.showBackground,
-    customBg = _ref2.customBg,
-    bgColor = _ref2.bgColor;
-  return showBackground ? customBg != null ? customBg : bgColor : 'transparent';
+var OGMetadataContainer = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  min-width: inherit;\n  max-width: ", ";\n  width: 100%;\n  display: grid;\n  grid-template-columns: 1fr;\n  border-radius: 8px;\n  background-color: ", ";\n  border-radius: ", ";\n  margin: ", ";\n  // margin-bottom: ", ";\n  padding: ", ";\n  text-decoration: none;\n  // color: inherit;\n  &:hover {\n    opacity: 0.9;\n    cursor: pointer;\n  }\n"])), function (_ref2) {
+  var maxWidth = _ref2.maxWidth;
+  return maxWidth ? maxWidth + "px" : 'inherit';
 }, function (_ref3) {
-  var borderRadius = _ref3.borderRadius;
-  return borderRadius !== undefined ? borderRadius : '8px';
+  var showBackground = _ref3.showBackground,
+    customBg = _ref3.customBg,
+    bgColor = _ref3.bgColor;
+  return showBackground ? customBg != null ? customBg : bgColor : 'transparent';
 }, function (_ref4) {
-  var containerMargin = _ref4.containerMargin;
-  return containerMargin != null ? containerMargin : '0.8rem auto 0';
+  var borderRadius = _ref4.borderRadius;
+  return borderRadius !== undefined ? borderRadius : '8px';
 }, function (_ref5) {
-  var showOGMetadata = _ref5.showOGMetadata;
-  return showOGMetadata ? '0.4rem' : '0';
+  var containerMargin = _ref5.containerMargin;
+  return containerMargin != null ? containerMargin : '0.8rem auto 0';
 }, function (_ref6) {
-  var padding = _ref6.padding;
+  var showOGMetadata = _ref6.showOGMetadata;
+  return showOGMetadata ? '0.4rem' : '0';
+}, function (_ref7) {
+  var padding = _ref7.padding;
   return padding != null ? padding : '0';
 });
-var ImageContainer = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 100%;\n  height: ", ";\n  opacity: ", ";\n  margin: 0 auto;\n  overflow: hidden;\n  ", "\n"])), sharedKeyframes, function (_ref7) {
-  var containerHeight = _ref7.containerHeight;
+var ImageContainer = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 100%;\n  height: ", ";\n  opacity: ", ";\n  margin: 0 auto;\n  border-radius: 8px 8px 0 0;\n  overflow: hidden;\n  ", "\n"])), sharedKeyframes, function (_ref8) {
+  var containerHeight = _ref8.containerHeight;
   return containerHeight ? containerHeight + "px" : '0px';
-}, function (_ref8) {
-  var showOGMetadata = _ref8.showOGMetadata,
-    containerHeight = _ref8.containerHeight;
-  return showOGMetadata && containerHeight ? 1 : 0;
 }, function (_ref9) {
-  var shouldAnimate = _ref9.shouldAnimate,
-    showOGMetadata = _ref9.showOGMetadata,
+  var showOGMetadata = _ref9.showOGMetadata,
     containerHeight = _ref9.containerHeight;
+  return showOGMetadata && containerHeight ? 1 : 0;
+}, function (_ref0) {
+  var shouldAnimate = _ref0.shouldAnimate,
+    showOGMetadata = _ref0.showOGMetadata,
+    containerHeight = _ref0.containerHeight;
   return shouldAnimate && showOGMetadata && containerHeight && "\n    animation: expandHeight 0.3s ease-out forwards;\n  ";
 });
-var OGText = styled.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  ", "\n  ", ";\n"])), sharedKeyframes, function (_ref0) {
-  var shouldAnimate = _ref0.shouldAnimate;
+var OGText = styled.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  ", "\n  ", ";\n"])), sharedKeyframes, function (_ref1) {
+  var shouldAnimate = _ref1.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeInSlideUp 0.3s ease-out forwards;\n  ";
-}, function (_ref1) {
-  var margin = _ref1.margin;
+}, function (_ref10) {
+  var margin = _ref10.margin;
   return margin ? '12px' : '0';
 });
-var Title$3 = styled.p(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: bold;\n  font-size: 13px;\n  line-height: 16px;\n  margin: 8px 0 0 0;\n  padding: ", ";\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref10) {
-  var padding = _ref10.padding;
+var Title$3 = styled.p(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  ", "\n  // font-family: Inter;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 18px;\n  letter-spacing: 0px;\n  color: ", ";\n  margin: 4px 0 0 0;\n  padding: ", ";\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref11) {
+  var color = _ref11.color;
+  return color;
+}, function (_ref12) {
+  var padding = _ref12.padding;
   return padding != null ? padding : '0';
-}, function (_ref11) {
-  var maxWidth = _ref11.maxWidth;
+}, function (_ref13) {
+  var maxWidth = _ref13.maxWidth;
   return maxWidth && "\n    max-width: " + maxWidth + "px;\n  ";
-}, function (_ref12) {
-  var shouldAnimate = _ref12.shouldAnimate;
+}, function (_ref14) {
+  var shouldAnimate = _ref14.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeInSlideUp 0.3s ease-out 0.1s backwards;\n  ";
 });
-var Desc = styled.p(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  margin: 0 0 8px 0;\n  padding: ", ";\n  color: ", ";\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref13) {
-  var padding = _ref13.padding;
+var Desc = styled.p(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  margin: 4px 0 4px 0;\n  padding: ", ";\n  color: ", ";\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref15) {
+  var padding = _ref15.padding;
   return padding != null ? padding : '0';
-}, function (_ref14) {
-  var color = _ref14.color;
+}, function (_ref16) {
+  var color = _ref16.color;
   return color;
-}, function (_ref15) {
-  var maxWidth = _ref15.maxWidth;
+}, function (_ref17) {
+  var maxWidth = _ref17.maxWidth;
   return maxWidth && "\n    max-width: " + maxWidth + "px;\n  ";
-}, function (_ref16) {
-  var shouldAnimate = _ref16.shouldAnimate;
+}, function (_ref18) {
+  var shouldAnimate = _ref18.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeInSlideUp 0.3s ease-out 0.2s backwards;\n  ";
 });
-var Url = styled.p(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  margin: 0 0 12px 0;\n  padding: ", ";\n  color: gray;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref17) {
-  var padding = _ref17.padding;
+var Url = styled.p(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  margin: 0 0 12px 0;\n  padding: ", ";\n  color: gray;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref19) {
+  var padding = _ref19.padding;
   return padding != null ? padding : '0';
-}, function (_ref18) {
-  var maxWidth = _ref18.maxWidth;
+}, function (_ref20) {
+  var maxWidth = _ref20.maxWidth;
   return maxWidth && "\n    max-width: " + maxWidth + "px;\n  ";
-}, function (_ref19) {
-  var shouldAnimate = _ref19.shouldAnimate;
+}, function (_ref21) {
+  var shouldAnimate = _ref21.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeInSlideUp 0.3s ease-out 0.3s backwards;\n  ";
 });
-var Img = styled.img(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  border-radius: inherit;\n  ", "\n"])), sharedKeyframes, function (_ref20) {
-  var shouldAnimate = _ref20.shouldAnimate;
+var Img = styled.img(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  // object-fit: cover;\n  // object-position: center;\n  // image-rendering: auto;\n  border-radius: inherit;\n  ", "\n"])), sharedKeyframes, function (_ref22) {
+  var shouldAnimate = _ref22.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeIn 0.4s ease-out forwards;\n  ";
 });
-var OGRow = styled.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n"])));
+var OGRow = styled.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 0;\n"])));
 var OGTextWrapper = styled.div(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n  flex: 1 1 auto;\n"])));
-var FaviconContainer = styled.div(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose(["\n  width: 52px;\n  height: 52px;\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 12px;\n  flex: 0 0 52px;\n"])));
+var FaviconContainer = styled.div(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose(["\n  width: 52px;\n  height: 52px;\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 8px;\n  flex: 0 0 52px;\n"])));
 var FaviconImg = styled.img(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n"])));
 
 var _templateObject$G, _templateObject2$B, _templateObject3$v, _templateObject4$r, _templateObject5$m;
@@ -35350,6 +35386,41 @@ var MessageBody = function MessageBody(_ref) {
   var selectionIsActive = useMemo(function () {
     return selectedMessagesMap && selectedMessagesMap.size > 0;
   }, [selectedMessagesMap]);
+  var hasLongLinkAttachmentUrl = useMemo(function () {
+    if (!linkAttachment || !linkAttachment.url) return false;
+    return linkAttachment.url.length > 100;
+  }, [linkAttachment]);
+  var oGMetadata = useSelector(function (state) {
+    return state.MessageReducer.oGMetadata;
+  });
+  var linkMetadata = useMemo(function () {
+    if (!(linkAttachment !== null && linkAttachment !== void 0 && linkAttachment.url)) return null;
+    return (oGMetadata === null || oGMetadata === void 0 ? void 0 : oGMetadata[linkAttachment.url]) || null;
+  }, [oGMetadata, linkAttachment === null || linkAttachment === void 0 ? void 0 : linkAttachment.url]);
+  var ogMetadataContainerWidth = useMemo(function () {
+    var _linkMetadata$og, _linkMetadata$og$imag, _linkMetadata$og$imag2, _linkMetadata$og2, _linkMetadata$og3, _linkMetadata$og3$fav;
+    if (!linkMetadata || !linkAttachment) return (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400;
+    if (hasLongLinkAttachmentUrl) {
+      return 400;
+    }
+    var hasImage = (linkMetadata === null || linkMetadata === void 0 ? void 0 : (_linkMetadata$og = linkMetadata.og) === null || _linkMetadata$og === void 0 ? void 0 : (_linkMetadata$og$imag = _linkMetadata$og.image) === null || _linkMetadata$og$imag === void 0 ? void 0 : (_linkMetadata$og$imag2 = _linkMetadata$og$imag[0]) === null || _linkMetadata$og$imag2 === void 0 ? void 0 : _linkMetadata$og$imag2.url) && (linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.imageWidth) && (linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.imageHeight);
+    var imageWidth = linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.imageWidth;
+    var imageHeight = linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.imageHeight;
+    var calculatedImageHeight = imageWidth && imageHeight ? imageHeight / (imageWidth / ((ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400)) : 0;
+    var showImage = hasImage && calculatedImageHeight >= 180 && calculatedImageHeight <= 400;
+    var hasDescription = linkMetadata === null || linkMetadata === void 0 ? void 0 : (_linkMetadata$og2 = linkMetadata.og) === null || _linkMetadata$og2 === void 0 ? void 0 : _linkMetadata$og2.description;
+    var hasFavicon = (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogShowFavicon) && (linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.faviconLoaded) && (linkMetadata === null || linkMetadata === void 0 ? void 0 : (_linkMetadata$og3 = linkMetadata.og) === null || _linkMetadata$og3 === void 0 ? void 0 : (_linkMetadata$og3$fav = _linkMetadata$og3.favicon) === null || _linkMetadata$og3$fav === void 0 ? void 0 : _linkMetadata$og3$fav.url);
+    if (showImage) {
+      return 400;
+    }
+    if (hasDescription && hasFavicon) {
+      return 336;
+    }
+    if (hasDescription) {
+      return 356;
+    }
+    return (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400;
+  }, [linkMetadata, linkAttachment, ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth, ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogShowFavicon, hasLongLinkAttachmentUrl]);
   var handleRemoveFailedAttachment = function handleRemoveFailedAttachment(attachmentId) {
     log.info('remove attachment .. ', attachmentId);
   };
@@ -35367,7 +35438,10 @@ var MessageBody = function MessageBody(_ref) {
     },
     borderRadius: borderRadius,
     withAttachments: notLinkAttachment,
-    attachmentWidth: withAttachments ? mediaAttachment ? attachmentMetas && getSendAttachmentsAsSeparateMessages() && attachmentMetas.szw && calculateRenderedImageWidth(attachmentMetas.szw, attachmentMetas.szh, mediaAttachment.type === attachmentTypes.image ? imageAttachmentMaxWidth : videoAttachmentMaxWidth, mediaAttachment.type === attachmentTypes.image ? imageAttachmentMaxHeight : videoAttachmentMaxHeight)[0] || 420 : message.attachments[0].type === attachmentTypes.voice ? 254 : message.attachments[0].type === attachmentTypes.file ? fileAttachmentsBoxWidth : undefined : undefined,
+    hasLinkAttachment: !!linkAttachment,
+    hasLongLinkAttachmentUrl: hasLongLinkAttachmentUrl,
+    attachmentWidth: withAttachments ? mediaAttachment ? attachmentMetas && getSendAttachmentsAsSeparateMessages() && attachmentMetas.szw && calculateRenderedImageWidth(attachmentMetas.szw, attachmentMetas.szh, mediaAttachment.type === attachmentTypes.image ? imageAttachmentMaxWidth : videoAttachmentMaxWidth, mediaAttachment.type === attachmentTypes.image ? imageAttachmentMaxHeight : videoAttachmentMaxHeight)[0] || 400 : message.attachments[0].type === attachmentTypes.voice ? 254 : message.attachments[0].type === attachmentTypes.file ? fileAttachmentsBoxWidth : undefined : undefined,
+    ogMetadataMaxWidth: ogMetadataContainerWidth,
     noBody: !message.body && !withAttachments,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
@@ -35523,7 +35597,7 @@ var MessageBody = function MessageBody(_ref) {
     unsupportedMessage: unsupportedMessage,
     unsupportedMessageColor: textSecondary
   }, ogContainerFirst && linkAttachment && !mediaAttachment && !withMediaAttachment && !fileAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
-    maxWidth: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400,
+    maxWidth: ogMetadataContainerWidth,
     maxHeight: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxHeight,
     attachments: [linkAttachment],
     state: message.state,
@@ -35562,7 +35636,7 @@ var MessageBody = function MessageBody(_ref) {
   }))), !withAttachments && message.state === MESSAGE_STATUS.DELETE ? (/*#__PURE__*/React__default.createElement(MessageStatusDeleted$1, {
     color: textSecondary
   }, " Message was deleted. ")) : '', !ogContainerFirst && linkAttachment && !mediaAttachment && !withMediaAttachment && !fileAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
-    maxWidth: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400,
+    maxWidth: ogMetadataContainerWidth,
     maxHeight: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxHeight,
     attachments: [linkAttachment],
     state: message.state,
@@ -35584,7 +35658,7 @@ var MessageBody = function MessageBody(_ref) {
     ogContainerBackground: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerBackground,
     infoPadding: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.infoPadding,
     isInviteLink: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.isInviteLink
-  })), messageStatusAndTimePosition === 'onMessage' && !notLinkAttachment && (messageStatusVisible || messageTimeVisible) ? (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
+  })), messageStatusAndTimePosition === 'onMessage' && !notLinkAttachment && !!linkAttachment && (messageStatusVisible || messageTimeVisible) ? (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
     message: message,
     showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
     messageStatusDisplayingType: messageStatusDisplayingType,
@@ -35600,25 +35674,31 @@ var MessageBody = function MessageBody(_ref) {
     messageStatusVisible: !!messageStatusVisible,
     leftMargin: true,
     messageTimeColorOnAttachment: messageTimeColorOnAttachment || textSecondary
-  })) : null), notLinkAttachment && messageStatusAndTimePosition === 'onMessage' && (messageStatusVisible || messageTimeVisible) && (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
-    message: message,
-    showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
-    messageStatusDisplayingType: messageStatusDisplayingType,
-    messageStatusSize: messageStatusSize,
-    messageStatusColor: message.attachments[0].type === 'voice' ? textSecondary : message.attachments[0].type === 'image' || message.attachments[0].type === 'video' ? textOnPrimary : messageStateColor || textSecondary,
-    messageReadStatusColor: messageReadStatusColor,
-    messageStateFontSize: messageStateFontSize,
-    messageStateColor: messageStateColor,
-    messageTimeFontSize: messageTimeFontSize,
-    messageTimeColor: messageTimeColor,
-    messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
-    messageTimeVisible: !!messageTimeVisible,
-    messageStatusVisible: !!messageStatusVisible,
-    withAttachment: withAttachments,
-    leftMargin: true,
-    fileAttachment: withAttachments && (message.attachments[0].type === 'file' || message.attachments[0].type === 'voice'),
-    messageTimeColorOnAttachment: message.attachments[0].type === 'voice' ? textSecondary : message.attachments[0].type === 'image' || message.attachments[0].type === 'video' ? textOnPrimary : textSecondary
-  })), withAttachments && message.attachments.map(function (attachment) {
+  })) : null), notLinkAttachment && messageStatusAndTimePosition === 'onMessage' && (messageStatusVisible || messageTimeVisible) && function () {
+    var nonLinkAttachment = message.attachments.find(function (a) {
+      return a.type !== attachmentTypes.link;
+    });
+    var attachmentType = nonLinkAttachment === null || nonLinkAttachment === void 0 ? void 0 : nonLinkAttachment.type;
+    return /*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
+      message: message,
+      showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
+      messageStatusDisplayingType: messageStatusDisplayingType,
+      messageStatusSize: messageStatusSize,
+      messageStatusColor: attachmentType === 'voice' ? textSecondary : attachmentType === 'image' || attachmentType === 'video' ? textOnPrimary : messageStateColor || textSecondary,
+      messageReadStatusColor: messageReadStatusColor,
+      messageStateFontSize: messageStateFontSize,
+      messageStateColor: messageStateColor,
+      messageTimeFontSize: messageTimeFontSize,
+      messageTimeColor: messageTimeColor,
+      messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
+      messageTimeVisible: !!messageTimeVisible,
+      messageStatusVisible: !!messageStatusVisible,
+      withAttachment: withAttachments,
+      leftMargin: true,
+      fileAttachment: withAttachments && (attachmentType === 'file' || attachmentType === 'voice'),
+      messageTimeColorOnAttachment: attachmentType === 'voice' ? textSecondary : attachmentType === 'image' || attachmentType === 'video' ? textOnPrimary : textSecondary
+    });
+  }(), withAttachments && message.attachments.map(function (attachment) {
     return /*#__PURE__*/React__default.createElement(Attachment$1, {
       key: attachment.tid || attachment.url,
       handleMediaItemClick: selectionIsActive ? undefined : handleMediaItemClick,
@@ -35691,7 +35771,7 @@ var MessageStatusDeleted$1 = styled.span(_templateObject2$B || (_templateObject2
 }, function (props) {
   return props.fontSize;
 });
-var MessageBodyContainer = styled.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: ", ";\n  //display: inline-block;\n  border-radius: ", ";\n  direction: ", ";\n  max-width: ", ";\n  width: max-content;\n  padding: ", ";\n  //direction: ", ";\n  //overflow: ", ";\n  transition: all 0.3s;\n  transform-origin: right;\n"])), function (props) {
+var MessageBodyContainer = styled.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: ", ";\n  //display: inline-block;\n  border-radius: ", ";\n  direction: ", ";\n  max-width: ", ";\n  width: ", ";\n  overflow-wrap: break-word;\n  word-break: break-word;\n\n  ", "\n  padding: ", ";\n  //direction: ", ";\n  //overflow: ", ";\n  transition: all 0.3s;\n  transform-origin: right;\n"])), function (props) {
   var _props$outgoingMessag, _props$incomingMessag;
   return props.isSelfMessage ? (_props$outgoingMessag = props.outgoingMessageStyles) === null || _props$outgoingMessag === void 0 ? void 0 : _props$outgoingMessag.background : (_props$incomingMessag = props.incomingMessageStyles) === null || _props$incomingMessag === void 0 ? void 0 : _props$incomingMessag.background;
 }, function (props) {
@@ -35699,10 +35779,14 @@ var MessageBodyContainer = styled.div(_templateObject3$v || (_templateObject3$v
 }, function (props) {
   return props.rtlDirection ? 'initial' : '';
 }, function (props) {
-  return props.withAttachments ? props.attachmentWidth && props.attachmentWidth < 420 ? props.attachmentWidth < 165 ? props.isReplyMessage ? '210px' : '165px' : props.attachmentWidth + "px" : '420px' : '100%';
+  return props.hasLinkAttachment && !props.withAttachments ? props.ogMetadataMaxWidth ? props.ogMetadataMaxWidth + "px" : '416px' : props.hasLongLinkAttachmentUrl && !props.withAttachments ? '400px' : props.withAttachments ? props.attachmentWidth && props.attachmentWidth < 400 ? props.attachmentWidth < 165 ? props.isReplyMessage ? '210px' : '165px' : props.attachmentWidth + "px" : '400px' : '100%';
+}, function (props) {
+  return props.hasLinkAttachment && !props.withAttachments && props.ogMetadataMaxWidth ? props.ogMetadataMaxWidth + "px" : props.hasLongLinkAttachmentUrl && !props.withAttachments ? '416px' : 'max-content';
+}, function (props) {
+  return props.hasLongLinkAttachmentUrl && "\n    & a {\n      overflow-wrap: anywhere;\n      word-break: break-all;\n      white-space: normal;\n      max-width: " + (props.withAttachments ? '400px' : props.hasLinkAttachment && props.ogMetadataMaxWidth ? props.ogMetadataMaxWidth + "px" : '416px') + ";\n    }\n  ";
 }, function (props) {
   var _props$outgoingMessag2, _props$incomingMessag2;
-  return props.withAttachments ? props.isReplyMessage ? '1px 0 0 ' : '0' : props.isSelfMessage ? ((_props$outgoingMessag2 = props.outgoingMessageStyles) === null || _props$outgoingMessag2 === void 0 ? void 0 : _props$outgoingMessag2.background) === 'inherit' ? '0' : '8px 12px' : ((_props$incomingMessag2 = props.incomingMessageStyles) === null || _props$incomingMessag2 === void 0 ? void 0 : _props$incomingMessag2.background) === 'inherit' ? ' 0' : '8px 12px';
+  return props.withAttachments ? props.isReplyMessage ? '1px 0 0 ' : '0' : props.hasLinkAttachment ? '8px' : props.isSelfMessage ? ((_props$outgoingMessag2 = props.outgoingMessageStyles) === null || _props$outgoingMessag2 === void 0 ? void 0 : _props$outgoingMessag2.background) === 'inherit' ? '0' : '8px 12px' : ((_props$incomingMessag2 = props.incomingMessageStyles) === null || _props$incomingMessag2 === void 0 ? void 0 : _props$incomingMessag2.background) === 'inherit' ? ' 0' : '8px 12px';
 }, function (props) {
   return props.isSelfMessage ? 'initial' : '';
 }, function (props) {
@@ -36522,20 +36606,20 @@ var Message$1 = function Message(_ref) {
     setFrequentlyEmojisOpen(false);
   };
   var handleSendReadMarker = function handleSendReadMarker() {
-    if (isVisible && message.incoming && !(message.userMarkers && message.userMarkers.length && message.userMarkers.find(function (marker) {
-      return marker.name === MESSAGE_DELIVERY_STATUS.READ;
-    })) && channel.newMessageCount && channel.newMessageCount > 0 && connectionStatus === CONNECTION_STATUS.CONNECTED) {
-      dispatch(markMessagesAsReadAC(channel.id, [message.id]));
-    }
     if (!message.userMarkers.find(function (marker) {
       return marker.name === MESSAGE_DELIVERY_STATUS.DELIVERED;
     })) {
       if (message.userMarkers && message.userMarkers.length && message.userMarkers.find(function (marker) {
         return marker.name === MESSAGE_DELIVERY_STATUS.READ;
-      })) {
+      }) && message.incoming) {
         dispatch(markMessagesAsDeliveredAC(channel.id, [message.id]));
       }
     }
+    if (isVisible && message.incoming && !(message.userMarkers && message.userMarkers.length && message.userMarkers.find(function (marker) {
+      return marker.name === MESSAGE_DELIVERY_STATUS.READ;
+    })) && channel.newMessageCount && channel.newMessageCount > 0 && connectionStatus === CONNECTION_STATUS.CONNECTED) {
+      dispatch(markMessagesAsReadAC(channel.id, [message.id]));
+    }
   };
   var handleForwardMessage = function handleForwardMessage(channelIds) {
     if (channelIds && channelIds.length) {