fix(ui): auto-expand chat textarea on input (Fixes #2939) (#2950)

This commit is contained in:
Shivam Kumar Raut 2026-01-28 02:35:56 +05:30 committed by GitHub
parent 284b54af42
commit b5c885bbd9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 2 deletions

View File

@ -1,4 +1,5 @@
import { html, nothing } from "lit";
import { ref } from "lit/directives/ref.js";
import { repeat } from "lit/directives/repeat.js";
import type { SessionsListResult } from "../types";
import type { ChatAttachment, ChatQueueItem } from "../ui-types";
@ -71,6 +72,11 @@ export type ChatProps = {
const COMPACTION_TOAST_DURATION_MS = 5000;
function adjustTextareaHeight(el: HTMLTextAreaElement) {
el.style.height = "auto";
el.style.height = `${el.scrollHeight}px`;
}
function renderCompactionIndicator(status: CompactionIndicatorStatus | null | undefined) {
if (!status) return nothing;
@ -327,6 +333,7 @@ export function renderChat(props: ChatProps) {
<label class="field chat-compose__field">
<span>Message</span>
<textarea
${ref((el) => el && adjustTextareaHeight(el as HTMLTextAreaElement))}
.value=${props.draft}
?disabled=${!props.connected}
@keydown=${(e: KeyboardEvent) => {
@ -337,8 +344,11 @@ export function renderChat(props: ChatProps) {
e.preventDefault();
if (canCompose) props.onSend();
}}
@input=${(e: Event) =>
props.onDraftChange((e.target as HTMLTextAreaElement).value)}
@input=${(e: Event) => {
const target = e.target as HTMLTextAreaElement;
adjustTextareaHeight(target);
props.onDraftChange(target.value);
}}
@paste=${(e: ClipboardEvent) => handlePaste(e, props)}
placeholder=${composePlaceholder}
></textarea>