@sendbird/uikit-react 3.6.11-beta.2 → 3.7.0-rc.0

package/Thread/components/ParentMessageInfo.js

@@ -1,44 +1,46 @@
-import { b as _extends, _ as _objectSpread2 } from '../../_rollupPluginBabelHelpers-50c9576f.js';
+import { _ as _extends } from '../../_rollupPluginBabelHelpers-07dcbc2b.js';
+import { c as __spreadArray, _ as __assign } from '../../tslib.es6-0c779aab.js';
 import React__default, { useState, useRef, useEffect, useContext } from 'react';
-import { f as format } from '../../index-daa3ae67.js';
-import { R as RemoveMessage } from '../../RemoveMessageModal-9162aebe.js';
+import { f as format } from '../../index-c81fd6ec.js';
+import { R as RemoveMessage } from '../../RemoveMessageModal-f0cd37a5.js';
 import ParentMessageInfoItem from './ParentMessageInfoItem.js';
-import { z as getSenderName } from '../../index-5d6a0f12.js';
-import { g as getIsReactionEnabled } from '../../ChannelProvider-9de00431.js';
-import { u as useLocalization } from '../../LocalizationContext-2463058b.js';
-import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import { u as useThreadContext } from '../../ThreadProvider-9a3b145f.js';
-import { a as UserProfileContext } from '../../UserProfileContext-4ae968eb.js';
+import { B as getSenderName } from '../../index-fc1642cb.js';
+import { g as getIsReactionEnabled } from '../../ChannelProvider-7f6fd1f8.js';
+import { u as useLocalization } from '../../LocalizationContext-d18a86d8.js';
+import { useSendbirdStateContext } from '../../useSendbirdStateContext.js';
+import { useThreadContext } from '../context.js';
+import { a as UserProfileContext } from '../../UserProfileContext-26e71f9a.js';
 import SuggestedMentionList from '../../Channel/components/SuggestedMentionList.js';
 import Avatar from '../../ui/Avatar.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-aa520474.js';
-import { F as FileViewer } from '../../index-c421b228.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-12103973.js';
+import { F as FileViewer } from '../../index-7a1085b6.js';
 import MessageItemMenu from '../../ui/MessageItemMenu.js';
 import MessageItemReactionMenu from '../../ui/MessageItemReactionMenu.js';
 import ContextMenu, { MenuItems } from '../../ui/ContextMenu.js';
 import UserProfile from '../../ui/UserProfile.js';
 import MessageInput from '../../ui/MessageInput.js';
-import { M as MessageInputKeys } from '../../const-74ec9eb4.js';
-import { R as Role } from '../../types-89092633.js';
-import { u as useMediaQueryContext } from '../../MediaQueryContext-e3429d12.js';
-import { u as useLongPress } from '../../useLongPress-5e1ad951.js';
-import { M as MobileMenu } from '../../index-b25ffa7e.js';
+import { M as MessageInputKeys } from '../../const-4bc3721f.js';
+import { R as Role } from '../../types-50e412d8.js';
+import { u as useMediaQueryContext } from '../../MediaQueryContext-3eeeec4f.js';
+import { u as useLongPress } from '../../useLongPress-322bb6a3.js';
+import { M as MobileMenu } from '../../index-eec0ce47.js';
 import { useDirtyGetMentions } from '../../Message/hooks/useDirtyGetMentions.js';
-import '../../index-7700a436.js';
+import '../../index-d3f61405.js';
 import '../../ui/Modal.js';
 import 'react-dom';
-import '../../utils-407da489.js';
-import '../../index.module-60af77d3.js';
-import '../../index-98887e8d.js';
+import '../../utils-74c161a0.js';
+import '../../index-c6095960.js';
+import '../../index-c7ed4aef.js';
 import '../../ui/IconButton.js';
 import '../../ui/Button.js';
+import '../../types-4ffc52f6.js';
 import 'prop-types';
-import '../../stringSet-2814bf17.js';
+import '../../stringSet-1106c8ec.js';
 import '../../ui/Icon.js';
-import '../../stringFormatterUtils-dbad592d.js';
+import '../../stringFormatterUtils-444f6f4c.js';
 import '../../ui/ImageRenderer.js';
 import '../../ui/TextButton.js';
-import '../../color-b7f211a8.js';
+import '../../color-1383d4ab.js';
 import '../../ui/EmojiReactions.js';
 import '../../ui/ReactionBadge.js';
 import '../../ui/ReactionButton.js';
@@ -46,9 +48,9 @@ import '../../ui/BottomSheet.js';
 import '../../ui/UserListItem.js';
 import '../../ui/MutedAvatarOverlay.js';
 import '../../ui/Checkbox.js';
-import '../../uuid-16373bba.js';
+import '../../uuid-3c77ef7b.js';
 import '../../sendbirdSelectors.js';
-import '../../topics-5659403d.js';
+import '../../pubSub/topics.js';
 import '../../withSendbird.js';
 import '../../ui/SortByRow.js';
 import '../../utils/message/getOutgoingMessageState.js';
@@ -58,83 +60,80 @@ import '../../Message/context.js';
 import '../../ui/VoiceMessageItemBody.js';
 import '../../ui/ProgressBar.js';
 import '../../VoicePlayer/useVoicePlayer.js';
-import '../../index-e15f6b6a.js';
-import '../../consts-691a3935.js';
+import '../../index-124a5766.js';
+import '../../consts-aa64aca8.js';
 import '../../VoiceRecorder/context.js';
 import '../../ui/PlaybackTime.js';
 import '../../ui/Loader.js';
-import '../../index-ae7ef8cf.js';
-import '../../tokenize-4b153552.js';
+import '../../index-3d508585.js';
+import '../../tokenize-d17bf862.js';
 import '../../ui/MentionLabel.js';
 import '../../ui/LinkLabel.js';
-import '../../index-7b7478f5.js';
-import '../../const-711048c3.js';
-import '../../utils-0c22998a.js';
-import '../../compareIds-8ed6e36a.js';
-import '@sendbird/chat/groupChannel';
+import '../../useStatefulFileInfoList-dd95f949.js';
 import '@sendbird/chat/message';
-import '../../resolvedReplyType-1a128514.js';
-import '../../useSendMultipleFilesMessage-a3a2c84b.js';
+import '../../const-e3326913.js';
+import '../../utils-40040f8e.js';
+import '../../useSendMultipleFilesMessage-4489a0f6.js';
+import '../../compareIds-b56b02f1.js';
+import '@sendbird/chat/groupChannel';
+import '../../resolvedReplyType-0532593c.js';
 import '../context/types.js';
 import '@sendbird/chat';
-import '../../index-8a01c364.js';
+import '../../index-40447645.js';
 import 'dompurify';
-import '../../consts-675764c9.js';
-import '../../consts-eb77e905.js';
-import '../../consts-6ee24012.js';
+import '../../consts-7f4d53a3.js';
+import '../../consts-f0ba9b80.js';
+import '../../consts-833420ed.js';
 
-function ParentMessageInfo(_ref) {
-  var _stores$userStore$use, _stores$userStore$use2, _parentMessage$isUser, _currentChannel$membe3, _currentChannel$membe4, _parentMessage$sender4;
-  let {
-    className
-  } = _ref;
-  const {
-    stores,
-    config
-  } = useSendbirdStateContext();
-  const {
-    isMentionEnabled,
-    isReactionEnabled,
-    replyType,
-    isOnline,
-    userMention,
-    logger
-  } = config;
-  const userId = (_stores$userStore$use = (_stores$userStore$use2 = stores.userStore.user) === null || _stores$userStore$use2 === void 0 ? void 0 : _stores$userStore$use2.userId) !== null && _stores$userStore$use !== void 0 ? _stores$userStore$use : '';
-  const {
-    dateLocale
-  } = useLocalization();
-  const {
-    currentChannel,
-    parentMessage,
-    allThreadMessages,
-    emojiContainer,
-    toggleReaction,
-    updateMessage,
-    deleteMessage,
-    onMoveToParentMessage,
-    onHeaderActionClick,
-    isMuted,
-    isChannelFrozen
-  } = useThreadContext();
-  const {
-    isMobile
-  } = useMediaQueryContext();
-  const [showRemove, setShowRemove] = useState(false);
-  const [supposedHover, setSupposedHover] = useState(false);
-  const [showFileViewer, setShowFileViewer] = useState(false);
-  const usingReaction = getIsReactionEnabled({
+function ParentMessageInfo(_a) {
+  var _b, _c, _d, _e, _f, _g;
+  var className = _a.className;
+  var _h = useSendbirdStateContext(),
+    stores = _h.stores,
+    config = _h.config;
+  var isMentionEnabled = config.isMentionEnabled,
+    isReactionEnabled = config.isReactionEnabled,
+    replyType = config.replyType,
+    isOnline = config.isOnline,
+    userMention = config.userMention,
+    logger = config.logger;
+  var userId = (_c = (_b = stores.userStore.user) === null || _b === void 0 ? void 0 : _b.userId) !== null && _c !== void 0 ? _c : '';
+  var dateLocale = useLocalization().dateLocale;
+  var _j = useThreadContext(),
+    currentChannel = _j.currentChannel,
+    parentMessage = _j.parentMessage,
+    allThreadMessages = _j.allThreadMessages,
+    emojiContainer = _j.emojiContainer,
+    toggleReaction = _j.toggleReaction,
+    updateMessage = _j.updateMessage,
+    deleteMessage = _j.deleteMessage,
+    onMoveToParentMessage = _j.onMoveToParentMessage,
+    onHeaderActionClick = _j.onHeaderActionClick,
+    isMuted = _j.isMuted,
+    isChannelFrozen = _j.isChannelFrozen;
+  var isMobile = useMediaQueryContext().isMobile;
+  var _k = useState(false),
+    showRemove = _k[0],
+    setShowRemove = _k[1];
+  var _l = useState(false),
+    supposedHover = _l[0],
+    setSupposedHover = _l[1];
+  var _m = useState(false),
+    showFileViewer = _m[0],
+    setShowFileViewer = _m[1];
+  var usingReaction = getIsReactionEnabled({
     globalLevel: isReactionEnabled,
     isSuper: currentChannel.isSuper,
     isBroadcast: currentChannel.isBroadcast
   });
-  const isByMe = userId === parentMessage.sender.userId;
-
+  var isByMe = userId === parentMessage.sender.userId;
   // Mobile
-  const mobileMenuRef = useRef(null);
-  const [showMobileMenu, setShowMobileMenu] = useState(false);
-  const longPress = useLongPress({
-    onLongPress: () => {
+  var mobileMenuRef = useRef(null);
+  var _o = useState(false),
+    showMobileMenu = _o[0],
+    setShowMobileMenu = _o[1];
+  var longPress = useLongPress({
+    onLongPress: function () {
       if (isMobile) {
         setShowMobileMenu(true);
       }
@@ -142,32 +141,42 @@ function ParentMessageInfo(_ref) {
   }, {
     shouldPreventDefault: false
   });
-
   // Edit message
-  const [showEditInput, setShowEditInput] = useState(false);
-  const disabled = !isOnline || isMuted || isChannelFrozen && !((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myRole) === Role.OPERATOR);
-
+  var _p = useState(false),
+    showEditInput = _p[0],
+    setShowEditInput = _p[1];
+  var disabled = !isOnline || isMuted || isChannelFrozen && !((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myRole) === Role.OPERATOR);
   // Mention
-  const editMessageInputRef = useRef(null);
-  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 displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !isMuted && !(isChannelFrozen && !(currentChannel.myRole === Role.OPERATOR));
-  const mentionNodes = useDirtyGetMentions({
+  var editMessageInputRef = useRef(null);
+  var _q = useState(''),
+    mentionNickname = _q[0],
+    setMentionNickname = _q[1];
+  var _r = useState([]),
+    mentionedUsers = _r[0],
+    setMentionedUsers = _r[1];
+  var _s = useState([]),
+    mentionedUserIds = _s[0],
+    setMentionedUserIds = _s[1];
+  var _t = useState(null),
+    messageInputEvent = _t[0],
+    setMessageInputEvent = _t[1];
+  var _u = useState(null),
+    selectedUser = _u[0],
+    setSelectedUser = _u[1];
+  var _v = useState([]),
+    mentionSuggestedUsers = _v[0],
+    setMentionSuggestedUsers = _v[1];
+  var displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !isMuted && !(isChannelFrozen && !(currentChannel.myRole === Role.OPERATOR));
+  var mentionNodes = useDirtyGetMentions({
     ref: editMessageInputRef
   }, {
-    logger
+    logger: logger
   });
-  const ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount);
-  useEffect(() => {
-    setMentionedUsers(mentionedUsers.filter(_ref2 => {
-      let {
-        userId
-      } = _ref2;
-      const i = mentionedUserIds.indexOf(userId);
+  var ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount);
+  useEffect(function () {
+    setMentionedUsers(mentionedUsers.filter(function (_a) {
+      var userId = _a.userId;
+      var i = mentionedUserIds.indexOf(userId);
       if (i < 0) {
         return false;
       } else {
@@ -176,32 +185,30 @@ function ParentMessageInfo(_ref) {
       }
     }));
   }, [mentionedUserIds]);
-
   // User Profile
-  const avatarRef = useRef(null);
-  const {
-    disableUserProfile,
-    renderUserProfile
-  } = useContext(UserProfileContext);
-  if (showEditInput && parentMessage !== null && parentMessage !== void 0 && (_parentMessage$isUser = parentMessage.isUserMessage) !== null && _parentMessage$isUser !== void 0 && _parentMessage$isUser.call(parentMessage)) {
+  var avatarRef = useRef(null);
+  var _w = useContext(UserProfileContext),
+    disableUserProfile = _w.disableUserProfile,
+    renderUserProfile = _w.renderUserProfile;
+  if (showEditInput && ((_d = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.isUserMessage) === null || _d === void 0 ? void 0 : _d.call(parentMessage))) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, displaySuggestedMentionList && /*#__PURE__*/React__default.createElement(SuggestedMentionList, {
       className: "parent-message-info--suggested-mention-list",
       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,
@@ -215,48 +222,46 @@ function ParentMessageInfo(_ref) {
       mentionSelectedUser: selectedUser,
       isMentionEnabled: isMentionEnabled,
       message: parentMessage,
-      onStartTyping: () => {
-        var _currentChannel$start;
-        currentChannel === null || currentChannel === void 0 ? void 0 : (_currentChannel$start = currentChannel.startTyping) === null || _currentChannel$start === void 0 ? void 0 : _currentChannel$start.call(currentChannel);
+      onStartTyping: function () {
+        var _a;
+        (_a = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.startTyping) === null || _a === void 0 ? void 0 : _a.call(currentChannel);
       },
-      onUpdateMessage: _ref3 => {
-        var _currentChannel$endTy;
-        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
         });
         setShowEditInput(false);
-        currentChannel === null || currentChannel === void 0 ? void 0 : (_currentChannel$endTy = currentChannel.endTyping) === null || _currentChannel$endTy === void 0 ? void 0 : _currentChannel$endTy.call(currentChannel);
+        (_b = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.endTyping) === null || _b === void 0 ? void 0 : _b.call(currentChannel);
       },
-      onCancelEdit: () => {
-        var _currentChannel$endTy2;
+      onCancelEdit: function () {
+        var _a;
         setMentionNickname('');
         setMentionedUsers([]);
         setMentionedUserIds([]);
         setMentionSuggestedUsers([]);
         setShowEditInput(false);
-        currentChannel === null || currentChannel === void 0 ? void 0 : (_currentChannel$endTy2 = currentChannel.endTyping) === null || _currentChannel$endTy2 === void 0 ? void 0 : _currentChannel$endTy2.call(currentChannel);
+        (_a = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.endTyping) === null || _a === void 0 ? void 0 : _a.call(currentChannel);
       },
-      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;
@@ -266,57 +271,60 @@ function ParentMessageInfo(_ref) {
     }));
   }
   return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: `sendbird-parent-message-info ${className}`
-  }, isMobile ? _objectSpread2({}, longPress) : {}, {
+    className: "sendbird-parent-message-info ".concat(className)
+  }, isMobile ? __assign({}, longPress) : {}, {
     ref: mobileMenuRef
   }), /*#__PURE__*/React__default.createElement(ContextMenu, {
-    menuTrigger: toggleDropdown => {
-      var _currentChannel$membe, _currentChannel$membe2, _parentMessage$sender2;
+    menuTrigger: function (toggleDropdown) {
+      var _a, _b, _c;
       return /*#__PURE__*/React__default.createElement(Avatar, {
         className: "sendbird-parent-message-info__sender",
         ref: avatarRef,
-        src: (currentChannel === null || currentChannel === void 0 ? void 0 : (_currentChannel$membe = currentChannel.members) === null || _currentChannel$membe === void 0 ? void 0 : (_currentChannel$membe2 = _currentChannel$membe.find(m => {
-          var _parentMessage$sender;
-          return (m === null || m === void 0 ? void 0 : m.userId) === (parentMessage === null || parentMessage === void 0 ? void 0 : (_parentMessage$sender = parentMessage.sender) === null || _parentMessage$sender === void 0 ? void 0 : _parentMessage$sender.userId);
-        })) === null || _currentChannel$membe2 === void 0 ? void 0 : _currentChannel$membe2.profileUrl) || (parentMessage === null || parentMessage === void 0 ? void 0 : (_parentMessage$sender2 = parentMessage.sender) === null || _parentMessage$sender2 === void 0 ? void 0 : _parentMessage$sender2.profileUrl),
+        src: ((_b = (_a = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.members) === null || _a === void 0 ? void 0 : _a.find(function (m) {
+          var _a;
+          return (m === null || m === void 0 ? void 0 : m.userId) === ((_a = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender) === null || _a === void 0 ? void 0 : _a.userId);
+        })) === null || _b === void 0 ? void 0 : _b.profileUrl) || ((_c = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender) === null || _c === void 0 ? void 0 : _c.profileUrl),
         alt: "thread message sender",
         width: "40px",
         height: "40px",
-        onClick: () => {
+        onClick: function () {
           if (!disableUserProfile) {
             toggleDropdown();
           }
         }
       });
     },
-    menuItems: closeDropdown => /*#__PURE__*/React__default.createElement(MenuItems, {
-      parentRef: avatarRef,
-      parentContainRef: avatarRef,
-      closeDropdown: closeDropdown,
-      style: {
-        paddingTop: '0px',
-        paddingBottom: '0px'
-      }
-    }, renderUserProfile ? renderUserProfile({
-      user: parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender,
-      close: closeDropdown
-    }) : /*#__PURE__*/React__default.createElement(UserProfile, {
-      user: parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender,
-      currentUserId: userId,
-      onSuccess: closeDropdown
-    }))
+    menuItems: function (closeDropdown) {
+      return /*#__PURE__*/React__default.createElement(MenuItems, {
+        parentRef: avatarRef,
+        parentContainRef: avatarRef,
+        closeDropdown: closeDropdown,
+        style: {
+          paddingTop: '0px',
+          paddingBottom: '0px'
+        }
+      }, renderUserProfile ? renderUserProfile({
+        user: parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender,
+        close: closeDropdown,
+        currentUserId: userId
+      }) : /*#__PURE__*/React__default.createElement(UserProfile, {
+        user: parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender,
+        currentUserId: userId,
+        onSuccess: closeDropdown
+      }));
+    }
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-parent-message-info__content"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-parent-message-info__content__info"
   }, /*#__PURE__*/React__default.createElement(Label, {
-    className: `sendbird-parent-message-info__content__info__sender-name${usingReaction ? '--use-reaction' : ''}`,
+    className: "sendbird-parent-message-info__content__info__sender-name".concat(usingReaction ? '--use-reaction' : ''),
     type: LabelTypography.CAPTION_2,
     color: LabelColors.ONBACKGROUND_2
-  }, (currentChannel === null || currentChannel === void 0 ? void 0 : (_currentChannel$membe3 = currentChannel.members) === null || _currentChannel$membe3 === void 0 ? void 0 : (_currentChannel$membe4 = _currentChannel$membe3.find(member => {
-    var _parentMessage$sender3;
-    return (member === null || member === void 0 ? void 0 : member.userId) === (parentMessage === null || parentMessage === void 0 ? void 0 : (_parentMessage$sender3 = parentMessage.sender) === null || _parentMessage$sender3 === void 0 ? void 0 : _parentMessage$sender3.userId);
-  })) === null || _currentChannel$membe4 === void 0 ? void 0 : _currentChannel$membe4.nickname) || (getSenderName === null || getSenderName === void 0 ? void 0 : getSenderName(parentMessage))), /*#__PURE__*/React__default.createElement(Label, {
+  }, ((_f = (_e = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.members) === null || _e === void 0 ? void 0 : _e.find(function (member) {
+    var _a;
+    return (member === null || member === void 0 ? void 0 : member.userId) === ((_a = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender) === null || _a === void 0 ? void 0 : _a.userId);
+  })) === null || _f === void 0 ? void 0 : _f.nickname) || (getSenderName === null || getSenderName === void 0 ? void 0 : getSenderName(parentMessage))), /*#__PURE__*/React__default.createElement(Label, {
     className: "sendbird-parent-message-info__content__info__sent-at",
     type: LabelTypography.CAPTION_3,
     color: LabelColors.ONBACKGROUND_2
@@ -326,39 +334,43 @@ function ParentMessageInfo(_ref) {
     message: parentMessage,
     showFileViewer: setShowFileViewer
   })), !isMobile && /*#__PURE__*/React__default.createElement(MessageItemMenu, {
-    className: `sendbird-parent-message-info__context-menu ${usingReaction ? 'use-reaction' : ''} ${supposedHover ? 'sendbird-mouse-hover' : ''}`,
+    className: "sendbird-parent-message-info__context-menu ".concat(usingReaction ? 'use-reaction' : '', " ").concat(supposedHover ? 'sendbird-mouse-hover' : ''),
     channel: currentChannel,
     message: parentMessage,
-    isByMe: userId === (parentMessage === null || parentMessage === void 0 ? void 0 : (_parentMessage$sender4 = parentMessage.sender) === null || _parentMessage$sender4 === void 0 ? void 0 : _parentMessage$sender4.userId),
+    isByMe: userId === ((_g = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender) === null || _g === void 0 ? void 0 : _g.userId),
     disableDeleteMessage: allThreadMessages.length > 0,
     replyType: replyType,
     showEdit: setShowEditInput,
     showRemove: setShowRemove,
     setSupposedHover: setSupposedHover,
-    onMoveToParentMessage: () => {
+    onMoveToParentMessage: function () {
       onMoveToParentMessage({
         message: parentMessage,
         channel: currentChannel
       });
     }
   }), usingReaction && !isMobile && /*#__PURE__*/React__default.createElement(MessageItemReactionMenu, {
-    className: `sendbird-parent-message-info__reaction-menu ${supposedHover ? 'sendbird-mouse-hover' : ''}`,
+    className: "sendbird-parent-message-info__reaction-menu ".concat(supposedHover ? 'sendbird-mouse-hover' : ''),
     message: parentMessage,
     userId: userId,
     emojiContainer: emojiContainer,
     toggleReaction: toggleReaction,
     setSupposedHover: setSupposedHover
   }), showRemove && /*#__PURE__*/React__default.createElement(RemoveMessage, {
-    onCancel: () => setShowRemove(false),
-    onSubmit: () => {
+    onCancel: function () {
+      return setShowRemove(false);
+    },
+    onSubmit: function () {
       onHeaderActionClick === null || onHeaderActionClick === void 0 ? void 0 : onHeaderActionClick();
     },
     message: parentMessage
   }), showFileViewer && /*#__PURE__*/React__default.createElement(FileViewer, {
     message: parentMessage,
-    onClose: () => setShowFileViewer(false),
-    onDelete: () => {
-      deleteMessage(parentMessage).then(() => {
+    onClose: function () {
+      return setShowFileViewer(false);
+    },
+    onDelete: function () {
+      deleteMessage(parentMessage).then(function () {
         setShowFileViewer(false);
       });
     }
@@ -368,9 +380,10 @@ function ParentMessageInfo(_ref) {
     message: parentMessage,
     userId: userId,
     replyType: replyType,
-    hideMenu: () => {
+    hideMenu: function () {
       setShowMobileMenu(false);
     },
+    deleteMessage: deleteMessage,
     deleteMenuState: (allThreadMessages === null || allThreadMessages === void 0 ? void 0 : allThreadMessages.length) === 0 ? 'ACTIVE' : 'HIDE',
     isReactionEnabled: usingReaction,
     isByMe: isByMe,