1
0
mirror of https://github.com/coalaura/whiskr.git synced 2025-09-08 17:06:42 +00:00

show tool call cost

This commit is contained in:
Laura
2025-08-28 15:00:02 +02:00
parent 98c6976dfa
commit f14faa11f2
2 changed files with 27 additions and 1 deletions

View File

@@ -438,6 +438,7 @@ body:not(.loading) #loading {
overflow: hidden; overflow: hidden;
transition: 150ms; transition: 150ms;
height: calc(40px + 16px + var(--height)); height: calc(40px + 16px + var(--height));
position: relative;
} }
.message .reasoning { .message .reasoning {
@@ -496,6 +497,21 @@ body:not(.loading) #loading {
width: max-content; width: max-content;
} }
.tool .cost {
position: absolute;
top: 2px;
right: 2px;
font-size: 12px;
font-style: italic;
color: #a5adcb;
transition: 150ms opacity;
opacity: 0;
}
.tool:hover .cost {
opacity: 1;
}
.message .options { .message .options {
display: flex; display: flex;
gap: 4px; gap: 4px;

View File

@@ -286,6 +286,13 @@
_call.appendChild(_callArguments); _call.appendChild(_callArguments);
// tool call cost
const _callCost = make("div", "cost");
_callCost.title = "Cost of this tool call";
this.#_tool.appendChild(_callCost);
// tool call result // tool call result
const _callResult = make("div", "result", "markdown"); const _callResult = make("div", "result", "markdown");
@@ -466,10 +473,11 @@
if (!only || only === "tool") { if (!only || only === "tool") {
if (this.#tool) { if (this.#tool) {
const { name, args, result } = this.#tool; const { name, args, result, cost } = this.#tool;
const _name = this.#_tool.querySelector(".name"), const _name = this.#_tool.querySelector(".name"),
_arguments = this.#_tool.querySelector(".arguments"), _arguments = this.#_tool.querySelector(".arguments"),
_cost = this.#_tool.querySelector(".cost"),
_result = this.#_tool.querySelector(".result"); _result = this.#_tool.querySelector(".result");
_name.title = `Show ${name} call result`; _name.title = `Show ${name} call result`;
@@ -478,6 +486,8 @@
_arguments.title = args; _arguments.title = args;
_arguments.textContent = args; _arguments.textContent = args;
_cost.textContent = cost ? `${formatMoney(cost)}` : "";
_result.innerHTML = render(result || "*processing*"); _result.innerHTML = render(result || "*processing*");
this.#_tool.setAttribute("data-tool", name); this.#_tool.setAttribute("data-tool", name);