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

package/Channel/components/MessageInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageInput.js","sources":["../../../src/modules/Channel/components/MessageInput/index.tsx"],"sourcesContent":["import React, { useState, useContext, useEffect } from 'react';\n\nimport './message-input.scss';\nimport * as utils from '../../context/utils';\n\nimport type { Nullable } from '../../../../types';\nimport MessageInput from '../../../../ui/MessageInput';\nimport QuoteMessageInput from '../../../../ui/QuoteMessageInput';\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\nimport { useChannelContext } from '../../context/ChannelProvider';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\nimport SuggestedMentionList from '../SuggestedMentionList';\nimport { MessageInputKeys } from '../../../../ui/MessageInput/const';\nimport VoiceMessageInputWrapper from './VoiceMessageInputWrapper';\nimport { useDirtyGetMentions } from '../../../Message/hooks/useDirtyGetMentions';\nimport { useMediaQueryContext } from '../../../../lib/MediaQueryContext';\nimport { useHandleUploadFiles } from './useHandleUploadFiles';\n\nexport type MessageInputWrapperProps = {\n  value?: string;\n  disabled?: boolean;\n  renderFileUploadIcon?: () => React.ReactElement;\n  renderVoiceMessageIcon?: () => React.ReactElement;\n  renderSendMessageIcon?: () => React.ReactElement;\n};\n\nconst MessageInputWrapper = (\n  props: MessageInputWrapperProps,\n  ref: React.MutableRefObject<any>,\n): Nullable<JSX.Element> => {\n  const {\n    value,\n    renderFileUploadIcon,\n    renderVoiceMessageIcon,\n    renderSendMessageIcon,\n  } = props;\n  const propDisabled = props.disabled;\n  const {\n    currentGroupChannel,\n    initialized,\n    quoteMessage,\n    sendMessage,\n    sendFileMessage,\n    sendVoiceMessage,\n    sendMultipleFilesMessage,\n    setQuoteMessage,\n    messageInputRef,\n    renderUserMentionItem,\n  } = useChannelContext();\n  const globalStore = useSendbirdStateContext();\n  const { isMobile } = useMediaQueryContext();\n  const channel = currentGroupChannel;\n\n  const {\n    isOnline,\n    isMentionEnabled,\n    userMention,\n    isVoiceMessageEnabled,\n    logger,\n    isMultipleFilesMessageEnabled,\n  } = globalStore.config;\n  const maxUserMentionCount = userMention?.maxMentionCount || 10;\n  const maxUserSuggestionCount = userMention?.maxSuggestionCount || 15;\n\n  const { stringSet } = useContext(LocalizationContext);\n  const [mentionNickname, setMentionNickname] = useState('');\n  // todo: set type\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 disabled = propDisabled\n    || !initialized\n    || utils.isDisabledBecauseFrozen(channel)\n    || utils.isDisabledBecauseMuted(channel)\n    || !isOnline;\n  const isOperator = utils.isOperator(channel);\n  const isBroadcast = channel?.isBroadcast;\n\n  const displaySuggestedMentionList = isOnline\n    && isMentionEnabled\n    && mentionNickname.length > 0\n    && !utils.isDisabledBecauseFrozen(channel)\n    && !utils.isDisabledBecauseMuted(channel)\n    && !isBroadcast;\n\n  // Reset when channel changes\n  useEffect(() => {\n    setMentionNickname('');\n    setMentionedUsers([]);\n    setMentionedUserIds([]);\n    setSelectedUser(null);\n    setMentionSuggestedUsers([]);\n    setMessageInputEvent(null);\n    setShowVoiceMessageInput(false);\n  }, [channel?.url]);\n\n  const mentionNodes = useDirtyGetMentions({ ref: ref || messageInputRef }, { logger });\n  const ableMention = mentionNodes?.length < maxUserMentionCount;\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  // MFM\n  const [handleUploadFiles] = useHandleUploadFiles({\n    sendFileMessage,\n    sendMultipleFilesMessage,\n    quoteMessage,\n  }, {\n    logger,\n  });\n\n  // broadcast channel + not operator\n  if (isBroadcast && !isOperator) {\n    return null;\n  }\n  // other conditions\n  return (\n    <div className={`sendbird-message-input-wrapper${showVoiceMessageInput ? '--voice-message' : ''}`}>\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={maxUserMentionCount}\n            maxSuggestionCount={maxUserSuggestionCount}\n          />\n        )\n      }\n      {quoteMessage && (\n        <div className=\"sendbird-message-input-wrapper__quote-message-input\">\n          <QuoteMessageInput\n            replyingMessage={quoteMessage}\n            onClose={() => setQuoteMessage(null)}\n          />\n        </div>\n      )}\n      {\n        showVoiceMessageInput\n          ? (\n            <VoiceMessageInputWrapper\n              channel={channel}\n              onSubmitClick={(recordedFile, duration) => {\n                sendVoiceMessage(recordedFile, duration, quoteMessage);\n                setQuoteMessage(null);\n                setShowVoiceMessageInput(false);\n              }}\n              onCancelClick={() => {\n                setShowVoiceMessageInput(false);\n              }}\n            />\n          )\n          : (\n            <MessageInput\n              className=\"sendbird-message-input-wrapper__message-input\"\n              value={value}\n              channelUrl={channel?.url}\n              mentionSelectedUser={selectedUser}\n              isMentionEnabled={isMentionEnabled}\n              isVoiceMessageEnabled={isVoiceMessageEnabled}\n              isSelectingMultipleFilesEnabled={isMultipleFilesMessageEnabled}\n              onVoiceMessageIconClick={() => {\n                setShowVoiceMessageInput(true);\n              }}\n              setMentionedUsers={setMentionedUsers}\n              channel={channel}\n              placeholder={\n                (quoteMessage && stringSet.MESSAGE_INPUT__QUOTE_REPLY__PLACE_HOLDER)\n                || (utils.isDisabledBecauseFrozen(channel) && stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED)\n                || (utils.isDisabledBecauseMuted(channel) && (\n                  isMobile ? stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED_SHORT : stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED\n                ))\n              }\n              ref={ref || messageInputRef}\n              disabled={disabled}\n              renderFileUploadIcon={renderFileUploadIcon}\n              renderSendMessageIcon={renderSendMessageIcon}\n              renderVoiceMessageIcon={renderVoiceMessageIcon}\n              onStartTyping={() => {\n                channel?.startTyping();\n              }}\n              onSendMessage={({ message, mentionTemplate }) => {\n                sendMessage({\n                  message,\n                  quoteMessage,\n                  mentionedUsers,\n                  mentionTemplate,\n                });\n                setMentionNickname('');\n                setMentionedUsers([]);\n                setQuoteMessage(null);\n                channel?.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(MessageInputWrapper);\n"],"names":["MessageInputWrapper","props","ref","value","renderFileUploadIcon","renderVoiceMessageIcon","renderSendMessageIcon","propDisabled","disabled","currentGroupChannel","initialized","quoteMessage","sendMessage","sendFileMessage","sendVoiceMessage","sendMultipleFilesMessage","setQuoteMessage","messageInputRef","renderUserMentionItem","useChannelContext","globalStore","useSendbirdStateContext","isMobile","useMediaQueryContext","channel","isOnline","isMentionEnabled","userMention","isVoiceMessageEnabled","logger","isMultipleFilesMessageEnabled","config","maxUserMentionCount","maxMentionCount","maxUserSuggestionCount","maxSuggestionCount","stringSet","useContext","LocalizationContext","mentionNickname","setMentionNickname","useState","mentionedUsers","setMentionedUsers","mentionedUserIds","setMentionedUserIds","selectedUser","setSelectedUser","mentionSuggestedUsers","setMentionSuggestedUsers","messageInputEvent","setMessageInputEvent","showVoiceMessageInput","setShowVoiceMessageInput","utils","isOperator","isBroadcast","displaySuggestedMentionList","length","useEffect","url","mentionNodes","useDirtyGetMentions","ableMention","filter","_ref","userId","i","indexOf","splice","handleUploadFiles","useHandleUploadFiles","React","createElement","className","SuggestedMentionList","targetNickname","inputEvent","onUserItemClick","user","onFocusItemChange","onFetchUsers","users","ableAddMention","QuoteMessageInput","replyingMessage","onClose","VoiceMessageInputWrapper","onSubmitClick","recordedFile","duration","onCancelClick","MessageInput","channelUrl","mentionSelectedUser","isSelectingMultipleFilesEnabled","onVoiceMessageIconClick","placeholder","MESSAGE_INPUT__QUOTE_REPLY__PLACE_HOLDER","MESSAGE_INPUT__PLACE_HOLDER__DISABLED","MESSAGE_INPUT__PLACE_HOLDER__MUTED_SHORT","MESSAGE_INPUT__PLACE_HOLDER__MUTED","onStartTyping","startTyping","onSendMessage","_ref2","_channel$endTyping","message","mentionTemplate","endTyping","call","onFileUpload","onUserMentioned","onMentionStringChange","mentionText","onMentionedUserIdsUpdated","userIds","onKeyDown","e","key","MessageInputKeys","Enter","ArrowUp","ArrowDown","forwardRef"],"mappings":"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"}
+{"version":3,"file":"MessageInput.js","sources":["../../../src/modules/Channel/components/MessageInput/index.tsx"],"sourcesContent":["import React, { useState, useContext, useEffect } from 'react';\n\nimport './message-input.scss';\nimport * as utils from '../../context/utils';\n\nimport type { Nullable } from '../../../../types';\nimport MessageInput from '../../../../ui/MessageInput';\nimport QuoteMessageInput from '../../../../ui/QuoteMessageInput';\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\nimport { useChannelContext } from '../../context/ChannelProvider';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\nimport SuggestedMentionList from '../SuggestedMentionList';\nimport { MessageInputKeys } from '../../../../ui/MessageInput/const';\nimport VoiceMessageInputWrapper from './VoiceMessageInputWrapper';\nimport { useDirtyGetMentions } from '../../../Message/hooks/useDirtyGetMentions';\nimport { useMediaQueryContext } from '../../../../lib/MediaQueryContext';\nimport { useHandleUploadFiles } from './useHandleUploadFiles';\n\nexport type MessageInputWrapperProps = {\n  value?: string;\n  disabled?: boolean;\n  renderFileUploadIcon?: () => React.ReactElement;\n  renderVoiceMessageIcon?: () => React.ReactElement;\n  renderSendMessageIcon?: () => React.ReactElement;\n};\n\nconst MessageInputWrapper = (\n  props: MessageInputWrapperProps,\n  ref: React.MutableRefObject<any>,\n): Nullable<JSX.Element> => {\n  const {\n    value,\n    renderFileUploadIcon,\n    renderVoiceMessageIcon,\n    renderSendMessageIcon,\n  } = props;\n  const propDisabled = props.disabled;\n  const channelContext = useChannelContext();\n  const {\n    currentGroupChannel,\n    initialized,\n    quoteMessage,\n    sendMessage,\n    sendFileMessage,\n    sendVoiceMessage,\n    sendMultipleFilesMessage,\n    setQuoteMessage,\n    messageInputRef,\n    renderUserMentionItem,\n  } = channelContext;\n  const globalStore = useSendbirdStateContext();\n  const { isMobile } = useMediaQueryContext();\n  const channel = currentGroupChannel;\n\n  const {\n    isOnline,\n    isMentionEnabled,\n    userMention,\n    isVoiceMessageEnabled,\n    logger,\n  } = globalStore.config;\n  const isMultipleFilesMessageEnabled = (\n    channelContext.isMultipleFilesMessageEnabled\n    ?? globalStore.config.isMultipleFilesMessageEnabled\n  );\n  const maxUserMentionCount = userMention?.maxMentionCount || 10;\n  const maxUserSuggestionCount = userMention?.maxSuggestionCount || 15;\n\n  const { stringSet } = useContext(LocalizationContext);\n  const [mentionNickname, setMentionNickname] = useState('');\n  // todo: set type\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 disabled = propDisabled\n    || !initialized\n    || utils.isDisabledBecauseFrozen(channel)\n    || utils.isDisabledBecauseMuted(channel)\n    || !isOnline;\n  const isOperator = utils.isOperator(channel);\n  const isBroadcast = channel?.isBroadcast;\n\n  const displaySuggestedMentionList = isOnline\n    && isMentionEnabled\n    && mentionNickname.length > 0\n    && !utils.isDisabledBecauseFrozen(channel)\n    && !utils.isDisabledBecauseMuted(channel)\n    && !isBroadcast;\n\n  // Reset when channel changes\n  useEffect(() => {\n    setMentionNickname('');\n    setMentionedUsers([]);\n    setMentionedUserIds([]);\n    setSelectedUser(null);\n    setMentionSuggestedUsers([]);\n    setMessageInputEvent(null);\n    setShowVoiceMessageInput(false);\n  }, [channel?.url]);\n\n  const mentionNodes = useDirtyGetMentions({ ref: ref || messageInputRef }, { logger });\n  const ableMention = mentionNodes?.length < maxUserMentionCount;\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  // MFM\n  const [handleUploadFiles] = useHandleUploadFiles({\n    sendFileMessage,\n    sendMultipleFilesMessage,\n    quoteMessage,\n  }, {\n    logger,\n  });\n\n  // broadcast channel + not operator\n  if (isBroadcast && !isOperator) {\n    return null;\n  }\n  // other conditions\n  return (\n    <div className={`sendbird-message-input-wrapper${showVoiceMessageInput ? '--voice-message' : ''}`}>\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={maxUserMentionCount}\n            maxSuggestionCount={maxUserSuggestionCount}\n          />\n        )\n      }\n      {quoteMessage && (\n        <div className=\"sendbird-message-input-wrapper__quote-message-input\">\n          <QuoteMessageInput\n            replyingMessage={quoteMessage}\n            onClose={() => setQuoteMessage(null)}\n          />\n        </div>\n      )}\n      {\n        showVoiceMessageInput\n          ? (\n            <VoiceMessageInputWrapper\n              channel={channel}\n              onSubmitClick={(recordedFile, duration) => {\n                sendVoiceMessage(recordedFile, duration, quoteMessage);\n                setQuoteMessage(null);\n                setShowVoiceMessageInput(false);\n              }}\n              onCancelClick={() => {\n                setShowVoiceMessageInput(false);\n              }}\n            />\n          )\n          : (\n            <MessageInput\n              className=\"sendbird-message-input-wrapper__message-input\"\n              value={value}\n              channelUrl={channel?.url}\n              mentionSelectedUser={selectedUser}\n              isMentionEnabled={isMentionEnabled}\n              isVoiceMessageEnabled={isVoiceMessageEnabled}\n              isSelectingMultipleFilesEnabled={isMultipleFilesMessageEnabled}\n              onVoiceMessageIconClick={() => {\n                setShowVoiceMessageInput(true);\n              }}\n              setMentionedUsers={setMentionedUsers}\n              channel={channel}\n              placeholder={\n                (quoteMessage && stringSet.MESSAGE_INPUT__QUOTE_REPLY__PLACE_HOLDER)\n                || (utils.isDisabledBecauseFrozen(channel) && stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED)\n                || (utils.isDisabledBecauseMuted(channel) && (\n                  isMobile ? stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED_SHORT : stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED\n                ))\n              }\n              ref={ref || messageInputRef}\n              disabled={disabled}\n              renderFileUploadIcon={renderFileUploadIcon}\n              renderSendMessageIcon={renderSendMessageIcon}\n              renderVoiceMessageIcon={renderVoiceMessageIcon}\n              onStartTyping={() => {\n                channel?.startTyping();\n              }}\n              onSendMessage={({ message, mentionTemplate }) => {\n                sendMessage({\n                  message,\n                  quoteMessage,\n                  mentionedUsers,\n                  mentionTemplate,\n                });\n                setMentionNickname('');\n                setMentionedUsers([]);\n                setQuoteMessage(null);\n                channel?.endTyping?.();\n              }}\n              onFileUpload={(fileList: FileList) => {\n                handleUploadFiles(fileList);\n                setQuoteMessage(null);\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(MessageInputWrapper);\n"],"names":["MessageInputWrapper","props","ref","value","renderFileUploadIcon","renderVoiceMessageIcon","renderSendMessageIcon","propDisabled","disabled","channelContext","useChannelContext","currentGroupChannel","initialized","quoteMessage","sendMessage","sendFileMessage","sendVoiceMessage","sendMultipleFilesMessage","setQuoteMessage","messageInputRef","renderUserMentionItem","globalStore","useSendbirdStateContext","isMobile","useMediaQueryContext","channel","_b","config","isOnline","isMentionEnabled","userMention","isVoiceMessageEnabled","logger","isMultipleFilesMessageEnabled","_a","maxUserMentionCount","maxMentionCount","maxUserSuggestionCount","maxSuggestionCount","stringSet","useContext","LocalizationContext","_c","useState","mentionNickname","setMentionNickname","_d","mentionedUsers","setMentionedUsers","_e","mentionedUserIds","setMentionedUserIds","_f","selectedUser","setSelectedUser","_g","mentionSuggestedUsers","setMentionSuggestedUsers","_h","messageInputEvent","setMessageInputEvent","_j","showVoiceMessageInput","setShowVoiceMessageInput","utils","isOperator","isBroadcast","displaySuggestedMentionList","length","useEffect","url","mentionNodes","useDirtyGetMentions","ableMention","filter","userId","i","indexOf","splice","handleUploadFiles","useHandleUploadFiles","React","createElement","className","concat","SuggestedMentionList","targetNickname","inputEvent","onUserItemClick","user","__spreadArray","onFocusItemChange","onFetchUsers","users","ableAddMention","QuoteMessageInput","replyingMessage","onClose","VoiceMessageInputWrapper","onSubmitClick","recordedFile","duration","onCancelClick","MessageInput","channelUrl","mentionSelectedUser","isSelectingMultipleFilesEnabled","onVoiceMessageIconClick","placeholder","MESSAGE_INPUT__QUOTE_REPLY__PLACE_HOLDER","MESSAGE_INPUT__PLACE_HOLDER__DISABLED","MESSAGE_INPUT__PLACE_HOLDER__MUTED_SHORT","MESSAGE_INPUT__PLACE_HOLDER__MUTED","onStartTyping","startTyping","onSendMessage","message","mentionTemplate","endTyping","onFileUpload","fileList","onUserMentioned","onMentionStringChange","mentionText","onMentionedUserIdsUpdated","userIds","onKeyDown","e","key","MessageInputKeys","Enter","ArrowUp","ArrowDown","forwardRef"],"mappings":"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"}

package/Channel/components/MessageList.js

@@ -1,74 +1,76 @@
 import React__default, { useState, useEffect } from 'react';
-import { u as useChannelContext } from '../../ChannelProvider-9de00431.js';
-import { P as PlaceHolder, a as PlaceHolderTypes } from '../../index-128523eb.js';
+import { u as useChannelContext } from '../../ChannelProvider-7f6fd1f8.js';
+import PlaceHolder, { PlaceHolderTypes } from '../../ui/PlaceHolder.js';
 import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
 import Message from './Message.js';
-import { C as isAboutSame } from '../../utils-0c22998a.js';
+import { i as isAboutSame, s as scrollIntoLast } from '../../utils-40040f8e.js';
 import { getMessagePartsInfo } from '../utils/getMessagePartsInfo.js';
 import UnreadCount from './UnreadCount.js';
 import FrozenNotification from './FrozenNotification.js';
-import { S as SCROLL_BUFFER } from '../../consts-691a3935.js';
-import useSendbirdStateContext from '../../useSendbirdStateContext.js';
+import { S as SCROLL_BUFFER } from '../../consts-aa64aca8.js';
+import { useSendbirdStateContext } from '../../useSendbirdStateContext.js';
 import { MessageProvider } from '../../Message/context.js';
-import { u as useDebounce, a as useHandleOnScrollCallback } from '../../index-b22c4150.js';
-import '../../UserProfileContext-4ae968eb.js';
-import 'prop-types';
-import '../../const-711048c3.js';
-import '../../_rollupPluginBabelHelpers-50c9576f.js';
-import '../../index-daa3ae67.js';
-import '../../index-7700a436.js';
-import '../../compareIds-8ed6e36a.js';
-import '../../index-5d6a0f12.js';
+import { u as useDebounce, a as useHandleOnScrollCallback } from '../../index-1969ccd8.js';
+import '../../UserProfileContext-26e71f9a.js';
+import '../../const-e3326913.js';
+import '../../tslib.es6-0c779aab.js';
+import '../../index-c81fd6ec.js';
+import '../../index-d3f61405.js';
+import '@sendbird/chat/message';
+import '../../index-c6095960.js';
+import '../../useSendMultipleFilesMessage-4489a0f6.js';
+import '../../pubSub/topics.js';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../index.module-60af77d3.js';
+import '../../compareIds-b56b02f1.js';
+import '../../index-fc1642cb.js';
 import '@sendbird/chat/groupChannel';
-import '../../uuid-16373bba.js';
-import '@sendbird/chat/message';
-import '../../topics-5659403d.js';
-import '../../resolvedReplyType-1a128514.js';
-import '../../useSendMultipleFilesMessage-a3a2c84b.js';
-import '../../LocalizationContext-2463058b.js';
-import '../../stringSet-2814bf17.js';
-import '../../index-aa520474.js';
+import '../../uuid-3c77ef7b.js';
+import '../../_rollupPluginBabelHelpers-07dcbc2b.js';
+import '../../resolvedReplyType-0532593c.js';
+import '../../LocalizationContext-d18a86d8.js';
+import '../../stringSet-1106c8ec.js';
+import '../../index-12103973.js';
+import 'prop-types';
 import '../../ui/Loader.js';
 import './SuggestedMentionList.js';
 import '../../ui/Avatar.js';
 import '../../ui/ImageRenderer.js';
-import '../../const-74ec9eb4.js';
-import '../../ThreadProvider-9a3b145f.js';
+import '../../const-4bc3721f.js';
+import '../../Thread/context.js';
 import '../../Thread/context/types.js';
 import '@sendbird/chat';
 import '../../ui/DateSeparator.js';
-import '../../color-b7f211a8.js';
+import '../../color-1383d4ab.js';
 import '../../ui/MessageInput.js';
 import '../../ui/IconButton.js';
 import '../../ui/Button.js';
-import '../../index-8a01c364.js';
+import '../../types-4ffc52f6.js';
+import '../../index-40447645.js';
 import 'dompurify';
-import '../../consts-675764c9.js';
-import '../../consts-eb77e905.js';
-import '../../consts-6ee24012.js';
-import '../../tokenize-4b153552.js';
+import '../../consts-7f4d53a3.js';
+import '../../consts-f0ba9b80.js';
+import '../../consts-833420ed.js';
+import '../../tokenize-d17bf862.js';
 import '../../ui/MessageContent.js';
 import '../../ui/UserProfile.js';
 import '../../sendbirdSelectors.js';
-import '../../utils-407da489.js';
-import '../../index-7946293f.js';
-import '../../index-5cb32ab5.js';
-import '../../index-13401b87.js';
+import '../../utils-74c161a0.js';
+import '../../index-942c5fa2.js';
+import '../../index-dc1827ea.js';
+import '../../index-1432c287.js';
 import '../../ui/MessageItemMenu.js';
 import '../../ui/ContextMenu.js';
 import 'react-dom';
 import '../../ui/SortByRow.js';
-import '../../types-89092633.js';
+import '../../types-50e412d8.js';
 import '../../ui/MessageItemReactionMenu.js';
 import '../../ui/ReactionButton.js';
-import '../../useLongPress-5e1ad951.js';
-import '../../MediaQueryContext-e3429d12.js';
+import '../../useLongPress-322bb6a3.js';
+import '../../MediaQueryContext-3eeeec4f.js';
 import '../../ui/EmojiReactions.js';
 import '../../ui/ReactionBadge.js';
 import '../../ui/BottomSheet.js';
-import '../../index-98887e8d.js';
+import '../../index-c7ed4aef.js';
 import '../../ui/UserListItem.js';
 import '../../ui/MutedAvatarOverlay.js';
 import '../../ui/Checkbox.js';
@@ -76,65 +78,65 @@ import '../../ui/Tooltip.js';
 import '../../ui/TooltipWrapper.js';
 import '../../ui/AdminMessage.js';
 import '../../ui/TextMessageItemBody.js';
-import '../../index-ae7ef8cf.js';
+import '../../index-3d508585.js';
 import '../../ui/MentionLabel.js';
 import '../../ui/LinkLabel.js';
 import '../../ui/FileMessageItemBody.js';
 import '../../ui/TextButton.js';
 import '../../ui/ThumbnailMessageItemBody.js';
-import '../../utils-b97d5113.js';
+import '../../utils-e98a7f8c.js';
 import '../../ui/OGMessageItemBody.js';
 import '../../ui/UnknownMessageItemBody.js';
 import '../../ui/QuoteMessage.js';
-import '../../index-b25ffa7e.js';
+import '../../index-eec0ce47.js';
 import '../../ui/ThreadReplies.js';
 import '../../ui/VoiceMessageItemBody.js';
 import '../../ui/ProgressBar.js';
 import '../../VoicePlayer/useVoicePlayer.js';
-import '../../index-e15f6b6a.js';
+import '../../index-124a5766.js';
 import '../../VoiceRecorder/context.js';
 import '../../ui/Modal.js';
 import '../../withSendbird.js';
 import '../../ui/PlaybackTime.js';
-import '../../index-7b7478f5.js';
-import '../../index-c421b228.js';
+import '../../useStatefulFileInfoList-dd95f949.js';
+import '../../index-7a1085b6.js';
 import './FileViewer.js';
 import './RemoveMessageModal.js';
-import '../../stringFormatterUtils-dbad592d.js';
+import '../../stringFormatterUtils-444f6f4c.js';
 import '../../Message/hooks/useDirtyGetMentions.js';
 import '../utils/compareMessagesForGrouping.js';
 
-const DELAY = 500;
-function useSetScrollToBottom(_ref) {
-  let {
-    loading
-  } = _ref;
-  const [scrollBottom, setScrollBottom] = useState(0);
-  useEffect(() => {
+var DELAY = 500;
+function useSetScrollToBottom(_a) {
+  var loading = _a.loading;
+  var _b = useState(0),
+    scrollBottom = _b[0],
+    setScrollBottom = _b[1];
+  useEffect(function () {
     if (loading) {
       setScrollBottom(0);
     }
   }, [loading]);
-  const scrollCb = e => {
-    const element = e.target;
+  var scrollCb = function (e) {
+    var element = e.target;
     try {
       setScrollBottom(element.scrollHeight - element.scrollTop - element.offsetHeight);
-    } catch (_unused) {
+    } catch (_a) {
       //
     }
   };
   return {
-    scrollBottom,
+    scrollBottom: scrollBottom,
     scrollToBottomHandler: useDebounce(scrollCb, DELAY)
   };
 }
 
 function useScrollBehavior() {
-  const {
-    scrollRef,
-    scrollBehavior = 'auto'
-  } = useChannelContext();
-  useEffect(() => {
+  var _a = useChannelContext(),
+    scrollRef = _a.scrollRef,
+    _b = _a.scrollBehavior,
+    scrollBehavior = _b === void 0 ? 'auto' : _b;
+  useEffect(function () {
     if (scrollRef.current) {
       scrollRef.current.style.scrollBehavior = scrollBehavior;
     }
@@ -142,57 +144,69 @@ function useScrollBehavior() {
   return null;
 }
 
-const SCROLL_BOTTOM_PADDING = 50;
-const MessageList = _ref => {
-  let {
-    className = '',
-    renderMessage,
-    renderPlaceholderEmpty,
-    renderCustomSeparator,
-    renderPlaceholderLoader
-  } = _ref;
-  const {
-    allMessages,
-    localMessages,
-    hasMorePrev,
-    hasMoreNext,
-    setInitialTimeStamp,
-    setAnimatedMessageId,
-    setHighLightedMessageId,
-    isMessageGroupingEnabled,
-    scrollRef,
-    onScrollCallback,
-    onScrollDownCallback,
-    messagesDispatcher,
-    messageActionTypes,
-    currentGroupChannel,
-    disableMarkAsRead,
-    filterMessageList,
-    replyType,
-    loading,
-    isScrolled,
-    unreadSince
-  } = useChannelContext();
-  const store = useSendbirdStateContext();
-  const allMessagesFiltered = typeof filterMessageList === 'function' ? allMessages.filter(filterMessageList) : allMessages;
-  const markAsReadScheduler = store.config.markAsReadScheduler;
+var SCROLL_BOTTOM_PADDING = 50;
+var MessageList = function (_a) {
+  var _b = _a.className,
+    className = _b === void 0 ? '' : _b,
+    renderMessage = _a.renderMessage,
+    renderPlaceholderEmpty = _a.renderPlaceholderEmpty,
+    renderCustomSeparator = _a.renderCustomSeparator,
+    renderPlaceholderLoader = _a.renderPlaceholderLoader;
+  var _c = useChannelContext(),
+    allMessages = _c.allMessages,
+    localMessages = _c.localMessages,
+    hasMorePrev = _c.hasMorePrev,
+    hasMoreNext = _c.hasMoreNext,
+    setInitialTimeStamp = _c.setInitialTimeStamp,
+    setAnimatedMessageId = _c.setAnimatedMessageId,
+    setHighLightedMessageId = _c.setHighLightedMessageId,
+    isMessageGroupingEnabled = _c.isMessageGroupingEnabled,
+    scrollRef = _c.scrollRef,
+    onScrollCallback = _c.onScrollCallback,
+    onScrollDownCallback = _c.onScrollDownCallback,
+    messagesDispatcher = _c.messagesDispatcher,
+    messageActionTypes = _c.messageActionTypes,
+    currentGroupChannel = _c.currentGroupChannel,
+    disableMarkAsRead = _c.disableMarkAsRead,
+    filterMessageList = _c.filterMessageList,
+    replyType = _c.replyType,
+    loading = _c.loading,
+    isScrolled = _c.isScrolled,
+    unreadSince = _c.unreadSince;
+  var store = useSendbirdStateContext();
+  var allMessagesFiltered = typeof filterMessageList === 'function' ? allMessages.filter(filterMessageList) : allMessages;
+  var markAsReadScheduler = store.config.markAsReadScheduler;
   useScrollBehavior();
-  const onScroll = () => {
-    const element = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
+  var onScroll = function () {
+    var element = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
     if (element == null) {
       return;
     }
-    const {
-      scrollTop,
-      clientHeight,
-      scrollHeight
-    } = element;
+    var scrollTop = element.scrollTop,
+      clientHeight = element.clientHeight,
+      scrollHeight = element.scrollHeight;
     if (isAboutSame(scrollTop, 0, SCROLL_BUFFER)) {
-      onScrollCallback(messages => {
-      });
+      onScrollCallback();
     }
     if (isAboutSame(clientHeight + scrollTop, scrollHeight, SCROLL_BUFFER) && hasMoreNext) {
-      onScrollDownCallback(_ref2 => {
+      onScrollDownCallback(function (_a) {
+        var messages = _a[0];
+        if (messages) {
+          try {
+            setTimeout(function () {
+              return scrollIntoLast(0, scrollRef);
+            },
+            /**
+             * Rendering MFM takes long time so we need this.
+             * But later we should find better solution.
+             */
+            1000);
+            // element.scrollTop = scrollHeight - clientHeight;
+            // scrollRef.current.scrollTop = scrollHeight - clientHeight;
+          } catch (error) {
+            //
+          }
+        }
       });
     }
     if (!disableMarkAsRead && isAboutSame(clientHeight + scrollTop, scrollHeight, SCROLL_BUFFER) && !!currentGroupChannel) {
@@ -205,45 +219,44 @@ const MessageList = _ref => {
       markAsReadScheduler.push(currentGroupChannel);
     }
   };
-  const onClickScrollBot = () => {
-    var _scrollRef$current;
+  var onClickScrollBot = function () {
+    var _a, _b, _c, _d, _e;
     setInitialTimeStamp === null || setInitialTimeStamp === void 0 ? void 0 : setInitialTimeStamp(null);
     setAnimatedMessageId === null || setAnimatedMessageId === void 0 ? void 0 : setAnimatedMessageId(null);
     setHighLightedMessageId === null || setHighLightedMessageId === void 0 ? void 0 : setHighLightedMessageId(null);
-    if ((scrollRef === null || scrollRef === void 0 ? void 0 : (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollTop) > -1) {
-      var _scrollRef$current$sc, _scrollRef$current2, _scrollRef$current$of, _scrollRef$current3;
-      scrollRef.current.scrollTop = ((_scrollRef$current$sc = scrollRef === null || scrollRef === void 0 ? void 0 : (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.scrollHeight) !== null && _scrollRef$current$sc !== void 0 ? _scrollRef$current$sc : 0) - ((_scrollRef$current$of = scrollRef === null || scrollRef === void 0 ? void 0 : (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 ? void 0 : _scrollRef$current3.offsetHeight) !== null && _scrollRef$current$of !== void 0 ? _scrollRef$current$of : 0);
+    if (((_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) > -1) {
+      scrollRef.current.scrollTop = ((_c = (_b = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) !== null && _c !== void 0 ? _c : 0) - ((_e = (_d = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _d === void 0 ? void 0 : _d.offsetHeight) !== null && _e !== void 0 ? _e : 0);
     }
   };
-
   /**
    * 1. Move the messsage list scroll
    *    when each message's height is changed by `reactions` OR `showEdit`
    * 2. Keep the scrollBottom value after fetching new message list
    */
-  const moveScroll = function () {
-    let isBottomMessageAffected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    const current = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
+  var moveScroll = function (isBottomMessageAffected) {
+    if (isBottomMessageAffected === void 0) {
+      isBottomMessageAffected = false;
+    }
+    var current = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
     if (current) {
-      const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
+      var bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
       if (scrollBottom < bottom && (!isBottomMessageAffected || scrollBottom < SCROLL_BUFFER)) {
         // Move the scroll as much as the height of the message has changed
         current.scrollTop += bottom - scrollBottom;
       }
     }
   };
-  const handleOnScroll = useHandleOnScrollCallback({
+  var handleOnScroll = useHandleOnScrollCallback({
     hasMore: hasMorePrev,
     hasNext: hasMoreNext,
-    onScroll,
-    scrollRef
-  });
-  const {
-    scrollToBottomHandler,
-    scrollBottom
-  } = useSetScrollToBottom({
-    loading
+    onScroll: onScroll,
+    scrollRef: scrollRef
   });
+  var _d = useSetScrollToBottom({
+      loading: loading
+    }),
+    scrollToBottomHandler = _d.scrollToBottomHandler,
+    scrollBottom = _d.scrollBottom;
   if (loading) {
     return typeof renderPlaceholderLoader === 'function' ? renderPlaceholderLoader() : /*#__PURE__*/React__default.createElement(PlaceHolder, {
       type: PlaceHolderTypes.LOADING
@@ -261,7 +274,7 @@ const MessageList = _ref => {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isScrolled && /*#__PURE__*/React__default.createElement(PlaceHolder, {
     type: PlaceHolderTypes.LOADING
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: `sendbird-conversation__messages ${className}`
+    className: "sendbird-conversation__messages ".concat(className)
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-conversation__scroll-container"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -269,25 +282,24 @@ const MessageList = _ref => {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-conversation__messages-padding",
     ref: scrollRef,
-    onScroll: e => {
+    onScroll: function (e) {
       handleOnScroll();
       scrollToBottomHandler(e);
     }
-  }, allMessagesFiltered.map((m, idx) => {
-    var _sender, _store$config;
-    const {
-      chainTop,
-      chainBottom,
-      hasSeparator
-    } = getMessagePartsInfo({
-      allMessages: allMessagesFiltered,
-      replyType,
-      isMessageGroupingEnabled,
-      currentIndex: idx,
-      currentMessage: m,
-      currentChannel: currentGroupChannel
-    });
-    const isByMe = (m === null || m === void 0 ? void 0 : (_sender = m.sender) === null || _sender === void 0 ? void 0 : _sender.userId) === (store === null || store === void 0 ? void 0 : (_store$config = store.config) === null || _store$config === void 0 ? void 0 : _store$config.userId);
+  }, allMessagesFiltered.map(function (m, idx) {
+    var _a, _b;
+    var _c = getMessagePartsInfo({
+        allMessages: allMessagesFiltered,
+        replyType: replyType,
+        isMessageGroupingEnabled: isMessageGroupingEnabled,
+        currentIndex: idx,
+        currentMessage: m,
+        currentChannel: currentGroupChannel
+      }),
+      chainTop = _c.chainTop,
+      chainBottom = _c.chainBottom,
+      hasSeparator = _c.hasSeparator;
+    var isByMe = ((_a = m === null || m === void 0 ? void 0 : m.sender) === null || _a === void 0 ? void 0 : _a.userId) === ((_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.userId);
     return /*#__PURE__*/React__default.createElement(MessageProvider, {
       message: m,
       key: m === null || m === void 0 ? void 0 : m.messageId,
@@ -301,20 +313,19 @@ const MessageList = _ref => {
       chainBottom: chainBottom,
       renderCustomSeparator: renderCustomSeparator
     }));
-  }), localMessages.map((m, idx) => {
-    var _sender2, _store$config2;
-    const {
-      chainTop,
-      chainBottom
-    } = getMessagePartsInfo({
-      allMessages: allMessagesFiltered,
-      replyType,
-      isMessageGroupingEnabled,
-      currentIndex: idx,
-      currentMessage: m,
-      currentChannel: currentGroupChannel
-    });
-    const isByMe = (m === null || m === void 0 ? void 0 : (_sender2 = m.sender) === null || _sender2 === void 0 ? void 0 : _sender2.userId) === (store === null || store === void 0 ? void 0 : (_store$config2 = store.config) === null || _store$config2 === void 0 ? void 0 : _store$config2.userId);
+  }), localMessages.map(function (m, idx) {
+    var _a, _b;
+    var _c = getMessagePartsInfo({
+        allMessages: allMessagesFiltered,
+        replyType: replyType,
+        isMessageGroupingEnabled: isMessageGroupingEnabled,
+        currentIndex: idx,
+        currentMessage: m,
+        currentChannel: currentGroupChannel
+      }),
+      chainTop = _c.chainTop,
+      chainBottom = _c.chainBottom;
+    var isByMe = ((_a = m === null || m === void 0 ? void 0 : m.sender) === null || _a === void 0 ? void 0 : _a.userId) === ((_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.userId);
     return /*#__PURE__*/React__default.createElement(MessageProvider, {
       message: m,
       key: m === null || m === void 0 ? void 0 : m.messageId,
@@ -333,11 +344,10 @@ const MessageList = _ref => {
     className: "sendbird-conversation__messages__notification",
     count: currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.unreadMessageCount,
     time: unreadSince,
-    onClick: () => {
-      var _scrollRef$current4;
-      if (scrollRef !== null && scrollRef !== void 0 && (_scrollRef$current4 = scrollRef.current) !== null && _scrollRef$current4 !== void 0 && _scrollRef$current4.scrollTop) {
-        var _scrollRef$current$sc2, _scrollRef$current5, _scrollRef$current$of2, _scrollRef$current6;
-        scrollRef.current.scrollTop = ((_scrollRef$current$sc2 = scrollRef === null || scrollRef === void 0 ? void 0 : (_scrollRef$current5 = scrollRef.current) === null || _scrollRef$current5 === void 0 ? void 0 : _scrollRef$current5.scrollHeight) !== null && _scrollRef$current$sc2 !== void 0 ? _scrollRef$current$sc2 : 0) - ((_scrollRef$current$of2 = scrollRef === null || scrollRef === void 0 ? void 0 : (_scrollRef$current6 = scrollRef.current) === null || _scrollRef$current6 === void 0 ? void 0 : _scrollRef$current6.offsetHeight) !== null && _scrollRef$current$of2 !== void 0 ? _scrollRef$current$of2 : 0);
+    onClick: function () {
+      var _a, _b, _c, _d, _e;
+      if ((_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) {
+        scrollRef.current.scrollTop = ((_c = (_b = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) !== null && _c !== void 0 ? _c : 0) - ((_e = (_d = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _d === void 0 ? void 0 : _d.offsetHeight) !== null && _e !== void 0 ? _e : 0);
       }
       if (!disableMarkAsRead && !!currentGroupChannel) {
         markAsReadScheduler.push(currentGroupChannel);