@sendbird/uikit-react 3.7.0 → 3.8.1

package/cjs/Thread/components/ThreadListItem.js

@@ -1,28 +1,27 @@
 'use strict';
 
-var tslib_es6 = require('../../tslib.es6-c74b513f.js');
+var _tslib = require('../../chunks/bundle-mc8PQfi_.js');
 var React = require('react');
-var index$1 = require('../../index-3448df64.js');
-var LocalizationContext = require('../../LocalizationContext-58b6ed7c.js');
+var index$1 = require('../../chunks/bundle-pLajF9mf.js');
+var LocalizationContext = require('../../chunks/bundle-80bw1Z-w.js');
 var ui_DateSeparator = require('../../ui/DateSeparator.js');
-var ui_Label = require('../../index-b5a9b4b7.js');
-var RemoveMessageModal = require('../../RemoveMessageModal-afc3e268.js');
-var ui_FileViewer = require('../../index-bc6623d7.js');
+var ui_Label = require('../../chunks/bundle-fTDV9UxX.js');
+var RemoveMessageModal = require('../../chunks/bundle-ZYvG_yE0.js');
+var ui_FileViewer = require('../../chunks/bundle-t70SIG3R.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-876980e8.js');
-var _rollupPluginBabelHelpers = require('../../_rollupPluginBabelHelpers-f5b0dfb9.js');
+var _const = require('../../chunks/bundle-YRW87MiX.js');
 var ui_ContextMenu = require('../../ui/ContextMenu.js');
-var ui_Avatar = require('../../ui/Avatar.js');
-var UserProfileContext = require('../../UserProfileContext-c6d7abb7.js');
+var ui_Avatar = require('../../chunks/bundle-lj7KorhP.js');
+var UserProfileContext = require('../../chunks/bundle-ACXel153.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-dbe8dd84.js');
-var ui_MessageStatus = require('../../index-520e12b8.js');
+var index = require('../../chunks/bundle-BUF_nc4Q.js');
+var ui_MessageStatus = require('../../chunks/bundle-Y0ibVW_O.js');
 var ui_EmojiReactions = require('../../ui/EmojiReactions.js');
 var ui_TextMessageItemBody = require('../../ui/TextMessageItemBody.js');
 var ui_OGMessageItemBody = require('../../ui/OGMessageItemBody.js');
@@ -30,53 +29,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-6141d955.js');
-var useLongPress = require('../../useLongPress-18b7af79.js');
-var index$2 = require('../../index-e5e6d9b0.js');
-var useStatefulFileInfoList = require('../../useStatefulFileInfoList-c510792f.js');
-var types = require('../../types-feda9656.js');
+var MediaQueryContext = require('../../chunks/bundle-kkxTVcGD.js');
+var useLongPress = require('../../chunks/bundle-FCrfVx0P.js');
+var index$2 = require('../../chunks/bundle-h48X_8mu.js');
+var useStatefulFileInfoList = require('../../chunks/bundle-Co06yFqb.js');
+var types = require('../../chunks/bundle-M6v8bdc6.js');
 var Message_hooks_useDirtyGetMentions = require('../../Message/hooks/useDirtyGetMentions.js');
-var Channel_context = require('../../ChannelProvider-fc111e5f.js');
-require('../../index-e8928da6.js');
-require('../../stringSet-1539ac47.js');
-require('../../color-5bf5a8f5.js');
-require('prop-types');
-require('../../ui/Modal.js');
+var Channel_context = require('../../chunks/bundle-_yIYQoui.js');
+require('../../chunks/bundle-EVv3xRW8.js');
+require('../../chunks/bundle-5l7POen0.js');
+require('../../chunks/bundle-oISd80pA.js');
+require('../../chunks/bundle-o66lc7qg.js');
 require('react-dom');
-require('../../utils-eb6d90e0.js');
-require('../../index-54279ec2.js');
-require('../../index-b8ba4548.js');
+require('../../chunks/bundle-viTxhrPr.js');
 require('../../ui/IconButton.js');
 require('../../ui/Button.js');
-require('../../types-d0d770c3.js');
 require('../../ui/Icon.js');
-require('../../stringFormatterUtils-92dbef3c.js');
-require('../../consts-f54b15c2.js');
-require('../../useSendMultipleFilesMessage-d6a3d5cf.js');
-require('../../pubSub/topics.js');
-require('../../utils-9193a195.js');
+require('../../chunks/bundle-A9-xoiFy.js');
+require('../../chunks/bundle-RG3ZDmvE.js');
+require('../../hooks/useModal.js');
+require('../../chunks/bundle-4iro9CUN.js');
+require('../../chunks/bundle-leALuaxJ.js');
+require('../../chunks/bundle-6fWeHUzf.js');
+require('../../chunks/bundle-8lUFYwiz.js');
 require('@sendbird/chat/message');
 require('../../utils/message/getOutgoingMessageState.js');
 require('@sendbird/chat');
+require('../../chunks/bundle-bQffWPr0.js');
 require('@sendbird/chat/groupChannel');
-require('../../uuid-9a117e16.js');
+require('../../chunks/bundle-Z8uBiYyS.js');
+require('../../chunks/bundle-a_NGo240.js');
 require('../../withSendbird.js');
-require('../../const-c9e7a340.js');
-require('../../ui/ImageRenderer.js');
-require('../../compareIds-28c6af62.js');
-require('../../resolvedReplyType-c4564ebe.js');
-require('../../index-cc2e05a4.js');
+require('../../chunks/bundle-VHUezYnn.js');
+require('../../chunks/bundle-LoNtsKOJ.js');
 require('dompurify');
-require('../../consts-b3c4f548.js');
-require('../../consts-61d83828.js');
-require('../../consts-b711321c.js');
-require('../../tokenize-d5286fa8.js');
+require('../../chunks/bundle-PoR4V_kd.js');
+require('../../chunks/bundle-MB8QdyyQ.js');
+require('../../chunks/bundle-DRPbz-J2.js');
+require('../../chunks/bundle-Bekm94S6.js');
 require('../../ui/SortByRow.js');
+require('../../ui/ImageRenderer.js');
 require('../../sendbirdSelectors.js');
+require('../../Channel/hooks/useInitialMessagesFetch.js');
+require('../../chunks/bundle-wPu8WyIh.js');
 require('../../ui/ReactionButton.js');
 require('../../ui/Loader.js');
-require('../../index-7627b546.js');
-require('../../index-134e9852.js');
+require('../../chunks/bundle-cKt6NzI1.js');
+require('../../chunks/bundle-uE1K1eGs.js');
 require('../../ui/ReactionBadge.js');
 require('../../ui/BottomSheet.js');
 require('../../ui/UserListItem.js');
@@ -85,507 +84,244 @@ require('../../ui/Checkbox.js');
 require('../../ui/Tooltip.js');
 require('../../ui/TooltipWrapper.js');
 require('../../Message/context.js');
-require('../../index-ce07a2a3.js');
+require('../../chunks/bundle-3qeMVUne.js');
 require('../../ui/MentionLabel.js');
 require('../../ui/LinkLabel.js');
 require('../../ui/TextButton.js');
-require('../../utils-93ca9d57.js');
+require('../../chunks/bundle-lkluBCYi.js');
 require('../../ui/ProgressBar.js');
 require('../../VoicePlayer/useVoicePlayer.js');
-require('../../index-a95c4ab4.js');
+require('../../chunks/bundle-oiMScSG6.js');
 require('../../VoiceRecorder/context.js');
 require('../../ui/PlaybackTime.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-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
-  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);
-      }
-    }
-  }, {
-    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 ".concat(className, " ").concat(isByMe ? 'outgoing' : 'incoming'),
-    ref: mobileMenuRef
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    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: function (toggleDropdown) {
-      var _a, _b, _c;
-      return /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
-        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) || '',
-        ref: avatarRef,
-        width: "28px",
-        height: "28px",
-        onClick: function () {
-          if (!disableUserProfile) {
-            toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
-          }
-        }
-      });
-    },
-    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 ".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,
-    message: message,
-    isByMe: isByMe,
-    replyType: replyType,
-    disabled: disabled,
-    showEdit: showEdit,
-    showRemove: showRemove,
-    resendMessage: resendMessage,
-    setSupposedHover: setSupposedHover,
-    onReplyInThread: onReplyInThread
-  }), isReactionEnabledInChannel && /*#__PURE__*/React__default["default"].createElement(ui_MessageItemReactionMenu, {
-    className: "sendbird-thread-list-item-content-menu__reaction-menu",
-    message: message,
-    userId: userId,
-    emojiContainer: emojiContainer,
-    toggleReaction: toggleReaction,
-    setSupposedHover: setSupposedHover
-  }))), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers._extends({
-    className: "sendbird-thread-list-item-content__middle"
-  }, 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
-  }, ((_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'])
-  }, isByMe && !chainBottom && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index.getClassName(['sendbird-thread-list-item-content__middle__body-container__created-at', 'left', supposedHoverClassName])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-thread-list-item-content__middle__body-container__created-at__component-container"
-  }, /*#__PURE__*/React__default["default"].createElement(ui_MessageStatus.MessageStatus, {
-    message: message,
-    channel: channel
-  }))), isOgMessageEnabledInGroupChannel && index.isOGMessage(message) ? /*#__PURE__*/React__default["default"].createElement(ui_OGMessageItemBody, {
-    className: "sendbird-thread-list-item-content__middle__message-item-body",
-    message: message,
-    isByMe: isByMe,
-    isMentionEnabled: isMentionEnabled,
-    isReactionEnabled: isReactionEnabledInChannel
-  }) : index.isTextMessage(message) && /*#__PURE__*/React__default["default"].createElement(ui_TextMessageItemBody, {
-    className: "sendbird-thread-list-item-content__middle__message-item-body",
-    message: message,
-    isByMe: isByMe,
-    isMentionEnabled: isMentionEnabled,
-    isReactionEnabled: isReactionEnabledInChannel
-  }), index.isVoiceMessage(message) && /*#__PURE__*/React__default["default"].createElement(ui_VoiceMessageItemBody.VoiceMessageItemBody, {
-    className: "sendbird-thread-list-item-content__middle__message-item-body",
-    message: message,
-    channelUrl: channel === null || channel === void 0 ? void 0 : channel.url,
-    isByMe: isByMe,
-    isReactionEnabled: isReactionEnabledInChannel
-  }), index.getUIKitMessageType(message) === messageTypes.FILE && /*#__PURE__*/React__default["default"].createElement(ui_FileMessageItemBody, {
-    className: "sendbird-thread-list-item-content__middle__message-item-body",
-    message: message,
-    isByMe: isByMe,
-    isReactionEnabled: isReactionEnabledInChannel,
-    truncateLimit: isByMe ? 18 : 14
-  }), 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,
-    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,
-    isByMe: isByMe,
-    isReactionEnabled: isReactionEnabledInChannel,
-    showFileViewer: showFileViewer,
-    style: {
-      width: isMobile ? '100%' : '200px',
-      height: '148px'
-    }
-  }), index.getUIKitMessageType(message) === messageTypes.UNKNOWN && /*#__PURE__*/React__default["default"].createElement(ui_UnknownMessageItemBody, {
-    className: "sendbird-thread-list-item-content__middle__message-item-body",
-    message: message,
-    isByMe: isByMe,
-    isReactionEnabled: isReactionEnabledInChannel
-  }), 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,
-    message: message,
-    channel: channel,
-    isByMe: isByMe,
-    emojiContainer: emojiContainer,
-    memberNicknamesMap: nicknamesMap,
-    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$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 ".concat(chainTop ? 'chain-top' : '', " ").concat(isByMe ? 'outgoing' : 'incoming')
-  }, !isByMe && !isMobile && /*#__PURE__*/React__default["default"].createElement("div", {
-    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,
-    emojiContainer: emojiContainer,
-    toggleReaction: toggleReaction,
-    setSupposedHover: setSupposedHover
-  }), /*#__PURE__*/React__default["default"].createElement(ui_MessageItemMenu, {
-    className: "sendbird-thread-list-item-content-menu__normal-menu",
-    channel: channel,
-    message: message,
-    isByMe: isByMe,
-    replyType: replyType,
-    disabled: disabled,
-    showRemove: showRemove,
-    resendMessage: resendMessage,
-    setSupposedHover: setSupposedHover,
-    onReplyInThread: onReplyInThread
-  }))), showMobileMenu && /*#__PURE__*/React__default["default"].createElement(index$2.MobileMenu, {
-    parentRef: mobileMenuRef,
-    channel: channel,
-    message: message,
-    userId: userId,
-    replyType: replyType,
-    hideMenu: function () {
-      setShowMobileMenu(false);
-    },
-    isReactionEnabled: isReactionEnabled,
-    isByMe: isByMe,
-    emojiContainer: emojiContainer,
-    showEdit: showEdit,
-    showRemove: showRemove,
-    toggleReaction: toggleReaction,
-    isOpenedFromThread: true,
-    deleteMessage: deleteMessage
-  }));
+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
+    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);
+            }
+        },
+    }, {
+        shouldPreventDefault: false,
+    });
+    var threadMessageKindKey = useStatefulFileInfoList.useThreadMessageKindKeySelector({
+        threadMessageKind: useStatefulFileInfoList.ThreadMessageKind.CHILD,
+        isMobile: isMobile,
+    });
+    // For MultipleFilesMessage only.
+    var statefulFileInfoList = useStatefulFileInfoList.useStatefulFileInfoList(message);
+    return (React.createElement("div", { className: "sendbird-thread-list-item-content ".concat(className, " ").concat(isByMe ? 'outgoing' : 'incoming'), ref: mobileMenuRef },
+        React.createElement("div", { className: "sendbird-thread-list-item-content__left ".concat(isReactionEnabledInChannel ? 'use-reaction' : '', " ").concat(isByMe ? 'outgoing' : 'incoming') },
+            (!isByMe && !chainBottom) && (React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) {
+                    var _a, _b, _c;
+                    return (React.createElement(ui_Avatar.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) || '', ref: avatarRef, width: "28px", height: "28px", onClick: function () {
+                            if (!disableUserProfile) {
+                                toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
+                            }
+                        } }));
+                }, menuItems: function (closeDropdown) { return (React.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 })
+                    : React.createElement(ui_UserProfile, { user: message === null || message === void 0 ? void 0 : message.sender, onSuccess: closeDropdown }))); } })),
+            (isByMe && !isMobile) && (React.createElement("div", { className: "sendbird-thread-list-item-content-menu ".concat(isReactionEnabledInChannel ? 'use-reaction' : '', " ").concat(isByMe ? 'outgoing' : 'incoming', " ").concat(supposedHoverClassName) },
+                React.createElement(ui_MessageItemMenu, { className: "sendbird-thread-list-item-content-menu__normal-menu", channel: channel, message: message, isByMe: isByMe, replyType: replyType, disabled: disabled, showEdit: showEdit, showRemove: showRemove, resendMessage: resendMessage, setSupposedHover: setSupposedHover, onReplyInThread: onReplyInThread }),
+                isReactionEnabledInChannel && (React.createElement(ui_MessageItemReactionMenu, { className: "sendbird-thread-list-item-content-menu__reaction-menu", message: message, userId: userId, emojiContainer: emojiContainer, toggleReaction: toggleReaction, setSupposedHover: setSupposedHover }))))),
+        React.createElement("div", _tslib.__assign({ className: "sendbird-thread-list-item-content__middle" }, (isMobile) ? _tslib.__assign({}, longPress) : {}),
+            (!isByMe && !chainTop && !useReplying) && (React.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 }, ((_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
+            )),
+            React.createElement("div", { className: index.getClassName(['sendbird-thread-list-item-content__middle__body-container']) },
+                (isByMe && !chainBottom) && (React.createElement("div", { className: index.getClassName(['sendbird-thread-list-item-content__middle__body-container__created-at', 'left', supposedHoverClassName]) },
+                    React.createElement("div", { className: "sendbird-thread-list-item-content__middle__body-container__created-at__component-container" },
+                        React.createElement(ui_MessageStatus.MessageStatus, { message: message, channel: channel })))),
+                isOgMessageEnabledInGroupChannel && index.isOGMessage(message)
+                    ? (React.createElement(ui_OGMessageItemBody, { className: "sendbird-thread-list-item-content__middle__message-item-body", message: message, isByMe: isByMe, isMentionEnabled: isMentionEnabled, isReactionEnabled: isReactionEnabledInChannel })) : index.isTextMessage(message) && (React.createElement(ui_TextMessageItemBody, { className: "sendbird-thread-list-item-content__middle__message-item-body", message: message, isByMe: isByMe, isMentionEnabled: isMentionEnabled, isReactionEnabled: isReactionEnabledInChannel })),
+                index.isVoiceMessage(message) && (React.createElement(ui_VoiceMessageItemBody.VoiceMessageItemBody, { className: "sendbird-thread-list-item-content__middle__message-item-body", message: message, channelUrl: channel === null || channel === void 0 ? void 0 : channel.url, isByMe: isByMe, isReactionEnabled: isReactionEnabledInChannel })),
+                (index.getUIKitMessageType(message) === messageTypes.FILE) && (React.createElement(ui_FileMessageItemBody, { className: "sendbird-thread-list-item-content__middle__message-item-body", message: message, isByMe: isByMe, isReactionEnabled: isReactionEnabledInChannel, truncateLimit: isByMe ? 18 : 14 })),
+                index.isMultipleFilesMessage(message) && (React.createElement(useStatefulFileInfoList.MultipleFilesMessageItemBody, { className: "sendbird-thread-list-item-content__middle__message-item-body", message: message, isByMe: isByMe, isReactionEnabled: isReactionEnabled, threadMessageKindKey: threadMessageKindKey, statefulFileInfoList: statefulFileInfoList })),
+                (index.isThumbnailMessage(message)) && (React.createElement(ui_ThumbnailMessageItemBody, { className: "sendbird-thread-list-item-content__middle__message-item-body", message: message, isByMe: isByMe, isReactionEnabled: isReactionEnabledInChannel, showFileViewer: showFileViewer, style: {
+                        width: isMobile ? '100%' : '200px',
+                        height: '148px',
+                    } })),
+                (index.getUIKitMessageType(message) === messageTypes.UNKNOWN) && (React.createElement(ui_UnknownMessageItemBody, { className: "sendbird-thread-list-item-content__middle__message-item-body", message: message, isByMe: isByMe, isReactionEnabled: isReactionEnabledInChannel })),
+                (isReactionEnabledInChannel && ((_f = message === null || message === void 0 ? void 0 : message.reactions) === null || _f === void 0 ? void 0 : _f.length) > 0) && (React.createElement("div", { className: index.getClassName([
+                        'sendbird-thread-list-item-content-reactions',
+                        (!isByMe
+                            || index.isThumbnailMessage(message)
+                            || (isOgMessageEnabledInGroupChannel && index.isOGMessage(message))
+                            || index.isMultipleFilesMessage(message)) ? '' : 'primary',
+                    ]) },
+                    React.createElement(ui_EmojiReactions, { userId: userId, message: message, channel: channel, isByMe: isByMe, emojiContainer: emojiContainer, memberNicknamesMap: nicknamesMap, toggleReaction: toggleReaction, onPressUserProfile: onPressUserProfileHandler }))),
+                (!isByMe && !chainBottom) && (React.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$1.format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, 'p', {
+                    locale: dateLocale,
+                }))))),
+        React.createElement("div", { className: "sendbird-thread-list-item-content__right ".concat(chainTop ? 'chain-top' : '', " ").concat(isByMe ? 'outgoing' : 'incoming') }, (!isByMe && !isMobile) && (React.createElement("div", { className: "sendbird-thread-list-item-content-menu ".concat(supposedHoverClassName) },
+            isReactionEnabledInChannel && (React.createElement(ui_MessageItemReactionMenu, { className: "sendbird-thread-list-item-content-menu__reaction-menu", message: message, userId: userId, emojiContainer: emojiContainer, toggleReaction: toggleReaction, setSupposedHover: setSupposedHover })),
+            React.createElement(ui_MessageItemMenu, { className: "sendbird-thread-list-item-content-menu__normal-menu", channel: channel, message: message, isByMe: isByMe, replyType: replyType, disabled: disabled, showRemove: showRemove, resendMessage: resendMessage, setSupposedHover: setSupposedHover, onReplyInThread: onReplyInThread })))),
+        showMobileMenu && (React.createElement(index$2.MobileMenu, { parentRef: mobileMenuRef, channel: channel, message: message, userId: userId, replyType: replyType, hideMenu: function () {
+                setShowMobileMenu(false);
+            }, isReactionEnabled: isReactionEnabled, isByMe: isByMe, emojiContainer: emojiContainer, showEdit: showEdit, showRemove: showRemove, toggleReaction: toggleReaction, isOpenedFromThread: true, deleteMessage: deleteMessage }))));
 }
 
-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
-  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(function () {
-    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]);
-  // mention
-  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
-  });
-  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 {
-        mentionedUserIds.splice(i, 1);
-        return true;
-      }
-    }));
-  }, [mentionedUserIds]);
-  // edit input
-  var disabled = !(threadListState === Thread_context_types.ThreadListStateTypes.INITIALIZED) || !isOnline || isMuted || isChannelFrozen;
-  // memorize
-  var MemorizedSeparator = React.useMemo(function () {
-    if (typeof renderCustomSeparator === 'function') {
-      return renderCustomSeparator === null || renderCustomSeparator === void 0 ? void 0 : renderCustomSeparator({
-        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, {
-      targetNickname: mentionNickname,
-      inputEvent: messageInputEvent
-      // renderUserMentionItem={renderUserMentionItem}
-      ,
-      onUserItemClick: function (user) {
-        if (user) {
-          setMentionedUsers(tslib_es6.__spreadArray(tslib_es6.__spreadArray([], mentionedUsers, true), [user], false));
-        }
-        setMentionNickname('');
-        setSelectedUser(user);
-        setMessageInputEvent(null);
-      },
-      onFocusItemChange: function () {
-        setMessageInputEvent(null);
-      },
-      onFetchUsers: function (users) {
-        setMentionSuggestedUsers(users);
-      },
-      ableAddMention: ableMention,
-      maxMentionCount: userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount,
-      maxSuggestionCount: userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount
-    }), /*#__PURE__*/React__default["default"].createElement(ui_MessageInput, {
-      isEdit: true,
-      channel: currentChannel,
-      disabled: disabled,
-      ref: editMessageInputRef,
-      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);
-      },
-      onUpdateMessage: function (_a) {
-        var _b;
-        var messageId = _a.messageId,
-          message = _a.message,
-          mentionTemplate = _a.mentionTemplate;
-        updateMessage({
-          messageId: messageId,
-          message: message,
-          mentionedUsers: mentionedUsers,
-          mentionTemplate: mentionTemplate
-        });
-        setShowEdit(false);
-        (_b = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.endTyping) === null || _b === void 0 ? void 0 : _b.call(currentChannel);
-      },
-      onCancelEdit: function () {
-        var _a;
-        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);
-      },
-      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: function (mentionText) {
-        setMentionNickname(mentionText);
-      },
-      onMentionedUserIdsUpdated: function (userIds) {
-        setMentionedUserIds(userIds);
-      },
-      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;
-        }
-        return false;
-      }
-    }));
-  }
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    ref: messageScrollRef,
-    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$1.format(message === null || message === void 0 ? void 0 : message.createdAt, 'MMM dd, yyyy', {
-    locale: dateLocale
-  })))), /*#__PURE__*/React__default["default"].createElement(ThreadListItemContent, {
-    userId: userId,
-    channel: currentChannel,
-    message: message,
-    chainTop: chainTop,
-    chainBottom: chainBottom,
-    isReactionEnabled: usingReaction,
-    isMentionEnabled: isMentionEnabled,
-    disableQuoteMessage: true,
-    replyType: replyType,
-    nicknamesMap: nicknamesMap,
-    emojiContainer: emojiContainer,
-    resendMessage: resendMessage,
-    showRemove: setShowRemove,
-    showFileViewer: setShowFileViewer,
-    toggleReaction: toggleReaction,
-    showEdit: setShowEdit
-  }), showRemove && /*#__PURE__*/React__default["default"].createElement(RemoveMessageModal.RemoveMessage, {
-    message: message,
-    onCancel: function () {
-      return setShowRemove(false);
-    }
-  }), showFileViewer && /*#__PURE__*/React__default["default"].createElement(ui_FileViewer.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 () {
-      deleteMessage(message);
-      setShowFileViewer(false);
-    }
-  }));
+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 _g = LocalizationContext.useLocalization(), dateLocale = _g.dateLocale, stringSet = _g.stringSet;
+    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 _h = React.useState(false), showEdit = _h[0], setShowEdit = _h[1];
+    var _j = React.useState(false), showRemove = _j[0], setShowRemove = _j[1];
+    var _k = React.useState(false), showFileViewer = _k[0], setShowFileViewer = _k[1];
+    var usingReaction = Channel_context.getIsReactionEnabled({
+        globalLevel: isReactionEnabled,
+        isSuper: currentChannel.isSuper,
+        isBroadcast: currentChannel.isBroadcast,
+    });
+    // Move to message
+    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(function () {
+        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]);
+    // mention
+    var editMessageInputRef = React.useRef(null);
+    var _l = React.useState(''), mentionNickname = _l[0], setMentionNickname = _l[1];
+    var _m = React.useState([]), mentionedUsers = _m[0], setMentionedUsers = _m[1];
+    var _o = React.useState([]), mentionedUserIds = _o[0], setMentionedUserIds = _o[1];
+    var _p = React.useState(null), messageInputEvent = _p[0], setMessageInputEvent = _p[1];
+    var _q = React.useState(null), selectedUser = _q[0], setSelectedUser = _q[1];
+    var _r = React.useState([]), mentionSuggestedUsers = _r[0], setMentionSuggestedUsers = _r[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 });
+    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 {
+                mentionedUserIds.splice(i, 1);
+                return true;
+            }
+        }));
+    }, [mentionedUserIds]);
+    // edit input
+    var disabled = !(threadListState === Thread_context_types.ThreadListStateTypes.INITIALIZED)
+        || !isOnline
+        || isMuted
+        || isChannelFrozen;
+    // memorize
+    var MemorizedSeparator = React.useMemo(function () {
+        if (typeof renderCustomSeparator === 'function') {
+            return renderCustomSeparator === null || renderCustomSeparator === void 0 ? void 0 : renderCustomSeparator({ message: message });
+        }
+    }, [message, renderCustomSeparator]);
+    // Edit message
+    if (showEdit && message.isUserMessage()) {
+        return (React.createElement(React.Fragment, null,
+            displaySuggestedMentionList && (React.createElement(Channel_components_SuggestedMentionList, { targetNickname: mentionNickname, inputEvent: messageInputEvent, 
+                // renderUserMentionItem={renderUserMentionItem}
+                onUserItemClick: function (user) {
+                    if (user) {
+                        setMentionedUsers(_tslib.__spreadArray(_tslib.__spreadArray([], mentionedUsers, true), [user], false));
+                    }
+                    setMentionNickname('');
+                    setSelectedUser(user);
+                    setMessageInputEvent(null);
+                }, onFocusItemChange: function () {
+                    setMessageInputEvent(null);
+                }, onFetchUsers: function (users) {
+                    setMentionSuggestedUsers(users);
+                }, ableAddMention: ableMention, maxMentionCount: userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount, maxSuggestionCount: userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount })),
+            React.createElement(ui_MessageInput, { isEdit: true, channel: currentChannel, disabled: disabled, ref: editMessageInputRef, 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);
+                }, onUpdateMessage: function (_a) {
+                    var _b;
+                    var messageId = _a.messageId, message = _a.message, mentionTemplate = _a.mentionTemplate;
+                    updateMessage({
+                        messageId: messageId,
+                        message: message,
+                        mentionedUsers: mentionedUsers,
+                        mentionTemplate: mentionTemplate,
+                    });
+                    setShowEdit(false);
+                    (_b = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.endTyping) === null || _b === void 0 ? void 0 : _b.call(currentChannel);
+                }, onCancelEdit: function () {
+                    var _a;
+                    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);
+                }, 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: function (mentionText) {
+                    setMentionNickname(mentionText);
+                }, onMentionedUserIdsUpdated: function (userIds) {
+                    setMentionedUserIds(userIds);
+                }, 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;
+                    }
+                    return false;
+                } })));
+    }
+    return (React.createElement("div", { ref: messageScrollRef, className: "sendbird-thread-list-item ".concat(className) },
+        hasSeparator && (message === null || message === void 0 ? void 0 : message.createdAt) && (MemorizedSeparator || (React.createElement(ui_DateSeparator, null,
+            React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, index$1.format(message === null || message === void 0 ? void 0 : message.createdAt, stringSet.DATE_FORMAT__THREAD_LIST__DATE_SEPARATOR, { locale: dateLocale }))))),
+        React.createElement(ThreadListItemContent, { userId: userId, channel: currentChannel, message: message, chainTop: chainTop, chainBottom: chainBottom, isReactionEnabled: usingReaction, isMentionEnabled: isMentionEnabled, disableQuoteMessage: true, replyType: replyType, nicknamesMap: nicknamesMap, emojiContainer: emojiContainer, resendMessage: resendMessage, showRemove: setShowRemove, showFileViewer: setShowFileViewer, toggleReaction: toggleReaction, showEdit: setShowEdit }),
+        showRemove && (React.createElement(RemoveMessageModal.RemoveMessage, { message: message, onCancel: function () { return setShowRemove(false); } })),
+        showFileViewer && (React.createElement(ui_FileViewer.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 () {
+                deleteMessage(message);
+                setShowFileViewer(false);
+            } }))));
 }
 
 module.exports = ThreadListItem;