@sendbird/uikit-react 3.5.0-rc.0 → 3.5.0

package/Thread/components/ThreadMessageInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadMessageInput.js","sources":["../../../src/smart-components/Thread/components/ThreadMessageInput/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport { Role } from '@sendbird/chat';\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';\n\nexport interface ThreadMessageInputProps {\n  className?: string;\n}\n\nconst ThreadMessageInput = (\n  props: ThreadMessageInputProps,\n  ref: React.MutableRefObject<any>,\n): React.ReactElement => {\n  const { className } = props;\n  const { config } = useSendbirdStateContext();\n  const { stringSet } = useLocalization();\n  const {\n    isMentionEnabled,\n    isOnline,\n    userMention,\n  } = config;\n  const {\n    currentChannel,\n    parentMessage,\n    sendMessage,\n    sendFileMessage,\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 displaySuggestedMentionList = isOnline\n    && isMentionEnabled\n    && mentionNickname.length > 0\n  // && !utils.isDisabledBecauseFrozen(channel)\n  // && !utils.isDisabledBecauseMuted(channel);\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  return (\n    <div className={`sendbird-thread-message-input ${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      <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        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    </div>\n  );\n}\n\nexport default React.forwardRef(ThreadMessageInput);\n"],"names":["ThreadMessageInput","props","ref","className","config","useSendbirdStateContext","stringSet","useLocalization","isMentionEnabled","isOnline","userMention","_a","useThreadContext","currentChannel","parentMessage","sendMessage","sendFileMessage","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","displaySuggestedMentionList","length","useEffect","maxMentionCount","filter","userId","i","indexOf","splice","React","concat","user","__spreadArray","users","maxSuggestionCount","url","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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"}
+{"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';\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 {\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 = propsDisabled\n    || isMuted\n    || (!(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 [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              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","propsDisabled","disabled","config","useSendbirdStateContext","stringSet","useLocalization","isMentionEnabled","isOnline","userMention","isVoiceMessageEnabled","logger","currentChannel","parentMessage","sendMessage","sendFileMessage","sendVoiceMessage","isMuted","isChannelFrozen","allThreadMessages","useThreadContext","messageInputRef","useRef","myRole","Role","OPERATOR","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","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","quoteMessage","endTyping","onFileUpload","file","onUserMentioned","onMentionStringChange","mentionText","onMentionedUserIdsUpdated","userIds","onKeyDown","e","key","MessageInputKeys","Enter","ArrowUp","ArrowDown","forwardRef"],"mappings":"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"}

package/Thread/components/ThreadUI.js

@@ -1,103 +1,127 @@
 import React__default, { useMemo, useState, useRef } from 'react';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import { u as useLocalization } from '../../LocalizationContext-60894e38.js';
-import { g as getChannelTitle } from '../../utils-d485030c.js';
-import { u as useThreadContext, i as isAboutSame } from '../../ThreadProvider-de5a7889.js';
+import { u as useLocalization } from '../../LocalizationContext-04c0c9dc.js';
+import { g as getChannelTitle } from '../../utils-77f7e8b2.js';
+import { u as useThreadContext, i as isAboutSame } from '../../ThreadProvider-203b94f3.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-fd15e3b0.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-95ac9232.js';
+import { P as PlaceHolder, a as PlaceHolderTypes } from '../../index-9cd77b08.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-e33f7f55.js';
+import { MessageProvider } from '../../Message/context.js';
 import '../../withSendbird.js';
-import '../../_rollupPluginBabelHelpers-ed44209e.js';
-import '../../stringSet-7ace5726.js';
-import '../../index-5e776774.js';
-import '../../index-eadca08d.js';
+import '../../_rollupPluginBabelHelpers-fb0e05a4.js';
+import '../../stringSet-e0ee1265.js';
+import '../../index-319984d0.js';
+import '../../index-4455855e.js';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../UserProfileContext-33a26cc4.js';
+import '../../UserProfileContext-c776d522.js';
 import 'prop-types';
-import '../../tslib.es6-d9fa3716.js';
 import '@sendbird/chat';
-import '../../topics-d390daf6.js';
+import '../../topics-70f569e9.js';
 import '@sendbird/chat/groupChannel';
-import '../../uuid-968941a0.js';
+import '../../uuid-92d22300.js';
 import '@sendbird/chat/message';
-import '../../RemoveMessageModal-b025d4a7.js';
+import '../../consts-c1baf70a.js';
+import '../../RemoveMessageModal-94e2bf9e.js';
 import '../../ui/Modal.js';
 import 'react-dom';
-import '../../index-d81c515b.js';
+import '../../index-9a4e0846.js';
 import '../../ui/Button.js';
 import '../../ui/Icon.js';
 import '../../ui/IconButton.js';
-import '../../MediaQueryContext-bcf72e28.js';
+import '../../MediaQueryContext-ff9dca2b.js';
 import './ParentMessageInfoItem.js';
-import '../../index-58e5d82d.js';
-import '../../ui/Word.js';
-import '../../ui/LinkLabel.js';
-import '../../ui/MentionLabel.js';
+import '../../index-cf859f03.js';
+import '../../ui/ImageRenderer.js';
+import '../../ui/TextButton.js';
+import '../../color-347926b6.js';
+import '../../ui/EmojiReactions.js';
+import '../../ui/ReactionBadge.js';
+import '../../ui/ReactionButton.js';
+import '../../useLongPress-1ab49410.js';
+import '../../utils-56cb7de5.js';
 import '../../ui/ContextMenu.js';
 import '../../ui/SortByRow.js';
+import '../../ui/BottomSheet.js';
+import '../../ui/UserListItem.js';
+import '../../ui/Avatar.js';
+import '../../ui/MutedAvatarOverlay.js';
+import '../../ui/Checkbox.js';
 import '../../ui/UserProfile.js';
 import '../../sendbirdSelectors.js';
-import '../../utils-30c326f7.js';
-import '../../ui/Avatar.js';
-import '../../ui/ImageRenderer.js';
-import '../../ui/TextButton.js';
-import '../../color-c39702d1.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-71a20863.js';
+import '../../VoiceRecorder/context.js';
+import '../../ui/PlaybackTime.js';
+import '../../ui/Loader.js';
+import '../../index-ebb62af1.js';
+import '../../index.module-6b7ed635.js';
+import '../../tokenize-1b053c86.js';
+import '../../ui/MentionLabel.js';
+import '../../ui/LinkLabel.js';
+import '../../ChannelProvider-6e8e99df.js';
+import '../../const-18dba7a4.js';
+import '../../compareIds-3a43c11b.js';
+import '../../resolvedReplyType-8776d777.js';
 import '../../Channel/components/SuggestedMentionList.js';
-import '../../ChannelProvider-c9db10c0.js';
-import '../../compareIds-063e5503.js';
-import '../../const-14919575.js';
-import '../../const-1510a671.js';
+import '../../const-c608f749.js';
 import '../../ui/FileViewer.js';
 import '../../ui/MessageItemMenu.js';
+import '../../types-77bbdda6.js';
 import '../../ui/MessageItemReactionMenu.js';
 import '../../ui/MessageInput.js';
-import 'react-dom/server';
-import '../../ui/MentionUserLabel.js';
+import 'dompurify';
+import '../../consts-fb4d475a.js';
+import '../../consts-7a169a0f.js';
+import '../../consts-6bca01c7.js';
+import '../../index-6663ce18.js';
+import '../../useDirtyGetMentions-f00f1f94.js';
 import './ThreadListItem.js';
 import '../../ui/DateSeparator.js';
-import '../../index-b8de16d6.js';
-import '../../ui/Loader.js';
-import '../../index-0fd24497.js';
-import '../../index-b19486f5.js';
-import '../../index-54843058.js';
+import '../../index-eabd1e7e.js';
+import '../../index-edf844f0.js';
+import '../../index-6c252d25.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-77d8f487.js';
+import '../../VoiceRecorder/useVoiceRecorder.js';
+import '../../index-7d71b26c.js';
 
-var useMemorizedHeader = function (_a) {
-  var renderHeader = _a.renderHeader;
-  return useMemo(function () {
+const useMemorizedHeader = _ref => {
+  let {
+    renderHeader
+  } = _ref;
+  return useMemo(() => {
     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 () {
+const useMemorizedParentMessageInfo = _ref => {
+  let {
+    parentMessage,
+    parentMessageState,
+    renderParentMessageInfo,
+    renderParentMessageInfoPlaceholder
+  } = _ref;
+  return useMemo(() => {
     if (parentMessageState === ParentMessageStateTypes.NIL || parentMessageState === ParentMessageStateTypes.LOADING || parentMessageState === ParentMessageStateTypes.INVALID) {
       if (typeof renderParentMessageInfoPlaceholder === 'function') {
         return renderParentMessageInfoPlaceholder(parentMessageState);
       }
-
       switch (parentMessageState) {
         case ParentMessageStateTypes.NIL:
           {
@@ -107,7 +131,6 @@ var useMemorizedParentMessageInfo = function (_a) {
               iconSize: "64px"
             });
           }
-
         case ParentMessageStateTypes.LOADING:
           {
             return /*#__PURE__*/React__default.createElement(PlaceHolder, {
@@ -116,7 +139,6 @@ var useMemorizedParentMessageInfo = function (_a) {
               iconSize: "64px"
             });
           }
-
         case ParentMessageStateTypes.INVALID:
           {
             return /*#__PURE__*/React__default.createElement(PlaceHolder, {
@@ -125,7 +147,6 @@ var useMemorizedParentMessageInfo = function (_a) {
               iconSize: "64px"
             });
           }
-
         default:
           {
             return null;
@@ -136,20 +157,20 @@ var useMemorizedParentMessageInfo = function (_a) {
         return renderParentMessageInfo();
       }
     }
-
     return null;
   }, [parentMessage, parentMessageState, renderParentMessageInfo, renderParentMessageInfoPlaceholder]);
 };
 
-var useMemorizedThreadList = function (_a) {
-  var threadListState = _a.threadListState,
-      renderThreadListPlaceHolder = _a.renderThreadListPlaceHolder;
-  return useMemo(function () {
+const useMemorizedThreadList = _ref => {
+  let {
+    threadListState,
+    renderThreadListPlaceHolder
+  } = _ref;
+  return useMemo(() => {
     if (threadListState === ThreadListStateTypes.NIL || threadListState === ThreadListStateTypes.LOADING || threadListState === ThreadListStateTypes.INVALID) {
       if (typeof renderThreadListPlaceHolder === 'function') {
         return renderThreadListPlaceHolder(threadListState);
       }
-
       switch (threadListState) {
         case ThreadListStateTypes.LOADING:
           {
@@ -159,7 +180,6 @@ var useMemorizedThreadList = function (_a) {
               iconSize: "64px"
             });
           }
-
         case ThreadListStateTypes.INVALID:
           {
             return /*#__PURE__*/React__default.createElement(PlaceHolder, {
@@ -168,124 +188,129 @@ var useMemorizedThreadList = function (_a) {
               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;
-  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;
+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
+  } = useLocalization();
+  const {
+    currentChannel,
+    allThreadMessages,
+    parentMessage,
+    parentMessageState,
+    threadListState,
+    hasMorePrev,
+    hasMoreNext,
+    fetchPrevThreads,
+    fetchNextThreads,
+    onHeaderActionClick,
+    onMoveToParentMessage
+  } = 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 _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
+  // Memoized custom components
+  const MemorizedHeader = useMemorizedHeader({
+    renderHeader
   });
-  var MemorizedParentMessageInfo = useMemorizedParentMessageInfo({
-    parentMessage: parentMessage,
-    parentMessageState: parentMessageState,
-    renderParentMessageInfo: renderParentMessageInfo,
-    renderParentMessageInfoPlaceholder: renderParentMessageInfoPlaceholder
+  const MemorizedParentMessageInfo = useMemorizedParentMessageInfo({
+    parentMessage,
+    parentMessageState,
+    renderParentMessageInfo,
+    renderParentMessageInfoPlaceholder // nil, loading, invalid
   });
-  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];
+  const MemorizedThreadList = useMemorizedThreadList({
+    threadListState,
+    renderThreadListPlaceHolder
+  });
 
+  // scroll
+  const [scrollBottom, setScrollBottom] = useState(0);
+  const scrollRef = 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 (isAboutSame(scrollTop, 0, 10) && hasMorePrev) {
-      fetchPrevThreads(function (messages) {
-        var _a;
-
+      fetchPrevThreads(messages => {
         if (messages) {
           try {
-            (_a = firstNode === null || firstNode === void 0 ? void 0 : firstNode.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(firstNode, {
+            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, {
               block: 'start',
               inline: 'nearest'
             });
-          } catch (error) {//
+          } catch (error) {
+            //
           }
         }
       });
     }
-
     if (isAboutSame(clientHeight + scrollTop, scrollHeight, 10) && hasMoreNext) {
-      var scrollTop_1 = scrollTop;
-      fetchNextThreads(function (messages) {
+      const scrollTop_ = scrollTop;
+      fetchNextThreads(messages => {
         if (messages) {
           try {
-            element.scrollTop = scrollTop_1;
-            scrollRef.current.scrollTop = scrollTop_1;
-          } catch (error) {//
+            element.scrollTop = scrollTop_;
+            scrollRef.current.scrollTop = scrollTop_;
+          } 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;
+    // 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;
       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({
+    onChannelNameClick: () => {
+      onMoveToParentMessage === null || onMoveToParentMessage === void 0 ? void 0 : onMoveToParentMessage({
         message: parentMessage,
         channel: currentChannel
       });
@@ -294,23 +319,29 @@ var ThreadUI = function (_a) {
     className: "sendbird-thread-ui--scroll",
     ref: scrollRef,
     onScroll: onScroll
+  }, /*#__PURE__*/React__default.createElement(MessageProvider, {
+    message: parentMessage,
+    isByMe: isByMe
   }, MemorizedParentMessageInfo || /*#__PURE__*/React__default.createElement(ParentMessageInfo, {
     className: "sendbird-thread-ui__parent-message-info"
-  }), replyCount > 0 && /*#__PURE__*/React__default.createElement("div", {
+  })), 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, {
+  }, `${replyCount} ${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"
-  })));
+  })), (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 };