@sendbird/uikit-react 3.6.11-beta.3 → 3.7.0-rc.1

package/Channel/components/Message.js

@@ -1,72 +1,74 @@
+import { c as __spreadArray } from '../../tslib.es6-353b1a8e.js';
 import React__default, { useState, useEffect, useRef, useLayoutEffect, useMemo } from 'react';
-import { f as format } from '../../index-0bbeff0d.js';
+import { f as format } from '../../index-26bafa8f.js';
 import SuggestedMentionList from './SuggestedMentionList.js';
-import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import { u as useChannelContext } from '../../ChannelProvider-6aedab94.js';
-import { m as getClassName } from '../../index-e7cbecf4.js';
-import { D as isDisabledBecauseFrozen, E as isDisabledBecauseMuted } from '../../utils-c6ec2848.js';
-import { M as MAX_USER_MENTION_COUNT, a as MAX_USER_SUGGESTION_COUNT } from '../../const-997b7e92.js';
+import { useSendbirdStateContext } from '../../useSendbirdStateContext.js';
+import { u as useChannelContext } from '../../ChannelProvider-08534eaa.js';
+import { o as getClassName } from '../../index-a6cfd784.js';
+import { d as isDisabledBecauseFrozen, e as isDisabledBecauseMuted } from '../../utils-d5f10fce.js';
+import { M as MAX_USER_MENTION_COUNT, a as MAX_USER_SUGGESTION_COUNT } from '../../const-818ac95b.js';
 import DateSeparator from '../../ui/DateSeparator.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-cd36caca.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-72a8436a.js';
 import MessageInput from '../../ui/MessageInput.js';
 import MessageContent from '../../ui/MessageContent.js';
 import FileViewer from './FileViewer.js';
 import RemoveMessage from './RemoveMessageModal.js';
-import { M as MessageInputKeys } from '../../const-264270af.js';
-import { u as useLocalization } from '../../LocalizationContext-5cbe4df3.js';
-import { a as useHandleOnScrollCallback } from '../../index-137fbab9.js';
+import { M as MessageInputKeys } from '../../const-7e1bef20.js';
+import { u as useLocalization } from '../../LocalizationContext-3dd8dd71.js';
+import { a as useHandleOnScrollCallback } from '../../index-bb6d2c32.js';
 import { useDirtyGetMentions } from '../../Message/hooks/useDirtyGetMentions.js';
-import '../../index-c9a60ebd.js';
+import '../../index-de4364e8.js';
 import '../../ui/Icon.js';
 import 'prop-types';
 import '../../ui/Avatar.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-94f10232.js';
-import '../../ThreadProvider-b5a2ad03.js';
+import '../../uuid-a9b18b52.js';
+import '../../Thread/context.js';
+import '../../useSendMultipleFilesMessage-16db4948.js';
+import '../../pubSub/topics.js';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../UserProfileContext-5b8c391a.js';
-import '../../_rollupPluginBabelHelpers-ef032169.js';
+import '../../UserProfileContext-a70aa041.js';
 import '../../Thread/context/types.js';
 import '@sendbird/chat';
-import '../../topics-baecd5b0.js';
-import '@sendbird/chat/groupChannel';
 import '@sendbird/chat/message';
-import '../../consts-2144a35b.js';
-import '../../useSendMultipleFilesMessage-c351cca7.js';
+import '@sendbird/chat/groupChannel';
+import '../../consts-9a7169ff.js';
 import '../../withSendbird.js';
-import '../../compareIds-e6958df7.js';
-import '../../resolvedReplyType-9e0d7d55.js';
-import '../../index.module-74c51bef.js';
-import '../../color-e8886e80.js';
-import '../../stringSet-2ab6570e.js';
+import '../../index-4ff8441f.js';
+import '../../compareIds-6a90b7d0.js';
+import '../../_rollupPluginBabelHelpers-bb4003a4.js';
+import '../../resolvedReplyType-1880de12.js';
+import '../../color-e1c45ba1.js';
+import '../../stringSet-82c00996.js';
 import '../../ui/IconButton.js';
 import '../../ui/Button.js';
-import '../../index-f27e3f26.js';
+import '../../types-9a224810.js';
+import '../../index-d6c3b3a4.js';
 import 'dompurify';
-import '../../consts-6a76be86.js';
-import '../../consts-0808a594.js';
-import '../../consts-3e2a0b41.js';
-import '../../tokenize-25f71231.js';
+import '../../consts-893be876.js';
+import '../../consts-99975d63.js';
+import '../../consts-96ddd57a.js';
+import '../../tokenize-d54187ef.js';
 import '../../ui/UserProfile.js';
 import '../../sendbirdSelectors.js';
-import '../../utils-1babe991.js';
-import '../../index-91b8ea75.js';
+import '../../utils-dc677a86.js';
+import '../../index-446afac4.js';
 import '../../ui/Loader.js';
-import '../../index-3c2e063e.js';
-import '../../index-f8b1f2fd.js';
+import '../../index-c3d24a1e.js';
+import '../../index-e2e20fad.js';
 import '../../ui/MessageItemMenu.js';
 import '../../ui/ContextMenu.js';
 import 'react-dom';
 import '../../ui/SortByRow.js';
-import '../../types-76bdfba5.js';
+import '../../types-afb18a4f.js';
 import '../../ui/MessageItemReactionMenu.js';
 import '../../ui/ReactionButton.js';
-import '../../useLongPress-eb0dfa7a.js';
-import '../../MediaQueryContext-8fcfd909.js';
+import '../../useLongPress-3c3dbc28.js';
+import '../../MediaQueryContext-e7425227.js';
 import '../../ui/EmojiReactions.js';
 import '../../ui/ReactionBadge.js';
 import '../../ui/BottomSheet.js';
-import '../../index-4f2e8b24.js';
+import '../../index-7c8bbc47.js';
 import '../../ui/UserListItem.js';
 import '../../ui/MutedAvatarOverlay.js';
 import '../../ui/Checkbox.js';
@@ -75,32 +77,34 @@ import '../../ui/TooltipWrapper.js';
 import '../../Message/context.js';
 import '../../ui/AdminMessage.js';
 import '../../ui/TextMessageItemBody.js';
-import '../../index-ac325b55.js';
+import '../../index-02a91ddb.js';
 import '../../ui/MentionLabel.js';
 import '../../ui/LinkLabel.js';
 import '../../ui/FileMessageItemBody.js';
 import '../../ui/TextButton.js';
 import '../../ui/ThumbnailMessageItemBody.js';
-import '../../utils-d6b42051.js';
+import '../../utils-d15efa15.js';
 import '../../ui/OGMessageItemBody.js';
 import '../../ui/UnknownMessageItemBody.js';
 import '../../ui/QuoteMessage.js';
-import '../../index-f14314d9.js';
+import '../../index-e0e44e8a.js';
 import '../../ui/ThreadReplies.js';
 import '../../ui/VoiceMessageItemBody.js';
 import '../../ui/ProgressBar.js';
 import '../../VoicePlayer/useVoicePlayer.js';
-import '../../index-4214d5e5.js';
+import '../../index-a3b1c2f0.js';
 import '../../VoiceRecorder/context.js';
 import '../../ui/Modal.js';
 import '../../ui/PlaybackTime.js';
-import '../../index-4f3b01f7.js';
-import '../../index-35c34277.js';
-import '../../stringFormatterUtils-1656fed9.js';
+import '../../useStatefulFileInfoList-1bf95209.js';
+import '../../index-6b269462.js';
+import '../../stringFormatterUtils-c5516210.js';
 
-const useDidMountEffect = (func, deps) => {
-  const [didMount, setDidmount] = useState(false);
-  useEffect(() => {
+var useDidMountEffect = function (func, deps) {
+  var _a = useState(false),
+    didMount = _a[0],
+    setDidmount = _a[1];
+  useEffect(function () {
     if (didMount) {
       func();
     } else {
@@ -110,90 +114,105 @@ const useDidMountEffect = (func, deps) => {
 };
 
 // todo: Refactor this component, is too complex now
-const Message = _ref => {
-  var _message$reactions, _message$isUserMessag;
-  let {
-    message,
-    hasSeparator,
-    chainTop,
-    chainBottom,
-    handleScroll,
-    renderCustomSeparator,
-    renderEditInput,
-    renderMessage,
-    renderMessageContent
-  } = _ref;
-  const {
-    dateLocale
-  } = useLocalization();
-  const globalStore = useSendbirdStateContext();
-  const {
-    userId,
-    isOnline,
-    isMentionEnabled,
-    userMention,
-    logger
-  } = globalStore.config;
-  const maxUserMentionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount) || MAX_USER_MENTION_COUNT;
-  const maxUserSuggestionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount) || MAX_USER_SUGGESTION_COUNT;
-  const {
-    initialized,
-    currentGroupChannel,
-    highLightedMessageId,
-    setHighLightedMessageId,
-    animatedMessageId,
-    setAnimatedMessageId,
-    updateMessage,
-    scrollToMessage,
-    replyType,
-    threadReplySelectType,
-    isReactionEnabled,
-    toggleReaction,
-    emojiContainer,
-    nicknamesMap,
-    setQuoteMessage,
-    resendMessage,
-    renderUserMentionItem,
-    onReplyInThread,
-    onQuoteMessageClick,
-    onMessageAnimated,
-    onMessageHighlighted,
-    onScrollCallback,
-    setIsScrolled
-  } = useChannelContext();
-  const [showEdit, setShowEdit] = useState(false);
-  const [showRemove, setShowRemove] = useState(false);
-  const [showFileViewer, setShowFileViewer] = useState(false);
-  const [isAnimated, setIsAnimated] = useState(false);
-  const [isHighlighted, setIsHighlighted] = useState(false);
-  const [mentionNickname, setMentionNickname] = useState('');
-  const [mentionedUsers, setMentionedUsers] = useState([]);
-  const [mentionedUserIds, setMentionedUserIds] = useState([]);
-  const [messageInputEvent, setMessageInputEvent] = useState(null);
-  const [selectedUser, setSelectedUser] = useState(null);
-  const [mentionSuggestedUsers, setMentionSuggestedUsers] = useState([]);
-  const editMessageInputRef = useRef(null);
-  const messageScrollRef = useRef(null);
-  const displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !isDisabledBecauseFrozen(currentGroupChannel) && !isDisabledBecauseMuted(currentGroupChannel);
-  const disabled = !initialized || isDisabledBecauseFrozen(currentGroupChannel) || isDisabledBecauseMuted(currentGroupChannel) || !isOnline;
-  const handleOnScroll = useHandleOnScrollCallback({
+var Message = function (_a) {
+  var _b, _c;
+  var message = _a.message,
+    hasSeparator = _a.hasSeparator,
+    chainTop = _a.chainTop,
+    chainBottom = _a.chainBottom,
+    handleScroll = _a.handleScroll,
+    renderCustomSeparator = _a.renderCustomSeparator,
+    renderEditInput = _a.renderEditInput,
+    renderMessage = _a.renderMessage,
+    renderMessageContent = _a.renderMessageContent;
+  var dateLocale = useLocalization().dateLocale;
+  var globalStore = useSendbirdStateContext();
+  var _d = globalStore.config,
+    userId = _d.userId,
+    isOnline = _d.isOnline,
+    isMentionEnabled = _d.isMentionEnabled,
+    userMention = _d.userMention,
+    logger = _d.logger;
+  var maxUserMentionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount) || MAX_USER_MENTION_COUNT;
+  var maxUserSuggestionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount) || MAX_USER_SUGGESTION_COUNT;
+  var _e = useChannelContext(),
+    initialized = _e.initialized,
+    currentGroupChannel = _e.currentGroupChannel,
+    highLightedMessageId = _e.highLightedMessageId,
+    setHighLightedMessageId = _e.setHighLightedMessageId,
+    animatedMessageId = _e.animatedMessageId,
+    setAnimatedMessageId = _e.setAnimatedMessageId,
+    updateMessage = _e.updateMessage,
+    scrollToMessage = _e.scrollToMessage,
+    replyType = _e.replyType,
+    threadReplySelectType = _e.threadReplySelectType,
+    isReactionEnabled = _e.isReactionEnabled,
+    toggleReaction = _e.toggleReaction,
+    emojiContainer = _e.emojiContainer,
+    nicknamesMap = _e.nicknamesMap,
+    setQuoteMessage = _e.setQuoteMessage,
+    resendMessage = _e.resendMessage,
+    deleteMessage = _e.deleteMessage,
+    renderUserMentionItem = _e.renderUserMentionItem,
+    onReplyInThread = _e.onReplyInThread,
+    onQuoteMessageClick = _e.onQuoteMessageClick,
+    onMessageAnimated = _e.onMessageAnimated,
+    onMessageHighlighted = _e.onMessageHighlighted,
+    onScrollCallback = _e.onScrollCallback,
+    setIsScrolled = _e.setIsScrolled;
+  var _f = useState(false),
+    showEdit = _f[0],
+    setShowEdit = _f[1];
+  var _g = useState(false),
+    showRemove = _g[0],
+    setShowRemove = _g[1];
+  var _h = useState(false),
+    showFileViewer = _h[0],
+    setShowFileViewer = _h[1];
+  var _j = useState(false),
+    isAnimated = _j[0],
+    setIsAnimated = _j[1];
+  var _k = useState(false),
+    isHighlighted = _k[0],
+    setIsHighlighted = _k[1];
+  var _l = useState(''),
+    mentionNickname = _l[0],
+    setMentionNickname = _l[1];
+  var _m = useState([]),
+    mentionedUsers = _m[0],
+    setMentionedUsers = _m[1];
+  var _o = useState([]),
+    mentionedUserIds = _o[0],
+    setMentionedUserIds = _o[1];
+  var _p = useState(null),
+    messageInputEvent = _p[0],
+    setMessageInputEvent = _p[1];
+  var _q = useState(null),
+    selectedUser = _q[0],
+    setSelectedUser = _q[1];
+  var _r = useState([]),
+    mentionSuggestedUsers = _r[0],
+    setMentionSuggestedUsers = _r[1];
+  var editMessageInputRef = useRef(null);
+  var messageScrollRef = useRef(null);
+  var displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !isDisabledBecauseFrozen(currentGroupChannel) && !isDisabledBecauseMuted(currentGroupChannel);
+  var disabled = !initialized || isDisabledBecauseFrozen(currentGroupChannel) || isDisabledBecauseMuted(currentGroupChannel) || !isOnline;
+  var handleOnScroll = useHandleOnScrollCallback({
     hasMore: false,
     onScroll: onScrollCallback,
     scrollRef: messageScrollRef,
-    setIsScrolled
+    setIsScrolled: setIsScrolled
   });
-  const mentionNodes = useDirtyGetMentions({
+  var mentionNodes = useDirtyGetMentions({
     ref: editMessageInputRef
   }, {
-    logger
+    logger: logger
   });
-  const ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < maxUserMentionCount;
-  useEffect(() => {
-    setMentionedUsers(mentionedUsers.filter(_ref2 => {
-      let {
-        userId
-      } = _ref2;
-      const i = mentionedUserIds.indexOf(userId);
+  var ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < maxUserMentionCount;
+  useEffect(function () {
+    setMentionedUsers(mentionedUsers.filter(function (_a) {
+      var userId = _a.userId;
+      var i = mentionedUserIds.indexOf(userId);
       if (i < 0) {
         return false;
       } else {
@@ -202,7 +221,7 @@ const Message = _ref => {
       }
     }));
   }, [mentionedUserIds]);
-  useLayoutEffect(() => {
+  useLayoutEffect(function () {
     // Keep the scrollBottom value after fetching new message list
     handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll();
   }, []);
@@ -210,62 +229,62 @@ const Message = _ref => {
    * Move the messsage list scroll
    * when the message's height is changed by `showEdit` OR `message.reactions`
    */
-  useDidMountEffect(() => {
+  useDidMountEffect(function () {
     handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll();
-  }, [showEdit, message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length]);
-  useDidMountEffect(() => {
+  }, [showEdit, (_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length]);
+  useDidMountEffect(function () {
     handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll(true);
   }, [message === null || message === void 0 ? void 0 : message.updatedAt]);
-  useLayoutEffect(() => {
-    let animationTimeout = null;
-    let messageHighlightedTimeout = null;
-    if (highLightedMessageId === message.messageId && messageScrollRef !== null && messageScrollRef !== void 0 && messageScrollRef.current) {
+  useLayoutEffect(function () {
+    var animationTimeout = null;
+    var messageHighlightedTimeout = null;
+    if (highLightedMessageId === message.messageId && (messageScrollRef === null || messageScrollRef === void 0 ? void 0 : messageScrollRef.current)) {
       handleOnScroll();
       setIsAnimated(false);
-      animationTimeout = setTimeout(() => {
+      animationTimeout = setTimeout(function () {
         setIsHighlighted(true);
       }, 500);
-      messageHighlightedTimeout = setTimeout(() => {
+      messageHighlightedTimeout = setTimeout(function () {
         setHighLightedMessageId(0);
         onMessageHighlighted === null || onMessageHighlighted === void 0 ? void 0 : onMessageHighlighted();
       }, 1600);
     } else {
       setIsHighlighted(false);
     }
-    return () => {
+    return function () {
       clearTimeout(animationTimeout);
       clearTimeout(messageHighlightedTimeout);
     };
   }, [highLightedMessageId, messageScrollRef.current, message.messageId]);
-  useLayoutEffect(() => {
-    let animationTimeout = null;
-    let messageAnimatedTimeout = null;
-    if (animatedMessageId === message.messageId && messageScrollRef !== null && messageScrollRef !== void 0 && messageScrollRef.current) {
+  useLayoutEffect(function () {
+    var animationTimeout = null;
+    var messageAnimatedTimeout = null;
+    if (animatedMessageId === message.messageId && (messageScrollRef === null || messageScrollRef === void 0 ? void 0 : messageScrollRef.current)) {
       handleOnScroll();
       setIsHighlighted(false);
-      animationTimeout = setTimeout(() => {
+      animationTimeout = setTimeout(function () {
         setIsAnimated(true);
       }, 500);
-      messageAnimatedTimeout = setTimeout(() => {
+      messageAnimatedTimeout = setTimeout(function () {
         setAnimatedMessageId(0);
         onMessageAnimated === null || onMessageAnimated === void 0 ? void 0 : onMessageAnimated();
       }, 1600);
     } else {
       setIsAnimated(false);
     }
-    return () => {
+    return function () {
       clearTimeout(animationTimeout);
       clearTimeout(messageAnimatedTimeout);
     };
   }, [animatedMessageId, messageScrollRef.current, message.messageId, onMessageAnimated]);
-  const renderedMessage = useMemo(() => {
+  var renderedMessage = useMemo(function () {
     return renderMessage === null || renderMessage === void 0 ? void 0 : renderMessage({
-      message,
-      chainTop,
-      chainBottom
+      message: message,
+      chainTop: chainTop,
+      chainBottom: chainBottom
     });
   }, [message, renderMessage]);
-  const renderedCustomSeparator = useMemo(() => {
+  var renderedCustomSeparator = useMemo(function () {
     if (renderCustomSeparator) {
       return renderCustomSeparator === null || renderCustomSeparator === void 0 ? void 0 : renderCustomSeparator({
         message: message
@@ -290,23 +309,23 @@ const Message = _ref => {
       locale: dateLocale
     })))), renderedMessage);
   }
-  if (showEdit && message !== null && message !== void 0 && (_message$isUserMessag = message.isUserMessage) !== null && _message$isUserMessag !== void 0 && _message$isUserMessag.call(message)) {
+  if (showEdit && ((_c = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _c === void 0 ? void 0 : _c.call(message))) {
     return (renderEditInput === null || renderEditInput === void 0 ? void 0 : renderEditInput()) || /*#__PURE__*/React__default.createElement(React__default.Fragment, null, displaySuggestedMentionList && /*#__PURE__*/React__default.createElement(SuggestedMentionList, {
       targetNickname: mentionNickname,
       inputEvent: messageInputEvent,
       renderUserMentionItem: renderUserMentionItem,
-      onUserItemClick: user => {
+      onUserItemClick: function (user) {
         if (user) {
-          setMentionedUsers([...mentionedUsers, user]);
+          setMentionedUsers(__spreadArray(__spreadArray([], mentionedUsers, true), [user], false));
         }
         setMentionNickname('');
         setSelectedUser(user);
         setMessageInputEvent(null);
       },
-      onFocusItemChange: () => {
+      onFocusItemChange: function () {
         setMessageInputEvent(null);
       },
-      onFetchUsers: users => {
+      onFetchUsers: function (users) {
         setMentionSuggestedUsers(users);
       },
       ableAddMention: ableMention,
@@ -320,48 +339,46 @@ const Message = _ref => {
       mentionSelectedUser: selectedUser,
       isMentionEnabled: isMentionEnabled,
       message: message,
-      onStartTyping: () => {
-        var _currentGroupChannel$;
-        currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : (_currentGroupChannel$ = currentGroupChannel.startTyping) === null || _currentGroupChannel$ === void 0 ? void 0 : _currentGroupChannel$.call(currentGroupChannel);
+      onStartTyping: function () {
+        var _a;
+        (_a = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.startTyping) === null || _a === void 0 ? void 0 : _a.call(currentGroupChannel);
       },
-      onUpdateMessage: _ref3 => {
-        var _currentGroupChannel$2;
-        let {
-          messageId,
-          message,
-          mentionTemplate
-        } = _ref3;
+      onUpdateMessage: function (_a) {
+        var _b;
+        var messageId = _a.messageId,
+          message = _a.message,
+          mentionTemplate = _a.mentionTemplate;
         updateMessage({
-          messageId,
-          message,
-          mentionedUsers,
-          mentionTemplate
+          messageId: messageId,
+          message: message,
+          mentionedUsers: mentionedUsers,
+          mentionTemplate: mentionTemplate
         });
         setShowEdit(false);
-        currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : (_currentGroupChannel$2 = currentGroupChannel.endTyping) === null || _currentGroupChannel$2 === void 0 ? void 0 : _currentGroupChannel$2.call(currentGroupChannel);
+        (_b = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.endTyping) === null || _b === void 0 ? void 0 : _b.call(currentGroupChannel);
       },
-      onCancelEdit: () => {
-        var _currentGroupChannel$3;
+      onCancelEdit: function () {
+        var _a;
         setMentionNickname('');
         setMentionedUsers([]);
         setMentionedUserIds([]);
         setMentionSuggestedUsers([]);
         setShowEdit(false);
-        currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : (_currentGroupChannel$3 = currentGroupChannel.endTyping) === null || _currentGroupChannel$3 === void 0 ? void 0 : _currentGroupChannel$3.call(currentGroupChannel);
+        (_a = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.endTyping) === null || _a === void 0 ? void 0 : _a.call(currentGroupChannel);
       },
-      onUserMentioned: user => {
+      onUserMentioned: function (user) {
         if ((selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userId) === (user === null || user === void 0 ? void 0 : user.userId)) {
           setSelectedUser(null);
           setMentionNickname('');
         }
       },
-      onMentionStringChange: mentionText => {
+      onMentionStringChange: function (mentionText) {
         setMentionNickname(mentionText);
       },
-      onMentionedUserIdsUpdated: userIds => {
+      onMentionedUserIdsUpdated: function (userIds) {
         setMentionedUserIds(userIds);
       },
-      onKeyDown: e => {
+      onKeyDown: function (e) {
         if (displaySuggestedMentionList && (mentionSuggestedUsers === null || mentionSuggestedUsers === void 0 ? void 0 : mentionSuggestedUsers.length) > 0 && (e.key === MessageInputKeys.Enter && ableMention || e.key === MessageInputKeys.ArrowUp || e.key === MessageInputKeys.ArrowDown)) {
           setMessageInputEvent(e);
           return true;
@@ -401,6 +418,7 @@ const Message = _ref => {
     showRemove: setShowRemove,
     showFileViewer: setShowFileViewer,
     resendMessage: resendMessage,
+    deleteMessage: deleteMessage,
     toggleReaction: toggleReaction,
     setQuoteMessage: setQuoteMessage,
     onReplyInThread: onReplyInThread,
@@ -408,10 +426,14 @@ const Message = _ref => {
     onMessageHeightChange: handleScroll
   }), showRemove && /*#__PURE__*/React__default.createElement(RemoveMessage, {
     message: message,
-    onCancel: () => setShowRemove(false)
+    onCancel: function () {
+      return setShowRemove(false);
+    }
   }), showFileViewer && /*#__PURE__*/React__default.createElement(FileViewer, {
     message: message,
-    onCancel: () => setShowFileViewer(false)
+    onCancel: function () {
+      return setShowFileViewer(false);
+    }
   }));
 };