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

package/src/SendBox/TextBox.tsx

@@ -4,9 +4,8 @@ import React, { useCallback, useMemo, useRef } from 'react';
 
 import AccessibleInputText from '../Utils/AccessibleInputText';
 import navigableEvent from '../Utils/TypeFocusSink/navigableEvent';
-import { ie11 } from '../Utils/detectBrowser';
 import { useRegisterFocusSendBox, type SendBoxFocusOptions } from '../hooks/sendBoxFocus';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 import useScrollDown from '../hooks/useScrollDown';
 import useScrollUp from '../hooks/useScrollUp';
 import useStyleSet from '../hooks/useStyleSet';
@@ -15,8 +14,11 @@ import withEmoji from '../withEmoji/withEmoji';
 import AutoResizeTextArea from './AutoResizeTextArea';
 
 import type { MutableRefObject } from 'react';
+import testIds from '../testIds';
 
-const { useDisabled, useLocalizer, usePonyfill, useSendBoxValue, useStopDictate, useStyleOptions } = hooks;
+const { useLocalizer, useSendBoxValue, useStopDictate, useStyleOptions, useUIState } = hooks;
+
+const DEFAULT_INPUT_MODE = 'text';
 
 const ROOT_STYLE = {
   '&.webchat__send-box-text-box': {
@@ -82,8 +84,7 @@ const TextBox = ({ className = '' }: Readonly<{ className?: string | undefined }
   const [value, setValue] = useSendBoxValue();
   const [{ sendBoxTextBox: sendBoxTextBoxStyleSet }] = useStyleSet();
   const [{ emojiSet, sendBoxTextWrap }] = useStyleOptions();
-  const [{ setTimeout }] = usePonyfill();
-  const [disabled] = useDisabled();
+  const [uiState] = useUIState();
   const inputElementRef: MutableRefObject<HTMLInputElement & HTMLTextAreaElement> = useRef();
   const localize = useLocalizer();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
@@ -91,6 +92,7 @@ const TextBox = ({ className = '' }: Readonly<{ className?: string | undefined }
   const scrollUp = useScrollUp();
   const submitTextBox = useTextBoxSubmit();
 
+  const disabled = uiState === 'disabled';
   const sendBoxString = localize('TEXT_INPUT_ALT');
   const typeYourMessageString = localize('TEXT_INPUT_PLACEHOLDER');
 
@@ -163,44 +165,25 @@ const TextBox = ({ className = '' }: Readonly<{ className?: string | undefined }
   );
 
   const focusCallback = useCallback(
-    (options: SendBoxFocusOptions) => {
-      const { noKeyboard } = options;
+    ({ noKeyboard }: SendBoxFocusOptions) => {
       const { current } = inputElementRef;
 
-      if (current) {
-        // The "disable soft keyboard on mobile devices" logic will not work on IE11. It will cause the <input> to become read-only until next focus.
-        // Thus, no mobile devices carry IE11 so we don't need to explicitly disable soft keyboard on IE11.
-        // See #3757 for repro and details.
-        if (noKeyboard && !ie11) {
-          // To not activate the virtual keyboard while changing focus to an input, we will temporarily set it as read-only and flip it back.
-          // https://stackoverflow.com/questions/7610758/prevent-iphone-default-keyboard-when-focusing-an-input/7610923
-          const readOnly = current.getAttribute('readonly');
-
-          current.setAttribute('readonly', 'readonly');
-
-          options.waitUntil(
-            (async function () {
-              // TODO: [P2] We should update this logic to handle quickly-successive `focusCallback`.
-              //       If a succeeding `focusCallback` is being called, the `setTimeout` should run immediately.
-              //       Or the second `focusCallback` should not set `readonly` to `true`.
-              await new Promise(resolve => setTimeout(resolve, 0));
-
-              if (current) {
-                current.focus();
-                readOnly ? current.setAttribute('readonly', readOnly) : current.removeAttribute('readonly');
-              }
-            })()
-          );
-        } else {
-          current.focus();
-        }
-      }
+      // Setting `inputMode` to `none` temporarily to suppress soft keyboard in iOS.
+      // We will revert the change once the end-user tap on the send box.
+      // This code path is only triggered when the user press "send" button to send the message, instead of pressing ENTER key.
+      noKeyboard && current?.setAttribute('inputmode', 'none');
+      current?.focus();
     },
-    [inputElementRef, setTimeout]
+    [inputElementRef]
   );
 
   useRegisterFocusSendBox(focusCallback);
 
+  const handleClick = useCallback(
+    ({ currentTarget }) => currentTarget.setAttribute('inputmode', DEFAULT_INPUT_MODE),
+    []
+  );
+
   const emojiMap = useMemo(() => new Map<string, string>(Object.entries(emojiSet)), [emojiSet]);
 
   return (
@@ -219,11 +202,13 @@ const TextBox = ({ className = '' }: Readonly<{ className?: string | undefined }
           aria-label={sendBoxString}
           className="webchat__send-box-text-box__input"
           data-id="webchat-sendbox-input"
+          data-testid={testIds.sendBoxTextBox}
           disabled={disabled}
           emojiMap={emojiMap}
           enterKeyHint="send"
-          inputMode="text"
+          inputMode={DEFAULT_INPUT_MODE}
           onChange={setValue}
+          onClick={handleClick}
           onKeyDownCapture={disabled ? undefined : handleKeyDownCapture}
           onKeyPress={disabled ? undefined : handleKeyPress}
           placeholder={typeYourMessageString}
@@ -237,11 +222,13 @@ const TextBox = ({ className = '' }: Readonly<{ className?: string | undefined }
           aria-label={sendBoxString}
           className="webchat__send-box-text-box__text-area"
           data-id="webchat-sendbox-input"
+          data-testid={testIds.sendBoxTextBox}
           disabled={disabled}
           emojiMap={emojiMap}
           enterKeyHint="send"
-          inputMode="text"
+          inputMode={DEFAULT_INPUT_MODE}
           onChange={setValue}
+          onClick={handleClick}
           onKeyDownCapture={disabled ? undefined : handleKeyDownCapture}
           onKeyPress={disabled ? undefined : handleKeyPress}
           placeholder={typeYourMessageString}

package/src/SendBoxToolbar/Assets/AttachmentIcon.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-import useStyleToEmotionObject from '../../hooks/internal/useStyleToEmotionObject';
+import { useStyleToEmotionObject } from '../../hooks/internal/styleToEmotionObject';
 
 type Props = Readonly<{ checked: boolean }>;
 

package/src/SendBoxToolbar/UploadButton.tsx

@@ -1,18 +1,19 @@
 import { hooks } from 'botframework-webchat-api';
+import { validateProps } from 'botframework-webchat-api/internal';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useCallback, useRef, type FC, type FormEventHandler, type MouseEventHandler } from 'react';
+import React, { memo, useCallback, useRef, type FormEventHandler, type MouseEventHandler } from 'react';
 import { useRefFrom } from 'use-ref-from';
+import { object, pipe, readonly, string, type InferInput } from 'valibot';
 
 import IconButton from '../SendBox/IconButton';
-import useMakeThumbnail from '../hooks/useMakeThumbnail';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 import useFocus from '../hooks/useFocus';
+import useMakeThumbnail from '../hooks/useMakeThumbnail';
 import useStyleSet from '../hooks/useStyleSet';
 import useSubmit from '../providers/internal/SendBox/useSubmit';
 import AttachmentIcon from './Assets/AttachmentIcon';
 
-const { useDisabled, useSendBoxAttachments, useLocalizer, useStyleOptions } = hooks;
+const { useSendBoxAttachments, useLocalizer, useStyleOptions, useUIState } = hooks;
 
 const ROOT_STYLE = {
   '&.webchat__upload-button': {
@@ -33,15 +34,22 @@ const ROOT_STYLE = {
 
 const PREVENT_DEFAULT_HANDLER = event => event.preventDefault();
 
-type UploadButtonProps = {
-  className?: string;
-};
+const uploadButtonPropsSchema = pipe(
+  object({
+    className: string()
+  }),
+  readonly()
+);
+
+type UploadButtonProps = InferInput<typeof uploadButtonPropsSchema>;
+
+function UploadButton(props: UploadButtonProps) {
+  const { className } = validateProps(uploadButtonPropsSchema, props);
 
-const UploadButton: FC<UploadButtonProps> = ({ className }) => {
   const [{ sendAttachmentOn, uploadAccept, uploadMultiple }] = useStyleOptions();
   const [{ uploadButton: uploadButtonStyleSet }] = useStyleSet();
-  const [disabled] = useDisabled();
   const [sendBoxAttachments, setSendBoxAttachments] = useSendBoxAttachments();
+  const [uiState] = useUIState();
   const focus = useFocus();
   const inputRef = useRef<HTMLInputElement>(null);
   const localize = useLocalizer();
@@ -49,6 +57,7 @@ const UploadButton: FC<UploadButtonProps> = ({ className }) => {
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
   const submit = useSubmit();
 
+  const disabled = uiState === 'disabled';
   const sendAttachmentOnRef = useRefFrom(sendAttachmentOn);
   const uploadFileString = localize('TEXT_INPUT_UPLOAD_BUTTON_ALT');
 
@@ -97,14 +106,7 @@ const UploadButton: FC<UploadButtonProps> = ({ className }) => {
       </IconButton>
     </div>
   );
-};
-
-UploadButton.defaultProps = {
-  className: undefined
-};
-
-UploadButton.propTypes = {
-  className: PropTypes.string
-};
+}
 
-export default UploadButton;
+export default memo(UploadButton);
+export { uploadButtonPropsSchema, type UploadButtonProps };

package/src/Styles/CustomPropertyNames.ts

@@ -1,17 +1,25 @@
 const CustomPropertyNames = Object.freeze({
   // Make sure key names does not have JavaScript forbidden names.
+  BackgroundCodeBlock: '--webchat__background--code-block',
+  BorderAnimationColor1: '--webchat__border-animation--color-1',
+  BorderAnimationColor2: '--webchat__border-animation--color-2',
+  BorderAnimationColor3: '--webchat__border-animation--color-3',
   ColorAccent: '--webchat__color--accent',
+  ColorCodeBlock: '--webchat__color--code-block',
   ColorSubtle: '--webchat__color--subtle',
   ColorTimestamp: '--webchat__color--timestamp',
   FontPrimary: '--webchat__font--primary',
   FontSizeSmall: '--webchat__font-size--small',
   IconURLExternalLink: '--webchat__icon-url--external-link',
-  MaxWidthBubble: '--webchat__max-width--bubble',
+  MaxHeightImageBubble: '--webchat__max-height--image-bubble',
+  MaxWidthAttachmentBubble: '--webchat__max-width--attachment-bubble',
+  MaxWidthMessageBubble: '--webchat__max-width--message-bubble',
   MinHeightBubble: '--webchat__min-height--bubble',
-  PaddingRegular: '--webchat__padding--regular'
-});
-
-// This is for type-checking only to make sure the CSS custom property names is `--webchat__${string}`.
-const _TypeChecking: Readonly<Record<string, `--webchat__${string}`>> = CustomPropertyNames;
+  MinHeightImageBubble: '--webchat__min-height--image-bubble',
+  MinWidthAttachmentBubble: '--webchat__min-width--attachment-bubble',
+  MinWidthMessageBubble: '--webchat__min-width--message-bubble',
+  PaddingRegular: '--webchat__padding--regular',
+  SizeAvatar: '--webchat__size--avatar'
+}) satisfies Readonly<Record<string, `--webchat__${string}`>>;
 
 export default CustomPropertyNames;

package/src/Styles/StyleSet/ActivityButton.ts

@@ -0,0 +1,46 @@
+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'
+      }
+    }
+  };
+}

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'
+        }
+      }
+    }
+  };
+}