@zohoim/chat-components 0.0.11 → 0.0.14

package/es/Theme/crm/pureDark/darkGreyTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconWrapperBgColor, actionIconWrapperBorderColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -14,10 +14,10 @@ export default {
       failed_bg_color: '#fcebeb',
       text_color: '#000'
     },
-    actionIcon: {
-      color: actionIconColor,
-      bg_color: actionIconBgColor,
-      border_color: actionIconBorderColor
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: actionIconWrapperBgColor,
+      border_color: actionIconWrapperBorderColor
     },
     messageStatus: {
       send_color: messageStatusSendColor,

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconWrapperBgColor, actionIconWrapperBorderColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -14,10 +14,10 @@ export default {
       failed_bg_color: '#fcebeb',
       text_color: '#000'
     },
-    actionIcon: {
-      color: actionIconColor,
-      bg_color: actionIconBgColor,
-      border_color: actionIconBorderColor
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: actionIconWrapperBgColor,
+      border_color: actionIconWrapperBorderColor
     },
     messageStatus: {
       send_color: messageStatusSendColor,

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconWrapperBgColor, actionIconWrapperBorderColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -14,10 +14,10 @@ export default {
       failed_bg_color: '#fcebeb',
       text_color: '#000'
     },
-    actionIcon: {
-      color: actionIconColor,
-      bg_color: actionIconBgColor,
-      border_color: actionIconBorderColor
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: actionIconWrapperBgColor,
+      border_color: actionIconWrapperBorderColor
     },
     messageStatus: {
       send_color: messageStatusSendColor,

package/es/Theme/crm/pureDark/pinkTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconWrapperBgColor, actionIconWrapperBorderColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -14,10 +14,10 @@ export default {
       failed_bg_color: '#fcebeb',
       text_color: '#000'
     },
-    actionIcon: {
-      color: actionIconColor,
-      bg_color: actionIconBgColor,
-      border_color: actionIconBorderColor
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: actionIconWrapperBgColor,
+      border_color: actionIconWrapperBorderColor
     },
     messageStatus: {
       send_color: messageStatusSendColor,

package/es/Theme/crm/pureDark/tealTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconWrapperBgColor, actionIconWrapperBorderColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -14,10 +14,10 @@ export default {
       failed_bg_color: '#fcebeb',
       text_color: '#000'
     },
-    actionIcon: {
-      color: actionIconColor,
-      bg_color: actionIconBgColor,
-      border_color: actionIconBorderColor
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: actionIconWrapperBgColor,
+      border_color: actionIconWrapperBorderColor
     },
     messageStatus: {
       send_color: messageStatusSendColor,

package/es/Theme/crm/pureDark/whiteTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconWrapperBgColor, actionIconWrapperBorderColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -14,10 +14,10 @@ export default {
       failed_bg_color: '#fcebeb',
       text_color: '#000'
     },
-    actionIcon: {
-      color: actionIconColor,
-      bg_color: actionIconBgColor,
-      border_color: actionIconBorderColor
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: actionIconWrapperBgColor,
+      border_color: actionIconWrapperBorderColor
     },
     messageStatus: {
       send_color: messageStatusSendColor,

package/es/Theme/css/TooltipWrapper.module.css

@@ -1,6 +1,6 @@
 .tooltipWrapper {
-  height: 0;
-  font-size: 0;
+  height: 0 ;
+  font-size: 0 ;
   outline: 0;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;

package/es/Theme/props/defaultProps.js

@@ -1,13 +1,12 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const themeWrapperDefaultProps = {
-  needDeskAssets: true,
+  needThemeAssets: true,
   mode: 'LIGHT',
   theme: 'BLUE',
   needTooltip: true,
   modeKey: 'data-mode',
   themeKey: 'data-theme',
-  app: 'DESK',
   tooltipCustomStyle: dummyObject
 };
 export default themeWrapperDefaultProps;

package/es/Theme/props/propTypes.js

@@ -1,14 +1,13 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const themeWrapperPropTypes = {
-  children: PropTypes.node,
-  needDeskAssets: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  mode: PropTypes.string.isRequired,
+  theme: PropTypes.string.isRequired,
+  modeKey: PropTypes.string,
+  needThemeAssets: PropTypes.bool,
   needTooltip: PropTypes.bool,
   themeConfigurations: PropTypes.object,
-  mode: PropTypes.string,
-  theme: PropTypes.string,
-  app: PropTypes.string,
-  modeKey: PropTypes.string,
   themeKey: PropTypes.string,
   tooltipCustomStyle: PropTypes.object
 };

package/es/Theme/themeVariables/commonThemeColorVariable.js

@@ -0,0 +1,13 @@
+export const imIntegrationIcon = {
+  path0_color: '#ffffff40',
+  path1_color: '#fff',
+  whatsapp_color: '#24d366',
+  telegram_color: '#4fa7d8',
+  wechat_color: '#2dc100',
+  line_color: '#01b901',
+  twillio_color: '#f22f46',
+  instagram_color: 'red',
+  asap_color: '#0a73eb' // twitter_color: 'red'
+
+};
+export const messagetextColor = '#e2e4e6';

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

@@ -0,0 +1,68 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#2c3b4d',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#362734',
+      text_color: messagetextColor,
+      failed_text_color: '#000'
+    },
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#2c3b4d',
+      border_color: '#3f536b'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#479dff',
+      failed_color: messageStatusFailedColor
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileSize_color: '#788190'
+    },
+    attachmentBubble: {
+      bg_color: '#232b38',
+      border_color: '#2d3748'
+    },
+    replyBubbleContent: {
+      bg_color: '#232b38',
+      color: '#e2e4e6',
+      border_color: '#2d3748',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      bg_color: '#232b38'
+    },
+    locationBubble: {
+      bg_color: '#232b38',
+      color: primaryBlue,
+      border_color: '#2d3748'
+    },
+    articleBubble: {
+      bg_color: '#232b38',
+      color: '#e2e4e6',
+      border_color: '#2d3748'
+    },
+    textBubble: {
+      see_more_color: primaryBlue,
+      url_color: primaryBlue
+    },
+    imTicketLink: {
+      color: '#479dff'
+    },
+    imMessageMeta: {
+      timeColor: '#a8b0bd'
+    }
+  }
+};

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

@@ -0,0 +1,10 @@
+export const incomingBubbleBgColor = '#232b38';
+export const bubbleActiveBgColor = '#1b2e33';
+export const actionIconWrapperColor = '#e2e4e6';
+export const messageStatusSendColor = '#61667a';
+export const messageStatusFailedColor = '#de3535';
+export const primaryBlue = '#479dff';
+export const primaryGreen = '#45a159';
+export const primaryOrange = '#ff801f';
+export const primaryRed = '#e94f4f';
+export const primaryYellow = '#d79835';

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

@@ -0,0 +1,67 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#26373b',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#362734',
+      text_color: messagetextColor
+    },
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#26373b',
+      border_color: '#2d4e42'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#45a159',
+      failed_color: messageStatusFailedColor
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileSize_color: '#788190'
+    },
+    attachmentBubble: {
+      bg_color: '#232b38',
+      border_color: '#2d3748'
+    },
+    imTicketLink: {
+      color: '#45a159'
+    },
+    replyBubbleContent: {
+      bg_color: 'hsl(191.43deg 21.65% 13.02%)',
+      color: '#e2e4e6',
+      border_color: '#2d3748',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      bg_color: '#232b38'
+    },
+    locationBubble: {
+      bg_color: '#232b38',
+      color: primaryGreen,
+      border_color: '#2d3748'
+    },
+    articleBubble: {
+      bg_color: '#232b38',
+      color: '#e2e4e6',
+      border_color: '#2d3748'
+    },
+    imMessageMeta: {
+      timeColor: '#a8b0bd'
+    },
+    textBubble: {
+      see_more_color: primaryGreen,
+      url_color: primaryGreen
+    }
+  }
+};

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

@@ -0,0 +1,67 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#323136',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#362734',
+      text_color: messagetextColor
+    },
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#323136',
+      border_color: '#4f3c33'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#ff801f',
+      failed_color: messageStatusFailedColor
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileSize_color: '#788190'
+    },
+    attachmentBubble: {
+      bg_color: '#232b38',
+      border_color: '#2d3748'
+    },
+    imTicketLink: {
+      color: '#ff801f'
+    },
+    replyBubbleContent: {
+      bg_color: '#232b38',
+      color: '#e2e4e6',
+      border_color: '#2d3748',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      bg_color: '#232b38'
+    },
+    locationBubble: {
+      bg_color: '#232b38',
+      color: primaryOrange,
+      border_color: '#2d3748'
+    },
+    articleBubble: {
+      bg_color: '#232b38',
+      color: '#e2e4e6',
+      border_color: '#2d3748'
+    },
+    imMessageMeta: {
+      timeColor: '#a8b0bd'
+    },
+    textBubble: {
+      see_more_color: primaryOrange,
+      url_color: primaryOrange
+    }
+  }
+};

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

@@ -0,0 +1,76 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#312d3a',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#362734',
+      text_color: messagetextColor
+    },
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#312d3a',
+      border_color: '#4b323d'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#e94f4f',
+      failed_color: messageStatusFailedColor
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileSize_color: '#788190'
+    },
+    attachmentBubble: {
+      // bg_color: "#232b38",
+      bg_color: 'hsl(258.46deg 12.62% 16.2%)',
+      // border_color: "#2d3748",
+      border_color: 'hsl(258.46deg 12.62% 23.2%)'
+    },
+    imTicketLink: {
+      color: '#e94f4f'
+    },
+    replyBubbleContent: {
+      // bg_color: "#232b38",
+      bg_color: 'hsl(258.46deg 12.62% 16.2%)',
+      color: '#e2e4e6',
+      // border_color: "#2d3748",
+      border_color: 'hsl(258.46deg 12.62% 23.2%)',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      // bg_color: "#232b38",
+      bg_color: 'hsl(258.46deg 12.62% 16.2%)'
+    },
+    locationBubble: {
+      // bg_color: "#232b38",
+      bg_color: 'hsl(258.46deg 12.62% 16.2%)',
+      color: primaryRed,
+      // border_color: '#2d3748',
+      border_color: 'hsl(258.46deg 12.62% 23.2%)'
+    },
+    articleBubble: {
+      // bg_color: "#232b38",
+      bg_color: 'hsl(258.46deg 12.62% 16.2%)',
+      color: '#e2e4e6',
+      // border_color: "#2d3748",
+      border_color: 'hsl(258.46deg 12.62% 23.2%)'
+    },
+    imMessageMeta: {
+      timeColor: '#a8b0bd'
+    },
+    textBubble: {
+      see_more_color: primaryRed,
+      url_color: primaryRed
+    }
+  }
+};

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

@@ -0,0 +1,67 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryYellow } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#303338',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#362734',
+      text_color: messagetextColor
+    },
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#303338',
+      border_color: '#474137'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#d79835',
+      failed_color: messageStatusFailedColor
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileSize_color: '#788190'
+    },
+    attachmentBubble: {
+      bg_color: '#232b38',
+      border_color: '#2d3748'
+    },
+    imTicketLink: {
+      color: '#d79835'
+    },
+    replyBubbleContent: {
+      bg_color: '#232b38',
+      color: '#e2e4e6',
+      border_color: '#2d3748',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      bg_color: '#232b38'
+    },
+    locationBubble: {
+      bg_color: '#232b38',
+      color: primaryYellow,
+      border_color: '#2d3748'
+    },
+    articleBubble: {
+      bg_color: '#232b38',
+      color: '#e2e4e6',
+      border_color: '#2d3748'
+    },
+    imMessageMeta: {
+      timeColor: '#a8b0bd'
+    },
+    textBubble: {
+      see_more_color: primaryYellow,
+      url_color: primaryYellow
+    }
+  }
+};

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

@@ -0,0 +1,63 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryBlue, white } from './commonColorVariable';
+import { imIntegrationIcon } from '../commonThemeColorVariable';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#f1f7fe',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: messagetextColor
+    },
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#f1f7fe',
+      border_color: '#b7d1f0'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: primaryBlue,
+      failed_color: messageStatusFailedColor
+    },
+    attachmentBubble: {
+      bg_color: white,
+      border_color: '#ebf0f5'
+    },
+    replyBubbleContent: {
+      bg_color: white,
+      color: '#000',
+      border_color: '#ebf0f5',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      bg_color: white
+    },
+    locationBubble: {
+      bg_color: white,
+      color: primaryBlue,
+      border_color: '#ebf0f5'
+    },
+    articleBubble: {
+      bg_color: white,
+      color: '#000',
+      border_color: '#ebf0f5'
+    },
+    imTicketLink: {
+      color: primaryBlue
+    },
+    textBubble: {
+      see_more_color: primaryBlue,
+      url_color: primaryBlue
+    },
+    imMessageMeta: {
+      timeColor: '#5a616f'
+    }
+  }
+};

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

@@ -0,0 +1,12 @@
+export const incomingBubbleBgColor = '#f1f4f9';
+export const bubbleActiveBgColor = '#fdffe3';
+export const actionIconWrapperColor = '#000';
+export const messageStatusSendColor = '#61667a';
+export const messageStatusFailedColor = '#de3535';
+export const messagetextColor = '#000';
+export const white = '#fff';
+export const primaryBlue = '#0a73eb';
+export const primaryGreen = '#26a942';
+export const primaryOrange = '#e57717';
+export const primaryRed = '#de3535';
+export const primaryYellow = '#b68c07';