@sendbird/uikit-react 3.4.5 → 3.4.6-0

package/cjs/ui/MentionLabel.js

@@ -2,23 +2,23 @@
 
 var React = require('react');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../index-26a1e861.js');
+var ui_Label = require('../index-0e43cd69.js');
 var ui_UserProfile = require('./UserProfile.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-require('../tslib.es6-ee1122c5.js');
+require('../tslib.es6-67bdb021.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../uuid-26b61f16.js');
-require('../index-72fd0294.js');
+require('../uuid-f23c161c.js');
+require('../index-5075f3b2.js');
 require('../utils/message/getOutgoingMessageState.js');
 require('prop-types');
-require('../stringSet-7330b627.js');
-require('../LocalizationContext-01fceac0.js');
-require('../index-7c5d21c4.js');
-require('../UserProfileContext-c4642438.js');
+require('../stringSet-76f7df68.js');
+require('../LocalizationContext-e4a874cf.js');
+require('../index-903c0f93.js');
+require('../UserProfileContext-ce0c283c.js');
 require('../sendbirdSelectors.js');
-require('../topics-7547922a.js');
-require('../utils-5ca88bb6.js');
+require('../topics-f70c5e0f.js');
+require('../utils-fdfc9b0a.js');
 require('./Avatar.js');
 require('./ImageRenderer.js');
 require('./Icon.js');
@@ -31,27 +31,23 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function MentionLabel(props) {
   var _a, _b, _c;
-
   var mentionTemplate = props.mentionTemplate,
-      mentionedUserId = props.mentionedUserId,
-      mentionedUserNickname = props.mentionedUserNickname,
-      isByMe = props.isByMe;
+    mentionedUserId = props.mentionedUserId,
+    mentionedUserNickname = props.mentionedUserNickname,
+    isByMe = props.isByMe;
   var mentionRef = React.useRef();
   var sendbirdState = useSendbirdStateContext();
   var userId = (_a = sendbirdState === null || sendbirdState === void 0 ? void 0 : sendbirdState.config) === null || _a === void 0 ? void 0 : _a.userId;
   var sdk = (_c = (_b = sendbirdState === null || sendbirdState === void 0 ? void 0 : sendbirdState.stores) === null || _b === void 0 ? void 0 : _b.sdkStore) === null || _c === void 0 ? void 0 : _c.sdk;
   var amIBeingMentioned = userId === mentionedUserId;
-
   var _d = React.useState(),
-      user = _d[0],
-      setUser = _d[1];
-
+    user = _d[0],
+    setUser = _d[1];
   var fetchUser = React.useCallback(function (toggleDropdown) {
     if (user || !(sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery)) {
       toggleDropdown();
       return;
     }
-
     var query = sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery({
       userIdsFilter: [mentionedUserId]
     });
@@ -59,7 +55,6 @@ function MentionLabel(props) {
       if ((members === null || members === void 0 ? void 0 : members.length) > 0) {
         setUser(members[0]);
       }
-
       toggleDropdown();
     });
   }, [sdk, mentionedUserId]);
@@ -84,8 +79,7 @@ function MentionLabel(props) {
       /**
       * parentRef: For catching location(x, y) of MenuItems
       * parentContainRef: For toggling more options(menus & reactions)
-      */
-      , {
+      */, {
         parentRef: mentionRef,
         parentContainRef: mentionRef,
         closeDropdown: closeDropdown,

package/cjs/ui/MentionLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionLabel.js","sources":["../../../src/ui/MentionLabel/index.tsx"],"sourcesContent":["import './index.scss';\n\nimport React, {\n  ReactElement,\n  useRef,\n  useState,\n  useCallback,\n} from 'react';\nimport type { User } from '@sendbird/chat';\n\nimport ContextMenu, { MenuItems } from '../ContextMenu';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport UserProfile from '../UserProfile';\nimport useSendbirdStateContext from '../../hooks/useSendbirdStateContext';\n\ninterface MentionLabelProps {\n  mentionTemplate: string;\n  mentionedUserId: string;\n  mentionedUserNickname: string;\n  isByMe: boolean;\n}\n\nexport default function MentionLabel(props: MentionLabelProps): JSX.Element {\n  const {\n    mentionTemplate,\n    mentionedUserId,\n    mentionedUserNickname,\n    isByMe,\n  } = props;\n\n  const mentionRef = useRef();\n\n  const sendbirdState = useSendbirdStateContext();\n  const userId = sendbirdState?.config?.userId;\n  const sdk = sendbirdState?.stores?.sdkStore?.sdk;\n  const amIBeingMentioned = userId === mentionedUserId;\n  const [user, setUser] = useState<User| null>();\n  const fetchUser = useCallback(\n    (toggleDropdown) => {\n      if (user || !sdk?.createApplicationUserListQuery) {\n        toggleDropdown();\n        return;\n      }\n      const query = sdk?.createApplicationUserListQuery({\n        userIdsFilter: [mentionedUserId],\n      });\n      query.next().then((members) => {\n        if (members?.length > 0) {\n          setUser(members[0]);\n        }\n        toggleDropdown();\n      });\n    },\n    [sdk, mentionedUserId],\n  );\n  return (\n    <ContextMenu\n      menuTrigger={(toggleDropdown: () => void): ReactElement => (\n        <a\n          className={`\n            sendbird-word__mention\n            ${amIBeingMentioned ? 'sendbird-word__mention--me' : ''}\n          `}\n          onClick={() => fetchUser(toggleDropdown)}\n          ref={mentionRef}\n          data-userid={mentionedUserId}\n          data-nickname={mentionedUserNickname}\n          data-sb-mention={true}\n        >\n          <Label\n            type={LabelTypography.CAPTION_1}\n            color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n          >\n            {`${mentionTemplate}${mentionedUserNickname}`}\n          </Label>\n        </a>\n      )}\n      menuItems={(closeDropdown: () => void): ReactElement => (\n        <MenuItems\n          /**\n          * parentRef: For catching location(x, y) of MenuItems\n          * parentContainRef: For toggling more options(menus & reactions)\n          */\n          parentRef={mentionRef}\n          parentContainRef={mentionRef}\n          closeDropdown={closeDropdown}\n          style={{ paddingTop: '0px', paddingBottom: '0px' }}\n        >\n          <UserProfile\n            user={user}\n            onSuccess={closeDropdown}\n            currentUserId={userId}\n          />\n        </MenuItems>\n      )}\n    />\n  )\n}\n"],"names":["MentionLabel","props","mentionTemplate","mentionedUserId","mentionedUserNickname","isByMe","mentionRef","useRef","sendbirdState","useSendbirdStateContext","userId","_a","config","sdk","_c","_b","stores","sdkStore","amIBeingMentioned","_d","useState","user","setUser","fetchUser","useCallback","toggleDropdown","createApplicationUserListQuery","query","userIdsFilter","next","then","members","length","React","ContextMenu","concat","Label","LabelTypography","CAPTION_1","LabelColors","ONCONTENT_1","ONBACKGROUND_1","closeDropdown","MenuItems","paddingTop","paddingBottom","UserProfile"],"mappings":"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"}
+{"version":3,"file":"MentionLabel.js","sources":["../../../src/ui/MentionLabel/index.tsx"],"sourcesContent":["import './index.scss';\n\nimport React, {\n  ReactElement,\n  useRef,\n  useState,\n  useCallback,\n} from 'react';\nimport type { User } from '@sendbird/chat';\n\nimport ContextMenu, { MenuItems } from '../ContextMenu';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport UserProfile from '../UserProfile';\nimport useSendbirdStateContext from '../../hooks/useSendbirdStateContext';\n\ninterface MentionLabelProps {\n  mentionTemplate: string;\n  mentionedUserId: string;\n  mentionedUserNickname: string;\n  isByMe: boolean;\n}\n\nexport default function MentionLabel(props: MentionLabelProps): JSX.Element {\n  const {\n    mentionTemplate,\n    mentionedUserId,\n    mentionedUserNickname,\n    isByMe,\n  } = props;\n\n  const mentionRef = useRef();\n\n  const sendbirdState = useSendbirdStateContext();\n  const userId = sendbirdState?.config?.userId;\n  const sdk = sendbirdState?.stores?.sdkStore?.sdk;\n  const amIBeingMentioned = userId === mentionedUserId;\n  const [user, setUser] = useState<User| null>();\n  const fetchUser = useCallback(\n    (toggleDropdown) => {\n      if (user || !sdk?.createApplicationUserListQuery) {\n        toggleDropdown();\n        return;\n      }\n      const query = sdk?.createApplicationUserListQuery({\n        userIdsFilter: [mentionedUserId],\n      });\n      query.next().then((members) => {\n        if (members?.length > 0) {\n          setUser(members[0]);\n        }\n        toggleDropdown();\n      });\n    },\n    [sdk, mentionedUserId],\n  );\n  return (\n    <ContextMenu\n      menuTrigger={(toggleDropdown: () => void): ReactElement => (\n        <a\n          className={`\n            sendbird-word__mention\n            ${amIBeingMentioned ? 'sendbird-word__mention--me' : ''}\n          `}\n          onClick={() => fetchUser(toggleDropdown)}\n          ref={mentionRef}\n          data-userid={mentionedUserId}\n          data-nickname={mentionedUserNickname}\n          data-sb-mention={true}\n        >\n          <Label\n            type={LabelTypography.CAPTION_1}\n            color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n          >\n            {`${mentionTemplate}${mentionedUserNickname}`}\n          </Label>\n        </a>\n      )}\n      menuItems={(closeDropdown: () => void): ReactElement => (\n        <MenuItems\n          /**\n          * parentRef: For catching location(x, y) of MenuItems\n          * parentContainRef: For toggling more options(menus & reactions)\n          */\n          parentRef={mentionRef}\n          parentContainRef={mentionRef}\n          closeDropdown={closeDropdown}\n          style={{ paddingTop: '0px', paddingBottom: '0px' }}\n        >\n          <UserProfile\n            user={user}\n            onSuccess={closeDropdown}\n            currentUserId={userId}\n          />\n        </MenuItems>\n      )}\n    />\n  )\n}\n"],"names":["MentionLabel","props","mentionTemplate","mentionedUserId","mentionedUserNickname","isByMe","mentionRef","useRef","sendbirdState","useSendbirdStateContext","userId","_a","config","sdk","_c","_b","stores","sdkStore","amIBeingMentioned","_d","useState","user","setUser","fetchUser","useCallback","toggleDropdown","createApplicationUserListQuery","query","userIdsFilter","next","then","members","length","React","createElement","ContextMenu","menuTrigger","className","concat","onClick","ref","Label","type","LabelTypography","CAPTION_1","color","LabelColors","ONCONTENT_1","ONBACKGROUND_1","menuItems","closeDropdown","MenuItems","parentRef","parentContainRef","style","paddingTop","paddingBottom","UserProfile","onSuccess","currentUserId"],"mappings":"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"}

package/cjs/ui/MentionUserLabel.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var consts = require('../consts-b29bd4d5.js');
+var consts = require('../consts-2e23914f.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -9,12 +9,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function MentionUserLabel(_a) {
   var _b = _a.className,
-      className = _b === void 0 ? '' : _b,
-      children = _a.children,
-      _c = _a.isReverse,
-      isReverse = _c === void 0 ? false : _c,
-      color = _a.color,
-      userId = _a.userId;
+    className = _b === void 0 ? '' : _b,
+    children = _a.children,
+    _c = _a.isReverse,
+    isReverse = _c === void 0 ? false : _c,
+    color = _a.color,
+    userId = _a.userId;
   return /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(consts.MENTION_USER_LABEL_CLASSNAME, " ").concat(className, " ").concat(isReverse ? 'reverse' : '', " ").concat(color),
     contentEditable: false,

package/cjs/ui/MentionUserLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionUserLabel.js","sources":["../../../src/ui/MentionUserLabel/index.tsx"],"sourcesContent":["import './index.scss';\n\nimport React from 'react';\nimport { MENTION_USER_LABEL_CLASSNAME } from './consts';\n\ninterface MentionUserLabelProps {\n  className?: string\n  children?: string;\n  isReverse?: boolean;\n  color?: string;\n  userId?: string;\n}\n\nexport default function MentionUserLabel({\n  className = '',\n  children,\n  isReverse = false,\n  color,\n  userId,\n}: MentionUserLabelProps): JSX.Element {\n  return (\n    <span\n      className={`${MENTION_USER_LABEL_CLASSNAME} ${className} ${isReverse ? 'reverse' : ''} ${color}`}\n      contentEditable={false}\n      data-userid={userId}\n      data-sb-mention={true}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":["MentionUserLabel","_a","_b","className","children","_c","isReverse","color","userId","React","concat","MENTION_USER_LABEL_CLASSNAME"],"mappings":";;;;;;;;;AAawB,SAAAA,gBAAA,CAAiBC,EAAjB,EAMA;MALtBC,EAAc,GAAAD,EAAA,CAAAE;MAAdA,SAAS,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA;MACZE,QAAQ;MACRC,EAAA,GAAAJ,EAAA,CAAAK;MAAAA,SAAS,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQA;MACjBE,KAAK,GAAAN,EAAA,CAAAM;MACLC,MAAM,GAAAP,EAAA,CAAAO;EAEN,oBACEC,yBAAA,CAAA,aAAA,CAAA,MAAA,EAAA;IACE,SAAS,EAAE,EAAGC,CAAAA,MAAH,CAAGC,mCAAH,KAAA,QAAA,CAAmCR,SAAnC,EAA4C,GAA5C,CAA4CO,CAAAA,MAA5C,CAAgDJ,SAAS,GAAG,SAAH,GAAe,EAAxE,KAAA,QAAA,CAA8EC,KAA9E,CADb;AAEE,IAAA,eAAe,EAAE,KAFnB;AAGE,IAAA,aAAA,EAAaC,MAHf;IAIE,iBAAiB,EAAA,IAAA;AAJnB,GAAA,EAMGJ,QANH,CADF,CAAA;AAUD;;;;"}
+{"version":3,"file":"MentionUserLabel.js","sources":["../../../src/ui/MentionUserLabel/index.tsx"],"sourcesContent":["import './index.scss';\n\nimport React from 'react';\nimport { MENTION_USER_LABEL_CLASSNAME } from './consts';\n\ninterface MentionUserLabelProps {\n  className?: string\n  children?: string;\n  isReverse?: boolean;\n  color?: string;\n  userId?: string;\n}\n\nexport default function MentionUserLabel({\n  className = '',\n  children,\n  isReverse = false,\n  color,\n  userId,\n}: MentionUserLabelProps): JSX.Element {\n  return (\n    <span\n      className={`${MENTION_USER_LABEL_CLASSNAME} ${className} ${isReverse ? 'reverse' : ''} ${color}`}\n      contentEditable={false}\n      data-userid={userId}\n      data-sb-mention={true}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":["MentionUserLabel","_a","_b","className","children","_c","isReverse","color","userId","React","createElement","concat","MENTION_USER_LABEL_CLASSNAME","contentEditable"],"mappings":";;;;;;;;;AAawB,SAAAA,gBAAgBA,CAACC,EAMjB,EAAA;MALtBC,EAAc,GAAAD,EAAA,CAAAE,SAAA;IAAdA,SAAS,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,EAAE,KAAA;IACdE,QAAQ,cAAA;IACRC,EAAA,GAAAJ,EAAA,CAAAK,SAAiB;IAAjBA,SAAS,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,KAAK,GAAAA,EAAA;IACjBE,KAAK,GAAAN,EAAA,CAAAM,KAAA;IACLC,MAAM,GAAAP,EAAA,CAAAO,MAAA,CAAA;EAEN,oBACEC,yBAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AACEP,IAAAA,SAAS,EAAE,EAAG,CAAAQ,MAAA,CAAAC,mCAA4B,cAAIT,SAAS,EAAA,GAAA,CAAA,CAAAQ,MAAA,CAAIL,SAAS,GAAG,SAAS,GAAG,EAAE,cAAIC,KAAK,CAAG;AACjGM,IAAAA,eAAe,EAAE,KAAM;AACvB,IAAA,aAAA,EAAaL,MAAO;IACpB,iBAAiB,EAAA,IAAA;AAAK,GAAA,EAErBJ,QAAQ,CACJ,CAAA;AAEX;;;;"}

package/cjs/ui/MessageContent.js

@@ -1,16 +1,16 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-994cd1da.js');
-var tslib_es6 = require('../tslib.es6-ee1122c5.js');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-6ab4baac.js');
+var tslib_es6 = require('../tslib.es6-67bdb021.js');
 var React = require('react');
-var index$1 = require('../index-959a4ab1.js');
+var index$1 = require('../index-f2d71843.js');
 var ui_Avatar = require('./Avatar.js');
 var ui_UserProfile = require('./UserProfile.js');
-var ui_MessageStatus = require('../index-aa908fcf.js');
+var ui_MessageStatus = require('../index-4894fc55.js');
 var ui_MessageItemMenu = require('./MessageItemMenu.js');
 var ui_MessageItemReactionMenu = require('./MessageItemReactionMenu.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../index-26a1e861.js');
+var ui_Label = require('../index-0e43cd69.js');
 var ui_EmojiReactions = require('./EmojiReactions.js');
 var ui_AdminMessage = require('./AdminMessage.js');
 var ui_TextMessageItemBody = require('./TextMessageItemBody.js');
@@ -19,53 +19,53 @@ var ui_ThumbnailMessageItemBody = require('./ThumbnailMessageItemBody.js');
 var ui_OGMessageItemBody = require('./OGMessageItemBody.js');
 var ui_UnknownMessageItemBody = require('./UnknownMessageItemBody.js');
 var ui_QuoteMessage = require('./QuoteMessage.js');
-var index = require('../index-72fd0294.js');
-var UserProfileContext = require('../UserProfileContext-c4642438.js');
-var LocalizationContext = require('../LocalizationContext-01fceac0.js');
+var index = require('../index-5075f3b2.js');
+var UserProfileContext = require('../UserProfileContext-ce0c283c.js');
+var LocalizationContext = require('../LocalizationContext-e4a874cf.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var useLongPress = require('../useLongPress-3e3b1188.js');
+var useLongPress = require('../useLongPress-3582b310.js');
 var ui_Icon = require('./Icon.js');
 var ui_BottomSheet = require('./BottomSheet.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_ReactionButton = require('./ReactionButton.js');
-var MediaQueryContext = require('../MediaQueryContext-4978c777.js');
+var MediaQueryContext = require('../MediaQueryContext-fcd92c17.js');
 var ui_ThreadReplies = require('./ThreadReplies.js');
-var _const = require('../const-e03cb4c1.js');
+var _const = require('../const-0273bf9e.js');
 var ui_VoiceMessageItemBody = require('./VoiceMessageItemBody.js');
-require('../index-7c5d21c4.js');
-require('../uuid-26b61f16.js');
+require('../index-903c0f93.js');
+require('../uuid-f23c161c.js');
 require('prop-types');
 require('../sendbirdSelectors.js');
-require('../topics-7547922a.js');
-require('../utils-5ca88bb6.js');
+require('../topics-f70c5e0f.js');
+require('../utils-fdfc9b0a.js');
 require('./Button.js');
-require('../stringSet-7330b627.js');
+require('../stringSet-76f7df68.js');
 require('./Loader.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../index-e3f00fd1.js');
-require('../index-1f02e60f.js');
+require('../index-44341b78.js');
+require('../index-47105c4f.js');
 require('./IconButton.js');
-require('../types-7daeb4a1.js');
+require('../types-43ef9367.js');
 require('react-dom');
 require('./SortByRow.js');
 require('./Tooltip.js');
 require('./TooltipWrapper.js');
 require('./ReactionBadge.js');
-require('../tokenize-a5a20ef3.js');
-require('../index-603c2a7c.js');
+require('../tokenize-5071d1a6.js');
+require('../index-3a7584a0.js');
 require('../Message/context.js');
 require('./MentionLabel.js');
 require('./LinkLabel.js');
-require('../consts-aabb33e0.js');
+require('../consts-e193b1b8.js');
 require('./TextButton.js');
-require('../color-8f9fe57f.js');
-require('../consts-956b1221.js');
+require('../color-168c1d53.js');
+require('../consts-472d9347.js');
 require('../withSendbird.js');
-require('../index-36aaf992.js');
+require('../index-813deccc.js');
 require('./ProgressBar.js');
 require('../VoicePlayer/useVoicePlayer.js');
-require('../index-c825cf5b.js');
-require('../consts-69fc20be.js');
+require('../index-ba9683ca.js');
+require('../consts-b8c0be49.js');
 require('../VoiceRecorder/context.js');
 require('../lame.all.js');
 require('./PlaybackTime.js');
@@ -76,17 +76,16 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var MobileContextMenu = function (props) {
   var _a;
-
   var hideMenu = props.hideMenu,
-      channel = props.channel,
-      message = props.message,
-      replyType = props.replyType,
-      userId = props.userId,
-      resendMessage = props.resendMessage,
-      showEdit = props.showEdit,
-      showRemove = props.showRemove,
-      setQuoteMessage = props.setQuoteMessage,
-      parentRef = props.parentRef;
+    channel = props.channel,
+    message = props.message,
+    replyType = props.replyType,
+    userId = props.userId,
+    resendMessage = props.resendMessage,
+    showEdit = props.showEdit,
+    showRemove = props.showRemove,
+    setQuoteMessage = props.setQuoteMessage,
+    parentRef = props.parentRef;
   var isByMe = ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId) === userId;
   var stringSet = LocalizationContext.useLocalization().stringSet;
   var showMenuItemCopy = index.isUserMessage(message);
@@ -100,7 +99,6 @@ var MobileContextMenu = function (props) {
     isOpen: true,
     menuItems: function () {
       var _a;
-
       return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
         className: "sendbird-message__mobile-context-menu",
         parentRef: parentRef,
@@ -196,22 +194,20 @@ var MobileContextMenu = function (props) {
 };
 
 var EMOJI_SIZE = 38;
-
 var MobileBottomSheet = function (props) {
   var _a;
-
   var hideMenu = props.hideMenu,
-      channel = props.channel,
-      emojiContainer = props.emojiContainer,
-      message = props.message,
-      replyType = props.replyType,
-      userId = props.userId,
-      resendMessage = props.resendMessage,
-      toggleReaction = props.toggleReaction,
-      isReactionEnabled = props.isReactionEnabled,
-      showEdit = props.showEdit,
-      showRemove = props.showRemove,
-      setQuoteMessage = props.setQuoteMessage;
+    channel = props.channel,
+    emojiContainer = props.emojiContainer,
+    message = props.message,
+    replyType = props.replyType,
+    userId = props.userId,
+    resendMessage = props.resendMessage,
+    toggleReaction = props.toggleReaction,
+    isReactionEnabled = props.isReactionEnabled,
+    showEdit = props.showEdit,
+    showRemove = props.showRemove,
+    setQuoteMessage = props.setQuoteMessage;
   var isByMe = ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId) === userId;
   var stringSet = LocalizationContext.useLocalization().stringSet;
   var showMenuItemCopy = index.isUserMessage(message);
@@ -224,13 +220,11 @@ var MobileBottomSheet = function (props) {
   var disableReaction = (message === null || message === void 0 ? void 0 : message.parentMessageId) > 0;
   var fileMessage = message;
   var maxEmojisPerRow = Math.floor((window === null || window === void 0 ? void 0 : window.innerWidth) / EMOJI_SIZE) - 1;
-
   var _b = React.useState(false),
-      showEmojisOnly = _b[0],
-      setShowEmojisOnly = _b[1];
-
-  var emojis = index.getEmojiListAll(emojiContainer); // calculate max emojis that can be shown in screen
-
+    showEmojisOnly = _b[0],
+    setShowEmojisOnly = _b[1];
+  var emojis = index.getEmojiListAll(emojiContainer);
+  // calculate max emojis that can be shown in screen
   var visibleEmojis = showEmojisOnly ? emojis : emojis === null || emojis === void 0 ? void 0 : emojis.slice(0, maxEmojisPerRow);
   var canShowMoreEmojis = emojis.length > maxEmojisPerRow;
   return /*#__PURE__*/React__default["default"].createElement(ui_BottomSheet, {
@@ -245,7 +239,6 @@ var MobileBottomSheet = function (props) {
     className: "\n                    sendbird-message__bottomsheet-reaction-bar__row\n                    ".concat(showEmojisOnly ? 'sendbird-message__bottomsheet-reaction-bar__all' : '', "\n                  ")
   }, visibleEmojis.map(function (emoji) {
     var _a, _b, _c;
-
     var isReacted = (_c = (_b = (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.filter(function (reaction) {
       return reaction.key === emoji.key;
     })[0]) === null || _b === void 0 ? void 0 : _b.userIds) === null || _c === void 0 ? void 0 : _c.some(function (reactorId) {
@@ -390,21 +383,21 @@ var MobileBottomSheet = function (props) {
 
 var MobileMenu = function (props) {
   var message = props.message,
-      hideMenu = props.hideMenu,
-      userId = props.userId,
-      channel = props.channel,
-      _a = props.isReactionEnabled,
-      isReactionEnabled = _a === void 0 ? false : _a,
-      isByMe = props.isByMe,
-      replyType = props.replyType,
-      disabled = props.disabled,
-      showRemove = props.showRemove,
-      showEdit = props.showEdit,
-      resendMessage = props.resendMessage,
-      setQuoteMessage = props.setQuoteMessage,
-      emojiContainer = props.emojiContainer,
-      toggleReaction = props.toggleReaction,
-      parentRef = props.parentRef;
+    hideMenu = props.hideMenu,
+    userId = props.userId,
+    channel = props.channel,
+    _a = props.isReactionEnabled,
+    isReactionEnabled = _a === void 0 ? false : _a,
+    isByMe = props.isByMe,
+    replyType = props.replyType,
+    disabled = props.disabled,
+    showRemove = props.showRemove,
+    showEdit = props.showEdit,
+    resendMessage = props.resendMessage,
+    setQuoteMessage = props.setQuoteMessage,
+    emojiContainer = props.emojiContainer,
+    toggleReaction = props.toggleReaction,
+    parentRef = props.parentRef;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isReactionEnabled ? /*#__PURE__*/React__default["default"].createElement(MobileBottomSheet, {
     channel: channel,
     message: message,
@@ -438,58 +431,51 @@ var MobileMenu = function (props) {
 
 function MessageContent(_a) {
   var _b, _c, _d, _e, _f, _g, _h, _j, _k;
-
   var className = _a.className,
-      userId = _a.userId,
-      channel = _a.channel,
-      message = _a.message,
-      _l = _a.disabled,
-      disabled = _l === void 0 ? false : _l,
-      _m = _a.chainTop,
-      chainTop = _m === void 0 ? false : _m,
-      _o = _a.chainBottom,
-      chainBottom = _o === void 0 ? false : _o,
-      _p = _a.isReactionEnabled,
-      isReactionEnabled = _p === void 0 ? false : _p,
-      _q = _a.disableQuoteMessage,
-      disableQuoteMessage = _q === void 0 ? false : _q,
-      replyType = _a.replyType,
-      threadReplySelectType = _a.threadReplySelectType,
-      nicknamesMap = _a.nicknamesMap,
-      emojiContainer = _a.emojiContainer,
-      scrollToMessage = _a.scrollToMessage,
-      showEdit = _a.showEdit,
-      showRemove = _a.showRemove,
-      showFileViewer = _a.showFileViewer,
-      resendMessage = _a.resendMessage,
-      toggleReaction = _a.toggleReaction,
-      setQuoteMessage = _a.setQuoteMessage,
-      onReplyInThread = _a.onReplyInThread,
-      onQuoteMessageClick = _a.onQuoteMessageClick;
+    userId = _a.userId,
+    channel = _a.channel,
+    message = _a.message,
+    _l = _a.disabled,
+    disabled = _l === void 0 ? false : _l,
+    _m = _a.chainTop,
+    chainTop = _m === void 0 ? false : _m,
+    _o = _a.chainBottom,
+    chainBottom = _o === void 0 ? false : _o,
+    _p = _a.isReactionEnabled,
+    isReactionEnabled = _p === void 0 ? false : _p,
+    _q = _a.disableQuoteMessage,
+    disableQuoteMessage = _q === void 0 ? false : _q,
+    replyType = _a.replyType,
+    threadReplySelectType = _a.threadReplySelectType,
+    nicknamesMap = _a.nicknamesMap,
+    emojiContainer = _a.emojiContainer,
+    scrollToMessage = _a.scrollToMessage,
+    showEdit = _a.showEdit,
+    showRemove = _a.showRemove,
+    showFileViewer = _a.showFileViewer,
+    resendMessage = _a.resendMessage,
+    toggleReaction = _a.toggleReaction,
+    setQuoteMessage = _a.setQuoteMessage,
+    onReplyInThread = _a.onReplyInThread,
+    onQuoteMessageClick = _a.onQuoteMessageClick;
   var messageTypes = index.getUIKitMessageTypes();
   var dateLocale = LocalizationContext.useLocalization().dateLocale;
   var config = ((useSendbirdStateContext === null || useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext()) || {}).config;
-
   var _r = React.useContext(UserProfileContext.UserProfileContext),
-      disableUserProfile = _r.disableUserProfile,
-      renderUserProfile = _r.renderUserProfile;
-
+    disableUserProfile = _r.disableUserProfile,
+    renderUserProfile = _r.renderUserProfile;
   var avatarRef = React.useRef(null);
   var contentRef = React.useRef(null);
   var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
-
   var _s = React.useState(false),
-      showMenu = _s[0],
-      setShowMenu = _s[1];
-
+    showMenu = _s[0],
+    setShowMenu = _s[1];
   var _t = React.useState(false),
-      mouseHover = _t[0],
-      setMouseHover = _t[1];
-
+    mouseHover = _t[0],
+    setMouseHover = _t[1];
   var _u = React.useState(false),
-      supposedHover = _u[0],
-      setSupposedHover = _u[1];
-
+    supposedHover = _u[0],
+    setSupposedHover = _u[1];
   var isByMe = userId === ((_b = message === null || message === void 0 ? void 0 : message.sender) === null || _b === void 0 ? void 0 : _b.userId) || (message === null || message === void 0 ? void 0 : message.sendingStatus) === 'pending' || (message === null || message === void 0 ? void 0 : message.sendingStatus) === 'failed';
   var isByMeClassName = isByMe ? 'outgoing' : 'incoming';
   var chainTopClassName = chainTop ? 'chain-top' : '';
@@ -497,14 +483,14 @@ function MessageContent(_a) {
   var isReactionEnabledClassName = isReactionEnabledInChannel ? 'use-reactions' : '';
   var supposedHoverClassName = supposedHover ? 'sendbird-mouse-hover' : '';
   var useReplying = !!((replyType === 'QUOTE_REPLY' || replyType === 'THREAD') && (message === null || message === void 0 ? void 0 : message.parentMessageId) && (message === null || message === void 0 ? void 0 : message.parentMessage) && !disableQuoteMessage);
-  var useReplyingClassName = useReplying ? 'use-quote' : ''; // Thread replies
-
-  var displayThreadReplies = ((_c = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _c === void 0 ? void 0 : _c.replyCount) > 0 && replyType === 'THREAD'; // onMouseDown: (e: React.MouseEvent<T>) => void;
+  var useReplyingClassName = useReplying ? 'use-quote' : '';
+  // Thread replies
+  var displayThreadReplies = ((_c = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _c === void 0 ? void 0 : _c.replyCount) > 0 && replyType === 'THREAD';
+  // onMouseDown: (e: React.MouseEvent<T>) => void;
   // onTouchStart: (e: React.TouchEvent<T>) => void;
   // onMouseUp: (e: React.MouseEvent<T>) => void;
   // onMouseLeave: (e: React.MouseEvent<T>) => void;
   // onTouchEnd: (e: React.TouchEvent<T>) => void;
-
   var longPress = useLongPress.useLongPress({
     onLongPress: function () {
       if (isMobile) {
@@ -520,13 +506,11 @@ function MessageContent(_a) {
   }, {
     delay: 300
   });
-
   if (((_d = message === null || message === void 0 ? void 0 : message.isAdminMessage) === null || _d === void 0 ? void 0 : _d.call(message)) || (message === null || message === void 0 ? void 0 : message.messageType) === 'admin') {
     return /*#__PURE__*/React__default["default"].createElement(ui_AdminMessage, {
       message: message
     });
   }
-
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName([className, 'sendbird-message-content', isByMeClassName]),
     onMouseOver: function () {
@@ -539,20 +523,19 @@ function MessageContent(_a) {
     className: index.getClassName(['sendbird-message-content__left', isReactionEnabledClassName, isByMeClassName, useReplyingClassName])
   }, !isByMe && !chainBottom &&
   /*#__PURE__*/
-
   /** user profile */
   React__default["default"].createElement(ui_ContextMenu["default"], {
     menuTrigger: function (toggleDropdown) {
       var _a, _b, _c;
-
       return /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
-        className: "sendbird-message-content__left__avatar ".concat(displayThreadReplies ? 'use-thread-replies' : '') // @ts-ignore
+        className: "sendbird-message-content__left__avatar ".concat(displayThreadReplies ? 'use-thread-replies' : '')
+        // @ts-ignore
         ,
         src: ((_b = (_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.find(function (member) {
           var _a;
-
           return (member === null || member === void 0 ? void 0 : member.userId) === ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId);
-        })) === null || _b === void 0 ? void 0 : _b.profileUrl) || ((_c = message === null || message === void 0 ? void 0 : message.sender) === null || _c === void 0 ? void 0 : _c.profileUrl) || '' // TODO: Divide getting profileUrl logic to utils
+        })) === null || _b === void 0 ? void 0 : _b.profileUrl) || ((_c = message === null || message === void 0 ? void 0 : message.sender) === null || _c === void 0 ? void 0 : _c.profileUrl) || ''
+        // TODO: Divide getting profileUrl logic to utils
         ,
         ref: avatarRef,
         width: "28px",
@@ -567,8 +550,7 @@ function MessageContent(_a) {
       /**
       * parentRef: For catching location(x, y) of MenuItems
       * parentContainRef: For toggling more options(menus & reactions)
-      */
-      , {
+      */, {
         parentRef: avatarRef,
         parentContainRef: avatarRef,
         closeDropdown: closeDropdown,
@@ -576,11 +558,13 @@ function MessageContent(_a) {
           paddingTop: '0px',
           paddingBottom: '0px'
         }
-      }, renderUserProfile // @ts-ignore
+      }, renderUserProfile
+      // @ts-ignore
       ? renderUserProfile({
         user: message === null || message === void 0 ? void 0 : message.sender,
         close: closeDropdown
-      }) // @ts-ignore
+      })
+      // @ts-ignore
       : /*#__PURE__*/React__default["default"].createElement(ui_UserProfile, {
         user: message.sender,
         onSuccess: closeDropdown
@@ -602,7 +586,6 @@ function MessageContent(_a) {
     setSupposedHover: setSupposedHover,
     onReplyInThread: function (_a) {
       var message = _a.message;
-
       if (threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
         onReplyInThread({
           message: message
@@ -627,12 +610,13 @@ function MessageContent(_a) {
     className: "sendbird-message-content__middle__sender-name",
     type: ui_Label.LabelTypography.CAPTION_2,
     color: ui_Label.LabelColors.ONBACKGROUND_2
-  }, // @ts-ignore
+  },
+  // @ts-ignore
   ((_f = (_e = channel === null || channel === void 0 ? void 0 : channel.members) === null || _e === void 0 ? void 0 : _e.find(function (member) {
     var _a;
-
     return (member === null || member === void 0 ? void 0 : member.userId) === ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId);
-  })) === null || _f === void 0 ? void 0 : _f.nickname) || index.getSenderName(message) // TODO: Divide getting profileUrl logic to utils
+  })) === null || _f === void 0 ? void 0 : _f.nickname) || index.getSenderName(message)
+  // TODO: Divide getting profileUrl logic to utils
   ), useReplying ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName(['sendbird-message-content__middle__quote-message', isByMe ? 'outgoing' : 'incoming', useReplyingClassName])
   }, /*#__PURE__*/React__default["default"].createElement(ui_QuoteMessage, {
@@ -642,13 +626,11 @@ function MessageContent(_a) {
     isUnavailable: replyType === 'THREAD' && (channel === null || channel === void 0 ? void 0 : channel.joinedAt) * 1000 > ((_g = message === null || message === void 0 ? void 0 : message.parentMessage) === null || _g === void 0 ? void 0 : _g.createdAt),
     onClick: function () {
       var _a;
-
       if (replyType === 'THREAD' && threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
         onQuoteMessageClick === null || onQuoteMessageClick === void 0 ? void 0 : onQuoteMessageClick({
           message: message
         });
       }
-
       if ((replyType === 'QUOTE_REPLY' || replyType === 'THREAD' && threadReplySelectType === _const.ThreadReplySelectType.PARENT) && ((_a = message === null || message === void 0 ? void 0 : message.parentMessage) === null || _a === void 0 ? void 0 : _a.createdAt) && (message === null || message === void 0 ? void 0 : message.parentMessageId)) {
         scrollToMessage(message.parentMessage.createdAt, message.parentMessageId);
       }
@@ -749,7 +731,6 @@ function MessageContent(_a) {
     setSupposedHover: setSupposedHover,
     onReplyInThread: function (_a) {
       var message = _a.message;
-
       if (threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
         onReplyInThread({
           message: message