sceyt-chat-react-uikit 1.9.0-beta.13 → 1.9.0-beta.15

package/index.js

@@ -31515,11 +31515,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 +33945,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,
@@ -42569,7 +42593,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,
@@ -43006,6 +43030,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,
@@ -43120,7 +43145,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) {
@@ -43172,8 +43197,8 @@ 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 navigateToPinnedMessage = function navigateToPinnedMessage() {
     if (parentMessageId) navigateToMessage(parentMessageId);
@@ -43262,18 +43287,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';
@@ -43309,6 +43334,8 @@ var PinnedMessagesBanner = function PinnedMessagesBanner(_ref) {
   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],
@@ -43464,7 +43491,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, {
+  }, preview(active.message, contactsMap, getFromContacts))), /*#__PURE__*/React__default.createElement(Controls$1, {
     onClick: function onClick(event) {
       return event.stopPropagation();
     },
@@ -45735,7 +45762,12 @@ var PinnedMessagesList = function PinnedMessagesList(_ref) {
     var rowBounds = event.currentTarget.getBoundingClientRect();
     var contentBounds = messageContent.getBoundingClientRect();
     var messageItem = event.currentTarget.querySelector('.message_item');
-    var bottom = messageItem ? Number.parseFloat(window.getComputedStyle(messageItem).marginBottom) || 0 : 0;
+    var reactionContainerId = message.id + "_reactions_container";
+    var reactionContainer = Array.from(event.currentTarget.querySelectorAll('[id]')).find(function (element) {
+      return element.id === reactionContainerId;
+    });
+    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;
@@ -49330,6 +49362,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(),
@@ -49444,9 +49478,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,
@@ -49617,6 +49651,7 @@ 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;
@@ -49638,7 +49673,8 @@ var MessageReactions = function MessageReactions(_ref) {
     rtlDirection: rtlDirection,
     handleAddDeleteEmoji: onReactionAddDelete,
     reactionsDetailsPopupBorderRadius: reactionsDetailsPopupBorderRadius,
-    reactionsDetailsPopupHeaderItemsStyle: reactionsDetailsPopupHeaderItemsStyle
+    reactionsDetailsPopupHeaderItemsStyle: reactionsDetailsPopupHeaderItemsStyle,
+    popupZIndex: popupZIndex
   })), /*#__PURE__*/React__default.createElement(ReactionsContainer, {
     ref: enableTransitionRef,
     id: message.id + "_reactions_container",
@@ -51045,8 +51081,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;
@@ -51056,17 +51092,10 @@ var Message$1 = function Message(_ref) {
   var selectionIsActive = selectedMessagesMap && selectedMessagesMap.size > 0;
   var isSelectedMessage = selectedMessagesMap && selectedMessagesMap.get(message.id || message.tid);
   var tooManySelected = selectedMessagesMap && selectedMessagesMap.size >= MAX_SELECTED_MESSAGES;
-  var openPinnedMessageInConversation = React.useCallback(function () {
-    if (!isPinnedMessagesList) return;
-    var messageId = message.id || message.tid;
-    if (messageId) navigateToMessage(messageId);
-    dispatch(requestPinnedMessagesListCloseAC());
-  }, [dispatch, isPinnedMessagesList, message.id, message.tid]);
   var toggleEditMode = React.useCallback(function () {
-    openPinnedMessageInConversation();
     dispatch(setMessageToEditAC(message));
     setMessageActionsShow(false);
-  }, [dispatch, message, openPinnedMessageInConversation]);
+  }, [dispatch, message]);
   var handleRetractVote = React.useCallback(function () {
     var _message$pollDetails;
     if (message !== null && message !== void 0 && (_message$pollDetails = message.pollDetails) !== null && _message$pollDetails !== void 0 && _message$pollDetails.id) {
@@ -51133,12 +51162,11 @@ var Message$1 = function Message(_ref) {
     setMessageActionsShow(false);
   }, [channel.id, dispatch, message, pinnedMessage, setMessageActionsShow]);
   var handleReplyMessage = React.useCallback(function (threadReply) {
-    openPinnedMessageInConversation();
     if (threadReply) ; else {
       dispatch(setMessageForReplyAC(message));
     }
     setMessageActionsShow(false);
-  }, [dispatch, message, openPinnedMessageInConversation]);
+  }, [dispatch, message]);
   var handleToggleReportPopupOpen = React.useCallback(function () {
     setReportPopupOpen(function (prev) {
       return !prev;
@@ -51383,7 +51411,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;
     }
@@ -51396,7 +51424,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 () {
@@ -51430,8 +51458,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';
@@ -51444,7 +51472,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,
@@ -51489,6 +51517,7 @@ var Message$1 = function Message(_ref) {
     ifLatestAndHasNotPreview: ifLatestAndHasNotPreview,
     channel: channel,
     message: message,
+    isPinnedMessagesList: isPinnedMessagesList,
     prevMessage: prevMessage,
     nextMessage: nextMessage,
     unreadMessageId: unreadMessageId,
@@ -51713,6 +51742,7 @@ var Message$1 = function Message(_ref) {
     reactionsContainerPadding: reactionsContainerPadding,
     reactionsDetailsPopupBorderRadius: reactionsDetailsPopupBorderRadius,
     reactionsDetailsPopupHeaderItemsStyle: reactionsDetailsPopupHeaderItemsStyle,
+    popupZIndex: isPinnedMessagesList ? 30 : undefined,
     onToggleReactionsPopup: handleToggleReactionsPopup,
     onReactionAddDelete: handleReactionAddDelete,
     onOpenUserProfile: handleOpenUserProfile
@@ -52662,13 +52692,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,
@@ -52928,7 +52958,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
       });
@@ -55357,6 +55387,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;
@@ -55434,17 +55467,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) {
@@ -55460,8 +55489,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,
@@ -55550,17 +55587,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) {
@@ -55568,7 +55607,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:')) {
@@ -55589,10 +55633,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', {
@@ -55602,6 +55657,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 () {
@@ -55609,76 +55666,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) {
@@ -55695,8 +55776,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 {
@@ -55790,9 +55870,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);
@@ -56644,101 +56722,109 @@ 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];
-  var _useState23 = React.useState(false),
-    forwardPopupOpen = _useState23[0],
-    setForwardPopupOpen = _useState23[1];
+    inTypingState = _useState21[0],
+    setInTypingState = _useState21[1];
+  var _useState22 = React.useState(false),
+    sendMessageIsActive = _useState22[0],
+    setSendMessageIsActive = _useState22[1];
+  var _useState23 = React.useState([]),
+    attachments = _useState23[0],
+    setAttachments = _useState23[1];
   var _useState24 = React.useState(false),
-    deletePopupOpen = _useState24[0],
-    setDeletePopupOpen = _useState24[1];
+    forwardPopupOpen = _useState24[0],
+    setForwardPopupOpen = _useState24[1];
   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];
+    deletePopupOpen = _useState25[0],
+    setDeletePopupOpen = _useState25[1];
+  var _useState26 = React.useState(false),
+    isIncomingMessage = _useState26[0],
+    setIsIncomingMessage = _useState26[1];
+  var _useState27 = React.useState('.jpg,.jpeg,.png,.gif,.mp4,.mov,.avi,.wmv,.flv,.webm,.jfif'),
+    mediaExtensions = _useState27[0],
+    setMediaExtensions = _useState27[1];
+  var _useState28 = React.useState(''),
+    uploadErrorMessage = _useState28[0],
+    setUploadErrorMessage = _useState28[1];
+  var _useState29 = React.useState(false),
+    viewOnce = _useState29[0],
+    setViewOnce = _useState29[1];
+  var _useState30 = React.useState(areDraftMessagesHydrated()),
+    draftsHydrated = _useState30[0],
+    setDraftsHydrated = _useState30[1];
   var typingOrRecordingIndicator = useSelector(typingOrRecordingIndicatorArraySelector(activeChannel.id));
   var contactsMap = useSelector(contactsMapSelector);
   var connectionStatus = useSelector(connectionStatusSelector, reactRedux.shallowEqual);
@@ -56755,36 +56841,36 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   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 _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),
-    isScrolling = _useState33[0],
-    setIsScrolling = _useState33[1];
-  var _useState34 = React.useState(null),
-    linkPreview = _useState34[0],
-    setLinkPreview = _useState34[1];
+    isSmallWidthViewport = _useState33[0],
+    setIsSmallWidthViewport = _useState33[1];
+  var _useState34 = React.useState(false),
+    isScrolling = _useState34[0],
+    setIsScrolling = _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];
+    linkPreview = _useState35[0],
+    setLinkPreview = _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),
-    replyLinkPreviewImageFailed = _useState38[0],
-    setReplyLinkPreviewImageFailed = _useState38[1];
+    isClosingPreview = _useState38[0],
+    setIsClosingPreview = _useState38[1];
   var _useState39 = React.useState(false),
-    linkPreviewImageFailed = _useState39[0],
-    setLinkPreviewImageFailed = _useState39[1];
+    replyLinkPreviewImageFailed = _useState39[0],
+    setReplyLinkPreviewImageFailed = _useState39[1];
+  var _useState40 = React.useState(false),
+    linkPreviewImageFailed = _useState40[0],
+    setLinkPreviewImageFailed = _useState40[1];
   var addAttachmentByMenu = showChooseFileAttachment && showChooseMediaAttachment;
   var linkify = new LinkifyIt();
   var oGMetadata = useSelector(function (state) {
@@ -58565,7 +58651,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,