botframework-webchat-component
Version:
React component of botframework-webchat
1,244 lines (1,234 loc) • 91 kB
text/typescript
import * as botframework_webchat_api from 'botframework-webchat-api';
import { ActivityMiddleware, ActivityStatusMiddleware, AttachmentForScreenReaderMiddleware, AttachmentMiddleware, AvatarMiddleware, CardActionMiddleware, GroupActivitiesMiddleware, ScrollToEndButtonMiddleware, SendBoxMiddleware, SendBoxToolbarMiddleware, StyleOptions, ToastMiddleware, TypingIndicatorMiddleware, ComposerProps as ComposerProps$1, WebSpeechPonyfillFactory, StrictStyleOptions, WebSpeechPonyfill, hooks as hooks$1 } from 'botframework-webchat-api';
export { concatMiddleware, localize } from 'botframework-webchat-api';
import * as PropTypes from 'prop-types';
import PropTypes__default from 'prop-types';
import * as botframework_webchat_core from 'botframework-webchat-core';
import { WebChatActivity, SendBoxAttachment } from 'botframework-webchat-core';
export { WebChatActivity } from 'botframework-webchat-core';
import * as react from 'react';
import react__default, { ReactNode, MutableRefObject, ComponentType, ChangeEvent, FocusEvent, KeyboardEvent, SyntheticEvent } from 'react';
import { EmptyObject } from 'type-fest';
type AttributeSetter = false | string | ((value?: string) => string);
type LinkOptions = {
/** Value of "aria-label" attribute of the link. If set to `false`, remove existing attribute. */
ariaLabel?: AttributeSetter;
/** Turns this link into a <button> with "value" attribute instead of "href". */
asButton?: boolean;
/** Value of "class" attribute of the link. If set to `false`, remove existing attribute. */
className?: AttributeSetter;
/** Alternate text of the image icon appended to the link. */
iconAlt?: string;
/** Class name of the image icon appended to the link. */
iconClassName?: string;
/** Value of "rel" attribute of the link. If set to `false`, remove existing attribute. */
rel?: AttributeSetter;
/** Value of "target" attribute of the link. If set to `false`, remove existing attribute. */
target?: AttributeSetter;
/** Value of "title" attribute of the link. If set to `false`, remove existing attribute. */
title?: AttributeSetter;
/** Wraps the link with zero-width space. */
wrapZeroWidthSpace?: boolean;
};
declare const SENDING = "sending";
declare const SEND_FAILED = "send failed";
declare const SENT = "sent";
type SendStatus = typeof SENDING | typeof SEND_FAILED | typeof SENT;
type ContextType$1 = {
activityMiddleware: readonly ActivityMiddleware[];
activityStatusMiddleware: readonly ActivityStatusMiddleware[];
attachmentForScreenReaderMiddleware: readonly AttachmentForScreenReaderMiddleware[];
attachmentMiddleware: readonly AttachmentMiddleware[];
avatarMiddleware: readonly AvatarMiddleware[];
cardActionMiddleware: readonly CardActionMiddleware[];
groupActivitiesMiddleware: readonly GroupActivitiesMiddleware[];
scrollToEndButtonMiddleware: readonly ScrollToEndButtonMiddleware[];
sendBoxMiddleware: readonly SendBoxMiddleware[];
sendBoxToolbarMiddleware: readonly SendBoxToolbarMiddleware[];
styleOptions: StyleOptions;
toastMiddleware: readonly ToastMiddleware[];
typingIndicatorMiddleware: readonly TypingIndicatorMiddleware[];
};
type ComposerCoreProps = Readonly<{
children?: ReactNode;
extraStyleSet?: any;
nonce?: string;
renderMarkdown?: (markdown: string, newLineOptions: {
markdownRespectCRLF: boolean;
}, linkOptions: {
externalLinkAlt: string;
}) => string;
styleSet?: any;
suggestedActionsAccessKey?: boolean | string;
webSpeechPonyfillFactory?: WebSpeechPonyfillFactory;
}>;
type ComposerProps = ComposerProps$1 & ComposerCoreProps;
type ReactWebChatProps = Readonly<Omit<ComposerProps, 'children'> & {
className?: string;
role?: 'complementary' | 'contentinfo' | 'form' | 'main' | 'region';
}>;
declare const ReactWebChat: {
({ className, role, ...composerProps }: ReactWebChatProps): react__default.JSX.Element;
defaultProps: {
children: any;
extraStyleSet: any;
nonce: any;
renderMarkdown: any;
styleSet: any;
suggestedActionsAccessKey: string;
webSpeechPonyfillFactory: any;
internalRenderErrorBox: any;
onTelemetry: any;
ponyfill: any;
store: any;
className: any;
role: any;
};
propTypes: {
extraStyleSet: PropTypes__default.Requireable<any>;
nonce: PropTypes__default.Requireable<string>;
renderMarkdown: PropTypes__default.Requireable<(...args: any[]) => any>;
styleSet: PropTypes__default.Requireable<any>;
suggestedActionsAccessKey: PropTypes__default.Requireable<NonNullable<string | boolean>>;
webSpeechPonyfillFactory: PropTypes__default.Requireable<(...args: any[]) => any>;
internalRenderErrorBox: PropTypes__default.Requireable<any>;
onTelemetry: PropTypes__default.Requireable<(...args: any[]) => any>;
ponyfill: PropTypes__default.Requireable<any>;
store: PropTypes__default.Requireable<any>;
className: PropTypes__default.Requireable<string>;
role: PropTypes__default.Requireable<string>;
};
};
type BasicWebChatProps = {
className?: string;
role?: 'complementary' | 'contentinfo' | 'form' | 'main' | 'region';
};
declare function createCoreMiddleware$2(): AttachmentMiddleware[];
declare function createCoreMiddleware$1(): ActivityMiddleware[];
declare function createCoreMiddleware(): ActivityStatusMiddleware[];
declare 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: 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--f