Merge conflictPro
Merge conflicts one decision at a time: ours and theirs side by side with the differing lines marked, the agent's merged version with its reasoning, and Keep ours, Keep theirs, Keep both, Use merge or Edit by hand.
On this page
ProThree conflicts in a retry helper between main and an agent branch. Ours and theirs side by side, the agent's merge with its reasoning, and the second merge still arriving when it opens.
Installation
Usage
import { MergeConflict } from "@/components/ui/chatcn/pro/merge-conflict"
<MergeConflict path="src/payouts/retry.ts" conflicts={conflicts} oursLabel="main" theirsLabel="agent/retry-clock" onComplete={markResolved} />Each conflict carries both sides and an optional agent suggestion that is loading, ready (with the merged text and why) or failed (with why it could not). A resolved conflict folds to its result with Change and Edit. Use all merges resolves every ready suggestion at once.
Examples
States
ProThe agent could not merge, every conflict resolved and marked, no conflicts, loading, an error with the fix, and read only.
Props
| Prop | Type | Notes |
|---|---|---|
path, language | string | |
conflicts | MergeConflictHunk[] | id, startLine, scope, ours, theirs, suggestion |
oursLabel, theirsLabel | string | Default "HEAD" and "incoming" |
resolutions, defaultResolutions, onResolutionsChange | Record<string, ConflictResolution> | { choice, text } |
onComplete, completed | Mark resolved, once every conflict has an answer | |
loading, error, onRetry, disabled |
Keyboard
Every choice is a button in reading order. The header's previous and next buttons move focus between conflicts.
Accessibility
- Each conflict is a section headed Conflict n of m. Buttons name the conflict they act on.
- Lines that differ between the sides read Differs and carry an edge, not only a tint. Status is words with a glyph: Needs a decision, Kept ours, Used the agent's merge.
Motion
The suggestion that is still merging shimmers its label over a static skeleton. Choices swap in place.