feat: Add jump-to-user-prompts navigation feature #9832
+565
−43
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,21 @@ | ||
| @keyframes prompt-highlight { | ||
| 0% { | ||
| background-color: var(--vscode-editor-findMatchHighlightBackground); | ||
| opacity: 0; | ||
| } | ||
| 20% { | ||
| opacity: 1; | ||
| } | ||
| 80% { | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| background-color: transparent; | ||
| opacity: 0; | ||
| } | ||
| } | ||
|
|
||
| .prompt-highlight { | ||
| animation: prompt-highlight 1.5s ease-in-out; | ||
| border-radius: 4px; | ||
| } |
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,181 @@ | ||
| import React, { useMemo, useCallback, useState, useEffect } from "react" | ||
| import { ChevronUp, ChevronDown } from "lucide-react" | ||
| import { StandardTooltip } from "@src/components/ui" | ||
| import { LucideIconButton } from "./LucideIconButton" | ||
| import { useAppTranslation } from "@src/i18n/TranslationContext" | ||
| import type { ClineMessage } from "@roo-code/types" | ||
| import type { VirtuosoHandle } from "react-virtuoso" | ||
| import "./UserPromptNavigation.css" | ||
|
|
||
| interface UserPromptNavigationProps { | ||
| messages: ClineMessage[] | ||
| virtuosoRef: React.RefObject<VirtuosoHandle> | ||
| visibleMessages: ClineMessage[] | ||
| className?: string | ||
| } | ||
|
|
||
| export const UserPromptNavigation: React.FC<UserPromptNavigationProps> = ({ | ||
| messages, | ||
| virtuosoRef, | ||
| visibleMessages, | ||
| className = "", | ||
| }) => { | ||
| const { t } = useAppTranslation() | ||
| const [currentPromptIndex, setCurrentPromptIndex] = useState<number>(-1) | ||
| const [isNavigating, setIsNavigating] = useState(false) | ||
|
|
||
| // Find all user prompts in the visible messages | ||
| const userPromptIndices = useMemo(() => { | ||
| const indices: number[] = [] | ||
| visibleMessages.forEach((msg, index) => { | ||
| if (msg.say === "user_feedback" && msg.text && msg.text.trim() !== "") { | ||
| indices.push(index) | ||
| } | ||
| }) | ||
| return indices | ||
| }, [visibleMessages]) | ||
|
|
||
| // Reset navigation when messages change significantly | ||
| useEffect(() => { | ||
| if (!isNavigating) { | ||
| setCurrentPromptIndex(-1) | ||
| } | ||
| }, [messages.length, isNavigating]) | ||
|
|
||
| // Navigate to previous user prompt | ||
| const navigateToPreviousPrompt = useCallback(() => { | ||
| if (userPromptIndices.length === 0) return | ||
|
|
||
| setIsNavigating(true) | ||
|
|
||
| let targetIndex: number | ||
| if (currentPromptIndex === -1) { | ||
| // If not currently navigating, jump to the last prompt | ||
| targetIndex = userPromptIndices.length - 1 | ||
| } else if (currentPromptIndex > 0) { | ||
| // Navigate to previous prompt | ||
| targetIndex = currentPromptIndex - 1 | ||
| } else { | ||
| // Wrap around to the last prompt | ||
| targetIndex = userPromptIndices.length - 1 | ||
| } | ||
|
|
||
| setCurrentPromptIndex(targetIndex) | ||
| const messageIndex = userPromptIndices[targetIndex] | ||
|
|
||
| // Scroll to the message with smooth animation | ||
| virtuosoRef.current?.scrollToIndex({ | ||
| index: messageIndex, | ||
| behavior: "smooth", | ||
| align: "center", | ||
| }) | ||
|
|
||
| // Briefly highlight the message after scrolling | ||
| setTimeout(() => { | ||
| const element = document.querySelector(`[data-message-index="${messageIndex}"]`) | ||
| if (element) { | ||
| element.classList.add("prompt-highlight") | ||
| setTimeout(() => { | ||
| element.classList.remove("prompt-highlight") | ||
| }, 1500) | ||
| } | ||
| }, 500) | ||
|
|
||
| // Clear navigation state after a delay | ||
| setTimeout(() => { | ||
| setIsNavigating(false) | ||
| }, 3000) | ||
|
Comment on lines
+73
to
+87
Contributor
Author
There was a problem hiding this comment. Potential memory leak: The Fix it with Roo Code or mention @roomote and request a fix.
Comment on lines
+84
to
+87
Contributor
Author
There was a problem hiding this comment. Race condition risk: If users click navigation buttons rapidly, multiple Fix it with Roo Code or mention @roomote and request a fix. |
||
| }, [userPromptIndices, currentPromptIndex, virtuosoRef]) | ||
|
|
||
| // Navigate to next user prompt | ||
| const navigateToNextPrompt = useCallback(() => { | ||
| if (userPromptIndices.length === 0) return | ||
|
|
||
| setIsNavigating(true) | ||
|
|
||
| let targetIndex: number | ||
| if (currentPromptIndex === -1) { | ||
| // If not currently navigating, jump to the first prompt | ||
| targetIndex = 0 | ||
| } else if (currentPromptIndex < userPromptIndices.length - 1) { | ||
| // Navigate to next prompt | ||
| targetIndex = currentPromptIndex + 1 | ||
| } else { | ||
| // Wrap around to the first prompt | ||
| targetIndex = 0 | ||
| } | ||
|
|
||
| setCurrentPromptIndex(targetIndex) | ||
| const messageIndex = userPromptIndices[targetIndex] | ||
|
|
||
| // Scroll to the message with smooth animation | ||
| virtuosoRef.current?.scrollToIndex({ | ||
| index: messageIndex, | ||
| behavior: "smooth", | ||
| align: "center", | ||
| }) | ||
|
|
||
| // Briefly highlight the message after scrolling | ||
| setTimeout(() => { | ||
| const element = document.querySelector(`[data-message-index="${messageIndex}"]`) | ||
| if (element) { | ||
| element.classList.add("prompt-highlight") | ||
| setTimeout(() => { | ||
| element.classList.remove("prompt-highlight") | ||
| }, 1500) | ||
| } | ||
| }, 500) | ||
|
|
||
| // Clear navigation state after a delay | ||
| setTimeout(() => { | ||
| setIsNavigating(false) | ||
| }, 3000) | ||
| }, [userPromptIndices, currentPromptIndex, virtuosoRef]) | ||
|
|
||
| // Don't show navigation if there are no user prompts | ||
| if (userPromptIndices.length === 0) { | ||
| return null | ||
| } | ||
|
|
||
| const navigationInfo = | ||
| currentPromptIndex !== -1 | ||
| ? t("chat:promptNavigation.position", { | ||
| current: currentPromptIndex + 1, | ||
| total: userPromptIndices.length, | ||
| }) | ||
| : t("chat:promptNavigation.total", { total: userPromptIndices.length }) | ||
|
|
||
| return ( | ||
| <div className={`flex items-center gap-1 ${className}`}> | ||
| <StandardTooltip content={`${t("chat:promptNavigation.previousTooltip")} (Alt+↑)`}> | ||
| <div data-prompt-nav="prev"> | ||
| <LucideIconButton | ||
| icon={ChevronUp} | ||
| onClick={navigateToPreviousPrompt} | ||
| disabled={userPromptIndices.length === 0} | ||
| className="h-7 w-7" | ||
| title={t("chat:promptNavigation.previous")} | ||
| /> | ||
| </div> | ||
| </StandardTooltip> | ||
|
|
||
| {isNavigating && ( | ||
| <span className="text-xs text-vscode-descriptionForeground px-1 min-w-[60px] text-center"> | ||
| {navigationInfo} | ||
| </span> | ||
| )} | ||
|
|
||
| <StandardTooltip content={`${t("chat:promptNavigation.nextTooltip")} (Alt+↓)`}> | ||
| <div data-prompt-nav="next"> | ||
| <LucideIconButton | ||
| icon={ChevronDown} | ||
| onClick={navigateToNextPrompt} | ||
| disabled={userPromptIndices.length === 0} | ||
| className="h-7 w-7" | ||
| title={t("chat:promptNavigation.next")} | ||
| /> | ||
| </div> | ||
| </StandardTooltip> | ||
| </div> | ||
| ) | ||
| } | ||
Oops, something went wrong.
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.
The
messagesprop is received but only used in auseEffectdependency to reset navigation state. The actual filtering and navigation logic usesvisibleMessages. This creates ambiguity about which array is the source of truth. Consider removing themessagesprop if it's not needed, or document why both are necessary. Ifmessages.lengthchanges butvisibleMessagesdoesn't (or vice versa), the reset logic might not work as expected.Fix it with Roo Code or mention @roomote and request a fix.