AI Components / Diff Panel
Diff Panel
Side-by-side or inline text diff with additions, removals, and change statistics.
ai-workflow v0.3.0
Playground
Examples
Side-by-side
<ai-diff-panel title="Prompt v1 → v2" style="max-width:600px;"></ai-diff-panel>Inline
<ai-diff-panel title="Code review" mode="inline" style="max-width:600px;"></ai-diff-panel>Import
import { AiDiffPanel } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-diff-panel';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
beforeCode | string | — | Text before changes |
afterCode | string | — | Text after changes |
mode | "side-by-side" | "inline" | "side-by-side" | Split or inline view |
title | string | "Comparison" | Panel title |
Events
| Event | Detail | Description |
|---|---|---|
ai-diff-select | {type, content, lineNum} | Diff line clicked |