VoiceFirstInputBar Component

Phase 3 - Voice Mode v4.1

A unified voice-first input bar that prioritizes voice interaction while providing text fallback. This component is the primary input interface for voice mode.

Overview

+------------------------------------------------------------------+
| [PHI] | [Voice prompt / Text input area]         | [Mic] | [Kbd] |
+------------------------------------------------------------------+
        |                                          |
        v                                          v
   VAD-powered                              Push-to-talk
   auto-detection                           or always-on

Features

• Voice-First Design: Prominent microphone button with visual feedback
• VAD Preset Integration: Respects sensitivity settings from voiceSettingsStore
• RTL Support: Full bidirectional layout with auto-detection
• PHI Mode Indicator: Visual indicator of current PHI routing status
• Text Fallback: Expandable text input for hybrid interaction
• Keyboard Shortcuts: Space to talk, Escape to cancel

Usage

import { VoiceFirstInputBar } from "@/components/voice/VoiceFirstInputBar";

function VoiceChat() {
  const handleSubmit = (input: string, isVoice: boolean) => {
    console.log(`Received ${isVoice ? "voice" : "text"} input:`, input);
  };

  return (
    <VoiceFirstInputBar
      onSubmit={handleSubmit}
      phiMode="hybrid"
      phiScore={0.45}
      placeholder="Press space or tap mic to speak..."
    />
  );
}

Props

Keyboard Shortcuts

VAD Preset Integration

The component reads VAD settings from voiceSettingsStore:

// Settings automatically applied from store
const {
  vadPreset, // "sensitive" | "balanced" | "relaxed" | "accessibility" | "custom"
  vadCustomEnergyThresholdDb,
  vadCustomSilenceDurationMs,
  voiceModeType, // "always-on" | "push-to-talk"
  rtlEnabled,
  rtlAutoDetect,
} = useVoiceSettingsStore();

VAD Preset Behavior

RTL Support

The component supports RTL languages with automatic layout mirroring:

// RTL auto-detection for Arabic, Hebrew, Farsi, Urdu
const RTL_LANGUAGES = ["ar", "he", "fa", "ur", "yi", "ps", "sd"];

// Manual override
<VoiceFirstInputBar
  detectedLanguage="ar" // Triggers RTL layout
  // or via store settings:
  // rtlEnabled={true}
/>;

RTL Layout Changes

• Mic button moves to left side
• Text flows right-to-left
• Energy visualizer bars reverse order
• PHI indicator repositions appropriately

PHI Mode Indicator

The colored dot indicates current PHI routing:

<VoiceFirstInputBar
  phiMode="local" // Green indicator
  phiScore={0.85} // High PHI probability
/>

States

idle → listening → processing → idle
  ↓                     ↑
text-input ─────────────┘

Styling

The component uses Tailwind CSS with dark mode support:

// Custom className for container
<VoiceFirstInputBar className="max-w-2xl mx-auto shadow-lg" />

// Dark mode automatically applied
// Uses dark: variants for all colors

Integration with Voice Pipeline

import { VoiceFirstInputBar } from "@/components/voice/VoiceFirstInputBar";
import { useVoicePipeline } from "@/hooks/useVoicePipeline";

function IntegratedVoiceChat() {
  const { sendMessage, isAssistantSpeaking, phiState } = useVoicePipeline();

  return (
    <VoiceFirstInputBar
      onSubmit={(input, isVoice) => sendMessage(input, { isVoice })}
      isAssistantSpeaking={isAssistantSpeaking}
      phiMode={phiState.mode}
      phiScore={phiState.score}
    />
  );
}

Accessibility

• ARIA labels for all interactive elements
• Keyboard navigation support
• Screen reader announcements for state changes
• Focus management during mode switches

Related Documentation

• Adaptive VAD Presets
• RTL Support Guide
• PHI-Aware STT Routing
• Voice Mode v4 Overview