feat: long file scrollable & pdf view#1381
Open
RenzoMXD wants to merge 1 commit intoeigent-ai:mainfrom
Open
Conversation
Author
|
@Wendong-Fan @Pakchoioioi Please review my PR. Thanks. |
Collaborator
|
Thanks @RenzoMXD for contribution, I'll review it ASAP. |
Contributor
There was a problem hiding this comment.
Pull request overview
Fixes Agent Folder preview usability by ensuring long document content can scroll and restores PDF preview in Electron by replacing the non-functional <iframe> approach with a react-pdf-based renderer.
Changes:
- Adjust Folder preview layout/CSS to allow long files (e.g., markdown) to scroll instead of being clipped.
- Replace PDF
<iframe>preview with a newPdfViewercomponent built onreact-pdf/PDF.js. - Add/update unit tests around long-file scrolling and mock
PdfViewerin existing Folder tests to avoid jsdom incompatibilities.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
src/components/Folder/index.tsx |
Makes the file viewer area scrollable for non-HTML previews and swaps PDF rendering to PdfViewer. |
src/components/Folder/PdfViewer.tsx |
Introduces a react-pdf viewer with worker configuration and responsive sizing. |
src/components/ChatBox/MessageItem/MarkDown.tsx |
Removes overflow-hidden from .markdown-body to prevent clipping long markdown content. |
test/unit/components/Folder/LongFileScroll.test.tsx |
Adds a regression test intended to protect long-file scrolling behavior. |
test/unit/components/Folder/FileTree.test.tsx |
Mocks PdfViewer to prevent pdfjs-dist/jsdom environment issues during unit tests. |
package.json |
Adds react-pdf dependency for PDF rendering support. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Author
4pmtong
requested changes
Mar 4, 2026
Author
Author
4pmtong
reviewed
Mar 18, 2026
4pmtong
reviewed
Mar 18, 2026
4pmtong
reviewed
Mar 18, 2026
- Replace broken <iframe> PDF preview with a react-pdf PdfViewer component that renders pages lazily via IntersectionObserver, so large PDFs don't block the renderer process. ResizeObserver for container width uses useRef + useEffect so it is always properly cleaned up on unmount. An onLoadError handler shows a friendly error message instead of a blank screen. The component is React.lazy()-loaded so the ~464 kB pdfjs-dist bundle is only fetched when the user actually opens a PDF file. - Fix long-file scrolling in the Agent Folder view: the outer content container now uses 'scrollbar overflow-y-auto' (not overflow-hidden), letting content grow naturally and trigger the scrollbar. The inner wrapper carries h-full only for the HTML iframe case. The markdown prose wrapper gets its own overflow-hidden so the global MarkDown component (used elsewhere) is not affected. - Replace scrollbar-always-visible with scrollbar in the Folder content container so the scrollbar follows the project-wide hover-to-show behaviour and does not look odd on macOS overlay-scrollbar systems. - Rewrite LongFileScroll tests: the previous tests hardcoded their own JSX that never contained the production classes being checked, so they always passed regardless of regressions. The new tests mirror the exact className expressions from Folder/index.tsx so any future regression breaks them. FileTree mock comment updated to reflect lazy-loading. Closes eigent-ai#1374
RenzoMXD
force-pushed
the
feat-long-file-scrollable
branch
from
0a48349 to
7deb579
Compare
Author
|
@4pmtong I've fixed code based on your suggestions. Please take an another look on this. Thanks. |
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
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.
Related Issue
Closes #1374
Description
Long files (
.md,.docx, etc.) in the Agent Folder view were not scrollable — content was clipped with no way to reach the rest of the document. This was caused by two CSS issues working together:Additionally, PDF preview was broken (grey rectangle) because Electron does not include Chromium's built-in PDF viewer plugin — the
<iframe src="data:application/pdf;base64,...">approach cannot work in Electron.Screenshorts
Previous:
Screencast.from.2026-02-26.15-54-24.webm
After:
Screencast.from.2026-02-26.16-09-11.webm
Testing Evidence (REQUIRED)
Contribution Guidelines Acknowledgement