communication-react-19/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatComposite.d.ts

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

/// <reference types="react" />
import { CommunicationParticipant, MessageRenderer, MessageProps } from "../../../../react-components/src";
import { BaseCompositeProps } from '../common/BaseComposite';
import { ChatCompositeIcons } from '../common/icons';
import { ChatAdapter } from './adapter/ChatAdapter';
import { AttachmentOptions } from "../../../../react-components/src";
/**
 * Props for {@link ChatComposite}.
 *
 * @public
 */
export interface ChatCompositeProps extends BaseCompositeProps<ChatCompositeIcons> {
    /**
     * An adapter provides logic and data to the composite.
     * Composite can also be controlled using the adapter.
     */
    adapter: ChatAdapter;
    /**
     * `(messageProps: MessageProps, defaultOnRender?: MessageRenderer) => JSX.Element`
     * A callback for customizing the message renderer.
     */
    onRenderMessage?: (messageProps: MessageProps, defaultOnRender?: MessageRenderer) => JSX.Element;
    /**
     * `(typingUsers: CommunicationParticipant[]) => JSX.Element`
     * A callback for customizing the typing indicator renderer.
     */
    onRenderTypingIndicator?: (typingUsers: CommunicationParticipant[]) => JSX.Element;
    /**
     * Flags to enable/disable visual elements of the {@link ChatComposite}.
     */
    options?: ChatCompositeOptions;
    /**
     * Optimizes the composite form factor for either desktop or mobile.
     * @remarks `mobile` is currently only optimized for Portrait mode on mobile devices and does not support landscape.
     * @defaultValue 'desktop'
     */
    formFactor?: 'desktop' | 'mobile';
}
/**
 * Optional features of the {@link ChatComposite}.
 *
 * @public
 */
export type ChatCompositeOptions = {
    /**
     * Surface Azure Communication Services backend errors in the UI with {@link @azure/communication-react#ErrorBar}.
     * Hide or show the error bar.
     * @defaultValue true
     */
    errorBar?: boolean;
    /**
     * Show or hide the participant pane. This feature is in beta and not supported on mobile or narrow screen views.
     * @defaultValue false
     *
     * @beta
     */
    participantPane?: boolean;
    /**
     * Show or hide the topic at the top of the chat. Hidden if set to `false`
     * @defaultValue true
     */
    topic?: boolean;
    /**
     * enumerable to determine if the input box has focus on render or not.
     * When undefined nothing has focus on render
     */
    autoFocus?: 'sendBoxTextField';
    /**
     * Properties for configuring the File Sharing feature.
     * If undefined, file sharing feature will be disabled.
     * @beta
     */
    attachmentOptions?: AttachmentOptions;
    /**
     * Enables rich text editor for the send and edit boxes
     * @defaultValue `false`
     *
     * @beta
     */
    richTextEditor?: boolean;
};
/**
 * A customizable UI composite for the chat experience.
 *
 * @remarks Chat composite min width and height are respectively 17.5rem and 20rem (280px and 320px, with default rem at 16px)
 *
 * @public
 */
export declare const ChatComposite: (props: ChatCompositeProps) => JSX.Element;
//# sourceMappingURL=ChatComposite.d.ts.map