/// <reference types="react" />
import { BaseCustomStyles, CommunicationParticipant } from '../types';
import { IStyle } from '@fluentui/react';
/**
 * Fluent styles for {@link TypingIndicator}.
 *
 * @public
 */
export interface TypingIndicatorStylesProps extends BaseCustomStyles {
    /** Styles for each typing user's displayName. */
    typingUserDisplayName?: IStyle;
    /** Styles for the typing string. */
    typingString?: IStyle;
}
/**
 * Strings of {@link TypingIndicator} that can be overridden.
 *
 * @public
 */
export interface TypingIndicatorStrings {
    /**
     * String template to use when one user is typing. Placeholders: [user].
     * @example
     * ```
     * <TypingIndicator
     *  strings={{ multipleUsersAbbreviateOne: '{users} is typing...' }}
     *  typingUsers={[{ userId: 'user1', displayName: 'Claire' }]}
     * />
     * ```
     * would be 'Claire is typing...'
     **/
    singleUser: string;
    /**
     * String template to use when multiple users are typing. Placeholders: [users].
     * @example
     * ```
     * <TypingIndicator
     *  strings={{ multipleUsers: '{users} are typing...' }}
     *  typingUsers={[
     *    { userId: 'user1', displayName: 'Claire' },
     *    { userId: 'user2', displayName: 'Christopher' }
     *  ]}
     * />
     * ```
     * would be 'Claire, Chris are typing...'
     **/
    multipleUsers: string;
    /**
     * String template to use when multiple users are typing with one other user abbreviated. Placeholders: [users].
     * @example
     * ```typescript
     * <TypingIndicator
     * strings={{ multipleUsersAbbreviateOne: '{users} and 1 other are typing...' }}
     * typingUsers={[
     * { userId: 'user1', displayName: 'Claire Romanov' },
     * { userId: 'user2', displayName: 'Christopher Rutherford' }
     * ]}
     * />
     * ```
     * would be 'Claire Romanov and 1 other are typing...'
     **/
    multipleUsersAbbreviateOne: string;
    /**
     * String template to use when multiple users are typing with one other user abbreviated. Placeholders: [users, numOthers].
     * @example
     * ```
     * <TypingIndicator
     *  strings={{ multipleUsersAbbreviateMany: '{users} and {numOthers} others are typing...' }}
     *  typingUsers={[
     *    { userId: 'user1', displayName: 'Claire Romanov' },
     *    { userId: 'user2', displayName: 'Christopher Rutherford' },
     *    { userId: 'user3', displayName: 'Jill Vernblom' }
     *  ]}
     * />
     * ```
     * would be 'Claire Romanov and 2 others are typing...'
     **/
    multipleUsersAbbreviateMany: string;
    /**
     * String to use as delimiter to separate multiple users.
     * @example
     * ```
     * <TypingIndicator
     *  strings={{ delimiter: ' + ' }}
     *  typingUsers={[
     *    { userId: 'user1', displayName: 'Claire' },
     *    { userId: 'user2', displayName: 'Chris' },
     *    { userId: 'user3', displayName: 'Jill' }
     *  ]}
     * />
     * ```
     * would be 'Claire + Chris + Jill are typing...'
     **/
    delimiter: string;
}
/**
 * Props for {@link TypingIndicator}.
 *
 * @public
 */
export interface TypingIndicatorProps {
    /** List of the typing users. */
    typingUsers: CommunicationParticipant[];
    /** Callback to render typing users */
    onRenderUser?: (users: CommunicationParticipant) => JSX.Element;
    /**
     * Allows users to pass in an object contains custom CSS styles.
     * @Example
     * ```
     * <TypingIndicator styles={{ root: { background: 'blue' } }} />
     * ```
     */
    styles?: TypingIndicatorStylesProps;
    /**
     * Optional strings to override in component
     */
    strings?: Partial<TypingIndicatorStrings>;
}
/**
 * Component to notify local user when one or more participants in the chat thread are typing.
 *
 * @public
 */
export declare const TypingIndicator: (props: TypingIndicatorProps) => JSX.Element;
//# sourceMappingURL=TypingIndicator.d.ts.map