@zohoim/chat-components 0.0.10 → 0.0.13

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

@@ -1,37 +1,63 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor } from "./commonColorVariable.js";
-import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryYellow, white } from './commonColorVariable';
+import { imIntegrationIcon } 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: "#fdf8e9",
-      bg_color: "#f1f7fe",
-      failed_bg_color: "#fcebeb",
+      outgoing_bg_color: '#fdf8e9',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
       text_color: messagetextColor
     },
     actionIcon: {
       color: actionIconColor,
-      bg_color: "#fdf8e9",
-      border_color: "#f6e3a7"
+      bg_color: '#fdf8e9',
+      border_color: '#f6e3a7'
     },
     imIntegrationIcon,
     messageStatus: {
       send_color: messageStatusSendColor,
-      read_color: "#b68c07",
+      read_color: '#b68c07',
       failed_color: messageStatusFailedColor
     },
     attachmentBubble: {
-      bg_color: "#fff",
-      border_color: "#ebf0f5"
+      bg_color: white,
+      border_color: '#ebf0f5'
+    },
+    ReplyBubbleContent: {
+      bg_color: white,
+      color: '#000',
+      border_color: '#ebf0f5',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      bg_color: white
+    },
+    locationBubble: {
+      bg_color: white,
+      color: primaryYellow,
+      border_color: '#ebf0f5'
+    },
+    articleBubble: {
+      bg_color: white,
+      color: '#000',
+      border_color: '#ebf0f5'
     },
     imTicketLink: {
-      color: "#b68c07"
+      color: primaryYellow
+    },
+    textBubble: {
+      see_more_color: primaryYellow,
+      url_color: primaryYellow
+    },
+    iMDateTime: {
+      color: '#5a616f'
     }
   }
 };

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

@@ -1,41 +1,68 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from "./commonColorVariable.js";
-import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, 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: outgoingBubbleBgColor,
-      bg_color: "#f1f7fe",
-      failed_bg_color: "#fcebeb",
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
       text_color: messagetextColor
     },
     actionIcon: {
       color: actionIconColor,
-      bg_color: "#252d37",
-      border_color: "#2c4664"
+      bg_color: '#252d37',
+      border_color: '#2c4664'
     },
     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: "#212121",
-      border_color: "#161515"
+      bg_color: '#212121',
+      border_color: '#161515'
     },
     imTicketLink: {
-      color: "#479dff"
+      color: '#479dff'
+    },
+    ReplyBubbleContent: {
+      bg_color: '#212121',
+      color: '#e2e4e6',
+      border_color: '#161515',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      bg_color: '#212121',
+      color: '#e2e4e6'
+    },
+    locationBubble: {
+      bg_color: '#212121',
+      color: primaryBlue,
+      border_color: '#161515'
+    },
+    articleBubble: {
+      bg_color: '#212121',
+      color: '#e2e4e6',
+      border_color: '#161515'
+    },
+    iMDateTime: {
+      color: '#999'
+    },
+    textBubble: {
+      see_more_color: primaryBlue,
+      url_color: primaryBlue
     }
   }
 };

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

@@ -4,4 +4,9 @@ export const bubbleActiveBgColor = '#202821';
 export const actionIconColor = '#e2e4e6';
 export const messageStatusSendColor = '#61667a';
 export const messageStatusFailedColor = '#de3535';
-export const messagetextColor = "#e2e4e6";
+export const messagetextColor = '#e2e4e6';
+export const primaryBlue = '#479dff';
+export const primaryGreen = '#45a159';
+export const primaryOrange = '#ff801f';
+export const primaryRed = '#e94f4f';
+export const primaryYellow = '#d79835';

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

@@ -1,41 +1,67 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from "./commonColorVariable.js";
-import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen } 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: outgoingBubbleBgColor,
-      bg_color: "#f1f7fe",
-      failed_bg_color: "#fcebeb",
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
       text_color: messagetextColor
     },
     actionIcon: {
       color: actionIconColor,
-      bg_color: "#252e27",
-      border_color: "#2c4732"
+      bg_color: '#252e27',
+      border_color: '#2c4732'
     },
     imIntegrationIcon,
     messageStatus: {
       send_color: messageStatusSendColor,
-      read_color: "#45a159",
+      read_color: '#45a159',
       failed_color: messageStatusFailedColor
     },
     attachmentBubbleInfo: {
-      fileName_color: "#e2e4e6",
-      fileSize_color: "#788190"
+      fileName_color: '#e2e4e6',
+      fileSize_color: '#788190'
     },
     attachmentBubble: {
-      bg_color: "#212121",
-      border_color: "#161515"
+      bg_color: '#212121',
+      border_color: '#161515'
     },
     imTicketLink: {
-      color: "#45a159"
+      color: '#45a159'
+    },
+    ReplyBubbleContent: {
+      bg_color: '#212121',
+      color: '#e2e4e6',
+      border_color: '#161515',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      bg_color: '#212121'
+    },
+    locationBubble: {
+      bg_color: '#212121',
+      color: primaryGreen,
+      border_color: '#161515'
+    },
+    articleBubble: {
+      bg_color: '#212121',
+      color: '#e2e4e6',
+      border_color: '#161515'
+    },
+    iMDateTime: {
+      color: '#999'
+    },
+    textBubble: {
+      see_more_color: primaryGreen,
+      url_color: primaryGreen
     }
   }
 };

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

@@ -1,41 +1,67 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from "./commonColorVariable.js";
-import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange } 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: outgoingBubbleBgColor,
-      bg_color: "#f1f7fe",
-      failed_bg_color: "#fcebeb",
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
       text_color: messagetextColor
     },
     actionIcon: {
       color: actionIconColor,
-      bg_color: "#312821",
-      border_color: "#4d3421"
+      bg_color: '#312821',
+      border_color: '#4d3421'
     },
     imIntegrationIcon,
     messageStatus: {
       send_color: messageStatusSendColor,
-      read_color: "#ff801f",
+      read_color: '#ff801f',
       failed_color: messageStatusFailedColor
     },
     attachmentBubbleInfo: {
-      fileName_color: "#e2e4e6",
-      fileSize_color: "#788190"
+      fileName_color: '#e2e4e6',
+      fileSize_color: '#788190'
     },
     attachmentBubble: {
-      bg_color: "#212121",
-      border_color: "#161515"
+      bg_color: '#212121',
+      border_color: '#161515'
     },
     imTicketLink: {
-      color: "#ff801f"
+      color: '#ff801f'
+    },
+    ReplyBubbleContent: {
+      bg_color: '#212121',
+      color: '#e2e4e6',
+      border_color: '#161515',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      bg_color: '#212121'
+    },
+    locationBubble: {
+      bg_color: '#212121',
+      color: primaryOrange,
+      border_color: '#161515'
+    },
+    articleBubble: {
+      bg_color: '#212121',
+      color: '#e2e4e6',
+      border_color: '#161515'
+    },
+    iMDateTime: {
+      color: '#999'
+    },
+    textBubble: {
+      see_more_color: primaryOrange,
+      url_color: primaryOrange
     }
   }
 };

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

@@ -1,41 +1,67 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from "./commonColorVariable.js";
-import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, primaryRed } 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: outgoingBubbleBgColor,
-      bg_color: "#f1f7fe",
-      failed_bg_color: "#fcebeb",
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
       text_color: messagetextColor
     },
     actionIcon: {
       color: actionIconColor,
-      bg_color: "#2f2424",
-      border_color: "#492A29"
+      bg_color: '#2f2424',
+      border_color: '#492A29'
     },
     imIntegrationIcon,
     messageStatus: {
       send_color: messageStatusSendColor,
-      read_color: "#e94f4f",
+      read_color: '#e94f4f',
       failed_color: messageStatusFailedColor
     },
     attachmentBubbleInfo: {
-      fileName_color: "#e2e4e6",
-      fileSize_color: "#788190"
+      fileName_color: '#e2e4e6',
+      fileSize_color: '#788190'
     },
     attachmentBubble: {
-      bg_color: "#212121",
-      border_color: "#161515"
+      bg_color: '#212121',
+      border_color: '#161515'
     },
     imTicketLink: {
-      color: "#e94f4f"
+      color: '#e94f4f'
+    },
+    ReplyBubbleContent: {
+      bg_color: '#212121',
+      color: '#e2e4e6',
+      border_color: '#161515',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      bg_color: '#212121'
+    },
+    locationBubble: {
+      bg_color: '#212121',
+      color: primaryRed,
+      border_color: '#161515'
+    },
+    articleBubble: {
+      bg_color: '#212121',
+      color: '#e2e4e6',
+      border_color: '#161515'
+    },
+    iMDateTime: {
+      color: '#999'
+    },
+    textBubble: {
+      see_more_color: primaryRed,
+      url_color: primaryRed
     }
   }
 };

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

@@ -1,41 +1,67 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconColor } from "./commonColorVariable.js";
-import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconColor, primaryYellow } 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: outgoingBubbleBgColor,
-      bg_color: "#f1f7fe",
-      failed_bg_color: "#fcebeb",
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#362734',
       text_color: messagetextColor
     },
     actionIcon: {
       color: actionIconColor,
-      bg_color: "#2e2922",
-      border_color: "#453925"
+      bg_color: '#2e2922',
+      border_color: '#453925'
     },
     imIntegrationIcon,
     messageStatus: {
       send_color: messageStatusSendColor,
-      read_color: "#d79835",
+      read_color: '#d79835',
       failed_color: messageStatusFailedColor
     },
     attachmentBubbleInfo: {
-      fileName_color: "#e2e4e6",
-      fileSize_color: "#788190"
+      fileName_color: '#e2e4e6',
+      fileSize_color: '#788190'
     },
     attachmentBubble: {
-      bg_color: "#212121",
-      border_color: "#161515"
+      bg_color: '#212121',
+      border_color: '#161515'
     },
     imTicketLink: {
-      color: "#d79835"
+      color: '#d79835'
+    },
+    ReplyBubbleContent: {
+      bg_color: '#212121',
+      color: '#e2e4e6',
+      border_color: '#161515',
+      line_color: '#cddbf2'
+    },
+    imageBubble: {
+      bg_color: '#212121'
+    },
+    locationBubble: {
+      bg_color: '#212121',
+      color: primaryYellow,
+      border_color: '#161515'
+    },
+    articleBubble: {
+      bg_color: '#212121',
+      color: '#e2e4e6',
+      border_color: '#161515'
+    },
+    iMDateTime: {
+      color: '#999'
+    },
+    textBubble: {
+      see_more_color: primaryYellow,
+      url_color: primaryYellow
     }
   }
 };

package/es/Theme/utils/getThemeConfigurations.js

@@ -44,7 +44,7 @@ import crmPureDarkGreen from '../crm/pureDark/greenTheme';
 import crmPureDarkOrange from '../crm/pureDark/orangeTheme';
 import crmPureDarkPink from '../crm/pureDark/pinkTheme';
 import crmPureDarkTeal from '../crm/pureDark/tealTheme';
-import crmPureDarkWhite from '../crm/pureDark/whiteTheme';*/
+import crmPureDarkWhite from '../crm/pureDark/whiteTheme'; */
 
 const deskModeMapping = {
   [modeConstants.LIGHT]: 'default',
@@ -59,7 +59,7 @@ const deskThemeMapping = {
   [themeConstants.YELLOW]: 'yellow'
 };
 
-/*const crmThemeMapping = {
+/* const crmThemeMapping = {
   [themeConstants.BLUE_FAN]: 'crmBlue',
   [themeConstants.BLUE]: 'crmBlue',
   [themeConstants.DARK_BLUE]: 'crmBlue',
@@ -70,7 +70,7 @@ const deskThemeMapping = {
   [themeConstants.ORANGE]: 'crmOrange',
   [themeConstants.PINK]: 'crmPink',
   [themeConstants.TEAL]: 'crmTeal'
-};*/
+}; */
 
 const concatString = '_';
 const defaultDeskTheme = deskThemeMapping[themeConstants.BLUE];
@@ -92,7 +92,7 @@ const themeConfigMapping = {
   [`${appConstants.DESK}${concatString}${modeConstants.PURE_DARK}${concatString}${themeConstants.ORANGE}`]: deskPureDarkOrange,
   [`${appConstants.DESK}${concatString}${modeConstants.PURE_DARK}${concatString}${themeConstants.RED}`]: deskPureDarkRed,
   [`${appConstants.DESK}${concatString}${modeConstants.PURE_DARK}${concatString}${themeConstants.YELLOW}`]: deskPureDarkYellow
-  /*[`${appConstants.CRM}${concatString}${modeConstants.LIGHT}${concatString}${themeConstants.BLUE_FAN}`]:
+  /* [`${appConstants.CRM}${concatString}${modeConstants.LIGHT}${concatString}${themeConstants.BLUE_FAN}`]:
     crmLightBlueFan,
   [`${appConstants.CRM}${concatString}${modeConstants.LIGHT}${concatString}${themeConstants.BLUE}`]:
     crmLightBlue,
@@ -145,7 +145,7 @@ const themeConfigMapping = {
   [`${appConstants.CRM}${concatString}${modeConstants.PURE_DARK}${concatString}${themeConstants.TEAL}`]:
     crmPureDarkTeal,
   [`${appConstants.CRM}${concatString}${modeConstants.PURE_DARK}${concatString}${themeConstants.WHITE}`]:
-    crmPureDarkWhite*/
+    crmPureDarkWhite */
 };
 
 function getThemeName() {

package/es/Video/Video.js

@@ -13,12 +13,14 @@ import videoDefaultProps from './props/defaultProps';
 import videoPropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
 import style from './css/Video.module.css';
-import MediaControls from '../MediaControls/MediaControls';
+
+/** ** Components *** */
+// import MediaControls from '../MediaControls/MediaControls';
+
 export default function Video(props) {
   const {
     customStyle,
@@ -26,12 +28,12 @@ export default function Video(props) {
     fileURL
   } = props;
   const {
-    mediaElementRef,
-    durationTime,
-    onTogglePlay,
-    currentTime,
-    progressPercentage,
-    isMediaPlayed
+    mediaElementRef
+    // durationTime,
+    // onTogglePlay,
+    // currentTime,
+    // progressPercentage,
+    // isMediaPlayed
   } = useMedia(props);
 
   /* External customization */
@@ -44,13 +46,13 @@ export default function Video(props) {
     /*#__PURE__*/
     // <div className={videoWrapperClass}>
     React.createElement("video", {
-      controls: true,
       className: videoClass,
+      controls: true,
       preload: "metadata",
       ref: mediaElementRef
     }, /*#__PURE__*/React.createElement("source", {
-      type: fileType,
-      "data-src": fileURL
+      "data-src": fileURL,
+      type: fileType
     }))
     /* <MediaControls
         customStyle={controlsCustomStyle}
@@ -60,7 +62,6 @@ export default function Video(props) {
         currentTime={currentTime}
         durationTime={durationTime}
       /> */
-    // </div>
   );
 }
 

package/es/VideoBubble/VideoBubble.js

@@ -12,7 +12,6 @@ import videoBubbleDefaultProps from './props/defaultProps';
 import videoBubblePropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
@@ -46,10 +45,10 @@ export default function VideoBubble(props) {
   }), /*#__PURE__*/React.createElement("div", {
     className: videoBubbleClass
   }, /*#__PURE__*/React.createElement(Video, {
+    controlsCustomStyle: controlsCustomStyle,
     customStyle: videoCustomStyle,
-    fileURL: fileURL,
     fileType: fileType,
-    controlsCustomStyle: controlsCustomStyle
+    fileURL: fileURL
   })));
 }
 VideoBubble.propTypes = videoBubblePropTypes;

package/es/icons/create-icon-components.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 const commandLineArgs = require('command-line-args');
 const path = require('path');
 const fs = require('fs');

package/es/icons/icon.template.js

@@ -1,10 +1,10 @@
 function iconTemplate(_ref) {
   let {
     path,
-    name,
     value
   } = _ref;
   return `
+    /* eslint-disable */
     import React from 'react';
     import Icon from '${path}';
 
@@ -19,7 +19,7 @@ function indexTemplate(_ref2) {
     name,
     path
   } = _ref2;
-  return `export { default as ${name} } from "${path}";`;
+  return `export { default as ${name} } from '${path}';`;
 }
 module.exports = {
   iconTemplate,

package/es/icons/iconSrc/actions/ConvertTicket.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from 'react';
 import Icon from '@zohodesk/icon/es/Icon/Icon';
 export default function IconComponent(props) {

package/es/icons/iconSrc/actions/index.js

@@ -1 +1 @@
-export { default as ConvertTicket } from "./ConvertTicket";
+export { default as ConvertTicket } from './ConvertTicket';