@sendbird/uikit-react 3.4.8 → 3.4.9-rc.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # Changelog - v3
 
+## [v3.4.9] (June 02 2023)
+
+Fixes:
+* ChannelList
+  * Display a channel on channel list only when there's a message
+  * Remove edited message from ChannelPreview
+
+* MarkAsRead & MarkAsDelivered
+  * Batch markAsRead & markAsDelivered requests
+
+* Scrolling
+  * Various scroll issues in Channel component
+  * Shaky scroll on messages when fetching messages
+  * Scroll into view when starting point is set
+  * Scroll into message on clicking quote reply
+  * Inconsistent rendering on scrollToBottom button
+
+* Mention
+  * Improve max mention count logic in Messages
+  * Improve mention detection when there are curly braces in user's name Mentions
+  were not working when user nickname had curly braces
+
+* Special channels
+  * Disable mention in the broadcast channel
+  * Change OpenChannelInput muted state notice text in broadcast channel
+
+* Reply
+  * Apply ellipsis to a sender of quote and admin message
+
+* Thread
+  * Add border bottom to the ParentMessageInfo component
+  * Modify string set for thread menu "Reply to Thread" -> "Reply in Thread"
+    Do not display "Reply in Thread" to the reply messages
+  * Prevent hover style of ParentMessageInfo component
+
+* OpenChannel
+  * Apply theme to the OpenChannelList header
+
+Chores:
+* Add a sample with router
+* Add dataId to the every menu items
+
 ## [v3.4.8] (May 19 2023)
 
 Fixes:
@@ -31,7 +73,7 @@ Chores:
 Important Notes:
 * @sendbird/chat@4.8.0 has an issue with `abortcontroller-polyfill` plugin. Please use version 4.7.2 or install it separately.
 
-Features: 
+Features:
 * Set Chat SDK v4.3.0 as the minimum required version.
 * Add a new UI component, Toggle:
   * `ToggleContainer`: A context provider component that manages only the toggle status.

package/Channel/components/ChannelHeader.js

@@ -1,33 +1,33 @@
 import React__default, { useContext } from 'react';
-import { g as getChannelTitle } from '../../utils-b42f4fab.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-a900bd78.js';
+import { g as getChannelTitle } from '../../utils-1d8ffd91.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-c4af409f.js';
 import Icon, { IconColors, IconTypes } from '../../ui/Icon.js';
 import IconButton from '../../ui/IconButton.js';
 import ChannelAvatar from '../../ui/ChannelAvatar.js';
-import { a as LocalizationContext } from '../../LocalizationContext-ae38446a.js';
+import { a as LocalizationContext } from '../../LocalizationContext-8b7b48ec.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import { u as useChannelContext } from '../../ChannelProvider-bba4a095.js';
-import { u as useMediaQueryContext } from '../../MediaQueryContext-8d283dc2.js';
-import { n as noop } from '../../utils-c8b489c4.js';
+import { u as useChannelContext } from '../../ChannelProvider-6c5b02f1.js';
+import { u as useMediaQueryContext } from '../../MediaQueryContext-744e0eb4.js';
+import { n as noop } from '../../utils-28a3bfad.js';
 import 'prop-types';
-import '../../stringSet-6d89212b.js';
-import '../../_rollupPluginBabelHelpers-eaf55eff.js';
+import '../../stringSet-387833a3.js';
+import '../../_rollupPluginBabelHelpers-8c286a7c.js';
 import '../../ui/Avatar.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-c94bd88b.js';
-import '../../utils-8e039c1b.js';
-import '../../index-321e838f.js';
+import '../../uuid-295e6b8b.js';
+import '../../utils-cb06f177.js';
+import '../../index-617179bd.js';
 import '../../withSendbird.js';
-import '../../UserProfileContext-91e3b3f2.js';
-import '../../index-67dd0c26.js';
-import '../../topics-8f4016e9.js';
-import '../../index-d8fdbe6f.js';
+import '../../UserProfileContext-9040499b.js';
+import '../../index-f22b46c2.js';
+import '../../topics-019712e5.js';
+import '../../index-2d3d2283.js';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../compareIds-74cf4016.js';
-import '../../const-3af04f0a.js';
+import '../../compareIds-fa21456c.js';
+import '../../const-48b39769.js';
 import '@sendbird/chat/groupChannel';
 import '@sendbird/chat/message';
-import '../../consts-9ece4263.js';
+import '../../consts-63e52cd8.js';
 
 const ChannelHeader = _ref => {
   var _globalStore$config, _globalStore$config2, _currentGroupChannel$;

package/Channel/components/ChannelUI.js

@@ -1,77 +1,83 @@
 import React__default from 'react';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import { u as useChannelContext } from '../../ChannelProvider-bba4a095.js';
-import { P as PlaceHolder, a as PlaceHolderTypes } from '../../index-aa215b1c.js';
+import { u as useChannelContext } from '../../ChannelProvider-6c5b02f1.js';
+import { P as PlaceHolder, a as PlaceHolderTypes } from '../../index-e307d0c3.js';
 import ConnectionStatus from '../../ui/ConnectionStatus.js';
 import ChannelHeader from './ChannelHeader.js';
 import MessageList from './MessageList.js';
 import TypingIndicator from './TypingIndicator.js';
 import MessageInputWrapper from './MessageInput.js';
 import '../../withSendbird.js';
-import '../../_rollupPluginBabelHelpers-eaf55eff.js';
-import '../../UserProfileContext-91e3b3f2.js';
+import '../../_rollupPluginBabelHelpers-8c286a7c.js';
+import '../../UserProfileContext-9040499b.js';
 import 'prop-types';
-import '../../index-67dd0c26.js';
-import '../../index-321e838f.js';
-import '../../topics-8f4016e9.js';
-import '../../index-d8fdbe6f.js';
+import '../../index-f22b46c2.js';
+import '../../index-617179bd.js';
+import '../../topics-019712e5.js';
+import '../../index-2d3d2283.js';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../compareIds-74cf4016.js';
-import '../../const-3af04f0a.js';
+import '../../compareIds-fa21456c.js';
+import '../../const-48b39769.js';
 import '@sendbird/chat/groupChannel';
-import '../../uuid-c94bd88b.js';
+import '../../uuid-295e6b8b.js';
 import '@sendbird/chat/message';
-import '../../consts-9ece4263.js';
-import '../../LocalizationContext-ae38446a.js';
-import '../../stringSet-6d89212b.js';
+import '../../consts-63e52cd8.js';
+import '../../LocalizationContext-8b7b48ec.js';
+import '../../stringSet-387833a3.js';
 import '../../ui/Icon.js';
-import '../../index-a900bd78.js';
+import '../../index-c4af409f.js';
 import '../../ui/Loader.js';
-import '../../utils-b42f4fab.js';
+import '../../utils-1d8ffd91.js';
 import '../../ui/IconButton.js';
 import '../../ui/ChannelAvatar.js';
 import '../../ui/Avatar.js';
 import '../../ui/ImageRenderer.js';
-import '../../utils-8e039c1b.js';
-import '../../MediaQueryContext-8d283dc2.js';
-import '../../utils-c8b489c4.js';
+import '../../utils-cb06f177.js';
+import '../../MediaQueryContext-744e0eb4.js';
+import '../../utils-28a3bfad.js';
 import './Message.js';
 import './SuggestedMentionList.js';
-import '../../const-befef81d.js';
-import '../../ThreadProvider-128d5041.js';
+import '../../const-71be96fe.js';
+import '../../ThreadProvider-637aa7f0.js';
 import '../../Thread/context/types.js';
 import '@sendbird/chat';
 import '../../ui/DateSeparator.js';
-import '../../color-c1b95a91.js';
+import '../../color-be032457.js';
 import '../../ui/MessageInput.js';
 import '../../ui/Button.js';
 import 'dompurify';
-import '../../consts-a8bc28bd.js';
-import '../../consts-bb6cbaee.js';
-import '../../consts-354db0d9.js';
-import '../../tokenize-2e969273.js';
+import '../../consts-5cbd0257.js';
+import '../../consts-c4702413.js';
+import '../../consts-967162b2.js';
+import '../../tokenize-c2f4569f.js';
 import '../../ui/MessageContent.js';
 import '../../ui/UserProfile.js';
 import '../../sendbirdSelectors.js';
-import '../../index-96f6e11b.js';
-import '../../index-1be3f6d7.js';
-import '../../index-8a4d2b6e.js';
+import '../../index-c3176145.js';
+import '../../index-c281a87e.js';
+import '../../index-0872eca4.js';
 import '../../ui/MessageItemMenu.js';
 import '../../ui/ContextMenu.js';
 import 'react-dom';
 import '../../ui/SortByRow.js';
-import '../../types-ebbbec62.js';
+import '../../types-34b09dae.js';
 import '../../ui/MessageItemReactionMenu.js';
 import '../../ui/ReactionButton.js';
+import '../../useLongPress-b803e920.js';
 import '../../ui/EmojiReactions.js';
+import '../../ui/ReactionBadge.js';
+import '../../ui/BottomSheet.js';
+import '../../index-a62f231a.js';
+import '../../ui/UserListItem.js';
+import '../../ui/MutedAvatarOverlay.js';
+import '../../ui/Checkbox.js';
 import '../../ui/Tooltip.js';
 import '../../ui/TooltipWrapper.js';
-import '../../ui/ReactionBadge.js';
+import '../../Message/context.js';
 import '../../ui/AdminMessage.js';
 import '../../ui/TextMessageItemBody.js';
-import '../../index-4554e20e.js';
-import '../../index.module-1c75b4f5.js';
-import '../../Message/context.js';
+import '../../index-29ec12d6.js';
+import '../../index.module-3529d572.js';
 import '../../ui/MentionLabel.js';
 import '../../ui/LinkLabel.js';
 import '../../ui/FileMessageItemBody.js';
@@ -80,26 +86,25 @@ import '../../ui/ThumbnailMessageItemBody.js';
 import '../../ui/OGMessageItemBody.js';
 import '../../ui/UnknownMessageItemBody.js';
 import '../../ui/QuoteMessage.js';
-import '../../useLongPress-8d44d259.js';
-import '../../ui/BottomSheet.js';
-import '../../index-14bb6832.js';
+import '../../index-de27e990.js';
 import '../../ui/ThreadReplies.js';
 import '../../ui/VoiceMessageItemBody.js';
 import '../../ui/ProgressBar.js';
 import '../../VoicePlayer/useVoicePlayer.js';
-import '../../index-ae8e6fc3.js';
+import '../../index-8d2735b6.js';
 import '../../VoiceRecorder/context.js';
 import '../../ui/PlaybackTime.js';
 import './FileViewer.js';
 import './RemoveMessageModal.js';
 import '../../ui/Modal.js';
-import '../../index-1556dc4a.js';
+import '../../index-2eaeb4c8.js';
+import '../../useDirtyGetMentions-a032c723.js';
 import './UnreadCount.js';
 import './FrozenNotification.js';
 import '../../ui/QuoteMessageInput.js';
-import '../../VoiceMessageInputWrapper-cbfa4f2b.js';
+import '../../VoiceMessageInputWrapper-f593346c.js';
 import '../../VoiceRecorder/useVoiceRecorder.js';
-import '../../index-88ab67cc.js';
+import '../../index-6ba87b2d.js';
 
 const ChannelUI = _ref => {
   var _globalStore$stores, _globalStore$stores$s, _globalStore$config, _globalStore$config2;

package/Channel/components/ChannelUI.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelUI.js","sources":["../../../src/modules/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","_ref","_globalStore$stores","_globalStore$stores$s","_globalStore$config","_globalStore$config2","isLoading","renderPlaceholderLoader","renderPlaceholderInvalid","renderPlaceholderEmpty","renderChannelHeader","renderMessage","renderMessageInput","renderTypingIndicator","renderCustomSeparator","renderFileUploadIcon","renderVoiceMessageIcon","renderSendMessageIcon","channelUrl","isInvalid","useChannelContext","globalStore","useSendbirdStateContext","sdkError","stores","sdkStore","error","logger","config","isOnline","React","createElement","className","PlaceHolder","type","PlaceHolderTypes","LOADING","NO_CHANNELS","WRONG","retryToConnect","info","ChannelHeader","MessageList","MessageInputWrapper","TypingIndicator","ConnectionStatus"],"mappings":"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"}
+{"version":3,"file":"ChannelUI.js","sources":["../../../src/modules/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","_ref","_globalStore$stores","_globalStore$stores$s","_globalStore$config","_globalStore$config2","isLoading","renderPlaceholderLoader","renderPlaceholderInvalid","renderPlaceholderEmpty","renderChannelHeader","renderMessage","renderMessageInput","renderTypingIndicator","renderCustomSeparator","renderFileUploadIcon","renderVoiceMessageIcon","renderSendMessageIcon","channelUrl","isInvalid","useChannelContext","globalStore","useSendbirdStateContext","sdkError","stores","sdkStore","error","logger","config","isOnline","React","createElement","className","PlaceHolder","type","PlaceHolderTypes","LOADING","NO_CHANNELS","WRONG","retryToConnect","info","ChannelHeader","MessageList","MessageInputWrapper","TypingIndicator","ConnectionStatus"],"mappings":"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"}

package/Channel/components/FileViewer.js

@@ -1,28 +1,28 @@
 import React__default from 'react';
 import { createPortal } from 'react-dom';
 import Avatar from '../../ui/Avatar.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-a900bd78.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-c4af409f.js';
 import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
-import { M as MODAL_ROOT } from '../../index-14bb6832.js';
-import { D as isSupportedFileView, E as isVideo, F as isImage } from '../../index-d8fdbe6f.js';
+import { M as MODAL_ROOT } from '../../index-a62f231a.js';
+import { x as isSupportedFileView, y as isVideo, z as isImage } from '../../index-2d3d2283.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import { u as useChannelContext } from '../../ChannelProvider-bba4a095.js';
+import { u as useChannelContext } from '../../ChannelProvider-6c5b02f1.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-c94bd88b.js';
+import '../../uuid-295e6b8b.js';
 import 'prop-types';
-import '../../stringSet-6d89212b.js';
-import '../../_rollupPluginBabelHelpers-eaf55eff.js';
+import '../../stringSet-387833a3.js';
+import '../../_rollupPluginBabelHelpers-8c286a7c.js';
 import '../../utils/message/getOutgoingMessageState.js';
 import '../../withSendbird.js';
-import '../../UserProfileContext-91e3b3f2.js';
-import '../../index-67dd0c26.js';
-import '../../index-321e838f.js';
-import '../../topics-8f4016e9.js';
-import '../../compareIds-74cf4016.js';
-import '../../const-3af04f0a.js';
+import '../../UserProfileContext-9040499b.js';
+import '../../index-f22b46c2.js';
+import '../../index-617179bd.js';
+import '../../topics-019712e5.js';
+import '../../compareIds-fa21456c.js';
+import '../../const-48b39769.js';
 import '@sendbird/chat/groupChannel';
 import '@sendbird/chat/message';
-import '../../consts-9ece4263.js';
+import '../../consts-63e52cd8.js';
 
 const FileViewerComponent = _ref => {
   let {

package/Channel/components/FrozenNotification.js

@@ -1,8 +1,8 @@
 import React__default, { useContext } from 'react';
-import { a as LocalizationContext } from '../../LocalizationContext-ae38446a.js';
-import { L as Label, a as LabelTypography } from '../../index-a900bd78.js';
-import '../../stringSet-6d89212b.js';
-import '../../index-321e838f.js';
+import { a as LocalizationContext } from '../../LocalizationContext-8b7b48ec.js';
+import { L as Label, a as LabelTypography } from '../../index-c4af409f.js';
+import '../../stringSet-387833a3.js';
+import '../../index-617179bd.js';
 import 'prop-types';
 
 const FrozenNotification = _ref => {

package/Channel/components/Message.js

@@ -1,86 +1,91 @@
 import React__default, { useState, useEffect, useRef, useLayoutEffect, useMemo } from 'react';
-import { f as format } from '../../index-67dd0c26.js';
+import { f as format } from '../../index-f22b46c2.js';
 import SuggestedMentionList from './SuggestedMentionList.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import { u as useChannelContext, a as isDisabledBecauseFrozen, b as isDisabledBecauseMuted } from '../../ChannelProvider-bba4a095.js';
-import { j as getClassName } from '../../index-d8fdbe6f.js';
-import { M as MAX_USER_MENTION_COUNT, a as MAX_USER_SUGGESTION_COUNT } from '../../const-3af04f0a.js';
+import { u as useChannelContext, a as isDisabledBecauseFrozen, b as isDisabledBecauseMuted } from '../../ChannelProvider-6c5b02f1.js';
+import { h as getClassName } from '../../index-2d3d2283.js';
+import { M as MAX_USER_MENTION_COUNT, a as MAX_USER_SUGGESTION_COUNT } from '../../const-48b39769.js';
 import DateSeparator from '../../ui/DateSeparator.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-a900bd78.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-c4af409f.js';
 import MessageInput from '../../ui/MessageInput.js';
 import MessageContent from '../../ui/MessageContent.js';
 import FileViewer from './FileViewer.js';
 import RemoveMessage from './RemoveMessageModal.js';
-import { M as MessageInputKeys } from '../../const-befef81d.js';
-import { u as useLocalization } from '../../LocalizationContext-ae38446a.js';
-import { u as useHandleOnScrollCallback } from '../../index-1556dc4a.js';
-import '../../index-321e838f.js';
+import { M as MessageInputKeys } from '../../const-71be96fe.js';
+import { u as useLocalization } from '../../LocalizationContext-8b7b48ec.js';
+import { a as useHandleOnScrollCallback } from '../../index-2eaeb4c8.js';
+import { u as useDirtyGetMentions } from '../../useDirtyGetMentions-a032c723.js';
+import '../../index-617179bd.js';
 import '../../ui/Icon.js';
 import 'prop-types';
 import '../../ui/Avatar.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-c94bd88b.js';
-import '../../ThreadProvider-128d5041.js';
+import '../../uuid-295e6b8b.js';
+import '../../ThreadProvider-637aa7f0.js';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../UserProfileContext-91e3b3f2.js';
-import '../../_rollupPluginBabelHelpers-eaf55eff.js';
+import '../../UserProfileContext-9040499b.js';
+import '../../_rollupPluginBabelHelpers-8c286a7c.js';
 import '../../Thread/context/types.js';
 import '@sendbird/chat';
-import '../../topics-8f4016e9.js';
+import '../../topics-019712e5.js';
 import '@sendbird/chat/groupChannel';
 import '@sendbird/chat/message';
-import '../../consts-9ece4263.js';
+import '../../consts-63e52cd8.js';
 import '../../withSendbird.js';
-import '../../compareIds-74cf4016.js';
-import '../../color-c1b95a91.js';
-import '../../stringSet-6d89212b.js';
+import '../../compareIds-fa21456c.js';
+import '../../color-be032457.js';
+import '../../stringSet-387833a3.js';
 import '../../ui/IconButton.js';
 import '../../ui/Button.js';
 import 'dompurify';
-import '../../consts-a8bc28bd.js';
-import '../../consts-bb6cbaee.js';
-import '../../consts-354db0d9.js';
-import '../../tokenize-2e969273.js';
+import '../../consts-5cbd0257.js';
+import '../../consts-c4702413.js';
+import '../../consts-967162b2.js';
+import '../../tokenize-c2f4569f.js';
 import '../../ui/UserProfile.js';
 import '../../sendbirdSelectors.js';
-import '../../utils-c8b489c4.js';
-import '../../index-96f6e11b.js';
+import '../../utils-28a3bfad.js';
+import '../../index-c3176145.js';
 import '../../ui/Loader.js';
-import '../../index-1be3f6d7.js';
-import '../../index-8a4d2b6e.js';
+import '../../index-c281a87e.js';
+import '../../index-0872eca4.js';
 import '../../ui/MessageItemMenu.js';
 import '../../ui/ContextMenu.js';
 import 'react-dom';
 import '../../ui/SortByRow.js';
-import '../../types-ebbbec62.js';
+import '../../types-34b09dae.js';
 import '../../ui/MessageItemReactionMenu.js';
 import '../../ui/ReactionButton.js';
+import '../../useLongPress-b803e920.js';
+import '../../MediaQueryContext-744e0eb4.js';
 import '../../ui/EmojiReactions.js';
+import '../../ui/ReactionBadge.js';
+import '../../ui/BottomSheet.js';
+import '../../index-a62f231a.js';
+import '../../ui/UserListItem.js';
+import '../../ui/MutedAvatarOverlay.js';
+import '../../ui/Checkbox.js';
 import '../../ui/Tooltip.js';
 import '../../ui/TooltipWrapper.js';
-import '../../ui/ReactionBadge.js';
+import '../../Message/context.js';
 import '../../ui/AdminMessage.js';
 import '../../ui/TextMessageItemBody.js';
-import '../../index-4554e20e.js';
-import '../../index.module-1c75b4f5.js';
-import '../../Message/context.js';
+import '../../index-29ec12d6.js';
+import '../../index.module-3529d572.js';
 import '../../ui/MentionLabel.js';
 import '../../ui/LinkLabel.js';
 import '../../ui/FileMessageItemBody.js';
 import '../../ui/TextButton.js';
-import '../../MediaQueryContext-8d283dc2.js';
 import '../../ui/ThumbnailMessageItemBody.js';
 import '../../ui/OGMessageItemBody.js';
 import '../../ui/UnknownMessageItemBody.js';
 import '../../ui/QuoteMessage.js';
-import '../../useLongPress-8d44d259.js';
-import '../../ui/BottomSheet.js';
-import '../../index-14bb6832.js';
+import '../../index-de27e990.js';
 import '../../ui/ThreadReplies.js';
 import '../../ui/VoiceMessageItemBody.js';
 import '../../ui/ProgressBar.js';
 import '../../VoicePlayer/useVoicePlayer.js';
-import '../../index-ae8e6fc3.js';
+import '../../index-8d2735b6.js';
 import '../../VoiceRecorder/context.js';
 import '../../ui/PlaybackTime.js';
 import '../../ui/Modal.js';
@@ -105,6 +110,7 @@ const Message = _ref => {
     chainTop,
     chainBottom,
     handleScroll,
+    handleMessageListHeightChange,
     renderCustomSeparator,
     renderEditInput,
     renderMessage,
@@ -118,7 +124,8 @@ const Message = _ref => {
     userId,
     isOnline,
     isMentionEnabled,
-    userMention
+    userMention,
+    logger
   } = globalStore.config;
   const maxUserMentionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount) || MAX_USER_MENTION_COUNT;
   const maxUserSuggestionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount) || MAX_USER_SUGGESTION_COUNT;
@@ -157,7 +164,6 @@ const Message = _ref => {
   const [messageInputEvent, setMessageInputEvent] = useState(null);
   const [selectedUser, setSelectedUser] = useState(null);
   const [mentionSuggestedUsers, setMentionSuggestedUsers] = useState([]);
-  const [ableMention, setAbleMention] = useState(true);
   const editMessageInputRef = useRef(null);
   const messageScrollRef = useRef(null);
   const displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !isDisabledBecauseFrozen(currentGroupChannel) && !isDisabledBecauseMuted(currentGroupChannel);
@@ -167,13 +173,12 @@ const Message = _ref => {
     onScroll: onScrollCallback,
     scrollRef: messageScrollRef
   });
-  useEffect(() => {
-    if ((mentionedUsers === null || mentionedUsers === void 0 ? void 0 : mentionedUsers.length) >= maxUserMentionCount) {
-      setAbleMention(false);
-    } else {
-      setAbleMention(true);
-    }
-  }, [mentionedUsers]);
+  const mentionNodes = useDirtyGetMentions({
+    ref: editMessageInputRef
+  }, {
+    logger
+  });
+  const ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < maxUserMentionCount;
   useEffect(() => {
     setMentionedUsers(mentionedUsers.filter(_ref2 => {
       let {
@@ -196,6 +201,9 @@ const Message = _ref => {
       handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll();
     }
   }, [showEdit, message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length]);
+  useLayoutEffect(() => {
+    handleMessageListHeightChange === null || handleMessageListHeightChange === void 0 ? void 0 : handleMessageListHeightChange();
+  }, []);
   useLayoutEffect(() => {
     let animationTimeout = null;
     let messageHighlightedTimeout = null;
@@ -255,6 +263,10 @@ const Message = _ref => {
   }, [message, renderCustomSeparator]);
   if (renderedMessage) {
     return /*#__PURE__*/React__default.createElement("div", {
+      // do not delete this data attribute, used for scroll to given message
+      // and also for testing
+      "data-sb-message-id": message.messageId,
+      "data-sb-created-at": message.createdAt,
       ref: messageScrollRef,
       className: getClassName(['sendbird-msg-hoc sendbird-msg--scroll-ref', isAnimated ? 'sendbird-msg-hoc__animated' : '', isHighlighted ? 'sendbird-msg-hoc__highlighted' : ''])
     },
@@ -350,6 +362,8 @@ const Message = _ref => {
     style: {
       marginBottom: '2px'
     },
+    "data-sb-message-id": message.messageId,
+    "data-sb-created-at": message.createdAt,
     ref: messageScrollRef
   }, hasSeparator && (renderedCustomSeparator || /*#__PURE__*/React__default.createElement(DateSeparator, null, /*#__PURE__*/React__default.createElement(Label, {
     type: LabelTypography.CAPTION_2,