@sendbird/uikit-react 3.5.0-rc.1 → 3.5.1

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

@@ -1 +1 @@
-{"version":3,"file":"FrozenNotification.js","sources":["../../../../src/smart-components/Channel/components/FrozenNotification/index.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport './frozen-notification.scss';\n\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\nimport Label, { LabelTypography } from '../../../../ui/Label';\n\nconst FrozenNotification = (): JSX.Element => {\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className=\"sendbird-notification sendbird-notification--frozen\">\n      <Label\n        className=\"sendbird-notification__text\"\n        type={LabelTypography.CAPTION_2}\n      >\n        {stringSet.CHANNEL_FROZEN}\n      </Label>\n    </div>\n  );\n}\n\nexport default FrozenNotification;\n"],"names":["FrozenNotification","stringSet","useContext","LocalizationContext","React","Label","LabelTypography","CAPTION_2","CHANNEL_FROZEN"],"mappings":";;;;;;;;;;;;;AAOMA,IAAAA,kBAAkB,GAAG,YAAA;AACjB,EAAA,IAAAC,SAAS,GAAKC,gBAAU,CAACC,uCAAD,CAAV,UAAd,CAAA;EACR,oBACEC,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,SAAS,EAAC,qDAAA;AAAf,GAAA,eACEA,wCAACC,cAAD,EAAA;AACE,IAAA,SAAS,EAAC,6BADZ;IAEE,IAAI,EAAEC,wBAAe,CAACC,SAAAA;AAFxB,GAAA,EAIGN,SAAS,CAACO,cAJb,CADF,CADF,CAAA;AAUD;;;;"}
+{"version":3,"file":"FrozenNotification.js","sources":["../../../../src/modules/Channel/components/FrozenNotification/index.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport './frozen-notification.scss';\n\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\nimport Label, { LabelTypography } from '../../../../ui/Label';\n\ninterface FrozenNotificationProps {\n  className?: string;\n}\n\nconst FrozenNotification = ({\n  className = '',\n}: FrozenNotificationProps): React.ReactElement => {\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className={`sendbird-notification sendbird-notification--frozen ${className}`}>\n      <Label\n        className=\"sendbird-notification__text\"\n        type={LabelTypography.CAPTION_2}\n      >\n        {stringSet.CHANNEL_FROZEN}\n      </Label>\n    </div>\n  );\n};\n\nexport default FrozenNotification;\n"],"names":["FrozenNotification","_ref","className","stringSet","useContext","LocalizationContext","React","createElement","Label","type","LabelTypography","CAPTION_2","CHANNEL_FROZEN"],"mappings":";;;;;;;;;;;;;AAWMA,MAAAA,kBAAkB,GAAGC,IAAA,IAEwB;EAAA,IAFvB;AAC1BC,IAAAA,SAAS,GAAG,EAAA;AACW,GAAC,GAAAD,IAAA,CAAA;EACxB,MAAM;AAAEE,IAAAA,SAAAA;AAAU,GAAC,GAAGC,gBAAU,CAACC,uCAAmB,CAAC,CAAA;EACrD,oBACEC,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKL,SAAS,EAAG,uDAAsDA,SAAU,CAAA,CAAA;AAAE,GAAA,eACjFI,yBAAA,CAAAC,aAAA,CAACC,cAAK,EAAA;AACJN,IAAAA,SAAS,EAAC,6BAA6B;IACvCO,IAAI,EAAEC,wBAAe,CAACC,SAAAA;AAAU,GAAA,EAE/BR,SAAS,CAACS,cAAc,CACnB,CACJ,CAAA;AAEV;;;;"}

package/cjs/Channel/components/Message.js

@@ -1,195 +1,197 @@
 'use strict';
 
-var tslib_es6 = require('../../tslib.es6-b8ba50ef.js');
 var React = require('react');
-var index$1 = require('../../index-8de8f28a.js');
+var index$2 = require('../../index-a01673e9.js');
 var Channel_components_SuggestedMentionList = require('./SuggestedMentionList.js');
 var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
-var Channel_context = require('../../ChannelProvider-fc58e60e.js');
-var index = require('../../index-62c1bdfc.js');
-var _const = require('../../const-015e5589.js');
+var Channel_context = require('../../ChannelProvider-2c7ec64b.js');
+var index$1 = require('../../index-32244c73.js');
+var _const = require('../../const-b3585ae0.js');
 var ui_DateSeparator = require('../../ui/DateSeparator.js');
-var ui_Label = require('../../index-5d5497c2.js');
+var ui_Label = require('../../index-f6621210.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-fd64914b.js');
-var LocalizationContext = require('../../LocalizationContext-bddc5c2b.js');
-require('../../index-d14a43c4.js');
+var _const$1 = require('../../const-8728e4b6.js');
+var LocalizationContext = require('../../LocalizationContext-bd54275c.js');
+var index = require('../../index-7bd7f678.js');
+var useDirtyGetMentions = require('../../useDirtyGetMentions-792a65af.js');
+require('../../index-745c9ce1.js');
 require('../../ui/Icon.js');
 require('prop-types');
 require('../../ui/Avatar.js');
 require('../../ui/ImageRenderer.js');
-require('../../uuid-2475ef6c.js');
-require('../../ThreadProvider-389f5031.js');
+require('../../uuid-97ce2508.js');
+require('../../ThreadProvider-09392c06.js');
 require('../../utils/message/getOutgoingMessageState.js');
-require('../../UserProfileContext-8d0dee57.js');
+require('../../UserProfileContext-10e1ac24.js');
+require('../../_rollupPluginBabelHelpers-53e83515.js');
 require('../../Thread/context/types.js');
 require('@sendbird/chat');
-require('../../topics-56842e14.js');
+require('../../topics-77576a9c.js');
 require('@sendbird/chat/groupChannel');
 require('@sendbird/chat/message');
+require('../../consts-aa056322.js');
 require('../../withSendbird.js');
-require('../../_rollupPluginBabelHelpers-fed1e122.js');
-require('../../compareIds-4124b297.js');
-require('../../ui/ContextMenu.js');
-require('react-dom');
-require('../../ui/SortByRow.js');
-require('../../stringSet-3e6167ef.js');
-require('../../ui/ReactionButton.js');
-require('../../color-f47044b3.js');
-require('react-dom/server');
+require('../../compareIds-03cd7437.js');
+require('../../resolvedReplyType-da86056c.js');
+require('../../color-e7fbb496.js');
+require('../../stringSet-d212a015.js');
 require('../../ui/IconButton.js');
 require('../../ui/Button.js');
-require('../../ui/MentionUserLabel.js');
+require('dompurify');
+require('../../consts-6bd1cfe3.js');
+require('../../consts-a0e35044.js');
+require('../../consts-a006bc78.js');
+require('../../tokenize-b019fb84.js');
+require('../../index.module-02ae6df9.js');
 require('../../ui/UserProfile.js');
 require('../../sendbirdSelectors.js');
-require('../../utils-374d57b4.js');
-require('../../index-3a4f8219.js');
+require('../../utils-85ff9137.js');
+require('../../index-9a94e768.js');
 require('../../ui/Loader.js');
-require('../../index-abbc8024.js');
-require('../../index-343cd84a.js');
-require('../../index-40e4653a.js');
+require('../../index-9feae73e.js');
+require('../../index-165d52b7.js');
 require('../../ui/MessageItemMenu.js');
+require('../../ui/ContextMenu.js');
+require('react-dom');
+require('../../ui/SortByRow.js');
+require('../../types-36ee2d00.js');
 require('../../ui/MessageItemReactionMenu.js');
+require('../../ui/ReactionButton.js');
+require('../../useLongPress-50d2028a.js');
+require('../../MediaQueryContext-ebcb159a.js');
 require('../../ui/EmojiReactions.js');
+require('../../ui/ReactionBadge.js');
+require('../../ui/BottomSheet.js');
+require('../../index-8ada6055.js');
+require('../../ui/UserListItem.js');
+require('../../ui/MutedAvatarOverlay.js');
+require('../../ui/Checkbox.js');
 require('../../ui/Tooltip.js');
 require('../../ui/TooltipWrapper.js');
-require('../../ui/ReactionBadge.js');
+require('../../Message/context.js');
 require('../../ui/AdminMessage.js');
 require('../../ui/TextMessageItemBody.js');
-require('../../ui/Word.js');
-require('../../ui/LinkLabel.js');
+require('../../index-d0b4f3c0.js');
 require('../../ui/MentionLabel.js');
+require('../../ui/LinkLabel.js');
 require('../../ui/FileMessageItemBody.js');
 require('../../ui/TextButton.js');
-require('../../MediaQueryContext-4711a81f.js');
 require('../../ui/ThumbnailMessageItemBody.js');
 require('../../ui/OGMessageItemBody.js');
 require('../../ui/UnknownMessageItemBody.js');
 require('../../ui/QuoteMessage.js');
-require('../../useLongPress-99c66f7f.js');
-require('../../ui/BottomSheet.js');
-require('../../index-c5cd589d.js');
+require('../../index-4a2ec2ae.js');
 require('../../ui/ThreadReplies.js');
+require('../../ui/VoiceMessageItemBody.js');
+require('../../ui/ProgressBar.js');
+require('../../VoicePlayer/useVoicePlayer.js');
+require('../../index-7d2d89a2.js');
+require('../../VoiceRecorder/context.js');
 require('../../ui/Modal.js');
+require('../../ui/PlaybackTime.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var Message = function (props) {
-  var _a, _b;
-
-  var message = props.message,
-      hasSeparator = props.hasSeparator,
-      chainTop = props.chainTop,
-      chainBottom = props.chainBottom,
-      handleScroll = props.handleScroll,
-      renderCustomSeparator = props.renderCustomSeparator,
-      renderEditInput = props.renderEditInput,
-      renderMessage = props.renderMessage,
-      renderMessageContent = props.renderMessageContent;
-  var dateLocale = LocalizationContext.useLocalization().dateLocale;
-  var globalStore = useSendbirdStateContext();
-
-  var _c = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config,
-      userId = _c.userId,
-      isOnline = _c.isOnline,
-      isMentionEnabled = _c.isMentionEnabled,
-      userMention = _c.userMention;
-
-  var maxUserMentionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount) || _const.MAX_USER_MENTION_COUNT;
-  var maxUserSuggestionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount) || _const.MAX_USER_SUGGESTION_COUNT;
-
-  var _d = Channel_context.useChannelContext(),
-      initialized = _d.initialized,
-      currentGroupChannel = _d.currentGroupChannel,
-      highLightedMessageId = _d.highLightedMessageId,
-      setHighLightedMessageId = _d.setHighLightedMessageId,
-      animatedMessageId = _d.animatedMessageId,
-      setAnimatedMessageId = _d.setAnimatedMessageId,
-      updateMessage = _d.updateMessage,
-      scrollToMessage = _d.scrollToMessage,
-      replyType = _d.replyType,
-      threadReplySelectType = _d.threadReplySelectType,
-      isReactionEnabled = _d.isReactionEnabled,
-      toggleReaction = _d.toggleReaction,
-      emojiContainer = _d.emojiContainer,
-      nicknamesMap = _d.nicknamesMap,
-      setQuoteMessage = _d.setQuoteMessage,
-      resendMessage = _d.resendMessage,
-      renderUserMentionItem = _d.renderUserMentionItem,
-      onReplyInThread = _d.onReplyInThread,
-      onQuoteMessageClick = _d.onQuoteMessageClick,
-      onMessageAnimated = _d.onMessageAnimated,
-      onMessageHighlighted = _d.onMessageHighlighted;
-
-  var _e = React.useState(false),
-      showEdit = _e[0],
-      setShowEdit = _e[1];
-
-  var _f = React.useState(false),
-      showRemove = _f[0],
-      setShowRemove = _f[1];
-
-  var _g = React.useState(false),
-      showFileViewer = _g[0],
-      setShowFileViewer = _g[1];
-
-  var _h = React.useState(false),
-      isAnimated = _h[0],
-      setIsAnimated = _h[1];
-
-  var _j = React.useState(false),
-      isHighlighted = _j[0],
-      setIsHighlighted = _j[1];
-
-  var _k = React.useState(''),
-      mentionNickname = _k[0],
-      setMentionNickname = _k[1];
-
-  var _l = React.useState([]),
-      mentionedUsers = _l[0],
-      setMentionedUsers = _l[1];
-
-  var _m = React.useState([]),
-      mentionedUserIds = _m[0],
-      setMentionedUserIds = _m[1];
-
-  var _o = React.useState(null),
-      messageInputEvent = _o[0],
-      setMessageInputEvent = _o[1];
-
-  var _p = React.useState(null),
-      selectedUser = _p[0],
-      setSelectedUser = _p[1];
-
-  var _q = React.useState([]),
-      mentionSuggestedUsers = _q[0],
-      setMentionSuggestedUsers = _q[1];
-
-  var _r = React.useState(true),
-      ableMention = _r[0],
-      setAbleMention = _r[1];
-
-  var editMessageInputRef = React.useRef(null);
-  var useMessageScrollRef = 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 () {
-    if ((mentionedUsers === null || mentionedUsers === void 0 ? void 0 : mentionedUsers.length) >= maxUserMentionCount) {
-      setAbleMention(false);
+const useDidMountEffect = (func, deps) => {
+  const [didMount, setDidmount] = React.useState(false);
+  React.useEffect(() => {
+    if (didMount) {
+      func();
     } else {
-      setAbleMention(true);
+      setDidmount(true);
     }
-  }, [mentionedUsers]);
-  React.useEffect(function () {
-    setMentionedUsers(mentionedUsers.filter(function (_a) {
-      var userId = _a.userId;
-      var i = mentionedUserIds.indexOf(userId);
+  }, deps);
+};
 
+// todo: Refactor this component, is too complex now
+const Message = _ref => {
+  var _message$reactions, _message$isUserMessag;
+  let {
+    message,
+    hasSeparator,
+    chainTop,
+    chainBottom,
+    handleScroll,
+    handleMessageListHeightChange,
+    renderCustomSeparator,
+    renderEditInput,
+    renderMessage,
+    renderMessageContent
+  } = _ref;
+  const {
+    dateLocale
+  } = LocalizationContext.useLocalization();
+  const globalStore = useSendbirdStateContext();
+  const {
+    userId,
+    isOnline,
+    isMentionEnabled,
+    userMention,
+    logger
+  } = globalStore.config;
+  const maxUserMentionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount) || _const.MAX_USER_MENTION_COUNT;
+  const maxUserSuggestionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount) || _const.MAX_USER_SUGGESTION_COUNT;
+  const {
+    initialized,
+    currentGroupChannel,
+    highLightedMessageId,
+    setHighLightedMessageId,
+    animatedMessageId,
+    setAnimatedMessageId,
+    updateMessage,
+    scrollToMessage,
+    replyType,
+    threadReplySelectType,
+    isReactionEnabled,
+    toggleReaction,
+    emojiContainer,
+    nicknamesMap,
+    setQuoteMessage,
+    resendMessage,
+    renderUserMentionItem,
+    onReplyInThread,
+    onQuoteMessageClick,
+    onMessageAnimated,
+    onMessageHighlighted,
+    onScrollCallback
+  } = Channel_context.useChannelContext();
+  const [showEdit, setShowEdit] = React.useState(false);
+  const [showRemove, setShowRemove] = React.useState(false);
+  const [showFileViewer, setShowFileViewer] = React.useState(false);
+  const [isAnimated, setIsAnimated] = React.useState(false);
+  const [isHighlighted, setIsHighlighted] = React.useState(false);
+  const [mentionNickname, setMentionNickname] = React.useState('');
+  const [mentionedUsers, setMentionedUsers] = React.useState([]);
+  const [mentionedUserIds, setMentionedUserIds] = React.useState([]);
+  const [messageInputEvent, setMessageInputEvent] = React.useState(null);
+  const [selectedUser, setSelectedUser] = React.useState(null);
+  const [mentionSuggestedUsers, setMentionSuggestedUsers] = React.useState([]);
+  const editMessageInputRef = React.useRef(null);
+  const messageScrollRef = React.useRef(null);
+  const displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !Channel_context.isDisabledBecauseFrozen(currentGroupChannel) && !Channel_context.isDisabledBecauseMuted(currentGroupChannel);
+  const disabled = !initialized || Channel_context.isDisabledBecauseFrozen(currentGroupChannel) || Channel_context.isDisabledBecauseMuted(currentGroupChannel) || !isOnline;
+  const handleOnScroll = index.useHandleOnScrollCallback({
+    hasMore: false,
+    onScroll: onScrollCallback,
+    scrollRef: messageScrollRef
+  });
+  const mentionNodes = useDirtyGetMentions.useDirtyGetMentions({
+    ref: editMessageInputRef
+  }, {
+    logger
+  });
+  const ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < maxUserMentionCount;
+  React.useEffect(() => {
+    setMentionedUsers(mentionedUsers.filter(_ref2 => {
+      let {
+        userId
+      } = _ref2;
+      const i = mentionedUserIds.indexOf(userId);
       if (i < 0) {
         return false;
       } else {
@@ -198,97 +200,108 @@ var Message = function (props) {
       }
     }));
   }, [mentionedUserIds]);
-  React.useLayoutEffect(function () {
-    handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll();
-  }, [showEdit, (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.length]);
-  React.useLayoutEffect(function () {
-    if (highLightedMessageId === message.messageId) {
-      if (useMessageScrollRef && useMessageScrollRef.current) {
-        useMessageScrollRef.current.scrollIntoView({
-          block: 'center',
-          inline: 'center'
-        });
-        setIsAnimated(false);
-        setTimeout(function () {
-          setIsHighlighted(true);
-        }, 500);
-        setTimeout(function () {
-          setHighLightedMessageId(0);
-          onMessageHighlighted === null || onMessageHighlighted === void 0 ? void 0 : onMessageHighlighted();
-        }, 1600);
-      }
+
+  // Move the messsage list scroll when the last message's height is changed by reactions
+  useDidMountEffect(() => {
+    var _currentGroupChannel$;
+    if ((currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : (_currentGroupChannel$ = currentGroupChannel.lastMessage) === null || _currentGroupChannel$ === void 0 ? void 0 : _currentGroupChannel$.messageId) === (message === null || message === void 0 ? void 0 : message.messageId)) {
+      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]);
+  React.useLayoutEffect(() => {
+    handleMessageListHeightChange === null || handleMessageListHeightChange === void 0 ? void 0 : handleMessageListHeightChange();
+  }, []);
+  React.useLayoutEffect(() => {
+    let animationTimeout = null;
+    let messageHighlightedTimeout = null;
+    if (highLightedMessageId === message.messageId && messageScrollRef !== null && messageScrollRef !== void 0 && messageScrollRef.current) {
+      handleOnScroll();
+      setIsAnimated(false);
+      animationTimeout = setTimeout(() => {
+        setIsHighlighted(true);
+      }, 500);
+      messageHighlightedTimeout = setTimeout(() => {
+        setHighLightedMessageId(0);
+        onMessageHighlighted === null || onMessageHighlighted === void 0 ? void 0 : onMessageHighlighted();
+      }, 1600);
     } else {
       setIsHighlighted(false);
     }
-  }, [highLightedMessageId, useMessageScrollRef.current, message.messageId]);
-  React.useLayoutEffect(function () {
-    if (animatedMessageId === message.messageId) {
-      if (useMessageScrollRef && useMessageScrollRef.current) {
-        useMessageScrollRef.current.scrollIntoView({
-          block: 'center',
-          inline: 'center'
-        });
-        setIsHighlighted(false);
-        setTimeout(function () {
-          setIsAnimated(true);
-        }, 500);
-        setTimeout(function () {
-          setAnimatedMessageId(0);
-          onMessageAnimated === null || onMessageAnimated === void 0 ? void 0 : onMessageAnimated();
-        }, 1600);
-      }
+    return () => {
+      clearTimeout(animationTimeout);
+      clearTimeout(messageHighlightedTimeout);
+    };
+  }, [highLightedMessageId, messageScrollRef.current, message.messageId]);
+  React.useLayoutEffect(() => {
+    let animationTimeout = null;
+    let messageAnimatedTimeout = null;
+    if (animatedMessageId === message.messageId && messageScrollRef !== null && messageScrollRef !== void 0 && messageScrollRef.current) {
+      handleOnScroll();
+      setIsHighlighted(false);
+      animationTimeout = setTimeout(() => {
+        setIsAnimated(true);
+      }, 500);
+      messageAnimatedTimeout = setTimeout(() => {
+        setAnimatedMessageId(0);
+        onMessageAnimated === null || onMessageAnimated === void 0 ? void 0 : onMessageAnimated();
+      }, 1600);
     } else {
       setIsAnimated(false);
     }
-  }, [animatedMessageId, useMessageScrollRef.current, message.messageId, onMessageAnimated]);
-  var renderedMessage = React.useMemo(function () {
+    return () => {
+      clearTimeout(animationTimeout);
+      clearTimeout(messageAnimatedTimeout);
+    };
+  }, [animatedMessageId, messageScrollRef.current, message.messageId, onMessageAnimated]);
+  const renderedMessage = React.useMemo(() => {
     return renderMessage === null || renderMessage === void 0 ? void 0 : renderMessage({
-      message: message,
-      chainTop: chainTop,
-      chainBottom: chainBottom
+      message,
+      chainTop,
+      chainBottom
     });
   }, [message, renderMessage]);
-  var renderedCustomSeparator = React.useMemo(function () {
+  const renderedCustomSeparator = React.useMemo(() => {
     if (renderCustomSeparator) {
       return renderCustomSeparator === null || renderCustomSeparator === void 0 ? void 0 : renderCustomSeparator({
         message: message
       });
     }
-
     return null;
   }, [message, renderCustomSeparator]);
-
   if (renderedMessage) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      ref: useMessageScrollRef,
-      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
+      // 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: index$1.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, {
       type: ui_Label.LabelTypography.CAPTION_2,
       color: ui_Label.LabelColors.ONBACKGROUND_2
-    }, index$1.format(message.createdAt, 'MMMM dd, yyyy', {
+    }, index$2.format(message.createdAt, 'MMMM dd, yyyy', {
       locale: dateLocale
     })))), renderedMessage);
   }
-
-  if (showEdit && ((_b = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _b === void 0 ? void 0 : _b.call(message))) {
+  if (showEdit && message !== null && message !== void 0 && (_message$isUserMessag = message.isUserMessage) !== null && _message$isUserMessag !== void 0 && _message$isUserMessag.call(message)) {
     return (renderEditInput === null || renderEditInput === void 0 ? void 0 : renderEditInput()) || /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, displaySuggestedMentionList && /*#__PURE__*/React__default["default"].createElement(Channel_components_SuggestedMentionList, {
       targetNickname: mentionNickname,
       inputEvent: messageInputEvent,
       renderUserMentionItem: renderUserMentionItem,
-      onUserItemClick: function (user) {
+      onUserItemClick: user => {
         if (user) {
-          setMentionedUsers(tslib_es6.__spreadArray(tslib_es6.__spreadArray([], mentionedUsers, true), [user], false));
+          setMentionedUsers([...mentionedUsers, user]);
         }
-
         setMentionNickname('');
         setSelectedUser(user);
         setMessageInputEvent(null);
       },
-      onFocusItemChange: function () {
+      onFocusItemChange: () => {
         setMessageInputEvent(null);
       },
-      onFetchUsers: function (users) {
+      onFetchUsers: users => {
         setMentionSuggestedUsers(users);
       },
       ableAddMention: ableMention,
@@ -296,74 +309,74 @@ var Message = function (props) {
       maxSuggestionCount: maxUserSuggestionCount
     }), /*#__PURE__*/React__default["default"].createElement(ui_MessageInput, {
       isEdit: true,
+      channel: currentGroupChannel,
       disabled: disabled,
       ref: editMessageInputRef,
       mentionSelectedUser: selectedUser,
       isMentionEnabled: isMentionEnabled,
       message: message,
-      onStartTyping: function () {
-        var _a;
-
-        (_a = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.startTyping) === null || _a === void 0 ? void 0 : _a.call(currentGroupChannel);
+      onStartTyping: () => {
+        var _currentGroupChannel$2;
+        currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : (_currentGroupChannel$2 = currentGroupChannel.startTyping) === null || _currentGroupChannel$2 === void 0 ? void 0 : _currentGroupChannel$2.call(currentGroupChannel);
       },
-      onUpdateMessage: function (_a) {
-        var _b;
-
-        var messageId = _a.messageId,
-            message = _a.message,
-            mentionTemplate = _a.mentionTemplate;
+      onUpdateMessage: _ref3 => {
+        var _currentGroupChannel$3;
+        let {
+          messageId,
+          message,
+          mentionTemplate
+        } = _ref3;
         updateMessage({
-          messageId: messageId,
-          message: message,
-          mentionedUsers: mentionedUsers,
-          mentionTemplate: mentionTemplate
+          messageId,
+          message,
+          mentionedUsers,
+          mentionTemplate
         });
         setShowEdit(false);
-        (_b = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.endTyping) === null || _b === void 0 ? void 0 : _b.call(currentGroupChannel);
+        currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : (_currentGroupChannel$3 = currentGroupChannel.endTyping) === null || _currentGroupChannel$3 === void 0 ? void 0 : _currentGroupChannel$3.call(currentGroupChannel);
       },
-      onCancelEdit: function () {
-        var _a;
-
+      onCancelEdit: () => {
+        var _currentGroupChannel$4;
         setMentionNickname('');
         setMentionedUsers([]);
         setMentionedUserIds([]);
         setMentionSuggestedUsers([]);
         setShowEdit(false);
-        (_a = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.endTyping) === null || _a === void 0 ? void 0 : _a.call(currentGroupChannel);
+        currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : (_currentGroupChannel$4 = currentGroupChannel.endTyping) === null || _currentGroupChannel$4 === void 0 ? void 0 : _currentGroupChannel$4.call(currentGroupChannel);
       },
-      onUserMentioned: function (user) {
+      onUserMentioned: user => {
         if ((selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userId) === (user === null || user === void 0 ? void 0 : user.userId)) {
           setSelectedUser(null);
           setMentionNickname('');
         }
       },
-      onMentionStringChange: function (mentionText) {
+      onMentionStringChange: mentionText => {
         setMentionNickname(mentionText);
       },
-      onMentionedUserIdsUpdated: function (userIds) {
+      onMentionedUserIdsUpdated: userIds => {
         setMentionedUserIds(userIds);
       },
-      onKeyDown: function (e) {
+      onKeyDown: e => {
         if (displaySuggestedMentionList && (mentionSuggestedUsers === null || mentionSuggestedUsers === void 0 ? void 0 : mentionSuggestedUsers.length) > 0 && (e.key === _const$1.MessageInputKeys.Enter && ableMention || e.key === _const$1.MessageInputKeys.ArrowUp || e.key === _const$1.MessageInputKeys.ArrowDown)) {
           setMessageInputEvent(e);
           return true;
         }
-
         return false;
       }
     }));
   }
-
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index.getClassName(['sendbird-msg-hoc sendbird-msg--scroll-ref', isAnimated ? 'sendbird-msg-hoc__animated' : '', isHighlighted ? 'sendbird-msg-hoc__highlighted' : '']),
+    className: index$1.getClassName(['sendbird-msg-hoc sendbird-msg--scroll-ref', isAnimated ? 'sendbird-msg-hoc__animated' : '', isHighlighted ? 'sendbird-msg-hoc__highlighted' : '']),
     style: {
       marginBottom: '2px'
     },
-    ref: useMessageScrollRef
+    "data-sb-message-id": message.messageId,
+    "data-sb-created-at": message.createdAt,
+    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
-  }, index$1.format(message.createdAt, 'MMMM dd, yyyy', {
+  }, index$2.format(message.createdAt, 'MMMM dd, yyyy', {
     locale: dateLocale
   })))), (renderMessageContent === null || renderMessageContent === void 0 ? void 0 : renderMessageContent()) || /*#__PURE__*/React__default["default"].createElement(ui_MessageContent, {
     className: "sendbird-message-hoc__message-content",
@@ -386,17 +399,14 @@ var Message = function (props) {
     toggleReaction: toggleReaction,
     setQuoteMessage: setQuoteMessage,
     onReplyInThread: onReplyInThread,
-    onQuoteMessageClick: onQuoteMessageClick
+    onQuoteMessageClick: onQuoteMessageClick,
+    onMessageHeightChange: handleScroll
   }), showRemove && /*#__PURE__*/React__default["default"].createElement(Channel_components_RemoveMessageModal, {
     message: message,
-    onCancel: function () {
-      return setShowRemove(false);
-    }
+    onCancel: () => setShowRemove(false)
   }), showFileViewer && /*#__PURE__*/React__default["default"].createElement(Channel_components_FileViewer["default"], {
     message: message,
-    onCancel: function () {
-      return setShowFileViewer(false);
-    }
+    onCancel: () => setShowFileViewer(false)
   }));
 };