onCommand handler

Responsible for handling commands sent from the dialog script.

Examples

Web (React, Angular, etc.)

Client app

alanBtn({
  key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
  host: 'v1.alan.app',
});

Objective-C

Client app

self.button.onCommand = ^(NSDictionary *command) {
  NSString* commandName = [command objectForKey:@"command"];
  NSLog(@"%@", commandName);
};

Swift

Client app

self.button.onCommand = { command in
  guard let commandName = command?["command"] as? String else {
    return
  }
  print(commandName)
}

Kotlin

Client app

val alanCallback: AlanCallback = object : AlanCallback() {
  /// Handle commands from Alan AI Studio
  override fun onCommand(eventCommand: EventCommand) {
    try {
      val command = eventCommand.data
      val commandName = command.getJSONObject("data").getString("command")
      Log.d("AlanButton", "onCommand: commandName: $commandName")
    } catch (e: JSONException) {
      e.message?.let { Log.e("AlanButton", it) }
    }
  }
};

/// Register callbacks
alanButton?.registerCallback(alanCallback);

Java

Client app

AlanCallback alanCallback = new AlanCallback() {
  /// Handle commands from Alan AI Studio
  @Override
  public void onCommand(final EventCommand eventCommand) {
    try {
      JSONObject command = eventCommand.getData();
      String commandName = command.getJSONObject("data").getString("command");
      Log.d("AlanButton", "onCommand: commandName: " + commandName);
    } catch (JSONException e) {
      Log.e("AlanButton", e.getMessage());
    }
  }
};

/// Register callbacks
alanButton.registerCallback(alanCallback);

Flutter

Client app

_MyHomePageState() {
  /// Handle commands from Alan AI Studio
  AlanVoice.onCommand.add((command) {
    debugPrint("got new command ${command.toString()}");
  });
}

Ionic

Ionic Angular

Client app

this.alanBtnComponent.nativeElement.addEventListener('command', (data) => {
  const commandData = (<CustomEvent>data).detail;
  if (commandData.command === 'navigation') {
     // call client code that will react to the received command
   }
 });

Ionic React

Client app

alanBtnComponent.current.addEventListener('command', (data: CustomEvent) => {
  const commandData = data.detail;
  if (commandData.command === 'navigation') {
     // call client code that will react to the received command
  }
});

Ionic Vue

Client app

<ion-content :fullscreen="true">
  <alan-button v-on:command="command" alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE" />
</ion-content>

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

Note

To define the onCommand handler in Ionic Vue, use lowercase: v-on:command. 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 commands from Alan AI Studio
  alanEventEmitter.addListener('onCommand', (data) => {
    console.log(`onCommand: ${JSON.stringify(data)}`);
  });
}

componentWillUnmount() {
  alanEventEmitter.removeAllListeners('onCommand');
}