Skip to content
BlazorUI

AI

AiReasoningPartView

Bit.BlazorUI.AI

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.

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.

A chat renders it for every BitAiReasoningPart of a message (through BitAiMessagePartView), filled by the BitAiReasoningDeltaEvents of its transport; render it yourself to show reasoning anywhere else. It needs no chat session, only the part. Its panel is a BitAiCollapsible, whose header is a real button announced with its expanded state; the loading dots in it are decorative, so nothing is announced while the model thinks. Long reasoning scrolls inside the panel (past --bit-AiReasoningPartView-max-height), and while it has something to scroll the scrolling box is a tab stop of its own, a group named by the Reasoning text of the strings, so a keyboard can scroll it in every browser. A printed panel shows all of what it holds open. Whether a finished panel collapses is BitAiUiOptions.CollapseReasoning, and its title text comes from BitAiStrings (see AiOptionsProvider). See it at work in the Reasoning scenario.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

Part is the BitAiReasoningPart to show. A part created with its text is finished, so the panel starts collapsed: open it to read the reasoning, rendered as Markdown.

Streaming

A part created empty is streaming. The panel is open with loading dots while the reasoning arrives, and follows the part by itself; when the part completes, its title turns into how long the model thought for and the panel collapses - unless the user toggled it in the meantime. This one is fed by the scripted reasoning transport of this site (AiDemoTransports.Reasoning()), whose answer streams into a text part below it.



Keep it open

CollapseReasoning of the AI options (on by default) is what collapses a finished panel. A BitAiOptionsProvider that turns it off keeps the reasoning in view, finished or not.

The user asks about the cost of a round trip. Two costs are worth separating:

  1. the fixed cost of the connection - one handshake, one request;

  2. the cost per token, which scales with the length of the answer.

A number for each reads better than an adjective.

Cascading parameters

BitParams with a BitAiReasoningPartViewParams sets the look of every reasoning panel inside it - inside a chat, the reasoning of every message. Whether a finished panel collapses is not one of them: that is CollapseReasoning of the AI options. It is a default, not an override: a panel keeps what it sets itself (the last one sets Styles of its own, which replace the cascaded ones).


Style & Class

Style and Class reach the root, Styles and Classes its parts: the Collapsible panel, the Header content with its Icon, Title and Loading dots, the scrolling Body and the Markdown the reasoning is rendered with. The public --bit-AiReasoningPartView-* variables (see the CSS variables table) restyle the reasoning text; the frame is the collapsible's, restyled by the --bit-Accordion-* variables, and the Markdown by the --bit-AiMarkdownView-* ones.





RTL

In right-to-left text the chevron, the icon and the title lead from the right, whether the direction comes from Dir or from a dir attribute around the panel; its title is the localizable text of the options.

کاربر درباره‌ی هزینه‌ی یک رفت‌وبرگشت می‌پرسد. دو هزینه را باید از هم جدا کرد:

  1. هزینه‌ی ثابت اتصال؛

  2. هزینه‌ی هر توکن، که با طول پاسخ بیشتر می‌شود.

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.

BitAiReasoningPartView CSS variables

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.

API

Every parameter, public member, sub-class and enum this component exposes.

BitAiReasoningPartView 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.

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.

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.

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.