@sendbird/uikit-react 3.4.4 → 3.4.5

package/cjs/Channel/components/ChannelHeader.js

@@ -1,40 +1,40 @@
 'use strict';
 
 var React = require('react');
-var utils = require('../../utils-9fc9438c.js');
-var ui_Label = require('../../index-7207d339.js');
+var utils = require('../../utils-de779857.js');
+var ui_Label = require('../../index-26a1e861.js');
 var ui_Icon = require('../../ui/Icon.js');
 var ui_IconButton = require('../../ui/IconButton.js');
 var ui_ChannelAvatar = require('../../ui/ChannelAvatar.js');
-var LocalizationContext = require('../../LocalizationContext-4822793b.js');
+var LocalizationContext = require('../../LocalizationContext-01fceac0.js');
 var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
-var Channel_context = require('../../ChannelProvider-b963c72c.js');
-var MediaQueryContext = require('../../MediaQueryContext-b83880cc.js');
-var utils$1 = require('../../utils-7d2c966a.js');
+var Channel_context = require('../../ChannelProvider-af0b997c.js');
+var MediaQueryContext = require('../../MediaQueryContext-4978c777.js');
+var utils$1 = require('../../utils-5ca88bb6.js');
 require('prop-types');
-require('../../stringSet-7f49973c.js');
-require('../../tslib.es6-46c08a06.js');
+require('../../stringSet-7330b627.js');
+require('../../tslib.es6-ee1122c5.js');
 require('../../ui/Avatar.js');
 require('../../ui/ImageRenderer.js');
-require('../../uuid-8454abf3.js');
-require('../../utils-dae078f4.js');
-require('../../index-1151a507.js');
+require('../../uuid-26b61f16.js');
+require('../../utils-5905fc1a.js');
+require('../../index-7c5d21c4.js');
 require('../../withSendbird.js');
-require('../../UserProfileContext-7bc4eec4.js');
-require('../../index-cfff5dbb.js');
-require('../../topics-9d6a6d36.js');
-require('../../index-2f2f3e43.js');
+require('../../UserProfileContext-c4642438.js');
+require('../../index-959a4ab1.js');
+require('../../topics-7547922a.js');
+require('../../index-72fd0294.js');
 require('../../utils/message/getOutgoingMessageState.js');
-require('../../_rollupPluginBabelHelpers-1218aafb.js');
-require('../../compareIds-3d732a01.js');
-require('../../const-73aa22ac.js');
+require('../../_rollupPluginBabelHelpers-994cd1da.js');
+require('../../compareIds-b77b66f3.js');
+require('../../const-e03cb4c1.js');
 require('@sendbird/chat/groupChannel');
 require('@sendbird/chat/message');
 require('../../ui/ContextMenu.js');
 require('react-dom');
 require('../../ui/SortByRow.js');
 require('../../ui/ReactionButton.js');
-require('../../consts-2b0eaee0.js');
+require('../../consts-69fc20be.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/Channel/components/ChannelUI.js

@@ -2,66 +2,69 @@
 
 var React = require('react');
 var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
-var Channel_context = require('../../ChannelProvider-b963c72c.js');
-var ui_PlaceHolder = require('../../index-a5fad93c.js');
+var Channel_context = require('../../ChannelProvider-af0b997c.js');
+var ui_PlaceHolder = require('../../index-aeba3b06.js');
 var ui_ConnectionStatus = require('../../ui/ConnectionStatus.js');
 var Channel_components_ChannelHeader = require('./ChannelHeader.js');
 var Channel_components_MessageList = require('./MessageList.js');
 var Channel_components_TypingIndicator = require('./TypingIndicator.js');
 var Channel_components_MessageInput = require('./MessageInput.js');
 require('../../withSendbird.js');
-require('../../tslib.es6-46c08a06.js');
-require('../../UserProfileContext-7bc4eec4.js');
+require('../../tslib.es6-ee1122c5.js');
+require('../../UserProfileContext-c4642438.js');
 require('prop-types');
-require('../../index-cfff5dbb.js');
-require('../../index-1151a507.js');
-require('../../topics-9d6a6d36.js');
-require('../../index-2f2f3e43.js');
+require('../../index-959a4ab1.js');
+require('../../index-7c5d21c4.js');
+require('../../topics-7547922a.js');
+require('../../index-72fd0294.js');
 require('../../utils/message/getOutgoingMessageState.js');
-require('../../_rollupPluginBabelHelpers-1218aafb.js');
-require('../../compareIds-3d732a01.js');
-require('../../const-73aa22ac.js');
+require('../../_rollupPluginBabelHelpers-994cd1da.js');
+require('../../compareIds-b77b66f3.js');
+require('../../const-e03cb4c1.js');
 require('@sendbird/chat/groupChannel');
-require('../../uuid-8454abf3.js');
+require('../../uuid-26b61f16.js');
 require('@sendbird/chat/message');
 require('../../ui/ContextMenu.js');
 require('react-dom');
 require('../../ui/SortByRow.js');
-require('../../index-7207d339.js');
-require('../../stringSet-7f49973c.js');
+require('../../index-26a1e861.js');
+require('../../stringSet-7330b627.js');
 require('../../ui/ReactionButton.js');
 require('../../ui/ImageRenderer.js');
 require('../../ui/Icon.js');
-require('../../consts-2b0eaee0.js');
-require('../../LocalizationContext-4822793b.js');
+require('../../consts-69fc20be.js');
+require('../../LocalizationContext-01fceac0.js');
 require('../../ui/Loader.js');
-require('../../utils-9fc9438c.js');
+require('../../utils-de779857.js');
 require('../../ui/IconButton.js');
 require('../../ui/ChannelAvatar.js');
 require('../../ui/Avatar.js');
-require('../../utils-dae078f4.js');
-require('../../MediaQueryContext-b83880cc.js');
-require('../../utils-7d2c966a.js');
+require('../../utils-5905fc1a.js');
+require('../../MediaQueryContext-4978c777.js');
+require('../../utils-5ca88bb6.js');
 require('./Message.js');
 require('./SuggestedMentionList.js');
-require('../../const-44ac2c14.js');
-require('../../ThreadProvider-93f2b7e5.js');
+require('../../const-35f8be84.js');
+require('../../ThreadProvider-12784adf.js');
 require('../../Thread/context/types.js');
 require('@sendbird/chat');
 require('../../ui/DateSeparator.js');
-require('../../color-937f65ad.js');
+require('../../color-8f9fe57f.js');
 require('../../ui/MessageInput.js');
 require('../../ui/Button.js');
 require('dompurify');
-require('../../consts-11872691.js');
+require('../../consts-b29bd4d5.js');
+require('../../consts-aabb33e0.js');
+require('../../consts-956b1221.js');
+require('../../tokenize-a5a20ef3.js');
 require('../../ui/MessageContent.js');
 require('../../ui/UserProfile.js');
 require('../../sendbirdSelectors.js');
-require('../../index-aaa65319.js');
-require('../../index-20fc629b.js');
-require('../../index-f78cff63.js');
+require('../../index-aa908fcf.js');
+require('../../index-e3f00fd1.js');
+require('../../index-1f02e60f.js');
 require('../../ui/MessageItemMenu.js');
-require('../../types-31b11c88.js');
+require('../../types-7daeb4a1.js');
 require('../../ui/MessageItemReactionMenu.js');
 require('../../ui/EmojiReactions.js');
 require('../../ui/Tooltip.js');
@@ -69,23 +72,24 @@ require('../../ui/TooltipWrapper.js');
 require('../../ui/ReactionBadge.js');
 require('../../ui/AdminMessage.js');
 require('../../ui/TextMessageItemBody.js');
-require('../../ui/Word.js');
-require('../../ui/LinkLabel.js');
+require('../../index-603c2a7c.js');
+require('../../Message/context.js');
 require('../../ui/MentionLabel.js');
+require('../../ui/LinkLabel.js');
 require('../../ui/FileMessageItemBody.js');
 require('../../ui/TextButton.js');
 require('../../ui/ThumbnailMessageItemBody.js');
 require('../../ui/OGMessageItemBody.js');
 require('../../ui/UnknownMessageItemBody.js');
 require('../../ui/QuoteMessage.js');
-require('../../useLongPress-839c53cb.js');
+require('../../useLongPress-3e3b1188.js');
 require('../../ui/BottomSheet.js');
-require('../../index-57989185.js');
+require('../../index-36aaf992.js');
 require('../../ui/ThreadReplies.js');
 require('../../ui/VoiceMessageItemBody.js');
 require('../../ui/ProgressBar.js');
 require('../../VoicePlayer/useVoicePlayer.js');
-require('../../index-e9d3a5d6.js');
+require('../../index-c825cf5b.js');
 require('../../VoiceRecorder/context.js');
 require('../../lame.all.js');
 require('../../ui/PlaybackTime.js');
@@ -95,9 +99,9 @@ require('../../ui/Modal.js');
 require('./UnreadCount.js');
 require('./FrozenNotification.js');
 require('../../ui/QuoteMessageInput.js');
-require('../../VoiceMessageInputWrapper-82c8ef13.js');
+require('../../VoiceMessageInputWrapper-3b5db880.js');
 require('../../VoiceRecorder/useVoiceRecorder.js');
-require('../../index-a867516a.js');
+require('../../index-1e57cbdb.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/Channel/components/ChannelUI.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelUI.js","sources":["../../../../src/smart-components/Channel/components/ChannelUI/index.tsx"],"sourcesContent":["import './channel-ui.scss';\n\nimport React from 'react';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\n\nimport { useChannelContext } from '../../context/ChannelProvider';\nimport PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';\nimport ConnectionStatus from '../../../../ui/ConnectionStatus';\nimport ChannelHeader from '../ChannelHeader';\nimport MessageList from '../MessageList';\nimport TypingIndicator from '../TypingIndicator';\nimport MessageInputWrapper from '../MessageInput';\nimport { RenderCustomSeparatorProps, RenderMessageProps } from '../../../../types';\n\nexport interface ChannelUIProps {\n  isLoading?: boolean;\n  renderPlaceholderLoader?: () => React.ReactElement;\n  renderPlaceholderInvalid?: () => React.ReactElement;\n  renderPlaceholderEmpty?: () => React.ReactElement;\n  renderChannelHeader?: () => React.ReactElement;\n  renderMessage?: (props: RenderMessageProps) => React.ReactElement;\n  renderMessageInput?: () => React.ReactElement;\n  renderFileUploadIcon?: () => React.ReactElement;\n  renderVoiceMessageIcon?: () => React.ReactElement;\n  renderSendMessageIcon?: () => React.ReactElement;\n  renderTypingIndicator?: () => React.ReactElement;\n  renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;\n}\n\nconst ChannelUI: React.FC<ChannelUIProps> = ({\n  isLoading,\n  renderPlaceholderLoader,\n  renderPlaceholderInvalid,\n  renderPlaceholderEmpty,\n  renderChannelHeader,\n  renderMessage,\n  renderMessageInput,\n  renderTypingIndicator,\n  renderCustomSeparator,\n  renderFileUploadIcon,\n  renderVoiceMessageIcon,\n  renderSendMessageIcon,\n}: ChannelUIProps) => {\n  const {\n    channelUrl,\n    isInvalid,\n  } = useChannelContext();\n\n  const globalStore = useSendbirdStateContext();\n  const sdkError = globalStore?.stores?.sdkStore?.error;\n  const logger = globalStore?.config?.logger;\n  const isOnline = globalStore?.config?.isOnline;\n\n  if (isLoading) {\n    return (<div className=\"sendbird-conversation\">\n      {\n        renderPlaceholderLoader?.() || (\n          <PlaceHolder type={PlaceHolderTypes.LOADING} />\n        )\n      }\n    </div>);\n  }\n\n  if (!channelUrl) {\n    return (<div className=\"sendbird-conversation\">\n      {\n        renderPlaceholderInvalid?.() || (\n          <PlaceHolder type={PlaceHolderTypes.NO_CHANNELS} />\n        )\n      }\n    </div>);\n  }\n  if (isInvalid) {\n    return (\n      <div className=\"sendbird-conversation\">\n        {\n          renderPlaceholderInvalid?.() || (\n            <PlaceHolder type={PlaceHolderTypes.WRONG} />\n          )\n        }\n      </div>\n    );\n  }\n  if (sdkError) {\n    return (\n      <div className=\"sendbird-conversation\">\n        {\n          renderPlaceholderInvalid?.() || (\n            <PlaceHolder\n              type={PlaceHolderTypes.WRONG}\n              retryToConnect={() => {\n                logger.info('Channel: reconnecting');\n                // reconnect();\n              }}\n            />\n          )\n        }\n      </div>\n    );\n  }\n  return (\n    <div className='sendbird-conversation'>\n      {renderChannelHeader?.() || (\n        <ChannelHeader className=\"sendbird-conversation__channel-header\" />\n      )}\n      <MessageList\n        className=\"sendbird-conversation__message-list\"\n        renderMessage={renderMessage}\n        renderPlaceholderEmpty={renderPlaceholderEmpty}\n        renderCustomSeparator={renderCustomSeparator}\n        renderPlaceholderLoader={renderPlaceholderLoader}\n      />\n      <div className=\"sendbird-conversation__footer\">\n        {\n          renderMessageInput?.() || (\n            <MessageInputWrapper\n              renderFileUploadIcon={renderFileUploadIcon}\n              renderVoiceMessageIcon={renderVoiceMessageIcon}\n              renderSendMessageIcon={renderSendMessageIcon}\n            />\n          )\n        }\n        <div className=\"sendbird-conversation__footer__typing-indicator\">\n          {\n            renderTypingIndicator?.() || (\n              <TypingIndicator />\n            )\n          }\n          {\n            !isOnline && (\n              <ConnectionStatus />\n            )\n          }\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default ChannelUI;\n"],"names":["ChannelUI","_a","isLoading","renderPlaceholderLoader","renderPlaceholderInvalid","renderPlaceholderEmpty","renderChannelHeader","renderMessage","renderMessageInput","renderTypingIndicator","renderCustomSeparator","renderFileUploadIcon","renderVoiceMessageIcon","renderSendMessageIcon","_f","useChannelContext","channelUrl","isInvalid","globalStore","useSendbirdStateContext","sdkError","_c","_b","stores","sdkStore","error","logger","_d","config","isOnline","_e","React","PlaceHolder","PlaceHolderTypes","LOADING","NO_CHANNELS","WRONG","info","ChannelHeader","MessageList","MessageInputWrapper","TypingIndicator","ConnectionStatus"],"mappings":"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"}
+{"version":3,"file":"ChannelUI.js","sources":["../../../../src/smart-components/Channel/components/ChannelUI/index.tsx"],"sourcesContent":["import './channel-ui.scss';\n\nimport React from 'react';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\n\nimport { useChannelContext } from '../../context/ChannelProvider';\nimport PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';\nimport ConnectionStatus from '../../../../ui/ConnectionStatus';\nimport ChannelHeader from '../ChannelHeader';\nimport MessageList from '../MessageList';\nimport TypingIndicator from '../TypingIndicator';\nimport MessageInputWrapper from '../MessageInput';\nimport { RenderCustomSeparatorProps, RenderMessageProps } from '../../../../types';\n\nexport interface ChannelUIProps {\n  isLoading?: boolean;\n  renderPlaceholderLoader?: () => React.ReactElement;\n  renderPlaceholderInvalid?: () => React.ReactElement;\n  renderPlaceholderEmpty?: () => React.ReactElement;\n  renderChannelHeader?: () => React.ReactElement;\n  renderMessage?: (props: RenderMessageProps) => React.ReactElement;\n  renderMessageInput?: () => React.ReactElement;\n  renderFileUploadIcon?: () => React.ReactElement;\n  renderVoiceMessageIcon?: () => React.ReactElement;\n  renderSendMessageIcon?: () => React.ReactElement;\n  renderTypingIndicator?: () => React.ReactElement;\n  renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;\n}\n\nconst ChannelUI: React.FC<ChannelUIProps> = ({\n  isLoading,\n  renderPlaceholderLoader,\n  renderPlaceholderInvalid,\n  renderPlaceholderEmpty,\n  renderChannelHeader,\n  renderMessage,\n  renderMessageInput,\n  renderTypingIndicator,\n  renderCustomSeparator,\n  renderFileUploadIcon,\n  renderVoiceMessageIcon,\n  renderSendMessageIcon,\n}: ChannelUIProps) => {\n  const {\n    channelUrl,\n    isInvalid,\n  } = useChannelContext();\n\n  const globalStore = useSendbirdStateContext();\n  const sdkError = globalStore?.stores?.sdkStore?.error;\n  const logger = globalStore?.config?.logger;\n  const isOnline = globalStore?.config?.isOnline;\n\n  if (isLoading) {\n    return (<div className=\"sendbird-conversation\">\n      {\n        renderPlaceholderLoader?.() || (\n          <PlaceHolder type={PlaceHolderTypes.LOADING} />\n        )\n      }\n    </div>);\n  }\n\n  if (!channelUrl) {\n    return (<div className=\"sendbird-conversation\">\n      {\n        renderPlaceholderInvalid?.() || (\n          <PlaceHolder type={PlaceHolderTypes.NO_CHANNELS} />\n        )\n      }\n    </div>);\n  }\n  if (isInvalid) {\n    return (\n      <div className=\"sendbird-conversation\">\n        {\n          renderPlaceholderInvalid?.() || (\n            <PlaceHolder type={PlaceHolderTypes.WRONG} />\n          )\n        }\n      </div>\n    );\n  }\n  if (sdkError) {\n    return (\n      <div className=\"sendbird-conversation\">\n        {\n          renderPlaceholderInvalid?.() || (\n            <PlaceHolder\n              type={PlaceHolderTypes.WRONG}\n              retryToConnect={() => {\n                logger.info('Channel: reconnecting');\n                // reconnect();\n              }}\n            />\n          )\n        }\n      </div>\n    );\n  }\n  return (\n    <div className='sendbird-conversation'>\n      {renderChannelHeader?.() || (\n        <ChannelHeader className=\"sendbird-conversation__channel-header\" />\n      )}\n      <MessageList\n        className=\"sendbird-conversation__message-list\"\n        renderMessage={renderMessage}\n        renderPlaceholderEmpty={renderPlaceholderEmpty}\n        renderCustomSeparator={renderCustomSeparator}\n        renderPlaceholderLoader={renderPlaceholderLoader}\n      />\n      <div className=\"sendbird-conversation__footer\">\n        {\n          renderMessageInput?.() || (\n            <MessageInputWrapper\n              renderFileUploadIcon={renderFileUploadIcon}\n              renderVoiceMessageIcon={renderVoiceMessageIcon}\n              renderSendMessageIcon={renderSendMessageIcon}\n            />\n          )\n        }\n        <div className=\"sendbird-conversation__footer__typing-indicator\">\n          {\n            renderTypingIndicator?.() || (\n              <TypingIndicator />\n            )\n          }\n          {\n            !isOnline && (\n              <ConnectionStatus />\n            )\n          }\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default ChannelUI;\n"],"names":["ChannelUI","_a","isLoading","renderPlaceholderLoader","renderPlaceholderInvalid","renderPlaceholderEmpty","renderChannelHeader","renderMessage","renderMessageInput","renderTypingIndicator","renderCustomSeparator","renderFileUploadIcon","renderVoiceMessageIcon","renderSendMessageIcon","_f","useChannelContext","channelUrl","isInvalid","globalStore","useSendbirdStateContext","sdkError","_c","_b","stores","sdkStore","error","logger","_d","config","isOnline","_e","React","PlaceHolder","PlaceHolderTypes","LOADING","NO_CHANNELS","WRONG","info","ChannelHeader","MessageList","MessageInputWrapper","TypingIndicator","ConnectionStatus"],"mappings":"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"}

package/cjs/Channel/components/FileViewer.js

@@ -5,32 +5,32 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var reactDom = require('react-dom');
 var ui_Avatar = require('../../ui/Avatar.js');
-var ui_Label = require('../../index-7207d339.js');
+var ui_Label = require('../../index-26a1e861.js');
 var ui_Icon = require('../../ui/Icon.js');
-var index$1 = require('../../index-57989185.js');
-var index = require('../../index-2f2f3e43.js');
+var index$1 = require('../../index-36aaf992.js');
+var index = require('../../index-72fd0294.js');
 var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
-var Channel_context = require('../../ChannelProvider-b963c72c.js');
-require('../../tslib.es6-46c08a06.js');
+var Channel_context = require('../../ChannelProvider-af0b997c.js');
+require('../../tslib.es6-ee1122c5.js');
 require('../../ui/ImageRenderer.js');
-require('../../uuid-8454abf3.js');
+require('../../uuid-26b61f16.js');
 require('prop-types');
-require('../../stringSet-7f49973c.js');
+require('../../stringSet-7330b627.js');
 require('../../utils/message/getOutgoingMessageState.js');
 require('../../withSendbird.js');
-require('../../UserProfileContext-7bc4eec4.js');
-require('../../index-cfff5dbb.js');
-require('../../index-1151a507.js');
-require('../../topics-9d6a6d36.js');
-require('../../_rollupPluginBabelHelpers-1218aafb.js');
-require('../../compareIds-3d732a01.js');
-require('../../const-73aa22ac.js');
+require('../../UserProfileContext-c4642438.js');
+require('../../index-959a4ab1.js');
+require('../../index-7c5d21c4.js');
+require('../../topics-7547922a.js');
+require('../../_rollupPluginBabelHelpers-994cd1da.js');
+require('../../compareIds-b77b66f3.js');
+require('../../const-e03cb4c1.js');
 require('@sendbird/chat/groupChannel');
 require('@sendbird/chat/message');
 require('../../ui/ContextMenu.js');
 require('../../ui/SortByRow.js');
 require('../../ui/ReactionButton.js');
-require('../../consts-2b0eaee0.js');
+require('../../consts-69fc20be.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/Channel/components/FrozenNotification.js

@@ -1,10 +1,10 @@
 'use strict';
 
 var React = require('react');
-var LocalizationContext = require('../../LocalizationContext-4822793b.js');
-var ui_Label = require('../../index-7207d339.js');
-require('../../stringSet-7f49973c.js');
-require('../../index-1151a507.js');
+var LocalizationContext = require('../../LocalizationContext-01fceac0.js');
+var ui_Label = require('../../index-26a1e861.js');
+require('../../stringSet-7330b627.js');
+require('../../index-7c5d21c4.js');
 require('prop-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/Channel/components/Message.js

@@ -1,58 +1,61 @@
 'use strict';
 
-var tslib_es6 = require('../../tslib.es6-46c08a06.js');
+var tslib_es6 = require('../../tslib.es6-ee1122c5.js');
 var React = require('react');
-var index$1 = require('../../index-cfff5dbb.js');
+var index$1 = require('../../index-959a4ab1.js');
 var Channel_components_SuggestedMentionList = require('./SuggestedMentionList.js');
 var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
-var Channel_context = require('../../ChannelProvider-b963c72c.js');
-var index = require('../../index-2f2f3e43.js');
-var _const = require('../../const-73aa22ac.js');
+var Channel_context = require('../../ChannelProvider-af0b997c.js');
+var index = require('../../index-72fd0294.js');
+var _const = require('../../const-e03cb4c1.js');
 var ui_DateSeparator = require('../../ui/DateSeparator.js');
-var ui_Label = require('../../index-7207d339.js');
+var ui_Label = require('../../index-26a1e861.js');
 var ui_MessageInput = require('../../ui/MessageInput.js');
 var ui_MessageContent = require('../../ui/MessageContent.js');
 var Channel_components_FileViewer = require('./FileViewer.js');
 var Channel_components_RemoveMessageModal = require('./RemoveMessageModal.js');
-var _const$1 = require('../../const-44ac2c14.js');
-var LocalizationContext = require('../../LocalizationContext-4822793b.js');
-require('../../index-1151a507.js');
+var _const$1 = require('../../const-35f8be84.js');
+var LocalizationContext = require('../../LocalizationContext-01fceac0.js');
+require('../../index-7c5d21c4.js');
 require('../../ui/Icon.js');
 require('prop-types');
 require('../../ui/Avatar.js');
 require('../../ui/ImageRenderer.js');
-require('../../uuid-8454abf3.js');
-require('../../ThreadProvider-93f2b7e5.js');
+require('../../uuid-26b61f16.js');
+require('../../ThreadProvider-12784adf.js');
 require('../../utils/message/getOutgoingMessageState.js');
-require('../../UserProfileContext-7bc4eec4.js');
+require('../../UserProfileContext-c4642438.js');
 require('../../Thread/context/types.js');
 require('@sendbird/chat');
-require('../../topics-9d6a6d36.js');
+require('../../topics-7547922a.js');
 require('@sendbird/chat/groupChannel');
 require('@sendbird/chat/message');
-require('../../consts-2b0eaee0.js');
+require('../../consts-69fc20be.js');
 require('../../withSendbird.js');
-require('../../_rollupPluginBabelHelpers-1218aafb.js');
-require('../../compareIds-3d732a01.js');
+require('../../_rollupPluginBabelHelpers-994cd1da.js');
+require('../../compareIds-b77b66f3.js');
 require('../../ui/ContextMenu.js');
 require('react-dom');
 require('../../ui/SortByRow.js');
-require('../../stringSet-7f49973c.js');
+require('../../stringSet-7330b627.js');
 require('../../ui/ReactionButton.js');
-require('../../color-937f65ad.js');
+require('../../color-8f9fe57f.js');
 require('../../ui/IconButton.js');
 require('../../ui/Button.js');
 require('dompurify');
-require('../../consts-11872691.js');
+require('../../consts-b29bd4d5.js');
+require('../../consts-aabb33e0.js');
+require('../../consts-956b1221.js');
+require('../../tokenize-a5a20ef3.js');
 require('../../ui/UserProfile.js');
 require('../../sendbirdSelectors.js');
-require('../../utils-7d2c966a.js');
-require('../../index-aaa65319.js');
+require('../../utils-5ca88bb6.js');
+require('../../index-aa908fcf.js');
 require('../../ui/Loader.js');
-require('../../index-20fc629b.js');
-require('../../index-f78cff63.js');
+require('../../index-e3f00fd1.js');
+require('../../index-1f02e60f.js');
 require('../../ui/MessageItemMenu.js');
-require('../../types-31b11c88.js');
+require('../../types-7daeb4a1.js');
 require('../../ui/MessageItemReactionMenu.js');
 require('../../ui/EmojiReactions.js');
 require('../../ui/Tooltip.js');
@@ -60,24 +63,25 @@ require('../../ui/TooltipWrapper.js');
 require('../../ui/ReactionBadge.js');
 require('../../ui/AdminMessage.js');
 require('../../ui/TextMessageItemBody.js');
-require('../../ui/Word.js');
-require('../../ui/LinkLabel.js');
+require('../../index-603c2a7c.js');
+require('../../Message/context.js');
 require('../../ui/MentionLabel.js');
+require('../../ui/LinkLabel.js');
 require('../../ui/FileMessageItemBody.js');
 require('../../ui/TextButton.js');
-require('../../MediaQueryContext-b83880cc.js');
+require('../../MediaQueryContext-4978c777.js');
 require('../../ui/ThumbnailMessageItemBody.js');
 require('../../ui/OGMessageItemBody.js');
 require('../../ui/UnknownMessageItemBody.js');
 require('../../ui/QuoteMessage.js');
-require('../../useLongPress-839c53cb.js');
+require('../../useLongPress-3e3b1188.js');
 require('../../ui/BottomSheet.js');
-require('../../index-57989185.js');
+require('../../index-36aaf992.js');
 require('../../ui/ThreadReplies.js');
 require('../../ui/VoiceMessageItemBody.js');
 require('../../ui/ProgressBar.js');
 require('../../VoicePlayer/useVoicePlayer.js');
-require('../../index-e9d3a5d6.js');
+require('../../index-c825cf5b.js');
 require('../../VoiceRecorder/context.js');
 require('../../lame.all.js');
 require('../../ui/PlaybackTime.js');
@@ -197,7 +201,7 @@ var Message = function (_a) {
       setAbleMention = _s[1];
 
   var editMessageInputRef = React.useRef(null);
-  var useMessageScrollRef = React.useRef(null);
+  var messageScrollRef = React.useRef(null);
   var displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !Channel_context.isDisabledBecauseFrozen(currentGroupChannel) && !Channel_context.isDisabledBecauseMuted(currentGroupChannel);
   var disabled = !initialized || Channel_context.isDisabledBecauseFrozen(currentGroupChannel) || Channel_context.isDisabledBecauseMuted(currentGroupChannel) || !isOnline;
   React.useEffect(function () {
@@ -231,8 +235,8 @@ var Message = function (_a) {
     var animationTimeout = null;
     var messageHighlightedTimeout = null;
 
-    if (highLightedMessageId === message.messageId && (useMessageScrollRef === null || useMessageScrollRef === void 0 ? void 0 : useMessageScrollRef.current)) {
-      useMessageScrollRef.current.scrollIntoView({
+    if (highLightedMessageId === message.messageId && (messageScrollRef === null || messageScrollRef === void 0 ? void 0 : messageScrollRef.current)) {
+      messageScrollRef.current.scrollIntoView({
         block: 'center',
         inline: 'center'
       });
@@ -252,13 +256,13 @@ var Message = function (_a) {
       clearTimeout(animationTimeout);
       clearTimeout(messageHighlightedTimeout);
     };
-  }, [highLightedMessageId, useMessageScrollRef.current, message.messageId]);
+  }, [highLightedMessageId, messageScrollRef.current, message.messageId]);
   React.useLayoutEffect(function () {
     var animationTimeout = null;
     var messageAnimatedTimeout = null;
 
-    if (animatedMessageId === message.messageId && (useMessageScrollRef === null || useMessageScrollRef === void 0 ? void 0 : useMessageScrollRef.current)) {
-      useMessageScrollRef.current.scrollIntoView({
+    if (animatedMessageId === message.messageId && (messageScrollRef === null || messageScrollRef === void 0 ? void 0 : messageScrollRef.current)) {
+      messageScrollRef.current.scrollIntoView({
         block: 'center',
         inline: 'center'
       });
@@ -278,7 +282,7 @@ var Message = function (_a) {
       clearTimeout(animationTimeout);
       clearTimeout(messageAnimatedTimeout);
     };
-  }, [animatedMessageId, useMessageScrollRef.current, message.messageId, onMessageAnimated]);
+  }, [animatedMessageId, messageScrollRef.current, message.messageId, onMessageAnimated]);
   var renderedMessage = React.useMemo(function () {
     return renderMessage === null || renderMessage === void 0 ? void 0 : renderMessage({
       message: message,
@@ -298,7 +302,7 @@ var Message = function (_a) {
 
   if (renderedMessage) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      ref: useMessageScrollRef,
+      ref: messageScrollRef,
       className: index.getClassName(['sendbird-msg-hoc sendbird-msg--scroll-ref', isAnimated ? 'sendbird-msg-hoc__animated' : '', isHighlighted ? 'sendbird-msg-hoc__highlighted' : ''])
     }, // TODO: Add message instance as a function parameter
     hasSeparator && (renderedCustomSeparator || /*#__PURE__*/React__default["default"].createElement(ui_DateSeparator, null, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
@@ -397,7 +401,7 @@ var Message = function (_a) {
     style: {
       marginBottom: '2px'
     },
-    ref: useMessageScrollRef
+    ref: messageScrollRef
   }, hasSeparator && (renderedCustomSeparator || /*#__PURE__*/React__default["default"].createElement(ui_DateSeparator, null, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     type: ui_Label.LabelTypography.CAPTION_2,
     color: ui_Label.LabelColors.ONBACKGROUND_2