import { ErrorInfo, Message } from '@ably/chat';
/**
 * Props for the MessageInput component
 */
export interface MessageInputProps {
    /**
     * Callback function triggered when a message is sent.
     * Receives the built message as a parameter. This is useful for providing
     * an optimistic UI update or for handling the message in a parent component.
     *
     * The input field is automatically cleared after sending.
     * Typing indicators are stopped when a message is sent.
     *
     * @param message - The newly sent message object.
     *
     * @example
     * ```tsx
     * const handleSentMessage = async (message: Message) => {
     *  // alert('Message sent: ' + message.text);
     * };
     *
     * <MessageInput onSent={handleSent} />
     * ```
     */
    onSent?: (message: Message) => void;
    /**
     * Placeholder text displayed in the input field when empty.
     * Provides context about the input's purpose to users.
     *
     * @default "Type a message..."
     *
     * @example
     * ```tsx
     * <MessageInput
     *   placeholder="Send a message to the team..."
     *   onSend={handleSend}
     * />
     * ```
     */
    placeholder?: string;
    /**
     * Callback function triggered when sending a message fails.
     * Provides the error object and the text that failed to send.
     * If not provided, errors will be logged to console.
     *
     * @param error - The error that occurred during message sending
     * @param text - The text that failed to send
     *
     * @example
     * ```tsx
     * const handleSendError = (error: Error, text: string) => {
     *   toast.error(`Failed to send message: ${error.message}`);
     *   console.error('Send error:', error);
     * };
     *
     * <MessageInput
     *   onSent={handleSent}
     *   onSendError={handleSendError}
     * />
     * ```
     */
    onSendError?: (error: ErrorInfo, text: string) => void;
    /**
     * Whether to enable typing indicators when the user is typing.
     * When enabled, triggers typing indicators on keystroke and stops them
     * when the input is cleared or a message is sent.
     *
     * @default true
     *
     * @example
     * ```tsx
     * // Disable typing indicators for performance in large rooms
     * <MessageInput
     *   onSent={handleSent}
     *   enableTyping={false}
     * />
     * ```
     */
    enableTyping?: boolean;
}
/**
 * MessageInput component provides a comprehensive text input interface for composing and sending chat messages
 *
 * Core Features:
 * - Multi-line text input with automatic height adjustment (max 150px)
 * - Enter key to send (Shift+Enter for new line)
 * - Integrated emoji picker with cursor position insertion
 * - Typing indicators to alert others when composing messages
 * - Automatic input cleanup and focus management
 * - Accessible form controls with proper ARIA attributes
 * - Theme-aware styling (light/dark mode support)
 *
 * Typing Indicators:
 * - Triggered on each keystroke when content is present
 * - Automatically stopped when input is cleared or message is sent
 *
 * Emoji Integration:
 * - Picker positioned above the emoji button
 * - Smart cursor position handling for emoji insertion
 * - Maintains focus and cursor position after emoji selection
 * - Fallback behavior for browsers without selection API support
 *
 * @example
 * // Basic usage in chat interface
 * const [messages, setMessages] = useState<Message[]>([]);
 *
 * const handleSentMessage = (message) => {
 *   setMessages(prev => [...prev, message]);
 * };
 *
 * return (
 *   <div className="chat-container">
 *     <MessageList messages={messages} />
 *     <MessageInput
 *       onSent={handleSentMessage}
 *       placeholder="Type your message here..."
 *     />
 *   </div>
 * );
 *
 */
export declare const MessageInput: ({ onSent, placeholder, onSendError, enableTyping, }: MessageInputProps) => import("react/jsx-runtime").JSX.Element;