@sendbird/uikit-react 3.6.4-rc-0 → 3.6.4-rc-1

package/cjs/App.js

@@ -0,0 +1,741 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var SendbirdProvider = require('./SendbirdProvider.js');
+var MediaQueryContext = require('./MediaQueryContext-fad211ad.js');
+var ChannelList = require('./ChannelList.js');
+var Channel = require('./Channel.js');
+var ChannelSettings = require('./ChannelSettings.js');
+var MessageSearch = require('./MessageSearch.js');
+var Thread = require('./Thread.js');
+var groupChannel = require('@sendbird/chat/groupChannel');
+var useSendbirdStateContext = require('./useSendbirdStateContext.js');
+var uuid = require('./uuid-1eceb0c8.js');
+var VoicePlayer_context = require('./index-90711a57.js');
+var consts = require('./consts-9641990e.js');
+require('./_rollupPluginBabelHelpers-acf412a3.js');
+require('./withSendbird.js');
+require('css-vars-ponyfill');
+require('./index.module-e3392caa.js');
+require('./actionTypes-0755b8bb.js');
+require('@sendbird/chat');
+require('@sendbird/chat/openChannel');
+require('./index-a91b85d9.js');
+require('./utils/message/getOutgoingMessageState.js');
+require('@sendbird/uikit-tools');
+require('./VoiceRecorder/context.js');
+require('./LocalizationContext-8cc9717d.js');
+require('./stringSet-ce782136.js');
+require('./index-d749c4c2.js');
+require('./ui/Modal.js');
+require('react-dom');
+require('./index-8029e07a.js');
+require('./ui/Button.js');
+require('./index-35633fb6.js');
+require('./ui/Icon.js');
+require('./ui/IconButton.js');
+require('./resolvedReplyType-930f5b54.js');
+require('./ChannelListProvider-84fdbeba.js');
+require('./topics-e24ef339.js');
+require('./utils-5aa0708e.js');
+require('./UserProfileContext-d993c96b.js');
+require('./ChannelList/components/ChannelListUI.js');
+require('./ChannelList/components/ChannelListHeader.js');
+require('./ui/Avatar.js');
+require('./ui/ImageRenderer.js');
+require('./ChannelList/components/AddChannel.js');
+require('./CreateChannel.js');
+require('./CreateChannel/components/CreateChannelUI.js');
+require('./CreateChannelProvider-36e598db.js');
+require('./sendbirdSelectors.js');
+require('./CreateChannel/components/InviteUsers.js');
+require('./ui/UserListItem.js');
+require('./ui/MutedAvatarOverlay.js');
+require('./ui/Checkbox.js');
+require('./ui/UserProfile.js');
+require('./ui/ContextMenu.js');
+require('./ui/SortByRow.js');
+require('./CreateChannel/components/SelectChannelType.js');
+require('./ChannelList/components/ChannelPreview.js');
+require('./ui/ChannelAvatar.js');
+require('./utils-d9c99217.js');
+require('./ui/Badge.js');
+require('./index-0a0a6c08.js');
+require('./index-3fc4f7d7.js');
+require('./ui/Loader.js');
+require('./index-0e24aca4.js');
+require('./index-bf8f9551.js');
+require('./ui/MentionUserLabel.js');
+require('./consts-d04401ad.js');
+require('./ui/TextButton.js');
+require('./color-5cfb41c7.js');
+require('./Channel/components/TypingIndicator.js');
+require('./ChannelProvider-39d1e9a4.js');
+require('./const-a3e169f4.js');
+require('./compareIds-784d9a4e.js');
+require('@sendbird/chat/message');
+require('./useLongPress-cf56e64a.js');
+require('./ChannelList/components/ChannelPreviewAction.js');
+require('./EditUserProfile.js');
+require('./index-f3784774.js');
+require('./ui/Input.js');
+require('./index-985a1afb.js');
+require('./Channel/components/ChannelUI.js');
+require('./ui/ConnectionStatus.js');
+require('./Channel/components/ChannelHeader.js');
+require('./utils-e6c788f1.js');
+require('./Channel/components/MessageList.js');
+require('./Channel/components/Message.js');
+require('./Channel/components/SuggestedMentionList.js');
+require('./const-b19292fd.js');
+require('./ThreadProvider-c83249cf.js');
+require('./Thread/context/types.js');
+require('./ui/DateSeparator.js');
+require('./ui/MessageInput.js');
+require('dompurify');
+require('./consts-016f07ac.js');
+require('./consts-eb163887.js');
+require('./tokenize-88b021e0.js');
+require('./ui/MessageContent.js');
+require('./ui/MessageItemMenu.js');
+require('./types-9466af03.js');
+require('./ui/MessageItemReactionMenu.js');
+require('./ui/ReactionButton.js');
+require('./ui/EmojiReactions.js');
+require('./ui/ReactionBadge.js');
+require('./ui/BottomSheet.js');
+require('./ui/Tooltip.js');
+require('./ui/TooltipWrapper.js');
+require('./Message/context.js');
+require('./ui/AdminMessage.js');
+require('./ui/TextMessageItemBody.js');
+require('./index-db8116c0.js');
+require('./ui/MentionLabel.js');
+require('./ui/LinkLabel.js');
+require('./ui/FileMessageItemBody.js');
+require('./ui/ThumbnailMessageItemBody.js');
+require('./ui/OGMessageItemBody.js');
+require('./ui/UnknownMessageItemBody.js');
+require('./ui/QuoteMessage.js');
+require('./index-ff7b4cb6.js');
+require('./ui/ThreadReplies.js');
+require('./ui/VoiceMessageItemBody.js');
+require('./ui/ProgressBar.js');
+require('./VoicePlayer/useVoicePlayer.js');
+require('./ui/PlaybackTime.js');
+require('./Channel/components/FileViewer.js');
+require('./Channel/components/RemoveMessageModal.js');
+require('./index-f6c6728e.js');
+require('./useDirtyGetMentions-cc476482.js');
+require('./Channel/components/UnreadCount.js');
+require('./Channel/components/FrozenNotification.js');
+require('./Channel/components/MessageInput.js');
+require('./ui/QuoteMessageInput.js');
+require('./VoiceMessageInputWrapper-b46d3514.js');
+require('./VoiceRecorder/useVoiceRecorder.js');
+require('./index-cb4e4067.js');
+require('./ChannelSettings/components/ChannelSettingsUI.js');
+require('./ChannelSettings/context.js');
+require('./ChannelSettings/components/ChannelProfile.js');
+require('./ChannelSettings/components/EditDetailsModal.js');
+require('./ChannelSettings/components/ModerationPanel.js');
+require('./ui/Accordion.js');
+require('./ui/AccordionGroup.js');
+require('./context-18074bb9.js');
+require('./ui/Toggle.js');
+require('./ChannelSettings/components/UserListItem.js');
+require('./MemberList-073f16cc.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/components/ThreadUI.js');
+require('./Thread/components/ParentMessageInfo.js');
+require('./RemoveMessageModal-e02d1dc0.js');
+require('./Thread/components/ParentMessageInfoItem.js');
+require('./ui/FileViewer.js');
+require('./Thread/components/ThreadHeader.js');
+require('./Thread/components/ThreadList.js');
+require('./Thread/components/ThreadListItem.js');
+require('date-fns');
+require('./Thread/components/ThreadMessageInput.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+const DesktopLayout = props => {
+  const {
+    isReactionEnabled,
+    replyType,
+    isMessageGroupingEnabled,
+    allowProfileEdit,
+    showSearchIcon,
+    onProfileEditSuccess,
+    disableAutoSelect,
+    currentChannel,
+    setCurrentChannel,
+    showSettings,
+    setShowSettings,
+    showSearch,
+    setShowSearch,
+    highlightedMessage,
+    setHighlightedMessage,
+    startingPoint,
+    setStartingPoint,
+    showThread,
+    setShowThread,
+    threadTargetMessage,
+    setThreadTargetMessage
+  } = props;
+  const [animatedMessageId, setAnimatedMessageId] = React.useState(null);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-app__wrap"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-app__channellist-wrap"
+  }, /*#__PURE__*/React__default["default"].createElement(ChannelList, {
+    allowProfileEdit: allowProfileEdit,
+    activeChannelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url,
+    onProfileEditSuccess: onProfileEditSuccess,
+    disableAutoSelect: disableAutoSelect,
+    onChannelSelect: channel => {
+      setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(null);
+      setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null);
+      if (channel) {
+        setCurrentChannel(channel);
+      } else {
+        setCurrentChannel(null);
+      }
+    }
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `
+          ${showSettings ? 'sendbird-app__conversation--settings-open' : ''}
+          ${showSearch ? 'sendbird-app__conversation--search-open' : ''}
+          sendbird-app__conversation-wrap
+        `
+  }, /*#__PURE__*/React__default["default"].createElement(Channel, {
+    channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
+    onChatHeaderActionClick: () => {
+      setShowSearch(false);
+      setShowThread(false);
+      setShowSettings(!showSettings);
+    },
+    onSearchClick: () => {
+      setShowSettings(false);
+      setShowThread(false);
+      setShowSearch(!showSearch);
+    },
+    onReplyInThread: _ref => {
+      let {
+        message
+      } = _ref;
+      // parent message
+      setShowSettings(false);
+      setShowSearch(false);
+      if (replyType === 'THREAD') {
+        setThreadTargetMessage(message);
+        setShowThread(true);
+      }
+    },
+    onQuoteMessageClick: _ref2 => {
+      let {
+        message
+      } = _ref2;
+      // thread message
+      setShowSettings(false);
+      setShowSearch(false);
+      if (replyType === 'THREAD') {
+        setThreadTargetMessage(message);
+        setShowThread(true);
+      }
+    },
+    onMessageAnimated: () => {
+      setAnimatedMessageId(null);
+    },
+    onMessageHighlighted: () => {
+      setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null);
+    },
+    showSearchIcon: showSearchIcon,
+    startingPoint: startingPoint,
+    animatedMessage: animatedMessageId,
+    highlightedMessage: highlightedMessage,
+    isReactionEnabled: isReactionEnabled,
+    replyType: replyType,
+    isMessageGroupingEnabled: isMessageGroupingEnabled
+  })), showSettings && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-app__settingspanel-wrap"
+  }, /*#__PURE__*/React__default["default"].createElement(ChannelSettings, {
+    className: "sendbird-channel-settings",
+    channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
+    onCloseClick: () => {
+      setShowSettings(false);
+    }
+  })), showSearch && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-app__searchpanel-wrap"
+  }, /*#__PURE__*/React__default["default"].createElement(MessageSearch, {
+    channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
+    onResultClick: message => {
+      if (message.messageId === highlightedMessage) {
+        setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null);
+        setTimeout(() => {
+          setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(message.messageId);
+        });
+      } else {
+        setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(message.createdAt);
+        setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(message.messageId);
+      }
+    },
+    onCloseClick: () => {
+      setShowSearch(false);
+    }
+  })), showThread && /*#__PURE__*/React__default["default"].createElement(Thread, {
+    className: "sendbird-app__thread",
+    channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
+    message: threadTargetMessage,
+    onHeaderActionClick: () => {
+      setShowThread(false);
+    },
+    onMoveToParentMessage: _ref3 => {
+      let {
+        message,
+        channel
+      } = _ref3;
+      if ((channel === null || channel === void 0 ? void 0 : channel.url) !== (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url)) {
+        setCurrentChannel(channel);
+      }
+      if ((message === null || message === void 0 ? void 0 : message.messageId) !== animatedMessageId) {
+        setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(message === null || message === void 0 ? void 0 : message.createdAt);
+      }
+      setTimeout(() => {
+        setAnimatedMessageId(message === null || message === void 0 ? void 0 : message.messageId);
+      }, 500);
+    }
+  }));
+};
+
+var PANELS = /*#__PURE__*/function (PANELS) {
+  PANELS["CHANNEL_LIST"] = "CHANNEL_LIST";
+  PANELS["CHANNEL"] = "CHANNEL";
+  PANELS["CHANNEL_SETTINGS"] = "CHANNEL_SETTINGS";
+  PANELS["MESSAGE_SEARCH"] = "MESSAGE_SEARCH";
+  PANELS["THREAD"] = "THREAD";
+  return PANELS;
+}(PANELS || {});
+const MobileLayout = props => {
+  var _store$stores, _store$stores$sdkStor, _store$config;
+  const {
+    replyType,
+    isMessageGroupingEnabled,
+    allowProfileEdit,
+    isReactionEnabled,
+    showSearchIcon,
+    onProfileEditSuccess,
+    currentChannel,
+    setCurrentChannel,
+    highlightedMessage,
+    setHighlightedMessage,
+    startingPoint,
+    setStartingPoint,
+    threadTargetMessage,
+    setThreadTargetMessage
+  } = props;
+  const [panel, setPanel] = React.useState(PANELS.CHANNEL_LIST);
+  const [animatedMessageId, setAnimatedMessageId] = React.useState(null);
+  const store = useSendbirdStateContext();
+  const sdk = store === null || store === void 0 ? void 0 : (_store$stores = store.stores) === null || _store$stores === void 0 ? void 0 : (_store$stores$sdkStor = _store$stores.sdkStore) === null || _store$stores$sdkStor === void 0 ? void 0 : _store$stores$sdkStor.sdk;
+  const userId = store === null || store === void 0 ? void 0 : (_store$config = store.config) === null || _store$config === void 0 ? void 0 : _store$config.userId;
+  const {
+    pause
+  } = VoicePlayer_context.useVoicePlayerContext();
+  const goToMessage = (message, timeoutCb) => {
+    setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint((message === null || message === void 0 ? void 0 : message.createdAt) || null);
+    setTimeout(() => {
+      timeoutCb === null || timeoutCb === void 0 ? void 0 : timeoutCb((message === null || message === void 0 ? void 0 : message.messageId) || null);
+    }, 500);
+  };
+  React.useEffect(() => {
+    if (panel !== PANELS.CHANNEL) {
+      goToMessage(null, () => setAnimatedMessageId(null));
+    }
+  }, [panel]);
+  React.useEffect(() => {
+    var _sdk$groupChannel;
+    const handlerId = uuid.uuidv4();
+    if (sdk !== null && sdk !== void 0 && (_sdk$groupChannel = sdk.groupChannel) !== null && _sdk$groupChannel !== void 0 && _sdk$groupChannel.addGroupChannelHandler) {
+      var _sdk$groupChannel2;
+      const handler = new groupChannel.GroupChannelHandler({
+        onUserBanned: (groupChannel, user) => {
+          if (groupChannel.url === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) && (user === null || user === void 0 ? void 0 : user.userId) === userId) {
+            setPanel(PANELS.CHANNEL_LIST);
+          }
+        },
+        onChannelDeleted: channelUrl => {
+          if (channelUrl === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url)) {
+            setPanel(PANELS.CHANNEL_LIST);
+          }
+        },
+        onUserLeft: (groupChannel, user) => {
+          if (groupChannel.url === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) && (user === null || user === void 0 ? void 0 : user.userId) === userId) {
+            setPanel(PANELS.CHANNEL_LIST);
+          }
+        }
+      });
+      sdk === null || sdk === void 0 ? void 0 : (_sdk$groupChannel2 = sdk.groupChannel) === null || _sdk$groupChannel2 === void 0 ? void 0 : _sdk$groupChannel2.addGroupChannelHandler(handlerId, handler);
+    }
+    return () => {
+      var _sdk$groupChannel3, _sdk$groupChannel3$re;
+      sdk === null || sdk === void 0 ? void 0 : (_sdk$groupChannel3 = sdk.groupChannel) === null || _sdk$groupChannel3 === void 0 ? void 0 : (_sdk$groupChannel3$re = _sdk$groupChannel3.removeGroupChannelHandler) === null || _sdk$groupChannel3$re === void 0 ? void 0 : _sdk$groupChannel3$re.call(_sdk$groupChannel3, handlerId);
+    };
+  }, [sdk]);
+
+  // if currentChannel is changed while on Thread
+  // then change panel type to CHANNEL
+  React.useEffect(() => {
+    if (panel === PANELS.THREAD) {
+      setPanel(PANELS.CHANNEL);
+    }
+  }, [currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sb_mobile"
+  }, panel === PANELS.CHANNEL_LIST && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sb_mobile__panelwrap"
+  }, /*#__PURE__*/React__default["default"].createElement(ChannelList, {
+    onProfileEditSuccess: onProfileEditSuccess,
+    onChannelSelect: channel => {
+      setCurrentChannel(channel);
+      setPanel(PANELS.CHANNEL);
+    },
+    allowProfileEdit: allowProfileEdit
+    // this condition must be true for mobile
+    ,
+    disableAutoSelect: true
+  })), panel === PANELS.CHANNEL && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sb_mobile__panelwrap"
+  }, /*#__PURE__*/React__default["default"].createElement(Channel, {
+    replyType: replyType,
+    channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
+    onSearchClick: () => {
+      setPanel(PANELS.MESSAGE_SEARCH);
+    },
+    onBackClick: () => {
+      setPanel(PANELS.CHANNEL_LIST);
+      pause(VoicePlayer_context.ALL);
+    },
+    isReactionEnabled: isReactionEnabled,
+    showSearchIcon: showSearchIcon,
+    isMessageGroupingEnabled: isMessageGroupingEnabled,
+    startingPoint: startingPoint,
+    animatedMessage: animatedMessageId,
+    highlightedMessage: highlightedMessage,
+    onChatHeaderActionClick: () => {
+      setPanel(PANELS.CHANNEL_SETTINGS);
+    },
+    onReplyInThread: _ref => {
+      let {
+        message
+      } = _ref;
+      if (replyType === 'THREAD') {
+        setPanel(PANELS.THREAD);
+        setThreadTargetMessage(message);
+      }
+    },
+    onQuoteMessageClick: _ref2 => {
+      let {
+        message
+      } = _ref2;
+      // thread message
+      if (replyType === 'THREAD') {
+        setThreadTargetMessage(message);
+        setPanel(PANELS.THREAD);
+      }
+    }
+  })), panel === PANELS.CHANNEL_SETTINGS && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sb_mobile__panelwrap"
+  }, /*#__PURE__*/React__default["default"].createElement(ChannelSettings, {
+    channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
+    onCloseClick: () => {
+      setPanel(PANELS.CHANNEL);
+    },
+    onLeaveChannel: () => {
+      setPanel(PANELS.CHANNEL_LIST);
+    }
+  })), panel === PANELS.MESSAGE_SEARCH && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sb_mobile__panelwrap"
+  }, /*#__PURE__*/React__default["default"].createElement(MessageSearch, {
+    channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
+    onCloseClick: () => {
+      setPanel(PANELS.CHANNEL);
+    },
+    onResultClick: message => {
+      setPanel(PANELS.CHANNEL);
+      goToMessage(message, messageId => {
+        setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(messageId);
+      });
+    }
+  })), panel === PANELS.THREAD && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sb_mobile__panelwrap"
+  }, /*#__PURE__*/React__default["default"].createElement(Thread, {
+    channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
+    message: threadTargetMessage,
+    onHeaderActionClick: () => {
+      setPanel(PANELS.CHANNEL);
+      pause(VoicePlayer_context.ALL);
+    },
+    onMoveToParentMessage: _ref3 => {
+      let {
+        message,
+        channel
+      } = _ref3;
+      setCurrentChannel(channel);
+      goToMessage(message, messageId => {
+        setPanel(PANELS.CHANNEL);
+        setAnimatedMessageId(messageId);
+      });
+    }
+  })));
+};
+
+const AppLayout = props => {
+  var _props$replyType, _props$isReactionEnab, _props$showSearchIcon;
+  const {
+    isMessageGroupingEnabled,
+    allowProfileEdit,
+    onProfileEditSuccess,
+    disableAutoSelect,
+    currentChannel,
+    setCurrentChannel
+  } = props;
+  const globalStore = useSendbirdStateContext();
+  const globalConfigs = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config;
+  const [showThread, setShowThread] = React.useState(false);
+  const [threadTargetMessage, setThreadTargetMessage] = React.useState(null);
+  const [showSettings, setShowSettings] = React.useState(false);
+  const [showSearch, setShowSearch] = React.useState(false);
+  const [highlightedMessage, setHighlightedMessage] = React.useState(null);
+  const [startingPoint, setStartingPoint] = React.useState(null);
+  const {
+    isMobile
+  } = MediaQueryContext.useMediaQueryContext();
+
+  /**
+   * Below configs can be set via Dashboard UIKit config setting but as a lower priority than App props.
+   * So need to be have fallback value \w global configs even though each prop values are undefined
+   */
+  const replyType = (_props$replyType = props.replyType) !== null && _props$replyType !== void 0 ? _props$replyType : globalConfigs === null || globalConfigs === void 0 ? void 0 : globalConfigs.replyType;
+  const isReactionEnabled = (_props$isReactionEnab = props.isReactionEnabled) !== null && _props$isReactionEnab !== void 0 ? _props$isReactionEnab : globalConfigs === null || globalConfigs === void 0 ? void 0 : globalConfigs.isReactionEnabled;
+  const showSearchIcon = (_props$showSearchIcon = props.showSearchIcon) !== null && _props$showSearchIcon !== void 0 ? _props$showSearchIcon : globalConfigs === null || globalConfigs === void 0 ? void 0 : globalConfigs.showSearchIcon;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isMobile ? /*#__PURE__*/React__default["default"].createElement(MobileLayout, {
+    replyType: replyType,
+    showSearchIcon: showSearchIcon,
+    isReactionEnabled: isReactionEnabled,
+    isMessageGroupingEnabled: isMessageGroupingEnabled,
+    allowProfileEdit: allowProfileEdit,
+    onProfileEditSuccess: onProfileEditSuccess,
+    currentChannel: currentChannel,
+    setCurrentChannel: setCurrentChannel,
+    highlightedMessage: highlightedMessage,
+    setHighlightedMessage: setHighlightedMessage,
+    startingPoint: startingPoint,
+    setStartingPoint: setStartingPoint,
+    threadTargetMessage: threadTargetMessage,
+    setThreadTargetMessage: setThreadTargetMessage
+  }) : /*#__PURE__*/React__default["default"].createElement(DesktopLayout, {
+    replyType: replyType,
+    isReactionEnabled: isReactionEnabled,
+    showSearchIcon: showSearchIcon,
+    isMessageGroupingEnabled: isMessageGroupingEnabled,
+    allowProfileEdit: allowProfileEdit,
+    onProfileEditSuccess: onProfileEditSuccess,
+    disableAutoSelect: disableAutoSelect,
+    currentChannel: currentChannel,
+    setCurrentChannel: setCurrentChannel,
+    showThread: showThread,
+    setShowThread: setShowThread,
+    threadTargetMessage: threadTargetMessage,
+    setThreadTargetMessage: setThreadTargetMessage,
+    showSettings: showSettings,
+    setShowSettings: setShowSettings,
+    showSearch: showSearch,
+    setShowSearch: setShowSearch,
+    highlightedMessage: highlightedMessage,
+    setHighlightedMessage: setHighlightedMessage,
+    startingPoint: startingPoint,
+    setStartingPoint: setStartingPoint
+  }));
+};
+
+/**
+ * This is a drop in Chat solution
+ * Can also be used as an example for creating
+ * default chat apps
+ */
+function App(props) {
+  const {
+    appId,
+    userId,
+    accessToken,
+    customApiHost,
+    customWebSocketHost,
+    breakpoint,
+    theme,
+    userListQuery,
+    nickname,
+    profileUrl,
+    dateLocale,
+    config = {},
+    isReactionEnabled,
+    isMentionEnabled,
+    isVoiceMessageEnabled,
+    voiceRecord,
+    replyType,
+    isMessageGroupingEnabled,
+    colorSet,
+    stringSet,
+    allowProfileEdit,
+    disableUserProfile,
+    disableMarkAsDelivered,
+    renderUserProfile,
+    showSearchIcon,
+    onProfileEditSuccess,
+    imageCompression,
+    disableAutoSelect,
+    isTypingIndicatorEnabledOnChannelList,
+    isMessageReceiptStatusEnabledOnChannelList,
+    uikitOptions,
+    isUserIdUsedForNickname
+  } = props;
+  const [currentChannel, setCurrentChannel] = React.useState(null);
+  return /*#__PURE__*/React__default["default"].createElement(SendbirdProvider, {
+    stringSet: stringSet,
+    appId: appId,
+    userId: userId,
+    accessToken: accessToken,
+    customApiHost: customApiHost,
+    customWebSocketHost: customWebSocketHost,
+    breakpoint: breakpoint,
+    theme: theme,
+    nickname: nickname,
+    profileUrl: profileUrl,
+    dateLocale: dateLocale,
+    userListQuery: userListQuery,
+    config: config,
+    colorSet: colorSet,
+    disableUserProfile: disableUserProfile,
+    disableMarkAsDelivered: disableMarkAsDelivered,
+    renderUserProfile: renderUserProfile,
+    imageCompression: imageCompression,
+    isReactionEnabled: isReactionEnabled,
+    isMentionEnabled: isMentionEnabled,
+    isVoiceMessageEnabled: isVoiceMessageEnabled,
+    voiceRecord: voiceRecord,
+    onUserProfileMessage: channel => {
+      setCurrentChannel(channel);
+    },
+    isTypingIndicatorEnabledOnChannelList: isTypingIndicatorEnabledOnChannelList,
+    isMessageReceiptStatusEnabledOnChannelList: isMessageReceiptStatusEnabledOnChannelList,
+    replyType: replyType,
+    showSearchIcon: showSearchIcon,
+    uikitOptions: uikitOptions,
+    isUserIdUsedForNickname: isUserIdUsedForNickname
+  }, /*#__PURE__*/React__default["default"].createElement(AppLayout, {
+    isReactionEnabled: isReactionEnabled,
+    replyType: replyType,
+    showSearchIcon: showSearchIcon,
+    isMessageGroupingEnabled: isMessageGroupingEnabled,
+    allowProfileEdit: allowProfileEdit,
+    onProfileEditSuccess: onProfileEditSuccess,
+    disableAutoSelect: disableAutoSelect,
+    currentChannel: currentChannel,
+    setCurrentChannel: setCurrentChannel
+  }));
+}
+App.propTypes = {
+  appId: PropTypes__default["default"].string.isRequired,
+  userId: PropTypes__default["default"].string.isRequired,
+  accessToken: PropTypes__default["default"].string,
+  customApiHost: PropTypes__default["default"].string,
+  customWebSocketHost: PropTypes__default["default"].string,
+  theme: PropTypes__default["default"].string,
+  userListQuery: PropTypes__default["default"].func,
+  nickname: PropTypes__default["default"].string,
+  profileUrl: PropTypes__default["default"].string,
+  breakpoint: PropTypes__default["default"].oneOf([PropTypes__default["default"].string, PropTypes__default["default"].bool]),
+  allowProfileEdit: PropTypes__default["default"].bool,
+  disableUserProfile: PropTypes__default["default"].bool,
+  disableMarkAsDelivered: PropTypes__default["default"].bool,
+  renderUserProfile: PropTypes__default["default"].func,
+  onProfileEditSuccess: PropTypes__default["default"].func,
+  dateLocale: PropTypes__default["default"].shape({}),
+  config: PropTypes__default["default"].shape({
+    // None Error Warning Info 'All/Debug'
+    logLevel: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)]),
+    isREMUnitEnabled: PropTypes__default["default"].bool
+  }),
+  uikitOptions: PropTypes__default["default"].shape({}),
+  isReactionEnabled: PropTypes__default["default"].bool,
+  replyType: PropTypes__default["default"].oneOf(['NONE', 'QUOTE_REPLY', 'THREAD']),
+  showSearchIcon: PropTypes__default["default"].bool,
+  isMessageGroupingEnabled: PropTypes__default["default"].bool,
+  stringSet: PropTypes__default["default"].objectOf(PropTypes__default["default"].string),
+  colorSet: PropTypes__default["default"].objectOf(PropTypes__default["default"].string),
+  imageCompression: PropTypes__default["default"].shape({
+    compressionRate: PropTypes__default["default"].number,
+    resizingWidth: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
+    resizingHeight: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string])
+  }),
+  disableAutoSelect: PropTypes__default["default"].bool,
+  isMentionEnabled: PropTypes__default["default"].bool,
+  isVoiceMessageEnabled: PropTypes__default["default"].bool,
+  voiceRecord: PropTypes__default["default"].shape({
+    maxRecordingTime: PropTypes__default["default"].number,
+    minRecordingTime: PropTypes__default["default"].number
+  }),
+  isTypingIndicatorEnabledOnChannelList: PropTypes__default["default"].bool,
+  isMessageReceiptStatusEnabledOnChannelList: PropTypes__default["default"].bool,
+  isUserIdUsedForNickname: PropTypes__default["default"].bool
+};
+App.defaultProps = {
+  accessToken: '',
+  customApiHost: '',
+  customWebSocketHost: '',
+  theme: 'light',
+  nickname: '',
+  profileUrl: '',
+  userListQuery: null,
+  breakpoint: null,
+  dateLocale: null,
+  allowProfileEdit: false,
+  onProfileEditSuccess: null,
+  disableMarkAsDelivered: false,
+  renderUserProfile: null,
+  config: {},
+  voiceRecord: {
+    maxRecordingTime: consts.VOICE_RECORDER_DEFAULT_MAX,
+    minRecordingTime: consts.VOICE_RECORDER_DEFAULT_MIN
+  },
+  isMessageGroupingEnabled: true,
+  stringSet: null,
+  colorSet: null,
+  imageCompression: {},
+  disableAutoSelect: false,
+  uikitOptions: undefined,
+  // The below configs are duplicates of the Dashboard UIKit Configs.
+  // Since their default values will be set in the Sendbird component,
+  // we don't need to set them here.
+  showSearchIcon: undefined,
+  isMentionEnabled: undefined,
+  isReactionEnabled: undefined,
+  replyType: undefined,
+  disableUserProfile: undefined,
+  isVoiceMessageEnabled: undefined,
+  isTypingIndicatorEnabledOnChannelList: undefined,
+  isMessageReceiptStatusEnabledOnChannelList: undefined,
+  isUserIdUsedForNickname: true
+};
+
+module.exports = App;
+//# sourceMappingURL=App.js.map