@sendbird/uikit-react 3.14.14 → 3.15.0

package/cjs/Thread/components/ThreadListItem.js

@@ -1,49 +1,41 @@
 'use strict';
 
-var _tslib = require('../../chunks/bundle-zlHcIQSu.js');
+var _tslib = require('../../chunks/bundle-OA_02RkB.js');
 var React = require('react');
-var index$1 = require('../../chunks/bundle-DYB6uKmy.js');
-var LocalizationContext = require('../../chunks/bundle-DuU5B5-_.js');
+var index$1 = require('../../chunks/bundle-BHsoN10h.js');
+var LocalizationContext = require('../../chunks/bundle-BF4c8fbo.js');
 var ui_DateSeparator = require('../../ui/DateSeparator.js');
-var ui_Label = require('../../chunks/bundle-9sHOJFhF.js');
-var RemoveMessageModal = require('../../chunks/bundle-_aqTj6vH.js');
+var ui_Label = require('../../chunks/bundle-BbqSbmfL.js');
+var RemoveMessageModal = require('../../chunks/bundle-rZ3oQPkt.js');
 var ui_FileViewer = require('../../ui/FileViewer.js');
 var Thread_context = require('../context.js');
 var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
-var SuggestedMentionList = require('../../chunks/bundle-BA6o2UkA.js');
+var SuggestedMentionList = require('../../chunks/bundle-TuOW3oY9.js');
 var ui_MessageInput = require('../../ui/MessageInput.js');
 var Thread_context_types = require('../context/types.js');
-var _const = require('../../chunks/bundle-Bd8wa_YD.js');
-var ui_ContextMenu = require('../../chunks/bundle-Bx6GgprJ.js');
-var ui_Avatar = require('../../chunks/bundle-tb5ZQqGF.js');
-var UserProfileContext = require('../../chunks/bundle-CuSZh9iB.js');
-var ui_UserProfile = require('../../ui/UserProfile.js');
+var _const = require('../../chunks/bundle-CGd7wrVy.js');
+var ui_ContextMenu = require('../../chunks/bundle-28nEChz7.js');
 var ui_MessageItemReactionMenu = require('../../ui/MessageItemReactionMenu.js');
-var index = require('../../chunks/bundle-D6pcLavL.js');
-var ui_MessageStatus = require('../../chunks/bundle-CWtuu9g_.js');
+var index = require('../../chunks/bundle-WD84KbuC.js');
+var ui_MessageStatus = require('../../chunks/bundle-Dz9Mfb3J.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('../../chunks/bundle-G08Qqz-z.js');
-var useLongPress = require('../../chunks/bundle-LPFcZlPs.js');
+var MediaQueryContext = require('../../chunks/bundle-nknsRSk4.js');
+var useLongPress = require('../../chunks/bundle-CBKc82WZ.js');
 var ui_MobileMenu = require('../../ui/MobileMenu.js');
-var useFileInfoListWithUploaded = require('../../chunks/bundle-DBQIzqeh.js');
-var utils = require('../../chunks/bundle-Bcia1ZjE.js');
-var MessageMenu = require('../../chunks/bundle-CbsLlCEx.js');
-var useElementObserver = require('../../chunks/bundle-0R_EzdU1.js');
-var types = require('../../chunks/bundle-D44WlUuQ.js');
+var useFileInfoListWithUploaded = require('../../chunks/bundle-4rb5E8TZ.js');
+var utils = require('../../chunks/bundle-CGFsndyY.js');
+var MessageMenu = require('../../chunks/bundle-3WL4zWhZ.js');
+var useElementObserver = require('../../chunks/bundle-BXcP3420.js');
+var index$2 = require('../../chunks/bundle-CMUWjEfD.js');
+var types = require('../../chunks/bundle-D2t1feVx.js');
 var Message_hooks_useDirtyGetMentions = require('../../Message/hooks/useDirtyGetMentions.js');
-var getIsReactionEnabled = require('../../chunks/bundle-C0PJCoX9.js');
-var resolvedReplyType = require('../../chunks/bundle-BanlmTip.js');
-require('../../chunks/bundle-Cru9LFqc.js');
-require('../../chunks/bundle-BrQCTN2E.js');
-require('../../chunks/bundle-D7T59omO.js');
-require('../../chunks/bundle-oluXnecE.js');
-require('../../chunks/bundle-BDv_id6L.js');
+var getIsReactionEnabled = require('../../chunks/bundle-oJ65xs4u.js');
+var resolvedReplyType = require('../../chunks/bundle-XzNiXnxy.js');
+require('../../chunks/bundle-OYuKPaGg.js');
+require('../../chunks/bundle-DrZRl1QV.js');
+require('../../chunks/bundle-CGMxhied.js');
+require('../../chunks/bundle-DpuLDKUp.js');
+require('../../chunks/bundle-CWvufVBn.js');
 require('react-dom');
 require('../../ui/IconButton.js');
 require('../../ui/Button.js');
@@ -52,77 +44,92 @@ require('@sendbird/uikit-tools');
 require('../../withSendbird.js');
 require('css-vars-ponyfill');
 require('@sendbird/chat');
-require('../../chunks/bundle-DPBDeBk_.js');
+require('../../chunks/bundle-BBhf6nJ7.js');
 require('@sendbird/chat/openChannel');
 require('@sendbird/chat/groupChannel');
-require('../../chunks/bundle-DdlhyKeM.js');
-require('../../chunks/bundle-sPjQ2Pux.js');
-require('../../chunks/bundle-Ci7n7_a7.js');
-require('../../chunks/bundle-7qQ_Gcke.js');
-require('../../chunks/bundle-DXrsEC9G.js');
-require('../../chunks/bundle-DyxpS7wT.js');
-require('../../chunks/bundle-CYDXrfgn.js');
-require('../../chunks/bundle-CM3V3Pp2.js');
+require('../../chunks/bundle-CUfjpjxH.js');
+require('../../chunks/bundle-CLuwJZa0.js');
+require('../../chunks/bundle-BitLUCB9.js');
+require('../../chunks/bundle-6g9okweI.js');
+require('../../chunks/bundle-CG0iiNPb.js');
+require('../../ui/ImageRenderer.js');
+require('../../chunks/bundle-DnCTq-wS.js');
+require('../../chunks/bundle-DL_JJVfl.js');
+require('../../chunks/bundle-D-gTHhxN.js');
+require('../../chunks/bundle-BZsDNwQP.js');
+require('../../chunks/bundle-CNzeT2IO.js');
 require('@sendbird/chat/message');
 require('../../utils/message/getOutgoingMessageState.js');
-require('../../chunks/bundle-DsQnVud7.js');
-require('../../chunks/bundle-DWcUSvLK.js');
-require('../../chunks/bundle-DmEOZijP.js');
-require('../../chunks/bundle-Cn9zbty_.js');
-require('../../chunks/bundle-BG2TJKN7.js');
-require('../../chunks/bundle-DMzUOBjy.js');
+require('../../chunks/bundle-Br7K8gnB.js');
+require('../../chunks/bundle-W5xH9nry.js');
+require('../../chunks/bundle-CZfupcfw.js');
+require('../../chunks/bundle-CW3LpHGq.js');
+require('../../chunks/bundle-BFvWCa7e.js');
+require('../../chunks/bundle-B7eeXNH_.js');
+require('../../chunks/bundle-B4RW5nKM.js');
 require('dompurify');
-require('../../chunks/bundle-Cxjomv9D.js');
-require('../../chunks/bundle-CS3WPoOW.js');
-require('../../chunks/bundle-wbUo2tVB.js');
-require('../../chunks/bundle-qaP5GJsM.js');
+require('../../chunks/bundle-D5OeOuGr.js');
+require('../../chunks/bundle-aUuw1Quf.js');
+require('../../chunks/bundle-D7Z6jlhn.js');
+require('../../chunks/bundle-EMecEM9W.js');
 require('../../ui/SortByRow.js');
-require('../../ui/ImageRenderer.js');
-require('../../chunks/bundle-JIWumkkO.js');
-require('../../sendbirdSelectors.js');
 require('../../ui/ReactionButton.js');
 require('../../ui/Loader.js');
-require('../../chunks/bundle-B7Zg-Tkz.js');
-require('../../chunks/bundle-DgDbXNwZ.js');
+require('../../chunks/bundle-Cs8pPzsO.js');
+require('../../chunks/bundle-BEkAi09X.js');
 require('../../ui/ReactionBadge.js');
 require('../../ui/BottomSheet.js');
 require('../../ui/UserListItem.js');
 require('../../ui/MutedAvatarOverlay.js');
 require('../../ui/Checkbox.js');
+require('../../ui/UserProfile.js');
+require('../../sendbirdSelectors.js');
 require('../../ui/Tooltip.js');
 require('../../ui/TooltipWrapper.js');
 require('../../Message/context.js');
-require('../../chunks/bundle-3UY57nvm.js');
+require('../../ui/OGMessageItemBody.js');
+require('../../chunks/bundle-CfvB3Kxi.js');
 require('../../ui/MentionLabel.js');
 require('../../ui/LinkLabel.js');
+require('../../ui/TextMessageItemBody.js');
+require('../../ui/FileMessageItemBody.js');
 require('../../ui/TextButton.js');
-require('../../chunks/bundle-C-8JkV5q.js');
+require('../../ui/VoiceMessageItemBody.js');
 require('../../ui/ProgressBar.js');
 require('../../VoicePlayer/useVoicePlayer.js');
 require('../../ui/PlaybackTime.js');
+require('../../ui/ThumbnailMessageItemBody.js');
+require('../../chunks/bundle-CJeGZVb-.js');
+require('../../ui/UnknownMessageItemBody.js');
+require('../../ui/TemplateMessageItemBody.js');
+require('../../chunks/bundle-KO2rkYYZ.js');
+require('../../ui/FallbackTemplateMessageItemBody.tsx.js');
+require('../../ui/LoadingTemplateMessageItemBody.tsx.js');
+require('../../ui/MessageFeedbackFailedModal.js');
+require('../../chunks/bundle-3EldXmJH.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-function ThreadListItemContent(_a) {
+function ThreadListItemContent(props) {
     var _this = this;
-    var _b, _c, _d, _e, _f;
-    var className = _a.className, userId = _a.userId, channel = _a.channel, message = _a.message, _g = _a.chainTop, chainTop = _g === void 0 ? false : _g, _h = _a.chainBottom, chainBottom = _h === void 0 ? false : _h, _j = _a.isMentionEnabled, isMentionEnabled = _j === void 0 ? false : _j, _k = _a.isReactionEnabled, isReactionEnabled = _k === void 0 ? false : _k, _l = _a.disableQuoteMessage, disableQuoteMessage = _l === void 0 ? false : _l, replyType = _a.replyType, nicknamesMap = _a.nicknamesMap, emojiContainer = _a.emojiContainer, showEdit = _a.showEdit, showRemove = _a.showRemove, showFileViewer = _a.showFileViewer, resendMessage = _a.resendMessage, toggleReaction = _a.toggleReaction, onReplyInThread = _a.onReplyInThread, _m = _a.renderEmojiMenu, renderEmojiMenu = _m === void 0 ? function (props) { return React__default.default.createElement(ui_MessageItemReactionMenu.MessageEmojiMenu, _tslib.__assign({}, props)); } : _m, _o = _a.renderMessageMenu, renderMessageMenu = _o === void 0 ? function (props) { return React__default.default.createElement(MessageMenu.MessageMenu, _tslib.__assign({}, props)); } : _o;
-    var messageTypes = index.getUIKitMessageTypes();
+    var _a, _b, _c;
+    // Internal props
+    var className = props.className, userId = props.userId, channel = props.channel, message = props.message, _d = props.chainTop, chainTop = _d === void 0 ? false : _d, _e = props.chainBottom, chainBottom = _e === void 0 ? false : _e, _f = props.isReactionEnabled, isReactionEnabled = _f === void 0 ? false : _f, _g = props.disableQuoteMessage, disableQuoteMessage = _g === void 0 ? false : _g, replyType = props.replyType, nicknamesMap = props.nicknamesMap, emojiContainer = props.emojiContainer, showEdit = props.showEdit, showRemove = props.showRemove, showFileViewer = props.showFileViewer, resendMessage = props.resendMessage, toggleReaction = props.toggleReaction, onReplyInThread = props.onReplyInThread;
+    // Public props for customization
+    var _h = utils.deleteNullish(props), _j = _h.renderSenderProfile, renderSenderProfile = _j === void 0 ? function (props) { return React__default.default.createElement(index$2.MessageProfile, _tslib.__assign({}, props)); } : _j, _k = _h.renderMessageBody, renderMessageBody = _k === void 0 ? function (props) { return React__default.default.createElement(index$2.MessageBody, _tslib.__assign({}, props)); } : _k, _l = _h.renderMessageHeader, renderMessageHeader = _l === void 0 ? function (props) { return React__default.default.createElement(index$2.MessageHeader, _tslib.__assign({}, props)); } : _l, _m = _h.renderMessageMenu, renderMessageMenu = _m === void 0 ? function (props) { return React__default.default.createElement(MessageMenu.MessageMenu, _tslib.__assign({}, props)); } : _m, _o = _h.renderEmojiMenu, renderEmojiMenu = _o === void 0 ? function () { return React__default.default.createElement(ui_MessageItemReactionMenu.MessageEmojiMenu, _tslib.__assign({}, props)); } : _o, _p = _h.renderEmojiReactions, renderEmojiReactions = _p === void 0 ? function (props) { return React__default.default.createElement(ui_EmojiReactions, _tslib.__assign({}, props)); } : _p, _q = _h.renderMobileMenuOnLongPress, renderMobileMenuOnLongPress = _q === void 0 ? function (props) { return React__default.default.createElement(ui_MobileMenu.MobileMenu, _tslib.__assign({}, props)); } : _q;
     var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
     var dateLocale = LocalizationContext.useLocalization().dateLocale;
-    var _p = (useSendbirdStateContext.useSendbirdStateContext === null || useSendbirdStateContext.useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext.useSendbirdStateContext()) || {}, config = _p.config, eventHandlers = _p.eventHandlers;
+    var _r = (useSendbirdStateContext.useSendbirdStateContext === null || useSendbirdStateContext.useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext.useSendbirdStateContext()) || {}, config = _r.config, eventHandlers = _r.eventHandlers;
     var logger = config.logger;
-    var onPressUserProfileHandler = (_b = eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.reaction) === null || _b === void 0 ? void 0 : _b.onPressUserProfile;
+    var onPressUserProfileHandler = (_a = eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.reaction) === null || _a === void 0 ? void 0 : _a.onPressUserProfile;
     var isMenuMounted = useElementObserver.useElementObserver("#".concat(ui_ContextMenu.getObservingId(message.messageId), ".").concat(ui_ContextMenu.MENU_OBSERVING_CLASS_NAME), [
         document.getElementById(ui_ContextMenu.MENU_ROOT_ID),
         document.getElementById(ui_ContextMenu.EMOJI_MENU_ROOT_ID),
     ]);
-    var _q = React.useContext(UserProfileContext.UserProfileContext), disableUserProfile = _q.disableUserProfile, renderUserProfile = _q.renderUserProfile;
-    var _r = Thread_context.useThreadContext(), deleteMessage = _r.deleteMessage, onBeforeDownloadFileMessage = _r.onBeforeDownloadFileMessage;
-    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))
+    var _s = Thread_context.useThreadContext(), deleteMessage = _s.deleteMessage, onBeforeDownloadFileMessage = _s.onBeforeDownloadFileMessage, filterEmojiCategoryIds = _s.filterEmojiCategoryIds;
+    var isByMe = (userId === ((_b = message === null || message === void 0 ? void 0 : message.sender) === null || _b === void 0 ? void 0 : _b.userId))
         || ((message === null || message === void 0 ? void 0 : message.sendingStatus) === 'pending')
         || ((message === null || message === void 0 ? void 0 : message.sendingStatus) === 'failed');
     var useReplying = !!((replyType === 'QUOTE_REPLY' || replyType === 'THREAD')
@@ -133,7 +140,7 @@ function ThreadListItemContent(_a) {
     var isOgMessageEnabledInGroupChannel = channel.isGroupChannel() && config.groupChannel.enableOgtag;
     // Mobile
     var mobileMenuRef = React.useRef(null);
-    var _s = React.useState(false), showMobileMenu = _s[0], setShowMobileMenu = _s[1];
+    var _t = React.useState(false), showMobileMenu = _t[0], setShowMobileMenu = _t[1];
     var longPress = useLongPress.useLongPress({
         onLongPress: function () {
             if (isMobile) {
@@ -151,22 +158,7 @@ function ThreadListItemContent(_a) {
     var statefulFileInfoList = useFileInfoListWithUploaded.useFileInfoListWithUploaded(message);
     return (React__default.default.createElement("div", { className: utils.classnames('sendbird-thread-list-item-content', className, isByMe ? 'outgoing' : 'incoming'), ref: mobileMenuRef },
         React__default.default.createElement("div", { className: utils.classnames('sendbird-thread-list-item-content__left', isReactionEnabledInChannel && 'use-reaction', isByMe ? 'outgoing' : 'incoming') },
-            (!isByMe && !chainBottom) && (React__default.default.createElement(ui_ContextMenu.ContextMenu, { menuTrigger: function (toggleDropdown) {
-                    var _a, _b, _c;
-                    return (React__default.default.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 (renderUserProfile
-                    ? renderUserProfile({
-                        user: message === null || message === void 0 ? void 0 : message.sender,
-                        close: closeDropdown,
-                        currentUserId: userId,
-                        avatarRef: avatarRef,
-                    })
-                    : (React__default.default.createElement(ui_ContextMenu.MenuItems, { parentRef: avatarRef, parentContainRef: avatarRef, closeDropdown: closeDropdown, style: { paddingTop: '0px', paddingBottom: '0px' } },
-                        React__default.default.createElement(ui_UserProfile, { user: message === null || message === void 0 ? void 0 : message.sender, onSuccess: closeDropdown })))); } })),
+            (!isByMe && !chainBottom) && (renderSenderProfile(_tslib.__assign(_tslib.__assign({}, props), { className: 'sendbird-thread-list-item-content__left__avatar', isByMe: isByMe, displayThreadReplies: false }))),
             (isByMe && !isMobile) && (React__default.default.createElement("div", { className: utils.classnames('sendbird-thread-list-item-content-menu', isReactionEnabledInChannel && 'use-reaction', isByMe ? 'outgoing' : 'incoming', supposedHoverClassName) },
                 renderMessageMenu({
                     className: 'sendbird-thread-list-item-content-menu__normal-menu',
@@ -186,34 +178,59 @@ function ThreadListItemContent(_a) {
                     userId: userId,
                     emojiContainer: emojiContainer,
                     toggleReaction: toggleReaction,
+                    filterEmojiCategoryIds: filterEmojiCategoryIds,
                 })))))),
         React__default.default.createElement("div", _tslib.__assign({ className: "sendbird-thread-list-item-content__middle" }, (isMobile) ? _tslib.__assign({}, longPress) : {}),
-            (!isByMe && !chainTop && !useReplying) && (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
-            )),
+            (!isByMe && !chainTop && !useReplying) && renderMessageHeader(props),
             React__default.default.createElement("div", { className: index.getClassName(['sendbird-thread-list-item-content__middle__body-container']) },
                 (isByMe && !chainBottom) && (React__default.default.createElement("div", { className: index.getClassName(['sendbird-thread-list-item-content__middle__body-container__created-at', 'left', supposedHoverClassName]) },
                     React__default.default.createElement("div", { className: "sendbird-thread-list-item-content__middle__body-container__created-at__component-container" },
                         React__default.default.createElement(ui_MessageStatus.MessageStatus, { message: message, channel: channel })))),
-                isOgMessageEnabledInGroupChannel && index.isOGMessage(message)
-                    ? (React__default.default.createElement(ui_OGMessageItemBody, { className: "sendbird-thread-list-item-content__middle__message-item-body", message: message, isByMe: isByMe, isMentionEnabled: isMentionEnabled, isReactionEnabled: isReactionEnabledInChannel, isMarkdownEnabled: config.groupChannel.enableMarkdownForUserMessage })) : index.isTextMessage(message) && (React__default.default.createElement(ui_TextMessageItemBody, { className: "sendbird-thread-list-item-content__middle__message-item-body", message: message, isByMe: isByMe, isMentionEnabled: isMentionEnabled, isReactionEnabled: isReactionEnabledInChannel, isMarkdownEnabled: config.groupChannel.enableMarkdownForUserMessage })),
-                index.isVoiceMessage(message) && (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) && (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, onBeforeDownloadFileMessage: onBeforeDownloadFileMessage })),
-                index.isMultipleFilesMessage(message) && (React__default.default.createElement(useFileInfoListWithUploaded.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__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) && (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) && (React__default.default.createElement("div", { className: index.getClassName([
+                renderMessageBody({
+                    className: 'sendbird-thread-list-item-content__middle__message-item-body',
+                    message: message,
+                    channel: channel,
+                    showFileViewer: showFileViewer,
+                    mouseHover: false,
+                    isMobile: isMobile,
+                    config: config,
+                    isReactionEnabledInChannel: isReactionEnabledInChannel,
+                    isByMe: isByMe,
+                    onBeforeDownloadFileMessage: onBeforeDownloadFileMessage,
+                    /** This is for internal customization to keep the legacy */
+                    customSubcomponentsProps: {
+                        ThumbnailMessageItemBody: {
+                            style: {
+                                width: isMobile ? '100%' : '200px',
+                                height: '148px',
+                            },
+                        },
+                        MultipleFilesMessageItemBody: {
+                            threadMessageKindKey: threadMessageKindKey,
+                            statefulFileInfoList: statefulFileInfoList,
+                        },
+                    },
+                    // TODO: Support these props in Thread
+                    // onMessageHeightChange,
+                    // onTemplateMessageRenderedCallback,
+                }),
+                (isReactionEnabledInChannel && ((_c = message === null || message === void 0 ? void 0 : message.reactions) === null || _c === void 0 ? void 0 : _c.length) > 0) && (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',
-                    ]) },
-                    React__default.default.createElement(ui_EmojiReactions, { userId: userId, message: message, channel: channel, isByMe: isByMe, emojiContainer: emojiContainer, memberNicknamesMap: nicknamesMap, toggleReaction: toggleReaction, onPressUserProfile: onPressUserProfileHandler }))),
+                    ]) }, renderEmojiReactions({
+                    userId: userId,
+                    message: message,
+                    channel: channel,
+                    isByMe: isByMe,
+                    emojiContainer: emojiContainer,
+                    memberNicknamesMap: nicknamesMap,
+                    toggleReaction: toggleReaction,
+                    onPressUserProfile: onPressUserProfileHandler,
+                    filterEmojiCategoryIds: filterEmojiCategoryIds,
+                }))),
                 (!isByMe && !chainBottom) && (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,
                 }))))),
@@ -224,6 +241,7 @@ function ThreadListItemContent(_a) {
                 userId: userId,
                 emojiContainer: emojiContainer,
                 toggleReaction: toggleReaction,
+                filterEmojiCategoryIds: filterEmojiCategoryIds,
             })),
             renderMessageMenu({
                 className: 'sendbird-thread-list-item-content-menu__normal-menu',
@@ -236,9 +254,24 @@ function ThreadListItemContent(_a) {
                 onReplyInThread: onReplyInThread,
                 deleteMessage: deleteMessage,
             })))),
-        showMobileMenu && (React__default.default.createElement(ui_MobileMenu.MobileMenu, { parentRef: mobileMenuRef, channel: channel, message: message, userId: userId, replyType: replyType, hideMenu: function () {
+        showMobileMenu && (renderMobileMenuOnLongPress({
+            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, onDownloadClick: function (e) { return _tslib.__awaiter(_this, void 0, void 0, function () {
+            },
+            isReactionEnabled: isReactionEnabled,
+            isByMe: isByMe,
+            emojiContainer: emojiContainer,
+            showEdit: showEdit,
+            showRemove: showRemove,
+            toggleReaction: toggleReaction,
+            isOpenedFromThread: true,
+            deleteMessage: deleteMessage,
+            onDownloadClick: function (e) { return _tslib.__awaiter(_this, void 0, void 0, function () {
                 var allowDownload, err_1;
                 var _a, _b;
                 return _tslib.__generator(this, function (_c) {
@@ -264,23 +297,24 @@ function ThreadListItemContent(_a) {
                         case 4: return [2 /*return*/];
                     }
                 });
-            }); } }))));
+            }); },
+        }))));
 }
 
-function ThreadListItem(_a) {
+function ThreadListItem(props) {
     var _this = this;
-    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, renderEmojiMenu = _a.renderEmojiMenu, renderMessageMenu = _a.renderMessageMenu;
-    var _f = useSendbirdStateContext.useSendbirdStateContext(), stores = _f.stores, config = _f.config;
+    var _a, _b, _c, _d;
+    var className = props.className, message = props.message, chainTop = props.chainTop, chainBottom = props.chainBottom, hasSeparator = props.hasSeparator, renderCustomSeparator = props.renderCustomSeparator, handleScroll = props.handleScroll;
+    var _e = useSendbirdStateContext.useSendbirdStateContext(), stores = _e.stores, config = _e.config;
     var isOnline = config.isOnline, userMention = config.userMention, logger = config.logger, groupChannel = config.groupChannel;
-    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 userId = (_b = (_a = stores === null || stores === void 0 ? void 0 : stores.userStore) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.userId;
+    var _f = LocalizationContext.useLocalization(), dateLocale = _f.dateLocale, stringSet = _f.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, onBeforeDownloadFileMessage = threadContext.onBeforeDownloadFileMessage;
     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 _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 isReactionEnabled = getIsReactionEnabled.getIsReactionEnabled({
         channel: currentChannel,
         config: config,
@@ -298,15 +332,15 @@ function ThreadListItem(_a) {
     // 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]);
+    }, [showEdit, (_c = message === null || message === void 0 ? void 0 : message.reactions) === null || _c === void 0 ? void 0 : _c.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 _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
@@ -398,9 +432,9 @@ function ThreadListItem(_a) {
     return (React__default.default.createElement("div", { ref: messageScrollRef, className: utils.classnames('sendbird-thread-list-item', className), "data-testid": "sendbird-thread-list-item" },
         hasSeparator && (message === null || message === void 0 ? void 0 : message.createdAt) && (MemorizedSeparator || (React__default.default.createElement(ui_DateSeparator, null,
             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, stringSet.DATE_FORMAT__THREAD_LIST__DATE_SEPARATOR, { locale: dateLocale }))))),
-        React__default.default.createElement(ThreadListItemContent, { userId: userId, channel: currentChannel, message: message, chainTop: chainTop, chainBottom: chainBottom, isReactionEnabled: isReactionEnabled, isMentionEnabled: isMentionEnabled, disableQuoteMessage: true, replyType: replyType, nicknamesMap: nicknamesMap, emojiContainer: emojiContainer, resendMessage: resendMessage, showRemove: setShowRemove, showFileViewer: setShowFileViewer, toggleReaction: toggleReaction, showEdit: setShowEdit, renderEmojiMenu: renderEmojiMenu, renderMessageMenu: renderMessageMenu }),
+        React__default.default.createElement(ThreadListItemContent, _tslib.__assign({}, props, { userId: userId, channel: currentChannel, message: message, chainTop: chainTop, chainBottom: chainBottom, isReactionEnabled: isReactionEnabled, disableQuoteMessage: true, replyType: replyType, nicknamesMap: nicknamesMap, emojiContainer: emojiContainer, resendMessage: resendMessage, showRemove: setShowRemove, showFileViewer: setShowFileViewer, toggleReaction: toggleReaction, showEdit: setShowEdit })),
         showRemove && (React__default.default.createElement(RemoveMessageModal.RemoveMessage, { message: message, onCancel: function () { return setShowRemove(false); } })),
-        showFileViewer && (React__default.default.createElement(ui_FileViewer.default, { 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 () {
+        showFileViewer && (React__default.default.createElement(ui_FileViewer.default, { message: message, isByMe: ((_d = message === null || message === void 0 ? void 0 : message.sender) === null || _d === void 0 ? void 0 : _d.userId) === userId, onClose: function () { return setShowFileViewer(false); }, onDelete: function () {
                 deleteMessage(message);
                 setShowFileViewer(false);
             }, onDownloadClick: function (e) { return _tslib.__awaiter(_this, void 0, void 0, function () {

package/cjs/Thread/components/ThreadListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ThreadListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/Thread/components/ThreadMessageInput.js

@@ -1,79 +1,79 @@
 'use strict';
 
-var _tslib = require('../../chunks/bundle-zlHcIQSu.js');
+var _tslib = require('../../chunks/bundle-OA_02RkB.js');
 var React = require('react');
 var groupChannel = require('@sendbird/chat/groupChannel');
 var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
-var MediaQueryContext = require('../../chunks/bundle-G08Qqz-z.js');
+var MediaQueryContext = require('../../chunks/bundle-nknsRSk4.js');
 var Thread_context = require('../context.js');
-var LocalizationContext = require('../../chunks/bundle-DuU5B5-_.js');
+var LocalizationContext = require('../../chunks/bundle-BF4c8fbo.js');
 var ui_MessageInput = require('../../ui/MessageInput.js');
-var _const = require('../../chunks/bundle-Bd8wa_YD.js');
-var SuggestedMentionList = require('../../chunks/bundle-BA6o2UkA.js');
-var MessageInputWrapperView = require('../../chunks/bundle-Y04yRR5V.js');
+var _const = require('../../chunks/bundle-CGd7wrVy.js');
+var SuggestedMentionList = require('../../chunks/bundle-TuOW3oY9.js');
+var MessageInputWrapperView = require('../../chunks/bundle-HS4AiSIx.js');
 require('../../GroupChannel/context.js');
-var types = require('../../chunks/bundle-D44WlUuQ.js');
+var types = require('../../chunks/bundle-D2t1feVx.js');
 var Message_hooks_useDirtyGetMentions = require('../../Message/hooks/useDirtyGetMentions.js');
 var Channel_hooks_useHandleUploadFiles = require('../../Channel/hooks/useHandleUploadFiles.js');
-var utils = require('../../chunks/bundle-CM3V3Pp2.js');
-var utils$1 = require('../../chunks/bundle-Bcia1ZjE.js');
+var utils = require('../../chunks/bundle-CNzeT2IO.js');
+var utils$1 = require('../../chunks/bundle-CGFsndyY.js');
 require('../../withSendbird.js');
-require('../../chunks/bundle-DyxpS7wT.js');
-require('../../chunks/bundle-CYDXrfgn.js');
+require('../../chunks/bundle-D-gTHhxN.js');
+require('../../chunks/bundle-BZsDNwQP.js');
 require('../../utils/message/getOutgoingMessageState.js');
-require('../../chunks/bundle-sPjQ2Pux.js');
-require('../../chunks/bundle-CuSZh9iB.js');
-require('../context/types.js');
-require('@sendbird/chat');
-require('../../chunks/bundle-DsQnVud7.js');
-require('../../chunks/bundle-DPBDeBk_.js');
-require('../../chunks/bundle-DWcUSvLK.js');
-require('@sendbird/chat/message');
-require('../../chunks/bundle-DmEOZijP.js');
-require('../../chunks/bundle-D7T59omO.js');
-require('../../chunks/bundle-BrQCTN2E.js');
-require('../../chunks/bundle-BG2TJKN7.js');
+require('../../chunks/bundle-CLuwJZa0.js');
+require('../../chunks/bundle-Br7K8gnB.js');
+require('@sendbird/uikit-tools');
+require('../../chunks/bundle-CWvufVBn.js');
+require('../../chunks/bundle-WD84KbuC.js');
+require('../../chunks/bundle-BitLUCB9.js');
+require('../../chunks/bundle-OYuKPaGg.js');
+require('react-dom');
 require('../../ui/IconButton.js');
 require('../../ui/Button.js');
-require('../../chunks/bundle-9sHOJFhF.js');
-require('../../chunks/bundle-DMzUOBjy.js');
-require('dompurify');
-require('../../chunks/bundle-Cxjomv9D.js');
-require('../../chunks/bundle-CS3WPoOW.js');
-require('../../chunks/bundle-wbUo2tVB.js');
+require('../../chunks/bundle-BbqSbmfL.js');
+require('../../chunks/bundle-CGMxhied.js');
 require('../../ui/Icon.js');
-require('../../chunks/bundle-D6pcLavL.js');
-require('../../chunks/bundle-Ci7n7_a7.js');
-require('../../chunks/bundle-Cru9LFqc.js');
-require('../../chunks/bundle-qaP5GJsM.js');
-require('../../chunks/bundle-Cn9zbty_.js');
-require('../../chunks/bundle-tb5ZQqGF.js');
+require('css-vars-ponyfill');
+require('@sendbird/chat');
+require('../../chunks/bundle-BBhf6nJ7.js');
+require('@sendbird/chat/openChannel');
+require('../../chunks/bundle-CUfjpjxH.js');
+require('../../chunks/bundle-28nEChz7.js');
+require('../../ui/SortByRow.js');
+require('../context/types.js');
+require('../../chunks/bundle-W5xH9nry.js');
+require('../../chunks/bundle-CZfupcfw.js');
+require('@sendbird/chat/message');
+require('../../chunks/bundle-CW3LpHGq.js');
+require('../../chunks/bundle-DrZRl1QV.js');
+require('../../chunks/bundle-B7eeXNH_.js');
+require('../../chunks/bundle-B4RW5nKM.js');
+require('dompurify');
+require('../../chunks/bundle-D5OeOuGr.js');
+require('../../chunks/bundle-aUuw1Quf.js');
+require('../../chunks/bundle-D7Z6jlhn.js');
+require('../../chunks/bundle-EMecEM9W.js');
+require('../../chunks/bundle-BFvWCa7e.js');
+require('../../chunks/bundle-CG0iiNPb.js');
 require('../../ui/ImageRenderer.js');
-require('../../chunks/bundle-JIWumkkO.js');
-require('../../chunks/bundle-BUUc-Q9Z.js');
+require('../../chunks/bundle-DnCTq-wS.js');
+require('../../chunks/bundle-3EldXmJH.js');
 require('../../GroupChannel/components/SuggestedMentionList.js');
 require('../../ui/QuoteMessageInput.js');
-require('../../chunks/bundle-C-8JkV5q.js');
+require('../../chunks/bundle-CJeGZVb-.js');
 require('../../VoicePlayer/useVoicePlayer.js');
-require('../../chunks/bundle-DdlhyKeM.js');
-require('../../chunks/bundle-BDv_id6L.js');
-require('react-dom');
-require('@sendbird/uikit-tools');
-require('css-vars-ponyfill');
-require('@sendbird/chat/openChannel');
-require('../../chunks/bundle-Bx6GgprJ.js');
-require('../../ui/SortByRow.js');
 require('../../VoiceRecorder/useVoiceRecorder.js');
-require('../../chunks/bundle-CbHfmh_r.js');
+require('../../chunks/bundle-RIm06QKX.js');
 require('../../ui/PlaybackTime.js');
 require('../../ui/ProgressBar.js');
 require('../../ui/TextButton.js');
-require('../../chunks/bundle-oluXnecE.js');
-require('../../chunks/bundle-9Cstqdab.js');
-require('../../chunks/bundle-DbDWGaYr.js');
-require('../../chunks/bundle-BanlmTip.js');
-require('../../chunks/bundle-DZAa-Eux.js');
-require('../../chunks/bundle-C0PJCoX9.js');
+require('../../chunks/bundle-DpuLDKUp.js');
+require('../../chunks/bundle-CljE7hFH.js');
+require('../../chunks/bundle-BIcGuop9.js');
+require('../../chunks/bundle-XzNiXnxy.js');
+require('../../chunks/bundle-CB045Nuo.js');
+require('../../chunks/bundle-oJ65xs4u.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }