import { Message } from '@ably/chat';
/**
 * Props for the ChatMessage component
 */
export interface ChatMessageProps {
    /**
     * The Ably Chat message object used to display the message content.
     */
    message: Message;
    /**
     * Optional callback triggered when the user saves an edited message.
     * @param message - The original message object being edited
     * @param newText - The updated message text after editing
     */
    onEdit?: (message: Message, newText: string) => void;
    /**
     * Optional callback triggered when the user confirms message deletion.
     * @param message - The message object to be deleted
     */
    onDelete?: (message: Message) => void;
    /**
     * Optional callback triggered when a user adds an emoji reaction to the message.
     * @param message - The message object receiving the reaction
     * @param emoji - The emoji character being added as a reaction
     */
    onReactionAdd?: (message: Message, emoji: string) => void;
    /**
     * Optional callback triggered when a user removes their emoji reaction from the message.
     * Called when clicking an existing reaction the user has already added.
     * @param message - The message object losing the reaction
     * @param emoji - The emoji character being removed from reactions
     */
    onReactionRemove?: (message: Message, emoji: string) => void;
    /**
     * Additional CSS class names to apply to the message container
     * Useful for custom styling or theming
     */
    className?: string;
}
/**
 * ChatMessage component displays an individual chat message with interactive capabilities
 *
 * Core Features:
 * - Message content display with sender avatar
 * - Edit/delete functionality for own messages with confirmation dialogs
 * - Emoji reactions system with picker and toggle functionality
 * - Avatar editing for message senders (own messages only)
 * - Status indicators (edited, deleted)
 * - Basic ARIA support (role, aria-label)
 * - Hover tooltips showing sender information
 *
 * @example
 * <ChatMessage
 *   message={message}
 *   currentClientId="user123"
 *   onEdit={handleEdit}
 *   onDelete={handleDelete}
 *   onReactionAdd={handleReactionAdd}
 *   onReactionRemove={handleReactionRemove}
 * />
 */
export declare const ChatMessage: ({ message, onEdit, onDelete, onReactionAdd, onReactionRemove, className, }: ChatMessageProps) => import("react/jsx-runtime").JSX.Element;