From 789ae87727c52aa0d20c79303f549cae827a864d Mon Sep 17 00:00:00 2001
From: cutiechi <superchijinpeng@gmail.com>
Date: Mon, 7 Jul 2025 13:07:34 +0800
Subject: [PATCH] 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)
---
 .../components/knowledge-testing/index.tsx    | 41 ++++++++++++++-----
 .../testing-result/index.tsx                  | 24 ++++-------
 2 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/index.tsx b/web/src/pages/add-knowledge/components/knowledge-testing/index.tsx
index d7140c926..531941d30 100644
--- a/web/src/pages/add-knowledge/components/knowledge-testing/index.tsx
+++ b/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}
diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx b/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx
index a8b95926e..02481cc9e 100644
--- a/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx
+++ b/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>