react search
Release 1.2.0
React-Search عبارة عن أداة واجهة مستخدم لإضافة بحث دلالي مدعوم من Vectara إلى تطبيقات React الخاصة بك مع بضعة أسطر من التعليمات البرمجية.
نصيحة
تبحث عن شيء آخر؟ جرب مشروعًا آخر مفتوح المصدر:
جرب العرض التوضيحي!
يبدو إدخال البحث كما يلي:
عندما ينقر المستخدم على إدخال البحث، يحصل على مطالبة بحث مثل هذا:
تبدو نتائج البحث كما يلي:
تثبيت React-Search:
npm install --save @vectara/react-searchثم استخدمه في تطبيقك مثل هذا:
import { ReactSearch } from "@vectara/react-search" ;
/* snip */
< ReactSearch
customerId = "CUSTOMER_ID"
corpusId = "CORPUS_ID"
apiKey = "API_KEY"
placeholder = "Search" // Optional search input placeholder
isDeepLinkable = { true } // Optional boolean determining if search results will be deep-linked
openResultsInNewTab = { true } // Optional boolean determining if links will open in a new tab
zIndex = { 1000 } // Optional number assigned to the z-index of the search modal
isSummaryToggleVisible = { true } // Optional boolean determining if users can summarize search results
rerankingConfiguration = { {
rerankerId : 272725718
} }
/ > ; customerId (مطلوب)يرتبط كل حساب Vectara بمعرف العميل. يمكنك العثور على معرف العميل الخاص بك عن طريق تسجيل الدخول إلى Vectara Console وفتح القائمة المنسدلة لحسابك في الزاوية العلوية اليمنى.
corpusId (مطلوب)بعد إنشاء مجموعة نصية، يمكنك العثور على المعرف الخاص بها من خلال الانتقال إلى مجموعة النصوص والبحث في الزاوية العلوية اليسرى، بجوار اسم مجموعة النصوص.
apiKey (مطلوب)تعمل مفاتيح واجهة برمجة التطبيقات (API) على تمكين التطبيقات من الوصول إلى البيانات داخل المجموعة. تعرف على كيفية إنشاء مفتاح QueryService API.
apiUrl (اختياري)افتراضيًا، يرسل React-Search طلبات استعلام إلى خوادم Vectara. إذا كنت تريد استخدام خادم وكيل، فيمكنك تكوين هذا الخيار باستخدام عنوان URL الخاص بالوكيل الخاص بك.
placeholder (اختياري)قم بتكوين نص العنصر النائب في إدخال نموذج البحث.
isDeepLinkable (اختياري) الافتراضيات false . قم بتعيين هذا الخيار إذا كنت تريد استمرار استعلام البحث في معلمة URL. سيؤدي هذا إلى تمكين المستخدمين من مشاركة عنوان URL أو وضع إشارة مرجعية عليه. سيؤدي تحميل عنوان URL إلى فتح نموذج البحث تلقائيًا والبحث عن الاستعلام المُخزن في عنوان URL.
openResultsInNewTab (اختياري) الافتراضيات false . قم بتعيين هذا الخيار إذا كنت تريد فتح نتيجة بحث في علامة تبويب جديدة.
zIndex (اختياري)حدد الفهرس z لشكل البحث.
onToggleSummary (اختياري)يقبل رد اتصال سيتلقى وسيطة منطقية تشير إلى ما إذا كان مفتاح التبديل "تلخيص نتائج البحث" ممكّنًا أم لا.
isSummaryToggleVisible (اختياري)ما إذا كان المستخدمون سيتمكنون من تلخيص نتائج البحث أم لا.
isSummaryToggleInitiallyEnabled (اختياري)إذا كان بإمكان المستخدمين تبديل التلخيص، ما إذا كان يجب تمكين التبديل افتراضيًا.
rerankingConfiguration (اختياري)يحدد أداة إعادة ترتيب نتائج البحث المراد استخدامها، بالإضافة إلى تكوينها. لمزيد من المعلومات، راجع مستنداتنا حول إعادة الترتيب.
تثبيت React-Search:
npm install --save @vectara/react-search ثم استخدم ربط useSearch في تطبيقك مثل هذا:
import { useSearch } from "@vectara/react-search/lib/useSearch" ;
/* snip */
const { fetchSearchResults , isLoading } = useSearch (
"CUSTOMER_ID" ,
"CORPUS_ID" ,
"API_KEY" ,
"API_URL" , // optional
{ rerankerId : 12345 } // optional
) ;يمكن تمرير القيم التي يُرجعها الخطاف إلى مكوناتك المخصصة كدعائم أو استخدامها بأي طريقة تريدها.
async (query: string, summarize: boolean) => Promise<{ searchResults: DeserializedSearchResult[]; summary?: string }> يُستخدم هذا لإرسال رسالة إلى واجهة برمجة تطبيقات البحث. عندما ينجح البحث، يتم إرجاع كائن يتكون من مصفوفة من نتائج البحث وملخص اختياري. كل نتيجة بحث هي كائن DeserializedSearchResult . يمكن العثور على مزيد من المعلومات حول الأنواع هنا.
booleanقيمة منطقية تشير إلى ما إذا كان طلب البحث لا يزال معلقًا أم لا
قد يتطلب استخدام React-Search مع أطر عمل SSR بنية تحتية إضافية. فيما يلي بعض الأخطاء الشائعة:
يقدم React-Search متغير ReactSearchNext المتوافق مع Next.js. فهو يقبل نفس الدعائم التي يقبلها ReactSearch .
يمكن استيراده على النحو التالي:
import { ReactSearchNext } from "@vectara/react-search/lib/ReactSearchNext" ; بالإضافة إلى استخدام هذا المكون المتوافق مع Next.js، ستحتاج أيضًا إلى استخدام توجيه "use client" في الملف الذي يستورد ReactSearchNext .
يقوم React-Search بسحب البيانات من مجموعة Vectara الخاصة بك. لإعداد هذا:
نصيحة احترافية: بعد إنشاء مفتاح API، انتقل إلى مجموعتك وانقر على علامة التبويب "التحكم في الوصول". ابحث عن مفتاح API الخاص بك في الأسفل وحدد خيار "نسخ الكل" لنسخ معرف العميل ومعرف المجموعة ومفتاح API. يمنحك هذا جميع البيانات التي تحتاجها لتكوين مثيل <ReactSearch /> الخاص بك.
يمكّنك Vectara من تحديد البيانات الوصفية في مستنداتك. يتصرف React-Search بشكل مختلف بناءً على وجود حقول بيانات وصفية محددة:
title : إذا تم تعريف هذا الحقل فسيتم عرضه كعنوان لنتيجة البحث. عادةً ما يكون هذا بمثابة عنوان المستند أو صفحة الويب.url : إذا تم تعريف هذا الحقل، فسوف يعرض React-Search نتيجة البحث كرابط إلى عنوان URL المحدد. تأتي قاعدة التعليمات البرمجية هذه مع بيئة تطوير لتسهيل التحسينات وإصلاح الأخطاء. فهو يسمح للمشرفين بتكرار الكود بسرعة والتحقق من التغييرات على الفور.
من الدليل الجذر، قم بتشغيل:
npm install
سيؤدي هذا إلى تثبيت كافة التبعيات اللازمة لبناء المكون وتشغيل بيئة التطوير. بمجرد اكتمال هذا، قم بتشغيل:
npm run docs
يؤدي هذا إلى تشغيل تطبيق يعمل على http://localhost:8080/ . سوف تنعكس أحدث التغييرات الخاصة بك هنا.
بمجرد تشغيل بيئة التطوير، فإن أي تغييرات يتم إجراؤها على ملفات .ts و.tsx في الدليل /src ستؤدي إلى إعادة بناء المكون وإعادة تحميل صفحة الويب.
بالإضافة إلى ذلك، فإن أي تغييرات على الكود المصدري لتطبيق التطوير على /docs/index.tsx ستؤدي أيضًا إلى إعادة البناء + إعادة التحميل.
Vectara React-Search هو برنامج مفتوح المصدر مرخص بموجب ترخيص Apache 2.0.
يحتوي هذا المستودع على نموذج تعليمات برمجية يمكن أن يساعدك في إنشاء واجهات مستخدم مدعومة بواسطة Vectara، وهو مرخص بموجب ترخيص Apache 2.0. ما لم يكن ذلك مطلوبًا بموجب القانون المعمول به أو تم الاتفاق عليه كتابيًا، يتم توزيع البرامج الموزعة بموجب الترخيص على أساس "كما هي"، دون ضمانات أو شروط من أي نوع، سواء كانت صريحة أو ضمنية. راجع الترخيص لمعرفة الأذونات والقيود التي تحكم اللغة المحددة بموجب الترخيص.
