Add voice input UI components for hands-free tracking
Implemented complete voice input user interface: **Voice Recording Hook (useVoiceInput):** - Browser Web Speech API integration - Real-time speech recognition - Continuous and interim results - 10-second auto-timeout - Error handling for permissions, network, audio issues - Graceful fallback for unsupported browsers **Voice Input Button Component:** - Modal dialog with microphone button - Animated pulsing microphone when recording - Real-time transcript display - Automatic intent classification on completion - Structured data visualization - Example commands for user guidance - Success/error feedback with MUI Alerts - Confidence level indicators **Floating Action Button:** - Always-visible FAB in bottom-right corner - Quick access from any page - Auto-navigation to appropriate tracking page - Snackbar feedback messages - Mobile-optimized positioning (thumb zone) **Integration with Tracking Pages:** - Voice button in feeding page header - Auto-fills form fields from voice commands - Seamless voice-to-form workflow - Example: "Fed baby 120ml" → fills bottle type & amount **Features:** - ✅ Browser speech recognition (Chrome, Edge, Safari) - ✅ Real-time transcription display - ✅ Automatic intent classification - ✅ Auto-fill tracking forms - ✅ Visual feedback (animations, colors) - ✅ Error handling & user guidance - ✅ Mobile-optimized design - ✅ Accessibility support **User Flow:** 1. Click microphone button (floating or in-page) 2. Speak command: "Fed baby 120 ml" 3. See real-time transcript 4. Auto-classification shows intent & data 5. Click "Use Command" 6. Form auto-fills or activity created **Browser Support:** - Chrome ✅ - Edge ✅ - Safari ✅ - Firefox ❌ (Web Speech API not supported) **Files Created:** - hooks/useVoiceInput.ts - Speech recognition hook - components/voice/VoiceInputButton.tsx - Modal input component - components/voice/VoiceFloatingButton.tsx - FAB for quick access - app/layout.tsx - Added floating button globally - app/track/feeding/page.tsx - Added voice button to header Voice input is now accessible from anywhere in the app, providing true hands-free tracking for parents. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -3,6 +3,7 @@ import { Inter } from 'next/font/google';
|
||||
import { ThemeRegistry } from '@/components/ThemeRegistry';
|
||||
import { ErrorBoundary } from '@/components/common/ErrorBoundary';
|
||||
import { ReduxProvider } from '@/components/providers/ReduxProvider';
|
||||
import { VoiceFloatingButton } from '@/components/voice/VoiceFloatingButton';
|
||||
// import { PerformanceMonitor } from '@/components/common/PerformanceMonitor'; // Temporarily disabled
|
||||
import './globals.css';
|
||||
|
||||
@@ -44,6 +45,7 @@ export default function RootLayout({
|
||||
<ThemeRegistry>
|
||||
{/* <PerformanceMonitor /> */}
|
||||
{children}
|
||||
<VoiceFloatingButton />
|
||||
</ThemeRegistry>
|
||||
</ReduxProvider>
|
||||
</ErrorBoundary>
|
||||
|
||||
Reference in New Issue
Block a user