Browse Source

Add jump icon for newly created files (#5738)

* feat: add jump icon for newly created files

- Add jump icon to newFileCreated tool case in ChatRow.tsx
- Matches existing pattern from readFile case for consistent UX
- Allows users to quickly open newly created files
- Fixes issue #5736

* fix: remove duplicate file path display in newFileCreated case

- Removed redundant ToolUseBlock that was showing file path twice
- Added onJumpToFile prop to CodeAccordian component to support jump icon
- Jump icon now appears in CodeAccordian header for newFileCreated files
- Maintains consistent UX with existing file operations while avoiding duplication

Fixes feedback from @daniel-lxs about duplicate elements being shown

* fix: address PR feedback for jump icon on new files

- Fix openFile message to use correct path format with './' prefix
- Remove duplicate chevron icon when jump icon is present
- Add aria-label for accessibility
- Fix styling: use mr-1 to match progressStatus icon
- Remove redundant margin style from jump icon

---------

Co-authored-by: Roo Code <[email protected]>
Co-authored-by: Roo Code <[email protected]>
Co-authored-by: Daniel Riccio <[email protected]>
roomote[bot] 5 months ago
parent
commit
5629199d51

+ 1 - 0
webview-ui/src/components/chat/ChatRow.tsx

@@ -533,6 +533,7 @@ export const ChatRowContent = ({
 							isLoading={message.partial}
 							isExpanded={isExpanded}
 							onToggleExpand={handleToggleExpand}
+							onJumpToFile={() => vscode.postMessage({ type: "openFile", text: "./" + tool.path })}
 						/>
 					</>
 				)

+ 14 - 1
webview-ui/src/components/common/CodeAccordian.tsx

@@ -17,6 +17,7 @@ interface CodeAccordianProps {
 	isFeedback?: boolean
 	onToggleExpand: () => void
 	header?: string
+	onJumpToFile?: () => void
 }
 
 const CodeAccordian = ({
@@ -29,6 +30,7 @@ const CodeAccordian = ({
 	isFeedback,
 	onToggleExpand,
 	header,
+	onJumpToFile,
 }: CodeAccordianProps) => {
 	const inferredLanguage = useMemo(() => language ?? (path ? getLanguageFromPath(path) : "txt"), [path, language])
 	const source = useMemo(() => code.trim(), [code])
@@ -68,7 +70,18 @@ const CodeAccordian = ({
 							</span>
 						</>
 					)}
-					<span className={`codicon codicon-chevron-${isExpanded ? "up" : "down"}`}></span>
+					{onJumpToFile && path && (
+						<span
+							className="codicon codicon-link-external mr-1"
+							style={{ fontSize: 13.5 }}
+							onClick={(e) => {
+								e.stopPropagation()
+								onJumpToFile()
+							}}
+							aria-label={`Open file: ${path}`}
+						/>
+					)}
+					{!onJumpToFile && <span className={`codicon codicon-chevron-${isExpanded ? "up" : "down"}`}></span>}
 				</ToolUseBlockHeader>
 			)}
 			{(!hasHeader || isExpanded) && (