Skip to content

fix(web): dismiss chat tooltips when scrolling #7768

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Ic3b3rg wants to merge 5 commits into from
Closed

fix(web): dismiss chat tooltips when scrolling #7768

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
062c63e
fix(web): dismiss chat tooltips when scrolling
Ic3b3rg Aug 21, 2026
4523b7f
fix(web): preserve tooltip focus within triggers
Ic3b3rg Aug 21, 2026
b0d52bb
fix(web): keep timeline tooltips above chat chrome
Ic3b3rg Aug 21, 2026
5376f96
fix(web): retain focused tooltip tracking
Ic3b3rg Aug 21, 2026
55de62b
Merge branch 'main' into fix/chat-tooltip-scroll-dismiss
Ic3b3rg Aug 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions apps/web/src/components/chat/MessagesTimeline.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,32 @@ vi.mock("@pierre/diffs/react", () => {
return { FileDiff: MockFileDiff };
});

vi.mock("../ui/tooltip", async (importOriginal) => {
const actual = await importOriginal<typeof import("../ui/tooltip")>();

return {
...actual,
TooltipLayerProvider: ({
children,
layer,
onTriggerHoverChange,
}: {
children: ReactNode;
layer: string;
onTriggerHoverChange?: (
tooltip: { trigger: HTMLElement; dismiss: () => void } | null,
) => void;
}) => (
<div
data-tooltip-layer={layer}
data-tooltip-scroll-dismiss={onTriggerHoverChange ? "enabled" : undefined}
>
{children}
</div>
),
};
});

function matchMedia() {
return {
matches: false,
Expand Down Expand Up @@ -236,6 +262,18 @@ function buildAssistantTimelineEntry(text: string) {
}

describe("MessagesTimeline", () => {
it("renders timeline tooltips in the content layer", () => {
const markup = renderToStaticMarkup(
<MessagesTimeline
{...buildProps()}
timelineEntries={[buildAssistantTimelineEntry("[Link](https://example.com)")]}
/>,
);

expect(markup).toContain('data-tooltip-layer="content"');
expect(markup).toContain('data-tooltip-scroll-dismiss="enabled"');
});

it("renders the worked-for row at assistant response text size", () => {
const turnId = TurnId.make("turn-with-fold");
const assistantEntry = buildAssistantTimelineEntry("Done.");
Expand Down
132 changes: 72 additions & 60 deletions apps/web/src/components/chat/MessagesTimeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,8 @@ import {
type TimelineLatestTurn,
} from "./MessagesTimeline.logic";
import { TerminalContextInlineChip } from "./TerminalContextInlineChip";
import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
import { Tooltip, TooltipLayerProvider, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
import { createTooltipScrollDismissController } from "../ui/tooltipScrollDismiss";
import {
deriveDisplayedUserMessageState,
type ParsedTerminalContextEntry,
Expand Down Expand Up @@ -283,6 +284,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
const [expandedWorkGroupIds, setExpandedWorkGroupIds] = useState<ReadonlySet<string>>(new Set());
const [disclosureToggleSettling, setDisclosureToggleSettling] = useState(false);
const [minimapStripMap] = useState(() => new Map<string, HTMLSpanElement>());
const tooltipScrollDismissController = useMemo(createTooltipScrollDismissController, []);
const disclosureAnchorKeyRef = useRef<string | null>(null);
const disclosureSettleFrameRef = useRef<number | null>(null);
const disclosureSettleSecondFrameRef = useRef<number | null>(null);
Expand Down Expand Up @@ -438,7 +440,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
return config ? { ...config, onReady: handleAnchorReady } : undefined;
}, [anchorMessageId, handleAnchorReady, rows]);

const handleScroll = useCallback(() => {
const updateTimelineScrollState = useCallback(() => {
const state = listRef.current?.getState?.();
const isAtEnd = resolveTimelineIsAtEnd(state, contentInsetEndAdjustment);
if (isAtEnd !== undefined) {
Expand Down Expand Up @@ -468,10 +470,15 @@ export const MessagesTimeline = memo(function MessagesTimeline({
}
}, [contentInsetEndAdjustment, listRef, minimapItems, minimapStripMap, onIsAtEndChange]);

const handleScroll = useCallback(() => {
tooltipScrollDismissController.dismissHoveredTooltip();
updateTimelineScrollState();
}, [tooltipScrollDismissController, updateTimelineScrollState]);

useEffect(() => {
const frame = requestAnimationFrame(handleScroll);
const frame = requestAnimationFrame(updateTimelineScrollState);
return () => cancelAnimationFrame(frame);
}, [handleScroll, rows.length]);
}, [rows.length, updateTimelineScrollState]);

useEffect(() => {
if (!timelineViewportElement) {
Expand Down Expand Up @@ -566,62 +573,67 @@ export const MessagesTimeline = memo(function MessagesTimeline({
}

return (
<TimelineRowCtx value={sharedState}>
<TimelineRowActivityCtx value={activityState}>
<div ref={setTimelineViewportElement} className="relative h-full min-h-0">
<LegendList<MessagesTimelineRow>
ref={listRef}
data={rows}
keyExtractor={keyExtractor}
getItemType={getItemType}
renderItem={renderItem}
estimatedItemSize={90}
initialScrollAtEnd
{...(anchoredEndSpace ? { anchoredEndSpace } : {})}
contentInsetEndAdjustment={contentInsetEndAdjustment}
maintainScrollAtEnd={
anchoredEndSpace || !liveFollowEnabled || disclosureToggleSettling
? false
: TIMELINE_MAINTAIN_SCROLL_AT_END
}
maintainVisibleContentPosition={maintainVisibleContentPosition}
onScroll={handleScroll}
className={cn(
"scrollbar-gutter-both h-full min-h-0 overflow-x-hidden overscroll-y-contain px-3 [overflow-anchor:none] sm:px-5",
topFadeEnabled && "topbar-scroll-fade",
)}
ListHeaderComponent={
loadEarlier !== null ? (
<TimelineLoadEarlierHeader
loading={loadEarlier.loading}
onLoadEarlier={loadEarlier.onLoadEarlier}
fade={topFadeEnabled}
/>
) : topFadeEnabled ? (
TIMELINE_LIST_FADE_HEADER
) : (
TIMELINE_LIST_HEADER
)
}
ListFooterComponent={TIMELINE_LIST_FOOTER}
/>
<TimelineMinimap
items={minimapItems}
hasPersistentGutter={minimapHasPersistentGutter}
hitStripWidth={minimapHitStripWidth}
stripMap={minimapStripMap}
onSelect={(item) => {
onManualNavigation();
void listRef.current?.scrollToIndex({
index: item.rowIndex,
animated: true,
viewOffset: 24,
});
}}
/>
</div>
</TimelineRowActivityCtx>
</TimelineRowCtx>
<TooltipLayerProvider
layer="content"
onTriggerHoverChange={tooltipScrollDismissController.setHoveredTooltip}
>
<TimelineRowCtx value={sharedState}>
<TimelineRowActivityCtx value={activityState}>
<div ref={setTimelineViewportElement} className="relative h-full min-h-0">
<LegendList<MessagesTimelineRow>
ref={listRef}
data={rows}
keyExtractor={keyExtractor}
getItemType={getItemType}
renderItem={renderItem}
estimatedItemSize={90}
initialScrollAtEnd
{...(anchoredEndSpace ? { anchoredEndSpace } : {})}
contentInsetEndAdjustment={contentInsetEndAdjustment}
maintainScrollAtEnd={
anchoredEndSpace || !liveFollowEnabled || disclosureToggleSettling
? false
: TIMELINE_MAINTAIN_SCROLL_AT_END
}
maintainVisibleContentPosition={maintainVisibleContentPosition}
onScroll={handleScroll}
className={cn(
"scrollbar-gutter-both h-full min-h-0 overflow-x-hidden overscroll-y-contain px-3 [overflow-anchor:none] sm:px-5",
topFadeEnabled && "topbar-scroll-fade",
)}
ListHeaderComponent={
loadEarlier !== null ? (
<TimelineLoadEarlierHeader
loading={loadEarlier.loading}
onLoadEarlier={loadEarlier.onLoadEarlier}
fade={topFadeEnabled}
/>
) : topFadeEnabled ? (
TIMELINE_LIST_FADE_HEADER
) : (
TIMELINE_LIST_HEADER
)
}
ListFooterComponent={TIMELINE_LIST_FOOTER}
/>
<TimelineMinimap
items={minimapItems}
hasPersistentGutter={minimapHasPersistentGutter}
hitStripWidth={minimapHitStripWidth}
stripMap={minimapStripMap}
onSelect={(item) => {
onManualNavigation();
void listRef.current?.scrollToIndex({
index: item.rowIndex,
animated: true,
viewOffset: 24,
});
}}
/>
</div>
</TimelineRowActivityCtx>
</TimelineRowCtx>
</TooltipLayerProvider>
);
});

Expand Down
91 changes: 91 additions & 0 deletions apps/web/src/components/ui/tooltip.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import { type ComponentProps, Fragment, type ReactNode } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it, vi } from "vite-plus/test";

vi.mock("@base-ui/react/tooltip", () => {
function Positioner({
children,
className,
...props
}: ComponentProps<"div"> & { children?: ReactNode }) {
return (
<div className={className} {...props}>
{children}
</div>
);
}

function Element({ children, ...props }: ComponentProps<"div"> & { children?: ReactNode }) {
return <div {...props}>{children}</div>;
}

return {
Tooltip: {
createHandle: () => ({}),
Provider: Fragment,
Root: Fragment,
Trigger: Element,
Portal: Fragment,
Positioner,
Popup: Element,
Viewport: Element,
},
};
});

import { TooltipLayerProvider, TooltipPopup } from "./tooltip";
import { createTooltipScrollDismissController } from "./tooltipScrollDismiss";

function createFakeTooltipTrigger() {
const ownerDocument = {
activeElement: null as Element | null,
};
const trigger = { ownerDocument } as unknown as HTMLElement;

return { ownerDocument, trigger };
}

describe("tooltip layering", () => {
it("keeps global tooltips above dropdowns", () => {
const html = renderToStaticMarkup(<TooltipPopup>Global tooltip</TooltipPopup>);

expect(html).toContain("z-[140]");
});

it("keeps content tooltips below the chat composer", () => {
const html = renderToStaticMarkup(
<TooltipLayerProvider layer="content">
<TooltipPopup>Timeline tooltip</TooltipPopup>
</TooltipLayerProvider>,
);

expect(html).toContain("z-[15]");
expect(html).not.toContain("z-[140]");
});
});

describe("tooltip scroll dismissal", () => {
it("dismisses the hovered tooltip once when its content scrolls", () => {
const controller = createTooltipScrollDismissController();
const { trigger } = createFakeTooltipTrigger();
const dismiss = vi.fn();

controller.setHoveredTooltip({ trigger, dismiss });
controller.dismissHoveredTooltip();
controller.dismissHoveredTooltip();

expect(dismiss).toHaveBeenCalledOnce();
});

it("keeps a focused tooltip open when its content scrolls", () => {
const controller = createTooltipScrollDismissController();
const { ownerDocument, trigger } = createFakeTooltipTrigger();
const dismiss = vi.fn();
ownerDocument.activeElement = trigger;

controller.setHoveredTooltip({ trigger, dismiss });
controller.dismissHoveredTooltip();

expect(dismiss).not.toHaveBeenCalled();
});
});
Loading
Loading