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

package/dist/cjs/ui/ContextMenu.js

@@ -0,0 +1,329 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var tslib_es6 = require('../tslib.es6-e8acf1b5.js');
+var reactDom = require('react-dom');
+var ui_SortByRow = require('./SortByRow.js');
+var index = require('../index-6714492f.js');
+var ui_Label = require('../index-578f0575.js');
+require('../uuid-a94df44e.js');
+require('../utils/message/getOutgoingMessageState.js');
+require('prop-types');
+require('../stringSet-388f679a.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var MenuItems$1 =
+/** @class */
+function (_super) {
+  tslib_es6.__extends(MenuItems, _super);
+
+  function MenuItems(props) {
+    var _this = _super.call(this, props) || this;
+
+    _this.menuRef = /*#__PURE__*/React__default["default"].createRef();
+
+    _this.setupEvents = function () {
+      var closeDropdown = _this.props.closeDropdown;
+      var menuRef = _this.menuRef;
+
+      var handleClickOutside = function (event) {
+        var _a, _b;
+
+        if ((menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) && !((_b = (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) === null || _a === void 0 ? void 0 : _a.contains) === null || _b === void 0 ? void 0 : _b.call(_a, event.target))) {
+          closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
+        }
+      };
+
+      _this.setState({
+        handleClickOutside: handleClickOutside
+      });
+
+      document.addEventListener('mousedown', handleClickOutside);
+    };
+
+    _this.cleanUpEvents = function () {
+      var handleClickOutside = _this.state.handleClickOutside;
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+
+    _this.getMenuPosition = function () {
+      var _a, _b;
+
+      var _c = _this.props,
+          parentRef = _c.parentRef,
+          openLeft = _c.openLeft;
+      var parentRect = (_b = (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a);
+      var x = (parentRect === null || parentRect === void 0 ? void 0 : parentRect.x) || (parentRect === null || parentRect === void 0 ? void 0 : parentRect.left) || 0;
+      var y = (parentRect === null || parentRect === void 0 ? void 0 : parentRect.y) || (parentRect === null || parentRect === void 0 ? void 0 : parentRect.top) || 0;
+      var menuStyle = {
+        top: y,
+        left: x
+      };
+      if (!_this.menuRef.current) return menuStyle;
+      var innerWidth = window.innerWidth,
+          innerHeight = window.innerHeight;
+
+      var rect = _this.menuRef.current.getBoundingClientRect();
+
+      if (y + rect.height > innerHeight) {
+        menuStyle.top -= rect.height;
+      }
+
+      if (x + rect.width > innerWidth && !openLeft) {
+        menuStyle.left -= rect.width;
+      }
+
+      if (menuStyle.top < 0) {
+        menuStyle.top = rect.height < innerHeight ? (innerHeight - rect.height) / 2 : 0;
+      }
+
+      if (menuStyle.left < 0) {
+        menuStyle.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0;
+      }
+
+      menuStyle.top += 32;
+
+      if (openLeft) {
+        var padding = Number.isNaN(rect.width - 30) ? 108 // default
+        : rect.width - 30;
+        menuStyle.left -= padding;
+      }
+
+      _this.setState({
+        menuStyle: menuStyle
+      });
+
+      return menuStyle;
+    };
+
+    _this.state = {
+      menuStyle: {},
+      handleClickOutside: function () {}
+    };
+    return _this;
+  }
+
+  MenuItems.prototype.componentDidMount = function () {
+    this.setupEvents();
+    this.getMenuPosition();
+  };
+
+  MenuItems.prototype.componentWillUnmount = function () {
+    this.cleanUpEvents();
+  };
+
+  MenuItems.prototype.render = function () {
+    var _a;
+
+    var menuStyle = this.state.menuStyle;
+    var _b = this.props,
+        children = _b.children,
+        style = _b.style,
+        _c = _b.className,
+        className = _c === void 0 ? "" : _c;
+    return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement("div", {
+      className: (_a = this.props) === null || _a === void 0 ? void 0 : _a.className
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "sendbird-dropdown__menu-backdrop"
+    }), /*#__PURE__*/React__default["default"].createElement("ul", {
+      className: "".concat(className, " sendbird-dropdown__menu"),
+      ref: this.menuRef,
+      style: tslib_es6.__assign({
+        display: 'inline-block',
+        position: 'fixed',
+        left: "".concat(Math.round(menuStyle.left), "px"),
+        top: "".concat(Math.round(menuStyle.top), "px")
+      }, style)
+    }, children)), document.getElementById('sendbird-dropdown-portal'));
+  };
+
+  return MenuItems;
+}(React__default["default"].Component);
+
+var EmojiListItems$1 = function (_a) {
+  var children = _a.children,
+      parentRef = _a.parentRef,
+      parentContainRef = _a.parentContainRef,
+      _b = _a.spaceFromTrigger,
+      spaceFromTrigger = _b === void 0 ? {
+    x: 0,
+    y: 0
+  } : _b,
+      closeDropdown = _a.closeDropdown;
+
+  var _c = React.useState({
+    left: 0,
+    top: 0
+  }),
+      reactionStyle = _c[0],
+      setReactionStyle = _c[1];
+
+  var reactionRef = React.useRef(null);
+  /* showParent & hideParent */
+
+  React.useEffect(function () {
+    if (parentContainRef && (parentContainRef === null || parentContainRef === void 0 ? void 0 : parentContainRef.current)) {
+      parentContainRef.current.classList.add('sendbird-reactions--pressed');
+    }
+
+    return function () {
+      if (parentContainRef && (parentContainRef === null || parentContainRef === void 0 ? void 0 : parentContainRef.current)) {
+        parentContainRef.current.classList.remove('sendbird-reactions--pressed');
+      }
+    };
+  }, []);
+  /* setupEvents & cleanupEvents */
+
+  React.useEffect(function () {
+    var handleClickOutSide = function (event) {
+      var _a, _b;
+
+      if ((reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current) && !((_b = (_a = reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current) === null || _a === void 0 ? void 0 : _a.contains) === null || _b === void 0 ? void 0 : _b.call(_a, event.target))) {
+        closeDropdown();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutSide);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutSide);
+    };
+  }, []);
+  /* getBarPosition */
+
+  React.useEffect(function () {
+    var _a, _b;
+
+    var spaceFromTriggerX = (spaceFromTrigger === null || spaceFromTrigger === void 0 ? void 0 : spaceFromTrigger.x) || 0;
+    var spaceFromTriggerY = (spaceFromTrigger === null || spaceFromTrigger === void 0 ? void 0 : spaceFromTrigger.y) || 0;
+    var parentRect = (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    var x = parentRect.x || parentRect.left;
+    var y = parentRect.y || parentRect.top;
+    var reactionStyle = {
+      top: y,
+      left: x
+    };
+
+    if (!(reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current)) {
+      setReactionStyle(reactionStyle);
+    } else {
+      var rect = (_b = reactionRef === null || reactionRef === void 0 ? void 0 : reactionRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+
+      if (reactionStyle.top < rect.height) {
+        reactionStyle.top += parentRect.height;
+        reactionStyle.top += spaceFromTriggerY;
+      } else {
+        reactionStyle.top -= rect.height;
+        reactionStyle.top -= spaceFromTriggerY;
+      }
+
+      reactionStyle.left -= rect.width / 2;
+      reactionStyle.left += parentRect.height / 2 - 2;
+      reactionStyle.left += spaceFromTriggerX;
+      var maximumLeft = window.innerWidth - rect.width;
+
+      if (maximumLeft < reactionStyle.left) {
+        reactionStyle.left = maximumLeft;
+      }
+
+      if (reactionStyle.left < 0) {
+        reactionStyle.left = 0;
+      }
+
+      setReactionStyle(reactionStyle);
+    }
+  }, []);
+  return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-dropdown__menu-backdrop"
+  }), /*#__PURE__*/React__default["default"].createElement("ul", {
+    className: "sendbird-dropdown__reaction-bar",
+    ref: reactionRef,
+    style: {
+      display: 'inline-block',
+      position: 'fixed',
+      left: "".concat(Math.round(reactionStyle.left), "px"),
+      top: "".concat(Math.round(reactionStyle.top), "px")
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ui_SortByRow, {
+    className: "sendbird-dropdown__reaction-bar__row",
+    maxItemCount: 8,
+    itemWidth: 44,
+    itemHeight: 40
+  }, children))), document.getElementById('sendbird-emoji-list-portal'));
+};
+
+var ENTER_KEY = 13;
+var MenuItems = MenuItems$1;
+var EmojiListItems = EmojiListItems$1;
+var MenuItem = function (_a) {
+  var _b = _a.className,
+      className = _b === void 0 ? '' : _b,
+      children = _a.children,
+      onClick = _a.onClick,
+      _c = _a.disable,
+      disable = _c === void 0 ? false : _c;
+
+  var handleClickEvent = function (e) {
+    if (!disable && onClick) {
+      onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    }
+  };
+
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    className: index.getClassName([className, 'sendbird-dropdown__menu-item', disable ? 'disable' : '']),
+    role: "menuitem",
+    "aria-disabled": disable ? true : false,
+    onClick: handleClickEvent,
+    onKeyPress: function (e) {
+      if (e.keyCode === ENTER_KEY) handleClickEvent(e);
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-dropdown__menu-item__text",
+    type: ui_Label.LabelTypography.SUBTITLE_2,
+    color: disable ? ui_Label.LabelColors.ONBACKGROUND_4 : ui_Label.LabelColors.ONBACKGROUND_1
+  }, children));
+};
+var MenuRoot = function () {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    id: "sendbird-dropdown-portal",
+    className: "sendbird-dropdown-portal"
+  });
+};
+var EmojiReactionListRoot = function () {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    id: "sendbird-emoji-list-portal"
+  });
+};
+function ContextMenu(_a) {
+  var menuTrigger = _a.menuTrigger,
+      menuItems = _a.menuItems,
+      isOpen = _a.isOpen;
+
+  var _b = React.useState(false),
+      showMenu = _b[0],
+      setShowMenu = _b[1];
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-context-menu",
+    style: {
+      display: 'inline'
+    }
+  }, menuTrigger === null || menuTrigger === void 0 ? void 0 : menuTrigger(function () {
+    return setShowMenu(!showMenu);
+  }), (showMenu || isOpen) && menuItems(function () {
+    return setShowMenu(false);
+  }));
+}
+
+exports.EmojiListItems = EmojiListItems;
+exports.EmojiReactionListRoot = EmojiReactionListRoot;
+exports.MenuItem = MenuItem;
+exports.MenuItems = MenuItems;
+exports.MenuRoot = MenuRoot;
+exports["default"] = ContextMenu;
+//# sourceMappingURL=ContextMenu.js.map

package/dist/cjs/ui/DateSeparator.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var tslib_es6 = require('../tslib.es6-e8acf1b5.js');
+var React = require('react');
+var color = require('../color-84bbbc0b.js');
+var ui_Label = require('../index-578f0575.js');
+require('prop-types');
+require('../stringSet-388f679a.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var DateSeparator = function (_a) {
+  var _b = _a.children,
+      children = _b === void 0 ? null : _b,
+      _c = _a.className,
+      className = _c === void 0 ? '' : _c,
+      _d = _a.separatorColor,
+      separatorColor = _d === void 0 ? color.Colors.ONBACKGROUND_4 : _d;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-separator'], false).join(' ')
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: ['sendbird-separator__left', "".concat(color.changeColorToClassName(separatorColor), "--background-color")].join(' ')
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-separator__text"
+  }, children || /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    type: ui_Label.LabelTypography.CAPTION_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, "Date Separator")), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: ['sendbird-separator__right', "".concat(color.changeColorToClassName(separatorColor), "--background-color")].join(' ')
+  }));
+};
+
+module.exports = DateSeparator;
+//# sourceMappingURL=DateSeparator.js.map

package/dist/cjs/ui/EmojiReactions.js

@@ -0,0 +1,140 @@
+'use strict';
+
+var React = require('react');
+var ui_Tooltip = require('./Tooltip.js');
+var ui_TooltipWrapper = require('./TooltipWrapper.js');
+var ui_ReactionBadge = require('./ReactionBadge.js');
+var ui_ReactionButton = require('./ReactionButton.js');
+var ui_ImageRenderer = require('./ImageRenderer.js');
+var ui_Icon = require('./Icon.js');
+var ui_ContextMenu = require('./ContextMenu.js');
+var index = require('../index-6714492f.js');
+var LocalizationContext = require('../LocalizationContext-2fb0be1f.js');
+require('../tslib.es6-e8acf1b5.js');
+require('../index-578f0575.js');
+require('prop-types');
+require('../stringSet-388f679a.js');
+require('react-dom');
+require('./SortByRow.js');
+require('../uuid-a94df44e.js');
+require('../utils/message/getOutgoingMessageState.js');
+require('../index-1ec959ab.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var EmojiReactions = function (_a) {
+  var _b, _c;
+
+  var className = _a.className,
+      userId = _a.userId,
+      message = _a.message,
+      emojiContainer = _a.emojiContainer,
+      memberNicknamesMap = _a.memberNicknamesMap,
+      _d = _a.spaceFromTrigger,
+      spaceFromTrigger = _d === void 0 ? {
+    x: 0,
+    y: 0
+  } : _d,
+      _e = _a.isByMe,
+      isByMe = _e === void 0 ? false : _e,
+      toggleReaction = _a.toggleReaction;
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+  var emojisMap = index.getEmojiMapAll(emojiContainer);
+  var addReactionRef = React.useRef(null);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: index.getClassName([className, 'sendbird-emoji-reactions', isByMe ? 'outgoing' : 'incoming'])
+  }, ((_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length) > 0 && message.reactions.map(function (reaction) {
+    var _a, _b;
+
+    var reactedByMe = index.isReactedBy(userId, reaction);
+    return /*#__PURE__*/React__default["default"].createElement(ui_TooltipWrapper, {
+      className: "sendbird-emoji-reactions__reaction-badge",
+      key: reaction === null || reaction === void 0 ? void 0 : reaction.key,
+      hoverTooltip: ((_a = reaction === null || reaction === void 0 ? void 0 : reaction.userIds) === null || _a === void 0 ? void 0 : _a.length) > 0 && /*#__PURE__*/React__default["default"].createElement(ui_Tooltip, null, index.getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet))
+    }, /*#__PURE__*/React__default["default"].createElement(ui_ReactionBadge, {
+      count: reaction.userIds.length,
+      selected: reactedByMe,
+      onClick: function (e) {
+        var _a;
+
+        toggleReaction(message, reaction.key, reactedByMe);
+        (_a = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e);
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
+      circle: true,
+      url: ((_b = emojisMap.get(reaction === null || reaction === void 0 ? void 0 : reaction.key)) === null || _b === void 0 ? void 0 : _b.url) || '',
+      width: "20px",
+      height: "20px",
+      defaultComponent: /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+        width: "20px",
+        height: "20px",
+        type: ui_Icon.IconTypes.QUESTION
+      })
+    })));
+  }), ((_c = message === null || message === void 0 ? void 0 : message.reactions) === null || _c === void 0 ? void 0 : _c.length) < emojisMap.size && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
+    menuTrigger: function (toggleDropdown) {
+      return /*#__PURE__*/React__default["default"].createElement(ui_ReactionBadge, {
+        className: "sendbird-emoji-reactions__add-reaction-badge",
+        ref: addReactionRef,
+        isAdd: true,
+        onClick: function (e) {
+          var _a;
+
+          toggleDropdown();
+          (_a = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+        type: ui_Icon.IconTypes.EMOJI_MORE,
+        fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
+        width: "20px",
+        height: "20px"
+      }));
+    },
+    menuItems: function (closeDropdown) {
+      return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.EmojiListItems, {
+        parentRef: addReactionRef,
+        parentContainRef: addReactionRef,
+        closeDropdown: closeDropdown,
+        spacefromTrigger: spaceFromTrigger
+      }, index.getEmojiListAll(emojiContainer).map(function (emoji) {
+        var _a, _b, _c;
+
+        var isReacted = (_c = (_b = (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.find(function (reaction) {
+          return reaction.key === emoji.key;
+        })) === null || _b === void 0 ? void 0 : _b.userIds) === null || _c === void 0 ? void 0 : _c.some(function (reactorId) {
+          return reactorId === userId;
+        });
+        return /*#__PURE__*/React__default["default"].createElement(ui_ReactionButton, {
+          key: emoji.key,
+          width: "36px",
+          height: "36px",
+          selected: isReacted,
+          onClick: function (e) {
+            closeDropdown();
+            toggleReaction(message, emoji.key, isReacted);
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
+          }
+        }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
+          url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '',
+          width: "28px",
+          height: "28px",
+          placeHolder: function (style) {
+            return /*#__PURE__*/React__default["default"].createElement("div", {
+              style: style
+            }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+              type: ui_Icon.IconTypes.QUESTION,
+              fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
+              width: "28px",
+              height: "28px"
+            }));
+          }
+        }));
+      }));
+    }
+  }));
+};
+
+module.exports = EmojiReactions;
+//# sourceMappingURL=EmojiReactions.js.map

package/dist/cjs/ui/FileMessageItemBody.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var React = require('react');
+var ui_Label = require('../index-578f0575.js');
+var ui_Icon = require('./Icon.js');
+var ui_TextButton = require('./TextButton.js');
+var index = require('../index-6714492f.js');
+var color = require('../color-84bbbc0b.js');
+var MediaQueryContext = require('../MediaQueryContext-db5159f3.js');
+require('prop-types');
+require('../stringSet-388f679a.js');
+require('../tslib.es6-e8acf1b5.js');
+require('../utils/message/getOutgoingMessageState.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function FileMessageItemBody(_a) {
+  var _b;
+
+  var className = _a.className,
+      message = _a.message,
+      _c = _a.isByMe,
+      isByMe = _c === void 0 ? false : _c,
+      _d = _a.mouseHover,
+      mouseHover = _d === void 0 ? false : _d,
+      _e = _a.isReactionEnabled,
+      isReactionEnabled = _e === void 0 ? false : _e,
+      _f = _a.truncateLimit,
+      truncateLimit = _f === void 0 ? null : _f;
+  var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+  var truncateMaxNum = truncateLimit || (isMobile ? 20 : null);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: index.getClassName([className, 'sendbird-file-message-item-body', isByMe ? 'outgoing' : 'incoming', mouseHover ? 'mouse-hover' : '', isReactionEnabled && ((_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length) > 0 ? 'reactions' : ''])
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-file-message-item-body__file-icon"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    className: "sendbird-file-message-item-body__file-icon__icon",
+    type: {
+      IMAGE: ui_Icon.IconTypes.PHOTO,
+      VIDEO: ui_Icon.IconTypes.PLAY,
+      AUDIO: ui_Icon.IconTypes.FILE_AUDIO,
+      GIF: ui_Icon.IconTypes.GIF,
+      OTHERS: ui_Icon.IconTypes.FILE_DOCUMENT
+    }[index.getUIKitFileType(message === null || message === void 0 ? void 0 : message.type)],
+    fillColor: ui_Icon.IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  })), /*#__PURE__*/React__default["default"].createElement(ui_TextButton, {
+    className: "sendbird-file-message-item-body__file-name",
+    onClick: function () {
+      window.open(message === null || message === void 0 ? void 0 : message.url);
+    },
+    color: isByMe ? color.Colors.ONCONTENT_1 : color.Colors.ONBACKGROUND_1
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-file-message-item-body__file-name__text",
+    type: ui_Label.LabelTypography.BODY_1,
+    color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1
+  }, index.truncateString((message === null || message === void 0 ? void 0 : message.name) || (message === null || message === void 0 ? void 0 : message.url), truncateMaxNum))));
+}
+
+module.exports = FileMessageItemBody;
+//# sourceMappingURL=FileMessageItemBody.js.map