@zohoim/chat-components 0.0.14 → 0.0.16

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

@@ -11,6 +11,7 @@ import actionIconWrapperPropTypes from './props/propTypes';
 /** ** Methods *** */
 
 import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
 /** ** Styles *** */
 
 import style from './css/ActionIconWrapper.module.css';
@@ -19,29 +20,40 @@ 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
   });
   /* External CSS Customization */
 
   const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+
+  const {
+    actionIconWrapperClass
+  } = cssJSLogic({
+    isDisabled
+  }, newStyle);
   /* Render Icon */
 
   const icon = renderHandler(renderIcon)({
     id
   });
   return icon ? /*#__PURE__*/React.createElement("div", {
-    className: newStyle.actionIconWrapper,
+    className: actionIconWrapperClass,
     "data-title": title,
-    onClick: onClick
+    onClick: onClick,
+    onMouseEnter: onMouseEnter
   }, icon) : null;
 }
 ActionIconWrapper.propTypes = actionIconWrapperPropTypes;

package/es/ActionIconWrapper/css/ActionIconWrapper.module.css

@@ -25,3 +25,8 @@
   background-color: var(--imlib_chat_components_actionIconWrapper_bg_color);
   border-color: var(--imlib_chat_components_actionIconWrapper_border_color);
 }
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.4;
+}

package/es/ActionIconWrapper/css/cssJSLogic.js

@@ -0,0 +1,14 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const {
+    isDisabled
+  } = props;
+  const actionIconWrapperClass = compileClassNames({
+    [style.actionIconWrapper]: true,
+    [style.disabled]: isDisabled
+  });
+  return {
+    actionIconWrapperClass
+  };
+}

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,40 +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
-  }, /*#__PURE__*/React.createElement("div", {
+    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

@@ -1,9 +1,19 @@
 .attachmentBubble {
+  width: 100% ;
   background-color: var(--imlib_chat_components_attachmentBubble_bg_color);
   border-radius: 3px;
   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;
@@ -20,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

@@ -7,23 +7,38 @@ import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
 import attachmentBubbleInfoDefaultProps from './props/defaultProps';
 import attachmentBubbleInfoPropTypes from './props/propTypes';
+/** ** Components *** */
+
+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);
-  return /*#__PURE__*/React.createElement("div", {
-    className: newStyle.attachmentBubbleInfo
-  }, /*#__PURE__*/React.createElement("div", {
+  /* css classnames added based on logic */
+
+  const {
+    attachmentBubbleInfoClass
+  } = cssJSLogic({
+    isFailed
+  }, newStyle);
+  return /*#__PURE__*/React.createElement(Container, {
+    className: attachmentBubbleInfoClass,
+    isCover: false
+  }, /*#__PURE__*/React.createElement(Box, {
     className: newStyle.fileName
-  }, fileName), /*#__PURE__*/React.createElement("div", {
+  }, fileName), /*#__PURE__*/React.createElement(Box, {
     className: newStyle.fileSize
   }, fileSize));
 }

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

@@ -12,19 +12,27 @@
   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 {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  composes: dotted from "../../css/common.module.css";
 }
 
 .attachmentBubbleInfo {
+  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';
@@ -17,6 +17,9 @@ const {
   AUDIO,
   VIDEO,
   MP3,
+  MPEG,
+  VORBIS,
+  OGG,
   M4A,
   MP4,
   HTML,
@@ -29,26 +32,30 @@ const {
 } = attachmentFileTypes;
 export default function getAttachmentIconComponent(_ref) {
   let {
-    fileFormat
+    fileFormat,
+    mediaType
   } = _ref;
   const iconMapping = {
-    [SVG]: UnknownIcon,
+    [SVG]: CodeIcon,
     [IMAGE]: ImageIcon,
     [PDF]: PdfIcon,
     [AUDIO]: AudioIcon,
     [VIDEO]: VideoIcon,
     [MP3]: AudioIcon,
+    [MPEG]: AudioIcon,
+    [VORBIS]: AudioIcon,
+    [OGG]: AudioIcon,
     [M4A]: AudioIcon,
     [MP4]: VideoIcon,
     [HTML]: CodeIcon,
     [PSD]: UnknownIcon,
     [CSS]: CodeIcon,
     [TEXT]: TextIcon,
-    [PLAIN]: UnknownIcon,
+    [PLAIN]: TextIcon,
     [ZIP]: ZipIcon,
     [UNDEFINED]: UnknownIcon
   };
-  const IconComponent = iconMapping[fileFormat];
+  const IconComponent = attachmentFileTypes[mediaType] ? iconMapping[attachmentFileTypes[mediaType]] : iconMapping[fileFormat] || iconMapping[UNDEFINED];
   return {
     IconComponent
   };

package/es/AudioBubble/AudioBubble.js

@@ -2,38 +2,54 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 /** ** Libraries *** */
 import React, { useCallback } from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
 
 import audioBubbleDefaultProps from './props/defaultProps';
 import audioBubblePropTypes from './props/propTypes';
 import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+/** ** Styles *** */
+
+import style from './css/AudioBubble.module.css';
 /** ** Components *** */
 
+import { Box } from '@zohodesk/components/es/Layout';
 import MediaBubbleWrapper from '../MediaBubbleWrapper/MediaBubbleWrapper';
 import Audio from '../Audio/Audio';
 export default function AudioBubble(props) {
   const {
+    customStyle,
     audioDetails,
-    customProps
+    customProps,
+    isFailed
   } = props;
   const {
     audioProps = dummyObject,
     mediaBubbleWrapperProps = dummyObject
   } = customProps;
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
   const renderMedia = useCallback(_ref => {
     let {
       fileURL,
       fileType
     } = _ref;
-    return /*#__PURE__*/React.createElement(Audio, _extends({
+    return /*#__PURE__*/React.createElement(Box, {
+      className: newStyle.audioBubble
+    }, /*#__PURE__*/React.createElement(Audio, _extends({
       fileType: fileType,
       fileURL: fileURL
-    }, audioProps));
-  }, [audioProps]);
+    }, audioProps)));
+  }, [audioProps, newStyle.audioBubble]);
   return /*#__PURE__*/React.createElement(MediaBubbleWrapper, _extends({
     mediaDetails: audioDetails,
     renderMedia: renderMedia
-  }, mediaBubbleWrapperProps));
+  }, mediaBubbleWrapperProps, {
+    isFailed: isFailed
+  }));
 }
 AudioBubble.propTypes = audioBubblePropTypes;
 AudioBubble.defaultProps = audioBubbleDefaultProps;

package/es/AudioBubble/css/AudioBubble.module.css

@@ -0,0 +1,4 @@
+.audioBubble{
+    width: var(--zd_size360) ;
+    max-width: 100% ;
+}

package/es/AudioBubble/props/defaultProps.js

@@ -1,6 +1,7 @@
 /** ** Constants *** */
 import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const audioBubbleDefaultProps = {
+  customStyle: dummyObject,
   customProps: dummyObject
 };
 export default 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,30 @@ 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,
     shrink: true
@@ -32,7 +44,7 @@ export default function LocationBubble(props) {
     href: locationUrl,
     rel: "noreferrer noopener",
     target: "_blank"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Box, {
     className: newStyle.image
   }))), /*#__PURE__*/React.createElement(Box, {
     className: newStyle.textWrapper,