@zohoim/chat-components 0.0.11 → 0.0.14

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

@@ -1,19 +1,9 @@
 /** ** Libraries *** */
-import PropTypes from "prop-types";
-
+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 sizes from "@zohoim/chat-components-utils/es/constants/sizes";
-const {
-  REPLY,
-  COPY,
-  DOWNLOAD,
-  CREATE_TICKET,
-  RESEND,
-  DELETE,
-  FORWARD
-} = defaultMessageActions;
+
+import { defaultMessageActions } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
+import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
 const {
   SENT,
   SAVED,
@@ -26,123 +16,73 @@ const {
 } = messageStatusConstants;
 const imMessagePropTypes = {
   messageDetails: PropTypes.shape({
-    direction: PropTypes.string,
+    displayMessage: PropTypes.string.isRequired,
     actor: PropTypes.shape({
-      type: PropTypes.string,
-      photoURL: PropTypes.string,
-      name: PropTypes.string,
       contactName: PropTypes.string,
-      externalId: PropTypes.string
+      externalId: PropTypes.string,
+      name: PropTypes.string,
+      photoURL: PropTypes.string,
+      type: PropTypes.string
     }),
-    status: PropTypes.string,
+    attachment: PropTypes.string,
+    contentType: PropTypes.string,
+    createdTime: PropTypes.string,
+    direction: PropTypes.string,
+    id: PropTypes.string,
+    isCustomMessage: PropTypes.bool,
+    layout: PropTypes.string,
+    locationUrl: PropTypes.string,
     meta: PropTypes.shape({
-      SYSTEM_MESSAGE_TYPE: PropTypes.string,
-      DESK_KB_ARTICLE_TRANSLATION_ID: PropTypes.string,
+      DESK_TICKET_ID: PropTypes.string,
       DESK_TICKET_NUMBER: PropTypes.string,
-      DESK_TICKET_ID: PropTypes.string
+      SYSTEM_MESSAGE_TYPE: PropTypes.string
     }),
-    attachment: PropTypes.string,
-    location: PropTypes.string,
-    layout: PropTypes.string,
-    contentType: PropTypes.string,
     replyToMessage: PropTypes.object,
-    kbArticle: PropTypes.string,
-    type: PropTypes.string,
-    displayMessage: PropTypes.string,
-    createdTime: PropTypes.string,
-    id: PropTypes.string
-  }),
+    status: PropTypes.string,
+    type: PropTypes.string
+  }).isRequired,
   sessionDetails: PropTypes.shape({
     integrationService: PropTypes.string
   }),
-  defaultAgentAvatar: PropTypes.string,
-  autoMessageAvatar: PropTypes.string,
-  defaultContactAvatar: PropTypes.string,
-  highlightMessageId: PropTypes.string,
-  isSameSender: PropTypes.bool,
-  isSingleMessage: PropTypes.bool,
+  defaultAvatarUrls: PropTypes.shape({
+    autoMessageAvatar: PropTypes.string,
+    defaultAgentAvatar: PropTypes.string,
+    defaultContactAvatar: PropTypes.string
+  }),
+  messageDisplayProps: PropTypes.shape({
+    isHighlightMessage: PropTypes.bool,
+    isShowMessageTime: PropTypes.bool,
+    isShowSender: PropTypes.bool,
+    needSender: PropTypes.bool
+  }),
   messageStatusI18N: PropTypes.shape({
-    [SENT]: PropTypes.string,
-    [SAVED]: PropTypes.string,
-    [QUEUED]: PropTypes.string,
     [DELIVERED]: PropTypes.string,
-    [READ]: PropTypes.string,
-    [UNSENT]: PropTypes.string,
     [FAILED]: PropTypes.string,
-    [OUTGOING]: PropTypes.string
-  }),
-  isCurrentAgent: PropTypes.bool.isRequired,
-  isSameTimeMessage: PropTypes.bool,
-  messageActionDetails: PropTypes.shape({
-    [REPLY]: PropTypes.shape({
-      id: PropTypes.string,
-      displayText: PropTypes.string,
-      iconTitle: PropTypes.string,
-      onClick: PropTypes.func
-    }),
-    [COPY]: PropTypes.shape({
-      id: PropTypes.string,
-      displayText: PropTypes.string,
-      iconTitle: PropTypes.string,
-      onClick: PropTypes.func
-    }),
-    [DOWNLOAD]: PropTypes.shape({
-      id: PropTypes.string,
-      displayText: PropTypes.string,
-      iconTitle: PropTypes.string,
-      onClick: PropTypes.func
-    }),
-    [CREATE_TICKET]: PropTypes.shape({
-      id: PropTypes.string,
-      displayText: PropTypes.string,
-      iconTitle: PropTypes.string,
-      onClick: PropTypes.func
-    }),
-    [RESEND]: PropTypes.shape({
-      id: PropTypes.string,
-      displayText: PropTypes.string,
-      iconTitle: PropTypes.string,
-      onClick: PropTypes.func
-    }),
-    [DELETE]: PropTypes.shape({
-      id: PropTypes.string,
-      displayText: PropTypes.string,
-      iconTitle: PropTypes.string,
-      onClick: PropTypes.func
-    }),
-    [FORWARD]: PropTypes.shape({
-      id: PropTypes.string,
-      displayText: PropTypes.string,
-      iconTitle: PropTypes.string,
-      onClick: PropTypes.func
-    })
+    [OUTGOING]: PropTypes.string,
+    [QUEUED]: PropTypes.string,
+    [READ]: PropTypes.string,
+    [SAVED]: PropTypes.string,
+    [SENT]: PropTypes.string,
+    [UNSENT]: PropTypes.string
   }),
-  canReply: PropTypes.bool.isRequired,
-  messageBubbleCustomStyle: PropTypes.object,
-  needMessageActions: PropTypes.bool,
-  needSender: PropTypes.bool,
-  senderAvatarSize: PropTypes.oneOf(["xxsmall", "small", "xsmall", "medium", "xmedium", "large", "xlarge"]),
-  avatarCustomStyle: PropTypes.object,
-  senderIntegrationIconSize: PropTypes.oneOf([sizes.SMALL, sizes.MEDIUM]),
-  senderIntegrationIconCustomStyle: PropTypes.object,
-  isCustomIntegrationIcon: PropTypes.bool,
-  isCustomSenderAvatar: PropTypes.bool,
-  renderCustomIntegrationIcon: PropTypes.func,
-  renderCustomSenderAvatar: PropTypes.func,
-  needMessageBox: PropTypes.bool,
-  renderMessage: PropTypes.func.isRequired,
-  renderMessageFooter: PropTypes.func,
-  renderMessageHeader: PropTypes.func,
-  messageBoxCustomStyle: PropTypes.object,
-  renderSecondaryActions: PropTypes.func,
-  actionsDefaultShowCount: PropTypes.number,
-  actionIconCustomStyle: PropTypes.object,
-  moreActionItemCustomStyle: PropTypes.object,
-  messageActionCustomStyle: PropTypes.object,
-  moreActionPopupCustomStyle: PropTypes.object,
-  messageStatusCustomStyle: PropTypes.object,
+  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,
   replyText: PropTypes.string,
-  articleShareText: PropTypes.string,
-  moreText: PropTypes.string
+  seeMoreText: PropTypes.string,
+  onLoadFullMessage: PropTypes.func,
+  onClickReply: PropTypes.func,
+  onTicketClick: PropTypes.func,
+  customProps: PropTypes.shape({
+    imIntegrationIconProps: PropTypes.object,
+    imMessageContentProps: PropTypes.object,
+    imTicketLinkProps: PropTypes.object,
+    messageProps: PropTypes.object
+  })
 };
 export default imMessagePropTypes;

package/es/im/IMMessageContent/IMMessageContent.js

@@ -1,40 +1,54 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
+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";
+/* eslint-disable react/jsx-indent */
 
+/** ** Libraries *** */
+import React, { useMemo } from 'react';
 /** ** Hooks *** */
-import useMergeStyle from "@zohodesk/hooks/es/utils/useMergeStyle";
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
-import imMessageContentDefaultProps from "./props/defaultProps";
-import imMessageContentPropTypes from "./props/propTypes";
 
+import imMessageContentDefaultProps from './props/defaultProps';
+import imMessageContentPropTypes from './props/propTypes';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 /** ** Methods *** */
-import renderHandler from "@zohoim/chat-components-utils/es/common/renderHandler";
-import cssJSLogic from "./css/cssJSLogic";
 
+import getIsShowBubble from '@zohoim/chat-components-utils/es/imUtils/getIsShowBubble';
+import getMessageBubbleDetails from '@zohoim/chat-components-utils/es/imUtils/getMessageBubbleDetails';
 /** ** Styles *** */
-import style from "./css/IMMessageContent.module.css";
-import useIMMessageContent from '@zohoim/chat-components-hooks/es/im/IMMessageContent/useIMMessageContent';
-import { messageTypes, mediaTypes as mediaTypeConstants } from "@zohoim/chat-components-utils/es/constants/messageConstants";
-import IMReplyBubble from "../IMReplyBubble/IMReplyBubble";
-import IMLocationBubble from "../IMLocationBubble/IMLocationBubble";
-import IMTextBubble from "../IMTextBubble/IMTextBubble";
-import IMImageBubble from "../IMImageBubble/IMImageBubble";
-import IMVideoBubble from "../IMVideoBubble/IMVideoBubble";
-import IMAudioBubble from "../IMAudioBubble/IMAudioBubble";
-import IMAttachmentBubble from "../IMAttachmentBubble/IMAttachmentBubble";
-import IMArticleBubble from "../IMArticleBubble/IMArticleBubble";
+
+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 {
-    customStyle,
     messageDetails,
+    sessionDetails,
+    onLoadFullMessage,
+    onClickReply,
     seeMoreText,
     replyText,
-    articleShareText
+    customStyle,
+    customProps,
+    renderCustomMessage
   } = props;
+  const {
+    imReplyBubbleProps = dummyObject,
+    imTextBubbleProps = dummyObject,
+    locationBubbleProps = dummyObject,
+    imageBubbleProps = dummyObject,
+    videoBubbleProps = dummyObject,
+    audioBubbleProps = dummyObject,
+    attachmentBubbleProps = dummyObject
+  } = customProps;
   const {
     isShowLayoutBubble,
     isShowReplyBubble,
@@ -43,47 +57,58 @@ export default function IMMessageContent(props) {
     isShowAudioBubble,
     isShowAttachmentBubble,
     isShowLocationBubble,
-    isShowArticleBubble,
-    isShowTextBubble
-  } = useIMMessageContent({
+    isShowTextBubble,
+    isShowCustomBubble
+  } = useMemo(() => getIsShowBubble({
     messageDetails
-  });
+  }), [messageDetails]);
+  /* External CSS Customization */
 
-  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
   const {
-    imMessageContentClass
-  } = cssJSLogic(props, newStyle);
-  const {
-    attachment: attachmentDetails,
-    location: locationDetails,
-    kbArticle: articleDetails,
-    replyToMessage
-  } = messageDetails || {};
-  return /*#__PURE__*/React.createElement("div", {
-    className: imMessageContentClass
-  }, isShowLayoutBubble ? null : null, isShowReplyBubble ? /*#__PURE__*/React.createElement(IMReplyBubble, {
+    replyToMessageDetails: replyToMessage,
+    attachmentDetails,
+    locationUrl
+  } = useMemo(() => getMessageBubbleDetails({
+    messageDetails
+  }), [messageDetails]);
+  return /*#__PURE__*/React.createElement("div", null, isShowLayoutBubble ? null : null, isShowReplyBubble ? /*#__PURE__*/React.createElement("div", {
+    className: newStyle.messageContentRow
+  }, /*#__PURE__*/React.createElement(IMReplyBubble, _extends({
     messageDetails: replyToMessage,
+    onClick: onClickReply,
     replyText: replyText
-  }) : null, isShowImageBubble ? /*#__PURE__*/React.createElement(IMImageBubble, {
-    attachmentDetails: attachmentDetails
-  }) : null, isShowVideoBubble ? /*#__PURE__*/React.createElement(IMVideoBubble, {
-    attachmentDetails: attachmentDetails
-  }) : null, isShowAudioBubble ? /*#__PURE__*/React.createElement(IMAudioBubble, {
-    attachmentDetails: attachmentDetails
-  }) : null, isShowAttachmentBubble ? /*#__PURE__*/React.createElement(IMAttachmentBubble, {
+  }, imReplyBubbleProps))) : null, isShowCustomBubble ? renderCustomMessage({
+    messageDetails
+  }) : null, isShowImageBubble ? /*#__PURE__*/React.createElement("div", {
+    className: newStyle.messageContentRow
+  }, /*#__PURE__*/React.createElement(ImageBubble, _extends({
+    imageDetails: attachmentDetails
+  }, imageBubbleProps))) : null, isShowVideoBubble ? /*#__PURE__*/React.createElement("div", {
+    className: newStyle.messageContentRow
+  }, /*#__PURE__*/React.createElement(VideoBubble, _extends({
+    videoDetails: attachmentDetails
+  }, videoBubbleProps))) : null, isShowAudioBubble ? /*#__PURE__*/React.createElement("div", {
+    className: newStyle.messageContentRow
+  }, /*#__PURE__*/React.createElement(AudioBubble, _extends({
+    audioDetails: attachmentDetails
+  }, audioBubbleProps))) : null, isShowAttachmentBubble ? /*#__PURE__*/React.createElement("div", {
+    className: newStyle.messageContentRow
+  }, /*#__PURE__*/React.createElement(AttachmentBubble, _extends({
     attachmentDetails: attachmentDetails
-  }) : null, isShowLocationBubble ? /*#__PURE__*/React.createElement(IMLocationBubble, {
-    locationDetails: locationDetails
-  }) : null, isShowArticleBubble ? /*#__PURE__*/React.createElement(IMArticleBubble, {
-    articleDetails: articleDetails,
-    articleShareI18N: articleShareText
-  }) : null, isShowTextBubble ? /*#__PURE__*/React.createElement(IMTextBubble, {
+  }, attachmentBubbleProps))) : null, isShowLocationBubble ? /*#__PURE__*/React.createElement("div", {
+    className: newStyle.messageContentRow
+  }, /*#__PURE__*/React.createElement(LocationBubble, _extends({
+    locationUrl: locationUrl
+  }, locationBubbleProps))) : null, isShowTextBubble ? /*#__PURE__*/React.createElement("div", {
+    className: newStyle.messageContentRow
+  }, /*#__PURE__*/React.createElement(IMTextBubble, _extends({
     messageDetails: messageDetails,
-    moreText: seeMoreText
-  }) : null);
+    moreText: seeMoreText,
+    onLoadFullMessage: onLoadFullMessage,
+    sessionDetails: sessionDetails
+  }, imTextBubbleProps))) : null);
 }
 IMMessageContent.propTypes = imMessageContentPropTypes;
 IMMessageContent.defaultProps = imMessageContentDefaultProps;
-IMMessageContent.displayName = "IMMessageContent";
+IMMessageContent.displayName = 'IMMessageContent';

package/es/im/IMMessageContent/css/IMMessageContent.module.css

@@ -0,0 +1,3 @@
+.messageContentRow + .messageContentRow{
+  margin-top: var(--zd_size5) ;
+}

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

@@ -1,8 +1,7 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const imMessageContentDefaultProps = {
   customStyle: dummyObject,
-  moreText: 'See More',
-  messageDetails: dummyObject
+  customProps: dummyObject
 };
 export default imMessageContentDefaultProps;

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

@@ -1,37 +1,42 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const imMessageContentPropTypes = {
-  customStyle: PropTypes.object,
   messageDetails: PropTypes.shape({
+    displayMessage: PropTypes.string.isRequired,
+    attachment: PropTypes.string,
+    contentType: PropTypes.string,
+    createdTime: PropTypes.string,
     direction: PropTypes.string,
-    actor: PropTypes.shape({
-      type: PropTypes.string,
-      photoURL: PropTypes.string,
-      name: PropTypes.string,
-      contactName: PropTypes.string,
-      externalId: PropTypes.string
-    }),
-    status: PropTypes.string,
+    fullMessage: PropTypes.string,
+    id: PropTypes.string,
+    layout: PropTypes.string,
+    location: PropTypes.string,
     meta: PropTypes.shape({
-      SYSTEM_MESSAGE_TYPE: PropTypes.string,
-      DESK_KB_ARTICLE_TRANSLATION_ID: PropTypes.string,
+      DESK_TICKET_ID: PropTypes.string,
       DESK_TICKET_NUMBER: PropTypes.string,
-      DESK_TICKET_ID: PropTypes.string
+      SYSTEM_MESSAGE_TYPE: PropTypes.string
     }),
-    attachment: PropTypes.string,
-    location: PropTypes.string,
-    layout: PropTypes.string,
-    contentType: PropTypes.string,
     replyToMessage: PropTypes.object,
-    kbArticle: PropTypes.string,
-    type: PropTypes.string,
-    displayMessage: PropTypes.string,
-    fullMessage: PropTypes.string,
-    createdTime: PropTypes.string,
+    status: PropTypes.string,
+    type: PropTypes.string
+  }).isRequired,
+  sessionDetails: PropTypes.shape({
     id: PropTypes.string
   }),
-  moreText: PropTypes.string,
+  onLoadFullMessage: PropTypes.func,
+  onClickReply: PropTypes.func,
+  seeMoreText: PropTypes.string,
   replyText: PropTypes.string,
-  articleShareText: 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
+  })
 };
 export default imMessageContentPropTypes;

package/es/im/IMMessageMeta/IMMessageMeta.js

@@ -1,59 +1,63 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
+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 useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
+
 import imMessageMetaDefaultProps from './props/defaultProps';
 import imMessageMetaPropTypes from './props/propTypes';
-
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
-import cssJSLogic from './css/cssJSLogic';
 
+import cssJSLogic from './css/cssJSLogic';
 /** ** Styles *** */
-import style from './css/IMMessageMeta.module.css';
 
+import style from './css/IMMessageMeta.module.css';
 /** ** Components *** */
-import { Container, Box } from '@zohodesk/components/es/Layout';
-import IMDateTime from '../IMDateTime/IMDateTime';
+
+import { Container } from '@zohodesk/components/es/Layout';
 import IMAutoMessageInfo from '../IMAutoMessageInfo/IMAutoMessageInfo';
 export default function IMMessageMeta(props) {
   const {
+    direction,
     customStyle,
-    autoMessageCustomStyle,
-    timeCustomStyle,
     time,
+    timeTooltip,
     autoMessageType,
     autoMessagesI18N,
-    autoMessagesTitleI18N
+    autoMessagesTitleI18N,
+    customProps
   } = props;
+  const {
+    imAutoMessageInfoProps = dummyObject
+  } = customProps;
+  /* External CSS Customization */
 
-  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
   /* CSS classnames added based on logic */
+
   const {
     imMessageMetaClass,
     dotClass
-  } = cssJSLogic(props, newStyle);
+  } = cssJSLogic({
+    direction
+  }, newStyle);
   return /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     className: imMessageMetaClass
-  }, /*#__PURE__*/React.createElement(IMDateTime, {
-    customStyle: timeCustomStyle,
-    value: time
-  }), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: newStyle.dateTime,
+    "data-title": timeTooltip
+  }, time), autoMessageType ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: dotClass
-  }, "\u22C5"), /*#__PURE__*/React.createElement(IMAutoMessageInfo, {
-    customStyle: autoMessageCustomStyle,
-    autoMessageType: autoMessageType,
+  }, "\u22C5"), /*#__PURE__*/React.createElement(IMAutoMessageInfo, _extends({
     autoMessagesI18N: autoMessagesI18N,
-    autoMessagesTitleI18N: autoMessagesTitleI18N
-  }));
+    autoMessagesTitleI18N: autoMessagesTitleI18N,
+    autoMessageType: autoMessageType
+  }, imAutoMessageInfoProps))) : null);
 }
 IMMessageMeta.propTypes = imMessageMetaPropTypes;
 IMMessageMeta.defaultProps = imMessageMetaDefaultProps;

package/es/im/IMMessageMeta/css/IMMessageMeta.module.css

@@ -1,11 +1,11 @@
 .varClass {
-  --imMessageMeta-gap: var(--imlib_size_5);
-  --imMessageMeta-separator_gap: var(--imlib_size_5);
-  --imMessageMeta-time_padding: var(--imlib_size_45);
+  --imMessageMeta-gap: var(--zd_size5);
+  --imMessageMeta-separator_gap: var(--zd_size5);
+  --imMessageMeta-time_padding: var(--zd_size45);
 }
 
 .imMessageMeta {
-  max-width: 100%;
+  max-width: 100% ;
   align-items: center;
   margin-top: var(--imMessageMeta-gap);
 }
@@ -30,3 +30,14 @@
 [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) ;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--imlib_chat_components_imMessageMeta_timeColor);
+}

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

@@ -1,14 +1,22 @@
 /** ** Methods *** */
 import { compileClassNames } from '@zohodesk/utils';
-import { direction as directionConstants } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+import getMessageDirectionType from '@zohoim/chat-components-utils/es/getMessageDirectionType';
 export default function cssJSLogic(props, style) {
   const {
     direction
   } = props;
+  const {
+    isIncoming,
+    isOutgoing
+  } = getMessageDirectionType({
+    messageDetails: {
+      direction
+    }
+  });
   const imMessageMetaClass = compileClassNames({
     [style.imMessageMeta]: true,
-    [style.leftTime]: direction === directionConstants.IN,
-    [style.rightTime]: direction === directionConstants.OUT
+    [style.leftTime]: isIncoming,
+    [style.rightTime]: isOutgoing
   });
   const dotClass = compileClassNames({
     [style.dot]: true

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

@@ -1,5 +1,5 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 import { direction as directionConstants } from '@zohoim/chat-components-utils/es/constants/messageConstants';
 const imMessageMetaDefaultProps = {
   customStyle: dummyObject,

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

@@ -1,6 +1,9 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
-import { autoMessageTypes, direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+/** ** Constants *** */
+
+import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+import autoMessageTypes from '@zohoim/chat-components-utils/es/imUtils/constants/autoMessageTypes';
 const {
   WELCOMEMSG,
   WORKFLOW_MESSAGE,
@@ -8,23 +11,25 @@ const {
   UN_SUPPORTED_FILE
 } = autoMessageTypes;
 const imMessageMetaPropTypes = {
-  customStyle: PropTypes.object,
-  autoMessageCustomStyle: PropTypes.object,
-  timeCustomStyle: PropTypes.object,
-  direction: PropTypes.oneOf([direction.IN, direction.OUT]),
-  time: PropTypes.string,
-  autoMessageType: PropTypes.oneOf([WELCOMEMSG, WORKFLOW_MESSAGE, WORKFLOW_NOTIFICATION, UN_SUPPORTED_FILE]),
+  direction: PropTypes.oneOf(Object.values(direction)).isRequired,
+  time: PropTypes.string.isRequired,
+  autoMessageType: PropTypes.oneOf(Object.values(autoMessageTypes)),
   autoMessagesI18N: PropTypes.shape({
+    [UN_SUPPORTED_FILE]: PropTypes.string,
     [WELCOMEMSG]: PropTypes.string,
     [WORKFLOW_MESSAGE]: PropTypes.string,
-    [WORKFLOW_NOTIFICATION]: PropTypes.string,
-    [UN_SUPPORTED_FILE]: 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,
-    [UN_SUPPORTED_FILE]: PropTypes.string
-  })
+    [WORKFLOW_NOTIFICATION]: PropTypes.string
+  }),
+  customProps: PropTypes.shape({
+    imAutoMessageInfoProps: PropTypes.object
+  }),
+  customStyle: PropTypes.object,
+  timeTooltip: PropTypes.string
 };
 export default imMessageMetaPropTypes;