@sendbird/uikit-react 3.10.1 → 3.11.0

package/cjs/chunks/{bundle-9iE0HY96.js → bundle-JReI_QbA.js}

@@ -1,7 +1,6 @@
 'use strict';
 
-var _tslib = require('./bundle-bXLZZTmP.js');
-var index = require('./bundle-p6kWiWDv.js');
+var _tslib = require('./bundle-RVs527mS.js');
 
 var USER_MENTION_PREFIX = '@';
 
@@ -54,21 +53,38 @@ function identifyMentions(_a) {
     return results;
 }
 function identifyUrlsAndStrings(token) {
+    var URL_REG = /(?:https?:\/\/|www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.(xn--)?[a-z0-9-]{2,20}\b([-a-zA-Z0-9@:%_+[\],.~#?&/=]*[-a-zA-Z0-9@:%_+~#?&/=])*/g;
     var results = token.map(function (token) {
         if (token.type !== TOKEN_TYPES.undetermined) {
             return token;
         }
         var _a = token.value, value = _a === void 0 ? '' : _a;
-        var parts = value.split(' ');
-        var tokens = parts.map(function (part) {
-            if (index.isUrl(part)) {
-                return { value: part, type: TOKEN_TYPES.url };
-            }
-            else {
-                return { value: part, type: TOKEN_TYPES.string };
-            }
+        var matches = Array.from(value.matchAll(URL_REG));
+        var founds = matches.map(function (value) {
+            var _a;
+            var text = value[0];
+            var start = (_a = value.index) !== null && _a !== void 0 ? _a : 0;
+            var end = start + text.length;
+            return { text: text, start: start, end: end };
         });
-        return tokens;
+        var items = [{ value: value, type: TOKEN_TYPES.string }];
+        var cursor = 0;
+        founds.forEach(function (_a) {
+            var text = _a.text, start = _a.start, end = _a.end;
+            var restText = items.pop().value;
+            var head = restText.slice(0, start - cursor);
+            var mid = text;
+            var tail = restText.slice(end - cursor);
+            items.push({ value: head, type: TOKEN_TYPES.string }, { value: mid, type: TOKEN_TYPES.url });
+            if (tail.length > 0)
+                items.push({ value: tail, type: TOKEN_TYPES.string });
+            cursor = end;
+        });
+        // Remove the first empty string
+        if (items[0].value === '' && items[0].type === TOKEN_TYPES.string) {
+            items.shift();
+        }
+        return items;
     }).flat();
     return results;
 }
@@ -76,7 +92,7 @@ function combineNearbyStrings(tokens) {
     var results = tokens.reduce(function (acc, token) {
         var lastToken = acc[acc.length - 1];
         if ((lastToken === null || lastToken === void 0 ? void 0 : lastToken.type) === TOKEN_TYPES.string && token.type === TOKEN_TYPES.string) {
-            lastToken.value = "".concat(lastToken.value, " ").concat(token.value);
+            lastToken.value = "".concat(lastToken.value).concat(token.value);
             return acc;
         }
         return _tslib.__spreadArray(_tslib.__spreadArray([], acc, true), [token], false);
@@ -134,4 +150,4 @@ exports.TOKEN_TYPES = TOKEN_TYPES;
 exports.USER_MENTION_PREFIX = USER_MENTION_PREFIX;
 exports.getWhiteSpacePreservedText = getWhiteSpacePreservedText;
 exports.tokenizeMessage = tokenizeMessage;
-//# sourceMappingURL=bundle-9iE0HY96.js.map
+//# sourceMappingURL=bundle-JReI_QbA.js.map

package/cjs/chunks/bundle-JReI_QbA.js.map

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

package/cjs/chunks/{bundle-aoIToceJ.js → bundle-JVylXDBB.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var index$1 = require('./bundle-p6kWiWDv.js');
-var index = require('./bundle-65IwoStx.js');
+var index$1 = require('./bundle-fnv2bNo-.js');
+var index = require('./bundle--RWWGoZo.js');
 
 function getMessageFirstFileType(message) {
     return index.K(message)
@@ -71,4 +71,4 @@ exports.getMessageFirstFileName = getMessageFirstFileName;
 exports.getMessageFirstFileThumbnailUrl = getMessageFirstFileThumbnailUrl;
 exports.getMessageFirstFileType = getMessageFirstFileType;
 exports.getMessageFirstFileUrl = getMessageFirstFileUrl;
-//# sourceMappingURL=bundle-aoIToceJ.js.map
+//# sourceMappingURL=bundle-JVylXDBB.js.map

package/cjs/chunks/bundle-JVylXDBB.js.map

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

package/cjs/chunks/{bundle-7J3nX_hP.js → bundle-JaD2Ao-u.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var _tslib = require('./bundle-bXLZZTmP.js');
+var _tslib = require('./bundle-RVs527mS.js');
 var React = require('react');
-var stringSet = require('./bundle-kSScygqj.js');
+var stringSet = require('./bundle-OBj337Le.js');
 
 var Typography = {
     H_1: 'H_1',
@@ -83,4 +83,4 @@ exports.LabelColors = LabelColors;
 exports.LabelStringSet = LabelStringSet;
 exports.LabelTypography = LabelTypography;
 exports.changeColorToClassName = changeColorToClassName;
-//# sourceMappingURL=bundle-7J3nX_hP.js.map
+//# sourceMappingURL=bundle-JaD2Ao-u.js.map

package/cjs/chunks/bundle-JaD2Ao-u.js.map

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

package/cjs/chunks/bundle-JwSYMgZa.js

@@ -0,0 +1,284 @@
+'use strict';
+
+var _tslib = require('./bundle-RVs527mS.js');
+var React = require('react');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var Channel_context = require('../Channel/context.js');
+var index = require('./bundle-fnv2bNo-.js');
+var utils$1 = require('./bundle-a1nOrOrG.js');
+var index$1 = require('./bundle-7sO7MuTY.js');
+var LocalizationContext = require('./bundle-WLD9KKbn.js');
+var SuggestedMentionListView = require('./bundle-WuJcM_O3.js');
+var utils = require('./bundle-C42WLw1z.js');
+var Message_hooks_useDirtyGetMentions = require('../Message/hooks/useDirtyGetMentions.js');
+var ui_DateSeparator = require('../ui/DateSeparator.js');
+var ui_Label = require('./bundle-JaD2Ao-u.js');
+var ui_MessageInput = require('../ui/MessageInput.js');
+var _const = require('./bundle-L5q_NWiq.js');
+var ui_MessageContent = require('../ui/MessageContent.js');
+var Channel_components_FileViewer = require('./bundle-nTv23k8q.js');
+var Channel_components_RemoveMessageModal = require('./bundle-p7twnCCD.js');
+
+var useDidMountEffect = function (func, deps) {
+    var _a = React.useState(false), didMount = _a[0], setDidmount = _a[1];
+    React.useEffect(function () {
+        if (didMount) {
+            func();
+        }
+        else {
+            setDidmount(true);
+        }
+    }, deps);
+};
+
+var SuggestedReplies = function (_a) {
+    var replyOptions = _a.replyOptions, onSendMessage = _a.onSendMessage;
+    var _b = React.useState(false), replied = _b[0], setReplied = _b[1];
+    var onClickReply = function (event, option) {
+        event.preventDefault();
+        onSendMessage({ message: option });
+        setReplied(true);
+    };
+    if (replied) {
+        return null;
+    }
+    return (React.createElement("div", { className: "sendbird-suggested-replies" }, replyOptions.map(function (option, index) {
+        return (React.createElement("div", { className: "sendbird-suggested-replies__option", id: option, key: index + option, onClick: function (e) { return onClickReply(e, option); } }, option));
+    })));
+};
+
+// TODO: Refactor this component, is too complex now
+var MessageView = function (props) {
+    var _a, _b;
+    var 
+    // MessageProps
+    message = props.message, renderMessage = props.renderMessage, _c = props.renderMessageContent, renderMessageContent = _c === void 0 ? function (props) { return React.createElement(ui_MessageContent, _tslib.__assign({}, props)); } : _c, renderCustomSeparator = props.renderCustomSeparator, renderEditInput = props.renderEditInput, hasSeparator = props.hasSeparator, chainTop = props.chainTop, chainBottom = props.chainBottom, handleScroll = props.handleScroll, 
+    // MessageViewProps
+    channel = props.channel, emojiContainer = props.emojiContainer, editInputDisabled = props.editInputDisabled, shouldRenderSuggestedReplies = props.shouldRenderSuggestedReplies, isReactionEnabled = props.isReactionEnabled, replyType = props.replyType, threadReplySelectType = props.threadReplySelectType, nicknamesMap = props.nicknamesMap, renderUserMentionItem = props.renderUserMentionItem, scrollToMessage = props.scrollToMessage, toggleReaction = props.toggleReaction, setQuoteMessage = props.setQuoteMessage, onQuoteMessageClick = props.onQuoteMessageClick, onReplyInThreadClick = props.onReplyInThreadClick, sendUserMessage = props.sendUserMessage, updateUserMessage = props.updateUserMessage, resendMessage = props.resendMessage, deleteMessage = props.deleteMessage, renderFileViewer = props.renderFileViewer, renderRemoveMessageModal = props.renderRemoveMessageModal, setAnimatedMessageId = props.setAnimatedMessageId, animatedMessageId = props.animatedMessageId, onMessageAnimated = props.onMessageAnimated, highLightedMessageId = props.highLightedMessageId, setHighLightedMessageId = props.setHighLightedMessageId, onMessageHighlighted = props.onMessageHighlighted;
+    var _d = LocalizationContext.useLocalization(), dateLocale = _d.dateLocale, stringSet = _d.stringSet;
+    var globalStore = useSendbirdStateContext.useSendbirdStateContext();
+    var _e = globalStore.config, userId = _e.userId, isOnline = _e.isOnline, isMentionEnabled = _e.isMentionEnabled, userMention = _e.userMention, logger = _e.logger;
+    var maxUserMentionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount) || SuggestedMentionListView.MAX_USER_MENTION_COUNT;
+    var maxUserSuggestionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount) || SuggestedMentionListView.MAX_USER_SUGGESTION_COUNT;
+    var _f = React.useState(false), showEdit = _f[0], setShowEdit = _f[1];
+    var _g = React.useState(false), showRemove = _g[0], setShowRemove = _g[1];
+    var _h = React.useState(false), showFileViewer = _h[0], setShowFileViewer = _h[1];
+    var _j = React.useState(false), isAnimated = _j[0], setIsAnimated = _j[1];
+    var _k = React.useState(false), isHighlighted = _k[0], setIsHighlighted = _k[1];
+    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 editMessageInputRef = React.useRef(null);
+    var messageScrollRef = React.useRef(null);
+    var displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !utils.isDisabledBecauseFrozen(channel) && !utils.isDisabledBecauseMuted(channel);
+    var mentionNodes = Message_hooks_useDirtyGetMentions.useDirtyGetMentions({ ref: editMessageInputRef }, { logger: logger });
+    var ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < maxUserMentionCount;
+    React.useEffect(function () {
+        setMentionedUsers(mentionedUsers.filter(function (_a) {
+            var userId = _a.userId;
+            var i = mentionedUserIds.indexOf(userId);
+            if (i < 0) {
+                return false;
+            }
+            else {
+                mentionedUserIds.splice(i, 1);
+                return true;
+            }
+        }));
+    }, [mentionedUserIds]);
+    /**
+     * Move the messsage list scroll
+     * when the message's height is changed by `showEdit` OR `message.reactions`
+     */
+    useDidMountEffect(function () {
+        handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll();
+    }, [showEdit, (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.length]);
+    useDidMountEffect(function () {
+        handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll(true);
+    }, [message === null || message === void 0 ? void 0 : message.updatedAt, message === null || message === void 0 ? void 0 : message.message]);
+    React.useLayoutEffect(function () {
+        // Keep the scrollBottom value after fetching new message list
+        handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll(true);
+    }, []);
+    React.useLayoutEffect(function () {
+        var timeouts = [];
+        if (highLightedMessageId === message.messageId && (messageScrollRef === null || messageScrollRef === void 0 ? void 0 : messageScrollRef.current)) {
+            setIsAnimated(false);
+            timeouts.push(setTimeout(function () {
+                setIsHighlighted(true);
+            }, 500));
+            timeouts.push(setTimeout(function () {
+                setHighLightedMessageId(0);
+                onMessageHighlighted === null || onMessageHighlighted === void 0 ? void 0 : onMessageHighlighted();
+            }, 1600));
+        }
+        else {
+            setIsHighlighted(false);
+        }
+        return function () {
+            timeouts.forEach(function (it) { return clearTimeout(it); });
+        };
+    }, [highLightedMessageId, messageScrollRef.current, message.messageId]);
+    React.useLayoutEffect(function () {
+        var timeouts = [];
+        if (animatedMessageId === message.messageId && (messageScrollRef === null || messageScrollRef === void 0 ? void 0 : messageScrollRef.current)) {
+            setIsHighlighted(false);
+            timeouts.push(setTimeout(function () {
+                setIsAnimated(true);
+            }, 500));
+            timeouts.push(setTimeout(function () {
+                setAnimatedMessageId(0);
+                onMessageAnimated === null || onMessageAnimated === void 0 ? void 0 : onMessageAnimated();
+            }, 1600));
+        }
+        else {
+            setIsAnimated(false);
+        }
+        return function () {
+            timeouts.forEach(function (it) { return clearTimeout(it); });
+        };
+    }, [animatedMessageId, messageScrollRef.current, message.messageId]);
+    var renderedCustomSeparator = React.useMemo(function () { var _a; return (_a = renderCustomSeparator === null || renderCustomSeparator === void 0 ? void 0 : renderCustomSeparator({ message: message })) !== null && _a !== void 0 ? _a : null; }, [message, renderCustomSeparator]);
+    var renderedMessage = React.useMemo(function () { return renderMessage === null || renderMessage === void 0 ? void 0 : renderMessage(props); }, [message, renderMessage]);
+    if (renderedMessage) {
+        return (React.createElement("div", { "data-sb-message-id": message.messageId, "data-sb-created-at": message.createdAt, ref: messageScrollRef, className: index.getClassName([
+                'sendbird-msg-hoc sendbird-msg--scroll-ref',
+                isAnimated ? 'sendbird-msg-hoc__animated' : '',
+                isHighlighted ? 'sendbird-msg-hoc__highlighted' : '',
+            ]) },
+            // TODO: Add message instance as a function parameter
+            hasSeparator
+                && (renderedCustomSeparator || (React.createElement(ui_DateSeparator, null,
+                    React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, index$1.format(message.createdAt, stringSet.DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR, {
+                        locale: dateLocale,
+                    }))))),
+            renderedMessage));
+    }
+    if (showEdit && ((_b = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _b === void 0 ? void 0 : _b.call(message))) {
+        return ((renderEditInput === null || renderEditInput === void 0 ? void 0 : renderEditInput()) || (React.createElement(React.Fragment, null,
+            displaySuggestedMentionList && (React.createElement(SuggestedMentionListView.SuggestedMentionListView, { currentChannel: channel, targetNickname: mentionNickname, inputEvent: messageInputEvent, renderUserMentionItem: renderUserMentionItem, onUserItemClick: function (user) {
+                    if (user) {
+                        setMentionedUsers(_tslib.__spreadArray(_tslib.__spreadArray([], mentionedUsers, true), [user], false));
+                    }
+                    setMentionNickname('');
+                    setSelectedUser(user);
+                    setMessageInputEvent(null);
+                }, onFocusItemChange: function () {
+                    setMessageInputEvent(null);
+                }, onFetchUsers: function (users) {
+                    setMentionSuggestedUsers(users);
+                }, ableAddMention: ableMention, maxMentionCount: maxUserMentionCount, maxSuggestionCount: maxUserSuggestionCount })),
+            React.createElement(ui_MessageInput, { isEdit: true, channel: channel, disabled: editInputDisabled, ref: editMessageInputRef, mentionSelectedUser: selectedUser, isMentionEnabled: isMentionEnabled, message: message, onStartTyping: function () {
+                    var _a;
+                    (_a = channel === null || channel === void 0 ? void 0 : channel.startTyping) === null || _a === void 0 ? void 0 : _a.call(channel);
+                }, onUpdateMessage: function (_a) {
+                    var _b;
+                    var messageId = _a.messageId, message = _a.message, mentionTemplate = _a.mentionTemplate;
+                    updateUserMessage(messageId, {
+                        message: message,
+                        mentionedUsers: mentionedUsers,
+                        mentionedMessageTemplate: mentionTemplate,
+                    });
+                    setShowEdit(false);
+                    (_b = channel === null || channel === void 0 ? void 0 : channel.endTyping) === null || _b === void 0 ? void 0 : _b.call(channel);
+                }, onCancelEdit: function () {
+                    var _a;
+                    setMentionNickname('');
+                    setMentionedUsers([]);
+                    setMentionedUserIds([]);
+                    setMentionSuggestedUsers([]);
+                    setShowEdit(false);
+                    (_a = channel === null || channel === void 0 ? void 0 : channel.endTyping) === null || _a === void 0 ? void 0 : _a.call(channel);
+                }, onUserMentioned: function (user) {
+                    if ((selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userId) === (user === null || user === void 0 ? void 0 : user.userId)) {
+                        setSelectedUser(null);
+                        setMentionNickname('');
+                    }
+                }, onMentionStringChange: function (mentionText) {
+                    setMentionNickname(mentionText);
+                }, onMentionedUserIdsUpdated: function (userIds) {
+                    setMentionedUserIds(userIds);
+                }, onKeyDown: function (e) {
+                    if (displaySuggestedMentionList
+                        && (mentionSuggestedUsers === null || mentionSuggestedUsers === void 0 ? void 0 : mentionSuggestedUsers.length) > 0
+                        && ((e.key === _const.MessageInputKeys.Enter && ableMention)
+                            || e.key === _const.MessageInputKeys.ArrowUp
+                            || e.key === _const.MessageInputKeys.ArrowDown)) {
+                        setMessageInputEvent(e);
+                        return true;
+                    }
+                    return false;
+                } }))));
+    }
+    return (React.createElement("div", { className: index.getClassName([
+            'sendbird-msg-hoc sendbird-msg--scroll-ref',
+            isAnimated ? 'sendbird-msg-hoc__animated' : '',
+            isHighlighted ? 'sendbird-msg-hoc__highlighted' : '',
+        ]), style: { marginBottom: '2px' }, "data-sb-message-id": message.messageId, "data-sb-created-at": message.createdAt, ref: messageScrollRef },
+        hasSeparator
+            && (renderedCustomSeparator || (React.createElement(ui_DateSeparator, null,
+                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, index$1.format(message.createdAt, stringSet.DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR, {
+                    locale: dateLocale,
+                }))))),
+        renderMessageContent({
+            className: 'sendbird-message-hoc__message-content',
+            userId: userId,
+            scrollToMessage: scrollToMessage,
+            channel: channel,
+            message: message,
+            disabled: !isOnline,
+            chainTop: chainTop,
+            chainBottom: chainBottom,
+            isReactionEnabled: isReactionEnabled,
+            replyType: replyType,
+            threadReplySelectType: threadReplySelectType,
+            nicknamesMap: nicknamesMap,
+            emojiContainer: emojiContainer,
+            showEdit: setShowEdit,
+            showRemove: setShowRemove,
+            showFileViewer: setShowFileViewer,
+            resendMessage: resendMessage,
+            deleteMessage: deleteMessage,
+            toggleReaction: toggleReaction,
+            setQuoteMessage: setQuoteMessage,
+            onReplyInThread: onReplyInThreadClick,
+            onQuoteMessageClick: onQuoteMessageClick,
+            onMessageHeightChange: handleScroll,
+        }),
+        /** Suggested Replies */
+        shouldRenderSuggestedReplies && React.createElement(SuggestedReplies, { replyOptions: index.getSuggestedReplies(message), onSendMessage: sendUserMessage }),
+        showRemove && renderRemoveMessageModal({ message: message, onCancel: function () { return setShowRemove(false); } }),
+        showFileViewer && renderFileViewer({ message: message, onCancel: function () { return setShowFileViewer(false); } })));
+};
+
+var Message = function (props) {
+    var _a, _b;
+    var config = useSendbirdStateContext.useSendbirdStateContext().config;
+    var _c = Channel_context.useChannelContext(), initialized = _c.initialized, currentGroupChannel = _c.currentGroupChannel, highLightedMessageId = _c.highLightedMessageId, setHighLightedMessageId = _c.setHighLightedMessageId, animatedMessageId = _c.animatedMessageId, setAnimatedMessageId = _c.setAnimatedMessageId, updateMessage = _c.updateMessage, scrollToMessage = _c.scrollToMessage, replyType = _c.replyType, threadReplySelectType = _c.threadReplySelectType, isReactionEnabled = _c.isReactionEnabled, toggleReaction = _c.toggleReaction, emojiContainer = _c.emojiContainer, nicknamesMap = _c.nicknamesMap, setQuoteMessage = _c.setQuoteMessage, resendMessage = _c.resendMessage, deleteMessage = _c.deleteMessage, renderUserMentionItem = _c.renderUserMentionItem, onReplyInThread = _c.onReplyInThread, onQuoteMessageClick = _c.onQuoteMessageClick, onMessageAnimated = _c.onMessageAnimated, onMessageHighlighted = _c.onMessageHighlighted, sendMessage = _c.sendMessage, localMessages = _c.localMessages;
+    var message = props.message;
+    return (React.createElement(MessageView, _tslib.__assign({}, props, { channel: currentGroupChannel, emojiContainer: emojiContainer, editInputDisabled: !initialized || utils$1.isDisabledBecauseFrozen(currentGroupChannel) || utils$1.isDisabledBecauseMuted(currentGroupChannel) || !config.isOnline, shouldRenderSuggestedReplies: ((_a = config === null || config === void 0 ? void 0 : config.groupChannel) === null || _a === void 0 ? void 0 : _a.enableSuggestedReplies)
+            && message.messageId === ((_b = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.lastMessage) === null || _b === void 0 ? void 0 : _b.messageId)
+            // the options should appear only when there's no failed or pending messages
+            && (localMessages === null || localMessages === void 0 ? void 0 : localMessages.length) === 0
+            && index.getSuggestedReplies(message).length > 0, isReactionEnabled: isReactionEnabled, replyType: replyType, threadReplySelectType: threadReplySelectType, nicknamesMap: nicknamesMap, renderUserMentionItem: renderUserMentionItem, scrollToMessage: scrollToMessage, toggleReaction: toggleReaction, setQuoteMessage: setQuoteMessage, onQuoteMessageClick: onQuoteMessageClick, onReplyInThreadClick: onReplyInThread, sendUserMessage: function (params) {
+            sendMessage({
+                message: params.message,
+                mentionedUsers: params.mentionedUsers,
+                mentionTemplate: params.mentionedMessageTemplate,
+            });
+        }, updateUserMessage: function (messageId, params) {
+            updateMessage({
+                messageId: messageId,
+                message: params.message,
+                mentionedUsers: params.mentionedUsers,
+                mentionTemplate: params.mentionedMessageTemplate,
+            });
+        }, resendMessage: resendMessage, deleteMessage: deleteMessage, animatedMessageId: animatedMessageId, setAnimatedMessageId: setAnimatedMessageId, onMessageAnimated: onMessageAnimated, highLightedMessageId: highLightedMessageId, setHighLightedMessageId: setHighLightedMessageId, onMessageHighlighted: onMessageHighlighted, renderFileViewer: function (props) { return React.createElement(Channel_components_FileViewer.FileViewer, _tslib.__assign({}, props)); }, renderRemoveMessageModal: function (props) { return React.createElement(Channel_components_RemoveMessageModal.RemoveMessageModal, _tslib.__assign({}, props)); } })));
+};
+
+exports.Message = Message;
+exports.MessageView = MessageView;
+//# sourceMappingURL=bundle-JwSYMgZa.js.map

package/cjs/chunks/bundle-JwSYMgZa.js.map

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

package/cjs/chunks/{bundle-135pRm7i.js → bundle-K8ngPNTR.js}

@@ -43,4 +43,4 @@ var pubSubTopics = exports.PUBSUB_TOPICS;
 exports.pubSubTopics = pubSubTopics;
 exports.shouldPubSubPublishToChannel = shouldPubSubPublishToChannel;
 exports.shouldPubSubPublishToThread = shouldPubSubPublishToThread;
-//# sourceMappingURL=bundle-135pRm7i.js.map
+//# sourceMappingURL=bundle-K8ngPNTR.js.map

package/cjs/chunks/bundle-K8ngPNTR.js.map

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

package/cjs/chunks/{bundle-2gCdAlxv.js → bundle-KUtVpakA.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./bundle-6ZegaDWX.js');
+var index = require('./bundle-7sO7MuTY.js');
 
 /**
  * @name startOfDay
@@ -63,4 +63,4 @@ function isSameDay(dirtyDateLeft, dirtyDateRight) {
 }
 
 exports.isSameDay = isSameDay;
-//# sourceMappingURL=bundle-2gCdAlxv.js.map
+//# sourceMappingURL=bundle-KUtVpakA.js.map

package/cjs/chunks/{bundle-2gCdAlxv.js.map → bundle-KUtVpakA.js.map}

@@ -1 +1 @@
-{"version":3,"file":"bundle-2gCdAlxv.js","sources":["../../../node_modules/date-fns/esm/startOfDay/index.js","../../../node_modules/date-fns/esm/isSameDay/index.js"],"sourcesContent":["import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name startOfDay\n * @category Day Helpers\n * @summary Return the start of a day for the given date.\n *\n * @description\n * Return the start of a day for the given date.\n * The result will be in the local timezone.\n *\n * @param {Date|Number} date - the original date\n * @returns {Date} the start of a day\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // The start of a day for 2 September 2014 11:55:00:\n * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))\n * //=> Tue Sep 02 2014 00:00:00\n */\nexport default function startOfDay(dirtyDate) {\n  requiredArgs(1, arguments);\n  var date = toDate(dirtyDate);\n  date.setHours(0, 0, 0, 0);\n  return date;\n}","import startOfDay from \"../startOfDay/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name isSameDay\n * @category Day Helpers\n * @summary Are the given dates in the same day (and year and month)?\n *\n * @description\n * Are the given dates in the same day (and year and month)?\n *\n * @param {Date|Number} dateLeft - the first date to check\n * @param {Date|Number} dateRight - the second date to check\n * @returns {Boolean} the dates are in the same day (and year and month)\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day?\n * const result = isSameDay(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 18, 0))\n * //=> true\n *\n * @example\n * // Are 4 September and 4 October in the same day?\n * const result = isSameDay(new Date(2014, 8, 4), new Date(2014, 9, 4))\n * //=> false\n *\n * @example\n * // Are 4 September, 2014 and 4 September, 2015 in the same day?\n * const result = isSameDay(new Date(2014, 8, 4), new Date(2015, 8, 4))\n * //=> false\n */\nexport default function isSameDay(dirtyDateLeft, dirtyDateRight) {\n  requiredArgs(2, arguments);\n  var dateLeftStartOfDay = startOfDay(dirtyDateLeft);\n  var dateRightStartOfDay = startOfDay(dirtyDateRight);\n  return dateLeftStartOfDay.getTime() === dateRightStartOfDay.getTime();\n}"],"names":["requiredArgs","toDate"],"mappings":";;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS,UAAU,CAAC,SAAS,EAAE;AAC9C,EAAEA,kBAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7B,EAAE,IAAI,IAAI,GAAGC,YAAM,CAAC,SAAS,CAAC,CAAC;AAC/B,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAC5B,EAAE,OAAO,IAAI,CAAC;AACd;;ACvBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS,SAAS,CAAC,aAAa,EAAE,cAAc,EAAE;AACjE,EAAED,kBAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7B,EAAE,IAAI,kBAAkB,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;AACrD,EAAE,IAAI,mBAAmB,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;AACvD,EAAE,OAAO,kBAAkB,CAAC,OAAO,EAAE,KAAK,mBAAmB,CAAC,OAAO,EAAE,CAAC;AACxE;;;;","x_google_ignoreList":[0,1]}
+{"version":3,"file":"bundle-KUtVpakA.js","sources":["../../../node_modules/date-fns/esm/startOfDay/index.js","../../../node_modules/date-fns/esm/isSameDay/index.js"],"sourcesContent":["import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name startOfDay\n * @category Day Helpers\n * @summary Return the start of a day for the given date.\n *\n * @description\n * Return the start of a day for the given date.\n * The result will be in the local timezone.\n *\n * @param {Date|Number} date - the original date\n * @returns {Date} the start of a day\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // The start of a day for 2 September 2014 11:55:00:\n * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))\n * //=> Tue Sep 02 2014 00:00:00\n */\nexport default function startOfDay(dirtyDate) {\n  requiredArgs(1, arguments);\n  var date = toDate(dirtyDate);\n  date.setHours(0, 0, 0, 0);\n  return date;\n}","import startOfDay from \"../startOfDay/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name isSameDay\n * @category Day Helpers\n * @summary Are the given dates in the same day (and year and month)?\n *\n * @description\n * Are the given dates in the same day (and year and month)?\n *\n * @param {Date|Number} dateLeft - the first date to check\n * @param {Date|Number} dateRight - the second date to check\n * @returns {Boolean} the dates are in the same day (and year and month)\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day?\n * const result = isSameDay(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 18, 0))\n * //=> true\n *\n * @example\n * // Are 4 September and 4 October in the same day?\n * const result = isSameDay(new Date(2014, 8, 4), new Date(2014, 9, 4))\n * //=> false\n *\n * @example\n * // Are 4 September, 2014 and 4 September, 2015 in the same day?\n * const result = isSameDay(new Date(2014, 8, 4), new Date(2015, 8, 4))\n * //=> false\n */\nexport default function isSameDay(dirtyDateLeft, dirtyDateRight) {\n  requiredArgs(2, arguments);\n  var dateLeftStartOfDay = startOfDay(dirtyDateLeft);\n  var dateRightStartOfDay = startOfDay(dirtyDateRight);\n  return dateLeftStartOfDay.getTime() === dateRightStartOfDay.getTime();\n}"],"names":["requiredArgs","toDate"],"mappings":";;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS,UAAU,CAAC,SAAS,EAAE;AAC9C,EAAEA,kBAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7B,EAAE,IAAI,IAAI,GAAGC,YAAM,CAAC,SAAS,CAAC,CAAC;AAC/B,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAC5B,EAAE,OAAO,IAAI,CAAC;AACd;;ACvBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS,SAAS,CAAC,aAAa,EAAE,cAAc,EAAE;AACjE,EAAED,kBAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7B,EAAE,IAAI,kBAAkB,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;AACrD,EAAE,IAAI,mBAAmB,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;AACvD,EAAE,OAAO,kBAAkB,CAAC,OAAO,EAAE,KAAK,mBAAmB,CAAC,OAAO,EAAE,CAAC;AACxE;;;;","x_google_ignoreList":[0,1]}

package/cjs/chunks/{bundle-zgoic8x9.js → bundle-L5q_NWiq.js}

@@ -19,4 +19,4 @@ var NodeNames = {
 exports.MessageInputKeys = MessageInputKeys;
 exports.NodeNames = NodeNames;
 exports.NodeTypes = NodeTypes;
-//# sourceMappingURL=bundle-zgoic8x9.js.map
+//# sourceMappingURL=bundle-L5q_NWiq.js.map

package/cjs/chunks/bundle-L5q_NWiq.js.map

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

package/cjs/chunks/{bundle-GsUulypb.js → bundle-L9oXX97B.js}

@@ -8,4 +8,4 @@ var Role = {
 };
 
 exports.Role = Role;
-//# sourceMappingURL=bundle-GsUulypb.js.map
+//# sourceMappingURL=bundle-L9oXX97B.js.map

package/cjs/chunks/bundle-L9oXX97B.js.map

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

package/cjs/chunks/bundle-LmzJA_0-.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var _tslib = require('./bundle-RVs527mS.js');
+var React = require('react');
+var ui_IconButton = require('../ui/IconButton.js');
+var ui_Icon = require('../ui/Icon.js');
+var ui_Label = require('./bundle-JaD2Ao-u.js');
+var ui_ChannelAvatar = require('../ui/ChannelAvatar.js');
+var utils = require('./bundle-4OXJViEd.js');
+var MediaQueryContext = require('./bundle-2ToiwW-_.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var LocalizationContext = require('./bundle-WLD9KKbn.js');
+var Channel_context = require('../Channel/context.js');
+
+var GroupChannelHeaderView = function (_a) {
+    var _b;
+    var className = _a.className, currentChannel = _a.currentChannel, showSearchIcon = _a.showSearchIcon, onBackClick = _a.onBackClick, onSearchClick = _a.onSearchClick, onChatHeaderActionClick = _a.onChatHeaderActionClick;
+    var config = useSendbirdStateContext.useSendbirdStateContext().config;
+    var userId = config.userId, theme = config.theme;
+    var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var isMuted = (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myMutedState) === 'muted';
+    var subTitle = ((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.members)
+        && ((_b = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.members) === null || _b === void 0 ? void 0 : _b.length) !== 2);
+    return (React.createElement("div", { className: "sendbird-chat-header ".concat(className) },
+        React.createElement("div", { className: "sendbird-chat-header__left" },
+            isMobile && (React.createElement(ui_Icon.default, { className: "sendbird-chat-header__icon_back", onClick: onBackClick, fillColor: ui_Icon.IconColors.PRIMARY, width: "24px", height: "24px", type: ui_Icon.IconTypes.ARROW_LEFT })),
+            React.createElement(ui_ChannelAvatar, { theme: theme, channel: currentChannel, userId: userId, height: 32, width: 32 }),
+            React.createElement(ui_Label.Label, { className: "sendbird-chat-header__left__title", type: ui_Label.LabelTypography.H_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, utils.getChannelTitle(currentChannel, userId, stringSet)),
+            React.createElement(ui_Label.Label, { className: "sendbird-chat-header__left__subtitle", type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_2 }, subTitle)),
+        React.createElement("div", { className: "sendbird-chat-header__right" },
+            isMuted && (React.createElement(ui_Icon.default, { className: "sendbird-chat-header__right__mute", type: ui_Icon.IconTypes.NOTIFICATIONS_OFF_FILLED, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: "24px", height: "24px" })),
+            (showSearchIcon && !(currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isEphemeral)) && (React.createElement(ui_IconButton, { className: "sendbird-chat-header__right__search", width: "32px", height: "32px", onClick: onSearchClick },
+                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.SEARCH, fillColor: ui_Icon.IconColors.PRIMARY, width: "24px", height: "24px" }))),
+            React.createElement(ui_IconButton, { className: "sendbird-chat-header__right__info", width: "32px", height: "32px", onClick: onChatHeaderActionClick },
+                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.INFO, fillColor: ui_Icon.IconColors.PRIMARY, width: "24px", height: "24px" })))));
+};
+
+var ChannelHeader = function (_a) {
+    var className = _a.className;
+    var context = Channel_context.useChannelContext();
+    return (React.createElement(GroupChannelHeaderView, _tslib.__assign({}, context, { className: className, currentChannel: context.currentGroupChannel })));
+};
+
+exports.ChannelHeader = ChannelHeader;
+exports.GroupChannelHeaderView = GroupChannelHeaderView;
+//# sourceMappingURL=bundle-LmzJA_0-.js.map

package/cjs/chunks/bundle-LmzJA_0-.js.map

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

package/cjs/chunks/bundle-Mq0jUvZk.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var LocalizationContext = require('./bundle-WLD9KKbn.js');
+var ui_Avatar = require('./bundle-rUpy0DGt.js');
+var ui_Label = require('./bundle-JaD2Ao-u.js');
+
+var GroupChannelListHeader = function (_a) {
+    var renderTitle = _a.renderTitle, renderIconButton = _a.renderIconButton, onEdit = _a.onEdit, allowProfileEdit = _a.allowProfileEdit;
+    var stores = useSendbirdStateContext.useSendbirdStateContext().stores;
+    var user = stores.userStore.user;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    return (React.createElement("div", { className: [
+            'sendbird-channel-header',
+            allowProfileEdit ? 'sendbird-channel-header--allow-edit' : '',
+        ].join(' ') },
+        (renderTitle === null || renderTitle === void 0 ? void 0 : renderTitle()) || (React.createElement("div", { className: "sendbird-channel-header__title", role: "button", onClick: function () {
+                onEdit === null || onEdit === void 0 ? void 0 : onEdit();
+            }, onKeyDown: function () {
+                onEdit === null || onEdit === void 0 ? void 0 : onEdit();
+            }, tabIndex: 0 },
+            React.createElement("div", { className: "sendbird-channel-header__title__left" },
+                React.createElement(ui_Avatar.Avatar, { width: "32px", height: "32px", src: user.profileUrl, alt: user.nickname })),
+            React.createElement("div", { className: "sendbird-channel-header__title__right" },
+                React.createElement(ui_Label.Label, { className: "sendbird-channel-header__title__right__name", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, user.nickname || stringSet.NO_NAME),
+                React.createElement(ui_Label.Label, { className: "sendbird-channel-header__title__right__user-id", type: ui_Label.LabelTypography.BODY_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, user.userId)))),
+        React.createElement("div", { className: "sendbird-channel-header__right-icon" }, renderIconButton === null || renderIconButton === void 0 ? void 0 : renderIconButton())));
+};
+
+exports.GroupChannelListHeader = GroupChannelListHeader;
+//# sourceMappingURL=bundle-Mq0jUvZk.js.map

package/cjs/chunks/bundle-Mq0jUvZk.js.map

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

package/cjs/chunks/{bundle-kSScygqj.js → bundle-OBj337Le.js}

@@ -232,4 +232,4 @@ var getStringSet = function (lang) {
 };
 
 exports.getStringSet = getStringSet;
-//# sourceMappingURL=bundle-kSScygqj.js.map
+//# sourceMappingURL=bundle-OBj337Le.js.map

package/cjs/chunks/bundle-OBj337Le.js.map

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

package/cjs/chunks/{bundle-7J-qpEzM.js → bundle-Og0K_sLb.js}

@@ -25,4 +25,4 @@ var changeColorToClassName = function (color) {
 };
 
 exports.changeColorToClassName = changeColorToClassName;
-//# sourceMappingURL=bundle-7J-qpEzM.js.map
+//# sourceMappingURL=bundle-Og0K_sLb.js.map

package/cjs/chunks/bundle-Og0K_sLb.js.map

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