¿Cómo agregar Chatbot en ReactJS Project?

En este artículo, aprenderemos cómo podemos agregar un chatbot a nuestro proyecto de reacción mediante el uso de un paquete npm react-simple-chatbot.

Características de reaccionar-simple-chatbot:

• Es un módulo ligero y muy fácil de usar.
• Sensible.
• Style Component se instala junto con él, por lo que no es necesario instalarlo para los temas.
• Podemos agregar una serie de funcionalidades propias al chatBot.

Requisito previo: conocimiento sobre react.js

Creando la aplicación React y la instalación del Módulo:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app project

Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando:

cd project

Paso 3: ahora instala la dependencia react-simple-chatbot usando el siguiente comando:

npm i react-simple-chatbot

Estructura del proyecto: Se verá así. 

Ejemplo: para usar el chatBot, debemos importarlo desde ‘react-simple-chatbot’. Para que el chatBot funcione, necesitamos crear una array de pasos. El ChatBot toma medidas que son una array de objetos como accesorios.

Aunque hay una serie de opciones que podemos pasar como accesorios a nuestro chatBot sin los accesorios de pasos, mostrará una pantalla en blanco.

En este archivo, simplemente estamos creando una array de pasos con un solo objeto con una identificación ‘0’ con un mensaje ‘Hey Geek’ y final establecido en verdadero, lo que significa que este es el mensaje final del chatBot.

Nombre de archivo: App.js: 

import ChatBot from 'react-simple-chatbot';
 
const steps = [
    {
        id: '0',
        message: 'Hey Geek!',
        end: true
    }
];
 
function App() {
    return (
        <div className="App">
            <h1>Welcome to Geeksforgeeks</h1>
            <ChatBot steps={steps} />
        </div>
    );
}
 
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto.

npm start

Producción:

Así es como se verá el chatBot predeterminado. Mejoramos el estilo y agregamos más funcionalidades al chatBot. Para proporcionar un tema a nuestro proyecto, importemos ThemeProvider desde ‘componentes con estilo’.

Nota: Los ‘componentes con estilo’ se instalan junto con ‘react-simple-chatbot’.

• Crearemos un tema constante con todos los accesorios disponibles para cambiar el estilo de nuestro chatbot. Después de eso, estamos envolviendo el ChatBot dentro del ThemeProvider pasando el tema como accesorios.
• Ahora, para mostrar el ícono del chatbot y cambiar el avatar del bot, necesitamos crear una configuración que tenga un valor flotante establecido en verdadero para que el ícono del bot aparezca en el sitio web y hayamos establecido una imagen en el botAvatar, estamos pasando la configuración como un prop a nuestro ChatBot también. También estamos pasando headerTitle como accesorios a ChatBot.

Nombre de archivo: App.js:

import ChatBot from 'react-simple-chatbot';
import { ThemeProvider } from 'styled-components';
 
const steps = [
    {
        id: '0',
        message: 'Hey Geek!',
 
        // This calls the next id
        // i.e. id 1 in this case
        trigger: '1',
    }, {
        id: '1',
 
        // This message appears in
        // the bot chat bubble
        message: 'Please write your username',
        trigger: '2'
    }, {
        id: '2',
 
        // Here we want the user
        // to enter input
        user: true,
        trigger: '3',
    }, {
        id: '3',
        message: " hi {previousValue}, how can I help you?",
        trigger: 4
    }, {
        id: '4',
        options: [
             
            // When we need to show a number of
            // options to choose we create alist
            // like this
            { value: 1, label: 'View Courses' },
            { value: 2, label: 'Read Articles' },
 
        ],
        end: true
    }
];
 
// Creating our own theme
const theme = {
    background: '#C9FF8F',
    headerBgColor: '#197B22',
    headerFontSize: '20px',
    botBubbleColor: '#0F3789',
    headerFontColor: 'white',
    botFontColor: 'white',
    userBubbleColor: '#FF5733',
    userFontColor: 'white',
};
 
// Set some properties of the bot
const config = {
    botAvatar: "img.png",
    floating: true,
};
 
function App() {
    return (
        <div className="App">
            <ThemeProvider theme={theme}>
                <ChatBot
 
                    // This appears as the header
                    // text for the chat bot
                    headerTitle="GeekBot"
                    steps={steps}
                    {...config}
 
                />
            </ThemeProvider>
        </div>
    );
}
 
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto.

npm start

Producción:

Referencia: https://www.npmjs.com/package/react-simple-chatbot