كيفية إنشاء Chatbot في React JS

تحديد التدفق

بغض النظر عما يفعله، سيحتاج الروبوت الخاص بك إلى تدفق. هذا هو المنطق الذي يحدد سلوك الروبوت. 

في الاستوديو، اضغط على سير العمل في اللوحة اليسرى.

لا يجب أن يكون الأمر معقداً. يمكن أن تكون عقدة واحدة مستقلة ذاتية الوصول إلى مستنداتك، (أي الروبوت الافتراضي)، فعالة للغاية.

من المهم إعطاء تعليمات للروبوت. وهذا يشمل:

• الشخصية التي ترغب في أن يتبناها المستخدم، على سبيل المثال أن تكون مهذبة أو ودودة أو تعكس نبرة المستخدم
• طرق بدء الرسالة أو إنهائها
• كيفية الرد على استفسارات معينة
• المستندات التي يجب الرجوع إليها عند

إضافة قاعدة المعرفة

هذه هي المعلومات التي سيعتمد عليها الروبوت في توليد RAG (التوليد المعزز للاسترجاع)، أو تلبية استجاباته لبياناتك. هذا أمر بسيط نسبيًا، لكن الأمر يستحق تعلُّم كيفية تحسين ملفاتك للحصول على أفضل توليد معزز للاسترجاع.

Wynona، الساقي الرقمي (-ère؟) لديه إمكانية الوصول إلى قائمة النبيذ. إنها مجرد مجموعة فرعية من مجموعة بيانات مراجعات النبيذ: قائمة بالنبيذ مع مناطقها وملاحظات التذوق.

النشر

بمجرد أن تكون راضيًا عن الروبوت الخاص بك، اضغط على نشر في الاستوديو وسيصبح روبوتك مباشرًا.

وهذا يجعلها متاحة للتكامل عبر جميع أنواع قنوات التواصل، مثل WhatsAppTelegram وفي تطبيقات الويب، مثل التطبيق الذي نقوم ببنائه.

تشغيل إنشاء-التطبيق التالي

اركض:

npx إنشاء-التطبيق التالي@14

ستلاحظ أنني أستخدم Next.js 14. والسبب هو أننا نحتاج إلى React 18 لجعل تطبيقنا متوافقًا مع chatbot . سيؤدي التشغيل باستخدام @latest إلى إنشاء Next.js 15 و React 19. إن تشغيل الأمر أعلاه هو أسهل طريقة للتأكد من تشغيل الإصدار الصحيح من React، وأن Next متوافق.

تعيين تكوينات التطبيق

ستتم مطالبتك بسلسلة من الأسئلة. أنا شخصياً ألتزم بالإعدادات الافتراضية، وهو ما سأفعله في هذا البرنامج التعليمي.

بافتراض أن كل شيء يسير بسلاسة، سترى سجل النجاح.

احصل على قالب Botpress React Boilerplate

لدمج chatbot في تطبيقنا، سنحتاج إلى

• هوية العميل
• مكوِّنات React المبنية مسبقًا على webchat React.

يحتوي Botpress على كود برمجي يتضمن كلا الأمرين. للحصول عليه

• انتقل إلى الاستوديو، وانقر فوق مشاركة في الزاوية العلوية اليمنى.
• في أسفل يمين النافذة المنبثقة، انقر فوق تهيئة

• انقر على علامة التبويب تفاعل في أعلى اليمين.
• ستجد هنا نموذج Botpress المتكامل، بما في ذلك أمر التثبيت معرف العميل

بالمناسبة، إذا احتجت في أي وقت الوصول السريع إلى معرف العميل الخاص بك:

• انتقل إلى لوحة تحكمBotpress الخاصة بك
• حدد Webchat في اللوحة الجانبية
• انقر فوق إعدادات متقدمة

من الأفضل تخزين ذلك في متغير بيئة، ولكننا سنحتفظ به في المكوّن في الوقت الحالي.

إنشاء مكون Chat في تطبيقك

في دليل المشروع الخاص بي، سأقوم بإنشاء ملف chat.tsx.

ثم املأه بالرمز الخاص بعميل 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>
   );
}

هذا هو كود botpress مع بعض التعديلات الملحوظة:

• "استخدام العميل" في الأعلى للمكونات التي تتعامل مع إدارة الحالة
• إعادة تسمية الوظيفة من تطبيق إلى Chat
• بعض التصفيف

انتقل الآن إلى app/page.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 ديف في محطة طرفية في دليل المشروع لتشغيله على خادم محلي.