@sendbird/uikit-react 3.6.11-beta.2 → 3.7.0-rc.0

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

@@ -1 +1 @@
-{"version":3,"file":"ThreadMessageInput.js","sources":["../../../../src/modules/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';\nimport { useDirtyGetMentions } from '../../../Message/hooks/useDirtyGetMentions';\nimport { isDisabledBecauseFrozen, isDisabledBecauseMuted } from '../../../Channel/context/utils';\nimport { useHandleUploadFiles } from '../../../Channel/components/MessageInput/useHandleUploadFiles';\n\nexport interface ThreadMessageInputProps {\n  className?: string;\n  disabled?: boolean;\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 propsDisabled = props.disabled;\n  const { config } = useSendbirdStateContext();\n  const { stringSet } = useLocalization();\n  const {\n    isMentionEnabled,\n    isOnline,\n    userMention,\n    isVoiceMessageEnabled,\n    logger,\n    isMultipleFilesMessageEnabled,\n  } = config;\n  const {\n    currentChannel,\n    parentMessage,\n    sendMessage,\n    sendFileMessage,\n    sendVoiceMessage,\n    sendMultipleFilesMessage,\n    isMuted,\n    isChannelFrozen,\n    allThreadMessages,\n  } = useThreadContext();\n  const messageInputRef = useRef();\n\n  const disabled = propsDisabled\n    || isMuted\n    || (!(currentChannel?.myRole === Role.OPERATOR) && isChannelFrozen) || parentMessage === null;\n\n  // MFM\n  const [handleUploadFiles] = useHandleUploadFiles({\n    sendFileMessage,\n    sendMultipleFilesMessage,\n    quoteMessage: parentMessage,\n  }, {\n    logger,\n  });\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 [messageInputEvent, setMessageInputEvent] = useState(null);\n  const [showVoiceMessageInput, setShowVoiceMessageInput] = useState(false);\n  const displaySuggestedMentionList = isOnline\n    && isMentionEnabled\n    && mentionNickname.length > 0\n    && !isDisabledBecauseFrozen(currentChannel)\n    && !isDisabledBecauseMuted(currentChannel)\n    && !currentChannel?.isBroadcast;\n\n  // Reset when changing channel\n  useEffect(() => {\n    setShowVoiceMessageInput(false);\n  }, [currentChannel?.url]);\n\n  const mentionNodes = useDirtyGetMentions({ ref: ref || messageInputRef }, { logger });\n  const ableMention = mentionNodes?.length < userMention?.maxMentionCount;\n\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              channel={currentChannel}\n              setMentionedUsers={setMentionedUsers}\n              channelUrl={currentChannel?.url}\n              mentionSelectedUser={selectedUser}\n              isMentionEnabled={isMentionEnabled}\n              isVoiceMessageEnabled={isVoiceMessageEnabled}\n              isSelectingMultipleFilesEnabled={isMultipleFilesMessageEnabled}\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={handleUploadFiles}\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","propsDisabled","disabled","config","useSendbirdStateContext","stringSet","useLocalization","isMentionEnabled","isOnline","userMention","isVoiceMessageEnabled","logger","isMultipleFilesMessageEnabled","currentChannel","parentMessage","sendMessage","sendFileMessage","sendVoiceMessage","sendMultipleFilesMessage","isMuted","isChannelFrozen","allThreadMessages","useThreadContext","messageInputRef","useRef","myRole","Role","OPERATOR","handleUploadFiles","useHandleUploadFiles","quoteMessage","mentionNickname","setMentionNickname","useState","mentionedUsers","setMentionedUsers","mentionedUserIds","setMentionedUserIds","selectedUser","setSelectedUser","mentionSuggestedUsers","setMentionSuggestedUsers","messageInputEvent","setMessageInputEvent","showVoiceMessageInput","setShowVoiceMessageInput","displaySuggestedMentionList","length","isDisabledBecauseFrozen","isDisabledBecauseMuted","isBroadcast","useEffect","url","mentionNodes","useDirtyGetMentions","ableMention","maxMentionCount","filter","_ref","userId","i","indexOf","splice","React","createElement","SuggestedMentionList","targetNickname","inputEvent","onUserItemClick","user","onFocusItemChange","onFetchUsers","users","ableAddMention","maxSuggestionCount","VoiceMessageInputWrapper","channel","onSubmitClick","recordedFile","duration","onCancelClick","MessageInput","messageFieldId","channelUrl","mentionSelectedUser","isSelectingMultipleFilesEnabled","onVoiceMessageIconClick","placeholder","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","onStartTyping","_currentChannel$start","startTyping","call","onSendMessage","_ref2","_currentChannel$endTy","message","mentionTemplate","endTyping","onFileUpload","onUserMentioned","onMentionStringChange","mentionText","onMentionedUserIdsUpdated","userIds","onKeyDown","e","key","MessageInputKeys","Enter","ArrowUp","ArrowDown","forwardRef"],"mappings":"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"}
+{"version":3,"file":"ThreadMessageInput.js","sources":["../../../../src/modules/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';\nimport { useDirtyGetMentions } from '../../../Message/hooks/useDirtyGetMentions';\nimport { isDisabledBecauseFrozen, isDisabledBecauseMuted } from '../../../Channel/context/utils';\nimport { useHandleUploadFiles } from '../../../Channel/components/MessageInput/useHandleUploadFiles';\n\nexport interface ThreadMessageInputProps {\n  className?: string;\n  disabled?: boolean;\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 propsDisabled = props.disabled;\n  const { config } = useSendbirdStateContext();\n  const { stringSet } = useLocalization();\n  const {\n    isMentionEnabled,\n    isOnline,\n    userMention,\n    isVoiceMessageEnabled,\n    logger,\n  } = config;\n  const threadContext = useThreadContext();\n  const {\n    currentChannel,\n    parentMessage,\n    sendMessage,\n    sendFileMessage,\n    sendVoiceMessage,\n    sendMultipleFilesMessage,\n    isMuted,\n    isChannelFrozen,\n    allThreadMessages,\n  } = threadContext;\n  const messageInputRef = useRef();\n  const isMultipleFilesMessageEnabled = (\n    threadContext.isMultipleFilesMessageEnabled\n    ?? config.isMultipleFilesMessageEnabled\n  );\n\n  const disabled = propsDisabled\n    || isMuted\n    || (!(currentChannel?.myRole === Role.OPERATOR) && isChannelFrozen) || parentMessage === null;\n\n  // MFM\n  const [handleUploadFiles] = useHandleUploadFiles({\n    sendFileMessage,\n    sendMultipleFilesMessage,\n    quoteMessage: parentMessage,\n  }, {\n    logger,\n  });\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 [messageInputEvent, setMessageInputEvent] = useState(null);\n  const [showVoiceMessageInput, setShowVoiceMessageInput] = useState(false);\n  const displaySuggestedMentionList = isOnline\n    && isMentionEnabled\n    && mentionNickname.length > 0\n    && !isDisabledBecauseFrozen(currentChannel)\n    && !isDisabledBecauseMuted(currentChannel)\n    && !currentChannel?.isBroadcast;\n\n  // Reset when changing channel\n  useEffect(() => {\n    setShowVoiceMessageInput(false);\n  }, [currentChannel?.url]);\n\n  const mentionNodes = useDirtyGetMentions({ ref: ref || messageInputRef }, { logger });\n  const ableMention = mentionNodes?.length < userMention?.maxMentionCount;\n\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              channel={currentChannel}\n              setMentionedUsers={setMentionedUsers}\n              channelUrl={currentChannel?.url}\n              mentionSelectedUser={selectedUser}\n              isMentionEnabled={isMentionEnabled}\n              isVoiceMessageEnabled={isVoiceMessageEnabled}\n              isSelectingMultipleFilesEnabled={isMultipleFilesMessageEnabled}\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={handleUploadFiles}\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","propsDisabled","disabled","config","useSendbirdStateContext","stringSet","useLocalization","isMentionEnabled","isOnline","userMention","isVoiceMessageEnabled","logger","threadContext","useThreadContext","currentChannel","parentMessage","sendMessage","sendFileMessage","sendVoiceMessage","sendMultipleFilesMessage","isMuted","isChannelFrozen","allThreadMessages","messageInputRef","useRef","isMultipleFilesMessageEnabled","_a","myRole","Role","OPERATOR","handleUploadFiles","useHandleUploadFiles","quoteMessage","_b","useState","mentionNickname","setMentionNickname","_c","mentionedUsers","setMentionedUsers","_d","mentionedUserIds","setMentionedUserIds","_e","selectedUser","setSelectedUser","_f","mentionSuggestedUsers","setMentionSuggestedUsers","_g","messageInputEvent","setMessageInputEvent","_h","showVoiceMessageInput","setShowVoiceMessageInput","displaySuggestedMentionList","length","isDisabledBecauseFrozen","isDisabledBecauseMuted","isBroadcast","useEffect","url","mentionNodes","useDirtyGetMentions","ableMention","maxMentionCount","filter","userId","i","indexOf","splice","React","createElement","concat","SuggestedMentionList","targetNickname","inputEvent","onUserItemClick","user","__spreadArray","onFocusItemChange","onFetchUsers","users","ableAddMention","maxSuggestionCount","VoiceMessageInputWrapper","channel","onSubmitClick","recordedFile","duration","onCancelClick","MessageInput","messageFieldId","channelUrl","mentionSelectedUser","isSelectingMultipleFilesEnabled","onVoiceMessageIconClick","placeholder","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","onStartTyping","startTyping","onSendMessage","message","mentionTemplate","endTyping","onFileUpload","onUserMentioned","onMentionStringChange","mentionText","onMentionedUserIdsUpdated","userIds","onKeyDown","e","key","MessageInputKeys","Enter","ArrowUp","ArrowDown","forwardRef"],"mappings":"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"}

package/cjs/Thread/components/ThreadUI.js

@@ -2,53 +2,55 @@
 
 var React = require('react');
 var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
-var LocalizationContext = require('../../LocalizationContext-482c1343.js');
-var utils = require('../../utils-b34d4e2c.js');
-var Thread_context = require('../../ThreadProvider-8b0cf491.js');
+var LocalizationContext = require('../../LocalizationContext-5009012e.js');
+var utils = require('../../utils-0fac6ad1.js');
+var Thread_context = require('../context.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-7f41c4b6.js');
-var ui_Label = require('../../index-18720f0d.js');
+var ui_PlaceHolder = require('../../ui/PlaceHolder.js');
+var ui_Label = require('../../index-35820a94.js');
+var useSendMultipleFilesMessage = require('../../useSendMultipleFilesMessage-87e0ffa3.js');
 var Message_context = require('../../Message/context.js');
 require('../../withSendbird.js');
-require('../../_rollupPluginBabelHelpers-83d7e84b.js');
-require('../../stringSet-d00535a5.js');
-require('../../index-d04f312e.js');
-require('../../index-c9b003b3.js');
-require('../../utils/message/getOutgoingMessageState.js');
-require('../../UserProfileContext-fa8d0383.js');
-require('prop-types');
+require('../../tslib.es6-2f2b0bca.js');
+require('../../stringSet-98b52c49.js');
+require('../../index-fd8a0abb.js');
+require('../../UserProfileContext-922a43ec.js');
 require('@sendbird/chat');
-require('../../topics-adde627b.js');
-require('../../index-fbe9cc73.js');
-require('../../index.module-a24e9cd7.js');
-require('@sendbird/chat/groupChannel');
-require('../../uuid-b2806cf5.js');
+require('../../pubSub/topics.js');
+require('../../index-b995f638.js');
+require('../../utils/message/getOutgoingMessageState.js');
+require('../../index-609b07a2.js');
 require('@sendbird/chat/message');
-require('../../consts-fb07c671.js');
-require('../../useSendMultipleFilesMessage-81cdc9d0.js');
-require('../../utils-68aa6bf6.js');
-require('../../RemoveMessageModal-dfeeb36a.js');
+require('@sendbird/chat/groupChannel');
+require('../../uuid-c74bbbb6.js');
+require('../../consts-95462b21.js');
+require('../../utils-55fc6797.js');
+require('../../index-b6d51e74.js');
+require('../../_rollupPluginBabelHelpers-94c18dc1.js');
+require('../../RemoveMessageModal-f029d40e.js');
 require('../../ui/Modal.js');
 require('react-dom');
-require('../../utils-c47c68b1.js');
-require('../../index-cbcacbee.js');
-require('../../MediaQueryContext-73aac8cf.js');
+require('../../utils-180c6bc8.js');
+require('../../index-daf80c58.js');
+require('../../MediaQueryContext-d6fdbe43.js');
 require('../../ui/IconButton.js');
 require('../../ui/Button.js');
+require('../../types-66554668.js');
+require('prop-types');
 require('../../ui/Icon.js');
-require('../../stringFormatterUtils-8d6592ca.js');
+require('../../stringFormatterUtils-e324636c.js');
 require('./ParentMessageInfoItem.js');
 require('../../ui/ImageRenderer.js');
 require('../../ui/TextButton.js');
-require('../../color-d83b77ac.js');
+require('../../color-477ddbd4.js');
 require('../../ui/EmojiReactions.js');
 require('../../ui/ReactionBadge.js');
 require('../../ui/ReactionButton.js');
-require('../../useLongPress-1c0f4696.js');
+require('../../useLongPress-c1da8ba7.js');
 require('../../ui/ContextMenu.js');
 require('../../ui/SortByRow.js');
 require('../../ui/BottomSheet.js');
@@ -63,59 +65,57 @@ require('../../ui/TooltipWrapper.js');
 require('../../ui/VoiceMessageItemBody.js');
 require('../../ui/ProgressBar.js');
 require('../../VoicePlayer/useVoicePlayer.js');
-require('../../index-1f6b30ea.js');
+require('../../index-0ec5a831.js');
 require('../../VoiceRecorder/context.js');
 require('../../ui/PlaybackTime.js');
 require('../../ui/Loader.js');
-require('../../index-2ab19f9b.js');
-require('../../tokenize-9296fc47.js');
+require('../../index-e81e2882.js');
+require('../../tokenize-91bdbeb0.js');
 require('../../ui/MentionLabel.js');
 require('../../ui/LinkLabel.js');
-require('../../index-4b5a006d.js');
-require('../../index-857630c5.js');
-require('../../ChannelProvider-6fa73019.js');
-require('../../const-67ff9e34.js');
-require('../../compareIds-bef997cb.js');
-require('../../resolvedReplyType-85b4bd7c.js');
+require('../../useStatefulFileInfoList-aa70b6b9.js');
+require('../../index-7b0c6630.js');
+require('../../ChannelProvider-7fa98120.js');
+require('../../const-9def5c09.js');
+require('../../compareIds-de541666.js');
+require('../../resolvedReplyType-c20ef661.js');
 require('../../Channel/components/SuggestedMentionList.js');
-require('../../const-1726bde0.js');
+require('../../const-640252c1.js');
 require('../../ui/MessageItemMenu.js');
-require('../../types-0b5148cb.js');
+require('../../types-31ed2276.js');
 require('../../ui/MessageItemReactionMenu.js');
 require('../../ui/MessageInput.js');
-require('../../index-759f2a26.js');
+require('../../index-bdf7089c.js');
 require('dompurify');
-require('../../consts-b018b1ed.js');
-require('../../consts-d3b53f23.js');
-require('../../consts-bf228385.js');
-require('../../index-81baccd0.js');
+require('../../consts-54f5c12d.js');
+require('../../consts-a3b7ae99.js');
+require('../../consts-85cd42fa.js');
+require('../../index-0a25b9b2.js');
 require('../../Message/hooks/useDirtyGetMentions.js');
 require('./ThreadListItem.js');
 require('../../ui/DateSeparator.js');
-require('../../index-8ec12d1d.js');
-require('../../index-11f9cc0f.js');
-require('../../index-4eb7e2b5.js');
+require('../../index-aeb36f01.js');
+require('../../index-83d2aed9.js');
+require('../../index-826b76d5.js');
 require('../../ui/TextMessageItemBody.js');
 require('../../ui/OGMessageItemBody.js');
 require('../../ui/FileMessageItemBody.js');
 require('../../ui/ThumbnailMessageItemBody.js');
-require('../../utils-418b4438.js');
+require('../../utils-851724e0.js');
 require('../../ui/UnknownMessageItemBody.js');
 require('date-fns');
-require('../../useHandleUploadFiles-b2fc56e5.js');
+require('../../useHandleUploadFiles-fbe6ad64.js');
 require('../../VoiceRecorder/useVoiceRecorder.js');
-require('../../index-91b4af96.js');
-require('../../index-e9ac5ae1.js');
+require('../../index-ee3bf381.js');
+require('../../hooks/useModal.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const useMemorizedHeader = _ref => {
-  let {
-    renderHeader
-  } = _ref;
-  return React.useMemo(() => {
+var useMemorizedHeader = function (_a) {
+  var renderHeader = _a.renderHeader;
+  return React.useMemo(function () {
     if (typeof renderHeader === 'function') {
       return renderHeader();
     }
@@ -123,14 +123,12 @@ const useMemorizedHeader = _ref => {
   }, [renderHeader]);
 };
 
-const useMemorizedParentMessageInfo = _ref => {
-  let {
-    parentMessage,
-    parentMessageState,
-    renderParentMessageInfo,
-    renderParentMessageInfoPlaceholder
-  } = _ref;
-  return React.useMemo(() => {
+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);
@@ -138,7 +136,7 @@ const useMemorizedParentMessageInfo = _ref => {
       switch (parentMessageState) {
         case Thread_context_types.ParentMessageStateTypes.NIL:
           {
-            return /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder.PlaceHolder, {
+            return /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder["default"], {
               className: "sendbird-thread-ui__parent-message-info placeholder-nil",
               type: ui_PlaceHolder.PlaceHolderTypes.NO_RESULTS,
               iconSize: "64px"
@@ -146,7 +144,7 @@ const useMemorizedParentMessageInfo = _ref => {
           }
         case Thread_context_types.ParentMessageStateTypes.LOADING:
           {
-            return /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder.PlaceHolder, {
+            return /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder["default"], {
               className: "sendbird-thread-ui__parent-message-info placeholder-loading",
               type: ui_PlaceHolder.PlaceHolderTypes.LOADING,
               iconSize: "64px"
@@ -154,7 +152,7 @@ const useMemorizedParentMessageInfo = _ref => {
           }
         case Thread_context_types.ParentMessageStateTypes.INVALID:
           {
-            return /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder.PlaceHolder, {
+            return /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder["default"], {
               className: "sendbird-thread-ui__parent-message-info placeholder-invalid",
               type: ui_PlaceHolder.PlaceHolderTypes.WRONG,
               iconSize: "64px"
@@ -174,12 +172,10 @@ const useMemorizedParentMessageInfo = _ref => {
   }, [parentMessage, parentMessageState, renderParentMessageInfo, renderParentMessageInfoPlaceholder]);
 };
 
-const useMemorizedThreadList = _ref => {
-  let {
-    threadListState,
-    renderThreadListPlaceHolder
-  } = _ref;
-  return React.useMemo(() => {
+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);
@@ -187,7 +183,7 @@ const useMemorizedThreadList = _ref => {
       switch (threadListState) {
         case Thread_context_types.ThreadListStateTypes.LOADING:
           {
-            return /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder.PlaceHolder, {
+            return /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder["default"], {
               className: "sendbird-thread-ui__thread-list placeholder-loading",
               type: ui_PlaceHolder.PlaceHolderTypes.LOADING,
               iconSize: "64px"
@@ -195,7 +191,7 @@ const useMemorizedThreadList = _ref => {
           }
         case Thread_context_types.ThreadListStateTypes.INVALID:
           {
-            return /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder.PlaceHolder, {
+            return /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder["default"], {
               className: "sendbird-thread-ui__thread-list placeholder-invalid",
               type: ui_PlaceHolder.PlaceHolderTypes.WRONG,
               iconSize: "64px"
@@ -215,78 +211,68 @@ const useMemorizedThreadList = _ref => {
   }, [threadListState, renderThreadListPlaceHolder]);
 };
 
-const ThreadUI = _ref => {
-  var _stores$sdkStore, _stores$sdkStore$sdk, _stores$sdkStore$sdk$, _parentMessage$sender;
-  let {
-    renderHeader,
-    renderParentMessageInfo,
-    renderMessage,
-    renderMessageInput,
-    renderCustomSeparator,
-    renderParentMessageInfoPlaceholder,
-    renderThreadListPlaceHolder,
-    renderFileUploadIcon,
-    renderVoiceMessageIcon,
-    renderSendMessageIcon
-  } = _ref;
-  const {
-    stores
-  } = useSendbirdStateContext();
-  const currentUserId = stores === null || stores === void 0 ? void 0 : (_stores$sdkStore = stores.sdkStore) === null || _stores$sdkStore === void 0 ? void 0 : (_stores$sdkStore$sdk = _stores$sdkStore.sdk) === null || _stores$sdkStore$sdk === void 0 ? void 0 : (_stores$sdkStore$sdk$ = _stores$sdkStore$sdk.currentUser) === null || _stores$sdkStore$sdk$ === void 0 ? void 0 : _stores$sdkStore$sdk$.userId;
-  const {
-    stringSet
-  } = LocalizationContext.useLocalization();
-  const {
-    currentChannel,
-    allThreadMessages,
-    parentMessage,
-    parentMessageState,
-    threadListState,
-    hasMorePrev,
-    hasMoreNext,
-    fetchPrevThreads,
-    fetchNextThreads,
-    onHeaderActionClick,
-    onMoveToParentMessage
-  } = Thread_context.useThreadContext();
-  const replyCount = allThreadMessages.length;
-  const isByMe = currentUserId === (parentMessage === null || parentMessage === void 0 ? void 0 : (_parentMessage$sender = parentMessage.sender) === null || _parentMessage$sender === void 0 ? void 0 : _parentMessage$sender.userId);
-
+var ThreadUI = function (_a) {
+  var _b, _c, _d, _e;
+  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.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 _f = Thread_context.useThreadContext(),
+    currentChannel = _f.currentChannel,
+    allThreadMessages = _f.allThreadMessages,
+    parentMessage = _f.parentMessage,
+    parentMessageState = _f.parentMessageState,
+    threadListState = _f.threadListState,
+    hasMorePrev = _f.hasMorePrev,
+    hasMoreNext = _f.hasMoreNext,
+    fetchPrevThreads = _f.fetchPrevThreads,
+    fetchNextThreads = _f.fetchNextThreads,
+    onHeaderActionClick = _f.onHeaderActionClick,
+    onMoveToParentMessage = _f.onMoveToParentMessage;
+  var replyCount = allThreadMessages.length;
+  var isByMe = currentUserId === ((_e = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender) === null || _e === void 0 ? void 0 : _e.userId);
   // Memoized custom components
-  const MemorizedHeader = useMemorizedHeader({
-    renderHeader
+  var MemorizedHeader = useMemorizedHeader({
+    renderHeader: renderHeader
   });
-  const MemorizedParentMessageInfo = useMemorizedParentMessageInfo({
-    parentMessage,
-    parentMessageState,
-    renderParentMessageInfo,
-    renderParentMessageInfoPlaceholder // nil, loading, invalid
+  var MemorizedParentMessageInfo = useMemorizedParentMessageInfo({
+    parentMessage: parentMessage,
+    parentMessageState: parentMessageState,
+    renderParentMessageInfo: renderParentMessageInfo,
+    renderParentMessageInfoPlaceholder: renderParentMessageInfoPlaceholder
   });
-
-  const MemorizedThreadList = useMemorizedThreadList({
-    threadListState,
-    renderThreadListPlaceHolder
+  var MemorizedThreadList = useMemorizedThreadList({
+    threadListState: threadListState,
+    renderThreadListPlaceHolder: renderThreadListPlaceHolder
   });
-
   // scroll
-  const [scrollBottom, setScrollBottom] = React.useState(0);
-  const scrollRef = React.useRef(null);
-  const onScroll = e => {
-    var _scrollRef$current;
-    const element = e.target;
-    const {
-      scrollTop,
-      clientHeight,
-      scrollHeight
-    } = element;
-    const threadItemNodes = (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.querySelectorAll('.sendbird-thread-list-item');
-    const firstNode = threadItemNodes === null || threadItemNodes === void 0 ? void 0 : threadItemNodes[0];
-    if (Thread_context.isAboutSame(scrollTop, 0, 10) && hasMorePrev) {
-      fetchPrevThreads(messages => {
+  var _g = React.useState(0),
+    scrollBottom = _g[0],
+    setScrollBottom = _g[1];
+  var scrollRef = React.useRef(null);
+  var onScroll = function (e) {
+    var _a;
+    var element = e.target;
+    var scrollTop = element.scrollTop,
+      clientHeight = element.clientHeight,
+      scrollHeight = element.scrollHeight;
+    var threadItemNodes = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.sendbird-thread-list-item');
+    var firstNode = threadItemNodes === null || threadItemNodes === void 0 ? void 0 : threadItemNodes[0];
+    if (useSendMultipleFilesMessage.isAboutSame(scrollTop, 0, 10) && hasMorePrev) {
+      fetchPrevThreads(function (messages) {
+        var _a;
         if (messages) {
           try {
-            var _firstNode$scrollInto;
-            firstNode === null || firstNode === void 0 ? void 0 : (_firstNode$scrollInto = firstNode.scrollIntoView) === null || _firstNode$scrollInto === void 0 ? void 0 : _firstNode$scrollInto.call(firstNode, {
+            (_a = firstNode === null || firstNode === void 0 ? void 0 : firstNode.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(firstNode, {
               block: 'start',
               inline: 'nearest'
             });
@@ -296,23 +282,22 @@ const ThreadUI = _ref => {
         }
       });
     }
-    if (Thread_context.isAboutSame(clientHeight + scrollTop, scrollHeight, 10) && hasMoreNext) {
-      const scrollTop_ = scrollTop;
-      fetchNextThreads(messages => {
+    if (useSendMultipleFilesMessage.isAboutSame(clientHeight + scrollTop, scrollHeight, 10) && hasMoreNext) {
+      var scrollTop_1 = scrollTop;
+      fetchNextThreads(function (messages) {
         if (messages) {
           try {
-            element.scrollTop = scrollTop_;
-            scrollRef.current.scrollTop = scrollTop_;
+            element.scrollTop = scrollTop_1;
+            scrollRef.current.scrollTop = scrollTop_1;
           } catch (error) {
             //
           }
         }
       });
     }
-
     // save the lastest scroll bottom value
-    if (scrollRef !== null && scrollRef !== void 0 && scrollRef.current) {
-      const current = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
+    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);
     }
   };
@@ -322,7 +307,7 @@ const ThreadUI = _ref => {
     className: "sendbird-thread-ui__header",
     channelName: utils.getChannelTitle(currentChannel, currentUserId, stringSet),
     onActionIconClick: onHeaderActionClick,
-    onChannelNameClick: () => {
+    onChannelNameClick: function () {
       onMoveToParentMessage === null || onMoveToParentMessage === void 0 ? void 0 : onMoveToParentMessage({
         message: parentMessage,
         channel: currentChannel
@@ -342,9 +327,8 @@ const ThreadUI = _ref => {
   }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     type: ui_Label.LabelTypography.BODY_1,
     color: ui_Label.LabelColors.ONBACKGROUND_3
-  }, `${replyCount} ${replyCount > 1 ? stringSet.THREAD__THREAD_REPLIES : stringSet.THREAD__THREAD_REPLY}`)), MemorizedThreadList || /*#__PURE__*/React__default["default"].createElement(Thread_components_ThreadList, {
+  }, "".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,