• Stars
    star
    198
  • Rank 193,405 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 7 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A React-Native Bridge for the Google Dialogflow (API.AI) SDK

react-native-dialogflow (react-native-api-ai)

Build Status Version Downloads

A React-Native Bridge for the Google Dialogflow AI SDK.

Header Image

Support for iOS 10+ and Android!

Dialogflow is a powerful tool for building delightful and natural conversational experiences. You can build chat and speech bots and may intergrate it in a lot of platform like twitter, facebook, slack, or alexa.

Install

This package depends on react-native-voice, follow their readme to setup it.

Add react-native-dialogflow and link it:

npm install --save react-native-dialogflow react-native-voice

react-native link react-native-dialogflow
react-native link react-native-voice

iOS: IMPORTANT xCode plist settings

Also, you need open the React Native xCode project and add two new keys into Info.plist Just right click on Info.plist -> Open As -> Source Code and paste these strings somewhere into root <dict> tag

<key>NSSpeechRecognitionUsageDescription</key>
<string>Your usage description here</string>
<key>NSMicrophoneUsageDescription</key>
<string>Your usage description here</string>

Application will crash if you don't do this.

Usage

Import Dialogflow:

import Dialogflow from "react-native-dialogflow";

or for V2

import { Dialogflow_V2 } from "react-native-dialogflow"

Configuration

Set the accessToken and the language in your constructor:

 constructor(props) {
        super(props);

        Dialogflow.setConfiguration(
          "4xxxxxxxe90xxxxxxxxc372", Dialogflow.LANG_GERMAN
        );
    }

For V2 you can set the client_email and private_key of the credential json auth setup. In addition you have to set your projectId:

 constructor(props) {
        super(props);

        Dialogflow_V2.setConfiguration(
            "[email protected]",
            '-----BEGIN PRIVATE KEY-----\nMIIEvgIBADAN...1oqO\n-----END PRIVATE KEY-----\n',
            Dialogflow_V2.LANG_GERMAN,
            'testv2-3b5ca'
        );
    }

Listening

Start listening with integrated speech recognition:

   <Button onPress={() => {
            Dialogflow.startListening(result=>{
                console.log(result);
            }, error=>{
                console.log(error);
            });
        }}
   />

In iOS only you have to call finishListening(). Android detects the end of your speech automatically. That's the reason why we didn't implement the finish method in Android.

// only for iOS
Dialogflow.finishListening();
// after this call your callbacks from the startListening will be executed.

Text Request

For using your own speech recognition:

   <Button onPress={() => {
           Dialogflow.requestQuery("Some text for your Dialogflow agent", result=>console.log(result), error=>console.log(error));
        }}
   />

Request an Event

For sending an event to Dialogflow (Contexts and Entities have no effect!):

Dialogflow.requestEvent(
    "WELCOME",
    {param1: "yo mr. white!"},
    result=>{console.log(result);},
    error=>{console.log(error);}
);

Contexts

Set contexts (will take affect on next startListening or queryRequest):

const contexts = [{
  name: "deals",
  lifespan: 1,
  parameters: {
      Shop: "Rewe"
  }
}];

Dialogflow.setContexts(contexts);

Reset all (non-permantent) contexts for current session:

Dialogflow.resetContexts(result=>{
       console.log(result);
    }, error=>{
       console.log(error);
    });

Set permanent contexts, which will be set automatically before every request. This is useful for e.g. access tokens in webhooks:

const permanentContexts = [{
  name: "Auth",
  // lifespan 1 is set automatically, but it's overrideable
  parameters: {
      AccessToken: "1234yo1234"
  }
}];

Dialogflow.setPermanentContexts(permanentContexts);

Entities

Set UserEntities (will take affect on next startListening or queryRequest):

const entities = [{
  "name":"shop",
  "extend":true,
  "entries":[
      {
          "value":"Media Markt",
          "synonyms":["Media Markt"]
      }
  ]
 }];

 Dialogflow.setEntities(entities);

Listener for Android

Only in Android we have four additional methods: onListeningStarted, onListeningCanceled, onListeningFinished and onAudioLevel. In iOS they will be never called:

   <Button onPress={() => {

            Dialogflow.onListeningStarted(()=>{
                console.log("listening started");
            });

            Dialogflow.onListeningCanceled(()=>{
                console.log("listening canceled");
            });

            Dialogflow.onListeningFinished(()=>{
                console.log("listening finished");
            });

            Dialogflow.onAudioLevel(level=>{
                console.log(level);
            });


            Dialogflow.startListening(result=>{
                console.log(result);
            }, error=>{
                console.log(error);
            });
        }}
   />

Note: Make sure you are setting the callbacks before startListening every single time again. Don't set the callbacks in e.g. constructor or componentsDidMount if you are executing startListening more than one times.

Supported Languages

Set the language in your configuration:

Dialogflow.setConfiguration("4xxxxxxxe90xxxxxxxxc372", Dialogflow.LANG_GERMAN);
  • LANG_CHINESE_CHINA
  • LANG_CHINESE_HONGKONG
  • LANG_CHINESE_TAIWAN
  • LANG_DUTCH
  • LANG_ENGLISH
  • LANG_ENGLISH_GB
  • LANG_ENGLISH_US
  • LANG_FRENCH
  • LANG_GERMAN
  • LANG_ITALIAN
  • LANG_JAPANESE
  • LANG_KOREAN
  • LANG_PORTUGUESE
  • LANG_PORTUGUESE_BRAZIL
  • LANG_RUSSIAN
  • LANG_SPANISH
  • LANG_UKRAINIAN

Methods

name platform param1 param2 param3 param4
setConfiguration (V1) both accessToken: String languageTag: String
setConfiguration (V2) both client_email: String private_key: String languageTag: String projectId: String
startListening both resultCallback: (result: object)=>{} errorCallback: (error: object)=>{}
finishListening ios
requestQuery both query: String resultCallback: (result: object)=>{} errorCallback: (error: object)=>{}
requestEvent both eventName: String eventData: Object resultCallback: (result: object)=>{} errorCallback: (error: object)=>{}
onListeningStarted both callback: ()=>{}
onListeningCanceled none callback: ()=>{}
onListeningFinished both callback: ()=>{}
onAudioLevel android callback: (level: number)=>{}
setContexts both array
resetContexts both resultCallback: (result: object)=>{} errorCallback: (error: object)=>{}
setPermanentContexts both array
setEntities (V1 only) both array

Blogpost

Deutsch

Sprachsteuerung mit Api.ai in einer React-Native App

English

Contributors

Powered by innFactory

More Repositories

1

create-react-app-material-typescript-redux

A ready to use boilerplate for starting big react projects
TypeScript
289
star
2

react-planet

A react lib for building circular menus in a very easy and handy way.
TypeScript
171
star
3

JFXC

Jonato JavaFX Controls - More Power for your JavaFX Gui
Java
43
star
4

react-native-quick-sample

A small and simple example app with navigation, data persistence, listview and animation!
JavaScript
34
star
5

bootstrap-akka-http.g8

bootstrap template for akka-http, slick, swagger, aws service
Scala
20
star
6

akka-persistence-gcp-datastore

akka-persistence-gcp-datastore is a journal and snapshot store plugin for akka-persistence using google cloud firestore in datastore mode.
Scala
19
star
7

bootstrap-akka-graphql.g8

g8 bootstrap template for akka microservices with an graphql endpoint
Scala
18
star
8

akka-microservice-example

Kubernetes Deployment of two separate akka microservices which communicate via gRPC
Scala
17
star
9

react-native-aws-mobile-analytics

A react-native module for using Amazon's AWS Mobile Analytics with the aws-sdk
JavaScript
16
star
10

akka-jwt

Library for jwt authentication with akka
Scala
16
star
11

bootstrap-play2

A scala bootstrap template for the play 2 framework to build real world applications.
Scala
14
star
12

akka-lift-ml

akka http service for serving spark machine learning models
Scala
14
star
13

smithy4play

smithy4s Routing for Play Framework.
Scala
14
star
14

bootstrap-akka-http

bootstrap template for akka-http services
Scala
14
star
15

react-native-aws-mobile-analytics-demo

Demo React-Native app which uses react-native-aws-mobile-analytics
Objective-C
13
star
16

react-typesafe-routes

The last routing library you will ever need in your React projects. (At least if you're using react-router–dom but also why wouldn't you?)
TypeScript
13
star
17

material-ui-recoil-template

A ready to use boilerplate for starting [experimental] react projects
TypeScript
11
star
18

bootstrap-akka-graphql

bootstrap template for akka microservices with an graphql endpoint
Scala
11
star
19

aws-codepipeline-dashboard

A simple dashboard for monitoring your aws codepipelines.
TypeScript
10
star
20

aws-session-token-gui

Get a Amazon Web Service Token via desktop GUI
JavaScript
10
star
21

flutter-factory

CLI tool for creating a new Flutter project and other useful features.
TypeScript
9
star
22

akka-cluster-k8s

Deployment of an akka cluster on AWS/Google Kubernetes [EXAMPLE]
Scala
8
star
23

corsign-core

Scala
8
star
24

react-factory

TypeScript
7
star
25

react-starting-guide

This is an instruction to react and related technics. Please go through it and prepare yourself for programming react! Have fun!
7
star
26

scalafx-yaml-editor

This is a ScalaFX demo that contains an simple YAML editor with syntax highlighting and a search function.
Scala
7
star
27

docker

Usefull docker templates for our software projects
Dockerfile
6
star
28

bootstrap-aws-serverless

TypeScript
6
star
29

flutter-starting-guide

5
star
30

flutter_bloc_demo

A small app for demonstrating the usage of the BloC Pattern.
Dart
5
star
31

flutter-factory-templates

Dart
4
star
32

react-template

A ready to use boilerplate for starting big react projects
TypeScript
4
star
33

react-firebase-auth-example

A demo which shows how to implement the firebase authentication mechanism in react
TypeScript
3
star
34

flutter_lint_factory

Dart
3
star
35

react-mui-cookie-dialog

A cookie dialog in react based on material-ui.
TypeScript
2
star
36

scala-utils

Reusable scala utils for awesome innFactory projects.
Scala
2
star
37

react-mui-table-container

Enhancement of mui-virtualized-table with search and actions
TypeScript
2
star
38

plantuml-ifstyle

innFactory PlantUML Styling
2
star
39

flutter-todo-starter

Flutter Template for starting new projects. It includes a Flutter app with offline sync and a Scala backend.
Dart
1
star
40

akka-persistence-gcp-datastore-example

Datastore Tests for akka-persistence-gcp-datastore
Scala
1
star
41

smithy4play-example

Smithy Example based on Play2 with smithy4play
Scala
1
star
42

react-chuck-norris

Starting point for employee onboarding as well as new production projects
TypeScript
1
star
43

akka-typed-event-sourcing-example

Akka Typed Event Sourcing Example Applikation
Scala
1
star