import React from 'react'; import { IStyle } from '@fluentui/react'; import { BaseCustomStyles } from '../types'; /** * Fluent styles for {@link Sendbox}. * * @public */ export interface SendBoxStylesProps extends BaseCustomStyles { /** Styles for the text field. */ textField?: IStyle; /** styles for the text field container */ textFieldContainer?: IStyle; /** Styles for the container of the send message icon. */ sendMessageIconContainer?: IStyle; /** Styles for the send message icon; These styles will be ignored when a custom send message icon is provided. */ sendMessageIcon?: IStyle; /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */ systemMessage?: IStyle; } /** * Strings of {@link SendBox} that can be overridden. * * @public */ export interface SendBoxStrings { /** * Placeholder text in SendBox when there is no user input */ placeholderText: string; /** * The warning message when send box text length is more than max limit */ textTooLong: string; /** * Aria label for send message button */ sendButtonAriaLabel: string; } /** * Props for {@link SendBox}. * * @public */ export interface SendBoxProps { /** * Optional boolean to disable text box * @defaultValue false */ disabled?: boolean; /** * Optional text for system message below text box */ systemMessage?: string; /** * Optional override behavior on send button click */ onSendMessage?: (content: string) => Promise; /** * Optional callback called when user is typing */ onTyping?: () => Promise; /** * Optional callback to render system message below the SendBox. * @defaultValue MessageBar */ onRenderSystemMessage?: (systemMessage: string | undefined) => React.ReactElement; /** * Optional boolean to support new line in SendBox. * @defaultValue false */ supportNewline?: boolean; /** * Optional callback to render send button icon to the right of the SendBox. * @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise */ onRenderIcon?: (isHover: boolean) => JSX.Element; /** * Allows users to pass in an object contains custom CSS styles. * @Example * ``` * * ``` */ styles?: SendBoxStylesProps; /** * Optional strings to override in component */ strings?: Partial; /** * enumerable to determine if the input box has focus on render or not. * When undefined nothing has focus on render */ autoFocus?: 'sendBoxTextField'; } /** * Component for typing and sending messages. * * Supports sending typing notification when user starts entering text. * Supports an optional message below the text input field. * * @public */ export declare const SendBox: (props: SendBoxProps) => JSX.Element; //# sourceMappingURL=SendBox.d.ts.map