Fix: Prevent Duplicate Retrieval Requests on Knowledge Testing (#8683)

### What problem does this PR solve?

Previously, when testing knowledge retrieval and clicking the test
button, the component would trigger two API requests instead of one.
This led to redundant network calls and inconsistent results being
displayed.

Before:


![image](https://github.com/user-attachments/assets/530d9a97-04f7-4db4-8489-0a7b67c78194)

After:


![image](https://github.com/user-attachments/assets/d17caf18-a6b1-46bc-b077-d81de0a73818)


### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/add-knowledge/components/knowledge-testing/index.tsx

@@ -3,33 +3,50 @@ import {
   useTestChunkRetrieval,
 } from '@/hooks/knowledge-hooks';
 import { Flex, Form } from 'antd';
+import { useMemo, useState } from 'react';
 import TestingControl from './testing-control';
 import TestingResult from './testing-result';
 
-import { useState } from 'react';
 import styles from './index.less';
 
 const KnowledgeTesting = () => {
   const [form] = Form.useForm();
-  const { testChunk } = useTestChunkRetrieval();
-  const { testChunkAll } = useTestChunkAllRetrieval();
+  const {
+    data: retrievalData,
+    testChunk,
+    loading: retrievalLoading,
+  } = useTestChunkRetrieval();
+  const {
+    data: allRetrievalData,
+    testChunkAll,
+    loading: allRetrievalLoading,
+  } = useTestChunkAllRetrieval();
   const [selectedDocumentIds, setSelectedDocumentIds] = useState<string[]>([]);
 
   const handleTesting = async (documentIds: string[] = []) => {
     const values = await form.validateFields();
-    testChunk({
+    const params = {
       ...values,
-      doc_ids: Array.isArray(documentIds) ? documentIds : [],
       vector_similarity_weight: 1 - values.vector_similarity_weight,
-    });
+    };
 
-    testChunkAll({
-      ...values,
-      doc_ids: [],
-      vector_similarity_weight: 1 - values.vector_similarity_weight,
-    });
+    if (Array.isArray(documentIds) && documentIds.length > 0) {
+      testChunk({
+        ...params,
+        doc_ids: documentIds,
+      });
+    } else {
+      testChunkAll({
+        ...params,
+        doc_ids: [],
+      });
+    }
   };
 
+  const testingResult = useMemo(() => {
+    return selectedDocumentIds.length > 0 ? retrievalData : allRetrievalData;
+  }, [allRetrievalData, retrievalData, selectedDocumentIds.length]);
+
   return (
     <Flex className={styles.testingWrapper} gap={16}>
       <TestingControl
@@ -38,6 +55,8 @@ const KnowledgeTesting = () => {
         selectedDocumentIds={selectedDocumentIds}
       ></TestingControl>
       <TestingResult
+        data={testingResult}
+        loading={retrievalLoading || allRetrievalLoading}
         handleTesting={handleTesting}
         selectedDocumentIds={selectedDocumentIds}
         setSelectedDocumentIds={setSelectedDocumentIds}

web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx

@@ -1,6 +1,6 @@
 import { ReactComponent as SelectedFilesCollapseIcon } from '@/assets/svg/selected-files-collapse.svg';
 import { useTranslate } from '@/hooks/common-hooks';
-import { ITestingChunk } from '@/interfaces/database/knowledge';
+import { ITestingChunk, ITestingResult } from '@/interfaces/database/knowledge';
 import {
   Card,
   Collapse,
@@ -14,12 +14,6 @@ import {
 import camelCase from 'lodash/camelCase';
 import SelectFiles from './select-files';
 
-import {
-  useAllTestingResult,
-  useAllTestingSuccess,
-  useSelectIsTestingSuccess,
-  useSelectTestingResult,
-} from '@/hooks/knowledge-hooks';
 import { useGetPaginationWithRouter } from '@/hooks/logic-hooks';
 import { api_host } from '@/utils/api';
 import { showImage } from '@/utils/chat';
@@ -52,19 +46,20 @@ interface IProps {
   handleTesting: (documentIds?: string[]) => Promise<any>;
   selectedDocumentIds: string[];
   setSelectedDocumentIds: (ids: string[]) => void;
+  data?: ITestingResult;
+  loading?: boolean;
 }
 
 const TestingResult = ({
   handleTesting,
   selectedDocumentIds,
   setSelectedDocumentIds,
+  data,
+  loading,
 }: IProps) => {
-  const { documents, chunks, total } = useSelectTestingResult();
-  const { documents: documentsAll, total: totalAll } = useAllTestingResult();
+  const { documents, chunks, total } = data || {};
   const { t } = useTranslate('knowledgeDetails');
   const { pagination, setPagination } = useGetPaginationWithRouter();
-  const isSuccess = useSelectIsTestingSuccess();
-  const isAllSuccess = useAllTestingSuccess();
 
   const onChange: PaginationProps['onChange'] = (pageNumber, pageSize) => {
     pagination.onChange?.(pageNumber, pageSize);
@@ -97,8 +92,7 @@ const TestingResult = ({
               >
                 <Space>
                   <span>
-                    {selectedDocumentIds?.length ?? 0}/
-                    {documentsAll?.length ?? 0}
+                    {selectedDocumentIds?.length ?? 0}/{documents?.length ?? 0}
                   </span>
                   {t('filesSelected')}
                 </Space>
@@ -121,7 +115,7 @@ const TestingResult = ({
         flex={1}
         className={styles.selectFilesCollapse}
       >
-        {isSuccess && chunks.length > 0 ? (
+        {loading === false && chunks && chunks.length > 0 ? (
           chunks?.map((x) => (
             <Card key={x.chunk_id} title={<ChunkTitle item={x}></ChunkTitle>}>
               <div className="flex justify-center">
@@ -136,7 +130,7 @@ const TestingResult = ({
               <div className="pt-4">{x.content_with_weight}</div>
             </Card>
           ))
-        ) : isSuccess && chunks.length === 0 ? (
+        ) : loading === false && chunks && chunks.length === 0 ? (
           <Empty></Empty>
         ) : null}
       </Flex>