@zohoim/chat-components 0.0.15 → 0.0.16

package/es/Theme/themeVariables/pureDark/orangeTheme.js

@@ -1,67 +1,124 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange } from './commonColorVariable';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, 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: outgoingBubbleBgColor,
-      bg_color: '#f1f7fe',
-      failed_bg_color: '#fcebeb',
-      text_color: messagetextColor
-    },
+    // ActionIcon: {},
     actionIconWrapper: {
       color: actionIconWrapperColor,
       bg_color: '#312821',
       border_color: '#4d3421'
     },
-    imIntegrationIcon,
-    messageStatus: {
-      send_color: messageStatusSendColor,
-      read_color: '#ff801f',
-      failed_color: messageStatusFailedColor
+    attachmentBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr
     },
     attachmentBubbleInfo: {
       fileName_color: '#e2e4e6',
-      fileSize_color: '#788190'
+      fileName_color_failed: failedColor,
+      fileSize_color: '#999',
+      fileSize_color_failed: failedColor
     },
-    attachmentBubble: {
+    // AttachmentIcon: {},
+    // Audio: {},
+    // AudioBubble: {},
+    articleBubble: {
       bg_color: '#212121',
-      border_color: '#161515'
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
     },
-    imPermaLink: {
-      color: '#ff801f'
+    imAutoMessageInfo: {
+      text_color: '#999'
     },
-    replyBubbleContent: {
-      bg_color: '#212121',
-      color: '#e2e4e6',
-      border_color: '#161515',
-      line_color: '#cddbf2'
+    // IMInfoBubble: {},
+    imIntegrationIcon,
+    // IMMessage: {},
+    // IMMessageContent: {},
+    imMessageMeta: {
+      time_color: '#999'
+    },
+    imPermaLink: {
+      url_color: '#ff801f'
     },
+    // IMReplyBubble: {},
+    // IMTextBubble: {},
     imageBubble: {
-      bg_color: '#212121'
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor
     },
+    // IMReplyBubble: {},
+    // InfoBubble: {},
+    // LazyLoadImage: {},
     locationBubble: {
       bg_color: '#212121',
-      color: primaryOrange,
-      border_color: '#161515'
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      url_color: primaryOrange,
+      url_color_failed: failedUrlColor
     },
-    articleBubble: {
+    // MediaBubbleWrapper: {},
+    // Message: {},
+    // MessageAction: {},
+    // MessageActions: {},
+    // MessageActionsMore: {},
+    // MessageActionsWrapper: {},
+    // MessageAvatar: {},
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#ff801f',
+      failed_color: messageStatusFailedColor
+    },
+    // MoreActionItem: {},
+    // ReplyBubble: {},
+    replyBubbleContent: {
       bg_color: '#212121',
-      color: '#e2e4e6',
-      border_color: '#161515'
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      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
     },
-    imMessageMeta: {
-      timeColor: '#999'
+    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: primaryOrange,
-      url_color: primaryOrange
-    }
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryOrange,
+      url_color_failed: failedUrlColor
+    } // Video: {},
+    // VideoBubble: {}
+
   }
 };

package/es/Theme/themeVariables/pureDark/redTheme.js

@@ -1,67 +1,124 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed } from './commonColorVariable';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, 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: outgoingBubbleBgColor,
-      bg_color: '#f1f7fe',
-      failed_bg_color: '#fcebeb',
-      text_color: messagetextColor
-    },
+    // ActionIcon: {},
     actionIconWrapper: {
       color: actionIconWrapperColor,
       bg_color: '#2f2424',
       border_color: '#492A29'
     },
-    imIntegrationIcon,
-    messageStatus: {
-      send_color: messageStatusSendColor,
-      read_color: '#e94f4f',
-      failed_color: messageStatusFailedColor
+    attachmentBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr
     },
     attachmentBubbleInfo: {
       fileName_color: '#e2e4e6',
-      fileSize_color: '#788190'
+      fileName_color_failed: failedColor,
+      fileSize_color: '#999',
+      fileSize_color_failed: failedColor
     },
-    attachmentBubble: {
+    // AttachmentIcon: {},
+    // Audio: {},
+    // AudioBubble: {},
+    articleBubble: {
       bg_color: '#212121',
-      border_color: '#161515'
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
     },
-    imPermaLink: {
-      color: '#e94f4f'
+    imAutoMessageInfo: {
+      text_color: '#999'
     },
-    replyBubbleContent: {
-      bg_color: '#212121',
-      color: '#e2e4e6',
-      border_color: '#161515',
-      line_color: '#cddbf2'
+    // IMInfoBubble: {},
+    imIntegrationIcon,
+    // IMMessage: {},
+    // IMMessageContent: {},
+    imMessageMeta: {
+      time_color: '#999'
+    },
+    imPermaLink: {
+      url_color: '#e94f4f'
     },
+    // IMReplyBubble: {},
+    // IMTextBubble: {},
     imageBubble: {
-      bg_color: '#212121'
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor
     },
+    // IMReplyBubble: {},
+    // InfoBubble: {},
+    // LazyLoadImage: {},
     locationBubble: {
       bg_color: '#212121',
-      color: primaryRed,
-      border_color: '#161515'
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      url_color: primaryRed,
+      url_color_failed: failedUrlColor
     },
-    articleBubble: {
+    // MediaBubbleWrapper: {},
+    // Message: {},
+    // MessageAction: {},
+    // MessageActions: {},
+    // MessageActionsMore: {},
+    // MessageActionsWrapper: {},
+    // MessageAvatar: {},
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#e94f4f',
+      failed_color: messageStatusFailedColor
+    },
+    // MoreActionItem: {},
+    // ReplyBubble: {},
+    replyBubbleContent: {
       bg_color: '#212121',
-      color: '#e2e4e6',
-      border_color: '#161515'
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      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
     },
-    imMessageMeta: {
-      timeColor: '#999'
+    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: primaryRed,
-      url_color: primaryRed
-    }
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryRed,
+      url_color_failed: failedUrlColor
+    } // Video: {},
+    // VideoBubble: {}
+
   }
 };

package/es/Theme/themeVariables/pureDark/yellowTheme.js

@@ -1,67 +1,124 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconWrapperColor, primaryYellow } from './commonColorVariable';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconWrapperColor, primaryYellow, 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: outgoingBubbleBgColor,
-      bg_color: '#f1f7fe',
-      failed_bg_color: '#362734',
-      text_color: messagetextColor
-    },
+    // ActionIcon: {},
     actionIconWrapper: {
       color: actionIconWrapperColor,
       bg_color: '#2e2922',
       border_color: '#453925'
     },
-    imIntegrationIcon,
-    messageStatus: {
-      send_color: messageStatusSendColor,
-      read_color: '#d79835',
-      failed_color: messageStatusFailedColor
+    attachmentBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr
     },
     attachmentBubbleInfo: {
       fileName_color: '#e2e4e6',
-      fileSize_color: '#788190'
+      fileName_color_failed: failedColor,
+      fileSize_color: '#999',
+      fileSize_color_failed: failedColor
     },
-    attachmentBubble: {
+    // AttachmentIcon: {},
+    // Audio: {},
+    // AudioBubble: {},
+    articleBubble: {
       bg_color: '#212121',
-      border_color: '#161515'
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
     },
-    imPermaLink: {
-      color: '#d79835'
+    imAutoMessageInfo: {
+      text_color: '#999'
     },
-    replyBubbleContent: {
-      bg_color: '#212121',
-      color: '#e2e4e6',
-      border_color: '#161515',
-      line_color: '#cddbf2'
+    // IMInfoBubble: {},
+    imIntegrationIcon,
+    // IMMessage: {},
+    // IMMessageContent: {},
+    imMessageMeta: {
+      time_color: '#999'
+    },
+    imPermaLink: {
+      url_color: '#d79835'
     },
+    // IMReplyBubble: {},
+    // IMTextBubble: {},
     imageBubble: {
-      bg_color: '#212121'
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor
     },
+    // IMReplyBubble: {},
+    // InfoBubble: {},
+    // LazyLoadImage: {},
     locationBubble: {
       bg_color: '#212121',
-      color: primaryYellow,
-      border_color: '#161515'
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      url_color: primaryYellow,
+      url_color_failed: failedUrlColor
     },
-    articleBubble: {
+    // MediaBubbleWrapper: {},
+    // Message: {},
+    // MessageAction: {},
+    // MessageActions: {},
+    // MessageActionsMore: {},
+    // MessageActionsWrapper: {},
+    // MessageAvatar: {},
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#d79835',
+      failed_color: messageStatusFailedColor
+    },
+    // MoreActionItem: {},
+    // ReplyBubble: {},
+    replyBubbleContent: {
       bg_color: '#212121',
-      color: '#e2e4e6',
-      border_color: '#161515'
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      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
     },
-    imMessageMeta: {
-      timeColor: '#999'
+    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: primaryYellow,
-      url_color: primaryYellow
-    }
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryYellow,
+      url_color_failed: failedUrlColor
+    } // Video: {},
+    // VideoBubble: {}
+
   }
 };

package/es/VideoBubble/VideoBubble.js

@@ -22,7 +22,8 @@ export default function VideoBubble(props) {
   const {
     customStyle,
     customProps,
-    videoDetails
+    videoDetails,
+    isFailed
   } = props;
   const {
     videoProps = dummyObject,
@@ -46,7 +47,9 @@ export default function VideoBubble(props) {
   return /*#__PURE__*/React.createElement(MediaBubbleWrapper, _extends({
     mediaDetails: videoDetails,
     renderMedia: renderMedia
-  }, mediaBubbleWrapperProps));
+  }, mediaBubbleWrapperProps, {
+    isFailed: isFailed
+  }));
 }
 VideoBubble.propTypes = videoBubblePropTypes;
 VideoBubble.defaultProps = videoBubbleDefaultProps;

package/es/VideoBubble/props/propTypes.js

@@ -11,6 +11,7 @@ const videoBubblePropTypes = {
     mediaBubbleWrapperProps: PropTypes.object,
     videoProps: PropTypes.object
   }),
-  customStyle: PropTypes.object
+  customStyle: PropTypes.object,
+  isFailed: PropTypes.bool
 };
 export default videoBubblePropTypes;

package/es/icons/iconSrc/attachments/Text.js

@@ -0,0 +1,47 @@
+/* eslint-disable */
+import React from 'react';
+import Icon from '@zohodesk/icon/es/Icon/Icon';
+export default function IconComponent(props) {
+  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
+    id: "Layer_1",
+    "data-name": "Layer 1",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 32.19 32.94"
+  }, " ", /*#__PURE__*/React.createElement("defs", null, " ", /*#__PURE__*/React.createElement("style", {
+    dangerouslySetInnerHTML: {
+      __html: `
+      .cls-1 {
+        fill: #c8cadb;
+        opacity: 0.5;
+      }
+
+      .cls-2 {
+        fill: #010101;
+      }
+    `
+    }
+  }), " "), " ", /*#__PURE__*/React.createElement("rect", {
+    className: "cls-1",
+    x: "5.35",
+    y: "6.1",
+    width: "26.84",
+    height: "26.84",
+    rx: "5"
+  }), " ", /*#__PURE__*/React.createElement("g", null, " ", /*#__PURE__*/React.createElement("path", {
+    className: "path-0",
+    d: "M21.67,20.88H14.39a1,1,0,1,0,0,2h7.28a1,1,0,0,0,0-2Z"
+  }), " ", /*#__PURE__*/React.createElement("path", {
+    className: "path-1",
+    d: "M9.15,20.31a1.57,1.57,0,1,0,1.57,1.57A1.57,1.57,0,0,0,9.15,20.31Z"
+  }), " ", /*#__PURE__*/React.createElement("path", {
+    className: "path-2",
+    d: "M21.67,13.54H14.39a1,1,0,0,0,0,2h7.28a1,1,0,0,0,0-2Z"
+  }), " ", /*#__PURE__*/React.createElement("path", {
+    className: "path-3",
+    d: "M9.15,13a1.57,1.57,0,1,0,1.57,1.57A1.57,1.57,0,0,0,9.15,13Z"
+  }), " ", /*#__PURE__*/React.createElement("path", {
+    className: "path-4",
+    d: "M29.75,10.13,21.12.34A1,1,0,0,0,20.37,0H4.11A4.11,4.11,0,0,0,0,4.11V25.88A4.12,4.12,0,0,0,4.11,30H25.89A4.12,4.12,0,0,0,30,25.88V10.79A1,1,0,0,0,29.75,10.13ZM25.89,28H4.11A2.12,2.12,0,0,1,2,25.88V4.11A2.12,2.12,0,0,1,4.11,2H19.77V7.94a3.5,3.5,0,0,0,3.5,3.5H28V25.88A2.12,2.12,0,0,1,25.89,28Z"
+  }), " "), " "));
+}
+IconComponent.propTypes = Icon.propTypes;

package/es/icons/iconSrc/attachments/index.js

@@ -2,7 +2,7 @@ export { default as Audio } from './Audio';
 export { default as Code } from './Code';
 export { default as Image } from './Image';
 export { default as Pdf } from './Pdf';
-export { default as Txt } from './Txt';
+export { default as Text } from './Text';
 export { default as Unknown } from './Unknown';
 export { default as Video } from './Video';
 export { default as Zip } from './Zip';

package/es/im/ArticleBubble/ArticleBubble.js

@@ -1,5 +1,5 @@
 /** ** Libraries *** */
-import React, { useMemo, Fragment } from 'react';
+import React, { useMemo } from 'react';
 /** ** Hooks *** */
 
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
@@ -17,12 +17,16 @@ import style from './css/ArticleBubble.module.css';
 /** ** Icons *** */
 
 import ArticleIcon from '../../icons/iconSrc/common/Article';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
 export default function ArticleBubble(props) {
   const {
     customStyle,
     info,
     articleDetails,
-    onClick: propOnClick
+    onClick: propOnClick,
+    isFailed
   } = props;
   const {
     title,
@@ -41,7 +45,16 @@ export default function ArticleBubble(props) {
   const iconCustomStyle = useMemo(() => ({
     base: newStyle.articleIcon
   }), [newStyle.articleIcon]);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Container, {
+  /* css classnames added based on logic */
+
+  const {
+    articleBubbleClass
+  } = cssJSLogic({
+    isFailed
+  }, newStyle);
+  return /*#__PURE__*/React.createElement(Box, {
+    className: articleBubbleClass
+  }, /*#__PURE__*/React.createElement(Container, {
     align: "vertical",
     alignBox: "row",
     isCover: false

package/es/im/ArticleBubble/css/ArticleBubble.module.css

@@ -1,22 +1,32 @@
 .articleWrapper {
   display: block;
-  /* margin: 4px 0 2px; */
   padding: var(--zd_size8) var(--zd_size10) ;
   background-color: var(--imlib_chat_components_articleBubble_bg_color);
   border-radius: 3px;
   cursor: pointer;
   border: 1px solid var(--imlib_chat_components_articleBubble_border_color);
+  margin-top: var(--zd_size4) ;
+}
+
+.failedArticleBubbleClass .articleWrapper{
+  background-color: var(--imlib_chat_components_articleBubble_bg_color_failed);
+  border-color: var(--imlib_chat_components_articleBubble_border_color_failed);
 }
 
 .title {
-  color: var(--imlib_chat_components_articleBubble_color);
+  color: var(--imlib_chat_components_articleBubble_title_color);
   font-size: var(--zd_font_size15) ;
   line-height: 1.5;
   composes: dotted from "../../css/common.module.css";
+  font-family: var(--zd_semibold);
+}
+
+.failedArticleBubbleClass .title{
+  color: var(--imlib_chat_components_articleBubble_title_color_failed);
 }
 
 .summary {
-  color: var(--imlib_chat_components_articleBubble_color);
+  color: var(--imlib_chat_components_articleBubble_summary_color);
   font-size: var(--zd_font_size13) ;
   line-height: 1.5;
   max-height: var(--zd_size40) ;
@@ -27,6 +37,10 @@
   overflow: hidden;
 }
 
+.failedArticleBubbleClass .summary{
+  color: var(--imlib_chat_components_articleBubble_summary_color_failed);
+}
+
 .articleIcon {
   display: flex;
   flex-shrink: 0;
@@ -46,6 +60,7 @@
 
 .content{
   composes: dotted from "../../css/common.module.css";
+  font-size: var(--zd_font_size13) ;
 }
 
 [dir=ltr] .content{