Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-05-20 21:31:30 +02:00
Code Issues Packages Projects Releases Activity

feat(llm): minimize context window indicator

Browse Source
This commit is contained in:
Elian Doran
2026-03-29 15:17:27 +03:00
parent e70ded0be1
commit 9fabefc847
2 changed files with 26 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
apps/client/src/widgets/type_widgets/llm_chat/LlmChat.css
View File

@@ -566,41 +566,12 @@
font-family: var(--monospace-font-family, monospace);
}
/* Context window indicator */
.llm-chat-context-window {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0;
margin-bottom: 0.5rem;
}
.llm-chat-context-bar {
flex: 1;
height: 6px;
background: var(--accented-background-color);
border-radius: 3px;
overflow: hidden;
}
.llm-chat-context-fill {
height: 100%;
background: var(--main-selection-color, #007bff);
border-radius: 3px;
transition: width 0.3s ease;
}
.llm-chat-context-fill.warning {
background: var(--warning-color, #f0ad4e);
}
.llm-chat-context-fill.critical {
background: var(--danger-color, #d9534f);
}
.llm-chat-context-label {
font-size: 0.75rem;
color: var(--muted-text-color);
font-family: var(--monospace-font-family, monospace);
white-space: nowrap;
/* Context window pie indicator */
.llm-chat-context-pie {
width: 16px;
height: 16px;
border-radius: 50%;
margin-left: auto;
cursor: help;
flex-shrink: 0;
}

39
apps/client/src/widgets/type_widgets/llm_chat/LlmChat.tsx
View File

@@ -381,27 +381,6 @@ export default function LlmChat({ note, ntxId, noteContext }: TypeWidgetProps) {
)}
<div ref={messagesEndRef} />
</div>
{lastPromptTokens > 0 && (() => {
const currentModel = availableModels.find(m => m.id === selectedModel);
const contextWindow = currentModel?.contextWindow || 200000;
const percentage = Math.min((lastPromptTokens / contextWindow) * 100, 100);
const isWarning = percentage > 75;
const isCritical = percentage > 90;
return (
<div className="llm-chat-context-window">
<div className="llm-chat-context-bar">
<div
className={`llm-chat-context-fill ${isCritical ? "critical" : isWarning ? "warning" : ""}`}
style={{ width: `${percentage}%` }}
/>
</div>
<span className="llm-chat-context-label">
{formatTokenCount(lastPromptTokens)} / {formatTokenCount(contextWindow)} {t("llm_chat.tokens")} ({percentage.toFixed(0)}%)
</span>
</div>
);
})()}
<form className="llm-chat-input-form" onSubmit={handleSubmit}>
<div className="llm-chat-input-row">
<textarea
@@ -466,6 +445,24 @@ export default function LlmChat({ note, ntxId, noteContext }: TypeWidgetProps) {
<span className="bx bx-brain" />
{t("llm_chat.extended_thinking")}
</label>
{lastPromptTokens > 0 && (() => {
const currentModel = availableModels.find(m => m.id === selectedModel);
const contextWindow = currentModel?.contextWindow || 200000;
const percentage = Math.min((lastPromptTokens / contextWindow) * 100, 100);
const isWarning = percentage > 75;
const isCritical = percentage > 90;
const color = isCritical ? "var(--danger-color, #d9534f)" : isWarning ? "var(--warning-color, #f0ad4e)" : "var(--main-selection-color, #007bff)";
return (
<div
className="llm-chat-context-pie"
title={`${formatTokenCount(lastPromptTokens)} / ${formatTokenCount(contextWindow)} ${t("llm_chat.tokens")} (${percentage.toFixed(0)}%)`}
style={{
background: `conic-gradient(${color} ${percentage}%, var(--accented-background-color) ${percentage}%)`
}}
/>
);
})()}
</div>
</form>
</div>