Issues with Displaying Paragraphs Using Typesense and React-instantsearch

Hello! I am brand new to Typesense but getting great results so far. I am, however, having an issue with a UI I am building with react-instantsearch. One of the fields I am indexing is a body field what can have dozens of paragraphs. I have them being indexed by paragraph. My issue is that when the results are returned, the entire body of paragraphs is being displayed.

To correct this, I have added the Snippet widget. While this shortens the output for each paragraph, all paragraphs are still included even if they are not highlighted.

Following is my schema and react page. Any help would be greatly appreciated.

collectionSchema: { // Required
        name: "pages_v1",
        enable_nested_fields: true,
        fields: [
          {
            name: "title",
            type: "string",
            optional: true,
          },
          {
            name: "body_text",
            type: "string[]",
            optional: true,
          },
          {
            name: "site_section",
            type: "string[]",
            optional: true,
            facet: true,
          },
          {
            name: "page_path", // Required
            type: "string",
          },
          {
            name: "page_priority_score", // Required
            type: "int32",
          },
        ],
        default_sorting_field: "page_priority_score", // Required
      },```

export default function SearchInterface() {

const Hit = ({ hit }) => (
<>
<details>
<summary><Link to={hit.page_path}><Highlight attribute="title" hit={hit} /></Link></summary>
<Snippet hit={hit} attribute="body_text" separator=" ——— " />
</details>
</>
)
return (

<Search>
<InstantSearch searchClient={searchClient} indexName="pages_v1">
<Textpage>
<div className="title">
<SearchBox placeholder="search" autoFocus="true" />
<p><Stats /></p>
</div>
<main>
<Sectionnav>
<RefinementList attribute="site_section" />
</Sectionnav>
<div className="right">
<Hits hitComponent={Hit} />
</div>
</main>
<div className="title"><Pagination /></div>
</Textpage>
</InstantSearch>
</Search>
)
}```

Could you open your browser's dev console, navigate to the network tab and then perform a search in the UI, and look for a multi_search request, copy as curl and paste it here, minus the API key?

Here’s what this comes up with:

curl ‘https://dxkjm74r9falewn2p-1.a1.typesense.net/multi_search?x-typesense-api-key=xxx’ \
-H ‘authority: dxkjm74r9falewn2p-1.a1.typesense.net’ \
-H ‘accept: application/json, text/plain, /’ \
-H ‘accept-language: en-US,en;q=0.9’ \
-H ‘content-type: text/plain’ \
-H ‘dnt: 1’ \
-H ‘origin: https://mecad-production.netlify.app’ \
-H ‘sec-ch-ua: “Not=A?Brand”;v=“99", “Chromium”;v=“118"’ \
-H ‘sec-ch-ua-mobile: ?0’ \
-H ‘sec-ch-ua-platform: “macOS”’ \
-H ‘sec-fetch-dest: empty’ \
-H ‘sec-fetch-mode: cors’ \
-H ‘sec-fetch-site: cross-site’ \
-H ‘sec-gpc: 1’ \
-H ‘user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36’ \
--data-raw ‘{“searches”:[{“query_by”:“title, page_path, body_text, site_section”,“highlight_affix_num_tokens”:50,“highlight_full_fields”:“title, page_path, body_text, site_section”,“collection”:“pages_v1”,“q”:“anders”,“facet_by”:“site_section”,“max_facet_values”:10,“page”:1}]}’ \
--compressed

When instantiating the typesense-instantsearch-adapter, in additionalSearchParameters, you want to do something like this:

const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
  ...
  additionalSearchParameters: {
    query_by: 'title, page_path, body_text, site_section',
    highlight_fields: 'body_text',
    highlight_full_fields: 'title, page_path, site_section',
    highlight_affix_num_tokens: 50,
    ...
  },
});

Thanks! This kinda works. It highlights and truncates the output to a smaller amount of words. The problem I continue to have (and perhaps there is no way to cure it) is paragraphs that do not have the search term in them are also returned. So on long pages, there are 30-40 snippets lumped together into a single block of text.

Is it possible to exclude snippets that do not have a highlight? or to set a maximum number of characters of body text displayed?

I saw a tutorial that used the truncate method from Tailwind. I’m not using Tailwind so I’m hoping there is another truncate method.

&gt; So on long pages, there are 30-40 snippets lumped together into a single block of text.
Ideally you'd want to break large pieces of text into smaller records... But I'm not sure I fully understand this. Could you share a screenshot of this issue?