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

package/lib/MoreActionItem/css/MoreActionItem.module.css

@@ -0,0 +1,27 @@
+.varClass {
+  --moreActionItem-content_padding: 10px;
+  --moreActionItem-content_size: 14px;
+}
+
+.listItem {
+  /* Use this class name for list item customization */
+}
+
+.iconWrapper {
+  /* Use this class name for list item icon customization */
+  display: flex;
+}
+
+.text {
+  composes: varClass;
+  font-size: var(--moreActionItem-content_size);
+  composes: dotted from "../../css/common.module.css";
+}
+
+[dir=ltr] .text {
+  padding-left: var(--moreActionItem-content_padding);
+}
+
+[dir=rtl] .text {
+  padding-right: var(--moreActionItem-content_padding);
+}

package/lib/MoreActionItem/index.js

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

package/lib/MoreActionItem/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 moreActionItemDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  needIcon: true
+};
+var _default = moreActionItemDefaultProps;
+exports["default"] = _default;

package/lib/MoreActionItem/props/propTypes.js

@@ -0,0 +1,25 @@
+"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 moreActionItemPropTypes = {
+  displayText: _propTypes["default"].string.isRequired,
+  onClick: _propTypes["default"].func.isRequired,
+  onMouseEnter: _propTypes["default"].func,
+  closePopup: _propTypes["default"].func,
+  customStyle: _propTypes["default"].object,
+  id: _propTypes["default"].string,
+  needIcon: _propTypes["default"].bool,
+  renderIcon: _propTypes["default"].func,
+  title: _propTypes["default"].string
+};
+var _default = moreActionItemPropTypes;
+exports["default"] = _default;

package/lib/ReplyBubble/ReplyBubble.js

@@ -0,0 +1,136 @@
+"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"] = ReplyBubble;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _ReplyBubbleModule = _interopRequireDefault(require("./css/ReplyBubble.module.css"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+var _ReplyBubbleHeader = _interopRequireDefault(require("../ReplyBubbleHeader/ReplyBubbleHeader"));
+
+var _ReplyBubbleContent = _interopRequireDefault(require("../ReplyBubbleContent/ReplyBubbleContent"));
+
+var _AttachmentIcon = _interopRequireDefault(require("../AttachmentIcon/AttachmentIcon"));
+
+var _LocationBubble = _interopRequireDefault(require("../LocationBubble/LocationBubble"));
+
+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 ReplyBubble(props) {
+  var customStyle = props.customStyle,
+      senderName = props.senderName,
+      dateTimeDetails = props.dateTimeDetails,
+      replyText = props.replyText,
+      message = props.message,
+      attachmentDetails = props.attachmentDetails,
+      locationUrl = props.locationUrl,
+      onClick = props.onClick,
+      customProps = props.customProps,
+      isFailed = props.isFailed;
+  var _customProps$headerPr = customProps.headerProps,
+      headerProps = _customProps$headerPr === void 0 ? _emptyConstants.dummyObject : _customProps$headerPr,
+      _customProps$contentP = customProps.contentProps,
+      contentProps = _customProps$contentP === void 0 ? _emptyConstants.dummyObject : _customProps$contentP,
+      _customProps$iconProp = customProps.iconProps,
+      iconProps = _customProps$iconProp === void 0 ? _emptyConstants.dummyObject : _customProps$iconProp;
+
+  var _ref = attachmentDetails || _emptyConstants.dummyObject,
+      fileName = _ref.fileName,
+      fileURL = _ref.fileURL,
+      fileFormat = _ref.fileFormat,
+      mediaType = _ref.mediaType,
+      isValidAttachment = _ref.isValidAttachment;
+  /* External CSS Customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_ReplyBubbleModule["default"], customStyle);
+  /* css classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    isFailed: isFailed
+  }, newStyle),
+      imageWrapperClass = _cssJSLogic.imageWrapperClass;
+
+  var iconStyle = (0, _react.useMemo)(function () {
+    return {
+      $icon: newStyle.attachmentIcon
+    };
+  }, [newStyle.attachmentIcon]);
+  var renderMessage = (0, _react.useCallback)(function () {
+    if (locationUrl) {
+      return /*#__PURE__*/_react["default"].createElement(_LocationBubble["default"], {
+        isFailed: isFailed,
+        locationUrl: locationUrl
+      });
+    }
+
+    if (message) {
+      // eslint-disable-next-line @zohodesk/zsecurity/no-unsecure-html, react/no-danger
+      return /*#__PURE__*/_react["default"].createElement("span", {
+        dangerouslySetInnerHTML: {
+          __html: message
+        }
+      });
+    }
+
+    return null;
+  }, [message, locationUrl, isFailed]);
+  var renderIcon = (0, _react.useCallback)(function () {
+    if (fileURL) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: imageWrapperClass
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        alt: fileName,
+        className: newStyle.image,
+        src: fileURL
+      }));
+    }
+
+    if (fileFormat) {
+      return /*#__PURE__*/_react["default"].createElement(_AttachmentIcon["default"], _extends({
+        customStyle: iconStyle,
+        fileFormat: fileFormat,
+        isValidAttachment: isValidAttachment,
+        mediaType: mediaType
+      }, iconProps));
+    }
+
+    return null;
+  }, [fileURL, fileName, fileFormat, isValidAttachment, mediaType, iconStyle, iconProps, newStyle.image, imageWrapperClass]);
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_ReplyBubbleHeader["default"], _extends({
+    dateTimeDetails: dateTimeDetails,
+    isFailed: isFailed,
+    replyText: replyText
+  }, headerProps)), /*#__PURE__*/_react["default"].createElement(_ReplyBubbleContent["default"], _extends({
+    isFailed: isFailed,
+    onClick: onClick,
+    renderIcon: renderIcon,
+    renderMessage: renderMessage,
+    senderName: senderName
+  }, contentProps)));
+}
+
+ReplyBubble.propTypes = _propTypes["default"];
+ReplyBubble.defaultProps = _defaultProps["default"];
+ReplyBubble.displayName = 'ReplyBubble';

package/lib/ReplyBubble/css/ReplyBubble.module.css

@@ -0,0 +1,23 @@
+.attachmentIcon {
+  height: var(--zd_size40)  !important;
+  width: var(--zd_size40)  !important;
+}
+
+.imageWrapper {
+  height: var(--zd_size60) ;
+  width: var(--zd_size60) ;
+  overflow: hidden;
+  border-radius: 3px;
+  border: 1px solid var(--imlib_chat_components_replyBubble_border_color);
+}
+
+.imageWrapperFailed{
+  border-color: var(--imlib_chat_components_replyBubble_border_color_failed);
+}
+
+.image {
+  width: 100% ;
+  height: 100% ;
+  object-fit: cover;
+  border-radius: 3px;
+}

package/lib/ReplyBubble/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 isFailed = props.isFailed;
+  var imageWrapperClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.imageWrapper, true), _defineProperty(_compileClassNames, style.imageWrapperFailed, isFailed), _compileClassNames));
+  return {
+    imageWrapperClass: imageWrapperClass
+  };
+}

package/lib/ReplyBubble/index.js

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

package/lib/ReplyBubble/props/defaultProps.js

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

package/lib/ReplyBubble/props/propTypes.js

@@ -0,0 +1,39 @@
+"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 replyBubblePropTypes = {
+  message: _propTypes["default"].string.isRequired,
+  onClick: _propTypes["default"].func.isRequired,
+  replyText: _propTypes["default"].string.isRequired,
+  senderName: _propTypes["default"].string.isRequired,
+  attachmentDetails: _propTypes["default"].shape({
+    fileFormat: _propTypes["default"].string,
+    fileName: _propTypes["default"].string,
+    fileURL: _propTypes["default"].string,
+    isValidAttachment: _propTypes["default"].bool,
+    mediaType: _propTypes["default"].string
+  }),
+  locationUrl: _propTypes["default"].string,
+  customProps: _propTypes["default"].shape({
+    contentProps: _propTypes["default"].object,
+    headerProps: _propTypes["default"].object,
+    iconProps: _propTypes["default"].object
+  }),
+  customStyle: _propTypes["default"].object,
+  dateTimeDetails: _propTypes["default"].shape({
+    displayDateTime: _propTypes["default"].string,
+    tooltip: _propTypes["default"].string
+  }),
+  isFailed: _propTypes["default"].bool
+};
+var _default = replyBubblePropTypes;
+exports["default"] = _default;

package/lib/ReplyBubbleContent/ReplyBubbleContent.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ReplyBubbleContent;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+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 _ReplyBubbleContentModule = _interopRequireDefault(require("./css/ReplyBubbleContent.module.css"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Methods *** */
+
+/** ** Styles *** */
+
+/** ** Components *** */
+function ReplyBubbleContent(props) {
+  var customStyle = props.customStyle,
+      senderName = props.senderName,
+      renderIcon = props.renderIcon,
+      renderMessage = props.renderMessage,
+      isFailed = props.isFailed,
+      onClick = props.onClick;
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_ReplyBubbleContentModule["default"], customStyle);
+  /* css classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    isFailed: isFailed
+  }, newStyle),
+      replyBubbleContentClass = _cssJSLogic.replyBubbleContentClass;
+
+  var icon = (0, _renderHandler["default"])(renderIcon)();
+  var messageContent = (0, _renderHandler["default"])(renderMessage)();
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: replyBubbleContentClass,
+    isCover: false,
+    onClick: onClick
+  }, icon ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.iconWrapper
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "both"
+  }, icon)) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.name
+  }, senderName), messageContent ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.messageWrapper
+  }, messageContent) : null));
+}
+
+ReplyBubbleContent.propTypes = _propTypes["default"];
+ReplyBubbleContent.defaultProps = _defaultProps["default"];
+ReplyBubbleContent.displayName = 'ReplyBubbleContent';

package/lib/ReplyBubbleContent/css/ReplyBubbleContent.module.css

@@ -0,0 +1,75 @@
+.replyBubbleContent {
+  position: relative;
+  background-color: var(--imlib_chat_components_replyBubbleContent_bg_color);
+  border: 1px solid var(--imlib_chat_components_replyBubbleContent_border_color);
+  border-radius: 3px;
+  margin: var(--zd_size5) 0 ;
+  cursor: pointer;
+}[dir=ltr] .replyBubbleContent {
+  padding: var(--zd_size10) var(--zd_size10) var(--zd_size10) var(--zd_size20) ;
+}[dir=rtl] .replyBubbleContent {
+  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size10) ;
+}
+
+.failedReplyBubbleContent{
+  background-color: var(--imlib_chat_components_replyBubbleContent_bg_color_failed);
+  border-color: var(--imlib_chat_components_replyBubbleContent_border_color_failed);
+}
+
+.replyBubbleContent::after {
+  content: '';
+  width: var(--zd_size2) ;
+  display: block;
+  position: absolute;
+  top: var(--zd_size10) ;
+  bottom: var(--zd_size10) ;
+  background-color: var(--imlib_chat_components_replyBubbleContent_line_color);
+  border-radius: 30px;
+}
+
+[dir=ltr] .replyBubbleContent::after {
+  left: var(--zd_size10) ;
+}
+
+[dir=rtl] .replyBubbleContent::after {
+  right: var(--zd_size10) ;
+}
+
+.failedReplyBubbleContent::after{
+  background-color: var(--imlib_chat_components_replyBubbleContent_line_color_failed);
+}
+
+.name {
+  color: var(--imlib_chat_components_replyBubbleContent_sender_color);
+  font-size: var(--zd_font_size15) ;
+  line-height: 1.5;
+  composes: dotted from "../../css/common.module.css";
+  font-family: var(--zd_semibold);
+}
+
+.failedReplyBubbleContent .name{
+  color: var(--imlib_chat_components_replyBubbleContent_sender_color_failed);
+}
+
+[dir=ltr] .iconWrapper {
+  margin-right: var(--zd_size10) ;
+}
+
+[dir=rtl] .iconWrapper {
+  margin-left: var(--zd_size10) ;
+}
+
+.messageWrapper {
+  color: var(--imlib_chat_components_replyBubbleContent_content_color);
+  font-size: var(--zd_font_size13) ;
+  line-height: 1.5;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+  overflow: hidden;
+}
+
+.failedReplyBubbleContent .messageWrapper{ 
+  color: var(--imlib_chat_components_replyBubbleContent_content_color_failed);
+}

package/lib/ReplyBubbleContent/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 isFailed = props.isFailed;
+  var replyBubbleContentClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.replyBubbleContent, true), _defineProperty(_compileClassNames, style.failedReplyBubbleContent, isFailed), _compileClassNames));
+  return {
+    replyBubbleContentClass: replyBubbleContentClass
+  };
+}

package/lib/ReplyBubbleContent/index.js

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

package/lib/ReplyBubbleContent/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 replyBubbleContentDefaultProps = {
+  customStyle: _emptyConstants.dummyObject
+};
+var _default = replyBubbleContentDefaultProps;
+exports["default"] = _default;

package/lib/ReplyBubbleContent/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 replyBubbleContentPropTypes = {
+  renderIcon: _propTypes["default"].func.isRequired,
+  renderMessage: _propTypes["default"].func.isRequired,
+  senderName: _propTypes["default"].string.isRequired,
+  customStyle: _propTypes["default"].object,
+  isFailed: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func
+};
+var _default = replyBubbleContentPropTypes;
+exports["default"] = _default;

package/lib/ReplyBubbleHeader/ReplyBubbleHeader.js

@@ -0,0 +1,97 @@
+"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"] = ReplyBubbleHeader;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _ReplyBubbleHeaderModule = _interopRequireDefault(require("./css/ReplyBubbleHeader.module.css"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _Reply = _interopRequireDefault(require("@zohodesk/icon/es/general/Reply"));
+
+var _renderHandler = _interopRequireDefault(require("@zohoim/chat-components-utils/es/common/renderHandler"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+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; }
+
+/** ** Libraries *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Styles *** */
+
+/** ** Components *** */
+
+/** ** Icons *** */
+
+/** ** Methods *** */
+function ReplyBubbleHeader(props) {
+  var customStyle = props.customStyle,
+      replyText = props.replyText,
+      dateTimeDetails = props.dateTimeDetails,
+      renderCustomReplyIcon = props.renderCustomReplyIcon,
+      isFailed = props.isFailed;
+  var displayDateTime = dateTimeDetails.displayDateTime,
+      tooltip = dateTimeDetails.tooltip;
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_ReplyBubbleHeaderModule["default"], customStyle);
+  var iconStyle = (0, _react.useMemo)(function () {
+    return {
+      base: newStyle.replyIcon
+    };
+  }, [newStyle.replyIcon]);
+  /* css classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    isFailed: isFailed
+  }, newStyle),
+      replyBubbleHeaderClass = _cssJSLogic.replyBubbleHeaderClass;
+
+  var renderIcon = (0, _react.useCallback)(function () {
+    var customIcon = (0, _renderHandler["default"])(renderCustomReplyIcon)();
+    return customIcon || /*#__PURE__*/_react["default"].createElement(_Reply["default"], {
+      customStyle: iconStyle
+    });
+  }, [iconStyle, renderCustomReplyIcon]);
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: replyBubbleHeaderClass
+  }, renderIcon(), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "between",
+    alignBox: "row"
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.replyText,
+    flexible: true
+  }, replyText), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.time,
+    "data-title": tooltip,
+    flexible: true
+  }, displayDateTime))));
+}
+
+ReplyBubbleHeader.propTypes = _propTypes["default"];
+ReplyBubbleHeader.defaultProps = _defaultProps["default"];
+ReplyBubbleHeader.displayName = 'ReplyBubbleHeader';