@zohoim/chat-components 0.0.13 → 0.0.14

package/es/ReplyBubbleHeader/ReplyBubbleHeader.js

@@ -1,58 +1,52 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
-
 /** ** Libraries *** */
-import React from 'react';
-
+import React, { useMemo, useCallback } from 'react';
 /** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
+
 import replyBubbleHeaderDefaultProps from './props/defaultProps';
 import replyBubbleHeaderPropTypes from './props/propTypes';
-
-/** ** Methods *** */
-import cssJSLogic from './css/cssJSLogic';
-
 /** ** Styles *** */
-import style from './css/ReplyBubbleHeader.module.css';
 
+import style from './css/ReplyBubbleHeader.module.css';
 /** ** Components *** */
-import { Container, Box } from '@zohodesk/components/es/Layout';
 
+import { Container, Box } from '@zohodesk/components/es/Layout';
 /** ** Icons *** */
+
 import ReplyIcon from '@zohodesk/icon/es/general/Reply';
+/** ** Methods *** */
+
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 export default function ReplyBubbleHeader(props) {
   const {
     customStyle,
     replyText,
-    time
+    time,
+    renderCustomReplyIcon
   } = props;
+  /* External CSS Customization */
 
-  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
-  const {
-    replyBubbleHeaderClass,
-    replyTextClass,
-    timeClass
-  } = cssJSLogic(props, newStyle);
+  const iconStyle = useMemo(() => ({
+    base: newStyle.replyIcon
+  }), [newStyle.replyIcon]);
+  const renderIcon = useCallback(() => {
+    const customIcon = renderHandler(renderCustomReplyIcon)();
+    return customIcon || /*#__PURE__*/React.createElement(ReplyIcon, {
+      customStyle: iconStyle
+    });
+  }, [iconStyle, renderCustomReplyIcon]);
   return /*#__PURE__*/React.createElement(Container, {
-    alignBox: "row",
-    className: replyBubbleHeaderClass
+    alignBox: "row"
   }, /*#__PURE__*/React.createElement(Box, {
     flexible: true
   }, /*#__PURE__*/React.createElement(Container, {
     alignBox: "row"
-  }, /*#__PURE__*/React.createElement(ReplyIcon, {
-    customStyle: {
-      base: newStyle.replyIcon
-    }
-  }), /*#__PURE__*/React.createElement(Box, {
-    className: replyTextClass
-  }, replyText))), /*#__PURE__*/React.createElement("div", {
-    className: timeClass
-  }, time));
+  }, renderIcon(), /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.replyText
+  }, replyText))), /*#__PURE__*/React.createElement("div", null, time));
 }
 ReplyBubbleHeader.propTypes = replyBubbleHeaderPropTypes;
 ReplyBubbleHeader.defaultProps = replyBubbleHeaderDefaultProps;

package/es/ReplyBubbleHeader/css/ReplyBubbleHeader.module.css

@@ -1,15 +1,12 @@
 .replyIcon {
-  width: var(--imlib_size_20);
-  height: var(--imlib_size_20);
+  width: var(--zd_size20) ;
+  height: var(--zd_size20) ;
 }
 
 .replyText {
-  max-width: var(--zd_size100);
+  max-width: var(--zd_size100) ;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: var(--zd_size14);
-}
-.time {
-  /*time class*/
+  font-size: var(--zd_font_size14) ;
 }

package/es/ReplyBubbleHeader/props/defaultProps.js

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

package/es/ReplyBubbleHeader/props/propTypes.js

@@ -1,8 +1,9 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const replyBubbleHeaderPropTypes = {
+  replyText: PropTypes.string.isRequired,
   customStyle: PropTypes.object,
-  replyText: PropTypes.string,
-  time: PropTypes.string
+  time: PropTypes.string,
+  renderCustomReplyIcon: PropTypes.func
 };
 export default replyBubbleHeaderPropTypes;

package/es/TextBubble/TextBubble.js

@@ -1,52 +1,34 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
-
 /** ** Libraries *** */
 import React from 'react';
-
 /** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-import useTextBubble from '@zohoim/chat-components-hooks/es/TextBubble/useTextBubble';
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
+
 import textBubbleDefaultProps from './props/defaultProps';
 import textBubblePropTypes from './props/propTypes';
-
-/** ** Methods *** */
-import cssJSLogic from './css/cssJSLogic';
-
 /** ** Styles *** */
+
 import style from './css/TextBubble.module.css';
 export default function TextBubble(props) {
   const {
-    customStyle
-  } = props;
-  const {
+    customStyle,
     moreText,
-    onClickMore,
-    message
-  } = useTextBubble(props);
+    message,
+    onClickMore
+  } = props;
+  /* External CSS Customization */
 
-  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
-  const {
-    textBubbleClass,
-    moreTextClass,
-    textBubbleWrapperClass
-  } = cssJSLogic(props, newStyle);
-  return /*#__PURE__*/React.createElement("span", {
-    className: textBubbleWrapperClass
-  }, /*#__PURE__*/React.createElement("span", {
-    className: textBubbleClass
-    // eslint-disable-next-line react/no-danger, @zohodesk/zsecurity/no-unsecure-html
+  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
+    className: newStyle.textBubble // eslint-disable-next-line react/no-danger, @zohodesk/zsecurity/no-unsecure-html
     ,
     dangerouslySetInnerHTML: {
       // __html: HTMLPurifier.sanitize(message)
       __html: message
     }
   }), moreText ? /*#__PURE__*/React.createElement("div", {
-    className: moreTextClass,
+    className: newStyle.moreText,
     onClick: onClickMore
   }, moreText) : null);
 }

package/es/TextBubble/css/TextBubble.module.css

@@ -1,14 +1,18 @@
+.textBubble {
+  /* Use this class name for css customisation */
+}
+
 .moreText {
-    text-transform: uppercase;
-    font-size: var(--imlib_size_11);
-    color: var(--imlib_chat_components_textBubble_see_more_color);
-    cursor: pointer;
+  text-transform: uppercase;
+  font-size: var(--zd_font_size11) ;
+  color: var(--imlib_chat_components_textBubble_see_more_color);
+  cursor: pointer;
 }
 
-.textBubble a{
-    color:var(--imlib_chat_components_textBubble_url_color);
+.textBubble a {
+  color: var(--imlib_chat_components_textBubble_url_color);
 }
 
-.textBubble a:hover{
-    text-decoration: underline;
-}
+.textBubble a:hover {
+  text-decoration: underline;
+}

package/es/TextBubble/props/defaultProps.js

@@ -1,9 +1,6 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const textBubbleDefaultProps = {
-  customStyle: dummyObject,
-  moreText: 'See More',
-  message: '',
-  isShowMoreText: false
+  customStyle: dummyObject
 };
 export default textBubbleDefaultProps;

package/es/TextBubble/props/propTypes.js

@@ -1,10 +1,9 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const textBubblePropTypes = {
+  message: PropTypes.string.isRequired,
   customStyle: PropTypes.object,
-  message: PropTypes.string,
-  onClickMore: PropTypes.func,
-  isShowMoreText: PropTypes.string,
-  moreText: PropTypes.string
+  moreText: PropTypes.string,
+  onClickMore: PropTypes.func
 };
 export default textBubblePropTypes;

package/es/Theme/{DeskAssets.js → ThemeAssets.js}

@@ -1,4 +1,6 @@
-// Component Package default mode & themes
+/** ** Libraries *** */
+import PropTypes from 'prop-types'; // Component Package default mode & themes
+
 import '@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
@@ -9,9 +11,8 @@ import '@zohodesk/components/assets/Appearance/default/themes/green/greenDefault
 import '@zohodesk/components/assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/default/mode/defaultMode.module.css';
+import '@zohodesk/components/assets/Appearance/default/mode/defaultMode.module.css'; // Component Package dark mode & themes
 
-// Component Package dark mode & themes
 import '@zohodesk/components/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
@@ -23,8 +24,8 @@ import '@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkComp
 import '@zohodesk/components/assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/dark/mode/darkMode.module.css';
-
 /* pure dark mode & theme css */
+
 import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css';
@@ -36,8 +37,8 @@ import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orangePure
 import '@zohodesk/components/assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/mode/pureDarkMode.module.css';
-
 /** ** Desk Components Assets *** */
+
 import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/variables/assets/sizeVariables.module.css';
@@ -50,4 +51,7 @@ export default function DeskAssets(props) {
     children
   } = props;
   return children || null;
-}
+}
+DeskAssets.propTypes = {
+  children: PropTypes.node
+};

package/es/Theme/ThemeWrapper.js

@@ -1,91 +1,88 @@
 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 React, { useMemo, useCallback } from 'react';
+/** ** Constants *** */
 
-// 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 { styleTagId } from './constants';
+import { MSG_ACTION_POPUP_PORTAL } from '../constants';
+/** ** Components *** */
+
+import ThemeAssets from './ThemeAssets';
+import TooltipWrapper from './TooltipWrapper';
+import { Container } from '@zohodesk/components/es/Layout';
+/** ** Methods *** */
+
 import getThemeConfigurations from './utils/getThemeConfigurations';
-import { I18NProvider } from '@zohodesk/i18n';
-// import datetime from '@zohodesk/datetimejs';
+import getCustomizedCssVariables from './utils/getCustomizedCssVariables';
+import getWrapperDivProps from './utils/getWrapperDivProps';
+/** ** Fonts *** */
 
 import '../Fonts/puviFont.module.css';
 export default function ThemeWrapper(props) {
   const {
     children,
-    needDeskAssets,
+    needThemeAssets,
     needTooltip,
     themeConfigurations: propThemeConfigurations,
-    mode,
-    theme,
-    app,
+    mode: propMode,
+    theme: propTheme,
     modeKey,
     themeKey,
     tooltipCustomStyle
   } = props;
+  /** ** containerRef for Tooltip *** */
+
   const containerRef = React.useRef(null);
+  const getContainerRef = useCallback(() => containerRef.current, []);
+  /** ** ThemeConfigurations Handling  *** */
+
   const {
     themeConfigurations,
-    deskMode,
-    deskTheme
-  } = getThemeConfigurations({
-    app,
     mode,
     theme
+  } = getThemeConfigurations({
+    mode: propMode,
+    theme: propTheme
   });
   const configurations = propThemeConfigurations || themeConfigurations;
-  function getContainerRef() {
-    return containerRef.current;
-  }
-  const wrapperDivProps = {
-    [modeKey]: deskMode,
-    [themeKey]: deskTheme
-  };
+  /** ** Style Handling  *** */
+
+  const selector = `#${styleTagId}`;
+  const prefix = '--imlib_';
+  const configuration = useMemo(() => [configurations], [configurations]);
+  const customizedVariables = useMemo(() => getCustomizedCssVariables(configuration, prefix), [configuration, prefix]);
+  const wrapperDivProps = getWrapperDivProps({
+    modeKey,
+    themeKey,
+    mode,
+    theme
+  });
+  /** ** Children Render Functions   *** */
+
+  const renderPortal = useCallback(() => /*#__PURE__*/React.createElement("div", {
+    "data-portal": MSG_ACTION_POPUP_PORTAL
+  }), []);
+  const renderStyle = useCallback(() => /*#__PURE__*/React.createElement("style", {
+    id: "zoho-im-variables"
+  }, `${selector}{${customizedVariables}}`), [selector, customizedVariables]);
+  const renderAssets = useCallback(() => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(React.Fragment, null, needThemeAssets ? /*#__PURE__*/React.createElement(ThemeAssets, null) : null), /*#__PURE__*/React.createElement(React.Fragment, null, needTooltip ? /*#__PURE__*/React.createElement(TooltipWrapper, {
+    containerRef: containerRef.current,
+    customStyle: tooltipCustomStyle,
+    getContainerRef: getContainerRef
+  }) : null)), [getContainerRef, needTooltip, needThemeAssets, tooltipCustomStyle]);
   return /*#__PURE__*/React.createElement("div", _extends({
-    id: "chat-components"
+    id: styleTagId
   }, wrapperDivProps, {
     style: {
       width: '100%',
       height: '100%'
     }
-  }), /*#__PURE__*/React.createElement(I18NProvider
-  // i18n={i18n}
-  , {
-    datePattern: "DD/MM/YYYY",
-    isEnabledCurrentYear: true,
-    timeFormat: "hh:mm",
-    timeZone: "Asia/Kolkata"
-    // tzdata should already have been fetched and set as default
-    // tzData={datetime.tz.data()}
-  }, /*#__PURE__*/React.createElement(ThemeProvider, {
-    configuration: [sizeVariable(baseUnitLimit.size), fontSizeVariable(baseUnitLimit.fontSize), fontVariable, transitionVariable(baseUnitLimit.transition), motionTransitionVariable(baseUnitLimit.motionTransition), configurations
-    // themeConfigration
-    // chatDarkTheme
-    ],
-
-    prefix: "--imlib_",
-    selector: "#chat-components"
-  }, /*#__PURE__*/React.createElement(Container, {
+  }), renderStyle(), /*#__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,
-    customStyle: tooltipCustomStyle,
-    getContainerRef: getContainerRef
-  }) : null)));
+  }, children), renderPortal(), renderAssets());
 }
 ThemeWrapper.propTypes = themeWrapperPropTypes;
 ThemeWrapper.defaultProps = themeWrapperDefaultProps;

package/es/Theme/{ToolttipWrapper.js → TooltipWrapper.js}

@@ -1,81 +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); }
-/* eslint-disable react/prop-types */
+
 /** ** Libraries *** */
 import React from 'react';
-
+import PropTypes from 'prop-types';
 /** ** Components *** */
-import Tooltip from '@zohodesk/components/es/Tooltip/Tooltip';
 
+import Tooltip from '@zohodesk/components/es/Tooltip/Tooltip';
 /** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Methods *** */
+
 import { setLibraryConfig, getLibraryConfig } from '@zohodesk/components/lib/Provider/Config';
-import cssJSLogic from './css/cssJSLogic';
+/** ** 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 = {}
+    customStyle = dummyObject
   } = 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
+
 
-  // 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);
+        containerRef.removeEventListener('mouseout', removeTimeout, false); // eslint-disable-next-line react-hooks/exhaustive-deps
+
         tooltipRef.current.unObserveElement();
       }
-    };
-  }, [containerRef]);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  /* External CSS Customization */
 
-  /* 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
+    className: newStyle.tooltipWrapper
   }, /*#__PURE__*/React.createElement(Tooltip, _extends({
     ref: tooltipRef
-  }, props, {
-    customClass: tooltipClass
-  })));
+  }, props)));
 }
-const a = {};
-TooltipWrapper.protoTypes = a;
+TooltipWrapper.propTypes = {
+  customStyle: PropTypes.object,
+  getContainerRef: PropTypes.func
+};

package/es/Theme/constants/index.js

@@ -1,3 +1,4 @@
+export const styleTagId = 'im-chat-components';
 export const baseUnitLimit = {
   size: {
     base: 16,
@@ -20,10 +21,6 @@ export const baseUnitLimit = {
     limit: 20
   }
 };
-export const appConstants = {
-  DESK: 'DESK',
-  CRM: 'CRM'
-};
 export const modeConstants = {
   LIGHT: 'LIGHT',
   DARK: 'DARK',

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconWrapperBgColor, actionIconWrapperBorderColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -14,10 +14,10 @@ export default {
       failed_bg_color: '#fcebeb',
       text_color: '#000'
     },
-    actionIcon: {
-      color: actionIconColor,
-      bg_color: actionIconBgColor,
-      border_color: actionIconBorderColor
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: actionIconWrapperBgColor,
+      border_color: actionIconWrapperBorderColor
     },
     messageStatus: {
       send_color: messageStatusSendColor,

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconWrapperBgColor, actionIconWrapperBorderColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -14,10 +14,10 @@ export default {
       failed_bg_color: '#fcebeb',
       text_color: '#000'
     },
-    actionIcon: {
-      color: actionIconColor,
-      bg_color: actionIconBgColor,
-      border_color: actionIconBorderColor
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: actionIconWrapperBgColor,
+      border_color: actionIconWrapperBorderColor
     },
     messageStatus: {
       send_color: messageStatusSendColor,

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

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

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconWrapperBgColor, actionIconWrapperBorderColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -14,10 +14,10 @@ export default {
       failed_bg_color: '#fcebeb',
       text_color: '#000'
     },
-    actionIcon: {
-      color: actionIconColor,
-      bg_color: actionIconBgColor,
-      border_color: actionIconBorderColor
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: actionIconWrapperBgColor,
+      border_color: actionIconWrapperBorderColor
     },
     messageStatus: {
       send_color: messageStatusSendColor,