From 42e236f464c1edcae7a081c9abd417450f5d3a70 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Fri, 18 Apr 2025 16:29:41 +0800
Subject: [PATCH] Feat: Rendering a search test list with real data #3221
 (#7138)

### What problem does this PR solve?

Feat: Rendering a search test list with real data #3221
### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/hooks/use-knowledge-request.ts        | 11 +++-
 web/src/interfaces/database/knowledge.ts      |  7 +++
 web/src/pages/dataset/testing/index.tsx       | 60 +++++++++++--------
 .../pages/dataset/testing/testing-form.tsx    | 13 +++-
 4 files changed, 60 insertions(+), 31 deletions(-)

diff --git a/web/src/hooks/use-knowledge-request.ts b/web/src/hooks/use-knowledge-request.ts
index e66368d28..3f0931f4f 100644
--- a/web/src/hooks/use-knowledge-request.ts
+++ b/web/src/hooks/use-knowledge-request.ts
@@ -1,3 +1,4 @@
+import { INextTestingResult } from '@/interfaces/database/knowledge';
 import { ITestRetrievalRequestBody } from '@/interfaces/request/knowledge';
 import kbService from '@/services/knowledge-service';
 import { useQuery } from '@tanstack/react-query';
@@ -33,14 +34,18 @@ export const useTestRetrieval = () => {
     data,
     isFetching: loading,
     refetch,
-  } = useQuery<any>({
+  } = useQuery<INextTestingResult>({
     queryKey: [KnowledgeApiAction.TestRetrieval, queryParams],
-    initialData: {},
-    // enabled: !!values?.question && !!knowledgeBaseId,
+    initialData: {
+      chunks: [],
+      doc_aggs: [],
+      total: 0,
+    },
     enabled: false,
     gcTime: 0,
     queryFn: async () => {
       const { data } = await kbService.retrieval_test(queryParams);
+      console.log('🚀 ~ queryFn: ~ data:', data);
       return data?.data ?? {};
     },
   });
diff --git a/web/src/interfaces/database/knowledge.ts b/web/src/interfaces/database/knowledge.ts
index a6a1b65bb..66cc2c9f1 100644
--- a/web/src/interfaces/database/knowledge.ts
+++ b/web/src/interfaces/database/knowledge.ts
@@ -137,6 +137,13 @@ export interface ITestingResult {
   labels?: Record<string, number>;
 }
 
+export interface INextTestingResult {
+  chunks: ITestingChunk[];
+  doc_aggs: ITestingDocument[];
+  total: number;
+  labels?: Record<string, number>;
+}
+
 export type IRenameTag = { fromTag: string; toTag: string };
 
 export interface IKnowledgeGraph {
diff --git a/web/src/pages/dataset/testing/index.tsx b/web/src/pages/dataset/testing/index.tsx
index 992ff0243..bafdd9460 100644
--- a/web/src/pages/dataset/testing/index.tsx
+++ b/web/src/pages/dataset/testing/index.tsx
@@ -1,53 +1,63 @@
-import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { useTranslate } from '@/hooks/common-hooks';
+import { useTestRetrieval } from '@/hooks/use-knowledge-request';
+import { ITestingChunk } from '@/interfaces/database/knowledge';
+import { camelCase } from 'lodash';
 import TestingForm from './testing-form';
 
-const list = new Array(15).fill({
-  content: `Lorem ipsum odor amet, consectetuer adipiscing elit. Ullamcorper vulputate id laoreet malesuada commodo molestie. Lectus convallis class euismod; consequat in curabitur. Ablandit praesent inceptos nibh placerat lectus fringilla finibus. Hac vivamus id scelerisque et gravida nec ligula et non. Consectetur eu himenaeos eget felis quis habitant tellus. Tellus commodo inceptos litora habitant per himenaeos faucibus pretium. Gravida velit pretium amet purus rhoncus taciti. `,
-});
-
-const SimilarityList = [
-  { label: '混合相似度', value: 45.88 },
-  { label: '关键词似度', value: 45.88 },
-  { label: '向量相似度', value: 45.88 },
+const similarityList: Array<{ field: keyof ITestingChunk; label: string }> = [
+  { field: 'similarity', label: 'Hybrid Similarity' },
+  { field: 'term_similarity', label: 'Term Similarity' },
+  { field: 'vector_similarity', label: 'Vector Similarity' },
 ];
 
+const ChunkTitle = ({ item }: { item: ITestingChunk }) => {
+  const { t } = useTranslate('knowledgeDetails');
+  return (
+    <div className="flex gap-3 text-xs">
+      {similarityList.map((x) => (
+        <div key={x.field} className="space-x-1">
+          <span>{((item[x.field] as number) * 100).toFixed(2)}</span>
+          <span>{t(camelCase(x.field))}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
 export default function RetrievalTesting() {
+  const { loading, setValues, refetch, data } = useTestRetrieval();
+
   return (
     <section className="flex divide-x h-full">
       <div className="p-4">
-        <TestingForm></TestingForm>
+        <TestingForm
+          loading={loading}
+          setValues={setValues}
+          refetch={refetch}
+        ></TestingForm>
       </div>
       <div className="p-4 flex-1 ">
         <h2 className="text-4xl font-bold mb-8 px-[10%]">
           15 Results from 3 files
         </h2>
         <section className="flex flex-col gap-4 overflow-auto h-[83vh] px-[10%]">
-          {list.map((x, idx) => (
+          {data.chunks.map((x) => (
             <Card
-              key={idx}
+              key={x.chunk_id}
               className="bg-colors-background-neutral-weak border-colors-outline-neutral-strong"
             >
               <CardHeader>
                 <CardTitle>
                   <div className="flex gap-2 flex-wrap">
-                    {SimilarityList.map((x, idx) => (
-                      <Badge
-                        key={idx}
-                        variant="outline"
-                        className="bg-colors-background-inverse-strong p-1.5 rounded-xl text-colors-text-inverse-weak text-base"
-                      >
-                        {x.label}
-                        <span className="text-colors-text-inverse-strong ml-1 text-lg leading-none">
-                          {x.value}
-                        </span>
-                      </Badge>
-                    ))}
+                    <ChunkTitle item={x}></ChunkTitle>
                   </div>
                 </CardTitle>
               </CardHeader>
               <CardContent>
-                <p className="text-colors-text-neutral-strong">{x.content}</p>
+                <p className="text-colors-text-neutral-strong">
+                  {x.content_with_weight}
+                </p>
               </CardContent>
             </Card>
           ))}
diff --git a/web/src/pages/dataset/testing/testing-form.tsx b/web/src/pages/dataset/testing/testing-form.tsx
index b8037133a..4a1c4fcb9 100644
--- a/web/src/pages/dataset/testing/testing-form.tsx
+++ b/web/src/pages/dataset/testing/testing-form.tsx
@@ -28,10 +28,17 @@ import { trim } from 'lodash';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
-export default function TestingForm() {
-  const { t } = useTranslation();
+type TestingFormProps = Pick<
+  ReturnType<typeof useTestRetrieval>,
+  'loading' | 'refetch' | 'setValues'
+>;
 
-  const { loading, setValues, refetch } = useTestRetrieval();
+export default function TestingForm({
+  loading,
+  refetch,
+  setValues,
+}: TestingFormProps) {
+  const { t } = useTranslation();
 
   const formSchema = z.object({
     question: z.string().min(1, {