mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2026-01-07 22:10:21 +08:00
fix(Inputbar): input bar auto focus (#8756)
* fix(Inputbar): 简化输入框自动聚焦逻辑 * fix(Inputbar): 修复依赖数组缺失导致的焦点问题 添加 assistant.mcpServers 和 mentionedModels 到依赖数组,确保 textarea 在相关数据变化时能正确获取焦点 * fix(Inputbar): 添加knowledge_bases到useEffect依赖数组以修复潜在问题 * fix(Inputbar): 添加缺失的依赖项到useEffect中 * fix(Inputbar): 清空消息时自动聚焦输入框 确保当消息列表为空时,输入框自动获得焦点,提升用户体验 * refactor(Inputbar): 提取聚焦文本域逻辑到单独的回调函数 将多处直接操作textareaRef.current?.focus()的逻辑提取到focusTextarea回调函数中,提高代码复用性和可维护性
This commit is contained in:
parent
9e405f0604
commit
fb2dccc7ff
@ -189,6 +189,10 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
|
|||||||
_text = text
|
_text = text
|
||||||
_files = files
|
_files = files
|
||||||
|
|
||||||
|
const focusTextarea = useCallback(() => {
|
||||||
|
textareaRef.current?.focus()
|
||||||
|
}, [])
|
||||||
|
|
||||||
const resizeTextArea = useCallback(
|
const resizeTextArea = useCallback(
|
||||||
(force: boolean = false) => {
|
(force: boolean = false) => {
|
||||||
const textArea = textareaRef.current?.resizableTextArea?.textArea
|
const textArea = textareaRef.current?.resizableTextArea?.textArea
|
||||||
@ -470,9 +474,9 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
|
|||||||
setTimeout(() => resizeTextArea(), 0)
|
setTimeout(() => resizeTextArea(), 0)
|
||||||
return newText
|
return newText
|
||||||
})
|
})
|
||||||
textareaRef.current?.focus()
|
focusTextarea()
|
||||||
},
|
},
|
||||||
[resizeTextArea]
|
[resizeTextArea, focusTextarea]
|
||||||
)
|
)
|
||||||
|
|
||||||
const onPause = async () => {
|
const onPause = async () => {
|
||||||
@ -485,6 +489,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
|
|||||||
await delay(1)
|
await delay(1)
|
||||||
}
|
}
|
||||||
EventEmitter.emit(EVENT_NAMES.CLEAR_MESSAGES, topic)
|
EventEmitter.emit(EVENT_NAMES.CLEAR_MESSAGES, topic)
|
||||||
|
focusTextarea()
|
||||||
}
|
}
|
||||||
|
|
||||||
const onNewContext = () => {
|
const onNewContext = () => {
|
||||||
@ -670,7 +675,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
|
|||||||
useShortcut('new_topic', () => {
|
useShortcut('new_topic', () => {
|
||||||
addNewTopic()
|
addNewTopic()
|
||||||
EventEmitter.emit(EVENT_NAMES.SHOW_TOPIC_SIDEBAR)
|
EventEmitter.emit(EVENT_NAMES.SHOW_TOPIC_SIDEBAR)
|
||||||
textareaRef.current?.focus()
|
focusTextarea()
|
||||||
})
|
})
|
||||||
|
|
||||||
useShortcut('clear_topic', clearTopic)
|
useShortcut('clear_topic', clearTopic)
|
||||||
@ -704,12 +709,17 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!document.querySelector('.topview-fullscreen-container')) {
|
if (!document.querySelector('.topview-fullscreen-container')) {
|
||||||
const lastFocusedComponent = PasteService.getLastFocusedComponent()
|
focusTextarea()
|
||||||
if (lastFocusedComponent === 'inputbar') {
|
|
||||||
textareaRef.current?.focus()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}, [assistant, topic])
|
}, [
|
||||||
|
topic.id,
|
||||||
|
assistant.mcpServers,
|
||||||
|
assistant.knowledge_bases,
|
||||||
|
assistant.enableWebSearch,
|
||||||
|
assistant.webSearchProviderId,
|
||||||
|
mentionedModels,
|
||||||
|
focusTextarea
|
||||||
|
])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const timerId = requestAnimationFrame(() => resizeTextArea())
|
const timerId = requestAnimationFrame(() => resizeTextArea())
|
||||||
@ -734,12 +744,12 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
|
|||||||
const lastFocusedComponent = PasteService.getLastFocusedComponent()
|
const lastFocusedComponent = PasteService.getLastFocusedComponent()
|
||||||
|
|
||||||
if (!lastFocusedComponent || lastFocusedComponent === 'inputbar') {
|
if (!lastFocusedComponent || lastFocusedComponent === 'inputbar') {
|
||||||
textareaRef.current?.focus()
|
focusTextarea()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
window.addEventListener('focus', onFocus)
|
window.addEventListener('focus', onFocus)
|
||||||
return () => window.removeEventListener('focus', onFocus)
|
return () => window.removeEventListener('focus', onFocus)
|
||||||
}, [])
|
}, [focusTextarea])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// if assistant knowledge bases are undefined return []
|
// if assistant knowledge bases are undefined return []
|
||||||
@ -819,7 +829,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
textareaRef.current?.focus()
|
focusTextarea()
|
||||||
}
|
}
|
||||||
|
|
||||||
const isExpended = expended || !!textareaHeight
|
const isExpended = expended || !!textareaHeight
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user