@zohoim/chat-components 0.0.1-cx

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

@@ -0,0 +1,101 @@
+.varClass {
+  --messageBubble-bubble_footer_gap: var(--zd_size5);
+  --messageBubble-message_owner_gap: 13px;
+  --messageBox-max_width: 410px;
+  --messageBox-footer_fontSize: var(--zd_font_size11);
+  --messageBox-owner_width: var(--zd_size32);
+}
+
+.messageBubble {
+  composes: varClass;
+  width: 100% ;
+  display: grid;
+  grid-column-gap: var(--messageBubble-message_owner_gap);
+}
+
+.messageOwnerWrapper {
+  grid-area: messageOwner;
+  align-self: end;
+  width: var(--messageBox-owner_width);
+  display: flex;
+}
+
+.messageContainer {
+  grid-area: messageContainer;
+  display: inline-block;
+  max-width: 70% ;
+}
+
+.messageBoxWrapper {
+  grid-area: messageBox;
+  display: inline-block;
+  position: relative; 
+}
+
+.messageActionWrapper {
+  grid-area: messageAction;
+  width: var(--zd_size78) ;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top:0 ;
+  visibility: hidden;
+  opacity: 0;
+}
+
+.messageBubble:hover .messageActionWrapper{
+  visibility: visible;
+  opacity: 1;
+}
+
+.messageActionWrapperEnd {
+  align-items: flex-end;
+}
+
+[dir=ltr] .messageActionWrapperEnd {
+  right: calc(100% + (var(--zd_size12)));
+}
+
+[dir=rtl] .messageActionWrapperEnd {
+  left: calc(100% + (var(--zd_size12)));
+}
+
+.messageActionWrapperStart {
+  align-items: flex-start;
+}
+
+[dir=ltr] .messageActionWrapperStart {
+  left: calc(100% + (var(--zd_size12)));
+}
+
+[dir=rtl] .messageActionWrapperStart {
+  right: calc(100% + (var(--zd_size12)));
+}
+.messageBoxFooterWrapper {
+  grid-area: messageBoxFooter;
+  font-size: var(--messageBox-footer_fontSize);
+  color: var(
+    --imlib_chat_components_messageBubble_messageBox_footer_text_color
+  );
+  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;
+}
+

package/es/MessageBubble/css/cssJSLogic.js

@@ -0,0 +1,34 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+import getMessageDirectionType from '@zohoim/chat-components-utils/es/getMessageDirectionType';
+export default function cssJSLogic(props, style) {
+  const {
+    isActive,
+    direction,
+    isRenderMessageActions
+  } = props;
+  const {
+    isIncoming,
+    isOutgoing
+  } = getMessageDirectionType({
+    messageDetails: {
+      direction
+    }
+  });
+  const bubbleClass = compileClassNames({
+    [style.messageBubble]: true,
+    [style.directionIn]: isIncoming,
+    [style.directionOut]: isOutgoing,
+    [style.active]: isActive,
+    [style.isHovered]: isRenderMessageActions
+  });
+  const messageActionWrapperClass = compileClassNames({
+    [style.messageActionWrapper]: true,
+    [style.messageActionWrapperEnd]: isOutgoing,
+    [style.messageActionWrapperStart]: isIncoming
+  });
+  return {
+    bubbleClass,
+    messageActionWrapperClass
+  };
+}

package/es/MessageBubble/index.js

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

package/es/MessageBubble/props/defaultProps.js

@@ -0,0 +1,11 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+const messageBubbleDefaultProps = {
+  direction: direction.IN,
+  isActive: false,
+  needMessageActions: true,
+  customStyle: dummyObject,
+  needSender: true
+};
+export default messageBubbleDefaultProps;

package/es/MessageBubble/props/propTypes.js

@@ -0,0 +1,17 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+/** ** Constants *** */
+
+import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+const messageBubblePropTypes = {
+  direction: PropTypes.oneOf(Object.values(direction)).isRequired,
+  renderMessageBox: PropTypes.func.isRequired,
+  customStyle: PropTypes.object,
+  isActive: PropTypes.bool,
+  needMessageActions: PropTypes.bool,
+  needSender: PropTypes.bool,
+  renderMessageActions: PropTypes.func,
+  renderMessageBoxFooter: PropTypes.func,
+  renderMessageOwner: PropTypes.func
+};
+export default messageBubblePropTypes;

package/es/MessageStatus/MessageStatus.js

@@ -0,0 +1,77 @@
+/** ** Libraries *** */
+import React, { useMemo } from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import messageStatusDefaultProps from './props/defaultProps';
+import messageStatusPropTypes from './props/propTypes';
+import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+/** ** Styles *** */
+
+import style from './css/MessageStatus.module.css';
+/** ** Icons *** */
+
+import DoubleTickIcon from '../icons/iconSrc/messageStatus/DoubleTick';
+import TickIcon from '../icons/iconSrc/messageStatus/Tick';
+import ClockIcon from '../icons/iconSrc/messageStatus/Clock';
+import FailedIcon from '../icons/iconSrc/messageStatus/Failed';
+const {
+  SENT,
+  SAVED,
+  QUEUED,
+  DELIVERED,
+  READ,
+  UNSENT,
+  FAILED,
+  OUTGOING
+} = messageStatusConstants;
+const messageStatusIconMapping = {
+  [OUTGOING]: ClockIcon,
+  [SAVED]: TickIcon,
+  [QUEUED]: TickIcon,
+  [SENT]: DoubleTickIcon,
+  [DELIVERED]: DoubleTickIcon,
+  [READ]: DoubleTickIcon,
+  [UNSENT]: FailedIcon,
+  [FAILED]: FailedIcon
+};
+export default function MessageStatus(props) {
+  const {
+    messageStatus,
+    customStyle,
+    title,
+    renderCustomIcon
+  } = props;
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const iconStyle = useMemo(() => ({
+    base: newStyle.icon
+  }), [newStyle.icon]);
+  /* CSS classnames added based on logic */
+
+  const {
+    statusClass
+  } = cssJSLogic({
+    messageStatus
+  }, newStyle);
+  /* Custom Icon */
+
+  const customIcon = renderHandler(renderCustomIcon)();
+  const IconComponent = messageStatusIconMapping[messageStatus];
+  return IconComponent || customIcon ? /*#__PURE__*/React.createElement("div", {
+    className: statusClass,
+    "data-title": title
+  }, customIcon || /*#__PURE__*/React.createElement(IconComponent, {
+    customStyle: iconStyle
+  })) : null;
+}
+MessageStatus.propTypes = messageStatusPropTypes;
+MessageStatus.defaultProps = messageStatusDefaultProps;
+MessageStatus.displayName = 'MessageStatus';

package/es/MessageStatus/css/MessageStatus.module.css

@@ -0,0 +1,17 @@
+.messageStatus {
+  /* USe this class name status customization */
+  color: var(--imlib_chat_components_messageStatus_send_color);
+}
+
+.readStatus {
+  color: var(--imlib_chat_components_messageStatus_read_color);
+}
+
+.failedStatus {
+  color: var(--imlib_chat_components_messageStatus_failed_color);
+}
+
+.icon {
+  width: var(--zd_size14) ;
+  height: var(--zd_size14) ;
+}

package/es/MessageStatus/css/cssJSLogic.js

@@ -0,0 +1,26 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+/** ** Constants *** */
+
+import getMessageStatus from '@zohoim/chat-components-utils/es/getMessageStatus';
+export default function cssJSLogic(props, style) {
+  const {
+    messageStatus
+  } = props;
+  const {
+    isFailedMessage: isFailed,
+    isRead
+  } = getMessageStatus({
+    messageDetails: {
+      status: messageStatus
+    }
+  });
+  const statusClass = compileClassNames({
+    [style.messageStatus]: !(isRead || isFailed),
+    [style.readStatus]: isRead,
+    [style.failedStatus]: isFailed
+  });
+  return {
+    statusClass
+  };
+}

package/es/MessageStatus/index.js

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

package/es/MessageStatus/props/defaultProps.js

@@ -0,0 +1,6 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const messageStatusDefaultProps = {
+  customStyle: dummyObject
+};
+export default messageStatusDefaultProps;

package/es/MessageStatus/props/propTypes.js

@@ -0,0 +1,12 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+/** ** Constants *** */
+
+import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
+const messageStatusPropTypes = {
+  messageStatus: PropTypes.oneOf(Object.values(messageStatusConstants)).isRequired,
+  customStyle: PropTypes.object,
+  renderCustomIcon: PropTypes.func,
+  title: PropTypes.string
+};
+export default messageStatusPropTypes;

package/es/MoreActionItem/MoreActionItem.js

@@ -0,0 +1,72 @@
+/** ** Libraries *** */
+import React, { useCallback } from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import moreActionItemDefaultProps from './props/defaultProps';
+import moreActionItemPropTypes from './props/propTypes';
+/** ** Styles *** */
+
+import style from './css/MoreActionItem.module.css';
+/** ** Components *** */
+
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import ListContainer from '@zohodesk/components/es/ListItem/ListContainer';
+/** ** Methods *** */
+
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+export default function MoreActionItem(props) {
+  const {
+    displayText,
+    title,
+    id,
+    customStyle,
+    renderIcon,
+    needIcon,
+    onClick,
+    onMouseEnter,
+    closePopup,
+    isDisabled
+  } = props;
+  const handleClick = useCallback(e => {
+    closePopup && closePopup(e);
+    !isDisabled && onClick && onClick({
+      e,
+      id
+    });
+  }, [closePopup, onClick, id, isDisabled]);
+  const handleMouseEnter = useCallback(e => {
+    !isDisabled && onMouseEnter && onMouseEnter({
+      e,
+      id
+    });
+  }, [onMouseEnter, id, isDisabled]);
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const icon = renderHandler(renderIcon)({
+    id
+  });
+  return /*#__PURE__*/React.createElement(ListContainer, {
+    autoHover: true,
+    customClass: newStyle.listItem,
+    disableTitle: title,
+    id: id,
+    isDisabled: isDisabled,
+    onClick: handleClick,
+    onMouseEnter: handleMouseEnter,
+    title: title
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row"
+  }, needIcon ? /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.iconWrapper
+  }, icon) : null, /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.text,
+    flexible: true
+  }, displayText)));
+}
+MoreActionItem.propTypes = moreActionItemPropTypes;
+MoreActionItem.defaultProps = moreActionItemDefaultProps;

package/es/MoreActionItem/css/MoreActionItem.module.css

@@ -0,0 +1,27 @@
+.varClass {
+  --moreActionItem-content_padding: var(--zd_size10);
+  --moreActionItem-content_size: var(--zd_font_size14);
+}
+
+.listItem {
+  /* Use this class name for list item customization */
+}
+
+.iconWrapper {
+  /* Use this class name for list item icon customization */
+  display: flex;
+}
+
+.text {
+  composes: varClass;
+  font-size: var(--moreActionItem-content_size);
+  composes: dotted from "../../css/common.module.css";
+}
+
+[dir=ltr] .text {
+  padding-left: var(--moreActionItem-content_padding);
+}
+
+[dir=rtl] .text {
+  padding-right: var(--moreActionItem-content_padding);
+}

package/es/MoreActionItem/index.js

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

package/es/MoreActionItem/props/defaultProps.js

@@ -0,0 +1,7 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const moreActionItemDefaultProps = {
+  customStyle: dummyObject,
+  needIcon: true
+};
+export default moreActionItemDefaultProps;

package/es/MoreActionItem/props/propTypes.js

@@ -0,0 +1,14 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const moreActionItemPropTypes = {
+  displayText: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  onMouseEnter: PropTypes.func,
+  closePopup: PropTypes.func,
+  customStyle: PropTypes.object,
+  id: PropTypes.string,
+  needIcon: PropTypes.bool,
+  renderIcon: PropTypes.func,
+  title: PropTypes.string
+};
+export default moreActionItemPropTypes;

package/es/ReplyBubble/ReplyBubble.js

@@ -0,0 +1,118 @@
+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); }
+
+/** ** Libraries *** */
+import React, { useMemo, useCallback } from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import replyBubbleDefaultProps from './props/defaultProps';
+import replyBubblePropTypes from './props/propTypes';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+/** ** Styles *** */
+
+import style from './css/ReplyBubble.module.css';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
+/** ** Components *** */
+
+import ReplyBubbleHeader from '../ReplyBubbleHeader/ReplyBubbleHeader';
+import ReplyBubbleContent from '../ReplyBubbleContent/ReplyBubbleContent';
+import AttachmentIcon from '../AttachmentIcon/AttachmentIcon';
+import LocationBubble from '../LocationBubble/LocationBubble';
+export default function ReplyBubble(props) {
+  const {
+    customStyle,
+    senderName,
+    dateTimeDetails,
+    replyText,
+    message,
+    attachmentDetails,
+    locationUrl,
+    onClick,
+    customProps,
+    isFailed
+  } = props;
+  const {
+    headerProps = dummyObject,
+    contentProps = dummyObject,
+    iconProps = dummyObject
+  } = customProps;
+  const {
+    fileName,
+    fileURL,
+    fileFormat,
+    mediaType,
+    isValidAttachment
+  } = attachmentDetails || dummyObject;
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+
+  const {
+    imageWrapperClass
+  } = cssJSLogic({
+    isFailed
+  }, newStyle);
+  const iconStyle = useMemo(() => ({
+    $icon: newStyle.attachmentIcon
+  }), [newStyle.attachmentIcon]);
+  const renderMessage = useCallback(() => {
+    if (locationUrl) {
+      return /*#__PURE__*/React.createElement(LocationBubble, {
+        isFailed: isFailed,
+        locationUrl: locationUrl
+      });
+    }
+
+    if (message) {
+      // eslint-disable-next-line @zohodesk/zsecurity/no-unsecure-html, react/no-danger
+      return /*#__PURE__*/React.createElement("span", {
+        dangerouslySetInnerHTML: {
+          __html: message
+        }
+      });
+    }
+
+    return null;
+  }, [message, locationUrl, isFailed]);
+  const renderIcon = useCallback(() => {
+    if (fileURL) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: imageWrapperClass
+      }, /*#__PURE__*/React.createElement("img", {
+        alt: fileName,
+        className: newStyle.image,
+        src: fileURL
+      }));
+    }
+
+    if (fileFormat) {
+      return /*#__PURE__*/React.createElement(AttachmentIcon, _extends({
+        customStyle: iconStyle,
+        fileFormat: fileFormat,
+        isValidAttachment: isValidAttachment,
+        mediaType: mediaType
+      }, iconProps));
+    }
+
+    return null;
+  }, [fileURL, fileName, fileFormat, isValidAttachment, mediaType, iconStyle, iconProps, newStyle.image, imageWrapperClass]);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ReplyBubbleHeader, _extends({
+    dateTimeDetails: dateTimeDetails,
+    isFailed: isFailed,
+    replyText: replyText
+  }, headerProps)), /*#__PURE__*/React.createElement(ReplyBubbleContent, _extends({
+    isFailed: isFailed,
+    onClick: onClick,
+    renderIcon: renderIcon,
+    renderMessage: renderMessage,
+    senderName: senderName
+  }, contentProps)));
+}
+ReplyBubble.propTypes = replyBubblePropTypes;
+ReplyBubble.defaultProps = replyBubbleDefaultProps;
+ReplyBubble.displayName = 'ReplyBubble';

package/es/ReplyBubble/css/ReplyBubble.module.css

@@ -0,0 +1,23 @@
+.attachmentIcon {
+  height: var(--zd_size40)  !important;
+  width: var(--zd_size40)  !important;
+}
+
+.imageWrapper {
+  height: var(--zd_size60) ;
+  width: var(--zd_size60) ;
+  overflow: hidden;
+  border-radius: 3px;
+  border: 1px solid var(--imlib_chat_components_replyBubble_border_color);
+}
+
+.imageWrapperFailed{
+  border-color: var(--imlib_chat_components_replyBubble_border_color_failed);
+}
+
+.image {
+  width: 100% ;
+  height: 100% ;
+  object-fit: cover;
+  border-radius: 3px;
+}

package/es/ReplyBubble/css/cssJSLogic.js

@@ -0,0 +1,14 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const {
+    isFailed
+  } = props;
+  const imageWrapperClass = compileClassNames({
+    [style.imageWrapper]: true,
+    [style.imageWrapperFailed]: isFailed
+  });
+  return {
+    imageWrapperClass
+  };
+}

package/es/ReplyBubble/index.js

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

package/es/ReplyBubble/props/defaultProps.js

@@ -0,0 +1,8 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const replyBubbleDefaultProps = {
+  customStyle: dummyObject,
+  customProps: dummyObject,
+  attachmentDetails: dummyObject
+};
+export default replyBubbleDefaultProps;

package/es/ReplyBubble/props/propTypes.js

@@ -0,0 +1,28 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const replyBubblePropTypes = {
+  message: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  replyText: PropTypes.string.isRequired,
+  senderName: PropTypes.string.isRequired,
+  attachmentDetails: PropTypes.shape({
+    fileFormat: PropTypes.string,
+    fileName: PropTypes.string,
+    fileURL: PropTypes.string,
+    isValidAttachment: PropTypes.bool,
+    mediaType: PropTypes.string
+  }),
+  locationUrl: PropTypes.string,
+  customProps: PropTypes.shape({
+    contentProps: PropTypes.object,
+    headerProps: PropTypes.object,
+    iconProps: PropTypes.object
+  }),
+  customStyle: PropTypes.object,
+  dateTimeDetails: PropTypes.shape({
+    displayDateTime: PropTypes.string,
+    tooltip: PropTypes.string
+  }),
+  isFailed: PropTypes.bool
+};
+export default replyBubblePropTypes;