feat: search file

client/src/api/plugins/kb.ts

@@ -36,8 +36,8 @@ export const putKbById = (data: KbUpdateParams) => PUT(`/plugins/kb/update`, dat
 export const delKbById = (id: string) => DELETE(`/plugins/kb/delete?id=${id}`);
 
 /* kb file */
-export const getKbFiles = (kbId: string) =>
-  GET<KbFileItemType[]>(`/plugins/kb/file/list`, { kbId });
+export const getKbFiles = (data: { kbId: string; searchText: string }) =>
+  GET<KbFileItemType[]>(`/plugins/kb/file/list`, data);
 export const deleteKbFileById = (params: { fileId: string; kbId: string }) =>
   DELETE(`/plugins/kb/file/delFileByFileId`, params);
 export const getFileInfoById = (fileId: string) =>

client/src/pages/api/plugins/kb/file/list.ts

@@ -12,7 +12,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
   try {
     await connectToDatabase();
 
-    const { kbId } = req.query as { kbId: string };
+    let { kbId, searchText } = req.query as { kbId: string; searchText: string };
+    searchText = searchText.replace(/'/g, '');
+
     // 凭证校验
     const { userId } = await authUser({ req, authToken: true });
 
@@ -20,7 +22,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
     const bucket = gridFs.GridFSBucket();
 
     const files = await bucket
-      .find({ ['metadata.kbId']: kbId })
+      .find({ ['metadata.kbId']: kbId, ...(searchText && { filename: { $regex: searchText } }) })
       .sort({ _id: -1 })
       .toArray();
 

client/src/pages/kb/detail/components/FileCard.tsx

@@ -42,10 +42,19 @@ const FileCard = ({ kbId }: { kbId: string }) => {
     data: files = [],
     refetch,
     isInitialLoading
-  } = useQuery(['getFiles', kbId], () => getKbFiles(kbId), {
+  } = useQuery(['getFiles', kbId], () => getKbFiles({ kbId, searchText }), {
     refetchInterval: 6000,
     refetchOnWindowFocus: true
   });
+
+  const debounceRefetch = useCallback(
+    debounce(() => {
+      refetch();
+      lastSearch.current = searchText;
+    }, 300),
+    []
+  );
+
   const formatFiles = useMemo(
     () =>
       files.map((file) => ({
@@ -99,6 +108,7 @@ const FileCard = ({ kbId }: { kbId: string }) => {
             value={searchText}
             onChange={(e) => {
               setSearchText(e.target.value);
+              debounceRefetch();
             }}
             onBlur={() => {
               if (searchText === lastSearch.current) return;
@@ -144,11 +154,13 @@ const FileCard = ({ kbId }: { kbId: string }) => {
                   })
                 }
               >
-                <Td display={'flex'} alignItems={'center'}>
-                  <Image src={file.icon} w={'16px'} mr={2} alt={''} />
-                  <Box maxW={['300px', '400px']} className="textEllipsis">
-                    {t(file.filename)}
-                  </Box>
+                <Td>
+                  <Flex alignItems={'center'}>
+                    <Image src={file.icon} w={'16px'} mr={2} alt={''} />
+                    <Box maxW={['300px', '400px']} className="textEllipsis">
+                      {t(file.filename)}
+                    </Box>
+                  </Flex>
                 </Td>
                 <Td fontSize={'md'} fontWeight={'bold'}>
                   {file.chunkLength}