feat: ✨ add markdown diff utility and integrate in UI

packages/core/src/mddiff.ts

@@ -0,0 +1,21 @@
+import { diffLines } from "diff"
+import { fenceMD } from "./mkmd"
+
+export function markdownDiff(
+    oldStr: string,
+    newStr: string,
+    options?: {
+        lang?: string
+        ignoreWhitespace?: boolean
+    }
+) {
+    const { lang, ...rest } = options || {}
+
+    if (!oldStr) return fenceMD(newStr, lang)
+
+    const changes = diffLines(oldStr || "", newStr || "", rest)
+    const source = changes
+        .map((c) => `${c.added ? "+" : c.removed ? "-" : " "}${c.value}`)
+        .join("")
+    return fenceMD(source, "diff")
+}

packages/web/src/App.tsx

@@ -57,6 +57,7 @@ import { lookupMime } from "../../core/src/mime"
 import dedent from "dedent"
 import { convertAnnotationsToMarkdown } from "../../core/src/annotations"
 import "remark-github-blockquote-alert/alert.css"
+import { markdownDiff } from "../../core/src/mddiff"
 
 const urlParams = new URLSearchParams(window.location.hash)
 const apiKey = urlParams.get("api-key")
@@ -814,17 +815,7 @@ function FilesTabPanel() {
                         ?.map(
                             ([filename, content], i) =>
                                 dedent`### ${filename}
-                    \`\`\`\`\`
-                    ${content.after}
-                    \`\`\`\`\`
-                    ${
-                        content.before
-                            ? dedent`- original
-                        \`\`\`\`\`
-                        ${content.before}
-                        \`\`\`\`\``
-                            : ""
-                    }
+                    ${markdownDiff(content.before, content.after, { lang: "txt" })}
                     ${content.validation?.pathValid ? `- output path validated` : ""}
                     ${
                         content.validation?.schema