onButtonState handler¶

Responsible for handling the Alan AI button state change events.

When the user launches an app with the Alan AI button, Alan AI connects to the project in the Alan AI Cloud, and the Alan AI button transitions through several states:

CONNECTING: Alan AI is connecting to your AI agent project in the Alan AI Cloud
ONLINE: a connection to the project is established
LISTEN: Alan AI is listening to the user input
PROCESS: Alan AI is processing the user input
REPLY: Alan AI is replying to the user
OFFLINE: no connection to the Internet; the connection to the Alan AI Studio project cannot be established
NO_PERMISSION: permission for the microphone has not been received from the user
NO_VOICE_SUPPORT: voice is not supported on the device
INSECURE_ORIGIN: the website or app does not have a secure origin and Alan AI is not able to access the microphone on the device

If you need to perform activities in the app while the Alan AI button is in a specific state, you can use the onButtonState handler to listen to the Alan AI button state changes.

Examples¶

Web (React, Angular, etc.)

Client app¶

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

Objective-C

Client app¶

self.button.onButtonState = ^(AlanSDKButtonState state) {
  NSLog(@"%ld", (long)state);
};

Swift

Client app¶

self.button.onButtonState = { state in
  print(state.rawValue)
}

Kotlin

Client app¶

val alanCallback: AlanCallback = object : AlanCallback() {

  /// Handle button state
  override fun onButtonState(alanState: AlanState) {
    Log.d("AlanButton", "onButtonState: $alanState")
  }
}

Java

Client app¶

AlanCallback alanCallback = new AlanCallback() {

  /// Handle button state
  @Override
  public void onButtonState(AlanState alanState) {
    Log.d("AlanButton", "onButtonState: " + alanState);
  }
};

Flutter

Client app¶

_MyHomePageState() {
  /// Handle button state
  AlanVoice.onButtonState.add((state) {
    debugPrint("got new button state ${state.name}");
  });
}

Ionic

Ionic Angular

Client app¶

this.alanBtnComponent.nativeElement.addEventListener('buttonState', (data) => {
  const buttonState = (<CustomEvent>data).detail;
  this.buttonStatusSectionEl.nativeElement.innerText = this.buttonStatusSectionEl.nativeElement.innerText + buttonState + '\n';
});

Ionic React

Client app¶

alanBtnComponent.current.addEventListener('buttonState', (data: CustomEvent) => {
  const stateData = data.detail;
  console.info('Button state:', stateData);
});

Ionic Vue

Client app¶

<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.

React Native

Client app¶

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