@sendbird/uikit-react 3.14.10 → 3.14.11-rc-1

package/ui/MobileMenu.js

@@ -0,0 +1,387 @@
+import { _ as __assign } from '../chunks/bundle-CFPctvMY.js';
+import React__default, { useState } from 'react';
+import { l as isUserMessage, x as copyToClipboard, u as isFailedMessage, q as isSentMessage, v as isPendingMessage, b as isFileMessage, i as isVoiceMessage, O as isThreadMessage, y as getEmojiListAll } from '../chunks/bundle-Ci5HsRTf.js';
+import { n as noop, c as classnames } from '../chunks/bundle-D_-SsVPb.js';
+import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
+import { MenuItems } from './ContextMenu.js';
+import './IconButton.js';
+import { u as useLocalization } from '../chunks/bundle-QidoK1d-.js';
+import { u as useMessageMenuContext, a as MenuItem, M as MessageMenuProvider, B as BottomSheetMenuItem } from '../chunks/bundle-BHH2yc5e.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C5ry_tLy.js';
+import '@sendbird/chat';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import BottomSheet from './BottomSheet.js';
+import ImageRenderer from './ImageRenderer.js';
+import ReactionButton from './ReactionButton.js';
+import '@sendbird/chat/groupChannel';
+import '../utils/message/getOutgoingMessageState.js';
+import '../chunks/bundle-9-Mn7M_Z.js';
+import '../chunks/bundle-LFWpEfNl.js';
+import '../withSendbird.js';
+import 'react-dom';
+import '@sendbird/chat/openChannel';
+import './SortByRow.js';
+import '../chunks/bundle-DBI4R6Wl.js';
+import '../chunks/bundle-DpvwJ56x.js';
+import '../chunks/bundle-BGyFQLds.js';
+import '../chunks/bundle-Fw4J4vYE.js';
+import '../chunks/bundle-Ddmh-CSA.js';
+import './Button.js';
+import '@sendbird/uikit-tools';
+import 'css-vars-ponyfill';
+import '../chunks/bundle-B--KSVZl.js';
+import '../chunks/bundle-Das_HcJY.js';
+import '../chunks/bundle-D04CScdZ.js';
+
+var CopyMenuItem$1 = function (props) {
+    var _a;
+    var stringSet = useLocalization().stringSet;
+    var _b = useMessageMenuContext(), message = _b.message, hideMenu = _b.hideMenu;
+    return (React__default.createElement(MenuItem, __assign({}, props, { onClick: function (e) {
+            var _a;
+            if (isUserMessage(message))
+                copyToClipboard(message.message);
+            hideMenu();
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        } }), (_a = props.children) !== null && _a !== void 0 ? _a : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet.MESSAGE_MENU__COPY),
+        React__default.createElement(Icon, { type: IconTypes.COPY, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" })))));
+};
+var ReplyMenuItem$1 = function (props) {
+    var _a, _b, _c;
+    var stringSet = useLocalization().stringSet;
+    var _d = useMessageMenuContext(), message = _d.message, hideMenu = _d.hideMenu, setQuoteMessage = _d.setQuoteMessage;
+    return (React__default.createElement(MenuItem, __assign({}, props, { disabled: message.parentMessageId > 0, onClick: function (e) {
+            var _a;
+            setQuoteMessage(message);
+            hideMenu();
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        } }), (_a = props.children) !== null && _a !== void 0 ? _a : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: ((_b = message.parentMessageId) !== null && _b !== void 0 ? _b : 0) > 0 ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1 }, stringSet.MESSAGE_MENU__REPLY),
+        React__default.createElement(Icon, { type: IconTypes.REPLY, fillColor: ((_c = message.parentMessageId) !== null && _c !== void 0 ? _c : 0) > 0 ? IconColors.ON_BACKGROUND_4 : IconColors.PRIMARY, width: "24px", height: "24px" })))));
+};
+var ThreadMenuItem$1 = function (props) {
+    var _a;
+    var stringSet = useLocalization().stringSet;
+    var _b = useMessageMenuContext(), message = _b.message, hideMenu = _b.hideMenu, onReplyInThread = _b.onReplyInThread;
+    return (React__default.createElement(MenuItem, __assign({}, props, { onClick: function (e) {
+            var _a;
+            onReplyInThread({ message: message });
+            hideMenu();
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        } }), (_a = props.children) !== null && _a !== void 0 ? _a : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet.MESSAGE_MENU__THREAD),
+        React__default.createElement(Icon, { type: IconTypes.THREAD, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" })))));
+};
+var EditMenuItem$1 = function (props) {
+    var _a;
+    var stringSet = useLocalization().stringSet;
+    var _b = useMessageMenuContext(), hideMenu = _b.hideMenu, showEdit = _b.showEdit, isOnline = _b.isOnline;
+    return (React__default.createElement(MenuItem, __assign({}, props, { onClick: function (e) {
+            var _a;
+            if (isOnline) {
+                showEdit(true);
+                hideMenu();
+                (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }
+        } }), (_a = props.children) !== null && _a !== void 0 ? _a : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet.MESSAGE_MENU__EDIT),
+        React__default.createElement(Icon, { type: IconTypes.EDIT, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" })))));
+};
+var ResendMenuItem$1 = function (props) {
+    var _a;
+    var stringSet = useLocalization().stringSet;
+    var _b = useMessageMenuContext(), message = _b.message, hideMenu = _b.hideMenu, resendMessage = _b.resendMessage, isOnline = _b.isOnline;
+    return (React__default.createElement(MenuItem, __assign({}, props, { onClick: function (e) {
+            var _a;
+            if (isOnline) {
+                resendMessage(message);
+                hideMenu();
+                (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }
+        } }), (_a = props.children) !== null && _a !== void 0 ? _a : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet.MESSAGE_MENU__RESEND),
+        React__default.createElement(Icon, { type: IconTypes.REFRESH, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" })))));
+};
+var DeleteMenuItem$1 = function (props) {
+    var _a, _b, _c;
+    var stringSet = useLocalization().stringSet;
+    var _d = useMessageMenuContext(), message = _d.message, hideMenu = _d.hideMenu, deleteMessage = _d.deleteMessage, showRemove = _d.showRemove, isOnline = _d.isOnline, disableDeleteMessage = _d.disableDeleteMessage;
+    return (React__default.createElement(MenuItem, __assign({}, props, { disabled: typeof disableDeleteMessage === 'boolean'
+            ? disableDeleteMessage
+            : ((_b = (_a = message.threadInfo) === null || _a === void 0 ? void 0 : _a.replyCount) !== null && _b !== void 0 ? _b : 0) > 0, onClick: function (e) {
+            var _a;
+            if (isFailedMessage(message)) {
+                deleteMessage(message);
+            }
+            else if (isOnline) {
+                showRemove(true);
+                hideMenu();
+                (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }
+        } }), (_c = props.children) !== null && _c !== void 0 ? _c : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: disableDeleteMessage ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1 }, stringSet.MESSAGE_MENU__DELETE),
+        React__default.createElement(Icon, { type: IconTypes.DELETE, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" })))));
+};
+var DownloadMenuItem$1 = function (props) {
+    var _a;
+    var stringSet = useLocalization().stringSet;
+    var _b = useMessageMenuContext(), hideMenu = _b.hideMenu, message = _b.message, onDownloadClick = _b.onDownloadClick;
+    var url = message.url;
+    return (React__default.createElement(MenuItem, __assign({}, props, { onClick: function () {
+            hideMenu();
+        } }), (_a = props.children) !== null && _a !== void 0 ? _a : (React__default.createElement("a", { className: "sendbird-message__contextmenu--hyperlink", rel: "noopener noreferrer", href: url, target: "_blank", onClick: onDownloadClick },
+        React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet.MESSAGE_MENU__SAVE),
+        React__default.createElement(Icon, { type: IconTypes.DOWNLOAD, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" })))));
+};
+
+var MobileContextMenu = function (props) {
+    var _a, _b, _c, _d;
+    var channel = props.channel, message = props.message, replyType = props.replyType, userId = props.userId, resendMessage = props.resendMessage, showEdit = props.showEdit, showRemove = props.showRemove, deleteMenuState = props.deleteMenuState, deleteMessage = props.deleteMessage, setQuoteMessage = props.setQuoteMessage, parentRef = props.parentRef, onReplyInThread = props.onReplyInThread, _e = props.isOpenedFromThread, isOpenedFromThread = _e === void 0 ? false : _e, _f = props.onDownloadClick, onDownloadClick = _f === void 0 ? null : _f, renderMenuItems = props.renderMenuItems, hideMobileMenu = props.hideMenu;
+    var isByMe = ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId) === userId;
+    var config = useSendbirdStateContext().config;
+    var isOnline = config.isOnline;
+    // Menu Items condition
+    var showMenuItemCopy = isUserMessage(message);
+    var showMenuItemEdit = isUserMessage(message) && isSentMessage(message) && isByMe;
+    var showMenuItemResend = isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe;
+    var showMenuItemDelete = !isPendingMessage(message) && isByMe;
+    var showMenuItemDeleteByState = isByMe && (deleteMenuState === undefined || deleteMenuState !== 'HIDE');
+    var showMenuItemDeleteFinal = showMenuItemDeleteByState && showMenuItemDelete;
+    var showMenuItemDownload = !isPendingMessage(message) && isFileMessage(message) && !(isVoiceMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isSuper) || (channel === null || channel === void 0 ? void 0 : channel.isBroadcast));
+    var showMenuItemReply = replyType === 'QUOTE_REPLY' && !isFailedMessage(message) && !isPendingMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel());
+    var showMenuItemThread = replyType === 'THREAD' && !isOpenedFromThread && !isFailedMessage(message) && !isPendingMessage(message) && !isThreadMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel());
+    var disableDeleteMessage = (deleteMenuState !== undefined && deleteMenuState === 'DISABLE') || ((_c = (_b = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _b === void 0 ? void 0 : _b.replyCount) !== null && _c !== void 0 ? _c : 0) > 0;
+    var contextValue = {
+        message: message,
+        hideMenu: hideMobileMenu,
+        setQuoteMessage: setQuoteMessage,
+        onReplyInThread: onReplyInThread,
+        onMoveToParentMessage: noop,
+        showEdit: showEdit,
+        showRemove: showRemove,
+        deleteMessage: deleteMessage,
+        resendMessage: resendMessage,
+        isOnline: isOnline,
+        disableDeleteMessage: disableDeleteMessage,
+        triggerRef: parentRef,
+        containerRef: parentRef,
+        onDownloadClick: onDownloadClick,
+    };
+    return (React__default.createElement(MessageMenuProvider, { value: contextValue },
+        React__default.createElement(MenuItems, { className: "sendbird-message__mobile-context-menu", parentRef: parentRef, parentContainRef: parentRef, closeDropdown: hideMobileMenu }, (_d = renderMenuItems === null || renderMenuItems === void 0 ? void 0 : renderMenuItems({
+            items: {
+                CopyMenuItem: CopyMenuItem$1,
+                ReplyMenuItem: ReplyMenuItem$1,
+                ThreadMenuItem: ThreadMenuItem$1,
+                EditMenuItem: EditMenuItem$1,
+                ResendMenuItem: ResendMenuItem$1,
+                DeleteMenuItem: DeleteMenuItem$1,
+            },
+        })) !== null && _d !== void 0 ? _d : (React__default.createElement(React__default.Fragment, null,
+            showMenuItemCopy && React__default.createElement(CopyMenuItem$1, null),
+            showMenuItemReply && React__default.createElement(ReplyMenuItem$1, null),
+            showMenuItemThread && React__default.createElement(ThreadMenuItem$1, null),
+            showMenuItemEdit && React__default.createElement(EditMenuItem$1, null),
+            showMenuItemResend && React__default.createElement(ResendMenuItem$1, null),
+            showMenuItemDeleteFinal && React__default.createElement(DeleteMenuItem$1, null),
+            showMenuItemDownload && React__default.createElement(DownloadMenuItem$1, null))))));
+};
+
+var CopyMenuItem = function (props) {
+    var _a;
+    var stringSet = useLocalization().stringSet;
+    var _b = useMessageMenuContext(), message = _b.message, hideMenu = _b.hideMenu;
+    return (React__default.createElement(BottomSheetMenuItem, __assign({}, props, { onClick: function (e) {
+            var _a;
+            if (isUserMessage(message))
+                copyToClipboard(message.message);
+            hideMenu();
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        } }), (_a = props.children) !== null && _a !== void 0 ? _a : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Icon, { type: IconTypes.COPY, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" }),
+        React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet.MESSAGE_MENU__COPY)))));
+};
+var EditMenuItem = function (props) {
+    var _a;
+    var stringSet = useLocalization().stringSet;
+    var _b = useMessageMenuContext(), hideMenu = _b.hideMenu, showEdit = _b.showEdit, isOnline = _b.isOnline;
+    return (React__default.createElement(BottomSheetMenuItem, __assign({}, props, { onClick: function (e) {
+            var _a;
+            if (isOnline) {
+                showEdit(true);
+                hideMenu();
+                (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }
+        } }), (_a = props.children) !== null && _a !== void 0 ? _a : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Icon, { type: IconTypes.EDIT, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" }),
+        React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet.MESSAGE_MENU__EDIT)))));
+};
+var ResendMenuItem = function (props) {
+    var _a;
+    var stringSet = useLocalization().stringSet;
+    var _b = useMessageMenuContext(), message = _b.message, hideMenu = _b.hideMenu, resendMessage = _b.resendMessage, isOnline = _b.isOnline;
+    return (React__default.createElement(BottomSheetMenuItem, __assign({}, props, { onClick: function (e) {
+            var _a;
+            if (isOnline) {
+                resendMessage(message);
+                hideMenu();
+                (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }
+        } }), (_a = props.children) !== null && _a !== void 0 ? _a : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Icon, { type: IconTypes.REFRESH, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" }),
+        React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet.MESSAGE_MENU__RESEND)))));
+};
+var ReplyMenuItem = function (props) {
+    var _a, _b, _c;
+    var stringSet = useLocalization().stringSet;
+    var _d = useMessageMenuContext(), message = _d.message, hideMenu = _d.hideMenu, setQuoteMessage = _d.setQuoteMessage;
+    return (React__default.createElement(BottomSheetMenuItem, __assign({}, props, { disabled: message.parentMessageId > 0, onClick: function (e) {
+            var _a;
+            setQuoteMessage(message);
+            hideMenu();
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        } }), (_a = props.children) !== null && _a !== void 0 ? _a : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Icon, { type: IconTypes.REPLY, fillColor: ((_b = message.parentMessageId) !== null && _b !== void 0 ? _b : 0) > 0 ? IconColors.ON_BACKGROUND_3 : IconColors.PRIMARY, width: "24px", height: "24px" }),
+        React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: ((_c = message.parentMessageId) !== null && _c !== void 0 ? _c : 0) > 0 ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1 }, stringSet.MESSAGE_MENU__REPLY)))));
+};
+var ThreadMenuItem = function (props) {
+    var _a;
+    var stringSet = useLocalization().stringSet;
+    var _b = useMessageMenuContext(), message = _b.message, hideMenu = _b.hideMenu, onReplyInThread = _b.onReplyInThread;
+    return (React__default.createElement(BottomSheetMenuItem, __assign({}, props, { onClick: function (e) {
+            var _a;
+            onReplyInThread({ message: message });
+            hideMenu();
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        } }), (_a = props.children) !== null && _a !== void 0 ? _a : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Icon, { type: IconTypes.THREAD, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" }),
+        React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet.MESSAGE_MENU__THREAD)))));
+};
+var DeleteMenuItem = function (props) {
+    var _a, _b, _c;
+    var stringSet = useLocalization().stringSet;
+    var _d = useMessageMenuContext(), message = _d.message, hideMenu = _d.hideMenu, deleteMessage = _d.deleteMessage, showRemove = _d.showRemove, isOnline = _d.isOnline, disableDeleteMessage = _d.disableDeleteMessage;
+    return (React__default.createElement(BottomSheetMenuItem, __assign({}, props, { disabled: typeof disableDeleteMessage === 'boolean'
+            ? disableDeleteMessage
+            : ((_b = (_a = message.threadInfo) === null || _a === void 0 ? void 0 : _a.replyCount) !== null && _b !== void 0 ? _b : 0) > 0, onClick: function (e) {
+            var _a;
+            if (isFailedMessage(message)) {
+                deleteMessage(message);
+            }
+            else if (isOnline) {
+                showRemove(true);
+                hideMenu();
+                (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }
+        } }), (_c = props.children) !== null && _c !== void 0 ? _c : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Icon, { type: IconTypes.DELETE, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" }),
+        React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: disableDeleteMessage ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1 }, stringSet.MESSAGE_MENU__DELETE)))));
+};
+var DownloadMenuItem = function (props) {
+    var _a;
+    var stringSet = useLocalization().stringSet;
+    var _b = useMessageMenuContext(), hideMenu = _b.hideMenu, message = _b.message, onDownloadClick = _b.onDownloadClick;
+    var url = message.url;
+    return (React__default.createElement(BottomSheetMenuItem, { onClick: function () { return hideMenu(); } }, (_a = props.children) !== null && _a !== void 0 ? _a : (React__default.createElement("a", { className: "sendbird-message__bottomsheet--hyperlink", rel: "noopener noreferrer", href: url, target: "_blank", onClick: onDownloadClick },
+        React__default.createElement(Icon, { type: IconTypes.DOWNLOAD, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" }),
+        React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet.MESSAGE_MENU__SAVE)))));
+};
+
+var EMOJI_SIZE = 38;
+var MobileBottomSheet = function (props) {
+    var _a, _b, _c, _d;
+    var hideMenu = props.hideMenu, channel = props.channel, emojiContainer = props.emojiContainer, message = props.message, replyType = props.replyType, userId = props.userId, resendMessage = props.resendMessage, deleteMessage = props.deleteMessage, toggleReaction = props.toggleReaction, _e = props.isReactionEnabled, isReactionEnabled = _e === void 0 ? false : _e, showEdit = props.showEdit, showRemove = props.showRemove, deleteMenuState = props.deleteMenuState, setQuoteMessage = props.setQuoteMessage, onReplyInThread = props.onReplyInThread, _f = props.isOpenedFromThread, isOpenedFromThread = _f === void 0 ? false : _f, onDownloadClick = props.onDownloadClick, renderMenuItems = props.renderMenuItems;
+    var isByMe = ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId) === userId;
+    var config = useSendbirdStateContext().config;
+    var isOnline = config.isOnline;
+    var showMenuItemCopy = isUserMessage(message);
+    var showMenuItemEdit = (isUserMessage(message) && isSentMessage(message) && isByMe);
+    var showMenuItemResend = (isOnline && isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe);
+    var showMenuItemDelete = !isPendingMessage(message) && isByMe;
+    var showMenuItemDeleteByState = isByMe && (deleteMenuState === undefined || deleteMenuState !== 'HIDE');
+    var showMenuItemDeleteFinal = showMenuItemDeleteByState && showMenuItemDelete;
+    var disableDelete = ((deleteMenuState !== undefined && deleteMenuState === 'DISABLE')
+        || ((_c = (_b = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _b === void 0 ? void 0 : _b.replyCount) !== null && _c !== void 0 ? _c : 0) > 0);
+    var showMenuItemDownload = isSentMessage(message) && isFileMessage(message) && !isVoiceMessage(message);
+    var showReaction = !isFailedMessage(message) && !isPendingMessage(message) && isReactionEnabled;
+    var showMenuItemReply = (replyType === 'QUOTE_REPLY')
+        && !isFailedMessage(message)
+        && !isPendingMessage(message)
+        && ((channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && !(channel === null || channel === void 0 ? void 0 : channel.isBroadcast));
+    var showMenuItemThread = (replyType === 'THREAD') && !isOpenedFromThread
+        && !isFailedMessage(message)
+        && !isPendingMessage(message)
+        && !isThreadMessage(message)
+        && ((channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && !(channel === null || channel === void 0 ? void 0 : channel.isBroadcast));
+    var maxEmojisPerRow = Math.floor(window.innerWidth / EMOJI_SIZE) - 1;
+    var _g = useState(false), showEmojisOnly = _g[0], setShowEmojisOnly = _g[1];
+    var emojis = emojiContainer && getEmojiListAll(emojiContainer);
+    var visibleEmojis = showEmojisOnly ? emojis : emojis === null || emojis === void 0 ? void 0 : emojis.slice(0, maxEmojisPerRow);
+    var canShowMoreEmojis = emojis && emojis.length > maxEmojisPerRow;
+    var contextValue = {
+        message: message,
+        hideMenu: hideMenu,
+        setQuoteMessage: setQuoteMessage,
+        onReplyInThread: onReplyInThread,
+        onMoveToParentMessage: function () { },
+        showEdit: showEdit,
+        showRemove: showRemove,
+        deleteMessage: deleteMessage,
+        resendMessage: resendMessage,
+        isOnline: isOnline,
+        disableDeleteMessage: disableDelete,
+        triggerRef: null,
+        containerRef: null,
+        onDownloadClick: onDownloadClick,
+    };
+    return (React__default.createElement(MessageMenuProvider, { value: contextValue },
+        React__default.createElement(BottomSheet, { onBackdropClick: hideMenu },
+            React__default.createElement("div", { className: "sendbird-message__bottomsheet" },
+                showReaction && (React__default.createElement("div", { className: "sendbird-message__bottomsheet-reactions" },
+                    React__default.createElement("ul", { className: "sendbird-message__bottomsheet-reaction-bar" },
+                        React__default.createElement("div", { className: classnames('sendbird-message__bottomsheet-reaction-bar__row', showEmojisOnly && 'sendbird-message__bottomsheet-reaction-bar__all') },
+                            visibleEmojis.map(function (emoji) {
+                                var _a, _b, _c;
+                                var isReacted = (_c = (_b = (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.filter(function (reaction) { return reaction.key === emoji.key; })[0]) === null || _b === void 0 ? void 0 : _b.userIds) === null || _c === void 0 ? void 0 : _c.some(function (reactorId) { return reactorId === userId; });
+                                return (React__default.createElement(ReactionButton, { key: emoji.key, width: "".concat(EMOJI_SIZE, "px"), height: "".concat(EMOJI_SIZE, "px"), selected: isReacted, onClick: function () {
+                                        hideMenu();
+                                        toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, emoji.key, isReacted);
+                                    }, testID: "ui_mobile_emoji_reactions_menu_".concat(emoji.key) },
+                                    React__default.createElement(ImageRenderer, { url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '', width: "28px", height: "28px", placeHolder: function (_a) {
+                                            var style = _a.style;
+                                            return (React__default.createElement("div", { style: style },
+                                                React__default.createElement(Icon, { type: IconTypes.QUESTION, fillColor: IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" })));
+                                        } })));
+                            }),
+                            canShowMoreEmojis && !showEmojisOnly && (React__default.createElement(ReactionButton, { key: "emoji_more", width: "38px", height: "38px", onClick: function () { return setShowEmojisOnly(true); }, testID: "ui_mobile_emoji_reactions_menu_emojiadd" },
+                                React__default.createElement(ImageRenderer, { url: '', width: "28px", height: "28px", placeHolder: function (_a) {
+                                        var style = _a.style;
+                                        return (React__default.createElement("div", { style: style },
+                                            React__default.createElement(Icon, { type: IconTypes.EMOJI_MORE, fillColor: IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" })));
+                                    } }))))))),
+                !showEmojisOnly && (React__default.createElement("div", { className: "sendbird-message__bottomsheet--actions" }, (_d = renderMenuItems === null || renderMenuItems === void 0 ? void 0 : renderMenuItems({
+                    items: {
+                        CopyMenuItem: CopyMenuItem,
+                        EditMenuItem: EditMenuItem,
+                        ResendMenuItem: ResendMenuItem,
+                        ReplyMenuItem: ReplyMenuItem,
+                        ThreadMenuItem: ThreadMenuItem,
+                        DeleteMenuItem: DeleteMenuItem,
+                    },
+                })) !== null && _d !== void 0 ? _d : (React__default.createElement(React__default.Fragment, null,
+                    showMenuItemCopy && React__default.createElement(CopyMenuItem, null),
+                    showMenuItemEdit && React__default.createElement(EditMenuItem, null),
+                    showMenuItemResend && React__default.createElement(ResendMenuItem, null),
+                    showMenuItemReply && React__default.createElement(ReplyMenuItem, null),
+                    showMenuItemThread && React__default.createElement(ThreadMenuItem, null),
+                    showMenuItemDeleteFinal && React__default.createElement(DeleteMenuItem, null),
+                    showMenuItemDownload && React__default.createElement(DownloadMenuItem, null)))))))));
+};
+
+var MobileMenu = function (props) {
+    return (React__default.createElement(React__default.Fragment, null, (props === null || props === void 0 ? void 0 : props.isReactionEnabled) ? React__default.createElement(MobileBottomSheet, __assign({}, props)) : React__default.createElement(MobileContextMenu, __assign({}, props))));
+};
+
+export { MobileBottomSheet, MobileContextMenu, MobileMenu, MobileMenu as default };
+//# sourceMappingURL=MobileMenu.js.map

package/ui/MobileMenu.js.map

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

package/ui/Modal.js

@@ -1,29 +1,30 @@
-import '../chunks/bundle-qivrTGrV.js';
+import '../chunks/bundle-CFPctvMY.js';
 import 'react';
 import 'react-dom';
-import '../chunks/bundle-CymNo3WD.js';
-export { M as Modal, f as ModalBody, c as ModalFooter, e as ModalHeader, M as default } from '../chunks/bundle-ZiboK-fO.js';
-import '../chunks/bundle-DLSqJtw7.js';
-import '../chunks/bundle-D3QfP61V.js';
+import '../chunks/bundle-D_-SsVPb.js';
+export { M as Modal, f as ModalBody, c as ModalFooter, e as ModalHeader, M as default } from '../chunks/bundle-Fw4J4vYE.js';
+import '../chunks/bundle-QidoK1d-.js';
+import '../chunks/bundle-Ddmh-CSA.js';
 import './IconButton.js';
 import './Button.js';
 import './Icon.js';
-import '../chunks/bundle-6WkrZ6GC.js';
+import '../chunks/bundle-C5ry_tLy.js';
 import '@sendbird/uikit-tools';
 import '../withSendbird.js';
 import 'css-vars-ponyfill';
-import '../chunks/bundle-C9dq6ZD4.js';
+import '../chunks/bundle-Ci5HsRTf.js';
 import '@sendbird/chat';
-import '../chunks/bundle-C7f1DHyg.js';
+import '../chunks/bundle-DBI4R6Wl.js';
 import '@sendbird/chat/openChannel';
 import '@sendbird/chat/groupChannel';
-import '../chunks/bundle-BRMIsbFP.js';
-import '../chunks/bundle-D4w7NQSK.js';
+import '../chunks/bundle-B--KSVZl.js';
+import './ContextMenu.js';
 import '../useSendbirdStateContext.js';
-import '../chunks/bundle-DExTOIEC.js';
-import '../chunks/bundle-BPtW84KW.js';
-import '../chunks/bundle-CJ0gnHtN.js';
+import '../chunks/bundle-Das_HcJY.js';
+import '../chunks/bundle-DpvwJ56x.js';
+import '../chunks/bundle-BGyFQLds.js';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-Cj5JMK7Q.js';
-import '../chunks/bundle-CP4szzas.js';
+import '../chunks/bundle-9-Mn7M_Z.js';
+import '../chunks/bundle-LFWpEfNl.js';
+import './SortByRow.js';
 //# sourceMappingURL=Modal.js.map

package/ui/Modal.js.map

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

package/ui/MutedAvatarOverlay.js

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import '../chunks/bundle-qivrTGrV.js';
-import '../chunks/bundle-CymNo3WD.js';
+import '../chunks/bundle-CFPctvMY.js';
+import '../chunks/bundle-D_-SsVPb.js';
 
 function MutedAvatarOverlay(props) {
     var _a = props.height, height = _a === void 0 ? 24 : _a, _b = props.width, width = _b === void 0 ? 24 : _b;

package/ui/OGMessageItemBody.js

@@ -1,36 +1,35 @@
 import React__default, { useContext, useMemo, useRef, useEffect } from 'react';
 import ImageRenderer from './ImageRenderer.js';
 import Icon, { IconTypes } from './Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-6WkrZ6GC.js';
-import { w as getClassName, d as isEditedMessage } from '../chunks/bundle-C9dq6ZD4.js';
-import { L as LocalizationContext } from '../chunks/bundle-DLSqJtw7.js';
-import { T as TextFragment } from '../chunks/bundle-DZhrQ9kO.js';
-import { t as tokenizeMessage } from '../chunks/bundle-CnfTwxdb.js';
-import { O as OG_MESSAGE_BODY_CLASSNAME } from '../chunks/bundle-D5fZI6wu.js';
-import { u as useMediaQueryContext } from '../chunks/bundle-D3QfP61V.js';
-import { o as openURL, c as classnames } from '../chunks/bundle-CymNo3WD.js';
-import '../chunks/bundle-qivrTGrV.js';
-import '../chunks/bundle-BPtW84KW.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C5ry_tLy.js';
+import { w as getClassName, d as isEditedMessage } from '../chunks/bundle-Ci5HsRTf.js';
+import { L as LocalizationContext } from '../chunks/bundle-QidoK1d-.js';
+import { T as TextFragment } from '../chunks/bundle-ChMsC3d8.js';
+import { t as tokenizeMessage } from '../chunks/bundle-BRLMd1qq.js';
+import { O as OG_MESSAGE_BODY_CLASSNAME } from '../chunks/bundle-CA_gJKx5.js';
+import { u as useMediaQueryContext } from '../chunks/bundle-Ddmh-CSA.js';
+import { o as openURL, c as classnames } from '../chunks/bundle-D_-SsVPb.js';
+import '../chunks/bundle-CFPctvMY.js';
+import '../chunks/bundle-DpvwJ56x.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-Cj5JMK7Q.js';
-import '../chunks/bundle-CP4szzas.js';
-import '../chunks/bundle-CJ0gnHtN.js';
+import '../chunks/bundle-9-Mn7M_Z.js';
+import '../chunks/bundle-LFWpEfNl.js';
+import '../chunks/bundle-BGyFQLds.js';
 import '../Message/context.js';
 import './MentionLabel.js';
 import './ContextMenu.js';
-import '../chunks/bundle-D4w7NQSK.js';
 import 'react-dom';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
 import './SortByRow.js';
-import '../chunks/bundle-C7f1DHyg.js';
+import '../chunks/bundle-DBI4R6Wl.js';
 import './UserProfile.js';
-import '../chunks/bundle-DyLTHcXb.js';
+import '../chunks/bundle-MnMO7fTy.js';
 import '../sendbirdSelectors.js';
-import '../chunks/bundle-DJ72fQy-.js';
-import '../chunks/bundle-Dk_le87C.js';
-import '../chunks/bundle-Cj4fyKiq.js';
+import '../chunks/bundle-mnktcUOP.js';
+import '../chunks/bundle-BUTDHQ0K.js';
+import '../chunks/bundle-gYCdtXHX.js';
 import './Button.js';
 import '../useSendbirdStateContext.js';
 import '../withSendbird.js';
@@ -38,9 +37,9 @@ import './LinkLabel.js';
 
 function OGMessageItemBody(_a) {
     var _b, _c, _d, _e;
-    var className = _a.className, message = _a.message, _f = _a.isByMe, isByMe = _f === void 0 ? false : _f, _g = _a.mouseHover, mouseHover = _g === void 0 ? false : _g, _h = _a.isMentionEnabled, isMentionEnabled = _h === void 0 ? false : _h, _j = _a.isReactionEnabled, isReactionEnabled = _j === void 0 ? false : _j, _k = _a.onMessageHeightChange, onMessageHeightChange = _k === void 0 ? function () {
+    var className = _a.className, message = _a.message, _f = _a.isByMe, isByMe = _f === void 0 ? false : _f, _g = _a.mouseHover, mouseHover = _g === void 0 ? false : _g, _h = _a.isMentionEnabled, isMentionEnabled = _h === void 0 ? false : _h, _j = _a.isReactionEnabled, isReactionEnabled = _j === void 0 ? false : _j, _k = _a.isMarkdownEnabled, isMarkdownEnabled = _k === void 0 ? false : _k, _l = _a.onMessageHeightChange, onMessageHeightChange = _l === void 0 ? function () {
         /* noop */
-    } : _k;
+    } : _l;
     var stringSet = useContext(LocalizationContext).stringSet;
     var isMessageMentioned = isMentionEnabled && ((_b = message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate) === null || _b === void 0 ? void 0 : _b.length) > 0 && (message === null || message === void 0 ? void 0 : message.mentionedUsers) && ((_c = message === null || message === void 0 ? void 0 : message.mentionedUsers) === null || _c === void 0 ? void 0 : _c.length) > 0;
     var tokens = useMemo(function () {
@@ -49,10 +48,12 @@ function OGMessageItemBody(_a) {
             return tokenizeMessage({
                 mentionedUsers: (_a = message === null || message === void 0 ? void 0 : message.mentionedUsers) !== null && _a !== void 0 ? _a : undefined,
                 messageText: message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate,
+                includeMarkdown: isMarkdownEnabled,
             });
         }
         return tokenizeMessage({
             messageText: message === null || message === void 0 ? void 0 : message.message,
+            includeMarkdown: isMarkdownEnabled,
         });
     }, [message === null || message === void 0 ? void 0 : message.updatedAt, message === null || message === void 0 ? void 0 : message.message]);
     var openOpenGraphURL = function () { var _a; return openURL((_a = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _a === void 0 ? void 0 : _a.url); };

package/ui/OGMessageItemBody.js.map

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

package/ui/OpenChannelAdminMessage.js

@@ -1,7 +1,7 @@
-import { c as __spreadArray } from '../chunks/bundle-qivrTGrV.js';
+import { c as __spreadArray } from '../chunks/bundle-CFPctvMY.js';
 import React__default from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-6WkrZ6GC.js';
-import '../chunks/bundle-BPtW84KW.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C5ry_tLy.js';
+import '../chunks/bundle-DpvwJ56x.js';
 
 function OpenChannelAdminMessage(_a) {
     var className = _a.className, message = _a.message;

package/ui/OpenChannelAvatar.js

@@ -1,14 +1,14 @@
 import React__default, { useContext, useMemo } from 'react';
-import { A as Avatar } from '../chunks/bundle-Dk_le87C.js';
-import { L as LocalizationContext } from '../chunks/bundle-DLSqJtw7.js';
-import { b as getOpenChannelAvatar } from '../chunks/bundle-Bmi-ESIg.js';
-import '../chunks/bundle-qivrTGrV.js';
+import { A as Avatar } from '../chunks/bundle-BUTDHQ0K.js';
+import { L as LocalizationContext } from '../chunks/bundle-QidoK1d-.js';
+import { b as getOpenChannelAvatar } from '../chunks/bundle-DDyW5U8c.js';
+import '../chunks/bundle-CFPctvMY.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-CymNo3WD.js';
-import '../chunks/bundle-Cj4fyKiq.js';
+import '../chunks/bundle-D_-SsVPb.js';
+import '../chunks/bundle-gYCdtXHX.js';
 import './Icon.js';
-import '../chunks/bundle-BPtW84KW.js';
-import '../chunks/bundle-CJ0gnHtN.js';
+import '../chunks/bundle-DpvwJ56x.js';
+import '../chunks/bundle-BGyFQLds.js';
 
 function ChannelAvatar(_a) {
     var channel = _a.channel, theme = _a.theme, _b = _a.height, height = _b === void 0 ? 56 : _b, _c = _a.width, width = _c === void 0 ? 56 : _c;

package/ui/OpenchannelConversationHeader.js

@@ -1,15 +1,15 @@
 import React__default, { useContext } from 'react';
-import { A as Avatar } from '../chunks/bundle-Dk_le87C.js';
+import { A as Avatar } from '../chunks/bundle-BUTDHQ0K.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import IconButton from './IconButton.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-6WkrZ6GC.js';
-import { L as LocalizationContext } from '../chunks/bundle-DLSqJtw7.js';
-import '../chunks/bundle-qivrTGrV.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C5ry_tLy.js';
+import { L as LocalizationContext } from '../chunks/bundle-QidoK1d-.js';
+import '../chunks/bundle-CFPctvMY.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-CymNo3WD.js';
-import '../chunks/bundle-Cj4fyKiq.js';
-import '../chunks/bundle-BPtW84KW.js';
-import '../chunks/bundle-CJ0gnHtN.js';
+import '../chunks/bundle-D_-SsVPb.js';
+import '../chunks/bundle-gYCdtXHX.js';
+import '../chunks/bundle-DpvwJ56x.js';
+import '../chunks/bundle-BGyFQLds.js';
 
 function OpenchannelConversationHeader(_a) {
     var coverImage = _a.coverImage, title = _a.title, subTitle = _a.subTitle, amIOperator = _a.amIOperator, onActionClick = _a.onActionClick;