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

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

@@ -0,0 +1,118 @@
+"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 _autoMessageTypes = _interopRequireDefault(require("@zohoim/chat-components-utils/es/imUtils/constants/autoMessageTypes"));
+
+var _PropTypes$shape, _PropTypes$shape2, _PropTypes$shape3;
+
+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; }
+
+var WELCOMEMSG = _autoMessageTypes["default"].WELCOMEMSG,
+    WORKFLOW_MESSAGE = _autoMessageTypes["default"].WORKFLOW_MESSAGE,
+    WORKFLOW_NOTIFICATION = _autoMessageTypes["default"].WORKFLOW_NOTIFICATION,
+    UN_SUPPORTED_FILE = _autoMessageTypes["default"].UN_SUPPORTED_FILE;
+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 imMessagePropTypes = {
+  messageDetails: _propTypes["default"].shape({
+    displayMessage: _propTypes["default"].string.isRequired,
+    actor: _propTypes["default"].shape({
+      contactName: _propTypes["default"].string,
+      externalId: _propTypes["default"].string,
+      name: _propTypes["default"].string,
+      photoURL: _propTypes["default"].string,
+      type: _propTypes["default"].string
+    }),
+    attachment: _propTypes["default"].string,
+    contentType: _propTypes["default"].string,
+    dateTimeDetails: _propTypes["default"].shape({
+      displayDateTime: _propTypes["default"].string,
+      tooltip: _propTypes["default"].string
+    }),
+    direction: _propTypes["default"].string,
+    id: _propTypes["default"].string,
+    isCustomMessage: _propTypes["default"].bool,
+    layout: _propTypes["default"].string,
+    locationUrl: _propTypes["default"].string,
+    meta: _propTypes["default"].shape({
+      DESK_TICKET_ID: _propTypes["default"].string,
+      DESK_TICKET_NUMBER: _propTypes["default"].string,
+      SYSTEM_MESSAGE_TYPE: _propTypes["default"].string
+    }),
+    replyToMessage: _propTypes["default"].object,
+    status: _propTypes["default"].string,
+    type: _propTypes["default"].string
+  }).isRequired,
+  sessionDetails: _propTypes["default"].shape({
+    integrationService: _propTypes["default"].string
+  }),
+  defaultAvatarUrls: _propTypes["default"].shape({
+    autoMessageAvatar: _propTypes["default"].string,
+    defaultAgentAvatar: _propTypes["default"].string,
+    defaultContactAvatar: _propTypes["default"].string
+  }),
+  messageDisplayProps: _propTypes["default"].shape({
+    isHighlightMessage: _propTypes["default"].bool,
+    isShowFullContent: _propTypes["default"].bool,
+    isShowMessageStatus: _propTypes["default"].bool,
+    isShowMessageTime: _propTypes["default"].bool,
+    isShowSender: _propTypes["default"].bool,
+    needMessageActions: _propTypes["default"].bool,
+    needSender: _propTypes["default"].bool
+  }),
+  messageStatusI18N: _propTypes["default"].shape((_PropTypes$shape = {}, _defineProperty(_PropTypes$shape, DELIVERED, _propTypes["default"].string), _defineProperty(_PropTypes$shape, FAILED, _propTypes["default"].string), _defineProperty(_PropTypes$shape, OUTGOING, _propTypes["default"].string), _defineProperty(_PropTypes$shape, QUEUED, _propTypes["default"].string), _defineProperty(_PropTypes$shape, READ, _propTypes["default"].string), _defineProperty(_PropTypes$shape, SAVED, _propTypes["default"].string), _defineProperty(_PropTypes$shape, SENT, _propTypes["default"].string), _defineProperty(_PropTypes$shape, UNSENT, _propTypes["default"].string), _PropTypes$shape)),
+  messageBubbleTitleI18N: _propTypes["default"].shape({
+    attachmentBubbleTitle: _propTypes["default"].string
+  }),
+  messageMetaInfoI18N: _propTypes["default"].shape({
+    autoMessagesI18N: _propTypes["default"].shape((_PropTypes$shape2 = {}, _defineProperty(_PropTypes$shape2, UN_SUPPORTED_FILE, _propTypes["default"].string), _defineProperty(_PropTypes$shape2, WELCOMEMSG, _propTypes["default"].string), _defineProperty(_PropTypes$shape2, WORKFLOW_MESSAGE, _propTypes["default"].string), _defineProperty(_PropTypes$shape2, WORKFLOW_NOTIFICATION, _propTypes["default"].string), _PropTypes$shape2)),
+    autoMessagesTitleI18N: _propTypes["default"].shape((_PropTypes$shape3 = {}, _defineProperty(_PropTypes$shape3, UN_SUPPORTED_FILE, _propTypes["default"].string), _defineProperty(_PropTypes$shape3, WELCOMEMSG, _propTypes["default"].string), _defineProperty(_PropTypes$shape3, WORKFLOW_MESSAGE, _propTypes["default"].string), _defineProperty(_PropTypes$shape3, WORKFLOW_NOTIFICATION, _propTypes["default"].string), _PropTypes$shape3)),
+    restrictedAttachmentMetaInfo: _propTypes["default"].shape({
+      info: _propTypes["default"].string,
+      title: _propTypes["default"].string
+    })
+  }),
+  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,
+  onMouseEnterAction: _propTypes["default"].func,
+  replyText: _propTypes["default"].string,
+  seeMoreText: _propTypes["default"].string,
+  deleteMessageText: _propTypes["default"].string,
+  onLoadFullMessage: _propTypes["default"].func,
+  onClickReply: _propTypes["default"].func,
+  onTicketClick: _propTypes["default"].func,
+  messageContentClickMapping: _propTypes["default"].object,
+  customStyle: _propTypes["default"].object,
+  customProps: _propTypes["default"].shape({
+    imIntegrationIconProps: _propTypes["default"].object,
+    imMessageContentProps: _propTypes["default"].object,
+    imPermaLinkProps: _propTypes["default"].object,
+    messageProps: _propTypes["default"].object
+  })
+};
+var _default = imMessagePropTypes;
+exports["default"] = _default;

package/lib/im/IMMessageContent/IMMessageContent.js

@@ -0,0 +1,149 @@
+"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"] = IMMessageContent;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useIMMessageContent2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/im/IMMessageContent/useIMMessageContent"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _IMMessageContentModule = _interopRequireDefault(require("./css/IMMessageContent.module.css"));
+
+var _IMReplyBubble = _interopRequireDefault(require("../IMReplyBubble/IMReplyBubble"));
+
+var _IMTextBubble = _interopRequireDefault(require("../IMTextBubble/IMTextBubble"));
+
+var _LocationBubble = _interopRequireDefault(require("../../LocationBubble/LocationBubble"));
+
+var _ImageBubble = _interopRequireDefault(require("../../ImageBubble/ImageBubble"));
+
+var _VideoBubble = _interopRequireDefault(require("../../VideoBubble/VideoBubble"));
+
+var _AudioBubble = _interopRequireDefault(require("../../AudioBubble/AudioBubble"));
+
+var _AttachmentBubble = _interopRequireDefault(require("../../AttachmentBubble/AttachmentBubble"));
+
+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 IMMessageContent(props) {
+  var messageDetails = props.messageDetails,
+      sessionDetails = props.sessionDetails,
+      onLoadFullMessage = props.onLoadFullMessage,
+      onClickReply = props.onClickReply,
+      seeMoreText = props.seeMoreText,
+      replyText = props.replyText,
+      deleteMessageText = props.deleteMessageText,
+      customStyle = props.customStyle,
+      customProps = props.customProps,
+      renderCustomMessage = props.renderCustomMessage,
+      propOnClick = props.onClick,
+      isFailed = props.isFailed,
+      isSending = props.isSending,
+      messageContentClickMapping = props.messageContentClickMapping,
+      messageBubbleTitleI18N = props.messageBubbleTitleI18N,
+      isShowFullContent = props.isShowFullContent;
+  var _customProps$imReplyB = customProps.imReplyBubbleProps,
+      imReplyBubbleProps = _customProps$imReplyB === void 0 ? _emptyConstants.dummyObject : _customProps$imReplyB,
+      _customProps$imTextBu = customProps.imTextBubbleProps,
+      imTextBubbleProps = _customProps$imTextBu === void 0 ? _emptyConstants.dummyObject : _customProps$imTextBu,
+      _customProps$location = customProps.locationBubbleProps,
+      locationBubbleProps = _customProps$location === void 0 ? _emptyConstants.dummyObject : _customProps$location,
+      _customProps$imageBub = customProps.imageBubbleProps,
+      imageBubbleProps = _customProps$imageBub === void 0 ? _emptyConstants.dummyObject : _customProps$imageBub,
+      _customProps$videoBub = customProps.videoBubbleProps,
+      videoBubbleProps = _customProps$videoBub === void 0 ? _emptyConstants.dummyObject : _customProps$videoBub,
+      _customProps$audioBub = customProps.audioBubbleProps,
+      audioBubbleProps = _customProps$audioBub === void 0 ? _emptyConstants.dummyObject : _customProps$audioBub,
+      _customProps$attachme = customProps.attachmentBubbleProps,
+      attachmentBubbleProps = _customProps$attachme === void 0 ? _emptyConstants.dummyObject : _customProps$attachme;
+  var onImageBubbleClick = messageContentClickMapping.onImageBubbleClick,
+      onAttachmentBubbleClick = messageContentClickMapping.onAttachmentBubbleClick;
+
+  var _ref = messageBubbleTitleI18N || _emptyConstants.dummyObject,
+      attachmentBubbleTitle = _ref.attachmentBubbleTitle;
+
+  var _useIMMessageContent = (0, _useIMMessageContent2["default"])({
+    messageDetails: messageDetails,
+    onClick: propOnClick
+  }),
+      isShowLayoutBubble = _useIMMessageContent.isShowLayoutBubble,
+      isShowReplyBubble = _useIMMessageContent.isShowReplyBubble,
+      isShowImageBubble = _useIMMessageContent.isShowImageBubble,
+      isShowVideoBubble = _useIMMessageContent.isShowVideoBubble,
+      isShowAudioBubble = _useIMMessageContent.isShowAudioBubble,
+      isShowAttachmentBubble = _useIMMessageContent.isShowAttachmentBubble,
+      isShowLocationBubble = _useIMMessageContent.isShowLocationBubble,
+      isShowTextBubble = _useIMMessageContent.isShowTextBubble,
+      isShowCustomBubble = _useIMMessageContent.isShowCustomBubble,
+      isShowDeleteBubble = _useIMMessageContent.isShowDeleteBubble,
+      replyToMessage = _useIMMessageContent.replyToMessageDetails,
+      attachmentDetails = _useIMMessageContent.attachmentDetails,
+      locationUrl = _useIMMessageContent.locationUrl;
+  /* External CSS Customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_IMMessageContentModule["default"], customStyle);
+  var wrapperDivProps = {
+    className: newStyle.messageContentRow
+  };
+  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, isShowLayoutBubble ? null : null, isShowDeleteBubble ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: newStyle.deleteBubble
+  }, deleteMessageText) : null, isShowReplyBubble ? /*#__PURE__*/_react["default"].createElement("div", wrapperDivProps, /*#__PURE__*/_react["default"].createElement(_IMReplyBubble["default"], _extends({
+    isFailed: isFailed,
+    messageDetails: replyToMessage,
+    onClick: onClickReply,
+    replyText: replyText
+  }, imReplyBubbleProps))) : null, isShowCustomBubble ? renderCustomMessage({
+    messageDetails: messageDetails,
+    isFailed: isFailed
+  }) : null, isShowImageBubble ? /*#__PURE__*/_react["default"].createElement("div", wrapperDivProps, /*#__PURE__*/_react["default"].createElement(_ImageBubble["default"], _extends({
+    imageDetails: attachmentDetails,
+    isFailed: isFailed,
+    isSending: isSending,
+    onClick: onImageBubbleClick
+  }, imageBubbleProps))) : null, isShowVideoBubble ? /*#__PURE__*/_react["default"].createElement("div", wrapperDivProps, /*#__PURE__*/_react["default"].createElement(_VideoBubble["default"], _extends({
+    isFailed: isFailed,
+    videoDetails: attachmentDetails
+  }, videoBubbleProps))) : null, isShowAudioBubble ? /*#__PURE__*/_react["default"].createElement("div", wrapperDivProps, /*#__PURE__*/_react["default"].createElement(_AudioBubble["default"], _extends({
+    audioDetails: attachmentDetails,
+    isFailed: isFailed
+  }, audioBubbleProps))) : null, isShowAttachmentBubble ? /*#__PURE__*/_react["default"].createElement("div", wrapperDivProps, /*#__PURE__*/_react["default"].createElement(_AttachmentBubble["default"], _extends({
+    attachmentBubbleTitle: attachmentBubbleTitle,
+    attachmentDetails: attachmentDetails,
+    isFailed: isFailed,
+    isSending: isSending,
+    onClick: onAttachmentBubbleClick
+  }, attachmentBubbleProps))) : null, isShowLocationBubble ? /*#__PURE__*/_react["default"].createElement("div", wrapperDivProps, /*#__PURE__*/_react["default"].createElement(_LocationBubble["default"], _extends({
+    isFailed: isFailed,
+    locationUrl: locationUrl
+  }, locationBubbleProps))) : null, isShowTextBubble ? /*#__PURE__*/_react["default"].createElement("div", wrapperDivProps, /*#__PURE__*/_react["default"].createElement(_IMTextBubble["default"], _extends({
+    isFailed: isFailed,
+    isShowFullContent: isShowFullContent,
+    messageDetails: messageDetails,
+    moreText: seeMoreText,
+    onLoadFullMessage: onLoadFullMessage,
+    sessionDetails: sessionDetails
+  }, imTextBubbleProps))) : null);
+}
+
+IMMessageContent.propTypes = _propTypes["default"];
+IMMessageContent.defaultProps = _defaultProps["default"];
+IMMessageContent.displayName = 'IMMessageContent';

package/lib/im/IMMessageContent/css/IMMessageContent.module.css

@@ -0,0 +1,8 @@
+.messageContentRow + .messageContentRow {
+  margin-top: var(--zd_size5) ;
+}
+
+.deleteBubble {
+  font-style: italic;
+  color: var(--imlib_chat_components_imMessageContent_text_color);
+}

package/lib/im/IMMessageContent/index.js

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

package/lib/im/IMMessageContent/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");
+
+/** ** Constants *** */
+var imMessageContentDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  customProps: _emptyConstants.dummyObject,
+  messageBubbleTitleI18N: _emptyConstants.dummyObject,
+  messageContentClickMapping: _emptyConstants.dummyObject
+};
+var _default = imMessageContentDefaultProps;
+exports["default"] = _default;

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

@@ -0,0 +1,65 @@
+"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 imMessageContentPropTypes = {
+  messageDetails: _propTypes["default"].shape({
+    displayMessage: _propTypes["default"].string.isRequired,
+    attachment: _propTypes["default"].string,
+    contentType: _propTypes["default"].string,
+    dateTimeDetails: _propTypes["default"].shape({
+      displayDateTime: _propTypes["default"].string,
+      tooltip: _propTypes["default"].string
+    }),
+    direction: _propTypes["default"].string,
+    fullMessage: _propTypes["default"].string,
+    id: _propTypes["default"].string,
+    layout: _propTypes["default"].string,
+    location: _propTypes["default"].string,
+    meta: _propTypes["default"].shape({
+      DESK_TICKET_ID: _propTypes["default"].string,
+      DESK_TICKET_NUMBER: _propTypes["default"].string,
+      SYSTEM_MESSAGE_TYPE: _propTypes["default"].string
+    }),
+    replyToMessage: _propTypes["default"].object,
+    status: _propTypes["default"].string,
+    type: _propTypes["default"].string
+  }).isRequired,
+  sessionDetails: _propTypes["default"].shape({
+    id: _propTypes["default"].string
+  }),
+  onClick: _propTypes["default"].func,
+  messageContentClickMapping: _propTypes["default"].object,
+  messageBubbleTitleI18N: _propTypes["default"].shape({
+    attachmentBubbleTitle: _propTypes["default"].string
+  }),
+  onLoadFullMessage: _propTypes["default"].func,
+  onClickReply: _propTypes["default"].func,
+  seeMoreText: _propTypes["default"].string,
+  deleteMessageText: _propTypes["default"].string,
+  replyText: _propTypes["default"].string,
+  renderCustomMessage: _propTypes["default"].func,
+  customStyle: _propTypes["default"].object,
+  customProps: _propTypes["default"].shape({
+    attachmentBubbleProps: _propTypes["default"].object,
+    audioBubbleProps: _propTypes["default"].object,
+    imReplyBubbleProps: _propTypes["default"].object,
+    imTextBubbleProps: _propTypes["default"].object,
+    imageBubbleProps: _propTypes["default"].object,
+    locationBubbleProps: _propTypes["default"].object,
+    videoBubbleProps: _propTypes["default"].object
+  }),
+  isFailed: _propTypes["default"].bool,
+  isSending: _propTypes["default"].bool,
+  isShowFullContent: _propTypes["default"].bool
+};
+var _default = imMessageContentPropTypes;
+exports["default"] = _default;

package/lib/im/IMMessageMeta/IMMessageMeta.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = IMMessageMeta;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useIMMessageMeta2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/im/IMMessageMeta/useIMMessageMeta"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+var _IMMessageMetaModule = _interopRequireDefault(require("./css/IMMessageMeta.module.css"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _IMMessageMetaInfo = _interopRequireDefault(require("../IMMessageMetaInfo/IMMessageMetaInfo"));
+
+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 IMMessageMeta(props) {
+  var direction = props.direction,
+      customStyle = props.customStyle,
+      time = props.time,
+      timeTooltip = props.timeTooltip,
+      messageMetaInfoI18N = props.messageMetaInfoI18N,
+      autoMessageType = props.autoMessageType,
+      isValidAttachment = props.isValidAttachment,
+      customProps = props.customProps;
+  var _customProps$imMessag = customProps.imMessageMetaInfoProps,
+      imMessageMetaInfoProps = _customProps$imMessag === void 0 ? _emptyConstants.dummyObject : _customProps$imMessag;
+
+  var _useIMMessageMeta = (0, _useIMMessageMeta2["default"])({
+    messageMetaInfoI18N: messageMetaInfoI18N,
+    autoMessageType: autoMessageType,
+    isValidAttachment: isValidAttachment
+  }),
+      imMessageMetaInfoTitle = _useIMMessageMeta.imMessageMetaInfoTitle,
+      imMessageMetaInfoContent = _useIMMessageMeta.imMessageMetaInfoContent;
+  /* External CSS Customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_IMMessageMetaModule["default"], customStyle);
+  /* CSS classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    direction: direction
+  }, newStyle),
+      imMessageMetaClass = _cssJSLogic.imMessageMetaClass,
+      dotClass = _cssJSLogic.dotClass;
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, imMessageMetaInfoContent || time ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    className: imMessageMetaClass
+  }, imMessageMetaInfoContent ? /*#__PURE__*/_react["default"].createElement(_IMMessageMetaInfo["default"], _extends({
+    imMessageMetaInfoContent: imMessageMetaInfoContent,
+    imMessageMetaInfoTitle: imMessageMetaInfoTitle
+  }, imMessageMetaInfoProps)) : null, imMessageMetaInfoContent && time ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: dotClass
+  }, "\u22C5") : null, time ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: newStyle.dateTime,
+    "data-title": timeTooltip
+  }, time) : null) : null);
+}
+
+IMMessageMeta.propTypes = _propTypes["default"];
+IMMessageMeta.defaultProps = _defaultProps["default"];
+IMMessageMeta.displayName = 'IMMessageMeta';

package/lib/im/IMMessageMeta/css/IMMessageMeta.module.css

@@ -0,0 +1,46 @@
+.varClass {
+  --imMessageMeta-gap: 5px;
+  --imMessageMeta-separator_gap: 5px;
+  --imMessageMeta-time_padding: 45px;
+}
+
+.imMessageMeta {
+  max-width: 100% ;
+  align-items: center;
+  margin-top: var(--imMessageMeta-gap);
+}
+
+.imMessageMetaIncoming {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+}
+
+.dot {
+  composes: varClass;
+  margin: 0 var(--imMessageMeta-separator_gap);
+}
+
+[dir=ltr] .leftTime {
+  padding-left: var(--imMessageMeta-time_padding);
+}
+
+[dir=rtl] .leftTime {
+  padding-right: var(--imMessageMeta-time_padding);
+}
+
+[dir=ltr] .rightTime {
+  padding-right: var(--imMessageMeta-time_padding);
+}
+
+[dir=rtl] .rightTime {
+  padding-left: var(--imMessageMeta-time_padding);
+}
+
+.dateTime {
+  font-size: var(--zd_font_size11) ;
+  /* max-width: 100px; */
+  /* display: flex; */
+  max-width: var(--zd_size100) ;
+  composes: dotted from '../../css/common.module.css';
+  color: var(--imlib_chat_components_imMessageMeta_time_color);
+}

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

@@ -0,0 +1,35 @@
+"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;
+
+  var direction = props.direction;
+
+  var _getMessageDirectionT = (0, _getMessageDirectionType["default"])({
+    messageDetails: {
+      direction: direction
+    }
+  }),
+      isIncoming = _getMessageDirectionT.isIncoming,
+      isOutgoing = _getMessageDirectionT.isOutgoing;
+
+  var imMessageMetaClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.imMessageMeta, true), _defineProperty(_compileClassNames, style.imMessageMetaIncoming, isIncoming), _defineProperty(_compileClassNames, style.leftTime, isIncoming), _defineProperty(_compileClassNames, style.rightTime, isOutgoing), _compileClassNames));
+  var dotClass = (0, _utils.compileClassNames)(_defineProperty({}, style.dot, true));
+  return {
+    imMessageMetaClass: imMessageMetaClass,
+    dotClass: dotClass
+  };
+}

package/lib/im/IMMessageMeta/index.js

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

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

@@ -0,0 +1,21 @@
+"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 imMessageMetaDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  customProps: _emptyConstants.dummyObject,
+  messageMetaInfoI18N: _emptyConstants.dummyObject,
+  isValidAttachment: true,
+  direction: _messageConstants.direction.IN
+};
+var _default = imMessageMetaDefaultProps;
+exports["default"] = _default;

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

@@ -0,0 +1,44 @@
+"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");
+
+var _autoMessageTypes = _interopRequireDefault(require("@zohoim/chat-components-utils/es/imUtils/constants/autoMessageTypes"));
+
+var _PropTypes$shape, _PropTypes$shape2;
+
+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; }
+
+var WELCOMEMSG = _autoMessageTypes["default"].WELCOMEMSG,
+    WORKFLOW_MESSAGE = _autoMessageTypes["default"].WORKFLOW_MESSAGE,
+    WORKFLOW_NOTIFICATION = _autoMessageTypes["default"].WORKFLOW_NOTIFICATION,
+    UN_SUPPORTED_FILE = _autoMessageTypes["default"].UN_SUPPORTED_FILE;
+var imMessageMetaPropTypes = {
+  direction: _propTypes["default"].oneOf(Object.values(_messageConstants.direction)).isRequired,
+  time: _propTypes["default"].string.isRequired,
+  isValidAttachment: _propTypes["default"].bool,
+  autoMessageType: _propTypes["default"].oneOf(Object.values(_autoMessageTypes["default"])),
+  messageMetaInfoI18N: _propTypes["default"].shape({
+    autoMessagesI18N: _propTypes["default"].shape((_PropTypes$shape = {}, _defineProperty(_PropTypes$shape, UN_SUPPORTED_FILE, _propTypes["default"].string), _defineProperty(_PropTypes$shape, WELCOMEMSG, _propTypes["default"].string), _defineProperty(_PropTypes$shape, WORKFLOW_MESSAGE, _propTypes["default"].string), _defineProperty(_PropTypes$shape, WORKFLOW_NOTIFICATION, _propTypes["default"].string), _PropTypes$shape)),
+    autoMessagesTitleI18N: _propTypes["default"].shape((_PropTypes$shape2 = {}, _defineProperty(_PropTypes$shape2, UN_SUPPORTED_FILE, _propTypes["default"].string), _defineProperty(_PropTypes$shape2, WELCOMEMSG, _propTypes["default"].string), _defineProperty(_PropTypes$shape2, WORKFLOW_MESSAGE, _propTypes["default"].string), _defineProperty(_PropTypes$shape2, WORKFLOW_NOTIFICATION, _propTypes["default"].string), _PropTypes$shape2)),
+    restrictedAttachmentMetaInfo: _propTypes["default"].shape({
+      info: _propTypes["default"].string,
+      title: _propTypes["default"].string
+    })
+  }),
+  customProps: _propTypes["default"].shape({
+    imMessageMetaInfoProps: _propTypes["default"].object
+  }),
+  customStyle: _propTypes["default"].object,
+  timeTooltip: _propTypes["default"].string
+};
+var _default = imMessageMetaPropTypes;
+exports["default"] = _default;