Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-21 09:46:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

✨ feat: Add token usage indicator to chat input

Browse source 
Add TokenUsageIndicator component with circular progress ring
Create useTokenUsage hook with Jotai atom for state
Add model context window lookups to data-provider
Consolidate token utilities (output limits, TOKEN_DEFAULTS)
Display input/output tokens and percentage of context used
This commit is contained in:
Marco Beretta 2025-12-14 00:36:45 +01:00
parent 4d7e6b4a58
commit 841a37e8cb
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
11 changed files with 710 additions and 348 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/src/components/Chat/Input/ChatForm.tsx
View file

@ -18,7 +18,9 @@ import {
useQueryParams,
useSubmitMessage,
useFocusChatEffect,
useTokenUsageComputation,
} from '~/hooks';
import TokenUsageIndicator from './TokenUsageIndicator';
import { mainTextareaId, BadgeItem } from '~/common';
import AttachFileChat from './Files/AttachFileChat';
import FileFormChat from './Files/FileFormChat';
@ -39,6 +41,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
const submitButtonRef = useRef<HTMLButtonElement>(null);
const textAreaRef = useRef<HTMLTextAreaElement>(null);
useFocusChatEffect(textAreaRef);
useTokenUsageComputation();
const localize = useLocalize();
const [isCollapsed, setIsCollapsed] = useState(false);
@ -332,6 +335,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
}
/>
<div className="mx-auto flex" />
<TokenUsageIndicator />
{SpeechToText && (
<AudioRecorder
methods={methods}