Speech recognition

With recognitionEnable, the submit button shows a microphone while the input is empty. Click it and speak: the chatbot types what you say and sends it when you stop talking. See Speech for more.

It needs a browser with webkitSpeechRecognition, like Chrome, Edge and other Chromium-based browsers, or Safari, and permission to use the microphone. In other browsers the chatbot works with the keyboard only.

Preview

Code

speech-recognition.tsx

import ChatBot, { type Step } from 'react-simple-chatbot';

const steps: Step[] = [
  { id: 'ask-name', message: 'What is your name?', trigger: 'name' },
  { id: 'name', user: true, trigger: 'greet' },
  { id: 'greet', message: 'Hi {previousValue}, nice to meet you!', end: true }
];

export default function SpeechRecognition() {
  return <ChatBot headerTitle="Speech recognition" recognitionEnable steps={steps} />;
}