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

package/cjs/App.js

@@ -2,97 +2,122 @@
 
 var React = require('react');
 var SendbirdProvider = require('./SendbirdProvider.js');
-var MediaQueryContext = require('./chunks/bundle-2ToiwW-_.js');
-var _tslib = require('./chunks/bundle-RVs527mS.js');
-var GroupChannelProvider = require('./chunks/bundle-85DGianx.js');
-var Channel_components_ChannelUI = require('./chunks/bundle-oTDe-k6e.js');
-var ChannelList_components_ChannelPreview = require('./chunks/bundle-plE_NeWt.js');
-var ChannelList_components_ChannelListUI = require('./chunks/bundle-g2rKMwnQ.js');
-var LocalizationContext = require('./chunks/bundle-WLD9KKbn.js');
-var ui_ContextMenu = require('./ui/ContextMenu.js');
-var ui_IconButton = require('./ui/IconButton.js');
+var MediaQueryContext = require('./chunks/bundle-2m4xB52E.js');
+var _tslib = require('./chunks/bundle-iqHS1VZc.js');
+var Thread_components_ThreadMessageInput = require('./chunks/bundle-5kwftPiT.js');
+var Channel_components_ChannelUI = require('./chunks/bundle-ynXnQd8F.js');
+var Channel_components_ChannelHeader = require('./chunks/bundle-iuhuw3NO.js');
+var uikitTools = require('@sendbird/uikit-tools');
+var Channel_components_MessageList = require('./chunks/bundle-9RhcMGpz.js');
+var ui_PlaceHolder = require('./ui/PlaceHolder.js');
 var ui_Icon = require('./ui/Icon.js');
-var ChannelList_components_ChannelPreviewAction = require('./chunks/bundle-9fFxVdSK.js');
 var useSendbirdStateContext = require('./useSendbirdStateContext.js');
-var ui_MessageStatus = require('./chunks/bundle-8XyvQRnm.js');
-var ChannelList_components_AddChannel = require('./chunks/bundle-5cpSg7Yt.js');
+var index = require('./chunks/bundle-FjYeNDtC.js');
+var utils = require('./chunks/bundle-QfAVRyKH.js');
+var Channel_components_Message = require('./chunks/bundle-Vxsbphkp.js');
+var Channel_components_FileViewer = require('./chunks/bundle-ohZ7TvgX.js');
+var Channel_components_RemoveMessageModal = require('./chunks/bundle-hjFdF-6P.js');
+var Channel_utils_getMessagePartsInfo = require('./Channel/utils/getMessagePartsInfo.js');
+var index$2 = require('./chunks/bundle-noIJsIFY.js');
+var index$1 = require('./chunks/bundle-2JrvvGxH.js');
+var consts = require('./chunks/bundle-wJ2ptD6A.js');
+var Message_context = require('./Message/context.js');
+var ui_TypingIndicatorBubble = require('./ui/TypingIndicatorBubble.js');
+var MessageInputWrapperView = require('./chunks/bundle-YUfnYPkc.js');
+var LocalizationContext = require('./chunks/bundle-hOvUwVfn.js');
+var VoicePlayer_context = require('./chunks/bundle-67Mi7efX.js');
+require('./VoiceRecorder/context.js');
+require('./chunks/bundle-llF5F-TZ.js');
+require('./chunks/bundle-P0CpwOO3.js');
+require('react-dom');
+var ui_IconButton = require('./ui/IconButton.js');
+require('./ui/Button.js');
+var ChannelList_components_ChannelPreview = require('./chunks/bundle-1GmGWKVZ.js');
+var ChannelList_components_ChannelListUI = require('./chunks/bundle-_WwYBplO.js');
+var ui_ContextMenu = require('./ui/ContextMenu.js');
+var ChannelList_components_ChannelPreviewAction = require('./chunks/bundle-FsyjPGmT.js');
+var ui_MessageStatus = require('./chunks/bundle-RN_QFjdS.js');
+var ChannelList_components_AddChannel = require('./chunks/bundle-pNRqu7WJ.js');
 var Channel = require('./Channel.js');
 var ChannelList = require('./ChannelList.js');
 var ChannelSettings = require('./ChannelSettings.js');
 var MessageSearch = require('./MessageSearch.js');
 var Thread = require('./Thread.js');
 var groupChannel = require('@sendbird/chat/groupChannel');
-var uuid = require('./chunks/bundle-sW6CpN9W.js');
-var VoicePlayer_context = require('./chunks/bundle-_apVcG-_.js');
-require('@sendbird/uikit-tools');
+var uuid = require('./chunks/bundle-X91TChia.js');
 require('./withSendbird.js');
 require('css-vars-ponyfill');
-require('./chunks/bundle--RWWGoZo.js');
-require('./chunks/bundle-rPjvPmtP.js');
-require('./chunks/bundle-vFjv8pGX.js');
+require('./chunks/bundle-jHz-YSnt.js');
+require('./chunks/bundle-3jV6ta52.js');
+require('./chunks/bundle--iuXcDXt.js');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
-require('./chunks/bundle-fnv2bNo-.js');
-require('./utils/message/getOutgoingMessageState.js');
-require('./chunks/bundle-nQDclaWr.js');
-require('./chunks/bundle-YyXY-feT.js');
-require('./VoiceRecorder/context.js');
-require('./chunks/bundle-lnLwvZ7H.js');
-require('react-dom');
-require('./ui/Button.js');
-require('./chunks/bundle-JaD2Ao-u.js');
-require('./chunks/bundle-OBj337Le.js');
-require('./chunks/bundle-SggLEV_z.js');
-require('./chunks/bundle-ZL4COF6I.js');
-require('./chunks/bundle-60IjeSgc.js');
+require('./chunks/bundle-hxTc8i2-.js');
+require('./chunks/bundle-vdGlDJwK.js');
+require('./chunks/bundle-2wmQkgT-.js');
+require('./chunks/bundle-AJUZmA_i.js');
 require('./hooks/useModal.js');
+require('./chunks/bundle-QU0jnoP-.js');
+require('./chunks/bundle-ZpjyJiE2.js');
+require('./utils/message/getOutgoingMessageState.js');
+require('./ui/MessageInput.js');
+require('./chunks/bundle-rC6m1_Ne.js');
+require('./chunks/bundle-F0bRG2Zo.js');
+require('./chunks/bundle-ANLunMPv.js');
+require('dompurify');
+require('./chunks/bundle-X1BzROq8.js');
+require('./chunks/bundle--ecbrMEb.js');
+require('./chunks/bundle-G5XuJJIA.js');
+require('./chunks/bundle-rvRwtsmf.js');
+require('./chunks/bundle-I_YmEXHr.js');
+require('./chunks/bundle-hvnp5dEh.js');
+require('./chunks/bundle-KJFaLE9x.js');
+require('./ui/ImageRenderer.js');
+require('./chunks/bundle-cQ--EsIE.js');
+require('./Thread/context.js');
+require('./chunks/bundle-fecqsQkK.js');
+require('./chunks/bundle-76dF9zQG.js');
+require('./chunks/bundle-x95y05Ke.js');
 require('@sendbird/chat/message');
-require('./chunks/bundle-3S8jBmCV.js');
-require('./chunks/bundle-wQUBcS0L.js');
-require('./chunks/bundle-C42WLw1z.js');
-require('./chunks/bundle-_TBSquwd.js');
-require('./chunks/bundle-a1nOrOrG.js');
-require('./chunks/bundle-guyZxs5x.js');
-require('./chunks/bundle-K8ngPNTR.js');
+require('./chunks/bundle-vTP0lM0K.js');
+require('./Thread/context/types.js');
+require('./chunks/bundle-ap8pXM0q.js');
+require('./chunks/bundle-9aiPdBmP.js');
+require('./chunks/bundle-k0KXb-1f.js');
+require('./chunks/bundle-WvIphOdW.js');
+require('./chunks/bundle-32lBXRB6.js');
+require('./chunks/bundle-gxaDPnr1.js');
+require('./Message/hooks/useDirtyGetMentions.js');
+require('./Channel/hooks/useHandleUploadFiles.js');
+require('./chunks/bundle-0UaiW8Jl.js');
 require('./Channel/context.js');
-require('./chunks/bundle-yf5herNq.js');
-require('./chunks/bundle-w4VdLYPs.js');
-require('./chunks/bundle-7sO7MuTY.js');
-require('./chunks/bundle-duGLRUrw.js');
-require('./chunks/bundle-1n4GnjYf.js');
+require('./chunks/bundle-C5EEFQnI.js');
+require('./chunks/bundle-ACSRBgMH.js');
 require('./Channel/hooks/useInitialMessagesFetch.js');
-require('./chunks/bundle-4hsD0CCh.js');
-require('./chunks/bundle-iRjY_BU4.js');
-require('./chunks/bundle-LmzJA_0-.js');
+require('./chunks/bundle-hNqFXR4S.js');
+require('./chunks/bundle--Hh9Jg5X.js');
+require('./ui/ConnectionStatus.js');
+require('./Channel/components/MessageInput.js');
+require('./ui/QuoteMessageInput.js');
+require('./chunks/bundle-n_VfrAmp.js');
+require('./VoicePlayer/useVoicePlayer.js');
+require('./VoiceRecorder/useVoiceRecorder.js');
+require('./chunks/bundle-5q9EbjK_.js');
+require('./ui/PlaybackTime.js');
+require('./ui/ProgressBar.js');
+require('./ui/TextButton.js');
 require('./ui/ChannelAvatar.js');
-require('./chunks/bundle-rUpy0DGt.js');
-require('./ui/ImageRenderer.js');
-require('./chunks/bundle-wU4qxzey.js');
-require('./chunks/bundle-lXjDRYAu.js');
-require('./chunks/bundle-4OXJViEd.js');
-require('./chunks/bundle-le086Dbq.js');
-require('./ui/PlaceHolder.js');
+require('./chunks/bundle-KpooXS-Y.js');
+require('./chunks/bundle-QtkQF0UJ.js');
+require('./chunks/bundle-fHZLMavL.js');
 require('./ui/Loader.js');
-require('./chunks/bundle-JwSYMgZa.js');
-require('./chunks/bundle-WuJcM_O3.js');
-require('./chunks/bundle-L5q_NWiq.js');
-require('./Message/hooks/useDirtyGetMentions.js');
 require('./ui/DateSeparator.js');
-require('./chunks/bundle-Og0K_sLb.js');
-require('./ui/MessageInput.js');
-require('./chunks/bundle-RC4m8KcZ.js');
-require('dompurify');
-require('./chunks/bundle-ZqkDqz4X.js');
-require('./chunks/bundle-dLwo2XPj.js');
-require('./chunks/bundle-7IKA03Ad.js');
-require('./chunks/bundle-JReI_QbA.js');
 require('./ui/MessageContent.js');
 require('./ui/MessageItemMenu.js');
-require('./chunks/bundle-L9oXX97B.js');
 require('./ui/SortByRow.js');
 require('./ui/MessageItemReactionMenu.js');
 require('./ui/ReactionButton.js');
-require('./chunks/bundle-rmOQxjwa.js');
+require('./chunks/bundle-ZRoIbdW4.js');
 require('./ui/EmojiReactions.js');
 require('./ui/ReactionBadge.js');
 require('./ui/BottomSheet.js');
@@ -103,61 +128,40 @@ require('./ui/UserProfile.js');
 require('./sendbirdSelectors.js');
 require('./ui/Tooltip.js');
 require('./ui/TooltipWrapper.js');
-require('./Message/context.js');
 require('./ui/AdminMessage.js');
 require('./ui/QuoteMessage.js');
-require('./chunks/bundle-JVylXDBB.js');
-require('./chunks/bundle-3VBtozeG.js');
+require('./chunks/bundle-Mpp49uHC.js');
 require('./ui/ThreadReplies.js');
 require('./ui/OGMessageItemBody.js');
-require('./chunks/bundle-28M_gXGl.js');
+require('./chunks/bundle-XeIHXtJC.js');
 require('./ui/MentionLabel.js');
 require('./ui/LinkLabel.js');
 require('./ui/TextMessageItemBody.js');
 require('./ui/FileMessageItemBody.js');
-require('./ui/TextButton.js');
-require('./chunks/bundle-Bx0FCMKL.js');
-require('./chunks/bundle-3GWdY_5G.js');
-require('./chunks/bundle-_QsPNZ6J.js');
+require('./chunks/bundle-pmXVmA9u.js');
+require('./chunks/bundle-vxeeEIIk.js');
+require('./chunks/bundle-ESTPxUtf.js');
 require('./ui/VoiceMessageItemBody.js');
-require('./ui/ProgressBar.js');
-require('./VoicePlayer/useVoicePlayer.js');
-require('./ui/PlaybackTime.js');
 require('./ui/ThumbnailMessageItemBody.js');
 require('./ui/UnknownMessageItemBody.js');
 require('./ui/FeedbackIconButton.js');
 require('./ui/MobileFeedbackMenu.js');
 require('./Channel/components/MessageFeedbackModal.js');
 require('./ui/Input.js');
-require('./chunks/bundle-RPY1irFl.js');
-require('./chunks/bundle-KUtVpakA.js');
-require('./chunks/bundle-nTv23k8q.js');
-require('./chunks/bundle-p7twnCCD.js');
-require('./chunks/bundle-7zgRAH2f.js');
-require('./Channel/utils/getMessagePartsInfo.js');
+require('./chunks/bundle-mDHppnqu.js');
+require('./chunks/bundle-Oa28OYC5.js');
+require('./chunks/bundle-1IuM0Cr1.js');
 require('./Channel/utils/compareMessagesForGrouping.js');
-require('./chunks/bundle-fvz26Ije.js');
-require('./chunks/bundle-GRS8tlu-.js');
-require('./chunks/bundle-Oti8UWhr.js');
-require('./ui/TypingIndicatorBubble.js');
-require('./chunks/bundle-ziLsN5lV.js');
-require('./ui/ConnectionStatus.js');
-require('./chunks/bundle-W1vXanLo.js');
-require('./ui/QuoteMessageInput.js');
-require('./VoiceRecorder/useVoiceRecorder.js');
-require('./chunks/bundle-Z-IXQ2N3.js');
-require('./chunks/bundle-aAOHT0Qv.js');
-require('./Channel/components/MessageInput.js');
-require('./chunks/bundle-9ZxGYXTj.js');
+require('./chunks/bundle-kSe4VhWb.js');
 require('./ui/Badge.js');
 require('./ui/MentionUserLabel.js');
-require('./chunks/bundle-Mq0jUvZk.js');
+require('./chunks/bundle-UKEl9xoz.js');
 require('./EditUserProfile.js');
 require('./EditUserProfile/context.js');
 require('./EditUserProfile/components/EditUserProfileUI.js');
 require('./CreateChannel.js');
 require('./CreateChannel/components/CreateChannelUI.js');
-require('./chunks/bundle-BRRuC2D3.js');
+require('./chunks/bundle-FvMkaavK.js');
 require('./CreateChannel/components/InviteUsers.js');
 require('./CreateChannel/components/SelectChannelType.js');
 require('./ChannelSettings/components/ChannelSettingsUI.js');
@@ -167,41 +171,205 @@ require('./ChannelSettings/components/EditDetailsModal.js');
 require('./ChannelSettings/components/ModerationPanel.js');
 require('./ui/Accordion.js');
 require('./ui/AccordionGroup.js');
-require('./chunks/bundle-QCo3MNRk.js');
+require('./chunks/bundle-Gfk4dcBO.js');
 require('./ui/Toggle.js');
 require('./ChannelSettings/components/UserListItem.js');
-require('./chunks/bundle-XNa54U87.js');
+require('./chunks/bundle-CG7fW6bL.js');
 require('./ChannelSettings/components/LeaveChannel.js');
 require('./ChannelSettings/components/UserPanel.js');
 require('./MessageSearch/components/MessageSearchUI.js');
 require('./MessageSearch/context.js');
 require('./ui/MessageSearchItem.js');
 require('./ui/MessageSearchFileItem.js');
-require('./Thread/context.js');
-require('./Thread/context/types.js');
 require('./Thread/components/ThreadUI.js');
 require('./Thread/components/ParentMessageInfo.js');
-require('./chunks/bundle-Z2aMvN9Y.js');
+require('./chunks/bundle-lAPBNMp3.js');
 require('./Thread/components/ParentMessageInfoItem.js');
-require('./chunks/bundle-v2kRYowu.js');
 require('./Thread/components/ThreadHeader.js');
 require('./Thread/components/ThreadList.js');
 require('./Thread/components/ThreadListItem.js');
 require('date-fns');
-require('./Thread/components/ThreadMessageInput.js');
-require('./Channel/hooks/useHandleUploadFiles.js');
+
+var GroupChannelHeader = function (_a) {
+    var className = _a.className;
+    var context = Thread_components_ThreadMessageInput.useGroupChannelContext();
+    return (React.createElement(Channel_components_ChannelHeader.GroupChannelHeaderView, _tslib.__assign({}, context, { className: className, currentChannel: context.currentChannel })));
+};
+
+var FileViewer = function (props) {
+    var deleteMessage = Thread_components_ThreadMessageInput.useGroupChannelContext().deleteMessage;
+    return React.createElement(Channel_components_FileViewer.FileViewerView, _tslib.__assign({}, props, { deleteMessage: deleteMessage }));
+};
+
+var RemoveMessageModal = function (props) {
+    var deleteMessage = Thread_components_ThreadMessageInput.useGroupChannelContext().deleteMessage;
+    return React.createElement(Channel_components_RemoveMessageModal.RemoveMessageModalView, _tslib.__assign({}, props, { deleteMessage: deleteMessage }));
+};
+
+var Message = function (props) {
+    var _a = useSendbirdStateContext.useSendbirdStateContext(), config = _a.config, emojiManager = _a.emojiManager;
+    var _b = Thread_components_ThreadMessageInput.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 = uikitTools.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 (index.getSuggestedReplies(message).length === 0)
+            return false;
+        var lastMessage = messages[messages.length - 1];
+        if (lastMessage && index.isSendableMessage(lastMessage) && lastMessage.sendingStatus !== 'succeeded')
+            return false;
+        return true;
+    });
+    return (React.createElement(Channel_components_Message.MessageView, _tslib.__assign({}, props, { channel: currentChannel, emojiContainer: emojiManager.emojiContainer, editInputDisabled: !initialized || utils.isDisabledBecauseFrozen(currentChannel) || utils.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.createElement(FileViewer, _tslib.__assign({}, props)); }, renderRemoveMessageModal: function (props) { return React.createElement(RemoveMessageModal, _tslib.__assign({}, props)); } })));
+};
+
+function useScrollBehavior() {
+    var _a = Thread_components_ThreadMessageInput.useGroupChannelContext(), scrollRef = _a.scrollRef, _b = _a.scrollBehavior, scrollBehavior = _b === void 0 ? 'auto' : _b;
+    React.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 = Thread_components_ThreadMessageInput.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.useSendbirdStateContext();
+    var _j = React.useState(), unreadSinceDate = _j[0], setUnreadSinceDate = _j[1];
+    useScrollBehavior();
+    React.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 < consts.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.createElement(index$1.FrozenNotification, { className: "sendbird-conversation__messages__notification" });
+        },
+        unreadMessagesNotification: function () {
+            if (isScrollBottomReached || !unreadSinceDate)
+                return null;
+            return (React.createElement(index$2.UnreadCount, { className: "sendbird-conversation__messages__notification", count: newMessages.length, lastReadAt: unreadSinceDate, onClick: scrollToBottom }));
+        },
+        scrollToBottomButton: function () {
+            if (!hasNext() && isScrollBottomReached)
+                return null;
+            return (React.createElement("div", { className: "sendbird-conversation__scroll-bottom-button", onClick: scrollToBottom, onKeyDown: scrollToBottom, tabIndex: 0, role: "button" },
+                React.createElement(ui_Icon.default, { width: "24px", height: "24px", type: ui_Icon.IconTypes.CHEVRON_DOWN, fillColor: ui_Icon.IconColors.PRIMARY })));
+        },
+    };
+    if (loading) {
+        if (renderPlaceholderLoader)
+            return renderPlaceholderLoader();
+        return React.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.LOADING });
+    }
+    if (messages.length === 0) {
+        if (renderPlaceholderEmpty)
+            return renderPlaceholderEmpty();
+        return React.createElement(ui_PlaceHolder.default, { className: "sendbird-conversation__no-messages", type: ui_PlaceHolder.PlaceHolderTypes.NO_MESSAGES });
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "sendbird-conversation__messages ".concat(className) },
+            React.createElement("div", { className: "sendbird-conversation__scroll-container" },
+                React.createElement("div", { className: "sendbird-conversation__padding" }),
+                React.createElement("div", { className: "sendbird-conversation__messages-padding", ref: scrollRef },
+                    messages.map(function (message, idx) {
+                        var _a = Channel_utils_getMessagePartsInfo.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.createElement(Message_context.MessageProvider, { message: message, key: utils.getComponentKeyFromMessage(message), isByMe: isOutgoingMessage },
+                            React.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(Channel_components_MessageList.TypingIndicatorType.Bubble)) && (React.createElement(TypingIndicatorBubbleWrapper, { channelUrl: channelUrl, handleScroll: onMessageContentSizeChanged })))),
+            React.createElement(React.Fragment, null, renderer.frozenNotification()),
+            React.createElement(React.Fragment, null, renderer.unreadMessagesNotification()),
+            React.createElement(React.Fragment, null, renderer.scrollToBottomButton()))));
+};
+var TypingIndicatorBubbleWrapper = function (props) {
+    var stores = useSendbirdStateContext.useSendbirdStateContext().stores;
+    var _a = React.useState([]), typingMembers = _a[0], setTypingMembers = _a[1];
+    uikitTools.useGroupChannelHandler(stores.sdkStore.sdk, {
+        onTypingStatusUpdated: function (channel) {
+            if (channel.url === props.channelUrl) {
+                setTypingMembers(channel.getTypingUsers());
+            }
+        },
+    });
+    return React.createElement(ui_TypingIndicatorBubble, { typingMembers: typingMembers, handleScroll: props.handleScroll });
+};
+
+var MessageInputWrapper = function (props) {
+    var _a;
+    var config = useSendbirdStateContext.useSendbirdStateContext().config;
+    var context = Thread_components_ThreadMessageInput.useGroupChannelContext();
+    var messages = context.messages, currentChannel = context.currentChannel;
+    var lastMessage = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.lastMessage;
+    var isLastMessageSuggestedRepliesEnabled = uikitTools.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 (index.getSuggestedReplies(lastMessage).length === 0)
+            return false;
+        var lastMessageInContext = messages[messages.length - 1];
+        if (index.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.createElement(MessageInputWrapperView.MessageInputWrapperView, _tslib.__assign({}, props, { disabled: disableMessageInput }, context)));
+};
 
 var GroupChannelUI = function (props) {
-    var context = GroupChannelProvider.useGroupChannelContext();
+    var context = Thread_components_ThreadMessageInput.useGroupChannelContext();
     var currentChannel = context.currentChannel, channelUrl = context.channelUrl, loading = context.loading;
-    return (React.createElement(Channel_components_ChannelUI.GroupChannelUIView, _tslib.__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.createElement(Channel_components_ChannelUI.MessageInputWrapper, _tslib.__assign({}, props)));
-        } })));
+    // Inject components to presentation layer
+    var _a = props.renderChannelHeader, renderChannelHeader = _a === void 0 ? function (props) { return React.createElement(GroupChannelHeader, _tslib.__assign({}, props)); } : _a, _b = props.renderMessageList, renderMessageList = _b === void 0 ? function (props) { return React.createElement(MessageList, _tslib.__assign({}, props, { className: "sendbird-conversation__message-list" })); } : _b, _c = props.renderMessageInput, renderMessageInput = _c === void 0 ? function () { return React.createElement(MessageInputWrapper, _tslib.__assign({}, props)); } : _c;
+    return (React.createElement(Channel_components_ChannelUI.GroupChannelUIView, _tslib.__assign({}, props, context, { loading: loading, isInvalid: channelUrl && !currentChannel, channelUrl: channelUrl, renderChannelHeader: renderChannelHeader, renderMessageList: renderMessageList, renderMessageInput: renderMessageInput })));
 };
 
 var GroupChannel = function (props) {
-    return (React.createElement(GroupChannelProvider.GroupChannelProvider, _tslib.__assign({}, props),
+    return (React.createElement(Thread_components_ThreadMessageInput.GroupChannelProvider, _tslib.__assign({}, props),
         React.createElement(GroupChannelUI, _tslib.__assign({}, props))));
 };
 

package/cjs/App.js.map

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

package/cjs/Channel/components/ChannelHeader.js

@@ -2,46 +2,46 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../chunks/bundle-RVs527mS.js');
+require('../../chunks/bundle-iqHS1VZc.js');
 require('react');
-var Channel_components_ChannelHeader = require('../../chunks/bundle-LmzJA_0-.js');
+var Channel_components_ChannelHeader = require('../../chunks/bundle-iuhuw3NO.js');
 require('../context.js');
 require('../../ui/IconButton.js');
 require('../../ui/Icon.js');
-require('../../chunks/bundle-nQDclaWr.js');
-require('../../chunks/bundle-JaD2Ao-u.js');
-require('../../chunks/bundle-OBj337Le.js');
+require('../../chunks/bundle-hxTc8i2-.js');
+require('../../chunks/bundle-llF5F-TZ.js');
+require('../../chunks/bundle-2wmQkgT-.js');
 require('../../ui/ChannelAvatar.js');
-require('../../chunks/bundle-rUpy0DGt.js');
+require('../../chunks/bundle-KJFaLE9x.js');
 require('../../ui/ImageRenderer.js');
-require('../../chunks/bundle-wU4qxzey.js');
-require('../../chunks/bundle-lXjDRYAu.js');
-require('../../chunks/bundle-4OXJViEd.js');
-require('../../chunks/bundle-2ToiwW-_.js');
+require('../../chunks/bundle-cQ--EsIE.js');
+require('../../chunks/bundle-KpooXS-Y.js');
+require('../../chunks/bundle-QtkQF0UJ.js');
+require('../../chunks/bundle-2m4xB52E.js');
 require('../../useSendbirdStateContext.js');
 require('../../withSendbird.js');
-require('../../chunks/bundle-WLD9KKbn.js');
-require('../../chunks/bundle-ZL4COF6I.js');
-require('../../chunks/bundle-3S8jBmCV.js');
-require('../../chunks/bundle-yf5herNq.js');
-require('../../chunks/bundle-a1nOrOrG.js');
+require('../../chunks/bundle-hOvUwVfn.js');
+require('../../chunks/bundle-ZpjyJiE2.js');
+require('../../chunks/bundle-vTP0lM0K.js');
+require('../../chunks/bundle-F0bRG2Zo.js');
+require('../../chunks/bundle-x95y05Ke.js');
 require('@sendbird/chat/message');
-require('../../chunks/bundle-w4VdLYPs.js');
-require('../../chunks/bundle-7sO7MuTY.js');
-require('../../chunks/bundle--RWWGoZo.js');
-require('../../chunks/bundle-duGLRUrw.js');
-require('../../chunks/bundle-1n4GnjYf.js');
-require('../../chunks/bundle-fnv2bNo-.js');
+require('../../chunks/bundle-C5EEFQnI.js');
+require('../../chunks/bundle-ACSRBgMH.js');
+require('../../chunks/bundle-jHz-YSnt.js');
+require('../../chunks/bundle-ap8pXM0q.js');
+require('../../chunks/bundle-9aiPdBmP.js');
+require('../../chunks/bundle-FjYeNDtC.js');
 require('@sendbird/chat/groupChannel');
 require('../../utils/message/getOutgoingMessageState.js');
-require('../../chunks/bundle-sW6CpN9W.js');
+require('../../chunks/bundle-X91TChia.js');
 require('../hooks/useInitialMessagesFetch.js');
-require('../../chunks/bundle-4hsD0CCh.js');
-require('../../chunks/bundle-K8ngPNTR.js');
-require('../../chunks/bundle-wQUBcS0L.js');
-require('../../chunks/bundle-SggLEV_z.js');
-require('../../chunks/bundle-60IjeSgc.js');
-require('../../chunks/bundle-iRjY_BU4.js');
+require('../../chunks/bundle-hNqFXR4S.js');
+require('../../chunks/bundle-76dF9zQG.js');
+require('../../chunks/bundle-k0KXb-1f.js');
+require('../../chunks/bundle-wJ2ptD6A.js');
+require('../../chunks/bundle-AJUZmA_i.js');
+require('../../chunks/bundle-fecqsQkK.js');