AI
AiCollapsible
Bit.BlazorUI.AI
BitAiCollapsible is a disclosure panel with a real button header, so it is keyboard reachable and announced with its expanded state. The reasoning panel of a message (BitAiReasoningPartView) is built on it, and it fits any detail an answer folds away - the arguments of a tool, the details of an error. It is drawn by a BitAccordion, so it follows the theme and is restyled like one, and its body is rendered only while it is open.
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.
BitAiCollapsible needs no chat session: it is a plain panel the other AI components are built from. Its header is a
button inside a heading that carries aria-expanded and aria-controls, so a screen reader announces
whether it is open and Enter or Space toggles it. The SuffixTemplate sits beside the heading rather than in
the button, so a status chip is not read as part of the name of the toggle. The panel is drawn by a
BitAccordion, whose parts and --bit-Accordion-* variables
restyle it. See it at work around the reasoning of a model in the
AiReasoningPartView and the
Reasoning scenario.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
A Title and the content of the panel. It starts closed; Open starts it open. The body is rendered only
while the panel is open, so a closed panel costs nothing however much it holds.
The last failure was a timeout on the second attempt, after 30 seconds.
Binding
The panel opens and closes itself as the user toggles it and reports the new state through OpenChanged, so
@bind-Open keeps a field of the page in step - and a page that sets the field opens and closes the panel.
The panel is closed.
Toggled 0 times by the user.
Templates
HeaderTemplate replaces the title beside the chevron with any markup, which stays inside the toggle button.
SuffixTemplate puts content at the end of the header, beside the toggle rather than in it - the place for a
status chip.
Completed
Disabled
A Disabled panel keeps the state it is in and does not toggle; its root carries bit-dis like every
disabled component.
Shown, and kept open.
Cascading parameters
BitParams with a BitAiCollapsibleParams sets the look of every panel inside it - the reasoning panels a
chat draws included - here a title in the primary color. A panel's own value still wins, and wins whole: the last
one sets Styles of its own, which take the place of the cascaded ones.
Style & Class
Style and Class reach the root, Styles and Classes its parts: Accordion takes the
classes and styles of every part of the BitAccordion that draws the panel. The collapsible publishes no CSS variables
of its own: the --bit-Accordion-* variables restyle it, set on any ancestor or on its Style.
RTL
In right-to-left text the chevron leads from the right, whether the direction comes from Dir or from a
dir attribute around the panel.
دو حالت رندر را مقایسه کن و برای هر کدام یک عدد بده.
API
Every parameter, public member, sub-class and enum this component exposes.
BitAiCollapsible parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | The body of the panel. It is rendered only while the panel is open: closing the panel unmounts it, so a component inside starts again from its initial state the next time the panel opens. |
| Classes | BitAiCollapsibleClassStyles? | null | Custom CSS classes for different parts of the collapsible. |
| HeaderTemplate | RenderFragment? | null | The custom content of the header, which replaces the Title text beside the chevron. It is rendered inside the toggle button, so it is the accessible name of the toggle: keep interactive content out of it (use SuffixTemplate). |
| Open | bool | false | Whether the panel is open. The panel also opens and closes itself when the user toggles it, and reports that through OpenChanged, so it can be bound with @bind-Open. |
| OpenChanged | EventCallback<bool> | The callback raised with the new state when the user opens or closes the panel. | |
| Styles | BitAiCollapsibleClassStyles? | null | Custom CSS styles for different parts of the collapsible. |
| SuffixTemplate | RenderFragment? | null | The content shown at the end of the header, beside the toggle rather than inside it, such as a status chip. It is not part of the accessible name of the toggle. |
| Title | string? | null | The text of the header, used when no HeaderTemplate is given. |
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. |
BitAiCollapsibleClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitAiCollapsible. |
| Accordion | BitAccordionClassStyles? | null | Custom CSS classes/styles for the parts of the BitAccordion that draws the panel of the BitAiCollapsible (its header, title, expander icon, content and the rest). |
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.