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

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        >\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","concat","LabelTypography","CAPTION_1","LabelColors","ONCONTENT_1","ONBACKGROUND_1","closeDropdown","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","concat","LabelTypography","CAPTION_1","LabelColors","ONCONTENT_1","ONBACKGROUND_1","closeDropdown","paddingTop","paddingBottom","UserProfile"],"mappings":"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"}

package/ui/MessageContent.js

@@ -1,14 +1,14 @@
-import { a as _extends } from '../_rollupPluginBabelHelpers-51c9f5c3.js';
-import { _ as __assign } from '../tslib.es6-e592f653.js';
+import { a as _extends } from '../_rollupPluginBabelHelpers-0df8ccf2.js';
+import { _ as __assign } from '../tslib.es6-0f615f78.js';
 import React__default, { useState, useContext, useRef } from 'react';
-import { f as format } from '../index-041c94d3.js';
+import { f as format } from '../index-dfbeafcd.js';
 import Avatar from './Avatar.js';
 import ConnectedUserProfile from './UserProfile.js';
 import MessageStatus from './MessageStatus.js';
 import MessageItemMenu from './MessageItemMenu.js';
 import MessageItemReactionMenu from './MessageItemReactionMenu.js';
 import ContextMenu, { MenuItems, MenuItem } from './ContextMenu.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-64740116.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-59fddbdc.js';
 import EmojiReactions from './EmojiReactions.js';
 import AdminMessage from './AdminMessage.js';
 import TextMessageItemBody from './TextMessageItemBody.js';
@@ -17,25 +17,27 @@ import ThumbnailMessageItemBody from './ThumbnailMessageItemBody.js';
 import OGMessageItemBody from './OGMessageItemBody.js';
 import UnknownMessageItemBody from './UnknownMessageItemBody.js';
 import QuoteMessage from './QuoteMessage.js';
-import { r as isUserMessage, s as isSentMessage, u as isFailedMessage, v as isPendingMessage, l as isFileMessage, w as copyToClipboard, x as getEmojiListAll, y as getUIKitMessageTypes, h as getClassName, z as getSenderName, A as isTextMessage, B as isOGMessage, C as getUIKitMessageType, n as isThumbnailMessage } from '../index-ca3ba8a0.js';
-import { a as UserProfileContext } from '../UserProfileContext-4e70ef73.js';
-import { u as useLocalization } from '../LocalizationContext-a90809c7.js';
+import { r as isUserMessage, s as isSentMessage, u as isFailedMessage, v as isPendingMessage, l as isFileMessage, w as copyToClipboard, x as getEmojiListAll, y as getUIKitMessageTypes, n as isThumbnailMessage, h as getClassName, z as getSenderName, A as isTextMessage, B as isOGMessage, C as getUIKitMessageType } from '../index-468659e6.js';
+import { a as UserProfileContext } from '../UserProfileContext-2af91c5b.js';
+import { u as useLocalization } from '../LocalizationContext-410574e8.js';
 import useSendbirdStateContext from '../useSendbirdStateContext.js';
-import { u as useLongPress } from '../useLongPress-8cda7590.js';
+import { u as useLongPress } from '../useLongPress-3d0759b4.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import BottomSheet from './BottomSheet.js';
 import ImageRenderer from './ImageRenderer.js';
 import ReactionButton from './ReactionButton.js';
-import { u as useMediaQueryContext } from '../MediaQueryContext-280871f5.js';
-import '../index-8e0d1cc6.js';
-import '../uuid-c41826f3.js';
+import { u as useMediaQueryContext } from '../MediaQueryContext-53329809.js';
+import ThreadReplies from './ThreadReplies.js';
+import { T as ThreadReplySelectType } from '../const-6e3eaa64.js';
+import '../index-51ef2190.js';
+import '../uuid-9f76bbf8.js';
 import 'prop-types';
 import '../withSendbird.js';
 import '../sendbirdSelectors.js';
-import '../topics-b81e5b9b.js';
-import '../utils-c2438081.js';
+import '../topics-d58e48df.js';
+import '../utils-9f07eb45.js';
 import './Button.js';
-import '../stringSet-e413411d.js';
+import '../stringSet-bd5e1130.js';
 import './Loader.js';
 import '../utils/message/getOutgoingMessageState.js';
 import './IconButton.js';
@@ -48,8 +50,8 @@ import './Word.js';
 import './LinkLabel.js';
 import './MentionLabel.js';
 import './TextButton.js';
-import '../color-e740c17f.js';
-import '../index-8d74bd4b.js';
+import '../color-1619c1b7.js';
+import '../index-4e38f6d5.js';
 
 var MobileContextMenu = function (props) {
   var _a;
@@ -414,21 +416,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,
@@ -437,38 +442,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 = getUIKitMessageTypes();
   var dateLocale = useLocalization().dateLocale;
   var config = ((useSendbirdStateContext === null || useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext()) || {}).config;
 
-  var _o = useContext(UserProfileContext),
-      disableUserProfile = _o.disableUserProfile,
-      renderUserProfile = _o.renderUserProfile;
+  var _r = useContext(UserProfileContext),
+      disableUserProfile = _r.disableUserProfile,
+      renderUserProfile = _r.renderUserProfile;
 
   var avatarRef = useRef(null);
   var contentRef = useRef(null);
   var isMobile = useMediaQueryContext().isMobile;
 
-  var _p = useState(false),
-      showMenu = _p[0],
-      setShowMenu = _p[1];
+  var _s = useState(false),
+      showMenu = _s[0],
+      setShowMenu = _s[1];
 
-  var _q = useState(false),
-      mouseHover = _q[0],
-      setMouseHover = _q[1];
+  var _t = useState(false),
+      mouseHover = _t[0],
+      setMouseHover = _t[1];
 
-  var _r = useState(false),
-      supposedHover = _r[0],
-      setSupposedHover = _r[1];
+  var _u = 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;
@@ -476,11 +485,13 @@ function MessageContent(_a) {
 
   var longPress = useLongPress({
     onLongPress: function () {
-      setShowMenu(true);
+      if (isMobile) {
+        setShowMenu(true);
+      }
     },
     onClick: function () {
       // @ts-ignore
-      if (isFileMessage(message) && isSentMessage(message)) {
+      if (isMobile && isThumbnailMessage(message) && isSentMessage(message)) {
         showFileViewer(true);
       }
     }
@@ -488,7 +499,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.createElement(AdminMessage, {
       message: message
     });
@@ -513,7 +524,7 @@ function MessageContent(_a) {
       var _a, _b, _c;
 
       return /*#__PURE__*/React__default.createElement(Avatar, {
-        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;
@@ -540,8 +551,8 @@ function MessageContent(_a) {
         parentContainRef: avatarRef,
         closeDropdown: closeDropdown,
         style: {
-          paddingTop: 0,
-          paddingBottom: 0
+          paddingTop: '0px',
+          paddingBottom: '0px'
         }
       }, renderUserProfile // @ts-ignore
       ? renderUserProfile({
@@ -566,7 +577,18 @@ function MessageContent(_a) {
     showRemove: showRemove,
     resendMessage: resendMessage,
     setQuoteMessage: setQuoteMessage,
-    setSupposedHover: setSupposedHover
+    setSupposedHover: setSupposedHover,
+    onReplyInThread: function (_a) {
+      var message = _a.message;
+
+      if (threadReplySelectType === ThreadReplySelectType.THREAD) {
+        onReplyInThread({
+          message: message
+        });
+      } else if (threadReplySelectType === ThreadReplySelectType.PARENT) {
+        scrollToMessage(message.parentMessage.createdAt, message.parentMessageId);
+      }
+    }
   }), isReactionEnabled && /*#__PURE__*/React__default.createElement(MessageItemReactionMenu, {
     className: "sendbird-message-content-menu__reaction-menu",
     message: message,
@@ -584,21 +606,28 @@ function MessageContent(_a) {
     type: LabelTypography.CAPTION_2,
     color: 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) || getSenderName(message) // TODO: Divide getting profileUrl logic to utils
+  })) === null || _f === void 0 ? void 0 : _f.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])
   }, /*#__PURE__*/React__default.createElement(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 === ThreadReplySelectType.THREAD) {
+        onQuoteMessageClick === null || onQuoteMessageClick === void 0 ? void 0 : onQuoteMessageClick({
+          message: message
+        });
+      }
+
+      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);
       }
     }
@@ -644,7 +673,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.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.createElement("div", {
     className: getClassName(['sendbird-message-content-reactions', !isByMe || isThumbnailMessage(message) || isOGMessage(message) ? '' : 'primary', mouseHover ? 'mouse-hover' : ''])
   }, /*#__PURE__*/React__default.createElement(EmojiReactions, {
     userId: userId,
@@ -659,7 +688,15 @@ function MessageContent(_a) {
     color: LabelColors.ONBACKGROUND_2
   }, format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, 'p', {
     locale: dateLocale
-  })))), /*#__PURE__*/React__default.createElement("div", {
+  }))), displayThreadReplies && /*#__PURE__*/React__default.createElement(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.createElement("div", {
     className: getClassName(['sendbird-message-content__right', chainTopClassName, isReactionEnabledClassName, useReplyingClassName])
   }, !isByMe && !isMobile && /*#__PURE__*/React__default.createElement("div", {
     className: getClassName(['sendbird-message-content-menu', chainTopClassName, supposedHoverClassName, isByMeClassName])
@@ -681,8 +718,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.createElement(MobileMenu, {
+    setSupposedHover: setSupposedHover,
+    onReplyInThread: function (_a) {
+      var message = _a.message;
+
+      if (threadReplySelectType === ThreadReplySelectType.THREAD) {
+        onReplyInThread({
+          message: message
+        });
+      } else if (threadReplySelectType === 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.createElement(MobileMenu, {
     parentRef: contentRef,
     channel: channel,
     hideMenu: function () {