When to reach for Sources, which form to use, and the decisions it leaves to you.
When to use
Sources lists the pages, files or records an assistant's answer was drawn from, so the reader can check it. Use it wherever an answer comes from search or retrieval.
The list form goes with a whole answer: above it while the answer streams, or below it once it is done.
The inline form marks the sentence a source supports, like a footnote number.
Use both together: inline markers in the text and the full list under it. The list is what keyboard and screen reader users can reach (see the Accessibility tab).
Use something else when
The reader attached the files themselves. Show those with Attachments or FileCard, where they can be opened or removed.
You want to show the steps the model took, like searching and reading. That is ThoughtChain, or Think for its reasoning.
The links are ordinary related reading with no claim attached. A plain list of links says that better.
Writing the items
Make each title the page's own title, not the URL. Readers judge a source by its name and its site.
An icon per item, like the site's favicon, helps readers spot a source they trust. Keep them all the same size.
description shows only in the inline card. Put the passage the answer relied on there, cut to a sentence or two: the card shows three lines and cuts the rest.
Give every item a key. Without one, activeKey matches nothing and the inline card always opens on the first source.
The title, and folding
The title is the only thing a folded list shows, so make it say what is inside: “Used 3 sources”, not “Sources”.
The list starts unfolded. In a long conversation, set defaultExpanded to false so older answers do not grow a block of links each.
Folded sources leave the page. A folded list renders no links at all, so the browser's find-in-page and a screen reader cannot reach them until the reader unfolds it.
To fold the list from your own code, for example once the answer finishes, use expanded with onExpand. Update your state in onExpand, or clicking the title stops working.
Inline markers
An inline marker is small and sits in the line of text, so keep its title to a number or a short site name.
The card pages through every item in items. Pass a marker only the sources for its sentence, or pass them all and point activeKey at the one it stands for.
The card opens on hover only. A keyboard cannot open it, so keep the full list in the answer as well.
The card is 300 wide by default. Narrow it with popoverOverlayWidth when your descriptions are short or the chat column is narrow.
Links and clicks
Every source opens in a new tab. Say so near the list if your product usually keeps readers in the same tab.
onClick fires on top of the navigation, not instead of it. Use it to record which source was opened.
An item with no url is not a link and cannot be reached with Tab. Give it a url whenever there is a page to go to.
Restyling it
Use the semantic keys: root, title for the header or the inline marker, and content for the list or the inline card. A part with a key keeps its name across versions, and a part reached by class name may not.