vectara / react-search Goto Github PK

Search results can be configured with arbitrary metadata, and the consumer should be able to use this metadata to drive how a search result is rendered. One solution could be to provide a search result deserializer prop and a render prop.

When configured, these suggestion topics will show up in the search modal when the user hasn't executed a query.

By using relative links we can ensure they stay up-to-date if the images change. By specifying widths, we can ensure the images don't look too large.

Currently, links look like this:

<img style="max-width: 100%;" alt="Welcome to React-Search" src="https://raw.githubusercontent.com/vectara/react-search/main/images/projectLogo.png"/>

![React-Search input](https://raw.githubusercontent.com/vectara/react-search/main/images/searchInput.jpg)

But they can be this instead:

<img style="max-width: 100%;" alt="Welcome to React-Search" src="images/projectLogo.png"/>
<img src="images/searchInput.jpg" alt="React-Search input" width="800" />

We should consider the user journey from using this component in prototypes (API keys) to using it in production (OAuth).

You might do a search and then close the modal but then want to open it back up to see the results again. It would be convenient if you could configure the modal to persist its state between closings and openings.

For insights purposes, we can add a header param to queries coming from search. This helps us measure the usage of this component to query our API/

@mrderyk You were right -- it would be nice to be able to customize this button's text! 😅

To repro:

• Issue a search and get back search results
• Reduce browser window height until scroll bar appears in search results
• Attempt to use mouse scroll to scroll the results
• Scroll doesn't occur

I'm using a Mac with a Magic Mouse.

This will be useful for any device that lacks an “Escape” button, e.g. a touchscreen. This also will fix a critical bug on smaller touchscreens, because on those devices the modal occupies the entire screen and there’s no way to dismiss it.

Currently, this links to the url metadata.

Currently, setting isDeeplinkable will persist the search query to the search query parameter. This could collide with a query parameter already in use by the consumer. We can resolve this by providing an option for persisting the search query to a different query parameter.

We need to publish type definitions for TS codebases that consume this component.

We need to verify that this won't break projects on React 18.

Relates to vectara/vectara-docs#227

We can support basic themes that change the color scheme, e.g. green, orange, red, dark.

Per @mrderyk, react-icons accounts for close to 75% of our bundle size. We can find a way to selectively include specific icons or find a different library.

The component needs to handle errors and surface them to the user. Looks like right now the code doesn't anticipate them:

react-icons currently takes up over 83% of our bundle size. Let's look for an alternative, since we only need one icon, and deep-importing from react-icons doesn't look to be working.

We can use tabs to provide access to both the current search results, as well as a summary of the results. We can use localStorage to remember the user's preference so that they don't have to keep selecting the tab they want.

This hook currently returns { fetchSearchResults, isLoading }. I noticed two things:

• We're using two different verbs to describe the same action: "fetch" and "load"
• The action is verbose but the state is terse

I think we can reconcile these differences and create more symmetry between the action and the state. I suggest erring on the side of verbosity to avoid potential conflicts with the consumer's variables, e.g. a local isLoading variable. I'd suggest { fetchSearchResults, isFetchingSearchResults }.

To enable support for Vectara's multiple reranker options, we need to allow ReactSearch to accept a rerankerId option.