@sendbird/uikit-react 3.5.0-beta.0 → 3.5.0-mobile-web-1

package/Channel/components/Message.js

@@ -1,189 +1,190 @@
-import { a as __spreadArray } from '../../tslib.es6-bcead7e6.js';
-import React__default, { useState, useRef, useEffect, useLayoutEffect, useMemo } from 'react';
-import { f as format } from '../../index-3f26a31c.js';
+import React__default, { useState, useEffect, useRef, useLayoutEffect, useMemo } from 'react';
+import { f as format } from '../../index-f1701c11.js';
 import SuggestedMentionList from './SuggestedMentionList.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import { u as useChannelContext, a as isDisabledBecauseFrozen, b as isDisabledBecauseMuted } from '../../ChannelProvider-554e7116.js';
-import { h as getClassName } from '../../index-5f08f486.js';
-import { M as MAX_USER_MENTION_COUNT, a as MAX_USER_SUGGESTION_COUNT } from '../../const-9d11f204.js';
+import { u as useChannelContext, a as isDisabledBecauseFrozen, b as isDisabledBecauseMuted } from '../../ChannelProvider-b41fde4c.js';
+import { h as getClassName } from '../../index-e2601165.js';
+import { M as MAX_USER_MENTION_COUNT, a as MAX_USER_SUGGESTION_COUNT } from '../../const-e51dda0c.js';
 import DateSeparator from '../../ui/DateSeparator.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-44470dab.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-4023d1b2.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-83764204.js';
-import { u as useLocalization } from '../../LocalizationContext-4df0cc32.js';
-import '../../index-07e060cd.js';
+import { M as MessageInputKeys } from '../../const-8daee9fc.js';
+import { u as useLocalization } from '../../LocalizationContext-57b46f6c.js';
+import { a as useHandleOnScrollCallback } from '../../index-3f1fa3f9.js';
+import { u as useDirtyGetMentions } from '../../useDirtyGetMentions-aac697f4.js';
+import '../../index-865112db.js';
 import '../../ui/Icon.js';
 import 'prop-types';
 import '../../ui/Avatar.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-286ed926.js';
-import '../../ThreadProvider-6974fb3e.js';
+import '../../uuid-1f1bbd9c.js';
+import '../../ThreadProvider-a3d3b241.js';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../UserProfileContext-c58a7b86.js';
+import '../../UserProfileContext-29074346.js';
+import '../../_rollupPluginBabelHelpers-0bc76382.js';
 import '../../Thread/context/types.js';
 import '@sendbird/chat';
-import '../../topics-351ea731.js';
+import '../../topics-5ff88d6f.js';
 import '@sendbird/chat/groupChannel';
 import '@sendbird/chat/message';
+import '../../consts-3c0ff1ed.js';
 import '../../withSendbird.js';
-import '../../_rollupPluginBabelHelpers-498add61.js';
-import '../../compareIds-9430f9d8.js';
-import '../../ui/ContextMenu.js';
-import 'react-dom';
-import '../../ui/SortByRow.js';
-import '../../stringSet-d555d877.js';
-import '../../ui/ReactionButton.js';
-import '../../color-ff5f9069.js';
-import 'react-dom/server';
+import '../../compareIds-bc881fe7.js';
+import '../../color-2ed716e6.js';
+import '../../stringSet-7a8ce1ce.js';
 import '../../ui/IconButton.js';
 import '../../ui/Button.js';
-import '../../ui/MentionUserLabel.js';
+import 'dompurify';
+import '../../consts-d0b365df.js';
+import '../../consts-d0cfee49.js';
+import '../../consts-7aab5aff.js';
+import '../../tokenize-003bf3f7.js';
 import '../../ui/UserProfile.js';
 import '../../sendbirdSelectors.js';
-import '../../utils-e720e03a.js';
-import '../../index-1b91b116.js';
+import '../../utils-388a790e.js';
+import '../../index-fa140763.js';
 import '../../ui/Loader.js';
-import '../../index-defabece.js';
-import '../../index-d3f6dbb9.js';
-import '../../index-1572c90f.js';
+import '../../index-1ec11afb.js';
+import '../../index-37531f98.js';
 import '../../ui/MessageItemMenu.js';
+import '../../ui/ContextMenu.js';
+import 'react-dom';
+import '../../ui/SortByRow.js';
+import '../../types-bffbc5f5.js';
 import '../../ui/MessageItemReactionMenu.js';
+import '../../ui/ReactionButton.js';
+import '../../useLongPress-fbab35a9.js';
+import '../../MediaQueryContext-fbe7af77.js';
 import '../../ui/EmojiReactions.js';
+import '../../ui/ReactionBadge.js';
+import '../../ui/BottomSheet.js';
+import '../../index-7bff4ce0.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 '../../ui/Word.js';
-import '../../ui/LinkLabel.js';
+import '../../index-5141f766.js';
+import '../../index.module-9202ebbd.js';
 import '../../ui/MentionLabel.js';
+import '../../ui/LinkLabel.js';
 import '../../ui/FileMessageItemBody.js';
 import '../../ui/TextButton.js';
-import '../../MediaQueryContext-74183e34.js';
 import '../../ui/ThumbnailMessageItemBody.js';
 import '../../ui/OGMessageItemBody.js';
 import '../../ui/UnknownMessageItemBody.js';
 import '../../ui/QuoteMessage.js';
-import '../../useLongPress-794838b8.js';
-import '../../ui/BottomSheet.js';
-import '../../index-e5b78039.js';
+import '../../index-ac642e0b.js';
 import '../../ui/ThreadReplies.js';
+import '../../ui/VoiceMessageItemBody.js';
+import '../../ui/ProgressBar.js';
+import '../../VoicePlayer/useVoicePlayer.js';
+import '../../index-d847a382.js';
+import '../../VoiceRecorder/context.js';
+import '../../ui/PlaybackTime.js';
 import '../../ui/Modal.js';
 
-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 = 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) || MAX_USER_MENTION_COUNT;
-  var maxUserSuggestionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount) || MAX_USER_SUGGESTION_COUNT;
-
-  var _d = 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 = useState(false),
-      showEdit = _e[0],
-      setShowEdit = _e[1];
-
-  var _f = useState(false),
-      showRemove = _f[0],
-      setShowRemove = _f[1];
-
-  var _g = useState(false),
-      showFileViewer = _g[0],
-      setShowFileViewer = _g[1];
-
-  var _h = useState(false),
-      isAnimated = _h[0],
-      setIsAnimated = _h[1];
-
-  var _j = useState(false),
-      isHighlighted = _j[0],
-      setIsHighlighted = _j[1];
-
-  var _k = useState(''),
-      mentionNickname = _k[0],
-      setMentionNickname = _k[1];
-
-  var _l = useState([]),
-      mentionedUsers = _l[0],
-      setMentionedUsers = _l[1];
-
-  var _m = useState([]),
-      mentionedUserIds = _m[0],
-      setMentionedUserIds = _m[1];
-
-  var _o = useState(null),
-      messageInputEvent = _o[0],
-      setMessageInputEvent = _o[1];
-
-  var _p = useState(null),
-      selectedUser = _p[0],
-      setSelectedUser = _p[1];
-
-  var _q = useState([]),
-      mentionSuggestedUsers = _q[0],
-      setMentionSuggestedUsers = _q[1];
-
-  var _r = useState(true),
-      ableMention = _r[0],
-      setAbleMention = _r[1];
-
-  var editMessageInputRef = useRef(null);
-  var useMessageScrollRef = useRef(null);
-  var displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !isDisabledBecauseFrozen(currentGroupChannel) && !isDisabledBecauseMuted(currentGroupChannel);
-  var disabled = !initialized || isDisabledBecauseFrozen(currentGroupChannel) || isDisabledBecauseMuted(currentGroupChannel) || !isOnline;
-  useEffect(function () {
-    if ((mentionedUsers === null || mentionedUsers === void 0 ? void 0 : mentionedUsers.length) >= maxUserMentionCount) {
-      setAbleMention(false);
+const useDidMountEffect = (func, deps) => {
+  const [didMount, setDidmount] = useState(false);
+  useEffect(() => {
+    if (didMount) {
+      func();
     } else {
-      setAbleMention(true);
+      setDidmount(true);
     }
-  }, [mentionedUsers]);
-  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
+  } = useLocalization();
+  const globalStore = useSendbirdStateContext();
+  const {
+    userId,
+    isOnline,
+    isMentionEnabled,
+    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;
+  const {
+    initialized,
+    currentGroupChannel,
+    highLightedMessageId,
+    setHighLightedMessageId,
+    animatedMessageId,
+    setAnimatedMessageId,
+    updateMessage,
+    scrollToMessage,
+    replyType,
+    threadReplySelectType,
+    isReactionEnabled,
+    toggleReaction,
+    emojiContainer,
+    nicknamesMap,
+    setQuoteMessage,
+    resendMessage,
+    renderUserMentionItem,
+    onReplyInThread,
+    onQuoteMessageClick,
+    onMessageAnimated,
+    onMessageHighlighted,
+    onScrollCallback
+  } = useChannelContext();
+  const [showEdit, setShowEdit] = useState(false);
+  const [showRemove, setShowRemove] = useState(false);
+  const [showFileViewer, setShowFileViewer] = useState(false);
+  const [isAnimated, setIsAnimated] = useState(false);
+  const [isHighlighted, setIsHighlighted] = useState(false);
+  const [mentionNickname, setMentionNickname] = useState('');
+  const [mentionedUsers, setMentionedUsers] = useState([]);
+  const [mentionedUserIds, setMentionedUserIds] = useState([]);
+  const [messageInputEvent, setMessageInputEvent] = useState(null);
+  const [selectedUser, setSelectedUser] = useState(null);
+  const [mentionSuggestedUsers, setMentionSuggestedUsers] = useState([]);
+  const editMessageInputRef = useRef(null);
+  const messageScrollRef = useRef(null);
+  const displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !isDisabledBecauseFrozen(currentGroupChannel) && !isDisabledBecauseMuted(currentGroupChannel);
+  const disabled = !initialized || isDisabledBecauseFrozen(currentGroupChannel) || isDisabledBecauseMuted(currentGroupChannel) || !isOnline;
+  const handleOnScroll = useHandleOnScrollCallback({
+    hasMore: false,
+    onScroll: onScrollCallback,
+    scrollRef: messageScrollRef
+  });
+  const mentionNodes = useDirtyGetMentions({
+    ref: editMessageInputRef
+  }, {
+    logger
+  });
+  const ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < maxUserMentionCount;
+  useEffect(() => {
+    setMentionedUsers(mentionedUsers.filter(_ref2 => {
+      let {
+        userId
+      } = _ref2;
+      const i = mentionedUserIds.indexOf(userId);
       if (i < 0) {
         return false;
       } else {
@@ -192,71 +193,84 @@ var Message = function (props) {
       }
     }));
   }, [mentionedUserIds]);
-  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]);
-  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]);
+  useLayoutEffect(() => {
+    handleMessageListHeightChange === null || handleMessageListHeightChange === void 0 ? void 0 : handleMessageListHeightChange();
+  }, []);
+  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]);
-  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]);
+  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 = useMemo(function () {
+    return () => {
+      clearTimeout(animationTimeout);
+      clearTimeout(messageAnimatedTimeout);
+    };
+  }, [animatedMessageId, messageScrollRef.current, message.messageId, onMessageAnimated]);
+  const renderedMessage = useMemo(() => {
     return renderMessage === null || renderMessage === void 0 ? void 0 : renderMessage({
-      message: message,
-      chainTop: chainTop,
-      chainBottom: chainBottom
+      message,
+      chainTop,
+      chainBottom
     });
   }, [message, renderMessage]);
-  var renderedCustomSeparator = useMemo(function () {
+  const renderedCustomSeparator = useMemo(() => {
     if (renderCustomSeparator) {
       return renderCustomSeparator === null || renderCustomSeparator === void 0 ? void 0 : renderCustomSeparator({
         message: message
       });
     }
-
     return null;
   }, [message, renderCustomSeparator]);
-
   if (renderedMessage) {
     return /*#__PURE__*/React__default.createElement("div", {
-      ref: useMessageScrollRef,
+      // 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' : ''])
-    }, // TODO: Add message instance as a function parameter
+    },
+    // TODO: Add message instance as a function parameter
     hasSeparator && (renderedCustomSeparator || /*#__PURE__*/React__default.createElement(DateSeparator, null, /*#__PURE__*/React__default.createElement(Label, {
       type: LabelTypography.CAPTION_2,
       color: LabelColors.ONBACKGROUND_2
@@ -264,25 +278,23 @@ var Message = function (props) {
       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.createElement(React__default.Fragment, null, displaySuggestedMentionList && /*#__PURE__*/React__default.createElement(SuggestedMentionList, {
       targetNickname: mentionNickname,
       inputEvent: messageInputEvent,
       renderUserMentionItem: renderUserMentionItem,
-      onUserItemClick: function (user) {
+      onUserItemClick: user => {
         if (user) {
-          setMentionedUsers(__spreadArray(__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,
@@ -295,65 +307,64 @@ var Message = function (props) {
       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 === MessageInputKeys.Enter && ableMention || e.key === MessageInputKeys.ArrowUp || e.key === MessageInputKeys.ArrowDown)) {
           setMessageInputEvent(e);
           return true;
         }
-
         return false;
       }
     }));
   }
-
   return /*#__PURE__*/React__default.createElement("div", {
     className: 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.createElement(DateSeparator, null, /*#__PURE__*/React__default.createElement(Label, {
     type: LabelTypography.CAPTION_2,
     color: LabelColors.ONBACKGROUND_2
@@ -380,17 +391,14 @@ var Message = function (props) {
     toggleReaction: toggleReaction,
     setQuoteMessage: setQuoteMessage,
     onReplyInThread: onReplyInThread,
-    onQuoteMessageClick: onQuoteMessageClick
+    onQuoteMessageClick: onQuoteMessageClick,
+    onMessageHeightChange: handleScroll
   }), showRemove && /*#__PURE__*/React__default.createElement(RemoveMessage, {
     message: message,
-    onCancel: function () {
-      return setShowRemove(false);
-    }
+    onCancel: () => setShowRemove(false)
   }), showFileViewer && /*#__PURE__*/React__default.createElement(FileViewer, {
     message: message,
-    onCancel: function () {
-      return setShowFileViewer(false);
-    }
+    onCancel: () => setShowFileViewer(false)
   }));
 };