@zohoim/chat-components 0.0.20 → 0.0.24

package/es/ActionIcon/ActionIcon.js

@@ -6,13 +6,14 @@ import React, { useCallback, useMemo } from 'react';
 
 import ActionIconWrapper from '../ActionIconWrapper/ActionIconWrapper';
 /** ** Icons *** */
+// import ReplyIcon from '@zohodesk/icon/es/general/Reply';
 
-import ReplyIcon from '@zohodesk/icon/es/general/Reply';
 import ReloadIcon from '@zohodesk/icon/es/general/Reload';
 import CopyIcon from '@zohodesk/icon/es/general/Copy';
 import DownloadIcon from '@zohodesk/icon/es/general/Cloud';
 import DeleteIcon from '@zohodesk/icon/es/general/Delete';
 import ForwardIcon from '@zohodesk/icon/es/channels/EmailForward';
+import ReplyIcon from '../icons/iconSrc/common/Reply';
 /** ** Hooks *** */
 
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';

package/es/AttachmentBubble/AttachmentBubble.js

@@ -27,6 +27,7 @@ export default function AttachmentBubble(props) {
     customProps,
     attachmentDetails,
     isFailed,
+    isSending,
     onClick: propOnClick
   } = props;
   const {
@@ -51,7 +52,8 @@ export default function AttachmentBubble(props) {
   const {
     attachmentBubbleClass
   } = cssJSLogic({
-    isFailed
+    isFailed,
+    isSending
   }, newStyle);
   return /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",

package/es/AttachmentBubble/css/AttachmentBubble.module.css

@@ -5,9 +5,18 @@
   border: 1px solid var(--imlib_chat_components_attachmentBubble_border_color);
 }
 
-.failedAttachmentBubble{
-  background-color: var(--imlib_chat_components_attachmentBubble_bg_color_failed);
-  border-color: var(--imlib_chat_components_attachmentBubble_border_color_failed);
+.failedAttachmentBubble {
+  background-color: var(
+    --imlib_chat_components_attachmentBubble_bg_color_failed
+  );
+  border-color: var(
+    --imlib_chat_components_attachmentBubble_border_color_failed
+  );
+}
+
+.sendingdAttachmentBubble {
+  opacity: 0.1;
+  cursor: default;
 }
 
 .attachmentBubbleCursor {
@@ -30,11 +39,12 @@
   border-left: 1px solid    var(--imlib_chat_components_attachmentBubble_border_color);
 }
 
-.failedAttachmentBubble .attachmentBubbleIcon{
-  border-color: var(--imlib_chat_components_attachmentBubble_border_color_failed);
+.failedAttachmentBubble .attachmentBubbleIcon {
+  border-color: var(
+    --imlib_chat_components_attachmentBubble_border_color_failed
+  );
 }
 
-
 .attachmentBubbleIcon, .attachmentBubbleContent {
   padding: var(--zd_size10) ;
-}
+}

package/es/AttachmentBubble/css/cssJSLogic.js

@@ -1,12 +1,14 @@
 import { compileClassNames } from '@zohodesk/utils';
 export default function cssJSLogic(props, style) {
   const {
-    isFailed
+    isFailed,
+    isSending
   } = props;
   const attachmentBubbleClass = compileClassNames({
     [style.attachmentBubble]: true,
     [style.failedAttachmentBubble]: isFailed,
-    [style.attachmentBubbleCursor]: true
+    [style.attachmentBubbleCursor]: !isSending,
+    [style.sendingdAttachmentBubble]: isSending
   });
   return {
     attachmentBubbleClass

package/es/AttachmentBubble/props/propTypes.js

@@ -12,6 +12,7 @@ const attachmentBubblePropTypes = {
   }),
   customStyle: PropTypes.object,
   isFailed: PropTypes.bool,
+  isSending: PropTypes.bool,
   onClick: PropTypes.func
 };
 export default attachmentBubblePropTypes;

package/es/LocationBubble/LocationBubble.js

@@ -53,7 +53,8 @@ export default function LocationBubble(props) {
     className: newStyle.textWrapper,
     flexible: true
   }, /*#__PURE__*/React.createElement("a", {
-    className: newStyle.textLink
+    className: newStyle.textLink,
+    "data-title": locationUrl
   }, locationUrl))));
 }
 LocationBubble.propTypes = locationBubblePropTypes;

package/es/LocationBubble/css/LocationBubble.module.css

@@ -32,9 +32,15 @@
 
 .textLink {
   display: block;
-  composes: dotted from "../../css/common.module.css";
   color: var(--imlib_chat_components_locationBubble_url_color);
-  font-family: var(--zd_semibold);
+  word-break: break-word;
+  word-wrap: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.4;
+  white-space: normal;
 }
 
 .failedLocationBubble .textLink{

package/es/MessageActionsMore/MessageActionsMore.js

@@ -9,6 +9,7 @@ import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
 import messageActionsMoreDefaultProps from './props/defaultProps';
 import messageActionsMorePropTypes from './props/propTypes';
 import { MSG_ACTION_POPUP_PORTAL } from '../constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 /** ** Methods *** */
 
 import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
@@ -75,6 +76,7 @@ function MessageActionsMoreComp(props) {
   }, moreIcon) : null, isRenderPopup ? /*#__PURE__*/React.createElement(DropBox, {
     boxPosition: position,
     customClass: popupClass,
+    customStyle: dummyObject,
     getRef: getContainerRef,
     isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
     isActive: isPopupReady,

package/es/MessageAvatar/css/MessageAvatar.module.css

@@ -18,4 +18,6 @@
 
 .avatar {
   /* Use this class name for external customization  */
+  width: var(--zd_size32) ;
+  height: var(--zd_size32) ;
 }

package/es/MessageBubble/css/MessageBubble.module.css

@@ -3,7 +3,7 @@
   --messageBubble-message_owner_gap: 13px;
   --messageBox-max_width: 410px;
   --messageBox-footer_fontSize: var(--zd_font_size11);
-  --messageBox-owner_width: var(--zd_size34);
+  --messageBox-owner_width: var(--zd_size32);
 }
 
 .messageBubble {
@@ -39,6 +39,13 @@
   flex-direction: column;
   position: absolute;
   top:0 ;
+  visibility: hidden;
+  opacity: 0;
+}
+
+.messageBubble:hover .messageActionWrapper{
+  visibility: visible;
+  opacity: 1;
 }
 
 .messageActionWrapperEnd {

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

@@ -3,6 +3,7 @@
   flex-shrink: 0;
   width: var(--zd_size20)  !important;
   height: var(--zd_size20)  !important;
+  cursor: default;
 }[dir=ltr] .replyIcon {
   margin-right: var(--zd_size5) ;
 }[dir=rtl] .replyIcon {
@@ -22,22 +23,22 @@
   margin-left: var(--zd_size5) ;
 }
 
-.failedReplyBubbleHeader .replyText{
+.failedReplyBubbleHeader .replyText {
   color: var(--imlib_chat_components_replyBubbleHeader_text_color_failed);
 }
 
 .replyText,
-.time{
-  composes: dotted from "../../css/common.module.css";
+.time {
+  composes: dotted from '../../css/common.module.css';
   max-width: max-content;
 }
 
-.time{
+.time {
   font-size: var(--zd_font_size11) ;
-  letter-spacing: .4px;
+  letter-spacing: 0.4px;
   color: var(--imlib_chat_components_replyBubbleHeader_time_color);
 }
 
-.failedReplyBubbleHeader .time{
+.failedReplyBubbleHeader .time {
   color: var(--imlib_chat_components_replyBubbleHeader_time_color_failed);
-}
+}

package/es/Theme/ThemeAssets.js

@@ -1,42 +1,63 @@
 /** ** Libraries *** */
-import PropTypes from 'prop-types'; // Component Package default mode & themes
+import PropTypes from 'prop-types';
+import '@zohodesk/components/lib/common/boxShadow.module.css';
+/* component pkg - default mode, themes */
 
-import '@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/default/mode/defaultMode.module.css'; // Component Package dark mode & themes
+import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_CTA_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_CTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/green/green_CTA_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/green/green_CTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/orange/orange_CTA_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/orange/orange_CTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/red/red_CTA_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/red/red_CTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_CTA_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_CTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/mode/Component_LightMode.module.css';
+import '@zohodesk/components/assets/Contrast/lightContrastLightness.module.css';
+/* component pkg - dark mode, themes */
 
-import '@zohodesk/components/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/mode/darkMode.module.css';
-/* pure dark mode & theme css */
+import '@zohodesk/components/assets/Appearance/dark/themes/blue/blue_CTA_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/blue/blue_CTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/green/green_CTA_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/green/green_CTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/orange/orange_CTA_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/orange/orange_CTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/red/red_CTA_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/red/red_CTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/mode/Component_DarkMode.module.css';
+import '@zohodesk/components/assets/Contrast/darkContrastLightness.module.css';
+/* component pkg - pure dark mode, themes */
 
-import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/mode/pureDarkMode.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css';
+import '@zohodesk/components/assets/Contrast/pureDarkContrastLightness.module.css';
 /** ** Desk Components Assets *** */
 
 import '@zohodesk/variables/assets/colorVariables.module.css';

package/es/Theme/props/defaultProps.js

@@ -5,8 +5,6 @@ const themeWrapperDefaultProps = {
   mode: 'LIGHT',
   theme: 'BLUE',
   needTooltip: true,
-  modeKey: 'data-mode',
-  themeKey: 'data-theme',
   tooltipCustomStyle: dummyObject
 };
 export default themeWrapperDefaultProps;

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

@@ -4,7 +4,6 @@ import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeCol
 export default {
   library: 'chat_components',
   variables: {
-    // ActionIcon: {},
     actionIconWrapper: {
       color: actionIconWrapperColor,
       bg_color: '#2c3b4d',
@@ -22,9 +21,6 @@ export default {
       fileSize_color: '#788190',
       fileSize_color_failed: '#788190'
     },
-    // AttachmentIcon: {},
-    // Audio: {},
-    // AudioBubble: {},
     articleBubble: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
@@ -38,10 +34,8 @@ export default {
     imAutoMessageInfo: {
       text_color: '#828994'
     },
-    // IMInfoBubble: {},
     imIntegrationIcon,
     imTtIcon,
-    // IMMessage: {},
     imMessageContent: {
       text_color: '#a8b0bd'
     },
@@ -51,8 +45,6 @@ export default {
     imPermaLink: {
       url_color: '#479dff'
     },
-    // IMReplyBubble: {},
-    // IMTextBubble: {},
     imageBubble: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
@@ -61,9 +53,6 @@ export default {
       border_color: '#2d3748',
       border_color_failed: failedBdr
     },
-    // IMReplyBubble: {},
-    // InfoBubble: {},
-    // LazyLoadImage: {},
     locationBubble: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
@@ -72,13 +61,6 @@ export default {
       url_color: primaryBlue,
       url_color_failed: failedUrlColor
     },
-    // MediaBubbleWrapper: {},
-    // Message: {},
-    // MessageAction: {},
-    // MessageActions: {},
-    // MessageActionsMore: {},
-    // MessageActionsWrapper: {},
-    // MessageAvatar: {},
     messageBox: {
       incoming_bg_color: incomingBubbleBgColor,
       outgoing_bg_color: '#2c3b4d',
@@ -96,7 +78,6 @@ export default {
       read_color: '#479dff',
       failed_color: messageStatusFailedColor
     },
-    // MoreActionItem: {},
     replyBubble: {
       border_color: '#2d3748',
       border_color_failed: failedBdr
@@ -127,7 +108,6 @@ export default {
       url_color: primaryBlue,
       url_color_failed: failedUrlColor
     },
-    // Video: {},
     videoBubble: {
       border_color: '#2d3748',
       border_color_failed: failedBdr

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

@@ -4,7 +4,6 @@ import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeCol
 export default {
   library: 'chat_components',
   variables: {
-    // ActionIcon: {},
     actionIconWrapper: {
       color: actionIconWrapperColor,
       bg_color: '#26373b',
@@ -22,9 +21,6 @@ export default {
       fileSize_color: '#788190',
       fileSize_color_failed: '#788190'
     },
-    // AttachmentIcon: {},
-    // Audio: {},
-    // AudioBubble: {},
     articleBubble: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
@@ -38,10 +34,8 @@ export default {
     imAutoMessageInfo: {
       text_color: '#828994'
     },
-    // IMInfoBubble: {},
     imIntegrationIcon,
     imTtIcon,
-    // IMMessage: {},
     imMessageContent: {
       text_color: '#a8b0bd'
     },
@@ -51,8 +45,6 @@ export default {
     imPermaLink: {
       url_color: '#45a159'
     },
-    // IMReplyBubble: {},
-    // IMTextBubble: {},
     imageBubble: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
@@ -61,9 +53,6 @@ export default {
       border_color: '#2d3748',
       border_color_failed: failedBdr
     },
-    // IMReplyBubble: {},
-    // InfoBubble: {},
-    // LazyLoadImage: {},
     locationBubble: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
@@ -72,13 +61,6 @@ export default {
       url_color: primaryGreen,
       url_color_failed: failedUrlColor
     },
-    // MediaBubbleWrapper: {},
-    // Message: {},
-    // MessageAction: {},
-    // MessageActions: {},
-    // MessageActionsMore: {},
-    // MessageActionsWrapper: {},
-    // MessageAvatar: {},
     messageBox: {
       incoming_bg_color: incomingBubbleBgColor,
       outgoing_bg_color: '#26373b',
@@ -95,7 +77,6 @@ export default {
       read_color: '#45a159',
       failed_color: messageStatusFailedColor
     },
-    // MoreActionItem: {},
     replyBubble: {
       border_color: '#2d3748',
       border_color_failed: failedBdr
@@ -126,7 +107,6 @@ export default {
       url_color: primaryGreen,
       url_color_failed: failedUrlColor
     },
-    // Video: {},
     videoBubble: {
       border_color: '#2d3748',
       border_color_failed: failedBdr

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

@@ -4,7 +4,6 @@ import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeCol
 export default {
   library: 'chat_components',
   variables: {
-    // ActionIcon: {},
     actionIconWrapper: {
       color: actionIconWrapperColor,
       bg_color: '#323136',
@@ -22,9 +21,6 @@ export default {
       fileSize_color: '#788190',
       fileSize_color_failed: '#788190'
     },
-    // AttachmentIcon: {},
-    // Audio: {},
-    // AudioBubble: {},
     articleBubble: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
@@ -38,10 +34,8 @@ export default {
     imAutoMessageInfo: {
       text_color: '#828994'
     },
-    // IMInfoBubble: {},
     imIntegrationIcon,
     imTtIcon,
-    // IMMessage: {},
     imMessageContent: {
       text_color: '#a8b0bd'
     },
@@ -51,8 +45,6 @@ export default {
     imPermaLink: {
       url_color: '#ff801f'
     },
-    // IMReplyBubble: {},
-    // IMTextBubble: {},
     imageBubble: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
@@ -61,9 +53,6 @@ export default {
       border_color: '#2d3748',
       border_color_failed: failedBdr
     },
-    // IMReplyBubble: {},
-    // InfoBubble: {},
-    // LazyLoadImage: {},
     locationBubble: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
@@ -72,13 +61,6 @@ export default {
       url_color: primaryOrange,
       url_color_failed: failedUrlColor
     },
-    // MediaBubbleWrapper: {},
-    // Message: {},
-    // MessageAction: {},
-    // MessageActions: {},
-    // MessageActionsMore: {},
-    // MessageActionsWrapper: {},
-    // MessageAvatar: {},
     messageBox: {
       incoming_bg_color: incomingBubbleBgColor,
       outgoing_bg_color: '#323136',
@@ -95,7 +77,6 @@ export default {
       read_color: '#ff801f',
       failed_color: messageStatusFailedColor
     },
-    // MoreActionItem: {},
     replyBubble: {
       border_color: '#2d3748',
       border_color_failed: failedBdr
@@ -126,7 +107,6 @@ export default {
       url_color: primaryOrange,
       url_color_failed: failedUrlColor
     },
-    // Video: {},
     videoBubble: {
       border_color: '#2d3748',
       border_color_failed: failedBdr

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

@@ -4,7 +4,6 @@ import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeCol
 export default {
   library: 'chat_components',
   variables: {
-    // ActionIcon: {},
     actionIconWrapper: {
       color: actionIconWrapperColor,
       bg_color: '#312d3a',
@@ -22,9 +21,6 @@ export default {
       fileSize_color: '#788190',
       fileSize_color_failed: '#788190'
     },
-    // AttachmentIcon: {},
-    // Audio: {},
-    // AudioBubble: {},
     articleBubble: {
       bg_color: 'hsl(258.46deg 12.62% 16.2%)',
       bg_color_failed: failedBg,
@@ -38,10 +34,8 @@ export default {
     imAutoMessageInfo: {
       text_color: '#828994'
     },
-    // IMInfoBubble: {},
     imIntegrationIcon,
     imTtIcon,
-    // IMMessage: {},
     imMessageContent: {
       text_color: '#a8b0bd'
     },
@@ -51,8 +45,6 @@ export default {
     imPermaLink: {
       url_color: '#e94f4f'
     },
-    // IMReplyBubble: {},
-    // IMTextBubble: {},
     imageBubble: {
       bg_color: 'hsl(258.46deg 12.62% 16.2%)',
       bg_color_failed: failedBg,
@@ -61,9 +53,6 @@ export default {
       border_color: 'hsl(258.46deg 12.62% 23.2%)',
       border_color_failed: failedBdr
     },
-    // IMReplyBubble: {},
-    // InfoBubble: {},
-    // LazyLoadImage: {},
     locationBubble: {
       bg_color: 'hsl(258.46deg 12.62% 16.2%)',
       bg_color_failed: failedBg,
@@ -72,13 +61,6 @@ export default {
       url_color: primaryRed,
       url_color_failed: failedUrlColor
     },
-    // MediaBubbleWrapper: {},
-    // Message: {},
-    // MessageAction: {},
-    // MessageActions: {},
-    // MessageActionsMore: {},
-    // MessageActionsWrapper: {},
-    // MessageAvatar: {},
     messageBox: {
       incoming_bg_color: incomingBubbleBgColor,
       outgoing_bg_color: '#312d3a',
@@ -95,7 +77,6 @@ export default {
       read_color: '#e94f4f',
       failed_color: messageStatusFailedColor
     },
-    // MoreActionItem: {},
     replyBubble: {
       border_color: 'hsl(258.46deg 12.62% 23.2%)',
       border_color_failed: failedBdr
@@ -126,7 +107,6 @@ export default {
       url_color: primaryRed,
       url_color_failed: failedUrlColor
     },
-    // Video: {},
     videoBubble: {
       border_color: 'hsl(258.46deg 12.62% 23.2%)',
       border_color_failed: failedBdr