feat: add support doc extract file types

web/app/components/workflow/nodes/document-extractor/panel.tsx

@@ -1,12 +1,18 @@
 import type { FC } from 'react'
 import React from 'react'
+import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
 import VarReferencePicker from '../_base/components/variable/var-reference-picker'
 import OutputVars, { VarItem } from '../_base/components/output-vars'
+import Split from '../_base/components/split'
 import useConfig from './use-config'
 import type { DocExtractorNodeType } from './types'
+import { fetchSupportFileTypes } from '@/service/datasets'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import { type NodePanelProps } from '@/app/components/workflow/types'
+import I18n from '@/context/i18n'
+import { LanguagesSupported } from '@/i18n/language'
 
 const i18nPrefix = 'workflow.nodes.docExtractor'
 
@@ -15,7 +21,25 @@ const Panel: FC<NodePanelProps<DocExtractorNodeType>> = ({
   data,
 }) => {
   const { t } = useTranslation()
+  const { locale } = useContext(I18n)
 
+  const { data: supportFileTypesResponse } = useSWR({ url: '/files/support-type' }, fetchSupportFileTypes)
+  const supportTypes = supportFileTypesResponse?.allowed_extensions || []
+  const supportTypesShowNames = (() => {
+    const extensionMap: { [key: string]: string } = {
+      md: 'markdown',
+      pptx: 'pptx',
+      htm: 'html',
+      xlsx: 'xlsx',
+      docx: 'docx',
+    }
+
+    return [...supportTypes]
+      .map(item => extensionMap[item] || item) // map to standardized extension
+      .map(item => item.toLowerCase()) // convert to lower case
+      .filter((item, index, self) => self.indexOf(item) === index) // remove duplicates
+      .join(locale !== LanguagesSupported[1] ? ', ' : '、 ')
+  })()
   const {
     readOnly,
     inputs,
@@ -29,17 +53,24 @@ const Panel: FC<NodePanelProps<DocExtractorNodeType>> = ({
         <Field
           title={t(`${i18nPrefix}.inputVar`)}
         >
-          <VarReferencePicker
+          <>
-            readonly={readOnly}
+            <VarReferencePicker
-            nodeId={id}
+              readonly={readOnly}
-            isShowNodeName
+              nodeId={id}
-            value={inputs.variable_selector || []}
+              isShowNodeName
-            onChange={handleVarChanges}
+              value={inputs.variable_selector || []}
-            filterVar={filterVar}
+              onChange={handleVarChanges}
-            typePlaceHolder='File | Array[File]'
+              filterVar={filterVar}
-          />
+              typePlaceHolder='File | Array[File]'
+            />
+            <div className='mt-1 py-0.5 text-text-tertiary body-xs-regular'>
+              {t(`${i18nPrefix}.supportFileTypes`, { types: supportTypesShowNames })}
+              <a className='text-text-accent'>{t(`${i18nPrefix}.learnMore`)}</a>
+            </div>
+          </>
         </Field>
       </div>
+      <Split />
       <div className='px-4 pt-4 pb-2'>
         <OutputVars>
           <VarItem

web/i18n/en-US/workflow.ts

@@ -577,6 +577,8 @@ const translation = {
       outputVars: {
         text: 'Extracted text',
       },
+      supportFileTypes: 'Support file types: {{types}}.',
+      learnMore: 'Learn more',
     },
     listFilter: {
       inputVar: 'Input Variable',

web/i18n/zh-Hans/workflow.ts

@@ -577,6 +577,8 @@ const translation = {
       outputVars: {
         text: '提取的文本',
       },
+      supportFileTypes: '支持的文件类型: {{types}}。',
+      learnMore: '了解更多',
     },
     listFilter: {
       inputVar: '输入变量',