onEvent handler

Responsible for handling events received from Alan.

While Alan interacts with the user and interpretes the user’s input, it emits a series of events. For each event, Alan generates JSON output with the event description. You can intercept the event information and use it in your app logic if needed.

You can use the following Alan events:

recognized event

The event is emitted during and upon the user’s input recognition. The event description contains interim results for the interpreted user’s phrase and the recognition state in the final field:

  • If the user’s input is still being recognized, the final field value is false.

  • If the user’s input has been recognized, the final field value is true.

Event object
// The user’s input is being recognized
{text: hello, final: false}

// The user’s input has been recognized
{text: hello, final: true}

parsed event

The event is emitted after the user’s input has been parsed and interpreted. The event description contains the final result for the interpreted user’s phrase.

Event object
{text: hello}

text event

This event is emitted when Alan plays the reply to the user. The event description contains Alan’s response.

Event object
{text: I am here}

Examples

Client app
var alanBtnInstance = alanBtn({
  key: "a552799e77cd7970091cb1f9fc484b652e956eca572e1d8b807a3e2338fdd0dc/stage",
  onEvent: function (e) {
    console.info('onEvent', e);
  },
  rootEl: document.getElementById("alan-btn"),
});
Client app
self.button.onEvent = ^(NSString *payload) {
  NSData* eventData = [payload dataUsingEncoding:NSUTF8StringEncoding];
  NSError* error = nil;
  NSDictionary* eventDict = [NSJSONSerialization JSONObjectWithData:eventData options:0 error:&error];
  if (error != nil) {
    return;
  }
  NSLog(@"%@", eventDict);
};
Client app
self.button.onEvent = { event in
  guard let eventData = event?.data(using: .utf8, allowLossyConversion: false),
    let eventDict = try? JSONSerialization.jsonObject(with: eventData, options: .mutableContainers)
  else {
    return
  }
  print(eventDict)
}
Client app
val alanCallback: AlanCallback = object : AlanCallback() {
  /// Handle events
  override fun onEvent(payload: String) {
    try {
      val eventDict = JSONObject(payload)
      Log.d("AlanButton", "onEvent: event: $eventDict")
    } catch (e: JSONException) {
      e.message?.let { Log.e("AlanButton", it) }
    }
  }
}
Client app
AlanCallback alanCallback = new AlanCallback() {
  /// Handle events
  @Override
  public void onEvent(String payload) {
    try {
      JSONObject eventDict = new JSONObject(payload);
      Log.d("AlanButton", "onEvent: event: " + eventDict);
    } catch (JSONException e) {
      Log.e("AlanButton", e.getMessage());
    }
  }
};
Client app
_MyHomePageState() {
  /// Handle events
  AlanVoice.onEvent.add((event) {
    debugPrint("got new event ${event.data.toString()}");
  });
}

Ionic Angular

Client app
this.alanBtnComponent.nativeElement.addEventListener('event', (data) => {
  const event = (<CustomEvent>data).detail;
  this.eventSectionEl.nativeElement.innerText = this.eventSectionEl.nativeElement.innerText + JSON.stringify(event) + '\n\n';
});

Ionic React

Client app
alanBtnComponent.current.addEventListener('event', (data: CustomEvent) => {
  const eventData = data.detail;
  console.info('Received event: ', eventData.text);
});

Ionic Vue

Client app
<ion-content :fullscreen="true">
  ...
  <alan-button v-on:event="event" alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE" />
</ion-content>

export default defineComponent({
  ...
  methods: {
    event: function(data:any) {
      console.info('Received event: ', data.detail);
    }
  },
});

Note

To define the onEvent handler in Ionic Vue, use lowercase: v-on:event. Otherwise the handler will not be working.

Client app
import { NativeEventEmitter, NativeModules } from 'react-native';
const { AlanManager, AlanEventEmitter } = NativeModules;
const alanEventEmitter = new NativeEventEmitter(AlanEventEmitter);

componentDidMount() {
  /// Handle events
  alanEventEmitter.addListener('onEvent', (payload) => {
    console.log(`onEvent: ${JSON.stringify(payload)}`);
  });
}
componentWillUnmount() {
  alanEventEmitter.removeAllListeners('onEvent');
}

See also

How to capture user utterances as text