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: "",
datasetId: "",
});
`

And then you can use any of the two components in your React application or as web component:

$3

Screenshots

!light closed
!dark closed
!light open

#### Usage in React:

`jsx

`

#### Usage in Web Components:

`js
initModalSearch({
trieve: new TrieveSDK({
// your options
})
})




`

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 | { 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"}] |
| relevanceToolCallOptions | { userMessageTextPrefix?: string; includeImages?: boolean; toolDescription: string; highDescription?: string; mediumDescription?: string; lowDescription?: string; } | { userMessageTextPrefix: "Be extra picky and detailed...", includeImages: false, toolDescription: "Mark the relevance...", highDescription: "Highly relevant and very good fit for the given query taking all details of both the query and the product into account", mediumDescription: "Somewhat relevant and a decent or okay fit for the given query taking all details of both the query and the product into account", lowDescription: "Not relevant and not a good fit for the given query taking all details of both the query and the product into account" } |
| 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", removeListeners: true}] | |
| hideOpenButton | boolean | false |
| showResultHighlights | boolean | true |
| initialAiMessage | string (example: "

Hi! How can I help

") | null |
| ignoreEventListeners | boolean | false |
| hideOverlay | boolean | false |
| overrideFetch | boolean | false |
| imageStarterText | string | "Drag and drop an image here or click to upload" |

$3

Screenshots

!light
!dark

#### Usage in React:

`jsx
apiKey=""
datasetId="/>
`

#### Usage in Web Components:

`html
apiKey=""
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: ""
datasetId: ""
// ... other props
})
`

License

MIT

Development Guide

$3

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
`

$3

`sh
cd clients/search-component/
yarn all
`

Set environment variable in server/.env

`sh
SEARCH_COMPONENT_URL="http://localhost:8000"
``