@zohoim/chat-components 0.0.11 → 0.0.13

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,8 +33,7 @@ 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,
@@ -56,12 +54,13 @@ export default function IMReplyBubble(props) {
     });
   }
   function renderIcon() {
+    // 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: attachmentURL,
-      alt: fileName
+      src: attachmentURL
     })) : fileFormat ? /*#__PURE__*/React.createElement(IMAttachmentIcon, {
       customStyle: {
         $icon: newStyle.attachmentIcon
@@ -72,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);
 }

package/es/im/IMTextBubble/IMTextBubble.js

@@ -12,7 +12,6 @@ import imTextBubbleDefaultProps from './props/defaultProps';
 import imTextBubblePropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
@@ -43,10 +42,10 @@ export default function IMTextBubble(props) {
     className: imTextBubbleWrapperClass
   }, isShowQuote ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(QuoteIcon, null)) : null, /*#__PURE__*/React.createElement(TextBubble, {
     customStyle: textBubbleCustomStyle,
-    message: sanitizedDisplayMessage,
     isShowMoreText: isShowSeeMore,
-    onClickMore: onLoadFullMessage,
-    moreText: moreText
+    message: sanitizedDisplayMessage,
+    moreText: moreText,
+    onClickMore: onLoadFullMessage
   }));
 }
 IMTextBubble.propTypes = imTextBubblePropTypes;

package/es/im/IMTicketLink/IMTicketLink.js

@@ -14,9 +14,7 @@ import imTicketLinkDefaultProps from './props/defaultProps';
 import imTicketLinkPropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
-import { URLValidator } from '@zohoim/chat-components-utils/es/imUtils/security';
 
 /** ** Styles *** */
 import style from './css/IMTicketLink.module.css';
@@ -38,8 +36,8 @@ export default function IMTicketLink(props) {
   } = cssJSLogic(props, newStyle);
   return ticketNumber ? /*#__PURE__*/React.createElement("a", {
     className: imTicketLinkClass,
-    onClick: onClick,
     href: ticketURL,
+    onClick: onClick,
     rel: "noopener noreferrer"
   }, ticketNumber) : null;
 }

package/es/im/IMVideoBubble/IMVideoBubble.js

@@ -12,7 +12,6 @@ import imVideoBubbleDefaultProps from './props/defaultProps';
 import imVideoBubblePropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
@@ -47,14 +46,14 @@ export default function IMVideoBubble(props) {
   return isShow ? /*#__PURE__*/React.createElement("div", {
     className: imVideoBubbleClass
   }, /*#__PURE__*/React.createElement(VideoBubble, {
-    customStyle: videoBubbleCustomStyle,
-    headerCustomStyle: headerCustomStyle,
     audioCustomStyle: videoCustomStyle,
     controlsCustomStyle: controlsCustomStyle,
+    customStyle: videoBubbleCustomStyle,
     fileName: fileName,
     fileSize: fileSize,
+    fileType: fileType,
     fileURL: fileURL,
-    fileType: fileType
+    headerCustomStyle: headerCustomStyle
   })) : null;
 }
 IMVideoBubble.propTypes = imVideoBubblePropTypes;

package/es/im/index.js

@@ -1,7 +1,5 @@
 export * from './IMIntegrationIcon';
-export * from './IMMessageActions';
 export * from './IMMessageAvatar';
-export * from './IMMessageStatus';
 export * from './IMMessage';
 export * from './IMDateTime';
 export * from './IMTicketLink';

package/es/index.js

@@ -1,37 +1,35 @@
-export * from "./MessageBubble";
+export * from './MessageBubble';
 
 // export * from './AvatarSpace';
-export * from "./MessageActions";
-export * from "./MessageBox";
-export * from "./MessageBoxHeader";
-export * from "./MessageBoxFooter";
-export * from "./ActionIcon";
-export * from "./MessageActionsMore";
-export * from "./TextMessage";
-export * from "./MessageAvatar";
-export * from "./MoreActionItem";
-export * from "./MessageAction";
-export * from "./Theme";
-export * from "./MessageWrapper";
-export * from "./Message";
-export * from "./AudioBubble";
-export * from "./AttachmentBubble";
-export * from "./VideoBubble";
-export * from "./ImageBubble";
-export * from "./TextBubble";
-export * from "./ArticleBubble";
-export * from "./LocationBubble";
-export * from "./InfoBubble";
-export * from "./AttachmentBubbleInfo";
-export * from "./Audio";
-export * from "./Video";
-export * from "./ReplyBubble";
-export * from "./ReplyBubbleHeader";
-export * from "./LazyLoadImage";
+export * from './MessageActionsWrapper';
+export * from './MessageActions';
+export * from './MessageBox';
+export * from './ActionIcon';
+export * from './MessageActionsMore';
+export * from './MessageAvatar';
+export * from './MoreActionItem';
+export * from './MessageAction';
+export * from './Theme';
+export * from './Message';
+export * from './AudioBubble';
+export * from './AttachmentBubble';
+export * from './VideoBubble';
+export * from './ImageBubble';
+export * from './TextBubble';
+export * from './ArticleBubble';
+export * from './LocationBubble';
+export * from './InfoBubble';
+export * from './AttachmentBubbleInfo';
+export * from './Audio';
+export * from './Video';
+export * from './ReplyBubble';
+export * from './ReplyBubbleHeader';
+export * from './LazyLoadImage';
 export * from './ReplyBubbleContent';
+export * from './MessageStatus';
 export * from './im';
 
 // ... export other components
 
-/*** CONSTANTS ***/
-export * from "./constants";
+/** * CONSTANTS ** */
+export * from './constants';

package/es/{MessageWrapper → unused/MessageWrapper}/MessageWrapper.js

@@ -12,7 +12,6 @@ import messageWrapperDefaultProps from './props/defaultProps';
 import messageWrapperPropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */

package/es/{TextMessage → unused/TextMessage}/DefaultActions.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-no-bind */
 /* eslint-disable max-len */
 import React from 'react';
-import { ActionIcon, MessageActions } from '..';
+import { ActionIcon, MessageActionsWrapper } from '../..';
 import ReplyIcon from '@zohodesk/icon/es/general/Reply';
 import CopyIcon from '@zohodesk/icon/es/general/Copy';
 import DownloadIcon from '@zohodesk/icon/es/general/Cloud';
@@ -40,7 +40,7 @@ function DefaultActions(props) {
       renderIcon: () => /*#__PURE__*/React.createElement(DownloadIcon, null)
     });
   }
-  return /*#__PURE__*/React.createElement(MessageActions, {
+  return /*#__PURE__*/React.createElement(MessageActionsWrapper, {
     actions: [{
       id: 'Reply',
       renderFunction: renderReply
@@ -53,8 +53,8 @@ function DefaultActions(props) {
     }, ...customActions]
     // actions={actions}
     ,
-    renderMoreIcon: renderMoreIcon,
-    moreCount: moreCount
+    moreCount: moreCount,
+    renderMoreIcon: renderMoreIcon
   });
 }
 export default DefaultActions;

package/es/{TextMessage → unused/TextMessage}/TextMessage.js

@@ -3,17 +3,17 @@
 import React from 'react';
 
 /** ** Components *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-import MessageBubble from '../MessageBubble/MessageBubble';
-import MessageBox from '../MessageBox/MessageBox';
-import MessageActions from '../MessageActions/MessageActions';
+import MessageBubble from '../../MessageBubble/MessageBubble';
+import MessageBox from '../../MessageBox/MessageBox';
+import MessageActionsWrapper from '../../MessageActionsWrapper/MessageActionsWrapper';
 
 /** ** Constants *** */
 import textMessageDefaultProps from './props/defaultProps';
 import textMessagePropTypes from './props/propTypes';
 
 /** ** Styles *** */
-import style from './css/TextMessage.module.css';
+// import style from './css/TextMessage.module.css';
+
 export default function TextMessage(props) {
   const {
     direction,
@@ -23,8 +23,8 @@ export default function TextMessage(props) {
     renderMessageHeader,
     renderMessageFooter,
     renderMessageBoxFooter,
-    needAvatar,
-    avatarProps,
+    // needAvatar,
+    // avatarProps,
     messageActions,
     renderMoreIcon,
     actionsCount,
@@ -33,8 +33,8 @@ export default function TextMessage(props) {
   function renderMessageBox() {
     return /*#__PURE__*/React.createElement(MessageBox, {
       renderMessage: renderMessage,
-      renderMessageHeader: renderMessageHeader,
       renderMessageFooter: renderMessageFooter,
+      renderMessageHeader: renderMessageHeader,
       renderMessageStatus: renderStatus
     });
   }
@@ -43,22 +43,22 @@ export default function TextMessage(props) {
   }
 
   function renderMessageActions() {
-    return /*#__PURE__*/React.createElement(MessageActions, {
+    return /*#__PURE__*/React.createElement(MessageActionsWrapper, {
       actions: messageActions,
-      renderMoreIcon: renderMoreIcon,
-      moreCount: actionsCount
+      moreCount: actionsCount,
+      renderMoreIcon: renderMoreIcon
     });
   }
   return /*#__PURE__*/React.createElement(MessageBubble, {
     direction: direction,
     isActive: isActive,
     needMessageActions: needMessageActions,
-    renderMessageBox: renderMessageBox
+    renderMessageActions: renderMessageActions
     // renderMessageBoxHeader={() => null}
     ,
+    renderMessageBox: renderMessageBox,
     renderMessageBoxFooter: renderMessageBoxFooter,
-    renderMessageOwner: renderMessageOwner,
-    renderMessageActions: renderMessageActions
+    renderMessageOwner: renderMessageOwner
   });
 }
 TextMessage.displayName = 'TextMessage';