ContextMeter

How much of the model's memory the chat has used.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { ContextMeter } from '@weft-js/warp'import type { ContextUse } from '@weft-js/warp'export function Compact() {  const used = state(186000)  return <ContextMeter used={used.value} limit={200000} parts={CONTEXT.parts} showTokens onCompact={() => (used.value = 38000)} />}const CONTEXT: ContextUse = { used: 46000, limit: 200000, parts: [{ label: 'Logs', tokens: 22000 }, { label: 'History', tokens: 16000 }, { label: 'Tools', tokens: 8000 }] }

Installation

npm install @weft-js/warp

Usage

tsx

import { ContextMeter } from '@weft-js/warp'

Levels

It turns to caution at 80% and critical at 95%. Hover for what fills it.

tsx

import { ContextMeter } from '@weft-js/warp'export function Levels() {  return (    <>      <ContextMeter used={64000} limit={200000} showTokens />      <ContextMeter used={168000} limit={200000} showTokens />      <ContextMeter used={194000} limit={200000} showTokens />    </>  )}

Accessibility

It is a meter that can take focus, so keyboard users get the tooltip too.

API Reference

Prop	Type	Default	Description
`used`	`number`	—	Tokens used.
`limit`	`number`	—	Tokens available.
`parts`	`{ label: string; tokens: number; }[]`	—	What fills it, for the tooltip.
`showTokens`	`boolean`	`false`	Adds the count beside the percent.

Event	Type	Default	Description
`onCompact`	`(() => void)`	—	Offers /compact when it is getting full.

RelatedPrompt