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

package/dist/cjs/Thread/components/ThreadMessageInput.js

@@ -0,0 +1,249 @@
+'use strict';
+
+var tslib_es6 = require('../../tslib.es6-e8acf1b5.js');
+var React = require('react');
+var groupChannel = require('@sendbird/chat/groupChannel');
+var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
+var ui_MessageInput = require('../../ui/MessageInput.js');
+var _const = require('../../const-86e2750e.js');
+var Channel_components_SuggestedMentionList = require('../../Channel/components/SuggestedMentionList.js');
+var Thread_context = require('../../ThreadProvider-6300587c.js');
+var LocalizationContext = require('../../LocalizationContext-2fb0be1f.js');
+var VoiceMessageInputWrapper = require('../../VoiceMessageInputWrapper-8eb47421.js');
+var types = require('../../types-6ffa6822.js');
+require('../../withSendbird.js');
+require('../../_rollupPluginBabelHelpers-e7c78521.js');
+require('react-dom/server');
+require('prop-types');
+require('../../const-3c5d5059.js');
+require('../../ui/IconButton.js');
+require('../../ui/Button.js');
+require('../../index-578f0575.js');
+require('../../stringSet-388f679a.js');
+require('../../ui/MentionUserLabel.js');
+require('../../ui/Icon.js');
+require('../../index-6714492f.js');
+require('../../utils/message/getOutgoingMessageState.js');
+require('../../index-1ec959ab.js');
+require('../../ui/Avatar.js');
+require('../../ui/ImageRenderer.js');
+require('../../uuid-a94df44e.js');
+require('../../ChannelProvider-367995a6.js');
+require('../../UserProfileContext-0549101e.js');
+require('../../index-f1bd9638.js');
+require('../../topics-839402ce.js');
+require('../../compareIds-19a11ffa.js');
+require('@sendbird/chat/message');
+require('../../ui/ContextMenu.js');
+require('react-dom');
+require('../../ui/SortByRow.js');
+require('../../ui/ReactionButton.js');
+require('../../consts-9d221c68.js');
+require('../context/types.js');
+require('@sendbird/chat');
+require('../../VoicePlayer/useVoicePlayer.js');
+require('../../index-e1d58610.js');
+require('../../VoiceRecorder/context.js');
+require('../../lame.all.js');
+require('../../VoiceRecorder/useVoiceRecorder.js');
+require('../../index-8b769862.js');
+require('../../ui/PlaybackTime.js');
+require('../../ui/ProgressBar.js');
+require('../../ui/TextButton.js');
+require('../../color-84bbbc0b.js');
+require('../../ui/Modal.js');
+require('../../index-490839e3.js');
+require('../../MediaQueryContext-db5159f3.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ThreadMessageInput = function (props, ref) {
+  var className = props.className,
+      renderFileUploadIcon = props.renderFileUploadIcon,
+      renderVoiceMessageIcon = props.renderVoiceMessageIcon,
+      renderSendMessageIcon = props.renderSendMessageIcon;
+  var config = useSendbirdStateContext().config;
+  var stringSet = LocalizationContext.useLocalization().stringSet;
+  var isMentionEnabled = config.isMentionEnabled,
+      isOnline = config.isOnline,
+      userMention = config.userMention,
+      isVoiceMessageEnabled = config.isVoiceMessageEnabled;
+
+  var _a = Thread_context.useThreadContext(),
+      currentChannel = _a.currentChannel,
+      parentMessage = _a.parentMessage,
+      sendMessage = _a.sendMessage,
+      sendFileMessage = _a.sendFileMessage,
+      sendVoiceMessage = _a.sendVoiceMessage,
+      isMuted = _a.isMuted,
+      isChannelFrozen = _a.isChannelFrozen,
+      allThreadMessages = _a.allThreadMessages;
+
+  var messageInputRef = React.useRef();
+  var disabled = isMuted || !((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myRole) === types.Role.OPERATOR) && isChannelFrozen || parentMessage === null; // mention
+
+  var _b = React.useState(''),
+      mentionNickname = _b[0],
+      setMentionNickname = _b[1];
+
+  var _c = React.useState([]),
+      mentionedUsers = _c[0],
+      setMentionedUsers = _c[1];
+
+  var _d = React.useState([]),
+      mentionedUserIds = _d[0],
+      setMentionedUserIds = _d[1];
+
+  var _e = React.useState(null),
+      selectedUser = _e[0],
+      setSelectedUser = _e[1];
+
+  var _f = React.useState([]),
+      mentionSuggestedUsers = _f[0],
+      setMentionSuggestedUsers = _f[1];
+
+  var _g = React.useState(true),
+      ableMention = _g[0],
+      setAbleMention = _g[1];
+
+  var _h = React.useState(null),
+      messageInputEvent = _h[0],
+      setMessageInputEvent = _h[1];
+
+  var _j = React.useState(false),
+      showVoiceMessageInput = _j[0],
+      setShowVoiceMessageInput = _j[1];
+
+  var displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0; // && !utils.isDisabledBecauseFrozen(channel)
+  // && !utils.isDisabledBecauseMuted(channel);
+  // Reset when changing channel
+
+  React.useEffect(function () {
+    setShowVoiceMessageInput(false);
+  }, [currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url]);
+  React.useEffect(function () {
+    if ((mentionedUsers === null || mentionedUsers === void 0 ? void 0 : mentionedUsers.length) >= (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount)) {
+      setAbleMention(false);
+    } else {
+      setAbleMention(true);
+    }
+  }, [mentionedUsers]);
+  React.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]);
+
+  if ((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isBroadcast) && (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myRole) !== types.Role.OPERATOR) {
+    return null;
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-thread-message-input".concat(showVoiceMessageInput ? '--voice-message' : '', " ").concat(className)
+  }, displaySuggestedMentionList && /*#__PURE__*/React__default["default"].createElement(Channel_components_SuggestedMentionList, {
+    targetNickname: mentionNickname,
+    inputEvent: messageInputEvent // renderUserMentionItem={renderUserMentionItem}
+    ,
+    onUserItemClick: function (user) {
+      if (user) {
+        setMentionedUsers(tslib_es6.__spreadArray(tslib_es6.__spreadArray([], mentionedUsers, true), [user], false));
+      }
+
+      setMentionNickname('');
+      setSelectedUser(user);
+      setMessageInputEvent(null);
+    },
+    onFocusItemChange: function () {
+      setMessageInputEvent(null);
+    },
+    onFetchUsers: function (users) {
+      setMentionSuggestedUsers(users);
+    },
+    ableAddMention: ableMention,
+    maxMentionCount: userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount,
+    maxSuggestionCount: userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount
+  }), showVoiceMessageInput ? /*#__PURE__*/React__default["default"].createElement(VoiceMessageInputWrapper.VoiceMessageInputWrapper, {
+    channel: currentChannel,
+    onSubmitClick: function (recordedFile, duration) {
+      sendVoiceMessage(recordedFile, duration, parentMessage);
+      setShowVoiceMessageInput(false);
+    },
+    onCancelClick: function () {
+      setShowVoiceMessageInput(false);
+    }
+  }) : /*#__PURE__*/React__default["default"].createElement(ui_MessageInput, {
+    className: "sendbird-thread-message-input__message-input",
+    messageFieldId: "sendbird-message-input-text-field--thread",
+    disabled: disabled,
+    channelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url,
+    mentionSelectedUser: selectedUser,
+    isMentionEnabled: isMentionEnabled,
+    isVoiceMessageEnabled: isVoiceMessageEnabled,
+    onVoiceMessageIconClick: function () {
+      setShowVoiceMessageInput(true);
+    },
+    renderFileUploadIcon: renderFileUploadIcon,
+    renderVoiceMessageIcon: renderVoiceMessageIcon,
+    renderSendMessageIcon: renderSendMessageIcon,
+    ref: ref || messageInputRef,
+    placeholder: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isFrozen) && !((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myRole) === types.Role.OPERATOR) && stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED || (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myMutedState) === groupChannel.MutedState.MUTED && stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED_SHORT || (allThreadMessages.length > 0 ? stringSet.THREAD__INPUT__REPLY_TO_THREAD : stringSet.THREAD__INPUT__REPLY_IN_THREAD),
+    onStartTyping: function () {
+      var _a;
+
+      (_a = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.startTyping) === null || _a === void 0 ? void 0 : _a.call(currentChannel);
+    },
+    onSendMessage: function (_a) {
+      var _b;
+
+      var message = _a.message,
+          mentionTemplate = _a.mentionTemplate;
+      sendMessage({
+        message: message,
+        mentionedUsers: mentionedUsers,
+        mentionTemplate: mentionTemplate,
+        quoteMessage: parentMessage
+      });
+      setMentionNickname('');
+      setMentionedUsers([]);
+      (_b = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.endTyping) === null || _b === void 0 ? void 0 : _b.call(currentChannel);
+    },
+    onFileUpload: function (file) {
+      sendFileMessage(file, parentMessage);
+    },
+    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 === _const.MessageInputKeys.Enter && ableMention || e.key === _const.MessageInputKeys.ArrowUp || e.key === _const.MessageInputKeys.ArrowDown)) {
+        setMessageInputEvent(e);
+        return true;
+      }
+
+      return false;
+    }
+  }));
+};
+
+var ThreadMessageInput$1 = /*#__PURE__*/React__default["default"].forwardRef(ThreadMessageInput);
+
+module.exports = ThreadMessageInput$1;
+//# sourceMappingURL=ThreadMessageInput.js.map

package/dist/cjs/Thread/components/ThreadMessageInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadMessageInput.js","sources":["../../../../src/smart-components/Thread/components/ThreadMessageInput/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport { MutedState } from '@sendbird/chat/groupChannel';\n\nimport './index.scss';\n\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\nimport MessageInput from '../../../../ui/MessageInput';\nimport { MessageInputKeys } from '../../../../ui/MessageInput/const';\nimport SuggestedMentionList from '../../../Channel/components/SuggestedMentionList';\nimport { useThreadContext } from '../../context/ThreadProvider';\nimport { useLocalization } from '../../../../lib/LocalizationContext';\nimport VoiceMessageInputWrapper from '../../../Channel/components/MessageInput/VoiceMessageInputWrapper';\nimport { Role } from '../../../../lib/types';\n\nexport interface ThreadMessageInputProps {\n  className?: string;\n  renderFileUploadIcon?: () =>  React.ReactElement;\n  renderVoiceMessageIcon?: () =>  React.ReactElement;\n  renderSendMessageIcon?: () =>  React.ReactElement;\n}\n\nconst ThreadMessageInput = (\n  props: ThreadMessageInputProps,\n  ref: React.MutableRefObject<any>,\n): React.ReactElement => {\n  const {\n    className,\n    renderFileUploadIcon,\n    renderVoiceMessageIcon,\n    renderSendMessageIcon,\n  } = props;\n  const { config } = useSendbirdStateContext();\n  const { stringSet } = useLocalization();\n  const {\n    isMentionEnabled,\n    isOnline,\n    userMention,\n    isVoiceMessageEnabled,\n  } = config;\n  const {\n    currentChannel,\n    parentMessage,\n    sendMessage,\n    sendFileMessage,\n    sendVoiceMessage,\n    isMuted,\n    isChannelFrozen,\n    allThreadMessages,\n  } = useThreadContext();\n  const messageInputRef = useRef();\n\n  const disabled = isMuted || (!(currentChannel?.myRole === Role.OPERATOR) && isChannelFrozen) || parentMessage === null;\n\n  // mention\n  const [mentionNickname, setMentionNickname] = useState('');\n  const [mentionedUsers, setMentionedUsers] = useState([]);\n  const [mentionedUserIds, setMentionedUserIds] = useState([]);\n  const [selectedUser, setSelectedUser] = useState(null);\n  const [mentionSuggestedUsers, setMentionSuggestedUsers] = useState([]);\n  const [ableMention, setAbleMention] = useState(true);\n  const [messageInputEvent, setMessageInputEvent] = useState(null);\n  const [showVoiceMessageInput, setShowVoiceMessageInput] = useState(false);\n  const displaySuggestedMentionList = isOnline\n    && isMentionEnabled\n    && mentionNickname.length > 0\n  // && !utils.isDisabledBecauseFrozen(channel)\n  // && !utils.isDisabledBecauseMuted(channel);\n\n  // Reset when changing channel\n  useEffect(() => {\n    setShowVoiceMessageInput(false);\n  }, [currentChannel?.url]);\n\n  useEffect(() => {\n    if (mentionedUsers?.length >= userMention?.maxMentionCount) {\n      setAbleMention(false);\n    } else {\n      setAbleMention(true);\n    }\n  }, [mentionedUsers]);\n  useEffect(() => {\n    setMentionedUsers(mentionedUsers.filter(({ userId }) => {\n      const i = mentionedUserIds.indexOf(userId);\n      if (i < 0) {\n        return false;\n      } else {\n        mentionedUserIds.splice(i, 1);\n        return true;\n      }\n    }));\n  }, [mentionedUserIds]);\n\n  if (currentChannel?.isBroadcast && currentChannel?.myRole !== Role.OPERATOR) {\n    return null;\n  }\n\n  return (\n    <div className={`sendbird-thread-message-input${showVoiceMessageInput ? '--voice-message' : ''} ${className}`}>\n      {\n        displaySuggestedMentionList && (\n          <SuggestedMentionList\n            targetNickname={mentionNickname}\n            inputEvent={messageInputEvent}\n            // renderUserMentionItem={renderUserMentionItem}\n            onUserItemClick={(user) => {\n              if (user) {\n                setMentionedUsers([...mentionedUsers, user]);\n              }\n              setMentionNickname('');\n              setSelectedUser(user);\n              setMessageInputEvent(null);\n            }}\n            onFocusItemChange={() => {\n              setMessageInputEvent(null);\n            }}\n            onFetchUsers={(users) => {\n              setMentionSuggestedUsers(users);\n            }}\n            ableAddMention={ableMention}\n            maxMentionCount={userMention?.maxMentionCount}\n            maxSuggestionCount={userMention?.maxSuggestionCount}\n          />\n        )\n      }\n      {\n        showVoiceMessageInput\n          ? (\n            <VoiceMessageInputWrapper\n              channel={currentChannel}\n              onSubmitClick={(recordedFile, duration) => {\n                sendVoiceMessage(recordedFile, duration, parentMessage);\n                setShowVoiceMessageInput(false);\n              }}\n              onCancelClick={() => {\n                setShowVoiceMessageInput(false);\n              }}\n            />\n          )\n          : (\n            <MessageInput\n              className=\"sendbird-thread-message-input__message-input\"\n              messageFieldId=\"sendbird-message-input-text-field--thread\"\n              disabled={disabled}\n              channelUrl={currentChannel?.url}\n              mentionSelectedUser={selectedUser}\n              isMentionEnabled={isMentionEnabled}\n              isVoiceMessageEnabled={isVoiceMessageEnabled}\n              onVoiceMessageIconClick={() => {\n                setShowVoiceMessageInput(true);\n              }}\n              renderFileUploadIcon={renderFileUploadIcon}\n              renderVoiceMessageIcon={renderVoiceMessageIcon}\n              renderSendMessageIcon={renderSendMessageIcon}\n              ref={ref || messageInputRef}\n              placeholder={\n                (currentChannel?.isFrozen && !(currentChannel?.myRole === Role.OPERATOR) && stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED)\n                || (currentChannel?.myMutedState === MutedState.MUTED && stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED_SHORT)\n                || (allThreadMessages.length > 0\n                  ? stringSet.THREAD__INPUT__REPLY_TO_THREAD\n                  : stringSet.THREAD__INPUT__REPLY_IN_THREAD\n                )\n              }\n              onStartTyping={() => {\n                currentChannel?.startTyping?.();\n              }}\n              onSendMessage={({ message, mentionTemplate }) => {\n                sendMessage({\n                  message: message,\n                  mentionedUsers,\n                  mentionTemplate: mentionTemplate,\n                  quoteMessage: parentMessage,\n                });\n                setMentionNickname('');\n                setMentionedUsers([]);\n                currentChannel?.endTyping?.();\n              }}\n              onFileUpload={(file) => {\n                sendFileMessage(file, parentMessage);\n              }}\n              onUserMentioned={(user) => {\n                if (selectedUser?.userId === user?.userId) {\n                  setSelectedUser(null);\n                  setMentionNickname('');\n                }\n              }}\n              onMentionStringChange={(mentionText) => {\n                setMentionNickname(mentionText);\n              }}\n              onMentionedUserIdsUpdated={(userIds) => {\n                setMentionedUserIds(userIds);\n              }}\n              onKeyDown={(e) => {\n                if (displaySuggestedMentionList && mentionSuggestedUsers?.length > 0\n                  && ((e.key === MessageInputKeys.Enter && ableMention) || e.key === MessageInputKeys.ArrowUp || e.key === MessageInputKeys.ArrowDown)\n                ) {\n                  setMessageInputEvent(e);\n                  return true;\n                }\n                return false;\n              }}\n            />\n          )\n      }\n    </div>\n  );\n}\n\nexport default React.forwardRef(ThreadMessageInput);\n"],"names":["ThreadMessageInput","props","ref","className","renderFileUploadIcon","renderVoiceMessageIcon","renderSendMessageIcon","config","useSendbirdStateContext","stringSet","useLocalization","isMentionEnabled","isOnline","userMention","isVoiceMessageEnabled","_a","useThreadContext","currentChannel","parentMessage","sendMessage","sendFileMessage","sendVoiceMessage","isMuted","isChannelFrozen","allThreadMessages","messageInputRef","useRef","disabled","myRole","Role","OPERATOR","_b","useState","mentionNickname","setMentionNickname","_c","mentionedUsers","setMentionedUsers","_d","mentionedUserIds","setMentionedUserIds","_e","selectedUser","setSelectedUser","_f","mentionSuggestedUsers","setMentionSuggestedUsers","_g","ableMention","setAbleMention","_h","messageInputEvent","setMessageInputEvent","_j","showVoiceMessageInput","setShowVoiceMessageInput","displaySuggestedMentionList","length","useEffect","url","maxMentionCount","filter","userId","i","indexOf","splice","isBroadcast","React","concat","SuggestedMentionList","user","__spreadArray","users","maxSuggestionCount","VoiceMessageInputWrapper","recordedFile","duration","MessageInput","isFrozen","MESSAGE_INPUT__PLACE_HOLDER__DISABLED","myMutedState","MutedState","MUTED","MESSAGE_INPUT__PLACE_HOLDER__MUTED_SHORT","THREAD__INPUT__REPLY_TO_THREAD","THREAD__INPUT__REPLY_IN_THREAD","startTyping","message","mentionTemplate","quoteMessage","endTyping","file","mentionText","userIds","e","key","MessageInputKeys","Enter","ArrowUp","ArrowDown","forwardRef"],"mappings":"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"}

package/dist/cjs/Thread/components/ThreadUI.js

@@ -0,0 +1,340 @@
+'use strict';
+
+var React = require('react');
+var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
+var LocalizationContext = require('../../LocalizationContext-2fb0be1f.js');
+var utils = require('../../utils-56a22c82.js');
+var Thread_context = require('../../ThreadProvider-6300587c.js');
+var Thread_components_ParentMessageInfo = require('./ParentMessageInfo.js');
+var Thread_components_ThreadHeader = require('./ThreadHeader.js');
+var Thread_components_ThreadList = require('./ThreadList.js');
+var Thread_components_ThreadMessageInput = require('./ThreadMessageInput.js');
+var Thread_context_types = require('../context/types.js');
+var ui_PlaceHolder = require('../../index-2d7e8e6d.js');
+var ui_Label = require('../../index-578f0575.js');
+require('../../withSendbird.js');
+require('../../_rollupPluginBabelHelpers-e7c78521.js');
+require('../../stringSet-388f679a.js');
+require('../../index-1ec959ab.js');
+require('../../index-f1bd9638.js');
+require('../../utils/message/getOutgoingMessageState.js');
+require('../../UserProfileContext-0549101e.js');
+require('prop-types');
+require('../../tslib.es6-e8acf1b5.js');
+require('@sendbird/chat');
+require('../../topics-839402ce.js');
+require('@sendbird/chat/groupChannel');
+require('../../uuid-a94df44e.js');
+require('@sendbird/chat/message');
+require('../../consts-9d221c68.js');
+require('../../RemoveMessageModal-a9a5cd37.js');
+require('../../ui/Modal.js');
+require('react-dom');
+require('../../index-490839e3.js');
+require('../../ui/Button.js');
+require('../../ui/Icon.js');
+require('../../ui/IconButton.js');
+require('../../MediaQueryContext-db5159f3.js');
+require('./ParentMessageInfoItem.js');
+require('../../index-6714492f.js');
+require('../../ui/Word.js');
+require('../../ui/LinkLabel.js');
+require('../../ui/MentionLabel.js');
+require('../../ui/ContextMenu.js');
+require('../../ui/SortByRow.js');
+require('../../ui/UserProfile.js');
+require('../../sendbirdSelectors.js');
+require('../../utils-c61c3737.js');
+require('../../ui/Avatar.js');
+require('../../ui/ImageRenderer.js');
+require('../../ui/TextButton.js');
+require('../../color-84bbbc0b.js');
+require('../../ui/EmojiReactions.js');
+require('../../ui/Tooltip.js');
+require('../../ui/TooltipWrapper.js');
+require('../../ui/ReactionBadge.js');
+require('../../ui/ReactionButton.js');
+require('../../ui/VoiceMessageItemBody.js');
+require('../../ui/ProgressBar.js');
+require('../../VoicePlayer/useVoicePlayer.js');
+require('../../index-e1d58610.js');
+require('../../VoiceRecorder/context.js');
+require('../../lame.all.js');
+require('../../ui/PlaybackTime.js');
+require('../../ui/Loader.js');
+require('../../Channel/components/SuggestedMentionList.js');
+require('../../ChannelProvider-367995a6.js');
+require('../../compareIds-19a11ffa.js');
+require('../../const-3c5d5059.js');
+require('../../const-86e2750e.js');
+require('../../ui/FileViewer.js');
+require('../../ui/MessageItemMenu.js');
+require('../../types-6ffa6822.js');
+require('../../ui/MessageItemReactionMenu.js');
+require('../../ui/MessageInput.js');
+require('react-dom/server');
+require('../../ui/MentionUserLabel.js');
+require('./ThreadListItem.js');
+require('../../ui/DateSeparator.js');
+require('../../index-43d893cf.js');
+require('../../index-aada6371.js');
+require('../../index-4e46a153.js');
+require('../../ui/TextMessageItemBody.js');
+require('../../ui/OGMessageItemBody.js');
+require('../../ui/FileMessageItemBody.js');
+require('../../ui/ThumbnailMessageItemBody.js');
+require('../../ui/UnknownMessageItemBody.js');
+require('date-fns');
+require('../../VoiceMessageInputWrapper-8eb47421.js');
+require('../../VoiceRecorder/useVoiceRecorder.js');
+require('../../index-8b769862.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var useMemorizedHeader = function (_a) {
+  var renderHeader = _a.renderHeader;
+  return React.useMemo(function () {
+    if (typeof renderHeader === 'function') {
+      return renderHeader();
+    }
+
+    return null;
+  }, [renderHeader]);
+};
+
+var useMemorizedParentMessageInfo = function (_a) {
+  var parentMessage = _a.parentMessage,
+      parentMessageState = _a.parentMessageState,
+      renderParentMessageInfo = _a.renderParentMessageInfo,
+      renderParentMessageInfoPlaceholder = _a.renderParentMessageInfoPlaceholder;
+  return React.useMemo(function () {
+    if (parentMessageState === Thread_context_types.ParentMessageStateTypes.NIL || parentMessageState === Thread_context_types.ParentMessageStateTypes.LOADING || parentMessageState === Thread_context_types.ParentMessageStateTypes.INVALID) {
+      if (typeof renderParentMessageInfoPlaceholder === 'function') {
+        return renderParentMessageInfoPlaceholder(parentMessageState);
+      }
+
+      switch (parentMessageState) {
+        case Thread_context_types.ParentMessageStateTypes.NIL:
+          {
+            return /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder.PlaceHolder, {
+              className: "sendbird-thread-ui__parent-message-info placeholder-nil",
+              type: ui_PlaceHolder.PlaceHolderTypes.NO_RESULTS,
+              iconSize: "64px"
+            });
+          }
+
+        case Thread_context_types.ParentMessageStateTypes.LOADING:
+          {
+            return /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder.PlaceHolder, {
+              className: "sendbird-thread-ui__parent-message-info placeholder-loading",
+              type: ui_PlaceHolder.PlaceHolderTypes.LOADING,
+              iconSize: "64px"
+            });
+          }
+
+        case Thread_context_types.ParentMessageStateTypes.INVALID:
+          {
+            return /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder.PlaceHolder, {
+              className: "sendbird-thread-ui__parent-message-info placeholder-invalid",
+              type: ui_PlaceHolder.PlaceHolderTypes.WRONG,
+              iconSize: "64px"
+            });
+          }
+
+        default:
+          {
+            return null;
+          }
+      }
+    } else if (parentMessageState === Thread_context_types.ParentMessageStateTypes.INITIALIZED) {
+      if (typeof renderParentMessageInfo === 'function') {
+        return renderParentMessageInfo();
+      }
+    }
+
+    return null;
+  }, [parentMessage, parentMessageState, renderParentMessageInfo, renderParentMessageInfoPlaceholder]);
+};
+
+var useMemorizedThreadList = function (_a) {
+  var threadListState = _a.threadListState,
+      renderThreadListPlaceHolder = _a.renderThreadListPlaceHolder;
+  return React.useMemo(function () {
+    if (threadListState === Thread_context_types.ThreadListStateTypes.NIL || threadListState === Thread_context_types.ThreadListStateTypes.LOADING || threadListState === Thread_context_types.ThreadListStateTypes.INVALID) {
+      if (typeof renderThreadListPlaceHolder === 'function') {
+        return renderThreadListPlaceHolder(threadListState);
+      }
+
+      switch (threadListState) {
+        case Thread_context_types.ThreadListStateTypes.LOADING:
+          {
+            return /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder.PlaceHolder, {
+              className: "sendbird-thread-ui__thread-list placeholder-loading",
+              type: ui_PlaceHolder.PlaceHolderTypes.LOADING,
+              iconSize: "64px"
+            });
+          }
+
+        case Thread_context_types.ThreadListStateTypes.INVALID:
+          {
+            return /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder.PlaceHolder, {
+              className: "sendbird-thread-ui__thread-list placeholder-invalid",
+              type: ui_PlaceHolder.PlaceHolderTypes.WRONG,
+              iconSize: "64px"
+            });
+          }
+
+        case Thread_context_types.ThreadListStateTypes.NIL:
+          {
+            return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
+          }
+
+        default:
+          {
+            return null;
+          }
+      }
+    }
+
+    return null;
+  }, [threadListState, renderThreadListPlaceHolder]);
+};
+
+var ThreadUI = function (_a) {
+  var _b, _c, _d;
+
+  var renderHeader = _a.renderHeader,
+      renderParentMessageInfo = _a.renderParentMessageInfo,
+      renderMessage = _a.renderMessage,
+      renderMessageInput = _a.renderMessageInput,
+      renderCustomSeparator = _a.renderCustomSeparator,
+      renderParentMessageInfoPlaceholder = _a.renderParentMessageInfoPlaceholder,
+      renderThreadListPlaceHolder = _a.renderThreadListPlaceHolder,
+      renderFileUploadIcon = _a.renderFileUploadIcon,
+      renderVoiceMessageIcon = _a.renderVoiceMessageIcon,
+      renderSendMessageIcon = _a.renderSendMessageIcon;
+  var stores = useSendbirdStateContext().stores;
+  var currentUserId = (_d = (_c = (_b = stores === null || stores === void 0 ? void 0 : stores.sdkStore) === null || _b === void 0 ? void 0 : _b.sdk) === null || _c === void 0 ? void 0 : _c.currentUser) === null || _d === void 0 ? void 0 : _d.userId;
+  var stringSet = LocalizationContext.useLocalization().stringSet;
+
+  var _e = Thread_context.useThreadContext(),
+      currentChannel = _e.currentChannel,
+      allThreadMessages = _e.allThreadMessages,
+      parentMessage = _e.parentMessage,
+      parentMessageState = _e.parentMessageState,
+      threadListState = _e.threadListState,
+      hasMorePrev = _e.hasMorePrev,
+      hasMoreNext = _e.hasMoreNext,
+      fetchPrevThreads = _e.fetchPrevThreads,
+      fetchNextThreads = _e.fetchNextThreads,
+      onHeaderActionClick = _e.onHeaderActionClick,
+      onMoveToParentMessage = _e.onMoveToParentMessage;
+
+  var replyCount = allThreadMessages.length; // Memoized custom components
+
+  var MemorizedHeader = useMemorizedHeader({
+    renderHeader: renderHeader
+  });
+  var MemorizedParentMessageInfo = useMemorizedParentMessageInfo({
+    parentMessage: parentMessage,
+    parentMessageState: parentMessageState,
+    renderParentMessageInfo: renderParentMessageInfo,
+    renderParentMessageInfoPlaceholder: renderParentMessageInfoPlaceholder
+  });
+  var MemorizedThreadList = useMemorizedThreadList({
+    threadListState: threadListState,
+    renderThreadListPlaceHolder: renderThreadListPlaceHolder
+  }); // scroll
+
+  var _f = React.useState(0),
+      scrollBottom = _f[0],
+      setScrollBottom = _f[1];
+
+  var scrollRef = React.useRef(null);
+
+  var onScroll = function (e) {
+    var element = e.target;
+    var scrollTop = element.scrollTop,
+        clientHeight = element.clientHeight,
+        scrollHeight = element.scrollHeight;
+    var threadItemNodes = scrollRef.current.querySelectorAll('.sendbird-thread-list-item');
+    var firstNode = threadItemNodes === null || threadItemNodes === void 0 ? void 0 : threadItemNodes[0];
+
+    if (Thread_context.isAboutSame(scrollTop, 0, 10) && hasMorePrev) {
+      fetchPrevThreads(function (messages) {
+        var _a;
+
+        if (messages) {
+          try {
+            (_a = firstNode === null || firstNode === void 0 ? void 0 : firstNode.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(firstNode, {
+              block: 'start',
+              inline: 'nearest'
+            });
+          } catch (error) {//
+          }
+        }
+      });
+    }
+
+    if (Thread_context.isAboutSame(clientHeight + scrollTop, scrollHeight, 10) && hasMoreNext) {
+      var scrollTop_1 = scrollTop;
+      fetchNextThreads(function (messages) {
+        if (messages) {
+          try {
+            element.scrollTop = scrollTop_1;
+            scrollRef.current.scrollTop = scrollTop_1;
+          } catch (error) {//
+          }
+        }
+      });
+    } // save the lastest scroll bottom value
+
+
+    if (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) {
+      var current = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
+      setScrollBottom(current.scrollHeight - current.scrollTop - current.offsetHeight);
+    }
+  };
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-thread-ui"
+  }, MemorizedHeader || /*#__PURE__*/React__default["default"].createElement(Thread_components_ThreadHeader, {
+    className: "sendbird-thread-ui__header",
+    channelName: utils.getChannelTitle(currentChannel, currentUserId, stringSet),
+    onActionIconClick: onHeaderActionClick,
+    onChannelNameClick: function () {
+      return onMoveToParentMessage({
+        message: parentMessage,
+        channel: currentChannel
+      });
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-thread-ui--scroll",
+    ref: scrollRef,
+    onScroll: onScroll
+  }, MemorizedParentMessageInfo || /*#__PURE__*/React__default["default"].createElement(Thread_components_ParentMessageInfo, {
+    className: "sendbird-thread-ui__parent-message-info"
+  }), replyCount > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-thread-ui__reply-counts"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    type: ui_Label.LabelTypography.BODY_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_3
+  }, "".concat(replyCount, " ").concat(replyCount > 1 ? stringSet.THREAD__THREAD_REPLIES : stringSet.THREAD__THREAD_REPLY))), MemorizedThreadList || /*#__PURE__*/React__default["default"].createElement(Thread_components_ThreadList, {
+    className: "sendbird-thread-ui__thread-list",
+    allThreadMessages: allThreadMessages,
+    renderMessage: renderMessage,
+    renderCustomSeparator: renderCustomSeparator,
+    scrollRef: scrollRef,
+    scrollBottom: scrollBottom
+  })), (renderMessageInput === null || renderMessageInput === void 0 ? void 0 : renderMessageInput()) || /*#__PURE__*/React__default["default"].createElement(Thread_components_ThreadMessageInput, {
+    className: "sendbird-thread-ui__message-input",
+    renderFileUploadIcon: renderFileUploadIcon,
+    renderVoiceMessageIcon: renderVoiceMessageIcon,
+    renderSendMessageIcon: renderSendMessageIcon
+  }));
+};
+
+module.exports = ThreadUI;
+//# sourceMappingURL=ThreadUI.js.map