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:
parent
151a08d0dd
commit
12d40713a9
@ -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()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user