sceyt-chat-react-uikit 1.8.8 → 1.8.9-beta.10

package/index.modern.js

@@ -13,7 +13,7 @@ import Cropper from 'react-easy-crop';
 import { CircularProgressbar } from 'react-circular-progressbar';
 import { FFmpeg } from '@ffmpeg/ffmpeg';
 import { toBlobURL, fetchFile } from '@ffmpeg/util';
-import { $applyNodeReplacement, TextNode, $createTextNode, $getSelection, $isRangeSelection, $isTextNode, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, $getRoot, $createParagraphNode, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_NORMAL } from 'lexical';
+import { $applyNodeReplacement, TextNode, $createTextNode, $getSelection, $isRangeSelection, $isTextNode, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, $getRoot, $createParagraphNode, PASTE_COMMAND, COMMAND_PRIORITY_NORMAL } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
@@ -10470,7 +10470,7 @@ if (isBrowser) {
 } else {
   cacheAvailable = 'caches' in global;
 }
-var ATTACHMENT_VERSION = "_1_0_1";
+var ATTACHMENT_VERSION = "_1_0_2";
 var setAttachmentToCache = function setAttachmentToCache(attachmentUrl, attachmentResponse) {
   try {
     var attachmentURLVersion = attachmentUrl + ATTACHMENT_VERSION;
@@ -11373,10 +11373,10 @@ function fetchOGMetadataForLinkAC(url) {
   };
 }
 
-var _excluded = ["data"];
 var DB_NAME = 'sceyt-uikit-messages';
-var DB_VERSION = 1;
+var DB_VERSION = 2;
 var CHANNELS_STORE = 'channels';
+var DRAFTS_STORE = 'drafts';
 var META_STORE = 'meta';
 var USER_META_KEY = 'userId';
 var IDB_MAX_STORED_CHANNELS = 200;
@@ -11400,6 +11400,11 @@ var openDb = function openDb() {
           });
           store.createIndex('savedAt', 'savedAt');
         }
+        if (!db.objectStoreNames.contains(DRAFTS_STORE)) {
+          db.createObjectStore(DRAFTS_STORE, {
+            keyPath: 'channelId'
+          });
+        }
         if (!db.objectStoreNames.contains(META_STORE)) {
           db.createObjectStore(META_STORE);
         }
@@ -11438,8 +11443,8 @@ var sanitizeMessageForPersist = function sanitizeMessageForPersist(message) {
   }
   return _extends({}, message, {
     attachments: message.attachments.map(function (attachment) {
-      var _ref = attachment || {},
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+      var rest = _extends({}, attachment || {});
+      delete rest.data;
       if (rest.attachmentUrl && String(rest.attachmentUrl).startsWith('blob:')) {
         rest.attachmentUrl = undefined;
       }
@@ -11493,6 +11498,68 @@ var restoreChannelMessages = function restoreChannelMessages(channelId) {
     return Promise.reject(e);
   }
 };
+var persistDraft = function persistDraft(channelId, draft) {
+  try {
+    return Promise.resolve(openDb()).then(function (db) {
+      if (!db || !channelId) return;
+      try {
+        var persistedDraft = _extends({}, draft || {});
+        delete persistedDraft.editorState;
+        db.transaction(DRAFTS_STORE, 'readwrite').objectStore(DRAFTS_STORE).put({
+          channelId: channelId,
+          draft: persistedDraft,
+          savedAt: Date.now()
+        });
+      } catch (e) {
+        log.info('messagesIdb: failed to persist draft', e);
+      }
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var restoreDrafts = function restoreDrafts() {
+  try {
+    return Promise.resolve(openDb()).then(function (db) {
+      return db ? _catch(function () {
+        return Promise.resolve(requestToPromise(db.transaction(DRAFTS_STORE, 'readonly').objectStore(DRAFTS_STORE).getAll()));
+      }, function (e) {
+        log.info('messagesIdb: failed to restore drafts', e);
+        return [];
+      }) : [];
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var removePersistedDraft = function removePersistedDraft(channelId) {
+  try {
+    return Promise.resolve(openDb()).then(function (db) {
+      if (!db || !channelId) return;
+      try {
+        db.transaction(DRAFTS_STORE, 'readwrite').objectStore(DRAFTS_STORE)["delete"](channelId);
+      } catch (e) {
+        log.info('messagesIdb: failed to remove draft', e);
+      }
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var clearPersistedDrafts = function clearPersistedDrafts() {
+  try {
+    return Promise.resolve(openDb()).then(function (db) {
+      if (!db) return;
+      try {
+        db.transaction(DRAFTS_STORE, 'readwrite').objectStore(DRAFTS_STORE).clear();
+      } catch (e) {
+        log.info('messagesIdb: failed to clear drafts', e);
+      }
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
 var clearPersistedChannels = function clearPersistedChannels() {
   try {
     return Promise.resolve(openDb()).then(function (db) {
@@ -11550,8 +11617,10 @@ var initMessagesIdbForUser = function initMessagesIdbForUser(userId) {
           var _temp = function () {
             if (storedUserId !== userId) {
               return Promise.resolve(clearPersistedChannels()).then(function () {
-                db.transaction(META_STORE, 'readwrite').objectStore(META_STORE).put(userId, USER_META_KEY);
-                _exit = true;
+                return Promise.resolve(clearPersistedDrafts()).then(function () {
+                  db.transaction(META_STORE, 'readwrite').objectStore(META_STORE).put(userId, USER_META_KEY);
+                  _exit = true;
+                });
               });
             }
           }();
@@ -12478,6 +12547,22 @@ function getAllPendingFromMap() {
   return result;
 }
 var draftMessagesMap = {};
+var draftListeners = new Set();
+var draftMessagesHydrated = false;
+var notifyDraftListeners = function notifyDraftListeners() {
+  return draftListeners.forEach(function (listener) {
+    return listener();
+  });
+};
+var subscribeToDraftMessages = function subscribeToDraftMessages(listener) {
+  draftListeners.add(listener);
+  return function () {
+    draftListeners["delete"](listener);
+  };
+};
+var areDraftMessagesHydrated = function areDraftMessagesHydrated() {
+  return draftMessagesHydrated;
+};
 var audioRecordingMap = {};
 var getDraftMessageFromMap = function getDraftMessageFromMap(channelId) {
   return draftMessagesMap[channelId];
@@ -12493,12 +12578,63 @@ var setAudioRecordingToMap = function setAudioRecordingToMap(channelId, audioRec
 };
 var removeDraftMessageFromMap = function removeDraftMessageFromMap(channelId) {
   delete draftMessagesMap[channelId];
+  Promise.resolve(removePersistedDraft(channelId))["catch"](function () {
+    return undefined;
+  });
+  notifyDraftListeners();
+};
+var clearDraftMessagesMap = function clearDraftMessagesMap() {
+  Object.keys(draftMessagesMap).forEach(function (channelId) {
+    return delete draftMessagesMap[channelId];
+  });
+  notifyDraftListeners();
 };
 var removeAudioRecordingFromMap = function removeAudioRecordingFromMap(channelId) {
   delete audioRecordingMap[channelId];
 };
-var setDraftMessageToMap = function setDraftMessageToMap(channelId, draftMessage) {
+var setDraftMessageToMap = function setDraftMessageToMap(channelId, draftMessage, options) {
+  if (options === void 0) {
+    options = {};
+  }
   draftMessagesMap[channelId] = draftMessage;
+  if (options.persist === false) {
+    Promise.resolve(removePersistedDraft(channelId))["catch"](function () {
+      return undefined;
+    });
+  } else {
+    Promise.resolve(persistDraft(channelId, draftMessage))["catch"](function () {
+      return undefined;
+    });
+  }
+  notifyDraftListeners();
+};
+var hydrateDraftMessages = function hydrateDraftMessages() {
+  try {
+    return Promise.resolve(restoreDrafts()).then(function (persistedDrafts) {
+      persistedDrafts.forEach(function (_ref) {
+        var channelId = _ref.channelId,
+          draft = _ref.draft;
+        var attachments = (draft.attachments || []).map(function (attachment) {
+          var data = attachment.data;
+          var restoredData = data instanceof Blob && typeof File !== 'undefined' && !(data instanceof File) ? new File([data], attachment.name || 'attachment', {
+            type: data.type || attachment.mimeType || 'application/octet-stream',
+            lastModified: attachment.lastModified || Date.now()
+          }) : data;
+          return _extends({}, attachment, {
+            data: restoredData,
+            attachmentUrl: restoredData instanceof Blob && typeof URL !== 'undefined' ? URL.createObjectURL(restoredData) : attachment.attachmentUrl
+          });
+        });
+        draftMessagesMap[channelId] = _extends({}, draft, {
+          attachments: attachments
+        });
+      });
+      draftMessagesHydrated = true;
+      notifyDraftListeners();
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
 };
 var checkPendingPollActionConflict = function checkPendingPollActionConflict(action) {
   var messageId = action.message.id || action.message.tid;
@@ -15159,7 +15295,7 @@ var resizeImageWithPica = function resizeImageWithPica(file, maxWidth, maxHeight
     maxHeight = 1600;
   }
   if (quality === void 0) {
-    quality = 0.82;
+    quality = 1;
   }
   try {
     return Promise.resolve(_catch(function () {
@@ -15255,7 +15391,7 @@ var resizeImageWithPica = function resizeImageWithPica(file, maxWidth, maxHeight
 var MAX_WIDTH = 1280;
 var MAX_HEIGHT = 1080;
 var MIME_TYPE = 'image/jpeg';
-var QUALITY = 0.9;
+var QUALITY = 1;
 var THUMBNAIL_MAX_WIDTH = 6;
 var THUMBNAIL_MAX_HEIGHT = 6;
 function resizeImage(file, maxWidth, maxHeight, quality) {
@@ -15682,11 +15818,11 @@ var getVideoFirstFrame = function getVideoFirstFrame(videoSrc, maxWidth, maxHeig
         var _exit4 = false;
         if (_exit3) return _result3;
         function _temp8(_result4) {
-          return _exit4 ? _result4 : Promise.resolve(extractFrameFromUrl(videoSrc, maxWidth, maxHeight, quality)).then(function (direct) {
+          return _exit4 ? _result4 : Promise.resolve(extractFrameFromUrl(videoSrc, scaledMaxWidth, scaledMaxHeight, quality)).then(function (direct) {
             return direct ? direct : _catch(function () {
               return Promise.resolve(fetch(videoSrc)).then(function (response) {
                 return Promise.resolve(response.blob()).then(function (blob) {
-                  return Promise.resolve(_extractFrameFromBlob2(blob, maxWidth, maxHeight, quality));
+                  return Promise.resolve(_extractFrameFromBlob2(blob, scaledMaxWidth, scaledMaxHeight, quality));
                 });
               });
             }, function (error) {
@@ -15700,7 +15836,7 @@ var getVideoFirstFrame = function getVideoFirstFrame(videoSrc, maxWidth, maxHeig
             return _catch(function () {
               return Promise.resolve(fetch(videoSrc)).then(function (_fetch) {
                 return Promise.resolve(_fetch.blob()).then(function (blob) {
-                  return Promise.resolve(_extractFrameFromBlob2(blob, maxWidth, maxHeight, quality)).then(function (_await$_extractFrameF2) {
+                  return Promise.resolve(_extractFrameFromBlob2(blob, scaledMaxWidth, scaledMaxHeight, quality)).then(function (_await$_extractFrameF2) {
                     _exit4 = true;
                     return _await$_extractFrameF2;
                   });
@@ -15708,7 +15844,7 @@ var getVideoFirstFrame = function getVideoFirstFrame(videoSrc, maxWidth, maxHeig
               });
             }, function (error) {
               log.warn('getVideoFirstFrame: failed to re-fetch blob url, trying directly', error);
-              return Promise.resolve(extractFrameFromUrl(videoSrc, maxWidth, maxHeight, quality)).then(function (_await$extractFrameFr) {
+              return Promise.resolve(extractFrameFromUrl(videoSrc, scaledMaxWidth, scaledMaxHeight, quality)).then(function (_await$extractFrameFr) {
                 _exit4 = true;
                 return _await$extractFrameFr;
               });
@@ -15717,9 +15853,11 @@ var getVideoFirstFrame = function getVideoFirstFrame(videoSrc, maxWidth, maxHeig
         }();
         return _temp7 && _temp7.then ? _temp7.then(_temp8) : _temp8(_temp7);
       }
+      var scaledMaxWidth = scaleForDevicePixelRatio(maxWidth);
+      var scaledMaxHeight = scaleForDevicePixelRatio(maxHeight);
       var _temp9 = function () {
         if (videoSrc instanceof Blob) {
-          return Promise.resolve(_extractFrameFromBlob2(videoSrc, maxWidth, maxHeight, quality)).then(function (_await$_extractFrameF) {
+          return Promise.resolve(_extractFrameFromBlob2(videoSrc, scaledMaxWidth, scaledMaxHeight, quality)).then(function (_await$_extractFrameF) {
             _exit3 = true;
             return _await$_extractFrameF;
           });
@@ -15734,6 +15872,16 @@ var getVideoFirstFrame = function getVideoFirstFrame(videoSrc, maxWidth, maxHeig
     return Promise.reject(e);
   }
 };
+var scaleForDevicePixelRatio = function scaleForDevicePixelRatio(value, cap) {
+  if (cap === void 0) {
+    cap = 2;
+  }
+  if (!value) {
+    return value;
+  }
+  var dpr = Math.min(window.devicePixelRatio || 1, cap);
+  return value * dpr;
+};
 var normalizeVideoBlob = function normalizeVideoBlob(blob) {
   try {
     return Promise.resolve(inspectVideoBlob(blob)).then(function (info) {
@@ -15964,7 +16112,7 @@ var compressAndCacheImage = function compressAndCacheImage(url, cacheKey, maxWid
               var file = new File([blob], 'image.jpeg', {
                 type: blob.type
               });
-              return Promise.resolve(resizeImageWithPica(file, maxWidth || 1280, maxHeight || 1080, quality || 1)).then(function (_ref2) {
+              return Promise.resolve(resizeImageWithPica(file, scaleForDevicePixelRatio(maxWidth || 1280), scaleForDevicePixelRatio(maxHeight || 1080), quality || 1)).then(function (_ref2) {
                 var compressedBlob = _ref2.blob;
                 var returningUrl = compressedBlob ? URL.createObjectURL(compressedBlob) : '';
                 if (compressedBlob) {
@@ -16051,7 +16199,76 @@ var createAttachmentUnavailableError = function createAttachmentUnavailableError
   return error;
 };
 
-var _excluded$1 = ["lastMessage"];
+var preparations = new Map();
+var beginVideoPreparation = function beginVideoPreparation(tid, file) {
+  var resolvePreparation;
+  var promise = new Promise(function (resolve) {
+    resolvePreparation = resolve;
+  });
+  preparations.set(tid, {
+    file: file,
+    status: 'loading',
+    promise: promise,
+    resolve: resolvePreparation
+  });
+};
+var completeVideoPreparation = function completeVideoPreparation(tid, preparation) {
+  var entry = preparations.get(tid);
+  if (!entry || entry.status !== 'loading') return;
+  var completed = _extends({}, preparation, {
+    status: 'ready'
+  });
+  preparations.set(tid, _extends({}, entry, completed));
+  entry.resolve(completed);
+};
+var failVideoPreparation = function failVideoPreparation(tid) {
+  var entry = preparations.get(tid);
+  if (!entry || entry.status !== 'loading') return;
+  var failed = {
+    file: entry.file,
+    status: 'failed'
+  };
+  preparations.set(tid, _extends({}, entry, failed));
+  entry.resolve(failed);
+};
+var waitForVideoPreparation = function waitForVideoPreparation(tid, timeoutMs) {
+  try {
+    var _temp2 = function _temp2(_result) {
+      return _exit ? _result : Promise.resolve(new Promise(function (resolve) {
+        var timeout = setTimeout(function () {
+          return resolve({
+            file: entry.file,
+            status: 'failed'
+          });
+        }, timeoutMs);
+        entry.promise.then(function (prepared) {
+          clearTimeout(timeout);
+          resolve(prepared);
+        });
+      }));
+    };
+    var _exit = false;
+    var entry = preparations.get(tid);
+    if (!entry) return Promise.resolve(null);
+    if (entry.status !== 'loading') return Promise.resolve(entry);
+    var _temp = function () {
+      if (timeoutMs === undefined) {
+        return Promise.resolve(entry.promise).then(function (_await$entry$promise) {
+          _exit = true;
+          return _await$entry$promise;
+        });
+      }
+    }();
+    return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var clearVideoPreparation = function clearVideoPreparation(tid) {
+  preparations["delete"](tid);
+};
+
+var _excluded = ["lastMessage"];
 var _marked = /*#__PURE__*/_regenerator().m(setMessageListLoading),
   _marked2 = /*#__PURE__*/_regenerator().m(cancelChannelMessageProcesses),
   _marked3 = /*#__PURE__*/_regenerator().m(getChannelForMessageMutation),
@@ -16120,6 +16337,31 @@ var queuedPrefetchRequests = new Map();
 var prefetchCompletionWaiters = new Map();
 var prefetchCancelVersions = new Map();
 var ACTIVE_CHANNEL_RECONNECT_REFRESH_TIMEOUT_MS = 1500;
+var applyPreparedVideoAttachments = function applyPreparedVideoAttachments(attachments) {
+  try {
+    return Promise.resolve(Promise.all(attachments.map(function (attachment) {
+      try {
+        if (!attachment.tid) return Promise.resolve();
+        return Promise.resolve(waitForVideoPreparation(attachment.tid)).then(function (prepared) {
+          if ((prepared === null || prepared === void 0 ? void 0 : prepared.status) === 'ready' && prepared.metadata) {
+            attachment.url = prepared.file;
+            attachment.data = prepared.file;
+            attachment.name = prepared.file.name;
+            attachment.size = prepared.file.size;
+            attachment.metadata = prepared.metadata;
+          }
+          clearVideoPreparation(attachment.tid);
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    }))).then(function () {
+      return attachments;
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
 var activeDisplayedCacheKey = null;
 var updateTabAttachmentCache = function updateTabAttachmentCache(channelId, attachments, messageUser) {
   if (!(attachments !== null && attachments !== void 0 && attachments.length)) return;
@@ -16338,8 +16580,8 @@ var handleUploadAttachments = function handleUploadAttachments(attachments, mess
     return Promise.resolve(Promise.all(attachments.map(function (attachment) {
       try {
         var _attachment$url, _attachment$url$type;
-        var _temp10 = function _temp10() {
-          function _temp0() {
+        var _temp1 = function _temp1() {
+          function _temp9() {
             store.dispatch(updateAttachmentUploadingStateAC(UPLOAD_STATE.SUCCESS, attachment.tid));
             var parsedAttachmentMeta = function () {
               if (!attachment.metadata) return {};
@@ -16358,68 +16600,55 @@ var handleUploadAttachments = function handleUploadAttachments(attachments, mess
             }
             return attachmentToSend;
           }
-          var _temp9 = function () {
+          var _temp8 = function () {
             if (!attachment.cachedUrl && fileType === 'image') {
               return _catch(function () {
-                var _temp2 = function () {
+                var _temp = function () {
                   if (blobLocal && blobLocal.type.startsWith('image/')) {
-                    var _attachment, _attachment2;
                     var file = attachment.url instanceof File ? attachment.url : new File([attachment.url], attachment.name || 'image', {
                       type: attachment.url.type || blobLocal.type
                     });
-                    var _calculateRenderedIma = calculateRenderedImageWidth(((_attachment = attachment) === null || _attachment === void 0 ? void 0 : _attachment.metadata.szw) || 1280, ((_attachment2 = attachment) === null || _attachment2 === void 0 ? void 0 : _attachment2.metadata.szh) || 1080),
-                      newWidth = _calculateRenderedIma[0],
-                      newHeight = _calculateRenderedIma[1];
-                    return Promise.resolve(resizeImageWithPica(file, newWidth, newHeight, 1)).then(function (_ref) {
-                      var resizedBlob = _ref.blob;
-                      var _temp = function () {
-                        if (resizedBlob) {
-                          var resizedResponse = new Response(resizedBlob, {
-                            headers: {
-                              'Content-Type': resizedBlob.type || blobLocal.type
-                            }
-                          });
-                          return Promise.resolve(setAttachmentToCache(uriLocal, resizedResponse)).then(function () {
-                            filePath = URL.createObjectURL(resizedBlob);
-                            store.dispatch(setUpdateMessageAttachmentAC(uriLocal, filePath));
-                            message.attachments[0] = _extends({}, message.attachments[0], {
-                              attachmentUrl: filePath
-                            });
-                            setAttachmentToCache(uriLocal + "_original_image_url", new Response(blobLocal, {
-                              headers: {
-                                'Content-Type': blobLocal.type
-                              }
-                            }));
-                            var originalImageUrl = URL.createObjectURL(blobLocal);
-                            store.dispatch(setUpdateMessageAttachmentAC(uriLocal + "_original_image_url", originalImageUrl));
-                          });
+                    return Promise.resolve(setAttachmentToCache(uriLocal, new Response(file, {
+                      headers: {
+                        'Content-Type': file.type
+                      }
+                    }))).then(function () {
+                      filePath = URL.createObjectURL(file);
+                      store.dispatch(setUpdateMessageAttachmentAC(uriLocal, filePath));
+                      message.attachments[0] = _extends({}, message.attachments[0], {
+                        attachmentUrl: filePath
+                      });
+                      setAttachmentToCache(uriLocal + "_original_image_url", new Response(blobLocal, {
+                        headers: {
+                          'Content-Type': blobLocal.type
                         }
-                      }();
-                      if (_temp && _temp.then) return _temp.then(function () {});
+                      }));
+                      var originalImageUrl = URL.createObjectURL(blobLocal);
+                      store.dispatch(setUpdateMessageAttachmentAC(uriLocal + "_original_image_url", originalImageUrl));
                     });
                   }
                 }();
-                if (_temp2 && _temp2.then) return _temp2.then(function () {});
+                if (_temp && _temp.then) return _temp.then(function () {});
               }, function (error) {
                 log.error('Error resizing and caching image during upload:', error);
               });
             } else {
-              var _temp11 = function () {
+              var _temp10 = function () {
                 if (!attachment.cachedUrl && fileType === 'video') {
-                  var _temp7 = function () {
+                  var _temp6 = function () {
                     if (blobLocal) {
-                      var _attachment3, _attachment4;
-                      var _calculateRenderedIma2 = calculateRenderedImageWidth(((_attachment3 = attachment) === null || _attachment3 === void 0 ? void 0 : _attachment3.metadata.szw) || 1280, ((_attachment4 = attachment) === null || _attachment4 === void 0 ? void 0 : _attachment4.metadata.szh) || 1080),
-                        newWidth = _calculateRenderedIma2[0],
-                        newHeight = _calculateRenderedIma2[1];
+                      var _attachment, _attachment2;
+                      var _calculateRenderedIma = calculateRenderedImageWidth(((_attachment = attachment) === null || _attachment === void 0 ? void 0 : _attachment.metadata.szw) || 1280, ((_attachment2 = attachment) === null || _attachment2 === void 0 ? void 0 : _attachment2.metadata.szh) || 1080),
+                        newWidth = _calculateRenderedIma[0],
+                        newHeight = _calculateRenderedIma[1];
                       return Promise.resolve(getVideoFirstFrame(blobLocal, newWidth, newHeight)).then(function (result) {
-                        var _temp6 = function () {
+                        var _temp5 = function () {
                           if (result) {
                             var frameBlobUrl = result.frameBlobUrl,
                               blob = result.blob;
-                            var _temp5 = function () {
+                            var _temp4 = function () {
                               if (frameBlobUrl && blob) {
-                                var _temp4 = function _temp4() {
+                                var _temp3 = function _temp3() {
                                   return Promise.resolve(setAttachmentToCache(uriLocal, response)).then(function () {
                                     store.dispatch(setUpdateMessageAttachmentAC(uriLocal, frameBlobUrl));
                                     message.attachments[0] = _extends({}, message.attachments[0], {
@@ -16432,7 +16661,7 @@ var handleUploadAttachments = function handleUploadAttachments(attachments, mess
                                     'Content-Type': blob.type
                                   }
                                 });
-                                var _temp3 = function () {
+                                var _temp2 = function () {
                                   if (blobLocal) {
                                     return Promise.resolve(setAttachmentToCache(uriLocal + "_original_video_url", new Response(blobLocal, {
                                       headers: {
@@ -16444,27 +16673,27 @@ var handleUploadAttachments = function handleUploadAttachments(attachments, mess
                                     });
                                   }
                                 }();
-                                return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
+                                return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2);
                               }
                             }();
-                            if (_temp5 && _temp5.then) return _temp5.then(function () {});
+                            if (_temp4 && _temp4.then) return _temp4.then(function () {});
                           }
                         }();
-                        if (_temp6 && _temp6.then) return _temp6.then(function () {});
+                        if (_temp5 && _temp5.then) return _temp5.then(function () {});
                       });
                     }
                   }();
-                  if (_temp7 && _temp7.then) return _temp7.then(function () {});
+                  if (_temp6 && _temp6.then) return _temp6.then(function () {});
                 }
               }();
-              if (_temp11 && _temp11.then) return _temp11.then(function () {});
+              if (_temp10 && _temp10.then) return _temp10.then(function () {});
             }
           }();
-          return _temp9 && _temp9.then ? _temp9.then(_temp0) : _temp0(_temp9);
+          return _temp8 && _temp8.then ? _temp8.then(_temp9) : _temp9(_temp8);
         };
-        var handleUploadProgress = function handleUploadProgress(_ref2) {
-          var loaded = _ref2.loaded,
-            total = _ref2.total;
+        var handleUploadProgress = function handleUploadProgress(_ref) {
+          var loaded = _ref.loaded,
+            total = _ref.total;
           store.dispatch(updateAttachmentUploadingProgressAC(loaded, total, attachment.tid));
         };
         if (!attachment.cachedUrl && !(attachment.url instanceof Blob)) {
@@ -16489,16 +16718,16 @@ var handleUploadAttachments = function handleUploadAttachments(attachments, mess
           }
         };
         var blobLocal = null;
-        var _temp1 = function () {
+        var _temp0 = function () {
           if (attachment.cachedUrl) {
             var _attachment$data;
             uriLocal = attachment.cachedUrl;
             var dataSize = ((_attachment$data = attachment.data) === null || _attachment$data === void 0 ? void 0 : _attachment$data.size) || 0;
             store.dispatch(updateAttachmentUploadingProgressAC(dataSize, dataSize, attachment.tid));
           } else {
-            return Promise.resolve(customUpload(attachment, handleUploadProgress, message.type, handleUpdateLocalPath)).then(function (_ref3) {
-              var uri = _ref3.uri,
-                blob = _ref3.blob;
+            return Promise.resolve(customUpload(attachment, handleUploadProgress, message.type, handleUpdateLocalPath)).then(function (_ref2) {
+              var uri = _ref2.uri,
+                blob = _ref2.blob;
               uriLocal = uri;
               blobLocal = blob;
               if (blobLocal) {
@@ -16509,7 +16738,7 @@ var handleUploadAttachments = function handleUploadAttachments(attachments, mess
             });
           }
         }();
-        return Promise.resolve(_temp1 && _temp1.then ? _temp1.then(_temp10) : _temp10(_temp1));
+        return Promise.resolve(_temp0 && _temp0.then ? _temp0.then(_temp1) : _temp1(_temp0));
       } catch (e) {
         return Promise.reject(e);
       }
@@ -16566,7 +16795,7 @@ var getResolvedChannelUpdateData = function getResolvedChannelUpdateData(channel
     return channelUpdateData;
   }
   var lastMessage = channelUpdateData.lastMessage,
-    restChannelUpdateData = _objectWithoutPropertiesLoose(channelUpdateData, _excluded$1);
+    restChannelUpdateData = _objectWithoutPropertiesLoose(channelUpdateData, _excluded);
   var resolvedLastMessage = getResolvedChannelLastMessage(channelId, lastMessage, lastMessage);
   if (!lastMessageNeedsUpdate((_getStoredChannel4 = getStoredChannel(channelId)) === null || _getStoredChannel4 === void 0 ? void 0 : _getStoredChannel4.lastMessage, resolvedLastMessage)) {
     return restChannelUpdateData;
@@ -17020,19 +17249,19 @@ function sendMessage(action) {
                       var fileType = (_attachment$data2 = attachment.data) === null || _attachment$data2 === void 0 ? void 0 : (_attachment$data2$typ = _attachment$data2.type) === null || _attachment$data2$typ === void 0 ? void 0 : _attachment$data2$typ.split('/')[0];
                       var updateImage = function updateImage() {
                         try {
-                          var _temp18 = function () {
+                          var _temp17 = function () {
                             if (!attachment.cachedUrl && fileType === 'image' && attachment.data) {
-                              var _temp13 = _catch(function () {
+                              var _temp12 = _catch(function () {
                                 var parsedMetadata = isJSON(attachment.metadata) ? JSON.parse(attachment.metadata) : attachment.metadata;
-                                var _calculateRenderedIma3 = calculateRenderedImageWidth((parsedMetadata === null || parsedMetadata === void 0 ? void 0 : parsedMetadata.szw) || 1280, (parsedMetadata === null || parsedMetadata === void 0 ? void 0 : parsedMetadata.szh) || 1080),
-                                  newWidth = _calculateRenderedIma3[0],
-                                  newHeight = _calculateRenderedIma3[1];
+                                var _calculateRenderedIma2 = calculateRenderedImageWidth((parsedMetadata === null || parsedMetadata === void 0 ? void 0 : parsedMetadata.szw) || 1280, (parsedMetadata === null || parsedMetadata === void 0 ? void 0 : parsedMetadata.szh) || 1080),
+                                  newWidth = _calculateRenderedIma2[0],
+                                  newHeight = _calculateRenderedIma2[1];
                                 var file = attachment.data instanceof File ? attachment.data : new File([attachment.data], attachment.name || 'image', {
                                   type: attachment.data.type
                                 });
-                                return Promise.resolve(resizeImageWithPica(file, newWidth, newHeight, 1)).then(function (_ref4) {
-                                  var resizedBlob = _ref4.blob;
-                                  var _temp12 = function () {
+                                return Promise.resolve(resizeImageWithPica(file, newWidth, newHeight, 1)).then(function (_ref3) {
+                                  var resizedBlob = _ref3.blob;
+                                  var _temp11 = function () {
                                     if (resizedBlob) {
                                       return Promise.resolve(setAttachmentToCache(uriLocal, new Response(resizedBlob, {
                                         headers: {
@@ -17050,22 +17279,22 @@ function sendMessage(action) {
                                       });
                                     }
                                   }();
-                                  if (_temp12 && _temp12.then) return _temp12.then(function () {});
+                                  if (_temp11 && _temp11.then) return _temp11.then(function () {});
                                 });
                               }, function (err) {
                                 log.error('Error caching resized image on upload completion:', err);
                               });
-                              if (_temp13 && _temp13.then) return _temp13.then(function () {});
+                              if (_temp12 && _temp12.then) return _temp12.then(function () {});
                             } else {
-                              var _temp19 = function () {
+                              var _temp18 = function () {
                                 if (!attachment.cachedUrl && fileType === 'video' && attachment.data) {
-                                  var _temp16 = _catch(function () {
+                                  var _temp15 = _catch(function () {
                                     var parsedMetadata = isJSON(attachment.metadata) ? JSON.parse(attachment.metadata) : attachment.metadata;
-                                    var _calculateRenderedIma4 = calculateRenderedImageWidth((parsedMetadata === null || parsedMetadata === void 0 ? void 0 : parsedMetadata.szw) || 1280, (parsedMetadata === null || parsedMetadata === void 0 ? void 0 : parsedMetadata.szh) || 1080),
-                                      newWidth = _calculateRenderedIma4[0],
-                                      newHeight = _calculateRenderedIma4[1];
+                                    var _calculateRenderedIma3 = calculateRenderedImageWidth((parsedMetadata === null || parsedMetadata === void 0 ? void 0 : parsedMetadata.szw) || 1280, (parsedMetadata === null || parsedMetadata === void 0 ? void 0 : parsedMetadata.szh) || 1080),
+                                      newWidth = _calculateRenderedIma3[0],
+                                      newHeight = _calculateRenderedIma3[1];
                                     return Promise.resolve(getVideoFirstFrame(attachment.data, newWidth, newHeight)).then(function (result) {
-                                      var _temp15 = function () {
+                                      var _temp14 = function () {
                                         if (result) {
                                           var frameBlobUrl = result.frameBlobUrl,
                                             blob = result.blob;
@@ -17075,7 +17304,7 @@ function sendMessage(action) {
                                             }
                                           }))).then(function () {
                                             store.dispatch(setUpdateMessageAttachmentAC(uriLocal, frameBlobUrl));
-                                            var _temp14 = function () {
+                                            var _temp13 = function () {
                                               if (attachment.data) {
                                                 return Promise.resolve(setAttachmentToCache(uriLocal + '_original_video_url', new Response(attachment.data, {
                                                   headers: {
@@ -17086,22 +17315,22 @@ function sendMessage(action) {
                                                 });
                                               }
                                             }();
-                                            if (_temp14 && _temp14.then) return _temp14.then(function () {});
+                                            if (_temp13 && _temp13.then) return _temp13.then(function () {});
                                           });
                                         }
                                       }();
-                                      if (_temp15 && _temp15.then) return _temp15.then(function () {});
+                                      if (_temp14 && _temp14.then) return _temp14.then(function () {});
                                     });
                                   }, function (err) {
                                     log.error('Error caching video frame on upload completion:', err);
                                   });
-                                  if (_temp16 && _temp16.then) return _temp16.then(function () {});
+                                  if (_temp15 && _temp15.then) return _temp15.then(function () {});
                                 }
                               }();
-                              if (_temp19 && _temp19.then) return _temp19.then(function () {});
+                              if (_temp18 && _temp18.then) return _temp18.then(function () {});
                             }
                           }();
-                          return Promise.resolve(_temp18 && _temp18.then ? _temp18.then(function () {}) : void 0);
+                          return Promise.resolve(_temp17 && _temp17.then ? _temp17.then(function () {}) : void 0);
                         } catch (e) {
                           return Promise.reject(e);
                         }
@@ -17239,7 +17468,7 @@ function sendMessage(action) {
         messagesToSend.push(messageToSend);
       case 12:
         _loop3 = /*#__PURE__*/_regenerator().m(function _callee4() {
-          var messageAttachment, messageToSend, pendingState, messageCopy, _getStoredChannel6, _attachmentsToSend, linkAttachmentToSend, linkAttachmentBuilder, messageResponse, k, attachmentsToUpdate, currentAttachmentsMap, messageUpdateData, activeChannelId, messageToUpdate, resolvedLastMessage, channelUpdateParam, _channel2, _messageToSend2, isErrorResendable, _messageToSend$attach, _iterator2, _step2, att, _t;
+          var messageAttachment, messageToSend, pendingState, pendingAttachments, messageCopy, _getStoredChannel6, _attachmentsToSend, linkAttachmentToSend, linkAttachmentBuilder, messageResponse, k, attachmentsToUpdate, currentAttachmentsMap, messageUpdateData, activeChannelId, messageToUpdate, resolvedLastMessage, channelUpdateParam, _channel2, _messageToSend2, isErrorResendable, _messageToSend$attach, _iterator2, _step2, att, _t;
           return _regenerator().w(function (_context12) {
             while (1) switch (_context12.p = _context12.n) {
               case 0:
@@ -17262,21 +17491,40 @@ function sendMessage(action) {
                 messageToSend = _extends({}, messageToSend, pendingState);
               case 2:
                 _context12.p = 2;
+                _context12.n = 3;
+                return call(applyPreparedVideoAttachments, messageAttachment);
+              case 3:
+                pendingAttachments = messageAttachment.map(function (attachment) {
+                  return _extends({}, attachment, {
+                    data: attachment.data || attachment.url
+                  });
+                });
+                updateMessageOnMap(channel.id, {
+                  messageId: messageToSend.tid,
+                  params: {
+                    attachments: pendingAttachments
+                  }
+                });
+                _context12.n = 4;
+                return put(updateMessageAC(messageToSend.tid, {
+                  attachments: pendingAttachments
+                }));
+              case 4:
                 messageCopy = JSON.parse(JSON.stringify(messagesToSend[_i2]));
                 if (!(connectionState === CONNECTION_STATUS.CONNECTED)) {
-                  _context12.n = 15;
+                  _context12.n = 17;
                   break;
                 }
                 _attachmentsToSend = messageAttachment;
                 if (!customUploader) {
-                  _context12.n = 4;
+                  _context12.n = 6;
                   break;
                 }
-                _context12.n = 3;
+                _context12.n = 5;
                 return call(handleUploadAttachments, messageAttachment || [], messageCopy, channel);
-              case 3:
+              case 5:
                 _attachmentsToSend = _context12.v;
-              case 4:
+              case 6:
                 linkAttachmentToSend = null;
                 if (_i2 === 0 && linkAttachment) {
                   linkAttachmentBuilder = channel.createAttachmentBuilder(linkAttachment.data, linkAttachment.type);
@@ -17291,40 +17539,40 @@ function sendMessage(action) {
                     attachments: [].concat(_attachmentsToSend)
                   });
                 }
-                _context12.n = 5;
+                _context12.n = 7;
                 return call(channel.sendMessage, messageToSend);
-              case 5:
+              case 7:
                 messageResponse = _context12.v;
                 if (messageToSend.tid) {
                   autoResendAttempts["delete"](messageToSend.tid);
                 }
                 if (!customUploader) {
-                  _context12.n = 10;
+                  _context12.n = 12;
                   break;
                 }
                 k = 0;
-              case 6:
+              case 8:
                 if (!(k < messageAttachment.length)) {
-                  _context12.n = 10;
+                  _context12.n = 12;
                   break;
                 }
                 messageResponse.attachments[k] = _extends({}, messageResponse.attachments[k], {
                   user: JSON.parse(JSON.stringify(messageResponse.user)),
                   tid: messageAttachment[k].tid
                 });
-                _context12.n = 7;
+                _context12.n = 9;
                 return put(removeAttachmentProgressAC(messageAttachment[k].tid));
-              case 7:
-                _context12.n = 8;
+              case 9:
+                _context12.n = 10;
                 return put(removeAttachmentUploadingStateAC(messageAttachment[k].tid));
-              case 8:
+              case 10:
                 deletePendingAttachment(messageAttachment[k].tid);
                 releaseBlobUrls(["compose_" + messageAttachment[k].tid]);
-              case 9:
+              case 11:
                 k++;
-                _context12.n = 6;
+                _context12.n = 8;
                 break;
-              case 10:
+              case 12:
                 attachmentsToUpdate = [];
                 if (messageResponse.attachments && messageResponse.attachments.length > 0) {
                   currentAttachmentsMap = {};
@@ -17351,25 +17599,25 @@ function sendMessage(action) {
                 });
                 activeChannelId = getActiveChannelId();
                 if (!(activeChannelId === channel.id)) {
-                  _context12.n = 11;
+                  _context12.n = 13;
                   break;
                 }
-                _context12.n = 11;
+                _context12.n = 13;
                 return put(updateMessageAC(messageToSend.tid, messageUpdateData, true));
-              case 11:
+              case 13:
                 messageToUpdate = JSON.parse(JSON.stringify(messageResponse));
                 addConfirmedMessageToCache(channel.id, messageToUpdate);
                 updateTabAttachmentCache(channel.id, attachmentsToUpdate, messageResponse.user);
                 if (!channel.unread) {
-                  _context12.n = 12;
+                  _context12.n = 14;
                   break;
                 }
-                _context12.n = 12;
+                _context12.n = 14;
                 return put(markChannelAsReadAC(channel.id));
-              case 12:
+              case 14:
                 resolvedLastMessage = getResolvedChannelLastMessage(channel.id, messageToUpdate, messageToSend);
                 if (!lastMessageNeedsUpdate((_getStoredChannel6 = getStoredChannel(channel.id)) === null || _getStoredChannel6 === void 0 ? void 0 : _getStoredChannel6.lastMessage, resolvedLastMessage)) {
-                  _context12.n = 14;
+                  _context12.n = 16;
                   break;
                 }
                 updateChannelLastMessageOnAllChannels(channel.id, resolvedLastMessage);
@@ -17377,54 +17625,54 @@ function sendMessage(action) {
                   lastMessage: resolvedLastMessage,
                   lastReactedMessage: null
                 };
-                _context12.n = 13;
+                _context12.n = 15;
                 return put(updateChannelDataAC(channel.id, channelUpdateParam, true));
-              case 13:
-                updateChannelOnAllChannels(channel.id, channelUpdateParam);
-              case 14:
-                _context12.n = 16;
-                break;
               case 15:
-                throw new Error('Connection required to send message');
+                updateChannelOnAllChannels(channel.id, channelUpdateParam);
               case 16:
-                _context12.n = 21;
+                _context12.n = 18;
                 break;
               case 17:
-                _context12.p = 17;
+                throw new Error('Connection required to send message');
+              case 18:
+                _context12.n = 23;
+                break;
+              case 19:
+                _context12.p = 19;
                 _t = _context12.v;
                 isErrorResendable = isResendableError(_t === null || _t === void 0 ? void 0 : _t.type);
                 if (!((_channel2 = channel) !== null && _channel2 !== void 0 && _channel2.id && (_messageToSend2 = messageToSend) !== null && _messageToSend2 !== void 0 && _messageToSend2.tid)) {
-                  _context12.n = 21;
+                  _context12.n = 23;
                   break;
                 }
                 log.error('Error on uploading attachment', messageToSend.tid, _t);
                 if (!((_messageToSend$attach = messageToSend.attachments) !== null && _messageToSend$attach !== void 0 && _messageToSend$attach.length)) {
-                  _context12.n = 20;
+                  _context12.n = 22;
                   break;
                 }
                 _iterator2 = _createForOfIteratorHelperLoose(messageToSend.attachments);
-              case 18:
+              case 20:
                 if ((_step2 = _iterator2()).done) {
-                  _context12.n = 20;
+                  _context12.n = 22;
                   break;
                 }
                 att = _step2.value;
                 if (!att.tid) {
-                  _context12.n = 19;
+                  _context12.n = 21;
                   break;
                 }
-                _context12.n = 19;
+                _context12.n = 21;
                 return put(updateAttachmentUploadingStateAC(UPLOAD_STATE.FAIL, att.tid));
-              case 19:
-                _context12.n = 18;
+              case 21:
+                _context12.n = 20;
                 break;
-              case 20:
-                _context12.n = 21;
+              case 22:
+                _context12.n = 23;
                 return call(syncFailedMessageState, channel, messageToSend.tid, pendingMessages[_i2] || messageToSend, isErrorResendable);
-              case 21:
+              case 23:
                 return _context12.a(2);
             }
-          }, _callee4, null, [[2, 17]]);
+          }, _callee4, null, [[2, 19]]);
         });
         _i2 = 0;
       case 13:
@@ -18367,7 +18615,7 @@ function loadOGMetadataForLinkMessages(messages, getFromServer) {
     getFromServer = true;
   }
   return /*#__PURE__*/_regenerator().m(function _callee6() {
-    var i, _message$attachments2, message, isOnlyLinkAttachments, firstAttachment, j, _attachment5, _firstAttachment, _store$getState$Messa, _firstAttachment2, _firstAttachment3, _firstAttachment4, metadata, storedData;
+    var i, _message$attachments2, message, isOnlyLinkAttachments, firstAttachment, j, _attachment3, _firstAttachment, _store$getState$Messa, _firstAttachment2, _firstAttachment3, _firstAttachment4, metadata, storedData;
     return _regenerator().w(function (_context22) {
       while (1) switch (_context22.n) {
         case 0:
@@ -18396,13 +18644,13 @@ function loadOGMetadataForLinkMessages(messages, getFromServer) {
             _context22.n = 6;
             break;
           }
-          _attachment5 = message.attachments[j];
-          if (!(_attachment5.type === attachmentTypes.link)) {
+          _attachment3 = message.attachments[j];
+          if (!(_attachment3.type === attachmentTypes.link)) {
             _context22.n = 4;
             break;
           }
           if (!firstAttachment) {
-            firstAttachment = _attachment5;
+            firstAttachment = _attachment3;
           }
           _context22.n = 5;
           break;
@@ -22769,7 +23017,7 @@ var UploadAvatarButton = styled.button(_templateObject23 || (_templateObject23 =
 var UploadAvatarHandler = styled.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n  margin-left: 18px;\n  font-size: 13px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var StyledText = styled.span(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n  font-weight: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  letter-spacing: ", ";\n\n  &.mention {\n    color: ", ";\n    font-weight: ", ";\n    cursor: ", ";\n  }\n  &.bold {\n    font-weight: 600;\n  }\n  &.italic {\n    font-style: italic;\n  }\n  &.underline {\n    text-decoration: underline;\n  }\n  &.strikethrough {\n    text-decoration: line-through;\n  }\n  &.underline.strikethrough {\n    text-decoration: underline line-through;\n  }\n  &.monospace {\n    letter-spacing: 4px;\n  }\n"])), function (props) {
+var StyledText = styled.span(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n  font-weight: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  letter-spacing: ", ";\n\n  &.mention {\n    color: ", ";\n    font-weight: ", ";\n    cursor: ", ";\n    display: inline;\n    user-select: text;\n    -webkit-user-select: text;\n  }\n  &.bold {\n    font-weight: 600;\n  }\n  &.italic {\n    font-style: italic;\n  }\n  &.underline {\n    text-decoration: underline;\n  }\n  &.strikethrough {\n    text-decoration: line-through;\n  }\n  &.underline.strikethrough {\n    text-decoration: underline line-through;\n  }\n  &.monospace {\n    letter-spacing: 4px;\n  }\n"])), function (props) {
   return props.fontWeight || props.isLastMessage && '500';
 }, function (props) {
   return props.fontFamily;
@@ -22958,6 +23206,10 @@ var PendingIconWrapper = styled(SvgPendingIcon)(_templateObject5$1 || (_template
 }, function (props) {
   return props.color;
 });
+var canActivateMention = function canActivateMention() {
+  var selection = typeof window !== 'undefined' ? window.getSelection() : null;
+  return !selection || selection.isCollapsed;
+};
 var MessageStatusIcon = function MessageStatusIcon(_ref) {
   var messageStatus = _ref.messageStatus,
     messageStatusDisplayingType = _ref.messageStatusDisplayingType,
@@ -23173,7 +23425,7 @@ var MessageTextFormat = function MessageTextFormat(_ref3) {
                 key: attributeOffset + index,
                 "data-mention": attribute.metadata,
                 onClick: function onClick() {
-                  if (onMentionNameClick && shouldOpenUserProfileForMention) {
+                  if (canActivateMention() && onMentionNameClick && shouldOpenUserProfileForMention) {
                     onMentionNameClick(mentionDisplay);
                   }
                 }
@@ -23187,7 +23439,7 @@ var MessageTextFormat = function MessageTextFormat(_ref3) {
                 key: attributeOffset,
                 "data-mention": attribute.metadata,
                 onClick: function onClick() {
-                  if (onMentionNameClick && shouldOpenUserProfileForMention) {
+                  if (canActivateMention() && onMentionNameClick && shouldOpenUserProfileForMention) {
                     onMentionNameClick(mentionDisplay);
                   }
                 },
@@ -25403,81 +25655,52 @@ function watchForEvents() {
   }, _marked0$1);
 }
 
-var READ_MESSAGE_LOG_KEY_ALIASES = {
-  source: 's',
-  channelId: 'ch',
-  readAll: 'ra',
-  messageIds: 'mi',
-  messageId: 'm',
-  connectionStatus: 'cs',
-  attempts: 'at',
-  retryDelayMs: 'rd',
-  requestedMessageIds: 'rq',
-  confirmedMessageIds: 'cf',
-  isVisible: 'iv',
-  alreadyRead: 'ar',
-  disableAutoReadTracking: 'da',
-  isTabActive: 'ta',
-  newMessageCount: 'nm',
-  queued: 'q',
-  localRef: 'lr',
-  visibleCandidateIds: 'vc',
-  unreadScrollTo: 'us',
-  pendingFrameScheduled: 'pf'
-};
-var compactReadMessageLogData = function compactReadMessageLogData(data) {
-  return JSON.stringify(Object.fromEntries(Object.entries(data).map(function (_ref) {
-    var key = _ref[0],
-      value = _ref[1];
-    return [READ_MESSAGE_LOG_KEY_ALIASES[key] || key.slice(0, 2), value];
-  })));
-};
-
 var _marked$3 = /*#__PURE__*/_regenerator().m(applyChannelReadProgress),
-  _marked2$3 = /*#__PURE__*/_regenerator().m(createChannel),
-  _marked3$2 = /*#__PURE__*/_regenerator().m(getChannels),
-  _marked4$2 = /*#__PURE__*/_regenerator().m(searchChannels),
-  _marked5$2 = /*#__PURE__*/_regenerator().m(getChannelsForForward),
-  _marked6$2 = /*#__PURE__*/_regenerator().m(searchChannelsForForward),
-  _marked7$2 = /*#__PURE__*/_regenerator().m(channelsLoadMore),
-  _marked8$2 = /*#__PURE__*/_regenerator().m(getChannelMentions),
-  _marked9$2 = /*#__PURE__*/_regenerator().m(channelsForForwardLoadMore),
-  _marked0$2 = /*#__PURE__*/_regenerator().m(markMessagesRead),
-  _marked1$1 = /*#__PURE__*/_regenerator().m(markVoiceMessageAsPlayed),
-  _marked10$1 = /*#__PURE__*/_regenerator().m(updateMessageAsOpened),
-  _marked11$1 = /*#__PURE__*/_regenerator().m(markMessageAsOpened),
-  _marked12$1 = /*#__PURE__*/_regenerator().m(markMessagesDelivered),
-  _marked13$1 = /*#__PURE__*/_regenerator().m(switchChannel),
-  _marked14$1 = /*#__PURE__*/_regenerator().m(notificationsTurnOff),
-  _marked15$1 = /*#__PURE__*/_regenerator().m(notificationsTurnOn),
-  _marked16$1 = /*#__PURE__*/_regenerator().m(markChannelAsRead),
-  _marked17$1 = /*#__PURE__*/_regenerator().m(resendPendingChannelReads),
-  _marked18$1 = /*#__PURE__*/_regenerator().m(markChannelAsUnRead),
-  _marked19$1 = /*#__PURE__*/_regenerator().m(pinChannel),
-  _marked20$1 = /*#__PURE__*/_regenerator().m(unpinChannel),
-  _marked21$1 = /*#__PURE__*/_regenerator().m(removeChannelCaches),
-  _marked22$1 = /*#__PURE__*/_regenerator().m(leaveChannel),
-  _marked23$1 = /*#__PURE__*/_regenerator().m(deletePendingDeleteChannels),
-  _marked24$1 = /*#__PURE__*/_regenerator().m(deleteChannel),
-  _marked25$1 = /*#__PURE__*/_regenerator().m(blockChannel),
-  _marked26$1 = /*#__PURE__*/_regenerator().m(updateChannel),
-  _marked27$1 = /*#__PURE__*/_regenerator().m(checkUsersStatus),
-  _marked28$1 = /*#__PURE__*/_regenerator().m(sendTyping),
-  _marked29$1 = /*#__PURE__*/_regenerator().m(sendRecording),
-  _marked30$1 = /*#__PURE__*/_regenerator().m(clearHistory),
-  _marked31$1 = /*#__PURE__*/_regenerator().m(deleteAllMessages),
-  _marked32$1 = /*#__PURE__*/_regenerator().m(joinChannel),
-  _marked33$1 = /*#__PURE__*/_regenerator().m(watchForChannelEvents),
-  _marked34$1 = /*#__PURE__*/_regenerator().m(createChannelInviteKey),
-  _marked35$1 = /*#__PURE__*/_regenerator().m(getChannelInviteKeys),
-  _marked36$1 = /*#__PURE__*/_regenerator().m(regenerateChannelInviteKey),
-  _marked37$1 = /*#__PURE__*/_regenerator().m(updateChannelInviteKey),
-  _marked38$1 = /*#__PURE__*/_regenerator().m(getChannelByInviteKey),
-  _marked39$1 = /*#__PURE__*/_regenerator().m(joinChannelWithInviteKey),
-  _marked40$1 = /*#__PURE__*/_regenerator().m(setMessageRetentionPeriod),
-  _marked41$1 = /*#__PURE__*/_regenerator().m(getChannelsWithUser),
-  _marked42$1 = /*#__PURE__*/_regenerator().m(loadMoreMutualChannels),
-  _marked43$1 = /*#__PURE__*/_regenerator().m(ChannelsSaga);
+  _marked2$3 = /*#__PURE__*/_regenerator().m(confirmDisplayedRead),
+  _marked3$2 = /*#__PURE__*/_regenerator().m(createChannel),
+  _marked4$2 = /*#__PURE__*/_regenerator().m(getChannels),
+  _marked5$2 = /*#__PURE__*/_regenerator().m(searchChannels),
+  _marked6$2 = /*#__PURE__*/_regenerator().m(getChannelsForForward),
+  _marked7$2 = /*#__PURE__*/_regenerator().m(searchChannelsForForward),
+  _marked8$2 = /*#__PURE__*/_regenerator().m(channelsLoadMore),
+  _marked9$2 = /*#__PURE__*/_regenerator().m(getChannelMentions),
+  _marked0$2 = /*#__PURE__*/_regenerator().m(channelsForForwardLoadMore),
+  _marked1$1 = /*#__PURE__*/_regenerator().m(markMessagesRead),
+  _marked10$1 = /*#__PURE__*/_regenerator().m(markVoiceMessageAsPlayed),
+  _marked11$1 = /*#__PURE__*/_regenerator().m(updateMessageAsOpened),
+  _marked12$1 = /*#__PURE__*/_regenerator().m(markMessageAsOpened),
+  _marked13$1 = /*#__PURE__*/_regenerator().m(markMessagesDelivered),
+  _marked14$1 = /*#__PURE__*/_regenerator().m(switchChannel),
+  _marked15$1 = /*#__PURE__*/_regenerator().m(notificationsTurnOff),
+  _marked16$1 = /*#__PURE__*/_regenerator().m(notificationsTurnOn),
+  _marked17$1 = /*#__PURE__*/_regenerator().m(markChannelAsRead),
+  _marked18$1 = /*#__PURE__*/_regenerator().m(resendPendingChannelReads),
+  _marked19$1 = /*#__PURE__*/_regenerator().m(markChannelAsUnRead),
+  _marked20$1 = /*#__PURE__*/_regenerator().m(pinChannel),
+  _marked21$1 = /*#__PURE__*/_regenerator().m(unpinChannel),
+  _marked22$1 = /*#__PURE__*/_regenerator().m(removeChannelCaches),
+  _marked23$1 = /*#__PURE__*/_regenerator().m(leaveChannel),
+  _marked24$1 = /*#__PURE__*/_regenerator().m(deletePendingDeleteChannels),
+  _marked25$1 = /*#__PURE__*/_regenerator().m(deleteChannel),
+  _marked26$1 = /*#__PURE__*/_regenerator().m(blockChannel),
+  _marked27$1 = /*#__PURE__*/_regenerator().m(updateChannel),
+  _marked28$1 = /*#__PURE__*/_regenerator().m(checkUsersStatus),
+  _marked29$1 = /*#__PURE__*/_regenerator().m(sendTyping),
+  _marked30$1 = /*#__PURE__*/_regenerator().m(sendRecording),
+  _marked31$1 = /*#__PURE__*/_regenerator().m(clearHistory),
+  _marked32$1 = /*#__PURE__*/_regenerator().m(deleteAllMessages),
+  _marked33$1 = /*#__PURE__*/_regenerator().m(joinChannel),
+  _marked34$1 = /*#__PURE__*/_regenerator().m(watchForChannelEvents),
+  _marked35$1 = /*#__PURE__*/_regenerator().m(createChannelInviteKey),
+  _marked36$1 = /*#__PURE__*/_regenerator().m(getChannelInviteKeys),
+  _marked37$1 = /*#__PURE__*/_regenerator().m(regenerateChannelInviteKey),
+  _marked38$1 = /*#__PURE__*/_regenerator().m(updateChannelInviteKey),
+  _marked39$1 = /*#__PURE__*/_regenerator().m(getChannelByInviteKey),
+  _marked40$1 = /*#__PURE__*/_regenerator().m(joinChannelWithInviteKey),
+  _marked41$1 = /*#__PURE__*/_regenerator().m(setMessageRetentionPeriod),
+  _marked42$1 = /*#__PURE__*/_regenerator().m(getChannelsWithUser),
+  _marked43$1 = /*#__PURE__*/_regenerator().m(loadMoreMutualChannels),
+  _marked44$1 = /*#__PURE__*/_regenerator().m(ChannelsSaga);
 var getUniqueMessageIds = function getUniqueMessageIds(messageIds) {
   if (messageIds === void 0) {
     messageIds = [];
@@ -25579,104 +25802,80 @@ function applyChannelReadProgress(channelId, updateData) {
 var shouldKeepQueuedPendingRead = function shouldKeepQueuedPendingRead(error) {
   return isResendableError(error === null || error === void 0 ? void 0 : error.type);
 };
-var getReadMarkerLogContext = function getReadMarkerLogContext(pendingRead, source, messageIds) {
-  return {
-    source: source,
-    channelId: pendingRead.channelId,
-    readAll: pendingRead.readAll,
-    messageIds: messageIds
-  };
-};
-function confirmDisplayedRead(channel, pendingRead, source) {
-  if (source === void 0) {
-    source = 'initial';
-  }
-  return /*#__PURE__*/_regenerator().m(function _callee() {
-    var messageIds, logContext, attempt, connectionStatus, messageListMarker, _t;
-    return _regenerator().w(function (_context2) {
-      while (1) switch (_context2.p = _context2.n) {
-        case 0:
-          messageIds = getUniqueMessageIds(pendingRead.messageIds);
-          logContext = getReadMarkerLogContext(pendingRead, source, messageIds);
-          attempt = 0;
-        case 1:
-          if (!(attempt <= READ_MARKER_RETRY_DELAYS_MS.length)) {
-            _context2.n = 10;
-            break;
-          }
-          connectionStatus = store.getState().UserReducer.connectionStatus;
-          if (!(connectionStatus !== CONNECTION_STATUS.CONNECTED)) {
-            _context2.n = 2;
-            break;
-          }
-          log.warn('[READ_MESSAGE] Queued read marker because connection is not ready', compactReadMessageLogData(_extends({}, logContext, {
-            connectionStatus: connectionStatus
-          })));
-          return _context2.a(2, {
-            status: 'queued'
-          });
-        case 2:
-          _context2.p = 2;
-          if (!pendingRead.readAll) {
-            _context2.n = 4;
-            break;
-          }
-          _context2.n = 3;
-          return call(channel.markAsRead);
-        case 3:
-          return _context2.a(2, {
-            status: 'success'
-          });
-        case 4:
-          _context2.n = 5;
-          return call(channel.markMessagesAsDisplayed, messageIds);
-        case 5:
-          messageListMarker = _context2.v;
-          return _context2.a(2, {
-            status: 'success',
-            messageListMarker: messageListMarker
-          });
-        case 6:
-          _context2.p = 6;
-          _t = _context2.v;
-          if (shouldKeepQueuedPendingRead(_t)) {
-            _context2.n = 7;
-            break;
-          }
-          log.error(_t, '[READ_MESSAGE] Dropping read marker after non-resendable error', compactReadMessageLogData(logContext));
-          return _context2.a(2, {
-            status: 'drop',
-            error: _t
-          });
-        case 7:
-          if (!(attempt === READ_MARKER_RETRY_DELAYS_MS.length)) {
-            _context2.n = 8;
-            break;
-          }
-          log.error(_t, '[READ_MESSAGE] Exhausted read marker retries; keeping queued for replay', compactReadMessageLogData(_extends({}, logContext, {
-            attempts: attempt + 1
-          })));
-          return _context2.a(2, {
-            status: 'queued',
-            error: _t
-          });
-        case 8:
-          log.warn(_t, "[READ_MESSAGE] Retrying read marker (" + (attempt + 1) + "/" + READ_MARKER_RETRY_DELAYS_MS.length + ")", compactReadMessageLogData(_extends({}, logContext, {
-            retryDelayMs: READ_MARKER_RETRY_DELAYS_MS[attempt]
-          })));
-          _context2.n = 9;
-          return call(waitForReadMarkerRetry, READ_MARKER_RETRY_DELAYS_MS[attempt]);
-        case 9:
-          attempt++;
-          _context2.n = 1;
+function confirmDisplayedRead(channel, pendingRead) {
+  var messageIds, attempt, connectionStatus, messageListMarker, _t;
+  return _regenerator().w(function (_context2) {
+    while (1) switch (_context2.p = _context2.n) {
+      case 0:
+        messageIds = getUniqueMessageIds(pendingRead.messageIds);
+        attempt = 0;
+      case 1:
+        if (!(attempt <= READ_MARKER_RETRY_DELAYS_MS.length)) {
+          _context2.n = 10;
           break;
-        case 10:
-          return _context2.a(2, {
-            status: 'queued'
-          });
-      }
-    }, _callee, null, [[2, 6]]);
-  })();
+        }
+        connectionStatus = store.getState().UserReducer.connectionStatus;
+        if (!(connectionStatus !== CONNECTION_STATUS.CONNECTED)) {
+          _context2.n = 2;
+          break;
+        }
+        return _context2.a(2, {
+          status: 'queued'
+        });
+      case 2:
+        _context2.p = 2;
+        if (!pendingRead.readAll) {
+          _context2.n = 4;
+          break;
+        }
+        _context2.n = 3;
+        return call(channel.markAsRead);
+      case 3:
+        return _context2.a(2, {
+          status: 'success'
+        });
+      case 4:
+        _context2.n = 5;
+        return call(channel.markMessagesAsDisplayed, messageIds);
+      case 5:
+        messageListMarker = _context2.v;
+        return _context2.a(2, {
+          status: 'success',
+          messageListMarker: messageListMarker
+        });
+      case 6:
+        _context2.p = 6;
+        _t = _context2.v;
+        if (shouldKeepQueuedPendingRead(_t)) {
+          _context2.n = 7;
+          break;
+        }
+        return _context2.a(2, {
+          status: 'drop',
+          error: _t
+        });
+      case 7:
+        if (!(attempt === READ_MARKER_RETRY_DELAYS_MS.length)) {
+          _context2.n = 8;
+          break;
+        }
+        return _context2.a(2, {
+          status: 'queued',
+          error: _t
+        });
+      case 8:
+        _context2.n = 9;
+        return call(waitForReadMarkerRetry, READ_MARKER_RETRY_DELAYS_MS[attempt]);
+      case 9:
+        attempt++;
+        _context2.n = 1;
+        break;
+      case 10:
+        return _context2.a(2, {
+          status: 'queued'
+        });
+    }
+  }, _marked2$3, null, [[2, 6]]);
 }
 function createChannel(action) {
   var payload, channelData, dontCreateIfNotExists, callback, SceytChatClient, createChannelData, fileToUpload, isSelfChannel, channelIsExistOnAllChannels, createdChannel, allChannels, memberId, whoDoesNotAdded, checkChannelExist, messageToSend, _allChannels, _memberId, _t2;
@@ -25874,7 +26073,7 @@ function createChannel(action) {
       case 19:
         return _context3.a(2);
     }
-  }, _marked2$3, null, [[0, 18]]);
+  }, _marked3$2, null, [[0, 18]]);
 }
 function getChannels(action) {
   var _params$filter, _types, _activeChannel, _mappedChannels, _mappedChannels3, _mappedChannels4, payload, params, SceytChatClient, connectionStatus, channelQueryBuilder, channelTypesFilter, types, limit, channelQuery, channelsData, channelList, channelId, activeChannel, pendingLastMessages, _yield$call, mappedChannels, channelsForUpdateLastReactionMessage, _loop, _i, _Object$keys, _Object$keys2, _Object$keys3, _mappedChannels2, channelMessageMap, _iterator, _step, _lastMsg$userMarkers, ch, lastMsg, _activeChannel2, _activeChannel3, hiddenList, allChannelsQueryBuilder, allChannelsQuery, hasNext, totalAllChannelsAdded, i, _connectionStatus, allChannelsData, allChannelList, _t3, _t4, _t5;
@@ -25972,7 +26171,7 @@ function getChannels(action) {
         _yield$call = _context5.v;
         mappedChannels = _yield$call.channels;
         channelsForUpdateLastReactionMessage = _yield$call.channelsForUpdateLastReactionMessage;
-        _loop = /*#__PURE__*/_regenerator().m(function _callee2() {
+        _loop = /*#__PURE__*/_regenerator().m(function _callee() {
           var _store$getState$Chann;
           var channelId, pendingLastMessage, currentReduxLastMessage, resolvedLastMessage, mappedChannel, mapEntry;
           return _regenerator().w(function (_context4) {
@@ -25999,7 +26198,7 @@ function getChannels(action) {
               case 1:
                 return _context4.a(2);
             }
-          }, _callee2);
+          }, _callee);
         });
         _i = 0, _Object$keys = Object.keys(pendingLastMessages);
       case 14:
@@ -26193,7 +26392,7 @@ function getChannels(action) {
       case 38:
         return _context5.a(2);
     }
-  }, _marked3$2, null, [[27, 30], [1, 37]]);
+  }, _marked4$2, null, [[27, 30], [1, 37]]);
 }
 function searchChannels(action) {
   var payload, params, contactsMap, SceytChatClient, getFromContacts, searchBy, _params$filter2, _types2, channelQueryBuilder, channelTypesFilter, types, allChannels, publicChannels, chatsGroups, contactsList, contactsWithChannelsMap, lowerCaseSearchBy, handleChannels, channelsMap, _iterator2, _step2, channel, channelQuery, channelsData, _iterator3, _step3, _channel, channelsToAdd, _t6;
@@ -26326,7 +26525,7 @@ function searchChannels(action) {
       case 8:
         return _context6.a(2);
     }
-  }, _marked4$2, null, [[0, 7]]);
+  }, _marked5$2, null, [[0, 7]]);
 }
 function getChannelsForForward() {
   var _SceytChatClient, channelQueryBuilder, channelTypesFilter, channelQuery, channelsData, channelsToAdd, _yield$call2, mappedChannels, _t7;
@@ -26384,7 +26583,7 @@ function getChannelsForForward() {
       case 9:
         return _context7.a(2);
     }
-  }, _marked5$2, null, [[0, 8]]);
+  }, _marked6$2, null, [[0, 8]]);
 }
 function searchChannelsForForward(action) {
   var payload, params, _contactsMap, _SceytChatClient2, _getFromContacts, searchBy, _params$filter3, _types3, channelQueryBuilder, channelTypesFilter, types, allChannels, _publicChannels, _chatsGroups, contactsList, _contactsWithChannelsMap, _lowerCaseSearchBy, handleChannels, channelsMap, _iterator4, _step4, channel, channelQuery, channelsData, _iterator5, _step5, _channel2, channelsToAdd, _t8;
@@ -26516,7 +26715,7 @@ function searchChannelsForForward(action) {
       case 8:
         return _context8.a(2);
     }
-  }, _marked6$2, null, [[0, 7]]);
+  }, _marked7$2, null, [[0, 7]]);
 }
 function channelsLoadMore(action) {
   var _mappedChannels5, _mappedChannels7, _mappedChannels8, payload, limit, channelQuery, channelsData, channelList, _yield$call3, mappedChannels, channelsForUpdateLastReactionMessage, _Object$keys4, _mappedChannels6, channelMessageMap, _t9;
@@ -26637,7 +26836,7 @@ function channelsLoadMore(action) {
       case 13:
         return _context9.a(2);
     }
-  }, _marked7$2, null, [[1, 12]]);
+  }, _marked8$2, null, [[1, 12]]);
 }
 function getChannelMentions(action) {
   var payload, channelId, _SceytChatClient3, mentionsQueryBuilder, mentionsQuery, mentions, _t0;
@@ -26674,7 +26873,7 @@ function getChannelMentions(action) {
       case 5:
         return _context0.a(2);
     }
-  }, _marked8$2, null, [[0, 4]]);
+  }, _marked9$2, null, [[0, 4]]);
 }
 function channelsForForwardLoadMore(action) {
   var payload, limit, _SceytChatClient4, channelQueryForward, channelsData, channelsToAdd, _yield$call4, mappedChannels, _t1;
@@ -26725,10 +26924,10 @@ function channelsForForwardLoadMore(action) {
       case 8:
         return _context1.a(2);
     }
-  }, _marked9$2, null, [[0, 7]]);
+  }, _marked0$2, null, [[0, 7]]);
 }
 function markMessagesRead(action) {
-  var payload, channelId, messageIds, requestedMessageIds, _confirmation$message, channel, optimisticUpdate, pendingRead, confirmation, queuedPendingRead, _queuedPendingRead, readMessageIds, _iterator6, _step6, _confirmation$message2, _confirmation$message3, messageId, updateParams, _t10;
+  var payload, channelId, messageIds, requestedMessageIds, _confirmation$message, channel, optimisticUpdate, pendingRead, confirmation, queuedPendingRead, _queuedPendingRead, readMessageIds, _iterator6, _step6, _confirmation$message2, _confirmation$message3, messageId, updateParams;
   return _regenerator().w(function (_context10) {
     while (1) switch (_context10.p = _context10.n) {
       case 0:
@@ -26739,21 +26938,9 @@ function markMessagesRead(action) {
           _context10.n = 1;
           break;
         }
-        log.warn('[READ_MESSAGE] Skipping read marker because message id list is empty', compactReadMessageLogData({
-          source: 'initial',
-          channelId: channelId,
-          readAll: false,
-          messageIds: messageIds
-        }));
         return _context10.a(2);
       case 1:
         _context10.p = 1;
-        log.info('[READ_MESSAGE] Received markMessagesRead action', compactReadMessageLogData({
-          source: 'initial',
-          channelId: channelId,
-          readAll: false,
-          messageIds: requestedMessageIds
-        }));
         _context10.n = 2;
         return call(getStoredChannel$2, channelId);
       case 2:
@@ -26762,10 +26949,6 @@ function markMessagesRead(action) {
           _context10.n = 3;
           break;
         }
-        log.warn('[READ_MESSAGE] Cannot mark messages as read because channel was not found', compactReadMessageLogData({
-          channelId: channelId,
-          messageIds: requestedMessageIds
-        }));
         return _context10.a(2);
       case 3:
         optimisticUpdate = deriveChannelReadProgressUpdate({
@@ -26780,7 +26963,7 @@ function markMessagesRead(action) {
           messageIds: requestedMessageIds
         });
         _context10.n = 5;
-        return call(confirmDisplayedRead, channel, pendingRead, 'initial');
+        return call(confirmDisplayedRead, channel, pendingRead);
       case 5:
         confirmation = _context10.v;
         if (!(confirmation.status === 'success')) {
@@ -26807,13 +26990,6 @@ function markMessagesRead(action) {
         return _context10.a(2);
       case 8:
         readMessageIds = getUniqueMessageIds(((_confirmation$message = confirmation.messageListMarker) === null || _confirmation$message === void 0 ? void 0 : _confirmation$message.messageIds) || requestedMessageIds);
-        log.info('[READ_MESSAGE] Confirmed read marker', compactReadMessageLogData({
-          source: 'initial',
-          channelId: channel.id,
-          readAll: false,
-          requestedMessageIds: requestedMessageIds,
-          confirmedMessageIds: readMessageIds
-        }));
         _iterator6 = _createForOfIteratorHelperLoose(readMessageIds);
       case 9:
         if ((_step6 = _iterator6()).done) {
@@ -26845,12 +27021,10 @@ function markMessagesRead(action) {
         break;
       case 13:
         _context10.p = 13;
-        _t10 = _context10.v;
-        log.error(_t10, '[READ_MESSAGE] Error on mark messages read');
       case 14:
         return _context10.a(2);
     }
-  }, _marked0$2, null, [[1, 13]]);
+  }, _marked1$1, null, [[1, 13]]);
 }
 function markVoiceMessageAsPlayed(action) {
   var payload, channelId, messageIds, connectionStatus, channel, messageListMarker, _iterator7, _step7, messageId, updateParams, _t11;
@@ -26921,7 +27095,7 @@ function markVoiceMessageAsPlayed(action) {
       case 9:
         return _context11.a(2);
     }
-  }, _marked1$1, null, [[1, 8]]);
+  }, _marked10$1, null, [[1, 8]]);
 }
 function updateMessageAsOpened(action) {
   var payload, channelId, messageListMarker, connectionStatus, channel, _iterator8, _step8, messageId, updateParams;
@@ -26980,7 +27154,7 @@ function updateMessageAsOpened(action) {
       case 6:
         return _context12.a(2);
     }
-  }, _marked10$1);
+  }, _marked11$1);
 }
 function markMessageAsOpened(action) {
   var payload, channelId, messageIds, shouldUpdateMessage, connectionStatus, channel, messageListMarker, _t12;
@@ -27031,7 +27205,7 @@ function markMessageAsOpened(action) {
       case 6:
         return _context13.a(2);
     }
-  }, _marked11$1, null, [[1, 5]]);
+  }, _marked12$1, null, [[1, 5]]);
 }
 function markMessagesDelivered(action) {
   var payload, channelId, messageIds, connectionStatus, channel, messageListMarker, _iterator9, _step9, messageId, updateParams, _t13;
@@ -27102,7 +27276,7 @@ function markMessagesDelivered(action) {
       case 9:
         return _context14.a(2);
     }
-  }, _marked12$1, null, [[1, 8]]);
+  }, _marked13$1, null, [[1, 8]]);
 }
 function switchChannel(action) {
   var payload, channel, updateActiveChannel, channelToSwitch, existingChannel, addChannel, _SceytChatClient5, fetchedChannel, channelFromMap, currentActiveChannel, _t14;
@@ -27198,7 +27372,7 @@ function switchChannel(action) {
       case 17:
         return _context15.a(2);
     }
-  }, _marked13$1, null, [[0, 16]]);
+  }, _marked14$1, null, [[0, 16]]);
 }
 function notificationsTurnOff(action) {
   var expireTime, activeChannelId, channel, updatedChannel, _t15;
@@ -27238,7 +27412,7 @@ function notificationsTurnOff(action) {
       case 7:
         return _context16.a(2);
     }
-  }, _marked14$1, null, [[3, 6]]);
+  }, _marked15$1, null, [[3, 6]]);
 }
 function notificationsTurnOn() {
   var activeChannelId, channel, updatedChannel, _t16;
@@ -27277,21 +27451,15 @@ function notificationsTurnOn() {
       case 7:
         return _context17.a(2);
     }
-  }, _marked15$1, null, [[3, 6]]);
+  }, _marked16$1, null, [[3, 6]]);
 }
 function markChannelAsRead(action) {
-  var channelId, channel, optimisticUpdate, pendingRead, confirmation, queuedPendingRead, _queuedPendingRead2, _t17;
+  var channelId, channel, optimisticUpdate, pendingRead, confirmation, queuedPendingRead, _queuedPendingRead2;
   return _regenerator().w(function (_context18) {
     while (1) switch (_context18.p = _context18.n) {
       case 0:
         _context18.p = 0;
         channelId = action.payload.channelId;
-        log.info('[READ_MESSAGE] Received markChannelAsRead action', compactReadMessageLogData({
-          source: 'initial',
-          channelId: channelId,
-          readAll: true,
-          messageIds: []
-        }));
         _context18.n = 1;
         return call(getStoredChannel$2, channelId);
       case 1:
@@ -27300,9 +27468,6 @@ function markChannelAsRead(action) {
           _context18.n = 2;
           break;
         }
-        log.warn('[READ_MESSAGE] Cannot mark channel as read because channel was not found', compactReadMessageLogData({
-          channelId: channelId
-        }));
         return _context18.a(2);
       case 2:
         optimisticUpdate = deriveChannelReadProgressUpdate({
@@ -27317,7 +27482,7 @@ function markChannelAsRead(action) {
           readAll: true
         });
         _context18.n = 4;
-        return call(confirmDisplayedRead, channel, pendingRead, 'initial');
+        return call(confirmDisplayedRead, channel, pendingRead);
       case 4:
         confirmation = _context18.v;
         if (!(confirmation.status === 'success')) {
@@ -27328,13 +27493,6 @@ function markChannelAsRead(action) {
         if ((queuedPendingRead === null || queuedPendingRead === void 0 ? void 0 : queuedPendingRead.queuedAt) === (pendingRead === null || pendingRead === void 0 ? void 0 : pendingRead.queuedAt)) {
           removePendingChannelRead(channel.id);
         }
-        log.info('[READ_MESSAGE] Confirmed read marker', compactReadMessageLogData({
-          source: 'initial',
-          channelId: channel.id,
-          readAll: true,
-          requestedMessageIds: [],
-          confirmedMessageIds: []
-        }));
         return _context18.a(2);
       case 5:
         if (confirmation.status === 'drop') {
@@ -27347,15 +27505,13 @@ function markChannelAsRead(action) {
         break;
       case 6:
         _context18.p = 6;
-        _t17 = _context18.v;
-        log.error(_t17, '[READ_MESSAGE] Error on mark channel as read');
       case 7:
         return _context18.a(2);
     }
-  }, _marked16$1, null, [[0, 6]]);
+  }, _marked17$1, null, [[0, 6]]);
 }
 function resendPendingChannelReads(action) {
-  var connectionState, pendingReads, _iterator0, _step0, pendingRead, currentPendingRead, channel, confirmation, latestPendingRead, _confirmation$message4, readMessageIds, _iterator1, _step1, _confirmation$message5, _confirmation$message6, messageId, updateParams, _t18;
+  var connectionState, pendingReads, _iterator0, _step0, pendingRead, currentPendingRead, channel, confirmation, latestPendingRead, _confirmation$message4, readMessageIds, _iterator1, _step1, _confirmation$message5, _confirmation$message6, messageId, updateParams;
   return _regenerator().w(function (_context19) {
     while (1) switch (_context19.p = _context19.n) {
       case 0:
@@ -27373,7 +27529,7 @@ function resendPendingChannelReads(action) {
         _iterator0 = _createForOfIteratorHelperLoose(pendingReads);
       case 2:
         if ((_step0 = _iterator0()).done) {
-          _context19.n = 16;
+          _context19.n = 14;
           break;
         }
         pendingRead = _step0.value;
@@ -27388,20 +27544,14 @@ function resendPendingChannelReads(action) {
           _context19.n = 4;
           break;
         }
-        return _context19.a(3, 15);
+        return _context19.a(3, 13);
       case 4:
         if (!(!pendingRead.readAll && !pendingRead.messageIds.length)) {
           _context19.n = 5;
           break;
         }
-        log.warn('[READ_MESSAGE] Dropping queued replay because it has no message ids', compactReadMessageLogData({
-          source: 'replay',
-          channelId: pendingRead.channelId,
-          readAll: pendingRead.readAll,
-          messageIds: pendingRead.messageIds
-        }));
         removePendingChannelRead(pendingRead.channelId);
-        return _context19.a(3, 15);
+        return _context19.a(3, 13);
       case 5:
         _context19.n = 6;
         return call(getStoredChannel$2, pendingRead.channelId);
@@ -27411,18 +27561,11 @@ function resendPendingChannelReads(action) {
           _context19.n = 7;
           break;
         }
-        log.warn('[READ_MESSAGE] Dropping queued replay because channel was not found', compactReadMessageLogData({
-          source: 'replay',
-          channelId: pendingRead.channelId,
-          readAll: pendingRead.readAll,
-          messageIds: pendingRead.messageIds
-        }));
         removePendingChannelRead(pendingRead.channelId);
-        return _context19.a(3, 15);
+        return _context19.a(3, 13);
       case 7:
-        log.info('[READ_MESSAGE] Replaying queued read marker', compactReadMessageLogData(getReadMarkerLogContext(pendingRead, 'replay', pendingRead.messageIds)));
         _context19.n = 8;
-        return call(confirmDisplayedRead, channel, pendingRead, 'replay');
+        return call(confirmDisplayedRead, channel, pendingRead);
       case 8:
         confirmation = _context19.v;
         latestPendingRead = getPendingChannelRead(pendingRead.channelId);
@@ -27430,23 +27573,16 @@ function resendPendingChannelReads(action) {
           _context19.n = 9;
           break;
         }
-        return _context19.a(3, 15);
+        return _context19.a(3, 13);
       case 9:
         if (confirmation.status === 'success' || confirmation.status === 'drop') {
           removePendingChannelRead(pendingRead.channelId);
         }
         if (!(confirmation.status === 'success' && !pendingRead.readAll)) {
-          _context19.n = 14;
+          _context19.n = 13;
           break;
         }
         readMessageIds = getUniqueMessageIds(((_confirmation$message4 = confirmation.messageListMarker) === null || _confirmation$message4 === void 0 ? void 0 : _confirmation$message4.messageIds) || pendingRead.messageIds);
-        log.info('[READ_MESSAGE] Confirmed read marker', compactReadMessageLogData({
-          source: 'replay',
-          channelId: channel.id,
-          readAll: false,
-          requestedMessageIds: pendingRead.messageIds,
-          confirmedMessageIds: readMessageIds
-        }));
         _iterator1 = _createForOfIteratorHelperLoose(readMessageIds);
       case 10:
         if ((_step1 = _iterator1()).done) {
@@ -27474,32 +27610,17 @@ function resendPendingChannelReads(action) {
         _context19.n = 10;
         break;
       case 13:
-        _context19.n = 15;
+        _context19.n = 2;
         break;
       case 14:
-        if (confirmation.status === 'success' && pendingRead.readAll) {
-          log.info('[READ_MESSAGE] Confirmed read marker', compactReadMessageLogData({
-            source: 'replay',
-            channelId: channel.id,
-            readAll: true,
-            requestedMessageIds: [],
-            confirmedMessageIds: []
-          }));
-        }
-      case 15:
-        _context19.n = 2;
+        _context19.n = 16;
         break;
+      case 15:
+        _context19.p = 15;
       case 16:
-        _context19.n = 18;
-        break;
-      case 17:
-        _context19.p = 17;
-        _t18 = _context19.v;
-        log.error(_t18, '[READ_MESSAGE] Error on resend pending channel reads');
-      case 18:
         return _context19.a(2);
     }
-  }, _marked17$1, null, [[0, 17]]);
+  }, _marked18$1, null, [[0, 15]]);
 }
 function markChannelAsUnRead(action) {
   var channelId, channel, _t19;
@@ -27535,7 +27656,7 @@ function markChannelAsUnRead(action) {
       case 5:
         return _context20.a(2);
     }
-  }, _marked18$1, null, [[0, 4]]);
+  }, _marked19$1, null, [[0, 4]]);
 }
 function pinChannel(action) {
   var channelId, channel, updatedChannel, _t20;
@@ -27572,7 +27693,7 @@ function pinChannel(action) {
       case 5:
         return _context21.a(2);
     }
-  }, _marked19$1, null, [[0, 4]]);
+  }, _marked20$1, null, [[0, 4]]);
 }
 function unpinChannel(action) {
   var channelId, channel, updatedChannel, _t21;
@@ -27609,7 +27730,7 @@ function unpinChannel(action) {
       case 5:
         return _context22.a(2);
     }
-  }, _marked20$1, null, [[0, 4]]);
+  }, _marked21$1, null, [[0, 4]]);
 }
 function removeChannelCaches(action) {
   var payload, channelId, activeChannelId, activeChannel;
@@ -27644,7 +27765,7 @@ function removeChannelCaches(action) {
       case 4:
         return _context23.a(2);
     }
-  }, _marked21$1);
+  }, _marked22$1);
 }
 function leaveChannel(action) {
   var payload, channelId, channel, messageBuilder, messageToSend, _t22;
@@ -27654,49 +27775,56 @@ function leaveChannel(action) {
         _context24.p = 0;
         payload = action.payload;
         channelId = payload.channelId;
-        _context24.n = 1;
-        return call(getChannelFromMap, channelId);
+        if (!(store.getState().UserReducer.connectionStatus !== CONNECTION_STATUS.CONNECTED)) {
+          _context24.n = 1;
+          break;
+        }
+        log.warn('Cannot leave channel while offline');
+        return _context24.a(2);
       case 1:
+        _context24.n = 2;
+        return call(getChannelFromMap, channelId);
+      case 2:
         channel = _context24.v;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
         }
         if (!channel) {
-          _context24.n = 5;
+          _context24.n = 6;
           break;
         }
         if (!(channel.type === DEFAULT_CHANNEL_TYPE.GROUP || channel.type === DEFAULT_CHANNEL_TYPE.PRIVATE)) {
-          _context24.n = 2;
+          _context24.n = 3;
           break;
         }
         messageBuilder = channel.createMessageBuilder();
         messageBuilder.setBody('LG').setType('system').setDisplayCount(0).setSilent(true);
         messageToSend = messageBuilder.create();
         log.info('send message for left');
-        _context24.n = 2;
-        return call(channel.sendMessage, messageToSend);
-      case 2:
-        log.info('leave');
         _context24.n = 3;
-        return call(channel.leave);
+        return call(channel.sendMessage, messageToSend);
       case 3:
+        log.info('leave');
         _context24.n = 4;
-        return put(removeChannelAC(channelId));
+        return call(channel.leave);
       case 4:
-        deleteChannelFromAllChannels(channelId);
         _context24.n = 5;
-        return put(removeChannelCachesAC(channelId));
+        return put(removeChannelAC(channelId));
       case 5:
-        _context24.n = 7;
-        break;
+        deleteChannelFromAllChannels(channelId);
+        _context24.n = 6;
+        return put(removeChannelCachesAC(channelId));
       case 6:
-        _context24.p = 6;
+        _context24.n = 8;
+        break;
+      case 7:
+        _context24.p = 7;
         _t22 = _context24.v;
         log.error('ERROR in leave channel - ', _t22.message);
-      case 7:
+      case 8:
         return _context24.a(2);
     }
-  }, _marked22$1, null, [[0, 6]]);
+  }, _marked23$1, null, [[0, 7]]);
 }
 function deletePendingDeleteChannels() {
   var pendingDeleteChannels, _iterator10, _step10, channel, resendableError, _t23;
@@ -27740,7 +27868,7 @@ function deletePendingDeleteChannels() {
       case 9:
         return _context25.a(2);
     }
-  }, _marked23$1, null, [[2, 7]]);
+  }, _marked24$1, null, [[2, 7]]);
 }
 function deleteChannel(action) {
   var payload, channelId, channel, activeChannelId, lastChannel, _t24;
@@ -27834,7 +27962,7 @@ function deleteChannel(action) {
       case 19:
         return _context26.a(2);
     }
-  }, _marked24$1, null, [[0, 18]]);
+  }, _marked25$1, null, [[0, 18]]);
 }
 function blockChannel(action) {
   var payload, channelId, channel, _t25;
@@ -27873,7 +28001,7 @@ function blockChannel(action) {
       case 6:
         return _context27.a(2);
     }
-  }, _marked25$1, null, [[0, 5]]);
+  }, _marked26$1, null, [[0, 5]]);
 }
 function updateChannel(action) {
   var payload, channelId, config, _SceytChatClient6, channel, paramsToUpdate, fileToUpload, _yield$call5, subject, avatarUrl, metadata, onUpdateChannel, _channel3, _channel4, _channel5, fields, updatedChannel, _t26;
@@ -27970,7 +28098,7 @@ function updateChannel(action) {
       case 9:
         return _context28.a(2);
     }
-  }, _marked26$1, null, [[0, 8]]);
+  }, _marked27$1, null, [[0, 8]]);
 }
 function checkUsersStatus() {
   var _SceytChatClient7, usersForUpdate, updatedUsers, usersToUpdateMap, update, updateData, _t27;
@@ -28021,7 +28149,7 @@ function checkUsersStatus() {
       case 7:
         return _context29.a(2);
     }
-  }, _marked27$1, null, [[0, 6]]);
+  }, _marked28$1, null, [[0, 6]]);
 }
 function sendTyping(action) {
   var state, activeChannelId, channel, _t28;
@@ -28064,7 +28192,7 @@ function sendTyping(action) {
       case 8:
         return _context30.a(2);
     }
-  }, _marked28$1, null, [[3, 7]]);
+  }, _marked29$1, null, [[3, 7]]);
 }
 function sendRecording(action) {
   var _action$payload, state, channelId, channel, _t29;
@@ -28107,7 +28235,7 @@ function sendRecording(action) {
       case 7:
         return _context31.a(2);
     }
-  }, _marked29$1, null, [[2, 6]]);
+  }, _marked30$1, null, [[2, 6]]);
 }
 function clearHistory(action) {
   var payload, channelId, channel, activeChannelId, groupName, _t30;
@@ -28177,7 +28305,7 @@ function clearHistory(action) {
       case 10:
         return _context32.a(2);
     }
-  }, _marked30$1, null, [[0, 9]]);
+  }, _marked31$1, null, [[0, 9]]);
 }
 function deleteAllMessages(action) {
   var payload, channelId, channel, activeChannelId, groupName, _t31;
@@ -28250,7 +28378,7 @@ function deleteAllMessages(action) {
       case 11:
         return _context33.a(2);
     }
-  }, _marked31$1, null, [[0, 10]]);
+  }, _marked32$1, null, [[0, 10]]);
 }
 function joinChannel(action) {
   var payload, channelId, _SceytChatClient8, channel, joinedChannel, _t32;
@@ -28303,7 +28431,7 @@ function joinChannel(action) {
       case 10:
         return _context34.a(2);
     }
-  }, _marked32$1, null, [[0, 9]]);
+  }, _marked33$1, null, [[0, 9]]);
 }
 function watchForChannelEvents() {
   return _regenerator().w(function (_context35) {
@@ -28314,7 +28442,7 @@ function watchForChannelEvents() {
       case 1:
         return _context35.a(2);
     }
-  }, _marked33$1);
+  }, _marked34$1);
 }
 function createChannelInviteKey(action) {
   var payload, channelId, _SceytChatClient9, channel, inviteKey, _t33;
@@ -28356,7 +28484,7 @@ function createChannelInviteKey(action) {
       case 5:
         return _context36.a(2);
     }
-  }, _marked34$1, null, [[0, 4]]);
+  }, _marked35$1, null, [[0, 4]]);
 }
 function getChannelInviteKeys(action) {
   var payload, channelId, channel, inviteKeys, _t34;
@@ -28393,7 +28521,7 @@ function getChannelInviteKeys(action) {
       case 5:
         return _context37.a(2);
     }
-  }, _marked35$1, null, [[0, 4]]);
+  }, _marked36$1, null, [[0, 4]]);
 }
 function regenerateChannelInviteKey(action) {
   var payload, channelId, key, deletePermanently, channel, inviteKey, _t35;
@@ -28434,7 +28562,7 @@ function regenerateChannelInviteKey(action) {
       case 5:
         return _context38.a(2);
     }
-  }, _marked36$1, null, [[0, 4]]);
+  }, _marked37$1, null, [[0, 4]]);
 }
 function updateChannelInviteKey(action) {
   var channelInviteKeys, channelId, payload, payloadChannelId, key, accessPriorHistory, expiresAt, maxUses, channel, copiedChannelInviteKeys, _t36;
@@ -28494,7 +28622,7 @@ function updateChannelInviteKey(action) {
       case 6:
         return _context39.a(2);
     }
-  }, _marked37$1, null, [[1, 5]]);
+  }, _marked38$1, null, [[1, 5]]);
 }
 function getChannelByInviteKey(action) {
   var _channel$, _channel$2, payload, key, _SceytChatClient0, channel, _t37;
@@ -28545,7 +28673,7 @@ function getChannelByInviteKey(action) {
       case 8:
         return _context40.a(2);
     }
-  }, _marked38$1, null, [[0, 6]]);
+  }, _marked39$1, null, [[0, 6]]);
 }
 function joinChannelWithInviteKey(action) {
   var payload, key, _SceytChatClient1, user, channel, messageToSend, _t38;
@@ -28589,7 +28717,7 @@ function joinChannelWithInviteKey(action) {
       case 7:
         return _context41.a(2);
     }
-  }, _marked39$1, null, [[0, 6]]);
+  }, _marked40$1, null, [[0, 6]]);
 }
 function setMessageRetentionPeriod(action) {
   var payload, channelId, periodInMilliseconds, channel, messageToSend, _t39;
@@ -28642,7 +28770,7 @@ function setMessageRetentionPeriod(action) {
       case 6:
         return _context42.a(2);
     }
-  }, _marked40$1, null, [[0, 5]]);
+  }, _marked41$1, null, [[0, 5]]);
 }
 function getChannelsWithUser(action) {
   var payload, userId, _SceytChatClient10, channelsQueryBuilder, channelsQuery, channelsData, channels, _t40;
@@ -28705,7 +28833,7 @@ function getChannelsWithUser(action) {
       case 12:
         return _context43.a(2);
     }
-  }, _marked41$1, null, [[2, 9, 10, 12]]);
+  }, _marked42$1, null, [[2, 9, 10, 12]]);
 }
 function loadMoreMutualChannels(action) {
   var payload, limit, mutualChannelsQuery, channelsData, _t41;
@@ -28763,7 +28891,7 @@ function loadMoreMutualChannels(action) {
       case 11:
         return _context44.a(2);
     }
-  }, _marked42$1, null, [[1, 8, 9, 11]]);
+  }, _marked43$1, null, [[1, 8, 9, 11]]);
 }
 function ChannelsSaga() {
   return _regenerator().w(function (_context45) {
@@ -28897,7 +29025,7 @@ function ChannelsSaga() {
       case 42:
         return _context45.a(2);
     }
-  }, _marked43$1);
+  }, _marked44$1);
 }
 
 var _marked$4 = /*#__PURE__*/_regenerator().m(getMembers),
@@ -30894,7 +31022,9 @@ var SceytChat = function SceytChat(_ref) {
     if (client) {
       cleanupOldAttachmentCache();
       if (client.user && client.user.id) {
-        initMessagesIdbForUser(client.user.id);
+        initMessagesIdbForUser(client.user.id).then(function () {
+          return hydrateDraftMessages();
+        });
       }
       setClient(client);
       setSceytChatClient(client);
@@ -30905,6 +31035,8 @@ var SceytChat = function SceytChat(_ref) {
       setActiveChannelId('');
       destroyChannelsMap();
       clearUsersMap();
+      clearDraftMessagesMap();
+      clearPersistedDrafts();
       releaseAllBlobUrls();
       dispatch(destroySession());
     }
@@ -31559,6 +31691,7 @@ var LastMessageAttachments = function LastMessageAttachments(_ref) {
   return !!(lastMessage.attachments && lastMessage.attachments.length || lastMessage !== null && lastMessage !== void 0 && lastMessage.pollDetails && (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.type) === MESSAGE_TYPE.POLL) && (lastMessage !== null && lastMessage !== void 0 && lastMessage.pollDetails && (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.type) === MESSAGE_TYPE.POLL ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgPoll, null), lastMessage.body ? '' : 'Poll')) : lastMessage.attachments[0].type === attachmentTypes.image ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, isViewOnce ? /*#__PURE__*/React__default.createElement(SvgViewOnceLastMessage, null) : /*#__PURE__*/React__default.createElement(SvgPicture, null), lastMessage.body && !isViewOnce ? '' : 'Photo')) : lastMessage.attachments[0].type === attachmentTypes.video ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, isViewOnce ? /*#__PURE__*/React__default.createElement(SvgViewOnceLastMessage, null) : /*#__PURE__*/React__default.createElement(SvgVideoCall, null), lastMessage.body && !isViewOnce ? '' : 'Video')) : lastMessage.attachments[0].type === attachmentTypes.file ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgChoseFile, null), lastMessage.body ? '' : 'File')) : lastMessage.attachments[0].type === attachmentTypes.voice ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, isViewOnce ? /*#__PURE__*/React__default.createElement(SvgViewOnceLastMessage, null) : /*#__PURE__*/React__default.createElement(SvgVoiceIcon, null), lastMessage.body && !isViewOnce ? '' : 'Voice')) : null);
 };
 var ChannelMessageText = function ChannelMessageText(_ref2) {
+  var _lastMessage$attachme, _lastMessage$attachme2, _lastMessage$attachme3;
   var isTypingOrRecording = _ref2.isTypingOrRecording,
     textPrimary = _ref2.textPrimary,
     textSecondary = _ref2.textSecondary,
@@ -31581,8 +31714,10 @@ var ChannelMessageText = function ChannelMessageText(_ref2) {
     color: textPrimary
   }, ":"), typingOrRecording.isTyping ? 'typing' : 'recording', "...")), !isTypingOrRecording && (draftMessageText ? (/*#__PURE__*/React__default.createElement(DraftMessageText, {
     color: textSecondary
-  }, audioRecording && /*#__PURE__*/React__default.createElement(SvgVoiceIcon, null), MessageTextFormat({
-    text: draftMessageText,
+  }, !lastMessage.body && (_lastMessage$attachme = lastMessage.attachments) !== null && _lastMessage$attachme !== void 0 && _lastMessage$attachme.length ? LastMessageAttachments({
+    lastMessage: lastMessage
+  }) : null, audioRecording && /*#__PURE__*/React__default.createElement(SvgVoiceIcon, null), (!((_lastMessage$attachme2 = lastMessage.attachments) !== null && _lastMessage$attachme2 !== void 0 && _lastMessage$attachme2.length) || lastMessage.body) && MessageTextFormat({
+    text: (_lastMessage$attachme3 = lastMessage.attachments) !== null && _lastMessage$attachme3 !== void 0 && _lastMessage$attachme3.length ? lastMessage.body : draftMessageText,
     message: lastMessage,
     contactsMap: contactsMap,
     getFromContacts: getFromContacts,
@@ -31671,13 +31806,23 @@ var Channel = function Channel(_ref3) {
   var _useState2 = useState(),
     draftMessage = _useState2[0],
     setDraftMessage = _useState2[1];
+  var _useState3 = useState(0),
+    draftRevision = _useState3[0],
+    setDraftRevision = _useState3[1];
+  useEffect(function () {
+    return subscribeToDraftMessages(function () {
+      return setDraftRevision(function (revision) {
+        return revision + 1;
+      });
+    });
+  }, []);
   var lastMessage = useMemo(function () {
     return channel.lastReactedMessage || channel.lastMessage;
   }, [channel.lastReactedMessage, channel.lastMessage]);
   var lastMessageMetas = lastMessage && lastMessage.type === MESSAGE_TYPE.SYSTEM && lastMessage.metadata && (isJSON(lastMessage.metadata) ? JSON.parse(lastMessage.metadata) : lastMessage.metadata);
-  var _useState3 = useState(0),
-    statusWidth = _useState3[0],
-    setStatusWidth = _useState3[1];
+  var _useState4 = useState(0),
+    statusWidth = _useState4[0],
+    setStatusWidth = _useState4[1];
   var avatarName = channel.subject || (isDirectChannel && directChannelUser ? directChannelUser.firstName || directChannelUser.id : isSelfChannel ? showPhoneNumber ? "+" + user.id + " (You)" : 'Me' : '');
   var messageAuthorRef = useRef(null);
   var messageTimeAndStatusRef = useRef(null);
@@ -31693,12 +31838,27 @@ var Channel = function Channel(_ref3) {
       var draftAudioRecording = getAudioRecordingFromMap(channel.id);
       if (channelDraftMessage || draftAudioRecording) {
         if (channelDraftMessage) {
-          setDraftMessageText(channelDraftMessage.text);
-          setDraftMessage({
-            mentionedUsers: channelDraftMessage.mentionedUsers,
-            body: channelDraftMessage.text,
-            bodyAttributes: channelDraftMessage.bodyAttributes
-          });
+          var _channelDraftMessage$, _ref4, _channelDraftMessage$2, _channelDraftMessage$3, _channelDraftMessage$4;
+          var attachment = (_channelDraftMessage$ = channelDraftMessage.attachments) === null || _channelDraftMessage$ === void 0 ? void 0 : _channelDraftMessage$[0];
+          var editText = (_ref4 = (_channelDraftMessage$2 = channelDraftMessage.editMessageText) != null ? _channelDraftMessage$2 : (_channelDraftMessage$3 = channelDraftMessage.messageToEdit) === null || _channelDraftMessage$3 === void 0 ? void 0 : _channelDraftMessage$3.body) != null ? _ref4 : '';
+          var hasChangedEdit = !!channelDraftMessage.messageToEdit && !!editText.trim() && (editText !== channelDraftMessage.messageToEdit.body || JSON.stringify(channelDraftMessage.editBodyAttributes || []) !== JSON.stringify(channelDraftMessage.messageToEdit.bodyAttributes || []));
+          var mediaLabel = (attachment === null || attachment === void 0 ? void 0 : attachment.type) === attachmentTypes.image ? 'Photo' : (attachment === null || attachment === void 0 ? void 0 : attachment.type) === attachmentTypes.video ? 'Video' : (attachment === null || attachment === void 0 ? void 0 : attachment.type) === attachmentTypes.voice ? 'Voice' : attachment ? 'File' : '';
+          var draftText = ((_channelDraftMessage$4 = channelDraftMessage.text) === null || _channelDraftMessage$4 === void 0 ? void 0 : _channelDraftMessage$4.trim()) || mediaLabel;
+          var isContextOnlyDraft = !!channelDraftMessage.messageForReply && !draftText || !!channelDraftMessage.messageToEdit && !hasChangedEdit;
+          if (isContextOnlyDraft) {
+            setDraftMessageText(undefined);
+            setDraftMessage(undefined);
+          } else {
+            setDraftMessageText(draftText);
+            setDraftMessage({
+              mentionedUsers: channelDraftMessage.mentionedUsers,
+              body: channelDraftMessage.text,
+              bodyAttributes: channelDraftMessage.bodyAttributes,
+              attachments: channelDraftMessage.attachments,
+              viewOnce: channelDraftMessage.viewOnce,
+              type: channelDraftMessage.viewOnce ? MESSAGE_TYPE.VIEW_ONCE : undefined
+            });
+          }
         } else if (draftAudioRecording) {
           setDraftMessageText('Voice');
           setDraftMessage(undefined);
@@ -31708,7 +31868,7 @@ var Channel = function Channel(_ref3) {
         setDraftMessage(undefined);
       }
     }
-  }, [activeChannel.id]);
+  }, [activeChannel.id, draftRevision]);
   useEffect(function () {
     if (channelDraftIsRemoved && channelDraftIsRemoved === channel.id) {
       setDraftMessageText(undefined);
@@ -31749,6 +31909,8 @@ var Channel = function Channel(_ref3) {
   var unsupportedMessage = useMemo(function () {
     return isMessageUnsupported(lastMessage);
   }, [lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.type]);
+  var shouldShowDraft = !!draftMessageText && !(channel.newMessageCount > 0);
+  var displayedLastMessage = shouldShowDraft ? draftMessage || lastMessage : lastMessage;
   var MessageText = useMemo(function () {
     return /*#__PURE__*/React__default.createElement(ChannelMessageText, {
       isTypingOrRecording: (typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isTyping) || (typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isRecording),
@@ -31761,29 +31923,29 @@ var Channel = function Channel(_ref3) {
       channel: channel,
       textPrimary: textPrimary,
       textSecondary: textSecondary,
-      draftMessageText: draftMessageText,
-      lastMessage: draftMessage || lastMessage,
+      draftMessageText: shouldShowDraft ? draftMessageText : '',
+      lastMessage: displayedLastMessage,
       isDirectChannel: isDirectChannel,
       unsupportedMessage: unsupportedMessage && !getCustomLatestMessage
     });
-  }, [typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isTyping, typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isRecording, draftMessageText, lastMessage, user, contactsMap, getFromContacts, lastMessageMetas, accentColor, typingOrRecording, channel, isDirectChannel, unsupportedMessage]);
-  var getCustomLatestMessageComponent = useCallback(function (_ref4) {
-    var lastMessage = _ref4.lastMessage,
-      typingOrRecording = _ref4.typingOrRecording,
-      draftMessageText = _ref4.draftMessageText,
-      textSecondary = _ref4.textSecondary,
-      channel = _ref4.channel,
-      channelLastMessageFontSize = _ref4.channelLastMessageFontSize,
-      channelLastMessageHeight = _ref4.channelLastMessageHeight,
-      isDirectChannel = _ref4.isDirectChannel,
-      textPrimary = _ref4.textPrimary,
-      messageAuthorRef = _ref4.messageAuthorRef,
-      contactsMap = _ref4.contactsMap,
-      getFromContacts = _ref4.getFromContacts,
-      warningColor = _ref4.warningColor,
-      user = _ref4.user,
-      MessageText = _ref4.MessageText,
-      unsupportedMessage = _ref4.unsupportedMessage;
+  }, [typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isTyping, typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isRecording, draftMessageText, shouldShowDraft, displayedLastMessage, lastMessage, user, contactsMap, getFromContacts, lastMessageMetas, accentColor, typingOrRecording, channel, isDirectChannel, unsupportedMessage]);
+  var getCustomLatestMessageComponent = useCallback(function (_ref5) {
+    var lastMessage = _ref5.lastMessage,
+      typingOrRecording = _ref5.typingOrRecording,
+      draftMessageText = _ref5.draftMessageText,
+      textSecondary = _ref5.textSecondary,
+      channel = _ref5.channel,
+      channelLastMessageFontSize = _ref5.channelLastMessageFontSize,
+      channelLastMessageHeight = _ref5.channelLastMessageHeight,
+      isDirectChannel = _ref5.isDirectChannel,
+      textPrimary = _ref5.textPrimary,
+      messageAuthorRef = _ref5.messageAuthorRef,
+      contactsMap = _ref5.contactsMap,
+      getFromContacts = _ref5.getFromContacts,
+      warningColor = _ref5.warningColor,
+      user = _ref5.user,
+      MessageText = _ref5.MessageText,
+      unsupportedMessage = _ref5.unsupportedMessage;
     return getCustomLatestMessage && getCustomLatestMessage({
       lastMessage: lastMessage,
       typingOrRecording: typingOrRecording,
@@ -31857,7 +32019,7 @@ var Channel = function Channel(_ref3) {
   }, notificationsIsMutedIcon || /*#__PURE__*/React__default.createElement(SvgUnmuteNotifications, null))), getCustomLatestMessage && !typingOrRecording.items.length ? getCustomLatestMessageComponent({
     lastMessage: lastMessage,
     typingOrRecording: typingOrRecording,
-    draftMessageText: draftMessageText,
+    draftMessageText: shouldShowDraft ? draftMessageText : undefined,
     textSecondary: textSecondary,
     channel: channel,
     channelLastMessageFontSize: channelLastMessageFontSize || '14px',
@@ -31871,7 +32033,7 @@ var Channel = function Channel(_ref3) {
     user: user,
     MessageText: MessageText,
     unsupportedMessage: unsupportedMessage
-  }) : (lastMessage || typingOrRecording.items.length > 0 || draftMessageText) && (/*#__PURE__*/React__default.createElement(LastMessage, {
+  }) : (lastMessage || typingOrRecording.items.length > 0 || shouldShowDraft) && (/*#__PURE__*/React__default.createElement(LastMessage, {
     color: textSecondary,
     markedAsUnread: !!(channel.unread || channel.newMessageCount && channel.newMessageCount > 0),
     unreadMentions: !!(channel.newMentionCount && channel.newMentionCount > 0),
@@ -31887,7 +32049,7 @@ var Channel = function Channel(_ref3) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: item.from.id
     }, makeUsername(contactsMap && contactsMap[item.from.id], item.from, getFromContacts, true), index < typingOrRecording.items.length - 1 && ', ');
-  })))) : null : draftMessageText ? (/*#__PURE__*/React__default.createElement(DraftMessageTitle, {
+  })))) : null : shouldShowDraft ? (/*#__PURE__*/React__default.createElement(DraftMessageTitle, {
     color: warningColor
   }, "Draft")) : channel.lastReactedMessage && channel.newReactions && channel.newReactions[0] ? lastMessage.state !== MESSAGE_STATUS.DELETE && (channel.newReactions[0].user && channel.newReactions[0].user.id === user.id || !isDirectChannel) && lastMessage.type !== MESSAGE_TYPE.SYSTEM && (/*#__PURE__*/React__default.createElement(LastMessageAuthor, {
     color: textPrimary
@@ -31897,8 +32059,8 @@ var Channel = function Channel(_ref3) {
     color: textPrimary
   }, /*#__PURE__*/React__default.createElement("span", {
     ref: messageAuthorRef
-  }, lastMessage.user.id === user.id ? 'You' : makeUsername(contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts, true)))), !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (isDirectChannel ? !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (draftMessageText || lastMessage.user && lastMessage.state !== MESSAGE_STATUS.DELETE && (channel.lastReactedMessage && channel.newReactions && channel.newReactions[0] ? channel.newReactions[0].user && channel.newReactions[0].user.id === user.id : lastMessage.user.id === user.id && lastMessage.type !== MESSAGE_TYPE.SYSTEM)) : draftMessageText || lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && lastMessage.type !== MESSAGE_TYPE.SYSTEM) && (/*#__PURE__*/React__default.createElement(Points, {
-    color: draftMessageText && warningColor || textPrimary
+  }, lastMessage.user.id === user.id ? 'You' : makeUsername(contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts, true)))), !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (isDirectChannel ? !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (shouldShowDraft || lastMessage.user && lastMessage.state !== MESSAGE_STATUS.DELETE && (channel.lastReactedMessage && channel.newReactions && channel.newReactions[0] ? channel.newReactions[0].user && channel.newReactions[0].user.id === user.id : lastMessage.user.id === user.id && lastMessage.type !== MESSAGE_TYPE.SYSTEM)) : shouldShowDraft || lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && lastMessage.type !== MESSAGE_TYPE.SYSTEM) && (/*#__PURE__*/React__default.createElement(Points, {
+    color: shouldShowDraft && warningColor || textPrimary
   }, ": ")), /*#__PURE__*/React__default.createElement(LastMessageText, {
     color: textSecondary,
     withAttachments: !!(lastMessage && lastMessage.attachments && lastMessage.attachments.length && lastMessage.attachments[0].type !== attachmentTypes.link) && (!(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) || !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording)),
@@ -31907,7 +32069,7 @@ var Channel = function Channel(_ref3) {
   }, MessageText)))), /*#__PURE__*/React__default.createElement(ChannelStatus, {
     color: iconInactive,
     ref: messageTimeAndStatusRef
-  }, lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && !draftMessageText && (/*#__PURE__*/React__default.createElement(DeliveryIconCont, null, lastMessage && lastMessage.user && lastMessage.user.id === user.id && isTypeValid(lastMessage.type) && MessageStatusIcon({
+  }, lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && !shouldShowDraft && (/*#__PURE__*/React__default.createElement(DeliveryIconCont, null, lastMessage && lastMessage.user && lastMessage.user.id === user.id && isTypeValid(lastMessage.type) && MessageStatusIcon({
     messageStatus: lastMessage.deliveryStatus,
     messageStatusDisplayingType: 'ticks',
     readIconColor: accentColor,
@@ -31918,7 +32080,7 @@ var Channel = function Channel(_ref3) {
     color: textSecondary,
     fontSize: channelLastMessageTimeFontSize
   }, lastMessage && lastMessage.createdAt && lastMessageDateFormat(lastMessage.createdAt))), /*#__PURE__*/React__default.createElement(UnreadInfo, {
-    bottom: !(lastMessage || typingOrRecording.items.length > 0 || draftMessageText) ? '5px' : ''
+    bottom: !(lastMessage || typingOrRecording.items.length > 0 || shouldShowDraft) ? '5px' : ''
   }, channel.pinnedAt && (/*#__PURE__*/React__default.createElement(PinnedIconWrapper, {
     color: iconInactive,
     margin: channel.newMessageCount || channel.unread || channel.newMentionCount && channel.newMentionCount > 0 ? '0 4px 0 4px' : ''
@@ -31994,9 +32156,9 @@ var Container$3 = styled.div(_templateObject7$2 || (_templateObject7$2 = _tagged
   return props.selectedChannel ? props.selectedBackgroundColor : props.backgroundColor;
 }, function (props) {
   return props.selectedChannel ? props.selectedBackgroundColor : props.backgroundColor;
-}, function (_ref5) {
-  var selectedChannel = _ref5.selectedChannel,
-    hoverBackground = _ref5.hoverBackground;
+}, function (_ref6) {
+  var selectedChannel = _ref6.selectedChannel,
+    hoverBackground = _ref6.hoverBackground;
   return !selectedChannel && "\n      background-color: " + hoverBackground + ";\n    ";
 }, UserStatus, function (props) {
   return props.selectedChannel ? props.selectedBackgroundColor : props.hoverBackground;
@@ -32015,9 +32177,9 @@ var DraftMessageText = styled.span(_templateObject9$1 || (_templateObject9$1 = _
 });
 var LastMessageAuthor = styled.div(_templateObject0$1 || (_templateObject0$1 = _taggedTemplateLiteralLoose(["\n  max-width: 120px;\n  font-weight: 500;\n  color: ", ";\n\n  ", "\n  & > span {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 100%;\n  }\n"])), function (props) {
   return props.color;
-}, function (_ref6) {
-  var typing = _ref6.typing,
-    recording = _ref6.recording;
+}, function (_ref7) {
+  var typing = _ref7.typing,
+    recording = _ref7.recording;
   return (typing || recording) && "\n    font-weight: 500;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: calc(100% - " + (typing ? 62 : 76) + "px);\n  ";
 });
 var Points = styled.span(_templateObject1$1 || (_templateObject1$1 = _taggedTemplateLiteralLoose(["\n  margin-right: 4px;\n  color: ", ";\n  font-style: normal;\n"])), function (props) {
@@ -32050,9 +32212,9 @@ var UnreadMentionIconWrapper = styled.span(_templateObject15$1 || (_templateObje
   return props.rightMargin && '8px';
 }, function (props) {
   return props.iconColor;
-}, function (_ref7) {
-  var onAvatar = _ref7.onAvatar,
-    mainBg = _ref7.mainBg;
+}, function (_ref8) {
+  var onAvatar = _ref8.onAvatar,
+    mainBg = _ref8.mainBg;
   return onAvatar ? "\n    position: absolute;\n    right: 6px;\n    bottom: 6px;\n    border: 2px solid " + mainBg + ";\n    min-width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    margin-right: 0;\n  " : '';
 });
 var TypingIndicator = styled.span(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n  font-style: italic;\n"])));
@@ -32072,9 +32234,9 @@ var UnreadCount = styled.span(_templateObject19$1 || (_templateObject19$1 = _tag
   return props.textColor;
 }, function (props) {
   return props.isMuted && "background-color: " + props.mutedBackgroundColor + ";";
-}, function (_ref8) {
-  var onAvatar = _ref8.onAvatar,
-    mainBg = _ref8.mainBg;
+}, function (_ref9) {
+  var onAvatar = _ref9.onAvatar,
+    mainBg = _ref9.mainBg;
   return onAvatar ? "\n    position: absolute;\n    right: 6px;\n    bottom: 6px;\n    border: 2px solid " + mainBg + ";\n    min-width: 24px;\n    height: 24px;\n    max-width: 24px;\n    border-radius: 50%;\n  " : '';
 });
 var PinnedIconWrapper = styled.span(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  ", ";\n  & > svg {\n    color: ", ";\n  }\n"])), function (props) {
@@ -39563,7 +39725,7 @@ var VideoIcon = styled.div(_templateObject8$a || (_templateObject8$a = _taggedTe
   return bg;
 });
 
-var _templateObject$z, _templateObject2$v, _templateObject3$p, _templateObject4$l, _templateObject5$h, _templateObject6$e, _templateObject7$d, _templateObject8$b, _templateObject9$9, _templateObject0$8, _templateObject1$8, _templateObject10$6, _templateObject11$5;
+var _templateObject$z, _templateObject2$v, _templateObject3$p, _templateObject4$l, _templateObject5$h, _templateObject6$e, _templateObject7$d, _templateObject8$b, _templateObject9$9, _templateObject0$8, _templateObject1$8, _templateObject10$6, _templateObject11$5, _templateObject12$4, _templateObject13$4;
 var Attachment = function Attachment(_ref) {
   var attachment = _ref.attachment,
     _ref$isPreview = _ref.isPreview,
@@ -39625,6 +39787,10 @@ var Attachment = function Attachment(_ref) {
   var _useState3 = useState(attachmentUrlFromMap),
     attachmentUrl = _useState3[0],
     setAttachmentUrl = _useState3[1];
+  var attachmentIdentity = attachment.id || attachment.tid || 'unknown-attachment';
+  var attachmentKey = (channelId || 'unknown-channel') + ":" + attachmentIdentity + ":" + (attachment.url || '');
+  var currentAttachmentKeyRef = useRef(attachmentKey);
+  currentAttachmentKeyRef.current = attachmentKey;
   var _useState4 = useState(false),
     imageLoaded = _useState4[0],
     setImageLoaded = _useState4[1];
@@ -39684,6 +39850,18 @@ var Attachment = function Attachment(_ref) {
       log.error('error on get attachmentThumb', e);
     }
   }
+  useEffect(function () {
+    if (attachment.type !== attachmentTypes.image) return;
+    log.info('[MEDIA_ISSUE] image thumbnail source', JSON.stringify({
+      channelId: channelId || null,
+      attachmentId: attachment.id || attachment.tid || null,
+      attachmentUrl: attachment.url || null,
+      mapUrl: attachmentUrlFromMap || null,
+      propUrl: attachment.attachmentUrl || null,
+      localUrl: attachmentUrl || null,
+      renderedSource: attachmentUrlFromMap || attachment.attachmentUrl || attachmentUrl || attachmentThumb || null
+    }));
+  }, [attachment.id, attachment.tid, attachment.type, attachment.url, attachment.attachmentUrl, attachmentUrlFromMap, attachmentUrl, channelId]);
   useEffect(function () {
     var currentSrc = attachment.attachmentUrl || attachmentUrlFromMap || attachmentUrl || attachmentThumb;
     var wasThumbnail = previousImageSrcRef.current === attachmentThumb;
@@ -39973,12 +40151,23 @@ var Attachment = function Attachment(_ref) {
   }, [attachmentUrl]);
   useEffect(function () {
     if (!attachment.attachmentUrl && connectionStatus === CONNECTION_STATUS.CONNECTED && attachment.id && !attachmentUrlFromMap && !(attachment.type === attachmentTypes.file || attachment.type === attachmentTypes.link)) {
+      var requestAttachmentKey = attachmentKey;
+      log.info('[MEDIA_ISSUE] image thumbnail load started', JSON.stringify({
+        channelId: channelId || null,
+        attachmentId: attachment.id || attachment.tid || null,
+        url: attachment.url
+      }));
       getAttachmentUrlFromCache(attachment.url).then(function (cachedUrl) {
         try {
           var _temp16 = function () {
             if (attachment.type === attachmentTypes.image && !isPreview) {
               var _temp15 = function () {
                 if (cachedUrl) {
+                  log.info('[MEDIA_ISSUE] image thumbnail cache resolved', JSON.stringify({
+                    requestAttachmentKey: requestAttachmentKey,
+                    currentAttachmentKey: currentAttachmentKeyRef.current,
+                    cachedUrl: cachedUrl
+                  }));
                   setAttachmentUrl(cachedUrl);
                   dispatch(setUpdateMessageAttachmentAC(attachment.url, cachedUrl));
                   setIsCached(true);
@@ -39999,6 +40188,12 @@ var Attachment = function Attachment(_ref) {
                         try {
                           return Promise.resolve(compressAndCacheImage(url, attachment.url, renderWidth, renderHeight)).then(function (compressedUrl) {
                             if (compressedUrl) {
+                              log.info('[MEDIA_ISSUE] image thumbnail download resolved', JSON.stringify({
+                                requestAttachmentKey: requestAttachmentKey,
+                                currentAttachmentKey: currentAttachmentKeyRef.current,
+                                sourceUrl: url,
+                                cachedUrl: compressedUrl
+                              }));
                               setAttachmentUrl(compressedUrl);
                             }
                             downloadImage(compressedUrl || url);
@@ -40191,7 +40386,7 @@ var Attachment = function Attachment(_ref) {
     isPreview: isPreview,
     isRepliedMessage: isRepliedMessage,
     withBorder: !isPreview && !isDetailsView,
-    src: attachmentUrlFromMap || attachmentUrl || (withPrefix && attachmentThumb ? "data:image/jpeg;base64," + attachmentThumb : attachmentThumb),
+    src: attachmentUrlFromMap || attachment.attachmentUrl || attachmentUrl || (withPrefix && attachmentThumb ? "data:image/jpeg;base64," + attachmentThumb : attachmentThumb),
     fitTheContainer: true,
     imageMaxHeight: (renderHeight || 400) + "px",
     isDetailsView: isDetailsView,
@@ -40362,7 +40557,9 @@ var Attachment = function Attachment(_ref) {
     border: selectedFileAttachmentsBoxBorder || (theme === THEME.DARK ? 'none' : ''),
     width: fileAttachmentWidth,
     borderColor: borderColor
-  }, attachmentThumb ? (/*#__PURE__*/React__default.createElement(FileThumbnail, {
+  }, attachment.thumbnailState === 'loading' ? (/*#__PURE__*/React__default.createElement(FileThumbnailSkeleton, {
+    color: overlayBackground2
+  })) : attachmentThumb ? (/*#__PURE__*/React__default.createElement(FileThumbnail, {
     src: withPrefix ? "data:image/jpeg;base64," + attachmentThumb : attachmentThumb,
     loading: 'lazy',
     decoding: 'async',
@@ -40472,18 +40669,26 @@ var AttachmentImgCont = styled.div(_templateObject2$v || (_templateObject2$v = _
   return props.isPreview && "\n      width: 48px;\n      min-width: 48px;\n      height: 48px;\n  ";
 });
 var FileThumbnail = styled.img(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  min-width: 40px;\n  max-width: 40px;\n  height: 40px;\n  object-fit: cover;\n  border-radius: 8px;\n"])));
-var DownloadFile$1 = styled.span(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n  display: none;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  background-color: ", ";\n  min-width: 40px;\n  max-width: 40px;\n  height: 40px;\n  position: ", ";\n  border-radius: ", ";\n\n  & > svg {\n    width: 20px;\n    height: 20px;\n  }\n"])), function (props) {
+var fileThumbnailShimmer = keyframes(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n  0% { background-position: -120px 0; }\n  100% { background-position: 120px 0; }\n"])));
+var FileThumbnailSkeleton = styled.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  min-width: 40px;\n  max-width: 40px;\n  height: 40px;\n  border-radius: 8px;\n  background-color: ", ";\n  background-image: linear-gradient(\n    90deg,\n    ", ",\n    rgba(255, 255, 255, 0.55),\n    ", "\n  );\n  background-size: 240px 100%;\n  animation: ", " 1.1s ease infinite;\n"])), function (props) {
+  return props.color;
+}, function (props) {
+  return props.color;
+}, function (props) {
+  return props.color;
+}, fileThumbnailShimmer);
+var DownloadFile$1 = styled.span(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n  display: none;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  background-color: ", ";\n  min-width: 40px;\n  max-width: 40px;\n  height: 40px;\n  position: ", ";\n  border-radius: ", ";\n\n  & > svg {\n    width: 20px;\n    height: 20px;\n  }\n"])), function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.widthThumb && 'absolute';
 }, function (props) {
   return props.widthThumb ? '7.3px' : '50%';
 });
-var ProgressWrapper$1 = styled.span(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;\n  animation: preloader 1.5s linear infinite;\n\n  @keyframes preloader {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])));
-var SizeProgress = styled.span(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: -26px;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: ", ";\n  font-size: 12px;\n  border-radius: 12px;\n  padding: 3px 6px;\n  white-space: nowrap;\n"])), function (props) {
+var ProgressWrapper$1 = styled.span(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;\n  animation: preloader 1.5s linear infinite;\n\n  @keyframes preloader {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])));
+var SizeProgress = styled.span(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: -26px;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: ", ";\n  font-size: 12px;\n  border-radius: 12px;\n  padding: 3px 6px;\n  white-space: nowrap;\n"])), function (props) {
   return props.color;
 });
-var AttachmentFile$1 = styled.div(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  padding: ", ";\n  //width: ", ";\n  min-width: ", ";\n  //height: 70px;\n  background: ", ";\n  border: ", ";\n  box-sizing: border-box;\n  margin-right: ", ";\n  border-radius: ", ";\n\n  ", "\n\n  & > ", " svg {\n    width: 40px;\n    height: 40px;\n  }\n"])), function (props) {
+var AttachmentFile$1 = styled.div(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  padding: ", ";\n  //width: ", ";\n  min-width: ", ";\n  //height: 70px;\n  background: ", ";\n  border: ", ";\n  box-sizing: border-box;\n  margin-right: ", ";\n  border-radius: ", ";\n\n  ", "\n\n  & > ", " svg {\n    width: 40px;\n    height: 40px;\n  }\n"])), function (props) {
   return !props.isRepliedMessage && '8px 12px;';
 }, function (props) {
   return !props.isRepliedMessage && (props.width ? props.width + "px" : '350px');
@@ -40500,25 +40705,25 @@ var AttachmentFile$1 = styled.div(_templateObject7$d || (_templateObject7$d = _t
 }, function (props) {
   return !props.isRepliedMessage && !props.isPreview && !props.isUploading && "\n      &:hover " + DownloadFile$1 + " {\n        display: flex;\n      }\n\n      &:hover " + UploadPercent + " {\n        border-radius: 50%\n      }\n\n      &:hover " + FileThumbnail + " {\n      }\n        &:hover " + AttachmentIconCont + " {\n    display: none;\n  }\n  ";
 }, AttachmentIconCont);
-var RemoveChosenFile = styled(SvgDeleteUpload)(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 20px;\n  height: 20px !important;\n  top: -11px;\n  right: -11px;\n  padding: 2px;\n  cursor: pointer;\n  color: ", ";\n  z-index: 5;\n  circle {\n    stroke: ", ";\n  }\n  path {\n    stroke: ", ";\n  }\n"])), function (props) {
+var RemoveChosenFile = styled(SvgDeleteUpload)(_templateObject0$8 || (_templateObject0$8 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 20px;\n  height: 20px !important;\n  top: -11px;\n  right: -11px;\n  padding: 2px;\n  cursor: pointer;\n  color: ", ";\n  z-index: 5;\n  circle {\n    stroke: ", ";\n  }\n  path {\n    stroke: ", ";\n  }\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.$backgroundColor;
 }, function (props) {
   return props.$backgroundColor;
 });
-var AttachmentName = styled.h3(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 18px;\n  color: ", ";\n  max-width: 275px;\n  white-space: nowrap;\n  margin: 0;\n"])), function (props) {
+var AttachmentName = styled.h3(_templateObject1$8 || (_templateObject1$8 = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 18px;\n  color: ", ";\n  max-width: 275px;\n  white-space: nowrap;\n  margin: 0;\n"])), function (props) {
   return props.color;
 });
-var AttachmentSize = styled.span(_templateObject0$8 || (_templateObject0$8 = _taggedTemplateLiteralLoose(["\n  font-size: 13px;\n  color: ", ";\n  & > span {\n    color: ", ";\n    margin-left: 8px;\n  }\n"])), function (props) {
+var AttachmentSize = styled.span(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n  font-size: 13px;\n  color: ", ";\n  & > span {\n    color: ", ";\n    margin-left: 8px;\n  }\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.errorColor;
 });
-var AttachmentFileInfo = styled.div(_templateObject1$8 || (_templateObject1$8 = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  ", "\n"])), function (props) {
+var AttachmentFileInfo = styled.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  ", "\n"])), function (props) {
   return props.isPreview && "line-height: 14px;\n      max-width: calc(100% - 44px);\n  ";
 });
-var AttachmentImg = styled.img(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n  width: ", ";\n  height: ", ";\n  object-fit: cover;\n  visibility: ", ";\n  z-index: 2;\n  opacity: ", ";\n  transition: opacity 0.3s ease-in-out;\n"])), function (props) {
+var AttachmentImg = styled.img(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n  width: ", ";\n  height: ", ";\n  object-fit: cover;\n  visibility: ", ";\n  z-index: 2;\n  opacity: ", ";\n  transition: opacity 0.3s ease-in-out;\n"])), function (props) {
   return props.absolute && 'absolute';
 }, function (props) {
   return props.isRepliedMessage ? '4px' : props.borderRadius || '6px';
@@ -40533,7 +40738,7 @@ var AttachmentImg = styled.img(_templateObject10$6 || (_templateObject10$6 = _ta
 }, function (props) {
   return props.$shouldAnimate && !props.$isLoaded ? 0 : 1;
 });
-var VideoCont = styled.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  cursor: pointer;\n  height: ", ";\n"])), function (props) {
+var VideoCont = styled.div(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  cursor: pointer;\n  height: ", ";\n"])), function (props) {
   return props.isDetailsView && '100%';
 });
 
@@ -41916,7 +42121,7 @@ function SvgFilledCheckbox(props) {
   })));
 }
 
-var _templateObject$G, _templateObject2$B, _templateObject3$v, _templateObject4$q, _templateObject5$l, _templateObject6$i, _templateObject7$h, _templateObject8$f, _templateObject9$c, _templateObject0$b, _templateObject1$b, _templateObject10$9, _templateObject11$6, _templateObject12$4;
+var _templateObject$G, _templateObject2$B, _templateObject3$v, _templateObject4$q, _templateObject5$l, _templateObject6$i, _templateObject7$h, _templateObject8$f, _templateObject9$c, _templateObject0$b, _templateObject1$b, _templateObject10$9, _templateObject11$6, _templateObject12$5;
 var PollMessage = function PollMessage(_ref) {
   var _poll$voteDetails3, _poll$voteDetails4, _poll$voteDetails5, _poll$voteDetails6, _poll$voteDetails7;
   var message = _ref.message,
@@ -42107,7 +42312,7 @@ var Bar = styled.div(_templateObject10$9 || (_templateObject10$9 = _taggedTempla
   return p.track;
 });
 var Fill = styled.div(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  border-radius: 6px;\n  transition: width 0.3s ease-in-out;\n"])));
-var UsersContainer = styled.div(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n  padding-left: 16px;\n  height: max-content;\n  cursor: ", ";\n"])), function (p) {
+var UsersContainer = styled.div(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n  padding-left: 16px;\n  height: max-content;\n  cursor: ", ";\n"])), function (p) {
   return p.cursor;
 });
 
@@ -43682,7 +43887,7 @@ function SvgCircleDashed(props) {
   })));
 }
 
-var _templateObject$L, _templateObject2$G, _templateObject3$A, _templateObject4$v, _templateObject5$q, _templateObject6$m, _templateObject7$l, _templateObject8$j, _templateObject9$g, _templateObject0$f, _templateObject1$d, _templateObject10$a, _templateObject11$7, _templateObject12$5, _templateObject13$4;
+var _templateObject$L, _templateObject2$G, _templateObject3$A, _templateObject4$v, _templateObject5$q, _templateObject6$m, _templateObject7$l, _templateObject8$j, _templateObject9$g, _templateObject0$f, _templateObject1$d, _templateObject10$a, _templateObject11$7, _templateObject12$6, _templateObject13$5;
 var defaultFormatDate = function defaultFormatDate(date) {
   var m = moment(date);
   if (m.isSame(moment(), 'day')) {
@@ -44305,10 +44510,10 @@ var Content = styled.div(_templateObject1$d || (_templateObject1$d = _taggedTemp
 });
 var P2PStatusList = styled.div(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
 var P2PStatusRow = styled.div(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 4px;\n  height: 48px;\n"])));
-var P2PStatusLabel = styled.div(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-family: Inter;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n"])), function (p) {
+var P2PStatusLabel = styled.div(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-family: Inter;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n"])), function (p) {
   return p.color;
 });
-var P2PStatusDate = styled.div(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  min-width: max-content;\n  font-family: Inter;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n  letter-spacing: 0px;\n"])), function (p) {
+var P2PStatusDate = styled.div(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  min-width: max-content;\n  font-family: Inter;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n  letter-spacing: 0px;\n"])), function (p) {
   return p.color;
 });
 
@@ -45055,48 +45260,10 @@ var Message$1 = function Message(_ref) {
       return marker.name === MESSAGE_DELIVERY_STATUS.READ;
     }));
     var shouldSendReadMarker = isVisible && message.incoming && !alreadyRead && !disableAutoReadTracking && isTabActive && !!channel.newMessageCount && channel.newMessageCount > 0 && connectionStatus === CONNECTION_STATUS.CONNECTED;
-    if (message.incoming && isVisible) {
-      if (shouldSendReadMarker) {
-        log.info('[READ_MESSAGE] Message auto-read gate passed', compactReadMessageLogData({
-          source: 'message',
-          channelId: channel.id,
-          messageId: message.id,
-          isVisible: isVisible,
-          alreadyRead: alreadyRead,
-          disableAutoReadTracking: disableAutoReadTracking,
-          isTabActive: isTabActive,
-          newMessageCount: channel.newMessageCount || 0,
-          connectionStatus: connectionStatus,
-          queued: !!queueReadMarker
-        }));
-      } else {
-        log.info('[READ_MESSAGE] Message auto-read gate blocked', compactReadMessageLogData({
-          source: 'message',
-          channelId: channel.id,
-          messageId: message.id,
-          isVisible: isVisible,
-          alreadyRead: alreadyRead,
-          disableAutoReadTracking: disableAutoReadTracking,
-          isTabActive: isTabActive,
-          newMessageCount: channel.newMessageCount || 0,
-          connectionStatus: connectionStatus
-        }));
-      }
-    }
     if (shouldSendReadMarker) {
       if (queueReadMarker) {
-        log.info('[READ_MESSAGE] Queueing read marker from Message component', compactReadMessageLogData({
-          source: 'message',
-          channelId: channel.id,
-          messageId: message.id
-        }));
         queueReadMarker(channel.id, message.id);
       } else {
-        log.info('[READ_MESSAGE] Dispatching read marker directly from Message component', compactReadMessageLogData({
-          source: 'message',
-          channelId: channel.id,
-          messageId: message.id
-        }));
         dispatch(markMessagesAsReadAC(channel.id, [message.id]));
       }
     }
@@ -45139,14 +45306,6 @@ var Message$1 = function Message(_ref) {
   }, [dispatch, selectionIsActive]);
   useEffect(function () {
     if (isVisible) {
-      if (message.incoming) {
-        log.info('[READ_MESSAGE] Message row became visible', compactReadMessageLogData({
-          source: 'message',
-          channelId: channel.id,
-          messageId: message.id,
-          localRef: message.tid || message.id || ''
-        }));
-      }
       if (setLastVisibleMessageId) {
         setLastVisibleMessageId(message);
       }
@@ -46157,14 +46316,6 @@ function useChatController(_ref5) {
   }, [clearJumpScrollingLock]);
   var queueVisibleUnreadCheck = useCallback(function () {
     if (pendingVisibleUnreadFrameRef.current !== null || unreadScrollTo || !tabIsActive) {
-      if (!tabIsActive) {
-        log.info('[READ_MESSAGE] Visible unread scan skipped because tab is inactive', compactReadMessageLogData({
-          source: 'controller',
-          channelId: channel.id,
-          unreadScrollTo: unreadScrollTo,
-          pendingFrameScheduled: pendingVisibleUnreadFrameRef.current !== null
-        }));
-      }
       return;
     }
     pendingVisibleUnreadFrameRef.current = requestAnimationFrame(function () {
@@ -46199,35 +46350,13 @@ function useChatController(_ref5) {
       var ids = visibleUnreadMessages.filter(isUnreadIncomingMessage).map(function (message) {
         return message.id;
       });
-      if (visibleUnreadMessages.length && !ids.length) {
-        log.info('[READ_MESSAGE] Visible unread scan found messages, but none were unread incoming', compactReadMessageLogData({
-          source: 'controller',
-          channelId: channel.id,
-          visibleCandidateIds: visibleUnreadMessages.map(function (message) {
-            return message.id;
-          })
-        }));
-      }
       if (!ids.length || !channel.id || !channel.newMessageCount) {
-        if (ids.length && (!channel.id || !channel.newMessageCount)) {
-          log.info('[READ_MESSAGE] Visible unread scan blocked before dispatch', compactReadMessageLogData({
-            source: 'controller',
-            channelId: channel.id,
-            messageIds: ids,
-            newMessageCount: channel.newMessageCount || 0
-          }));
-        }
         return;
       }
       ids.forEach(function (id) {
         visibleUnreadReportedRef.current.add(id);
       });
       registerLocallyReadUnreadMessages(ids.length);
-      log.info('[READ_MESSAGE] Dispatching read marker from visible unread scan', compactReadMessageLogData({
-        source: 'controller',
-        channelId: channel.id,
-        messageIds: ids
-      }));
       dispatch(markMessagesAsReadAC(channel.id, ids));
     });
   }, [channel.id, channel.lastDisplayedMessageId, channel.newMessageCount, dispatch, hasNext, messages, registerLocallyReadUnreadMessages, unreadScrollTo, tabIsActive]);
@@ -50102,24 +50231,26 @@ var Action$1 = styled.button(_templateObject2$M || (_templateObject2$M = _tagged
 
 function EditMessagePlugin(_ref) {
   var editMessage = _ref.editMessage,
+    draftMessage = _ref.draftMessage,
     contactsMap = _ref.contactsMap,
     getFromContacts = _ref.getFromContacts,
     setMentionedMember = _ref.setMentionedMember;
   var _useLexicalComposerCo = useLexicalComposerContext(),
     editor = _useLexicalComposerCo[0];
   useDidUpdate(function () {
-    if (editMessage) {
-      if (editMessage.mentionedUsers && editMessage.mentionedUsers.length) {
-        setMentionedMember(editMessage.mentionedUsers);
+    var editorMessage = draftMessage || editMessage;
+    if (editorMessage) {
+      if (editorMessage.mentionedUsers && editorMessage.mentionedUsers.length) {
+        setMentionedMember(editorMessage.mentionedUsers);
       }
       editor.update(function () {
         var rootNode = $getRoot();
         $getRoot().clear();
         var paragraphNode = $createParagraphNode();
-        var textPart = editMessage.body;
+        var textPart = editorMessage.body;
         var nextPartIndex;
-        if (editMessage.bodyAttributes && editMessage.bodyAttributes.length) {
-          var bodyAttributes = JSON.parse(JSON.stringify(editMessage.bodyAttributes));
+        if (editorMessage.bodyAttributes && editorMessage.bodyAttributes.length) {
+          var bodyAttributes = JSON.parse(JSON.stringify(editorMessage.bodyAttributes));
           var modifiedAttributes = [];
           bodyAttributes.sort(function (a, b) {
             return a.offset - b.offset;
@@ -50157,7 +50288,7 @@ function EditMessagePlugin(_ref) {
             var secondPart = "" + (textPart ? textPart === null || textPart === void 0 ? void 0 : textPart.substring(attributeOffset + attribute.length) : '');
             nextPartIndex = attribute.offset + attribute.length;
             if (attribute.type.includes('mention')) {
-              var mentionUser = editMessage.mentionedUsers.find(function (mention) {
+              var mentionUser = editorMessage.mentionedUsers.find(function (mention) {
                 return mention.id === attribute.metadata;
               });
               if (mentionUser) {
@@ -50259,13 +50390,13 @@ function EditMessagePlugin(_ref) {
           rootNode.append(paragraphNode);
           rootNode.selectEnd();
         } else {
-          paragraphNode.append($createTextNode(editMessage.body));
+          paragraphNode.append($createTextNode(editorMessage.body));
           rootNode.append(paragraphNode);
           rootNode.selectEnd();
         }
       });
     }
-  }, [editMessage]);
+  }, [editMessage, draftMessage]);
   return null;
 }
 
@@ -50484,25 +50615,12 @@ function useFormatMessage(editor, editorState, setMessageBodyAttributes, setMess
     }
     return true;
   }, [editor, contactsMap, setMentionedMember, getFromContacts, activeChannelMembers, processMentionsInPastedText]);
-  var onDelete = useCallback(function (event) {
-    event.preventDefault();
-    editor.update(function () {
-      var selection = $getSelection();
-      if ($isRangeSelection(selection)) {
-        var node = getSelectedNode(selection);
-        if ($isMentionNode(node)) {
-          node.remove();
-        }
-      }
-    });
-    return false;
-  }, [editor]);
   useEffect(function () {
     return mergeRegister(editor.registerCommand(PASTE_COMMAND, function (e) {
       handlePast(e);
       return true;
-    }, COMMAND_PRIORITY_NORMAL), editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW));
-  }, [editor, handlePast, onDelete]);
+    }, COMMAND_PRIORITY_NORMAL));
+  }, [editor, handlePast]);
   useDidUpdate(function () {
     if (editorState) {
       editorState.read(function () {
@@ -50841,6 +50959,18 @@ var Emoji$1 = styled.li(_templateObject8$l || (_templateObject8$l = _taggedTempl
   return props.hoverBackgroundColor;
 });
 
+var getReplyLinkPreviewImage = function getReplyLinkPreviewImage(attachments) {
+  var _attachments$;
+  var attachment = attachments !== null && attachments !== void 0 && attachments.length && ((_attachments$ = attachments[0]) === null || _attachments$ === void 0 ? void 0 : _attachments$.type) === attachmentTypes.link ? attachments[0] : null;
+  if (!(attachment !== null && attachment !== void 0 && attachment.metadata) || !isJSON(attachment.metadata)) return null;
+  var compactMeta = JSON.parse(attachment.metadata);
+  var imageUrl = compactMeta.iur || null;
+  return !(compactMeta !== null && compactMeta !== void 0 && compactMeta.hld) ? imageUrl : null;
+};
+var shouldShowLinkPreviewErrorFallback = function shouldShowLinkPreviewErrorFallback(imageUrl, imageFailed) {
+  return Boolean(imageUrl && imageFailed);
+};
+
 var CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
 
 var _circle$6, _path$1j;
@@ -51150,8 +51280,10 @@ var AudioRecord = function AudioRecord(_ref) {
     warningColor = _useColor[THEME_COLORS.WARNING],
     iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
     surface1 = _useColor[THEME_COLORS.SURFACE_1],
+    textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE],
-    textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY];
+    textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
+    background = _useColor[THEME_COLORS.BACKGROUND];
   var _useState = useState(null),
     recording = _useState[0],
     setStartRecording = _useState[1];
@@ -51179,6 +51311,9 @@ var AudioRecord = function AudioRecord(_ref) {
   var _useState9 = useState(false),
     playAudio = _useState9[0],
     setPlayAudio = _useState9[1];
+  var _useState0 = useState(false),
+    microphonePermissionDenied = _useState0[0],
+    setMicrophonePermissionDenied = _useState0[1];
   var recordButtonRef = useRef(null);
   var audioElements = useRef({});
   var intervalRef = useRef({});
@@ -51268,27 +51403,21 @@ var AudioRecord = function AudioRecord(_ref) {
   var startRecording = function startRecording(cId) {
     try {
       var id = cId || currentChannelId;
-      var _temp = _catch(function () {
-        return Promise.resolve(navigator.permissions.query({
-          name: 'microphone'
-        })).then(function (permissionStatus) {
-          if (permissionStatus.state === 'granted') {
-            setShowRecording(true);
-          } else {
-            recordButtonRef.current.style.pointerEvents = 'none';
-          }
-          if (recording) {
-            stopRecording(true, id, false, recorder);
-          } else if (currentRecordedFile) {
-            removeAudioRecordingFromMap(id);
-            setRecordedFile(null);
-            setPlayAudio(false);
-            cleanupAudioElement(id);
-            setStartRecording(false);
-            setShowRecording(false);
-            dispatch(setChannelDraftMessageIsRemovedAC(id));
-            sendRecordedFile(currentRecordedFile, id);
-          } else {
+      try {
+        if (recording) {
+          stopRecording(true, id, false, recorder);
+        } else if (currentRecordedFile) {
+          removeAudioRecordingFromMap(id);
+          setRecordedFile(null);
+          setPlayAudio(false);
+          cleanupAudioElement(id);
+          setStartRecording(false);
+          setShowRecording(false);
+          dispatch(setChannelDraftMessageIsRemovedAC(id));
+          sendRecordedFile(currentRecordedFile, id);
+        } else {
+          if (!recorder) return Promise.resolve();
+          recorder.start().then(function () {
             handleStartRecording();
             setAudioRecordingToMap(id, {
               file: null,
@@ -51296,96 +51425,97 @@ var AudioRecord = function AudioRecord(_ref) {
               thumb: null,
               dur: 0
             });
-            recorder.start().then(function () {
-              recordButtonRef.current.style.pointerEvents = 'initial';
-              setShowRecording(true);
-              setStartRecording(true);
-              shouldDraw = true;
-              var stream = recorder.activeStream;
-              var obj = {};
-              var init = function init() {
-                obj.canvas = document.getElementById("waveform-" + id);
-                obj.ctx = obj.canvas.getContext('2d');
-                obj.width = 360;
-                obj.height = 28;
-                obj.canvas.width = obj.width;
-                obj.canvas.height = obj.height;
-                obj.canvas.style.width = obj.width + 'px';
-                obj.canvas.style.height = obj.height + 'px';
-              };
-              var timeOffset = 100;
-              var now = parseInt(performance.now()) / timeOffset;
-              var _loop = function loop() {
-                if (!shouldDraw) {
-                  obj.x = 0;
-                  obj.ctx.clearRect(0, 0, obj.canvas.width, obj.canvas.height);
-                  if (obj.audioContext && obj.audioContext.state !== 'closed') {
-                    obj.audioContext.close()["catch"](function () {
-                      return undefined;
-                    });
-                  }
-                  return;
-                }
+            setShowRecording(true);
+            setStartRecording(true);
+            shouldDraw = true;
+            var stream = recorder.activeStream;
+            var obj = {};
+            var init = function init() {
+              obj.canvas = document.getElementById("waveform-" + id);
+              obj.ctx = obj.canvas.getContext('2d');
+              obj.width = 360;
+              obj.height = 28;
+              obj.canvas.width = obj.width;
+              obj.canvas.height = obj.height;
+              obj.canvas.style.width = obj.width + 'px';
+              obj.canvas.style.height = obj.height + 'px';
+            };
+            var timeOffset = 100;
+            var now = parseInt(performance.now()) / timeOffset;
+            var _loop = function loop() {
+              if (!shouldDraw) {
+                obj.x = 0;
                 obj.ctx.clearRect(0, 0, obj.canvas.width, obj.canvas.height);
-                var max = 0;
-                if (parseInt(performance.now() / timeOffset) > now) {
-                  now = parseInt(performance.now() / timeOffset);
-                  obj.analyser.getFloatTimeDomainData(obj.frequencyArray);
-                  for (var i = 0; i < obj.frequencyArray.length; i++) {
-                    if (obj.frequencyArray[i] > max) {
-                      max = obj.frequencyArray[i];
-                    }
-                  }
-                  var freq = Math.floor(max * 90);
-                  if (freq === 0) {
-                    freq = 1;
-                  }
-                  obj.bars.push({
-                    x: obj.width,
-                    y: obj.height / 2 - freq / 2,
-                    height: freq,
-                    width: 3
+                if (obj.audioContext && obj.audioContext.state !== 'closed') {
+                  obj.audioContext.close()["catch"](function () {
+                    return undefined;
                   });
                 }
-                draw();
-                requestAnimationFrame(_loop);
-              };
-              obj.bars = [];
-              var draw = function draw() {
-                for (var i = 0; i < obj.bars.length; i++) {
-                  var bar = obj.bars[i];
-                  obj.ctx.fillStyle = textSecondary;
-                  obj.ctx.fillRect(bar.x, bar.y, bar.width, bar.height);
-                  bar.x = bar.x - 1;
-                  if (bar.x < 1) {
-                    obj.bars.splice(i, 1);
+                return;
+              }
+              obj.ctx.clearRect(0, 0, obj.canvas.width, obj.canvas.height);
+              var max = 0;
+              if (parseInt(performance.now() / timeOffset) > now) {
+                now = parseInt(performance.now() / timeOffset);
+                obj.analyser.getFloatTimeDomainData(obj.frequencyArray);
+                for (var i = 0; i < obj.frequencyArray.length; i++) {
+                  if (obj.frequencyArray[i] > max) {
+                    max = obj.frequencyArray[i];
                   }
                 }
-              };
-              var soundAllowed = function soundAllowed(stream) {
-                var AudioContext = window.AudioContext || window.webkitAudioContext;
-                var audioContent = new AudioContext();
-                obj.audioContext = audioContent;
-                var streamSource = audioContent.createMediaStreamSource(stream);
-                obj.analyser = audioContent.createAnalyser();
-                streamSource.connect(obj.analyser);
-                obj.analyser.fftSize = 512;
-                obj.frequencyArray = new Float32Array(obj.analyser.fftSize);
-                init();
-                _loop();
-              };
-              soundAllowed(stream);
-            })["catch"](function (e) {
-              handleStopRecording();
-              log.error(e);
-            });
-          }
-        });
-      }, function (e) {
-        handleStopRecording();
+                var freq = Math.floor(max * 90);
+                if (freq === 0) {
+                  freq = 1;
+                }
+                obj.bars.push({
+                  x: obj.width,
+                  y: obj.height / 2 - freq / 2,
+                  height: freq,
+                  width: 3
+                });
+              }
+              draw();
+              requestAnimationFrame(_loop);
+            };
+            obj.bars = [];
+            var draw = function draw() {
+              for (var i = 0; i < obj.bars.length; i++) {
+                var bar = obj.bars[i];
+                obj.ctx.fillStyle = textSecondary;
+                obj.ctx.fillRect(bar.x, bar.y, bar.width, bar.height);
+                bar.x = bar.x - 1;
+                if (bar.x < 1) {
+                  obj.bars.splice(i, 1);
+                }
+              }
+            };
+            var soundAllowed = function soundAllowed(stream) {
+              var AudioContext = window.AudioContext || window.webkitAudioContext;
+              var audioContent = new AudioContext();
+              obj.audioContext = audioContent;
+              var streamSource = audioContent.createMediaStreamSource(stream);
+              obj.analyser = audioContent.createAnalyser();
+              streamSource.connect(obj.analyser);
+              obj.analyser.fftSize = 512;
+              obj.frequencyArray = new Float32Array(obj.analyser.fftSize);
+              init();
+              _loop();
+            };
+            soundAllowed(stream);
+          })["catch"](function (e) {
+            if ((e === null || e === void 0 ? void 0 : e.name) === 'NotAllowedError' || (e === null || e === void 0 ? void 0 : e.name) === 'PermissionDeniedError') {
+              setMicrophonePermissionDenied(true);
+            }
+            log.error(e);
+          });
+        }
+      } catch (e) {
+        if ((e === null || e === void 0 ? void 0 : e.name) === 'NotAllowedError' || (e === null || e === void 0 ? void 0 : e.name) === 'PermissionDeniedError') {
+          setMicrophonePermissionDenied(true);
+        }
         log.error(e);
-      });
-      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+      }
+      return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
     }
@@ -51710,7 +51840,36 @@ var AudioRecord = function AudioRecord(_ref) {
       return startRecording(currentChannelId);
     },
     iconColor: accentColor
-  }, showRecording || currentRecordedFile ? /*#__PURE__*/React__default.createElement(SvgSend, null) : /*#__PURE__*/React__default.createElement(SvgRecordButton, null)));
+  }, showRecording || currentRecordedFile ? /*#__PURE__*/React__default.createElement(SvgSend, null) : /*#__PURE__*/React__default.createElement(SvgRecordButton, null)), microphonePermissionDenied && (/*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
+    backgroundColor: background,
+    maxWidth: '520px',
+    minWidth: '520px',
+    padding: '0'
+  }, /*#__PURE__*/React__default.createElement(PopupBody, {
+    paddingH: '24px',
+    paddingV: '24px'
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, {
+    color: iconPrimary,
+    onClick: function onClick() {
+      return setMicrophonePermissionDenied(false);
+    }
+  }), /*#__PURE__*/React__default.createElement(PopupName, {
+    color: textPrimary,
+    marginBottom: '20px'
+  }, "Microphone Permission Denied"), /*#__PURE__*/React__default.createElement(PopupDescription, {
+    color: textPrimary,
+    highlightColor: textSecondary
+  }, "We can't access your microphone. Enable microphone permission in your browser settings and try again.")), /*#__PURE__*/React__default.createElement(PopupFooter, {
+    backgroundColor: surface1
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    type: 'button',
+    backgroundColor: accentColor,
+    color: textOnPrimary,
+    borderRadius: '8px',
+    onClick: function onClick() {
+      return setMicrophonePermissionDenied(false);
+    }
+  }, "Close"))))));
 };
 var AudioRecord$1 = /*#__PURE__*/memo(AudioRecord, function (prevProps, nextProps) {
   return prevProps.channelId === nextProps.channelId && prevProps.showRecording === nextProps.showRecording && prevProps.maxRecordingDuration === nextProps.maxRecordingDuration && prevProps.showViewOnceToggle === nextProps.showViewOnceToggle && prevProps.viewOnce === nextProps.viewOnce && prevProps.ViewOnceSelectedSVGIcon === nextProps.ViewOnceSelectedSVGIcon && prevProps.ViewOnceNotSelectedSVGIcon === nextProps.ViewOnceNotSelectedSVGIcon;
@@ -52235,7 +52394,7 @@ var SettingItem = styled.div(_templateObject9$i || (_templateObject9$i = _tagged
   return props.color;
 });
 
-var _templateObject$W, _templateObject2$R, _templateObject3$I, _templateObject4$C, _templateObject5$x, _templateObject6$t, _templateObject7$q, _templateObject8$n, _templateObject9$j, _templateObject0$h, _templateObject1$f, _templateObject10$c, _templateObject11$9, _templateObject12$6, _templateObject13$5, _templateObject14$4, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1, _templateObject35$1, _templateObject36$1, _templateObject37$1, _templateObject38$1, _templateObject39$1, _templateObject40$1, _templateObject41$1, _templateObject42, _templateObject43, _templateObject44, _templateObject45;
+var _templateObject$W, _templateObject2$R, _templateObject3$I, _templateObject4$C, _templateObject5$x, _templateObject6$t, _templateObject7$q, _templateObject8$n, _templateObject9$j, _templateObject0$h, _templateObject1$f, _templateObject10$c, _templateObject11$9, _templateObject12$7, _templateObject13$6, _templateObject14$4, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1, _templateObject35$1, _templateObject36$1, _templateObject37$1, _templateObject38$1, _templateObject39$1, _templateObject40$1, _templateObject41$1, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46;
 function AutoFocusPlugin(_ref) {
   var messageForReply = _ref.messageForReply;
   var _useLexicalComposerCo = useLexicalComposerContext(),
@@ -52253,12 +52412,16 @@ function ClearEditorPlugin(_ref2) {
   useDidUpdate(function () {
     if (shouldClearEditor.clear) {
       editor.update(function () {
+        var _shouldClearEditor$dr;
         var rootNode = $getRoot();
         rootNode.clear();
-        if (shouldClearEditor.draftMessage) {
+        if ((_shouldClearEditor$dr = shouldClearEditor.draftMessage) !== null && _shouldClearEditor$dr !== void 0 && _shouldClearEditor$dr.editorState) {
+          editor.setEditorState(shouldClearEditor.draftMessage.editorState);
+        } else if (shouldClearEditor.draftMessage) {
           var paragraphNode = $createParagraphNode();
           paragraphNode.append($createTextNode(shouldClearEditor.draftMessage.text));
-          editor.setEditorState(shouldClearEditor.draftMessage.editorState);
+          rootNode.append(paragraphNode);
+          rootNode.selectEnd();
         } else {
           var _paragraphNode = $createParagraphNode();
           rootNode.append(_paragraphNode);
@@ -52298,7 +52461,7 @@ function onError(error) {
 var prevActiveChannelId;
 var attachmentsUpdate = [];
 var SendMessageInput = function SendMessageInput(_ref3) {
-  var _linkPreview$metadata9, _linkPreview$metadata0, _linkPreview$metadata1, _linkPreview$metadata10, _linkPreview$metadata11, _linkPreview$metadata12, _linkPreview$metadata13, _linkPreview$metadata14, _linkPreview$metadata15, _linkPreview$metadata16, _linkPreview$metadata17, _linkPreview$metadata18, _pollOptions$choosePo, _getAudioRecordingFro2;
+  var _linkPreview$metadata9, _linkPreview$metadata0, _linkPreview$metadata1, _linkPreview$metadata10, _linkPreview$metadata11, _linkPreview$metadata12, _linkPreview$metadata13, _linkPreview$metadata14, _linkPreview$metadata15, _linkPreview$metadata16, _linkPreview$metadata17, _linkPreview$metadata18, _linkPreview$metadata19, _linkPreview$metadata20, _linkPreview$metadata21, _pollOptions$choosePo, _getAudioRecordingFro2;
   var handleAttachmentSelected = _ref3.handleAttachmentSelected,
     handleSendMessage = _ref3.handleSendMessage,
     _ref3$disabled = _ref3.disabled,
@@ -52435,84 +52598,90 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   var _useState4 = useState(''),
     editMessageText = _useState4[0],
     setEditMessageText = _useState4[1];
-  var _useState5 = useState({}),
-    readyVideoAttachments = _useState5[0],
-    setReadyVideoAttachments = _useState5[1];
-  var _useState6 = useState(false),
-    showChooseAttachmentType = _useState6[0],
-    setShowChooseAttachmentType = _useState6[1];
+  var _useState5 = useState(null),
+    restoredEditMessage = _useState5[0],
+    setRestoredEditMessage = _useState5[1];
+  var _useState6 = useState({}),
+    readyVideoAttachments = _useState6[0],
+    setReadyVideoAttachments = _useState6[1];
   var _useState7 = useState(false),
-    isEmojisOpened = _useState7[0],
-    setIsEmojisOpened = _useState7[1];
+    showChooseAttachmentType = _useState7[0],
+    setShowChooseAttachmentType = _useState7[1];
   var _useState8 = useState(false),
-    emojisInRightSide = _useState8[0],
-    setEmojisInRightSide = _useState8[1];
-  var _useState9 = useState(0),
-    emojisPopupLeftPosition = _useState9[0],
-    setEmojisPopupLeftPosition = _useState9[1];
+    isEmojisOpened = _useState8[0],
+    setIsEmojisOpened = _useState8[1];
+  var _useState9 = useState(false),
+    emojisInRightSide = _useState9[0],
+    setEmojisInRightSide = _useState9[1];
   var _useState0 = useState(0),
-    emojisPopupBottomPosition = _useState0[0],
-    setEmojisPopupBottomPosition = _useState0[1];
-  var _useState1 = useState(false),
-    addAttachmentsInRightSide = _useState1[0],
-    setAddAttachmentsInRightSide = _useState1[1];
+    emojisPopupLeftPosition = _useState0[0],
+    setEmojisPopupLeftPosition = _useState0[1];
+  var _useState1 = useState(0),
+    emojisPopupBottomPosition = _useState1[0],
+    setEmojisPopupBottomPosition = _useState1[1];
   var _useState10 = useState(false),
-    showPoll = _useState10[0],
-    setShowPoll = _useState10[1];
-  var _useState11 = useState({
+    addAttachmentsInRightSide = _useState10[0],
+    setAddAttachmentsInRightSide = _useState10[1];
+  var _useState11 = useState(false),
+    showPoll = _useState11[0],
+    setShowPoll = _useState11[1];
+  var _useState12 = useState({
       clear: false
     }),
-    shouldClearEditor = _useState11[0],
-    setShouldClearEditor = _useState11[1];
-  var _useState12 = useState([]),
-    messageBodyAttributes = _useState12[0],
-    setMessageBodyAttributes = _useState12[1];
+    shouldClearEditor = _useState12[0],
+    setShouldClearEditor = _useState12[1];
   var _useState13 = useState([]),
-    mentionedUsers = _useState13[0],
-    setMentionedUsers = _useState13[1];
-  var _useState14 = useState(''),
-    browser = _useState14[0],
-    setBrowser = _useState14[1];
-  var _useState15 = useState(false),
-    mentionsIsOpen = _useState15[0],
-    setMentionsIsOpen = _useState15[1];
-  var _useState16 = useState(),
-    inputContainerHeight = _useState16[0],
-    setInputContainerHeight = _useState16[1];
-  var selectedText = useRef(null);
+    messageBodyAttributes = _useState13[0],
+    setMessageBodyAttributes = _useState13[1];
+  var _useState14 = useState([]),
+    mentionedUsers = _useState14[0],
+    setMentionedUsers = _useState14[1];
+  var _useState15 = useState(''),
+    browser = _useState15[0],
+    setBrowser = _useState15[1];
+  var _useState16 = useState(false),
+    mentionsIsOpen = _useState16[0],
+    setMentionsIsOpen = _useState16[1];
   var _useState17 = useState(),
-    typingTimout = _useState17[0],
-    setTypingTimout = _useState17[1];
+    inputContainerHeight = _useState17[0],
+    setInputContainerHeight = _useState17[1];
+  var selectedText = useRef(null);
   var _useState18 = useState(),
-    inTypingStateTimout = _useState18[0],
-    setInTypingStateTimout = _useState18[1];
-  var _useState19 = useState(false),
-    inTypingState = _useState19[0],
-    setInTypingState = _useState19[1];
+    typingTimout = _useState18[0],
+    setTypingTimout = _useState18[1];
+  var _useState19 = useState(),
+    inTypingStateTimout = _useState19[0],
+    setInTypingStateTimout = _useState19[1];
   var _useState20 = useState(false),
-    sendMessageIsActive = _useState20[0],
-    setSendMessageIsActive = _useState20[1];
-  var _useState21 = useState([]),
-    attachments = _useState21[0],
-    setAttachments = _useState21[1];
-  var _useState22 = useState(false),
-    forwardPopupOpen = _useState22[0],
-    setForwardPopupOpen = _useState22[1];
+    inTypingState = _useState20[0],
+    setInTypingState = _useState20[1];
+  var _useState21 = useState(false),
+    sendMessageIsActive = _useState21[0],
+    setSendMessageIsActive = _useState21[1];
+  var _useState22 = useState([]),
+    attachments = _useState22[0],
+    setAttachments = _useState22[1];
   var _useState23 = useState(false),
-    deletePopupOpen = _useState23[0],
-    setDeletePopupOpen = _useState23[1];
+    forwardPopupOpen = _useState23[0],
+    setForwardPopupOpen = _useState23[1];
   var _useState24 = useState(false),
-    isIncomingMessage = _useState24[0],
-    setIsIncomingMessage = _useState24[1];
-  var _useState25 = useState('.jpg,.jpeg,.png,.gif,.mp4,.mov,.avi,.wmv,.flv,.webm,.jfif'),
-    mediaExtensions = _useState25[0],
-    setMediaExtensions = _useState25[1];
-  var _useState26 = useState(''),
-    uploadErrorMessage = _useState26[0],
-    setUploadErrorMessage = _useState26[1];
-  var _useState27 = useState(false),
-    viewOnce = _useState27[0],
-    setViewOnce = _useState27[1];
+    deletePopupOpen = _useState24[0],
+    setDeletePopupOpen = _useState24[1];
+  var _useState25 = useState(false),
+    isIncomingMessage = _useState25[0],
+    setIsIncomingMessage = _useState25[1];
+  var _useState26 = useState('.jpg,.jpeg,.png,.gif,.mp4,.mov,.avi,.wmv,.flv,.webm,.jfif'),
+    mediaExtensions = _useState26[0],
+    setMediaExtensions = _useState26[1];
+  var _useState27 = useState(''),
+    uploadErrorMessage = _useState27[0],
+    setUploadErrorMessage = _useState27[1];
+  var _useState28 = useState(false),
+    viewOnce = _useState28[0],
+    setViewOnce = _useState28[1];
+  var _useState29 = useState(areDraftMessagesHydrated()),
+    draftsHydrated = _useState29[0],
+    setDraftsHydrated = _useState29[1];
   var typingOrRecordingIndicator = useSelector(typingOrRecordingIndicatorArraySelector(activeChannel.id));
   var contactsMap = useSelector(contactsMapSelector);
   var connectionStatus = useSelector(connectionStatusSelector, shallowEqual);
@@ -52524,35 +52693,91 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   var addAttachmentsBtnRef = useRef(null);
   var metadataDebounceRef = useRef(null);
   var sendMessageWrapperRef = useRef(null);
-  var _useState28 = useState(),
-    realEditorState = _useState28[0],
-    setRealEditorState = _useState28[1];
-  var _useState29 = useState(null),
-    floatingAnchorElem = _useState29[0],
-    setFloatingAnchorElem = _useState29[1];
-  var _useState30 = useState(false),
-    isSmallWidthViewport = _useState30[0],
-    setIsSmallWidthViewport = _useState30[1];
-  var _useState31 = useState(false),
-    isScrolling = _useState31[0],
-    setIsScrolling = _useState31[1];
-  var _useState32 = useState(null),
-    linkPreview = _useState32[0],
-    setLinkPreview = _useState32[1];
-  var _useState33 = useState(null),
-    detectedUrl = _useState33[0],
-    setDetectedUrl = _useState33[1];
-  var _useState34 = useState(new Set()),
-    dismissedUrls = _useState34[0],
-    setDismissedUrls = _useState34[1];
-  var _useState35 = useState(false),
-    isClosingPreview = _useState35[0],
-    setIsClosingPreview = _useState35[1];
+  var restoringDraftRef = useRef(false);
+  var restoredDraftChannelIdRef = useRef(null);
+  var isNavigatingChannelRef = useRef(false);
+  var _useState30 = useState(),
+    realEditorState = _useState30[0],
+    setRealEditorState = _useState30[1];
+  var _useState31 = useState(null),
+    floatingAnchorElem = _useState31[0],
+    setFloatingAnchorElem = _useState31[1];
+  var _useState32 = useState(false),
+    isSmallWidthViewport = _useState32[0],
+    setIsSmallWidthViewport = _useState32[1];
+  var _useState33 = useState(false),
+    isScrolling = _useState33[0],
+    setIsScrolling = _useState33[1];
+  var _useState34 = useState(null),
+    linkPreview = _useState34[0],
+    setLinkPreview = _useState34[1];
+  var _useState35 = useState(null),
+    detectedUrl = _useState35[0],
+    setDetectedUrl = _useState35[1];
+  var _useState36 = useState(new Set()),
+    dismissedUrls = _useState36[0],
+    setDismissedUrls = _useState36[1];
+  var _useState37 = useState(false),
+    isClosingPreview = _useState37[0],
+    setIsClosingPreview = _useState37[1];
+  var _useState38 = useState(false),
+    replyLinkPreviewImageFailed = _useState38[0],
+    setReplyLinkPreviewImageFailed = _useState38[1];
+  var _useState39 = useState(false),
+    linkPreviewImageFailed = _useState39[0],
+    setLinkPreviewImageFailed = _useState39[1];
   var addAttachmentByMenu = showChooseFileAttachment && showChooseMediaAttachment;
   var linkify = new LinkifyIt();
   var oGMetadata = useSelector(function (state) {
     return state.MessageReducer.oGMetadata;
   });
+  useEffect(function () {
+    return subscribeToDraftMessages(function () {
+      return setDraftsHydrated(areDraftMessagesHydrated());
+    });
+  }, []);
+  useEffect(function () {
+    if (!draftsHydrated || !activeChannel.id) {
+      return;
+    }
+    var draftMessage = getDraftMessageFromMap(activeChannel.id);
+    if (!draftMessage) {
+      return;
+    }
+    restoringDraftRef.current = true;
+    if (draftMessage.messageToEdit) {
+      var _ref4, _draftMessage$editMes, _draftMessage$editBod, _draftMessage$mention;
+      var restoredText = (_ref4 = (_draftMessage$editMes = draftMessage.editMessageText) != null ? _draftMessage$editMes : draftMessage.messageToEdit.body) != null ? _ref4 : '';
+      var restoredEdit = _extends({}, draftMessage.messageToEdit, {
+        body: restoredText,
+        bodyAttributes: (_draftMessage$editBod = draftMessage.editBodyAttributes) != null ? _draftMessage$editBod : draftMessage.messageToEdit.bodyAttributes,
+        mentionedUsers: (_draftMessage$mention = draftMessage.mentionedUsers) != null ? _draftMessage$mention : draftMessage.messageToEdit.mentionedUsers
+      });
+      setEditMessageText(restoredText);
+      setMessageBodyAttributes(restoredEdit.bodyAttributes || []);
+      setMentionedUsers(restoredEdit.mentionedUsers || []);
+      setRestoredEditMessage(restoredEdit);
+      dispatch(setMessageToEditAC(draftMessage.messageToEdit));
+      restoredDraftChannelIdRef.current = activeChannel.id;
+      return;
+    }
+    setMessageText(draftMessage.text || '');
+    setMentionedUsers(draftMessage.mentionedUsers || []);
+    setAttachments(draftMessage.attachments || []);
+    setViewOnce(!!draftMessage.viewOnce);
+    if (draftMessage.messageForReply) dispatch(setMessageForReplyAC(draftMessage.messageForReply));
+    setShouldClearEditor({
+      clear: true,
+      draftMessage: draftMessage
+    });
+    restoredDraftChannelIdRef.current = activeChannel.id;
+  }, [draftsHydrated, activeChannel.id]);
+  useEffect(function () {
+    setReplyLinkPreviewImageFailed(false);
+  }, [messageForReply === null || messageForReply === void 0 ? void 0 : messageForReply.id, messageForReply === null || messageForReply === void 0 ? void 0 : messageForReply.tid]);
+  useEffect(function () {
+    setLinkPreviewImageFailed(false);
+  }, [linkPreview === null || linkPreview === void 0 ? void 0 : linkPreview.url]);
   var closePreviewWithAnimation = function closePreviewWithAnimation(callback) {
     if (linkPreview) {
       setIsClosingPreview(true);
@@ -52665,7 +52890,15 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       dispatch(sendTypingAC(typingState));
     }
   };
-  var handleCloseReply = function handleCloseReply() {
+  var handleCloseReply = function handleCloseReply(preserveDraft) {
+    if (preserveDraft === void 0) {
+      preserveDraft = false;
+    }
+    var shouldPreserveDraft = preserveDraft === true;
+    if (!shouldPreserveDraft && !messageText.trim() && !attachments.length) {
+      removeDraftMessageFromMap(activeChannel.id);
+      dispatch(setChannelDraftMessageIsRemovedAC(activeChannel.id));
+    }
     dispatch(setMessageForReplyAC(null));
   };
   var handleDoubleClick = function handleDoubleClick(e) {
@@ -52785,12 +53018,14 @@ var SendMessageInput = function SendMessageInput(_ref3) {
             return {
               name: attachment.data.name,
               data: attachment.data,
+              attachmentUrl: attachment.attachmentUrl,
               tid: attachment.tid,
               cachedUrl: attachment.cachedUrl,
               upload: attachment.upload,
               metadata: attachment.metadata,
               type: attachment.type,
-              size: attachment.size
+              size: attachment.size,
+              thumbnailState: attachment.thumbnailState
             };
           });
           if (viewOnce && canShowViewOnceToggle) {
@@ -52814,6 +53049,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       }
       setAttachments([]);
       attachmentsUpdate = [];
+      removeDraftMessageFromMap(activeChannel.id);
+      dispatch(setChannelDraftMessageIsRemovedAC(activeChannel.id));
       setViewOnce(false);
       handleCloseReply();
       setShouldClearEditor({
@@ -52924,8 +53161,16 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     }
     handleCloseEditMode();
   };
-  var handleCloseEditMode = function handleCloseEditMode() {
+  var handleCloseEditMode = function handleCloseEditMode(preserveDraft) {
+    if (preserveDraft === void 0) {
+      preserveDraft = false;
+    }
+    if (!preserveDraft && messageToEdit) {
+      removeDraftMessageFromMap(activeChannel.id);
+      dispatch(setChannelDraftMessageIsRemovedAC(activeChannel.id));
+    }
     setEditMessageText('');
+    setRestoredEditMessage(null);
     setMentionedUsers([]);
     dispatch(setMessageToEditAC(null));
   };
@@ -52934,10 +53179,14 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       var updatedAttachments = attachmentsUpdate.filter(function (item) {
         return item.tid !== attachmentId;
       });
+      clearVideoPreparation(attachmentId);
       releaseBlobUrls(["compose_" + attachmentId]);
       setAttachments(updatedAttachments);
       attachmentsUpdate = updatedAttachments;
     } else {
+      attachmentsUpdate.forEach(function (attachment) {
+        return clearVideoPreparation(attachment.tid);
+      });
       releaseBlobUrls(attachmentsUpdate.map(function (item) {
         return "compose_" + item.tid;
       }));
@@ -53089,10 +53338,6 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       }
     }
   };
-  var handleCut = function handleCut() {
-    setMessageText('');
-    setMentionedUsers([]);
-  };
   var handleEmojiPopupToggle = function handleEmojiPopupToggle(bool) {
     setIsEmojisOpened(bool);
   };
@@ -53169,260 +53414,214 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   };
   var handleAddAttachment = function handleAddAttachment(file, isMediaAttachment) {
     try {
-      var _temp4 = function _temp4() {
-        var fileType = file.type.split('/')[0];
-        var tid = v4();
-        var reader = new FileReader();
-        var handleAttachmentImageForCache = function handleAttachmentImageForCache(attachment) {
-          try {
-            var _attachment$metadata;
-            var url = URL.createObjectURL(attachment.data);
-            dispatch(setUpdateMessageAttachmentAC((attachment === null || attachment === void 0 ? void 0 : (_attachment$metadata = attachment.metadata) === null || _attachment$metadata === void 0 ? void 0 : _attachment$metadata.tmb) || '', url));
-            return Promise.resolve();
-          } catch (e) {
-            return Promise.reject(e);
-          }
-        };
-        var handleAttachmentVideoForCache = function handleAttachmentVideoForCache(attachment) {
-          try {
-            var _calculateRenderedIma = calculateRenderedImageWidth(attachment.metadata.szh || 400, attachment.metadata.szh || 400),
-              newWidth = _calculateRenderedIma[0],
-              newHeight = _calculateRenderedIma[1];
-            return Promise.resolve(getVideoFirstFrame(attachment.data, newWidth, newHeight)).then(function (result) {
-              if (result) {
-                var _attachment$metadata2;
-                var frameBlobUrl = result.frameBlobUrl;
-                dispatch(setUpdateMessageAttachmentAC((attachment === null || attachment === void 0 ? void 0 : (_attachment$metadata2 = attachment.metadata) === null || _attachment$metadata2 === void 0 ? void 0 : _attachment$metadata2.tmb) || '', frameBlobUrl));
-              }
-            });
-          } catch (e) {
-            return Promise.reject(e);
-          }
-        };
-        reader.onload = function () {
-          try {
-            setPendingAttachment(tid, {
-              file: file
-            });
-            var _temp0 = function () {
-              if (customUploader) {
-                var _temp6 = function () {
-                  if (fileType === 'image') {
-                    resizeImage(file).then(function (resizedFile) {
-                      try {
-                        return Promise.resolve(createImageThumbnail(file)).then(function (_ref4) {
-                          var _resizedFile$blob;
-                          var thumbnail = _ref4.thumbnail,
-                            imageWidth = _ref4.imageWidth,
-                            imageHeight = _ref4.imageHeight;
-                          var attachment = {
-                            data: file,
-                            upload: false,
-                            type: isMediaAttachment ? fileType : 'file',
-                            attachmentUrl: createComposePreviewUrl(tid, resizedFile.blob),
-                            tid: tid,
-                            size: isMediaAttachment ? resizedFile !== null && resizedFile !== void 0 && resizedFile.blob ? resizedFile === null || resizedFile === void 0 ? void 0 : (_resizedFile$blob = resizedFile.blob) === null || _resizedFile$blob === void 0 ? void 0 : _resizedFile$blob.size : file.size : file.size,
-                            metadata: {
-                              szw: imageWidth,
-                              szh: imageHeight,
-                              tmb: thumbnail
-                            }
-                          };
-                          handleAttachmentImageForCache(attachment);
-                          setAttachments(function (prevState) {
-                            return [].concat(prevState, [attachment]);
-                          });
-                        });
-                      } catch (e) {
-                        return Promise.reject(e);
-                      }
-                    });
-                  } else {
-                    var _temp1 = function () {
-                      if (fileType === 'video') {
-                        return Promise.resolve(getFrame(file, 0)).then(function (_ref5) {
-                          var thumb = _ref5.thumb,
-                            width = _ref5.width,
-                            height = _ref5.height,
-                            duration = _ref5.duration;
-                          var attachment = {
-                            data: file,
-                            upload: false,
-                            type: isMediaAttachment ? fileType : 'file',
-                            attachmentUrl: createComposePreviewUrl(tid, file),
-                            tid: tid,
-                            size: file.size,
-                            metadata: {
-                              szw: width,
-                              szh: height,
-                              tmb: thumb,
-                              dur: duration
-                            }
-                          };
-                          handleAttachmentVideoForCache(attachment);
-                          setAttachments(function (prevState) {
-                            return [].concat(prevState, [attachment]);
-                          });
-                        });
-                      } else {
-                        setAttachments(function (prevState) {
-                          return [].concat(prevState, [{
-                            data: file,
-                            upload: false,
-                            type: 'file',
-                            tid: tid,
-                            size: file.size
-                          }]);
-                        });
-                      }
-                    }();
-                    if (_temp1 && _temp1.then) return _temp1.then(function () {});
-                  }
-                }();
-                if (_temp6 && _temp6.then) return _temp6.then(function () {});
-              } else {
-                var _temp9 = function () {
-                  if (fileType === 'image') {
-                    var _temp7 = function () {
-                      if (isMediaAttachment) {
-                        return Promise.resolve(createImageThumbnail(file)).then(function (_ref6) {
-                          var thumbnail = _ref6.thumbnail,
-                            imageWidth = _ref6.imageWidth,
-                            imageHeight = _ref6.imageHeight;
-                          var metas = {
-                            thumbnail: thumbnail,
-                            imageWidth: imageWidth,
-                            imageHeight: imageHeight
-                          };
-                          if (file.type === 'image/gif') {
-                            setAttachments(function (prevState) {
-                              return [].concat(prevState, [{
-                                data: file,
-                                upload: true,
-                                attachmentUrl: createComposePreviewUrl(tid, file),
-                                tid: tid,
-                                type: fileType,
-                                size: file.size,
-                                metadata: JSON.stringify({
-                                  tmb: metas.thumbnail,
-                                  szw: metas.imageWidth,
-                                  szh: metas.imageHeight
-                                })
-                              }]);
-                            });
-                          } else {
-                            resizeImage(file).then(function (resizedFileData) {
-                              try {
-                                var resizedFile = new File([resizedFileData.blob], resizedFileData.file.name);
-                                var attachment = {
-                                  data: resizedFile,
-                                  upload: true,
-                                  attachmentUrl: createComposePreviewUrl(tid, resizedFile),
-                                  tid: tid,
-                                  type: fileType,
-                                  size: resizedFile.size,
-                                  metadata: JSON.stringify({
-                                    tmb: metas.thumbnail,
-                                    szw: resizedFileData.newWidth,
-                                    szh: resizedFileData.newHeight
-                                  })
-                                };
-                                handleAttachmentImageForCache(attachment);
-                                setAttachments(function (prevState) {
-                                  return [].concat(prevState, [attachment]);
-                                });
-                                return Promise.resolve();
-                              } catch (e) {
-                                return Promise.reject(e);
-                              }
-                            });
+      var customUploader = getCustomUploader();
+      var fileType = file.type.split('/')[0];
+      var tid = v4();
+      var handleAttachmentImageForCache = function handleAttachmentImageForCache(attachment) {
+        try {
+          var _attachment$metadata;
+          var url = URL.createObjectURL(attachment.data);
+          dispatch(setUpdateMessageAttachmentAC((attachment === null || attachment === void 0 ? void 0 : (_attachment$metadata = attachment.metadata) === null || _attachment$metadata === void 0 ? void 0 : _attachment$metadata.tmb) || '', url));
+          return Promise.resolve();
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      };
+      var handleAttachmentVideoForCache = function handleAttachmentVideoForCache(attachment) {
+        try {
+          var _calculateRenderedIma = calculateRenderedImageWidth(attachment.metadata.szh || 400, attachment.metadata.szh || 400),
+            newWidth = _calculateRenderedIma[0],
+            newHeight = _calculateRenderedIma[1];
+          return Promise.resolve(getVideoFirstFrame(attachment.data, newWidth, newHeight)).then(function (result) {
+            if (result) {
+              var _attachment$metadata2;
+              var frameBlobUrl = result.frameBlobUrl;
+              dispatch(setUpdateMessageAttachmentAC((attachment === null || attachment === void 0 ? void 0 : (_attachment$metadata2 = attachment.metadata) === null || _attachment$metadata2 === void 0 ? void 0 : _attachment$metadata2.tmb) || '', frameBlobUrl));
+            }
+          });
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      };
+      setPendingAttachment(tid, {
+        file: file
+      });
+      if (fileType === 'video') {
+        beginVideoPreparation(tid, file);
+      }
+      var type = fileType === 'video' && (!customUploader || isMediaAttachment) ? 'video' : isMediaAttachment && fileType === 'image' ? 'image' : 'file';
+      var attachment = _extends({
+        data: file,
+        name: file.name,
+        upload: !customUploader,
+        type: type,
+        tid: tid,
+        size: file.size
+      }, fileType === 'video' && !isMediaAttachment ? {
+        thumbnailState: 'loading'
+      } : {}, fileType === 'image' || fileType === 'video' ? {
+        attachmentUrl: createComposePreviewUrl(tid, file),
+        metadata: customUploader ? {} : '{}'
+      } : {});
+      setAttachments(function (prevState) {
+        return [].concat(prevState, [attachment]);
+      });
+      var updateAttachment = function updateAttachment(patch) {
+        setAttachments(function (prevState) {
+          return prevState.map(function (current) {
+            return current.tid === tid ? _extends({}, current, patch) : current;
+          });
+        });
+      };
+      setTimeout(function () {
+        try {
+          var _temp1 = function () {
+            if (fileType === 'image') {
+              var _temp5 = _catch(function () {
+                return Promise.resolve(createImageThumbnail(file)).then(function (_ref5) {
+                  var thumbnail = _ref5.thumbnail,
+                    imageWidth = _ref5.imageWidth,
+                    imageHeight = _ref5.imageHeight;
+                  var _temp4 = function () {
+                    if (customUploader) {
+                      return Promise.resolve(resizeImage(file)).then(function (resizedFile) {
+                        var patch = {
+                          size: isMediaAttachment && resizedFile !== null && resizedFile !== void 0 && resizedFile.blob ? resizedFile.blob.size : file.size,
+                          metadata: {
+                            szw: imageWidth,
+                            szh: imageHeight,
+                            tmb: thumbnail
                           }
-                        });
-                      } else {
-                        return Promise.resolve(createImageThumbnail(file, undefined, 50, 50)).then(function (_ref7) {
-                          var thumbnail = _ref7.thumbnail;
-                          setAttachments(function (prevState) {
-                            return [].concat(prevState, [{
-                              data: file,
-                              type: 'file',
-                              upload: true,
-                              attachmentUrl: createComposePreviewUrl(tid, file),
-                              tid: tid,
-                              size: file.size,
+                        };
+                        updateAttachment(patch);
+                        handleAttachmentImageForCache(_extends({}, attachment, patch));
+                      });
+                    } else {
+                      var _temp10 = function () {
+                        if (isMediaAttachment && file.type !== 'image/gif') {
+                          return Promise.resolve(resizeImage(file)).then(function (resizedFileData) {
+                            var resizedFile = resizedFileData.blob ? new File([resizedFileData.blob], resizedFileData.file.name, {
+                              type: file.type
+                            }) : file;
+                            var patch = {
+                              data: resizedFile,
+                              size: resizedFile.size,
                               metadata: JSON.stringify({
-                                tmb: thumbnail
+                                tmb: thumbnail,
+                                szw: resizedFileData.newWidth,
+                                szh: resizedFileData.newHeight
                               })
-                            }]);
+                            };
+                            updateAttachment(patch);
+                            setPendingAttachment(tid, {
+                              file: resizedFile
+                            });
+                            handleAttachmentImageForCache(_extends({}, attachment, patch));
+                          });
+                        } else {
+                          updateAttachment({
+                            metadata: JSON.stringify({
+                              tmb: thumbnail,
+                              szw: imageWidth,
+                              szh: imageHeight
+                            })
                           });
+                        }
+                      }();
+                      if (_temp10 && _temp10.then) return _temp10.then(function () {});
+                    }
+                  }();
+                  if (_temp4 && _temp4.then) return _temp4.then(function () {});
+                });
+              }, function (error) {
+                log.warn('Unable to prepare image attachment preview:', error);
+              });
+              if (_temp5 && _temp5.then) return _temp5.then(function () {});
+            } else {
+              var _temp11 = function () {
+                if (fileType === 'video') {
+                  var _temp9 = function _temp9() {
+                    return Promise.resolve(remuxPromise).then(function (uploadFile) {
+                      if (uploadFile !== file) {
+                        updateAttachment({
+                          data: uploadFile,
+                          size: uploadFile.size
+                        });
+                        setPendingAttachment(tid, {
+                          file: uploadFile
                         });
                       }
-                    }();
-                    if (_temp7 && _temp7.then) return _temp7.then(function () {});
-                  } else {
-                    var _temp10 = function () {
-                      if (fileType === 'video') {
-                        return Promise.resolve(getFrame(file, 0)).then(function (_ref8) {
-                          var thumb = _ref8.thumb,
-                            width = _ref8.width,
-                            height = _ref8.height,
-                            duration = _ref8.duration;
-                          var metas = JSON.stringify({
-                            tmb: thumb,
-                            width: width,
-                            height: height,
-                            dur: duration
-                          });
-                          var attachment = {
-                            data: file,
-                            type: 'video',
-                            upload: true,
-                            size: file.size,
-                            attachmentUrl: createComposePreviewUrl(tid, file),
-                            tid: tid,
-                            metadata: metas
-                          };
-                          handleAttachmentVideoForCache(attachment);
-                          setAttachments(function (prevState) {
-                            return [].concat(prevState, [attachment]);
-                          });
+                      if (metadata) {
+                        completeVideoPreparation(tid, {
+                          file: uploadFile,
+                          metadata: metadata
                         });
                       } else {
-                        setAttachments(function (prevState) {
-                          return [].concat(prevState, [{
-                            data: file,
-                            upload: true,
-                            type: 'file',
-                            size: file.size,
-                            tid: tid
-                          }]);
+                        failVideoPreparation(tid);
+                        updateAttachment({
+                          thumbnailState: 'failed'
                         });
                       }
-                    }();
-                    if (_temp10 && _temp10.then) return _temp10.then(function () {});
-                  }
-                }();
-                if (_temp9 && _temp9.then) return _temp9.then(function () {});
-              }
-            }();
-            return Promise.resolve(_temp0 && _temp0.then ? _temp0.then(function () {}) : void 0);
-          } catch (e) {
-            return Promise.reject(e);
-          }
-        };
-        reader.onerror = function (e) {
-          log.info(' error on read file onError', e);
-        };
-        reader.readAsBinaryString(file);
-      };
-      var customUploader = getCustomUploader();
-      var _temp3 = function () {
-        if (file.type.split('/')[0] === 'video') {
-          return Promise.resolve(remuxVideoFileForUpload(file)).then(function (_remuxVideoFileForUpl) {
-            file = _remuxVideoFileForUpl;
-          });
+                    });
+                  };
+                  var remuxPromise = remuxVideoFileForUpload(file);
+                  var thumbnailSource = file;
+                  var metadata;
+                  var _temp8 = _catch(function () {
+                    function _temp7() {
+                      var _frame = frame,
+                        thumb = _frame.thumb,
+                        width = _frame.width,
+                        height = _frame.height,
+                        duration = _frame.duration;
+                      metadata = customUploader ? {
+                        szw: width,
+                        szh: height,
+                        tmb: thumb,
+                        dur: duration
+                      } : JSON.stringify({
+                        tmb: thumb,
+                        szw: width,
+                        szh: height,
+                        dur: duration
+                      });
+                      updateAttachment({
+                        metadata: metadata,
+                        thumbnailState: 'ready'
+                      });
+                      handleAttachmentVideoForCache(_extends({}, attachment, {
+                        metadata: metadata
+                      }));
+                    }
+                    var frame;
+                    var _temp6 = _catch(function () {
+                      return Promise.resolve(getFrame(thumbnailSource, 0)).then(function (_getFrame) {
+                        frame = _getFrame;
+                      });
+                    }, function () {
+                      return Promise.resolve(remuxPromise).then(function (_remuxPromise) {
+                        thumbnailSource = _remuxPromise;
+                        return Promise.resolve(getFrame(thumbnailSource, 0)).then(function (_getFrame2) {
+                          frame = _getFrame2;
+                        });
+                      });
+                    });
+                    return _temp6 && _temp6.then ? _temp6.then(_temp7) : _temp7(_temp6);
+                  }, function (error) {
+                    log.warn('Unable to generate video thumbnail:', error);
+                  });
+                  return _temp8 && _temp8.then ? _temp8.then(_temp9) : _temp9(_temp8);
+                }
+              }();
+              if (_temp11 && _temp11.then) return _temp11.then(function () {});
+            }
+          }();
+          return Promise.resolve(_temp1 && _temp1.then ? _temp1.then(function () {}) : void 0);
+        } catch (e) {
+          return Promise.reject(e);
         }
-      }();
-      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3));
+      }, 0);
+      return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
     }
@@ -53481,14 +53680,14 @@ var SendMessageInput = function SendMessageInput(_ref3) {
               }
             }
           }
-          var _temp11 = function () {
+          var _temp12 = function () {
             if (allowUpload) {
               return Promise.resolve(handleAddAttachmentWithViewOnceCheck(file, isMediaAttachment)).then(function () {});
             } else {
               showFileUploadError(errorMessage);
             }
           }();
-          return Promise.resolve(_temp11 && _temp11.then ? _temp11.then(function () {}) : void 0);
+          return Promise.resolve(_temp12 && _temp12.then ? _temp12.then(function () {}) : void 0);
         } catch (e) {
           return Promise.reject(e);
         }
@@ -53562,23 +53761,53 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   useEffect(function () {
     if (prevActiveChannelId && activeChannel.id && prevActiveChannelId !== activeChannel.id) {
       setMessageText('');
-      handleCloseReply();
+      if (messageForReply) {
+        isNavigatingChannelRef.current = true;
+        handleCloseReply(true);
+      }
       setAttachments([]);
       attachmentsUpdate = [];
-      handleCloseEditMode();
+      handleCloseEditMode(!!messageToEdit);
       clearTimeout(typingTimout);
       var draftMessage = getDraftMessageFromMap(activeChannel.id);
       if (draftMessage) {
-        if (draftMessage.messageForReply) {
-          dispatch(setMessageForReplyAC(draftMessage.messageForReply));
+        restoringDraftRef.current = true;
+        if (draftMessage.messageToEdit) {
+          var _ref6, _draftMessage$editMes2, _draftMessage$editBod2, _draftMessage$mention2;
+          var restoredText = (_ref6 = (_draftMessage$editMes2 = draftMessage.editMessageText) != null ? _draftMessage$editMes2 : draftMessage.messageToEdit.body) != null ? _ref6 : '';
+          var restoredEdit = _extends({}, draftMessage.messageToEdit, {
+            body: restoredText,
+            bodyAttributes: (_draftMessage$editBod2 = draftMessage.editBodyAttributes) != null ? _draftMessage$editBod2 : draftMessage.messageToEdit.bodyAttributes,
+            mentionedUsers: (_draftMessage$mention2 = draftMessage.mentionedUsers) != null ? _draftMessage$mention2 : draftMessage.messageToEdit.mentionedUsers
+          });
+          setEditMessageText(restoredText);
+          setMessageBodyAttributes(restoredEdit.bodyAttributes || []);
+          setMentionedUsers(restoredEdit.mentionedUsers || []);
+          setRestoredEditMessage(restoredEdit);
+          dispatch(setMessageToEditAC(draftMessage.messageToEdit));
+          restoredDraftChannelIdRef.current = activeChannel.id;
+        }
+        if (!draftMessage.messageToEdit) {
+          if (draftMessage.messageForReply) {
+            dispatch(setMessageForReplyAC(draftMessage.messageForReply));
+          }
+          setMessageText(draftMessage.text);
+          setMentionedUsers(draftMessage.mentionedUsers);
+          setAttachments(draftMessage.attachments || []);
+          setViewOnce(!!draftMessage.viewOnce);
+          restoredDraftChannelIdRef.current = activeChannel.id;
+          setShouldClearEditor({
+            clear: true,
+            draftMessage: draftMessage
+          });
         }
-        setMessageText(draftMessage.text);
-        setMentionedUsers(draftMessage.mentionedUsers);
+      } else {
+        setMentionedUsers([]);
+        setShouldClearEditor({
+          clear: true,
+          draftMessage: draftMessage
+        });
       }
-      setShouldClearEditor({
-        clear: true,
-        draftMessage: draftMessage
-      });
     }
     if (activeChannel.id) {
       prevActiveChannelId = activeChannel.id;
@@ -53586,23 +53815,38 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     if (activeChannel.id && membersHasNext === undefined && !(activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT && activeChannel.memberCount === 2)) {
       dispatch(getMembersAC(activeChannel.id));
     }
-    setMentionedUsers([]);
   }, [activeChannel.id]);
   useEffect(function () {
+    if (!draftsHydrated) {
+      return;
+    }
+    if (restoringDraftRef.current) {
+      restoringDraftRef.current = false;
+      return;
+    }
+    if (messageToEdit) {
+      var persistedEditText = editMessageText || messageToEdit.body || '';
+      var normalizeAttrs = function normalizeAttrs(attrs) {
+        return !attrs || attrs.length === 0 ? [] : attrs;
+      };
+      var hasTextChanged = editMessageText !== messageToEdit.body;
+      var hasAttributesChanged = !compareMessageBodyAttributes(normalizeAttrs(messageBodyAttributes), normalizeAttrs(messageToEdit.bodyAttributes));
+      var canSubmitEdit = !!editMessageText.trim() && (hasTextChanged || hasAttributesChanged);
+      setSendMessageIsActive(canSubmitEdit);
+      setDraftMessageToMap(activeChannel.id, {
+        text: persistedEditText || 'Edit message',
+        mentionedUsers: mentionedUsers,
+        messageToEdit: messageToEdit,
+        editMessageText: persistedEditText,
+        editBodyAttributes: messageBodyAttributes
+      }, {
+        persist: canSubmitEdit
+      });
+      return;
+    }
     if (messageText.trim() || editMessageText !== null && editMessageText !== void 0 && editMessageText.trim() && editMessageText && (editMessageText === null || editMessageText === void 0 ? void 0 : editMessageText.trim()) !== (messageToEdit === null || messageToEdit === void 0 ? void 0 : messageToEdit.body) || attachments.length) {
       if (attachments.length) {
-        var videoAttachment = false;
-        attachments.forEach(function (att) {
-          if ((att.type === 'video' || att.data.type.split('/')[0] === 'video') && att.type !== 'file') {
-            videoAttachment = true;
-            if (readyVideoAttachments[att.tid]) {
-              setSendMessageIsActive(true);
-            }
-          }
-        });
-        if (!videoAttachment) {
-          setSendMessageIsActive(true);
-        }
+        setSendMessageIsActive(true);
       } else {
         setSendMessageIsActive(true);
       }
@@ -53613,15 +53857,17 @@ var SendMessageInput = function SendMessageInput(_ref3) {
         setSendMessageIsActive(false);
       }
     }
-    if (messageText.trim()) {
-      var draftMessage = getDraftMessageFromMap(activeChannel.id);
+    var draftMessage = getDraftMessageFromMap(activeChannel.id);
+    if (messageText.trim() || attachments.length) {
       if (draftMessage && draftMessage.mentionedUsers && draftMessage.mentionedUsers.length) {
         setDraftMessageToMap(activeChannel.id, {
           text: messageText,
           mentionedUsers: draftMessage.mentionedUsers,
           messageForReply: messageForReply,
           editorState: realEditorState,
-          bodyAttributes: messageBodyAttributes
+          bodyAttributes: messageBodyAttributes,
+          attachments: attachments,
+          viewOnce: viewOnce
         });
       } else {
         setDraftMessageToMap(activeChannel.id, {
@@ -53629,14 +53875,30 @@ var SendMessageInput = function SendMessageInput(_ref3) {
           mentionedUsers: mentionedUsers,
           messageForReply: messageForReply,
           editorState: realEditorState,
-          bodyAttributes: messageBodyAttributes
+          bodyAttributes: messageBodyAttributes,
+          attachments: attachments,
+          viewOnce: viewOnce
         });
       }
       if (!listenerIsAdded) {
         setListenerIsAdded(true);
         document.body.setAttribute('onbeforeunload', "return () => 'reload?'");
       }
-    } else if (getDraftMessageFromMap(activeChannel.id)) {
+    } else if (messageForReply || draftMessage !== null && draftMessage !== void 0 && draftMessage.messageForReply) {
+      setDraftMessageToMap(activeChannel.id, {
+        text: '',
+        mentionedUsers: (draftMessage === null || draftMessage === void 0 ? void 0 : draftMessage.mentionedUsers) || mentionedUsers,
+        messageForReply: messageForReply || (draftMessage === null || draftMessage === void 0 ? void 0 : draftMessage.messageForReply),
+        bodyAttributes: messageBodyAttributes,
+        attachments: [],
+        viewOnce: false
+      }, {
+        persist: false
+      });
+    } else if (draftMessage) {
+      if (restoredDraftChannelIdRef.current && restoredDraftChannelIdRef.current !== activeChannel.id) {
+        return;
+      }
       removeDraftMessageFromMap(activeChannel.id);
       dispatch(setChannelDraftMessageIsRemovedAC(activeChannel.id));
       if (checkDraftMessagesIsEmpty() && listenerIsAdded) {
@@ -53644,14 +53906,18 @@ var SendMessageInput = function SendMessageInput(_ref3) {
         document.body.removeAttribute('onbeforeunload');
       }
     }
-  }, [messageText, attachments, editMessageText, readyVideoAttachments, messageBodyAttributes, messageToEdit]);
+  }, [messageText, attachments, editMessageText, readyVideoAttachments, messageBodyAttributes, messageToEdit, viewOnce, draftsHydrated]);
   useDidUpdate(function () {
-    if (mentionedUsers && mentionedUsers.length) {
+    if (!messageToEdit && mentionedUsers && mentionedUsers.length) {
       setDraftMessageToMap(activeChannel.id, {
         text: messageText,
         mentionedUsers: mentionedUsers,
         messageForReply: messageForReply,
-        bodyAttributes: messageBodyAttributes
+        bodyAttributes: messageBodyAttributes,
+        attachments: attachments,
+        viewOnce: viewOnce
+      }, {
+        persist: !!(messageText.trim() || attachments.length)
       });
     }
   }, [mentionedUsers]);
@@ -53700,13 +53966,27 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     }
   });
   useDidUpdate(function () {
-    if (draftMessagesMap[activeChannel.id]) {
+    var _draftMessagesMap$act;
+    var persistedReply = (_draftMessagesMap$act = draftMessagesMap[activeChannel.id]) === null || _draftMessagesMap$act === void 0 ? void 0 : _draftMessagesMap$act.messageForReply;
+    if (isNavigatingChannelRef.current) {
+      isNavigatingChannelRef.current = false;
+      return;
+    }
+    var hasDraftContent = !!(messageText.trim() || attachments.length || messageForReply || persistedReply);
+    if (hasDraftContent) {
       setDraftMessageToMap(activeChannel.id, {
         text: messageText,
         mentionedUsers: mentionedUsers,
-        messageForReply: messageForReply,
-        bodyAttributes: messageBodyAttributes
+        messageForReply: messageForReply || persistedReply,
+        bodyAttributes: messageBodyAttributes,
+        attachments: attachments,
+        viewOnce: viewOnce
+      }, {
+        persist: !!(messageText.trim() || attachments.length)
       });
+    } else if (draftMessagesMap[activeChannel.id]) {
+      removeDraftMessageFromMap(activeChannel.id);
+      dispatch(setChannelDraftMessageIsRemovedAC(activeChannel.id));
     }
     if (messageForReply && messageToEdit) {
       handleCloseEditMode();
@@ -53742,7 +54022,6 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       }, 800);
     }
     messageContRef.current.addEventListener('paste', handlePastAttachments);
-    messageContRef.current.addEventListener('cut', handleCut);
     document.addEventListener('mousedown', handleClick);
     return function () {
       if (inputHeightTimeout) {
@@ -53752,7 +54031,6 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       document.removeEventListener('mousedown', handleClick);
       if (messageContRef && messageContRef.current) {
         messageContRef.current.removeEventListener('paste', handlePastAttachments);
-        messageContRef.current.removeEventListener('cut', handleCut);
       }
     };
   }, []);
@@ -53899,7 +54177,9 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     borderColor: borderColor
   }, /*#__PURE__*/React__default.createElement(CloseEditMode, {
     color: textSecondary,
-    onClick: handleCloseEditMode
+    onClick: function onClick() {
+      return handleCloseEditMode();
+    }
   }, /*#__PURE__*/React__default.createElement(SvgClose, null)), /*#__PURE__*/React__default.createElement(EditReplyMessageHeader, {
     color: accentColor
   }, editMessageIcon || /*#__PURE__*/React__default.createElement(SvgEditIcon, null), "Edit Message"), /*#__PURE__*/React__default.createElement(EditMessageText, null, MessageTextFormat({
@@ -53922,7 +54202,9 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     borderColor: borderColor
   }, /*#__PURE__*/React__default.createElement(CloseEditMode, {
     color: textSecondary,
-    onClick: handleCloseReply
+    onClick: function onClick() {
+      return handleCloseReply();
+    }
   }, /*#__PURE__*/React__default.createElement(SvgClose, null)), CustomReplyMessageContainer && customReplyMessageTypes !== null && customReplyMessageTypes !== void 0 && customReplyMessageTypes.includes(messageForReply.type) ? (/*#__PURE__*/React__default.createElement(CustomReplyMessageContainer, {
     messageForReply: messageForReply,
     onClose: handleCloseReply
@@ -53930,14 +54212,26 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     attachment: messageForReply.attachments[0],
     backgroundColor: selectedFileAttachmentsBoxBackground || '',
     isRepliedMessage: true
-  })) : messageForReply.attachments[0].type === attachmentTypes.file && (/*#__PURE__*/React__default.createElement(ReplyIconWrapper, {
+  })) : messageForReply.attachments[0].type === attachmentTypes.file ? (/*#__PURE__*/React__default.createElement(ReplyIconWrapper, {
     backgroundColor: accentColor,
     iconColor: textOnPrimary
-  }, /*#__PURE__*/React__default.createElement(SvgChoseFile, null)))), /*#__PURE__*/React__default.createElement(ReplyMessageBody$1, {
+  }, /*#__PURE__*/React__default.createElement(SvgChoseFile, null))) : getReplyLinkPreviewImage(messageForReply.attachments) && !shouldShowLinkPreviewErrorFallback(getReplyLinkPreviewImage(messageForReply.attachments), replyLinkPreviewImageFailed) ? (/*#__PURE__*/React__default.createElement(LinkPreviewImage, {
+    bg: background,
+    src: getReplyLinkPreviewImage(messageForReply.attachments),
+    alt: 'Link preview',
+    onError: function onError() {
+      return setReplyLinkPreviewImageFailed(true);
+    }
+  })) : messageForReply.attachments[0].type === attachmentTypes.link && (/*#__PURE__*/React__default.createElement(LinkPreviewIconWrapper, {
+    bg: background
+  }, /*#__PURE__*/React__default.createElement(LinkPreviewIcon, {
+    color: accentColor,
+    bg: background
+  })))), /*#__PURE__*/React__default.createElement(ReplyMessageBody$1, {
     linkColor: accentColor
   }, /*#__PURE__*/React__default.createElement(EditReplyMessageHeader, {
     color: accentColor
-  }, replyMessageIcon || /*#__PURE__*/React__default.createElement(SvgReplyIcon, null), " Reply to", /*#__PURE__*/React__default.createElement(UserName$1, null, user.id === messageForReply.user.id ? user.firstName ? user.firstName + " " + user.lastName : user.id : makeUsername(contactsMap[messageForReply.user.id], messageForReply.user, getFromContacts))), messageForReply.attachments && messageForReply.attachments.length ? messageForReply.attachments[0].type === attachmentTypes.voice ? (/*#__PURE__*/React__default.createElement(TextInOneLine, null, (messageForReply === null || messageForReply === void 0 ? void 0 : messageForReply.viewOnce) && /*#__PURE__*/React__default.createElement(SvgViewOnceLastMessage, {
+  }, replyMessageIcon || /*#__PURE__*/React__default.createElement(SvgReplyIcon, null), user.id === messageForReply.user.id ? ' Reply You' : (/*#__PURE__*/React__default.createElement("span", null, ' Reply to', /*#__PURE__*/React__default.createElement(UserName$1, null, makeUsername(contactsMap[messageForReply.user.id], messageForReply.user, getFromContacts))))), messageForReply.attachments && messageForReply.attachments.length ? messageForReply.attachments[0].type === attachmentTypes.voice ? (/*#__PURE__*/React__default.createElement(TextInOneLine, null, (messageForReply === null || messageForReply === void 0 ? void 0 : messageForReply.viewOnce) && /*#__PURE__*/React__default.createElement(SvgViewOnceLastMessage, {
     style: {
       margin: '0 4px -3px 0'
     }
@@ -53989,7 +54283,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   }, /*#__PURE__*/React__default.createElement(CloseEditMode, {
     color: textSecondary,
     onClick: handleRemoveLinkPreview
-  }, /*#__PURE__*/React__default.createElement(SvgClose, null)), /*#__PURE__*/React__default.createElement(LinkPreviewContent, null, (_linkPreview$metadata9 = linkPreview.metadata.og) !== null && _linkPreview$metadata9 !== void 0 && (_linkPreview$metadata0 = _linkPreview$metadata9.image) !== null && _linkPreview$metadata0 !== void 0 && (_linkPreview$metadata1 = _linkPreview$metadata0[0]) !== null && _linkPreview$metadata1 !== void 0 && _linkPreview$metadata1.url ? (/*#__PURE__*/React__default.createElement(LinkPreviewImage, {
+  }, /*#__PURE__*/React__default.createElement(SvgClose, null)), /*#__PURE__*/React__default.createElement(LinkPreviewContent, null, (_linkPreview$metadata9 = linkPreview.metadata.og) !== null && _linkPreview$metadata9 !== void 0 && (_linkPreview$metadata0 = _linkPreview$metadata9.image) !== null && _linkPreview$metadata0 !== void 0 && (_linkPreview$metadata1 = _linkPreview$metadata0[0]) !== null && _linkPreview$metadata1 !== void 0 && _linkPreview$metadata1.url && !shouldShowLinkPreviewErrorFallback(linkPreview.metadata.og.image[0].url, linkPreviewImageFailed) ? (/*#__PURE__*/React__default.createElement(LinkPreviewImage, {
     onLoad: function onLoad(e) {
       var _e$target, _e$target2;
       if ((_e$target = e.target) !== null && _e$target !== void 0 && _e$target.naturalHeight && (_e$target2 = e.target) !== null && _e$target2 !== void 0 && _e$target2.naturalWidth) {
@@ -54000,18 +54294,24 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       }
     },
     src: linkPreview.metadata.og.image[0].url,
-    alt: 'Link preview'
-  })) : (_linkPreview$metadata10 = linkPreview.metadata.og) !== null && _linkPreview$metadata10 !== void 0 && (_linkPreview$metadata11 = _linkPreview$metadata10.favicon) !== null && _linkPreview$metadata11 !== void 0 && _linkPreview$metadata11.url ? (/*#__PURE__*/React__default.createElement(LinkPreviewImage, {
+    alt: 'Link preview',
+    onError: function onError() {
+      return setLinkPreviewImageFailed(true);
+    }
+  })) : shouldShowLinkPreviewErrorFallback((_linkPreview$metadata10 = linkPreview.metadata.og) === null || _linkPreview$metadata10 === void 0 ? void 0 : (_linkPreview$metadata11 = _linkPreview$metadata10.image) === null || _linkPreview$metadata11 === void 0 ? void 0 : (_linkPreview$metadata12 = _linkPreview$metadata11[0]) === null || _linkPreview$metadata12 === void 0 ? void 0 : _linkPreview$metadata12.url, linkPreviewImageFailed) ? (/*#__PURE__*/React__default.createElement(LinkPreviewIcon, {
+    color: accentColor,
+    bg: background
+  })) : (_linkPreview$metadata13 = linkPreview.metadata.og) !== null && _linkPreview$metadata13 !== void 0 && (_linkPreview$metadata14 = _linkPreview$metadata13.favicon) !== null && _linkPreview$metadata14 !== void 0 && _linkPreview$metadata14.url ? (/*#__PURE__*/React__default.createElement(LinkPreviewImage, {
     src: linkPreview.metadata.og.favicon.url,
     alt: 'Favicon'
   })) : (/*#__PURE__*/React__default.createElement(LinkPreviewIcon, {
     color: accentColor,
     bg: background
   })), /*#__PURE__*/React__default.createElement(LinkPreviewTextContent, {
-    hasImage: !!((_linkPreview$metadata12 = linkPreview.metadata.og) !== null && _linkPreview$metadata12 !== void 0 && (_linkPreview$metadata13 = _linkPreview$metadata12.image) !== null && _linkPreview$metadata13 !== void 0 && (_linkPreview$metadata14 = _linkPreview$metadata13[0]) !== null && _linkPreview$metadata14 !== void 0 && _linkPreview$metadata14.url) || !!((_linkPreview$metadata15 = linkPreview.metadata.og) !== null && _linkPreview$metadata15 !== void 0 && (_linkPreview$metadata16 = _linkPreview$metadata15.favicon) !== null && _linkPreview$metadata16 !== void 0 && _linkPreview$metadata16.url)
-  }, ((_linkPreview$metadata17 = linkPreview.metadata.og) === null || _linkPreview$metadata17 === void 0 ? void 0 : _linkPreview$metadata17.title) && (/*#__PURE__*/React__default.createElement(LinkPreviewTitle, {
+    hasImage: !!((_linkPreview$metadata15 = linkPreview.metadata.og) !== null && _linkPreview$metadata15 !== void 0 && (_linkPreview$metadata16 = _linkPreview$metadata15.image) !== null && _linkPreview$metadata16 !== void 0 && (_linkPreview$metadata17 = _linkPreview$metadata16[0]) !== null && _linkPreview$metadata17 !== void 0 && _linkPreview$metadata17.url) || !!((_linkPreview$metadata18 = linkPreview.metadata.og) !== null && _linkPreview$metadata18 !== void 0 && (_linkPreview$metadata19 = _linkPreview$metadata18.favicon) !== null && _linkPreview$metadata19 !== void 0 && _linkPreview$metadata19.url)
+  }, ((_linkPreview$metadata20 = linkPreview.metadata.og) === null || _linkPreview$metadata20 === void 0 ? void 0 : _linkPreview$metadata20.title) && (/*#__PURE__*/React__default.createElement(LinkPreviewTitle, {
     color: accentColor
-  }, linkPreview.metadata.og.title)), ((_linkPreview$metadata18 = linkPreview.metadata.og) === null || _linkPreview$metadata18 === void 0 ? void 0 : _linkPreview$metadata18.description) && (/*#__PURE__*/React__default.createElement(LinkPreviewDescription, {
+  }, linkPreview.metadata.og.title)), ((_linkPreview$metadata21 = linkPreview.metadata.og) === null || _linkPreview$metadata21 === void 0 ? void 0 : _linkPreview$metadata21.description) && (/*#__PURE__*/React__default.createElement(LinkPreviewDescription, {
     color: textPrimary
   }, linkPreview.metadata.og.description)))))), !!attachments.length && !sendAttachmentSeparately && (/*#__PURE__*/React__default.createElement(ChosenAttachments, null, [].concat(attachments).map(function (attachment) {
     return /*#__PURE__*/React__default.createElement("div", {
@@ -54137,6 +54437,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     onChange: onChange
   }), /*#__PURE__*/React__default.createElement(EditMessagePlugin, {
     editMessage: messageToEdit,
+    draftMessage: (restoredEditMessage === null || restoredEditMessage === void 0 ? void 0 : restoredEditMessage.id) === (messageToEdit === null || messageToEdit === void 0 ? void 0 : messageToEdit.id) ? restoredEditMessage : null,
     contactsMap: contactsMap,
     getFromContacts: getFromContacts,
     setMentionedMember: setMentionedUsers
@@ -54285,14 +54586,14 @@ var SendMessageInputContainer = styled.div(_templateObject11$9 || (_templateObje
 }, AddAttachmentIcon, function (props) {
   return props.iconColor;
 });
-var MessageInputWrapper = styled.div(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  max-width: calc(100% - 50px);\n  //max-width: ", ";\n  //max-width: calc(100% - 110px);\n  background-color: ", ";\n  border-radius: ", ";\n  position: relative;\n"])), function (props) {
+var MessageInputWrapper = styled.div(_templateObject12$7 || (_templateObject12$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  max-width: calc(100% - 50px);\n  //max-width: ", ";\n  //max-width: calc(100% - 110px);\n  background-color: ", ";\n  border-radius: ", ";\n  position: relative;\n"])), function (props) {
   return props.channelDetailsIsOpen ? "calc(100% - " + (props.channelDetailsIsOpen ? 362 : 0) + "px)" : '';
 }, function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.borderRadius || '18px';
 });
-var LexicalWrapper = styled.div(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n\n  & .rich_text_editor {\n    width: 100%;\n    max-height: 80px;\n    min-height: 20px;\n    display: block;\n    border: none;\n    box-sizing: border-box;\n    outline: none !important;\n    border-radius: ", ";\n    background-color: ", ";\n    padding: ", ";\n    color: ", ";\n    order: ", ";\n    overflow-y: auto;\n    overflow-x: hidden;\n    scrollbar-width: none;\n    scrollbar-color: transparent transparent;\n    overscroll-behavior: none;\n\n    @supports (overflow: overlay) {\n      overflow-y: overlay;\n    }\n\n    &::-webkit-scrollbar {\n      width: 8px;\n      background: transparent;\n    }\n    &::-webkit-scrollbar-thumb {\n      background: transparent;\n    }\n\n    &.show-scrollbar::-webkit-scrollbar-thumb {\n      background: ", ";\n      border-radius: 4px;\n    }\n    &.show-scrollbar::-webkit-scrollbar-track {\n      background: transparent;\n    }\n\n    &.show-scrollbar {\n      scrollbar-width: thin;\n      scrollbar-color: ", " transparent;\n    }\n\n    & p {\n      font-size: 15px;\n      line-height: 20px;\n      color: ", ";\n    }\n\n    &::selection {\n      background-color: ", ";\n    }\n\n    & *::selection {\n      background-color: ", ";\n    }\n\n    & span::selection {\n      background-color: ", ";\n    }\n\n    &:empty:before {\n      content: attr(data-placeholder);\n    }\n\n    & .content_editable_input {\n      border: none !important;\n      outline: none !important;\n    }\n\n    & .mention {\n      color: ", ";\n      background-color: inherit !important;\n      user-modify: read-only;\n    }\n\n    & span.bold {\n      font-weight: bold;\n    }\n\n    & .editor_paragraph {\n      margin: 0;\n    }\n\n    & .text_bold {\n      font-weight: 600;\n    }\n\n    & .text_italic {\n      font-style: italic;\n    }\n\n    & .text_underline {\n      text-decoration: underline;\n    }\n\n    & .text_strikethrough {\n      text-decoration: line-through;\n    }\n\n    & .text_underlineStrikethrough {\n      text-decoration: underline line-through;\n    }\n\n    & code {\n      font-family: inherit;\n      letter-spacing: 4px;\n    }\n  }\n"])), function (props) {
+var LexicalWrapper = styled.div(_templateObject13$6 || (_templateObject13$6 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n\n  & .rich_text_editor {\n    width: 100%;\n    max-height: 80px;\n    min-height: 20px;\n    display: block;\n    border: none;\n    box-sizing: border-box;\n    outline: none !important;\n    border-radius: ", ";\n    background-color: ", ";\n    padding: ", ";\n    color: ", ";\n    order: ", ";\n    overflow-y: auto;\n    overflow-x: hidden;\n    scrollbar-width: none;\n    scrollbar-color: transparent transparent;\n    overscroll-behavior: none;\n\n    @supports (overflow: overlay) {\n      overflow-y: overlay;\n    }\n\n    &::-webkit-scrollbar {\n      width: 8px;\n      background: transparent;\n    }\n    &::-webkit-scrollbar-thumb {\n      background: transparent;\n    }\n\n    &.show-scrollbar::-webkit-scrollbar-thumb {\n      background: ", ";\n      border-radius: 4px;\n    }\n    &.show-scrollbar::-webkit-scrollbar-track {\n      background: transparent;\n    }\n\n    &.show-scrollbar {\n      scrollbar-width: thin;\n      scrollbar-color: ", " transparent;\n    }\n\n    & p {\n      font-size: 15px;\n      line-height: 20px;\n      color: ", ";\n    }\n\n    &::selection {\n      background-color: ", ";\n    }\n\n    & *::selection {\n      background-color: ", ";\n    }\n\n    & span::selection {\n      background-color: ", ";\n    }\n\n    &:empty:before {\n      content: attr(data-placeholder);\n    }\n\n    & .content_editable_input {\n      border: none !important;\n      outline: none !important;\n    }\n\n    & .mention {\n      color: ", ";\n      background-color: inherit !important;\n      user-select: text;\n      -webkit-user-select: text;\n    }\n\n    & span.bold {\n      font-weight: bold;\n    }\n\n    & .editor_paragraph {\n      margin: 0;\n    }\n\n    & .text_bold {\n      font-weight: 600;\n    }\n\n    & .text_italic {\n      font-style: italic;\n    }\n\n    & .text_underline {\n      text-decoration: underline;\n    }\n\n    & .text_strikethrough {\n      text-decoration: line-through;\n    }\n\n    & .text_underlineStrikethrough {\n      text-decoration: underline line-through;\n    }\n\n    & code {\n      font-family: inherit;\n      letter-spacing: 4px;\n    }\n  }\n"])), function (props) {
   return props.borderRadius;
 }, function (props) {
   return props.backgroundColor;
@@ -54335,7 +54636,7 @@ var SendMessageButton = styled.span(_templateObject16$2 || (_templateObject16$2
   return !props.isCustomButton && "\n  display: flex;\n  height: " + (props.height ? props.height + "px" : '36px') + ";\n  align-items: center;\n  // margin: 0 8px 0 auto;\n  cursor: " + (props.isActive && 'pointer') + ";\n  line-height: 13px;\n  order: " + (props.order === 0 || props.order ? props.order : 4) + ";\n  -webkit-tap-highlight-color: transparent;\n\n  color: " + (props.isActive ? props.activeColor : props.color) + ";\n  & > svg {\n    color: " + props.iconColor + ";\n  }\n  ";
 });
 var AudioCont = styled.div(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  justify-content: flex-end;\n"])));
-var ChosenAttachments = styled.div(_templateObject18$2 || (_templateObject18$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 16px 16px 14px;\n  overflow-x: auto;\n\n  & ", " {\n    width: 100%;\n    height: 100%;\n    border-radius: 4px;\n    object-fit: cover;\n  }\n\n  & ", " {\n    width: 240px;\n    padding: 5px 12px;\n    border-radius: 8px;\n    height: 50px;\n  }\n"])), AttachmentImg, AttachmentFile$1);
+var ChosenAttachments = styled.div(_templateObject18$2 || (_templateObject18$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 16px 16px 14px;\n  overflow-x: auto;\n\n  & ", " {\n    width: 100%;\n    height: 100%;\n    border-radius: 4px;\n    object-fit: cover;\n  }\n\n  & ", " {\n    width: 240px;\n    padding: 5px;\n    border-radius: 8px;\n    height: 50px;\n  }\n"])), AttachmentImg, AttachmentFile$1);
 var TypingIndicator$1 = styled.div(_templateObject19$2 || (_templateObject19$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 100%;\n  left: 16px;\n"])));
 var TypingIndicatorCont = styled.div(_templateObject20$2 || (_templateObject20$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 12px;\n  gap: 4px;\n"])));
 var TypingFrom = styled.h5(_templateObject21$2 || (_templateObject21$2 = _taggedTemplateLiteralLoose(["\n  margin: 0 4px 0 0;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n  letter-spacing: -0.2px;\n  color: ", ";\n"])), function (props) {
@@ -54400,19 +54701,24 @@ var LinkPreviewContainer = styled.div(_templateObject39$1 || (_templateObject39$
   return props.isClosing ? linkPreviewSlideOut : linkPreviewSlideIn;
 });
 var LinkPreviewContent = styled.div(_templateObject40$1 || (_templateObject40$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 12px;\n  flex: 1;\n  overflow: hidden;\n"])));
-var LinkPreviewImage = styled.img(_templateObject41$1 || (_templateObject41$1 = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 40px;\n  object-fit: cover;\n  border-radius: 8px;\n  flex-shrink: 0;\n"])));
+var LinkPreviewImage = styled.img(_templateObject41$1 || (_templateObject41$1 = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 40px;\n  object-fit: cover;\n  border-radius: 4px;\n  flex-shrink: 0;\n  margin-right: 8px;\n  background: ", ";\n"])), function (props) {
+  return props.bg;
+});
 var LinkPreviewIcon = styled(SvgLinkIcon)(_templateObject42 || (_templateObject42 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  rect {\n    fill: ", ";\n    fill-opacity: 1;\n  }\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.bg;
 });
-var LinkPreviewTextContent = styled.div(_templateObject43 || (_templateObject43 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  overflow: hidden;\n  flex: 1;\n  justify-content: center;\n  ", "\n"])), function (props) {
+var LinkPreviewIconWrapper = styled.div(_templateObject43 || (_templateObject43 = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 40px;\n  border-radius: 4px;\n  margin-right: 8px;\n  background: ", ";\n"])), function (props) {
+  return props.bg;
+});
+var LinkPreviewTextContent = styled.div(_templateObject44 || (_templateObject44 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  overflow: hidden;\n  flex: 1;\n  justify-content: center;\n  ", "\n"])), function (props) {
   return props.hasImage ? '' : 'padding-left: 0;';
 });
-var LinkPreviewTitle = styled.div(_templateObject44 || (_templateObject44 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-family: Inter;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  letter-spacing: 0px;\n"])), function (props) {
+var LinkPreviewTitle = styled.div(_templateObject45 || (_templateObject45 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-family: Inter;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  letter-spacing: 0px;\n"])), function (props) {
   return props.color;
 });
-var LinkPreviewDescription = styled.div(_templateObject45 || (_templateObject45 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n"])), function (props) {
+var LinkPreviewDescription = styled.div(_templateObject46 || (_templateObject46 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n"])), function (props) {
   return props.color;
 });
 
@@ -55164,7 +55470,7 @@ var EmptyText = styled.div(_templateObject7$s || (_templateObject7$s = _taggedTe
 });
 var ChevronRightIconWrapper = styled.span(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  & > svg {\n    width: 16px;\n    height: 16px;\n    transform: rotate(-90deg);\n  }\n"])));
 
-var _templateObject$_, _templateObject2$V, _templateObject3$M, _templateObject4$F, _templateObject5$A, _templateObject6$w, _templateObject7$t, _templateObject8$q, _templateObject9$k, _templateObject0$i, _templateObject1$g, _templateObject10$d, _templateObject11$a, _templateObject12$7, _templateObject13$6, _templateObject14$5, _templateObject15$3, _templateObject16$3, _templateObject17$3, _templateObject18$3, _templateObject19$3, _templateObject20$3;
+var _templateObject$_, _templateObject2$V, _templateObject3$M, _templateObject4$F, _templateObject5$A, _templateObject6$w, _templateObject7$t, _templateObject8$q, _templateObject9$k, _templateObject0$i, _templateObject1$g, _templateObject10$d, _templateObject11$a, _templateObject12$8, _templateObject13$7, _templateObject14$5, _templateObject15$3, _templateObject16$3, _templateObject17$3, _templateObject18$3, _templateObject19$3, _templateObject20$3;
 var Actions = function Actions(_ref) {
   var _getDisappearingSetti;
   var setActionsHeight = _ref.setActionsHeight,
@@ -55245,12 +55551,14 @@ var Actions = function Actions(_ref) {
     commonGroupsTextColor = _ref.commonGroupsTextColor,
     showGroupsInCommon = _ref.showGroupsInCommon;
   var _useColor = useColors(),
+    accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
     surface1 = _useColor[THEME_COLORS.SURFACE_1],
     warningColor = _useColor[THEME_COLORS.WARNING],
-    backgroundColor = _useColor[THEME_COLORS.BACKGROUND];
+    backgroundColor = _useColor[THEME_COLORS.BACKGROUND],
+    textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY];
   var ChatClient = getClient();
   var user = ChatClient.user;
   var _useState = useState(false),
@@ -55263,35 +55571,39 @@ var Actions = function Actions(_ref) {
     leaveChannelPopupOpen = _useState3[0],
     setLeaveChannelPopupOpen = _useState3[1];
   var _useState4 = useState(false),
-    deleteChannelPopupOpen = _useState4[0],
-    setDeleteChannelPopupOpen = _useState4[1];
+    leaveChannelOfflinePopupOpen = _useState4[0],
+    setLeaveChannelOfflinePopupOpen = _useState4[1];
   var _useState5 = useState(false),
-    blockChannelPopupOpen = _useState5[0],
-    setBlockChannelPopupOpen = _useState5[1];
+    deleteChannelPopupOpen = _useState5[0],
+    setDeleteChannelPopupOpen = _useState5[1];
   var _useState6 = useState(false),
-    blockUserPopupOpen = _useState6[0],
-    setBlockUserPopupOpen = _useState6[1];
+    blockChannelPopupOpen = _useState6[0],
+    setBlockChannelPopupOpen = _useState6[1];
   var _useState7 = useState(false),
-    unblockUserPopupOpen = _useState7[0],
-    setUnblockUserPopupOpen = _useState7[1];
+    blockUserPopupOpen = _useState7[0],
+    setBlockUserPopupOpen = _useState7[1];
   var _useState8 = useState(false),
-    reportUserPopupOpen = _useState8[0],
-    setReportUserPopupOpen = _useState8[1];
+    unblockUserPopupOpen = _useState8[0],
+    setUnblockUserPopupOpen = _useState8[1];
   var _useState9 = useState(false),
-    disappearingMessagesPopupOpen = _useState9[0],
-    setDisappearingMessagesPopupOpen = _useState9[1];
+    reportUserPopupOpen = _useState9[0],
+    setReportUserPopupOpen = _useState9[1];
   var _useState0 = useState(false),
-    groupsInCommonPopupOpen = _useState0[0],
-    setGroupsInCommonPopupOpen = _useState0[1];
+    disappearingMessagesPopupOpen = _useState0[0],
+    setDisappearingMessagesPopupOpen = _useState0[1];
+  var _useState1 = useState(false),
+    groupsInCommonPopupOpen = _useState1[0],
+    setGroupsInCommonPopupOpen = _useState1[1];
   var _usePermissions = usePermissions(channel.userRole),
     checkActionPermission = _usePermissions[0];
-  var _useState1 = useState(''),
-    popupButtonText = _useState1[0],
-    setPopupButtonText = _useState1[1];
   var _useState10 = useState(''),
-    popupTitle = _useState10[0],
-    setPopupTitle = _useState10[1];
+    popupButtonText = _useState10[0],
+    setPopupButtonText = _useState10[1];
+  var _useState11 = useState(''),
+    popupTitle = _useState11[0],
+    setPopupTitle = _useState11[1];
   var dispatch = useDispatch();
+  var connectionStatus = useSelector(connectionStatusSelector);
   var oneHour = 60 * 60 * 1000;
   var twoHours = oneHour * 2;
   var oneDay = oneHour * 24;
@@ -55336,6 +55648,10 @@ var Actions = function Actions(_ref) {
     }
   };
   var handleLeaveChannel = function handleLeaveChannel() {
+    if (connectionStatus !== CONNECTION_STATUS.CONNECTED) {
+      setLeaveChannelOfflinePopupOpen(true);
+      return;
+    }
     dispatch(leaveChannelAC(channel.id));
   };
   var handleDeleteChannel = function handleDeleteChannel() {
@@ -55637,7 +55953,37 @@ var Actions = function Actions(_ref) {
     buttonText: popupButtonText,
     description: channel.type === DEFAULT_CHANNEL_TYPE.GROUP || channel.type === DEFAULT_CHANNEL_TYPE.PRIVATE ? 'Once you leave this group it will be removed for you along with its entire history.' : 'Once you leave this channel it will be removed for you along with its entire history.',
     title: popupTitle
-  })), deleteChannelPopupOpen && (/*#__PURE__*/React__default.createElement(ConfirmPopup, {
+  })), leaveChannelOfflinePopupOpen && (/*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
+    backgroundColor: backgroundColor,
+    maxWidth: '520px',
+    minWidth: '520px',
+    padding: '0'
+  }, /*#__PURE__*/React__default.createElement(PopupBody, {
+    paddingH: '24px',
+    paddingV: '24px'
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, {
+    color: iconPrimary,
+    onClick: function onClick() {
+      return setLeaveChannelOfflinePopupOpen(false);
+    }
+  }), /*#__PURE__*/React__default.createElement(PopupName, {
+    color: textPrimary,
+    isDelete: true,
+    marginBottom: '20px'
+  }, "Failed to leave group"), /*#__PURE__*/React__default.createElement(PopupDescription, {
+    color: textPrimary,
+    highlightColor: textSecondary
+  }, "You\u2019re offline. Reconnect and try again.")), /*#__PURE__*/React__default.createElement(PopupFooter, {
+    backgroundColor: surface1
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    type: 'button',
+    backgroundColor: accentColor,
+    color: textOnPrimary,
+    borderRadius: '8px',
+    onClick: function onClick() {
+      return setLeaveChannelOfflinePopupOpen(false);
+    }
+  }, "Close"))))), deleteChannelPopupOpen && (/*#__PURE__*/React__default.createElement(ConfirmPopup, {
     handleFunction: handleDeleteChannel,
     togglePopup: handleToggleDeleteChannelPopupOpen,
     buttonText: popupButtonText,
@@ -55701,8 +56047,8 @@ var DefaultMarkAsRead = styled(SvgMarkAsRead)(_templateObject0$i || (_templateOb
 var DefaultMarkAsUnRead = styled(SvgMarkAsUnRead)(_templateObject1$g || (_templateObject1$g = _taggedTemplateLiteralLoose([""])));
 var DefaultBlockIcon = styled(SvgBlockChannel)(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose([""])));
 var DefaultReportIcon = styled(SvgReport)(_templateObject11$a || (_templateObject11$a = _taggedTemplateLiteralLoose([""])));
-var DefaultClearIcon = styled(SvgClear)(_templateObject12$7 || (_templateObject12$7 = _taggedTemplateLiteralLoose([""])));
-var DefaultDeleteChannelIcon = styled(SvgDeleteChannel)(_templateObject13$6 || (_templateObject13$6 = _taggedTemplateLiteralLoose([""])));
+var DefaultClearIcon = styled(SvgClear)(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose([""])));
+var DefaultDeleteChannelIcon = styled(SvgDeleteChannel)(_templateObject13$7 || (_templateObject13$7 = _taggedTemplateLiteralLoose([""])));
 var DefaultBottomIcon = styled(SvgBottom)(_templateObject14$5 || (_templateObject14$5 = _taggedTemplateLiteralLoose([""])));
 var DefaultMarkAsReadIcon = styled(SvgLeave)(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteralLoose([""])));
 var DefaultWatchIcon = styled(SvgWatch)(_templateObject16$3 || (_templateObject16$3 = _taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n\n  path.watch-ticks,\n  path:nth-child(2) {\n    fill: ", " !important;\n  }\n"])), function (props) {
@@ -55891,7 +56237,7 @@ function SvgDownloadFile(props) {
   })));
 }
 
-var _templateObject$10, _templateObject2$X, _templateObject3$O, _templateObject4$H, _templateObject5$C, _templateObject6$y, _templateObject7$v, _templateObject8$s, _templateObject9$m, _templateObject0$k, _templateObject1$h, _templateObject10$e, _templateObject11$b, _templateObject12$8, _templateObject13$7, _templateObject14$6, _templateObject15$4;
+var _templateObject$10, _templateObject2$X, _templateObject3$O, _templateObject4$H, _templateObject5$C, _templateObject6$y, _templateObject7$v, _templateObject8$s, _templateObject9$m, _templateObject0$k, _templateObject1$h, _templateObject10$e, _templateObject11$b, _templateObject12$9, _templateObject13$8, _templateObject14$6, _templateObject15$4;
 var Files = function Files(_ref) {
   var channelId = _ref.channelId,
     filePreviewIcon = _ref.filePreviewIcon,
@@ -56106,12 +56452,12 @@ var FileIconCont = styled.span(_templateObject11$b || (_templateObject11$b = _ta
 }, function (props) {
   return props.fillColor;
 });
-var FileHoverIconCont = styled.span(_templateObject12$8 || (_templateObject12$8 = _taggedTemplateLiteralLoose(["\n  display: none;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+var FileHoverIconCont = styled.span(_templateObject12$9 || (_templateObject12$9 = _taggedTemplateLiteralLoose(["\n  display: none;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var FileThumb = styled.img(_templateObject13$7 || (_templateObject13$7 = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 40px;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  object-fit: cover;\n"])));
+var FileThumb = styled.img(_templateObject13$8 || (_templateObject13$8 = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 40px;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  object-fit: cover;\n"])));
 var FileItem = styled.div(_templateObject14$6 || (_templateObject14$6 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 11px 16px;\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  transition: all 0.2s;\n  div {\n    margin-left: 7px;\n    width: calc(100% - 48px);\n  }\n  &:hover {\n    background-color: ", ";\n    ", " {\n      visibility: visible;\n    }\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n"])), function (props) {
   return props.hoverBackgroundColor;
 }, DownloadWrapper, FileIconCont, FileHoverIconCont);
@@ -56800,7 +57146,7 @@ function ResetLinkConfirmModal(_ref) {
   });
 }
 
-var _templateObject$16, _templateObject2$11, _templateObject3$U, _templateObject4$M, _templateObject5$H, _templateObject6$C, _templateObject7$z, _templateObject8$w, _templateObject9$p, _templateObject0$m, _templateObject1$i, _templateObject10$f, _templateObject11$c, _templateObject12$9, _templateObject13$8;
+var _templateObject$16, _templateObject2$11, _templateObject3$U, _templateObject4$M, _templateObject5$H, _templateObject6$C, _templateObject7$z, _templateObject8$w, _templateObject9$p, _templateObject0$m, _templateObject1$i, _templateObject10$f, _templateObject11$c, _templateObject12$a, _templateObject13$9;
 function loadImage$1(src) {
   return new Promise(function (resolve, reject) {
     var img = document.createElement('img');
@@ -57417,16 +57763,16 @@ var Switch = styled.div(_templateObject10$f || (_templateObject10$f = _taggedTem
   return p.active ? '22px' : '3px';
 });
 var ResetLink = styled.button(_templateObject11$c || (_templateObject11$c = _taggedTemplateLiteralLoose(["\n  margin-top: 12px;\n  border: none;\n  background: transparent;\n  color: #ff4d4f;\n  cursor: pointer;\n"])));
-var QRCodeBox = styled.div(_templateObject12$9 || (_templateObject12$9 = _taggedTemplateLiteralLoose(["\n  border-radius: 8px;\n  border: 1px solid ", ";\n  background-color: ", ";\n  display: flex;\n  width: max-content;\n  padding: 13.5px;\n  margin: auto;\n  position: relative;\n"])), function (p) {
+var QRCodeBox = styled.div(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n  border-radius: 8px;\n  border: 1px solid ", ";\n  background-color: ", ";\n  display: flex;\n  width: max-content;\n  padding: 13.5px;\n  margin: auto;\n  position: relative;\n"])), function (p) {
   return p.borderColor;
 }, function (p) {
   return p.backgroundColor;
 });
-var QrHint = styled.p(_templateObject13$8 || (_templateObject13$8 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n  margin: 12px 0 0;\n"])), function (p) {
+var QrHint = styled.p(_templateObject13$9 || (_templateObject13$9 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n  margin: 12px 0 0;\n"])), function (p) {
   return p.color;
 });
 
-var _templateObject$17, _templateObject2$12, _templateObject3$V, _templateObject4$N, _templateObject5$I, _templateObject6$D, _templateObject7$A, _templateObject8$x, _templateObject9$q, _templateObject0$n, _templateObject1$j, _templateObject10$g, _templateObject11$d, _templateObject12$a, _templateObject13$9;
+var _templateObject$17, _templateObject2$12, _templateObject3$V, _templateObject4$N, _templateObject5$I, _templateObject6$D, _templateObject7$A, _templateObject8$x, _templateObject9$q, _templateObject0$n, _templateObject1$j, _templateObject10$g, _templateObject11$d, _templateObject12$b, _templateObject13$a;
 var Members = function Members(_ref) {
   var _members$find;
   var channel = _ref.channel,
@@ -57784,12 +58130,12 @@ var SkeletonBlock$5 = styled.div(_templateObject0$n || (_templateObject0$n = _ta
 var SkeletonMemberRow = styled.div(_templateObject1$j || (_templateObject1$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 6px 16px;\n  gap: 12px;\n  height: 56px;\n"])));
 var SkeletonAvatar$1 = styled(SkeletonBlock$5)(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  flex-shrink: 0;\n"])));
 var SkeletonTextGroup$2 = styled.div(_templateObject11$d || (_templateObject11$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
-var SkeletonLine$4 = styled(SkeletonBlock$5)(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  border-radius: 7px;\n"])), function (p) {
+var SkeletonLine$4 = styled(SkeletonBlock$5)(_templateObject12$b || (_templateObject12$b = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  border-radius: 7px;\n"])), function (p) {
   return p.width;
 }, function (p) {
   return p.height || '14px';
 });
-var RoleBadge = styled.span(_templateObject13$9 || (_templateObject13$9 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 2px 8px;\n  border-radius: 12px;\n  margin-left: 4px;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 16px;\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: 12px;\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n    opacity: 0.1;\n  }\n"])), function (props) {
+var RoleBadge = styled.span(_templateObject13$a || (_templateObject13$a = _taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 2px 8px;\n  border-radius: 12px;\n  margin-left: 4px;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 16px;\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: 12px;\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n    opacity: 0.1;\n  }\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.backgroundColor;
@@ -58769,7 +59115,7 @@ function SvgChevronDownSearch(props) {
   })));
 }
 
-var _templateObject$1b, _templateObject2$16, _templateObject3$Y, _templateObject4$Q, _templateObject5$K, _templateObject6$F, _templateObject7$C, _templateObject8$z, _templateObject9$s, _templateObject0$p, _templateObject1$l, _templateObject10$i, _templateObject11$f, _templateObject12$b, _templateObject13$a, _templateObject14$7, _templateObject15$5, _templateObject16$4, _templateObject17$4, _templateObject18$4, _templateObject19$4, _templateObject20$4, _templateObject21$3, _templateObject22$2, _templateObject23$2, _templateObject24$2, _templateObject25$2;
+var _templateObject$1b, _templateObject2$16, _templateObject3$Y, _templateObject4$Q, _templateObject5$K, _templateObject6$F, _templateObject7$C, _templateObject8$z, _templateObject9$s, _templateObject0$p, _templateObject1$l, _templateObject10$i, _templateObject11$f, _templateObject12$c, _templateObject13$b, _templateObject14$7, _templateObject15$5, _templateObject16$4, _templateObject17$4, _templateObject18$4, _templateObject19$4, _templateObject20$4, _templateObject21$3, _templateObject22$2, _templateObject23$2, _templateObject24$2, _templateObject25$2;
 var SEARCH_DEBOUNCE_MS = 400;
 function formatMessageDate(date) {
   if (!date) return '';
@@ -59211,8 +59557,8 @@ var StatusText$1 = styled.p(_templateObject11$f || (_templateObject11$f = _tagge
 }, function (props) {
   return props.full ? 'height: 100%;' : '';
 });
-var GroupSection = styled.div(_templateObject12$b || (_templateObject12$b = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var GroupLabel = styled.div(_templateObject13$a || (_templateObject13$a = _taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  background-color: ", ";\n  text-transform: capitalize;\n  letter-spacing: 0.5px;\n  color: ", ";\n  padding: 12px 16px 4px;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  user-select: none;\n"])), function (p) {
+var GroupSection = styled.div(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var GroupLabel = styled.div(_templateObject13$b || (_templateObject13$b = _taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  background-color: ", ";\n  text-transform: capitalize;\n  letter-spacing: 0.5px;\n  color: ", ";\n  padding: 12px 16px 4px;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  user-select: none;\n"])), function (p) {
   return p.backgroundColor;
 }, function (p) {
   return p.color;