romtuck/openclaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui/src/ui/views/chat.ts
View File

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