| import FileIcon from "#/icons/file.svg?react"; | |
| import { useOptionalConversationId } from "#/hooks/use-conversation-id"; | |
| import { openWorkspaceFile } from "#/services/canvas-ui"; | |
| interface FilePathChipProps { | |
| path: string; | |
| /** Optional line-range suffix, e.g. "12-48". */ | |
| range?: string; | |
| /** | |
| * Opens the referenced file when the surrounding visualizer can navigate. | |
| * Defaults to `openWorkspaceFile` so chips without a parent handler still | |
| * deep-link into the Files drawer. | |
| */ | |
| onClick?: () => void; | |
| } | |
| /** | |
| * Monospace file-path pill with an optional navigation affordance. | |
| * | |
| * Passing `onClick` upgrades the same visual language to a custom handler | |
| * (e.g. markdown artifact View). Without it, click opens the Files drawer. | |
| */ | |
| export function FilePathChip({ path, range, onClick }: FilePathChipProps) { | |
| const { conversationId } = useOptionalConversationId(); | |
| const content = ( | |
| <> | |
| <FileIcon className="h-3.5 w-3.5 flex-shrink-0 text-muted" /> | |
| <span className="break-all">{range ? `${path}:${range}` : path}</span> | |
| </> | |
| ); | |
| const className = | |
| "inline-flex max-w-full cursor-pointer items-center gap-1.5 self-start rounded bg-surface-raised px-2 py-0.5 text-left font-mono text-xs text-foreground hover:bg-[var(--oh-interactive-hover)]"; | |
| return ( | |
| <button | |
| type="button" | |
| data-testid="file-path-chip" | |
| title={path} | |
| className={className} | |
| onClick={(event) => { | |
| event.stopPropagation(); | |
| if (onClick) { | |
| onClick(); | |
| return; | |
| } | |
| openWorkspaceFile(path, conversationId); | |
| }} | |
| > | |
| {content} | |
| </button> | |
| ); | |
| } | |