Components / agents

Sources

The pages an answer used, folded under Used 3 sources so the answer stays the first thing read.

import { Sources } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { Sources } from '@basiiik/ui';

<Sources sources={[{ title: 'Modal spec', url: 'https://basiiik.pages.dev/components/modal/' }]} />

• Example values were filled in for the required prop sources: replace them with your own.
• Values in braces are your own variables, handlers or data, such as const [open, setOpen] = useState(false).
• Hover and Focused are CSS on the native button and links. Open is the open prop (or defaultOpen); folded by default.
• Storybook: Agents/Sources.

Props

States. Hover and Focused are CSS on the native button and links. Open is the open prop (or defaultOpen); folded by default.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• The pages or documents an answer is based on
• A list of references under a generated answer

Do not use it when

• Navigation (use Navbar or Breadcrumb)
• Files the person uploaded (use File Upload's list)

Rules for agents

• Pass sources as an array of title, url and an optional description
• Put it inside the assistant ChatMessage, after the answer
• Use real page titles, not the address
• description is one short sentence about what that page says

Avoid

• A row of bare numbers or raw URLs
• Links without the new-tab warning
• Showing the list open under every answer

Writing the content

• Header: "Used 3 sources" (the default)
• Title: the page's own title

Keyboard

• Enter and Space open and close the list
• Tab moves to the header button, then through the links

Accessibility

• A native button with aria-expanded and aria-controls; the list is a region named by the button
• Each link opens in a new tab and says "(opens in a new tab)" to a screen reader
• The numbers are decoration

Colour tokens it reads

Related

• Chat Message
• Reasoning
• Link

agents 2 Figma variants Try it in the live demo