@zohoim/chat-components 1.1.4-beta.1 → 1.1.4-beta.2

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

package/lib/LazyLoadImage/props/propTypes.js

@@ -0,0 +1,19 @@
+"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 lazyLoadImagePropTypes = {
+  src: _propTypes["default"].string.isRequired,
+  alternate: _propTypes["default"].string,
+  customStyle: _propTypes["default"].object
+};
+var _default = lazyLoadImagePropTypes;
+exports["default"] = _default;

package/lib/LocationBubble/LocationBubble.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = LocationBubble;
+
+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 _Layout = require("@zohodesk/components/es/Layout");
+
+var _LocationBubbleModule = _interopRequireDefault(require("./css/LocationBubble.module.css"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+/* eslint-disable @zohodesk/zsecurity/no-protocol-check */
+
+/** ** Libraries *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Components *** */
+
+/** ** Styles *** */
+
+/** ** Methods *** */
+function LocationBubble(props) {
+  var customStyle = props.customStyle,
+      locationUrl = props.locationUrl,
+      isFailed = props.isFailed;
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_LocationBubbleModule["default"], customStyle);
+  /* css classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    isFailed: isFailed
+  }, newStyle),
+      locationBubbleClass = _cssJSLogic.locationBubbleClass;
+
+  return /*#__PURE__*/_react["default"].createElement("a", {
+    className: newStyle.container,
+    href: locationUrl,
+    rel: "noreferrer noopener",
+    target: "_blank"
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: locationBubbleClass,
+    isCover: false
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.imageWrapper,
+    shrink: true
+  }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.textWrapper,
+    flexible: true
+  }, /*#__PURE__*/_react["default"].createElement("a", {
+    className: newStyle.textLink,
+    "data-title": locationUrl
+  }, locationUrl))));
+}
+
+LocationBubble.propTypes = _propTypes["default"];
+LocationBubble.defaultProps = _defaultProps["default"];
+LocationBubble.displayName = 'LocationBubble';

package/lib/LocationBubble/css/LocationBubble.module.css

@@ -0,0 +1,57 @@
+.imageWrapper {
+  width: var(--zd_size60) ;
+  height: var(--zd_size60) ;
+  background-image: url('../images/location.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 3px;
+}
+
+.locationBubble {
+  white-space: nowrap;
+  width: 100% ;
+  box-sizing: border-box;
+  background-color: var(--imlib_chat_components_locationBubble_bg_color);
+  border: 1px solid var(--imlib_chat_components_locationBubble_border_color);
+  padding: var(--zd_size10) ;
+  border-radius: 3px; 
+}
+
+.failedLocationBubble{
+  background-color: var(--imlib_chat_components_locationBubble_bg_color_failed);
+  border-color: var(--imlib_chat_components_locationBubble_border_color_failed);
+}
+
+[dir=ltr] .textWrapper {
+  margin: 0 0 0 var(--zd_size8) ;
+}
+
+[dir=rtl] .textWrapper {
+  margin: 0 var(--zd_size8) 0 0 ;
+}
+
+.textLink {
+  display: block;
+  color: var(--imlib_chat_components_locationBubble_url_color);
+  word-break: break-word;
+  word-wrap: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.4;
+  white-space: normal;
+}
+
+.failedLocationBubble .textLink{
+  color: var(--imlib_chat_components_locationBubble_url_color_failed);
+}
+
+.container{
+  display: flex;
+  cursor: pointer;
+}
+
+.container:hover .textLink{
+  text-decoration: underline !important;
+}

package/lib/LocationBubble/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 locationBubbleClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.locationBubble, true), _defineProperty(_compileClassNames, style.failedLocationBubble, isFailed), _compileClassNames));
+  return {
+    locationBubbleClass: locationBubbleClass
+  };
+}

package/lib/LocationBubble/index.js

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

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

package/lib/LocationBubble/props/propTypes.js

@@ -0,0 +1,19 @@
+"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 locationBubblePropTypes = {
+  locationUrl: _propTypes["default"].string.isRequired,
+  customStyle: _propTypes["default"].object,
+  isFailed: _propTypes["default"].bool
+};
+var _default = locationBubblePropTypes;
+exports["default"] = _default;

package/lib/MediaBubbleWrapper/MediaBubbleWrapper.js

@@ -0,0 +1,76 @@
+"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"] = MediaBubbleWrapper;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useAttachmentBubble2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/AttachmentBubble/useAttachmentBubble"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _MediaBubbleWrapperModule = _interopRequireDefault(require("./css/MediaBubbleWrapper.module.css"));
+
+var _renderHandler = _interopRequireDefault(require("@zohoim/chat-components-utils/es/common/renderHandler"));
+
+var _AttachmentBubbleInfo = _interopRequireDefault(require("../AttachmentBubbleInfo/AttachmentBubbleInfo"));
+
+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 MediaBubbleWrapper(props) {
+  var customStyle = props.customStyle,
+      mediaDetails = props.mediaDetails,
+      customProps = props.customProps,
+      renderMedia = props.renderMedia,
+      isFailed = props.isFailed;
+  var _customProps$attachme = customProps.attachmentBubbleInfoProps,
+      attachmentBubbleInfoProps = _customProps$attachme === void 0 ? _emptyConstants.dummyObject : _customProps$attachme;
+  /* External css customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_MediaBubbleWrapperModule["default"], customStyle);
+  var bubbleInfoCustomStyle = (0, _react.useMemo)(function () {
+    return {
+      attachmentBubbleInfo: newStyle.header
+    };
+  }, [newStyle.header]);
+
+  var _useAttachmentBubble = (0, _useAttachmentBubble2["default"])({
+    attachmentDetails: mediaDetails
+  }),
+      fileURL = _useAttachmentBubble.attachmentURL,
+      fileSize = _useAttachmentBubble.formattedFileSize,
+      fileName = _useAttachmentBubble.fileName,
+      fileType = _useAttachmentBubble.attachmentType;
+
+  var mediaComponent = (0, _renderHandler["default"])(renderMedia)({
+    fileURL: fileURL,
+    fileType: fileType
+  });
+  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_AttachmentBubbleInfo["default"], _extends({
+    customStyle: bubbleInfoCustomStyle,
+    fileName: fileName,
+    fileSize: fileSize
+  }, attachmentBubbleInfoProps, {
+    isFailed: isFailed
+  })), mediaComponent);
+}
+
+MediaBubbleWrapper.propTypes = _propTypes["default"];
+MediaBubbleWrapper.defaultProps = _defaultProps["default"];
+MediaBubbleWrapper.displayName = 'MediaBubbleWrapper';

package/lib/MediaBubbleWrapper/css/MediaBubbleWrapper.module.css

@@ -0,0 +1,7 @@
+.header {
+  margin-bottom: var(--zd_size5) ;
+}
+
+.audioCont{
+  min-width: var(--zd_size300) ;
+}

package/lib/MediaBubbleWrapper/index.js

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

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

package/lib/MediaBubbleWrapper/props/propTypes.js

@@ -0,0 +1,28 @@
+"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 mediaBubbleWrapperPropTypes = {
+  mediaDetails: _propTypes["default"].shape({
+    name: _propTypes["default"].string.isRequired,
+    size: _propTypes["default"].string.isRequired,
+    type: _propTypes["default"].string.isRequired,
+    url: _propTypes["default"].string.isRequired
+  }).isRequired,
+  renderMedia: _propTypes["default"].func.isRequired,
+  customProps: _propTypes["default"].shape({
+    attachmentBubbleInfoProps: _propTypes["default"].object
+  }),
+  customStyle: _propTypes["default"].object,
+  isFailed: _propTypes["default"].bool
+};
+var _default = mediaBubbleWrapperPropTypes;
+exports["default"] = _default;

package/lib/Message/Message.js

@@ -0,0 +1,157 @@
+"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"] = Message;
+
+var _react = _interopRequireWildcard(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 _MessageBubble = _interopRequireDefault(require("../MessageBubble/MessageBubble"));
+
+var _MessageBox = _interopRequireDefault(require("../MessageBox/MessageBox"));
+
+var _MessageAvatar = _interopRequireDefault(require("../MessageAvatar/MessageAvatar"));
+
+var _MessageActions = _interopRequireDefault(require("../MessageActions/MessageActions"));
+
+var _MessageStatus = _interopRequireDefault(require("../MessageStatus/MessageStatus"));
+
+var _useMessage2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/Message/useMessage"));
+
+var _getMessageStatus2 = _interopRequireDefault(require("@zohoim/chat-components-utils/es/getMessageStatus"));
+
+var _getMessageDirectionType = _interopRequireDefault(require("@zohoim/chat-components-utils/es/getMessageDirectionType"));
+
+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 Message(props) {
+  var direction = props.direction,
+      isActive = props.isActive,
+      isShowSender = props.isShowSender,
+      needSender = props.needSender,
+      ownerDetails = props.ownerDetails,
+      renderOwnerStatusIcon = props.renderOwnerStatusIcon,
+      status = props.status,
+      statusTooltip = props.statusTooltip,
+      isShowMessageStatus = props.isShowMessageStatus,
+      actions = props.actions,
+      renderSecondaryActions = props.renderSecondaryActions,
+      onSelectAction = props.onSelectAction,
+      onMouseEnterAction = props.onMouseEnterAction,
+      needMessageActions = props.needMessageActions,
+      renderContent = props.renderContent,
+      customProps = props.customProps;
+
+  var _useMessage = (0, _useMessage2["default"])(),
+      retainMessageActions = _useMessage.retainMessageActions,
+      setRetainMessageActions = _useMessage.setRetainMessageActions;
+
+  var _customProps$messageB = customProps.messageBubbleProps,
+      messageBubbleProps = _customProps$messageB === void 0 ? _emptyConstants.dummyObject : _customProps$messageB,
+      _customProps$messageO = customProps.messageOwnerProps,
+      messageOwnerProps = _customProps$messageO === void 0 ? _emptyConstants.dummyObject : _customProps$messageO,
+      _customProps$messageB2 = customProps.messageBoxProps,
+      messageBoxProps = _customProps$messageB2 === void 0 ? _emptyConstants.dummyObject : _customProps$messageB2,
+      _customProps$messageS = customProps.messageStatusProps,
+      messageStatusProps = _customProps$messageS === void 0 ? _emptyConstants.dummyObject : _customProps$messageS,
+      _customProps$messageA = customProps.messageActionsProps,
+      messageActionsProps = _customProps$messageA === void 0 ? _emptyConstants.dummyObject : _customProps$messageA;
+
+  var _getMessageDirectionT = (0, _getMessageDirectionType["default"])({
+    messageDetails: {
+      direction: direction
+    }
+  }),
+      isIncoming = _getMessageDirectionT.isIncoming,
+      isOutgoing = _getMessageDirectionT.isOutgoing;
+
+  var _getMessageStatus = (0, _getMessageStatus2["default"])({
+    messageDetails: {
+      status: status
+    }
+  }),
+      isFailed = _getMessageStatus.isFailedMessage;
+  /** ** Render Message Owner *** */
+
+
+  var handleRenderMessageOwner = (0, _react.useCallback)(function () {
+    if (isShowSender) {
+      var _ref = ownerDetails || _emptyConstants.dummyObject,
+          src = _ref.src,
+          alternateSrc = _ref.alternateSrc,
+          name = _ref.name;
+
+      var _props = {
+        src: src,
+        alternateSrc: alternateSrc,
+        title: name,
+        renderIcon: renderOwnerStatusIcon
+      };
+      return /*#__PURE__*/_react["default"].createElement(_MessageAvatar["default"], _extends({}, _props, messageOwnerProps));
+    }
+
+    return null;
+  }, [ownerDetails, messageOwnerProps, renderOwnerStatusIcon, isShowSender]);
+  /** ** Render Message Status *** */
+
+  var handleRenderMessageStatus = (0, _react.useCallback)(function () {
+    var props = {
+      messageStatus: status,
+      title: statusTooltip
+    };
+    return isShowMessageStatus && status ? /*#__PURE__*/_react["default"].createElement(_MessageStatus["default"], _extends({}, props, messageStatusProps)) : null;
+  }, [status, statusTooltip, isShowMessageStatus, messageStatusProps]);
+  /** ** Render MessageBox *** */
+
+  var handleRenderMessageBox = (0, _react.useCallback)(function () {
+    var props = {
+      renderMessageStatus: handleRenderMessageStatus,
+      renderMessage: renderContent,
+      isFailed: isFailed,
+      isIncoming: isIncoming,
+      isOutgoing: isOutgoing
+    };
+    return /*#__PURE__*/_react["default"].createElement(_MessageBox["default"], _extends({}, props, messageBoxProps));
+  }, [handleRenderMessageStatus, renderContent, messageBoxProps, isFailed, isIncoming, isOutgoing]);
+  /** ** Render Message Actions *** */
+
+  var handleRenderMessageActions = (0, _react.useCallback)(function () {
+    var props = {
+      actions: actions,
+      onSelect: onSelectAction,
+      renderSecondaryActions: renderSecondaryActions,
+      onMouseEnter: onMouseEnterAction,
+      setRetainMessageActions: setRetainMessageActions
+    };
+    return /*#__PURE__*/_react["default"].createElement(_MessageActions["default"], _extends({}, props, messageActionsProps));
+  }, [actions, onSelectAction, onMouseEnterAction, renderSecondaryActions, messageActionsProps, setRetainMessageActions]);
+  return /*#__PURE__*/_react["default"].createElement(_MessageBubble["default"], _extends({
+    direction: direction,
+    isActive: isActive,
+    needMessageActions: needMessageActions,
+    needSender: needSender,
+    renderMessageActions: handleRenderMessageActions,
+    renderMessageBox: handleRenderMessageBox,
+    renderMessageOwner: handleRenderMessageOwner,
+    retainMessageActions: retainMessageActions
+  }, messageBubbleProps));
+}
+
+Message.propTypes = _propTypes["default"];
+Message.defaultProps = _defaultProps["default"];
+Message.displayName = 'Message';

package/lib/Message/index.js

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

package/lib/Message/props/defaultProps.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _messageConstants = require("@zohoim/chat-components-utils/es/constants/messageConstants");
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var messageDefaultProps = {
+  direction: _messageConstants.direction.IN,
+  isActive: false,
+  isShowSender: true,
+  customProps: _emptyConstants.dummyObject,
+  actions: _emptyConstants.dummyArray,
+  needMessageActions: true
+};
+var _default = messageDefaultProps;
+exports["default"] = _default;

package/lib/Message/props/propTypes.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _messageActionConstants = require("@zohoim/chat-components-utils/es/constants/messageActionConstants");
+
+var _messageStatusConstants = _interopRequireDefault(require("@zohoim/chat-components-utils/es/constants/messageStatusConstants"));
+
+var _messageConstants = require("@zohoim/chat-components-utils/es/constants/messageConstants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Constants *** */
+var messagePropTypes = {
+  direction: _propTypes["default"].oneOf(Object.values(_messageConstants.direction)).isRequired,
+  renderContent: _propTypes["default"].func.isRequired,
+  isActive: _propTypes["default"].bool,
+  isShowSender: _propTypes["default"].bool,
+  needSender: _propTypes["default"].bool,
+  ownerDetails: _propTypes["default"].shape({
+    alternateSrc: _propTypes["default"].string,
+    name: _propTypes["default"].string,
+    src: _propTypes["default"].string
+  }),
+  renderOwnerStatusIcon: _propTypes["default"].func,
+  status: _propTypes["default"].oneOf(Object.values(_messageStatusConstants["default"])),
+  statusTooltip: _propTypes["default"].string,
+  isShowMessageStatus: _propTypes["default"].bool,
+  actions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    displayText: _propTypes["default"].string.isRequired,
+    id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].oneOf(Object.values(_messageActionConstants.defaultMessageActions))]).isRequired,
+    iconTitle: _propTypes["default"].string,
+    isDisabled: _propTypes["default"].bool,
+    renderFunction: _propTypes["default"].func
+  })),
+  onSelectAction: _propTypes["default"].func.isRequired,
+  renderSecondaryActions: _propTypes["default"].func,
+  needMessageActions: _propTypes["default"].bool,
+  customProps: _propTypes["default"].shape({
+    messageActionsProps: _propTypes["default"].object,
+    messageBoxProps: _propTypes["default"].object,
+    messageBubbleProps: _propTypes["default"].object,
+    messageOwnerProps: _propTypes["default"].object,
+    messageStatusProps: _propTypes["default"].object
+  })
+};
+var _default = messagePropTypes;
+exports["default"] = _default;