วิธีการสร้าง Chatbot ใน React JS

กำหนดการไหล

ไม่ว่าจะทำอะไร บอทของคุณจะต้องมีโฟลว์ นี่คือตรรกะที่กำหนดพฤติกรรมของบอท 

ในสตูดิโอ คลิก เวิร์กโฟลว์ ในแผงด้านซ้าย

ไม่จำเป็นต้องซับซ้อน โหนดอิสระ เพียงโหนดเดียวที่สามารถเข้าถึงเอกสารของคุณได้ (เช่น บ็อตเริ่มต้น) สามารถให้ผลอย่างมีประสิทธิภาพสูงสุด

การให้คำแนะนำกับบอทถือเป็นสิ่งสำคัญ ซึ่งรวมถึง:

• บุคลิกที่คุณต้องการให้เป็น เช่น สุภาพ เป็นมิตร หรือสะท้อนน้ำเสียงของผู้ใช้
• วิธีการเริ่มต้นหรือสิ้นสุดข้อความ
• วิธีการตอบคำถามเฉพาะ
• เอกสารใดที่ต้องอ้างอิงเมื่อ

เพิ่มฐานความรู้

นี่คือข้อมูลที่บอตจะดึงมาใช้ใน RAG (retrieval-augmented generation) หรือการตอบสนองของบอตต่อข้อมูลของคุณ ซึ่งค่อนข้างตรงไปตรงมา แต่ควรเรียนรู้ วิธีเพิ่มประสิทธิภาพไฟล์ของคุณ เพื่อให้ได้ RAG ที่ดีที่สุด

Wynona ซอมเมลิเยร์ดิจิทัลของฉันสามารถเข้าถึงรายการไวน์ได้ ซึ่งเป็นเพียงส่วนย่อยของชุดข้อมูล Wine Reviews : รายการไวน์พร้อมภูมิภาคและบันทึกการชิม

ใช้

เมื่อคุณพอใจกับบอทของคุณแล้ว ให้กด เผยแพร่ ในสตูดิโอ แล้วบอทของคุณก็จะเริ่มทำงาน

ทำให้สามารถบูรณาการกับช่องทางการสื่อสารทุกประเภท เช่น WhatsApp Telegram และในแอปบนเว็บ เช่นที่เรากำลังสร้าง

วิ่ง สร้างแอปถัดไป

วิ่ง:

npx สร้างแอปถัดไป@14

คุณจะสังเกตเห็นว่าฉันใช้ Next.js 14 เหตุผลก็คือ เราต้องการ React 18 เพื่อให้แชทบอทในแอปของเราเข้ากันได้ การรันด้วย @latest จะสร้างได้ด้วย Next.js 15 และ React 19 การรันคำสั่งด้านบนเป็น วิธีที่ง่ายที่สุด เพื่อให้แน่ใจว่าคุณรัน React เวอร์ชันที่ถูกต้อง และ Next เข้ากันได้

ตั้งค่าการกำหนดค่าแอป

คุณจะได้รับคำถามชุดหนึ่ง ฉันมักจะใช้การตั้งค่าเริ่มต้น ซึ่งเป็นสิ่งที่ฉันจะใช้ในบทช่วยสอนนี้

ถ้าทุกอย่างดำเนินไปอย่างราบรื่น คุณจะเห็นบันทึกความสำเร็จ

รับ Botpress รีแอ็กต์ บอยเลอร์เพลต

เพื่อรวมแชทบอทเข้ากับแอปของเรา เราจะต้อง:

• รหัสลูกค้าของเรา
• ที่สร้างไว้ล่วงหน้า webchat ส่วนประกอบของ React

Botpress มีโค้ดสำเร็จรูปที่รวมทั้งสองอย่างไว้ด้วยกัน วิธีรับโค้ด:

• ไปที่ สตูดิโอ แล้วคลิก แชร์ ที่มุมขวาบน
• ที่ด้านล่างขวาของป๊อปอัป คลิก กำหนดค่า

• คลิกแท็บ React ที่ด้านบนขวา
• ที่นี่คุณจะพบกับ Botpress แบบฟอร์มสำเร็จรูป รวมถึงคำสั่งติดตั้งและรหัสไคลเอนต์

อย่างไรก็ตาม หากคุณต้องการเข้าถึง ID ไคลเอนต์ของคุณอย่างรวดเร็ว ให้ทำดังนี้:

• ไปที่ แดชบอร์ด Botpress ของคุณ
• เลือก Webchat ในแผงด้านข้าง
• คลิก การตั้งค่าขั้นสูง

แนวทางปฏิบัติที่ดีที่สุดคือการเก็บสิ่งนี้ไว้ในตัวแปรสภาพแวดล้อม แต่ตอนนี้เราจะเก็บไว้ในส่วนประกอบ

สร้าง Chat ส่วนประกอบในแอปของคุณ

ฉันจะสร้างไฟล์ chat.tsx ในไดเร็กทอรีโครงการของฉัน

จากนั้นกรอกรหัสสำหรับไคลเอนต์แชทบอท:

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

นี่คือ botpress โค้ดพร้อมการปรับแต่งเล็กน้อยที่น่าสังเกต:

• "ใช้ไคลเอนต์" ที่ด้านบน สำหรับส่วนประกอบที่เกี่ยวข้องกับการจัดการสถานะ
• การเปลี่ยนชื่อฟังก์ชั่นจาก App เป็น Chat
• การจัดแต่งทรงบางอย่าง

ตอนนี้ไปที่ แอป/หน้า.tsx และนำเข้าไว้เหนือส่วนท้าย:

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

ตอนนี้คุณก็สามารถวิ่งได้ npm รัน dev ในเทอร์มินัลในไดเร็กทอรีโครงการเพื่อรันบนเซิร์ฟเวอร์ภายในเครื่อง