An overview of all the StyleOptions that can be specified in a StyleSet for the BotFramework React Web Chat component.

BotFramework Web Chat StyleOptions.md

🎨 Basic Styling

• accent: string — Web Chat component accent color.
  Default: #0063B1
• backgroundColor: string — Transcript background color.
  Default: White
• subtle: string — Secondary component color.
  Default: #767676
• paddingRegular: number — Default padding for most visual components.
  Default: 10
• paddingWide: number — Padding for suggestedAction buttons.
  Default: 20
• transitionDuration: string — Transition duration for Bubble, Carousel, and StackedLayout.
  Default: 0s

---

🔤 Fonts

• fontSizeSmall: number | string — Font size for secondary components (e.g., sendStatus).
  Default: '80%'
• monospaceFont: string — Font for ErrorBox (comma-space separated).
  Default: 'Consolas', 'Courier New', 'monospace'
• primaryFont: string — Font used in most visual components.
  Default: 'Calibri', 'Helvetica Neue', 'Arial', 'sans-serif'

---

🔲 Root Container

• rootHeight: number | string — Height of the root container.
  Default: '100%'
• rootWidth: number | string — Width of the root container.
  Default: '100%'
• rootZIndex: number — z-index for root container (creates stacking context).
  Default: 0

---

👤 Avatar Styling

• avatarBorderRadius: number | string — Border radius for bot/user avatars.
  Default: '50%'
• avatarSize: number — Avatar height and width.
  Default: 40
• botAvatarBackgroundColor: string — Background color (defaults to accent).
  Default: undefined
• botAvatarImage: string — Image URL for bot avatar.
  Default: undefined
• botAvatarInitials: string — Bot initials; must be '' if image is used.
  Default: undefined
• userAvatarBackgroundColor: string — Background color (defaults to accent).
  Default: undefined
• userAvatarImage: string — Image URL for user avatar.
  Default: undefined
• userAvatarInitials: string — User initials; must be '' if image is used.
  Default: undefined
• showAvatarInGroup: true | 'sender' | 'status' — Avatar grouping strategy.
  Default: 'status'

---

💬 Bubble Styling

• bubbleBackground: string — Background for bot bubbles.
  Default: White
• bubbleBorderColor: string — Border color for bot bubbles.
  Default: #E6E6E6
• bubbleBorderRadius: number — Border radius for bot bubbles.
  Default: 2
• bubbleBorderStyle: string — Border style for bot bubbles.
  Default: 'solid'
• bubbleBorderWidth: number — Border width for bot bubbles.
  Default: 1
• bubbleFromUserBackground: string — Background for user bubbles.
  Default: White
• bubbleFromUserBorderColor: string — Border color for user bubbles.
  Default: #E6E6E6
• bubbleFromUserBorderRadius: number — Border radius for user bubbles.
  Default: 2
• bubbleFromUserBorderStyle: string — Border style for user bubbles.
  Default: 'solid'
• bubbleFromUserBorderWidth: number — Border width for user bubbles.
  Default: 1
• bubbleFromUserNubOffset: number | 'bottom' | 'top' — Nub offset for user bubble.
  Default: 0
• bubbleFromUserNubSize: number — Nub size for user bubble.
  Default: undefined
• bubbleFromUserTextColor: string — Text color for user bubble.
  Default: Black
• bubbleImageHeight: number — Max height for images inside bubble.
  Default: 240
• bubbleMaxWidth: number — Max width for bubble.
  Default: 480
• bubbleMinHeight: number — Min height for bubble.
  Default: 40
• bubbleMinWidth: number — Min width for bubble.
  Default: 250
• bubbleNubOffset: number | 'bottom' | 'top' — Nub offset for bot bubble.
  Default: 0
• bubbleNubSize: number — Nub size for bot bubble.
  Default: undefined
• bubbleTextColor: string — Text color for bot bubble.
  Default: Black

---

🔗 Message

• messageActivityWordBreak: 'normal' | 'break-all' | 'break-word' | 'keep-all' — Word-break setting for message activity.
  Default: 'break-word'

---

🌐 Connectivity UI

• connectivityIconPadding: number — Padding around the connectivity icon.
  Default: 12 (based on paddingRegular * 1.2)
• connectivityMarginLeftRight: number — Horizontal margin.
  Default: 14 (based on paddingRegular * 1.4)
• connectivityMarginTopBottom: number — Vertical margin.
  Default: 8 (based on paddingRegular * 0.8)
• connectivityTextSize: number | string — Text size for connectivity messages.
  Default: '75%'
• failedConnectivity: number | string — Styling when connection fails.
  Default: '#C50F1F'
• slowConnectivity: string — Styling for slow connection.
  Default: '#EAA300'
• notificationText: string — Color for connectivity notification text.
  Default: '#5E5E5E'
• slowConnectionAfter: number — Delay before showing slow connection.
  Default: 15000 (ms)

---

😊 Emoji

• emojiSet: boolean | Record<string, string> — Emoji support or custom emoji map.
  Default: true

---

♿ Accessibility

• internalLiveRegionFadeAfter: number — Time before live region announcements fade.
  Default: 1000 (ms)

---

✍️ Markdown

• markdownRespectCRLF: boolean — Preserve line breaks in markdown.
  Default: true
• markdownExternalLinkIconImage: string — Image shown on external links.
  Default: a base64-encoded SVG icon (very long string)

---

🖱️ Scroll Behavior

• hideScrollToEndButton: boolean — Hides "scroll to end" button.
  Default: false
• autoScrollSnapOnActivity: boolean | number — Auto-scroll pause after new activity.
  Default: false
• autoScrollSnapOnActivityOffset: number — Pixel offset after auto-scroll.
  Default: 0
• autoScrollSnapOnPage: boolean | number — Auto-scroll pause based on page fill.
  Default: false
• autoScrollSnapOnPageoffset: number — Pixel offset after scroll snap.
  Default: 0

---

📝 Send Box

• hideSendBox: boolean — Hide the send box.
  Default: false
• hideUploadButton: boolean — Hide the file upload button.
  Default: false
• microphoneButtonColorOnDictate: string — Mic button color during dictation.
  Default: '#F33'
• sendBoxBackground: string — Background color of send box.
  Default: 'White'
• sendBoxButtonColor: string — Button color.
  Default: undefined
• sendBoxButtonColorOnDisabled: string — Color when button is disabled.
  Default: '#CCC'
• sendBoxButtonColorOnFocus: string — Button color on focus.
  Default: '#333'
• sendBoxButtonColorOnHover: string — Button color on hover.
  Default: '#333'
• sendBoxDisabledTextColor: string — Color of disabled text.
  Default: undefined
• sendBoxHeight: number | string — Send box height.
  Default: 40
• sendBoxMaxHeight: number | string — Max height of send box.
  Default: 200
• sendBoxTextColor: string — Color of input text.
  Default: 'Black'
• sendBoxBorderBottom: number | string — Bottom border.
  Default: undefined
• sendBoxBorderLeft: number | string — Left border.
  Default: undefined
• sendBoxBorderRight: number | string — Right border.
  Default: undefined
• sendBoxBorderTop: number | string — Top border.
  Default: 'solid 1px #E6E6E6'
• sendBoxPlaceholderColor: string — Placeholder text color.
  Default: undefined
• sendBoxTextWrap: boolean — Allow text to wrap.
  Default: false
• sendBoxButtonAlignment: 'bottom' | 'stretch' | 'top' — Button alignment.
  Default: 'stretch'

---

🔊 Spoken Text

• showSpokenText: boolean — Show spoken (speech-to-text) output.
  Default: false

---

🔄 Spinner

• spinnerAnimationBackgroundImage: string — Spinner image.
  Default: undefined
• spinnerAnimationHeight: number | string — Height of spinner.
  Default: 16
• spinnerAnimationWidth: number | string — Width of spinner.
  Default: 16
• spinnerAnimationPadding: number | string — Padding around spinner.
  Default: 12

---

💡 Suggested Actions

• suggestedActionBackground: string — Background color of suggested action buttons.
  Default: 'White'
• suggestedActionBorderColor: string — Border color (defaults to accent).
  Default: undefined
• suggestedActionBorderRadius: number | string — Border radius.
  Default: 0
• suggestedActionBorderStyle: string — Border style.
  Default: 'solid'
• suggestedActionBorderWidth: number | string — Border width.
  Default: 2
• suggestedActionDisabledBackground: string — Background when disabled.
  Default: undefined
• suggestedActionDisabledBorderColor: string — Border color when disabled.
  Default: '#E6E6E6'
• suggestedActionDisabledBorderStyle: string — Border style when disabled.
  Default: 'solid'
• suggestedActionDisabledBorderWidth: number | string — Border width when disabled.
  Default: 2
• suggestedActionDisabledTextColor: string — Text color when disabled.
  Default: undefined
• suggestedActionHeight: number | string — Button height.
  Default: 40
• suggestedActionImageHeight: number | string — Image height.
  Default: 20
• suggestedActionLayout: 'carousel' | 'flow' | 'stacked' — Layout of suggested actions.
  Default: 'carousel'
• suggestedActionTextColor: string — Text color.
  Default: undefined

🎠 Carousel Layout

• suggestedActionsCarouselFlipperCursor: string — Mouse cursor on carousel flippers.
  Default: undefined
• suggestedActionsCarouselFlipperBoxWidth: number — Flipper container width.
  Default: 40
• suggestedActionsCarouselFlipperSize: number — Visible flipper size.
  Default: 20

💧 Flow Layout

• suggestedActionsFlowMaxHeight: undefined — Max height for flow layout.
  Default: undefined

📚 Stacked Layout

• suggestedActionsStackedHeight: number | 'auto' — Max height for stacked layout.
  Default: undefined
• suggestedActionsStackedOverflow: 'string' — Overflow setting.
  Default: undefined
• suggestedActionsStackedLayoutButtonMaxHeight: number | string — Max height of buttons.
  Default: undefined
• suggestedActionsStackedLayoutButtonTextWrap: boolean — Enable text wrap for long button text.
  Default: false

---

⏱️ Timestamps

• groupTimestamp: boolean — Whether to group timestamps.
  Default: true
• sendTimeout: number — Timeout for sending messages.
  Default: 20000
• sendTimeoutForAttachments: number — Timeout for sending attachments.
  Default: 120000
• timestampColor: string — Color of the timestamp.
  Default: undefined
• timestampFormat: 'absolute' | 'relative' — Timestamp format style.
  Default: 'relative'

---

📜 Transcript

• transcriptTerminatorBackgroundColor: string — Background of terminator line.
  Default: '#595959'
• transcriptTerminatorBorderRadius: number | string — Radius for terminator.
  Default: 5
• transcriptTerminatorColor: string — Text color of terminator.
  Default: 'White'
• transcriptTerminatorFontSize: number | string — Font size.
  Default: 12
• transcriptActivityVisualKeyboardIndicatorColor: string — Color of visual keyboard indicator on activities.
  Default: '#767676'
• transcriptActivityVisualKeyboardIndicatorStyle: string — Style (e.g., solid/dashed).
  Default: 'dashed'
• transcriptActivityVisualKeyboardIndicatorWidth: number | string — Width.
  Default: 1
• transcriptVisualKeyboardIndicatorColor: string — Color for transcript-wide keyboard indicators.
  Default: 'Black'
• transcriptVisualKeyboardIndicatorStyle: string — Line style.
  Default: 'solid'
• transcriptVisualKeyboardIndicatorWidth: number | string — Line width.
  Default: 2

---

🔘 Overlay Buttons

• newMessagesButtonFontSize: number | string — Font size for "new messages" button.
  Default: '85%'
• transcriptOverlayButtonBackground: string — Background color.
  Default: 'rgba(0, 0, 0, .6)'
• transcriptOverlayButtonBackgroundOnDisabled: string — Background when disabled.
  Default: 'rgba(0, 0, 0, .6)'
• transcriptOverlayButtonBackgroundOnFocus: string — Background on focus.
  Default: 'rgba(0, 0, 0, .8)'
• transcriptOverlayButtonBackgroundOnHover: string — Background on hover.
  Default: 'rgba(0, 0, 0, .8)'
• transcriptOverlayButtonColor: string — Text color.
  Default: 'White'
• transcriptOverlayButtonColorOnDisabled: string — Disabled text color.
  Default: 'White'
• transcriptOverlayButtonColorOnFocus: string — Text color on focus.
  Default: undefined
• transcriptOverlayButtonColorOnHover: string — Text color on hover.
  Default: undefined

---

🍞 Toasts

• notificationDebounceTimeout: number — Time before showing next toast.
  Default: 400 (ms)
• hideToaster: boolean — Hide toast notifications.
  Default: false
• toasterHeight: number | string — Toast container height.
  Default: 32
• toasterMaxHeight: number | string — Max height for all toasts.
  Default: 160 (5 × 32)
• toasterSingularMaxHeight: number | string — Max height for a single toast.
  Default: 50
• toastFontSize: number | string — Font size.
  Default: '87.5%'
• toastIconWidth: number | string — Icon width.
  Default: 36
• toastSeparatorColor: string — Separator color.
  Default: '#E8EAEC'
• toastTextPadding: number | string — Padding for toast text.
  Default: 6
• toastErrorBackgroundColor: string — Background color for error toast.
  Default: '#FDE7E9'
• toastErrorColor: string — Text color for error toast.
  Default: '#A80000'
• toastInfoBackgroundColor: string — Background color for info toast.
  Default: '#CEF1FF'
• toastInfoColor: string — Text color for info toast.
  Default: '#105E7D'
• toastSuccessBackgroundColor: string — Background color for success toast.
  Default: '#DFF6DD'
• toastSuccessColor: string — Text color for success toast.
  Default: '#107C10'
• toastWarnBackgroundColor: string — Background color for warning toast.
  Default: '#FFF4CE'
• toastWarnColor: string — Text color for warning toast.
  Default: '#3B3A39'

---

✨ Typing Animation

• typingAnimationBackgroundImage: string — Image used for typing indicator.
  Default: undefined
• typingAnimationDuration: number — Duration in ms.
  Default: 5000
• typingAnimationHeight: number | string — Height of the typing indicator.
  Default: 20
• typingAnimationWidth: number | string — Width of the typing indicator.
  Default: 64

---

🖼️ Upload Thumbnails

• enableUploadThumbnail: boolean — Enable image thumbnails for uploads.
  Default: true
• uploadThumbnailContentType: string — MIME type for thumbnail.
  Default: 'image/jpeg'
• uploadThumbnailHeight: number | string — Height of the thumbnail.
  Default: 360
• uploadThumbnailQuality: number — Compression quality (0-1).
  Default: 0.6
• uploadThumbnailWidth: number | string — Width of the thumbnail.
  Default: 720

---

🎥 Video

• videoHeight: number | string — Height of the video component.
  Default: 270

---

This Gist is part of a blog post: https://medium.com/@svdoever/botframework-web-chat-take-control-of-the-ui-part-1-styleset-properties-f48aa34c1c84