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 и открыв раскрывающийся список своей учетной записи в правом верхнем углу.
corpusId (обязательно)После создания корпуса вы можете найти его идентификатор, перейдя к корпусу и посмотрев в верхний левый угол рядом с названием корпуса.
apiKey (обязательно)Ключи API позволяют приложениям получать доступ к данным внутри корпораций. Узнайте, как создать ключ API QueryService .
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 }> Это используется для отправки сообщения в API поиска. При успешном поиске возвращается объект, состоящий из массива результатов поиска и необязательной сводки. Каждый результат поиска представляет собой объект 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. Если это не требуется действующим законодательством или не согласовано в письменной форме, программное обеспечение, распространяемое по Лицензии, распространяется на условиях «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ ИЛИ УСЛОВИЙ, явных или подразумеваемых. См. Лицензию для определения конкретного языка, регулирующего разрешения и ограничения в рамках Лицензии.
