@zohoim/chat-components 1.0.9-beta.7 → 1.0.9-beta.8

package/README.md

@@ -10,6 +10,11 @@ In this Library, We Provide Some Basic Message Components to Build Your Chat App
 
 > import MessageBubble from '@zohoim/chat-components/es/MessageBubble/MessageBubble’;
 
+# 1.0.10
+
+- hover actions retainment changes
+- @zohodesk/components version update
+
 # 1.0.9
 
 - chat bubble ui issues fixes

package/es/Message/Message.js

@@ -1,5 +1,5 @@
 /** ** Libraries *** */
-import React, { useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 /** ** Constants *** */
 
 import messageDefaultProps from "./props/defaultProps";
@@ -35,6 +35,10 @@ export default function Message(props) {
     renderContent,
     customProps
   } = props;
+  const [retainMessageActions, _setRetainMessageActions] = useState(false);
+  const setRetainMessageActions = useCallback(retain => {
+    _setRetainMessageActions(retain);
+  }, []);
   const {
     messageBubbleProps = dummyObject,
     messageOwnerProps = dummyObject,
@@ -111,7 +115,8 @@ export default function Message(props) {
       actions,
       onSelect: onSelectAction,
       renderSecondaryActions,
-      onMouseEnter: onMouseEnterAction
+      onMouseEnter: onMouseEnterAction,
+      setRetainMessageActions
     };
     return /*#__PURE__*/React.createElement(MessageActions, { ...props,
       ...messageActionsProps
@@ -125,6 +130,7 @@ export default function Message(props) {
     renderMessageActions: handleRenderMessageActions,
     renderMessageBox: handleRenderMessageBox,
     renderMessageOwner: handleRenderMessageOwner,
+    retainMessageActions: retainMessageActions,
     ...messageBubbleProps
   });
 }

package/es/MessageActions/MessageActions.js

@@ -26,6 +26,7 @@ export default function MessageActions(props) {
     defaultShowCount,
     onSelect,
     onMouseEnter,
+    setRetainMessageActions,
     renderSecondaryActions,
     customStyle,
     customProps
@@ -112,6 +113,7 @@ export default function MessageActions(props) {
     actions: allActions,
     defaultShowCount: defaultShowCount,
     renderMoreIcon: renderMore,
+    setRetainMessageActions: setRetainMessageActions,
     ...messageActionsWrapperProps
   }), secondaryActions ? /*#__PURE__*/React.createElement("div", {
     className: newStyle.secondaryActions

package/es/MessageActions/props/propTypes.js

@@ -20,6 +20,7 @@ const messageActionsPropTypes = {
   }),
   customStyle: PropTypes.object,
   defaultShowCount: PropTypes.number,
-  renderSecondaryActions: PropTypes.func
+  renderSecondaryActions: PropTypes.func,
+  setRetainMessageActions: PropTypes.func
 };
 export default messageActionsPropTypes;

package/es/MessageActionsMore/MessageActionsMore.js

@@ -2,8 +2,8 @@
 import React, { useCallback, useMemo } from 'react';
 /** ** Components *** */
 
-import Popup from '@zohodesk/components/es/Popup/Popup';
-import DropBox from '@zohodesk/components/es/DropBox/DropBox';
+import Popup from '@zohodesk/components/lib/Popup/Popup';
+import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
 /** ** Constants *** */
 
 import messageActionsMoreDefaultProps from "./props/defaultProps";
@@ -25,6 +25,7 @@ function MessageActionsMoreComp(props) {
     actions,
     renderMoreIcon,
     customStyle,
+    setRetainMessageActions,
     popupSize,
     defaultPopupPosition,
 
@@ -66,9 +67,10 @@ function MessageActionsMoreComp(props) {
       id,
       isShowInMore: true,
       action,
+      setRetainMessageActions,
       closePopup: closePopupOnly
     }); // id, isRenderInMorePopup
-  }), [actions, closePopupOnly]);
+  }), [actions, closePopupOnly, setRetainMessageActions]);
   const isRenderPopup = !!(moreIcon && isPopupOpen);
   return /*#__PURE__*/React.createElement("span", {
     className: newStyle.morePopupContainer

package/es/MessageActionsMore/props/propTypes.js

@@ -1,16 +1,14 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
-/** ** Constants *** */
-
-import { popupPosition, popupSize } from "../../constants/propConstants/popupPropConstants";
 const messageActionsMorePropTypes = {
   actions: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string.isRequired,
     renderFunction: PropTypes.func
   })).isRequired,
   renderMoreIcon: PropTypes.func.isRequired,
+  setRetainMessageActions: PropTypes.func,
   customStyle: PropTypes.object,
-  popupSize: PropTypes.oneOf(popupSize),
-  defaultPopupPosition: PropTypes.oneOf(popupPosition)
+  popupSize: PropTypes.oneOf(['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default']),
+  defaultPopupPosition: PropTypes.oneOf([['bottomCenter', 'bottomLeftToRight', 'bottomCenterToRight', 'bottomRightToLeft', 'bottomCenterToLeft', 'topCenter', 'topLeftToRight', 'topCenterToRight', 'topRightToLeft', 'topCenterToLeft', 'rightTopToBottom', 'rightCenterToBottom', 'rightCenter', 'rightBottomToTop', 'rightCenterToTop', 'leftTopToBottom', 'leftCenterToBottom', 'leftCenter', 'leftBottomToTop', 'leftCenterToTop', 'bottomRight', 'bottomLeft', 'topRight', 'topLeft', 'rightBottom', 'rightTop', 'leftBottom', 'leftTop']])
 };
 export default messageActionsMorePropTypes;

package/es/MessageActionsWrapper/MessageActionsWrapper.js

@@ -2,7 +2,7 @@
 import React, { useCallback } from 'react';
 /** ** Components *** */
 
-import { Container } from '@zohodesk/components/es/Layout';
+import { Container } from '@zohodesk/components/lib/Layout';
 import MessageActionsMore from "../MessageActionsMore/MessageActionsMore";
 /** ** Hooks *** */
 
@@ -25,7 +25,8 @@ export default function MessageActionsWrapper(props) {
     renderMoreIcon,
     defaultShowCount,
     customStyle,
-    customProps
+    customProps,
+    setRetainMessageActions
   } = props;
   const {
     messageActionsMoreProps = dummyObject
@@ -46,14 +47,16 @@ export default function MessageActionsWrapper(props) {
     return renderHandler(renderFunction)({
       id,
       isShowInMore: false,
+      setRetainMessageActions,
       action
     }); // id, isRenderInMorePopup
-  }), [defaultActions]);
+  }), [defaultActions, setRetainMessageActions]);
   const renderMoreActions = useCallback(() => /*#__PURE__*/React.createElement(MessageActionsMore, {
     actions: moreActions,
     renderMoreIcon: renderMoreIcon,
+    setRetainMessageActions: setRetainMessageActions,
     ...messageActionsMoreProps
-  }), [moreActions, renderMoreIcon, messageActionsMoreProps]);
+  }), [moreActions, renderMoreIcon, messageActionsMoreProps, setRetainMessageActions]);
   const renderRow = useCallback(() => /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     className: newStyle.row,

package/es/MessageActionsWrapper/props/propTypes.js

@@ -10,6 +10,7 @@ const messageActionsWrapperPropTypes = {
   }),
   customStyle: PropTypes.object,
   defaultShowCount: PropTypes.number,
-  renderMoreIcon: PropTypes.func
+  renderMoreIcon: PropTypes.func,
+  setRetainMessageActions: PropTypes.func
 };
 export default messageActionsWrapperPropTypes;

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

@@ -43,13 +43,6 @@
   flex-direction: column;
   position: absolute;
   top:0 ;
-  visibility: hidden;
-  opacity: 0;
-}
-
-.messageBubble:hover .messageActionWrapper{
-  visibility: visible;
-  opacity: 1;
 }
 
 .messageActionWrapperEnd {

package/es/MessageBubble/props/defaultProps.js

@@ -6,6 +6,7 @@ const messageBubbleDefaultProps = {
   isActive: false,
   needMessageActions: true,
   customStyle: dummyObject,
-  needSender: true
+  needSender: true,
+  retainMessageActions: false
 };
 export default messageBubbleDefaultProps;

package/es/MessageBubble/props/propTypes.js

@@ -12,6 +12,7 @@ const messageBubblePropTypes = {
   needSender: PropTypes.bool,
   renderMessageActions: PropTypes.func,
   renderMessageBoxFooter: PropTypes.func,
-  renderMessageOwner: PropTypes.func
+  renderMessageOwner: PropTypes.func,
+  retainMessageActions: PropTypes.bool
 };
 export default messageBubblePropTypes;

package/es/Theme/ThemeAssets.js

@@ -1,6 +1,6 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
-import '@zohodesk/components/es/common/boxShadow.module.css';
+import '@zohodesk/components/lib/common/boxShadow.module.css';
 /* component pkg - default mode, themes */
 
 import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_CTA_LightTheme.module.css';
@@ -64,7 +64,7 @@ import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/variables/assets/sizeVariables.module.css';
 import '@zohodesk/variables/assets/fontsizeVariables.module.css';
-import '@zohodesk/variables/es/fontFamilyVariables.module.css';
+import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
 export default function DeskAssets(props) {

package/es/Theme/ThemeWrapper.js

@@ -1,14 +1,11 @@
 /** ** 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 '@zohoim/chat-components-utils/es/constants/themeConstants';
-import { MSG_ACTION_POPUP_PORTAL, EDITOR_POPUP_PORTAL } from "../constants";
+import { styleTagId } from "./constants";
+import { MSG_ACTION_POPUP_PORTAL } from "../constants";
 /** ** Components *** */
 
 import ThemeAssets from "./ThemeAssets";
@@ -32,8 +29,7 @@ export default function ThemeWrapper(props) {
     theme: propTheme,
     modeKey,
     themeKey,
-    tooltipCustomStyle,
-    direction
+    tooltipCustomStyle
   } = props;
   /** ** containerRef for Tooltip *** */
 
@@ -64,11 +60,9 @@ export default function ThemeWrapper(props) {
   });
   /** ** Children Render Functions   *** */
 
-  const renderPortal = useCallback(() => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  const renderPortal = useCallback(() => /*#__PURE__*/React.createElement("div", {
     "data-portal": MSG_ACTION_POPUP_PORTAL
-  }), /*#__PURE__*/React.createElement("div", {
-    "data-portal": EDITOR_POPUP_PORTAL
-  })), []);
+  }), []);
   const renderStyle = useCallback(() => /*#__PURE__*/React.createElement("style", {
     id: "zoho-im-variables"
   }, `${selector}{${customizedVariables}}`), [selector, customizedVariables]);
@@ -77,12 +71,7 @@ export default function ThemeWrapper(props) {
     customStyle: tooltipCustomStyle,
     getContainerRef: getContainerRef
   }) : null), [getContainerRef, needTooltip, needThemeAssets, tooltipCustomStyle]);
-  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-    value: {
-      mode: propMode,
-      direction
-    }
-  }, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     id: styleTagId,
     ...wrapperDivProps,
     style: {
@@ -91,7 +80,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/es/Provider/Config';
+import { setLibraryConfig, getLibraryConfig } from '@zohodesk/components/lib/Provider/Config';
 /** ** Constants *** */
 
 import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';

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/props/defaultProps.js

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

package/es/Theme/props/propTypes.js

@@ -9,7 +9,6 @@ const themeWrapperPropTypes = {
   needTooltip: PropTypes.bool,
   themeConfigurations: PropTypes.object,
   themeKey: PropTypes.string,
-  tooltipCustomStyle: PropTypes.object,
-  direction: PropTypes.oneOf(['ltr', 'rtl'])
+  tooltipCustomStyle: PropTypes.object
 };
 export default themeWrapperPropTypes;

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, replyEditor, emojiPopup, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+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',
@@ -111,23 +111,6 @@ export default {
     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

@@ -13,23 +13,4 @@ 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'
-};
+export const failedUrlColor = '#0a73eb';

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+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',
@@ -110,23 +110,6 @@ export default {
     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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+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',
@@ -110,23 +110,6 @@ export default {
     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'
     }
   }
 };

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+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',
@@ -110,23 +110,6 @@ export default {
     videoBubble: {
       border_color: 'hsl(258.46deg 12.62% 23.2%)',
       border_color_failed: failedBdr
-    },
-    emojiFooter: {
-      tabLine: primaryRed,
-      border_color: 'hsl(258.46deg 12.62% 23.2%)'
-    },
-    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: '#e94f4f'
     }
   }
 };

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryYellow, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryYellow, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
 import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
@@ -110,23 +110,6 @@ export default {
     videoBubble: {
       border_color: '#2d3748',
       border_color_failed: failedBdr
-    },
-    emojiFooter: {
-      tabLine: primaryYellow,
-      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: '#d79835'
     }
   }
 };

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryBlue, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojiPopup, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryBlue, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {
@@ -109,27 +109,6 @@ export default {
     videoBubble: {
       border_color: '#ebf0f5',
       border_color_failed: failedBdr
-    },
-    emoji: {
-      active_bg_color: 'red',
-      hover_bg_color: 'green'
-    },
-    replyEditor,
-    emojiPopup: { ...emojiPopup,
-      ttIcon_path1_color: 'rgba(200, 203, 220, 0.7)',
-      ttIcon_path2_color: 'var(--dot_black)'
-    },
-    emojiFooter: {
-      tabLine: primaryBlue,
-      border_color: '#ebf0f5'
-    },
-    emojisHeader,
-    attachmentPreviewHeader,
-    attachmentPreviewBody: {
-      bg_color: '#f5f6f7',
-      editor_border_color: '#c8cbdc',
-      editor_border_hover_color: '#788190',
-      editor_border_active_color: '#0a73eb'
     }
   }
 };

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

@@ -32,23 +32,4 @@ export const imIntegrationIcon = {
 export const imTtIcon = {
   path0_color: 'rgba(200,203,220,0.7)',
   path1_color: '#000'
-};
-export const replyEditor = {
-  bg: '#fff',
-  color: '#000',
-  placeholder: '#c8cbdc'
-};
-export const emojiPopup = {
-  bg: '#f1f4f9',
-  border: '#f1f4f9',
-  titleColor: '#aaa'
-};
-export const emojisHeader = {
-  bg_color: '#fafafa',
-  border_color: '#ede8e8'
-};
-export const attachmentPreviewHeader = {
-  bg_color: '#fff',
-  name_color: '#000',
-  size_color: '#5a616f'
 };

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryGreen, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader, emojiPopup } from "./commonColorVariable";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryGreen, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {
@@ -109,23 +109,6 @@ export default {
     videoBubble: {
       border_color: '#ebf0f5',
       border_color_failed: failedBdr
-    },
-    emojiFooter: {
-      tabLine: primaryGreen,
-      border_color: '#ebf0f5'
-    },
-    replyEditor,
-    emojisHeader,
-    attachmentPreviewHeader,
-    attachmentPreviewBody: {
-      bg_color: '#f5f6f7',
-      editor_border_color: '#c5cdc7',
-      editor_border_hover_color: '#788190',
-      editor_border_active_color: '#26a942'
-    },
-    emojiPopup: { ...emojiPopup,
-      ttIcon_path1_color: 'rgba(197, 205, 199, 0.7)',
-      ttIcon_path2_color: 'var(--dot_black)'
     }
   }
 };