@zohoim/chat-components 0.0.1-cx

package/es/MessageActionsMore/MessageActionsMore.js

@@ -0,0 +1,101 @@
+/** ** Libraries *** */
+import React, { useCallback, useMemo } from 'react';
+/** ** Components *** */
+
+import Popup from '@zohodesk/components/lib/Popup/Popup';
+import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
+/** ** Constants *** */
+
+import messageActionsMoreDefaultProps from './props/defaultProps';
+import messageActionsMorePropTypes from './props/propTypes';
+import { MSG_ACTION_POPUP_PORTAL } from '../constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+/** ** Methods *** */
+
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Styles *** */
+
+import style from './css/MessageActionsMore.module.css';
+
+function MessageActionsMoreComp(props) {
+  const {
+    actions,
+    renderMoreIcon,
+    customStyle,
+    popupSize,
+    defaultPopupPosition,
+
+    /** ** Popup Props *** */
+    getTargetRef,
+    getContainerRef,
+    position,
+    togglePopup,
+    isPopupReady,
+    isPopupOpen,
+    removeClose,
+    closePopupOnly,
+    isAbsolutePositioningNeeded,
+    positionsOffset
+  } = props;
+  const moreIcon = renderHandler(renderMoreIcon)();
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const popupClass = useMemo(() => ({
+    customDropBox: newStyle.popup,
+    customMobileDropBox: newStyle.mobilePopup,
+    customDropBoxWrap: newStyle.popupWrapper,
+    customMobileDropBoxWrap: newStyle.mobilePopupWrapper
+  }), [newStyle.popup, newStyle.mobilePopup, newStyle.popupWrapper, newStyle.mobilePopupWrapper]);
+
+  const handleTogglePopup = e => {
+    togglePopup(e, defaultPopupPosition);
+  };
+
+  const renderActions = useCallback(() => actions.map(action => {
+    const {
+      id,
+      renderFunction
+    } = action;
+    return renderHandler(renderFunction)({
+      id,
+      isShowInMore: true,
+      action,
+      closePopup: closePopupOnly
+    }); // id, isRenderInMorePopup
+  }), [actions, closePopupOnly]);
+  const isRenderPopup = !!(moreIcon && isPopupOpen);
+  return /*#__PURE__*/React.createElement("span", {
+    className: newStyle.morePopupContainer
+  }, moreIcon ? /*#__PURE__*/React.createElement("span", {
+    ref: getTargetRef,
+    onClick: handleTogglePopup
+  }, moreIcon) : null, isRenderPopup ? /*#__PURE__*/React.createElement(DropBox, {
+    boxPosition: position,
+    customClass: popupClass,
+    customStyle: dummyObject,
+    getRef: getContainerRef,
+    isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+    isActive: isPopupReady,
+    isAnimate: true,
+    isArrow: false,
+    onClick: removeClose,
+    portalId: MSG_ACTION_POPUP_PORTAL,
+    positionsOffset: positionsOffset,
+    size: popupSize // isModel
+
+  }, renderActions()) : null);
+}
+
+const MessageActionsMore = Popup(MessageActionsMoreComp, undefined, undefined, {
+  isAbsolutePositioningNeeded: false
+});
+MessageActionsMoreComp.defaultProps = messageActionsMoreDefaultProps;
+MessageActionsMoreComp.propTypes = messageActionsMorePropTypes;
+MessageActionsMore.defaultProps = messageActionsMoreDefaultProps;
+MessageActionsMore.propTypes = messageActionsMorePropTypes;
+MessageActionsMore.displayName = 'MessageActionsMore';
+export default MessageActionsMore;

package/es/MessageActionsMore/css/MessageActionsMore.module.css

@@ -0,0 +1,23 @@
+.container {
+  display: inline-block;
+}
+
+.morePopupContainer {
+  composes: container;
+}
+
+.popup {
+  padding: var(--zd_size10) 0 ;
+}
+
+.popupWrapper {
+  composes: container;
+}
+
+.mobilePopup {
+  composes: container;
+}
+
+.mobilePopupWrapper {
+  composes: container;
+}

package/es/MessageActionsMore/index.js

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

package/es/MessageActionsMore/props/defaultProps.js

@@ -0,0 +1,9 @@
+/** ** Constants *** */
+import { dummyObject, dummyArray } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const messageActionsMoreDefaultProps = {
+  customStyle: dummyObject,
+  actions: dummyArray,
+  popupSize: 'small',
+  defaultPopupPosition: 'bottomCenter'
+};
+export default messageActionsMoreDefaultProps;

package/es/MessageActionsMore/props/propTypes.js

@@ -0,0 +1,13 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const messageActionsMorePropTypes = {
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    renderFunction: PropTypes.func
+  })).isRequired,
+  renderMoreIcon: PropTypes.func.isRequired,
+  customStyle: PropTypes.object,
+  popupSize: PropTypes.oneOf(['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default']),
+  defaultPopupPosition: PropTypes.oneOf([['bottomCenter', 'bottomLeftToRight', 'bottomCenterToRight', 'bottomRightToLeft', 'bottomCenterToLeft', 'topCenter', 'topLeftToRight', 'topCenterToRight', 'topRightToLeft', 'topCenterToLeft', 'rightTopToBottom', 'rightCenterToBottom', 'rightCenter', 'rightBottomToTop', 'rightCenterToTop', 'leftTopToBottom', 'leftCenterToBottom', 'leftCenter', 'leftBottomToTop', 'leftCenterToTop', 'bottomRight', 'bottomLeft', 'topRight', 'topLeft', 'rightBottom', 'rightTop', 'leftBottom', 'leftTop']])
+};
+export default messageActionsMorePropTypes;

package/es/MessageActionsWrapper/MessageActionsWrapper.js

@@ -0,0 +1,68 @@
+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",
+    isCover: false
+  }, 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

@@ -0,0 +1,49 @@
+/** ** Libraries *** */
+import React from 'react';
+/** ** Components *** */
+
+import Avatar from '@zohodesk/components/es/Avatar/Avatar';
+/** ** CSS *** */
+
+import style from './css/MessageAvatar.module.css';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** 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) {
+  const {
+    src,
+    alternateSrc,
+    title,
+    size,
+    name,
+    customStyle,
+    iconTitle,
+    renderIcon
+  } = props;
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const icon = renderHandler(renderIcon)();
+  return /*#__PURE__*/React.createElement("div", {
+    className: newStyle.msgAvatar
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    alternateSrc: alternateSrc,
+    customClass: newStyle.avatar,
+    name: name,
+    size: size,
+    src: src,
+    title: title
+  }), icon ? /*#__PURE__*/React.createElement("span", {
+    className: newStyle.icon,
+    "data-title": iconTitle
+  }, icon) : null);
+}
+MessageAvatar.defaultProps = messageAvatarDefaultProps;
+MessageAvatar.propTypes = messageAvatarPropTypes;

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

@@ -0,0 +1,23 @@
+.msgAvatar {
+  position: relative;
+  display: inline-flex;
+}
+
+.icon {
+  position: absolute;
+  bottom: calc( var(--zd_size6) * -1 ) ;
+}
+
+[dir=ltr] .icon {
+  right: calc( var(--zd_size7) * -1 ) ;
+}
+
+[dir=rtl] .icon {
+  left: calc( var(--zd_size7) * -1 ) ;
+}
+
+.avatar {
+  /* Use this class name for external customization  */
+  width: var(--zd_size32) ;
+  height: var(--zd_size32) ;
+}

package/es/MessageAvatar/index.js

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

package/es/MessageAvatar/props/defaultProps.js

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

package/es/MessageAvatar/props/propTypes.js

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

package/es/MessageBox/MessageBox.js

@@ -0,0 +1,66 @@
+/** ** Libraries *** */
+import React from 'react';
+/** ** Hooks *** */
+
+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';
+/** ** Components *** */
+
+import { Box } from '@zohodesk/components/es/Layout';
+/** ** Styles *** */
+
+import style from './css/MessageBox.module.css';
+export default function MessageBox(props) {
+  const {
+    renderMessage: renderMessageContent,
+    renderMessageFooter,
+    renderMessageHeader,
+    customStyle,
+    renderMessageStatus,
+    isFailed,
+    isIncoming,
+    isOutgoing
+  } = props;
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+
+  const {
+    messageBoxClass
+  } = cssJSLogic({
+    isFailed,
+    isIncoming,
+    isOutgoing
+  }, newStyle);
+  /* Render Childrens */
+
+  const messageHeader = renderHandler(renderMessageHeader)();
+  const messageConent = renderHandler(renderMessageContent)();
+  const messageFooter = renderHandler(renderMessageFooter)();
+  const messageStatus = renderHandler(renderMessageStatus)();
+  return /*#__PURE__*/React.createElement("div", {
+    className: messageBoxClass
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.messageBoxInner,
+    flexible: true
+  }, messageHeader ? /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.messageHeaderWrapper
+  }, messageHeader) : null, messageConent ? /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.messageContentWrapper
+  }, messageConent) : null, messageFooter ? /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.messageFooterWrapper
+  }, messageFooter) : null), messageStatus ? /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.messageStatusWrapper
+  }, messageStatus) : null);
+}
+MessageBox.propTypes = messageBoxPropTypes;
+MessageBox.defaultProps = messageBoxDefaultProps;
+MessageBox.displayName = 'MessageBox';

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

@@ -0,0 +1,56 @@
+.varClass {
+  --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);
+}
+
+.messageBoxContainer {
+  composes: varClass;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: flex-end;
+  color: var(--imlib_chat_components_messageBox_text_color);
+  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);
+}
+
+.messageContentWrapper {
+  /* Use this class for message content customization */
+  line-height: 150%;
+}
+
+.messageHeaderWrapper {
+  margin-bottom: var(--messageBox-message_header_gap);
+}
+
+.messageFooterWrapper {
+  margin-top: var(--messageBox-message_footer_gap);
+}
+
+[dir=ltr] .messageStatusWrapper {
+  margin-left: var(--messageBox-message_status_gap);
+}
+
+[dir=rtl] .messageStatusWrapper {
+  margin-right: var(--messageBox-message_status_gap);
+}
+
+.failedMessageBox {
+  color: var(--imlib_chat_components_messageBox_failed_text_color);
+  background-color: var(--imlib_chat_components_messageBox_failed_bg_color);
+}
+
+.incomingMessageBox {
+  background-color: var(--imlib_chat_components_messageBox_incoming_bg_color);
+}
+
+.outgoingMessageBox {
+  background-color: var(--imlib_chat_components_messageBox_outgoing_bg_color);
+}

package/es/MessageBox/css/cssJSLogic.js

@@ -0,0 +1,18 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const {
+    isFailed,
+    isIncoming,
+    isOutgoing
+  } = props;
+  const messageBoxClass = compileClassNames({
+    [style.messageBoxContainer]: true,
+    [style.failedMessageBox]: isFailed,
+    [style.incomingMessageBox]: isIncoming && !isFailed,
+    [style.outgoingMessageBox]: isOutgoing && !isFailed
+  });
+  return {
+    messageBoxClass
+  };
+}

package/es/MessageBox/index.js

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

package/es/MessageBox/props/defaultProps.js

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

package/es/MessageBox/props/propTypes.js

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

package/es/MessageBubble/MessageBubble.js

@@ -0,0 +1,116 @@
+/* eslint-disable no-confusing-arrow */
+
+/** ** Libraries *** */
+import React, { useCallback, useMemo } from 'react';
+/** ** Hooks *** */
+
+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';
+/** ** Methods *** */
+
+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';
+export default function MessageBubble(props) {
+  const {
+    renderMessageBox,
+    renderMessageBoxFooter,
+    renderMessageOwner,
+    renderMessageActions,
+    customStyle,
+    needSender,
+    isActive,
+    direction
+  } = props;
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  /* Use Hooks */
+
+  const {
+    onMouseEnter,
+    onMouseLeave,
+    isRenderMessageActions
+  } = useMessageBubbleAction(props);
+  /* css classnames added based on logic */
+
+  const {
+    bubbleClass,
+    messageActionWrapperClass
+  } = cssJSLogic({
+    isActive,
+    direction,
+    isRenderMessageActions
+  }, newStyle);
+  /* Render Childrens */
+
+  /* Message Sender Render */
+
+  const messageSenderRenderer = useCallback(() => {
+    const messageOwner = renderHandler(renderMessageOwner)();
+    return needSender ? /*#__PURE__*/React.createElement(Box, {
+      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(Box, {
+      className: messageActionWrapperClass
+    }, messageActions) : null;
+  }, [isRenderMessageActions, renderMessageActions, messageActionWrapperClass]);
+  /* Message Box Render */
+
+  const messageBoxRenderer = useCallback(() => {
+    const messageBox = renderHandler(renderMessageBox)();
+    return messageBox; // return messageBox ? (
+    //   <Box flexible className={newStyle.messageBoxWrapper}>
+    //     {messageBox}
+    //   </Box>
+    // ) : null;
+  }, [renderMessageBox]);
+  /* Message BoxWithActions Render */
+
+  const messageBox = useMemo(() => messageBoxRenderer(), [messageBoxRenderer]);
+  const messageActions = useMemo(() => messageActionsRenderer(), [messageActionsRenderer]);
+  const messageBoxWithActionsRenderer = useCallback(() => messageBox || messageActions ? /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.messageContainer
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.messageBoxWrapper,
+    flexible: true
+  }, messageBox, messageActions)) : null, [messageBox, messageActions, newStyle.messageContainer, newStyle.messageBoxWrapper]);
+  /* Message Footer Render */
+
+  const messageFooterRenderer = useCallback(() => {
+    const messageBoxFooter = renderHandler(renderMessageBoxFooter)();
+    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
+  }, messageSender, messageBoxWithActions, messageFooter);
+  return messageLayout;
+}
+MessageBubble.propTypes = messageBubblePropTypes;
+MessageBubble.defaultProps = messageBubbleDefaultProps;
+MessageBubble.displayName = 'MessageBubble';