/** * Props for the MessageActions component */ export interface MessageActionsProps { /** * Callback function triggered when the reaction button is clicked. * Typically opens an emoji picker or emoji wheel for users to select reactions. * Should handle the display of reaction UI components. * * * @example * ```tsx * onReactionButtonClicked={() => { * setEmojiPickerPosition(getMessagePosition()); * setShowEmojiPicker(true); * }} * ``` */ onReactionButtonClicked?: () => void; /** * Callback function triggered when the edit button is clicked. * Should initiate edit mode for the message, typically replacing the message * content with an editable input field or editor component. * Displayed when: * - The message is owned by the current user and allowMessageUpdatesOwn is true, or allowMessageUpdatesAny is true * * @example * ```tsx * onEditButtonClicked={() => { * setEditingMessageId(message.id); * setEditText(message.text); * setIsEditing(true); * }} * ``` */ onEditButtonClicked?: () => void; /** * Callback function triggered when the delete button is clicked. * Should handle message deletion, typically with confirmation dialog. * Displayed when: * - The message is owned by the current user and allowMessageDeletesOwn is true, or allowMessageDeletesAny is true * * @example * ```tsx * onDeleteButtonClicked={() => { * setDeleteTarget(message.id); * setShowDeleteConfirm(true); * }} * ``` */ onDeleteButtonClicked?: () => void; /** * Whether the message belongs to the current user. * Used in combination with chat settings to determine if edit and delete buttons are shown. * * @example * ```tsx * // Basic ownership check * isOwn={message.senderId === currentUser.id} * ``` */ isOwn: boolean; } /** * MessageActions component displays a toolbar of action buttons for a chat message * * Features: * - Reaction button for adding emoji reactions to messages * - Edit and delete buttons for the message owner * - Positioned relative to the message bubble * - Accessible toolbar with proper ARIA attributes * - Responsive to theme changes (light/dark) * - Smooth hover transitions and visual feedback * * @example * // Basic usage in a chat message component * const [actionsVisible, setActionsVisible] = useState(false); * const [showEmojiPicker, setShowEmojiPicker] = useState(false); * * return ( *
setActionsVisible(true)} * onMouseLeave={() => setActionsVisible(false)} * > *
{message.text}
* * {actionsVisible && ( setShowEmojiPicker(true)} * onEdit={() => handleEditMessage(message.id)} * onDelete={() => handleDeleteMessage(message.id)} * /> *
)} * ); * * */ export declare const MessageActions: ({ onReactionButtonClicked, onEditButtonClicked, onDeleteButtonClicked, isOwn, }: MessageActionsProps) => import("react/jsx-runtime").JSX.Element | undefined;