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

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _integrationConstants = _interopRequireDefault(require("@zohoim/chat-components-utils/es/imUtils/constants/integrationConstants"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Constants *** */
+var WHATSAPP = _integrationConstants["default"].WHATSAPP,
+    TELEGRAM = _integrationConstants["default"].TELEGRAM,
+    INSTAGRAM = _integrationConstants["default"].INSTAGRAM,
+    WECHAT = _integrationConstants["default"].WECHAT,
+    TWILLIO = _integrationConstants["default"].TWILLIO,
+    LINE = _integrationConstants["default"].LINE,
+    IM_TALK = _integrationConstants["default"].IM_TALK,
+    FACEBOOKMESSENGER = _integrationConstants["default"].FACEBOOKMESSENGER;
+var imAttachmentHandlerPropTypes = {
+  customStyle: _propTypes["default"].object,
+  iconName: _propTypes["default"].string.isRequired,
+  iconSize: _propTypes["default"].string,
+  iconTitle: _propTypes["default"].string,
+  renderCustomIcon: _propTypes["default"].func,
+  isMultiAttachment: _propTypes["default"].bool,
+  onAttach: _propTypes["default"].func,
+  customProps: _propTypes["default"].object,
+  attachmentType: _propTypes["default"].oneOf(['image', 'document', 'documentAndImage']),
+  integrationService: _propTypes["default"].oneOf([WHATSAPP, TELEGRAM, INSTAGRAM, WECHAT, TWILLIO, LINE, IM_TALK, FACEBOOKMESSENGER])
+};
+var _default = imAttachmentHandlerPropTypes;
+exports["default"] = _default;

package/lib/im/IMIntegrationIcon/IMIntegrationIcon.js

@@ -0,0 +1,82 @@
+"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"] = IMIntegrationIcon;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Icon = _interopRequireDefault(require("@zohodesk/icons/es/Icon"));
+
+var _IMIntegrationIconModule = _interopRequireDefault(require("./css/IMIntegrationIcon.module.css"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _integrationConstants = _interopRequireDefault(require("@zohoim/chat-components-utils/es/imUtils/constants/integrationConstants"));
+
+var _fontIconMap;
+
+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 WHATSAPP = _integrationConstants["default"].WHATSAPP,
+    TELEGRAM = _integrationConstants["default"].TELEGRAM,
+    IM_TALK = _integrationConstants["default"].IM_TALK,
+    WECHAT = _integrationConstants["default"].WECHAT,
+    TWILLIO = _integrationConstants["default"].TWILLIO,
+    LINE = _integrationConstants["default"].LINE,
+    FACEBOOKMESSENGER = _integrationConstants["default"].FACEBOOKMESSENGER,
+    INSTAGRAM = _integrationConstants["default"].INSTAGRAM;
+var fontIconMap = (_fontIconMap = {}, _defineProperty(_fontIconMap, TWILLIO, 'ZD-TT-imtwillio'), _defineProperty(_fontIconMap, WHATSAPP, 'ZD-TT-whatsApp'), _defineProperty(_fontIconMap, TELEGRAM, 'ZD-TT-imTelegram'), _defineProperty(_fontIconMap, WECHAT, 'ZD-TT-imWeChat'), _defineProperty(_fontIconMap, LINE, 'ZD-TT-imLine'), _defineProperty(_fontIconMap, IM_TALK, 'ZD-TT-imASAP'), _defineProperty(_fontIconMap, FACEBOOKMESSENGER, 'ZD-TT-fbMessanger'), _defineProperty(_fontIconMap, INSTAGRAM, 'ZD-TT-instagram'), _fontIconMap);
+
+function IMIntegrationIcon(props) {
+  var customStyle = props.customStyle,
+      renderCustomIcon = props.renderCustomIcon,
+      title = props.title,
+      integrationName = props.integrationName,
+      onClick = props.onClick,
+      size = props.size;
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_IMIntegrationIconModule["default"], customStyle);
+  /* css classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    integrationName: integrationName,
+    size: size
+  }, newStyle),
+      iconWrapperClass = _cssJSLogic.iconWrapperClass;
+
+  var renderDefaultIcon = (0, _react.useCallback)(function () {
+    var iconName = fontIconMap[integrationName];
+    return iconName ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: iconWrapperClass,
+      "data-title": title,
+      onClick: onClick
+    }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      iconClass: newStyle.fontIcon,
+      name: iconName,
+      size: "12"
+    })) : null;
+  }, [integrationName, title, onClick, iconWrapperClass, newStyle.fontIcon]);
+  return renderCustomIcon ? renderCustomIcon({
+    integrationName: integrationName
+  }) : renderDefaultIcon();
+}
+
+IMIntegrationIcon.defaultProps = _defaultProps["default"];
+IMIntegrationIcon.propTypes = _propTypes["default"];

package/lib/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css

@@ -0,0 +1,72 @@
+.varClass {
+  --integrationIcon-small_height: 20px;
+  --integrationIcon-small_width: 20px;
+  --integrationIcon-medium_height: 26px;
+  --integrationIcon-medium_width: 26px;
+}
+
+.integrationIcon {
+  composes: varClass;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.small {
+  width: var(--integrationIcon-small_height);
+  height: var(--integrationIcon-small_width);
+}
+
+.medium {
+  width: var(--integrationIcon-medium_height);
+  height: var(--integrationIcon-medium_width);
+}
+
+.whatsappIcon {
+  background-color: var(
+    --imlib_chat_components_imIntegrationIcon_whatsapp_color
+  );
+}
+
+.telegramIcon {
+  background-color: var(
+    --imlib_chat_components_imIntegrationIcon_telegram_color
+  );
+}
+
+.weChatIcon {
+  background-color: var(--imlib_chat_components_imIntegrationIcon_wechat_color);
+}
+
+.lineIcon {
+  background-color: var(--imlib_chat_components_imIntegrationIcon_line_color);
+}
+
+.twillioIcon {
+  background-color: var(
+    --imlib_chat_components_imIntegrationIcon_twillio_color
+  );
+}
+
+.instagramIcon {
+  background: var(
+    --imlib_chat_components_imIntegrationIcon_instagram_color
+  );
+}
+
+.asapIcon {
+  background: var(--imlib_chat_components_imIntegrationIcon_asap_color);
+}
+
+.fbIcon {
+  background-color: var(--imlib_chat_components_imIntegrationIcon_fb_color);
+}
+
+.fontIcon :global .path1::before {
+  color: var(--imlib_chat_components_imIntegrationIcon_path0_color) !important;
+}
+
+.fontIcon :global .path2::before {
+  color: var(--imlib_chat_components_imIntegrationIcon_path1_color) !important;
+}

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

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+
+var _utils = require("@zohodesk/utils");
+
+var _integrationConstants = _interopRequireDefault(require("@zohoim/chat-components-utils/es/imUtils/constants/integrationConstants"));
+
+var _sizes = _interopRequireDefault(require("@zohoim/chat-components-utils/es/constants/sizes"));
+
+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 WHATSAPP = _integrationConstants["default"].WHATSAPP,
+    TELEGRAM = _integrationConstants["default"].TELEGRAM,
+    INSTAGRAM = _integrationConstants["default"].INSTAGRAM,
+    IM_TALK = _integrationConstants["default"].IM_TALK,
+    WECHAT = _integrationConstants["default"].WECHAT,
+    TWILLIO = _integrationConstants["default"].TWILLIO,
+    LINE = _integrationConstants["default"].LINE,
+    FACEBOOKMESSENGER = _integrationConstants["default"].FACEBOOKMESSENGER;
+
+function cssJSLogic(props, style) {
+  var _compileClassNames, _compileClassNames2;
+
+  var integrationName = props.integrationName,
+      size = props.size;
+  var isWhatsAppIcon = integrationName === WHATSAPP;
+  var isTelegramIcon = integrationName === TELEGRAM;
+  var isInstagramIcon = integrationName === INSTAGRAM;
+  var isIMTalkIcon = integrationName === IM_TALK;
+  var isWeChatIcon = integrationName === WECHAT;
+  var isTwillioIcon = integrationName === TWILLIO;
+  var isLineIcon = integrationName === LINE;
+  var isFbIcon = integrationName === FACEBOOKMESSENGER;
+  var isSmall = size === _sizes["default"].SMALL;
+  var isMedium = size === _sizes["default"].MEDIUM;
+  var iconWrapperClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.integrationIcon, true), _defineProperty(_compileClassNames, style.small, isSmall), _defineProperty(_compileClassNames, style.medium, isMedium), _defineProperty(_compileClassNames, style.whatsappIcon, isWhatsAppIcon), _defineProperty(_compileClassNames, style.telegramIcon, isTelegramIcon), _defineProperty(_compileClassNames, style.instagramIcon, isInstagramIcon), _defineProperty(_compileClassNames, style.asapIcon, isIMTalkIcon), _defineProperty(_compileClassNames, style.weChatIcon, isWeChatIcon), _defineProperty(_compileClassNames, style.twillioIcon, isTwillioIcon), _defineProperty(_compileClassNames, style.lineIcon, isLineIcon), _defineProperty(_compileClassNames, style.fbIcon, isFbIcon), _compileClassNames));
+  var iconClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, style.small, isSmall), _defineProperty(_compileClassNames2, style.medium, isMedium), _compileClassNames2));
+  return {
+    iconWrapperClass: iconWrapperClass,
+    iconClass: iconClass
+  };
+}

package/lib/im/IMIntegrationIcon/index.js

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

package/lib/im/IMIntegrationIcon/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 _sizes = _interopRequireDefault(require("@zohoim/chat-components-utils/es/constants/sizes"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Constants *** */
+var SMALL = _sizes["default"].SMALL;
+var imIntegrationIconDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  size: SMALL
+};
+var _default = imIntegrationIconDefaultProps;
+exports["default"] = _default;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _integrationConstants = _interopRequireDefault(require("@zohoim/chat-components-utils/es/imUtils/constants/integrationConstants"));
+
+var _sizes = _interopRequireDefault(require("@zohoim/chat-components-utils/es/constants/sizes"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Constants *** */
+var imIntegrationIconPropTypes = {
+  integrationName: _propTypes["default"].oneOf(Object.values(_integrationConstants["default"])).isRequired,
+  customStyle: _propTypes["default"].object,
+  onClick: _propTypes["default"].func,
+  renderCustomIcon: _propTypes["default"].func,
+  size: _propTypes["default"].oneOf([_sizes["default"].SMALL, _sizes["default"].MEDIUM])
+};
+var _default = imIntegrationIconPropTypes;
+exports["default"] = _default;

package/lib/im/IMMessage/IMMessage.js

@@ -0,0 +1,223 @@
+"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"] = IMMessage;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useIMMessage2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/im/IMMessage/useIMMessage"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _Message = _interopRequireDefault(require("../../Message/Message"));
+
+var _IMMessageContent = _interopRequireDefault(require("../IMMessageContent/IMMessageContent"));
+
+var _IMPermaLink = _interopRequireDefault(require("../IMPermaLink/IMPermaLink"));
+
+var _IMIntegrationIcon = _interopRequireDefault(require("../IMIntegrationIcon/IMIntegrationIcon"));
+
+var _IMMessageMeta = _interopRequireDefault(require("../IMMessageMeta/IMMessageMeta"));
+
+var _IMMessageModule = _interopRequireDefault(require("./css/IMMessage.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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 _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 IMMessage(props) {
+  var defaultAvatarUrls = props.defaultAvatarUrls,
+      messageDetails = props.messageDetails,
+      sessionDetails = props.sessionDetails,
+      messageDisplayProps = props.messageDisplayProps,
+      actions = props.actions,
+      onSelectAction = props.onSelectAction,
+      onMouseEnterAction = props.onMouseEnterAction,
+      replyText = props.replyText,
+      seeMoreText = props.seeMoreText,
+      deleteMessageText = props.deleteMessageText,
+      messageBubbleTitleI18N = props.messageBubbleTitleI18N,
+      messageStatusI18N = props.messageStatusI18N,
+      messageMetaInfoI18N = props.messageMetaInfoI18N,
+      onLoadFullMessage = props.onLoadFullMessage,
+      onClickReply = props.onClickReply,
+      onTicketClick = props.onTicketClick,
+      messageContentClickMapping = props.messageContentClickMapping,
+      customStyle = props.customStyle,
+      customProps = props.customProps;
+  var _customProps$messageP = customProps.messageProps,
+      messageProps = _customProps$messageP === void 0 ? _emptyConstants.dummyObject : _customProps$messageP,
+      _customProps$imMessag = customProps.imMessageContentProps,
+      imMessageContentProps = _customProps$imMessag === void 0 ? _emptyConstants.dummyObject : _customProps$imMessag,
+      _customProps$imTicket = customProps.imTicketLinkProps,
+      imTicketLinkProps = _customProps$imTicket === void 0 ? _emptyConstants.dummyObject : _customProps$imTicket,
+      _customProps$imIntegr = customProps.imIntegrationIconProps,
+      imIntegrationIconProps = _customProps$imIntegr === void 0 ? _emptyConstants.dummyObject : _customProps$imIntegr,
+      _customProps$imMessag2 = customProps.imMessageMetaProps,
+      imMessageMetaProps = _customProps$imMessag2 === void 0 ? _emptyConstants.dummyObject : _customProps$imMessag2;
+  var isHighlightMessage = messageDisplayProps.isHighlightMessage,
+      needSender = messageDisplayProps.needSender,
+      isShowSender = messageDisplayProps.isShowSender,
+      isShowMessageTime = messageDisplayProps.isShowMessageTime,
+      isShowMessageStatus = messageDisplayProps.isShowMessageStatus,
+      needMessageActions = messageDisplayProps.needMessageActions,
+      isShowFullContent = messageDisplayProps.isShowFullContent;
+  var newStyle = (0, _useMergeStyle["default"])(_IMMessageModule["default"], customStyle);
+
+  var _useIMMessage = (0, _useIMMessage2["default"])({
+    defaultAvatarUrls: defaultAvatarUrls,
+    messageDetails: messageDetails,
+    sessionDetails: sessionDetails,
+    messageStatusI18N: messageStatusI18N
+  }),
+      direction = _useIMMessage.direction,
+      isIncoming = _useIMMessage.isIncoming,
+      isOutgoing = _useIMMessage.isOutgoing,
+      senderSrc = _useIMMessage.senderSrc,
+      senderAlternateSrc = _useIMMessage.senderAlternateSrc,
+      senderName = _useIMMessage.senderName,
+      isShowIntegrationIcon = _useIMMessage.isShowIntegrationIcon,
+      integrationName = _useIMMessage.integrationName,
+      messageStatus = _useIMMessage.messageStatus,
+      isFailedMessage = _useIMMessage.isFailedMessage,
+      isSendingMessage = _useIMMessage.isSendingMessage,
+      messageStatusTitle = _useIMMessage.messageStatusTitle,
+      isValidAttachment = _useIMMessage.isValidAttachment,
+      dateTimeDetails = _useIMMessage.dateTimeDetails,
+      autoMessageType = _useIMMessage.autoMessageType,
+      ticketId = _useIMMessage.ticketId,
+      ticketNumber = _useIMMessage.ticketNumber,
+      ticketUrl = _useIMMessage.ticketUrl;
+  /** ** Render Footer *** */
+
+
+  var handleRenderMessageBoxFooter = (0, _react.useCallback)(function () {
+    var _ref = dateTimeDetails || {},
+        displayDateTime = _ref.displayDateTime,
+        tooltip = _ref.tooltip;
+
+    return /*#__PURE__*/_react["default"].createElement(_IMMessageMeta["default"], _extends({
+      autoMessageType: autoMessageType,
+      direction: direction,
+      isValidAttachment: isValidAttachment,
+      messageMetaInfoI18N: messageMetaInfoI18N,
+      time: isShowMessageTime ? displayDateTime : '',
+      timeTooltip: tooltip
+    }, imMessageMetaProps));
+  }, [isShowMessageTime, dateTimeDetails, direction, autoMessageType, imMessageMetaProps, isValidAttachment, messageMetaInfoI18N]);
+  /** ** Render Message Content *** */
+
+  var handleRenderMessage = (0, _react.useCallback)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_IMMessageContent["default"], _extends({
+      deleteMessageText: deleteMessageText,
+      isFailed: isFailedMessage,
+      isSending: isSendingMessage,
+      isShowFullContent: isShowFullContent,
+      messageBubbleTitleI18N: messageBubbleTitleI18N,
+      messageContentClickMapping: messageContentClickMapping,
+      messageDetails: messageDetails,
+      onClickReply: onClickReply,
+      onLoadFullMessage: onLoadFullMessage,
+      replyText: replyText,
+      seeMoreText: seeMoreText,
+      sessionDetails: sessionDetails
+    }, imMessageContentProps));
+  }, [seeMoreText, replyText, deleteMessageText, messageDetails, sessionDetails, messageContentClickMapping, messageBubbleTitleI18N, onLoadFullMessage, onClickReply, isFailedMessage, isSendingMessage, imMessageContentProps, isShowFullContent]);
+  /** ** Render Secondary Actions - TicketId *** */
+
+  var handleRenderSecondaryActions = (0, _react.useCallback)(function () {
+    var _cssJSLogic = (0, _cssJSLogic2["default"])({
+      isIncoming: isIncoming,
+      isOutgoing: isOutgoing
+    }, newStyle),
+        imTicketLinkClass = _cssJSLogic.imTicketLinkClass;
+
+    var customStyle = {
+      text: imTicketLinkClass
+    };
+    return /*#__PURE__*/_react["default"].createElement(_IMPermaLink["default"], _extends({
+      customStyle: customStyle,
+      href: ticketUrl,
+      id: ticketId,
+      onClick: onTicketClick,
+      text: ticketNumber ? "#".concat(ticketNumber) : ''
+    }, imTicketLinkProps));
+  }, [ticketNumber, ticketUrl, ticketId, onTicketClick, imTicketLinkProps, newStyle, isIncoming, isOutgoing]);
+  /** ** Render Owner Status Icon *** */
+
+  var handleRenderIntegIcon = (0, _react.useCallback)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_IMIntegrationIcon["default"], _extends({
+      integrationName: isShowIntegrationIcon ? integrationName : ''
+    }, imIntegrationIconProps));
+  }, [isShowIntegrationIcon, integrationName, imIntegrationIconProps]);
+  /** ** Construct Owner Details *** */
+
+  var ownerDetails = (0, _react.useMemo)(function () {
+    return {
+      src: senderSrc,
+      alternateSrc: senderAlternateSrc,
+      name: senderName
+    };
+  }, [senderSrc, senderAlternateSrc, senderName]);
+  /** ** Construct Custom Props With default Footer *** */
+
+  var messageCustomProps = (0, _react.useMemo)(function () {
+    var _ref2 = messageProps || _emptyConstants.dummyObject,
+        customProps = _ref2.customProps;
+
+    var _ref3 = customProps || _emptyConstants.dummyObject,
+        _ref3$messageBubblePr = _ref3.messageBubbleProps,
+        messageBubbleProps = _ref3$messageBubblePr === void 0 ? _emptyConstants.dummyObject : _ref3$messageBubblePr;
+
+    return _objectSpread(_objectSpread({}, messageProps), {}, {
+      customProps: _objectSpread(_objectSpread({}, customProps), {}, {
+        messageBubbleProps: _objectSpread({
+          renderMessageBoxFooter: handleRenderMessageBoxFooter
+        }, messageBubbleProps)
+      })
+    });
+  }, [messageProps, handleRenderMessageBoxFooter]);
+  return /*#__PURE__*/_react["default"].createElement(_Message["default"], _extends({
+    actions: actions,
+    direction: direction,
+    isActive: isHighlightMessage,
+    isShowMessageStatus: isShowMessageStatus,
+    isShowSender: isShowSender,
+    needMessageActions: needMessageActions,
+    needSender: needSender,
+    onMouseEnterAction: onMouseEnterAction,
+    onSelectAction: onSelectAction,
+    ownerDetails: ownerDetails,
+    renderContent: handleRenderMessage,
+    renderOwnerStatusIcon: handleRenderIntegIcon,
+    renderSecondaryActions: handleRenderSecondaryActions,
+    status: messageStatus,
+    statusTooltip: messageStatusTitle
+  }, messageCustomProps));
+}
+
+IMMessage.propTypes = _propTypes["default"];
+IMMessage.defaultProps = _defaultProps["default"];
+IMMessage.displayName = 'IMMessage';

package/lib/im/IMMessage/css/IMMessage.module.css

@@ -0,0 +1,36 @@
+.varClass {
+  --imTicketLink-top_gap: 5px;
+  --imTicketLink-font_size: 12px;
+  --imTicketLink-max_width: 150px;
+}
+
+.ticketLink {
+  composes: varClass;
+  font-size: var(--imTicketLink-font_size);
+  max-width: var(--imTicketLink-max_width);
+  margin-top: var(--imTicketLink-top_gap);
+}
+
+.ticketLinkRight {
+  composes: ticketLink;
+}
+
+[dir=ltr] .ticketLinkRight {
+  text-align: left;
+}
+
+[dir=rtl] .ticketLinkRight {
+  text-align: right;
+}
+
+.ticketLinkLeft {
+  composes: ticketLink;
+}
+
+[dir=ltr] .ticketLinkLeft {
+  text-align: right;
+}
+
+[dir=rtl] .ticketLinkLeft {
+  text-align: left;
+}

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

@@ -0,0 +1,21 @@
+"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 isIncoming = props.isIncoming,
+      isOutgoing = props.isOutgoing;
+  var imTicketLinkClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.ticketLinkLeft, isOutgoing), _defineProperty(_compileClassNames, style.ticketLinkRight, isIncoming), _compileClassNames));
+  return {
+    imTicketLinkClass: imTicketLinkClass
+  };
+}

package/lib/im/IMMessage/index.js

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

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+// import React from 'react';
+
+/** ** Constants *** */
+var imMessageDefaultProps = {
+  messageDetails: _emptyConstants.dummyObject,
+  sessionDetails: _emptyConstants.dummyObject,
+  messageStatusI18N: _emptyConstants.dummyObject,
+  messageBubbleTitleI18N: _emptyConstants.dummyObject,
+  messageMetaInfoI18N: _emptyConstants.dummyObject,
+  customProps: _emptyConstants.dummyObject,
+  customStyle: _emptyConstants.dummyObject,
+  messageDisplayProps: _emptyConstants.dummyObject,
+  messageContentClickMapping: _emptyConstants.dummyObject
+};
+var _default = imMessageDefaultProps;
+exports["default"] = _default;