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.

\n**A themed, configured region**: ```razor @implements IAsyncDisposable @* A scoped preset, a density multiplier and a direction, for this region alone. *@
``` ```csharp private static readonly BitAiStrings French = new FrenchAiStrings(); private BitAiChatSession? session; private BitAiUiOptions options = BitAiUiOptions.Default; private string? designSystem = "fluent"; private string? scheme = "light"; private string? density = "1"; private bool rtl; private bool french; private bool showUsage = true; private bool showModelName = true; private bool showTimestamps; private bool showMessageActions = true; private bool showLineNumbers; private readonly string[] suggestions = ["Show me what changed"]; [Inject] private BitAiChatSessionFactory SessionFactory { get; set; } = default!; protected override void OnInitialized() { session = SessionFactory.Create(AiDemoConversations.Long(6)); RebuildOptions(); } // A new record rather than a mutation: a new instance is what tells the provider to hand the change down. private void RebuildOptions() => options = BitAiUiOptions.Default with { Strings = french ? French : BitAiStrings.Default, ShowUsage = showUsage, ShowModelName = showModelName, ShowTimestamps = showTimestamps, ShowMessageActions = showMessageActions, ShowLineNumbers = showLineNumbers, }; public ValueTask DisposeAsync() => session?.DisposeAsync() ?? ValueTask.CompletedTask; ``` `FrenchAiStrings.cs`: ```csharp // Overrides what it translates, and keeps the English of the rest. public sealed class FrenchAiStrings : BitAiStrings { public override string PromptPlaceholder => "Écrivez un message..."; public override string Send => "Envoyer"; public override string Stop => "Arrêter"; public override string Copy => "Copier"; public override string Copied => "Copié"; public override string Regenerate => "Régénérer"; public override string GoodResponse => "Bonne réponse"; public override string BadResponse => "Mauvaise réponse"; public override string ScrollToLatest => "Aller au plus récent"; public override string Thinking => "Réflexion"; public override string Sources => "Sources"; public override string AttachFile => "Joindre des fichiers"; public override string ShowDetails => "Afficher les détails"; } ``` `Program.cs`: ```csharp builder.Services.AddBitBlazorUIAIServices(ai => { ai.UseTransport(AiDemoTransports.Echo()); // The defaults of the whole app; a BitAiOptionsProvider, or the UiOptions of one chat, override them. ai.ConfigureUi(options => options with { ShowUsage = true, ShowModelName = true, ShowTimestamps = false, }); }); ```

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.