@zohoim/chat-components 0.0.11 → 0.0.14

package/es/MessageActionsWrapper/MessageActionsWrapper.js

@@ -0,0 +1,67 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** ** Libraries *** */
+import React, { useCallback } from 'react';
+/** ** Components *** */
+
+import { Container } from '@zohodesk/components/lib/Layout';
+import MessageActionsMore from '../MessageActionsMore/MessageActionsMore';
+/** ** Hooks *** */
+
+import useMessageActionsWrapper from '@zohoim/chat-components-hooks/es/MessageActionsWrapper/useMessageActionsWrapper';
+/** ** Constants *** */
+
+import messageActionsWrapperDefaultProps from './props/defaultProps';
+import messageActionsWrapperPropTypes from './props/propTypes';
+import { dummyArray, dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+/** ** Methods *** */
+
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Style *** */
+
+import style from './css/MessageActionsWrapper.module.css';
+export default function MessageActionsWrapper(props) {
+  const {
+    actions,
+    renderMoreIcon,
+    defaultShowCount,
+    customStyle,
+    customProps
+  } = props;
+  const {
+    messageActionsMoreProps = dummyObject
+  } = customProps;
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const {
+    isShowMore: isShowMoreIcon,
+    actions: defaultActions = dummyArray,
+    moreActions = dummyArray
+  } = useMessageActionsWrapper(actions, defaultShowCount);
+  const renderDefaultActions = useCallback(() => defaultActions.map(action => {
+    const {
+      id,
+      renderFunction
+    } = action;
+    return renderHandler(renderFunction)({
+      id,
+      isShowInMore: false,
+      action
+    }); // id, isRenderInMorePopup
+  }), [defaultActions]);
+  const renderMoreActions = useCallback(() => /*#__PURE__*/React.createElement(MessageActionsMore, _extends({
+    actions: moreActions,
+    renderMoreIcon: renderMoreIcon
+  }, messageActionsMoreProps)), [moreActions, renderMoreIcon, messageActionsMoreProps]);
+  const renderRow = useCallback(() => /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row"
+  }, renderDefaultActions(), isShowMoreIcon ? renderMoreActions() : null), [renderDefaultActions, renderMoreActions, isShowMoreIcon]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: newStyle.messageActionsWrapper
+  }, renderRow(defaultActions, isShowMoreIcon));
+}
+MessageActionsWrapper.defaultProps = messageActionsWrapperDefaultProps;
+MessageActionsWrapper.propTypes = messageActionsWrapperPropTypes;
+MessageActionsWrapper.displayName = 'MessageActionsWrapper';

package/es/MessageActionsWrapper/css/MessageActionsWrapper.module.css

@@ -0,0 +1,3 @@
+.messageActionsWrapper {
+  /* Use this class for message actions customization */
+}

package/es/MessageActionsWrapper/index.js

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

package/es/MessageActionsWrapper/props/defaultProps.js

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

package/es/MessageActionsWrapper/props/propTypes.js

@@ -0,0 +1,15 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const messageActionsWrapperPropTypes = {
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    renderFunction: PropTypes.func
+  })).isRequired,
+  customProps: PropTypes.shape({
+    messageActionsMoreProps: PropTypes.object
+  }),
+  customStyle: PropTypes.object,
+  defaultShowCount: PropTypes.number,
+  renderMoreIcon: PropTypes.func
+};
+export default messageActionsWrapperPropTypes;

package/es/MessageAvatar/MessageAvatar.js

@@ -1,19 +1,19 @@
 /** ** Libraries *** */
 import React from 'react';
-
 /** ** Components *** */
-import Avatar from '@zohodesk/components/es/Avatar/Avatar';
-import { Container, Box } from '@zohodesk/components/es/Layout';
 
+import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 /** ** CSS *** */
+
 import style from './css/MessageAvatar.module.css';
+/** ** Hooks *** */
 
-/** ** Methods *** */
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
-import cssJSLogic from './css/cssJSLogic';
+/** ** Methods *** */
 
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 /** ** Constants *** */
+
 import messageAvatarDefaultProps from './props/defaultProps';
 import messageAvatarPropTypes from './props/propTypes';
 export default function MessageAvatar(props) {
@@ -27,30 +27,23 @@ export default function MessageAvatar(props) {
     iconTitle,
     renderIcon
   } = props;
+  /* External CSS Customization */
 
-  /* external customization */
   const newStyle = useMergeStyle(style, customStyle);
   const icon = renderHandler(renderIcon)();
-
-  /* css classnames added based on logic */
-  const {
-    avatarWrapperClass,
-    iconClass,
-    avatarClass
-  } = cssJSLogic(props, newStyle);
   return /*#__PURE__*/React.createElement("div", {
-    className: avatarWrapperClass
+    className: newStyle.msgAvatar
   }, /*#__PURE__*/React.createElement(Avatar, {
-    src: src,
     alternateSrc: alternateSrc,
-    title: title,
-    size: size,
+    customClass: newStyle.avatar,
     name: name,
-    customClass: avatarClass
-  }), /*#__PURE__*/React.createElement("span", {
-    className: iconClass,
+    size: size,
+    src: src,
+    title: title
+  }), icon ? /*#__PURE__*/React.createElement("span", {
+    className: newStyle.icon,
     "data-title": iconTitle
-  }, icon));
+  }, icon) : null);
 }
 MessageAvatar.defaultProps = messageAvatarDefaultProps;
 MessageAvatar.propTypes = messageAvatarPropTypes;

package/es/MessageAvatar/css/MessageAvatar.module.css

@@ -5,15 +5,15 @@
 
 .icon {
   position: absolute;
-  bottom: calc(-1*var(--imlib_size_6));
+  bottom: calc( var(--zd_size6) * -1 ) ;
 }
 
 [dir=ltr] .icon {
-  right: calc(-1*var(--imlib_size_7));
+  right: calc( var(--zd_size7) * -1 ) ;
 }
 
 [dir=rtl] .icon {
-  left: calc(-1*var(--imlib_size_7));
+  left: calc( var(--zd_size7) * -1 ) ;
 }
 
 .avatar {

package/es/MessageAvatar/props/defaultProps.js

@@ -1,11 +1,7 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const messageAvatarDefaultProps = {
   customStyle: dummyObject,
-  name: '',
-  //'RAVI KUMAR',
-  size: 'small',
-  iconTitle: '' //'RAVI KUMAR',
+  size: 'medium'
 };
-
 export default messageAvatarDefaultProps;

package/es/MessageAvatar/props/propTypes.js

@@ -1,13 +1,13 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const messageAvatarPropTypes = {
-  src: PropTypes.string,
+  src: PropTypes.string.isRequired,
   alternateSrc: PropTypes.string,
-  title: PropTypes.string,
-  size: PropTypes.string,
-  name: PropTypes.string,
+  customStyle: PropTypes.object,
   iconTitle: PropTypes.string,
+  name: PropTypes.string,
   renderIcon: PropTypes.func,
-  customStyle: PropTypes.object
+  size: PropTypes.oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
+  title: PropTypes.string
 };
 export default messageAvatarPropTypes;

package/es/MessageBox/MessageBox.js

@@ -1,44 +1,44 @@
-/* eslint-disable max-len */
-
 /** ** Libraries *** */
 import React from 'react';
-
 /** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
+
 import messageBoxDefaultProps from './props/defaultProps';
 import messageBoxPropTypes from './props/propTypes';
-
 /** ** Methods *** */
+
 import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
-
 /** ** Styles *** */
+
 import style from './css/MessageBox.module.css';
-function MessageBox(props) {
+export default function MessageBox(props) {
   const {
     renderMessage: renderMessageContent,
     renderMessageFooter,
     renderMessageHeader,
     customStyle,
-    renderMessageStatus
+    renderMessageStatus,
+    isFailed,
+    isIncoming,
+    isOutgoing
   } = props;
+  /* External CSS Customization */
 
-  /* external customization */
   const newStyle = useMergeStyle(style, customStyle);
-
   /* css classnames added based on logic */
-  const {
-    messageBoxClass,
-    messageBoxInner,
-    messageContentWrapperClass,
-    messageHeaderWrapperClass,
-    messageFooterWrapperClass,
-    messageStatusWrapperClass
-  } = cssJSLogic(props, newStyle);
 
+  const {
+    messageBoxClass
+  } = cssJSLogic({
+    isFailed,
+    isIncoming,
+    isOutgoing
+  }, newStyle);
   /* Render Childrens */
+
   const messageHeader = renderHandler(renderMessageHeader)();
   const messageConent = renderHandler(renderMessageContent)();
   const messageFooter = renderHandler(renderMessageFooter)();
@@ -46,18 +46,17 @@ function MessageBox(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: messageBoxClass
   }, /*#__PURE__*/React.createElement("div", {
-    className: messageBoxInner
+    className: newStyle.messageBoxInner
   }, messageHeader ? /*#__PURE__*/React.createElement("div", {
-    className: messageHeaderWrapperClass
+    className: newStyle.messageHeaderWrapper
   }, messageHeader) : null, messageConent ? /*#__PURE__*/React.createElement("div", {
-    className: messageContentWrapperClass
+    className: newStyle.messageContentWrapper
   }, messageConent) : null, messageFooter ? /*#__PURE__*/React.createElement("div", {
-    className: messageFooterWrapperClass
+    className: newStyle.messageFooterWrapper
   }, messageFooter) : null), messageStatus ? /*#__PURE__*/React.createElement("div", {
-    className: messageStatusWrapperClass
+    className: newStyle.messageStatusWrapper
   }, messageStatus) : null);
 }
 MessageBox.propTypes = messageBoxPropTypes;
 MessageBox.defaultProps = messageBoxDefaultProps;
-MessageBox.displayName = 'MessageBox';
-export default MessageBox;
+MessageBox.displayName = 'MessageBox';

package/es/MessageBox/css/MessageBox.module.css

@@ -1,16 +1,15 @@
 .varClass {
-  --messageBox-content_padding: var(--imlib_size_14);
-  --messageBox-content_size: var(--imlib_size_14);
-  --messageBox-border_radius: var(--imlib_size_9);
-  --messageBox-message_status_gap: var(--imlib_size_12);
-  --messageBox-message_header_gap: var(--imlib_size_1);
-  --messageBox-message_footer_gap: var(--imlib_size_1);
-  /* --messageBox-max_width: var(--imlib_size_410); */
+  --messageBox-content_padding: var(--zd_size14);
+  --messageBox-content_size: var(--zd_font_size14);
+  --messageBox-border_radius: 9px;
+  --messageBox-message_status_gap: var(--zd_size12);
+  --messageBox-message_header_gap: var(--zd_size1);
+  --messageBox-message_footer_gap: var(--zd_size1);
+  /* --messageBox-max_width: 410px; */
 }
 
 .messageBoxContainer {
   composes: varClass;
-
   display: grid;
   /* flex-direction: row; */
   grid-template-columns: 1fr auto;
@@ -19,20 +18,19 @@
   /* max-width: var(--messageBox-max_width); */
   word-wrap: break-word;
   font-size: var(--messageBox-content_size);
-
   background-color: var(--imlib_chat_components_messageBox_bg_color);
   padding: var(--messageBox-content_padding);
   border-radius: var(--messageBox-border_radius);
 }
 
-.messageBoxInner{
-  flex:1;
-  min-width: 0;
-  min-height: 0;
+.messageBoxInner {
+  flex: 1 ;
+  min-width: 0 ;
+  min-height: 0 ;
 }
 
 .messageContentWrapper {
-  /*Use this class for message content customization*/
+  /* Use this class for message content customization */
   line-height: 150%;
 }
 

package/es/MessageBox/css/cssJSLogic.js

@@ -12,27 +12,7 @@ export default function cssJSLogic(props, style) {
     [style.incomingMessageBox]: isIncoming && !isFailed,
     [style.outgoingMessageBox]: isOutgoing && !isFailed
   });
-  const messageBoxInner = compileClassNames({
-    [style.messageBoxInner]: true
-  });
-  const messageContentWrapperClass = compileClassNames({
-    [style.messageContentWrapper]: true
-  });
-  const messageHeaderWrapperClass = compileClassNames({
-    [style.messageHeaderWrapper]: true
-  });
-  const messageFooterWrapperClass = compileClassNames({
-    [style.messageFooterWrapper]: true
-  });
-  const messageStatusWrapperClass = compileClassNames({
-    [style.messageStatusWrapper]: true
-  });
   return {
-    messageBoxClass,
-    messageBoxInner,
-    messageContentWrapperClass,
-    messageHeaderWrapperClass,
-    messageFooterWrapperClass,
-    messageStatusWrapperClass
+    messageBoxClass
   };
 }

package/es/MessageBox/props/defaultProps.js

@@ -1,8 +1,6 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 export default {
   customStyle: dummyObject,
-  isFailed: false,
-  isIncoming: false,
   isOutgoing: true
 };

package/es/MessageBox/props/propTypes.js

@@ -1,12 +1,13 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
-export default {
-  renderMessageFooter: PropTypes.func,
-  renderMessageHeader: PropTypes.func,
-  renderMessageStatus: PropTypes.func,
+const messageBoxPropTypes = {
+  isIncoming: PropTypes.bool.isRequired,
+  isOutgoing: PropTypes.bool.isRequired,
   renderMessage: PropTypes.func.isRequired,
   customStyle: PropTypes.object,
   isFailed: PropTypes.bool,
-  isIncoming: PropTypes.bool,
-  isOutgoing: PropTypes.bool
-};
+  renderMessageFooter: PropTypes.func,
+  renderMessageHeader: PropTypes.func,
+  renderMessageStatus: PropTypes.func
+};
+export default messageBoxPropTypes;

package/es/MessageBubble/MessageBubble.js

@@ -1,23 +1,19 @@
-/* eslint-disable max-len */
-/* eslint-disable sort-imports */
-
 /** ** Libraries *** */
-import React from 'react';
-
+import React, { useCallback } from 'react';
 /** ** Hooks *** */
-import { useMessageBubbleAction } from '@zohoim/chat-components-hooks/es/MessageBubble';
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useMessageBubbleAction from '@zohoim/chat-components-hooks/es/MessageBubble/useMessageBubbleAction';
 /** ** Constants *** */
+
 import messageBubbleDefaultProps from './props/defaultProps';
 import messageBubblePropTypes from './props/propTypes';
-import constantProps from './props/propConstants';
-
 /** ** Methods *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+
 import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
-
 /** ** Styles *** */
+
 import style from './css/MessageBubble.module.css';
 export default function MessageBubble(props) {
   const {
@@ -26,53 +22,80 @@ export default function MessageBubble(props) {
     renderMessageOwner,
     renderMessageActions,
     customStyle,
-    needSender
+    needSender,
+    isActive,
+    direction
   } = props;
+  /* External CSS Customization */
 
-  /* external customization */
   const newStyle = useMergeStyle(style, customStyle);
   /* css classnames added based on logic */
-  const {
-    bubbleClass,
-    messageOwnerWrapperClass,
-    messageContainerClass,
-    messageBoxWrapperClass,
-    messageActionWrapperClass,
-    messageBoxFooterWrapperClass
-  } = cssJSLogic(props, newStyle);
 
+  const {
+    bubbleClass
+  } = cssJSLogic({
+    isActive,
+    direction
+  }, newStyle);
   /* Use Hooks */
+
   const {
     onMouseEnter,
     onMouseLeave,
-    isRenderMessageAction
+    isRenderMessageActions
   } = useMessageBubbleAction(props);
-
   /* Render Childrens */
-  const messageActions = isRenderMessageAction ? renderHandler(renderMessageActions)() : null;
-  const messageOwner = renderHandler(renderMessageOwner)();
-  const messageBox = renderHandler(renderMessageBox)();
-  const messageBoxFooter = renderHandler(renderMessageBoxFooter)();
 
+  /* Message Sender Render */
+
+  const messageSenderRenderer = useCallback(() => {
+    const messageOwner = renderHandler(renderMessageOwner)();
+    return needSender ? /*#__PURE__*/React.createElement("div", {
+      className: newStyle.messageOwnerWrapper
+    }, messageOwner) : null;
+  }, [renderMessageOwner, needSender, newStyle.messageOwnerWrapper]);
+  /* Message Actions Render */
+
+  const messageActionsRenderer = useCallback(() => {
+    const messageActions = isRenderMessageActions ? renderHandler(renderMessageActions)() : null;
+    return messageActions ? /*#__PURE__*/React.createElement("div", {
+      className: newStyle.messageActionWrapper
+    }, messageActions) : null;
+  }, [isRenderMessageActions, renderMessageActions, newStyle.messageActionWrapper]);
+  /* Message Box Render */
+
+  const messageBoxRenderer = useCallback(() => {
+    const messageBox = renderHandler(renderMessageBox)();
+    return messageBox ? /*#__PURE__*/React.createElement("div", {
+      className: newStyle.messageBoxWrapper
+    }, messageBox) : null;
+  }, [renderMessageBox, newStyle.messageBoxWrapper]);
+  /* Message BoxWithActions Render */
+
+  const messageBoxWithActionsRenderer = useCallback(() => {
+    const messageBox = messageBoxRenderer();
+    const messageActions = messageActionsRenderer();
+    return messageBox || messageActions ? /*#__PURE__*/React.createElement("div", {
+      className: newStyle.messageContainer
+    }, messageBox, messageActions) : null;
+  }, [messageBoxRenderer, messageActionsRenderer, newStyle.messageContainer]);
+  /* Message Footer Render */
+
+  const messageFooterRenderer = useCallback(() => {
+    const messageBoxFooter = renderHandler(renderMessageBoxFooter)();
+    return messageBoxFooter ? /*#__PURE__*/React.createElement("div", {
+      className: newStyle.messageBoxFooterWrapper
+    }, messageBoxFooter) : null;
+  }, [renderMessageBoxFooter, newStyle.messageBoxFooterWrapper]);
   /* Construct Layout */
+
   const messageLayout = /*#__PURE__*/React.createElement("div", {
     className: bubbleClass,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
-  }, needSender ? /*#__PURE__*/React.createElement("div", {
-    className: messageOwnerWrapperClass
-  }, messageOwner) : null, messageBox || messageActions ? /*#__PURE__*/React.createElement("div", {
-    className: messageContainerClass
-  }, messageBox ? /*#__PURE__*/React.createElement("div", {
-    className: messageBoxWrapperClass
-  }, messageBox) : null, messageActions ? /*#__PURE__*/React.createElement("div", {
-    className: messageActionWrapperClass
-  }, messageActions) : null) : null, messageBoxFooter ? /*#__PURE__*/React.createElement("div", {
-    className: messageBoxFooterWrapperClass
-  }, messageBoxFooter) : null);
+  }, messageSenderRenderer(), messageBoxWithActionsRenderer(), messageFooterRenderer());
   return messageLayout;
 }
 MessageBubble.propTypes = messageBubblePropTypes;
 MessageBubble.defaultProps = messageBubbleDefaultProps;
-MessageBubble.constantProps = constantProps;
 MessageBubble.displayName = 'MessageBubble';

package/es/MessageBubble/css/MessageBubble.module.css

@@ -1,15 +1,15 @@
 .varClass {
-  --messageBubble-bubble_footer_gap: var(--imlib_size_5);
-  --messageBubble-message_owner_gap: var(--imlib_size_13);
-  --messageBubble-message_action_gap: var(--imlib_size_12);
-  --messageBox-max_width: var(--imlib_size_410);
-  --messageBox-footer_fontSize: var(--imlib_size_11);
-  --messageBox-owner_width: var(--imlib_size_34);
+  --messageBubble-bubble_footer_gap: var(--zd_size5);
+  --messageBubble-message_owner_gap: 13px;
+  --messageBubble-message_action_gap: var(--zd_size12);
+  --messageBox-max_width: var(--zd_size410);
+  --messageBox-footer_fontSize: var(--zd_font_size11);
+  --messageBox-owner_width: var(--zd_size34);
 }
 
 .messageBubble {
   composes: varClass;
-  width: 100%;
+  width: 100% ;
   display: grid;
   grid-column-gap: var(--messageBubble-message_owner_gap);
 }
@@ -38,7 +38,9 @@
 .messageBoxFooterWrapper {
   grid-area: messageBoxFooter;
   font-size: var(--messageBox-footer_fontSize);
-  color: var(--imlib_chat_components_messageBubble_messageBox_footer_text_color);
+  color: var(
+    --imlib_chat_components_messageBubble_messageBox_footer_text_color
+  );
   margin-top: var(--messageBubble-bubble_footer_gap);
 }
 
@@ -65,6 +67,7 @@
   grid-template-columns: auto 1fr;
   grid-template-areas: 'messageBox messageAction';
 }
+
 .directionOut .messageContainer {
   grid-template-columns: 1fr auto;
   grid-template-areas: 'messageAction messageBox';

package/es/MessageBubble/css/cssJSLogic.js

@@ -1,42 +1,26 @@
 /** ** Methods *** */
 import { compileClassNames } from '@zohodesk/utils';
-
-/** ** Constants *** */
-import propConstants from '../props/propConstants';
+import getMessageDirectionType from '@zohoim/chat-components-utils/es/getMessageDirectionType';
 export default function cssJSLogic(props, style) {
   const {
     isActive,
     direction
   } = props;
-  const isIncoming = direction === propConstants.direction.IN;
-  const isOutgoing = direction === propConstants.direction.OUT;
+  const {
+    isIncoming,
+    isOutgoing
+  } = getMessageDirectionType({
+    messageDetails: {
+      direction
+    }
+  });
   const bubbleClass = compileClassNames({
     [style.messageBubble]: true,
     [style.directionIn]: isIncoming,
     [style.directionOut]: isOutgoing,
     [style.active]: isActive
   });
-  const messageOwnerWrapperClass = compileClassNames({
-    [style.messageOwnerWrapper]: true
-  });
-  const messageContainerClass = compileClassNames({
-    [style.messageContainer]: true
-  });
-  const messageBoxWrapperClass = compileClassNames({
-    [style.messageBoxWrapper]: true
-  });
-  const messageActionWrapperClass = compileClassNames({
-    [style.messageActionWrapper]: true
-  });
-  const messageBoxFooterWrapperClass = compileClassNames({
-    [style.messageBoxFooterWrapper]: true
-  });
   return {
-    bubbleClass,
-    messageOwnerWrapperClass,
-    messageContainerClass,
-    messageBoxWrapperClass,
-    messageActionWrapperClass,
-    messageBoxFooterWrapperClass
+    bubbleClass
   };
 }

package/es/MessageBubble/props/defaultProps.js

@@ -1,6 +1,6 @@
 /** ** Constants *** */
-import { dummyObject } from "@zohoim/chat-components-utils/es/constants";
-import { direction } from "@zohoim/chat-components-utils/es/constants/messageConstants";
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
 const messageBubbleDefaultProps = {
   direction: direction.IN,
   isActive: false,