From 0d7022026b52cc8258978c87be9b7a40ef05ec38 Mon Sep 17 00:00:00 2001
From: archer <545436317@qq.com>
Date: Mon, 14 Aug 2023 10:15:57 +0800
Subject: [PATCH] fix: file selector

---
 .../pages/kb/detail/components/Import/Chunk.tsx   | 15 +++++++++++----
 .../src/pages/kb/detail/components/Import/Csv.tsx | 13 ++++++++++---
 .../src/pages/kb/detail/components/Import/QA.tsx  | 13 ++++++++++---
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/client/src/pages/kb/detail/components/Import/Chunk.tsx b/client/src/pages/kb/detail/components/Import/Chunk.tsx
index 64092ca59..a010e5194 100644
--- a/client/src/pages/kb/detail/components/Import/Chunk.tsx
+++ b/client/src/pages/kb/detail/components/Import/Chunk.tsx
@@ -202,7 +202,14 @@ const ChunkImport = ({ kbId }: { kbId: string }) => {
 
   return (
     <Box display={['block', 'flex']} h={['auto', '100%']}>
-      <Box flex={1} minW={['auto', '400px']} w={['100%', 0]} p={[4, 8]}>
+      <Flex
+        flexDirection={'column'}
+        flex={'1 0 0'}
+        h={'100%'}
+        minW={['auto', '400px']}
+        w={['100%', 0]}
+        p={[4, 8]}
+      >
         <FileSelect
           fileExtension={fileExtension}
           onSelectFile={onSelectFile}
@@ -212,7 +219,7 @@ const ChunkImport = ({ kbId }: { kbId: string }) => {
 
         {!emptyFiles && (
           <>
-            <Box py={4} maxH={'400px'}>
+            <Box py={4} px={2} maxH={'400px'} overflow={'auto'}>
               {files.map((item) => (
                 <Flex
                   key={item.id}
@@ -314,7 +321,7 @@ const ChunkImport = ({ kbId }: { kbId: string }) => {
             </Flex>
           </>
         )}
-      </Box>
+      </Flex>
       {!emptyFiles && (
         <Box flex={'2 0 0'} w={['100%', 0]} h={'100%'}>
           {previewFile ? (
@@ -373,7 +380,7 @@ const ChunkImport = ({ kbId }: { kbId: string }) => {
                 {files.map((file) =>
                   file.chunks.map((item, i) => (
                     <Box
-                      key={item}
+                      key={i}
                       py={4}
                       bg={'myWhite.500'}
                       my={2}
diff --git a/client/src/pages/kb/detail/components/Import/Csv.tsx b/client/src/pages/kb/detail/components/Import/Csv.tsx
index 231d61b94..81d920866 100644
--- a/client/src/pages/kb/detail/components/Import/Csv.tsx
+++ b/client/src/pages/kb/detail/components/Import/Csv.tsx
@@ -133,7 +133,14 @@ const CsvImport = ({ kbId }: { kbId: string }) => {
 
   return (
     <Box display={['block', 'flex']} h={['auto', '100%']}>
-      <Box flex={1} minW={['auto', '400px']} w={['100%', 0]} p={[4, 8]}>
+      <Flex
+        flexDirection={'column'}
+        flex={'1 0 0'}
+        h={'100%'}
+        minW={['auto', '400px']}
+        w={['100%', 0]}
+        p={[4, 8]}
+      >
         <FileSelect
           fileExtension={fileExtension}
           onSelectFile={onSelectFile}
@@ -147,7 +154,7 @@ const CsvImport = ({ kbId }: { kbId: string }) => {
 
         {!emptyFiles && (
           <>
-            <Box py={4} maxH={'400px'}>
+            <Box py={4} px={2} maxH={'400px'} overflow={'auto'}>
               {files.map((item) => (
                 <Flex
                   key={item.id}
@@ -193,7 +200,7 @@ const CsvImport = ({ kbId }: { kbId: string }) => {
             </Flex>
           </>
         )}
-      </Box>
+      </Flex>
       {!emptyFiles && (
         <Box flex={'2 0 0'} w={['100%', 0]} h={'100%'} pt={[4, 8]} overflow={'overlay'}>
           <Box px={[4, 8]} fontSize={['lg', 'xl']} fontWeight={'bold'}>
diff --git a/client/src/pages/kb/detail/components/Import/QA.tsx b/client/src/pages/kb/detail/components/Import/QA.tsx
index dc57f07cb..5cb1fa32c 100644
--- a/client/src/pages/kb/detail/components/Import/QA.tsx
+++ b/client/src/pages/kb/detail/components/Import/QA.tsx
@@ -193,7 +193,14 @@ const QAImport = ({ kbId }: { kbId: string }) => {
 
   return (
     <Box display={['block', 'flex']} h={['auto', '100%']}>
-      <Box flex={1} minW={['auto', '400px']} w={['100%', 0]} p={[4, 8]}>
+      <Flex
+        flexDirection={'column'}
+        flex={'1 0 0'}
+        h={'100%'}
+        minW={['auto', '400px']}
+        w={['100%', 0]}
+        p={[4, 8]}
+      >
         <FileSelect
           fileExtension={fileExtension}
           onSelectFile={onSelectFile}
@@ -203,7 +210,7 @@ const QAImport = ({ kbId }: { kbId: string }) => {
 
         {!emptyFiles && (
           <>
-            <Box py={4} maxH={'400px'}>
+            <Box py={4} px={2} maxH={'400px'} overflow={'auto'}>
               {files.map((item) => (
                 <Flex
                   key={item.id}
@@ -295,7 +302,7 @@ const QAImport = ({ kbId }: { kbId: string }) => {
             </Flex>
           </>
         )}
-      </Box>
+      </Flex>
       {!emptyFiles && (
         <Box flex={'2 0 0'} w={['100%', 0]} h={'100%'}>
           {previewFile ? (