@sendbird/uikit-react 3.4.0-rc.1 → 3.4.0-rc.2

package/Channel/components/Message.js

@@ -0,0 +1,406 @@
+import { a as __spreadArray } from '../../tslib.es6-cd680863.js';
+import React__default, { useState, useRef, useEffect, useLayoutEffect, useMemo } from 'react';
+import { f as format } from '../../index-6ccea9a6.js';
+import SuggestedMentionList from './SuggestedMentionList.js';
+import useSendbirdStateContext from '../../useSendbirdStateContext.js';
+import { u as useChannelContext, a as isDisabledBecauseFrozen, b as isDisabledBecauseMuted } from '../../ChannelProvider-def8e42f.js';
+import { j as getClassName } from '../../index-8ee9e1f5.js';
+import { M as MAX_USER_MENTION_COUNT, a as MAX_USER_SUGGESTION_COUNT } from '../../const-e27598a1.js';
+import DateSeparator from '../../ui/DateSeparator.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-67c5e94c.js';
+import MessageInput from '../../ui/MessageInput.js';
+import MessageContent from '../../ui/MessageContent.js';
+import FileViewer from './FileViewer.js';
+import RemoveMessage from './RemoveMessageModal.js';
+import { M as MessageInputKeys } from '../../const-a965f964.js';
+import { u as useLocalization } from '../../LocalizationContext-a6aa8be8.js';
+import '../../index-757a563a.js';
+import '../../ui/Icon.js';
+import 'prop-types';
+import '../../ui/Avatar.js';
+import '../../ui/ImageRenderer.js';
+import '../../uuid-9f7da91d.js';
+import '../../ThreadProvider-e0d19ff6.js';
+import '../../utils/message/getOutgoingMessageState.js';
+import '../../UserProfileContext-dd096494.js';
+import '../../Thread/context/types.js';
+import '@sendbird/chat';
+import '../../topics-9fbe0d61.js';
+import '@sendbird/chat/groupChannel';
+import '@sendbird/chat/message';
+import '../../consts-886b25ca.js';
+import '../../withSendbird.js';
+import '../../_rollupPluginBabelHelpers-3e5825fa.js';
+import '../../compareIds-c8335d61.js';
+import '../../ui/ContextMenu.js';
+import 'react-dom';
+import '../../ui/SortByRow.js';
+import '../../stringSet-ad8993d1.js';
+import '../../ui/ReactionButton.js';
+import '../../color-ed83ffc3.js';
+import 'react-dom/server';
+import '../../ui/IconButton.js';
+import '../../ui/Button.js';
+import '../../ui/MentionUserLabel.js';
+import '../../ui/UserProfile.js';
+import '../../sendbirdSelectors.js';
+import '../../utils-aae15fda.js';
+import '../../index-c8a147a4.js';
+import '../../ui/Loader.js';
+import '../../index-7283bb53.js';
+import '../../index-00eb27a6.js';
+import '../../ui/MessageItemMenu.js';
+import '../../types-17028dc8.js';
+import '../../ui/MessageItemReactionMenu.js';
+import '../../ui/EmojiReactions.js';
+import '../../ui/Tooltip.js';
+import '../../ui/TooltipWrapper.js';
+import '../../ui/ReactionBadge.js';
+import '../../ui/AdminMessage.js';
+import '../../ui/TextMessageItemBody.js';
+import '../../ui/Word.js';
+import '../../ui/LinkLabel.js';
+import '../../ui/MentionLabel.js';
+import '../../ui/FileMessageItemBody.js';
+import '../../ui/TextButton.js';
+import '../../MediaQueryContext-a551e770.js';
+import '../../ui/ThumbnailMessageItemBody.js';
+import '../../ui/OGMessageItemBody.js';
+import '../../ui/UnknownMessageItemBody.js';
+import '../../ui/QuoteMessage.js';
+import '../../useLongPress-49f5ba4f.js';
+import '../../ui/BottomSheet.js';
+import '../../index-d4908e3c.js';
+import '../../ui/ThreadReplies.js';
+import '../../ui/VoiceMessageItemBody.js';
+import '../../ui/ProgressBar.js';
+import '../../VoicePlayer/useVoicePlayer.js';
+import '../../index-a3a4b35c.js';
+import '../../VoiceRecorder/context.js';
+import '../../lame.all.js';
+import '../../ui/PlaybackTime.js';
+import '../../ui/Modal.js';
+
+var Message = function (props) {
+  var _a, _b;
+
+  var message = props.message,
+      hasSeparator = props.hasSeparator,
+      chainTop = props.chainTop,
+      chainBottom = props.chainBottom,
+      handleScroll = props.handleScroll,
+      renderCustomSeparator = props.renderCustomSeparator,
+      renderEditInput = props.renderEditInput,
+      renderMessage = props.renderMessage,
+      renderMessageContent = props.renderMessageContent;
+  var dateLocale = useLocalization().dateLocale;
+  var globalStore = useSendbirdStateContext();
+
+  var _c = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config,
+      userId = _c.userId,
+      isOnline = _c.isOnline,
+      isMentionEnabled = _c.isMentionEnabled,
+      userMention = _c.userMention;
+
+  var maxUserMentionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount) || MAX_USER_MENTION_COUNT;
+  var maxUserSuggestionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount) || MAX_USER_SUGGESTION_COUNT;
+
+  var _d = useChannelContext(),
+      initialized = _d.initialized,
+      currentGroupChannel = _d.currentGroupChannel,
+      highLightedMessageId = _d.highLightedMessageId,
+      setHighLightedMessageId = _d.setHighLightedMessageId,
+      animatedMessageId = _d.animatedMessageId,
+      setAnimatedMessageId = _d.setAnimatedMessageId,
+      updateMessage = _d.updateMessage,
+      scrollToMessage = _d.scrollToMessage,
+      replyType = _d.replyType,
+      threadReplySelectType = _d.threadReplySelectType,
+      isReactionEnabled = _d.isReactionEnabled,
+      toggleReaction = _d.toggleReaction,
+      emojiContainer = _d.emojiContainer,
+      nicknamesMap = _d.nicknamesMap,
+      setQuoteMessage = _d.setQuoteMessage,
+      resendMessage = _d.resendMessage,
+      renderUserMentionItem = _d.renderUserMentionItem,
+      onReplyInThread = _d.onReplyInThread,
+      onQuoteMessageClick = _d.onQuoteMessageClick,
+      onMessageAnimated = _d.onMessageAnimated,
+      onMessageHighlighted = _d.onMessageHighlighted;
+
+  var _e = useState(false),
+      showEdit = _e[0],
+      setShowEdit = _e[1];
+
+  var _f = useState(false),
+      showRemove = _f[0],
+      setShowRemove = _f[1];
+
+  var _g = useState(false),
+      showFileViewer = _g[0],
+      setShowFileViewer = _g[1];
+
+  var _h = useState(false),
+      isAnimated = _h[0],
+      setIsAnimated = _h[1];
+
+  var _j = useState(false),
+      isHighlighted = _j[0],
+      setIsHighlighted = _j[1];
+
+  var _k = useState(''),
+      mentionNickname = _k[0],
+      setMentionNickname = _k[1];
+
+  var _l = useState([]),
+      mentionedUsers = _l[0],
+      setMentionedUsers = _l[1];
+
+  var _m = useState([]),
+      mentionedUserIds = _m[0],
+      setMentionedUserIds = _m[1];
+
+  var _o = useState(null),
+      messageInputEvent = _o[0],
+      setMessageInputEvent = _o[1];
+
+  var _p = useState(null),
+      selectedUser = _p[0],
+      setSelectedUser = _p[1];
+
+  var _q = useState([]),
+      mentionSuggestedUsers = _q[0],
+      setMentionSuggestedUsers = _q[1];
+
+  var _r = useState(true),
+      ableMention = _r[0],
+      setAbleMention = _r[1];
+
+  var editMessageInputRef = useRef(null);
+  var useMessageScrollRef = useRef(null);
+  var displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !isDisabledBecauseFrozen(currentGroupChannel) && !isDisabledBecauseMuted(currentGroupChannel);
+  var disabled = !initialized || isDisabledBecauseFrozen(currentGroupChannel) || isDisabledBecauseMuted(currentGroupChannel) || !isOnline;
+  useEffect(function () {
+    if ((mentionedUsers === null || mentionedUsers === void 0 ? void 0 : mentionedUsers.length) >= maxUserMentionCount) {
+      setAbleMention(false);
+    } else {
+      setAbleMention(true);
+    }
+  }, [mentionedUsers]);
+  useEffect(function () {
+    setMentionedUsers(mentionedUsers.filter(function (_a) {
+      var userId = _a.userId;
+      var i = mentionedUserIds.indexOf(userId);
+
+      if (i < 0) {
+        return false;
+      } else {
+        mentionedUserIds.splice(i, 1);
+        return true;
+      }
+    }));
+  }, [mentionedUserIds]);
+  useLayoutEffect(function () {
+    handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll();
+  }, [showEdit, (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.length]);
+  useLayoutEffect(function () {
+    if (highLightedMessageId === message.messageId) {
+      if (useMessageScrollRef && useMessageScrollRef.current) {
+        useMessageScrollRef.current.scrollIntoView({
+          block: 'center',
+          inline: 'center'
+        });
+        setIsAnimated(false);
+        setTimeout(function () {
+          setIsHighlighted(true);
+        }, 500);
+        setTimeout(function () {
+          setHighLightedMessageId(0);
+          onMessageHighlighted === null || onMessageHighlighted === void 0 ? void 0 : onMessageHighlighted();
+        }, 1600);
+      }
+    } else {
+      setIsHighlighted(false);
+    }
+  }, [highLightedMessageId, useMessageScrollRef.current, message.messageId]);
+  useLayoutEffect(function () {
+    if (animatedMessageId === message.messageId) {
+      if (useMessageScrollRef && useMessageScrollRef.current) {
+        useMessageScrollRef.current.scrollIntoView({
+          block: 'center',
+          inline: 'center'
+        });
+        setIsHighlighted(false);
+        setTimeout(function () {
+          setIsAnimated(true);
+        }, 500);
+        setTimeout(function () {
+          setAnimatedMessageId(0);
+          onMessageAnimated === null || onMessageAnimated === void 0 ? void 0 : onMessageAnimated();
+        }, 1600);
+      }
+    } else {
+      setIsAnimated(false);
+    }
+  }, [animatedMessageId, useMessageScrollRef.current, message.messageId, onMessageAnimated]);
+  var renderedMessage = useMemo(function () {
+    return renderMessage === null || renderMessage === void 0 ? void 0 : renderMessage({
+      message: message,
+      chainTop: chainTop,
+      chainBottom: chainBottom
+    });
+  }, [message, renderMessage]);
+  var renderedCustomSeparator = useMemo(function () {
+    if (renderCustomSeparator) {
+      return renderCustomSeparator === null || renderCustomSeparator === void 0 ? void 0 : renderCustomSeparator({
+        message: message
+      });
+    }
+
+    return null;
+  }, [message, renderCustomSeparator]);
+
+  if (renderedMessage) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      ref: useMessageScrollRef,
+      className: getClassName(['sendbird-msg-hoc sendbird-msg--scroll-ref', isAnimated ? 'sendbird-msg-hoc__animated' : '', isHighlighted ? 'sendbird-msg-hoc__highlighted' : ''])
+    }, // TODO: Add message instance as a function parameter
+    hasSeparator && (renderedCustomSeparator || /*#__PURE__*/React__default.createElement(DateSeparator, null, /*#__PURE__*/React__default.createElement(Label, {
+      type: LabelTypography.CAPTION_2,
+      color: LabelColors.ONBACKGROUND_2
+    }, format(message.createdAt, 'MMMM dd, yyyy', {
+      locale: dateLocale
+    })))), renderedMessage);
+  }
+
+  if (showEdit && ((_b = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _b === void 0 ? void 0 : _b.call(message))) {
+    return (renderEditInput === null || renderEditInput === void 0 ? void 0 : renderEditInput()) || /*#__PURE__*/React__default.createElement(React__default.Fragment, null, displaySuggestedMentionList && /*#__PURE__*/React__default.createElement(SuggestedMentionList, {
+      targetNickname: mentionNickname,
+      inputEvent: messageInputEvent,
+      renderUserMentionItem: renderUserMentionItem,
+      onUserItemClick: function (user) {
+        if (user) {
+          setMentionedUsers(__spreadArray(__spreadArray([], mentionedUsers, true), [user], false));
+        }
+
+        setMentionNickname('');
+        setSelectedUser(user);
+        setMessageInputEvent(null);
+      },
+      onFocusItemChange: function () {
+        setMessageInputEvent(null);
+      },
+      onFetchUsers: function (users) {
+        setMentionSuggestedUsers(users);
+      },
+      ableAddMention: ableMention,
+      maxMentionCount: maxUserMentionCount,
+      maxSuggestionCount: maxUserSuggestionCount
+    }), /*#__PURE__*/React__default.createElement(MessageInput, {
+      isEdit: true,
+      disabled: disabled,
+      ref: editMessageInputRef,
+      mentionSelectedUser: selectedUser,
+      isMentionEnabled: isMentionEnabled,
+      message: message,
+      onStartTyping: function () {
+        var _a;
+
+        (_a = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.startTyping) === null || _a === void 0 ? void 0 : _a.call(currentGroupChannel);
+      },
+      onUpdateMessage: function (_a) {
+        var _b;
+
+        var messageId = _a.messageId,
+            message = _a.message,
+            mentionTemplate = _a.mentionTemplate;
+        updateMessage({
+          messageId: messageId,
+          message: message,
+          mentionedUsers: mentionedUsers,
+          mentionTemplate: mentionTemplate
+        });
+        setShowEdit(false);
+        (_b = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.endTyping) === null || _b === void 0 ? void 0 : _b.call(currentGroupChannel);
+      },
+      onCancelEdit: function () {
+        var _a;
+
+        setMentionNickname('');
+        setMentionedUsers([]);
+        setMentionedUserIds([]);
+        setMentionSuggestedUsers([]);
+        setShowEdit(false);
+        (_a = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.endTyping) === null || _a === void 0 ? void 0 : _a.call(currentGroupChannel);
+      },
+      onUserMentioned: function (user) {
+        if ((selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userId) === (user === null || user === void 0 ? void 0 : user.userId)) {
+          setSelectedUser(null);
+          setMentionNickname('');
+        }
+      },
+      onMentionStringChange: function (mentionText) {
+        setMentionNickname(mentionText);
+      },
+      onMentionedUserIdsUpdated: function (userIds) {
+        setMentionedUserIds(userIds);
+      },
+      onKeyDown: function (e) {
+        if (displaySuggestedMentionList && (mentionSuggestedUsers === null || mentionSuggestedUsers === void 0 ? void 0 : mentionSuggestedUsers.length) > 0 && (e.key === MessageInputKeys.Enter && ableMention || e.key === MessageInputKeys.ArrowUp || e.key === MessageInputKeys.ArrowDown)) {
+          setMessageInputEvent(e);
+          return true;
+        }
+
+        return false;
+      }
+    }));
+  }
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: getClassName(['sendbird-msg-hoc sendbird-msg--scroll-ref', isAnimated ? 'sendbird-msg-hoc__animated' : '', isHighlighted ? 'sendbird-msg-hoc__highlighted' : '']),
+    style: {
+      marginBottom: '2px'
+    },
+    ref: useMessageScrollRef
+  }, hasSeparator && (renderedCustomSeparator || /*#__PURE__*/React__default.createElement(DateSeparator, null, /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.CAPTION_2,
+    color: LabelColors.ONBACKGROUND_2
+  }, format(message.createdAt, 'MMMM dd, yyyy', {
+    locale: dateLocale
+  })))), (renderMessageContent === null || renderMessageContent === void 0 ? void 0 : renderMessageContent()) || /*#__PURE__*/React__default.createElement(MessageContent, {
+    className: "sendbird-message-hoc__message-content",
+    userId: userId,
+    scrollToMessage: scrollToMessage,
+    channel: currentGroupChannel,
+    message: message,
+    disabled: !isOnline,
+    chainTop: chainTop,
+    chainBottom: chainBottom,
+    isReactionEnabled: isReactionEnabled,
+    replyType: replyType,
+    threadReplySelectType: threadReplySelectType,
+    nicknamesMap: nicknamesMap,
+    emojiContainer: emojiContainer,
+    showEdit: setShowEdit,
+    showRemove: setShowRemove,
+    showFileViewer: setShowFileViewer,
+    resendMessage: resendMessage,
+    toggleReaction: toggleReaction,
+    setQuoteMessage: setQuoteMessage,
+    onReplyInThread: onReplyInThread,
+    onQuoteMessageClick: onQuoteMessageClick
+  }), showRemove && /*#__PURE__*/React__default.createElement(RemoveMessage, {
+    message: message,
+    onCancel: function () {
+      return setShowRemove(false);
+    }
+  }), showFileViewer && /*#__PURE__*/React__default.createElement(FileViewer, {
+    message: message,
+    onCancel: function () {
+      return setShowFileViewer(false);
+    }
+  }));
+};
+
+export { Message as default };
+//# sourceMappingURL=Message.js.map

package/Channel/components/MessageInput.js

@@ -0,0 +1,265 @@
+import { a as __spreadArray } from '../../tslib.es6-cd680863.js';
+import React__default, { useContext, useState, useEffect } from 'react';
+import { u as useChannelContext, a as isDisabledBecauseFrozen, b as isDisabledBecauseMuted, d as isOperator } from '../../ChannelProvider-def8e42f.js';
+import MessageInput from '../../ui/MessageInput.js';
+import QuoteMessageInput from '../../ui/QuoteMessageInput.js';
+import { a as LocalizationContext } from '../../LocalizationContext-a6aa8be8.js';
+import useSendbirdStateContext from '../../useSendbirdStateContext.js';
+import SuggestedMentionList from './SuggestedMentionList.js';
+import { M as MessageInputKeys } from '../../const-a965f964.js';
+import { V as VoiceMessageInputWrapper } from '../../VoiceMessageInputWrapper-f70b47c7.js';
+import '../../UserProfileContext-dd096494.js';
+import 'prop-types';
+import '../../index-6ccea9a6.js';
+import '../../index-757a563a.js';
+import '../../topics-9fbe0d61.js';
+import '../../index-8ee9e1f5.js';
+import '../../utils/message/getOutgoingMessageState.js';
+import '../../_rollupPluginBabelHelpers-3e5825fa.js';
+import '../../compareIds-c8335d61.js';
+import '../../const-e27598a1.js';
+import '@sendbird/chat/groupChannel';
+import '../../uuid-9f7da91d.js';
+import '@sendbird/chat/message';
+import '../../ui/ContextMenu.js';
+import 'react-dom';
+import '../../ui/SortByRow.js';
+import '../../index-67c5e94c.js';
+import '../../stringSet-ad8993d1.js';
+import '../../ui/ReactionButton.js';
+import '../../ui/ImageRenderer.js';
+import '../../ui/Icon.js';
+import '../../consts-886b25ca.js';
+import 'react-dom/server';
+import '../../ui/IconButton.js';
+import '../../ui/Button.js';
+import '../../ui/MentionUserLabel.js';
+import '../../withSendbird.js';
+import '../../ui/Avatar.js';
+import '../../ThreadProvider-e0d19ff6.js';
+import '../../Thread/context/types.js';
+import '@sendbird/chat';
+import '../../VoicePlayer/useVoicePlayer.js';
+import '../../index-a3a4b35c.js';
+import '../../VoiceRecorder/context.js';
+import '../../lame.all.js';
+import '../../VoiceRecorder/useVoiceRecorder.js';
+import '../../index-978b3d6d.js';
+import '../../ui/PlaybackTime.js';
+import '../../ui/ProgressBar.js';
+import '../../ui/TextButton.js';
+import '../../color-ed83ffc3.js';
+import '../../ui/Modal.js';
+import '../../index-d4908e3c.js';
+import '../../MediaQueryContext-a551e770.js';
+
+var MessageInputWrapper = function (props, ref) {
+  var value = props.value,
+      renderFileUploadIcon = props.renderFileUploadIcon,
+      renderVoiceMessageIcon = props.renderVoiceMessageIcon,
+      renderSendMessageIcon = props.renderSendMessageIcon;
+
+  var _a = useChannelContext(),
+      currentGroupChannel = _a.currentGroupChannel,
+      initialized = _a.initialized,
+      quoteMessage = _a.quoteMessage,
+      sendMessage = _a.sendMessage,
+      sendFileMessage = _a.sendFileMessage,
+      sendVoiceMessage = _a.sendVoiceMessage,
+      setQuoteMessage = _a.setQuoteMessage,
+      messageInputRef = _a.messageInputRef,
+      renderUserMentionItem = _a.renderUserMentionItem;
+
+  var globalStore = useSendbirdStateContext();
+  var channel = currentGroupChannel;
+
+  var _b = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config,
+      isOnline = _b.isOnline,
+      isMentionEnabled = _b.isMentionEnabled,
+      userMention = _b.userMention,
+      isVoiceMessageEnabled = _b.isVoiceMessageEnabled;
+
+  var maxUserMentionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount) || 10;
+  var maxUserSuggestionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount) || 15;
+  var stringSet = useContext(LocalizationContext).stringSet;
+
+  var _c = useState(''),
+      mentionNickname = _c[0],
+      setMentionNickname = _c[1];
+
+  var _d = useState([]),
+      mentionedUsers = _d[0],
+      setMentionedUsers = _d[1];
+
+  var _e = useState([]),
+      mentionedUserIds = _e[0],
+      setMentionedUserIds = _e[1];
+
+  var _f = useState(null),
+      selectedUser = _f[0],
+      setSelectedUser = _f[1];
+
+  var _g = useState([]),
+      mentionSuggestedUsers = _g[0],
+      setMentionSuggestedUsers = _g[1];
+
+  var _h = useState(true),
+      ableMention = _h[0],
+      setAbleMention = _h[1];
+
+  var _j = useState(null),
+      messageInputEvent = _j[0],
+      setMessageInputEvent = _j[1];
+
+  var _k = useState(false),
+      showVoiceMessageInput = _k[0],
+      setShowVoiceMessageInput = _k[1];
+
+  var disabled = !initialized || isDisabledBecauseFrozen(channel) || isDisabledBecauseMuted(channel) || !isOnline;
+  var isOperator$1 = isOperator(channel);
+  var isBroadcast = channel === null || channel === void 0 ? void 0 : channel.isBroadcast;
+  var displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !isDisabledBecauseFrozen(channel) && !isDisabledBecauseMuted(channel); // Reset when channel changes
+
+  useEffect(function () {
+    setMentionNickname('');
+    setMentionedUsers([]);
+    setMentionedUserIds([]);
+    setSelectedUser(null);
+    setMentionSuggestedUsers([]);
+    setAbleMention(true);
+    setMessageInputEvent(null);
+    setShowVoiceMessageInput(false);
+  }, [channel === null || channel === void 0 ? void 0 : channel.url]);
+  useEffect(function () {
+    if ((mentionedUsers === null || mentionedUsers === void 0 ? void 0 : mentionedUsers.length) >= maxUserMentionCount) {
+      setAbleMention(false);
+    } else {
+      setAbleMention(true);
+    }
+  }, [mentionedUsers]);
+  useEffect(function () {
+    setMentionedUsers(mentionedUsers.filter(function (_a) {
+      var userId = _a.userId;
+      var i = mentionedUserIds.indexOf(userId);
+
+      if (i < 0) {
+        return false;
+      } else {
+        mentionedUserIds.splice(i, 1);
+        return true;
+      }
+    }));
+  }, [mentionedUserIds]); // broadcast channel + not operator
+
+  if (isBroadcast && !isOperator$1) {
+    return null;
+  } // other conditions
+
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message-input-wrapper".concat(showVoiceMessageInput ? '--voice-message' : '')
+  }, displaySuggestedMentionList && /*#__PURE__*/React__default.createElement(SuggestedMentionList, {
+    targetNickname: mentionNickname,
+    inputEvent: messageInputEvent,
+    renderUserMentionItem: renderUserMentionItem,
+    onUserItemClick: function (user) {
+      if (user) {
+        setMentionedUsers(__spreadArray(__spreadArray([], mentionedUsers, true), [user], false));
+      }
+
+      setMentionNickname('');
+      setSelectedUser(user);
+      setMessageInputEvent(null);
+    },
+    onFocusItemChange: function () {
+      setMessageInputEvent(null);
+    },
+    onFetchUsers: function (users) {
+      setMentionSuggestedUsers(users);
+    },
+    ableAddMention: ableMention,
+    maxMentionCount: maxUserMentionCount,
+    maxSuggestionCount: maxUserSuggestionCount
+  }), quoteMessage && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message-input-wrapper__quote-message-input"
+  }, /*#__PURE__*/React__default.createElement(QuoteMessageInput, {
+    replyingMessage: quoteMessage,
+    onClose: function () {
+      return setQuoteMessage(null);
+    }
+  })), showVoiceMessageInput ? /*#__PURE__*/React__default.createElement(VoiceMessageInputWrapper, {
+    channel: channel,
+    onSubmitClick: function (recordedFile, duration) {
+      sendVoiceMessage(recordedFile, duration, quoteMessage);
+      setQuoteMessage(null);
+      setShowVoiceMessageInput(false);
+    },
+    onCancelClick: function () {
+      setShowVoiceMessageInput(false);
+    }
+  }) : /*#__PURE__*/React__default.createElement(MessageInput, {
+    className: "sendbird-message-input-wrapper__message-input",
+    value: value,
+    channelUrl: channel === null || channel === void 0 ? void 0 : channel.url,
+    mentionSelectedUser: selectedUser,
+    isMentionEnabled: isMentionEnabled,
+    isVoiceMessageEnabled: isVoiceMessageEnabled,
+    onVoiceMessageIconClick: function () {
+      setShowVoiceMessageInput(true);
+    },
+    placeholder: quoteMessage && stringSet.MESSAGE_INPUT__QUOTE_REPLY__PLACE_HOLDER || isDisabledBecauseFrozen(channel) && stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED || isDisabledBecauseMuted(channel) && stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED,
+    ref: ref || messageInputRef,
+    disabled: disabled,
+    renderFileUploadIcon: renderFileUploadIcon,
+    renderSendMessageIcon: renderSendMessageIcon,
+    renderVoiceMessageIcon: renderVoiceMessageIcon,
+    onStartTyping: function () {
+      channel === null || channel === void 0 ? void 0 : channel.startTyping();
+    },
+    onSendMessage: function (_a) {
+      var _b;
+
+      var message = _a.message,
+          mentionTemplate = _a.mentionTemplate;
+      sendMessage({
+        message: message,
+        quoteMessage: quoteMessage,
+        mentionedUsers: mentionedUsers,
+        mentionTemplate: mentionTemplate
+      });
+      setMentionNickname('');
+      setMentionedUsers([]);
+      setQuoteMessage(null);
+      (_b = channel === null || channel === void 0 ? void 0 : channel.endTyping) === null || _b === void 0 ? void 0 : _b.call(channel);
+    },
+    onFileUpload: function (file) {
+      sendFileMessage(file, quoteMessage);
+      setQuoteMessage(null);
+    },
+    onUserMentioned: function (user) {
+      if ((selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userId) === (user === null || user === void 0 ? void 0 : user.userId)) {
+        setSelectedUser(null);
+        setMentionNickname('');
+      }
+    },
+    onMentionStringChange: function (mentionText) {
+      setMentionNickname(mentionText);
+    },
+    onMentionedUserIdsUpdated: function (userIds) {
+      setMentionedUserIds(userIds);
+    },
+    onKeyDown: function (e) {
+      if (displaySuggestedMentionList && (mentionSuggestedUsers === null || mentionSuggestedUsers === void 0 ? void 0 : mentionSuggestedUsers.length) > 0 && (e.key === MessageInputKeys.Enter && ableMention || e.key === MessageInputKeys.ArrowUp || e.key === MessageInputKeys.ArrowDown)) {
+        setMessageInputEvent(e);
+        return true;
+      }
+
+      return false;
+    }
+  }));
+};
+
+var MessageInputWrapper$1 = /*#__PURE__*/React__default.forwardRef(MessageInputWrapper);
+
+export { MessageInputWrapper$1 as default };
+//# sourceMappingURL=MessageInput.js.map