https://github.com/LucasBassetti/react-simple-chatbot
https://lucasbassetti.com.br/react-simple-chatbot/
https://lucasbassetti.com.br/react-simple-chatbot/#/docs/hello-world
https://lucasbassetti.com.br/react-simple-chatbot/#/docs/speech-recognition
DOS> cd hello
DOS> npm install styled-components --save
+ styled-components@5.0.1
added 12 packages from 10 contributors and audited 921154 packages in 57.533s
DOS> npm i react-simple-chatbot --save
+ react-simple-chatbot@0.6.1
added 159 packages from 124 contributors and audited 2238 packages in 76.088s
DOS> notepad src/index.js
DOS> notepad public/index.html
DOS> npm start
DOS> npm run build
DOS> heroku login
DOS> git add .
DOS> git commit -m "react-create-app on Heroku" (เพียง 5 แฟ้ม เฉพาะที่ปรับ)
DOS> git push heroku master
DOS> heroku open
DOS> notepad public/index.html
<!DOCTYPE html><html><head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<title>React Simple ChatBot</title>
</head><body><div id="root"></div><script src="bundle.js"></script></body>
</html>
DOS> notepad src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import ChatBot from 'react-simple-chatbot';
const steps = [
{id: '1',message: 'Hello World! From Fulk CS-NTU Lampang. What is your name?', trigger: '2',},
{id: '2',user: true,trigger: '3',},
{id: '3',message: 'Hi {previousValue}, nice to meet you!',trigger: '4',},
{id: '4',message: 'Please type a number',trigger: '5',},
{id: '5',user: true,validator: (value) => {
if (isNaN(value)) {return 'value should be a number';}
return true;
},trigger: '4',},
];
ReactDOM.render(<div><ChatBot steps={steps} /></div>,document.getElementById('root'));
