fix(Inputbar): fix textarea expansion and collapse issues with long text (CherryHQ#6857) (#6873)

fix(Inputbar): fix textarea expansion and collapse issues with long text (#6857)
This commit is contained in:
rainnoon 2025-06-06 04:05:17 +08:00 committed by GitHub
parent cbe00d54b2
commit 89d68c6eb2

View File

@ -723,50 +723,28 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
}, [])
const onToggleExpended = () => {
if (textareaHeight) {
const textArea = textareaRef.current?.resizableTextArea?.textArea
if (textArea) {
textArea.style.height = 'auto'
setTextareaHeight(undefined)
setTimeout(() => {
textArea.style.height = `${textArea.scrollHeight}px`
}, 200)
return
}
}
const isExpended = !expended
setExpend(isExpended)
const currentlyExpanded = expended || !!textareaHeight
const shouldExpand = !currentlyExpanded
setExpend(shouldExpand)
const textArea = textareaRef.current?.resizableTextArea?.textArea
if (textArea) {
if (isExpended) {
textArea.style.height = '70vh'
} else {
resetHeight()
}
if (!textArea) return
if (shouldExpand) {
textArea.style.height = '70vh'
setTextareaHeight(window.innerHeight * 0.7)
} else {
textArea.style.height = 'auto'
setTextareaHeight(undefined)
requestAnimationFrame(() => {
if (textArea) {
const contentHeight = textArea.scrollHeight
textArea.style.height = contentHeight > 400 ? '400px' : `${contentHeight}px`
}
})
}
textareaRef.current?.focus()
}
const resetHeight = () => {
if (expended) {
setExpend(false)
}
setTextareaHeight(undefined)
requestAnimationFrame(() => {
const textArea = textareaRef.current?.resizableTextArea?.textArea
if (textArea) {
textArea.style.height = 'auto'
const contentHeight = textArea.scrollHeight
textArea.style.height = contentHeight > 400 ? '400px' : `${contentHeight}px`
}
})
}
const isExpended = expended || !!textareaHeight
const showThinkingButton = isSupportedThinkingTokenModel(model) || isSupportedReasoningEffortModel(model)
@ -921,6 +899,8 @@ const InputBarContainer = styled.div`
border-radius: 15px;
padding-top: 6px; // 为拖动手柄留出空间
background-color: var(--color-background-opacity);
display: flex;
flex-direction: column;
&.file-dragging {
border: 2px dashed #2ecc71;
@ -954,6 +934,7 @@ const Textarea = styled(TextArea)`
overflow: auto;
width: 100%;
box-sizing: border-box;
transition: height 0.2s ease;
&.ant-input {
line-height: 1.4;
}
@ -968,6 +949,9 @@ const Toolbar = styled.div`
margin-bottom: 4px;
height: 30px;
gap: 16px;
position: relative;
z-index: 2;
flex-shrink: 0;
`
const ToolbarMenu = styled.div`