`components/InputModeSelector.tsx`

73 lines
'use client'

import { useState, useEffect } from 'react'

export type InputMode = 'talk' | 'text' | 'both'

interface InputModeSelectorProps {
  mode: InputMode
  onModeChange: (mode: InputMode) => void
  className?: string
}

export default function InputModeSelector({ mode, onModeChange, className = '' }: InputModeSelectorProps) {
  const [isChanging, setIsChanging] = useState(false)

  const handleModeChange = (newMode: InputMode) => {
    if (newMode === mode) return
    
    setIsChanging(true)
    onModeChange(newMode)
    
    // Reset animation
    setTimeout(() => setIsChanging(false), 300)
  }

  return (
    <div className={`input-mode-selector ${className}`}>
      <div className="mode-selector-container">
        <button
          onClick={() => handleModeChange('talk')}
          className={`mode-button ${mode === 'talk' ? 'active' : ''} ${isChanging ? 'changing' : ''}`}
          aria-label="Talk only mode"
          title="Voice only - no text input"
        >
          <span className="mode-icon">🎤</span>
          <span className="mode-label">Talk</span>
        </button>
        
        <button
          onClick={() => handleModeChange('text')}
          className={`mode-button ${mode === 'text' ? 'active' : ''} ${isChanging ? 'changing' : ''}`}
          aria-label="Text only mode"
          title="Text only - no voice input"
        >
          <span className="mode-icon">⌨️</span>
          <span className="mode-label">Text</span>
        </button>
        
        <button
          onClick={() => handleModeChange('both')}
          className={`mode-button ${mode === 'both' ? 'active' : ''} ${isChanging ? 'changing' : ''}`}
          aria-label="Talk and Text mode"
          title="Both voice and text input"
        >
          <span className="mode-icon">🎤⌨️</span>
          <span className="mode-label">Both</span>
        </button>
      </div>
      
      <div className="mode-description">
        {mode === 'talk' && (
          <p className="mode-desc-text">🎤 Voice Only - Just talk to Bubbe!</p>
        )}
        {mode === 'text' && (
          <p className="mode-desc-text">⌨️ Text Only - Type your messages</p>
        )}
        {mode === 'both' && (
          <p className="mode-desc-text">🎤⌨️ Talk & Text - Choose how to chat</p>
        )}
      </div>
    </div>
  )
}