@sendbird/uikit-react 3.0.0-beta → 3.0.0-beta.2

package/App.js

@@ -1,4 +1,4 @@
-import { a as _slicedToArray } from './_rollupPluginBabelHelpers-20904f21.js';
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-8e4fae98.js';
 import React__default, { useState } from 'react';
 import PropTypes from 'prop-types';
 import Sendbird from './SendbirdProvider.js';
@@ -8,22 +8,22 @@ import ChannelSettings from './ChannelSettings.js';
 import MessageSearchPannel from './MessageSearch.js';
 import './withSendBird.js';
 import 'sendbird';
-import './actionTypes-1e3a4074.js';
-import './index-8c72a94a.js';
-import './tslib.es6-e3c44017.js';
+import './actionTypes-189daf51.js';
+import './index-ad4c9e58.js';
+import './tslib.es6-83aa13f5.js';
 import 'css-vars-ponyfill';
-import './uuid-b0c93400.js';
-import './LocalizationContext-e4391013.js';
-import './stringSet-4f6eaa60.js';
-import './index-6ebf7894.js';
-import './ChannelListProvider-0b0c2c40.js';
-import './topics-9442035c.js';
-import './utils-c393e880.js';
-import './UserProfileContext-865db5e6.js';
+import './uuid-6d14d007.js';
+import './LocalizationContext-b021af8f.js';
+import './stringSet-91746bf1.js';
+import './index-353f13f3.js';
+import './ChannelListProvider-7c351968.js';
+import './topics-17d99dd6.js';
+import './utils-9ef11656.js';
+import './UserProfileContext-daa99f9b.js';
 import './useSendbirdStateContext.js';
 import './ChannelList/components/ChannelListUI.js';
 import './ChannelList/components/ChannelListHeader.js';
-import './index-7a51bd16.js';
+import './index-a611bd38.js';
 import './ui/IconButton.js';
 import './ui/Avatar.js';
 import './ui/ImageRenderer.js';
@@ -31,13 +31,13 @@ import './ui/Icon.js';
 import './ChannelList/components/AddChannel.js';
 import './CreateChannel.js';
 import './CreateChannel/components/CreateChannelUI.js';
-import './CreateChannelProvider-c617a1bb.js';
+import './CreateChannelProvider-ddfd92e6.js';
 import './sendBirdSelectors.js';
 import './CreateChannel/components/InviteMembers.js';
 import './ui/Modal.js';
 import 'react-dom';
-import './index-942c85a6.js';
-import './index-acebc2ff.js';
+import './index-1fd114b0.js';
+import './index-41a6f4f2.js';
 import './ui/UserListItem.js';
 import './ui/MutedAvatarOverlay.js';
 import './ui/Checkbox.js';
@@ -47,30 +47,36 @@ import './ui/SortByRow.js';
 import './CreateChannel/components/SelectChannelType.js';
 import './ChannelList/components/ChannelPreview.js';
 import './ui/ChannelAvatar.js';
-import './utils-08c4dbdc.js';
+import './utils-7d39b941.js';
 import './ui/Badge.js';
-import './index-1718324d.js';
-import './index-cd21929d.js';
-import './index-770d7112.js';
+import './index-86b0a341.js';
+import './index-f119413c.js';
+import './index-4a59a866.js';
+import './ui/MentionUserLabel.js';
 import './ChannelList/components/ChannelPreviewAction.js';
 import './EditUserProfile.js';
-import './index-5c2c81bc.js';
+import './index-358226c7.js';
 import './ui/Input.js';
 import './ui/TextButton.js';
-import './color-ee3fc5ee.js';
-import './index-e818a8a3.js';
+import './color-2863fbbe.js';
+import './index-303a3b6e.js';
 import './ui/Loader.js';
-import './ChannelProvider-459e463f.js';
-import './compareIds-808956f2.js';
+import './ChannelProvider-d5126903.js';
+import './compareIds-48d87cc5.js';
+import './const-3f63e129.js';
 import './ui/ReactionButton.js';
 import './Channel/components/ChannelUI.js';
 import './ui/ConnectionStatus.js';
 import './Channel/components/ChannelHeader.js';
 import './Channel/components/MessageList.js';
 import './Channel/components/Message.js';
+import './Channel/components/SuggestedMentionList.js';
+import './const-09c22c50.js';
 import './ui/DateSeparator.js';
 import './ui/MessageInput.js';
+import 'stream';
 import './ui/MessageContent.js';
+import './ui/MessageStatus.js';
 import './ui/MessageItemMenu.js';
 import './ui/MessageItemReactionMenu.js';
 import './ui/EmojiReactions.js';
@@ -79,10 +85,11 @@ import './ui/TooltipWrapper.js';
 import './ui/ReactionBadge.js';
 import './ui/AdminMessage.js';
 import './ui/TextMessageItemBody.js';
+import './index-4889e530.js';
+import './ui/LinkLabel.js';
 import './ui/FileMessageItemBody.js';
 import './ui/ThumbnailMessageItemBody.js';
 import './ui/OGMessageItemBody.js';
-import './ui/LinkLabel.js';
 import './ui/UnknownMessageItemBody.js';
 import './ui/QuoteMessage.js';
 import './Channel/components/FileViewer.js';
@@ -99,9 +106,9 @@ import './ChannelSettings/components/EditDetailsModal.js';
 import './ChannelSettings/components/AdminPanel.js';
 import './ui/Accordion.js';
 import './ui/AccordionGroup.js';
-import './context-98ce535c.js';
+import './context-7877e5bb.js';
 import './ChannelSettings/components/UserListItem.js';
-import './MemberList-6655cba0.js';
+import './MemberList-323e7517.js';
 import './ChannelSettings/components/LeaveChannel.js';
 import './ChannelSettings/components/UserPanel.js';
 import './MessageSearch/components/MessageSearchUI.js';
@@ -121,6 +128,7 @@ function App(props) {
       _props$config = props.config,
       config = _props$config === void 0 ? {} : _props$config,
       useReaction = props.useReaction,
+      isMentionEnabled = props.isMentionEnabled,
       replyType = props.replyType,
       useMessageGrouping = props.useMessageGrouping,
       colorSet = props.colorSet,
@@ -173,7 +181,8 @@ function App(props) {
     disableUserProfile: disableUserProfile,
     renderUserProfile: renderUserProfile,
     imageCompression: imageCompression,
-    useReaction: useReaction
+    useReaction: useReaction,
+    isMentionEnabled: isMentionEnabled
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-app__wrap"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -266,7 +275,8 @@ App.propTypes = {
     resizingWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     resizingHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   }),
-  disableAutoSelect: PropTypes.bool
+  disableAutoSelect: PropTypes.bool,
+  isMentionEnabled: PropTypes.bool
 };
 App.defaultProps = {
   accessToken: '',
@@ -282,6 +292,7 @@ App.defaultProps = {
   renderUserProfile: null,
   config: {},
   useReaction: true,
+  isMentionEnabled: false,
   replyType: 'NONE',
   useMessageGrouping: true,
   stringSet: null,

package/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sources":["../src/smart-components/App/index.jsx"],"sourcesContent":["/**\n * This is a drop in Chat solution\n * Can also be used as an example for creating\n * default chat apps\n */\nimport React, { useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Sendbird from '../../lib/Sendbird';\n\nimport ChannelList from '../ChannelList';\nimport Channel from '../Channel';\nimport ChannelSettings from '../ChannelSettings';\nimport MessageSearchPannel from '../MessageSearch';\n\nimport './index.scss';\n\nexport default function App(props) {\n  const {\n    appId,\n    userId,\n    accessToken,\n    theme,\n    userListQuery,\n    nickname,\n    profileUrl,\n    dateLocale,\n    config = {},\n    useReaction,\n    replyType,\n    useMessageGrouping,\n    colorSet,\n    stringSet,\n    allowProfileEdit,\n    disableUserProfile,\n    renderUserProfile,\n    showSearchIcon,\n    onProfileEditSuccess,\n    imageCompression,\n    disableAutoSelect,\n  } = props;\n  const [currentChannelUrl, setCurrentChannelUrl] = useState(null);\n  const [showSettings, setShowSettings] = useState(false);\n  const [showSearch, setShowSearch] = useState(false);\n  const [highlightedMessage, setHighlightedMessage] = useState(null);\n  const [startingPoint, setStartingPoint] = useState(null);\n\n  return (\n    <Sendbird\n      stringSet={stringSet}\n      appId={appId}\n      userId={userId}\n      accessToken={accessToken}\n      theme={theme}\n      nickname={nickname}\n      profileUrl={profileUrl}\n      dateLocale={dateLocale}\n      userListQuery={userListQuery}\n      config={config}\n      colorSet={colorSet}\n      disableUserProfile={disableUserProfile}\n      renderUserProfile={renderUserProfile}\n      imageCompression={imageCompression}\n      useReaction={useReaction}\n    >\n      <div className=\"sendbird-app__wrap\">\n        <div className=\"sendbird-app__channellist-wrap\">\n          <ChannelList\n            allowProfileEdit={allowProfileEdit}\n            onProfileEditSuccess={onProfileEditSuccess}\n            disableAutoSelect={disableAutoSelect}\n            onChannelSelect={(channel) => {\n              setStartingPoint(null);\n              setHighlightedMessage(null);\n              if (channel && channel.url) {\n                setCurrentChannelUrl(channel.url);\n              } else {\n                setCurrentChannelUrl('');\n              }\n            }}\n          />\n        </div>\n        <div\n          className={`\n            ${showSettings ? 'sendbird-app__conversation--settings-open' : ''}\n            ${showSearch ? 'sendbird-app__conversation--search-open' : ''}\n            sendbird-app__conversation-wrap\n          `}\n        >\n          <Channel\n            channelUrl={currentChannelUrl}\n            onChatHeaderActionClick={() => {\n              setShowSearch(false);\n              setShowSettings(!showSettings);\n            }}\n            onSearchClick={() => {\n              setShowSettings(false);\n              setShowSearch(!showSearch);\n            }}\n            showSearchIcon={showSearchIcon}\n            startingPoint={startingPoint}\n            highlightedMessage={highlightedMessage}\n            useReaction={useReaction}\n            replyType={replyType}\n            useMessageGrouping={useMessageGrouping}\n          />\n        </div>\n        {showSettings && (\n          <div className=\"sendbird-app__settingspanel-wrap\">\n            <ChannelSettings\n              className=\"sendbird-channel-settings\"\n              channelUrl={currentChannelUrl}\n              onCloseClick={() => {\n                setShowSettings(false);\n              }}\n            />\n          </div>\n        )}\n        {showSearch && (\n          <div className=\"sendbird-app__searchpanel-wrap\">\n            <MessageSearchPannel\n              channelUrl={currentChannelUrl}\n              onResultClick={(message) => {\n                if (message.messageId === highlightedMessage) {\n                  setHighlightedMessage(null);\n                  setTimeout(() => {\n                    setHighlightedMessage(message.messageId);\n                  });\n                } else {\n                  setStartingPoint(message.createdAt);\n                  setHighlightedMessage(message.messageId);\n                }\n              }}\n              onCloseClick={() => {\n                setShowSearch(false);\n              }}\n            />\n          </div>\n        )}\n      </div>\n    </Sendbird>\n  );\n}\n\nApp.propTypes = {\n  appId: PropTypes.string.isRequired,\n  userId: PropTypes.string.isRequired,\n  accessToken: PropTypes.string,\n  theme: PropTypes.string,\n  userListQuery: PropTypes.func,\n  nickname: PropTypes.string,\n  profileUrl: PropTypes.string,\n  allowProfileEdit: PropTypes.bool,\n  disableUserProfile: PropTypes.bool,\n  renderUserProfile: PropTypes.func,\n  onProfileEditSuccess: PropTypes.func,\n  dateLocale: PropTypes.shape({}),\n  config: PropTypes.shape({\n    // None Error Warning Info 'All/Debug'\n    logLevel: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.arrayOf(PropTypes.string),\n    ]),\n  }),\n  useReaction: PropTypes.bool,\n  replyType: PropTypes.oneOf(['NONE', 'QUOTE_REPLY', 'THREAD']),\n  showSearchIcon: PropTypes.bool,\n  useMessageGrouping: PropTypes.bool,\n  stringSet: PropTypes.objectOf(PropTypes.string),\n  colorSet: PropTypes.objectOf(PropTypes.string),\n  imageCompression: PropTypes.shape({\n    compressionRate: PropTypes.number,\n    resizingWidth: PropTypes.oneOfType([\n      PropTypes.number,\n      PropTypes.string,\n    ]),\n    resizingHeight: PropTypes.oneOfType([\n      PropTypes.number,\n      PropTypes.string,\n    ]),\n  }),\n  disableAutoSelect: PropTypes.bool,\n};\n\nApp.defaultProps = {\n  accessToken: '',\n  theme: 'light',\n  nickname: '',\n  profileUrl: '',\n  userListQuery: null,\n  dateLocale: null,\n  allowProfileEdit: false,\n  onProfileEditSuccess: null,\n  disableUserProfile: false,\n  showSearchIcon: false,\n  renderUserProfile: null,\n  config: {},\n  useReaction: true,\n  replyType: 'NONE',\n  useMessageGrouping: true,\n  stringSet: null,\n  colorSet: null,\n  imageCompression: {},\n  disableAutoSelect: false,\n};\n"],"names":["App","props","appId","userId","accessToken","theme","userListQuery","nickname","profileUrl","dateLocale","config","useReaction","replyType","useMessageGrouping","colorSet","stringSet","allowProfileEdit","disableUserProfile","renderUserProfile","showSearchIcon","onProfileEditSuccess","imageCompression","disableAutoSelect","useState","currentChannelUrl","setCurrentChannelUrl","showSettings","setShowSettings","showSearch","setShowSearch","highlightedMessage","setHighlightedMessage","startingPoint","setStartingPoint","React","channel","url","message","messageId","setTimeout","createdAt","propTypes","PropTypes","string","isRequired","func","bool","shape","logLevel","oneOfType","arrayOf","oneOf","objectOf","compressionRate","number","resizingWidth","resizingHeight","defaultProps"],"mappings":"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"}
+{"version":3,"file":"App.js","sources":["../src/smart-components/App/index.jsx"],"sourcesContent":["/**\n * This is a drop in Chat solution\n * Can also be used as an example for creating\n * default chat apps\n */\nimport React, { useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Sendbird from '../../lib/Sendbird';\n\nimport ChannelList from '../ChannelList';\nimport Channel from '../Channel';\nimport ChannelSettings from '../ChannelSettings';\nimport MessageSearchPannel from '../MessageSearch';\n\nimport './index.scss';\n\nexport default function App(props) {\n  const {\n    appId,\n    userId,\n    accessToken,\n    theme,\n    userListQuery,\n    nickname,\n    profileUrl,\n    dateLocale,\n    config = {},\n    useReaction,\n    isMentionEnabled,\n    replyType,\n    useMessageGrouping,\n    colorSet,\n    stringSet,\n    allowProfileEdit,\n    disableUserProfile,\n    renderUserProfile,\n    showSearchIcon,\n    onProfileEditSuccess,\n    imageCompression,\n    disableAutoSelect,\n  } = props;\n  const [currentChannelUrl, setCurrentChannelUrl] = useState(null);\n  const [showSettings, setShowSettings] = useState(false);\n  const [showSearch, setShowSearch] = useState(false);\n  const [highlightedMessage, setHighlightedMessage] = useState(null);\n  const [startingPoint, setStartingPoint] = useState(null);\n\n  return (\n    <Sendbird\n      stringSet={stringSet}\n      appId={appId}\n      userId={userId}\n      accessToken={accessToken}\n      theme={theme}\n      nickname={nickname}\n      profileUrl={profileUrl}\n      dateLocale={dateLocale}\n      userListQuery={userListQuery}\n      config={config}\n      colorSet={colorSet}\n      disableUserProfile={disableUserProfile}\n      renderUserProfile={renderUserProfile}\n      imageCompression={imageCompression}\n      useReaction={useReaction}\n      isMentionEnabled={isMentionEnabled}\n    >\n      <div className=\"sendbird-app__wrap\">\n        <div className=\"sendbird-app__channellist-wrap\">\n          <ChannelList\n            allowProfileEdit={allowProfileEdit}\n            onProfileEditSuccess={onProfileEditSuccess}\n            disableAutoSelect={disableAutoSelect}\n            onChannelSelect={(channel) => {\n              setStartingPoint(null);\n              setHighlightedMessage(null);\n              if (channel && channel.url) {\n                setCurrentChannelUrl(channel.url);\n              } else {\n                setCurrentChannelUrl('');\n              }\n            }}\n          />\n        </div>\n        <div\n          className={`\n            ${showSettings ? 'sendbird-app__conversation--settings-open' : ''}\n            ${showSearch ? 'sendbird-app__conversation--search-open' : ''}\n            sendbird-app__conversation-wrap\n          `}\n        >\n          <Channel\n            channelUrl={currentChannelUrl}\n            onChatHeaderActionClick={() => {\n              setShowSearch(false);\n              setShowSettings(!showSettings);\n            }}\n            onSearchClick={() => {\n              setShowSettings(false);\n              setShowSearch(!showSearch);\n            }}\n            showSearchIcon={showSearchIcon}\n            startingPoint={startingPoint}\n            highlightedMessage={highlightedMessage}\n            useReaction={useReaction}\n            replyType={replyType}\n            useMessageGrouping={useMessageGrouping}\n          />\n        </div>\n        {showSettings && (\n          <div className=\"sendbird-app__settingspanel-wrap\">\n            <ChannelSettings\n              className=\"sendbird-channel-settings\"\n              channelUrl={currentChannelUrl}\n              onCloseClick={() => {\n                setShowSettings(false);\n              }}\n            />\n          </div>\n        )}\n        {showSearch && (\n          <div className=\"sendbird-app__searchpanel-wrap\">\n            <MessageSearchPannel\n              channelUrl={currentChannelUrl}\n              onResultClick={(message) => {\n                if (message.messageId === highlightedMessage) {\n                  setHighlightedMessage(null);\n                  setTimeout(() => {\n                    setHighlightedMessage(message.messageId);\n                  });\n                } else {\n                  setStartingPoint(message.createdAt);\n                  setHighlightedMessage(message.messageId);\n                }\n              }}\n              onCloseClick={() => {\n                setShowSearch(false);\n              }}\n            />\n          </div>\n        )}\n      </div>\n    </Sendbird>\n  );\n}\n\nApp.propTypes = {\n  appId: PropTypes.string.isRequired,\n  userId: PropTypes.string.isRequired,\n  accessToken: PropTypes.string,\n  theme: PropTypes.string,\n  userListQuery: PropTypes.func,\n  nickname: PropTypes.string,\n  profileUrl: PropTypes.string,\n  allowProfileEdit: PropTypes.bool,\n  disableUserProfile: PropTypes.bool,\n  renderUserProfile: PropTypes.func,\n  onProfileEditSuccess: PropTypes.func,\n  dateLocale: PropTypes.shape({}),\n  config: PropTypes.shape({\n    // None Error Warning Info 'All/Debug'\n    logLevel: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.arrayOf(PropTypes.string),\n    ]),\n  }),\n  useReaction: PropTypes.bool,\n  replyType: PropTypes.oneOf(['NONE', 'QUOTE_REPLY', 'THREAD']),\n  showSearchIcon: PropTypes.bool,\n  useMessageGrouping: PropTypes.bool,\n  stringSet: PropTypes.objectOf(PropTypes.string),\n  colorSet: PropTypes.objectOf(PropTypes.string),\n  imageCompression: PropTypes.shape({\n    compressionRate: PropTypes.number,\n    resizingWidth: PropTypes.oneOfType([\n      PropTypes.number,\n      PropTypes.string,\n    ]),\n    resizingHeight: PropTypes.oneOfType([\n      PropTypes.number,\n      PropTypes.string,\n    ]),\n  }),\n  disableAutoSelect: PropTypes.bool,\n  isMentionEnabled: PropTypes.bool,\n};\n\nApp.defaultProps = {\n  accessToken: '',\n  theme: 'light',\n  nickname: '',\n  profileUrl: '',\n  userListQuery: null,\n  dateLocale: null,\n  allowProfileEdit: false,\n  onProfileEditSuccess: null,\n  disableUserProfile: false,\n  showSearchIcon: false,\n  renderUserProfile: null,\n  config: {},\n  useReaction: true,\n  isMentionEnabled: false,\n  replyType: 'NONE',\n  useMessageGrouping: true,\n  stringSet: null,\n  colorSet: null,\n  imageCompression: {},\n  disableAutoSelect: false,\n};\n"],"names":["App","props","appId","userId","accessToken","theme","userListQuery","nickname","profileUrl","dateLocale","config","useReaction","isMentionEnabled","replyType","useMessageGrouping","colorSet","stringSet","allowProfileEdit","disableUserProfile","renderUserProfile","showSearchIcon","onProfileEditSuccess","imageCompression","disableAutoSelect","useState","currentChannelUrl","setCurrentChannelUrl","showSettings","setShowSettings","showSearch","setShowSearch","highlightedMessage","setHighlightedMessage","startingPoint","setStartingPoint","React","channel","url","message","messageId","setTimeout","createdAt","propTypes","PropTypes","string","isRequired","func","bool","shape","logLevel","oneOfType","arrayOf","oneOf","objectOf","compressionRate","number","resizingWidth","resizingHeight","defaultProps"],"mappings":"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"}

package/CHANGELOG.md

@@ -0,0 +1,50 @@
+# Changelog - v3
+
+## [3.0.0-beta.2] (April 29 2022)
+
+Feature:
+* Mention
+  * Add isMentionEnabled props to the <App /> and <SendbirdProvider />
+  * Add userMention into the config props of the <App /> andd <SendbirdProvider />
+    * <SendbirdProvider config={{ userMention: { maxMentionCount: 10, maxSuggestionCount: 15 } }} />
+    * maxMentionCount: A maximum count that you can mention in the message input
+    * maxSuggestionCount: A maximum user count that the SuggestedMentionList suggests for user mention
+  * Create SuggestedMentionList component under the Channel smart component
+    * Create SuggestedUserMentionItem component
+  * Create MentionUserLabel ui component
+  * Add string set
+    * MENTION_NAME__NO_NAME: '(No name)'
+    * MENTION_COUNT__OVER_LIMIT: 'You can mention up to %d times per message.'
+Fix:
+* Type definition file fix for TS project
+For typescript projects, add `node_modules/@sendbird/uikit-react/index.d.ts`
+to your `include` section in tsconfig file to get type definitions
+
+* Move font import to top of CSS file
+Some bundlers such as parcel throw error:
+`@import rules must precede all rules aside from @charset and @layer statements`
+Resolve this issue by moving the line to the top
+
+## [3.0.0-beta] (Apr 12 2022)
+
+This is the official beta for Sendbird UIKit for React version 3!
+
+TLDR -> We split the old `smart-components` into modules which contian context and UI. Context contain logic and UI Components handle UI
+
+**[Check out the v2 to v3 migration guide for details](MIGRATION_v2-to-v3.md)**
+
+Changelog:
+* Package should be installed using `@sendbird/uikit-react`
+* Restructure smart-components into modules that contain a context and related UI components
+* Export these context and UI components to allow fine-grain customization
+* Recommend to use these context elements `useXXXXX()` and react function components to make custom components
+* All generic UI components are available as exports
+* Restrcuture export paths to allow better tree-shaking
+* Example:
+```
+import { useChannel } from '@sendbird/uikit-react/Channel/context';
+import ChannelUI from '@sendbird/uikit-react/Channel/components/ChannelUI';
+```
+* We keep older export patterns to make migration easier
+* Retained modules - ChannelList, Channel, ChannelSettings, OpenChannel, OpenChannelSettings, MessageSearch
+* New modules(not including context and ui of above) - CreateChannel, EditUserProfile, ui

package/Channel/components/ChannelHeader.js

@@ -1,26 +1,27 @@
 import React__default, { useContext } from 'react';
-import { c as LabelStringSet, L as Label, a as LabelTypography, b as LabelColors } from '../../index-7a51bd16.js';
+import { c as LabelStringSet, L as Label, a as LabelTypography, b as LabelColors } from '../../index-a611bd38.js';
 import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
 import IconButton from '../../ui/IconButton.js';
 import ChannelAvatar from '../../ui/ChannelAvatar.js';
-import { a as LocalizationContext } from '../../LocalizationContext-e4391013.js';
+import { a as LocalizationContext } from '../../LocalizationContext-b021af8f.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import { u as useChannel } from '../../ChannelProvider-459e463f.js';
-import '../../_rollupPluginBabelHelpers-20904f21.js';
+import { u as useChannel } from '../../ChannelProvider-d5126903.js';
+import '../../_rollupPluginBabelHelpers-8e4fae98.js';
 import 'prop-types';
-import '../../stringSet-4f6eaa60.js';
+import '../../stringSet-91746bf1.js';
 import '../../ui/Avatar.js';
-import '../../tslib.es6-e3c44017.js';
+import '../../tslib.es6-83aa13f5.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-b0c93400.js';
-import '../../utils-08c4dbdc.js';
-import '../../index-6ebf7894.js';
+import '../../uuid-6d14d007.js';
+import '../../utils-7d39b941.js';
+import '../../index-353f13f3.js';
 import '../../withSendBird.js';
-import '../../UserProfileContext-865db5e6.js';
-import '../../index-770d7112.js';
-import '../../topics-9442035c.js';
-import '../../index-8c72a94a.js';
-import '../../compareIds-808956f2.js';
+import '../../UserProfileContext-daa99f9b.js';
+import '../../index-4a59a866.js';
+import '../../topics-17d99dd6.js';
+import '../../index-ad4c9e58.js';
+import '../../compareIds-48d87cc5.js';
+import '../../const-3f63e129.js';
 import '../../ui/ContextMenu.js';
 import 'react-dom';
 import '../../ui/SortByRow.js';

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 SendBird from 'sendbird';\nimport { LabelStringSet } from '../../../../ui/Label';\n\nexport const getChannelTitle = (\n  channel: SendBird.GroupChannel,\n  currentUserId: string,\n  stringSet: { [label: string]: string }\n  ): string => {\n  const LABEL_STRING_SET: { [label: string]: string } = stringSet || LabelStringSet;\n  if (!channel || (!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 { useChannel } from '../../context/ChannelProvider';\n\nconst ChatHeader: React.FC = () => {\n  const globalStore = useSendbirdStateContext();\n  const userId = globalStore?.config?.userId;\n  const theme = globalStore?.config?.theme;\n\n  const channelStore = useChannel();\n  const {\n    currentGroupChannel,\n    showSearchIcon,\n    onSearchClick,\n    onChatHeaderActionClick,\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        <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 ChatHeader;\n"],"names":["getChannelTitle","channel","currentUserId","stringSet","LABEL_STRING_SET","LabelStringSet","name","members","NO_TITLE","length","NO_MEMBERS","filter","_a","userId","map","nickname","NO_NAME","join","ChatHeader","globalStore","useSendbirdStateContext","config","theme","channelStore","useChannel","currentGroupChannel","showSearchIcon","onSearchClick","onChatHeaderActionClick","subTitle","isMuted","myMutedState","useContext","LocalizationContext","React","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","utils","BODY_1","ONBACKGROUND_2","IconTypes","NOTIFICATIONS_OFF_FILLED","SEARCH","IconColors","PRIMARY","INFO"],"mappings":"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"}
+{"version":3,"file":"ChannelHeader.js","sources":["../../../src/smart-components/Channel/components/ChannelHeader/utils.ts","../../../src/smart-components/Channel/components/ChannelHeader/index.tsx"],"sourcesContent":["import SendBird from 'sendbird';\nimport { LabelStringSet } from '../../../../ui/Label';\n\nexport const getChannelTitle = (\n  channel: SendBird.GroupChannel,\n  currentUserId: string,\n  stringSet: { [label: string]: string }\n  ): string => {\n  const LABEL_STRING_SET: { [label: string]: string } = stringSet || LabelStringSet;\n  if (!channel || (!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 { useChannel } from '../../context/ChannelProvider';\n\nconst ChatHeader: React.FC = () => {\n  const globalStore = useSendbirdStateContext();\n  const userId = globalStore?.config?.userId;\n  const theme = globalStore?.config?.theme;\n\n  const channelStore = useChannel();\n  const {\n    currentGroupChannel,\n    showSearchIcon,\n    onSearchClick,\n    onChatHeaderActionClick,\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        <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 ChatHeader;\n"],"names":["getChannelTitle","channel","currentUserId","stringSet","LABEL_STRING_SET","LabelStringSet","name","members","NO_TITLE","length","NO_MEMBERS","filter","_a","userId","map","nickname","NO_NAME","join","ChatHeader","globalStore","useSendbirdStateContext","config","theme","channelStore","useChannel","currentGroupChannel","showSearchIcon","onSearchClick","onChatHeaderActionClick","subTitle","isMuted","myMutedState","useContext","LocalizationContext","React","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","utils","BODY_1","ONBACKGROUND_2","IconTypes","NOTIFICATIONS_OFF_FILLED","SEARCH","IconColors","PRIMARY","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 useChannel, M as MARK_AS_READ } from '../../ChannelProvider-459e463f.js';
-import { P as PlaceHolder, a as PlaceHolderTypes } from '../../index-e818a8a3.js';
+import { u as useChannel, M as MARK_AS_READ } from '../../ChannelProvider-d5126903.js';
+import { P as PlaceHolder, a as PlaceHolderTypes } from '../../index-303a3b6e.js';
 import ConnectionStatus from '../../ui/ConnectionStatus.js';
 import ChatHeader from './ChannelHeader.js';
 import MessageList from './MessageList.js';
@@ -10,39 +10,45 @@ import FrozenNotification from './FrozenNotification.js';
 import UnreadCount from './UnreadCount.js';
 import MessageInputWrapper from './MessageInput.js';
 import '../../withSendBird.js';
-import '../../_rollupPluginBabelHelpers-20904f21.js';
-import '../../UserProfileContext-865db5e6.js';
+import '../../_rollupPluginBabelHelpers-8e4fae98.js';
+import '../../UserProfileContext-daa99f9b.js';
 import 'prop-types';
-import '../../index-770d7112.js';
-import '../../index-6ebf7894.js';
-import '../../topics-9442035c.js';
-import '../../index-8c72a94a.js';
-import '../../tslib.es6-e3c44017.js';
-import '../../compareIds-808956f2.js';
-import '../../uuid-b0c93400.js';
+import '../../index-4a59a866.js';
+import '../../index-353f13f3.js';
+import '../../topics-17d99dd6.js';
+import '../../index-ad4c9e58.js';
+import '../../tslib.es6-83aa13f5.js';
+import '../../compareIds-48d87cc5.js';
+import '../../const-3f63e129.js';
+import '../../uuid-6d14d007.js';
 import '../../ui/ContextMenu.js';
-import '../../index-7a51bd16.js';
-import '../../stringSet-4f6eaa60.js';
+import '../../index-a611bd38.js';
+import '../../stringSet-91746bf1.js';
 import 'react-dom';
 import '../../ui/SortByRow.js';
 import '../../ui/ReactionButton.js';
 import '../../ui/ImageRenderer.js';
 import '../../ui/Icon.js';
 import '../../ui/Loader.js';
-import '../../LocalizationContext-e4391013.js';
+import '../../LocalizationContext-b021af8f.js';
 import '../../ui/IconButton.js';
 import '../../ui/ChannelAvatar.js';
 import '../../ui/Avatar.js';
-import '../../utils-08c4dbdc.js';
-import '../../index-cd21929d.js';
+import '../../utils-7d39b941.js';
+import '../../index-f119413c.js';
 import './Message.js';
+import './SuggestedMentionList.js';
+import '../../const-09c22c50.js';
 import '../../ui/DateSeparator.js';
-import '../../color-ee3fc5ee.js';
+import '../../color-2863fbbe.js';
 import '../../ui/MessageInput.js';
-import '../../index-acebc2ff.js';
+import 'stream';
+import '../../index-41a6f4f2.js';
+import '../../ui/MentionUserLabel.js';
 import '../../ui/MessageContent.js';
 import '../../ui/UserProfile.js';
 import '../../sendBirdSelectors.js';
+import '../../ui/MessageStatus.js';
 import '../../ui/MessageItemMenu.js';
 import '../../ui/MessageItemReactionMenu.js';
 import '../../ui/EmojiReactions.js';
@@ -51,18 +57,19 @@ import '../../ui/TooltipWrapper.js';
 import '../../ui/ReactionBadge.js';
 import '../../ui/AdminMessage.js';
 import '../../ui/TextMessageItemBody.js';
+import '../../index-4889e530.js';
+import '../../ui/LinkLabel.js';
 import '../../ui/FileMessageItemBody.js';
 import '../../ui/TextButton.js';
 import '../../ui/ThumbnailMessageItemBody.js';
 import '../../ui/OGMessageItemBody.js';
-import '../../ui/LinkLabel.js';
 import '../../ui/UnknownMessageItemBody.js';
 import '../../ui/QuoteMessage.js';
 import './FileViewer.js';
-import '../../index-942c85a6.js';
+import '../../index-1fd114b0.js';
 import './RemoveMessageModal.js';
 import '../../ui/Modal.js';
-import '../../utils-c393e880.js';
+import '../../utils-9ef11656.js';
 import '../../ui/QuoteMessageInput.js';
 
 var ChannelUI = function ChannelUI(_a) {

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 { useChannel } 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 { RenderMessageProps } from '../../../../types';\nimport * as messageActionTypes from '../../context/dux/actionTypes';\n\nexport interface ChannelUIProps {\n  renderPlaceholderLoader?: () => React.ReactNode;\n  renderPlaceholderInvalid?: () => React.ReactNode;\n  renderPlaceholderEmpty?: () => React.ReactNode;\n  renderChannelHeader?: () => React.ReactNode;\n  renderMessage?: (props: RenderMessageProps) => React.ReactNode;\n  renderMessageInput?: () => React.ReactNode;\n  renderTypingIndicator?: () => React.ReactNode;\n  renderCustomSeperator?: () => React.ReactNode;\n}\n\nconst ChannelUI: React.FC<ChannelUIProps> = ({\n  renderPlaceholderLoader,\n  renderPlaceholderInvalid,\n  renderPlaceholderEmpty,\n  renderChannelHeader,\n  renderMessage,\n  renderMessageInput,\n  renderTypingIndicator,\n  renderCustomSeperator,\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  } = useChannel();\n  const [unreadCount, setUnreadCount] = useState(0);\n  useEffect(() => {\n    setUnreadCount(currentGroupChannel.unreadMessageCount);\n  }, [currentGroupChannel?.unreadMessageCount]);\n\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 (!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              currentGroupChannel?.markAsRead();\n              messagesDispatcher({\n                type: messageActionTypes.MARK_AS_READ,\n                payload: { channel: currentGroupChannel },\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              renderCustomSeperator={renderCustomSeperator}\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","renderPlaceholderLoader","renderPlaceholderInvalid","renderPlaceholderEmpty","renderChannelHeader","renderMessage","renderMessageInput","renderTypingIndicator","renderCustomSeperator","_f","useChannel","currentGroupChannel","channelUrl","isInvalid","unreadSince","loading","setInitialTimeStamp","setAnimatedMessageId","setHighLightedMessageId","scrollRef","messagesDispatcher","_g","useState","unreadCount","setUnreadCount","useEffect","unreadMessageCount","globalStore","useSendbirdStateContext","sdkError","stores","sdkStore","error","logger","config","isOnline","React","PlaceHolderTypes","NO_CHANNELS","WRONG","info","ChannelHeader","isFrozen","current","scrollTop","scrollHeight","offsetHeight","markAsRead","type","messageActionTypes","payload","channel","LOADING"],"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 { useChannel } 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 { RenderMessageProps } from '../../../../types';\nimport * as messageActionTypes from '../../context/dux/actionTypes';\n\nexport interface ChannelUIProps {\n  renderPlaceholderLoader?: () => React.ReactNode;\n  renderPlaceholderInvalid?: () => React.ReactNode;\n  renderPlaceholderEmpty?: () => React.ReactNode;\n  renderChannelHeader?: () => React.ReactNode;\n  renderMessage?: (props: RenderMessageProps) => React.ReactNode;\n  renderMessageInput?: () => React.ReactNode;\n  renderTypingIndicator?: () => React.ReactNode;\n  renderCustomSeperator?: () => React.ReactNode;\n}\n\nconst ChannelUI: React.FC<ChannelUIProps> = ({\n  renderPlaceholderLoader,\n  renderPlaceholderInvalid,\n  renderPlaceholderEmpty,\n  renderChannelHeader,\n  renderMessage,\n  renderMessageInput,\n  renderTypingIndicator,\n  renderCustomSeperator,\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  } = useChannel();\n  const [unreadCount, setUnreadCount] = useState(0);\n  useEffect(() => {\n    setUnreadCount(currentGroupChannel.unreadMessageCount);\n  }, [currentGroupChannel?.unreadMessageCount]);\n\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 (!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              currentGroupChannel?.markAsRead();\n              messagesDispatcher({\n                type: messageActionTypes.MARK_AS_READ,\n                payload: { channel: currentGroupChannel },\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              renderCustomSeperator={renderCustomSeperator}\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","renderPlaceholderLoader","renderPlaceholderInvalid","renderPlaceholderEmpty","renderChannelHeader","renderMessage","renderMessageInput","renderTypingIndicator","renderCustomSeperator","_f","useChannel","currentGroupChannel","channelUrl","isInvalid","unreadSince","loading","setInitialTimeStamp","setAnimatedMessageId","setHighLightedMessageId","scrollRef","messagesDispatcher","_g","useState","unreadCount","setUnreadCount","useEffect","unreadMessageCount","globalStore","useSendbirdStateContext","sdkError","stores","sdkStore","error","logger","config","isOnline","React","PlaceHolderTypes","NO_CHANNELS","WRONG","info","ChannelHeader","isFrozen","current","scrollTop","scrollHeight","offsetHeight","markAsRead","type","messageActionTypes","payload","channel","LOADING"],"mappings":"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"}

package/Channel/components/FileViewer.js

@@ -1,24 +1,25 @@
 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-7a51bd16.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-a611bd38.js';
 import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
-import { M as MODAL_ROOT } from '../../index-942c85a6.js';
-import { w as isSupportedFileView, x as isVideo, y as isImage } from '../../index-8c72a94a.js';
+import { M as MODAL_ROOT } from '../../index-1fd114b0.js';
+import { w as isSupportedFileView, x as isVideo, y as isImage } from '../../index-ad4c9e58.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import { u as useChannel } from '../../ChannelProvider-459e463f.js';
-import '../../tslib.es6-e3c44017.js';
+import { u as useChannel } from '../../ChannelProvider-d5126903.js';
+import '../../tslib.es6-83aa13f5.js';
 import '../../ui/ImageRenderer.js';
-import '../../_rollupPluginBabelHelpers-20904f21.js';
+import '../../_rollupPluginBabelHelpers-8e4fae98.js';
 import 'prop-types';
-import '../../uuid-b0c93400.js';
-import '../../stringSet-4f6eaa60.js';
+import '../../uuid-6d14d007.js';
+import '../../stringSet-91746bf1.js';
 import '../../withSendBird.js';
-import '../../UserProfileContext-865db5e6.js';
-import '../../index-770d7112.js';
-import '../../index-6ebf7894.js';
-import '../../topics-9442035c.js';
-import '../../compareIds-808956f2.js';
+import '../../UserProfileContext-daa99f9b.js';
+import '../../index-4a59a866.js';
+import '../../index-353f13f3.js';
+import '../../topics-17d99dd6.js';
+import '../../compareIds-48d87cc5.js';
+import '../../const-3f63e129.js';
 import '../../ui/ContextMenu.js';
 import '../../ui/SortByRow.js';
 import '../../ui/ReactionButton.js';

package/Channel/components/FileViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileViewer.js","sources":["../../../src/smart-components/Channel/components/FileViewer/index.tsx"],"sourcesContent":["import React from 'react';\nimport { createPortal } from 'react-dom';\n\nimport './file-viewer.scss';\nimport Avatar from '../../../../ui/Avatar';\nimport Label, { LabelTypography, LabelColors } from '../../../../ui/Label';\nimport Icon, { IconColors, IconTypes } from '../../../../ui/Icon';\nimport { MODAL_ROOT } from '../../../../hooks/useModal/ModalRoot';\n\nimport { isImage, isVideo, isSupportedFileView } from '../../../../utils';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\nimport { useChannel } from '../../context/ChannelProvider';\n\ntype FileViewerUIProps = {\n  profileUrl: string;\n  nickname: string;\n  // file\n  name: string;\n  type: string;\n  url: string;\n  // others\n  isByMe: boolean;\n  onCancel: () => void;\n  onDelete: () => void;\n  disableDelete: boolean;\n};\n\nexport const FileViewerComponent: React.FC<FileViewerUIProps> = ({\n  // sender\n  profileUrl,\n  nickname,\n  // file\n  name,\n  type,\n  url,\n  // others\n  isByMe,\n  onCancel,\n  onDelete,\n  disableDelete,\n}: FileViewerUIProps) => (\n  <div className=\"sendbird-fileviewer\">\n    <div className=\"sendbird-fileviewer__header\">\n      <div className=\"sendbird-fileviewer__header__left\">\n        <div className=\"sendbird-fileviewer__header__left__avatar\">\n          <Avatar height=\"32px\" width=\"32px\" src={profileUrl} />\n        </div>\n        <Label\n          className=\"sendbird-fileviewer__header__left__filename\"\n          type={LabelTypography.H_2}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {name}\n        </Label>\n        <Label\n          className=\"sendbird-fileviewer__header__left__sender-name\"\n          type={LabelTypography.BODY_1}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {nickname}\n        </Label>\n      </div>\n      <div className=\"sendbird-fileviewer__header__right\">\n        {\n          isSupportedFileView(type) && (\n            <div className=\"sendbird-fileviewer__header__right__actions\">\n              <a\n                className=\"sendbird-fileviewer__header__right__actions__download\"\n                rel=\"noopener noreferrer\"\n                href={url}\n                target=\"_blank\"\n              >\n                <Icon\n                  type={IconTypes.DOWNLOAD}\n                  fillColor={IconColors.ON_BACKGROUND_1}\n                  height=\"24px\"\n                  width=\"24px\"\n                />\n              </a>\n              {\n                onDelete && isByMe && (\n                  <div className=\"sendbird-fileviewer__header__right__actions__delete\">\n                    <Icon\n                      className={disableDelete ? 'disabled' : ''}\n                      type={IconTypes.DELETE}\n                      fillColor={disableDelete ? IconColors.GRAY : IconColors.ON_BACKGROUND_1}\n                      height=\"24px\"\n                      width=\"24px\"\n                      onClick={() => { if (!disableDelete) { onDelete(); } }}\n                    />\n                  </div>\n                )\n              }\n            </div>\n          )\n        }\n        <div className=\"sendbird-fileviewer__header__right__actions__close\">\n          <Icon\n            type={IconTypes.CLOSE}\n            fillColor={IconColors.ON_BACKGROUND_1}\n            height=\"24px\"\n            width=\"24px\"\n            onClick={onCancel}\n          />\n        </div>\n      </div>\n    </div>\n    <div className=\"sendbird-fileviewer__content\">\n      {isVideo(type) && (\n        <video controls className=\"sendbird-fileviewer__content__video\">\n          <source src={url} type={type} />\n        </video>\n      )}\n      {\n        isImage(type) && (\n          <img\n            src={url}\n            alt={name}\n            className=\"sendbird-fileviewer__content__img\"\n          />\n        )\n      }\n      {\n        !isSupportedFileView(type) && (\n          <div className=\"sendbird-fileviewer__content__unsupported\">\n            <Label type={LabelTypography.H_1} color={LabelColors.ONBACKGROUND_1}>\n              Unsupoprted message\n            </Label>\n          </div>\n        )\n      }\n    </div>\n  </div>\n);\n\ntype FileViewerProps = {\n  onCancel:() => void;\n  message: SendbirdUIKit.ClientFileMessage;\n};\n\nconst FileViewer: React.FC<FileViewerProps> = ({ onCancel, message }: FileViewerProps) => {\n  const { deleteMessage } = useChannel();\n  const {\n    sender,\n    type,\n    url,\n    name = '',\n    threadInfo,\n  } = message;\n  const user = useSendbirdStateContext()?.config?.userId;\n  const isByMe = user === message?.sender?.userId;\n  const disableDelete = threadInfo?.replyCount > 0;\n  const { profileUrl, nickname = '' } = sender;\n  return createPortal(\n    (\n      <FileViewerComponent\n        profileUrl={profileUrl}\n        nickname={nickname}\n        type={type}\n        url={url}\n        name={name}\n        onCancel={onCancel}\n        onDelete={() => {\n          deleteMessage(message).then(() => {\n            onCancel();\n          });\n        }}\n        isByMe={isByMe}\n        disableDelete={disableDelete}\n      />\n    ),\n    document.getElementById(MODAL_ROOT),\n  );\n}\n\nexport default FileViewer;\n"],"names":["FileViewerComponent","_a","profileUrl","nickname","name","type","url","isByMe","onCancel","onDelete","disableDelete","React","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","BODY_1","ONBACKGROUND_2","isSupportedFileView","IconTypes","DOWNLOAD","IconColors","ON_BACKGROUND_1","DELETE","GRAY","CLOSE","isVideo","isImage","H_1","FileViewer","message","deleteMessage","useChannel","sender","_e","threadInfo","user","useSendbirdStateContext","config","userId","replyCount","_f","createPortal","then","document","getElementById","MODAL_ROOT"],"mappings":"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"}
+{"version":3,"file":"FileViewer.js","sources":["../../../src/smart-components/Channel/components/FileViewer/index.tsx"],"sourcesContent":["import React from 'react';\nimport { createPortal } from 'react-dom';\n\nimport './file-viewer.scss';\nimport Avatar from '../../../../ui/Avatar';\nimport Label, { LabelTypography, LabelColors } from '../../../../ui/Label';\nimport Icon, { IconColors, IconTypes } from '../../../../ui/Icon';\nimport { MODAL_ROOT } from '../../../../hooks/useModal/ModalRoot';\n\nimport { isImage, isVideo, isSupportedFileView } from '../../../../utils';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\nimport { useChannel } from '../../context/ChannelProvider';\n\ntype FileViewerUIProps = {\n  profileUrl: string;\n  nickname: string;\n  // file\n  name: string;\n  type: string;\n  url: string;\n  // others\n  isByMe: boolean;\n  onCancel: () => void;\n  onDelete: () => void;\n  disableDelete: boolean;\n};\n\nexport const FileViewerComponent: React.FC<FileViewerUIProps> = ({\n  // sender\n  profileUrl,\n  nickname,\n  // file\n  name,\n  type,\n  url,\n  // others\n  isByMe,\n  onCancel,\n  onDelete,\n  disableDelete,\n}: FileViewerUIProps) => (\n  <div className=\"sendbird-fileviewer\">\n    <div className=\"sendbird-fileviewer__header\">\n      <div className=\"sendbird-fileviewer__header__left\">\n        <div className=\"sendbird-fileviewer__header__left__avatar\">\n          <Avatar height=\"32px\" width=\"32px\" src={profileUrl} />\n        </div>\n        <Label\n          className=\"sendbird-fileviewer__header__left__filename\"\n          type={LabelTypography.H_2}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {name}\n        </Label>\n        <Label\n          className=\"sendbird-fileviewer__header__left__sender-name\"\n          type={LabelTypography.BODY_1}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {nickname}\n        </Label>\n      </div>\n      <div className=\"sendbird-fileviewer__header__right\">\n        {\n          isSupportedFileView(type) && (\n            <div className=\"sendbird-fileviewer__header__right__actions\">\n              <a\n                className=\"sendbird-fileviewer__header__right__actions__download\"\n                rel=\"noopener noreferrer\"\n                href={url}\n                target=\"_blank\"\n              >\n                <Icon\n                  type={IconTypes.DOWNLOAD}\n                  fillColor={IconColors.ON_BACKGROUND_1}\n                  height=\"24px\"\n                  width=\"24px\"\n                />\n              </a>\n              {\n                onDelete && isByMe && (\n                  <div className=\"sendbird-fileviewer__header__right__actions__delete\">\n                    <Icon\n                      className={disableDelete ? 'disabled' : ''}\n                      type={IconTypes.DELETE}\n                      fillColor={disableDelete ? IconColors.GRAY : IconColors.ON_BACKGROUND_1}\n                      height=\"24px\"\n                      width=\"24px\"\n                      onClick={() => { if (!disableDelete) { onDelete(); } }}\n                    />\n                  </div>\n                )\n              }\n            </div>\n          )\n        }\n        <div className=\"sendbird-fileviewer__header__right__actions__close\">\n          <Icon\n            type={IconTypes.CLOSE}\n            fillColor={IconColors.ON_BACKGROUND_1}\n            height=\"24px\"\n            width=\"24px\"\n            onClick={onCancel}\n          />\n        </div>\n      </div>\n    </div>\n    <div className=\"sendbird-fileviewer__content\">\n      {isVideo(type) && (\n        <video controls className=\"sendbird-fileviewer__content__video\">\n          <source src={url} type={type} />\n        </video>\n      )}\n      {\n        isImage(type) && (\n          <img\n            src={url}\n            alt={name}\n            className=\"sendbird-fileviewer__content__img\"\n          />\n        )\n      }\n      {\n        !isSupportedFileView(type) && (\n          <div className=\"sendbird-fileviewer__content__unsupported\">\n            <Label type={LabelTypography.H_1} color={LabelColors.ONBACKGROUND_1}>\n              Unsupoprted message\n            </Label>\n          </div>\n        )\n      }\n    </div>\n  </div>\n);\n\ntype FileViewerProps = {\n  onCancel:() => void;\n  message: SendbirdUIKit.ClientFileMessage;\n};\n\nconst FileViewer: React.FC<FileViewerProps> = ({ onCancel, message }: FileViewerProps) => {\n  const { deleteMessage } = useChannel();\n  const {\n    sender,\n    type,\n    url,\n    name = '',\n    threadInfo,\n  } = message;\n  const user = useSendbirdStateContext()?.config?.userId;\n  const isByMe = user === message?.sender?.userId;\n  const disableDelete = threadInfo?.replyCount > 0;\n  const { profileUrl, nickname = '' } = sender;\n  return createPortal(\n    (\n      <FileViewerComponent\n        profileUrl={profileUrl}\n        nickname={nickname}\n        type={type}\n        url={url}\n        name={name}\n        onCancel={onCancel}\n        onDelete={() => {\n          deleteMessage(message).then(() => {\n            onCancel();\n          });\n        }}\n        isByMe={isByMe}\n        disableDelete={disableDelete}\n      />\n    ),\n    document.getElementById(MODAL_ROOT),\n  );\n}\n\nexport default FileViewer;\n"],"names":["FileViewerComponent","_a","profileUrl","nickname","name","type","url","isByMe","onCancel","onDelete","disableDelete","React","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","BODY_1","ONBACKGROUND_2","isSupportedFileView","IconTypes","DOWNLOAD","IconColors","ON_BACKGROUND_1","DELETE","GRAY","CLOSE","isVideo","isImage","H_1","FileViewer","message","deleteMessage","useChannel","sender","_e","threadInfo","user","useSendbirdStateContext","config","userId","replyCount","_f","createPortal","then","document","getElementById","MODAL_ROOT"],"mappings":"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"}