@zohoim/chat-components 1.0.9-beta.1 → 1.0.9-beta.10

package/es/AttachmentHandler/css/AttachmentHandler.module.css

@@ -15,3 +15,13 @@
 .icon {
   color: initial;
 }
+
+
+.icon :global .path1:before {
+  color: var(--imlib_chat_components_emojiPopup_ttIcon_path1_color) !important;
+  opacity: 1;
+}
+
+.icon :global .path2:before {
+  color: var(--imlib_chat_components_emojiPopup_ttIcon_path2_color) !important;
+}

package/es/AttachmentPreview/AttachmentPreview.js

@@ -9,6 +9,7 @@ import AttachmentPreviewHeader from "../AttachmentPreviewHeader/AttachmentPrevie
 import AttachmentPreviewBody from "../AttachmentPreviewBody/AttachmentPreviewBody";
 /** ** Hooks *** */
 
+import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 import useAttachmentPreview from '@zohoim/chat-components-hooks/es/AttachmentPreview/useAttachmentPreview';
 import useAttachmentPreviewEditor from '@zohoim/chat-components-hooks/es/AttachmentPreview/useAttachmentPreviewEditor';
@@ -35,7 +36,9 @@ export default function AttachmentPreview(props) {
     texts,
     descriptionDetails,
     onDescriptionChange: propOnDescriptionChange,
-    needCloseOnEscape
+    needCloseOnEscape,
+    needUploadOnEnter,
+    needAutoZindex
   } = props;
   const {
     editorProps = dummyObject,
@@ -50,6 +53,7 @@ export default function AttachmentPreview(props) {
   /* External customization */
 
   const newStyle = useMergeStyle(style, customStyle);
+  const getNextIndex = useZIndex();
   const {
     selectedFile,
     isShow,
@@ -67,7 +71,9 @@ export default function AttachmentPreview(props) {
     onEditorKeyDown
   } = useAttachmentPreviewEditor({
     editorProps,
-    onPreviewPopupKeyDown: onEscape
+    onPreviewPopupKeyDown: onEscape,
+    needUploadOnEnter,
+    onSubmit
   });
   const {
     fileName,
@@ -78,13 +84,15 @@ export default function AttachmentPreview(props) {
     attachmentId
   } = selectedFile;
   const isImageFile = useMemo(() => mediaType === IMAGE, [mediaType]);
-  return isShow ? /*#__PURE__*/React.createElement("div", {
-    className: newStyle.attachmentPreview
-  }, /*#__PURE__*/React.createElement(Container, {
+  return isShow ? /*#__PURE__*/React.createElement(Container, {
     align: "both",
-    alignBox: "column"
+    alignBox: "column",
+    className: newStyle.attachmentPreview,
+    style: needAutoZindex ? {
+      zIndex: `${getNextIndex()}`
+    } : {}
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${newStyle.uploadPrev} ${newStyle.container}`
+    className: newStyle.uploadPrev
   }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AttachmentPreviewHeader, {
     cancelText: cancelText,
     fileName: fileName,
@@ -106,7 +114,7 @@ export default function AttachmentPreview(props) {
     onEditorKeyDown: onEditorKeyDown,
     placeHolder: placeHolder,
     ...attachmentPreviewBodyProps
-  }))))) : null;
+  })))) : null;
 }
 AttachmentPreview.propTypes = attachmentPreviewPropTypes;
 AttachmentPreview.defaultProps = attachmentPreviewDefaultProps;

package/es/AttachmentPreview/css/AttachmentPreview.module.css

@@ -3,8 +3,7 @@
   position: fixed;
   top: 0 ;
   bottom: 0 ;
-  /* z-index: 9999; */
-  z-index: 2147483643;
+  z-index: 2;
   overflow: hidden;
   background-color: rgba(42, 45, 54, 0.94);
 }
@@ -19,13 +18,22 @@
   right: 0 ;
 }
 
-.container {
-  position: relative;
+@keyframes scaleIn {
+  0% {
+      -webkit-transform: scale(0.9);
+      transform: scale(0.9);
+      opacity: .7
+  }
+
+  100% {
+      -webkit-transform: scale(1);
+      transform: scale(1);
+      opacity: 1
+  }
 }
 
 .uploadPrev {
   width: 100% ;
   max-width: 43.75rem;
-  background-color: #fff;
   border-radius: 5px;
 }

package/es/AttachmentPreview/props/defaultProps.js

@@ -2,6 +2,8 @@
 import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const attachmentPreviewDefaultProps = {
   customStyle: dummyObject,
-  needCloseOnEscape: true
+  needCloseOnEscape: true,
+  needUploadOnEnter: true,
+  needAutoZindex: true
 };
 export default attachmentPreviewDefaultProps;

package/es/AttachmentPreview/props/propTypes.js

@@ -26,6 +26,8 @@ const attachmentPreviewPropTypes = {
   }).isRequired,
   descriptionDetails: PropTypes.object,
   onDescriptionChange: PropTypes.func,
-  needCloseOnEscape: PropTypes.bool
+  needCloseOnEscape: PropTypes.bool,
+  needUploadOnEnter: PropTypes.bool,
+  needAutoZindex: PropTypes.bool
 };
 export default attachmentPreviewPropTypes;

package/es/AttachmentPreviewBody/AttachmentPreviewBody.js

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 /** ** Components *** */
 
 import { Container } from '@zohodesk/components/es/Layout';
-import Editor from "../rte/Editor/Editor";
+import ReplyComposer from "../im/ReplyComposer/ReplyComposer";
 import AttachmentIcon from "../AttachmentIcon/AttachmentIcon";
 /** ** Hooks *** */
 
@@ -41,10 +41,33 @@ export default function AttachmentPreviewBody(props) {
   const iconCustomStyle = useMemo(() => ({
     icon: newStyle.attachmentIcon
   }), [newStyle.attachmentIcon]);
-  const editorCustomStyle = useMemo(() => ({
-    editorWrapper: newStyle.editorWrapper,
-    editableDiv: newStyle.editableDiv
-  }), [newStyle.editorWrapper, newStyle.editableDiv]);
+  const modifiedEditorProps = useMemo(() => {
+    const {
+      customProps,
+      customStyle: replyComposerCustomStyle
+    } = editorProps || dummyObject;
+    const {
+      replyEditorProps
+    } = customProps || dummyObject;
+    const {
+      customStyle = dummyObject
+    } = replyEditorProps || dummyObject;
+    return { ...editorProps,
+      customStyle: {
+        replyComposer: newStyle.replyComposer,
+        ...replyComposerCustomStyle
+      },
+      customProps: { ...customProps,
+        replyEditorProps: { ...replyEditorProps,
+          customStyle: {
+            editorWrapper: newStyle.editorWrapper,
+            editableDiv: newStyle.editableDiv,
+            ...customStyle
+          }
+        }
+      }
+    };
+  }, [editorProps, newStyle.replyComposer, newStyle.editorWrapper, newStyle.editableDiv]);
   return /*#__PURE__*/React.createElement(Container, {
     align: "both",
     alignBox: "column",
@@ -60,15 +83,13 @@ export default function AttachmentPreviewBody(props) {
     fileFormat: fileFormat,
     mediaType: mediaType,
     ...attachmentIconProps
-  }))), isDescriptionNeeded ? /*#__PURE__*/React.createElement(Editor, {
+  }))), isDescriptionNeeded ? /*#__PURE__*/React.createElement(ReplyComposer, {
     content: description,
-    customStyle: editorCustomStyle,
     id: `${attachmentId}_Attach_Editor`,
-    needAutoFocus: true,
     onChange: onDescriptionChange,
     onKeyDown: onEditorKeyDown,
     placeHolder: placeHolder,
-    ...editorProps
+    ...modifiedEditorProps
   }) : null);
 }
 AttachmentPreviewBody.propTypes = attachmentPreviewBodyPropTypes;

package/es/AttachmentPreviewBody/css/AttachmentPreviewBody.module.css

@@ -4,26 +4,39 @@
   height: var(--zd_size60)  !important;
 }
 
+.replyComposer {
+  width: 100% ;
+}
+
 .editorWrapper {
   display: flex;
   flex-direction: column;
   height: 100% ;
   width: 100% ;
+  padding: 0 ;
+  margin-top: var(--zd_size40) ;
 }
 
 .editableDiv {
   min-height: var(--zd_size48)  !important;
+  max-height: var(--zd_size48)  !important;
   background-color: transparent !important;
   border: 0 !important;
-  border-bottom: 1px solid rgb(211, 223, 215) !important;
+  border-bottom: 1px solid
+    var(--imlib_chat_components_attachmentPreviewBody_editor_border_color) !important;
+  padding: 0  !important;
 }
 
 .editableDiv:hover {
-  border-color: rgb(120, 129, 144) !important;
+  border-color: var(
+    --imlib_chat_components_attachmentPreviewBody_editor_border_hover_color
+  ) !important;
 }
 
 .editableDiv:focus {
-  border-color: rgb(38, 169, 66) !important;
+  border-color: var(
+    --imlib_chat_components_attachmentPreviewBody_editor_border_active_color
+  ) !important;
 }
 
 .imgContent,
@@ -34,8 +47,7 @@
 }
 
 .imgContent, .zoomContent {
-  background: var(--zd_im_chat_attachment_preview_bg);
-  background-color: #f5f6f7;
+  background-color: var(--imlib_chat_components_attachmentPreviewBody_bg_color);
   padding: var(--zd_size40);
 }
 

package/es/AttachmentPreviewHeader/css/AttachmentPreviewHeader.module.css

@@ -1,7 +1,9 @@
 /** ** Styles *** */
 .imgPreviewerheader {
   position: relative;
-  background-color: var(--zd_im_common_bg);
+  background-color: var(
+    --imlib_chat_components_attachmentPreviewHeader_bg_color
+  );
   padding: var(--zd_size15) var(--zd_size40);
   border-bottom: var(--zd_size1) solid var(--zd_im_common_border);
 }
@@ -15,7 +17,7 @@
 }
 
 .imgName {
-  color: #000;
+  color: var(--imlib_chat_components_attachmentPreviewHeader_name_color);
   font-size: var(--zd_font_size17);
   font-family: var(--zd_semibold);
   composes: dotted from '../../css/common.module.css';
@@ -25,7 +27,7 @@
 
 .imgSize {
   font-size: var(--zd_font_size13);
-  color: #5a616f;
+  color: var(--imlib_chat_components_attachmentPreviewHeader_size_color);
   composes: dotted from '../../css/common.module.css';
   max-width: var(--zd_size150);
 }

package/es/Emoji/css/Emoji.module.css

@@ -11,8 +11,9 @@
   height: var(--emoji-width);
   overflow: hidden;
   font-size: 0 ;
-  display: inline-block;
-  vertical-align: -webkit-baseline-middle;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
   margin: 0 var(--emoji-margin);
   text-align: center;

package/es/EmojiPopup/EmojiPopup.js

@@ -93,7 +93,6 @@ function EmojiPopupComp(props) {
     isActive: isPopupReady,
     isAnimate: true,
     isArrow: false,
-    isRestrictScroll: true,
     onClick: removeClose,
     portalId: EDITOR_POPUP_PORTAL,
     positionsOffset: positionsOffset,

package/es/EmojiPopup/css/EmojiPopup.module.css

@@ -41,10 +41,15 @@
 }
 
 .icon :global .path1:before {
-  color: rgba(197,205,199,0.7) !important;
+  color: var(--imlib_chat_components_emojiPopup_ttIcon_path1_color) !important;
   opacity: 1;
 }
 
 .icon :global .path2:before {
-  color: #000 !important;
+  color: var(--imlib_chat_components_emojiPopup_ttIcon_path2_color) !important;
 }
+
+.icon :global .path2{
+  position: relative;
+  z-index: 1;
+}

package/es/Emojis/Emojis.js

@@ -26,7 +26,8 @@ export default function Emojis(props) {
     needAutoFocus,
     customProps,
     isShowOnlyContent,
-    searchPlaceHolder
+    searchPlaceHolder,
+    getMethods
   } = props;
   const {
     emojisListProps = dummyObject,
@@ -41,24 +42,23 @@ export default function Emojis(props) {
     selectedGroup,
     getEmojisListMethods,
     onSelect,
-    onSelectTab,
-    isRenderEmojis,
-    isRenderEmojisList
+    onSelectTab
   } = useEmojis({
     searchString,
     isShowSearchBox,
     needAutoFocus,
     onSelect: propOnSelect,
     emojisList,
-    isShowGroupBasedList
+    isShowGroupBasedList,
+    getMethods
   });
-  return isRenderEmojis ? /*#__PURE__*/React.createElement(React.Fragment, null, isShowSearchBox ? /*#__PURE__*/React.createElement(EmojisHeader, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isShowSearchBox ? /*#__PURE__*/React.createElement(EmojisHeader, {
     getRef: getSearchRef,
     onChange: onSearch,
     searchPlaceHolder: searchPlaceHolder,
     searchString: searchValue,
     ...emojisHeaderProps
-  }) : null, isRenderEmojisList ? /*#__PURE__*/React.createElement(EmojisList, {
+  }) : null, /*#__PURE__*/React.createElement(EmojisList, {
     emojisList: emojisList,
     getMethods: getEmojisListMethods,
     isShowGroupBasedList: searchValue ? false : isShowGroupBasedList,
@@ -69,12 +69,12 @@ export default function Emojis(props) {
     searchString: searchValue,
     selectedGroup: selectedGroup,
     ...emojisListProps
-  }) : null, isShowGroupBasedList ? /*#__PURE__*/React.createElement(EmojisFooter, {
+  }), isShowGroupBasedList ? /*#__PURE__*/React.createElement(EmojisFooter, {
     emojisList: emojisList,
     onSelect: onSelectTab,
     selectedTab: selectedGroup,
     ...emojisFooterProps
-  }) : null) : null;
+  }) : null);
 }
 Emojis.propTypes = emojisPropTypes;
 Emojis.defaultProps = emojisDefaultProps;

package/es/Emojis/props/propTypes.js

@@ -14,6 +14,7 @@ const emojisPropTypes = {
     emojisListProps: PropTypes.object
   }),
   isShowOnlyContent: PropTypes.bool,
-  searchPlaceHolder: PropTypes.string
+  searchPlaceHolder: PropTypes.string,
+  getMethods: PropTypes.func
 };
 export default emojisPropTypes;

package/es/EmojisFooter/css/EmojisFooter.module.css

@@ -1,6 +1,6 @@
 .footerTab {
   position: relative;
-  border-top: 1px solid rgb(238, 242, 239);
+  border-top: 1px solid var(--imlib_chat_components_emojiFooter_border_color);
 }
 
 .tabIcon {
@@ -32,9 +32,9 @@
   right: 0 ;
 }
 
-.emoji{
+.emoji {
   width: auto ;
   height: auto ;
   margin: 0 ;
   padding: 8% ;
-}
+}

package/es/EmojisHeader/css/EmojisHeader.module.css

@@ -1,14 +1,12 @@
-.container{
+.container {
   padding: var(--zd_size10) ;
-  border-bottom: 1px solid #e4e5e6;
+  border-bottom: 1px solid
+    var(--imlib_chat_components_emojisHeader_border_color);
 }
 
 .emojisSearch {
   position: relative;
   background-color: var(--imlib_chat_components_emojisHeader_bg_color);
-  background-color: #fafafa;
-
-  background-color: var(--imlib_chat_components_emojiPopup_bg);
 }
 
 .searchInput {

package/es/EmojisList/EmojisList.js

@@ -45,7 +45,8 @@ export default function EmojisList(props) {
     emojisList,
     setGroupRefs,
     setContainerRef: listContainerRef,
-    emptyState,
+    isAllEmpty,
+    isGroupEmpty,
     isRenderEmptyState,
     isRenderElement
   } = useEmojisList({
@@ -57,10 +58,6 @@ export default function EmojisList(props) {
     selectedGroup,
     isShowOnlyContent
   });
-  const {
-    isEmpty,
-    isGroupEmpty
-  } = emptyState;
   /* External customization */
 
   const newStyle = useMergeStyle(style, customStyle);
@@ -73,7 +70,7 @@ export default function EmojisList(props) {
     rowType,
     isShowGroupBasedList,
     isShowOnlyContent,
-    isEmpty
+    isEmpty: isAllEmpty
   }, newStyle);
   const renderGroup = useCallback(_ref => {
     let {
@@ -120,7 +117,7 @@ export default function EmojisList(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, isRenderElement ? /*#__PURE__*/React.createElement("div", {
     ref: listContainerRef,
     className: emojisListClass
-  }, !isEmpty ? Object.keys(emojisList).map(groupName => {
+  }, !isAllEmpty ? Object.keys(emojisList).map(groupName => {
     const emojis = emojisList[groupName];
     return renderGroup({
       groupName,

package/es/Theme/ThemeWrapper.js

@@ -8,7 +8,7 @@ import ThemeContext from '@zohoim/chat-components-hooks/es/Theme/ThemeContext';
 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 { MSG_ACTION_POPUP_PORTAL, EDITOR_POPUP_PORTAL, EDITOR_POPUP_TARGET_PORTAL } from "../constants";
 /** ** Components *** */
 
 import ThemeAssets from "./ThemeAssets";
@@ -68,6 +68,8 @@ export default function ThemeWrapper(props) {
     "data-portal": MSG_ACTION_POPUP_PORTAL
   }), /*#__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"

package/es/Theme/props/defaultProps.js

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

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 } from "./commonColorVariable";
+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',
@@ -113,9 +113,21 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryBlue
+      tabLine: primaryBlue,
+      border_color: '#2d3748'
     },
     replyEditor,
-    emojiPopup
+    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

@@ -21,7 +21,15 @@ export const emojiPopup = {
 };
 export const replyEditor = {
   bg: '#242b38',
-  border: '#f1f4f9',
   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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup } from "./commonColorVariable";
+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',
@@ -112,8 +112,21 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryGreen
-    },
-    emojiPopup
+      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 } from "./commonColorVariable";
+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',
@@ -112,8 +112,21 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryOrange
-    },
-    emojiPopup
+      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 } from "./commonColorVariable";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
 import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
@@ -112,8 +112,21 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryRed
-    },
-    emojiPopup
+      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'
+    }
   }
 };