sceyt-chat-react-uikit 1.9.0-beta.14 → 1.9.0-beta.16

package/components/SendMessageInput/draftOwnership.d.ts

@@ -0,0 +1,24 @@
+export declare type ComposerDraft = {
+    text: string;
+    mentionedUsers: any[];
+    messageForReply: any;
+    editorState: any;
+    bodyAttributes: any;
+    attachments: any[];
+    viewOnce: boolean;
+};
+export declare type DraftHandoff = {
+    channelId: string;
+    draft: ComposerDraft;
+    persist: boolean;
+};
+declare type ComposerState = ComposerDraft & {
+    channelId: string;
+    nextChannelId: string;
+};
+/**
+ * Returns the only draft write allowed while the active chat changes. The
+ * composer values belong to `channelId`, never to `nextChannelId`.
+ */
+export declare const getDraftHandoff: ({ channelId, nextChannelId, text, mentionedUsers, messageForReply, editorState, bodyAttributes, attachments, viewOnce }: ComposerState) => DraftHandoff | null;
+export {};

package/index.js

@@ -13744,9 +13744,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, {
@@ -29557,9 +29558,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 +29580,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;
@@ -34088,10 +34096,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,
@@ -34100,7 +34109,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);
@@ -41345,7 +41361,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%';
 });
 
@@ -42593,7 +42609,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,
@@ -43030,6 +43046,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,
@@ -43144,7 +43161,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) {
@@ -51080,8 +51097,8 @@ 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;
@@ -51457,8 +51474,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';
@@ -51471,7 +51488,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,
@@ -52957,7 +52974,7 @@ var MessageList = function MessageList(_ref) {
         isUnreadMessage: false,
         nextMessageStartsUnreadSection: false,
         isHighlighted: false,
-        ifLatestAndHasNotPreview: channel.type !== DEFAULT_CHANNEL_TYPE.DIRECT,
+        ifLatestAndHasNotPreview: index === 0,
         registerInMessagesIndex: false,
         isPinnedMessagesList: true
       });
@@ -55077,10 +55094,14 @@ var Emoji$1 = styled__default.li(_templateObject8$m || (_templateObject8$m = _ta
   return props.hoverBackgroundColor;
 });
 
+var isVideoAttachment = function isVideoAttachment(attachment) {
+  var _attachment$data, _attachment$data$type;
+  return attachment.type === attachmentTypes.video || ((_attachment$data = attachment.data) === null || _attachment$data === void 0 ? void 0 : (_attachment$data$type = _attachment$data.type) === null || _attachment$data$type === void 0 ? void 0 : _attachment$data$type.startsWith('video/'));
+};
 var waitForMediaAttachmentPreparation = function waitForMediaAttachmentPreparation(attachments, preparations) {
   try {
     return Promise.resolve(Promise.all(attachments.filter(function (attachment) {
-      return attachment.type === attachmentTypes.image || getOutgoingAttachmentType(attachment) === attachmentTypes.video;
+      return attachment.type === attachmentTypes.image || isVideoAttachment(attachment);
     }).map(function (attachment) {
       return attachment.tid ? preparations.get(attachment.tid) : undefined;
     }))).then(function () {});
@@ -55094,8 +55115,7 @@ var mergePreparedAttachmentPatches = function mergePreparedAttachmentPatches(att
   });
 };
 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';
@@ -56526,6 +56546,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;
@@ -56590,9 +56656,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,
@@ -56824,6 +56890,9 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   var _useState30 = React.useState(areDraftMessagesHydrated()),
     draftsHydrated = _useState30[0],
     setDraftsHydrated = _useState30[1];
+  var _useState31 = React.useState(activeChannel.id || ''),
+    composerChannelId = _useState31[0],
+    setComposerChannelId = _useState31[1];
   var typingOrRecordingIndicator = useSelector(typingOrRecordingIndicatorArraySelector(activeChannel.id));
   var contactsMap = useSelector(contactsMapSelector);
   var connectionStatus = useSelector(connectionStatusSelector, reactRedux.shallowEqual);
@@ -56840,36 +56909,36 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   var restoringDraftRef = React.useRef(false);
   var restoredDraftChannelIdRef = React.useRef(null);
   var isNavigatingChannelRef = React.useRef(false);
-  var _useState31 = React.useState(),
-    realEditorState = _useState31[0],
-    setRealEditorState = _useState31[1];
-  var _useState32 = React.useState(null),
-    floatingAnchorElem = _useState32[0],
-    setFloatingAnchorElem = _useState32[1];
-  var _useState33 = React.useState(false),
-    isSmallWidthViewport = _useState33[0],
-    setIsSmallWidthViewport = _useState33[1];
+  var _useState32 = React.useState(),
+    realEditorState = _useState32[0],
+    setRealEditorState = _useState32[1];
+  var _useState33 = React.useState(null),
+    floatingAnchorElem = _useState33[0],
+    setFloatingAnchorElem = _useState33[1];
   var _useState34 = React.useState(false),
-    isScrolling = _useState34[0],
-    setIsScrolling = _useState34[1];
-  var _useState35 = React.useState(null),
-    linkPreview = _useState35[0],
-    setLinkPreview = _useState35[1];
+    isSmallWidthViewport = _useState34[0],
+    setIsSmallWidthViewport = _useState34[1];
+  var _useState35 = React.useState(false),
+    isScrolling = _useState35[0],
+    setIsScrolling = _useState35[1];
   var _useState36 = React.useState(null),
-    detectedUrl = _useState36[0],
-    setDetectedUrl = _useState36[1];
-  var _useState37 = React.useState(new Set()),
-    dismissedUrls = _useState37[0],
-    setDismissedUrls = _useState37[1];
-  var _useState38 = React.useState(false),
-    isClosingPreview = _useState38[0],
-    setIsClosingPreview = _useState38[1];
+    linkPreview = _useState36[0],
+    setLinkPreview = _useState36[1];
+  var _useState37 = React.useState(null),
+    detectedUrl = _useState37[0],
+    setDetectedUrl = _useState37[1];
+  var _useState38 = React.useState(new Set()),
+    dismissedUrls = _useState38[0],
+    setDismissedUrls = _useState38[1];
   var _useState39 = React.useState(false),
-    replyLinkPreviewImageFailed = _useState39[0],
-    setReplyLinkPreviewImageFailed = _useState39[1];
+    isClosingPreview = _useState39[0],
+    setIsClosingPreview = _useState39[1];
   var _useState40 = React.useState(false),
-    linkPreviewImageFailed = _useState40[0],
-    setLinkPreviewImageFailed = _useState40[1];
+    replyLinkPreviewImageFailed = _useState40[0],
+    setReplyLinkPreviewImageFailed = _useState40[1];
+  var _useState41 = React.useState(false),
+    linkPreviewImageFailed = _useState41[0],
+    setLinkPreviewImageFailed = _useState41[1];
   var addAttachmentByMenu = showChooseFileAttachment && showChooseMediaAttachment;
   var linkify = new LinkifyIt();
   var oGMetadata = useSelector(function (state) {
@@ -56880,8 +56949,51 @@ 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([]);
+    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);
@@ -56915,7 +57027,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]);
@@ -57567,9 +57699,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);
@@ -57597,7 +57731,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       if (fileType === 'video') {
         beginVideoPreparation(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,
@@ -57905,59 +58039,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));
     }
@@ -57966,6 +58047,9 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     if (!draftsHydrated) {
       return;
     }
+    if (!activeChannel.id || composerChannelId !== activeChannel.id) {
+      return;
+    }
     if (restoringDraftRef.current) {
       restoringDraftRef.current = false;
       return;
@@ -58052,9 +58136,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,
@@ -58066,7 +58150,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
         persist: !!(messageText.trim() || attachments.length)
       });
     }
-  }, [mentionedUsers]);
+  }, [mentionedUsers, activeChannel.id, composerChannelId]);
   useDidUpdate(function () {
     var _getAudioRecordingFro;
     if (handleAttachmentSelected) {
@@ -58113,6 +58197,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;
@@ -58140,7 +58227,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) {
@@ -58173,7 +58260,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);
@@ -58587,11 +58673,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,

package/index.modern.js

@@ -13724,9 +13724,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, {
@@ -29537,9 +29538,16 @@ function updateChannel(action) {
           avatarUrl: avatarUrl,
           metadata: isJSON(metadata) ? JSON.parse(metadata) : metadata
         });
+        _context28.n = 6;
+        return 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 = [];
@@ -29552,22 +29560,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 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;
@@ -34068,10 +34076,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,
@@ -34080,7 +34089,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);
@@ -41325,7 +41341,7 @@ var AttachmentImg = styled.img(_templateObject13$3 || (_templateObject13$3 = _ta
 }, function (props) {
   return props.$fadeIn && css(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n      opacity: 0;\n      animation: ", " 100ms ease-in-out forwards;\n    "])), mediaCrossFade);
 });
-var VideoCont = styled.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  cursor: pointer;\n  width: 100%;\n  height: ", ";\n"])), function (props) {
+var VideoCont = styled.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  cursor: pointer;\n  height: ", ";\n"])), function (props) {
   return props.isDetailsView && '100%';
 });
 
@@ -42573,7 +42589,7 @@ var SliderPopup = function SliderPopup(_ref) {
   };
   var handleClicks = 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,
@@ -43010,6 +43026,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,
@@ -43124,7 +43141,7 @@ var IconWrapper = styled.span(_templateObject10$7 || (_templateObject10$7 = _tag
 }, function (props) {
   return props.hideInMobile && "\n    @media (max-width: 550px) {\n      display: none;\n    }\n  ";
 });
-var CarouselItem$1 = styled.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.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.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.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.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) {
@@ -51060,8 +51077,8 @@ var Message$1 = function Message(_ref) {
   var prevMessageUserID = prevMessage ? getComparableUserId(prevMessage.user) : null;
   var current = moment(message.createdAt).startOf('day');
   var firstMessageInInterval = useMemo(function () {
-    return ifLatestAndHasNotPreview || !(prevMessage && current.diff(moment(prevMessage.createdAt).startOf('day'), 'days') === 0) || (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.type) === 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) === 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 === MESSAGE_TYPE.SYSTEM || nextMessageStartsUnreadSection;
@@ -51437,8 +51454,8 @@ var Message$1 = function Message(_ref) {
     if (!nextMessage || nextMessage.type === 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';
@@ -51451,7 +51468,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,
@@ -52937,7 +52954,7 @@ var MessageList = function MessageList(_ref) {
         isUnreadMessage: false,
         nextMessageStartsUnreadSection: false,
         isHighlighted: false,
-        ifLatestAndHasNotPreview: channel.type !== DEFAULT_CHANNEL_TYPE.DIRECT,
+        ifLatestAndHasNotPreview: index === 0,
         registerInMessagesIndex: false,
         isPinnedMessagesList: true
       });
@@ -55057,10 +55074,14 @@ var Emoji$1 = styled.li(_templateObject8$m || (_templateObject8$m = _taggedTempl
   return props.hoverBackgroundColor;
 });
 
+var isVideoAttachment = function isVideoAttachment(attachment) {
+  var _attachment$data, _attachment$data$type;
+  return attachment.type === attachmentTypes.video || ((_attachment$data = attachment.data) === null || _attachment$data === void 0 ? void 0 : (_attachment$data$type = _attachment$data.type) === null || _attachment$data$type === void 0 ? void 0 : _attachment$data$type.startsWith('video/'));
+};
 var waitForMediaAttachmentPreparation = function waitForMediaAttachmentPreparation(attachments, preparations) {
   try {
     return Promise.resolve(Promise.all(attachments.filter(function (attachment) {
-      return attachment.type === attachmentTypes.image || getOutgoingAttachmentType(attachment) === attachmentTypes.video;
+      return attachment.type === attachmentTypes.image || isVideoAttachment(attachment);
     }).map(function (attachment) {
       return attachment.tid ? preparations.get(attachment.tid) : undefined;
     }))).then(function () {});
@@ -55074,8 +55095,7 @@ var mergePreparedAttachmentPatches = function mergePreparedAttachmentPatches(att
   });
 };
 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';
@@ -56506,6 +56526,52 @@ var SettingItem = styled.div(_templateObject9$k || (_templateObject9$k = _tagged
   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;
@@ -56570,9 +56636,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 ? useLayoutEffect : 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,
@@ -56804,6 +56870,9 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   var _useState30 = useState(areDraftMessagesHydrated()),
     draftsHydrated = _useState30[0],
     setDraftsHydrated = _useState30[1];
+  var _useState31 = useState(activeChannel.id || ''),
+    composerChannelId = _useState31[0],
+    setComposerChannelId = _useState31[1];
   var typingOrRecordingIndicator = useSelector(typingOrRecordingIndicatorArraySelector(activeChannel.id));
   var contactsMap = useSelector(contactsMapSelector);
   var connectionStatus = useSelector(connectionStatusSelector, shallowEqual);
@@ -56820,36 +56889,36 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   var restoringDraftRef = useRef(false);
   var restoredDraftChannelIdRef = useRef(null);
   var isNavigatingChannelRef = useRef(false);
-  var _useState31 = useState(),
-    realEditorState = _useState31[0],
-    setRealEditorState = _useState31[1];
-  var _useState32 = useState(null),
-    floatingAnchorElem = _useState32[0],
-    setFloatingAnchorElem = _useState32[1];
-  var _useState33 = useState(false),
-    isSmallWidthViewport = _useState33[0],
-    setIsSmallWidthViewport = _useState33[1];
+  var _useState32 = useState(),
+    realEditorState = _useState32[0],
+    setRealEditorState = _useState32[1];
+  var _useState33 = useState(null),
+    floatingAnchorElem = _useState33[0],
+    setFloatingAnchorElem = _useState33[1];
   var _useState34 = useState(false),
-    isScrolling = _useState34[0],
-    setIsScrolling = _useState34[1];
-  var _useState35 = useState(null),
-    linkPreview = _useState35[0],
-    setLinkPreview = _useState35[1];
+    isSmallWidthViewport = _useState34[0],
+    setIsSmallWidthViewport = _useState34[1];
+  var _useState35 = useState(false),
+    isScrolling = _useState35[0],
+    setIsScrolling = _useState35[1];
   var _useState36 = useState(null),
-    detectedUrl = _useState36[0],
-    setDetectedUrl = _useState36[1];
-  var _useState37 = useState(new Set()),
-    dismissedUrls = _useState37[0],
-    setDismissedUrls = _useState37[1];
-  var _useState38 = useState(false),
-    isClosingPreview = _useState38[0],
-    setIsClosingPreview = _useState38[1];
+    linkPreview = _useState36[0],
+    setLinkPreview = _useState36[1];
+  var _useState37 = useState(null),
+    detectedUrl = _useState37[0],
+    setDetectedUrl = _useState37[1];
+  var _useState38 = useState(new Set()),
+    dismissedUrls = _useState38[0],
+    setDismissedUrls = _useState38[1];
   var _useState39 = useState(false),
-    replyLinkPreviewImageFailed = _useState39[0],
-    setReplyLinkPreviewImageFailed = _useState39[1];
+    isClosingPreview = _useState39[0],
+    setIsClosingPreview = _useState39[1];
   var _useState40 = useState(false),
-    linkPreviewImageFailed = _useState40[0],
-    setLinkPreviewImageFailed = _useState40[1];
+    replyLinkPreviewImageFailed = _useState40[0],
+    setReplyLinkPreviewImageFailed = _useState40[1];
+  var _useState41 = useState(false),
+    linkPreviewImageFailed = _useState41[0],
+    setLinkPreviewImageFailed = _useState41[1];
   var addAttachmentByMenu = showChooseFileAttachment && showChooseMediaAttachment;
   var linkify = new LinkifyIt();
   var oGMetadata = useSelector(function (state) {
@@ -56860,8 +56929,51 @@ 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([]);
+    setViewOnce(false);
+    setSendMessageIsActive(false);
+    setShouldClearEditor({
+      clear: true
+    });
+    attachmentsUpdate = [];
+    clearTimeout(typingTimout);
+    dispatch(setMessageForReplyAC(null));
+    dispatch(setMessageToEditAC(null));
+  }, [activeChannel.id, composerChannelId]);
   useEffect(function () {
-    if (!draftsHydrated || !activeChannel.id) {
+    if (!draftsHydrated || !activeChannel.id || composerChannelId !== activeChannel.id) {
       return;
     }
     var draftMessage = getDraftMessageFromMap(activeChannel.id);
@@ -56895,7 +57007,27 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       draftMessage: draftMessage
     });
     restoredDraftChannelIdRef.current = activeChannel.id;
-  }, [draftsHydrated, activeChannel.id]);
+  }, [draftsHydrated, activeChannel.id, composerChannelId]);
+  var setComposerMessageText = useCallback(function (text) {
+    if (composerChannelId === activeChannel.id) {
+      setMessageText(text);
+    }
+  }, [activeChannel.id, composerChannelId]);
+  var setComposerEditMessageText = useCallback(function (text) {
+    if (composerChannelId === activeChannel.id) {
+      setEditMessageText(text);
+    }
+  }, [activeChannel.id, composerChannelId]);
+  var setComposerMessageBodyAttributes = useCallback(function (attributes) {
+    if (composerChannelId === activeChannel.id) {
+      setMessageBodyAttributes(attributes);
+    }
+  }, [activeChannel.id, composerChannelId]);
+  var setComposerMentionedUsers = useCallback(function (users) {
+    if (composerChannelId === activeChannel.id) {
+      setMentionedUsers(users);
+    }
+  }, [activeChannel.id, composerChannelId]);
   useEffect(function () {
     setReplyLinkPreviewImageFailed(false);
   }, [messageForReply === null || messageForReply === void 0 ? void 0 : messageForReply.id, messageForReply === null || messageForReply === void 0 ? void 0 : messageForReply.tid]);
@@ -57547,9 +57679,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);
@@ -57577,7 +57711,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       if (fileType === 'video') {
         beginVideoPreparation(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,
@@ -57885,59 +58019,6 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     };
   }, [isSmallWidthViewport]);
   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));
     }
@@ -57946,6 +58027,9 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     if (!draftsHydrated) {
       return;
     }
+    if (!activeChannel.id || composerChannelId !== activeChannel.id) {
+      return;
+    }
     if (restoringDraftRef.current) {
       restoringDraftRef.current = false;
       return;
@@ -58032,9 +58116,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,
@@ -58046,7 +58130,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
         persist: !!(messageText.trim() || attachments.length)
       });
     }
-  }, [mentionedUsers]);
+  }, [mentionedUsers, activeChannel.id, composerChannelId]);
   useDidUpdate(function () {
     var _getAudioRecordingFro;
     if (handleAttachmentSelected) {
@@ -58093,6 +58177,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;
@@ -58120,7 +58207,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) {
@@ -58153,7 +58240,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);
@@ -58567,11 +58653,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sceyt-chat-react-uikit",
-  "version": "1.9.0-beta.14",
+  "version": "1.9.0-beta.16",
   "description": "Interactive React UI Components for Sceyt Chat.",
   "author": "Sceyt",
   "license": "MIT",