@zohoim/chat-components 0.0.2

package/README.md

@@ -0,0 +1,9 @@
+#IM - CHAT COMPONENTS LIBRARY
+
+#How to install our package
+
+> npm install @zohoim/chat-components
+
+#How to import our components
+
+> import Avatar from '@zohoim/chat-components/es/MessageBubble/MessageBubble’;

package/es/ActionIcon/ActionIcon.js

@@ -0,0 +1,45 @@
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Hooks *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+
+/** ** Constants *** */
+import actionIconDefaultProps from './props/defaultProps';
+import actionIconPropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/ActionIcon.module.css';
+export default function ActionIcon(props) {
+  const {
+    renderIcon,
+    customStyle,
+    onClick,
+    id
+  } = props;
+  function handleClick() {
+    onClick && onClick(id);
+  }
+
+  /* external customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+  const {
+    actionIconClass
+  } = cssJSLogic(props, newStyle);
+  const icon = renderHandler(renderIcon)();
+  return icon ? /*#__PURE__*/React.createElement("div", {
+    onClick: handleClick,
+    className: actionIconClass
+  }, icon) : null;
+}
+ActionIcon.propTypes = actionIconPropTypes;
+ActionIcon.defaultProps = actionIconDefaultProps;
+ActionIcon.displayName = 'ActionIcon';
+// ActionIcons.constantProps = constantProps;

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

@@ -0,0 +1,28 @@
+.varClass {
+  --actionIcon-height: var(--imlib_size_26);
+  --actionIcon-width: var(--imlib_size_26);
+  --actionIcon-border: var(--imlib_size_1);
+  --actionIcon-border_radius: var(--imlib_size_4);
+}
+
+.actionIcon {
+  composes: varClass;
+
+  display: inline-flex;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  color: var(--imlib_chat_components_actionIcon_color);
+  position: relative;
+  width: var(--actionIcon-width);
+  height: var(--actionIcon-height);
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: var(--actionIcon-border) solid transparent;
+  border-radius: var(--actionIcon-border_radius);
+}
+
+.actionIcon:hover {
+  background-color: var(--imlib_chat_components_actionIcon_bg_color);
+  border-color: var(--imlib_chat_components_actionIcon_border_color);
+}

package/es/ActionIcon/css/cssJSLogic.js

@@ -0,0 +1,9 @@
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const actionIconClass = compileClassNames({
+    [style.actionIcon]: true
+  });
+  return {
+    actionIconClass
+  };
+}

package/es/ActionIcon/index.js

@@ -0,0 +1 @@
+export { default as ActionIcon } from './ActionIcon';

package/es/ActionIcon/props/defaultProps.js

@@ -0,0 +1,4 @@
+const actionIconDefaultProps = {
+  customStyle: {}
+};
+export default actionIconDefaultProps;

package/es/ActionIcon/props/propTypes.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+const actionIconPropTypes = {
+  customStyle: PropTypes.object,
+  renderIcon: PropTypes.func,
+  onClick: PropTypes.func,
+  id: PropTypes.string
+};
+export default actionIconPropTypes;

package/es/AvatarSpace/AvatarSpace.js

@@ -0,0 +1,35 @@
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Components *** */
+import Avatar from '@zohodesk/components/es/Avatar/Avatar';
+
+/** ** CSS *** */
+import style from './css/AvatarSpace.module.css';
+
+/** ** Methods *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+
+/** ** Constants *** */
+import avatarSpaceDefaultProps from './props/defaultProps';
+import avatarSpacePropTypes from './props/propTypes';
+import constantProps from './props/propConstants';
+export default function AvatarSpace(props) {
+  const {
+    needAvatar,
+    avatarProps,
+    customStyle
+  } = props;
+
+  /* external customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    className: newStyle.dp
+  }, needAvatar ? /*#__PURE__*/React.createElement(Avatar, avatarProps) : null);
+}
+AvatarSpace.propTypes = avatarSpacePropTypes;
+AvatarSpace.defaultProps = avatarSpaceDefaultProps;
+AvatarSpace.constantProps = constantProps;
+AvatarSpace.displayName = 'AvatarSpace';

package/es/AvatarSpace/css/AvatarSpace.module.css

@@ -0,0 +1 @@
+

package/es/AvatarSpace/css/cssJSLogic.js

@@ -0,0 +1,15 @@
+import { compileClassNames } from '@zohodesk/utils';
+import propConstants from '../props/propConstants';
+export default function cssJSLogic(props, style) {
+  const {
+    avatarPosition
+  } = props;
+  const positionClass = compileClassNames({
+    [style.avatarTop]: avatarPosition === propConstants.position.top,
+    [style.avatarBottom]: avatarPosition === propConstants.position.bottom,
+    [style.avatarMiddle]: avatarPosition === propConstants.position.middle
+  });
+  return {
+    positionClass
+  };
+}

package/es/AvatarSpace/index.js

@@ -0,0 +1 @@
+export { default as AvatarSpace } from './AvatarSpace';

package/es/AvatarSpace/props/defaultProps.js

@@ -0,0 +1,10 @@
+import propConstants from './propConstants';
+const avatarSpaceDefaultProps = {
+  avatarPosition: propConstants.position.bottom,
+  customStyle: {},
+  needAvatar: true,
+  avatarProps: {
+    name: 'Ravi'
+  }
+};
+export default avatarSpaceDefaultProps;

package/es/AvatarSpace/props/propConstants.js

@@ -0,0 +1,7 @@
+export default {
+  position: {
+    top: 'top',
+    bottom: 'bottom',
+    middle: 'middle'
+  }
+};

package/es/AvatarSpace/props/propTypes.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+const avatarSpacePropTypes = {
+  avatarPosition: PropTypes.string,
+  needAvatar: PropTypes.bool,
+  avatarProps: PropTypes.object,
+  customStyle: PropTypes.object
+};
+export default avatarSpacePropTypes;

package/es/MessageActions/MessageActions.js

@@ -0,0 +1,52 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+/** ** Components *** */
+import { Container } from '@zohodesk/components/lib/Layout';
+import { MessageActionsMore } from '..';
+
+/** ** Hooks *** */
+import { useMessageAction } from '@zohoim/chat-components-hooks';
+
+/** ** Constants *** */
+import messageActionsDefaultProps from './props/defaultProps';
+import messageActionsPropTypes from './props/propTypes';
+import constantProps from './props/propConstants';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/renderHandler';
+function MessageActions(props) {
+  const {
+    actions,
+    renderMoreIcon,
+    moreCount
+  } = props;
+  const {
+    isShowMore: isShowMoreIcon,
+    revampedActions = []
+  } = useMessageAction(actions, moreCount);
+  const {
+    defaultActions = [],
+    moreActions
+  } = revampedActions;
+  function renderRow(defaultActions, isShowMore) {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row"
+    }, defaultActions.map(action => {
+      const {
+        id,
+        renderFunction
+      } = action;
+      return renderHandler(renderFunction)(id, false); // id, isRenderInMorePopup
+    }), isShowMore ? /*#__PURE__*/React.createElement(MessageActionsMore, {
+      actions: moreActions,
+      renderMoreIcon: renderMoreIcon
+    }) : null));
+  }
+  return /*#__PURE__*/React.createElement("div", null, renderRow(defaultActions, isShowMoreIcon));
+}
+MessageActions.defaultProps = messageActionsDefaultProps;
+MessageActions.propTypes = messageActionsPropTypes;
+MessageActions.constantProps = constantProps;
+MessageActions.displayName = 'MessageActions';
+export default MessageActions;

package/es/MessageActions/index.js

@@ -0,0 +1,2 @@
+export { default as MessageActions } from './MessageActions';
+export { default as MessageActionsPropTypes } from './props/propTypes';

package/es/MessageActions/props/defaultProps.js

@@ -0,0 +1,7 @@
+import propConstants from './propConstants';
+const messageActionsDefaultProps = {
+  actions: [],
+  customStyle: {},
+  moreCount: propConstants.actions.moreCount
+};
+export default messageActionsDefaultProps;

package/es/MessageActions/props/propConstants.js

@@ -0,0 +1,5 @@
+export default {
+  actions: {
+    moreCount: 2
+  }
+};

package/es/MessageActions/props/propTypes.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+const messageActionsPropTypes = {
+  renderMoreIcon: PropTypes.func,
+  actions: PropTypes.arrayOf(PropTypes.object),
+  moreCount: PropTypes.number,
+  customStyle: PropTypes.object
+};
+export default messageActionsPropTypes;

package/es/MessageActionsMore/MessageActionsMore.js

@@ -0,0 +1,71 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Components *** */
+import Popup from '@zohodesk/components/lib/Popup/Popup';
+import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
+
+/** ** Constants *** */
+import messageActionsMoreDefaultProps from './props/defaultProps';
+import messageActionsMorePropTypes from './props/propTypes';
+import { MSG_ACTION_POPUP_PORTAL } from '../constants';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/renderHandler';
+
+/** ** Styles *** */
+import style from './css/MessageActionsMore.module.css';
+function MessageActionsMoreComp(props) {
+  const {
+    actions,
+    renderMoreIcon,
+    customStyle,
+    /**** Popup Props ****/
+    getTargetRef,
+    getContainerRef,
+    position,
+    togglePopup,
+    isPopupReady,
+    isPopupOpen,
+    removeClose,
+    isAbsolutePositioningNeeded,
+    positionsOffset
+  } = props;
+  const moreIcon = renderHandler(renderMoreIcon)();
+  return /*#__PURE__*/React.createElement("span", {
+    className: style.container
+  }, moreIcon ? /*#__PURE__*/React.createElement("div", {
+    onClick: togglePopup,
+    ref: getTargetRef
+  }, moreIcon) : null, isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
+    boxPosition: position,
+    getRef: getContainerRef,
+    isActive: isPopupReady,
+    isAnimate: true,
+    isArrow: false,
+    onClick: removeClose,
+    isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+    positionMapping: positionsOffset,
+    positionsOffset: positionsOffset,
+    portalId: MSG_ACTION_POPUP_PORTAL,
+    size: "small"
+    // isModel
+  }, actions.map(action => {
+    const {
+      id,
+      renderFunction
+    } = action;
+    return renderHandler(renderFunction)(id, true); // id, isRenderInMorePopup
+  })) : null);
+}
+const MessageActionsMore = Popup(MessageActionsMoreComp, '', '', {
+  isAbsolutePositioningNeeded: false
+});
+MessageActionsMore.defaultProps = messageActionsMoreDefaultProps;
+MessageActionsMore.propTypes = messageActionsMorePropTypes;
+MessageActionsMore.displayName = 'MessageActionsMore';
+export default MessageActionsMore;

package/es/MessageActionsMore/css/MessageActionsMore.module.css

@@ -0,0 +1,3 @@
+.container {
+  display: inline-block;
+}

package/es/MessageActionsMore/index.js

@@ -0,0 +1 @@
+export { default as MessageActionsMore } from './MessageActionsMore';

package/es/MessageActionsMore/props/defaultProps.js

@@ -0,0 +1,4 @@
+export default {
+  customStyle: {},
+  actions: []
+};

package/es/MessageActionsMore/props/propTypes.js

@@ -0,0 +1,6 @@
+import PropTypes from 'prop-types';
+export default {
+  renderMoreIcon: PropTypes.func,
+  customStyle: PropTypes.object,
+  actions: PropTypes.arrayOf(PropTypes.object)
+};

package/es/MessageBox/MessageBox.js

@@ -0,0 +1,60 @@
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Hooks *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+
+/** ** Constants *** */
+import messageBoxDefaultProps from './props/defaultProps';
+import messageBoxPropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/MessageBox.module.css';
+function MessageBox(props) {
+  const {
+    renderMessage: renderMessageContent,
+    renderMessageFooter,
+    renderMessageHeader,
+    customStyle,
+    renderMessageStatus
+  } = props;
+
+  /* external customization */
+  const newStyle = useMergeStyle(style, customStyle);
+
+  /* css classnames added based on logic */
+  const {
+    messageBoxClass,
+    messageContentWrapperClass,
+    messageHeaderWrapperClass,
+    messageFooterWrapperClass,
+    messageStatusWrapperClass
+  } = cssJSLogic(props, newStyle);
+
+  /* Render Childrens */
+  const messageHeader = renderHandler(renderMessageHeader)();
+  const messageConent = renderHandler(renderMessageContent)();
+  const messageFooter = renderHandler(renderMessageFooter)();
+  const messageStatus = renderHandler(renderMessageStatus)();
+  return /*#__PURE__*/React.createElement("div", {
+    className: messageBoxClass
+  }, /*#__PURE__*/React.createElement("div", null, messageHeader ? /*#__PURE__*/React.createElement("div", {
+    className: messageHeaderWrapperClass
+  }, messageHeader) : null, messageConent ? /*#__PURE__*/React.createElement("div", {
+    className: messageContentWrapperClass
+  }, messageConent) : null, messageFooter ? /*#__PURE__*/React.createElement("div", {
+    className: messageFooterWrapperClass
+  }, messageFooter) : null), messageStatus ? /*#__PURE__*/React.createElement("div", {
+    className: messageStatusWrapperClass
+  }, messageStatus) : null);
+}
+MessageBox.propTypes = messageBoxPropTypes;
+MessageBox.defaultProps = messageBoxDefaultProps;
+MessageBox.displayName = 'MessageBox';
+export default MessageBox;

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

@@ -0,0 +1,38 @@
+.varClass {
+  --messageBox-content_padding: var(--imlib_size_14);
+  --messageBox-border_radius: var(--imlib_size_9);
+  --messageBox-message_status_gap: var(--imlib_size_12);
+  --messageBox-message_header_gap: var(--imlib_size_1);
+  --messageBox-message_footer_gap: var(--imlib_size_1);
+  /* --messageBox-max_width: var(--imlib_size_410); */
+}
+
+.messageBoxContainer {
+  composes: varClass;
+
+  display: inline-flex;
+  flex-direction: row;
+  align-items: flex-end;
+  /* max-width: var(--messageBox-max_width); */
+  word-wrap: break-word;
+
+  background-color: var(--imlib_chat_components_messageBox_bg_color);
+  padding: var(--messageBox-content_padding);
+  border-radius: var(--messageBox-border_radius);
+}
+
+.messageHeaderWrapper {
+  margin-bottom: var(--messageBox-message_header_gap);
+}
+
+.messageFooterWrapper {
+  margin-top: var(--messageBox-message_footer_gap);
+}
+
+[dir=ltr] .messageStatusWrapper {
+  margin-left: var(--messageBox-message_status_gap);
+}
+
+[dir=rtl] .messageStatusWrapper {
+  margin-right: var(--messageBox-message_status_gap);
+}

package/es/MessageBox/css/cssJSLogic.js

@@ -0,0 +1,25 @@
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const messageBoxClass = compileClassNames({
+    [style.messageBoxContainer]: true
+  });
+  const messageContentWrapperClass = compileClassNames({
+    [style.messageContentWrapper]: true
+  });
+  const messageHeaderWrapperClass = compileClassNames({
+    [style.messageHeaderWrapper]: true
+  });
+  const messageFooterWrapperClass = compileClassNames({
+    [style.messageFooterWrapper]: true
+  });
+  const messageStatusWrapperClass = compileClassNames({
+    [style.messageStatusWrapper]: true
+  });
+  return {
+    messageBoxClass,
+    messageContentWrapperClass,
+    messageHeaderWrapperClass,
+    messageFooterWrapperClass,
+    messageStatusWrapperClass
+  };
+}

package/es/MessageBox/index.js

@@ -0,0 +1,2 @@
+export { default as MessageBox } from './MessageBox';
+export { default as MessageBoxPropTypes } from './props/propTypes';

package/es/MessageBox/props/defaultProps.js

@@ -0,0 +1,3 @@
+export default {
+  customStyle: {}
+};

package/es/MessageBox/props/propTypes.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+export default {
+  renderMessageBox: PropTypes.func,
+  renderMessageBoxFooter: PropTypes.func,
+  renderMessageBoxHeader: PropTypes.func,
+  renderMessageStatus: PropTypes.func,
+  customStyle: PropTypes.object
+};

package/es/MessageBoxFooter/MessageBoxFooter.js

@@ -0,0 +1,32 @@
+/* eslint-disable max-len */
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Hooks *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+
+/** ** Constants *** */
+import messageBoxFooterDefaultProps from './props/defaultProps';
+import messageBoxFooterPropTypes from './props/propTypes';
+
+/** ** Styles *** */
+import style from './css/MessageBoxFooter.module.css';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/renderHandler';
+function MessageBoxFooter(props) {
+  const {
+    renderFooter,
+    customStyle
+  } = props;
+
+  /* external customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    className: newStyle.footer
+  }, renderHandler(renderFooter)());
+}
+MessageBoxFooter.propTypes = messageBoxFooterPropTypes;
+MessageBoxFooter.defaultProps = messageBoxFooterDefaultProps;
+MessageBoxFooter.displayName = 'MessageBoxFooter';
+export default MessageBoxFooter;

package/es/MessageBoxFooter/css/MessageBoxFooter.module.css

@@ -0,0 +1 @@
+

package/es/MessageBoxFooter/index.js

@@ -0,0 +1,2 @@
+export { default as MessageBoxFooter } from './MessageBoxFooter';
+export { default as MessageBoxFooterPropTypes } from './props/propTypes';

package/es/MessageBoxFooter/props/defaultProps.js

@@ -0,0 +1,3 @@
+export default {
+  customStyle: {}
+};

package/es/MessageBoxFooter/props/propTypes.js

@@ -0,0 +1,5 @@
+import PropTypes from 'prop-types';
+export default {
+  renderFooter: PropTypes.func,
+  customStyle: PropTypes.object
+};

package/es/MessageBoxHeader/MessageBoxHeader.js

@@ -0,0 +1,7 @@
+import React, { Component } from 'react';
+class MessageBoxHeader extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, "Ravikumar S");
+  }
+}
+export default MessageBoxHeader;

package/es/MessageBoxHeader/index.js

@@ -0,0 +1,2 @@
+export { default as MessageBoxHeader } from './MessageBoxHeader';
+export { default as MessageBoxHeaderPropTypes } from './props/propTypes';

package/es/MessageBubble/MessageBubble.js

@@ -0,0 +1,82 @@
+/* eslint-disable max-len */
+/* eslint-disable sort-imports */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Hooks *** */
+import { useMessageBubbleAction } from '@zohoim/chat-components-hooks/es/MessageBubble';
+
+/** ** Constants *** */
+import messageBubbleDefaultProps from './props/defaultProps';
+import messageBubblePropTypes from './props/propTypes';
+import constantProps from './props/propConstants';
+
+/** ** Methods *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import renderHandler from '@zohoim/chat-components-utils/es/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/MessageBubble.module.css';
+export default function MessageBubble(props) {
+  const {
+    // direction,
+    // renderMessageBoxHeader,
+    // tagAttributes,
+    renderMessageBox,
+    renderMessageBoxFooter,
+    renderMessageOwner,
+    renderMessageActions,
+    customStyle
+  } = props;
+
+  /* external customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+  const {
+    bubbleClass,
+    messageOwnerWrapperClass,
+    messageContainerClass,
+    messageBoxWrapperClass,
+    messageActionWrapperClass,
+    messageBoxFooterWrapperClass
+  } = cssJSLogic(props, newStyle);
+
+  /* Use Hooks */
+  const {
+    onMouseEnter,
+    onMouseLeave,
+    isRenderMessageAction
+  } = useMessageBubbleAction(props);
+
+  /* Render Childrens */
+  const messageActions = isRenderMessageAction ? renderHandler(renderMessageActions)() : null;
+  const messageOwner = renderHandler(renderMessageOwner)();
+  const messageBox = renderHandler(renderMessageBox)();
+  const messageBoxFooter = renderHandler(renderMessageBoxFooter)();
+  // const messageBoxHeader = renderHandler(renderMessageBoxHeader)();
+  // const messageActions = renderHandler(renderMessageActions)();
+
+  /* Construct Layout */
+  const messageLayout = /*#__PURE__*/React.createElement("div", {
+    className: bubbleClass,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, messageOwner ? /*#__PURE__*/React.createElement("div", {
+    className: messageOwnerWrapperClass
+  }, messageOwner) : null, messageBox || messageActions ? /*#__PURE__*/React.createElement("div", {
+    className: messageContainerClass
+  }, messageBox ? /*#__PURE__*/React.createElement("div", {
+    className: messageBoxWrapperClass
+  }, messageBox) : null, messageActions ? /*#__PURE__*/React.createElement("div", {
+    className: messageActionWrapperClass
+  }, messageActions) : null) : null, messageBoxFooter ? /*#__PURE__*/React.createElement("div", {
+    className: messageBoxFooterWrapperClass
+  }, messageBoxFooter) : null);
+  return messageLayout;
+}
+MessageBubble.propTypes = messageBubblePropTypes;
+MessageBubble.defaultProps = messageBubbleDefaultProps;
+MessageBubble.constantProps = constantProps;
+MessageBubble.displayName = 'MessageBubble';

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

@@ -0,0 +1,66 @@
+.varClass {
+  --messageBubble-bubble_footer_gap: var(--imlib_size_5);
+  --messageBubble-message_owner_gap: var(--imlib_size_13);
+  --messageBubble-message_action_gap: var(--imlib_size_12);
+  --messageBox-max_width: var(--imlib_size_410);
+}
+
+.messageBubble {
+  composes: varClass;
+  width: 100%;
+  display: grid;
+  grid-column-gap: var(--messageBubble-message_owner_gap);
+}
+
+.messageOwnerWrapper {
+  grid-area: messageOwner;
+  align-self: end;
+}
+
+.messageContainer {
+  grid-area: messageContainer;
+  display: grid;
+}
+
+.messageBoxWrapper {
+  grid-area: messageBox;
+  max-width: var(--messageBox-max_width);
+}
+
+.messageActionWrapper {
+  grid-area: messageAction;
+  margin: 0 var(--messageBubble-message_action_gap);
+}
+
+.messageBoxFooterWrapper {
+  grid-area: messageBoxFooter;
+  margin-top: var(--messageBubble-bubble_footer_gap);
+}
+
+.active {
+  background-color: var(--imlib_chat_components_messageBubble_active_bg_color);
+}
+
+.directionIn {
+  grid-template-columns: auto 1fr;
+  grid-template-areas:
+    'messageOwner messageContainer'
+    '. messageBoxFooter';
+}
+
+.directionOut {
+  grid-template-columns: 1fr auto;
+  grid-template-areas:
+    'messageContainer messageOwner'
+    'messageBoxFooter .';
+  justify-items: end;
+}
+
+.directionIn .messageContainer {
+  grid-template-columns: auto 1fr;
+  grid-template-areas: 'messageBox messageAction';
+}
+.directionOut .messageContainer {
+  grid-template-columns: 1fr auto;
+  grid-template-areas: 'messageAction messageBox';
+}

package/es/MessageBubble/css/cssJSLogic.js

@@ -0,0 +1,49 @@
+import { compileClassNames } from '@zohodesk/utils';
+import propConstants from '../props/propConstants';
+export default function cssJSLogic(props, style) {
+  const {
+    isActive,
+    direction
+  } = props;
+  const isIncoming = direction === propConstants.direction.in;
+  const isOutgoing = direction === propConstants.direction.out;
+
+  // const activeClass = compileClassNames({
+  //   [style.active]: isActive
+  // });
+
+  // const directionClass = compileClassNames({
+  //   [style.directionIn]: isIncoming,
+  //   [style.directionOut]: isOutgoing
+  // });
+
+  const bubbleClass = compileClassNames({
+    [style.messageBubble]: true,
+    [style.directionIn]: isIncoming,
+    [style.directionOut]: isOutgoing,
+    [style.active]: isActive
+  });
+  const messageOwnerWrapperClass = compileClassNames({
+    [style.messageOwnerWrapper]: true
+  });
+  const messageContainerClass = compileClassNames({
+    [style.messageContainer]: true
+  });
+  const messageBoxWrapperClass = compileClassNames({
+    [style.messageBoxWrapper]: true
+  });
+  const messageActionWrapperClass = compileClassNames({
+    [style.messageActionWrapper]: true
+  });
+  const messageBoxFooterWrapperClass = compileClassNames({
+    [style.messageBoxFooterWrapper]: true
+  });
+  return {
+    bubbleClass,
+    messageOwnerWrapperClass,
+    messageContainerClass,
+    messageBoxWrapperClass,
+    messageActionWrapperClass,
+    messageBoxFooterWrapperClass
+  };
+}

package/es/MessageBubble/index.js

@@ -0,0 +1,2 @@
+export { default as MessageBubble } from './MessageBubble';
+export { default as MessageBubblePropTypes } from './props/propTypes';

package/es/MessageBubble/props/defaultProps.js

@@ -0,0 +1,9 @@
+import propConstants from './propConstants';
+const messageBubbleDefaultProps = {
+  tagAttributes: {},
+  direction: propConstants.direction.in,
+  isActive: false,
+  needMessageActions: true,
+  customStyle: {}
+};
+export default messageBubbleDefaultProps;

package/es/MessageBubble/props/propConstants.js

@@ -0,0 +1,6 @@
+export default {
+  direction: {
+    in: 'in',
+    out: 'out'
+  }
+};

package/es/MessageBubble/props/propTypes.js

@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+const messageBubblePropTypes = {
+  tagAttributes: PropTypes.object,
+  direction: PropTypes.string,
+  isActive: PropTypes.bool,
+  needMessageActions: PropTypes.bool,
+  renderMessageBox: PropTypes.func,
+  renderMessageBoxFooter: PropTypes.func,
+  renderMessageOwner: PropTypes.func,
+  renderMessageActions: PropTypes.func,
+  customStyle: PropTypes.object
+  // messageActionsShowOn: PropTypes.string,
+  // renderMessageBoxHeader: PropTypes.func,
+};
+
+export default messageBubblePropTypes;

package/es/TextMessage/DefaultActions.js

@@ -0,0 +1,61 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable max-len */
+import React from 'react';
+import style from './css/TextMessage.module.css';
+import { ActionIcon, MessageActions } 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';
+import MoreIcon from '@zohodesk/icon/es/general/More';
+function DefaultActions(props) {
+  const {
+    customActions,
+    moreCount,
+    onClick
+  } = props;
+  function renderMoreIcon() {
+    return /*#__PURE__*/React.createElement(ActionIcon, {
+      renderIcon: () => /*#__PURE__*/React.createElement("div", {
+        className: style.moreIcon
+      }, /*#__PURE__*/React.createElement(MoreIcon, null))
+    });
+  }
+  function handleIconClick(id) {
+    onClick(id);
+  }
+  function renderReply() {
+    return /*#__PURE__*/React.createElement(ActionIcon, {
+      onClick: handleIconClick,
+      renderIcon: () => /*#__PURE__*/React.createElement(ReplyIcon, null)
+    });
+  }
+  function renderCopy() {
+    return /*#__PURE__*/React.createElement(ActionIcon, {
+      onClick: handleIconClick,
+      renderIcon: () => /*#__PURE__*/React.createElement(CopyIcon, null)
+    });
+  }
+  function renderDownload() {
+    return /*#__PURE__*/React.createElement(ActionIcon, {
+      onClick: handleIconClick,
+      renderIcon: () => /*#__PURE__*/React.createElement(DownloadIcon, null)
+    });
+  }
+  return /*#__PURE__*/React.createElement(MessageActions, {
+    actions: [{
+      id: 'Reply',
+      renderFunction: renderReply
+    }, {
+      id: 'Copy',
+      renderFunction: renderCopy
+    }, {
+      id: 'Download',
+      renderFunction: renderDownload
+    }, ...customActions]
+    // actions={actions}
+    ,
+    renderMoreIcon: renderMoreIcon,
+    moreCount: moreCount
+  });
+}
+export default DefaultActions;

package/es/TextMessage/TextMessage.js

@@ -0,0 +1,67 @@
+/* eslint-disable max-len */
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Components *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import { MessageBubble, AvatarSpace, MessageBox, MessageActions } from '..';
+
+/** ** Constants *** */
+import textMessageDefaultProps from './props/defaultProps';
+import textMessagePropTypes from './props/propTypes';
+
+/** ** Styles *** */
+import style from './css/TextMessage.module.css';
+export default function TextMessage(props) {
+  const {
+    direction,
+    isActive,
+    needMessageActions,
+    renderMessage,
+    renderMessageHeader,
+    renderMessageFooter,
+    renderMessageBoxFooter,
+    needAvatar,
+    avatarProps,
+    messageActions,
+    renderMoreIcon,
+    actionsCount,
+    renderStatus
+  } = props;
+  function renderMessageBox() {
+    return /*#__PURE__*/React.createElement(MessageBox, {
+      renderMessage: renderMessage,
+      renderMessageHeader: renderMessageHeader,
+      renderMessageFooter: renderMessageFooter,
+      renderStatus: renderStatus
+    });
+  }
+  function renderMessageOwner() {
+    return /*#__PURE__*/React.createElement(AvatarSpace, {
+      needAvatar: needAvatar,
+      avatarProps: avatarProps
+    });
+  }
+  function renderMessageActions() {
+    return /*#__PURE__*/React.createElement(MessageActions, {
+      actions: messageActions,
+      renderMoreIcon: renderMoreIcon,
+      moreCount: actionsCount
+    });
+  }
+  return /*#__PURE__*/React.createElement(MessageBubble, {
+    direction: direction,
+    isActive: isActive,
+    needMessageActions: needMessageActions,
+    renderMessageBox: renderMessageBox
+    // renderMessageBoxHeader={() => null}
+    ,
+    renderMessageBoxFooter: renderMessageBoxFooter,
+    renderMessageOwner: renderMessageOwner,
+    renderMessageActions: renderMessageActions
+  });
+}
+TextMessage.displayName = 'TextMessage';
+TextMessage.propTypes = textMessagePropTypes;
+TextMessage.defaultProps = textMessageDefaultProps;
+// ActionIcons.constantProps = constantProps;

package/es/TextMessage/TextMessage1.js

@@ -0,0 +1,69 @@
+/* eslint-disable max-len */
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Components *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import { MessageBubble, AvatarSpace, MessageBox, MessageActions } from '..';
+
+/** ** Constants *** */
+import textMessageDefaultProps from './props/defaultProps';
+import textMessagePropTypes from './props/propTypes';
+
+/** ** Styles *** */
+import style from './css/TextMessage.module.css';
+export default function TextMessage(props) {
+  const {
+    direction,
+    isActive,
+    needMessageActions,
+    message,
+    renderMessage,
+    renderMessageHeader,
+    renderMessageFooter,
+    renderMessageBoxFooter,
+    needAvatar,
+    avatarProps,
+    messageActions,
+    renderMoreIcon,
+    actionsCount,
+    customStyle
+  } = props;
+  function renderMessageText() {
+    /*#__PURE__*/React.createElement("div", null, message);
+  }
+  function renderMessageBox() {
+    return /*#__PURE__*/React.createElement(MessageBox, {
+      renderMessage: renderMessageText,
+      renderMessageHeader: renderMessageHeader,
+      renderMessageFooter: renderMessageFooter
+    });
+  }
+  function renderAvatarSpace() {
+    return /*#__PURE__*/React.createElement(AvatarSpace, {
+      needAvatar: needAvatar,
+      avatarProps: avatarProps
+    });
+  }
+  function renderMessageActions() {
+    return /*#__PURE__*/React.createElement(MessageActions, {
+      actions: messageActions,
+      renderMoreIcon: renderMoreIcon,
+      moreCount: actionsCount
+    });
+  }
+  return /*#__PURE__*/React.createElement(MessageBubble, {
+    direction: direction,
+    isActive: isActive,
+    needMessageActions: needMessageActions,
+    renderMessageBox: renderMessageBox
+    // renderMessageBoxHeader={() => null}
+    ,
+    renderMessageBoxFooter: renderMessageBoxFooter,
+    renderAvatarSpace: renderAvatarSpace,
+    renderMessageActions: renderMessageActions
+  });
+}
+TextMessage.propTypes = textMessageDefaultProps;
+TextMessage.defaultProps = textMessagePropTypes;
+// ActionIcons.constantProps = constantProps;

package/es/TextMessage/css/TextMessage.module.css

@@ -0,0 +1,5 @@
+[dir=ltr] .moreIcon svg {
+  transform: rotate(90deg);
+}[dir=rtl] .moreIcon svg {
+  transform: rotate(-90deg);
+}

package/es/TextMessage/index.js

@@ -0,0 +1 @@
+export { default as TextMessage } from './TextMessage';

package/es/TextMessage/props/defaultProps.js

@@ -0,0 +1,4 @@
+const textMessageDefaultProps = {
+  customStyle: {}
+};
+export default textMessageDefaultProps;

package/es/TextMessage/props/propConstants.js

@@ -0,0 +1,3 @@
+export default {
+  test: 'test'
+};

package/es/TextMessage/props/propTypes.js

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+export const textMessagePropTypes = {
+  direction: PropTypes.string,
+  isActive: PropTypes.bool,
+  needMessageActions: PropTypes.bool,
+  renderMessage: PropTypes.func,
+  renderMessageHeader: PropTypes.func,
+  renderMessageFooter: PropTypes.func,
+  renderMessageBoxFooter: PropTypes.func,
+  needAvatar: PropTypes.bool,
+  avatarProps: PropTypes.object,
+  messageActions: PropTypes.arrayOf(PropTypes.object),
+  renderMoreIcon: PropTypes.func,
+  actionsCount: PropTypes.number,
+  renderStatus: PropTypes.func
+};
+export default textMessagePropTypes;

package/es/Theme/darkTheme.js

@@ -0,0 +1,9 @@
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      box_bg_color: '#788190',
+      bubble_active: '#333'
+    }
+  }
+};

package/es/Theme/defaultTheme.js

@@ -0,0 +1,16 @@
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: '#fdffe3'
+    },
+    messageBox: {
+      bg_color: '#f1f7fe'
+    },
+    actionIcon: {
+      color: '#0a73eb',
+      bg_color: '#f1f7fe',
+      border_color: '#b7d1f0'
+    }
+  }
+};

package/es/constants/index.js

@@ -0,0 +1 @@
+export const MSG_ACTION_POPUP_PORTAL = 'MSG_ACTION_POPUP_PORTAL';

package/es/index.js

@@ -0,0 +1,13 @@
+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 other components
+
+/*** CONSTANTS ***/
+export * from './constants';

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@zohoim/chat-components",
+  "version": "0.0.2",
+  "description": "Chat Components",
+  "main": "es/index.js",
+  "module": "es/index.js",
+  "scripts": {
+    "build": "react-cli build:component:es",
+    "build_watch": "react-cli build:component:es -w",
+    "clean": "react-cli clean unittest coverage es result.json",
+    "rtl": "react-cli rtl ./src ./es",
+    "prepare": "npm run clean && npm run build && npm run rtl",
+    "test": "react-cli test",
+    "test:debug": "react-cli test --runInBand --watch"
+  },
+  "author": "ZohoDesk - IM Team",
+  "license": "ISC",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "es",
+    "!**/__tests__"
+  ],
+  "dependencies": {
+    "@zohodesk/components": "1.0.0-alpha-250",
+    "@zohodesk/hooks": "1.0.6",
+    "@zohodesk/icon": "1.0.6",
+    "@zohodesk/utils": "1.0.6",
+    "@zohodesk/variables": "1.0.0-beta.30",
+    "@zohodesk/virtualizer": "1.0.13",
+    "@zohoim/chat-components-hooks": "^0.0.2",
+    "@zohoim/chat-components-utils": "^0.0.2"
+  },
+  "gitHead": "a2f7ad66df3a920bb412dd62ae1f6485b5458f51"
+}