@zohoim/chat-components 1.1.0-beta.3 → 1.1.1

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

@@ -0,0 +1,132 @@
+/* eslint-disable camelcase */
+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',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#323136',
+      border_color: '#4f3c33'
+    },
+    attachmentBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#788190',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#828994'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#a8b0bd'
+    },
+    imPermaLink: {
+      url_color: '#ff801f'
+    },
+    imageBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      url_color: primaryOrange,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#323136',
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#ff801f',
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      line_color: '#cddbf2',
+      line_color_failed: failedLine,
+      sender_color: '#e2e4e6',
+      sender_color_failed: failedColor,
+      content_color: '#e2e4e6',
+      content_color_failed: failedColor
+    },
+    replyBubbleHeader: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      time_color: '#828994',
+      time_color_failed: failedColor
+    },
+    textBubble: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      see_more_color: primaryOrange,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryOrange,
+      url_color_failed: failedUrlColor
+    },
+    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

@@ -0,0 +1,132 @@
+/* eslint-disable camelcase */
+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',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#312d3a',
+      border_color: '#4b323d'
+    },
+    attachmentBubble: {
+      bg_color: 'hsl(258.46deg 12.62% 16.2%)',
+      bg_color_failed: failedBg,
+      border_color: 'hsl(258.46deg 12.62% 23.2%)',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#788190',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: 'hsl(258.46deg 12.62% 16.2%)',
+      bg_color_failed: failedBg,
+      border_color: 'hsl(258.46deg 12.62% 23.2%)',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#828994'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#a8b0bd'
+    },
+    imPermaLink: {
+      url_color: '#e94f4f'
+    },
+    imageBubble: {
+      bg_color: 'hsl(258.46deg 12.62% 16.2%)',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: 'hsl(258.46deg 12.62% 23.2%)',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: 'hsl(258.46deg 12.62% 16.2%)',
+      bg_color_failed: failedBg,
+      border_color: 'hsl(258.46deg 12.62% 23.2%)',
+      border_color_failed: failedBdr,
+      url_color: primaryRed,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#312d3a',
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#e94f4f',
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: 'hsl(258.46deg 12.62% 23.2%)',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: 'hsl(258.46deg 12.62% 16.2%)',
+      bg_color_failed: failedBg,
+      border_color: 'hsl(258.46deg 12.62% 23.2%)',
+      border_color_failed: failedBdr,
+      line_color: '#cddbf2',
+      line_color_failed: failedLine,
+      sender_color: '#e2e4e6',
+      sender_color_failed: failedColor,
+      content_color: '#e2e4e6',
+      content_color_failed: failedColor
+    },
+    replyBubbleHeader: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      time_color: '#828994',
+      time_color_failed: failedColor
+    },
+    textBubble: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      see_more_color: primaryRed,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryRed,
+      url_color_failed: failedUrlColor
+    },
+    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

@@ -0,0 +1,132 @@
+/* eslint-disable camelcase */
+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',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#303338',
+      border_color: '#474137'
+    },
+    attachmentBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#788190',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#828994'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#a8b0bd'
+    },
+    imPermaLink: {
+      url_color: '#d79835'
+    },
+    imageBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      url_color: primaryYellow,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#303338',
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#d79835',
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      line_color: '#cddbf2',
+      line_color_failed: failedLine,
+      sender_color: '#e2e4e6',
+      sender_color_failed: failedColor,
+      content_color: '#e2e4e6',
+      content_color_failed: failedColor
+    },
+    replyBubbleHeader: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      time_color: '#828994',
+      time_color_failed: failedColor
+    },
+    textBubble: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      see_more_color: primaryYellow,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryYellow,
+      url_color_failed: failedUrlColor
+    },
+    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

@@ -0,0 +1,135 @@
+/* eslint-disable camelcase */
+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: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#f1f7fe',
+      border_color: '#b7d1f0'
+    },
+    attachmentBubble: {
+      bg_color: white,
+      bg_color_failed: failedBg,
+      border_color: '#ebf0f5',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: black,
+      fileName_color_failed: failedColor,
+      fileSize_color: '#5a616f',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: white,
+      bg_color_failed: failedBg,
+      border_color: '#ebf0f5',
+      border_color_failed: failedBdr,
+      title_color: black,
+      title_color_failed: failedColor,
+      summary_color: black,
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#737376'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#5a616f'
+    },
+    imMessageMeta: {
+      time_color: '#5a616f'
+    },
+    imPermaLink: {
+      url_color: primaryBlue
+    },
+    imageBubble: {
+      bg_color: white,
+      bg_color_failed: failedBg,
+      alt_text_color: black,
+      alt_text_color_failed: failedColor,
+      border_color: '#ebf0f5',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: white,
+      bg_color_failed: failedBg,
+      border_color: '#ebf0f5',
+      border_color_failed: failedBdr,
+      url_color: primaryBlue,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#f1f7fe',
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: primaryBlue,
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: '#ebf0f5',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: white,
+      bg_color_failed: failedBg,
+      border_color: '#ebf0f5',
+      border_color_failed: failedBdr,
+      line_color: '#cddbf2',
+      line_color_failed: failedLine,
+      sender_color: black,
+      sender_color_failed: failedColor,
+      content_color: '#5a616f',
+      content_color_failed: failedColor
+    },
+    replyBubbleHeader: {
+      text_color: black,
+      text_color_failed: failedColor,
+      time_color: '#61667a',
+      time_color_failed: failedColor
+    },
+    textBubble: {
+      text_color: black,
+      text_color_failed: failedColor,
+      see_more_color: primaryBlue,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryBlue,
+      url_color_failed: failedUrlColor
+    },
+    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

@@ -0,0 +1,54 @@
+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 black = '#000';
+export const primaryBlue = '#0a73eb';
+export const primaryGreen = '#26a942';
+export const primaryOrange = '#e57717';
+export const primaryRed = '#de3535';
+export const primaryYellow = '#b68c07';
+export const failedBgWrapper = '#fcebeb';
+export const failedBg = '#fff0f0';
+export const failedBdr = '#ffd6d6';
+export const failedLine = '#ffd6d6';
+export const failedColor = '#000';
+export const failedUrlColor = '#0a73eb';
+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: 'linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%)',
+  asap_color: 'linear-gradient(180deg, #A375FF 0%, #7732FF 100%)',
+  fb_color: '#006aff'
+};
+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'
+};