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

package/cjs/Thread/components/ThreadListItem.js

@@ -1,27 +1,28 @@
 'use strict';
 
+var tslib_es6 = require('../../tslib.es6-2f2b0bca.js');
 var React = require('react');
-var index$2 = require('../../index-c9b003b3.js');
-var LocalizationContext = require('../../LocalizationContext-482c1343.js');
+var index$1 = require('../../index-b6d51e74.js');
+var LocalizationContext = require('../../LocalizationContext-5009012e.js');
 var ui_DateSeparator = require('../../ui/DateSeparator.js');
-var ui_Label = require('../../index-18720f0d.js');
-var RemoveMessageModal = require('../../RemoveMessageModal-dfeeb36a.js');
-var ui_FileViewer = require('../../index-857630c5.js');
-var Thread_context = require('../../ThreadProvider-8b0cf491.js');
+var ui_Label = require('../../index-35820a94.js');
+var RemoveMessageModal = require('../../RemoveMessageModal-f029d40e.js');
+var ui_FileViewer = require('../../index-7b0c6630.js');
+var Thread_context = require('../context.js');
 var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
 var Channel_components_SuggestedMentionList = require('../../Channel/components/SuggestedMentionList.js');
 var ui_MessageInput = require('../../ui/MessageInput.js');
 var Thread_context_types = require('../context/types.js');
-var _const = require('../../const-1726bde0.js');
-var _rollupPluginBabelHelpers = require('../../_rollupPluginBabelHelpers-83d7e84b.js');
+var _const = require('../../const-640252c1.js');
+var _rollupPluginBabelHelpers = require('../../_rollupPluginBabelHelpers-94c18dc1.js');
 var ui_ContextMenu = require('../../ui/ContextMenu.js');
 var ui_Avatar = require('../../ui/Avatar.js');
-var UserProfileContext = require('../../UserProfileContext-fa8d0383.js');
+var UserProfileContext = require('../../UserProfileContext-922a43ec.js');
 var ui_UserProfile = require('../../ui/UserProfile.js');
 var ui_MessageItemMenu = require('../../ui/MessageItemMenu.js');
 var ui_MessageItemReactionMenu = require('../../ui/MessageItemReactionMenu.js');
-var index = require('../../index-fbe9cc73.js');
-var ui_MessageStatus = require('../../index-8ec12d1d.js');
+var index = require('../../index-b995f638.js');
+var ui_MessageStatus = require('../../index-aeb36f01.js');
 var ui_EmojiReactions = require('../../ui/EmojiReactions.js');
 var ui_TextMessageItemBody = require('../../ui/TextMessageItemBody.js');
 var ui_OGMessageItemBody = require('../../ui/OGMessageItemBody.js');
@@ -29,52 +30,53 @@ var ui_FileMessageItemBody = require('../../ui/FileMessageItemBody.js');
 var ui_ThumbnailMessageItemBody = require('../../ui/ThumbnailMessageItemBody.js');
 var ui_UnknownMessageItemBody = require('../../ui/UnknownMessageItemBody.js');
 var ui_VoiceMessageItemBody = require('../../ui/VoiceMessageItemBody.js');
-var MediaQueryContext = require('../../MediaQueryContext-73aac8cf.js');
-var useLongPress = require('../../useLongPress-1c0f4696.js');
-var index$3 = require('../../index-81baccd0.js');
-var index$1 = require('../../index-4b5a006d.js');
-var types = require('../../types-0b5148cb.js');
+var MediaQueryContext = require('../../MediaQueryContext-d6fdbe43.js');
+var useLongPress = require('../../useLongPress-c1da8ba7.js');
+var index$2 = require('../../index-0a25b9b2.js');
+var useStatefulFileInfoList = require('../../useStatefulFileInfoList-aa70b6b9.js');
+var types = require('../../types-31ed2276.js');
 var Message_hooks_useDirtyGetMentions = require('../../Message/hooks/useDirtyGetMentions.js');
-var Channel_context = require('../../ChannelProvider-6fa73019.js');
-require('../../index-d04f312e.js');
-require('../../stringSet-d00535a5.js');
-require('../../color-d83b77ac.js');
+var Channel_context = require('../../ChannelProvider-7fa98120.js');
+require('../../index-fd8a0abb.js');
+require('../../stringSet-98b52c49.js');
+require('../../color-477ddbd4.js');
 require('prop-types');
 require('../../ui/Modal.js');
 require('react-dom');
-require('../../utils-c47c68b1.js');
-require('../../index.module-a24e9cd7.js');
-require('../../index-cbcacbee.js');
+require('../../utils-180c6bc8.js');
+require('../../index-609b07a2.js');
+require('../../index-daf80c58.js');
 require('../../ui/IconButton.js');
 require('../../ui/Button.js');
+require('../../types-66554668.js');
 require('../../ui/Icon.js');
-require('../../stringFormatterUtils-8d6592ca.js');
-require('../../consts-fb07c671.js');
+require('../../stringFormatterUtils-e324636c.js');
+require('../../consts-95462b21.js');
+require('../../useSendMultipleFilesMessage-87e0ffa3.js');
+require('../../pubSub/topics.js');
+require('../../utils-55fc6797.js');
+require('@sendbird/chat/message');
 require('../../utils/message/getOutgoingMessageState.js');
 require('@sendbird/chat');
-require('../../topics-adde627b.js');
 require('@sendbird/chat/groupChannel');
-require('../../uuid-b2806cf5.js');
-require('@sendbird/chat/message');
-require('../../useSendMultipleFilesMessage-81cdc9d0.js');
-require('../../utils-68aa6bf6.js');
+require('../../uuid-c74bbbb6.js');
 require('../../withSendbird.js');
-require('../../const-67ff9e34.js');
+require('../../const-9def5c09.js');
 require('../../ui/ImageRenderer.js');
-require('../../compareIds-bef997cb.js');
-require('../../resolvedReplyType-85b4bd7c.js');
-require('../../index-759f2a26.js');
+require('../../compareIds-de541666.js');
+require('../../resolvedReplyType-c20ef661.js');
+require('../../index-bdf7089c.js');
 require('dompurify');
-require('../../consts-b018b1ed.js');
-require('../../consts-d3b53f23.js');
-require('../../consts-bf228385.js');
-require('../../tokenize-9296fc47.js');
+require('../../consts-54f5c12d.js');
+require('../../consts-a3b7ae99.js');
+require('../../consts-85cd42fa.js');
+require('../../tokenize-91bdbeb0.js');
 require('../../ui/SortByRow.js');
 require('../../sendbirdSelectors.js');
 require('../../ui/ReactionButton.js');
 require('../../ui/Loader.js');
-require('../../index-11f9cc0f.js');
-require('../../index-4eb7e2b5.js');
+require('../../index-83d2aed9.js');
+require('../../index-826b76d5.js');
 require('../../ui/ReactionBadge.js');
 require('../../ui/BottomSheet.js');
 require('../../ui/UserListItem.js');
@@ -83,14 +85,14 @@ require('../../ui/Checkbox.js');
 require('../../ui/Tooltip.js');
 require('../../ui/TooltipWrapper.js');
 require('../../Message/context.js');
-require('../../index-2ab19f9b.js');
+require('../../index-e81e2882.js');
 require('../../ui/MentionLabel.js');
 require('../../ui/LinkLabel.js');
 require('../../ui/TextButton.js');
-require('../../utils-418b4438.js');
+require('../../utils-851724e0.js');
 require('../../ui/ProgressBar.js');
 require('../../VoicePlayer/useVoicePlayer.js');
-require('../../index-1f6b30ea.js');
+require('../../index-0ec5a831.js');
 require('../../VoiceRecorder/context.js');
 require('../../ui/PlaybackTime.js');
 
@@ -98,56 +100,60 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function ThreadListItemContent(_ref) {
-  var _sender, _channel$members2, _channel$members2$fin, _message$reactions;
-  let {
-    className,
-    userId,
-    channel,
-    message,
-    disabled = false,
-    chainTop = false,
-    chainBottom = false,
-    isMentionEnabled = false,
-    isReactionEnabled = false,
-    disableQuoteMessage = false,
-    replyType,
-    nicknamesMap,
-    emojiContainer,
-    showEdit,
-    showRemove,
-    showFileViewer,
-    resendMessage,
-    toggleReaction,
-    onReplyInThread
-  } = _ref;
-  const messageTypes = index.getUIKitMessageTypes();
-  const {
-    isMobile
-  } = MediaQueryContext.useMediaQueryContext();
-  const {
-    dateLocale
-  } = LocalizationContext.useLocalization();
-  const {
-    config
-  } = useSendbirdStateContext();
-  const [supposedHover, setSupposedHover] = React.useState(false);
-  const {
-    disableUserProfile,
-    renderUserProfile
-  } = React.useContext(UserProfileContext.UserProfileContext);
-  const avatarRef = React.useRef(null);
-  const isByMe = userId === (message === null || message === void 0 ? void 0 : (_sender = message.sender) === null || _sender === void 0 ? void 0 : _sender.userId) || (message === null || message === void 0 ? void 0 : message.sendingStatus) === 'pending' || (message === null || message === void 0 ? void 0 : message.sendingStatus) === 'failed';
-  const useReplying = !!((replyType === 'QUOTE_REPLY' || replyType === 'THREAD') && message !== null && message !== void 0 && message.parentMessageId && message !== null && message !== void 0 && message.parentMessage && !disableQuoteMessage);
-  const supposedHoverClassName = supposedHover ? 'sendbird-mouse-hover' : '';
-  const isReactionEnabledInChannel = isReactionEnabled && !(channel !== null && channel !== void 0 && channel.isEphemeral);
-  const isOgMessageEnabledInGroupChannel = channel.isGroupChannel() && config.groupChannel.enableOgtag;
-
+function ThreadListItemContent(_a) {
+  var _b, _c, _d, _e, _f;
+  var className = _a.className,
+    userId = _a.userId,
+    channel = _a.channel,
+    message = _a.message,
+    _g = _a.disabled,
+    disabled = _g === void 0 ? false : _g,
+    _h = _a.chainTop,
+    chainTop = _h === void 0 ? false : _h,
+    _j = _a.chainBottom,
+    chainBottom = _j === void 0 ? false : _j,
+    _k = _a.isMentionEnabled,
+    isMentionEnabled = _k === void 0 ? false : _k,
+    _l = _a.isReactionEnabled,
+    isReactionEnabled = _l === void 0 ? false : _l,
+    _m = _a.disableQuoteMessage,
+    disableQuoteMessage = _m === void 0 ? false : _m,
+    replyType = _a.replyType,
+    nicknamesMap = _a.nicknamesMap,
+    emojiContainer = _a.emojiContainer,
+    showEdit = _a.showEdit,
+    showRemove = _a.showRemove,
+    showFileViewer = _a.showFileViewer,
+    resendMessage = _a.resendMessage,
+    toggleReaction = _a.toggleReaction,
+    onReplyInThread = _a.onReplyInThread;
+  var messageTypes = index.getUIKitMessageTypes();
+  var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+  var dateLocale = LocalizationContext.useLocalization().dateLocale;
+  var _o = (useSendbirdStateContext.useSendbirdStateContext === null || useSendbirdStateContext.useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext.useSendbirdStateContext()) || {},
+    config = _o.config,
+    eventHandlers = _o.eventHandlers;
+  var onPressUserProfileHandler = (_b = eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.reaction) === null || _b === void 0 ? void 0 : _b.onPressUserProfile;
+  var _p = React.useState(false),
+    supposedHover = _p[0],
+    setSupposedHover = _p[1];
+  var _q = React.useContext(UserProfileContext.UserProfileContext),
+    disableUserProfile = _q.disableUserProfile,
+    renderUserProfile = _q.renderUserProfile;
+  var deleteMessage = Thread_context.useThreadContext().deleteMessage;
+  var avatarRef = React.useRef(null);
+  var isByMe = userId === ((_c = message === null || message === void 0 ? void 0 : message.sender) === null || _c === void 0 ? void 0 : _c.userId) || (message === null || message === void 0 ? void 0 : message.sendingStatus) === 'pending' || (message === null || message === void 0 ? void 0 : message.sendingStatus) === 'failed';
+  var useReplying = !!((replyType === 'QUOTE_REPLY' || replyType === 'THREAD') && (message === null || message === void 0 ? void 0 : message.parentMessageId) && (message === null || message === void 0 ? void 0 : message.parentMessage) && !disableQuoteMessage);
+  var supposedHoverClassName = supposedHover ? 'sendbird-mouse-hover' : '';
+  var isReactionEnabledInChannel = isReactionEnabled && !(channel === null || channel === void 0 ? void 0 : channel.isEphemeral);
+  var isOgMessageEnabledInGroupChannel = channel.isGroupChannel() && config.groupChannel.enableOgtag;
   // Mobile
-  const mobileMenuRef = React.useRef(null);
-  const [showMobileMenu, setShowMobileMenu] = React.useState(false);
-  const longPress = useLongPress.useLongPress({
-    onLongPress: () => {
+  var mobileMenuRef = React.useRef(null);
+  var _r = React.useState(false),
+    showMobileMenu = _r[0],
+    setShowMobileMenu = _r[1];
+  var longPress = useLongPress.useLongPress({
+    onLongPress: function () {
       if (isMobile) {
         setShowMobileMenu(true);
       }
@@ -155,47 +161,56 @@ function ThreadListItemContent(_ref) {
   }, {
     shouldPreventDefault: false
   });
+  var threadMessageKindKey = useStatefulFileInfoList.useThreadMessageKindKeySelector({
+    threadMessageKind: useStatefulFileInfoList.ThreadMessageKind.CHILD,
+    isMobile: isMobile
+  });
+  // For MultipleFilesMessage only.
+  var statefulFileInfoList = useStatefulFileInfoList.useStatefulFileInfoList(message);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `sendbird-thread-list-item-content ${className} ${isByMe ? 'outgoing' : 'incoming'}`,
+    className: "sendbird-thread-list-item-content ".concat(className, " ").concat(isByMe ? 'outgoing' : 'incoming'),
     ref: mobileMenuRef
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `sendbird-thread-list-item-content__left ${isReactionEnabledInChannel ? 'use-reaction' : ''} ${isByMe ? 'outgoing' : 'incoming'}`
+    className: "sendbird-thread-list-item-content__left ".concat(isReactionEnabledInChannel ? 'use-reaction' : '', " ").concat(isByMe ? 'outgoing' : 'incoming')
   }, !isByMe && !chainBottom && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
-    menuTrigger: toggleDropdown => {
-      var _channel$members, _channel$members$find, _message$sender2;
+    menuTrigger: function (toggleDropdown) {
+      var _a, _b, _c;
       return /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
         className: "sendbird-thread-list-item-content__left__avatar",
-        src: (channel === null || channel === void 0 ? void 0 : (_channel$members = channel.members) === null || _channel$members === void 0 ? void 0 : (_channel$members$find = _channel$members.find(member => {
-          var _message$sender;
-          return (member === null || member === void 0 ? void 0 : member.userId) === (message === null || message === void 0 ? void 0 : (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.userId);
-        })) === null || _channel$members$find === void 0 ? void 0 : _channel$members$find.profileUrl) || (message === null || message === void 0 ? void 0 : (_message$sender2 = message.sender) === null || _message$sender2 === void 0 ? void 0 : _message$sender2.profileUrl) || '',
+        src: ((_b = (_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.find(function (member) {
+          var _a;
+          return (member === null || member === void 0 ? void 0 : member.userId) === ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId);
+        })) === null || _b === void 0 ? void 0 : _b.profileUrl) || ((_c = message === null || message === void 0 ? void 0 : message.sender) === null || _c === void 0 ? void 0 : _c.profileUrl) || '',
         ref: avatarRef,
         width: "28px",
         height: "28px",
-        onClick: () => {
+        onClick: function () {
           if (!disableUserProfile) {
             toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
           }
         }
       });
     },
-    menuItems: closeDropdown => /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
-      parentRef: avatarRef,
-      parentContainRef: avatarRef,
-      closeDropdown: closeDropdown,
-      style: {
-        paddingTop: '0px',
-        paddingBottom: '0px'
-      }
-    }, renderUserProfile ? renderUserProfile({
-      user: message === null || message === void 0 ? void 0 : message.sender,
-      close: closeDropdown
-    }) : /*#__PURE__*/React__default["default"].createElement(ui_UserProfile, {
-      user: message === null || message === void 0 ? void 0 : message.sender,
-      onSuccess: closeDropdown
-    }))
+    menuItems: function (closeDropdown) {
+      return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
+        parentRef: avatarRef,
+        parentContainRef: avatarRef,
+        closeDropdown: closeDropdown,
+        style: {
+          paddingTop: '0px',
+          paddingBottom: '0px'
+        }
+      }, renderUserProfile ? renderUserProfile({
+        user: message === null || message === void 0 ? void 0 : message.sender,
+        close: closeDropdown,
+        currentUserId: userId
+      }) : /*#__PURE__*/React__default["default"].createElement(ui_UserProfile, {
+        user: message === null || message === void 0 ? void 0 : message.sender,
+        onSuccess: closeDropdown
+      }));
+    }
   }), isByMe && !isMobile && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `sendbird-thread-list-item-content-menu ${isReactionEnabledInChannel ? 'use-reaction' : ''} ${isByMe ? 'outgoing' : 'incoming'} ${supposedHoverClassName}`
+    className: "sendbird-thread-list-item-content-menu ".concat(isReactionEnabledInChannel ? 'use-reaction' : '', " ").concat(isByMe ? 'outgoing' : 'incoming', " ").concat(supposedHoverClassName)
   }, /*#__PURE__*/React__default["default"].createElement(ui_MessageItemMenu, {
     className: "sendbird-thread-list-item-content-menu__normal-menu",
     channel: channel,
@@ -212,20 +227,19 @@ function ThreadListItemContent(_ref) {
     className: "sendbird-thread-list-item-content-menu__reaction-menu",
     message: message,
     userId: userId,
-    spaceFromTrigger: {},
     emojiContainer: emojiContainer,
     toggleReaction: toggleReaction,
     setSupposedHover: setSupposedHover
   }))), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers._extends({
     className: "sendbird-thread-list-item-content__middle"
-  }, isMobile ? _rollupPluginBabelHelpers._objectSpread2({}, longPress) : {}), !isByMe && !chainTop && !useReplying && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+  }, isMobile ? tslib_es6.__assign({}, longPress) : {}), !isByMe && !chainTop && !useReplying && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     className: "sendbird-thread-list-item-content__middle__sender-name",
     type: ui_Label.LabelTypography.CAPTION_2,
     color: ui_Label.LabelColors.ONBACKGROUND_2
-  }, (channel === null || channel === void 0 ? void 0 : (_channel$members2 = channel.members) === null || _channel$members2 === void 0 ? void 0 : (_channel$members2$fin = _channel$members2.find(member => {
-    var _message$sender3;
-    return (member === null || member === void 0 ? void 0 : member.userId) === (message === null || message === void 0 ? void 0 : (_message$sender3 = message.sender) === null || _message$sender3 === void 0 ? void 0 : _message$sender3.userId);
-  })) === null || _channel$members2$fin === void 0 ? void 0 : _channel$members2$fin.nickname) || index.getSenderName(message)
+  }, ((_e = (_d = channel === null || channel === void 0 ? void 0 : channel.members) === null || _d === void 0 ? void 0 : _d.find(function (member) {
+    var _a;
+    return (member === null || member === void 0 ? void 0 : member.userId) === ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId);
+  })) === null || _e === void 0 ? void 0 : _e.nickname) || index.getSenderName(message)
   // TODO: Divide getting profileUrl logic to utils
   ), /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName(['sendbird-thread-list-item-content__middle__body-container'])
@@ -260,12 +274,13 @@ function ThreadListItemContent(_ref) {
     isByMe: isByMe,
     isReactionEnabled: isReactionEnabledInChannel,
     truncateLimit: isByMe ? 18 : 14
-  }), index.isMultipleFilesMessage(message) && /*#__PURE__*/React__default["default"].createElement(index$1.MultipleFilesMessageItemBody, {
+  }), index.isMultipleFilesMessage(message) && /*#__PURE__*/React__default["default"].createElement(useStatefulFileInfoList.MultipleFilesMessageItemBody, {
     className: "sendbird-thread-list-item-content__middle__message-item-body",
     message: message,
     isByMe: isByMe,
     isReactionEnabled: isReactionEnabled,
-    threadMessageKind: index$1.ThreadMessageKind.CHILD
+    threadMessageKindKey: threadMessageKindKey,
+    statefulFileInfoList: statefulFileInfoList
   }), index.isThumbnailMessage(message) && /*#__PURE__*/React__default["default"].createElement(ui_ThumbnailMessageItemBody, {
     className: "sendbird-thread-list-item-content__middle__message-item-body",
     message: message,
@@ -281,7 +296,7 @@ function ThreadListItemContent(_ref) {
     message: message,
     isByMe: isByMe,
     isReactionEnabled: isReactionEnabledInChannel
-  }), isReactionEnabledInChannel && (message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+  }), isReactionEnabledInChannel && ((_f = message === null || message === void 0 ? void 0 : message.reactions) === null || _f === void 0 ? void 0 : _f.length) > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName(['sendbird-thread-list-item-content-reactions', !isByMe || index.isThumbnailMessage(message) || isOgMessageEnabledInGroupChannel && index.isOGMessage(message) || index.isMultipleFilesMessage(message) ? '' : 'primary'])
   }, /*#__PURE__*/React__default["default"].createElement(ui_EmojiReactions, {
     userId: userId,
@@ -290,22 +305,22 @@ function ThreadListItemContent(_ref) {
     isByMe: isByMe,
     emojiContainer: emojiContainer,
     memberNicknamesMap: nicknamesMap,
-    toggleReaction: toggleReaction
+    toggleReaction: toggleReaction,
+    onPressUserProfile: onPressUserProfileHandler
   })), !isByMe && !chainBottom && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     className: index.getClassName(['sendbird-thread-list-item-content__middle__body-container__created-at', 'right', supposedHoverClassName]),
     type: ui_Label.LabelTypography.CAPTION_3,
     color: ui_Label.LabelColors.ONBACKGROUND_2
-  }, index$2.format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, 'p', {
+  }, index$1.format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, 'p', {
     locale: dateLocale
   })))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `sendbird-thread-list-item-content__right ${chainTop ? 'chain-top' : ''} ${isByMe ? 'outgoing' : 'incoming'}`
+    className: "sendbird-thread-list-item-content__right ".concat(chainTop ? 'chain-top' : '', " ").concat(isByMe ? 'outgoing' : 'incoming')
   }, !isByMe && !isMobile && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `sendbird-thread-list-item-content-menu ${supposedHoverClassName}`
+    className: "sendbird-thread-list-item-content-menu ".concat(supposedHoverClassName)
   }, isReactionEnabledInChannel && /*#__PURE__*/React__default["default"].createElement(ui_MessageItemReactionMenu, {
     className: "sendbird-thread-list-item-content-menu__reaction-menu",
     message: message,
     userId: userId,
-    spaceFromTrigger: {},
     emojiContainer: emojiContainer,
     toggleReaction: toggleReaction,
     setSupposedHover: setSupposedHover
@@ -320,13 +335,13 @@ function ThreadListItemContent(_ref) {
     resendMessage: resendMessage,
     setSupposedHover: setSupposedHover,
     onReplyInThread: onReplyInThread
-  }))), showMobileMenu && /*#__PURE__*/React__default["default"].createElement(index$3.MobileMenu, {
+  }))), showMobileMenu && /*#__PURE__*/React__default["default"].createElement(index$2.MobileMenu, {
     parentRef: mobileMenuRef,
     channel: channel,
     message: message,
     userId: userId,
     replyType: replyType,
-    hideMenu: () => {
+    hideMenu: function () {
       setShowMobileMenu(false);
     },
     isReactionEnabled: isReactionEnabled,
@@ -335,98 +350,103 @@ function ThreadListItemContent(_ref) {
     showEdit: showEdit,
     showRemove: showRemove,
     toggleReaction: toggleReaction,
-    isOpenedFromThread: true
+    isOpenedFromThread: true,
+    deleteMessage: deleteMessage
   }));
 }
 
-function ThreadListItem(_ref) {
-  var _stores$userStore, _stores$userStore$use, _message$reactions, _message$sender;
-  let {
-    className,
-    message,
-    chainTop,
-    chainBottom,
-    hasSeparator,
-    renderCustomSeparator,
-    handleScroll
-  } = _ref;
-  const {
-    stores,
-    config
-  } = useSendbirdStateContext();
-  const {
-    isReactionEnabled,
-    isMentionEnabled,
-    isOnline,
-    replyType,
-    userMention,
-    logger
-  } = config;
-  const userId = stores === null || stores === void 0 ? void 0 : (_stores$userStore = stores.userStore) === null || _stores$userStore === void 0 ? void 0 : (_stores$userStore$use = _stores$userStore.user) === null || _stores$userStore$use === void 0 ? void 0 : _stores$userStore$use.userId;
-  const {
-    dateLocale
-  } = LocalizationContext.useLocalization();
-  const threadContext = Thread_context.useThreadContext === null || Thread_context.useThreadContext === void 0 ? void 0 : Thread_context.useThreadContext();
-  const {
-    currentChannel,
-    nicknamesMap,
-    emojiContainer,
-    toggleReaction,
-    threadListState,
-    updateMessage,
-    resendMessage,
-    deleteMessage,
-    isMuted,
-    isChannelFrozen
-  } = threadContext;
-  const openingMessage = threadContext === null || threadContext === void 0 ? void 0 : threadContext.message;
-  const [showEdit, setShowEdit] = React.useState(false);
-  const [showRemove, setShowRemove] = React.useState(false);
-  const [showFileViewer, setShowFileViewer] = React.useState(false);
-  const usingReaction = Channel_context.getIsReactionEnabled({
+function ThreadListItem(_a) {
+  var _b, _c, _d, _e;
+  var className = _a.className,
+    message = _a.message,
+    chainTop = _a.chainTop,
+    chainBottom = _a.chainBottom,
+    hasSeparator = _a.hasSeparator,
+    renderCustomSeparator = _a.renderCustomSeparator,
+    handleScroll = _a.handleScroll;
+  var _f = useSendbirdStateContext.useSendbirdStateContext(),
+    stores = _f.stores,
+    config = _f.config;
+  var isReactionEnabled = config.isReactionEnabled,
+    isMentionEnabled = config.isMentionEnabled,
+    isOnline = config.isOnline,
+    replyType = config.replyType,
+    userMention = config.userMention,
+    logger = config.logger;
+  var userId = (_c = (_b = stores === null || stores === void 0 ? void 0 : stores.userStore) === null || _b === void 0 ? void 0 : _b.user) === null || _c === void 0 ? void 0 : _c.userId;
+  var dateLocale = LocalizationContext.useLocalization().dateLocale;
+  var threadContext = Thread_context.useThreadContext === null || Thread_context.useThreadContext === void 0 ? void 0 : Thread_context.useThreadContext();
+  var currentChannel = threadContext.currentChannel,
+    nicknamesMap = threadContext.nicknamesMap,
+    emojiContainer = threadContext.emojiContainer,
+    toggleReaction = threadContext.toggleReaction,
+    threadListState = threadContext.threadListState,
+    updateMessage = threadContext.updateMessage,
+    resendMessage = threadContext.resendMessage,
+    deleteMessage = threadContext.deleteMessage,
+    isMuted = threadContext.isMuted,
+    isChannelFrozen = threadContext.isChannelFrozen;
+  var openingMessage = threadContext === null || threadContext === void 0 ? void 0 : threadContext.message;
+  var _g = React.useState(false),
+    showEdit = _g[0],
+    setShowEdit = _g[1];
+  var _h = React.useState(false),
+    showRemove = _h[0],
+    setShowRemove = _h[1];
+  var _j = React.useState(false),
+    showFileViewer = _j[0],
+    setShowFileViewer = _j[1];
+  var usingReaction = Channel_context.getIsReactionEnabled({
     globalLevel: isReactionEnabled,
     isSuper: currentChannel.isSuper,
     isBroadcast: currentChannel.isBroadcast
   });
-
   // Move to message
-  const messageScrollRef = React.useRef(null);
-  React.useLayoutEffect(() => {
-    if ((openingMessage === null || openingMessage === void 0 ? void 0 : openingMessage.messageId) === (message === null || message === void 0 ? void 0 : message.messageId) && messageScrollRef !== null && messageScrollRef !== void 0 && messageScrollRef.current) {
-      var _messageScrollRef$cur;
-      (_messageScrollRef$cur = messageScrollRef.current) === null || _messageScrollRef$cur === void 0 ? void 0 : _messageScrollRef$cur.scrollIntoView({
+  var messageScrollRef = React.useRef(null);
+  React.useLayoutEffect(function () {
+    var _a;
+    if ((openingMessage === null || openingMessage === void 0 ? void 0 : openingMessage.messageId) === (message === null || message === void 0 ? void 0 : message.messageId) && (messageScrollRef === null || messageScrollRef === void 0 ? void 0 : messageScrollRef.current)) {
+      (_a = messageScrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
         block: 'center',
         inline: 'center'
       });
     }
   }, [openingMessage, messageScrollRef === null || messageScrollRef === void 0 ? void 0 : messageScrollRef.current]);
-
   // reactions
-  React.useLayoutEffect(() => {
+  React.useLayoutEffect(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]);
-
+  }, [showEdit, (_d = message === null || message === void 0 ? void 0 : message.reactions) === null || _d === void 0 ? void 0 : _d.length]);
   // mention
-  const editMessageInputRef = React.useRef(null);
-  const [mentionNickname, setMentionNickname] = React.useState('');
-  const [mentionedUsers, setMentionedUsers] = React.useState([]);
-  const [mentionedUserIds, setMentionedUserIds] = React.useState([]);
-  const [messageInputEvent, setMessageInputEvent] = React.useState(null);
-  const [selectedUser, setSelectedUser] = React.useState(null);
-  const [mentionSuggestedUsers, setMentionSuggestedUsers] = React.useState([]);
-  const displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !isMuted && !(isChannelFrozen && !(currentChannel.myRole === types.Role.OPERATOR));
-  const mentionNodes = Message_hooks_useDirtyGetMentions.useDirtyGetMentions({
+  var editMessageInputRef = React.useRef(null);
+  var _k = React.useState(''),
+    mentionNickname = _k[0],
+    setMentionNickname = _k[1];
+  var _l = React.useState([]),
+    mentionedUsers = _l[0],
+    setMentionedUsers = _l[1];
+  var _m = React.useState([]),
+    mentionedUserIds = _m[0],
+    setMentionedUserIds = _m[1];
+  var _o = React.useState(null),
+    messageInputEvent = _o[0],
+    setMessageInputEvent = _o[1];
+  var _p = React.useState(null),
+    selectedUser = _p[0],
+    setSelectedUser = _p[1];
+  var _q = React.useState([]),
+    mentionSuggestedUsers = _q[0],
+    setMentionSuggestedUsers = _q[1];
+  var displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !isMuted && !(isChannelFrozen && !(currentChannel.myRole === types.Role.OPERATOR));
+  var mentionNodes = Message_hooks_useDirtyGetMentions.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);
-  React.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);
+  React.useEffect(function () {
+    setMentionedUsers(mentionedUsers.filter(function (_a) {
+      var userId = _a.userId;
+      var i = mentionedUserIds.indexOf(userId);
       if (i < 0) {
         return false;
       } else {
@@ -435,19 +455,16 @@ function ThreadListItem(_ref) {
       }
     }));
   }, [mentionedUserIds]);
-
   // edit input
-  const disabled = !(threadListState === Thread_context_types.ThreadListStateTypes.INITIALIZED) || !isOnline || isMuted || isChannelFrozen;
-
+  var disabled = !(threadListState === Thread_context_types.ThreadListStateTypes.INITIALIZED) || !isOnline || isMuted || isChannelFrozen;
   // memorize
-  const MemorizedSeparator = React.useMemo(() => {
+  var MemorizedSeparator = React.useMemo(function () {
     if (typeof renderCustomSeparator === 'function') {
       return renderCustomSeparator === null || renderCustomSeparator === void 0 ? void 0 : renderCustomSeparator({
-        message
+        message: message
       });
     }
   }, [message, renderCustomSeparator]);
-
   // Edit message
   if (showEdit && message.isUserMessage()) {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, displaySuggestedMentionList && /*#__PURE__*/React__default["default"].createElement(Channel_components_SuggestedMentionList, {
@@ -455,18 +472,18 @@ function ThreadListItem(_ref) {
       inputEvent: messageInputEvent
       // renderUserMentionItem={renderUserMentionItem}
       ,
-      onUserItemClick: user => {
+      onUserItemClick: function (user) {
         if (user) {
-          setMentionedUsers([...mentionedUsers, user]);
+          setMentionedUsers(tslib_es6.__spreadArray(tslib_es6.__spreadArray([], mentionedUsers, true), [user], false));
         }
         setMentionNickname('');
         setSelectedUser(user);
         setMessageInputEvent(null);
       },
-      onFocusItemChange: () => {
+      onFocusItemChange: function () {
         setMessageInputEvent(null);
       },
-      onFetchUsers: users => {
+      onFetchUsers: function (users) {
         setMentionSuggestedUsers(users);
       },
       ableAddMention: ableMention,
@@ -480,48 +497,46 @@ function ThreadListItem(_ref) {
       mentionSelectedUser: selectedUser,
       isMentionEnabled: isMentionEnabled,
       message: message,
-      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
         });
         setShowEdit(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([]);
         setShowEdit(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 === _const.MessageInputKeys.Enter && ableMention || e.key === _const.MessageInputKeys.ArrowUp || e.key === _const.MessageInputKeys.ArrowDown)) {
           setMessageInputEvent(e);
           return true;
@@ -532,11 +547,11 @@ function ThreadListItem(_ref) {
   }
   return /*#__PURE__*/React__default["default"].createElement("div", {
     ref: messageScrollRef,
-    className: `sendbird-thread-list-item ${className}`
+    className: "sendbird-thread-list-item ".concat(className)
   }, hasSeparator && (message === null || message === void 0 ? void 0 : message.createdAt) && (MemorizedSeparator || /*#__PURE__*/React__default["default"].createElement(ui_DateSeparator, null, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     type: ui_Label.LabelTypography.CAPTION_2,
     color: ui_Label.LabelColors.ONBACKGROUND_2
-  }, index$2.format(message === null || message === void 0 ? void 0 : message.createdAt, 'MMM dd, yyyy', {
+  }, index$1.format(message === null || message === void 0 ? void 0 : message.createdAt, 'MMM dd, yyyy', {
     locale: dateLocale
   })))), /*#__PURE__*/React__default["default"].createElement(ThreadListItemContent, {
     userId: userId,
@@ -557,12 +572,16 @@ function ThreadListItem(_ref) {
     showEdit: setShowEdit
   }), showRemove && /*#__PURE__*/React__default["default"].createElement(RemoveMessageModal.RemoveMessage, {
     message: message,
-    onCancel: () => setShowRemove(false)
+    onCancel: function () {
+      return setShowRemove(false);
+    }
   }), showFileViewer && /*#__PURE__*/React__default["default"].createElement(ui_FileViewer.FileViewer, {
     message: message,
-    isByMe: (message === null || message === void 0 ? void 0 : (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.userId) === userId,
-    onClose: () => setShowFileViewer(false),
-    onDelete: () => {
+    isByMe: ((_e = message === null || message === void 0 ? void 0 : message.sender) === null || _e === void 0 ? void 0 : _e.userId) === userId,
+    onClose: function () {
+      return setShowFileViewer(false);
+    },
+    onDelete: function () {
       deleteMessage(message);
       setShowFileViewer(false);
     }