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

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

@@ -78,13 +78,12 @@ 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
   }, /*#__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 +105,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,7 +3,6 @@
   position: fixed;
   top: 0 ;
   bottom: 0 ;
-  /* z-index: 9999; */
   z-index: 2147483643;
   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/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

@@ -9,21 +9,29 @@
   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;
 }
 
 .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 +42,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/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/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,21 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryBlue
+      tabLine: primaryBlue,
+      border_color: '#2d3748'
     },
     replyEditor,
-    emojiPopup
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: '#5f6478',
+      ttIcon_pathe2_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_pathe2_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_pathe2_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_pathe2_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 } 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,21 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryYellow
-    },
-    emojiPopup
+      tabLine: primaryYellow,
+      border_color: '#2d3748'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: '#5f6478',
+      ttIcon_pathe2_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 } 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: {
@@ -115,9 +115,21 @@ export default {
       hover_bg_color: 'green'
     },
     replyEditor,
-    emojiPopup,
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(200, 203, 220, 0.7)',
+      ttIcon_pathe2_color: 'var(--dot_black)'
+    },
     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, emojiPopup } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {
@@ -111,7 +111,21 @@ 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'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(197, 205, 199, 0.7)',
+      ttIcon_pathe2_color: 'var(--dot_black)'
     }
   }
 };

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, emojiPopup } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {
@@ -111,7 +111,21 @@ 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'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(204, 201, 199, 0.7)',
+      ttIcon_pathe2_color: 'var(--dot_black)'
     }
   }
 };

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, emojiPopup } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {
@@ -111,7 +111,21 @@ 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'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(204, 199, 201, 0.7)',
+      ttIcon_pathe2_color: 'var(--dot_black)'
     }
   }
 };

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, emojiPopup } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {
@@ -111,7 +111,21 @@ 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'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(204, 203, 199, 0.7)',
+      ttIcon_pathe2_color: 'var(--dot_black)'
     }
   }
 };

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,21 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryBlue
+      tabLine: primaryBlue,
+      border_color: '#161515'
     },
     replyEditor,
-    emojiPopup
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_pathe2_color: 'var(--dot_platinum)'
+    },
+    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,21 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryGreen
-    },
-    emojiPopup
+      tabLine: primaryGreen,
+      border_color: '#161515'
+    },
+    replyEditor,
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_pathe2_color: 'var(--dot_platinum)'
+    },
+    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,21 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryOrange
-    },
-    emojiPopup
+      tabLine: primaryOrange,
+      border_color: '#161515'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_pathe2_color: 'var(--dot_platinum)'
+    },
+    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,21 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryRed
-    },
-    emojiPopup
+      tabLine: primaryRed,
+      border_color: '#161515'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_pathe2_color: 'var(--dot_platinum)'
+    },
+    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,21 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryYellow
-    },
-    emojiPopup
+      tabLine: primaryYellow,
+      border_color: '#161515'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_pathe2_color: 'var(--dot_platinum)'
+    },
+    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/ReplyComposerFooter/css/ReplyComposerFooter.module.css

@@ -1,5 +1,10 @@
 /** ** Styles *** */
 .replyComposerFooter {
   display: flex;
-  padding: 0 var(--zd_size16) var(--zd_size16) ;
+}
+[dir=ltr] .replyComposerFooter {
+  padding: 0 0 0 var(--zd_size16) ;
+}
+[dir=rtl] .replyComposerFooter {
+  padding: 0 var(--zd_size16) 0 0 ;
 }

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 {
@@ -28,3 +36,7 @@
 .editor {
   /** ** Use this class for css customisations *** */
 }
+
+.replyEditor :global(.prosemirror-suggestion) {
+  text-decoration: none !important;
+}

package/es/im/ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohoim/chat-components",
-  "version": "1.0.9-beta.1",
+  "version": "1.0.9-beta.3",
   "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": "0da64ee194d86cdd982dc2020fac8f2ff05686ae"
 }