كيفية بناء روبوت محادثة في React JS باحترافية

سواء كان ذلك لحجز المواعيد أو الأسئلة الشائعة أو توصيات المنتجات، يمكن لأي موقع تقريبًا الاستفادة من وكيل ذكاء اصطناعي أو روبوت دردشة.

وهذا ما يحدث بالفعل. مع كون روبوتات الدردشة أسرع قنوات التواصل نموًا للعلامات التجارية، لا يوجد وقت أفضل من الآن للبدء.

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

الخبر الجيد هو أن منصات روبوتات الدردشة توفر لك كل ما تحتاجه. في هذا الدليل سأعطيك الخطوات لـ:

• بناء روبوت دردشة مخصص
• إنشاء موقع باستخدام Next.js وReact
• دمج روبوت الدردشة في واجهة React الأمامية
• تخصيص نمط واجهة روبوت الدردشة

بجهد بسيط، ستحصل على روبوت دردشة احترافي عالي الأداء مدمج بسلاسة في موقع React الخاص بك.

بالمناسبة، يمكنك تخطي الشرح والاطلاع على الكود.

2. بناء روبوت دردشة

ننتقل الآن إلى أول جزء رئيسي: روبوت الدردشة.

لإنشاء روبوت، انتقل إلى الاستوديو واضغط على إنشاء روبوت +.

من المفيد تحديد هدف للروبوت، لكنك لست بحاجة لفكرة متطورة. من المؤكد أن لدى عملك مستندات سياسات أو أسئلة شائعة أو كتالوج منتجات. روبوت دردشة بسيط يمكنه الوصول إلى هذه المعلومات قد يوفر الكثير من الوقت الذي تقضيه في الإجابة على الأسئلة المتكررة.

في حالتي، سأبني مساعدًا رقميًا في مجال النبيذ: روبوت ينصح المستخدمين بأنواع النبيذ التي يمكن شراؤها، مستندًا إلى كتالوج خارجي للنبيذ.

تحديد سير العمل

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

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

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

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

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

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

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

Wynona، مساعدتي الرقمية في مجال النبيذ، لديها إمكانية الوصول إلى قائمة نبيذ. إنها مجرد جزء من مجموعة بيانات مراجعات النبيذ: قائمة بأنواع النبيذ مع مناطقها وملاحظات التذوق الخاصة بها.

النشر

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

وهذا يجعله متاحًا للدمج عبر جميع قنوات التواصل مثل واتساب، تيليجرام، وفي تطبيقات الويب مثل التطبيق الذي نقوم ببنائه.

2. إنشاء تطبيق React

لدينا روبوت دردشة، لكنه يحتاج إلى موطن، لذا دعنا نبني تطبيق React سريع يمكن للمستخدمين من خلاله التفاعل مع الروبوت.

لاحظ أنني سأستخدم Next.js. أعتقد أنه أكثر ملاءمةً واكتمالاً من React العادي، وهذا الشرح سيغطي كل ما يحتاجه مستخدمو React.

تشغيل create-next-app

قم بتشغيل:

npx create-next-app@14

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

ضبط إعدادات التطبيق

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

إذا سار كل شيء بسلاسة، سترى سجل النجاح.

3. دمج روبوت الدردشة في تطبيق React الخاص بك

حان الوقت لجعل باربياتنا تتبادل القبلات.

الحصول على نموذج Botpress React الجاهز

لدمج روبوت الدردشة في تطبيقنا، سنحتاج إلى:

• معرّف العميل الخاص بنا
• مكونات React الجاهزة لمحادثة الويب.

يوفر Botpress كودًا جاهزًا يتضمن كليهما. للحصول عليه:

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

• اضغط على علامة تبويب React في أعلى اليمين.
• ستجد هنا نموذج Botpress الجاهز، بما في ذلك أمر التثبيت ومعرّف العميل

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

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

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

إنشاء مكون دردشة في تطبيقك

في مجلد مشروعي، سأقوم بإنشاء ملف 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 مع بعض التعديلات الملحوظة:

• "use client" في الأعلى، للمكونات التي تتعامل مع إدارة الحالة
• تغيير اسم الدالة من App إلى 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 run dev في الطرفية داخل مجلد المشروع لتشغيله على خادم محلي.

تشغيل تطبيق React بواسطة روبوت دردشة

مع أطر الويب القوية، تكون منشغلاً بالوظائف الأساسية ولا تقلق بشأن الإضافات.

يأتي Botpress مع مكونات جاهزة، ومحرر بصري بالسحب والإفلات، وقابلية تخصيص كاملة. التكامل البسيط لا يأتي على حساب الأداء.

إذا كنت تبني باستخدام React، فأنت تبحث عن الجودة. يجب أن يعكس روبوت الدردشة ذلك.

ابدأ البناء اليوم. إنه مجاني.

الأسئلة الشائعة

1. هل يمكنني نشر روبوت الدردشة هذا في بيئة الإنتاج؟

نعم، يمكنك نشر روبوت الدردشة في بيئة الإنتاج بعد نشره في Botpress Studio ودمجه في تطبيق React الخاص بك. بعد الدمج، يمكنك نشر التطبيق بالكامل باستخدام منصات مثل Vercel أو أي مزود استضافة يدعم تقنيتك.

2. هل يمكنني تخصيص مظهر واجهة روبوت الدردشة؟

نعم، يمكنك تخصيص مظهر واجهة روبوت الدردشة بالكامل باستخدام مكون Botpress Webchat. يدعم خصائص للألوان والحجم والموقع والتنسيق، ويمكنك تجاوز الأنماط الافتراضية باستخدام CSS مخصص ليتناسب مع تصميم علامتك التجارية.

3. هل يجب أن أعرّف شخصية للروبوت، وكيف يؤثر ذلك على المحادثات؟

نعم، من المهم تعريف شخصية للروبوت لأنها توجه طريقة تواصله، بما في ذلك النبرة والأسلوب. هذا يضمن أن تتماشى المحادثة مع صوت علامتك التجارية ويعزز ثقة المستخدم.

4. ما هو هدف سير عمل روبوت الدردشة، وكيف يمكنني تعريفه؟

هدف سير عمل روبوت الدردشة هو التحكم في منطق استجابة الروبوت للمستخدمين. في Botpress، يمكنك تعريف سير العمل بصريًا في علامة تبويب "سير العمل" باستخدام عقد للإجراءات والرسائل والشروط والانتقالات.

5. هل يمكنني استخدام مستنداتي الحالية (مثل الأسئلة الشائعة أو كتالوجات المنتجات) لتدريب الروبوت؟

نعم، يمكنك رفع مستنداتك الحالية مثل الأسئلة الشائعة أو الأدلة إلى قاعدة معرفة Botpress. يستخدم الروبوت تقنية التوليد المعزز بالاسترجاع (RAG) للإجابة على الأسئلة من خلال سحب المعلومات ذات الصلة مباشرة من تلك المستندات.