perf: kb test

client/src/pages/kb/components/Test.tsx

@@ -2,19 +2,26 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { Box, Textarea, Button, Flex, useTheme, Grid, Progress } from '@chakra-ui/react';
 import { useKbStore } from '@/store/kb';
 import type { KbTestItemType } from '@/types/plugin';
-import { searchText } from '@/api/plugins/kb';
+import { searchText, getKbDataItemById } from '@/api/plugins/kb';
 import MyIcon from '@/components/Icon';
 import { useRequest } from '@/hooks/useRequest';
 import { useRouter } from 'next/router';
 import { formatTimeToChatTime } from '@/utils/tools';
 import InputDataModal, { type FormData } from './InputDataModal';
+import { useGlobalStore } from '@/store/global';
+import { getErrText } from '@/utils/tools';
+import { useToast } from '@/hooks/useToast';
+import { customAlphabet } from 'nanoid';
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 12);
 
 const Test = () => {
   const { kbId } = useRouter().query as { kbId: string };
   const theme = useTheme();
-  const { kbTestList, pushKbTestItem } = useKbStore();
+  const { toast } = useToast();
+  const { setLoading } = useGlobalStore();
+  const { kbTestList, pushKbTestItem, delKbTestItemById, updateKbItemById } = useKbStore();
   const [inputText, setInputText] = useState('');
-  const [results, setResults] = useState<KbTestItemType['results']>([]);
+  const [kbTestItem, setKbTestItem] = useState<KbTestItemType>();
   const [editData, setEditData] = useState<FormData>();
 
   const kbTestHistory = useMemo(
@@ -25,19 +32,21 @@ const Test = () => {
   const { mutate, isLoading } = useRequest({
     mutationFn: () => searchText({ kbId, text: inputText.trim() }),
     onSuccess(res) {
-      pushKbTestItem({
+      const testItem = {
+        id: nanoid(),
         kbId,
         text: inputText.trim(),
         time: new Date(),
         results: res
-      });
+      };
+      pushKbTestItem(testItem);
       setInputText('');
-      setResults(res);
+      setKbTestItem(testItem);
     }
   });
 
   useEffect(() => {
-    setResults([]);
+    setKbTestItem(undefined);
   }, [kbId]);
 
   return (
@@ -79,28 +88,55 @@ const Test = () => {
             <Flex py={1} fontWeight={'bold'} borderBottom={theme.borders.base}>
               <Box flex={1}>测试文本</Box>
               <Box w={'80px'}>时间</Box>
+              <Box w={'14px'}></Box>
             </Flex>
-            {kbTestHistory.map((item, i) => (
+            {kbTestHistory.map((item) => (
               <Flex
-                key={i}
+                key={item.id}
                 p={1}
+                alignItems={'center'}
                 borderBottom={theme.borders.base}
-                _hover={{ bg: '#f4f4f4' }}
+                _hover={{
+                  bg: '#f4f4f4',
+                  '& .delete': {
+                    display: 'block'
+                  }
+                }}
                 cursor={'pointer'}
-                onClick={() => setResults(item.results)}
+                onClick={() => setKbTestItem(item)}
               >
                 <Box flex={1} mr={2}>
                   {item.text}
                 </Box>
                 <Box w={'80px'}>{formatTimeToChatTime(item.time)}</Box>
+                <Box w={'14px'} h={'14px'}>
+                  <MyIcon
+                    className="delete"
+                    name={'delete'}
+                    w={'14px'}
+                    display={'none'}
+                    _hover={{ color: 'red.600' }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      delKbTestItemById(item.id);
+                      kbTestItem?.id === item.id && setKbTestItem(undefined);
+                    }}
+                  />
+                </Box>
               </Flex>
             ))}
           </Box>
         </Box>
       </Box>
       <Box px={4} pb={4} mt={[8, 0]} h={['auto', '100%']} overflow={'overlay'} flex={1}>
-        {results.length === 0 ? (
-          <Flex h={'100%'} flexDirection={'column'} alignItems={'center'} justifyContent={'center'}>
+        {!kbTestItem?.results || kbTestItem.results.length === 0 ? (
+          <Flex
+            mt={[10, 0]}
+            h={'100%'}
+            flexDirection={'column'}
+            alignItems={'center'}
+            justifyContent={'center'}
+          >
             <MyIcon name={'empty'} color={'transparent'} w={'54px'} />
             <Box mt={3} color={'myGray.600'}>
               测试结果将在这里展示
@@ -108,9 +144,14 @@ const Test = () => {
           </Flex>
         ) : (
           <>
-            <Box fontSize={'3xl'} color={'myGray.600'}>
-              测试结果
-            </Box>
+            <Flex alignItems={'flex-end'}>
+              <Box fontSize={'3xl'} color={'myGray.600'}>
+                测试结果
+              </Box>
+              <Box fontSize={'xs'} color={'myGray.500'} ml={1}>
+                QA内容可能不是最新
+              </Box>
+            </Flex>
             <Grid
               mt={1}
               gridTemplateColumns={[
@@ -122,7 +163,7 @@ const Test = () => {
               ]}
               gridGap={4}
             >
-              {results.map((item) => (
+              {kbTestItem?.results.map((item) => (
                 <Box
                   key={item.id}
                   pb={2}
@@ -131,20 +172,35 @@ const Test = () => {
                   _notLast={{ mb: 2 }}
                   cursor={'pointer'}
                   title={'编辑'}
-                  onClick={() =>
-                    setEditData({
-                      dataId: item.id,
-                      q: item.q,
-                      a: item.a
-                    })
-                  }
+                  onClick={async () => {
+                    try {
+                      setLoading(true);
+                      const data = await getKbDataItemById(item.id);
+
+                      if (!data) {
+                        throw new Error('该数据已被删除');
+                      }
+
+                      setEditData({
+                        dataId: data.id,
+                        q: data.q,
+                        a: data.a
+                      });
+                    } catch (err) {
+                      toast({
+                        status: 'warning',
+                        title: getErrText(err)
+                      });
+                    }
+                    setLoading(false);
+                  }}
                 >
                   <Flex p={3} alignItems={'center'} color={'myGray.500'}>
                     <MyIcon name={'kbTest'} w={'14px'} />
                     <Progress
                       mx={2}
                       flex={1}
-                      value={50}
+                      value={item.score * 100}
                       size="sm"
                       borderRadius={'20px'}
                       colorScheme="gray"
@@ -173,7 +229,37 @@ const Test = () => {
           kbId={kbId}
           defaultValues={editData}
           onClose={() => setEditData(undefined)}
-          onSuccess={() => setEditData(undefined)}
+          onSuccess={(data) => {
+            if (kbTestItem && editData.dataId) {
+              const newTestItem = {
+                ...kbTestItem,
+                results: kbTestItem.results.map((item) =>
+                  item.id === editData.dataId
+                    ? {
+                        ...item,
+                        q: data.q,
+                        a: data.a
+                      }
+                    : item
+                )
+              };
+              updateKbItemById(newTestItem);
+              setKbTestItem(newTestItem);
+            }
+
+            setEditData(undefined);
+          }}
+          onDelete={() => {
+            if (kbTestItem && editData.dataId) {
+              const newTestItem = {
+                ...kbTestItem,
+                results: kbTestItem.results.filter((item) => item.id !== editData.dataId)
+              };
+              updateKbItemById(newTestItem);
+              setKbTestItem(newTestItem);
+            }
+            setEditData(undefined);
+          }}
         />
       )}
     </Box>