botframework-webchat-component 4.18.0 → 4.18.1-hotfix.20260127.b53acdf

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,80 @@
+import CSSTokens from '../CSSTokens';
+
+export default function createCodeBlockCopyButtonStyle() {
+  return {
+    '&.webchat__code-block-copy-button': {
+      '--webchat__code-block-copy-button--icon-url': `url(data:image/svg+xml;utf8,${encodeURIComponent('<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.08535 2C5.29127 1.4174 5.84689 1 6.5 1H9.5C10.1531 1 10.7087 1.4174 10.9146 2H11.5C12.3284 2 13 2.67157 13 3.5V7.49561C12.8322 7.49553 12.664 7.52345 12.503 7.57995C12.528 7.11911 12.3372 6.67672 12 6.37739V3.5C12 3.22386 11.7761 3 11.5 3H10.9146C10.7087 3.5826 10.1531 4 9.5 4H6.5C5.84689 4 5.29127 3.5826 5.08535 3H4.5C4.22386 3 4 3.22386 4 3.5V13.5C4 13.7761 4.22386 14 4.5 14H7.58766L7.56249 14.0881C7.47349 14.3996 7.48984 14.7162 7.59039 15H4.5C3.67157 15 3 14.3284 3 13.5V3.5C3 2.67157 3.67157 2 4.5 2H5.08535ZM6.5 2C6.22386 2 6 2.22386 6 2.5C6 2.77614 6.22386 3 6.5 3H9.5C9.77614 3 10 2.77614 10 2.5C10 2.22386 9.77614 2 9.5 2H6.5ZM9.36987 14.8419C9.28002 14.9377 9.15458 14.9956 9.02143 15C9.01081 15.0003 8.99972 15.0003 8.98902 15C8.94885 14.9987 8.90781 14.9924 8.86742 14.9809C8.83423 14.9714 8.80279 14.9588 8.77332 14.9435C8.67226 14.8908 8.59445 14.8061 8.54918 14.7061C8.50203 14.602 8.49015 14.4813 8.52401 14.3628L10.524 7.36277C10.5999 7.09725 10.8766 6.9435 11.1421 7.01937C11.4076 7.09523 11.5614 7.37197 11.4855 7.63749L9.48553 14.6375C9.46293 14.7166 9.42251 14.7858 9.36987 14.8419ZM7.37963 9.32101C7.55934 9.11135 7.53506 8.7957 7.3254 8.61599C7.11573 8.43628 6.80008 8.46056 6.62037 8.67022L5.12037 10.4202C4.95988 10.6075 4.95988 10.8838 5.12037 11.071L6.62037 12.821C6.80008 13.0307 7.11573 13.055 7.3254 12.8752C7.53506 12.6955 7.55934 12.3799 7.37963 12.1702L6.15854 10.7456L7.37963 9.32101ZM12.6746 12.8753C12.4649 12.6956 12.4407 12.3799 12.6204 12.1703L13.8415 10.7457L12.6204 9.32105C12.4407 9.11139 12.4649 8.79574 12.6746 8.61603C12.8843 8.43632 13.1999 8.4606 13.3796 8.67026L14.8796 10.4203C15.0401 10.6075 15.0401 10.8838 14.8796 11.0711L13.3796 12.8211C13.1999 13.0307 12.8843 13.055 12.6746 12.8753Z" fill="#000000"/></svg>')})`,
+      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--copied': {
+        '--webchat__code-block-copy-button--icon-url': `url(data:image/svg+xml;utf8,${encodeURIComponent('<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.08535 2C5.29127 1.4174 5.84689 1 6.5 1H9.5C10.1531 1 10.7087 1.4174 10.9146 2H11.5C12.3284 2 13 2.67157 13 3.5V6.20703C12.6777 6.11588 12.3434 6.05337 12 6.02242V3.5C12 3.22386 11.7761 3 11.5 3H10.9146C10.7087 3.5826 10.1531 4 9.5 4H6.5C5.84689 4 5.29127 3.5826 5.08535 3H4.5C4.22386 3 4 3.22386 4 3.5V13.5C4 13.7761 4.22386 14 4.5 14H6.59971C6.78261 14.3578 7.00353 14.6929 7.25716 15H4.5C3.67157 15 3 14.3284 3 13.5V3.5C3 2.67157 3.67157 2 4.5 2H5.08535ZM6.5 2C6.22386 2 6 2.22386 6 2.5C6 2.77614 6.22386 3 6.5 3H9.5C9.77614 3 10 2.77614 10 2.5C10 2.22386 9.77614 2 9.5 2H6.5ZM16 11.5C16 13.9853 13.9853 16 11.5 16C9.01472 16 7 13.9853 7 11.5C7 9.01472 9.01472 7 11.5 7C13.9853 7 16 9.01472 16 11.5ZM13.8536 9.64645C13.6583 9.45118 13.3417 9.45118 13.1464 9.64645L10.5 12.2929L9.85355 11.6464C9.65829 11.4512 9.34171 11.4512 9.14645 11.6464C8.95118 11.8417 8.95118 12.1583 9.14645 12.3536L10.1464 13.3536C10.3417 13.5488 10.6583 13.5488 10.8536 13.3536L13.8536 10.3536C14.0488 10.1583 14.0488 9.84171 13.8536 9.64645Z" fill="#000000"/></svg>')})`
+      },
+
+      '& .webchat__code-block-copy-button__icon': {
+        backgroundColor: '#707070',
+        height: '16px',
+        gridColumn: 1,
+        gridRow: 1,
+        maskImage: 'var(--webchat__code-block-copy-button--icon-url)',
+        maskRepeat: 'no-repeat',
+        WebkitMaskImage: 'var(--webchat__code-block-copy-button--icon-url)',
+        WebkitMaskRepeat: 'no-repeat',
+        width: '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/FeedbackForm.ts

@@ -0,0 +1,78 @@
+import CSSTokens from '../CSSTokens';
+
+export default function createFeedbackFormStyle() {
+  return {
+    '&.webchat__feedback-form__root-container': {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '8px',
+      width: '100%'
+    },
+    '.webchat__feedback-form__root-child': {
+      display: 'flex'
+    },
+    '.webchat__feedback-form': {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '4px',
+      position: 'relative'
+    },
+    '.webchat__feedback-form__body': {
+      fontFamily: CSSTokens.FontPrimary,
+      fontStyle: 'normal',
+      fontWeight: 400,
+      fontSize: '14px',
+      lineHeight: '20px',
+      color: '#373435'
+    },
+    '.webchat__feedback-form__caption': {
+      fontFamily: CSSTokens.FontPrimary,
+      fontStyle: 'normal',
+      fontWeight: 400,
+      fontSize: '10px',
+      lineHeight: '14px',
+      color: CSSTokens.ColorSubtle
+    },
+    '.webchat__feedback-form__container': {
+      display: 'flex',
+      gap: '8px',
+      marginTop: '6px'
+    },
+    '.webchat__feedback-form__submit-button': {
+      backgroundColor: CSSTokens.ColorAccent,
+      border: `1px solid ${CSSTokens.ColorAccent}`,
+      borderRadius: '4px',
+      color: '#FFFFFF',
+      cursor: 'pointer',
+      fontSize: '12px',
+      fontFamily: CSSTokens.FontPrimary,
+      height: '24px',
+      padding: '0 8px'
+    },
+    '.webchat__feedback-form__submit-button:hover': {
+      backgroundColor: '#004a98',
+      border: '1px solid #004a98',
+      color: '#FFFFFF'
+    },
+    '.webchat__feedback-form__submit-button:active': {
+      backgroundColor: '#004a98',
+      border: '1px solid #004a98',
+      color: '#FFFFFF'
+    },
+    '.webchat__feedback-form__cancel-button': {
+      backgroundColor: '#FFFFFF',
+      borderRadius: '4px',
+      cursor: 'pointer',
+      fontSize: '12px',
+      border: '1px solid #E8E8E8',
+      color: CSSTokens.ColorSubtle,
+      fontFamily: CSSTokens.FontPrimary,
+      height: '24px',
+      padding: '0 8px'
+    },
+    '.webchat__feedback-form__cancel-button:hover': {
+      backgroundColor: CSSTokens.ColorSubtle,
+      color: '#FFFFFF'
+    }
+  };
+}

package/src/Styles/StyleSet/FeedbackTextArea.ts

@@ -0,0 +1,81 @@
+import CSSTokens from '../CSSTokens';
+
+export default function createFeedbackTextAreaStyle() {
+  return {
+    '&.webchat__feedback-form-text-area': {
+      display: 'grid',
+      gridTemplateAreas: `'main'`,
+      maxHeight: '200px',
+      overflow: 'hidden',
+      backgroundColor: '#FFFFFF',
+      borderRadius: '4px',
+      border: '1px solid #E8E8E8',
+      fontFamily: CSSTokens.FontPrimary,
+      fontSize: '14px',
+      gap: '6px',
+      lineHeight: '20px',
+      padding: '8px 12px',
+      position: 'relative',
+      '&::after': {
+        borderBottomLeftRadius: '4px',
+        borderBottomRightRadius: '4px',
+        borderBottom: `3px solid ${CSSTokens.ColorAccent}`,
+        bottom: '-1px',
+        clipPath: 'inset(calc(100% - 3px) 50% 0 50%)',
+        content: '""',
+        height: '4px',
+        left: '-1px',
+        position: 'absolute',
+        right: '-1px',
+        transition: 'clip-path 0 cubic-bezier(1, 0, 1, 1)'
+      },
+      '&:focus-within': {
+        border: '1px solid #E8E8E8'
+      },
+      '&:focus-within::after': {
+        clipPath: 'inset(calc(100% - 3px) 0 0 0)',
+        transition: 'clip-path 200ms cubic-bezier(0, 0, 0, 1)'
+      }
+    },
+    '&.webchat__feedback-form-text-area--hidden': {
+      height: 0,
+      visibility: 'collapse'
+    },
+    '.webchat__feedback-form-text-area-shared': {
+      border: 'none',
+      font: 'inherit',
+      gridArea: 'main',
+      outline: 'inherit',
+      overflowWrap: 'anywhere',
+      resize: 'inherit',
+      scrollbarGutter: 'stable'
+    },
+    '.webchat__feedback-form-text-area-doppelganger': {
+      overflow: 'hidden',
+      visibility: 'hidden',
+      whiteSpace: 'pre-wrap'
+    },
+    '.webchat__feedback-form-text-area-input': {
+      backgroundColor: 'inherit',
+      color: 'currentColor',
+      height: '100%',
+      padding: 0
+    },
+    '.webchat__feedback-form-text-area-input--scroll': {
+      scrollbarColor: 'unset',
+      scrollbarWidth: 'unset',
+      MozScrollbarColor: `#373435 ${CSSTokens.ColorSubtle}`,
+      MozScrollbarWidth: 'thin',
+      '&::-webkit-scrollbar': {
+        width: '8px'
+      },
+      '&::-webkit-scrollbar-thumb': {
+        backgroundColor: CSSTokens.ColorSubtle,
+        borderRadius: '10px'
+      },
+      '&::-webkit-scrollbar-corner': {
+        backgroundColor: '#373435'
+      }
+    }
+  };
+}

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
       },

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%'
         },
 

package/src/Styles/StyleSet/MonochromeImageMasker.ts

@@ -0,0 +1,10 @@
+export default function createMonochromeImageMaskerStyleSet() {
+  return {
+    '&.webchat__monochrome-image-masker': {
+      backgroundColor: '#707070',
+      mask: 'var(--monochrome-image-masker__mask-image, var(--webchat__monochrome-image-masker__mask-image)) no-repeat 100% / 100%',
+      WebkitMask:
+        'var(--monochrome-image-masker__mask-image, var(--webchat__monochrome-image-masker__mask-image)) no-repeat 100% / 100%'
+    }
+  };
+}

package/src/Styles/StyleSet/RenderMarkdown.ts

@@ -65,6 +65,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
       }
     }
   };

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',