communication-react-19/dist/dist-esm/react-components/src/components/SendBox.d.ts

React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)

import React from 'react';
import { IStyle } from '@fluentui/react';
import { BaseCustomStyles } from '../types';
import { AttachmentMetadataInProgress, MessageOptions } from "../../../acs-ui-common/src";
import { MentionLookupOptions } from './MentionPopover';
/**
 * 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;
    /**
     * Error message indicating that all attachment uploads are not complete.
     */
    attachmentUploadsPendingError: string;
    /**
     * Aria label to notify user when focus is on cancel attachment upload button.
     */
    removeAttachment: string;
    /**
     * Aria label to notify user attachment uploading starts.
     */
    uploading: string;
    /**
     * Aria label to notify user attachment upload progress.
     */
    uploadProgress: string;
    /**
     * Aria label to notify user attachment is uploaded.
     */
    uploadCompleted: string;
    /**
     * Aria label to notify user more attachment action menu.
     */
    attachmentMoreMenu: 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, options?: MessageOptions) => Promise<void>;
    /**
     * Optional props needed to lookup suggestions in the mention scenario.
     * @beta
     */
    mentionLookupOptions?: MentionLookupOptions;
    /**
     * Optional callback called when user is typing
     */
    onTyping?: () => Promise<void>;
    /**
     * 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
     * ```
     * <SendBox styles={{ root: { background: 'blue' } }} />
     * ```
     */
    styles?: SendBoxStylesProps;
    /**
     * Optional strings to override in component
     */
    strings?: Partial<SendBoxStrings>;
    /**
     * enumerable to determine if the input box has focus on render or not.
     * When undefined nothing has focus on render
     */
    autoFocus?: 'sendBoxTextField';
    /**
     * Optional callback to render uploaded attachments in the SendBox. The sendBox will expand
     * vertically to accommodate the uploaded attachments. Attachment uploads will
     * be rendered below the text area in sendBox.
     * @beta
     */
    onRenderAttachmentUploads?: () => JSX.Element;
    /**
     * Optional array of type {@link AttachmentMetadataInProgress}
     * to render attachments being uploaded in the SendBox.
     * @beta
     */
    attachments?: AttachmentMetadataInProgress[];
    /**
     * Optional callback to remove the attachment upload before sending by clicking on
     * cancel icon.
     * @beta
     */
    onCancelAttachmentUpload?: (attachmentId: string) => void;
}
/**
 * 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