@sendbird/uikit-react 3.8.0 → 3.8.1

package/cjs/ui/MessageContent.js

@@ -1,105 +1,188 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-hK4x7nmG.js');
+var _tslib = require('../chunks/bundle-mc8PQfi_.js');
 var React = require('react');
-var index$1 = require('../chunks/bundle-28p7K0N-.js');
-var ui_Avatar = require('./Avatar.js');
-var ui_UserProfile = require('./UserProfile.js');
-var ui_MessageStatus = require('../chunks/bundle-11ybpGNN.js');
+var index$1 = require('../chunks/bundle-pLajF9mf.js');
+var ui_MessageStatus = require('../chunks/bundle-Y0ibVW_O.js');
 var ui_MessageItemMenu = require('./MessageItemMenu.js');
 var ui_MessageItemReactionMenu = require('./MessageItemReactionMenu.js');
-var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../chunks/bundle-6ziaqiUd.js');
+var ui_Label = require('../chunks/bundle-fTDV9UxX.js');
 var ui_EmojiReactions = require('./EmojiReactions.js');
 var ui_AdminMessage = require('./AdminMessage.js');
-var ui_TextMessageItemBody = require('./TextMessageItemBody.js');
-var ui_FileMessageItemBody = require('./FileMessageItemBody.js');
-var ui_ThumbnailMessageItemBody = require('./ThumbnailMessageItemBody.js');
-var ui_OGMessageItemBody = require('./OGMessageItemBody.js');
-var ui_UnknownMessageItemBody = require('./UnknownMessageItemBody.js');
 var ui_QuoteMessage = require('./QuoteMessage.js');
-var index = require('../chunks/bundle-FHx0K-3z.js');
-var UserProfileContext = require('../chunks/bundle-4bb_98h6.js');
-var LocalizationContext = require('../chunks/bundle-QmSa90PC.js');
+var index = require('../chunks/bundle-BUF_nc4Q.js');
+var LocalizationContext = require('../chunks/bundle-80bw1Z-w.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var useLongPress = require('../chunks/bundle-tywVawyg.js');
-var index$2 = require('../chunks/bundle-41ZfOrRZ.js');
-var MediaQueryContext = require('../chunks/bundle-Y9TkHVI5.js');
+var useLongPress = require('../chunks/bundle-FCrfVx0P.js');
+var index$2 = require('../chunks/bundle-h48X_8mu.js');
+var MediaQueryContext = require('../chunks/bundle-kkxTVcGD.js');
 var ui_ThreadReplies = require('./ThreadReplies.js');
-var _const = require('../chunks/bundle-P_B0eyVT.js');
+var _const = require('../chunks/bundle-VHUezYnn.js');
+var utils = require('../chunks/bundle-viTxhrPr.js');
+var ui_ContextMenu = require('./ContextMenu.js');
+var ui_Avatar = require('../chunks/bundle-lj7KorhP.js');
+var ui_UserProfile = require('./UserProfile.js');
+var UserProfileContext = require('../chunks/bundle-ACXel153.js');
+var ui_OGMessageItemBody = require('./OGMessageItemBody.js');
+var ui_TextMessageItemBody = require('./TextMessageItemBody.js');
+var ui_FileMessageItemBody = require('./FileMessageItemBody.js');
+var useStatefulFileInfoList = require('../chunks/bundle-Co06yFqb.js');
 var ui_VoiceMessageItemBody = require('./VoiceMessageItemBody.js');
-var utils = require('../chunks/bundle-1yOirqug.js');
-var useStatefulFileInfoList = require('../chunks/bundle-RlFjml8m.js');
-require('../chunks/bundle-n1yh-qDb.js');
-require('./ImageRenderer.js');
+var ui_ThumbnailMessageItemBody = require('./ThumbnailMessageItemBody.js');
+var ui_UnknownMessageItemBody = require('./UnknownMessageItemBody.js');
+var index_module = require('../chunks/bundle-RG3ZDmvE.js');
+require('../chunks/bundle-EVv3xRW8.js');
 require('./Icon.js');
-require('../chunks/bundle-gMxOq93o.js');
-require('../sendbirdSelectors.js');
-require('../pubSub/topics.js');
-require('./Button.js');
 require('./Loader.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-CUP2x37z.js');
-require('../chunks/bundle-4rFcKXQa.js');
+require('../chunks/bundle-cKt6NzI1.js');
+require('../chunks/bundle-uE1K1eGs.js');
 require('./IconButton.js');
-require('../chunks/bundle-lii4Ueh3.js');
-require('../chunks/bundle-4DATo50q.js');
-require('../chunks/bundle-4q81wd8X.js');
+require('../chunks/bundle-M6v8bdc6.js');
+require('../chunks/bundle-_yIYQoui.js');
+require('../chunks/bundle-8lUFYwiz.js');
 require('@sendbird/chat/message');
-require('../chunks/bundle-I_9_5a8a.js');
-require('../chunks/bundle-c6O8NjZI.js');
-require('../chunks/bundle-tmB_l3Q9.js');
+require('../chunks/bundle-bQffWPr0.js');
+require('../chunks/bundle-a_NGo240.js');
 require('@sendbird/chat/groupChannel');
+require('../chunks/bundle-Z8uBiYyS.js');
 require('../Channel/hooks/useInitialMessagesFetch.js');
-require('../chunks/bundle-6o4fw0w0.js');
-require('../chunks/bundle-L9ushBZQ.js');
-require('../chunks/bundle-g_OXBrgT.js');
-require('./ReactionButton.js');
+require('../chunks/bundle-6fWeHUzf.js');
+require('../chunks/bundle-4iro9CUN.js');
+require('../chunks/bundle-wPu8WyIh.js');
+require('../chunks/bundle-leALuaxJ.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../chunks/bundle-z-Bvsn0B.js');
+require('../chunks/bundle-5l7POen0.js');
+require('../withSendbird.js');
+require('./ImageRenderer.js');
+require('./ReactionButton.js');
 require('./ReactionBadge.js');
 require('./BottomSheet.js');
 require('../hooks/useModal.js');
-require('../chunks/bundle-UooP2IDU.js');
+require('../chunks/bundle-o66lc7qg.js');
+require('./Button.js');
 require('./UserListItem.js');
 require('./MutedAvatarOverlay.js');
 require('./Checkbox.js');
+require('../sendbirdSelectors.js');
 require('./Tooltip.js');
 require('./TooltipWrapper.js');
 require('../Message/context.js');
-require('../chunks/bundle-FLCJVplO.js');
-require('../chunks/bundle-iwsbhMUN.js');
+require('../chunks/bundle-lkluBCYi.js');
+require('../chunks/bundle-3qeMVUne.js');
+require('../chunks/bundle-Bekm94S6.js');
 require('./MentionLabel.js');
 require('./LinkLabel.js');
-require('../chunks/bundle-g0lpRY8_.js');
+require('../chunks/bundle-DRPbz-J2.js');
+require('../chunks/bundle-MB8QdyyQ.js');
 require('./TextButton.js');
-require('../chunks/bundle-B2MaAm21.js');
-require('../chunks/bundle-p1cCW0sH.js');
-require('../chunks/bundle-RaQV-Bpr.js');
-require('../withSendbird.js');
+require('../chunks/bundle-oISd80pA.js');
+require('../chunks/bundle-t70SIG3R.js');
 require('./ProgressBar.js');
 require('../VoicePlayer/useVoicePlayer.js');
-require('../chunks/bundle-BJe68nS0.js');
+require('../chunks/bundle-oiMScSG6.js');
 require('../VoiceRecorder/context.js');
 require('./PlaybackTime.js');
-require('../chunks/bundle-JggdKsJa.js');
 
-function MessageContent(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    var className = _a.className, userId = _a.userId, channel = _a.channel, message = _a.message, _r = _a.disabled, disabled = _r === void 0 ? false : _r, _s = _a.chainTop, chainTop = _s === void 0 ? false : _s, _t = _a.chainBottom, chainBottom = _t === void 0 ? false : _t, _u = _a.isReactionEnabled, isReactionEnabled = _u === void 0 ? false : _u, _v = _a.disableQuoteMessage, disableQuoteMessage = _v === void 0 ? false : _v, replyType = _a.replyType, threadReplySelectType = _a.threadReplySelectType, nicknamesMap = _a.nicknamesMap, emojiContainer = _a.emojiContainer, scrollToMessage = _a.scrollToMessage, showEdit = _a.showEdit, showRemove = _a.showRemove, showFileViewer = _a.showFileViewer, resendMessage = _a.resendMessage, deleteMessage = _a.deleteMessage, toggleReaction = _a.toggleReaction, setQuoteMessage = _a.setQuoteMessage, onReplyInThread = _a.onReplyInThread, onQuoteMessageClick = _a.onQuoteMessageClick, onMessageHeightChange = _a.onMessageHeightChange;
+function MessageProfile(props) {
+    var avatarRef = React.useRef(null);
+    var message = props.message, channel = props.channel, userId = props.userId, _a = props.disabled, disabled = _a === void 0 ? false : _a, _b = props.chainBottom, chainBottom = _b === void 0 ? false : _b, replyType = props.replyType, threadReplySelectType = props.threadReplySelectType, emojiContainer = props.emojiContainer, scrollToMessage = props.scrollToMessage, showEdit = props.showEdit, showRemove = props.showRemove, resendMessage = props.resendMessage, toggleReaction = props.toggleReaction, setQuoteMessage = props.setQuoteMessage, onReplyInThread = props.onReplyInThread, setSupposedHover = props.setSupposedHover, isMobile = props.isMobile, isReactionEnabledInChannel = props.isReactionEnabledInChannel, isReactionEnabledClassName = props.isReactionEnabledClassName, isByMe = props.isByMe, isByMeClassName = props.isByMeClassName, useReplyingClassName = props.useReplyingClassName, displayThreadReplies = props.displayThreadReplies, supposedHoverClassName = props.supposedHoverClassName;
+    var _c = React.useContext(UserProfileContext.UserProfileContext), disableUserProfile = _c.disableUserProfile, renderUserProfile = _c.renderUserProfile;
+    return (React.createElement("div", { className: index.getClassName(['sendbird-message-content__left', isReactionEnabledClassName, isByMeClassName, useReplyingClassName]) },
+        (!isByMe && !chainBottom && index.isSendableMessage(message)) && (
+        /** user profile */
+        React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) {
+                var _a, _b;
+                return (React.createElement(ui_Avatar.Avatar, { className: "sendbird-message-content__left__avatar ".concat(displayThreadReplies ? 'use-thread-replies' : ''), src: ((_b = (_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.find(function (member) { return (member === null || member === void 0 ? void 0 : member.userId) === message.sender.userId; })) === null || _b === void 0 ? void 0 : _b.profileUrl) || message.sender.profileUrl || '', 
+                    // TODO: Divide getting profileUrl logic to utils
+                    ref: avatarRef, width: "28px", height: "28px", onClick: function () { if (!disableUserProfile)
+                        toggleDropdown(); } }));
+            }, menuItems: function (closeDropdown) { return (React.createElement(ui_ContextMenu.MenuItems
+            /**
+            * parentRef: For catching location(x, y) of MenuItems
+            * parentContainRef: For toggling more options(menus & reactions)
+            */
+            , { 
+                /**
+                * parentRef: For catching location(x, y) of MenuItems
+                * parentContainRef: For toggling more options(menus & reactions)
+                */
+                parentRef: avatarRef, parentContainRef: avatarRef, closeDropdown: closeDropdown, style: { paddingTop: '0px', paddingBottom: '0px' } }, renderUserProfile
+                ? renderUserProfile({ user: message.sender, close: closeDropdown, currentUserId: userId })
+                : (React.createElement(ui_UserProfile, { user: message.sender, onSuccess: closeDropdown })))); } })),
+        isByMe && !isMobile && (React.createElement("div", { className: index.getClassName(['sendbird-message-content-menu', isReactionEnabledClassName, supposedHoverClassName, isByMeClassName]) },
+            React.createElement(ui_MessageItemMenu, { channel: channel, message: message, isByMe: isByMe, replyType: replyType, disabled: disabled, showEdit: showEdit, showRemove: showRemove, resendMessage: resendMessage, setQuoteMessage: setQuoteMessage, setSupposedHover: setSupposedHover, onReplyInThread: function (_a) {
+                    var _b;
+                    var message = _a.message;
+                    if (threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
+                        onReplyInThread({ message: message });
+                    }
+                    else if (threadReplySelectType === _const.ThreadReplySelectType.PARENT) {
+                        scrollToMessage((_b = message.parentMessage) === null || _b === void 0 ? void 0 : _b.createdAt, message.parentMessageId);
+                    }
+                } }),
+            isReactionEnabledInChannel && (React.createElement(ui_MessageItemReactionMenu, { message: message, userId: userId, emojiContainer: emojiContainer, toggleReaction: toggleReaction, setSupposedHover: setSupposedHover }))))));
+}
+
+var MESSAGE_ITEM_BODY_CLASSNAME = 'sendbird-message-content__middle__message-item-body';
+function MessageBody(props) {
+    var message = props.message, channel = props.channel, showFileViewer = props.showFileViewer, onMessageHeightChange = props.onMessageHeightChange, mouseHover = props.mouseHover, isMobile = props.isMobile, config = props.config, isReactionEnabledInChannel = props.isReactionEnabledInChannel, isByMe = props.isByMe;
+    var threadMessageKindKey = useStatefulFileInfoList.useThreadMessageKindKeySelector({
+        isMobile: isMobile,
+    });
+    var statefulFileInfoList = useStatefulFileInfoList.useStatefulFileInfoList(message); // For MultipleFilesMessage.
     var messageTypes = index.getUIKitMessageTypes();
+    var isOgMessageEnabledInGroupChannel = (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && config.groupChannel.enableOgtag;
+    return index_module.K(message)
+        .when(function (message) { return isOgMessageEnabledInGroupChannel
+        && index.isSendableMessage(message)
+        && index.isOGMessage(message); }, function () { return (React.createElement(ui_OGMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, isByMe: isByMe, mouseHover: mouseHover, isMentionEnabled: (config === null || config === void 0 ? void 0 : config.isMentionEnabled) || false, isReactionEnabled: isReactionEnabledInChannel, onMessageHeightChange: onMessageHeightChange })); })
+        .when(index.isTextMessage, function () { return (React.createElement(ui_TextMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, isByMe: isByMe, mouseHover: mouseHover, isMentionEnabled: (config === null || config === void 0 ? void 0 : config.isMentionEnabled) || false, isReactionEnabled: isReactionEnabledInChannel })); })
+        .when(function (message) { return index.getUIKitMessageType(message) === messageTypes.FILE; }, function () { return (React.createElement(ui_FileMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, isByMe: isByMe, mouseHover: mouseHover, isReactionEnabled: isReactionEnabledInChannel })); })
+        .when(index.isMultipleFilesMessage, function () { return (React.createElement(useStatefulFileInfoList.MultipleFilesMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, isByMe: isByMe, mouseHover: mouseHover, isReactionEnabled: isReactionEnabledInChannel, threadMessageKindKey: threadMessageKindKey, statefulFileInfoList: statefulFileInfoList })); })
+        .when(index.isVoiceMessage, function () {
+        var _a;
+        return (React.createElement(ui_VoiceMessageItemBody.VoiceMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, channelUrl: (_a = channel === null || channel === void 0 ? void 0 : channel.url) !== null && _a !== void 0 ? _a : '', isByMe: isByMe, isReactionEnabled: isReactionEnabledInChannel }));
+    })
+        .when(index.isThumbnailMessage, function () { return (React.createElement(ui_ThumbnailMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, isByMe: isByMe, mouseHover: mouseHover, isReactionEnabled: isReactionEnabledInChannel, showFileViewer: showFileViewer, style: isMobile ? { width: '100%' } : {} })); })
+        .otherwise(function (message) { return (React.createElement(ui_UnknownMessageItemBody, { className: MESSAGE_ITEM_BODY_CLASSNAME, message: message, isByMe: isByMe, mouseHover: mouseHover, isReactionEnabled: isReactionEnabledInChannel })); });
+}
+
+function MessageHeader(props) {
+    var _a, _b;
+    var channel = props.channel, message = props.message;
+    return (React.createElement(ui_Label.Label, { className: "sendbird-message-content__middle__sender-name", type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, 
+    /**
+     * To use the latest member profile information, message.sender might be outdated
+     */
+    ((_b = (_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.find(function (member) {
+        var _a;
+        // @ts-ignore
+        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.nickname) || index.getSenderName(message)
+    // TODO: Divide getting profileUrl logic to utils
+    ));
+}
+
+function MessageContent(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var 
+    // Internal props
+    className = props.className, userId = props.userId, channel = props.channel, message = props.message, _m = props.disabled, disabled = _m === void 0 ? false : _m, _o = props.chainTop, chainTop = _o === void 0 ? false : _o, _p = props.chainBottom, chainBottom = _p === void 0 ? false : _p, _q = props.isReactionEnabled, isReactionEnabled = _q === void 0 ? false : _q, _r = props.disableQuoteMessage, disableQuoteMessage = _r === void 0 ? false : _r, replyType = props.replyType, threadReplySelectType = props.threadReplySelectType, nicknamesMap = props.nicknamesMap, emojiContainer = props.emojiContainer, scrollToMessage = props.scrollToMessage, showEdit = props.showEdit, showRemove = props.showRemove, showFileViewer = props.showFileViewer, resendMessage = props.resendMessage, deleteMessage = props.deleteMessage, toggleReaction = props.toggleReaction, setQuoteMessage = props.setQuoteMessage, onReplyInThread = props.onReplyInThread, onQuoteMessageClick = props.onQuoteMessageClick, onMessageHeightChange = props.onMessageHeightChange, 
+    // Public props for customization
+    _s = props.renderSenderProfile, 
+    // Public props for customization
+    renderSenderProfile = _s === void 0 ? function (props) { return (React.createElement(MessageProfile, _tslib.__assign({}, props))); } : _s, _t = props.renderMessageBody, renderMessageBody = _t === void 0 ? function (props) { return (React.createElement(MessageBody, _tslib.__assign({}, props))); } : _t, _u = props.renderMessageHeader, renderMessageHeader = _u === void 0 ? function (props) { return (React.createElement(MessageHeader, _tslib.__assign({}, props))); } : _u;
     var dateLocale = LocalizationContext.useLocalization().dateLocale;
-    var _w = (useSendbirdStateContext.useSendbirdStateContext === null || useSendbirdStateContext.useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext.useSendbirdStateContext()) || {}, config = _w.config, eventHandlers = _w.eventHandlers;
-    var onPressUserProfileHandler = (_b = eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.reaction) === null || _b === void 0 ? void 0 : _b.onPressUserProfile;
-    var _x = React.useContext(UserProfileContext.UserProfileContext), disableUserProfile = _x.disableUserProfile, renderUserProfile = _x.renderUserProfile;
-    var avatarRef = React.useRef(null);
+    var _v = (useSendbirdStateContext.useSendbirdStateContext === null || useSendbirdStateContext.useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext.useSendbirdStateContext()) || {}, config = _v.config, eventHandlers = _v.eventHandlers;
+    var onPressUserProfileHandler = (_a = eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.reaction) === null || _a === void 0 ? void 0 : _a.onPressUserProfile;
     var contentRef = React.useRef(null);
     var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
-    var _y = React.useState(false), showMenu = _y[0], setShowMenu = _y[1];
-    var _z = React.useState(false), mouseHover = _z[0], setMouseHover = _z[1];
-    var _0 = React.useState(false), supposedHover = _0[0], setSupposedHover = _0[1];
-    var isByMe = (userId === ((_c = message === null || message === void 0 ? void 0 : message.sender) === null || _c === void 0 ? void 0 : _c.userId))
+    var _w = React.useState(false), showMenu = _w[0], setShowMenu = _w[1];
+    var _x = React.useState(false), mouseHover = _x[0], setMouseHover = _x[1];
+    var _y = React.useState(false), supposedHover = _y[0], setSupposedHover = _y[1];
+    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 isByMeClassName = isByMe ? 'outgoing' : 'incoming';
@@ -111,9 +194,8 @@ function MessageContent(_a) {
         && (message === null || message === void 0 ? void 0 : message.parentMessageId) && (message === null || message === void 0 ? void 0 : message.parentMessage)
         && !disableQuoteMessage);
     var useReplyingClassName = useReplying ? 'use-quote' : '';
-    var isOgMessageEnabledInGroupChannel = (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && config.groupChannel.enableOgtag;
     // Thread replies
-    var displayThreadReplies = ((_d = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _d === void 0 ? void 0 : _d.replyCount) > 0 && replyType === 'THREAD';
+    var displayThreadReplies = ((_c = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _c === void 0 ? void 0 : _c.replyCount) > 0 && replyType === 'THREAD';
     // onMouseDown: (e: React.MouseEvent<T>) => void;
     // onTouchStart: (e: React.TouchEvent<T>) => void;
     // onMouseUp: (e: React.MouseEvent<T>) => void;
@@ -130,60 +212,15 @@ function MessageContent(_a) {
         delay: 300,
         shouldPreventDefault: false,
     });
-    var threadMessageKindKey = useStatefulFileInfoList.useThreadMessageKindKeySelector({
-        isMobile: isMobile,
-    });
-    // For MultipleFilesMessage only.
-    var statefulFileInfoList = useStatefulFileInfoList.useStatefulFileInfoList(message);
-    if (((_e = message === null || message === void 0 ? void 0 : message.isAdminMessage) === null || _e === void 0 ? void 0 : _e.call(message)) || (message === null || message === void 0 ? void 0 : message.messageType) === 'admin') {
+    if (((_d = message === null || message === void 0 ? void 0 : message.isAdminMessage) === null || _d === void 0 ? void 0 : _d.call(message)) || (message === null || message === void 0 ? void 0 : message.messageType) === 'admin') {
         return (React.createElement(ui_AdminMessage, { message: message }));
     }
     return (React.createElement("div", { className: index.getClassName([className, 'sendbird-message-content', isByMeClassName]), onMouseOver: function () { return setMouseHover(true); }, onMouseLeave: function () { return setMouseHover(false); } },
-        React.createElement("div", { className: index.getClassName(['sendbird-message-content__left', isReactionEnabledClassName, isByMeClassName, useReplyingClassName]) },
-            (!isByMe && !chainBottom && index.isSendableMessage(message)) && (
-            /** user profile */
-            React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) {
-                    var _a, _b;
-                    return (React.createElement(ui_Avatar.default, { className: "sendbird-message-content__left__avatar ".concat(displayThreadReplies ? 'use-thread-replies' : ''), 
-                        // @ts-ignore
-                        src: ((_b = (_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.find(function (member) { return (member === null || member === void 0 ? void 0 : member.userId) === message.sender.userId; })) === null || _b === void 0 ? void 0 : _b.profileUrl) || message.sender.profileUrl || '', 
-                        // TODO: Divide getting profileUrl logic to utils
-                        ref: avatarRef, width: "28px", height: "28px", onClick: function () { if (!disableUserProfile)
-                            toggleDropdown(); } }));
-                }, menuItems: function (closeDropdown) { return (React.createElement(ui_ContextMenu.MenuItems
-                /**
-                * parentRef: For catching location(x, y) of MenuItems
-                * parentContainRef: For toggling more options(menus & reactions)
-                */
-                , { 
-                    /**
-                    * parentRef: For catching location(x, y) of MenuItems
-                    * parentContainRef: For toggling more options(menus & reactions)
-                    */
-                    parentRef: avatarRef, parentContainRef: avatarRef, closeDropdown: closeDropdown, style: { paddingTop: '0px', paddingBottom: '0px' } }, renderUserProfile
-                    ? renderUserProfile({ user: message.sender, close: closeDropdown, currentUserId: userId })
-                    : (React.createElement(ui_UserProfile, { user: message.sender, onSuccess: closeDropdown })))); } })),
-            isByMe && !isMobile && (React.createElement("div", { className: index.getClassName(['sendbird-message-content-menu', isReactionEnabledClassName, supposedHoverClassName, isByMeClassName]) },
-                React.createElement(ui_MessageItemMenu, { className: "sendbird-message-content-menu__normal-menu", channel: channel, message: message, isByMe: isByMe, replyType: replyType, disabled: disabled, showEdit: showEdit, showRemove: showRemove, resendMessage: resendMessage, setQuoteMessage: setQuoteMessage, setSupposedHover: setSupposedHover, onReplyInThread: function (_a) {
-                        var _b;
-                        var message = _a.message;
-                        if (threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
-                            onReplyInThread({ message: message });
-                        }
-                        else if (threadReplySelectType === _const.ThreadReplySelectType.PARENT) {
-                            scrollToMessage((_b = message.parentMessage) === null || _b === void 0 ? void 0 : _b.createdAt, message.parentMessageId);
-                        }
-                    } }),
-                isReactionEnabledInChannel && (React.createElement(ui_MessageItemReactionMenu, { className: "sendbird-message-content-menu__reaction-menu", message: message, userId: userId, emojiContainer: emojiContainer, toggleReaction: toggleReaction, setSupposedHover: setSupposedHover }))))),
+        renderSenderProfile(_tslib.__assign(_tslib.__assign({}, props), { setSupposedHover: setSupposedHover, isMobile: isMobile, isReactionEnabledInChannel: isReactionEnabledInChannel, isReactionEnabledClassName: isReactionEnabledClassName, isByMe: isByMe, isByMeClassName: isByMeClassName, useReplyingClassName: useReplyingClassName, displayThreadReplies: displayThreadReplies, supposedHoverClassName: supposedHoverClassName })),
         React.createElement("div", _tslib.__assign({ className: 'sendbird-message-content__middle' }, (isMobile ? _tslib.__assign({}, longPress) : {}), { ref: contentRef }),
-            (!isByMe && !chainTop && !useReplying) && (React.createElement(ui_Label.Label, { className: "sendbird-message-content__middle__sender-name", type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, 
-            // @ts-ignore
-            ((_g = (_f = channel === null || channel === void 0 ? void 0 : channel.members) === null || _f === void 0 ? void 0 : _f.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 || _g === void 0 ? void 0 : _g.nickname)
-                || index.getSenderName(message)
-            // TODO: Divide getting profileUrl logic to utils
-            )),
+            !isByMe && !chainTop && !useReplying && renderMessageHeader(props),
             (useReplying) ? (React.createElement("div", { className: index.getClassName(['sendbird-message-content__middle__quote-message', isByMe ? 'outgoing' : 'incoming', useReplyingClassName]) },
-                React.createElement(ui_QuoteMessage, { className: "sendbird-message-content__middle__quote-message__quote", message: message, userId: userId, isByMe: isByMe, isUnavailable: ((_h = channel === null || channel === void 0 ? void 0 : channel.messageOffsetTimestamp) !== null && _h !== void 0 ? _h : 0) > ((_k = (_j = message.parentMessage) === null || _j === void 0 ? void 0 : _j.createdAt) !== null && _k !== void 0 ? _k : 0), onClick: function () {
+                React.createElement(ui_QuoteMessage, { className: "sendbird-message-content__middle__quote-message__quote", message: message, userId: userId, isByMe: isByMe, isUnavailable: ((_e = channel === null || channel === void 0 ? void 0 : channel.messageOffsetTimestamp) !== null && _e !== void 0 ? _e : 0) > ((_g = (_f = message.parentMessage) === null || _f === void 0 ? void 0 : _f.createdAt) !== null && _g !== void 0 ? _g : 0), onClick: function () {
                         var _a;
                         if (replyType === 'THREAD' && threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
                             onQuoteMessageClick === null || onQuoteMessageClick === void 0 ? void 0 : onQuoteMessageClick({ message: message });
@@ -197,13 +234,18 @@ function MessageContent(_a) {
                 (isByMe && !chainBottom) && (React.createElement("div", { className: index.getClassName(['sendbird-message-content__middle__body-container__created-at', 'left', supposedHoverClassName]) },
                     React.createElement("div", { className: "sendbird-message-content__middle__body-container__created-at__component-container" },
                         React.createElement(ui_MessageStatus.MessageStatus, { message: message, channel: channel })))),
-                isOgMessageEnabledInGroupChannel && index.isOGMessage(message) ? (React.createElement(ui_OGMessageItemBody, { className: "sendbird-message-content__middle__message-item-body", message: message, isByMe: isByMe, mouseHover: mouseHover, isMentionEnabled: (config === null || config === void 0 ? void 0 : config.isMentionEnabled) || false, isReactionEnabled: isReactionEnabledInChannel, onMessageHeightChange: onMessageHeightChange })) : index.isTextMessage(message) && (React.createElement(ui_TextMessageItemBody, { className: "sendbird-message-content__middle__message-item-body", message: message, isByMe: isByMe, mouseHover: mouseHover, isMentionEnabled: (config === null || config === void 0 ? void 0 : config.isMentionEnabled) || false, isReactionEnabled: isReactionEnabledInChannel })),
-                (index.getUIKitMessageType(message) === messageTypes.FILE) && (React.createElement(ui_FileMessageItemBody, { className: "sendbird-message-content__middle__message-item-body", message: message, isByMe: isByMe, mouseHover: mouseHover, isReactionEnabled: isReactionEnabledInChannel })),
-                index.isMultipleFilesMessage(message) && (React.createElement(useStatefulFileInfoList.MultipleFilesMessageItemBody, { className: "sendbird-message-content__middle__message-item-body", message: message, isByMe: isByMe, mouseHover: mouseHover, isReactionEnabled: isReactionEnabledInChannel, threadMessageKindKey: threadMessageKindKey, statefulFileInfoList: statefulFileInfoList })),
-                index.isVoiceMessage(message) && (React.createElement(ui_VoiceMessageItemBody.VoiceMessageItemBody, { className: "sendbird-message-content__middle__message-item-body", message: message, channelUrl: (_l = channel === null || channel === void 0 ? void 0 : channel.url) !== null && _l !== void 0 ? _l : '', isByMe: isByMe, isReactionEnabled: isReactionEnabledInChannel })),
-                (index.isThumbnailMessage(message)) && (React.createElement(ui_ThumbnailMessageItemBody, { className: "sendbird-message-content__middle__message-item-body", message: message, isByMe: isByMe, mouseHover: mouseHover, isReactionEnabled: isReactionEnabledInChannel, showFileViewer: showFileViewer, style: isMobile ? { width: '100%' } : {} })),
-                (index.getUIKitMessageType(message) === messageTypes.UNKNOWN) && (React.createElement(ui_UnknownMessageItemBody, { className: "sendbird-message-content__middle__message-item-body", message: message, isByMe: isByMe, mouseHover: mouseHover, isReactionEnabled: isReactionEnabledInChannel })),
-                (isReactionEnabledInChannel && ((_m = message === null || message === void 0 ? void 0 : message.reactions) === null || _m === void 0 ? void 0 : _m.length) > 0) && (React.createElement("div", { className: index.getClassName([
+                renderMessageBody({
+                    message: message,
+                    channel: channel,
+                    showFileViewer: showFileViewer,
+                    onMessageHeightChange: onMessageHeightChange,
+                    mouseHover: mouseHover,
+                    isMobile: isMobile,
+                    config: config,
+                    isReactionEnabledInChannel: isReactionEnabledInChannel,
+                    isByMe: isByMe,
+                }),
+                (isReactionEnabledInChannel && ((_h = message === null || message === void 0 ? void 0 : message.reactions) === null || _h === void 0 ? void 0 : _h.length) > 0) && (React.createElement("div", { className: index.getClassName([
                         'sendbird-message-content-reactions',
                         index.isMultipleFilesMessage(message)
                             ? 'image-grid'
@@ -228,7 +270,7 @@ function MessageContent(_a) {
                         scrollToMessage((_b = message.parentMessage) === null || _b === void 0 ? void 0 : _b.createdAt, message.parentMessageId);
                     }
                 } })))),
-        showMenu && (((_o = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _o === void 0 ? void 0 : _o.call(message)) || ((_p = message === null || message === void 0 ? void 0 : message.isFileMessage) === null || _p === void 0 ? void 0 : _p.call(message)) || ((_q = message === null || message === void 0 ? void 0 : message.isMultipleFilesMessage) === null || _q === void 0 ? void 0 : _q.call(message))) && (React.createElement(index$2.MobileMenu, { parentRef: contentRef, channel: channel, hideMenu: function () { setShowMenu(false); }, message: message, isReactionEnabled: isReactionEnabledInChannel, isByMe: isByMe, userId: userId, replyType: replyType, disabled: disabled, showRemove: showRemove, emojiContainer: emojiContainer, resendMessage: resendMessage, deleteMessage: deleteMessage, setQuoteMessage: setQuoteMessage, toggleReaction: toggleReaction, showEdit: showEdit, onReplyInThread: function (_a) {
+        showMenu && (((_j = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _j === void 0 ? void 0 : _j.call(message)) || ((_k = message === null || message === void 0 ? void 0 : message.isFileMessage) === null || _k === void 0 ? void 0 : _k.call(message)) || ((_l = message === null || message === void 0 ? void 0 : message.isMultipleFilesMessage) === null || _l === void 0 ? void 0 : _l.call(message))) && (React.createElement(index$2.MobileMenu, { parentRef: contentRef, channel: channel, hideMenu: function () { setShowMenu(false); }, message: message, isReactionEnabled: isReactionEnabledInChannel, isByMe: isByMe, userId: userId, replyType: replyType, disabled: disabled, showRemove: showRemove, emojiContainer: emojiContainer, resendMessage: resendMessage, deleteMessage: deleteMessage, setQuoteMessage: setQuoteMessage, toggleReaction: toggleReaction, showEdit: showEdit, onReplyInThread: function (_a) {
                 var _b;
                 var message = _a.message;
                 if (threadReplySelectType === _const.ThreadReplySelectType.THREAD) {

package/cjs/ui/MessageContent.js.map

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

package/cjs/ui/MessageInput/hooks/usePaste.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
 require('dompurify');
-var ui_MessageInput_hooks_usePaste = require('../../../chunks/bundle-b4fiCQuI.js');
-require('../../../chunks/bundle-hK4x7nmG.js');
-require('../../../chunks/bundle-gS0bojlA.js');
-require('../../../chunks/bundle-g0lpRY8_.js');
-require('../../../chunks/bundle-RaQV-Bpr.js');
+var ui_MessageInput_hooks_usePaste = require('../../../chunks/bundle-LoNtsKOJ.js');
+require('../../../chunks/bundle-mc8PQfi_.js');
+require('../../../chunks/bundle-PoR4V_kd.js');
+require('../../../chunks/bundle-MB8QdyyQ.js');
+require('../../../chunks/bundle-DRPbz-J2.js');
 
 
 

package/cjs/ui/MessageInput.js

@@ -1,26 +1,26 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-hK4x7nmG.js');
+var _tslib = require('../chunks/bundle-mc8PQfi_.js');
 var React = require('react');
-var _const$1 = require('../chunks/bundle-dXhGOQQM.js');
-var _const = require('../chunks/bundle-P_B0eyVT.js');
+var _const$1 = require('../chunks/bundle-YRW87MiX.js');
+var _const = require('../chunks/bundle-VHUezYnn.js');
 var ui_IconButton = require('./IconButton.js');
 var ui_Button = require('./Button.js');
-var ui_MessageInput_hooks_usePaste = require('../chunks/bundle-b4fiCQuI.js');
+var ui_MessageInput_hooks_usePaste = require('../chunks/bundle-LoNtsKOJ.js');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../chunks/bundle-6ziaqiUd.js');
-var LocalizationContext = require('../chunks/bundle-QmSa90PC.js');
+var ui_Label = require('../chunks/bundle-fTDV9UxX.js');
+var LocalizationContext = require('../chunks/bundle-80bw1Z-w.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var index = require('../chunks/bundle-FHx0K-3z.js');
-var tokenize = require('../chunks/bundle-FLCJVplO.js');
-var index_module = require('../chunks/bundle-I_9_5a8a.js');
+var index = require('../chunks/bundle-BUF_nc4Q.js');
+var tokenize = require('../chunks/bundle-Bekm94S6.js');
+var index_module = require('../chunks/bundle-RG3ZDmvE.js');
 require('dompurify');
-require('../chunks/bundle-gS0bojlA.js');
-require('../chunks/bundle-g0lpRY8_.js');
-require('../chunks/bundle-RaQV-Bpr.js');
-require('../chunks/bundle-1yOirqug.js');
-require('../chunks/bundle-z-Bvsn0B.js');
-require('../chunks/bundle-n1yh-qDb.js');
+require('../chunks/bundle-PoR4V_kd.js');
+require('../chunks/bundle-MB8QdyyQ.js');
+require('../chunks/bundle-DRPbz-J2.js');
+require('../chunks/bundle-viTxhrPr.js');
+require('../chunks/bundle-5l7POen0.js');
+require('../chunks/bundle-EVv3xRW8.js');
 require('../withSendbird.js');
 require('../utils/message/getOutgoingMessageState.js');
 

package/cjs/ui/MessageItemMenu.js

@@ -4,35 +4,35 @@ var React = require('react');
 var ui_ContextMenu = require('./ContextMenu.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
-var index = require('../chunks/bundle-FHx0K-3z.js');
-var LocalizationContext = require('../chunks/bundle-QmSa90PC.js');
-var types = require('../chunks/bundle-lii4Ueh3.js');
-var Channel_context = require('../chunks/bundle-4DATo50q.js');
-require('../chunks/bundle-hK4x7nmG.js');
+var index = require('../chunks/bundle-BUF_nc4Q.js');
+var LocalizationContext = require('../chunks/bundle-80bw1Z-w.js');
+var types = require('../chunks/bundle-M6v8bdc6.js');
+var Channel_context = require('../chunks/bundle-_yIYQoui.js');
+require('../chunks/bundle-mc8PQfi_.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../chunks/bundle-gMxOq93o.js');
-require('../chunks/bundle-6ziaqiUd.js');
-require('../chunks/bundle-z-Bvsn0B.js');
-require('../chunks/bundle-1yOirqug.js');
+require('../chunks/bundle-Z8uBiYyS.js');
+require('../chunks/bundle-fTDV9UxX.js');
+require('../chunks/bundle-5l7POen0.js');
+require('../chunks/bundle-viTxhrPr.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-I_9_5a8a.js');
-require('../chunks/bundle-n1yh-qDb.js');
-require('../chunks/bundle-4bb_98h6.js');
+require('../chunks/bundle-RG3ZDmvE.js');
+require('../chunks/bundle-EVv3xRW8.js');
+require('../chunks/bundle-ACXel153.js');
 require('../useSendbirdStateContext.js');
 require('../withSendbird.js');
-require('../chunks/bundle-P_B0eyVT.js');
-require('../chunks/bundle-4q81wd8X.js');
-require('../chunks/bundle-28p7K0N-.js');
+require('../chunks/bundle-VHUezYnn.js');
+require('../chunks/bundle-8lUFYwiz.js');
+require('../chunks/bundle-pLajF9mf.js');
 require('@sendbird/chat/message');
-require('../chunks/bundle-c6O8NjZI.js');
-require('../chunks/bundle-tmB_l3Q9.js');
+require('../chunks/bundle-bQffWPr0.js');
+require('../chunks/bundle-a_NGo240.js');
 require('@sendbird/chat/groupChannel');
 require('../Channel/hooks/useInitialMessagesFetch.js');
-require('../pubSub/topics.js');
-require('../chunks/bundle-6o4fw0w0.js');
-require('../chunks/bundle-L9ushBZQ.js');
-require('../chunks/bundle-g_OXBrgT.js');
+require('../chunks/bundle-6fWeHUzf.js');
+require('../chunks/bundle-4iro9CUN.js');
+require('../chunks/bundle-wPu8WyIh.js');
+require('../chunks/bundle-leALuaxJ.js');
 
 function MessageItemMenu(_a) {
     var _b;

package/cjs/ui/MessageItemReactionMenu.js

@@ -6,18 +6,18 @@ var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_ReactionButton = require('./ReactionButton.js');
-var index = require('../chunks/bundle-FHx0K-3z.js');
-require('../chunks/bundle-hK4x7nmG.js');
+var index = require('../chunks/bundle-BUF_nc4Q.js');
+require('../chunks/bundle-mc8PQfi_.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../chunks/bundle-gMxOq93o.js');
-require('../chunks/bundle-6ziaqiUd.js');
-require('../chunks/bundle-z-Bvsn0B.js');
-require('../chunks/bundle-1yOirqug.js');
-require('../chunks/bundle-tywVawyg.js');
-require('../chunks/bundle-Y9TkHVI5.js');
+require('../chunks/bundle-Z8uBiYyS.js');
+require('../chunks/bundle-fTDV9UxX.js');
+require('../chunks/bundle-5l7POen0.js');
+require('../chunks/bundle-viTxhrPr.js');
+require('../chunks/bundle-FCrfVx0P.js');
+require('../chunks/bundle-kkxTVcGD.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-I_9_5a8a.js');
+require('../chunks/bundle-RG3ZDmvE.js');
 
 function MessageItemReactionMenu(_a) {
     var className = _a.className, message = _a.message, userId = _a.userId, _b = _a.spaceFromTrigger, spaceFromTrigger = _b === void 0 ? { x: 0, y: 0 } : _b, emojiContainer = _a.emojiContainer, toggleReaction = _a.toggleReaction, setSupposedHover = _a.setSupposedHover;

package/cjs/ui/MessageSearchFileItem.js

@@ -1,23 +1,23 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-hK4x7nmG.js');
+var _tslib = require('../chunks/bundle-mc8PQfi_.js');
 var React = require('react');
-var ui_Avatar = require('./Avatar.js');
+var ui_Avatar = require('../chunks/bundle-lj7KorhP.js');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../chunks/bundle-6ziaqiUd.js');
-var LocalizationContext = require('../chunks/bundle-QmSa90PC.js');
-var index$1 = require('../chunks/bundle-28p7K0N-.js');
-var index = require('../chunks/bundle-CUP2x37z.js');
-var index$2 = require('../chunks/bundle-FHx0K-3z.js');
-var utils = require('../chunks/bundle-p1cCW0sH.js');
+var ui_Label = require('../chunks/bundle-fTDV9UxX.js');
+var LocalizationContext = require('../chunks/bundle-80bw1Z-w.js');
+var index$1 = require('../chunks/bundle-pLajF9mf.js');
+var index = require('../chunks/bundle-cKt6NzI1.js');
+var index$2 = require('../chunks/bundle-BUF_nc4Q.js');
+var utils = require('../chunks/bundle-lkluBCYi.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-gMxOq93o.js');
-require('../chunks/bundle-1yOirqug.js');
-require('../chunks/bundle-z-Bvsn0B.js');
-require('../chunks/bundle-n1yh-qDb.js');
-require('../chunks/bundle-4rFcKXQa.js');
+require('../chunks/bundle-Z8uBiYyS.js');
+require('../chunks/bundle-viTxhrPr.js');
+require('../chunks/bundle-5l7POen0.js');
+require('../chunks/bundle-EVv3xRW8.js');
+require('../chunks/bundle-uE1K1eGs.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-I_9_5a8a.js');
+require('../chunks/bundle-RG3ZDmvE.js');
 
 function getCreatedAt(_a) {
     var createdAt = _a.createdAt, locale = _a.locale, stringSet = _a.stringSet;
@@ -76,7 +76,7 @@ function MessageSearchFileItem(props) {
             onClick(message);
         } },
         React.createElement("div", { className: "sendbird-message-search-file-item__left" },
-            React.createElement(ui_Avatar.default, { className: "sendbird-message-search-file-item__left__sender-avatar", src: profileUrl, alt: "profile image", width: "56px", height: "56px" })),
+            React.createElement(ui_Avatar.Avatar, { className: "sendbird-message-search-file-item__left__sender-avatar", src: profileUrl, alt: "profile image", width: "56px", height: "56px" })),
         React.createElement("div", { className: "sendbird-message-search-file-item__right" },
             React.createElement(ui_Label.Label, { className: "sendbird-message-search-file-item__right__sender-name", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, nickname || stringSet.NO_NAME),
             React.createElement("div", { className: "sendbird-message-search-file-item__right__content" },