cometchat-react-ui-kit2/dist/Messages/CometChatMessageComposer/index.js

CometChat UI Kit for React App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CometChatMessageComposer = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _chat = require("@cometchat-pro/chat");
var _ = require("../..");
var _2 = require("..");
var _CometChatMessageHelper = require("../CometChatMessageHelper");
var _CometChatMessageConstants = require("../CometChatMessageConstants");
var _hooks = require("./hooks");
var _style = require("./style");
var _MessagePreviewConfiguration = require("../CometChatMessagePreview/MessagePreviewConfiguration");
var _EmojiKeyboardConfiguration = require("../CometChatEmojiKeyboard/EmojiKeyboardConfiguration");
var _CreatePollConfiguration = require("../CometChatCreatePoll/CreatePollConfiguration");
var _StickerKeyboardConfiguration = require("../CometChatStickerKeyboard/StickerKeyboardConfiguration");
var _Shared = require("../../Shared");
var _addCircleFilled = _interopRequireDefault(require("./resources/add-circle-filled.svg"));
var _emoji = _interopRequireDefault(require("./resources/emoji.svg"));
var _sendMessage = _interopRequireDefault(require("./resources/send-message.svg"));
var _closeCircle = _interopRequireDefault(require("./resources/close-circle.svg"));
var _heart = _interopRequireDefault(require("./resources/heart.png"));
var _delete = _interopRequireDefault(require("./resources/delete.svg"));
var _this = void 0;
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; }
/**
 *
 * CometChatMessageComposer component part of messages component it's takes user input text,image,video etc,after pressing send button
 * it's append messages in message list, with additonal CometChat SDK conversation object.
 *
 * @version 1.0.0
 * @author CometChatTeam
 * @copyright © 2022 CometChat Inc.
 *
 */
var CometChatMessageComposer = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  var _React$useState = _react["default"].useState(null),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    chatWith = _React$useState2[0],
    setChatWith = _React$useState2[1];
  var _React$useState3 = _react["default"].useState(null),
    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
    chatWithId = _React$useState4[0],
    setChatWithId = _React$useState4[1];
  var _React$useState5 = _react["default"].useState(""),
    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
    messageInput = _React$useState6[0],
    setMessageInput = _React$useState6[1];
  var _React$useState7 = _react["default"].useState(false),
    _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
    viewAttachButton = _React$useState8[0],
    setViewAttachButton = _React$useState8[1];
  var _React$useState9 = _react["default"].useState(false),
    _React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
    viewSticker = _React$useState10[0],
    setViewSticker = _React$useState10[1];
  var _React$useState11 = _react["default"].useState(null),
    _React$useState12 = (0, _slicedToArray2["default"])(_React$useState11, 2),
    viewStickerTray = _React$useState12[0],
    setViewStickerTray = _React$useState12[1];
  var _React$useState13 = _react["default"].useState({}),
    _React$useState14 = (0, _slicedToArray2["default"])(_React$useState13, 2),
    viewActionSheet = _React$useState14[0],
    setViewActionSheet = _React$useState14[1];
  var _React$useState15 = _react["default"].useState([]),
    _React$useState16 = (0, _slicedToArray2["default"])(_React$useState15, 2),
    actionSheetItems = _React$useState16[0],
    setActionSheetItems = _React$useState16[1];
  var _React$useState17 = _react["default"].useState(false),
    _React$useState18 = (0, _slicedToArray2["default"])(_React$useState17, 2),
    viewCreatePoll = _React$useState18[0],
    setViewCreatePoll = _React$useState18[1];
  var _React$useState19 = _react["default"].useState({}),
    _React$useState20 = (0, _slicedToArray2["default"])(_React$useState19, 2),
    viewEmojiTray = _React$useState20[0],
    setViewEmojiTray = _React$useState20[1];
  var _React$useState21 = _react["default"].useState(null),
    _React$useState22 = (0, _slicedToArray2["default"])(_React$useState21, 2),
    messagePreview = _React$useState22[0],
    setMessagePreview = _React$useState22[1];
  var _React$useState23 = _react["default"].useState(true),
    _React$useState24 = (0, _slicedToArray2["default"])(_React$useState23, 2),
    viewInputField = _React$useState24[0],
    setViewInputField = _React$useState24[1];
  var stickerTemplate = _react["default"].useRef(null);
  var loggedInUser = _react["default"].useRef(null);
  var isTyping = null;
  var liveReactionTimeout = 0;
  var disabledState = false;
  var messageInputRef = _react["default"].useRef(null);
  var fileInputRef = _react["default"].useRef(null);
  var chatRef = _react["default"].useRef(chatWith);
  var user = props.user,
    group = props.group,
    hideAttachment = props.hideAttachment,
    attachmentIconURL = props.attachmentIconURL,
    stickerCloseIconURL = props.stickerCloseIconURL,
    placeholderText = props.placeholderText,
    hideLiveReaction = props.hideLiveReaction,
    liveReactionIconURL = props.liveReactionIconURL,
    hideEmoji = props.hideEmoji,
    emojiIconURL = props.emojiIconURL,
    showSendButton = props.showSendButton,
    sendButtonIconURL = props.sendButtonIconURL,
    onSendButtonClick = props.onSendButtonClick,
    messageTypes = props.messageTypes,
    excludeMessageTypes = props.excludeMessageTypes,
    enableTypingIndicator = props.enableTypingIndicator,
    enableSoundForMessage = props.enableSoundForMessage,
    customOutgoingMessageSound = props.customOutgoingMessageSound,
    style = props.style,
    messagePreviewConfiguration = props.messagePreviewConfiguration,
    emojiKeyboardConfiguration = props.emojiKeyboardConfiguration,
    stickerKeyboardConfiguration = props.stickerKeyboardConfiguration,
    createPollConfiguration = props.createPollConfiguration,
    actionSheetConfiguration = props.actionSheetConfiguration,
    theme = props.theme;
  var _theme = new _.CometChatTheme(theme !== null && theme !== void 0 ? theme : {});

  /**,
   * Event callbacks
   */
  _react["default"].useImperativeHandle(ref, function () {
    return {
      previewMessageForEdit: previewMessage
    };
  });
  var draftMessage = function draftMessage() {};
  var previewMessage = function previewMessage(message) {
    setMessagePreview({
      message: message,
      mode: _.ConversationOptionConstants.edit
    });
    setMessageInput(message.text);
    var element = messageInputRef.current;
    var messageText = message.text;

    //xss extensions data
    var xssData = (0, _2.getExtensionsData)(message, _.MetadataConstants.extensions.xssFilter);
    if (xssData && xssData.hasOwnProperty(_.ExtensionConstants.sanitizedText) && xssData.hasOwnProperty(_.ExtensionConstants.hasXSS) && xssData.hasXSS === _.ExtensionConstants.yes) {
      messageText = xssData.sanitized_text;
    }
    element.focus();
    element.textContent = "";
    pasteHtmlAtCaret(messageText, false);
  };
  var playAudio = function playAudio() {
    if (customOutgoingMessageSound) {
      _.CometChatSoundManager.play(_.CometChatSoundManager.Sound.outgoingMessage, customOutgoingMessageSound);
    } else {
      _.CometChatSoundManager.play(_.CometChatSoundManager.Sound.outgoingMessage);
    }
  };
  var closeMessagePreview = function closeMessagePreview() {
    setMessagePreview(null);
    setMessageInput("");
    messageInputRef.current.textContent = "";
  };
  var sendMessageOnEnter = function sendMessageOnEnter(event) {
    if (event.keyCode === 13 && !event.shiftKey) {
      event.preventDefault();
      sendTextMessage();
    }
  };

  /** send text message */
  var sendTextMessage = function sendTextMessage() {
    setViewEmojiTray(false);
    if (!messageInput.trim().length) {
      return false;
    }
    if (messagePreview && messagePreview.mode === _.ConversationOptionConstants.edit) {
      editMessage(messagePreview.message);
      return false;
    }
    var textMessage = new _chat.CometChat.TextMessage(chatWithId, messageInput, chatWith);
    textMessage.setSender(loggedInUser.current);
    textMessage.setReceiver(chatWith);
    textMessage.setText(messageInput);
    textMessage.setSentAt((0, _CometChatMessageHelper.getUnixTimestamp)());
    textMessage.setMuid(String((0, _CometChatMessageHelper.getUnixTimestamp)()));
    _2.CometChatMessageEvents.emit(_2.CometChatMessageEvents.onMessageSent, {
      message: textMessage,
      status: _CometChatMessageConstants.messageStatus.inprogress
    });
    if (enableSoundForMessage) playAudio();
    setMessageInput("");
    messageInputRef.current.textContent = "";
    _chat.CometChat.sendMessage(textMessage).then(function (message) {
      var messageObject = _objectSpread({}, message);
      _2.CometChatMessageEvents.emit(_2.CometChatMessageEvents.onMessageSent, {
        message: messageObject,
        status: _CometChatMessageConstants.messageStatus.success
      });
    })["catch"](function (error) {
      _2.CometChatMessageEvents.emit(_2.CometChatMessageEvents.onMessageError, {
        message: textMessage,
        error: error
      });
    });
    if (onSendButtonClick) {
      onSendButtonClick();
    }
  };

  /** send media message */
  var sendMediaMessage = function sendMediaMessage(messageInput, messageType) {
    setViewActionSheet(false);
    var mediaMessage = new _chat.CometChat.MediaMessage(chatWithId, messageInput, messageType, chatWith);
    mediaMessage.setSender(loggedInUser.current);
    mediaMessage.setReceiver(chatWith);
    mediaMessage.setType(messageType);
    mediaMessage.setMetadata((0, _defineProperty2["default"])({}, _.MetadataConstants.file, messageInput));
    mediaMessage.setSentAt((0, _CometChatMessageHelper.getUnixTimestamp)());
    mediaMessage.setMuid(String((0, _CometChatMessageHelper.getUnixTimestamp)()));
    _2.CometChatMessageEvents.emit(_2.CometChatMessageEvents.onMessageSent, {
      message: mediaMessage,
      status: _CometChatMessageConstants.messageStatus.inprogress
    });
    if (enableSoundForMessage) playAudio();
    _chat.CometChat.sendMessage(mediaMessage).then(function (message) {
      var messageObject = _objectSpread({}, message);
      _2.CometChatMessageEvents.emit(_2.CometChatMessageEvents.onMessageSent, {
        message: messageObject,
        status: _CometChatMessageConstants.messageStatus.success
      });
    })["catch"](function (error) {
      _2.CometChatMessageEvents.emit(_2.CometChatMessageEvents.onMessageError, {
        message: mediaMessage,
        error: error
      });
    });
  };

  /** send sticker */
  var sendSticker = function sendSticker(stickerMessage) {
    var customData = {
      sticker_url: stickerMessage.stickerUrl,
      sticker_name: stickerMessage.stickerName
    };
    var customMessage = new _chat.CometChat.CustomMessage(chatWithId, chatWith, _2.CometChatCustomMessageTypes.sticker, customData);
    customMessage.setSender(loggedInUser.current);
    customMessage.setReceiver(chatWith);
    customMessage.setMetadata({
      incrementUnreadCount: true
    });
    customMessage.setSentAt((0, _CometChatMessageHelper.getUnixTimestamp)());
    customMessage.setMuid(String((0, _CometChatMessageHelper.getUnixTimestamp)()));
    _2.CometChatMessageEvents.emit(_2.CometChatMessageEvents.onMessageSent, {
      message: customMessage,
      status: _CometChatMessageConstants.messageStatus.inprogress
    });
    if (enableSoundForMessage) playAudio();
    _chat.CometChat.sendCustomMessage(customMessage).then(function (message) {
      var messageObject = _objectSpread({}, message);
      _2.CometChatMessageEvents.emit(_2.CometChatMessageEvents.onMessageSent, {
        message: messageObject,
        status: _CometChatMessageConstants.messageStatus.success
      });
    })["catch"](function (error) {
      _2.CometChatMessageEvents.emit(_2.CometChatMessageEvents.onMessageError, {
        message: customMessage,
        error: error
      });
    });
  };

  /** edit message */
  var editMessage = function editMessage(message) {
    endTyping(null, null);
    var messageText = messageInput.trim();
    var textMessage = new _chat.CometChat.TextMessage(chatWithId, messageText, chatWith);
    textMessage.setId(messagePreview.message.id);
    setMessageInput("");
    messageInputRef.current.textContent = "";
    if (enableSoundForMessage) playAudio();
    setMessagePreview(null);
    _chat.CometChat.editMessage(textMessage).then(function (editedMessage) {
      _2.CometChatMessageEvents.emit(_2.CometChatMessageEvents.onMessageEdit, {
        message: editedMessage,
        status: _CometChatMessageConstants.messageStatus.success
      });
    })["catch"](function (error) {
      _2.CometChatMessageEvents.emit(_2.CometChatMessageEvents.onMessageError, {
        message: textMessage,
        error: error
      });
    });
  };
  var startTyping = function startTyping(endTypingTimeout, typingMetadata) {
    //if typing is disabled
    if (!enableTypingIndicator) {
      return false;
    }

    //if typing is in progress
    if (isTyping) {
      return false;
    }
    var typingInterval = endTypingTimeout || 5000;
    var metadata = typingMetadata || undefined;
    var typingNotification = new _chat.CometChat.TypingIndicator(chatWithId, chatWith, metadata);
    _chat.CometChat.startTyping(typingNotification);
    isTyping = setTimeout(function () {
      endTyping(null, typingMetadata);
    }, typingInterval);
  };
  var endTyping = function endTyping(event, typingMetadata) {
    if (event) {
      event.persist();
    }
    if (!enableTypingIndicator) {
      return false;
    }
    var metadata = typingMetadata || undefined;
    var typingNotification = new _chat.CometChat.TypingIndicator(chatWithId, chatWith, metadata);
    _chat.CometChat.endTyping(typingNotification);
    clearTimeout(isTyping);
    isTyping = null;
  };
  var fileInputHandler = function fileInputHandler(event) {
    setViewActionSheet(false);
    if (!fileInputRef.current) {
      return false;
    }
    fileInputRef.current.click();
  };

  /** fileInputChangeHandler */
  var fileInputChangeHandler = function fileInputChangeHandler(event) {
    setViewActionSheet(false);
    var uploadedFile = event.target.files["0"];
    var fileNameType = uploadedFile.type.split("/");
    var reader = new FileReader();
    reader.addEventListener("load", function (event) {
      var newFile = new File([reader.result], uploadedFile.name, uploadedFile);
      switch (fileNameType[0]) {
        case "image":
          sendMediaMessage(newFile, _.MessageTypeConstants.image);
          break;
        case "video":
          sendMediaMessage(newFile, _.MessageTypeConstants.video);
          break;
        case "audio":
          sendMediaMessage(newFile, _.MessageTypeConstants.audio);
          break;
        case "file":
          sendMediaMessage(newFile, _.MessageTypeConstants.file);
          break;
        default:
          sendMediaMessage(newFile, _.MessageTypeConstants.file);
          break;
      }
      fileInputRef.current.value = "";
    }, false);
    reader.readAsArrayBuffer(uploadedFile);
  };

  /** closeCreatePoll */
  var closeCreatePoll = function closeCreatePoll() {
    setViewCreatePoll(false);
  };

  /** onPollSubmit */
  var onPollSubmit = function onPollSubmit() {
    setViewCreatePoll(false);
  };

  /** openCreatePoll  */
  var openCreatePoll = function openCreatePoll() {
    setViewActionSheet(false);
    setViewCreatePoll(true);
  };

  /** share collaborative document */
  var shareCollaborativeDocument = function shareCollaborativeDocument() {
    setViewActionSheet(false);
    _chat.CometChat.callExtension(_.ExtensionConstants.document, _.ExtensionConstants.post, _.ExtensionURLs.document, {
      receiver: chatRef.current.chatWithId,
      receiverType: chatRef.current.chatWith
    })["catch"](function (error) {
      _2.CometChatMessageEvents.emit(_2.CometChatMessageEvents.onMessageError, error);
    });
  };

  /** share collaborative whitevoard */
  var shareCollaborativeWhiteboard = function shareCollaborativeWhiteboard() {
    setViewActionSheet(false);
    _chat.CometChat.callExtension(_.ExtensionConstants.whiteboard, _.ExtensionConstants.post, _.ExtensionURLs.whiteboard, {
      receiver: chatRef.current.chatWithId,
      receiverType: chatRef.current.chatWith
    })["catch"](function (error) {
      _2.CometChatMessageEvents.emit(_2.CometChatMessageEvents.onMessageError, error);
    });
  };

  /** handleInputEvent */
  var handleInputEvent = function handleInputEvent(event) {
    startTyping();
    var elem = event.currentTarget;
    var messageInput = elem.textContent.trim();
    if (!messageInput.length) {
      event.currentTarget.textContent = messageInput;
    }
    setMessageInput(elem.innerText);
  };

  /** inputChangeHandler */
  var inputChangeHandler = function inputChangeHandler(event) {
    setTimeout(handleInputEvent(event), 500);
  };

  /** composer sticker iconClickHandler */
  var toggleStickersTray = function toggleStickersTray() {
    setViewStickerTray(function (prevViewStickerOption) {
      return !prevViewStickerOption;
    });
  };
  var pasteHtmlAtCaret = function pasteHtmlAtCaret(html, selectPastedContent) {
    var sel, range;
    var chatWindow = window;
    if (chatWindow.getSelection) {
      // IE9 and non-IE
      sel = chatWindow.getSelection();
      if (sel.getRangeAt && sel.rangeCount) {
        range = sel.getRangeAt(0);
        range.deleteContents();
        // Range.createContextualFragment() would be useful here but is
        // only relatively recently standardized and is not supported in
        // some browsers (IE9, for one)
        var el = document.createElement("div");
        el.innerText = html;
        var frag = document.createDocumentFragment(),
          node,
          lastNode;
        while (node = el.firstChild) {
          lastNode = frag.appendChild(node);
        }
        var firstNode = frag.firstChild;
        range.insertNode(frag);
        if (lastNode) {
          range = range.cloneRange();
          range.setStartAfter(lastNode);
          if (selectPastedContent) {
            range.setStartBefore(firstNode);
          } else {
            range.collapse(true);
          }
          sel.removeAllRanges();
          sel.addRange(range);
        }
      }
    } else if ((sel = document.selection) && sel.type !== "Control") {
      // IE < 9
      var originalRange = sel.createRange();
      originalRange.collapse(true);
      sel.createRange().pasteHTML(html);
      if (selectPastedContent) {
        range = sel.createRange();
        range.setEndPoint("StartToStart", originalRange);
        range.select();
      }
    }
  };

  /** select emoji from emojikeyboard */
  var onEmojiSelect = function onEmojiSelect(emojiObject) {
    var element = messageInputRef.current;
    element.focus();
    element.innerText = "";
    pasteHtmlAtCaret(messageInput + emojiObject, false);
    setMessageInput(element.innerText);
  };

  /** composer pluse button  onClickHandler */
  var attachmentClickHandler = function attachmentClickHandler(event) {
    setViewActionSheet(function (old) {
      return {
        actionSheet: !old.actionSheet,
        event: event
      };
    });
  };

  /** composer  emoji onClickHandler  */
  var emojiClickHandler = function emojiClickHandler(event) {
    setViewEmojiTray(function (old) {
      return {
        emojiTrayPreview: !old.emojiTrayPreview,
        event: event
      };
    });
  };

  /** composer  sticker onClickHandler  */
  var stickerClickHandler = function stickerClickHandler() {
    if (stickerTemplate.current.actionCallback) {
      stickerTemplate.current.actionCallback();
    } else {
      toggleStickersTray();
    }
  };

  /** if already live reaction in progress */
  var shareLiveReaction = function shareLiveReaction() {
    if (liveReactionTimeout) {
      return false;
    }

    /** fetching the metadata type from constants */
    var data = {
      type: _.MetadataConstants.liveReaction,
      reaction: liveReactionIconURL || _heart["default"]
    };

    /*** send transient message */
    var transientMessage = new _chat.CometChat.TransientMessage(chatWithId, chatWith, data);
    _chat.CometChat.sendTransientMessage(transientMessage);

    /** set timeout till the next share */
    liveReactionTimeout = setTimeout(clearTimeout(liveReactionTimeout), _2.messageConstants.liveReactionTimeout);

    /** emit event to share live reaction */
    var payload = {
      reaction: liveReactionIconURL || _heart["default"]
    };
    _2.CometChatMessageEvents.emit(_2.CometChatMessageEvents.onLiveReaction, payload);
  };

  /** attach/composr pluse icon */
  var attachOption = function attachOption() {
    return viewAttachButton ? /*#__PURE__*/_react["default"].createElement("div", {
      style: (0, _style.stickyAttachButtonStyle)(),
      className: "attachment__icon",
      onClick: attachmentClickHandler.bind(_this),
      title: (0, _.localize)("ATTACH")
    }, /*#__PURE__*/_react["default"].createElement("i", {
      style: (0, _style.attchButtonIconStyle)(style, attachmentIconURL, _theme)
    })) : null;
  };

  /**CreatePollConfiguration */
  var _actionSheetConfiguration = actionSheetConfiguration !== null && actionSheetConfiguration !== void 0 ? actionSheetConfiguration : new _Shared.ActionSheetConfiguration({});

  /**  action sheet render under tooltip */
  var actionSheetBoard = function actionSheetBoard() {
    var _viewActionSheet$even, _viewActionSheet$even2, _actionSheetConfigura;
    return viewActionSheet.actionSheet ? /*#__PURE__*/_react["default"].createElement(_.CometChatPopover, {
      position: "top",
      x: viewActionSheet === null || viewActionSheet === void 0 ? void 0 : (_viewActionSheet$even = viewActionSheet.event) === null || _viewActionSheet$even === void 0 ? void 0 : _viewActionSheet$even.clientX,
      y: viewActionSheet === null || viewActionSheet === void 0 ? void 0 : (_viewActionSheet$even2 = viewActionSheet.event) === null || _viewActionSheet$even2 === void 0 ? void 0 : _viewActionSheet$even2.clientY,
      style: (0, _style.actionSheetPopoverStyle)(_theme)
    }, /*#__PURE__*/_react["default"].createElement(_.CometChatActionSheet, {
      title: (0, _.localize)("ADD_TO_CHAT"),
      layoutModeIconURL: (_actionSheetConfigura = _actionSheetConfiguration === null || _actionSheetConfiguration === void 0 ? void 0 : _actionSheetConfiguration.roundedPlus) !== null && _actionSheetConfigura !== void 0 ? _actionSheetConfigura : _addCircleFilled["default"],
      theme: _theme,
      style: (0, _style.actionSheetStyle)(_theme),
      actions: actionSheetItems
    })) : null;
  };

  /**CreatePollConfiguration */
  var _createPollConfiguration = createPollConfiguration !== null && createPollConfiguration !== void 0 ? createPollConfiguration : new _CreatePollConfiguration.CreatePollConfiguration({});
  var title = (0, _.localize)("CREATE_POLL");
  var questionPlaceholderText = (0, _.localize)("QUESTION");
  var answerPlaceholderText = (0, _.localize)("ANSWER");
  var addAnswerText = (0, _.localize)("ADD_ANSWER");
  var answerHelpText = (0, _.localize)("SET_THE_ANSWERS");

  /** createpoll */
  var createPoll = function createPoll() {
    return viewCreatePoll ? /*#__PURE__*/_react["default"].createElement(_.CometChatPopover, {
      withBackDrop: viewCreatePoll ? true : false,
      style: (0, _style.popoverForCreatePollStyle)(_theme, _createPollConfiguration)
    }, /*#__PURE__*/_react["default"].createElement(_2.CometChatCreatePoll, {
      closeIconURL: _createPollConfiguration.closeIconURL || _closeCircle["default"],
      title: title,
      addAnswerIconURL: _createPollConfiguration.addAnswerIconURL || _addCircleFilled["default"],
      createPollButtonText: (0, _.localize)("SEND"),
      deleteIconURL: _createPollConfiguration.deleteIconURL || _delete["default"],
      defaultAnswers: 2,
      theme: _theme,
      style: (0, _style.createPollStyle)(_theme, _createPollConfiguration),
      questionPlaceholderText: questionPlaceholderText,
      addAnswerText: addAnswerText,
      answerPlaceholderText: answerPlaceholderText,
      answerHelpText: answerHelpText,
      user: user,
      group: group,
      onClose: _createPollConfiguration.onClose || closeCreatePoll,
      onCreatePoll: _createPollConfiguration.onCreatePoll || onPollSubmit
    })) : null;
  };

  /** sticker button */
  var stickerButton = function stickerButton() {
    var _stickerTemplate$curr;
    return viewSticker ? /*#__PURE__*/_react["default"].createElement("div", {
      title: (0, _.localize)("STICKER"),
      style: (0, _style.stickerBtnStyle)(),
      className: "button__sticker",
      onClick: stickerClickHandler
    }, /*#__PURE__*/_react["default"].createElement("i", {
      style: (0, _style.stickerBtnIconStyle)(style, viewStickerTray ? stickerCloseIconURL : stickerTemplate === null || stickerTemplate === void 0 ? void 0 : (_stickerTemplate$curr = stickerTemplate.current) === null || _stickerTemplate$curr === void 0 ? void 0 : _stickerTemplate$curr.icon, _theme)
    })) : null;
  };

  /** messagePreviewConfiguration */

  var _messagePreviewConfiguration = messagePreviewConfiguration || new _MessagePreviewConfiguration.MessagePreviewConfiguration({});

  /** message preview  */
  var previewTray = function previewTray() {
    var _messagePreview$messa;
    return messagePreview ? /*#__PURE__*/_react["default"].createElement(_2.CometChatMessagePreview, {
      messagePreviewTitle: _messagePreviewConfiguration.messagePreviewTitle || (0, _.localize)("MESSAGE_EDIT"),
      messagePreviewSubtitle: _messagePreviewConfiguration.messagePreviewSubtitle || (messagePreview === null || messagePreview === void 0 ? void 0 : (_messagePreview$messa = messagePreview.message) === null || _messagePreview$messa === void 0 ? void 0 : _messagePreview$messa.text),
      closeIconURL: _messagePreviewConfiguration.closeIconURL || _closeCircle["default"],
      onCloseClick: _messagePreviewConfiguration.onCloseClick || closeMessagePreview.bind(_this),
      theme: _theme,
      style: (0, _style.messagePreviewStyle)(_theme, _messagePreviewConfiguration)
    }) : null;
  };

  /**StickerKeyboardConfiguration */
  var _stickerKeyboardConfiguration = stickerKeyboardConfiguration !== null && stickerKeyboardConfiguration !== void 0 ? stickerKeyboardConfiguration : new _StickerKeyboardConfiguration.StickerKeyboardConfiguration({});

  /** sticker board */
  var stickerTray = function stickerTray() {
    return viewStickerTray ? /*#__PURE__*/_react["default"].createElement(_2.CometChatStickerKeyboard, {
      onClick: sendSticker.bind(_this),
      onClose: _stickerKeyboardConfiguration.onClose || toggleStickersTray,
      emptyText: (0, _.localize)("NO_STICKERS_FOUND"),
      errorText: (0, _.localize)("SOMETHING_WRONG"),
      loadingText: (0, _.localize)("LOADING"),
      theme: _theme,
      style: (0, _style.stickerKeyboardStyle)(_theme, _stickerKeyboardConfiguration)
    }) : null;
  };

  /** emoji icon */
  var emojiButton = function emojiButton() {
    return !hideEmoji ? /*#__PURE__*/_react["default"].createElement("div", {
      title: (0, _.localize)("EMOJI"),
      style: (0, _style.emojiButtonStyle)(),
      className: "button__emoji",
      onClick: emojiClickHandler.bind(_this)
    }, /*#__PURE__*/_react["default"].createElement("i", {
      style: (0, _style.emojiBtnIconStyle)(style, emojiIconURL, _theme)
    })) : null;
  };

  /** EmojiKeyboardConfiguration */
  var _emojiKeyboardConfiguration = emojiKeyboardConfiguration || new _EmojiKeyboardConfiguration.EmojiKeyboardConfiguration({});

  /** emoji board */
  var emojiBoard = function emojiBoard() {
    if (viewEmojiTray.emojiTrayPreview) {
      var _viewEmojiTray$event, _viewEmojiTray$event2;
      return /*#__PURE__*/_react["default"].createElement(_.CometChatPopover, {
        position: "top",
        x: viewEmojiTray === null || viewEmojiTray === void 0 ? void 0 : (_viewEmojiTray$event = viewEmojiTray.event) === null || _viewEmojiTray$event === void 0 ? void 0 : _viewEmojiTray$event.clientX,
        y: viewEmojiTray === null || viewEmojiTray === void 0 ? void 0 : (_viewEmojiTray$event2 = viewEmojiTray.event) === null || _viewEmojiTray$event2 === void 0 ? void 0 : _viewEmojiTray$event2.clientY,
        style: (0, _style.emojiBoardPopoverStyle)(_theme, _emojiKeyboardConfiguration)
      }, /*#__PURE__*/_react["default"].createElement(_2.CometChatEmojiKeyboard, {
        theme: _theme,
        style: (0, _style.emojiKeyBoardStyle)(_theme, _emojiKeyboardConfiguration),
        onClick: (_emojiKeyboardConfiguration === null || _emojiKeyboardConfiguration === void 0 ? void 0 : _emojiKeyboardConfiguration.onClick) || onEmojiSelect.bind(_this)
      }));
    } else {
      return null;
    }
  };

  /** live reaction button */
  var liveReactionButton = function liveReactionButton() {
    var _messageInputRef$curr;
    if (!hideLiveReaction && !(messageInputRef !== null && messageInputRef !== void 0 && (_messageInputRef$curr = messageInputRef.current) !== null && _messageInputRef$curr !== void 0 && _messageInputRef$curr.innerText)) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        style: (0, _style.reactionBtnStyle)(),
        className: "button__reactions",
        onClick: shareLiveReaction.bind(_this)
      }, /*#__PURE__*/_react["default"].createElement("img", {
        src: liveReactionIconURL,
        alt: liveReactionIconURL,
        title: (0, _.localize)("LIVE_REACTION"),
        style: (0, _style.reactionBtnIconStyle)()
      }));
    }
    return null;
  };

  /** send button */
  var sendButton = function sendButton() {
    return messageInput !== null && messageInput !== void 0 && messageInput.length && showSendButton ? /*#__PURE__*/_react["default"].createElement("div", {
      title: (0, _.localize)("SEND_MESSAGE"),
      style: (0, _style.sendButtonStyle)(),
      className: "button__send",
      onClick: sendTextMessage
    }, /*#__PURE__*/_react["default"].createElement("i", {
      style: (0, _style.sendBtnIconStyle)(style, sendButtonIconURL, _theme)
    })) : null;
  };

  /**message input field*/
  var inputField = function inputField() {
    return viewInputField ? /*#__PURE__*/_react["default"].createElement("div", {
      style: (0, _style.messageInputStyle)(style, disabledState, _theme),
      className: "input__message-input",
      contentEditable: "true",
      placeholder: placeholderText,
      dir: _.CometChatLocalize.getDir(),
      onInput: inputChangeHandler,
      onBlur: endTyping.bind(_this),
      onKeyDown: sendMessageOnEnter,
      ref: messageInputRef
    }) : null;
  };
  (0, _hooks.Hooks)(props, loggedInUser, setChatWith, setChatWithId, chatRef, setViewSticker, stickerTemplate, setActionSheetItems, setViewInputField, setViewAttachButton, openCreatePoll, fileInputHandler, shareCollaborativeDocument, shareCollaborativeWhiteboard, sendSticker);
  return /*#__PURE__*/_react["default"].createElement("div", {
    style: (0, _style.chatComposerStyle)(style, _theme),
    className: "chat__composer"
  }, previewTray(), stickerTray(), emojiBoard(), actionSheetBoard(), /*#__PURE__*/_react["default"].createElement("input", {
    type: "file",
    ref: fileInputRef,
    style: (0, _style.fileInputStyle)(),
    onChange: fileInputChangeHandler
  }), /*#__PURE__*/_react["default"].createElement("div", {
    style: (0, _style.composerInputStyle)(style),
    className: "composer__input"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    tabIndex: "-1",
    style: (0, _style.inputInnerStyle)(style, _theme),
    className: "input__inner"
  }, inputField(), /*#__PURE__*/_react["default"].createElement("div", {
    style: (0, _style.inputStickyStyle)(disabledState, attachOption(), _theme),
    className: "input__sticky"
  }, attachOption(), /*#__PURE__*/_react["default"].createElement("div", {
    className: "input__sticky__buttons",
    style: (0, _style.stickyButtonStyle)()
  }, stickerButton(), emojiButton(), liveReactionButton(), sendButton())))), createPoll());
});
exports.CometChatMessageComposer = CometChatMessageComposer;
CometChatMessageComposer.defaultProps = {
  user: null,
  group: null,
  style: _objectSpread(_objectSpread({}, new _Shared.BaseStyles({
    width: "100%",
    height: "auto",
    background: "rgb(255, 255, 255)",
    border: "1px solid rgb(234, 234, 234)",
    borderRadius: "8px",
    activeBackground: ""
  })), {}, {
    placeholderTextFont: "400 15px Inter, sans-serif",
    placeholderTextColor: "rgba(20, 20, 20,0.6)",
    attachmentIconTint: "rgba(20, 20, 20, 0.46)",
    sendButtonIconTint: "#39f",
    inputBackground: "",
    inputTextFont: "",
    inputTextColor: "",
    emojiIconTint: "rgba(20, 20, 20, 0.46)",
    stickerIconTint: "rgba(20, 20, 20, 0.46)",
    stickerCloseIconTint: ""
  }),
  attachmentIconURL: _addCircleFilled["default"],
  stickerCloseIconURL: "",
  placeholderText: (0, _.localize)("ENTER_YOUR_MESSAGE_HERE"),
  hideAttachment: false,
  liveReactionIconURL: _heart["default"],
  hideLiveReaction: false,
  hideEmoji: false,
  emojiIconURL: _emoji["default"],
  showSendButton: true,
  sendButtonIconURL: _sendMessage["default"],
  messageTypes: null,
  excludeMessageTypes: null,
  onSendButtonClick: null,
  enableTypingIndicator: true,
  enableSoundForMessage: true,
  customOutgoingMessageSound: null,
  messagePreviewConfiguration: null,
  emojiKeyboardConfiguration: null,
  stickerKeyboardConfiguration: null,
  createPollConfiguration: null,
  actionSheetConfiguration: null
};
CometChatMessageComposer.propTypes = {
  user: _propTypes["default"].instanceOf(_chat.CometChat.User),
  group: _propTypes["default"].instanceOf(_chat.CometChat.Group),
  hideAttachment: _propTypes["default"].bool,
  attachmentIconURL: _propTypes["default"].string,
  stickerCloseIconURL: _propTypes["default"].string,
  placeholderText: _propTypes["default"].string,
  hideLiveReaction: _propTypes["default"].bool,
  liveReactionIconURL: _propTypes["default"].string,
  hideEmoji: _propTypes["default"].bool,
  emojiIconURL: _propTypes["default"].string,
  showSendButton: _propTypes["default"].bool,
  sendButtonIconURL: _propTypes["default"].string,
  onSendButtonClick: _propTypes["default"].func,
  messageTypes: _propTypes["default"].array,
  excludeMessageTypes: _propTypes["default"].array,
  enableTypingIndicator: _propTypes["default"].bool,
  enableSoundForMessage: _propTypes["default"].bool,
  customOutgoingMessageSound: _propTypes["default"].string,
  style: _propTypes["default"].object,
  messagePreviewConfiguration: _propTypes["default"].object,
  emojiKeyboardConfiguration: _propTypes["default"].object,
  stickerKeyboardConfiguration: _propTypes["default"].object,
  createPollConfiguration: _propTypes["default"].object,
  actionSheetConfiguration: _propTypes["default"].object,
  theme: _propTypes["default"].object
};