Source List

Trust component

<loquix-source-list> collects the sources behind an answer into a block under the message. Numbering is one-based and lines up with the chips from Citation Popover, so “3” in the prose is “3” in the list.

loquix-source-listgrid or list layoutcancelable clicks

Preview

Sources under an answer Live component

Usage

import '@loquix/core/define/define-source-list';

<loquix-source-list layout="list"></loquix-source-list>

sources is an array, so assign it as a property.

const list = document.querySelector('loquix-source-list');

list.sources = answer.citations;

Intercepting a click

loquix-source-click is cancelable and fires before navigation. Call preventDefault() to keep the reader in the conversation — opening the source in a side panel, for instance.

list.addEventListener('loquix-source-click', (event) => {
  event.preventDefault();
  openSourcePanel(event.detail.source);
});

Layouts

Layout	Use it for
`grid`	Cards side by side. Suits three to six sources under a wide message.
`list`	Stacked rows. Suits narrow columns or long titles.

Properties

Property	Attribute	Type	Default	Description
`sources`	—	`Source[]`	`[]`	The sources to render. Property-only. See the source object.
`layout`	`layout`	`'grid' \| 'list'`	`'grid'`	Display variant. Reflected to the host.
`heading`	`heading`	`string`	localized	Replaces the generated “N sources” heading.

Events

Event	Detail	Description
`loquix-source-click`	`{ index, source }`	Cancelable. Fired before navigation, so `preventDefault()` keeps the user on the page.

CSS parts

Part	Purpose
`container`	Outer wrapper.
`header`	The “N sources” header row.
`items`	Grid or list container.
`source`	A single source row, `<a>` or `<span>`.
`top`	Top metadata row inside a source.
`index`	Numeric badge.
`host`	Host name.
`title`	Source title.
`snippet`	Snippet text.

CSS custom properties

Variable	Purpose
`--loquix-ai-color`	Hover border and index foreground.
`--loquix-ai-color-subtle`	Index background.