Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-08 06:19:05 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source 
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
1 changed files with 22 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/renderer/src/pages/home/Inputbar/Inputbar.tsx
View File

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