Skip to content
BlazorUI

AI scenarios

Options & theming

Bit.BlazorUI.AI Scripted transport

One region of the page with its own options, design system, scheme, density and direction - the options through BitAiOptionsProvider, everything visual through the same theme as the rest of bit BlazorUI.

Live demo

Change the controls beside the chat: they re-skin and reconfigure only the region the chat is in.

A themed, configured region

Question 1: what happens at scale here?

Answer 1. The cost is dominated by rendering, not by parsing. Coalescing updates removes most of it, and virtualization removes the rest.

Demo Large180 tokensInput: 120 Output: 60
Question 2: what happens at scale here?

Here is the shape of it:

csharp 
var budget = TimeSpan.FromMilliseconds(18);
scheduler.Request();

The interval is the only dial that matters.

Demo Large184 tokensInput: 122 Output: 62
Question 3: what happens at scale here?
Searched the documentation
scale 4
  • Render modes 94%
  • Circuit lifetime 81%

Two passages matched, and they say the same thing.

Demo Large188 tokensInput: 124 Output: 64

Options

BitAiOptionsProvider cascades a BitAiUiOptions to every AI component inside it, so a page or a region of one sets its preferences once rather than on every component: the string table (Strings, a BitAiStrings subclass for another language or another tone), what a message shows (ShowUsage, ShowModelName, ShowTimestamps, ShowMessageActions, ShowLineNumbers, ...), the render interval, the virtualization threshold, the image policy. It renders no element of its own, and an inner provider overrides an outer one for its own content.

The other two places options come from: ai.ConfigureUi(...) sets the defaults of the whole app, and the UiOptions of one BitAiChat configures that chat alone.

The chat opens on a six-message conversation built in code, so there is something to restyle; what you send goes to the transport registered for the site, which echoes it. Each option toggle (strings and the Show ones) builds a new BitAiUiOptions record (BitAiUiOptions.Default with { ... }): the options are immutable, and a new instance is what tells the provider to hand the change down.

Theming

Scheme, accent, density and direction are not options of the AI components: they are styled with the global --bit-* tokens like every other component of the library, so they follow the theme there is.

  • A design system and scheme for a region come from a scoped preset, bit-theme="material-dark" on any element - the Fluent 2, Material and Cupertino presets ship with Bit.BlazorUI.Extras, whose bundles the host page links.
  • Density is the --bit-layout-density-scale multiplier, set in CSS as here or through BitTheme.Layout.DensityScale of a BitThemeProvider.
  • Direction is a dir on an ancestor, or the Dir parameter of one component.
  • The accent is the site's: change it with the swatches in the header (AccentColorSwitcher), and the chat follows.

Each component also has its own --bit-Ai<Name>-* variables and its Classes / Styles for what one component should look like differently - see its page, and Theming for the whole system.

Components used

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.