sceyt-chat-react-uikit 1.9.0-beta.9 → 1.9.0

package/index.js

@@ -11139,7 +11139,7 @@ var compressAndCacheImage = function compressAndCacheImage(url, cacheKey, maxWid
 
 var bytesToSize = function bytesToSize(bytes, decimals) {
   if (decimals === void 0) {
-    decimals = 2;
+    decimals = 1;
   }
   if (bytes === 0) return '0 Bytes';
   var k = 1000;
@@ -11495,6 +11495,11 @@ var clearVideoPreparation = function clearVideoPreparation(tid) {
   }
   preparations["delete"](tid);
 };
+var beginAttachmentPreparation = beginVideoPreparation;
+var completeAttachmentPreparation = completeVideoPreparation;
+var failAttachmentPreparation = failVideoPreparation;
+var waitForAttachmentPreparation = waitForVideoPreparation;
+var clearAttachmentPreparation = clearVideoPreparation;
 
 var LOAD_LATEST_MESSAGES = 'LOAD_LATEST_MESSAGES';
 var LOAD_AROUND_MESSAGE = 'LOAD_AROUND_MESSAGE';
@@ -13434,6 +13439,21 @@ function addReactionToMessageOnMap(channelId, message, reaction, isSelf) {
     });
   }
 }
+var removeReactionFromTotals = function removeReactionFromTotals(reactionTotals, reactionKey) {
+  if (reactionTotals === void 0) {
+    reactionTotals = [];
+  }
+  return reactionTotals.reduce(function (totals, reactionTotal) {
+    if (reactionTotal.key !== reactionKey) {
+      totals.push(reactionTotal);
+    } else if (reactionTotal.count > 1) {
+      totals.push(_extends({}, reactionTotal, {
+        count: reactionTotal.count - 1
+      }));
+    }
+    return totals;
+  }, []);
+};
 function removeReactionToMessageOnMap(channelId, message, reaction, isSelf) {
   if (messagesMap[channelId]) {
     var messageShouldBeUpdated = messagesMap[channelId][message.id];
@@ -13450,7 +13470,7 @@ function removeReactionToMessageOnMap(channelId, message, reaction, isSelf) {
       delete messagesMap[channelId][message.tid];
     }
     messagesMap[channelId][message.id || message.tid] = _extends({}, messageShouldBeUpdated, {
-      reactionTotals: message.reactionTotals || messageShouldBeUpdated.reactionTotals || [],
+      reactionTotals: removeReactionFromTotals(messageShouldBeUpdated.reactionTotals, reaction.key),
       userReactions: userReactions
     });
   }
@@ -13744,9 +13764,10 @@ var hydrateDraftMessages = function hydrateDraftMessages() {
             type: data.type || attachment.mimeType || 'application/octet-stream',
             lastModified: attachment.lastModified || Date.now()
           }) : data;
+          var canRestorePreviewUrl = attachment.type === attachmentTypes.image || attachment.type === attachmentTypes.video || attachment.type === attachmentTypes.voice;
           return _extends({}, attachment, {
             data: restoredData,
-            attachmentUrl: restoredData instanceof Blob && typeof URL !== 'undefined' ? URL.createObjectURL(restoredData) : attachment.attachmentUrl
+            attachmentUrl: canRestorePreviewUrl && restoredData instanceof Blob && typeof URL !== 'undefined' ? URL.createObjectURL(restoredData) : undefined
           });
         });
         draftMessagesMap[channelId] = _extends({}, draft, {
@@ -14203,7 +14224,7 @@ var messageSlice = createSlice({
             });
           }
           return _extends({}, msg, {
-            reactionTotals: message.reactionTotals || msg.reactionTotals || [],
+            reactionTotals: removeReactionFromTotals(msg.reactionTotals, reaction.key),
             userReactions: userReactions
           });
         }
@@ -14321,6 +14342,7 @@ var messageSlice = createSlice({
     },
     requestPinnedMessagesListClose: function requestPinnedMessagesListClose(state) {
       if (state.pinnedMessagesListOpen) {
+        state.pinnedMessagesListOpen = false;
         state.pinnedMessagesListCloseRequested = true;
       }
     },
@@ -17508,12 +17530,15 @@ var hasLivePendingAttachment = function hasLivePendingAttachment(message) {
 var retractDeletedPendingMessage = function retractDeletedPendingMessage(channel, messageId) {
   return channel.deleteMessageById(messageId, false);
 };
-var applyPreparedVideoAttachments = function applyPreparedVideoAttachments(attachments) {
+var applyPreparedMediaAttachments = function applyPreparedMediaAttachments(attachments, clearPreparation) {
+  if (clearPreparation === void 0) {
+    clearPreparation = true;
+  }
   try {
     return Promise.resolve(Promise.all(attachments.map(function (attachment) {
       try {
         if (!attachment.tid) return Promise.resolve();
-        return Promise.resolve(waitForVideoPreparation(attachment.tid, VIDEO_PREPARATION_TIMEOUT_MS)).then(function (prepared) {
+        return Promise.resolve(waitForAttachmentPreparation(attachment.tid, VIDEO_PREPARATION_TIMEOUT_MS)).then(function (prepared) {
           if ((prepared === null || prepared === void 0 ? void 0 : prepared.status) === 'ready' && prepared.metadata) {
             attachment.url = prepared.file;
             attachment.data = prepared.file;
@@ -17522,7 +17547,9 @@ var applyPreparedVideoAttachments = function applyPreparedVideoAttachments(attac
             attachment.metadata = prepared.metadata;
             attachment.videoPreviewBlob = prepared.videoPreviewBlob;
           }
-          clearVideoPreparation(attachment.tid);
+          if (clearPreparation) {
+            clearAttachmentPreparation(attachment.tid);
+          }
         });
       } catch (e) {
         return Promise.reject(e);
@@ -18461,7 +18488,7 @@ function sendMessage(action) {
         }) : [];
         customUploader = getCustomUploader();
         if (!(message.attachments && message.attachments.length)) {
-          _context13.n = 16;
+          _context13.n = 14;
           break;
         }
         linkAttachment = null;
@@ -18474,7 +18501,7 @@ function sendMessage(action) {
           return att.type !== attachmentTypes.link;
         });
         if (!(mediaAttachments && mediaAttachments.length)) {
-          _context13.n = 12;
+          _context13.n = 10;
           break;
         }
         _loop2 = /*#__PURE__*/_regenerator().m(function _callee3() {
@@ -18628,68 +18655,53 @@ function sendMessage(action) {
                 if (customUploader) {
                   messageAttachment.url = attachment.data;
                 }
-                if (!sendAttachmentsAsSeparateMessage) {
-                  _context11.n = 3;
-                  break;
-                }
-                _messageBuilder = channel.createMessageBuilder();
-                _messageBuilder.setBody(i === 0 ? message.body : '').setAttachments([]).setBodyAttributes(i === 0 ? message.bodyAttributes : {}).setMentionUserIds(i === 0 ? mentionedUserIds : []).setType(message.type).setDisplayCount(message.type === exports.MESSAGE_TYPE.SYSTEM ? 0 : 1).setSilent(message.type === exports.MESSAGE_TYPE.SYSTEM).setMetadata(i === 0 ? JSON.stringify(message.metadata) : '');
-                if (channel.type === DEFAULT_CHANNEL_TYPE.DIRECT) {
-                  _messageBuilder.setDisableMentionsCount(true);
-                }
-                if (message.parentMessage) {
-                  _messageBuilder.setParentMessageId(message.parentMessage ? message.parentMessage.id : null);
-                }
-                if (message.repliedInThread) {
-                  _messageBuilder.setReplyInThread();
-                }
-                if (i === 0 && canBeViewOnce(message)) {
-                  _messageBuilder.setViewOnce(true);
-                  _messageBuilder.setType(exports.MESSAGE_TYPE.VIEW_ONCE);
-                }
-                _messageToSend = action.type === RESEND_MESSAGE ? action.payload.message : _messageBuilder.create();
-                _sourceFile = getAttachmentSourceFile(attachment);
-                if (messageAttachment.tid && _sourceFile) {
-                  setPendingAttachment(messageAttachment.tid, {
-                    file: _sourceFile,
-                    messageTid: _messageToSend.tid,
-                    channelId: channel.id
+                if (sendAttachmentsAsSeparateMessage) {
+                  _messageBuilder = channel.createMessageBuilder();
+                  _messageBuilder.setBody(i === 0 ? message.body : '').setAttachments([]).setBodyAttributes(i === 0 ? message.bodyAttributes : {}).setMentionUserIds(i === 0 ? mentionedUserIds : []).setType(message.type).setDisplayCount(message.type === exports.MESSAGE_TYPE.SYSTEM ? 0 : 1).setSilent(message.type === exports.MESSAGE_TYPE.SYSTEM).setMetadata(i === 0 ? JSON.stringify(message.metadata) : '');
+                  if (channel.type === DEFAULT_CHANNEL_TYPE.DIRECT) {
+                    _messageBuilder.setDisableMentionsCount(true);
+                  }
+                  if (message.parentMessage) {
+                    _messageBuilder.setParentMessageId(message.parentMessage ? message.parentMessage.id : null);
+                  }
+                  if (message.repliedInThread) {
+                    _messageBuilder.setReplyInThread();
+                  }
+                  if (i === 0 && canBeViewOnce(message)) {
+                    _messageBuilder.setViewOnce(true);
+                    _messageBuilder.setType(exports.MESSAGE_TYPE.VIEW_ONCE);
+                  }
+                  _messageToSend = action.type === RESEND_MESSAGE ? action.payload.message : _messageBuilder.create();
+                  _sourceFile = getAttachmentSourceFile(attachment);
+                  if (messageAttachment.tid && _sourceFile) {
+                    setPendingAttachment(messageAttachment.tid, {
+                      file: _sourceFile,
+                      messageTid: _messageToSend.tid,
+                      channelId: channel.id
+                    });
+                  }
+                  messageForSend = _extends({}, _messageToSend, {
+                    attachments: [messageAttachment],
+                    createdAt: new Date(Date.now())
                   });
+                  messagesToSend.push(messageForSend);
+                  _pending = _extends({}, messageForSend, {
+                    attachments: [attachment],
+                    createdAt: new Date(Date.now()),
+                    mentionedUsers: message.mentionedUsers,
+                    parentMessage: message.parentMessage || null
+                  });
+                  pendingMessages.push(_pending);
+                } else {
+                  attachmentsToSend.push(messageAttachment);
                 }
-                messageForSend = _extends({}, _messageToSend, {
-                  attachments: [messageAttachment],
-                  createdAt: new Date(Date.now())
-                });
-                messagesToSend.push(messageForSend);
-                _pending = _extends({}, messageForSend, {
-                  attachments: [attachment],
-                  createdAt: new Date(Date.now()),
-                  mentionedUsers: message.mentionedUsers,
-                  parentMessage: message.parentMessage || null
-                });
-                pendingMessages.push(_pending);
-                if (!(action.type !== RESEND_MESSAGE)) {
-                  _context11.n = 2;
-                  break;
-                }
-                _context11.n = 1;
-                return effects.call(loadOGMetadataForLinkMessages, [_pending], true);
-              case 1:
-                _context11.n = 2;
-                return effects.call(updateMessage$1, action.type, _pending, channel.id, true, message);
-              case 2:
-                _context11.n = 4;
-                break;
-              case 3:
-                attachmentsToSend.push(messageAttachment);
-              case 4:
                 if (!(!messageAttachment.cachedUrl && customUploader)) {
-                  _context11.n = 5;
+                  _context11.n = 1;
                   break;
                 }
-                _context11.n = 5;
+                _context11.n = 1;
                 return effects.put(updateAttachmentUploadingStateAC(messageAttachment.type === attachmentTypes.video ? UPLOAD_STATE.PREPARING : UPLOAD_STATE.UPLOADING, messageAttachment.tid));
-              case 5:
+              case 1:
                 return _context11.a(2);
             }
           }, _callee3);
@@ -18706,60 +18718,48 @@ function sendMessage(action) {
         _context13.n = 7;
         break;
       case 9:
-        if (sendAttachmentsAsSeparateMessage) {
-          _context13.n = 12;
-          break;
-        }
-        messageBuilder = channel.createMessageBuilder();
-        messageBuilder.setBody(message.body).setBodyAttributes(message.bodyAttributes).setAttachments(message.attachments).setMentionUserIds(mentionedUserIds).setType(message.type).setDisplayCount(message.type === exports.MESSAGE_TYPE.SYSTEM ? 0 : 1).setSilent(message.type === exports.MESSAGE_TYPE.SYSTEM).setMetadata(JSON.stringify(message.metadata));
-        if (channel.type === DEFAULT_CHANNEL_TYPE.DIRECT) {
-          messageBuilder.setDisableMentionsCount(true);
-        }
-        if (message.parentMessage) {
-          messageBuilder.setParentMessageId(message.parentMessage ? message.parentMessage.id : null);
-        }
-        if (message.repliedInThread) {
-          messageBuilder.setReplyInThread();
-        }
-        if (canBeViewOnce(message)) {
-          messageBuilder.setViewOnce(true);
-          messageBuilder.setType(exports.MESSAGE_TYPE.VIEW_ONCE);
-        }
-        messageToSend = action.type === RESEND_MESSAGE ? action.payload.message : messageBuilder.create();
-        attachmentsToSend.forEach(function (messageAttachment) {
-          var sourceFile = getAttachmentSourceFile(messageAttachment);
-          if (messageAttachment.tid && sourceFile) {
-            setPendingAttachment(messageAttachment.tid, {
-              file: sourceFile,
-              messageTid: messageToSend.tid,
-              channelId: channel.id
-            });
+        if (!sendAttachmentsAsSeparateMessage) {
+          messageBuilder = channel.createMessageBuilder();
+          messageBuilder.setBody(message.body).setBodyAttributes(message.bodyAttributes).setAttachments(message.attachments).setMentionUserIds(mentionedUserIds).setType(message.type).setDisplayCount(message.type === exports.MESSAGE_TYPE.SYSTEM ? 0 : 1).setSilent(message.type === exports.MESSAGE_TYPE.SYSTEM).setMetadata(JSON.stringify(message.metadata));
+          if (channel.type === DEFAULT_CHANNEL_TYPE.DIRECT) {
+            messageBuilder.setDisableMentionsCount(true);
           }
-        });
-        pending = _extends({}, messageToSend, {
-          attachments: message.attachments,
-          createdAt: new Date(Date.now()),
-          mentionedUsers: message.mentionedUsers,
-          parentMessage: message.parentMessage || null
-        });
-        pendingMessages.push(pending);
-        if (!(action.type !== RESEND_MESSAGE)) {
-          _context13.n = 11;
-          break;
+          if (message.parentMessage) {
+            messageBuilder.setParentMessageId(message.parentMessage ? message.parentMessage.id : null);
+          }
+          if (message.repliedInThread) {
+            messageBuilder.setReplyInThread();
+          }
+          if (canBeViewOnce(message)) {
+            messageBuilder.setViewOnce(true);
+            messageBuilder.setType(exports.MESSAGE_TYPE.VIEW_ONCE);
+          }
+          messageToSend = action.type === RESEND_MESSAGE ? action.payload.message : messageBuilder.create();
+          attachmentsToSend.forEach(function (messageAttachment) {
+            var sourceFile = getAttachmentSourceFile(messageAttachment);
+            if (messageAttachment.tid && sourceFile) {
+              setPendingAttachment(messageAttachment.tid, {
+                file: sourceFile,
+                messageTid: messageToSend.tid,
+                channelId: channel.id
+              });
+            }
+          });
+          pending = _extends({}, messageToSend, {
+            attachments: message.attachments,
+            createdAt: new Date(Date.now()),
+            mentionedUsers: message.mentionedUsers,
+            parentMessage: message.parentMessage || null
+          });
+          pendingMessages.push(pending);
+          messageToSend = _extends({}, messageToSend, {
+            attachments: attachmentsToSend
+          });
+          messagesToSend.push(messageToSend);
         }
-        _context13.n = 10;
-        return effects.call(loadOGMetadataForLinkMessages, [pending], true);
       case 10:
-        _context13.n = 11;
-        return effects.call(updateMessage$1, action.type, pending, channel.id, true, message);
-      case 11:
-        messageToSend = _extends({}, messageToSend, {
-          attachments: attachmentsToSend
-        });
-        messagesToSend.push(messageToSend);
-      case 12:
         _loop3 = /*#__PURE__*/_regenerator().m(function _callee4(_i2) {
-          var messageAttachment, messageToSend, pendingState, pendingAttachments, messageCopy, attachmentIndex, preparedVideoAttachment, _attachmentsToSend, linkAttachmentToSend, linkAttachmentBuilder, messageResponse, k, attachmentsToUpdate, currentAttachmentsMap, messageUpdateData, activeChannelId, messageToUpdate, resolvedLastMessage, channelUpdateParam, _channel2, _messageToSend2, isErrorResendable, _messageToSend$attach, _iterator2, _step2, att, _t, _t2;
+          var messageAttachment, messageToSend, pendingState, pendingMessage, pendingAttachments, messageCopy, attachmentIndex, preparedVideoAttachment, _attachmentsToSend, linkAttachmentToSend, linkAttachmentBuilder, messageResponse, k, attachmentsToUpdate, currentAttachmentsMap, messageUpdateData, activeChannelId, messageToUpdate, resolvedLastMessage, channelUpdateParam, _channel2, _messageToSend2, isErrorResendable, _messageToSend$attach, _iterator2, _step2, att, _t, _t2;
           return _regenerator().w(function (_context12) {
             while (1) switch (_context12.p = _context12.n) {
               case 0:
@@ -18782,10 +18782,6 @@ function sendMessage(action) {
                 messageToSend = _extends({}, messageToSend, pendingState);
               case 2:
                 _context12.p = 2;
-                if (!(connectionState === CONNECTION_STATUS.CONNECTED)) {
-                  _context12.n = 30;
-                  break;
-                }
                 if (!(messageToSend.tid && isPendingMessageDeleted(channel.id, messageToSend.tid))) {
                   _context12.n = 3;
                   break;
@@ -18793,83 +18789,108 @@ function sendMessage(action) {
                 return _context12.a(2, 0);
               case 3:
                 _context12.n = 4;
-                return effects.call(applyPreparedVideoAttachments, messageAttachment);
+                return effects.call(applyPreparedMediaAttachments, messageAttachment, connectionState === CONNECTION_STATUS.CONNECTED);
               case 4:
-                pendingAttachments = messageAttachment.map(function (attachment) {
-                  return _extends({}, attachment, {
-                    data: attachment.data || attachment.url
+                pendingMessage = pendingMessages[_i2];
+                pendingAttachments = pendingMessage.attachments.map(function (pendingAttachment) {
+                  var preparedAttachment = messageAttachment.find(function (attachment) {
+                    return attachment.tid === pendingAttachment.tid;
                   });
+                  return preparedAttachment ? _extends({}, pendingAttachment, preparedAttachment, {
+                    data: preparedAttachment.data || preparedAttachment.url
+                  }) : pendingAttachment;
                 });
+                pendingMessage.attachments = pendingAttachments;
+                if (!(action.type !== RESEND_MESSAGE)) {
+                  _context12.n = 6;
+                  break;
+                }
+                _context12.n = 5;
+                return effects.call(loadOGMetadataForLinkMessages, [pendingMessage], true);
+              case 5:
+                _context12.n = 6;
+                return effects.call(updateMessage$1, action.type, pendingMessage, channel.id, true, message);
+              case 6:
+                if (!(connectionState === CONNECTION_STATUS.CONNECTED)) {
+                  _context12.n = 33;
+                  break;
+                }
+                if (!(messageToSend.tid && isPendingMessageDeleted(channel.id, messageToSend.tid))) {
+                  _context12.n = 7;
+                  break;
+                }
+                return _context12.a(2, 0);
+              case 7:
                 updateMessageOnMap(channel.id, {
                   messageId: messageToSend.tid,
                   params: {
                     attachments: pendingAttachments
                   }
                 });
-                _context12.n = 5;
+                _context12.n = 8;
                 return effects.put(updateMessageAC(messageToSend.tid, {
                   attachments: pendingAttachments
                 }));
-              case 5:
+              case 8:
                 messageCopy = JSON.parse(JSON.stringify(messagesToSend[_i2]));
                 if (!(messageToSend.tid && isPendingMessageDeleted(channel.id, messageToSend.tid))) {
-                  _context12.n = 6;
+                  _context12.n = 9;
                   break;
                 }
                 return _context12.a(2, 0);
-              case 6:
+              case 9:
                 if (customUploader) {
-                  _context12.n = 10;
+                  _context12.n = 13;
                   break;
                 }
                 attachmentIndex = 0;
-              case 7:
+              case 10:
                 if (!(attachmentIndex < messageAttachment.length)) {
-                  _context12.n = 10;
+                  _context12.n = 13;
                   break;
                 }
                 if (!(messageAttachment[attachmentIndex].type === attachmentTypes.video)) {
-                  _context12.n = 9;
+                  _context12.n = 12;
                   break;
                 }
-                _context12.n = 8;
+                _context12.n = 11;
                 return effects.call(prepareAndUploadVideoPreview, messageAttachment[attachmentIndex], message.type);
-              case 8:
+              case 11:
                 preparedVideoAttachment = _context12.v;
                 messageAttachment[attachmentIndex] = _extends({}, messageAttachment[attachmentIndex], preparedVideoAttachment);
                 if (!messageAttachment[attachmentIndex].upload) {
-                  _context12.n = 9;
+                  _context12.n = 12;
                   break;
                 }
-                _context12.n = 9;
+                _context12.n = 12;
                 return effects.put(updateAttachmentUploadingStateAC(UPLOAD_STATE.UPLOADING, messageAttachment[attachmentIndex].tid));
-              case 9:
+              case 12:
                 attachmentIndex++;
-                _context12.n = 7;
+                _context12.n = 10;
                 break;
-              case 10:
+              case 13:
                 if (!(messageToSend.tid && isPendingMessageDeleted(channel.id, messageToSend.tid))) {
-                  _context12.n = 11;
+                  _context12.n = 14;
                   break;
                 }
                 return _context12.a(2, 0);
-              case 11:
+              case 14:
                 _attachmentsToSend = messageAttachment;
                 if (!customUploader) {
-                  _context12.n = 13;
+                  _context12.n = 16;
                   break;
                 }
-                _context12.n = 12;
+                _context12.n = 15;
                 return effects.call(handleUploadAttachments, messageAttachment || [], messageCopy, channel);
-              case 12:
+              case 15:
                 _attachmentsToSend = _context12.v;
-              case 13:
+              case 16:
                 if (!(messageToSend.tid && isPendingMessageDeleted(channel.id, messageToSend.tid))) {
-                  _context12.n = 14;
+                  _context12.n = 17;
                   break;
                 }
                 return _context12.a(2, 0);
-              case 14:
+              case 17:
                 linkAttachmentToSend = null;
                 if (_i2 === 0 && linkAttachment) {
                   linkAttachmentBuilder = channel.createAttachmentBuilder(linkAttachment.data, linkAttachment.type);
@@ -18884,61 +18905,61 @@ function sendMessage(action) {
                     attachments: [].concat(_attachmentsToSend)
                   });
                 }
-                _context12.n = 15;
+                _context12.n = 18;
                 return effects.call(channel.sendMessage, messageToSend);
-              case 15:
+              case 18:
                 messageResponse = _context12.v;
                 if (!(messageToSend.tid && isPendingMessageDeleted(channel.id, messageToSend.tid))) {
-                  _context12.n = 20;
+                  _context12.n = 23;
                   break;
                 }
                 if (!(messageResponse !== null && messageResponse !== void 0 && messageResponse.id && typeof channel.deleteMessageById === 'function')) {
-                  _context12.n = 19;
+                  _context12.n = 22;
                   break;
                 }
-                _context12.p = 16;
-                _context12.n = 17;
+                _context12.p = 19;
+                _context12.n = 20;
                 return effects.call(retractDeletedPendingMessage, channel, messageResponse.id);
-              case 17:
-                _context12.n = 19;
+              case 20:
+                _context12.n = 22;
                 break;
-              case 18:
-                _context12.p = 18;
+              case 21:
+                _context12.p = 21;
                 _t = _context12.v;
                 log.warn('Unable to retract a deleted pending message:', _t);
-              case 19:
+              case 22:
                 return _context12.a(2, 0);
-              case 20:
+              case 23:
                 if (messageToSend.tid) {
                   autoResendAttempts["delete"](messageToSend.tid);
                 }
                 if (!customUploader) {
-                  _context12.n = 25;
+                  _context12.n = 28;
                   break;
                 }
                 k = 0;
-              case 21:
+              case 24:
                 if (!(k < messageAttachment.length)) {
-                  _context12.n = 25;
+                  _context12.n = 28;
                   break;
                 }
                 messageResponse.attachments[k] = _extends({}, messageResponse.attachments[k], {
                   user: JSON.parse(JSON.stringify(messageResponse.user)),
                   tid: messageAttachment[k].tid
                 });
-                _context12.n = 22;
+                _context12.n = 25;
                 return effects.put(removeAttachmentProgressAC(messageAttachment[k].tid));
-              case 22:
-                _context12.n = 23;
+              case 25:
+                _context12.n = 26;
                 return effects.put(removeAttachmentUploadingStateAC(messageAttachment[k].tid));
-              case 23:
+              case 26:
                 deletePendingAttachment(messageAttachment[k].tid);
                 releaseBlobUrls(["compose_" + messageAttachment[k].tid]);
-              case 24:
+              case 27:
                 k++;
-                _context12.n = 21;
+                _context12.n = 24;
                 break;
-              case 25:
+              case 28:
                 attachmentsToUpdate = [];
                 if (messageResponse.attachments && messageResponse.attachments.length > 0) {
                   currentAttachmentsMap = {};
@@ -18989,27 +19010,27 @@ function sendMessage(action) {
                 });
                 activeChannelId = getActiveChannelId();
                 if (!(activeChannelId === channel.id)) {
-                  _context12.n = 26;
+                  _context12.n = 29;
                   break;
                 }
-                _context12.n = 26;
+                _context12.n = 29;
                 return effects.put(updateMessageAC(messageToSend.tid, messageUpdateData, true));
-              case 26:
+              case 29:
                 messageToUpdate = JSON.parse(JSON.stringify(_extends({}, messageResponse, {
                   attachments: attachmentsToUpdate
                 })));
                 addConfirmedMessageToCache(channel.id, messageToUpdate);
                 updateTabAttachmentCache(channel.id, attachmentsToUpdate, messageResponse.user);
                 if (!channel.unread) {
-                  _context12.n = 27;
+                  _context12.n = 30;
                   break;
                 }
-                _context12.n = 27;
+                _context12.n = 30;
                 return effects.put(markChannelAsReadAC(channel.id));
-              case 27:
+              case 30:
                 resolvedLastMessage = getResolvedChannelLastMessage(channel.id, messageToUpdate, messageToSend);
                 if (!lastMessageNeedsUpdate(getReduxChannelLastMessage(channel.id), resolvedLastMessage)) {
-                  _context12.n = 29;
+                  _context12.n = 32;
                   break;
                 }
                 updateChannelLastMessageOnAllChannels(channel.id, resolvedLastMessage);
@@ -19017,90 +19038,90 @@ function sendMessage(action) {
                   lastMessage: resolvedLastMessage,
                   lastReactedMessage: null
                 };
-                _context12.n = 28;
+                _context12.n = 31;
                 return effects.put(updateChannelDataAC(channel.id, channelUpdateParam, true));
-              case 28:
+              case 31:
                 updateChannelOnAllChannels(channel.id, channelUpdateParam);
-              case 29:
-                _context12.n = 31;
+              case 32:
+                _context12.n = 34;
                 break;
-              case 30:
+              case 33:
                 throw new Error('Connection required to send message');
-              case 31:
-                _context12.n = 37;
+              case 34:
+                _context12.n = 40;
                 break;
-              case 32:
-                _context12.p = 32;
+              case 35:
+                _context12.p = 35;
                 _t2 = _context12.v;
                 if (!(messageToSend.tid && isPendingMessageDeleted(channel.id, messageToSend.tid))) {
-                  _context12.n = 33;
+                  _context12.n = 36;
                   break;
                 }
                 return _context12.a(2, 0);
-              case 33:
+              case 36:
                 isErrorResendable = isResendableError(_t2 === null || _t2 === void 0 ? void 0 : _t2.type);
                 if (!((_channel2 = channel) !== null && _channel2 !== void 0 && _channel2.id && (_messageToSend2 = messageToSend) !== null && _messageToSend2 !== void 0 && _messageToSend2.tid)) {
-                  _context12.n = 37;
+                  _context12.n = 40;
                   break;
                 }
                 log.error('Error on uploading attachment', messageToSend.tid, _t2);
                 if (!((_messageToSend$attach = messageToSend.attachments) !== null && _messageToSend$attach !== void 0 && _messageToSend$attach.length)) {
-                  _context12.n = 36;
+                  _context12.n = 39;
                   break;
                 }
                 _iterator2 = _createForOfIteratorHelperLoose(messageToSend.attachments);
-              case 34:
+              case 37:
                 if ((_step2 = _iterator2()).done) {
-                  _context12.n = 36;
+                  _context12.n = 39;
                   break;
                 }
                 att = _step2.value;
                 if (!att.tid) {
-                  _context12.n = 35;
+                  _context12.n = 38;
                   break;
                 }
-                _context12.n = 35;
+                _context12.n = 38;
                 return effects.put(updateAttachmentUploadingStateAC(UPLOAD_STATE.FAIL, att.tid));
-              case 35:
-                _context12.n = 34;
-                break;
-              case 36:
+              case 38:
                 _context12.n = 37;
+                break;
+              case 39:
+                _context12.n = 40;
                 return effects.call(syncFailedMessageState, channel, messageToSend.tid, pendingMessages[_i2] || messageToSend, isErrorResendable);
-              case 37:
+              case 40:
                 return _context12.a(2);
             }
-          }, _callee4, null, [[16, 18], [2, 32]]);
+          }, _callee4, null, [[19, 21], [2, 35]]);
         });
         _i2 = 0;
-      case 13:
+      case 11:
         if (!(_i2 < messagesToSend.length)) {
-          _context13.n = 16;
+          _context13.n = 14;
           break;
         }
-        return _context13.d(_regeneratorValues(_loop3(_i2)), 14);
-      case 14:
+        return _context13.d(_regeneratorValues(_loop3(_i2)), 12);
+      case 12:
         _ret = _context13.v;
         if (!(_ret === 0)) {
-          _context13.n = 15;
+          _context13.n = 13;
           break;
         }
-        return _context13.a(3, 15);
-      case 15:
+        return _context13.a(3, 13);
+      case 13:
         _i2++;
-        _context13.n = 13;
+        _context13.n = 11;
         break;
-      case 16:
-        _context13.n = 18;
+      case 14:
+        _context13.n = 16;
         break;
-      case 17:
-        _context13.p = 17;
+      case 15:
+        _context13.p = 15;
         _t3 = _context13.v;
         log.error('error on send message ... ', _t3);
-      case 18:
+      case 16:
         return _context13.a(2);
     }
-  }, _marked1, null, [[1, 17]]);
+  }, _marked1, null, [[1, 15]]);
 }
 function sendTextMessage(action) {
   var payload, message, connectionState, channelId, channel, sendMessageTid, pendingMessage, _channel3, SceytChatClient, createChannelData, mentionedUserIds, attachments, _attachments$, attachmentBuilder, att, messageBuilder, createdMessage, messageToSend, _messageResponse$atta, messageResponse, messageUpdateData, activeChannelId, stringifiedMessageUpdateData, messageToUpdate, resolvedLastMessage, shouldUpdateChannelList, channelUpdateParam, _channel4, isErrorResendable, _t4;
@@ -22306,7 +22327,8 @@ function deleteReaction(action) {
         }
         channelUpdateParam = {
           userMessageReactions: [],
-          lastReactedMessage: null
+          lastReactedMessage: null,
+          newReactions: []
         };
         _context40.n = 3;
         return effects.put(updateChannelDataAC(channel.id, channelUpdateParam));
@@ -23902,7 +23924,7 @@ function MessageSaga() {
         return effects.takeEvery(CANCEL_CHANNEL_MESSAGE_PROCESSES, cancelChannelMessageProcesses);
       case 22:
         _context65.n = 23;
-        return effects.takeEvery(GET_REACTIONS, getReactions);
+        return effects.takeLatest(GET_REACTIONS, getReactions);
       case 23:
         _context65.n = 24;
         return effects.takeEvery(LOAD_MORE_REACTIONS, loadMoreReactions);
@@ -29557,9 +29579,16 @@ function updateChannel(action) {
           avatarUrl: avatarUrl,
           metadata: isJSON(metadata) ? JSON.parse(metadata) : metadata
         });
+        _context28.n = 6;
+        return effects.put(updateSearchedChannelDataAC(channelId, {
+          subject: subject,
+          avatarUrl: avatarUrl,
+          metadata: isJSON(metadata) ? JSON.parse(metadata) : metadata
+        }, getChannelGroupName(channel)));
+      case 6:
         onUpdateChannel = getOnUpdateChannel();
         if (!onUpdateChannel) {
-          _context28.n = 7;
+          _context28.n = 8;
           break;
         }
         fields = [];
@@ -29572,22 +29601,22 @@ function updateChannel(action) {
         if (JSON.stringify((_channel5 = channel) === null || _channel5 === void 0 ? void 0 : _channel5.metadata) !== metadata) {
           fields.push('metadata');
         }
-        _context28.n = 6;
+        _context28.n = 7;
         return effects.call(getChannelFromMap, channelId);
-      case 6:
+      case 7:
         updatedChannel = _context28.v;
         onUpdateChannel(updatedChannel, fields);
-      case 7:
-        _context28.n = 9;
-        break;
       case 8:
-        _context28.p = 8;
+        _context28.n = 10;
+        break;
+      case 9:
+        _context28.p = 9;
         _t26 = _context28.v;
         log.error('ERROR in update channel', _t26.message);
-      case 9:
+      case 10:
         return _context28.a(2);
     }
-  }, _marked27$1, null, [[0, 8]]);
+  }, _marked27$1, null, [[0, 9]]);
 }
 function checkUsersStatus() {
   var _SceytChatClient7, usersForUpdate, updatedUsers, usersToUpdateMap, update, updateData, _t27;
@@ -31515,11 +31544,38 @@ function MembersSaga$1() {
 var isPinnedMessageDeleted = function isPinnedMessageDeleted(message) {
   return (message === null || message === void 0 ? void 0 : message.state) === MESSAGE_STATUS.DELETE;
 };
-var getPinnedMessagePreview = function getPinnedMessagePreview(message) {
-  var _message$body, _message$attachments;
+var getPinnedMessageBody = function getPinnedMessageBody(message, contactsMap, getFromContacts) {
+  var _message$bodyAttribut;
+  if (contactsMap === void 0) {
+    contactsMap = {};
+  }
+  if (getFromContacts === void 0) {
+    getFromContacts = false;
+  }
+  var body = (message === null || message === void 0 ? void 0 : message.body) || '';
+  if (!body || !(message !== null && message !== void 0 && (_message$bodyAttribut = message.bodyAttributes) !== null && _message$bodyAttribut !== void 0 && _message$bodyAttribut.length)) return body;
+  var formattedBody = MessageTextFormat({
+    text: body,
+    message: message,
+    contactsMap: contactsMap,
+    getFromContacts: getFromContacts,
+    asSampleText: true,
+    accentColor: '',
+    textSecondary: ''
+  });
+  return Array.isArray(formattedBody) ? formattedBody.join('') : String(formattedBody);
+};
+var getPinnedMessagePreview = function getPinnedMessagePreview(message, contactsMap, getFromContacts) {
+  var _message$attachments;
+  if (contactsMap === void 0) {
+    contactsMap = {};
+  }
+  if (getFromContacts === void 0) {
+    getFromContacts = false;
+  }
   if (!message) return '';
   if (isPinnedMessageDeleted(message)) return 'Deleted message';
-  var body = (_message$body = message.body) === null || _message$body === void 0 ? void 0 : _message$body.trim();
+  var body = getPinnedMessageBody(message, contactsMap, getFromContacts).trim();
   if (body) return body;
   if (message.pollDetails) return message.pollDetails.name || 'Poll';
   var attachment = (_message$attachments = message.attachments) === null || _message$attachments === void 0 ? void 0 : _message$attachments[0];
@@ -33918,16 +33974,13 @@ var ChannelMessageText = function ChannelMessageText(_ref2) {
     unsupportedMessage = _ref2.unsupportedMessage;
   var isViewOnce = (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.type) === exports.MESSAGE_TYPE.VIEW_ONCE && (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.viewOnce);
   var systemMessageActor = lastMessage.user ? lastMessage.user.id === user.id ? 'You' : makeUsername(lastMessage.user && contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts, true) : '';
-  var audioRecording = React.useMemo(function () {
-    return getAudioRecordingFromMap(channel.id);
-  }, [channel.id, draftMessageText]);
   return /*#__PURE__*/React__default.createElement(MessageTextContainer, null, isTypingOrRecording && (/*#__PURE__*/React__default.createElement(TypingIndicator, null, !isDirectChannel && /*#__PURE__*/React__default.createElement(Points, {
     color: textPrimary
   }, ":"), typingOrRecording.isTyping ? 'typing' : 'recording', "...")), !isTypingOrRecording && (draftMessageText ? (/*#__PURE__*/React__default.createElement(DraftMessageText, {
     color: textSecondary
   }, !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({
+  }) : 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,
@@ -34064,10 +34117,11 @@ var Channel = function Channel(_ref3) {
             setDraftMessageText(undefined);
             setDraftMessage(undefined);
           } else {
+            var _channelDraftMessage$5;
             setDraftMessageText(draftText);
             setDraftMessage({
               mentionedUsers: channelDraftMessage.mentionedUsers,
-              body: channelDraftMessage.text,
+              body: (_channelDraftMessage$5 = channelDraftMessage.text) !== null && _channelDraftMessage$5 !== void 0 && _channelDraftMessage$5.trim() ? channelDraftMessage.text : '',
               bodyAttributes: channelDraftMessage.bodyAttributes,
               attachments: channelDraftMessage.attachments,
               viewOnce: channelDraftMessage.viewOnce,
@@ -34076,7 +34130,14 @@ var Channel = function Channel(_ref3) {
           }
         } else if (draftAudioRecording) {
           setDraftMessageText('Voice');
-          setDraftMessage(undefined);
+          setDraftMessage({
+            body: '',
+            attachments: [{
+              type: attachmentTypes.voice,
+              data: draftAudioRecording.file,
+              attachmentUrl: draftAudioRecording.objectUrl
+            }]
+          });
         }
       } else if (draftMessageText) {
         setDraftMessageText(undefined);
@@ -36535,6 +36596,7 @@ var ChannelList = function ChannelList(_ref2) {
     List = _ref2.List,
     ListItem = _ref2.ListItem,
     getSelectedChannel = _ref2.getSelectedChannel,
+    onSearchValueChange = _ref2.onSearchValueChange,
     Profile = _ref2.Profile,
     CreateChannel = _ref2.CreateChannel,
     ChannelsTitle = _ref2.ChannelsTitle,
@@ -36663,10 +36725,13 @@ var ChannelList = function ChannelList(_ref2) {
     getMyChannels();
   };
   var handleSearchValueChange = function handleSearchValueChange(e) {
-    setSearchValue(e.target.value);
+    var value = e.target.value;
+    setSearchValue(value);
+    onSearchValueChange === null || onSearchValueChange === void 0 ? void 0 : onSearchValueChange(value);
   };
   var getMyChannels = function getMyChannels() {
     setSearchValue('');
+    onSearchValueChange === null || onSearchValueChange === void 0 ? void 0 : onSearchValueChange('');
   };
   var handleOpenProfile = function handleOpenProfile() {
     setProfileIsOpen(!profileIsOpen);
@@ -39780,6 +39845,7 @@ var VideoPreview = /*#__PURE__*/React.memo(function VideoPreview(_ref) {
     markPreferredSourceLoaded = _useProgressiveMediaS.markPreferredSourceLoaded;
   var isExtractingRef = React.useRef(false);
   var hasExtractionFailedRef = React.useRef(false);
+  var previousVideoSourceRef = React.useRef(undefined);
   React.useEffect(function () {
     if (!videoThumb || downloadedPreviewImage) return;
     var cancelled = false;
@@ -39796,10 +39862,16 @@ var VideoPreview = /*#__PURE__*/React.memo(function VideoPreview(_ref) {
   }, [videoThumb, downloadedPreviewImage, dispatch, messageType]);
   React.useEffect(function () {
     var videoSource = src;
-    if (!videoSource || !shouldExtractVideoFirstFrame(file.metadata) || isExtractingRef.current || hasExtractionFailedRef.current) return;
+    var canExtractFirstFrame = shouldExtractVideoFirstFrame(file.metadata);
+    if (previousVideoSourceRef.current !== videoSource) {
+      previousVideoSourceRef.current = videoSource;
+      hasExtractionFailedRef.current = false;
+    }
+    if (!videoSource || !canExtractFirstFrame || isExtractingRef.current || hasExtractionFailedRef.current) {
+      return;
+    }
     if (attachmentVideoFirstFrame || isPreview && setVideoIsReadyToSend) return;
     var frameCacheKey = typeof file.url === 'string' ? file.url : undefined;
-    hasExtractionFailedRef.current = false;
     var checkCache = function checkCache() {
       try {
         var _exit = false;
@@ -40189,7 +40261,7 @@ var Attachment = function Attachment(_ref) {
     }
   }
   var fallbackImageSource = withPrefix && attachmentThumb ? "data:image/jpeg;base64," + attachmentThumb : attachmentThumb;
-  var preferredImageSource = attachment.attachmentUrl || attachmentUrlFromMap || attachmentUrl;
+  var preferredImageSource = isPreview ? attachment.attachmentUrl || attachmentUrlFromMap || attachmentUrl : attachmentUrlFromMap || attachment.attachmentUrl || attachmentUrl;
   var _useProgressiveMediaS = useProgressiveMediaSource(preferredImageSource, fallbackImageSource),
     displayedImageSource = _useProgressiveMediaS.displayedSource,
     previousImageSource = _useProgressiveMediaS.previousSource,
@@ -40521,6 +40593,9 @@ var Attachment = function Attachment(_ref) {
     var _getVideoAttachmentCa = getVideoAttachmentCacheKeys(attachment.url, attachment.metadata),
       videoThumb = _getVideoAttachmentCa.videoThumb,
       originalVideoCacheKey = _getVideoAttachmentCa.originalVideo;
+    if (sharedOriginalVideoDownload.state === 'completed' && originalVideoDownloadStartedRef.current) {
+      originalVideoDownloadStartedRef.current = false;
+    }
     if (typeof originalVideoUrlFromMap === 'string') {
       setAttachmentUrl(originalVideoUrlFromMap);
       setIsCached(true);
@@ -40599,7 +40674,7 @@ var Attachment = function Attachment(_ref) {
     return function () {
       cancelled = true;
     };
-  }, [attachment.id, attachment.type, attachment.url, attachment.metadata, attachment.attachmentUrl, isDetailsView, originalVideoUrlFromMap, connectionStatus, dispatch, messageType, attachment.size, videoDownloadRetry, isSharedOriginalVideoCancelled]);
+  }, [attachment.id, attachment.type, attachment.url, attachment.metadata, attachment.attachmentUrl, isDetailsView, originalVideoUrlFromMap, connectionStatus, dispatch, messageType, attachment.size, videoDownloadRetry, isSharedOriginalVideoCancelled, sharedOriginalVideoDownload.state]);
   var handleResumeOriginalVideoDownload = function handleResumeOriginalVideoDownload(event) {
     event.stopPropagation();
     if (!attachment.url) return;
@@ -41206,7 +41281,7 @@ var Attachment = function Attachment(_ref) {
   }, _formatLargeText(isPreview ? attachment.data.name : attachment.name, fileAttachmentWidth ? fileAttachmentWidth / 12.5 : isPreview ? 18 : 30)), /*#__PURE__*/React__default.createElement(AttachmentSize, {
     color: selectedFileAttachmentsSizeColor || textSecondary,
     errorColor: errorColor
-  }, (isInUploadingState || downloadingFile) && sizeProgress ? bytesToSize(sizeProgress.loaded, 1) + " \u2022 " + bytesToSize(sizeProgress.total, 1) : (attachment.data && attachment.data.size || attachment.size) && bytesToSize(isPreview ? attachment.data.size : +attachment.size)))), isPreview && (/*#__PURE__*/React__default.createElement(RemoveChosenFile, {
+  }, (isInUploadingState || downloadingFile) && sizeProgress ? bytesToSize(sizeProgress.loaded, 1) + " \u2022 " + bytesToSize(sizeProgress.total, 1) : (attachment.data && attachment.data.size || attachment.size) && bytesToSize(isPreview ? attachment.data.size : +attachment.size, 1)))), isPreview && (/*#__PURE__*/React__default.createElement(RemoveChosenFile, {
     "$backgroundColor": background,
     color: iconPrimary,
     onClick: function onClick() {
@@ -41317,7 +41392,7 @@ var AttachmentImg = styled__default.img(_templateObject13$3 || (_templateObject1
 }, function (props) {
   return props.$fadeIn && styled.css(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n      opacity: 0;\n      animation: ", " 100ms ease-in-out forwards;\n    "])), mediaCrossFade);
 });
-var VideoCont = styled__default.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  cursor: pointer;\n  width: 100%;\n  height: ", ";\n"])), function (props) {
+var VideoCont = styled__default.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  cursor: pointer;\n  height: ", ";\n"])), function (props) {
   return props.isDetailsView && '100%';
 });
 
@@ -42565,7 +42640,7 @@ var SliderPopup = function SliderPopup(_ref) {
   };
   var handleClicks = React.useCallback(function (e) {
     var target = e.target;
-    if (!target.closest('.custom_carousel_item') && !target.closest('.custom_carousel_arrow')) {
+    if (!target.closest('.slider-preview-media, .custom_video_player, .custom_carousel_arrow')) {
       if (currentFileType === 'image') {
         log.info('[MEDIA_IMAGE_SLIDER] outside click closing slider ' + JSON.stringify({
           channelId: channel.id,
@@ -43002,6 +43077,7 @@ var SliderPopup = function SliderPopup(_ref) {
     })))), isItemLoading(file.id) && file.type === 'image' && (/*#__PURE__*/React__default.createElement(ItemLoadingCont, null, /*#__PURE__*/React__default.createElement(UploadingIcon, {
       color: textOnPrimary
     }))), file.type === 'image' ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, ((file.id === (currentFile === null || currentFile === void 0 ? void 0 : currentFile.id) ? currentAttachmentUrl : undefined) || attachmentUpdatedMap[getAttachmentURLWithVersion(file.url + '_original_image_url')] || getMediaThumbnailSource(file)) && (/*#__PURE__*/React__default.createElement("img", {
+      className: 'slider-preview-media',
       loading: 'eager',
       decoding: 'async',
       draggable: false,
@@ -43116,7 +43192,7 @@ var IconWrapper = styled__default.span(_templateObject10$7 || (_templateObject10
 }, function (props) {
   return props.hideInMobile && "\n    @media (max-width: 550px) {\n      display: none;\n    }\n  ";
 });
-var CarouselItem$1 = styled__default.div(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  width: calc(100% - 200px);\n  height: calc(100% - 80px);\n  max-width: calc(100% - 200px);\n  max-height: calc(100vh - 140px);\n  align-items: center;\n  justify-content: center;\n  z-index: 2;\n\n  img,\n  video {\n    width: 100%;\n    height: 100%;\n    min-width: 0;\n    min-height: 0;\n    object-fit: contain;\n    @media (max-width: 480px) {\n      width: 100%;\n    }\n  }\n  @media (max-width: 480px) {\n    width: calc(100% - 100px);\n    height: calc(100% - 48px);\n    max-width: calc(100% - 100px);\n  }\n\n  img {\n    display: block;\n  }\n"])));
+var CarouselItem$1 = styled__default.div(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  width: calc(100% - 200px);\n  height: calc(100% - 80px);\n  max-width: calc(100% - 200px);\n  max-height: calc(100vh - 140px);\n  align-items: center;\n  justify-content: center;\n  z-index: 2;\n\n  img,\n  video {\n    height: 100%;\n    min-width: 0;\n    min-height: 0;\n    object-fit: contain;\n    @media (max-width: 480px) {\n      width: 100%;\n    }\n  }\n  @media (max-width: 480px) {\n    width: calc(100% - 100px);\n    height: calc(100% - 48px);\n    max-width: calc(100% - 100px);\n  }\n\n  img {\n    display: block;\n  }\n"])));
 var UploadCont$1 = styled__default.div(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n  left: calc((100vw - 100%) / -2);\n  top: calc((100vh - 100%) / -2);\n  width: 100vw;\n  height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  z-index: 1;\n"])));
 var ItemLoadingCont = styled__default.div(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: calc((100vw - 100%) / -2);\n  top: calc((100vh - 100% + 60px) / -2);\n  width: 100vw;\n  height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n"])));
 var ArrowButton = styled__default.button(_templateObject14$5 || (_templateObject14$5 = _taggedTemplateLiteralLoose(["\n  min-width: 60px;\n  max-width: 60px;\n  height: 60px;\n  margin-right: ", ";\n  margin-left: ", ";\n  border: none;\n  color: ", ";\n  background: transparent;\n  box-sizing: border-box;\n  border-radius: 50%;\n  line-height: 1px;\n  align-self: center;\n  outline: none;\n  cursor: pointer;\n  visibility: ", ";\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: ", ";\n  right: ", ";\n  & > svg {\n    width: 40px;\n    height: 40px;\n  }\n  @media (max-width: 768px) {\n    min-width: 36px;\n    max-width: 36px;\n    height: 36px;\n    margin-right: ", ";\n    margin-left: ", ";\n\n    & > svg {\n      width: 22px;\n      height: 22px;\n    }\n  }\n  @media (max-width: 450px) {\n    min-width: 32px;\n    max-width: 32px;\n    height: 32px;\n\n    & > svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n"])), function (props) {
@@ -43150,7 +43226,8 @@ var Message = function Message(_ref) {
     backgroundColor = _ref.backgroundColor,
     borderRadius = _ref.borderRadius,
     contactsMap = _ref.contactsMap,
-    setLastVisibleMessageId = _ref.setLastVisibleMessageId;
+    setLastVisibleMessageId = _ref.setLastVisibleMessageId,
+    renderPinnedMessagePreview = _ref.renderPinnedMessagePreview;
   var _useColor = useColors(),
     textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
     overlayBackground = _useColor[THEME_COLORS.OVERLAY_BACKGROUND];
@@ -43168,9 +43245,13 @@ var Message = function Message(_ref) {
   var actorName = message.incoming ? makeUsername(message.user && contactsMap[message.user.id], message.user, getFromContacts) : 'You';
   var parentMessageId = ((_message$parentMessag = message.parentMessage) === null || _message$parentMessag === void 0 ? void 0 : _message$parentMessag.id) || ((_message$parentMessag2 = message.parentMessage) === null || _message$parentMessag2 === void 0 ? void 0 : _message$parentMessag2.tid) || message.parentMessageId || message.parentId;
   var pinnedMessagePreview = React.useMemo(function () {
-    return getPinnedMessagePreview(message.parentMessage);
-  }, [message.parentMessage]);
+    return getPinnedMessagePreview(message.parentMessage, contactsMap, getFromContacts);
+  }, [contactsMap, getFromContacts, message.parentMessage]);
   var pinnedMessageDeleted = isPinnedMessageDeleted(message.parentMessage);
+  var customPinnedMessagePreview = pinnedMessageDeleted || !message.parentMessage ? null : renderPinnedMessagePreview === null || renderPinnedMessagePreview === void 0 ? void 0 : renderPinnedMessagePreview(message.parentMessage, {
+    placement: 'system'
+  });
+  var pinnedPreview = customPinnedMessagePreview != null ? customPinnedMessagePreview : pinnedMessagePreview;
   var navigateToPinnedMessage = function navigateToPinnedMessage() {
     if (parentMessageId) navigateToMessage(parentMessageId);
   };
@@ -43207,7 +43288,7 @@ var Message = function Message(_ref) {
     onClick: navigateToPinnedMessage,
     disabled: !parentMessageId,
     "aria-label": parentMessageId ? 'Go to pinned message' : undefined
-  }, pinnedMessagePreview ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, actorName + " pinned ", /*#__PURE__*/React__default.createElement(PinnedMessagePreview, null, pinnedMessageDeleted ? pinnedMessagePreview : "\"" + pinnedMessagePreview + "\""), !pinnedMessageDeleted && '.')) : actorName + " pinned a message.")) : (/*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, actorName, message.body === 'CC' ? ' created this channel ' : message.body === 'CG' ? ' created this group' : message.body === 'AM' ? " added " + (!!(messageMetas && messageMetas.m) && messageMetas.m.slice(0, 5).map(function (mem) {
+  }, pinnedPreview ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, actorName + " pinned ", /*#__PURE__*/React__default.createElement(PinnedMessagePreview, null, pinnedMessageDeleted || customPinnedMessagePreview ? pinnedPreview : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\"", pinnedPreview, "\""))), !pinnedMessageDeleted && '.')) : actorName + " pinned a message.")) : (/*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, actorName, message.body === 'CC' ? ' created this channel ' : message.body === 'CG' ? ' created this group' : message.body === 'AM' ? " added " + (!!(messageMetas && messageMetas.m) && messageMetas.m.slice(0, 5).map(function (mem) {
     return mem === user.id ? 'You' : " " + systemMessageUserName(mem, contactsMap[mem], message.mentionedUsers);
   })) + " " + (messageMetas && messageMetas.m && messageMetas.m.length > 5 ? "and " + (messageMetas.m.length - 5) + " more" : '') : message.body === 'RM' ? " removed " + (messageMetas && messageMetas.m && messageMetas.m.slice(0, 5).map(function (mem) {
     return mem === user.id ? 'You' : " " + systemMessageUserName(mem, contactsMap[mem], message.mentionedUsers);
@@ -43258,18 +43339,18 @@ var attachmentMetadata = function attachmentMetadata(attachment) {
     return {};
   }
 };
-var preview = function preview(message) {
+var preview = function preview(message, contactsMap, getFromContacts) {
   var _message$attachments;
   if (isPinnedMessageDeleted(message)) return 'Deleted Message';
   if (message !== null && message !== void 0 && message.pollDetails) return "Poll: " + (message.pollDetails.name || message.body || 'Poll');
   var attachment = message === null || message === void 0 ? void 0 : (_message$attachments = message.attachments) === null || _message$attachments === void 0 ? void 0 : _message$attachments[0];
-  if (!attachment) return (message === null || message === void 0 ? void 0 : message.body) || (message !== null && message !== void 0 && message.forwardingDetails ? 'Shared content' : 'Message');
+  if (!attachment) return getPinnedMessageBody(message, contactsMap, getFromContacts) || (message !== null && message !== void 0 && message.forwardingDetails ? 'Shared content' : 'Message');
   var metadata = attachmentMetadata(attachment);
   if (attachment.type === attachmentTypes.voice) {
     var duration = metadata.duration || metadata.dur || attachment.duration;
     return "Voice" + (duration ? ": " + formatDuration(duration) : '');
   }
-  if (message !== null && message !== void 0 && message.body) return message.body;
+  if (message !== null && message !== void 0 && message.body) return getPinnedMessageBody(message, contactsMap, getFromContacts);
   if (attachment.type === attachmentTypes.image) return 'Photo';
   if (attachment.type === attachmentTypes.video) {
     return 'Video';
@@ -43301,10 +43382,13 @@ var PinnedMessagesBanner = function PinnedMessagesBanner(_ref) {
   var _active$message, _active$message2, _active$message3, _active$message3$atta, _active$message4;
   var channelId = _ref.channelId,
     pinIcon = _ref.pinIcon,
-    onOpenList = _ref.onOpenList;
+    onOpenList = _ref.onOpenList,
+    renderPinnedMessagePreview = _ref.renderPinnedMessagePreview;
   var dispatch = useDispatch();
   var pins = useSelector(pinnedMessagesSelector(channelId));
   var nextToken = useSelector(pinnedMessagesCursorSelector(channelId));
+  var contactsMap = useSelector(contactsMapSelector);
+  var getFromContacts = getShowOnlyContactUsers();
   var _useColor = useColors(),
     surface1 = _useColor[THEME_COLORS.SURFACE_1],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -43377,6 +43461,9 @@ var PinnedMessagesBanner = function PinnedMessagesBanner(_ref) {
   });
   var linkPreviewImage = getLinkPreviewImage(attachment);
   var sourceMessageDeleted = isPinnedMessageDeleted(active.message);
+  var customPinnedMessagePreview = sourceMessageDeleted ? null : renderPinnedMessagePreview === null || renderPinnedMessagePreview === void 0 ? void 0 : renderPinnedMessagePreview(active.message, {
+    placement: 'banner'
+  });
   var hasLeadingPreview = !sourceMessageDeleted && (hasAttachmentTile(attachmentForPreview) || (attachment === null || attachment === void 0 ? void 0 : attachment.type) === attachmentTypes.link);
   var markerFade = count <= 3 ? 'none' : index <= 1 ? 'top' : index >= count - 2 ? 'bottom' : 'both';
   var loadNextPage = function loadNextPage() {
@@ -43460,7 +43547,7 @@ var PinnedMessagesBanner = function PinnedMessagesBanner(_ref) {
   }, /*#__PURE__*/React__default.createElement("strong", null, "Pinned messages"), /*#__PURE__*/React__default.createElement(PinnedCopyPreview, {
     key: active.id,
     textPrimary: textPrimary
-  }, preview(active.message))), /*#__PURE__*/React__default.createElement(Controls$1, {
+  }, customPinnedMessagePreview != null ? customPinnedMessagePreview : preview(active.message, contactsMap, getFromContacts))), /*#__PURE__*/React__default.createElement(Controls$1, {
     onClick: function onClick(event) {
       return event.stopPropagation();
     },
@@ -45726,12 +45813,14 @@ var PinnedMessagesList = function PinnedMessagesList(_ref) {
   };
   var positionNavigationControl = function positionNavigationControl(message, event) {
     var messageId = message.id || message.tid;
-    var messageContent = event.currentTarget.querySelector('.messageContent');
+    var messageContent = event.querySelector('.messageContent');
     if (!messageId || !messageContent) return;
-    var rowBounds = event.currentTarget.getBoundingClientRect();
+    var rowBounds = event.getBoundingClientRect();
     var contentBounds = messageContent.getBoundingClientRect();
-    var messageItem = event.currentTarget.querySelector('.message_item');
-    var bottom = messageItem ? Number.parseFloat(window.getComputedStyle(messageItem).marginBottom) || 0 : 0;
+    var messageItem = event.querySelector('.message_item');
+    var reactionContainer = event.querySelector('[data-reactions-container]');
+    var itemMarginBottom = messageItem ? Number.parseFloat(window.getComputedStyle(messageItem).marginBottom) || 0 : 0;
+    var bottom = itemMarginBottom + ((reactionContainer === null || reactionContainer === void 0 ? void 0 : reactionContainer.getBoundingClientRect().height) || 0);
     var left = message.incoming ? contentBounds.right - rowBounds.left + 8 : contentBounds.left - rowBounds.left - 36 - 8;
     setNavigationOffsets(function (current) {
       var _extends2;
@@ -45743,6 +45832,17 @@ var PinnedMessagesList = function PinnedMessagesList(_ref) {
       }, _extends2));
     });
   };
+  React.useEffect(function () {
+    if (pins) {
+      for (var i = 0; i < pins.length; i++) {
+        var pin = pins[i];
+        var pinnedElement = document.querySelector("[data-pinned-message-id=\"" + pin.id + "\"]");
+        if (pinnedElement) {
+          positionNavigationControl(pin.message, pinnedElement);
+        }
+      }
+    }
+  }, [pins]);
   React.useLayoutEffect(function () {
     var element = itemsRef.current;
     if (!element) return;
@@ -45779,7 +45879,7 @@ var PinnedMessagesList = function PinnedMessagesList(_ref) {
       key: pin.id,
       "data-pinned-message-id": pin.id,
       onMouseEnter: function onMouseEnter(event) {
-        return positionNavigationControl(pin.message, event);
+        return positionNavigationControl(pin.message, event.currentTarget);
       }
     }, renderMessage({
       message: pin.message,
@@ -47248,7 +47348,9 @@ function EmojisPopup(_ref2) {
     backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
     border = _useColor[THEME_COLORS.BORDER],
     iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
-    scrollbarThumbColor = _useColor[THEME_COLORS.SURFACE_2];
+    scrollbarThumbColor = _useColor[THEME_COLORS.SURFACE_2],
+    background = _useColor[THEME_COLORS.BACKGROUND];
+  var theme = useSelector(themeSelector);
   var _useState = React.useState(false),
     rendered = _useState[0],
     setRendered = _useState[1];
@@ -47339,7 +47441,7 @@ function EmojisPopup(_ref2) {
   }, getEmojisCategoryTitle(activeCollection))), /*#__PURE__*/React__default.createElement(EmojiSection, {
     ref: emojiContainerRef,
     onScroll: handleEmojiListScroll,
-    scrollbarThumbColor: scrollbarThumbColor
+    scrollbarThumbColor: theme === 'dark' ? background : scrollbarThumbColor
   }, /*#__PURE__*/React__default.createElement(AllEmojis, null, EMOJIS.map(function (emojiBigCollection, bigColIndex) {
     var mainCollectionKey = emojiBigCollection.key;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -49326,6 +49428,8 @@ function ReactionsPopup(_ref) {
     reactionTotals = _ref.reactionTotals,
     reactionsDetailsPopupBorderRadius = _ref.reactionsDetailsPopupBorderRadius,
     reactionsDetailsPopupHeaderItemsStyle = _ref.reactionsDetailsPopupHeaderItemsStyle,
+    _ref$popupZIndex = _ref.popupZIndex,
+    popupZIndex = _ref$popupZIndex === void 0 ? 12 : _ref$popupZIndex,
     rtlDirection = _ref.rtlDirection,
     openUserProfile = _ref.openUserProfile;
   var _useColor = useColors(),
@@ -49347,6 +49451,13 @@ function ReactionsPopup(_ref) {
   var _useState = React.useState('all'),
     activeTabKey = _useState[0],
     setActiveTabKey = _useState[1];
+  var reactionTotalsSignature = reactionTotals.map(function (_ref2) {
+    var key = _ref2.key,
+      count = _ref2.count,
+      score = _ref2.score;
+    return key + ":" + count + ":" + score;
+  }).join('|');
+  var reactionTotalsSignatureRef = React.useRef(reactionTotalsSignature);
   var _useState2 = React.useState(0),
     popupHeight = _useState2[0],
     setPopupHeight = _useState2[1];
@@ -49375,7 +49486,7 @@ function ReactionsPopup(_ref) {
     }
   };
   var handleClicks = function handleClicks(e) {
-    if (e.target.closest('.reactions_popup')) {
+    if (e.target.closest('.reactions_popup') || e.target.closest('[data-reactions-container]')) {
       return;
     }
     if (closeIsApproved) {
@@ -49407,6 +49518,19 @@ function ReactionsPopup(_ref) {
       handleReactionsPopupClose();
     }
   }, [reactionTotals]);
+  React.useEffect(function () {
+    if (reactionTotalsSignatureRef.current === reactionTotalsSignature || !reactionTotals.length) {
+      return;
+    }
+    reactionTotalsSignatureRef.current = reactionTotalsSignature;
+    var nextActiveTabKey = activeTabKey !== 'all' && reactionTotals.some(function (reaction) {
+      return reaction.key === activeTabKey;
+    }) ? activeTabKey : 'all';
+    if (nextActiveTabKey !== activeTabKey) {
+      setActiveTabKey(nextActiveTabKey);
+    }
+    handleGetReactions(nextActiveTabKey === 'all' ? undefined : nextActiveTabKey);
+  }, [activeTabKey, reactionTotals, reactionTotalsSignature]);
   var reactionsHeight = React.useMemo(function () {
     return reactions.length * 50 + 45;
   }, [reactions]);
@@ -49440,9 +49564,9 @@ function ReactionsPopup(_ref) {
       bottom: bottom,
       left: left,
       right: right,
-      zIndex: 12
+      zIndex: popupZIndex
     };
-  }, [popupVerticalPosition, anchorTop, anchorBottom, horizontalPositions, rtlDirection]);
+  }, [popupVerticalPosition, anchorTop, anchorBottom, horizontalPositions, popupZIndex, rtlDirection]);
   return /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React__default.createElement(Container$i, {
     ref: popupRef,
     popupVerticalPosition: popupVerticalPosition,
@@ -49613,9 +49737,11 @@ var MessageReactions = function MessageReactions(_ref) {
     reactionsContainerPadding = _ref.reactionsContainerPadding,
     reactionsDetailsPopupBorderRadius = _ref.reactionsDetailsPopupBorderRadius,
     reactionsDetailsPopupHeaderItemsStyle = _ref.reactionsDetailsPopupHeaderItemsStyle,
+    popupZIndex = _ref.popupZIndex,
     onToggleReactionsPopup = _ref.onToggleReactionsPopup,
     onReactionAddDelete = _ref.onReactionAddDelete,
     onOpenUserProfile = _ref.onOpenUserProfile;
+  var messageId = message.id || message.tid;
   var enableTransitionRef = React__default.useCallback(function (el) {
     if (!el) return;
     window.requestAnimationFrame(function () {
@@ -49629,15 +49755,17 @@ var MessageReactions = function MessageReactions(_ref) {
     anchorTop: reactionsAnchorTop,
     anchorBottom: reactionsAnchorBottom,
     reactionTotals: message.reactionTotals || [],
-    messageId: message.id,
+    messageId: messageId,
     handleReactionsPopupClose: onToggleReactionsPopup,
     rtlDirection: rtlDirection,
     handleAddDeleteEmoji: onReactionAddDelete,
     reactionsDetailsPopupBorderRadius: reactionsDetailsPopupBorderRadius,
-    reactionsDetailsPopupHeaderItemsStyle: reactionsDetailsPopupHeaderItemsStyle
+    reactionsDetailsPopupHeaderItemsStyle: reactionsDetailsPopupHeaderItemsStyle,
+    popupZIndex: popupZIndex
   })), /*#__PURE__*/React__default.createElement(ReactionsContainer, {
     ref: enableTransitionRef,
-    id: message.id + "_reactions_container",
+    id: messageId + "_reactions_container",
+    "data-reactions-container": true,
     border: reactionsContainerBorder,
     boxShadow: reactionsContainerBoxShadow,
     borderRadius: reactionsContainerBorderRadius,
@@ -50788,9 +50916,10 @@ var MESSAGE_ACTIONS_HOVER_DELAY = 450;
 var MESSAGE_ACTIONS_FLIP_THRESHOLD = 110;
 var MAX_SELECTED_MESSAGES = 30;
 var EMOJI_POPUP_THRESHOLD = 300;
+var PIN_TYPE_PERSONAL$1 = 1;
 var lastMediaItemClickTime = 0;
 var Message$1 = function Message(_ref) {
-  var _tabIsActiveRef$curre, _message$pinDetails, _message$reactionTota;
+  var _tabIsActiveRef$curre, _message$pinDetails, _channel$members, _message$reactionTota;
   var message = _ref.message,
     channel = _ref.channel,
     MessageActionsMenu = _ref.MessageActionsMenu,
@@ -51021,6 +51150,8 @@ var Message$1 = function Message(_ref) {
   }, [pins, message.id, message.tid]);
   var isPinned = !!((_message$pinDetails = message.pinDetails) !== null && _message$pinDetails !== void 0 && _message$pinDetails.pinned) || !!pinnedMessage;
   var canPinForAll = checkActionPermission('pinMessage');
+  var user = getClient().user;
+  var isSelfChannel = (channel === null || channel === void 0 ? void 0 : channel.type) === DEFAULT_CHANNEL_TYPE.DIRECT && (channel === null || channel === void 0 ? void 0 : channel.memberCount) === 1 && (channel === null || channel === void 0 ? void 0 : (_channel$members = channel.members) === null || _channel$members === void 0 ? void 0 : _channel$members.length) > 0 && (channel === null || channel === void 0 ? void 0 : channel.members[0].id) === (user === null || user === void 0 ? void 0 : user.id);
   var messageItemRef = React.useRef(null);
   var isVisible = useOnScreen(messageItemRef);
   var _useState = React.useState(false),
@@ -51038,14 +51169,14 @@ var Message$1 = function Message(_ref) {
   var prevMessageUserID = prevMessage ? getComparableUserId(prevMessage.user) : null;
   var current = moment(message.createdAt).startOf('day');
   var firstMessageInInterval = React.useMemo(function () {
-    return ifLatestAndHasNotPreview || !(prevMessage && current.diff(moment(prevMessage.createdAt).startOf('day'), 'days') === 0) || (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.type) === exports.MESSAGE_TYPE.SYSTEM || unreadMessageId === prevMessage.id;
-  }, [prevMessage, unreadMessageId, ifLatestAndHasNotPreview]);
+    return ifLatestAndHasNotPreview || !isPinnedMessagesList && !(prevMessage && current.diff(moment(prevMessage.createdAt).startOf('day'), 'days') === 0) || (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.type) === exports.MESSAGE_TYPE.SYSTEM || unreadMessageId === (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.id);
+  }, [prevMessage, unreadMessageId, ifLatestAndHasNotPreview, isPinnedMessagesList]);
   var nextMessageUserID = nextMessage ? getComparableUserId(nextMessage.user) : null;
   var nextDay = nextMessage ? moment(nextMessage.createdAt).startOf('day') : null;
   var nextMessageFirstInInterval = !nextMessage || nextDay !== null && nextDay.diff(current, 'days') !== 0 || nextMessage.type === exports.MESSAGE_TYPE.SYSTEM || nextMessageStartsUnreadSection;
   var messageTimeVisible = showMessageTime && (showMessageTimeForEachMessage || !nextMessage);
   var messageStatusVisible = !message.incoming && showMessageStatus && message.state !== MESSAGE_STATUS.DELETE && (showMessageStatusForEachMessage || !nextMessage);
-  var renderAvatar = (!!prevMessageUserID || ifLatestAndHasNotPreview) && (prevMessageUserID !== messageUserID || firstMessageInInterval) && !(channel.type === DEFAULT_CHANNEL_TYPE.DIRECT && !showSenderNameOnDirectChannel) && !(!message.incoming && !showOwnAvatar);
+  var renderAvatar = (!!prevMessageUserID || ifLatestAndHasNotPreview) && (prevMessageUserID !== messageUserID || firstMessageInInterval) && !(isPinnedMessagesList && channel.type === DEFAULT_CHANNEL_TYPE.DIRECT) && !(channel.type === DEFAULT_CHANNEL_TYPE.DIRECT && !showSenderNameOnDirectChannel) && !(!message.incoming && !showOwnAvatar);
   var selectionIsActive = selectedMessagesMap && selectedMessagesMap.size > 0;
   var isSelectedMessage = selectedMessagesMap && selectedMessagesMap.get(message.id || message.tid);
   var tooManySelected = selectedMessagesMap && selectedMessagesMap.size >= MAX_SELECTED_MESSAGES;
@@ -51098,11 +51229,16 @@ var Message$1 = function Message(_ref) {
     setMessageActionsShow(false);
   }, [channel.id, isPinnedMessagesList, message.id, message.tid, setInfoPopupOpen, setMessageActionsShow]);
   var handleTogglePinMessagePopup = React.useCallback(function () {
+    if (isSelfChannel) {
+      dispatch(pinMessageAC(channel.id, message, PIN_TYPE_PERSONAL$1));
+      setMessageActionsShow(false);
+      return;
+    }
     setPinPopupOpen(function (prev) {
       return !prev;
     });
     setMessageActionsShow(false);
-  }, [setPinPopupOpen, setMessageActionsShow]);
+  }, [channel.id, dispatch, isSelfChannel, message, setMessageActionsShow, setPinPopupOpen]);
   var handlePinMessage = React.useCallback(function (scope) {
     dispatch(pinMessageAC(channel.id, message, scope));
     setPinPopupOpen(false);
@@ -51169,10 +51305,10 @@ var Message$1 = function Message(_ref) {
     setMessageActionsShow(false);
   }, [message, contactsMap]);
   var handleToggleReactionsPopup = React.useCallback(function () {
-    var _messageItemRef$curre;
-    var reactionsContainer = document.getElementById(message.id + "_reactions_container");
+    var _messageItemRef$curre, _messageItemRef$curre2;
+    var reactionsContainer = (_messageItemRef$curre = messageItemRef.current) === null || _messageItemRef$curre === void 0 ? void 0 : _messageItemRef$curre.querySelector('[data-reactions-container]');
     var reactionsContPos = reactionsContainer === null || reactionsContainer === void 0 ? void 0 : reactionsContainer.getBoundingClientRect();
-    var bottomPos = (_messageItemRef$curre = messageItemRef.current) === null || _messageItemRef$curre === void 0 ? void 0 : _messageItemRef$curre.getBoundingClientRect().bottom;
+    var bottomPos = (_messageItemRef$curre2 = messageItemRef.current) === null || _messageItemRef$curre2 === void 0 ? void 0 : _messageItemRef$curre2.getBoundingClientRect().bottom;
     var offsetBottom = bottomPos ? window.innerHeight - bottomPos : 0;
     setReactionsPopupPosition(offsetBottom);
     setReactionsPopupHorizontalPosition({
@@ -51185,15 +51321,15 @@ var Message$1 = function Message(_ref) {
     setReactionsPopupOpen(function (prev) {
       return !prev;
     });
-  }, [dispatch, message.id]);
+  }, [dispatch, message.id, message.tid]);
   var handleMouseEnter = React.useCallback(function () {
     if (message.state !== MESSAGE_STATUS.DELETE && !selectionIsActive && !infoPopupOpen) {
       messageActionsTimeout.current = setTimeout(function () {
-        var _messageItemRef$curre2, _messageItemRef$curre3;
+        var _messageItemRef$curre3, _messageItemRef$curre4;
         if (Date.now() - lastMediaItemClickTime < MESSAGE_ACTIONS_HOVER_DELAY * 2) {
           return;
         }
-        var msgTop = (_messageItemRef$curre2 = (_messageItemRef$curre3 = messageItemRef.current) === null || _messageItemRef$curre3 === void 0 ? void 0 : _messageItemRef$curre3.getBoundingClientRect().top) != null ? _messageItemRef$curre2 : 0;
+        var msgTop = (_messageItemRef$curre3 = (_messageItemRef$curre4 = messageItemRef.current) === null || _messageItemRef$curre4 === void 0 ? void 0 : _messageItemRef$curre4.getBoundingClientRect().top) != null ? _messageItemRef$curre3 : 0;
         setMessageActionsBelow(msgTop < MESSAGE_ACTIONS_FLIP_THRESHOLD);
         setMessageActionsShow(true);
         dispatch(setMessageMenuOpenedAC(message.id || message.tid));
@@ -51296,6 +51432,7 @@ var Message$1 = function Message(_ref) {
     }
   }, [dispatch, selectionIsActive]);
   React.useEffect(function () {
+    if (isPinnedMessagesList) return;
     if (isVisible) {
       if (setLastVisibleMessageId) {
         setLastVisibleMessageId(message);
@@ -51308,12 +51445,13 @@ var Message$1 = function Message(_ref) {
     } else {
       dispatch(removeVisibleMessageAC(message));
     }
-  }, [isVisible, setLastVisibleMessageId, message.id, handleSendReadMarker, channel.lastMessage, scrollToNewMessage.scrollToBottom, dispatch, message, isTabActive]);
+  }, [isVisible, setLastVisibleMessageId, message.id, handleSendReadMarker, channel.lastMessage, scrollToNewMessage.scrollToBottom, dispatch, message, isTabActive, isPinnedMessagesList]);
   React.useEffect(function () {
+    if (isPinnedMessagesList) return undefined;
     return function () {
       dispatch(removeVisibleMessageAC(message));
     };
-  }, [dispatch, message]);
+  }, [dispatch, isPinnedMessagesList, message]);
   React.useEffect(function () {
     if (!isPinnedMessagesList && !isVisible && infoPopupOpen) {
       setInfoPopupOpen(false);
@@ -51361,7 +51499,7 @@ var Message$1 = function Message(_ref) {
     if (!reactionsPopupOpen) {
       return undefined;
     }
-    var scrollContainer = document.getElementById('scrollableDiv');
+    var scrollContainer = document.getElementById(isPinnedMessagesList ? 'pinnedScrollableDiv' : 'scrollableDiv');
     if (!scrollContainer) {
       return undefined;
     }
@@ -51374,7 +51512,7 @@ var Message$1 = function Message(_ref) {
     return function () {
       scrollContainer.removeEventListener('scroll', handleChatScroll);
     };
-  }, [reactionsPopupOpen]);
+  }, [isPinnedMessagesList, reactionsPopupOpen]);
   React.useEffect(function () {
     document.addEventListener('mousedown', handleClick);
     return function () {
@@ -51408,8 +51546,8 @@ var Message$1 = function Message(_ref) {
     if (!nextMessage || nextMessage.type === exports.MESSAGE_TYPE.SYSTEM) {
       spacingBottom = '';
     } else if (nextMessageStartsUnreadSection) {
-      spacingBottom = differentUserMessageSpacing || '16px';
-    } else if (nextMessageUserID && (nextMessageUserID !== messageUserID || nextMessageFirstInInterval)) {
+      spacingBottom = isPinnedMessagesList ? '0' : differentUserMessageSpacing || '16px';
+    } else if (nextMessageUserID && (nextMessageUserID !== messageUserID || nextMessageFirstInInterval && !isPinnedMessagesList)) {
       spacingBottom = differentUserMessageSpacing || '16px';
     }
     spacingTop = sameUserMessageSpacing || '6px';
@@ -51422,7 +51560,7 @@ var Message$1 = function Message(_ref) {
       bottom: reactionsMargin || spacingBottom,
       top: spacingTop
     };
-  }, [nextMessageUserID, messageUserID, nextMessageFirstInInterval, (_message$reactionTota = message.reactionTotals) === null || _message$reactionTota === void 0 ? void 0 : _message$reactionTota.length]);
+  }, [nextMessageUserID, isPinnedMessagesList, messageUserID, nextMessageFirstInInterval, (_message$reactionTota = message.reactionTotals) === null || _message$reactionTota === void 0 ? void 0 : _message$reactionTota.length]);
   return /*#__PURE__*/React__default.createElement(MessageItem, {
     className: 'message_item',
     rtl: ownMessageOnRightSide && !message.incoming,
@@ -51457,7 +51595,7 @@ var Message$1 = function Message(_ref) {
     selectionIsActive: selectionIsActive,
     messageWidthPercent: messageWidthPercent,
     rtl: ownMessageOnRightSide && !message.incoming,
-    withAvatar: !(channel.type === DEFAULT_CHANNEL_TYPE.DIRECT && !showSenderNameOnDirectChannel) && !(!message.incoming && !showOwnAvatar),
+    withAvatar: !(isPinnedMessagesList && channel.type === DEFAULT_CHANNEL_TYPE.DIRECT) && !(channel.type === DEFAULT_CHANNEL_TYPE.DIRECT && !showSenderNameOnDirectChannel) && !(!message.incoming && !showOwnAvatar),
     className: 'messageContent'
   }, message.state === MESSAGE_STATUS.FAILED && (/*#__PURE__*/React__default.createElement(FailedMessageIcon, {
     rtl: ownMessageOnRightSide && !message.incoming,
@@ -51467,6 +51605,7 @@ var Message$1 = function Message(_ref) {
     ifLatestAndHasNotPreview: ifLatestAndHasNotPreview,
     channel: channel,
     message: message,
+    isPinnedMessagesList: isPinnedMessagesList,
     prevMessage: prevMessage,
     nextMessage: nextMessage,
     unreadMessageId: unreadMessageId,
@@ -51691,6 +51830,7 @@ var Message$1 = function Message(_ref) {
     reactionsContainerPadding: reactionsContainerPadding,
     reactionsDetailsPopupBorderRadius: reactionsDetailsPopupBorderRadius,
     reactionsDetailsPopupHeaderItemsStyle: reactionsDetailsPopupHeaderItemsStyle,
+    popupZIndex: isPinnedMessagesList ? 30 : undefined,
     onToggleReactionsPopup: handleToggleReactionsPopup,
     onReactionAddDelete: handleReactionAddDelete,
     onOpenUserProfile: handleOpenUserProfile
@@ -52034,6 +52174,19 @@ var DEFAULT_MEDIA_MIME_TYPES = new Set(['image/jpeg', 'image/png', 'image/gif',
 var isDefaultSupportedMediaMimeType = function isDefaultSupportedMediaMimeType(mimeType) {
   return DEFAULT_MEDIA_MIME_TYPES.has(mimeType.toLowerCase());
 };
+var getClipboardFiles = function getClipboardFiles(clipboardData) {
+  var files = Array.from(clipboardData.files || []);
+  if (files.length) {
+    return files;
+  }
+  return Array.from(clipboardData.items || []).filter(function (item) {
+    return item.kind === 'file';
+  }).map(function (item) {
+    return item.getAsFile();
+  }).filter(function (file) {
+    return file !== null;
+  });
+};
 var getMediaAttachmentValidationError = function getMediaAttachmentValidationError(file, _ref) {
   var _file$name$split$pop;
   var allowedExtensions = _ref.allowedExtensions,
@@ -52048,7 +52201,7 @@ var getMediaAttachmentValidationError = function getMediaAttachmentValidationErr
   });
   var extension = (_file$name$split$pop = file.name.split('.').pop()) === null || _file$name$split$pop === void 0 ? void 0 : _file$name$split$pop.toLowerCase();
   if (!extension || !supportedExtensions.includes(extension)) {
-    return invalidTypeMessage != null ? invalidTypeMessage : "Invalid file type. Allowed extensions are: " + supportedExtensions.join(', ') + ".";
+    return invalidTypeMessage != null ? invalidTypeMessage : "Invalid file type.";
   }
   return null;
 };
@@ -52104,6 +52257,7 @@ var MessageList = function MessageList(_ref) {
     retractVoteIcon = _ref.retractVoteIcon,
     endVoteIcon = _ref.endVoteIcon,
     pinnedMessageIcon = _ref.pinnedMessageIcon,
+    renderPinnedMessagePreview = _ref.renderPinnedMessagePreview,
     _ref$allowEditDeleteI = _ref.allowEditDeleteIncomingMessage,
     allowEditDeleteIncomingMessage = _ref$allowEditDeleteI === void 0 ? true : _ref$allowEditDeleteI,
     starIcon = _ref.starIcon,
@@ -52579,7 +52733,8 @@ var MessageList = function MessageList(_ref) {
         border: dateDividerBorder,
         backgroundColor: dateDividerBackgroundColor,
         borderRadius: dateDividerBorderRadius,
-        setLastVisibleMessageId: setLastVisibleMessageId
+        setLastVisibleMessageId: setLastVisibleMessageId,
+        renderPinnedMessagePreview: renderPinnedMessagePreview
       });
     }
     return /*#__PURE__*/React__default.createElement(MessageWrapper, {
@@ -52627,13 +52782,13 @@ var MessageList = function MessageList(_ref) {
       MessageActionsMenu: MessageActionsMenu,
       CustomMessageItem: CustomMessageItem,
       messageReaction: messageReaction,
-      editMessage: editMessage,
+      editMessage: isPinnedMessagesList ? false : editMessage,
       copyMessage: copyMessage,
-      replyMessage: replyMessage,
-      replyMessageInThread: replyMessageInThread,
+      replyMessage: isPinnedMessagesList ? false : replyMessage,
+      replyMessageInThread: isPinnedMessagesList ? false : replyMessageInThread,
       deleteMessage: deleteMessage,
       selectMessage: selectMessage,
-      showInfoMessage: showInfoMessage,
+      showInfoMessage: isPinnedMessagesList ? false : showInfoMessage,
       allowEditDeleteIncomingMessage: allowEditDeleteIncomingMessage,
       reportMessage: reportMessage,
       reactionIcon: reactionIcon,
@@ -52766,7 +52921,8 @@ var MessageList = function MessageList(_ref) {
   }, /*#__PURE__*/React__default.createElement(SvgChoseMedia, null)), "Drag & drop to send as media")))), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (channel === null || channel === void 0 ? void 0 : channel.id) && (/*#__PURE__*/React__default.createElement(PinnedMessagesBanner, {
     channelId: channel.id,
     pinIcon: pinnedMessageIcon,
-    onOpenList: openPinnedMessagesList
+    onOpenList: openPinnedMessagesList,
+    renderPinnedMessagePreview: renderPinnedMessagePreview
   })), /*#__PURE__*/React__default.createElement(ScrollViewport, null, isJumpingToItem && (/*#__PURE__*/React__default.createElement(JumpOverlay, null, /*#__PURE__*/React__default.createElement(JumpSpinner, {
     "$color": iconInactive
   }))), /*#__PURE__*/React__default.createElement(Container$j, {
@@ -52893,7 +53049,7 @@ var MessageList = function MessageList(_ref) {
         isUnreadMessage: false,
         nextMessageStartsUnreadSection: false,
         isHighlighted: false,
-        ifLatestAndHasNotPreview: false,
+        ifLatestAndHasNotPreview: index === 0,
         registerInMessagesIndex: false,
         isPinnedMessagesList: true
       });
@@ -53021,6 +53177,7 @@ var MessagesContainer = function MessagesContainer(_ref) {
     retractVoteIcon = _ref.retractVoteIcon,
     endVoteIcon = _ref.endVoteIcon,
     pinnedMessageIcon = _ref.pinnedMessageIcon,
+    renderPinnedMessagePreview = _ref.renderPinnedMessagePreview,
     reactionIconOrder = _ref.reactionIconOrder,
     openFrequentlyUsedReactions = _ref.openFrequentlyUsedReactions,
     fixEmojiCategoriesTitleOnTop = _ref.fixEmojiCategoriesTitleOnTop,
@@ -53188,6 +53345,7 @@ var MessagesContainer = function MessagesContainer(_ref) {
     retractVoteIcon: retractVoteIcon,
     endVoteIcon: endVoteIcon,
     pinnedMessageIcon: pinnedMessageIcon,
+    renderPinnedMessagePreview: renderPinnedMessagePreview,
     reactionIconOrder: reactionIconOrder,
     openFrequentlyUsedReactions: openFrequentlyUsedReactions,
     fixEmojiCategoriesTitleOnTop: fixEmojiCategoriesTitleOnTop,
@@ -54810,7 +54968,9 @@ function EmojisPopup$1(_ref2) {
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     textFootnote = _useColor[THEME_COLORS.TEXT_FOOTNOTE],
     border = _useColor[THEME_COLORS.BORDER],
-    scrollbarThumbColor = _useColor[THEME_COLORS.SURFACE_2];
+    scrollbarThumbColor = _useColor[THEME_COLORS.SURFACE_2],
+    background = _useColor[THEME_COLORS.BACKGROUND];
+  var theme = useSelector(themeSelector);
   var richTextEditor;
   try {
     var _useLexicalComposerCo = LexicalComposerContext.useLexicalComposerContext(),
@@ -54889,6 +55049,7 @@ function EmojisPopup$1(_ref2) {
       }
     }, 300);
   }, []);
+  console.log(theme, theme === 'dark' ? background : scrollbarThumbColor);
   return /*#__PURE__*/React__default.createElement(Container$k, {
     backgroundColor: backgroundSections,
     borderColor: border,
@@ -54921,7 +55082,7 @@ function EmojisPopup$1(_ref2) {
   }, getEmojisCategoryTitle(activeCollection))), /*#__PURE__*/React__default.createElement(EmojiSection$1, {
     ref: emojiContainerRef,
     onScroll: handleEmojiListScroll,
-    scrollbarThumbColor: scrollbarThumbColor
+    scrollbarThumbColor: theme === 'dark' ? background : scrollbarThumbColor
   }, /*#__PURE__*/React__default.createElement(AllEmojis$1, null, EMOJIS.map(function (emojiBigCollection, bigColIndex) {
     var mainCollectionKey = emojiBigCollection.key;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -55013,25 +55174,13 @@ var Emoji$1 = styled__default.li(_templateObject8$m || (_templateObject8$m = _ta
   return props.hoverBackgroundColor;
 });
 
-var waitForImageAttachmentPreparation = function waitForImageAttachmentPreparation(attachments, preparations) {
-  try {
-    return Promise.resolve(Promise.all(attachments.filter(function (attachment) {
-      return attachment.type === attachmentTypes.image;
-    }).map(function (attachment) {
-      return attachment.tid ? preparations.get(attachment.tid) : undefined;
-    }))).then(function () {});
-  } catch (e) {
-    return Promise.reject(e);
-  }
-};
 var mergePreparedAttachmentPatches = function mergePreparedAttachmentPatches(attachments, patches) {
   return attachments.map(function (attachment) {
     return _extends({}, attachment, attachment.tid ? patches.get(attachment.tid) : undefined);
   });
 };
 var getOutgoingAttachmentType = function getOutgoingAttachmentType(attachment) {
-  var _attachment$data, _attachment$data$type;
-  return attachment.type === attachmentTypes.file && (_attachment$data = attachment.data) !== null && _attachment$data !== void 0 && (_attachment$data$type = _attachment$data.type) !== null && _attachment$data$type !== void 0 && _attachment$data$type.startsWith('video/') ? attachmentTypes.video : attachment.type;
+  return attachment.type;
 };
 
 var CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
@@ -55322,6 +55471,9 @@ var AudioRecord = function AudioRecord(_ref) {
   var recordButtonRef = React.useRef(null);
   var audioElements = React.useRef({});
   var intervalRef = React.useRef({});
+  var isStoppingRef = React.useRef(false);
+  var isStartingRef = React.useRef(false);
+  var isRecordingRef = React.useRef(false);
   var currentRecordedFile = React.useMemo(function () {
     var current = getAudioRecordingFromMap(currentChannelId) || recordedFile;
     return current;
@@ -55399,17 +55551,13 @@ var AudioRecord = function AudioRecord(_ref) {
       setPlayAudio(false);
       clearInterval(intervalRef.current[id]);
     });
-    audio.addEventListener('error', function () {
-      var _audio$error;
-      log.error('Audio playback error:', (_audio$error = audio.error) === null || _audio$error === void 0 ? void 0 : _audio$error.message);
-    });
     audio.src = fileData.objectUrl;
   };
   var startRecording = function startRecording(cId) {
     try {
       var id = cId || currentChannelId;
       try {
-        if (recording) {
+        if (recording || isRecordingRef.current) {
           stopRecording(true, id, false, recorder);
         } else if (currentRecordedFile) {
           if (!currentRecordedFile.dur) {
@@ -55425,8 +55573,16 @@ var AudioRecord = function AudioRecord(_ref) {
           dispatch(setChannelDraftMessageIsRemovedAC(id));
           sendRecordedFile(currentRecordedFile, id);
         } else {
-          if (!recorder) return Promise.resolve();
+          if (!recorder) {
+            return Promise.resolve();
+          }
+          if (isStartingRef.current) {
+            return Promise.resolve();
+          }
+          isStartingRef.current = true;
           recorder.start().then(function () {
+            isStartingRef.current = false;
+            isRecordingRef.current = true;
             handleStartRecording();
             setAudioRecordingToMap(id, {
               file: null,
@@ -55515,17 +55671,19 @@ var AudioRecord = function AudioRecord(_ref) {
             };
             soundAllowed(stream);
           })["catch"](function (e) {
+            isStartingRef.current = false;
+            isRecordingRef.current = false;
             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) {
+        isStartingRef.current = false;
+        isRecordingRef.current = false;
         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();
     } catch (e) {
@@ -55533,7 +55691,12 @@ var AudioRecord = function AudioRecord(_ref) {
     }
   };
   var cancelRecording = React.useCallback(function () {
+    if (isStoppingRef.current) {
+      return;
+    }
     handleStopRecording();
+    isStartingRef.current = false;
+    isRecordingRef.current = false;
     if (currentRecordedFile) {
       dispatch(setChannelDraftMessageIsRemovedAC(currentChannelId));
       if (currentRecordedFile.objectUrl && currentRecordedFile.objectUrl.startsWith('blob:')) {
@@ -55554,10 +55717,21 @@ var AudioRecord = function AudioRecord(_ref) {
     setShowRecording(false);
   }, [currentRecordedFile, currentChannelId, setShowRecording, setRecordedFile]);
   var stopRecording = React.useCallback(function (send, cId, draft, recorder) {
+    var id = cId || channelId;
+    if (isStoppingRef.current) {
+      return;
+    }
+    if (!recorder) {
+      return;
+    }
+    isStoppingRef.current = true;
+    isStartingRef.current = false;
+    isRecordingRef.current = false;
     handleStopRecording();
     shouldDraw = false;
-    var id = cId || channelId;
-    recorder === null || recorder === void 0 ? void 0 : recorder.stop().getMp3().then(function (_ref2) {
+    Promise.resolve().then(function () {
+      return recorder.stop().getMp3();
+    }).then(function (_ref2) {
       var buffer = _ref2[0],
         blob = _ref2[1];
       var file = new File(buffer, 'record.mp3', {
@@ -55567,6 +55741,8 @@ var AudioRecord = function AudioRecord(_ref) {
       var audioContext = new (window.AudioContext || window.webkitAudioContext)();
       var reader = new FileReader();
       reader.onload = function (event) {
+        var _event$target;
+        var audioData = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result;
         var closeDecodeContext = function closeDecodeContext() {
           if (audioContext.state !== 'closed') {
             audioContext.close()["catch"](function () {
@@ -55574,76 +55750,100 @@ var AudioRecord = function AudioRecord(_ref) {
             });
           }
         };
-        audioContext.decodeAudioData(event.target.result, function (audioBuffer) {
+        var handleDecodeError = function handleDecodeError() {
           closeDecodeContext();
-          var numberOfSegments = 50;
-          var segmentSize = Math.floor(audioBuffer.length / numberOfSegments);
-          var waveform = [];
-          for (var i = 0; i < numberOfSegments; i++) {
-            var start = i * segmentSize;
-            var end = start + segmentSize;
-            var segment = audioBuffer.getChannelData(0).slice(start, end);
-            var maxAmplitude = 0;
-            for (var j = 0; j < segment.length; j++) {
-              var val = segment[j];
-              var absVal = val < 0 ? -val : val;
-              if (absVal > maxAmplitude) {
-                maxAmplitude = absVal;
-              }
-            }
-            waveform.push(Math.floor(maxAmplitude * 1000));
-          }
           setStartRecording(false);
-          var objectUrl = URL.createObjectURL(blob);
-          var durationInt = Math.round(audioBuffer.duration);
-          if (send) {
-            if (!durationInt) {
-              if (objectUrl.startsWith('blob:')) {
-                URL.revokeObjectURL(objectUrl);
+          setShowRecording(false);
+          removeAudioRecordingFromMap(id);
+          dispatch(setChannelDraftMessageIsRemovedAC(id));
+          isStoppingRef.current = false;
+        };
+        try {
+          var decodeResult = audioContext.decodeAudioData(audioData, function (audioBuffer) {
+            try {
+              closeDecodeContext();
+              var numberOfSegments = 50;
+              var segmentSize = Math.floor(audioBuffer.length / numberOfSegments);
+              var waveform = [];
+              for (var i = 0; i < numberOfSegments; i++) {
+                var start = i * segmentSize;
+                var end = start + segmentSize;
+                var segment = audioBuffer.getChannelData(0).slice(start, end);
+                var maxAmplitude = 0;
+                for (var j = 0; j < segment.length; j++) {
+                  var val = segment[j];
+                  var absVal = val < 0 ? -val : val;
+                  if (absVal > maxAmplitude) {
+                    maxAmplitude = absVal;
+                  }
+                }
+                waveform.push(Math.floor(maxAmplitude * 1000));
               }
-              setShowRecording(false);
-              removeAudioRecordingFromMap(id);
-              dispatch(setChannelDraftMessageIsRemovedAC(id));
-              return;
-            }
-            sendRecordedFile({
-              file: file,
-              objectUrl: objectUrl,
-              thumb: waveform,
-              dur: durationInt
-            }, id);
-            setShowRecording(false);
-            removeAudioRecordingFromMap(id);
-            dispatch(setChannelDraftMessageIsRemovedAC(id));
-          } else {
-            if (!draft) {
-              setRecordedFile({
-                file: file,
-                objectUrl: objectUrl,
-                thumb: waveform,
-                dur: durationInt
-              });
-            }
-            var audioRecording = {
-              file: file,
-              objectUrl: objectUrl,
-              thumb: waveform,
-              dur: durationInt
-            };
-            setAudioRecordingToMap(id, audioRecording);
-            if (draft) {
-              initAudioPlayback(draft, id, audioRecording);
-            }
+              setStartRecording(false);
+              var objectUrl = URL.createObjectURL(blob);
+              var durationInt = Math.round(audioBuffer.duration);
+              if (send) {
+                if (!durationInt) {
+                  if (objectUrl.startsWith('blob:')) {
+                    URL.revokeObjectURL(objectUrl);
+                  }
+                  setShowRecording(false);
+                  removeAudioRecordingFromMap(id);
+                  dispatch(setChannelDraftMessageIsRemovedAC(id));
+                  isStoppingRef.current = false;
+                  return;
+                }
+                sendRecordedFile({
+                  file: file,
+                  objectUrl: objectUrl,
+                  thumb: waveform,
+                  dur: durationInt
+                }, id);
+                setShowRecording(false);
+                removeAudioRecordingFromMap(id);
+                dispatch(setChannelDraftMessageIsRemovedAC(id));
+              } else {
+                if (!draft) {
+                  setRecordedFile({
+                    file: file,
+                    objectUrl: objectUrl,
+                    thumb: waveform,
+                    dur: durationInt
+                  });
+                }
+                var audioRecording = {
+                  file: file,
+                  objectUrl: objectUrl,
+                  thumb: waveform,
+                  dur: durationInt
+                };
+                setAudioRecordingToMap(id, audioRecording);
+                if (draft) {
+                  initAudioPlayback(draft, id, audioRecording);
+                }
+              }
+              isStoppingRef.current = false;
+            } catch (_unused) {}
+          }, handleDecodeError);
+          if (decodeResult && typeof decodeResult["catch"] === 'function') {
+            decodeResult["catch"](function () {
+              return undefined;
+            });
           }
-        }, function (e) {
-          closeDecodeContext();
-          log.info('Error decoding audio data: ' + e.err);
-        });
+        } catch (_unused2) {}
+      };
+      reader.onerror = function () {
+        if (audioContext.state !== 'closed') {
+          audioContext.close()["catch"](function () {
+            return undefined;
+          });
+        }
+        isStoppingRef.current = false;
       };
       reader.readAsArrayBuffer(blob);
-    })["catch"](function (e) {
+    })["catch"](function () {
+      isStoppingRef.current = false;
       handleStopRecording();
-      log.error(e);
     });
   }, [sendRecordedFile, setShowRecording, setAudioRecordingToMap, setRecordedFile, handleStopRecording, channelId]);
   var handlePlayPause = function handlePlayPause(cId) {
@@ -55660,8 +55860,7 @@ var AudioRecord = function AudioRecord(_ref) {
           setCurrentTimeSeconds(time);
         }
       }, 10);
-      audio.play()["catch"](function (e) {
-        log.error('Audio play failed:', e);
+      audio.play()["catch"](function () {
         setPlayAudio(false);
       });
     } else {
@@ -55755,9 +55954,7 @@ var AudioRecord = function AudioRecord(_ref) {
               bitRate: 128
             });
             setRecorder(newRecorder);
-          } catch (e) {
-            log.error('Failed to init mic-recorder-to-mp3', e);
-          }
+          } catch (_unused3) {}
         }
       } catch (e) {
         Promise.reject(e);
@@ -56414,6 +56611,52 @@ var SettingItem = styled__default.div(_templateObject9$k || (_templateObject9$k
   return props.color;
 });
 
+var getDraftHandoff = function getDraftHandoff(_ref) {
+  var channelId = _ref.channelId,
+    nextChannelId = _ref.nextChannelId,
+    text = _ref.text,
+    mentionedUsers = _ref.mentionedUsers,
+    messageForReply = _ref.messageForReply,
+    editorState = _ref.editorState,
+    bodyAttributes = _ref.bodyAttributes,
+    attachments = _ref.attachments,
+    viewOnce = _ref.viewOnce;
+  if (!channelId || channelId === nextChannelId) {
+    return null;
+  }
+  if (text.trim() || attachments.length) {
+    return {
+      channelId: channelId,
+      draft: {
+        text: text,
+        mentionedUsers: mentionedUsers,
+        messageForReply: messageForReply,
+        editorState: editorState,
+        bodyAttributes: bodyAttributes,
+        attachments: attachments,
+        viewOnce: viewOnce
+      },
+      persist: true
+    };
+  }
+  if (messageForReply) {
+    return {
+      channelId: channelId,
+      draft: {
+        text: '',
+        mentionedUsers: mentionedUsers,
+        messageForReply: messageForReply,
+        editorState: editorState,
+        bodyAttributes: bodyAttributes,
+        attachments: [],
+        viewOnce: false
+      },
+      persist: false
+    };
+  }
+  return null;
+};
+
 var _templateObject$Z, _templateObject2$V, _templateObject3$L, _templateObject4$E, _templateObject5$A, _templateObject6$v, _templateObject7$r, _templateObject8$o, _templateObject9$l, _templateObject0$j, _templateObject1$f, _templateObject10$d, _templateObject11$a, _templateObject12$9, _templateObject13$7, _templateObject14$6, _templateObject15$4, _templateObject16$3, _templateObject17$3, _templateObject18$3, _templateObject19$3, _templateObject20$3, _templateObject21$3, _templateObject22$2, _templateObject23$2, _templateObject24$2, _templateObject25$2, _templateObject26$2, _templateObject27$2, _templateObject28$2, _templateObject29$2, _templateObject30$2, _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;
@@ -56478,8 +56721,9 @@ function ClearEditorPlugin(_ref2) {
 function onError(error) {
   log.error(error);
 }
-var prevActiveChannelId;
 var attachmentsUpdate = [];
+var UNSUPPORTED_PASTED_FILE_MESSAGE = 'This file format is not supported.';
+var useComposerLayoutEffect = CAN_USE_DOM ? React.useLayoutEffect : React.useEffect;
 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, _linkPreview$metadata19, _linkPreview$metadata20, _linkPreview$metadata21, _pollOptions$choosePo, _getAudioRecordingFro2;
   var handleAttachmentSelected = _ref3.handleAttachmentSelected,
@@ -56608,101 +56852,116 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   var _useState = React.useState(false),
     showRecording = _useState[0],
     setShowRecording = _useState[1];
+  var _useState2 = React.useState(0),
+    setAudioRecordingRevision = _useState2[1];
+  var handleShowRecording = React.useCallback(function (start) {
+    setShowRecording(start);
+    setAudioRecordingRevision(function (revision) {
+      return revision + 1;
+    });
+  }, []);
   var _usePermissions = usePermissions(activeChannel.userRole),
     checkActionPermission = _usePermissions[0];
-  var _useState2 = React.useState(false),
-    listenerIsAdded = _useState2[0],
-    setListenerIsAdded = _useState2[1];
-  var _useState3 = React.useState(''),
-    messageText = _useState3[0],
-    setMessageText = _useState3[1];
+  var _useState3 = React.useState(false),
+    listenerIsAdded = _useState3[0],
+    setListenerIsAdded = _useState3[1];
   var _useState4 = React.useState(''),
-    editMessageText = _useState4[0],
-    setEditMessageText = _useState4[1];
-  var _useState5 = React.useState(null),
-    restoredEditMessage = _useState5[0],
-    setRestoredEditMessage = _useState5[1];
-  var _useState6 = React.useState({}),
-    readyVideoAttachments = _useState6[0],
-    setReadyVideoAttachments = _useState6[1];
-  var _useState7 = React.useState(false),
-    showChooseAttachmentType = _useState7[0],
-    setShowChooseAttachmentType = _useState7[1];
+    messageText = _useState4[0],
+    setMessageText = _useState4[1];
+  var _useState5 = React.useState(''),
+    editMessageText = _useState5[0],
+    setEditMessageText = _useState5[1];
+  var _useState6 = React.useState(null),
+    restoredEditMessage = _useState6[0],
+    setRestoredEditMessage = _useState6[1];
+  var _useState7 = React.useState({}),
+    readyVideoAttachments = _useState7[0],
+    setReadyVideoAttachments = _useState7[1];
   var _useState8 = React.useState(false),
-    isEmojisOpened = _useState8[0],
-    setIsEmojisOpened = _useState8[1];
+    showChooseAttachmentType = _useState8[0],
+    setShowChooseAttachmentType = _useState8[1];
   var _useState9 = React.useState(false),
-    emojisInRightSide = _useState9[0],
-    setEmojisInRightSide = _useState9[1];
-  var _useState0 = React.useState(0),
-    emojisPopupLeftPosition = _useState0[0],
-    setEmojisPopupLeftPosition = _useState0[1];
+    isEmojisOpened = _useState9[0],
+    setIsEmojisOpened = _useState9[1];
+  var _useState0 = React.useState(false),
+    emojisInRightSide = _useState0[0],
+    setEmojisInRightSide = _useState0[1];
   var _useState1 = React.useState(0),
-    emojisPopupBottomPosition = _useState1[0],
-    setEmojisPopupBottomPosition = _useState1[1];
-  var _useState10 = React.useState(false),
-    addAttachmentsInRightSide = _useState10[0],
-    setAddAttachmentsInRightSide = _useState10[1];
+    emojisPopupLeftPosition = _useState1[0],
+    setEmojisPopupLeftPosition = _useState1[1];
+  var _useState10 = React.useState(0),
+    emojisPopupBottomPosition = _useState10[0],
+    setEmojisPopupBottomPosition = _useState10[1];
   var _useState11 = React.useState(false),
-    showPoll = _useState11[0],
-    setShowPoll = _useState11[1];
-  var _useState12 = React.useState({
+    addAttachmentsInRightSide = _useState11[0],
+    setAddAttachmentsInRightSide = _useState11[1];
+  var _useState12 = React.useState(false),
+    showPoll = _useState12[0],
+    setShowPoll = _useState12[1];
+  var _useState13 = React.useState({
       clear: false
     }),
-    shouldClearEditor = _useState12[0],
-    setShouldClearEditor = _useState12[1];
-  var _useState13 = React.useState([]),
-    messageBodyAttributes = _useState13[0],
-    setMessageBodyAttributes = _useState13[1];
+    shouldClearEditor = _useState13[0],
+    setShouldClearEditor = _useState13[1];
   var _useState14 = React.useState([]),
-    mentionedUsers = _useState14[0],
-    setMentionedUsers = _useState14[1];
-  var _useState15 = React.useState(''),
-    browser = _useState15[0],
-    setBrowser = _useState15[1];
-  var _useState16 = React.useState(false),
-    mentionsIsOpen = _useState16[0],
-    setMentionsIsOpen = _useState16[1];
-  var _useState17 = React.useState(),
-    inputContainerHeight = _useState17[0],
-    setInputContainerHeight = _useState17[1];
-  var selectedText = React.useRef(null);
+    messageBodyAttributes = _useState14[0],
+    setMessageBodyAttributes = _useState14[1];
+  var _useState15 = React.useState([]),
+    mentionedUsers = _useState15[0],
+    setMentionedUsers = _useState15[1];
+  var _useState16 = React.useState(''),
+    browser = _useState16[0],
+    setBrowser = _useState16[1];
+  var _useState17 = React.useState(false),
+    mentionsIsOpen = _useState17[0],
+    setMentionsIsOpen = _useState17[1];
   var _useState18 = React.useState(),
-    typingTimout = _useState18[0],
-    setTypingTimout = _useState18[1];
+    inputContainerHeight = _useState18[0],
+    setInputContainerHeight = _useState18[1];
+  var selectedText = React.useRef(null);
   var _useState19 = React.useState(),
-    inTypingStateTimout = _useState19[0],
-    setInTypingStateTimout = _useState19[1];
-  var _useState20 = React.useState(false),
-    inTypingState = _useState20[0],
-    setInTypingState = _useState20[1];
+    typingTimout = _useState19[0],
+    setTypingTimout = _useState19[1];
+  var _useState20 = React.useState(),
+    inTypingStateTimout = _useState20[0],
+    setInTypingStateTimout = _useState20[1];
   var _useState21 = React.useState(false),
-    sendMessageIsActive = _useState21[0],
-    setSendMessageIsActive = _useState21[1];
-  var _useState22 = React.useState([]),
-    attachments = _useState22[0],
-    setAttachments = _useState22[1];
+    inTypingState = _useState21[0],
+    setInTypingState = _useState21[1];
+  var _useState22 = React.useState(false),
+    sendMessageIsActive = _useState22[0],
+    setSendMessageIsActive = _useState22[1];
   var _useState23 = React.useState(false),
-    forwardPopupOpen = _useState23[0],
-    setForwardPopupOpen = _useState23[1];
-  var _useState24 = React.useState(false),
-    deletePopupOpen = _useState24[0],
-    setDeletePopupOpen = _useState24[1];
+    isSendMessageInFlight = _useState23[0],
+    setIsSendMessageInFlight = _useState23[1];
+  var _useState24 = React.useState([]),
+    attachments = _useState24[0],
+    setAttachments = _useState24[1];
+  var attachmentsRef = React.useRef([]);
   var _useState25 = React.useState(false),
-    isIncomingMessage = _useState25[0],
-    setIsIncomingMessage = _useState25[1];
-  var _useState26 = React.useState('.jpg,.jpeg,.png,.gif,.mp4,.mov,.avi,.wmv,.flv,.webm,.jfif'),
-    mediaExtensions = _useState26[0],
-    setMediaExtensions = _useState26[1];
-  var _useState27 = React.useState(''),
-    uploadErrorMessage = _useState27[0],
-    setUploadErrorMessage = _useState27[1];
-  var _useState28 = React.useState(false),
-    viewOnce = _useState28[0],
-    setViewOnce = _useState28[1];
-  var _useState29 = React.useState(areDraftMessagesHydrated()),
-    draftsHydrated = _useState29[0],
-    setDraftsHydrated = _useState29[1];
+    forwardPopupOpen = _useState25[0],
+    setForwardPopupOpen = _useState25[1];
+  var _useState26 = React.useState(false),
+    deletePopupOpen = _useState26[0],
+    setDeletePopupOpen = _useState26[1];
+  var _useState27 = React.useState(false),
+    isIncomingMessage = _useState27[0],
+    setIsIncomingMessage = _useState27[1];
+  var _useState28 = React.useState('.jpg,.jpeg,.png,.gif,.mp4,.mov,.avi,.wmv,.flv,.webm,.jfif'),
+    mediaExtensions = _useState28[0],
+    setMediaExtensions = _useState28[1];
+  var _useState29 = React.useState(''),
+    uploadErrorMessage = _useState29[0],
+    setUploadErrorMessage = _useState29[1];
+  var _useState30 = React.useState(false),
+    viewOnce = _useState30[0],
+    setViewOnce = _useState30[1];
+  var _useState31 = React.useState(areDraftMessagesHydrated()),
+    draftsHydrated = _useState31[0],
+    setDraftsHydrated = _useState31[1];
+  var _useState32 = React.useState(activeChannel.id || ''),
+    composerChannelId = _useState32[0],
+    setComposerChannelId = _useState32[1];
   var typingOrRecordingIndicator = useSelector(typingOrRecordingIndicatorArraySelector(activeChannel.id));
   var contactsMap = useSelector(contactsMapSelector);
   var connectionStatus = useSelector(connectionStatusSelector, reactRedux.shallowEqual);
@@ -56715,40 +56974,47 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   var metadataDebounceRef = React.useRef(null);
   var attachmentPreparationPromisesRef = React.useRef(new Map());
   var preparedAttachmentPatchesRef = React.useRef(new Map());
+  var isSendMessageInFlightRef = React.useRef(false);
   var sendMessageWrapperRef = React.useRef(null);
   var restoringDraftRef = React.useRef(false);
   var restoredDraftChannelIdRef = React.useRef(null);
   var isNavigatingChannelRef = React.useRef(false);
-  var _useState30 = React.useState(),
-    realEditorState = _useState30[0],
-    setRealEditorState = _useState30[1];
-  var _useState31 = React.useState(null),
-    floatingAnchorElem = _useState31[0],
-    setFloatingAnchorElem = _useState31[1];
-  var _useState32 = React.useState(false),
-    isSmallWidthViewport = _useState32[0],
-    setIsSmallWidthViewport = _useState32[1];
-  var _useState33 = React.useState(false),
-    isScrolling = _useState33[0],
-    setIsScrolling = _useState33[1];
+  var releaseSendMessageLock = function releaseSendMessageLock() {
+    Promise.resolve().then(function () {
+      isSendMessageInFlightRef.current = false;
+      setIsSendMessageInFlight(false);
+    });
+  };
+  var _useState33 = React.useState(),
+    realEditorState = _useState33[0],
+    setRealEditorState = _useState33[1];
   var _useState34 = React.useState(null),
-    linkPreview = _useState34[0],
-    setLinkPreview = _useState34[1];
-  var _useState35 = React.useState(null),
-    detectedUrl = _useState35[0],
-    setDetectedUrl = _useState35[1];
-  var _useState36 = React.useState(new Set()),
-    dismissedUrls = _useState36[0],
-    setDismissedUrls = _useState36[1];
-  var _useState37 = React.useState(false),
-    isClosingPreview = _useState37[0],
-    setIsClosingPreview = _useState37[1];
-  var _useState38 = React.useState(false),
-    replyLinkPreviewImageFailed = _useState38[0],
-    setReplyLinkPreviewImageFailed = _useState38[1];
-  var _useState39 = React.useState(false),
-    linkPreviewImageFailed = _useState39[0],
-    setLinkPreviewImageFailed = _useState39[1];
+    floatingAnchorElem = _useState34[0],
+    setFloatingAnchorElem = _useState34[1];
+  var _useState35 = React.useState(false),
+    isSmallWidthViewport = _useState35[0],
+    setIsSmallWidthViewport = _useState35[1];
+  var _useState36 = React.useState(false),
+    isScrolling = _useState36[0],
+    setIsScrolling = _useState36[1];
+  var _useState37 = React.useState(null),
+    linkPreview = _useState37[0],
+    setLinkPreview = _useState37[1];
+  var _useState38 = React.useState(null),
+    detectedUrl = _useState38[0],
+    setDetectedUrl = _useState38[1];
+  var _useState39 = React.useState(new Set()),
+    dismissedUrls = _useState39[0],
+    setDismissedUrls = _useState39[1];
+  var _useState40 = React.useState(false),
+    isClosingPreview = _useState40[0],
+    setIsClosingPreview = _useState40[1];
+  var _useState41 = React.useState(false),
+    replyLinkPreviewImageFailed = _useState41[0],
+    setReplyLinkPreviewImageFailed = _useState41[1];
+  var _useState42 = React.useState(false),
+    linkPreviewImageFailed = _useState42[0],
+    setLinkPreviewImageFailed = _useState42[1];
   var addAttachmentByMenu = showChooseFileAttachment && showChooseMediaAttachment;
   var linkify = new LinkifyIt();
   var oGMetadata = useSelector(function (state) {
@@ -56759,8 +57025,52 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       return setDraftsHydrated(areDraftMessagesHydrated());
     });
   }, []);
+  useComposerLayoutEffect(function () {
+    var nextChannelId = activeChannel.id || '';
+    if (composerChannelId === nextChannelId) {
+      return;
+    }
+    if (draftsHydrated) {
+      var handoff = getDraftHandoff({
+        channelId: composerChannelId,
+        nextChannelId: nextChannelId,
+        text: messageText,
+        mentionedUsers: mentionedUsers,
+        messageForReply: messageForReply,
+        editorState: realEditorState,
+        bodyAttributes: messageBodyAttributes,
+        attachments: attachments,
+        viewOnce: viewOnce
+      });
+      if (handoff) {
+        setDraftMessageToMap(handoff.channelId, handoff.draft, {
+          persist: handoff.persist
+        });
+      }
+    }
+    restoringDraftRef.current = false;
+    restoredDraftChannelIdRef.current = null;
+    isNavigatingChannelRef.current = !!messageForReply;
+    setComposerChannelId(nextChannelId);
+    setMessageText('');
+    setEditMessageText('');
+    setRestoredEditMessage(null);
+    setMessageBodyAttributes([]);
+    setMentionedUsers([]);
+    setAttachments([]);
+    attachmentsRef.current = [];
+    setViewOnce(false);
+    setSendMessageIsActive(false);
+    setShouldClearEditor({
+      clear: true
+    });
+    attachmentsUpdate = [];
+    clearTimeout(typingTimout);
+    dispatch(setMessageForReplyAC(null));
+    dispatch(setMessageToEditAC(null));
+  }, [activeChannel.id, composerChannelId]);
   React.useEffect(function () {
-    if (!draftsHydrated || !activeChannel.id) {
+    if (!draftsHydrated || !activeChannel.id || composerChannelId !== activeChannel.id) {
       return;
     }
     var draftMessage = getDraftMessageFromMap(activeChannel.id);
@@ -56787,6 +57097,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     setMessageText(draftMessage.text || '');
     setMentionedUsers(draftMessage.mentionedUsers || []);
     setAttachments(draftMessage.attachments || []);
+    attachmentsRef.current = draftMessage.attachments || [];
     setViewOnce(!!draftMessage.viewOnce);
     if (draftMessage.messageForReply) dispatch(setMessageForReplyAC(draftMessage.messageForReply));
     setShouldClearEditor({
@@ -56794,7 +57105,27 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       draftMessage: draftMessage
     });
     restoredDraftChannelIdRef.current = activeChannel.id;
-  }, [draftsHydrated, activeChannel.id]);
+  }, [draftsHydrated, activeChannel.id, composerChannelId]);
+  var setComposerMessageText = React.useCallback(function (text) {
+    if (composerChannelId === activeChannel.id) {
+      setMessageText(text);
+    }
+  }, [activeChannel.id, composerChannelId]);
+  var setComposerEditMessageText = React.useCallback(function (text) {
+    if (composerChannelId === activeChannel.id) {
+      setEditMessageText(text);
+    }
+  }, [activeChannel.id, composerChannelId]);
+  var setComposerMessageBodyAttributes = React.useCallback(function (attributes) {
+    if (composerChannelId === activeChannel.id) {
+      setMessageBodyAttributes(attributes);
+    }
+  }, [activeChannel.id, composerChannelId]);
+  var setComposerMentionedUsers = React.useCallback(function (users) {
+    if (composerChannelId === activeChannel.id) {
+      setMentionedUsers(users);
+    }
+  }, [activeChannel.id, composerChannelId]);
   React.useEffect(function () {
     setReplyLinkPreviewImageFailed(false);
   }, [messageForReply === null || messageForReply === void 0 ? void 0 : messageForReply.id, messageForReply === null || messageForReply === void 0 ? void 0 : messageForReply.tid]);
@@ -56943,187 +57274,178 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       var isEnter = (code === 'Enter' || code === 'NumpadEnter') && shiftKey === false;
       var isPoll = Boolean(pollDetails && pollDetails.options.length > 0 && pollDetails.name.trim());
       var messageTextForSend = isPoll ? pollDetails === null || pollDetails === void 0 ? void 0 : pollDetails.name.trim() : messageText.trim();
-      var shouldSend = (isEnter || type === 'click') && (messageToEdit || messageTextForSend || attachments.length && attachments.length > 0);
+      var composerAttachments = attachmentsRef.current;
+      var shouldSend = (isEnter || type === 'click') && (messageToEdit || messageTextForSend || composerAttachments.length && composerAttachments.length > 0);
       if (isEnter) {
         event.preventDefault();
-        if (!(messageTextForSend !== null && messageTextForSend !== void 0 && messageTextForSend.trim()) && !attachments.length && !messageToEdit) {
+        if (!(messageTextForSend !== null && messageTextForSend !== void 0 && messageTextForSend.trim()) && !composerAttachments.length && !messageToEdit) {
           setShouldClearEditor({
             clear: true
           });
         }
       }
-      var _temp6 = function () {
-        if (shouldSend && !mentionsIsOpen) {
-          var _temp5 = function _temp5() {
-            setAttachments([]);
-            attachmentsUpdate = [];
-            removeDraftMessageFromMap(activeChannel.id);
-            dispatch(setChannelDraftMessageIsRemovedAC(activeChannel.id));
-            setViewOnce(false);
-            handleCloseReply();
-            setShouldClearEditor({
-              clear: true
-            });
-            setMentionedUsers([]);
-            setMessageBodyAttributes([]);
-            closePreviewWithAnimation(function () {
-              setDetectedUrl(null);
-              setDismissedUrls(new Set());
-            });
-            dispatch(setCloseSearchChannelsAC(true));
-          };
+      if (shouldSend && !mentionsIsOpen) {
+        if (isSendMessageInFlightRef.current) {
           event.preventDefault();
           event.stopPropagation();
-          var _temp4 = function () {
-            if (messageToEdit) {
-              handleEditMessage();
-            } else {
-              var _temp7 = function () {
-                if (messageTextForSend !== null && messageTextForSend !== void 0 && messageTextForSend.trim() || attachments.length && attachments.length > 0) {
-                  var _temp2 = function _temp2() {
-                    setMessageText('');
-                    fileUploader.current.value = '';
-                    if (inTypingState) {
-                      handleSendTypingState(false);
-                    }
-                    clearTimeout(typingTimout);
-                    setTypingTimout(undefined);
-                  };
-                  var _trimMessageBodyWithA = trimMessageBodyWithAttributes(messageText, messageBodyAttributes),
-                    messageTexToSend = _trimMessageBodyWithA.body,
-                    adjustedBodyAttributes = _trimMessageBodyWithA.bodyAttributes;
-                  var messageToSend = {
-                    body: messageTexToSend,
-                    bodyAttributes: adjustedBodyAttributes,
-                    mentionedUsers: [],
-                    attachments: [],
-                    type: 'text'
-                  };
-                  var mentionUsersToSend = [];
-                  if (adjustedBodyAttributes && adjustedBodyAttributes.length) {
-                    adjustedBodyAttributes.forEach(function (att) {
-                      if (att.type === 'mention') {
-                        var mentionsToFind = [].concat(mentionedUsers);
-                        var draftMessage = getDraftMessageFromMap(activeChannel.id);
-                        if (draftMessage) {
-                          mentionsToFind = [].concat(draftMessage.mentionedUsers, mentionedUsers);
-                        }
-                        var mentionToAdd = mentionsToFind.find(function (mention) {
-                          return mention.id === att.metadata;
-                        });
-                        mentionUsersToSend.push(mentionToAdd || {
-                          id: att.metadata
-                        });
-                      }
-                    });
-                  }
-                  messageToSend.mentionedUsers = mentionUsersToSend;
-                  if (messageForReply) {
-                    messageToSend.parentMessage = messageForReply;
-                  }
-                  var linkAttachment;
-                  if (messageTexToSend) {
-                    var _LinkifyIt$match;
-                    var protocolMatch = /https?:\/\/\S+/.exec(messageTexToSend);
-                    var linkifyMatchResult = !protocolMatch ? (_LinkifyIt$match = new LinkifyIt().match(messageTexToSend)) === null || _LinkifyIt$match === void 0 ? void 0 : _LinkifyIt$match[0] : null;
-                    var url = protocolMatch ? protocolMatch[0] : linkifyMatchResult ? linkifyMatchResult.schema === '' ? linkifyMatchResult.url.replace(/^http:\/\//, 'https://') : linkifyMatchResult.url : null;
-                    if (url) {
-                      var urlMetadata = oGMetadata === null || oGMetadata === void 0 ? void 0 : oGMetadata[url];
-                      var metadata = {};
-                      if (urlMetadata) {
-                        var _urlMetadata$og, _urlMetadata$og$favic, _urlMetadata$og2, _urlMetadata$og$descr, _urlMetadata$og3, _urlMetadata$og3$imag, _urlMetadata$og3$imag2, _urlMetadata$og4, _urlMetadata$og$title;
-                        if (urlMetadata.imageWidth) metadata.szw = urlMetadata.imageWidth;
-                        if (urlMetadata.imageHeight) metadata.szh = urlMetadata.imageHeight;
-                        if ((_urlMetadata$og = urlMetadata.og) !== null && _urlMetadata$og !== void 0 && (_urlMetadata$og$favic = _urlMetadata$og.favicon) !== null && _urlMetadata$og$favic !== void 0 && _urlMetadata$og$favic.url) metadata.tur = urlMetadata.og.favicon.url;
-                        if ((_urlMetadata$og2 = urlMetadata.og) !== null && _urlMetadata$og2 !== void 0 && _urlMetadata$og2.description) metadata.dsc = (_urlMetadata$og$descr = urlMetadata.og.description) === null || _urlMetadata$og$descr === void 0 ? void 0 : _urlMetadata$og$descr.slice(0, 200);
-                        if ((_urlMetadata$og3 = urlMetadata.og) !== null && _urlMetadata$og3 !== void 0 && (_urlMetadata$og3$imag = _urlMetadata$og3.image) !== null && _urlMetadata$og3$imag !== void 0 && (_urlMetadata$og3$imag2 = _urlMetadata$og3$imag[0]) !== null && _urlMetadata$og3$imag2 !== void 0 && _urlMetadata$og3$imag2.url) metadata.iur = urlMetadata.og.image[0].url;
-                        if ((_urlMetadata$og4 = urlMetadata.og) !== null && _urlMetadata$og4 !== void 0 && _urlMetadata$og4.title) metadata.ttl = (_urlMetadata$og$title = urlMetadata.og.title) === null || _urlMetadata$og$title === void 0 ? void 0 : _urlMetadata$og$title.slice(0, 100);
-                      }
-                      if (dismissedUrls.has(url)) {
-                        metadata.hld = true;
-                      }
-                      linkAttachment = _extends({
-                        type: attachmentTypes.link,
-                        data: url,
-                        upload: false
-                      }, Object.keys(metadata).length > 0 ? {
-                        metadata: metadata,
-                        name: metadata.ttl
-                      } : {
-                        metadata: {
-                          hld: true
-                        }
-                      });
-                    }
-                  }
-                  if (hasSendableTextOrPoll(messageTexToSend, isPoll) && !attachments.length) {
-                    if (linkAttachment) {
-                      messageToSend.attachments = [linkAttachment];
-                    }
-                    if (isPoll) {
-                      messageToSend.pollDetails = pollDetails;
-                      messageToSend.type = 'poll';
-                      messageToSend.body = messageTextForSend === null || messageTextForSend === void 0 ? void 0 : messageTextForSend.trim();
-                    }
-                    dispatch(sendTextMessageAC(messageToSend, activeChannel.id, connectionStatus));
-                  }
-                  var _temp = function () {
-                    if (attachments.length) {
-                      return Promise.resolve(waitForImageAttachmentPreparation(attachments, attachmentPreparationPromisesRef.current)).then(function () {
-                        var sendAsSeparateMessage = getSendAttachmentsAsSeparateMessages();
-                        messageToSend.attachments = mergePreparedAttachmentPatches(attachments, preparedAttachmentPatchesRef.current).map(function (preparedAttachment) {
-                          return {
-                            name: preparedAttachment.data.name,
-                            data: preparedAttachment.data,
-                            attachmentUrl: preparedAttachment.attachmentUrl,
-                            tid: preparedAttachment.tid,
-                            cachedUrl: preparedAttachment.cachedUrl,
-                            upload: preparedAttachment.upload,
-                            metadata: preparedAttachment.metadata,
-                            type: getOutgoingAttachmentType(preparedAttachment),
-                            size: preparedAttachment.size,
-                            thumbnailState: preparedAttachment.thumbnailState
-                          };
-                        });
-                        if (viewOnce && canShowViewOnceToggle) {
-                          messageToSend.viewOnce = true;
-                        }
-                        var attachmentsToSent = [].concat(messageToSend.attachments);
-                        if (linkAttachment && !messageToSend.viewOnce) {
-                          attachmentsToSent.push(linkAttachment);
-                        }
-                        dispatch(sendMessageAC(_extends({}, messageToSend, {
-                          attachments: attachmentsToSent
-                        }), activeChannel.id, connectionStatus, sendAsSeparateMessage));
-                        attachments.forEach(function (attachment) {
-                          attachmentPreparationPromisesRef.current["delete"](attachment.tid);
-                          preparedAttachmentPatchesRef.current["delete"](attachment.tid);
-                        });
-                      });
-                    }
-                  }();
-                  return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
+          return Promise.resolve();
+        }
+        isSendMessageInFlightRef.current = true;
+        setIsSendMessageInFlight(true);
+        event.preventDefault();
+        event.stopPropagation();
+        if (messageToEdit) {
+          handleEditMessage();
+        } else if (messageTextForSend !== null && messageTextForSend !== void 0 && messageTextForSend.trim() || composerAttachments.length && composerAttachments.length > 0) {
+          var _trimMessageBodyWithA = trimMessageBodyWithAttributes(messageText, messageBodyAttributes),
+            messageTexToSend = _trimMessageBodyWithA.body,
+            adjustedBodyAttributes = _trimMessageBodyWithA.bodyAttributes;
+          var messageToSend = {
+            body: messageTexToSend,
+            bodyAttributes: adjustedBodyAttributes,
+            mentionedUsers: [],
+            attachments: [],
+            type: 'text'
+          };
+          var mentionUsersToSend = [];
+          if (adjustedBodyAttributes && adjustedBodyAttributes.length) {
+            adjustedBodyAttributes.forEach(function (att) {
+              if (att.type === 'mention') {
+                var mentionsToFind = [].concat(mentionedUsers);
+                var draftMessage = getDraftMessageFromMap(activeChannel.id);
+                if (draftMessage) {
+                  mentionsToFind = [].concat(draftMessage.mentionedUsers, mentionedUsers);
                 }
-              }();
-              if (_temp7 && _temp7.then) return _temp7.then(function () {});
+                var mentionToAdd = mentionsToFind.find(function (mention) {
+                  return mention.id === att.metadata;
+                });
+                mentionUsersToSend.push(mentionToAdd || {
+                  id: att.metadata
+                });
+              }
+            });
+          }
+          messageToSend.mentionedUsers = mentionUsersToSend;
+          if (messageForReply) {
+            messageToSend.parentMessage = messageForReply;
+          }
+          var linkAttachment;
+          if (messageTexToSend) {
+            var _LinkifyIt$match;
+            var protocolMatch = /https?:\/\/\S+/.exec(messageTexToSend);
+            var linkifyMatchResult = !protocolMatch ? (_LinkifyIt$match = new LinkifyIt().match(messageTexToSend)) === null || _LinkifyIt$match === void 0 ? void 0 : _LinkifyIt$match[0] : null;
+            var url = protocolMatch ? protocolMatch[0] : linkifyMatchResult ? linkifyMatchResult.schema === '' ? linkifyMatchResult.url.replace(/^http:\/\//, 'https://') : linkifyMatchResult.url : null;
+            if (url) {
+              var urlMetadata = oGMetadata === null || oGMetadata === void 0 ? void 0 : oGMetadata[url];
+              var metadata = {};
+              if (urlMetadata) {
+                var _urlMetadata$og, _urlMetadata$og$favic, _urlMetadata$og2, _urlMetadata$og$descr, _urlMetadata$og3, _urlMetadata$og3$imag, _urlMetadata$og3$imag2, _urlMetadata$og4, _urlMetadata$og$title;
+                if (urlMetadata.imageWidth) metadata.szw = urlMetadata.imageWidth;
+                if (urlMetadata.imageHeight) metadata.szh = urlMetadata.imageHeight;
+                if ((_urlMetadata$og = urlMetadata.og) !== null && _urlMetadata$og !== void 0 && (_urlMetadata$og$favic = _urlMetadata$og.favicon) !== null && _urlMetadata$og$favic !== void 0 && _urlMetadata$og$favic.url) metadata.tur = urlMetadata.og.favicon.url;
+                if ((_urlMetadata$og2 = urlMetadata.og) !== null && _urlMetadata$og2 !== void 0 && _urlMetadata$og2.description) metadata.dsc = (_urlMetadata$og$descr = urlMetadata.og.description) === null || _urlMetadata$og$descr === void 0 ? void 0 : _urlMetadata$og$descr.slice(0, 200);
+                if ((_urlMetadata$og3 = urlMetadata.og) !== null && _urlMetadata$og3 !== void 0 && (_urlMetadata$og3$imag = _urlMetadata$og3.image) !== null && _urlMetadata$og3$imag !== void 0 && (_urlMetadata$og3$imag2 = _urlMetadata$og3$imag[0]) !== null && _urlMetadata$og3$imag2 !== void 0 && _urlMetadata$og3$imag2.url) metadata.iur = urlMetadata.og.image[0].url;
+                if ((_urlMetadata$og4 = urlMetadata.og) !== null && _urlMetadata$og4 !== void 0 && _urlMetadata$og4.title) metadata.ttl = (_urlMetadata$og$title = urlMetadata.og.title) === null || _urlMetadata$og$title === void 0 ? void 0 : _urlMetadata$og$title.slice(0, 100);
+              }
+              if (dismissedUrls.has(url)) {
+                metadata.hld = true;
+              }
+              linkAttachment = _extends({
+                type: attachmentTypes.link,
+                data: url,
+                upload: false
+              }, Object.keys(metadata).length > 0 ? {
+                metadata: metadata,
+                name: metadata.ttl
+              } : {
+                metadata: {
+                  hld: true
+                }
+              });
             }
-          }();
-          return _temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4);
-        } else {
-          if (typingTimout) {
-            if (!inTypingStateTimout) {
-              handleSendTypingState(true, code);
+          }
+          if (hasSendableTextOrPoll(messageTexToSend, isPoll) && !composerAttachments.length) {
+            if (linkAttachment) {
+              messageToSend.attachments = [linkAttachment];
             }
-            clearTimeout(typingTimout);
-          } else {
+            if (isPoll) {
+              messageToSend.pollDetails = pollDetails;
+              messageToSend.type = 'poll';
+              messageToSend.body = messageTextForSend === null || messageTextForSend === void 0 ? void 0 : messageTextForSend.trim();
+            }
+            dispatch(sendTextMessageAC(messageToSend, activeChannel.id, connectionStatus));
+          }
+          if (composerAttachments.length) {
+            var sendAsSeparateMessage = getSendAttachmentsAsSeparateMessages();
+            messageToSend.attachments = mergePreparedAttachmentPatches(composerAttachments, preparedAttachmentPatchesRef.current).map(function (preparedAttachment) {
+              return {
+                name: preparedAttachment.data.name,
+                data: preparedAttachment.data,
+                attachmentUrl: preparedAttachment.attachmentUrl,
+                tid: preparedAttachment.tid,
+                cachedUrl: preparedAttachment.cachedUrl,
+                upload: preparedAttachment.upload,
+                metadata: preparedAttachment.metadata,
+                type: getOutgoingAttachmentType(preparedAttachment),
+                size: preparedAttachment.size,
+                thumbnailState: preparedAttachment.thumbnailState
+              };
+            });
+            if (viewOnce && canShowViewOnceToggle) {
+              messageToSend.viewOnce = true;
+            }
+            var attachmentsToSent = [].concat(messageToSend.attachments);
+            if (linkAttachment && !messageToSend.viewOnce) {
+              attachmentsToSent.push(linkAttachment);
+            }
+            dispatch(sendMessageAC(_extends({}, messageToSend, {
+              attachments: attachmentsToSent
+            }), activeChannel.id, connectionStatus, sendAsSeparateMessage));
+            composerAttachments.forEach(function (attachment) {
+              attachmentPreparationPromisesRef.current["delete"](attachment.tid);
+              preparedAttachmentPatchesRef.current["delete"](attachment.tid);
+            });
+          }
+          setMessageText('');
+          fileUploader.current.value = '';
+          if (inTypingState) {
+            handleSendTypingState(false);
+          }
+          clearTimeout(typingTimout);
+          setTypingTimout(undefined);
+        }
+        setAttachments([]);
+        attachmentsRef.current = [];
+        attachmentsUpdate = [];
+        removeDraftMessageFromMap(activeChannel.id);
+        dispatch(setChannelDraftMessageIsRemovedAC(activeChannel.id));
+        setViewOnce(false);
+        handleCloseReply();
+        setShouldClearEditor({
+          clear: true
+        });
+        setMentionedUsers([]);
+        setMessageBodyAttributes([]);
+        closePreviewWithAnimation(function () {
+          setDetectedUrl(null);
+          setDismissedUrls(new Set());
+        });
+        dispatch(setCloseSearchChannelsAC(true));
+        releaseSendMessageLock();
+      } else {
+        if (typingTimout) {
+          if (!inTypingStateTimout) {
             handleSendTypingState(true, code);
           }
-          setTypingTimout(setTimeout(function () {
-            setTypingTimout(0);
-          }, 2000));
+          clearTimeout(typingTimout);
+        } else {
+          handleSendTypingState(true, code);
         }
-      }();
-      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
+        setTypingTimout(setTimeout(function () {
+          setTypingTimout(0);
+        }, 2000));
+      }
+      return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
     }
@@ -57227,25 +57549,27 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   };
   var removeUpload = function removeUpload(attachmentId) {
     if (attachmentId) {
-      var updatedAttachments = attachmentsUpdate.filter(function (item) {
+      var updatedAttachments = attachmentsRef.current.filter(function (item) {
         return item.tid !== attachmentId;
       });
-      clearVideoPreparation(attachmentId);
+      clearAttachmentPreparation(attachmentId);
       attachmentPreparationPromisesRef.current["delete"](attachmentId);
       preparedAttachmentPatchesRef.current["delete"](attachmentId);
       releaseBlobUrls(["compose_" + attachmentId]);
       setAttachments(updatedAttachments);
+      attachmentsRef.current = updatedAttachments;
       attachmentsUpdate = updatedAttachments;
     } else {
-      attachmentsUpdate.forEach(function (attachment) {
-        return clearVideoPreparation(attachment.tid);
+      attachmentsRef.current.forEach(function (attachment) {
+        return clearAttachmentPreparation(attachment.tid);
       });
       attachmentPreparationPromisesRef.current.clear();
       preparedAttachmentPatchesRef.current.clear();
-      releaseBlobUrls(attachmentsUpdate.map(function (item) {
+      releaseBlobUrls(attachmentsRef.current.map(function (item) {
         return "compose_" + item.tid;
       }));
       setAttachments([]);
+      attachmentsRef.current = [];
       attachmentsUpdate = [];
     }
     if (attachmentsUpdate.length === 0) {
@@ -57311,14 +57635,14 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     filesToProcess.forEach(function (file) {
       try {
         var validationError = isMediaAttachment ? validateMediaAttachment(file) : null;
-        var _temp8 = function () {
+        var _temp = function () {
           if (!validationError) {
             return Promise.resolve(handleAddAttachmentWithViewOnceCheck(file, isMediaAttachment)).then(function () {});
           } else {
             showFileUploadError(validationError);
           }
         }();
-        return Promise.resolve(_temp8 && _temp8.then ? _temp8.then(function () {}) : void 0);
+        return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
       } catch (e) {
         return Promise.reject(e);
       }
@@ -57340,9 +57664,9 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     }
     var os = detectOS();
     if (!(os === 'Windows' && browser === 'Firefox')) {
-      if (e.clipboardData.files && e.clipboardData.files.length > 0) {
+      var fileList = getClipboardFiles(e.clipboardData);
+      if (fileList.length > 0) {
         e.preventDefault();
-        var fileList = Object.values(e.clipboardData.files);
         var remainingSlots = MAX_ATTACHMENTS - attachments.length;
         if (remainingSlots <= 0) {
           showFileUploadError("You have reached the maximum limit of " + MAX_ATTACHMENTS + " files");
@@ -57355,15 +57679,23 @@ var SendMessageInput = function SendMessageInput(_ref3) {
         }
         filesToProcess.forEach(function (file) {
           try {
-            var validationError = validateMediaAttachment(file);
-            var _temp9 = function () {
-              if (!validationError) {
+            var mediaValidationError = validateMediaAttachment(file);
+            var canAddAsMedia = showChooseMediaAttachment && !mediaValidationError;
+            var _temp3 = function () {
+              if (canAddAsMedia) {
                 return Promise.resolve(handleAddAttachmentWithViewOnceCheck(file, true)).then(function () {});
               } else {
-                showFileUploadError(validationError);
+                var _temp4 = function () {
+                  if (showChooseFileAttachment) {
+                    return Promise.resolve(handleAddAttachmentWithViewOnceCheck(file, false)).then(function () {});
+                  } else {
+                    showFileUploadError(mediaValidationError || allowedMediaExtensionsErrorMessage || UNSUPPORTED_PASTED_FILE_MESSAGE);
+                  }
+                }();
+                if (_temp4 && _temp4.then) return _temp4.then(function () {});
               }
             }();
-            return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(function () {}) : void 0);
+            return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
           } catch (e) {
             return Promise.reject(e);
           }
@@ -57438,9 +57770,11 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     dispatch(clearSelectedMessagesAC());
   };
   var handleSetMentionMember = function handleSetMentionMember(mentionMember) {
-    setMentionedUsers(function (prevState) {
-      return [].concat(prevState, [mentionMember]);
-    });
+    if (composerChannelId === activeChannel.id) {
+      setMentionedUsers(function (prevState) {
+        return [].concat(prevState, [mentionMember]);
+      });
+    }
   };
   var createComposePreviewUrl = function createComposePreviewUrl(attachmentTid, blob) {
     var url = URL.createObjectURL(blob);
@@ -57465,10 +57799,10 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       setPendingAttachment(tid, {
         file: file
       });
-      if (fileType === 'video') {
-        beginVideoPreparation(tid, file);
+      if (fileType === 'image' || fileType === 'video') {
+        beginAttachmentPreparation(tid, file);
       }
-      var type = fileType === 'video' && (!customUploader || isMediaAttachment) ? 'video' : isMediaAttachment && fileType === 'image' ? 'image' : 'file';
+      var type = isMediaAttachment && fileType === 'video' ? attachmentTypes.video : isMediaAttachment && fileType === 'image' ? attachmentTypes.image : attachmentTypes.file;
       var attachment = _extends({
         data: file,
         name: file.name,
@@ -57482,29 +57816,37 @@ var SendMessageInput = function SendMessageInput(_ref3) {
         attachmentUrl: createComposePreviewUrl(tid, file),
         metadata: customUploader ? {} : '{}'
       } : {});
-      setAttachments(function (prevState) {
-        return [].concat(prevState, [attachment]);
-      });
+      var nextAttachments = [].concat(attachmentsRef.current, [attachment]);
+      attachmentsRef.current = nextAttachments;
+      setAttachments(nextAttachments);
       var updateAttachment = function updateAttachment(patch) {
         preparedAttachmentPatchesRef.current.set(tid, _extends({}, preparedAttachmentPatchesRef.current.get(tid), patch));
-        setAttachments(function (prevState) {
-          return prevState.map(function (current) {
-            return current.tid === tid ? _extends({}, current, patch) : current;
-          });
+        var nextAttachments = attachmentsRef.current.map(function (current) {
+          return current.tid === tid ? _extends({}, current, patch) : current;
         });
+        attachmentsRef.current = nextAttachments;
+        setAttachments(nextAttachments);
       };
       var preparationPromise = new Promise(function (resolve) {
         return setTimeout(function () {
           try {
             return Promise.resolve(_finallyRethrows(function () {
-              var _temp16 = function () {
+              var _temp12 = function () {
                 if (fileType === 'image') {
-                  var _temp10 = _catch(function () {
+                  var _temp8 = _catch(function () {
                     return Promise.resolve(createImageThumbnail(file)).then(function (_ref5) {
                       var thumbnail = _ref5.thumbnail,
                         imageWidth = _ref5.imageWidth,
                         imageHeight = _ref5.imageHeight;
-                      var _temp1 = function () {
+                      function _temp7() {
+                        completeAttachmentPreparation(tid, {
+                          file: preparedFile,
+                          metadata: metadata
+                        });
+                      }
+                      var preparedFile = file;
+                      var metadata;
+                      var _temp6 = function () {
                         if (customUploader) {
                           return Promise.resolve(resizeImage(file)).then(function (resizedFile) {
                             var patch = {
@@ -57515,11 +57857,25 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                                 tmb: thumbnail
                               }
                             };
-                            updateAttachment(patch);
+                            if (isMediaAttachment && resizedFile !== null && resizedFile !== void 0 && resizedFile.blob) {
+                              preparedFile = new File([resizedFile.blob], resizedFile.file.name, {
+                                type: file.type
+                              });
+                              patch.size = preparedFile.size;
+                              updateAttachment(_extends({}, patch, {
+                                data: preparedFile
+                              }));
+                              setPendingAttachment(tid, {
+                                file: preparedFile
+                              });
+                            } else {
+                              updateAttachment(patch);
+                            }
+                            metadata = patch.metadata;
                             handleAttachmentImageForCache(_extends({}, attachment, patch));
                           });
                         } else {
-                          var _temp17 = function () {
+                          var _temp13 = 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, {
@@ -57539,30 +57895,34 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                                   file: resizedFile
                                 });
                                 handleAttachmentImageForCache(_extends({}, attachment, patch));
+                                preparedFile = resizedFile;
+                                metadata = patch.metadata;
                               });
                             } else {
+                              metadata = JSON.stringify({
+                                tmb: thumbnail,
+                                szw: imageWidth,
+                                szh: imageHeight
+                              });
                               updateAttachment({
-                                metadata: JSON.stringify({
-                                  tmb: thumbnail,
-                                  szw: imageWidth,
-                                  szh: imageHeight
-                                })
+                                metadata: metadata
                               });
                             }
                           }();
-                          if (_temp17 && _temp17.then) return _temp17.then(function () {});
+                          if (_temp13 && _temp13.then) return _temp13.then(function () {});
                         }
                       }();
-                      if (_temp1 && _temp1.then) return _temp1.then(function () {});
+                      return _temp6 && _temp6.then ? _temp6.then(_temp7) : _temp7(_temp6);
                     });
                   }, function (error) {
                     log.warn('Unable to prepare image attachment preview:', error);
+                    failAttachmentPreparation(tid);
                   });
-                  if (_temp10 && _temp10.then) return _temp10.then(function () {});
+                  if (_temp8 && _temp8.then) return _temp8.then(function () {});
                 } else {
-                  var _temp18 = function () {
+                  var _temp14 = function () {
                     if (fileType === 'video') {
-                      var _temp14 = function _temp14() {
+                      var _temp10 = function _temp10() {
                         return Promise.resolve(remuxPromise).then(function (uploadFile) {
                           if (uploadFile !== file) {
                             updateAttachment({
@@ -57575,13 +57935,13 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                           }
                           if (metadata) {
                             var _frame;
-                            completeVideoPreparation(tid, {
+                            completeAttachmentPreparation(tid, {
                               file: uploadFile,
                               metadata: metadata,
                               videoPreviewBlob: (_frame = frame) === null || _frame === void 0 ? void 0 : _frame.blob
                             });
                           } else {
-                            failVideoPreparation(tid);
+                            failAttachmentPreparation(tid);
                             updateAttachment({
                               thumbnailState: 'failed'
                             });
@@ -57592,8 +57952,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                       var thumbnailSource = file;
                       var metadata;
                       var frame;
-                      var _temp13 = _catch(function () {
-                        function _temp12() {
+                      var _temp1 = _catch(function () {
+                        function _temp0() {
                           var _frame2 = frame,
                             thumb = _frame2.thumb,
                             width = _frame2.width,
@@ -57617,7 +57977,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                           dispatch(setUpdateMessageAttachmentAC(thumb, frame.frameBlobUrl));
                           setVideoIsReadyToSend(tid);
                         }
-                        var _temp11 = _catch(function () {
+                        var _temp9 = _catch(function () {
                           return Promise.resolve(getFrame(thumbnailSource, 0)).then(function (_getFrame) {
                             frame = _getFrame;
                           });
@@ -57629,17 +57989,17 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                             });
                           });
                         });
-                        return _temp11 && _temp11.then ? _temp11.then(_temp12) : _temp12(_temp11);
+                        return _temp9 && _temp9.then ? _temp9.then(_temp0) : _temp0(_temp9);
                       }, function (error) {
                         log.warn('Unable to generate video thumbnail:', error);
                       });
-                      return _temp13 && _temp13.then ? _temp13.then(_temp14) : _temp14(_temp13);
+                      return _temp1 && _temp1.then ? _temp1.then(_temp10) : _temp10(_temp1);
                     }
                   }();
-                  if (_temp18 && _temp18.then) return _temp18.then(function () {});
+                  if (_temp14 && _temp14.then) return _temp14.then(function () {});
                 }
               }();
-              if (_temp16 && _temp16.then) return _temp16.then(function () {});
+              if (_temp12 && _temp12.then) return _temp12.then(function () {});
             }, function (_wasThrown, _result) {
               resolve();
               if (_wasThrown) throw _result;
@@ -57650,7 +58010,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
           }
         }, 0);
       });
-      if (fileType === 'image') {
+      if (fileType === 'image' || fileType === 'video') {
         attachmentPreparationPromisesRef.current.set(tid, preparationPromise);
       }
       return Promise.resolve();
@@ -57697,14 +58057,14 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       filesToProcess.forEach(function (file) {
         try {
           var validationError = isMediaAttachment ? validateMediaAttachment(file) : null;
-          var _temp19 = function () {
+          var _temp15 = function () {
             if (!validationError) {
               return Promise.resolve(handleAddAttachmentWithViewOnceCheck(file, isMediaAttachment)).then(function () {});
             } else {
               showFileUploadError(validationError);
             }
           }();
-          return Promise.resolve(_temp19 && _temp19.then ? _temp19.then(function () {}) : void 0);
+          return Promise.resolve(_temp15 && _temp15.then ? _temp15.then(function () {}) : void 0);
         } catch (e) {
           return Promise.reject(e);
         }
@@ -57776,59 +58136,6 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     };
   }, [isSmallWidthViewport]);
   React.useEffect(function () {
-    if (prevActiveChannelId && activeChannel.id && prevActiveChannelId !== activeChannel.id) {
-      setMessageText('');
-      if (messageForReply) {
-        isNavigatingChannelRef.current = true;
-        handleCloseReply(true);
-      }
-      setAttachments([]);
-      attachmentsUpdate = [];
-      handleCloseEditMode(!!messageToEdit);
-      clearTimeout(typingTimout);
-      var draftMessage = getDraftMessageFromMap(activeChannel.id);
-      if (draftMessage) {
-        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
-          });
-        }
-      } else {
-        setMentionedUsers([]);
-        setShouldClearEditor({
-          clear: true,
-          draftMessage: draftMessage
-        });
-      }
-    }
-    if (activeChannel.id) {
-      prevActiveChannelId = activeChannel.id;
-    }
     if (activeChannel.id && membersHasNext === undefined && !(activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT && activeChannel.memberCount === 2)) {
       dispatch(getMembersAC(activeChannel.id));
     }
@@ -57837,6 +58144,9 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     if (!draftsHydrated) {
       return;
     }
+    if (!activeChannel.id || composerChannelId !== activeChannel.id) {
+      return;
+    }
     if (restoringDraftRef.current) {
       restoringDraftRef.current = false;
       return;
@@ -57923,9 +58233,9 @@ var SendMessageInput = function SendMessageInput(_ref3) {
         document.body.removeAttribute('onbeforeunload');
       }
     }
-  }, [messageText, attachments, editMessageText, readyVideoAttachments, messageBodyAttributes, messageToEdit, viewOnce, draftsHydrated]);
+  }, [messageText, attachments, editMessageText, readyVideoAttachments, messageBodyAttributes, messageToEdit, viewOnce, draftsHydrated, activeChannel.id, composerChannelId]);
   useDidUpdate(function () {
-    if (!messageToEdit && mentionedUsers && mentionedUsers.length) {
+    if (composerChannelId === activeChannel.id && !messageToEdit && mentionedUsers && mentionedUsers.length) {
       setDraftMessageToMap(activeChannel.id, {
         text: messageText,
         mentionedUsers: mentionedUsers,
@@ -57937,7 +58247,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
         persist: !!(messageText.trim() || attachments.length)
       });
     }
-  }, [mentionedUsers]);
+  }, [mentionedUsers, activeChannel.id, composerChannelId]);
   useDidUpdate(function () {
     var _getAudioRecordingFro;
     if (handleAttachmentSelected) {
@@ -57951,6 +58261,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       }
     }
     attachmentsUpdate = attachments;
+    attachmentsRef.current = attachments;
     var hasAudioRecording = showRecording || ((_getAudioRecordingFro = getAudioRecordingFromMap(activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.id)) === null || _getAudioRecordingFro === void 0 ? void 0 : _getAudioRecordingFro.file);
     if (viewOnce && attachments.length !== 1 && !hasAudioRecording) {
       setViewOnce(false);
@@ -57984,6 +58295,9 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   });
   useDidUpdate(function () {
     var _draftMessagesMap$act;
+    if (composerChannelId !== activeChannel.id) {
+      return;
+    }
     var persistedReply = (_draftMessagesMap$act = draftMessagesMap[activeChannel.id]) === null || _draftMessagesMap$act === void 0 ? void 0 : _draftMessagesMap$act.messageForReply;
     if (isNavigatingChannelRef.current) {
       isNavigatingChannelRef.current = false;
@@ -58011,7 +58325,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     if (messageContRef && messageContRef.current) {
       dispatch(setSendMessageInputHeightAC(messageContRef.current.getBoundingClientRect().height));
     }
-  }, [messageForReply]);
+  }, [messageForReply, activeChannel.id, composerChannelId]);
   useDidUpdate(function () {
     if (messageToEdit) {
       if (messageForReply) {
@@ -58044,7 +58358,6 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       if (inputHeightTimeout) {
         clearTimeout(inputHeightTimeout);
       }
-      prevActiveChannelId = undefined;
       document.removeEventListener('mousedown', handleClick);
       if (messageContRef && messageContRef.current) {
         messageContRef.current.removeEventListener('paste', handlePastAttachments);
@@ -58102,16 +58415,21 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     return linkPreview && linkPreview.metadata && !isDescriptionOnlySymbol((_linkPreview$metadata = linkPreview.metadata.og) === null || _linkPreview$metadata === void 0 ? void 0 : _linkPreview$metadata.description) && (((_linkPreview$metadata2 = linkPreview.metadata.og) === null || _linkPreview$metadata2 === void 0 ? void 0 : _linkPreview$metadata2.title) || ((_linkPreview$metadata3 = linkPreview.metadata.og) === null || _linkPreview$metadata3 === void 0 ? void 0 : _linkPreview$metadata3.description) || ((_linkPreview$metadata4 = linkPreview.metadata.og) === null || _linkPreview$metadata4 === void 0 ? void 0 : (_linkPreview$metadata5 = _linkPreview$metadata4.image) === null || _linkPreview$metadata5 === void 0 ? void 0 : (_linkPreview$metadata6 = _linkPreview$metadata5[0]) === null || _linkPreview$metadata6 === void 0 ? void 0 : _linkPreview$metadata6.url) || ((_linkPreview$metadata7 = linkPreview.metadata.og) === null || _linkPreview$metadata7 === void 0 ? void 0 : (_linkPreview$metadata8 = _linkPreview$metadata7.favicon) === null || _linkPreview$metadata8 === void 0 ? void 0 : _linkPreview$metadata8.url));
   }, [linkPreview]);
   React.useEffect(function () {
-    if (messageContRef && messageContRef.current) {
-      setTimeout(function () {
-        dispatch(setSendMessageInputHeightAC(messageContRef.current.getBoundingClientRect().height));
-      }, 301);
-    }
+    if (!messageContRef.current) return undefined;
+    var timeout = setTimeout(function () {
+      var messageContainer = messageContRef.current;
+      if (messageContainer) {
+        dispatch(setSendMessageInputHeightAC(messageContainer.getBoundingClientRect().height));
+      }
+    }, 301);
+    return function () {
+      return clearTimeout(timeout);
+    };
   }, [showLinkPreview]);
   return /*#__PURE__*/React__default.createElement(SendMessageWrapper, {
     ref: sendMessageWrapperRef,
     backgroundColor: backgroundColor || background,
-    "$hidden": pinnedMessagesListOpen && !messageToEdit && !messageForReply && !(selectedMessagesMap !== null && selectedMessagesMap !== void 0 && selectedMessagesMap.size)
+    "$hidden": pinnedMessagesListOpen && !(selectedMessagesMap && selectedMessagesMap.size > 0)
   }, /*#__PURE__*/React__default.createElement(Container$m, {
     margin: margin,
     padding: padding,
@@ -58458,11 +58776,11 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     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
+    setMentionedMember: setComposerMentionedUsers
   }), /*#__PURE__*/React__default.createElement(FormatMessagePlugin, {
     editorState: realEditorState,
-    setMessageBodyAttributes: setMessageBodyAttributes,
-    setMessageText: messageToEdit ? setEditMessageText : setMessageText,
+    setMessageBodyAttributes: setComposerMessageBodyAttributes,
+    setMessageText: messageToEdit ? setComposerEditMessageText : setComposerMessageText,
     messageToEdit: messageToEdit,
     activeChannelMembers: activeChannelMembers,
     contactsMap: contactsMap,
@@ -58505,11 +58823,11 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     anchorElem: floatingAnchorElem
   })))))))), sendMessageIsActive || attachments.length > 0 || !voiceMessage && !((_getAudioRecordingFro2 = getAudioRecordingFromMap(activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.id)) !== null && _getAudioRecordingFro2 !== void 0 && _getAudioRecordingFro2.file) || messageToEdit ? (/*#__PURE__*/React__default.createElement(SendMessageButton, {
     isCustomButton: CustomSendMessageButton,
-    isActive: sendMessageIsActive,
+    isActive: sendMessageIsActive && !isSendMessageInFlight,
     order: sendIconOrder,
     color: backgroundSections,
     height: inputContainerHeight || minHeight,
-    onClick: sendMessageIsActive ? handleSendEditMessage : null,
+    onClick: sendMessageIsActive && !isSendMessageInFlight ? handleSendEditMessage : null,
     iconColor: accentColor,
     activeColor: accentColor
   }, CustomSendMessageButton || /*#__PURE__*/React__default.createElement(SvgSend, null))) : (/*#__PURE__*/React__default.createElement(SendMessageButton, {
@@ -58521,7 +58839,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     activeColor: accentColor
   }, /*#__PURE__*/React__default.createElement(AudioRecord$1, {
     sendRecordedFile: sendRecordedFile,
-    setShowRecording: setShowRecording,
+    setShowRecording: handleShowRecording,
     showRecording: showRecording,
     channelId: activeChannel.id,
     maxRecordingDuration: audioRecordingMaxDuration,
@@ -58533,10 +58851,14 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     ViewOnceNotSelectedSVGIcon: ViewOnceNotSelectedSVGIcon
   }))))))))));
 };
-var SendMessageWrapper = styled__default.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  pointer-events: ", ";\n  background-color: ", ";\n  position: relative;\n  z-index: 10;\n"])), function (props) {
+var SendMessageWrapper = styled__default.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  pointer-events: ", ";\n  max-height: ", ";\n  overflow: ", ";\n  background-color: ", ";\n  position: relative;\n  z-index: 10;\n"])), function (props) {
   return props.$hidden ? 'hidden' : 'visible';
 }, function (props) {
   return props.$hidden ? 'none' : 'auto';
+}, function (props) {
+  return props.$hidden ? '40px' : 'none';
+}, function (props) {
+  return props.$hidden ? 'hidden' : 'visible';
 }, function (props) {
   return props.backgroundColor;
 });
@@ -60452,7 +60774,7 @@ var Files = function Files(_ref) {
         fontSize: fileSizeFontSize,
         lineHeight: fileSizeLineHeight,
         color: filePreviewSizeColor || textSecondary
-      }, file.size ? bytesToSize(file.size) + " \u2022 " + formatChannelDetailsDate(file.createdAt) : formatChannelDetailsDate(file.createdAt))), /*#__PURE__*/React__default.createElement(DownloadWrapper, {
+      }, file.size ? bytesToSize(file.size, 1) + " \u2022 " + formatChannelDetailsDate(file.createdAt) : formatChannelDetailsDate(file.createdAt))), /*#__PURE__*/React__default.createElement(DownloadWrapper, {
         visible: !!downloadingFilesMap[file.id],
         iconColor: accentColor,
         onClick: function onClick() {
@@ -64256,7 +64578,10 @@ var UnreadCount$2 = styled__default.span(_templateObject2$1c || (_templateObject
   return props.textColor || '#fff';
 });
 
-var createOrGetDirectChannel = function createOrGetDirectChannel(user, callback) {
+var createOrGetDirectChannel = function createOrGetDirectChannel(user, callback, dontCreateIfNotExists) {
+  if (dontCreateIfNotExists === void 0) {
+    dontCreateIfNotExists = false;
+  }
   try {
     if (user) {
       store.dispatch(createChannelAC({
@@ -64265,7 +64590,7 @@ var createOrGetDirectChannel = function createOrGetDirectChannel(user, callback)
         members: [_extends({}, user, {
           role: 'owner'
         })]
-      }, false, callback));
+      }, dontCreateIfNotExists, callback));
     }
     return Promise.resolve();
   } catch (e) {