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

NameTypeDescription
labelstringThe 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”
optionsstring[]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?stringThe current option. Specifying the value controls the components’s state so it makes sense to provide an onChange handler.
defaultValue?stringInitially 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

Last updated by Mathias Lindholm on January 26, 2022 at 11:48 +0200

Found an error on our documentation? Please file an issue or make a pull request