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

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog - v3
 
+## [v3.3.0] (Nov 23 2022)
+Features:
+* Provide new module `Thread`. See the specific informations of this module on the [Docs page](https://sendbird.com/docs/uikit)
+  * You can use a combined component `Thread`. Import it with
+    ```typescript
+    import Thread from "@sendbird/uikit-react/Thread"
+    ```
+  * Also you can use `ThreadProvider` and `useThreadContext` for customization. Import it with
+    ```typescript
+    import { ThreadProvider, useThreadContext } from "@sendbird/uikit-react/Thread/context"
+    ```
+  * And the other UI components are provided under the Thread. `ThreadUI`, `ThreadHeader`, `ParentMessageInfo`, `ParentMessageInfoItem`, `ThreadList`, `ThreadListItem`, and `ThreadMessageInput` are it
+* Add `ui/ThreadReplies` component
+  ```typescript
+  interface ThreadRepliesProps {
+    className?: string;
+    threadInfo: ThreadInfo;
+    onClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+  }
+  ```
+* Add channel props `threadReplySelectType`
+  * Type of the value should be
+  ```typescript
+  enum ThreadReplySelectType { PARENT, THREAD }
+  ```
+  You can see how to use it below
+  ```typescript
+  import { ThreadReplySelectType } from "@sendbird/uikit-react/Channel/context";
+
+  <Channel
+    ...
+    threadReplySelectType={ThreadReplySelectType.PARENT}
+  />
+  ```
+
+Fixes:
+* Do not allow operator to unregister itself on the OperatorList of GroupChannel
+* Create new group channel when user open 1:1 channel on the UserProfile
+* Register the channel creator as an operator in 1:1 channel
+
 ## [v3.2.6] (Nov 14 2022)
 Fix:
 * Use ref instead of querySelector for DOM manipulation

package/Channel/components/ChannelHeader.js

@@ -1,30 +1,31 @@
 import React__default, { useContext } from 'react';
-import { c as LabelStringSet, L as Label, a as LabelTypography, b as LabelColors } from '../../index-e80fbb97.js';
+import { g as getChannelTitle } from '../../utils-ad636dfd.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-4a23e6ff.js';
 import Icon, { IconColors, IconTypes } from '../../ui/Icon.js';
 import IconButton from '../../ui/IconButton.js';
 import ChannelAvatar from '../../ui/ChannelAvatar.js';
-import { a as LocalizationContext } from '../../LocalizationContext-8c300642.js';
+import { a as LocalizationContext } from '../../LocalizationContext-5920dafc.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import { u as useChannelContext } from '../../ChannelProvider-c6154c45.js';
-import { u as useMediaQueryContext } from '../../MediaQueryContext-fbda8d54.js';
-import { n as noop } from '../../utils-f9a93d9a.js';
+import { u as useChannelContext } from '../../ChannelProvider-8be62d5d.js';
+import { u as useMediaQueryContext } from '../../MediaQueryContext-9c1bb79f.js';
+import { n as noop } from '../../utils-5a4995e3.js';
 import 'prop-types';
-import '../../stringSet-b9e1e7dc.js';
-import '../../tslib.es6-257c9dc0.js';
+import '../../stringSet-f0e25f08.js';
+import '../../tslib.es6-279bc71d.js';
 import '../../ui/Avatar.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-d2ed5e50.js';
-import '../../utils-63ed383e.js';
-import '../../index-5ba44303.js';
+import '../../uuid-636df95b.js';
+import '../../utils-afd23bb8.js';
+import '../../index-b5b56cb7.js';
 import '../../withSendbird.js';
-import '../../_rollupPluginBabelHelpers-cdd0b511.js';
-import '../../UserProfileContext-5678a04f.js';
-import '../../index-55e004b6.js';
-import '../../topics-9580e9ae.js';
-import '../../index-1f08f186.js';
+import '../../_rollupPluginBabelHelpers-636e674b.js';
+import '../../UserProfileContext-749db4f6.js';
+import '../../index-4f51d577.js';
+import '../../topics-d2e15fe6.js';
+import '../../index-1a59aaa9.js';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../compareIds-45cb6c7e.js';
-import '../../const-7f0a43cc.js';
+import '../../compareIds-5494c074.js';
+import '../../const-8bb8cc10.js';
 import '@sendbird/chat/groupChannel';
 import '@sendbird/chat/message';
 import '../../ui/ContextMenu.js';
@@ -32,32 +33,6 @@ import 'react-dom';
 import '../../ui/SortByRow.js';
 import '../../ui/ReactionButton.js';
 
-var getChannelTitle = function (channel, currentUserId, stringSet) {
-  var _a;
-
-  var LABEL_STRING_SET = stringSet || LabelStringSet;
-
-  if (!(channel === null || channel === void 0 ? void 0 : channel.name) && !(channel === null || channel === void 0 ? void 0 : channel.members)) {
-    return LABEL_STRING_SET.NO_TITLE;
-  }
-
-  if ((channel === null || channel === void 0 ? void 0 : channel.name) && channel.name !== 'Group Channel') {
-    return channel.name;
-  }
-
-  if (((_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.length) === 1) {
-    return LABEL_STRING_SET.NO_MEMBERS;
-  }
-
-  return channel === null || channel === void 0 ? void 0 : channel.members.filter(function (_a) {
-    var userId = _a.userId;
-    return userId !== currentUserId;
-  }).map(function (_a) {
-    var nickname = _a.nickname;
-    return nickname || LABEL_STRING_SET.NO_NAME;
-  }).join(', ');
-};
-
 var ChannelHeader = function () {
   var _a, _b, _c;
 

package/Channel/components/ChannelHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelHeader.js","sources":["../../../src/smart-components/Channel/components/ChannelHeader/utils.ts","../../../src/smart-components/Channel/components/ChannelHeader/index.tsx"],"sourcesContent":["import type { GroupChannel } from '@sendbird/chat/groupChannel';\nimport { LabelStringSet } from '../../../../ui/Label';\n\nexport const getChannelTitle = (\n  channel: GroupChannel,\n  currentUserId: string,\n  stringSet: { [label: string]: string }\n  ): string => {\n  const LABEL_STRING_SET: { [label: string]: string } = stringSet || LabelStringSet;\n  if (!channel?.name && !channel?.members) {\n    return LABEL_STRING_SET.NO_TITLE;\n  }\n  if (channel?.name && channel.name !== 'Group Channel') {\n    return channel.name;\n  }\n\n  if (channel?.members?.length === 1) {\n    return LABEL_STRING_SET.NO_MEMBERS;\n  }\n\n  return channel?.members\n    .filter(({ userId }) => userId !== currentUserId)\n    .map(({ nickname }) => (nickname || LABEL_STRING_SET.NO_NAME))\n    .join(', ');\n};\n","import './channel-header.scss';\nimport React, { useContext } from 'react';\n\nimport * as utils from './utils';\n\nimport Label, { LabelTypography, LabelColors } from '../../../../ui/Label';\nimport Icon, { IconTypes, IconColors } from '../../../../ui/Icon';\nimport IconButton from '../../../../ui/IconButton';\nimport ChannelAvatar from '../../../../ui/ChannelAvatar/index';\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\nimport { useChannelContext } from '../../context/ChannelProvider';\nimport { useMediaQueryContext } from '../../../../lib/MediaQueryContext';\nimport { noop } from '../../../../utils/utils'\n\nconst ChannelHeader: React.FC = () => {\n  const globalStore = useSendbirdStateContext();\n  const userId = globalStore?.config?.userId;\n  const theme = globalStore?.config?.theme;\n\n  const channelStore = useChannelContext();\n  const { isMobile } = useMediaQueryContext();\n  const {\n    currentGroupChannel,\n    showSearchIcon,\n    onSearchClick,\n    onChatHeaderActionClick,\n    onBackClick = noop,\n  } = channelStore;\n  const subTitle = (currentGroupChannel?.members\n    && currentGroupChannel?.members?.length !== 2);\n  const isMuted = currentGroupChannel?.myMutedState === \"muted\";\n\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className=\"sendbird-chat-header\">\n      <div className=\"sendbird-chat-header__left\">\n        {\n          isMobile && (\n            <Icon\n              className=\"sendbird-chat-header__icon_back\"\n              onClick={onBackClick}\n              fillColor={IconColors.PRIMARY}\n              width=\"24px\"\n              height=\"24px\"\n              type={IconTypes.ARROW_LEFT}\n            />\n          )\n        }\n        <ChannelAvatar\n          theme={theme}\n          channel={currentGroupChannel}\n          userId={userId}\n          height={32}\n          width={32}\n        />\n        <Label\n          className=\"sendbird-chat-header__left__title\"\n          type={LabelTypography.H_2}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {utils.getChannelTitle(currentGroupChannel, userId, stringSet)}\n        </Label>\n        <Label\n          className=\"sendbird-chat-header__left__subtitle\"\n          type={LabelTypography.BODY_1}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {subTitle}\n        </Label>\n      </div>\n      <div className=\"sendbird-chat-header__right\">\n        {\n          ((typeof isMuted === 'string' && isMuted === 'true') || (typeof isMuted === 'boolean' && isMuted))\n            && (\n              <Icon\n                className=\"sendbird-chat-header__right__mute\"\n                type={IconTypes.NOTIFICATIONS_OFF_FILLED}\n                width=\"24px\"\n                height=\"24px\"\n              />\n            )\n        }\n        {\n          showSearchIcon && (\n            <IconButton\n              className=\"sendbird-chat-header__right__search\"\n              width=\"32px\"\n              height=\"32px\"\n              onClick={onSearchClick}\n            >\n              <Icon\n                type={IconTypes.SEARCH}\n                fillColor={IconColors.PRIMARY}\n                width=\"24px\"\n                height=\"24px\"\n              />\n            </IconButton>\n          )\n        }\n        <IconButton\n          className=\"sendbird-chat-header__right__info\"\n          width=\"32px\"\n          height=\"32px\"\n          onClick={onChatHeaderActionClick}\n        >\n          <Icon\n            type={IconTypes.INFO}\n            fillColor={IconColors.PRIMARY}\n            width=\"24px\"\n            height=\"24px\"\n          />\n        </IconButton>\n      </div>\n    </div>\n  );\n}\n\nexport default ChannelHeader;\n"],"names":["getChannelTitle","channel","currentUserId","stringSet","LABEL_STRING_SET","LabelStringSet","name","members","NO_TITLE","_a","length","NO_MEMBERS","filter","userId","map","nickname","NO_NAME","join","ChannelHeader","globalStore","useSendbirdStateContext","config","theme","_b","channelStore","useChannelContext","isMobile","useMediaQueryContext","currentGroupChannel","showSearchIcon","onSearchClick","onChatHeaderActionClick","_d","onBackClick","noop","subTitle","_c","isMuted","myMutedState","useContext","LocalizationContext","React","IconColors","PRIMARY","IconTypes","ARROW_LEFT","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","utils","BODY_1","ONBACKGROUND_2","NOTIFICATIONS_OFF_FILLED","SEARCH","INFO"],"mappings":"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"}
+{"version":3,"file":"ChannelHeader.js","sources":["../../../src/smart-components/Channel/components/ChannelHeader/index.tsx"],"sourcesContent":["import './channel-header.scss';\nimport React, { useContext } from 'react';\n\nimport * as utils from './utils';\n\nimport Label, { LabelTypography, LabelColors } from '../../../../ui/Label';\nimport Icon, { IconTypes, IconColors } from '../../../../ui/Icon';\nimport IconButton from '../../../../ui/IconButton';\nimport ChannelAvatar from '../../../../ui/ChannelAvatar/index';\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\nimport { useChannelContext } from '../../context/ChannelProvider';\nimport { useMediaQueryContext } from '../../../../lib/MediaQueryContext';\nimport { noop } from '../../../../utils/utils'\n\nconst ChannelHeader: React.FC = () => {\n  const globalStore = useSendbirdStateContext();\n  const userId = globalStore?.config?.userId;\n  const theme = globalStore?.config?.theme;\n\n  const channelStore = useChannelContext();\n  const { isMobile } = useMediaQueryContext();\n  const {\n    currentGroupChannel,\n    showSearchIcon,\n    onSearchClick,\n    onChatHeaderActionClick,\n    onBackClick = noop,\n  } = channelStore;\n  const subTitle = (currentGroupChannel?.members\n    && currentGroupChannel?.members?.length !== 2);\n  const isMuted = currentGroupChannel?.myMutedState === \"muted\";\n\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className=\"sendbird-chat-header\">\n      <div className=\"sendbird-chat-header__left\">\n        {\n          isMobile && (\n            <Icon\n              className=\"sendbird-chat-header__icon_back\"\n              onClick={onBackClick}\n              fillColor={IconColors.PRIMARY}\n              width=\"24px\"\n              height=\"24px\"\n              type={IconTypes.ARROW_LEFT}\n            />\n          )\n        }\n        <ChannelAvatar\n          theme={theme}\n          channel={currentGroupChannel}\n          userId={userId}\n          height={32}\n          width={32}\n        />\n        <Label\n          className=\"sendbird-chat-header__left__title\"\n          type={LabelTypography.H_2}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {utils.getChannelTitle(currentGroupChannel, userId, stringSet)}\n        </Label>\n        <Label\n          className=\"sendbird-chat-header__left__subtitle\"\n          type={LabelTypography.BODY_1}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {subTitle}\n        </Label>\n      </div>\n      <div className=\"sendbird-chat-header__right\">\n        {\n          ((typeof isMuted === 'string' && isMuted === 'true') || (typeof isMuted === 'boolean' && isMuted))\n            && (\n              <Icon\n                className=\"sendbird-chat-header__right__mute\"\n                type={IconTypes.NOTIFICATIONS_OFF_FILLED}\n                width=\"24px\"\n                height=\"24px\"\n              />\n            )\n        }\n        {\n          showSearchIcon && (\n            <IconButton\n              className=\"sendbird-chat-header__right__search\"\n              width=\"32px\"\n              height=\"32px\"\n              onClick={onSearchClick}\n            >\n              <Icon\n                type={IconTypes.SEARCH}\n                fillColor={IconColors.PRIMARY}\n                width=\"24px\"\n                height=\"24px\"\n              />\n            </IconButton>\n          )\n        }\n        <IconButton\n          className=\"sendbird-chat-header__right__info\"\n          width=\"32px\"\n          height=\"32px\"\n          onClick={onChatHeaderActionClick}\n        >\n          <Icon\n            type={IconTypes.INFO}\n            fillColor={IconColors.PRIMARY}\n            width=\"24px\"\n            height=\"24px\"\n          />\n        </IconButton>\n      </div>\n    </div>\n  );\n}\n\nexport default ChannelHeader;\n"],"names":["ChannelHeader","globalStore","useSendbirdStateContext","userId","_a","config","theme","_b","channelStore","useChannelContext","isMobile","useMediaQueryContext","currentGroupChannel","showSearchIcon","onSearchClick","onChatHeaderActionClick","_d","onBackClick","noop","subTitle","members","_c","length","isMuted","myMutedState","stringSet","useContext","LocalizationContext","React","IconColors","PRIMARY","IconTypes","ARROW_LEFT","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","utils","BODY_1","ONBACKGROUND_2","NOTIFICATIONS_OFF_FILLED","SEARCH","INFO"],"mappings":"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"}

package/Channel/components/ChannelUI.js

@@ -1,7 +1,7 @@
 import React__default, { useState, useEffect } from 'react';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import { u as useChannelContext, M as MARK_AS_READ } from '../../ChannelProvider-c6154c45.js';
-import { P as PlaceHolder, a as PlaceHolderTypes } from '../../index-a7f2d8fd.js';
+import { u as useChannelContext, M as MARK_AS_READ } from '../../ChannelProvider-8be62d5d.js';
+import { P as PlaceHolder, a as PlaceHolderTypes } from '../../index-cb6348b0.js';
 import ConnectionStatus from '../../ui/ConnectionStatus.js';
 import ChannelHeader from './ChannelHeader.js';
 import MessageList from './MessageList.js';
@@ -10,42 +10,46 @@ import FrozenNotification from './FrozenNotification.js';
 import UnreadCount from './UnreadCount.js';
 import MessageInputWrapper from './MessageInput.js';
 import '../../withSendbird.js';
-import '../../_rollupPluginBabelHelpers-cdd0b511.js';
-import '../../UserProfileContext-5678a04f.js';
+import '../../_rollupPluginBabelHelpers-636e674b.js';
+import '../../UserProfileContext-749db4f6.js';
 import 'prop-types';
-import '../../index-55e004b6.js';
-import '../../index-5ba44303.js';
-import '../../topics-9580e9ae.js';
-import '../../index-1f08f186.js';
-import '../../tslib.es6-257c9dc0.js';
+import '../../index-4f51d577.js';
+import '../../index-b5b56cb7.js';
+import '../../topics-d2e15fe6.js';
+import '../../index-1a59aaa9.js';
+import '../../tslib.es6-279bc71d.js';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../compareIds-45cb6c7e.js';
-import '../../const-7f0a43cc.js';
+import '../../compareIds-5494c074.js';
+import '../../const-8bb8cc10.js';
 import '@sendbird/chat/groupChannel';
-import '../../uuid-d2ed5e50.js';
+import '../../uuid-636df95b.js';
 import '@sendbird/chat/message';
 import '../../ui/ContextMenu.js';
 import 'react-dom';
 import '../../ui/SortByRow.js';
-import '../../index-e80fbb97.js';
-import '../../stringSet-b9e1e7dc.js';
+import '../../index-4a23e6ff.js';
+import '../../stringSet-f0e25f08.js';
 import '../../ui/ReactionButton.js';
 import '../../ui/ImageRenderer.js';
 import '../../ui/Icon.js';
-import '../../LocalizationContext-8c300642.js';
+import '../../LocalizationContext-5920dafc.js';
 import '../../ui/Loader.js';
+import '../../utils-ad636dfd.js';
 import '../../ui/IconButton.js';
 import '../../ui/ChannelAvatar.js';
 import '../../ui/Avatar.js';
-import '../../utils-63ed383e.js';
-import '../../MediaQueryContext-fbda8d54.js';
-import '../../utils-f9a93d9a.js';
-import '../../index-d993e454.js';
+import '../../utils-afd23bb8.js';
+import '../../MediaQueryContext-9c1bb79f.js';
+import '../../utils-5a4995e3.js';
+import '../../index-8b94db1e.js';
 import './Message.js';
 import './SuggestedMentionList.js';
-import '../../const-97f4dcf4.js';
+import '../../const-2aae43f2.js';
+import '../../ThreadProvider-4640c6fb.js';
+import '../../Thread/context/types.js';
+import '@sendbird/chat';
 import '../../ui/DateSeparator.js';
-import '../../color-baff39e6.js';
+import '../../color-253fcdc4.js';
 import '../../ui/MessageInput.js';
 import 'react-dom/server';
 import '../../ui/Button.js';
@@ -71,9 +75,10 @@ import '../../ui/ThumbnailMessageItemBody.js';
 import '../../ui/OGMessageItemBody.js';
 import '../../ui/UnknownMessageItemBody.js';
 import '../../ui/QuoteMessage.js';
-import '../../useLongPress-471668c2.js';
+import '../../useLongPress-53f7929a.js';
 import '../../ui/BottomSheet.js';
-import '../../index-b0bfb86e.js';
+import '../../index-d2dd3ae2.js';
+import '../../ui/ThreadReplies.js';
 import './FileViewer.js';
 import './RemoveMessageModal.js';
 import '../../ui/Modal.js';

package/Channel/components/ChannelUI.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelUI.js","sources":["../../../src/smart-components/Channel/components/ChannelUI/index.tsx"],"sourcesContent":["import './channel-ui.scss';\n\nimport React, { useEffect, useState } from 'react';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\n\nimport { useChannelContext } from '../../context/ChannelProvider';\nimport PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';\nimport ConnectionStatus from '../../../../ui/ConnectionStatus';\nimport ChannelHeader from '../ChannelHeader';\nimport MessageList from '../MessageList';\nimport TypingIndicator from '../TypingIndicator';\nimport FrozenNotification from '../FrozenNotification';\nimport UnreadCount from '../UnreadCount';\nimport MessageInputWrapper from '../MessageInput';\nimport { RenderCustomSeparatorProps, RenderMessageProps } from '../../../../types';\nimport * as messageActionTypes from '../../context/dux/actionTypes';\n\nexport interface ChannelUIProps {\n  isLoading?: boolean;\n  renderPlaceholderLoader?: () => React.ReactElement;\n  renderPlaceholderInvalid?: () => React.ReactElement;\n  renderPlaceholderEmpty?: () => React.ReactElement;\n  renderChannelHeader?: () => React.ReactElement;\n  renderMessage?: (props: RenderMessageProps) => React.ReactElement;\n  renderMessageInput?: () => React.ReactElement;\n  renderTypingIndicator?: () => React.ReactElement;\n  renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;\n}\n\nconst ChannelUI: React.FC<ChannelUIProps> = ({\n  isLoading,\n  renderPlaceholderLoader,\n  renderPlaceholderInvalid,\n  renderPlaceholderEmpty,\n  renderChannelHeader,\n  renderMessage,\n  renderMessageInput,\n  renderTypingIndicator,\n  renderCustomSeparator,\n}: ChannelUIProps) => {\n  const {\n    currentGroupChannel,\n    channelUrl,\n    isInvalid,\n    unreadSince,\n    loading,\n    setInitialTimeStamp,\n    setAnimatedMessageId,\n    setHighLightedMessageId,\n    scrollRef,\n    messagesDispatcher,\n    disableMarkAsRead,\n  } = useChannelContext();\n  const [unreadCount, setUnreadCount] = useState(0);\n  useEffect(() => {\n    // simple debounce to avoid flicker of UnreadCount badge\n    const handler = setTimeout(() => {\n      setUnreadCount(currentGroupChannel?.unreadMessageCount);\n    }, 1000);\n    return () => {\n      clearTimeout(handler);\n    }\n  }, [currentGroupChannel?.unreadMessageCount]);\n  const globalStore = useSendbirdStateContext();\n  const sdkError = globalStore?.stores?.sdkStore?.error;\n  const logger = globalStore?.config?.logger;\n  const isOnline = globalStore?.config?.isOnline;\n\n  if (isLoading) {\n    return (<div className=\"sendbird-conversation\">\n      {\n        renderPlaceholderLoader?.() || (\n          <PlaceHolder type={PlaceHolderTypes.LOADING} />\n        )\n      }\n    </div>);\n  }\n\n  if (!channelUrl) {\n    return (<div className=\"sendbird-conversation\">\n      {\n        renderPlaceholderInvalid?.() || (\n          <PlaceHolder type={PlaceHolderTypes.NO_CHANNELS} />\n        )\n      }\n    </div>);\n  }\n  if (isInvalid) {\n    return (\n      <div className=\"sendbird-conversation\">\n        {\n          renderPlaceholderInvalid?.() || (\n            <PlaceHolder type={PlaceHolderTypes.WRONG} />\n          )\n        }\n      </div>\n    );\n  }\n  if (sdkError) {\n    return (\n      <div className=\"sendbird-conversation\">\n        {\n          renderPlaceholderInvalid?.() || (\n            <PlaceHolder\n              type={PlaceHolderTypes.WRONG}\n              retryToConnect={() => {\n                logger.info('Channel: reconnecting');\n                // reconnect();\n              }}\n            />\n          )\n        }\n      </div>\n    );\n  }\n  return (\n    <div className='sendbird-conversation'>\n      {\n        renderChannelHeader?.() || (\n          <ChannelHeader />\n        )\n      }\n      {\n        currentGroupChannel?.isFrozen && (\n          <FrozenNotification />\n        )\n      }\n      {\n        unreadCount > 0 && (\n          <UnreadCount\n            count={unreadCount}\n            time={unreadSince}\n            onClick={() => {\n              setUnreadCount(0);\n              if (scrollRef?.current?.scrollTop) {\n                scrollRef.current.scrollTop = scrollRef?.current?.scrollHeight - scrollRef?.current?.offsetHeight;\n              }\n              if (!disableMarkAsRead) {\n                try {\n                  currentGroupChannel?.markAsRead();\n                } catch {\n                  //\n                }\n                messagesDispatcher({\n                  type: messageActionTypes.MARK_AS_READ,\n                  payload: { channel: currentGroupChannel },\n                });\n              }\n              setInitialTimeStamp(null);\n              setAnimatedMessageId(null);\n              setHighLightedMessageId(null);\n            }}\n          />\n        )\n      }\n      {\n        loading\n          ? (\n            <div className=\"sendbird-conversation\">\n              {\n                renderPlaceholderLoader?.() || (\n                  <PlaceHolder type={PlaceHolderTypes.LOADING} />\n                )\n              }\n            </div>\n          ) : (\n            <MessageList\n              renderMessage={renderMessage}\n              renderPlaceholderEmpty={renderPlaceholderEmpty}\n              renderCustomSeparator={renderCustomSeparator}\n            />\n          )\n      }\n      <div className=\"sendbird-conversation__footer\">\n        {\n          renderMessageInput?.() || (\n            <MessageInputWrapper />\n          )\n        }\n        <div className=\"sendbird-conversation__footer__typing-indicator\">\n          {\n            renderTypingIndicator?.() || (\n              <TypingIndicator />\n            )\n          }\n          {\n            !isOnline && (\n              <ConnectionStatus />\n            )\n          }\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default ChannelUI;\n"],"names":["ChannelUI","_a","isLoading","renderPlaceholderLoader","renderPlaceholderInvalid","renderPlaceholderEmpty","renderChannelHeader","renderMessage","renderMessageInput","renderTypingIndicator","renderCustomSeparator","_f","useChannelContext","currentGroupChannel","channelUrl","isInvalid","unreadSince","loading","setInitialTimeStamp","setAnimatedMessageId","setHighLightedMessageId","scrollRef","messagesDispatcher","disableMarkAsRead","_g","useState","unreadCount","setUnreadCount","useEffect","handler","setTimeout","unreadMessageCount","clearTimeout","globalStore","useSendbirdStateContext","sdkError","_c","_b","stores","sdkStore","error","logger","_d","config","isOnline","_e","React","PlaceHolderTypes","LOADING","NO_CHANNELS","WRONG","info","isFrozen","current","scrollTop","scrollHeight","offsetHeight","markAsRead","type","messageActionTypes","payload","channel"],"mappings":"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"}
+{"version":3,"file":"ChannelUI.js","sources":["../../../src/smart-components/Channel/components/ChannelUI/index.tsx"],"sourcesContent":["import './channel-ui.scss';\n\nimport React, { useEffect, useState } from 'react';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\n\nimport { useChannelContext } from '../../context/ChannelProvider';\nimport PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';\nimport ConnectionStatus from '../../../../ui/ConnectionStatus';\nimport ChannelHeader from '../ChannelHeader';\nimport MessageList from '../MessageList';\nimport TypingIndicator from '../TypingIndicator';\nimport FrozenNotification from '../FrozenNotification';\nimport UnreadCount from '../UnreadCount';\nimport MessageInputWrapper from '../MessageInput';\nimport { RenderCustomSeparatorProps, RenderMessageProps } from '../../../../types';\nimport * as messageActionTypes from '../../context/dux/actionTypes';\n\nexport interface ChannelUIProps {\n  isLoading?: boolean;\n  renderPlaceholderLoader?: () => React.ReactElement;\n  renderPlaceholderInvalid?: () => React.ReactElement;\n  renderPlaceholderEmpty?: () => React.ReactElement;\n  renderChannelHeader?: () => React.ReactElement;\n  renderMessage?: (props: RenderMessageProps) => React.ReactElement;\n  renderMessageInput?: () => React.ReactElement;\n  renderTypingIndicator?: () => React.ReactElement;\n  renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;\n}\n\nconst ChannelUI: React.FC<ChannelUIProps> = ({\n  isLoading,\n  renderPlaceholderLoader,\n  renderPlaceholderInvalid,\n  renderPlaceholderEmpty,\n  renderChannelHeader,\n  renderMessage,\n  renderMessageInput,\n  renderTypingIndicator,\n  renderCustomSeparator,\n}: ChannelUIProps) => {\n  const {\n    currentGroupChannel,\n    channelUrl,\n    isInvalid,\n    unreadSince,\n    loading,\n    setInitialTimeStamp,\n    setAnimatedMessageId,\n    setHighLightedMessageId,\n    scrollRef,\n    messagesDispatcher,\n    disableMarkAsRead,\n  } = useChannelContext();\n  const [unreadCount, setUnreadCount] = useState(0);\n  useEffect(() => {\n    // simple debounce to avoid flicker of UnreadCount badge\n    const handler = setTimeout(() => {\n      setUnreadCount(currentGroupChannel?.unreadMessageCount);\n    }, 1000);\n    return () => {\n      clearTimeout(handler);\n    }\n  }, [currentGroupChannel?.unreadMessageCount]);\n  const globalStore = useSendbirdStateContext();\n  const sdkError = globalStore?.stores?.sdkStore?.error;\n  const logger = globalStore?.config?.logger;\n  const isOnline = globalStore?.config?.isOnline;\n\n  if (isLoading) {\n    return (<div className=\"sendbird-conversation\">\n      {\n        renderPlaceholderLoader?.() || (\n          <PlaceHolder type={PlaceHolderTypes.LOADING} />\n        )\n      }\n    </div>);\n  }\n\n  if (!channelUrl) {\n    return (<div className=\"sendbird-conversation\">\n      {\n        renderPlaceholderInvalid?.() || (\n          <PlaceHolder type={PlaceHolderTypes.NO_CHANNELS} />\n        )\n      }\n    </div>);\n  }\n  if (isInvalid) {\n    return (\n      <div className=\"sendbird-conversation\">\n        {\n          renderPlaceholderInvalid?.() || (\n            <PlaceHolder type={PlaceHolderTypes.WRONG} />\n          )\n        }\n      </div>\n    );\n  }\n  if (sdkError) {\n    return (\n      <div className=\"sendbird-conversation\">\n        {\n          renderPlaceholderInvalid?.() || (\n            <PlaceHolder\n              type={PlaceHolderTypes.WRONG}\n              retryToConnect={() => {\n                logger.info('Channel: reconnecting');\n                // reconnect();\n              }}\n            />\n          )\n        }\n      </div>\n    );\n  }\n  return (\n    <div className='sendbird-conversation'>\n      {\n        renderChannelHeader?.() || (\n          <ChannelHeader />\n        )\n      }\n      {\n        currentGroupChannel?.isFrozen && (\n          <FrozenNotification />\n        )\n      }\n      {\n        unreadCount > 0 && (\n          <UnreadCount\n            count={unreadCount}\n            time={unreadSince}\n            onClick={() => {\n              setUnreadCount(0);\n              if (scrollRef?.current?.scrollTop) {\n                scrollRef.current.scrollTop = scrollRef?.current?.scrollHeight - scrollRef?.current?.offsetHeight;\n              }\n              if (!disableMarkAsRead) {\n                try {\n                  currentGroupChannel?.markAsRead();\n                } catch {\n                  //\n                }\n                messagesDispatcher({\n                  type: messageActionTypes.MARK_AS_READ,\n                  payload: { channel: currentGroupChannel },\n                });\n              }\n              setInitialTimeStamp(null);\n              setAnimatedMessageId(null);\n              setHighLightedMessageId(null);\n            }}\n          />\n        )\n      }\n      {\n        loading\n          ? (\n            <div className=\"sendbird-conversation\">\n              {\n                renderPlaceholderLoader?.() || (\n                  <PlaceHolder type={PlaceHolderTypes.LOADING} />\n                )\n              }\n            </div>\n          ) : (\n            <MessageList\n              renderMessage={renderMessage}\n              renderPlaceholderEmpty={renderPlaceholderEmpty}\n              renderCustomSeparator={renderCustomSeparator}\n            />\n          )\n      }\n      <div className=\"sendbird-conversation__footer\">\n        {\n          renderMessageInput?.() || (\n            <MessageInputWrapper />\n          )\n        }\n        <div className=\"sendbird-conversation__footer__typing-indicator\">\n          {\n            renderTypingIndicator?.() || (\n              <TypingIndicator />\n            )\n          }\n          {\n            !isOnline && (\n              <ConnectionStatus />\n            )\n          }\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default ChannelUI;\n"],"names":["ChannelUI","_a","isLoading","renderPlaceholderLoader","renderPlaceholderInvalid","renderPlaceholderEmpty","renderChannelHeader","renderMessage","renderMessageInput","renderTypingIndicator","renderCustomSeparator","_f","useChannelContext","currentGroupChannel","channelUrl","isInvalid","unreadSince","loading","setInitialTimeStamp","setAnimatedMessageId","setHighLightedMessageId","scrollRef","messagesDispatcher","disableMarkAsRead","_g","useState","unreadCount","setUnreadCount","useEffect","handler","setTimeout","unreadMessageCount","clearTimeout","globalStore","useSendbirdStateContext","sdkError","_c","_b","stores","sdkStore","error","logger","_d","config","isOnline","_e","React","PlaceHolderTypes","LOADING","NO_CHANNELS","WRONG","info","isFrozen","current","scrollTop","scrollHeight","offsetHeight","markAsRead","type","messageActionTypes","payload","channel"],"mappings":"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"}

package/Channel/components/FileViewer.js

@@ -1,26 +1,26 @@
 import React__default from 'react';
 import { createPortal } from 'react-dom';
 import Avatar from '../../ui/Avatar.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-e80fbb97.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-4a23e6ff.js';
 import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
-import { M as MODAL_ROOT } from '../../index-b0bfb86e.js';
-import { D as isSupportedFileView, E as isVideo, F as isImage } from '../../index-1f08f186.js';
+import { M as MODAL_ROOT } from '../../index-d2dd3ae2.js';
+import { D as isSupportedFileView, E as isVideo, F as isImage } from '../../index-1a59aaa9.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import { u as useChannelContext } from '../../ChannelProvider-c6154c45.js';
-import '../../tslib.es6-257c9dc0.js';
+import { u as useChannelContext } from '../../ChannelProvider-8be62d5d.js';
+import '../../tslib.es6-279bc71d.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-d2ed5e50.js';
+import '../../uuid-636df95b.js';
 import 'prop-types';
-import '../../stringSet-b9e1e7dc.js';
+import '../../stringSet-f0e25f08.js';
 import '../../utils/message/getOutgoingMessageState.js';
 import '../../withSendbird.js';
-import '../../_rollupPluginBabelHelpers-cdd0b511.js';
-import '../../UserProfileContext-5678a04f.js';
-import '../../index-55e004b6.js';
-import '../../index-5ba44303.js';
-import '../../topics-9580e9ae.js';
-import '../../compareIds-45cb6c7e.js';
-import '../../const-7f0a43cc.js';
+import '../../_rollupPluginBabelHelpers-636e674b.js';
+import '../../UserProfileContext-749db4f6.js';
+import '../../index-4f51d577.js';
+import '../../index-b5b56cb7.js';
+import '../../topics-d2e15fe6.js';
+import '../../compareIds-5494c074.js';
+import '../../const-8bb8cc10.js';
 import '@sendbird/chat/groupChannel';
 import '@sendbird/chat/message';
 import '../../ui/ContextMenu.js';

package/Channel/components/FrozenNotification.js

@@ -1,8 +1,8 @@
 import React__default, { useContext } from 'react';
-import { a as LocalizationContext } from '../../LocalizationContext-8c300642.js';
-import { L as Label, a as LabelTypography } from '../../index-e80fbb97.js';
-import '../../stringSet-b9e1e7dc.js';
-import '../../index-5ba44303.js';
+import { a as LocalizationContext } from '../../LocalizationContext-5920dafc.js';
+import { L as Label, a as LabelTypography } from '../../index-4a23e6ff.js';
+import '../../stringSet-f0e25f08.js';
+import '../../index-b5b56cb7.js';
 import 'prop-types';
 
 var FrozenNotification = function () {

package/Channel/components/Message.js

@@ -1,46 +1,49 @@
-import { a as __spreadArray } from '../../tslib.es6-257c9dc0.js';
+import { a as __spreadArray } from '../../tslib.es6-279bc71d.js';
 import React__default, { useState, useRef, useEffect, useLayoutEffect, useMemo } from 'react';
-import { f as format } from '../../index-55e004b6.js';
+import { f as format } from '../../index-4f51d577.js';
 import SuggestedMentionList from './SuggestedMentionList.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import { u as useChannelContext, a as isDisabledBecauseFrozen, b as isDisabledBecauseMuted } from '../../ChannelProvider-c6154c45.js';
-import { h as getClassName } from '../../index-1f08f186.js';
-import { M as MAX_USER_MENTION_COUNT, a as MAX_USER_SUGGESTION_COUNT } from '../../const-7f0a43cc.js';
+import { u as useChannelContext, a as isDisabledBecauseFrozen, b as isDisabledBecauseMuted } from '../../ChannelProvider-8be62d5d.js';
+import { h as getClassName } from '../../index-1a59aaa9.js';
+import { M as MAX_USER_MENTION_COUNT, a as MAX_USER_SUGGESTION_COUNT } from '../../const-8bb8cc10.js';
 import DateSeparator from '../../ui/DateSeparator.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-e80fbb97.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-4a23e6ff.js';
 import MessageInput from '../../ui/MessageInput.js';
 import MessageContent from '../../ui/MessageContent.js';
 import FileViewer from './FileViewer.js';
 import RemoveMessage from './RemoveMessageModal.js';
-import { M as MessageInputKeys } from '../../const-97f4dcf4.js';
-import { u as useLocalization } from '../../LocalizationContext-8c300642.js';
-import '../../index-5ba44303.js';
+import { M as MessageInputKeys } from '../../const-2aae43f2.js';
+import { u as useLocalization } from '../../LocalizationContext-5920dafc.js';
+import '../../index-b5b56cb7.js';
 import '../../ui/Icon.js';
 import 'prop-types';
 import '../../ui/Avatar.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-d2ed5e50.js';
-import '../../withSendbird.js';
-import '../../_rollupPluginBabelHelpers-cdd0b511.js';
-import '../../UserProfileContext-5678a04f.js';
-import '../../topics-9580e9ae.js';
+import '../../uuid-636df95b.js';
+import '../../ThreadProvider-4640c6fb.js';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../compareIds-45cb6c7e.js';
+import '../../UserProfileContext-749db4f6.js';
+import '../../Thread/context/types.js';
+import '@sendbird/chat';
+import '../../topics-d2e15fe6.js';
 import '@sendbird/chat/groupChannel';
 import '@sendbird/chat/message';
+import '../../withSendbird.js';
+import '../../_rollupPluginBabelHelpers-636e674b.js';
+import '../../compareIds-5494c074.js';
 import '../../ui/ContextMenu.js';
 import 'react-dom';
 import '../../ui/SortByRow.js';
-import '../../stringSet-b9e1e7dc.js';
+import '../../stringSet-f0e25f08.js';
 import '../../ui/ReactionButton.js';
-import '../../color-baff39e6.js';
+import '../../color-253fcdc4.js';
 import 'react-dom/server';
 import '../../ui/IconButton.js';
 import '../../ui/Button.js';
 import '../../ui/MentionUserLabel.js';
 import '../../ui/UserProfile.js';
 import '../../sendbirdSelectors.js';
-import '../../utils-f9a93d9a.js';
+import '../../utils-5a4995e3.js';
 import '../../ui/MessageStatus.js';
 import '../../ui/Loader.js';
 import '../../ui/MessageItemMenu.js';
@@ -56,14 +59,15 @@ import '../../ui/LinkLabel.js';
 import '../../ui/MentionLabel.js';
 import '../../ui/FileMessageItemBody.js';
 import '../../ui/TextButton.js';
-import '../../MediaQueryContext-fbda8d54.js';
+import '../../MediaQueryContext-9c1bb79f.js';
 import '../../ui/ThumbnailMessageItemBody.js';
 import '../../ui/OGMessageItemBody.js';
 import '../../ui/UnknownMessageItemBody.js';
 import '../../ui/QuoteMessage.js';
-import '../../useLongPress-471668c2.js';
+import '../../useLongPress-53f7929a.js';
 import '../../ui/BottomSheet.js';
-import '../../index-b0bfb86e.js';
+import '../../index-d2dd3ae2.js';
+import '../../ui/ThreadReplies.js';
 import '../../ui/Modal.js';
 
 var Message = function (props) {
@@ -100,13 +104,18 @@ var Message = function (props) {
       updateMessage = _d.updateMessage,
       scrollToMessage = _d.scrollToMessage,
       replyType = _d.replyType,
+      threadReplySelectType = _d.threadReplySelectType,
       isReactionEnabled = _d.isReactionEnabled,
       toggleReaction = _d.toggleReaction,
       emojiContainer = _d.emojiContainer,
       nicknamesMap = _d.nicknamesMap,
       setQuoteMessage = _d.setQuoteMessage,
       resendMessage = _d.resendMessage,
-      renderUserMentionItem = _d.renderUserMentionItem;
+      renderUserMentionItem = _d.renderUserMentionItem,
+      onReplyInThread = _d.onReplyInThread,
+      onQuoteMessageClick = _d.onQuoteMessageClick,
+      onMessageAnimated = _d.onMessageAnimated,
+      onMessageHighlighted = _d.onMessageHighlighted;
 
   var _e = useState(false),
       showEdit = _e[0],
@@ -196,6 +205,7 @@ var Message = function (props) {
         }, 500);
         setTimeout(function () {
           setHighLightedMessageId(0);
+          onMessageHighlighted === null || onMessageHighlighted === void 0 ? void 0 : onMessageHighlighted();
         }, 1600);
       }
     } else {
@@ -215,12 +225,13 @@ var Message = function (props) {
         }, 500);
         setTimeout(function () {
           setAnimatedMessageId(0);
+          onMessageAnimated === null || onMessageAnimated === void 0 ? void 0 : onMessageAnimated();
         }, 1600);
       }
     } else {
       setIsAnimated(false);
     }
-  }, [animatedMessageId, useMessageScrollRef.current, message.messageId]);
+  }, [animatedMessageId, useMessageScrollRef.current, message.messageId, onMessageAnimated]);
   var renderedMessage = useMemo(function () {
     return renderMessage === null || renderMessage === void 0 ? void 0 : renderMessage({
       message: message,
@@ -281,7 +292,14 @@ var Message = function (props) {
       mentionSelectedUser: selectedUser,
       isMentionEnabled: isMentionEnabled,
       message: message,
+      onStartTyping: function () {
+        var _a;
+
+        (_a = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.startTyping) === null || _a === void 0 ? void 0 : _a.call(currentGroupChannel);
+      },
       onUpdateMessage: function (_a) {
+        var _b;
+
         var messageId = _a.messageId,
             message = _a.message,
             mentionTemplate = _a.mentionTemplate;
@@ -292,13 +310,17 @@ var Message = function (props) {
           mentionTemplate: mentionTemplate
         });
         setShowEdit(false);
+        (_b = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.endTyping) === null || _b === void 0 ? void 0 : _b.call(currentGroupChannel);
       },
       onCancelEdit: function () {
+        var _a;
+
         setMentionNickname('');
         setMentionedUsers([]);
         setMentionedUserIds([]);
         setMentionSuggestedUsers([]);
         setShowEdit(false);
+        (_a = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.endTyping) === null || _a === void 0 ? void 0 : _a.call(currentGroupChannel);
       },
       onUserMentioned: function (user) {
         if ((selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userId) === (user === null || user === void 0 ? void 0 : user.userId)) {
@@ -345,6 +367,7 @@ var Message = function (props) {
     chainBottom: chainBottom,
     isReactionEnabled: isReactionEnabled,
     replyType: replyType,
+    threadReplySelectType: threadReplySelectType,
     nicknamesMap: nicknamesMap,
     emojiContainer: emojiContainer,
     showEdit: setShowEdit,
@@ -352,7 +375,9 @@ var Message = function (props) {
     showFileViewer: setShowFileViewer,
     resendMessage: resendMessage,
     toggleReaction: toggleReaction,
-    setQuoteMessage: setQuoteMessage
+    setQuoteMessage: setQuoteMessage,
+    onReplyInThread: onReplyInThread,
+    onQuoteMessageClick: onQuoteMessageClick
   }), showRemove && /*#__PURE__*/React__default.createElement(RemoveMessage, {
     message: message,
     onCancel: function () {