@zohoim/chat-components 0.0.15 → 0.0.17

package/es/MessageBox/MessageBox.js

@@ -13,7 +13,7 @@ import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler
 import cssJSLogic from './css/cssJSLogic';
 /** ** Components *** */
 
-import { Container, Box } from '@zohodesk/components/es/Layout';
+import { Box } from '@zohodesk/components/es/Layout';
 /** ** Styles *** */
 
 import style from './css/MessageBox.module.css';
@@ -46,7 +46,7 @@ export default function MessageBox(props) {
   const messageConent = renderHandler(renderMessageContent)();
   const messageFooter = renderHandler(renderMessageFooter)();
   const messageStatus = renderHandler(renderMessageStatus)();
-  return /*#__PURE__*/React.createElement(Container, {
+  return /*#__PURE__*/React.createElement("div", {
     className: messageBoxClass
   }, /*#__PURE__*/React.createElement(Box, {
     className: newStyle.messageBoxInner,

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';
@@ -14,7 +16,7 @@ import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler
 import cssJSLogic from './css/cssJSLogic';
 /** ** Components *** */
 
-import { Container, Box } from '@zohodesk/components/es/Layout';
+import { Box } from '@zohodesk/components/es/Layout';
 /** ** Styles *** */
 
 import style from './css/MessageBubble.module.css';
@@ -32,14 +34,6 @@ export default function MessageBubble(props) {
   /* External CSS Customization */
 
   const newStyle = useMergeStyle(style, customStyle);
-  /* css classnames added based on logic */
-
-  const {
-    bubbleClass
-  } = cssJSLogic({
-    isActive,
-    direction
-  }, newStyle);
   /* Use Hooks */
 
   const {
@@ -47,6 +41,15 @@ export default function MessageBubble(props) {
     onMouseLeave,
     isRenderMessageActions
   } = useMessageBubbleAction(props);
+  /* css classnames added based on logic */
+
+  const {
+    bubbleClass
+  } = cssJSLogic({
+    isActive,
+    direction,
+    isRenderMessageActions
+  }, newStyle);
   /* Render Childrens */
 
   /* Message Sender Render */
@@ -75,13 +78,11 @@ export default function MessageBubble(props) {
   }, [renderMessageBox, newStyle.messageBoxWrapper]);
   /* Message BoxWithActions Render */
 
-  const messageBoxWithActionsRenderer = useCallback(() => {
-    const messageBox = messageBoxRenderer();
-    const messageActions = messageActionsRenderer();
-    return messageBox || messageActions ? /*#__PURE__*/React.createElement(Box, {
-      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(() => {
@@ -90,13 +91,18 @@ export default function MessageBubble(props) {
       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(Container, {
+  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/MessageBubble/css/MessageBubble.module.css

@@ -1,7 +1,6 @@
 .varClass {
   --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);
@@ -23,6 +22,7 @@
 .messageContainer {
   grid-area: messageContainer;
   display: grid;
+  column-gap: var(--zd_size10) ;
 }
 
 .messageBoxWrapper {
@@ -32,7 +32,7 @@
 
 .messageActionWrapper {
   grid-area: messageAction;
-  margin: 0 var(--messageBubble-message_action_gap);
+  width: var(--zd_size78) ;
 }
 
 .messageBoxFooterWrapper {
@@ -66,9 +66,19 @@
 .directionIn .messageContainer {
   grid-template-columns: auto 1fr;
   grid-template-areas: 'messageBox messageAction';
+  margin-inline-end: 78px;
+}
+
+.isHovered.directionIn .messageContainer{
+  margin-inline-end: 0;
 }
 
 .directionOut .messageContainer {
   grid-template-columns: 1fr auto;
   grid-template-areas: 'messageAction messageBox';
+  margin-inline-start: 78px;
 }
+
+.isHovered.directionOut .messageContainer{
+  margin-inline-start: 0;
+}

package/es/MessageBubble/css/cssJSLogic.js

@@ -4,7 +4,8 @@ import getMessageDirectionType from '@zohoim/chat-components-utils/es/getMessage
 export default function cssJSLogic(props, style) {
   const {
     isActive,
-    direction
+    direction,
+    isRenderMessageActions
   } = props;
   const {
     isIncoming,
@@ -18,7 +19,8 @@ export default function cssJSLogic(props, style) {
     [style.messageBubble]: true,
     [style.directionIn]: isIncoming,
     [style.directionOut]: isOutgoing,
-    [style.active]: isActive
+    [style.active]: isActive,
+    [style.isHovered]: isRenderMessageActions
   });
   return {
     bubbleClass

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/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,13 +49,25 @@ export default function ReplyBubble(props) {
   const iconStyle = useMemo(() => ({
     $icon: newStyle.attachmentIcon
   }), [newStyle.attachmentIcon]);
-  const renderMessage = useCallback( // eslint-disable-next-line no-confusing-arrow
-  () => // eslint-disable-next-line react/no-danger, @zohodesk/zsecurity/no-unsecure-html
-  message ? /*#__PURE__*/React.createElement("span", {
-    dangerouslySetInnerHTML: {
-      __html: message
+  const renderMessage = useCallback(() => {
+    if (locationUrl) {
+      return /*#__PURE__*/React.createElement(LocationBubble, {
+        isFailed: isFailed,
+        locationUrl: locationUrl
+      });
     }
-  }) : null, [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", {
@@ -66,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

@@ -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,17 +22,25 @@ 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

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

@@ -4,12 +4,18 @@
   border: 1px solid var(--imlib_chat_components_replyBubbleContent_border_color);
   border-radius: 3px;
   margin: var(--zd_size5) 0 ;
+  cursor: pointer;
 }[dir=ltr] .replyBubbleContent {
   padding: var(--zd_size10) var(--zd_size10) var(--zd_size10) var(--zd_size20) ;
 }[dir=rtl] .replyBubbleContent {
   padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size10) ;
 }
 
+.failedReplyBubbleContent{
+  background-color: var(--imlib_chat_components_replyBubbleContent_bg_color_failed);
+  border-color: var(--imlib_chat_components_replyBubbleContent_border_color_failed);
+}
+
 .replyBubbleContent::after {
   content: '';
   width: var(--zd_size2) ;
@@ -29,11 +35,20 @@
   right: var(--zd_size10) ;
 }
 
+.failedReplyBubbleContent::after{
+  background-color: var(--imlib_chat_components_replyBubbleContent_line_color_failed);
+}
+
 .name {
-  color: var(--imlib_chat_components_replyBubbleContent_color);
+  color: var(--imlib_chat_components_replyBubbleContent_sender_color);
   font-size: var(--zd_font_size15) ;
   line-height: 1.5;
   composes: dotted from "../../css/common.module.css";
+  font-family: var(--zd_semibold);
+}
+
+.failedReplyBubbleContent .name{
+  color: var(--imlib_chat_components_replyBubbleContent_sender_color_failed);
 }
 
 [dir=ltr] .iconWrapper {
@@ -45,13 +60,16 @@
 }
 
 .messageWrapper {
-  color: var(--imlib_chat_components_replyBubbleContent_color);
+  color: var(--imlib_chat_components_replyBubbleContent_content_color);
   font-size: var(--zd_font_size13) ;
   line-height: 1.5;
-  max-height: var(--zd_size40) ;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   word-break: break-word;
   overflow: hidden;
 }
+
+.failedReplyBubbleContent .messageWrapper{ 
+  color: var(--imlib_chat_components_replyBubbleContent_content_color_failed);
+}

package/es/ReplyBubbleContent/css/cssJSLogic.js

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

package/es/ReplyBubbleContent/props/propTypes.js

@@ -4,6 +4,7 @@ const replyBubbleContentPropTypes = {
   renderIcon: PropTypes.func.isRequired,
   renderMessage: PropTypes.func.isRequired,
   senderName: PropTypes.string.isRequired,
-  customStyle: PropTypes.object
+  customStyle: PropTypes.object,
+  isFailed: PropTypes.bool
 };
 export default replyBubbleContentPropTypes;

package/es/ReplyBubbleHeader/ReplyBubbleHeader.js

@@ -19,19 +19,32 @@ import ReplyIcon from '@zohodesk/icon/es/general/Reply';
 /** ** Methods *** */
 
 import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
 export default function ReplyBubbleHeader(props) {
   const {
     customStyle,
     replyText,
-    time,
-    renderCustomReplyIcon
+    dateTimeDetails,
+    renderCustomReplyIcon,
+    isFailed
   } = props;
+  const {
+    displayDateTime,
+    tooltip
+  } = dateTimeDetails;
   /* External CSS Customization */
 
   const newStyle = useMergeStyle(style, customStyle);
   const iconStyle = useMemo(() => ({
     base: newStyle.replyIcon
   }), [newStyle.replyIcon]);
+  /* css classnames added based on logic */
+
+  const {
+    replyBubbleHeaderClass
+  } = cssJSLogic({
+    isFailed
+  }, newStyle);
   const renderIcon = useCallback(() => {
     const customIcon = renderHandler(renderCustomReplyIcon)();
     return customIcon || /*#__PURE__*/React.createElement(ReplyIcon, {
@@ -40,13 +53,15 @@ export default function ReplyBubbleHeader(props) {
   }, [iconStyle, renderCustomReplyIcon]);
   return /*#__PURE__*/React.createElement(Container, {
     align: "vertical",
-    alignBox: "row"
+    alignBox: "row",
+    className: replyBubbleHeaderClass
   }, renderIcon(), /*#__PURE__*/React.createElement(Box, {
     className: newStyle.replyText,
     flexible: true
   }, replyText), /*#__PURE__*/React.createElement(Box, {
-    className: newStyle.time
-  }, time));
+    className: newStyle.time,
+    "data-title": tooltip
+  }, displayDateTime));
 }
 ReplyBubbleHeader.propTypes = replyBubbleHeaderPropTypes;
 ReplyBubbleHeader.defaultProps = replyBubbleHeaderDefaultProps;

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

@@ -11,6 +11,7 @@
 
 .replyText {
   font-size: var(--zd_font_size14) ;
+  color: var(--imlib_chat_components_replyBubbleHeader_text_color);
 }
 
 [dir=ltr] .replyText {
@@ -21,6 +22,10 @@
   margin-left: var(--zd_size5) ;
 }
 
+.failedReplyBubbleHeader .replyText{
+  color: var(--imlib_chat_components_replyBubbleHeader_text_color_failed);
+}
+
 .replyText,
 .time{
   composes: dotted from "../../css/common.module.css";
@@ -28,4 +33,11 @@
 
 .time{
   max-width: 40% ;
+  font-size: var(--zd_font_size11) ;
+  letter-spacing: .4px;
+  color: var(--imlib_chat_components_replyBubbleHeader_time_color);
+}
+
+.failedReplyBubbleHeader .time{
+  color: var(--imlib_chat_components_replyBubbleHeader_time_color_failed);
 }

package/es/ReplyBubbleHeader/css/cssJSLogic.js

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

package/es/ReplyBubbleHeader/props/defaultProps.js

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

package/es/ReplyBubbleHeader/props/propTypes.js

@@ -3,7 +3,11 @@ import PropTypes from 'prop-types';
 const replyBubbleHeaderPropTypes = {
   replyText: PropTypes.string.isRequired,
   customStyle: PropTypes.object,
-  time: PropTypes.string,
-  renderCustomReplyIcon: PropTypes.func
+  dateTimeDetails: PropTypes.shape({
+    displayDateTime: PropTypes.string,
+    tooltip: PropTypes.string
+  }),
+  renderCustomReplyIcon: PropTypes.func,
+  isFailed: PropTypes.bool
 };
 export default replyBubbleHeaderPropTypes;

package/es/TextBubble/TextBubble.js

@@ -10,25 +10,37 @@ import textBubblePropTypes from './props/propTypes';
 /** ** Styles *** */
 
 import style from './css/TextBubble.module.css';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
 export default function TextBubble(props) {
   const {
     customStyle,
     moreText,
     message,
-    onClickMore
+    onClickMore,
+    isFailed
   } = props;
   /* External CSS Customization */
 
   const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+
+  const {
+    textBubbleClass,
+    moreTextClass
+  } = cssJSLogic({
+    isFailed
+  }, newStyle);
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: newStyle.textBubble // eslint-disable-next-line react/no-danger, @zohodesk/zsecurity/no-unsecure-html
+    className: textBubbleClass // eslint-disable-next-line react/no-danger, @zohodesk/zsecurity/no-unsecure-html
     ,
     dangerouslySetInnerHTML: {
       // __html: HTMLPurifier.sanitize(message)
       __html: message
     }
   }), moreText ? /*#__PURE__*/React.createElement("div", {
-    className: newStyle.moreText,
+    className: moreTextClass,
     onClick: onClickMore
   }, moreText) : null);
 }

package/es/TextBubble/css/TextBubble.module.css

@@ -1,5 +1,10 @@
 .textBubble {
   /* Use this class name for css customisation */
+  color: var(--imlib_chat_components_textBubble_text_color);
+}
+
+.failedTextBubble{
+  color: var(--imlib_chat_components_textBubble_text_color_failed);
 }
 
 .moreText {
@@ -9,6 +14,10 @@
   cursor: pointer;
 }
 
+.failedMoreText{
+  color: var(--imlib_chat_components_textBubble_see_more_color_failed);
+}
+
 .textBubble a {
   color: var(--imlib_chat_components_textBubble_url_color);
   word-break: break-word;
@@ -18,3 +27,7 @@
   text-decoration: underline !important;
   /* !important for Desk css overwrite */
 }
+
+.failedTextBubble a{
+  color: var(--imlib_chat_components_textBubble_url_color_failed);
+}