react search
Release 1.2.0
React-Search เป็นวิดเจ็ต UI สำหรับเพิ่มการค้นหาความหมายที่ขับเคลื่อนโดย 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 ทุกบัญชีเชื่อมโยงกับรหัสลูกค้า คุณสามารถค้นหา ID ลูกค้าของคุณได้โดยการลงชื่อเข้าใช้ Vectara Console และเปิดเมนูแบบเลื่อนลงบัญชีของคุณที่มุมขวาบน
corpusId (จำเป็น)หลังจากที่คุณสร้างคลังข้อมูล คุณสามารถค้นหา ID ได้โดยไปที่คลังข้อมูลและดูที่มุมซ้ายบน ถัดจากชื่อคลังข้อมูล
apiKey (จำเป็น)คีย์ API ช่วยให้แอปพลิเคชันสามารถเข้าถึงข้อมูลภายใน Corpora เรียนรู้วิธีสร้างคีย์ 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
) ;ค่าที่ส่งคืนโดย hook สามารถส่งผ่านไปยังส่วนประกอบที่คุณกำหนดเองเป็นอุปกรณ์ประกอบฉากหรือใช้ในลักษณะใดก็ได้ที่คุณต้องการ
async (query: string, summarize: boolean) => Promise<{ searchResults: DeserializedSearchResult[]; summary?: string }> ใช้เพื่อส่งข้อความไปยัง API การค้นหา เมื่อการค้นหาสำเร็จ ออบเจ็กต์ที่ประกอบด้วยอาร์เรย์ของผลการค้นหาและข้อมูลสรุปที่เป็นตัวเลือกจะถูกส่งกลับ ผลลัพธ์การค้นหาแต่ละรายการเป็นอ็อบเจ็กต์ DeserializedSearchResult ข้อมูลเพิ่มเติมเกี่ยวกับประเภทต่างๆ สามารถพบได้ที่นี่
booleanค่าบูลีนที่ระบุว่าคำขอค้นหายังคงค้างอยู่หรือไม่
การใช้ React-Search กับเฟรมเวิร์ก SSR อาจต้องใช้โครงสร้างพื้นฐานเพิ่มเติม นี่คือ gotchas ทั่วไปบางส่วน:
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
พื้นที่เก็บข้อมูลนี้มีโค้ดตัวอย่างที่สามารถช่วยคุณสร้าง UI ที่ขับเคลื่อนโดย Vectara และได้รับอนุญาตภายใต้ Apache 2.0 License เว้นแต่กฎหมายที่ใช้บังคับกำหนดหรือตกลงเป็นลายลักษณ์อักษร ซอฟต์แวร์ที่เผยแพร่ภายใต้ใบอนุญาตนี้จะถูกแจกจ่าย "ตามที่เป็น" โดยไม่มีการรับประกันหรือเงื่อนไขใดๆ ทั้งโดยชัดแจ้งหรือโดยนัย ดูใบอนุญาตสำหรับภาษาเฉพาะที่ควบคุมการอนุญาตและข้อจำกัดภายใต้ใบอนุญาต
