Message Composer with Emoji Support

Build a simple message composer component that allows users to write messages and insert emojis using an emoji picker.

Requirements

Create a React component called MessageComposer that:

1. Message Input: Displays a textarea where users can type their message
2. Emoji Picker Button: Provides a button that toggles an emoji picker interface
3. Emoji Selection: When an emoji is selected from the picker, it should be inserted at the current cursor position in the textarea
4. Picker Visibility: The emoji picker should be hidden by default and only visible when the button is clicked. Clicking the button again should hide the picker.
5. Message Display: Below the textarea, display the current message content in a preview area

Functional Specifications

• The textarea should have a minimum height of 100px
• The emoji picker button should be labeled "Add Emoji"
• When no message is entered, the preview should display "No message yet"
• The emoji picker should appear below the button when toggled
• After selecting an emoji, the picker should remain open (not automatically close)

Implementation

@generates

The component should be exported as the default export.

API

export default function MessageComposer(): JSX.Element;

Test Cases

• Renders a textarea for message input @test
• Renders an "Add Emoji" button @test
• Initially hides the emoji picker @test
• Shows the emoji picker when the button is clicked @test

Dependencies { .dependencies }

emoji-picker-react { .dependency }

Provides emoji picker component for React applications.