@sendbird/uikit-react 3.4.6-rc.1 → 3.4.7-0

package/Thread/components/ThreadListItem.js

@@ -1,25 +1,24 @@
-import { a as __spreadArray } from '../../tslib.es6-85bcd95d.js';
 import React__default, { useState, useContext, useRef, useLayoutEffect, useEffect, useMemo } from 'react';
-import { f as format } from '../../index-5cfaecc9.js';
-import { u as useLocalization } from '../../LocalizationContext-62966630.js';
+import { f as format } from '../../index-f48cfdf7.js';
+import { u as useLocalization } from '../../LocalizationContext-9c54e783.js';
 import DateSeparator from '../../ui/DateSeparator.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-538fa479.js';
-import { R as RemoveMessage } from '../../RemoveMessageModal-0efd9201.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-4111594a.js';
+import { R as RemoveMessage } from '../../RemoveMessageModal-99b5bab4.js';
 import FileViewer from '../../ui/FileViewer.js';
-import { u as useThreadContext } from '../../ThreadProvider-1798360b.js';
+import { u as useThreadContext } from '../../ThreadProvider-0a3c5f37.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
 import SuggestedMentionList from '../../Channel/components/SuggestedMentionList.js';
 import MessageInput from '../../ui/MessageInput.js';
 import { ThreadListStateTypes } from '../context/types.js';
-import { M as MessageInputKeys } from '../../const-8a7444d1.js';
+import { M as MessageInputKeys } from '../../const-6a07b718.js';
 import ContextMenu, { MenuItems } from '../../ui/ContextMenu.js';
 import Avatar from '../../ui/Avatar.js';
-import { a as UserProfileContext } from '../../UserProfileContext-7083bd82.js';
+import { a as UserProfileContext } from '../../UserProfileContext-a8aa4c0f.js';
 import UserProfile from '../../ui/UserProfile.js';
 import MessageItemMenu from '../../ui/MessageItemMenu.js';
 import MessageItemReactionMenu from '../../ui/MessageItemReactionMenu.js';
-import { z as getUIKitMessageTypes, A as getSenderName, j as getClassName, B as isTextMessage, C as isOGMessage, d as isVoiceMessage, s as getUIKitMessageType, n as isThumbnailMessage } from '../../index-1db30515.js';
-import { M as MessageStatus } from '../../index-77a24725.js';
+import { z as getUIKitMessageTypes, A as getSenderName, j as getClassName, B as isTextMessage, C as isOGMessage, d as isVoiceMessage, s as getUIKitMessageType, n as isThumbnailMessage } from '../../index-dbe0e004.js';
+import { M as MessageStatus } from '../../index-51bd074f.js';
 import EmojiReactions from '../../ui/EmojiReactions.js';
 import TextMessageItemBody from '../../ui/TextMessageItemBody.js';
 import OGMessageItemBody from '../../ui/OGMessageItemBody.js';
@@ -27,140 +26,135 @@ import FileMessageItemBody from '../../ui/FileMessageItemBody.js';
 import ThumbnailMessageItemBody from '../../ui/ThumbnailMessageItemBody.js';
 import UnknownMessageItemBody from '../../ui/UnknownMessageItemBody.js';
 import { VoiceMessageItemBody } from '../../ui/VoiceMessageItemBody.js';
-import { R as Role } from '../../types-84207ac4.js';
-import '../../index-6574e8fd.js';
-import '../../stringSet-e0fd81b2.js';
-import '../../color-4ecee870.js';
+import { R as Role } from '../../types-a85de720.js';
+import '../../index-a9ddd0f5.js';
+import '../../stringSet-1f18348a.js';
+import '../../color-3bac434a.js';
 import 'prop-types';
 import '../../ui/Modal.js';
 import 'react-dom';
-import '../../index-6f66895e.js';
+import '../../index-2a938266.js';
 import '../../ui/Button.js';
 import '../../ui/Icon.js';
 import '../../ui/IconButton.js';
-import '../../MediaQueryContext-17146a37.js';
+import '../../_rollupPluginBabelHelpers-b2d9bfc5.js';
+import '../../MediaQueryContext-1988a4bc.js';
 import '../../utils/message/getOutgoingMessageState.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-39d923b9.js';
+import '../../uuid-48baadaf.js';
 import '@sendbird/chat';
-import '../../topics-bc5fee43.js';
+import '../../topics-d8d10f83.js';
 import '@sendbird/chat/groupChannel';
 import '@sendbird/chat/message';
-import '../../consts-96859f90.js';
+import '../../consts-c9746f2b.js';
 import '../../withSendbird.js';
-import '../../ChannelProvider-4e33aa60.js';
-import '../../_rollupPluginBabelHelpers-48b56150.js';
-import '../../compareIds-bc4cf9bf.js';
-import '../../const-34b3294d.js';
+import '../../ChannelProvider-4ab3a851.js';
+import '../../compareIds-1e0e668f.js';
+import '../../const-5f722b91.js';
 import '../../ui/ReactionButton.js';
 import '../../ui/SortByRow.js';
 import 'dompurify';
-import '../../consts-81c7d9ed.js';
-import '../../consts-165100af.js';
-import '../../consts-7a61df9f.js';
-import '../../tokenize-22d48b61.js';
+import '../../consts-d4c78cc0.js';
+import '../../consts-aadaccca.js';
+import '../../consts-790ae3a9.js';
+import '../../tokenize-63d895d3.js';
 import '../../sendbirdSelectors.js';
-import '../../utils-7dc80efd.js';
+import '../../utils-0c09801e.js';
 import '../../ui/Loader.js';
-import '../../index-c4ff34e4.js';
-import '../../index-adfdd634.js';
+import '../../index-3062a861.js';
+import '../../index-1a3c0d72.js';
 import '../../ui/Tooltip.js';
 import '../../ui/TooltipWrapper.js';
 import '../../ui/ReactionBadge.js';
-import '../../index-f5d419ec.js';
-import '../../index.module-a2145ffe.js';
+import '../../index-8df6bff0.js';
+import '../../index.module-ab8289c1.js';
 import '../../Message/context.js';
 import '../../ui/MentionLabel.js';
 import '../../ui/LinkLabel.js';
 import '../../ui/TextButton.js';
 import '../../ui/ProgressBar.js';
 import '../../VoicePlayer/useVoicePlayer.js';
-import '../../index-47ba6604.js';
+import '../../index-38a78d99.js';
 import '../../VoiceRecorder/context.js';
 import '../../ui/PlaybackTime.js';
 
-function ThreadListItemContent(_a) {
-  var _b, _c, _d, _e;
-  var className = _a.className,
-    userId = _a.userId,
-    channel = _a.channel,
-    message = _a.message,
-    _f = _a.disabled,
-    disabled = _f === void 0 ? false : _f,
-    _g = _a.chainTop,
-    chainTop = _g === void 0 ? false : _g,
-    _h = _a.chainBottom,
-    chainBottom = _h === void 0 ? false : _h,
-    _j = _a.isMentionEnabled,
-    isMentionEnabled = _j === void 0 ? false : _j,
-    _k = _a.isReactionEnabled,
-    isReactionEnabled = _k === void 0 ? false : _k,
-    _l = _a.disableQuoteMessage,
-    disableQuoteMessage = _l === void 0 ? false : _l,
-    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 = getUIKitMessageTypes();
-  var dateLocale = useLocalization().dateLocale;
-  var _m = useState(false),
-    supposedHover = _m[0],
-    setSupposedHover = _m[1];
-  var _o = useContext(UserProfileContext),
-    disableUserProfile = _o.disableUserProfile,
-    renderUserProfile = _o.renderUserProfile;
-  var avatarRef = useRef(null);
-  var isByMe = userId === ((_b = message === null || message === void 0 ? void 0 : message.sender) === null || _b === void 0 ? void 0 : _b.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);
+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 = getUIKitMessageTypes();
+  const {
+    dateLocale
+  } = useLocalization();
+  const [supposedHover, setSupposedHover] = useState(false);
+  const {
+    disableUserProfile,
+    renderUserProfile
+  } = useContext(UserProfileContext);
+  const avatarRef = 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);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-thread-list-item-content ".concat(className, " ").concat(isByMe ? 'outgoing' : 'incoming')
+    className: `sendbird-thread-list-item-content ${className} ${isByMe ? 'outgoing' : 'incoming'}`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-thread-list-item-content__left ".concat(isReactionEnabledInChannel ? 'use-reaction' : '', " ").concat(isByMe ? 'outgoing' : 'incoming')
+    className: `sendbird-thread-list-item-content__left ${isReactionEnabledInChannel ? 'use-reaction' : ''} ${isByMe ? 'outgoing' : 'incoming'}`
   }, !isByMe && !chainBottom && /*#__PURE__*/React__default.createElement(ContextMenu, {
-    menuTrigger: function (toggleDropdown) {
-      var _a, _b, _c;
+    menuTrigger: toggleDropdown => {
+      var _channel$members, _channel$members$find, _message$sender2;
       return /*#__PURE__*/React__default.createElement(Avatar, {
         className: "sendbird-thread-list-item-content__left__avatar",
-        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) || '',
+        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) || '',
         ref: avatarRef,
         width: "28px",
         height: "28px",
-        onClick: function () {
+        onClick: () => {
           if (!disableUserProfile) {
             toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
           }
         }
       });
     },
-    menuItems: function (closeDropdown) {
-      return /*#__PURE__*/React__default.createElement(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.createElement(UserProfile, {
-        user: message === null || message === void 0 ? void 0 : message.sender,
-        onSuccess: closeDropdown
-      }));
-    }
+    menuItems: closeDropdown => /*#__PURE__*/React__default.createElement(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.createElement(UserProfile, {
+      user: message === null || message === void 0 ? void 0 : message.sender,
+      onSuccess: closeDropdown
+    }))
   }), isByMe && /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-thread-list-item-content-menu ".concat(isReactionEnabledInChannel ? 'use-reaction' : '', " ").concat(isByMe ? 'outgoing' : 'incoming', " ").concat(supposedHoverClassName)
+    className: `sendbird-thread-list-item-content-menu ${isReactionEnabledInChannel ? 'use-reaction' : ''} ${isByMe ? 'outgoing' : 'incoming'} ${supposedHoverClassName}`
   }, /*#__PURE__*/React__default.createElement(MessageItemMenu, {
     className: "sendbird-thread-list-item-content-menu__normal-menu",
     channel: channel,
@@ -187,10 +181,10 @@ function ThreadListItemContent(_a) {
     className: "sendbird-thread-list-item-content__middle__sender-name",
     type: LabelTypography.CAPTION_2,
     color: LabelColors.ONBACKGROUND_2
-  }, ((_d = (_c = channel === null || channel === void 0 ? void 0 : channel.members) === null || _c === void 0 ? void 0 : _c.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 || _d === void 0 ? void 0 : _d.nickname) || getSenderName(message)
+  }, (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) || getSenderName(message)
   // TODO: Divide getting profileUrl logic to utils
   ), /*#__PURE__*/React__default.createElement("div", {
     className: getClassName(['sendbird-thread-list-item-content__middle__body-container'])
@@ -240,7 +234,7 @@ function ThreadListItemContent(_a) {
     message: message,
     isByMe: isByMe,
     isReactionEnabled: isReactionEnabledInChannel
-  }), isReactionEnabledInChannel && ((_e = message === null || message === void 0 ? void 0 : message.reactions) === null || _e === void 0 ? void 0 : _e.length) > 0 && /*#__PURE__*/React__default.createElement("div", {
+  }), 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.createElement("div", {
     className: getClassName(['sendbird-thread-list-item-content-reactions', !isByMe || isThumbnailMessage(message) || isOGMessage(message) ? '' : 'primary'])
   }, /*#__PURE__*/React__default.createElement(EmojiReactions, {
     userId: userId,
@@ -256,9 +250,9 @@ function ThreadListItemContent(_a) {
   }, format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, 'p', {
     locale: dateLocale
   })))), /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-thread-list-item-content__right ".concat(chainTop ? 'chain-top' : '', " ").concat(isByMe ? 'outgoing' : 'incoming')
+    className: `sendbird-thread-list-item-content__right ${chainTop ? 'chain-top' : ''} ${isByMe ? 'outgoing' : 'incoming'}`
   }, !isByMe && /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-thread-list-item-content-menu ".concat(supposedHoverClassName)
+    className: `sendbird-thread-list-item-content-menu ${supposedHoverClassName}`
   }, isReactionEnabledInChannel && /*#__PURE__*/React__default.createElement(MessageItemReactionMenu, {
     className: "sendbird-thread-list-item-content-menu__reaction-menu",
     message: message,
@@ -281,97 +275,91 @@ function ThreadListItemContent(_a) {
   }))));
 }
 
-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(),
-    stores = _f.stores,
-    config = _f.config;
-  var isReactionEnabled = config.isReactionEnabled,
-    isMentionEnabled = config.isMentionEnabled,
-    isOnline = config.isOnline,
-    replyType = config.replyType,
-    userMention = config.userMention;
-  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 = useLocalization().dateLocale;
-  var threadContext = useThreadContext === null || useThreadContext === void 0 ? void 0 : 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 = useState(false),
-    showEdit = _g[0],
-    setShowEdit = _g[1];
-  var _h = useState(false),
-    showRemove = _h[0],
-    setShowRemove = _h[1];
-  var _j = useState(false),
-    showFileViewer = _j[0],
-    setShowFileViewer = _j[1];
-  var usingReaction = isReactionEnabled && !(currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isSuper) && !(currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isBroadcast);
+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
+  } = 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
+  } = useLocalization();
+  const threadContext = useThreadContext === null || useThreadContext === void 0 ? void 0 : 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] = useState(false);
+  const [showRemove, setShowRemove] = useState(false);
+  const [showFileViewer, setShowFileViewer] = useState(false);
+  const usingReaction = isReactionEnabled && !(currentChannel !== null && currentChannel !== void 0 && currentChannel.isSuper) && !(currentChannel !== null && currentChannel !== void 0 && currentChannel.isBroadcast);
+
   // Move to message
-  var messageScrollRef = useRef(null);
-  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({
+  const messageScrollRef = useRef(null);
+  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({
         block: 'center',
         inline: 'center'
       });
     }
   }, [openingMessage, messageScrollRef === null || messageScrollRef === void 0 ? void 0 : messageScrollRef.current]);
+
   // reactions
-  useLayoutEffect(function () {
+  useLayoutEffect(() => {
     handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll();
-  }, [showEdit, (_d = message === null || message === void 0 ? void 0 : message.reactions) === null || _d === void 0 ? void 0 : _d.length]);
+  }, [showEdit, message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length]);
+
   // mention
-  var editMessageInputRef = useRef(null);
-  var _k = useState(''),
-    mentionNickname = _k[0],
-    setMentionNickname = _k[1];
-  var _l = useState([]),
-    mentionedUsers = _l[0],
-    setMentionedUsers = _l[1];
-  var _m = useState([]),
-    mentionedUserIds = _m[0],
-    setMentionedUserIds = _m[1];
-  var _o = useState(null),
-    messageInputEvent = _o[0],
-    setMessageInputEvent = _o[1];
-  var _p = useState(null),
-    selectedUser = _p[0],
-    setSelectedUser = _p[1];
-  var _q = useState([]),
-    mentionSuggestedUsers = _q[0],
-    setMentionSuggestedUsers = _q[1];
-  var _r = useState(true),
-    ableMention = _r[0],
-    setAbleMention = _r[1];
-  var displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !isMuted && !(isChannelFrozen && !(currentChannel.myRole === Role.OPERATOR));
-  useEffect(function () {
+  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 [ableMention, setAbleMention] = useState(true);
+  const displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !isMuted && !(isChannelFrozen && !(currentChannel.myRole === Role.OPERATOR));
+  useEffect(() => {
     if ((mentionedUsers === null || mentionedUsers === void 0 ? void 0 : mentionedUsers.length) >= (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount)) {
       setAbleMention(false);
     } else {
       setAbleMention(true);
     }
   }, [mentionedUsers]);
-  useEffect(function () {
-    setMentionedUsers(mentionedUsers.filter(function (_a) {
-      var userId = _a.userId;
-      var i = mentionedUserIds.indexOf(userId);
+  useEffect(() => {
+    setMentionedUsers(mentionedUsers.filter(_ref2 => {
+      let {
+        userId
+      } = _ref2;
+      const i = mentionedUserIds.indexOf(userId);
       if (i < 0) {
         return false;
       } else {
@@ -380,16 +368,19 @@ function ThreadListItem(_a) {
       }
     }));
   }, [mentionedUserIds]);
+
   // edit input
-  var disabled = !(threadListState === ThreadListStateTypes.INITIALIZED) || !isOnline || isMuted || isChannelFrozen;
+  const disabled = !(threadListState === ThreadListStateTypes.INITIALIZED) || !isOnline || isMuted || isChannelFrozen;
+
   // memorize
-  var MemorizedSeparator = useMemo(function () {
+  const MemorizedSeparator = useMemo(() => {
     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.createElement(React__default.Fragment, null, displaySuggestedMentionList && /*#__PURE__*/React__default.createElement(SuggestedMentionList, {
@@ -397,18 +388,18 @@ function ThreadListItem(_a) {
       inputEvent: messageInputEvent
       // renderUserMentionItem={renderUserMentionItem}
       ,
-      onUserItemClick: function (user) {
+      onUserItemClick: user => {
         if (user) {
-          setMentionedUsers(__spreadArray(__spreadArray([], mentionedUsers, true), [user], false));
+          setMentionedUsers([...mentionedUsers, user]);
         }
         setMentionNickname('');
         setSelectedUser(user);
         setMessageInputEvent(null);
       },
-      onFocusItemChange: function () {
+      onFocusItemChange: () => {
         setMessageInputEvent(null);
       },
-      onFetchUsers: function (users) {
+      onFetchUsers: users => {
         setMentionSuggestedUsers(users);
       },
       ableAddMention: ableMention,
@@ -421,46 +412,48 @@ function ThreadListItem(_a) {
       mentionSelectedUser: selectedUser,
       isMentionEnabled: isMentionEnabled,
       message: message,
-      onStartTyping: function () {
-        var _a;
-        (_a = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.startTyping) === null || _a === void 0 ? void 0 : _a.call(currentChannel);
+      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);
       },
-      onUpdateMessage: function (_a) {
-        var _b;
-        var messageId = _a.messageId,
-          message = _a.message,
-          mentionTemplate = _a.mentionTemplate;
+      onUpdateMessage: _ref3 => {
+        var _currentChannel$endTy;
+        let {
+          messageId,
+          message,
+          mentionTemplate
+        } = _ref3;
         updateMessage({
-          messageId: messageId,
-          message: message,
-          mentionedUsers: mentionedUsers,
-          mentionTemplate: mentionTemplate
+          messageId,
+          message,
+          mentionedUsers,
+          mentionTemplate
         });
         setShowEdit(false);
-        (_b = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.endTyping) === null || _b === void 0 ? void 0 : _b.call(currentChannel);
+        currentChannel === null || currentChannel === void 0 ? void 0 : (_currentChannel$endTy = currentChannel.endTyping) === null || _currentChannel$endTy === void 0 ? void 0 : _currentChannel$endTy.call(currentChannel);
       },
-      onCancelEdit: function () {
-        var _a;
+      onCancelEdit: () => {
+        var _currentChannel$endTy2;
         setMentionNickname('');
         setMentionedUsers([]);
         setMentionedUserIds([]);
         setMentionSuggestedUsers([]);
         setShowEdit(false);
-        (_a = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.endTyping) === null || _a === void 0 ? void 0 : _a.call(currentChannel);
+        currentChannel === null || currentChannel === void 0 ? void 0 : (_currentChannel$endTy2 = currentChannel.endTyping) === null || _currentChannel$endTy2 === void 0 ? void 0 : _currentChannel$endTy2.call(currentChannel);
       },
-      onUserMentioned: function (user) {
+      onUserMentioned: user => {
         if ((selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userId) === (user === null || user === void 0 ? void 0 : user.userId)) {
           setSelectedUser(null);
           setMentionNickname('');
         }
       },
-      onMentionStringChange: function (mentionText) {
+      onMentionStringChange: mentionText => {
         setMentionNickname(mentionText);
       },
-      onMentionedUserIdsUpdated: function (userIds) {
+      onMentionedUserIdsUpdated: userIds => {
         setMentionedUserIds(userIds);
       },
-      onKeyDown: function (e) {
+      onKeyDown: 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;
@@ -471,7 +464,7 @@ function ThreadListItem(_a) {
   }
   return /*#__PURE__*/React__default.createElement("div", {
     ref: messageScrollRef,
-    className: "sendbird-thread-list-item ".concat(className)
+    className: `sendbird-thread-list-item ${className}`
   }, hasSeparator && (message === null || message === void 0 ? void 0 : message.createdAt) && (MemorizedSeparator || /*#__PURE__*/React__default.createElement(DateSeparator, null, /*#__PURE__*/React__default.createElement(Label, {
     type: LabelTypography.CAPTION_2,
     color: LabelColors.ONBACKGROUND_2
@@ -496,16 +489,12 @@ function ThreadListItem(_a) {
     showEdit: setShowEdit
   }), showRemove && /*#__PURE__*/React__default.createElement(RemoveMessage, {
     message: message,
-    onCancel: function () {
-      return setShowRemove(false);
-    }
+    onCancel: () => setShowRemove(false)
   }), showFileViewer && /*#__PURE__*/React__default.createElement(FileViewer, {
     message: message,
-    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 () {
+    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: () => {
       deleteMessage(message);
       setShowFileViewer(false);
     }