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

cleanup

Browse Source
This commit is contained in:
Laura
2025-08-28 14:36:52 +02:00
parent ca5693b08a
commit b331920634
2 changed files with 40 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
static/css/chat.css
View File

@@ -348,34 +348,19 @@ body:not(.loading) #loading {
max-width: 800px; max-width: 800px;
} }
.message .reasoning,
.message .tool,
.message .text {
display: block;
background: transparent;
padding: 10px 12px;
width: 100%;
}
.message .reasoning {
padding-top: 14px;
}
.message:not(.editing) textarea.text, .message:not(.editing) textarea.text,
.message.editing div.text { .message.editing div.text {
display: none; display: none;
} }
.message .reasoning,
.message .tool,
.message div.text {
background: #24273a;
}
.message textarea.text { .message textarea.text {
display: block;
background: #181926; background: #181926;
min-width: 480px; min-width: 480px;
min-height: 100px; min-height: 100px;
padding: 10px 12px;
width: 100%;
border-radius: 2px;
} }
.message .text .error { .message .text .error {
@@ -395,21 +380,7 @@ body:not(.loading) #loading {
background: #1e2030; background: #1e2030;
border-radius: 6px; border-radius: 6px;
padding: 10px 12px; padding: 10px 12px;
} margin-top: 16px;
.message .reasoning-wrapper {
--height: auto;
height: calc(var(--height) + 20px);
overflow: hidden;
transition: 150ms;
}
.message:not(.expanded) .reasoning-wrapper {
height: 0;
}
.message.expanded .reasoning-text {
margin-top: 10px;
} }
.message.has-reasoning:not(.has-text):not(.errored) div.text, .message.has-reasoning:not(.has-text):not(.errored) div.text,
@@ -424,10 +395,11 @@ body:not(.loading) #loading {
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
overflow: hidden; overflow: hidden;
} padding: 14px 12px;
display: flex;
.message.has-reasoning .text { flex-direction: column;
padding-top: 4px; gap: 12px;
background: #24273a;
} }
.tool .call, .tool .call,
@@ -460,23 +432,24 @@ body:not(.loading) #loading {
transition: 150ms; transition: 150ms;
} }
.message.expanded .reasoning .toggle::after { .message .reasoning,
transform: rotate(180deg);
}
.message.has-tool .text {
padding-bottom: 4px;
}
.message .tool { .message .tool {
--height: 0px; --height: 0px;
overflow: hidden; overflow: hidden;
transition: 150ms; transition: 150ms;
height: calc(90px + var(--height)); height: calc(40px + 16px + var(--height));
}
.message .reasoning {
height: calc(18px + 16px + var(--height));
}
.message .reasoning:not(.expanded) {
height: 18px;
} }
.message .tool:not(.expanded) { .message .tool:not(.expanded) {
height: 62px; height: 40px;
} }
.tool .call { .tool .call {
@@ -506,6 +479,10 @@ body:not(.loading) #loading {
right: -22px; right: -22px;
} }
.reasoning.expanded .toggle::after {
transform: rotate(180deg);
}
.tool.expanded .call .name::after { .tool.expanded .call .name::after {
transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg);
} }
@@ -519,10 +496,6 @@ body:not(.loading) #loading {
width: max-content; width: max-content;
} }
.message .tool .result {
margin-top: 16px;
}
.message .options { .message .options {
display: flex; display: flex;
gap: 4px; gap: 4px;

25
static/js/chat.js
View File

@@ -226,7 +226,7 @@
_toggle.addEventListener("click", () => { _toggle.addEventListener("click", () => {
this.#expanded = !this.#expanded; this.#expanded = !this.#expanded;
this.#_message.classList.toggle("expanded", this.#expanded); _reasoning.classList.toggle("expanded", this.#expanded);
if (this.#expanded) { if (this.#expanded) {
this.#updateReasoningHeight(); this.#updateReasoningHeight();
@@ -235,15 +235,10 @@
updateScrollButton(); updateScrollButton();
}); });
// message reasoning (height wrapper)
const _height = make("div", "reasoning-wrapper");
_reasoning.appendChild(_height);
// message reasoning (content) // message reasoning (content)
this.#_reasoning = make("div", "reasoning-text", "markdown"); this.#_reasoning = make("div", "reasoning-text", "markdown");
_height.appendChild(this.#_reasoning); _reasoning.appendChild(this.#_reasoning);
// message content // message content
this.#_text = make("div", "text", "markdown"); this.#_text = make("div", "text", "markdown");
@@ -412,6 +407,16 @@
#updateToolHeight() { #updateToolHeight() {
const result = this.#_tool.querySelector(".result"); const result = this.#_tool.querySelector(".result");
try {
const clone = result.cloneNode();
setTimeout(() => {
console.log(clone, clone.getBoundingClientRect(), clone.scrollHeight, clone.height);
}, 0);
} catch(err) {
console.warn(err);
}
this.#_tool.style.setProperty("--height", `${result.scrollHeight}px`); this.#_tool.style.setProperty("--height", `${result.scrollHeight}px`);
} }
@@ -772,12 +777,12 @@
activeMessage = this; activeMessage = this;
this.#_edit.value = this.#text; this.#_edit.value = this.#text;
this.#_edit.style.height = "";
this.#_edit.style.height = `${this.#_text.offsetHeight}px`;
this.#_edit.style.width = `${this.#_text.offsetWidth}px`;
this.setState("editing"); this.setState("editing");
this.#_edit.style.height = `${Math.max(100, this.#_edit.scrollHeight)}px`;
this.#_edit.focus(); this.#_edit.focus();
} else { } else {
activeMessage = null; activeMessage = null;