Voice Input

Voice Input is a voice-enabled text field component. Its value changes whenever the specified entity type is found in the SpeechSegment. The new value will be the entity’s value.

Preview

Voice Input

Voice Input dressed in capsule and mui themes. See styling the components for more information.

Usage

You’ll need a Speechly React app and a Speechly configuration that tags entities in phrases to use this component.

Ensure you have added the @speechly/react-voice-forms dependency:

npm i @speechly/react-voice-forms

Import the component and a css theme:

import { VoiceInput } from '@speechly/react-voice-forms'
import '@speechly/react-voice-forms/css/theme/mui.css'

Place the form component somewhere inside your SpeechProvider block:

<SpeechProvider appId="YOUR_APP_ID_FROM_SPEECHLY_DASHBOARD">
  <VoiceInput label="From" changeOnEntityType="from" />
</SpeechProvider>

Properties

Name	Type	Description
`label`	`string`	The label displayed on the component. For speech use, the label should match the keywords in the phrase used to control the widget: e.g. component with label “Passengers” should be configured to react to phrases like “3 passegers”
`changeOnEntityType`	`string`	`string` (entity type) specifies the entity type that changes this component’s value. The new value will be the entity’s value.
`value?`	`string`	The current value. Specifying the value controls the components’s state so it makes sense to provide an onChange handler.
`defaultValue?`	`string`	Initial value. Has no effect if `value` is specified.
`changeOnIntent?`	`string`	`string` (intent) filters out all but the specified intent. `undefined` disables intent filtering.
`onChange?`	(`value`: `string`) => `void`