@sendbird/uikit-react/types/ui/MessageInput/index.d.ts

Sendbird UIKit for React: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.

import React from 'react';
import './index.scss';
import type { PendingFile } from './hooks/usePendingFiles';
import { GroupChannel } from '@sendbird/chat/groupChannel';
import { User } from '@sendbird/chat';
import { OpenChannel } from '@sendbird/chat/openChannel';
import { UserMessage } from '@sendbird/chat/message';
type MessageInputProps = {
    channel: GroupChannel | OpenChannel;
    message?: UserMessage;
    value?: null | string;
    className?: string | string[];
    messageFieldId?: string;
    isEdit?: boolean;
    isMobile?: boolean;
    isMentionEnabled?: boolean;
    isVoiceMessageEnabled?: boolean;
    isSelectingMultipleFilesEnabled?: boolean;
    disabled?: boolean;
    placeholder?: string;
    maxLength?: number;
    /**
     * @deprecated Pass `onAddFiles` + `onSubmit` for the composer flow. When
     * `onAddFiles` is undefined, files from the picker are routed here for
     * immediate send (legacy behavior).
     */
    onFileUpload?: (file: File[]) => void;
    onSendMessage?: (params: {
        message: string;
        mentionTemplate: string;
    }) => void;
    /**
     * Composer mode: files staged for send. When defined and non-empty, the
     * preview strip renders above the textarea and the send button activates
     * regardless of text input state.
     */
    pendingFiles?: PendingFile[];
    /**
     * Composer mode: routes files from the picker, drag-drop, and clipboard
     * paste to the staging hook. When defined, takes precedence over
     * `onFileUpload`.
     */
    onAddFiles?: (files: File[]) => void;
    /**
     * Composer mode: removes a staged file by id from the preview strip.
     */
    onRemoveFile?: (id: string) => void;
    /**
     * Composer mode: unified send action. When defined, takes precedence over
     * `onSendMessage` for the click and Enter-key paths.
     */
    onSubmit?: (params: {
        message: string;
        mentionTemplate: string;
        files: PendingFile[];
    }) => void;
    onUpdateMessage?: (params: {
        messageId: number;
        message: string;
        mentionTemplate: string;
        mentionedUserIds?: string[];
    }) => void;
    onCancelEdit?: () => void;
    onStartTyping?: () => void;
    onStopTyping?: () => void;
    channelUrl?: string;
    mentionSelectedUser?: null | User;
    onUserMentioned?: (user: User) => void;
    onMentionStringChange?: (mentionString: string) => void;
    onMentionedUserIdsUpdated?: (mentionedUserIds: string[]) => void;
    onVoiceMessageIconClick?: () => void;
    onKeyUp?: (event: React.KeyboardEvent<HTMLDivElement>) => boolean;
    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => boolean;
    renderVoiceMessageIcon?: () => React.ReactNode;
    renderFileUploadIcon?: () => React.ReactNode;
    renderSendMessageIcon?: () => React.ReactNode;
    setMentionedUsers?: React.Dispatch<React.SetStateAction<User[]>>;
    acceptableMimeTypes?: string[];
};
declare const MessageInput: React.ForwardRefExoticComponent<MessageInputProps & React.RefAttributes<HTMLInputElement>>;
export default MessageInput;