feat: unstructured frontend (#1777)

web/app/components/datasets/create/file-uploader/index.tsx

@@ -10,6 +10,8 @@ import { ToastContext } from '@/app/components/base/toast'
 
 import { upload } from '@/service/base'
 import { fetchFileUploadConfig } from '@/service/common'
+import { fetchSupportFileTypes } from '@/service/datasets'
+import I18n from '@/context/i18n'
 
 type IFileUploaderProps = {
   fileList: FileItem[]
@@ -20,18 +22,6 @@ type IFileUploaderProps = {
   onPreview: (file: File) => void
 }
 
-const ACCEPTS = [
-  '.pdf',
-  '.html',
-  '.htm',
-  '.md',
-  '.markdown',
-  '.txt',
-  '.xlsx',
-  '.csv',
-  '.docx',
-]
-
 const FileUploader = ({
   fileList,
   titleClassName,
@@ -42,12 +32,16 @@ const FileUploader = ({
 }: IFileUploaderProps) => {
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
+  const { locale } = useContext(I18n)
   const [dragging, setDragging] = useState(false)
   const dropRef = useRef<HTMLDivElement>(null)
   const dragRef = useRef<HTMLDivElement>(null)
   const fileUploader = useRef<HTMLInputElement>(null)
 
   const { data: fileUploadConfigResponse } = useSWR({ url: '/files/upload' }, fetchFileUploadConfig)
+  const { data: supportFileTypesResponse } = useSWR({ url: '/files/support-type' }, fetchSupportFileTypes)
+  const supportTypes = supportFileTypesResponse?.allowed_extensions || []
+  const ACCEPTS = supportTypes.map((ext: string) => `.${ext}`)
   const fileUploadConfig = useMemo(() => fileUploadConfigResponse ?? {
     file_size_limit: 15,
     batch_count_limit: 5,
@@ -228,14 +222,17 @@ const FileUploader = ({
       <div className={cn(s.title, titleClassName)}>{t('datasetCreation.stepOne.uploader.title')}</div>
       <div ref={dropRef} className={cn(s.uploader, dragging && s.dragging)}>
         <div className='flex justify-center items-center min-h-6 mb-2'>
-          <span className={s.uploadIcon}/>
+          <span className={s.uploadIcon} />
           <span>
             {t('datasetCreation.stepOne.uploader.button')}
             <label className={s.browse} onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.browse')}</label>
           </span>
         </div>
-        <div className={s.tip}>{t('datasetCreation.stepOne.uploader.tip', { size: fileUploadConfig.file_size_limit })}</div>
-        {dragging && <div ref={dragRef} className={s.draggingCover}/>}
+        <div className={s.tip}>{t('datasetCreation.stepOne.uploader.tip', {
+          size: fileUploadConfig.file_size_limit,
+          supportTypes: supportTypes.map(item => item.toUpperCase()).join(locale === 'en' ? ', ' : '、 '),
+        })}</div>
+        {dragging && <div ref={dragRef} className={s.draggingCover} />}
       </div>
       <div className={s.fileList}>
         {fileList.map((fileItem, index) => (
@@ -248,10 +245,10 @@ const FileUploader = ({
             )}
           >
             {fileItem.progress < 100 && (
-              <div className={s.progressbar} style={{ width: `${fileItem.progress}%` }}/>
+              <div className={s.progressbar} style={{ width: `${fileItem.progress}%` }} />
             )}
             <div className={s.fileInfo}>
-              <div className={cn(s.fileIcon, s[getFileType(fileItem.file)])}/>
+              <div className={cn(s.fileIcon, s[getFileType(fileItem.file)])} />
               <div className={s.filename}>{fileItem.file.name}</div>
               <div className={s.size}>{getFileSize(fileItem.file.size)}</div>
             </div>
@@ -263,7 +260,7 @@ const FileUploader = ({
                 <div className={s.remove} onClick={(e) => {
                   e.stopPropagation()
                   removeFile(fileItem.fileID)
-                }}/>
+                }} />
               )}
             </div>
           </div>

web/i18n/lang/dataset-creation.en.ts

@@ -23,7 +23,7 @@ const translation = {
       title: 'Upload text file',
       button: 'Drag and drop file, or',
       browse: 'Browse',
-      tip: 'Supports txt, html, markdown, xlsx, csv, docx and pdf. Max {{size}}MB each.',
+      tip: 'Supports {{supportTypes}}. Max {{size}}MB each.',
       validation: {
         typeError: 'File type not supported',
         size: 'File too large. Maximum is {{size}}MB',

web/i18n/lang/dataset-creation.zh.ts

@@ -23,7 +23,7 @@ const translation = {
       title: '上传文本文件',
       button: '拖拽文件至此，或者',
       browse: '选择文件',
-      tip: '已支持 TXT、 HTML、 Markdown、 PDF、 XLSX、CSV、DOCX，每个文件不超过 {{size}}MB。',
+      tip: '已支持 {{supportTypes}}，每个文件不超过 {{size}}MB。',
       validation: {
         typeError: '文件类型不支持',
         size: '文件太大了，不能超过 {{size}}MB',

web/service/datasets.ts

@@ -214,3 +214,11 @@ export const createApikey: Fetcher<CreateApiKeyResponse, { url: string; body: Re
 export const fetchDatasetApiBaseUrl: Fetcher<{ api_base_url: string }, string> = (url) => {
   return get<{ api_base_url: string }>(url)
 }
+
+type FileTypesRes = {
+  allowed_extensions: string[]
+}
+
+export const fetchSupportFileTypes: Fetcher<FileTypesRes, { url: string }> = ({ url }) => {
+  return get<FileTypesRes>(url)
+}