`<miso-hybrid-search>`

The container of the Hybrid Search workflow. One query gets two things: the search results and an answer. Each arrives on its own, so the elements fall into two groups, and one container holds elements from one group only. Put the results in one <miso-hybrid-search> and the answer in another:

<miso-hybrid-search>
  <miso-query></miso-query>
</miso-hybrid-search>

<miso-hybrid-search>
  <miso-question></miso-question>
  <miso-answer></miso-answer>
  <miso-sources></miso-sources>
</miso-hybrid-search>

<miso-hybrid-search>
  <miso-total></miso-total>
  <miso-products></miso-products>
  <miso-more></miso-more>
</miso-hybrid-search>

All the containers connect to the same workflow, so the query box sends one query for both groups.

To build a Hybrid Search page, see Hybrid Search — Quick Start.

Elements

Search results

Element	Shows
`<miso-error>`	The error message shown when the workflow fails.
`<miso-facets>`	The facet filters of the search results.
`<miso-keywords>`	The query text the results are for.
`<miso-more>`	The button that loads more search results.
`<miso-products>`	The product results.
`<miso-query>`	The query box.
`<miso-sort>`	The sort order selector of the search results.
`<miso-total>`	The total number of search results.

Answer

Element	Shows
`<miso-affiliation>`	The affiliate products that come with the answer.
`<miso-answer>`	The generated answer.
`<miso-feedback>`	The buttons that rate the answer.
`<miso-images>`	The images that come with the answer.
`<miso-question>`	The question being answered.
`<miso-sources>`	The articles cited by the answer.

A container with elements from both groups stops with an error in the console: <miso-hybrid-search> cannot contain both … for they don't share the same data lifecycle.

Attributes

`logo`

Controls the Miso logo at the end of the container.

Value	The logo shows
Attribute left out	When the container holds `<miso-products>` or `<miso-answer>`, once its data starts to arrive.
`true`	Once the data of its group starts to arrive.
`false`	Never.

Any other value is an error. To turn the logo off in every <miso-hybrid-search>:

client.ui.hybridSearch.useLayouts({
  container: { logo: false },
});

`visible-when`

Shows the container only in the states it names. It also works on an element inside the container. The state is the state of the container's group: an answer container can be loading while the results are ready.

Value	Shows the element when
`initial`	The workflow has not sent a request yet.
`loading`	The request is out, and no data has arrived.
`ready`	The data is arriving or has arrived.
`ongoing`	The data is still arriving.
`done`	All the data has arrived.
`erroneous`	The request failed.
`empty`	No Miso element in the container has data.
`nonempty`	At least one Miso element in the container has data.

Separate values with spaces to show the element in any of them: visible-when="initial loading".
Join a state to empty or nonempty with + to need both: visible-when="ready+empty".
Only the Miso elements that show data count toward empty and nonempty. The query box and the buttons do not.
The SDK shows the element with display: block !important. To lay it out as a flex row or a grid, put visible-when on a wrapper around it.

An answer container also has unanswerable when Miso has no answer for the query. visible-when="ready !unanswerable" shows the answer only when there is one.

Hybrid Search — UI Customization — the parts and the order of the page.
Results and Sources — the fields and the layout of each result.
Facets — the filters beside the results.

<miso-history>

<miso-messages>

<miso-hybrid-search>