React.js ライブラリ「react-simple-chatbot」を使用してchatbotを実装する

create-react-app react-app

## 作成したプロジェクトに移動
cd react-app
 
## インストール
npm install react-simple-chatbot

import React from 'react';
import ChatBot from 'react-simple-chatbot';

export const Sample = () => {
    return (
        <ChatBot
        headerTitle="チャットbot"
        recognitionEnable={true}
        steps={[
            {
            id: '1',
            message: 'お名前は?',
            trigger: '2',
            },
            {
            id: '2',
            user: true,
            trigger: '3',
            },
            {
            id: '3',
            message: '{previousValue}さん,はじめまして!',
            end: true,
            },
        ]}
        />
    )
}
  
export default Sample

import React from 'react';
import Sample from './sample';
import './App.css';

function App() {
  const style = {
    width: "50%",
    margin: "0 auto",
    marginTop: 150
  };
  return (
    <div className="App">
      <div style={style}>
        <Sample />
      </div>
    </div>
  );
}

export default App;

npm start