updated speech recognition with permission and language selector state management

[yodaljit]

Overview
This document outlines the improvements made to the speech recognition feature, focusing on better permission handling, visual feedback, and user experience.

Key Changes

1. Permission State Management

• Added new permission states: 'granted', 'denied', 'prompt', 'unsupported'
• Implemented real-time permission monitoring
• Added browser-specific settings navigation
• Enhanced error handling for permission-related issues

2. Visual Feedback Improvements

• Permission Denied: Red microphone icon with slash
• Unsupported: Gray microphone icon with slash
• Recording Active: Pulsing red dot indicator
• Normal State: Standard microphone icon
• Added tooltips with contextual help messages

3. Browser-Specific Handling

// Chrome
chrome://settings/content/microphone

// Firefox
about:preferences#privacy

// Other browsers
Generic settings instructions

Component Changes

useSpeechRecognition Hook

• Added permission state tracking
• Implemented permission query and monitoring
• Enhanced error handling with user-friendly messages
• Added language support configuration

SpeechRecognitionButton

• New visual states based on permission status
• Interactive tooltips with helpful messages
• Direct links to browser settings
• Improved accessibility features

BaseChat Integration

• Updated to use new permission states
• Improved error handling and user feedback
• Better integration with streaming state

User Experience Improvements

Visual States

1. Denied Permission

   • Red microphone icon
   • Tooltip with instructions to enable
   • Click opens browser settings

2. Unsupported Browser

   • Gray disabled icon
   • Informative tooltip
   • Disabled state

3. Active Recording

   • Stop icon when recording
   • Clear recording state visibility
   • Stop recording on stream start

Error Handling

• Network errors: Connection status messages
• Permission errors: Clear instructions for resolution
• Recognition errors: User-friendly error messages
• Browser compatibility: Support status messages

Technical Implementation

Permission Monitoring

const checkPermission = async () => {
  try {
    const result = await navigator.permissions.query({ name: 'microphone' });
    setPermissionState(result.state);
    
    result.addEventListener('change', () => {
      setPermissionState(result.state);
    });
  } catch (error) {
    setPermissionState('prompt');
  }
};

Visual Feedback

const getButtonIcon = (permissionState: PermissionState, isListening: boolean) => {
  switch (permissionState) {
    case 'denied':
      return <div className="text-red-500" />;
    case 'unsupported':
      return <div className="text-gray-400" />;
    default:
      return isListening ? <div className="animate-pulse" /> : <div />;
  }
};

Recent Changes (2024-12-13)

UI Improvements

1. Icon Updates
   • Added microphone-slash icon for denied permissions state
   • Added red color indication for stop and denied states
   • Using UnoCSS i-ph prefix for icon integration

Functionality Improvements

1. Language Persistence
   • Added localStorage support to persist language selection
   • Language preference now survives page reloads
   • Fallback to default language (en-US) if no saved preference

Component Structure

1. Button States

   • Normal state: Shows microphone icon
   • Recording state: Shows red stop icon
   • Denied state: Shows red slashed microphone icon
   • Each state has appropriate hover and focus styles

2. Language Selection

   • Language menu accessible via dropdown
   • Supports multiple languages including:
     • English (US/UK)
     • Spanish
     • French
     • German
     • Italian
     • Portuguese
     • Russian
     • Chinese (Simplified)
     • Japanese
     • Korean
     • Hindi

Technical Implementation

1. Hook Updates

   • Enhanced useSpeechRecognition hook with language persistence
   • Added SSR compatibility checks
   • Improved error handling and state management

2. Styling

   • Using UnoCSS for consistent styling
   • Responsive design for all screen sizes
   • Proper spacing and alignment with other chat components

Browser Support

• Chrome: Settings redirect to chrome://settings/content/microphone
• Firefox: Settings redirect to about:preferences#privacy
• Other browsers: Standard permission prompts

Future Improvements

1. Implement noise cancellation
2. Support for custom wake words
3. Implement automatic punctuation

Browser Support

• Chrome: Full support
• Firefox: Full support
• Safari: Partial support
• Edge: Full support

Notes

• Permission states are persisted across sessions
• Real-time permission updates without page reload
• Graceful fallback for unsupported browsers
• Accessible keyboard navigation support

[thecodacus]

like to test this can you resolve the conflicts and ping me once done?

[Digitl-Alchemyst]

I will also test this this improvement if the conflicts are resolved.
Can we also update the title to match our new naming convention.