React For Chatbot Everything You Need To Know

Step-1: Create a New React.Js Project

So, let's start by creating a new react.js project by Opening your terminal or command prompt and running the following command to create a new React.js project.

By implementing the above code a new directory will be created as a chatbot app with its basic react.js project structure.

Step 2: Install Additional Dependencies

Navigate into the project directory by running the cd chatbot-app. To use chatbot-specific libraries, we need to install a few additional dependencies. Run the following command to install them.

This will install the react-chatbot-kit library, which provides essential components for building chatbots, and the axios library for making HTTP requests.

Step 3: Create a Chatbot Component

Now you need to create a new file inside the src directory named chatbot.js. This file will contain the code for our chatbot component. Open Chatbot.js and add the following code.

    import  React from’ react’;
    Import { Chatbot } from ‘react-chatbot-kit;
    
    Const ChatBotComponent = () => {
    return{
    <divi>
    <Chatbot
    
    config={config}
    actionProvider={actionProvider}
    messageParser={messageParser}
    />
    <div>
    );
    };
    
    export default ChatbotComponent    
    

In this code, we import the necessary components from the react-chatbot-kit library and create a functional component called ChatbotComponent. We render the Chatbot component inside a container div and pass in configuration, action provider, and message parser props.

Step-4: Manage Chat Message State

To manage chat messages, you need to create a new folder called hooks inside the src directory. Inside the hooks folder, create a file called useChatMessages.js. Open this file and add the following code.

    import {useState} from ‘react’;

    const useChatMessage = () => {
    const [message, setMessages] = useState([]);
    
    const addMessage = (message) =>{
    setMessages((prevMessages) => [...prevMessages, message]);
    };
    
    return {messages, addMessage};
    };
    
    Export default useChatmessages;
    

This custom hook creates a state for managing chat messages. It provides a function called addMessage that allows us to add new messages to the state.

Step-5: Render Chat Message

Now, here we need to update the Chatbot.js file to render the chat messages. Add the following code inside the ChatbotComponent function

    import useChatMessages from’./hook/useChatMessages’;

    const Chatbotcomponent =() =>{
    Const {messages} = useChatMessages();
    
    return(
    <div>
        <Chatbot
        config={config}
        actionProvider={actionProvider}
        messagePaser={messagePraser}
        />
        <div>
        {message.map((message,index) =>(
            <div key={index}>{mesaage.text}</div>
        ))}
        </div>
    </div>
    );
    };
    

In this code, we import the useChatMessages hook and call it to get the messages state. We then map over the message array and render each element separate.

Step-6: Add User Input

You, need to update the Chatbot.js file again as it allows the user to input messages. Just add the following code inside the chatbotComponent function, just below the chat messages rendering code.

    const handleUserMessage =(message) => {
        addMessage({text:message,isUser:true});
        };
        
        const config = {
        .
        .
        inputPlaceholder: ’Type a message…’,
        .
        };
        const actionProvider =.
        const messageParser =.
        
        return(
        <div>
            <Chatbot
            config={config}
            actionProvider={actionProvider}
            messagePraser={messageParser}
            handleUserMessage={handleUserMessage}
            />
            <div>
            {messages.map((message,index) => (
                <div key={index}>{message.text}</div>
            ))}
            </div>
        </div>
        );
    

In this code, we define a new function called handleUserMessage that receives the user’s input message and adds it to the message state. We also update the config object to include an input placeholder text and pass the handleUserMessage function to the Chatbot component as a prop.

Step-7: Add Chatbot Response

Creating a new file calledChatbotActionProvider.js inside the src. directory will generate a chatbot response. Open the file and add the following code.

    import axios from ‘axios’;

    class ChatbotActionProvider{
    constructor(createChatbotMessage, setStateFunc) {
    this.createChatBotMessage(chatbotMessage);
    }
    
    setChatBotMessage(message) {
    this.setState((prevState) => ({
    …prevState,
    message:[...prevState.messages,message],
    }));
    }
    }
    
    export default ChatbotActionProvider;  
    

Step-8: Styling the Chatbot

To style the chatbot component you can create a CSS file called Chatbot.css inside the src directory.

    .bot-message {
        background-color : #e0e0e0;
        padding: 5px;
        margin-bottom:10px;
    }
        
    .user-message{
        background-color: #f2f2f2;
        padding:5px;
        Margin-bottom:10px:
    }                
    

Step-9: Integration of Chatbot with App

To integrate the chatbot component into your app, open the main App.js file and import the Chatbot component. Then, add the tag where you want the chatbot to appear in your app.

Step-10: Test and Run

You can now test and run your chatbot application by running npm start in the terminal. Open your web browser and navigate to http://localhost:3000 to see the chatbot in action.

Botpress

It’s an open-source chatbot framework that offers a visual interface with built-in NLU (Natural Language Understanding) abilities. This framework offers integration with a popular messaging platform and allows for customizing and extending the chatbot’s behaviour using React components.

React Chatbot Kit

It’s a library component that offers ready-to-use components. These components are responsible for message bubbles, input fields and quick reply buttons making it easier to create interactive chatbot interfaces.

React Native Chatbot

This library is used while creating a chatbot on mobile applications. It offers a customizable UI element and supports features like typing indicators, quick replies and attachments.

React Simple Chatbot

It’s a lightweight library It offers a declarative syntax for defining conversation flows and provides built-in components for rendering messages, input fields, buttons and capturing data during conversations.

React-Chatbot Kit

This library provides a chat video UI with customizable speech bubbles, input fields and buttons. In addition to user input validation and conversation management, it facilitates interaction with well-known NLP (Natural Language Processing) services like Dialogflow and Wit.ai.