@zohoim/chat-components 0.0.19 → 0.0.20

package/es/ActionIcon/css/ActionIcon.module.css

@@ -1,9 +1,8 @@
 .varClass {
-  --actionIcon_icon_size: var(--zd_size15);
+  --actionIcon_icon_size: 15px;
 }
 
 .icon {
-  composes: varClass;
-  width: var(--actionIcon_icon_size);
-  height: var(--actionIcon_icon_size);
+  width: var(--zd_size15) ;
+  height: var(--zd_size15) ;
 }

package/es/AttachmentBubble/AttachmentBubble.js

@@ -26,7 +26,8 @@ export default function AttachmentBubble(props) {
     customStyle,
     customProps,
     attachmentDetails,
-    isFailed
+    isFailed,
+    onClick: propOnClick
   } = props;
   const {
     attachmentBubbleInfoProps,
@@ -36,9 +37,11 @@ export default function AttachmentBubble(props) {
     formattedFileSize: fileSize,
     fileName,
     fileFormat,
-    mediaType
+    mediaType,
+    onClick
   } = useAttachmentBubble({
-    attachmentDetails
+    attachmentDetails,
+    onClick: propOnClick
   });
   /* External CSS Customization */
 
@@ -48,13 +51,13 @@ export default function AttachmentBubble(props) {
   const {
     attachmentBubbleClass
   } = cssJSLogic({
-    isFailed,
-    fileFormat
+    isFailed
   }, newStyle);
   return /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     className: attachmentBubbleClass,
-    isCover: false
+    isCover: false,
+    onClick: onClick
   }, /*#__PURE__*/React.createElement(Box, {
     className: newStyle.attachmentBubbleIcon
   }, /*#__PURE__*/React.createElement(AttachmentIcon, _extends({

package/es/AttachmentBubble/css/cssJSLogic.js

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

package/es/AttachmentBubble/props/propTypes.js

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

package/es/AttachmentBubbleInfo/AttachmentBubbleInfo.js

@@ -37,7 +37,8 @@ export default function AttachmentBubbleInfo(props) {
     className: attachmentBubbleInfoClass,
     isCover: false
   }, /*#__PURE__*/React.createElement(Box, {
-    className: newStyle.fileName
+    className: newStyle.fileName,
+    "data-title": fileName
   }, fileName), /*#__PURE__*/React.createElement(Box, {
     className: newStyle.fileSize
   }, fileSize));

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

@@ -33,6 +33,7 @@
 
 .attachmentBubbleInfo {
   width: 100% ;
+  line-height: normal;
   /* Use this class name for css customization */
 }
 

package/es/ImageBubble/ImageBubble.js

@@ -22,7 +22,9 @@ export default function ImageBubble(props) {
   const {
     customStyle,
     imageDetails,
-    isFailed
+    isFailed,
+    isSending,
+    onClick: propOnClick
   } = props;
   /* External CSS Customization */
 
@@ -32,7 +34,8 @@ export default function ImageBubble(props) {
   const {
     imageBubbleClass
   } = cssJSLogic({
-    isFailed
+    isFailed,
+    isSending
   }, newStyle);
   const imageStyle = useMemo(() => ({
     lazyLoadImage: newStyle.image
@@ -42,13 +45,16 @@ export default function ImageBubble(props) {
   }), [newStyle.blurImage]);
   const {
     attachmentURL: src,
-    fileName: alternate
+    fileName: alternate,
+    onClick
   } = useAttachmentBubble({
-    attachmentDetails: imageDetails
+    attachmentDetails: imageDetails,
+    onClick: propOnClick
   });
   return /*#__PURE__*/React.createElement(Container, {
     align: "both",
-    className: imageBubbleClass
+    className: imageBubbleClass,
+    onClick: onClick
   }, /*#__PURE__*/React.createElement(LazyLoadImage, {
     alternate: alternate,
     customStyle: blurImageStyle,

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

@@ -20,11 +20,13 @@
   cursor: pointer;
   background-color: var(--imlib_chat_components_imageBubble_bg_color);
   border-radius: 3px;
+  border: 1px solid var(--imlib_chat_components_imageBubble_border_color);
 }
 
-.failedImageBubble{
+.failedImageBubble {
   color: var(--imlib_chat_components_imageBubble_alt_text_color_failed);
   background-color: var(--imlib_chat_components_imageBubble_bg_color_failed);
+  border-color: var(--imlib_chat_components_imageBubble_border_color_failed);
 }
 
 .blurImage {
@@ -54,3 +56,8 @@
   object-fit: contain;
   position: relative;
 }
+
+.sendingImageBubble {
+  opacity: 0.1;
+  cursor: default;
+}

package/es/ImageBubble/css/cssJSLogic.js

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

package/es/ImageBubble/props/propTypes.js

@@ -6,6 +6,8 @@ const imageBubblePropTypes = {
     name: PropTypes.string
   }).isRequired,
   customStyle: PropTypes.object,
-  isFailed: PropTypes.bool
+  isFailed: PropTypes.bool,
+  isSending: PropTypes.bool,
+  onClick: PropTypes.func
 };
 export default imageBubblePropTypes;

package/es/LocationBubble/LocationBubble.js

@@ -1,3 +1,7 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+/* eslint-disable @zohodesk/zsecurity/no-protocol-check */
+
 /** ** Libraries *** */
 import React from 'react';
 /** ** Hooks *** */
@@ -32,7 +36,12 @@ export default function LocationBubble(props) {
   } = cssJSLogic({
     isFailed
   }, newStyle);
-  return /*#__PURE__*/React.createElement(Container, {
+  return /*#__PURE__*/React.createElement("a", {
+    className: newStyle.container,
+    href: locationUrl,
+    rel: "noreferrer noopener",
+    target: "_blank"
+  }, /*#__PURE__*/React.createElement(Container, {
     align: "vertical",
     alignBox: "row",
     className: locationBubbleClass,
@@ -40,21 +49,12 @@ export default function LocationBubble(props) {
   }, /*#__PURE__*/React.createElement(Box, {
     className: newStyle.imageWrapper,
     shrink: true
-  }, /*#__PURE__*/React.createElement("a", {
-    href: locationUrl,
-    rel: "noreferrer noopener",
-    target: "_blank"
-  }, /*#__PURE__*/React.createElement(Box, {
-    className: newStyle.image
-  }))), /*#__PURE__*/React.createElement(Box, {
+  }), /*#__PURE__*/React.createElement(Box, {
     className: newStyle.textWrapper,
     flexible: true
   }, /*#__PURE__*/React.createElement("a", {
-    className: newStyle.textLink,
-    href: locationUrl,
-    rel: "noreferrer noopener",
-    target: "_blank"
-  }, locationUrl)));
+    className: newStyle.textLink
+  }, locationUrl))));
 }
 LocationBubble.propTypes = locationBubblePropTypes;
 LocationBubble.defaultProps = locationBubbleDefaultProps;

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

@@ -1,6 +1,10 @@
 .imageWrapper {
   width: var(--zd_size60) ;
   height: var(--zd_size60) ;
+  background-image: url('../images/location.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 3px;
 }
 
 .locationBubble {
@@ -18,15 +22,6 @@
   border-color: var(--imlib_chat_components_locationBubble_border_color_failed);
 }
 
-.image {
-  width: 100% ;
-  height: 100% ;
-  background-image: url('../images/location.png');
-  background-repeat: no-repeat;
-  background-size: cover;
-  border-radius: 3px;
-}
-
 [dir=ltr] .textWrapper {
   margin: 0 0 0 var(--zd_size8) ;
 }
@@ -39,12 +34,18 @@
   display: block;
   composes: dotted from "../../css/common.module.css";
   color: var(--imlib_chat_components_locationBubble_url_color);
+  font-family: var(--zd_semibold);
 }
 
 .failedLocationBubble .textLink{
   color: var(--imlib_chat_components_locationBubble_url_color_failed);
 }
 
-.textLink:hover{
+.container{
+  display: flex;
+  cursor: pointer;
+}
+
+.container:hover .textLink{
   text-decoration: underline !important;
 }

package/es/Message/Message.js

@@ -28,6 +28,7 @@ export default function Message(props) {
     renderOwnerStatusIcon,
     status,
     statusTooltip,
+    isShowMessageStatus,
     actions,
     renderSecondaryActions,
     onSelectAction,
@@ -84,8 +85,8 @@ export default function Message(props) {
       messageStatus: status,
       title: statusTooltip
     };
-    return status ? /*#__PURE__*/React.createElement(MessageStatus, _extends({}, props, messageStatusProps)) : null;
-  }, [status, statusTooltip, messageStatusProps]);
+    return isShowMessageStatus && status ? /*#__PURE__*/React.createElement(MessageStatus, _extends({}, props, messageStatusProps)) : null;
+  }, [status, statusTooltip, isShowMessageStatus, messageStatusProps]);
   /** ** Render MessageBox *** */
 
   const handleRenderMessageBox = useCallback(() => {

package/es/Message/props/propTypes.js

@@ -19,6 +19,7 @@ const messagePropTypes = {
   renderOwnerStatusIcon: PropTypes.func,
   status: PropTypes.oneOf(Object.values(messageStatusConstants)),
   statusTooltip: PropTypes.string,
+  isShowMessageStatus: PropTypes.bool,
   actions: PropTypes.arrayOf(PropTypes.shape({
     displayText: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(Object.values(defaultMessageActions))]).isRequired,

package/es/MessageActions/MessageActions.js

@@ -14,9 +14,6 @@ import MoreIcon from '@zohodesk/icon/es/general/More';
 
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 import useMessageActions from '@zohoim/chat-components-hooks/es/MessageActions/useMessageActions';
-/** ** Methods *** */
-
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 /** ** Constants *** */
 
 import messageActionsDefaultProps from './props/defaultProps';
@@ -92,10 +89,12 @@ export default function MessageActions(props) {
   /* Hooks handling */
 
   const {
-    actionDetails
+    actionDetails,
+    secondaryActions
   } = useMessageActions({
     actions,
-    defaultRenderFunction: renderAction
+    defaultRenderFunction: renderAction,
+    renderSecondaryActions
   });
   const {
     allActions
@@ -108,7 +107,6 @@ export default function MessageActions(props) {
   const renderMore = useCallback(() => /*#__PURE__*/React.createElement(ActionIconWrapper, _extends({
     renderIcon: renderMoreIcon
   }, actionIconWrapperProps)), [actionIconWrapperProps, renderMoreIcon]);
-  const secondaryActions = renderHandler(renderSecondaryActions)();
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MessageActionsWrapper, _extends({
     actions: allActions,
     defaultShowCount: defaultShowCount,

package/es/MessageActionsMore/MessageActionsMore.js

@@ -88,7 +88,7 @@ function MessageActionsMoreComp(props) {
   }, renderActions()) : null);
 }
 
-const MessageActionsMore = Popup(MessageActionsMoreComp, '', '', {
+const MessageActionsMore = Popup(MessageActionsMoreComp, undefined, undefined, {
   isAbsolutePositioningNeeded: false
 });
 MessageActionsMoreComp.defaultProps = messageActionsMoreDefaultProps;

package/es/MessageBox/css/MessageBox.module.css

@@ -5,17 +5,14 @@
   --messageBox-message_status_gap: var(--zd_size12);
   --messageBox-message_header_gap: var(--zd_size1);
   --messageBox-message_footer_gap: var(--zd_size1);
-  /* --messageBox-max_width: 410px; */
 }
 
 .messageBoxContainer {
   composes: varClass;
   display: grid;
-  /* flex-direction: row; */
   grid-template-columns: 1fr auto;
   align-items: flex-end;
   color: var(--imlib_chat_components_messageBox_text_color);
-  /* max-width: var(--messageBox-max_width); */
   word-wrap: break-word;
   font-size: var(--messageBox-content_size);
   box-sizing: border-box;

package/es/MessageBubble/MessageBubble.js

@@ -73,17 +73,22 @@ export default function MessageBubble(props) {
 
   const messageBoxRenderer = useCallback(() => {
     const messageBox = renderHandler(renderMessageBox)();
-    return messageBox ? /*#__PURE__*/React.createElement(Box, {
-      className: newStyle.messageBoxWrapper
-    }, messageBox) : null;
-  }, [renderMessageBox, newStyle.messageBoxWrapper]);
+    return messageBox; // return messageBox ? (
+    //   <Box flexible className={newStyle.messageBoxWrapper}>
+    //     {messageBox}
+    //   </Box>
+    // ) : null;
+  }, [renderMessageBox]);
   /* Message BoxWithActions Render */
 
   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]);
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.messageBoxWrapper,
+    flexible: true
+  }, messageBox, messageActions)) : null, [messageBox, messageActions, newStyle.messageContainer, newStyle.messageBoxWrapper]);
   /* Message Footer Render */
 
   const messageFooterRenderer = useCallback(() => {

package/es/MessageBubble/css/MessageBubble.module.css

@@ -1,7 +1,7 @@
 .varClass {
   --messageBubble-bubble_footer_gap: var(--zd_size5);
   --messageBubble-message_owner_gap: 13px;
-  --messageBox-max_width: var(--zd_size410);
+  --messageBox-max_width: 410px;
   --messageBox-footer_fontSize: var(--zd_font_size11);
   --messageBox-owner_width: var(--zd_size34);
 }
@@ -17,17 +17,19 @@
   grid-area: messageOwner;
   align-self: end;
   width: var(--messageBox-owner_width);
+  display: flex;
 }
 
 .messageContainer {
   grid-area: messageContainer;
-  display: grid;
-  column-gap: var(--zd_size10) ;
+  display: inline-block;
+  max-width: 70% ;
 }
 
 .messageBoxWrapper {
   grid-area: messageBox;
-  max-width: var(--messageBox-max_width);
+  display: inline-block;
+  position: relative; 
 }
 
 .messageActionWrapper {
@@ -35,15 +37,33 @@
   width: var(--zd_size78) ;
   display: flex;
   flex-direction: column;
+  position: absolute;
+  top:0 ;
 }
 
 .messageActionWrapperEnd {
   align-items: flex-end;
 }
 
+[dir=ltr] .messageActionWrapperEnd {
+  right: calc(100% + (var(--zd_size12)));
+}
+
+[dir=rtl] .messageActionWrapperEnd {
+  left: calc(100% + (var(--zd_size12)));
+}
+
 .messageActionWrapperStart {
   align-items: flex-start;
 }
+
+[dir=ltr] .messageActionWrapperStart {
+  left: calc(100% + (var(--zd_size12)));
+}
+
+[dir=rtl] .messageActionWrapperStart {
+  right: calc(100% + (var(--zd_size12)));
+}
 .messageBoxFooterWrapper {
   grid-area: messageBoxFooter;
   font-size: var(--messageBox-footer_fontSize);
@@ -72,22 +92,3 @@
   justify-items: end;
 }
 
-.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/MessageStatus/MessageStatus.js

@@ -1,5 +1,5 @@
 /** ** Libraries *** */
-import React from 'react';
+import React, { useMemo } from 'react';
 /** ** Hooks *** */
 
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
@@ -51,6 +51,9 @@ export default function MessageStatus(props) {
   /* External CSS Customization */
 
   const newStyle = useMergeStyle(style, customStyle);
+  const iconStyle = useMemo(() => ({
+    base: newStyle.icon
+  }), [newStyle.icon]);
   /* CSS classnames added based on logic */
 
   const {
@@ -65,7 +68,9 @@ export default function MessageStatus(props) {
   return IconComponent || customIcon ? /*#__PURE__*/React.createElement("div", {
     className: statusClass,
     "data-title": title
-  }, customIcon || /*#__PURE__*/React.createElement(IconComponent, null)) : null;
+  }, customIcon || /*#__PURE__*/React.createElement(IconComponent, {
+    customStyle: iconStyle
+  })) : null;
 }
 MessageStatus.propTypes = messageStatusPropTypes;
 MessageStatus.defaultProps = messageStatusDefaultProps;

package/es/MessageStatus/css/MessageStatus.module.css

@@ -3,10 +3,15 @@
   color: var(--imlib_chat_components_messageStatus_send_color);
 }
 
-.readStatus{
+.readStatus {
   color: var(--imlib_chat_components_messageStatus_read_color);
 }
 
-.failedStatus{
+.failedStatus {
   color: var(--imlib_chat_components_messageStatus_failed_color);
-}
+}
+
+.icon {
+  width: var(--zd_size14) ;
+  height: var(--zd_size14) ;
+}

package/es/ReplyBubble/ReplyBubble.js

@@ -13,6 +13,9 @@ import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyCon
 /** ** Styles *** */
 
 import style from './css/ReplyBubble.module.css';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
 /** ** Components *** */
 
 import ReplyBubbleHeader from '../ReplyBubbleHeader/ReplyBubbleHeader';
@@ -46,6 +49,13 @@ export default function ReplyBubble(props) {
   /* External CSS Customization */
 
   const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+
+  const {
+    imageWrapperClass
+  } = cssJSLogic({
+    isFailed
+  }, newStyle);
   const iconStyle = useMemo(() => ({
     $icon: newStyle.attachmentIcon
   }), [newStyle.attachmentIcon]);
@@ -71,7 +81,7 @@ export default function ReplyBubble(props) {
   const renderIcon = useCallback(() => {
     if (fileURL) {
       return /*#__PURE__*/React.createElement("div", {
-        className: newStyle.imageWrapper
+        className: imageWrapperClass
       }, /*#__PURE__*/React.createElement("img", {
         alt: fileName,
         className: newStyle.image,
@@ -88,15 +98,14 @@ export default function ReplyBubble(props) {
     }
 
     return null;
-  }, [fileURL, fileName, fileFormat, mediaType, iconStyle, iconProps, newStyle.imageWrapper, newStyle.image]);
-  return /*#__PURE__*/React.createElement("div", {
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement(ReplyBubbleHeader, _extends({
+  }, [fileURL, fileName, fileFormat, mediaType, iconStyle, iconProps, newStyle.image, imageWrapperClass]);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ReplyBubbleHeader, _extends({
     dateTimeDetails: dateTimeDetails,
     isFailed: isFailed,
     replyText: replyText
   }, headerProps)), /*#__PURE__*/React.createElement(ReplyBubbleContent, _extends({
     isFailed: isFailed,
+    onClick: onClick,
     renderIcon: renderIcon,
     renderMessage: renderMessage,
     senderName: senderName

package/es/ReplyBubble/css/ReplyBubble.module.css

@@ -7,6 +7,12 @@
   height: var(--zd_size60) ;
   width: var(--zd_size60) ;
   overflow: hidden;
+  border-radius: 3px;
+  border: 1px solid var(--imlib_chat_components_replyBubble_border_color);
+}
+
+.imageWrapperFailed{
+  border-color: var(--imlib_chat_components_replyBubble_border_color_failed);
 }
 
 .image {

package/es/ReplyBubble/css/cssJSLogic.js

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

package/es/ReplyBubbleContent/ReplyBubbleContent.js

@@ -23,7 +23,8 @@ export default function ReplyBubbleContent(props) {
     senderName,
     renderIcon,
     renderMessage,
-    isFailed
+    isFailed,
+    onClick
   } = props;
   /* External CSS Customization */
 
@@ -41,7 +42,8 @@ export default function ReplyBubbleContent(props) {
     align: "vertical",
     alignBox: "row",
     className: replyBubbleContentClass,
-    isCover: false
+    isCover: false,
+    onClick: onClick
   }, icon ? /*#__PURE__*/React.createElement(Box, {
     className: newStyle.iconWrapper
   }, /*#__PURE__*/React.createElement(Container, {

package/es/ReplyBubbleContent/props/propTypes.js

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