botframework-webchat-component 4.18.1 → 4.19.0

package/src/Styles/StyleSet/ActivityButton.ts

@@ -0,0 +1,49 @@
+export default function createActivityButtonStyle() {
+  return {
+    '&.webchat__activity-button': {
+      alignItems: 'center',
+      appearance: 'none',
+      background: '#fff',
+      borderRadius: '4px',
+      border: '1px solid #d1d1d1',
+      color: '#242424',
+      display: 'flex',
+      gap: '4px',
+      justifyContent: 'center',
+      padding: '5px 12px',
+
+      '&:hover': {
+        background: '#f5f5f5',
+        border: '1px solid #c7c7c7',
+        color: '#242424'
+      },
+
+      '&:active': {
+        background: '#e0e0e0',
+        border: '1px solid #b3b3b3',
+        color: '#242424'
+      },
+
+      '&:focus-visible': {
+        background: '#fff',
+        outline: '2px solid #000',
+        outlineOffset: '-2px'
+      },
+
+      '&[aria-disabled="true"]': {
+        background: '#f0f0f0',
+        border: '1px solid #e0e0e0',
+        color: '#bdbdbd',
+        cursor: 'not-allowed'
+      },
+
+      '& .webchat__activity-button__icon': {
+        height: '20px',
+        width: '20px',
+
+        '--webchat__component-icon--color': '#707070',
+        '--webchat__component-icon--size': '20px'
+      }
+    }
+  };
+}

package/src/Styles/StyleSet/ActivityCopyButton.ts

@@ -0,0 +1,40 @@
+export default function createActivityButtonStyle() {
+  return {
+    '&.webchat__activity-copy-button': {
+      overflow: ['clip', 'hidden'],
+      position: 'relative',
+
+      '& .webchat__activity-copy-button__copied-text': {
+        alignItems: 'center',
+        backgroundColor: '#fff',
+        display: 'flex',
+        height: '100%',
+        justifyContent: 'center',
+        position: 'absolute',
+        visibility: 'hidden',
+        width: '100%'
+      },
+
+      '&.webchat__activity-copy-button--copied': {
+        '.webchat__activity-copy-button__copied-text': {
+          animation: 'webchat__activity-copy-button__copied-animation 0.7s linear'
+        },
+
+        '.webchat__activity-button__icon, .webchat__activity-button__text': {
+          visibility: 'hidden'
+        }
+      },
+
+      '@keyframes webchat__activity-copy-button__copied-animation': {
+        '0%': {
+          // This is set during the animation only hence shouldn't spill when hidden from the above tree
+          visibility: 'visible'
+        },
+
+        '100%': {
+          visibility: 'unset'
+        }
+      }
+    }
+  };
+}

package/src/Styles/StyleSet/AudioAttachment.ts

@@ -1,9 +1,9 @@
-import { StrictStyleOptions } from 'botframework-webchat-api';
+import CSSTokens from '../CSSTokens';
 
-export default function AudioAttachment({ avatarSize }: StrictStyleOptions) {
+export default function AudioAttachment() {
   return {
     // TODO: [P2] We should not set "display" in styleSet, this will allow the user to break the layout for no good reasons.
     display: 'flex',
-    minHeight: avatarSize
+    minHeight: CSSTokens.SizeAvatar
   };
 }

package/src/Styles/StyleSet/Avatar.ts

@@ -1,11 +1,12 @@
 import { StrictStyleOptions } from 'botframework-webchat-api';
+import CSSTokens from '../CSSTokens';
 
-export default function createAvatarStyle({ avatarBorderRadius, avatarSize }: StrictStyleOptions) {
+export default function createAvatarStyle({ avatarBorderRadius }: StrictStyleOptions) {
   return {
     '&.webchat__defaultAvatar': {
       borderRadius: avatarBorderRadius,
-      height: avatarSize,
-      width: avatarSize
+      height: CSSTokens.SizeAvatar,
+      width: CSSTokens.SizeAvatar
     }
   };
 }

package/src/Styles/StyleSet/CarouselFilmStrip.ts

@@ -1,11 +1,12 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [2] }] */
 import { StrictStyleOptions } from 'botframework-webchat-api';
 
+import CSSTokens from '../CSSTokens';
 import mirrorStyle from '../mirrorStyle';
 
 export default function CarouselFilmStrip({
   avatarSize,
-  bubbleMaxWidth,
+  bubbleMessageMaxWidth,
   paddingRegular,
   transitionDuration
 }: StrictStyleOptions) {
@@ -17,23 +18,24 @@ export default function CarouselFilmStrip({
         marginBottom: -17
       },
 
-      '& .webchat__carousel-filmstrip__message': {
-        maxWidth: bubbleMaxWidth,
+      '& .webchat__carousel-filmstrip__bubble': {
+        maxWidth: CSSTokens.MaxWidthMessageBubble,
+        minWidth: CSSTokens.MinWidthMessageBubble,
         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__bubble': {
+            maxWidth: bubbleMessageMaxWidth + paddingRegular
           }
         },
 
       '& .webchat__carousel-filmstrip__alignment-pad': {
         transitionDuration,
         transitionProperty: 'width',
-        width: paddingRegular
+        width: CSSTokens.PaddingRegular
       },
 
       '&.webchat__carousel-filmstrip--extra-trailing .webchat__carousel-filmstrip__alignment-pad': {
@@ -58,7 +60,7 @@ export default function CarouselFilmStrip({
 
       '&.webchat__carousel-filmstrip--hide-avatar, &.webchat__carousel-filmstrip--show-avatar': {
         '& .webchat__carousel-filmstrip__avatar-gutter': {
-          width: avatarSize
+          width: CSSTokens.SizeAvatar
         }
       },
 

package/src/Styles/StyleSet/CarouselFilmStripAttachment.ts

@@ -1,12 +1,11 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [2] }] */
 import { StrictStyleOptions } from 'botframework-webchat-api';
 
+import CSSTokens from '../CSSTokens';
 import mirrorStyle from '../mirrorStyle';
 
 export default function CarouselFilmStripAttachment({
   avatarSize,
-  bubbleMaxWidth,
-  bubbleMinWidth,
   paddingRegular,
   transcriptVisualKeyboardIndicatorColor,
   transcriptVisualKeyboardIndicatorStyle,
@@ -15,8 +14,8 @@ export default function CarouselFilmStripAttachment({
 }: StrictStyleOptions) {
   return {
     '&.webchat__carousel-filmstrip-attachment': {
-      minWidth: bubbleMinWidth,
-      maxWidth: bubbleMaxWidth,
+      maxWidth: CSSTokens.MaxWidthAttachmentBubble,
+      minWidth: CSSTokens.MinWidthAttachmentBubble,
       transitionDuration,
       transitionProperty: 'max-width, min-width',
 

package/src/Styles/StyleSet/ChatHistoryBox.ts

@@ -0,0 +1,22 @@
+export default function createChatHistoryBoxStyleSet() {
+  return {
+    '&.webchat__chat-history-box': {
+      display: 'flex',
+      flex: 'auto',
+      overflow: ['clip', 'hidden'],
+      position: 'relative'
+    },
+
+    '.webchat__chat-history-box__toolbar': {
+      bottom: '5px',
+      isolation: 'isolate',
+      position: 'absolute',
+      right: '20px',
+      zIndex: 1,
+
+      '&.webchat__chat-history-box__toolbar--rtl': {
+        left: '20px'
+      }
+    }
+  };
+}

package/src/Styles/StyleSet/CodeBlock.ts

@@ -0,0 +1,39 @@
+import CustomPropertyNames from '../CustomPropertyNames';
+
+export default function createCodeBlockStyle() {
+  return {
+    '&.webchat__code-block': {
+      background: `var(${CustomPropertyNames.BackgroundCodeBlock}, inherit)`,
+      border: '1px solid #d1d1d1',
+      borderRadius: '4px',
+      color: `var(${CustomPropertyNames.ColorCodeBlock}, currentColor)`,
+      display: 'block',
+      margin: '16px 0',
+      overflow: 'hidden',
+      padding: '4px 4px 4px 8px',
+
+      ':has(> .webchat__code-block__theme--github-dark-default)': {
+        background: `var(${CustomPropertyNames.BackgroundCodeBlock}, #0d1117)`,
+        color: `var(${CustomPropertyNames.ColorCodeBlock}, #e6edf3)`
+      },
+
+      ':has(> .webchat__code-block__theme--github-light-default)': {
+        background: `var(${CustomPropertyNames.BackgroundCodeBlock}, #ffffff)`,
+        color: `var(${CustomPropertyNames.ColorCodeBlock}, #1f2328)`
+      },
+
+      ':has(.webchat__code-block__body:focus-visible):focus-within': {
+        outline: '2px solid #000',
+        outlineOffset: '-2px'
+      },
+
+      '.webchat__code-block__body': {
+        display: 'contents',
+        lineHeight: 'normal',
+        margin: '0',
+        outline: 'none',
+        whiteSpace: 'pre-wrap'
+      }
+    }
+  };
+}

package/src/Styles/StyleSet/CodeBlockCopyButton.ts

@@ -0,0 +1,71 @@
+import CSSTokens from '../CSSTokens';
+
+export default function createCodeBlockCopyButtonStyle() {
+  return {
+    '&.webchat__code-block-copy-button': {
+      alignItems: 'center',
+      appearance: 'none',
+      background: '#fff',
+      borderRadius: '4px',
+      border: '1px solid #d1d1d1',
+      color: '#242424',
+      display: 'grid',
+      float: 'right', // Use "inline-end" after we update Chromium in Docker
+      gap: '4px',
+      justifyContent: 'center',
+      marginInlineStart: CSSTokens.PaddingRegular,
+      padding: '3px',
+
+      '&:hover': {
+        background: '#f5f5f5',
+        border: '1px solid #c7c7c7',
+        color: '#242424'
+      },
+
+      '&:active': {
+        background: '#e0e0e0',
+        border: '1px solid #b3b3b3',
+        color: '#242424'
+      },
+
+      '&:focus-visible': {
+        background: '#fff',
+        outline: '2px solid #000',
+        outlineOffset: '-2px'
+      },
+
+      '&[aria-disabled="true"]': {
+        background: '#f0f0f0',
+        border: '1px solid #e0e0e0',
+        color: '#bdbdbd',
+        cursor: 'not-allowed'
+      },
+
+      '& .webchat__code-block-copy-button__icon': {
+        gridColumn: 1,
+        gridRow: 1,
+
+        '--webchat__component-icon--color': '#707070',
+        '--webchat__component-icon--size': '16px'
+      },
+
+      '& .webchat__code-block-copy-button__icon--copied': {
+        opacity: 0
+      },
+
+      '&.webchat__code-block-copy-button--copied .webchat__code-block-copy-button__icon': {
+        animation: 'webchat__code-block-copy-button__copied-animation 0.5s linear'
+      },
+
+      '@keyframes webchat__code-block-copy-button__copied-animation': {
+        '0%': {
+          opacity: '100%'
+        },
+
+        '100%': {
+          opacity: 'unset'
+        }
+      }
+    }
+  };
+}

package/src/Styles/StyleSet/ErrorBox.ts

@@ -13,13 +13,13 @@ export default function createErrorBoxStyle({ monospaceFont, primaryFont }: Stri
     WebkitOverflowScrolling: 'touch',
 
     '& > :first-child': {
-      backgroundColor: '#EF0000',
+      backgroundColor: '#B60000', // WCAG AAA: Contrast ratio >= 7:1.
       color: 'White',
       padding: '5px 10px'
     },
 
     '& > :last-child': {
-      borderColor: '#EF0000',
+      borderColor: '#B60000', // WCAG AAA: Contrast ratio >= 7:1.
       borderStyle: 'dashed',
       borderBottomWidth: 2,
       borderLeftWidth: 2,

package/src/Styles/StyleSet/FileContent.ts

@@ -27,7 +27,8 @@ export default function createFileContentStyle({
     },
 
     '& .webchat__fileContent__downloadIcon': {
-      fill: accent,
+      color: accent,
+      fontSize: '33px',
       padding: paddingRegular,
 
       '&:not(.webchat__fileContent__downloadIcon--rtl)': {

package/src/Styles/StyleSet/ImageAvatar.ts

@@ -1,9 +1,12 @@
-import { StrictStyleOptions } from 'botframework-webchat-api';
+import CSSTokens from '../CSSTokens';
 
-export default function createImageAvatarStyle({ avatarSize }: StrictStyleOptions) {
+export default function createImageAvatarStyle() {
   return {
-    height: avatarSize,
-    overflow: 'hidden',
-    width: avatarSize
+    alignItems: 'center',
+    display: 'flex',
+    height: CSSTokens.SizeAvatar,
+    justifyContent: 'center',
+    overflow: ['hidden', 'clip'],
+    width: CSSTokens.SizeAvatar
   };
 }

package/src/Styles/StyleSet/InitialsAvatar.ts

@@ -1,21 +1,20 @@
 import { StrictStyleOptions } from 'botframework-webchat-api';
+import CSSTokens from '../CSSTokens';
 
 export default function createInitialsAvatarStyle({
   accent,
-  avatarSize,
   botAvatarBackgroundColor,
-  primaryFont,
   userAvatarBackgroundColor
 }: StrictStyleOptions) {
   return {
     '&.webchat__initialsAvatar': {
       alignItems: 'center',
       color: 'White',
-      fontFamily: primaryFont,
-      height: avatarSize,
+      fontFamily: CSSTokens.FontPrimary,
+      height: CSSTokens.SizeAvatar,
       justifyContent: 'center',
       overflow: 'hidden',
-      width: avatarSize,
+      width: CSSTokens.SizeAvatar,
 
       '&.webchat__initialsAvatar--fromUser': {
         backgroundColor: userAvatarBackgroundColor || accent

package/src/Styles/StyleSet/LinkDefinitions.ts

@@ -9,16 +9,14 @@ import CSSTokens from '../CSSTokens';
 export default function createLinkDefinitionsStyleSet() {
   return {
     '&.webchat__link-definitions': {
-      // '&[open] .webchat__link-definitions__header::after': {
-      //   transform: 'rotate(0deg)'
-      // },
-
       '.webchat__link-definitions__header': {
         alignItems: 'center',
+        cursor: 'default',
         display: 'flex',
         fontFamily: CSSTokens.FontPrimary,
         fontSize: CSSTokens.FontSizeSmall,
         gap: 4,
+        justifyContent: 'space-between',
         listStyle: 'none',
 
         [LIGHT_THEME_SELECTOR]: {
@@ -31,6 +29,17 @@ export default function createLinkDefinitionsStyleSet() {
         }
       },
 
+      '.webchat__link-definitions__header-section': {
+        alignItems: 'center',
+        display: 'flex',
+        gap: 4,
+        overflow: 'hidden'
+      },
+
+      '.webchat__link-definitions__header-section--left': {
+        flexShrink: 0
+      },
+
       '.webchat__link-definitions__header-text': {
         flexShrink: 0
       },
@@ -47,15 +56,12 @@ export default function createLinkDefinitionsStyleSet() {
         transform: 'rotate(-180deg)'
       },
 
-      '.webchat__link-definitions__header-filler': {
-        flexGrow: 1
-      },
-
       '.webchat__link-definitions__header-accessory': {
         overflow: 'hidden'
       },
 
       '.webchat__link-definitions__message-sensitivity-label': {
+        alignItems: 'center',
         display: 'flex',
         gap: 4
       },
@@ -85,19 +91,19 @@ export default function createLinkDefinitionsStyleSet() {
       },
 
       '.webchat__link-definitions__badge': {
-        alignItems: 'center',
         alignSelf: 'flex-start',
         borderRadius: '4px',
         borderStyle: 'solid',
         borderWidth: 1,
-        display: 'flex',
         flexShrink: 0,
         fontSize: '75%',
-        justifyContent: 'center',
         margin: 4,
+        maxWidth: '4em',
         minWidth: '1em',
         overflow: 'hidden',
         padding: 2,
+        textAlign: 'center',
+        textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
 
         [LIGHT_THEME_SELECTOR]: {

package/src/Styles/StyleSet/MicrophoneButton.ts

@@ -6,7 +6,7 @@ export default function createMicrophoneButtonStyle({ microphoneButtonColorOnDic
       '&.webchat__microphone-button--dictating .webchat__microphone-button__button': {
         '&, &:focus, &:hover': {
           '& .webchat__microphone-button__icon': {
-            fill: microphoneButtonColorOnDictate
+            '--webchat__component-icon--color': microphoneButtonColorOnDictate
           }
         }
       }

package/src/Styles/StyleSet/ModalDialog.ts

@@ -19,6 +19,12 @@ export default function createModalDialogStyleSet() {
         border: 0
       },
 
+      // Assume the content is being prepared, so we hide the whole dialog until content appears in the DOM.
+      // Use opacity to still be able to set focus on the first available control (close button).
+      '&:has(.webchat__modal-dialog__body:empty)': {
+        opacity: 0
+      },
+
       '& .webchat__modal-dialog__box': {
         borderRadius: 2,
         overflow: 'hidden',
@@ -30,7 +36,7 @@ export default function createModalDialogStyleSet() {
 
         '@media screen and (min-width: 640px)': {
           maxWidth: '60%',
-          minWidth: 'calc(640px - 32px)',
+          minWidth: 'calc(640px - 2em - 6px)', // Browser natively do "100% - 2em - 6px".
           width: '60%'
         },
 
@@ -65,6 +71,9 @@ export default function createModalDialogStyleSet() {
       '& .webchat__modal-dialog__close-button': {
         height: 30,
         width: 30,
+        padding: 0,
+
+        '--webchat__component-icon--size': '16px',
 
         [NOT_FORCED_COLORS_SELECTOR]: {
           appearance: 'none',
@@ -104,20 +113,17 @@ export default function createModalDialogStyleSet() {
         }
       },
 
-      '& .webchat__modal-dialog__close-button-image': {
-        height: 10,
-        width: 10,
-
+      '& .webchat__modal-dialog__close-button-icon': {
         [LIGHT_THEME_SELECTOR]: {
-          fill: '#323130' // neutralPrimary (gray160)
+          color: '#323130' // neutralPrimary (gray160)
         },
 
         [DARK_THEME_SELECTOR]: {
-          fill: '#F3F2F1' // neutralPrimary (gray160)
+          color: '#F3F2F1' // neutralPrimary (gray160)
         },
 
         [FORCED_COLORS_SELECTOR]: {
-          fill: 'currentcolor'
+          color: 'currentcolor'
         }
       },
 

package/src/Styles/StyleSet/RenderMarkdown.ts

@@ -40,10 +40,14 @@ export default function createMarkdownStyle() {
         background: 'transparent',
         border: 0,
         cursor: 'pointer',
+        display: 'inline-block',
         fontFamily: 'unset',
         fontSize: 'unset',
+        overflow: 'hidden',
         padding: 0,
         textDecoration: 'underline',
+        textOverflow: 'ellipsis',
+        verticalAlign: 'bottom',
         whiteSpace: 'nowrap',
 
         [FORCED_COLORS_SELECTOR]: {
@@ -56,6 +60,11 @@ export default function createMarkdownStyle() {
       },
 
       '& .webchat__render-markdown__pure-identifier': {
+        display: 'inline-block',
+        maxWidth: '100%',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        verticalAlign: 'bottom',
         whiteSpace: 'nowrap'
       },
 
@@ -65,6 +74,32 @@ export default function createMarkdownStyle() {
 
       '& .webchat__render-markdown__pure-identifier::before': {
         content: "'['"
+      },
+
+      '& [data-math-type=block]': {
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        marginBottom: '-4px',
+        paddingBottom: '4px',
+        outlineOffset: '2px',
+        overflowX: 'auto',
+        overflowY: 'clip',
+        scrollbarWidth: 'thin'
+      },
+
+      '& span[data-math-type=block]': {
+        display: 'inline-flex'
+      },
+
+      '& [data-math-type=inline]': {
+        alignItems: 'center',
+        display: 'inline-flex',
+        flexDirection: 'column'
+      },
+
+      '& :is([data-math-type=block], [data-math-type=inline]) > span': {
+        display: 'contents'
       }
     }
   };

package/src/Styles/StyleSet/ScrollToEndButton.ts

@@ -23,14 +23,11 @@ export default function createScrollToEndButtonStyle({
       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,
@@ -40,14 +37,6 @@ export default function createScrollToEndButtonStyle({
       '&:focus': {
         backgroundColor: transcriptOverlayButtonBackgroundOnFocus,
         color: transcriptOverlayButtonColorOnFocus || transcriptOverlayButtonColor
-      },
-
-      '&:not(.webchat__scroll-to-end-button--rtl)': {
-        right: 20
-      },
-
-      '&.webchat__scroll-to-end-button--rtl': {
-        left: 20
       }
     }
   };