feat: add chat outline navigation strip #1917
+281
−1
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,230 @@ | ||
| /** | ||
| * Minimap-style outline strip beside the chat content. | ||
| * Shows a small bar per user message; hover to expand a popover with previews. | ||
| * Click any bar or preview to scroll to that message. | ||
| * | ||
| * Uses MutationObserver + IntersectionObserver to handle @tanstack/react-virtual | ||
| * row mount/unmount — elements are tracked as the virtualizer creates them. | ||
| */ | ||
| import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"; | ||
| import { UserIcon } from "lucide-react"; | ||
| import type { TimelineEntry } from "../../session-logic"; | ||
|
|
||
| interface OutlineEntry { | ||
| readonly id: string; | ||
| readonly preview: string; | ||
| } | ||
|
|
||
| interface ChatOutlinePanelProps { | ||
| readonly timelineEntries: ReadonlyArray<TimelineEntry>; | ||
| readonly scrollContainer: HTMLDivElement | null; | ||
| readonly onScrollToMessage: React.MutableRefObject<((messageId: string) => void) | null>; | ||
| } | ||
|
|
||
| export const ChatOutlinePanel = memo(function ChatOutlinePanel({ | ||
| timelineEntries, | ||
| scrollContainer, | ||
| onScrollToMessage, | ||
| }: ChatOutlinePanelProps) { | ||
| const outlineEntries = useMemo( | ||
| () => | ||
| timelineEntries | ||
| .filter( | ||
| (e): e is TimelineEntry & { kind: "message" } => e.kind === "message", | ||
| ) | ||
| .filter((e) => e.message.role === "user") | ||
| .map((e) => ({ | ||
| id: e.message.id, | ||
| preview: e.message.text.split("\n")[0]?.slice(0, 80) ?? "", | ||
| })), | ||
| [timelineEntries], | ||
| ); | ||
|
|
||
| // Active message tracking — MutationObserver watches for virtualizer | ||
| // mount/unmount, IntersectionObserver tracks visibility. | ||
| const [activeMessageIds, setActiveMessageIds] = useState<ReadonlySet<string>>( | ||
| () => new Set<string>(), | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| if (!scrollContainer) return; | ||
|
|
||
| const intersectionObserver = new IntersectionObserver( | ||
| (entries) => { | ||
| setActiveMessageIds((prev) => { | ||
| let changed = false; | ||
| const next = new Set(prev); | ||
| for (const entry of entries) { | ||
| const id = (entry.target as HTMLElement).dataset.messageId; | ||
| if (!id) continue; | ||
| const sizeBefore = next.size; | ||
| if (entry.isIntersecting) { | ||
| next.add(id); | ||
| } else { | ||
| next.delete(id); | ||
| } | ||
| if (next.size !== sizeBefore) changed = true; | ||
| } | ||
| return changed ? next : prev; | ||
| }); | ||
cursor[bot] marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| }, | ||
| { root: scrollContainer, threshold: 0.1 }, | ||
| ); | ||
|
|
||
| // Observe any user-message element currently in the DOM | ||
| const observeUserMessages = (root: Element) => { | ||
| root.querySelectorAll('[data-message-role="user"]').forEach((el) => { | ||
| intersectionObserver.observe(el); | ||
| }); | ||
| }; | ||
|
|
||
| // Initial pass for elements already rendered | ||
| observeUserMessages(scrollContainer); | ||
|
|
||
| // Watch for virtualizer adding/removing rows | ||
| const mutationObserver = new MutationObserver((mutations) => { | ||
| const removedIds: string[] = []; | ||
| for (const mutation of mutations) { | ||
| for (const node of mutation.addedNodes) { | ||
| if (!(node instanceof HTMLElement)) continue; | ||
| if (node.dataset.messageRole === "user") { | ||
| intersectionObserver.observe(node); | ||
| } else { | ||
| observeUserMessages(node); | ||
| } | ||
| } | ||
| for (const node of mutation.removedNodes) { | ||
| if (!(node instanceof HTMLElement)) continue; | ||
| // Check the node itself and nested children for message IDs | ||
| const id = node.dataset.messageId; | ||
| if (id) { | ||
| removedIds.push(id); | ||
| } else { | ||
| node.querySelectorAll("[data-message-id]").forEach((el) => { | ||
| const nestedId = (el as HTMLElement).dataset.messageId; | ||
| if (nestedId) removedIds.push(nestedId); | ||
| }); | ||
| } | ||
| } | ||
cursor[bot] marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } | ||
| if (removedIds.length > 0) { | ||
| setActiveMessageIds((prev) => { | ||
| const next = new Set(prev); | ||
| for (const id of removedIds) next.delete(id); | ||
| return next; | ||
| }); | ||
| } | ||
|
Contributor
There was a problem hiding this comment. Removed-node handler triggers unnecessary re-renders for non-user messagesLow Severity The   Reviewed by Cursor Bugbot for commit c24a29f. Configure here. |
||
| }); | ||
|
|
||
| mutationObserver.observe(scrollContainer, { childList: true, subtree: true }); | ||
|
|
||
| return () => { | ||
| intersectionObserver.disconnect(); | ||
| mutationObserver.disconnect(); | ||
| }; | ||
| }, [scrollContainer]); | ||
|
|
||
| // Scroll to message via virtualizer (works for all messages, including off-screen) | ||
| const handleClick = useCallback( | ||
| (e: React.MouseEvent<HTMLButtonElement>) => { | ||
| const messageId = e.currentTarget.dataset.outlineId; | ||
| if (!messageId) return; | ||
| // Use virtualizer scrollToIndex — handles off-screen virtualized rows | ||
| if (onScrollToMessage.current) { | ||
| onScrollToMessage.current(messageId); | ||
| return; | ||
| } | ||
| // Fallback: querySelector for elements currently in DOM | ||
| if (!scrollContainer) return; | ||
| const el = scrollContainer.querySelector( | ||
| `[data-message-id="${CSS.escape(messageId)}"]`, | ||
| ); | ||
| if (el) { | ||
| el.scrollIntoView({ behavior: "smooth", block: "center" }); | ||
| } | ||
| }, | ||
| [onScrollToMessage, scrollContainer], | ||
| ); | ||
|
|
||
| // Hover state — shows expanded popover | ||
| const [isHovered, setIsHovered] = useState(false); | ||
| const hoverTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null); | ||
|
|
||
| const handleMouseEnter = useCallback(() => { | ||
| if (hoverTimerRef.current) { | ||
| clearTimeout(hoverTimerRef.current); | ||
| hoverTimerRef.current = null; | ||
| } | ||
| setIsHovered(true); | ||
| }, []); | ||
|
|
||
| const handleMouseLeave = useCallback(() => { | ||
| hoverTimerRef.current = setTimeout(() => { | ||
| setIsHovered(false); | ||
| }, 200); | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| return () => { | ||
| if (hoverTimerRef.current) { | ||
| clearTimeout(hoverTimerRef.current); | ||
| } | ||
| }; | ||
| }, []); | ||
|
|
||
| if (outlineEntries.length === 0) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <div | ||
| className="pointer-events-none absolute top-0 z-30" | ||
| style={{ left: "calc(50% + 24rem + 0.5rem)" }} | ||
| onMouseEnter={handleMouseEnter} | ||
| onMouseLeave={handleMouseLeave} | ||
| > | ||
| <div className="pointer-events-auto relative flex max-h-40 w-5 flex-col items-center gap-[5px] overflow-y-auto py-4"> | ||
| {outlineEntries.map((entry) => ( | ||
| <button | ||
| key={entry.id} | ||
| type="button" | ||
| data-outline-id={entry.id} | ||
| onClick={handleClick} | ||
| className={`h-[3px] w-4 shrink-0 rounded-full transition-colors ${ | ||
| activeMessageIds.has(entry.id) | ||
| ? "bg-foreground/60" | ||
| : "bg-foreground/25" | ||
| } hover:bg-foreground/80`} | ||
| /> | ||
| ))} | ||
| </div> | ||
|
|
||
| {isHovered ? ( | ||
| <div | ||
| className="pointer-events-auto absolute top-0 right-full mr-2 w-56 rounded-md border border-border bg-popover p-1.5 shadow-lg" | ||
| onMouseEnter={handleMouseEnter} | ||
| onMouseLeave={handleMouseLeave} | ||
| > | ||
| <div className="max-h-72 overflow-y-auto"> | ||
| {outlineEntries.map((entry) => ( | ||
| <button | ||
| key={entry.id} | ||
| type="button" | ||
| data-outline-id={entry.id} | ||
| onClick={handleClick} | ||
| className={`flex w-full items-start gap-2 rounded px-2 py-1.5 text-left text-xs transition-colors hover:bg-accent/50 ${ | ||
| activeMessageIds.has(entry.id) ? "bg-accent/30" : "" | ||
| }`} | ||
| > | ||
| <UserIcon className="mt-0.5 h-3 w-3 shrink-0 text-muted-foreground" /> | ||
| <span className="line-clamp-2 text-muted-foreground"> | ||
| {entry.preview || "(empty)"} | ||
| </span> | ||
| </button> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ) : null} | ||
| </div> | ||
| ); | ||
| }); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Unused
OutlineEntryinterface is dead codeLow Severity
The
OutlineEntryinterface is defined but never referenced anywhere in the codebase. TheoutlineEntriesarray gets its type inferred from theuseMemoreturn value, so this interface serves no purpose and is dead code.Reviewed by Cursor Bugbot for commit c24a29f. Configure here.