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; /** * 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. */ headerView?: JSX.Element; /** * Controls the visibility of the scrollbar in the list. * @defaultValue `false` */ showScrollbar?: boolean; /** * The placeholder text to display in the message input field when it is empty. * @defaultValue "" */ placeholderText?: string; /** * Boolean to show or hide "@all" mention functionality in group chats. * @defaultValue `false` */ disableMentionAll?: boolean; /** * The mentionAll label for the app used to render "@all" mentions * @defaultValue "all" */ mentionAllLabel?: string; /** * Custom request builder for mentions user list. * @defaultValue `undefined` - Uses default internal request builder. */ mentionsUsersRequestBuilder?: CometChat.UsersRequestBuilder; /** * Custom request builder for mentions group members list. * @defaultValue `undefined` - Uses default internal request builder */ mentionsGroupMembersRequestBuilder?: CometChat.GroupMembersRequestBuilder; /** * Enables rich text editing capabilities in the message composer. * @defaultValue `true` */ enableRichTextEditor?: boolean; /** * Show floating toolbar when text is selected. * NOTE: Ignored on mobile devices - falls back to fixed toolbar. * @defaultValue false */ showToolbarOnSelection?: boolean; /** * Hides the rich text formatting options (e.g., bold, italic, lists, links) * in the message composer. * @defaultValue false */ hideRichTextFormattingOptions?: boolean; } /** * Represents the state of the message composer. */ type State = { text: string; addToMsgInputText: string; textMessageToEdit: CometChat.TextMessage | null; messageToReply: CometChat.BaseMessage | null; contentToDisplay: ContentToDisplay; loggedInUser: CometChat.User | null; showPoll: boolean; showMentionsCountWarning: boolean; showValidationError: boolean; }; /** * Represents the possible actions that can be dispatched to update the state. */ export type Action = { type: "setText"; text: State["text"]; } | { type: "setAddToMsgInputText"; addToMsgInputText: State["addToMsgInputText"]; } | { type: "setTextMessageToEdit"; textMessageToEdit: State["textMessageToEdit"]; } | { type: "setMessageToReply"; messageToReply: State["messageToReply"]; } | { type: "setContentToDisplay"; contentToDisplay: ContentToDisplay; } | { type: "setLoggedInUser"; loggedInUser: CometChat.User; } | { type: "setShowPoll"; showPoll: boolean; } | { type: "setShowMentionsCountWarning"; showMentionsCountWarning: boolean; } | { type: "setShowValidationError"; showValidationError: boolean; }; /** * CometChatCompactMessageComposer - A single-line horizontal layout variant of the message composer. * All UI elements (attachment button, text input, emoji button, voice recording button, stickers button, * and send button) are arranged horizontally in one line. */ export declare function CometChatCompactMessageComposer(props: MessageComposerProps): import("react/jsx-runtime").JSX.Element; export {};