@sendbird/uikit-react 3.10.2-alpha.0 → 3.11.1

package/App.js

@@ -1,96 +1,121 @@
-import React__default, { useRef, useState, useContext, useEffect } from 'react';
+import React__default, { useEffect, useState, useRef, useContext } from 'react';
 import { SendbirdProvider } from './SendbirdProvider.js';
-import { u as useMediaQueryContext } from './chunks/bundle-r9j_eCHc.js';
-import { _ as __assign, b as __awaiter, c as __generator } from './chunks/bundle-BA7tv0JB.js';
-import { u as useGroupChannelContext, G as GroupChannelProvider } from './chunks/bundle-zKBdD-J6.js';
-import { G as GroupChannelUIView } from './chunks/bundle-GnFOVDL2.js';
-import { u as useGroupChannelListContext, G as GroupChannelListItemView, a as GroupChannelListProvider } from './chunks/bundle-Wzk9dnsn.js';
-import { G as GroupChannelListUIView } from './chunks/bundle-dOD0mfTw.js';
-import { L as LocalizationContext, u as useLocalization } from './chunks/bundle-BBjosDA0.js';
-import ContextMenu, { MenuItems, MenuItem } from './ui/ContextMenu.js';
-import IconButton from './ui/IconButton.js';
+import { u as useMediaQueryContext } from './chunks/bundle-1XQGq5tE.js';
+import { _ as __assign, b as __awaiter, c as __generator } from './chunks/bundle-0vtSUcHY.js';
+import { u as useGroupChannelContext, G as GroupChannelProvider } from './chunks/bundle-d31Dx4g9.js';
+import { G as GroupChannelUIView } from './chunks/bundle-RVuTQS9f.js';
+import { G as GroupChannelHeaderView } from './chunks/bundle-Dpt_A2Sv.js';
+import { useIIFE, useGroupChannelHandler } from '@sendbird/uikit-tools';
+import { T as TypingIndicatorType } from './chunks/bundle-jamufWw7.js';
+import PlaceHolder, { PlaceHolderTypes } from './ui/PlaceHolder.js';
 import Icon, { IconTypes, IconColors } from './ui/Icon.js';
-import { L as LeaveGroupChannel } from './chunks/bundle-qAc60kip.js';
 import { useSendbirdStateContext } from './useSendbirdStateContext.js';
-import { d as getChannelTitle } from './chunks/bundle-J3DrW9X2.js';
-import { a as AddGroupChannelView } from './chunks/bundle-OAJaPWYb.js';
+import { g as getSuggestedReplies, Q as isSendableMessage } from './chunks/bundle-hrqkDKRD.js';
+import { i as isDisabledBecauseFrozen, a as isDisabledBecauseMuted, c as getComponentKeyFromMessage } from './chunks/bundle-pffuo01q.js';
+import { a as MessageView } from './chunks/bundle-veNmMfAH.js';
+import { a as FileViewerView } from './chunks/bundle-jiwqHI-2.js';
+import { a as RemoveMessageModalView } from './chunks/bundle-buXsGWIu.js';
+import { getMessagePartsInfo } from './Channel/utils/getMessagePartsInfo.js';
+import { U as UnreadCount } from './chunks/bundle-8OBG2Jrw.js';
+import { F as FrozenNotification } from './chunks/bundle-dMLt2ro9.js';
+import { S as SCROLL_BUFFER } from './chunks/bundle-e5lT4U6_.js';
+import { MessageProvider } from './Message/context.js';
+import TypingIndicatorBubble from './ui/TypingIndicatorBubble.js';
+import { M as MessageInputWrapperView } from './chunks/bundle-Edp-TIC7.js';
+import { L as LocalizationContext, u as useLocalization } from './chunks/bundle-zOkaSZl3.js';
+import { u as useVoicePlayerContext, b as ALL } from './chunks/bundle-KNG-9gh9.js';
+import './VoiceRecorder/context.js';
+import './chunks/bundle-RzWTDZDo.js';
+import './chunks/bundle-3hGhEhNx.js';
+import 'react-dom';
+import IconButton from './ui/IconButton.js';
+import './ui/Button.js';
+import { u as useGroupChannelListContext, G as GroupChannelListItemView, a as GroupChannelListProvider } from './chunks/bundle-szN3I4WN.js';
+import { G as GroupChannelListUIView } from './chunks/bundle-iXzQekqM.js';
+import ContextMenu, { MenuItems, MenuItem } from './ui/ContextMenu.js';
+import { L as LeaveGroupChannel } from './chunks/bundle-NFkyRDpH.js';
+import { d as getChannelTitle } from './chunks/bundle-9M3o3hPA.js';
+import { a as AddGroupChannelView } from './chunks/bundle-YBExtK73.js';
 import Channel from './Channel.js';
 import ChannelList from './ChannelList.js';
 import ChannelSettings from './ChannelSettings.js';
 import MessageSearchPannel from './MessageSearch.js';
 import Thread from './Thread.js';
 import { GroupChannelHandler } from '@sendbird/chat/groupChannel';
-import { u as uuidv4 } from './chunks/bundle-YoWLsJ0C.js';
-import { u as useVoicePlayerContext, a as ALL } from './chunks/bundle-drww6xht.js';
-import '@sendbird/uikit-tools';
+import { u as uuidv4 } from './chunks/bundle-brky8TnE.js';
 import './withSendbird.js';
 import 'css-vars-ponyfill';
-import './chunks/bundle-aKXnhi3A.js';
-import './chunks/bundle-OJ-0ytxX.js';
-import './chunks/bundle-bjEEGmYA.js';
+import './chunks/bundle-9wFvMqxF.js';
+import './chunks/bundle-wICBtdE1.js';
+import './chunks/bundle-YoiKtyRA.js';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
-import './chunks/bundle-N9hMnIRl.js';
-import './utils/message/getOutgoingMessageState.js';
-import './chunks/bundle-cA_r9HRx.js';
-import './chunks/bundle-v3WxYU8s.js';
-import './VoiceRecorder/context.js';
-import './chunks/bundle-cvTUkQV_.js';
-import 'react-dom';
-import './ui/Button.js';
-import './chunks/bundle-I8JFwttJ.js';
-import './chunks/bundle-jy6_UG14.js';
-import './chunks/bundle-MBrlu_LK.js';
-import './chunks/bundle-ULVw0l0r.js';
-import './chunks/bundle-ZOCAUrJO.js';
+import './chunks/bundle-4ab6nIKe.js';
+import './chunks/bundle-qI3fzrBt.js';
+import './chunks/bundle-_NUeDv_m.js';
+import './chunks/bundle-eGLEfc7r.js';
 import './hooks/useModal.js';
+import './chunks/bundle-92kzAxsw.js';
+import './chunks/bundle-YOec1wfw.js';
+import './utils/message/getOutgoingMessageState.js';
+import './ui/MessageInput.js';
+import './chunks/bundle-K3gy6I7U.js';
+import './chunks/bundle-QUJKjMCy.js';
+import './chunks/bundle-fNYexgBr.js';
+import 'dompurify';
+import './chunks/bundle-72sPkBu4.js';
+import './chunks/bundle-5x-SH0ln.js';
+import './chunks/bundle--M9av9I5.js';
+import './chunks/bundle-2xEG_fol.js';
+import './chunks/bundle-laq4Cm2M.js';
+import './chunks/bundle-Xy9OskjJ.js';
+import './chunks/bundle-7RyEqo9-.js';
+import './ui/ImageRenderer.js';
+import './chunks/bundle-TEGbbRiE.js';
+import './Thread/context.js';
+import './chunks/bundle-X1ee5Xag.js';
+import './chunks/bundle-KwnXXB-s.js';
+import './chunks/bundle-QWYghVSN.js';
 import '@sendbird/chat/message';
-import './chunks/bundle-vOT5acXc.js';
-import './chunks/bundle-Q8kUKu5l.js';
-import './chunks/bundle-tPCzzoc1.js';
-import './chunks/bundle-GJ-4hPvC.js';
-import './chunks/bundle-d5KevIXI.js';
-import './chunks/bundle-BVtLlpwZ.js';
-import './chunks/bundle-nlOgiAcu.js';
+import './chunks/bundle-U_0F9z8c.js';
+import './Thread/context/types.js';
+import './chunks/bundle-SI8TVXcF.js';
+import './chunks/bundle-TlXrstq8.js';
+import './chunks/bundle-b9LCaMtu.js';
+import './chunks/bundle-OYvgeZlT.js';
+import './chunks/bundle-kP3o9aRv.js';
+import './chunks/bundle--4gDKFyU.js';
+import './Message/hooks/useDirtyGetMentions.js';
+import './Channel/hooks/useHandleUploadFiles.js';
+import './chunks/bundle-Y0R5tada.js';
 import './Channel/context.js';
-import './chunks/bundle-poK2Vr1v.js';
-import './chunks/bundle-NjNqsDXb.js';
-import './chunks/bundle-hDx2-CRe.js';
-import './chunks/bundle-_cXVZn5n.js';
-import './chunks/bundle-NwZvowyL.js';
+import './chunks/bundle-5cvB_UbP.js';
+import './chunks/bundle-IKRolu9P.js';
 import './Channel/hooks/useInitialMessagesFetch.js';
-import './chunks/bundle-D1V3P366.js';
-import './chunks/bundle-laVKAiJ-.js';
-import './chunks/bundle-3GWXgoxj.js';
+import './chunks/bundle-T7ZknK5s.js';
+import './chunks/bundle-4JVMIRVC.js';
+import './ui/ConnectionStatus.js';
+import './Channel/components/MessageInput.js';
+import './ui/QuoteMessageInput.js';
+import './chunks/bundle-bAvA5Udb.js';
+import './VoicePlayer/useVoicePlayer.js';
+import './VoiceRecorder/useVoiceRecorder.js';
+import './chunks/bundle-1kYamWYQ.js';
+import './ui/PlaybackTime.js';
+import './ui/ProgressBar.js';
+import './ui/TextButton.js';
 import './ui/ChannelAvatar.js';
-import './chunks/bundle-Qufz6_i_.js';
-import './ui/ImageRenderer.js';
-import './chunks/bundle-jDjj3eHU.js';
-import './chunks/bundle-F6-2aFsp.js';
-import './chunks/bundle-0J_EdUWI.js';
-import './chunks/bundle-1zn-WT_r.js';
-import './ui/PlaceHolder.js';
+import './chunks/bundle-R5n5AVj8.js';
+import './chunks/bundle-2aZMC1gn.js';
+import './chunks/bundle-A9vhM7uK.js';
 import './ui/Loader.js';
-import './chunks/bundle-beMggMMW.js';
-import './chunks/bundle-Xytq6xaz.js';
-import './chunks/bundle-GGE6HRof.js';
-import './Message/hooks/useDirtyGetMentions.js';
 import './ui/DateSeparator.js';
-import './chunks/bundle-LWD0OLz8.js';
-import './ui/MessageInput.js';
-import './chunks/bundle-62ej9afV.js';
-import 'dompurify';
-import './chunks/bundle-zV8TJWvL.js';
-import './chunks/bundle-4GPpeoNf.js';
-import './chunks/bundle-iwZaUd9o.js';
-import './chunks/bundle-IRlSmJVg.js';
 import './ui/MessageContent.js';
 import './ui/MessageItemMenu.js';
-import './chunks/bundle-4Ib7FkR6.js';
 import './ui/SortByRow.js';
 import './ui/MessageItemReactionMenu.js';
 import './ui/ReactionButton.js';
-import './chunks/bundle-0jbuC1o3.js';
+import './chunks/bundle-AAE0evYg.js';
 import './ui/EmojiReactions.js';
 import './ui/ReactionBadge.js';
 import './ui/BottomSheet.js';
@@ -101,61 +126,40 @@ import './ui/UserProfile.js';
 import './sendbirdSelectors.js';
 import './ui/Tooltip.js';
 import './ui/TooltipWrapper.js';
-import './Message/context.js';
 import './ui/AdminMessage.js';
 import './ui/QuoteMessage.js';
-import './chunks/bundle-w1C-Xmf3.js';
-import './chunks/bundle-ctAjRHDW.js';
+import './chunks/bundle-kNzGDcl1.js';
 import './ui/ThreadReplies.js';
 import './ui/OGMessageItemBody.js';
-import './chunks/bundle-agW9Hw66.js';
+import './chunks/bundle-zqJVlTpN.js';
 import './ui/MentionLabel.js';
 import './ui/LinkLabel.js';
 import './ui/TextMessageItemBody.js';
 import './ui/FileMessageItemBody.js';
-import './ui/TextButton.js';
-import './chunks/bundle-cBbT3DlY.js';
-import './chunks/bundle-wMP1pqZM.js';
-import './chunks/bundle-fQ1V_U8F.js';
+import './chunks/bundle-FqjGVIIM.js';
+import './chunks/bundle-7gnDs7-N.js';
+import './chunks/bundle-Npg4qQQD.js';
 import './ui/VoiceMessageItemBody.js';
-import './ui/ProgressBar.js';
-import './VoicePlayer/useVoicePlayer.js';
-import './ui/PlaybackTime.js';
 import './ui/ThumbnailMessageItemBody.js';
 import './ui/UnknownMessageItemBody.js';
 import './ui/FeedbackIconButton.js';
 import './ui/MobileFeedbackMenu.js';
 import './Channel/components/MessageFeedbackModal.js';
 import './ui/Input.js';
-import './chunks/bundle-lUrIOx9p.js';
-import './chunks/bundle-nD2ZWBq4.js';
-import './chunks/bundle-khgxDrnA.js';
-import './chunks/bundle-bAY1j7eP.js';
-import './chunks/bundle-vz3GEsoi.js';
-import './Channel/utils/getMessagePartsInfo.js';
+import './chunks/bundle-2lbcW98e.js';
+import './chunks/bundle-BnMLjoeD.js';
+import './chunks/bundle-ncF5Vx6b.js';
 import './Channel/utils/compareMessagesForGrouping.js';
-import './chunks/bundle-VbkO6hwH.js';
-import './chunks/bundle-G7HnuZsw.js';
-import './chunks/bundle-o1Ev7FSN.js';
-import './ui/TypingIndicatorBubble.js';
-import './chunks/bundle-uIetzCLw.js';
-import './ui/ConnectionStatus.js';
-import './chunks/bundle-DSoowPBh.js';
-import './ui/QuoteMessageInput.js';
-import './VoiceRecorder/useVoiceRecorder.js';
-import './chunks/bundle-OFH4qWaN.js';
-import './chunks/bundle-8JX3bIpj.js';
-import './Channel/components/MessageInput.js';
-import './chunks/bundle-otzUyFE_.js';
+import './chunks/bundle--LjMBMp3.js';
 import './ui/Badge.js';
 import './ui/MentionUserLabel.js';
-import './chunks/bundle-x_yt1Yd5.js';
+import './chunks/bundle-0Pl6hdf0.js';
 import './EditUserProfile.js';
 import './EditUserProfile/context.js';
 import './EditUserProfile/components/EditUserProfileUI.js';
 import './CreateChannel.js';
 import './CreateChannel/components/CreateChannelUI.js';
-import './chunks/bundle-AXNVQw91.js';
+import './chunks/bundle-rOhl9tWD.js';
 import './CreateChannel/components/InviteUsers.js';
 import './CreateChannel/components/SelectChannelType.js';
 import './ChannelSettings/components/ChannelSettingsUI.js';
@@ -165,34 +169,201 @@ import './ChannelSettings/components/EditDetailsModal.js';
 import './ChannelSettings/components/ModerationPanel.js';
 import './ui/Accordion.js';
 import './ui/AccordionGroup.js';
-import './chunks/bundle-YVEtWFVy.js';
+import './chunks/bundle-YetIEB9o.js';
 import './ui/Toggle.js';
 import './ChannelSettings/components/UserListItem.js';
-import './chunks/bundle-RZWoLRNe.js';
+import './chunks/bundle-2FXQWzCx.js';
 import './ChannelSettings/components/LeaveChannel.js';
 import './ChannelSettings/components/UserPanel.js';
 import './MessageSearch/components/MessageSearchUI.js';
 import './MessageSearch/context.js';
 import './ui/MessageSearchItem.js';
 import './ui/MessageSearchFileItem.js';
-import './Thread/context.js';
-import './Thread/context/types.js';
 import './Thread/components/ThreadUI.js';
 import './Thread/components/ParentMessageInfo.js';
-import './chunks/bundle-lVxQMV9H.js';
+import './chunks/bundle-WSNk7jGd.js';
 import './Thread/components/ParentMessageInfoItem.js';
-import './chunks/bundle-Rz5QaIhK.js';
 import './Thread/components/ThreadHeader.js';
 import './Thread/components/ThreadList.js';
 import './Thread/components/ThreadListItem.js';
 import 'date-fns';
-import './Thread/components/ThreadMessageInput.js';
-import './Channel/hooks/useHandleUploadFiles.js';
+
+var GroupChannelHeader = function (_a) {
+    var className = _a.className;
+    var context = useGroupChannelContext();
+    return (React__default.createElement(GroupChannelHeaderView, __assign({}, context, { className: className, currentChannel: context.currentChannel })));
+};
+
+var FileViewer = function (props) {
+    var deleteMessage = useGroupChannelContext().deleteMessage;
+    return React__default.createElement(FileViewerView, __assign({}, props, { deleteMessage: deleteMessage }));
+};
+
+var RemoveMessageModal = function (props) {
+    var deleteMessage = useGroupChannelContext().deleteMessage;
+    return React__default.createElement(RemoveMessageModalView, __assign({}, props, { deleteMessage: deleteMessage }));
+};
+
+var Message = function (props) {
+    var _a = useSendbirdStateContext(), config = _a.config, emojiManager = _a.emojiManager;
+    var _b = useGroupChannelContext(), loading = _b.loading, currentChannel = _b.currentChannel, animatedMessageId = _b.animatedMessageId, setAnimatedMessageId = _b.setAnimatedMessageId, scrollToMessage = _b.scrollToMessage, replyType = _b.replyType, threadReplySelectType = _b.threadReplySelectType, isReactionEnabled = _b.isReactionEnabled, toggleReaction = _b.toggleReaction, nicknamesMap = _b.nicknamesMap, setQuoteMessage = _b.setQuoteMessage, renderUserMentionItem = _b.renderUserMentionItem, onQuoteMessageClick = _b.onQuoteMessageClick, onReplyInThreadClick = _b.onReplyInThreadClick, onMessageAnimated = _b.onMessageAnimated, messages = _b.messages, updateUserMessage = _b.updateUserMessage, sendUserMessage = _b.sendUserMessage, resendMessage = _b.resendMessage, deleteMessage = _b.deleteMessage;
+    var message = props.message;
+    var initialized = !loading && Boolean(currentChannel);
+    var shouldRenderSuggestedReplies = useIIFE(function () {
+        var _a, _b;
+        if (!((_a = config === null || config === void 0 ? void 0 : config.groupChannel) === null || _a === void 0 ? void 0 : _a.enableSuggestedReplies))
+            return false;
+        if (message.messageId !== ((_b = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.lastMessage) === null || _b === void 0 ? void 0 : _b.messageId))
+            return false;
+        if (getSuggestedReplies(message).length === 0)
+            return false;
+        var lastMessage = messages[messages.length - 1];
+        if (lastMessage && isSendableMessage(lastMessage) && lastMessage.sendingStatus !== 'succeeded')
+            return false;
+        return true;
+    });
+    return (React__default.createElement(MessageView, __assign({}, props, { channel: currentChannel, emojiContainer: emojiManager.emojiContainer, editInputDisabled: !initialized || isDisabledBecauseFrozen(currentChannel) || isDisabledBecauseMuted(currentChannel) || !config.isOnline, shouldRenderSuggestedReplies: shouldRenderSuggestedReplies, isReactionEnabled: isReactionEnabled, replyType: replyType, threadReplySelectType: threadReplySelectType, nicknamesMap: nicknamesMap, renderUserMentionItem: renderUserMentionItem, scrollToMessage: scrollToMessage, toggleReaction: toggleReaction, setQuoteMessage: setQuoteMessage, onQuoteMessageClick: onQuoteMessageClick, onReplyInThreadClick: onReplyInThreadClick, sendUserMessage: sendUserMessage, updateUserMessage: updateUserMessage, resendMessage: resendMessage, deleteMessage: deleteMessage, animatedMessageId: animatedMessageId, setAnimatedMessageId: setAnimatedMessageId, onMessageAnimated: onMessageAnimated, renderFileViewer: function (props) { return React__default.createElement(FileViewer, __assign({}, props)); }, renderRemoveMessageModal: function (props) { return React__default.createElement(RemoveMessageModal, __assign({}, props)); } })));
+};
+
+function useScrollBehavior() {
+    var _a = useGroupChannelContext(), scrollRef = _a.scrollRef, _b = _a.scrollBehavior, scrollBehavior = _b === void 0 ? 'auto' : _b;
+    useEffect(function () {
+        if (scrollRef.current) {
+            scrollRef.current.style.scrollBehavior = scrollBehavior;
+        }
+    }, [scrollRef.current]);
+    return null;
+}
+
+var MessageList = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var _g = _a.className, className = _g === void 0 ? '' : _g, renderMessage = _a.renderMessage, renderPlaceholderEmpty = _a.renderPlaceholderEmpty, renderCustomSeparator = _a.renderCustomSeparator, renderPlaceholderLoader = _a.renderPlaceholderLoader, renderFrozenNotification = _a.renderFrozenNotification;
+    var _h = useGroupChannelContext(), channelUrl = _h.channelUrl, hasNext = _h.hasNext, loading = _h.loading, messages = _h.messages, newMessages = _h.newMessages, scrollToBottom = _h.scrollToBottom, isScrollBottomReached = _h.isScrollBottomReached, isMessageGroupingEnabled = _h.isMessageGroupingEnabled, scrollRef = _h.scrollRef, scrollDistanceFromBottomRef = _h.scrollDistanceFromBottomRef, currentChannel = _h.currentChannel, replyType = _h.replyType, scrollPubSub = _h.scrollPubSub;
+    var store = useSendbirdStateContext();
+    var _j = useState(), unreadSinceDate = _j[0], setUnreadSinceDate = _j[1];
+    useScrollBehavior();
+    useEffect(function () {
+        if (isScrollBottomReached) {
+            setUnreadSinceDate(undefined);
+        }
+        else {
+            setUnreadSinceDate(new Date());
+        }
+    }, [isScrollBottomReached]);
+    /**
+     * 1. Move the message list scroll
+     *    when each message's height is changed by `reactions` OR `showEdit`
+     * 2. Keep the scrollBottom value after fetching new message list
+     */
+    var onMessageContentSizeChanged = function (isBottomMessageAffected) {
+        if (isBottomMessageAffected === void 0) { isBottomMessageAffected = false; }
+        var elem = scrollRef.current;
+        if (elem) {
+            var latestDistance = scrollDistanceFromBottomRef.current;
+            var currentDistance = elem.scrollHeight - elem.scrollTop - elem.offsetHeight;
+            if (latestDistance < currentDistance && (!isBottomMessageAffected || latestDistance < SCROLL_BUFFER)) {
+                var diff = currentDistance - latestDistance;
+                // Move the scroll as much as the height of the message has changed
+                scrollPubSub.publish('scroll', { top: elem.scrollTop + diff, lazy: false });
+            }
+        }
+    };
+    var renderer = {
+        frozenNotification: function () {
+            if (!currentChannel || !currentChannel.isFrozen)
+                return null;
+            if (renderFrozenNotification)
+                return renderFrozenNotification();
+            return React__default.createElement(FrozenNotification, { className: "sendbird-conversation__messages__notification" });
+        },
+        unreadMessagesNotification: function () {
+            if (isScrollBottomReached || !unreadSinceDate)
+                return null;
+            return (React__default.createElement(UnreadCount, { className: "sendbird-conversation__messages__notification", count: newMessages.length, lastReadAt: unreadSinceDate, onClick: scrollToBottom }));
+        },
+        scrollToBottomButton: function () {
+            if (!hasNext() && isScrollBottomReached)
+                return null;
+            return (React__default.createElement("div", { className: "sendbird-conversation__scroll-bottom-button", onClick: scrollToBottom, onKeyDown: scrollToBottom, tabIndex: 0, role: "button" },
+                React__default.createElement(Icon, { width: "24px", height: "24px", type: IconTypes.CHEVRON_DOWN, fillColor: IconColors.PRIMARY })));
+        },
+    };
+    if (loading) {
+        if (renderPlaceholderLoader)
+            return renderPlaceholderLoader();
+        return React__default.createElement(PlaceHolder, { type: PlaceHolderTypes.LOADING });
+    }
+    if (messages.length === 0) {
+        if (renderPlaceholderEmpty)
+            return renderPlaceholderEmpty();
+        return React__default.createElement(PlaceHolder, { className: "sendbird-conversation__no-messages", type: PlaceHolderTypes.NO_MESSAGES });
+    }
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: "sendbird-conversation__messages ".concat(className) },
+            React__default.createElement("div", { className: "sendbird-conversation__scroll-container" },
+                React__default.createElement("div", { className: "sendbird-conversation__padding" }),
+                React__default.createElement("div", { className: "sendbird-conversation__messages-padding", ref: scrollRef },
+                    messages.map(function (message, idx) {
+                        var _a = getMessagePartsInfo({
+                            allMessages: messages,
+                            replyType: replyType,
+                            isMessageGroupingEnabled: isMessageGroupingEnabled,
+                            currentIndex: idx,
+                            currentMessage: message,
+                            currentChannel: currentChannel,
+                        }), chainTop = _a.chainTop, chainBottom = _a.chainBottom, hasSeparator = _a.hasSeparator;
+                        var isOutgoingMessage = message.isUserMessage() && message.sender.userId === store.config.userId;
+                        return (React__default.createElement(MessageProvider, { message: message, key: getComponentKeyFromMessage(message), isByMe: isOutgoingMessage },
+                            React__default.createElement(Message, { handleScroll: onMessageContentSizeChanged, renderMessage: renderMessage, message: message, hasSeparator: hasSeparator, chainTop: chainTop, chainBottom: chainBottom, renderCustomSeparator: renderCustomSeparator })));
+                    }),
+                    !hasNext()
+                        && ((_c = (_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.groupChannel) === null || _c === void 0 ? void 0 : _c.enableTypingIndicator)
+                        && ((_f = (_e = (_d = store === null || store === void 0 ? void 0 : store.config) === null || _d === void 0 ? void 0 : _d.groupChannel) === null || _e === void 0 ? void 0 : _e.typingIndicatorTypes) === null || _f === void 0 ? void 0 : _f.has(TypingIndicatorType.Bubble)) && (React__default.createElement(TypingIndicatorBubbleWrapper, { channelUrl: channelUrl, handleScroll: onMessageContentSizeChanged })))),
+            React__default.createElement(React__default.Fragment, null, renderer.frozenNotification()),
+            React__default.createElement(React__default.Fragment, null, renderer.unreadMessagesNotification()),
+            React__default.createElement(React__default.Fragment, null, renderer.scrollToBottomButton()))));
+};
+var TypingIndicatorBubbleWrapper = function (props) {
+    var stores = useSendbirdStateContext().stores;
+    var _a = useState([]), typingMembers = _a[0], setTypingMembers = _a[1];
+    useGroupChannelHandler(stores.sdkStore.sdk, {
+        onTypingStatusUpdated: function (channel) {
+            if (channel.url === props.channelUrl) {
+                setTypingMembers(channel.getTypingUsers());
+            }
+        },
+    });
+    return React__default.createElement(TypingIndicatorBubble, { typingMembers: typingMembers, handleScroll: props.handleScroll });
+};
+
+var MessageInputWrapper = function (props) {
+    var _a;
+    var config = useSendbirdStateContext().config;
+    var context = useGroupChannelContext();
+    var messages = context.messages, currentChannel = context.currentChannel;
+    var lastMessage = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.lastMessage;
+    var isLastMessageSuggestedRepliesEnabled = useIIFE(function () {
+        var _a;
+        if (!((_a = config === null || config === void 0 ? void 0 : config.groupChannel) === null || _a === void 0 ? void 0 : _a.enableSuggestedReplies))
+            return false;
+        if (getSuggestedReplies(lastMessage).length === 0)
+            return false;
+        var lastMessageInContext = messages[messages.length - 1];
+        if (isSendableMessage(lastMessageInContext) && lastMessageInContext.sendingStatus !== 'succeeded')
+            return false;
+        return true;
+    });
+    var disableMessageInput = props.disabled
+        || isLastMessageSuggestedRepliesEnabled && !!((_a = lastMessage.extendedMessagePayload) === null || _a === void 0 ? void 0 : _a['disable_chat_input']);
+    return (React__default.createElement(MessageInputWrapperView, __assign({}, props, { disabled: disableMessageInput }, context)));
+};
 
 var GroupChannelUI = function (props) {
     var context = useGroupChannelContext();
     var currentChannel = context.currentChannel, channelUrl = context.channelUrl, loading = context.loading;
-    return (React__default.createElement(GroupChannelUIView, __assign({}, props, context, { requestedChannelUrl: channelUrl, loading: loading, isInvalid: channelUrl && !currentChannel })));
+    // Inject components to presentation layer
+    var _a = props.renderChannelHeader, renderChannelHeader = _a === void 0 ? function (props) { return React__default.createElement(GroupChannelHeader, __assign({}, props)); } : _a, _b = props.renderMessageList, renderMessageList = _b === void 0 ? function (props) { return React__default.createElement(MessageList, __assign({}, props, { className: "sendbird-conversation__message-list" })); } : _b, _c = props.renderMessageInput, renderMessageInput = _c === void 0 ? function () { return React__default.createElement(MessageInputWrapper, __assign({}, props)); } : _c;
+    return (React__default.createElement(GroupChannelUIView, __assign({}, props, context, { loading: loading, isInvalid: channelUrl && !currentChannel, channelUrl: channelUrl, renderChannelHeader: renderChannelHeader, renderMessageList: renderMessageList, renderMessageInput: renderMessageInput })));
 };
 
 var GroupChannel = function (props) {

package/App.js.map

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

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog - v3
 
+## [v3.11.1] (Feb 08, 2024)
+
+### Fixes:
+
+* Fixed `acceptableMimeTypes` to support web standard format
+* Fixed a bug where `renderChannelHeader` is not passed properly
+
+## [v3.11.0] (Feb 07, 2024)
+
+### Features:
+* Added `enableSuggestedReplies` global option
+  * How to use?
+  ```tsx
+  <App
+    appId={appId}
+    userId={userId}
+    uikitOptions={{
+      groupChannel: {
+        // Below turns on the `SuggestedReplies` feature (see v3.8.0 release changelog). Default value is false.
+        enableSuggestedReplies: true,
+      }
+    }}
+  />
+  ```
+* `MessageInput` is now being disabled if `channel.lastMessage.extendedMessagePayload['disable_chat_input']` is true
+
+### Fixes:
+
+* Fixed a bug where channel is being removed from my channel list when other member leaves the channel
+* Fixed a bug where channel avatar image is not updated when a member leaves, or joins, or `profileUrl` changes
+* Fixed a bug where `ChannelListUI` is not updated when network is reconnected
+* Fixed a bug in `ChannelList` where `activeChannelUrl` is set but `onChannelSelect` fires with null after loading `ChannelList`
+* Fixed a bug where url text wrapped around special characters not parsed as link
+* Fixed a bug where space character before url text is removed in sent message
+* Fixed a runtime error occurring when using `renderMessage` of `Channel` module
+
 ## [v3.10.1] (Jan 26, 2024)
 
 ### Fixes:
@@ -21,8 +57,6 @@
 Now we are supporting Feedback Message feature!
 Feedback message feature can be turned on through `enableFeedback` option. When turned on, feedback feature is applied to messages with non default `myFeedbackStatus` values.
 
-
-
 * Added `enableFeedback` global option
   * How to use?
   ```tsx

package/Channel/components/ChannelHeader.js

@@ -1,41 +1,41 @@
-import '../../chunks/bundle-BA7tv0JB.js';
+import '../../chunks/bundle-0vtSUcHY.js';
 import 'react';
-export { C as ChannelHeader, C as default } from '../../chunks/bundle-3GWXgoxj.js';
+export { C as ChannelHeader, C as default } from '../../chunks/bundle-Dpt_A2Sv.js';
 import '../context.js';
 import '../../ui/IconButton.js';
 import '../../ui/Icon.js';
-import '../../chunks/bundle-cA_r9HRx.js';
-import '../../chunks/bundle-I8JFwttJ.js';
-import '../../chunks/bundle-jy6_UG14.js';
+import '../../chunks/bundle-4ab6nIKe.js';
+import '../../chunks/bundle-RzWTDZDo.js';
+import '../../chunks/bundle-_NUeDv_m.js';
 import '../../ui/ChannelAvatar.js';
-import '../../chunks/bundle-Qufz6_i_.js';
+import '../../chunks/bundle-7RyEqo9-.js';
 import '../../ui/ImageRenderer.js';
-import '../../chunks/bundle-jDjj3eHU.js';
-import '../../chunks/bundle-F6-2aFsp.js';
-import '../../chunks/bundle-0J_EdUWI.js';
-import '../../chunks/bundle-r9j_eCHc.js';
+import '../../chunks/bundle-TEGbbRiE.js';
+import '../../chunks/bundle-R5n5AVj8.js';
+import '../../chunks/bundle-2aZMC1gn.js';
+import '../../chunks/bundle-1XQGq5tE.js';
 import '../../useSendbirdStateContext.js';
 import '../../withSendbird.js';
-import '../../chunks/bundle-BBjosDA0.js';
-import '../../chunks/bundle-ULVw0l0r.js';
-import '../../chunks/bundle-vOT5acXc.js';
-import '../../chunks/bundle-poK2Vr1v.js';
-import '../../chunks/bundle-d5KevIXI.js';
+import '../../chunks/bundle-zOkaSZl3.js';
+import '../../chunks/bundle-YOec1wfw.js';
+import '../../chunks/bundle-U_0F9z8c.js';
+import '../../chunks/bundle-QUJKjMCy.js';
+import '../../chunks/bundle-QWYghVSN.js';
 import '@sendbird/chat/message';
-import '../../chunks/bundle-NjNqsDXb.js';
-import '../../chunks/bundle-hDx2-CRe.js';
-import '../../chunks/bundle-aKXnhi3A.js';
-import '../../chunks/bundle-_cXVZn5n.js';
-import '../../chunks/bundle-NwZvowyL.js';
-import '../../chunks/bundle-N9hMnIRl.js';
+import '../../chunks/bundle-5cvB_UbP.js';
+import '../../chunks/bundle-IKRolu9P.js';
+import '../../chunks/bundle-9wFvMqxF.js';
+import '../../chunks/bundle-SI8TVXcF.js';
+import '../../chunks/bundle-TlXrstq8.js';
+import '../../chunks/bundle-hrqkDKRD.js';
 import '@sendbird/chat/groupChannel';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../chunks/bundle-YoWLsJ0C.js';
+import '../../chunks/bundle-brky8TnE.js';
 import '../hooks/useInitialMessagesFetch.js';
-import '../../chunks/bundle-D1V3P366.js';
-import '../../chunks/bundle-nlOgiAcu.js';
-import '../../chunks/bundle-Q8kUKu5l.js';
-import '../../chunks/bundle-MBrlu_LK.js';
-import '../../chunks/bundle-ZOCAUrJO.js';
-import '../../chunks/bundle-laVKAiJ-.js';
+import '../../chunks/bundle-T7ZknK5s.js';
+import '../../chunks/bundle-KwnXXB-s.js';
+import '../../chunks/bundle-b9LCaMtu.js';
+import '../../chunks/bundle-e5lT4U6_.js';
+import '../../chunks/bundle-eGLEfc7r.js';
+import '../../chunks/bundle-X1ee5Xag.js';
 //# sourceMappingURL=ChannelHeader.js.map