@zohoim/chat-components 0.0.19 → 0.0.21

package/es/ReplyBubbleContent/ReplyBubbleContent.js

@@ -23,7 +23,8 @@ export default function ReplyBubbleContent(props) {
     senderName,
     renderIcon,
     renderMessage,
-    isFailed
+    isFailed,
+    onClick
   } = props;
   /* External CSS Customization */
 
@@ -41,7 +42,8 @@ export default function ReplyBubbleContent(props) {
     align: "vertical",
     alignBox: "row",
     className: replyBubbleContentClass,
-    isCover: false
+    isCover: false,
+    onClick: onClick
   }, icon ? /*#__PURE__*/React.createElement(Box, {
     className: newStyle.iconWrapper
   }, /*#__PURE__*/React.createElement(Container, {

package/es/ReplyBubbleContent/props/propTypes.js

@@ -5,6 +5,7 @@ const replyBubbleContentPropTypes = {
   renderMessage: PropTypes.func.isRequired,
   senderName: PropTypes.string.isRequired,
   customStyle: PropTypes.object,
-  isFailed: PropTypes.bool
+  isFailed: PropTypes.bool,
+  onClick: PropTypes.func
 };
 export default replyBubbleContentPropTypes;

package/es/ReplyBubbleHeader/ReplyBubbleHeader.js

@@ -56,12 +56,18 @@ export default function ReplyBubbleHeader(props) {
     alignBox: "row",
     className: replyBubbleHeaderClass
   }, renderIcon(), /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "between",
+    alignBox: "row"
+  }, /*#__PURE__*/React.createElement(Box, {
     className: newStyle.replyText,
     flexible: true
   }, replyText), /*#__PURE__*/React.createElement(Box, {
     className: newStyle.time,
-    "data-title": tooltip
-  }, displayDateTime));
+    "data-title": tooltip,
+    flexible: true
+  }, displayDateTime))));
 }
 ReplyBubbleHeader.propTypes = replyBubbleHeaderPropTypes;
 ReplyBubbleHeader.defaultProps = replyBubbleHeaderDefaultProps;

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{
-  max-width: 40% ;
+.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/TextBubble/css/TextBubble.module.css

@@ -8,8 +8,6 @@
 }
 
 .moreText {
-  text-transform: uppercase;
-  font-size: var(--zd_font_size11) ;
   color: var(--imlib_chat_components_textBubble_see_more_color);
   cursor: pointer;
 }

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/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',
@@ -20,11 +19,8 @@ export default {
       fileName_color: '#e2e4e6',
       fileName_color_failed: failedColor,
       fileSize_color: '#788190',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
-    // AttachmentIcon: {},
-    // Audio: {},
-    // AudioBubble: {},
     articleBubble: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
@@ -38,28 +34,25 @@ export default {
     imAutoMessageInfo: {
       text_color: '#828994'
     },
-    // IMInfoBubble: {},
     imIntegrationIcon,
     imTtIcon,
-    // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
     imMessageMeta: {
       time_color: '#a8b0bd'
     },
     imPermaLink: {
       url_color: '#479dff'
     },
-    // IMReplyBubble: {},
-    // IMTextBubble: {},
     imageBubble: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
       alt_text_color: '#e2e4e6',
-      alt_text_color_failed: failedColor
+      alt_text_color_failed: failedColor,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
     },
-    // IMReplyBubble: {},
-    // InfoBubble: {},
-    // LazyLoadImage: {},
     locationBubble: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
@@ -68,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',
@@ -92,8 +78,10 @@ export default {
       read_color: '#479dff',
       failed_color: messageStatusFailedColor
     },
-    // MoreActionItem: {},
-    // ReplyBubble: {},
+    replyBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
     replyBubbleContent: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
@@ -119,8 +107,10 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryBlue,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    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',
@@ -20,11 +19,8 @@ export default {
       fileName_color: '#e2e4e6',
       fileName_color_failed: failedColor,
       fileSize_color: '#788190',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
-    // AttachmentIcon: {},
-    // Audio: {},
-    // AudioBubble: {},
     articleBubble: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
@@ -38,28 +34,25 @@ export default {
     imAutoMessageInfo: {
       text_color: '#828994'
     },
-    // IMInfoBubble: {},
     imIntegrationIcon,
     imTtIcon,
-    // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
     imMessageMeta: {
       time_color: '#a8b0bd'
     },
     imPermaLink: {
       url_color: '#45a159'
     },
-    // IMReplyBubble: {},
-    // IMTextBubble: {},
     imageBubble: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
       alt_text_color: '#e2e4e6',
-      alt_text_color_failed: failedColor
+      alt_text_color_failed: failedColor,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
     },
-    // IMReplyBubble: {},
-    // InfoBubble: {},
-    // LazyLoadImage: {},
     locationBubble: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
@@ -68,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',
@@ -91,8 +77,10 @@ export default {
       read_color: '#45a159',
       failed_color: messageStatusFailedColor
     },
-    // MoreActionItem: {},
-    // ReplyBubble: {},
+    replyBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
     replyBubbleContent: {
       bg_color: 'hsl(191.43deg 21.65% 13.02%)',
       bg_color_failed: failedBg,
@@ -118,8 +106,10 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryGreen,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    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',
@@ -20,11 +19,8 @@ export default {
       fileName_color: '#e2e4e6',
       fileName_color_failed: failedColor,
       fileSize_color: '#788190',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
-    // AttachmentIcon: {},
-    // Audio: {},
-    // AudioBubble: {},
     articleBubble: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
@@ -38,28 +34,25 @@ export default {
     imAutoMessageInfo: {
       text_color: '#828994'
     },
-    // IMInfoBubble: {},
     imIntegrationIcon,
     imTtIcon,
-    // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
     imMessageMeta: {
       time_color: '#a8b0bd'
     },
     imPermaLink: {
       url_color: '#ff801f'
     },
-    // IMReplyBubble: {},
-    // IMTextBubble: {},
     imageBubble: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
       alt_text_color: '#e2e4e6',
-      alt_text_color_failed: failedColor
+      alt_text_color_failed: failedColor,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
     },
-    // IMReplyBubble: {},
-    // InfoBubble: {},
-    // LazyLoadImage: {},
     locationBubble: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
@@ -68,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',
@@ -91,8 +77,10 @@ export default {
       read_color: '#ff801f',
       failed_color: messageStatusFailedColor
     },
-    // MoreActionItem: {},
-    // ReplyBubble: {},
+    replyBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
     replyBubbleContent: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
@@ -118,8 +106,10 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryOrange,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    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',
@@ -20,11 +19,8 @@ export default {
       fileName_color: '#e2e4e6',
       fileName_color_failed: failedColor,
       fileSize_color: '#788190',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
-    // AttachmentIcon: {},
-    // Audio: {},
-    // AudioBubble: {},
     articleBubble: {
       bg_color: 'hsl(258.46deg 12.62% 16.2%)',
       bg_color_failed: failedBg,
@@ -38,28 +34,25 @@ export default {
     imAutoMessageInfo: {
       text_color: '#828994'
     },
-    // IMInfoBubble: {},
     imIntegrationIcon,
     imTtIcon,
-    // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
     imMessageMeta: {
       time_color: '#a8b0bd'
     },
     imPermaLink: {
       url_color: '#e94f4f'
     },
-    // IMReplyBubble: {},
-    // IMTextBubble: {},
     imageBubble: {
       bg_color: 'hsl(258.46deg 12.62% 16.2%)',
       bg_color_failed: failedBg,
       alt_text_color: '#e2e4e6',
-      alt_text_color_failed: failedColor
+      alt_text_color_failed: failedColor,
+      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,
@@ -68,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',
@@ -91,8 +77,10 @@ export default {
       read_color: '#e94f4f',
       failed_color: messageStatusFailedColor
     },
-    // MoreActionItem: {},
-    // ReplyBubble: {},
+    replyBubble: {
+      border_color: 'hsl(258.46deg 12.62% 23.2%)',
+      border_color_failed: failedBdr
+    },
     replyBubbleContent: {
       bg_color: 'hsl(258.46deg 12.62% 16.2%)',
       bg_color_failed: failedBg,
@@ -118,8 +106,10 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryRed,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    videoBubble: {
+      border_color: 'hsl(258.46deg 12.62% 23.2%)',
+      border_color_failed: failedBdr
+    }
   }
 };