From df3d044f03659d8f46937c201b8957a7b6f7671d Mon Sep 17 00:00:00 2001 From: BitToby Date: Wed, 28 Jan 2026 03:53:02 +0200 Subject: [PATCH] fix: enable auto-resize for chat input textarea (#12836) Closes #12803 ### What problem does this PR solve? The chat input textarea in the Chat UI (and Embed UI) has a fixed height and cannot be resized, causing poor UX when users type messages longer than 2 sentences. The input becomes cramped and difficult to read/edit. **Root cause:** The `Textarea` component in [NextMessageInput](cci:1://file:///ragflow/web/src/components/message-input/next.tsx:62:0-290:1) had `resize-none` and `field-sizing-content` CSS classes that prevented resizing, and the existing `autoSize` prop was not being utilized. **Solution:** - Removed `resize-none` and `field-sizing-content` classes - Added `autoSize={{ minRows: 1, maxRows: 8 }}` to enable auto-expand - Added `max-h-40` class to limit maximum height to 160px The textarea now auto-expands from 1 to 8 rows as users type longer messages. ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue) --- web/src/components/message-input/next.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web/src/components/message-input/next.tsx b/web/src/components/message-input/next.tsx index 972f7eb3e..fb27f25a4 100644 --- a/web/src/components/message-input/next.tsx +++ b/web/src/components/message-input/next.tsx @@ -209,9 +209,10 @@ export function NextMessageInput({ value={value} onChange={onInputChange} placeholder={t('chat.messagePlaceholder')} - className="field-sizing-content min-h-10 w-full resize-none border-0 bg-transparent p-0 shadow-none focus-visible:ring-0 dark:bg-transparent" + className="min-h-10 max-h-40 w-full border-0 bg-transparent p-0 shadow-none focus-visible:ring-0 dark:bg-transparent" disabled={isUploading || disabled || sendLoading} onKeyDown={handleKeyDown} + autoSize={{ minRows: 1, maxRows: 8 }} />