Voice & Text Input Component Showcase

A comprehensive showcase of all visual and functional variants of the chat component, including different states, input modes, and mobile designs.

Basic Input States

Idle State

Default state, ready for user input

Ready
Text input mode

Text Input Active

User is typing a message

Ready
Text input mode

Voice Recording State

User is speaking - voice input active

Ready
Voice input active. Speak now

Processing State

Processing user input

Ready
Processing voice input

Success State

Input successfully processed

Ready
Voice captured

Error State

Error occurred during input

Ready
Error: Microphone access denied

Natural Conversation Mode States

Natural Mode - Disabled

Natural conversation mode not available - only basic voice input

Ready
Text input mode

Natural Mode - Active & Listening

Natural conversation mode active, listening for speech

Listening...
Conversation mode listening

Natural Mode - With Conversation History

Natural conversation with message history

Conversation History
Hello! How can you help me today?
I'd be happy to help! What would you like to know about?
Listening...
Conversation mode listening

Input Mode Variations

Text Input Mode

Standard text input with send button

Ready
Text input mode

Voice Input Mode (Dictation)

Voice dictation with compact waveform

Ready
Voice input active. Speak now

Conversation Mode

Natural conversation with full-width interface

Listening...
Conversation mode listening

Component Variants

Chat Variant

Chat interface variant with full features

Ready
Text input mode

Special Features

Custom Placeholder

Component with custom placeholder text

Ready
Text input mode