AI
AiEmptyState
Bit.BlazorUI.AI
BitAiEmptyState is what an empty conversation shows: a glyph, a heading, a supporting line, and example prompts the user can start from with one tap. The suggestions matter more than the heading - an empty box is the hardest part of a chat product, and three concrete examples solve it. BitAiChat renders one until the first message; render it yourself in the EmptyTemplate of a BitAiMessageList.
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.
It needs no session: OnSuggestion hands the chosen prompt to the page, which submits it (a BitAiChat submits
its own suggestions to its session). The heading and the line default to the EmptyTitle and EmptyBody strings of the
BitAiUiOptions in force, so a localized string table
changes them everywhere. The glyph is decorative and hidden from assistive technologies; the suggestions are
buttons, reachable with the keyboard. See the basic chat scenario.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
With nothing set, it greets with the words of the string table under a sparkle.
How can I help?
Ask a question to get started.
Title & body
Title and Body replace the words of the string table; ChildContent takes the place of the
line with markup of your own.
Ask the docs assistant
It knows every component of bit BlazorUI.
Start a new thread
Questions are answered from the component gallery and nothing else.
Suggestions
Suggestions are offered as one-tap starters, and OnSuggestion hands the chosen one over - submit it
to a session, as a BitAiChat does.
What can I help with?
Ask a question to get started.
Chosen: -
Icon
IconName picks another glyph of the built-in Fluent UI icons, and IconTemplate takes any markup in
its place - a logo, an avatar, an emoji. The robot is not one of the two dozen glyphs the core package embeds, so
an app showing it adds the Bit.BlazorUI.Icons package (see Iconography);
markup of an IconTemplate that only decorates is the app's to hide with aria-hidden.
Hi, I am Bit
Ask a question to get started.
👋
Welcome back
Ask a question to get started.
Disabled
A disabled empty state disables its suggestions - while the chat around it cannot take a message, for instance.
The assistant is offline
Ask a question to get started.
Cascading parameters
BitParams with a BitAiEmptyStateParams sets the words, the glyph, the classes and the styles every
empty state inside it greets with; an empty state's own value wins (the second keeps its own title). The
suggestions, the templates and the callback are not cascaded. The glyph reaches the empty state of each
BitAiChat in it too, while its words come from the chat's EmptyTitle and EmptyBody and its look
from the chat's Styles / Classes - cascade those through a
BitAiChatParams.
Ask the docs
Both empty states take their words and glyph from the BitParams around them.
Its own title wins
Both empty states take their words and glyph from the BitParams around them.
External Icons
Icon takes any CSS-class icon library (raw classes or BitIconInfo.Css / Fa / Bi) and
wins over IconName. Reference the library's stylesheet in your app. See the
BitIconInfo table for the rest of what it describes.
FontAwesome
Ask a question to get started.
Bootstrap Icons
Ask a question to get started.
Style & Class
Style / Class reach the root, Styles / Classes each part (the icon, the title, the
body, the suggestions and each suggestion button, with the class-styles of BitButton). The public
--bit-AiEmptyState-* variables (see the CSS variables table) re-skin it from :root, an ancestor
or Style.
Styled
Ask a question to get started.
Classy
Ask a question to get started.
CSS variables
Ask a question to get started.
RTL
Use BitAiEmptyState 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.
BitAiEmptyState CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-AiEmptyState-gap | spacing(1.5) | Room between the icon, the heading, the line and the suggestions. |
| --bit-AiEmptyState-padding | spacing(6) spacing(2) | Inset of the empty state. |
| --bit-AiEmptyState-color | var(--bit-clr-fg-sec) | Text of the supporting line. |
| --bit-AiEmptyState-icon-color | var(--bit-clr-pri) | Color of the icon. |
| --bit-AiEmptyState-icon-size | var(--bit-tpg-fs-4xl) | Size of the icon. |
| --bit-AiEmptyState-title-color | var(--bit-clr-fg-pri) | Color of the heading. |
| --bit-AiEmptyState-title-font-size | var(--bit-tpg-fs-xl) | Size of the heading. |
| --bit-AiEmptyState-title-font-weight | var(--bit-tpg-fw-semibold) | Weight of the heading. |
| --bit-AiEmptyState-suggestions-gap | spacing(1) | Room between two suggestions. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitAiEmptyState parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| Body | string? | null | The supporting line under the heading, in place of the EmptyBody of the string table ("Ask a question to get started."). |
| ChildContent | RenderFragment? | null | The content rendered in place of the supporting line, which takes precedence over Body. |
| Classes | BitAiEmptyStateClassStyles? | null | Custom CSS classes for different parts of the empty state. |
| Icon | BitIconInfo? | null | The icon of the empty state, provided as custom CSS classes of an external icon library (or a ligature of Material Icons / Symbols, since it is drawn by a BitIcon). It wins over IconName; the library's stylesheet is the app's to load. |
| IconName | string? | null | The name of the icon of the empty state, from the built-in Fluent UI icons (BitIconName). Only two dozen of them ship in the core package's font; the rest need the Bit.BlazorUI.Icons package. Left unset (and with no Icon), a sparkle (AutoEnhanceOn) drawn from the AI package's own glyphs. |
| IconTemplate | RenderFragment? | null | The template rendered in place of the icon, which takes precedence over Icon and IconName. Unlike the glyph, it is not hidden from assistive technologies: mark it aria-hidden when it only decorates. |
| OnSuggestion | EventCallback<string> | The callback for when a suggestion is chosen, with its text. Not raised while the empty state is disabled. | |
| Styles | BitAiEmptyStateClassStyles? | null | Custom CSS styles for different parts of the empty state. |
| Suggestions | IReadOnlyList<string>? | null | The example prompts offered as one-tap starters, each a button. |
| Title | string? | null | The heading, in place of the EmptyTitle of the string table ("How can I help?"). |
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. |
BitAiEmptyStateClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitAiEmptyState. |
| Icon | string? | null | Custom CSS classes/styles for the icon of the BitAiEmptyState. |
| Title | string? | null | Custom CSS classes/styles for the heading of the BitAiEmptyState. |
| Body | string? | null | Custom CSS classes/styles for the supporting line of the BitAiEmptyState. |
| Suggestions | string? | null | Custom CSS classes/styles for the container of the suggestions of the BitAiEmptyState. |
| Suggestion | BitButtonClassStyles? | null | Custom CSS classes/styles for each suggestion button of the BitAiEmptyState. |
BitIconInfo properties
Names a glyph for any icon set. A class-based set (Fabric MDL2, FontAwesome, Bootstrap Icons) is described by BaseClass, Prefix and Name; a ligature-based set (Material Icons, Material Symbols) puts the family on BaseClass and the ligature on Content. The static factories build each of them: Bit(name), Fa(icons), Bi(name), Mi(name, style), Ms(name, style), Css(cssClasses). A plain string converts implicitly and is taken as the complete class list.
| Name | Type | Default value | Description |
|---|---|---|---|
| Name | string? | null | The name of the icon. For an external set this can be the complete CSS class list when BaseClass and Prefix are empty. |
| BaseClass | string? | null | The base CSS class of the icon set - "bit-icon" for the built-in set, "bi" for Bootstrap Icons, "material-symbols-outlined" for Material Symbols. Leave it empty for a set that needs none. |
| Prefix | string? | null | The CSS class prefix written before the icon name - "bit-icon--" for the built-in set, "bi-" for Bootstrap Icons. Leave it empty for a set that uses none. |
| Content | string? | null | The text rendered inside the icon element - the ligature of a ligature-based icon set such as Material Icons or Material Symbols. Class-based sets leave it null. The empty state draws its icon with a BitIcon, which renders it. |
| IsEmpty | bool | Whether this instance names no glyph at all. An empty instance is treated as no icon, so an IconName given beside it is still used. |
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.