@cometchat/chat-uikit-react-native/lib/CometChatMessageComposer/CometChatMessageComposer.d.ts

Ready-to-use Chat UI Components for React Native

import React from "react";
import { KeyboardAvoidingViewProps } from "react-native";
import { CometChatMentionsFormatter, CometChatTextFormatter, CometChatUrlsFormatter } from "../shared";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { CometChatMessageComposerAction, DeepPartial } from "../shared/helper/types";
import { CometChatTheme } from "../theme/type";
import { JSX } from "react";
type Enumerate<N extends number, Acc extends number[] = []> = Acc["length"] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc["length"]]>;
type IntRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;
/**
 * Properties for the CometChat message composer component.
 */
export interface CometChatMessageComposerInterface {
    /**
     * Message composer identifier.
     *
     * @type {string | number}
     */
    id?: string | number;
    /**
     * CometChat SDK’s user object.
     *
     * @type {CometChat.User}
     */
    user?: CometChat.User;
    /**
     * CometChat SDK’s group object.
     *
     * @type {CometChat.Group}
     */
    group?: CometChat.Group;
    /**
     * Flag to turn off sound for outgoing messages.
     *
     * @type {boolean}
     */
    disableSoundForOutgoingMessages?: boolean;
    /**
     * Custom audio sound to be played while sending messages.
     *
     * @type {*}
     */
    customSoundForOutgoingMessage?: any;
    /**
     * Flag to disable typing events.
     *
     * @type {boolean}
     */
    disableTypingEvents?: boolean;
    /**
     * Initial text to be displayed in the composer.
     *
     * @type {string}
     */
    initialComposertext?: string;
    /**
     * Renders a preview section at the top of the composer.
     *
     * @param {Object} props - The component properties.
     * @param {CometChat.User} [props.user] - The user object.
     * @param {CometChat.Group} [props.group] - The group object.
     * @returns {JSX.Element} The header view element.
     */
    HeaderView?: ({ user, group }: {
        user?: CometChat.User;
        group?: CometChat.Group;
    }) => JSX.Element;
    /**
     * Callback triggered when the input text changes.
     *
     * @param {string} text - The updated text.
     */
    onTextChange?: (text: string) => void;
    /**
     * Returns the attachment options for the composer.
     *
     * @param {Object} props - The function properties.
     * @param {CometChat.User} [props.user] - The user object.
     * @param {CometChat.Group} [props.group] - The group object.
     * @param {Map<any, any>} props.composerId - The composer identifier as a Map.
     * @returns {CometChatMessageComposerAction[]} An array of composer actions.
     */
    attachmentOptions?: ({ user, group, composerId, }: {
        user?: CometChat.User;
        group?: CometChat.Group;
        composerId: Map<any, any>;
    }) => CometChatMessageComposerAction[];
    /**
     * Replaces the default Auxiliary Button.
     *
     * @param {Object} props - The function properties.
     * @param {CometChat.User} [props.user] - The user object.
     * @param {CometChat.Group} [props.group] - The group object.
     * @param {string | number} props.composerId - The composer identifier.
     * @returns {JSX.Element} A custom auxiliary button component.
     */
    AuxiliaryButtonView?: ({ user, group, composerId, }: {
        user?: CometChat.User;
        group?: CometChat.Group;
        composerId: string | number;
    }) => JSX.Element;
    /**
     * Replaces the default Send Button.
     *
     * @param {Object} props - The function properties.
     * @param {CometChat.User} [props.user] - The user object.
     * @param {CometChat.Group} [props.group] - The group object.
     * @param {string | number} props.composerId - The composer identifier.
     * @returns {JSX.Element} A custom send button component.
     */
    SendButtonView?: ({ user, group, composerId, }: {
        user?: CometChat.User;
        group?: CometChat.Group;
        composerId: string | number;
    }) => JSX.Element;
    /**
     * Message id required for threaded messages.
     *
     * @type {string | number}
     */
    parentMessageId?: string | number;
    /**
     * Custom styles for the message composer component.
     */
    style?: DeepPartial<CometChatTheme["messageComposerStyles"]>;
    /**
     * Flag to hide the voice recording button.
     *
     * @type {boolean}
     */
    hideVoiceRecordingButton?: boolean;
    /**
     * Callback triggered when the send button is pressed.
     *
     * @param {CometChat.BaseMessage} message - The base message object.
     */
    onSendButtonPress?: (message: CometChat.BaseMessage) => void;
    /**
     * Callback triggered when an error occurs.
     *
     * @param {CometChat.CometChatException} error - The error object.
     */
    onError?: (error: CometChat.CometChatException) => void;
    /**
     * Override properties for the KeyboardAvoidingView.
     */
    keyboardAvoidingViewProps?: KeyboardAvoidingViewProps;
    /**
     * Collection of text formatter classes to apply custom formatting.
     *
     * @type {Array<CometChatMentionsFormatter | CometChatUrlsFormatter | CometChatTextFormatter>}
     */
    textFormatters?: Array<CometChatMentionsFormatter | CometChatUrlsFormatter | CometChatTextFormatter>;
    /**
     * Flag to disable mention functionality.
     */
    disableMentions?: boolean;
    /**
     * Controls image quality when taking pictures from the camera.
     * A value of 100 means no compression.
     *
     * @default 20
     * @type {IntRange<1, 100>}
     */
    imageQuality?: IntRange<1, 100>;
    /**
     * If true, hides the camera option from the attachment options.
     */
    hideCameraOption?: boolean;
    /**
     * If true, hides the image attachment option from the attachment options.
     */
    hideImageAttachmentOption?: boolean;
    /**
     * If true, hides the video attachment option from the attachment options.
     */
    hideVideoAttachmentOption?: boolean;
    /**
     * If true, hides the audio attachment option from the attachment options.
     */
    hideAudioAttachmentOption?: boolean;
    /**
     * If true, hides the file/document attachment option from the attachment options.
     */
    hideFileAttachmentOption?: boolean;
    /**
     * If true, hides the polls option from the attachment options.
     */
    hidePollsAttachmentOption?: boolean;
    /**
     * If true, hides the collaborative document option (e.g., shared document editing).
     */
    hideCollaborativeDocumentOption?: boolean;
    /**
     * If true, hides the collaborative whiteboard option.
     */
    hideCollaborativeWhiteboardOption?: boolean;
    /**
     * If true, hides the entire attachment button from the composer.
     */
    hideAttachmentButton?: boolean;
    /**
     * If true, hides the stickers button from the composer.
     */
    hideStickersButton?: boolean;
    /**
     * If true, hides the send button from the composer.
     */
    hideSendButton?: boolean;
    /**
     * If true, hides all auxiliary buttons (such as voice input, GIFs, or other plugin buttons).
     */
    hideAuxiliaryButtons?: boolean;
    /**
     * Returns the attachment options for the composer.
     *
     * @param {Object} props - The function properties.
     * @param {CometChat.User} [props.user] - The user object.
     * @param {CometChat.Group} [props.group] - The group object.
     * @param {Map<any, any>} props.composerId - The composer identifier as a Map.
     * @returns {CometChatMessageComposerAction[]} An array of composer actions.
     */
    addAttachmentOptions?: ({ user, group, composerId, }: {
        user?: CometChat.User;
        group?: CometChat.Group;
        composerId: Map<any, any>;
    }) => CometChatMessageComposerAction[];
    /**
     * Determines the alignment of auxiliary buttons (e.g., sticker button).
     * Can be either "left" or "right".
     *
     * @default "left"
     */
    auxiliaryButtonsAlignment?: "left" | "right";
}
export declare const CometChatMessageComposer: React.ForwardRefExoticComponent<CometChatMessageComposerInterface & React.RefAttributes<unknown>>;
export {};