feat: integrate file selection and upload functionality in KnowledgeFiles component (#9815)

* feat: integrate file selection and upload functionality in KnowledgeFiles component

- Added useFiles hook to manage file selection.
- Updated handleAddFile to utilize the new file selection logic, allowing multiple file uploads.
- Improved user experience by handling file uploads asynchronously and logging the results.

* feat: enhance file upload interaction in KnowledgeFiles component

- Wrapped Dragger component in a div to allow for custom click handling.
- Prevented default click behavior to improve user experience when adding files.
- Maintained existing file upload functionality while enhancing the UI interaction.

* refactor(KnowledgeFiles): 提取文件处理逻辑到独立函数

将重复的文件上传和处理逻辑提取到独立的processFiles函数中，提高代码复用性和可维护性

---------

Co-authored-by: icarus <eurfelux@gmail.com>

src/renderer/src/pages/knowledge/items/KnowledgeFiles.tsx

@@ -1,5 +1,6 @@
 import { loggerService } from '@logger'
 import Ellipsis from '@renderer/components/Ellipsis'
+import { useFiles } from '@renderer/hooks/useFiles'
 import { useKnowledge } from '@renderer/hooks/useKnowledge'
 import FileItem from '@renderer/pages/files/FileItem'
 import StatusIcon from '@renderer/pages/knowledge/components/StatusIcon'
@@ -48,6 +49,7 @@ const getDisplayTime = (item: KnowledgeItem) => {
 const KnowledgeFiles: FC<KnowledgeContentProps> = ({ selectedBase, progressMap, preprocessMap }) => {
   const { t } = useTranslation()
   const [windowHeight, setWindowHeight] = useState(window.innerHeight)
+  const { onSelectFile, selecting } = useFiles({ extensions: fileTypes })
 
   const { base, fileItems, addFiles, refreshItem, removeItem, getProcessingStatus } = useKnowledge(
     selectedBase.id || ''
@@ -71,19 +73,12 @@ const KnowledgeFiles: FC<KnowledgeContentProps> = ({ selectedBase, progressMap,
     return null
   }
 
-  const handleAddFile = () => {
-    if (disabled) {
+  const handleAddFile = async () => {
+    if (disabled || selecting) {
       return
     }
-    const input = document.createElement('input')
-    input.type = 'file'
-    input.multiple = true
-    input.accept = fileTypes.join(',')
-    input.onchange = (e) => {
-      const files = (e.target as HTMLInputElement).files
-      files && handleDrop(Array.from(files))
-    }
-    input.click()
+    const selectedFiles = await onSelectFile({ multipleSelections: true })
+    processFiles(selectedFiles)
   }
 
   const handleDrop = async (files: File[]) => {
@@ -118,8 +113,14 @@ const KnowledgeFiles: FC<KnowledgeContentProps> = ({ selectedBase, progressMap,
           }
         })
         .filter(({ ext }) => fileTypes.includes(ext))
-      const uploadedFiles = await FileManager.uploadFiles(_files)
-      logger.debug('uploadedFiles', uploadedFiles)
+      processFiles(_files)
+    }
+  }
+
+  const processFiles = async (files: FileMetadata[]) => {
+    logger.debug('processFiles', files)
+    if (files.length > 0) {
+      const uploadedFiles = await FileManager.uploadFiles(files)
       addFiles(uploadedFiles)
     }
   }
@@ -150,16 +151,23 @@ const KnowledgeFiles: FC<KnowledgeContentProps> = ({ selectedBase, progressMap,
       </ItemHeader>
 
       <ItemFlexColumn>
-        <Dragger
-          showUploadList={false}
-          customRequest={({ file }) => handleDrop([file as File])}
-          multiple={true}
-          accept={fileTypes.join(',')}>
-          <p className="ant-upload-text">{t('knowledge.drag_file')}</p>
-          <p className="ant-upload-hint">
-            {t('knowledge.file_hint', { file_types: 'TXT, MD, HTML, PDF, DOCX, PPTX, XLSX, EPUB...' })}
-          </p>
-        </Dragger>
+        <div
+          onClick={(e) => {
+            e.stopPropagation()
+            handleAddFile()
+          }}>
+          <Dragger
+            showUploadList={false}
+            customRequest={({ file }) => handleDrop([file as File])}
+            multiple={true}
+            accept={fileTypes.join(',')}
+            openFileDialogOnClick={false}>
+            <p className="ant-upload-text">{t('knowledge.drag_file')}</p>
+            <p className="ant-upload-hint">
+              {t('knowledge.file_hint', { file_types: 'TXT, MD, HTML, PDF, DOCX, PPTX, XLSX, EPUB...' })}
+            </p>
+          </Dragger>
+        </div>
         {fileItems.length === 0 ? (
           <KnowledgeEmptyView />
         ) : (