@zohoim/chat-components 1.0.11 → 1.1.0

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 } 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',
@@ -111,6 +111,23 @@ 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,4 +13,23 @@ export const failedBg = '#f6dcdf';
 export const failedBdr = '#eb9ea7';
 export const failedLine = '#eb9ea7';
 export const failedColor = '#000';
-export const failedUrlColor = '#0a73eb';
+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'
+};

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 } 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',
@@ -110,6 +110,23 @@ 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 } 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',
@@ -110,6 +110,23 @@ 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 } 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',
@@ -110,6 +110,23 @@ 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 } 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',
@@ -110,6 +110,23 @@ 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 } 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: {
@@ -109,6 +109,27 @@ 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,4 +32,23 @@ 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 } 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: {
@@ -109,6 +109,23 @@ 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)'
     }
   }
 };

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: {
@@ -109,6 +109,23 @@ export default {
     videoBubble: {
       border_color: '#ebf0f5',
       border_color_failed: failedBdr
+    },
+    emojiFooter: {
+      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_path2_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: {
@@ -109,6 +109,23 @@ export default {
     videoBubble: {
       border_color: '#ebf0f5',
       border_color_failed: failedBdr
+    },
+    emojiFooter: {
+      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_path2_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: {
@@ -109,6 +109,23 @@ export default {
     videoBubble: {
       border_color: '#ebf0f5',
       border_color_failed: failedBdr
+    },
+    emojiFooter: {
+      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_path2_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 } 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',
@@ -110,6 +110,23 @@ export default {
     videoBubble: {
       border_color: '#161515',
       border_color_failed: failedBdr
+    },
+    emojiFooter: {
+      tabLine: primaryBlue,
+      border_color: '#161515'
+    },
+    replyEditor,
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_path2_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

@@ -15,4 +15,23 @@ export const failedBg = '#362530';
 export const failedBdr = '#290000';
 export const failedLine = '#290000';
 export const failedColor = '#e2e4e6';
-export const failedUrlColor = '#479dff';
+export const failedUrlColor = '#479dff';
+export const emojiPopup = {
+  bg: '#f1f4f9',
+  border: '#f1f4f9',
+  titleColor: '#aaa'
+};
+export const replyEditor = {
+  bg: '#212121',
+  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 } 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',
@@ -110,6 +110,23 @@ export default {
     videoBubble: {
       border_color: '#161515',
       border_color_failed: failedBdr
+    },
+    emojiFooter: {
+      tabLine: primaryGreen,
+      border_color: '#161515'
+    },
+    replyEditor,
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_path2_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 } 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',
@@ -110,6 +110,23 @@ export default {
     videoBubble: {
       border_color: '#161515',
       border_color_failed: failedBdr
+    },
+    emojiFooter: {
+      tabLine: primaryOrange,
+      border_color: '#161515'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_path2_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 } 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',
@@ -110,6 +110,23 @@ export default {
     videoBubble: {
       border_color: '#161515',
       border_color_failed: failedBdr
+    },
+    emojiFooter: {
+      tabLine: primaryRed,
+      border_color: '#161515'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_path2_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 } 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',
@@ -110,6 +110,23 @@ export default {
     videoBubble: {
       border_color: '#161515',
       border_color_failed: failedBdr
+    },
+    emojiFooter: {
+      tabLine: primaryYellow,
+      border_color: '#161515'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_path2_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/Theme/utils/getThemeConfigurations.js

@@ -1,4 +1,4 @@
-import { modeConstants, themeConstants } from "../constants";
+import { modeConstants, themeConstants } from '@zohoim/chat-components-utils/es/constants/themeConstants';
 import lightBlue from "../themeVariables/light/blueTheme";
 import lightGreen from "../themeVariables/light/greenTheme";
 import lightOrange from "../themeVariables/light/orangeTheme";

package/es/constants/index.js

@@ -1 +1,8 @@
-export const MSG_ACTION_POPUP_PORTAL = 'MSG_ACTION_POPUP_PORTAL';
+export const MSG_ACTION_POPUP_PORTAL = 'MSG_ACTION_POPUP_PORTAL';
+export const EDITOR_POPUP_PORTAL = 'EDITOR_POPUP_PORTAL';
+export const EDITOR_POPUP_TARGET_PORTAL = 'EDITOR_POPUP_TARGET_PORTAL';
+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`;
+`https://static.zohocdn.com/rtelibrary/${version}/js/rte.min.js`;

package/es/constants/propConstants/editorPropConstants.js

@@ -0,0 +1,3 @@
+export const formats = ['strong', 'em', 'underline', 'link', 'strikeThrough', 'align', 'fontSize', 'fontFamily', 'fontColor', 'highlight', 'script', 'lineHeight', 'direction', 'headings', 'clearFormatting', 'inlineQuote', 'indent', 'formatPainter'];
+export const features = ['hr', 'images', 'tables', 'list', 'code_block', 'video', 'blockquote', 'embed', 'html'];
+export const langCode = ['en_US', 'ar', 'as', 'bg', 'bn', 'brx', 'ca', 'cs', 'da', 'de', 'doi', 'el', 'es', 'et', 'fi', 'fr', 'ga', 'gu', 'hi', 'hr', 'hu', 'id', 'in', 'it', 'iw', 'ja', 'kn', 'ko', 'kok', 'ks', 'lt', 'mai', 'ml', 'mni', 'mr', 'ms', 'my', 'ne', 'nl', 'no', 'or', 'pa', 'pl', 'pt_BR', 'pt', 'ro', 'ru', 'sa', 'sat', 'sd', 'si', 'sk', 'sv', 'ta', 'te', 'th', 'tr', 'uk', 'ur', 'vi', 'zh_CN', 'zh_HK', 'zh_TW', 'zh'];

package/es/constants/propConstants/popupPropConstants.js

@@ -0,0 +1,2 @@
+export const popupSize = ['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default'];
+export const popupPosition = ['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'];

package/es/im/IMAttachmentHandler/IMAttachmentHandler.js

@@ -0,0 +1,50 @@
+/** ** Libraries *** */
+import React from 'react';
+/** ** Components *** */
+
+import AttachmentHandler from "../../AttachmentHandler/AttachmentHandler";
+/** ** Hooks *** */
+
+import useIMAttachmentHandler from '@zohoim/chat-components-hooks/es/im/IMAttachmentHandler/useIMAttachmentHandler';
+/** ** Constants *** */
+
+import imAttachmentHandlerDefaultProps from "./props/defaultProps";
+import imAttachmentHandlerPropTypes from "./props/propTypes";
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+export default function IMAttachmentHandler(props) {
+  const {
+    customProps = dummyObject,
+    iconName,
+    iconSize,
+    iconTitle,
+    renderCustomIcon,
+    isMultiAttachment,
+    onAttach: propOnAttach,
+    attachmentType,
+    integrationService
+  } = props;
+  const {
+    attachmentHandlerProps = dummyObject
+  } = customProps;
+  const {
+    onAttach,
+    supportedTypes
+  } = useIMAttachmentHandler({
+    onAttach: propOnAttach,
+    attachmentType,
+    integrationService
+  });
+  return /*#__PURE__*/React.createElement(AttachmentHandler, {
+    iconName: iconName,
+    iconSize: iconSize,
+    iconTitle: iconTitle,
+    isMultiAttachment: isMultiAttachment,
+    onAttach: onAttach,
+    renderCustomIcon: renderCustomIcon,
+    supportedFileTypes: supportedTypes,
+    ...attachmentHandlerProps
+  });
+}
+IMAttachmentHandler.propTypes = imAttachmentHandlerPropTypes;
+IMAttachmentHandler.defaultProps = imAttachmentHandlerDefaultProps;
+IMAttachmentHandler.displayName = 'IMAttachmentHandler';

package/es/im/IMAttachmentHandler/index.js

@@ -0,0 +1 @@
+export { default as IMAttachmentHandler } from "./IMAttachmentHandler";

package/es/im/IMAttachmentHandler/props/defaultProps.js

@@ -0,0 +1,10 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const imAttachmentHandlerDefaultProps = {
+  customStyle: dummyObject,
+  iconName: 'ZD-TT-image',
+  iconSize: '14',
+  iconTitle: 'Upload',
+  isMultiAttachment: false
+};
+export default imAttachmentHandlerDefaultProps;