fix(chat): render date popover in top portal for stable layering

This commit is contained in:
tisonhuang
2026-03-05 09:15:23 +08:00
parent 313e2bc080
commit 49f99f57c9

View File

@@ -672,7 +672,6 @@ function ChatPage(props: ChatPageProps) {
}, []) }, [])
const updateJumpPopoverPosition = useCallback(() => { const updateJumpPopoverPosition = useCallback(() => {
if (!standaloneSessionWindow) return
const anchor = jumpCalendarWrapRef.current const anchor = jumpCalendarWrapRef.current
if (!anchor) return if (!anchor) return
@@ -694,7 +693,7 @@ function ChatPage(props: ChatPageProps) {
if (prev.top === top && prev.left === left) return prev if (prev.top === top && prev.left === left) return prev
return { top, left } return { top, left }
}) })
}, [standaloneSessionWindow]) }, [])
const handleToggleJumpPopover = useCallback(() => { const handleToggleJumpPopover = useCallback(() => {
if (!currentSessionId) return if (!currentSessionId) return
@@ -703,15 +702,11 @@ function ChatPage(props: ChatPageProps) {
return return
} }
setJumpPopoverDate(resolveCurrentViewDate()) setJumpPopoverDate(resolveCurrentViewDate())
if (standaloneSessionWindow) { updateJumpPopoverPosition()
updateJumpPopoverPosition()
}
setShowJumpPopover(true) setShowJumpPopover(true)
if (standaloneSessionWindow) { requestAnimationFrame(() => updateJumpPopoverPosition())
requestAnimationFrame(() => updateJumpPopoverPosition())
}
void loadJumpCalendarData(currentSessionId) void loadJumpCalendarData(currentSessionId)
}, [currentSessionId, loadJumpCalendarData, resolveCurrentViewDate, showJumpPopover, standaloneSessionWindow, updateJumpPopoverPosition]) }, [currentSessionId, loadJumpCalendarData, resolveCurrentViewDate, showJumpPopover, updateJumpPopoverPosition])
useEffect(() => { useEffect(() => {
const unsubscribe = onExportSessionStatus((payload) => { const unsubscribe = onExportSessionStatus((payload) => {
@@ -2775,17 +2770,17 @@ function ChatPage(props: ChatPageProps) {
const target = event.target as Node | null const target = event.target as Node | null
if (!target) return if (!target) return
if (jumpCalendarWrapRef.current?.contains(target)) return if (jumpCalendarWrapRef.current?.contains(target)) return
if (standaloneSessionWindow && jumpPopoverPortalRef.current?.contains(target)) return if (jumpPopoverPortalRef.current?.contains(target)) return
setShowJumpPopover(false) setShowJumpPopover(false)
} }
document.addEventListener('mousedown', handleGlobalPointerDown) document.addEventListener('mousedown', handleGlobalPointerDown)
return () => { return () => {
document.removeEventListener('mousedown', handleGlobalPointerDown) document.removeEventListener('mousedown', handleGlobalPointerDown)
} }
}, [showJumpPopover, standaloneSessionWindow]) }, [showJumpPopover])
useEffect(() => { useEffect(() => {
if (!showJumpPopover || !standaloneSessionWindow) return if (!showJumpPopover) return
const syncPosition = () => { const syncPosition = () => {
requestAnimationFrame(() => updateJumpPopoverPosition()) requestAnimationFrame(() => updateJumpPopoverPosition())
} }
@@ -2797,7 +2792,7 @@ function ChatPage(props: ChatPageProps) {
window.removeEventListener('resize', syncPosition) window.removeEventListener('resize', syncPosition)
window.removeEventListener('scroll', syncPosition, true) window.removeEventListener('scroll', syncPosition, true)
} }
}, [showJumpPopover, standaloneSessionWindow, updateJumpPopoverPosition]) }, [showJumpPopover, updateJumpPopoverPosition])
useEffect(() => { useEffect(() => {
setShowJumpPopover(false) setShowJumpPopover(false)
@@ -3834,21 +3829,8 @@ function ChatPage(props: ChatPageProps) {
> >
<Calendar size={18} /> <Calendar size={18} />
</button> </button>
{!standaloneSessionWindow && (
<JumpToDatePopover
isOpen={showJumpPopover}
currentDate={jumpPopoverDate}
onClose={() => setShowJumpPopover(false)}
onSelect={handleJumpDateSelect}
messageDates={messageDates}
hasLoadedMessageDates={hasLoadedMessageDates}
messageDateCounts={messageDateCounts}
loadingDates={loadingDates}
loadingDateCounts={loadingDateCounts}
/>
)}
</div> </div>
{standaloneSessionWindow && showJumpPopover && createPortal( {showJumpPopover && createPortal(
<div <div
ref={jumpPopoverPortalRef} ref={jumpPopoverPortalRef}
style={{ style={{