Custom Theme Emoji Chat Input

Build a React component that provides an emoji picker with custom theming capabilities for a chat application.

Requirements

Create a chat input component that includes an emoji picker with the following features:

Theme Customization

• Support three theme modes: light, dark, and system (auto)
• Provide a theme selector dropdown that allows users to switch between themes
• The selected theme should persist when the component re-renders
• Apply the selected theme to the emoji picker

Emoji Selection

• Display an emoji picker that opens when the user clicks an emoji button
• When an emoji is selected, append it to the text input field at the current cursor position
• The emoji picker should close after selecting an emoji

Chat Input

• Provide a text input field for typing messages
• Include a button to toggle the emoji picker visibility
• Include a send button to submit messages

Visual Design

• The emoji button should be clearly visible next to the input field
• The theme selector should be easily accessible
• The emoji picker should appear in a suitable position (e.g., above the input field)

Implementation

@generates

Create a React component that includes:

• A text input for message entry
• A button to toggle the emoji picker
• A theme selector (dropdown or buttons)
• The emoji picker configured with the selected theme
• A send button for messages

The component should maintain the current theme selection and text input state.

Test Cases

• When the user selects "light" theme, the emoji picker displays with a light theme @test
• When the user selects "dark" theme, the emoji picker displays with a dark theme @test
• When the user selects "auto" theme, the emoji picker displays with the system theme @test
• When an emoji is clicked, it appears in the text input field @test

Dependencies { .dependencies }

emoji-picker-react { .dependency }

Provides the emoji picker component with theming support.

React { .dependency }

UI framework for building the component.