kandev/apps/web/components/diff/file-diff-viewer.tsx

"use client";

import { memo, useMemo } from "react";
import { DiffViewerResolved as DiffViewer } from "./diff-viewer-resolver";
import { transformGitDiff } from "@/lib/diff";
import type { DiffComment, DiffCommentUpdate } from "@/lib/diff/types";
import type { RevertBlockInfo } from "./diff-viewer-resolver";

interface FileDiffViewerProps {
  filePath: string;
  diff: string;
  status?: string;
  enableComments?: boolean;
  sessionId?: string;
  onCommentAdd?: (comment: DiffComment) => void;
  onCommentDelete?: (commentId: string) => void;
  onCommentUpdate?: (commentId: string, updates: DiffCommentUpdate) => void;
  onCommentRun?: (comment: DiffComment) => void;
  comments?: DiffComment[];
  className?: string;
  compact?: boolean;
  hideHeader?: boolean;
  onOpenFile?: (filePath: string, repo?: string) => void;
  onPreviewMarkdown?: (filePath: string) => void;
  onRevert?: (filePath: string) => void;
  enableAcceptReject?: boolean;
  /** Render and navigate to the active task walkthrough inside this diff. */
  enableWalkthroughAnnotations?: boolean;
  onRevertBlock?: (filePath: string, info: RevertBlockInfo) => void;
  wordWrap?: boolean;
  /** Enable diff expansion (show expand up/down buttons at hunk separators) */
  enableExpansion?: boolean;
  /** Base git ref for fetching old content (e.g., "origin/main", "HEAD~1") */
  baseRef?: string;
  /** Controlled expand-unchanged state */
  expandUnchanged?: boolean;
  /** Callback when expand-unchanged is toggled (controlled mode) */
  onToggleExpandUnchanged?: () => void;
  /** Multi-repo subpath for the file (e.g. "kandev"); empty for single-repo. */
  repo?: string;
  taskId?: string | null;
  repositoryId?: string | null;
  previousPath?: string | null;
  publishedBranch?: string | null;
  externalBaseBranch?: string | null;
}

/**
 * Wrapper around DiffViewer that handles data transformation with memoization.
 *
 * Use this component when you have raw diff data (filePath, diff, status).
 * The transformation to FileDiffData is memoized internally, preventing
 * unnecessary re-renders when parent components update.
 *
 * This is the recommended component to use for rendering git diffs.
 */
export const FileDiffViewer = memo(function FileDiffViewer({
  filePath,
  diff,
  status = "M",
  enableComments,
  sessionId,
  onCommentAdd,
  onCommentDelete,
  onCommentUpdate,
  onCommentRun,
  comments,
  className,
  compact,
  hideHeader,
  onOpenFile,
  onPreviewMarkdown,
  onRevert,
  enableAcceptReject,
  enableWalkthroughAnnotations,
  onRevertBlock,
  wordWrap,
  enableExpansion,
  baseRef,
  expandUnchanged,
  onToggleExpandUnchanged,
  repo,
  taskId,
  repositoryId,
  previousPath,
  publishedBranch,
  externalBaseBranch,
}: FileDiffViewerProps) {
  const data = useMemo(() => transformGitDiff(filePath, diff, status), [filePath, diff, status]);

  return (
    <DiffViewer
      data={data}
      enableComments={enableComments}
      sessionId={sessionId}
      onCommentAdd={onCommentAdd}
      onCommentDelete={onCommentDelete}
      onCommentUpdate={onCommentUpdate}
      onCommentRun={onCommentRun}
      comments={comments}
      className={className}
      compact={compact}
      hideHeader={hideHeader}
      onOpenFile={onOpenFile}
      onPreviewMarkdown={onPreviewMarkdown}
      onRevert={onRevert}
      enableAcceptReject={enableAcceptReject}
      enableWalkthroughAnnotations={enableWalkthroughAnnotations}
      onRevertBlock={onRevertBlock}
      wordWrap={wordWrap}
      enableExpansion={enableExpansion}
      baseRef={baseRef}
      expandUnchanged={expandUnchanged}
      onToggleExpandUnchanged={onToggleExpandUnchanged}
      repo={repo}
      taskId={taskId}
      repositoryId={repositoryId}
      status={status}
      previousPath={previousPath}
      publishedBranch={publishedBranch}
      externalBaseBranch={externalBaseBranch}
    />
  );
});