botframework-webchat-component
Version:
React component of botframework-webchat
1,290 lines • 68.4 kB
TypeScript
import { StyleOptions } from 'botframework-webchat-api';
export default function createStyleSet(styleOptions: StyleOptions): Readonly<{
readonly activities: {
margin: number;
padding: number;
};
readonly audioAttachment: {
display: string;
minHeight: number;
};
readonly audioContent: {
width: string;
};
readonly autoResizeTextArea: {
'&.webchat__auto-resize-textarea': {
fontFamily: string;
overflow: string;
position: string;
'& .webchat__auto-resize-textarea__doppelganger': {
color: string;
height: string;
overflowY: string;
userSelect: string;
width: string;
whiteSpace: string;
wordBreak: string;
};
'& .webchat__auto-resize-textarea__textarea': {
appearance: string;
backgroundColor: string;
border: number;
color: string;
fontFamily: string;
fontSize: string;
height: string;
left: number;
margin: number;
outline: number;
overflowY: string;
padding: number;
position: string;
resize: string;
top: number;
width: string;
wordBreak: string;
};
};
};
readonly avatar: {
'&.webchat__defaultAvatar': {
borderRadius: string | number;
height: number;
width: number;
};
};
readonly basicTranscript: {
'&.webchat__basic-transcript': {
'&:focus': {
outline: number;
'& .webchat__basic-transcript__activity-indicator.webchat__basic-transcript__activity-indicator--focus': {
borderColor: string;
borderStyle: string;
borderWidth: string | number;
boxSizing: string;
height: string;
left: number;
marginBottom: number;
marginLeft: number;
marginRight: number;
marginTop: number;
pointerEvents: string;
position: string;
top: number;
width: string;
};
};
'&:focus-visible .webchat__basic-transcript__focus-indicator, .webchat__basic-transcript__terminator:focus-visible + .webchat__basic-transcript__focus-indicator': {
height: string;
borderColor: string;
borderStyle: string;
borderWidth: string | number;
boxSizing: string;
pointerEvents: string;
position: string;
top: number;
width: string;
};
'& .webchat__basic-transcript__activity': {
paddingTop: number;
position: string;
'&:first-child': {
marginTop: number;
};
'&:not(:first-child)': {
marginTop: number;
};
};
'& .webchat__basic-transcript__activity-active-descendant': {
height: string;
left: number;
marginTop: number;
paddingBottom: number;
pointerEvents: string;
position: string;
top: number;
width: string;
};
'& .webchat__basic-transcript__activity-body:not(:empty)': {
paddingBottom: number;
};
'& .webchat__basic-transcript__terminator': {
bottom: number;
height: number;
outline: number;
position: string;
width: string;
};
'& .webchat__basic-transcript__terminator-body': {
bottom: number;
display: string;
justifyContent: string;
position: string;
width: string;
};
'& .webchat__basic-transcript__terminator:not(:focus) .webchat__basic-transcript__terminator-body': {
display: string;
};
'& .webchat__basic-transcript__terminator-text': {
backgroundColor: string;
borderRadius: string | number;
color: string;
fontFamily: string;
fontSize: string | number;
margin: number;
padding: number;
};
};
};
readonly bubble: {
'&.webchat__bubble': any;
};
readonly carouselFilmStrip: {
'&.webchat__carousel-filmstrip': any;
};
readonly carouselFilmStripAttachment: any;
readonly carouselFlipper: {
'&.webchat__carousel-layout': {
'& .react-film__flipper': {
'& .react-film__flipper__body': {
backgroundColor: string;
color: string;
outline: number;
};
'&:disabled, &[aria-disabled="true"]': {
'& .react-film__flipper__body': {
backgroundColor: string;
color: string;
};
};
'&:focus .react-film__flipper__body': {
backgroundColor: string;
color: string;
};
'&:hover .react-film__flipper__body': {
backgroundColor: string;
color: string;
};
};
};
};
readonly connectivityNotification: {
alignItems: string;
color: string;
display: string;
fontFamily: string;
fontSize: string | number;
marginBottom: number;
marginLeft: number;
marginRight: number;
marginTop: number;
};
readonly dictationInterims: {
fontFamily: string;
margin: number;
paddingBottom: number;
paddingLeft: number;
paddingRight: number;
paddingTop: number;
'&.dictating > span:not(:first-child), &.status': {
opacity: number;
};
};
readonly errorBox: {
display: string;
flexDirection: string;
fontFamily: string;
margin: number;
minHeight: number;
maxHeight: number;
overflowY: string;
WebkitOverflowScrolling: string;
'& > :first-child': {
backgroundColor: string;
color: string;
padding: string;
};
'& > :last-child': {
borderColor: string;
borderStyle: string;
borderBottomWidth: number;
borderLeftWidth: number;
borderRightWidth: number;
borderTopWidth: number;
margin: number;
overflowY: string;
padding: number;
'& > pre': {
fontFamily: string;
fontSize: string;
margin: number;
};
};
};
readonly errorNotification: {
alignItems: string;
color: string | number;
display: string;
fontFamily: string;
fontSize: string | number;
fontWeight: string;
marginBottom: number;
marginLeft: number;
marginRight: number;
marginTop: number;
'& > svg': {
fill: string | number;
'&:not(.webchat__error--rtl)': {
paddingRight: number;
};
'&.webchat__error--rtl': {
paddingLeft: number;
};
};
};
readonly fileContent: {
color: string;
display: string;
fontFamily: string;
padding: number;
'& .webchat__fileContent__badge': {
justifyContent: string;
};
'& .webchat__fileContent__buttonLink': {
alignItems: string;
color: string;
textDecoration: string;
'&:focus': {
backgroundColor: string;
};
};
'& .webchat__fileContent__downloadIcon': {
fill: string;
padding: number;
'&:not(.webchat__fileContent__downloadIcon--rtl)': {
marginLeft: number;
};
'&.webchat__fileContent__downloadIcon--rtl': {
marginRight: number;
};
};
'& .webchat__fileContent__fileName': {
color: string;
};
};
readonly imageAvatar: {
height: number;
overflow: string;
width: number;
};
readonly initialsAvatar: {
'&.webchat__initialsAvatar': {
alignItems: string;
color: string;
fontFamily: string;
height: number;
justifyContent: string;
overflow: string;
width: number;
'&.webchat__initialsAvatar--fromUser': {
backgroundColor: string;
};
'&:not(.webchat__initialsAvatar--fromUser)': {
backgroundColor: string;
};
};
};
readonly keyboardHelp: {
'&.webchat__keyboard-help': {
fontFamily: string;
fontSize: number;
height: string;
outline: number;
overflow: string;
'&:not(.webchat__keyboard-help--shown)': {
height: number;
margin: number;
overflow: string;
pointerEvents: string;
width: number;
};
'& .webchat__keyboard-help__border': {
boxSizing: string;
height: string;
padding: number;
};
'& .webchat__keyboard-help__box': {
borderRadius: number;
boxShadow: string;
height: string;
overflow: string;
"@media (forced-colors: active)": {
backgroundColor: string;
boxShadow: string;
outlineColor: string;
outlineStyle: string;
outlineWidth: number;
};
"@media (forced-colors: none) and (prefers-color-scheme: dark)": {
backgroundColor: string;
boxShadow: string;
};
};
'& .webchat__keyboard-help__scrollable': {
boxSizing: string;
height: string;
overflowY: string;
padding: number;
position: string;
};
'& .webchat__keyboard-help__close-button': {
appearance: string;
backgroundColor: string;
border: number;
outline: number;
padding: number;
pointerEvents: string;
position: string;
right: number;
top: number;
};
'& .webchat__keyboard-help__close-button-border': {
alignItems: string;
borderRadius: number;
borderStyle: string;
borderWidth: number;
color: string;
display: string;
height: number;
justifyContent: string;
pointerEvents: string;
width: number;
"@media (forced-colors: none) and (prefers-color-scheme: light)": {
borderColor: string;
'&:active': {
backgroundColor: string;
};
'&:not(:active):hover': {
backgroundColor: string;
};
};
"@media (forced-colors: none) and (prefers-color-scheme: dark)": {
borderColor: string;
'&:active': {
backgroundColor: string;
};
'&:not(:active):hover': {
backgroundColor: string;
};
};
"@media (forced-colors: active)": {
backgroundColor: string;
borderColor: string;
};
};
'& .webchat__keyboard-help__close-button-image': {
fill: string;
height: number;
width: number;
"@media (forced-colors: active)": {
fill: string;
};
"@media (forced-colors: none) and (prefers-color-scheme: dark)": {
fill: string;
};
};
'& .webchat__keyboard-help__header, & .webchat__keyboard-help__sub-header': {
marginBottom: number;
marginTop: number;
};
'& .webchat__keyboard-help__section:not(:last-child)': {
marginBottom: number;
};
'& .webchat__keyboard-help__two-panes': {
alignItems: string;
display: string;
};
'& .webchat__keyboard-help__image': {
paddingRight: number;
};
'& .webchat__keyboard-help__image--dark, & .webchat__keyboard-help__image--high-contrast': {
display: string;
};
"@media (forced-colors: active)": {
'& .webchat__keyboard-help__image--dark, & .webchat__keyboard-help__image--light': {
display: string;
};
'& .webchat__keyboard-help__image--high-contrast': {
display: string;
mixBlendMode: string;
};
};
"@media (forced-colors: none) and (prefers-color-scheme: dark)": {
color: string;
'& .webchat__keyboard-help__image--light': {
display: string;
};
'& .webchat__keyboard-help__image--dark': {
display: string;
};
};
'& .webchat__keyboard-help__notes': {
marginBottom: number;
marginTop: number;
};
'& .webchat__keyboard-help__notes-header': {
fontWeight: string;
margin: number;
};
'& .webchat__keyboard-help__notes-pane': {
flexShrink: number;
};
'& .webchat__keyboard-help__notes-text': {
margin: number;
};
};
};
readonly microphoneButton: {
'&.webchat__microphone-button': {
'&.webchat__microphone-button--dictating .webchat__microphone-button__button': {
'&, &:focus, &:hover': {
'& .webchat__microphone-button__icon': {
fill: string;
};
};
};
};
};
readonly options: {
readonly accent: string;
readonly backgroundColor: string;
readonly subtle: string;
readonly paddingRegular: number;
readonly paddingWide: number;
readonly transitionDuration: string;
readonly fontSizeSmall: string | number;
readonly monospaceFont: string;
readonly primaryFont: string;
readonly rootHeight: string | number;
readonly rootWidth: string | number;
readonly rootZIndex: number;
readonly avatarBorderRadius: string | number;
readonly avatarSize: number;
readonly botAvatarBackgroundColor: string;
readonly botAvatarImage: string;
readonly botAvatarInitials: string;
readonly userAvatarBackgroundColor: string;
readonly userAvatarImage: string;
readonly userAvatarInitials: string;
readonly showAvatarInGroup: true | "sender" | "status";
readonly bubbleBackground: string;
readonly bubbleBorderColor: string;
readonly bubbleBorderRadius: number;
readonly bubbleBorderStyle: string;
readonly bubbleBorderWidth: number;
readonly bubbleFromUserBackground: string;
readonly bubbleFromUserBorderColor: string;
readonly bubbleFromUserBorderRadius: number;
readonly bubbleFromUserBorderStyle: string;
readonly bubbleFromUserBorderWidth: number;
readonly bubbleFromUserNubOffset: number;
readonly bubbleFromUserNubSize: number;
readonly bubbleFromUserTextColor: string;
readonly bubbleImageHeight: number;
readonly bubbleMaxWidth: number;
readonly bubbleMinHeight: number;
readonly bubbleMinWidth: number;
readonly bubbleNubOffset: number;
readonly bubbleNubSize: number;
readonly bubbleTextColor: string;
readonly messageActivityWordBreak: "break-word" | "normal" | "break-all" | "keep-all";
readonly connectivityIconPadding: number;
readonly connectivityMarginLeftRight: number;
readonly connectivityMarginTopBottom: number;
readonly connectivityTextSize: string | number;
readonly failedConnectivity: string | number;
readonly slowConnectivity: string;
readonly notificationText: string;
readonly slowConnectionAfter: number;
readonly emojiSet: (boolean | Record<string, string>) & (false | Record<string, string>);
readonly internalLiveRegionFadeAfter: number;
readonly markdownRespectCRLF: boolean;
readonly markdownRenderHTML: boolean;
readonly markdownExternalLinkIconImage: string;
readonly autoScrollSnapOnActivity: number | boolean;
readonly autoScrollSnapOnActivityOffset: number;
readonly autoScrollSnapOnPage: number | boolean;
readonly autoScrollSnapOnPageOffset: number;
readonly hideSendBox: boolean;
readonly hideUploadButton: boolean;
readonly hideTelephoneKeypadButton: boolean;
readonly microphoneButtonColorOnDictate: string;
readonly sendBoxBackground: string;
readonly uploadAccept: string;
readonly uploadMultiple: boolean;
readonly sendAttachmentOn: "attach" | "send";
readonly sendBoxButtonColor: string;
readonly sendBoxButtonShadeBorderRadius: number;
readonly sendBoxButtonShadeColor: string;
readonly sendBoxButtonShadeInset: number;
readonly sendBoxButtonColorOnActive: string;
readonly sendBoxButtonShadeColorOnActive: string;
readonly sendBoxButtonColorOnDisabled: string;
readonly sendBoxButtonShadeColorOnDisabled: string;
readonly sendBoxButtonColorOnFocus: string;
readonly sendBoxButtonShadeColorOnFocus: string;
readonly sendBoxButtonColorOnHover: string;
readonly sendBoxButtonShadeColorOnHover: string;
readonly sendBoxButtonKeyboardFocusIndicatorBorderColor: string;
readonly sendBoxButtonKeyboardFocusIndicatorBorderRadius: string | number;
readonly sendBoxButtonKeyboardFocusIndicatorBorderStyle: string;
readonly sendBoxButtonKeyboardFocusIndicatorBorderWidth: number;
readonly sendBoxButtonKeyboardFocusIndicatorInset: number;
readonly sendBoxDisabledTextColor: string;
readonly sendBoxHeight: string | number;
readonly sendBoxMaxHeight: string | number;
readonly sendBoxTextColor: string;
readonly sendBoxBorderBottom: string | number;
readonly sendBoxBorderLeft: string | number;
readonly sendBoxBorderRight: string | number;
readonly sendBoxBorderTop: string | number;
readonly sendBoxPlaceholderColor: string;
readonly sendBoxTextWrap: boolean;
readonly sendBoxButtonAlignment: "bottom" | "top" | "stretch";
readonly showSpokenText: boolean;
readonly spinnerAnimationBackgroundImage: string;
readonly spinnerAnimationHeight: string | number;
readonly spinnerAnimationWidth: string | number;
readonly spinnerAnimationPadding: string | number;
readonly suggestedActionBorderRadius: string | number;
readonly suggestedActionBackground: string;
readonly suggestedActionBackgroundColor: string;
readonly suggestedActionBorderColor: string;
readonly suggestedActionBorderStyle: string;
readonly suggestedActionBorderWidth: number;
readonly suggestedActionTextColor: string;
readonly suggestedActionBackgroundColorOnDisabled: string;
readonly suggestedActionBorderColorOnDisabled: string;
readonly suggestedActionBorderStyleOnDisabled: string;
readonly suggestedActionBorderWidthOnDisabled: number;
readonly suggestedActionTextColorOnDisabled: string;
readonly suggestedActionBackgroundColorOnActive: string;
readonly suggestedActionBorderColorOnActive: string;
readonly suggestedActionBorderStyleOnActive: string;
readonly suggestedActionBorderWidthOnActive: number;
readonly suggestedActionTextColorOnActive: string;
readonly suggestedActionBackgroundColorOnFocus: string;
readonly suggestedActionBorderColorOnFocus: string;
readonly suggestedActionBorderStyleOnFocus: string;
readonly suggestedActionBorderWidthOnFocus: number;
readonly suggestedActionTextColorOnFocus: string;
readonly suggestedActionBackgroundColorOnHover: string;
readonly suggestedActionBorderColorOnHover: string;
readonly suggestedActionBorderStyleOnHover: string;
readonly suggestedActionBorderWidthOnHover: number;
readonly suggestedActionTextColorOnHover: string;
readonly suggestedActionDisabledBackground: string;
readonly suggestedActionDisabledBorderColor: string;
readonly suggestedActionDisabledBorderStyle: string;
readonly suggestedActionDisabledBorderWidth: number;
readonly suggestedActionDisabledTextColor: string;
readonly suggestedActionHeight: string | number;
readonly suggestedActionImageHeight: string | number;
readonly suggestedActionLayout: "carousel" | "flow" | "stacked";
readonly suggestedActionKeyboardFocusIndicatorBorderColor: string;
readonly suggestedActionKeyboardFocusIndicatorBorderRadius: string | number;
readonly suggestedActionKeyboardFocusIndicatorBorderStyle: string;
readonly suggestedActionKeyboardFocusIndicatorBorderWidth: number;
readonly suggestedActionKeyboardFocusIndicatorInset: number;
readonly suggestedActionActiveBackground: string;
readonly suggestedActionFocusBackground: string;
readonly suggestedActionHoverBackground: string;
readonly suggestedActionsCarouselFlipperCursor: string;
readonly suggestedActionsCarouselFlipperBoxWidth: number;
readonly suggestedActionsCarouselFlipperSize: number;
readonly suggestedActionsFlowMaxHeight: undefined;
readonly suggestedActionsStackedHeight: number | "auto";
readonly suggestedActionsStackedOverflow: "visible" | "hidden" | "auto" | "scroll";
readonly suggestedActionsStackedLayoutButtonMaxHeight: string | number;
readonly suggestedActionsStackedLayoutButtonTextWrap: boolean;
readonly suggestedActionsVisualKeyboardIndicatorColor: string;
readonly suggestedActionsVisualKeyboardIndicatorStyle: string;
readonly suggestedActionsVisualKeyboardIndicatorWidth: number;
readonly groupTimestamp: number | boolean;
readonly sendTimeout: number | ((activity: import("botframework-webchat-core").WebChatActivity) => number);
readonly sendTimeoutForAttachments: number;
readonly timestampColor: string;
readonly timestampFormat: "relative" | "absolute";
readonly transcriptTerminatorBackgroundColor: string;
readonly transcriptTerminatorBorderRadius: string | number;
readonly transcriptTerminatorColor: string;
readonly transcriptTerminatorFontSize: string | number;
readonly transcriptActivityVisualKeyboardIndicatorColor: string;
readonly transcriptActivityVisualKeyboardIndicatorStyle: string;
readonly transcriptActivityVisualKeyboardIndicatorWidth: string | number;
readonly transcriptVisualKeyboardIndicatorColor: string;
readonly transcriptVisualKeyboardIndicatorStyle: string;
readonly transcriptVisualKeyboardIndicatorWidth: string | number;
readonly scrollToEndButtonBehavior: false | "any" | "unread";
readonly scrollToEndButtonFontSize: string | number;
readonly transcriptOverlayButtonBackground: string;
readonly transcriptOverlayButtonBackgroundOnDisabled: string;
readonly transcriptOverlayButtonBackgroundOnFocus: string;
readonly transcriptOverlayButtonBackgroundOnHover: string;
readonly transcriptOverlayButtonColor: string;
readonly transcriptOverlayButtonColorOnDisabled: string;
readonly transcriptOverlayButtonColorOnFocus: string;
readonly transcriptOverlayButtonColorOnHover: string;
readonly notificationDebounceTimeout: number;
readonly hideToaster: boolean;
readonly toasterHeight: string | number;
readonly toasterMaxHeight: string | number;
readonly toasterSingularMaxHeight: string | number;
readonly toastFontSize: string | number;
readonly toastIconWidth: string | number;
readonly toastSeparatorColor: string;
readonly toastTextPadding: string | number;
readonly toastErrorBackgroundColor: string;
readonly toastErrorColor: string;
readonly toastInfoBackgroundColor: string;
readonly toastInfoColor: string;
readonly toastSuccessBackgroundColor: string;
readonly toastSuccessColor: string;
readonly toastWarnBackgroundColor: string;
readonly toastWarnColor: string;
readonly typingAnimationBackgroundImage: string;
readonly typingAnimationDuration: number;
readonly typingAnimationHeight: string | number;
readonly typingAnimationWidth: string | number;
readonly enableUploadThumbnail: boolean;
readonly uploadThumbnailContentType: string;
readonly uploadThumbnailHeight: number;
readonly uploadThumbnailQuality: number;
readonly uploadThumbnailWidth: number;
readonly videoHeight: string | number;
readonly maxMessageLength: number;
};
readonly root: {
backgroundColor: string;
height: string | number;
width: string | number;
zIndex: number;
};
readonly scrollToEndButton: {
'&.webchat__scroll-to-end-button': {
'@media screen and (forced-colors: active)': {
borderWidth: string;
outline: string;
};
appearance: string;
backgroundColor: string;
borderRadius: number;
borderWidth: number;
bottom: number;
color: string;
fontFamily: string;
fontSize: string | number;
outline: number;
padding: number;
position: string;
zIndex: number;
'&:hover': {
backgroundColor: string;
color: string;
};
'&:focus': {
backgroundColor: string;
color: string;
};
'&:not(.webchat__scroll-to-end-button--rtl)': {
right: number;
};
'&.webchat__scroll-to-end-button--rtl': {
left: number;
};
};
};
readonly sendBox: {
'&.webchat__send-box': {
'& .webchat__send-box__button--align-bottom': {
alignSelf: string;
};
'& .webchat__send-box__button--align-stretch': {
alignSelf: string;
};
'& .webchat__send-box__button--align-top': {
alignSelf: string;
};
'& .webchat__send-box__main': {
alignItems: string;
backgroundColor: string;
borderBottom: string | number;
borderLeft: string | number;
borderRight: string | number;
borderTop: string | number;
minHeight: string | number;
};
};
};
readonly sendBoxButton: {
'&.webchat__icon-button': {
alignItems: string;
appearance: string;
backgroundColor: string;
border: number;
display: string;
fill: string;
justifyContent: string;
outline: number;
padding: number;
position: string;
width: string | number;
'&:not(.webchat__icon-button--stretch)': {
height: string | number;
};
'&:disabled, &[aria-disabled="true"]': {
fill: string;
'& .webchat__icon-button__shade': {
backgroundColor: string;
};
};
'&:not(:disabled):not([aria-disabled="true"])': {
'&:active': {
fill: string;
'& .webchat__icon-button__shade': {
backgroundColor: string;
};
};
'&:not(:active)': {
'&:hover': {
fill: string;
'& .webchat__icon-button__shade': {
backgroundColor: string;
};
};
'&:not(:hover)': {
'&:focus': {
fill: string;
'& .webchat__icon-button__shade': {
backgroundColor: string;
};
};
};
};
};
'&:not(:focus-visible) .webchat__icon-button__keyboard-focus-indicator': {
display: string;
};
'&:not(.webchat__icon-button--focus-visible) .webchat__icon-button__keyboard-focus-indicator': {
display: string;
};
'& > *': {
position: string;
};
'& .webchat__icon-button__shade': {
backgroundColor: string;
borderRadius: number;
bottom: number;
left: number;
position: string;
right: number;
top: number;
};
'& .webchat__icon-button__keyboard-focus-indicator': {
borderColor: string;
borderRadius: string | number;
borderStyle: string;
borderWidth: number;
bottom: number;
left: number;
position: string;
right: number;
top: number;
};
};
};
readonly sendBoxTextBox: {
'&.webchat__send-box-text-box': {
alignItems: string;
fontFamily: string;
padding: number;
position: string;
'& .webchat__send-box-text-box__input': {
border: number;
fontFamily: string;
fontSize: string;
height: string;
outline: number;
padding: number;
};
'& .webchat__send-box-text-box__input, & .webchat__send-box-text-box__html-text-area': {
backgroundColor: string;
'&:not(:disabled):not([aria-disabled="true"])': {
color: string;
};
'&:disabled, &[aria-disabled="true"]': {
color: string;
};
'&::placeholder': {
color: string;
};
};
'& .webchat__send-box-text-box__input, & .webchat__send-box-text-box__text-area': {
maxHeight: string | number;
};
'& .webchat__send-box-text-box__glass': {
height: string;
left: number;
position: string;
top: number;
userSelect: number;
width: string;
};
};
};
readonly singleAttachmentActivity: {
'& > .bubble-box': {
maxWidth: number;
minWidth: number;
};
'& > .filler': {
minWidth: number;
};
};
readonly spinnerAnimation: {
backgroundImage: string;
backgroundRepeat: string;
backgroundSize: string;
height: string | number;
width: string | number;
':not(.webchat__spinner--rtl)': {
marginRight: string | number;
};
'.webchat__spinner--rtl': {
marginLeft: string | number;
};
};
readonly stackedLayout: {
'&.webchat__stacked-layout': {
marginLeft: number;
marginRight: number;
'& .webchat__stacked-layout__alignment-pad': {
transitionDuration: string;
transitionProperty: string;
width: number;
};
'&.webchat__stacked-layout--extra-trailing .webchat__stacked-layout__alignment-pad': {
width: number;
};
'& .webchat__stacked-layout__avatar-gutter': {
transitionDuration: string;
transitionProperty: string;
width: number;
};
'& .webchat__stacked-layout__attachment': {
maxWidth: number;
minWidth: number;
transitionDuration: string;
transitionProperty: string;
};
'& .webchat__stacked-layout__attachment-row': {
marginTop: number;
width: string;
};
'&.webchat__stacked-layout--no-message .webchat__stacked-layout__attachment-row.webchat__stacked-layout__attachment-row--first': {
marginTop: number;
};
'& .webchat__stacked-layout__message': {
maxWidth: number;
overflow: string;
transitionDuration: string;
transitionProperty: string;
};
'& .webchat__stacked-layout__nub-pad': {
transitionDuration: string;
transitionProperty: string;
width: number;
};
'&.webchat__stacked-layout--hide-avatar, &.webchat__stacked-layout--show-avatar': {
'& .webchat__stacked-layout__avatar-gutter': {
width: number;
};
};
'&.webchat__stacked-layout--hide-avatar, &.webchat__stacked-layout--show-avatar, &.webchat__stacked-layout--hide-nub, &.webchat__stacked-layout--show-nub': {
'& .webchat__stacked-layout__attachment, & .webchat__stacked-layout__message': {
maxWidth: number;
};
'& .webchat__stacked-layout__nub-pad': {
width: number;
};
};
'&:not(.webchat__stacked-layout--top-callout)': {
'& .webchat__stacked-layout__avatar-gutter, & .webchat__stacked-layout__content': {
justifyContent: string;
};
};
};
};
readonly suggestedAction: {
'&.webchat__suggested-action': {
alignItems: string;
background: string;
backgroundColor: string;
borderColor: string;
borderRadius: string | number;
borderStyle: string;
borderWidth: number;
color: string;
fontFamily: string;
fontSize: string;
height: string | number;
justifyContent: string;
maxWidth: string;
outline: number;
paddingLeft: number;
paddingRight: number;
position: string;
whiteSpace: string;
width: string;
'&:disabled, &[aria-disabled="true"]': {
background: string;
backgroundColor: string;
borderColor: string;
borderStyle: string;
borderWidth: number;
color: string;
};
'&:not(:disabled):not([aria-disabled="true"])': {
'&:active': {
background: string;
backgroundColor: string;
borderColor: string;
borderStyle: string;
borderWidth: number;
color: string;
};
'&:not(:active)': {
'&:hover': {
background: string;
backgroundColor: string;
borderColor: string;
borderStyle: string;
borderWidth: number;
color: string;
};
'&:not(:hover)': {
'&:focus': {
background: string;
backgroundColor: string;
borderColor: string;
borderStyle: string;
borderWidth: number;
color: string;
};
};
};
};
'&:not(:focus-visible) .webchat__suggested-action__keyboard-focus-indicator': {
display: string;
};
'&:not(.webchat__suggested-action--focus-visible) .webchat__suggested-action__keyboard-focus-indicator': {
display: string;
};
'&:not(.webchat__suggested-action--rtl) .webchat__suggested-action__image + .webchat__suggested-action__text': {
paddingLeft: number;
};
'&.webchat__suggested-action--rtl .webchat__suggested-action__image + .webchat__suggested-action__text': {
paddingRight: number;
};
'&.webchat__suggested-action--wrapping': {
height: string;
maxHeight: string | number;
minHeight: string | number;
};
'& .webchat__suggested-action__image': {
height: string | number;
};
'& .webchat__suggested-action__keyboard-focus-indicator': {
borderColor: string;
borderRadius: string | number;
borderStyle: string;
borderWidth: number;
bottom: number;
left: number;
position: string;
right: number;
top: number;
};
};
};
readonly suggestedActions: {
'&.webchat__suggested-actions': {
position: string;
'&.webchat__suggested-actions--carousel-layout': {
'& .webchat__suggested-actions__carousel': {
paddingBottom: number;
paddingTop: number;
'& .webchat__suggested-actions__item-box': {
paddingBottom: number;
paddingLeft: number;
paddingRight: number;
paddingTop: number;
};
'& .react-film__filmstrip': {
scrollbarWidth: string;
};
'& .react-film__flipper': {
'&:disabled, &[aria-disabled="true"]': {
'& .react-film__flipper__body': {
backgroundColor: string;
color: string;
};
};
'&:focus .react-film__flipper__body': {
backgroundColor: string;
color: string;
};
'&:hover .react-film__flipper__body': {
backgroundColor: string;
color: string;
};
'& .react-film__flipper__body': {
background: string;
color: string;
outline: number;
};
};
};
'&:not(.webchat__suggested-actions--rtl)': {
'& .react-film__filmstrip__item:first-child': {
paddingLeft: number;
};
'& .react-film__filmstrip__item:last-child': {
paddingRight: number;
};
'& .react-film__flipper + .react-film__filmstrip': {
'& .react-film__filmstrip__item:first-child': {
paddingLeft: number;
};
'& .react-film__filmstrip__item:last-child': {
paddingRight: number;
};
};
};
'&.webchat__suggested-actions--rtl': {
'& .react-film__filmstrip__item:first-child': {
paddingRight: number;
};
'& .react-film__filmstrip__item:last-child': {
paddingLeft: number;
};
'& .react-film__flipper + .react-film__filmstrip': {
'& .react-film__filmstrip__item:first-child': {
paddingRight: number;
};
'& .react-film__filmstrip__item:last-child': {
paddingLeft: number;
};
};
};
};
'&.webchat__suggested-actions--flow-layout': {
'& .webchat__suggested-actions__flow-box': {
maxHeight: undefined;
overflowY: string;
paddingBottom: number;
paddingLeft: number;
paddingRight: number;
paddingTop: number;
};
'& .webchat__suggested-actions__flow-item-box': {
maxWidth: string;
overflow: string;
};
'& .webchat__suggested-actions__item-box': {
paddingBottom: number;
paddingLeft: number;
paddingRight: number;
paddingTop: number;
};
};
'&.webchat__suggested-actions--stacked-layout': {
'& .webchat__suggested-actions__stack': {
maxHeight: number | "auto";
overflowY: "visible" | "hidden" | "auto" | "scroll";
paddingBottom: number;
paddingLeft: number;
paddingRight: number;
paddingTop: number;
};
'& .webchat__suggested-actions__item-box': {
paddingBottom: number;
paddingLeft: number;
paddingRight: number;
paddingTop: number;
};
};
'&.webchat__suggested-actions--flow-layout, &.webchat__suggested-actions--stacked-layout': {
'& .webchat__suggested-actions__button-text': {
overflow: string;
textOverflow: string;
};
'& .webchat__suggested-actions__button-text-stacked-text-wrap': {
alignItems: string;
display: string;
whiteSpace: string;
};
};
'& .webchat__suggested-actions__item-box': {
display: string;
maxWidth: string;
};
'&.webchat__suggested-actions--focus-within, &:focus-within': {
'& .webchat__suggested-actions__focus-indicator': {
borderColor: string;
borderStyle: string;
borderWidth: number;
boxSizing: string;
height: string;
pointerEvents: string;
position: string;
top: number;
width: string;
};
};
};
};
readonly toast: {
fontFamily: string;
fontSize: string | number;
minHeight: string | number;
'&.webchat__toast--error': {
color: string;
fill: string;
};
'&.webchat__toast--info': {
color: string;
fill: string;
};
'&.webchat__toast--success': {
color: string;
fill: string;
};
'&.webchat__toast--warn': {
color: string;
fill: string;
};
'& .webchat__toast__iconBox': {
alignItems: string;
display: string;
flexShrink: number;
height: string | number;
justifyContent: string;
width: string | number;
};
'& .webchat__toast__dismissButton': {
alignItems: string;
appearance: string;
backgroundColor: string;
border: number;
display: string;
height: string | number;
justifyContent: string;
outline: number;
padding: number;
width: string | number;
'&:focus .webchat__toast__dismissButtonFocus': {
borderColor: string;
};
'&:hover .webchat__toast__dismissButtonFocus': {
backgroundColor: string;
};
};
'& .webchat__toast__dismissButtonFocus': {
alignItems: string;
borderColor: string;
borderStyle: string;
borderWidth: number;
borderRadius: number;
display: string;
height: number;
justifyContent: string;
width: number;
};
'& .webchat__toast__text': {
alignSelf: string;
paddingBottom: string | number;
paddingTop: string | number;
};
};
readonly toaster: {
overflowY: string;
'&:not(.webchat__toaster--expandable)': {
maxHeight: string | number;
};
'&.webchat__toaster--expandable:not(.webchat__toaster--expanded) > ul': {
height: number;
};
'&.webchat__toaster--expandable.webchat__toaster--expanded': {
maxHeight: string | number;
};
'& .webchat__toaster__header': {
alignItems: string;
alignSelf: string;
appearance: string;
backgroundColor: string;
border: number;
display: string;
fontFamily: string;
fontSize: string | number;
minHeight: string | number;
outline: number;
padding: number;
textAlign: string;
'&:focus .webchat__toaster__expandIconFocus': {
borderColor: string;
};
'&:hover .webchat__toaster__expandIconFocus': {
backgroundColor: string;
};
};
'& .webchat__toaster__expandIconFocus': {
alignItems: string;
borderColor: string;
borderStyle: string;
borderWidth: number;
borderRadius: number;
display: string;
height: number;
justifyContent: string;
width: number;
};
'&.webchat__toaster--error': {
'&:not(.webchat__toaster--expandable), & .webchat__toaster__header': {
backgroundColor: string;
};
'& .webchat__toaster__header': {
color: string;
fill: string;
};
};
'&.webchat__toaster--info': {
'&:not(.webchat__toaster--expandable), & .webchat__toaster__header': {
backgroundColor: string;
};
'& .webchat__toaster__header': {
color: string;
fill: string;
};
};
'&.webchat__toaster--success': {
'&:not(.webchat__toaster--expandable), & .webchat__toaster__header': {
backgroundColor: string;
};
'& .webchat__toaster__header': {
color: string;
fill: string;
};
};
'&.webchat__toaster--warn': {
'&:not(.webchat