Voice Select

Voice Select is a voice-enabled single-select dropdown component. It changes the selection based on the intent, entity type or entity value found in the SpeechSegment.

Preview

Voice Select

Voice Select 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 { VoiceSelect } 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">
  <VoiceSelect
    label="Cabin Class"
    options={["my_economy_id", "my_business_id"]}
    displayNames={["Economy class", "Business class"]}
    changeOnEntityType="class"
    changeOnEntityValue={["economy", "business"]}
  />
</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”
`options`	`string`[]	Array of option id strings. The selected id is returned by onChange. By default, the values of the options array is used as `changeOnEntityType` if not one of `changeOnIntent`, changeOnEntityType nor changeOnEntityValue specifies an array value.
`displayNames?`	`string`[]	Array of human-friendly display names for each option
`value?`	`string`	The current option. Specifying the value controls the components’s state so it makes sense to provide an onChange handler.
`defaultValue?`	`string`	Initially selected option. Has no effect if `value` is specified.
`changeOnIntent?`	`string` \| `string`[]	`string[]` (intents) changes this widget’s option based on the intent of the SpeechSegment. The order must match that of `options`. `string` (intent) filters out all but the specified intent. Use `changeOnEntityType` or `changeOnEntityValue` to change the option. `undefined` disables intent filtering.
`changeOnEntityType?`	`string` \| `string`[]	`string[]` (entity types) changes this widget’s option if a matched entity type is found in the SpeechSegment. The order must match that of `options`. `string` (intent) filters out all but the specified entity type. Use `changeOnEntityValue` to change the option. `undefined` disables entity type filtering.
`changeOnEntityValue?`	`string`[]	`string[]` (entity values) changes this widget’s option if a matched entity value is found in the SpeechSegment. The order must match that of `options`.
`onChange?`	(`value`: `string`) => `void`