@zohoim/chat-components 0.0.15 → 0.0.16

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

@@ -1,68 +1,125 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue } from './commonColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } 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'
-    },
+    // ActionIcon: {},
     actionIconWrapper: {
       color: actionIconWrapperColor,
       bg_color: '#2c3b4d',
       border_color: '#3f536b'
     },
-    imIntegrationIcon,
-    messageStatus: {
-      send_color: messageStatusSendColor,
-      read_color: '#479dff',
-      failed_color: messageStatusFailedColor
+    attachmentBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
     },
     attachmentBubbleInfo: {
       fileName_color: '#e2e4e6',
-      fileSize_color: '#788190'
-    },
-    attachmentBubble: {
-      bg_color: '#232b38',
-      border_color: '#2d3748'
+      fileName_color_failed: failedColor,
+      fileSize_color: '#788190',
+      fileSize_color_failed: failedColor
     },
-    replyBubbleContent: {
+    // AttachmentIcon: {},
+    // Audio: {},
+    // AudioBubble: {},
+    articleBubble: {
       bg_color: '#232b38',
-      color: '#e2e4e6',
+      bg_color_failed: failedBg,
       border_color: '#2d3748',
-      line_color: '#cddbf2'
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#828994'
+    },
+    // IMInfoBubble: {},
+    imIntegrationIcon,
+    // IMMessage: {},
+    // IMMessageContent: {},
+    imMessageMeta: {
+      time_color: '#a8b0bd'
     },
+    imPermaLink: {
+      url_color: '#479dff'
+    },
+    // IMReplyBubble: {},
+    // IMTextBubble: {},
     imageBubble: {
-      bg_color: '#232b38'
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor
     },
+    // IMReplyBubble: {},
+    // InfoBubble: {},
+    // LazyLoadImage: {},
     locationBubble: {
       bg_color: '#232b38',
-      color: primaryBlue,
-      border_color: '#2d3748'
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      url_color: primaryBlue,
+      url_color_failed: failedUrlColor
     },
-    articleBubble: {
+    // MediaBubbleWrapper: {},
+    // Message: {},
+    // MessageAction: {},
+    // MessageActions: {},
+    // MessageActionsMore: {},
+    // MessageActionsWrapper: {},
+    // MessageAvatar: {},
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#2c3b4d',
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor,
+      failed_text_color: '#000'
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#479dff',
+      failed_color: messageStatusFailedColor
+    },
+    // MoreActionItem: {},
+    // ReplyBubble: {},
+    replyBubbleContent: {
       bg_color: '#232b38',
-      color: '#e2e4e6',
-      border_color: '#2d3748'
+      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: primaryBlue,
-      url_color: primaryBlue
-    },
-    imPermaLink: {
-      color: '#479dff'
-    },
-    imMessageMeta: {
-      timeColor: '#a8b0bd'
-    }
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryBlue,
+      url_color_failed: failedUrlColor
+    } // Video: {},
+    // VideoBubble: {}
+
   }
 };

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

@@ -7,4 +7,10 @@ export const primaryBlue = '#479dff';
 export const primaryGreen = '#45a159';
 export const primaryOrange = '#ff801f';
 export const primaryRed = '#e94f4f';
-export const primaryYellow = '#d79835';
+export const primaryYellow = '#d79835';
+export const failedBgWrapper = '#f4b5bc';
+export const failedBg = '#f6dcdf';
+export const failedBdr = '#eb9ea7';
+export const failedLine = '#eb9ea7';
+export const failedColor = '#000';
+export const failedUrlColor = '#0a73eb';

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

@@ -1,67 +1,124 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen } from './commonColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } 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
-    },
+    // ActionIcon: {},
     actionIconWrapper: {
       color: actionIconWrapperColor,
       bg_color: '#26373b',
       border_color: '#2d4e42'
     },
-    imIntegrationIcon,
-    messageStatus: {
-      send_color: messageStatusSendColor,
-      read_color: '#45a159',
-      failed_color: messageStatusFailedColor
+    attachmentBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
     },
     attachmentBubbleInfo: {
       fileName_color: '#e2e4e6',
-      fileSize_color: '#788190'
+      fileName_color_failed: failedColor,
+      fileSize_color: '#788190',
+      fileSize_color_failed: failedColor
     },
-    attachmentBubble: {
+    // AttachmentIcon: {},
+    // Audio: {},
+    // AudioBubble: {},
+    articleBubble: {
       bg_color: '#232b38',
-      border_color: '#2d3748'
+      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
     },
-    imPermaLink: {
-      color: '#45a159'
+    imAutoMessageInfo: {
+      text_color: '#828994'
     },
-    replyBubbleContent: {
-      bg_color: 'hsl(191.43deg 21.65% 13.02%)',
-      color: '#e2e4e6',
-      border_color: '#2d3748',
-      line_color: '#cddbf2'
+    // IMInfoBubble: {},
+    imIntegrationIcon,
+    // IMMessage: {},
+    // IMMessageContent: {},
+    imMessageMeta: {
+      time_color: '#a8b0bd'
+    },
+    imPermaLink: {
+      url_color: '#45a159'
     },
+    // IMReplyBubble: {},
+    // IMTextBubble: {},
     imageBubble: {
-      bg_color: '#232b38'
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor
     },
+    // IMReplyBubble: {},
+    // InfoBubble: {},
+    // LazyLoadImage: {},
     locationBubble: {
       bg_color: '#232b38',
-      color: primaryGreen,
-      border_color: '#2d3748'
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      url_color: primaryGreen,
+      url_color_failed: failedUrlColor
     },
-    articleBubble: {
-      bg_color: '#232b38',
-      color: '#e2e4e6',
-      border_color: '#2d3748'
+    // MediaBubbleWrapper: {},
+    // Message: {},
+    // MessageAction: {},
+    // MessageActions: {},
+    // MessageActionsMore: {},
+    // MessageActionsWrapper: {},
+    // MessageAvatar: {},
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#26373b',
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor
     },
-    imMessageMeta: {
-      timeColor: '#a8b0bd'
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#45a159',
+      failed_color: messageStatusFailedColor
+    },
+    // MoreActionItem: {},
+    // ReplyBubble: {},
+    replyBubbleContent: {
+      bg_color: 'hsl(191.43deg 21.65% 13.02%)',
+      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: primaryGreen,
-      url_color: primaryGreen
-    }
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryGreen,
+      url_color_failed: failedUrlColor
+    } // Video: {},
+    // VideoBubble: {}
+
   }
 };

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

@@ -1,67 +1,124 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange } from './commonColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } 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
-    },
+    // ActionIcon: {},
     actionIconWrapper: {
       color: actionIconWrapperColor,
       bg_color: '#323136',
       border_color: '#4f3c33'
     },
-    imIntegrationIcon,
-    messageStatus: {
-      send_color: messageStatusSendColor,
-      read_color: '#ff801f',
-      failed_color: messageStatusFailedColor
+    attachmentBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
     },
     attachmentBubbleInfo: {
       fileName_color: '#e2e4e6',
-      fileSize_color: '#788190'
+      fileName_color_failed: failedColor,
+      fileSize_color: '#788190',
+      fileSize_color_failed: failedColor
     },
-    attachmentBubble: {
+    // AttachmentIcon: {},
+    // Audio: {},
+    // AudioBubble: {},
+    articleBubble: {
       bg_color: '#232b38',
-      border_color: '#2d3748'
+      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
     },
-    imPermaLink: {
-      color: '#ff801f'
+    imAutoMessageInfo: {
+      text_color: '#828994'
     },
-    replyBubbleContent: {
-      bg_color: '#232b38',
-      color: '#e2e4e6',
-      border_color: '#2d3748',
-      line_color: '#cddbf2'
+    // IMInfoBubble: {},
+    imIntegrationIcon,
+    // IMMessage: {},
+    // IMMessageContent: {},
+    imMessageMeta: {
+      time_color: '#a8b0bd'
+    },
+    imPermaLink: {
+      url_color: '#ff801f'
     },
+    // IMReplyBubble: {},
+    // IMTextBubble: {},
     imageBubble: {
-      bg_color: '#232b38'
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor
     },
+    // IMReplyBubble: {},
+    // InfoBubble: {},
+    // LazyLoadImage: {},
     locationBubble: {
       bg_color: '#232b38',
-      color: primaryOrange,
-      border_color: '#2d3748'
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      url_color: primaryOrange,
+      url_color_failed: failedUrlColor
     },
-    articleBubble: {
+    // MediaBubbleWrapper: {},
+    // Message: {},
+    // MessageAction: {},
+    // MessageActions: {},
+    // MessageActionsMore: {},
+    // MessageActionsWrapper: {},
+    // MessageAvatar: {},
+    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
+    },
+    // MoreActionItem: {},
+    // ReplyBubble: {},
+    replyBubbleContent: {
       bg_color: '#232b38',
-      color: '#e2e4e6',
-      border_color: '#2d3748'
+      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
     },
-    imMessageMeta: {
-      timeColor: '#a8b0bd'
+    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,
-      url_color: primaryOrange
-    }
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryOrange,
+      url_color_failed: failedUrlColor
+    } // Video: {},
+    // VideoBubble: {}
+
   }
 };

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

@@ -1,76 +1,124 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed } from './commonColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } 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
-    },
+    // ActionIcon: {},
     actionIconWrapper: {
       color: actionIconWrapperColor,
       bg_color: '#312d3a',
       border_color: '#4b323d'
     },
-    imIntegrationIcon,
-    messageStatus: {
-      send_color: messageStatusSendColor,
-      read_color: '#e94f4f',
-      failed_color: messageStatusFailedColor
+    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',
-      fileSize_color: '#788190'
+      fileName_color_failed: failedColor,
+      fileSize_color: '#788190',
+      fileSize_color_failed: failedColor
     },
-    attachmentBubble: {
-      // bg_color: "#232b38",
+    // AttachmentIcon: {},
+    // Audio: {},
+    // AudioBubble: {},
+    articleBubble: {
       bg_color: 'hsl(258.46deg 12.62% 16.2%)',
-      // border_color: "#2d3748",
-      border_color: 'hsl(258.46deg 12.62% 23.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
     },
-    imPermaLink: {
-      color: '#e94f4f'
+    imAutoMessageInfo: {
+      text_color: '#828994'
     },
-    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'
+    // IMInfoBubble: {},
+    imIntegrationIcon,
+    // IMMessage: {},
+    // IMMessageContent: {},
+    imMessageMeta: {
+      time_color: '#a8b0bd'
+    },
+    imPermaLink: {
+      url_color: '#e94f4f'
     },
+    // IMReplyBubble: {},
+    // IMTextBubble: {},
     imageBubble: {
-      // bg_color: "#232b38",
-      bg_color: 'hsl(258.46deg 12.62% 16.2%)'
+      bg_color: 'hsl(258.46deg 12.62% 16.2%)',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor
     },
+    // IMReplyBubble: {},
+    // InfoBubble: {},
+    // LazyLoadImage: {},
     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%)'
+      bg_color_failed: failedBg,
+      border_color: 'hsl(258.46deg 12.62% 23.2%)',
+      border_color_failed: failedBdr,
+      url_color: primaryRed,
+      url_color_failed: failedUrlColor
     },
-    articleBubble: {
-      // bg_color: "#232b38",
+    // MediaBubbleWrapper: {},
+    // Message: {},
+    // MessageAction: {},
+    // MessageActions: {},
+    // MessageActionsMore: {},
+    // MessageActionsWrapper: {},
+    // MessageAvatar: {},
+    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
+    },
+    // MoreActionItem: {},
+    // ReplyBubble: {},
+    replyBubbleContent: {
       bg_color: 'hsl(258.46deg 12.62% 16.2%)',
-      color: '#e2e4e6',
-      // border_color: "#2d3748",
-      border_color: 'hsl(258.46deg 12.62% 23.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
     },
-    imMessageMeta: {
-      timeColor: '#a8b0bd'
+    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,
-      url_color: primaryRed
-    }
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryRed,
+      url_color_failed: failedUrlColor
+    } // Video: {},
+    // VideoBubble: {}
+
   }
 };