mirror of
https://github.com/infiniflow/ragflow.git
synced 2026-01-28 22:26:36 +08:00
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:
@ -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">
|
||||
|
||||
Reference in New Issue
Block a user