@cometchat/chat-uikit-react

import { JSX } from "react"; import { CometChatTextFormatter } from "../../formatters/CometChatFormatters/CometChatTextFormatter"; import { CometChatMessageComposerAction } from "../../modals"; import { EnterKeyBehavior, PreviewMessageMode } from "../../Enums/Enums"; export type ContentToDisplay = "attachments" | "emojiKeyboard" | "voiceRecording" | "ai" | "none"; export type ActionOnClickType = (() => void) | null; interface MessageComposerProps { /** * The initial text pre-filled in the message input when the component mounts. * @defaultValue "" */ initialComposerText?: string; /** * Disables the typing indicator for the current message composer. * @defaultValue `false` */ disableTypingEvents?: boolean; /** * Disables the mentions functionality in the message composer. * @defaultValue `false` */ disableMentions?: boolean; /** * Hides the image attachment option in the message composer. * @defaultValue `false` */ hideImageAttachmentOption?: boolean; /** * Hides the video attachment option in the message composer. * @defaultValue `false` */ hideVideoAttachmentOption?: boolean; /** * Hides the audio attachment option in the message composer. * @defaultValue `false` */ hideAudioAttachmentOption?: boolean; /** * Hides the file attachment option in the message composer. * @defaultValue `false` */ hideFileAttachmentOption?: boolean; /** * Hides the polls option in the message composer. * @defaultValue `false` */ hidePollsOption?: boolean; /** * Hides the collaborative document option in the message composer. * @defaultValue `false` */ hideCollaborativeDocumentOption?: boolean; /** * Hides the collaborative whiteboard option in the message composer. * @defaultValue `false` */ hideCollaborativeWhiteboardOption?: boolean; /** * Hides the attachment button in the message composer. * @defaultValue `false` */ hideAttachmentButton?: boolean; /** * Hides the voice recording button in the message composer. * @defaultValue `false` */ hideVoiceRecordingButton?: boolean; /** * Hides the emoji keyboard button in the message composer. * @defaultValue `false` */ hideEmojiKeyboardButton?: boolean; /** * Hides the stickers button in the message composer. * @defaultValue `false` */ hideStickersButton?: boolean; /** * Hides the send button in the message composer. * @defaultValue `false` */ hideSendButton?: boolean; /** * The user to send messages to. This prop specifies the recipient of the message. */ user?: CometChat.User; /** * The group to send messages to. * @remarks This prop is used if the `user` prop is not provided. */ group?: CometChat.Group; /** * The ID of the parent message. This is used for threading or replying to a specific message. */ parentMessageId?: number; /** * Options for default attachments, including various attachment types available in the composer. */ attachmentOptions?: CometChatMessageComposerAction[]; /** * Array of text formatters to apply to the message text for customization and styling. */ textFormatters?: Array<CometChatTextFormatter>; /** * Determines the behavior of the Enter key in the composer (e.g., send message or add a new line). * @default EnterKeyBehavior.SendMessage */ enterKeyBehavior?: EnterKeyBehavior; /** * Disables sound for incoming messages. * * @defaultValue `false` */ disableSoundForMessage?: boolean; /** * Custom audio sound for incoming messages. */ customSoundForMessage?: string; /** * Callback function triggered when the message input text changes. * * @param text - The current text value of the message input. * @returns void */ onTextChange?: (text: string) => void; /** * Callback function triggered when the message composer encounters an error. * * @param error - An instance of `CometChat.CometChatException` representing the error. * @returns void */ onError?: ((error: CometChat.CometChatException) => void) | null; /** * Callback function triggered when the send button is clicked. * * @param message - The message that was sent. * @param previewMessageMode - Optionally, specify if the message is in preview mode. */ onSendButtonClick?: (message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => void; /** * A custom view for the send button to customize its appearance or behavior. */ sendButtonView?: JSX.Element; /** * A custom view for an auxiliary button, which can be used alongside the send button. */ auxiliaryButtonView?: JSX.Element; /** * A custom header section displayed at the top of the message composer, often used for media previews or additional information. */ headerView?: JSX.Element; } /** * Represents the state of the message composer. * @type {State} */ type State = { /** The current text entered in the message input field. */ text: string; /** Additional text to be added to the message input field, often from mentions or formatting. */ addToMsgInputText: string; /** A reference to the text message that is currently being edited, or null if none. */ textMessageToEdit: CometChat.TextMessage | null; /** The content that is currently being displayed in the composer (e.g., text, polls, media). */ contentToDisplay: ContentToDisplay; /** The currently logged-in user, or null if no user is logged in. */ loggedInUser: CometChat.User | null; /** A flag indicating whether the poll UI is visible. */ showPoll: boolean; /** A flag indicating whether a warning about the mention count should be shown. */ showMentionsCountWarning: boolean; /** A flag indicating whether a warning about the file validation should be shown. */ showValidationError: boolean; }; /** * Represents the possible actions that can be dispatched to update the state. * @type {Action} */ export type Action = /** Action to update the text in the message input field. */ { type: "setText"; text: State["text"]; } /** Action to update the additional text to be added to the message input field (e.g., mentions). */ | { type: "setAddToMsgInputText"; addToMsgInputText: State["addToMsgInputText"]; } /** Action to set the message that is being edited. */ | { type: "setTextMessageToEdit"; textMessageToEdit: State["textMessageToEdit"]; } /** Action to change the content being displayed in the composer (e.g., text, polls). */ | { type: "setContentToDisplay"; contentToDisplay: ContentToDisplay; } /** Action to update the logged-in user in the state. */ | { type: "setLoggedInUser"; loggedInUser: CometChat.User; } /** Action to show or hide the poll UI. */ | { type: "setShowPoll"; showPoll: boolean; } /** Action to show or hide the mentions count warning. */ | { type: "setShowMentionsCountWarning"; showMentionsCountWarning: boolean; } /** Action to show or hide the validation error */ | { type: "setShowValidationError"; showValidationError: boolean; }; /** * Renders a message composer to send messages to a user or group of a CometChat App */ export declare function CometChatMessageComposer(props: MessageComposerProps): import("react/jsx-runtime").JSX.Element; export {};