@zohoim/chat-components 0.0.15 → 0.0.17

package/es/ActionIcon/ActionIcon.js

@@ -38,6 +38,7 @@ export default function ActionIcon(props) {
     customStyle,
     customProps,
     onClick,
+    onMouseEnter,
     id,
     title,
     isDisabled,
@@ -70,6 +71,7 @@ export default function ActionIcon(props) {
     id: id,
     isDisabled: isDisabled,
     onClick: onClick,
+    onMouseEnter: onMouseEnter,
     renderIcon: renderIcon,
     title: title
   }, actionIconWrapperProps));

package/es/ActionIconWrapper/ActionIconWrapper.js

@@ -20,14 +20,17 @@ export default function ActionIconWrapper(props) {
     renderIcon,
     customStyle,
     onClick: propOnClick,
+    onMouseEnter: propOnMouseEnter,
     id,
     title,
     isDisabled
   } = props;
   const {
-    onClick
+    onClick,
+    onMouseEnter
   } = useActionIconWrapper({
     onClick: propOnClick,
+    onMouseEnter: propOnMouseEnter,
     id,
     isDisabled
   });
@@ -49,7 +52,8 @@ export default function ActionIconWrapper(props) {
   return icon ? /*#__PURE__*/React.createElement("div", {
     className: actionIconWrapperClass,
     "data-title": title,
-    onClick: onClick
+    onClick: onClick,
+    onMouseEnter: onMouseEnter
   }, icon) : null;
 }
 ActionIconWrapper.propTypes = actionIconWrapperPropTypes;

package/es/ActionIconWrapper/props/propTypes.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 const actionIconWrapperPropTypes = {
   id: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
+  onMouseEnter: PropTypes.func,
   renderIcon: PropTypes.func.isRequired,
   customStyle: PropTypes.object,
   isDisabled: PropTypes.bool,

package/es/AttachmentBubble/AttachmentBubble.js

@@ -18,41 +18,57 @@ import style from './css/AttachmentBubble.module.css';
 import AttachmentBubbleInfo from '../AttachmentBubbleInfo/AttachmentBubbleInfo';
 import AttachmentIcon from '../AttachmentIcon/AttachmentIcon';
 import { Container, Box } from '@zohodesk/components/es/Layout';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
 export default function AttachmentBubble(props) {
   const {
     customStyle,
     customProps,
-    attachmentDetails
+    attachmentDetails,
+    isFailed
   } = props;
   const {
     attachmentBubbleInfoProps,
     attachmentIconProps
   } = customProps;
-  /* External CSS Customization */
-
-  const newStyle = useMergeStyle(style, customStyle);
   const {
     formattedFileSize: fileSize,
     fileName,
-    fileFormat
+    fileFormat,
+    mediaType
   } = useAttachmentBubble({
     attachmentDetails
   });
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+
+  const {
+    attachmentBubbleClass
+  } = cssJSLogic({
+    isFailed,
+    fileFormat
+  }, newStyle);
   return /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
-    className: newStyle.attachmentBubble,
+    className: attachmentBubbleClass,
     isCover: false
   }, /*#__PURE__*/React.createElement(Box, {
     className: newStyle.attachmentBubbleIcon
   }, /*#__PURE__*/React.createElement(AttachmentIcon, _extends({
-    fileFormat: fileFormat
+    fileFormat: fileFormat,
+    mediaType: mediaType
   }, attachmentIconProps))), /*#__PURE__*/React.createElement(Box, {
     className: newStyle.attachmentBubbleContent,
     flexible: true
   }, /*#__PURE__*/React.createElement(AttachmentBubbleInfo, _extends({
     fileName: fileName,
     fileSize: fileSize
-  }, attachmentBubbleInfoProps))));
+  }, attachmentBubbleInfoProps, {
+    isFailed: isFailed
+  }))));
 }
 AttachmentBubble.propTypes = attachmentBubblePropTypes;
 AttachmentBubble.defaultProps = attachmentBubbleDefaultProps;

package/es/AttachmentBubble/css/AttachmentBubble.module.css

@@ -5,6 +5,15 @@
   border: 1px solid var(--imlib_chat_components_attachmentBubble_border_color);
 }
 
+.failedAttachmentBubble{
+  background-color: var(--imlib_chat_components_attachmentBubble_bg_color_failed);
+  border-color: var(--imlib_chat_components_attachmentBubble_border_color_failed);
+}
+
+.attachmentBubbleCursor {
+  cursor: pointer;
+}
+
 .attachmentBubbleIcon {
   width: var(--zd_size60) ;
   display: flex;
@@ -21,6 +30,11 @@
   border-left: 1px solid    var(--imlib_chat_components_attachmentBubble_border_color);
 }
 
+.failedAttachmentBubble .attachmentBubbleIcon{
+  border-color: var(--imlib_chat_components_attachmentBubble_border_color_failed);
+}
+
+
 .attachmentBubbleIcon, .attachmentBubbleContent {
   padding: var(--zd_size10) ;
-}
+}

package/es/AttachmentBubble/css/cssJSLogic.js

@@ -0,0 +1,15 @@
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const {
+    isFailed,
+    fileFormat
+  } = props;
+  const attachmentBubbleClass = compileClassNames({
+    [style.attachmentBubble]: true,
+    [style.failedAttachmentBubble]: isFailed,
+    [style.attachmentBubbleCursor]: fileFormat === 'pdf'
+  });
+  return {
+    attachmentBubbleClass
+  };
+}

package/es/AttachmentBubble/props/propTypes.js

@@ -10,6 +10,7 @@ const attachmentBubblePropTypes = {
     attachmentBubbleInfoProps: PropTypes.object,
     attachmentIconProps: PropTypes.object
   }),
-  customStyle: PropTypes.object
+  customStyle: PropTypes.object,
+  isFailed: PropTypes.bool
 };
 export default attachmentBubblePropTypes;

package/es/AttachmentBubbleInfo/AttachmentBubbleInfo.js

@@ -13,17 +13,28 @@ import { Container, Box } from '@zohodesk/components/es/Layout';
 /** ** Styles *** */
 
 import style from './css/AttachmentBubbleInfo.module.css';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
 export default function AttachmentBubbleInfo(props) {
   const {
     customStyle,
     fileName,
-    fileSize
+    fileSize,
+    isFailed
   } = props;
   /* External css customization */
 
   const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+
+  const {
+    attachmentBubbleInfoClass
+  } = cssJSLogic({
+    isFailed
+  }, newStyle);
   return /*#__PURE__*/React.createElement(Container, {
-    className: newStyle.attachmentBubbleInfo,
+    className: attachmentBubbleInfoClass,
     isCover: false
   }, /*#__PURE__*/React.createElement(Box, {
     className: newStyle.fileName

package/es/AttachmentBubbleInfo/css/AttachmentBubbleInfo.module.css

@@ -12,12 +12,20 @@
   margin-bottom: var(--zd_size5) ;
 }
 
+.failedAttachmentBubbleInfo .fileName{
+  color: var(--imlib_chat_components_attachmentBubbleInfo_fileName_color_failed);
+}
+
 .fileSize {
   composes: varClass;
   font-size: var(--attachmentBubbleInfo-fileSize_font_size);
   color: var(--imlib_chat_components_attachmentBubbleInfo_fileSize_color);
 }
 
+.failedAttachmentBubbleInfo .fileSize{
+  color: var(--imlib_chat_components_attachmentBubbleInfo_fileSize_color_failed);
+}
+
 .fileName,
 .fileSize {
   composes: dotted from "../../css/common.module.css";
@@ -27,3 +35,4 @@
   width: 100% ;
   /* Use this class name for css customization */
 }
+

package/es/AttachmentBubbleInfo/css/cssJSLogic.js

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

package/es/AttachmentBubbleInfo/props/propTypes.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 const attachmentBubbleInfoPropTypes = {
   fileName: PropTypes.string.isRequired,
   fileSize: PropTypes.string.isRequired,
-  customStyle: PropTypes.object
+  customStyle: PropTypes.object,
+  isFailed: PropTypes.bool
 };
 export default attachmentBubbleInfoPropTypes;

package/es/AttachmentIcon/AttachmentIcon.js

@@ -18,6 +18,7 @@ export default function AttachmentIcon(props) {
   const {
     customStyle,
     fileFormat,
+    mediaType,
     renderCustomIcon
   } = props;
   /* External CSS Customization */
@@ -36,7 +37,8 @@ export default function AttachmentIcon(props) {
   const {
     IconComponent
   } = getAttachmentIconComponent({
-    fileFormat
+    fileFormat,
+    mediaType
   });
   return IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
     customStyle: iconCustomStyle

package/es/AttachmentIcon/css/AttachmentIcon.module.css

@@ -1,4 +1,4 @@
 .icon {
-  width: var(--zd_size20) ;
-  height: var(--zd_size20) ;
+  width: var(--zd_size20)  !important;
+  height: var(--zd_size20)  !important;
 }

package/es/AttachmentIcon/props/propTypes.js

@@ -3,8 +3,14 @@ import PropTypes from 'prop-types';
 /** ** Constants *** */
 
 import attachmentFileTypes from '@zohoim/chat-components-utils/es/constants/attachmentFileTypes';
+const {
+  AUDIO,
+  VIDEO,
+  IMAGE
+} = attachmentFileTypes;
 const attachmentIconPropTypes = {
   fileFormat: PropTypes.oneOf(Object.values(attachmentFileTypes)).isRequired,
+  mediaType: PropTypes.oneOf([AUDIO, VIDEO, IMAGE]).isRequired,
   customStyle: PropTypes.object,
   renderCustomIcon: PropTypes.func
 };

package/es/AttachmentIcon/utils/getAttachmentIconComponent.js

@@ -3,7 +3,7 @@ import AudioIcon from '../../icons/iconSrc/attachments/Audio';
 import CodeIcon from '../../icons/iconSrc/attachments/Code';
 import ImageIcon from '../../icons/iconSrc/attachments/Image';
 import PdfIcon from '../../icons/iconSrc/attachments/Pdf';
-import TextIcon from '../../icons/iconSrc/attachments/Txt';
+import TextIcon from '../../icons/iconSrc/attachments/Text';
 import UnknownIcon from '../../icons/iconSrc/attachments/Unknown';
 import VideoIcon from '../../icons/iconSrc/attachments/Video';
 import ZipIcon from '../../icons/iconSrc/attachments/Zip';
@@ -32,7 +32,8 @@ const {
 } = attachmentFileTypes;
 export default function getAttachmentIconComponent(_ref) {
   let {
-    fileFormat
+    fileFormat,
+    mediaType
   } = _ref;
   const iconMapping = {
     [SVG]: CodeIcon,
@@ -54,7 +55,7 @@ export default function getAttachmentIconComponent(_ref) {
     [ZIP]: ZipIcon,
     [UNDEFINED]: UnknownIcon
   };
-  const IconComponent = iconMapping[fileFormat] || iconMapping[UNDEFINED];
+  const IconComponent = attachmentFileTypes[mediaType] ? iconMapping[attachmentFileTypes[mediaType]] : iconMapping[fileFormat] || iconMapping[UNDEFINED];
   return {
     IconComponent
   };

package/es/AudioBubble/AudioBubble.js

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

package/es/AudioBubble/props/propTypes.js

@@ -10,6 +10,7 @@ const audioBubblePropTypes = {
   customProps: PropTypes.shape({
     audioProps: PropTypes.object,
     mediaBubbleWrapperProps: PropTypes.object
-  })
+  }),
+  isFailed: PropTypes.bool
 };
 export default audioBubblePropTypes;

package/es/ImageBubble/ImageBubble.js

@@ -15,14 +15,25 @@ import style from './css/ImageBubble.module.css';
 
 import { Container } from '@zohodesk/components/es/Layout';
 import LazyLoadImage from '../LazyLoadImage/LazyLoadImage';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
 export default function ImageBubble(props) {
   const {
     customStyle,
-    imageDetails
+    imageDetails,
+    isFailed
   } = props;
   /* External CSS Customization */
 
   const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+
+  const {
+    imageBubbleClass
+  } = cssJSLogic({
+    isFailed
+  }, newStyle);
   const imageStyle = useMemo(() => ({
     lazyLoadImage: newStyle.image
   }), [newStyle.image]);
@@ -37,7 +48,7 @@ export default function ImageBubble(props) {
   });
   return /*#__PURE__*/React.createElement(Container, {
     align: "both",
-    className: newStyle.imageBubbleWrapper
+    className: imageBubbleClass
   }, /*#__PURE__*/React.createElement(LazyLoadImage, {
     alternate: alternate,
     customStyle: blurImageStyle,

package/es/ImageBubble/css/ImageBubble.module.css

@@ -11,9 +11,10 @@
 
 .imageBubbleWrapper {
   composes: varClass;
-  width: var(--imageBubble-wrapper_width);
+  width: var(--imageBubble-wrapper_width) !important;
   max-width: var(--imageBubble-wrapper_max_width);
-  height: var(--imageBubble-wrapper_height);
+  height: var(--imageBubble-wrapper_height) !important;
+  color: var(--imlib_chat_components_imageBubble_alt_text_color);
   overflow: hidden;
   position: relative;
   cursor: pointer;
@@ -21,6 +22,11 @@
   border-radius: 3px;
 }
 
+.failedImageBubble{
+  color: var(--imlib_chat_components_imageBubble_alt_text_color_failed);
+  background-color: var(--imlib_chat_components_imageBubble_bg_color_failed);
+}
+
 .blurImage {
   object-fit: cover;
   -webkit-filter: blur(90px);

package/es/ImageBubble/css/cssJSLogic.js

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

package/es/ImageBubble/props/propTypes.js

@@ -5,6 +5,7 @@ const imageBubblePropTypes = {
     url: PropTypes.string.isRequired,
     name: PropTypes.string
   }).isRequired,
-  customStyle: PropTypes.object
+  customStyle: PropTypes.object,
+  isFailed: PropTypes.bool
 };
 export default imageBubblePropTypes;

package/es/LocationBubble/LocationBubble.js

@@ -13,18 +13,29 @@ import { Container, Box } from '@zohodesk/components/es/Layout';
 /** ** Styles *** */
 
 import style from './css/LocationBubble.module.css';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
 export default function LocationBubble(props) {
   const {
     customStyle,
-    locationUrl
+    locationUrl,
+    isFailed
   } = props;
   /* External CSS Customization */
 
   const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+
+  const {
+    locationBubbleClass
+  } = cssJSLogic({
+    isFailed
+  }, newStyle);
   return /*#__PURE__*/React.createElement(Container, {
     align: "vertical",
     alignBox: "row",
-    className: newStyle.locationBubble,
+    className: locationBubbleClass,
     isCover: false
   }, /*#__PURE__*/React.createElement(Box, {
     className: newStyle.imageWrapper,

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

@@ -13,6 +13,11 @@
   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 {
   width: 100% ;
   height: 100% ;
@@ -33,5 +38,13 @@
 .textLink {
   display: block;
   composes: dotted from "../../css/common.module.css";
-  color: var(--imlib_chat_components_locationBubble_color);
+  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

@@ -25,7 +25,8 @@ export default function MediaBubbleWrapper(props) {
     customStyle,
     mediaDetails,
     customProps,
-    renderMedia
+    renderMedia,
+    isFailed
   } = props;
   const {
     attachmentBubbleInfoProps = dummyObject
@@ -52,7 +53,9 @@ export default function MediaBubbleWrapper(props) {
     customStyle: bubbleInfoCustomStyle,
     fileName: fileName,
     fileSize: fileSize
-  }, attachmentBubbleInfoProps)), mediaComponent);
+  }, attachmentBubbleInfoProps, {
+    isFailed: isFailed
+  })), mediaComponent);
 }
 MediaBubbleWrapper.propTypes = mediaBubbleWrapperPropTypes;
 MediaBubbleWrapper.defaultProps = mediaBubbleWrapperDefaultProps;

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

@@ -30,6 +30,7 @@ export default function MessageActions(props) {
     actions,
     defaultShowCount,
     onSelect,
+    onMouseEnter,
     renderSecondaryActions,
     customStyle,
     customProps
@@ -52,6 +53,16 @@ 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 () {
@@ -74,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 {

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,