@zohoim/chat-components 0.0.11 → 0.0.13

package/es/MessageActionsMore/MessageActionsMore.js

@@ -27,7 +27,7 @@ function MessageActionsMoreComp(props) {
     renderMoreIcon,
     customStyle,
     popupSize,
-    /**** Popup Props ****/
+    /** ** Popup Props *** */
     getTargetRef,
     getContainerRef,
     position,
@@ -55,17 +55,17 @@ function MessageActionsMoreComp(props) {
     ref: getTargetRef
   }, moreIcon) : null, isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
     boxPosition: position,
+    customClass: popupClass,
     getRef: getContainerRef,
+    isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
     isActive: isPopupReady,
     isAnimate: true,
     isArrow: false,
     onClick: removeClose,
-    isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+    portalId: MSG_ACTION_POPUP_PORTAL,
     positionMapping: positionsOffset,
     positionsOffset: positionsOffset,
-    portalId: MSG_ACTION_POPUP_PORTAL,
-    size: popupSize,
-    customClass: popupClass
+    size: popupSize
     // isModel
   }, actions.map(action => {
     const {

package/es/MessageActionsWrapper/MessageActionsWrapper.js

@@ -0,0 +1,75 @@
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Components *** */
+import { Container } from '@zohodesk/components/lib/Layout';
+import MessageActionsMore from '../MessageActionsMore/MessageActionsMore';
+
+/** ** Hooks *** */
+import { useMessageActionsWrapper } from '@zohoim/chat-components-hooks';
+
+/** ** Constants *** */
+import messageActionsWrapperDefaultProps from './props/defaultProps';
+import messageActionsWrapperPropTypes from './props/propTypes';
+import constantProps from './props/propConstants';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Style *** */
+import style from './css/MessageActionsWrapper.module.css';
+function MessageActionsWrapper(props) {
+  const {
+    actions,
+    renderMoreIcon,
+    defaultShowCount,
+    customStyle,
+    morePopupCustomStyle
+  } = props;
+
+  /* external customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+  const {
+    actionsClass
+  } = cssJSLogic(props, newStyle);
+  const {
+    isShowMore: isShowMoreIcon,
+    revampedActions = []
+  } = useMessageActionsWrapper(actions, defaultShowCount);
+  const {
+    defaultActions = [],
+    moreActions
+  } = revampedActions;
+  function renderRow(defaultActions, isShowMore) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row"
+    }, defaultActions.map(action => {
+      const {
+        id,
+        renderFunction
+      } = action;
+      return renderHandler(renderFunction)({
+        id,
+        isShowInMore: false,
+        action
+      }); // id, isRenderInMorePopup
+    }), isShowMore ? /*#__PURE__*/React.createElement(MessageActionsMore, {
+      actions: moreActions,
+      customStyle: morePopupCustomStyle,
+      renderMoreIcon: renderMoreIcon
+    }) : null));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: actionsClass
+  }, renderRow(defaultActions, isShowMoreIcon));
+}
+MessageActionsWrapper.defaultProps = messageActionsWrapperDefaultProps;
+MessageActionsWrapper.propTypes = messageActionsWrapperPropTypes;
+MessageActionsWrapper.constantProps = constantProps;
+MessageActionsWrapper.displayName = 'MessageActionsWrapper';
+export default MessageActionsWrapper;

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

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

package/es/MessageActionsWrapper/css/cssJSLogic.js

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

package/es/MessageActionsWrapper/index.js

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

package/es/MessageActionsWrapper/props/defaultProps.js

@@ -0,0 +1,10 @@
+/** ** Constants *** */
+import { dummyObject, dummyArray } from '@zohoim/chat-components-utils/es/constants';
+import propConstants from './propConstants';
+const messageActionsWrapperDefaultProps = {
+  actions: dummyArray,
+  customStyle: dummyObject,
+  morePopupCustomStyle: dummyObject,
+  defaultShowCount: propConstants.actions.defaultShowCount
+};
+export default messageActionsWrapperDefaultProps;

package/es/MessageActionsWrapper/props/propTypes.js

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

package/es/MessageAvatar/MessageAvatar.js

@@ -3,13 +3,14 @@ import React from 'react';
 
 /** ** Components *** */
 import Avatar from '@zohodesk/components/es/Avatar/Avatar';
-import { Container, Box } from '@zohodesk/components/es/Layout';
 
 /** ** CSS *** */
 import style from './css/MessageAvatar.module.css';
 
-/** ** Methods *** */
+/** ** Hooks *** */
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+
+/** ** Methods *** */
 import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
 
@@ -41,12 +42,12 @@ export default function MessageAvatar(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: avatarWrapperClass
   }, /*#__PURE__*/React.createElement(Avatar, {
-    src: src,
     alternateSrc: alternateSrc,
-    title: title,
-    size: size,
+    customClass: avatarClass,
     name: name,
-    customClass: avatarClass
+    size: size,
+    src: src,
+    title: title
   }), /*#__PURE__*/React.createElement("span", {
     className: iconClass,
     "data-title": iconTitle

package/es/MessageAvatar/props/defaultProps.js

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

package/es/MessageBubble/MessageBubble.js

@@ -5,6 +5,7 @@
 import React from 'react';
 
 /** ** Hooks *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 import { useMessageBubbleAction } from '@zohoim/chat-components-hooks/es/MessageBubble';
 
 /** ** Constants *** */
@@ -13,7 +14,6 @@ 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';
 

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';
+import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
 const messageBubbleDefaultProps = {
   direction: direction.IN,
   isActive: false,

package/es/MessageBubble/props/propConstants.js

@@ -1,6 +1,6 @@
 /** ** Constants *** */
 import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
 const messageBubbleConstants = {
-  direction: direction
+  direction
 };
 export default messageBubbleConstants;

package/es/MessageBubble/props/propTypes.js

@@ -1,8 +1,8 @@
 /** ** Libraries *** */
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 
 /** ** Constants *** */
-import { direction } from "@zohoim/chat-components-utils/es/constants/messageConstants";
+import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
 const messageBubblePropTypes = {
   direction: PropTypes.oneOf([direction.IN, direction.OUT]),
   isActive: PropTypes.bool,

package/es/{im/IMMessageStatus/IMMessageStatus.js → MessageStatus/MessageStatus.js}

@@ -8,21 +8,22 @@ import React from 'react';
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
 /** ** Constants *** */
-import imMessageStatusDefaultProps from './props/defaultProps';
-import imMessageStatusPropTypes from './props/propTypes';
+import messageStatusDefaultProps from './props/defaultProps';
+import messageStatusPropTypes from './props/propTypes';
 import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
 
 /** ** Methods *** */
 import cssJSLogic from './css/cssJSLogic';
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 
 /** ** Styles *** */
-import style from './css/IMMessageStatus.module.css';
+import style from './css/MessageStatus.module.css';
 
 /** ** Icons *** */
-import DoubleTickIcon from '../../icons/iconSrc/messageStatus/DoubleTick';
-import TickIcon from '../../icons/iconSrc/messageStatus/Tick';
-import ClockIcon from '../../icons/iconSrc/messageStatus/Clock';
-import FailedIcon from '../../icons/iconSrc/messageStatus/Failed';
+import DoubleTickIcon from '../icons/iconSrc/messageStatus/DoubleTick';
+import TickIcon from '../icons/iconSrc/messageStatus/Tick';
+import ClockIcon from '../icons/iconSrc/messageStatus/Clock';
+import FailedIcon from '../icons/iconSrc/messageStatus/Failed';
 const {
   SENT,
   SAVED,
@@ -43,11 +44,12 @@ const messageStatusIconMapping = {
   [UNSENT]: FailedIcon,
   [FAILED]: FailedIcon
 };
-export default function IMMessageStatus(props) {
+export default function MessageStatus(props) {
   const {
     messageStatus,
     customStyle,
-    title
+    title,
+    renderCustomIcon
   } = props;
 
   /* External customization */
@@ -57,13 +59,14 @@ export default function IMMessageStatus(props) {
     statusClass
   } = cssJSLogic(props, newStyle);
 
-  /* Render Icon */
+  /* Custom Icon */
+  const customIcon = renderHandler(renderCustomIcon)();
   const IconComponent = messageStatusIconMapping[messageStatus];
-  return IconComponent ? /*#__PURE__*/React.createElement("div", {
+  return IconComponent || customIcon ? /*#__PURE__*/React.createElement("div", {
     className: statusClass,
     "data-title": title
-  }, /*#__PURE__*/React.createElement(IconComponent, null)) : null;
+  }, customIcon || /*#__PURE__*/React.createElement(IconComponent, null)) : null;
 }
-IMMessageStatus.propTypes = imMessageStatusPropTypes;
-IMMessageStatus.defaultProps = imMessageStatusDefaultProps;
-IMMessageStatus.displayName = 'IMMessageStatus';
+MessageStatus.propTypes = messageStatusPropTypes;
+MessageStatus.defaultProps = messageStatusDefaultProps;
+MessageStatus.displayName = 'MessageStatus';

package/es/{im/IMMessageStatus → MessageStatus}/css/cssJSLogic.js

@@ -1,8 +1,8 @@
 /** ** Methods *** */
-import { compileClassNames } from "@zohodesk/utils";
+import { compileClassNames } from '@zohodesk/utils';
 
 /** ** Constants *** */
-import messageStatusConstants from "@zohoim/chat-components-utils/es/constants/messageStatusConstants";
+import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
 const {
   READ,
   UNSENT,
@@ -12,7 +12,7 @@ export default function cssJSLogic(props, style) {
   const isRead = props.messageStatus === READ;
   const isFailed = props.messageStatus === FAILED || props.messageStatus === UNSENT;
   const statusClass = compileClassNames({
-    [style.messageStatus]: isRead || isFailed ? false : true,
+    [style.messageStatus]: !(isRead || isFailed),
     [style.readStatus]: isRead,
     [style.failedStatus]: isFailed
   });

package/es/MessageStatus/index.js

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

package/es/{im/IMMessageStatus → MessageStatus}/props/defaultProps.js

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

package/es/{im/IMMessageStatus → MessageStatus}/props/propTypes.js

@@ -13,9 +13,10 @@ const {
   FAILED,
   OUTGOING
 } = messageStatusConstants;
-const imMessageStatusPropTypes = {
+const messageStatusPropTypes = {
   messageStatus: PropTypes.oneOf([SENT, SAVED, QUEUED, DELIVERED, READ, UNSENT, FAILED, OUTGOING]).isRequired,
   customStyle: PropTypes.object,
-  title: PropTypes.string
+  title: PropTypes.string,
+  renderCustomIcon: PropTypes.func
 };
-export default imMessageStatusPropTypes;
+export default messageStatusPropTypes;

package/es/MoreActionItem/MoreActionItem.js

@@ -56,20 +56,20 @@ export default function MoreActionItem(props) {
     id
   });
   return /*#__PURE__*/React.createElement(ListContainer, {
+    autoHover: true,
+    customClass: customListItemClass,
     id: id,
     index: index,
-    title: iconTitle,
-    autoHover: true,
     onClick: handleClick,
-    customClass: customListItemClass
+    title: iconTitle
   }, /*#__PURE__*/React.createElement(Container, {
-    alignBox: "row",
-    align: "vertical"
+    align: "vertical",
+    alignBox: "row"
   }, needIcon ? /*#__PURE__*/React.createElement(Box, {
     className: iconClass
   }, icon) : null, /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    className: textClass
+    className: textClass,
+    flexible: true
   }, displayText)));
 }
 MoreActionItem.propTypes = moreActionItemPropTypes;

package/es/MoreActionItem/css/cssJSLogic.js

@@ -21,7 +21,7 @@ export default function cssJSLogic(props, style) {
     //   customTickIcon: tickIconClass
     // }
     customListItemClass: listItemClass,
-    iconClass: iconClass,
+    iconClass,
     textClass
   };
 }

package/es/ReplyBubble/ReplyBubble.js

@@ -12,11 +12,12 @@ import replyBubbleDefaultProps from './props/defaultProps';
 import replyBubblePropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
 import style from './css/ReplyBubble.module.css';
+
+/** ** Components *** */
 import ReplyBubbleHeader from '../ReplyBubbleHeader/ReplyBubbleHeader';
 import ReplyBubbleContent from '../ReplyBubbleContent/ReplyBubbleContent';
 export default function ReplyBubble(props) {
@@ -47,9 +48,9 @@ export default function ReplyBubble(props) {
     timeCustomStyle: timeCustomStyle
   }), /*#__PURE__*/React.createElement(ReplyBubbleContent, {
     customStyle: contentCustomStyle,
-    senderName: senderName,
     renderIcon: renderIcon,
-    renderMessage: renderMessage
+    renderMessage: renderMessage,
+    senderName: senderName
   }));
 }
 ReplyBubble.propTypes = replyBubblePropTypes;

package/es/ReplyBubbleContent/ReplyBubbleContent.js

@@ -2,22 +2,24 @@
 /* eslint-disable max-len */
 
 /** ** Libraries *** */
-import React from "react";
+import React from 'react';
 
 /** ** Hooks *** */
-import useMergeStyle from "@zohodesk/hooks/es/utils/useMergeStyle";
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
 /** ** Constants *** */
-import replyBubbleContentDefaultProps from "./props/defaultProps";
-import replyBubbleContentPropTypes from "./props/propTypes";
+import replyBubbleContentDefaultProps from './props/defaultProps';
+import replyBubbleContentPropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from "@zohoim/chat-components-utils/es/common/renderHandler";
-import cssJSLogic from "./css/cssJSLogic";
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
-import style from "./css/ReplyBubbleContent.module.css";
-import { Container, Box } from "@zohodesk/components/es/Layout";
+import style from './css/ReplyBubbleContent.module.css';
+
+/** ** Components *** */
+import { Container, Box } from '@zohodesk/components/es/Layout';
 export default function ReplyBubbleContent(props) {
   const {
     customStyle,
@@ -38,12 +40,14 @@ export default function ReplyBubbleContent(props) {
   const icon = renderHandler(renderIcon)();
   const messageContent = renderHandler(renderMessage)();
   return /*#__PURE__*/React.createElement(Container, {
-    alignBox: "row",
     align: "vertical",
+    alignBox: "row",
     className: replyBubbleContentClass
-  }, icon ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+  }, icon ? /*#__PURE__*/React.createElement(Box, {
     className: iconWrapperClass
-  }, icon)) : "", /*#__PURE__*/React.createElement(Box, {
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "both"
+  }, icon)) : '', /*#__PURE__*/React.createElement(Box, {
     flexible: true
   }, /*#__PURE__*/React.createElement("div", {
     className: nameClass
@@ -53,4 +57,4 @@ export default function ReplyBubbleContent(props) {
 }
 ReplyBubbleContent.propTypes = replyBubbleContentPropTypes;
 ReplyBubbleContent.defaultProps = replyBubbleContentDefaultProps;
-ReplyBubbleContent.displayName = "ReplyBubbleContent";
+ReplyBubbleContent.displayName = 'ReplyBubbleContent';

package/es/ReplyBubbleContent/css/ReplyBubbleContent.module.css

@@ -1,35 +1,37 @@
 .replyBubbleContent {
     position: relative;
-    background-color: #fff;
-    border-radius: 3px;
+    background-color: var(--imlib_chat_components_ReplyBubbleContent_bg_color);
+    border: var(--imlib_size_1) solid var(--imlib_chat_components_ReplyBubbleContent_border_color);
+    border-radius: var(--imlib_size_3);
+    margin: var(--imlib_size_5) 0;
 }[dir=ltr] .replyBubbleContent {
-    padding: 10px 10px 10px 20px;
+    padding: var(--imlib_size_10) var(--imlib_size_10) var(--imlib_size_10) var(--imlib_size_20);
 }[dir=rtl] .replyBubbleContent {
-    padding: 10px 20px 10px 10px;
+    padding: var(--imlib_size_10) var(--imlib_size_20) var(--imlib_size_10) var(--imlib_size_10);
 }
 
 .replyBubbleContent::after{
     content: "";
-    width: 2px;
+    width: var(--imlib_size_2);
     display: block;
     position: absolute;
-    top: 10px;
-    bottom: 10px;
-    background-color: #cddbf2;
-    border-radius: 30px;
+    top: var(--imlib_size_10);
+    bottom: var(--imlib_size_10);
+    background-color: var(--imlib_chat_components_ReplyBubbleContent_line_color);
+    border-radius: var(--imlib_size_30);
 }
 
 [dir=ltr] .replyBubbleContent::after{
-    left: 10px;
+    left: var(--imlib_size_10);
 }
 
 [dir=rtl] .replyBubbleContent::after{
-    right: 10px;
+    right: var(--imlib_size_10);
 }
 
 .name {
-    color: #000;
-    font-size: 15px;
+    color: var(--imlib_chat_components_ReplyBubbleContent_color);
+    font-size: var(--imlib_size_15);
     line-height: 1.5;
     overflow: hidden;
     white-space: nowrap;
@@ -37,11 +39,19 @@
     text-overflow: ellipsis;
 }
 
+[dir=ltr] .iconWrapper {
+    margin-right: var(--imlib_size_10);
+}
+
+[dir=rtl] .iconWrapper {
+    margin-left: var(--imlib_size_10);
+}
+
 .messageWrapper {
-    color: #000;
-    font-size: 13px;
+    color: var(--imlib_chat_components_ReplyBubbleContent_color);
+    font-size: var(--imlib_size_13);
     line-height: 1.5;
-    max-height: 40px;
+    max-height: var(--imlib_size_40);
     -webkit-line-clamp: 2;
     display: -webkit-box;
     -webkit-box-orient: vertical;

package/es/ReplyBubbleHeader/ReplyBubbleHeader.js

@@ -12,7 +12,6 @@ import replyBubbleHeaderDefaultProps from './props/defaultProps';
 import replyBubbleHeaderPropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
@@ -20,21 +19,23 @@ import style from './css/ReplyBubbleHeader.module.css';
 
 /** ** Components *** */
 import { Container, Box } from '@zohodesk/components/es/Layout';
+
+/** ** Icons *** */
 import ReplyIcon from '@zohodesk/icon/es/general/Reply';
-import IMDateTime from '../im/IMDateTime/IMDateTime';
 export default function ReplyBubbleHeader(props) {
   const {
     customStyle,
     replyText,
-    time,
-    timeCustomStyle
+    time
   } = props;
 
   /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
   /* CSS classnames added based on logic */
   const {
-    replyBubbleHeaderClass
+    replyBubbleHeaderClass,
+    replyTextClass,
+    timeClass
   } = cssJSLogic(props, newStyle);
   return /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
@@ -47,10 +48,11 @@ export default function ReplyBubbleHeader(props) {
     customStyle: {
       base: newStyle.replyIcon
     }
-  }), /*#__PURE__*/React.createElement(Box, null, replyText))), /*#__PURE__*/React.createElement(IMDateTime, {
-    customStyle: timeCustomStyle,
-    value: time
-  }));
+  }), /*#__PURE__*/React.createElement(Box, {
+    className: replyTextClass
+  }, replyText))), /*#__PURE__*/React.createElement("div", {
+    className: timeClass
+  }, time));
 }
 ReplyBubbleHeader.propTypes = replyBubbleHeaderPropTypes;
 ReplyBubbleHeader.defaultProps = replyBubbleHeaderDefaultProps;

package/es/ReplyBubbleHeader/css/ReplyBubbleHeader.module.css

@@ -1,4 +1,15 @@
-.replyIcon{
-    width: 20px;
-    height: 20px;
-}
+.replyIcon {
+  width: var(--imlib_size_20);
+  height: var(--imlib_size_20);
+}
+
+.replyText {
+  max-width: var(--zd_size100);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--zd_size14);
+}
+.time {
+  /*time class*/
+}

package/es/ReplyBubbleHeader/css/cssJSLogic.js

@@ -4,7 +4,15 @@ export default function cssJSLogic(props, style) {
   const replyBubbleHeaderClass = compileClassNames({
     [style.replyBubbleHeader]: true
   });
+  const replyTextClass = compileClassNames({
+    [style.replyText]: true
+  });
+  const timeClass = compileClassNames({
+    [style.time]: true
+  });
   return {
-    replyBubbleHeaderClass
+    replyBubbleHeaderClass,
+    replyTextClass,
+    timeClass
   };
 }