feat(code): replace in-chat diffs with pierre/diffs

Author: adboio

apps/code/package.json

@@ -109,7 +109,6 @@
     "@codemirror/lang-xml": "^6.1.0",
     "@codemirror/lang-yaml": "^6.1.2",
     "@codemirror/language": "^6.12.2",
-    "@codemirror/merge": "^6.12.0",
     "@codemirror/search": "^6.6.0",
     "@codemirror/state": "^6.5.4",
     "@codemirror/view": "^6.39.17",

apps/code/src/renderer/features/code-editor/hooks/useEditorExtensions.ts

@@ -12,35 +12,27 @@ import {
 } from "@codemirror/view";
 import { useThemeStore } from "@stores/themeStore";
 import { useMemo } from "react";
-import { useDiffViewerStore } from "../stores/diffViewerStore";
-import { mergeViewTheme, oneDark, oneLight } from "../theme/editorTheme";
+import { oneDark, oneLight } from "../theme/editorTheme";
 import { getLanguageExtension } from "../utils/languages";
 
-export function useEditorExtensions(
-  filePath?: string,
-  readOnly = false,
-  isDiff = false,
-) {
+export function useEditorExtensions(filePath?: string, readOnly = false) {
   const isDarkMode = useThemeStore((state) => state.isDarkMode);
-  const wordWrap = useDiffViewerStore((state) => state.wordWrap);
 
   return useMemo(() => {
     const languageExtension = filePath ? getLanguageExtension(filePath) : null;
     const theme = isDarkMode ? oneDark : oneLight;
-    const shouldWrap = isDiff ? wordWrap : true;
 
     return [
       lineNumbers(),
       highlightActiveLineGutter(),
       search(),
       highlightSelectionMatches(),
       keymap.of(searchKeymap),
-      ...(shouldWrap ? [EditorView.lineWrapping] : []),
+      EditorView.lineWrapping,
       theme,
-      mergeViewTheme,
       EditorView.editable.of(!readOnly),
-      ...(readOnly && !isDiff ? [EditorState.readOnly.of(true)] : []),
+      ...(readOnly ? [EditorState.readOnly.of(true)] : []),
       ...(languageExtension ? [languageExtension] : []),
     ];
-  }, [filePath, isDarkMode, readOnly, isDiff, wordWrap]);
+  }, [filePath, isDarkMode, readOnly]);
 }

apps/code/src/renderer/features/code-editor/theme/editorTheme.ts

@@ -246,161 +246,3 @@ export const oneLight: Extension = [
   createEditorTheme(light, false),
   syntaxHighlighting(createHighlightStyle(light)),
 ];
-
-export const mergeViewTheme = EditorView.baseTheme({
-  ".cm-mergeView": {
-    height: "100%",
-    overflowY: "auto",
-  },
-  ".cm-mergeView .cm-content": {
-    padding: "0",
-  },
-  ".cm-mergeViewEditors": {
-    display: "flex",
-    alignItems: "stretch",
-    minHeight: "100%",
-  },
-  ".cm-mergeViewEditor": {
-    flexGrow: "1",
-    flexBasis: "0",
-    overflow: "hidden",
-  },
-  ".cm-merge-revert button": {
-    opacity: "0",
-    transition: "opacity 0.15s ease",
-  },
-  ".cm-merge-revert:hover button": {
-    opacity: "1",
-  },
-  // Light mode - line-level diffs (subtle)
-  "&light.cm-merge-a .cm-changedLine, &light .cm-deletedChunk": {
-    backgroundColor: "rgba(220, 80, 80, 0.15)",
-  },
-  "&light.cm-merge-b .cm-changedLine, &light .cm-inlineChangedLine": {
-    backgroundColor: "rgba(80, 180, 100, 0.15)",
-  },
-  // Dark mode - line-level diffs (subtle)
-  "&dark.cm-merge-a .cm-changedLine, &dark .cm-deletedChunk": {
-    backgroundColor: "rgba(220, 80, 80, 0.15)",
-  },
-  "&dark.cm-merge-b .cm-changedLine, &dark .cm-inlineChangedLine": {
-    backgroundColor: "rgba(80, 180, 100, 0.15)",
-  },
-  ".cm-changedText": {
-    backgroundImage: "none !important",
-    backgroundSize: "0 0 !important",
-    backgroundPosition: "0 0 !important",
-    borderRadius: "0",
-    padding: "1px 0",
-  },
-  "&light.cm-merge-a .cm-changedText, &light .cm-deletedChunk .cm-deletedText":
-    {
-      backgroundColor: "rgba(220, 80, 80, 0.35)",
-      backgroundImage: "none",
-    },
-  "&dark.cm-merge-a .cm-changedText, &dark .cm-deletedChunk .cm-deletedText": {
-    backgroundColor: "rgba(220, 80, 80, 0.35)",
-    backgroundImage: "none",
-  },
-  "&light.cm-merge-b .cm-changedText": {
-    backgroundColor: "rgba(80, 180, 100, 0.35)",
-    backgroundImage: "none",
-  },
-  "&dark.cm-merge-b .cm-changedText": {
-    backgroundColor: "rgba(80, 180, 100, 0.35)",
-    backgroundImage: "none",
-  },
-  "&.cm-merge-b .cm-deletedText": {
-    backgroundColor: "rgba(220, 80, 80, 0.35)",
-    backgroundImage: "none",
-  },
-  ".cm-insertedLine, .cm-deletedLine, .cm-deletedLine del": {
-    textDecoration: "none",
-  },
-  ".cm-deletedChunk": {
-    paddingLeft: "6px",
-    "& .cm-chunkButtons": {
-      position: "absolute",
-      insetInlineEnd: "5px",
-      opacity: "0",
-      transition: "opacity 0.15s ease",
-    },
-    "&:hover .cm-chunkButtons": {
-      opacity: "1",
-    },
-    "& button": {
-      cursor: "pointer",
-      margin: "0 2px",
-      "&[name=accept]": {
-        border: "none",
-        background: "#2a2",
-        color: "white",
-        borderRadius: "3px",
-      },
-    },
-  },
-  ".cm-collapsed-context": {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "flex-start",
-    gap: "4px",
-    padding: "0 8px",
-    borderTop: "1px solid var(--gray-6)",
-    borderBottom: "1px solid var(--gray-6)",
-    fontSize: "12px",
-    lineHeight: "1",
-    userSelect: "none",
-    minHeight: "26px",
-  },
-  "&light .cm-collapsed-context": {
-    background: "#e8e9e3",
-    color: "#3a4036",
-  },
-  "&dark .cm-collapsed-context": {
-    background: "#1a1a24",
-    color: "#9898b6",
-  },
-  ".cm-collapsed-gutter-el": {
-    borderTop: "1px solid var(--gray-6)",
-    borderBottom: "1px solid var(--gray-6)",
-  },
-  "&light .cm-collapsed-gutter-el": {
-    background: "#e8e9e3",
-  },
-  "&dark .cm-collapsed-gutter-el": {
-    background: "#1a1a24",
-  },
-  ".cm-collapsed-expand-btn": {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "4px",
-    border: "none",
-    borderRadius: "3px",
-    cursor: "pointer",
-    padding: "3px 6px",
-    lineHeight: "0",
-    background: "transparent",
-    color: "inherit",
-    fontFamily: "inherit",
-    fontSize: "11px",
-    opacity: "0.6",
-    transition: "opacity 0.15s ease, background 0.15s ease",
-    "& span": {
-      lineHeight: "1",
-    },
-    "&:hover": {
-      opacity: "1",
-      background: "var(--gray-a4)",
-    },
-  },
-  ".cm-changeGutter": { width: "3px", paddingLeft: "0px" },
-  "&light.cm-merge-a .cm-changedLineGutter, &light .cm-deletedLineGutter": {
-    background: "#e43",
-  },
-  "&dark.cm-merge-a .cm-changedLineGutter, &dark .cm-deletedLineGutter": {
-    background: "#fa9",
-  },
-  "&light.cm-merge-b .cm-changedLineGutter": { background: "#2b2" },
-  "&dark.cm-merge-b .cm-changedLineGutter": { background: "#8f8" },
-  ".cm-inlineChangedLineGutter": { background: "#75d" },
-});

apps/code/src/renderer/features/sessions/components/session-update/CodePreview.tsx

@@ -1,16 +1,21 @@
-import { unifiedMergeView } from "@codemirror/merge";
-import type { Extension } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
+import { MultiFileDiff, WorkerPoolContextProvider } from "@pierre/diffs/react";
+import WorkerUrl from "@pierre/diffs/worker/worker.js?worker&url";
 import { Code } from "@radix-ui/themes";
+import { useThemeStore } from "@stores/themeStore";
 import { compactHomePath } from "@utils/path";
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import {
   CODE_PREVIEW_CONTAINER_STYLE,
   CODE_PREVIEW_EDITOR_STYLE,
   CODE_PREVIEW_PATH_STYLE,
   useCodePreviewExtensions,
 } from "./useCodePreviewExtensions";
 
+function workerFactory(): Worker {
+  return new Worker(WorkerUrl, { type: "module" });
+}
+
 interface CodePreviewProps {
   content: string;
   filePath?: string;
@@ -28,43 +33,126 @@ export function CodePreview({
   firstLineNumber = 1,
   maxHeight,
 }: CodePreviewProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const editorRef = useRef<EditorView | null>(null);
   const isDiff = oldContent !== undefined && oldContent !== null;
-  const extensions = useCodePreviewExtensions(
-    filePath,
-    isDiff,
-    firstLineNumber,
+
+  if (isDiff) {
+    return (
+      <DiffPreview
+        content={content}
+        filePath={filePath}
+        showPath={showPath}
+        oldContent={oldContent}
+        maxHeight={maxHeight}
+      />
+    );
+  }
+
+  return (
+    <PlainCodePreview
+      content={content}
+      filePath={filePath}
+      showPath={showPath}
+      firstLineNumber={firstLineNumber}
+      maxHeight={maxHeight}
+    />
+  );
+}
+
+function DiffPreview({
+  content,
+  filePath,
+  showPath,
+  oldContent,
+  maxHeight,
+}: {
+  content: string;
+  filePath?: string;
+  showPath?: boolean;
+  oldContent: string;
+  maxHeight?: string;
+}) {
+  const isDarkMode = useThemeStore((s) => s.isDarkMode);
+  const fileName = filePath?.split("/").pop() ?? "file";
+
+  const oldFile = useMemo(
+    () => ({ name: fileName, contents: oldContent }),
+    [fileName, oldContent],
+  );
+  const newFile = useMemo(
+    () => ({ name: fileName, contents: content }),
+    [fileName, content],
+  );
+  const options = useMemo(
+    () => ({
+      diffStyle: "unified" as const,
+      overflow: "wrap" as const,
+      themeType: (isDarkMode ? "dark" : "light") as "dark" | "light",
+      theme: { dark: "github-dark" as const, light: "github-light" as const },
+      disableFileHeader: true,
+    }),
+    [isDarkMode],
+  );
+
+  return (
+    <div style={CODE_PREVIEW_CONTAINER_STYLE}>
+      {showPath && filePath && (
+        <div style={CODE_PREVIEW_PATH_STYLE} title={filePath}>
+          <Code variant="ghost" size="1" className="truncate">
+            {compactHomePath(filePath)}
+          </Code>
+        </div>
+      )}
+      <div style={maxHeight ? { maxHeight, overflow: "auto" } : undefined}>
+        <WorkerPoolContextProvider
+          poolOptions={{ workerFactory }}
+          highlighterOptions={{
+            theme: { dark: "github-dark", light: "github-light" },
+          }}
+        >
+          <MultiFileDiff
+            oldFile={oldFile}
+            newFile={newFile}
+            options={options}
+          />
+        </WorkerPoolContextProvider>
+      </div>
+    </div>
   );
+}
+
+function PlainCodePreview({
+  content,
+  filePath,
+  showPath,
+  firstLineNumber,
+  maxHeight,
+}: {
+  content: string;
+  filePath?: string;
+  showPath?: boolean;
+  firstLineNumber: number;
+  maxHeight?: string;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<EditorView | null>(null);
+  const extensions = useCodePreviewExtensions(filePath, firstLineNumber);
 
   useEffect(() => {
     if (!containerRef.current) return;
 
     editorRef.current?.destroy();
 
-    const diffExtension: Extension[] = isDiff
-      ? [
-          unifiedMergeView({
-            original: oldContent,
-            highlightChanges: false,
-            gutter: false,
-            mergeControls: false,
-            collapseUnchanged: { margin: 3, minSize: 4 },
-          }),
-        ]
-      : [];
-
     editorRef.current = new EditorView({
       doc: content,
-      extensions: [...extensions, ...diffExtension],
+      extensions,
       parent: containerRef.current,
     });
 
     return () => {
       editorRef.current?.destroy();
       editorRef.current = null;
     };
-  }, [content, oldContent, extensions, isDiff]);
+  }, [content, extensions]);
 
   return (
     <div style={CODE_PREVIEW_CONTAINER_STYLE}>