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

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

@@ -26,6 +26,5 @@
 .uploadPrev {
   width: 100% ;
   max-width: 43.75rem;
-  background-color: #fff;
   border-radius: 5px;
 }

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 ReplyEditor from "../im/ReplyEditor/ReplyEditor";
 import AttachmentIcon from "../AttachmentIcon/AttachmentIcon";
 /** ** Hooks *** */
 
@@ -45,6 +45,12 @@ export default function AttachmentPreviewBody(props) {
     editorWrapper: newStyle.editorWrapper,
     editableDiv: newStyle.editableDiv
   }), [newStyle.editorWrapper, newStyle.editableDiv]);
+  const editorCustomProps = useMemo(() => ({
+    editorProps: {
+      needAutoFocus: true,
+      ...editorProps
+    }
+  }), [editorProps]);
   return /*#__PURE__*/React.createElement(Container, {
     align: "both",
     alignBox: "column",
@@ -60,15 +66,14 @@ export default function AttachmentPreviewBody(props) {
     fileFormat: fileFormat,
     mediaType: mediaType,
     ...attachmentIconProps
-  }))), isDescriptionNeeded ? /*#__PURE__*/React.createElement(Editor, {
+  }))), isDescriptionNeeded ? /*#__PURE__*/React.createElement(ReplyEditor, {
     content: description,
+    customProps: editorCustomProps,
     customStyle: editorCustomStyle,
     id: `${attachmentId}_Attach_Editor`,
-    needAutoFocus: true,
     onChange: onDescriptionChange,
     onKeyDown: onEditorKeyDown,
-    placeHolder: placeHolder,
-    ...editorProps
+    placeHolder: placeHolder
   }) : null);
 }
 AttachmentPreviewBody.propTypes = attachmentPreviewBodyPropTypes;

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

@@ -13,17 +13,23 @@
 
 .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;
 }
 
 .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 +40,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/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/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,18 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryBlue
+      tabLine: primaryBlue,
+      border_color: '#2d3748'
     },
     replyEditor,
-    emojiPopup
+    emojiPopup,
+    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,18 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryGreen
-    },
-    emojiPopup
+      tabLine: primaryGreen,
+      border_color: '#2d3748'
+    },
+    emojiPopup,
+    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,18 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryOrange
-    },
-    emojiPopup
+      tabLine: primaryOrange,
+      border_color: '#2d3748'
+    },
+    emojiPopup,
+    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,18 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryRed
-    },
-    emojiPopup
+      tabLine: primaryRed,
+      border_color: 'hsl(258.46deg 12.62% 23.2%)'
+    },
+    emojiPopup,
+    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 } from "./commonColorVariable";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryYellow, 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,18 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryYellow
-    },
-    emojiPopup
+      tabLine: primaryYellow,
+      border_color: '#2d3748'
+    },
+    emojiPopup,
+    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 } from "./commonColorVariable";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryBlue, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojiPopup, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {
@@ -117,7 +117,16 @@ export default {
     replyEditor,
     emojiPopup,
     emojiFooter: {
-      tabLine: primaryBlue
+      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

@@ -35,12 +35,20 @@ export const imTtIcon = {
 };
 export const replyEditor = {
   bg: '#fff',
-  border: '#f1f4f9',
   color: '#000',
-  placeholder: '#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 } from "./commonColorVariable";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryGreen, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {
@@ -111,7 +111,17 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryGreen
+      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'
     }
   }
 };

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryOrange, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from "./commonColorVariable";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryOrange, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {
@@ -111,7 +111,17 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryOrange
+      tabLine: primaryOrange,
+      border_color: '#ebf0f5'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#f5f6f7',
+      editor_border_color: '#d1cbc6',
+      editor_border_hover_color: '#788190',
+      editor_border_active_color: '#e57717'
     }
   }
 };

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryRed, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from "./commonColorVariable";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryRed, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {
@@ -111,7 +111,17 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryRed
+      tabLine: primaryRed,
+      border_color: '#ebf0f5'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#f5f6f7',
+      editor_border_color: '#b9b2b4',
+      editor_border_hover_color: '#788190',
+      editor_border_active_color: '#de3535'
     }
   }
 };

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryYellow, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from "./commonColorVariable";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryYellow, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {
@@ -111,7 +111,17 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryYellow
+      tabLine: primaryYellow,
+      border_color: '#ebf0f5'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#f5f6f7',
+      editor_border_color: '#ccc2a4',
+      editor_border_hover_color: '#788190',
+      editor_border_active_color: '#e8b923'
     }
   }
 };

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, replyEditor, emojiPopup } from "./commonColorVariable";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, 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',
@@ -112,9 +112,18 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryBlue
+      tabLine: primaryBlue,
+      border_color: '#161515'
     },
     replyEditor,
-    emojiPopup
+    emojiPopup,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262626',
+      editor_border_color: '#585858',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#479dff'
+    }
   }
 };

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

@@ -23,7 +23,15 @@ export const emojiPopup = {
 };
 export const replyEditor = {
   bg: '#212121',
-  border: '#f1f4f9',
   color: '#e2e4e6',
   placeholder: '#585858'
+};
+export const emojisHeader = {
+  bg_color: '#171717',
+  border_color: '#161515'
+};
+export const attachmentPreviewHeader = {
+  bg_color: '#212121',
+  name_color: '#e2e4e6',
+  size_color: '#a8b0bd'
 };

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup } from "./commonColorVariable";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, 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,18 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryGreen
-    },
-    emojiPopup
+      tabLine: primaryGreen,
+      border_color: '#161515'
+    },
+    replyEditor,
+    emojiPopup,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262626',
+      editor_border_color: '#585858',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#45a159'
+    }
   }
 };

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup } from "./commonColorVariable";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, 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,18 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryOrange
-    },
-    emojiPopup
+      tabLine: primaryOrange,
+      border_color: '#161515'
+    },
+    emojiPopup,
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262626',
+      editor_border_color: '#585858',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#ff801f'
+    }
   }
 };

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup } from "./commonColorVariable";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, 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,18 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryRed
-    },
-    emojiPopup
+      tabLine: primaryRed,
+      border_color: '#161515'
+    },
+    emojiPopup,
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262626',
+      editor_border_color: '#585858',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#e94f4f'
+    }
   }
 };

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconWrapperColor, primaryYellow, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup } from "./commonColorVariable";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconWrapperColor, primaryYellow, 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,18 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryYellow
-    },
-    emojiPopup
+      tabLine: primaryYellow,
+      border_color: '#161515'
+    },
+    emojiPopup,
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262626',
+      editor_border_color: '#585858',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#d79835'
+    }
   }
 };

package/es/constants/index.js

@@ -1,6 +1,6 @@
 export const MSG_ACTION_POPUP_PORTAL = 'MSG_ACTION_POPUP_PORTAL';
 export const EDITOR_POPUP_PORTAL = 'EDITOR_POPUP_PORTAL';
-const version = '1.4.6';
+const version = '1.4.9';
 export const defaultEditorURL = // `https://static.localzohocdn.com/rtelibrary/${version}/js/rte.js`;
 // `https://static.zohocdn.com/rtelibrary/${version}/js/rte.js`;
 // `https://static.localzohocdn.com/rtelibrary/${version}/js/rte.min.js`;

package/es/im/ReplyEditor/css/ReplyEditor.module.css

@@ -17,8 +17,16 @@
   font-size: var(--zd_font_size14)  !important;
   font-family: var(--zd_regular) !important;
   line-height: 22px !important;
+
+  --rte-text-color: var(--imlib_chat_components_replyEditor_color) !important;
+  --rte-bg-color: var(--imlib_chat_components_replyEditor_bg) !important;
+  --rte-placeholder-color: var(
+    --imlib_chat_components_replyEditor_placeholder
+  ) !important;
+  --rte-link-text-color: var(
+    --imlib_chat_components_replyEditor_color
+  ) !important;
   padding: 0  !important;
-  background-color: var(--imlib_chat_components_replyEditor_bg) !important;
 }
 
 .editorWrapper {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohoim/chat-components",
-  "version": "1.0.9-beta.1",
+  "version": "1.0.9-beta.2",
   "description": "Chat Components",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -45,5 +45,5 @@
     "jsdom": "23.0.0",
     "react-to-jsx": "1.3.2"
   },
-  "gitHead": "d8670ce2add58aa0e6ad741ecf107272029c66dd"
+  "gitHead": "249c979f45728e88f3fc2f5db1fc2f55cb6548bf"
 }