@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
63 lines • 2.23 kB
TypeScript
/// <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';
/**
* 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;
}
/**
* 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 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';
};
/**
* 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