@sendbird/uikit-react 3.4.4 → 3.4.5-rc.0

package/cjs/ui/MessageSearchItem.js

@@ -1,19 +1,19 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-46c08a06.js');
+var tslib_es6 = require('../tslib.es6-94d25845.js');
 var React = require('react');
-var index$1 = require('../index-cfff5dbb.js');
-var index = require('../index-20fc629b.js');
+var index$1 = require('../index-106dbf0e.js');
+var index = require('../index-b8bcbe2e.js');
 var ui_Avatar = require('./Avatar.js');
-var ui_Label = require('../index-7207d339.js');
-var LocalizationContext = require('../LocalizationContext-4822793b.js');
-require('../index-1151a507.js');
-require('../index-f78cff63.js');
+var ui_Label = require('../index-2068f053.js');
+var LocalizationContext = require('../LocalizationContext-3fb1efd5.js');
+require('../index-05458f16.js');
+require('../index-871938c2.js');
 require('./ImageRenderer.js');
 require('./Icon.js');
 require('prop-types');
-require('../uuid-8454abf3.js');
-require('../stringSet-7f49973c.js');
+require('../uuid-fe1b03cf.js');
+require('../stringSet-eba21df4.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/MessageStatus.js

@@ -2,21 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../tslib.es6-46c08a06.js');
+require('../tslib.es6-94d25845.js');
 require('react');
-require('../index-cfff5dbb.js');
+require('../index-106dbf0e.js');
 require('./Icon.js');
-require('../index-7207d339.js');
+require('../index-2068f053.js');
 require('./Loader.js');
-require('../index-2f2f3e43.js');
+require('../index-27196170.js');
 require('../utils/message/getOutgoingMessageState.js');
-var ui_MessageStatus = require('../index-aaa65319.js');
-require('../LocalizationContext-4822793b.js');
-require('../index-1151a507.js');
+var ui_MessageStatus = require('../index-046dffba.js');
+require('../LocalizationContext-3fb1efd5.js');
+require('../index-05458f16.js');
 require('prop-types');
-require('../stringSet-7f49973c.js');
-require('../index-20fc629b.js');
-require('../index-f78cff63.js');
+require('../stringSet-eba21df4.js');
+require('../index-b8bcbe2e.js');
+require('../index-871938c2.js');
 
 
 

package/cjs/ui/Modal.js

@@ -4,16 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var reactDom = require('react-dom');
-var index = require('../index-57989185.js');
-var LocalizationContext = require('../LocalizationContext-4822793b.js');
+var index = require('../index-3ecf6f1c.js');
+var LocalizationContext = require('../LocalizationContext-3fb1efd5.js');
 var ui_Button = require('./Button.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
-var ui_Label = require('../index-7207d339.js');
-var MediaQueryContext = require('../MediaQueryContext-b83880cc.js');
-require('../stringSet-7f49973c.js');
-require('../index-1151a507.js');
-require('../tslib.es6-46c08a06.js');
+var ui_Label = require('../index-2068f053.js');
+var MediaQueryContext = require('../MediaQueryContext-9982e73b.js');
+require('../stringSet-eba21df4.js');
+require('../index-05458f16.js');
+require('../tslib.es6-94d25845.js');
 require('prop-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/ui/OGMessageItemBody.js

@@ -1,32 +1,35 @@
 'use strict';
 
 var React = require('react');
-var ui_Word = require('./Word.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../index-7207d339.js');
-var uuid = require('../uuid-8454abf3.js');
-var index = require('../index-2f2f3e43.js');
-var LocalizationContext = require('../LocalizationContext-4822793b.js');
-require('./LinkLabel.js');
+var ui_Label = require('../index-2068f053.js');
+var index = require('../index-27196170.js');
+var LocalizationContext = require('../LocalizationContext-3fb1efd5.js');
+var index$1 = require('../index-4efda0a3.js');
+var tokenize = require('../tokenize-ca4ac5a1.js');
+var consts = require('../consts-c4097faa.js');
+require('../tslib.es6-94d25845.js');
 require('prop-types');
+require('../stringSet-eba21df4.js');
+require('../utils/message/getOutgoingMessageState.js');
+require('../index-05458f16.js');
+require('../Message/context.js');
 require('./MentionLabel.js');
 require('./ContextMenu.js');
-require('../tslib.es6-46c08a06.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../utils/message/getOutgoingMessageState.js');
-require('../stringSet-7f49973c.js');
+require('../uuid-fe1b03cf.js');
 require('./UserProfile.js');
-require('../UserProfileContext-7bc4eec4.js');
+require('../UserProfileContext-b0b956b8.js');
 require('../sendbirdSelectors.js');
-require('../topics-9d6a6d36.js');
-require('../utils-7d2c966a.js');
+require('../topics-e4dffa33.js');
+require('../utils-6584b9f0.js');
 require('./Avatar.js');
 require('./Button.js');
 require('../useSendbirdStateContext.js');
 require('../withSendbird.js');
-require('../index-1151a507.js');
+require('./LinkLabel.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -55,36 +58,27 @@ function OGMessageItemBody(_a) {
   };
 
   var isMessageMentioned = isMentionEnabled && ((_b = message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate) === null || _b === void 0 ? void 0 : _b.length) > 0 && ((_c = message === null || message === void 0 ? void 0 : message.mentionedUsers) === null || _c === void 0 ? void 0 : _c.length) > 0;
-  var sentences = React.useMemo(function () {
-    var _a, _b;
-
+  var tokens = React.useMemo(function () {
     if (isMessageMentioned) {
-      return (_a = message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate) === null || _a === void 0 ? void 0 : _a.split(/\n/).map(function (sentence) {
-        return sentence.split(/\s/);
+      return tokenize.tokenizeMessage({
+        mentionedUsers: message === null || message === void 0 ? void 0 : message.mentionedUsers,
+        messageText: message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate
       });
     }
 
-    return (_b = message === null || message === void 0 ? void 0 : message.message) === null || _b === void 0 ? void 0 : _b.split(/\n/).map(function (sentence) {
-      return sentence.split(/\s/);
+    return tokenize.tokenizeMessage({
+      messageText: message === null || message === void 0 ? void 0 : message.message
     });
-  }, [message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate]);
+  }, [message === null || message === void 0 ? void 0 : message.updatedAt]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: index.getClassName([className, 'sendbird-og-message-item-body', isByMe ? 'outgoing' : 'incoming', mouseHover ? 'mouse-hover' : '', isReactionEnabled && ((_d = message === null || message === void 0 ? void 0 : message.reactions) === null || _d === void 0 ? void 0 : _d.length) > 0 ? 'reactions' : ''])
   }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
-    key: uuid.uuidv4(),
     type: ui_Label.LabelTypography.BODY_1,
     color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-og-message-item-body__text-bubble"
-  }, sentences === null || sentences === void 0 ? void 0 : sentences.map(function (sentence, index) {
-    return [sentence === null || sentence === void 0 ? void 0 : sentence.map(function (word) {
-      return /*#__PURE__*/React__default["default"].createElement(ui_Word, {
-        key: uuid.uuidv4(),
-        word: word,
-        message: message,
-        isByMe: isByMe
-      });
-    }), (sentences === null || sentences === void 0 ? void 0 : sentences[index + 1]) ? /*#__PURE__*/React__default["default"].createElement("br", null) : null];
+    className: consts.OG_MESSAGE_BODY_CLASSNAME
+  }, /*#__PURE__*/React__default["default"].createElement(index$1.TextFragment, {
+    tokens: tokens
   }), index.isEditedMessage(message) && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     className: "sendbird-og-message-item-body__text-bubble__message",
     type: ui_Label.LabelTypography.BODY_1,

package/cjs/ui/OGMessageItemBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"OGMessageItemBody.js","sources":["../../../src/ui/OGMessageItemBody/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, {\n  ReactElement,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react';\nimport type { UserMessage } from '@sendbird/chat/message';\n\nimport Word from '../Word';\nimport ImageRenderer from '../ImageRenderer';\nimport Icon, { IconTypes } from '../Icon';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport uuidv4 from '../../utils/uuid';\nimport { getClassName, isEditedMessage } from '../../utils';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: UserMessage;\n  isByMe?: boolean;\n  mouseHover?: boolean;\n  isMentionEnabled?: boolean;\n  isReactionEnabled?: boolean;\n}\n\nexport default function OGMessageItemBody({\n  className,\n  message,\n  isByMe = false,\n  mouseHover = false,\n  isMentionEnabled = false,\n  isReactionEnabled = false,\n}: Props): ReactElement {\n  const imageRef = useRef<HTMLDivElement>(null);\n  const { stringSet } = useContext(LocalizationContext);\n  const openOGUrl = (): void => {\n    if (message?.ogMetaData?.url) window.open(message?.ogMetaData?.url);\n  };\n  const isMessageMentioned = isMentionEnabled && message?.mentionedMessageTemplate?.length > 0 && message?.mentionedUsers?.length > 0;\n  const sentences: Array<Array<string>> = useMemo(() => {\n    if (isMessageMentioned) {\n      return message?.mentionedMessageTemplate?.split(/\\n/).map((sentence) => sentence.split(/\\s/));\n    }\n    return message?.message?.split(/\\n/).map((sentence) => sentence.split(/\\s/));\n  }, [message?.mentionedMessageTemplate]);\n  return (\n    <div className={getClassName([\n      className,\n      'sendbird-og-message-item-body',\n      isByMe ? 'outgoing' : 'incoming',\n      mouseHover ? 'mouse-hover' : '',\n      (isReactionEnabled && message?.reactions?.length > 0) ? 'reactions' : '',\n    ])}>\n      <Label\n        key={uuidv4()}\n        type={LabelTypography.BODY_1}\n        color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n      >\n        <div className=\"sendbird-og-message-item-body__text-bubble\">\n          {\n            sentences?.map((sentence, index) => {\n              return [\n                sentence?.map((word) => {\n                  return (\n                    <Word\n                      key={uuidv4()}\n                      word={word}\n                      message={message}\n                      isByMe={isByMe}\n                    />\n                  );\n                }),\n                sentences?.[index + 1] ? <br /> : null,\n              ]\n            })\n          }\n          {\n            isEditedMessage(message) && (\n              <Label\n                className=\"sendbird-og-message-item-body__text-bubble__message\"\n                type={LabelTypography.BODY_1}\n                color={isByMe ? LabelColors.ONCONTENT_2 : LabelColors.ONBACKGROUND_2}\n              >\n                {` ${stringSet.MESSAGE_EDITED} `}\n              </Label>\n            )\n          }\n        </div>\n      </Label>\n      <div\n        ref={imageRef}\n        className={`sendbird-og-message-item-body__og-thumbnail\n          ${message?.ogMetaData?.defaultImage?.url ? '' : 'sendbird-og-message-item-body__og-thumbnail__empty'}\n        `}\n        onClick={openOGUrl}\n      >\n        <ImageRenderer\n          onError={() => {\n            try {\n              imageRef?.current?.classList?.add('sendbird-og-message-item-body__og-thumbnail__empty');\n            } catch (error) {\n              // do nothing\n            }\n          }}\n          className=\"sendbird-og-message-item-body__og-thumbnail__image\"\n          url={message?.ogMetaData?.defaultImage?.url || ''}\n          alt={message?.ogMetaData?.defaultImage?.alt}\n          // TODO: Change fixing width and height lengths\n          defaultComponent={(\n            <div className=\"sendbird-og-message-item-body__og-thumbnail__place-holder\">\n              <Icon\n                className=\"sendbird-og-message-item-body__og-thumbnail__place-holder__icon\"\n                type={IconTypes.THUMBNAIL_NONE}\n                width=\"56px\"\n                height=\"56px\"\n              />\n            </div>\n          )}\n        />\n      </div>\n      <div\n        className=\"sendbird-og-message-item-body__description\"\n        onClick={openOGUrl}\n      >\n        {message?.ogMetaData?.title && (\n          <Label\n            className=\"sendbird-og-message-item-body__description__title\"\n            type={LabelTypography.SUBTITLE_2}\n            color={LabelColors.ONBACKGROUND_1}\n          >\n            {message.ogMetaData.title}\n          </Label>\n        )}\n        {message?.ogMetaData?.description && (\n          <Label\n            className=\"sendbird-og-message-item-body__description__description\"\n            type={LabelTypography.BODY_2}\n            color={LabelColors.ONBACKGROUND_1}\n          >\n            {message.ogMetaData.description}\n          </Label>\n        )}\n        {message?.ogMetaData?.url && (\n          <Label\n            className=\"sendbird-og-message-item-body__description__url\"\n            type={LabelTypography.CAPTION_3}\n            color={LabelColors.ONBACKGROUND_2}\n          >\n            {message.ogMetaData.url}\n          </Label>\n        )}\n      </div>\n      <div className=\"sendbird-og-message-item-body__cover\" />\n    </div>\n  );\n}\n"],"names":["OGMessageItemBody","_a","className","message","_p","isByMe","_q","mouseHover","_r","isMentionEnabled","_s","isReactionEnabled","imageRef","useRef","stringSet","useContext","LocalizationContext","openOGUrl","ogMetaData","url","window","open","_b","isMessageMentioned","mentionedMessageTemplate","length","_c","mentionedUsers","sentences","useMemo","split","map","sentence","React","getClassName","_d","reactions","Label","uuidv4","LabelTypography","BODY_1","LabelColors","ONCONTENT_1","ONBACKGROUND_1","index","word","Word","isEditedMessage","ONCONTENT_2","ONBACKGROUND_2","concat","MESSAGE_EDITED","_f","_e","defaultImage","ImageRenderer","current","classList","add","error","_h","_g","_j","_k","alt","Icon","IconTypes","THUMBNAIL_NONE","_l","title","SUBTITLE_2","_m","description","BODY_2","_o","CAPTION_3"],"mappings":"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"}
+{"version":3,"file":"OGMessageItemBody.js","sources":["../../../src/ui/OGMessageItemBody/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, {\n  ReactElement,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react';\nimport type { UserMessage } from '@sendbird/chat/message';\n\nimport ImageRenderer from '../ImageRenderer';\nimport Icon, { IconTypes } from '../Icon';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport { getClassName, isEditedMessage } from '../../utils';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\nimport TextFragment from '../../smart-components/Message/components/TextFragment';\nimport { tokenizeMessage } from '../../smart-components/Message/utils/tokens/tokenize';\nimport { OG_MESSAGE_BODY_CLASSNAME } from './consts';\n\ninterface Props {\n  className?: string | Array<string>;\n  message: UserMessage;\n  isByMe?: boolean;\n  mouseHover?: boolean;\n  isMentionEnabled?: boolean;\n  isReactionEnabled?: boolean;\n}\n\nexport default function OGMessageItemBody({\n  className,\n  message,\n  isByMe = false,\n  mouseHover = false,\n  isMentionEnabled = false,\n  isReactionEnabled = false,\n}: Props): ReactElement {\n  const imageRef = useRef<HTMLDivElement>(null);\n  const { stringSet } = useContext(LocalizationContext);\n  const openOGUrl = (): void => {\n    if (message?.ogMetaData?.url) window.open(message?.ogMetaData?.url);\n  };\n  const isMessageMentioned = isMentionEnabled && message?.mentionedMessageTemplate?.length > 0 && message?.mentionedUsers?.length > 0;\n  const tokens = useMemo(() => {\n    if (isMessageMentioned) {\n      return tokenizeMessage({\n        mentionedUsers: message?.mentionedUsers,\n        messageText: message?.mentionedMessageTemplate,\n      });\n    }\n    return tokenizeMessage({\n      messageText: message?.message,\n    });\n  }, [message?.updatedAt]);\n  return (\n    <div className={getClassName([\n      className,\n      'sendbird-og-message-item-body',\n      isByMe ? 'outgoing' : 'incoming',\n      mouseHover ? 'mouse-hover' : '',\n      (isReactionEnabled && message?.reactions?.length > 0) ? 'reactions' : '',\n    ])}>\n      <Label\n        type={LabelTypography.BODY_1}\n        color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n      >\n        <div className={OG_MESSAGE_BODY_CLASSNAME}>\n          <TextFragment tokens={tokens} />\n          {\n            isEditedMessage(message) && (\n              <Label\n                className=\"sendbird-og-message-item-body__text-bubble__message\"\n                type={LabelTypography.BODY_1}\n                color={isByMe ? LabelColors.ONCONTENT_2 : LabelColors.ONBACKGROUND_2}\n              >\n                {` ${stringSet.MESSAGE_EDITED} `}\n              </Label>\n            )\n          }\n        </div>\n      </Label>\n      <div\n        ref={imageRef}\n        className={`sendbird-og-message-item-body__og-thumbnail\n          ${message?.ogMetaData?.defaultImage?.url ? '' : 'sendbird-og-message-item-body__og-thumbnail__empty'}\n        `}\n        onClick={openOGUrl}\n      >\n        <ImageRenderer\n          onError={() => {\n            try {\n              imageRef?.current?.classList?.add('sendbird-og-message-item-body__og-thumbnail__empty');\n            } catch (error) {\n              // do nothing\n            }\n          }}\n          className=\"sendbird-og-message-item-body__og-thumbnail__image\"\n          url={message?.ogMetaData?.defaultImage?.url || ''}\n          alt={message?.ogMetaData?.defaultImage?.alt}\n          // TODO: Change fixing width and height lengths\n          defaultComponent={(\n            <div className=\"sendbird-og-message-item-body__og-thumbnail__place-holder\">\n              <Icon\n                className=\"sendbird-og-message-item-body__og-thumbnail__place-holder__icon\"\n                type={IconTypes.THUMBNAIL_NONE}\n                width=\"56px\"\n                height=\"56px\"\n              />\n            </div>\n          )}\n        />\n      </div>\n      <div\n        className=\"sendbird-og-message-item-body__description\"\n        onClick={openOGUrl}\n      >\n        {message?.ogMetaData?.title && (\n          <Label\n            className=\"sendbird-og-message-item-body__description__title\"\n            type={LabelTypography.SUBTITLE_2}\n            color={LabelColors.ONBACKGROUND_1}\n          >\n            {message.ogMetaData.title}\n          </Label>\n        )}\n        {message?.ogMetaData?.description && (\n          <Label\n            className=\"sendbird-og-message-item-body__description__description\"\n            type={LabelTypography.BODY_2}\n            color={LabelColors.ONBACKGROUND_1}\n          >\n            {message.ogMetaData.description}\n          </Label>\n        )}\n        {message?.ogMetaData?.url && (\n          <Label\n            className=\"sendbird-og-message-item-body__description__url\"\n            type={LabelTypography.CAPTION_3}\n            color={LabelColors.ONBACKGROUND_2}\n          >\n            {message.ogMetaData.url}\n          </Label>\n        )}\n      </div>\n      <div className=\"sendbird-og-message-item-body__cover\" />\n    </div>\n  );\n}\n"],"names":["OGMessageItemBody","_a","className","message","_p","isByMe","_q","mouseHover","_r","isMentionEnabled","_s","isReactionEnabled","imageRef","useRef","stringSet","useContext","LocalizationContext","openOGUrl","ogMetaData","url","window","open","_b","isMessageMentioned","mentionedMessageTemplate","length","_c","mentionedUsers","tokens","useMemo","tokenizeMessage","messageText","updatedAt","React","getClassName","_d","reactions","Label","LabelTypography","BODY_1","LabelColors","ONCONTENT_1","ONBACKGROUND_1","OG_MESSAGE_BODY_CLASSNAME","TextFragment","isEditedMessage","ONCONTENT_2","ONBACKGROUND_2","concat","MESSAGE_EDITED","_f","_e","defaultImage","ImageRenderer","current","classList","add","error","_h","_g","_j","_k","alt","Icon","IconTypes","THUMBNAIL_NONE","_l","title","SUBTITLE_2","_m","description","BODY_2","_o","CAPTION_3"],"mappings":"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"}

package/cjs/ui/OpenChannelAdminMessage.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-46c08a06.js');
+var tslib_es6 = require('../tslib.es6-94d25845.js');
 var React = require('react');
-var ui_Label = require('../index-7207d339.js');
+var ui_Label = require('../index-2068f053.js');
 require('prop-types');
-require('../stringSet-7f49973c.js');
+require('../stringSet-eba21df4.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/OpenChannelAvatar.js

@@ -2,15 +2,15 @@
 
 var React = require('react');
 var ui_Avatar = require('./Avatar.js');
-var LocalizationContext = require('../LocalizationContext-4822793b.js');
-var utils = require('../utils-dae078f4.js');
-require('../tslib.es6-46c08a06.js');
+var LocalizationContext = require('../LocalizationContext-3fb1efd5.js');
+var utils = require('../utils-f294dd80.js');
+require('../tslib.es6-94d25845.js');
 require('./ImageRenderer.js');
 require('./Icon.js');
 require('prop-types');
-require('../uuid-8454abf3.js');
-require('../stringSet-7f49973c.js');
-require('../index-1151a507.js');
+require('../uuid-fe1b03cf.js');
+require('../stringSet-eba21df4.js');
+require('../index-05458f16.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/OpenchannelConversationHeader.js

@@ -4,14 +4,14 @@ var React = require('react');
 var ui_Avatar = require('./Avatar.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
-var ui_Label = require('../index-7207d339.js');
-var LocalizationContext = require('../LocalizationContext-4822793b.js');
-require('../tslib.es6-46c08a06.js');
+var ui_Label = require('../index-2068f053.js');
+var LocalizationContext = require('../LocalizationContext-3fb1efd5.js');
+require('../tslib.es6-94d25845.js');
 require('./ImageRenderer.js');
-require('../uuid-8454abf3.js');
+require('../uuid-fe1b03cf.js');
 require('prop-types');
-require('../stringSet-7f49973c.js');
-require('../index-1151a507.js');
+require('../stringSet-eba21df4.js');
+require('../index-05458f16.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/OpenchannelFileMessage.js

@@ -1,35 +1,35 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-1218aafb.js');
-var tslib_es6 = require('../tslib.es6-46c08a06.js');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-05716924.js');
+var tslib_es6 = require('../tslib.es6-94d25845.js');
 var React = require('react');
-var index$1 = require('../index-cfff5dbb.js');
+var index$1 = require('../index-106dbf0e.js');
 var ui_Avatar = require('./Avatar.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../index-7207d339.js');
+var ui_Label = require('../index-2068f053.js');
 var ui_Loader = require('./Loader.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
 var ui_TextButton = require('./TextButton.js');
 var ui_UserProfile = require('./UserProfile.js');
-var UserProfileContext = require('../UserProfileContext-7bc4eec4.js');
-var LocalizationContext = require('../LocalizationContext-4822793b.js');
-var index = require('../index-f52caf82.js');
-var MediaQueryContext = require('../MediaQueryContext-b83880cc.js');
-var useLongPress = require('../useLongPress-839c53cb.js');
-require('../index-1151a507.js');
+var UserProfileContext = require('../UserProfileContext-b0b956b8.js');
+var LocalizationContext = require('../LocalizationContext-3fb1efd5.js');
+var index = require('../index-4f21cdee.js');
+var MediaQueryContext = require('../MediaQueryContext-9982e73b.js');
+var useLongPress = require('../useLongPress-d8b2586f.js');
+require('../index-05458f16.js');
 require('./ImageRenderer.js');
-require('../uuid-8454abf3.js');
+require('../uuid-fe1b03cf.js');
 require('prop-types');
 require('react-dom');
 require('./SortByRow.js');
-require('../index-2f2f3e43.js');
+require('../index-27196170.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../stringSet-7f49973c.js');
-require('../color-937f65ad.js');
+require('../stringSet-eba21df4.js');
+require('../color-360107a6.js');
 require('../sendbirdSelectors.js');
-require('../topics-9d6a6d36.js');
-require('../utils-7d2c966a.js');
+require('../topics-e4dffa33.js');
+require('../utils-6584b9f0.js');
 require('./Button.js');
 require('../useSendbirdStateContext.js');
 require('../withSendbird.js');

package/cjs/ui/OpenchannelOGMessage.js

@@ -1,40 +1,42 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-1218aafb.js');
-var tslib_es6 = require('../tslib.es6-46c08a06.js');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-05716924.js');
+var tslib_es6 = require('../tslib.es6-94d25845.js');
 var React = require('react');
-var index$1 = require('../index-cfff5dbb.js');
+var index$1 = require('../index-106dbf0e.js');
 var ui_Avatar = require('./Avatar.js');
 var ui_ContextMenu = require('./ContextMenu.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_LinkLabel = require('./LinkLabel.js');
-var ui_Label = require('../index-7207d339.js');
+var ui_Label = require('../index-2068f053.js');
 var ui_Loader = require('./Loader.js');
 var ui_UserProfile = require('./UserProfile.js');
-var ui_Word = require('./Word.js');
-var UserProfileContext = require('../UserProfileContext-7bc4eec4.js');
-var uuid = require('../uuid-8454abf3.js');
-var utils = require('../utils-41bb82dc.js');
-var LocalizationContext = require('../LocalizationContext-4822793b.js');
-var index = require('../index-f52caf82.js');
-var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var MediaQueryContext = require('../MediaQueryContext-b83880cc.js');
-var useLongPress = require('../useLongPress-839c53cb.js');
-require('../index-1151a507.js');
+var UserProfileContext = require('../UserProfileContext-b0b956b8.js');
+var uuid = require('../uuid-fe1b03cf.js');
+var utils = require('../utils-49414b11.js');
+var LocalizationContext = require('../LocalizationContext-3fb1efd5.js');
+var index = require('../index-4f21cdee.js');
+var MediaQueryContext = require('../MediaQueryContext-9982e73b.js');
+var useLongPress = require('../useLongPress-d8b2586f.js');
+var index$2 = require('../index-4efda0a3.js');
+var tokenize = require('../tokenize-ca4ac5a1.js');
+require('../index-05458f16.js');
 require('prop-types');
 require('react-dom');
 require('./SortByRow.js');
-require('../index-2f2f3e43.js');
+require('../index-27196170.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../stringSet-7f49973c.js');
+require('../stringSet-eba21df4.js');
 require('../sendbirdSelectors.js');
-require('../topics-9d6a6d36.js');
-require('../utils-7d2c966a.js');
+require('../topics-e4dffa33.js');
+require('../utils-6584b9f0.js');
 require('./Button.js');
-require('./MentionLabel.js');
+require('../useSendbirdStateContext.js');
 require('../withSendbird.js');
+require('../Message/context.js');
+require('./MentionLabel.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -57,12 +59,10 @@ var checkOGIsEnalbed = function (message) {
 };
 
 function OpenchannelOGMessage(_a) {
-  var _b, _c, _d;
-
   var message = _a.message,
       isOperator = _a.isOperator,
-      _e = _a.isEphemeral,
-      isEphemeral = _e === void 0 ? false : _e,
+      _b = _a.isEphemeral,
+      isEphemeral = _b === void 0 ? false : _b,
       className = _a.className,
       disabled = _a.disabled,
       showEdit = _a.showEdit,
@@ -85,23 +85,22 @@ function OpenchannelOGMessage(_a) {
   var status = message === null || message === void 0 ? void 0 : message.sendingStatus;
   var ogMetaData = message.ogMetaData;
   var defaultImage = ogMetaData.defaultImage;
-  var sdk = (_d = (_c = (_b = useSendbirdStateContext === null || useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext()) === null || _b === void 0 ? void 0 : _b.stores) === null || _c === void 0 ? void 0 : _c.sdkStore) === null || _d === void 0 ? void 0 : _d.sdk;
 
-  var _f = LocalizationContext.useLocalization(),
-      stringSet = _f.stringSet,
-      dateLocale = _f.dateLocale;
+  var _c = LocalizationContext.useLocalization(),
+      stringSet = _c.stringSet,
+      dateLocale = _c.dateLocale;
 
-  var _g = React.useContext(UserProfileContext.UserProfileContext),
-      disableUserProfile = _g.disableUserProfile,
-      renderUserProfile = _g.renderUserProfile;
+  var _d = React.useContext(UserProfileContext.UserProfileContext),
+      disableUserProfile = _d.disableUserProfile,
+      renderUserProfile = _d.renderUserProfile;
 
-  var _h = React.useState({}),
-      contextStyle = _h[0],
-      setContextStyle = _h[1];
+  var _e = React.useState({}),
+      contextStyle = _e[0],
+      setContextStyle = _e[1];
 
-  var _j = React.useState(false),
-      contextMenu = _j[0],
-      setContextMenu = _j[1];
+  var _f = React.useState(false),
+      contextMenu = _f[0],
+      setContextMenu = _f[1];
 
   var onLongPress = useLongPress.useLongPress({
     onLongPress: function () {
@@ -119,33 +118,11 @@ function OpenchannelOGMessage(_a) {
   var isFailed = index.checkIsFailed(status);
   var sender = index.getSenderFromMessage(message);
   var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
-  var MemoizedMessageText = React.useMemo(function () {
-    return function () {
-      var wordClassName = 'sendbird-openchannel-og-message--word';
-      var splitMessage = message.message.split(' ');
-      var matchedMessage = splitMessage.map(function (word) {
-        var _a, _b;
-
-        return /*#__PURE__*/React__default["default"].createElement(ui_Word, {
-          key: uuid.uuidv4(),
-          word: word,
-          message: message,
-          isByMe: ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId) === ((_b = sdk === null || sdk === void 0 ? void 0 : sdk.currentUser) === null || _b === void 0 ? void 0 : _b.userId)
-        });
-      });
-
-      if (message.updatedAt > 0) {
-        matchedMessage.push( /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
-          key: uuid.uuidv4(),
-          className: wordClassName,
-          type: ui_Label.LabelTypography.BODY_1,
-          color: ui_Label.LabelColors.ONBACKGROUND_2
-        }, stringSet.MESSAGE_EDITED));
-      }
-
-      return matchedMessage;
-    };
-  }, [message, message.updatedAt]); // place conxt menu top depending clientHeight of message component
+  var tokens = React.useMemo(function () {
+    return tokenize.tokenizeMessage({
+      messageText: message.message
+    });
+  }, [message === null || message === void 0 ? void 0 : message.updatedAt]); // place conxt menu top depending clientHeight of message component
 
   React.useEffect(function () {
     var _a;
@@ -220,7 +197,14 @@ function OpenchannelOGMessage(_a) {
     className: "sendbird-openchannel-og-message__top__right__description__message",
     type: ui_Label.LabelTypography.BODY_1,
     color: ui_Label.LabelColors.ONBACKGROUND_1
-  }, MemoizedMessageText()))), !isMobile && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(index$2.TextFragment, {
+    tokens: tokens
+  }), (message === null || message === void 0 ? void 0 : message.updatedAt) > 0 && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    key: uuid.uuidv4(),
+    className: "sendbird-openchannel-og-message--word",
+    type: ui_Label.LabelTypography.BODY_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, stringSet.MESSAGE_EDITED)))), !isMobile && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-openchannel-og-message__top__context-menu",
     ref: contextMenuRef,
     style: contextStyle