@zohoim/chat-components 1.0.11-beta.1 → 1.1.0

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

@@ -0,0 +1,132 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
+export default {
+  library: 'chat_components',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#312821',
+      border_color: '#4d3421'
+    },
+    attachmentBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#999',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#999'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#999'
+    },
+    imPermaLink: {
+      url_color: '#ff801f'
+    },
+    imageBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      url_color: primaryOrange,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#ff801f',
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      line_color: '#cddbf2',
+      line_color_failed: failedLine,
+      sender_color: '#e2e4e6',
+      sender_color_failed: failedColor,
+      content_color: '#e2e4e6',
+      content_color_failed: failedColor
+    },
+    replyBubbleHeader: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      time_color: '#828994',
+      time_color_failed: failedColor
+    },
+    textBubble: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      see_more_color: primaryOrange,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryOrange,
+      url_color_failed: failedUrlColor
+    },
+    videoBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    emojiFooter: {
+      tabLine: primaryOrange,
+      border_color: '#161515'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_path2_color: 'var(--dot_platinum)'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262626',
+      editor_border_color: '#585858',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#ff801f'
+    }
+  }
+};

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

@@ -0,0 +1,132 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
+export default {
+  library: 'chat_components',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#2f2424',
+      border_color: '#492A29'
+    },
+    attachmentBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#999',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#999'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#999'
+    },
+    imPermaLink: {
+      url_color: '#e94f4f'
+    },
+    imageBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      url_color: primaryRed,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#e94f4f',
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      line_color: '#cddbf2',
+      line_color_failed: failedLine,
+      sender_color: '#e2e4e6',
+      sender_color_failed: failedColor,
+      content_color: '#e2e4e6',
+      content_color_failed: failedColor
+    },
+    replyBubbleHeader: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      time_color: '#828994',
+      time_color_failed: failedColor
+    },
+    textBubble: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      see_more_color: primaryRed,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryRed,
+      url_color_failed: failedUrlColor
+    },
+    videoBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    emojiFooter: {
+      tabLine: primaryRed,
+      border_color: '#161515'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_path2_color: 'var(--dot_platinum)'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262626',
+      editor_border_color: '#585858',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#e94f4f'
+    }
+  }
+};

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

@@ -0,0 +1,132 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconWrapperColor, primaryYellow, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
+export default {
+  library: 'chat_components',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#2e2922',
+      border_color: '#453925'
+    },
+    attachmentBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#999',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#999'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#999'
+    },
+    imPermaLink: {
+      url_color: '#d79835'
+    },
+    imageBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      url_color: primaryYellow,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#d79835',
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: '#212121',
+      bg_color_failed: failedBg,
+      border_color: '#161515',
+      border_color_failed: failedBdr,
+      line_color: '#cddbf2',
+      line_color_failed: failedLine,
+      sender_color: '#e2e4e6',
+      sender_color_failed: failedColor,
+      content_color: '#e2e4e6',
+      content_color_failed: failedColor
+    },
+    replyBubbleHeader: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      time_color: '#828994',
+      time_color_failed: failedColor
+    },
+    textBubble: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      see_more_color: primaryYellow,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryYellow,
+      url_color_failed: failedUrlColor
+    },
+    videoBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
+    emojiFooter: {
+      tabLine: primaryYellow,
+      border_color: '#161515'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_path2_color: 'var(--dot_platinum)'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262626',
+      editor_border_color: '#585858',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#d79835'
+    }
+  }
+};

package/es/Theme/utils/getThemeConfigurations.js

@@ -1,4 +1,19 @@
-import { modeConstants, themeConstants } from "../constants";
+import { modeConstants, themeConstants } from '@zohoim/chat-components-utils/es/constants/themeConstants';
+import lightBlue from "../themeVariables/light/blueTheme";
+import lightGreen from "../themeVariables/light/greenTheme";
+import lightOrange from "../themeVariables/light/orangeTheme";
+import lightRed from "../themeVariables/light/redTheme";
+import lightYellow from "../themeVariables/light/yellowTheme";
+import darkBlue from "../themeVariables/dark/blueTheme";
+import darkGreen from "../themeVariables/dark/greenTheme";
+import darkOrange from "../themeVariables/dark/orangeTheme";
+import darkRed from "../themeVariables/dark/redTheme";
+import darkYellow from "../themeVariables/dark/yellowTheme";
+import pureDarkBlue from "../themeVariables/pureDark/blueTheme";
+import pureDarkGreen from "../themeVariables/pureDark/greenTheme";
+import pureDarkOrange from "../themeVariables/pureDark/orangeTheme";
+import pureDarkRed from "../themeVariables/pureDark/redTheme";
+import pureDarkYellow from "../themeVariables/pureDark/yellowTheme";
 const modeMapping = {
   [modeConstants.LIGHT]: 'light',
   [modeConstants.DARK]: 'dark',
@@ -11,17 +26,56 @@ const themeMapping = {
   [themeConstants.RED]: 'red',
   [themeConstants.YELLOW]: 'yellow'
 };
+const concatString = '_';
 const defaultTheme = themeMapping[themeConstants.BLUE];
 const defaultMode = modeMapping[modeConstants.LIGHT];
+const defaultThemeConfiguration = lightBlue;
+const themeConfigMapping = {
+  [`${modeConstants.LIGHT}${concatString}${themeConstants.BLUE}`]: lightBlue,
+  [`${modeConstants.LIGHT}${concatString}${themeConstants.GREEN}`]: lightGreen,
+  [`${modeConstants.LIGHT}${concatString}${themeConstants.ORANGE}`]: lightOrange,
+  [`${modeConstants.LIGHT}${concatString}${themeConstants.RED}`]: lightRed,
+  [`${modeConstants.LIGHT}${concatString}${themeConstants.YELLOW}`]: lightYellow,
+  [`${modeConstants.DARK}${concatString}${themeConstants.BLUE}`]: darkBlue,
+  [`${modeConstants.DARK}${concatString}${themeConstants.GREEN}`]: darkGreen,
+  [`${modeConstants.DARK}${concatString}${themeConstants.ORANGE}`]: darkOrange,
+  [`${modeConstants.DARK}${concatString}${themeConstants.RED}`]: darkRed,
+  [`${modeConstants.DARK}${concatString}${themeConstants.YELLOW}`]: darkYellow,
+  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.BLUE}`]: pureDarkBlue,
+  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.GREEN}`]: pureDarkGreen,
+  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.ORANGE}`]: pureDarkOrange,
+  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.RED}`]: pureDarkRed,
+  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.YELLOW}`]: pureDarkYellow
+};
+
+function getThemeName() {
+  let {
+    mode = modeConstants.LIGHT,
+    theme = themeConstants.BLUE
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const themeName = `${mode}${concatString}${theme}`;
+  return {
+    themeName
+  };
+}
+
 export default function getThemeConfigurations(_ref) {
   let {
     mode: propMode,
     theme: propTheme
   } = _ref;
+  const {
+    themeName
+  } = getThemeName({
+    mode: propMode,
+    theme: propTheme
+  });
   const mode = propMode ? modeMapping[propMode] || propMode : defaultMode;
   const theme = propTheme ? themeMapping[propTheme] || propTheme : defaultTheme;
+  const themeConfigurations = themeConfigMapping[themeName] || defaultThemeConfiguration;
   return {
     mode,
-    theme
+    theme,
+    themeConfigurations
   };
 }

package/es/constants/index.js

@@ -1 +1,8 @@
-export const MSG_ACTION_POPUP_PORTAL = 'MSG_ACTION_POPUP_PORTAL';
+export const MSG_ACTION_POPUP_PORTAL = 'MSG_ACTION_POPUP_PORTAL';
+export const EDITOR_POPUP_PORTAL = 'EDITOR_POPUP_PORTAL';
+export const EDITOR_POPUP_TARGET_PORTAL = 'EDITOR_POPUP_TARGET_PORTAL';
+const version = '1.4.9';
+export const defaultEditorURL = // `https://static.localzohocdn.com/rtelibrary/${version}/js/rte.js`;
+// `https://static.zohocdn.com/rtelibrary/${version}/js/rte.js`;
+// `https://static.localzohocdn.com/rtelibrary/${version}/js/rte.min.js`;
+`https://static.zohocdn.com/rtelibrary/${version}/js/rte.min.js`;

package/es/constants/propConstants/editorPropConstants.js

@@ -0,0 +1,3 @@
+export const formats = ['strong', 'em', 'underline', 'link', 'strikeThrough', 'align', 'fontSize', 'fontFamily', 'fontColor', 'highlight', 'script', 'lineHeight', 'direction', 'headings', 'clearFormatting', 'inlineQuote', 'indent', 'formatPainter'];
+export const features = ['hr', 'images', 'tables', 'list', 'code_block', 'video', 'blockquote', 'embed', 'html'];
+export const langCode = ['en_US', 'ar', 'as', 'bg', 'bn', 'brx', 'ca', 'cs', 'da', 'de', 'doi', 'el', 'es', 'et', 'fi', 'fr', 'ga', 'gu', 'hi', 'hr', 'hu', 'id', 'in', 'it', 'iw', 'ja', 'kn', 'ko', 'kok', 'ks', 'lt', 'mai', 'ml', 'mni', 'mr', 'ms', 'my', 'ne', 'nl', 'no', 'or', 'pa', 'pl', 'pt_BR', 'pt', 'ro', 'ru', 'sa', 'sat', 'sd', 'si', 'sk', 'sv', 'ta', 'te', 'th', 'tr', 'uk', 'ur', 'vi', 'zh_CN', 'zh_HK', 'zh_TW', 'zh'];

package/es/constants/propConstants/popupPropConstants.js

@@ -0,0 +1,2 @@
+export const popupSize = ['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default'];
+export const popupPosition = ['bottomCenter', 'bottomLeftToRight', 'bottomCenterToRight', 'bottomRightToLeft', 'bottomCenterToLeft', 'topCenter', 'topLeftToRight', 'topCenterToRight', 'topRightToLeft', 'topCenterToLeft', 'rightTopToBottom', 'rightCenterToBottom', 'rightCenter', 'rightBottomToTop', 'rightCenterToTop', 'leftTopToBottom', 'leftCenterToBottom', 'leftCenter', 'leftBottomToTop', 'leftCenterToTop', 'bottomRight', 'bottomLeft', 'topRight', 'topLeft', 'rightBottom', 'rightTop', 'leftBottom', 'leftTop'];

package/es/im/IMAttachmentHandler/IMAttachmentHandler.js

@@ -0,0 +1,50 @@
+/** ** Libraries *** */
+import React from 'react';
+/** ** Components *** */
+
+import AttachmentHandler from "../../AttachmentHandler/AttachmentHandler";
+/** ** Hooks *** */
+
+import useIMAttachmentHandler from '@zohoim/chat-components-hooks/es/im/IMAttachmentHandler/useIMAttachmentHandler';
+/** ** Constants *** */
+
+import imAttachmentHandlerDefaultProps from "./props/defaultProps";
+import imAttachmentHandlerPropTypes from "./props/propTypes";
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+export default function IMAttachmentHandler(props) {
+  const {
+    customProps = dummyObject,
+    iconName,
+    iconSize,
+    iconTitle,
+    renderCustomIcon,
+    isMultiAttachment,
+    onAttach: propOnAttach,
+    attachmentType,
+    integrationService
+  } = props;
+  const {
+    attachmentHandlerProps = dummyObject
+  } = customProps;
+  const {
+    onAttach,
+    supportedTypes
+  } = useIMAttachmentHandler({
+    onAttach: propOnAttach,
+    attachmentType,
+    integrationService
+  });
+  return /*#__PURE__*/React.createElement(AttachmentHandler, {
+    iconName: iconName,
+    iconSize: iconSize,
+    iconTitle: iconTitle,
+    isMultiAttachment: isMultiAttachment,
+    onAttach: onAttach,
+    renderCustomIcon: renderCustomIcon,
+    supportedFileTypes: supportedTypes,
+    ...attachmentHandlerProps
+  });
+}
+IMAttachmentHandler.propTypes = imAttachmentHandlerPropTypes;
+IMAttachmentHandler.defaultProps = imAttachmentHandlerDefaultProps;
+IMAttachmentHandler.displayName = 'IMAttachmentHandler';

package/es/im/IMAttachmentHandler/index.js

@@ -0,0 +1 @@
+export { default as IMAttachmentHandler } from "./IMAttachmentHandler";

package/es/im/IMAttachmentHandler/props/defaultProps.js

@@ -0,0 +1,10 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const imAttachmentHandlerDefaultProps = {
+  customStyle: dummyObject,
+  iconName: 'ZD-TT-image',
+  iconSize: '14',
+  iconTitle: 'Upload',
+  isMultiAttachment: false
+};
+export default imAttachmentHandlerDefaultProps;

package/es/im/IMAttachmentHandler/props/propTypes.js

@@ -0,0 +1,28 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+/** ** Constants *** */
+
+import integrationConstants from '@zohoim/chat-components-utils/es/imUtils/constants/integrationConstants';
+const {
+  WHATSAPP,
+  TELEGRAM,
+  INSTAGRAM,
+  WECHAT,
+  TWILLIO,
+  LINE,
+  IM_TALK,
+  FACEBOOKMESSENGER
+} = integrationConstants;
+const imAttachmentHandlerPropTypes = {
+  customStyle: PropTypes.object,
+  iconName: PropTypes.string.isRequired,
+  iconSize: PropTypes.string,
+  iconTitle: PropTypes.string,
+  renderCustomIcon: PropTypes.func,
+  isMultiAttachment: PropTypes.bool,
+  onAttach: PropTypes.func,
+  customProps: PropTypes.object,
+  attachmentType: PropTypes.oneOf(['image', 'document', 'documentAndImage']),
+  integrationService: PropTypes.oneOf([WHATSAPP, TELEGRAM, INSTAGRAM, WECHAT, TWILLIO, LINE, IM_TALK, FACEBOOKMESSENGER])
+};
+export default imAttachmentHandlerPropTypes;

package/es/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css

@@ -64,9 +64,9 @@
 }
 
 .fontIcon :global .path1::before {
-  color: var(--imlib_chat_components_imIntegrationIcon_path0_color) !important;
+  color: var(--imlib_chat_components_imIntegrationIcon_path0_color);
 }
 
 .fontIcon :global .path2::before {
-  color: var(--imlib_chat_components_imIntegrationIcon_path1_color) !important;
+  color: var(--imlib_chat_components_imIntegrationIcon_path1_color);
 }