This commit is contained in:
Timothy Jaeryang Baek 2026-09-30 20:58:01 +04:00
parent a5bc78300e
commit 7e317fbada

View file

@ -18,6 +18,7 @@
import { WEBUI_API_BASE_URL } from '$lib/constants';
import { formatNumber } from '$lib/utils';
import { goto } from '$app/navigation';
import type { Instance } from 'tippy.js';
const i18n = getContext('i18n');
@ -83,6 +84,7 @@
{ input_tokens: number; output_tokens: number; total_tokens: number }
> = {};
let totalTokens = { input: 0, output: 0, total: 0 };
let tokenTooltip: Instance | null = null;
let loading = true;
@ -232,6 +234,12 @@
}
</script>
<svelte:window
on:keydown={(event) => {
if (event.key === 'Escape') tokenTooltip?.hide();
}}
/>
<div class="flex items-center justify-between mb-2 gap-2">
<h2 class="text-sm font-medium text-gray-900 dark:text-white shrink-0">
{$i18n.t('Analytics')}
@ -291,8 +299,25 @@
>
{$i18n.t('messages')}</span
>
<Tooltip content={$i18n.t('Token counts are estimates and may not reflect actual API usage')}>
<span class="cursor-help"
<Tooltip
as="button"
className="whitespace-nowrap rounded-sm cursor-pointer hover:underline decoration-dotted underline-offset-4 focus-visible:outline focus-visible:outline-offset-2"
placement="bottom"
interactive
tippyOptions={{
trigger: 'mouseenter focus click',
appendTo: () => document.body,
aria: { content: 'describedby', expanded: true },
onCreate: (instance) => (tokenTooltip = instance),
onDestroy: () => (tokenTooltip = null)
}}
content={`<div class="p-1 text-left">
<div class="flex justify-between gap-6"><span>${$i18n.t('Input')}</span><span class="tabular-nums">${totalTokens.input.toLocaleString()}</span></div>
<div class="flex justify-between gap-6 mt-1"><span>${$i18n.t('Output')}</span><span class="tabular-nums">${totalTokens.output.toLocaleString()}</span></div>
<div class="mt-2 max-w-56 text-gray-400">${$i18n.t('Token counts are estimates and may not reflect actual API usage')}</div>
</div>`}
>
<span
><span class="font-normal text-gray-900 dark:text-gray-300"
>{formatNumber(totalTokens.total)}</span
>