@zohoim/chat-components 0.0.18 → 0.0.20

package/es/im/IMMessage/IMMessage.js

@@ -42,7 +42,7 @@ export default function IMMessage(props) {
     onLoadFullMessage,
     onClickReply,
     onTicketClick,
-    onMessageContentClick,
+    messageContentClickMapping,
     customStyle,
     customProps
   } = props;
@@ -57,11 +57,14 @@ export default function IMMessage(props) {
     isHighlightMessage,
     needSender,
     isShowSender,
-    isShowMessageTime
+    isShowMessageTime,
+    isShowMessageStatus
   } = messageDisplayProps;
   const newStyle = useMergeStyle(style, customStyle);
   const {
     direction,
+    isIncoming,
+    isOutgoing,
     // isBot,
     senderSrc,
     senderAlternateSrc,
@@ -72,6 +75,7 @@ export default function IMMessage(props) {
     // messageType,
     messageStatus,
     isFailedMessage,
+    isSendingMessage,
     isAgentMessage,
     messageStatusTitle,
     dateTimeDetails,
@@ -107,21 +111,23 @@ export default function IMMessage(props) {
   const handleRenderMessage = useCallback(() => /*#__PURE__*/React.createElement(IMMessageContent, _extends({
     deleteMessageText: deleteMessageText,
     isFailed: isFailedMessage,
+    isSending: isSendingMessage,
+    messageContentClickMapping: messageContentClickMapping,
     messageDetails: messageDetails,
-    onClick: onMessageContentClick,
     onClickReply: onClickReply,
     onLoadFullMessage: onLoadFullMessage,
     replyText: replyText,
     seeMoreText: seeMoreText,
     sessionDetails: sessionDetails
-  }, imMessageContentProps)), [seeMoreText, replyText, deleteMessageText, messageDetails, sessionDetails, onMessageContentClick, onLoadFullMessage, onClickReply, isFailedMessage, imMessageContentProps]);
+  }, imMessageContentProps)), [seeMoreText, replyText, deleteMessageText, messageDetails, sessionDetails, messageContentClickMapping, onLoadFullMessage, onClickReply, isFailedMessage, isSendingMessage, imMessageContentProps]);
   /** ** Render Secondary Actions - TicketId *** */
 
   const handleRenderSecondaryActions = useCallback(() => {
     const {
       imTicketLinkClass
     } = cssJSLogic({
-      messageDetails
+      isIncoming,
+      isOutgoing
     }, newStyle);
     const customStyle = {
       text: imTicketLinkClass
@@ -133,7 +139,7 @@ export default function IMMessage(props) {
       onClick: onTicketClick,
       text: ticketNumber ? `#${ticketNumber}` : ''
     }, imTicketLinkProps));
-  }, [ticketNumber, ticketUrl, ticketId, onTicketClick, imTicketLinkProps, messageDetails, newStyle]);
+  }, [ticketNumber, ticketUrl, ticketId, onTicketClick, imTicketLinkProps, newStyle, isIncoming, isOutgoing]);
   /** ** Render Owner Status Icon *** */
 
   const handleRenderIntegIcon = useCallback(() => /*#__PURE__*/React.createElement(IMIntegrationIcon, _extends({
@@ -150,20 +156,25 @@ export default function IMMessage(props) {
 
   const messageCustomProps = useMemo(() => {
     const {
-      messageBubbleProps
+      customProps
     } = messageProps;
+    const {
+      messageBubbleProps
+    } = customProps;
     return { ...messageProps,
-      messageBubbleProps: {
-        renderMessageBoxFooter: handleRenderMessageBoxFooter,
-        ...messageBubbleProps
+      customProps: { ...customProps,
+        messageBubbleProps: {
+          renderMessageBoxFooter: handleRenderMessageBoxFooter,
+          ...messageBubbleProps
+        }
       }
     };
   }, [messageProps, handleRenderMessageBoxFooter]);
-  return /*#__PURE__*/React.createElement(Message, {
+  return /*#__PURE__*/React.createElement(Message, _extends({
     actions: actions,
-    customProps: messageCustomProps,
     direction: direction,
     isActive: isHighlightMessage,
+    isShowMessageStatus: isShowMessageStatus,
     isShowSender: isShowSender,
     needSender: needSender,
     onMouseEnterAction: onMouseEnterAction,
@@ -174,7 +185,7 @@ export default function IMMessage(props) {
     renderSecondaryActions: handleRenderSecondaryActions,
     status: isAgentMessage ? messageStatus : '',
     statusTooltip: messageStatusTitle
-  });
+  }, messageCustomProps));
 }
 IMMessage.propTypes = imMessagePropTypes;
 IMMessage.defaultProps = imMessageDefaultProps;

package/es/im/IMMessage/css/cssJSLogic.js

@@ -1,21 +1,13 @@
 /** ** Methods *** */
 import { compileClassNames } from '@zohodesk/utils';
-import getMessageDirectionType from '@zohoim/chat-components-utils/es/imUtils/getMessageDirection';
-/** ** Constants *** */
-
-import { direction as directionConstants } from '@zohoim/chat-components-utils/es/constants/messageConstants';
 export default function cssJSLogic(props, style) {
   const {
-    messageDetails
+    isIncoming,
+    isOutgoing
   } = props;
-  const {
-    direction
-  } = getMessageDirectionType({
-    messageDetails
-  });
   const imTicketLinkClass = compileClassNames({
-    [style.ticketLinkLeft]: directionConstants.OUT === direction,
-    [style.ticketLinkRight]: directionConstants.IN === direction
+    [style.ticketLinkLeft]: isOutgoing,
+    [style.ticketLinkRight]: isIncoming
   });
   return {
     imTicketLinkClass

package/es/im/IMMessage/props/defaultProps.js

@@ -7,6 +7,8 @@ const imMessageDefaultProps = {
   sessionDetails: dummyObject,
   messageStatusI18N: dummyObject,
   customProps: dummyObject,
-  customStyle: dummyObject
+  customStyle: dummyObject,
+  messageDisplayProps: dummyObject,
+  messageContentClickMapping: dummyObject
 };
 export default imMessageDefaultProps;

package/es/im/IMMessage/props/propTypes.js

@@ -61,6 +61,7 @@ const imMessagePropTypes = {
   }),
   messageDisplayProps: PropTypes.shape({
     isHighlightMessage: PropTypes.bool,
+    isShowMessageStatus: PropTypes.bool,
     isShowMessageTime: PropTypes.bool,
     isShowSender: PropTypes.bool,
     needSender: PropTypes.bool
@@ -102,7 +103,7 @@ const imMessagePropTypes = {
   onLoadFullMessage: PropTypes.func,
   onClickReply: PropTypes.func,
   onTicketClick: PropTypes.func,
-  onMessageContentClick: PropTypes.func,
+  messageContentClickMapping: PropTypes.object,
   customStyle: PropTypes.object,
   customProps: PropTypes.shape({
     imIntegrationIconProps: PropTypes.object,

package/es/im/IMMessageContent/IMMessageContent.js

@@ -38,7 +38,9 @@ export default function IMMessageContent(props) {
     customProps,
     renderCustomMessage,
     onClick: propOnClick,
-    isFailed
+    isFailed,
+    isSending,
+    messageContentClickMapping
   } = props;
   const {
     imReplyBubbleProps = dummyObject,
@@ -49,6 +51,10 @@ export default function IMMessageContent(props) {
     audioBubbleProps = dummyObject,
     attachmentBubbleProps = dummyObject
   } = customProps;
+  const {
+    onImageBubbleClick,
+    onAttachmentBubbleClick
+  } = messageContentClickMapping;
   const {
     isShowLayoutBubble,
     isShowReplyBubble,
@@ -62,8 +68,7 @@ export default function IMMessageContent(props) {
     isShowDeleteBubble,
     replyToMessageDetails: replyToMessage,
     attachmentDetails,
-    locationUrl,
-    onClick
+    locationUrl
   } = useIMMessageContent({
     messageDetails,
     onClick: propOnClick
@@ -72,8 +77,7 @@ export default function IMMessageContent(props) {
 
   const newStyle = useMergeStyle(style, customStyle);
   const wrapperDivProps = {
-    className: newStyle.messageContentRow,
-    onClick
+    className: newStyle.messageContentRow
   };
   return /*#__PURE__*/React.createElement(Fragment, null, isShowLayoutBubble ? null : null, isShowDeleteBubble ? /*#__PURE__*/React.createElement("div", {
     className: newStyle.deleteBubble
@@ -87,7 +91,9 @@ export default function IMMessageContent(props) {
     isFailed
   }) : null, isShowImageBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(ImageBubble, _extends({
     imageDetails: attachmentDetails,
-    isFailed: isFailed
+    isFailed: isFailed,
+    isSending: isSending,
+    onClick: onImageBubbleClick
   }, imageBubbleProps))) : null, isShowVideoBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(VideoBubble, _extends({
     isFailed: isFailed,
     videoDetails: attachmentDetails
@@ -96,7 +102,8 @@ export default function IMMessageContent(props) {
     isFailed: isFailed
   }, audioBubbleProps))) : null, isShowAttachmentBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(AttachmentBubble, _extends({
     attachmentDetails: attachmentDetails,
-    isFailed: isFailed
+    isFailed: isFailed,
+    onClick: onAttachmentBubbleClick
   }, attachmentBubbleProps))) : null, isShowLocationBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(LocationBubble, _extends({
     isFailed: isFailed,
     locationUrl: locationUrl

package/es/im/IMMessageContent/css/IMMessageContent.module.css

@@ -4,4 +4,5 @@
 
 .deleteBubble {
   font-style: italic;
+  color: var(--imlib_chat_components_imMessageContent_text_color);
 }

package/es/im/IMMessageContent/props/defaultProps.js

@@ -2,6 +2,7 @@
 import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const imMessageContentDefaultProps = {
   customStyle: dummyObject,
-  customProps: dummyObject
+  customProps: dummyObject,
+  messageContentClickMapping: dummyObject
 };
 export default imMessageContentDefaultProps;

package/es/im/IMMessageContent/props/propTypes.js

@@ -27,6 +27,7 @@ const imMessageContentPropTypes = {
     id: PropTypes.string
   }),
   onClick: PropTypes.func,
+  messageContentClickMapping: PropTypes.object,
   onLoadFullMessage: PropTypes.func,
   onClickReply: PropTypes.func,
   seeMoreText: PropTypes.string,
@@ -43,6 +44,7 @@ const imMessageContentPropTypes = {
     locationBubbleProps: PropTypes.object,
     videoBubbleProps: PropTypes.object
   }),
-  isFailed: PropTypes.bool
+  isFailed: PropTypes.bool,
+  isSending: PropTypes.bool
 };
 export default imMessageContentPropTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohoim/chat-components",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "Chat Components",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -32,11 +32,12 @@
     "@zohodesk/components": "1.0.0-alpha-259",
     "@zohodesk/hooks": "1.3.12",
     "@zohodesk/icon": "1.3.12",
+    "@zohodesk/icons": "1.0.7",
     "@zohodesk/utils": "1.3.9",
     "@zohodesk/variables": "1.0.0-beta.30",
     "@zohodesk/virtualizer": "1.0.13",
-    "@zohoim/chat-components-hooks": "^0.0.16",
-    "@zohoim/chat-components-utils": "^0.0.15"
+    "@zohoim/chat-components-hooks": "^0.0.18",
+    "@zohoim/chat-components-utils": "^0.0.17"
   },
   "devDependencies": {
     "@zohodesk-private/css-variable-migrator": "1.0.1",
@@ -44,5 +45,5 @@
     "jsdom": "22.1.0",
     "react-to-jsx": "1.3.2"
   },
-  "gitHead": "d7839c59d5c147bf2c24c2af7d2aa75a994f05b4"
+  "gitHead": "8ddb3ec73ad57fdb8e9b3eb909d348936f6f2077"
 }