# AiEmptyState
## Description
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.
## 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?"). |
| 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. |
## 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. |
## Enums
### 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. |
## Sub Classes
### 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. |
## CSS Variables
Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance to restyle it and every instance nested inside it, which inherits the value too - a parameter changes one alone, as does the real CSS property on its `Style` / `Styles` when that property does not inherit (`opacity`); an inherited one (`color`, `font-family`) reaches the nested instances that do not set it themselves.
| 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. |
## Examples
\n**Basic**:
```razor
Questions are answered from the component gallery and nothing else.
```
\n**Suggestions**:
```razor
👋
```
\n**Disabled**:
```razor
```
```csharp
private readonly BitAiEmptyStateParams[] emptyStateParams =
[
new()
{
Title = "Ask the docs",
Body = "Both empty states take their words and glyph from the BitParams around them.",
IconName = BitIconName.ChatBot,
}
];
```
\n**External Icons**:
```razor
Chosen: @(chosenSuggestion ?? "-")
```
```csharp
private string? chosenSuggestion;
private readonly string[] suggestions = ["Summarize this page", "Write a release note", "Explain render modes"];
// Submit it to a session here: await session.SubmitAsync(suggestion);
private void HandleSuggestion(string suggestion)
{
chosenSuggestion = suggestion;
}
```
\n**Icon**:
```razor