@zohoim/chat-components 1.1.2-beta.7 → 1.1.3-beta.1

package/lib/im/IMPermaLink/IMPermaLink.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = IMPermaLink;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useIMPermaLink2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/im/IMPermaLink/useIMPermaLink"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+var _IMPermaLinkModule = _interopRequireDefault(require("./css/IMPermaLink.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-disable @zohodesk/zsecurity/no-protocol-check */
+
+/** ** Libraries *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Methods *** */
+
+/** ** Styles *** */
+function IMPermaLink(props) {
+  var customStyle = props.customStyle,
+      isDisabled = props.isDisabled;
+
+  var _useIMPermaLink = (0, _useIMPermaLink2["default"])(props),
+      href = _useIMPermaLink.href,
+      onClick = _useIMPermaLink.onClick,
+      text = _useIMPermaLink.text;
+  /* External CSS Customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_IMPermaLinkModule["default"], customStyle);
+  /* CSS classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    isDisabled: isDisabled
+  }, newStyle),
+      imPermaLinkClass = _cssJSLogic.imPermaLinkClass;
+
+  return text ? /*#__PURE__*/_react["default"].createElement("a", {
+    className: imPermaLinkClass,
+    href: href,
+    onClick: onClick,
+    rel: "noopener noreferrer"
+  }, text) : null;
+}
+
+IMPermaLink.propTypes = _propTypes["default"];
+IMPermaLink.defaultProps = _defaultProps["default"];
+IMPermaLink.displayName = 'IMPermaLink';

package/lib/im/IMPermaLink/css/IMPermaLink.module.css

@@ -0,0 +1,14 @@
+.text {
+  color: var(--imlib_chat_components_imPermaLink_url_color);
+  display: block;
+  composes: dotted from '../../css/common.module.css';
+  cursor: pointer;
+}
+
+.disabled {
+  pointer-events: none;
+}
+
+a.text:hover {
+  text-decoration: underline;
+}

package/lib/im/IMPermaLink/css/cssJSLogic.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+
+var _utils = require("@zohodesk/utils");
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function cssJSLogic(props, style) {
+  var _compileClassNames;
+
+  var isDisabled = props.isDisabled;
+  var imPermaLinkClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.text, true), _defineProperty(_compileClassNames, style.disabled, isDisabled === true), _compileClassNames));
+  return {
+    imPermaLinkClass: imPermaLinkClass
+  };
+}

package/lib/im/IMPermaLink/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "IMPermaLink", {
+  enumerable: true,
+  get: function get() {
+    return _IMPermaLink["default"];
+  }
+});
+
+var _IMPermaLink = _interopRequireDefault(require("./IMPermaLink"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/im/IMPermaLink/props/defaultProps.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var imPermaLinkDefaultProps = {
+  customStyle: _emptyConstants.dummyObject
+};
+var _default = imPermaLinkDefaultProps;
+exports["default"] = _default;

package/lib/im/IMPermaLink/props/propTypes.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var imPermaLinkPropTypes = {
+  text: _propTypes["default"].string.isRequired,
+  customStyle: _propTypes["default"].object,
+  isDisabled: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func,
+  id: _propTypes["default"].string,
+  href: _propTypes["default"].string
+};
+var _default = imPermaLinkPropTypes;
+exports["default"] = _default;

package/lib/im/IMReplyBubble/IMReplyBubble.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = IMReplyBubble;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useIMReplyBubble2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/im/IMReplyBubble/useIMReplyBubble"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _ReplyBubble = _interopRequireDefault(require("../../ReplyBubble/ReplyBubble"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function IMReplyBubble(props) {
+  var replyText = props.replyText,
+      messageDetails = props.messageDetails,
+      customProps = props.customProps,
+      propOnClick = props.onClick,
+      isFailed = props.isFailed;
+  var _customProps$replyBub = customProps.replyBubbleProps,
+      replyBubbleProps = _customProps$replyBub === void 0 ? _emptyConstants.dummyObject : _customProps$replyBub;
+
+  var _useIMReplyBubble = (0, _useIMReplyBubble2["default"])({
+    messageDetails: messageDetails,
+    onClick: propOnClick
+  }),
+      message = _useIMReplyBubble.message,
+      senderName = _useIMReplyBubble.senderName,
+      dateTimeDetails = _useIMReplyBubble.dateTimeDetails,
+      attachmentDetails = _useIMReplyBubble.attachmentDetails,
+      locationUrl = _useIMReplyBubble.locationUrl,
+      onClick = _useIMReplyBubble.onClick;
+
+  return /*#__PURE__*/_react["default"].createElement(_ReplyBubble["default"], _extends({
+    attachmentDetails: attachmentDetails,
+    dateTimeDetails: dateTimeDetails,
+    locationUrl: locationUrl,
+    message: message,
+    onClick: onClick,
+    replyText: replyText,
+    senderName: senderName
+  }, replyBubbleProps, {
+    isFailed: isFailed
+  }));
+}
+
+IMReplyBubble.propTypes = _propTypes["default"];
+IMReplyBubble.defaultProps = _defaultProps["default"];
+IMReplyBubble.displayName = 'IMReplyBubble';

package/lib/im/IMReplyBubble/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "IMReplyBubble", {
+  enumerable: true,
+  get: function get() {
+    return _IMReplyBubble["default"];
+  }
+});
+
+var _IMReplyBubble = _interopRequireDefault(require("./IMReplyBubble"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/im/IMReplyBubble/props/defaultProps.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var imReplyBubbleDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  customProps: _emptyConstants.dummyObject
+};
+var _default = imReplyBubbleDefaultProps;
+exports["default"] = _default;

package/lib/im/IMReplyBubble/props/propTypes.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var imReplyBubblePropTypes = {
+  messageDetails: _propTypes["default"].shape({
+    actor: _propTypes["default"].shape({
+      contactName: _propTypes["default"].string,
+      externalId: _propTypes["default"].string,
+      name: _propTypes["default"].string
+    }).isRequired,
+    displayMessage: _propTypes["default"].string.isRequired,
+    attachment: _propTypes["default"].shape({
+      name: _propTypes["default"].string,
+      type: _propTypes["default"].string,
+      url: _propTypes["default"].string
+    }),
+    dateTimeDetails: _propTypes["default"].shape({
+      displayDateTime: _propTypes["default"].string,
+      tooltip: _propTypes["default"].string
+    }),
+    locationUrl: _propTypes["default"].string
+  }).isRequired,
+  onClick: _propTypes["default"].func.isRequired,
+  replyText: _propTypes["default"].string.isRequired,
+  customProps: _propTypes["default"].shape({
+    replyBubbleProps: _propTypes["default"].object
+  }),
+  isFailed: _propTypes["default"].bool
+};
+var _default = imReplyBubblePropTypes;
+exports["default"] = _default;

package/lib/im/IMTextBubble/IMTextBubble.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = IMTextBubble;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _TextBubble = _interopRequireDefault(require("../../TextBubble/TextBubble"));
+
+var _useIMTextBubble2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/im/IMTextBubble/useIMTextBubble"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function IMTextBubble(props) {
+  var moreText = props.moreText,
+      customProps = props.customProps,
+      isFailed = props.isFailed;
+  var _customProps$textBubb = customProps.textBubbleProps,
+      textBubbleProps = _customProps$textBubb === void 0 ? _emptyConstants.dummyObject : _customProps$textBubb;
+
+  var _useIMTextBubble = (0, _useIMTextBubble2["default"])(props),
+      onLoadFullMessage = _useIMTextBubble.onLoadFullMessage,
+      sanitizedDisplayMessage = _useIMTextBubble.sanitizedDisplayMessage,
+      isShowSeeMore = _useIMTextBubble.isShowSeeMore;
+
+  return /*#__PURE__*/_react["default"].createElement(_TextBubble["default"], _extends({
+    message: sanitizedDisplayMessage,
+    moreText: isShowSeeMore ? moreText : '',
+    onClickMore: onLoadFullMessage
+  }, textBubbleProps, {
+    isFailed: isFailed
+  }));
+}
+
+IMTextBubble.propTypes = _propTypes["default"];
+IMTextBubble.defaultProps = _defaultProps["default"];
+IMTextBubble.displayName = 'IMTextBubble';

package/lib/im/IMTextBubble/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "IMTextBubble", {
+  enumerable: true,
+  get: function get() {
+    return _IMTextBubble["default"];
+  }
+});
+
+var _IMTextBubble = _interopRequireDefault(require("./IMTextBubble"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/im/IMTextBubble/props/defaultProps.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _messageConstants = require("@zohoim/chat-components-utils/es/constants/messageConstants");
+
+/** ** Constants *** */
+var imTextBubbleDefaultProps = {
+  customProps: _emptyConstants.dummyObject,
+  messageMaxLength: _messageConstants.TEXT_MESSAGE_MAX_LENGTH
+};
+var _default = imTextBubbleDefaultProps;
+exports["default"] = _default;

package/lib/im/IMTextBubble/props/propTypes.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var imTextBubblePropTypes = {
+  messageDetails: _propTypes["default"].shape({
+    displayMessage: _propTypes["default"].string.isRequired,
+    attachment: _propTypes["default"].shape({
+      name: _propTypes["default"].string,
+      type: _propTypes["default"].string
+    }),
+    contentType: _propTypes["default"].string,
+    fullContentURL: _propTypes["default"].string,
+    fullMessage: _propTypes["default"].string,
+    id: _propTypes["default"].string
+  }).isRequired,
+  customProps: _propTypes["default"].shape({
+    textBubbleProps: _propTypes["default"].object
+  }),
+  messageMaxLength: _propTypes["default"].number,
+  markDownOptions: _propTypes["default"].shape({
+    applyLink: _propTypes["default"].bool,
+    isRemoveUrl: _propTypes["default"].bool
+  }),
+  moreText: _propTypes["default"].string,
+  onLoadFullMessage: _propTypes["default"].func,
+  sessionDetails: _propTypes["default"].shape({
+    id: _propTypes["default"].string
+  }),
+  isFailed: _propTypes["default"].bool,
+  isShowFullContent: _propTypes["default"].bool
+};
+var _default = imTextBubblePropTypes;
+exports["default"] = _default;

package/lib/im/ReplyComposer/ReplyComposer.js

@@ -0,0 +1,176 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ReplyComposer;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _ReplyEditor = _interopRequireDefault(require("../ReplyEditor/ReplyEditor"));
+
+var _ReplyComposerFooter = _interopRequireDefault(require("../ReplyComposerFooter/ReplyComposerFooter"));
+
+var _ReplyEditorSuggestions = _interopRequireDefault(require("../ReplyEditorSuggestions/ReplyEditorSuggestions"));
+
+var _AttachmentPreview = _interopRequireDefault(require("../../AttachmentPreview/AttachmentPreview"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useReplyComposer2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/im/ReplyComposer/useReplyComposer"));
+
+var _useReplyComposerSuggestions = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/im/ReplyComposer/useReplyComposerSuggestions"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _renderHandler = _interopRequireDefault(require("@zohoim/chat-components-utils/es/common/renderHandler"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+var _ReplyComposerModule = _interopRequireDefault(require("./css/ReplyComposer.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ReplyComposer(props) {
+  var customStyle = props.customStyle,
+      id = props.id,
+      content = props.content,
+      EDITORURL = props.EDITORURL,
+      placeHolder = props.placeHolder,
+      features = props.features,
+      formats = props.formats,
+      suggestions = props.suggestions,
+      isHTMLContent = props.isHTMLContent,
+      onChange = props.onChange,
+      propOnKeyDown = props.onKeyDown,
+      onPaste = props.onPaste,
+      _props$customProps = props.customProps,
+      customProps = _props$customProps === void 0 ? _emptyConstants.dummyObject : _props$customProps,
+      extensions = props.extensions,
+      _props$files = props.files,
+      files = _props$files === void 0 ? _emptyConstants.dummyArray : _props$files,
+      filesDescription = props.filesDescription,
+      onChangeFileDescription = props.onChangeFileDescription,
+      propOnFileCancel = props.onFileCancel,
+      propOnFileSubmit = props.onFileSubmit,
+      attachmentPreviewTexts = props.attachmentPreviewTexts,
+      renderHeader = props.renderHeader,
+      renderFooter = props.renderFooter,
+      renderStencils = props.renderStencils,
+      propGetEditorState = props.getEditorState,
+      needFooter = props.needFooter;
+  var _customProps$replyEdi = customProps.replyEditorSuggestionsProps,
+      replyEditorSuggestionsProps = _customProps$replyEdi === void 0 ? _emptyConstants.dummyObject : _customProps$replyEdi,
+      _customProps$replyCom = customProps.replyComposerFooterProps,
+      replyComposerFooterProps = _customProps$replyCom === void 0 ? _emptyConstants.dummyObject : _customProps$replyCom;
+
+  var _useReplyComposerSugg = (0, _useReplyComposerSuggestions["default"])({
+    features: features,
+    suggestions: suggestions,
+    isHTMLContent: isHTMLContent
+  }),
+      allFeatures = _useReplyComposerSugg.features,
+      suggestionsMapping = _useReplyComposerSugg.suggestionsMapping,
+      suggestionDetails = _useReplyComposerSugg.suggestionDetails,
+      isShowSuggestion = _useReplyComposerSugg.isShowSuggestion,
+      getSuggetPopupMethods = _useReplyComposerSugg.getSuggetPopupMethods,
+      onHideSuggestions = _useReplyComposerSugg.onHideSuggestions,
+      onSuggestPopupKeyDown = _useReplyComposerSugg.onSuggestPopupKeyDown,
+      onSelectSuggestion = _useReplyComposerSugg.onSelectSuggestion;
+
+  var _useReplyComposer = (0, _useReplyComposer2["default"])({
+    onKeyDown: propOnKeyDown,
+    isShowSuggestion: isShowSuggestion,
+    onSuggestPopupKeyDown: onSuggestPopupKeyDown,
+    EDITORURL: EDITORURL,
+    onPaste: onPaste,
+    customProps: customProps,
+    onFileCancel: propOnFileCancel,
+    onFileSubmit: propOnFileSubmit,
+    getEditorState: propGetEditorState
+  }),
+      getEditorState = _useReplyComposer.getEditorState,
+      editor = _useReplyComposer.editor,
+      onKeyDown = _useReplyComposer.onKeyDown,
+      attachmentPreviewCustomProps = _useReplyComposer.attachmentPreviewCustomProps,
+      replyEditorCustomProps = _useReplyComposer.replyEditorCustomProps,
+      onFileCancel = _useReplyComposer.onFileCancel,
+      onFileSubmit = _useReplyComposer.onFileSubmit,
+      isLoading = _useReplyComposer.isLoading,
+      isLoaded = _useReplyComposer.isLoaded;
+  /* External customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_ReplyComposerModule["default"], customStyle);
+  /* CSS classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    isLoaded: isLoaded
+  }, newStyle),
+      replEditorWrapperClass = _cssJSLogic.replEditorWrapperClass;
+
+  var headerElement = (0, _react.useMemo)(function () {
+    return (0, _renderHandler["default"])(renderHeader)();
+  }, [renderHeader]);
+  var stencilsElement = (0, _react.useMemo)(function () {
+    return isLoading ? (0, _renderHandler["default"])(renderStencils)({
+      needFooter: needFooter
+    }) : null;
+  }, [renderStencils, needFooter, isLoading]);
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    className: newStyle.replyComposer,
+    isCover: false
+  }, isShowSuggestion ? /*#__PURE__*/_react["default"].createElement(_ReplyEditorSuggestions["default"], _extends({
+    getMethods: getSuggetPopupMethods,
+    onClose: onHideSuggestions,
+    onSelect: onSelectSuggestion,
+    suggestionDetails: suggestionDetails,
+    suggestionsMapping: suggestionsMapping
+  }, replyEditorSuggestionsProps)) : null, files.length > 0 ? /*#__PURE__*/_react["default"].createElement(_AttachmentPreview["default"], _extends({
+    descriptionDetails: filesDescription,
+    files: files,
+    isDescriptionNeeded: true,
+    needEditImage: false,
+    onCancel: onFileCancel,
+    onDescriptionChange: onChangeFileDescription,
+    onSubmit: onFileSubmit,
+    texts: attachmentPreviewTexts
+  }, attachmentPreviewCustomProps)) : null, isLoaded ? headerElement : null, stencilsElement || null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: replEditorWrapperClass
+  }, /*#__PURE__*/_react["default"].createElement(_ReplyEditor["default"], _extends({
+    content: content,
+    EDITORURL: EDITORURL,
+    features: allFeatures,
+    formats: formats,
+    getEditorState: getEditorState,
+    id: id,
+    isHTMLContent: isHTMLContent,
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    onPaste: onPaste,
+    placeHolder: placeHolder
+  }, replyEditorCustomProps))), needFooter && isLoaded ? /*#__PURE__*/_react["default"].createElement(_ReplyComposerFooter["default"], _extends({
+    editor: editor,
+    extensions: extensions,
+    isHTMLContent: isHTMLContent,
+    renderButtons: renderFooter
+  }, replyComposerFooterProps)) : null);
+}
+
+ReplyComposer.propTypes = _propTypes["default"];
+ReplyComposer.defaultProps = _defaultProps["default"];
+ReplyComposer.displayName = 'ReplyComposer';

package/lib/im/ReplyComposer/css/ReplyComposer.module.css

@@ -0,0 +1,10 @@
+/** ** Styles *** */
+
+.replyComposer {
+  /** ** Use this class for css customisation *** */
+}
+
+.hidden {
+  visibility: hidden;
+  height: 0 ;
+}

package/lib/im/ReplyComposer/css/cssJSLogic.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+
+var _utils = require("@zohodesk/utils");
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function cssJSLogic(props, style) {
+  var isLoaded = props.isLoaded;
+  var replEditorWrapperClass = (0, _utils.compileClassNames)(_defineProperty({}, style.hidden, !isLoaded));
+  return {
+    replEditorWrapperClass: replEditorWrapperClass
+  };
+}

package/lib/im/ReplyComposer/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ReplyComposer", {
+  enumerable: true,
+  get: function get() {
+    return _ReplyComposer["default"];
+  }
+});
+
+var _ReplyComposer = _interopRequireDefault(require("./ReplyComposer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/im/ReplyComposer/props/defaultProps.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var replyComposerDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  needFooter: true
+};
+var _default = replyComposerDefaultProps;
+exports["default"] = _default;