@sendbird/uikit-react 3.11.0 → 3.11.2-alpha.0

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-SbHFlBY0.js';
-import { _ as __assign, b as __awaiter, c as __generator } from './chunks/bundle-fgwje9pW.js';
-import { u as useGroupChannelContext, G as GroupChannelProvider } from './chunks/bundle-7jAH-Rav.js';
-import { G as GroupChannelUIView, M as MessageInputWrapper } from './chunks/bundle-82c4Z7tx.js';
-import { u as useGroupChannelListContext, G as GroupChannelListItemView, a as GroupChannelListProvider } from './chunks/bundle-AnoUW9yQ.js';
-import { G as GroupChannelListUIView } from './chunks/bundle-vBXnDJn4.js';
-import { L as LocalizationContext, u as useLocalization } from './chunks/bundle-hOV701rb.js';
-import ContextMenu, { MenuItems, MenuItem } from './ui/ContextMenu.js';
-import IconButton from './ui/IconButton.js';
+import { u as useMediaQueryContext } from './chunks/bundle-YRvxgYKR.js';
+import { _ as __assign, b as __awaiter, c as __generator } from './chunks/bundle-lecuE4TA.js';
+import { u as useGroupChannelContext, G as GroupChannelProvider } from './chunks/bundle-3voNlUUD.js';
+import { G as GroupChannelUIView } from './chunks/bundle-ykz8bgi9.js';
+import { G as GroupChannelHeaderView } from './chunks/bundle-O76AfJcB.js';
+import { useIIFE, useGroupChannelHandler } from '@sendbird/uikit-tools';
+import { T as TypingIndicatorType } from './chunks/bundle-Tga27YgW.js';
+import PlaceHolder, { PlaceHolderTypes } from './ui/PlaceHolder.js';
 import Icon, { IconTypes, IconColors } from './ui/Icon.js';
-import { L as LeaveGroupChannel } from './chunks/bundle-zuRObww2.js';
 import { useSendbirdStateContext } from './useSendbirdStateContext.js';
-import { d as getChannelTitle } from './chunks/bundle-rgUMi-vG.js';
-import { a as AddGroupChannelView } from './chunks/bundle-oszCig8K.js';
+import { g as getSuggestedReplies, Q as isSendableMessage } from './chunks/bundle-tuaNTnsI.js';
+import { i as isDisabledBecauseFrozen, a as isDisabledBecauseMuted, c as getComponentKeyFromMessage } from './chunks/bundle-V_OdjTo0.js';
+import { a as MessageView } from './chunks/bundle-8qqVdWGU.js';
+import { a as FileViewerView } from './chunks/bundle-1pmw9ZjP.js';
+import { a as RemoveMessageModalView } from './chunks/bundle-BdJkMGvq.js';
+import { getMessagePartsInfo } from './Channel/utils/getMessagePartsInfo.js';
+import { U as UnreadCount } from './chunks/bundle-6ruaH4rs.js';
+import { F as FrozenNotification } from './chunks/bundle-nHrkzCe9.js';
+import { S as SCROLL_BUFFER } from './chunks/bundle-AGBz-vkr.js';
+import { MessageProvider } from './Message/context.js';
+import TypingIndicatorBubble from './ui/TypingIndicatorBubble.js';
+import { M as MessageInputWrapperView } from './chunks/bundle-bMcW1GEP.js';
+import { L as LocalizationContext, u as useLocalization } from './chunks/bundle-x89ikMo3.js';
+import { u as useVoicePlayerContext, b as ALL } from './chunks/bundle-BGYKrNzm.js';
+import './VoiceRecorder/context.js';
+import './chunks/bundle-b3SHlOhn.js';
+import './chunks/bundle-AmJs7yMV.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-e4D37XFd.js';
+import { G as GroupChannelListUIView } from './chunks/bundle-saqL4CE1.js';
+import ContextMenu, { MenuItems, MenuItem } from './ui/ContextMenu.js';
+import { L as LeaveGroupChannel } from './chunks/bundle-yGKmazki.js';
+import { d as getChannelTitle } from './chunks/bundle-03KTtPvp.js';
+import { a as AddGroupChannelView } from './chunks/bundle-_umZmDrR.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-4IsRvL2E.js';
-import { u as useVoicePlayerContext, a as ALL } from './chunks/bundle-eHUDbnaD.js';
-import '@sendbird/uikit-tools';
+import { u as uuidv4 } from './chunks/bundle-SixFq6AN.js';
 import './withSendbird.js';
 import 'css-vars-ponyfill';
-import './chunks/bundle-n9wVwJwL.js';
-import './chunks/bundle-zLlQw-jW.js';
-import './chunks/bundle-W8as0zrL.js';
+import './chunks/bundle-ufJxA-XY.js';
+import './chunks/bundle-2W5CyGcR.js';
+import './chunks/bundle-tq1N8mXT.js';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
-import './chunks/bundle-GQt7EDbt.js';
-import './utils/message/getOutgoingMessageState.js';
-import './chunks/bundle-tOpyp2TM.js';
-import './chunks/bundle-byix4-_Z.js';
-import './VoiceRecorder/context.js';
-import './chunks/bundle-K0s-Ect1.js';
-import 'react-dom';
-import './ui/Button.js';
-import './chunks/bundle-kVopRZZG.js';
-import './chunks/bundle-oRyfuopS.js';
-import './chunks/bundle-zpdae5WH.js';
-import './chunks/bundle-b6xyPdyj.js';
-import './chunks/bundle-WK57RaQR.js';
+import './chunks/bundle-9V468X-z.js';
+import './chunks/bundle-t6XeIQNm.js';
+import './chunks/bundle-vD0TG7zV.js';
+import './chunks/bundle-nbI9uEwl.js';
 import './hooks/useModal.js';
+import './chunks/bundle-mZbqaM1H.js';
+import './chunks/bundle-3D1PZ-ud.js';
+import './utils/message/getOutgoingMessageState.js';
+import './ui/MessageInput.js';
+import './chunks/bundle-gW6uMATy.js';
+import './chunks/bundle-vhdBaDF3.js';
+import './chunks/bundle-1MLJ8bKz.js';
+import 'dompurify';
+import './chunks/bundle-Oj2BtjtX.js';
+import './chunks/bundle-VYxAZvjJ.js';
+import './chunks/bundle-IxZaogwa.js';
+import './chunks/bundle-7kUZVeKf.js';
+import './chunks/bundle-vDQ-M9vf.js';
+import './chunks/bundle-ZvLiKWK6.js';
+import './chunks/bundle-4V0JvqcA.js';
+import './ui/ImageRenderer.js';
+import './chunks/bundle-UnPRF3Nm.js';
+import './Thread/context.js';
+import './chunks/bundle-jHcn1nNl.js';
+import './chunks/bundle-eAstRp6b.js';
+import './chunks/bundle-8y_Wbyn2.js';
 import '@sendbird/chat/message';
-import './chunks/bundle-NQlEMhhs.js';
-import './chunks/bundle-NeB2uoNn.js';
-import './chunks/bundle-2mo18Chz.js';
-import './chunks/bundle-143lYf48.js';
-import './chunks/bundle-BbdMr4SL.js';
-import './chunks/bundle-l3_ubbH6.js';
-import './chunks/bundle-pfcIdF14.js';
+import './chunks/bundle-e2Vf46hw.js';
+import './Thread/context/types.js';
+import './chunks/bundle-DFJxeHcS.js';
+import './chunks/bundle-e06TkgoP.js';
+import './chunks/bundle-sYlsEiNr.js';
+import './chunks/bundle-S3d13RAB.js';
+import './chunks/bundle-jkXn2rcR.js';
+import './chunks/bundle-jprwmfK0.js';
+import './Message/hooks/useDirtyGetMentions.js';
+import './Channel/hooks/useHandleUploadFiles.js';
+import './chunks/bundle-va8TD_Fs.js';
 import './Channel/context.js';
-import './chunks/bundle-ZcOjo_4l.js';
-import './chunks/bundle-GpRTDFGV.js';
-import './chunks/bundle-yE5T9BpV.js';
-import './chunks/bundle-nA9SX_Hi.js';
-import './chunks/bundle-T9LQyh_7.js';
+import './chunks/bundle-kRJ4EZ82.js';
+import './chunks/bundle-93t4h18D.js';
 import './Channel/hooks/useInitialMessagesFetch.js';
-import './chunks/bundle-NxSCk3As.js';
-import './chunks/bundle-qLmDwx8F.js';
-import './chunks/bundle-aaseqnuB.js';
+import './chunks/bundle-nVxyz_Ps.js';
+import './chunks/bundle-iM79wLQe.js';
+import './ui/ConnectionStatus.js';
+import './Channel/components/MessageInput.js';
+import './ui/QuoteMessageInput.js';
+import './chunks/bundle-98tjOpH2.js';
+import './VoicePlayer/useVoicePlayer.js';
+import './VoiceRecorder/useVoiceRecorder.js';
+import './chunks/bundle-YWMb9Ley.js';
+import './ui/PlaybackTime.js';
+import './ui/ProgressBar.js';
+import './ui/TextButton.js';
 import './ui/ChannelAvatar.js';
-import './chunks/bundle-2QckWBqt.js';
-import './ui/ImageRenderer.js';
-import './chunks/bundle-Rq3p335Q.js';
-import './chunks/bundle-kTQOM0SQ.js';
-import './chunks/bundle-7MnAkGtU.js';
-import './chunks/bundle-wsahaI_Z.js';
-import './ui/PlaceHolder.js';
+import './chunks/bundle-DGx57oZD.js';
+import './chunks/bundle-mFqS5lYt.js';
+import './chunks/bundle-ZG2fGdWl.js';
 import './ui/Loader.js';
-import './chunks/bundle-qGLQQXlH.js';
-import './chunks/bundle-QOv6Bgtw.js';
-import './chunks/bundle-ueo2Sf-L.js';
-import './Message/hooks/useDirtyGetMentions.js';
 import './ui/DateSeparator.js';
-import './chunks/bundle-j8bOxoFa.js';
-import './ui/MessageInput.js';
-import './chunks/bundle-qXA8wWBC.js';
-import 'dompurify';
-import './chunks/bundle-4l6RpXkL.js';
-import './chunks/bundle-qvDlYEM_.js';
-import './chunks/bundle-JHAEGHwc.js';
-import './chunks/bundle-dVzhcuE8.js';
 import './ui/MessageContent.js';
 import './ui/MessageItemMenu.js';
-import './chunks/bundle-WdOdwp-Y.js';
 import './ui/SortByRow.js';
 import './ui/MessageItemReactionMenu.js';
 import './ui/ReactionButton.js';
-import './chunks/bundle-jXtqc1kU.js';
+import './chunks/bundle-RO3-Tf7C.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-thvveea5.js';
-import './chunks/bundle-zJNJlM2H.js';
+import './chunks/bundle-NaRW0ez0.js';
 import './ui/ThreadReplies.js';
 import './ui/OGMessageItemBody.js';
-import './chunks/bundle-0v0L0TbZ.js';
+import './chunks/bundle-HjzQRddo.js';
 import './ui/MentionLabel.js';
 import './ui/LinkLabel.js';
 import './ui/TextMessageItemBody.js';
 import './ui/FileMessageItemBody.js';
-import './ui/TextButton.js';
-import './chunks/bundle-o1VHRKp9.js';
-import './chunks/bundle-bTljiK8B.js';
-import './chunks/bundle-9lUB2eTP.js';
+import './chunks/bundle-gOoIGWGP.js';
+import './chunks/bundle-aJFlCJGp.js';
+import './chunks/bundle-5b9e9OHZ.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-3cuuQsdK.js';
-import './chunks/bundle-QaBTXAtO.js';
-import './chunks/bundle-8CxBlReU.js';
-import './chunks/bundle-1nyUxr-Z.js';
-import './chunks/bundle-KWJtSpuF.js';
-import './Channel/utils/getMessagePartsInfo.js';
+import './chunks/bundle-IIsEENu-.js';
+import './chunks/bundle-V2BHS5YW.js';
+import './chunks/bundle-7pdr9tV3.js';
 import './Channel/utils/compareMessagesForGrouping.js';
-import './chunks/bundle-HRsLD2CW.js';
-import './chunks/bundle-xkOWTTW1.js';
-import './chunks/bundle-MGkFgiJm.js';
-import './ui/TypingIndicatorBubble.js';
-import './chunks/bundle-2jWyEzHg.js';
-import './ui/ConnectionStatus.js';
-import './chunks/bundle-b1IOVyYG.js';
-import './ui/QuoteMessageInput.js';
-import './VoiceRecorder/useVoiceRecorder.js';
-import './chunks/bundle-lxPqhWGY.js';
-import './chunks/bundle-2d4_n6Eh.js';
-import './Channel/components/MessageInput.js';
-import './chunks/bundle-areDE3aT.js';
+import './chunks/bundle-JDmJWzNI.js';
 import './ui/Badge.js';
 import './ui/MentionUserLabel.js';
-import './chunks/bundle-IbFVsltH.js';
+import './chunks/bundle-MQsPfC_7.js';
 import './EditUserProfile.js';
 import './EditUserProfile/context.js';
 import './EditUserProfile/components/EditUserProfileUI.js';
 import './CreateChannel.js';
 import './CreateChannel/components/CreateChannelUI.js';
-import './chunks/bundle-wBOLbuH7.js';
+import './chunks/bundle-uaykoMl_.js';
 import './CreateChannel/components/InviteUsers.js';
 import './CreateChannel/components/SelectChannelType.js';
 import './ChannelSettings/components/ChannelSettingsUI.js';
@@ -165,37 +169,201 @@ import './ChannelSettings/components/EditDetailsModal.js';
 import './ChannelSettings/components/ModerationPanel.js';
 import './ui/Accordion.js';
 import './ui/AccordionGroup.js';
-import './chunks/bundle-x1NoGtpJ.js';
+import './chunks/bundle-HactSQTv.js';
 import './ui/Toggle.js';
 import './ChannelSettings/components/UserListItem.js';
-import './chunks/bundle-rCo3Zf4a.js';
+import './chunks/bundle-ylVRefJG.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-2vQfu2KQ.js';
+import './chunks/bundle-gNV9jB2z.js';
 import './Thread/components/ParentMessageInfoItem.js';
-import './chunks/bundle-MvpO_S_k.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, renderMessageInput: function () {
-            var _a, _b;
-            return ((_b = (_a = props.renderMessageInput) === null || _a === void 0 ? void 0 : _a.call(props)) !== null && _b !== void 0 ? _b : React__default.createElement(MessageInputWrapper, __assign({}, props)));
-        } })));
+    // 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,12 @@
 # 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:

package/Channel/components/ChannelHeader.js

@@ -1,41 +1,41 @@
-import '../../chunks/bundle-fgwje9pW.js';
+import '../../chunks/bundle-lecuE4TA.js';
 import 'react';
-export { C as ChannelHeader, C as default } from '../../chunks/bundle-aaseqnuB.js';
+export { C as ChannelHeader, C as default } from '../../chunks/bundle-O76AfJcB.js';
 import '../context.js';
 import '../../ui/IconButton.js';
 import '../../ui/Icon.js';
-import '../../chunks/bundle-tOpyp2TM.js';
-import '../../chunks/bundle-kVopRZZG.js';
-import '../../chunks/bundle-oRyfuopS.js';
+import '../../chunks/bundle-9V468X-z.js';
+import '../../chunks/bundle-b3SHlOhn.js';
+import '../../chunks/bundle-vD0TG7zV.js';
 import '../../ui/ChannelAvatar.js';
-import '../../chunks/bundle-2QckWBqt.js';
+import '../../chunks/bundle-4V0JvqcA.js';
 import '../../ui/ImageRenderer.js';
-import '../../chunks/bundle-Rq3p335Q.js';
-import '../../chunks/bundle-kTQOM0SQ.js';
-import '../../chunks/bundle-7MnAkGtU.js';
-import '../../chunks/bundle-SbHFlBY0.js';
+import '../../chunks/bundle-UnPRF3Nm.js';
+import '../../chunks/bundle-DGx57oZD.js';
+import '../../chunks/bundle-mFqS5lYt.js';
+import '../../chunks/bundle-YRvxgYKR.js';
 import '../../useSendbirdStateContext.js';
 import '../../withSendbird.js';
-import '../../chunks/bundle-hOV701rb.js';
-import '../../chunks/bundle-b6xyPdyj.js';
-import '../../chunks/bundle-NQlEMhhs.js';
-import '../../chunks/bundle-ZcOjo_4l.js';
-import '../../chunks/bundle-BbdMr4SL.js';
+import '../../chunks/bundle-x89ikMo3.js';
+import '../../chunks/bundle-3D1PZ-ud.js';
+import '../../chunks/bundle-e2Vf46hw.js';
+import '../../chunks/bundle-vhdBaDF3.js';
+import '../../chunks/bundle-8y_Wbyn2.js';
 import '@sendbird/chat/message';
-import '../../chunks/bundle-GpRTDFGV.js';
-import '../../chunks/bundle-yE5T9BpV.js';
-import '../../chunks/bundle-n9wVwJwL.js';
-import '../../chunks/bundle-nA9SX_Hi.js';
-import '../../chunks/bundle-T9LQyh_7.js';
-import '../../chunks/bundle-GQt7EDbt.js';
+import '../../chunks/bundle-kRJ4EZ82.js';
+import '../../chunks/bundle-93t4h18D.js';
+import '../../chunks/bundle-ufJxA-XY.js';
+import '../../chunks/bundle-DFJxeHcS.js';
+import '../../chunks/bundle-e06TkgoP.js';
+import '../../chunks/bundle-tuaNTnsI.js';
 import '@sendbird/chat/groupChannel';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../chunks/bundle-4IsRvL2E.js';
+import '../../chunks/bundle-SixFq6AN.js';
 import '../hooks/useInitialMessagesFetch.js';
-import '../../chunks/bundle-NxSCk3As.js';
-import '../../chunks/bundle-pfcIdF14.js';
-import '../../chunks/bundle-NeB2uoNn.js';
-import '../../chunks/bundle-zpdae5WH.js';
-import '../../chunks/bundle-WK57RaQR.js';
-import '../../chunks/bundle-qLmDwx8F.js';
+import '../../chunks/bundle-nVxyz_Ps.js';
+import '../../chunks/bundle-eAstRp6b.js';
+import '../../chunks/bundle-sYlsEiNr.js';
+import '../../chunks/bundle-AGBz-vkr.js';
+import '../../chunks/bundle-nbI9uEwl.js';
+import '../../chunks/bundle-jHcn1nNl.js';
 //# sourceMappingURL=ChannelHeader.js.map