@zohoim/chat-components 0.0.6 → 0.0.8

package/es/IMMessage/props/propTypes.js

@@ -2,10 +2,8 @@
 import PropTypes from 'prop-types';
 
 /** ** Constants *** */
-import integrationConstants from '@zohoim/chat-components-utils/es/constants/integrationConstants';
 import { defaultMessageActions } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
 import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
-import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
 import sizes from '@zohoim/chat-components-utils/es/constants/sizes';
 const {
   REPLY,
@@ -16,15 +14,6 @@ const {
   DELETE,
   FORWARD
 } = defaultMessageActions;
-const {
-  WHATSAPP,
-  TELEGRAM,
-  INSTAGRAM,
-  ASAP,
-  WECHAT,
-  TWILLIO,
-  LINE
-} = integrationConstants;
 const {
   SENT,
   SAVED,
@@ -35,64 +24,122 @@ const {
   FAILED,
   OUTGOING
 } = messageStatusConstants;
-const {
-  IN,
-  OUT
-} = direction;
 const imMessagePropTypes = {
-  customStyle: PropTypes.object,
-  direction: PropTypes.oneOf([IN, OUT]),
-  isActive: PropTypes.bool,
+  messageDetails: PropTypes.shape({
+    direction: PropTypes.string,
+    actor: PropTypes.shape({
+      type: PropTypes.string,
+      photoURL: PropTypes.string,
+      name: PropTypes.string,
+      contactName: PropTypes.string,
+      externalId: PropTypes.string
+    }),
+    status: PropTypes.string,
+    meta: PropTypes.shape({
+      SYSTEM_MESSAGE_TYPE: PropTypes.string,
+      DESK_KB_ARTICLE_TRANSLATION_ID: PropTypes.string,
+      DESK_TICKET_NUMBER: PropTypes.string,
+      DESK_TICKET_ID: 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
+  }),
+  sessionDetails: PropTypes.shape({
+    integrationService: PropTypes.string
+  }),
+  defaultAgentAvatar: PropTypes.string,
+  autoMessageAvatar: PropTypes.string,
+  defaultContactAvatar: PropTypes.string,
+  highlightMessageId: PropTypes.string,
+  isSameSender: PropTypes.bool,
+  isSingleMessage: 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
+    })
+  }),
+  canReply: PropTypes.bool.isRequired,
+  messageBubbleCustomStyle: PropTypes.object,
   needMessageActions: PropTypes.bool,
-  renderMessageBoxFooter: PropTypes.func,
-  /* Avatar Related Props Start */
   needSender: PropTypes.bool,
-  isShowSender: PropTypes.bool,
-  senderSrc: PropTypes.string,
-  senderAlternateSrc: PropTypes.string,
-  senderTitle: PropTypes.string,
   senderAvatarSize: PropTypes.oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
-  senderName: PropTypes.string,
   avatarCustomStyle: PropTypes.object,
-  senderIntegrationIcon: PropTypes.oneOf([WHATSAPP, TELEGRAM, INSTAGRAM, ASAP, WECHAT, TWILLIO, LINE]),
   senderIntegrationIconSize: PropTypes.oneOf([sizes.SMALL, sizes.MEDIUM]),
   senderIntegrationIconCustomStyle: PropTypes.object,
   isCustomIntegrationIcon: PropTypes.bool,
   isCustomSenderAvatar: PropTypes.bool,
   renderCustomIntegrationIcon: PropTypes.func,
   renderCustomSenderAvatar: PropTypes.func,
-  /*Avatar Related Props  End*/
-
-  /* MessageBox Props Start */
   needMessageBox: PropTypes.bool,
   renderMessage: PropTypes.func.isRequired,
   renderMessageFooter: PropTypes.func,
   renderMessageHeader: PropTypes.func,
   messageBoxCustomStyle: PropTypes.object,
-  isFailedMessage: PropTypes.bool,
-  /*MessageBox Props End */
-
-  /* MessageAction Props Start */
-  messageActions: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([REPLY, COPY, DOWNLOAD, CREATE_TICKET, RESEND, DELETE, FORWARD])]).isRequired,
-    displayText: PropTypes.string,
-    renderFunction: PropTypes.func,
-    iconTitle: PropTypes.string
-  })),
   renderSecondaryActions: PropTypes.func,
   actionsDefaultShowCount: PropTypes.number,
   actionIconCustomStyle: PropTypes.object,
   moreActionItemCustomStyle: PropTypes.object,
-  onSelectAction: PropTypes.func,
   messageActionCustomStyle: PropTypes.object,
   moreActionPopupCustomStyle: PropTypes.object,
-  /* MessageAction Props End */
-
-  /* MessageStatus Props Start */
-  messageStatus: PropTypes.oneOf([SENT, SAVED, QUEUED, DELIVERED, READ, UNSENT, FAILED, OUTGOING]),
-  messageStatusCustomStyle: PropTypes.object,
-  statusTitle: PropTypes.string
-  /*MessageStatus Props End */
+  messageStatusCustomStyle: PropTypes.object
 };
-
 export default imMessagePropTypes;

package/es/IMMessageActions/IMMessageActions.js

@@ -25,7 +25,7 @@ import ConvertTicket from '../icons/iconSrc/actions/ConvertTicket';
 import useIMMessageActions from '@zohoim/chat-components-hooks/es/IMMessageActions/useIMMessageActions';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/renderHandler';
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 import cssJSLogic from './css/cssJSLogic';
 
@@ -77,10 +77,12 @@ export default function IMMessageActions(props) {
   } = actionDetails;
   function handleClickAction(_ref) {
     let {
-      id
+      id,
+      e
     } = _ref;
     onSelect && onSelect({
-      id
+      id,
+      e
     });
   }
   function renderIcon(_ref2) {
@@ -105,7 +107,8 @@ export default function IMMessageActions(props) {
     let {
       id,
       isShowInMore,
-      action
+      action,
+      closePopup
     } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       displayText,
@@ -121,7 +124,8 @@ export default function IMMessageActions(props) {
       isShowInMore: isShowInMore,
       iconTitle: iconTitle,
       actionIconCustomStyle: actionIconCustomStyle,
-      moreItemCustomStyle: moreItemCustomStyle
+      moreItemCustomStyle: moreItemCustomStyle,
+      closePopup: closePopup
     });
   }
   function renderMoreIcon() {

package/es/IMMessageActions/css/IMMessageActions.module.css

@@ -1,5 +1,5 @@
 .varClass {
-  --imMessageActions-secondaryActions_margin: var(--imlib_size_5);
+  /* --imMessageActions-secondaryActions_margin: var(--imlib_size_5); */
   --imMessageActions-action_icon_size: var(--imlib_size_15);
 }
 
@@ -13,7 +13,7 @@
 
 .secondaryActions {
   composes: varClass;
-  margin-top: var(--imMessageActions-secondaryActions_margin);
+  /* margin-top: var(--imMessageActions-secondaryActions_margin); */
 }
 
 .icon {

package/es/IMMessageAvatar/props/defaultProps.js

@@ -4,7 +4,9 @@ const imMessageActionsDefaultProps = {
   customStyle: dummyObject,
   iconCustomStyle: dummyObject,
   isCustomIcon: false,
-  title: 'RAVI KUMAR',
-  name: 'RAVI KUMAR'
+  title: '',
+  //'RAVI KUMAR',
+  name: '' //'RAVI KUMAR',
 };
+
 export default imMessageActionsDefaultProps;

package/es/IMMessageContent/IMMessageContent.js

@@ -0,0 +1,84 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Hooks *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+
+/** ** Constants *** */
+import imMessageContentDefaultProps from './props/defaultProps';
+import imMessageContentPropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/IMMessageContent.module.css';
+import useIMMessageContent from '@zohoim/chat-components-hooks/es/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';
+export default function IMMessageContent(props) {
+  const {
+    customStyle,
+    messageDetails,
+    seeMoreText
+  } = props;
+  const {
+    isShowLayoutBubble,
+    isShowReplyBubble,
+    isShowImageBubble,
+    isShowVideoBubble,
+    isShowAudioBubble,
+    isShowAttachmentBubble,
+    isShowLocationBubble,
+    isShowArticleBubble,
+    isShowTextBubble
+  } = useIMMessageContent({
+    messageDetails
+  });
+
+  /* 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
+  } = messageDetails || {};
+  return /*#__PURE__*/React.createElement("div", {
+    className: imMessageContentClass
+  }, isShowLayoutBubble ? null : null, isShowReplyBubble ? /*#__PURE__*/React.createElement(IMReplyBubble, {
+    messageDetails: messageDetails
+  }) : 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, {
+    attachmentDetails: attachmentDetails
+  }) : null, isShowLocationBubble ? /*#__PURE__*/React.createElement(IMLocationBubble, {
+    locationDetails: locationDetails
+  }) : null, isShowArticleBubble ? /*#__PURE__*/React.createElement(IMArticleBubble, {
+    articleDetails: articleDetails
+  }) : null, isShowTextBubble ? /*#__PURE__*/React.createElement(IMTextBubble, {
+    messageDetails: messageDetails,
+    moreText: seeMoreText
+  }) : null);
+}
+IMMessageContent.propTypes = imMessageContentPropTypes;
+IMMessageContent.defaultProps = imMessageContentDefaultProps;
+IMMessageContent.displayName = 'IMMessageContent';

package/es/IMMessageContent/css/cssJSLogic.js

@@ -0,0 +1,10 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const imMessageContentClass = compileClassNames({
+    [style.imMessageContent]: true
+  });
+  return {
+    imMessageContentClass
+  };
+}

package/es/IMMessageContent/index.js

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

package/es/IMMessageContent/props/defaultProps.js

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

package/es/IMMessageContent/props/propTypes.js

@@ -0,0 +1,35 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const imMessageContentPropTypes = {
+  customStyle: PropTypes.object,
+  messageDetails: PropTypes.shape({
+    direction: PropTypes.string,
+    actor: PropTypes.shape({
+      type: PropTypes.string,
+      photoURL: PropTypes.string,
+      name: PropTypes.string,
+      contactName: PropTypes.string,
+      externalId: PropTypes.string
+    }),
+    status: PropTypes.string,
+    meta: PropTypes.shape({
+      SYSTEM_MESSAGE_TYPE: PropTypes.string,
+      DESK_KB_ARTICLE_TRANSLATION_ID: PropTypes.string,
+      DESK_TICKET_NUMBER: PropTypes.string,
+      DESK_TICKET_ID: 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,
+    id: PropTypes.string
+  }),
+  moreText: PropTypes.string
+};
+export default imMessageContentPropTypes;

package/es/IMMessageMeta/IMMessageMeta.js

@@ -0,0 +1,60 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Hooks *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+
+/** ** Constants *** */
+import imMessageMetaDefaultProps from './props/defaultProps';
+import imMessageMetaPropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/IMMessageMeta.module.css';
+
+/** ** Components *** */
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import IMDateTime from '../IMDateTime/IMDateTime';
+import IMAutoMessageInfo from '../IMAutoMessageInfo/IMAutoMessageInfo';
+export default function IMMessageMeta(props) {
+  const {
+    customStyle,
+    autoMessageCustomStyle,
+    timeCustomStyle,
+    time,
+    autoMessageType,
+    autoMessagesI18N,
+    autoMessagesTitleI18N
+  } = props;
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    imMessageMetaClass,
+    dotClass
+  } = cssJSLogic(props, newStyle);
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    className: imMessageMetaClass
+  }, /*#__PURE__*/React.createElement(IMDateTime, {
+    customStyle: timeCustomStyle,
+    value: time
+  }), /*#__PURE__*/React.createElement("div", {
+    className: dotClass
+  }, "\u22C5"), /*#__PURE__*/React.createElement(IMAutoMessageInfo, {
+    customStyle: autoMessageCustomStyle,
+    autoMessageType: autoMessageType,
+    autoMessagesI18N: autoMessagesI18N,
+    autoMessagesTitleI18N: autoMessagesTitleI18N
+  }));
+}
+IMMessageMeta.propTypes = imMessageMetaPropTypes;
+IMMessageMeta.defaultProps = imMessageMetaDefaultProps;
+IMMessageMeta.displayName = 'IMMessageMeta';

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

@@ -0,0 +1,32 @@
+.varClass {
+  --imMessageMeta-gap: var(--imlib_size_5);
+  --imMessageMeta-separator_gap: var(--imlib_size_5);
+  --imMessageMeta-time_padding: var(--imlib_size_45);
+}
+
+.imMessageMeta {
+  max-width: 100%;
+  align-items: center;
+  margin-top: var(--imMessageMeta-gap);
+}
+
+.dot {
+  composes: varClass;
+  margin: 0 var(--imMessageMeta-separator_gap);
+}
+
+[dir=ltr] .leftTime {
+  padding-left: var(--imMessageMeta-time_padding);
+}
+
+[dir=rtl] .leftTime {
+  padding-right: var(--imMessageMeta-time_padding);
+}
+
+[dir=ltr] .rightTime {
+  padding-right: var(--imMessageMeta-time_padding);
+}
+
+[dir=rtl] .rightTime {
+  padding-left: var(--imMessageMeta-time_padding);
+}

package/es/IMMessageMeta/css/cssJSLogic.js

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

package/es/IMMessageMeta/index.js

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

package/es/IMMessageMeta/props/defaultProps.js

@@ -0,0 +1,10 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { direction as directionConstants } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+const imMessageMetaDefaultProps = {
+  customStyle: dummyObject,
+  autoMessageCustomStyle: dummyObject,
+  timeCustomStyle: dummyObject,
+  direction: directionConstants.IN
+};
+export default imMessageMetaDefaultProps;

package/es/IMMessageMeta/props/propTypes.js

@@ -0,0 +1,30 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+import { autoMessageTypes, direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+const {
+  WELCOMEMSG,
+  WORKFLOW_MESSAGE,
+  WORKFLOW_NOTIFICATION,
+  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]),
+  autoMessagesI18N: PropTypes.shape({
+    [WELCOMEMSG]: PropTypes.string,
+    [WORKFLOW_MESSAGE]: PropTypes.string,
+    [WORKFLOW_NOTIFICATION]: PropTypes.string,
+    [UN_SUPPORTED_FILE]: PropTypes.string
+  }),
+  autoMessagesTitleI18N: PropTypes.shape({
+    [WELCOMEMSG]: PropTypes.string,
+    [WORKFLOW_MESSAGE]: PropTypes.string,
+    [WORKFLOW_NOTIFICATION]: PropTypes.string,
+    [UN_SUPPORTED_FILE]: PropTypes.string
+  })
+};
+export default imMessageMetaPropTypes;

package/es/IMMessageStatus/css/IMMessageStatus.module.css

@@ -1,12 +1,15 @@
 .messageStatus {
   /*USe this class name status customization*/
-  color: #61667a;
+  /* color: #61667a; */
+  color: var(--imlib_chat_components_messageStatus_send_color);
 }
 
 .readStatus{
-  color: #0a73eb;
+  /* color: #0a73eb; */
+  color: var(--imlib_chat_components_messageStatus_read_color);
 }
 
 .failedStatus{
-  color: #de3535
+  /* color: #de3535 */
+  color: var(--imlib_chat_components_messageStatus_failed_color);
 }

package/es/IMReplyBubble/IMReplyBubble.js

@@ -0,0 +1,37 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Hooks *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+
+/** ** Constants *** */
+import imReplyBubbleDefaultProps from './props/defaultProps';
+import imReplyBubblePropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/IMReplyBubble.module.css';
+export default function IMReplyBubble(props) {
+  const {
+    customStyle
+  } = props;
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    imReplyBubbleClass
+  } = cssJSLogic(props, newStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    className: imReplyBubbleClass
+  }, "Working On this...");
+}
+IMReplyBubble.propTypes = imReplyBubblePropTypes;
+IMReplyBubble.defaultProps = imReplyBubbleDefaultProps;
+IMReplyBubble.displayName = 'IMReplyBubble';

package/es/IMReplyBubble/css/cssJSLogic.js

@@ -0,0 +1,10 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const imReplyBubbleClass = compileClassNames({
+    [style.imReplyBubble]: true
+  });
+  return {
+    imReplyBubbleClass
+  };
+}

package/es/IMReplyBubble/index.js

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

package/es/IMReplyBubble/props/defaultProps.js

@@ -0,0 +1,6 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const imReplyBubbleDefaultProps = {
+  customStyle: dummyObject
+};
+export default imReplyBubbleDefaultProps;

package/es/IMReplyBubble/props/propTypes.js

@@ -0,0 +1,6 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const imReplyBubblePropTypes = {
+  customStyle: PropTypes.object
+};
+export default imReplyBubblePropTypes;