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

package/src/SendBox/MicrophoneButton.tsx

@@ -5,13 +5,13 @@ import { hooks } from 'botframework-webchat-api';
 import { Constants } from 'botframework-webchat-core';
 import classNames from 'classnames';
 import memoize from 'memoize-one';
-import PropTypes from 'prop-types';
-import React, { FC, useCallback, useState } from 'react';
+import React, { memo, useCallback, useState } from 'react';
 
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 import useDictateAbortable from '../hooks/useDictateAbortable';
 import useStyleSet from '../hooks/useStyleSet';
 import useWebSpeechPonyfill from '../hooks/useWebSpeechPonyfill';
+import { useLiveRegion } from '../providers/LiveRegionTwin';
 import MicrophoneIcon from './Assets/MicrophoneIcon';
 import IconButton from './IconButton';
 
@@ -20,12 +20,12 @@ const { DictateState } = Constants;
 const {
   useDictateInterims,
   useDictateState,
-  useDisabled,
   useLocalizer,
   useSendBoxValue,
   useShouldSpeakIncomingActivity,
   useStartDictate,
-  useStopDictate
+  useStopDictate,
+  useUIState
 } = hooks;
 
 const ROOT_STYLE = {
@@ -97,21 +97,21 @@ function useMicrophoneButtonClick(): () => void {
 function useMicrophoneButtonDisabled(): [boolean] {
   const [abortable] = useDictateAbortable();
   const [dictateState] = useDictateState();
-  const [disabled] = useDisabled();
+  const [uiState] = useUIState();
 
   return [
-    disabled ||
+    uiState === 'disabled' ||
       dictateState === DictateState.STARTING ||
       dictateState === DictateState.STOPPING ||
       (dictateState === DictateState.DICTATING && !abortable)
   ];
 }
 
-type MicrophoneButtonProps = {
-  className?: string;
-};
+type MicrophoneButtonProps = Readonly<{
+  className?: string | undefined;
+}>;
 
-const MicrophoneButton: FC<MicrophoneButtonProps> = ({ className }) => {
+const MicrophoneButton = ({ className }: MicrophoneButtonProps) => {
   const [{ microphoneButton: microphoneButtonStyleSet }] = useStyleSet();
   const [dictateState] = useDictateState();
   const [disabled] = useMicrophoneButtonDisabled();
@@ -121,6 +121,12 @@ const MicrophoneButton: FC<MicrophoneButtonProps> = ({ className }) => {
 
   const dictating = dictateState === DictateState.DICTATING;
 
+  const message = localize(
+    dictating ? 'SPEECH_INPUT_MICROPHONE_BUTTON_OPEN_ALT' : 'SPEECH_INPUT_MICROPHONE_BUTTON_CLOSE_ALT'
+  );
+
+  useLiveRegion(() => message && <div className="webchat__microphone-button__status">{message}</div>, [message]);
+
   return (
     <div
       aria-controls="webchatSendBoxMicrophoneButton"
@@ -140,21 +146,15 @@ const MicrophoneButton: FC<MicrophoneButtonProps> = ({ className }) => {
       >
         <MicrophoneIcon className="webchat__microphone-button__icon" />
       </IconButton>
-      <div aria-live="polite" className="sr-only" id="webchatSendBoxMicrophoneButton" role="status">
-        {localize(dictating ? 'SPEECH_INPUT_MICROPHONE_BUTTON_OPEN_ALT' : 'SPEECH_INPUT_MICROPHONE_BUTTON_CLOSE_ALT')}
+      <div className="sr-only" id="webchatSendBoxMicrophoneButton">
+        {message}
       </div>
     </div>
   );
 };
 
-MicrophoneButton.defaultProps = {
-  className: ''
-};
-
-MicrophoneButton.propTypes = {
-  className: PropTypes.string
-};
+MicrophoneButton.displayName = 'MicrophoneButton';
 
-export default MicrophoneButton;
+export default memo(MicrophoneButton);
 
 export { useMicrophoneButtonClick, useMicrophoneButtonDisabled };

package/src/SendBox/SendButton.tsx

@@ -1,22 +1,28 @@
 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 } from 'react';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
-import IconButton from './IconButton';
-import SendIcon from './Assets/SendIcon';
 import useSubmit from '../providers/internal/SendBox/useSubmit';
+import SendIcon from './Assets/SendIcon';
+import IconButton from './IconButton';
 
-import type { FC } from 'react';
+const { useLocalizer, useUIState } = hooks;
 
-const { useDisabled, useLocalizer } = hooks;
+const sendButtonPropsSchema = pipe(
+  object({
+    className: optional(string())
+  }),
+  readonly()
+);
 
-type SendButtonProps = {
-  className?: string;
-};
+type SendButtonProps = InferInput<typeof sendButtonPropsSchema>;
 
-const SendButton: FC<SendButtonProps> = ({ className }) => {
-  const [disabled] = useDisabled();
+function SendButton(props: SendButtonProps) {
+  const { className } = validateProps(sendButtonPropsSchema, props);
+
+  const [uiState] = useUIState();
   const localize = useLocalizer();
   const submit = useSubmit();
 
@@ -26,20 +32,13 @@ const SendButton: FC<SendButtonProps> = ({ className }) => {
     <IconButton
       alt={localize('TEXT_INPUT_SEND_BUTTON_ALT')}
       className={classNames('webchat__send-button', className)}
-      disabled={disabled}
+      disabled={uiState === 'disabled'}
       onClick={handleClick}
     >
       <SendIcon />
     </IconButton>
   );
-};
-
-SendButton.defaultProps = {
-  className: undefined
-};
-
-SendButton.propTypes = {
-  className: PropTypes.string
-};
+}
 
 export default SendButton;
+export { sendButtonPropsSchema, type SendButtonProps };

package/src/SendBox/SuggestedAction.tsx

@@ -1,12 +1,13 @@
 import { hooks } from 'botframework-webchat-api';
-import type { DirectLineCardAction } from 'botframework-webchat-core';
+import { validateProps } from 'botframework-webchat-api/internal';
+import { type DirectLineCardAction } from 'botframework-webchat-core';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { MouseEventHandler, useCallback, VFC } from 'react';
+import React, { memo, useCallback, type MouseEventHandler } from 'react';
+import { any, literal, number, object, optional, pipe, readonly, string, union, type InferInput } from 'valibot';
 
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 import useFocusVisible from '../hooks/internal/useFocusVisible';
 import useLocalizeAccessKey from '../hooks/internal/useLocalizeAccessKey';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 import useSuggestedActionsAccessKey from '../hooks/internal/useSuggestedActionsAccessKey';
 import useFocus from '../hooks/useFocus';
 import useScrollToEnd from '../hooks/useScrollToEnd';
@@ -15,7 +16,7 @@ import useItemRef from '../providers/RovingTabIndex/useItemRef';
 import AccessibleButton from '../Utils/AccessibleButton';
 import useFocusAccessKeyEffect from '../Utils/AccessKeySink/useFocusAccessKeyEffect';
 
-const { useDirection, useDisabled, usePerformCardAction, useStyleOptions, useSuggestedActions } = hooks;
+const { useDirection, usePerformCardAction, useStyleOptions, useSuggestedActions, useUIState } = hooks;
 
 const ROOT_STYLE = {
   '&.webchat__suggested-action': {
@@ -24,47 +25,57 @@ const ROOT_STYLE = {
   }
 };
 
-type SuggestedActionProps = {
-  buttonText: string;
-  className?: string;
-  displayText?: string;
-  image?: string;
-  imageAlt?: string;
-  itemIndex: number;
-  text?: string;
-  textClassName?: string;
-  type?:
-    | 'call'
-    | 'downloadFile'
-    | 'imBack'
-    | 'messageBack'
-    | 'openUrl'
-    | 'playAudio'
-    | 'playVideo'
-    | 'postBack'
-    | 'showImage'
-    | 'signin';
-  value?: any;
-};
+const suggestedActionPropsSchema = pipe(
+  object({
+    buttonText: string(),
+    className: optional(string()),
+    displayText: optional(string()),
+    image: optional(string()),
+    imageAlt: optional(string()),
+    itemIndex: number(),
+    text: optional(string()),
+    textClassName: optional(string()),
+    type: optional(
+      union([
+        literal('call'),
+        literal('downloadFile'),
+        literal('imBack'),
+        literal('messageBack'),
+        literal('openUrl'),
+        literal('playAudio'),
+        literal('playVideo'),
+        literal('postBack'),
+        literal('showImage'),
+        literal('signin')
+      ])
+    ),
+    value: any()
+  }),
+  readonly()
+);
+
+type SuggestedActionProps = InferInput<typeof suggestedActionPropsSchema>;
+
+function SuggestedAction(props: SuggestedActionProps) {
+  const {
+    buttonText,
+    className,
+    displayText = '',
+    image = '',
+    imageAlt,
+    itemIndex,
+    text = '',
+    textClassName,
+    type,
+    value
+  } = validateProps(suggestedActionPropsSchema, props);
 
-const SuggestedAction: VFC<SuggestedActionProps> = ({
-  buttonText,
-  className,
-  displayText,
-  image,
-  imageAlt,
-  itemIndex,
-  text,
-  textClassName,
-  type,
-  value
-}) => {
   const [_, setSuggestedActions] = useSuggestedActions();
   const [{ suggestedActionsStackedLayoutButtonTextWrap }] = useStyleOptions();
   const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet();
   const [accessKey] = useSuggestedActionsAccessKey();
   const [direction] = useDirection();
-  const [disabled] = useDisabled();
+  const [uiState] = useUIState();
   const focus = useFocus();
   const focusRef = useItemRef<HTMLButtonElement>(itemIndex);
   const localizeAccessKeyAsAriaKeyShortcuts = useLocalizeAccessKey('aria-keyshortcuts');
@@ -109,9 +120,9 @@ const SuggestedAction: VFC<SuggestedActionProps> = ({
         },
         rootClassName,
         suggestedActionStyleSet + '',
-        (className || '') + ''
+        className
       )}
-      disabled={disabled}
+      disabled={uiState === 'disabled'}
       onClick={handleClick}
       ref={focusRef}
       type="button"
@@ -126,36 +137,11 @@ const SuggestedAction: VFC<SuggestedActionProps> = ({
           src={image}
         />
       )}
-      <span className={classNames('webchat__suggested-action__text', (textClassName || '') + '')}>{buttonText}</span>
+      <span className={classNames('webchat__suggested-action__text', textClassName)}>{buttonText}</span>
       <div className="webchat__suggested-action__keyboard-focus-indicator" />
     </AccessibleButton>
   );
-};
-
-SuggestedAction.defaultProps = {
-  className: '',
-  displayText: '',
-  image: '',
-  imageAlt: undefined,
-  text: '',
-  textClassName: '',
-  type: undefined,
-  value: undefined
-};
-
-SuggestedAction.propTypes = {
-  buttonText: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  displayText: PropTypes.string,
-  image: PropTypes.string,
-  imageAlt: PropTypes.string,
-  itemIndex: PropTypes.number.isRequired,
-  text: PropTypes.string,
-  textClassName: PropTypes.string,
-  // TypeScript class is not mappable to PropTypes.
-  // @ts-ignore
-  type: PropTypes.string,
-  value: PropTypes.any
-};
+}
 
-export default SuggestedAction;
+export default memo(SuggestedAction);
+export { suggestedActionPropsSchema, type SuggestedActionProps };

package/src/SendBox/SuggestedActions.tsx

@@ -10,7 +10,7 @@ import BasicFilm, { createBasicStyleSet as createBasicStyleSetForReactFilm } fro
 import computeSuggestedActionText from '../Utils/computeSuggestedActionText';
 import useFocusWithin from '../hooks/internal/useFocusWithin';
 import useNonce from '../hooks/internal/useNonce';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 import useFocus from '../hooks/useFocus';
 import useStyleSet from '../hooks/useStyleSet';
 import RovingTabIndexComposer from '../providers/RovingTabIndex/RovingTabIndexComposer';
@@ -127,7 +127,6 @@ const SuggestedActionFlowContainer = ({ children, className, label }) => {
   return (
     <div
       aria-label={label}
-      aria-live="polite"
       aria-orientation="horizontal"
       className={classNames(
         'webchat__suggested-actions',
@@ -168,7 +167,6 @@ const SuggestedActionStackedContainer = ({ children, className, label }) => {
   return (
     <div
       aria-label={label}
-      aria-live="polite"
       aria-orientation="vertical"
       className={classNames(
         'webchat__suggested-actions',

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