Suggestion diff

SuggestionDiff.tsxEvery hunk with its own keep and reject, the document updated on each decision, a summary line for what the marks cannot show, and one undo for all of it.Copy

import { useMemo, useState } from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { apply, diffProse } from "./diff";

const WORDS = ["", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];

type Props = {
  original: string;
  proposal: string;
  /** What the marks cannot say. Computed from the paragraph alignment when
   *  the app has nothing better; a model that explains its own move can
   *  pass it here. */
  structure?: string;
  /** Fires with the whole document after every decision. Keeping a hunk
   *  changes the document at once; there is no separate apply step. */
  onChange: (text: string) => void;
};

/** Every hunk accepted or rejected on its own, and one undo that reverses
 *  all of them. */
export function SuggestionDiff({ original, proposal, structure, onChange }: Props) {
  const { pairs, hunks, moved } = useMemo(() => diffProse(original, proposal), [original, proposal]);
  const [verdict, setVerdict] = useState<Record<number, "keep" | "reject">>({});
  const decided = Object.keys(verdict).length;

  const decide = (id: number, v: "keep" | "reject") => {
    const next = { ...verdict, [id]: v };
    setVerdict(next);
    onChange(apply(pairs, hunks, new Set(hunks.filter((h) => next[h.id] === "keep").map((h) => h.id))));
  };
  const undo = () => { setVerdict({}); onChange(original); };

  const summary = structure ?? (moved ? `${WORDS[moved] ?? moved} paragraphs reordered` : "");

  return (
    <div>
      <p className="text-xs tabular-nums text-muted-foreground">
        {hunks.length} changes{summary && ` · ${summary}`}
      </p>

      <ul className="mt-3 flex flex-col gap-2.5">
        {hunks.map((h) => (
          <li key={h.id} className={cn("flex items-start gap-3", verdict[h.id] && "opacity-60")}>
            <div className="min-w-0 flex-1 text-sm leading-relaxed">
              {/* Struck and underlined as well as tinted, so the two survive
                  without colour. */}
              {h.removed.length > 0 && (
                <p className="rounded-[2px] bg-status-critical/10 px-2 py-1">
                  <span className="text-muted-foreground">{h.before} </span>
                  <del className="decoration-status-critical">{h.removed.join(" ")}</del>
                  <span className="text-muted-foreground"> {h.after}</span>
                </p>
              )}
              {h.added.length > 0 && (
                <p className="mt-0.5 rounded-[2px] bg-status-nominal/10 px-2 py-1">
                  <span className="text-muted-foreground">{h.before} </span>
                  <ins className="decoration-chart-1 underline-offset-2">{h.added.join(" ")}</ins>
                  <span className="text-muted-foreground"> {h.after}</span>
                </p>
              )}
            </div>
            <div className="flex shrink-0 gap-1">
              {(["keep", "reject"] as const).map((v) => (
                <Button
                  key={v}
                  variant="ghost"
                  size="sm"
                  className={cn("h-6 px-1.5 text-xs", verdict[h.id] === v ? "font-medium text-foreground underline" : "text-muted-foreground")}
                  onClick={() => decide(h.id, v)}
                >
                  {v}
                </Button>
              ))}
            </div>
          </li>
        ))}
      </ul>

      <div className="mt-4 flex items-center gap-3 text-xs text-muted-foreground">
        <span>{hunks.length - decided} undecided</span>
        {decided > 0 && (
          <button type="button" className="underline hover:text-foreground" onClick={undo}>undo</button>
        )}
      </div>
    </div>
  );
}

diff.tsWord-level diff over aligned paragraphs, so a paragraph that moved is reported as a move rather than as a deletion and an insertion.Copy

/** One change, at word level. A line diff on reflowed prose reports the
 *  whole paragraph as changed, which is true and useless. */
export type Hunk = {
  id: number;
  /** Which paragraph of the proposal it sits in, and where in that
   *  paragraph's original tokens. */
  para: number;
  at: number;
  removed: string[];
  added: string[];
  /** A few words either side, so a row reads without the document. */
  before: string;
  after: string;
};

/** A proposal paragraph and the original paragraph it was matched to. */
export type Pair = { from: number; tokens: string[] };

const tokens = (s: string) => s.split(/\s+/).filter(Boolean);

/** Longest common subsequence over tokens; the gaps between matches are the hunks. */
function diffTokens(a: string[], b: string[]) {
  const n = a.length, m = b.length;
  const L = Array.from({ length: n + 1 }, () => new Array<number>(m + 1).fill(0));
  for (let i = n - 1; i >= 0; i--)
    for (let j = m - 1; j >= 0; j--)
      L[i][j] = a[i] === b[j] ? L[i + 1][j + 1] + 1 : Math.max(L[i + 1][j], L[i][j + 1]);
  const out: { at: number; removed: string[]; added: string[] }[] = [];
  let i = 0, j = 0, cur: (typeof out)[number] | null = null;
  while (i < n || j < m) {
    if (i < n && j < m && a[i] === b[j]) { cur = null; i++; j++; continue; }
    if (!cur) { cur = { at: i, removed: [], added: [] }; out.push(cur); }
    if (j < m && (i >= n || L[i][j + 1] >= L[i + 1][j])) cur.added.push(b[j++]);
    else cur.removed.push(a[i++]);
  }
  return out;
}

/**
 * Paragraphs first, words second. Each proposal paragraph is paired with the
 * original paragraph it shares the most words with, so a paragraph that moved
 * is reported as a move rather than as a deletion here and an insertion there.
 * An original paragraph nothing matches is dropped with the proposal.
 */
export function diffProse(original: string, proposal: string) {
  const A = original.split(/\n\s*\n/).map(tokens);
  const B = proposal.split(/\n\s*\n/).map(tokens);
  const taken = new Set<number>();
  const pairs: Pair[] = B.map((b) => {
    let from = -1, score = 0;
    A.forEach((a, k) => {
      if (taken.has(k)) return;
      const s = a.filter((w) => b.includes(w)).length;
      if (s > score) { score = s; from = k; }
    });
    if (from >= 0) taken.add(from);
    return { from, tokens: from >= 0 ? A[from] : [] };
  });
  const hunks: Hunk[] = [];
  pairs.forEach(({ tokens: a }, para) => {
    for (const h of diffTokens(a, B[para])) {
      const end = h.at + h.removed.length;
      hunks.push({ id: hunks.length + 1, para, ...h, before: a.slice(Math.max(0, h.at - 3), h.at).join(" "), after: a.slice(end, end + 3).join(" ") });
    }
  });
  const moved = pairs.filter((p, k) => p.from >= 0 && p.from !== k).length;
  return { pairs, hunks, moved };
}

/** The document with only the kept hunks applied, in the proposal's order. */
export function apply(pairs: Pair[], hunks: Hunk[], kept: Set<number>) {
  return pairs
    .map((p, para) => {
      const out: string[] = [];
      let i = 0;
      for (const h of hunks.filter((h) => h.para === para)) {
        out.push(...p.tokens.slice(i, h.at), ...(kept.has(h.id) ? h.added : h.removed));
        i = h.at + h.removed.length;
      }
      return [...out, ...p.tokens.slice(i)].join(" ");
    })
    .join("\n\n");
}

demo.tsxHow it is called: the pricing draft against its rewrite. Three hunks, two paragraphs reordered, and the document below updating as you decide.Copy

import { useState } from "react";
import { SuggestionDiff } from "./SuggestionDiff";

/** Two paragraphs of the pricing page. The rewrite moves the intro above the
 *  plans and makes three word-level edits: one replacement, one insertion,
 *  one deletion. */
const ORIGINAL = `Starter gives three seats for free, Team is £12 a seat a month, and Enterprise is priced per seat on a contract, with invoicing and a dedicated support line, billed annually.

Our pricing is designed to grow with you. Every plan includes unlimited viewers and you can move between plans at any time without losing work.`;

const PROPOSAL = `Our pricing is per seat, so it grows with you. Every plan includes unlimited viewers and unlimited projects, and you can move between plans at any time without losing work.

Starter gives three seats for free, Team is £12 a seat a month, and Enterprise is priced per seat on a contract, billed annually.`;

/** The document is whatever the reader has kept so far, and it starts as
 *  the original. Keep changes it at once; undo puts all of it back. */
export default function Demo() {
  const [doc, setDoc] = useState(ORIGINAL);
  return (
    <div className="rounded-lg border bg-card p-4">
      <SuggestionDiff original={ORIGINAL} proposal={PROPOSAL} onChange={setDoc} />
      <div className="mt-4 whitespace-pre-line border-t pt-3 text-xs leading-relaxed text-muted-foreground">{doc}</div>
    </div>
  );
}