@zohoim/chat-components 0.0.10 → 0.0.13

package/es/ReplyBubbleHeader/css/cssJSLogic.js

@@ -4,7 +4,15 @@ export default function cssJSLogic(props, style) {
   const replyBubbleHeaderClass = compileClassNames({
     [style.replyBubbleHeader]: true
   });
+  const replyTextClass = compileClassNames({
+    [style.replyText]: true
+  });
+  const timeClass = compileClassNames({
+    [style.time]: true
+  });
   return {
-    replyBubbleHeaderClass
+    replyBubbleHeaderClass,
+    replyTextClass,
+    timeClass
   };
 }

package/es/ReplyBubbleHeader/props/defaultProps.js

@@ -3,7 +3,6 @@ import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
 const replyBubbleHeaderDefaultProps = {
   customStyle: dummyObject,
   replyText: '',
-  time: '',
-  timeCustomStyle: dummyObject
+  time: ''
 };
 export default replyBubbleHeaderDefaultProps;

package/es/ReplyBubbleHeader/props/propTypes.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 const replyBubbleHeaderPropTypes = {
   customStyle: PropTypes.object,
   replyText: PropTypes.string,
-  time: PropTypes.string,
-  timeCustomStyle: PropTypes.object
+  time: PropTypes.string
 };
 export default replyBubbleHeaderPropTypes;

package/es/TextBubble/TextBubble.js

@@ -2,22 +2,21 @@
 /* eslint-disable max-len */
 
 /** ** Libraries *** */
-import React from "react";
+import React from 'react';
 
 /** ** Hooks *** */
-import useMergeStyle from "@zohodesk/hooks/es/utils/useMergeStyle";
-import useTextBubble from "@zohoim/chat-components-hooks/es/TextBubble/useTextBubble";
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useTextBubble from '@zohoim/chat-components-hooks/es/TextBubble/useTextBubble';
 
 /** ** Constants *** */
-import textBubbleDefaultProps from "./props/defaultProps";
-import textBubblePropTypes from "./props/propTypes";
+import textBubbleDefaultProps from './props/defaultProps';
+import textBubblePropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from "@zohoim/chat-components-utils/es/common/renderHandler";
-import cssJSLogic from "./css/cssJSLogic";
+import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
-import style from "./css/TextBubble.module.css";
+import style from './css/TextBubble.module.css';
 export default function TextBubble(props) {
   const {
     customStyle
@@ -53,4 +52,4 @@ export default function TextBubble(props) {
 }
 TextBubble.propTypes = textBubblePropTypes;
 TextBubble.defaultProps = textBubbleDefaultProps;
-TextBubble.displayName = "TextBubble";
+TextBubble.displayName = 'TextBubble';

package/es/TextBubble/css/TextBubble.module.css

@@ -1,5 +1,14 @@
 .moreText {
     text-transform: uppercase;
-    color: #0a73eb;
-    font-size: 11px;
+    font-size: var(--imlib_size_11);
+    color: var(--imlib_chat_components_textBubble_see_more_color);
+    cursor: pointer;
 }
+
+.textBubble a{
+    color:var(--imlib_chat_components_textBubble_url_color);
+}
+
+.textBubble a:hover{
+    text-decoration: underline;
+}

package/es/Theme/ThemeWrapper.js

@@ -1,25 +1,27 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* eslint-disable react/jsx-no-bind */
 /** ** Libraries *** */
-import React from "react";
-import ThemeProvider from "@zohodesk/theme/es/ThemeProvider";
-import sizeVariable from "@zohodesk/theme-defaults/es/sizeVariable";
-import fontSizeVariable from "@zohodesk/theme-defaults/es/fontSizeVariable";
-import fontVariable from "@zohodesk/theme-defaults/es/fontVariable";
-import { transitionVariable, motionTransitionVariable } from "@zohodesk/theme-defaults/es/transitionVariable";
-import chatDefaultTheme from "./defaultTheme";
-import chatDarkTheme from "./darkTheme";
-import { MSG_ACTION_POPUP_PORTAL } from "../constants";
-import { baseUnitLimit } from "./constants";
-import DeskAssets from "./DeskAssets";
-import TooltipWrapper from "./ToolttipWrapper";
-import { Container } from "@zohodesk/components/es/Layout";
-import themeWrapperPropTypes from "./props/propTypes";
-import themeWrapperDefaultProps from "./props/defaultProps";
-import getThemeConfigurations from "./utils/getThemeConfigurations";
-import { I18NProvider } from "@zohodesk/i18n";
-import datetime from "@zohodesk/datetimejs";
-import "../Fonts/puviFont.module.css";
+import React from 'react';
+import ThemeProvider from '@zohodesk/theme/es/ThemeProvider';
+import sizeVariable from '@zohodesk/theme-defaults/es/sizeVariable';
+import fontSizeVariable from '@zohodesk/theme-defaults/es/fontSizeVariable';
+import fontVariable from '@zohodesk/theme-defaults/es/fontVariable';
+import { transitionVariable, motionTransitionVariable } from '@zohodesk/theme-defaults/es/transitionVariable';
+
+// import chatDefaultTheme from './defaultTheme';
+// import chatDarkTheme from './darkTheme';
+import { MSG_ACTION_POPUP_PORTAL } from '../constants';
+import { baseUnitLimit } from './constants';
+import DeskAssets from './DeskAssets';
+import TooltipWrapper from './ToolttipWrapper';
+import { Container } from '@zohodesk/components/es/Layout';
+import themeWrapperPropTypes from './props/propTypes';
+import themeWrapperDefaultProps from './props/defaultProps';
+import getThemeConfigurations from './utils/getThemeConfigurations';
+import { I18NProvider } from '@zohodesk/i18n';
+// import datetime from '@zohodesk/datetimejs';
+
+import '../Fonts/puviFont.module.css';
 export default function ThemeWrapper(props) {
   const {
     children,
@@ -43,7 +45,7 @@ export default function ThemeWrapper(props) {
     mode,
     theme
   });
-  const configurations = propThemeConfigurations ? propThemeConfigurations : themeConfigurations;
+  const configurations = propThemeConfigurations || themeConfigurations;
   function getContainerRef() {
     return containerRef.current;
   }
@@ -55,33 +57,34 @@ export default function ThemeWrapper(props) {
     id: "chat-components"
   }, wrapperDivProps, {
     style: {
-      width: "100%",
-      height: "100%"
+      width: '100%',
+      height: '100%'
     }
   }), /*#__PURE__*/React.createElement(I18NProvider
   // i18n={i18n}
   , {
-    timeZone: "Asia/Kolkata",
     datePattern: "DD/MM/YYYY",
     isEnabledCurrentYear: true,
-    timeFormat: "hh:mm"
+    timeFormat: "hh:mm",
+    timeZone: "Asia/Kolkata"
     // tzdata should already have been fetched and set as default
     // tzData={datetime.tz.data()}
   }, /*#__PURE__*/React.createElement(ThemeProvider, {
-    selector: "#chat-components",
-    prefix: "--imlib_",
     configuration: [sizeVariable(baseUnitLimit.size), fontSizeVariable(baseUnitLimit.fontSize), fontVariable, transitionVariable(baseUnitLimit.transition), motionTransitionVariable(baseUnitLimit.motionTransition), configurations
     // themeConfigration
     // chatDarkTheme
-    ]
+    ],
+
+    prefix: "--imlib_",
+    selector: "#chat-components"
   }, /*#__PURE__*/React.createElement(Container, {
     eleRef: containerRef
   }, children), /*#__PURE__*/React.createElement("div", {
     "data-portal": MSG_ACTION_POPUP_PORTAL
   }), needDeskAssets ? /*#__PURE__*/React.createElement(DeskAssets, null) : null, needTooltip ? /*#__PURE__*/React.createElement(TooltipWrapper, {
     containerRef: containerRef.current,
-    getContainerRef: getContainerRef,
-    customStyle: tooltipCustomStyle
+    customStyle: tooltipCustomStyle,
+    getContainerRef: getContainerRef
   }) : null)));
 }
 ThemeWrapper.propTypes = themeWrapperPropTypes;

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor2, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor2, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor2, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor2, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable.js';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, actionIconBgColor, actionIconBorderColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messageStatusReadColor } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {

package/es/Theme/desk/commonDeskColorVariable.js

@@ -1,14 +1,14 @@
 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"
+  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'
 };
 
-export const messagetextColor = "#e2e4e6";
+export const messagetextColor = '#e2e4e6';

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

@@ -1,42 +1,68 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from "./commonColorVariable.js";
-import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue } 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: "#2c3b4d",
-      bg_color: "#f1f7fe",
-      failed_bg_color: "#fcebeb",
+      outgoing_bg_color: '#2c3b4d',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#362734',
       text_color: messagetextColor,
-      failed_text_color: "#000"
+      failed_text_color: '#000'
     },
     actionIcon: {
       color: actionIconColor,
-      bg_color: "#2c3b4d",
-      border_color: "#3f536b"
+      bg_color: '#2c3b4d',
+      border_color: '#3f536b'
     },
     imIntegrationIcon,
     messageStatus: {
       send_color: messageStatusSendColor,
-      read_color: "#479dff",
+      read_color: '#479dff',
       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: "#479dff"
+      color: '#479dff'
+    },
+    ReplyBubbleContent: {
+      bg_color: '#232b38',
+      color: '#e2e4e6',
+      border_color: '#2d3748',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      bg_color: '#232b38'
+    },
+    locationBubble: {
+      bg_color: '#232b38',
+      color: primaryBlue,
+      border_color: '#2d3748'
+    },
+    articleBubble: {
+      bg_color: '#232b38',
+      color: '#e2e4e6',
+      border_color: '#2d3748'
+    },
+    iMDateTime: {
+      color: '#a8b0bd'
+    },
+    textBubble: {
+      see_more_color: primaryBlue,
+      url_color: primaryBlue
     }
   }
 };

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

@@ -1,5 +1,10 @@
-export const incomingBubbleBgColor = "#232b38";
-export const bubbleActiveBgColor = "#1b2e33";
-export const actionIconColor = "#e2e4e6";
-export const messageStatusSendColor = "#61667a";
-export const messageStatusFailedColor = "#de3535";
+export const incomingBubbleBgColor = '#232b38';
+export const bubbleActiveBgColor = '#1b2e33';
+export const actionIconColor = '#e2e4e6';
+export const messageStatusSendColor = '#61667a';
+export const messageStatusFailedColor = '#de3535';
+export const primaryBlue = '#479dff';
+export const primaryGreen = '#45a159';
+export const primaryOrange = '#ff801f';
+export const primaryRed = '#e94f4f';
+export const primaryYellow = '#d79835';