@sendbird/uikit-react 3.2.6 → 3.3.0-rc.0

package/cjs/ui/EmojiReactions.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiReactions.js","sources":["../../../src/ui/EmojiReactions/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement, useContext, useRef } from 'react';\nimport type { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';\nimport type { Emoji, EmojiContainer } from '@sendbird/chat';\n\nimport Tooltip from '../Tooltip';\nimport TooltipWrapper from '../TooltipWrapper';\nimport ReactionBadge from '../ReactionBadge';\nimport ReactionButton from '../ReactionButton';\nimport ImageRenderer from '../ImageRenderer';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport ContextMenu, { EmojiListItems } from '../ContextMenu';\n\nimport { getClassName, getEmojiListAll, getEmojiMapAll, getEmojiTooltipString, isReactedBy } from '../../utils';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\n\ninterface Props {\n  className?: string | Array<string>;\n  userId: string;\n  message: UserMessage | FileMessage;\n  emojiContainer: EmojiContainer;\n  memberNicknamesMap: Map<string, string>;\n  spaceFromTrigger?: Record<string, unknown>;\n  isByMe?: boolean;\n  toggleReaction?: (message: UserMessage | FileMessage, key: string, byMe: boolean) => void;\n}\n\nconst EmojiReactions = ({\n  className,\n  userId,\n  message,\n  emojiContainer,\n  memberNicknamesMap,\n  spaceFromTrigger = {},\n  isByMe = false,\n  toggleReaction,\n}: Props): ReactElement => {\n  const { stringSet } = useContext(LocalizationContext);\n  const emojisMap = getEmojiMapAll(emojiContainer);\n  const addReactionRef = useRef(null);\n\n  return (\n    <div className={getClassName([\n      className, 'sendbird-emoji-reactions',\n      isByMe ? 'outgoing' : 'incoming',\n    ])}>\n      {(message?.reactions?.length > 0) && (\n        message.reactions.map((reaction: Reaction): ReactElement => {\n          const reactedByMe = isReactedBy(userId, reaction);\n          return (\n            <TooltipWrapper\n              className=\"sendbird-emoji-reactions__reaction-badge\"\n              key={reaction?.key}\n              hoverTooltip={(reaction?.userIds?.length > 0) && (\n                <Tooltip>\n                  {getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet)}\n                </Tooltip>\n              )}\n            >\n              <ReactionBadge\n                count={reaction.userIds.length}\n                selected={reactedByMe}\n                onClick={() => toggleReaction(message, reaction.key, reactedByMe)}\n              >\n                <ImageRenderer\n                  circle\n                  url={emojisMap.get(reaction?.key)?.url || ''}\n                  width=\"20px\"\n                  height=\"20px\"\n                  defaultComponent={(\n                    <Icon width=\"20px\" height=\"20px\" type={IconTypes.QUESTION} />\n                  )}\n                />\n              </ReactionBadge>\n            </TooltipWrapper>\n          );\n        })\n      )}\n      {(message?.reactions?.length < emojisMap.size) && (\n        <ContextMenu\n          menuTrigger={(toggleDropdown: () => void): ReactElement => (\n            <ReactionBadge\n              className=\"sendbird-emoji-reactions__add-reaction-badge\"\n              ref={addReactionRef}\n              isAdd\n              onClick={toggleDropdown}\n            >\n              <Icon\n                type={IconTypes.EMOJI_MORE}\n                fillColor={IconColors.ON_BACKGROUND_3}\n                width=\"20px\"\n                height=\"20px\"\n              />\n            </ReactionBadge>\n          )}\n          menuItems={(closeDropdown: () => void): ReactElement => (\n            <EmojiListItems\n              parentRef={addReactionRef}\n              parentContainRef={addReactionRef}\n              closeDropdown={closeDropdown}\n              spacefromTrigger={spaceFromTrigger}\n            >\n              {getEmojiListAll(emojiContainer).map((emoji: Emoji): ReactElement => {\n                const isReacted: boolean = message?.reactions?.\n                  filter((reaction: Reaction): boolean => reaction.key === emoji.key)[0]?.userIds?.\n                  some((reactorId: string): boolean => reactorId === userId);\n                return (\n                  <ReactionButton\n                    key={emoji.key}\n                    width=\"36px\"\n                    height=\"36px\"\n                    selected={isReacted}\n                    onClick={(): void => {\n                      closeDropdown();\n                      toggleReaction(message, emoji.key, isReacted);\n                    }}\n                  >\n                    <ImageRenderer\n                      url={emoji?.url || ''}\n                      width=\"28px\"\n                      height=\"28px\"\n                      placeHolder={(style: Record<string, unknown>): ReactElement => (\n                        <div style={style}>\n                          <Icon\n                            type={IconTypes.QUESTION}\n                            fillColor={IconColors.ON_BACKGROUND_3}\n                            width=\"28px\"\n                            height=\"28px\"\n                          />\n                        </div>\n                      )}\n                    />\n                  </ReactionButton>\n                );\n              })}\n            </EmojiListItems>\n          )}\n        />\n      )}\n    </div>\n  );\n}\n\nexport default EmojiReactions;\n"],"names":["EmojiReactions","_a","className","userId","message","emojiContainer","memberNicknamesMap","_d","spaceFromTrigger","_e","isByMe","toggleReaction","stringSet","useContext","LocalizationContext","emojisMap","getEmojiMapAll","addReactionRef","useRef","React","getClassName","_b","reactions","length","map","reaction","reactedByMe","isReactedBy","TooltipWrapper","key","userIds","Tooltip","getEmojiTooltipString","ReactionBadge","ImageRenderer","get","url","Icon","IconTypes","QUESTION","_c","size","ContextMenu","toggleDropdown","EMOJI_MORE","IconColors","ON_BACKGROUND_3","closeDropdown","EmojiListItems","getEmojiListAll","emoji","isReacted","filter","some","reactorId","ReactionButton","style"],"mappings":"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"}
+{"version":3,"file":"EmojiReactions.js","sources":["../../../src/ui/EmojiReactions/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement, useContext, useRef } from 'react';\nimport type { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';\nimport type { Emoji, EmojiContainer } from '@sendbird/chat';\n\nimport Tooltip from '../Tooltip';\nimport TooltipWrapper from '../TooltipWrapper';\nimport ReactionBadge from '../ReactionBadge';\nimport ReactionButton from '../ReactionButton';\nimport ImageRenderer from '../ImageRenderer';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport ContextMenu, { EmojiListItems } from '../ContextMenu';\n\nimport { getClassName, getEmojiListAll, getEmojiMapAll, getEmojiTooltipString, isReactedBy } from '../../utils';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\n\ninterface Props {\n  className?: string | Array<string>;\n  userId: string;\n  message: UserMessage | FileMessage;\n  emojiContainer: EmojiContainer;\n  memberNicknamesMap: Map<string, string>;\n  spaceFromTrigger?: { x: number, y: number };\n  isByMe?: boolean;\n  toggleReaction?: (message: UserMessage | FileMessage, key: string, byMe: boolean) => void;\n}\n\nconst EmojiReactions = ({\n  className,\n  userId,\n  message,\n  emojiContainer,\n  memberNicknamesMap,\n  spaceFromTrigger = { x: 0, y: 0 },\n  isByMe = false,\n  toggleReaction,\n}: Props): ReactElement => {\n  const { stringSet } = useContext(LocalizationContext);\n  const emojisMap = getEmojiMapAll(emojiContainer);\n  const addReactionRef = useRef(null);\n\n  return (\n    <div className={getClassName([\n      className, 'sendbird-emoji-reactions',\n      isByMe ? 'outgoing' : 'incoming',\n    ])}>\n      {(message?.reactions?.length > 0) && (\n        message.reactions.map((reaction: Reaction): ReactElement => {\n          const reactedByMe = isReactedBy(userId, reaction);\n          return (\n            <TooltipWrapper\n              className=\"sendbird-emoji-reactions__reaction-badge\"\n              key={reaction?.key}\n              hoverTooltip={(reaction?.userIds?.length > 0) && (\n                <Tooltip>\n                  {getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet)}\n                </Tooltip>\n              )}\n            >\n              <ReactionBadge\n                count={reaction.userIds.length}\n                selected={reactedByMe}\n                onClick={(e) => {\n                  toggleReaction(message, reaction.key, reactedByMe);\n                  e?.stopPropagation?.();\n                }}\n              >\n                <ImageRenderer\n                  circle\n                  url={emojisMap.get(reaction?.key)?.url || ''}\n                  width=\"20px\"\n                  height=\"20px\"\n                  defaultComponent={(\n                    <Icon width=\"20px\" height=\"20px\" type={IconTypes.QUESTION} />\n                  )}\n                />\n              </ReactionBadge>\n            </TooltipWrapper>\n          );\n        })\n      )}\n      {(message?.reactions?.length < emojisMap.size) && (\n        <ContextMenu\n          menuTrigger={(toggleDropdown: () => void): ReactElement => (\n            <ReactionBadge\n              className=\"sendbird-emoji-reactions__add-reaction-badge\"\n              ref={addReactionRef}\n              isAdd\n              onClick={(e) => {\n                toggleDropdown();\n                e?.stopPropagation?.();\n              }}\n            >\n              <Icon\n                type={IconTypes.EMOJI_MORE}\n                fillColor={IconColors.ON_BACKGROUND_3}\n                width=\"20px\"\n                height=\"20px\"\n              />\n            </ReactionBadge>\n          )}\n          menuItems={(closeDropdown: () => void): ReactElement => (\n            <EmojiListItems\n              parentRef={addReactionRef}\n              parentContainRef={addReactionRef}\n              closeDropdown={closeDropdown}\n              spacefromTrigger={spaceFromTrigger}\n            >\n              {getEmojiListAll(emojiContainer).map((emoji: Emoji): ReactElement => {\n                const isReacted: boolean = (message?.reactions?.\n                  find((reaction: Reaction): boolean => reaction.key === emoji.key)?.userIds?.\n                  some((reactorId: string): boolean => reactorId === userId));\n                return (\n                  <ReactionButton\n                    key={emoji.key}\n                    width=\"36px\"\n                    height=\"36px\"\n                    selected={isReacted}\n                    onClick={(e): void => {\n                      closeDropdown();\n                      toggleReaction(message, emoji.key, isReacted);\n                      e?.stopPropagation();\n                    }}\n                  >\n                    <ImageRenderer\n                      url={emoji?.url || ''}\n                      width=\"28px\"\n                      height=\"28px\"\n                      placeHolder={(style: Record<string, unknown>): ReactElement => (\n                        <div style={style}>\n                          <Icon\n                            type={IconTypes.QUESTION}\n                            fillColor={IconColors.ON_BACKGROUND_3}\n                            width=\"28px\"\n                            height=\"28px\"\n                          />\n                        </div>\n                      )}\n                    />\n                  </ReactionButton>\n                );\n              })}\n            </EmojiListItems>\n          )}\n        />\n      )}\n    </div>\n  );\n}\n\nexport default EmojiReactions;\n"],"names":["EmojiReactions","_a","className","userId","message","emojiContainer","memberNicknamesMap","_d","spaceFromTrigger","x","y","_e","isByMe","toggleReaction","stringSet","useContext","LocalizationContext","emojisMap","getEmojiMapAll","addReactionRef","useRef","React","getClassName","_b","reactions","length","map","reaction","reactedByMe","isReactedBy","TooltipWrapper","key","userIds","Tooltip","getEmojiTooltipString","ReactionBadge","e","stopPropagation","ImageRenderer","get","url","Icon","IconTypes","QUESTION","_c","size","ContextMenu","toggleDropdown","EMOJI_MORE","IconColors","ON_BACKGROUND_3","closeDropdown","EmojiListItems","getEmojiListAll","emoji","isReacted","find","some","reactorId","ReactionButton","style"],"mappings":"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"}

package/cjs/ui/FileMessageItemBody.js

@@ -1,15 +1,15 @@
 'use strict';
 
 var React = require('react');
-var ui_Label = require('../index-b1a4b6f0.js');
+var ui_Label = require('../index-795706d2.js');
 var ui_Icon = require('./Icon.js');
 var ui_TextButton = require('./TextButton.js');
-var index = require('../index-1218eab2.js');
-var color = require('../color-03c2ecf2.js');
-var MediaQueryContext = require('../MediaQueryContext-c8f557d1.js');
+var index = require('../index-0418c426.js');
+var color = require('../color-da1f2f09.js');
+var MediaQueryContext = require('../MediaQueryContext-19197e12.js');
 require('prop-types');
-require('../stringSet-da2fe019.js');
-require('../tslib.es6-bce345aa.js');
+require('../stringSet-520996cb.js');
+require('../tslib.es6-29ba80a6.js');
 require('../utils/message/getOutgoingMessageState.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -26,8 +26,11 @@ function FileMessageItemBody(_a) {
       _d = _a.mouseHover,
       mouseHover = _d === void 0 ? false : _d,
       _e = _a.isReactionEnabled,
-      isReactionEnabled = _e === void 0 ? false : _e;
+      isReactionEnabled = _e === void 0 ? false : _e,
+      _f = _a.truncateLimit,
+      truncateLimit = _f === void 0 ? null : _f;
   var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+  var truncateMaxNum = truncateLimit || (isMobile ? 20 : null);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName([className, 'sendbird-file-message-item-body', isByMe ? 'outgoing' : 'incoming', mouseHover ? 'mouse-hover' : '', isReactionEnabled && ((_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length) > 0 ? 'reactions' : ''])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -54,7 +57,7 @@ function FileMessageItemBody(_a) {
     className: "sendbird-file-message-item-body__file-name__text",
     type: ui_Label.LabelTypography.BODY_1,
     color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1
-  }, index.truncateString((message === null || message === void 0 ? void 0 : message.name) || (message === null || message === void 0 ? void 0 : message.url), isMobile ? 20 : null))));
+  }, index.truncateString((message === null || message === void 0 ? void 0 : message.name) || (message === null || message === void 0 ? void 0 : message.url), truncateMaxNum))));
 }
 
 module.exports = FileMessageItemBody;

package/cjs/ui/FileMessageItemBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileMessageItemBody.js","sources":["../../../src/ui/FileMessageItemBody/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement } from 'react';\nimport type { FileMessage } from '@sendbird/chat/message';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport TextButton from '../TextButton';\nimport { getClassName, getUIKitFileType, truncateString } from '../../utils';\nimport { Colors } from '../../utils/color';\nimport { useMediaQueryContext } from '../../lib/MediaQueryContext';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: FileMessage;\n  isByMe?: boolean;\n  mouseHover?: boolean;\n  isReactionEnabled?: boolean;\n}\n\nexport default function FileMessageItemBody({\n  className,\n  message,\n  isByMe = false,\n  mouseHover = false,\n  isReactionEnabled = false,\n}: Props): ReactElement {\n  const { isMobile } = useMediaQueryContext();\n  return (\n    <div className={getClassName([\n      className,\n      'sendbird-file-message-item-body',\n      isByMe ? 'outgoing' : 'incoming',\n      mouseHover ? 'mouse-hover' : '',\n      (isReactionEnabled && message?.reactions?.length > 0) ? 'reactions' : '',\n    ])}>\n      <div className=\"sendbird-file-message-item-body__file-icon\">\n        <Icon\n          className=\"sendbird-file-message-item-body__file-icon__icon\"\n          type={{\n            IMAGE: IconTypes.PHOTO,\n            VIDEO: IconTypes.PLAY,\n            AUDIO: IconTypes.FILE_AUDIO,\n            GIF: IconTypes.GIF,\n            OTHERS: IconTypes.FILE_DOCUMENT,\n          }[getUIKitFileType(message?.type)]}\n          fillColor={IconColors.PRIMARY}\n          width=\"24px\"\n          height=\"24px\"\n        />\n      </div>\n      <TextButton\n        className=\"sendbird-file-message-item-body__file-name\"\n        onClick={() => { window.open(message?.url) }}\n        color={isByMe ? Colors.ONCONTENT_1 : Colors.ONBACKGROUND_1}\n      >\n        <Label\n          className=\"sendbird-file-message-item-body__file-name__text\"\n          type={LabelTypography.BODY_1}\n          color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n        >\n          {\n            truncateString(message?.name || message?.url, isMobile ? 20 : null)\n          }\n        </Label>\n      </TextButton>\n    </div>\n  );\n}\n"],"names":["FileMessageItemBody","_a","className","message","_c","isByMe","_d","mouseHover","_e","isReactionEnabled","isMobile","useMediaQueryContext","React","getClassName","_b","reactions","length","Icon","IMAGE","IconTypes","PHOTO","VIDEO","PLAY","AUDIO","FILE_AUDIO","GIF","OTHERS","FILE_DOCUMENT","getUIKitFileType","type","IconColors","PRIMARY","TextButton","window","open","url","Colors","ONCONTENT_1","ONBACKGROUND_1","Label","LabelTypography","BODY_1","LabelColors","truncateString","name"],"mappings":";;;;;;;;;;;;;;;;;;AAmBwB,SAAAA,mBAAA,CAAoBC,EAApB,EAMhB;;;MALNC,SAAS,GAAAD,EAAA,CAAAC;MACTC,OAAO,GAAAF,EAAA,CAAAE;MACPC;MAAAC,MAAM,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,GAAKA;MACdE;MAAAC,UAAU,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,GAAKA;MAClBE;MAAAC,iBAAiB,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,GAAKA;AAEjB,EAAA,IAAAE,QAAQ,GAAKC,sCAAoB,EAAA,SAAjC,CAAA;EACR,oBACEC,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,SAAS,EAAEC,kBAAY,CAAC,CAC3BX,SAD2B,EAE3B,iCAF2B,EAG3BG,MAAM,GAAG,UAAH,GAAgB,UAHK,EAI3BE,UAAU,GAAG,aAAH,GAAmB,EAJF,EAK1BE,iBAAiB,IAAI,CAAA,CAAAK,EAAA,GAAAX,OAAO,KAAP,IAAA,IAAAA,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,OAAO,CAAEY,SAAT,UAAA,iBAAA,SAAA,MAAoBC,MAApB,IAA6B,CAAnD,GAAwD,WAAxD,GAAsE,EAL3C,CAAD,CAAA;GAO1B,eAAAJ,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,SAAS,EAAC,4CAAA;AAAf,GAAA,eACEA,wCAACK,kBAAD,EAAA;AACE,IAAA,SAAS,EAAC,kDADZ;AAEE,IAAA,IAAI,EAAE;MACJC,KAAK,EAAEC,iBAAS,CAACC,KADb;MAEJC,KAAK,EAAEF,iBAAS,CAACG,IAFb;MAGJC,KAAK,EAAEJ,iBAAS,CAACK,UAHb;MAIJC,GAAG,EAAEN,iBAAS,CAACM,GAJX;MAKJC,MAAM,EAAEP,iBAAS,CAACQ,aAAAA;AALd,KAAA,CAMJC,sBAAgB,CAACzB,OAAO,KAAA,IAAP,IAAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAAA,OAAO,CAAE0B,IAAV,CANZ,CAFR;IASE,SAAS,EAAEC,kBAAU,CAACC,OATxB;AAUE,IAAA,KAAK,EAAC,MAVR;AAWE,IAAA,MAAM,EAAC,MAAA;GAZX,CAAA,CAPF,eAsBEnB,yBAAA,CAAA,aAAA,CAACoB,aAAD,EAAA;AACE,IAAA,SAAS,EAAC,4CADZ;AAEE,IAAA,OAAO,EAAE,YAAA;AAAQC,MAAAA,MAAM,CAACC,IAAP,CAAY/B,OAAO,KAAA,IAAP,IAAAA,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,OAAO,CAAEgC,GAArB,CAAA,CAAA;KAFnB;IAGE,KAAK,EAAE9B,MAAM,GAAG+B,YAAM,CAACC,WAAV,GAAwBD,YAAM,CAACE,cAAAA;AAH9C,GAAA,eAKE1B,wCAAC2B,cAAD,EAAA;AACE,IAAA,SAAS,EAAC,kDADZ;IAEE,IAAI,EAAEC,wBAAe,CAACC,MAFxB;IAGE,KAAK,EAAEpC,MAAM,GAAGqC,oBAAW,CAACL,WAAf,GAA6BK,oBAAW,CAACJ,cAAAA;GAGpDK,EAAAA,oBAAc,CAAC,CAAAxC,OAAO,KAAP,IAAA,IAAAA,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,OAAO,CAAEyC,IAAT,MAAiBzC,OAAO,SAAP,IAAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAAA,OAAO,CAAEgC,GAA1B,CAAD,EAAgCzB,QAAQ,GAAG,EAAH,GAAQ,IAAhD,CANlB,CALF,CAtBF,CADF,CAAA;AAwCD;;;;"}
+{"version":3,"file":"FileMessageItemBody.js","sources":["../../../src/ui/FileMessageItemBody/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement } from 'react';\nimport type { FileMessage } from '@sendbird/chat/message';\n\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport TextButton from '../TextButton';\nimport { getClassName, getUIKitFileType, truncateString } from '../../utils';\nimport { Colors } from '../../utils/color';\nimport { useMediaQueryContext } from '../../lib/MediaQueryContext';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: FileMessage;\n  isByMe?: boolean;\n  mouseHover?: boolean;\n  isReactionEnabled?: boolean;\n  truncateLimit?: number;\n}\n\nexport default function FileMessageItemBody({\n  className,\n  message,\n  isByMe = false,\n  mouseHover = false,\n  isReactionEnabled = false,\n  truncateLimit = null,\n}: Props): ReactElement {\n  const { isMobile } = useMediaQueryContext();\n  const truncateMaxNum = truncateLimit || (isMobile ? 20 : null);\n  return (\n    <div className={getClassName([\n      className,\n      'sendbird-file-message-item-body',\n      isByMe ? 'outgoing' : 'incoming',\n      mouseHover ? 'mouse-hover' : '',\n      (isReactionEnabled && message?.reactions?.length > 0) ? 'reactions' : '',\n    ])}>\n      <div className=\"sendbird-file-message-item-body__file-icon\">\n        <Icon\n          className=\"sendbird-file-message-item-body__file-icon__icon\"\n          type={{\n            IMAGE: IconTypes.PHOTO,\n            VIDEO: IconTypes.PLAY,\n            AUDIO: IconTypes.FILE_AUDIO,\n            GIF: IconTypes.GIF,\n            OTHERS: IconTypes.FILE_DOCUMENT,\n          }[getUIKitFileType(message?.type)]}\n          fillColor={IconColors.PRIMARY}\n          width=\"24px\"\n          height=\"24px\"\n        />\n      </div>\n      <TextButton\n        className=\"sendbird-file-message-item-body__file-name\"\n        onClick={() => { window.open(message?.url) }}\n        color={isByMe ? Colors.ONCONTENT_1 : Colors.ONBACKGROUND_1}\n      >\n        <Label\n          className=\"sendbird-file-message-item-body__file-name__text\"\n          type={LabelTypography.BODY_1}\n          color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n        >\n          {truncateString(message?.name || message?.url, truncateMaxNum)}\n        </Label>\n      </TextButton>\n    </div>\n  );\n}\n"],"names":["FileMessageItemBody","_a","className","message","_c","isByMe","_d","mouseHover","_e","isReactionEnabled","_f","truncateLimit","isMobile","useMediaQueryContext","truncateMaxNum","React","getClassName","_b","reactions","length","Icon","IMAGE","IconTypes","PHOTO","VIDEO","PLAY","AUDIO","FILE_AUDIO","GIF","OTHERS","FILE_DOCUMENT","getUIKitFileType","type","IconColors","PRIMARY","TextButton","window","open","url","Colors","ONCONTENT_1","ONBACKGROUND_1","Label","LabelTypography","BODY_1","LabelColors","truncateString","name"],"mappings":"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"}

package/cjs/ui/FileViewer.js

@@ -4,18 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var reactDom = require('react-dom');
-var LocalizationContext = require('../LocalizationContext-3c85c616.js');
-var index = require('../index-1b69f7d2.js');
-var index$1 = require('../index-1218eab2.js');
+var LocalizationContext = require('../LocalizationContext-9c61d945.js');
+var index = require('../index-6a32eea2.js');
+var index$1 = require('../index-0418c426.js');
 var ui_Avatar = require('./Avatar.js');
-var ui_Label = require('../index-b1a4b6f0.js');
+var ui_Label = require('../index-795706d2.js');
 var ui_Icon = require('./Icon.js');
-require('../stringSet-da2fe019.js');
-require('../index-607cb4ff.js');
-require('../tslib.es6-bce345aa.js');
+require('../stringSet-520996cb.js');
+require('../index-b82af371.js');
+require('../tslib.es6-29ba80a6.js');
 require('../utils/message/getOutgoingMessageState.js');
 require('./ImageRenderer.js');
-require('../uuid-2a459d4b.js');
+require('../uuid-ed079835.js');
 require('prop-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/ui/IconButton.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-bce345aa.js');
+var tslib_es6 = require('../tslib.es6-29ba80a6.js');
 var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/ui/ImageRenderer.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-bce345aa.js');
+var tslib_es6 = require('../tslib.es6-29ba80a6.js');
 var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/ui/Input.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ui_Label = require('../index-b1a4b6f0.js');
+var ui_Label = require('../index-795706d2.js');
 require('prop-types');
-require('../stringSet-da2fe019.js');
+require('../stringSet-520996cb.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/Label.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
 require('prop-types');
-var ui_Label = require('../index-b1a4b6f0.js');
-require('../stringSet-da2fe019.js');
+var ui_Label = require('../index-795706d2.js');
+require('../stringSet-520996cb.js');
 
 
 

package/cjs/ui/LinkLabel.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var PropTypes = require('prop-types');
-var ui_Label = require('../index-b1a4b6f0.js');
-require('../stringSet-da2fe019.js');
+var ui_Label = require('../index-795706d2.js');
+require('../stringSet-520996cb.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/Loader.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-bce345aa.js');
+var tslib_es6 = require('../tslib.es6-29ba80a6.js');
 var React = require('react');
 var ui_Icon = require('./Icon.js');
 require('prop-types');

package/cjs/ui/MentionLabel.js

@@ -2,25 +2,25 @@
 
 var React = require('react');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../index-b1a4b6f0.js');
+var ui_Label = require('../index-795706d2.js');
 var ui_UserProfile = require('./UserProfile.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-require('../tslib.es6-bce345aa.js');
+require('../tslib.es6-29ba80a6.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../uuid-2a459d4b.js');
-require('../index-1218eab2.js');
+require('../uuid-ed079835.js');
+require('../index-0418c426.js');
 require('../utils/message/getOutgoingMessageState.js');
 require('prop-types');
-require('../stringSet-da2fe019.js');
-require('../LocalizationContext-3c85c616.js');
-require('../index-607cb4ff.js');
+require('../stringSet-520996cb.js');
+require('../LocalizationContext-9c61d945.js');
+require('../index-b82af371.js');
 require('../withSendbird.js');
-require('../_rollupPluginBabelHelpers-23c0e950.js');
-require('../UserProfileContext-c16bb529.js');
+require('../_rollupPluginBabelHelpers-20ad87c1.js');
+require('../UserProfileContext-637e5f40.js');
 require('../sendbirdSelectors.js');
-require('../topics-fd2124f5.js');
-require('../utils-557bb5d2.js');
+require('../topics-e5734128.js');
+require('../utils-ee8b0f03.js');
 require('./Avatar.js');
 require('./ImageRenderer.js');
 require('./Icon.js');
@@ -88,12 +88,13 @@ function MentionLabel(props) {
         parentContainRef: mentionRef,
         closeDropdown: closeDropdown,
         style: {
-          paddingTop: 0,
-          paddingBottom: 0
+          paddingTop: '0px',
+          paddingBottom: '0px'
         }
       }, /*#__PURE__*/React__default["default"].createElement(ui_UserProfile, {
         user: user,
-        onSuccess: closeDropdown
+        onSuccess: closeDropdown,
+        currentUserId: userId
       }));
     }
   });

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        >\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: 0, paddingBottom: 0 }}\n        >\n          <UserProfile user={user} onSuccess={closeDropdown} />\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        >\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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"}

package/cjs/ui/MessageContent.js

@@ -1,16 +1,16 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-23c0e950.js');
-var tslib_es6 = require('../tslib.es6-bce345aa.js');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-20ad87c1.js');
+var tslib_es6 = require('../tslib.es6-29ba80a6.js');
 var React = require('react');
-var index$1 = require('../index-1042f264.js');
+var index$1 = require('../index-566a2b96.js');
 var ui_Avatar = require('./Avatar.js');
 var ui_UserProfile = require('./UserProfile.js');
 var ui_MessageStatus = require('./MessageStatus.js');
 var ui_MessageItemMenu = require('./MessageItemMenu.js');
 var ui_MessageItemReactionMenu = require('./MessageItemReactionMenu.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../index-b1a4b6f0.js');
+var ui_Label = require('../index-795706d2.js');
 var ui_EmojiReactions = require('./EmojiReactions.js');
 var ui_AdminMessage = require('./AdminMessage.js');
 var ui_TextMessageItemBody = require('./TextMessageItemBody.js');
@@ -19,25 +19,27 @@ 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-1218eab2.js');
-var UserProfileContext = require('../UserProfileContext-c16bb529.js');
-var LocalizationContext = require('../LocalizationContext-3c85c616.js');
+var index = require('../index-0418c426.js');
+var UserProfileContext = require('../UserProfileContext-637e5f40.js');
+var LocalizationContext = require('../LocalizationContext-9c61d945.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var useLongPress = require('../useLongPress-698416e4.js');
+var useLongPress = require('../useLongPress-9c1d0d7e.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-c8f557d1.js');
-require('../index-607cb4ff.js');
-require('../uuid-2a459d4b.js');
+var MediaQueryContext = require('../MediaQueryContext-19197e12.js');
+var ui_ThreadReplies = require('./ThreadReplies.js');
+var _const = require('../const-c5332da3.js');
+require('../index-b82af371.js');
+require('../uuid-ed079835.js');
 require('prop-types');
 require('../withSendbird.js');
 require('../sendbirdSelectors.js');
-require('../topics-fd2124f5.js');
-require('../utils-557bb5d2.js');
+require('../topics-e5734128.js');
+require('../utils-ee8b0f03.js');
 require('./Button.js');
-require('../stringSet-da2fe019.js');
+require('../stringSet-520996cb.js');
 require('./Loader.js');
 require('../utils/message/getOutgoingMessageState.js');
 require('./IconButton.js');
@@ -50,8 +52,8 @@ require('./Word.js');
 require('./LinkLabel.js');
 require('./MentionLabel.js');
 require('./TextButton.js');
-require('../color-03c2ecf2.js');
-require('../index-1b69f7d2.js');
+require('../color-da1f2f09.js');
+require('../index-6a32eea2.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -420,21 +422,24 @@ var MobileMenu = function (props) {
 };
 
 function MessageContent(_a) {
-  var _b, _c, _d, _e, _f, _g, _h;
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k;
 
   var className = _a.className,
       userId = _a.userId,
       channel = _a.channel,
       message = _a.message,
-      _j = _a.disabled,
-      disabled = _j === void 0 ? false : _j,
-      _k = _a.chainTop,
-      chainTop = _k === void 0 ? false : _k,
-      _l = _a.chainBottom,
-      chainBottom = _l === void 0 ? false : _l,
-      _m = _a.isReactionEnabled,
-      isReactionEnabled = _m === void 0 ? false : _m,
+      _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,
@@ -443,38 +448,42 @@ function MessageContent(_a) {
       showFileViewer = _a.showFileViewer,
       resendMessage = _a.resendMessage,
       toggleReaction = _a.toggleReaction,
-      setQuoteMessage = _a.setQuoteMessage;
+      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 _o = React.useContext(UserProfileContext.UserProfileContext),
-      disableUserProfile = _o.disableUserProfile,
-      renderUserProfile = _o.renderUserProfile;
+  var _r = React.useContext(UserProfileContext.UserProfileContext),
+      disableUserProfile = _r.disableUserProfile,
+      renderUserProfile = _r.renderUserProfile;
 
   var avatarRef = React.useRef(null);
   var contentRef = React.useRef(null);
   var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
 
-  var _p = React.useState(false),
-      showMenu = _p[0],
-      setShowMenu = _p[1];
+  var _s = React.useState(false),
+      showMenu = _s[0],
+      setShowMenu = _s[1];
 
-  var _q = React.useState(false),
-      mouseHover = _q[0],
-      setMouseHover = _q[1];
+  var _t = React.useState(false),
+      mouseHover = _t[0],
+      setMouseHover = _t[1];
 
-  var _r = React.useState(false),
-      supposedHover = _r[0],
-      setSupposedHover = _r[1];
+  var _u = React.useState(false),
+      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.sendingStatus === 'pending' || message.sendingStatus === 'failed';
+  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' : '';
   var isReactionEnabledClassName = isReactionEnabled ? 'use-reactions' : '';
-  var supposedHoverClassName = supposedHover ? 'supposed-hover' : '';
-  var useReplying = !!(replyType === 'QUOTE_REPLY' && (message === null || message === void 0 ? void 0 : message.parentMessageId) && (message === null || message === void 0 ? void 0 : message.parentMessage));
-  var useReplyingClassName = useReplying ? 'use-quote' : ''; // onMouseDown: (e: React.MouseEvent<T>) => void;
+  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;
   // onTouchStart: (e: React.TouchEvent<T>) => void;
   // onMouseUp: (e: React.MouseEvent<T>) => void;
   // onMouseLeave: (e: React.MouseEvent<T>) => void;
@@ -482,11 +491,13 @@ function MessageContent(_a) {
 
   var longPress = useLongPress.useLongPress({
     onLongPress: function () {
-      setShowMenu(true);
+      if (isMobile) {
+        setShowMenu(true);
+      }
     },
     onClick: function () {
       // @ts-ignore
-      if (index.isFileMessage(message) && index.isSentMessage(message)) {
+      if (isMobile && index.isThumbnailMessage(message) && index.isSentMessage(message)) {
         showFileViewer(true);
       }
     }
@@ -494,7 +505,7 @@ function MessageContent(_a) {
     delay: 300
   });
 
-  if (((_c = message === null || message === void 0 ? void 0 : message.isAdminMessage) === null || _c === void 0 ? void 0 : _c.call(message)) || (message === null || message === void 0 ? void 0 : message.messageType) === 'admin') {
+  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
     });
@@ -519,7 +530,7 @@ function MessageContent(_a) {
       var _a, _b, _c;
 
       return /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
-        className: "sendbird-message-content__left__avatar" // @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;
@@ -546,8 +557,8 @@ function MessageContent(_a) {
         parentContainRef: avatarRef,
         closeDropdown: closeDropdown,
         style: {
-          paddingTop: 0,
-          paddingBottom: 0
+          paddingTop: '0px',
+          paddingBottom: '0px'
         }
       }, renderUserProfile // @ts-ignore
       ? renderUserProfile({
@@ -572,7 +583,18 @@ function MessageContent(_a) {
     showRemove: showRemove,
     resendMessage: resendMessage,
     setQuoteMessage: setQuoteMessage,
-    setSupposedHover: setSupposedHover
+    setSupposedHover: setSupposedHover,
+    onReplyInThread: function (_a) {
+      var message = _a.message;
+
+      if (threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
+        onReplyInThread({
+          message: message
+        });
+      } else if (threadReplySelectType === _const.ThreadReplySelectType.PARENT) {
+        scrollToMessage(message.parentMessage.createdAt, message.parentMessageId);
+      }
+    }
   }), isReactionEnabled && /*#__PURE__*/React__default["default"].createElement(ui_MessageItemReactionMenu, {
     className: "sendbird-message-content-menu__reaction-menu",
     message: message,
@@ -590,21 +612,28 @@ function MessageContent(_a) {
     type: ui_Label.LabelTypography.CAPTION_2,
     color: ui_Label.LabelColors.ONBACKGROUND_2
   }, // @ts-ignore
-  ((_e = (_d = channel === null || channel === void 0 ? void 0 : channel.members) === null || _d === void 0 ? void 0 : _d.find(function (member) {
+  ((_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 || _e === void 0 ? void 0 : _e.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, {
     message: message,
     userId: userId,
     isByMe: isByMe,
+    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 (((_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)) {
+      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);
       }
     }
@@ -650,7 +679,7 @@ function MessageContent(_a) {
     isByMe: isByMe,
     mouseHover: mouseHover,
     isReactionEnabled: isReactionEnabled
-  }), isReactionEnabled && ((_f = message === null || message === void 0 ? void 0 : message.reactions) === null || _f === void 0 ? void 0 : _f.length) > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+  }), isReactionEnabled && ((_h = message === null || message === void 0 ? void 0 : message.reactions) === null || _h === void 0 ? void 0 : _h.length) > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName(['sendbird-message-content-reactions', !isByMe || index.isThumbnailMessage(message) || index.isOGMessage(message) ? '' : 'primary', mouseHover ? 'mouse-hover' : ''])
   }, /*#__PURE__*/React__default["default"].createElement(ui_EmojiReactions, {
     userId: userId,
@@ -665,7 +694,15 @@ function MessageContent(_a) {
     color: ui_Label.LabelColors.ONBACKGROUND_2
   }, index$1.format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, 'p', {
     locale: dateLocale
-  })))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }))), displayThreadReplies && /*#__PURE__*/React__default["default"].createElement(ui_ThreadReplies, {
+    className: "sendbird-message-content__middle__thread-replies",
+    threadInfo: message === null || message === void 0 ? void 0 : message.threadInfo,
+    onClick: function () {
+      return onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
+        message: message
+      });
+    }
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName(['sendbird-message-content__right', chainTopClassName, isReactionEnabledClassName, useReplyingClassName])
   }, !isByMe && !isMobile && /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName(['sendbird-message-content-menu', chainTopClassName, supposedHoverClassName, isByMeClassName])
@@ -687,8 +724,19 @@ function MessageContent(_a) {
     showRemove: showRemove,
     resendMessage: resendMessage,
     setQuoteMessage: setQuoteMessage,
-    setSupposedHover: setSupposedHover
-  }))), showMenu && (((_g = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _g === void 0 ? void 0 : _g.call(message)) || ((_h = message === null || message === void 0 ? void 0 : message.isFileMessage) === null || _h === void 0 ? void 0 : _h.call(message))) && /*#__PURE__*/React__default["default"].createElement(MobileMenu, {
+    setSupposedHover: setSupposedHover,
+    onReplyInThread: function (_a) {
+      var message = _a.message;
+
+      if (threadReplySelectType === _const.ThreadReplySelectType.THREAD) {
+        onReplyInThread({
+          message: message
+        });
+      } else if (threadReplySelectType === _const.ThreadReplySelectType.PARENT) {
+        scrollToMessage(message.parentMessage.createdAt, message.parentMessageId);
+      }
+    }
+  }))), showMenu && (((_j = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _j === void 0 ? void 0 : _j.call(message)) || ((_k = message === null || message === void 0 ? void 0 : message.isFileMessage) === null || _k === void 0 ? void 0 : _k.call(message))) && /*#__PURE__*/React__default["default"].createElement(MobileMenu, {
     parentRef: contentRef,
     channel: channel,
     hideMenu: function () {