如何在 ReactJS 项目中添加聊天机器人？

在本文中，我们将学习如何使用 npm 包react-simple-chatbot 将聊天机器人添加到我们的 react 项目中。

react-simple-chatbot 的特点：

• 它是一个轻量级的模块，非常易于使用。
• 反应灵敏。
• 样式组件随它一起安装，因此无需为主题安装它。
• 我们可以向聊天机器人添加一些我们自己的功能。

先决条件：了解 react.js

创建 React 应用程序和模块安装：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app project

第2步：创建项目文件夹（即项目）后，使用以下命令移动到该文件夹：

cd project

第 3 步：现在使用以下命令安装依赖项 react-simple-chatbot：

npm i react-simple-chatbot

项目结构：它看起来像这样。

示例：要使用聊天机器人，我们需要从“react-simple-chatbot”导入它。为了让聊天机器人工作，我们需要创建一个步骤数组。 ChatBot 采取步骤，这是一个对象数组作为它的道具。

尽管我们可以将许多选项作为道具传递给我们的聊天机器人，但没有步骤道具，它将显示一个空白屏幕。

在这个文件中，我们只是创建了一个包含单个对象的步骤数组，该对象的 id 为“0”，消息为“Hey Geek”，并且 end 设置为 true，这意味着这是 chatBot 的结束消息。

文件名： App.js：

Javascript

import ChatBot from 'react-simple-chatbot';
  
const steps = [
    {
        id: '0',
        message: 'Hey Geek!',
        end: true
    }
];
  
function App() {
    return (
        

            
Welcome to Geeksforgeeks
            
        
    );
}
  
export default App;

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：

这就是默认聊天机器人的样子。我们进一步设计并为聊天机器人添加了更多功能。为了给我们的项目提供一个主题，让我们从'styled-components'导入ThemeProvider。

注意： 'styled-components' 与'react-simple-chatbot' 一起安装。

• 我们将创建一个 const 主题，其中包含所有可用于更改聊天机器人样式的道具。之后，我们将 ChatBot 包装在 ThemeProvider 中，将主题作为道具传递。
• 现在要显示聊天机器人图标并更改机器人头像，我们需要创建一个将浮动设置为 true 的配置，以便机器人图标出现在网站上，并且我们在 botAvatar 中设置了图像，我们将配置作为也支持我们的聊天机器人。我们还将 headerTitle 作为道具传递给 ChatBot。

文件名：App.js：

Javascript

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 (
        

            
                
            
        
    );
}
  
export default App;

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：

参考： https://www.npmjs.com/package/react-simple-chatbot