onButtonState handler¶
Responsible for handling the Alan button state change events.
When the user launches an app with the Alan button, Alan connects to the project in the Alan Cloud, and the Alan button transitions through several states:
CONNECTING: Alan is connecting to your in-app assistant project in the Alan Cloud
ONLINE: a connection to the project is established
LISTEN: Alan is listening to the user input
PROCESS: Alan is processing the user input
REPLY: Alan is replying to the user
OFFLINE: no connection to the Internet; the connection to the Alan Studio project cannot be established
If you need to perform activities in the app while the Alan button is in a specific state, you can use the ‘onButtonState’ handler to listen to the Alan button state changes.
Examples¶
alanBtn({
key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
onButtonState: function (e) {
console.info('onButtonState', e);
},
});
self.button.onButtonState = ^(AlanSDKButtonState state) {
NSLog(@"%ld", (long)state);
};
self.button.onButtonState = { state in
print(state.rawValue)
}
val alanCallback: AlanCallback = object : AlanCallback() {
/// Handle button state
override fun onButtonState(alanState: AlanState) {
Log.d("AlanButton", "onButtonState: $alanState")
}
}
AlanCallback alanCallback = new AlanCallback() {
/// Handle button state
@Override
public void onButtonState(AlanState alanState) {
Log.d("AlanButton", "onButtonState: " + alanState);
}
};
_MyHomePageState() {
/// Handle button state
AlanVoice.onButtonState.add((state) {
debugPrint("got new button state ${state.name}");
});
}
Ionic Angular
this.alanBtnComponent.nativeElement.addEventListener('buttonState', (data) => {
const buttonState = (<CustomEvent>data).detail;
this.buttonStatusSectionEl.nativeElement.innerText = this.buttonStatusSectionEl.nativeElement.innerText + buttonState + '\n';
});
Ionic React
alanBtnComponent.current.addEventListener('buttonState', (data: CustomEvent) => {
const stateData = data.detail;
console.info('Button state:', stateData);
});
Ionic Vue
<ion-content :fullscreen="true">
<alan-button v-on:buttonstate="onButtonState" alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE" />
</ion-content>
export default defineComponent({
methods: {
onButtonState: function(data:any) {
console.info('Button state is: ', data.detail);
}
},
});
Note
To define the onButtonState
handler in Ionic Vue, use lowercase: v-on:buttonstate
. Otherwise the handler will not be working.
import { NativeEventEmitter, NativeModules } from 'react-native';
const { AlanManager, AlanEventEmitter } = NativeModules;
const alanEventEmitter = new NativeEventEmitter(AlanEventEmitter);
componentDidMount() {
/// Handle button state
alanEventEmitter.addListener('onButtonState', (state) => {
console.log(`onButtonState: ${JSON.stringify(state)}`);
});
}
componentWillUnmount() {
alanEventEmitter.removeAllListeners('onButtonState');
}
See also
How-to: Activate the Alan button programmatically and play a greeting