getcompanion-ai/co-mono
1
0
Fork 0
mirror of https://github.com/getcompanion-ai/co-mono.git synced 2026-04-16 23:01:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix message editor height adjustment, requires Chrome +123

Browse source
This commit is contained in:
Mario Zechner 2025-10-29 16:11:05 +01:00
parent b6b64dff86
commit 92f8801864
11 changed files with 41 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

31
packages/web-ui/src/components/MessageEditor.ts
View file

@ -22,13 +22,6 @@ export class MessageEditor extends LitElement {
const oldValue = this._value;
this._value = val;
this.requestUpdate("value", oldValue);
this.updateComplete.then(() => {
const textarea = this.textareaRef.value;
if (textarea) {
textarea.style.height = "auto";
textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
}
});
}
@property() isStreaming = false;
@ -60,8 +53,6 @@ export class MessageEditor extends LitElement {
private handleTextareaInput = (e: Event) => {
const textarea = e.target as HTMLTextAreaElement;
this.value = textarea.value;
textarea.style.height = "auto";
textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
this.onInput?.(this.value);
};
@ -231,33 +222,13 @@ export class MessageEditor extends LitElement {
this.processingFiles = false;
};
private adjustTextareaHeight() {
const textarea = this.textareaRef.value;
if (textarea) {
// Reset height to auto to get accurate scrollHeight
textarea.style.height = "auto";
// Only adjust if there's content, otherwise keep minimal height
if (this.value.trim()) {
textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
}
}
}
override firstUpdated() {
const textarea = this.textareaRef.value;
if (textarea) {
// Don't adjust height on first render - let it be minimal
textarea.focus();
}
}
override updated() {
// Only adjust height when component updates if there's content
if (this.value) {
this.adjustTextareaHeight();
}
}
override render() {
// Check if current model supports thinking/reasoning
const model = this.currentModel;
@ -304,7 +275,7 @@ export class MessageEditor extends LitElement {
class="w-full bg-transparent p-4 text-foreground placeholder-muted-foreground outline-none resize-none overflow-y-auto"
placeholder=${i18n("Type a message...")}
rows="1"
style="max-height: 200px;"
style="max-height: 200px; field-sizing: content; min-height: 1lh; height: auto;"
.value=${this.value}
@input=${this.handleTextareaInput}
@keydown=${this.handleKeyDown}