@zohoim/chat-components 0.0.5 → 0.0.7

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

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+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: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: '#fdf1f7',
+      border_color: '#fad5e8'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#ff69b4',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+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: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: '#eef6f6',
+      border_color: '#cde3e4'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#37a5a5',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: messageStatusReadColor,
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: messageStatusReadColor,
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#4a91d9',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,9 @@
+export const incomingBubbleBgColor = '#2e2e2e';
+export const outgoingBubbleBgColor = '#2e2e2e';
+export const actionIconColor = '#e2e4e6';
+export const actionIconBgColor = '#2c3b4d';
+export const actionIconBorderColor = '#3f536b';
+export const bubbleActiveBgColor = '#202821';
+export const messageStatusSendColor = '#61667a';
+export const messageStatusFailedColor = '#de3535';
+export const messageStatusReadColor = '#479dff';

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

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: messageStatusReadColor,
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: messageStatusReadColor,
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#5cab8b',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#f07b61',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#ff69b4',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#37a5a5',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,28 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: actionIconBgColor,
+      border_color: actionIconBorderColor
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: messageStatusReadColor,
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,10 @@
+.tooltipWrapper {
+  height: 0;
+  font-size: 0;
+  outline: 0;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  /* contain:strict */
+}

package/es/Theme/css/cssJSLogic.js

@@ -0,0 +1,14 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const tooltipWrapperClass = compileClassNames({
+    [style.tooltipWrapper]: true
+  });
+  const tooltipClass = compileClassNames({
+    [style.tooltip]: true
+  });
+  return {
+    tooltipWrapperClass,
+    tooltipClass
+  };
+}

package/es/Theme/desk/commonDeskColorVariable.js

@@ -0,0 +1,12 @@
+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'
+};

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

@@ -0,0 +1,30 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+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: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: '#2c3b4d',
+      border_color: '#3f536b'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#479dff',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,5 @@
+export const incomingBubbleBgColor = '#232b38';
+export const bubbleActiveBgColor = '#1b2e33';
+export const actionIconColor = '#e2e4e6';
+export const messageStatusSendColor = '#61667a';
+export const messageStatusFailedColor = '#de3535';

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

@@ -0,0 +1,30 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+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: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: '#26373b',
+      border_color: '#2d4e42'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#45a159',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,30 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+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: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: '#323136',
+      border_color: '#4f3c33'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#ff801f',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,30 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+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: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: '#312d3a',
+      border_color: '#4b323d'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#e94f4f',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,30 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+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: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: '#303338',
+      border_color: '#474137'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#d79835',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,33 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { imIntegrationIcon } from '../commonDeskColorVariable.js';
+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: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: '#f1f7fe',
+      border_color: '#b7d1f0'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#0a73eb',
+      failed_color: messageStatusFailedColor
+    },
+    imTicketLink: {
+      color: '#0a73eb'
+    }
+  }
+};

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

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

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

@@ -0,0 +1,30 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from "./commonColorVariable.js";
+import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+export default {
+  library: "chat_components",
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: "#5a616f"
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: "#f2faf5",
+      bg_color: "#f1f7fe",
+      failed_bg_color: "#fcebeb",
+      text_color: "#000"
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: "#f2faf5",
+      border_color: "#bee5c6"
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: "#26a942",
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

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

@@ -0,0 +1,29 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#fdf5ef',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: '#fdf5ef',
+      border_color: '#f7d6b9'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#e57717',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};