Feat: Rendering recall test page #3221 (#7689)

### What problem does this PR solve?

Feat: Rendering recall test page #3221
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/dataset/testing/index.tsx

@@ -1,8 +1,16 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { FormContainer } from '@/components/form-container';
+import { FilterButton } from '@/components/list-filter-bar';
+import { FilterPopover } from '@/components/list-filter-bar/filter-popover';
+import { FilterCollection } from '@/components/list-filter-bar/interface';
+import { Button } from '@/components/ui/button';
+import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useTestRetrieval } from '@/hooks/use-knowledge-request';
 import { ITestingChunk } from '@/interfaces/database/knowledge';
 import { camelCase } from 'lodash';
+import { Plus } from 'lucide-react';
+import { useMemo } from 'react';
+import { TopTitle } from '../dataset-title';
 import TestingForm from './testing-form';
 
 const similarityList: Array<{ field: keyof ITestingChunk; label: string }> = [
@@ -14,7 +22,7 @@ const similarityList: Array<{ field: keyof ITestingChunk; label: string }> = [
 const ChunkTitle = ({ item }: { item: ITestingChunk }) => {
   const { t } = useTranslate('knowledgeDetails');
   return (
-    <div className="flex gap-3 text-xs">
+    <div className="flex gap-3 text-xs text-text-sub-title-invert italic">
       {similarityList.map((x) => (
         <div key={x.field} className="space-x-1">
           <span>{((item[x.field] as number) * 100).toFixed(2)}</span>
@@ -26,43 +34,83 @@ const ChunkTitle = ({ item }: { item: ITestingChunk }) => {
 };
 
 export default function RetrievalTesting() {
-  const { loading, setValues, refetch, data } = useTestRetrieval();
+  const {
+    loading,
+    setValues,
+    refetch,
+    data,
+    onPaginationChange,
+    page,
+    pageSize,
+    handleFilterSubmit,
+  } = useTestRetrieval();
+
+  const filters: FilterCollection[] = useMemo(() => {
+    return [
+      {
+        field: 'doc_ids',
+        label: 'File',
+        list:
+          data.doc_aggs?.map((x) => ({
+            id: x.doc_id,
+            label: x.doc_name,
+            count: x.count,
+          })) ?? [],
+      },
+    ];
+  }, [data.doc_aggs]);
 
   return (
-    <section className="flex divide-x h-full">
-      <div className="p-4">
-        <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%]">
-          {data.chunks.map((x) => (
-            <Card
-              key={x.chunk_id}
-              className="bg-colors-background-neutral-weak border-colors-outline-neutral-strong"
-            >
-              <CardHeader>
-                <CardTitle>
-                  <div className="flex gap-2 flex-wrap">
-                    <ChunkTitle item={x}></ChunkTitle>
-                  </div>
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-colors-text-neutral-strong">
-                  {x.content_with_weight}
-                </p>
-              </CardContent>
-            </Card>
-          ))}
-        </section>
-      </div>
-    </section>
+    <div className="p-5">
+      <section className="flex justify-between items-center">
+        <TopTitle
+          title={'Configuration'}
+          description={`  Update your knowledge base configuration here, particularly the chunk
+                  method.`}
+        ></TopTitle>
+        <Button>Save as Preset</Button>
+      </section>
+      <section className="flex divide-x h-full">
+        <div className="p-4 flex-1">
+          <div className="flex justify-between pb-2.5">
+            <span className="text-text-title font-semibold text-2xl">
+              Test setting
+            </span>
+            <Button variant={'outline'}>
+              <Plus /> Add New Test
+            </Button>
+          </div>
+          <TestingForm
+            loading={loading}
+            setValues={setValues}
+            refetch={refetch}
+          ></TestingForm>
+        </div>
+        <div className="p-4 flex-1">
+          <div className="flex justify-between pb-2.5">
+            <span className="text-text-title font-semibold text-2xl">
+              Test results
+            </span>
+            <FilterPopover filters={filters} onChange={handleFilterSubmit}>
+              <FilterButton></FilterButton>
+            </FilterPopover>
+          </div>
+          <section className="flex flex-col gap-5 overflow-auto h-[76vh] mb-5">
+            {data.chunks?.map((x) => (
+              <FormContainer key={x.chunk_id} className="px-5 py-2.5">
+                <ChunkTitle item={x}></ChunkTitle>
+                <p className="!mt-2.5"> {x.content_with_weight}</p>
+              </FormContainer>
+            ))}
+          </section>
+          <RAGFlowPagination
+            total={data.total}
+            onChange={onPaginationChange}
+            current={page}
+            pageSize={pageSize}
+          ></RAGFlowPagination>
+        </div>
+      </section>
+    </div>
   );
 }