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:
@@ -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;
|
||||||
|
@@ -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);
|
||||||
|
Reference in New Issue
Block a user