AI
AiSourceCard
BitAiSourceCard shows one source a message cited - the number its citation markers carry, its title, and the site it comes from with its favicon - on a BitCard. The card is a link to the source when the source is addressable, so the browser gives the user the usual middle click and context menu, and a button when OnActivate is set. Source URLs come from the model or from retrieved content, so only a web address ever becomes a link, and only a web address or an inline raster image is ever loaded as the favicon - when the image policy of the options shows it outright. BitAiSourceList renders one per source.
Notes
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
Number
Site & favicon
Activation
Untrusted URLs
Cascading parameters
Style & Class
RTL
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.
BitAiSourceCard CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-AiSourceCard-gap | spacing(1) | Room between the number and the body. |
| --bit-AiSourceCard-index-color | var(--bit-clr-fg-sec) | The number. |
| --bit-AiSourceCard-title-color | the text color of the card | The title. |
| --bit-AiSourceCard-title-font-size | var(--bit-tpg-fs-sm) | Size of the title. |
| --bit-AiSourceCard-site-color | var(--bit-clr-fg-sec) | The site line. |
| --bit-AiSourceCard-site-font-size | var(--bit-tpg-fs-xs) | Size of the site line and of the number. |
| --bit-AiSourceCard-favicon-size | var(--bit-siz-icon-sm) | Size of the favicon. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitAiSourceCard parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| Classes | BitAiSourceCardClassStyles? | null | Custom CSS classes for different parts of the source card. |
| Number | int? | null | The number shown beside the title, which matches the inline citation markers of the source. Left out when null (or int.MaxValue, the number a source cited without one is sorted under). |
| OnActivate | EventCallback<BitAiCitationSource> | The callback for when the card is activated, with its source. When set, the card becomes a button instead of a link - for revealing the source in place. A disabled card hands over nothing. | |
| Source | BitAiCitationSource | The source to render (required). Its Url becomes the link of the card only when it is an absolute http or https address, and its IconUrl the favicon only when it is a web address or an inline raster image the image policy of the options shows outright. | |
| Styles | BitAiSourceCardClassStyles? | null | Custom CSS styles for different parts of the source card. |
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. |
BitAiSourceCardClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitAiSourceCard. |
| Card | BitCardClassStyles? | null | Custom CSS classes/styles for the BitCard of the BitAiSourceCard. |
| Content | string? | null | Custom CSS classes/styles for the content (the number and the body) of the BitAiSourceCard. |
| Index | string? | null | Custom CSS classes/styles for the marker number of the BitAiSourceCard. |
| Body | string? | null | Custom CSS classes/styles for the body (the title and the site) of the BitAiSourceCard. |
| Title | string? | null | Custom CSS classes/styles for the title of the BitAiSourceCard. |
| Site | string? | null | Custom CSS classes/styles for the site line (the favicon and the site name) of the BitAiSourceCard. |
| Favicon | string? | null | Custom CSS classes/styles for the favicon of the BitAiSourceCard. |
BitAiCitationSource properties
A referenceable source one or more citations point at: new BitAiCitationSource(sourceId, title). Sources are deduplicated by SourceId across a message, so several citations quoting different passages of one document share one entry of the source list and one number. A sealed record.
| Name | Type | Default value | Description |
|---|---|---|---|
| SourceId | string | The stable identifier of the source, used to deduplicate it and to group its citations. | |
| Title | string | The display title, the title of the card. | |
| Kind | BitAiSourceKind | BitAiSourceKind.Unknown | The kind of source. The card names it on its site line when the source has neither a SiteName nor a web address. |
| Url | string? | null | The absolute URL of the source, when it is addressable. Only an http or https one becomes a link; its host is the site line when there is no SiteName. |
| SiteName | string? | null | The host or publication name shown under the title. |
| IconUrl | string? | null | The URL of a favicon or thumbnail for the card: loaded only when it is a web address or an inline raster image (data:image/, not SVG), lazily and without a referrer - and only when the image policy of the options (BitAiUiOptions.Images) shows it outright: a favicon is not worth a placeholder of its own, so one the policy would load on request or block is left out. |
| Description | string? | null | A short description or excerpt of the source, for a preview of the application's own. |
| Author | string? | null | The author or byline. |
| PublishedAt | DateTimeOffset? | null | The publication date. |
| Score | double? | null | The retrieval score, normalized to 0..1 where the retriever reports one. |
| Metadata | IReadOnlyDictionary<string, object?>? | null | Application-defined values carried through to custom source renderers. |
BitAiSourceKind enum
| Name | Value | Description |
|---|---|---|
| Unknown | 0 | Kind not stated. |
| Web | 1 | A page on the public web. |
| Document | 2 | A document in a corpus or knowledge base. |
| File | 3 | A file the user attached to the conversation. |
| Dataset | 4 | A row, record, or query result from structured data. |
| Message | 5 | A message earlier in this conversation. |
| Tool | 6 | The output of a tool. |
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.