From 7deb579fcd61655c08e091391a0fe56833e9ee2f Mon Sep 17 00:00:00 2001
From: RenzoMXD <170978465+RenzoMXD@users.noreply.github.com>
Date: Wed, 18 Mar 2026 17:40:21 +0000
Subject: [PATCH] feat: long file scrollable & PDF viewer (#1374)

- 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 #1374
---
 package.json                                  |   1 +
 src/components/Folder/PdfViewer.tsx           | 133 +++++++++++
 src/components/Folder/index.tsx               |  22 +-
 test/unit/components/Folder/FileTree.test.tsx |   9 +
 .../components/Folder/LongFileScroll.test.tsx | 223 ++++++++++++++++++
 5 files changed, 380 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Folder/PdfViewer.tsx
 create mode 100644 test/unit/components/Folder/LongFileScroll.test.tsx

diff --git a/package.json b/package.json
index c956f56fe..38ed1d2bd 100644
--- a/package.json
+++ b/package.json
@@ -106,6 +106,7 @@
     "postprocessing": "^6.37.8",
     "react-day-picker": "^9.13.0",
     "react-markdown": "^10.1.0",
+    "react-pdf": "^10.4.1",
     "react-resizable-panels": "^3.0.4",
     "react-router-dom": "^7.6.0",
     "remark-gfm": "^4.0.1",
diff --git a/src/components/Folder/PdfViewer.tsx b/src/components/Folder/PdfViewer.tsx
new file mode 100644
index 000000000..f37b9b216
--- /dev/null
+++ b/src/components/Folder/PdfViewer.tsx
@@ -0,0 +1,133 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { Document, Page, pdfjs } from 'react-pdf';
+import 'react-pdf/dist/Page/AnnotationLayer.css';
+import 'react-pdf/dist/Page/TextLayer.css';
+
+// Configure PDF.js worker in the same module where we use Document/Page
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.min.mjs',
+  import.meta.url
+).toString();
+
+const DEFAULT_PAGE_HEIGHT = 1056;
+
+interface LazyPageProps {
+  pageNumber: number;
+  width: number | undefined;
+}
+
+const LazyPage = memo(function LazyPage({ pageNumber, width }: LazyPageProps) {
+  const [visible, setVisible] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: '200px' }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div ref={ref}>
+      {visible ? (
+        <Page
+          pageNumber={pageNumber}
+          width={width}
+          className="mb-4 shadow-md"
+        />
+      ) : (
+        <div
+          className="bg-background-secondary mb-4"
+          style={{ height: width ? width * 1.414 : DEFAULT_PAGE_HEIGHT }}
+        />
+      )}
+    </div>
+  );
+});
+
+interface PdfViewerProps {
+  /** data URL (data:application/pdf;base64,...) or file path */
+  content: string;
+}
+
+export default function PdfViewer({ content }: PdfViewerProps) {
+  const [numPages, setNumPages] = useState<number>(0);
+  const [containerWidth, setContainerWidth] = useState<number>(0);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const onDocumentLoadSuccess = useCallback(
+    ({ numPages }: { numPages: number }) => {
+      setNumPages(numPages);
+      setLoadError(null);
+    },
+    []
+  );
+
+  const onDocumentLoadError = useCallback((error: Error) => {
+    console.error('Failed to load PDF document:', error);
+    setLoadError(error.message ?? 'Failed to load PDF.');
+  }, []);
+
+  useEffect(() => {
+    const node = containerRef.current;
+    if (!node) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerWidth(entry.contentRect.width);
+      }
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div ref={containerRef} className="flex flex-col items-center gap-4">
+      {loadError ? (
+        <div className="flex flex-col items-center justify-center gap-2 py-12 text-text-secondary">
+          <p className="text-sm font-medium">Failed to load PDF</p>
+          <p className="max-w-xs text-center text-xs text-text-tertiary">
+            {loadError}
+          </p>
+        </div>
+      ) : (
+        <Document
+          file={content}
+          onLoadSuccess={onDocumentLoadSuccess}
+          onLoadError={onDocumentLoadError}
+        >
+          {Array.from({ length: numPages }, (_, index) => (
+            <LazyPage
+              key={`page_${index + 1}`}
+              pageNumber={index + 1}
+              width={containerWidth || undefined}
+            />
+          ))}
+        </Document>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Folder/index.tsx b/src/components/Folder/index.tsx
index 3bbcb0971..65e296b52 100644
--- a/src/components/Folder/index.tsx
+++ b/src/components/Folder/index.tsx
@@ -30,9 +30,11 @@ import {
   Search,
   SquareTerminal,
 } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { lazy, Suspense, useEffect, useRef, useState } from 'react';
 import FolderComponent from './FolderComponent';
 
+const PdfViewer = lazy(() => import('./PdfViewer'));
+
 import { proxyFetchGet } from '@/api/http';
 import { MarkDown } from '@/components/ChatBox/MessageItem/MarkDown';
 import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
@@ -709,12 +711,12 @@ export default function Folder({ data: _data }: { data?: Agent }) {
           className={`flex min-h-0 flex-1 flex-col ${selectedFile?.type === 'html' && !isShowSourceCode ? 'overflow-hidden' : 'scrollbar overflow-y-auto'}`}
         >
           <div
-            className={`flex min-h-full flex-col ${selectedFile?.type === 'html' && !isShowSourceCode ? '' : 'p-6'} file-viewer-content`}
+            className={`flex min-h-full flex-col ${selectedFile?.type === 'html' && !isShowSourceCode ? 'h-full' : ''} ${selectedFile?.type === 'html' && !isShowSourceCode ? '' : 'p-6'} file-viewer-content`}
           >
             {selectedFile ? (
               !loading ? (
                 selectedFile.type === 'md' && !isShowSourceCode ? (
-                  <div className="prose prose-sm max-w-none">
+                  <div className="prose prose-sm max-w-none overflow-hidden">
                     <MarkDown
                       content={selectedFile.content || ''}
                       enableTypewriter={false}
@@ -726,11 +728,15 @@ export default function Folder({ data: _data }: { data?: Agent }) {
                     />
                   </div>
                 ) : selectedFile.type === 'pdf' ? (
-                  <iframe
-                    src={selectedFile.content as string}
-                    className="h-full w-full border-0"
-                    title={selectedFile.name}
-                  />
+                  <Suspense
+                    fallback={
+                      <div className="flex h-full items-center justify-center">
+                        <div className="mx-auto h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600" />
+                      </div>
+                    }
+                  >
+                    <PdfViewer content={selectedFile.content as string} />
+                  </Suspense>
                 ) : ['csv', 'doc', 'docx', 'pptx', 'xlsx'].includes(
                     selectedFile.type
                   ) ? (
diff --git a/test/unit/components/Folder/FileTree.test.tsx b/test/unit/components/Folder/FileTree.test.tsx
index 0844e8e6b..d93919cbb 100644
--- a/test/unit/components/Folder/FileTree.test.tsx
+++ b/test/unit/components/Folder/FileTree.test.tsx
@@ -15,6 +15,15 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+// Mock PdfViewer to avoid pdfjs-dist requiring DOMMatrix in jsdom.
+// PdfViewer is lazy-loaded (React.lazy) in index.tsx, but vi.mock still
+// intercepts the dynamic import so the real pdfjs worker is never loaded
+// during unit tests.
+vi.mock('../../../../src/components/Folder/PdfViewer', () => ({
+  default: () => <div data-testid="pdf-viewer-mock" />,
+}));
+
 import { FileTree } from '../../../../src/components/Folder/index';
 
 describe('FileTree', () => {
diff --git a/test/unit/components/Folder/LongFileScroll.test.tsx b/test/unit/components/Folder/LongFileScroll.test.tsx
new file mode 100644
index 000000000..f3c1e5665
--- /dev/null
+++ b/test/unit/components/Folder/LongFileScroll.test.tsx
@@ -0,0 +1,223 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+// Must be mocked before importing Folder to avoid pdfjs-dist/jsdom issues.
+// PdfViewer is lazy-loaded, so this mock prevents the dynamic import from
+// pulling in the real pdfjs worker during unit tests.
+vi.mock('../../../../src/components/Folder/PdfViewer', () => ({
+  default: () => <div data-testid="pdf-viewer-mock" />,
+}));
+
+// Mock heavy deps that Folder pulls in transitively
+vi.mock('../../../../src/hooks/useChatStoreAdapter', () => ({
+  default: () => ({
+    chatStore: {
+      activeProjectId: 'proj-1',
+      taskId: null,
+      workforce: null,
+    },
+    projectStore: { projects: [] },
+  }),
+}));
+
+vi.mock('../../../../src/store/authStore', () => ({
+  useAuthStore: () => ({ token: 'test-token', userInfo: { id: '1' } }),
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+vi.mock('../../../../src/api/http', () => ({
+  proxyFetchGet: vi.fn(),
+}));
+
+// ---------------------------------------------------------------------------
+// Helper: build a minimal className string that mirrors what Folder produces
+// for the outer scroll container and inner wrapper depending on file type.
+// ---------------------------------------------------------------------------
+
+/**
+ * Returns the className for the outer content div exactly as Folder computes
+ * it. Keeping it in-sync with index.tsx is intentional — any regression in
+ * the production code will break this test.
+ */
+function outerClassName(isHtml: boolean, isShowSourceCode: boolean): string {
+  return `flex min-h-0 flex-1 flex-col ${
+    isHtml && !isShowSourceCode
+      ? 'overflow-hidden'
+      : 'scrollbar overflow-y-auto'
+  }`;
+}
+
+/**
+ * Returns the className for the inner wrapper div exactly as Folder computes
+ * it.
+ */
+function innerClassName(isHtml: boolean, isShowSourceCode: boolean): string {
+  const hFull = isHtml && !isShowSourceCode ? 'h-full' : '';
+  const padding = isHtml && !isShowSourceCode ? '' : 'p-6';
+  return `flex min-h-full flex-col ${hFull} ${padding} file-viewer-content`
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+describe('Issue #1374: Long files in Agent Folder are scrollable', () => {
+  // ---------------------------------------------------------------------------
+  // Outer scroll container
+  // ---------------------------------------------------------------------------
+
+  describe('outer content container classNames', () => {
+    it('uses scrollbar + overflow-y-auto for markdown files (not overflow-hidden)', () => {
+      const cls = outerClassName(false, false);
+      expect(cls).toContain('scrollbar');
+      expect(cls).toContain('overflow-y-auto');
+      expect(cls).not.toContain('overflow-hidden');
+    });
+
+    it('uses scrollbar + overflow-y-auto for pdf files', () => {
+      const cls = outerClassName(false, false);
+      expect(cls).toContain('scrollbar');
+      expect(cls).toContain('overflow-y-auto');
+    });
+
+    it('uses overflow-hidden (not scrollbar) for html files in preview mode', () => {
+      const cls = outerClassName(true, false);
+      expect(cls).toContain('overflow-hidden');
+      expect(cls).not.toContain('scrollbar');
+      expect(cls).not.toContain('overflow-y-auto');
+    });
+
+    it('uses scrollbar + overflow-y-auto for html files when showing source', () => {
+      const cls = outerClassName(true, true);
+      expect(cls).toContain('scrollbar');
+      expect(cls).toContain('overflow-y-auto');
+      expect(cls).not.toContain('overflow-hidden');
+    });
+
+    it('does NOT use scrollbar-always-visible (replaced by scrollbar)', () => {
+      // scrollbar-always-visible was the pre-fix class that caused the maintainer
+      // concern about the always-visible scrollbar on macOS overlay-scrollbar systems.
+      const nonHtmlCls = outerClassName(false, false);
+      expect(nonHtmlCls).not.toContain('scrollbar-always-visible');
+
+      const htmlSourceCls = outerClassName(true, true);
+      expect(htmlSourceCls).not.toContain('scrollbar-always-visible');
+    });
+  });
+
+  // ---------------------------------------------------------------------------
+  // Inner wrapper (file-viewer-content)
+  // ---------------------------------------------------------------------------
+
+  describe('inner wrapper (file-viewer-content) classNames', () => {
+    it('does NOT include h-full for markdown files, allowing content to grow', () => {
+      const cls = innerClassName(false, false);
+      // Trim so that the "h-full" check is not accidentally matched by some
+      // other class like "min-h-full" — use a word-boundary aware check.
+      const parts = cls.split(/\s+/);
+      expect(parts).not.toContain('h-full');
+    });
+
+    it('includes p-6 padding for non-html file types', () => {
+      const cls = innerClassName(false, false);
+      expect(cls).toContain('p-6');
+    });
+
+    it('includes h-full for html preview mode (needed for iframe height)', () => {
+      const cls = innerClassName(true, false);
+      const parts = cls.split(/\s+/);
+      expect(parts).toContain('h-full');
+    });
+
+    it('does NOT include h-full when showing html source code', () => {
+      const cls = innerClassName(true, true);
+      const parts = cls.split(/\s+/);
+      expect(parts).not.toContain('h-full');
+    });
+
+    it('always includes file-viewer-content class', () => {
+      expect(innerClassName(false, false)).toContain('file-viewer-content');
+      expect(innerClassName(true, false)).toContain('file-viewer-content');
+      expect(innerClassName(true, true)).toContain('file-viewer-content');
+    });
+  });
+
+  // ---------------------------------------------------------------------------
+  // MarkDown component — overflow-hidden is back on .markdown-body and the
+  // folder view wraps it in its own overflow-hidden div so long content
+  // scrolls via the parent scrollbar, not through the markdown body itself.
+  // ---------------------------------------------------------------------------
+
+  describe('MarkDown wrapper in folder view', () => {
+    it('renders .markdown-body with overflow-hidden restored (global MarkDown safety)', async () => {
+      const { MarkDown } =
+        await import('../../../../src/components/ChatBox/MessageItem/MarkDown');
+
+      const { container } = render(
+        <MarkDown content="## Hello\n\nWorld" enableTypewriter={false} />
+      );
+
+      const markdownBody = container.querySelector('.markdown-body');
+      expect(markdownBody).not.toBeNull();
+      // overflow-hidden has been restored on the component itself; the folder
+      // applies its own prose wrapper with overflow-hidden to contain the content
+      // while the parent scroll container provides the actual scrolling.
+      expect(markdownBody!.className).toContain('overflow-hidden');
+    });
+
+    it('folder prose wrapper carries overflow-hidden, outer container scrolls', () => {
+      // Simulate the exact DOM structure Folder renders for a markdown file:
+      //   <div class="...scrollbar overflow-y-auto">         ← outer scrollable
+      //     <div class="...p-6 file-viewer-content">
+      //       <div class="prose prose-sm max-w-none overflow-hidden">  ← NEW wrapper
+      //         <MarkDown ... />
+      //       </div>
+      //     </div>
+      //   </div>
+      const { container } = render(
+        <div
+          className="scrollbar flex min-h-0 flex-1 flex-col overflow-y-auto"
+          data-testid="outer-scroll"
+        >
+          <div className="file-viewer-content flex min-h-full flex-col p-6">
+            <div className="prose prose-sm max-w-none overflow-hidden">
+              {/* MarkDown content rendered here in production */}
+              <div className="markdown-body max-w-none overflow-hidden">
+                <p>content</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+
+      const outer = container.querySelector('[data-testid="outer-scroll"]');
+      expect(outer!.className).toContain('overflow-y-auto');
+      expect(outer!.className).toContain('scrollbar');
+      expect(outer!.className).not.toContain('overflow-hidden');
+
+      const proseWrapper = container.querySelector(
+        '.prose.prose-sm.max-w-none'
+      );
+      expect(proseWrapper!.className).toContain('overflow-hidden');
+
+      const fileViewerContent = container.querySelector('.file-viewer-content');
+      const parts = fileViewerContent!.className.split(/\s+/);
+      expect(parts).not.toContain('h-full');
+    });
+  });
+});