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

package/src/StyleOptions.ts

@@ -1,42 +1,37 @@
 import type { WebChatActivity } from 'botframework-webchat-core';
 
-type StrictStyleOptions = {
+type StyleOptions = {
   /**
    * Basic styling
    */
 
   /** Web Chat component accent color */
-  accent: string | undefined;
+  accent?: string;
 
   /**
    * Transcript background color
    */
-  backgroundColor: string | undefined;
+  backgroundColor?: string;
 
   /**
    * Secondary component color
    */
-  subtle: string | undefined;
+  subtle?: string;
 
   /**
    * Default padding used in most visual components
    */
-  paddingRegular: number | undefined;
+  paddingRegular?: number;
 
   /**
    * Padding used for suggestedAction buttons
    */
-  paddingWide: number | undefined;
+  paddingWide?: number;
 
   /**
-   * The duration to be used for transitions
+  Transition for Bubble, Carousel, and StackedLayout
    */
-  transitionDuration: string | undefined;
-
-  /**
-   * The easing function to be used for transitions
-   */
-  transitionEasing: string | undefined;
+  transitionDuration?: string;
 
   /**
    * Fonts
@@ -46,28 +41,28 @@ type StrictStyleOptions = {
   /**
    * Font size used for secondary components such as sendStatus
    */
-  fontSizeSmall: number | string | undefined;
+  fontSizeSmall?: number | string;
 
   /**
    * Font used for ErrorBox
    * comma-space separated string
    */
-  monospaceFont: string | undefined;
+  monospaceFont?: string;
 
   /**
    * Font used in most visual components
    * comma-space separated string
    */
-  primaryFont: string | undefined;
+  primaryFont?: string;
 
-  rootHeight: number | string | undefined;
+  rootHeight?: number | string;
 
-  rootWidth: number | string | undefined;
+  rootWidth?: number | string;
 
   /**
    * "z-index" for the root container of Web Chat. This will form a new stacking context so "z-index" used in children won't pollute.
    */
-  rootZIndex: number | undefined;
+  rootZIndex?: number;
 
   /**
    * Avatar styling
@@ -76,46 +71,46 @@ type StrictStyleOptions = {
   /**
    * Border radius used for both bot and user avatar
    */
-  avatarBorderRadius: number | string | undefined;
+  avatarBorderRadius?: number | string;
 
   /**
    * Height and width of avatar
    */
-  avatarSize: number | undefined;
+  avatarSize?: number;
 
   /**
    * Background color defaults to accent
    */
-  botAvatarBackgroundColor: string | undefined;
+  botAvatarBackgroundColor?: string;
 
   /**
    * URL string. Can be data URI or blob
    * botAvatarInitials must be set to empty string
    */
-  botAvatarImage: string | undefined;
+  botAvatarImage?: string;
 
   /**
    * Typically rendered as two letters, e.g. 'WC'
    * Empty string is required when setting botAvatarImage
    */
-  botAvatarInitials: string | undefined;
+  botAvatarInitials?: string;
 
   /**
    * Background color defaults to accent
    */
-  userAvatarBackgroundColor: string | undefined;
+  userAvatarBackgroundColor?: string;
 
   /**
    * URL string. Can be data URI or blob
    * userAvatarInitials must be set to empty string
    */
-  userAvatarImage: string | undefined;
+  userAvatarImage?: string;
 
   /**
    * Typically rendered as two letters, i.e. 'WC'
    * Empty string is required when setting userAvatarImage
    */
-  userAvatarInitials: string | undefined;
+  userAvatarInitials?: string;
 
   /**
    * Avatar grouping can be set at 3 different levels:
@@ -123,23 +118,23 @@ type StrictStyleOptions = {
    * Show avatar on activities sharing the same status ('status'; default)
    * Show avatar on every activity (true)
    */
-  showAvatarInGroup: true | 'sender' | 'status' | undefined;
+  showAvatarInGroup?: true | 'sender' | 'status';
 
   /**
    *  Bubble styling
    * 'Bubble' refers to the container of the activit(ies) from the bot and user. Below, non-'fromUser' props refer to styling for the bot activities.
    */
 
-  bubbleBackground: string | undefined;
-  bubbleBorderColor: string | undefined;
-  bubbleBorderRadius: number | undefined;
-  bubbleBorderStyle: string | undefined;
-  bubbleBorderWidth: number | undefined;
-  bubbleFromUserBackground: string | undefined;
-  bubbleFromUserBorderColor: string | undefined;
-  bubbleFromUserBorderRadius: number | undefined;
-  bubbleFromUserBorderStyle: string | undefined;
-  bubbleFromUserBorderWidth: number | undefined;
+  bubbleBackground?: string;
+  bubbleBorderColor?: string;
+  bubbleBorderRadius?: number;
+  bubbleBorderStyle?: string;
+  bubbleBorderWidth?: number;
+  bubbleFromUserBackground?: string;
+  bubbleFromUserBorderColor?: string;
+  bubbleFromUserBorderRadius?: number;
+  bubbleFromUserBorderStyle?: string;
+  bubbleFromUserBorderWidth?: number;
 
   /**
    * Nub offset 'bottom' will render nub at the bottom
@@ -147,39 +142,18 @@ type StrictStyleOptions = {
    * "top" is equivalent to positive zero.
    * "bottom" is equivalent to negative zero.
    */
-  bubbleFromUserNubOffset: number | undefined;
+  bubbleFromUserNubOffset?: number | 'bottom' | 'top';
 
   /**
    * Nub size 0 will render a sharp corner
    */
-  bubbleFromUserNubSize: number | undefined;
-
-  bubbleFromUserTextColor: string | undefined;
-
-  /**
-   * Specifies the maximum height of the bubble for image, default to 240px.
-   *
-   * CSS variable: `--webchat__max-height--image-bubble`.
-   *
-   * New in 4.18.0.
-   */
-  bubbleImageMaxHeight: number | undefined;
-
-  /**
-   * Specifies the minimum height of the bubble for image, default to 240px.
-   *
-   * CSS variable: `--webchat__min-height--image-bubble`.
-   *
-   * New in 4.18.0.
-   */
-  bubbleImageMinHeight: number | undefined;
-
-  bubbleAttachmentMaxWidth: number | undefined;
-  bubbleAttachmentMinWidth: number | undefined;
-  bubbleMessageMaxWidth: number | undefined;
-  bubbleMessageMinWidth: number | undefined;
+  bubbleFromUserNubSize?: number;
 
-  bubbleMinHeight: number | undefined;
+  bubbleFromUserTextColor?: string;
+  bubbleImageHeight?: number;
+  bubbleMaxWidth?: number;
+  bubbleMinHeight?: number;
+  bubbleMinWidth?: number;
 
   /**
    * Nub offset ''bottom' will render nub at the bottom
@@ -187,33 +161,33 @@ type StrictStyleOptions = {
    * "top" is equivalent to positive zero.
    * "bottom" is equivalent to negative zero.
    */
-  bubbleNubOffset: number | undefined;
+  bubbleNubOffset?: number | 'bottom' | 'top';
 
   /**
    * Nub size 0 will render a sharp corner
    */
-  bubbleNubSize: number | undefined;
+  bubbleNubSize?: number;
 
-  bubbleTextColor: string | undefined;
+  bubbleTextColor?: string;
 
-  messageActivityWordBreak: 'normal' | 'break-all' | 'break-word' | 'keep-all' | undefined;
+  messageActivityWordBreak?: 'normal' | 'break-all' | 'break-word' | 'keep-all';
 
   /**
    * Connectivity UI styling
    */
 
-  connectivityIconPadding: number | undefined;
-  connectivityMarginLeftRight: number | undefined;
-  connectivityMarginTopBottom: number | undefined;
-  connectivityTextSize: number | string | undefined;
-  failedConnectivity: number | string | undefined;
-  slowConnectivity: string | undefined;
-  notificationText: string | undefined;
+  connectivityIconPadding?: number;
+  connectivityMarginLeftRight?: number;
+  connectivityMarginTopBottom?: number;
+  connectivityTextSize?: number | string;
+  failedConnectivity?: number | string;
+  slowConnectivity?: string;
+  notificationText?: string;
 
   /**
    * Slow connection status will render after x amount of time with no service response
    */
-  slowConnectionAfter: number | undefined;
+  slowConnectionAfter?: number;
 
   /**
    * Emoji styling
@@ -222,19 +196,19 @@ type StrictStyleOptions = {
    * key: emoticon
    * value: unicode emoji
    */
-  emojiSet: false | Record<string, string> | undefined;
+  emojiSet?: boolean | Record<string, string>;
 
   /**
    * Live region - Accessibility
    * New activities will be rendered in the non-visual live region and removed after a certain amount of time. Modify this property to change fade time.
    */
-  internalLiveRegionFadeAfter: number | undefined;
+  internalLiveRegionFadeAfter?: number;
 
   /**
    * Markdown styling
    * Parse markdown to ensure carriage return is respected
    */
-  markdownRespectCRLF: boolean | undefined;
+  markdownRespectCRLF?: boolean;
 
   /**
    * Render HTML inside Markdown.
@@ -243,199 +217,208 @@ type StrictStyleOptions = {
    *
    * New in 4.17: This option is enabled by default.
    */
-  markdownRenderHTML: boolean | undefined;
+  markdownRenderHTML?: boolean;
 
   /**
    * Assign new image for anchor links to indicate external
    */
-  markdownExternalLinkIconImage: string | undefined;
+  markdownExternalLinkIconImage?: string;
 
   /**
    * Scroll behavior styling
    */
 
+  /**
+   * Prevent scroll to end button from rendering
+   *
+   * @deprecated Since 4.14.0: To hide the scroll to end button, please set `scrollToEndButtonBehavior` to `false`.
+   */
+  // TODO: [P4] Will be removed on or after 2023-06-02.
+  hideScrollToEndButton?: boolean;
+
   /**
    * Snap to activity to 'snap-point'
    * If true, scrolling will pause after 1 activity is received.
    * Specifying a number will pause after X number of activities
    */
-  autoScrollSnapOnActivity: boolean | number | undefined;
+  autoScrollSnapOnActivity?: boolean | number;
 
   /**
    * Specify number of pixels to overscroll or underscroll after pause
    */
-  autoScrollSnapOnActivityOffset: number | undefined;
+  autoScrollSnapOnActivityOffset?: number;
 
   /**
    * If true, scrolling will pause after activities have filled the page.
    * Specifying a number (0 to 1) will pause after % of page is filled
    */
-  autoScrollSnapOnPage: boolean | number | undefined;
+  autoScrollSnapOnPage?: boolean | number;
 
   /**
    * Specify number of pixels to overscroll or underscroll after pause
    */
-  autoScrollSnapOnPageOffset: number | undefined;
+  autoScrollSnapOnPageOffset?: number;
 
   /**
    * Send box styling
    */
 
-  hideSendBox: boolean | undefined;
+  hideSendBox?: boolean;
+  hideUploadButton?: boolean;
 
   /**
    * (EXPERIMENTAL) `true`, if the telephone keypad button should be shown, otherwise, `false`. Defaults to `true`.
    *
    * @deprecated This is an experimental style options and should not be used without understanding its risk.
    */
-  hideTelephoneKeypadButton: boolean | undefined;
+  hideTelephoneKeypadButton?: boolean | undefined;
 
-  microphoneButtonColorOnDictate: string | undefined;
-  sendBoxBackground: string | undefined;
+  microphoneButtonColorOnDictate?: string;
+  sendBoxBackground?: string;
 
   /**
    * The comma-delimited file types that the upload button should accept.
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
    * @example 'image/*,.pdf'
    */
-  uploadAccept: string | undefined;
+  uploadAccept?: string;
   /**
    * If true, the upload button will accept multiple files.
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple
    */
-  uploadMultiple: boolean | undefined;
+  uploadMultiple?: boolean;
 
   /**
    * If set to `send` (default), attachment will be sent when the send button is clicked, or when the message is being sent.
    *
    * Otherwise, if set to `attach`, attachment will be sent immediately after file is selected.
    */
-  sendAttachmentOn: 'attach' | 'send' | undefined;
+  sendAttachmentOn?: 'attach' | 'send';
 
   /** Send box button: Icon color, defaults to subtle */
-  sendBoxButtonColor: string | undefined;
+  sendBoxButtonColor?: string;
 
   /**
    * Send box button: Shade border radius
    *
    * @default 2
    */
-  sendBoxButtonShadeBorderRadius: number | undefined;
+  sendBoxButtonShadeBorderRadius?: number;
 
   /** Send box button: Shade color */
-  sendBoxButtonShadeColor: string | undefined;
+  sendBoxButtonShadeColor?: string;
 
   /**
    * Send box button: Shade inset
    *
    * @default 2
    */
-  sendBoxButtonShadeInset: number | undefined;
+  sendBoxButtonShadeInset?: number;
 
   /** Send box button (while `:active`): Icon color */
-  sendBoxButtonColorOnActive: string | undefined;
+  sendBoxButtonColorOnActive?: string;
 
   /**
    * Send box button (while `:active`): Shade color
    *
    * @default '#EDEBE9'
    */
-  sendBoxButtonShadeColorOnActive: string | undefined;
+  sendBoxButtonShadeColorOnActive?: string;
 
   /**
    * Send box button (while `:disabled`): Icon color
    *
    * @default '#A19F9D'
    */
-  sendBoxButtonColorOnDisabled: string | undefined;
+  sendBoxButtonColorOnDisabled?: string;
 
   /**
    * Send box button (while `:disabled`): Shade color
    *
    * @default '#F3F2F1'
    */
-  sendBoxButtonShadeColorOnDisabled: string | undefined;
+  sendBoxButtonShadeColorOnDisabled?: string;
 
   /** Send box button (while `:focus`): Icon color */
-  sendBoxButtonColorOnFocus: string | undefined;
+  sendBoxButtonColorOnFocus?: string;
 
   /** Send box button (while `:focus`): Shade color */
-  sendBoxButtonShadeColorOnFocus: string | undefined;
+  sendBoxButtonShadeColorOnFocus?: string;
 
   /** Send box button (while `:hover`): Icon color */
-  sendBoxButtonColorOnHover: string | undefined;
+  sendBoxButtonColorOnHover?: string;
 
   /**
    * Send box button (while `:hover`): Shade color
    *
    * @default '#F3F2F1'
    */
-  sendBoxButtonShadeColorOnHover: string | undefined;
+  sendBoxButtonShadeColorOnHover?: string;
 
   /**
    * Send box button (while `:focus-visible`): Keyboard focus indicator border color
    *
    * @default '#605E5C'
    */
-  sendBoxButtonKeyboardFocusIndicatorBorderColor: string | undefined;
+  sendBoxButtonKeyboardFocusIndicatorBorderColor?: string;
 
   /**
    * Send box button (while `:focus-visible`): Keyboard focus indicator border radius
    *
    * @default 0
    */
-  sendBoxButtonKeyboardFocusIndicatorBorderRadius: number | string | undefined;
+  sendBoxButtonKeyboardFocusIndicatorBorderRadius?: number | string;
 
   /**
    * Send box button (while `:focus-visible`): Keyboard focus indicator border style
    *
    * @default 'solid'
    */
-  sendBoxButtonKeyboardFocusIndicatorBorderStyle: string | undefined;
+  sendBoxButtonKeyboardFocusIndicatorBorderStyle?: string;
 
   /**
    * Send box button (while` :focus-visible`): Keyboard focus indicator border width
    *
    * @default 4
    */
-  sendBoxButtonKeyboardFocusIndicatorBorderWidth: number | undefined;
+  sendBoxButtonKeyboardFocusIndicatorBorderWidth?: number;
 
   /**
    * Send box button (while `:focus-visible`): Keyboard focus indicator inset
    *
    * @default 4
    */
-  sendBoxButtonKeyboardFocusIndicatorInset: number | undefined;
+  sendBoxButtonKeyboardFocusIndicatorInset?: number;
 
   /**
    * Disabled text color defaults to subtle
    */
-  sendBoxDisabledTextColor: string | undefined;
+  sendBoxDisabledTextColor?: string;
 
-  sendBoxHeight: number | string | undefined;
-  sendBoxMaxHeight: number | string | undefined;
-  sendBoxTextColor: string | undefined;
-  sendBoxBorderBottom: number | string | undefined;
-  sendBoxBorderLeft: number | string | undefined;
-  sendBoxBorderRight: number | string | undefined;
-  sendBoxBorderTop: number | string | undefined;
-  sendBoxPlaceholderColor: string | undefined;
-  sendBoxTextWrap: boolean | undefined;
-  sendBoxButtonAlignment: 'bottom' | 'stretch' | 'top' | undefined;
+  sendBoxHeight?: number | string;
+  sendBoxMaxHeight?: number | string;
+  sendBoxTextColor?: string;
+  sendBoxBorderBottom?: number | string;
+  sendBoxBorderLeft?: number | string;
+  sendBoxBorderRight?: number | string;
+  sendBoxBorderTop?: number | string;
+  sendBoxPlaceholderColor?: string;
+  sendBoxTextWrap?: boolean;
+  sendBoxButtonAlignment?: 'bottom' | 'stretch' | 'top';
 
   /**
    * Show spoken text
    */
-  showSpokenText: boolean | undefined;
+  showSpokenText?: boolean;
 
   /**
    * Spinner animation styling
    */
 
-  spinnerAnimationBackgroundImage: string | undefined;
-  spinnerAnimationHeight: number | string | undefined;
-  spinnerAnimationWidth: number | string | undefined;
-  spinnerAnimationPadding: number | string | undefined;
+  spinnerAnimationBackgroundImage?: string;
+  spinnerAnimationHeight?: number | string;
+  spinnerAnimationWidth?: number | string;
+  spinnerAnimationPadding?: number | string;
 
   /**
    * Suggested Actions
@@ -446,162 +429,225 @@ type StrictStyleOptions = {
    *
    * @default 0
    */
-  suggestedActionBorderRadius: number | string | undefined;
+  suggestedActionBorderRadius?: number | string;
+
+  /**
+   * Suggested action: Background
+   *
+   * @deprecated Since 4.15.0: Please use `suggestedActionBackgroundColor` instead. This option will be removed on or after 2023-09-16.
+   */
+  suggestedActionBackground?: string;
 
   /**
    * Suggested action: Background color
    *
    * @default 'White'
    */
-  suggestedActionBackgroundColor: string | undefined;
+  suggestedActionBackgroundColor?: string;
 
   /** Suggested action: Border color, defaults to accent color */
-  suggestedActionBorderColor: string | undefined;
+  suggestedActionBorderColor?: string;
 
   /**
    * Suggested action: Border style
    *
    * @default 'solid'
    */
-  suggestedActionBorderStyle: string | undefined;
+  suggestedActionBorderStyle?: string;
 
   /**
    * Suggested action: Border width
    *
    * @default 2
    */
-  suggestedActionBorderWidth: number | undefined;
+  suggestedActionBorderWidth?: number;
 
   /** Suggested action: Text color, defaults to accent color */
-  suggestedActionTextColor: string | undefined;
+  suggestedActionTextColor?: string;
 
   /** Suggested action (while `:disabled`): Background color, defaults to suggestedActionBackground */
-  suggestedActionBackgroundColorOnDisabled: string | undefined;
+  suggestedActionBackgroundColorOnDisabled?: string;
 
   /**
    * Suggested action (while `:disabled`): Border color
    *
    * @default '#E6E6E6'
    */
-  suggestedActionBorderColorOnDisabled: string | undefined;
+  suggestedActionBorderColorOnDisabled?: string;
 
   /** Suggested action (while `:disabled`): Border style */
-  suggestedActionBorderStyleOnDisabled: string | undefined;
+  suggestedActionBorderStyleOnDisabled?: string;
 
   /** Suggested action (while `:disabled`): Border width */
-  suggestedActionBorderWidthOnDisabled: number | undefined;
+  suggestedActionBorderWidthOnDisabled?: number;
 
   /** Suggested action (while `:disabled`): Foreground color, defaults to subtle color */
-  suggestedActionTextColorOnDisabled: string | undefined;
+  suggestedActionTextColorOnDisabled?: string;
 
   /**
    * Suggested action (while `:active`): Background color
    *
    * @default '#EDEBE9'
    */
-  suggestedActionBackgroundColorOnActive: string | undefined;
+  suggestedActionBackgroundColorOnActive?: string;
 
   /** Suggested action (while `:active`): Border color */
-  suggestedActionBorderColorOnActive: string | undefined;
+  suggestedActionBorderColorOnActive?: string;
 
   /** Suggested action (while `:active`): Border style */
-  suggestedActionBorderStyleOnActive: string | undefined;
+  suggestedActionBorderStyleOnActive?: string;
 
   /** Suggested action (while `:active`): Border width */
-  suggestedActionBorderWidthOnActive: number | undefined;
+  suggestedActionBorderWidthOnActive?: number;
 
   /** Suggested action (while `:active`): Text color */
-  suggestedActionTextColorOnActive: string | undefined;
+  suggestedActionTextColorOnActive?: string;
 
   /** Suggested action (while `:focus`): Background color */
-  suggestedActionBackgroundColorOnFocus: string | undefined;
+  suggestedActionBackgroundColorOnFocus?: string;
 
   /** Suggested action (while `:focus`): Border color */
-  suggestedActionBorderColorOnFocus: string | undefined;
+  suggestedActionBorderColorOnFocus?: string;
 
   /** Suggested action (while `:focus`): Border style */
-  suggestedActionBorderStyleOnFocus: string | undefined;
+  suggestedActionBorderStyleOnFocus?: string;
 
   /** Suggested action (while `:focus`): Border width */
-  suggestedActionBorderWidthOnFocus: number | undefined;
+  suggestedActionBorderWidthOnFocus?: number;
 
   /** Suggested action (while `:focus`): Text color */
-  suggestedActionTextColorOnFocus: string | undefined;
+  suggestedActionTextColorOnFocus?: string;
 
   /**
    * Suggested action (while `:hover`): Background color
    *
    * @default '#F3F2F1'
    */
-  suggestedActionBackgroundColorOnHover: string | undefined;
+  suggestedActionBackgroundColorOnHover?: string;
 
   /** Suggested action (while `:hover`): Border color */
-  suggestedActionBorderColorOnHover: string | undefined;
+  suggestedActionBorderColorOnHover?: string;
 
   /** Suggested action (while `:hover`): Border style */
-  suggestedActionBorderStyleOnHover: string | undefined;
+  suggestedActionBorderStyleOnHover?: string;
 
   /** Suggested action (while `:hover`): Border width */
-  suggestedActionBorderWidthOnHover: number | undefined;
+  suggestedActionBorderWidthOnHover?: number;
 
   /** Suggested action (while `:hover`): Text color */
-  suggestedActionTextColorOnHover: string | undefined;
+  suggestedActionTextColorOnHover?: string;
+
+  /**
+   * Suggested action (while `:disabled`): Background, defaults to suggestedActionBackground.
+   *
+   * @deprecated Since 4.15.0: Please use `suggestedActionBackgroundColorOnDisabled` instead. This option will be removed on or after 2023-09-16.
+   */
+  suggestedActionDisabledBackground?: string;
+
+  /**
+   * Suggested action (while `:disabled`): Border color
+   *
+   * @deprecated Since 4.15.0: Please use `suggestedActionBorderColorOnDisabled` instead. This option will be removed on or after 2023-09-16.
+   */
+  suggestedActionDisabledBorderColor?: string;
+
+  /**
+   * Suggested action (while `:disabled`): Border style
+   *
+   * @deprecated Since 4.15.0: Please use `suggestedActionBorderStyleOnDisabled` instead. This option will be removed on or after 2023-09-16.
+   */
+  suggestedActionDisabledBorderStyle?: string;
+
+  /**
+   * Suggested action (while `:disabled`): Border width
+   *
+   * @deprecated Since 4.15.0: Please use `suggestedActionBorderWidthOnDisabled` instead. This option will be removed on or after 2023-09-16.
+   */
+  suggestedActionDisabledBorderWidth?: number;
+
+  /**
+   * Suggested action (while `:disabled`): Foreground color, defaults to subtle color
+   *
+   * @deprecated Since 4.15.0: Please use `suggestedActionTextColorOnDisabled` instead. This option will be removed on or after 2023-09-16.
+   */
+  suggestedActionDisabledTextColor?: string;
 
   /**
    * Suggested action: Height
    *
    * @default 40
    */
-  suggestedActionHeight: number | string | undefined;
+  suggestedActionHeight?: number | string;
 
   /**
    * Suggested action: Image height
    *
    * @default 20
    */
-  suggestedActionImageHeight: number | string | undefined;
+  suggestedActionImageHeight?: number | string;
 
   /**
    * Suggested action: Layout type
    *
    * @default 'carousel'
    */
-  suggestedActionLayout: 'carousel' | 'flow' | 'stacked' | undefined;
+  suggestedActionLayout?: 'carousel' | 'flow' | 'stacked';
 
   /**
    * Suggested action (while `:focus-visible`): Keyboard focus indicator border color
    *
    * @default '#605E5C'
    */
-  suggestedActionKeyboardFocusIndicatorBorderColor: string | undefined;
+  suggestedActionKeyboardFocusIndicatorBorderColor?: string;
 
   /**
    * Suggested action (while `:focus-visible`): Keyboard focus indicator border radius
    *
    * @default 0
    */
-  suggestedActionKeyboardFocusIndicatorBorderRadius: number | string | undefined;
+  suggestedActionKeyboardFocusIndicatorBorderRadius?: number | string;
 
   /**
    * Suggested action (while `:focus-visible`): Keyboard focus indicator border style
    *
    * @default 'solid'
    */
-  suggestedActionKeyboardFocusIndicatorBorderStyle: string | undefined;
+  suggestedActionKeyboardFocusIndicatorBorderStyle?: string;
 
   /**
    * Suggested action (while `:focus-visible`): Keyboard focus indicator border width
    *
    * @default 1
    */
-  suggestedActionKeyboardFocusIndicatorBorderWidth: number | undefined;
+  suggestedActionKeyboardFocusIndicatorBorderWidth?: number;
 
   /**
    * Suggested action (while `:focus-visible`): Keyboard focus indicator inset
    *
    * @default 2
    */
-  suggestedActionKeyboardFocusIndicatorInset: number | undefined;
+  suggestedActionKeyboardFocusIndicatorInset?: number;
+
+  /**
+   * Suggested action (while `:active`): background
+   *
+   * @deprecated Since 4.15.0: Please use `suggestedActionBackgroundColorOnActive` instead. This option will be removed on or after 2023-09-16.
+   */
+  suggestedActionActiveBackground?: string;
+
+  /**
+   * Suggested action (while `:focus`): background
+   *
+   * @deprecated Since 4.15.0: Please use `suggestedActionBackgroundColorOnFocus` instead. This option will be removed on or after 2023-09-16.
+   */
+  suggestedActionFocusBackground?: string;
+
+  /**
+   * Suggested action (while `:hover`): background
+   *
+   * @deprecated Since 4.15.0: Please use `suggestedActionBackgroundColorOnHover` instead. This option will be removed on or after 2023-09-16.
+   */
+  suggestedActionHoverBackground?: string;
 
   /**
    * Suggested actions carousel layout
@@ -610,23 +656,23 @@ type StrictStyleOptions = {
   /**
    * Cursor when mouseover on flipper
    */
-  suggestedActionsCarouselFlipperCursor: string | undefined;
+  suggestedActionsCarouselFlipperCursor?: string;
 
   /**
    * Flipper bounding box size
    */
-  suggestedActionsCarouselFlipperBoxWidth: number | undefined;
+  suggestedActionsCarouselFlipperBoxWidth?: number;
 
   /**
    * Flipper button's visible size
    */
-  suggestedActionsCarouselFlipperSize: number | undefined;
+  suggestedActionsCarouselFlipperSize?: number;
 
   /**
    * Suggested actions flow layout
    * Default value is 'auto',
    */
-  suggestedActionsFlowMaxHeight: number | undefined;
+  suggestedActionsFlowMaxHeight?: undefined;
 
   /**
    * Suggested actions stacked layout
@@ -635,31 +681,31 @@ type StrictStyleOptions = {
   /**
    * Stacked height container's max height. Default value is 'auto'
    */
-  suggestedActionsStackedHeight: number | 'auto' | undefined;
+  suggestedActionsStackedHeight?: number | 'auto';
 
   /**
    * Stacked overflow default value is 'auto'
    */
-  suggestedActionsStackedOverflow: 'auto' | 'hidden' | 'scroll' | 'visible' | undefined;
+  suggestedActionsStackedOverflow?: 'auto' | 'hidden' | 'scroll' | 'visible';
 
   /**
    * Button max height default value is 100% if suggestedActionsStackedLayoutButtonTextWrap is true
    */
-  suggestedActionsStackedLayoutButtonMaxHeight: number | string | undefined;
+  suggestedActionsStackedLayoutButtonMaxHeight?: number | string;
 
   /**
    * Button Text Wrap, if set to true, will wrap long text in buttons in STACKED mode ONLY
    */
-  suggestedActionsStackedLayoutButtonTextWrap: boolean | undefined;
+  suggestedActionsStackedLayoutButtonTextWrap?: boolean;
 
   /** Suggested actions: Visual keyboard indicator color for the container. */
-  suggestedActionsVisualKeyboardIndicatorColor: string | undefined;
+  suggestedActionsVisualKeyboardIndicatorColor?: string;
 
   /** Suggested actions: Visual keyboard indicator style for the container. */
-  suggestedActionsVisualKeyboardIndicatorStyle: string | undefined;
+  suggestedActionsVisualKeyboardIndicatorStyle?: string;
 
   /** Suggested actions: Visual keyboard indicator width for the container. */
-  suggestedActionsVisualKeyboardIndicatorWidth: number | undefined;
+  suggestedActionsVisualKeyboardIndicatorWidth?: number;
 
   /**
    * Timestamp
@@ -672,34 +718,34 @@ type StrictStyleOptions = {
    * `false` - never group timestamps
    * `true` - group all timestamps
    */
-  groupTimestamp: boolean | number | undefined;
+  groupTimestamp?: boolean | number;
 
-  sendTimeout: number | ((activity: WebChatActivity) => number) | undefined;
-  sendTimeoutForAttachments: number | undefined;
+  sendTimeout?: number | ((activity: WebChatActivity) => number);
+  sendTimeoutForAttachments?: number;
 
   /**
    * Timestamp color default value is subtle
    */
-  timestampColor: string | undefined;
+  timestampColor?: string;
 
-  timestampFormat: 'absolute' | 'relative' | undefined;
+  timestampFormat?: 'absolute' | 'relative';
 
   /**
    * Transcript styling
    */
 
-  transcriptTerminatorBackgroundColor: string | undefined;
-  transcriptTerminatorBorderRadius: number | string | undefined;
-  transcriptTerminatorColor: string | undefined;
-  transcriptTerminatorFontSize: number | string | undefined;
+  transcriptTerminatorBackgroundColor?: string;
+  transcriptTerminatorBorderRadius?: number | string;
+  transcriptTerminatorColor?: string;
+  transcriptTerminatorFontSize?: number | string;
 
-  transcriptActivityVisualKeyboardIndicatorColor: string | undefined;
-  transcriptActivityVisualKeyboardIndicatorStyle: string | undefined;
-  transcriptActivityVisualKeyboardIndicatorWidth: number | string | undefined;
+  transcriptActivityVisualKeyboardIndicatorColor?: string;
+  transcriptActivityVisualKeyboardIndicatorStyle?: string;
+  transcriptActivityVisualKeyboardIndicatorWidth?: number | string;
 
-  transcriptVisualKeyboardIndicatorColor: string | undefined;
-  transcriptVisualKeyboardIndicatorStyle: string | undefined;
-  transcriptVisualKeyboardIndicatorWidth: number | string | undefined;
+  transcriptVisualKeyboardIndicatorColor?: string;
+  transcriptVisualKeyboardIndicatorStyle?: string;
+  transcriptVisualKeyboardIndicatorWidth?: number | string;
 
   /**
    * Transcript overlay button
@@ -713,27 +759,35 @@ type StrictStyleOptions = {
    * - `"any"` will show when there are any offscreen messages
    * - `false` will always hide the button
    */
-  scrollToEndButtonBehavior: false | 'any' | 'unread' | undefined;
+  scrollToEndButtonBehavior?: false | 'any' | 'unread';
 
   /** Font size of the new message button. */
-  scrollToEndButtonFontSize: number | string | undefined;
+  scrollToEndButtonFontSize?: number | string;
+
+  /**
+   * Font size of the new message button.
+   *
+   * @deprecated Since 4.14.0: Renamed to {@linkcode scrollToEndButtonFontSize}.
+   */
+  // TODO: [P4] Will be removed on or after 2023-06-02.
+  newMessagesButtonFontSize?: number | string;
 
-  transcriptOverlayButtonBackground: string | undefined;
-  transcriptOverlayButtonBackgroundOnDisabled: string | undefined;
-  transcriptOverlayButtonBackgroundOnFocus: string | undefined;
-  transcriptOverlayButtonBackgroundOnHover: string | undefined;
-  transcriptOverlayButtonColor: string | undefined;
-  transcriptOverlayButtonColorOnDisabled: string | undefined;
+  transcriptOverlayButtonBackground?: string;
+  transcriptOverlayButtonBackgroundOnDisabled?: string;
+  transcriptOverlayButtonBackgroundOnFocus?: string;
+  transcriptOverlayButtonBackgroundOnHover?: string;
+  transcriptOverlayButtonColor?: string;
+  transcriptOverlayButtonColorOnDisabled?: string;
 
   /**
    * Default value is transcriptOverlayButtonColor
    */
-  transcriptOverlayButtonColorOnFocus: string | undefined;
+  transcriptOverlayButtonColorOnFocus?: string;
 
   /**
    * Default value is transcriptOverlayButtonColor
    */
-  transcriptOverlayButtonColorOnHover: string | undefined;
+  transcriptOverlayButtonColorOnHover?: string;
 
   /**
    * Toast UI
@@ -742,237 +796,68 @@ type StrictStyleOptions = {
   /**
    * New debounce timeout value only affects new notifications.
    */
-  notificationDebounceTimeout: number | undefined;
+  notificationDebounceTimeout?: number;
 
-  hideToaster: boolean | undefined;
-  toasterHeight: number | string | undefined;
-  toasterMaxHeight: number | string | undefined;
-  toasterSingularMaxHeight: number | string | undefined;
-  toastFontSize: number | string | undefined;
-  toastIconWidth: number | string | undefined;
-  toastSeparatorColor: string | undefined;
-  toastTextPadding: number | string | undefined;
+  hideToaster?: boolean;
+  toasterHeight?: number | string;
+  toasterMaxHeight?: number | string;
+  toasterSingularMaxHeight?: number | string;
+  toastFontSize?: number | string;
+  toastIconWidth?: number | string;
+  toastSeparatorColor?: string;
+  toastTextPadding?: number | string;
 
-  toastErrorBackgroundColor: string | undefined;
-  toastErrorColor: string | undefined;
-  toastInfoBackgroundColor: string | undefined;
-  toastInfoColor: string | undefined;
-  toastSuccessBackgroundColor: string | undefined;
-  toastSuccessColor: string | undefined;
-  toastWarnBackgroundColor: string | undefined;
-  toastWarnColor: string | undefined;
+  toastErrorBackgroundColor?: string;
+  toastErrorColor?: string;
+  toastInfoBackgroundColor?: string;
+  toastInfoColor?: string;
+  toastSuccessBackgroundColor?: string;
+  toastSuccessColor?: string;
+  toastWarnBackgroundColor?: string;
+  toastWarnColor?: string;
 
   /**
    * Typing animation
    */
 
-  typingAnimationBackgroundImage: string | undefined;
-  typingAnimationDuration: number | undefined;
-  typingAnimationHeight: number | string | undefined;
-  typingAnimationWidth: number | string | undefined;
+  typingAnimationBackgroundImage?: string;
+  typingAnimationDuration?: number;
+  typingAnimationHeight?: number | string;
+  typingAnimationWidth?: number | string;
 
   /**
    * Upload thumbnail
    */
 
-  enableUploadThumbnail: boolean | undefined;
-  uploadThumbnailContentType: string | undefined;
-  uploadThumbnailHeight: number | undefined;
-  uploadThumbnailQuality: number | undefined;
-  uploadThumbnailWidth: number | undefined;
+  enableUploadThumbnail?: boolean;
+  uploadThumbnailContentType?: string;
+  uploadThumbnailHeight?: number;
+  uploadThumbnailQuality?: number;
+  uploadThumbnailWidth?: number;
 
   /**
    * Video
    */
 
-  videoHeight: number | string | undefined;
+  videoHeight?: number | string;
 
   /**
    * Maximum message length in characters
    *
    * @default 2000
    */
-  maxMessageLength: number | undefined;
-
-  /**
-   * The node to place Web Chat styles into. Needed when using as a Web Component.
-   *
-   * @default document.head
-   */
-  stylesRoot: Node | undefined;
-
-  /**
-   * Border animation
-   */
-
-  /**
-   * Border animation 1st color
-   *
-   * CSS variable: `--webchat__animation--border-color-1` CSS variable to adjust the color
-   *
-   * New in 4.19.0.
-   */
-  borderAnimationColor1: string | undefined;
-  /**
-   * Border animation 2nd color
-   *
-   * CSS variable: `--webchat__animation--border-color-2` CSS variable to adjust the color
-   *
-   * New in 4.19.0.
-   */
-  borderAnimationColor2: string | undefined;
-  /**
-   * Border animation 3rd color
-   *
-   * CSS variable: `--webchat__animation--border-color-3` CSS variable to adjust the color
-   *
-   * New in 4.19.0.
-   */
-  borderAnimationColor3: string | undefined;
-
-  /**
-   * Code block theme
-   *
-   * - `'github-light-default'` - use light theme for code blocks
-   * - `'github-dark-default'` - use dark theme for code blocks
-   *
-   * @default 'github-light-default'
-   *
-   * New in 4.19.0.
-   */
-  codeBlockTheme: 'github-light-default' | 'github-dark-default' | undefined;
-
-  /**
-   * (EXPERIMENTAL) Feedback buttons placement
-   *
-   * - `'activity-actions'` - place feedback buttons inside activity actions - will show feedback form
-   * - `'activity-status'` - place feedback buttons inside activity status
-   *
-   * @default 'activity-status'
-   *
-   * @deprecated This is an experimental style options and should not be used without understanding its risk.
-   *
-   * New in 4.19.0.
-   */
-  feedbackActionsPlacement: 'activity-actions' | 'activity-status' | undefined;
-
-  /**
-   * Use continuous mode for speech recognition. Default to `false`.
-   *
-   * - `true` to use continuous mode which focuses on a hands-off experience, keeping speech recognition active for extended periods, supporting barge-in, non-speech interactions will not stop speech recognition
-   * - `false` to use interactive mode which focuses on privacy, keeping speech recognition active only for the minimal time required, no barge-in, non-speech interactions will stop speech recognition
-   *
-   * @see https://github.com/microsoft/BotFramework-WebChat/pull/5426
-   */
-  speechRecognitionContinuous: boolean | undefined;
-
-  /**
-   * Whether part groups are open by default.
-   *
-   * @default true
-   */
-  partGroupDefaultOpen: boolean | undefined;
-
-  /**
-   * Whether references (citation link definitions) are open by default.
-   *
-   * @default true
-   */
-  referenceListDefaultOpen: boolean | undefined;
-
-  /**
-   * Defines how activities are being grouped by (in the order of appearance in the array). Default to `['sender', 'status', 'part']` or `sender,status` in CSS.
-   *
-   * Values are key of result of `groupActivitiesMiddleware`. The default implementation of `groupActivitiesMiddleware` has `sender`, `status`, and `part`.
-   *
-   * To add new groupings, configure `groupActivitiesMiddleware` to output extra groups. Then, add the group names to `styleOptions.groupActivitiesBy`.
-   */
-  groupActivitiesBy: readonly string[] | undefined;
-
-  /**
-   * Send box: maximum number of attachment item to preview as thumbnail before showing as text-only.
-   * Send box: maximum height of the attachment bar.
-   *
-   * @default 114
-   */
-  sendBoxAttachmentBarMaxHeight: number | undefined;
-
-  /**
-   * Send box: maximum number of attachment item to preview as thumbnail before showing as list item.
-   *
-   * @default 3
-   */
-  sendBoxAttachmentBarMaxThumbnail: number | undefined;
-
-  /**
-   * Indicates if file upload should be disabled.
-   *
-   * @default false
-   *
-   * New in 4.19.0.
-   */
-  disableFileUpload: boolean | undefined;
-  /**
-   * Controls microphone button visibility in Fluent theme send box.
-   *
-   * - `'auto'` - Show microphone button if the chat adapter supports voice (has voiceConfiguration capability)
-   * - `'hide'` - Do not show microphone button regardless of adapter capabilities
-   *
-   * @default 'auto'
-   */
-  showMicrophoneButton: 'auto' | 'hide' | undefined;
+  maxMessageLength?: number;
 };
 
 // StrictStyleOptions is only used internally in Web Chat and for simplifying our code:
 // 1. Allow developers to set the "bubbleNubOffset" option as "top" (string), but when we normalize them, we will convert it to 0 (number);
 // 2. Renamed/deprecated options, only the newer option will be kept, the older option will be dropped.
 //    Internally, no code should use the deprecated value except the migration code.
-type StyleOptions = Partial<Omit<StrictStyleOptions, 'bubbleFromUserNubOffset' | 'bubbleNubOffset' | 'emojiSet'>> & {
-  /**
-   * Specifies the fixed height of the bubble for image, default to unset.
-   *
-   * @deprecated Use `bubbleImageMaxHeight` and `bubbleImageMinHeight` instead. To mimick behavior before deprecation, set both options to 240px.
-   */
-  bubbleImageHeight?: number | undefined;
-
-  /* @deprecated Please use `bubbleAttachmentMaxWidth` and `bubbleMessageMaxWidth` instead. */
-  bubbleMaxWidth?: number | undefined;
-  /* @deprecated Please use `bubbleAttachmentMaxWidth` and `bubbleMessageMaxWidth` instead. */
-  bubbleMinWidth?: number | undefined;
-
-  /**
-   * Indicates if the upload file button should be hidden.
-   *
-   * @default false
-   *
-   * @deprecated deprecated since 4.18.0: obsolated by {@linkcode disableFileUpload}. This option will be removed on or after 2027-07-14.
-   */
-  hideUploadButton?: boolean | undefined;
-
-  /**
-   * Nub offset 'bottom' will render nub at the bottom
-   * A positive or negative number will shift nub offset up/down
-   * "top" is equivalent to positive zero.
-   * "bottom" is equivalent to negative zero.
-   */
-  bubbleFromUserNubOffset?: number | 'bottom' | 'top' | undefined;
-
-  /**
-   * Nub offset ''bottom' will render nub at the bottom
-   * A positive or negative number will shift nub offset up/down
-   * "top" is equivalent to positive zero.
-   * "bottom" is equivalent to negative zero.
-   */
-  bubbleNubOffset?: number | 'bottom' | 'top' | undefined;
-
-  /**
-   * Emoji styling
-   * If true, Web Chat's default set of emoji will be enabled. See patchStyleOptions.js for default list.
-   * A custom object will enable unicode emoji specified by the developer.
-   * key: emoticon
-   * value: unicode emoji
-   */
-  emojiSet?: boolean | Record<string, string> | undefined;
+type StrictStyleOptions = Required<Omit<StyleOptions, 'hideScrollToEndButton' | 'newMessagesButtonFontSize'>> & {
+  bubbleFromUserNubOffset: number;
+  bubbleNubOffset: number;
+  emojiSet: false | Record<string, string>;
 };
 
-export { type StrictStyleOptions, type StyleOptions };
+export default StyleOptions;
+export { StrictStyleOptions };