@zohoim/chat-components 0.0.13 → 0.0.14

package/es/Theme/{desk → themeVariables}/dark/blueTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonDeskColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -16,8 +16,8 @@ export default {
       text_color: messagetextColor,
       failed_text_color: '#000'
     },
-    actionIcon: {
-      color: actionIconColor,
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
       bg_color: '#2c3b4d',
       border_color: '#3f536b'
     },
@@ -35,10 +35,7 @@ export default {
       bg_color: '#232b38',
       border_color: '#2d3748'
     },
-    imTicketLink: {
-      color: '#479dff'
-    },
-    ReplyBubbleContent: {
+    replyBubbleContent: {
       bg_color: '#232b38',
       color: '#e2e4e6',
       border_color: '#2d3748',
@@ -57,12 +54,15 @@ export default {
       color: '#e2e4e6',
       border_color: '#2d3748'
     },
-    iMDateTime: {
-      color: '#a8b0bd'
-    },
     textBubble: {
       see_more_color: primaryBlue,
       url_color: primaryBlue
+    },
+    imTicketLink: {
+      color: '#479dff'
+    },
+    imMessageMeta: {
+      timeColor: '#a8b0bd'
     }
   }
 };

package/es/Theme/{desk → themeVariables}/dark/commonColorVariable.js

@@ -1,6 +1,6 @@
 export const incomingBubbleBgColor = '#232b38';
 export const bubbleActiveBgColor = '#1b2e33';
-export const actionIconColor = '#e2e4e6';
+export const actionIconWrapperColor = '#e2e4e6';
 export const messageStatusSendColor = '#61667a';
 export const messageStatusFailedColor = '#de3535';
 export const primaryBlue = '#479dff';

package/es/Theme/{desk → themeVariables}/dark/greenTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonDeskColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -15,8 +15,8 @@ export default {
       failed_bg_color: '#362734',
       text_color: messagetextColor
     },
-    actionIcon: {
-      color: actionIconColor,
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
       bg_color: '#26373b',
       border_color: '#2d4e42'
     },
@@ -37,7 +37,7 @@ export default {
     imTicketLink: {
       color: '#45a159'
     },
-    ReplyBubbleContent: {
+    replyBubbleContent: {
       bg_color: 'hsl(191.43deg 21.65% 13.02%)',
       color: '#e2e4e6',
       border_color: '#2d3748',
@@ -56,8 +56,8 @@ export default {
       color: '#e2e4e6',
       border_color: '#2d3748'
     },
-    iMDateTime: {
-      color: '#a8b0bd'
+    imMessageMeta: {
+      timeColor: '#a8b0bd'
     },
     textBubble: {
       see_more_color: primaryGreen,

package/es/Theme/{desk → themeVariables}/dark/orangeTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonDeskColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -15,8 +15,8 @@ export default {
       failed_bg_color: '#362734',
       text_color: messagetextColor
     },
-    actionIcon: {
-      color: actionIconColor,
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
       bg_color: '#323136',
       border_color: '#4f3c33'
     },
@@ -37,7 +37,7 @@ export default {
     imTicketLink: {
       color: '#ff801f'
     },
-    ReplyBubbleContent: {
+    replyBubbleContent: {
       bg_color: '#232b38',
       color: '#e2e4e6',
       border_color: '#2d3748',
@@ -56,8 +56,8 @@ export default {
       color: '#e2e4e6',
       border_color: '#2d3748'
     },
-    iMDateTime: {
-      color: '#a8b0bd'
+    imMessageMeta: {
+      timeColor: '#a8b0bd'
     },
     textBubble: {
       see_more_color: primaryOrange,

package/es/Theme/{desk → themeVariables}/dark/redTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, primaryRed } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonDeskColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -15,8 +15,8 @@ export default {
       failed_bg_color: '#362734',
       text_color: messagetextColor
     },
-    actionIcon: {
-      color: actionIconColor,
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
       bg_color: '#312d3a',
       border_color: '#4b323d'
     },
@@ -39,7 +39,7 @@ export default {
     imTicketLink: {
       color: '#e94f4f'
     },
-    ReplyBubbleContent: {
+    replyBubbleContent: {
       // bg_color: "#232b38",
       bg_color: 'hsl(258.46deg 12.62% 16.2%)',
       color: '#e2e4e6',
@@ -65,8 +65,8 @@ export default {
       // border_color: "#2d3748",
       border_color: 'hsl(258.46deg 12.62% 23.2%)'
     },
-    iMDateTime: {
-      color: '#a8b0bd'
+    imMessageMeta: {
+      timeColor: '#a8b0bd'
     },
     textBubble: {
       see_more_color: primaryRed,

package/es/Theme/{desk → themeVariables}/dark/yellowTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, primaryYellow } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonDeskColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryYellow } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -15,8 +15,8 @@ export default {
       failed_bg_color: '#362734',
       text_color: messagetextColor
     },
-    actionIcon: {
-      color: actionIconColor,
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
       bg_color: '#303338',
       border_color: '#474137'
     },
@@ -37,7 +37,7 @@ export default {
     imTicketLink: {
       color: '#d79835'
     },
-    ReplyBubbleContent: {
+    replyBubbleContent: {
       bg_color: '#232b38',
       color: '#e2e4e6',
       border_color: '#2d3748',
@@ -56,8 +56,8 @@ export default {
       color: '#e2e4e6',
       border_color: '#2d3748'
     },
-    iMDateTime: {
-      color: '#a8b0bd'
+    imMessageMeta: {
+      timeColor: '#a8b0bd'
     },
     textBubble: {
       see_more_color: primaryYellow,

package/es/Theme/{desk → themeVariables}/light/blueTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryBlue, white } from './commonColorVariable';
-import { imIntegrationIcon } from '../commonDeskColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryBlue, white } from './commonColorVariable';
+import { imIntegrationIcon } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -15,8 +15,8 @@ export default {
       failed_bg_color: '#fcebeb',
       text_color: messagetextColor
     },
-    actionIcon: {
-      color: actionIconColor,
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
       bg_color: '#f1f7fe',
       border_color: '#b7d1f0'
     },
@@ -30,7 +30,7 @@ export default {
       bg_color: white,
       border_color: '#ebf0f5'
     },
-    ReplyBubbleContent: {
+    replyBubbleContent: {
       bg_color: white,
       color: '#000',
       border_color: '#ebf0f5',
@@ -56,8 +56,8 @@ export default {
       see_more_color: primaryBlue,
       url_color: primaryBlue
     },
-    iMDateTime: {
-      color: '#5a616f'
+    imMessageMeta: {
+      timeColor: '#5a616f'
     }
   }
 };

package/es/Theme/{desk → themeVariables}/light/commonColorVariable.js

@@ -1,6 +1,6 @@
 export const incomingBubbleBgColor = '#f1f4f9';
 export const bubbleActiveBgColor = '#fdffe3';
-export const actionIconColor = '#000';
+export const actionIconWrapperColor = '#000';
 export const messageStatusSendColor = '#61667a';
 export const messageStatusFailedColor = '#de3535';
 export const messagetextColor = '#000';

package/es/Theme/{desk → themeVariables}/light/greenTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryGreen, white } from './commonColorVariable';
-import { imIntegrationIcon } from '../commonDeskColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryGreen, white } from './commonColorVariable';
+import { imIntegrationIcon } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -15,8 +15,8 @@ export default {
       failed_bg_color: '#fcebeb',
       text_color: messagetextColor
     },
-    actionIcon: {
-      color: actionIconColor,
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
       bg_color: '#f2faf5',
       border_color: '#bee5c6'
     },
@@ -30,7 +30,7 @@ export default {
       bg_color: white,
       border_color: '#ebf0f5'
     },
-    ReplyBubbleContent: {
+    replyBubbleContent: {
       bg_color: white,
       color: '#000',
       border_color: '#ebf0f5',
@@ -56,8 +56,8 @@ export default {
       see_more_color: primaryGreen,
       url_color: primaryGreen
     },
-    iMDateTime: {
-      color: '#5a616f'
+    imMessageMeta: {
+      timeColor: '#5a616f'
     }
   }
 };

package/es/Theme/{desk → themeVariables}/light/orangeTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryOrange, white } from './commonColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryOrange, white } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -14,8 +14,8 @@ export default {
       failed_bg_color: '#fcebeb',
       text_color: messagetextColor
     },
-    actionIcon: {
-      color: actionIconColor,
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
       bg_color: '#fdf5ef',
       border_color: '#f7d6b9'
     },
@@ -28,7 +28,7 @@ export default {
       bg_color: white,
       border_color: '#ebf0f5'
     },
-    ReplyBubbleContent: {
+    replyBubbleContent: {
       bg_color: white,
       color: '#000',
       border_color: '#ebf0f5',
@@ -54,8 +54,8 @@ export default {
       see_more_color: primaryOrange,
       url_color: primaryOrange
     },
-    iMDateTime: {
-      color: '#5a616f'
+    imMessageMeta: {
+      timeColor: '#5a616f'
     }
   }
 };

package/es/Theme/{desk → themeVariables}/light/redTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryRed, white } from './commonColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryRed, white } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -14,8 +14,8 @@ export default {
       failed_bg_color: '#fcebeb',
       text_color: messagetextColor
     },
-    actionIcon: {
-      color: actionIconColor,
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
       bg_color: '#fdf3f3',
       border_color: '#f8d7d7'
     },
@@ -28,7 +28,7 @@ export default {
       bg_color: white,
       border_color: '#ebf0f5'
     },
-    ReplyBubbleContent: {
+    replyBubbleContent: {
       bg_color: white,
       color: '#000',
       border_color: '#ebf0f5',
@@ -54,8 +54,8 @@ export default {
       see_more_color: primaryRed,
       url_color: primaryRed
     },
-    iMDateTime: {
-      color: '#5a616f'
+    imMessageMeta: {
+      timeColor: '#5a616f'
     }
   }
 };

package/es/Theme/{desk → themeVariables}/light/yellowTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryYellow, white } from './commonColorVariable';
-import { imIntegrationIcon } from '../commonDeskColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryYellow, white } from './commonColorVariable';
+import { imIntegrationIcon } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -15,8 +15,8 @@ export default {
       failed_bg_color: '#fcebeb',
       text_color: messagetextColor
     },
-    actionIcon: {
-      color: actionIconColor,
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
       bg_color: '#fdf8e9',
       border_color: '#f6e3a7'
     },
@@ -30,7 +30,7 @@ export default {
       bg_color: white,
       border_color: '#ebf0f5'
     },
-    ReplyBubbleContent: {
+    replyBubbleContent: {
       bg_color: white,
       color: '#000',
       border_color: '#ebf0f5',
@@ -56,8 +56,8 @@ export default {
       see_more_color: primaryYellow,
       url_color: primaryYellow
     },
-    iMDateTime: {
-      color: '#5a616f'
+    imMessageMeta: {
+      timeColor: '#5a616f'
     }
   }
 };

package/es/Theme/{desk → themeVariables}/pureDark/blueTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonDeskColorVariable';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -15,8 +15,8 @@ export default {
       failed_bg_color: '#fcebeb',
       text_color: messagetextColor
     },
-    actionIcon: {
-      color: actionIconColor,
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
       bg_color: '#252d37',
       border_color: '#2c4664'
     },
@@ -37,7 +37,7 @@ export default {
     imTicketLink: {
       color: '#479dff'
     },
-    ReplyBubbleContent: {
+    replyBubbleContent: {
       bg_color: '#212121',
       color: '#e2e4e6',
       border_color: '#161515',
@@ -57,8 +57,8 @@ export default {
       color: '#e2e4e6',
       border_color: '#161515'
     },
-    iMDateTime: {
-      color: '#999'
+    imMessageMeta: {
+      timeColor: '#999'
     },
     textBubble: {
       see_more_color: primaryBlue,

package/es/Theme/{desk → themeVariables}/pureDark/commonColorVariable.js

@@ -1,7 +1,7 @@
 export const incomingBubbleBgColor = '#2e2e2e';
 export const outgoingBubbleBgColor = '#2e2e2e';
 export const bubbleActiveBgColor = '#202821';
-export const actionIconColor = '#e2e4e6';
+export const actionIconWrapperColor = '#e2e4e6';
 export const messageStatusSendColor = '#61667a';
 export const messageStatusFailedColor = '#de3535';
 export const messagetextColor = '#e2e4e6';

package/es/Theme/{desk → themeVariables}/pureDark/greenTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonDeskColorVariable';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -15,8 +15,8 @@ export default {
       failed_bg_color: '#fcebeb',
       text_color: messagetextColor
     },
-    actionIcon: {
-      color: actionIconColor,
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
       bg_color: '#252e27',
       border_color: '#2c4732'
     },
@@ -37,7 +37,7 @@ export default {
     imTicketLink: {
       color: '#45a159'
     },
-    ReplyBubbleContent: {
+    replyBubbleContent: {
       bg_color: '#212121',
       color: '#e2e4e6',
       border_color: '#161515',
@@ -56,8 +56,8 @@ export default {
       color: '#e2e4e6',
       border_color: '#161515'
     },
-    iMDateTime: {
-      color: '#999'
+    imMessageMeta: {
+      timeColor: '#999'
     },
     textBubble: {
       see_more_color: primaryGreen,

package/es/Theme/{desk → themeVariables}/pureDark/orangeTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonDeskColorVariable';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -15,8 +15,8 @@ export default {
       failed_bg_color: '#fcebeb',
       text_color: messagetextColor
     },
-    actionIcon: {
-      color: actionIconColor,
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
       bg_color: '#312821',
       border_color: '#4d3421'
     },
@@ -37,7 +37,7 @@ export default {
     imTicketLink: {
       color: '#ff801f'
     },
-    ReplyBubbleContent: {
+    replyBubbleContent: {
       bg_color: '#212121',
       color: '#e2e4e6',
       border_color: '#161515',
@@ -56,8 +56,8 @@ export default {
       color: '#e2e4e6',
       border_color: '#161515'
     },
-    iMDateTime: {
-      color: '#999'
+    imMessageMeta: {
+      timeColor: '#999'
     },
     textBubble: {
       see_more_color: primaryOrange,

package/es/Theme/{desk → themeVariables}/pureDark/redTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, primaryRed } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonDeskColorVariable';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -15,8 +15,8 @@ export default {
       failed_bg_color: '#fcebeb',
       text_color: messagetextColor
     },
-    actionIcon: {
-      color: actionIconColor,
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
       bg_color: '#2f2424',
       border_color: '#492A29'
     },
@@ -37,7 +37,7 @@ export default {
     imTicketLink: {
       color: '#e94f4f'
     },
-    ReplyBubbleContent: {
+    replyBubbleContent: {
       bg_color: '#212121',
       color: '#e2e4e6',
       border_color: '#161515',
@@ -56,8 +56,8 @@ export default {
       color: '#e2e4e6',
       border_color: '#161515'
     },
-    iMDateTime: {
-      color: '#999'
+    imMessageMeta: {
+      timeColor: '#999'
     },
     textBubble: {
       see_more_color: primaryRed,

package/es/Theme/{desk → themeVariables}/pureDark/yellowTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconColor, primaryYellow } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonDeskColorVariable';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconWrapperColor, primaryYellow } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -15,8 +15,8 @@ export default {
       failed_bg_color: '#362734',
       text_color: messagetextColor
     },
-    actionIcon: {
-      color: actionIconColor,
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
       bg_color: '#2e2922',
       border_color: '#453925'
     },
@@ -37,7 +37,7 @@ export default {
     imTicketLink: {
       color: '#d79835'
     },
-    ReplyBubbleContent: {
+    replyBubbleContent: {
       bg_color: '#212121',
       color: '#e2e4e6',
       border_color: '#161515',
@@ -56,8 +56,8 @@ export default {
       color: '#e2e4e6',
       border_color: '#161515'
     },
-    iMDateTime: {
-      color: '#999'
+    imMessageMeta: {
+      timeColor: '#999'
     },
     textBubble: {
       see_more_color: primaryYellow,

package/es/Theme/utils/combineConfigurations.js

@@ -0,0 +1,17 @@
+import flatVariables from './flatVariables';
+export default function combineConfigurations(configurations) {
+  const configs = configurations.map(configuration => ({
+    library: configuration.library,
+    variables: flatVariables(configuration.variables)
+  }));
+  const mergeObject = configs.reduce((res, next) => {
+    if (!res[next.library]) {
+      res[next.library] = next;
+      return res;
+    }
+
+    Object.assign(res[next.library].variables, next.variables);
+    return res;
+  }, {});
+  return Object.keys(mergeObject).map(key => mergeObject[key]);
+}

package/es/Theme/utils/flatVariables.js

@@ -0,0 +1,12 @@
+export default function flatVariables(obj) {
+  let jointStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '_';
+  return Object.keys(obj).reduce((res, component) => Object.assign(res, Object.keys(obj[component]).reduce((res, variable) => {
+    if (component === '') {
+      res[`${variable}`] = obj[component][variable];
+    } else {
+      res[`${component}${jointStr}${variable}`] = obj[component][variable];
+    }
+
+    return res;
+  }, {})), {});
+}