fix: add tooltips to truncated file paths in chat UI

- Add StandardTooltip wrapper to truncated file paths in ChatRow.tsx
- Add StandardTooltip wrapper to truncated file paths in BatchFilePermission.tsx
- Shows full file path on hover when text is truncated with ellipsis
- Fixes #8278

Author: roomote

webview-ui/src/components/chat/BatchFilePermission.tsx

@@ -3,6 +3,7 @@ import { memo } from "react"
 import { ToolUseBlock, ToolUseBlockHeader } from "../common/ToolUseBlock"
 import { vscode } from "@src/utils/vscode"
 import { removeLeadingNonAlphanumeric } from "@src/utils/removeLeadingNonAlphanumeric"
+import { StandardTooltip } from "@src/components/ui"
 
 interface FilePermissionItem {
 	path: string
@@ -35,10 +36,13 @@ export const BatchFilePermission = memo(({ files = [], onPermissionResponse, ts
 								<ToolUseBlockHeader
 									onClick={() => vscode.postMessage({ type: "openFile", text: file.content })}>
 									{file.path?.startsWith(".") && <span>.</span>}
-									<span className="whitespace-nowrap overflow-hidden text-ellipsis text-left mr-2 rtl">
-										{removeLeadingNonAlphanumeric(file.path ?? "") + "\u200E"}
-										{file.lineSnippet && ` ${file.lineSnippet}`}
-									</span>
+									<StandardTooltip
+										content={`${file.path}${file.lineSnippet ? ` ${file.lineSnippet}` : ""}`}>
+										<span className="whitespace-nowrap overflow-hidden text-ellipsis text-left mr-2 rtl">
+											{removeLeadingNonAlphanumeric(file.path ?? "") + "\u200E"}
+											{file.lineSnippet && ` ${file.lineSnippet}`}
+										</span>
+									</StandardTooltip>
 									<div className="flex-grow"></div>
 									<span className="codicon codicon-link-external text-[13.5px] my-[1px]" />
 								</ToolUseBlockHeader>

webview-ui/src/components/chat/ChatRow.tsx

@@ -16,6 +16,7 @@ import { findMatchingResourceOrTemplate } from "@src/utils/mcp"
 import { vscode } from "@src/utils/vscode"
 import { removeLeadingNonAlphanumeric } from "@src/utils/removeLeadingNonAlphanumeric"
 import { getLanguageFromPath } from "@src/utils/getLanguageFromPath"
+import { StandardTooltip } from "@src/components/ui"
 
 import { ToolUseBlock, ToolUseBlockHeader } from "../common/ToolUseBlock"
 import UpdateTodoListToolBlock from "./UpdateTodoListToolBlock"
@@ -600,10 +601,12 @@ export const ChatRowContent = ({
 									className="group"
 									onClick={() => vscode.postMessage({ type: "openFile", text: tool.content })}>
 									{tool.path?.startsWith(".") && <span>.</span>}
-									<span className="whitespace-nowrap overflow-hidden text-ellipsis text-left mr-2 rtl">
-										{removeLeadingNonAlphanumeric(tool.path ?? "") + "\u200E"}
-										{tool.reason}
-									</span>
+									<StandardTooltip content={`${tool.path}${tool.reason ? ` ${tool.reason}` : ""}`}>
+										<span className="whitespace-nowrap overflow-hidden text-ellipsis text-left mr-2 rtl">
+											{removeLeadingNonAlphanumeric(tool.path ?? "") + "\u200E"}
+											{tool.reason}
+										</span>
+									</StandardTooltip>
 									<div style={{ flexGrow: 1 }}></div>
 									<SquareArrowOutUpRight
 										className="w-4 codicon codicon-link-external opacity-0 group-hover:opacity-100 transition-opacity"