@zohoim/chat-components 0.0.5 → 0.0.7

package/es/Theme/ThemeWrapper.js

@@ -0,0 +1,82 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/* eslint-disable react/jsx-no-bind */
+/** ** Libraries *** */
+import React from 'react';
+import ThemeProvider from '@zohodesk/theme/es/ThemeProvider';
+import sizeVariable from '@zohodesk/theme-defaults/es/sizeVariable';
+import fontSizeVariable from '@zohodesk/theme-defaults/es/fontSizeVariable';
+import fontVariable from '@zohodesk/theme-defaults/es/fontVariable';
+import { transitionVariable, motionTransitionVariable } from '@zohodesk/theme-defaults/es/transitionVariable';
+import chatDefaultTheme from './defaultTheme';
+import chatDarkTheme from './darkTheme';
+import { MSG_ACTION_POPUP_PORTAL } from '../constants';
+import { baseUnitLimit } from './constants';
+import DeskAssets from './DeskAssets';
+import TooltipWrapper from './ToolttipWrapper';
+import { Container } from '@zohodesk/components/es/Layout';
+import themeWrapperPropTypes from './props/propTypes';
+import themeWrapperDefaultProps from './props/defaultProps';
+import getThemeConfigurations from './utils/getThemeConfigurations';
+import { I18NProvider } from '@zohodesk/i18n';
+import datetime from '@zohodesk/datetimejs';
+export default function ThemeWrapper(props) {
+  const {
+    children,
+    needDeskAssets,
+    needTooltip,
+    themeConfigurations: propThemeConfigurations,
+    mode,
+    theme,
+    app,
+    modeKey,
+    themeKey,
+    tooltipCustomStyle
+  } = props;
+  const containerRef = React.useRef(null);
+  const {
+    themeConfigurations,
+    deskMode,
+    deskTheme
+  } = getThemeConfigurations({
+    app,
+    mode,
+    theme
+  });
+  const configurations = propThemeConfigurations ? propThemeConfigurations : themeConfigurations;
+  function getContainerRef() {
+    return containerRef.current;
+  }
+  const wrapperDivProps = {
+    [modeKey]: deskMode,
+    [themeKey]: deskTheme
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: "chat-components"
+  }, wrapperDivProps), /*#__PURE__*/React.createElement(I18NProvider
+  // i18n={i18n}
+  , {
+    timeZone: "Asia/Kolkata",
+    datePattern: "DD/MM/YYYY",
+    isEnabledCurrentYear: true,
+    timeFormat: "hh:mm"
+    // tzdata should already have been fetched and set as default
+    // tzData={datetime.tz.data()}
+  }, /*#__PURE__*/React.createElement(ThemeProvider, {
+    selector: "#chat-components",
+    prefix: "--imlib_",
+    configuration: [sizeVariable(baseUnitLimit.size), fontSizeVariable(baseUnitLimit.fontSize), fontVariable, transitionVariable(baseUnitLimit.transition), motionTransitionVariable(baseUnitLimit.motionTransition), configurations
+    // themeConfigration
+    // chatDarkTheme
+    ]
+  }, /*#__PURE__*/React.createElement(Container, {
+    eleRef: containerRef
+  }, children), /*#__PURE__*/React.createElement("div", {
+    "data-portal": MSG_ACTION_POPUP_PORTAL
+  }), needDeskAssets ? /*#__PURE__*/React.createElement(DeskAssets, null) : null, needTooltip ? /*#__PURE__*/React.createElement(TooltipWrapper, {
+    containerRef: containerRef.current,
+    getContainerRef: getContainerRef,
+    customStyle: tooltipCustomStyle
+  }) : null)));
+}
+ThemeWrapper.propTypes = themeWrapperPropTypes;
+ThemeWrapper.defaultProps = themeWrapperDefaultProps;

package/es/Theme/ToolttipWrapper.js

@@ -0,0 +1,81 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/* eslint-disable react/prop-types */
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** 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';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/TooltipWrapper.module.css';
+export default function TooltipWrapper(props) {
+  const {
+    getContainerRef,
+    customStyle = {}
+  } = props;
+  const containerRef = getContainerRef();
+  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);
+        tooltipRef.current.unObserveElement();
+      }
+    };
+  }, [containerRef]);
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+
+  /* CSS classnames added based on logic */
+  const {
+    tooltipClass,
+    tooltipWrapperClass
+  } = cssJSLogic(props, newStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    className: tooltipWrapperClass
+  }, /*#__PURE__*/React.createElement(Tooltip, _extends({
+    ref: tooltipRef
+  }, props, {
+    customClass: tooltipClass
+  })));
+}
+const a = {};
+TooltipWrapper.protoTypes = a;

package/es/Theme/constants/index.js

@@ -0,0 +1,44 @@
+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 appConstants = {
+  DESK: 'DESK',
+  CRM: 'CRM'
+};
+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/crm/dark/blueFanTheme.js

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: messageStatusReadColor,
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#4a91d9',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,11 @@
+export const incomingBubbleBgColor = '#232b38';
+export const outgoingBubbleBgColor = '#2c3b4d';
+// greenTheme, tealTheme
+export const outgoingBubbleBgColor2 = '#26373b';
+export const actionIconColor = '#e2e4e6';
+export const actionIconBgColor = '#2c3b4d';
+export const actionIconBorderColor = '#3f536b';
+export const bubbleActiveBgColor = '#1b2e33';
+export const messageStatusSendColor = '#61667a';
+export const messageStatusFailedColor = '#de3535';
+export const messageStatusReadColor = '#479dff';

package/es/Theme/crm/dark/darkBlueTheme.js

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: messageStatusReadColor,
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

package/es/Theme/crm/dark/darkGreyTheme.js

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: messageStatusReadColor,
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor2, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor2,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#5cab8b',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#323136',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#f07b61',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

package/es/Theme/crm/dark/pinkTheme.js

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#312d3a',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#ff69b4',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

package/es/Theme/crm/dark/tealTheme.js

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor2, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor2,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#37a5a5',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

package/es/Theme/crm/dark/whiteTheme.js

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: messageStatusReadColor,
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

package/es/Theme/crm/light/blueFanTheme.js

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: messageStatusReadColor,
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

package/es/Theme/crm/light/blueTheme.js

@@ -0,0 +1,31 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#f1f7fe',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: '#eff4fb',
+      border_color: '#cedef2'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#4a91d9',
+      failed_color: messageStatusFailedColor
+    },
+    imageBubble: {
+      bg_color: '#fff'
+    }
+  }
+};

package/es/Theme/crm/light/commonColorVariable.js

@@ -0,0 +1,9 @@
+export const incomingBubbleBgColor = '#f1f4f9';
+export const outgoingBubbleBgColor = '#f1f7fe';
+export const actionIconColor = '#000';
+export const actionIconBgColor = '#f1f7fe';
+export const actionIconBorderColor = '#b7d1f0';
+export const bubbleActiveBgColor = '#fdffe3';
+export const messageStatusSendColor = '#61667a';
+export const messageStatusFailedColor = '#de3535';
+export const messageStatusReadColor = '#0a73eb';

package/es/Theme/crm/light/darkBlueTheme.js

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: messageStatusReadColor,
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

package/es/Theme/crm/light/darkGreyTheme.js

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: messageStatusReadColor,
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

package/es/Theme/crm/light/greenTheme.js

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#f1f7fe',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: '#f1f6f4',
+      border_color: '#d4e5dd'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#5cab8b',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

package/es/Theme/crm/light/orangeTheme.js

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#f1f7fe',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: '#fcf2f0',
+      border_color: '#f6d9d2'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#f07b61',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};