Context

Cuánto de la ventana de contexto se gastó, como un medidor con el desglose al pasar el mouse.

1'use client';
2
3import { Context } from '@/components/ui/context';
4
5export function Default() {
6  return (
7    <div className="flex w-full justify-center py-8">
8      <Context maxTokens={200000} usedTokens={84320}>
9        <Context.Trigger />
10        <Context.Content align="center">
11          <Context.Header />
12          <Context.Body>
13            <Context.Usage label="Input" tokens={61200} />
14            <Context.Usage label="Output" tokens={14100} tone="info" />
15            <Context.Usage label="Reasoning" tokens={6800} tone="warning" />
16            <Context.Usage label="Cached" tokens={2220} tone="success" />
17          </Context.Body>
18          <Context.Footer>Costs are estimated from the model pricing you configure.</Context.Footer>
19        </Context.Content>
20      </Context>
21    </div>
22  );
23}

Instalación

pnpm dlx nachui add context

Anatomía

1import { Context } from '@/components/ui/context';

1<Context maxTokens={200000} usedTokens={84320}>
2  <Context.Trigger />
3  <Context.Content>
4    <Context.Header />
5    <Context.Body>
6      <Context.Usage label="Input" tokens={61200} />
7      <Context.Usage label="Output" tokens={14100} tone="info" />
8    </Context.Body>
9    <Context.Footer>Estimado según el precio de tu modelo.</Context.Footer>
10  </Context.Content>
11</Context>

El trigger es un anillo que se llena junto con la ventana, con el porcentaje al lado. El panel se abre al pasar el mouse y al recibir foco, y el clic lo fija abierto para teclado y touch.

Composición

Usa la siguiente composición para construir un Context:

Context
├── Context.Trigger
└── Context.Content
    ├── Context.Header
    ├── Context.Body
    │   └── Context.Usage
    └── Context.Footer

Filas de uso

Context.Usage es genérico a propósito. Toma un label, un tokens opcional y un tone para el punto, así nombrás los grupos que reporta tu proveedor en vez de heredar los de otro. Input, output, reasoning y cached es un buen set por defecto.

Tanto Header como Usage renderizan contenido razonable si no les pasás hijos, y los hijos que sí pases lo reemplazan por completo.

Referencia de API

Context

Prop	Type	Default	Description
`maxTokens`	`number`	-	Tamaño de la ventana de contexto
`usedTokens`	`number`	-	Tokens gastados hasta ahora
`open`	`boolean`	-	Estado abierto controlado
`onOpenChange`	`(open: boolean) => void`	-	Se llama al cambiar el estado
`className`	`string`	-	Clases CSS adicionales

Context.Content

Prop	Type	Default	Description
`side`	`'top' \| 'bottom'`	`'bottom'`	Borde desde el que abre
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Anclaje horizontal
`className`	`string`	-	Clases CSS adicionales

Context.Usage

Prop	Type	Default	Description
`label`	`ReactNode`	-	Nombre del grupo
`tokens`	`number`	-	Cantidad mostrada a la derecha
`tone`	`'default' \| 'muted' \| 'success' \| 'info' \| 'warning'`	`'default'`	Color del punto
`className`	`string`	-	Clases CSS adicionales

Context.Trigger / Context.Header / Context.Body / Context.Footer

Prop	Type	Default	Description
`className`	`string`	-	Clases CSS adicionales

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorChain of Thought

SiguientePrompt Input