💬 Chat with Text-to-Speech

Interactive demo showing TTS integration in a chat interface

🎯 How to Use

• 🔊 Speak Button: Click the speaker icon next to any message to hear it
• 🎤 Voice Selection: Choose from 40+ voices in the dropdown above
• ⏹️ Stop: Click the red stop button to interrupt speech
• 💬 Try It: Type your own messages and hear them spoken!

💡 Integration Code

import { useTextToSpeech } from '@/hooks/useTextToSpeech';

function ChatMessage({ message }) {
  const { speak, stop, isSpeaking } = useTextToSpeech();

  return (
    <div>
      <p>{message.text}</p>
      <button onClick={() => speak(message.text)}>
        {isSpeaking ? '⏹️ Stop' : '🔊 Speak'}
      </button>
    </div>
  );
}