Cách xây dựng Chatbot trong React JS

Xác định luồng

Bất kể nó làm gì, bot của bạn sẽ cần một luồng. Đây là logic quyết định hành vi của bot. 

Trong studio, nhấn vào Quy trình làm việc ở bảng bên trái.

Không cần phải phức tạp. Một nút tự động duy nhất có quyền truy cập vào tài liệu của bạn (tức là bot mặc định) có thể cực kỳ hiệu quả.

Điều quan trọng là phải cung cấp hướng dẫn cho bot. Bao gồm:

• Tính cách mà bạn muốn nó áp dụng, ví dụ như lịch sự, thân thiện hoặc phản ánh giọng điệu của người dùng
• Cách bắt đầu hoặc kết thúc tin nhắn
• Cách trả lời các câu hỏi cụ thể
• Tài liệu nào cần tham khảo khi

Thêm Cơ sở kiến thức

Đây là thông tin mà bot sẽ sử dụng cho RAG (retrieval-augmented generation) hoặc cung cấp phản hồi cho dữ liệu của bạn. Điều này tương đối đơn giản, nhưng bạn nên tìm hiểu cách tối ưu hóa tệp của mình để có RAG tốt nhất có thể.

Wynona, chuyên gia nếm rượu kỹ thuật số của tôi (-ère?) có quyền truy cập vào danh sách rượu vang. Đây chỉ là một tập hợp con của bộ dữ liệu Đánh giá rượu : danh sách các loại rượu vang cùng với vùng sản xuất và ghi chú nếm thử.

Triển khai

Khi đã hài lòng với bot của mình, hãy nhấn Xuất bản trong studio và bot của bạn sẽ hoạt động.

Điều này giúp nó có thể tích hợp trên tất cả các loại kênh truyền thông, như WhatsApp , Telegram và trong các ứng dụng web, như ứng dụng chúng tôi đang xây dựng.

Chạy tạo-ứng-dụng-tiếp-theo

Chạy:

npx tạo-ứng-dụng-tiếp-theo@14

Bạn sẽ thấy tôi đang sử dụng Next.js 14. Lý do là chúng ta cần React 18 để chatbot ứng dụng của chúng ta tương thích. Chạy với @latest sẽ xây dựng với Next.js 15 và React 19. Chạy lệnh trên là cách dễ nhất để đảm bảo bạn chạy đúng phiên bản React và Next tương thích.

Thiết lập cấu hình ứng dụng

Bạn sẽ được nhắc nhở bằng một loạt các câu hỏi. Cá nhân tôi sẽ sử dụng các thiết lập mặc định, đó là những gì tôi sẽ làm cho hướng dẫn này.

Giả sử mọi việc diễn ra suôn sẻ, bạn sẽ thấy nhật ký thành công.

Nhận được Botpress Phản ứng mẫu

Để tích hợp chatbot vào ứng dụng của chúng tôi, chúng tôi sẽ cần:

• ID khách hàng của chúng tôi
• Được xây dựng sẵn webchat Các thành phần phản ứng.

Botpress có mã mẫu bao gồm cả hai. Để có được nó:

• Điều hướng đến studio và nhấp vào Chia sẻ ở góc trên bên phải.
• Ở góc dưới bên phải của cửa sổ bật lên, nhấp vào Cấu hình

• Nhấp vào tab React ở góc trên bên phải.
• Ở đây bạn sẽ tìm thấy Botpress mẫu, bao gồm lệnh cài đặt ID máy khách

Nhân tiện, nếu bạn cần truy cập nhanh vào ID khách hàng của mình:

• Đi đến bảng điều khiển Botpress của bạn
• Lựa chọn Webchat trong bảng điều khiển bên
• Nhấp vào Cài đặt nâng cao

Cách tốt nhất là lưu trữ thông tin này trong một biến môi trường, nhưng hiện tại chúng ta sẽ giữ nó trong thành phần.

Tạo một Chat Thành phần trong ứng dụng của bạn

Trong thư mục dự án của mình, tôi sẽ tạo một tệp chat.tsx.

Sau đó điền mã cho máy khách chatbot:

"use client"
import { useState } from 'react';


import {
   Webchat,
   WebchatProvider,
   Fab,
   getClient,
   Configuration,
} from '@botpress/webchat';


const clientId = "";


const configuration: Configuration = {
   color: '#000',
};


export default function Chat() {
   const client = getClient({
       clientId,
   });


   const [isWebchatOpen, setIsWebchatOpen] = useState(false);


   const toggleWebchat = () => {
       setIsWebchatOpen((prevState) => !prevState);
   };


   return (
       <div
           style={{
               position: 'fixed',
               display: 'flex',
               flexDirection: 'column',
               bottom: 0,
               right: 0,
               alignItems: 'flex-end',
               gap: '12px',
               padding: '24px', // give some breathing room
               zIndex: 9999,
           }}
       >
           <WebchatProvider client={client} configuration={configuration}>


               <div
                   style={{
                       // position: '',
                       marginTop: '12px',
                       marginBottom: '72px',
                       width: '350px',
                       maxHeight: '500px',
                       overflow: 'scroll',
                       borderRadius: '16px',
                       backgroundColor: '#fff',
                       transform: isWebchatOpen ? 'scale(1)' : 'scale(0)',
                       transformOrigin: 'bottom right',
                       transition: 'transform 0.3s ease-in-out',
                   }}
               >
                   <Webchat />
               </div>
               <Fab onClick={toggleWebchat} style={{ position: 'absolute', bottom: '24px', right: '24px' }} />
           </WebchatProvider>
       </div>
   );
}

Đây là botpress mã với một vài điều chỉnh đáng chú ý:

• "sử dụng máy khách" ở trên cùng, cho các thành phần liên quan đến quản lý trạng thái
• Đổi tên chức năng từ Ứng dụng thành Chat
• Một số kiểu dáng

Bây giờ hãy điều hướng đến ứng dụng/trang.tsx và nhập nó ngay phía trên chân trang:

import Image from "next/image";
import styles from "./page.module.css";
import Chat from "./chat";


export default function Home() {
 return (
   <div className={styles.page}>
     <main className={styles.main}>
      
       <Image
         className={styles.logo}
         src="https://nextjs.org/icons/next.svg"
         alt="Next.js logo"
         width={180}
         height={38}
         priority
       />
       <ol>
         <li>
           Get started by editing <code>app/page.tsx</code>.
         </li>
         <li>Save and see your changes instantly.</li>
       </ol>


       <div className={styles.ctas}>
         <a
           className={styles.primary}
           href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
         >
           <Image
             className={styles.logo}
             src="https://nextjs.org/icons/vercel.svg"
             alt="Vercel logomark"
             width={20}
             height={20}
           />
           Deploy now
         </a>
         <a
           href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
           className={styles.secondary}
         >
           Read our docs
         </a>
       </div>
      
     </main>
     <Chat/>
     <footer className={styles.footer}>
       <a
         href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/file.svg"
           alt="File icon"
           width={16}
           height={16}
         />
         Learn
       </a>
       <a
         href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/window.svg"
           alt="Window icon"
           width={16}
           height={16}
         />
         Examples
       </a>
       <a
         href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/globe.svg"
           alt="Globe icon"
           width={16}
           height={16}
         />
         Go to nextjs.org →
       </a>
     </footer>
   </div>
 );
}

Bây giờ bạn có thể chạy npm chạy dev trong một thiết bị đầu cuối trong thư mục dự án để chạy nó trên máy chủ cục bộ.