UNPKG

trieve-search-component

Version:

The easiest way to get up and running in your app using trieve search.

203 lines (152 loc) 10.7 kB
## Trieve Search Component The easiest way to get up and running in your app using trieve search. ## How to use Install using your favorite package manager: ``` yarn add trieve-search-component # or npm install trieve-search-component # or pnpm install trieve-search-component ``` After installing the first step is to instantiate a new `TrieveSDK` like so: ```ts import { TrieveSDK } from "trieve-ts-sdk"; export const trieve = new TrieveSDK({ apiKey: "<your-api-key>", datasetId: "<dataset-to-use>", }); ``` And then you can use any of the two components in your React application or as web component: ### Search Modal <details> <summary>Screenshots</summary> ![light closed](./github/modal-light-1.png) ![dark closed](./github/modal-dark-1.png) ![light open](./github/modal-light-2.png) </details> #### Usage in React: ```jsx <TrieveModalSearch trieve={trieve} /> ``` #### Usage in Web Components: ```js initModalSearch({ trieve: new TrieveSDK({ // your options }) }) <trieve-modal-search /> ``` If you are using it in JSX environment you will need to add the `trieve-modal-search` to the JSX attributes, for solid that would be: ```typescript declare module "solid-js" { namespace JSX { interface IntrinsicElements { "trieve-modal-search": {}; "trieve-search": {}; } } } ``` #### Props | Name | Type | Default | | -------------------------- | ---------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | | datasetId | string | '' | | apiKey | string | '' | | baseUrl | string | "https://api.trieve.ai" | | type | "docs" | "ecommerce" | | useGroupSearch | boolean | false | | chat | boolean | true | | analytics | boolean | true | | placeholder | string | "Search..." | | onResultClick | () => void | () => {} | | theme | "light" or "dark" | "light" | | searchOptions | [AutocompleteReqPayload](https://ts-sdk.trieve.ai/types/types_gen.AutocompleteReqPayload.html) | `{ search_type: "fulltext" }` | | openKeyCombination | { key?: string; label?: string; ctrl?: boolean }[] | [{ ctrl: true }, { key: "k", label: "K" }] | | tags | { tag: string; label?: string; selected? boolean; iconClassName?: string }[] | [{tag: "docs", label: "dev docs", iconClassName: "fa-solid fa-info"}] | | inline | boolean | true | | inlineHeader | string | "" | | initialAiMessage | string | "" | | ButtonEl | JSX.ElementType | null | | suggestedQueries | boolean | true | | defaultSearchQueries | string[] | [] | | defaultAiQuestions | string[] | [] | | brandLogoImgSrcUrl | string | null | | brandName | string | null | | brandColor | string | #CB53EB | | brandFontFamily | string | Maven Pro | | problemLink | string (example: "mailto:help@trieve.ai?subject=") | null | | responsive | boolean | false | | floatingButtonPosition | "top-left", "top-right", "bottom-left", or "bottom-right" | "bottom-right" | | showFloatingButton | boolean | false | | floatingSearchIconPosition | "left" or "right" | "right" | | showFloatingSearchIcon | boolean | false | | showFloatingInput | boolean | false | | buttonTriggers | [{ selector: <"query-selector">, mode: "chat"}] | | | hideopenButton | boolean | false | | showResultHighlights | boolean | true | | initialAiMessage | string (example: "<p>Hi! How can I help</p>") | null | | ignoreEventListeners | boolean | false | | hideOverlay | boolean | false | ### Search Results <details> <summary>Screenshots</summary> ![light](./github/search-light.png) ![dark](./github/search-dark.png) </details> #### Usage in React: ```jsx <TrieveSearch apiKey="<your trieve apiKey>" datasetId="<your trieve datasetId" /> ``` #### Usage in Web Components: ```html <trieve-search apiKey="<your trieve apiKey>" datasetId="<your trieve datasetId" /> ``` #### Usage with Vanilla JS ```javascript import "trieve-search-component/styles"; import { renderToDiv } from 'trieve-search-component/vanilla'; const root = document.getElementById('root'); renderToDiv(root, { apiKey: "<Your Trieve Api Key>" datasetId: "<Your Trieve Dataset Id>" // ... other props }) ``` ## License MIT ## Development Guide ### Deploying to view search playground UI The `example/` folder shows the example application for what rendering this would look like Run the example, search-component, css, javascript and watcher for demos page ```sh $clients/search-component yarn all ``` or to run each individually Start the listener to update the search-component's css and javascript ```sh $clients/search-component yarn $clients/search-component yarn dev ``` Run the example application ```sh $clients/search-component cd example/ $clients/search-component yarn $clients/search-component yarn dev ``` ### Viewing it on demos page ```sh cd clients/search-component/ yarn all ``` Set environment variable in `server/.env` ```sh SEARCH_COMPONENT_URL="http://localhost:8000" ```