From cab33d440bf50714820936976f8e72c008bcb6cf Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Mon, 19 Jan 2026 23:39:32 +0800
Subject: [PATCH] refactor(skill): remove Office file special handling, merge
 into unsupported
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove the Office file placeholder that only showed "Preview will be
supported in a future update" without any download option. Office files
(pdf, doc, docx, xls, xlsx, ppt, pptx) now fall through to the generic
"unsupported file" handler which provides a download button.

Removed:
- OfficeFilePlaceholder component
- isOfficeFile function and OFFICE_EXTENSIONS constant
- isOffice flag from useFileTypeInfo hook
- i18n keys for officePlaceholder

This simplifies the file type handling to just three categories:
- Editable: markdown, code, text files → editor
- Previewable: image, video files → media preview
- Everything else: download button
---
 .../skill/editor/office-file-placeholder.tsx    | 17 -----------------
 .../workflow/skill/hooks/use-file-type-info.ts  |  5 +----
 .../workflow/skill/skill-doc-editor.tsx         | 12 +++---------
 .../workflow/skill/utils/file-utils.ts          |  5 -----
 web/i18n/en-US/workflow.json                    |  1 -
 web/i18n/zh-Hans/workflow.json                  |  1 -
 6 files changed, 4 insertions(+), 37 deletions(-)
 delete mode 100644 web/app/components/workflow/skill/editor/office-file-placeholder.tsx

diff --git a/web/app/components/workflow/skill/editor/office-file-placeholder.tsx b/web/app/components/workflow/skill/editor/office-file-placeholder.tsx
deleted file mode 100644
index d9ea429f57..0000000000
--- a/web/app/components/workflow/skill/editor/office-file-placeholder.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { FC } from 'react'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-
-const OfficeFilePlaceholder: FC = () => {
-  const { t } = useTranslation('workflow')
-
-  return (
-    <div className="flex h-full w-full items-center justify-center text-text-tertiary">
-      <span className="system-sm-regular">
-        {t('skillEditor.officePlaceholder')}
-      </span>
-    </div>
-  )
-}
-
-export default React.memo(OfficeFilePlaceholder)
diff --git a/web/app/components/workflow/skill/hooks/use-file-type-info.ts b/web/app/components/workflow/skill/hooks/use-file-type-info.ts
index 95e9ed334a..9495718f04 100644
--- a/web/app/components/workflow/skill/hooks/use-file-type-info.ts
+++ b/web/app/components/workflow/skill/hooks/use-file-type-info.ts
@@ -5,7 +5,6 @@ import {
   isCodeOrTextFile,
   isImageFile,
   isMarkdownFile,
-  isOfficeFile,
   isVideoFile,
 } from '../utils/file-utils'
 
@@ -14,14 +13,13 @@ export type FileTypeInfo = {
   isCodeOrText: boolean
   isImage: boolean
   isVideo: boolean
-  isOffice: boolean
   isEditable: boolean
   isMediaFile: boolean
 }
 
 /**
  * Hook to determine file type information based on file node.
- * Returns flags for markdown, code/text, image, video, office files.
+ * Returns flags for markdown, code/text, image, video files.
  */
 export function useFileTypeInfo(fileNode: AppAssetTreeView | undefined): FileTypeInfo {
   return useMemo(() => {
@@ -36,7 +34,6 @@ export function useFileTypeInfo(fileNode: AppAssetTreeView | undefined): FileTyp
       isCodeOrText: codeOrText,
       isImage: image,
       isVideo: video,
-      isOffice: isOfficeFile(ext),
       isEditable: markdown || codeOrText,
       isMediaFile: image || video,
     }
diff --git a/web/app/components/workflow/skill/skill-doc-editor.tsx b/web/app/components/workflow/skill/skill-doc-editor.tsx
index a56eedc425..b54922906f 100644
--- a/web/app/components/workflow/skill/skill-doc-editor.tsx
+++ b/web/app/components/workflow/skill/skill-doc-editor.tsx
@@ -15,7 +15,6 @@ import { basePath } from '@/utils/var'
 import CodeFileEditor from './editor/code-file-editor'
 import MarkdownFileEditor from './editor/markdown-file-editor'
 import MediaFilePreview from './editor/media-file-preview'
-import OfficeFilePlaceholder from './editor/office-file-placeholder'
 import UnsupportedFileDownload from './editor/unsupported-file-download'
 import { useFileTypeInfo } from './hooks/use-file-type-info'
 import { useSkillAssetNodeMap } from './hooks/use-skill-asset-tree'
@@ -44,7 +43,7 @@ const SkillDocEditor: FC = () => {
 
   const currentFileNode = activeTabId ? nodeMap?.get(activeTabId) : undefined
 
-  const { isMarkdown, isCodeOrText, isImage, isVideo, isOffice, isEditable } = useFileTypeInfo(currentFileNode)
+  const { isMarkdown, isCodeOrText, isImage, isVideo, isEditable } = useFileTypeInfo(currentFileNode)
 
   const { fileContent, downloadUrlData, isLoading, error } = useSkillFileData(appId, activeTabId, isEditable)
 
@@ -150,11 +149,11 @@ const SkillDocEditor: FC = () => {
     )
   }
 
-  // For non-editable files (media, office, unsupported), use download URL
+  // For non-editable files (media, unsupported), use download URL
   const downloadUrl = downloadUrlData?.download_url || ''
   const fileName = currentFileNode?.name || ''
   const fileSize = currentFileNode?.size
-  const isUnsupportedFile = !isMarkdown && !isCodeOrText && !isImage && !isVideo && !isOffice
+  const isUnsupportedFile = !isMarkdown && !isCodeOrText && !isImage && !isVideo
 
   return (
     <div className="h-full w-full overflow-auto bg-components-panel-bg">
@@ -187,11 +186,6 @@ const SkillDocEditor: FC = () => {
             />
           )
         : null}
-      {isOffice
-        ? (
-            <OfficeFilePlaceholder />
-          )
-        : null}
       {isUnsupportedFile
         ? (
             <UnsupportedFileDownload
diff --git a/web/app/components/workflow/skill/utils/file-utils.ts b/web/app/components/workflow/skill/utils/file-utils.ts
index a726ea4cf9..c3b897fbab 100644
--- a/web/app/components/workflow/skill/utils/file-utils.ts
+++ b/web/app/components/workflow/skill/utils/file-utils.ts
@@ -5,7 +5,6 @@ const CODE_EXTENSIONS = ['json', 'yaml', 'yml', 'toml', 'js', 'jsx', 'ts', 'tsx'
 const TEXT_EXTENSIONS = ['txt', 'log', 'ini', 'env']
 const IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'bmp', 'ico']
 const VIDEO_EXTENSIONS = ['mp4', 'mov', 'webm', 'mpeg', 'mpg', 'm4v', 'avi']
-const OFFICE_EXTENSIONS = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx']
 
 export function getFileExtension(name?: string, extension?: string): string {
   if (extension)
@@ -43,10 +42,6 @@ export function isVideoFile(extension: string): boolean {
   return VIDEO_EXTENSIONS.includes(extension)
 }
 
-export function isOfficeFile(extension: string): boolean {
-  return OFFICE_EXTENSIONS.includes(extension)
-}
-
 export function getFileLanguage(name: string): string {
   const extension = name.split('.').pop()?.toLowerCase() ?? ''
 
diff --git a/web/i18n/en-US/workflow.json b/web/i18n/en-US/workflow.json
index 886e5f7bb6..2b4f351fe7 100644
--- a/web/i18n/en-US/workflow.json
+++ b/web/i18n/en-US/workflow.json
@@ -995,7 +995,6 @@
   "singleRun.testRun": "Test Run",
   "singleRun.testRunIteration": "Test Run Iteration",
   "singleRun.testRunLoop": "Test Run Loop",
-  "skillEditor.officePlaceholder": "Preview will be supported in a future update",
   "skillEditor.previewUnavailable": "Preview unavailable",
   "skillEditor.referenceFiles": "Reference files",
   "skillEditor.unsupportedPreview": "This file type is not supported for preview",
diff --git a/web/i18n/zh-Hans/workflow.json b/web/i18n/zh-Hans/workflow.json
index e0ea0debc9..c8217614a6 100644
--- a/web/i18n/zh-Hans/workflow.json
+++ b/web/i18n/zh-Hans/workflow.json
@@ -989,7 +989,6 @@
   "singleRun.testRun": "测试运行",
   "singleRun.testRunIteration": "测试运行迭代",
   "singleRun.testRunLoop": "测试运行循环",
-  "skillEditor.officePlaceholder": "预览功能将在后续版本支持",
   "skillEditor.previewUnavailable": "无法预览",
   "skillEditor.referenceFiles": "引用文件",
   "skillEditor.unsupportedPreview": "该文件类型不支持预览",