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/components/originui/number-input.tsx

@@ -63,7 +63,7 @@ const NumberInput: React.FC<NumberInputProps> = ({
     >
       <button
         type="button"
-        className="w-10 p-2 text-white focus:outline-none border-r-[1px]"
+        className="w-10 p-2 focus:outline-none border-r-[1px]"
         onClick={handleDecrement}
         style={style}
       >
@@ -74,12 +74,12 @@ const NumberInput: React.FC<NumberInputProps> = ({
         value={value}
         onInput={handleInput}
         onChange={handleChange}
-        className="w-full flex-1 text-center bg-transparent text-white focus:outline-none"
+        className="w-full flex-1 text-center bg-transparent focus:outline-none"
         style={style}
       />
       <button
         type="button"
-        className="w-10 p-2 text-white focus:outline-none border-l-[1px]"
+        className="w-10 p-2 focus:outline-none border-l-[1px]"
         onClick={handleIncrement}
         style={style}
       >

web/src/pages/agent/constant.tsx

@@ -48,8 +48,6 @@ export const BeginId = 'begin';
 export enum Operator {
   Begin = 'Begin',
   Retrieval = 'Retrieval',
-  Generate = 'Generate',
-  Answer = 'Answer',
   Categorize = 'Categorize',
   Message = 'Message',
   Relevant = 'Relevant',
@@ -78,7 +76,6 @@ export enum Operator {
   Note = 'Note',
   Crawler = 'Crawler',
   Invoke = 'Invoke',
-  Template = 'Template',
   Email = 'Email',
   Iteration = 'Iteration',
   IterationStart = 'IterationItem',
@@ -100,15 +97,12 @@ export const CommonOperatorList = Object.values(Operator).filter(
 
 export const AgentOperatorList = [
   Operator.Retrieval,
-  Operator.Generate,
-  Operator.Answer,
   Operator.Categorize,
   Operator.Message,
   Operator.RewriteQuestion,
   Operator.KeywordExtract,
   Operator.Switch,
   Operator.Concentrator,
-  Operator.Template,
   Operator.Iteration,
   Operator.WaitingDialogue,
   Operator.Note,
@@ -119,12 +113,6 @@ export const componentMenuList = [
   {
     name: Operator.Retrieval,
   },
-  {
-    name: Operator.Generate,
-  },
-  {
-    name: Operator.Answer,
-  },
   {
     name: Operator.Categorize,
   },
@@ -144,9 +132,6 @@ export const componentMenuList = [
   {
     name: Operator.Concentrator,
   },
-  {
-    name: Operator.Template,
-  },
   {
     name: Operator.Iteration,
   },
@@ -660,7 +645,7 @@ export const initialAgentValues = {
   max_retries: 3,
   delay_after_error: 1,
   visual_files_var: '',
-  max_rounds: 5,
+  max_rounds: 1,
   exception_method: '',
   exception_goto: [],
   exception_default_value: '',
@@ -796,19 +781,16 @@ export const CategorizeAnchorPointPositions = [
 // no connection lines are allowed between key and value
 export const RestrictedUpstreamMap = {
   [Operator.Begin]: [Operator.Relevant],
-  [Operator.Categorize]: [Operator.Begin, Operator.Categorize, Operator.Answer],
-  [Operator.Answer]: [Operator.Begin, Operator.Answer, Operator.Message],
+  [Operator.Categorize]: [Operator.Begin, Operator.Categorize],
   [Operator.Retrieval]: [Operator.Begin, Operator.Retrieval],
-  [Operator.Generate]: [Operator.Begin, Operator.Relevant],
   [Operator.Message]: [
     Operator.Begin,
     Operator.Message,
-    Operator.Generate,
     Operator.Retrieval,
     Operator.RewriteQuestion,
     Operator.Categorize,
   ],
-  [Operator.Relevant]: [Operator.Begin, Operator.Answer],
+  [Operator.Relevant]: [Operator.Begin],
   [Operator.RewriteQuestion]: [
     Operator.Begin,
     Operator.Message,
@@ -843,7 +825,6 @@ export const RestrictedUpstreamMap = {
   [Operator.Crawler]: [Operator.Begin],
   [Operator.Note]: [],
   [Operator.Invoke]: [Operator.Begin],
-  [Operator.Template]: [Operator.Begin, Operator.Relevant],
   [Operator.Email]: [Operator.Begin],
   [Operator.Iteration]: [Operator.Begin],
   [Operator.IterationStart]: [Operator.Begin],
@@ -861,8 +842,6 @@ export const NodeMap = {
   [Operator.Begin]: 'beginNode',
   [Operator.Categorize]: 'categorizeNode',
   [Operator.Retrieval]: 'retrievalNode',
-  [Operator.Generate]: 'generateNode',
-  [Operator.Answer]: 'logicNode',
   [Operator.Message]: 'messageNode',
   [Operator.Relevant]: 'relevantNode',
   [Operator.RewriteQuestion]: 'rewriteNode',
@@ -890,7 +869,6 @@ export const NodeMap = {
   [Operator.Note]: 'noteNode',
   [Operator.Crawler]: 'ragNode',
   [Operator.Invoke]: 'ragNode',
-  [Operator.Template]: 'templateNode',
   [Operator.Email]: 'ragNode',
   [Operator.Iteration]: 'group',
   [Operator.IterationStart]: 'iterationStartNode',
@@ -924,9 +902,7 @@ export const BeginQueryTypeIconMap = {
 
 export const NoDebugOperatorsList = [
   Operator.Begin,
-  Operator.Answer,
   Operator.Concentrator,
-  Operator.Template,
   Operator.Message,
   Operator.RewriteQuestion,
   Operator.Switch,

web/src/pages/agent/form-sheet/form-config-map.tsx

@@ -1,8 +1,6 @@
-import { z } from 'zod';
 import { Operator } from '../constant';
 import AgentForm from '../form/agent-form';
 import AkShareForm from '../form/akshare-form';
-import AnswerForm from '../form/answer-form';
 import ArXivForm from '../form/arxiv-form';
 import BaiduFanyiForm from '../form/baidu-fanyi-form';
 import BaiduForm from '../form/baidu-form';
@@ -15,7 +13,6 @@ import DeepLForm from '../form/deepl-form';
 import DuckDuckGoForm from '../form/duckduckgo-form';
 import EmailForm from '../form/email-form';
 import ExeSQLForm from '../form/exesql-form';
-import GenerateForm from '../form/generate-form';
 import GithubForm from '../form/github-form';
 import GoogleForm from '../form/google-form';
 import GoogleScholarForm from '../form/google-scholar-form';
@@ -34,7 +31,6 @@ import StringTransformForm from '../form/string-transform-form';
 import SwitchForm from '../form/switch-form';
 import TavilyExtractForm from '../form/tavily-extract-form';
 import TavilyForm from '../form/tavily-form';
-import TemplateForm from '../form/template-form';
 import ToolForm from '../form/tool-form';
 import TuShareForm from '../form/tushare-form';
 import UserFillUpForm from '../form/user-fill-up-form';
@@ -49,12 +45,6 @@ export const FormConfigMap = {
   [Operator.Retrieval]: {
     component: RetrievalForm,
   },
-  [Operator.Generate]: {
-    component: GenerateForm,
-  },
-  [Operator.Answer]: {
-    component: AnswerForm,
-  },
   [Operator.Categorize]: {
     component: CategorizeForm,
   },
@@ -75,8 +65,6 @@ export const FormConfigMap = {
   },
   [Operator.Agent]: {
     component: AgentForm,
-    defaultValues: {},
-    schema: z.object({}),
   },
   [Operator.Baidu]: {
     component: BaiduForm,
@@ -107,8 +95,6 @@ export const FormConfigMap = {
   },
   [Operator.DeepL]: {
     component: DeepLForm,
-    defaultValues: {},
-    schema: z.object({}),
   },
   [Operator.GitHub]: {
     component: GithubForm,
@@ -152,9 +138,6 @@ export const FormConfigMap = {
   [Operator.Note]: {
     component: () => <></>,
   },
-  [Operator.Template]: {
-    component: TemplateForm,
-  },
   [Operator.Email]: {
     component: EmailForm,
   },

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

web/src/pages/agent/hooks.tsx

@@ -33,7 +33,6 @@ import {
   initialDuckValues,
   initialEmailValues,
   initialExeSqlValues,
-  initialGenerateValues,
   initialGithubValues,
   initialGoogleScholarValues,
   initialGoogleValues,
@@ -48,11 +47,12 @@ import {
   initialRelevantValues,
   initialRetrievalValues,
   initialRewriteQuestionValues,
+  initialStringTransformValues,
   initialSwitchValues,
   initialTavilyExtractValues,
   initialTavilyValues,
-  initialTemplateValues,
   initialTuShareValues,
+  initialUserFillUpValues,
   initialWaitingDialogueValues,
   initialWenCaiValues,
   initialWikipediaValues,
@@ -92,8 +92,6 @@ export const useInitializeOperatorParams = () => {
     return {
       [Operator.Begin]: initialBeginValues,
       [Operator.Retrieval]: initialRetrievalValues,
-      [Operator.Generate]: { ...initialGenerateValues, llm_id: llmId },
-      [Operator.Answer]: {},
       [Operator.Categorize]: { ...initialCategorizeValues, llm_id: llmId },
       [Operator.Relevant]: { ...initialRelevantValues, llm_id: llmId },
       [Operator.RewriteQuestion]: {
@@ -128,7 +126,6 @@ export const useInitializeOperatorParams = () => {
       [Operator.Note]: initialNoteValues,
       [Operator.Crawler]: initialCrawlerValues,
       [Operator.Invoke]: initialInvokeValues,
-      [Operator.Template]: initialTemplateValues,
       [Operator.Email]: initialEmailValues,
       [Operator.Iteration]: initialIterationValues,
       [Operator.IterationStart]: initialIterationValues,
@@ -137,6 +134,9 @@ export const useInitializeOperatorParams = () => {
       [Operator.Agent]: { ...initialAgentValues, llm_id: llmId },
       [Operator.TavilySearch]: initialTavilyValues,
       [Operator.TavilyExtract]: initialTavilyExtractValues,
+      [Operator.Tool]: {},
+      [Operator.UserFillUp]: initialUserFillUpValues,
+      [Operator.StringTransform]: initialStringTransformValues,
     };
   }, [llmId]);
 

web/src/pages/agent/hooks/use-add-node.ts

@@ -23,7 +23,6 @@ import {
   initialDuckValues,
   initialEmailValues,
   initialExeSqlValues,
-  initialGenerateValues,
   initialGithubValues,
   initialGoogleScholarValues,
   initialGoogleValues,
@@ -43,7 +42,6 @@ import {
   initialSwitchValues,
   initialTavilyExtractValues,
   initialTavilyValues,
-  initialTemplateValues,
   initialTuShareValues,
   initialUserFillUpValues,
   initialWaitingDialogueValues,
@@ -70,8 +68,6 @@ export const useInitializeOperatorParams = () => {
     return {
       [Operator.Begin]: initialBeginValues,
       [Operator.Retrieval]: initialRetrievalValues,
-      [Operator.Generate]: { ...initialGenerateValues, llm_id: llmId },
-      [Operator.Answer]: {},
       [Operator.Categorize]: { ...initialCategorizeValues, llm_id: llmId },
       [Operator.Relevant]: { ...initialRelevantValues, llm_id: llmId },
       [Operator.RewriteQuestion]: {
@@ -106,7 +102,6 @@ export const useInitializeOperatorParams = () => {
       [Operator.Note]: initialNoteValues,
       [Operator.Crawler]: initialCrawlerValues,
       [Operator.Invoke]: initialInvokeValues,
-      [Operator.Template]: initialTemplateValues,
       [Operator.Email]: initialEmailValues,
       [Operator.Iteration]: initialIterationValues,
       [Operator.IterationStart]: initialIterationStartValues,