botframework-webchat-component 4.13.0 → 4.15.0

package/src/Styles/StyleSet/BasicTranscript.ts

@@ -26,9 +26,12 @@ export default function createBasicTranscriptStyleSet({
           borderStyle: transcriptActivityVisualKeyboardIndicatorStyle,
           borderWidth: transcriptActivityVisualKeyboardIndicatorWidth,
           boxSizing: 'border-box',
-          height: `calc(100% - ${paddingRegular}px)`,
+          height: `calc(100% - ${paddingRegular / 2}px)`,
           left: 0,
-          margin: paddingRegular / 2,
+          marginBottom: 0,
+          marginLeft: paddingRegular / 2,
+          marginRight: paddingRegular / 2,
+          marginTop: 0,
           pointerEvents: 'none',
           position: 'absolute',
           top: 0,
@@ -36,40 +39,51 @@ export default function createBasicTranscriptStyleSet({
         }
       },
 
-      '&:focus .webchat__basic-transcript__focus-indicator, .webchat__basic-transcript__terminator:focus + .webchat__basic-transcript__focus-indicator': {
-        height: '100%',
-        borderColor: transcriptVisualKeyboardIndicatorColor,
-        borderStyle: transcriptVisualKeyboardIndicatorStyle,
-        borderWidth: transcriptVisualKeyboardIndicatorWidth,
-        boxSizing: 'border-box',
-        pointerEvents: 'none',
-        position: 'absolute',
-        top: 0,
-        width: '100%'
-      },
+      '&:focus .webchat__basic-transcript__focus-indicator, .webchat__basic-transcript__terminator:focus + .webchat__basic-transcript__focus-indicator':
+        {
+          height: '100%',
+          borderColor: transcriptVisualKeyboardIndicatorColor,
+          borderStyle: transcriptVisualKeyboardIndicatorStyle,
+          borderWidth: transcriptVisualKeyboardIndicatorWidth,
+          boxSizing: 'border-box',
+          pointerEvents: 'none',
+          position: 'absolute',
+          top: 0,
+          width: '100%'
+        },
 
       '& .webchat__basic-transcript__activity': {
-        paddingTop: paddingRegular,
+        paddingTop: paddingRegular / 2,
         position: 'relative',
 
+        '&:first-child': {
+          marginTop: paddingRegular / 2
+        },
+
         '&:not(:first-child)': {
-          marginTop: -paddingRegular
+          marginTop: -paddingRegular / 2
         }
       },
 
-      '& .webchat__basic-transcript__activity-box:not(:empty)': {
-        paddingBottom: paddingRegular
-      },
-
-      '& .webchat__basic-transcript__activity-sentinel': {
+      // When the activity is focused as active descendant, `scrollIntoView()` will scroll this invisible <div> into view.
+      '& .webchat__basic-transcript__activity-active-descendant': {
         height: '100%',
         left: 0,
+        marginTop: -paddingRegular / 2,
+        paddingBottom: paddingRegular / 2,
+        // The bounding box is expanded to both top and bottom to scroll focus indicator into view.
+        // We should ignore clicks to make sure this expansion don't register click as focus.
+        // Otherwise, when clicking on the very bottom edge of the activity, it will focus on next activity instead.
         pointerEvents: 'none',
         position: 'absolute',
         top: 0,
         width: '100%'
       },
 
+      '& .webchat__basic-transcript__activity-body:not(:empty)': {
+        paddingBottom: paddingRegular
+      },
+
       '& .webchat__basic-transcript__terminator': {
         bottom: 0,
         height: 0,

package/src/Styles/StyleSet/Bubble.ts

@@ -1,4 +1,3 @@
-/* eslint-disable prettier/prettier */
 /* eslint no-magic-numbers: ["error", { "ignore": [0, 1, 2] }] */
 import { StrictStyleOptions } from 'botframework-webchat-api';
 

package/src/Styles/StyleSet/CarouselFilmStrip.ts

@@ -6,7 +6,6 @@ import mirrorStyle from '../mirrorStyle';
 export default function CarouselFilmStrip({
   avatarSize,
   bubbleMaxWidth,
-  bubbleMinWidth,
   paddingRegular,
   transitionDuration
 }: StrictStyleOptions) {
@@ -18,24 +17,18 @@ export default function CarouselFilmStrip({
         marginBottom: -17
       },
 
-      '& .webchat__carousel-filmstrip__attachment': {
-        minWidth: bubbleMinWidth,
-        maxWidth: bubbleMaxWidth,
-        transitionDuration,
-        transitionProperty: 'max-width, min-width'
-      },
-
       '& .webchat__carousel-filmstrip__message': {
         maxWidth: bubbleMaxWidth,
         transitionDuration,
         transitionProperty: 'max-width'
       },
 
-      '&.webchat__carousel-filmstrip--hide-nub, &.webchat__carousel-filmstrip--show-nub, &.webchat__carousel-filmstrip--hide-avatar, &.webchat__carousel-filmstrip--show-avatar': {
-        '& .webchat__carousel-filmstrip__message': {
-          maxWidth: bubbleMaxWidth + paddingRegular
-        }
-      },
+      '&.webchat__carousel-filmstrip--hide-nub, &.webchat__carousel-filmstrip--show-nub, &.webchat__carousel-filmstrip--hide-avatar, &.webchat__carousel-filmstrip--show-avatar':
+        {
+          '& .webchat__carousel-filmstrip__message': {
+            maxWidth: bubbleMaxWidth + paddingRegular
+          }
+        },
 
       '& .webchat__carousel-filmstrip__alignment-pad': {
         transitionDuration,
@@ -69,11 +62,12 @@ export default function CarouselFilmStrip({
         }
       },
 
-      '&.webchat__carousel-filmstrip--hide-avatar, &.webchat__carousel-filmstrip--show-avatar, &.webchat__carousel-filmstrip--hide-nub, &.webchat__carousel-filmstrip--show-nub': {
-        '& .webchat__carousel-filmstrip__nub-pad': {
-          width: paddingRegular
-        }
-      },
+      '&.webchat__carousel-filmstrip--hide-avatar, &.webchat__carousel-filmstrip--show-avatar, &.webchat__carousel-filmstrip--hide-nub, &.webchat__carousel-filmstrip--show-nub':
+        {
+          '& .webchat__carousel-filmstrip__nub-pad': {
+            width: paddingRegular
+          }
+        },
 
       '&:not(.webchat__carousel-filmstrip--top-callout) .webchat__carousel-filmstrip__avatar-gutter': {
         justifyContent: 'flex-end'
@@ -88,17 +82,9 @@ export default function CarouselFilmStrip({
           marginLeft: -paddingRegular
         },
 
-        '& .webchat__carousel-filmstrip__attachment': {
-          paddingLeft: paddingRegular
-        },
-
         '&.webchat__carousel-filmstrip--hide-avatar, &.webchat__carousel-filmstrip--show-avatar': {
           '& .webchat__carousel-filmstrip__attachments': {
             marginLeft: -(avatarSize + paddingRegular * 2)
-          },
-
-          '& .webchat__carousel-filmstrip__attachment:first-child': {
-            paddingLeft: avatarSize + paddingRegular * 2
           }
         },
 
@@ -106,10 +92,6 @@ export default function CarouselFilmStrip({
           '&:not(.webchat__carousel-filmstrip--hide-avatar.webchat__carousel-filmstrip--show-avatar)': {
             '& .webchat__carousel-filmstrip__attachments': {
               marginLeft: -paddingRegular * 2
-            },
-
-            '& .webchat__carousel-filmstrip__attachment:first-child': {
-              paddingLeft: paddingRegular * 2
             }
           }
         }

package/src/Styles/StyleSet/CarouselFilmStripAttachment.ts

@@ -0,0 +1,57 @@
+/* eslint no-magic-numbers: ["error", { "ignore": [2] }] */
+import { StrictStyleOptions } from 'botframework-webchat-api';
+
+import mirrorStyle from '../mirrorStyle';
+
+export default function CarouselFilmStripAttachment({
+  avatarSize,
+  bubbleMaxWidth,
+  bubbleMinWidth,
+  paddingRegular,
+  transcriptVisualKeyboardIndicatorColor,
+  transcriptVisualKeyboardIndicatorStyle,
+  transcriptVisualKeyboardIndicatorWidth,
+  transitionDuration
+}: StrictStyleOptions) {
+  return {
+    '&.webchat__carousel-filmstrip-attachment': {
+      minWidth: bubbleMinWidth,
+      maxWidth: bubbleMaxWidth,
+      transitionDuration,
+      transitionProperty: 'max-width, min-width',
+
+      '&:focus': {
+        outline: 0
+      },
+
+      '&:focus .webchat__carousel-filmstrip-attachment--focus': {
+        borderColor: transcriptVisualKeyboardIndicatorColor,
+        borderStyle: transcriptVisualKeyboardIndicatorStyle,
+        borderWidth: transcriptVisualKeyboardIndicatorWidth,
+        boxSizing: 'border-box',
+        height: `calc(100% - ${transcriptVisualKeyboardIndicatorWidth}px)`,
+        left: 0,
+        pointerEvents: 'none',
+        position: 'absolute',
+        top: 0,
+        width: `calc(100% - ${transcriptVisualKeyboardIndicatorWidth}px)`
+      }
+    },
+    ...mirrorStyle('&.webchat__carousel-filmstrip-attachment--rtl', {
+      paddingLeft: paddingRegular,
+
+      '&.webchat__carousel-filmstrip-attachment--hide-avatar, &.webchat__carousel-filmstrip-attachment--show-avatar': {
+        '&:first-child': {
+          paddingLeft: avatarSize + paddingRegular * 2
+        }
+      },
+
+      '&.webchat__carousel-filmstrip-attachment--hide-nub, &.webchat__carousel-filmstrip-attachment--show-nub': {
+        '&:not(.webchat__carousel-filmstrip-attachment--hide-avatar.webchat__carousel-filmstrip-attachment--show-avatar):first-child':
+          {
+            paddingLeft: paddingRegular * 2
+          }
+      }
+    })
+  };
+}

package/src/Styles/StyleSet/KeyboardHelp.ts

@@ -0,0 +1,157 @@
+// Numbers are commonly used in CSS.
+/* eslint-disable no-magic-numbers */
+
+import { StrictStyleOptions } from 'botframework-webchat-api';
+
+export default function createKeyboardHelpStyleSet({ paddingRegular, primaryFont }: StrictStyleOptions) {
+  return {
+    '&.webchat__keyboard-help': {
+      fontFamily: primaryFont,
+      fontSize: 14,
+      height: '100%',
+      margin: paddingRegular,
+      outline: 0,
+
+      '&:not(.webchat__keyboard-help--shown)': {
+        height: 0,
+        margin: 0,
+        overflow: 'hidden',
+        pointerEvents: 'none',
+        width: 0
+      },
+
+      '& .webchat__keyboard-help__box': {
+        // From Power BI:
+        // boxShadow: '0 6.4px 14.4px rgb(0 0 0 / 13%), 0 1.2px 3.6px rgb(0 0 0 / 11%)',
+        // From Fluent (depth-16 for teaching callouts):
+        borderRadius: 2,
+        boxShadow: '0px 8px 16px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12)',
+        boxSizing: 'border-box',
+        height: '100%',
+        padding: paddingRegular * 2,
+        position: 'relative',
+
+        '@media (forced-colors: active)': {
+          boxShadow: 'none',
+          outlineColor: 'white',
+          outlineStyle: 'solid',
+          outlineWidth: 4
+        },
+
+        '@media (forced-colors: none) and (prefers-color-scheme: dark)': {
+          boxShadow: '0px 8px 16px rgba(0, 0, 0, 0.28), 0px 0px 2px rgba(0, 0, 0, 0.24)'
+        }
+      },
+
+      '& .webchat__keyboard-help__close-button': {
+        appearance: 'none',
+        backgroundColor: 'transparent',
+        borderColor: 'black',
+        borderRadius: 4,
+        borderStyle: 'solid',
+        borderWidth: 2,
+        color: '#999',
+        height: 34,
+        padding: 0,
+        position: 'absolute',
+        right: paddingRegular,
+        top: paddingRegular,
+        width: 34,
+
+        '@media (forced-colors: none) and (prefers-color-scheme: light)': {
+          '&:active': {
+            backgroundColor: '#EDEBE9' // neutralLight (gray30)
+          },
+
+          '&:not(:active):hover': {
+            backgroundColor: '#F3F2F1' // neutralLighter (gray20)
+          }
+        },
+
+        '@media (forced-colors: none) and (prefers-color-scheme: dark)': {
+          borderColor: 'white',
+
+          '&:active': {
+            backgroundColor: '#292827' // neutralLight (gray30)
+          },
+
+          '&:not(:active):hover': {
+            backgroundColor: '#252423' // neutralLight (gray30)
+          }
+        }
+      },
+
+      '& .webchat__keyboard-help__close-button_image': {
+        fill: '#323130', // neutralPrimary (gray160)
+        height: 10,
+        width: 10,
+
+        '@media (forced-colors: active)': {
+          fill: 'White'
+        },
+
+        '@media (forced-colors: none) and (prefers-color-scheme: dark)': {
+          fill: '#F3F2F1' // neutralPrimary (gray160)
+        }
+      },
+
+      '& .webchat__keyboard-help__header, & .webchat__keyboard-help__sub-header': {
+        marginBottom: paddingRegular / 2,
+        marginTop: 0
+      },
+
+      '& .webchat__keyboard-help__section': {
+        marginBottom: paddingRegular
+      },
+
+      '& .webchat__keyboard-help__two-panes': {
+        alignItems: 'flex-start',
+        display: 'flex'
+      },
+
+      '& .webchat__keyboard-help__image': {
+        flexShrink: 10000,
+        paddingRight: paddingRegular
+      },
+
+      '& .webchat__keyboard-help__image--dark, & .webchat__keyboard-help__image--high-contrast': {
+        display: 'none'
+      },
+
+      '@media (forced-colors: active)': {
+        '& .webchat__keyboard-help__image--dark, & .webchat__keyboard-help__image--light': {
+          display: 'none'
+        },
+
+        '& .webchat__keyboard-help__image--high-contrast': {
+          display: 'unset'
+        }
+      },
+
+      '@media (forced-colors: none) and (prefers-color-scheme: dark)': {
+        backgroundColor: 'black',
+        color: '#F3F2F1',
+
+        '& .webchat__keyboard-help__image--light': {
+          display: 'none'
+        },
+
+        '& .webchat__keyboard-help__image--dark': {
+          display: 'unset'
+        }
+      },
+
+      '& .webchat__keyboard-help__notes': {
+        marginBottom: paddingRegular
+      },
+
+      '& .webchat__keyboard-help__notes-header': {
+        margin: 0
+      },
+
+      '& .webchat__keyboard-help__notes-text': {
+        margin: 0
+      }
+    }
+  };
+}

package/src/Styles/StyleSet/ScrollToEndButton.ts

@@ -1,9 +1,9 @@
 import { StrictStyleOptions } from 'botframework-webchat-api';
 
 export default function createScrollToEndButtonStyle({
-  newMessagesButtonFontSize,
   paddingRegular,
   primaryFont,
+  scrollToEndButtonFontSize,
   transcriptOverlayButtonBackground,
   transcriptOverlayButtonBackgroundOnFocus,
   transcriptOverlayButtonBackgroundOnHover,
@@ -12,41 +12,43 @@ export default function createScrollToEndButtonStyle({
   transcriptOverlayButtonColorOnHover
 }: StrictStyleOptions) {
   return {
-    // TODO: [P3] Can we not to unset borderWidth and outline earlier?
-    '@media screen and (-ms-high-contrast: active)': {
-      borderWidth: 'initial',
-      outline: 'initial'
-    },
+    '&.webchat__scroll-to-end-button': {
+      // TODO: [P3] Can we not to unset borderWidth and outline earlier?
+      '@media screen and (forced-colors: active)': {
+        borderWidth: 'initial',
+        outline: 'initial'
+      },
 
-    appearance: 'none',
-    backgroundColor: transcriptOverlayButtonBackground,
-    borderRadius: paddingRegular,
-    borderWidth: 0,
-    bottom: 5,
-    color: transcriptOverlayButtonColor,
-    fontFamily: primaryFont,
-    fontSize: newMessagesButtonFontSize,
-    outline: 0,
-    padding: paddingRegular,
-    position: 'absolute',
-    zIndex: 1, // We formed a stacking context in the parent container, so we can use "z-index" here.
+      appearance: 'none',
+      backgroundColor: transcriptOverlayButtonBackground,
+      borderRadius: paddingRegular,
+      borderWidth: 0,
+      bottom: 5,
+      color: transcriptOverlayButtonColor,
+      fontFamily: primaryFont,
+      fontSize: scrollToEndButtonFontSize,
+      outline: 0,
+      padding: paddingRegular,
+      position: 'absolute',
+      zIndex: 1, // We formed a stacking context in the parent container, so we can use "z-index" here.
 
-    '&:hover': {
-      backgroundColor: transcriptOverlayButtonBackgroundOnHover,
-      color: transcriptOverlayButtonColorOnHover || transcriptOverlayButtonColor
-    },
+      '&:hover': {
+        backgroundColor: transcriptOverlayButtonBackgroundOnHover,
+        color: transcriptOverlayButtonColorOnHover || transcriptOverlayButtonColor
+      },
 
-    '&:focus': {
-      backgroundColor: transcriptOverlayButtonBackgroundOnFocus,
-      color: transcriptOverlayButtonColorOnFocus || transcriptOverlayButtonColor
-    },
+      '&:focus': {
+        backgroundColor: transcriptOverlayButtonBackgroundOnFocus,
+        color: transcriptOverlayButtonColorOnFocus || transcriptOverlayButtonColor
+      },
 
-    '&:not(.webchat__overlay--rtl)': {
-      right: 20
-    },
+      '&:not(.webchat__scroll-to-end-button--rtl)': {
+        right: 20
+      },
 
-    '&.webchat__overlay--rtl': {
-      left: 20
+      '&.webchat__scroll-to-end-button--rtl': {
+        left: 20
+      }
     }
   };
 }

package/src/Styles/StyleSet/SendBoxButton.ts

@@ -2,47 +2,118 @@ import { StrictStyleOptions } from 'botframework-webchat-api';
 
 export default function createSendBoxButtonStyle({
   sendBoxButtonColor,
+  sendBoxButtonColorOnActive,
   sendBoxButtonColorOnDisabled,
   sendBoxButtonColorOnFocus,
   sendBoxButtonColorOnHover,
+  sendBoxButtonKeyboardFocusIndicatorBorderColor,
+  sendBoxButtonKeyboardFocusIndicatorBorderRadius,
+  sendBoxButtonKeyboardFocusIndicatorBorderStyle,
+  sendBoxButtonKeyboardFocusIndicatorBorderWidth,
+  sendBoxButtonKeyboardFocusIndicatorInset,
+  sendBoxButtonShadeBorderRadius,
+  sendBoxButtonShadeColor,
+  sendBoxButtonShadeColorOnActive,
+  sendBoxButtonShadeColorOnDisabled,
+  sendBoxButtonShadeColorOnFocus,
+  sendBoxButtonShadeColorOnHover,
+  sendBoxButtonShadeInset,
   sendBoxHeight,
   subtle
 }: StrictStyleOptions) {
   return {
     '&.webchat__icon-button': {
       alignItems: 'center',
+      appearance: 'none',
       backgroundColor: 'Transparent',
       border: 0,
       display: 'flex',
+      fill: sendBoxButtonColor || subtle,
       justifyContent: 'center',
       outline: 0,
       padding: 0,
-
-      // We use the sendBoxHeight, so the button looks square
-      width: sendBoxHeight,
+      position: 'relative',
+      width: sendBoxHeight, // We use the sendBoxHeight, so the button looks square
 
       '&:not(.webchat__icon-button--stretch)': {
         height: sendBoxHeight
       },
 
+      // Order of style preferences (based on effort of user gesture): disabled > active > hover > focus.
+      // Keyboard focus indicator styles applied by :focus-visible do not conflict with :active/:hover/:focus, so it is not included here.
+      '&:disabled, &[aria-disabled="true"]': {
+        fill: sendBoxButtonColorOnDisabled,
+
+        '& .webchat__icon-button__shade': {
+          backgroundColor: sendBoxButtonShadeColorOnDisabled
+        }
+      },
+
       '&:not(:disabled):not([aria-disabled="true"])': {
-        '&:focus svg': {
-          fill: sendBoxButtonColorOnFocus
+        '&:active': {
+          fill: sendBoxButtonColorOnActive,
+
+          '& .webchat__icon-button__shade': {
+            backgroundColor: sendBoxButtonShadeColorOnActive
+          }
         },
 
-        '&:hover svg': {
-          fill: sendBoxButtonColorOnHover
+        '&:not(:active)': {
+          '&:hover': {
+            fill: sendBoxButtonColorOnHover,
+
+            '& .webchat__icon-button__shade': {
+              backgroundColor: sendBoxButtonShadeColorOnHover
+            }
+          },
+
+          '&:not(:hover)': {
+            '&:focus': {
+              fill: sendBoxButtonColorOnFocus,
+
+              '& .webchat__icon-button__shade': {
+                backgroundColor: sendBoxButtonShadeColorOnFocus
+              }
+            }
+          }
         }
       },
 
-      '& svg': {
-        fill: sendBoxButtonColor || subtle
+      // On unsupported browser, :focus-visible and :not(:focus-visible) is always false.
+      // And it will turn the whole CSS selector ":unsupported, .truthy" to false.
+      '&:not(:focus-visible) .webchat__icon-button__keyboard-focus-indicator': {
+        display: 'none'
       },
 
-      '&:disabled, &[aria-disabled="true"]': {
-        '& svg': {
-          fill: sendBoxButtonColorOnDisabled
-        }
+      '&:not(.webchat__icon-button--focus-visible) .webchat__icon-button__keyboard-focus-indicator': {
+        display: 'none'
+      },
+
+      // Make sure all contents are in the same stacking context.
+      '& > *': {
+        position: 'relative'
+      },
+
+      '& .webchat__icon-button__shade': {
+        backgroundColor: sendBoxButtonShadeColor,
+        borderRadius: sendBoxButtonShadeBorderRadius,
+        bottom: sendBoxButtonShadeInset,
+        left: sendBoxButtonShadeInset,
+        position: 'absolute',
+        right: sendBoxButtonShadeInset,
+        top: sendBoxButtonShadeInset
+      },
+
+      '& .webchat__icon-button__keyboard-focus-indicator': {
+        borderColor: sendBoxButtonKeyboardFocusIndicatorBorderColor,
+        borderRadius: sendBoxButtonKeyboardFocusIndicatorBorderRadius,
+        borderStyle: sendBoxButtonKeyboardFocusIndicatorBorderStyle,
+        borderWidth: sendBoxButtonKeyboardFocusIndicatorBorderWidth,
+        bottom: sendBoxButtonKeyboardFocusIndicatorInset,
+        left: sendBoxButtonKeyboardFocusIndicatorInset,
+        position: 'absolute',
+        right: sendBoxButtonKeyboardFocusIndicatorInset,
+        top: sendBoxButtonKeyboardFocusIndicatorInset
       }
     }
   };

package/src/Styles/StyleSet/SendBoxTextBox.ts

@@ -3,7 +3,6 @@ import { StrictStyleOptions } from 'botframework-webchat-api';
 export default function createSendBoxTextBoxStyle({
   paddingRegular,
   primaryFont,
-  sendBoxBackground,
   sendBoxDisabledTextColor,
   sendBoxMaxHeight,
   sendBoxPlaceholderColor,
@@ -27,7 +26,7 @@ export default function createSendBoxTextBoxStyle({
       },
 
       '& .webchat__send-box-text-box__input, & .webchat__send-box-text-box__html-text-area': {
-        backgroundColor: sendBoxBackground,
+        backgroundColor: 'transparent', // We set this to transparent because we already applied "sendBoxBackground" to a parent container.
 
         '&:not(:disabled):not([aria-disabled="true"])': {
           color: sendBoxTextColor

package/src/Styles/StyleSet/StackedLayout.ts

@@ -42,9 +42,10 @@ export default function createStackedLayoutStyle({
         width: '100%'
       },
 
-      '&.webchat__stacked-layout--no-message .webchat__stacked-layout__attachment-row.webchat__stacked-layout__attachment-row--first': {
-        marginTop: 0
-      },
+      '&.webchat__stacked-layout--no-message .webchat__stacked-layout__attachment-row.webchat__stacked-layout__attachment-row--first':
+        {
+          marginTop: 0
+        },
 
       '& .webchat__stacked-layout__message': {
         maxWidth: bubbleMaxWidth,
@@ -65,15 +66,16 @@ export default function createStackedLayoutStyle({
         }
       },
 
-      '&.webchat__stacked-layout--hide-avatar, &.webchat__stacked-layout--show-avatar, &.webchat__stacked-layout--hide-nub, &.webchat__stacked-layout--show-nub': {
-        '& .webchat__stacked-layout__attachment, & .webchat__stacked-layout__message': {
-          maxWidth: bubbleMaxWidth + paddingRegular
-        },
+      '&.webchat__stacked-layout--hide-avatar, &.webchat__stacked-layout--show-avatar, &.webchat__stacked-layout--hide-nub, &.webchat__stacked-layout--show-nub':
+        {
+          '& .webchat__stacked-layout__attachment, & .webchat__stacked-layout__message': {
+            maxWidth: bubbleMaxWidth + paddingRegular
+          },
 
-        '& .webchat__stacked-layout__nub-pad': {
-          width: paddingRegular
-        }
-      },
+          '& .webchat__stacked-layout__nub-pad': {
+            width: paddingRegular
+          }
+        },
 
       '&:not(.webchat__stacked-layout--top-callout)': {
         '& .webchat__stacked-layout__avatar-gutter, & .webchat__stacked-layout__content': {