fix: improve message counter initialization with bootstrap check

Add hasBootstrappedRef to track component initialization and prevent
counting messages during the initial render. This fixes the new message
counter behavior when messages load on component mount and ensures
accurate message tracking when autoScroll is disabled.
This commit is contained in:
weishu
2025-12-25 14:58:56 +08:00
parent 6829ca35a4
commit b953391737
@@ -82,6 +82,7 @@ export function HappyThread(props: {
const prevRenderedCountRef = useRef(props.renderedMessagesCount) const prevRenderedCountRef = useRef(props.renderedMessagesCount)
const autoScrollEnabledRef = useRef(autoScrollEnabled) const autoScrollEnabledRef = useRef(autoScrollEnabled)
const newMessageCountRef = useRef(newMessageCount) const newMessageCountRef = useRef(newMessageCount)
const hasBootstrappedRef = useRef(false)
// Keep refs in sync with state // Keep refs in sync with state
useEffect(() => { useEffect(() => {
@@ -121,10 +122,22 @@ export function HappyThread(props: {
const currentCount = props.renderedMessagesCount const currentCount = props.renderedMessagesCount
const wasLoadingMore = wasLoadingMoreRef.current const wasLoadingMore = wasLoadingMoreRef.current
wasLoadingMoreRef.current = props.isLoadingMoreMessages wasLoadingMoreRef.current = props.isLoadingMoreMessages
if (props.isLoadingMessages) {
prevRenderedCountRef.current = currentCount
return
}
if (!hasBootstrappedRef.current) {
hasBootstrappedRef.current = true
prevRenderedCountRef.current = currentCount
return
}
prevRenderedCountRef.current = currentCount prevRenderedCountRef.current = currentCount
// Skip during loading states // Skip during loading states
if (props.isLoadingMoreMessages || props.isLoadingMessages) { if (props.isLoadingMoreMessages) {
return return
} }
@@ -154,6 +167,7 @@ export function HappyThread(props: {
setAutoScrollEnabled(true) setAutoScrollEnabled(true)
setNewMessageCount(0) setNewMessageCount(0)
prevRenderedCountRef.current = 0 prevRenderedCountRef.current = 0
hasBootstrappedRef.current = false
}, [props.sessionId]) }, [props.sessionId])
const handleLoadMore = useCallback(() => { const handleLoadMore = useCallback(() => {