refactor(ChatNavigation): Optimize document element retrieval and remove unnecessary useMemo

- Remove useMemo for container element
- Dynamically retrieve container element in each method
- Simplify scroll and message finding logic
- Improve performance by avoiding unnecessary memoization
This commit is contained in:
kangfenmao 2025-03-11 20:57:42 +08:00
parent 151a08d0dd
commit 12d40713a9

View File

@ -1,6 +1,6 @@
import { DownOutlined, UpOutlined } from '@ant-design/icons'
import { Button, Tooltip } from 'antd'
import { FC, useCallback, useEffect, useMemo, useState } from 'react'
import { FC, useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
@ -13,8 +13,6 @@ const ChatNavigation: FC<ChatNavigationProps> = ({ containerId }) => {
const [isVisible, setIsVisible] = useState(false)
const [hideTimer, setHideTimer] = useState<NodeJS.Timeout | null>(null)
const container = useMemo(() => document.getElementById(containerId), [containerId])
const resetHideTimer = useCallback(() => {
if (hideTimer) {
clearTimeout(hideTimer)
@ -27,6 +25,7 @@ const ChatNavigation: FC<ChatNavigationProps> = ({ containerId }) => {
}, [hideTimer])
const findUserMessages = () => {
const container = document.getElementById(containerId)
if (!container) return []
const userMessages = Array.from(container.getElementsByClassName('message-user'))
@ -34,6 +33,8 @@ const ChatNavigation: FC<ChatNavigationProps> = ({ containerId }) => {
}
const findAssistantMessages = () => {
const container = document.getElementById(containerId)
if (!container) return []
const assistantMessages = Array.from(container.getElementsByClassName('message-assistant'))
@ -45,18 +46,20 @@ const ChatNavigation: FC<ChatNavigationProps> = ({ containerId }) => {
}
const scrollToTop = () => {
if (!container) return
container.scrollTo({ top: 0, behavior: 'smooth' })
const container = document.getElementById(containerId)
container && container.scrollTo({ top: 0, behavior: 'smooth' })
}
const scrollToBottom = () => {
if (!container) return
container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' })
const container = document.getElementById(containerId)
container && container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' })
}
const getCurrentVisibleIndex = (direction: 'up' | 'down') => {
const userMessages = findUserMessages()
const assistantMessages = findAssistantMessages()
const container = document.getElementById(containerId)
if (!container) return -1
const containerRect = container.getBoundingClientRect()