`<miso-sources>`

The articles that an answer cites, numbered so that each citation in the answer points to one of them:

<miso-ask>
  <miso-answer></miso-answer>
  <miso-sources></miso-sources>
</miso-ask>

Containers

Container	Default layout	Fields from
`<miso-ask>`	`list`: one article on each row	`source_fl` on `client.ui.asks`
`<miso-hybrid-search>`	`horizontal`: one row of small cards	`source_fl` on `client.ui.hybridSearch`
`<miso-message-item>`	`horizontal`, under a Sources heading	`source_fl` on `client.ui.conversation`

You do not write <miso-message-item> yourself. <miso-messages> puts one in each message of the open thread, with a <miso-sources> in it.

To change the sources, call useLayouts on the workflow of the container, under the role sources. For Ask, use client.ui.asks, the context, so that follow-up answers get the change too.

Layouts

Give the layout type before the options:

client.ui.asks.useLayouts({
  sources: ["cards", { link: { open: false } }],
});

Type	What the reader sees	Class
`list`	One article on each row.	`miso-list`
`cards`	Articles side by side, in a grid.	`miso-cards`
`carousel`	One row of articles, with buttons to scroll.	`miso-carousel`
`horizontal`	One row of small cards.	`miso-horizontal`

A new type keeps the other options of the default. The small cards of Hybrid Search and of the chat panel keep their compact markup when you change them to list.

Options

Your options are merged over the defaults, so set only what you change.

Option	What it does
`link`	Where the links open. `{ open: false }` opens them in the same tab. Also takes `target` and `rel`.
`className`	The class of the layout, in place of the one in the table above.
`templates.date`	The date format: options for `toLocaleDateString` with `locale` added, a locale string, or a function.
`templates.article`	The markup of one article.

To change the date format, give templates.date the options of toLocaleDateString, with locale added:

client.ui.asks.useLayouts({
  sources: {
    templates: {
      date: { locale: "en-GB", year: "numeric", month: "long", day: "numeric" },
    },
  },
});

Write the markup of an article

Give your own function as the article template. It returns the HTML of one article. This one shows the number, the title and the date:

function renderArticle(layout, state, data, meta) {
  const { tagPair, escapeHtml } = layout.templates.helpers;
  const [openTag, closeTag] = tagPair(layout, data);
  const date = data.published_at
    ? new Date(data.published_at).toLocaleDateString("en-US", { dateStyle: "medium" })
    : "";
  return openTag +
    `<span class="miso-citation-index" data-index="${meta.index + 1}"></span>` +
    `<div class="my-source-title">${escapeHtml(data.title)}</div>` +
    `<div class="my-source-date">${date}</div>` +
    closeTag;
}

client.ui.asks.useLayouts({
  sources: { templates: { article: renderArticle } },
});

For Hybrid Search, set it on client.ui.hybridSearch. For the messages of the chat panel, set it on client.ui.conversation.

Argument	What it holds
`layout`	The layout. `layout.templates.helpers` has `tagPair` and `escapeHtml`.
`state`	The state of the whole list.
`data`	The article. It holds only the fields that `source_fl` asks for, with `product_id` and `title` always there.
`meta`	`meta.index` is the position of the article, counted from 0.

Start with tagPair. It returns the opening and closing tag of the item, which link to the article and record clicks on it.
Keep the miso-citation-index element with meta.index + 1. It draws the number that the citations in the answer point to.
Escape every value from the record with escapeHtml.
Style your own classes in your CSS.

Ask — Sources and Related Resources: the link, date, layout and markup changes, with complete samples.
Hybrid Search — Results and Sources: the same for Hybrid Search.
Ask — Citation Links: the citations in the answer that point to the sources.

<miso-related-resources>

<miso-threads>

<miso-sources>

Containers

Layouts

Options

Write the markup of an article

Next

`<miso-sources>`