botframework-webchat-component 4.18.1-main.20260518.2a3d1d3 → 4.18.2

package/src/Styles/StyleSet/RenderMarkdown.ts

@@ -40,14 +40,10 @@ 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]: {
@@ -60,11 +56,6 @@ export default function createMarkdownStyle() {
       },
 
       '& .webchat__render-markdown__pure-identifier': {
-        display: 'inline-block',
-        maxWidth: '100%',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        verticalAlign: 'bottom',
         whiteSpace: 'nowrap'
       },
 
@@ -74,32 +65,6 @@ 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,11 +23,14 @@ 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,
@@ -37,6 +40,14 @@ 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
       }
     }
   };

package/src/Styles/StyleSet/SendBox.ts

@@ -1,17 +1,6 @@
-import { type StrictStyleOptions } from 'botframework-webchat-api';
-import { type StyleSet } from './types/StyleSet';
-
-function stringifyNumericPixel(value: number | string): string {
-  if (typeof value === 'number') {
-    return `${value}px`;
-  }
-
-  return value;
-}
+import { StrictStyleOptions } from 'botframework-webchat-api';
 
 export default function createSendBoxStyle({
-  paddingRegular,
-  primaryFont,
   sendBoxBackground,
   sendBoxBorderBottom,
   sendBoxBorderLeft,
@@ -21,8 +10,6 @@ export default function createSendBoxStyle({
 }: StrictStyleOptions) {
   return {
     '&.webchat__send-box': {
-      fontFamily: primaryFont,
-
       '& .webchat__send-box__button--align-bottom': { alignSelf: 'flex-end' },
       '& .webchat__send-box__button--align-stretch': { alignSelf: 'stretch' },
       '& .webchat__send-box__button--align-top': { alignSelf: 'flex-start' },
@@ -30,49 +17,12 @@ export default function createSendBoxStyle({
       '& .webchat__send-box__main': {
         alignItems: 'stretch',
         backgroundColor: sendBoxBackground,
-        borderBottom: stringifyNumericPixel(sendBoxBorderBottom),
-        borderLeft: stringifyNumericPixel(sendBoxBorderLeft),
-        borderRight: stringifyNumericPixel(sendBoxBorderRight),
-        borderTop: stringifyNumericPixel(sendBoxBorderTop),
-        display: 'grid',
-        gridTemplateAreas: '"upload-button text-box send-button"',
-        gridTemplateColumns: 'auto 1fr auto',
-        gridTemplateRows: 'auto',
-        minHeight: stringifyNumericPixel(sendBoxHeight),
-
-        // For unknown reason, if the attachment bar does not exist, the second row is still occupying about 1px, we need to hide it.
-        '&:has(.webchat__send-box__attachment-bar)': {
-          gridTemplateAreas: '"attachment-bar attachment-bar attachment-bar" "upload-button text-box send-button"',
-          gridTemplateRows: 'auto auto'
-        }
-      },
-
-      '& .webchat__send-box__editable': {
-        display: 'flex',
-        flexDirection: 'column',
-        // eslint-disable-next-line no-magic-numbers
-        gap: `${paddingRegular / 2}px`,
-        gridArea: 'text-box',
-        // eslint-disable-next-line no-magic-numbers
-        paddingBottom: `${paddingRegular / 2}px`,
-        // eslint-disable-next-line no-magic-numbers
-        paddingTop: `${paddingRegular / 2}px`,
-        overflowX: 'hidden',
-        width: '100%'
-      },
-
-      '& .webchat__send-box__attachment-bar': {
-        padding: `${paddingRegular}px`,
-        paddingBlockEnd: `0px`
-      },
-
-      '& .webchat__upload-button': {
-        gridArea: 'upload-button'
-      },
-
-      '& .webchat__send-button': {
-        gridArea: 'send-button'
+        borderBottom: sendBoxBorderBottom,
+        borderLeft: sendBoxBorderLeft,
+        borderRight: sendBoxBorderRight,
+        borderTop: sendBoxBorderTop,
+        minHeight: sendBoxHeight
       }
     }
-  } satisfies StyleSet;
+  };
 }

package/src/Styles/StyleSet/SendBoxButton.ts

@@ -27,16 +27,14 @@ export default function createSendBoxButtonStyle({
       appearance: 'none',
       backgroundColor: 'Transparent',
       border: 0,
-      color: sendBoxButtonColor || subtle,
       display: 'flex',
+      fill: sendBoxButtonColor || subtle,
       justifyContent: 'center',
       outline: 0,
       padding: 0,
       position: 'relative',
       width: sendBoxHeight, // We use the sendBoxHeight, so the button looks square
 
-      '--webchat__component-icon--size': '28px',
-
       '&:not(.webchat__icon-button--stretch)': {
         height: sendBoxHeight
       },
@@ -44,7 +42,7 @@ export default function createSendBoxButtonStyle({
       // 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"]': {
-        color: sendBoxButtonColorOnDisabled,
+        fill: sendBoxButtonColorOnDisabled,
 
         '& .webchat__icon-button__shade': {
           backgroundColor: sendBoxButtonShadeColorOnDisabled
@@ -53,7 +51,7 @@ export default function createSendBoxButtonStyle({
 
       '&:not(:disabled):not([aria-disabled="true"])': {
         '&:active': {
-          color: sendBoxButtonColorOnActive,
+          fill: sendBoxButtonColorOnActive,
 
           '& .webchat__icon-button__shade': {
             backgroundColor: sendBoxButtonShadeColorOnActive
@@ -62,7 +60,7 @@ export default function createSendBoxButtonStyle({
 
         '&:not(:active)': {
           '&:hover': {
-            color: sendBoxButtonColorOnHover,
+            fill: sendBoxButtonColorOnHover,
 
             '& .webchat__icon-button__shade': {
               backgroundColor: sendBoxButtonShadeColorOnHover
@@ -71,7 +69,7 @@ export default function createSendBoxButtonStyle({
 
           '&:not(:hover)': {
             '&:focus': {
-              color: sendBoxButtonColorOnFocus,
+              fill: sendBoxButtonColorOnFocus,
 
               '& .webchat__icon-button__shade': {
                 backgroundColor: sendBoxButtonShadeColorOnFocus

package/src/Styles/StyleSet/SendBoxTextBox.ts

@@ -13,12 +13,7 @@ export default function createSendBoxTextBoxStyle({
     '&.webchat__send-box-text-box': {
       alignItems: 'center',
       fontFamily: primaryFont,
-      // eslint-disable-next-line no-magic-numbers
-      paddingBottom: paddingRegular / 2,
-      paddingLeft: paddingRegular,
-      paddingRight: paddingRegular,
-      // eslint-disable-next-line no-magic-numbers
-      paddingTop: paddingRegular / 2,
+      padding: paddingRegular,
       position: 'relative',
 
       '& .webchat__send-box-text-box__input': {

package/src/Styles/StyleSet/SendStatus.ts

@@ -14,18 +14,6 @@ export default function createSendStatusStyle() {
       gap: 4
     },
 
-    '& .webchat__activity-status-slot': {
-      display: 'contents',
-
-      '&:not(:first-child)::before': {
-        content: `"|"`
-      },
-
-      '&:empty': {
-        display: 'none'
-      }
-    },
-
     '& .webchat__activity-status__originator': {
       alignItems: 'center',
 

package/src/Styles/StyleSet/SingleAttachmentActivity.ts

@@ -0,0 +1,18 @@
+import { StrictStyleOptions } from 'botframework-webchat-api';
+
+export default function createSingleCardActivityStyle({
+  bubbleMaxWidth,
+  bubbleMinWidth,
+  paddingRegular
+}: StrictStyleOptions) {
+  return {
+    '& > .bubble-box': {
+      maxWidth: bubbleMaxWidth,
+      minWidth: bubbleMinWidth
+    },
+
+    '& > .filler': {
+      minWidth: paddingRegular
+    }
+  };
+}

package/src/Styles/StyleSet/SlottedActivityStatus.ts

@@ -0,0 +1,16 @@
+import CSSTokens from '../CSSTokens';
+
+export default function createSlottedActivityStatus() {
+  return {
+    '&.webchat__slotted-activity-status': {
+      alignItems: 'center',
+      display: 'inline-flex',
+      gap: 4,
+      marginTop: `calc(${CSSTokens.PaddingRegular} / 2)`,
+
+      '& .webchat__slotted-activity-status__pipe': {
+        fontSize: CSSTokens.FontSizeSmall
+      }
+    }
+  };
+}

package/src/Styles/StyleSet/SpinnerAnimation.ts

@@ -15,10 +15,8 @@ export default function createSpinnerAnimationStyle({
   spinnerAnimationPadding
 }: StrictStyleOptions) {
   defaultImageBlobURL ||
-    // Content is hardcoded.
-    // eslint-disable-next-line no-restricted-properties
     (defaultImageBlobURL = URL.createObjectURL(
-      new Blob([new Uint8Array(toByteArray(DEFAULT_IMAGE_BASE64))], { type: DEFAULT_IMAGE_TYPE })
+      new Blob([toByteArray(DEFAULT_IMAGE_BASE64)], { type: DEFAULT_IMAGE_TYPE })
     ));
 
   const backgroundImage = spinnerAnimationBackgroundImage || `url('${defaultImageBlobURL}')`;

package/src/Styles/StyleSet/StackedLayout.ts

@@ -1,13 +1,11 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [2] }] */
 
 import { StrictStyleOptions } from 'botframework-webchat-api';
-import CSSTokens from '../CSSTokens';
 
 export default function createStackedLayoutStyle({
-  bubbleAttachmentMaxWidth,
-  bubbleAttachmentMinWidth,
-  bubbleMessageMaxWidth,
-  bubbleMessageMinWidth,
+  avatarSize,
+  bubbleMaxWidth,
+  bubbleMinWidth,
   paddingRegular,
   transitionDuration
 }: StrictStyleOptions) {
@@ -33,8 +31,8 @@ export default function createStackedLayoutStyle({
       },
 
       '& .webchat__stacked-layout__attachment': {
-        maxWidth: CSSTokens.MaxWidthAttachmentBubble,
-        minWidth: CSSTokens.MinWidthAttachmentBubble,
+        maxWidth: bubbleMaxWidth,
+        minWidth: bubbleMinWidth,
         transitionDuration,
         transitionProperty: 'max-width, min-width'
       },
@@ -50,8 +48,7 @@ export default function createStackedLayoutStyle({
         },
 
       '& .webchat__stacked-layout__message': {
-        maxWidth: CSSTokens.MaxWidthMessageBubble,
-        minWidth: CSSTokens.MinWidthMessageBubble,
+        maxWidth: bubbleMaxWidth,
         overflow: 'hidden',
         transitionDuration,
         transitionProperty: 'max-width'
@@ -65,20 +62,14 @@ export default function createStackedLayoutStyle({
 
       '&.webchat__stacked-layout--hide-avatar, &.webchat__stacked-layout--show-avatar': {
         '& .webchat__stacked-layout__avatar-gutter': {
-          width: CSSTokens.SizeAvatar
+          width: avatarSize
         }
       },
 
       '&.webchat__stacked-layout--hide-avatar, &.webchat__stacked-layout--show-avatar, &.webchat__stacked-layout--hide-nub, &.webchat__stacked-layout--show-nub':
         {
-          '& .webchat__stacked-layout__attachment': {
-            maxWidth: bubbleAttachmentMaxWidth + paddingRegular,
-            minWidth: bubbleAttachmentMinWidth + paddingRegular
-          },
-
-          '& .webchat__stacked-layout__message': {
-            maxWidth: bubbleMessageMaxWidth + paddingRegular,
-            minWidth: bubbleMessageMinWidth + paddingRegular
+          '& .webchat__stacked-layout__attachment, & .webchat__stacked-layout__message': {
+            maxWidth: bubbleMaxWidth + paddingRegular
           },
 
           '& .webchat__stacked-layout__nub-pad': {

package/src/Styles/StyleSet/SuggestedAction.ts

@@ -48,11 +48,19 @@ export default function createSuggestedActionStyle({
   suggestedActionHeight,
   suggestedActionImageHeight,
   suggestedActionsStackedLayoutButtonMaxHeight,
-  subtle
+  subtle,
+
+  // Deprecated
+  suggestedActionActiveBackground,
+  suggestedActionBackground,
+  suggestedActionDisabledBackground,
+  suggestedActionFocusBackground,
+  suggestedActionHoverBackground
 }: StrictStyleOptions) {
   return {
     '&.webchat__suggested-action': {
       alignItems: 'center',
+      background: suggestedActionBackground, // Deprecated as of 4.15.0. Remove on or after 2021-09-16.
       backgroundColor: suggestedActionBackgroundColor,
       borderColor: suggestedActionBorderColor || accent,
       borderRadius: suggestedActionBorderRadius,
@@ -74,6 +82,7 @@ export default function createSuggestedActionStyle({
       // 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"]': {
+        background: suggestedActionDisabledBackground,
         backgroundColor: suggestedActionBackgroundColorOnDisabled,
         borderColor: suggestedActionBorderColorOnDisabled,
         borderStyle: suggestedActionBorderStyleOnDisabled,
@@ -83,6 +92,7 @@ export default function createSuggestedActionStyle({
 
       '&:not(:disabled):not([aria-disabled="true"])': {
         '&:active': {
+          background: suggestedActionActiveBackground,
           backgroundColor: suggestedActionBackgroundColorOnActive,
           borderColor: suggestedActionBorderColorOnActive,
           borderStyle: suggestedActionBorderStyleOnActive,
@@ -92,6 +102,7 @@ export default function createSuggestedActionStyle({
 
         '&:not(:active)': {
           '&:hover': {
+            background: suggestedActionHoverBackground,
             backgroundColor: suggestedActionBackgroundColorOnHover,
             borderColor: suggestedActionBorderColorOnHover,
             borderStyle: suggestedActionBorderStyleOnHover,
@@ -101,6 +112,7 @@ export default function createSuggestedActionStyle({
 
           '&:not(:hover)': {
             '&:focus': {
+              background: suggestedActionFocusBackground,
               backgroundColor: suggestedActionBackgroundColorOnFocus,
               borderColor: suggestedActionBorderColorOnFocus,
               borderStyle: suggestedActionBorderStyleOnFocus,

package/src/Styles/StyleSet/TextContent.ts

@@ -11,14 +11,11 @@ export default function createTextContentStyle() {
       '&.webchat__text-content--is-markdown': {
         display: 'flex',
         flexDirection: 'column',
-        justifyContent: 'center',
-        gap: CSSTokens.PaddingRegular,
-        minWidth: 0
+        gap: CSSTokens.PaddingRegular
       },
 
       '& .webchat__text-content__markdown img:not(.webchat__render-markdown__external-link-icon)': {
-        maxWidth: CSSTokens.MaxWidthMessageBubble,
-        minWidth: CSSTokens.MinWidthMessageBubble,
+        maxWidth: CSSTokens.MaxWidthBubble,
         width: '100%'
       },
 
@@ -28,18 +25,6 @@ export default function createTextContentStyle() {
 
       '& .webchat__text-content__open-in-new-window-icon': {
         height: '.75em'
-      },
-
-      '& .webchat__text-content__activity-actions': {
-        alignSelf: 'flex-start',
-        display: 'flex',
-        flexWrap: 'wrap',
-        gap: `8px calc(${CSSTokens.PaddingRegular} / 2)`,
-        width: '100%'
-      },
-
-      '& .webchat__text-content__activity-actions:empty': {
-        display: 'none'
       }
     }
   };

package/src/Styles/StyleSet/ThumbButton.ts

@@ -3,96 +3,43 @@ import CSSTokens from '../CSSTokens';
 export default function () {
   return {
     '&.webchat__thumb-button': {
-      alignItems: 'center',
-      borderRadius: '2px',
-      boxSizing: 'content-box',
-      display: 'grid',
-      gridTemplateAreas: `"main"`,
-      height: '16px',
-      width: '16px',
-
-      '& .webchat__thumb-button__input': {
-        appearance: 'none',
-        background: 'transparent',
-        border: 0,
-        gridArea: 'main',
-        height: '16px',
-        margin: 0,
-        opacity: 0,
-        padding: 0,
-        width: '16px',
-
-        '&:active': {
-          background: '#EDEBE9'
-        }
+      appearance: 'none',
+      background: 'Transparent',
+      border: 0,
+      borderRadius: 2,
+      height: 16,
+      /* The Fluent icon is larger than the button. We need to clip it.
+      Without clipping, hover effect will appear on the edge of the button but not possible to click. */
+      overflow: 'hidden',
+      padding: 0,
+      width: 16,
+
+      '&:active': {
+        background: '#EDEBE9'
       },
 
-      '&:has(.webchat__thumb-button__input:focus-visible)': {
-        outline: 'solid 1px #605E5C' // <input> has opacity of 0, we need to set the outline in the container.
+      '&:focus': {
+        outline: 'solid 1px #605E5C'
       },
 
       '& .webchat__thumb-button__image': {
         color: CSSTokens.ColorAccent,
-        gridArea: 'main',
-        justifySelf: 'center', // Unsure why "justifyContent" doesn't work.
-        pointerEvents: 'none',
-        visibility: 'hidden',
-        width: 14,
-
-        '&.webchat__thumb-button__image--is-stroked': {
-          visibility: 'unset'
-        }
+        width: 14
       },
 
-      '&:has(.webchat__thumb-button__input:is(:not([aria-disabled="true"]):hover, :checked, [aria-pressed="true"]))': {
-        '& .webchat__thumb-button__image': {
-          '&.webchat__thumb-button__image--is-stroked': {
-            visibility: 'hidden'
-          },
-
-          '&.webchat__thumb-button__image--is-filled': {
-            visibility: 'unset'
-          }
-        }
+      '&:hover .webchat__thumb-button__image:not(.webchat__thumb-button__image--is-filled)': {
+        display: 'none'
       },
 
-      '&.webchat__thumb-button--large': {
-        border: '1px solid transparent',
-        borderRadius: '4px',
-        height: '30px',
-        width: '30px',
-
-        '& .webchat__thumb-button__input': {
-          background: 'currentColor',
-          height: '30px',
-          width: '30px'
-        },
-
-        '& .webchat__thumb-button__image': {
-          color: 'currentColor',
-          fontSize: '20px',
-          height: '1em',
-          width: '1em'
+      '&.webchat__thumb-button--is-pressed .webchat__thumb-button__image:not(.webchat__thumb-button__image--is-filled)':
+        {
+          display: 'none'
         },
 
-        '&:has(.webchat__thumb-button__input:is(:hover, :active, :checked, [aria-pressed="true"])) .webchat__thumb-button__image':
-          {
-            color: CSSTokens.ColorAccent
-          },
-
-        '&:has(.webchat__thumb-button__input[aria-disabled="true"]) .webchat__thumb-button__image': {
-          color: CSSTokens.ColorSubtle
-        },
-
-        '&.webchat__thumb-button--has-submitted:has(.webchat__thumb-button__input:not(:checked):not([aria-pressed="true"])) .webchat__thumb-button__tooltip':
-          {
-            display: 'none'
-          },
-
-        '&.webchat__thumb-button--has-submitted .webchat__thumb-button__tooltip': {
-          '--webchat__tooltip-anchor-inline-start': '20%'
+      '&.webchat__thumb-button:not(:hover):not(.webchat__thumb-button--is-pressed) .webchat__thumb-button__image--is-filled':
+        {
+          display: 'none'
         }
-      }
     }
   };
 }

package/src/Styles/StyleSet/TypingAnimation.ts

@@ -13,10 +13,8 @@ export default function createTypingAnimationStyle({
   typingAnimationWidth
 }: StrictStyleOptions) {
   defaultImageBlobURL ||
-    // Content is hardcoded.
-    // eslint-disable-next-line no-restricted-properties
     (defaultImageBlobURL = URL.createObjectURL(
-      new Blob([new Uint8Array(toByteArray(DEFAULT_IMAGE_BASE64))], { type: DEFAULT_IMAGE_TYPE })
+      new Blob([toByteArray(DEFAULT_IMAGE_BASE64)], { type: DEFAULT_IMAGE_TYPE })
     ));
 
   const backgroundImage = typingAnimationBackgroundImage || `url('${defaultImageBlobURL}')`;