@sendbird/uikit-react 3.4.8 → 3.4.9-rc.0

package/Thread/components/ThreadHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadHeader.js","sources":["../../../src/modules/Thread/components/ThreadHeader/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport './index.scss';\n\nimport IconButton from '../../../../ui/IconButton';\nimport Icon, { IconTypes, IconColors } from '../../../../ui/Icon';\nimport Label, { LabelTypography, LabelColors } from '../../../../ui/Label';\nimport TextButton from '../../../../ui/TextButton';\n\nimport { useLocalization } from '../../../../lib/LocalizationContext';\n\ntype EventType = React.MouseEvent<HTMLDivElement | HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement>;\n\nexport interface ThreadHeaderProps {\n  className?: string;\n  channelName: string;\n  renderActionIcon?: (props: { onActionIconClick: (e: EventType) => void }) => React.ReactElement;\n  onActionIconClick?: (e: EventType) => void;\n  onChannelNameClick?: (e: EventType) => void;\n}\n\nexport default function ThreadHeader({\n  className,\n  channelName,\n  renderActionIcon,\n  onActionIconClick,\n  onChannelNameClick,\n}: ThreadHeaderProps): React.ReactElement {\n  const { stringSet } = useLocalization();\n\n  const MemoizedActionIcon = useMemo(() => {\n    if (typeof renderActionIcon === 'function') {\n      return renderActionIcon({ onActionIconClick });\n    }\n    return null;\n  }, [renderActionIcon]);\n  return (\n    <div className={`sendbird-thread-header ${className}`}>\n      <Label\n        className=\"sendbird-thread-header__title\"\n        type={LabelTypography.H_2}\n        color={LabelColors.ONBACKGROUND_1}\n      >\n        {stringSet.THREAD__HEADER_TITLE}\n      </Label>\n      <TextButton\n        onClick={(e) => onChannelNameClick(e)}\n        disableUnderline\n      >\n        <Label\n          className=\"sendbird-thread-header__channel-name\"\n          type={LabelTypography.CAPTION_3}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {channelName}\n        </Label>\n      </TextButton>\n      {\n        MemoizedActionIcon || (\n          <div className=\"sendbird-thread-header__action\">\n            <IconButton\n              width=\"32px\"\n              height=\"32px\"\n              onClick={(e) => onActionIconClick(e)}\n            >\n              <Icon\n                type={IconTypes.CLOSE}\n                fillColor={IconColors.ON_BACKGROUND_1}\n                width=\"22px\"\n                height=\"22px\"\n              />\n            </IconButton>\n          </div>\n        )\n      }\n    </div>\n  );\n}\n"],"names":["ThreadHeader","_ref","className","channelName","renderActionIcon","onActionIconClick","onChannelNameClick","stringSet","useLocalization","MemoizedActionIcon","useMemo","React","createElement","Label","type","LabelTypography","H_2","color","LabelColors","ONBACKGROUND_1","THREAD__HEADER_TITLE","TextButton","onClick","e","disableUnderline","CAPTION_3","ONBACKGROUND_2","IconButton","width","height","Icon","IconTypes","CLOSE","fillColor","IconColors","ON_BACKGROUND_1"],"mappings":";;;;;;;;;;;;AAqBe,SAASA,YAAYA,CAAAC,IAAA,EAMM;EAAA,IANL;IACnCC,SAAS;IACTC,WAAW;IACXC,gBAAgB;IAChBC,iBAAiB;AACjBC,IAAAA,kBAAAA;AACiB,GAAC,GAAAL,IAAA,CAAA;EAClB,MAAM;AAAEM,IAAAA,SAAAA;GAAW,GAAGC,eAAe,EAAE,CAAA;AAEvC,EAAA,MAAMC,kBAAkB,GAAGC,OAAO,CAAC,MAAM;AACvC,IAAA,IAAI,OAAON,gBAAgB,KAAK,UAAU,EAAE;AAC1C,MAAA,OAAOA,gBAAgB,CAAC;AAAEC,QAAAA,iBAAAA;AAAkB,OAAC,CAAC,CAAA;AAChD,KAAA;AACA,IAAA,OAAO,IAAI,CAAA;AACb,GAAC,EAAE,CAACD,gBAAgB,CAAC,CAAC,CAAA;EACtB,oBACEO,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKV,SAAS,EAAG,0BAAyBA,SAAU,CAAA,CAAA;AAAE,GAAA,eACpDS,cAAA,CAAAC,aAAA,CAACC,KAAK,EAAA;AACJX,IAAAA,SAAS,EAAC,+BAA+B;IACzCY,IAAI,EAAEC,eAAe,CAACC,GAAI;IAC1BC,KAAK,EAAEC,WAAW,CAACC,cAAAA;GAElBZ,EAAAA,SAAS,CAACa,oBAAoB,CACzB,eACRT,cAAA,CAAAC,aAAA,CAACS,UAAU,EAAA;AACTC,IAAAA,OAAO,EAAGC,CAAC,IAAKjB,kBAAkB,CAACiB,CAAC,CAAE;IACtCC,gBAAgB,EAAA,IAAA;AAAA,GAAA,eAEhBb,cAAA,CAAAC,aAAA,CAACC,KAAK,EAAA;AACJX,IAAAA,SAAS,EAAC,sCAAsC;IAChDY,IAAI,EAAEC,eAAe,CAACU,SAAU;IAChCR,KAAK,EAAEC,WAAW,CAACQ,cAAAA;GAElBvB,EAAAA,WAAW,CACN,CACG,EAEXM,kBAAkB,iBAChBE,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKV,IAAAA,SAAS,EAAC,gCAAA;AAAgC,GAAA,eAC7CS,cAAA,CAAAC,aAAA,CAACe,UAAU,EAAA;AACTC,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,MAAM,EAAC,MAAM;AACbP,IAAAA,OAAO,EAAGC,CAAC,IAAKlB,iBAAiB,CAACkB,CAAC,CAAA;AAAE,GAAA,eAErCZ,cAAA,CAAAC,aAAA,CAACkB,IAAI,EAAA;IACHhB,IAAI,EAAEiB,SAAS,CAACC,KAAM;IACtBC,SAAS,EAAEC,UAAU,CAACC,eAAgB;AACtCP,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,MAAM,EAAC,MAAA;GACP,CAAA,CACS,CAEhB,CAEC,CAAA;AAEV;;;;"}
+{"version":3,"file":"ThreadHeader.js","sources":["../../../src/modules/Thread/components/ThreadHeader/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport './index.scss';\n\nimport IconButton from '../../../../ui/IconButton';\nimport Icon, { IconTypes, IconColors } from '../../../../ui/Icon';\nimport Label, { LabelTypography, LabelColors } from '../../../../ui/Label';\nimport TextButton from '../../../../ui/TextButton';\n\nimport { useLocalization } from '../../../../lib/LocalizationContext';\n\ntype EventType = React.MouseEvent<HTMLDivElement | HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement>;\n\nexport interface ThreadHeaderProps {\n  className?: string;\n  channelName: string;\n  renderActionIcon?: (props: { onActionIconClick: (e: EventType) => void }) => React.ReactElement;\n  onActionIconClick?: (e: EventType) => void;\n  onChannelNameClick?: (e: EventType) => void;\n}\n\nexport default function ThreadHeader({\n  className,\n  channelName,\n  renderActionIcon,\n  onActionIconClick,\n  onChannelNameClick,\n}: ThreadHeaderProps): React.ReactElement {\n  const { stringSet } = useLocalization();\n\n  const MemoizedActionIcon = useMemo(() => {\n    if (typeof renderActionIcon === 'function') {\n      return renderActionIcon({ onActionIconClick });\n    }\n    return null;\n  }, [renderActionIcon]);\n  return (\n    <div className={`sendbird-thread-header ${className}`}>\n      <Label\n        className=\"sendbird-thread-header__title\"\n        type={LabelTypography.H_2}\n        color={LabelColors.ONBACKGROUND_1}\n      >\n        {stringSet.THREAD__HEADER_TITLE}\n      </Label>\n      <TextButton\n        onClick={(e) => onChannelNameClick?.(e)}\n        disableUnderline\n      >\n        <Label\n          className=\"sendbird-thread-header__channel-name\"\n          type={LabelTypography.CAPTION_3}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {channelName}\n        </Label>\n      </TextButton>\n      {\n        MemoizedActionIcon || (\n          <div className=\"sendbird-thread-header__action\">\n            <IconButton\n              width=\"32px\"\n              height=\"32px\"\n              onClick={(e) => onActionIconClick(e)}\n            >\n              <Icon\n                type={IconTypes.CLOSE}\n                fillColor={IconColors.ON_BACKGROUND_1}\n                width=\"22px\"\n                height=\"22px\"\n              />\n            </IconButton>\n          </div>\n        )\n      }\n    </div>\n  );\n}\n"],"names":["ThreadHeader","_ref","className","channelName","renderActionIcon","onActionIconClick","onChannelNameClick","stringSet","useLocalization","MemoizedActionIcon","useMemo","React","createElement","Label","type","LabelTypography","H_2","color","LabelColors","ONBACKGROUND_1","THREAD__HEADER_TITLE","TextButton","onClick","e","disableUnderline","CAPTION_3","ONBACKGROUND_2","IconButton","width","height","Icon","IconTypes","CLOSE","fillColor","IconColors","ON_BACKGROUND_1"],"mappings":";;;;;;;;;;;;AAqBe,SAASA,YAAYA,CAAAC,IAAA,EAMM;EAAA,IANL;IACnCC,SAAS;IACTC,WAAW;IACXC,gBAAgB;IAChBC,iBAAiB;AACjBC,IAAAA,kBAAAA;AACiB,GAAC,GAAAL,IAAA,CAAA;EAClB,MAAM;AAAEM,IAAAA,SAAAA;GAAW,GAAGC,eAAe,EAAE,CAAA;AAEvC,EAAA,MAAMC,kBAAkB,GAAGC,OAAO,CAAC,MAAM;AACvC,IAAA,IAAI,OAAON,gBAAgB,KAAK,UAAU,EAAE;AAC1C,MAAA,OAAOA,gBAAgB,CAAC;AAAEC,QAAAA,iBAAAA;AAAkB,OAAC,CAAC,CAAA;AAChD,KAAA;AACA,IAAA,OAAO,IAAI,CAAA;AACb,GAAC,EAAE,CAACD,gBAAgB,CAAC,CAAC,CAAA;EACtB,oBACEO,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKV,SAAS,EAAG,0BAAyBA,SAAU,CAAA,CAAA;AAAE,GAAA,eACpDS,cAAA,CAAAC,aAAA,CAACC,KAAK,EAAA;AACJX,IAAAA,SAAS,EAAC,+BAA+B;IACzCY,IAAI,EAAEC,eAAe,CAACC,GAAI;IAC1BC,KAAK,EAAEC,WAAW,CAACC,cAAAA;GAElBZ,EAAAA,SAAS,CAACa,oBAAoB,CACzB,eACRT,cAAA,CAAAC,aAAA,CAACS,UAAU,EAAA;IACTC,OAAO,EAAGC,CAAC,IAAKjB,kBAAkB,KAAA,IAAA,IAAlBA,kBAAkB,KAAlBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,kBAAkB,CAAGiB,CAAC,CAAE;IACxCC,gBAAgB,EAAA,IAAA;AAAA,GAAA,eAEhBb,cAAA,CAAAC,aAAA,CAACC,KAAK,EAAA;AACJX,IAAAA,SAAS,EAAC,sCAAsC;IAChDY,IAAI,EAAEC,eAAe,CAACU,SAAU;IAChCR,KAAK,EAAEC,WAAW,CAACQ,cAAAA;GAElBvB,EAAAA,WAAW,CACN,CACG,EAEXM,kBAAkB,iBAChBE,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKV,IAAAA,SAAS,EAAC,gCAAA;AAAgC,GAAA,eAC7CS,cAAA,CAAAC,aAAA,CAACe,UAAU,EAAA;AACTC,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,MAAM,EAAC,MAAM;AACbP,IAAAA,OAAO,EAAGC,CAAC,IAAKlB,iBAAiB,CAACkB,CAAC,CAAA;AAAE,GAAA,eAErCZ,cAAA,CAAAC,aAAA,CAACkB,IAAI,EAAA;IACHhB,IAAI,EAAEiB,SAAS,CAACC,KAAM;IACtBC,SAAS,EAAEC,UAAU,CAACC,eAAgB;AACtCP,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,MAAM,EAAC,MAAA;GACP,CAAA,CACS,CAEhB,CAEC,CAAA;AAEV;;;;"}

package/Thread/components/ThreadList.js

@@ -1,71 +1,76 @@
 import React__default, { useMemo } from 'react';
 import ThreadListItem from './ThreadListItem.js';
-import { u as useThreadContext, c as compareMessagesForGrouping } from '../../ThreadProvider-128d5041.js';
+import { u as useThreadContext, c as compareMessagesForGrouping } from '../../ThreadProvider-637aa7f0.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
 import { isSameDay } from 'date-fns';
 import { MessageProvider } from '../../Message/context.js';
-import '../../index-67dd0c26.js';
-import '../../index-321e838f.js';
-import '../../LocalizationContext-ae38446a.js';
-import '../../stringSet-6d89212b.js';
+import '../../index-f22b46c2.js';
+import '../../index-617179bd.js';
+import '../../LocalizationContext-8b7b48ec.js';
+import '../../stringSet-387833a3.js';
 import '../../ui/DateSeparator.js';
-import '../../color-c1b95a91.js';
-import '../../index-a900bd78.js';
+import '../../color-be032457.js';
+import '../../index-c4af409f.js';
 import 'prop-types';
-import '../../RemoveMessageModal-10f50eae.js';
+import '../../RemoveMessageModal-38fef9c4.js';
 import '../../ui/Modal.js';
 import 'react-dom';
-import '../../index-14bb6832.js';
+import '../../index-a62f231a.js';
 import '../../ui/Button.js';
 import '../../ui/Icon.js';
 import '../../ui/IconButton.js';
-import '../../_rollupPluginBabelHelpers-eaf55eff.js';
-import '../../MediaQueryContext-8d283dc2.js';
+import '../../_rollupPluginBabelHelpers-8c286a7c.js';
+import '../../MediaQueryContext-744e0eb4.js';
 import '../../ui/FileViewer.js';
-import '../../index-d8fdbe6f.js';
+import '../../index-2d3d2283.js';
 import '../../utils/message/getOutgoingMessageState.js';
 import '../../ui/Avatar.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-c94bd88b.js';
+import '../../uuid-295e6b8b.js';
 import '../../Channel/components/SuggestedMentionList.js';
-import '../../ChannelProvider-bba4a095.js';
-import '../../UserProfileContext-91e3b3f2.js';
-import '../../topics-8f4016e9.js';
-import '../../compareIds-74cf4016.js';
-import '../../const-3af04f0a.js';
+import '../../ChannelProvider-6c5b02f1.js';
+import '../../UserProfileContext-9040499b.js';
+import '../../topics-019712e5.js';
+import '../../compareIds-fa21456c.js';
+import '../../const-48b39769.js';
 import '@sendbird/chat/groupChannel';
 import '@sendbird/chat/message';
-import '../../consts-9ece4263.js';
-import '../../const-befef81d.js';
+import '../../consts-63e52cd8.js';
+import '../../const-71be96fe.js';
 import '../../withSendbird.js';
 import '../context/types.js';
 import '@sendbird/chat';
 import '../../ui/MessageInput.js';
 import 'dompurify';
-import '../../consts-a8bc28bd.js';
-import '../../consts-bb6cbaee.js';
-import '../../consts-354db0d9.js';
-import '../../tokenize-2e969273.js';
+import '../../consts-5cbd0257.js';
+import '../../consts-c4702413.js';
+import '../../consts-967162b2.js';
+import '../../tokenize-c2f4569f.js';
 import '../../ui/ContextMenu.js';
 import '../../ui/SortByRow.js';
 import '../../ui/UserProfile.js';
 import '../../sendbirdSelectors.js';
-import '../../utils-c8b489c4.js';
+import '../../utils-28a3bfad.js';
 import '../../ui/MessageItemMenu.js';
-import '../../types-ebbbec62.js';
+import '../../types-34b09dae.js';
 import '../../ui/MessageItemReactionMenu.js';
 import '../../ui/ReactionButton.js';
-import '../../index-96f6e11b.js';
+import '../../useLongPress-b803e920.js';
+import '../../index-c3176145.js';
 import '../../ui/Loader.js';
-import '../../index-1be3f6d7.js';
-import '../../index-8a4d2b6e.js';
+import '../../index-c281a87e.js';
+import '../../index-0872eca4.js';
 import '../../ui/EmojiReactions.js';
+import '../../ui/ReactionBadge.js';
+import '../../ui/BottomSheet.js';
+import '../../ui/UserListItem.js';
+import '../../ui/MutedAvatarOverlay.js';
+import '../../ui/Checkbox.js';
 import '../../ui/Tooltip.js';
 import '../../ui/TooltipWrapper.js';
-import '../../ui/ReactionBadge.js';
 import '../../ui/TextMessageItemBody.js';
-import '../../index-4554e20e.js';
-import '../../index.module-1c75b4f5.js';
+import '../../index-29ec12d6.js';
+import '../../index.module-3529d572.js';
 import '../../ui/MentionLabel.js';
 import '../../ui/LinkLabel.js';
 import '../../ui/OGMessageItemBody.js';
@@ -76,9 +81,11 @@ import '../../ui/UnknownMessageItemBody.js';
 import '../../ui/VoiceMessageItemBody.js';
 import '../../ui/ProgressBar.js';
 import '../../VoicePlayer/useVoicePlayer.js';
-import '../../index-ae8e6fc3.js';
+import '../../index-8d2735b6.js';
 import '../../VoiceRecorder/context.js';
 import '../../ui/PlaybackTime.js';
+import '../../index-de27e990.js';
+import '../../useDirtyGetMentions-a032c723.js';
 
 function ThreadList(_ref) {
   let {

package/Thread/components/ThreadList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadList.js","sources":["../../../src/modules/Thread/components/ThreadList/index.tsx"],"sourcesContent":["import React, { RefObject, useMemo } from 'react';\nimport { BaseMessage, FileMessage, UserMessage } from '@sendbird/chat/message';\n\nimport './index.scss';\nimport ThreadListItem from './ThreadListItem';\nimport { useThreadContext } from '../../context/ThreadProvider';\nimport { compareMessagesForGrouping } from '../../context/utils';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\nimport { isSameDay } from 'date-fns';\nimport { MessageProvider } from '../../../Message/context/MessageProvider';\n\nexport interface ThreadListProps {\n  className?: string;\n  allThreadMessages: Array<UserMessage | FileMessage | BaseMessage>;\n  renderMessage?: (props: {\n    message: UserMessage | FileMessage,\n    chainTop: boolean,\n    chainBottom: boolean,\n    hasSeparator: boolean,\n  }) => React.ReactElement;\n  renderCustomSeparator?: (props: { message: UserMessage | FileMessage }) => React.ReactElement;\n  scrollRef?: RefObject<HTMLDivElement>;\n  scrollBottom?: number;\n}\n\nexport default function ThreadList({\n  className,\n  allThreadMessages,\n  renderMessage,\n  renderCustomSeparator,\n  scrollRef,\n  scrollBottom,\n}: ThreadListProps): React.ReactElement {\n  const { config } = useSendbirdStateContext();\n  const { replyType, userId } = config;\n  const {\n    currentChannel,\n  } = useThreadContext();\n\n  const MemorizedMessage = useMemo(() => ({\n    message,\n    chainTop,\n    chainBottom,\n    hasSeparator,\n  }) => {\n\n    if (typeof renderMessage === 'function') {\n      return renderMessage({\n        message: message as UserMessage | FileMessage,\n        chainTop,\n        chainBottom,\n        hasSeparator,\n      });\n    }\n    return null;\n  }, [renderMessage]);\n\n  return (\n    <div className={`sendbird-thread-list ${className}`}>\n      {allThreadMessages.map((message, idx) => {\n        const isByMe = (message as UserMessage)?.sender?.userId === userId;\n        const prevMessage = allThreadMessages[idx - 1];\n        const nextMessage = allThreadMessages[idx + 1];\n        // eslint-disable-next-line no-constant-condition\n        const [chainTop, chainBottom] = true// isMessageGroupingEnabled\n          ? compareMessagesForGrouping(\n            prevMessage as UserMessage | FileMessage,\n            message as UserMessage | FileMessage,\n            nextMessage as UserMessage | FileMessage,\n            currentChannel,\n            replyType,\n          )\n          : [false, false];\n        const hasSeparator = !(prevMessage?.createdAt > 0 && (\n          isSameDay(message?.createdAt, prevMessage?.createdAt)\n        ));\n\n        const handleScroll = () => {\n          const current = scrollRef?.current;\n          if (current) {\n            const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;\n            if (scrollBottom < bottom) {\n              current.scrollTop += bottom - scrollBottom;\n            }\n          }\n        };\n\n        return (\n          <MessageProvider message={message} isByMe={isByMe} key={message?.messageId}>\n            {\n              MemorizedMessage({\n                message,\n                chainTop,\n                chainBottom,\n                hasSeparator,\n              }) || (\n                <ThreadListItem\n                  message={message as UserMessage | FileMessage}\n                  chainTop={chainTop}\n                  chainBottom={chainBottom}\n                  hasSeparator={hasSeparator}\n                  renderCustomSeparator={renderCustomSeparator}\n                  handleScroll={handleScroll}\n                />\n              )\n            }\n          </MessageProvider>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["ThreadList","_ref","className","allThreadMessages","renderMessage","renderCustomSeparator","scrollRef","scrollBottom","config","useSendbirdStateContext","replyType","userId","currentChannel","useThreadContext","MemorizedMessage","useMemo","_ref2","message","chainTop","chainBottom","hasSeparator","React","createElement","map","idx","_sender","isByMe","sender","prevMessage","nextMessage","compareMessagesForGrouping","createdAt","isSameDay","handleScroll","current","bottom","scrollHeight","scrollTop","offsetHeight","MessageProvider","key","messageId","ThreadListItem"],"mappings":"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"}
+{"version":3,"file":"ThreadList.js","sources":["../../../src/modules/Thread/components/ThreadList/index.tsx"],"sourcesContent":["import React, { RefObject, useMemo } from 'react';\nimport { BaseMessage, FileMessage, UserMessage } from '@sendbird/chat/message';\n\nimport './index.scss';\nimport ThreadListItem from './ThreadListItem';\nimport { useThreadContext } from '../../context/ThreadProvider';\nimport { compareMessagesForGrouping } from '../../context/utils';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\nimport { isSameDay } from 'date-fns';\nimport { MessageProvider } from '../../../Message/context/MessageProvider';\n\nexport interface ThreadListProps {\n  className?: string;\n  allThreadMessages: Array<UserMessage | FileMessage | BaseMessage>;\n  renderMessage?: (props: {\n    message: UserMessage | FileMessage,\n    chainTop: boolean,\n    chainBottom: boolean,\n    hasSeparator: boolean,\n  }) => React.ReactElement;\n  renderCustomSeparator?: (props: { message: UserMessage | FileMessage }) => React.ReactElement;\n  scrollRef?: RefObject<HTMLDivElement>;\n  scrollBottom?: number;\n}\n\nexport default function ThreadList({\n  className,\n  allThreadMessages,\n  renderMessage,\n  renderCustomSeparator,\n  scrollRef,\n  scrollBottom,\n}: ThreadListProps): React.ReactElement {\n  const { config } = useSendbirdStateContext();\n  const { replyType, userId } = config;\n  const {\n    currentChannel,\n  } = useThreadContext();\n\n  const MemorizedMessage = useMemo(() => ({\n    message,\n    chainTop,\n    chainBottom,\n    hasSeparator,\n  }) => {\n\n    if (typeof renderMessage === 'function') {\n      return renderMessage({\n        message: message as UserMessage | FileMessage,\n        chainTop,\n        chainBottom,\n        hasSeparator,\n      });\n    }\n    return null;\n  }, [renderMessage]);\n\n  return (\n    <div className={`sendbird-thread-list ${className}`}>\n      {allThreadMessages.map((message, idx) => {\n        const isByMe = (message as UserMessage)?.sender?.userId === userId;\n        const prevMessage = allThreadMessages[idx - 1];\n        const nextMessage = allThreadMessages[idx + 1];\n        // eslint-disable-next-line no-constant-condition\n        const [chainTop, chainBottom] = true// isMessageGroupingEnabled\n          ? compareMessagesForGrouping(\n            prevMessage as UserMessage | FileMessage,\n            message as UserMessage | FileMessage,\n            nextMessage as UserMessage | FileMessage,\n            currentChannel,\n            replyType,\n          )\n          : [false, false];\n        const hasSeparator = !(prevMessage?.createdAt > 0 && (\n          isSameDay(message?.createdAt, prevMessage?.createdAt)\n        ));\n\n        const handleScroll = () => {\n          const current = scrollRef?.current;\n          if (current) {\n            const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;\n            if (scrollBottom < bottom) {\n              current.scrollTop += bottom - scrollBottom;\n            }\n          }\n        };\n\n        return (\n          <MessageProvider message={message} isByMe={isByMe} key={message?.messageId}>\n            {\n              MemorizedMessage({\n                message,\n                chainTop,\n                chainBottom,\n                hasSeparator,\n              }) || (\n                <ThreadListItem\n                  message={message as UserMessage | FileMessage}\n                  chainTop={chainTop}\n                  chainBottom={chainBottom}\n                  hasSeparator={hasSeparator}\n                  renderCustomSeparator={renderCustomSeparator}\n                  handleScroll={handleScroll}\n                />\n              )\n            }\n          </MessageProvider>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["ThreadList","_ref","className","allThreadMessages","renderMessage","renderCustomSeparator","scrollRef","scrollBottom","config","useSendbirdStateContext","replyType","userId","currentChannel","useThreadContext","MemorizedMessage","useMemo","_ref2","message","chainTop","chainBottom","hasSeparator","React","createElement","map","idx","_sender","isByMe","sender","prevMessage","nextMessage","compareMessagesForGrouping","createdAt","isSameDay","handleScroll","current","bottom","scrollHeight","scrollTop","offsetHeight","MessageProvider","key","messageId","ThreadListItem"],"mappings":"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"}

package/Thread/components/ThreadListItem.js

@@ -1,24 +1,25 @@
 import React__default, { useState, useContext, useRef, useLayoutEffect, useEffect, useMemo } from 'react';
-import { f as format } from '../../index-67dd0c26.js';
-import { u as useLocalization } from '../../LocalizationContext-ae38446a.js';
+import { f as format } from '../../index-f22b46c2.js';
+import { u as useLocalization } from '../../LocalizationContext-8b7b48ec.js';
 import DateSeparator from '../../ui/DateSeparator.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-a900bd78.js';
-import { R as RemoveMessage } from '../../RemoveMessageModal-10f50eae.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-c4af409f.js';
+import { R as RemoveMessage } from '../../RemoveMessageModal-38fef9c4.js';
 import FileViewer from '../../ui/FileViewer.js';
-import { u as useThreadContext } from '../../ThreadProvider-128d5041.js';
+import { u as useThreadContext } from '../../ThreadProvider-637aa7f0.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
 import SuggestedMentionList from '../../Channel/components/SuggestedMentionList.js';
 import MessageInput from '../../ui/MessageInput.js';
 import { ThreadListStateTypes } from '../context/types.js';
-import { M as MessageInputKeys } from '../../const-befef81d.js';
+import { M as MessageInputKeys } from '../../const-71be96fe.js';
+import { b as _extends, _ as _objectSpread2 } from '../../_rollupPluginBabelHelpers-8c286a7c.js';
 import ContextMenu, { MenuItems } from '../../ui/ContextMenu.js';
 import Avatar from '../../ui/Avatar.js';
-import { a as UserProfileContext } from '../../UserProfileContext-91e3b3f2.js';
+import { a as UserProfileContext } from '../../UserProfileContext-9040499b.js';
 import UserProfile from '../../ui/UserProfile.js';
 import MessageItemMenu from '../../ui/MessageItemMenu.js';
 import MessageItemReactionMenu from '../../ui/MessageItemReactionMenu.js';
-import { z as getUIKitMessageTypes, A as getSenderName, j as getClassName, B as isTextMessage, C as isOGMessage, d as isVoiceMessage, s as getUIKitMessageType, n as isThumbnailMessage } from '../../index-d8fdbe6f.js';
-import { M as MessageStatus } from '../../index-96f6e11b.js';
+import { s as getUIKitMessageTypes, u as getSenderName, h as getClassName, v as isTextMessage, w as isOGMessage, d as isVoiceMessage, r as getUIKitMessageType, m as isThumbnailMessage } from '../../index-2d3d2283.js';
+import { M as MessageStatus } from '../../index-c3176145.js';
 import EmojiReactions from '../../ui/EmojiReactions.js';
 import TextMessageItemBody from '../../ui/TextMessageItemBody.js';
 import OGMessageItemBody from '../../ui/OGMessageItemBody.js';
@@ -26,55 +27,61 @@ import FileMessageItemBody from '../../ui/FileMessageItemBody.js';
 import ThumbnailMessageItemBody from '../../ui/ThumbnailMessageItemBody.js';
 import UnknownMessageItemBody from '../../ui/UnknownMessageItemBody.js';
 import { VoiceMessageItemBody } from '../../ui/VoiceMessageItemBody.js';
-import { R as Role } from '../../types-ebbbec62.js';
-import '../../index-321e838f.js';
-import '../../stringSet-6d89212b.js';
-import '../../color-c1b95a91.js';
+import { u as useMediaQueryContext } from '../../MediaQueryContext-744e0eb4.js';
+import { u as useLongPress } from '../../useLongPress-b803e920.js';
+import { M as MobileMenu } from '../../index-de27e990.js';
+import { R as Role } from '../../types-34b09dae.js';
+import { u as useDirtyGetMentions } from '../../useDirtyGetMentions-a032c723.js';
+import { g as getIsReactionEnabled } from '../../ChannelProvider-6c5b02f1.js';
+import '../../index-617179bd.js';
+import '../../stringSet-387833a3.js';
+import '../../color-be032457.js';
 import 'prop-types';
 import '../../ui/Modal.js';
 import 'react-dom';
-import '../../index-14bb6832.js';
+import '../../index-a62f231a.js';
 import '../../ui/Button.js';
 import '../../ui/Icon.js';
 import '../../ui/IconButton.js';
-import '../../_rollupPluginBabelHelpers-eaf55eff.js';
-import '../../MediaQueryContext-8d283dc2.js';
 import '../../utils/message/getOutgoingMessageState.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-c94bd88b.js';
+import '../../uuid-295e6b8b.js';
 import '@sendbird/chat';
-import '../../topics-8f4016e9.js';
+import '../../topics-019712e5.js';
 import '@sendbird/chat/groupChannel';
 import '@sendbird/chat/message';
-import '../../consts-9ece4263.js';
+import '../../consts-63e52cd8.js';
 import '../../withSendbird.js';
-import '../../ChannelProvider-bba4a095.js';
-import '../../compareIds-74cf4016.js';
-import '../../const-3af04f0a.js';
+import '../../const-48b39769.js';
+import '../../compareIds-fa21456c.js';
 import 'dompurify';
-import '../../consts-a8bc28bd.js';
-import '../../consts-bb6cbaee.js';
-import '../../consts-354db0d9.js';
-import '../../tokenize-2e969273.js';
+import '../../consts-5cbd0257.js';
+import '../../consts-c4702413.js';
+import '../../consts-967162b2.js';
+import '../../tokenize-c2f4569f.js';
 import '../../ui/SortByRow.js';
 import '../../sendbirdSelectors.js';
-import '../../utils-c8b489c4.js';
+import '../../utils-28a3bfad.js';
 import '../../ui/ReactionButton.js';
 import '../../ui/Loader.js';
-import '../../index-1be3f6d7.js';
-import '../../index-8a4d2b6e.js';
+import '../../index-c281a87e.js';
+import '../../index-0872eca4.js';
+import '../../ui/ReactionBadge.js';
+import '../../ui/BottomSheet.js';
+import '../../ui/UserListItem.js';
+import '../../ui/MutedAvatarOverlay.js';
+import '../../ui/Checkbox.js';
 import '../../ui/Tooltip.js';
 import '../../ui/TooltipWrapper.js';
-import '../../ui/ReactionBadge.js';
-import '../../index-4554e20e.js';
-import '../../index.module-1c75b4f5.js';
 import '../../Message/context.js';
+import '../../index-29ec12d6.js';
+import '../../index.module-3529d572.js';
 import '../../ui/MentionLabel.js';
 import '../../ui/LinkLabel.js';
 import '../../ui/TextButton.js';
 import '../../ui/ProgressBar.js';
 import '../../VoicePlayer/useVoicePlayer.js';
-import '../../index-ae8e6fc3.js';
+import '../../index-8d2735b6.js';
 import '../../VoiceRecorder/context.js';
 import '../../ui/PlaybackTime.js';
 
@@ -102,6 +109,9 @@ function ThreadListItemContent(_ref) {
     onReplyInThread
   } = _ref;
   const messageTypes = getUIKitMessageTypes();
+  const {
+    isMobile
+  } = useMediaQueryContext();
   const {
     dateLocale
   } = useLocalization();
@@ -115,8 +125,22 @@ function ThreadListItemContent(_ref) {
   const useReplying = !!((replyType === 'QUOTE_REPLY' || replyType === 'THREAD') && message !== null && message !== void 0 && message.parentMessageId && message !== null && message !== void 0 && message.parentMessage && !disableQuoteMessage);
   const supposedHoverClassName = supposedHover ? 'sendbird-mouse-hover' : '';
   const isReactionEnabledInChannel = isReactionEnabled && !(channel !== null && channel !== void 0 && channel.isEphemeral);
+
+  // Mobile
+  const mobileMenuRef = useRef(null);
+  const [showMobileMenu, setShowMobileMenu] = useState(false);
+  const longPress = useLongPress({
+    onLongPress: () => {
+      if (isMobile) {
+        setShowMobileMenu(true);
+      }
+    }
+  }, {
+    shouldPreventDefault: false
+  });
   return /*#__PURE__*/React__default.createElement("div", {
-    className: `sendbird-thread-list-item-content ${className} ${isByMe ? 'outgoing' : 'incoming'}`
+    className: `sendbird-thread-list-item-content ${className} ${isByMe ? 'outgoing' : 'incoming'}`,
+    ref: mobileMenuRef
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `sendbird-thread-list-item-content__left ${isReactionEnabledInChannel ? 'use-reaction' : ''} ${isByMe ? 'outgoing' : 'incoming'}`
   }, !isByMe && !chainBottom && /*#__PURE__*/React__default.createElement(ContextMenu, {
@@ -153,7 +177,7 @@ function ThreadListItemContent(_ref) {
       user: message === null || message === void 0 ? void 0 : message.sender,
       onSuccess: closeDropdown
     }))
-  }), isByMe && /*#__PURE__*/React__default.createElement("div", {
+  }), isByMe && !isMobile && /*#__PURE__*/React__default.createElement("div", {
     className: `sendbird-thread-list-item-content-menu ${isReactionEnabledInChannel ? 'use-reaction' : ''} ${isByMe ? 'outgoing' : 'incoming'} ${supposedHoverClassName}`
   }, /*#__PURE__*/React__default.createElement(MessageItemMenu, {
     className: "sendbird-thread-list-item-content-menu__normal-menu",
@@ -175,9 +199,9 @@ function ThreadListItemContent(_ref) {
     emojiContainer: emojiContainer,
     toggleReaction: toggleReaction,
     setSupposedHover: setSupposedHover
-  }))), /*#__PURE__*/React__default.createElement("div", {
+  }))), /*#__PURE__*/React__default.createElement("div", _extends({
     className: "sendbird-thread-list-item-content__middle"
-  }, !isByMe && !chainTop && !useReplying && /*#__PURE__*/React__default.createElement(Label, {
+  }, isMobile ? _objectSpread2({}, longPress) : {}), !isByMe && !chainTop && !useReplying && /*#__PURE__*/React__default.createElement(Label, {
     className: "sendbird-thread-list-item-content__middle__sender-name",
     type: LabelTypography.CAPTION_2,
     color: LabelColors.ONBACKGROUND_2
@@ -226,7 +250,7 @@ function ThreadListItemContent(_ref) {
     isReactionEnabled: isReactionEnabledInChannel,
     showFileViewer: showFileViewer,
     style: {
-      width: '200px',
+      width: isMobile ? '100%' : '200px',
       height: '148px'
     }
   }), getUIKitMessageType(message) === messageTypes.UNKNOWN && /*#__PURE__*/React__default.createElement(UnknownMessageItemBody, {
@@ -239,6 +263,7 @@ function ThreadListItemContent(_ref) {
   }, /*#__PURE__*/React__default.createElement(EmojiReactions, {
     userId: userId,
     message: message,
+    channel: channel,
     isByMe: isByMe,
     emojiContainer: emojiContainer,
     memberNicknamesMap: nicknamesMap,
@@ -251,7 +276,7 @@ function ThreadListItemContent(_ref) {
     locale: dateLocale
   })))), /*#__PURE__*/React__default.createElement("div", {
     className: `sendbird-thread-list-item-content__right ${chainTop ? 'chain-top' : ''} ${isByMe ? 'outgoing' : 'incoming'}`
-  }, !isByMe && /*#__PURE__*/React__default.createElement("div", {
+  }, !isByMe && !isMobile && /*#__PURE__*/React__default.createElement("div", {
     className: `sendbird-thread-list-item-content-menu ${supposedHoverClassName}`
   }, isReactionEnabledInChannel && /*#__PURE__*/React__default.createElement(MessageItemReactionMenu, {
     className: "sendbird-thread-list-item-content-menu__reaction-menu",
@@ -272,7 +297,23 @@ function ThreadListItemContent(_ref) {
     resendMessage: resendMessage,
     setSupposedHover: setSupposedHover,
     onReplyInThread: onReplyInThread
-  }))));
+  }))), showMobileMenu && /*#__PURE__*/React__default.createElement(MobileMenu, {
+    parentRef: mobileMenuRef,
+    channel: channel,
+    message: message,
+    userId: userId,
+    replyType: replyType,
+    hideMenu: () => {
+      setShowMobileMenu(false);
+    },
+    isReactionEnabled: isReactionEnabled,
+    isByMe: isByMe,
+    emojiContainer: emojiContainer,
+    showEdit: showEdit,
+    showRemove: showRemove,
+    toggleReaction: toggleReaction,
+    isOpenedFromThread: true
+  }));
 }
 
 function ThreadListItem(_ref) {
@@ -295,7 +336,8 @@ function ThreadListItem(_ref) {
     isMentionEnabled,
     isOnline,
     replyType,
-    userMention
+    userMention,
+    logger
   } = config;
   const userId = stores === null || stores === void 0 ? void 0 : (_stores$userStore = stores.userStore) === null || _stores$userStore === void 0 ? void 0 : (_stores$userStore$use = _stores$userStore.user) === null || _stores$userStore$use === void 0 ? void 0 : _stores$userStore$use.userId;
   const {
@@ -318,7 +360,11 @@ function ThreadListItem(_ref) {
   const [showEdit, setShowEdit] = useState(false);
   const [showRemove, setShowRemove] = useState(false);
   const [showFileViewer, setShowFileViewer] = useState(false);
-  const usingReaction = isReactionEnabled && !(currentChannel !== null && currentChannel !== void 0 && currentChannel.isSuper) && !(currentChannel !== null && currentChannel !== void 0 && currentChannel.isBroadcast);
+  const usingReaction = getIsReactionEnabled({
+    globalLevel: isReactionEnabled,
+    isSuper: currentChannel.isSuper,
+    isBroadcast: currentChannel.isBroadcast
+  });
 
   // Move to message
   const messageScrollRef = useRef(null);
@@ -345,15 +391,13 @@ function ThreadListItem(_ref) {
   const [messageInputEvent, setMessageInputEvent] = useState(null);
   const [selectedUser, setSelectedUser] = useState(null);
   const [mentionSuggestedUsers, setMentionSuggestedUsers] = useState([]);
-  const [ableMention, setAbleMention] = useState(true);
   const displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !isMuted && !(isChannelFrozen && !(currentChannel.myRole === Role.OPERATOR));
-  useEffect(() => {
-    if ((mentionedUsers === null || mentionedUsers === void 0 ? void 0 : mentionedUsers.length) >= (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount)) {
-      setAbleMention(false);
-    } else {
-      setAbleMention(true);
-    }
-  }, [mentionedUsers]);
+  const mentionNodes = useDirtyGetMentions({
+    ref: editMessageInputRef
+  }, {
+    logger
+  });
+  const ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount);
   useEffect(() => {
     setMentionedUsers(mentionedUsers.filter(_ref2 => {
       let {