AI
AiConversationList
Bit.BlazorUI.AIThreadList
BitAiConversationList is the sidebar list of conversations, grouped by recency the way people think about them: today, yesterday, the previous seven days, the previous thirty days, then by month. It lists the BitAiConversationSummary records it is given, marks the open one, and raises OnSelect, OnNew and OnDelete - where the conversations are kept, and what switching does, is the app's.
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 needs no session: hand it summaries - BitAiConversation.ToSummary(), or the
ListAsync of an IBitAiConversationStore (ai.UseConversationStore<T>(), an in-memory one
ships with the package) - and switch the chat yourself on OnSelect. The
conversations scenario puts it over a store, with replies that
keep streaming in a thread you switched away from.
The list is a nav named by its AriaLabel or the Conversations string, each group is a list named by its
heading, the open conversation is marked with aria-current (and set apart by more than its color), and each
delete button is named after its conversation; once the app has taken a deleted conversation out of the list, the
focus goes to the conversation now in its place, or to the new button when none is left. A conversation's preview
is its tooltip. The words - the new button,
the group headings, "Untitled" - come from the string table of the
BitAiUiOptions in force.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
Conversations are grouped by how recently they changed, newest first; SelectedId marks the open
one and OnSelect reports a choice. ShowNewButton takes the new-conversation button away.
Open: c2
New & delete
The new-conversation button raises OnNew, and a delete button beside every conversation - shown only
while OnDelete is set - raises it with the conversation. Both leave the list to the app, which hands it
the new set of summaries.
With a chat
What it is for: a sidebar beside a BitAiChat. Each thread keeps a
session of its own, so switching is pointing the chat at another session; a thread joins the list once its first
message arrives, titled after it. Send something, press New, and switch between them.
New conversation
Send a message and this thread joins the list.
TimeZone
TimeZone is the zone the days of the groups are counted in: what is today, yesterday, the previous seven and
thirty days, and the month of an older conversation. While it is null the list counts them in the TimeZone
of the BitAiUiOptions in force, the zone the
times of the messages are shown in, else in the zone of the browser. Here the same conversations are counted in
Tokyo (UTC+9) and in São Paulo (UTC-3): "Book the flights" changed after midnight in one of the two cities but
before midnight in the other, so one list has it under Today and the other under Yesterday.
Tokyo
São Paulo
Disabled
A disabled list stays readable, with the open conversation marked, and takes no choice, new or delete.
Cascading parameters
BitParams with a BitAiConversationListParams sets what the conversation lists inside it agree on -
ShowNewButton, the TimeZone they count their days in, and their look - while the conversations, the
open one and the callbacks stay each list's own. A parameter of the list itself still wins: the second list sets
its own Styles, which take the place of the cascaded ones.
Style & Class
Style / Class reach the root, Styles / Classes each part (the new button with the
class-styles of BitActionButton, the group headings, the lists, the items, the item buttons and the selected
one, the titles and the delete buttons with the class-styles of BitButton). The public
--bit-AiConversationList-* variables (see the CSS variables table) re-skin it from :root, an
ancestor or Style.
RTL
Use BitAiConversationList in right-to-left (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.
BitAiConversationList CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-AiConversationList-gap | spacing(0.25) | Room between two conversations, and between the parts of the list. |
| --bit-AiConversationList-padding | spacing(1) | Inset of the list. |
| --bit-AiConversationList-group-color | var(--bit-clr-fg-ter) | Text of the heading of a group. |
| --bit-AiConversationList-item-radius | var(--bit-shp-radius-control) | Corners of a conversation. |
| --bit-AiConversationList-item-color | var(--bit-clr-fg-pri) | Text of a conversation. |
| --bit-AiConversationList-item-background | transparent | Background of a conversation. |
| --bit-AiConversationList-item-hover-background | var(--bit-clr-bg-pri-hover) | Background of a conversation under the pointer. |
| --bit-AiConversationList-selected-color | var(--bit-clr-pri-fg) | Text of the conversation that is open. |
| --bit-AiConversationList-selected-background | var(--bit-clr-pri-tint) | Background of the conversation that is open. |
| --bit-AiConversationList-selected-hover-background | var(--bit-clr-bg-pri-hover) | Background of the conversation that is open, under the pointer. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitAiConversationList parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| Classes | BitAiConversationListClassStyles? | null | Custom CSS classes for different parts of the conversation list. |
| Conversations | IReadOnlyList<BitAiConversationSummary>? | null | The conversations to list, in any order: they are sorted by UpdatedAt, newest first, and grouped into today, yesterday, the previous seven days, the previous thirty days, then by month - counted in the TimeZone, else in the TimeZone of the BitAiUiOptions in force, else in the browser's zone. |
| OnDelete | EventCallback<BitAiConversationSummary> | The callback for when the delete button of a conversation is pressed. The delete buttons are shown only while it is set; removing the conversation (and handing the list the new set) is the app's. | |
| OnNew | EventCallback | The callback for when the new-conversation button is pressed. | |
| OnSelect | EventCallback<BitAiConversationSummary> | The callback for when a conversation is chosen. Opening it - loading it, pointing the chat at its session - is the app's. | |
| SelectedId | string? | null | The ConversationId of the conversation currently open, which is marked with aria-current and set apart. |
| ShowNewButton | bool | true | Shows the new-conversation button at the top of the list. |
| Styles | BitAiConversationListClassStyles? | null | Custom CSS styles for different parts of the conversation list. |
| TimeZone | TimeZoneInfo? | null | The time zone the conversations are grouped by day in - what counts as today, yesterday, the previous seven and thirty days, and the month of an older one. While it is null, the TimeZone of the BitAiUiOptions in force, else the browser's: under Blazor Server the list is drawn in the zone of the server until the browser has said which zone it runs in. |
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. |
BitAiConversationListClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitAiConversationList. |
| NewButton | BitActionButtonClassStyles? | null | Custom CSS classes/styles for the new-conversation button of the BitAiConversationList. |
| GroupHeader | string? | null | Custom CSS classes/styles for the heading of each group of the BitAiConversationList. |
| List | string? | null | Custom CSS classes/styles for the list of each group of the BitAiConversationList. |
| Item | string? | null | Custom CSS classes/styles for each item of the BitAiConversationList. |
| ItemButton | string? | null | Custom CSS classes/styles for the button each conversation of the BitAiConversationList is chosen with. |
| SelectedItemButton | string? | null | Custom CSS classes/styles for the button of the conversation currently open in the BitAiConversationList, added to those of ItemButton. |
| ItemTitle | string? | null | Custom CSS classes/styles for the title of each conversation of the BitAiConversationList. |
| DeleteButton | BitButtonClassStyles? | null | Custom CSS classes/styles for the delete button of each conversation of the BitAiConversationList. |
BitAiConversationSummary properties
The lightweight projection of a conversation a list renders without loading its messages: a positional record, new BitAiConversationSummary(conversationId, title, updatedAt, preview?, messageCount?). BitAiConversation.ToSummary() and IBitAiConversationStore.ListAsync() return them.
| Name | Type | Default value | Description |
|---|---|---|---|
| ConversationId | string | The identifier of the conversation, which SelectedId is compared with. | |
| Title | string? | The display title. A conversation without one is listed under the Untitled string. | |
| UpdatedAt | DateTimeOffset | When the conversation last changed, which sorts the list and picks the group it is listed in. | |
| Preview | string? | null | A snippet of the last message, shown as the tooltip of the conversation. |
| MessageCount | int | 0 | How many messages the conversation holds. |
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.