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

package/lib/MessageBox/css/MessageBox.module.css

@@ -0,0 +1,56 @@
+.varClass {
+  --messageBox-content_padding: 14px;
+  --messageBox-content_size: 14px;
+  --messageBox-border_radius: 9px;
+  --messageBox-message_status_gap: 12px;
+  --messageBox-message_header_gap: 1px;
+  --messageBox-message_footer_gap: 1px;
+}
+
+.messageBoxContainer {
+  composes: varClass;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: flex-end;
+  color: var(--imlib_chat_components_messageBox_text_color);
+  word-wrap: break-word;
+  font-size: var(--messageBox-content_size);
+  box-sizing: border-box;
+  background-color: var(--imlib_chat_components_messageBox_bg_color);
+  padding: var(--messageBox-content_padding);
+  border-radius: var(--messageBox-border_radius);
+}
+
+.messageContentWrapper {
+  /* Use this class for message content customization */
+  line-height: 150%;
+}
+
+.messageHeaderWrapper {
+  margin-bottom: var(--messageBox-message_header_gap);
+}
+
+.messageFooterWrapper {
+  margin-top: var(--messageBox-message_footer_gap);
+}
+
+[dir=ltr] .messageStatusWrapper {
+  margin-left: var(--messageBox-message_status_gap);
+}
+
+[dir=rtl] .messageStatusWrapper {
+  margin-right: var(--messageBox-message_status_gap);
+}
+
+.failedMessageBox {
+  color: var(--imlib_chat_components_messageBox_failed_text_color);
+  background-color: var(--imlib_chat_components_messageBox_failed_bg_color);
+}
+
+.incomingMessageBox {
+  background-color: var(--imlib_chat_components_messageBox_incoming_bg_color);
+}
+
+.outgoingMessageBox {
+  background-color: var(--imlib_chat_components_messageBox_outgoing_bg_color);
+}

package/lib/MessageBox/css/cssJSLogic.js

@@ -0,0 +1,22 @@
+"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,
+      isIncoming = props.isIncoming,
+      isOutgoing = props.isOutgoing;
+  var messageBoxClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.messageBoxContainer, true), _defineProperty(_compileClassNames, style.failedMessageBox, isFailed), _defineProperty(_compileClassNames, style.incomingMessageBox, isIncoming && !isFailed), _defineProperty(_compileClassNames, style.outgoingMessageBox, isOutgoing && !isFailed), _compileClassNames));
+  return {
+    messageBoxClass: messageBoxClass
+  };
+}

package/lib/MessageBox/index.js

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

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

package/lib/MessageBox/props/propTypes.js

@@ -0,0 +1,24 @@
+"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 messageBoxPropTypes = {
+  isIncoming: _propTypes["default"].bool.isRequired,
+  isOutgoing: _propTypes["default"].bool.isRequired,
+  renderMessage: _propTypes["default"].func.isRequired,
+  customStyle: _propTypes["default"].object,
+  isFailed: _propTypes["default"].bool,
+  renderMessageFooter: _propTypes["default"].func,
+  renderMessageHeader: _propTypes["default"].func,
+  renderMessageStatus: _propTypes["default"].func
+};
+var _default = messageBoxPropTypes;
+exports["default"] = _default;

package/lib/MessageBubble/MessageBubble.js

@@ -0,0 +1,170 @@
+"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"] = MessageBubble;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useMessageBubbleAction = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/MessageBubble/useMessageBubbleAction"));
+
+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 _Layout = require("@zohodesk/components/es/Layout");
+
+var _MessageBubbleModule = _interopRequireDefault(require("./css/MessageBubble.module.css"));
+
+var _generateUniqueId = _interopRequireDefault(require("@zohoim/chat-components-utils/es/common/generateUniqueId"));
+
+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; }
+
+/* eslint-disable no-confusing-arrow */
+
+/** ** Libraries *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Methods *** */
+
+/** ** Components *** */
+
+/** ** Styles *** */
+function MessageBubble(props) {
+  var renderMessageBox = props.renderMessageBox,
+      renderMessageBoxFooter = props.renderMessageBoxFooter,
+      renderMessageOwner = props.renderMessageOwner,
+      renderMessageActions = props.renderMessageActions,
+      customStyle = props.customStyle,
+      needSender = props.needSender,
+      isActive = props.isActive,
+      direction = props.direction;
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_MessageBubbleModule["default"], customStyle);
+  /* Use Hooks */
+
+  var _useMessageBubbleActi = (0, _useMessageBubbleAction["default"])(props),
+      onMouseEnter = _useMessageBubbleActi.onMouseEnter,
+      onMouseLeave = _useMessageBubbleActi.onMouseLeave,
+      isRenderMessageActions = _useMessageBubbleActi.isRenderMessageActions,
+      onFocus = _useMessageBubbleActi.onFocus,
+      onBlur = _useMessageBubbleActi.onBlur;
+  /* css classnames added based on logic */
+
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    isActive: isActive,
+    direction: direction,
+    isRenderMessageActions: isRenderMessageActions,
+    needSender: needSender
+  }, newStyle),
+      bubbleClass = _cssJSLogic.bubbleClass,
+      messageActionWrapperClass = _cssJSLogic.messageActionWrapperClass;
+  /* Render Childrens */
+
+  /* Message Sender Render */
+
+
+  var messageSenderRenderer = (0, _react.useCallback)(function () {
+    var messageOwner = (0, _renderHandler["default"])(renderMessageOwner)();
+    return needSender ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      className: newStyle.messageOwnerWrapper
+    }, messageOwner) : null;
+  }, [renderMessageOwner, needSender, newStyle.messageOwnerWrapper]);
+  /* Message Actions Render */
+
+  var messageActionsRenderer = (0, _react.useCallback)(function () {
+    var messageActions = isRenderMessageActions ? (0, _renderHandler["default"])(renderMessageActions)() : null;
+    return messageActions ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      className: messageActionWrapperClass,
+      role: "button",
+      tabIndex: "0"
+    }, messageActions) : null;
+  }, [isRenderMessageActions, renderMessageActions, messageActionWrapperClass]);
+  /* Message Box Render */
+
+  var messageBoxRenderer = (0, _react.useCallback)(function () {
+    var messageBox = (0, _renderHandler["default"])(renderMessageBox)();
+    return messageBox; // return messageBox ? (
+    //   <Box flexible className={newStyle.messageBoxWrapper}>
+    //     {messageBox}
+    //   </Box>
+    // ) : null;
+  }, [renderMessageBox]);
+  /* Message BoxWithActions Render */
+
+  var messageBox = (0, _react.useMemo)(function () {
+    return messageBoxRenderer();
+  }, [messageBoxRenderer]);
+  var messageActions = (0, _react.useMemo)(function () {
+    return messageActionsRenderer();
+  }, [messageActionsRenderer]);
+  var uniqueId = (0, _generateUniqueId["default"])();
+  var messageBoxWithActionsRenderer = (0, _react.useCallback)(function () {
+    return messageBox || messageActions ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      className: newStyle.messageContainer
+    }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      className: newStyle.messageBoxWrapper,
+      flexible: true
+    }, messageBox, /*#__PURE__*/_react["default"].createElement("div", {
+      id: uniqueId,
+      role: "menu"
+    }, messageActions))) : null;
+  }, [messageBox, messageActions, newStyle.messageContainer, newStyle.messageBoxWrapper, uniqueId]);
+  /* Message Footer Render */
+
+  var messageFooterRenderer = (0, _react.useCallback)(function () {
+    var messageBoxFooter = (0, _renderHandler["default"])(renderMessageBoxFooter)();
+    return messageBoxFooter ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      className: newStyle.messageBoxFooterWrapper
+    }, messageBoxFooter) : null;
+  }, [renderMessageBoxFooter, newStyle.messageBoxFooterWrapper]);
+  /* Get the components */
+
+  var messageSender = (0, _react.useMemo)(function () {
+    return messageSenderRenderer();
+  }, [messageSenderRenderer]);
+  var messageBoxWithActions = (0, _react.useMemo)(function () {
+    return messageBoxWithActionsRenderer();
+  }, [messageBoxWithActionsRenderer]);
+  var messageFooter = (0, _react.useMemo)(function () {
+    return messageFooterRenderer();
+  }, [messageFooterRenderer]);
+  /* Construct Layout */
+
+  var messageLayout = /*#__PURE__*/_react["default"].createElement("div", {
+    "aria-controls": uniqueId,
+    "aria-expanded": isRenderMessageActions ? 'true' : 'false',
+    "aria-haspopup": "true",
+    className: bubbleClass,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    role: "button",
+    tabIndex: 0
+  }, messageSender, messageBoxWithActions, messageFooter);
+
+  return messageLayout;
+}
+
+MessageBubble.propTypes = _propTypes["default"];
+MessageBubble.defaultProps = _defaultProps["default"];
+MessageBubble.displayName = 'MessageBubble';

package/lib/MessageBubble/css/MessageBubble.module.css

@@ -0,0 +1,101 @@
+.varClass {
+  --messageBubble-bubble_footer_gap: 5px;
+  --messageBubble-message_owner_gap: 13px;
+  --messageBox-max_width: 410px;
+  --messageBox-footer_fontSize: 11px;
+  --messageBox-owner_width: 32px;
+}
+
+.messageBubble {
+  composes: varClass;
+  width: 100% ;
+  display: grid;
+  grid-column-gap: var(--messageBubble-message_owner_gap);
+}
+
+.messageOwnerWrapper {
+  grid-area: messageOwner;
+  align-self: end;
+  width: var(--messageBox-owner_width);
+  display: flex;
+}
+
+.messageContainer {
+  grid-area: messageContainer;
+  display: inline-block;
+  max-width: calc(70% - (var(--zd_size32)));
+}
+
+.messageOwnerWrapper + .messageContainer{
+  max-width: 70% ;
+}
+
+.messageBoxWrapper {
+  grid-area: messageBox;
+  display: inline-block;
+  position: relative; 
+}
+
+.messageActionWrapper {
+  grid-area: messageAction;
+  width: var(--zd_size78) ;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top:0 ;
+}
+
+.messageActionWrapperEnd {
+  align-items: flex-end;
+}
+
+[dir=ltr] .messageActionWrapperEnd {
+  right: calc(100% + (var(--zd_size12)));
+}
+
+[dir=rtl] .messageActionWrapperEnd {
+  left: calc(100% + (var(--zd_size12)));
+}
+
+.messageActionWrapperStart {
+  align-items: flex-start;
+}
+
+[dir=ltr] .messageActionWrapperStart {
+  left: calc(100% + (var(--zd_size12)));
+}
+
+[dir=rtl] .messageActionWrapperStart {
+  right: calc(100% + (var(--zd_size12)));
+}
+.messageBoxFooterWrapper {
+  grid-area: messageBoxFooter;
+  font-size: var(--messageBox-footer_fontSize);
+  color: var(
+    --imlib_chat_components_messageBubble_messageBox_footer_text_color
+  );
+  margin-top: var(--messageBubble-bubble_footer_gap);
+}
+
+.active {
+  background-color: var(--imlib_chat_components_messageBubble_active_bg_color);
+}
+
+.directionIn {
+  grid-template-columns: auto 1fr;
+  grid-template-areas:
+    'messageOwner messageContainer'
+    '. messageBoxFooter';
+}
+
+.directionOut {
+  grid-template-columns: 1fr auto;
+  grid-template-areas:
+    'messageContainer messageOwner'
+    'messageBoxFooter .';
+  justify-items: end;
+}
+
+.singleLayout{
+  grid-template-columns: 100%;
+}

package/lib/MessageBubble/css/cssJSLogic.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+
+var _utils = require("@zohodesk/utils");
+
+var _getMessageDirectionType = _interopRequireDefault(require("@zohoim/chat-components-utils/es/getMessageDirectionType"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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, _compileClassNames2;
+
+  var isActive = props.isActive,
+      direction = props.direction,
+      isRenderMessageActions = props.isRenderMessageActions,
+      needSender = props.needSender;
+
+  var _getMessageDirectionT = (0, _getMessageDirectionType["default"])({
+    messageDetails: {
+      direction: direction
+    }
+  }),
+      isIncoming = _getMessageDirectionT.isIncoming,
+      isOutgoing = _getMessageDirectionT.isOutgoing;
+
+  var bubbleClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.messageBubble, true), _defineProperty(_compileClassNames, style.directionIn, isIncoming), _defineProperty(_compileClassNames, style.directionOut, isOutgoing), _defineProperty(_compileClassNames, style.active, isActive), _defineProperty(_compileClassNames, style.isHovered, isRenderMessageActions), _defineProperty(_compileClassNames, style.singleLayout, !needSender), _compileClassNames));
+  var messageActionWrapperClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, style.messageActionWrapper, true), _defineProperty(_compileClassNames2, style.messageActionWrapperEnd, isOutgoing), _defineProperty(_compileClassNames2, style.messageActionWrapperStart, isIncoming), _compileClassNames2));
+  return {
+    bubbleClass: bubbleClass,
+    messageActionWrapperClass: messageActionWrapperClass
+  };
+}

package/lib/MessageBubble/index.js

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

package/lib/MessageBubble/props/defaultProps.js

@@ -0,0 +1,22 @@
+"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 messageBubbleDefaultProps = {
+  direction: _messageConstants.direction.IN,
+  isActive: false,
+  needMessageActions: true,
+  customStyle: _emptyConstants.dummyObject,
+  needSender: true,
+  retainMessageActions: false
+};
+var _default = messageBubbleDefaultProps;
+exports["default"] = _default;

package/lib/MessageBubble/props/propTypes.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _messageConstants = require("@zohoim/chat-components-utils/es/constants/messageConstants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Constants *** */
+var messageBubblePropTypes = {
+  direction: _propTypes["default"].oneOf(Object.values(_messageConstants.direction)).isRequired,
+  renderMessageBox: _propTypes["default"].func.isRequired,
+  customStyle: _propTypes["default"].object,
+  isActive: _propTypes["default"].bool,
+  needMessageActions: _propTypes["default"].bool,
+  needSender: _propTypes["default"].bool,
+  renderMessageActions: _propTypes["default"].func,
+  renderMessageBoxFooter: _propTypes["default"].func,
+  renderMessageOwner: _propTypes["default"].func,
+  retainMessageActions: _propTypes["default"].bool
+};
+var _default = messageBubblePropTypes;
+exports["default"] = _default;

package/lib/MessageStatus/MessageStatus.js

@@ -0,0 +1,88 @@
+"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"] = MessageStatus;
+
+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 _messageStatusConstants = _interopRequireDefault(require("@zohoim/chat-components-utils/es/constants/messageStatusConstants"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+var _renderHandler = _interopRequireDefault(require("@zohoim/chat-components-utils/es/common/renderHandler"));
+
+var _MessageStatusModule = _interopRequireDefault(require("./css/MessageStatus.module.css"));
+
+var _DoubleTick = _interopRequireDefault(require("../icons/iconSrc/messageStatus/DoubleTick"));
+
+var _Tick = _interopRequireDefault(require("../icons/iconSrc/messageStatus/Tick"));
+
+var _Clock = _interopRequireDefault(require("../icons/iconSrc/messageStatus/Clock"));
+
+var _Failed = _interopRequireDefault(require("../icons/iconSrc/messageStatus/Failed"));
+
+var _messageStatusIconMap;
+
+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 _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; }
+
+var SENT = _messageStatusConstants["default"].SENT,
+    SAVED = _messageStatusConstants["default"].SAVED,
+    QUEUED = _messageStatusConstants["default"].QUEUED,
+    DELIVERED = _messageStatusConstants["default"].DELIVERED,
+    READ = _messageStatusConstants["default"].READ,
+    UNSENT = _messageStatusConstants["default"].UNSENT,
+    FAILED = _messageStatusConstants["default"].FAILED,
+    OUTGOING = _messageStatusConstants["default"].OUTGOING;
+var messageStatusIconMapping = (_messageStatusIconMap = {}, _defineProperty(_messageStatusIconMap, OUTGOING, _Clock["default"]), _defineProperty(_messageStatusIconMap, SAVED, _Tick["default"]), _defineProperty(_messageStatusIconMap, QUEUED, _Tick["default"]), _defineProperty(_messageStatusIconMap, SENT, _DoubleTick["default"]), _defineProperty(_messageStatusIconMap, DELIVERED, _DoubleTick["default"]), _defineProperty(_messageStatusIconMap, READ, _DoubleTick["default"]), _defineProperty(_messageStatusIconMap, UNSENT, _Failed["default"]), _defineProperty(_messageStatusIconMap, FAILED, _Failed["default"]), _messageStatusIconMap);
+
+function MessageStatus(props) {
+  var messageStatus = props.messageStatus,
+      customStyle = props.customStyle,
+      title = props.title,
+      renderCustomIcon = props.renderCustomIcon;
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_MessageStatusModule["default"], customStyle);
+  var iconStyle = (0, _react.useMemo)(function () {
+    return {
+      base: newStyle.icon
+    };
+  }, [newStyle.icon]);
+  /* CSS classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    messageStatus: messageStatus
+  }, newStyle),
+      statusClass = _cssJSLogic.statusClass;
+  /* Custom Icon */
+
+
+  var customIcon = (0, _renderHandler["default"])(renderCustomIcon)();
+  var IconComponent = messageStatusIconMapping[messageStatus];
+  return IconComponent || customIcon ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: statusClass,
+    "data-title": title
+  }, customIcon || /*#__PURE__*/_react["default"].createElement(IconComponent, {
+    customStyle: iconStyle
+  })) : null;
+}
+
+MessageStatus.propTypes = _propTypes["default"];
+MessageStatus.defaultProps = _defaultProps["default"];
+MessageStatus.displayName = 'MessageStatus';

package/lib/MessageStatus/css/MessageStatus.module.css

@@ -0,0 +1,17 @@
+.messageStatus {
+  /* USe this class name status customization */
+  color: var(--imlib_chat_components_messageStatus_send_color);
+}
+
+.readStatus {
+  color: var(--imlib_chat_components_messageStatus_read_color);
+}
+
+.failedStatus {
+  color: var(--imlib_chat_components_messageStatus_failed_color);
+}
+
+.icon {
+  width: var(--zd_size14) ;
+  height: var(--zd_size14) ;
+}

package/lib/MessageStatus/css/cssJSLogic.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+
+var _utils = require("@zohodesk/utils");
+
+var _getMessageStatus2 = _interopRequireDefault(require("@zohoim/chat-components-utils/es/getMessageStatus"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 messageStatus = props.messageStatus;
+
+  var _getMessageStatus = (0, _getMessageStatus2["default"])({
+    messageDetails: {
+      status: messageStatus
+    }
+  }),
+      isFailed = _getMessageStatus.isFailedMessage,
+      isRead = _getMessageStatus.isRead;
+
+  var statusClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.messageStatus, !(isRead || isFailed)), _defineProperty(_compileClassNames, style.readStatus, isRead), _defineProperty(_compileClassNames, style.failedStatus, isFailed), _compileClassNames));
+  return {
+    statusClass: statusClass
+  };
+}

package/lib/MessageStatus/index.js

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