File Diff

A collapsible code diff that shows added and removed lines — streaming apply state, syntax tokens via agent-code, and optional copy.

Streaming

Lines stream in while status="streaming", then settle to complete. Replay remounts the cycle.

Loading…

Installation

CLI

npx @sonojs/ui@latest add file-diff

Also needsnpx @sonojs/ui@latest add agent-code agent-disclosure && npm i lucide-react motion shiki

Usage

file-diff.tsx

import { FileDiff } from "@/components/sonojs/file-diff"

export function Example() {
  return (
    <FileDiff
      file="src/app.ts"
      status="complete"
      lines={[
        { id: "1", type: "removed", oldLine: 1, content: "const x = 1" },
        { id: "2", type: "added", newLine: 1, content: "const x = 2" },
      ]}
      copyText="- const x = 1\n+ const x = 2"
    />
  )
}

Props

Prop	Type	Default	Description
file	ReactNode	—	Filename shown in the disclosure trigger.
lines	FileDiffLine[]	—	Diff rows with type, line numbers, and content.
status	"streaming" · "complete"	"streaming"	Spinner while applying; check when complete.
open / defaultOpen	boolean	true	Controlled or uncontrolled open state.
collapseOnComplete	boolean	true	Auto-collapses when streaming finishes.
language	AgentCodeLanguage	"typescript"	Highlighter language for line tokens.
copyText / onCopy	string / () => void	—	Enables the copy control in the panel footer.
maxHeight	number	220	Scroll viewport max height in pixels.
className	string	—	Optional class names on the root.