@zohoim/chat-components 1.0.11-beta.1 → 1.1.0

package/es/Theme/ThemeWrapper.js

@@ -1,11 +1,14 @@
 /** ** Libraries *** */
 import React, { useMemo, useCallback } from 'react';
+/** ** Providers *** */
+
+import ThemeContext from '@zohoim/chat-components-hooks/es/Theme/ThemeContext';
 /** ** Constants *** */
 
 import themeWrapperPropTypes from "./props/propTypes";
 import themeWrapperDefaultProps from "./props/defaultProps";
-import { styleTagId } from "./constants";
-import { MSG_ACTION_POPUP_PORTAL } from "../constants";
+import { styleTagId } from '@zohoim/chat-components-utils/es/constants/themeConstants';
+import { MSG_ACTION_POPUP_PORTAL, EDITOR_POPUP_PORTAL, EDITOR_POPUP_TARGET_PORTAL } from "../constants";
 /** ** Components *** */
 
 import ThemeAssets from "./ThemeAssets";
@@ -29,7 +32,8 @@ export default function ThemeWrapper(props) {
     theme: propTheme,
     modeKey,
     themeKey,
-    tooltipCustomStyle
+    tooltipCustomStyle,
+    direction
   } = props;
   /** ** containerRef for Tooltip *** */
 
@@ -38,22 +42,20 @@ export default function ThemeWrapper(props) {
   /** ** ThemeConfigurations Handling  *** */
 
   const {
+    themeConfigurations,
     mode,
     theme
   } = getThemeConfigurations({
     mode: propMode,
     theme: propTheme
   });
-  const configurations = propThemeConfigurations;
+  const configurations = propThemeConfigurations || themeConfigurations;
   /** ** Style Handling  *** */
 
   const selector = `#${styleTagId}`;
   const prefix = '--imlib_';
   const configuration = useMemo(() => [configurations], [configurations]);
-  const customizedVariables = useMemo(() => {
-    const cssVariables = propThemeConfigurations ? getCustomizedCssVariables(configuration, prefix) : null;
-    return cssVariables;
-  }, [configuration, prefix, propThemeConfigurations]);
+  const customizedVariables = useMemo(() => getCustomizedCssVariables(configuration, prefix), [configuration, prefix]);
   const wrapperDivProps = getWrapperDivProps({
     modeKey,
     themeKey,
@@ -62,18 +64,27 @@ export default function ThemeWrapper(props) {
   });
   /** ** Children Render Functions   *** */
 
-  const renderPortal = useCallback(() => /*#__PURE__*/React.createElement("div", {
+  const renderPortal = useCallback(() => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     "data-portal": MSG_ACTION_POPUP_PORTAL
-  }), []);
-  const renderStyle = useCallback(() => customizedVariables ? /*#__PURE__*/React.createElement("style", {
+  }), /*#__PURE__*/React.createElement("div", {
+    "data-portal": EDITOR_POPUP_PORTAL
+  }), /*#__PURE__*/React.createElement("div", {
+    "data-portal": EDITOR_POPUP_TARGET_PORTAL
+  })), []);
+  const renderStyle = useCallback(() => /*#__PURE__*/React.createElement("style", {
     id: "zoho-im-variables"
-  }, `${selector}{${customizedVariables}}`) : null, [selector, customizedVariables]);
+  }, `${selector}{${customizedVariables}}`), [selector, customizedVariables]);
   const renderAssets = useCallback(() => /*#__PURE__*/React.createElement(React.Fragment, null, needThemeAssets ? /*#__PURE__*/React.createElement(ThemeAssets, null) : null, needTooltip ? /*#__PURE__*/React.createElement(TooltipWrapper, {
     containerRef: containerRef.current,
     customStyle: tooltipCustomStyle,
     getContainerRef: getContainerRef
   }) : null), [getContainerRef, needTooltip, needThemeAssets, tooltipCustomStyle]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: {
+      mode: propMode,
+      direction
+    }
+  }, /*#__PURE__*/React.createElement("div", {
     id: styleTagId,
     ...wrapperDivProps,
     style: {
@@ -82,7 +93,7 @@ export default function ThemeWrapper(props) {
     }
   }, renderStyle(), /*#__PURE__*/React.createElement(Container, {
     eleRef: containerRef
-  }, children), renderPortal(), renderAssets());
+  }, children), renderPortal(), renderAssets()));
 }
 ThemeWrapper.propTypes = themeWrapperPropTypes;
 ThemeWrapper.defaultProps = themeWrapperDefaultProps;

package/es/Theme/TooltipWrapper.js

@@ -9,7 +9,7 @@ import Tooltip from '@zohodesk/components/es/Tooltip/Tooltip';
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Methods *** */
 
-import { setLibraryConfig, getLibraryConfig } from '@zohodesk/components/lib/Provider/Config';
+import { setLibraryConfig, getLibraryConfig } from '@zohodesk/components/es/Provider/Config';
 /** ** Constants *** */
 
 import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';

package/es/Theme/props/defaultProps.js

@@ -5,6 +5,7 @@ const themeWrapperDefaultProps = {
   mode: 'LIGHT',
   theme: 'BLUE',
   needTooltip: true,
-  tooltipCustomStyle: dummyObject
+  tooltipCustomStyle: dummyObject,
+  direction: 'ltr'
 };
 export default themeWrapperDefaultProps;

package/es/Theme/props/propTypes.js

@@ -9,6 +9,7 @@ const themeWrapperPropTypes = {
   needTooltip: PropTypes.bool,
   themeConfigurations: PropTypes.object,
   themeKey: PropTypes.string,
-  tooltipCustomStyle: PropTypes.object
+  tooltipCustomStyle: PropTypes.object,
+  direction: PropTypes.oneOf(['ltr', 'rtl'])
 };
 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: 'linear-gradient(180deg, #A375FF 0%, #7732FF 100%)',
+  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,133 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, replyEditor, emojiPopup, emojisHeader, attachmentPreviewHeader } 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
+    },
+    emojiFooter: {
+      tabLine: primaryBlue,
+      border_color: '#2d3748'
+    },
+    replyEditor,
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: '#5f6478',
+      ttIcon_path2_color: 'var(--dot_platinum)'
+    },
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262f3d',
+      editor_border_color: '#3e4d63',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#479dff'
+    }
+  }
+};

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

@@ -0,0 +1,35 @@
+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';
+export const emojiPopup = {
+  bg: '#f1f4f9',
+  border: '#f1f4f9',
+  titleColor: '#aaa'
+};
+export const replyEditor = {
+  bg: '#242b38',
+  color: '#e2e4e6',
+  placeholder: '#5a616f'
+};
+export const emojisHeader = {
+  bg_color: '#283442',
+  border_color: '#2d3748'
+};
+export const attachmentPreviewHeader = {
+  bg_color: '#232b38',
+  name_color: '#e2e4e6',
+  size_color: '#a8b0bd'
+};

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

@@ -0,0 +1,132 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } 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
+    },
+    emojiFooter: {
+      tabLine: primaryGreen,
+      border_color: '#2d3748'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: '#5f6478',
+      ttIcon_path2_color: 'var(--dot_platinum)'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262f3d',
+      editor_border_color: '#3e4d63',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#45a159'
+    }
+  }
+};

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

@@ -0,0 +1,132 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } 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
+    },
+    emojiFooter: {
+      tabLine: primaryOrange,
+      border_color: '#2d3748'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: '#5f6478',
+      ttIcon_path2_color: 'var(--dot_platinum)'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262f3d',
+      editor_border_color: '#3e4d63',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#ff801f'
+    }
+  }
+};