File edit tool

Name: chatcn
Author: Aaditya Chowdhury

A file edit: path and +12 -3 in the header, a unified mini diff that reads without color. During approval, the diff is what the user approves.

Markdown

On this page

A unified mini diff with +5 -3 in the header.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/tool-file-edit.json

Usage

tsx

import { ToolFileEdit } from "@/components/ui/chatcn/tool-file-edit"

<ToolFileEdit state="output-available" path={path} oldText={before} newText={after} startLine={4} />
<ToolFileEdit state="output-available" path={path} diff={unifiedDiff} />

tsx

import { ToolFileEditPart, toolFileEditRenderers } from "@/components/ui/chatcn/tool-file-edit"

// One part straight from AI SDK or the chatcn contract
<ToolFileEditPart part={part} onApprove={approve} onDeny={deny} />

// Or map tool names to renderers for a whole message
renderToolPart(part, { ...toolFileEditRenderers })

Examples

Approval

The diff is what the user approves.

Props

Prop	Type	Notes
`path`	`string`
`oldText`, `newText`	`string`	Diffed line by line
`diff`	`string`	A unified diff instead
`lines`	`DiffLine[]`	Precomputed lines. Wins over both
`startLine`	`number`	Line where the snippet starts
`additions`, `deletions`	`number`	Override the counts
`onOpenDiff`	`() => void`	Shows Open diff under the preview
`state`	`ToolDisplayState`	The ToolCall lifecycle: streaming, running, approval, output, error, denied, cancelled
`approval`, `decision`		Approval request and the user's answer, as on ToolCall
`onApprove`, `onDeny`, `onRetry`		Same callbacks as ToolCall
`errorText`	`ReactNode`	Shown on `output-error`
`durationMs`, `startedAt`	`number`	Optional. Measured automatically when omitted
`variant`	`"card" \| "inline"`	Inline sits on a trace rail
`open`, `defaultOpen`, `onOpenChange`		Controlled or uncontrolled details

Keyboard

Key	Action
`Enter`, `Space`	Expand or collapse the details
`Tab`	Move through the header, links, copy buttons and approval actions

Accessibility

Added lines sit on a fill in full ink and medium weight; removed lines are struck through in gray. Plus and minus signs carry the meaning, and screen readers hear Added and Removed before each line.

Motion

Inherits ToolCall: the status glyph swaps with a 150 ms blur crossfade and details open over 200 ms.
Nothing inside the body animates. Under reduced motion everything snaps.