@zohoim/chat-components 0.0.14 → 0.0.16

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,14 +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;
-  overflow: hidden;
-  white-space: nowrap;
-  word-wrap: normal;
-  text-overflow: ellipsis;
+  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 {
@@ -48,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, {
@@ -39,14 +52,16 @@ export default function ReplyBubbleHeader(props) {
     });
   }, [iconStyle, renderCustomReplyIcon]);
   return /*#__PURE__*/React.createElement(Container, {
-    alignBox: "row"
-  }, /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, /*#__PURE__*/React.createElement(Container, {
-    alignBox: "row"
+    align: "vertical",
+    alignBox: "row",
+    className: replyBubbleHeaderClass
   }, renderIcon(), /*#__PURE__*/React.createElement(Box, {
-    className: newStyle.replyText
-  }, replyText))), /*#__PURE__*/React.createElement("div", null, time));
+    className: newStyle.replyText,
+    flexible: true
+  }, replyText), /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.time,
+    "data-title": tooltip
+  }, displayDateTime));
 }
 ReplyBubbleHeader.propTypes = replyBubbleHeaderPropTypes;
 ReplyBubbleHeader.defaultProps = replyBubbleHeaderDefaultProps;

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

@@ -1,12 +1,43 @@
 .replyIcon {
-  width: var(--zd_size20) ;
-  height: var(--zd_size20) ;
+  display: flex;
+  flex-shrink: 0;
+  width: var(--zd_size20)  !important;
+  height: var(--zd_size20)  !important;
+}[dir=ltr] .replyIcon {
+  margin-right: var(--zd_size5) ;
+}[dir=rtl] .replyIcon {
+  margin-left: var(--zd_size5) ;
 }
 
 .replyText {
-  max-width: var(--zd_size100) ;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   font-size: var(--zd_font_size14) ;
+  color: var(--imlib_chat_components_replyBubbleHeader_text_color);
 }
+
+[dir=ltr] .replyText {
+  margin-right: var(--zd_size5) ;
+}
+
+[dir=rtl] .replyText {
+  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";
+}
+
+.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

@@ -1,5 +1,5 @@
 /** ** Libraries *** */
-import React from 'react';
+import React, { Fragment } from 'react';
 /** ** Hooks *** */
 
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
@@ -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);
-  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
-    className: newStyle.textBubble // eslint-disable-next-line react/no-danger, @zohodesk/zsecurity/no-unsecure-html
+  /* css classnames added based on logic */
+
+  const {
+    textBubbleClass,
+    moreTextClass
+  } = cssJSLogic({
+    isFailed
+  }, newStyle);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+    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,10 +14,20 @@
   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;
 }
 
 .textBubble a:hover {
-  text-decoration: underline;
+  text-decoration: underline !important;
+  /* !important for Desk css overwrite */
 }
+
+.failedTextBubble a{
+  color: var(--imlib_chat_components_textBubble_url_color_failed);
+}

package/es/TextBubble/css/cssJSLogic.js

@@ -0,0 +1,18 @@
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const {
+    isFailed
+  } = props;
+  const textBubbleClass = compileClassNames({
+    [style.textBubble]: true,
+    [style.failedTextBubble]: isFailed
+  });
+  const moreTextClass = compileClassNames({
+    [style.moreText]: true,
+    [style.failedMoreText]: isFailed
+  });
+  return {
+    textBubbleClass,
+    moreTextClass
+  };
+}

package/es/TextBubble/props/propTypes.js

@@ -4,6 +4,7 @@ const textBubblePropTypes = {
   message: PropTypes.string.isRequired,
   customStyle: PropTypes.object,
   moreText: PropTypes.string,
-  onClickMore: PropTypes.func
+  onClickMore: PropTypes.func,
+  isFailed: PropTypes.bool
 };
 export default textBubblePropTypes;

package/es/Theme/ThemeWrapper.js

@@ -68,11 +68,11 @@ export default function ThemeWrapper(props) {
   const renderStyle = useCallback(() => /*#__PURE__*/React.createElement("style", {
     id: "zoho-im-variables"
   }, `${selector}{${customizedVariables}}`), [selector, customizedVariables]);
-  const renderAssets = useCallback(() => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(React.Fragment, null, needThemeAssets ? /*#__PURE__*/React.createElement(ThemeAssets, null) : null), /*#__PURE__*/React.createElement(React.Fragment, null, needTooltip ? /*#__PURE__*/React.createElement(TooltipWrapper, {
+  const renderAssets = useCallback(() => /*#__PURE__*/React.createElement(React.Fragment, null, needThemeAssets ? /*#__PURE__*/React.createElement(ThemeAssets, null) : null, needTooltip ? /*#__PURE__*/React.createElement(TooltipWrapper, {
     containerRef: containerRef.current,
     customStyle: tooltipCustomStyle,
     getContainerRef: getContainerRef
-  }) : null)), [getContainerRef, needTooltip, needThemeAssets, tooltipCustomStyle]);
+  }) : null), [getContainerRef, needTooltip, needThemeAssets, tooltipCustomStyle]);
   return /*#__PURE__*/React.createElement("div", _extends({
     id: styleTagId
   }, wrapperDivProps, {

package/es/Theme/themeVariables/commonThemeColorVariable.js

@@ -7,7 +7,6 @@ export const imIntegrationIcon = {
   line_color: '#01b901',
   twillio_color: '#f22f46',
   instagram_color: 'red',
-  asap_color: '#0a73eb' // twitter_color: 'red'
-
+  asap_color: '#0a73eb'
 };
 export const messagetextColor = '#e2e4e6';

package/es/Theme/themeVariables/dark/blueTheme.js

@@ -1,68 +1,125 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue } from './commonColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
 import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
-    messageBubble: {
-      active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: '#5a616f'
-    },
-    messageBox: {
-      incoming_bg_color: incomingBubbleBgColor,
-      outgoing_bg_color: '#2c3b4d',
-      bg_color: '#f1f7fe',
-      failed_bg_color: '#362734',
-      text_color: messagetextColor,
-      failed_text_color: '#000'
-    },
+    // ActionIcon: {},
     actionIconWrapper: {
       color: actionIconWrapperColor,
       bg_color: '#2c3b4d',
       border_color: '#3f536b'
     },
-    imIntegrationIcon,
-    messageStatus: {
-      send_color: messageStatusSendColor,
-      read_color: '#479dff',
-      failed_color: messageStatusFailedColor
+    attachmentBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
     },
     attachmentBubbleInfo: {
       fileName_color: '#e2e4e6',
-      fileSize_color: '#788190'
+      fileName_color_failed: failedColor,
+      fileSize_color: '#788190',
+      fileSize_color_failed: failedColor
     },
-    attachmentBubble: {
-      bg_color: '#232b38',
-      border_color: '#2d3748'
-    },
-    replyBubbleContent: {
+    // AttachmentIcon: {},
+    // Audio: {},
+    // AudioBubble: {},
+    articleBubble: {
       bg_color: '#232b38',
-      color: '#e2e4e6',
+      bg_color_failed: failedBg,
       border_color: '#2d3748',
-      line_color: '#cddbf2'
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#828994'
+    },
+    // IMInfoBubble: {},
+    imIntegrationIcon,
+    // IMMessage: {},
+    // IMMessageContent: {},
+    imMessageMeta: {
+      time_color: '#a8b0bd'
+    },
+    imPermaLink: {
+      url_color: '#479dff'
     },
+    // IMReplyBubble: {},
+    // IMTextBubble: {},
     imageBubble: {
-      bg_color: '#232b38'
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor
     },
+    // IMReplyBubble: {},
+    // InfoBubble: {},
+    // LazyLoadImage: {},
     locationBubble: {
       bg_color: '#232b38',
-      color: primaryBlue,
-      border_color: '#2d3748'
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      url_color: primaryBlue,
+      url_color_failed: failedUrlColor
     },
-    articleBubble: {
+    // MediaBubbleWrapper: {},
+    // Message: {},
+    // MessageAction: {},
+    // MessageActions: {},
+    // MessageActionsMore: {},
+    // MessageActionsWrapper: {},
+    // MessageAvatar: {},
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#2c3b4d',
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor,
+      failed_text_color: '#000'
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#479dff',
+      failed_color: messageStatusFailedColor
+    },
+    // MoreActionItem: {},
+    // ReplyBubble: {},
+    replyBubbleContent: {
       bg_color: '#232b38',
-      color: '#e2e4e6',
-      border_color: '#2d3748'
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      line_color: '#cddbf2',
+      line_color_failed: failedLine,
+      sender_color: '#e2e4e6',
+      sender_color_failed: failedColor,
+      content_color: '#e2e4e6',
+      content_color_failed: failedColor
+    },
+    replyBubbleHeader: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      time_color: '#828994',
+      time_color_failed: failedColor
     },
     textBubble: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
       see_more_color: primaryBlue,
-      url_color: primaryBlue
-    },
-    imTicketLink: {
-      color: '#479dff'
-    },
-    imMessageMeta: {
-      timeColor: '#a8b0bd'
-    }
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryBlue,
+      url_color_failed: failedUrlColor
+    } // Video: {},
+    // VideoBubble: {}
+
   }
 };

package/es/Theme/themeVariables/dark/commonColorVariable.js

@@ -7,4 +7,10 @@ export const primaryBlue = '#479dff';
 export const primaryGreen = '#45a159';
 export const primaryOrange = '#ff801f';
 export const primaryRed = '#e94f4f';
-export const primaryYellow = '#d79835';
+export const primaryYellow = '#d79835';
+export const failedBgWrapper = '#f4b5bc';
+export const failedBg = '#f6dcdf';
+export const failedBdr = '#eb9ea7';
+export const failedLine = '#eb9ea7';
+export const failedColor = '#000';
+export const failedUrlColor = '#0a73eb';