react-native-rasa

A simple react native project integrated with Rasa Open Source with using REST Channel. Please see more at Rasa Rest API.

This project uses react-native-gifted-chat so you can use all the props from it.

Install

``
yarn add react-native-rasa
`

or

`
npm install react-native rasa
`

Setup your Rasa host

The REST channel will provide you with a REST endpoint where you can post user messages and receive the assistant's messages in response.

Add the REST channel to your credentials.yml:

`yml
rest:
# you don't need to provide anything here - this channel doesn't
# require any credentials
`

Restart your Rasa X or Rasa Open Source server to make the REST channel available to receive messages. You can then send messages to http://:/webhooks/rest/webhook, replacing the host and port with the appropriate values from your running Rasa X or Rasa Open Source server.

Message Format

Please see more informations from Rasa Doc at here, you also need to know about react-native-gifted-chat message format to understand how this libray works.

Rasa Example

$3

On the example-rasa folder there is a sample code using poetry and Rasa 3.0.4. If you do not have poetry installed yet you can install it from here. It requires you have python = ">=3.7,<3.9" installed.

You can activate a python environment and install packages with the following commands. Make sure you are on example-rasa folder
`python
poetry shell
poetry install
`

$3

At the root of your rasa project, run the following command to start the action server. It will be defaulted to port 5055.

`python
rasa train
rasa run actions
`

You should see the following output at the terminal
!action-server-img

Open a new terminal and activate the same virtual environment with poetry shell. Change to directory example-rasa. Run the following command to start the server. The default port is 5005.

`python
rasa run --enable-api --cors "*"
`

enable-api is optional but cors is required to allow secure data transfer and prevent you from getting Cross-Origin Resource Sharing error. The terminal will show the following output. For Windows users, you need to use double quotes to ensure that CORS registered correctly.
!api-server-img

$3

Android and iOS apps will requiere secure https connections. If you are testing locally we recommend you to use ngrok. You should copy the https address on host props.

`
./ngrok http 5005
`

!action-server-img




$3

`javascript
import React from 'react';
import {SafeAreaView, StatusBar, StyleSheet} from 'react-native';
import RNRasa from 'react-native-rasa';
// your rasa host, for example:
const HOST = 'http://localhost:5005';
const App = () => {
return (
<>


host={HOST}
onSendMessFailed={(error) => console.log(error)}
emptyResponseMessage="Sorry, I don't understand"
onEmptyResponse={() => console.log('Handle with your custom action')}
/>


);
};

export default StyleSheet.create({
container: {
flex: 1,
},
});
`

For a custom Chat setup, please check the App.tsx file.

Props


- host _(string)_ - (Required) Your Rasa host, http://:/webhooks/rest/webhook, replacing the host and port with the appropriate values from your running Rasa X or Rasa Open Source server.
- onSendMessFailed _(Function)_ - (Optional) Callback when sending a message failed.
- onEmptyResponse _(Function)_ - (Optional) Callback when the bot return empty reponse (Sometimes it happens to Rasa Open Source).
- emptyResponseMessage _(String)_ - (Optional) The message the bot will return in case the reponse is empty.
- userId _(String)_ - (Optional) Sets the user Id..
- userAvatar _(String)_ - (Optional) Sets the user Avatar using an image uri.
- userName _(String)_ - (Optional) Sets the user name.
- botName _(String)_ - (Optional) Sets the bot name.
- botAvatar _(String)_ - (Optional) Sets the bot Avatar using an image uri.

- You can also use all the props from react-native-gifted-chat

Methods

- resetMessages _(Function)_ - This clear all messages on the widget.
- resetBot _(Function)_ - It sends a reset intent to Rasa server (It will requiere a correct configuration on Rasa server to handle this intent. Check how to do that on the our sample code).
- sendCustomMessage` _(Function)_ - It allows to send custom text messages to Rasa server.

Preview

$3

- [x] Reset bot on destroy
- [x] Add restart bot options
- [x] Add checkbox messages and quick replies
- [x] Add bot avatar
- [x] Add example
- [x] Add Video reponses
- [ ] Voice support
- [ ] Allow that users attach files and images

PR are welcome ❤️

License