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

package/dist/Thread/components/ThreadListItem.js

@@ -1,555 +0,0 @@
-import React__default, { useState, useContext, useRef, useLayoutEffect, useEffect, useMemo } from 'react';
-import { f as format } from '../../index-5a62f6b7.js';
-import { u as useLocalization } from '../../LocalizationContext-1701e5c8.js';
-import DateSeparator from '../../ui/DateSeparator.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-f50d7ab0.js';
-import { R as RemoveMessage } from '../../RemoveMessageModal-bf0ab3b2.js';
-import FileViewer from '../../ui/FileViewer.js';
-import { u as useThreadContext } from '../../ThreadProvider-dea308a0.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-2e67461b.js';
-import { b as _extends, _ as _objectSpread2 } from '../../_rollupPluginBabelHelpers-cc035350.js';
-import ContextMenu, { MenuItems } from '../../ui/ContextMenu.js';
-import Avatar from '../../ui/Avatar.js';
-import { a as UserProfileContext } from '../../UserProfileContext-74e9a128.js';
-import UserProfile from '../../ui/UserProfile.js';
-import MessageItemMenu from '../../ui/MessageItemMenu.js';
-import MessageItemReactionMenu from '../../ui/MessageItemReactionMenu.js';
-import { s as getUIKitMessageTypes, u as getSenderName, h as getClassName, v as isOGMessage, w as isTextMessage, d as isVoiceMessage, r as getUIKitMessageType, m as isThumbnailMessage } from '../../index-99ab01f6.js';
-import { M as MessageStatus } from '../../index-0aa8cbad.js';
-import EmojiReactions from '../../ui/EmojiReactions.js';
-import TextMessageItemBody from '../../ui/TextMessageItemBody.js';
-import OGMessageItemBody from '../../ui/OGMessageItemBody.js';
-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 { u as useMediaQueryContext } from '../../MediaQueryContext-e5b401d0.js';
-import { u as useLongPress } from '../../useLongPress-6d0b6619.js';
-import { M as MobileMenu } from '../../index-35696958.js';
-import { R as Role } from '../../types-28e84810.js';
-import { u as useDirtyGetMentions } from '../../useDirtyGetMentions-2df51ec3.js';
-import { g as getIsReactionEnabled } from '../../ChannelProvider-1dc36682.js';
-import '../../index-ff8f2f61.js';
-import '../../stringSet-e9bb0333.js';
-import '../../color-ea3bf5b8.js';
-import 'prop-types';
-import '../../ui/Modal.js';
-import 'react-dom';
-import '../../index-44c86e58.js';
-import '../../ui/Button.js';
-import '../../ui/Icon.js';
-import '../../ui/IconButton.js';
-import '../../utils/message/getOutgoingMessageState.js';
-import '../../ui/ImageRenderer.js';
-import '../../uuid-8b344dd2.js';
-import '@sendbird/chat';
-import '../../topics-0b30f52b.js';
-import '@sendbird/chat/groupChannel';
-import '@sendbird/chat/message';
-import '../../consts-44eaef6b.js';
-import '../../withSendbird.js';
-import '../../const-7c266a95.js';
-import '../../compareIds-367bb030.js';
-import '../../resolvedReplyType-6bb8f548.js';
-import 'dompurify';
-import '../../consts-a0834b70.js';
-import '../../consts-3a33a0a8.js';
-import '../../consts-b3274b3d.js';
-import '../../tokenize-d12690c3.js';
-import '../../index.module-d24badee.js';
-import '../../ui/SortByRow.js';
-import '../../sendbirdSelectors.js';
-import '../../utils-05aa9060.js';
-import '../../ui/ReactionButton.js';
-import '../../ui/Loader.js';
-import '../../index-7e5538e6.js';
-import '../../index-3f8e1a51.js';
-import '../../ui/ReactionBadge.js';
-import '../../ui/BottomSheet.js';
-import '../../ui/UserListItem.js';
-import '../../ui/MutedAvatarOverlay.js';
-import '../../ui/Checkbox.js';
-import '../../ui/Tooltip.js';
-import '../../ui/TooltipWrapper.js';
-import '../../Message/context.js';
-import '../../index-a31ee68d.js';
-import '../../ui/MentionLabel.js';
-import '../../ui/LinkLabel.js';
-import '../../ui/TextButton.js';
-import '../../ui/ProgressBar.js';
-import '../../VoicePlayer/useVoicePlayer.js';
-import '../../index-02ceed0a.js';
-import '../../VoiceRecorder/context.js';
-import '../../ui/PlaybackTime.js';
-
-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 {
-    isMobile
-  } = useMediaQueryContext();
-  const {
-    dateLocale
-  } = useLocalization();
-  const {
-    config
-  } = useSendbirdStateContext();
-  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);
-  const isOgMessageEnabledInGroupChannel = channel.isGroupChannel() && config.groupChannel.enableOgtag;
-
-  // Mobile
-  const mobileMenuRef = useRef(null);
-  const [showMobileMenu, setShowMobileMenu] = useState(false);
-  const longPress = useLongPress({
-    onLongPress: () => {
-      if (isMobile) {
-        setShowMobileMenu(true);
-      }
-    }
-  }, {
-    shouldPreventDefault: false
-  });
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: `sendbird-thread-list-item-content ${className} ${isByMe ? 'outgoing' : 'incoming'}`,
-    ref: mobileMenuRef
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: `sendbird-thread-list-item-content__left ${isReactionEnabledInChannel ? 'use-reaction' : ''} ${isByMe ? 'outgoing' : 'incoming'}`
-  }, !isByMe && !chainBottom && /*#__PURE__*/React__default.createElement(ContextMenu, {
-    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: (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.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 && !isMobile && /*#__PURE__*/React__default.createElement("div", {
-    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,
-    message: message,
-    isByMe: isByMe,
-    replyType: replyType,
-    disabled: disabled,
-    showEdit: showEdit,
-    showRemove: showRemove,
-    resendMessage: resendMessage,
-    setSupposedHover: setSupposedHover,
-    onReplyInThread: onReplyInThread
-  }), isReactionEnabledInChannel && /*#__PURE__*/React__default.createElement(MessageItemReactionMenu, {
-    className: "sendbird-thread-list-item-content-menu__reaction-menu",
-    message: message,
-    userId: userId,
-    spaceFromTrigger: {},
-    emojiContainer: emojiContainer,
-    toggleReaction: toggleReaction,
-    setSupposedHover: setSupposedHover
-  }))), /*#__PURE__*/React__default.createElement("div", _extends({
-    className: "sendbird-thread-list-item-content__middle"
-  }, isMobile ? _objectSpread2({}, longPress) : {}), !isByMe && !chainTop && !useReplying && /*#__PURE__*/React__default.createElement(Label, {
-    className: "sendbird-thread-list-item-content__middle__sender-name",
-    type: LabelTypography.CAPTION_2,
-    color: 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) || getSenderName(message)
-  // TODO: Divide getting profileUrl logic to utils
-  ), /*#__PURE__*/React__default.createElement("div", {
-    className: getClassName(['sendbird-thread-list-item-content__middle__body-container'])
-  }, isByMe && !chainBottom && /*#__PURE__*/React__default.createElement("div", {
-    className: getClassName(['sendbird-thread-list-item-content__middle__body-container__created-at', 'left', supposedHoverClassName])
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-thread-list-item-content__middle__body-container__created-at__component-container"
-  }, /*#__PURE__*/React__default.createElement(MessageStatus, {
-    message: message,
-    channel: channel
-  }))), isOgMessageEnabledInGroupChannel && isOGMessage(message) ? /*#__PURE__*/React__default.createElement(OGMessageItemBody, {
-    className: "sendbird-thread-list-item-content__middle__message-item-body",
-    message: message,
-    isByMe: isByMe,
-    isMentionEnabled: isMentionEnabled,
-    isReactionEnabled: isReactionEnabledInChannel
-  }) : isTextMessage(message) && /*#__PURE__*/React__default.createElement(TextMessageItemBody, {
-    className: "sendbird-thread-list-item-content__middle__message-item-body",
-    message: message,
-    isByMe: isByMe,
-    isMentionEnabled: isMentionEnabled,
-    isReactionEnabled: isReactionEnabledInChannel
-  }), isVoiceMessage(message) && /*#__PURE__*/React__default.createElement(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
-  }), getUIKitMessageType(message) === messageTypes.FILE && /*#__PURE__*/React__default.createElement(FileMessageItemBody, {
-    className: "sendbird-thread-list-item-content__middle__message-item-body",
-    message: message,
-    isByMe: isByMe,
-    isReactionEnabled: isReactionEnabledInChannel,
-    truncateLimit: isByMe ? 18 : 14
-  }), isThumbnailMessage(message) && /*#__PURE__*/React__default.createElement(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'
-    }
-  }), getUIKitMessageType(message) === messageTypes.UNKNOWN && /*#__PURE__*/React__default.createElement(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.createElement("div", {
-    className: getClassName(['sendbird-thread-list-item-content-reactions', !isByMe || isThumbnailMessage(message) || isOgMessageEnabledInGroupChannel && isOGMessage(message) ? '' : 'primary'])
-  }, /*#__PURE__*/React__default.createElement(EmojiReactions, {
-    userId: userId,
-    message: message,
-    channel: channel,
-    isByMe: isByMe,
-    emojiContainer: emojiContainer,
-    memberNicknamesMap: nicknamesMap,
-    toggleReaction: toggleReaction
-  })), !isByMe && !chainBottom && /*#__PURE__*/React__default.createElement(Label, {
-    className: getClassName(['sendbird-thread-list-item-content__middle__body-container__created-at', 'right', supposedHoverClassName]),
-    type: LabelTypography.CAPTION_3,
-    color: LabelColors.ONBACKGROUND_2
-  }, 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 ${chainTop ? 'chain-top' : ''} ${isByMe ? 'outgoing' : 'incoming'}`
-  }, !isByMe && !isMobile && /*#__PURE__*/React__default.createElement("div", {
-    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,
-    userId: userId,
-    spaceFromTrigger: {},
-    emojiContainer: emojiContainer,
-    toggleReaction: toggleReaction,
-    setSupposedHover: setSupposedHover
-  }), /*#__PURE__*/React__default.createElement(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.createElement(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
-  } = 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 = getIsReactionEnabled({
-    globalLevel: isReactionEnabled,
-    isSuper: currentChannel.isSuper,
-    isBroadcast: currentChannel.isBroadcast
-  });
-
-  // Move to message
-  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(() => {
-    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 = useRef(null);
-  const [mentionNickname, setMentionNickname] = useState('');
-  const [mentionedUsers, setMentionedUsers] = useState([]);
-  const [mentionedUserIds, setMentionedUserIds] = useState([]);
-  const [messageInputEvent, setMessageInputEvent] = useState(null);
-  const [selectedUser, setSelectedUser] = useState(null);
-  const [mentionSuggestedUsers, setMentionSuggestedUsers] = useState([]);
-  const displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !isMuted && !(isChannelFrozen && !(currentChannel.myRole === Role.OPERATOR));
-  const mentionNodes = useDirtyGetMentions({
-    ref: editMessageInputRef
-  }, {
-    logger
-  });
-  const ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount);
-  useEffect(() => {
-    setMentionedUsers(mentionedUsers.filter(_ref2 => {
-      let {
-        userId
-      } = _ref2;
-      const i = mentionedUserIds.indexOf(userId);
-      if (i < 0) {
-        return false;
-      } else {
-        mentionedUserIds.splice(i, 1);
-        return true;
-      }
-    }));
-  }, [mentionedUserIds]);
-
-  // edit input
-  const disabled = !(threadListState === ThreadListStateTypes.INITIALIZED) || !isOnline || isMuted || isChannelFrozen;
-
-  // memorize
-  const MemorizedSeparator = 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.createElement(React__default.Fragment, null, displaySuggestedMentionList && /*#__PURE__*/React__default.createElement(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.createElement(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 === MessageInputKeys.Enter && ableMention || e.key === MessageInputKeys.ArrowUp || e.key === MessageInputKeys.ArrowDown)) {
-          setMessageInputEvent(e);
-          return true;
-        }
-        return false;
-      }
-    }));
-  }
-  return /*#__PURE__*/React__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.createElement(DateSeparator, null, /*#__PURE__*/React__default.createElement(Label, {
-    type: LabelTypography.CAPTION_2,
-    color: LabelColors.ONBACKGROUND_2
-  }, format(message === null || message === void 0 ? void 0 : message.createdAt, 'MMM dd, yyyy', {
-    locale: dateLocale
-  })))), /*#__PURE__*/React__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.createElement(RemoveMessage, {
-    message: message,
-    onCancel: () => setShowRemove(false)
-  }), showFileViewer && /*#__PURE__*/React__default.createElement(FileViewer, {
-    message: message,
-    isByMe: (message === null || message === void 0 ? void 0 : (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.userId) === userId,
-    onClose: () => setShowFileViewer(false),
-    onDelete: () => {
-      deleteMessage(message);
-      setShowFileViewer(false);
-    }
-  }));
-}
-
-export { ThreadListItem as default };
-//# sourceMappingURL=ThreadListItem.js.map