@sendbird/uikit-react 3.6.4-rc-0 → 3.6.4

package/cjs/Thread/components/ThreadListItem.js

@@ -0,0 +1,561 @@
+'use strict';
+
+var React = require('react');
+var index$1 = require('../../index-7c0c9fcc.js');
+var LocalizationContext = require('../../LocalizationContext-caec9de8.js');
+var ui_DateSeparator = require('../../ui/DateSeparator.js');
+var ui_Label = require('../../index-9168135b.js');
+var RemoveMessageModal = require('../../RemoveMessageModal-e9297650.js');
+var ui_FileViewer = require('../../ui/FileViewer.js');
+var Thread_context = require('../../ThreadProvider-20f500df.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-d7c2048d.js');
+var _rollupPluginBabelHelpers = require('../../_rollupPluginBabelHelpers-f66db07d.js');
+var ui_ContextMenu = require('../../ui/ContextMenu.js');
+var ui_Avatar = require('../../ui/Avatar.js');
+var UserProfileContext = require('../../UserProfileContext-b1d56847.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-4d803bbe.js');
+var ui_MessageStatus = require('../../index-d86091fb.js');
+var ui_EmojiReactions = require('../../ui/EmojiReactions.js');
+var ui_TextMessageItemBody = require('../../ui/TextMessageItemBody.js');
+var ui_OGMessageItemBody = require('../../ui/OGMessageItemBody.js');
+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-315973f1.js');
+var useLongPress = require('../../useLongPress-e2790020.js');
+var index$2 = require('../../index-e22caa17.js');
+var types = require('../../types-ff533efa.js');
+var useDirtyGetMentions = require('../../useDirtyGetMentions-03972b52.js');
+var Channel_context = require('../../ChannelProvider-69fc2b91.js');
+require('../../index-3096ca12.js');
+require('../../stringSet-c9e09cc3.js');
+require('../../color-a452c689.js');
+require('prop-types');
+require('../../ui/Modal.js');
+require('react-dom');
+require('../../index-6fdabf73.js');
+require('../../ui/Button.js');
+require('../../ui/Icon.js');
+require('../../ui/IconButton.js');
+require('../../utils/message/getOutgoingMessageState.js');
+require('../../ui/ImageRenderer.js');
+require('../../uuid-57c89aa3.js');
+require('@sendbird/chat');
+require('../../topics-d07733ad.js');
+require('@sendbird/chat/groupChannel');
+require('@sendbird/chat/message');
+require('../../consts-5035e334.js');
+require('../../withSendbird.js');
+require('../../const-667f4917.js');
+require('../../compareIds-5f766ab2.js');
+require('../../resolvedReplyType-bab1cbac.js');
+require('dompurify');
+require('../../consts-c160396a.js');
+require('../../consts-36d3f590.js');
+require('../../consts-6a3d5cb1.js');
+require('../../tokenize-c399afb2.js');
+require('../../index.module-8a2bfcaf.js');
+require('../../ui/SortByRow.js');
+require('../../sendbirdSelectors.js');
+require('../../utils-600a013a.js');
+require('../../ui/ReactionButton.js');
+require('../../ui/Loader.js');
+require('../../index-4ad3b255.js');
+require('../../index-522cb8a3.js');
+require('../../ui/ReactionBadge.js');
+require('../../ui/BottomSheet.js');
+require('../../ui/UserListItem.js');
+require('../../ui/MutedAvatarOverlay.js');
+require('../../ui/Checkbox.js');
+require('../../ui/Tooltip.js');
+require('../../ui/TooltipWrapper.js');
+require('../../Message/context.js');
+require('../../index-60b2708f.js');
+require('../../ui/MentionLabel.js');
+require('../../ui/LinkLabel.js');
+require('../../ui/TextButton.js');
+require('../../ui/ProgressBar.js');
+require('../../VoicePlayer/useVoicePlayer.js');
+require('../../index-ef8bbd45.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(_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;
+
+  // Mobile
+  const mobileMenuRef = React.useRef(null);
+  const [showMobileMenu, setShowMobileMenu] = React.useState(false);
+  const longPress = useLongPress.useLongPress({
+    onLongPress: () => {
+      if (isMobile) {
+        setShowMobileMenu(true);
+      }
+    }
+  }, {
+    shouldPreventDefault: false
+  });
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `sendbird-thread-list-item-content ${className} ${isByMe ? 'outgoing' : 'incoming'}`,
+    ref: mobileMenuRef
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `sendbird-thread-list-item-content__left ${isReactionEnabledInChannel ? 'use-reaction' : ''} ${isByMe ? 'outgoing' : 'incoming'}`
+  }, !isByMe && !chainBottom && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
+    menuTrigger: toggleDropdown => {
+      var _channel$members, _channel$members$find, _message$sender2;
+      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) || '',
+        ref: avatarRef,
+        width: "28px",
+        height: "28px",
+        onClick: () => {
+          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
+    }))
+  }), isByMe && !isMobile && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `sendbird-thread-list-item-content-menu ${isReactionEnabledInChannel ? 'use-reaction' : ''} ${isByMe ? 'outgoing' : 'incoming'} ${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,
+    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, {
+    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)
+  // 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.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 && (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", {
+    className: index.getClassName(['sendbird-thread-list-item-content-reactions', !isByMe || index.isThumbnailMessage(message) || isOgMessageEnabledInGroupChannel && index.isOGMessage(message) ? '' : 'primary'])
+  }, /*#__PURE__*/React__default["default"].createElement(ui_EmojiReactions, {
+    userId: userId,
+    message: message,
+    channel: channel,
+    isByMe: isByMe,
+    emojiContainer: emojiContainer,
+    memberNicknamesMap: nicknamesMap,
+    toggleReaction: toggleReaction
+  })), !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 ${chainTop ? 'chain-top' : ''} ${isByMe ? 'outgoing' : 'incoming'}`
+  }, !isByMe && !isMobile && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `sendbird-thread-list-item-content-menu ${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
+  }), /*#__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: () => {
+      setShowMobileMenu(false);
+    },
+    isReactionEnabled: isReactionEnabled,
+    isByMe: isByMe,
+    emojiContainer: emojiContainer,
+    showEdit: showEdit,
+    showRemove: showRemove,
+    toggleReaction: toggleReaction,
+    isOpenedFromThread: true
+  }));
+}
+
+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({
+    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({
+        block: 'center',
+        inline: 'center'
+      });
+    }
+  }, [openingMessage, messageScrollRef === null || messageScrollRef === void 0 ? void 0 : messageScrollRef.current]);
+
+  // reactions
+  React.useLayoutEffect(() => {
+    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]);
+
+  // 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 = useDirtyGetMentions.useDirtyGetMentions({
+    ref: editMessageInputRef
+  }, {
+    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);
+      if (i < 0) {
+        return false;
+      } else {
+        mentionedUserIds.splice(i, 1);
+        return true;
+      }
+    }));
+  }, [mentionedUserIds]);
+
+  // edit input
+  const disabled = !(threadListState === Thread_context_types.ThreadListStateTypes.INITIALIZED) || !isOnline || isMuted || isChannelFrozen;
+
+  // memorize
+  const MemorizedSeparator = React.useMemo(() => {
+    if (typeof renderCustomSeparator === 'function') {
+      return renderCustomSeparator === null || renderCustomSeparator === void 0 ? void 0 : renderCustomSeparator({
+        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: user => {
+        if (user) {
+          setMentionedUsers([...mentionedUsers, user]);
+        }
+        setMentionNickname('');
+        setSelectedUser(user);
+        setMessageInputEvent(null);
+      },
+      onFocusItemChange: () => {
+        setMessageInputEvent(null);
+      },
+      onFetchUsers: 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: () => {
+        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: _ref3 => {
+        var _currentChannel$endTy;
+        let {
+          messageId,
+          message,
+          mentionTemplate
+        } = _ref3;
+        updateMessage({
+          messageId,
+          message,
+          mentionedUsers,
+          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);
+      },
+      onCancelEdit: () => {
+        var _currentChannel$endTy2;
+        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);
+      },
+      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: mentionText => {
+        setMentionNickname(mentionText);
+      },
+      onMentionedUserIdsUpdated: userIds => {
+        setMentionedUserIds(userIds);
+      },
+      onKeyDown: 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 ${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: () => setShowRemove(false)
+  }), showFileViewer && /*#__PURE__*/React__default["default"].createElement(ui_FileViewer["default"], {
+    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: () => {
+      deleteMessage(message);
+      setShowFileViewer(false);
+    }
+  }));
+}
+
+module.exports = ThreadListItem;
+//# sourceMappingURL=ThreadListItem.js.map