@zohoim/chat-components 0.0.15 → 0.0.17

package/es/icons/iconSrc/attachments/Text.js

@@ -0,0 +1,47 @@
+/* eslint-disable */
+import React from 'react';
+import Icon from '@zohodesk/icon/es/Icon/Icon';
+export default function IconComponent(props) {
+  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
+    id: "Layer_1",
+    "data-name": "Layer 1",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 32.19 32.94"
+  }, " ", /*#__PURE__*/React.createElement("defs", null, " ", /*#__PURE__*/React.createElement("style", {
+    dangerouslySetInnerHTML: {
+      __html: `
+      .cls-1 {
+        fill: #c8cadb;
+        opacity: 0.5;
+      }
+
+      .cls-2 {
+        fill: #010101;
+      }
+    `
+    }
+  }), " "), " ", /*#__PURE__*/React.createElement("rect", {
+    className: "cls-1",
+    x: "5.35",
+    y: "6.1",
+    width: "26.84",
+    height: "26.84",
+    rx: "5"
+  }), " ", /*#__PURE__*/React.createElement("g", null, " ", /*#__PURE__*/React.createElement("path", {
+    className: "path-0",
+    d: "M21.67,20.88H14.39a1,1,0,1,0,0,2h7.28a1,1,0,0,0,0-2Z"
+  }), " ", /*#__PURE__*/React.createElement("path", {
+    className: "path-1",
+    d: "M9.15,20.31a1.57,1.57,0,1,0,1.57,1.57A1.57,1.57,0,0,0,9.15,20.31Z"
+  }), " ", /*#__PURE__*/React.createElement("path", {
+    className: "path-2",
+    d: "M21.67,13.54H14.39a1,1,0,0,0,0,2h7.28a1,1,0,0,0,0-2Z"
+  }), " ", /*#__PURE__*/React.createElement("path", {
+    className: "path-3",
+    d: "M9.15,13a1.57,1.57,0,1,0,1.57,1.57A1.57,1.57,0,0,0,9.15,13Z"
+  }), " ", /*#__PURE__*/React.createElement("path", {
+    className: "path-4",
+    d: "M29.75,10.13,21.12.34A1,1,0,0,0,20.37,0H4.11A4.11,4.11,0,0,0,0,4.11V25.88A4.12,4.12,0,0,0,4.11,30H25.89A4.12,4.12,0,0,0,30,25.88V10.79A1,1,0,0,0,29.75,10.13ZM25.89,28H4.11A2.12,2.12,0,0,1,2,25.88V4.11A2.12,2.12,0,0,1,4.11,2H19.77V7.94a3.5,3.5,0,0,0,3.5,3.5H28V25.88A2.12,2.12,0,0,1,25.89,28Z"
+  }), " "), " "));
+}
+IconComponent.propTypes = Icon.propTypes;

package/es/icons/iconSrc/attachments/index.js

@@ -2,7 +2,7 @@ export { default as Audio } from './Audio';
 export { default as Code } from './Code';
 export { default as Image } from './Image';
 export { default as Pdf } from './Pdf';
-export { default as Txt } from './Txt';
+export { default as Text } from './Text';
 export { default as Unknown } from './Unknown';
 export { default as Video } from './Video';
 export { default as Zip } from './Zip';

package/es/im/ArticleBubble/ArticleBubble.js

@@ -1,5 +1,5 @@
 /** ** Libraries *** */
-import React, { useMemo, Fragment } from 'react';
+import React, { useMemo } from 'react';
 /** ** Hooks *** */
 
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
@@ -17,12 +17,16 @@ import style from './css/ArticleBubble.module.css';
 /** ** Icons *** */
 
 import ArticleIcon from '../../icons/iconSrc/common/Article';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
 export default function ArticleBubble(props) {
   const {
     customStyle,
     info,
     articleDetails,
-    onClick: propOnClick
+    onClick: propOnClick,
+    isFailed
   } = props;
   const {
     title,
@@ -41,7 +45,16 @@ export default function ArticleBubble(props) {
   const iconCustomStyle = useMemo(() => ({
     base: newStyle.articleIcon
   }), [newStyle.articleIcon]);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Container, {
+  /* css classnames added based on logic */
+
+  const {
+    articleBubbleClass
+  } = cssJSLogic({
+    isFailed
+  }, newStyle);
+  return /*#__PURE__*/React.createElement(Box, {
+    className: articleBubbleClass
+  }, /*#__PURE__*/React.createElement(Container, {
     align: "vertical",
     alignBox: "row",
     isCover: false

package/es/im/ArticleBubble/css/ArticleBubble.module.css

@@ -1,22 +1,32 @@
 .articleWrapper {
   display: block;
-  /* margin: 4px 0 2px; */
   padding: var(--zd_size8) var(--zd_size10) ;
   background-color: var(--imlib_chat_components_articleBubble_bg_color);
   border-radius: 3px;
   cursor: pointer;
   border: 1px solid var(--imlib_chat_components_articleBubble_border_color);
+  margin-top: var(--zd_size4) ;
+}
+
+.failedArticleBubbleClass .articleWrapper{
+  background-color: var(--imlib_chat_components_articleBubble_bg_color_failed);
+  border-color: var(--imlib_chat_components_articleBubble_border_color_failed);
 }
 
 .title {
-  color: var(--imlib_chat_components_articleBubble_color);
+  color: var(--imlib_chat_components_articleBubble_title_color);
   font-size: var(--zd_font_size15) ;
   line-height: 1.5;
   composes: dotted from "../../css/common.module.css";
+  font-family: var(--zd_semibold);
+}
+
+.failedArticleBubbleClass .title{
+  color: var(--imlib_chat_components_articleBubble_title_color_failed);
 }
 
 .summary {
-  color: var(--imlib_chat_components_articleBubble_color);
+  color: var(--imlib_chat_components_articleBubble_summary_color);
   font-size: var(--zd_font_size13) ;
   line-height: 1.5;
   max-height: var(--zd_size40) ;
@@ -27,6 +37,10 @@
   overflow: hidden;
 }
 
+.failedArticleBubbleClass .summary{
+  color: var(--imlib_chat_components_articleBubble_summary_color_failed);
+}
+
 .articleIcon {
   display: flex;
   flex-shrink: 0;
@@ -35,17 +49,17 @@
 }
 
 .articleIcon :global(.path-0) {
-  /* fill: var(--imlib_chat_components_imIntegrationIcon_path0_color); */
-  fill: rgba(200,203,220,0.7);
+  fill: var(--imlib_chat_components_imIntegrationIcon_path0_color);
 }
 
 .articleIcon :global(.path-1) {
-  /* fill: var(--imlib_chat_components_imIntegrationIcon_path1_color); */
-  fill: #000;
+  fill: var(--imlib_chat_components_imIntegrationIcon_path1_color);
 }
 
 .content{
   composes: dotted from "../../css/common.module.css";
+  font-size: var(--zd_font_size13) ;
+  color: var(--imlib_chat_components_articleBubble_title_color);
 }
 
 [dir=ltr] .content{
@@ -54,4 +68,8 @@
 
 [dir=rtl] .content{
   margin-right: var(--zd_size8);
+}
+
+.failedArticleBubbleClass .content{
+  color: var(--imlib_chat_components_articleBubble_title_color_failed);
 }

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

@@ -0,0 +1,12 @@
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const {
+    isFailed
+  } = props;
+  const articleBubbleClass = compileClassNames({
+    [style.failedArticleBubbleClass]: isFailed
+  });
+  return {
+    articleBubbleClass
+  };
+}

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

@@ -8,6 +8,7 @@ const articleBubblePropTypes = {
   }).isRequired,
   customStyle: PropTypes.object,
   info: PropTypes.string,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  isFailed: PropTypes.bool
 };
 export default articleBubblePropTypes;

package/es/im/IMAutoMessageInfo/css/IMAutoMessageInfo.module.css

@@ -9,4 +9,5 @@
   font-size: var(--imAutoMessageInfo-font_size);
   letter-spacing: var(--imAutoMessageInfo-letter_spacing);
   max-width: var(--imAutoMessageInfo-max_width);
+  color: var(--imlib_chat_components_imAutoMessageInfo_text_color);
 }

package/es/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css

@@ -87,9 +87,4 @@
 
 .asapIcon {
   background-color: var(--imlib_chat_components_imIntegrationIcon_asap_color);
-}
-/* .twitterIcon {
-  background-color: var(
-    --imlib_chat_components_imIntegrationIcon_twitter_color
-  );
-} */
+}

package/es/im/IMMessage/IMMessage.js

@@ -20,6 +20,7 @@ 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';
@@ -31,13 +32,17 @@ export default function IMMessage(props) {
     messageDisplayProps,
     actions,
     onSelectAction,
+    onMouseEnterAction,
     replyText,
     seeMoreText,
     deleteMessageText,
+    autoMessagesI18N,
+    autoMessagesTitleI18N,
     messageStatusI18N,
     onLoadFullMessage,
     onClickReply,
     onTicketClick,
+    onMessageContentClick,
     customStyle,
     customProps
   } = props;
@@ -45,7 +50,8 @@ export default function IMMessage(props) {
     messageProps = dummyObject,
     imMessageContentProps = dummyObject,
     imTicketLinkProps = dummyObject,
-    imIntegrationIconProps = dummyObject
+    imIntegrationIconProps = dummyObject,
+    imMessageMetaProps = dummyObject
   } = customProps;
   const {
     isHighlightMessage,
@@ -65,9 +71,11 @@ export default function IMMessage(props) {
     // messageMetaType,
     // messageType,
     messageStatus,
+    isFailedMessage,
     isAgentMessage,
     messageStatusTitle,
-    createdTime,
+    dateTimeDetails,
+    autoMessageType,
     // messageId,
     ticketId,
     ticketNumber,
@@ -80,18 +88,33 @@ export default function IMMessage(props) {
   });
   /** ** Render Footer *** */
 
-  const handleRenderMessageBoxFooter = useCallback(() => isShowMessageTime ? /*#__PURE__*/React.createElement("div", null, createdTime) : null, [isShowMessageTime, createdTime]);
+  const handleRenderMessageBoxFooter = useCallback(() => {
+    const {
+      displayDateTime,
+      tooltip
+    } = dateTimeDetails || {};
+    return /*#__PURE__*/React.createElement(IMMessageMeta, _extends({
+      autoMessagesI18N: autoMessagesI18N,
+      autoMessagesTitleI18N: autoMessagesTitleI18N,
+      autoMessageType: autoMessageType,
+      direction: direction,
+      time: isShowMessageTime ? displayDateTime : '',
+      timeTooltip: tooltip
+    }, imMessageMetaProps));
+  }, [isShowMessageTime, dateTimeDetails, direction, autoMessageType, imMessageMetaProps, autoMessagesI18N, autoMessagesTitleI18N]);
   /** ** Render Message Content *** */
 
   const handleRenderMessage = useCallback(() => /*#__PURE__*/React.createElement(IMMessageContent, _extends({
     deleteMessageText: deleteMessageText,
+    isFailed: isFailedMessage,
     messageDetails: messageDetails,
+    onClick: onMessageContentClick,
     onClickReply: onClickReply,
     onLoadFullMessage: onLoadFullMessage,
     replyText: replyText,
     seeMoreText: seeMoreText,
     sessionDetails: sessionDetails
-  }, imMessageContentProps)), [seeMoreText, replyText, deleteMessageText, messageDetails, sessionDetails, onLoadFullMessage, onClickReply, imMessageContentProps]);
+  }, imMessageContentProps)), [seeMoreText, replyText, deleteMessageText, messageDetails, sessionDetails, onMessageContentClick, onLoadFullMessage, onClickReply, isFailedMessage, imMessageContentProps]);
   /** ** Render Secondary Actions - TicketId *** */
 
   const handleRenderSecondaryActions = useCallback(() => {
@@ -143,6 +166,7 @@ export default function IMMessage(props) {
     isActive: isHighlightMessage,
     isShowSender: isShowSender,
     needSender: needSender,
+    onMouseEnterAction: onMouseEnterAction,
     onSelectAction: onSelectAction,
     ownerDetails: ownerDetails,
     renderContent: handleRenderMessage,

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

@@ -4,6 +4,13 @@ import PropTypes from 'prop-types';
 
 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,
@@ -26,7 +33,10 @@ const imMessagePropTypes = {
     }),
     attachment: PropTypes.string,
     contentType: PropTypes.string,
-    createdTime: PropTypes.string,
+    dateTimeDetails: PropTypes.shape({
+      displayDateTime: PropTypes.string,
+      tooltip: PropTypes.string
+    }),
     direction: PropTypes.string,
     id: PropTypes.string,
     isCustomMessage: PropTypes.bool,
@@ -65,6 +75,18 @@ const imMessagePropTypes = {
     [SENT]: PropTypes.string,
     [UNSENT]: PropTypes.string
   }),
+  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
+  }),
   actions: PropTypes.arrayOf(PropTypes.shape({
     displayText: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(Object.values(defaultMessageActions))]).isRequired,
@@ -73,12 +95,14 @@ const imMessagePropTypes = {
     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,
+  onMessageContentClick: PropTypes.func,
   customStyle: PropTypes.object,
   customProps: PropTypes.shape({
     imIntegrationIconProps: PropTypes.object,

package/es/im/IMMessageContent/IMMessageContent.js

@@ -3,19 +3,16 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 /* eslint-disable react/jsx-indent */
 
 /** ** Libraries *** */
-import React, { useMemo, Fragment } from 'react';
+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';
-/** ** Methods *** */
-
-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';
@@ -39,7 +36,9 @@ export default function IMMessageContent(props) {
     deleteMessageText,
     customStyle,
     customProps,
-    renderCustomMessage
+    renderCustomMessage,
+    onClick: propOnClick,
+    isFailed
   } = props;
   const {
     imReplyBubbleProps = dummyObject,
@@ -60,51 +59,49 @@ export default function IMMessageContent(props) {
     isShowLocationBubble,
     isShowTextBubble,
     isShowCustomBubble,
-    isShowDeleteBubble
-  } = useMemo(() => getIsShowBubble({
-    messageDetails
-  }), [messageDetails]);
+    isShowDeleteBubble,
+    replyToMessageDetails: replyToMessage,
+    attachmentDetails,
+    locationUrl,
+    onClick
+  } = useIMMessageContent({
+    messageDetails,
+    onClick: propOnClick
+  });
   /* External CSS Customization */
 
   const newStyle = useMergeStyle(style, customStyle);
-  const {
-    replyToMessageDetails: replyToMessage,
-    attachmentDetails,
-    locationUrl
-  } = useMemo(() => getMessageBubbleDetails({
-    messageDetails
-  }), [messageDetails]);
-  return /*#__PURE__*/React.createElement(Fragment, null, isShowLayoutBubble ? null : null, isShowDeleteBubble ? /*#__PURE__*/React.createElement("div", null, deleteMessageText) : null, isShowReplyBubble ? /*#__PURE__*/React.createElement("div", {
-    className: newStyle.messageContentRow
-  }, /*#__PURE__*/React.createElement(IMReplyBubble, _extends({
+  const wrapperDivProps = {
+    className: newStyle.messageContentRow,
+    onClick
+  };
+  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
-  }) : 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({
+    messageDetails,
+    isFailed
+  }) : null, isShowImageBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(ImageBubble, _extends({
+    imageDetails: attachmentDetails,
+    isFailed: isFailed
+  }, imageBubbleProps))) : null, isShowVideoBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(VideoBubble, _extends({
+    isFailed: isFailed,
     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
-  }, attachmentBubbleProps))) : null, isShowLocationBubble ? /*#__PURE__*/React.createElement("div", {
-    className: newStyle.messageContentRow
-  }, /*#__PURE__*/React.createElement(LocationBubble, _extends({
+  }, 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({
+    attachmentDetails: attachmentDetails,
+    isFailed: isFailed
+  }, attachmentBubbleProps))) : null, isShowLocationBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(LocationBubble, _extends({
+    isFailed: isFailed,
     locationUrl: locationUrl
-  }, locationBubbleProps))) : null, isShowTextBubble ? /*#__PURE__*/React.createElement("div", {
-    className: newStyle.messageContentRow
-  }, /*#__PURE__*/React.createElement(IMTextBubble, _extends({
+  }, locationBubbleProps))) : null, isShowTextBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(IMTextBubble, _extends({
+    isFailed: isFailed,
     messageDetails: messageDetails,
     moreText: seeMoreText,
     onLoadFullMessage: onLoadFullMessage,

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

@@ -1,3 +1,7 @@
-.messageContentRow + .messageContentRow{
+.messageContentRow + .messageContentRow {
   margin-top: var(--zd_size5) ;
-}
+}
+
+.deleteBubble {
+  font-style: italic;
+}

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

@@ -5,7 +5,10 @@ const imMessageContentPropTypes = {
     displayMessage: PropTypes.string.isRequired,
     attachment: PropTypes.string,
     contentType: PropTypes.string,
-    createdTime: PropTypes.string,
+    dateTimeDetails: PropTypes.shape({
+      displayDateTime: PropTypes.string,
+      tooltip: PropTypes.string
+    }),
     direction: PropTypes.string,
     fullMessage: PropTypes.string,
     id: PropTypes.string,
@@ -23,6 +26,7 @@ const imMessageContentPropTypes = {
   sessionDetails: PropTypes.shape({
     id: PropTypes.string
   }),
+  onClick: PropTypes.func,
   onLoadFullMessage: PropTypes.func,
   onClickReply: PropTypes.func,
   seeMoreText: PropTypes.string,
@@ -38,6 +42,7 @@ const imMessageContentPropTypes = {
     imageBubbleProps: PropTypes.object,
     locationBubbleProps: PropTypes.object,
     videoBubbleProps: PropTypes.object
-  })
+  }),
+  isFailed: PropTypes.bool
 };
 export default imMessageContentPropTypes;

package/es/im/IMMessageMeta/IMMessageMeta.js

@@ -45,19 +45,19 @@ export default function IMMessageMeta(props) {
   } = cssJSLogic({
     direction
   }, newStyle);
-  return /*#__PURE__*/React.createElement(Container, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, autoMessageType || time ? /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     className: imMessageMetaClass
-  }, /*#__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, _extends({
+  }, autoMessageType ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IMAutoMessageInfo, _extends({
     autoMessagesI18N: autoMessagesI18N,
     autoMessagesTitleI18N: autoMessagesTitleI18N,
     autoMessageType: autoMessageType
-  }, imAutoMessageInfoProps))) : null);
+  }, imAutoMessageInfoProps))) : null, time ? /*#__PURE__*/React.createElement(React.Fragment, null, autoMessageType ? /*#__PURE__*/React.createElement("div", {
+    className: dotClass
+  }, "\u22C5") : null, /*#__PURE__*/React.createElement("div", {
+    className: newStyle.dateTime,
+    "data-title": timeTooltip
+  }, time)) : null) : null);
 }
 IMMessageMeta.propTypes = imMessageMetaPropTypes;
 IMMessageMeta.defaultProps = imMessageMetaDefaultProps;

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

@@ -37,5 +37,5 @@
   /* display: flex; */
   max-width: var(--zd_size100) ;
   composes: dotted from "../../css/common.module.css";
-  color: var(--imlib_chat_components_imMessageMeta_timeColor);
+  color: var(--imlib_chat_components_imMessageMeta_time_color);
 }

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

@@ -3,8 +3,8 @@ import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyCon
 import { direction as directionConstants } from '@zohoim/chat-components-utils/es/constants/messageConstants';
 const imMessageMetaDefaultProps = {
   customStyle: dummyObject,
+  customProps: dummyObject,
   autoMessageCustomStyle: dummyObject,
-  timeCustomStyle: dummyObject,
   direction: directionConstants.IN
 };
 export default imMessageMetaDefaultProps;

package/es/im/IMPermaLink/css/IMPermaLink.module.css

@@ -1,5 +1,5 @@
 .text {
-  color: var(--imlib_chat_components_imPermaLink_color);
+  color: var(--imlib_chat_components_imPermaLink_url_color);
   display: block;
   composes: dotted from '../../css/common.module.css';
   cursor: pointer;

package/es/im/IMReplyBubble/IMReplyBubble.js

@@ -18,7 +18,8 @@ export default function IMReplyBubble(props) {
     replyText,
     messageDetails,
     customProps,
-    onClick: propOnClick
+    onClick: propOnClick,
+    isFailed
   } = props;
   const {
     replyBubbleProps = dummyObject
@@ -26,8 +27,9 @@ export default function IMReplyBubble(props) {
   const {
     message,
     senderName,
-    time,
+    dateTimeDetails,
     attachmentDetails,
+    locationUrl,
     onClick
   } = useIMReplyBubble({
     messageDetails,
@@ -35,12 +37,15 @@ export default function IMReplyBubble(props) {
   });
   return /*#__PURE__*/React.createElement(ReplyBubble, _extends({
     attachmentDetails: attachmentDetails,
+    dateTimeDetails: dateTimeDetails,
+    locationUrl: locationUrl,
     message: message,
     onClick: onClick,
     replyText: replyText,
-    senderName: senderName,
-    time: time
-  }, replyBubbleProps));
+    senderName: senderName
+  }, replyBubbleProps, {
+    isFailed: isFailed
+  }));
 }
 IMReplyBubble.propTypes = imReplyBubblePropTypes;
 IMReplyBubble.defaultProps = imReplyBubbleDefaultProps;

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

@@ -13,12 +13,17 @@ const imReplyBubblePropTypes = {
       type: PropTypes.string,
       url: PropTypes.string
     }),
-    createdTime: PropTypes.string
+    dateTimeDetails: PropTypes.shape({
+      displayDateTime: PropTypes.string,
+      tooltip: PropTypes.string
+    }),
+    locationUrl: PropTypes.string
   }).isRequired,
   onClick: PropTypes.func.isRequired,
   replyText: PropTypes.string.isRequired,
   customProps: PropTypes.shape({
     replyBubbleProps: PropTypes.object
-  })
+  }),
+  isFailed: PropTypes.bool
 };
 export default imReplyBubblePropTypes;