diff --git a/web/app/components/workflow/skill/file-content-panel.tsx b/web/app/components/workflow/skill/file-content-panel.tsx
index 7e207b183f..c6e101ac59 100644
--- a/web/app/components/workflow/skill/file-content-panel.tsx
+++ b/web/app/components/workflow/skill/file-content-panel.tsx
@@ -31,6 +31,11 @@ const SQLiteFilePreview = dynamic(
   { ssr: false, loading: () => <Loading type="area" /> },
 )
 
+const PdfFilePreview = dynamic(
+  () => import('./viewer/pdf-file-preview'),
+  { ssr: false, loading: () => <Loading type="area" /> },
+)
+
 if (typeof window !== 'undefined')
   loader.config({ paths: { vs: `${window.location.origin}${basePath}/vs` } })
 
@@ -56,7 +61,7 @@ const FileContentPanel = () => {
 
   const currentFileNode = fileTabId ? nodeMap?.get(fileTabId) : undefined
 
-  const { isMarkdown, isCodeOrText, isImage, isVideo, isSQLite, isEditable, isPreviewable } = useFileTypeInfo(currentFileNode)
+  const { isMarkdown, isCodeOrText, isImage, isVideo, isPdf, isSQLite, isEditable, isPreviewable } = useFileTypeInfo(currentFileNode)
 
   const { fileContent, downloadUrlData, isLoading, error } = useSkillFileData(appId, fileTabId, isEditable)
 
@@ -255,6 +260,13 @@ const FileContentPanel = () => {
             />
           )
         : null}
+      {isPdf
+        ? (
+            <PdfFilePreview
+              downloadUrl={downloadUrl}
+            />
+          )
+        : null}
       {isUnsupportedFile
         ? (
             <UnsupportedFileDownload