Fix: Set the maximum number of rounds for the agent to 1 #3221 (#9238)

### What problem does this PR solve?

Fix: Fixed the issue where numbers could not be displayed in the numeric
input box under white theme #3221
Fix: Set the maximum number of rounds for the agent to 1 #3221

### Type of change


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

web/src/pages/agent/form/answer-form/index.tsx

@@ -1,5 +0,0 @@
-const AnswerForm = () => {
-  return <div></div>;
-};
-
-export default AnswerForm;

web/src/pages/agent/form/categorize-form/index.tsx

@@ -8,6 +8,7 @@ import { useForm } from 'react-hook-form';
 import { initialCategorizeValues } from '../../constant';
 import { INextOperatorForm } from '../../interface';
 import { buildOutputList } from '../../utils/build-output-list';
+import { FormWrapper } from '../components/form-wrapper';
 import { Output } from '../components/output';
 import { QueryVariable } from '../components/query-variable';
 import DynamicCategorize from './dynamic-categorize';
@@ -31,12 +32,7 @@ function CategorizeForm({ node }: INextOperatorForm) {
 
   return (
     <Form {...form}>
-      <form
-        className="space-y-6 p-5 "
-        onSubmit={(e) => {
-          e.preventDefault();
-        }}
-      >
+      <FormWrapper>
         <FormContainer>
           <QueryVariable></QueryVariable>
           <LargeModelFormField></LargeModelFormField>
@@ -44,7 +40,7 @@ function CategorizeForm({ node }: INextOperatorForm) {
         <MessageHistoryWindowSizeFormField></MessageHistoryWindowSizeFormField>
         <DynamicCategorize nodeId={node?.id}></DynamicCategorize>
         <Output list={outputList}></Output>
-      </form>
+      </FormWrapper>
     </Form>
   );
 }

web/src/pages/agent/form/concentrator-form/index.tsx

@@ -1,17 +0,0 @@
-import { Form } from 'antd';
-import { IOperatorForm } from '../../interface';
-
-const ConcentratorForm = ({ onValuesChange, form }: IOperatorForm) => {
-  return (
-    <Form
-      name="basic"
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-    ></Form>
-  );
-};
-
-export default ConcentratorForm;

web/src/pages/agent/form/generate-form/index.tsx

@@ -1,78 +0,0 @@
-import { NextLLMSelect } from '@/components/llm-select/next';
-import { MessageHistoryWindowSizeFormField } from '@/components/message-history-window-size-item';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Switch } from '@/components/ui/switch';
-import { useTranslation } from 'react-i18next';
-import { INextOperatorForm } from '../../interface';
-import { PromptEditor } from '../components/prompt-editor';
-
-const GenerateForm = ({ form }: INextOperatorForm) => {
-  const { t } = useTranslation();
-
-  return (
-    <Form {...form}>
-      <form
-        className="space-y-6"
-        onSubmit={(e) => {
-          e.preventDefault();
-        }}
-      >
-        <FormField
-          control={form.control}
-          name="llm_id"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel tooltip={t('chat.modelTip')}>
-                {t('chat.model')}
-              </FormLabel>
-              <FormControl>
-                <NextLLMSelect {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="prompt"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel tooltip={t('flow.promptTip')}>
-                {t('flow.systemPrompt')}
-              </FormLabel>
-              <FormControl>
-                <PromptEditor {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="cite"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel tooltip={t('flow.citeTip')}>
-                {t('flow.cite')}
-              </FormLabel>
-              <FormControl>
-                <Switch {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <MessageHistoryWindowSizeFormField></MessageHistoryWindowSizeFormField>
-      </form>
-    </Form>
-  );
-};
-
-export default GenerateForm;

web/src/pages/agent/form/invoke-form/index.less

@@ -1,44 +0,0 @@
-.editableRow {
-  :global(.editable-cell) {
-    position: relative;
-  }
-
-  :global(.editable-cell-value-wrap) {
-    padding: 5px 12px;
-    cursor: pointer;
-    height: 30px !important;
-  }
-  &:hover {
-    :global(.editable-cell-value-wrap) {
-      padding: 4px 11px;
-      border: 1px solid #d9d9d9;
-      border-radius: 2px;
-    }
-  }
-}
-
-.dynamicParameterVariable {
-  background-color: #ebe9e950;
-  :global(.ant-collapse-content) {
-    background-color: #f6f6f634;
-  }
-  :global(.ant-collapse-content-box) {
-    padding: 0 !important;
-  }
-  margin-bottom: 20px;
-  .title {
-    font-weight: 600;
-    font-size: 16px;
-  }
-  .variableType {
-    width: 30%;
-  }
-  .variableValue {
-    flex: 1;
-  }
-
-  .addButton {
-    color: rgb(22, 119, 255);
-    font-weight: 600;
-  }
-}

web/src/pages/agent/form/iteration-form/index.tsx

@@ -6,6 +6,7 @@ import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 import { VariableType } from '../../constant';
 import { INextOperatorForm } from '../../interface';
+import { FormWrapper } from '../components/form-wrapper';
 import { Output } from '../components/output';
 import { QueryVariable } from '../components/query-variable';
 import { DynamicOutput } from './dynamic-output';
@@ -39,12 +40,7 @@ function IterationForm({ node }: INextOperatorForm) {
 
   return (
     <Form {...form}>
-      <form
-        className="space-y-6 p-4"
-        onSubmit={(e) => {
-          e.preventDefault();
-        }}
-      >
+      <FormWrapper>
         <FormContainer>
           <QueryVariable
             name="items_ref"
@@ -53,7 +49,7 @@ function IterationForm({ node }: INextOperatorForm) {
         </FormContainer>
         <DynamicOutput node={node}></DynamicOutput>
         <Output list={outputList}></Output>
-      </form>
+      </FormWrapper>
     </Form>
   );
 }

web/src/pages/agent/form/message-form/index.tsx

@@ -15,6 +15,7 @@ import { useFieldArray, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { INextOperatorForm } from '../../interface';
+import { FormWrapper } from '../components/form-wrapper';
 import { PromptEditor } from '../components/prompt-editor';
 import { useValues } from './use-values';
 import { useWatchFormChange } from './use-watch-change';
@@ -48,13 +49,7 @@ function MessageForm({ node }: INextOperatorForm) {
 
   return (
     <Form {...form}>
-      <form
-        className="space-y-5 px-5 "
-        autoComplete="off"
-        onSubmit={(e) => {
-          e.preventDefault();
-        }}
-      >
+      <FormWrapper>
         <FormContainer>
           <FormItem>
             <FormLabel tooltip={t('flow.msgTip')}>{t('flow.msg')}</FormLabel>
@@ -98,7 +93,7 @@ function MessageForm({ node }: INextOperatorForm) {
             <FormMessage />
           </FormItem>
         </FormContainer>
-      </form>
+      </FormWrapper>
     </Form>
   );
 }

web/src/pages/agent/form/string-transform-form/index.tsx

@@ -20,6 +20,7 @@ import {
   initialStringTransformValues,
 } from '../../constant';
 import { INextOperatorForm } from '../../interface';
+import { FormWrapper } from '../components/form-wrapper';
 import { Output, transferOutputs } from '../components/output';
 import { PromptEditor } from '../components/prompt-editor';
 import { QueryVariable } from '../components/query-variable';
@@ -76,13 +77,7 @@ function StringTransformForm({ node }: INextOperatorForm) {
 
   return (
     <Form {...form}>
-      <form
-        className="space-y-5 px-5 "
-        autoComplete="off"
-        onSubmit={(e) => {
-          e.preventDefault();
-        }}
-      >
+      <FormWrapper>
         <FormContainer>
           <FormField
             control={form.control}
@@ -157,7 +152,7 @@ function StringTransformForm({ node }: INextOperatorForm) {
             render={() => <div></div>}
           />
         </FormContainer>
-      </form>
+      </FormWrapper>
       <div className="p-5">
         <Output list={outputList}></Output>
       </div>

web/src/pages/agent/form/switch-form/index.tsx

@@ -28,6 +28,7 @@ import {
 } from '../../constant';
 import { useBuildQueryVariableOptions } from '../../hooks/use-get-begin-query';
 import { IOperatorForm } from '../../interface';
+import { FormWrapper } from '../components/form-wrapper';
 import { useValues } from './use-values';
 import { useWatchFormChange } from './use-watch-change';
 
@@ -249,12 +250,7 @@ function SwitchForm({ node }: IOperatorForm) {
 
   return (
     <Form {...form}>
-      <form
-        className="space-y-6 p-5 "
-        onSubmit={(e) => {
-          e.preventDefault();
-        }}
-      >
+      <FormWrapper>
         {fields.map((field, index) => {
           const name = `${ConditionKey}.${index}`;
           const conditions: Array<any> = form.getValues(`${name}.${ItemKey}`);
@@ -323,7 +319,7 @@ function SwitchForm({ node }: IOperatorForm) {
         >
           Add
         </BlockButton>
-      </form>
+      </FormWrapper>
     </Form>
   );
 }

web/src/pages/agent/form/template-form/index.tsx

@@ -1,24 +0,0 @@
-import { Form } from 'antd';
-import { useTranslation } from 'react-i18next';
-import { IOperatorForm } from '../../interface';
-import { PromptEditor } from '../components/prompt-editor';
-
-const TemplateForm = ({ onValuesChange, form }: IOperatorForm) => {
-  const { t } = useTranslation();
-
-  return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <Form.Item name={['content']} label={t('flow.content')}>
-        <PromptEditor></PromptEditor>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default TemplateForm;

web/src/pages/agent/form/tool-form/retrieval-form/index.tsx

@@ -11,6 +11,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { DescriptionField } from '../../components/description-field';
+import { FormWrapper } from '../../components/form-wrapper';
 import {
   EmptyResponseField,
   RetrievalPartialSchema,
@@ -35,12 +36,7 @@ const RetrievalForm = () => {
 
   return (
     <Form {...form}>
-      <form
-        className="space-y-6 p-4"
-        onSubmit={(e) => {
-          e.preventDefault();
-        }}
-      >
+      <FormWrapper>
         <FormContainer>
           <DescriptionField></DescriptionField>
           <KnowledgeBaseFormField showVariable></KnowledgeBaseFormField>
@@ -58,7 +54,7 @@ const RetrievalForm = () => {
             <UseKnowledgeGraphFormField name="use_kg"></UseKnowledgeGraphFormField>
           </FormContainer>
         </Collapse>
-      </form>
+      </FormWrapper>
     </Form>
   );
 };