@zohoim/chat-components 0.0.10 → 0.0.13

package/es/im/IMMessage/IMMessage.js

@@ -1,19 +1,22 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* eslint-disable react/jsx-no-bind */
 
 /** ** Libraries *** */
-import React from "react";
+import React from 'react';
 
 /** ** Hooks *** */
 import useIMMessage from '@zohoim/chat-components-hooks/es/im/IMMessage/useIMMessage';
 
 /** ** Constants *** */
-import imMessageDefaultProps from "./props/defaultProps";
-import imMessagePropTypes from "./props/propTypes";
+import imMessageDefaultProps from './props/defaultProps';
+import imMessagePropTypes from './props/propTypes';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
 
 /** ** Components *** */
 import Message from '../../Message/Message';
-import IMMessageContent from "../IMMessageContent/IMMessageContent";
-import IMTicketLink from "../IMTicketLink/IMTicketLink";
+import IMMessageContent from '../IMMessageContent/IMMessageContent';
+import IMTicketLink from '../IMTicketLink/IMTicketLink';
+import IMIntegrationIcon from '../IMIntegrationIcon/IMIntegrationIcon';
 export default function IMMessage(props) {
   const {
     defaultAgentAvatar,
@@ -29,55 +32,39 @@ export default function IMMessage(props) {
     isSameTimeMessage,
     messageActionDetails,
     canReply,
-    /*Customization Props*/
-    messageBubbleCustomStyle,
-    avatarCustomStyle,
-    senderIntegrationIconCustomStyle,
-    messageBoxCustomStyle,
-    actionIconCustomStyle,
-    moreActionItemCustomStyle,
-    messageActionCustomStyle,
-    moreActionPopupCustomStyle,
-    messageStatusCustomStyle,
-    needMessageActions,
-    needSender,
-    needMessageBox,
-    isCustomIntegrationIcon,
-    isCustomSenderAvatar,
-    senderAvatarSize,
-    senderIntegrationIconSize,
-    actionsDefaultShowCount,
-    renderCustomIntegrationIcon,
-    renderCustomSenderAvatar,
-    renderMessageFooter,
-    renderMessageHeader,
     replyText,
     articleShareText,
-    moreText
+    moreText,
+    customProps
   } = props;
+  const {
+    messageBubbleProps = dummyObject,
+    messageOwnerProps = dummyObject,
+    messageBoxProps = dummyObject,
+    messageStatusProps = dummyObject,
+    messageActionsProps = dummyObject,
+    imMessageContentProps = dummyObject,
+    imTicketLinkProps = dummyObject,
+    imIntegrationIconProps = dummyObject
+  } = customProps;
   const {
     direction,
-    isDeletedMessage,
-    isFailedMessage,
     isActive,
     isShowSender,
-    isBot,
+    // isBot,
     senderSrc,
     senderAlternateSrc,
-    senderTitle,
     senderName,
     isShowIntegrationIcon,
     integrationName,
-    messageMetaType,
-    messageType,
+    // messageMetaType,
+    // messageType,
     messageStatus,
     isAgentMessage,
     messageStatusTitle,
-    displayMessage,
     createdTime,
     messageId,
     ticketNumber,
-    ticketId,
     messageActions
   } = useIMMessage({
     defaultAgentAvatar,
@@ -94,28 +81,16 @@ export default function IMMessage(props) {
     canReply
   });
   function handleRenderMessageBoxFooter() {
-    return !isSameTimeMessage ?
-    /*#__PURE__*/
-    //   <CommonDateWithTime
-    //     to={createdTime}
-    //     isNeedTime
-    //     prefix=''
-    //     isTimeOnly
-    //     hideTitle
-    //   />
-    // ) :
-    React.createElement("div", null, createdTime) : null;
+    return !isSameTimeMessage ? /*#__PURE__*/React.createElement("div", null, createdTime) : null;
   }
   function handleRenderMessage() {
-    return /*#__PURE__*/React.createElement(IMMessageContent, {
-      messageDetails: messageDetails,
-      replyText: replyText,
+    return /*#__PURE__*/React.createElement(IMMessageContent, _extends({
       articleShareText: articleShareText,
-      moreText: moreText
-    });
-    // return <div>{displayMessage}</div>;
+      messageDetails: messageDetails,
+      moreText: moreText,
+      replyText: replyText
+    }, imMessageContentProps));
   }
-
   function handleSelectAction(_ref) {
     let {
       id,
@@ -133,64 +108,43 @@ export default function IMMessage(props) {
     });
   }
   function handleRenderSecondaryActions() {
-    // return null;
-    return /*#__PURE__*/React.createElement(IMTicketLink, {
+    return /*#__PURE__*/React.createElement(IMTicketLink, _extends({
       ticketNumber: ticketNumber
-    });
-
-    /*
-     <a
-        data-id={`ticketLink_${ticketNumber}`}
-        // className={style.ticketId}
-        // href='javascript:;'
-        target='_blank'
-        rel='noopener noreferrer'
-      >
-        {`#${ticketNumber}`}
-      </a> 
-    */
+    }, imTicketLinkProps));
+  }
+  function handleRenderIntegIcon() {
+    /*#__PURE__*/React.createElement(IMIntegrationIcon, _extends({
+      integrationName: isShowIntegrationIcon ? integrationName : ''
+    }, imIntegrationIconProps));
   }
-
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Message, {
+    actions: messageActions,
+    customProps: {
+      messageOwnerProps,
+      messageBoxProps,
+      messageStatusProps,
+      messageActionsProps,
+      messageBubbleProps: {
+        renderMessageBoxFooter: handleRenderMessageBoxFooter,
+        ...messageBubbleProps
+      }
+    },
     direction: direction,
     isActive: isActive,
     isShowSender: isShowSender,
-    senderName: senderName,
-    senderSrc: senderSrc,
-    senderAlternateSrc: senderAlternateSrc,
-    senderTitle: senderTitle,
-    senderIntegrationIcon: isShowIntegrationIcon ? integrationName : "",
-    isFailedMessage: isFailedMessage,
-    messageActions: messageActions,
-    needMessageActions: needMessageActions ? messageActions.length >= 0 : false,
     onSelectAction: handleSelectAction,
-    messageStatus: isAgentMessage ? messageStatus : "",
-    statusTitle: messageStatusTitle,
-    customStyle: messageBubbleCustomStyle,
-    avatarCustomStyle: avatarCustomStyle,
-    senderIntegrationIconCustomStyle: senderIntegrationIconCustomStyle,
-    messageBoxCustomStyle: messageBoxCustomStyle,
-    actionIconCustomStyle: actionIconCustomStyle,
-    moreActionItemCustomStyle: moreActionItemCustomStyle,
-    messageActionCustomStyle: messageActionCustomStyle,
-    moreActionPopupCustomStyle: moreActionPopupCustomStyle,
-    messageStatusCustomStyle: messageStatusCustomStyle,
-    needSender: needSender,
-    needMessageBox: needMessageBox,
-    isCustomIntegrationIcon: isCustomIntegrationIcon,
-    isCustomSenderAvatar: isCustomSenderAvatar,
-    senderAvatarSize: senderAvatarSize,
-    senderIntegrationIconSize: senderIntegrationIconSize,
-    actionsDefaultShowCount: actionsDefaultShowCount,
-    renderCustomIntegrationIcon: renderCustomIntegrationIcon,
-    renderCustomSenderAvatar: renderCustomSenderAvatar,
+    ownerDetails: {
+      src: senderSrc,
+      alternateSrc: senderAlternateSrc,
+      name: senderName
+    },
+    renderContent: handleRenderMessage,
+    renderOwnerOverlay: handleRenderIntegIcon,
     renderSecondaryActions: handleRenderSecondaryActions,
-    renderMessage: handleRenderMessage,
-    renderMessageFooter: renderMessageFooter,
-    renderMessageHeader: renderMessageHeader,
-    renderMessageBoxFooter: handleRenderMessageBoxFooter
+    status: isAgentMessage ? messageStatus : '',
+    statusTooltip: messageStatusTitle
   }));
 }
 IMMessage.propTypes = imMessagePropTypes;
 IMMessage.defaultProps = imMessageDefaultProps;
-IMMessage.displayName = "IMMessage";
+IMMessage.displayName = 'IMMessage';

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

@@ -2,8 +2,6 @@
 
 /** ** Constants *** */
 import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
-import sizes from '@zohoim/chat-components-utils/es/constants/sizes';
-import { actionsDefaultShowCount } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
 const imMessageDefaultProps = {
   messageDetails: dummyObject,
   sessionDetails: dummyObject,
@@ -17,22 +15,6 @@ const imMessageDefaultProps = {
   messageActionDetails: dummyObject,
   isCurrentAgent: false,
   canReply: false,
-  messageBubbleCustomStyle: dummyObject,
-  avatarCustomStyle: dummyObject,
-  senderIntegrationIconCustomStyle: dummyObject,
-  messageBoxCustomStyle: dummyObject,
-  actionIconCustomStyle: dummyObject,
-  moreActionItemCustomStyle: dummyObject,
-  messageActionCustomStyle: dummyObject,
-  moreActionPopupCustomStyle: dummyObject,
-  messageStatusCustomStyle: dummyObject,
-  needMessageActions: true,
-  needSender: true,
-  needMessageBox: true,
-  isCustomIntegrationIcon: false,
-  isCustomSenderAvatar: false,
-  senderAvatarSize: 'medium',
-  senderIntegrationIconSize: sizes.SMALL,
-  actionsDefaultShowCount: actionsDefaultShowCount
+  customProps: dummyObject
 };
 export default imMessageDefaultProps;

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

@@ -1,10 +1,10 @@
+/* eslint-disable no-undef */
 /** ** Libraries *** */
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 
 /** ** Constants *** */
-import { defaultMessageActions } from "@zohoim/chat-components-utils/es/constants/messageActionConstants";
-import messageStatusConstants from "@zohoim/chat-components-utils/es/constants/messageStatusConstants";
-import sizes from "@zohoim/chat-components-utils/es/constants/sizes";
+import { defaultMessageActions } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
+import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
 const {
   REPLY,
   COPY,
@@ -51,7 +51,7 @@ const imMessagePropTypes = {
     displayMessage: PropTypes.string,
     createdTime: PropTypes.string,
     id: PropTypes.string
-  }),
+  }).isRequired,
   sessionDetails: PropTypes.shape({
     integrationService: PropTypes.string
   }),
@@ -116,33 +116,20 @@ const imMessagePropTypes = {
       iconTitle: PropTypes.string,
       onClick: PropTypes.func
     })
-  }),
+  }).isRequired,
   canReply: PropTypes.bool.isRequired,
-  messageBubbleCustomStyle: PropTypes.object,
-  needMessageActions: PropTypes.bool,
-  needSender: PropTypes.bool,
-  senderAvatarSize: PropTypes.oneOf(["xxsmall", "small", "xsmall", "medium", "xmedium", "large", "xlarge"]),
-  avatarCustomStyle: PropTypes.object,
-  senderIntegrationIconSize: PropTypes.oneOf([sizes.SMALL, sizes.MEDIUM]),
-  senderIntegrationIconCustomStyle: PropTypes.object,
-  isCustomIntegrationIcon: PropTypes.bool,
-  isCustomSenderAvatar: PropTypes.bool,
-  renderCustomIntegrationIcon: PropTypes.func,
-  renderCustomSenderAvatar: PropTypes.func,
-  needMessageBox: PropTypes.bool,
-  renderMessage: PropTypes.func.isRequired,
-  renderMessageFooter: PropTypes.func,
-  renderMessageHeader: PropTypes.func,
-  messageBoxCustomStyle: PropTypes.object,
-  renderSecondaryActions: PropTypes.func,
-  actionsDefaultShowCount: PropTypes.number,
-  actionIconCustomStyle: PropTypes.object,
-  moreActionItemCustomStyle: PropTypes.object,
-  messageActionCustomStyle: PropTypes.object,
-  moreActionPopupCustomStyle: PropTypes.object,
-  messageStatusCustomStyle: PropTypes.object,
   replyText: PropTypes.string,
   articleShareText: PropTypes.string,
-  moreText: PropTypes.string
+  moreText: PropTypes.string,
+  customProps: PropTypes.shape({
+    messageBubbleProps: PropTypes.object,
+    messageOwnerProps: PropTypes.object,
+    messageBoxProps: PropTypes.object,
+    messageStatusProps: PropTypes.object,
+    messageActionsProps: PropTypes.object,
+    imMessageContentProps: PropTypes.object,
+    imTicketLinkProps: PropTypes.object,
+    imIntegrationIconProps: PropTypes.object
+  })
 };
 export default imMessagePropTypes;

package/es/im/IMMessageAvatar/IMMessageAvatar.js

@@ -24,21 +24,21 @@ export default function IMMessageAvatar(props) {
   } = props;
   function renderIcon() {
     return /*#__PURE__*/React.createElement(IMIntegrationIcon, {
-      integrationName: integrationName,
-      size: iconSize,
       customStyle: iconCustomStyle,
+      integrationName: integrationName,
       isCustom: isCustomIcon,
-      renderIcon: renderCustomIcon
+      renderIcon: renderCustomIcon,
+      size: iconSize
     });
   }
   return /*#__PURE__*/React.createElement(MessageAvatar, {
-    src: src,
     alternateSrc: alternateSrc,
-    title: title,
-    size: avatarSize,
+    customStyle: customStyle,
     name: name,
     renderIcon: renderIcon,
-    customStyle: customStyle
+    size: avatarSize,
+    src: src,
+    title: title
   });
 }
 IMMessageAvatar.defaultProps = imMessageAvatarDefaultProps;

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

@@ -1,12 +1,12 @@
 /** ** Constants *** */
 import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
-const imMessageActionsDefaultProps = {
+const imMessageAvatarDefaultProps = {
   customStyle: dummyObject,
   iconCustomStyle: dummyObject,
   isCustomIcon: false,
   title: '',
-  //'RAVI KUMAR',
-  name: '' //'RAVI KUMAR',
+  // 'RAVI KUMAR',
+  name: '' // 'RAVI KUMAR',
 };
 
-export default imMessageActionsDefaultProps;
+export default imMessageAvatarDefaultProps;

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

@@ -25,4 +25,29 @@ const imMessageAvatarPropTypes = {
   isCustomIcon: PropTypes.bool,
   renderCustomIcon: PropTypes.string
 };
+
+// const props = {
+//   src: PropTypes.string,
+//   alternateSrc: PropTypes.string,
+//   title: PropTypes.string,
+//   avatarSize: PropTypes.string,
+//   name: PropTypes.string,
+//   customStyle: PropTypes.object,
+//   iconProps: PropTypes.shape({
+//     integrationName: PropTypes.oneOf([
+//       WHATSAPP,
+//       TELEGRAM,
+//       INSTAGRAM,
+//       ASAP,
+//       WECHAT,
+//       TWILLIO,
+//       LINE
+//     ]),
+//     size: PropTypes.string,
+//     customStyle: PropTypes.object,
+//     isCustom: PropTypes.bool,
+//     renderIcon: PropTypes.string
+//   })
+// };
+
 export default imMessageAvatarPropTypes;

package/es/im/IMMessageContent/IMMessageContent.js

@@ -2,31 +2,31 @@
 /* eslint-disable max-len */
 
 /** ** Libraries *** */
-import React from "react";
+import React from 'react';
 
 /** ** Hooks *** */
-import useMergeStyle from "@zohodesk/hooks/es/utils/useMergeStyle";
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
 /** ** Constants *** */
-import imMessageContentDefaultProps from "./props/defaultProps";
-import imMessageContentPropTypes from "./props/propTypes";
+import imMessageContentDefaultProps from './props/defaultProps';
+import imMessageContentPropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from "@zohoim/chat-components-utils/es/common/renderHandler";
-import cssJSLogic from "./css/cssJSLogic";
+import getIsShowBubble from '@zohoim/chat-components-utils/es/imUtils/getIsShowBubble';
+import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
-import style from "./css/IMMessageContent.module.css";
-import useIMMessageContent from '@zohoim/chat-components-hooks/es/im/IMMessageContent/useIMMessageContent';
-import { messageTypes, mediaTypes as mediaTypeConstants } from "@zohoim/chat-components-utils/es/constants/messageConstants";
-import IMReplyBubble from "../IMReplyBubble/IMReplyBubble";
-import IMLocationBubble from "../IMLocationBubble/IMLocationBubble";
-import IMTextBubble from "../IMTextBubble/IMTextBubble";
-import IMImageBubble from "../IMImageBubble/IMImageBubble";
-import IMVideoBubble from "../IMVideoBubble/IMVideoBubble";
-import IMAudioBubble from "../IMAudioBubble/IMAudioBubble";
-import IMAttachmentBubble from "../IMAttachmentBubble/IMAttachmentBubble";
-import IMArticleBubble from "../IMArticleBubble/IMArticleBubble";
+import style from './css/IMMessageContent.module.css';
+
+/** ** Components *** */
+import IMReplyBubble from '../IMReplyBubble/IMReplyBubble';
+import IMLocationBubble from '../IMLocationBubble/IMLocationBubble';
+import IMTextBubble from '../IMTextBubble/IMTextBubble';
+import IMImageBubble from '../IMImageBubble/IMImageBubble';
+import IMVideoBubble from '../IMVideoBubble/IMVideoBubble';
+import IMAudioBubble from '../IMAudioBubble/IMAudioBubble';
+import IMAttachmentBubble from '../IMAttachmentBubble/IMAttachmentBubble';
+import IMArticleBubble from '../IMArticleBubble/IMArticleBubble';
 export default function IMMessageContent(props) {
   const {
     customStyle,
@@ -45,7 +45,7 @@ export default function IMMessageContent(props) {
     isShowLocationBubble,
     isShowArticleBubble,
     isShowTextBubble
-  } = useIMMessageContent({
+  } = getIsShowBubble({
     messageDetails
   });
 
@@ -63,27 +63,43 @@ export default function IMMessageContent(props) {
   } = messageDetails || {};
   return /*#__PURE__*/React.createElement("div", {
     className: imMessageContentClass
-  }, isShowLayoutBubble ? null : null, isShowReplyBubble ? /*#__PURE__*/React.createElement(IMReplyBubble, {
+  }, isShowLayoutBubble ? null : null, isShowReplyBubble ? /*#__PURE__*/React.createElement("div", {
+    className: style.messageContentRow
+  }, /*#__PURE__*/React.createElement(IMReplyBubble, {
     messageDetails: replyToMessage,
     replyText: replyText
-  }) : null, isShowImageBubble ? /*#__PURE__*/React.createElement(IMImageBubble, {
+  })) : null, isShowImageBubble ? /*#__PURE__*/React.createElement("div", {
+    className: style.messageContentRow
+  }, /*#__PURE__*/React.createElement(IMImageBubble, {
     attachmentDetails: attachmentDetails
-  }) : null, isShowVideoBubble ? /*#__PURE__*/React.createElement(IMVideoBubble, {
+  })) : null, isShowVideoBubble ? /*#__PURE__*/React.createElement("div", {
+    className: style.messageContentRow
+  }, /*#__PURE__*/React.createElement(IMVideoBubble, {
     attachmentDetails: attachmentDetails
-  }) : null, isShowAudioBubble ? /*#__PURE__*/React.createElement(IMAudioBubble, {
+  })) : null, isShowAudioBubble ? /*#__PURE__*/React.createElement("div", {
+    className: style.messageContentRow
+  }, /*#__PURE__*/React.createElement(IMAudioBubble, {
     attachmentDetails: attachmentDetails
-  }) : null, isShowAttachmentBubble ? /*#__PURE__*/React.createElement(IMAttachmentBubble, {
+  })) : null, isShowAttachmentBubble ? /*#__PURE__*/React.createElement("div", {
+    className: style.messageContentRow
+  }, /*#__PURE__*/React.createElement(IMAttachmentBubble, {
     attachmentDetails: attachmentDetails
-  }) : null, isShowLocationBubble ? /*#__PURE__*/React.createElement(IMLocationBubble, {
+  })) : null, isShowLocationBubble ? /*#__PURE__*/React.createElement("div", {
+    className: style.messageContentRow
+  }, /*#__PURE__*/React.createElement(IMLocationBubble, {
     locationDetails: locationDetails
-  }) : null, isShowArticleBubble ? /*#__PURE__*/React.createElement(IMArticleBubble, {
+  })) : null, isShowArticleBubble ? /*#__PURE__*/React.createElement("div", {
+    className: style.messageContentRow
+  }, /*#__PURE__*/React.createElement(IMArticleBubble, {
     articleDetails: articleDetails,
     articleShareI18N: articleShareText
-  }) : null, isShowTextBubble ? /*#__PURE__*/React.createElement(IMTextBubble, {
+  })) : null, isShowTextBubble ? /*#__PURE__*/React.createElement("div", {
+    className: style.messageContentRow
+  }, /*#__PURE__*/React.createElement(IMTextBubble, {
     messageDetails: messageDetails,
     moreText: seeMoreText
-  }) : null);
+  })) : null);
 }
 IMMessageContent.propTypes = imMessageContentPropTypes;
 IMMessageContent.defaultProps = imMessageContentDefaultProps;
-IMMessageContent.displayName = "IMMessageContent";
+IMMessageContent.displayName = 'IMMessageContent';

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

@@ -0,0 +1,3 @@
+.messageContentRow + .messageContentRow{
+    margin-top: 5px;
+}

package/es/im/IMMessageMeta/IMMessageMeta.js

@@ -12,14 +12,13 @@ import imMessageMetaDefaultProps from './props/defaultProps';
 import imMessageMetaPropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
 import style from './css/IMMessageMeta.module.css';
 
 /** ** Components *** */
-import { Container, Box } from '@zohodesk/components/es/Layout';
+import { Container } from '@zohodesk/components/es/Layout';
 import IMDateTime from '../IMDateTime/IMDateTime';
 import IMAutoMessageInfo from '../IMAutoMessageInfo/IMAutoMessageInfo';
 export default function IMMessageMeta(props) {
@@ -49,10 +48,10 @@ export default function IMMessageMeta(props) {
   }), /*#__PURE__*/React.createElement("div", {
     className: dotClass
   }, "\u22C5"), /*#__PURE__*/React.createElement(IMAutoMessageInfo, {
-    customStyle: autoMessageCustomStyle,
     autoMessageType: autoMessageType,
     autoMessagesI18N: autoMessagesI18N,
-    autoMessagesTitleI18N: autoMessagesTitleI18N
+    autoMessagesTitleI18N: autoMessagesTitleI18N,
+    customStyle: autoMessageCustomStyle
   }));
 }
 IMMessageMeta.propTypes = imMessageMetaPropTypes;

package/es/im/IMReplyBubble/IMReplyBubble.js

@@ -12,7 +12,6 @@ import imReplyBubbleDefaultProps from './props/defaultProps';
 import imReplyBubblePropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
@@ -34,15 +33,16 @@ export default function IMReplyBubble(props) {
   const newStyle = useMergeStyle(style, customStyle);
   /* CSS classnames added based on logic */
   const {
-    imReplyBubbleClass,
-    attachmentIconStyle
+    imReplyBubbleClass
   } = cssJSLogic(props, newStyle);
   const {
     fileFormat,
-    fileURL,
     message,
     senderName,
-    time
+    time,
+    isShowImage,
+    fileName,
+    attachmentURL
   } = useIMReplyBubble({
     messageDetails
   });
@@ -54,11 +54,13 @@ export default function IMReplyBubble(props) {
     });
   }
   function renderIcon() {
-    return fileFormat ? /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line no-nested-ternary
+    return isShowImage ? /*#__PURE__*/React.createElement("div", {
       className: newStyle.imageWrapper
     }, /*#__PURE__*/React.createElement("img", {
+      alt: fileName,
       className: newStyle.image,
-      src: "https://contacts.zoho.com/file"
+      src: attachmentURL
     })) : fileFormat ? /*#__PURE__*/React.createElement(IMAttachmentIcon, {
       customStyle: {
         $icon: newStyle.attachmentIcon
@@ -69,14 +71,14 @@ export default function IMReplyBubble(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: imReplyBubbleClass
   }, /*#__PURE__*/React.createElement(ReplyBubble, {
-    headerCustomStyle: headerCustomStyle,
-    timeCustomStyle: timeCustomStyle,
     contentCustomStyle: contentCustomStyle,
+    headerCustomStyle: headerCustomStyle,
+    renderIcon: renderIcon,
+    renderMessage: renderMessage,
+    replyText: replyText,
     senderName: senderName,
     time: time,
-    replyText: replyText,
-    renderMessage: renderMessage,
-    renderIcon: renderIcon
+    timeCustomStyle: timeCustomStyle
   }));
 }
 IMReplyBubble.propTypes = imReplyBubblePropTypes;

package/es/im/IMReplyBubble/css/IMReplyBubble.module.css

@@ -1,24 +1,18 @@
 .attachmentIcon {
-  height: 40px;
-  width: 40px;
+  height: var(--imlib_size_40);
+  width: var(--imlib_size_40);
 }
 
 .imageWrapper {
-  height: 60px;
-  width: 60px;
+  height: var(--imlib_size_60);
+  width: var(--imlib_size_60);
   overflow: hidden;
-}
-
-[dir=ltr] .imageWrapper {
-  margin-right: 10px;
-}
-
-[dir=rtl] .imageWrapper {
-  margin-left: 10px;
+  /* margin-right: var(--imlib_size_10); */
 }
 
 .image {
   width: 100%;
   height: 100%;
-  border-radius: 3px;
+  object-fit: cover;
+  border-radius: var(--imlib_size_3);
 }