| import { useTranslation } from "react-i18next"; |
| import { I18nKey } from "#/i18n/declaration"; |
| import { MetricRow } from "./metric-row"; |
|
|
| interface UsageSectionProps { |
| usage: { |
| prompt_tokens: number; |
| completion_tokens: number; |
| cache_read_tokens: number; |
| cache_write_tokens: number; |
| }; |
| } |
|
|
| export function UsageSection({ usage }: UsageSectionProps) { |
| const { t } = useTranslation("openhands"); |
|
|
| return ( |
| <> |
| <MetricRow |
| label={t(I18nKey.CONVERSATION$INPUT)} |
| value={usage.prompt_tokens.toLocaleString()} |
| /> |
| |
| <div className="grid grid-cols-2 gap-2 pl-4 text-sm"> |
| <span className="text-[var(--oh-muted)]"> |
| {t(I18nKey.CONVERSATION$CACHE_HIT)} |
| </span> |
| <span className="text-right"> |
| {usage.cache_read_tokens.toLocaleString()} |
| </span> |
| <span className="text-[var(--oh-muted)]"> |
| {t(I18nKey.CONVERSATION$CACHE_WRITE)} |
| </span> |
| <span className="text-right"> |
| {usage.cache_write_tokens.toLocaleString()} |
| </span> |
| </div> |
| |
| <MetricRow |
| label={t(I18nKey.CONVERSATION$OUTPUT)} |
| value={usage.completion_tokens.toLocaleString()} |
| /> |
| |
| <MetricRow |
| label={t(I18nKey.CONVERSATION$TOTAL)} |
| value={(usage.prompt_tokens + usage.completion_tokens).toLocaleString()} |
| labelClassName="font-semibold" |
| valueClassName="font-bold" |
| showBorder={false} |
| /> |
| </> |
| ); |
| } |
|
|
