From 8e87436725db9041652097fd326382e87f4be109 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Mon, 19 May 2025 19:34:43 +0800
Subject: [PATCH] Feat: Modify the Python language template code of the code
 operator #4977 (#7714)

### What problem does this PR solve?

Feat: Modify the Python language template code of the code operator
#4977
### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/constants/agent.ts                    |  32 ++--
 web/src/hooks/use-knowledge-request.ts        |   1 +
 web/src/pages/dataset/testing/index.tsx       | 154 +++++++++---------
 .../pages/dataset/testing/testing-result.tsx  |  95 +++++++++++
 web/src/pages/flow/form/code-form/index.tsx   |   2 +-
 5 files changed, 184 insertions(+), 100 deletions(-)
 create mode 100644 web/src/pages/dataset/testing/testing-result.tsx

diff --git a/web/src/constants/agent.ts b/web/src/constants/agent.ts
index 32d5e9ddc..91c128804 100644
--- a/web/src/constants/agent.ts
+++ b/web/src/constants/agent.ts
@@ -4,23 +4,19 @@ export enum ProgrammingLanguage {
 }
 
 export const CodeTemplateStrMap = {
-  [ProgrammingLanguage.Python]: `
-    def main(arg1: str, arg2: str) -> dict:
-        return {
-            "result": arg1 + arg2,
-        }
-  `,
-  [ProgrammingLanguage.Javascript]: `
-    const axios = require('axios');
-    async function main(args) {
-      try {
-        const response = await axios.get('https://github.com/infiniflow/ragflow');
-        console.log('Body:', response.data);
-      } catch (error) {
-        console.error('Error:', error.message);
-      }
-    }
+  [ProgrammingLanguage.Python]: `def main(arg1: str, arg2: str) -> str:
+    return f"result: {arg1 + arg2}"
+`,
+  [ProgrammingLanguage.Javascript]: `const axios = require('axios');
+async function main(args) {
+  try {
+    const response = await axios.get('https://github.com/infiniflow/ragflow');
+    console.log('Body:', response.data);
+  } catch (error) {
+    console.error('Error:', error.message);
+  }
+}
 
-    module.exports = { main };
-  `,
+module.exports = { main };
+`,
 };
diff --git a/web/src/hooks/use-knowledge-request.ts b/web/src/hooks/use-knowledge-request.ts
index 24acea9a7..f57c04a25 100644
--- a/web/src/hooks/use-knowledge-request.ts
+++ b/web/src/hooks/use-knowledge-request.ts
@@ -91,6 +91,7 @@ export const useTestRetrieval = () => {
     page,
     pageSize,
     handleFilterSubmit,
+    filterValue,
   };
 };
 
diff --git a/web/src/pages/dataset/testing/index.tsx b/web/src/pages/dataset/testing/index.tsx
index 80fea78cd..749c10139 100644
--- a/web/src/pages/dataset/testing/index.tsx
+++ b/web/src/pages/dataset/testing/index.tsx
@@ -1,37 +1,14 @@
-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 { useCallback, useState } from 'react';
 import { TopTitle } from '../dataset-title';
 import TestingForm from './testing-form';
+import { TestingResult } from './testing-result';
 
-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 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>
-          <span>{t(camelCase(x.field))}</span>
-        </div>
-      ))}
-    </div>
-  );
-};
+function Vertical() {
+  return <div>xxx</div>;
+}
 
 export default function RetrievalTesting() {
   const {
@@ -43,22 +20,18 @@ export default function RetrievalTesting() {
     page,
     pageSize,
     handleFilterSubmit,
+    filterValue,
   } = 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]);
+  const [count, setCount] = useState(1);
+
+  const addCount = useCallback(() => {
+    setCount(2);
+  }, []);
+
+  const removeCount = useCallback(() => {
+    setCount(1);
+  }, []);
 
   return (
     <div className="p-5">
@@ -70,47 +43,66 @@ export default function RetrievalTesting() {
         ></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>
+      {count === 1 ? (
+        <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'} onClick={addCount}>
+                <Plus /> Add New Test
+              </Button>
+            </div>
+            <TestingForm
+              loading={loading}
+              setValues={setValues}
+              refetch={refetch}
+            ></TestingForm>
           </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}
+          <TestingResult
+            data={data}
+            page={page}
             pageSize={pageSize}
-          ></RAGFlowPagination>
-        </div>
-      </section>
+            filterValue={filterValue}
+            handleFilterSubmit={handleFilterSubmit}
+            onPaginationChange={onPaginationChange}
+          ></TestingResult>
+        </section>
+      ) : (
+        <section className="flex gap-2">
+          <div className="flex-1">
+            <TestingForm
+              loading={loading}
+              setValues={setValues}
+              refetch={refetch}
+            ></TestingForm>
+            <TestingResult
+              data={data}
+              page={page}
+              pageSize={pageSize}
+              filterValue={filterValue}
+              handleFilterSubmit={handleFilterSubmit}
+              onPaginationChange={onPaginationChange}
+            ></TestingResult>
+          </div>
+          <div className="flex-1">
+            <TestingForm
+              loading={loading}
+              setValues={setValues}
+              refetch={refetch}
+            ></TestingForm>
+            <TestingResult
+              data={data}
+              page={page}
+              pageSize={pageSize}
+              filterValue={filterValue}
+              handleFilterSubmit={handleFilterSubmit}
+              onPaginationChange={onPaginationChange}
+            ></TestingResult>
+          </div>
+        </section>
+      )}
     </div>
   );
 }
diff --git a/web/src/pages/dataset/testing/testing-result.tsx b/web/src/pages/dataset/testing/testing-result.tsx
new file mode 100644
index 000000000..62269c56b
--- /dev/null
+++ b/web/src/pages/dataset/testing/testing-result.tsx
@@ -0,0 +1,95 @@
+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 { 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/camelCase';
+import { useMemo } from 'react';
+
+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 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>
+          <span>{t(camelCase(x.field))}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+type TestingResultProps = Pick<
+  ReturnType<typeof useTestRetrieval>,
+  | 'data'
+  | 'filterValue'
+  | 'handleFilterSubmit'
+  | 'page'
+  | 'pageSize'
+  | 'onPaginationChange'
+>;
+
+export function TestingResult({
+  filterValue,
+  handleFilterSubmit,
+  page,
+  pageSize,
+  onPaginationChange,
+  data,
+}: TestingResultProps) {
+  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 (
+    <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}
+          value={filterValue}
+        >
+          <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>
+  );
+}
diff --git a/web/src/pages/flow/form/code-form/index.tsx b/web/src/pages/flow/form/code-form/index.tsx
index 73e575cbb..fda46dfc8 100644
--- a/web/src/pages/flow/form/code-form/index.tsx
+++ b/web/src/pages/flow/form/code-form/index.tsx
@@ -51,7 +51,7 @@ const CodeForm = ({ onValuesChange, form, node }: IOperatorForm) => {
         className="bg-gray-100 rounded dark:bg-gray-800"
       >
         <Editor
-          height={200}
+          height={600}
           theme="vs-dark"
           language={formData.lang}
           options={{