fix(chat): hide textarea scrollbar when content fits

- Set overflow-hidden by default on textarea
- Only show scrollbar when content exceeds max height (200px)
- Fix scrollbar appearing on empty input

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
hailin 2026-01-10 06:44:59 -08:00
parent 8a39505ee6
commit 3d120e1ce3
1 changed files with 7 additions and 2 deletions

View File

@ -58,8 +58,13 @@ export function InputArea({
useEffect(() => { useEffect(() => {
const textarea = textareaRef.current; const textarea = textareaRef.current;
if (textarea) { if (textarea) {
// 重置高度以获取正确的scrollHeight
textarea.style.height = 'auto'; textarea.style.height = 'auto';
textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`; // 设置新高度最小44px单行最大200px
const newHeight = Math.max(44, Math.min(textarea.scrollHeight, 200));
textarea.style.height = `${newHeight}px`;
// 只有当内容超过最大高度时才显示滚动条
textarea.style.overflowY = textarea.scrollHeight > 200 ? 'auto' : 'hidden';
} }
}, [message]); }, [message]);
@ -317,7 +322,7 @@ export function InputArea({
disabled={disabled || isUploading} disabled={disabled || isUploading}
rows={1} rows={1}
className={clsx( className={clsx(
'w-full resize-none rounded-xl border border-secondary-200 bg-white px-4 py-3 pr-12', 'w-full resize-none overflow-hidden rounded-xl border border-secondary-200 bg-white px-4 py-3 pr-12',
'text-secondary-900 placeholder:text-secondary-400', 'text-secondary-900 placeholder:text-secondary-400',
'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent', 'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent',
'disabled:bg-secondary-50 disabled:cursor-not-allowed', 'disabled:bg-secondary-50 disabled:cursor-not-allowed',