@zohoim/chat-components 0.0.10 → 0.0.13

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

@@ -1,41 +1,67 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from "./commonColorVariable.js";
-import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonDeskColorVariable';
 export default {
-  library: "chat_components",
+  library: 'chat_components',
   variables: {
     messageBubble: {
       active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: "#5a616f"
+      messageBox_footer_text_color: '#5a616f'
     },
     messageBox: {
       incoming_bg_color: incomingBubbleBgColor,
-      outgoing_bg_color: "#26373b",
-      bg_color: "#f1f7fe",
-      failed_bg_color: "#fcebeb",
+      outgoing_bg_color: '#26373b',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#362734',
       text_color: messagetextColor
     },
     actionIcon: {
       color: actionIconColor,
-      bg_color: "#26373b",
-      border_color: "#2d4e42"
+      bg_color: '#26373b',
+      border_color: '#2d4e42'
     },
     imIntegrationIcon,
     messageStatus: {
       send_color: messageStatusSendColor,
-      read_color: "#45a159",
+      read_color: '#45a159',
       failed_color: messageStatusFailedColor
     },
     attachmentBubbleInfo: {
-      fileName_color: "#e2e4e6",
-      fileSize_color: "#788190"
+      fileName_color: '#e2e4e6',
+      fileSize_color: '#788190'
     },
     attachmentBubble: {
-      bg_color: "#232b38",
-      border_color: "#2d3748"
+      bg_color: '#232b38',
+      border_color: '#2d3748'
     },
     imTicketLink: {
-      color: "#45a159"
+      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'
+    },
+    iMDateTime: {
+      color: '#a8b0bd'
+    },
+    textBubble: {
+      see_more_color: primaryGreen,
+      url_color: primaryGreen
     }
   }
 };

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

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
-import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonDeskColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -12,7 +12,7 @@ export default {
       incoming_bg_color: incomingBubbleBgColor,
       outgoing_bg_color: '#323136',
       bg_color: '#f1f7fe',
-      failed_bg_color: '#fcebeb',
+      failed_bg_color: '#362734',
       text_color: messagetextColor
     },
     actionIcon: {
@@ -27,15 +27,41 @@ export default {
       failed_color: messageStatusFailedColor
     },
     attachmentBubbleInfo: {
-      fileName_color: "#e2e4e6",
-      fileSize_color: "#788190"
+      fileName_color: '#e2e4e6',
+      fileSize_color: '#788190'
     },
     attachmentBubble: {
-      bg_color: "#232b38",
-      border_color: "#2d3748"
+      bg_color: '#232b38',
+      border_color: '#2d3748'
     },
     imTicketLink: {
-      color: "#ff801f"
+      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'
+    },
+    iMDateTime: {
+      color: '#a8b0bd'
+    },
+    textBubble: {
+      see_more_color: primaryOrange,
+      url_color: primaryOrange
     }
   }
 };

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

@@ -1,41 +1,76 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from "./commonColorVariable.js";
-import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, primaryRed } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonDeskColorVariable';
 export default {
-  library: "chat_components",
+  library: 'chat_components',
   variables: {
     messageBubble: {
       active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: "#5a616f"
+      messageBox_footer_text_color: '#5a616f'
     },
     messageBox: {
       incoming_bg_color: incomingBubbleBgColor,
-      outgoing_bg_color: "#312d3a",
-      bg_color: "#f1f7fe",
-      failed_bg_color: "#fcebeb",
+      outgoing_bg_color: '#312d3a',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#362734',
       text_color: messagetextColor
     },
     actionIcon: {
       color: actionIconColor,
-      bg_color: "#312d3a",
-      border_color: "#4b323d"
+      bg_color: '#312d3a',
+      border_color: '#4b323d'
     },
     imIntegrationIcon,
     messageStatus: {
       send_color: messageStatusSendColor,
-      read_color: "#e94f4f",
+      read_color: '#e94f4f',
       failed_color: messageStatusFailedColor
     },
     attachmentBubbleInfo: {
-      fileName_color: "#e2e4e6",
-      fileSize_color: "#788190"
+      fileName_color: '#e2e4e6',
+      fileSize_color: '#788190'
     },
     attachmentBubble: {
-      bg_color: "#232b38",
-      border_color: "#2d3748"
+      // 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"
+      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%)'
+    },
+    iMDateTime: {
+      color: '#a8b0bd'
+    },
+    textBubble: {
+      see_more_color: primaryRed,
+      url_color: primaryRed
     }
   }
 };

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

@@ -1,41 +1,67 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from "./commonColorVariable.js";
-import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, primaryYellow } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonDeskColorVariable';
 export default {
-  library: "chat_components",
+  library: 'chat_components',
   variables: {
     messageBubble: {
       active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: "#5a616f"
+      messageBox_footer_text_color: '#5a616f'
     },
     messageBox: {
       incoming_bg_color: incomingBubbleBgColor,
-      outgoing_bg_color: "#303338",
-      bg_color: "#f1f7fe",
-      failed_bg_color: "#fcebeb",
+      outgoing_bg_color: '#303338',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#362734',
       text_color: messagetextColor
     },
     actionIcon: {
       color: actionIconColor,
-      bg_color: "#303338",
-      border_color: "#474137"
+      bg_color: '#303338',
+      border_color: '#474137'
     },
     imIntegrationIcon,
     messageStatus: {
       send_color: messageStatusSendColor,
-      read_color: "#d79835",
+      read_color: '#d79835',
       failed_color: messageStatusFailedColor
     },
     attachmentBubbleInfo: {
-      fileName_color: "#e2e4e6",
-      fileSize_color: "#788190"
+      fileName_color: '#e2e4e6',
+      fileSize_color: '#788190'
     },
     attachmentBubble: {
-      bg_color: "#232b38",
-      border_color: "#2d3748"
+      bg_color: '#232b38',
+      border_color: '#2d3748'
     },
     imTicketLink: {
-      color: "#d79835"
+      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'
+    },
+    iMDateTime: {
+      color: '#a8b0bd'
+    },
+    textBubble: {
+      see_more_color: primaryYellow,
+      url_color: primaryYellow
     }
   }
 };

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

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

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

@@ -3,4 +3,10 @@ export const bubbleActiveBgColor = '#fdffe3';
 export const actionIconColor = '#000';
 export const messageStatusSendColor = '#61667a';
 export const messageStatusFailedColor = '#de3535';
-export const messagetextColor = "#000";
+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';

package/es/Theme/desk/light/greenTheme.js

@@ -1,37 +1,63 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor } from "./commonColorVariable.js";
-import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryGreen, white } from './commonColorVariable';
+import { imIntegrationIcon } from '../commonDeskColorVariable';
 export default {
-  library: "chat_components",
+  library: 'chat_components',
   variables: {
     messageBubble: {
       active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: "#5a616f"
+      messageBox_footer_text_color: '#5a616f'
     },
     messageBox: {
       incoming_bg_color: incomingBubbleBgColor,
-      outgoing_bg_color: "#f2faf5",
-      bg_color: "#f1f7fe",
-      failed_bg_color: "#fcebeb",
+      outgoing_bg_color: '#f2faf5',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
       text_color: messagetextColor
     },
     actionIcon: {
       color: actionIconColor,
-      bg_color: "#f2faf5",
-      border_color: "#bee5c6"
+      bg_color: '#f2faf5',
+      border_color: '#bee5c6'
     },
     imIntegrationIcon,
     messageStatus: {
       send_color: messageStatusSendColor,
-      read_color: "#26a942",
+      read_color: '#26a942',
       failed_color: messageStatusFailedColor
     },
     attachmentBubble: {
-      bg_color: "#fff",
-      border_color: "#ebf0f5"
+      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: primaryGreen,
+      border_color: '#ebf0f5'
+    },
+    articleBubble: {
+      bg_color: white,
+      color: '#000',
+      border_color: '#ebf0f5'
     },
     imTicketLink: {
-      color: "#26a942"
+      color: primaryGreen
+    },
+    textBubble: {
+      see_more_color: primaryGreen,
+      url_color: primaryGreen
+    },
+    iMDateTime: {
+      color: '#5a616f'
     }
   }
 };

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

@@ -1,36 +1,61 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor } from "./commonColorVariable.js";
-import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryOrange, white } from './commonColorVariable';
 export default {
-  library: "chat_components",
+  library: 'chat_components',
   variables: {
     messageBubble: {
       active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: "#5a616f"
+      messageBox_footer_text_color: '#5a616f'
     },
     messageBox: {
       incoming_bg_color: incomingBubbleBgColor,
-      outgoing_bg_color: "#fdf5ef",
-      bg_color: "#f1f7fe",
-      failed_bg_color: "#fcebeb",
+      outgoing_bg_color: '#fdf5ef',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
       text_color: messagetextColor
     },
     actionIcon: {
       color: actionIconColor,
-      bg_color: "#fdf5ef",
-      border_color: "#f7d6b9"
+      bg_color: '#fdf5ef',
+      border_color: '#f7d6b9'
     },
     messageStatus: {
       send_color: messageStatusSendColor,
-      read_color: "#e57717",
+      read_color: '#e57717',
       failed_color: messageStatusFailedColor
     },
     attachmentBubble: {
-      bg_color: "#fff",
-      border_color: "#ebf0f5"
+      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: primaryOrange,
+      border_color: '#ebf0f5'
+    },
+    articleBubble: {
+      bg_color: white,
+      color: '#000',
+      border_color: '#ebf0f5'
     },
     imTicketLink: {
-      color: "#e57717"
+      color: primaryOrange
+    },
+    textBubble: {
+      see_more_color: primaryOrange,
+      url_color: primaryOrange
+    },
+    iMDateTime: {
+      color: '#5a616f'
     }
   }
 };

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

@@ -1,36 +1,61 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor } from "./commonColorVariable.js";
-import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryRed, white } from './commonColorVariable';
 export default {
-  library: "chat_components",
+  library: 'chat_components',
   variables: {
     messageBubble: {
       active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: "#5a616f"
+      messageBox_footer_text_color: '#5a616f'
     },
     messageBox: {
       incoming_bg_color: incomingBubbleBgColor,
-      outgoing_bg_color: "#fdf3f3",
-      bg_color: "#f1f7fe",
-      failed_bg_color: "#fcebeb",
+      outgoing_bg_color: '#fdf3f3',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
       text_color: messagetextColor
     },
     actionIcon: {
       color: actionIconColor,
-      bg_color: "#fdf3f3",
-      border_color: "#f8d7d7"
+      bg_color: '#fdf3f3',
+      border_color: '#f8d7d7'
     },
     messageStatus: {
       send_color: messageStatusSendColor,
-      read_color: "#de3535",
+      read_color: '#de3535',
       failed_color: messageStatusFailedColor
     },
     attachmentBubble: {
-      bg_color: "#fff",
-      border_color: "#ebf0f5"
+      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: primaryRed,
+      border_color: '#ebf0f5'
+    },
+    articleBubble: {
+      bg_color: white,
+      color: '#000',
+      border_color: '#ebf0f5'
     },
     imTicketLink: {
-      color: "#de3535"
+      color: primaryRed
+    },
+    textBubble: {
+      see_more_color: primaryRed,
+      url_color: primaryRed
+    },
+    iMDateTime: {
+      color: '#5a616f'
     }
   }
 };