@sendbird/uikit-react 3.6.11-beta.2 → 3.7.0-rc.0

package/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","_sendbirdState$config","_sendbirdState$stores","_sendbirdState$stores2","mentionTemplate","mentionedUserId","mentionedUserNickname","isByMe","mentionRef","useRef","sendbirdState","useSendbirdStateContext","userId","config","sdk","stores","sdkStore","amIBeingMentioned","user","setUser","useState","fetchUser","useCallback","toggleDropdown","createApplicationUserListQuery","query","userIdsFilter","next","then","members","length","React","createElement","ContextMenu","menuTrigger","className","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":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsBe,SAASA,YAAYA,CAACC,KAAwB,EAAe;AAAA,EAAA,IAAAC,qBAAA,EAAAC,qBAAA,EAAAC,sBAAA,CAAA;EAC1E,MAAM;IACJC,eAAe;IACfC,eAAe;IACfC,qBAAqB;AACrBC,IAAAA,MAAAA;AACF,GAAC,GAAGP,KAAK,CAAA;EAET,MAAMQ,UAAU,GAAGC,MAAM,EAAE,CAAA;EAE3B,MAAMC,aAAa,GAAGC,uBAAuB,EAAE,CAAA;AAC/C,EAAA,MAAMC,MAAM,GAAGF,aAAa,KAAbA,IAAAA,IAAAA,aAAa,wBAAAT,qBAAA,GAAbS,aAAa,CAAEG,MAAM,MAAAZ,IAAAA,IAAAA,qBAAA,KAArBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,qBAAA,CAAuBW,MAAM,CAAA;EAC5C,MAAME,GAAG,GAAGJ,aAAa,KAAbA,IAAAA,IAAAA,aAAa,wBAAAR,qBAAA,GAAbQ,aAAa,CAAEK,MAAM,MAAA,IAAA,IAAAb,qBAAA,KAAAC,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,CAAAA,sBAAA,GAArBD,qBAAA,CAAuBc,QAAQ,cAAAb,sBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAA/BA,sBAAA,CAAiCW,GAAG,CAAA;AAChD,EAAA,MAAMG,iBAAiB,GAAGL,MAAM,KAAKP,eAAe,CAAA;AACpD,EAAA,MAAM,CAACa,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,EAAc,CAAA;AAC9C,EAAA,MAAMC,SAAS,GAAGC,WAAW,CAC1BC,cAAc,IAAK;IAClB,IAAIL,IAAI,IAAI,EAACJ,GAAG,KAAA,IAAA,IAAHA,GAAG,KAAHA,KAAAA,CAAAA,IAAAA,GAAG,CAAEU,8BAA8B,CAAE,EAAA;AAChDD,MAAAA,cAAc,EAAE,CAAA;AAChB,MAAA,OAAA;AACF,KAAA;IACA,MAAME,KAAK,GAAGX,GAAG,KAAA,IAAA,IAAHA,GAAG,KAAHA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,GAAG,CAAEU,8BAA8B,CAAC;MAChDE,aAAa,EAAE,CAACrB,eAAe,CAAA;AACjC,KAAC,CAAC,CAAA;AACFoB,IAAAA,KAAK,CAACE,IAAI,EAAE,CAACC,IAAI,CAAEC,OAAO,IAAK;MAC7B,IAAI,CAAAA,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAPA,OAAO,CAAEC,MAAM,IAAG,CAAC,EAAE;AACvBX,QAAAA,OAAO,CAACU,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;AACrB,OAAA;AACAN,MAAAA,cAAc,EAAE,CAAA;AAClB,KAAC,CAAC,CAAA;AACJ,GAAC,EACD,CAACT,GAAG,EAAET,eAAe,CAAC,CACvB,CAAA;AACD,EAAA,oBACE0B,cAAA,CAAAC,aAAA,CAACC,WAAW,EAAA;AACVC,IAAAA,WAAW,EAAGX,cAA0B,iBACtCQ,cAAA,CAAAC,aAAA,CAAA,GAAA,EAAA;AACEG,MAAAA,SAAS,EAAG,CAAA;AACtB;AACA,YAAA,EAAclB,iBAAiB,GAAG,4BAA4B,GAAG,EAAG,CAAA;AACpE,UAAY,CAAA;AACFmB,MAAAA,OAAO,EAAEA,MAAMf,SAAS,CAACE,cAAc,CAAE;AACzCc,MAAAA,GAAG,EAAE7B,UAAW;AAChB,MAAA,aAAA,EAAaH,eAAgB;AAC7B,MAAA,eAAA,EAAeC,qBAAsB;MACrC,iBAAiB,EAAA,IAAA;AAAK,KAAA,eAEtByB,cAAA,CAAAC,aAAA,CAACM,KAAK,EAAA;MACJC,IAAI,EAAEC,eAAe,CAACC,SAAU;MAChCC,KAAK,EAAEnC,MAAM,GAAGoC,WAAW,CAACC,WAAW,GAAGD,WAAW,CAACE,cAAAA;AAAe,KAAA,EAEnE,GAAEzC,eAAgB,CAAA,EAAEE,qBAAsB,CAAA,CAAC,CACvC,CAEV;AACFwC,IAAAA,SAAS,EAAGC,aAAyB,iBACnChB,cAAA,CAAAC,aAAA,CAACgB,SAAAA;AACC;AACV;AACA;AACA,QAHU;AAIAC,MAAAA,SAAS,EAAEzC,UAAW;AACtB0C,MAAAA,gBAAgB,EAAE1C,UAAW;AAC7BuC,MAAAA,aAAa,EAAEA,aAAc;AAC7BI,MAAAA,KAAK,EAAE;AAAEC,QAAAA,UAAU,EAAE,KAAK;AAAEC,QAAAA,aAAa,EAAE,KAAA;AAAM,OAAA;AAAE,KAAA,eAEnDtB,cAAA,CAAAC,aAAA,CAACsB,WAAW,EAAA;AACVpC,MAAAA,IAAI,EAAEA,IAAK;AACXqC,MAAAA,SAAS,EAAER,aAAc;AACzBS,MAAAA,aAAa,EAAE5C,MAAAA;KACf,CAAA,CAAA;GAGN,CAAA,CAAA;AAEN;;;;"}
+{"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/ui/MentionUserLabel.js

@@ -1,16 +1,16 @@
 import React__default from 'react';
-import { M as MENTION_USER_LABEL_CLASSNAME } from '../consts-675764c9.js';
+import { M as MENTION_USER_LABEL_CLASSNAME } from '../consts-7f4d53a3.js';
 
-function MentionUserLabel(_ref) {
-  let {
-    className = '',
-    children,
-    isReverse = false,
-    color,
-    userId
-  } = _ref;
+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;
   return /*#__PURE__*/React__default.createElement("span", {
-    className: `${MENTION_USER_LABEL_CLASSNAME} ${className} ${isReverse ? 'reverse' : ''} ${color}`,
+    className: "".concat(MENTION_USER_LABEL_CLASSNAME, " ").concat(className, " ").concat(isReverse ? 'reverse' : '', " ").concat(color),
     contentEditable: false,
     "data-userid": userId,
     "data-sb-mention": true

package/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","_ref","className","children","isReverse","color","userId","React","createElement","MENTION_USER_LABEL_CLASSNAME","contentEditable"],"mappings":";;;AAae,SAASA,gBAAgBA,CAAAC,IAAA,EAMD;EAAA,IANE;AACvCC,IAAAA,SAAS,GAAG,EAAE;IACdC,QAAQ;AACRC,IAAAA,SAAS,GAAG,KAAK;IACjBC,KAAK;AACLC,IAAAA,MAAAA;AACqB,GAAC,GAAAL,IAAA,CAAA;EACtB,oBACEM,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AACEN,IAAAA,SAAS,EAAG,CAAA,EAAEO,4BAA6B,CAAA,CAAA,EAAGP,SAAU,CAAA,CAAA,EAAGE,SAAS,GAAG,SAAS,GAAG,EAAG,CAAA,CAAA,EAAGC,KAAM,CAAE,CAAA;AACjGK,IAAAA,eAAe,EAAE,KAAM;AACvB,IAAA,aAAA,EAAaJ,MAAO;IACpB,iBAAiB,EAAA,IAAA;AAAK,GAAA,EAErBH,QAAQ,CACJ,CAAA;AAEX;;;;"}
+{"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,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AACEP,IAAAA,SAAS,EAAE,EAAG,CAAAQ,MAAA,CAAAC,4BAA4B,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,QACG,CAAC,CAAA;AAEX;;;;"}

package/ui/MessageContent.js

@@ -1,13 +1,14 @@
-import { b as _extends, _ as _objectSpread2 } from '../_rollupPluginBabelHelpers-50c9576f.js';
+import { _ as _extends } from '../_rollupPluginBabelHelpers-07dcbc2b.js';
+import { _ as __assign } from '../tslib.es6-0c779aab.js';
 import React__default, { useContext, useRef, useState } from 'react';
-import { f as format } from '../index-daa3ae67.js';
+import { f as format } from '../index-c81fd6ec.js';
 import Avatar from './Avatar.js';
 import UserProfile from './UserProfile.js';
-import { M as MessageStatus } from '../index-7946293f.js';
+import { M as MessageStatus } from '../index-942c5fa2.js';
 import MessageItemMenu from './MessageItemMenu.js';
 import MessageItemReactionMenu from './MessageItemReactionMenu.js';
 import ContextMenu, { MenuItems } from './ContextMenu.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-aa520474.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-12103973.js';
 import EmojiReactions from './EmojiReactions.js';
 import AdminMessage from './AdminMessage.js';
 import TextMessageItemBody from './TextMessageItemBody.js';
@@ -16,133 +17,143 @@ import ThumbnailMessageItemBody from './ThumbnailMessageItemBody.js';
 import OGMessageItemBody from './OGMessageItemBody.js';
 import UnknownMessageItemBody from './UnknownMessageItemBody.js';
 import QuoteMessage from './QuoteMessage.js';
-import { y as getUIKitMessageTypes, m as getClassName, z as getSenderName, A as isOGMessage, B as isTextMessage, x as getUIKitMessageType, c as isMultipleFilesMessage, d as isVoiceMessage, s as isThumbnailMessage } from '../index-5d6a0f12.js';
-import { a as UserProfileContext } from '../UserProfileContext-4ae968eb.js';
-import { u as useLocalization } from '../LocalizationContext-2463058b.js';
-import useSendbirdStateContext from '../useSendbirdStateContext.js';
-import { u as useLongPress } from '../useLongPress-5e1ad951.js';
-import { M as MobileMenu } from '../index-b25ffa7e.js';
-import { u as useMediaQueryContext } from '../MediaQueryContext-e3429d12.js';
+import { A as getUIKitMessageTypes, o as getClassName, a as isSendableMessage, B as getSenderName, C as isOGMessage, D as isTextMessage, z as getUIKitMessageType, c as isMultipleFilesMessage, d as isVoiceMessage, v as isThumbnailMessage } from '../index-fc1642cb.js';
+import { a as UserProfileContext } from '../UserProfileContext-26e71f9a.js';
+import { u as useLocalization } from '../LocalizationContext-d18a86d8.js';
+import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
+import { u as useLongPress } from '../useLongPress-322bb6a3.js';
+import { M as MobileMenu } from '../index-eec0ce47.js';
+import { u as useMediaQueryContext } from '../MediaQueryContext-3eeeec4f.js';
 import ThreadReplies from './ThreadReplies.js';
-import { T as ThreadReplySelectType } from '../const-711048c3.js';
+import { T as ThreadReplySelectType } from '../const-e3326913.js';
 import { VoiceMessageItemBody } from './VoiceMessageItemBody.js';
-import { n as noop } from '../utils-407da489.js';
-import { M as MultipleFilesMessageItemBody } from '../index-7b7478f5.js';
-import '../index-7700a436.js';
+import { n as noop } from '../utils-74c161a0.js';
+import { u as useThreadMessageKindKeySelector, a as useStatefulFileInfoList, M as MultipleFilesMessageItemBody } from '../useStatefulFileInfoList-dd95f949.js';
+import '../index-d3f61405.js';
 import './ImageRenderer.js';
 import './Icon.js';
 import 'prop-types';
-import '../uuid-16373bba.js';
+import '../uuid-3c77ef7b.js';
 import '../sendbirdSelectors.js';
-import '../topics-5659403d.js';
+import '../pubSub/topics.js';
 import './Button.js';
-import '../stringSet-2814bf17.js';
+import '../types-4ffc52f6.js';
+import '../stringSet-1106c8ec.js';
 import './Loader.js';
 import '../utils/message/getOutgoingMessageState.js';
-import '../index-5cb32ab5.js';
-import '../index-13401b87.js';
+import '../index-dc1827ea.js';
+import '../index-1432c287.js';
 import './IconButton.js';
-import '../types-89092633.js';
+import '../types-50e412d8.js';
+import '../ChannelProvider-7f6fd1f8.js';
+import '../utils-40040f8e.js';
+import '@sendbird/chat/message';
+import '../index-c6095960.js';
+import '../useSendMultipleFilesMessage-4489a0f6.js';
+import '../compareIds-b56b02f1.js';
+import '@sendbird/chat/groupChannel';
+import '../consts-aa64aca8.js';
+import '../resolvedReplyType-0532593c.js';
 import './ReactionButton.js';
 import 'react-dom';
 import './SortByRow.js';
-import '../index.module-60af77d3.js';
 import './ReactionBadge.js';
 import './BottomSheet.js';
-import '../index-98887e8d.js';
+import '../index-c7ed4aef.js';
 import './UserListItem.js';
 import './MutedAvatarOverlay.js';
 import './Checkbox.js';
 import './Tooltip.js';
 import './TooltipWrapper.js';
 import '../Message/context.js';
-import '../tokenize-4b153552.js';
-import '../index-ae7ef8cf.js';
+import '../tokenize-d17bf862.js';
+import '../index-3d508585.js';
 import './MentionLabel.js';
 import './LinkLabel.js';
-import '../consts-eb77e905.js';
+import '../consts-f0ba9b80.js';
 import './TextButton.js';
-import '../color-b7f211a8.js';
-import '../utils-b97d5113.js';
-import '../consts-6ee24012.js';
+import '../color-1383d4ab.js';
+import '../utils-e98a7f8c.js';
+import '../consts-833420ed.js';
 import '../withSendbird.js';
 import './ProgressBar.js';
 import '../VoicePlayer/useVoicePlayer.js';
-import '../index-e15f6b6a.js';
-import '../consts-691a3935.js';
+import '../index-124a5766.js';
 import '../VoiceRecorder/context.js';
 import './Modal.js';
 import './PlaybackTime.js';
-import '../index-c421b228.js';
-
-// should initialize in UserProfileContext.jsx
-
-function MessageContent(_ref) {
-  var _sender, _message$threadInfo, _message$isAdminMessa, _channel$members2, _channel$members2$fin, _channel$messageOffse, _message$parentMessag2, _message$parentMessag3, _channel$url, _message$reactions, _message$isUserMessag, _message$isFileMessag, _message$isMultipleFi;
-  let {
-    className,
-    userId,
-    channel,
-    message,
-    disabled = false,
-    chainTop = false,
-    chainBottom = false,
-    isReactionEnabled = false,
-    disableQuoteMessage = false,
-    replyType,
-    threadReplySelectType,
-    nicknamesMap,
-    emojiContainer,
-    scrollToMessage,
-    showEdit,
-    showRemove,
-    showFileViewer,
-    resendMessage,
-    toggleReaction,
-    setQuoteMessage,
-    onReplyInThread,
-    onQuoteMessageClick,
-    onMessageHeightChange
-  } = _ref;
-  const messageTypes = getUIKitMessageTypes();
-  const {
-    dateLocale
-  } = useLocalization();
-  const {
-    config
-  } = (useSendbirdStateContext === null || useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext()) || {};
-  const {
-    disableUserProfile,
-    renderUserProfile
-  } = useContext(UserProfileContext);
-  const avatarRef = useRef(null);
-  const contentRef = useRef(null);
-  const {
-    isMobile
-  } = useMediaQueryContext();
-  const [showMenu, setShowMenu] = useState(false);
-  const [mouseHover, setMouseHover] = useState(false);
-  const [supposedHover, setSupposedHover] = useState(false);
-  const isByMe = userId === (message === null || message === void 0 ? void 0 : (_sender = message.sender) === null || _sender === void 0 ? void 0 : _sender.userId) || (message === null || message === void 0 ? void 0 : message.sendingStatus) === 'pending' || (message === null || message === void 0 ? void 0 : message.sendingStatus) === 'failed';
-  const isByMeClassName = isByMe ? 'outgoing' : 'incoming';
-  const chainTopClassName = chainTop ? 'chain-top' : '';
-  const isReactionEnabledInChannel = isReactionEnabled && !(channel !== null && channel !== void 0 && channel.isEphemeral);
-  const isReactionEnabledClassName = isReactionEnabledInChannel ? 'use-reactions' : '';
-  const supposedHoverClassName = supposedHover ? 'sendbird-mouse-hover' : '';
-  const useReplying = !!((replyType === 'QUOTE_REPLY' || replyType === 'THREAD') && message !== null && message !== void 0 && message.parentMessageId && message !== null && message !== void 0 && message.parentMessage && !disableQuoteMessage);
-  const useReplyingClassName = useReplying ? 'use-quote' : '';
-  const isOgMessageEnabledInGroupChannel = (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && config.groupChannel.enableOgtag;
+import '../index-7a1085b6.js';
 
+function MessageContent(_a) {
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+  var className = _a.className,
+    userId = _a.userId,
+    channel = _a.channel,
+    message = _a.message,
+    _r = _a.disabled,
+    disabled = _r === void 0 ? false : _r,
+    _s = _a.chainTop,
+    chainTop = _s === void 0 ? false : _s,
+    _t = _a.chainBottom,
+    chainBottom = _t === void 0 ? false : _t,
+    _u = _a.isReactionEnabled,
+    isReactionEnabled = _u === void 0 ? false : _u,
+    _v = _a.disableQuoteMessage,
+    disableQuoteMessage = _v === void 0 ? false : _v,
+    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,
+    deleteMessage = _a.deleteMessage,
+    toggleReaction = _a.toggleReaction,
+    setQuoteMessage = _a.setQuoteMessage,
+    onReplyInThread = _a.onReplyInThread,
+    onQuoteMessageClick = _a.onQuoteMessageClick,
+    onMessageHeightChange = _a.onMessageHeightChange;
+  var messageTypes = getUIKitMessageTypes();
+  var dateLocale = useLocalization().dateLocale;
+  var _w = (useSendbirdStateContext === null || useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext()) || {},
+    config = _w.config,
+    eventHandlers = _w.eventHandlers;
+  var onPressUserProfileHandler = (_b = eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.reaction) === null || _b === void 0 ? void 0 : _b.onPressUserProfile;
+  var _x = useContext(UserProfileContext),
+    disableUserProfile = _x.disableUserProfile,
+    renderUserProfile = _x.renderUserProfile;
+  var avatarRef = useRef(null);
+  var contentRef = useRef(null);
+  var isMobile = useMediaQueryContext().isMobile;
+  var _y = useState(false),
+    showMenu = _y[0],
+    setShowMenu = _y[1];
+  var _z = useState(false),
+    mouseHover = _z[0],
+    setMouseHover = _z[1];
+  var _0 = useState(false),
+    supposedHover = _0[0],
+    setSupposedHover = _0[1];
+  var isByMe = userId === ((_c = message === null || message === void 0 ? void 0 : message.sender) === null || _c === void 0 ? void 0 : _c.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' : '';
+  var isReactionEnabledInChannel = isReactionEnabled && !(channel === null || channel === void 0 ? void 0 : channel.isEphemeral);
+  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' : '';
+  var isOgMessageEnabledInGroupChannel = (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && config.groupChannel.enableOgtag;
   // Thread replies
-  const displayThreadReplies = (message === null || message === void 0 ? void 0 : (_message$threadInfo = message.threadInfo) === null || _message$threadInfo === void 0 ? void 0 : _message$threadInfo.replyCount) > 0 && replyType === 'THREAD';
-
+  var displayThreadReplies = ((_d = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _d === void 0 ? void 0 : _d.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;
-  const longPress = useLongPress({
-    onLongPress: () => {
+  var longPress = useLongPress({
+    onLongPress: function () {
       if (isMobile) {
         setShowMenu(true);
       }
@@ -152,64 +163,71 @@ function MessageContent(_ref) {
     delay: 300,
     shouldPreventDefault: false
   });
-  if (message !== null && message !== void 0 && (_message$isAdminMessa = message.isAdminMessage) !== null && _message$isAdminMessa !== void 0 && _message$isAdminMessa.call(message) || (message === null || message === void 0 ? void 0 : message.messageType) === 'admin') {
+  var threadMessageKindKey = useThreadMessageKindKeySelector({
+    isMobile: isMobile
+  });
+  // For MultipleFilesMessage only.
+  var statefulFileInfoList = useStatefulFileInfoList(message);
+  if (((_e = message === null || message === void 0 ? void 0 : message.isAdminMessage) === null || _e === void 0 ? void 0 : _e.call(message)) || (message === null || message === void 0 ? void 0 : message.messageType) === 'admin') {
     return /*#__PURE__*/React__default.createElement(AdminMessage, {
       message: message
     });
   }
   return /*#__PURE__*/React__default.createElement("div", {
     className: getClassName([className, 'sendbird-message-content', isByMeClassName]),
-    onMouseOver: () => setMouseHover(true),
-    onMouseLeave: () => setMouseHover(false)
+    onMouseOver: function () {
+      return setMouseHover(true);
+    },
+    onMouseLeave: function () {
+      return setMouseHover(false);
+    }
   }, /*#__PURE__*/React__default.createElement("div", {
     className: getClassName(['sendbird-message-content__left', isReactionEnabledClassName, isByMeClassName, useReplyingClassName])
-  }, !isByMe && !chainBottom &&
+  }, !isByMe && !chainBottom && isSendableMessage(message) &&
   /*#__PURE__*/
   /** user profile */
   React__default.createElement(ContextMenu, {
-    menuTrigger: toggleDropdown => {
-      var _channel$members, _channel$members$find, _message$sender2;
+    menuTrigger: function (toggleDropdown) {
+      var _a, _b;
       return /*#__PURE__*/React__default.createElement(Avatar, {
-        className: `sendbird-message-content__left__avatar ${displayThreadReplies ? 'use-thread-replies' : ''}`
+        className: "sendbird-message-content__left__avatar ".concat(displayThreadReplies ? 'use-thread-replies' : '')
         // @ts-ignore
         ,
-        src: (channel === null || channel === void 0 ? void 0 : (_channel$members = channel.members) === null || _channel$members === void 0 ? void 0 : (_channel$members$find = _channel$members.find(member => {
-          var _message$sender;
-          return (member === null || member === void 0 ? void 0 : member.userId) === (message === null || message === void 0 ? void 0 : (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.userId);
-        })) === null || _channel$members$find === void 0 ? void 0 : _channel$members$find.profileUrl) || (message === null || message === void 0 ? void 0 : (_message$sender2 = message.sender) === null || _message$sender2 === void 0 ? void 0 : _message$sender2.profileUrl) || ''
+        src: ((_b = (_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.find(function (member) {
+          return (member === null || member === void 0 ? void 0 : member.userId) === message.sender.userId;
+        })) === null || _b === void 0 ? void 0 : _b.profileUrl) || message.sender.profileUrl || ''
         // TODO: Divide getting profileUrl logic to utils
         ,
         ref: avatarRef,
         width: "28px",
         height: "28px",
-        onClick: () => {
+        onClick: function () {
           if (!disableUserProfile) toggleDropdown();
         }
       });
     },
-    menuItems: closeDropdown => /*#__PURE__*/React__default.createElement(MenuItems
-    /**
-    * parentRef: For catching location(x, y) of MenuItems
-    * parentContainRef: For toggling more options(menus & reactions)
-    */, {
-      parentRef: avatarRef,
-      parentContainRef: avatarRef,
-      closeDropdown: closeDropdown,
-      style: {
-        paddingTop: '0px',
-        paddingBottom: '0px'
-      }
-    }, renderUserProfile
-    // @ts-ignore
-    ? renderUserProfile({
-      user: message === null || message === void 0 ? void 0 : message.sender,
-      close: closeDropdown
-    })
-    // @ts-ignore
-    : /*#__PURE__*/React__default.createElement(UserProfile, {
-      user: message.sender,
-      onSuccess: closeDropdown
-    }))
+    menuItems: function (closeDropdown) {
+      return /*#__PURE__*/React__default.createElement(MenuItems
+      /**
+      * parentRef: For catching location(x, y) of MenuItems
+      * parentContainRef: For toggling more options(menus & reactions)
+      */, {
+        parentRef: avatarRef,
+        parentContainRef: avatarRef,
+        closeDropdown: closeDropdown,
+        style: {
+          paddingTop: '0px',
+          paddingBottom: '0px'
+        }
+      }, renderUserProfile ? renderUserProfile({
+        user: message.sender,
+        close: closeDropdown,
+        currentUserId: userId
+      }) : /*#__PURE__*/React__default.createElement(UserProfile, {
+        user: message.sender,
+        onSuccess: closeDropdown
+      }));
+    }
   }), isByMe && !isMobile && /*#__PURE__*/React__default.createElement("div", {
     className: getClassName(['sendbird-message-content-menu', isReactionEnabledClassName, supposedHoverClassName, isByMeClassName])
   }, /*#__PURE__*/React__default.createElement(MessageItemMenu, {
@@ -224,30 +242,27 @@ function MessageContent(_ref) {
     resendMessage: resendMessage,
     setQuoteMessage: setQuoteMessage,
     setSupposedHover: setSupposedHover,
-    onReplyInThread: _ref2 => {
-      let {
-        message
-      } = _ref2;
+    onReplyInThread: function (_a) {
+      var _b;
+      var message = _a.message;
       if (threadReplySelectType === ThreadReplySelectType.THREAD) {
         onReplyInThread({
-          message
+          message: message
         });
       } else if (threadReplySelectType === ThreadReplySelectType.PARENT) {
-        var _message$parentMessag;
-        scrollToMessage((_message$parentMessag = message.parentMessage) === null || _message$parentMessag === void 0 ? void 0 : _message$parentMessag.createdAt, message.parentMessageId);
+        scrollToMessage((_b = message.parentMessage) === null || _b === void 0 ? void 0 : _b.createdAt, message.parentMessageId);
       }
     }
   }), isReactionEnabledInChannel && /*#__PURE__*/React__default.createElement(MessageItemReactionMenu, {
     className: "sendbird-message-content-menu__reaction-menu",
     message: message,
     userId: userId,
-    spaceFromTrigger: {},
     emojiContainer: emojiContainer,
     toggleReaction: toggleReaction,
     setSupposedHover: setSupposedHover
   }))), /*#__PURE__*/React__default.createElement("div", _extends({
     className: 'sendbird-message-content__middle'
-  }, isMobile ? _objectSpread2({}, longPress) : {}, {
+  }, isMobile ? __assign({}, longPress) : {}, {
     ref: contentRef
   }), !isByMe && !chainTop && !useReplying && /*#__PURE__*/React__default.createElement(Label, {
     className: "sendbird-message-content__middle__sender-name",
@@ -255,10 +270,10 @@ function MessageContent(_ref) {
     color: LabelColors.ONBACKGROUND_2
   },
   // @ts-ignore
-  (channel === null || channel === void 0 ? void 0 : (_channel$members2 = channel.members) === null || _channel$members2 === void 0 ? void 0 : (_channel$members2$fin = _channel$members2.find(member => {
-    var _message$sender3;
-    return (member === null || member === void 0 ? void 0 : member.userId) === (message === null || message === void 0 ? void 0 : (_message$sender3 = message.sender) === null || _message$sender3 === void 0 ? void 0 : _message$sender3.userId);
-  })) === null || _channel$members2$fin === void 0 ? void 0 : _channel$members2$fin.nickname) || getSenderName(message)
+  ((_g = (_f = channel === null || channel === void 0 ? void 0 : channel.members) === null || _f === void 0 ? void 0 : _f.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 || _g === void 0 ? void 0 : _g.nickname) || getSenderName(message)
   // TODO: Divide getting profileUrl logic to utils
   ), useReplying ? /*#__PURE__*/React__default.createElement("div", {
     className: getClassName(['sendbird-message-content__middle__quote-message', isByMe ? 'outgoing' : 'incoming', useReplyingClassName])
@@ -267,15 +282,15 @@ function MessageContent(_ref) {
     message: message,
     userId: userId,
     isByMe: isByMe,
-    isUnavailable: ((_channel$messageOffse = channel === null || channel === void 0 ? void 0 : channel.messageOffsetTimestamp) !== null && _channel$messageOffse !== void 0 ? _channel$messageOffse : 0) > ((_message$parentMessag2 = (_message$parentMessag3 = message.parentMessage) === null || _message$parentMessag3 === void 0 ? void 0 : _message$parentMessag3.createdAt) !== null && _message$parentMessag2 !== void 0 ? _message$parentMessag2 : 0),
-    onClick: () => {
-      var _message$parentMessag4;
+    isUnavailable: ((_h = channel === null || channel === void 0 ? void 0 : channel.messageOffsetTimestamp) !== null && _h !== void 0 ? _h : 0) > ((_k = (_j = message.parentMessage) === null || _j === void 0 ? void 0 : _j.createdAt) !== null && _k !== void 0 ? _k : 0),
+    onClick: function () {
+      var _a;
       if (replyType === 'THREAD' && threadReplySelectType === ThreadReplySelectType.THREAD) {
         onQuoteMessageClick === null || onQuoteMessageClick === void 0 ? void 0 : onQuoteMessageClick({
           message: message
         });
       }
-      if ((replyType === 'QUOTE_REPLY' || replyType === 'THREAD' && threadReplySelectType === ThreadReplySelectType.PARENT) && message !== null && message !== void 0 && (_message$parentMessag4 = message.parentMessage) !== null && _message$parentMessag4 !== void 0 && _message$parentMessag4.createdAt && message !== null && message !== void 0 && message.parentMessageId) {
+      if ((replyType === 'QUOTE_REPLY' || replyType === 'THREAD' && threadReplySelectType === 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);
       }
     }
@@ -314,11 +329,13 @@ function MessageContent(_ref) {
     message: message,
     isByMe: isByMe,
     mouseHover: mouseHover,
-    isReactionEnabled: isReactionEnabledInChannel
+    isReactionEnabled: isReactionEnabledInChannel,
+    threadMessageKindKey: threadMessageKindKey,
+    statefulFileInfoList: statefulFileInfoList
   }), isVoiceMessage(message) && /*#__PURE__*/React__default.createElement(VoiceMessageItemBody, {
     className: "sendbird-message-content__middle__message-item-body",
     message: message,
-    channelUrl: (_channel$url = channel === null || channel === void 0 ? void 0 : channel.url) !== null && _channel$url !== void 0 ? _channel$url : '',
+    channelUrl: (_l = channel === null || channel === void 0 ? void 0 : channel.url) !== null && _l !== void 0 ? _l : '',
     isByMe: isByMe,
     isReactionEnabled: isReactionEnabledInChannel
   }), isThumbnailMessage(message) && /*#__PURE__*/React__default.createElement(ThumbnailMessageItemBody, {
@@ -337,7 +354,7 @@ function MessageContent(_ref) {
     isByMe: isByMe,
     mouseHover: mouseHover,
     isReactionEnabled: isReactionEnabledInChannel
-  }), isReactionEnabledInChannel && (message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) > 0 && /*#__PURE__*/React__default.createElement("div", {
+  }), isReactionEnabledInChannel && ((_m = message === null || message === void 0 ? void 0 : message.reactions) === null || _m === void 0 ? void 0 : _m.length) > 0 && /*#__PURE__*/React__default.createElement("div", {
     className: getClassName(['sendbird-message-content-reactions', isMultipleFilesMessage(message) ? 'image-grid' : !isByMe || isThumbnailMessage(message) || isOGMessage(message) ? '' : 'primary', mouseHover ? 'mouse-hover' : ''])
   }, /*#__PURE__*/React__default.createElement(EmojiReactions, {
     userId: userId,
@@ -346,7 +363,8 @@ function MessageContent(_ref) {
     isByMe: isByMe,
     emojiContainer: emojiContainer,
     memberNicknamesMap: nicknamesMap,
-    toggleReaction: toggleReaction
+    toggleReaction: toggleReaction,
+    onPressUserProfile: onPressUserProfileHandler
   })), !isByMe && !chainBottom && /*#__PURE__*/React__default.createElement(Label, {
     className: getClassName(['sendbird-message-content__middle__body-container__created-at', 'right', supposedHoverClassName]),
     type: LabelTypography.CAPTION_3,
@@ -356,9 +374,11 @@ function MessageContent(_ref) {
   }))), displayThreadReplies && /*#__PURE__*/React__default.createElement(ThreadReplies, {
     className: "sendbird-message-content__middle__thread-replies",
     threadInfo: message === null || message === void 0 ? void 0 : message.threadInfo,
-    onClick: () => onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
-      message: message
-    })
+    onClick: function () {
+      return onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
+        message: message
+      });
+    }
   })), /*#__PURE__*/React__default.createElement("div", {
     className: getClassName(['sendbird-message-content__right', chainTopClassName, isReactionEnabledClassName, useReplyingClassName])
   }, !isByMe && !isMobile && /*#__PURE__*/React__default.createElement("div", {
@@ -367,7 +387,6 @@ function MessageContent(_ref) {
     className: "sendbird-message-content-menu__reaction-menu",
     message: message,
     userId: userId,
-    spaceFromTrigger: {},
     emojiContainer: emojiContainer,
     toggleReaction: toggleReaction,
     setSupposedHover: setSupposedHover
@@ -382,23 +401,21 @@ function MessageContent(_ref) {
     resendMessage: resendMessage,
     setQuoteMessage: setQuoteMessage,
     setSupposedHover: setSupposedHover,
-    onReplyInThread: _ref3 => {
-      let {
-        message
-      } = _ref3;
+    onReplyInThread: function (_a) {
+      var _b;
+      var message = _a.message;
       if (threadReplySelectType === ThreadReplySelectType.THREAD) {
         onReplyInThread({
-          message
+          message: message
         });
       } else if (threadReplySelectType === ThreadReplySelectType.PARENT) {
-        var _message$parentMessag5;
-        scrollToMessage((_message$parentMessag5 = message.parentMessage) === null || _message$parentMessag5 === void 0 ? void 0 : _message$parentMessag5.createdAt, message.parentMessageId);
+        scrollToMessage((_b = message.parentMessage) === null || _b === void 0 ? void 0 : _b.createdAt, message.parentMessageId);
       }
     }
-  }))), showMenu && ((message === null || message === void 0 ? void 0 : (_message$isUserMessag = message.isUserMessage) === null || _message$isUserMessag === void 0 ? void 0 : _message$isUserMessag.call(message)) || (message === null || message === void 0 ? void 0 : (_message$isFileMessag = message.isFileMessage) === null || _message$isFileMessag === void 0 ? void 0 : _message$isFileMessag.call(message)) || (message === null || message === void 0 ? void 0 : (_message$isMultipleFi = message.isMultipleFilesMessage) === null || _message$isMultipleFi === void 0 ? void 0 : _message$isMultipleFi.call(message))) && /*#__PURE__*/React__default.createElement(MobileMenu, {
+  }))), showMenu && (((_o = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _o === void 0 ? void 0 : _o.call(message)) || ((_p = message === null || message === void 0 ? void 0 : message.isFileMessage) === null || _p === void 0 ? void 0 : _p.call(message)) || ((_q = message === null || message === void 0 ? void 0 : message.isMultipleFilesMessage) === null || _q === void 0 ? void 0 : _q.call(message))) && /*#__PURE__*/React__default.createElement(MobileMenu, {
     parentRef: contentRef,
     channel: channel,
-    hideMenu: () => {
+    hideMenu: function () {
       setShowMenu(false);
     },
     message: message,
@@ -410,20 +427,19 @@ function MessageContent(_ref) {
     showRemove: showRemove,
     emojiContainer: emojiContainer,
     resendMessage: resendMessage,
+    deleteMessage: deleteMessage,
     setQuoteMessage: setQuoteMessage,
     toggleReaction: toggleReaction,
     showEdit: showEdit,
-    onReplyInThread: _ref4 => {
-      let {
-        message
-      } = _ref4;
+    onReplyInThread: function (_a) {
+      var _b;
+      var message = _a.message;
       if (threadReplySelectType === ThreadReplySelectType.THREAD) {
         onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
-          message
+          message: message
         });
       } else if (threadReplySelectType === ThreadReplySelectType.PARENT) {
-        var _message$parentMessag6;
-        scrollToMessage === null || scrollToMessage === void 0 ? void 0 : scrollToMessage((message === null || message === void 0 ? void 0 : (_message$parentMessag6 = message.parentMessage) === null || _message$parentMessag6 === void 0 ? void 0 : _message$parentMessag6.createdAt) || 0, (message === null || message === void 0 ? void 0 : message.parentMessageId) || 0);
+        scrollToMessage === null || scrollToMessage === void 0 ? void 0 : scrollToMessage(((_b = message === null || message === void 0 ? void 0 : message.parentMessage) === null || _b === void 0 ? void 0 : _b.createdAt) || 0, (message === null || message === void 0 ? void 0 : message.parentMessageId) || 0);
       }
     }
   }));