File edit
A file the agent changed, as one line in the reply with its path and lines added and removed, and a short diff that opens in full.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/file-edit-default.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/file-edit-default.json
Usage & API
Example
import { FileEdit } from "@/components/ai/file-edit-default"
<FileEdit
path="…"
lines={[]}
/>Props FileEdit
| Prop | Type & description | Required |
|---|---|---|
path | string | Required |
lines | DiffLine[] | Required |
status | "editing" | "done" | Optional |
previewLines | numberLines visible before the diff is opened in full. | Optional |
defaultOpen | boolean | Optional |
onOpen | () => void | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The header reads Editing or Edited, then the directory in a quieter color and the filename after it, then +added and -removed, then a chevron. The dot pulses while status is editing and turns solid once status is done. The diff shows a gutter: hunk lines have no number, remove lines show old, and other lines show new, with a plus or a minus in front of the text. While editing, the closed preview is the last previewLines lines, so the tail follows the stream. When done, the closed preview is the first previewLines lines. Opening the row shows every line in a scrolling panel. If the diff is longer than previewLines and the edit is done, a second button reads N more lines, or Show less while open. That button is hidden during editing. The open-file icon is rendered only when onOpen is set, and its label is Open plus the filename.
Example
import { FileEditReview } from "@/components/ai/file-edit-review"
<FileEditReview
files={[]}
/>Props FileEditReview
| Prop | Type & description | Required |
|---|---|---|
files | ChangedFile[] | Required |
Dependencies
- React
- Tailwind CSS
- lucide-react
Implementation notes
The header reads Changed N files and shows the summed additions and removals. Each file is a button with the path, its own +added and -removed, and a chevron. The selected file's diff renders under the list. add lines are marked with a plus, remove lines with a minus, and context lines with a blank marker. There is no hunk type, no line numbers, no previewLines and no onOpen. The open file is tracked by path, so two entries with the same path would collapse together.
Choosing a layout
Use the inline edit when the agent changed one file and the reply should show that change without sending the reader to an editor. The path splits into directory and filename so the name stays readable when the path is long. Open the diff when someone needs the hunk. Leave it collapsed when the sentence under it already says what changed, and the counts are only evidence. Pass onOpen if you have a real editor to jump to. The button does nothing except call that callback.
Use the review when one reply touched several files and a single streaming diff would bury the list. The totals answer how big the change was. The selected diff answers what it was. A terminal is the better row when the agent ran a formatter or a test and the interesting part is the log, not the patch. A tool call card is the better row when you need the tool's raw arguments rather than a line-oriented diff. Checkpoint is a later marker over files that were saved, with a restore action, not a view of the patch itself.
Why do the inline counts disagree with a number I had in mind?
The inline edit counts lines, not a stat you pass. Only type add and type remove increment the badges. A hunk header and the surrounding context are visible and uncounted. If one logical change is split across many diff lines, the badge follows the lines. The review layout is the opposite: it prints the added and removed numbers on each file and never recounts the diff text.
Where does the preview sit while lines are still arriving?
On the newest lines. With status editing, a closed diff shows the tail, limited by previewLines. Switch status to done and the closed diff jumps to the start of the patch, which is the reading order for a finished change. Open the row at any time to see the lines you have passed so far.