@zohoim/chat-components 0.0.8 → 0.0.10

package/es/ReplyBubbleContent/index.js

@@ -0,0 +1 @@
+export { default as ReplyBubbleContent } from './ReplyBubbleContent';

package/es/ReplyBubbleContent/props/defaultProps.js

@@ -0,0 +1,6 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const replyBubbleContentDefaultProps = {
+  customStyle: dummyObject
+};
+export default replyBubbleContentDefaultProps;

package/es/ReplyBubbleContent/props/propTypes.js

@@ -0,0 +1,9 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const replyBubbleContentPropTypes = {
+  customStyle: PropTypes.object,
+  senderName: PropTypes.string,
+  renderIcon: PropTypes.func,
+  renderMessage: PropTypes.func
+};
+export default replyBubbleContentPropTypes;

package/es/ReplyBubbleHeader/ReplyBubbleHeader.js

@@ -2,26 +2,26 @@
 /* eslint-disable max-len */
 
 /** ** Libraries *** */
-import React from 'react';
+import React from "react";
 
 /** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useMergeStyle from "@zohodesk/hooks/es/utils/useMergeStyle";
 
 /** ** Constants *** */
-import replyBubbleHeaderDefaultProps from './props/defaultProps';
-import replyBubbleHeaderPropTypes from './props/propTypes';
+import replyBubbleHeaderDefaultProps from "./props/defaultProps";
+import replyBubbleHeaderPropTypes from "./props/propTypes";
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
-import cssJSLogic from './css/cssJSLogic';
+import renderHandler from "@zohoim/chat-components-utils/es/common/renderHandler";
+import cssJSLogic from "./css/cssJSLogic";
 
 /** ** Styles *** */
-import style from './css/ReplyBubbleHeader.module.css';
+import style from "./css/ReplyBubbleHeader.module.css";
 
 /** ** Components *** */
-import { Container, Box } from '@zohodesk/components/es/Layout';
-import ReplyIcon from '@zohodesk/icon/es/general/Reply';
-import IMDateTime from '../IMDateTime/IMDateTime';
+import { Container, Box } from "@zohodesk/components/es/Layout";
+import ReplyIcon from "@zohodesk/icon/es/general/Reply";
+import IMDateTime from '../im/IMDateTime/IMDateTime';
 export default function ReplyBubbleHeader(props) {
   const {
     customStyle,
@@ -43,11 +43,15 @@ export default function ReplyBubbleHeader(props) {
     flexible: true
   }, /*#__PURE__*/React.createElement(Container, {
     alignBox: "row"
-  }, /*#__PURE__*/React.createElement(ReplyIcon, null), /*#__PURE__*/React.createElement(Box, null, replyText))), /*#__PURE__*/React.createElement(IMDateTime, {
+  }, /*#__PURE__*/React.createElement(ReplyIcon, {
+    customStyle: {
+      base: newStyle.replyIcon
+    }
+  }), /*#__PURE__*/React.createElement(Box, null, replyText))), /*#__PURE__*/React.createElement(IMDateTime, {
     customStyle: timeCustomStyle,
     value: time
   }));
 }
 ReplyBubbleHeader.propTypes = replyBubbleHeaderPropTypes;
 ReplyBubbleHeader.defaultProps = replyBubbleHeaderDefaultProps;
-ReplyBubbleHeader.displayName = 'ReplyBubbleHeader';
+ReplyBubbleHeader.displayName = "ReplyBubbleHeader";

package/es/ReplyBubbleHeader/css/ReplyBubbleHeader.module.css

@@ -0,0 +1,4 @@
+.replyIcon{
+    width: 20px;
+    height: 20px;
+}

package/es/ReplyBubbleHeader/props/defaultProps.js

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

package/es/TextBubble/TextBubble.js

@@ -2,22 +2,22 @@
 /* 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 renderHandler from "@zohoim/chat-components-utils/es/common/renderHandler";
+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
@@ -36,7 +36,7 @@ export default function TextBubble(props) {
     moreTextClass,
     textBubbleWrapperClass
   } = cssJSLogic(props, newStyle);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("span", {
     className: textBubbleWrapperClass
   }, /*#__PURE__*/React.createElement("span", {
     className: textBubbleClass
@@ -53,4 +53,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 +1,5 @@
-
+.moreText {
+    text-transform: uppercase;
+    color: #0a73eb;
+    font-size: 11px;
+}

package/es/Theme/ThemeWrapper.js

@@ -1,24 +1,25 @@
 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 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,
@@ -52,7 +53,12 @@ export default function ThemeWrapper(props) {
   };
   return /*#__PURE__*/React.createElement("div", _extends({
     id: "chat-components"
-  }, wrapperDivProps), /*#__PURE__*/React.createElement(I18NProvider
+  }, wrapperDivProps, {
+    style: {
+      width: "100%",
+      height: "100%"
+    }
+  }), /*#__PURE__*/React.createElement(I18NProvider
   // i18n={i18n}
   , {
     timeZone: "Asia/Kolkata",

package/es/Theme/desk/commonDeskColorVariable.js

@@ -9,4 +9,6 @@ export const imIntegrationIcon = {
   instagram_color: "red",
   asap_color: "#0a73eb"
   // twitter_color: 'red'
-};
+};
+
+export const messagetextColor = "#e2e4e6";

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

@@ -1,30 +1,42 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
-import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from "./commonColorVariable.js";
+import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
 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',
-      text_color: '#000'
+      outgoing_bg_color: "#2c3b4d",
+      bg_color: "#f1f7fe",
+      failed_bg_color: "#fcebeb",
+      text_color: messagetextColor,
+      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"
+    },
+    attachmentBubble: {
+      bg_color: "#232b38",
+      border_color: "#2d3748"
+    },
+    imTicketLink: {
+      color: "#479dff"
     }
   }
 };

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

@@ -1,5 +1,5 @@
-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";

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

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

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

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
-import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
 export default {
   library: 'chat_components',
   variables: {
@@ -13,7 +13,7 @@ export default {
       outgoing_bg_color: '#323136',
       bg_color: '#f1f7fe',
       failed_bg_color: '#fcebeb',
-      text_color: '#000'
+      text_color: messagetextColor
     },
     actionIcon: {
       color: actionIconColor,
@@ -25,6 +25,17 @@ export default {
       send_color: messageStatusSendColor,
       read_color: '#ff801f',
       failed_color: messageStatusFailedColor
+    },
+    attachmentBubbleInfo: {
+      fileName_color: "#e2e4e6",
+      fileSize_color: "#788190"
+    },
+    attachmentBubble: {
+      bg_color: "#232b38",
+      border_color: "#2d3748"
+    },
+    imTicketLink: {
+      color: "#ff801f"
     }
   }
 };

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

@@ -1,30 +1,41 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
-import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from "./commonColorVariable.js";
+import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
 export default {
-  library: 'chat_components',
+  library: "chat_components",
   variables: {
     messageBubble: {
       active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: '#5a616f'
+      messageBox_footer_text_color: "#5a616f"
     },
     messageBox: {
       incoming_bg_color: incomingBubbleBgColor,
-      outgoing_bg_color: '#312d3a',
-      bg_color: '#f1f7fe',
-      failed_bg_color: '#fcebeb',
-      text_color: '#000'
+      outgoing_bg_color: "#312d3a",
+      bg_color: "#f1f7fe",
+      failed_bg_color: "#fcebeb",
+      text_color: messagetextColor
     },
     actionIcon: {
       color: actionIconColor,
-      bg_color: '#312d3a',
-      border_color: '#4b323d'
+      bg_color: "#312d3a",
+      border_color: "#4b323d"
     },
     imIntegrationIcon,
     messageStatus: {
       send_color: messageStatusSendColor,
-      read_color: '#e94f4f',
+      read_color: "#e94f4f",
       failed_color: messageStatusFailedColor
+    },
+    attachmentBubbleInfo: {
+      fileName_color: "#e2e4e6",
+      fileSize_color: "#788190"
+    },
+    attachmentBubble: {
+      bg_color: "#232b38",
+      border_color: "#2d3748"
+    },
+    imTicketLink: {
+      color: "#e94f4f"
     }
   }
 };

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

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

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

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

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

@@ -2,4 +2,5 @@ export const incomingBubbleBgColor = '#f1f4f9';
 export const bubbleActiveBgColor = '#fdffe3';
 export const actionIconColor = '#000';
 export const messageStatusSendColor = '#61667a';
-export const messageStatusFailedColor = '#de3535';
+export const messageStatusFailedColor = '#de3535';
+export const messagetextColor = "#000";

package/es/Theme/desk/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, messagetextColor } from "./commonColorVariable.js";
 import { imIntegrationIcon } from "../commonDeskColorVariable.js";
 export default {
   library: "chat_components",
@@ -13,7 +13,7 @@ export default {
       outgoing_bg_color: "#f2faf5",
       bg_color: "#f1f7fe",
       failed_bg_color: "#fcebeb",
-      text_color: "#000"
+      text_color: messagetextColor
     },
     actionIcon: {
       color: actionIconColor,
@@ -25,6 +25,13 @@ export default {
       send_color: messageStatusSendColor,
       read_color: "#26a942",
       failed_color: messageStatusFailedColor
+    },
+    attachmentBubble: {
+      bg_color: "#fff",
+      border_color: "#ebf0f5"
+    },
+    imTicketLink: {
+      color: "#26a942"
     }
   }
 };

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

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