@zohoim/chat-components 0.0.11 → 0.0.13

package/es/Message/Message.js

@@ -1,3 +1,4 @@
+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 */
 /* eslint-disable max-len */
 
@@ -8,128 +9,92 @@ import React from 'react';
 import messageDefaultProps from './props/defaultProps';
 import messagePropTypes from './props/propTypes';
 import { direction as directionConstants } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
 
 /** ** Components *** */
 import MessageBubble from '../MessageBubble/MessageBubble';
 import MessageBox from '../MessageBox/MessageBox';
-import IMMessageAvatar from '../im/IMMessageAvatar/IMMessageAvatar';
-import IMMessageActions from '../im/IMMessageActions/IMMessageActions';
-import IMMessageStatus from '../im/IMMessageStatus/IMMessageStatus';
+import MessageAvatar from '../MessageAvatar/MessageAvatar';
+import MessageActions from '../MessageActions/MessageActions';
+import MessageStatus from '../MessageStatus/MessageStatus';
+const {
+  FAILED
+} = messageStatusConstants;
 export default function Message(props) {
   const {
-    customStyle,
     direction,
     isActive,
-    needMessageActions,
-    renderMessageBoxFooter,
-    /* Avatar Related Props Start */
-    needSender,
     isShowSender,
-    senderSrc,
-    senderAlternateSrc,
-    senderTitle,
-    senderAvatarSize,
-    senderName,
-    avatarCustomStyle,
-    senderIntegrationIcon,
-    senderIntegrationIconSize,
-    senderIntegrationIconCustomStyle,
-    isCustomIntegrationIcon,
-    isCustomSenderAvatar,
-    renderCustomIntegrationIcon,
-    renderCustomSenderAvatar,
-    /*Avatar Related Props  End*/
-
-    /* MessageBox Props Start */
-    isFailedMessage,
-    needMessageBox,
-    renderMessage,
-    renderMessageFooter,
-    renderMessageHeader,
-    messageBoxCustomStyle,
-    /*MessageBox Props End */
-
-    /* MessageAction Props Start */
-    messageActions,
-    actionsDefaultShowCount,
-    actionIconCustomStyle,
-    moreActionItemCustomStyle,
-    onSelectAction,
-    messageActionCustomStyle,
-    moreActionPopupCustomStyle,
+    ownerDetails,
+    renderOwnerOverlay,
+    status,
+    statusTooltip,
+    actions,
     renderSecondaryActions,
-    /* MessageAction Props End */
-
-    /*MessageStatus Props Start */
-    messageStatus,
-    messageStatusCustomStyle,
-    statusTitle
-    /*MessageStatus Props End */
+    onSelectAction,
+    renderContent,
+    customProps
   } = props;
-  function handleRenderMessageStatus() {
+  const {
+    messageBubbleProps = dummyObject,
+    messageOwnerProps = dummyObject,
+    messageBoxProps = dummyObject,
+    messageStatusProps = dummyObject,
+    messageActionsProps = dummyObject
+  } = customProps;
+  const isIncoming = direction === directionConstants.IN;
+  const isOutgoing = direction === directionConstants.OUT;
+  const isFailed = status === FAILED;
+  function handleRenderMessageOwner() {
+    const {
+      src,
+      alternateSrc,
+      name
+    } = ownerDetails || dummyObject;
     const props = {
-      messageStatus,
-      customStyle: messageStatusCustomStyle,
-      title: statusTitle
+      src,
+      alternateSrc,
+      title: name,
+      renderIcon: renderOwnerOverlay
     };
-    return messageStatus ? /*#__PURE__*/React.createElement(IMMessageStatus, props) : null;
+    return ownerDetails ? /*#__PURE__*/React.createElement(MessageAvatar, _extends({}, props, messageOwnerProps)) : null;
   }
-  function handleRenderMessageBox() {
+  function handleRenderMessageStatus() {
     const props = {
-      renderMessageFooter,
-      renderMessageHeader,
-      renderMessageStatus: handleRenderMessageStatus,
-      renderMessage,
-      customStyle: messageBoxCustomStyle,
-      isFailed: isFailedMessage,
-      isIncoming: direction === directionConstants.IN,
-      isOutgoing: direction === directionConstants.OUT
+      messageStatus: status,
+      title: statusTooltip
     };
-    return /*#__PURE__*/React.createElement(MessageBox, props);
+    return status ? /*#__PURE__*/React.createElement(MessageStatus, _extends({}, props, messageStatusProps)) : null;
   }
-  function handleRenderMessageOwner() {
+  function handleRenderMessageBox() {
     const props = {
-      src: senderSrc,
-      alternateSrc: senderAlternateSrc,
-      title: senderTitle,
-      avatarSize: senderAvatarSize,
-      name: senderName,
-      customStyle: avatarCustomStyle,
-      integrationName: senderIntegrationIcon,
-      iconSize: senderIntegrationIconSize,
-      iconCustomStyle: senderIntegrationIconCustomStyle,
-      isCustomIcon: isCustomIntegrationIcon,
-      renderCustomIcon: renderCustomIntegrationIcon,
-      isCustomAvatar: isCustomSenderAvatar,
-      renderCustomAvatar: renderCustomSenderAvatar
+      renderMessageStatus: handleRenderMessageStatus,
+      renderMessage: renderContent,
+      isFailed,
+      isIncoming,
+      isOutgoing
     };
-    return isShowSender ? /*#__PURE__*/React.createElement(IMMessageAvatar, props) : null;
+    return /*#__PURE__*/React.createElement(MessageBox, _extends({}, props, messageBoxProps));
   }
   function handleRenderMessageActions() {
     const props = {
-      actions: messageActions,
-      renderSecondaryActions: renderSecondaryActions,
-      defaultShowCount: actionsDefaultShowCount,
-      actionIconCustomStyle: actionIconCustomStyle,
-      moreItemCustomStyle: moreActionItemCustomStyle,
+      actions,
       onSelect: onSelectAction,
-      customStyle: messageActionCustomStyle,
-      morePopupCustomStyle: moreActionPopupCustomStyle
+      renderSecondaryActions
     };
-    return /*#__PURE__*/React.createElement(IMMessageActions, props);
+    return /*#__PURE__*/React.createElement(MessageActions, _extends({}, props, messageActionsProps));
   }
-  return /*#__PURE__*/React.createElement(MessageBubble, {
+  const needMessageActions = !!actions;
+  return /*#__PURE__*/React.createElement(MessageBubble, _extends({
     direction: direction,
     isActive: isActive,
     needMessageActions: needMessageActions,
-    renderMessageBox: handleRenderMessageBox,
-    renderMessageBoxFooter: renderMessageBoxFooter,
-    renderMessageOwner: handleRenderMessageOwner,
+    needSender: isShowSender,
     renderMessageActions: handleRenderMessageActions,
-    customStyle: customStyle,
-    needSender: needSender,
-    isShowSender: isShowSender
-  });
+    renderMessageBox: handleRenderMessageBox,
+    renderMessageOwner: handleRenderMessageOwner
+  }, messageBubbleProps));
 }
 Message.propTypes = messagePropTypes;
 Message.defaultProps = messageDefaultProps;

package/es/Message/props/defaultProps.js

@@ -1,43 +1,11 @@
 /** ** Constants *** */
-import { dummyObject, dummyArray } from '@zohoim/chat-components-utils/es/constants';
 import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
-import sizes from '@zohoim/chat-components-utils/es/constants/sizes';
-import { actionsDefaultShowCount } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
 const messageDefaultProps = {
-  customStyle: dummyObject,
   direction: direction.IN,
   isActive: false,
-  needMessageActions: true,
-  needSender: true,
   isShowSender: true,
-  senderSrc: '',
-  senderAlternateSrc: '',
-  senderTitle: '',
-  //'RAVI KUMAR',
-  senderAvatarSize: 'medium',
-  senderName: '',
-  //'Ravi kumar',
-  avatarCustomStyle: dummyObject,
-  senderIntegrationIcon: '',
-  //WHATSAPP
-  senderIntegrationIconSize: sizes.SMALL,
-  senderIntegrationIconCustomStyle: dummyObject,
-  isCustomIntegrationIcon: false,
-  isCustomSenderAvatar: false,
-  needMessageBox: true,
-  isFailedMessage: false,
-  messageBoxCustomStyle: dummyObject,
-  messageActions: dummyArray,
-  actionsDefaultShowCount: actionsDefaultShowCount,
-  actionIconCustomStyle: dummyObject,
-  moreActionItemCustomStyle: dummyObject,
-  messageActionCustomStyle: dummyObject,
-  moreActionPopupCustomStyle: dummyObject,
-  messageStatus: '',
-  // READ,
-  messageStatusCustomStyle: dummyObject,
-  statusTitle: '' // READ,
-  // renderMessage: () => <div>Test</div>
+  customProps: {}
+  // renderContent: () => <div>Test</div>
 };
 
 export default messageDefaultProps;

package/es/Message/props/propTypes.js

@@ -2,11 +2,9 @@
 import PropTypes from 'prop-types';
 
 /** ** Constants *** */
-import integrationConstants from '@zohoim/chat-components-utils/es/constants/integrationConstants';
 import { defaultMessageActions } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
 import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
 import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
-import sizes from '@zohoim/chat-components-utils/es/constants/sizes';
 const {
   REPLY,
   COPY,
@@ -16,15 +14,6 @@ const {
   DELETE,
   FORWARD
 } = defaultMessageActions;
-const {
-  WHATSAPP,
-  TELEGRAM,
-  INSTAGRAM,
-  ASAP,
-  WECHAT,
-  TWILLIO,
-  LINE
-} = integrationConstants;
 const {
   SENT,
   SAVED,
@@ -40,59 +29,32 @@ const {
   OUT
 } = direction;
 const messagePropTypes = {
-  customStyle: PropTypes.object,
-  direction: PropTypes.oneOf([IN, OUT]),
+  direction: PropTypes.oneOf([IN, OUT]).isRequired,
   isActive: PropTypes.bool,
-  needMessageActions: PropTypes.bool,
-  renderMessageBoxFooter: PropTypes.func,
-  /* Avatar Related Props Start */
-  needSender: PropTypes.bool,
   isShowSender: PropTypes.bool,
-  senderSrc: PropTypes.string,
-  senderAlternateSrc: PropTypes.string,
-  senderTitle: PropTypes.string,
-  senderAvatarSize: PropTypes.oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
-  senderName: PropTypes.string,
-  avatarCustomStyle: PropTypes.object,
-  senderIntegrationIcon: PropTypes.oneOf([WHATSAPP, TELEGRAM, INSTAGRAM, ASAP, WECHAT, TWILLIO, LINE]),
-  senderIntegrationIconSize: PropTypes.oneOf([sizes.SMALL, sizes.MEDIUM]),
-  senderIntegrationIconCustomStyle: PropTypes.object,
-  isCustomIntegrationIcon: PropTypes.bool,
-  isCustomSenderAvatar: PropTypes.bool,
-  renderCustomIntegrationIcon: PropTypes.func,
-  renderCustomSenderAvatar: PropTypes.func,
-  /*Avatar Related Props  End*/
-
-  /* MessageBox Props Start */
-  needMessageBox: PropTypes.bool,
-  renderMessage: PropTypes.func.isRequired,
-  renderMessageFooter: PropTypes.func,
-  renderMessageHeader: PropTypes.func,
-  messageBoxCustomStyle: PropTypes.object,
-  isFailedMessage: PropTypes.bool,
-  /*MessageBox Props End */
-
-  /* MessageAction Props Start */
-  messageActions: PropTypes.arrayOf(PropTypes.shape({
+  ownerDetails: PropTypes.shape({
+    src: PropTypes.string,
+    alternateSrc: PropTypes.string,
+    name: PropTypes.string
+  }),
+  renderOwnerOverlay: PropTypes.func,
+  status: PropTypes.oneOf([SENT, SAVED, QUEUED, DELIVERED, READ, UNSENT, FAILED, OUTGOING]),
+  statusTooltip: PropTypes.string,
+  actions: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([REPLY, COPY, DOWNLOAD, CREATE_TICKET, RESEND, DELETE, FORWARD])]).isRequired,
     displayText: PropTypes.string,
     renderFunction: PropTypes.func,
     iconTitle: PropTypes.string
   })),
-  renderSecondaryActions: PropTypes.func,
-  actionsDefaultShowCount: PropTypes.number,
-  actionIconCustomStyle: PropTypes.object,
-  moreActionItemCustomStyle: PropTypes.object,
   onSelectAction: PropTypes.func,
-  messageActionCustomStyle: PropTypes.object,
-  moreActionPopupCustomStyle: PropTypes.object,
-  /* MessageAction Props End */
-
-  /* MessageStatus Props Start */
-  messageStatus: PropTypes.oneOf([SENT, SAVED, QUEUED, DELIVERED, READ, UNSENT, FAILED, OUTGOING]),
-  messageStatusCustomStyle: PropTypes.object,
-  statusTitle: PropTypes.string
-  /*MessageStatus Props End */
+  renderSecondaryActions: PropTypes.func,
+  renderContent: PropTypes.func.isRequired,
+  customProps: PropTypes.shape({
+    messageBubbleProps: PropTypes.object,
+    messageOwnerProps: PropTypes.object,
+    messageBoxProps: PropTypes.object,
+    messageStatusProps: PropTypes.object,
+    messageActionsProps: PropTypes.object
+  })
 };
-
 export default messagePropTypes;

package/es/MessageAction/MessageAction.js

@@ -24,19 +24,19 @@ export default function MessageAction(props) {
     closePopup
   } = props;
   return /*#__PURE__*/React.createElement(React.Fragment, null, isShowInMore ? /*#__PURE__*/React.createElement(MoreActionItem, {
+    closePopup: closePopup,
+    customStyle: moreItemCustomStyle,
     displayText: displayText,
     iconTitle: iconTitle,
     id: id,
     index: index,
-    customStyle: moreItemCustomStyle,
     onClick: onClick,
-    renderIcon: renderIcon,
-    closePopup: closePopup
+    renderIcon: renderIcon
   }) : /*#__PURE__*/React.createElement(ActionIcon, {
-    renderIcon: renderIcon,
     customStyle: actionIconCustomStyle,
-    onClick: onClick,
     id: id,
+    onClick: onClick,
+    renderIcon: renderIcon,
     title: iconTitle
   }));
 }

package/es/MessageActions/MessageActions.js

@@ -1,75 +1,150 @@
+/* eslint-disable no-use-before-define */
+/* eslint-disable react/jsx-no-bind */
 /* eslint-disable max-len */
+/* eslint-disable arrow-parens */
 
 /** ** Libraries *** */
 import React from 'react';
 
 /** ** Components *** */
-import { Container } from '@zohodesk/components/lib/Layout';
-import MessageActionsMore from '../MessageActionsMore/MessageActionsMore';
+import ActionIcon from '../ActionIcon/ActionIcon';
+import MessageActionsWrapper from '../MessageActionsWrapper/MessageActionsWrapper';
+import MessageAction from '../MessageAction/MessageAction';
 
-/** ** Hooks *** */
-import { useMessageAction } from '@zohoim/chat-components-hooks';
+/** ** Icons *** */
+import ReplyIcon from '@zohodesk/icon/es/general/Reply';
+import ReloadIcon from '@zohodesk/icon/es/general/Reload';
+import CopyIcon from '@zohodesk/icon/es/general/Copy';
+import DownloadIcon from '@zohodesk/icon/es/general/Cloud';
+import DeleteIcon from '@zohodesk/icon/es/general/Delete';
+import ForwardIcon from '@zohodesk/icon/es/channels/EmailForward';
+import MoreIcon from '@zohodesk/icon/es/general/More';
+import ConvertTicket from '../icons/iconSrc/actions/ConvertTicket';
 
-/** ** Constants *** */
-import messageActionsDefaultProps from './props/defaultProps';
-import messageActionsPropTypes from './props/propTypes';
-import constantProps from './props/propConstants';
+/** ** Hooks *** */
+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';
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 import cssJSLogic from './css/cssJSLogic';
 
-/** ** Style *** */
+/** ** Constants *** */
+import messageActionsDefaultProps from './props/defaultProps';
+import messageActionsPropTypes from './props/propTypes';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { defaultMessageActions } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
+
+/** ** CSS *** */
 import style from './css/MessageActions.module.css';
-function MessageActions(props) {
+const {
+  REPLY,
+  COPY,
+  DOWNLOAD,
+  CREATE_TICKET,
+  RESEND,
+  DELETE,
+  FORWARD
+} = defaultMessageActions;
+export default function MessageActions(props) {
   const {
     actions,
-    renderMoreIcon,
     defaultShowCount,
+    actionIconCustomStyle,
+    moreItemCustomStyle,
+    onSelect,
     customStyle,
-    morePopupCustomStyle
+    morePopupCustomStyle,
+    renderSecondaryActions
   } = props;
 
   /* external customization */
   const newStyle = useMergeStyle(style, customStyle);
   /* css classnames added based on logic */
   const {
-    actionsClass
+    moreIconClass,
+    secondaryActionsClass,
+    iconStyle
   } = cssJSLogic(props, newStyle);
   const {
-    isShowMore: isShowMoreIcon,
-    revampedActions = []
-  } = useMessageAction(actions, defaultShowCount);
+    actionDetails
+  } = useMessageActions({
+    actions,
+    defaultRenderFunction: renderAction
+  });
   const {
-    defaultActions = [],
-    moreActions
-  } = revampedActions;
-  function renderRow(defaultActions, isShowMore) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row"
-    }, defaultActions.map(action => {
-      const {
-        id,
-        renderFunction
-      } = action;
-      return renderHandler(renderFunction)({
-        id,
-        isShowInMore: false,
-        action
-      }); // id, isRenderInMorePopup
-    }), isShowMore ? /*#__PURE__*/React.createElement(MessageActionsMore, {
-      actions: moreActions,
-      renderMoreIcon: renderMoreIcon,
-      customStyle: morePopupCustomStyle
-    }) : null));
+    allActions
+  } = actionDetails;
+  function handleClickAction(_ref) {
+    let {
+      id,
+      e
+    } = _ref;
+    onSelect && onSelect({
+      id,
+      e
+    });
+  }
+  function renderIcon(_ref2) {
+    let {
+      id
+    } = _ref2;
+    const iconMapping = {
+      [REPLY]: ReplyIcon,
+      [COPY]: CopyIcon,
+      [DOWNLOAD]: DownloadIcon,
+      [CREATE_TICKET]: ConvertTicket,
+      [RESEND]: ReloadIcon,
+      [DELETE]: DeleteIcon,
+      [FORWARD]: ForwardIcon
+    };
+    const IconComponent = iconMapping[id];
+    return IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
+      customStyle: iconStyle
+    }) : null;
+  }
+  function renderAction() {
+    let {
+      id,
+      isShowInMore,
+      action,
+      closePopup
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      displayText,
+      iconTitle
+    } = action || dummyObject;
+    return /*#__PURE__*/React.createElement(MessageAction, {
+      actionIconCustomStyle: actionIconCustomStyle,
+      closePopup: closePopup,
+      displayText: displayText,
+      iconTitle: iconTitle,
+      id: id,
+      index: id,
+      isShowInMore: isShowInMore,
+      key: id,
+      moreItemCustomStyle: moreItemCustomStyle,
+      onClick: handleClickAction,
+      renderIcon: renderIcon
+    });
+  }
+  function renderMoreIcon() {
+    return /*#__PURE__*/React.createElement(ActionIcon, {
+      customStyle: actionIconCustomStyle,
+      renderIcon: () => /*#__PURE__*/React.createElement("div", {
+        className: moreIconClass
+      }, /*#__PURE__*/React.createElement(MoreIcon, null))
+    });
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: actionsClass
-  }, renderRow(defaultActions, isShowMoreIcon));
+  const secondaryActions = renderHandler(renderSecondaryActions)();
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MessageActionsWrapper, {
+    actions: allActions,
+    defaultShowCount: defaultShowCount,
+    morePopupCustomStyle: morePopupCustomStyle,
+    renderMoreIcon: renderMoreIcon
+  }), secondaryActions ? /*#__PURE__*/React.createElement("div", {
+    className: secondaryActionsClass
+  }, secondaryActions) : null);
 }
-MessageActions.defaultProps = messageActionsDefaultProps;
 MessageActions.propTypes = messageActionsPropTypes;
-MessageActions.constantProps = constantProps;
-MessageActions.displayName = 'MessageActions';
-export default MessageActions;
+MessageActions.defaultProps = messageActionsDefaultProps;

package/es/MessageActions/css/MessageActions.module.css

@@ -1,3 +1,31 @@
-.messageActions {
-  /*Use this class for message actions customization*/
+.varClass {
+  /* --imMessageActions-secondaryActions_margin: var(--imlib_size_5); */
+  --imMessageActions-action_icon_size: var(--imlib_size_15);
+}
+
+[dir=ltr] .moreIcon svg {
+  transform: rotate(90deg);
+}
+
+[dir=rtl] .moreIcon svg {
+  transform: rotate(-90deg);
+}
+
+.secondaryActions {
+  composes: varClass;
+  /* margin-top: var(--imMessageActions-secondaryActions_margin); */
+}
+
+[dir=ltr] .secondaryActions {
+  text-align: left;
+}
+
+[dir=rtl] .secondaryActions {
+  text-align: right;
+}
+
+.icon {
+  composes: varClass;
+  width: var(--imMessageActions-action_icon_size);
+  height: var(--imMessageActions-action_icon_size);
 }

package/es/MessageActions/css/cssJSLogic.js

@@ -1,10 +1,20 @@
 /** ** Methods *** */
 import { compileClassNames } from '@zohodesk/utils';
 export default function cssJSLogic(props, style) {
-  const actionsClass = compileClassNames({
-    [style.messageActions]: true
+  const moreIconClass = compileClassNames({
+    [style.moreIcon]: true
+  });
+  const secondaryActionsClass = compileClassNames({
+    [style.secondaryActions]: true
+  });
+  const iconClass = compileClassNames({
+    [style.icon]: true
   });
   return {
-    actionsClass
+    moreIconClass,
+    secondaryActionsClass,
+    iconStyle: {
+      base: iconClass
+    }
   };
 }

package/es/MessageActions/props/defaultProps.js

@@ -1,10 +1,12 @@
 /** ** Constants *** */
 import { dummyObject, dummyArray } from '@zohoim/chat-components-utils/es/constants';
-import propConstants from './propConstants';
+import { actionsDefaultShowCount } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
 const messageActionsDefaultProps = {
-  actions: dummyArray,
   customStyle: dummyObject,
+  actionIconCustomStyle: dummyObject,
   morePopupCustomStyle: dummyObject,
-  defaultShowCount: propConstants.actions.defaultShowCount
+  moreItemCustomStyle: dummyObject,
+  defaultShowCount: actionsDefaultShowCount,
+  actions: dummyArray
 };
 export default messageActionsDefaultProps;

package/es/MessageActions/props/propTypes.js

@@ -1,12 +1,30 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
+
+/** ** Constants *** */
+import { defaultMessageActions } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
+const {
+  REPLY,
+  COPY,
+  DOWNLOAD,
+  CREATE_TICKET,
+  RESEND,
+  DELETE,
+  FORWARD
+} = defaultMessageActions;
 const messageActionsPropTypes = {
-  renderMoreIcon: PropTypes.func,
   actions: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    renderFunction: PropTypes.func
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([REPLY, COPY, DOWNLOAD, CREATE_TICKET, RESEND, DELETE, FORWARD])]).isRequired,
+    displayText: PropTypes.string,
+    renderFunction: PropTypes.func,
+    iconTitle: PropTypes.string
   })).isRequired,
   defaultShowCount: PropTypes.number,
-  customStyle: PropTypes.object
+  actionIconCustomStyle: PropTypes.object,
+  morePopupCustomStyle: PropTypes.object,
+  moreItemCustomStyle: PropTypes.object,
+  onSelect: PropTypes.func,
+  customStyle: PropTypes.object,
+  renderSecondaryActions: PropTypes.func
 };
 export default messageActionsPropTypes;