React native: Creating chat bot assistant with splash screen animation

I’m working in a react native app which needs to implement a chat bot assistant to answer customer inquiries which is able to continue the conversation based on the answers selected by the customer. The relevant questions and answer sets are the predicted outputs of the trained machine learning model. Here customer selected answers are sent to the back end API and through back end a third party API is calling to get the predicted output of the machine learning model which will be the next question and answer set shown to the customer. In this post I’m going to share how I built it in react native based on machine learning model predictions.

Here’s what the finished chat bot assistant looks like:

So let’s get to do it.

Define sample back end Json response:

Here I’m defining a type for each array item such as TEXT, LIST . If answer array is empty I’m defining the type of the data item as a TEXT and if there is an answer list I’m defining the type as a LIST. It will helpful to you when creating the UI for conversation items. If you need you can add more types according to the same format to make feature rich output.

Implementation:

As my initial implementation I’m calling the back end API in chat bot view componentDidMount method.

this.props.chatBotInitiate(requestParams, this);

Then I need to update the back end response to a redux state. Here I’m going to create another chat temp object to manipulate data in app side as same as the back end response format. Then I update the app side temp object to a different redux state inside a setTimeout method and I called another setTimeout inside it to update only the welcome message of the back end response to the app side temp object. Here my objective is to render dot indicator with a delay in seconds and then render splash screen with the welcome message.

Below is the implementation of chatBotInitiate function.

Here I’m rendering the content inside ChatBotMainView.js by using the redux state. This is how it looks like in the ChatBotMainView.js. As I explained above in the first setTimeout method I’m updating the redux state with an empty data array and empty welcome message to render dotIndicatorView. Then in the second setTimeout method I’m updating the redux state with welcome message to render splash screen.

In the second setTimeout method after updating the splash screen next I’m going to render the data list as a Flat list by updating data items recursively using another setTimeout. Here we need to update the welcome message as empty to render the conversion content. Then I’m updating the array items to the redux state recursively. Below is the recursion function that I have implemented.

Finally we need to implement the UI of the conversation items using redux state. For that I have used a separate chatItemView.js to render list items. Here LIST and TEXT type items are coming from the back end response which is updated to app side chat temp object . Then we need to update the user selected answer to the same redux state using a different type as UI’s are different in questions, answer list and selected answer. Here I’m using the type as ANSWER. In the clickAnswer function if it is a LIST type item I’m calling updateChatBotAnswers to update the app side redux state.

this.props.updateChatBotAnswers(item, this.props.chat_bot_ui_data, this.props.screen_context);

Below is the implementation of updateChatBotAnswers. Here I’m updating the user selected answer to the app side redux state and finally need to call the back end API to get the response based on user selected answer.

So from above chat bot example you can create a simple chat bot assistant and you can build on top of it to make you chat bot assistant feature rich and dynamic. Further you can integrate voice to text component and text input to get inquiries from the customer to make it more sophisticated.

Thank you for reading!