# AiReasoningPartView
## Description
BitAiReasoningPartView is the collapsible panel that holds the reasoning of a model, rendered as Markdown. It is open while the model is still thinking, so the user sees progress rather than a spinner, with loading dots in its header; once the reasoning is complete its title says how long the model thought for and it collapses, so it does not compete with the answer. A user who opened or closed it by hand wins over both. It follows its part on its own, re-rendering at most once per render interval while the reasoning streams in.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Classes | `BitAiReasoningPartViewClassStyles?` | null | Custom CSS classes for different parts of the reasoning panel. |
| Part | `BitAiReasoningPart` | | The reasoning to render (required). The panel subscribes to the part and re-renders itself as it grows, at most once per BitAiUiOptions.RenderInterval; it is open while the part streams and collapses when it completes (when BitAiUiOptions.CollapseReasoning is on), unless the user toggled it. A new part starts the panel over. |
| Styles | `BitAiReasoningPartViewClassStyles?` | null | Custom CSS styles for different parts of the reasoning panel. |
| 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
### BitAiReasoningPartViewClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitAiReasoningPartView. |
| Collapsible | `BitAiCollapsibleClassStyles?` | null | Custom CSS classes/styles for the BitAiCollapsible that is the panel of the BitAiReasoningPartView (and, through its Accordion, for the parts of the accordion that draws it). |
| Header | `string?` | null | Custom CSS classes/styles for the content of the header of the BitAiReasoningPartView: its icon, its title and its loading dots. |
| Icon | `string?` | null | Custom CSS classes/styles for the icon in the header of the BitAiReasoningPartView. |
| Title | `string?` | null | Custom CSS classes/styles for the title in the header of the BitAiReasoningPartView. |
| Loading | `BitLoadingClassStyles?` | null | Custom CSS classes/styles for the loading dots (a BitBouncingDotsLoading) the header of the BitAiReasoningPartView shows while the model is still reasoning. |
| Body | `string?` | null | Custom CSS classes/styles for the scrolling body of the BitAiReasoningPartView, which holds the reasoning. |
| Markdown | `BitAiStreamingMarkdownClassStyles?` | null | Custom CSS classes/styles for the BitAiStreamingMarkdown the BitAiReasoningPartView renders the reasoning with. |
### BitAiReasoningPart Properties
The reasoning of a model, kept apart from the answer so it can be collapsed, left out of copy-to-clipboard and kept out of the plain text that goes back to the provider on the next turn. new BitAiReasoningPart() creates an empty part that expects more reasoning (streaming), new BitAiReasoningPart(text) a finished one (with no Duration), and new BitAiReasoningPart(text, partId) a part with an identifier a transport addresses it by. It is a BitAiTextPart, so Text, IsStreaming, Append, Complete and the rest are the same members (see AiTextPartView).
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| StartedAt | `DateTimeOffset` | | When the reasoning began: the moment the part was created. |
| CompletedAt | `DateTimeOffset?` | null | When the reasoning finished: the moment Complete was called on a streaming part. |
| Duration | `TimeSpan?` | null | How long the model spent reasoning, once finished; the panel's title says it (BitAiStrings.ReasonedFor), and shows BitAiStrings.Reasoning while it is null. |
| Signature | `string?` | null | An opaque signature some providers require when reasoning is replayed on a later turn. |
| Kind | `string` | "reasoning" | The part kind (BitAiMessagePartKinds.Reasoning), which picks the renderer of the part in a message. |
## 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-AiReasoningPartView-color` | var(--bit-clr-fg-sec) | Text color of the reasoning. |
| `--bit-AiReasoningPartView-font-size` | var(--bit-tpg-fs-sm) | Text size of the reasoning. |
| `--bit-AiReasoningPartView-max-height` | spacing(44) | Height past which the reasoning scrolls inside the panel. |
## Examples
\n**Basic**:
```razor
Ask a question
Stop
@if (streamedReasoning is not null)
{
```
```csharp
private readonly BitAiUiOptions openReasoningOptions = BitAiUiOptions.Default with { CollapseReasoning = false };
```
\n**Cascading parameters**:
```razor
```
```csharp
// finishedReasoning is the one of the Basic example.
private readonly BitAiReasoningPartViewParams[] reasoningPartViewParams =
[
new()
{
Style = "max-width: 32rem;",
Styles = new() { Icon = "color: goldenrod;", Title = "font-style: italic;" },
},
];
```
\n**Style & Class**:
```razor
```
```csharp
private readonly BitAiReasoningPart rtlReasoning = new("""
کاربر دربارهی **هزینهی یک رفتوبرگشت** میپرسد. دو هزینه را باید از هم جدا کرد:
1. هزینهی ثابت اتصال؛
2. هزینهی هر توکن، که با طول پاسخ بیشتر میشود.
""");
private readonly BitAiUiOptions persianOptions = BitAiUiOptions.Default with
{
CollapseReasoning = false,
Strings = new PersianStrings(),
};
private sealed class PersianStrings : BitAiStrings
{
public override string Reasoning => "استدلال";
public override string ReasonedFor(TimeSpan duration) => $"{Math.Ceiling(duration.TotalSeconds)} ثانیه فکر کرد";
}
```