@zohoim/chat-components 0.0.18 → 0.0.20

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

@@ -29,10 +29,10 @@
 .replyText,
 .time{
   composes: dotted from "../../css/common.module.css";
+  max-width: max-content;
 }
 
 .time{
-  max-width: 40% ;
   font-size: var(--zd_font_size11) ;
   letter-spacing: .4px;
   color: var(--imlib_chat_components_replyBubbleHeader_time_color);

package/es/TextBubble/css/TextBubble.module.css

@@ -3,18 +3,20 @@
   color: var(--imlib_chat_components_textBubble_text_color);
 }
 
-.failedTextBubble{
+.failedTextBubble {
   color: var(--imlib_chat_components_textBubble_text_color_failed);
 }
 
 .moreText {
-  text-transform: uppercase;
-  font-size: var(--zd_font_size11) ;
   color: var(--imlib_chat_components_textBubble_see_more_color);
   cursor: pointer;
 }
 
-.failedMoreText{
+.moreText:hover {
+  text-decoration: underline;
+}
+
+.failedMoreText {
   color: var(--imlib_chat_components_textBubble_see_more_color_failed);
 }
 
@@ -28,6 +30,6 @@
   /* !important for Desk css overwrite */
 }
 
-.failedTextBubble a{
+.failedTextBubble a {
   color: var(--imlib_chat_components_textBubble_url_color_failed);
-}
+}

package/es/Theme/themeVariables/commonThemeColorVariable.js

@@ -9,4 +9,8 @@ export const imIntegrationIcon = {
   instagram_color: 'red',
   asap_color: '#0a73eb'
 };
+export const imTtIcon = {
+  path0_color: '#ffffff40',
+  path1_color: '#fff'
+};
 export const messagetextColor = '#e2e4e6';

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

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -20,7 +20,7 @@ export default {
       fileName_color: '#e2e4e6',
       fileName_color_failed: failedColor,
       fileSize_color: '#788190',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
     // AttachmentIcon: {},
     // Audio: {},
@@ -40,8 +40,11 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
     imMessageMeta: {
       time_color: '#a8b0bd'
     },
@@ -54,7 +57,9 @@ export default {
       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: {},
@@ -92,7 +97,10 @@ export default {
       failed_color: messageStatusFailedColor
     },
     // MoreActionItem: {},
-    // ReplyBubble: {},
+    replyBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
     replyBubbleContent: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
@@ -118,8 +126,11 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryBlue,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    // Video: {},
+    videoBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    }
   }
 };

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

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -20,7 +20,7 @@ export default {
       fileName_color: '#e2e4e6',
       fileName_color_failed: failedColor,
       fileSize_color: '#788190',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
     // AttachmentIcon: {},
     // Audio: {},
@@ -40,8 +40,11 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
     imMessageMeta: {
       time_color: '#a8b0bd'
     },
@@ -54,7 +57,9 @@ export default {
       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: {},
@@ -91,7 +96,10 @@ export default {
       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,
@@ -117,8 +125,11 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryGreen,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    // Video: {},
+    videoBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    }
   }
 };

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

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -20,7 +20,7 @@ export default {
       fileName_color: '#e2e4e6',
       fileName_color_failed: failedColor,
       fileSize_color: '#788190',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
     // AttachmentIcon: {},
     // Audio: {},
@@ -40,8 +40,11 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
     imMessageMeta: {
       time_color: '#a8b0bd'
     },
@@ -54,7 +57,9 @@ export default {
       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: {},
@@ -91,7 +96,10 @@ export default {
       failed_color: messageStatusFailedColor
     },
     // MoreActionItem: {},
-    // ReplyBubble: {},
+    replyBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
     replyBubbleContent: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
@@ -117,8 +125,11 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryOrange,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    // Video: {},
+    videoBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    }
   }
 };

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

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -20,7 +20,7 @@ export default {
       fileName_color: '#e2e4e6',
       fileName_color_failed: failedColor,
       fileSize_color: '#788190',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
     // AttachmentIcon: {},
     // Audio: {},
@@ -40,8 +40,11 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
     imMessageMeta: {
       time_color: '#a8b0bd'
     },
@@ -54,7 +57,9 @@ export default {
       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: {},
@@ -91,7 +96,10 @@ export default {
       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,
@@ -117,8 +125,11 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryRed,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    // Video: {},
+    videoBubble: {
+      border_color: 'hsl(258.46deg 12.62% 23.2%)',
+      border_color_failed: failedBdr
+    }
   }
 };

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

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryYellow, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
+import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -20,7 +20,7 @@ export default {
       fileName_color: '#e2e4e6',
       fileName_color_failed: failedColor,
       fileSize_color: '#788190',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
     // AttachmentIcon: {},
     // Audio: {},
@@ -40,8 +40,11 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
     imMessageMeta: {
       time_color: '#a8b0bd'
     },
@@ -54,7 +57,9 @@ export default {
       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: {},
@@ -91,7 +96,10 @@ export default {
       failed_color: messageStatusFailedColor
     },
     // MoreActionItem: {},
-    // ReplyBubble: {},
+    replyBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
     replyBubbleContent: {
       bg_color: '#232b38',
       bg_color_failed: failedBg,
@@ -117,8 +125,11 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryYellow,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    // Video: {},
+    videoBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    }
   }
 };

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryBlue, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon } from './commonColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryBlue, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -19,7 +19,7 @@ export default {
       fileName_color: black,
       fileName_color_failed: failedColor,
       fileSize_color: '#5a616f',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
     // AttachmentIcon: {},
     // Audio: {},
@@ -39,8 +39,11 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#5a616f'
+    },
     imMessageMeta: {
       time_color: '#5a616f'
     },
@@ -53,7 +56,9 @@ export default {
       bg_color: white,
       bg_color_failed: failedBg,
       alt_text_color: black,
-      alt_text_color_failed: failedColor
+      alt_text_color_failed: failedColor,
+      border_color: '#ebf0f5',
+      border_color_failed: failedBdr
     },
     // IMReplyBubble: {},
     // InfoBubble: {},
@@ -90,7 +95,10 @@ export default {
       failed_color: messageStatusFailedColor
     },
     // MoreActionItem: {},
-    // ReplyBubble: {},
+    replyBubble: {
+      border_color: '#ebf0f5',
+      border_color_failed: failedBdr
+    },
     replyBubbleContent: {
       bg_color: white,
       bg_color_failed: failedBg,
@@ -116,8 +124,11 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryBlue,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    // Video: {},
+    videoBubble: {
+      border_color: '#ebf0f5',
+      border_color_failed: failedBdr
+    }
   }
 };

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

@@ -18,8 +18,8 @@ export const failedLine = '#ffd6d6';
 export const failedColor = '#000';
 export const failedUrlColor = '#0a73eb';
 export const imIntegrationIcon = {
-  path0_color: 'rgba(200,203,220,0.7)',
-  path1_color: '#000',
+  path0_color: '#ffffff40',
+  path1_color: '#fff',
   whatsapp_color: '#24d366',
   telegram_color: '#4fa7d8',
   wechat_color: '#2dc100',
@@ -27,4 +27,8 @@ export const imIntegrationIcon = {
   twillio_color: '#f22f46',
   instagram_color: 'red',
   asap_color: '#0a73eb'
+};
+export const imTtIcon = {
+  path0_color: 'rgba(200,203,220,0.7)',
+  path1_color: '#000'
 };

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryGreen, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon } from './commonColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryGreen, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -19,7 +19,7 @@ export default {
       fileName_color: black,
       fileName_color_failed: failedColor,
       fileSize_color: '#5a616f',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
     // AttachmentIcon: {},
     // Audio: {},
@@ -39,8 +39,11 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#5a616f'
+    },
     imMessageMeta: {
       time_color: '#5a616f'
     },
@@ -53,7 +56,9 @@ export default {
       bg_color: white,
       bg_color_failed: failedBg,
       alt_text_color: black,
-      alt_text_color_failed: failedColor
+      alt_text_color_failed: failedColor,
+      border_color: '#ebf0f5',
+      border_color_failed: failedBdr
     },
     // IMReplyBubble: {},
     // InfoBubble: {},
@@ -90,7 +95,10 @@ export default {
       failed_color: messageStatusFailedColor
     },
     // MoreActionItem: {},
-    // ReplyBubble: {},
+    replyBubble: {
+      border_color: '#ebf0f5',
+      border_color_failed: failedBdr
+    },
     replyBubbleContent: {
       bg_color: white,
       bg_color_failed: failedBg,
@@ -116,8 +124,11 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryGreen,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    // Video: {},
+    videoBubble: {
+      border_color: '#ebf0f5',
+      border_color_failed: failedBdr
+    }
   }
 };

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryOrange, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon } from './commonColorVariable';
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryOrange, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from './commonColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -19,7 +19,7 @@ export default {
       fileName_color: black,
       fileName_color_failed: failedColor,
       fileSize_color: '#5a616f',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
     // AttachmentIcon: {},
     // Audio: {},
@@ -39,8 +39,11 @@ export default {
     },
     // IMInfoBubble: {},
     imIntegrationIcon,
+    imTtIcon,
     // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#5a616f'
+    },
     imMessageMeta: {
       time_color: '#5a616f'
     },
@@ -53,7 +56,9 @@ export default {
       bg_color: white,
       bg_color_failed: failedBg,
       alt_text_color: black,
-      alt_text_color_failed: failedColor
+      alt_text_color_failed: failedColor,
+      border_color: '#ebf0f5',
+      border_color_failed: failedBdr
     },
     // IMReplyBubble: {},
     // InfoBubble: {},
@@ -90,7 +95,10 @@ export default {
       failed_color: messageStatusFailedColor
     },
     // MoreActionItem: {},
-    // ReplyBubble: {},
+    replyBubble: {
+      border_color: '#ebf0f5',
+      border_color_failed: failedBdr
+    },
     replyBubbleContent: {
       bg_color: white,
       bg_color_failed: failedBg,
@@ -116,8 +124,11 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryOrange,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    // Video: {},
+    videoBubble: {
+      border_color: '#ebf0f5',
+      border_color_failed: failedBdr
+    }
   }
 };