@sendbird/uikit-react 3.3.7 → 3.4.0-rc.1

package/dist/cjs/Channel/components/FileViewer.js

@@ -0,0 +1,164 @@
+'use strict';
+
+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-578f0575.js');
+var ui_Icon = require('../../ui/Icon.js');
+var index$1 = require('../../index-490839e3.js');
+var index = require('../../index-6714492f.js');
+var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
+var Channel_context = require('../../ChannelProvider-367995a6.js');
+require('../../tslib.es6-e8acf1b5.js');
+require('../../ui/ImageRenderer.js');
+require('../../uuid-a94df44e.js');
+require('prop-types');
+require('../../stringSet-388f679a.js');
+require('../../utils/message/getOutgoingMessageState.js');
+require('../../withSendbird.js');
+require('../../_rollupPluginBabelHelpers-e7c78521.js');
+require('../../UserProfileContext-0549101e.js');
+require('../../index-f1bd9638.js');
+require('../../index-1ec959ab.js');
+require('../../topics-839402ce.js');
+require('../../compareIds-19a11ffa.js');
+require('../../const-3c5d5059.js');
+require('@sendbird/chat/groupChannel');
+require('@sendbird/chat/message');
+require('../../ui/ContextMenu.js');
+require('../../ui/SortByRow.js');
+require('../../ui/ReactionButton.js');
+require('../../consts-9d221c68.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var FileViewerComponent = function (_a) {
+  var // sender
+  profileUrl = _a.profileUrl,
+      nickname = _a.nickname,
+      // file
+  name = _a.name,
+      type = _a.type,
+      url = _a.url,
+      // others
+  isByMe = _a.isByMe,
+      onCancel = _a.onCancel,
+      onDelete = _a.onDelete,
+      disableDelete = _a.disableDelete;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__header"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__header__left"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__header__left__avatar"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+    height: "32px",
+    width: "32px",
+    src: profileUrl
+  })), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-fileviewer__header__left__filename",
+    type: ui_Label.LabelTypography.H_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, name), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-fileviewer__header__left__sender-name",
+    type: ui_Label.LabelTypography.BODY_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, nickname)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__header__right"
+  }, index.isSupportedFileView(type) && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__header__right__actions"
+  }, /*#__PURE__*/React__default["default"].createElement("a", {
+    className: "sendbird-fileviewer__header__right__actions__download",
+    rel: "noopener noreferrer",
+    href: url,
+    target: "_blank"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.DOWNLOAD,
+    fillColor: ui_Icon.IconColors.ON_BACKGROUND_1,
+    height: "24px",
+    width: "24px"
+  })), onDelete && isByMe && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__header__right__actions__delete"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    className: disableDelete ? 'disabled' : '',
+    type: ui_Icon.IconTypes.DELETE,
+    fillColor: disableDelete ? ui_Icon.IconColors.GRAY : ui_Icon.IconColors.ON_BACKGROUND_1,
+    height: "24px",
+    width: "24px",
+    onClick: function () {
+      if (!disableDelete) {
+        onDelete();
+      }
+    }
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__header__right__actions__close"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.CLOSE,
+    fillColor: ui_Icon.IconColors.ON_BACKGROUND_1,
+    height: "24px",
+    width: "24px",
+    onClick: onCancel
+  })))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__content"
+  }, index.isVideo(type) && /*#__PURE__*/React__default["default"].createElement("video", {
+    controls: true,
+    className: "sendbird-fileviewer__content__video"
+  }, /*#__PURE__*/React__default["default"].createElement("source", {
+    src: url,
+    type: type
+  })), index.isImage(type) && /*#__PURE__*/React__default["default"].createElement("img", {
+    src: url,
+    alt: name,
+    className: "sendbird-fileviewer__content__img"
+  }), !index.isSupportedFileView(type) && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__content__unsupported"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    type: ui_Label.LabelTypography.H_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, "Unsupoprted message"))));
+};
+
+var FileViewer = function (_a) {
+  var _b, _c, _d;
+
+  var onCancel = _a.onCancel,
+      message = _a.message;
+  var deleteMessage = Channel_context.useChannelContext().deleteMessage;
+  var sender = message.sender,
+      type = message.type,
+      url = message.url,
+      _e = message.name,
+      name = _e === void 0 ? '' : _e,
+      threadInfo = message.threadInfo;
+  var user = (_c = (_b = useSendbirdStateContext()) === null || _b === void 0 ? void 0 : _b.config) === null || _c === void 0 ? void 0 : _c.userId;
+  var isByMe = user === ((_d = message === null || message === void 0 ? void 0 : message.sender) === null || _d === void 0 ? void 0 : _d.userId);
+  var disableDelete = (threadInfo === null || threadInfo === void 0 ? void 0 : threadInfo.replyCount) > 0;
+  var profileUrl = sender.profileUrl,
+      _f = sender.nickname,
+      nickname = _f === void 0 ? '' : _f;
+  return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(FileViewerComponent, {
+    profileUrl: profileUrl,
+    nickname: nickname,
+    type: type,
+    url: url,
+    name: name,
+    onCancel: onCancel,
+    onDelete: function () {
+      deleteMessage(message).then(function () {
+        onCancel();
+      });
+    },
+    isByMe: isByMe,
+    disableDelete: disableDelete
+  }), document.getElementById(index$1.MODAL_ROOT));
+};
+
+exports.FileViewerComponent = FileViewerComponent;
+exports["default"] = FileViewer;
+//# sourceMappingURL=FileViewer.js.map

package/dist/cjs/Channel/components/FileViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileViewer.js","sources":["../../../../src/smart-components/Channel/components/FileViewer/index.tsx"],"sourcesContent":["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport type { FileMessage } from '@sendbird/chat/message';\n\nimport './file-viewer.scss';\nimport Avatar from '../../../../ui/Avatar';\nimport Label, { LabelTypography, LabelColors } from '../../../../ui/Label';\nimport Icon, { IconColors, IconTypes } from '../../../../ui/Icon';\nimport { MODAL_ROOT } from '../../../../hooks/useModal/ModalRoot';\n\nimport { isImage, isVideo, isSupportedFileView } from '../../../../utils';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\nimport { useChannelContext } from '../../context/ChannelProvider';\nimport { EveryMessage } from '../../../../types';\n\ntype FileViewerUIProps = {\n  profileUrl: string;\n  nickname: string;\n  // file\n  name: string;\n  type: string;\n  url: string;\n  // others\n  isByMe: boolean;\n  onCancel: () => void;\n  onDelete: () => void;\n  disableDelete: boolean;\n};\n\nexport const FileViewerComponent: React.FC<FileViewerUIProps> = ({\n  // sender\n  profileUrl,\n  nickname,\n  // file\n  name,\n  type,\n  url,\n  // others\n  isByMe,\n  onCancel,\n  onDelete,\n  disableDelete,\n}: FileViewerUIProps) => (\n  <div className=\"sendbird-fileviewer\">\n    <div className=\"sendbird-fileviewer__header\">\n      <div className=\"sendbird-fileviewer__header__left\">\n        <div className=\"sendbird-fileviewer__header__left__avatar\">\n          <Avatar height=\"32px\" width=\"32px\" src={profileUrl} />\n        </div>\n        <Label\n          className=\"sendbird-fileviewer__header__left__filename\"\n          type={LabelTypography.H_2}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {name}\n        </Label>\n        <Label\n          className=\"sendbird-fileviewer__header__left__sender-name\"\n          type={LabelTypography.BODY_1}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {nickname}\n        </Label>\n      </div>\n      <div className=\"sendbird-fileviewer__header__right\">\n        {\n          isSupportedFileView(type) && (\n            <div className=\"sendbird-fileviewer__header__right__actions\">\n              <a\n                className=\"sendbird-fileviewer__header__right__actions__download\"\n                rel=\"noopener noreferrer\"\n                href={url}\n                target=\"_blank\"\n              >\n                <Icon\n                  type={IconTypes.DOWNLOAD}\n                  fillColor={IconColors.ON_BACKGROUND_1}\n                  height=\"24px\"\n                  width=\"24px\"\n                />\n              </a>\n              {\n                onDelete && isByMe && (\n                  <div className=\"sendbird-fileviewer__header__right__actions__delete\">\n                    <Icon\n                      className={disableDelete ? 'disabled' : ''}\n                      type={IconTypes.DELETE}\n                      fillColor={disableDelete ? IconColors.GRAY : IconColors.ON_BACKGROUND_1}\n                      height=\"24px\"\n                      width=\"24px\"\n                      onClick={() => { if (!disableDelete) { onDelete(); } }}\n                    />\n                  </div>\n                )\n              }\n            </div>\n          )\n        }\n        <div className=\"sendbird-fileviewer__header__right__actions__close\">\n          <Icon\n            type={IconTypes.CLOSE}\n            fillColor={IconColors.ON_BACKGROUND_1}\n            height=\"24px\"\n            width=\"24px\"\n            onClick={onCancel}\n          />\n        </div>\n      </div>\n    </div>\n    <div className=\"sendbird-fileviewer__content\">\n      {isVideo(type) && (\n        <video controls className=\"sendbird-fileviewer__content__video\">\n          <source src={url} type={type} />\n        </video>\n      )}\n      {\n        isImage(type) && (\n          <img\n            src={url}\n            alt={name}\n            className=\"sendbird-fileviewer__content__img\"\n          />\n        )\n      }\n      {\n        !isSupportedFileView(type) && (\n          <div className=\"sendbird-fileviewer__content__unsupported\">\n            <Label type={LabelTypography.H_1} color={LabelColors.ONBACKGROUND_1}>\n              Unsupoprted message\n            </Label>\n          </div>\n        )\n      }\n    </div>\n  </div>\n);\n\ntype FileViewerProps = {\n  onCancel:() => void;\n  message: FileMessage;\n};\n\nconst FileViewer: React.FC<FileViewerProps> = ({ onCancel, message }: FileViewerProps) => {\n  const { deleteMessage } = useChannelContext();\n  const {\n    sender,\n    type,\n    url,\n    name = '',\n    threadInfo,\n  } = message;\n  const user = useSendbirdStateContext()?.config?.userId;\n  const isByMe = user === message?.sender?.userId;\n  const disableDelete = threadInfo?.replyCount > 0;\n  const { profileUrl, nickname = '' } = sender;\n  return createPortal(\n    (\n      <FileViewerComponent\n        profileUrl={profileUrl}\n        nickname={nickname}\n        type={type}\n        url={url}\n        name={name}\n        onCancel={onCancel}\n        onDelete={() => {\n          deleteMessage(message as EveryMessage).then(() => {\n            onCancel();\n          });\n        }}\n        isByMe={isByMe}\n        disableDelete={disableDelete}\n      />\n    ),\n    document.getElementById(MODAL_ROOT),\n  );\n}\n\nexport default FileViewer;\n"],"names":["FileViewerComponent","_a","profileUrl","nickname","name","type","url","isByMe","onCancel","onDelete","disableDelete","React","Avatar","Label","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","BODY_1","ONBACKGROUND_2","isSupportedFileView","Icon","IconTypes","DOWNLOAD","IconColors","ON_BACKGROUND_1","DELETE","GRAY","CLOSE","isVideo","isImage","H_1","FileViewer","message","deleteMessage","useChannelContext","sender","_e","threadInfo","user","_c","_b","useSendbirdStateContext","config","userId","_d","replyCount","_f","createPortal","then","document","getElementById","MODAL_ROOT"],"mappings":"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"}

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

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var LocalizationContext = require('../../LocalizationContext-2fb0be1f.js');
+var ui_Label = require('../../index-578f0575.js');
+require('../../stringSet-388f679a.js');
+require('../../index-1ec959ab.js');
+require('prop-types');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var FrozenNotification = function () {
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-notification sendbird-notification--frozen"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-notification__text",
+    type: ui_Label.LabelTypography.CAPTION_2
+  }, stringSet.CHANNEL_FROZEN));
+};
+
+module.exports = FrozenNotification;
+//# sourceMappingURL=FrozenNotification.js.map

package/dist/cjs/Channel/components/Message.js

@@ -0,0 +1,412 @@
+'use strict';
+
+var tslib_es6 = require('../../tslib.es6-e8acf1b5.js');
+var React = require('react');
+var index$1 = require('../../index-f1bd9638.js');
+var Channel_components_SuggestedMentionList = require('./SuggestedMentionList.js');
+var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
+var Channel_context = require('../../ChannelProvider-367995a6.js');
+var index = require('../../index-6714492f.js');
+var _const = require('../../const-3c5d5059.js');
+var ui_DateSeparator = require('../../ui/DateSeparator.js');
+var ui_Label = require('../../index-578f0575.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-86e2750e.js');
+var LocalizationContext = require('../../LocalizationContext-2fb0be1f.js');
+require('../../index-1ec959ab.js');
+require('../../ui/Icon.js');
+require('prop-types');
+require('../../ui/Avatar.js');
+require('../../ui/ImageRenderer.js');
+require('../../uuid-a94df44e.js');
+require('../../ThreadProvider-6300587c.js');
+require('../../utils/message/getOutgoingMessageState.js');
+require('../../UserProfileContext-0549101e.js');
+require('../../Thread/context/types.js');
+require('@sendbird/chat');
+require('../../topics-839402ce.js');
+require('@sendbird/chat/groupChannel');
+require('@sendbird/chat/message');
+require('../../consts-9d221c68.js');
+require('../../withSendbird.js');
+require('../../_rollupPluginBabelHelpers-e7c78521.js');
+require('../../compareIds-19a11ffa.js');
+require('../../ui/ContextMenu.js');
+require('react-dom');
+require('../../ui/SortByRow.js');
+require('../../stringSet-388f679a.js');
+require('../../ui/ReactionButton.js');
+require('../../color-84bbbc0b.js');
+require('react-dom/server');
+require('../../ui/IconButton.js');
+require('../../ui/Button.js');
+require('../../ui/MentionUserLabel.js');
+require('../../ui/UserProfile.js');
+require('../../sendbirdSelectors.js');
+require('../../utils-c61c3737.js');
+require('../../index-43d893cf.js');
+require('../../ui/Loader.js');
+require('../../index-aada6371.js');
+require('../../index-4e46a153.js');
+require('../../ui/MessageItemMenu.js');
+require('../../types-6ffa6822.js');
+require('../../ui/MessageItemReactionMenu.js');
+require('../../ui/EmojiReactions.js');
+require('../../ui/Tooltip.js');
+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('../../ui/MentionLabel.js');
+require('../../ui/FileMessageItemBody.js');
+require('../../ui/TextButton.js');
+require('../../MediaQueryContext-db5159f3.js');
+require('../../ui/ThumbnailMessageItemBody.js');
+require('../../ui/OGMessageItemBody.js');
+require('../../ui/UnknownMessageItemBody.js');
+require('../../ui/QuoteMessage.js');
+require('../../useLongPress-b75b3860.js');
+require('../../ui/BottomSheet.js');
+require('../../index-490839e3.js');
+require('../../ui/ThreadReplies.js');
+require('../../ui/VoiceMessageItemBody.js');
+require('../../ui/ProgressBar.js');
+require('../../VoicePlayer/useVoicePlayer.js');
+require('../../index-e1d58610.js');
+require('../../VoiceRecorder/context.js');
+require('../../lame.all.js');
+require('../../ui/PlaybackTime.js');
+require('../../ui/Modal.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);
+    } else {
+      setAbleMention(true);
+    }
+  }, [mentionedUsers]);
+  React.useEffect(function () {
+    setMentionedUsers(mentionedUsers.filter(function (_a) {
+      var userId = _a.userId;
+      var i = mentionedUserIds.indexOf(userId);
+
+      if (i < 0) {
+        return false;
+      } else {
+        mentionedUserIds.splice(i, 1);
+        return true;
+      }
+    }));
+  }, [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);
+      }
+    } 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);
+      }
+    } else {
+      setIsAnimated(false);
+    }
+  }, [animatedMessageId, useMessageScrollRef.current, message.messageId, onMessageAnimated]);
+  var renderedMessage = React.useMemo(function () {
+    return renderMessage === null || renderMessage === void 0 ? void 0 : renderMessage({
+      message: message,
+      chainTop: chainTop,
+      chainBottom: chainBottom
+    });
+  }, [message, renderMessage]);
+  var renderedCustomSeparator = React.useMemo(function () {
+    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
+    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', {
+      locale: dateLocale
+    })))), renderedMessage);
+  }
+
+  if (showEdit && ((_b = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _b === void 0 ? void 0 : _b.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) {
+        if (user) {
+          setMentionedUsers(tslib_es6.__spreadArray(tslib_es6.__spreadArray([], mentionedUsers, true), [user], false));
+        }
+
+        setMentionNickname('');
+        setSelectedUser(user);
+        setMessageInputEvent(null);
+      },
+      onFocusItemChange: function () {
+        setMessageInputEvent(null);
+      },
+      onFetchUsers: function (users) {
+        setMentionSuggestedUsers(users);
+      },
+      ableAddMention: ableMention,
+      maxMentionCount: maxUserMentionCount,
+      maxSuggestionCount: maxUserSuggestionCount
+    }), /*#__PURE__*/React__default["default"].createElement(ui_MessageInput, {
+      isEdit: true,
+      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);
+      },
+      onUpdateMessage: function (_a) {
+        var _b;
+
+        var messageId = _a.messageId,
+            message = _a.message,
+            mentionTemplate = _a.mentionTemplate;
+        updateMessage({
+          messageId: messageId,
+          message: message,
+          mentionedUsers: mentionedUsers,
+          mentionTemplate: mentionTemplate
+        });
+        setShowEdit(false);
+        (_b = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.endTyping) === null || _b === void 0 ? void 0 : _b.call(currentGroupChannel);
+      },
+      onCancelEdit: function () {
+        var _a;
+
+        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);
+      },
+      onUserMentioned: function (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) {
+        setMentionNickname(mentionText);
+      },
+      onMentionedUserIdsUpdated: function (userIds) {
+        setMentionedUserIds(userIds);
+      },
+      onKeyDown: function (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' : '']),
+    style: {
+      marginBottom: '2px'
+    },
+    ref: useMessageScrollRef
+  }, 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', {
+    locale: dateLocale
+  })))), (renderMessageContent === null || renderMessageContent === void 0 ? void 0 : renderMessageContent()) || /*#__PURE__*/React__default["default"].createElement(ui_MessageContent, {
+    className: "sendbird-message-hoc__message-content",
+    userId: userId,
+    scrollToMessage: scrollToMessage,
+    channel: currentGroupChannel,
+    message: message,
+    disabled: !isOnline,
+    chainTop: chainTop,
+    chainBottom: chainBottom,
+    isReactionEnabled: isReactionEnabled,
+    replyType: replyType,
+    threadReplySelectType: threadReplySelectType,
+    nicknamesMap: nicknamesMap,
+    emojiContainer: emojiContainer,
+    showEdit: setShowEdit,
+    showRemove: setShowRemove,
+    showFileViewer: setShowFileViewer,
+    resendMessage: resendMessage,
+    toggleReaction: toggleReaction,
+    setQuoteMessage: setQuoteMessage,
+    onReplyInThread: onReplyInThread,
+    onQuoteMessageClick: onQuoteMessageClick
+  }), showRemove && /*#__PURE__*/React__default["default"].createElement(Channel_components_RemoveMessageModal, {
+    message: message,
+    onCancel: function () {
+      return setShowRemove(false);
+    }
+  }), showFileViewer && /*#__PURE__*/React__default["default"].createElement(Channel_components_FileViewer["default"], {
+    message: message,
+    onCancel: function () {
+      return setShowFileViewer(false);
+    }
+  }));
+};
+
+module.exports = Message;
+//# sourceMappingURL=Message.js.map