Hướng dẫn chi tiết cách tự tạo Chatbot React đơn giản từ A đến Z

<ChatBot/>

Lưu file và chạy lại ứng dụng. Bạn sẽ thấy chatbot xuất hiện ở góc dưới cùng bên phải màn hình.

Bước 3: Thử tạo tin nhắn "Hello World"

Để thay thế tin nhắn chào mừng mặc định, bạn có thể tạo tin nhắn riêng bằng cách sử dụng thuộc tính flow trong component <ChatBot/>. Thuộc tính này xác định nội dung cuộc trò chuyện, điểm bắt đầu luôn là khối start như ví dụ dưới đây:

const flow = {
  "start": {
    "message": "Hello world!"
  }
};

Hãy thêm đoạn mã trên vào component <ChatBot/>:

import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import ChatBot from "react-chatbotify";
import './App.css';

function App() {
  const [count, setCount] = useState(0);
  const flow = {
    "start": {
      "message": "Hello world!"
    }
  };

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
      <ChatBot flow={flow} />
    </>
  );
}

export default App;

Bây giờ, khi chạy lại ứng dụng, bạn sẽ thấy tin nhắn chào mừng đã được thay thế bằng "Hello world!".

Kết luận

Bài viết đã hướng dẫn bạn cách thiết lập chatbot React đơn giản. Mặc dù ví dụ trên khá đơn giản, thư viện React ChatBotify còn cung cấp nhiều thuộc tính khác trong flow giúp bạn xây dựng cuộc trò chuyện phức tạp hơn.

Bạn có thể tìm hiểu thêm về các thuộc tính này và xem các ví dụ trực tiếp trên trang web của thư viện. Cảm ơn các bạn đã theo dõi bài viết.