fix(messages): Scroll position (#8360)

* feat(消息上下文): 添加消息滚动上下文以保持滚动位置

添加MessagesContext来管理消息列表的滚动位置
在MessageEditor中调整文本区域大小时保持滚动位置

* fix(消息滚动): 修复发送新消息不跟随滚动的问题

* refactor(Messages): 移除不必要的消息完成时的自动滚动逻辑

* refactor(MessageEditor): 移除调试日志语句

* fix(Messages): 避免直接操作dom

* fix(MessageEditor): 修复文本区域自动滚动和焦点问题

确保编辑器挂载时自动滚动到光标位置
将焦点设置和滚动逻辑分离到单独的useEffect中,确保仅在组件挂载时执行一次

* fix(Messages): 移除冗余的日志记录并添加注释

移除在滚动事件处理中的日志记录
添加注释说明为何不使用平滑滚动

* refactor(messages): 移除MessagesContext和相关逻辑

* refactor(Messages): 移除冗余的scrollTo函数并内联滚动逻辑

简化滚动到底部的实现,直接使用requestAnimationFrame内联处理
This commit is contained in:
Phantom 2025-07-24 00:23:53 +08:00 committed by GitHub
parent f5b6a4be49
commit 1677cb7321
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 3 deletions

View File

@ -104,6 +104,17 @@ const MessageBlockEditor: FC<Props> = ({ message, topicId, onSave, onResend, onC
}, 0)
}, [])
// 仅在打开时执行一次
useEffect(() => {
if (textareaRef.current) {
const realTextarea = textareaRef.current.resizableTextArea?.textArea
if (realTextarea) {
realTextarea.scrollTo({ top: realTextarea.scrollHeight })
}
textareaRef.current.focus({ cursor: 'end' })
}
}, [])
const onPaste = useCallback(
async (event: ClipboardEvent) => {
return await PasteService.handlePaste(

View File

@ -90,13 +90,12 @@ const Messages: React.FC<MessagesProps> = ({ assistant, topic, setActiveTopic, o
setHasMore(messages.length > displayCount)
}, [messages, displayCount])
// NOTE: 如果设置为平滑滚动会导致滚动条无法跟随生成的新消息保持在底部位置
const scrollToBottom = useCallback(() => {
if (scrollContainerRef.current) {
requestAnimationFrame(() => {
if (scrollContainerRef.current) {
scrollContainerRef.current.scrollTo({
top: scrollContainerRef.current.scrollHeight
})
scrollContainerRef.current.scrollTo({ top: 0 })
}
})
}