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

package/dist/Thread/components/ThreadMessageInput.js

@@ -0,0 +1,243 @@
+import { a as __spreadArray } from '../../tslib.es6-96c33448.js';
+import React__default, { useRef, useState, useEffect } from 'react';
+import { MutedState } from '@sendbird/chat/groupChannel';
+import useSendbirdStateContext from '../../useSendbirdStateContext.js';
+import MessageInput from '../../ui/MessageInput.js';
+import { M as MessageInputKeys } from '../../const-78033061.js';
+import SuggestedMentionList from '../../Channel/components/SuggestedMentionList.js';
+import { u as useThreadContext } from '../../ThreadProvider-50bdb59e.js';
+import { u as useLocalization } from '../../LocalizationContext-948efac4.js';
+import { V as VoiceMessageInputWrapper } from '../../VoiceMessageInputWrapper-e5f8b5d0.js';
+import { R as Role } from '../../types-63b4e9db.js';
+import '../../withSendbird.js';
+import '../../_rollupPluginBabelHelpers-e4ed87a8.js';
+import 'react-dom/server';
+import 'prop-types';
+import '../../const-8f606c40.js';
+import '../../ui/IconButton.js';
+import '../../ui/Button.js';
+import '../../index-8ff79952.js';
+import '../../stringSet-fbd7c37c.js';
+import '../../ui/MentionUserLabel.js';
+import '../../ui/Icon.js';
+import '../../index-4217213f.js';
+import '../../utils/message/getOutgoingMessageState.js';
+import '../../index-5c8b0523.js';
+import '../../ui/Avatar.js';
+import '../../ui/ImageRenderer.js';
+import '../../uuid-d8fc0ef1.js';
+import '../../ChannelProvider-bbe16a96.js';
+import '../../UserProfileContext-74d60d34.js';
+import '../../index-6b63d598.js';
+import '../../topics-d6268256.js';
+import '../../compareIds-3442d021.js';
+import '@sendbird/chat/message';
+import '../../ui/ContextMenu.js';
+import 'react-dom';
+import '../../ui/SortByRow.js';
+import '../../ui/ReactionButton.js';
+import '../../consts-854f6e5f.js';
+import '../context/types.js';
+import '@sendbird/chat';
+import '../../VoicePlayer/useVoicePlayer.js';
+import '../../index-bb3ccac9.js';
+import '../../VoiceRecorder/context.js';
+import '../../lame.all.js';
+import '../../VoiceRecorder/useVoiceRecorder.js';
+import '../../index-3b737aa6.js';
+import '../../ui/PlaybackTime.js';
+import '../../ui/ProgressBar.js';
+import '../../ui/TextButton.js';
+import '../../color-206fa031.js';
+import '../../ui/Modal.js';
+import '../../index-39098053.js';
+import '../../MediaQueryContext-b04e7ffd.js';
+
+var ThreadMessageInput = function (props, ref) {
+  var className = props.className,
+      renderFileUploadIcon = props.renderFileUploadIcon,
+      renderVoiceMessageIcon = props.renderVoiceMessageIcon,
+      renderSendMessageIcon = props.renderSendMessageIcon;
+  var config = useSendbirdStateContext().config;
+  var stringSet = useLocalization().stringSet;
+  var isMentionEnabled = config.isMentionEnabled,
+      isOnline = config.isOnline,
+      userMention = config.userMention,
+      isVoiceMessageEnabled = config.isVoiceMessageEnabled;
+
+  var _a = 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 = useRef();
+  var disabled = isMuted || !((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myRole) === Role.OPERATOR) && isChannelFrozen || parentMessage === null; // mention
+
+  var _b = useState(''),
+      mentionNickname = _b[0],
+      setMentionNickname = _b[1];
+
+  var _c = useState([]),
+      mentionedUsers = _c[0],
+      setMentionedUsers = _c[1];
+
+  var _d = useState([]),
+      mentionedUserIds = _d[0],
+      setMentionedUserIds = _d[1];
+
+  var _e = useState(null),
+      selectedUser = _e[0],
+      setSelectedUser = _e[1];
+
+  var _f = useState([]),
+      mentionSuggestedUsers = _f[0],
+      setMentionSuggestedUsers = _f[1];
+
+  var _g = useState(true),
+      ableMention = _g[0],
+      setAbleMention = _g[1];
+
+  var _h = useState(null),
+      messageInputEvent = _h[0],
+      setMessageInputEvent = _h[1];
+
+  var _j = 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
+
+  useEffect(function () {
+    setShowVoiceMessageInput(false);
+  }, [currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url]);
+  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]);
+  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) !== Role.OPERATOR) {
+    return null;
+  }
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-thread-message-input".concat(showVoiceMessageInput ? '--voice-message' : '', " ").concat(className)
+  }, 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: userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount,
+    maxSuggestionCount: userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount
+  }), showVoiceMessageInput ? /*#__PURE__*/React__default.createElement(VoiceMessageInputWrapper, {
+    channel: currentChannel,
+    onSubmitClick: function (recordedFile, duration) {
+      sendVoiceMessage(recordedFile, duration, parentMessage);
+      setShowVoiceMessageInput(false);
+    },
+    onCancelClick: function () {
+      setShowVoiceMessageInput(false);
+    }
+  }) : /*#__PURE__*/React__default.createElement(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) === Role.OPERATOR) && stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED || (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myMutedState) === 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 === MessageInputKeys.Enter && ableMention || e.key === MessageInputKeys.ArrowUp || e.key === MessageInputKeys.ArrowDown)) {
+        setMessageInputEvent(e);
+        return true;
+      }
+
+      return false;
+    }
+  }));
+};
+
+var ThreadMessageInput$1 = /*#__PURE__*/React__default.forwardRef(ThreadMessageInput);
+
+export { ThreadMessageInput$1 as default };
+//# sourceMappingURL=ThreadMessageInput.js.map

package/dist/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","user","__spreadArray","users","maxSuggestionCount","recordedFile","duration","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/Thread/components/ThreadUI.js

@@ -0,0 +1,334 @@
+import React__default, { useMemo, useState, useRef } from 'react';
+import useSendbirdStateContext from '../../useSendbirdStateContext.js';
+import { u as useLocalization } from '../../LocalizationContext-948efac4.js';
+import { g as getChannelTitle } from '../../utils-feeb0ce4.js';
+import { u as useThreadContext, i as isAboutSame } from '../../ThreadProvider-50bdb59e.js';
+import ParentMessageInfo from './ParentMessageInfo.js';
+import ThreadHeader from './ThreadHeader.js';
+import ThreadList from './ThreadList.js';
+import ThreadMessageInput from './ThreadMessageInput.js';
+import { ParentMessageStateTypes, ThreadListStateTypes } from '../context/types.js';
+import { P as PlaceHolder, a as PlaceHolderTypes } from '../../index-8a78af9f.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-8ff79952.js';
+import '../../withSendbird.js';
+import '../../_rollupPluginBabelHelpers-e4ed87a8.js';
+import '../../stringSet-fbd7c37c.js';
+import '../../index-5c8b0523.js';
+import '../../index-6b63d598.js';
+import '../../utils/message/getOutgoingMessageState.js';
+import '../../UserProfileContext-74d60d34.js';
+import 'prop-types';
+import '../../tslib.es6-96c33448.js';
+import '@sendbird/chat';
+import '../../topics-d6268256.js';
+import '@sendbird/chat/groupChannel';
+import '../../uuid-d8fc0ef1.js';
+import '@sendbird/chat/message';
+import '../../consts-854f6e5f.js';
+import '../../RemoveMessageModal-f1a27721.js';
+import '../../ui/Modal.js';
+import 'react-dom';
+import '../../index-39098053.js';
+import '../../ui/Button.js';
+import '../../ui/Icon.js';
+import '../../ui/IconButton.js';
+import '../../MediaQueryContext-b04e7ffd.js';
+import './ParentMessageInfoItem.js';
+import '../../index-4217213f.js';
+import '../../ui/Word.js';
+import '../../ui/LinkLabel.js';
+import '../../ui/MentionLabel.js';
+import '../../ui/ContextMenu.js';
+import '../../ui/SortByRow.js';
+import '../../ui/UserProfile.js';
+import '../../sendbirdSelectors.js';
+import '../../utils-273068f6.js';
+import '../../ui/Avatar.js';
+import '../../ui/ImageRenderer.js';
+import '../../ui/TextButton.js';
+import '../../color-206fa031.js';
+import '../../ui/EmojiReactions.js';
+import '../../ui/Tooltip.js';
+import '../../ui/TooltipWrapper.js';
+import '../../ui/ReactionBadge.js';
+import '../../ui/ReactionButton.js';
+import '../../ui/VoiceMessageItemBody.js';
+import '../../ui/ProgressBar.js';
+import '../../VoicePlayer/useVoicePlayer.js';
+import '../../index-bb3ccac9.js';
+import '../../VoiceRecorder/context.js';
+import '../../lame.all.js';
+import '../../ui/PlaybackTime.js';
+import '../../ui/Loader.js';
+import '../../Channel/components/SuggestedMentionList.js';
+import '../../ChannelProvider-bbe16a96.js';
+import '../../compareIds-3442d021.js';
+import '../../const-8f606c40.js';
+import '../../const-78033061.js';
+import '../../ui/FileViewer.js';
+import '../../ui/MessageItemMenu.js';
+import '../../types-63b4e9db.js';
+import '../../ui/MessageItemReactionMenu.js';
+import '../../ui/MessageInput.js';
+import 'react-dom/server';
+import '../../ui/MentionUserLabel.js';
+import './ThreadListItem.js';
+import '../../ui/DateSeparator.js';
+import '../../index-515b7f4e.js';
+import '../../index-a983f435.js';
+import '../../index-a3d3d77a.js';
+import '../../ui/TextMessageItemBody.js';
+import '../../ui/OGMessageItemBody.js';
+import '../../ui/FileMessageItemBody.js';
+import '../../ui/ThumbnailMessageItemBody.js';
+import '../../ui/UnknownMessageItemBody.js';
+import 'date-fns';
+import '../../VoiceMessageInputWrapper-e5f8b5d0.js';
+import '../../VoiceRecorder/useVoiceRecorder.js';
+import '../../index-3b737aa6.js';
+
+var useMemorizedHeader = function (_a) {
+  var renderHeader = _a.renderHeader;
+  return 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 useMemo(function () {
+    if (parentMessageState === ParentMessageStateTypes.NIL || parentMessageState === ParentMessageStateTypes.LOADING || parentMessageState === ParentMessageStateTypes.INVALID) {
+      if (typeof renderParentMessageInfoPlaceholder === 'function') {
+        return renderParentMessageInfoPlaceholder(parentMessageState);
+      }
+
+      switch (parentMessageState) {
+        case ParentMessageStateTypes.NIL:
+          {
+            return /*#__PURE__*/React__default.createElement(PlaceHolder, {
+              className: "sendbird-thread-ui__parent-message-info placeholder-nil",
+              type: PlaceHolderTypes.NO_RESULTS,
+              iconSize: "64px"
+            });
+          }
+
+        case ParentMessageStateTypes.LOADING:
+          {
+            return /*#__PURE__*/React__default.createElement(PlaceHolder, {
+              className: "sendbird-thread-ui__parent-message-info placeholder-loading",
+              type: PlaceHolderTypes.LOADING,
+              iconSize: "64px"
+            });
+          }
+
+        case ParentMessageStateTypes.INVALID:
+          {
+            return /*#__PURE__*/React__default.createElement(PlaceHolder, {
+              className: "sendbird-thread-ui__parent-message-info placeholder-invalid",
+              type: PlaceHolderTypes.WRONG,
+              iconSize: "64px"
+            });
+          }
+
+        default:
+          {
+            return null;
+          }
+      }
+    } else if (parentMessageState === 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 useMemo(function () {
+    if (threadListState === ThreadListStateTypes.NIL || threadListState === ThreadListStateTypes.LOADING || threadListState === ThreadListStateTypes.INVALID) {
+      if (typeof renderThreadListPlaceHolder === 'function') {
+        return renderThreadListPlaceHolder(threadListState);
+      }
+
+      switch (threadListState) {
+        case ThreadListStateTypes.LOADING:
+          {
+            return /*#__PURE__*/React__default.createElement(PlaceHolder, {
+              className: "sendbird-thread-ui__thread-list placeholder-loading",
+              type: PlaceHolderTypes.LOADING,
+              iconSize: "64px"
+            });
+          }
+
+        case ThreadListStateTypes.INVALID:
+          {
+            return /*#__PURE__*/React__default.createElement(PlaceHolder, {
+              className: "sendbird-thread-ui__thread-list placeholder-invalid",
+              type: PlaceHolderTypes.WRONG,
+              iconSize: "64px"
+            });
+          }
+
+        case ThreadListStateTypes.NIL:
+          {
+            return /*#__PURE__*/React__default.createElement(React__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 = useLocalization().stringSet;
+
+  var _e = 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 = useState(0),
+      scrollBottom = _f[0],
+      setScrollBottom = _f[1];
+
+  var scrollRef = 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 (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 (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.createElement("div", {
+    className: "sendbird-thread-ui"
+  }, MemorizedHeader || /*#__PURE__*/React__default.createElement(ThreadHeader, {
+    className: "sendbird-thread-ui__header",
+    channelName: getChannelTitle(currentChannel, currentUserId, stringSet),
+    onActionIconClick: onHeaderActionClick,
+    onChannelNameClick: function () {
+      return onMoveToParentMessage({
+        message: parentMessage,
+        channel: currentChannel
+      });
+    }
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-thread-ui--scroll",
+    ref: scrollRef,
+    onScroll: onScroll
+  }, MemorizedParentMessageInfo || /*#__PURE__*/React__default.createElement(ParentMessageInfo, {
+    className: "sendbird-thread-ui__parent-message-info"
+  }), replyCount > 0 && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-thread-ui__reply-counts"
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.BODY_1,
+    color: LabelColors.ONBACKGROUND_3
+  }, "".concat(replyCount, " ").concat(replyCount > 1 ? stringSet.THREAD__THREAD_REPLIES : stringSet.THREAD__THREAD_REPLY))), MemorizedThreadList || /*#__PURE__*/React__default.createElement(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.createElement(ThreadMessageInput, {
+    className: "sendbird-thread-ui__message-input",
+    renderFileUploadIcon: renderFileUploadIcon,
+    renderVoiceMessageIcon: renderVoiceMessageIcon,
+    renderSendMessageIcon: renderSendMessageIcon
+  }));
+};
+
+export { ThreadUI as default };
+//# sourceMappingURL=ThreadUI.js.map