onEvent handler¶

Responsible for handling events received from Alan AI.

While Alan AI interacts with the user and interpretes the user’s input, it emits a series of events. For each event, Alan AI 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 AI events:

recognized
parsed
text
scripts

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.
Event object¶
```
{name: 'recognized', text: 'hello', final: false}
```
If the user’s input has been recognized, the final field value is true.
Event object¶
```
{name: '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¶

{name: 'parsed', text: 'hello'}

text event¶

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

Event object¶

{name: 'text', text: 'I am here'}

scripts event¶

Note

The scripts event is currently supported on the Web platform.

This event is emitted when a script in the AI agent project in Alan AI Studio is saved.

Event object¶

{name: 'scripts'}

Examples¶

Web (React, Angular, etc.)

Client app¶

alanBtn({
  key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
  host: 'v1.alan.app',
  onEvent: function (e) {
    console.info('onEvent', e);
  },
});

Objective-C

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);
};

Swift

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)
}

Kotlin

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) }
    }
  }
}

Java

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());
    }
  }
};

Flutter

Client app¶

_MyHomePageState() {
  /// Handle events
  AlanVoice.onEvent.add((event) {
    debugPrint("got new event ${event.data.toString()}");
  });
}

Ionic

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.

React Native

Client app¶

import { NativeEventEmitter, NativeModules } from 'react-native';
const { 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

Identifying message pairs¶

The reqId field of the messages sent in parsed/recognized and text events contains a unique ID that allows you to identify request-response pairs to which these messages relate. For example, in the parsed event, the message format will be the following:

Event object¶

{"reqId":"1666610864381/1", "text":"hi"}

In the text event, the message format will be the following:

Event object¶

{text: "Hello", ctx: {reqId: "1666610864381/1"}}