VoiceTextInput Developer Documentation

Comprehensive guide for developers working with the VoiceTextInput component - a sophisticated React component that combines text input, voice dictation, and natural conversation capabilities.

Component Overview

Understanding the VoiceTextInput component's core functionality and use cases

What is VoiceTextInput?

VoiceTextInput is a React component that provides a unified interface for text and voice input. It supports three main interaction modes: standard text input, voice dictation, and natural conversation with AI.

Key Features

  • • Text Input: Standard keyboard input with customizable placeholders
  • • Voice Dictation: Speech-to-text conversion with visual feedback
  • • Natural Conversation: Continuous AI conversation with voice responses
  • • Real-time Waveform: Visual audio feedback during voice input
  • • Multiple Variants: Chat, search, and form interface styles
  • • Accessibility: Full screen reader and keyboard navigation support
  • • Showcase Mode: Demo mode for documentation and presentations

Core Dependencies

Required Hooks

  • • useSpeechRecognition - Voice input handling
  • • useState/useEffect - React state management
  • • useCallback/useRef - Performance optimization

UI Components

  • • WaveformVisualizer - Real-time audio visualization
  • • StaticWaveform - Static demo waveforms
  • • Button, Input, Tooltip - UI primitives

Quick Start

import { VoiceTextInput } from "@/components/voice-text-input";

function ChatInterface() {
  const handleSubmit = (message: string, inputType: "voice" | "text") => {
    console.log(`Received ${inputType} message: ${message}`);
  };

  const handleConversation = (message: string, isUser: boolean) => {
    console.log(`${isUser ? 'User' : 'AI'}: ${message}`);
  };

  return (
    <VoiceTextInput
      placeholder="Type a message or speak..."
      onSubmit={handleSubmit}
      onConversationMessage={handleConversation}
      variant="chat"
      showSendButton
      enableNaturalConversation
    />
  );
}