A simple react native project integration with Rasa Open Source
npm install react-native-rasaA 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.
```
yarn add react-native-rasa
or
``
npm install react-native rasa
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://, replacing the host and port with the appropriate values from your running Rasa X or Rasa Open Source server.
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.
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
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
``
./ngrok http 5005
`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 (
<>
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.
_(string)_ - (Required) Your Rasa host, http://, 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.

- [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 ❤️