Cara Membina Chatbot dalam React JS

Tentukan aliran

Tidak kira apa yang dilakukannya, bot anda memerlukan aliran. Inilah logik yang menentukan tingkah laku bot. 

Di studio, tekan Workflows di panel kiri.

Ia tidak perlu rumit. Satu nod autonomi dengan akses kepada dokumen anda, (iaitu bot lalai), boleh menjadi sangat berkesan.

Adalah penting untuk memberikan arahan kepada bot. Ini termasuk:

• Persona yang anda mahu pakai, cth sopan, mesra atau mencerminkan nada pengguna
• Cara untuk memulakan atau menamatkan mesej
• Cara menjawab pertanyaan tertentu
• Dokumen mana yang perlu dirujuk apabila

Tambah Pangkalan Pengetahuan

Ini ialah maklumat yang akan diambil oleh bot untuk RAG (generasi dipertingkatkan semula) , atau memenuhi responsnya kepada data anda. Ini agak mudah, tetapi ia berbaloi untuk mempelajari cara mengoptimumkan fail anda untuk RAG yang terbaik.

Wynona, sommelier digital saya(-ère?) mempunyai akses kepada senarai wain. Ia hanyalah subset set data Ulasan Wain : senarai wain dengan kawasan dan nota rasanya.

Menggunakan

Setelah anda berpuas hati dengan bot anda, tekan Terbitkan dalam studio dan bot anda disiarkan secara langsung.

Ini menjadikannya tersedia untuk penyepaduan merentas semua jenis saluran komunikasi, seperti WhatsApp , Telegram , dan dalam apl web, seperti yang sedang kami bina.

Lari create-next-app

Jalankan:

npx create-next-app@14

Anda akan perasan saya menggunakan Next.js 14. Sebabnya ialah kami memerlukan React 18 untuk menjadikan chatbot aplikasi kami serasi. Menjalankan dengan @latest akan membina dengan Next.js 15 dan React 19. Menjalankan arahan di atas ialah cara paling mudah untuk memastikan anda menjalankan versi React yang betul dan Next adalah serasi.

Tetapkan konfigurasi apl

Anda akan digesa dengan beberapa siri soalan. Saya secara peribadi tetap dengan tetapan lalai, yang akan saya lakukan untuk tutorial ini.

Dengan mengandaikan semuanya berjalan lancar, anda akan melihat log kejayaan.

Dapatkan Botpress React Boilerplate

Untuk menyepadukan chatbot ke dalam apl kami, kami memerlukan:

• ID pelanggan kami
• Yang terbina webchat Komponen bertindak balas.

Botpress mempunyai kod boilerplate yang merangkumi kedua-duanya. Untuk mendapatkannya:

• Navigasi ke studio , dan klik Kongsi di penjuru kanan sebelah atas.
• Di bahagian bawah sebelah kanan pop timbul, klik Konfigurasikan

• Klik tab React di bahagian atas sebelah kanan.
• Di sini anda akan menemui Botpress boilerplate, termasuk arahan pemasangan ID pelanggan

Ngomong-ngomong, jika anda memerlukan akses pantas kepada ID pelanggan anda:

• Pergi ke papan pemuka Botpress anda
• Pilih Webchat dalam panel sisi
• Klik Tetapan Lanjutan

Amalan terbaik untuk menyimpan ini dalam pembolehubah persekitaran, tetapi kami akan menyimpannya dalam komponen buat masa ini.

Buat a Chat Komponen dalam Apl anda

Dalam direktori projek saya, saya akan mencipta fail chat.tsx.

Kemudian isi dengan kod untuk pelanggan 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>
   );
}

Ini adalah botpress kod dengan beberapa tweak yang ketara:

• "gunakan pelanggan" di bahagian atas, bagi komponen yang berurusan dengan pengurusan negeri
• Menamakan semula fungsi daripada Apl kepada Chat
• Beberapa penggayaan

Sekarang navigasi ke app/page.tsx dan importnya tepat di atas pengaki:

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>
 );
}

Sekarang anda boleh berlari npm run dev dalam terminal dalam direktori projek untuk menjalankannya pada pelayan tempatan.