@zohoim/chat-components 0.0.14 → 0.0.16

package/es/LocationBubble/css/LocationBubble.module.css

@@ -6,10 +6,16 @@
 .locationBubble {
   white-space: nowrap;
   width: 100% ;
+  box-sizing: border-box;
   background-color: var(--imlib_chat_components_locationBubble_bg_color);
   border: 1px solid var(--imlib_chat_components_locationBubble_border_color);
   padding: var(--zd_size10) ;
-  border-radius: 3px;
+  border-radius: 3px; 
+}
+
+.failedLocationBubble{
+  background-color: var(--imlib_chat_components_locationBubble_bg_color_failed);
+  border-color: var(--imlib_chat_components_locationBubble_border_color_failed);
 }
 
 .image {
@@ -31,8 +37,14 @@
 
 .textLink {
   display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--imlib_chat_components_locationBubble_color);
+  composes: dotted from "../../css/common.module.css";
+  color: var(--imlib_chat_components_locationBubble_url_color);
 }
+
+.failedLocationBubble .textLink{
+  color: var(--imlib_chat_components_locationBubble_url_color_failed);
+}
+
+.textLink:hover{
+  text-decoration: underline !important;
+}

package/es/LocationBubble/css/cssJSLogic.js

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

package/es/LocationBubble/props/propTypes.js

@@ -2,6 +2,7 @@
 import PropTypes from 'prop-types';
 const locationBubblePropTypes = {
   locationUrl: PropTypes.string.isRequired,
-  customStyle: PropTypes.object
+  customStyle: PropTypes.object,
+  isFailed: PropTypes.bool
 };
 export default locationBubblePropTypes;

package/es/MediaBubbleWrapper/MediaBubbleWrapper.js

@@ -1,7 +1,7 @@
 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, { useMemo } from 'react';
+import React, { useMemo, Fragment } from 'react';
 /** ** Hooks *** */
 
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
@@ -25,7 +25,8 @@ export default function MediaBubbleWrapper(props) {
     customStyle,
     mediaDetails,
     customProps,
-    renderMedia
+    renderMedia,
+    isFailed
   } = props;
   const {
     attachmentBubbleInfoProps = dummyObject
@@ -48,11 +49,13 @@ export default function MediaBubbleWrapper(props) {
     fileURL,
     fileType
   });
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AttachmentBubbleInfo, _extends({
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(AttachmentBubbleInfo, _extends({
     customStyle: bubbleInfoCustomStyle,
     fileName: fileName,
     fileSize: fileSize
-  }, attachmentBubbleInfoProps)), mediaComponent);
+  }, attachmentBubbleInfoProps, {
+    isFailed: isFailed
+  })), mediaComponent);
 }
 MediaBubbleWrapper.propTypes = mediaBubbleWrapperPropTypes;
 MediaBubbleWrapper.defaultProps = mediaBubbleWrapperDefaultProps;

package/es/MediaBubbleWrapper/css/MediaBubbleWrapper.module.css

@@ -1,3 +1,7 @@
 .header {
   margin-bottom: var(--zd_size5) ;
 }
+
+.audioCont{
+  min-width: var(--zd_size300) ;
+}

package/es/MediaBubbleWrapper/props/propTypes.js

@@ -11,6 +11,7 @@ const mediaBubbleWrapperPropTypes = {
   customProps: PropTypes.shape({
     attachmentBubbleInfoProps: PropTypes.object
   }),
-  customStyle: PropTypes.object
+  customStyle: PropTypes.object,
+  isFailed: PropTypes.bool
 };
 export default mediaBubbleWrapperPropTypes;

package/es/Message/Message.js

@@ -31,6 +31,7 @@ export default function Message(props) {
     actions,
     renderSecondaryActions,
     onSelectAction,
+    onMouseEnterAction,
     renderContent,
     customProps
   } = props;
@@ -103,10 +104,11 @@ export default function Message(props) {
     const props = {
       actions,
       onSelect: onSelectAction,
-      renderSecondaryActions
+      renderSecondaryActions,
+      onMouseEnter: onMouseEnterAction
     };
     return /*#__PURE__*/React.createElement(MessageActions, _extends({}, props, messageActionsProps));
-  }, [actions, onSelectAction, renderSecondaryActions, messageActionsProps]);
+  }, [actions, onSelectAction, onMouseEnterAction, renderSecondaryActions, messageActionsProps]);
   const needMessageActions = !!actions.length;
   return /*#__PURE__*/React.createElement(MessageBubble, _extends({
     direction: direction,

package/es/MessageAction/MessageAction.js

@@ -16,6 +16,7 @@ export default function MessageAction(props) {
     displayText,
     id,
     onClick,
+    onMouseEnter,
     isShowInMore,
     iconTitle,
     customProps,
@@ -44,12 +45,14 @@ export default function MessageAction(props) {
     isDisabled: isDisabled,
     needIcon: needMoreActionItemIcon,
     onClick: onClick,
+    onMouseEnter: onMouseEnter,
     renderIcon: renderIcon,
     title: iconTitle
   }, moreActionItemProps)) : /*#__PURE__*/React.createElement(ActionIcon, _extends({
     id: id,
     isDisabled: isDisabled,
     onClick: onClick,
+    onMouseEnter: onMouseEnter,
     title: iconTitle
   }, actionIconProps));
 }

package/es/MessageAction/props/propTypes.js

@@ -4,6 +4,7 @@ const messageActionPropTypes = {
   displayText: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
+  onMouseEnter: PropTypes.func,
   closePopup: PropTypes.func,
   customProps: PropTypes.shape({
     actionIconProps: PropTypes.object,

package/es/MessageActions/MessageActions.js

@@ -1,7 +1,7 @@
 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';
+import React, { useCallback, Fragment } from 'react';
 /** ** Components *** */
 
 import ActionIconWrapper from '../ActionIconWrapper/ActionIconWrapper';
@@ -30,6 +30,7 @@ export default function MessageActions(props) {
     actions,
     defaultShowCount,
     onSelect,
+    onMouseEnter,
     renderSecondaryActions,
     customStyle,
     customProps
@@ -52,6 +53,18 @@ export default function MessageActions(props) {
       e
     });
   }, [onSelect]);
+  const handleMouseEnterAction = useCallback(_ref2 => {
+    let {
+      id,
+      e
+    } = _ref2;
+    onMouseEnter && onMouseEnter({
+      id,
+      e
+    });
+  }, [onMouseEnter]);
+  /* External Action Icon */
+
   const renderAction = useCallback(function () {
     let {
       id,
@@ -72,9 +85,10 @@ export default function MessageActions(props) {
       id: id,
       isDisabled: isDisabled,
       isShowInMore: isShowInMore,
-      onClick: handleClickAction
+      onClick: handleClickAction,
+      onMouseEnter: handleMouseEnterAction
     }, messageActionProps));
-  }, [handleClickAction, messageActionProps]);
+  }, [handleClickAction, handleMouseEnterAction, messageActionProps]);
   /* Hooks handling */
 
   const {
@@ -95,7 +109,7 @@ export default function MessageActions(props) {
     renderIcon: renderMoreIcon
   }, actionIconWrapperProps)), [actionIconWrapperProps, renderMoreIcon]);
   const secondaryActions = renderHandler(renderSecondaryActions)();
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MessageActionsWrapper, _extends({
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MessageActionsWrapper, _extends({
     actions: allActions,
     defaultShowCount: defaultShowCount,
     renderMoreIcon: renderMore

package/es/MessageActions/props/propTypes.js

@@ -12,6 +12,7 @@ const messageActionsPropTypes = {
     renderFunction: PropTypes.func
   })).isRequired,
   onSelect: PropTypes.func.isRequired,
+  onMouseEnter: PropTypes.func,
   customProps: PropTypes.shape({
     actionIconWrapperProps: PropTypes.object,
     messageActionProps: PropTypes.object,

package/es/MessageBox/MessageBox.js

@@ -11,6 +11,9 @@ import messageBoxPropTypes from './props/propTypes';
 
 import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
+/** ** Components *** */
+
+import { Box } from '@zohodesk/components/es/Layout';
 /** ** Styles *** */
 
 import style from './css/MessageBox.module.css';
@@ -45,15 +48,16 @@ export default function MessageBox(props) {
   const messageStatus = renderHandler(renderMessageStatus)();
   return /*#__PURE__*/React.createElement("div", {
     className: messageBoxClass
-  }, /*#__PURE__*/React.createElement("div", {
-    className: newStyle.messageBoxInner
-  }, messageHeader ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.messageBoxInner,
+    flexible: true
+  }, messageHeader ? /*#__PURE__*/React.createElement(Box, {
     className: newStyle.messageHeaderWrapper
-  }, messageHeader) : null, messageConent ? /*#__PURE__*/React.createElement("div", {
+  }, messageHeader) : null, messageConent ? /*#__PURE__*/React.createElement(Box, {
     className: newStyle.messageContentWrapper
-  }, messageConent) : null, messageFooter ? /*#__PURE__*/React.createElement("div", {
+  }, messageConent) : null, messageFooter ? /*#__PURE__*/React.createElement(Box, {
     className: newStyle.messageFooterWrapper
-  }, messageFooter) : null), messageStatus ? /*#__PURE__*/React.createElement("div", {
+  }, messageFooter) : null), messageStatus ? /*#__PURE__*/React.createElement(Box, {
     className: newStyle.messageStatusWrapper
   }, messageStatus) : null);
 }

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

@@ -18,17 +18,12 @@
   /* max-width: var(--messageBox-max_width); */
   word-wrap: break-word;
   font-size: var(--messageBox-content_size);
+  box-sizing: border-box;
   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 ;
-}
-
 .messageContentWrapper {
   /* Use this class for message content customization */
   line-height: 150%;

package/es/MessageBubble/MessageBubble.js

@@ -1,5 +1,7 @@
+/* eslint-disable no-confusing-arrow */
+
 /** ** Libraries *** */
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 /** ** Hooks *** */
 
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
@@ -12,6 +14,9 @@ import messageBubblePropTypes from './props/propTypes';
 
 import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
+/** ** Components *** */
+
+import { Box } from '@zohodesk/components/es/Layout';
 /** ** Styles *** */
 
 import style from './css/MessageBubble.module.css';
@@ -50,7 +55,7 @@ export default function MessageBubble(props) {
 
   const messageSenderRenderer = useCallback(() => {
     const messageOwner = renderHandler(renderMessageOwner)();
-    return needSender ? /*#__PURE__*/React.createElement("div", {
+    return needSender ? /*#__PURE__*/React.createElement(Box, {
       className: newStyle.messageOwnerWrapper
     }, messageOwner) : null;
   }, [renderMessageOwner, needSender, newStyle.messageOwnerWrapper]);
@@ -58,7 +63,7 @@ export default function MessageBubble(props) {
 
   const messageActionsRenderer = useCallback(() => {
     const messageActions = isRenderMessageActions ? renderHandler(renderMessageActions)() : null;
-    return messageActions ? /*#__PURE__*/React.createElement("div", {
+    return messageActions ? /*#__PURE__*/React.createElement(Box, {
       className: newStyle.messageActionWrapper
     }, messageActions) : null;
   }, [isRenderMessageActions, renderMessageActions, newStyle.messageActionWrapper]);
@@ -66,34 +71,37 @@ export default function MessageBubble(props) {
 
   const messageBoxRenderer = useCallback(() => {
     const messageBox = renderHandler(renderMessageBox)();
-    return messageBox ? /*#__PURE__*/React.createElement("div", {
+    return messageBox ? /*#__PURE__*/React.createElement(Box, {
       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]);
+  const messageBox = useMemo(() => messageBoxRenderer(), [messageBoxRenderer]);
+  const messageActions = useMemo(() => messageActionsRenderer(), [messageActionsRenderer]);
+  const messageBoxWithActionsRenderer = useCallback(() => messageBox || messageActions ? /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.messageContainer
+  }, messageBox, messageActions) : null, [messageBox, messageActions, newStyle.messageContainer]);
   /* Message Footer Render */
 
   const messageFooterRenderer = useCallback(() => {
     const messageBoxFooter = renderHandler(renderMessageBoxFooter)();
-    return messageBoxFooter ? /*#__PURE__*/React.createElement("div", {
+    return messageBoxFooter ? /*#__PURE__*/React.createElement(Box, {
       className: newStyle.messageBoxFooterWrapper
     }, messageBoxFooter) : null;
   }, [renderMessageBoxFooter, newStyle.messageBoxFooterWrapper]);
+  /* Get the components */
+
+  const messageSender = useMemo(() => messageSenderRenderer(), [messageSenderRenderer]);
+  const messageBoxWithActions = useMemo(() => messageBoxWithActionsRenderer(), [messageBoxWithActionsRenderer]);
+  const messageFooter = useMemo(() => messageFooterRenderer(), [messageFooterRenderer]);
   /* Construct Layout */
 
   const messageLayout = /*#__PURE__*/React.createElement("div", {
     className: bubbleClass,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
-  }, messageSenderRenderer(), messageBoxWithActionsRenderer(), messageFooterRenderer());
+  }, messageSender, messageBoxWithActions, messageFooter);
   return messageLayout;
 }
 MessageBubble.propTypes = messageBubblePropTypes;

package/es/MessageStatus/css/MessageStatus.module.css

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

package/es/MoreActionItem/MoreActionItem.js

@@ -26,6 +26,7 @@ export default function MoreActionItem(props) {
     renderIcon,
     needIcon,
     onClick,
+    onMouseEnter,
     closePopup,
     isDisabled
   } = props;
@@ -36,6 +37,12 @@ export default function MoreActionItem(props) {
       id
     });
   }, [closePopup, onClick, id, isDisabled]);
+  const handleMouseEnter = useCallback(e => {
+    !isDisabled && onMouseEnter && onMouseEnter({
+      e,
+      id
+    });
+  }, [onMouseEnter, id, isDisabled]);
   /* External CSS Customization */
 
   const newStyle = useMergeStyle(style, customStyle);
@@ -49,6 +56,7 @@ export default function MoreActionItem(props) {
     id: id,
     isDisabled: isDisabled,
     onClick: handleClick,
+    onMouseEnter: handleMouseEnter,
     title: title
   }, /*#__PURE__*/React.createElement(Container, {
     align: "vertical",

package/es/MoreActionItem/css/MoreActionItem.module.css

@@ -15,9 +15,7 @@
 .text {
   composes: varClass;
   font-size: var(--moreActionItem-content_size);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  composes: dotted from "../../css/common.module.css";
 }
 
 [dir=ltr] .text {

package/es/MoreActionItem/props/propTypes.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 const moreActionItemPropTypes = {
   displayText: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
+  onMouseEnter: PropTypes.func,
   closePopup: PropTypes.func,
   customStyle: PropTypes.object,
   id: PropTypes.string,

package/es/ReplyBubble/ReplyBubble.js

@@ -18,16 +18,19 @@ import style from './css/ReplyBubble.module.css';
 import ReplyBubbleHeader from '../ReplyBubbleHeader/ReplyBubbleHeader';
 import ReplyBubbleContent from '../ReplyBubbleContent/ReplyBubbleContent';
 import AttachmentIcon from '../AttachmentIcon/AttachmentIcon';
+import LocationBubble from '../LocationBubble/LocationBubble';
 export default function ReplyBubble(props) {
   const {
     customStyle,
     senderName,
-    time,
+    dateTimeDetails,
     replyText,
     message,
     attachmentDetails,
+    locationUrl,
     onClick,
-    customProps
+    customProps,
+    isFailed
   } = props;
   const {
     headerProps = dummyObject,
@@ -37,7 +40,8 @@ export default function ReplyBubble(props) {
   const {
     fileName,
     fileURL,
-    fileFormat
+    fileFormat,
+    mediaType
   } = attachmentDetails || dummyObject;
   /* External CSS Customization */
 
@@ -45,14 +49,25 @@ export default function ReplyBubble(props) {
   const iconStyle = useMemo(() => ({
     $icon: newStyle.attachmentIcon
   }), [newStyle.attachmentIcon]);
-  const renderMessage = useCallback(() =>
-  /*#__PURE__*/
-  // eslint-disable-next-line react/no-danger, @zohodesk/zsecurity/no-unsecure-html
-  React.createElement("span", {
-    dangerouslySetInnerHTML: {
-      __html: message
+  const renderMessage = useCallback(() => {
+    if (locationUrl) {
+      return /*#__PURE__*/React.createElement(LocationBubble, {
+        isFailed: isFailed,
+        locationUrl: locationUrl
+      });
     }
-  }), [message]);
+
+    if (message) {
+      // eslint-disable-next-line @zohodesk/zsecurity/no-unsecure-html, react/no-danger
+      return /*#__PURE__*/React.createElement("span", {
+        dangerouslySetInnerHTML: {
+          __html: message
+        }
+      });
+    }
+
+    return null;
+  }, [message, locationUrl, isFailed]);
   const renderIcon = useCallback(() => {
     if (fileURL) {
       return /*#__PURE__*/React.createElement("div", {
@@ -67,18 +82,21 @@ export default function ReplyBubble(props) {
     if (fileFormat) {
       return /*#__PURE__*/React.createElement(AttachmentIcon, _extends({
         customStyle: iconStyle,
-        fileFormat: fileFormat
+        fileFormat: fileFormat,
+        mediaType: mediaType
       }, iconProps));
     }
 
     return null;
-  }, [fileURL, fileName, fileFormat, iconStyle, iconProps, newStyle.imageWrapper, newStyle.image]);
+  }, [fileURL, fileName, fileFormat, mediaType, iconStyle, iconProps, newStyle.imageWrapper, newStyle.image]);
   return /*#__PURE__*/React.createElement("div", {
     onClick: onClick
   }, /*#__PURE__*/React.createElement(ReplyBubbleHeader, _extends({
-    replyText: replyText,
-    time: time
+    dateTimeDetails: dateTimeDetails,
+    isFailed: isFailed,
+    replyText: replyText
   }, headerProps)), /*#__PURE__*/React.createElement(ReplyBubbleContent, _extends({
+    isFailed: isFailed,
     renderIcon: renderIcon,
     renderMessage: renderMessage,
     senderName: senderName

package/es/ReplyBubble/css/ReplyBubble.module.css

@@ -1,6 +1,6 @@
 .attachmentIcon {
-  height: var(--zd_size40) ;
-  width: var(--zd_size40) ;
+  height: var(--zd_size40)  !important;
+  width: var(--zd_size40)  !important;
 }
 
 .imageWrapper {
@@ -14,4 +14,4 @@
   height: 100% ;
   object-fit: cover;
   border-radius: 3px;
-}
+}

package/es/ReplyBubble/props/propTypes.js

@@ -8,14 +8,20 @@ const replyBubblePropTypes = {
   attachmentDetails: PropTypes.shape({
     fileFormat: PropTypes.string,
     fileName: PropTypes.string,
-    fileURL: PropTypes.string
+    fileURL: PropTypes.string,
+    mediaType: PropTypes.string
   }),
+  locationUrl: PropTypes.string,
   customProps: PropTypes.shape({
     contentProps: PropTypes.object,
     headerProps: PropTypes.object,
     iconProps: PropTypes.object
   }),
   customStyle: PropTypes.object,
-  time: PropTypes.string
+  dateTimeDetails: PropTypes.shape({
+    displayDateTime: PropTypes.string,
+    tooltip: PropTypes.string
+  }),
+  isFailed: PropTypes.bool
 };
 export default replyBubblePropTypes;

package/es/ReplyBubbleContent/ReplyBubbleContent.js

@@ -10,6 +10,7 @@ import replyBubbleContentPropTypes from './props/propTypes';
 /** ** Methods *** */
 
 import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
 /** ** Styles *** */
 
 import style from './css/ReplyBubbleContent.module.css';
@@ -21,28 +22,37 @@ export default function ReplyBubbleContent(props) {
     customStyle,
     senderName,
     renderIcon,
-    renderMessage
+    renderMessage,
+    isFailed
   } = props;
   /* External CSS Customization */
 
   const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+
+  const {
+    replyBubbleContentClass
+  } = cssJSLogic({
+    isFailed
+  }, newStyle);
   const icon = renderHandler(renderIcon)();
   const messageContent = renderHandler(renderMessage)();
   return /*#__PURE__*/React.createElement(Container, {
     align: "vertical",
     alignBox: "row",
-    className: newStyle.replyBubbleContent
+    className: replyBubbleContentClass,
+    isCover: false
   }, icon ? /*#__PURE__*/React.createElement(Box, {
     className: newStyle.iconWrapper
   }, /*#__PURE__*/React.createElement(Container, {
     align: "both"
   }, icon)) : null, /*#__PURE__*/React.createElement(Box, {
     flexible: true
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Box, {
     className: newStyle.name
-  }, senderName), /*#__PURE__*/React.createElement("div", {
+  }, senderName), messageContent ? /*#__PURE__*/React.createElement(Box, {
     className: newStyle.messageWrapper
-  }, messageContent)));
+  }, messageContent) : null));
 }
 ReplyBubbleContent.propTypes = replyBubbleContentPropTypes;
 ReplyBubbleContent.defaultProps = replyBubbleContentDefaultProps;