@sendbird/uikit-react 3.4.0-rc.1 → 3.4.0-rc.2

package/cjs/ui/OGMessageItemBody.js

@@ -0,0 +1,139 @@
+'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-db48f031.js');
+var uuid = require('../uuid-e879709a.js');
+var index = require('../index-482bbe89.js');
+var LocalizationContext = require('../LocalizationContext-53fd4ae9.js');
+require('./LinkLabel.js');
+require('prop-types');
+require('./MentionLabel.js');
+require('./ContextMenu.js');
+require('../tslib.es6-5163dacf.js');
+require('react-dom');
+require('./SortByRow.js');
+require('../utils/message/getOutgoingMessageState.js');
+require('../stringSet-42fa6280.js');
+require('./UserProfile.js');
+require('../UserProfileContext-c7d6be85.js');
+require('../sendbirdSelectors.js');
+require('../topics-bc8e923e.js');
+require('../utils-09e1cb5d.js');
+require('./Avatar.js');
+require('./Button.js');
+require('../useSendbirdStateContext.js');
+require('../withSendbird.js');
+require('../_rollupPluginBabelHelpers-3c8c757e.js');
+require('../index-7c018421.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function OGMessageItemBody(_a) {
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+
+  var className = _a.className,
+      message = _a.message,
+      _p = _a.isByMe,
+      isByMe = _p === void 0 ? false : _p,
+      _q = _a.mouseHover,
+      mouseHover = _q === void 0 ? false : _q,
+      _r = _a.isMentionEnabled,
+      isMentionEnabled = _r === void 0 ? false : _r,
+      _s = _a.isReactionEnabled,
+      isReactionEnabled = _s === void 0 ? false : _s;
+  var imageRef = React.useRef(null);
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+
+  var openOGUrl = function () {
+    var _a, _b;
+
+    if ((_a = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _a === void 0 ? void 0 : _a.url) window.open((_b = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _b === void 0 ? void 0 : _b.url);
+  };
+
+  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;
+
+    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 (_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/);
+    });
+  }, [message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate]);
+  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];
+  }), 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,
+    color: isByMe ? ui_Label.LabelColors.ONCONTENT_2 : ui_Label.LabelColors.ONBACKGROUND_2
+  }, " ".concat(stringSet.MESSAGE_EDITED, " ")))), /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: imageRef,
+    className: "sendbird-og-message-item-body__og-thumbnail\n          ".concat(((_f = (_e = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _e === void 0 ? void 0 : _e.defaultImage) === null || _f === void 0 ? void 0 : _f.url) ? '' : 'sendbird-og-message-item-body__og-thumbnail__empty', "\n        "),
+    onClick: openOGUrl
+  }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
+    onError: function () {
+      var _a, _b;
+
+      try {
+        (_b = (_a = imageRef === null || imageRef === void 0 ? void 0 : imageRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('sendbird-og-message-item-body__og-thumbnail__empty');
+      } catch (error) {// do nothing
+      }
+    },
+    className: "sendbird-og-message-item-body__og-thumbnail__image",
+    url: ((_h = (_g = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _g === void 0 ? void 0 : _g.defaultImage) === null || _h === void 0 ? void 0 : _h.url) || '',
+    alt: (_k = (_j = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _j === void 0 ? void 0 : _j.defaultImage) === null || _k === void 0 ? void 0 : _k.alt // TODO: Change fixing width and height lengths
+    ,
+    defaultComponent: /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "sendbird-og-message-item-body__og-thumbnail__place-holder"
+    }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+      className: "sendbird-og-message-item-body__og-thumbnail__place-holder__icon",
+      type: ui_Icon.IconTypes.THUMBNAIL_NONE,
+      width: "56px",
+      height: "56px"
+    }))
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-og-message-item-body__description",
+    onClick: openOGUrl
+  }, ((_l = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _l === void 0 ? void 0 : _l.title) && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-og-message-item-body__description__title",
+    type: ui_Label.LabelTypography.SUBTITLE_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, message.ogMetaData.title), ((_m = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _m === void 0 ? void 0 : _m.description) && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-og-message-item-body__description__description",
+    type: ui_Label.LabelTypography.BODY_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, message.ogMetaData.description), ((_o = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _o === void 0 ? void 0 : _o.url) && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-og-message-item-body__description__url",
+    type: ui_Label.LabelTypography.CAPTION_3,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, message.ogMetaData.url)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-og-message-item-body__cover"
+  }));
+}
+
+module.exports = OGMessageItemBody;
+//# sourceMappingURL=OGMessageItemBody.js.map

package/cjs/ui/OpenChannelAdminMessage.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var tslib_es6 = require('../tslib.es6-5163dacf.js');
+var React = require('react');
+var ui_Label = require('../index-db48f031.js');
+require('prop-types');
+require('../stringSet-42fa6280.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function OpenChannelAdminMessage(_a) {
+  var className = _a.className,
+      message = _a.message;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-openchannel-admin-message'], false).join(' ')
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-openchannel-admin-message__text",
+    type: ui_Label.LabelTypography.CAPTION_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, message.message || ''));
+}
+
+module.exports = OpenChannelAdminMessage;
+//# sourceMappingURL=OpenChannelAdminMessage.js.map

package/cjs/ui/OpenChannelAvatar.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var React = require('react');
+var ui_Avatar = require('./Avatar.js');
+var LocalizationContext = require('../LocalizationContext-53fd4ae9.js');
+var utils = require('../utils-ea9d80f3.js');
+require('../tslib.es6-5163dacf.js');
+require('./ImageRenderer.js');
+require('./Icon.js');
+require('prop-types');
+require('../uuid-e879709a.js');
+require('../stringSet-42fa6280.js');
+require('../index-7c018421.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function ChannelAvatar(_a) {
+  var channel = _a.channel,
+      theme = _a.theme,
+      _b = _a.height,
+      height = _b === void 0 ? 56 : _b,
+      _c = _a.width,
+      width = _c === void 0 ? 56 : _c;
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+  var memoizedAvatar = React.useMemo(function () {
+    return /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+      className: "sendbird-chat-header__avatar--open-channel",
+      src: utils.getOpenChannelAvatar(channel),
+      width: "".concat(width, "px"),
+      height: "".concat(height, "px"),
+      alt: (channel === null || channel === void 0 ? void 0 : channel.name) || stringSet.OPEN_CHANNEL_SETTINGS__NO_TITLE
+    });
+  }, [channel === null || channel === void 0 ? void 0 : channel.coverUrl, theme]);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, memoizedAvatar);
+}
+
+module.exports = ChannelAvatar;
+//# sourceMappingURL=OpenChannelAvatar.js.map

package/cjs/ui/OpenchannelConversationHeader.js

@@ -0,0 +1,72 @@
+'use strict';
+
+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-db48f031.js');
+var LocalizationContext = require('../LocalizationContext-53fd4ae9.js');
+require('../tslib.es6-5163dacf.js');
+require('./ImageRenderer.js');
+require('../uuid-e879709a.js');
+require('prop-types');
+require('../stringSet-42fa6280.js');
+require('../index-7c018421.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function OpenchannelConversationHeader(_a) {
+  var coverImage = _a.coverImage,
+      title = _a.title,
+      subTitle = _a.subTitle,
+      amIOperator = _a.amIOperator,
+      onActionClick = _a.onActionClick;
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-openchannel-conversation-header"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-openchannel-conversation-header__left"
+  }, coverImage ? /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+    className: "sendbird-openchannel-conversation-header__left__cover-image",
+    src: coverImage,
+    alt: "channel cover image",
+    width: "32px",
+    height: "32px"
+  }) : /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-openchannel-conversation-header__left__cover-image--icon",
+    style: {
+      width: 32,
+      height: 32
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.CHANNELS,
+    fillColor: ui_Icon.IconColors.CONTENT,
+    width: "18px",
+    height: "18px"
+  })), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-openchannel-conversation-header__left__title",
+    type: ui_Label.LabelTypography.H_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, title || stringSet.NO_TITLE), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-openchannel-conversation-header__left__sub-title",
+    type: ui_Label.LabelTypography.BODY_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, subTitle || stringSet.NO_TITLE)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-openchannel-conversation-header__right"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
+    className: "sendbird-openchannel-conversation-header__right__trigger",
+    width: "32px",
+    height: "32px",
+    onClick: onActionClick
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: amIOperator ? ui_Icon.IconTypes.INFO : ui_Icon.IconTypes.MEMBERS,
+    fillColor: ui_Icon.IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }))));
+}
+
+module.exports = OpenchannelConversationHeader;
+//# sourceMappingURL=OpenchannelConversationHeader.js.map

package/cjs/ui/OpenchannelFileMessage.js

@@ -0,0 +1,264 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-3c8c757e.js');
+var tslib_es6 = require('../tslib.es6-5163dacf.js');
+var React = require('react');
+var index$1 = require('../index-a283267f.js');
+var ui_Avatar = require('./Avatar.js');
+var ui_ContextMenu = require('./ContextMenu.js');
+var ui_Label = require('../index-db48f031.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-c7d6be85.js');
+var LocalizationContext = require('../LocalizationContext-53fd4ae9.js');
+var index = require('../index-cc0a43a7.js');
+var MediaQueryContext = require('../MediaQueryContext-cfb37524.js');
+var useLongPress = require('../useLongPress-591a6fa9.js');
+require('../index-7c018421.js');
+require('./ImageRenderer.js');
+require('../uuid-e879709a.js');
+require('prop-types');
+require('react-dom');
+require('./SortByRow.js');
+require('../index-482bbe89.js');
+require('../utils/message/getOutgoingMessageState.js');
+require('../stringSet-42fa6280.js');
+require('../color-578986d2.js');
+require('../sendbirdSelectors.js');
+require('../topics-bc8e923e.js');
+require('../utils-09e1cb5d.js');
+require('./Button.js');
+require('../useSendbirdStateContext.js');
+require('../withSendbird.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var checkFileType = function (fileUrl) {
+  var audioFile = /(\.mp3)$/i;
+  var gifFile = /(\.gif)$/i;
+
+  if (audioFile.test(fileUrl)) {
+    return ui_Icon.IconTypes.FILE_AUDIO;
+  }
+
+  if (gifFile.test(fileUrl)) {
+    return ui_Icon.IconTypes.GIF;
+  }
+
+  return ui_Icon.IconTypes.FILE_DOCUMENT;
+};
+var truncate = function (fullStr, strLen) {
+  if (fullStr === null || fullStr === undefined) return '';
+  if (fullStr.length <= strLen) return fullStr;
+  var separator = '...';
+  var sepLen = separator.length;
+  var charsToShow = strLen - sepLen;
+  var frontChars = Math.ceil(charsToShow / 2);
+  var backChars = Math.floor(charsToShow / 2);
+  return fullStr.substr(0, frontChars) + separator + fullStr.substr(fullStr.length - backChars);
+};
+
+function OpenchannelFileMessage(_a) {
+  var className = _a.className,
+      message = _a.message,
+      isOperator = _a.isOperator,
+      userId = _a.userId,
+      disabled = _a.disabled,
+      chainTop = _a.chainTop,
+      showRemove = _a.showRemove,
+      resendMessage = _a.resendMessage;
+  var status = message === null || message === void 0 ? void 0 : message.sendingStatus;
+
+  var _b = LocalizationContext.useLocalization(),
+      dateLocale = _b.dateLocale,
+      stringSet = _b.stringSet;
+
+  var contextMenuRef = React.useRef(null);
+  var mobileMenuRef = React.useRef(null);
+  var avatarRef = React.useRef(null);
+
+  var _c = React.useContext(UserProfileContext.UserProfileContext),
+      disableUserProfile = _c.disableUserProfile,
+      renderUserProfile = _c.renderUserProfile;
+
+  var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+
+  var openFileUrl = function () {
+    window.open(message.url);
+  };
+
+  var isPending = index.checkIsPending(status);
+  var isFailed = index.checkIsFailed(status);
+  var sender = index.getSenderFromMessage(message);
+
+  var _d = React.useState(false),
+      contextMenu = _d[0],
+      setContextMenu = _d[1];
+
+  var longPress = useLongPress.useLongPress({
+    onLongPress: function () {
+      if (isMobile) {
+        setContextMenu(true);
+      }
+    },
+    onClick: openFileUrl
+  }, {
+    delay: 300
+  });
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-openchannel-file-message'], false).join(' '),
+    ref: mobileMenuRef
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-openchannel-file-message__left"
+  }, !chainTop && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
+    menuTrigger: function (toggleDropdown) {
+      return /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+        className: "sendbird-openchannel-file-message__left__avatar",
+        src: sender.profileUrl || '',
+        ref: avatarRef,
+        width: "28px",
+        height: "28px",
+        onClick: function () {
+          if (!disableUserProfile) {
+            toggleDropdown();
+          }
+        }
+      });
+    },
+    menuItems: function (closeDropdown) {
+      return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
+        parentRef: avatarRef,
+        parentContainRef: avatarRef,
+        closeDropdown: closeDropdown,
+        style: {
+          paddingTop: '0px',
+          paddingBottom: '0px'
+        }
+      }, renderUserProfile ? renderUserProfile({
+        user: sender,
+        close: closeDropdown
+      }) : /*#__PURE__*/React__default["default"].createElement(ui_UserProfile, {
+        user: sender,
+        onSuccess: closeDropdown,
+        disableMessaging: true
+      }));
+    }
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-openchannel-file-message__right"
+  }, !chainTop && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-openchannel-file-message__right__title"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-openchannel-file-message__right__title__sender-name",
+    type: ui_Label.LabelTypography.CAPTION_2,
+    color: isOperator ? ui_Label.LabelColors.SECONDARY_3 : ui_Label.LabelColors.ONBACKGROUND_2
+  }, sender && (sender.friendName || sender.nickname || sender.userId)), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-openchannel-file-message__right__title__sent-at",
+    type: ui_Label.LabelTypography.CAPTION_3,
+    color: ui_Label.LabelColors.ONBACKGROUND_3
+  }, (message === null || message === void 0 ? void 0 : message.createdAt) && index$1.format(message.createdAt, 'p', {
+    locale: dateLocale
+  }))), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers._extends({
+    className: "sendbird-openchannel-file-message__right__body"
+  }, isMobile ? tslib_es6.__assign({}, longPress) : {}), checkFileType(message.url) && /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    className: "sendbird-openchannel-file-message__right__body__icon",
+    type: checkFileType(message.url),
+    fillColor: ui_Icon.IconColors.PRIMARY,
+    width: "48px",
+    height: "48px"
+  }), /*#__PURE__*/React__default["default"].createElement(ui_TextButton, {
+    className: "sendbird-openchannel-file-message__right__body__file-name",
+    onClick: openFileUrl
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    type: ui_Label.LabelTypography.BODY_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, truncate(message.name || message.url, 40)))), (isPending || isFailed) && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-openchannel-file-message__right__tail"
+  }, isPending && /*#__PURE__*/React__default["default"].createElement(ui_Loader, {
+    width: "16px",
+    height: "16px"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    className: "sendbird-openchannel-file-message__right__tail__pending",
+    type: ui_Icon.IconTypes.SPINNER,
+    fillColor: ui_Icon.IconColors.PRIMARY,
+    width: "16px",
+    height: "16px"
+  })), isFailed && /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    className: "sendbird-openchannel-file-message__right__tail__failed",
+    type: ui_Icon.IconTypes.ERROR,
+    fillColor: ui_Icon.IconColors.ERROR,
+    width: "16px",
+    height: "16px"
+  }))), !isMobile && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-openchannel-file-message__context-menu",
+    ref: contextMenuRef
+  }, /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
+    menuTrigger: function (toggleDropdown) {
+      return index.showMenuTrigger({
+        message: message,
+        userId: userId,
+        status: status
+      }) && /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
+        className: "sendbird-openchannel-file-message__context-menu__icon",
+        width: "32px",
+        height: "32px",
+        onClick: toggleDropdown
+      }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+        type: ui_Icon.IconTypes.MORE,
+        width: "24px",
+        height: "24px"
+      }));
+    },
+    menuItems: function (closeDropdown) {
+      return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
+        parentRef: contextMenuRef,
+        parentContainRef: contextMenuRef,
+        closeDropdown: closeDropdown,
+        openLeft: true
+      }, index.isFineResend({
+        message: message,
+        userId: userId,
+        status: status
+      }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+        onClick: function () {
+          if (disabled) {
+            return;
+          }
+
+          resendMessage(message);
+          closeDropdown();
+        }
+      }, stringSet.CONTEXT_MENU_DROPDOWN__RESEND), index.isFineDelete({
+        message: message,
+        userId: userId,
+        status: status
+      }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+        onClick: function () {
+          if (disabled) {
+            return;
+          }
+
+          showRemove(true);
+          closeDropdown();
+        }
+      }, stringSet.CONTEXT_MENU_DROPDOWN__DELETE));
+    }
+  })), contextMenu && /*#__PURE__*/React__default["default"].createElement(index.OpenChannelMobileMenu, {
+    message: message,
+    hideMenu: function () {
+      setContextMenu(false);
+    },
+    parentRef: mobileMenuRef,
+    showRemove: function () {
+      setContextMenu(false);
+      showRemove(true);
+    }
+  }));
+}
+
+module.exports = OpenchannelFileMessage;
+//# sourceMappingURL=OpenchannelFileMessage.js.map