Hybrid Search — Citation Links

Change the class, the attributes and the tooltip of each citation link in an answer.

Each [1] in an answer is a link to the source it cites. Below we hook into every citation link, mark it with a class and a data attribute, give it a tooltip, and then read a field that the response does not send by default.

You need a working Hybrid Search page first. See Hybrid Search — Quick Start.

Customize each link

Give the answer layout of the Hybrid Search workflow an onCitationLink function:

function onCitationLink({ addClass, setAttribute }, { source }) {
  addClass("my-citation-link");
  if (!source) {
    return;
  }
  setAttribute("data-title", source.title);
}

client.ui.hybridSearch.useLayouts({
  answer: { onCitationLink },
});

The second argument is { source, index }. source is the cited item from the response's sources, and index is its position, counted from 0. source can be undefined, so check it before you read from it.

The first argument holds the methods that change the link:

The SDK calls the function each time it renders the answer, and it renders the answer many times as the text streams in. Only change the link inside the function.

Add a tooltip

Put content in the link's tooltip with setTooltipText or setTooltipHtml. This one shows the source's title and date:

function onCitationLink({ setTooltipHtml, escapeHtml }, { source }) {
  if (!source) {
    return;
  }
  const date = new Date(source.published_at).toLocaleDateString();
  setTooltipHtml(
    `<span class="title">${escapeHtml(source.title)}</span>` +
    `<span class="date">${date}</span>`
  );
}

The SDK styles already place the tooltip above the link and show it on hover. Style what you put inside it:

.miso-citation-tooltip .title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: max-content;
  max-width: 12rem;
  overflow: hidden;
  font-weight: 600;
}
.miso-citation-tooltip .date {
  display: block;
  margin-top: 0.5em;
}

Use more source fields

source carries only the fields that the request asks for. product_id and title always arrive, whether source_fl names them or not. By default, the Hybrid Search workflow requests these fields:

["cover_image", "url", "created_at", "updated_at", "published_at", "title", "authors"]

To read any other field, name it in source_fl in the request payload. The list replaces the default, so start from the default and add your field.

client.ui.hybridSearch.useApi({
  source_fl: ["cover_image", "url", "created_at", "updated_at", "published_at", "title", "authors", "categories"],
});

source.categories is then available in onCitationLink. A custom attribute uses its dotted path, such as custom_attributes.section. See source_fl in the Hybrid Search API, and the field names in Product Schema.

If it does not work