botframework-webchat-component 4.18.2 → 4.19.0

package/src/Styles/StyleSet/SendBox.ts

@@ -1,6 +1,17 @@
-import { StrictStyleOptions } from 'botframework-webchat-api';
+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;
+}
 
 export default function createSendBoxStyle({
+  paddingRegular,
+  primaryFont,
   sendBoxBackground,
   sendBoxBorderBottom,
   sendBoxBorderLeft,
@@ -10,6 +21,8 @@ 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' },
@@ -17,12 +30,49 @@ export default function createSendBoxStyle({
       '& .webchat__send-box__main': {
         alignItems: 'stretch',
         backgroundColor: sendBoxBackground,
-        borderBottom: sendBoxBorderBottom,
-        borderLeft: sendBoxBorderLeft,
-        borderRight: sendBoxBorderRight,
-        borderTop: sendBoxBorderTop,
-        minHeight: sendBoxHeight
+        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'
       }
     }
-  };
+  } satisfies StyleSet;
 }

package/src/Styles/StyleSet/SendBoxButton.ts

@@ -27,14 +27,16 @@ 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
       },
@@ -42,7 +44,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"]': {
-        fill: sendBoxButtonColorOnDisabled,
+        color: sendBoxButtonColorOnDisabled,
 
         '& .webchat__icon-button__shade': {
           backgroundColor: sendBoxButtonShadeColorOnDisabled
@@ -51,7 +53,7 @@ export default function createSendBoxButtonStyle({
 
       '&:not(:disabled):not([aria-disabled="true"])': {
         '&:active': {
-          fill: sendBoxButtonColorOnActive,
+          color: sendBoxButtonColorOnActive,
 
           '& .webchat__icon-button__shade': {
             backgroundColor: sendBoxButtonShadeColorOnActive
@@ -60,7 +62,7 @@ export default function createSendBoxButtonStyle({
 
         '&:not(:active)': {
           '&:hover': {
-            fill: sendBoxButtonColorOnHover,
+            color: sendBoxButtonColorOnHover,
 
             '& .webchat__icon-button__shade': {
               backgroundColor: sendBoxButtonShadeColorOnHover
@@ -69,7 +71,7 @@ export default function createSendBoxButtonStyle({
 
           '&:not(:hover)': {
             '&:focus': {
-              fill: sendBoxButtonColorOnFocus,
+              color: sendBoxButtonColorOnFocus,
 
               '& .webchat__icon-button__shade': {
                 backgroundColor: sendBoxButtonShadeColorOnFocus

package/src/Styles/StyleSet/SendBoxTextBox.ts

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

package/src/Styles/StyleSet/SendStatus.ts

@@ -14,6 +14,18 @@ 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/SpinnerAnimation.ts

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

package/src/Styles/StyleSet/StackedLayout.ts

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

package/src/Styles/StyleSet/SuggestedAction.ts

@@ -48,19 +48,11 @@ export default function createSuggestedActionStyle({
   suggestedActionHeight,
   suggestedActionImageHeight,
   suggestedActionsStackedLayoutButtonMaxHeight,
-  subtle,
-
-  // Deprecated
-  suggestedActionActiveBackground,
-  suggestedActionBackground,
-  suggestedActionDisabledBackground,
-  suggestedActionFocusBackground,
-  suggestedActionHoverBackground
+  subtle
 }: 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,
@@ -82,7 +74,6 @@ 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,
@@ -92,7 +83,6 @@ export default function createSuggestedActionStyle({
 
       '&:not(:disabled):not([aria-disabled="true"])': {
         '&:active': {
-          background: suggestedActionActiveBackground,
           backgroundColor: suggestedActionBackgroundColorOnActive,
           borderColor: suggestedActionBorderColorOnActive,
           borderStyle: suggestedActionBorderStyleOnActive,
@@ -102,7 +92,6 @@ export default function createSuggestedActionStyle({
 
         '&:not(:active)': {
           '&:hover': {
-            background: suggestedActionHoverBackground,
             backgroundColor: suggestedActionBackgroundColorOnHover,
             borderColor: suggestedActionBorderColorOnHover,
             borderStyle: suggestedActionBorderStyleOnHover,
@@ -112,7 +101,6 @@ export default function createSuggestedActionStyle({
 
           '&:not(:hover)': {
             '&:focus': {
-              background: suggestedActionFocusBackground,
               backgroundColor: suggestedActionBackgroundColorOnFocus,
               borderColor: suggestedActionBorderColorOnFocus,
               borderStyle: suggestedActionBorderStyleOnFocus,

package/src/Styles/StyleSet/TextContent.ts

@@ -11,11 +11,14 @@ export default function createTextContentStyle() {
       '&.webchat__text-content--is-markdown': {
         display: 'flex',
         flexDirection: 'column',
-        gap: CSSTokens.PaddingRegular
+        justifyContent: 'center',
+        gap: CSSTokens.PaddingRegular,
+        minWidth: 0
       },
 
       '& .webchat__text-content__markdown img:not(.webchat__render-markdown__external-link-icon)': {
-        maxWidth: CSSTokens.MaxWidthBubble,
+        maxWidth: CSSTokens.MaxWidthMessageBubble,
+        minWidth: CSSTokens.MinWidthMessageBubble,
         width: '100%'
       },
 
@@ -25,6 +28,18 @@ 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,43 +3,96 @@ import CSSTokens from '../CSSTokens';
 export default function () {
   return {
     '&.webchat__thumb-button': {
-      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'
+      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'
+        }
       },
 
-      '&:focus': {
-        outline: 'solid 1px #605E5C'
+      '&: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.
       },
 
       '& .webchat__thumb-button__image': {
         color: CSSTokens.ColorAccent,
-        width: 14
+        gridArea: 'main',
+        justifySelf: 'center', // Unsure why "justifyContent" doesn't work.
+        pointerEvents: 'none',
+        visibility: 'hidden',
+        width: 14,
+
+        '&.webchat__thumb-button__image--is-stroked': {
+          visibility: 'unset'
+        }
       },
 
-      '&:hover .webchat__thumb-button__image:not(.webchat__thumb-button__image--is-filled)': {
-        display: 'none'
+      '&: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'
+          }
+        }
       },
 
-      '&.webchat__thumb-button--is-pressed .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:not(:hover):not(.webchat__thumb-button--is-pressed) .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%'
         }
+      }
     }
   };
 }

package/src/Styles/StyleSet/Tooltip.ts

@@ -0,0 +1,66 @@
+export default () => ({
+  '*:has(> &.webchat__tooltip)': {
+    position: 'relative',
+
+    // For <button>, the tooltip will be placed inside <button>.
+    // For <input type="checkbox/radio">, the tooltip will be placed after <input>.
+    '&:is(:hover, :focus-visible, :active) > .webchat__tooltip, &:has(:is(:hover, :focus-visible, :active)) > .webchat__tooltip':
+      {
+        opacity: 1,
+        transitionDelay: '400ms'
+      }
+  },
+
+  '&.webchat__tooltip': {
+    '--webchat__tooltip-tip-size': '8.484px',
+    '--webchat__tooltip-background': '#fff',
+    '--webchat__tooltip-anchor-inline-start': '50%',
+
+    background: 'var(--webchat__tooltip-background)',
+    borderRadius: '4px',
+    color: '#242424',
+    filter: `drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.14)) drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.12))`,
+    fontSize: '12px',
+    inlineSize: 'max-content',
+    isolation: 'isolate',
+    lineHeight: '16px',
+    margin: 0,
+    maxInlineSize: '30ch',
+    opacity: 0,
+    padding: '6px 12px',
+    pointerEvents: 'none',
+    position: 'absolute',
+    textAlign: 'start',
+    transition: 'opacity 0.2s ease',
+    userSelect: 'none',
+    willChange: 'filter',
+
+    '&::after': {
+      background: 'inherit',
+      color: 'currentColor',
+      content: `""`,
+      inset: 0,
+      position: 'absolute'
+    },
+
+    '&.webchat__tooltip--block-start, &.webchat__tooltip--block-end': {
+      textAlign: 'center'
+    },
+
+    '&.webchat__tooltip--block-start': {
+      insetBlockEnd: 'calc(100% + 7px)',
+      insetInlineStart: '50%',
+      transform: 'translate(calc(-1 * var(--webchat__tooltip-anchor-inline-start)), 0)',
+      '&::after': {
+        border: '1px solid var(--webchat__tooltip-background)',
+        borderBottomLeftRadius: '2px',
+        clipPath: 'polygon(0% 0%, 100% 100%, 0% 100%)',
+        height: 'var(--webchat__tooltip-tip-size)',
+        insetBlockStart: 'calc(100% - 6px)',
+        insetInlineStart: 'calc(var(--webchat__tooltip-anchor-inline-start) - var(--webchat__tooltip-tip-size) / 2)',
+        transform: 'rotate(-45deg)',
+        width: 'var(--webchat__tooltip-tip-size)'
+      }
+    }
+  }
+});

package/src/Styles/StyleSet/TypingAnimation.ts

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

package/src/Styles/StyleSet/ViewCodeDialog.ts

@@ -0,0 +1,70 @@
+import CSSTokens from '../CSSTokens';
+
+export default function createViewCodeDialogStyle() {
+  return {
+    '&.webchat__view-code-dialog': {
+      boxSizing: 'border-box',
+      display: 'grid',
+      height: '100%',
+      maxHeight: '100vh',
+      overflow: 'hidden',
+      padding: '1rem',
+      placeItems: 'center',
+
+      '& .webchat__modal-dialog__box': {
+        display: 'flex',
+        flexDirection: 'column',
+        maxHeight: '100%',
+        maxWidth: '100%',
+        position: 'relative'
+      },
+
+      '& .webchat__modal-dialog__close-button-layout': {
+        position: 'absolute',
+        right: 0
+      },
+
+      '& .webchat__modal-dialog__body': {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: CSSTokens.PaddingRegular,
+        overflow: 'hidden'
+      },
+
+      '& .webchat__view-code-dialog__header': {
+        alignItems: 'center',
+        display: 'flex',
+        paddingInlineEnd: '30px'
+      },
+
+      '& .webchat__view-code-dialog__title': {
+        margin: '0 auto 0 0',
+        textTransform: 'capitalize'
+      },
+
+      '& .webchat__view-code-dialog__body': {
+        border: 'none',
+        borderRadius: 0,
+        overflow: 'auto',
+        height: '100%',
+
+        '.webchat__code-block__body': {
+          display: 'block',
+          margin: 0,
+          padding: '16px 0'
+        }
+      },
+
+      '& .webchat__view-code-dialog__footer': {
+        color: CSSTokens.ColorSubtle,
+        lineHeight: '20px'
+      },
+
+      '& .webchat__view-code-dialog__copy-button': {
+        position: 'absolute',
+        right: '10px',
+        top: '10px'
+      }
+    }
+  };
+}

package/src/Styles/StyleSet/types/StyleSet.ts

@@ -0,0 +1,11 @@
+type ContainerQuery = `@container ${string}`;
+type MediaQuery = `@media ${string}`;
+type SelfQuery = `&${string}`;
+type CustomVariable = `--${string}`;
+
+type StyleSet = {
+  [key: ContainerQuery | MediaQuery | SelfQuery]: StyleSet;
+  [key: CustomVariable]: string;
+} & Partial<CSSStyleDeclaration>;
+
+export { type ContainerQuery, type CustomVariable, type MediaQuery, type SelfQuery, type StyleSet };