cometchat-react-ui-kit2/dist/Messages/Bubbles/CometChatMessageBubble/index.js

CometChat UI Kit for React App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CometChatMessageBubble = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ = require("../..");
var _2 = require("../../..");
var _style = require("./style");
var _Shared = require("../../../Shared");
var _3 = require("..");
var _downloadIcon = _interopRequireDefault(require("./resources/download-icon.svg"));
var _whiteboard = _interopRequireDefault(require("./resources/whiteboard.svg"));
var _collaborative = _interopRequireDefault(require("./resources/collaborative.svg"));
var _closeChat = _interopRequireDefault(require("./resources/close-chat.svg"));
var _unsafeContent = _interopRequireDefault(require("./resources/unsafe-content.svg"));
var _MessageReactionsConfiguration = require("../../CometChatMessageReactions/MessageReactionsConfiguration");
var _DateConfiguration = require("../../../Shared/PrimaryComponents/CometChatConfiguration/DateConfiguration");
var _TextBubbleConfiguration = require("../CometChatTextBubble/TextBubbleConfiguration");
var _FileBubbleConfiguration = require("../CometChatFileBubble/FileBubbleConfiguration");
var _ImageBubbleConfiguration = require("../CometChatImageBubble/ImageBubbleConfiguration");
var _AudioBubbleConfiguration = require("../CometChatAudioBubble/AudioBubbleConfiguration");
var _VideoBubbleConfiguration = require("../CometChatVideoBubble/VideoBubbleConfiguration");
var _PollBubbleConfiguration = require("../CometChatPollBubble/PollBubbleConfiguration");
var _StickerBubbleConfiguration = require("../CometChatStickerBubble/StickerBubbleConfiguration");
var _DeletedBubbleConfiguration = require("../CometChatDeletedMessageBubble/DeletedBubbleConfiguration");
var _CollaborativeDocumentConfiguration = require("../CometChatDocumentBubble/CollaborativeDocumentConfiguration");
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
/**
 *CometChatMessageBubble handles the display and functionality for all types of messages in a message list.
 *It renders different bubbles according to the message type provided to it by the parent.
 *
 * @version 1.0.0
 * @author CometChatTeam
 * @copyright © 2022 CometChat Inc.
 */

var CometChatMessageBubble = function CometChatMessageBubble(props) {
  var messageKey = props.messageKey,
    customView = props.customView,
    messageBubbleData = props.messageBubbleData,
    timeAlignment = props.timeAlignment,
    messageOptions = props.messageOptions,
    messageObject = props.messageObject,
    alignment = props.alignment,
    updateReaction = props.updateReaction,
    loggedInUser = props.loggedInUser,
    style = props.style,
    theme = props.theme,
    avatarConfiguration = props.avatarConfiguration,
    messageReceiptConfiguration = props.messageReceiptConfiguration,
    messageReactionsConfiguration = props.messageReactionsConfiguration,
    dateConfiguration = props.dateConfiguration;
  var _React$useState = _react["default"].useState(null),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    isHovering = _React$useState2[0],
    setIsHovering = _React$useState2[1];
  var _theme = new _2.CometChatTheme(theme || {});
  var _avatarConfiguration = avatarConfiguration || new _2.AvatarConfiguration({});
  var _messageReactionsConfiguration = messageReactionsConfiguration || new _MessageReactionsConfiguration.MessageReactionsConfiguration({});

  /**
   *
   * @returns ID for each Bubble rendered
   */
  var getId = function getId() {
    return messageBubbleData !== null && messageBubbleData !== void 0 && messageBubbleData.id && messageObject.id ? messageObject.id : null;
  };

  /**
   *
   * @returns Avatar, if the user enabled thumbnail of messageBubbleData
   */
  var getAvatar = function getAvatar() {
    var _avatarConfiguration$, _avatarConfiguration$2, _avatarConfiguration$3, _avatarConfiguration$4, _avatarConfiguration$5, _theme$palette, _theme$palette2, _avatarConfiguration$6, _theme$typography, _theme$palette3, _theme$palette4, _avatarConfiguration$7, _avatarConfiguration$8, _avatarConfiguration$9, _theme$palette5, _theme$palette6;
    var outerViewWidth = _avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : _avatarConfiguration.outerViewWidth;
    var outerView = "".concat(outerViewWidth, " solid ").concat(_theme.palette.primary[_theme.palette.mode]);
    var avatarStyle = new _Shared.AvatarStyles({
      width: _avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$ = _avatarConfiguration.style) === null || _avatarConfiguration$ === void 0 ? void 0 : _avatarConfiguration$.width,
      height: _avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$2 = _avatarConfiguration.style) === null || _avatarConfiguration$2 === void 0 ? void 0 : _avatarConfiguration$2.height,
      outerViewSpacing: _avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$3 = _avatarConfiguration.style) === null || _avatarConfiguration$3 === void 0 ? void 0 : _avatarConfiguration$3.outerViewSpacing,
      outerView: (_avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$4 = _avatarConfiguration.style) === null || _avatarConfiguration$4 === void 0 ? void 0 : _avatarConfiguration$4.outerViewSpacing) || outerView,
      textColor: (_avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$5 = _avatarConfiguration.style) === null || _avatarConfiguration$5 === void 0 ? void 0 : _avatarConfiguration$5.textColor) || (_theme === null || _theme === void 0 ? void 0 : (_theme$palette = _theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.accent900[_theme === null || _theme === void 0 ? void 0 : (_theme$palette2 = _theme.palette) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.mode]),
      textFont: (_avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$6 = _avatarConfiguration.style) === null || _avatarConfiguration$6 === void 0 ? void 0 : _avatarConfiguration$6.textFont) || (0, _2.fontHelper)(_theme === null || _theme === void 0 ? void 0 : (_theme$typography = _theme.typography) === null || _theme$typography === void 0 ? void 0 : _theme$typography.name),
      border: "1px solid ".concat(_theme === null || _theme === void 0 ? void 0 : (_theme$palette3 = _theme.palette) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.accent600[_theme === null || _theme === void 0 ? void 0 : (_theme$palette4 = _theme.palette) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.mode]),
      borderRadius: _avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$7 = _avatarConfiguration.style) === null || _avatarConfiguration$7 === void 0 ? void 0 : _avatarConfiguration$7.borderRadius,
      backgroundSize: _avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$8 = _avatarConfiguration.style) === null || _avatarConfiguration$8 === void 0 ? void 0 : _avatarConfiguration$8.backgroundSize,
      backgroundColor: (_avatarConfiguration === null || _avatarConfiguration === void 0 ? void 0 : (_avatarConfiguration$9 = _avatarConfiguration.style) === null || _avatarConfiguration$9 === void 0 ? void 0 : _avatarConfiguration$9.backgroundColor) || (_theme === null || _theme === void 0 ? void 0 : (_theme$palette5 = _theme.palette) === null || _theme$palette5 === void 0 ? void 0 : _theme$palette5.accent600[_theme === null || _theme === void 0 ? void 0 : (_theme$palette6 = _theme.palette) === null || _theme$palette6 === void 0 ? void 0 : _theme$palette6.mode])
    });

    // if messageObject has thumbnail key
    if (messageBubbleData !== null && messageBubbleData !== void 0 && messageBubbleData.thumbnail) {
      var _messageObject$sender, _messageObject$sender2;
      if (messageObject !== null && messageObject !== void 0 && (_messageObject$sender = messageObject.sender) !== null && _messageObject$sender !== void 0 && _messageObject$sender.avatar) {
        // If Icon provided
        return /*#__PURE__*/_react["default"].createElement("div", {
          style: (0, _style.messageAvatarStyle)(),
          className: "message_kit__avatar"
        }, /*#__PURE__*/_react["default"].createElement(_2.CometChatAvatar, (0, _extends2["default"])({}, avatarStyle, {
          image: messageObject.sender.avatar
        })));
      } else if (messageObject !== null && messageObject !== void 0 && (_messageObject$sender2 = messageObject.sender) !== null && _messageObject$sender2 !== void 0 && _messageObject$sender2.name) {
        // show initials for name
        return /*#__PURE__*/_react["default"].createElement("div", {
          style: (0, _style.messageAvatarStyle)(),
          className: "message_kit__avatar"
        }, /*#__PURE__*/_react["default"].createElement(_2.CometChatAvatar, (0, _extends2["default"])({}, avatarStyle, {
          name: messageObject.sender.name
        })));
      }
    }
    return null;
  };

  /**
   *
   * @param {*} customView
   * @returns custom Bubble set by The user
   */
  var getCustomView = function getCustomView(customView) {
    return /*#__PURE__*/_react["default"].createElement(customView, _objectSpread({
      key: messageObject.key,
      messageBubbleData: messageBubbleData,
      alignment: alignment,
      timeAlignment: timeAlignment,
      messageObject: messageObject,
      messageOptions: messageOptions,
      loggedInUser: loggedInUser
    }, style));
  };

  /**
   * Displays message options of a bubble when mouse is hovered on it
   */
  var getMessageOptions = function getMessageOptions() {
    return isHovering && messageObject && !messageObject.deletedAt ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_2.CometChatMenuList, {
      isOpen: true,
      key: messageObject.id,
      data: messageObject,
      list: messageOptions,
      style: (0, _style.messageOptionStyle)(alignment, loggedInUser, messageObject, _theme)
    })) : null;
  };

  /**
   *
   * @returns Message text in a bubble of type based on the message itself
   */
  var getMessage = function getMessage() {
    /**
     * Returns a bubble based on messageObject type
     */

    if (customView) {
      return getCustomView(customView);
    } else if (messageObject.category === _2.MessageCategoryConstants.message) {
      var messageStyle = {};

      /** emoji font according to number of emoji to be display */
      var emojiFont = function emojiFont(str) {
        var strLength = str === null || str === void 0 ? void 0 : str.length;
        var fontSize = null;
        if (strLength) {
          var emojiRE = str === null || str === void 0 ? void 0 : str.match(/(?:[\xA9\xAE\u2122\u23E9-\u23EF\u23F3\u23F8-\u23FA\u24C2\u25B6\u2600-\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]|\uD83C[\uDC04\uDCCF\uDD70\uDD71\uDD7E\uDD7F\uDD8E\uDD91-\uDE51\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F\uDE80-\uDEFF]|\uD83E[\uDD00-\uDDFF])/g);
          var numbers = emojiRE === null || emojiRE === void 0 ? void 0 : emojiRE.length;
          if (numbers === 1 && parseInt(strLength / 2) === numbers) {
            fontSize = "32px";
          } else if (numbers === 2 && parseInt(strLength / 2) === numbers) {
            fontSize = "24px";
          } else if (numbers === 3 && parseInt(strLength / 2) === numbers) {
            fontSize = "16px";
          }
        }
        return fontSize;
      };
      switch (messageObject.type) {
        case _2.MessageTypeConstants.text:
          {
            var textColor;
            if (alignment === _2.MessageBubbleAlignmentConstants.right) {
              textColor = {
                textColor: _theme.palette.accent900["light"]
              };
            } else {
              textColor = {
                textColor: _theme.palette.accent900["dark"]
              };
            }
            messageStyle = _objectSpread(_objectSpread(_objectSpread({}, new _Shared.BaseStyles({
              width: "",
              height: "",
              background: "transparent",
              border: "none",
              borderRadius: "12px",
              activeBackground: ""
            })), {}, {
              textFont: emojiFont(messageObject.text) || (0, _2.fontHelper)(_theme.typography.subtitle1)
            }, textColor), {}, {
              linkPreviewTitleFont: (0, _2.fontHelper)(_theme.typography.title2),
              linkPreviewTitleColor: _theme.palette.accent[_theme.palette.mode],
              linkPreviewSubtitleFont: (0, _2.fontHelper)(_theme.typography.subtitle2),
              linkPreviewSubtitleColor: _theme.palette.accent600[_theme.palette.mode],
              linkPreviewBackgroundColor: _theme.palette.background[_theme.palette.mode]
            });
            return /*#__PURE__*/_react["default"].createElement(_.CometChatTextBubble, {
              key: messageObject.id,
              messageObject: messageObject,
              overlayImageURL: _unsafeContent["default"],
              text: "",
              linkPreviewTitle: "",
              linkPreviewSubtitle: "",
              theme: _theme,
              style: messageStyle
            });
          }
        case _2.MessageTypeConstants.image:
          {
            messageStyle = _objectSpread({}, new _Shared.BaseStyles({
              width: "100%",
              height: "168px",
              background: "none",
              border: "none",
              borderRadius: "12px",
              activeBackground: ""
            }));
            return /*#__PURE__*/_react["default"].createElement(_.CometChatImageBubble, {
              key: messageObject.id,
              messageObject: messageObject,
              style: messageStyle
            });
          }
        case _2.MessageTypeConstants.video:
          {
            messageStyle = _objectSpread({}, new _Shared.BaseStyles({
              width: "250px",
              height: "200px",
              background: "none",
              border: "none",
              borderRadius: "12px",
              activeBackground: ""
            }));
            return /*#__PURE__*/_react["default"].createElement(_.CometChatVideoBubble, {
              key: messageObject.id,
              messageObject: messageObject,
              style: messageStyle
            });
          }
        case _2.MessageTypeConstants.audio:
          {
            messageStyle = _objectSpread(_objectSpread({}, new _Shared.BaseStyles({
              width: "250px",
              height: "auto",
              background: "none",
              border: "none",
              borderRadius: "12px",
              activeBackground: ""
            })), {}, {
              iconTint: _theme.palette.primary[_theme.palette.mode]
            });
            return /*#__PURE__*/_react["default"].createElement(_.CometChatAudioBubble, {
              key: messageObject.id,
              messageObject: messageObject,
              style: messageStyle
            });
          }
        case _2.MessageTypeConstants.file:
          {
            messageStyle = _objectSpread(_objectSpread({}, new _Shared.BaseStyles({
              width: "190px",
              height: "56px",
              background: "transparent",
              border: "none",
              borderRadius: "12px",
              activeBackground: ""
            })), {}, {
              titleFont: (0, _2.fontHelper)(_theme.typography.title2),
              subTitleFont: (0, _2.fontHelper)(_theme.typography.subtitle2),
              iconTint: _theme.palette.primary[_theme.palette.mode],
              titleColor: _theme.palette.accent[_theme.palette.mode],
              subTitleColor: _theme.palette.accent600[_theme.palette.mode]
            });
            return /*#__PURE__*/_react["default"].createElement(_.CometChatFileBubble, {
              key: messageObject.id,
              messageObject: messageObject,
              iconURL: _downloadIcon["default"],
              style: messageStyle,
              theme: _theme
            });
          }
        default:
      }
    } else if (props.messageObject.category === _2.MessageCategoryConstants.custom) {
      var customMessageStyle = {};
      switch (messageObject.type) {
        case _2.MessageTypeConstants.poll:
          {
            if (alignment === _2.MessageBubbleAlignmentConstants.right) {
              customMessageStyle = _objectSpread(_objectSpread({}, new _Shared.BaseStyles({
                width: "100%",
                height: "100%",
                background: "transparent",
                border: "none",
                borderRadius: "12px",
                activeBackground: ""
              })), {}, {
                votePercentTextFont: (0, _2.fontHelper)(_theme.typography.subtitle1),
                //not in skecth
                votePercentTextColor: _theme.palette.background[_theme.palette.mode],
                //not in sketch
                pollQuestionTextFont: (0, _2.fontHelper)(_theme.typography.subtitle1),
                pollQuestionTextColor: _theme.palette.accent[_theme.palette.mode],
                pollOptionTextFont: (0, _2.fontHelper)(_theme.typography.subtitle1),
                pollOptionTextColor: _theme.palette.accent[_theme.palette.mode],
                pollOptionsBackground: _theme.palette.background[_theme.palette.mode],
                optionIconTint: style.optionsIconTint || _theme.palette.accent500[_theme.palette.mode],
                totalVoteCountTextFont: (0, _2.fontHelper)(_theme.typography.subtitle2),
                totalVoteCountTextColor: _theme.palette.accent600[_theme.palette.mode],
                selectedPollOptionBackground: style.selectedPollOptionBackground || _theme.palette.primary[_theme.palette.mode]
              });
            } else {
              customMessageStyle = _objectSpread(_objectSpread({}, new _Shared.BaseStyles({
                width: "100%",
                height: "100%",
                background: "transparent",
                border: "none",
                borderRadius: "12px",
                activeBackground: ""
              })), {}, {
                background: "transparent",
                votePercentTextFont: (0, _2.fontHelper)(_theme.typography.subtitle1),
                votePercentTextColor: _theme.palette.background[_theme.palette.mode],
                pollQuestionTextColor: _theme.palette.accent[_theme.palette.mode],
                pollQuestionTextFont: (0, _2.fontHelper)(_theme.typography.subtitle1),
                pollOptionTextFont: (0, _2.fontHelper)(_theme.typography.subtitle1),
                pollOptionTextColor: _theme.palette.accent[_theme.palette.mode],
                pollOptionsBackground: _theme.palette.background[_theme.palette.mode],
                totalVoteCountTextFont: (0, _2.fontHelper)(_theme.typography.subtitle2),
                totalVoteCountTextColor: _theme.palette.accent600[_theme.palette.mode],
                optionIconTint: style.optionsIconTint || _theme.palette.accent500[_theme.palette.mode],
                pollOptionBorder: "none",
                selectedPollOptionBackground: style.selectedPollOptionBackground || _theme.palette.primary[_theme.palette.mode]
              });
            }
            return /*#__PURE__*/_react["default"].createElement(_.CometChatPollBubble, {
              key: messageObject.id,
              messageObject: messageObject,
              pollQuestion: "",
              options: null,
              totalVoteCount: null,
              optionIconURL: null,
              loggedInUser: loggedInUser || loggedInUser,
              theme: _theme,
              style: customMessageStyle
            });
          }
        case _2.MessageTypeConstants.sticker:
          {
            if (alignment === _2.MessageBubbleAlignmentConstants.right || alignment === _2.MessageBubbleAlignmentConstants.left) {
              customMessageStyle = _objectSpread({}, new _Shared.BaseStyles({
                width: "150px",
                height: "auto",
                background: "transparent",
                border: "none",
                borderRadius: "12px",
                activeBackground: ""
              }));
            }
            return /*#__PURE__*/_react["default"].createElement(_.CometChatStickerBubble, {
              key: messageKey,
              messageObject: messageObject,
              style: customMessageStyle
            });
          }
        case _2.MessageTypeConstants.whiteboard:
          {
            if (alignment === _2.MessageBubbleAlignmentConstants.right) {
              customMessageStyle = _objectSpread(_objectSpread({}, new _Shared.BaseStyles({
                width: "228px",
                height: "134px",
                background: "transparent",
                border: "none",
                borderRadius: "12px",
                activeBackground: ""
              })), {}, {
                titleFont: (0, _2.fontHelper)(_theme.typography.title2),
                iconTint: _theme.palette.accent700[_theme.palette.mode],
                titleColor: _theme.palette.accent[_theme.palette.mode],
                subTitleColor: _theme.palette.accent600[_theme.palette.mode],
                subTitleFont: (0, _2.fontHelper)(_theme.typography.subtitle2),
                buttonTextColor: _theme.palette.primary[_theme.palette.mode],
                buttonTextFont: (0, _2.fontHelper)(_theme.typography.title2),
                buttonBackground: "transparent"
              });
            } else {
              customMessageStyle = _objectSpread(_objectSpread({}, new _Shared.BaseStyles({
                width: "228px",
                height: "134px",
                background: "transparent",
                border: "none",
                borderRadius: "12px",
                activeBackground: ""
              })), {}, {
                titleFont: (0, _2.fontHelper)(_theme.typography.title2),
                iconTint: _theme.palette.accent700[_theme.palette.mode],
                titleColor: _theme.palette.accent[_theme.palette.mode],
                subTitleColor: _theme.palette.accent600[_theme.palette.mode],
                subTitleFont: (0, _2.fontHelper)(_theme.typography.subtitle2),
                buttonTextColor: _theme.palette.primary[_theme.palette.mode],
                buttonTextFont: (0, _2.fontHelper)(_theme.typography.title2),
                buttonBackground: "transparent"
              });
            }
            return /*#__PURE__*/_react["default"].createElement(_.CometChatWhiteboardBubble, {
              whiteboardURL: "",
              key: messageKey,
              messageObject: messageObject,
              subTitle: (0, _2.localize)("WHITEBOARD_SUBTITLE_MESSAGE"),
              iconURL: _whiteboard["default"],
              title: (0, _2.localize)("SHARED_COLLABORATIVE_WHITEBOARD"),
              buttonText: (0, _2.localize)("OPEN_WHITEBOARD"),
              theme: _theme,
              style: customMessageStyle
            });
          }
        case _2.MessageTypeConstants.document:
          {
            if (alignment === _2.MessageBubbleAlignmentConstants.right) {
              customMessageStyle = _objectSpread(_objectSpread({}, new _Shared.BaseStyles({
                width: "228px",
                height: "134px",
                background: "transparent",
                border: "none",
                borderRadius: "12px",
                activeBackground: ""
              })), {}, {
                titleFont: (0, _2.fontHelper)(_theme.typography.title2),
                iconTint: _theme.palette.accent700[_theme.palette.mode],
                titleColor: _theme.palette.accent[_theme.palette.mode],
                subTitleColor: _theme.palette.accent600[_theme.palette.mode],
                subTitleFont: (0, _2.fontHelper)(_theme.typography.subtitle2),
                buttonTextColor: _theme.palette.primary[_theme.palette.mode],
                buttonTextFont: (0, _2.fontHelper)(_theme.typography.title2),
                buttonBackground: "transparent"
              });
            } else {
              customMessageStyle = _objectSpread(_objectSpread({}, new _Shared.BaseStyles({
                width: "228px",
                height: "134px",
                background: "transparent",
                border: "none",
                borderRadius: "12px",
                activeBackground: ""
              })), {}, {
                titleFont: (0, _2.fontHelper)(_theme.typography.title2),
                iconTint: _theme.palette.accent700[_theme.palette.mode],
                titleColor: _theme.palette.accent[_theme.palette.mode],
                subTitleColor: _theme.palette.accent600[_theme.palette.mode],
                subTitleFont: (0, _2.fontHelper)(_theme.typography.subtitle2),
                buttonTextColor: _theme.palette.primary[_theme.palette.mode],
                buttonTextFont: (0, _2.fontHelper)(_theme.typography.title2),
                buttonBackground: "transparent"
              });
            }
            return /*#__PURE__*/_react["default"].createElement(_.CometChatDocumentBubble, {
              key: messageKey,
              messageObject: messageObject,
              iconURL: _collaborative["default"],
              title: (0, _2.localize)("SHARED_COLLABORATIVE_DOCUMENT"),
              subTitle: (0, _2.localize)("DOCUMENT_SUBTITLE_MESSAGE"),
              buttonText: (0, _2.localize)("OPEN_DOCUMENT"),
              theme: _theme,
              style: customMessageStyle
            });
          }
        default:
          {
            if (alignment === _2.MessageBubbleAlignmentConstants.right) {
              customMessageStyle = _objectSpread(_objectSpread({}, new _Shared.BaseStyles({
                width: "auto",
                height: "auto",
                background: "transparent",
                border: "none",
                borderRadius: "12px",
                activeBackground: ""
              })), {}, {
                textColor: _theme.palette.primary[_theme.palette.mode],
                textFont: (0, _2.fontHelper)(_theme.typography.subtitle1)
              });
            } else {
              customMessageStyle = _objectSpread(_objectSpread({}, new _Shared.BaseStyles({
                width: "auto",
                height: "auto",
                background: "transparent",
                border: "none",
                borderRadius: "12px",
                activeBackground: ""
              })), {}, {
                textColor: _theme.palette.accent[_theme.palette.mode],
                textFont: (0, _2.fontHelper)(_theme.typography.subtitle1)
              });
            }
            return /*#__PURE__*/_react["default"].createElement(_.CometChatPlaceholderBubble, {
              key: messageKey,
              style: customMessageStyle,
              text: messageObject.type + "message is not supported"
            });
          }
      }
    }
  };

  /**
   * Returns delete bubble view if a message is deleted
   */
  var getDeleteBubble = function getDeleteBubble() {
    return /*#__PURE__*/_react["default"].createElement(_.CometChatDeletedMessageBubble, {
      text: (0, _2.localize)("MESSAGE_IS_DELETED"),
      style: (0, _style.deleteBubbleStyle)(_theme)
    });
  };

  /**
   *
   * @returns Reactions on a message
   */
  var messageReactions = function messageReactions() {
    var reactionsData = (0, _2.getExtensionsData)(messageObject, _2.ExtensionConstants.reactions);
    if (reactionsData && Object.keys(reactionsData).length) {
      return /*#__PURE__*/_react["default"].createElement(_.CometChatMessageReactions, {
        messageObject: messageObject,
        loggedInUser: loggedInUser,
        addReactionIconURL: _messageReactionsConfiguration.addReactionIconURL,
        style: (0, _style.reactionsStyle)(_theme, alignment, messageObject),
        updateReaction: updateReaction
      });
    }
    return null;
  };

  /**
   *
   * @returns translated text on using text translate
   */
  var getTranslatedMessage = function getTranslatedMessage() {
    var _messageObject$metada;
    if (messageObject !== null && messageObject !== void 0 && (_messageObject$metada = messageObject.metadata) !== null && _messageObject$metada !== void 0 && _messageObject$metada.translatedText) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "message_translate__block",
        style: (0, _style.translatedTextBlockStyle)(alignment, _theme)
      }, /*#__PURE__*/_react["default"].createElement("p", {
        className: "message_translate__text",
        style: (0, _style.translateTextStyle)()
      }, messageObject.metadata.translatedText), /*#__PURE__*/_react["default"].createElement("p", {
        className: "message_translate__label",
        style: (0, _style.translateLabelText)(alignment, _theme)
      }, (0, _2.localize)("TRANSLATED_MESSAGE")));
    }
  };

  /**
   * Displays a component when Mouse Hovers on a bubble
   */
  var showMessageOptions = function showMessageOptions() {
    if (!isHovering) {
      setIsHovering(true);
    }
  };

  /**
   * Hides the component when Mouse doesn't hover anymore on the bubble
   */
  var hideMessageOptions = function hideMessageOptions() {
    if (isHovering) {
      setIsHovering(false);
    }
  };

  /**
   *
   * @returns name of the sender
   */
  var getSenderName = function getSenderName() {
    var _messageObject$sender3;
    return messageBubbleData !== null && messageBubbleData !== void 0 && messageBubbleData.title && messageObject !== null && messageObject !== void 0 && (_messageObject$sender3 = messageObject.sender) !== null && _messageObject$sender3 !== void 0 && _messageObject$sender3.name ? /*#__PURE__*/_react["default"].createElement("span", {
      style: (0, _style.messageSenderStyle)(style, _theme),
      className: "message_kit__sender"
    }, messageObject.sender.name) : null;
  };

  /**
   *
   * @returns time of message sent
   */
  var getMessageTime = function getMessageTime() {
    var _dateConfiguration = dateConfiguration || new _DateConfiguration.DateConfiguration({});
    return messageBubbleData !== null && messageBubbleData !== void 0 && messageBubbleData.timestamp && messageObject !== null && messageObject !== void 0 && messageObject.sentAt ? /*#__PURE__*/_react["default"].createElement("div", {
      style: (0, _style.messageTimestampStyle)(style, _theme),
      className: "message_kit__time_bar"
    }, /*#__PURE__*/_react["default"].createElement(_2.CometChatDate, {
      timestamp: messageObject.sentAt || _dateConfiguration.timeStamp,
      pattern: "timeFormat" || _dateConfiguration.pattern,
      style: {
        textFont: style.timestampFont || (0, _2.fontHelper)(_theme.typography.caption1),
        textColor: style.timestampColor || _theme.palette.accent[_theme.palette.mode]
      }
    })) : null;
  };
  var getMessageReceipt = function getMessageReceipt() {
    var _messageReceiptConfiguration = messageReceiptConfiguration || new _2.MessageReceiptConfiguration({});
    return messageBubbleData !== null && messageBubbleData !== void 0 && messageBubbleData.readReceipt ? /*#__PURE__*/_react["default"].createElement(_2.CometChatMessageReceipt, {
      messageObject: messageObject,
      loggedInUser: loggedInUser,
      messageDeliveredIcon: _messageReceiptConfiguration.messageDeliveredIcon,
      messageErrorIcon: _messageReceiptConfiguration.messageErrorIcon,
      messageSentIcon: _messageReceiptConfiguration.messageSentIcon,
      messageWaitIcon: _messageReceiptConfiguration.messageWaitIcon,
      messageReadIcon: _messageReceiptConfiguration.messageReadIcon
    }) : null;
  };
  var getLeftView = function getLeftView() {
    //if the message bubble is aligned to the left

    if (alignment === _2.MessageBubbleAlignmentConstants.left) {
      return messageBubbleData !== null && messageBubbleData !== void 0 && messageBubbleData.thumbnail ? /*#__PURE__*/_react["default"].createElement("div", {
        style: (0, _style.messageLeftGutterStyle)(),
        className: "message_kit__gutter__left"
      }, getAvatar()) : null;

      //if the message bubble is aligned to the right
    } else {
      var _messageObject$sender4;
      var topBar = null;
      var bottomBar = null;

      //if loggedin user is the sender
      if ((loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.uid) === (messageObject === null || messageObject === void 0 ? void 0 : (_messageObject$sender4 = messageObject.sender) === null || _messageObject$sender4 === void 0 ? void 0 : _messageObject$sender4.uid)) {
        //if timestamp is to be shown on the top of the message bubble i.e. similar to slack
        if (timeAlignment.toLowerCase() === _2.MessageTimeAlignmentConstants.top) {
          topBar = messageBubbleData.timestamp || messageBubbleData.title ? /*#__PURE__*/_react["default"].createElement("div", {
            style: (0, _style.messageSenderStyle)(style, _theme),
            className: "message_kit__username_bar"
          }, getMessageTime(), "\xA0", getSenderName()) : null;
          bottomBar = messageBubbleData !== null && messageBubbleData !== void 0 && messageBubbleData.readReceipt ? /*#__PURE__*/_react["default"].createElement("div", {
            style: (0, _style.messageKitReceiptStyle)(),
            className: "message_kit__receipt_bar"
          }, getMessageReceipt()) : null;
        } else if (timeAlignment.toLowerCase() === _2.MessageTimeAlignmentConstants.bottom) {
          topBar = messageBubbleData !== null && messageBubbleData !== void 0 && messageBubbleData.title ? /*#__PURE__*/_react["default"].createElement("div", {
            style: (0, _style.messageSenderStyle)(style, _theme),
            className: "message_kit__username_bar"
          }, getSenderName()) : null;
          bottomBar = messageBubbleData !== null && messageBubbleData !== void 0 && messageBubbleData.timestamp || messageBubbleData !== null && messageBubbleData !== void 0 && messageBubbleData.readReceipt ? /*#__PURE__*/_react["default"].createElement("div", {
            style: (0, _style.messageKitReceiptStyle)(),
            className: "message_kit__receipt_bar"
          }, getMessageTime(), "\xA0", getMessageReceipt()) : null;
        }
      }
      return /*#__PURE__*/_react["default"].createElement("div", {
        style: (0, _style.messageLeftGutterStyle)(),
        className: "message_kit__gutter__left"
      }, topBar, /*#__PURE__*/_react["default"].createElement("div", {
        "data-id": getId(),
        className: "message_kit__hover",
        onMouseEnter: showMessageOptions,
        onMouseLeave: hideMessageOptions
      }, /*#__PURE__*/_react["default"].createElement("div", {
        style: (0, _style.messageBlockStyle)(alignment, style, messageObject, _theme),
        className: "messageBlockStyle"
      }, messageObject && messageObject.deletedAt ? getDeleteBubble() : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, getMessageOptions(), getMessage(), getTranslatedMessage(), messageReactions()))), bottomBar);
    }
  };
  var getRightview = function getRightview() {
    //if the message bubble is aligned to left
    if (alignment === _2.MessageBubbleAlignmentConstants.left) {
      var topBar = getSenderName();
      var bottomBar = null;

      //if timestamp is to be shown on the top of the message bubble i.e. similar to slack
      if (timeAlignment.toLowerCase() === _2.MessageTimeAlignmentConstants.top) {
        var _messageObject$sender5;
        topBar = messageBubbleData.title || messageBubbleData.timestamp ? /*#__PURE__*/_react["default"].createElement("div", {
          style: (0, _style.messageNameTimestampStyle)(),
          className: "message_kit__username_bar"
        }, getSenderName(), "\xA0", getMessageTime()) : null;

        //if loggedin user is the sender of the message
        if ((loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.uid) === (messageObject === null || messageObject === void 0 ? void 0 : (_messageObject$sender5 = messageObject.sender) === null || _messageObject$sender5 === void 0 ? void 0 : _messageObject$sender5.uid) && messageBubbleData !== null && messageBubbleData !== void 0 && messageBubbleData.readReceipt) {
          bottomBar = /*#__PURE__*/_react["default"].createElement("div", {
            style: (0, _style.messageKitReceiptStyle)(),
            className: "message_kit__receipt_bar"
          }, getMessageReceipt());
        }

        //if timestamp is to be shown at the bottom of the message bubble i.e. similar to slack
      } else if (timeAlignment.toLowerCase() === _2.MessageTimeAlignmentConstants.bottom) {
        var _messageObject$sender6;
        //if loggedin user is the sender of the message
        if ((loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.uid) === (messageObject === null || messageObject === void 0 ? void 0 : (_messageObject$sender6 = messageObject.sender) === null || _messageObject$sender6 === void 0 ? void 0 : _messageObject$sender6.uid)) {
          bottomBar = messageBubbleData.timestamp || messageBubbleData.readReceipt ? /*#__PURE__*/_react["default"].createElement("div", {
            style: (0, _style.messageKitReceiptStyle)(),
            className: "message_kit__receipt_bar"
          }, getMessageTime(), "\xA0", getMessageReceipt()) : null;
        } else {
          bottomBar = /*#__PURE__*/_react["default"].createElement("div", {
            style: (0, _style.messageKitReceiptStyle)(),
            className: "message_kit__receipt_bar"
          }, getMessageTime());
        }
      }
      return /*#__PURE__*/_react["default"].createElement("div", {
        style: (0, _style.messageRightGutterStyle)(),
        className: "message_kit__gutter__right"
      }, topBar, /*#__PURE__*/_react["default"].createElement("div", {
        "data-id": getId(),
        className: "message_kit__hover",
        onMouseEnter: showMessageOptions,
        onMouseLeave: hideMessageOptions
      }, /*#__PURE__*/_react["default"].createElement("div", {
        style: (0, _style.messageBlockStyle)(alignment, style, messageObject, _theme),
        className: "messageBlockStyle"
      }, messageObject !== null && messageObject !== void 0 && messageObject.deletedAt ? getDeleteBubble() : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, getMessageOptions(), getMessage(), getTranslatedMessage(), messageReactions()))), bottomBar);
    } else {
      var _messageObject$sender7;
      //if loggedin user is the sender of the message
      if ((loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.uid) === (messageObject === null || messageObject === void 0 ? void 0 : (_messageObject$sender7 = messageObject.sender) === null || _messageObject$sender7 === void 0 ? void 0 : _messageObject$sender7.uid)) {
        return messageBubbleData !== null && messageBubbleData !== void 0 && messageBubbleData.thumbnail ? /*#__PURE__*/_react["default"].createElement("div", {
          style: (0, _style.messageLeftGutterStyle)(),
          className: "message_kit__gutter__right"
        }, getAvatar()) : null;
      }
    }
  };
  return /*#__PURE__*/_react["default"].createElement("div", {
    style: (0, _style.messageActionsStyle)(props, _theme),
    className: "message_kit__actions"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    style: (0, _style.messageGutterStyle)(),
    className: "c-message_kit__gutter"
  }, getLeftView(), getRightview()));
};
exports.CometChatMessageBubble = CometChatMessageBubble;
CometChatMessageBubble.defaultProps = {
  messageBubbleData: {
    id: true,
    thumbnail: true,
    title: false,
    timestamp: true,
    readReceipt: true
  },
  timeAlignment: "bottom",
  messageOptions: [],
  messageObject: null,
  alignment: "standard",
  loggedInUser: null,
  style: {
    width: "",
    height: "",
    nameTextFont: "",
    nameTextColor: "",
    border: "",
    background: "",
    borderRadius: "",
    timestampFont: "",
    timestampColor: ""
  }
};
CometChatMessageBubble.propTypes = {
  messageBubbleData: _propTypes["default"].object,
  timeAlignment: _propTypes["default"].string,
  messageOptions: _propTypes["default"].array,
  messageObject: _propTypes["default"].object,
  alignment: _propTypes["default"].string,
  loggedInUser: _propTypes["default"].object,
  style: _propTypes["default"].object,
  avatarConfiguration: _propTypes["default"].object,
  messageReceiptConfiguration: _propTypes["default"].object,
  messageReactionsConfiguration: _propTypes["default"].object,
  dateConfiguration: _propTypes["default"].object,
  textBubbleConfiguration: _propTypes["default"].object,
  fileBubbleConfiguration: _propTypes["default"].object,
  imageBubbleConfiguration: _propTypes["default"].object,
  audioBubbleConfiguration: _propTypes["default"].object,
  videoBubbleConfiguration: _propTypes["default"].object,
  pollBubbleConfiguration: _propTypes["default"].object,
  stickerBubbleConfiguration: _propTypes["default"].object,
  deletedBubbleConfiguration: _propTypes["default"].object,
  collaborativeWhiteboardConfiguration: _propTypes["default"].object,
  collaborativeDocumentConfiguration: _propTypes["default"].object
};