Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-07-04 12:18:04 +02:00
Code Issues Packages Projects Releases Activity

feat(llm): make the prompt usage more compact

Browse Source
This commit is contained in:
Elian Doran
2026-03-30 17:56:07 +03:00
parent 241282296e
commit c40f5953fa
3 changed files with 45 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/translations/en/translation.json
View File

@@ -1629,6 +1629,8 @@
"result": "Result",
"error": "Error",
"tool_error": "failed",
"total_tokens": "{{total}} tokens",
"tokens_detail": "{{prompt}} prompt + {{completion}} completion",
"tokens_used": "{{prompt}} prompt + {{completion}} completion = {{total}} tokens",
"tokens_used_with_cost": "{{prompt}} prompt + {{completion}} completion = {{total}} tokens (~${{cost}})",
"tokens_used_with_model": "{{model}}: {{prompt}} prompt + {{completion}} completion = {{total}} tokens",

61
apps/client/src/widgets/type_widgets/llm_chat/ChatMessage.tsx
View File

@@ -1,10 +1,18 @@
import "./LlmChat.css";
import type { LlmCitation, LlmUsage } from "@triliumnext/commons";
import { useMemo } from "preact/hooks";
import { marked } from "marked";
import { useMemo } from "preact/hooks";
import { t } from "../../../services/i18n.js";
import type { ContentBlock, StoredMessage, ToolCall } from "./llm_chat_types.js";
import { getMessageText, getMessageToolCalls } from "./llm_chat_types.js";
import "./LlmChat.css";
function shortenNumber(n: number): string {
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
if (n >= 1_000) return `${(n / 1_000).toFixed(n >= 10_000 ? 0 : 1)}k`;
return n.toString();
}
// Configure marked for safe rendering
marked.setOptions({
@@ -197,37 +205,26 @@ export default function ChatMessage({ message, isStreaming }: Props) {
)}
{message.usage && typeof message.usage.promptTokens === "number" && (
<div className="llm-chat-usage">
<span className="bx bx-chip" />
<span className="llm-chat-usage-text">
{message.usage.model && message.usage.cost != null
? t("llm_chat.tokens_used_with_model_and_cost", {
model: message.usage.model,
prompt: message.usage.promptTokens.toLocaleString(),
completion: message.usage.completionTokens.toLocaleString(),
total: message.usage.totalTokens.toLocaleString(),
cost: message.usage.cost.toFixed(4)
})
: message.usage.model
? t("llm_chat.tokens_used_with_model", {
model: message.usage.model,
prompt: message.usage.promptTokens.toLocaleString(),
completion: message.usage.completionTokens.toLocaleString(),
total: message.usage.totalTokens.toLocaleString()
})
: message.usage.cost != null
? t("llm_chat.tokens_used_with_cost", {
prompt: message.usage.promptTokens.toLocaleString(),
completion: message.usage.completionTokens.toLocaleString(),
total: message.usage.totalTokens.toLocaleString(),
cost: message.usage.cost.toFixed(4)
})
: t("llm_chat.tokens_used", {
prompt: message.usage.promptTokens.toLocaleString(),
completion: message.usage.completionTokens.toLocaleString(),
total: message.usage.totalTokens.toLocaleString()
})
}
{message.usage.model && (
<span className="llm-chat-usage-model">{message.usage.model}</span>
)}
<span className="llm-chat-usage-separator">·</span>
<span
className="llm-chat-usage-tokens"
title={t("llm_chat.tokens_detail", {
prompt: message.usage.promptTokens.toLocaleString(),
completion: message.usage.completionTokens.toLocaleString()
})}
>
<span className="bx bx-chip" />{" "}
{t("llm_chat.total_tokens", { total: shortenNumber(message.usage.totalTokens) })}
</span>
{message.usage.cost != null && (
<>
<span className="llm-chat-usage-separator">·</span>
<span className="llm-chat-usage-cost">~${message.usage.cost.toFixed(4)}</span>
</>
)}
</div>
)}
</div>

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

@@ -619,13 +619,26 @@
border-top: 1px solid var(--main-border-color);
font-size: 0.75rem;
color: var(--muted-text-color);
cursor: default;
}
.llm-chat-usage .bx {
font-size: 0.875rem;
}
.llm-chat-usage-text {
.llm-chat-usage-model {
font-weight: 500;
}
.llm-chat-usage-separator {
opacity: 0.5;
}
.llm-chat-usage-tokens {
font-family: var(--monospace-font-family, monospace);
}
.llm-chat-usage-cost {
font-family: var(--monospace-font-family, monospace);
}