Coder/deepseek-harness
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): narrow chat scroll provenance

Browse Source
This commit is contained in:
kingwl
2026-08-02 18:06:15 +08:00
committed by imccyu
parent 8de33e42f7
commit 9b91e5312c
5 changed files with 97 additions and 669 deletions
Download Patch File Download Diff File Expand all files Collapse all files

459
packages/client/ui-conversation/src/client/chat/ChatView.tsx
View File

@@ -38,68 +38,6 @@ import { MessageItem, PendingSteeringBubble } from './MessageItem.tsx'
import css from './ChatView.module.css'
const FOLLOW_THRESHOLD = 24
const POINTER_CANCEL_GRACE_FRAMES = 8
type VerticalDirection = -1 | 0 | 1
interface ReaderGesture {
/** Reader-created distance from the followed floor, excluding layout growth. */
awayDistance: number
/** Incremented by each qualifying input or host movement. */
epoch: number
/** Pointer gestures remain live through their pressed phase. */
held: boolean
/** Latest host position, used to reject no-op input events. */
lastTop: number
/** Primary pointer that owns a held direct-manipulation gesture. */
pointerId: number | null
}
/** Whether this element can consume a vertical gesture in the given direction. */
function canScrollVertically(element: HTMLElement, direction: VerticalDirection): boolean {
if (direction === 0) return element.scrollHeight > element.clientHeight + 1
if (direction < 0) return element.scrollTop > 1
return element.scrollTop + element.clientHeight < element.scrollHeight - 1
}
/** A nested overflow owner keeps wheel/key input away from the transcript. */
function nestedOwnsVerticalScroll(
target: EventTarget | null,
scrollport: HTMLElement,
direction: VerticalDirection,
): boolean {
let current = target instanceof HTMLElement ? target : null
while (current !== null && current !== scrollport) {
const style = getComputedStyle(current)
const scrollable = style.overflowY === 'auto' || style.overflowY === 'scroll' || style.overflowY === 'overlay'
if (scrollable && current.scrollHeight > current.clientHeight + 1) {
if (canScrollVertically(current, direction)) return true
if (style.overscrollBehaviorY === 'contain' || style.overscrollBehaviorY === 'none') return true
}
current = current.parentElement
}
return false
}
/** Vertical scrolling keys and their expected host direction. */
function keyDirection(event: globalThis.KeyboardEvent): VerticalDirection | null {
if (event.key === 'ArrowUp' || event.key === 'PageUp' || event.key === 'Home') return -1
if (event.key === 'ArrowDown' || event.key === 'PageDown' || event.key === 'End') return 1
if (event.key === ' ' || event.key === 'Spacebar') return event.shiftKey ? -1 : 1
return null
}
/** Whether the focused control, rather than its scroll ancestor, owns this key. */
function consumesScrollKey(event: globalThis.KeyboardEvent): boolean {
const target = event.target
if (!(target instanceof HTMLElement)) return false
const editable = target.isContentEditable || target.closest('input, textarea, select') !== null
if (event.key === ' ' || event.key === 'Spacebar') {
return editable || target.closest('button, [role="button"], [role="menuitem"]') !== null
}
if (event.key === 'PageUp' || event.key === 'PageDown') return false
return editable || target.closest('[role="tab"], [role="menuitem"], [role="listbox"], [role="option"], [role="slider"], [role="spinbutton"]') !== null
}
/** Active column host when present; otherwise the view-local scroller. */
function scrollerOf(from: HTMLElement): HTMLElement {
@@ -397,19 +335,13 @@ export function ChatView({
const listRef = useRef<HTMLDivElement | null>(null)
const columnRef = useRef<HTMLDivElement | null>(null)
/** Reader-owned follow intent, distinct from transient bottom geometry. */
const bottomOwnedRef = useRef(true)
const [bottomOwned, setBottomOwned] = useState(true)
/** Distance created by reader movement while follow ownership is retained. */
const readerAwayRef = useRef(0)
/** Last scrollTop delivered or written on the main thread. */
const atBottomRef = useRef(true)
const [atBottom, setAtBottom] = useState(true)
/** Last position delivered or written on the main thread. */
const observedTopRef = useRef(0)
/** Only an observable reader input may let scroll geometry change follow intent. */
const readerGestureRef = useRef<ReaderGesture | null>(null)
const finishReaderGestureRef = useRef<(gesture: ReaderGesture) => void>(() => {})
const scheduleReaderGestureEndRef = useRef<(gesture: ReaderGesture) => void>(() => {})
const schedulePointerCancelEndRef = useRef<(gesture: ReaderGesture) => void>(() => {})
const followRef = useRef<(() => void) | null>(null)
/** Pre-input position for the current wheel gesture. */
const wheelStartRef = useRef<number | null>(null)
const wheelEpochRef = useRef(0)
/** Paging anchor: semantic row/position at click, updated by reader scrolls
* while the request is pending and restored after the prepend lands. */
const anchorRef = useRef<PagingAnchor | null>(null)
@@ -428,117 +360,17 @@ export function ChatView({
const lastSteeringId = pendingSteering[pendingSteering.length - 1]?.id ?? null
const followSig = `${openState}:${firstSeq}:${lastKey}:${nodes.length}:${running ? 1 : 0}:${runningCalls.length}:${lastSteeringId ?? ''}`
const writeBottom = (el: HTMLElement): void => {
const toBottom = (el: HTMLElement): void => {
wheelStartRef.current = null
wheelEpochRef.current += 1
anchorRef.current = null
el.scrollTop = el.scrollHeight
observedTopRef.current = el.scrollTop
readerAwayRef.current = 0
atBottomRef.current = true
setAtBottom(true)
chatScroll.save(null)
}
const cancelReaderGesture = (): void => {
readerGestureRef.current = null
}
const toBottom = (el: HTMLElement): void => {
cancelReaderGesture()
anchorRef.current = null
bottomOwnedRef.current = true
setBottomOwned(true)
writeBottom(el)
}
const recordReaderPosition = (local: HTMLElement, el: HTMLElement, ownsBottom?: boolean): boolean => {
const nextOwnsBottom = ownsBottom
?? el.scrollHeight - el.scrollTop - el.clientHeight <= FOLLOW_THRESHOLD + 1
bottomOwnedRef.current = nextOwnsBottom
setBottomOwned(nextOwnsBottom)
const position = nextOwnsBottom ? null : scrollPosition(local, el)
if (nextOwnsBottom) {
anchorRef.current = null
chatScroll.save(null)
} else {
if (anchorRef.current !== null && position !== null) {
anchorRef.current = { key: position.anchorKey, top: position.anchorTop }
}
if (position !== null) chatScroll.save(position)
}
return nextOwnsBottom
}
finishReaderGestureRef.current = (gesture) => {
if (readerGestureRef.current !== gesture) return
readerGestureRef.current = null
const local = listRef.current
if (local === null) return
const el = scrollerOf(local)
const physicalAway = Math.max(0, el.scrollHeight - el.scrollTop - el.clientHeight)
if (bottomOwnedRef.current && Math.abs(physicalAway - readerAwayRef.current) > 1) {
followRef.current?.()
}
}
// A wheel tick, smooth keyboard scroll, or touch fling can span multiple
// scroll events. End only after two animation frames without new movement;
// a held pointer keeps the gesture alive across slower frames.
scheduleReaderGestureEndRef.current = (gesture) => {
const epoch = gesture.epoch
requestAnimationFrame(() => {
requestAnimationFrame(() => {
if (readerGestureRef.current === gesture && gesture.epoch === epoch && !gesture.held) {
finishReaderGestureRef.current(gesture)
}
})
})
}
schedulePointerCancelEndRef.current = (gesture) => {
const epoch = gesture.epoch
let frames = POINTER_CANCEL_GRACE_FRAMES
const waitForScroll = (): void => {
requestAnimationFrame(() => {
if (readerGestureRef.current !== gesture || gesture.epoch !== epoch) return
frames -= 1
if (frames > 0) waitForScroll()
else finishReaderGestureRef.current(gesture)
})
}
waitForScroll()
}
const armReaderGesture = (
startTop: number,
startBottom: number,
held = false,
pointerId: number | null = null,
): ReaderGesture => {
const current = readerGestureRef.current
const persistentAway = bottomOwnedRef.current
? readerAwayRef.current
: Math.max(0, startBottom - startTop)
const gesture = current ?? {
awayDistance: persistentAway,
epoch: 0,
held: false,
lastTop: startTop,
pointerId: null,
}
gesture.epoch += 1
if (held) {
gesture.held = true
gesture.pointerId = pointerId
}
readerGestureRef.current = gesture
scheduleReaderGestureEndRef.current(gesture)
return gesture
}
followRef.current = () => {
const local = listRef.current
if (local !== null && bottomOwnedRef.current && readerGestureRef.current === null) {
writeBottom(scrollerOf(local))
}
}
useLayoutEffect(() => {
const local = listRef.current
/* v8 ignore next -- ref-null guard: React attaches the ref before layout effects run. */
@@ -553,21 +385,16 @@ export function ChatView({
if (saved === null) {
toBottom(el)
} else {
cancelReaderGesture()
el.scrollTop = saved.scrollTop
const row = anchorElement(local, saved.anchorKey)
if (row !== null) el.scrollTop += flowTop(row, el) - saved.anchorTop
observedTopRef.current = el.scrollTop
const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= FOLLOW_THRESHOLD + 1
if (isAtBottom) {
toBottom(el)
} else {
observedTopRef.current = el.scrollTop
readerAwayRef.current = 0
bottomOwnedRef.current = false
setBottomOwned(false)
const normalized = scrollPosition(local, el)
if (normalized !== null) chatScroll.save(normalized)
}
atBottomRef.current = isAtBottom
setAtBottom(isAtBottom)
const normalized = isAtBottom ? null : scrollPosition(local, el)
if (isAtBottom) chatScroll.save(null)
else if (normalized !== null) chatScroll.save(normalized)
}
firstSeqRef.current = firstSeq
lastKeyRef.current = lastKey
@@ -582,16 +409,8 @@ export function ChatView({
const anchor = anchorRef.current
anchorRef.current = null
const row = anchorElement(local, anchor.key)
cancelReaderGesture()
if (row !== null) el.scrollTop += flowTop(row, el) - anchor.top
observedTopRef.current = el.scrollTop
const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= FOLLOW_THRESHOLD + 1
readerAwayRef.current = 0
bottomOwnedRef.current = isAtBottom
setBottomOwned(isAtBottom)
const normalized = isAtBottom ? null : scrollPosition(local, el)
if (isAtBottom) chatScroll.save(null)
else if (normalized !== null) chatScroll.save(normalized)
firstSeqRef.current = firstSeq
/* v8 ignore next -- ?? arm: a prepend adds nodes, so the flow list here is never empty. */
lastKeyRef.current = lastKey
@@ -610,9 +429,8 @@ export function ChatView({
lastSteeringIdRef.current = lastSteeringId
followSigRef.current = followSig
// Follow new flow content while pinned; do NOT re-pin on every render
// merely because bottomOwnedRef is true (scroll threshold → setState → snap).
if (appendedUser || appendedSteering
|| (tipMoved && bottomOwnedRef.current && readerGestureRef.current === null)) toBottom(el)
// merely because atBottomRef is true (scroll threshold → setState → snap).
if (appendedUser || appendedSteering || (tipMoved && atBottomRef.current)) toBottom(el)
})
const onScrollRef = useRef(() => {})
@@ -621,210 +439,78 @@ export function ChatView({
/* v8 ignore next -- ref-null guard: the handler only fires while mounted. */
if (local === null) return
const el = scrollerOf(local)
const gesture = readerGestureRef.current
if (gesture !== null) {
const previousTop = gesture.lastTop
// A tail shrink can clamp the old scrollTop to the new physical floor
// before its scroll event arrives. Exclude that forced portion while
// retaining any reader movement beyond the clamp.
const currentFloor = Math.max(0, el.scrollHeight - el.clientHeight)
const baselineTop = Math.min(previousTop, currentFloor)
const deltaTop = el.scrollTop - baselineTop
gesture.lastTop = el.scrollTop
if (Math.abs(deltaTop) > 0.5) {
gesture.awayDistance = Math.max(0, gesture.awayDistance - deltaTop)
if (bottomOwnedRef.current) {
readerAwayRef.current = gesture.awayDistance
if (!recordReaderPosition(local, el, gesture.awayDistance <= FOLLOW_THRESHOLD + 1)) {
readerAwayRef.current = 0
}
} else {
// Only reader motion toward the floor may reclaim follow ownership;
// shrink/clamp or an upward gesture must preserve reading mode.
const ownsBottom = recordReaderPosition(local, el, deltaTop > 0
? undefined
: false)
if (ownsBottom) {
const physicalAway = Math.max(0, el.scrollHeight - el.scrollTop - el.clientHeight)
gesture.awayDistance = physicalAway
readerAwayRef.current = physicalAway
} else {
readerAwayRef.current = 0
}
}
} else if (!bottomOwnedRef.current && Math.abs(el.scrollTop - previousTop) > 0.5) {
recordReaderPosition(local, el, false)
}
gesture.epoch += 1
scheduleReaderGestureEndRef.current(gesture)
observedTopRef.current = el.scrollTop
// Only wheel input may make raw scroll geometry change follow ownership.
// Browser clamping and delayed programmatic scroll events otherwise have
// the same event shape and must preserve the current ownership state.
const floor = Math.max(0, el.scrollHeight - el.clientHeight)
const wheelStart = wheelStartRef.current
const movedByWheel = wheelStart !== null
&& Math.abs(el.scrollTop - Math.min(wheelStart, floor)) > 0.5
const isAtBottom = movedByWheel
? floor - el.scrollTop <= FOLLOW_THRESHOLD + 1
: atBottomRef.current
if (!movedByWheel && isAtBottom) {
toBottom(el)
return
}
if (bottomOwnedRef.current) {
atBottomRef.current = isAtBottom
setAtBottom(isAtBottom)
const position = isAtBottom ? null : scrollPosition(local, el)
if (isAtBottom) {
anchorRef.current = null
const distance = el.scrollHeight - el.scrollTop - el.clientHeight
if (Math.abs(distance) > 1) writeBottom(el)
else {
readerAwayRef.current = 0
chatScroll.save(null)
}
observedTopRef.current = el.scrollTop
return
} else if (anchorRef.current !== null && position !== null) {
anchorRef.current = { key: position.anchorKey, top: position.anchorTop }
}
// A layout/programmatic event while reading may update the saved semantic
// position, but cannot silently reclaim or release bottom ownership.
const position = scrollPosition(local, el)
if (position !== null) chatScroll.save(position)
// Continuous save (unmount happens after ref detach, so saving there is
// too late); pinned-to-bottom clears so a remount keeps following.
if (isAtBottom) chatScroll.save(null)
else if (position !== null) chatScroll.save(position)
observedTopRef.current = el.scrollTop
}
// Bind scroll and its reader-input provenance to the resolved scrollport.
// Bind scroll and the wheel provenance needed to distinguish reader input
// from layout-driven scrolls on the resolved scrollport once per mount.
useEffect(() => {
const local = listRef.current
/* v8 ignore next -- ref-null guard: effect runs after the list node commits. */
if (local === null) return
const el = scrollerOf(local)
let wheelStartTop = el.scrollTop
let wheelStartBottom = el.scrollHeight - el.clientHeight
let wheelCanMoveHost = false
let directPointer: {
id: number
lastY: number
startBottom: number
startTop: number
target: EventTarget | null
} | null = null
let tabStart: { bottom: number; top: number } | null = null
let tabClearTimer: ReturnType<typeof setTimeout> | null = null
const clearTabStart = (): void => {
tabStart = null
if (tabClearTimer !== null) {
clearTimeout(tabClearTimer)
tabClearTimer = null
}
}
const onScroll = (): void => { onScrollRef.current() }
const onWheelCapture = (event: WheelEvent): void => {
// Passive wheel delivery may observe compositor-updated geometry before
// the main-thread scroll event. The last delivered/written top remains
// the authoritative pre-input baseline.
wheelStartTop = observedTopRef.current
wheelStartBottom = el.scrollHeight - el.clientHeight
const direction: VerticalDirection = event.deltaY < 0 ? -1 : 1
wheelCanMoveHost = event.deltaY !== 0 && (direction < 0
? wheelStartTop > 1
: wheelStartTop < wheelStartBottom - 1)
}
const onWheel = (event: WheelEvent): void => {
if (event.ctrlKey || event.deltaY === 0) return
const direction: VerticalDirection = event.deltaY < 0 ? -1 : 1
if (!wheelCanMoveHost) return
if (nestedOwnsVerticalScroll(event.target, el, direction)) return
armReaderGesture(wheelStartTop, wheelStartBottom)
const startTop = observedTopRef.current
const floor = Math.max(0, el.scrollHeight - el.clientHeight)
const canMove = event.deltaY < 0 ? startTop > 1 : startTop < floor - 1
if (!canMove) return
wheelStartRef.current = startTop
const epoch = ++wheelEpochRef.current
requestAnimationFrame(() => {
requestAnimationFrame(() => {
if (wheelEpochRef.current === epoch) wheelStartRef.current = null
})
})
}
const onKeyDown = (event: globalThis.KeyboardEvent): void => {
if (event.key === 'Tab') {
if (event.defaultPrevented) clearTabStart()
return
}
if (event.defaultPrevented) return
if (!(event.target instanceof Node) || !el.contains(event.target)) return
const direction = keyDirection(event)
if (direction === null) return
if (consumesScrollKey(event)) return
if (!canScrollVertically(el, direction)) return
if (nestedOwnsVerticalScroll(event.target, el, direction)) return
armReaderGesture(el.scrollTop, el.scrollHeight - el.clientHeight)
}
const onTabKeyCapture = (event: globalThis.KeyboardEvent): void => {
if (event.key !== 'Tab' || event.altKey || event.ctrlKey || event.metaKey) return
const start = { bottom: el.scrollHeight - el.clientHeight, top: el.scrollTop }
tabStart = start
if (tabClearTimer !== null) clearTimeout(tabClearTimer)
// The browser's default Tab focus and focus-induced scroll happen after
// keydown propagation but before the next task. A microtask would clear
// this provenance before focusin can consume it.
tabClearTimer = setTimeout(() => {
if (tabStart === start) tabStart = null
tabClearTimer = null
}, 0)
}
const onFocusIn = (): void => {
const start = tabStart
clearTabStart()
if (start !== null) armReaderGesture(start.top, start.bottom)
}
const onPointerDown = (event: PointerEvent): void => {
if (!event.isPrimary) return
if (event.pointerType === 'mouse') {
// Native scrollbar/track events target the scrollport; ordinary flow
// controls target their own element and must not pause follow.
if (event.button === 0 && event.target === el) {
armReaderGesture(el.scrollTop, el.scrollHeight - el.clientHeight, true, event.pointerId)
}
return
}
directPointer = {
id: event.pointerId,
lastY: event.clientY,
startBottom: el.scrollHeight - el.clientHeight,
startTop: el.scrollTop,
target: event.target,
}
}
const onPointerMove = (event: PointerEvent): void => {
const pointer = directPointer
if (pointer === null || event.pointerId !== pointer.id) return
const delta = pointer.lastY - event.clientY
pointer.lastY = event.clientY
if (Math.abs(delta) < 2) return
const direction: VerticalDirection = delta < 0 ? -1 : 1
if (!canScrollVertically(el, direction)) return
if (nestedOwnsVerticalScroll(pointer.target, el, direction)) return
armReaderGesture(pointer.startTop, pointer.startBottom, true, pointer.id)
}
const releasePointer = (event: PointerEvent, cancelled: boolean): void => {
if (!event.isPrimary) return
if (directPointer?.id === event.pointerId) directPointer = null
const gesture = readerGestureRef.current
if (gesture === null || !gesture.held || gesture.pointerId !== event.pointerId) return
gesture.held = false
gesture.pointerId = null
gesture.epoch += 1
if (cancelled) schedulePointerCancelEndRef.current(gesture)
else scheduleReaderGestureEndRef.current(gesture)
}
const onPointerUp = (event: PointerEvent): void => { releasePointer(event, false) }
const onPointerCancel = (event: PointerEvent): void => { releasePointer(event, true) }
el.addEventListener('scroll', onScroll, { passive: true })
el.addEventListener('wheel', onWheelCapture, { capture: true, passive: true })
el.addEventListener('wheel', onWheel, { passive: true })
el.addEventListener('focusin', onFocusIn)
el.addEventListener('pointerdown', onPointerDown, { passive: true })
window.addEventListener('keydown', onTabKeyCapture, { capture: true })
window.addEventListener('keydown', onKeyDown)
window.addEventListener('pointermove', onPointerMove, { passive: true })
window.addEventListener('pointerup', onPointerUp, { passive: true })
window.addEventListener('pointercancel', onPointerCancel, { passive: true })
el.addEventListener('wheel', onWheel, { capture: true, passive: true })
return () => {
cancelReaderGesture()
clearTabStart()
wheelStartRef.current = null
el.removeEventListener('scroll', onScroll)
el.removeEventListener('wheel', onWheelCapture, true)
el.removeEventListener('wheel', onWheel)
el.removeEventListener('focusin', onFocusIn)
el.removeEventListener('pointerdown', onPointerDown)
window.removeEventListener('keydown', onTabKeyCapture, true)
window.removeEventListener('keydown', onKeyDown)
window.removeEventListener('pointermove', onPointerMove)
window.removeEventListener('pointerup', onPointerUp)
window.removeEventListener('pointercancel', onPointerCancel)
el.removeEventListener('wheel', onWheel, true)
}
}, [])
// The ref starts null and is assigned every render, so the placeholder
// initializer a function initial value would need never exists.
const followRef = useRef<(() => void) | null>(null)
followRef.current = () => {
const local = listRef.current
if (local !== null && atBottomRef.current) {
const el = scrollerOf(local)
el.scrollTop = el.scrollHeight
observedTopRef.current = el.scrollTop
chatScroll.save(null)
}
}
// Streaming, tool disclosures, and other flow changes resize the column;
// the sticky composer resizes outside it. This observer owns ChatView's
// dynamic-height follow decisions and writes only while the reader is pinned.
@@ -853,7 +539,6 @@ export function ChatView({
const el = scrollerOf(local)
const row = pagingAnchor(local, el)
if (row !== null && row.dataset.chatAnchorKey !== undefined) {
cancelReaderGesture()
anchorRef.current = {
key: row.dataset.chatAnchorKey,
top: flowTop(row, el),
@@ -971,7 +656,7 @@ export function ChatView({
<PendingSteeringBubble key={item.id} content={item.content} t={t} />
))}
</div>
{!bottomOwned && (
{!atBottom && (
<div className={css.toBottomSlot}>
<button
type="button"

291
packages/client/ui-conversation/tests/chat-view.spec.tsx
View File

@@ -157,6 +157,13 @@ function makeHarness(init?: Partial<ConversationSnapshot>) {
return { set, ChatView, props, openDetails, openFile, loadOlder, inspectCall, chatScroll, forkAt, setSelection }
}
/** Simulate reader input before the browser delivers the host scroll event. */
function readerScroll(element: HTMLElement, top: number): void {
fireEvent.wheel(element, { deltaY: top < element.scrollTop ? -120 : 120 })
element.scrollTop = top
fireEvent.scroll(element)
}
function installScrollMetrics(element: HTMLElement, initialHeight: number, clientHeight: number) {
let scrollHeight = initialHeight
let scrollTop = 0
@@ -168,10 +175,7 @@ function installScrollMetrics(element: HTMLElement, initialHeight: number, clien
set: (value: number) => { scrollTop = Math.max(0, Math.min(value, scrollHeight - clientHeight)) },
})
return {
setHeight: (value: number) => {
scrollHeight = value
scrollTop = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight))
},
setHeight: (value: number) => { scrollHeight = value },
setLayout: (height: number, top: number) => {
scrollHeight = height
scrollTop = Math.max(0, Math.min(top, scrollHeight - clientHeight))
@@ -179,34 +183,6 @@ function installScrollMetrics(element: HTMLElement, initialHeight: number, clien
}
}
/** Simulate the browser order: reader input precedes the host scroll event. */
function readerScroll(element: HTMLElement, top: number): void {
fireEvent.wheel(element, { deltaY: top < element.scrollTop ? -120 : 120 })
element.scrollTop = top
fireEvent.scroll(element)
}
/** Settle test-installed metrics at the owned floor before reader input. */
function settleAtBottom(element: HTMLElement): void {
element.scrollTop = element.scrollHeight - element.clientHeight
fireEvent.scroll(element)
}
function installAnimationFrameQueue() {
let callbacks: FrameRequestCallback[] = []
vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
callbacks.push(callback)
return callbacks.length
})
return {
flush: () => {
const frame = callbacks
callbacks = []
act(() => { frame.forEach((callback) => { callback(performance.now()) }) })
},
}
}
describe('chat-flow derivation', () => {
it('groups consecutive tool results and keeps stable keys', () => {
const nodes: ConversationNode[] = [
@@ -319,7 +295,6 @@ describe('ChatView', () => {
)
Object.defineProperty(scroller, 'scrollHeight', { value: 800, writable: true })
Object.defineProperty(scroller, 'clientHeight', { value: 200, writable: true })
settleAtBottom(scroller)
readerScroll(scroller, 50)
fireEvent.click(view.getByText('加载更早'))
// The reader moves after the request starts; this, not the click-time
@@ -711,7 +686,6 @@ describe('ChatView', () => {
// jsdom has no layout: fake the metrics the anchor math reads.
Object.defineProperty(scroller, 'scrollHeight', { value: 1000, writable: true })
Object.defineProperty(scroller, 'clientHeight', { value: 400, writable: true })
settleAtBottom(scroller)
const anchored = view.container.querySelector('[data-chat-flow-key="n5"]') as HTMLDivElement
let anchoredTop = 100
vi.spyOn(anchored, 'getBoundingClientRect').mockImplementation(
@@ -724,8 +698,6 @@ describe('ChatView', () => {
anchoredTop = 700
act(() => { h.set({ nodes: [user(1, 'old'), assistant(2, 'b'), user(5, 'later'), assistant(6, 'a')] }) })
expect(scroller.scrollTop).toBe(680) // reader offset 80 + the anchored row's 600px shift
fireEvent.scroll(scroller) // delayed event from the semantic correction stays reader-owned
expect(scroller.scrollTop).toBe(680)
// A new trailing user bubble (own words) force-scrolls to the bottom.
act(() => { h.set({ nodes: [user(1, 'old'), assistant(2, 'b'), user(5, 'later'), assistant(6, 'a'), user(9, 'mine')] }) })
expect(scroller.scrollTop).toBe(1600)
@@ -746,7 +718,6 @@ describe('ChatView', () => {
try {
Object.defineProperty(scroller, 'scrollHeight', { value: 700, writable: true })
Object.defineProperty(scroller, 'clientHeight', { value: 200, writable: true })
settleAtBottom(scroller)
readerScroll(scroller, 80)
fireEvent.click(view.getByText('加载更早'))
// Total height grows by 500, but only 300 belongs before the call row.
@@ -774,7 +745,6 @@ describe('ChatView', () => {
try {
Object.defineProperty(scroller, 'scrollHeight', { value: 700, writable: true })
Object.defineProperty(scroller, 'clientHeight', { value: 200, writable: true })
settleAtBottom(scroller)
readerScroll(scroller, 80)
fireEvent.click(view.getByText('加载更早'))
Object.defineProperty(scroller, 'scrollHeight', { value: 1_200, writable: true })
@@ -793,7 +763,6 @@ describe('ChatView', () => {
const scroller = view.container.querySelector('[class*="scroll"]') as HTMLDivElement
Object.defineProperty(scroller, 'scrollHeight', { value: 800, writable: true })
Object.defineProperty(scroller, 'clientHeight', { value: 200, writable: true })
settleAtBottom(scroller)
readerScroll(scroller, 50)
fireEvent.click(view.getByText('加载更早'))
fireEvent.click(view.getByLabelText('回到底部'))
@@ -809,7 +778,6 @@ describe('ChatView', () => {
const scroller = view.container.querySelector('[class*="scroll"]') as HTMLDivElement
Object.defineProperty(scroller, 'scrollHeight', { value: 1000, writable: true })
Object.defineProperty(scroller, 'clientHeight', { value: 300, writable: true })
settleAtBottom(scroller)
readerScroll(scroller, 100) // far from bottom
const backButton = view.getByLabelText('回到底部')
expect(backButton).toBeTruthy()
@@ -822,31 +790,17 @@ describe('ChatView', () => {
expect(view.queryByLabelText('回到底部')).toBeNull()
})
it('re-pins a UA layout scroll after the bottom write has settled', () => {
let notify: (() => void) | undefined
class ResizeObserverStub {
constructor(callback: ResizeObserverCallback) {
notify = () => { callback([], this as unknown as ResizeObserver) }
}
observe = vi.fn()
disconnect = vi.fn()
}
vi.stubGlobal('ResizeObserver', ResizeObserverStub)
it('keeps following when a delayed clamp scroll arrives after layout regrows', () => {
const h = makeHarness({ nodes: [user(1, 'q'), assistant(2, 'a')] })
const view = render(<h.ChatView {...h.props} />)
const scroller = view.container.querySelector('[class*="scroll"]') as HTMLDivElement
const metrics = installScrollMetrics(scroller, 1_000, 300)
settleAtBottom(scroller)
readerScroll(scroller, 100)
fireEvent.click(view.getByLabelText('回到底部'))
expect(scroller.scrollTop).toBe(700)
fireEvent.scroll(scroller) // delivery from the completed bottom write
scroller.scrollTop = 700
fireEvent.scroll(scroller)
// A stream-finalization shrink can clamp scrollTop before Markdown reflow
// restores the taller layout. The eventual UA scroll has no reader input
// and must restore ownership even though it differs from the old target.
fireEvent.wheel(scroller, { deltaY: 120 }) // no-op wheel at the physical bottom
// The wheel cannot move farther down. A stream-finalization shrink clamps
// the old position, then reflow grows the layout before scroll delivery.
fireEvent.wheel(scroller, { deltaY: 120 })
metrics.setLayout(1_040, 500)
fireEvent.scroll(scroller)
expect(scroller.scrollTop).toBe(740)
@@ -854,221 +808,24 @@ describe('ChatView', () => {
expect(h.chatScroll.read()).toBeNull()
metrics.setHeight(1_200)
act(() => { notify?.() })
act(() => { h.set({ running: true }) })
expect(scroller.scrollTop).toBe(900)
})
it('keeps a reader gesture active until its small scrolls cross the follow threshold', () => {
let notify: (() => void) | undefined
class ResizeObserverStub {
constructor(callback: ResizeObserverCallback) {
notify = () => { callback([], this as unknown as ResizeObserver) }
}
observe = vi.fn()
disconnect = vi.fn()
}
vi.stubGlobal('ResizeObserver', ResizeObserverStub)
const h = makeHarness({ nodes: [user(1, 'q'), assistant(2, 'a')] })
const view = render(<h.ChatView {...h.props} />)
const scroller = view.container.querySelector('[class*="scroll"]') as HTMLDivElement
const metrics = installScrollMetrics(scroller, 1_000, 300)
settleAtBottom(scroller)
readerScroll(scroller, 100)
fireEvent.click(view.getByLabelText('回到底部'))
fireEvent.wheel(scroller, { deltaY: -120 })
scroller.scrollTop = 695
fireEvent.scroll(scroller)
expect(view.queryByLabelText('回到底部')).toBeNull()
scroller.scrollTop = 680
fireEvent.scroll(scroller)
expect(view.queryByLabelText('回到底部')).toBeNull()
scroller.scrollTop = 650
fireEvent.scroll(scroller)
metrics.setHeight(1_200)
act(() => { notify?.() })
expect(scroller.scrollTop).toBe(650)
expect(view.getByLabelText('回到底部')).toBeTruthy()
expect(h.chatScroll.read()?.scrollTop).toBe(650)
})
it('keeps the first wheel baseline when browser scroll events coalesce', () => {
const h = makeHarness({ nodes: [user(1, 'q'), assistant(2, 'a')] })
const view = render(<h.ChatView {...h.props} />)
const scroller = view.container.querySelector('[class*="scroll"]') as HTMLDivElement
installScrollMetrics(scroller, 1_000, 300)
scroller.scrollTop = 700
fireEvent.scroll(scroller)
fireEvent.wheel(scroller, { deltaY: -120 })
scroller.scrollTop = 650
fireEvent.wheel(scroller, { deltaY: -120 })
fireEvent.scroll(scroller)
expect(scroller.scrollTop).toBe(650)
expect(view.getByLabelText('回到底部')).toBeTruthy()
})
it('uses the last delivered top when compositor scrolling precedes passive wheel delivery', () => {
const h = makeHarness({ nodes: [user(1, 'q'), assistant(2, 'a')] })
const view = render(<h.ChatView {...h.props} />)
const scroller = view.container.querySelector('[class*="scroll"]') as HTMLDivElement
installScrollMetrics(scroller, 1_000, 300)
settleAtBottom(scroller)
scroller.scrollTop = 700
fireEvent.scroll(scroller)
// Chromium's compositor can update scrollTop before passive wheel
// listeners run; the main-thread scroll event is still pending here.
scroller.scrollTop = 500
fireEvent.wheel(scroller, { deltaY: -200 })
fireEvent.scroll(scroller)
expect(view.getByLabelText('回到底部')).toBeTruthy()
})
it('separates a small reader delta from layout growth before the gesture begins', () => {
let notify: (() => void) | undefined
class ResizeObserverStub {
constructor(callback: ResizeObserverCallback) {
notify = () => { callback([], this as unknown as ResizeObserver) }
}
observe = vi.fn()
disconnect = vi.fn()
}
vi.stubGlobal('ResizeObserver', ResizeObserverStub)
const frames = installAnimationFrameQueue()
const h = makeHarness({ nodes: [user(1, 'q'), assistant(2, 'a')] })
const view = render(<h.ChatView {...h.props} />)
const scroller = view.container.querySelector('[class*="scroll"]') as HTMLDivElement
const metrics = installScrollMetrics(scroller, 1_000, 300)
scroller.scrollTop = 700
fireEvent.scroll(scroller)
metrics.setHeight(1_040)
fireEvent.wheel(scroller, { deltaY: -120 })
scroller.scrollTop = 695
fireEvent.scroll(scroller)
expect(view.queryByLabelText('回到底部')).toBeNull()
act(() => { notify?.() })
expect(scroller.scrollTop).toBe(695)
frames.flush()
frames.flush()
expect(scroller.scrollTop).toBe(740)
expect(view.queryByLabelText('回到底部')).toBeNull()
})
it('does not treat an active-gesture tail clamp as reader movement', () => {
const frames = installAnimationFrameQueue()
const h = makeHarness({ nodes: [user(1, 'q'), assistant(2, 'a')] })
const view = render(<h.ChatView {...h.props} />)
const scroller = view.container.querySelector('[class*="scroll"]') as HTMLDivElement
const metrics = installScrollMetrics(scroller, 1_000, 300)
settleAtBottom(scroller)
fireEvent.wheel(scroller, { deltaY: -5 })
scroller.scrollTop = 695
fireEvent.scroll(scroller)
metrics.setHeight(800) // floor 500 clamps the active gesture's old top
fireEvent.scroll(scroller)
expect(view.queryByLabelText('回到底部')).toBeNull()
scroller.scrollTop = 400
fireEvent.scroll(scroller)
expect(view.getByLabelText('回到底部')).toBeTruthy()
metrics.setHeight(600) // floor 300 clamps while reading in the same gesture
fireEvent.scroll(scroller)
expect(view.getByLabelText('回到底部')).toBeTruthy()
metrics.setHeight(200) // a non-scrollable floor clamps to zero, never negative
fireEvent.scroll(scroller)
expect(view.getByLabelText('回到底部')).toBeTruthy()
frames.flush()
frames.flush()
})
it('does not arm transcript ownership while a nested overflow consumes the wheel', () => {
const h = makeHarness({ nodes: [user(1, 'q'), assistant(2, 'a')] })
const view = render(<h.ChatView {...h.props} />)
const scroller = view.container.querySelector('[class*="scroll"]') as HTMLDivElement
const metrics = installScrollMetrics(scroller, 1_000, 300)
const nested = document.createElement('div')
nested.style.overflowY = 'auto'
Object.defineProperty(nested, 'scrollHeight', { value: 400, configurable: true })
Object.defineProperty(nested, 'clientHeight', { value: 100, configurable: true })
Object.defineProperty(nested, 'scrollTop', { value: 200, writable: true, configurable: true })
scroller.appendChild(nested)
scroller.scrollTop = 700
fireEvent.scroll(scroller)
fireEvent.wheel(nested, { deltaY: -120 })
metrics.setLayout(1_000, 500)
fireEvent.scroll(scroller)
expect(scroller.scrollTop).toBe(700)
expect(view.queryByLabelText('回到底部')).toBeNull()
nested.scrollTop = 0
fireEvent.wheel(nested, { deltaY: -120 })
scroller.scrollTop = 500
fireEvent.scroll(scroller)
expect(scroller.scrollTop).toBe(500)
expect(view.getByLabelText('回到底部')).toBeTruthy()
nested.scrollTop = 300
nested.addEventListener('wheel', (event) => {
event.preventDefault()
scroller.scrollTop = 700
}, { once: true })
fireEvent.wheel(nested, { deltaY: 120 })
fireEvent.scroll(scroller)
expect(scroller.scrollTop).toBe(700)
expect(view.queryByLabelText('回到底部')).toBeNull()
})
it('uses host navigation keys without stealing editing keys', async () => {
const h = makeHarness({ nodes: [user(1, 'q'), assistant(2, 'a')] })
const view = render(<h.ChatView {...h.props} />)
const scroller = view.container.querySelector('[class*="scroll"]') as HTMLDivElement
const metrics = installScrollMetrics(scroller, 1_000, 300)
const button = document.createElement('button')
const link = document.createElement('a')
link.href = '#target'
const textarea = document.createElement('textarea')
scroller.append(button, link, textarea)
scroller.scrollTop = 700
fireEvent.scroll(scroller)
fireEvent.keyDown(button, { key: 'PageUp' })
scroller.scrollTop = 500
fireEvent.scroll(scroller)
expect(view.getByLabelText('回到底部')).toBeTruthy()
fireEvent.click(view.getByLabelText('回到底部'))
fireEvent.keyDown(link, { key: ' ', shiftKey: true })
scroller.scrollTop = 500
fireEvent.scroll(scroller)
expect(view.getByLabelText('回到底部')).toBeTruthy()
fireEvent.click(view.getByLabelText('回到底部'))
fireEvent.keyDown(textarea, { key: 'ArrowUp' })
metrics.setLayout(1_000, 500)
fireEvent.scroll(scroller)
expect(scroller.scrollTop).toBe(700)
expect(view.queryByLabelText('回到底部')).toBeNull()
fireEvent.keyDown(textarea, { key: 'PageUp' })
scroller.scrollTop = 500
fireEvent.scroll(scroller)
expect(view.getByLabelText('回到底部')).toBeTruthy()
fireEvent.click(view.getByLabelText('回到底部'))
fireEvent.keyDown(textarea, { key: 'Tab' })
// Chromium runs microtasks before the default Tab focus transition. The
// provenance must survive that checkpoint until focusin consumes it.
await Promise.resolve()
fireEvent.focusIn(button)
scroller.scrollTop = 500
fireEvent.scroll(scroller)
expect(view.getByLabelText('回到底部')).toBeTruthy()
})
it('one ResizeObserver owns pinned dynamic-height follow and ignores growth while away', () => {
let notify: (() => void) | undefined
const observe = vi.fn()
@@ -1099,28 +856,16 @@ describe('ChatView', () => {
})
it('entering the at-bottom threshold does not snap the remaining scroll distance', () => {
const frames = installAnimationFrameQueue()
const h = makeHarness({ nodes: [user(1, 'q'), assistant(2, 'a')] })
const view = render(<h.ChatView {...h.props} />)
const scroller = view.container.querySelector('[class*="scroll"]') as HTMLDivElement
Object.defineProperty(scroller, 'scrollHeight', { value: 1000, writable: true })
Object.defineProperty(scroller, 'clientHeight', { value: 300, writable: true })
settleAtBottom(scroller)
// Inside FOLLOW_THRESHOLD (24) but not flush with the floor — the chrome
// re-render from setAtBottom must not force scrollTop to scrollHeight.
readerScroll(scroller, 690) // distance-to-bottom = 10
expect(view.queryByLabelText('回到底部')).toBeNull()
expect(scroller.scrollTop).toBe(690)
frames.flush()
frames.flush()
expect(scroller.scrollTop).toBe(690)
const button = document.createElement('button')
scroller.appendChild(button)
fireEvent.keyDown(button, { key: 'Tab' })
fireEvent.focusIn(button) // visible focus target: no host scroll follows
frames.flush()
frames.flush()
expect(scroller.scrollTop).toBe(690)
})
it('under data-conversation-scroll, bottom-follow targets the host scrollport', () => {
@@ -1174,8 +919,6 @@ describe('ChatView', () => {
host.scrollTop = 0
view.rerender(<h.ChatView {...h.props} />)
expect(host.scrollTop).toBe(580) // approximate 100 + the row's 480px reflow shift
fireEvent.scroll(host) // delayed semantic-restore event remains away from bottom
expect(host.scrollTop).toBe(580)
// The restored position is above the floor: follow stays disarmed.
expect(view.getByLabelText('回到底部')).toBeTruthy()
} finally {