fix: update Inputbar components to support dynamic textarea height adjustment

This commit is contained in:
suyao
2025-12-01 01:27:46 +08:00
parent b3a58ec321
commit 776fb27a58
4 changed files with 23 additions and 12 deletions

View File

@@ -51,7 +51,7 @@ export function useTextareaResize(options: UseTextareaResizeOptions = {}): UseTe
const { maxHeight = 400, minHeight = 30, autoResize = true } = options
const textareaRef = useRef<TextAreaRef>(null)
const [customHeight, setCustomHeight] = useState<number>()
const [customHeight, setCustomHeight] = useState<number | undefined>(undefined)
const [isExpanded, setIsExpanded] = useState(false)
const resize = useCallback(

View File

@@ -177,8 +177,10 @@ const AgentSessionInputbarInner: FC<InnerProps> = ({ assistant, agentId, session
resize: resizeTextArea,
focus: focusTextarea,
setExpanded,
isExpanded: textareaIsExpanded
} = useTextareaResize({ maxHeight: 400, minHeight: 30 })
isExpanded: textareaIsExpanded,
customHeight,
setCustomHeight
} = useTextareaResize({ maxHeight: 500, minHeight: 30 })
const { sendMessageShortcut, apiServer } = useSettings()
const { t } = useTranslation()
@@ -474,6 +476,8 @@ const AgentSessionInputbarInner: FC<InnerProps> = ({ assistant, agentId, session
text={text}
onTextChange={setText}
textareaRef={textareaRef}
height={customHeight}
onHeightChange={setCustomHeight}
resizeTextArea={resizeTextArea}
focusTextarea={focusTextarea}
placeholder={placeholderText}

View File

@@ -143,9 +143,11 @@ const InputbarInner: FC<InputbarInnerProps> = ({ assistant: initialAssistant, se
resize: resizeTextArea,
focus: focusTextarea,
setExpanded,
isExpanded: textareaIsExpanded
isExpanded: textareaIsExpanded,
customHeight,
setCustomHeight
} = useTextareaResize({
maxHeight: 400,
maxHeight: 500,
minHeight: 30
})
@@ -257,7 +259,7 @@ const InputbarInner: FC<InputbarInnerProps> = ({ assistant: initialAssistant, se
setText('')
setFiles([])
setTimeoutTimer('sendMessage_1', () => setText(''), 500)
setTimeoutTimer('sendMessage_2', () => resizeTextArea(true), 0)
setTimeoutTimer('sendMessage_2', () => resizeTextArea(), 0)
} catch (error) {
logger.warn('Failed to send message:', error as Error)
parent?.recordException(error as Error)
@@ -478,6 +480,8 @@ const InputbarInner: FC<InputbarInnerProps> = ({ assistant: initialAssistant, se
text={text}
onTextChange={setText}
textareaRef={textareaRef}
height={customHeight}
onHeightChange={setCustomHeight}
resizeTextArea={resizeTextArea}
focusTextarea={focusTextarea}
isLoading={loading}

View File

@@ -50,6 +50,9 @@ export interface InputbarCoreProps {
resizeTextArea: (force?: boolean) => void
focusTextarea: () => void
height: number | undefined
onHeightChange: (height: number) => void
supportedExts: string[]
isLoading: boolean
@@ -104,6 +107,8 @@ export const InputbarCore: FC<InputbarCoreProps> = ({
textareaRef,
resizeTextArea,
focusTextarea,
height,
onHeightChange,
supportedExts,
isLoading,
onPause,
@@ -131,8 +136,6 @@ export const InputbarCore: FC<InputbarCoreProps> = ({
} = useSettings()
const quickPanelTriggersEnabled = forceEnableQuickPanelTriggers ?? enableQuickPanelTriggers
const [textareaHeight, setTextareaHeight] = useState<number>()
const { t } = useTranslation()
const [isTranslating, setIsTranslating] = useState(false)
const { getLanguageByLangcode } = useTranslate()
@@ -539,7 +542,7 @@ export const InputbarCore: FC<InputbarCoreProps> = ({
const handleMouseMove = (e: MouseEvent) => {
const deltaY = startDragY.current - e.clientY
const newHeight = Math.max(40, Math.min(400, startHeight.current + deltaY))
setTextareaHeight(newHeight)
onHeightChange(newHeight)
}
const handleMouseUp = () => {
@@ -550,7 +553,7 @@ export const InputbarCore: FC<InputbarCoreProps> = ({
document.addEventListener('mousemove', handleMouseMove)
document.addEventListener('mouseup', handleMouseUp)
},
[config.enableDragDrop, setTextareaHeight, textareaRef]
[config.enableDragDrop, onHeightChange, textareaRef]
)
const onQuote = useCallback(
@@ -667,11 +670,11 @@ export const InputbarCore: FC<InputbarCoreProps> = ({
variant="borderless"
spellCheck={enableSpellCheck}
rows={2}
autoSize={textareaHeight ? false : { minRows: 2, maxRows: 20 }}
autoSize={height ? false : { minRows: 2, maxRows: 20 }}
styles={{ textarea: TextareaStyle }}
style={{
fontSize,
height: textareaHeight,
height: height,
minHeight: '30px'
}}
disabled={isTranslating || searching}