Skip to content
BlazorUI

AI

AiSourceList

Bit.BlazorUI.AI

BitAiSourceList is the deduplicated list of the sources a message cited, each a BitAiSourceCard numbered to match the inline citation markers, laid out as a responsive grid under a small Sources heading. A source cited several times is listed once, under the lowest number any of its citations carries, and the list is ordered by those numbers - a source cited without a number goes last. Nothing is rendered while there is nothing to list. A message renders one under its text when it cites anything (BitAiUiOptions.ShowSourceList).

Notes

To use this component, you need to install the Bit.BlazorUI.AI(opens in a new tab) nuget package, as described in the Optional steps of the Getting started page.

The list takes the BitAiCitations of a message (BitAiMessage.Citations, see AiCitationMarker) and draws their sources with AiSourceCard - links to web sources, opened in a new tab, or buttons with an OnSourceClick; a source URL is untrusted input, which the cards only ever link to when it is an http or https address. The heading is BitAiStrings.Sources. Accessibility: the cards are a list a screen reader announces with its count and steps through card by card, named by the heading over it - or, with the heading left out, by the same words. See it under an answer in the Citations scenario.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

Hand the list the Citations of a message: it lists their sources, numbered like their markers.

Sources
1
Blazor render modes
Microsoft Learn
2
SignalR circuit lifetime
Microsoft Learn

Deduplication & order

Four citations of three sources: the source cited twice (as [2] and [3]) is listed once, under 2; the list is ordered by number; and the source cited without a number goes last, unnumbered.

Sources
1
Blazor render modes
Microsoft Learn
2
SignalR circuit lifetime
Microsoft Learn
Q3 report.pdf
File

Heading

ShowHeading false leaves the "Sources" heading off - for a list under a heading of the page's own. The list is still named "Sources" for a screen reader.

1
Blazor render modes
Microsoft Learn
2
SignalR circuit lifetime
Microsoft Learn

Source click

With OnSourceClick the cards are buttons rather than links, and hand over the source that was clicked - to reveal it in place rather than leave the page.

Sources
1
Blazor render modes
Microsoft Learn
2
SignalR circuit lifetime
Microsoft Learn

Clicked: -

From a message

The citations of a message, as a transport streamed them - here a scripted transport of this site, whose answer cites two sources. The session numbers them in document order when the message is finalised.



Disabled

A Disabled list disables every card it draws: a card that would link to its source leads nowhere, and OnSourceClick is handed nothing.

Sources
1
Blazor render modes
Microsoft Learn
2
SignalR circuit lifetime
Microsoft Learn

Sources
1
Blazor render modes
Microsoft Learn
2
SignalR circuit lifetime
Microsoft Learn

Clicked: -

Cascading parameters

BitParams with a BitAiSourceListParams sets the heading and the look of every source list inside it - the ones the messages of a chat render included - and a list's own value still wins (the second shows its heading).

1
Blazor render modes
Microsoft Learn
2
SignalR circuit lifetime
Microsoft Learn

Sources
1
Blazor render modes
Microsoft Learn
2
SignalR circuit lifetime
Microsoft Learn

Style & Class

Style and Class reach the root, Styles and Classes the heading, the grid of the cards and every card (SourceCard, a BitAiSourceCardClassStyles). The public --bit-AiSourceList-* variables re-skin the heading and the grid - column-min-width decides how many columns fit - and the cards keep the --bit-AiSourceCard-* and --bit-Card-* ones.

Sources
1
Blazor render modes
Microsoft Learn
2
SignalR circuit lifetime
Microsoft Learn

Sources
1
Blazor render modes
Microsoft Learn
2
SignalR circuit lifetime
Microsoft Learn

Sources
1
Blazor render modes
Microsoft Learn
2
SignalR circuit lifetime
Microsoft Learn

RTL

In right-to-left text the heading and the grid of the cards are mirrored, whether the direction comes from Dir or from a dir attribute around the list.

Sources
1
حالت‌های رندر بلیزر
مایکروسافت لرن
2
طول عمر اتصال SignalR
مایکروسافت لرن

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone, as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component falls back to the theme token beside it.

BitAiSourceList CSS variables

Name Default value Description
--bit-AiSourceList-gap spacing(1) Room between the heading and the cards, and between two cards.
--bit-AiSourceList-column-min-width spacing(26) Width a column of cards does not shrink below, which decides how many columns fit; 100% stacks the cards.
--bit-AiSourceList-header-color var(--bit-clr-fg-sec) The heading.
--bit-AiSourceList-header-font-size var(--bit-tpg-fs-xs) Size of the heading, which is cased and tracked like the overline style of the theme.

API

Every parameter, public member, sub-class and enum this component exposes.

BitAiSourceList parameters

Name Type Default value Description
Citations IReadOnlyList<BitAiCitation>? null The citations to list the sources of - usually the Citations of a message. A source is listed once (by its SourceId), under the lowest Number any of its citations carries, ordered by those numbers; a source cited without a number goes last. Nothing is rendered while there is none.
Classes BitAiSourceListClassStyles? null Custom CSS classes for different parts of the source list.
OnSourceClick EventCallback<BitAiCitationSource> The callback for when the user activates a source card, with its source. When set, the cards become buttons instead of links - for revealing the source in place. A disabled list hands over nothing.
ShowHeading bool true Shows the heading (BitAiStrings.Sources, "Sources") above the cards, which names the list for assistive technologies. Left out, the list is named by the same words all the same.
Styles BitAiSourceListClassStyles? null Custom CSS styles for different parts of the source list.

BitComponentBase parameters

Name Type Default value Description
AriaLabel string? null Gets or sets the accessible label for the component, used by assistive technologies.
Class string? null Gets or sets the CSS class name(s) to apply to the rendered element.
Dir BitDir? null Gets or sets the text directionality for the component's content.
Disabled bool false Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction.
ForceAnimation bool false Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name.
Id string? null Gets or sets the unique identifier for the component's root element.
Style string? null Gets or sets the CSS style string to apply to the rendered element.
TabIndex string? null Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility BitVisibility BitVisibility.Visible Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name Type Default value Description
UniqueId Guid Guid.NewGuid() Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement ElementReference Gets the reference to the root HTML element associated with this component.

BitAiSourceListClassStyles properties

Name Type Default value Description
Root string? null Custom CSS classes/styles for the root element of the BitAiSourceList.
Header string? null Custom CSS classes/styles for the heading of the BitAiSourceList.
List string? null Custom CSS classes/styles for the list (the grid of the cards) of the BitAiSourceList.
SourceCard BitAiSourceCardClassStyles? null Custom CSS classes/styles for every BitAiSourceCard of the BitAiSourceList.

BitVisibility enum

Name Value Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).

BitDir enum

Name Value Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.