Chat Context

Счётчик использования контекстного окна — иконка-индикатор + popover с разбивкой.

import {
  ChatContext,
  ChatContextPopup,
  ChatContextTrigger,
} from "@/components/ui/chat-context";

export default function Particle() {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <ChatContext
        breakdown={[
          { label: "Системный промпт", value: 1_240 },
          { label: "Переписка", value: 41_080 },
          { label: "Прикреплённые документы", value: 6_120 },
        ]}
        max={200_000}
        modelId="claude-opus-4-7"
        used={48_440}
      >
        <ChatContextTrigger />
        <ChatContextPopup />
      </ChatContext>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-context

Использование

import {
  ChatContext,
  ChatContextPopup,
  ChatContextTrigger,
} from "@/components/ui/chat-context";
 
<ChatContext
  used={48_320}
  max={200_000}
  modelId="claude-opus-4-7"
  breakdown={[
    { label: "System", value: 1_200 },
    { label: "Conversation", value: 41_000 },
    { label: "Documents", value: 6_120 },
  ]}
>
  <ChatContextTrigger />
  <ChatContextPopup />
</ChatContext>

API

Свойство	Описание
`used`	Токенов израсходовано.
`max`	Максимальный контекст модели.
`modelId`	Опционально, показывается в popover.
`breakdown`	Опциональный массив `{ label, value }` — построчная разбивка в popover.

Триггер и popup — обычные PopoverTrigger / PopoverPopup, кастомизируются как любые popover-компоненты Oracul.

Само значение used / max ты считаешь сам (например, через tokenlens или LanguageModelUsage из AI SDK). Компонент агностичен к источнику — он только рендерит.

На этой странице

Установка Использование API