feat(chat): Improve diff appearance in main chat view #8932
+698
−55
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dosubot
bot
added
the
size:XL
All previously flagged issues have been resolved. No new issues found in the latest commits. Issues to Fix
Mention @roomote to ask your PR Fixer agent to address the feedback. |
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new DiffView component to render unified diffs with VSCode-style formatting, and enhances the UI to display diff statistics (+/- line counts) for file operations. The changes improve the visual presentation of code changes across the application.
- Adds a DiffView component for rendering unified diffs with side-by-side line numbers
- Implements diff stats computation and display for file edit operations
- Converts SEARCH/REPLACE and new file formats to unified diff format
Reviewed Changes
Copilot reviewed 7 out of 8 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| webview-ui/src/components/common/DiffView.tsx | New component to render unified diffs with VSCode styling |
| webview-ui/src/components/common/CodeAccordian.tsx | Adds diff stats display and integrates DiffView for diff language |
| webview-ui/src/components/chat/ChatRow.tsx | Computes diff stats and converts various diff formats to unified diff |
| webview-ui/src/components/chat/BatchDiffApproval.tsx | Adds diff stats computation and SEARCH/REPLACE conversion |
| webview-ui/src/components/chat/tests/ChatRow.diff-actions.spec.tsx | New test file for diff stats functionality |
| webview-ui/src/components/chat/ChatView.tsx | Comment clarification update |
| webview-ui/package.json | Adds diff library dependencies |
| pnpm-lock.yaml | Lockfile updates for new dependencies |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
hannesrudolph
added
the
Issue/PR - Triage
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
Addressed remaining review item: replaced hardcoded #ffffff with theme foreground for +/- indicators in DiffView.tsx. All CI checks are green on the latest run. The github-advanced-security entry posted a blank comment and CodeQL is passing; there are no actionable security findings attached to this PR right now. |
|
Resolved the CodeQL warning shown in your screenshot. Updated stripCData() to: (1) convert HTML-encoded CDATA markers to raw, then (2) strip raw markers. This removes the no-op replacement flagged by CodeQL. Changes around lines 58-64. |
|
fix(webview-ui): Correct new-file diff line counting by ignoring trailing newline in unified diff; added a unit test to cover this behavior.
|
- Add DiffView with line numbers, +/- column, wrapping - Show inline +/− counts in headers - Convert SEARCH/REPLACE to unified diffs - Remove Undo mechanism (UI/backend) - Update tests and deps (diff, @types/diff)
… match existing patterns
…e special-case counting and add test (addresses roomote review)\n\n- Remove special-case line counting for newFileCreated in [diffStatsForInline](webview-ui/src/components/chat/ChatRow.tsx:472)\n- Always use [computeDiffStats()](webview-ui/src/components/chat/ChatRow.tsx:118)\n- Add test to assert +N/-0 for new files in [ChatRow.diff-actions.spec.tsx](webview-ui/src/components/chat/__tests__/ChatRow.diff-actions.spec.tsx)
…onents/common/DiffView.tsx)\n\n- Tint only content and +/- gutter; keep line-number columns neutral\n- Match look of VSCode unified diff blocks (clear red/green bands)\n
…yling - Integrate highlighter for code syntax based on file language - Adjust background colors for additions and deletions to match VSCode styles - Refactor rendering logic to include inline highlighting and gutter styles
…iew rendering Add diffUtils with unified diff normalization: - extractUnifiedDiff, convertSearchReplaceToUnifiedDiff, convertNewFileToUnifiedDiff BatchDiffApproval: - normalize tool output to unified diff via extractUnifiedDiff - compute unified diff stats - remove CDATA handling and legacy conversion paths DiffView: - add compact gap rows between hunks - dedicated +/- column - improved gutter/background and layout tweaks ChatRow: - integrate unified diff normalization pipeline
…oved compatibility
…to support light/dark themes
…L-encoded CDATA markers and removing no-op replacement
…s without no-op replacements (resolves CodeQL warning)
…ling newline in unified diff; add test for ChatRow
… header detection; reuse extractUnifiedDiff for new-file rendering
…unified patch in single-file approval; remove client-side fallback normalization for appliedDiff; align gap-row styling to editor background
…f content processing
- Fix stripCData() to properly handle HTML-encoded CDATA markers - Fix convertNewFileToUnifiedDiff() to emit valid hunks for empty files - Improve DiffView patch selection to match by filePath - Add performance optimization to disable highlighting for large diffs (>1000 lines) - Improve theme detection using proper VS Code theme classes - Extract duplicate diff stats logic into shared utility module
…ting mode When PREVENT_FOCUS_DISRUPTION experiment is enabled, write_to_file was not generating a unified diff for existing files, causing the diff not to display in the chat view. Now generates the same diff format as non-background mode for consistency.
…d mode Moved originalContent loading before diff generation to ensure proper diff comparison. Previously, the diff was being generated with empty originalContent, causing all lines to appear as additions.
hannesrudolph
force-pushed
the
feat/diff-view-chatview
branch
from
7df98e5 to
1ff1032
Compare
hannesrudolph
force-pushed
the
feat/diff-view-chatview
branch
from
2996fd5 to
1ff1032
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR improves how edits are displayed in the main chat view:
Scope: UI-only presentation improvements for diffs and counters; no changes to tool behavior.
Important
Enhance chat view diff display with new backend diff processing functions, updated tools, and improved frontend rendering components.
computeDiffStats,sanitizeUnifiedDiff, andconvertNewFileToUnifiedDifffunctions insrc/core/diff/stats.tsfor diff processing.applyDiffTool.ts,insertContentTool.ts,multiApplyDiffTool.ts, andwriteToFileTool.tsto use new diff functions and includediffStatsin messages.DiffViewcomponent inDiffView.tsxfor rendering diffs with line numbers and syntax highlighting.CodeAccordian.tsxto display diff stats and useDiffViewfor diff content.ChatRow.tsxandBatchDiffApproval.tsxto handle and display diff stats.ChatRow.diff-actions.spec.tsxfor diff stats display.index.cssto include styles for diff views and background tints.parseUnifiedDifffunction inparseUnifiedDiff.tsfor parsing diff strings into renderable lines.This description was created by
for 2996fd5. You can customize this summary. It will automatically update as commits are pushed.