@zohoim/chat-components 0.0.1-cx

package/es/Theme/TooltipWrapper.js

@@ -0,0 +1,85 @@
+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 from 'react';
+import PropTypes from 'prop-types';
+/** ** Components *** */
+
+import Tooltip from '@zohodesk/components/es/Tooltip/Tooltip';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Methods *** */
+
+import { setLibraryConfig, getLibraryConfig } from '@zohodesk/components/lib/Provider/Config';
+/** ** Constants *** */
+
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+/** ** Styles *** */
+
+import style from './css/TooltipWrapper.module.css';
+export default function TooltipWrapper(props) {
+  const {
+    getContainerRef,
+    customStyle = dummyObject
+  } = props;
+  let timer = null;
+  const tooltipRef = React.useRef(null);
+  setLibraryConfig({
+    getTooltipContainer: () => getContainerRef()
+  });
+
+  function handleMouseOverDispatch(e) {
+    const containerRef = getContainerRef();
+
+    if (tooltipRef && tooltipRef.current) {
+      tooltipRef.current.handleOver(e, containerRef);
+    }
+  }
+
+  function handleOver(e) {
+    if (timer) {
+      timer = clearTimeout(timer);
+    }
+
+    timer = setTimeout(() => handleMouseOverDispatch(e), getLibraryConfig('tooltipDebounce'));
+  }
+
+  function removeTimeout() {
+    if (timer) {
+      timer = clearTimeout(timer);
+    }
+  } // componentDidMount and componentWillUnmount case
+
+
+  React.useEffect(() => {
+    const containerRef = getContainerRef();
+
+    if (containerRef) {
+      containerRef.addEventListener('mouseover', handleOver, false);
+      containerRef.addEventListener('mouseout', removeTimeout, false);
+      tooltipRef.current.observeElement();
+    }
+
+    return () => {
+      if (containerRef) {
+        containerRef.removeEventListener('mouseover', handleOver, false);
+        containerRef.removeEventListener('mouseout', removeTimeout, false); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+        tooltipRef.current.unObserveElement();
+      }
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    className: newStyle.tooltipWrapper
+  }, /*#__PURE__*/React.createElement(Tooltip, _extends({
+    ref: tooltipRef
+  }, props)));
+}
+TooltipWrapper.propTypes = {
+  customStyle: PropTypes.object,
+  getContainerRef: PropTypes.func
+};

package/es/Theme/constants/index.js

@@ -0,0 +1,41 @@
+export const styleTagId = 'im-chat-components';
+export const baseUnitLimit = {
+  size: {
+    base: 16,
+    unit: '1rem',
+    limit: 500
+  },
+  fontSize: {
+    base: 1,
+    unit: '1px',
+    limit: 20
+  },
+  transition: {
+    base: 1,
+    unit: 's',
+    limit: 20
+  },
+  motionTransition: {
+    base: 1,
+    unit: 'ms',
+    limit: 20
+  }
+};
+export const modeConstants = {
+  LIGHT: 'LIGHT',
+  DARK: 'DARK',
+  PURE_DARK: 'PURE_DARK'
+};
+export const themeConstants = {
+  BLUE: 'BLUE',
+  GREEN: 'GREEN',
+  ORANGE: 'ORANGE',
+  RED: 'RED',
+  YELLOW: 'YELLOW',
+  BLUE_FAN: 'BLUE_FAN',
+  DARK_BLUE: 'DARK_BLUE',
+  DARK_GREY: 'DARK_GREY',
+  PINK: 'PINK',
+  WHITE: 'WHITE',
+  TEAL: 'TEAL'
+};

package/es/Theme/css/TooltipWrapper.module.css

@@ -0,0 +1,10 @@
+.tooltipWrapper {
+  height: 0 ;
+  font-size: 0 ;
+  outline: 0;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  /* contain:strict */
+}

package/es/Theme/index.js

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

package/es/Theme/props/defaultProps.js

@@ -0,0 +1,10 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const themeWrapperDefaultProps = {
+  needThemeAssets: true,
+  mode: 'LIGHT',
+  theme: 'BLUE',
+  needTooltip: true,
+  tooltipCustomStyle: dummyObject
+};
+export default themeWrapperDefaultProps;

package/es/Theme/props/propTypes.js

@@ -0,0 +1,14 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const themeWrapperPropTypes = {
+  children: PropTypes.node.isRequired,
+  mode: PropTypes.string.isRequired,
+  theme: PropTypes.string.isRequired,
+  modeKey: PropTypes.string,
+  needThemeAssets: PropTypes.bool,
+  needTooltip: PropTypes.bool,
+  themeConfigurations: PropTypes.object,
+  themeKey: PropTypes.string,
+  tooltipCustomStyle: PropTypes.object
+};
+export default themeWrapperPropTypes;

package/es/Theme/themeVariables/commonThemeColorVariable.js

@@ -0,0 +1,17 @@
+export const imIntegrationIcon = {
+  path0_color: '#ffffff40',
+  path1_color: '#fff',
+  whatsapp_color: '#24d366',
+  telegram_color: '#4fa7d8',
+  wechat_color: '#2dc100',
+  line_color: '#01b901',
+  twillio_color: '#f22f46',
+  instagram_color: 'linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%)',
+  asap_color: '#0a73eb',
+  fb_color: '#006aff'
+};
+export const imTtIcon = {
+  path0_color: '#ffffff40',
+  path1_color: '#fff'
+};
+export const messagetextColor = '#e2e4e6';

package/es/Theme/themeVariables/dark/blueTheme.js

@@ -0,0 +1,116 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
+export default {
+  library: 'chat_components',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#2c3b4d',
+      border_color: '#3f536b'
+    },
+    attachmentBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#788190',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#828994'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#a8b0bd'
+    },
+    imPermaLink: {
+      url_color: '#479dff'
+    },
+    imageBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      url_color: primaryBlue,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#2c3b4d',
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor,
+      failed_text_color: '#000'
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#479dff',
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      line_color: '#cddbf2',
+      line_color_failed: failedLine,
+      sender_color: '#e2e4e6',
+      sender_color_failed: failedColor,
+      content_color: '#e2e4e6',
+      content_color_failed: failedColor
+    },
+    replyBubbleHeader: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      time_color: '#828994',
+      time_color_failed: failedColor
+    },
+    textBubble: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      see_more_color: primaryBlue,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryBlue,
+      url_color_failed: failedUrlColor
+    },
+    videoBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    }
+  }
+};

package/es/Theme/themeVariables/dark/commonColorVariable.js

@@ -0,0 +1,16 @@
+export const incomingBubbleBgColor = '#232b38';
+export const bubbleActiveBgColor = '#1b2e33';
+export const actionIconWrapperColor = '#e2e4e6';
+export const messageStatusSendColor = '#61667a';
+export const messageStatusFailedColor = '#de3535';
+export const primaryBlue = '#479dff';
+export const primaryGreen = '#45a159';
+export const primaryOrange = '#ff801f';
+export const primaryRed = '#e94f4f';
+export const primaryYellow = '#d79835';
+export const failedBgWrapper = '#f4b5bc';
+export const failedBg = '#f6dcdf';
+export const failedBdr = '#eb9ea7';
+export const failedLine = '#eb9ea7';
+export const failedColor = '#000';
+export const failedUrlColor = '#0a73eb';

package/es/Theme/themeVariables/dark/greenTheme.js

@@ -0,0 +1,115 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
+export default {
+  library: 'chat_components',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#26373b',
+      border_color: '#2d4e42'
+    },
+    attachmentBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#788190',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#828994'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#a8b0bd'
+    },
+    imPermaLink: {
+      url_color: '#45a159'
+    },
+    imageBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      url_color: primaryGreen,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#26373b',
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#45a159',
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: 'hsl(191.43deg 21.65% 13.02%)',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      line_color: '#cddbf2',
+      line_color_failed: failedLine,
+      sender_color: '#e2e4e6',
+      sender_color_failed: failedColor,
+      content_color: '#e2e4e6',
+      content_color_failed: failedColor
+    },
+    replyBubbleHeader: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      time_color: '#828994',
+      time_color_failed: failedColor
+    },
+    textBubble: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      see_more_color: primaryGreen,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryGreen,
+      url_color_failed: failedUrlColor
+    },
+    videoBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    }
+  }
+};

package/es/Theme/themeVariables/dark/orangeTheme.js

@@ -0,0 +1,115 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
+export default {
+  library: 'chat_components',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#323136',
+      border_color: '#4f3c33'
+    },
+    attachmentBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#788190',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#828994'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#a8b0bd'
+    },
+    imPermaLink: {
+      url_color: '#ff801f'
+    },
+    imageBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      url_color: primaryOrange,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#323136',
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#ff801f',
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      line_color: '#cddbf2',
+      line_color_failed: failedLine,
+      sender_color: '#e2e4e6',
+      sender_color_failed: failedColor,
+      content_color: '#e2e4e6',
+      content_color_failed: failedColor
+    },
+    replyBubbleHeader: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      time_color: '#828994',
+      time_color_failed: failedColor
+    },
+    textBubble: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      see_more_color: primaryOrange,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryOrange,
+      url_color_failed: failedUrlColor
+    },
+    videoBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    }
+  }
+};

package/es/Theme/themeVariables/dark/redTheme.js

@@ -0,0 +1,115 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
+export default {
+  library: 'chat_components',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#312d3a',
+      border_color: '#4b323d'
+    },
+    attachmentBubble: {
+      bg_color: 'hsl(258.46deg 12.62% 16.2%)',
+      bg_color_failed: failedBg,
+      border_color: 'hsl(258.46deg 12.62% 23.2%)',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#788190',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: 'hsl(258.46deg 12.62% 16.2%)',
+      bg_color_failed: failedBg,
+      border_color: 'hsl(258.46deg 12.62% 23.2%)',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#828994'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#a8b0bd'
+    },
+    imPermaLink: {
+      url_color: '#e94f4f'
+    },
+    imageBubble: {
+      bg_color: 'hsl(258.46deg 12.62% 16.2%)',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: 'hsl(258.46deg 12.62% 23.2%)',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: 'hsl(258.46deg 12.62% 16.2%)',
+      bg_color_failed: failedBg,
+      border_color: 'hsl(258.46deg 12.62% 23.2%)',
+      border_color_failed: failedBdr,
+      url_color: primaryRed,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#312d3a',
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#e94f4f',
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: 'hsl(258.46deg 12.62% 23.2%)',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: 'hsl(258.46deg 12.62% 16.2%)',
+      bg_color_failed: failedBg,
+      border_color: 'hsl(258.46deg 12.62% 23.2%)',
+      border_color_failed: failedBdr,
+      line_color: '#cddbf2',
+      line_color_failed: failedLine,
+      sender_color: '#e2e4e6',
+      sender_color_failed: failedColor,
+      content_color: '#e2e4e6',
+      content_color_failed: failedColor
+    },
+    replyBubbleHeader: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      time_color: '#828994',
+      time_color_failed: failedColor
+    },
+    textBubble: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      see_more_color: primaryRed,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryRed,
+      url_color_failed: failedUrlColor
+    },
+    videoBubble: {
+      border_color: 'hsl(258.46deg 12.62% 23.2%)',
+      border_color_failed: failedBdr
+    }
+  }
+};