| } from 'react' | } from 'react' | ||||
| import { useTranslation } from 'react-i18next' | import { useTranslation } from 'react-i18next' | ||||
| import { useThrottleEffect } from 'ahooks' | import { useThrottleEffect } from 'ahooks' | ||||
| import { debounce } from 'lodash-es' | |||||
| import type { | import type { | ||||
| ChatConfig, | ChatConfig, | ||||
| ChatItem, | ChatItem, | ||||
| chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight | chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight | ||||
| } | } | ||||
| useThrottleEffect(() => { | |||||
| handleScrolltoBottom() | |||||
| const handleWindowResize = () => { | |||||
| if (chatContainerRef.current && chatFooterRef.current) | if (chatContainerRef.current && chatFooterRef.current) | ||||
| chatFooterRef.current.style.width = `${chatContainerRef.current.clientWidth}px` | chatFooterRef.current.style.width = `${chatContainerRef.current.clientWidth}px` | ||||
| if (chatContainerInnerRef.current && chatFooterInnerRef.current) | if (chatContainerInnerRef.current && chatFooterInnerRef.current) | ||||
| chatFooterInnerRef.current.style.width = `${chatContainerInnerRef.current.clientWidth}px` | chatFooterInnerRef.current.style.width = `${chatContainerInnerRef.current.clientWidth}px` | ||||
| } | |||||
| useThrottleEffect(() => { | |||||
| handleScrolltoBottom() | |||||
| handleWindowResize() | |||||
| }, [chatList], { wait: 500 }) | }, [chatList], { wait: 500 }) | ||||
| useEffect(() => { | |||||
| window.addEventListener('resize', debounce(handleWindowResize)) | |||||
| return () => window.removeEventListener('resize', handleWindowResize) | |||||
| }, []) | |||||
| useEffect(() => { | useEffect(() => { | ||||
| if (chatFooterRef.current && chatContainerRef.current) { | if (chatFooterRef.current && chatContainerRef.current) { | ||||
| const resizeObserver = new ResizeObserver((entries) => { | const resizeObserver = new ResizeObserver((entries) => { |