@zohoim/chat-components 0.0.13 → 0.0.14

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 { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 /** ** Methods *** */
-import getIsShowBubble from '@zohoim/chat-components-utils/es/imUtils/getIsShowBubble';
-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 style from './css/IMMessageContent.module.css';
 /** ** Components *** */
+
 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 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,62 +57,57 @@ export default function IMMessageContent(props) {
     isShowAudioBubble,
     isShowAttachmentBubble,
     isShowLocationBubble,
-    isShowArticleBubble,
-    isShowTextBubble
-  } = getIsShowBubble({
+    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("div", {
-    className: style.messageContentRow
-  }, /*#__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("div", {
-    className: style.messageContentRow
-  }, /*#__PURE__*/React.createElement(IMImageBubble, {
-    attachmentDetails: attachmentDetails
-  })) : null, isShowVideoBubble ? /*#__PURE__*/React.createElement("div", {
-    className: style.messageContentRow
-  }, /*#__PURE__*/React.createElement(IMVideoBubble, {
-    attachmentDetails: attachmentDetails
-  })) : null, isShowAudioBubble ? /*#__PURE__*/React.createElement("div", {
-    className: style.messageContentRow
-  }, /*#__PURE__*/React.createElement(IMAudioBubble, {
-    attachmentDetails: attachmentDetails
-  })) : null, isShowAttachmentBubble ? /*#__PURE__*/React.createElement("div", {
-    className: style.messageContentRow
-  }, /*#__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("div", {
-    className: style.messageContentRow
-  }, /*#__PURE__*/React.createElement(IMLocationBubble, {
-    locationDetails: locationDetails
-  })) : null, isShowArticleBubble ? /*#__PURE__*/React.createElement("div", {
-    className: style.messageContentRow
-  }, /*#__PURE__*/React.createElement(IMArticleBubble, {
-    articleDetails: articleDetails,
-    articleShareI18N: articleShareText
-  })) : null, isShowTextBubble ? /*#__PURE__*/React.createElement("div", {
-    className: style.messageContentRow
-  }, /*#__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;

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

@@ -1,3 +1,3 @@
 .messageContentRow + .messageContentRow{
-    margin-top: 5px;
+  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,58 +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 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 } from '@zohodesk/components/es/Layout';
-import IMDateTime from '../IMDateTime/IMDateTime';
 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, {
-    autoMessageType: autoMessageType,
+  }, "\u22C5"), /*#__PURE__*/React.createElement(IMAutoMessageInfo, _extends({
     autoMessagesI18N: autoMessagesI18N,
     autoMessagesTitleI18N: autoMessagesTitleI18N,
-    customStyle: autoMessageCustomStyle
-  }));
+    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;

package/es/im/IMReplyBubble/IMReplyBubble.js

@@ -1,85 +1,46 @@
-/* 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 useIMReplyBubble from '@zohoim/chat-components-hooks/es/im/IMReplyBubble/useIMReplyBubble';
 /** ** Constants *** */
+
 import imReplyBubbleDefaultProps from './props/defaultProps';
 import imReplyBubblePropTypes from './props/propTypes';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+/** ** Components *** */
 
-/** ** Methods *** */
-import cssJSLogic from './css/cssJSLogic';
-
-/** ** Styles *** */
-import style from './css/IMReplyBubble.module.css';
 import ReplyBubble from '../../ReplyBubble/ReplyBubble';
-import useIMReplyBubble from '@zohoim/chat-components-hooks/es/im/IMReplyBubble/useIMReplyBubble';
-import IMAttachmentIcon from '../IMAttachmentIcon/IMAttachmentIcon';
 export default function IMReplyBubble(props) {
   const {
-    customStyle,
-    headerCustomStyle,
-    timeCustomStyle,
-    contentCustomStyle,
     replyText,
-    messageDetails
+    messageDetails,
+    customProps,
+    onClick: propOnClick
   } = props;
-
-  /* External customization */
-  const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
   const {
-    imReplyBubbleClass
-  } = cssJSLogic(props, newStyle);
+    replyBubbleProps = dummyObject
+  } = customProps;
   const {
-    fileFormat,
     message,
     senderName,
     time,
-    isShowImage,
-    fileName,
-    attachmentURL
+    attachmentDetails,
+    onClick
   } = useIMReplyBubble({
-    messageDetails
+    messageDetails,
+    onClick: propOnClick
   });
-  function renderMessage() {
-    return /*#__PURE__*/React.createElement("span", {
-      dangerouslySetInnerHTML: {
-        __html: message
-      }
-    });
-  }
-  function renderIcon() {
-    // eslint-disable-next-line no-nested-ternary
-    return isShowImage ? /*#__PURE__*/React.createElement("div", {
-      className: newStyle.imageWrapper
-    }, /*#__PURE__*/React.createElement("img", {
-      alt: fileName,
-      className: newStyle.image,
-      src: attachmentURL
-    })) : fileFormat ? /*#__PURE__*/React.createElement(IMAttachmentIcon, {
-      customStyle: {
-        $icon: newStyle.attachmentIcon
-      },
-      fileFormat: fileFormat
-    }) : null;
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    className: imReplyBubbleClass
-  }, /*#__PURE__*/React.createElement(ReplyBubble, {
-    contentCustomStyle: contentCustomStyle,
-    headerCustomStyle: headerCustomStyle,
-    renderIcon: renderIcon,
-    renderMessage: renderMessage,
+  return /*#__PURE__*/React.createElement(ReplyBubble, _extends({
+    attachmentDetails: attachmentDetails,
+    message: message,
+    onClick: onClick,
     replyText: replyText,
     senderName: senderName,
-    time: time,
-    timeCustomStyle: timeCustomStyle
-  }));
+    time: time
+  }, replyBubbleProps));
 }
 IMReplyBubble.propTypes = imReplyBubblePropTypes;
 IMReplyBubble.defaultProps = imReplyBubbleDefaultProps;

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

@@ -1,9 +1,7 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const imReplyBubbleDefaultProps = {
   customStyle: dummyObject,
-  headerCustomStyle: dummyObject,
-  timeCustomStyle: dummyObject,
-  contentCustomStyle: dummyObject
+  customProps: dummyObject
 };
 export default imReplyBubbleDefaultProps;

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

@@ -1,22 +1,24 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const imReplyBubblePropTypes = {
-  customStyle: PropTypes.object,
-  headerCustomStyle: PropTypes.object,
-  timeCustomStyle: PropTypes.object,
-  contentCustomStyle: PropTypes.object,
   messageDetails: PropTypes.shape({
-    displayMessage: PropTypes.string,
-    attachment: PropTypes.shape({
-      type: PropTypes.string
-    }),
-    createdTime: PropTypes.string,
     actor: PropTypes.shape({
-      name: PropTypes.string,
       contactName: PropTypes.string,
-      externalId: PropTypes.string
-    })
-  }),
-  replyText: PropTypes.string
+      externalId: PropTypes.string,
+      name: PropTypes.string
+    }).isRequired,
+    displayMessage: PropTypes.string.isRequired,
+    attachment: PropTypes.shape({
+      name: PropTypes.string,
+      type: PropTypes.string,
+      url: PropTypes.string
+    }),
+    createdTime: PropTypes.string
+  }).isRequired,
+  onClick: PropTypes.func.isRequired,
+  replyText: PropTypes.string.isRequired,
+  customProps: PropTypes.shape({
+    replyBubbleProps: PropTypes.object
+  })
 };
 export default imReplyBubblePropTypes;