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 isfalse
.If the user’s input has been recognized, the
final
field value istrue
.
// 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.
{text: hello}
text event¶
This event is emitted when Alan plays the reply to the user. The event description contains Alan’s response.
{text: I am here}
Examples¶
var alanBtnInstance = alanBtn({
key: "a552799e77cd7970091cb1f9fc484b652e956eca572e1d8b807a3e2338fdd0dc/stage",
onEvent: function (e) {
console.info('onEvent', e);
},
rootEl: document.getElementById("alan-btn"),
});
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);
};
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)
}
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) }
}
}
}
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());
}
}
};
_MyHomePageState() {
/// Handle events
AlanVoice.onEvent.add((event) {
debugPrint("got new event ${event.data.toString()}");
});
}
Ionic Angular
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
alanBtnComponent.current.addEventListener('event', (data: CustomEvent) => {
const eventData = data.detail;
console.info('Received event: ', eventData.text);
});
Ionic Vue
<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.
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