# AiContextMeter
**Also known as:** TokenMeter
## Description
BitAiContextMeter shows how much of the context window of the model the conversation is using - a label, a meter and a percentage. Running out of context is the failure users understand least: the model simply starts forgetting. So the meter turns to the warning color at the Warn mark and to the error color at the Critical one, and says so once through a polite live region as it crosses each. It reads the tokens and the window off a conversation, takes them directly, or takes the window from a model, and counts what is about to be added (the prompt being typed) on top.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Classes | `BitAiContextMeterClassStyles?` | null | Custom CSS classes for different parts of the context meter. |
| Conversation | `BitAiConversation?` | null | Reads the used tokens and the window from a conversation (see Measure) instead of taking them directly: the used tokens it reports win over Used, while an explicit Window wins over the window it reports. |
| Critical | `double` | 0.95 | The fraction of the window at which the meter turns to its critical (error) styling and announces BitAiStrings.ContextCritical once. |
| Model | `BitAiModel?` | null | Supplies the window (its ContextWindow) when neither Window nor the Conversation carries one. |
| PendingTokens | `long` | 0 | An estimate of the tokens about to be added - the prompt being typed, a file about to be attached - counted on top of what the conversation has used, so the meter warns before the request that would overflow the window. |
| Styles | `BitAiContextMeterClassStyles?` | null | Custom CSS styles for different parts of the context meter. |
| Used | `long` | 0 | The tokens used so far. Overridden by the Conversation when it carries usage. |
| Warn | `double` | 0.8 | The fraction of the window at which the meter turns to its warning styling and announces BitAiStrings.ContextWarning once. |
| Window | `long?` | null | The size of the context window in tokens. When null, the window the Conversation reports is used, else the ContextWindow of the Model; nothing is rendered while none is known. |
| 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 |
| :--- | :--- | :------------ | :---------- |
| Measure | `(long? Used, long? Window)` | | BitAiContextMeter.Measure(BitAiConversation conversation), static: works out how full the context is from a conversation - the tokens the next request will carry (the prompt plus the output of its latest assistant message that reports usage) and the window (the newest ContextWindow its messages report), either of which is null when the conversation does not report it. Summing every turn's usage instead, as a total-cost readout does, counts the early turns once per later turn and runs the meter to the top long before the model forgets anything. |
| 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
### BitAiContextMeterClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitAiContextMeter. |
| Label | `string?` | null | Custom CSS classes/styles for the label ("Context") of the BitAiContextMeter. |
| Meter | `BitProgressClassStyles?` | null | Custom CSS classes/styles for the BitProgress meter of the BitAiContextMeter. |
| Percent | `string?` | null | Custom CSS classes/styles for the percentage readout of the BitAiContextMeter. |
| Status | `string?` | null | Custom CSS classes/styles for the visually hidden live region of the BitAiContextMeter. |
## 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-AiContextMeter-color` | var(--bit-clr-fg-sec) | The label and the percentage. |
| `--bit-AiContextMeter-warning-color` | var(--bit-clr-wrn-fg) | The label and the percentage past the Warn mark. The bar is drawn in the warning role there, which the state of the reading says rather than a choice of the app's. |
| `--bit-AiContextMeter-critical-color` | var(--bit-clr-err-fg) | The label and the percentage past the Critical mark, where the bar is drawn in the error role. |
| `--bit-AiContextMeter-font-size` | var(--bit-tpg-fs-xs) | Size of the label and the percentage. |
| `--bit-AiContextMeter-gap` | spacing(1.5) | Room between the label, the bar and the percentage. |
| `--bit-AiContextMeter-meter-max-width` | spacing(24) | Width the bar grows to where there is room, and asks for where the meter is sized to its content (in a flex row, say). |
| `--bit-AiContextMeter-track-color` | var(--bit-Progress-track-color, var(--bit-clr-brd-sec)) | The empty part of the bar. The secondary border color by default rather than the background a BitProgress draws its track in, so it stands off the surface the meter sits on. |
## Examples
\n**Basic**:
```razor
Send a message
Start over
```
```csharp
private readonly BitAiContextMeterParams[] meterParams =
[
new() { Warn = 0.5, Critical = 0.6, Styles = new() { Label = "font-weight: bold" } }
];
```
\n**Style & Class**:
```razor
@model.Name
}
```
```csharp
// AiDemoCatalog.Models are the models of this site, with context windows of 200,000, 128,000 and 32,000 tokens:
// https://github.com/bitfoundation/bitplatform/blob/develop/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Services/AI/AiDemoCatalog.cs
```
\n**Conversation**:
```razor
@implements IAsyncDisposable
Messages: @tinySession.Conversation.Messages.Count
```
```csharp
// AiDemoInteractiveTransports.Metered is a scripted transport of this site that reports usage and the context window:
// https://github.com/bitfoundation/bitplatform/blob/develop/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Services/AI/AiDemoInteractiveTransports.cs
private static readonly BitAiModel tinyModel = new("demo-tiny", "Demo Tiny") { ContextWindow = 340 };
private BitAiChatSession tinySession = new(AiDemoInteractiveTransports.Metered(tinyModel));
private bool isSending;
private async Task SendToTinyModel()
{
isSending = true;
await tinySession.SubmitAsync("Summarize the design review notes, then list the three decisions we still owe the platform team " +
"and who is waiting on each one, so I can chase them before Friday and close the review.");
isSending = false;
}
private async Task StartOver()
{
await tinySession.DisposeAsync();
tinySession = new(AiDemoInteractiveTransports.Metered(tinyModel));
}
public ValueTask DisposeAsync() => tinySession.DisposeAsync();
```
\n**Disabled**:
```razor