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)
This commit is contained in:
BitToby
2026-01-28 03:53:02 +02:00
committed by GitHub
parent ee654f08d2
commit df3d044f03

View File

@ -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 }}
/>
<div className={cn('flex items-center justify-between gap-1.5')}>
<div className="flex items-center gap-3">