Merge pull request liam-hq#1161 from liam-hq/devin/1743768295-add-diff-display

Add diff display between original document and knowledge suggestion

Author: FunamaYukina

docs/packages-license.md

@@ -2,7 +2,7 @@
 
 
 ## Summary
-* 1323 MIT
+* 1324 MIT
 * 207 Apache 2.0
 * 82 ISC
 * 32 New BSD
@@ -5151,6 +5151,17 @@ LGPL-3.0-or-later permitted
 
 
 
+<a name="@types/diff"></a>
+### @types/diff v7.0.2
+#### 
+
+##### Paths
+* /home/runner/work/liam/liam
+
+<a href="http://opensource.org/licenses/mit-license">MIT</a> permitted
+
+
+
 <a name="@types/escodegen"></a>
 ### @types/escodegen v0.0.6
 #### 

frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.module.css

@@ -157,3 +157,30 @@
   border-radius: 0.375rem;
   font-weight: 600;
 }
+
+.diffContent {
+  padding: 1.25rem;
+  background-color: var(--color-background-code);
+  border-radius: 0.5rem;
+  overflow: auto;
+  font-family: monospace;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.diffAdded {
+  background-color: rgba(76, 175, 80, 0.2);
+  color: #2e7d32;
+}
+
+.diffRemoved {
+  background-color: rgba(244, 67, 54, 0.2);
+  color: #c62828;
+}
+
+.diffUnchanged {
+  color: var(--color-text-primary);
+}

frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx

@@ -1,10 +1,12 @@
 import { createClient } from '@/libs/db/server'
 import { urlgen } from '@/utils/routes'
+import * as diffLib from 'diff'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
-import type { FC } from 'react'
+import type { FC, ReactNode } from 'react'
 import { UserFeedbackClient } from '../../../../components/UserFeedbackClient'
 import { approveKnowledgeSuggestion } from '../../actions/approveKnowledgeSuggestion'
+import { getOriginalDocumentContent } from '../../utils/getOriginalDocumentContent'
 import styles from './KnowledgeSuggestionDetailPage.module.css'
 
 type Props = {
@@ -101,7 +103,20 @@ export const KnowledgeSuggestionDetailPage: FC<Props> = async ({
 
         <div className={styles.contentSection}>
           <h2 className={styles.sectionTitle}>Content</h2>
-          <pre className={styles.codeContent}>{suggestion.content}</pre>
+          {suggestion.approvedAt ? (
+            <pre className={styles.codeContent}>{suggestion.content}</pre>
+          ) : (
+            <DiffDisplay
+              originalContent={
+                await getOriginalDocumentContent(
+                  projectId,
+                  suggestion.branchName,
+                  suggestion.path,
+                )
+              }
+              newContent={suggestion.content}
+            />
+          )}
           {/* Client-side user feedback component */}
           <div className={styles.feedbackSection}>
             <UserFeedbackClient traceId={suggestion.traceId} />
@@ -137,3 +152,53 @@ export const KnowledgeSuggestionDetailPage: FC<Props> = async ({
     </div>
   )
 }
+
+interface DiffDisplayProps {
+  originalContent: string | null
+  newContent: string
+}
+
+const DiffDisplay: FC<DiffDisplayProps> = ({ originalContent, newContent }) => {
+  if (!originalContent) {
+    return (
+      <div className={styles.diffContent}>
+        {newContent.split('\n').map((line) => (
+          <div key={`added-${line}`} className={styles.diffAdded}>
+            + {line}
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  const diff = diffLib.diffTrimmedLines(originalContent, newContent)
+
+  return (
+    <div className={styles.diffContent}>
+      {diff.map((part, index) => {
+        const className = part.added
+          ? styles.diffAdded
+          : part.removed
+            ? styles.diffRemoved
+            : styles.diffUnchanged
+
+        const prefix = part.added ? '+ ' : part.removed ? '- ' : '  '
+
+        return part.value.split('\n').map((line, lineIndex) => {
+          if (lineIndex === part.value.split('\n').length - 1 && line === '') {
+            return null
+          }
+          return (
+            <div
+              key={`${part.added ? 'added' : part.removed ? 'removed' : 'unchanged'}-${line}-${index}-${lineIndex}`}
+              className={className}
+            >
+              {prefix}
+              {line}
+            </div>
+          )
+        })
+      })}
+    </div>
+  )
+}

frontend/apps/app/features/projects/utils/getOriginalDocumentContent.ts

@@ -0,0 +1,31 @@
+import { getFileContent } from '@liam-hq/github'
+import { getProjectRepository } from '../../../app/(app)/app/projects/[projectId]/ref/[branchOrCommit]/docs/[...docFilePath]/getProjectRepository'
+
+export async function getOriginalDocumentContent(
+  projectId: string,
+  branchOrCommit: string,
+  docPath: string,
+): Promise<string | null> {
+  try {
+    const projectRepo = await getProjectRepository(projectId)
+    if (!projectRepo) {
+      console.error('Repository information not found')
+      return null
+    }
+
+    const { repository } = projectRepo
+    const repositoryFullName = `${repository.owner}/${repository.name}`
+
+    const fileData = await getFileContent(
+      repositoryFullName,
+      docPath,
+      branchOrCommit,
+      repository.installationId,
+    )
+
+    return fileData.content
+  } catch (error) {
+    console.error('Error fetching original document content:', error)
+    return null
+  }
+}

frontend/apps/app/package.json

@@ -18,9 +18,11 @@
     "@sentry/nextjs": "8",
     "@trigger.dev/build": "3.3.17",
     "@trigger.dev/sdk": "3.3.17",
+    "@types/diff": "7.0.2",
     "cheerio": "1.0.0",
     "clsx": "2.1.1",
     "date-fns": "4.1.0",
+    "diff": "7.0.0",
     "dotenv": "16.4.7",
     "flags": "3.1.1",
     "langfuse": "3.37.1",