Roo-Code/webview-ui/src/components/chat/BatchFilePermission.tsx
Daniel f1caf3f36e
feat: add file path tooltips with centralized PathTooltip component (#9030)
- Add PathTooltip component that wraps StandardTooltip with proper styling
- Use maxWidth='min(300px,100vw)' via inline style to override defaults
- Apply '[text-wrap:wrap]' class to override text-balance behavior
- Add formatPathTooltip helper for consistent path content formatting
- Update CodeAccordian, ChatRow, and BatchFilePermission to use PathTooltip
- Centralizes tooltip behavior and reduces duplication

Supersedes PR #8797.
2025-11-04 21:59:19 -05:00

63 lines
1.9 KiB
TypeScript

import { memo } from "react"
import { ToolUseBlock, ToolUseBlockHeader } from "../common/ToolUseBlock"
import { vscode } from "@src/utils/vscode"
import { formatPathTooltip } from "@src/utils/formatPathTooltip"
import { PathTooltip } from "../ui/PathTooltip"
interface FilePermissionItem {
path: string
lineSnippet?: string
isOutsideWorkspace?: boolean
key: string
content?: string // full path
}
interface BatchFilePermissionProps {
files: FilePermissionItem[]
onPermissionResponse?: (response: { [key: string]: boolean }) => void
ts: number
}
export const BatchFilePermission = memo(({ files = [], onPermissionResponse, ts }: BatchFilePermissionProps) => {
// Don't render if there are no files or no response handler
if (!files?.length || !onPermissionResponse) {
return null
}
return (
<div className="pt-[5px]">
{/* Individual files */}
<div className="flex flex-col gap-0 border border-border rounded-md p-1">
{files.map((file) => {
return (
<div key={`${file.path}-${ts}`} className="flex items-center gap-2">
<ToolUseBlock className="flex-1">
<ToolUseBlockHeader
onClick={() => vscode.postMessage({ type: "openFile", text: file.content })}>
{file.path?.startsWith(".") && <span>.</span>}
<PathTooltip
content={formatPathTooltip(
file.path,
file.lineSnippet ? ` ${file.lineSnippet}` : undefined,
)}>
<span className="whitespace-nowrap overflow-hidden text-ellipsis text-left mr-2 rtl">
{formatPathTooltip(
file.path,
file.lineSnippet ? ` ${file.lineSnippet}` : undefined,
)}
</span>
</PathTooltip>
<div className="flex-grow"></div>
<span className="codicon codicon-link-external text-[13.5px] my-[1px]" />
</ToolUseBlockHeader>
</ToolUseBlock>
</div>
)
})}
</div>
</div>
)
})
BatchFilePermission.displayName = "BatchFilePermission"