@zohoim/chat-components 0.0.1-cx

package/es/im/IMMessage/IMMessage.js

@@ -0,0 +1,197 @@
+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); }
+
+/** ** Libraries *** */
+import React, { useCallback, useMemo } from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useIMMessage from '@zohoim/chat-components-hooks/es/im/IMMessage/useIMMessage';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
+/** ** Constants *** */
+
+import imMessageDefaultProps from './props/defaultProps';
+import imMessagePropTypes from './props/propTypes';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+/** ** Components *** */
+
+import Message from '../../Message/Message';
+import IMMessageContent from '../IMMessageContent/IMMessageContent';
+import IMPermaLink from '../IMPermaLink/IMPermaLink';
+import IMIntegrationIcon from '../IMIntegrationIcon/IMIntegrationIcon';
+import IMMessageMeta from '../IMMessageMeta/IMMessageMeta';
+/** ** Styles *** */
+
+import style from './css/IMMessage.module.css';
+export default function IMMessage(props) {
+  const {
+    defaultAvatarUrls,
+    messageDetails,
+    sessionDetails,
+    messageDisplayProps,
+    actions,
+    onSelectAction,
+    onMouseEnterAction,
+    replyText,
+    seeMoreText,
+    deleteMessageText,
+    messageBubbleTitleI18N,
+    messageStatusI18N,
+    messageMetaInfoI18N,
+    onLoadFullMessage,
+    onClickReply,
+    onTicketClick,
+    messageContentClickMapping,
+    customStyle,
+    customProps
+  } = props;
+  const {
+    messageProps = dummyObject,
+    imMessageContentProps = dummyObject,
+    imTicketLinkProps = dummyObject,
+    imIntegrationIconProps = dummyObject,
+    imMessageMetaProps = dummyObject
+  } = customProps;
+  const {
+    isHighlightMessage,
+    needSender,
+    isShowSender,
+    isShowMessageTime,
+    isShowMessageStatus,
+    needMessageActions,
+    isShowFullContent
+  } = messageDisplayProps;
+  const newStyle = useMergeStyle(style, customStyle);
+  const {
+    direction,
+    isIncoming,
+    isOutgoing,
+    // isBot,
+    senderSrc,
+    senderAlternateSrc,
+    senderName,
+    isShowIntegrationIcon,
+    integrationName,
+    // messageMetaType,
+    // messageType,
+    messageStatus,
+    isFailedMessage,
+    isSendingMessage,
+    messageStatusTitle,
+    isValidAttachment,
+    dateTimeDetails,
+    autoMessageType,
+    // messageId,
+    ticketId,
+    ticketNumber,
+    ticketUrl
+  } = useIMMessage({
+    defaultAvatarUrls,
+    messageDetails,
+    sessionDetails,
+    messageStatusI18N
+  });
+  /** ** Render Footer *** */
+
+  const handleRenderMessageBoxFooter = useCallback(() => {
+    const {
+      displayDateTime,
+      tooltip
+    } = dateTimeDetails || {};
+    return /*#__PURE__*/React.createElement(IMMessageMeta, _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 *** */
+
+  const handleRenderMessage = useCallback(() => /*#__PURE__*/React.createElement(IMMessageContent, _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 *** */
+
+  const handleRenderSecondaryActions = useCallback(() => {
+    const {
+      imTicketLinkClass
+    } = cssJSLogic({
+      isIncoming,
+      isOutgoing
+    }, newStyle);
+    const customStyle = {
+      text: imTicketLinkClass
+    };
+    return /*#__PURE__*/React.createElement(IMPermaLink, _extends({
+      customStyle: customStyle,
+      href: ticketUrl,
+      id: ticketId,
+      onClick: onTicketClick,
+      text: ticketNumber ? `#${ticketNumber}` : ''
+    }, imTicketLinkProps));
+  }, [ticketNumber, ticketUrl, ticketId, onTicketClick, imTicketLinkProps, newStyle, isIncoming, isOutgoing]);
+  /** ** Render Owner Status Icon *** */
+
+  const handleRenderIntegIcon = useCallback(() => /*#__PURE__*/React.createElement(IMIntegrationIcon, _extends({
+    integrationName: isShowIntegrationIcon ? integrationName : ''
+  }, imIntegrationIconProps)), [isShowIntegrationIcon, integrationName, imIntegrationIconProps]);
+  /** ** Construct Owner Details *** */
+
+  const ownerDetails = useMemo(() => ({
+    src: senderSrc,
+    alternateSrc: senderAlternateSrc,
+    name: senderName
+  }), [senderSrc, senderAlternateSrc, senderName]);
+  /** ** Construct Custom Props With default Footer *** */
+
+  const messageCustomProps = useMemo(() => {
+    const {
+      customProps
+    } = messageProps || dummyObject;
+    const {
+      messageBubbleProps = dummyObject
+    } = customProps || dummyObject;
+    return { ...messageProps,
+      customProps: { ...customProps,
+        messageBubbleProps: {
+          renderMessageBoxFooter: handleRenderMessageBoxFooter,
+          ...messageBubbleProps
+        }
+      }
+    };
+  }, [messageProps, handleRenderMessageBoxFooter]);
+  return /*#__PURE__*/React.createElement(Message, _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 = imMessagePropTypes;
+IMMessage.defaultProps = imMessageDefaultProps;
+IMMessage.displayName = 'IMMessage';

package/es/im/IMMessage/css/IMMessage.module.css

@@ -0,0 +1,36 @@
+.varClass {
+  --imTicketLink-top_gap: var(--zd_size5);
+  --imTicketLink-font_size: var(--zd_font_size12);
+  --imTicketLink-max_width: var(--zd_size150);
+}
+
+.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/es/im/IMMessage/css/cssJSLogic.js

@@ -0,0 +1,15 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const {
+    isIncoming,
+    isOutgoing
+  } = props;
+  const imTicketLinkClass = compileClassNames({
+    [style.ticketLinkLeft]: isOutgoing,
+    [style.ticketLinkRight]: isIncoming
+  });
+  return {
+    imTicketLinkClass
+  };
+}

package/es/im/IMMessage/index.js

@@ -0,0 +1 @@
+export { default as IMMessage } from './IMMessage';

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

@@ -0,0 +1,16 @@
+// import React from 'react';
+
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const imMessageDefaultProps = {
+  messageDetails: dummyObject,
+  sessionDetails: dummyObject,
+  messageStatusI18N: dummyObject,
+  messageBubbleTitleI18N: dummyObject,
+  messageMetaInfoI18N: dummyObject,
+  customProps: dummyObject,
+  customStyle: dummyObject,
+  messageDisplayProps: dummyObject,
+  messageContentClickMapping: dummyObject
+};
+export default imMessageDefaultProps;

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

@@ -0,0 +1,126 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+/** ** Constants *** */
+
+import { defaultMessageActions } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
+import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
+import autoMessageTypes from '@zohoim/chat-components-utils/es/imUtils/constants/autoMessageTypes';
+const {
+  WELCOMEMSG,
+  WORKFLOW_MESSAGE,
+  WORKFLOW_NOTIFICATION,
+  UN_SUPPORTED_FILE
+} = autoMessageTypes;
+const {
+  SENT,
+  SAVED,
+  QUEUED,
+  DELIVERED,
+  READ,
+  UNSENT,
+  FAILED,
+  OUTGOING
+} = messageStatusConstants;
+const imMessagePropTypes = {
+  messageDetails: PropTypes.shape({
+    displayMessage: PropTypes.string.isRequired,
+    actor: PropTypes.shape({
+      contactName: PropTypes.string,
+      externalId: PropTypes.string,
+      name: PropTypes.string,
+      photoURL: PropTypes.string,
+      type: PropTypes.string
+    }),
+    attachment: PropTypes.string,
+    contentType: PropTypes.string,
+    dateTimeDetails: PropTypes.shape({
+      displayDateTime: PropTypes.string,
+      tooltip: PropTypes.string
+    }),
+    direction: PropTypes.string,
+    id: PropTypes.string,
+    isCustomMessage: PropTypes.bool,
+    layout: PropTypes.string,
+    locationUrl: PropTypes.string,
+    meta: PropTypes.shape({
+      DESK_TICKET_ID: PropTypes.string,
+      DESK_TICKET_NUMBER: PropTypes.string,
+      SYSTEM_MESSAGE_TYPE: PropTypes.string
+    }),
+    replyToMessage: PropTypes.object,
+    status: PropTypes.string,
+    type: PropTypes.string
+  }).isRequired,
+  sessionDetails: PropTypes.shape({
+    integrationService: PropTypes.string
+  }),
+  defaultAvatarUrls: PropTypes.shape({
+    autoMessageAvatar: PropTypes.string,
+    defaultAgentAvatar: PropTypes.string,
+    defaultContactAvatar: PropTypes.string
+  }),
+  messageDisplayProps: PropTypes.shape({
+    isHighlightMessage: PropTypes.bool,
+    isShowFullContent: PropTypes.bool,
+    isShowMessageStatus: PropTypes.bool,
+    isShowMessageTime: PropTypes.bool,
+    isShowSender: PropTypes.bool,
+    needMessageActions: PropTypes.bool,
+    needSender: PropTypes.bool
+  }),
+  messageStatusI18N: PropTypes.shape({
+    [DELIVERED]: PropTypes.string,
+    [FAILED]: PropTypes.string,
+    [OUTGOING]: PropTypes.string,
+    [QUEUED]: PropTypes.string,
+    [READ]: PropTypes.string,
+    [SAVED]: PropTypes.string,
+    [SENT]: PropTypes.string,
+    [UNSENT]: PropTypes.string
+  }),
+  messageBubbleTitleI18N: PropTypes.shape({
+    attachmentBubbleTitle: PropTypes.string
+  }),
+  messageMetaInfoI18N: PropTypes.shape({
+    autoMessagesI18N: PropTypes.shape({
+      [UN_SUPPORTED_FILE]: PropTypes.string,
+      [WELCOMEMSG]: PropTypes.string,
+      [WORKFLOW_MESSAGE]: PropTypes.string,
+      [WORKFLOW_NOTIFICATION]: PropTypes.string
+    }),
+    autoMessagesTitleI18N: PropTypes.shape({
+      [UN_SUPPORTED_FILE]: PropTypes.string,
+      [WELCOMEMSG]: PropTypes.string,
+      [WORKFLOW_MESSAGE]: PropTypes.string,
+      [WORKFLOW_NOTIFICATION]: PropTypes.string
+    }),
+    restrictedAttachmentMetaInfo: PropTypes.shape({
+      info: PropTypes.string,
+      title: PropTypes.string
+    })
+  }),
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    displayText: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(Object.values(defaultMessageActions))]).isRequired,
+    iconTitle: PropTypes.string,
+    isDisabled: PropTypes.bool,
+    renderFunction: PropTypes.func
+  })),
+  onSelectAction: PropTypes.func,
+  onMouseEnterAction: PropTypes.func,
+  replyText: PropTypes.string,
+  seeMoreText: PropTypes.string,
+  deleteMessageText: PropTypes.string,
+  onLoadFullMessage: PropTypes.func,
+  onClickReply: PropTypes.func,
+  onTicketClick: PropTypes.func,
+  messageContentClickMapping: PropTypes.object,
+  customStyle: PropTypes.object,
+  customProps: PropTypes.shape({
+    imIntegrationIconProps: PropTypes.object,
+    imMessageContentProps: PropTypes.object,
+    imPermaLinkProps: PropTypes.object,
+    messageProps: PropTypes.object
+  })
+};
+export default imMessagePropTypes;

package/es/im/IMMessageContent/IMMessageContent.js

@@ -0,0 +1,128 @@
+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); }
+
+/* eslint-disable react/jsx-indent */
+
+/** ** Libraries *** */
+import React, { Fragment } from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useIMMessageContent from '@zohoim/chat-components-hooks/es/im/IMMessageContent/useIMMessageContent';
+/** ** Constants *** */
+
+import imMessageContentDefaultProps from './props/defaultProps';
+import imMessageContentPropTypes from './props/propTypes';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+/** ** Styles *** */
+
+import style from './css/IMMessageContent.module.css';
+/** ** Components *** */
+
+import IMReplyBubble from '../IMReplyBubble/IMReplyBubble';
+import IMTextBubble from '../IMTextBubble/IMTextBubble';
+import LocationBubble from '../../LocationBubble/LocationBubble';
+import ImageBubble from '../../ImageBubble/ImageBubble';
+import VideoBubble from '../../VideoBubble/VideoBubble';
+import AudioBubble from '../../AudioBubble/AudioBubble';
+import AttachmentBubble from '../../AttachmentBubble/AttachmentBubble';
+export default function IMMessageContent(props) {
+  const {
+    messageDetails,
+    sessionDetails,
+    onLoadFullMessage,
+    onClickReply,
+    seeMoreText,
+    replyText,
+    deleteMessageText,
+    customStyle,
+    customProps,
+    renderCustomMessage,
+    onClick: propOnClick,
+    isFailed,
+    isSending,
+    messageContentClickMapping,
+    messageBubbleTitleI18N,
+    isShowFullContent
+  } = props;
+  const {
+    imReplyBubbleProps = dummyObject,
+    imTextBubbleProps = dummyObject,
+    locationBubbleProps = dummyObject,
+    imageBubbleProps = dummyObject,
+    videoBubbleProps = dummyObject,
+    audioBubbleProps = dummyObject,
+    attachmentBubbleProps = dummyObject
+  } = customProps;
+  const {
+    onImageBubbleClick,
+    onAttachmentBubbleClick
+  } = messageContentClickMapping;
+  const {
+    attachmentBubbleTitle
+  } = messageBubbleTitleI18N || dummyObject;
+  const {
+    isShowLayoutBubble,
+    isShowReplyBubble,
+    isShowImageBubble,
+    isShowVideoBubble,
+    isShowAudioBubble,
+    isShowAttachmentBubble,
+    isShowLocationBubble,
+    isShowTextBubble,
+    isShowCustomBubble,
+    isShowDeleteBubble,
+    replyToMessageDetails: replyToMessage,
+    attachmentDetails,
+    locationUrl
+  } = useIMMessageContent({
+    messageDetails,
+    onClick: propOnClick
+  });
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const wrapperDivProps = {
+    className: newStyle.messageContentRow
+  };
+  return /*#__PURE__*/React.createElement(Fragment, null, isShowLayoutBubble ? null : null, isShowDeleteBubble ? /*#__PURE__*/React.createElement("div", {
+    className: newStyle.deleteBubble
+  }, deleteMessageText) : null, isShowReplyBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(IMReplyBubble, _extends({
+    isFailed: isFailed,
+    messageDetails: replyToMessage,
+    onClick: onClickReply,
+    replyText: replyText
+  }, imReplyBubbleProps))) : null, isShowCustomBubble ? renderCustomMessage({
+    messageDetails,
+    isFailed
+  }) : null, isShowImageBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(ImageBubble, _extends({
+    imageDetails: attachmentDetails,
+    isFailed: isFailed,
+    isSending: isSending,
+    onClick: onImageBubbleClick
+  }, imageBubbleProps))) : null, isShowVideoBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(VideoBubble, _extends({
+    isFailed: isFailed,
+    videoDetails: attachmentDetails
+  }, videoBubbleProps))) : null, isShowAudioBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(AudioBubble, _extends({
+    audioDetails: attachmentDetails,
+    isFailed: isFailed
+  }, audioBubbleProps))) : null, isShowAttachmentBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(AttachmentBubble, _extends({
+    attachmentBubbleTitle: attachmentBubbleTitle,
+    attachmentDetails: attachmentDetails,
+    isFailed: isFailed,
+    isSending: isSending,
+    onClick: onAttachmentBubbleClick
+  }, attachmentBubbleProps))) : null, isShowLocationBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(LocationBubble, _extends({
+    isFailed: isFailed,
+    locationUrl: locationUrl
+  }, locationBubbleProps))) : null, isShowTextBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(IMTextBubble, _extends({
+    isFailed: isFailed,
+    isShowFullContent: isShowFullContent,
+    messageDetails: messageDetails,
+    moreText: seeMoreText,
+    onLoadFullMessage: onLoadFullMessage,
+    sessionDetails: sessionDetails
+  }, imTextBubbleProps))) : null);
+}
+IMMessageContent.propTypes = imMessageContentPropTypes;
+IMMessageContent.defaultProps = imMessageContentDefaultProps;
+IMMessageContent.displayName = 'IMMessageContent';

package/es/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/es/im/IMMessageContent/index.js

@@ -0,0 +1 @@
+export { default as IMMessageContent } from './IMMessageContent';

package/es/im/IMMessageContent/props/defaultProps.js

@@ -0,0 +1,9 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const imMessageContentDefaultProps = {
+  customStyle: dummyObject,
+  customProps: dummyObject,
+  messageBubbleTitleI18N: dummyObject,
+  messageContentClickMapping: dummyObject
+};
+export default imMessageContentDefaultProps;

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

@@ -0,0 +1,54 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const imMessageContentPropTypes = {
+  messageDetails: PropTypes.shape({
+    displayMessage: PropTypes.string.isRequired,
+    attachment: PropTypes.string,
+    contentType: PropTypes.string,
+    dateTimeDetails: PropTypes.shape({
+      displayDateTime: PropTypes.string,
+      tooltip: PropTypes.string
+    }),
+    direction: PropTypes.string,
+    fullMessage: PropTypes.string,
+    id: PropTypes.string,
+    layout: PropTypes.string,
+    location: PropTypes.string,
+    meta: PropTypes.shape({
+      DESK_TICKET_ID: PropTypes.string,
+      DESK_TICKET_NUMBER: PropTypes.string,
+      SYSTEM_MESSAGE_TYPE: PropTypes.string
+    }),
+    replyToMessage: PropTypes.object,
+    status: PropTypes.string,
+    type: PropTypes.string
+  }).isRequired,
+  sessionDetails: PropTypes.shape({
+    id: PropTypes.string
+  }),
+  onClick: PropTypes.func,
+  messageContentClickMapping: PropTypes.object,
+  messageBubbleTitleI18N: PropTypes.shape({
+    attachmentBubbleTitle: PropTypes.string
+  }),
+  onLoadFullMessage: PropTypes.func,
+  onClickReply: PropTypes.func,
+  seeMoreText: PropTypes.string,
+  deleteMessageText: PropTypes.string,
+  replyText: PropTypes.string,
+  renderCustomMessage: PropTypes.func,
+  customStyle: PropTypes.object,
+  customProps: PropTypes.shape({
+    attachmentBubbleProps: PropTypes.object,
+    audioBubbleProps: PropTypes.object,
+    imReplyBubbleProps: PropTypes.object,
+    imTextBubbleProps: PropTypes.object,
+    imageBubbleProps: PropTypes.object,
+    locationBubbleProps: PropTypes.object,
+    videoBubbleProps: PropTypes.object
+  }),
+  isFailed: PropTypes.bool,
+  isSending: PropTypes.bool,
+  isShowFullContent: PropTypes.bool
+};
+export default imMessageContentPropTypes;

package/es/im/IMMessageMeta/IMMessageMeta.js

@@ -0,0 +1,72 @@
+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); }
+
+/** ** Libraries *** */
+import React from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useIMMessageMeta from '@zohoim/chat-components-hooks/es/im/IMMessageMeta/useIMMessageMeta';
+/** ** Constants *** */
+
+import imMessageMetaDefaultProps from './props/defaultProps';
+import imMessageMetaPropTypes from './props/propTypes';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
+/** ** Styles *** */
+
+import style from './css/IMMessageMeta.module.css';
+/** ** Components *** */
+
+import { Container } from '@zohodesk/components/es/Layout';
+import IMMessageMetaInfo from '../IMMessageMetaInfo/IMMessageMetaInfo';
+export default function IMMessageMeta(props) {
+  const {
+    direction,
+    customStyle,
+    time,
+    timeTooltip,
+    messageMetaInfoI18N,
+    autoMessageType,
+    isValidAttachment,
+    customProps
+  } = props;
+  const {
+    imMessageMetaInfoProps = dummyObject
+  } = customProps;
+  const {
+    imMessageMetaInfoTitle,
+    imMessageMetaInfoContent
+  } = useIMMessageMeta({
+    messageMetaInfoI18N,
+    autoMessageType,
+    isValidAttachment
+  });
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+
+  const {
+    imMessageMetaClass,
+    dotClass
+  } = cssJSLogic({
+    direction
+  }, newStyle);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, imMessageMetaInfoContent || time ? /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    className: imMessageMetaClass
+  }, imMessageMetaInfoContent ? /*#__PURE__*/React.createElement(IMMessageMetaInfo, _extends({
+    imMessageMetaInfoContent: imMessageMetaInfoContent,
+    imMessageMetaInfoTitle: imMessageMetaInfoTitle
+  }, imMessageMetaInfoProps)) : null, imMessageMetaInfoContent && time ? /*#__PURE__*/React.createElement("div", {
+    className: dotClass
+  }, "\u22C5") : null, time ? /*#__PURE__*/React.createElement("div", {
+    className: newStyle.dateTime,
+    "data-title": timeTooltip
+  }, time) : null) : null);
+}
+IMMessageMeta.propTypes = imMessageMetaPropTypes;
+IMMessageMeta.defaultProps = imMessageMetaDefaultProps;
+IMMessageMeta.displayName = 'IMMessageMeta';