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:
Phantom 2025-08-02 23:23:08 +08:00 committed by GitHub
parent 9e405f0604
commit fb2dccc7ff
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -189,6 +189,10 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
_text = text
_files = files
const focusTextarea = useCallback(() => {
textareaRef.current?.focus()
}, [])
const resizeTextArea = useCallback(
(force: boolean = false) => {
const textArea = textareaRef.current?.resizableTextArea?.textArea
@ -470,9 +474,9 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
setTimeout(() => resizeTextArea(), 0)
return newText
})
textareaRef.current?.focus()
focusTextarea()
},
[resizeTextArea]
[resizeTextArea, focusTextarea]
)
const onPause = async () => {
@ -485,6 +489,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
await delay(1)
}
EventEmitter.emit(EVENT_NAMES.CLEAR_MESSAGES, topic)
focusTextarea()
}
const onNewContext = () => {
@ -670,7 +675,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
useShortcut('new_topic', () => {
addNewTopic()
EventEmitter.emit(EVENT_NAMES.SHOW_TOPIC_SIDEBAR)
textareaRef.current?.focus()
focusTextarea()
})
useShortcut('clear_topic', clearTopic)
@ -704,12 +709,17 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
useEffect(() => {
if (!document.querySelector('.topview-fullscreen-container')) {
const lastFocusedComponent = PasteService.getLastFocusedComponent()
if (lastFocusedComponent === 'inputbar') {
textareaRef.current?.focus()
}
focusTextarea()
}
}, [assistant, topic])
}, [
topic.id,
assistant.mcpServers,
assistant.knowledge_bases,
assistant.enableWebSearch,
assistant.webSearchProviderId,
mentionedModels,
focusTextarea
])
useEffect(() => {
const timerId = requestAnimationFrame(() => resizeTextArea())
@ -734,12 +744,12 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
const lastFocusedComponent = PasteService.getLastFocusedComponent()
if (!lastFocusedComponent || lastFocusedComponent === 'inputbar') {
textareaRef.current?.focus()
focusTextarea()
}
}
window.addEventListener('focus', onFocus)
return () => window.removeEventListener('focus', onFocus)
}, [])
}, [focusTextarea])
useEffect(() => {
// 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