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

@@ -4,23 +4,19 @@ export enum ProgrammingLanguage {
 }
 
 export const CodeTemplateStrMap = {
-  [ProgrammingLanguage.Python]: `
+  [ProgrammingLanguage.Python]: `def main(arg1: str, arg2: str) -> str:
-    def main(arg1: str, arg2: str) -> dict:
+    return f"result: {arg1 + arg2}"
-        return {
+`,
-            "result": arg1 + arg2,
+  [ProgrammingLanguage.Javascript]: `const axios = require('axios');
-        }
+async function main(args) {
-  `,
+  try {
-  [ProgrammingLanguage.Javascript]: `
+    const response = await axios.get('https://github.com/infiniflow/ragflow');
-    const axios = require('axios');
+    console.log('Body:', response.data);
-    async function main(args) {
+  } catch (error) {
-      try {
+    console.error('Error:', error.message);
-        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 };
-  `,
+`,
 };

web/src/hooks/use-knowledge-request.ts

@@ -91,6 +91,7 @@ export const useTestRetrieval = () => {
     page,
     pageSize,
     handleFilterSubmit,
+    filterValue,
   };
 };
 

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 }> = [
+function Vertical() {
-  { field: 'similarity', label: 'Hybrid Similarity' },
+  return <div>xxx</div>;
-  { 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>
-  );
-};
 
 export default function RetrievalTesting() {
   const {
@@ -43,22 +20,18 @@ export default function RetrievalTesting() {
     page,
     pageSize,
     handleFilterSubmit,
+    filterValue,
   } = useTestRetrieval();
 
-  const filters: FilterCollection[] = useMemo(() => {
+  const [count, setCount] = useState(1);
-    return [
+
-      {
+  const addCount = useCallback(() => {
-        field: 'doc_ids',
+    setCount(2);
-        label: 'File',
+  }, []);
-        list:
+
-          data.doc_aggs?.map((x) => ({
+  const removeCount = useCallback(() => {
-            id: x.doc_id,
+    setCount(1);
-            label: x.doc_name,
+  }, []);
-            count: x.count,
-          })) ?? [],
-      },
-    ];
-  }, [data.doc_aggs]);
 
   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">
+      {count === 1 ? (
-        <div className="p-4 flex-1">
+        <section className="flex divide-x h-full">
-          <div className="flex justify-between pb-2.5">
+          <div className="p-4 flex-1">
-            <span className="text-text-title font-semibold text-2xl">
+            <div className="flex justify-between pb-2.5">
-              Test setting
+              <span className="text-text-title font-semibold text-2xl">
-            </span>
+                Test setting
-            <Button variant={'outline'}>
+              </span>
-              <Plus /> Add New Test
+              <Button variant={'outline'} onClick={addCount}>
-            </Button>
+                <Plus /> Add New Test
+              </Button>
+            </div>
+            <TestingForm
+              loading={loading}
+              setValues={setValues}
+              refetch={refetch}
+            ></TestingForm>
           </div>
-          <TestingForm
+          <TestingResult
-            loading={loading}
+            data={data}
-            setValues={setValues}
+            page={page}
-            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>
+            filterValue={filterValue}
-        </div>
+            handleFilterSubmit={handleFilterSubmit}
-      </section>
+            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>
   );
 }

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>
+  );
+}

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={{