تُقدِّم إصدارة CopilotKit الجديدة 1.0 ميزة واجهة مستخدم توليدية أنيقة تسمح لك بعرض مكونات React مخصصة بالكامل ضمن واجهة الدردشة. هذه القدرة القوية تمكّن من دمج الوظائف المدعومة بالذكاء الاصطناعي بسلاسة في تجربة المستخدم لتطبيقك.

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

تُبنى الواجهة المستخدم التوليدية على بروتوكولات مستندة إلى GraphQL في CopilotKit، والتي توفر طريقة مرنة وفعالة لمعالجة حقول الإدخال والإخراج. يضمن هذا التكامل أن المكونات المولَّدة يمكنها التواصل مع وقت تشغيل CopilotKit في الوقت الفعلي، مما يُمكّن من التحديثات الديناميكية والتفاعلات الاستجابية.

يمكن للمطورين الاستفادة من خطافات مجموعة أدوات React الجديدة، مثل خطاف useCopilotAction، للتفاعل مباشرة مع CopilotKit ضمن تطبيقاتهم. هذا يسمح بتكامل وثيق بين حالة التطبيق والوظائف المدعومة بالذكاء الاصطناعي، مما يخلق تجربة مستخدم سلسة.

علاوة على ذلك، يُحسِّن خطاف useCopilotReadable اتصال حالة التطبيق، مما يضمن نقل البيانات الفعال بين الواجهة الأمامية ووقت تشغيل CopilotKit. تساعد هذه الميزة على الحفاظ على الأداء والاستجابة العالية، حتى في التطبيقات المعقدة والقائمة على البيانات.

بشكل عام، تُمثِّل الواجهة المستخدم التوليدية الأنيقة في إصدار CopilotKit 1.0 تقدمًا كبيرًا في دمج المساعدين المدعومين بالذكاء الاصطناعي في تجارب المنتج. يمكن للمطورين الآن إنشاء مكونات جذابة بصريًا وتفاعلية تستفيد من قوة CopilotKit، مما يعزز تجربة المستخدم الشاملة ويدفع الابتكار في تطبيقاتهم.

يُقدِّم الإصدار الأحدث من CopilotKit، الإصدار 1.0، تحسينًا كبيرًا مع دمج البروتوكولات المستندة إلى GraphQL. تتيح هذه الميزة الجديدة للمطورين الاستفادة من قوة GraphQL للاتصال السلس بين وقت تشغيل CopilotKit وتطبيقاتهم.

تشمل أبرز نقاط التكامل مع GraphQL ما يلي:

1. واجهة برمجة تطبيقات GraphQL: يستخدم وقت تشغيل CopilotKit الجديد واجهة برمجة تطبيقات GraphQL، مما يُمكِّن المطورين من الاستفادة من مرونة وكفاءة GraphQL لمتطلبات بيانات تطبيقاتهم.

2. حقول الإدخال والإخراج: تدعم واجهة برمجة تطبيقات GraphQL كلاً من حقول الإدخال والإخراج، وهي أمور حاسمة لبناء التطبيقات التي تعمل في الوقت الفعلي والتي تتطلب تبادل بيانات ديناميكي.

3. بث البيانات: يمكن للمطورين الآن بث البيانات بشكل مستقل باستخدام واجهة برمجة تطبيقات GraphQL، مما يسمح بتحديثات البيانات الفعالة والاستجابية ضمن تطبيقاتهم.

تُمكِّن هذه البروتوكولات الجديدة المستندة إلى GraphQL في CopilotKit المطورين من دمج مساعدي Copilot المدعومين بالذكاء الاصطناعي في منتجاتهم بمزيد من السهولة والمرونة. من خلال الاستفادة من مزايا GraphQL، يمكن للمطورين تحسين اتصال حالة التطبيق وتعزيز تجربة المستخدم الشاملة لتطبيقاتهم المدعومة بالذكاء الاصطناعي.

يوفر CopilotKit مجموعة من خطافات مجموعة أدوات React القوية التي تسمح لك بدمج القدرات المدعومة بالذكاء الاصطناعي في تطبيقك بسلاسة. تُمكِّن هذه الخطافات التفاعل المباشر بين تطبيقك ووقت تشغيل CopilotKit، مما يجعل من السهل الاستفادة من إمكانات المنصة بالكامل.

تشمل الخطافات الرئيسية التي يقدمها CopilotKit ما يلي:

1. useCopilotReadable: يسمح هذا الخطاف بتوفير السياق الأمامي إلى محرك CopilotKit، مما يُمكِّن المساعد المدعوم بالذكاء الاصطناعي من فهم الحالة الحالية لتطبيقك. يمكنك تمرير هياكل البيانات، مثل بيانات الجدول الحالية، وربطها بوسوم محددة لكي يفهمها CopilotKit.

2. useCopilotAction: يُمكِّن هذا الخطاف CopilotKit من اتخاذ إجراءات ضمن تطبيقك. يمكنك تعريف الإجراءات، مثل اقتراح تجاوزات الجدول، وتمرير المعلمات اللازمة. يوفر الخطاف كلاً من دالة العرض ودالة المعالج، مما يسمح لك بتخصيص واجهة المستخدم وسلوك الإجراء.

3. useCopilotChatSuggestion: يُنشئ هذا الخطاف اقتراحات الدردشة بناءً على الحالة الحالية لتطبيقك، مما يسمح للمساعد المدعوم بالذكاء الاصطناعي بتقديم توصيات سياقية للمستخدم.

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

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

خطاف CopilotReadable هو أداة قوية يوفرها إطار عمل Copilot Kit والتي تسمح لك بتحسين الاتصال بين تطبيقك ومحرك Copilot. يُمكِّن هذا الخطاف من نقل المعلومات بسلاسة من الواجهة الأمامية إلى محرك Copilot، مما يضمن أن المساعد المدعوم بالذكاء الاصطناعي لديه السياق اللازم لتقديم استجابات دقيقة وذات صلة.

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

خطاف CopilotReadable مرن للغاية، مما يسمح لك بتمرير البيانات بتنسيقات مختلفة، بما في ذلك مخططات JSON. هذا يضمن انتشار الأنواع بالكامل في قاعدة الشفرة الخاصة بك، مما يجعل من السهل العمل مع تكامل Copilot وتقليل مخاطر الأخطاء.

بشكل عام، يُعد خطاف CopilotReadable مكونًا حاسمًا من إطار عمل Copilot Kit، مما يُمكِّنك من تحسين الاتصال بين تطبيقك ومساعد الذكاء الاصطناعي، مما ينتج عنه تكامل أكثر سلاسة وفعالية لقدرات Copilot ضمن منتجك.

خطاف useCopilotChat هو ميزة قوية تم تقديمها في إصدار Copilot Kit 1.0. يسمح هذا الخطاف بتوليد اقتراحات دردشة ذكية بناءً على حالة التطبيق الحالية، مما يُمكِّن مستخدميك من التفاعل بسرعة وسهولة مع تطبيقك المدعوم بالذكاء الاصطناعي.

فيما يلي كيفية الاستفادة من خطاف useCopilotChat:

1. استيراد الخطاف: ابدأ بتوريد خطاف useCopilotChat من مكتبة Copilot Kit.

import { useCopilotChat } from '@copilot-kit/react';

2. استخدام الخطاف في مكونك: في مكونك، اتصل بخطاف useCopilotChat وأرسل أي حالة تطبيق أو سياق ذي صلة تريد أن يأخذها الذكاء الاصطناعي في الاعتبار عند توليد الاقتراحات.

const { chatSuggestions, generateChatSuggestion } = useCopilotChat({
  currentUserMessage: userMessage,
  conversationHistory: conversationLog,
  productDetails: productInfo,
});

3. عرض اقتراحات الدردشة: استخدم chatSuggestions المُرجَعة من الخطاف لعرض الاقتراحات المولَّدة بواسطة الذكاء الاصطناعي في واجهة المستخدم الخاصة بك. يمكنك عرض هذه الاقتراحات كأزرار أو روابط أو أي عناصر واجهة مستخدم تفاعلية أخرى.

return (
  <div>
    {chatSuggestions.map((suggestion, index) => (
      <button key={index} onClick={() => handleSuggestionClick(suggestion)}>
        {suggestion.text}
      </button>
    ))}
  </div>
);

4. التعامل مع تفاعلات المستخدم: عندما يحدد المستخدم اقتراحًا، يمكنك الاتصال بدالة generateChatSuggestion المقدمة من