feat: Add DynamicInputVariable to RetrievalForm #1739 (#3112)

### What problem does this PR solve?

feat: Add DynamicInputVariable to RetrievalForm #1739
### Type of change

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

web/src/locales/en.ts

       warn: 'Warn',
       action: 'Action',
       s: 'S',
+      pleaseSelect: 'Please select',
+      pleaseInput: 'Please input',
     },
     login: {
       login: 'Sign in',
       googleDescription:
         'This component is used to get search result fromhttps://www.google.com/ . Typically, it performs as a supplement to knowledgebases. Top N and SerpApi API key specifies the number of search results you need to adapt.',
       bing: 'Bing',
-      bingTip:
+      bingDescription:
         'This component is used to get search result from https://www.bing.com/. Typically, it performs as a supplement to knowledgebases. Top N and Bing Subscription-Key specifies the number of search results you need to adapt.',
       apiKey: 'API KEY',
       country: 'Country',
       timeout: 'Timeout',
       headers: 'Headers',
       cleanHtml: 'Clean html',
+      reference: 'Reference',
+      input: 'Input',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/locales/zh-traditional.ts

       warn: '提醒',
       action: '操作',
       s: '秒',
+      pleaseSelect: '請選擇',
+      pleaseInput: '請輸入',
     },
     login: {
       login: '登入',
       googleDescription:
         '此元件用於從https://www.google.com/取得搜尋結果。通常，它作為知識庫的補充。 Top N 和 SerpApi API 金鑰指定您需要調整的搜尋結果數量。',
       bing: 'Bing',
-      bingTip:
+      bingDescription:
         '此元件用於從 https://www.bing.com/ 取得搜尋結果。通常，它充當知識庫的補充。 Top N 和 Bing Subscription-Key 指定您需要適配的搜尋結果數量。',
       apiKey: 'API KEY',
       country: '國家',
       timeout: '超時',
       headers: '請求頭',
       cleanHtml: '清除 html',
+      reference: '引用',
+      input: '輸入',
     },
     footer: {
       profile: '“保留所有權利 @ react”',

web/src/locales/zh.ts

       warn: '提醒',
       action: '操作',
       s: '秒',
+      pleaseSelect: '请选择',
+      pleaseInput: '请输入',
     },
     login: {
       login: '登录',
       googleDescription:
         '此组件用于从https://www.google.com/获取搜索结果。通常，它作为知识库的补充。Top N 和 SerpApi API 密钥指定您需要调整的搜索结果数量。',
       bing: 'Bing',
-      bingTip:
+      bingDescription:
         '此组件用于从 https://www.bing.com/ 获取搜索结果。通常，它作为知识库的补充。Top N 和 Bing Subscription-Key 指定您需要调整的搜索结果数量。',
       apiKey: 'API KEY',
       country: '国家',
       timeout: '超时',
       headers: '请求头',
       cleanHtml: '清除 html',
+      reference: '引用',
+      input: '输入',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/pages/flow/constant.tsx

   },
 ];
 
+const initialQueryBaseValues = {
+  query: [],
+};
+
 export const initialRetrievalValues = {
   similarity_threshold: 0.2,
   keywords_similarity_weight: 0.3,
   top_n: 8,
+  ...initialQueryBaseValues,
 };
 
 export const initialBeginValues = {
   ...initialLlmBaseValues,
   message_history_window_size: 1,
   category_description: {},
+  ...initialQueryBaseValues,
 };
 
 export const initialMessageValues = {
 export const initialKeywordExtractValues = {
   ...initialLlmBaseValues,
   top_n: 1,
+  ...initialQueryBaseValues,
 };
 export const initialDuckValues = {
   top_n: 10,
   channel: Channel.Text,
+  ...initialQueryBaseValues,
 };
 
 export const initialBaiduValues = {
   top_n: 10,
+  ...initialQueryBaseValues,
 };
 
 export const initialWikipediaValues = {
   top_n: 10,
   language: 'en',
+  ...initialQueryBaseValues,
 };
 
 export const initialPubMedValues = {
   top_n: 10,
   email: '',
+  ...initialQueryBaseValues,
 };
 
 export const initialArXivValues = {
   top_n: 10,
   sort_by: 'relevance',
+  ...initialQueryBaseValues,
 };
 
 export const initialGoogleValues = {
   api_key: 'Xxx(get from https://serpapi.com/manage-api-key)',
   country: 'cn',
   language: 'en',
+  ...initialQueryBaseValues,
 };
 
 export const initialBingValues = {
     '"YOUR_ACCESS_KEY"(get from https://www.microsoft.com/en-us/bing/apis/bing-web-search-api)',
   country: 'CH',
   language: 'en',
+  ...initialQueryBaseValues,
 };
 
 export const initialGoogleScholarValues = {
   top_n: 5,
   sort_by: 'relevance',
   patents: true,
+  ...initialQueryBaseValues,
 };
 
 export const initialDeepLValues = {
 
 export const initialGithubValues = {
   top_n: 5,
+  ...initialQueryBaseValues,
 };
 
 export const initialBaiduFanyiValues = {
   appid: 'xxx',
   secret_key: 'xxx',
   trans_type: 'translate',
+  ...initialQueryBaseValues,
 };
 
 export const initialQWeatherValues = {
   type: 'weather',
   user_type: 'free',
   time_period: 'now',
+  ...initialQueryBaseValues,
 };
 
 export const initialExeSqlValues = {
   password: '',
   loop: 3,
   top_n: 30,
+  ...initialQueryBaseValues,
 };
 
 export const initialSwitchValues = { conditions: [] };
 
-export const initialWenCaiValues = { top_n: 20, query_type: 'stock' };
+export const initialWenCaiValues = {
+  top_n: 20,
+  query_type: 'stock',
+  ...initialQueryBaseValues,
+};
 
-export const initialAkShareValues = { top_n: 10 };
+export const initialAkShareValues = { top_n: 10, ...initialQueryBaseValues };
 
 export const initialYahooFinanceValues = {
   info: true,
   balance_sheet: false,
   cash_flow_statement: false,
   news: true,
+  ...initialQueryBaseValues,
 };
 
 export const initialJin10Values = {
   flash_type: '1',
   contain: '',
   filter: '',
+  ...initialQueryBaseValues,
 };
 
 export const initialConcentratorValues = {};
   token: 'xxx',
   src: 'eastmoney',
   start_date: '2024-01-01 09:00:00',
+  ...initialQueryBaseValues,
 };
 
 export const initialNoteValues = {
 
 export const initialCrawlerValues = {
   extract_type: 'markdown',
+  ...initialQueryBaseValues,
 };
 
 export const initialInvokeValues = {

web/src/pages/flow/form/akshare-form/index.tsx

 import TopNItem from '@/components/top-n-item';
 import { Form } from 'antd';
 import { IOperatorForm } from '../../interface';
+import DynamicInputVariable from '../components/dynamic-input-variable';
 
-const AkShareForm = ({ onValuesChange, form }: IOperatorForm) => {
+const AkShareForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   return (
     <Form
       name="basic"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
       <TopNItem initialValue={10} max={99}></TopNItem>
     </Form>
   );

web/src/pages/flow/form/arxiv-form/index.tsx

 import { Form, Select } from 'antd';
 import { useMemo } from 'react';
 import { IOperatorForm } from '../../interface';
+import DynamicInputVariable from '../components/dynamic-input-variable';
 
-const ArXivForm = ({ onValuesChange, form }: IOperatorForm) => {
+const ArXivForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   const { t } = useTranslate('flow');
 
   const options = useMemo(() => {
   return (
     <Form
       name="basic"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
+
       <TopNItem initialValue={10}></TopNItem>
       <Form.Item label={t('sortBy')} name={'sort_by'}>
         <Select options={options}></Select>

web/src/pages/flow/form/baidu-fanyi-form/index.tsx

   BaiduFanyiSourceLangOptions,
 } from '../../constant';
 import { IOperatorForm } from '../../interface';
+import DynamicInputVariable from '../components/dynamic-input-variable';
 
-const BaiduFanyiForm = ({ onValuesChange, form }: IOperatorForm) => {
+const BaiduFanyiForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   const { t } = useTranslate('flow');
   const options = useMemo(() => {
     return ['translate', 'fieldtranslate'].map((x) => ({
   return (
     <Form
       name="basic"
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
       <Form.Item label={t('appid')} name={'appid'}>
         <Input></Input>
       </Form.Item>

web/src/pages/flow/form/baidu-form/index.tsx

 import TopNItem from '@/components/top-n-item';
 import { Form } from 'antd';
 import { IOperatorForm } from '../../interface';
+import DynamicInputVariable from '../components/dynamic-input-variable';
 
-const BaiduForm = ({ onValuesChange, form }: IOperatorForm) => {
+const BaiduForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   return (
     <Form
       name="basic"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
       <TopNItem initialValue={10}></TopNItem>
     </Form>
   );

web/src/pages/flow/form/bing-form/index.tsx

 import { useMemo } from 'react';
 import { BingCountryOptions, BingLanguageOptions } from '../../constant';
 import { IOperatorForm } from '../../interface';
+import DynamicInputVariable from '../components/dynamic-input-variable';
 
-const BingForm = ({ onValuesChange, form }: IOperatorForm) => {
+const BingForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   const { t } = useTranslate('flow');
 
   const options = useMemo(() => {
   return (
     <Form
       name="basic"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
       <TopNItem initialValue={10}></TopNItem>
       <Form.Item label={t('channel')} name={'channel'}>
         <Select options={options}></Select>

web/src/pages/flow/form/categorize-form/dynamic-categorize.tsx

 import { useTranslate } from '@/hooks/common-hooks';
-import { CloseOutlined } from '@ant-design/icons';
+import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
 import {
   Button,
   Card,
                 onClick={handleAdd}
                 block
                 className={styles.addButton}
+                icon={<PlusOutlined />}
               >
-                + {t('addItem')}
+                {t('addItem')}
               </Button>
             </Flex>
           );

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

 import { Form } from 'antd';
 import { useSetLlmSetting } from '../../hooks';
 import { IOperatorForm } from '../../interface';
+import DynamicInputVariable from '../components/dynamic-input-variable';
 import DynamicCategorize from './dynamic-categorize';
 import { useHandleFormValuesChange } from './hooks';
 
       initialValues={{ items: [{}] }}
       layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
       <Form.Item
         name={'llm_id'}
         label={t('model', { keyPrefix: 'chat' })}

web/src/pages/flow/form/components/dynamic-input-variable.tsx

+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button, Collapse, Flex, Form, Input, Select } from 'antd';
+
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useBuildComponentIdSelectOptions } from '../../hooks';
+import styles from './index.less';
+
+interface IProps {
+  nodeId?: string;
+}
+
+enum VariableType {
+  Reference = 'reference',
+  Input = 'input',
+}
+
+const getVariableName = (type: string) =>
+  type === VariableType.Reference ? 'component_id' : 'value';
+
+const DynamicVariableForm = ({ nodeId }: IProps) => {
+  const { t } = useTranslation();
+  const valueOptions = useBuildComponentIdSelectOptions(nodeId);
+  const form = Form.useFormInstance();
+
+  const options = [
+    { value: VariableType.Reference, label: t('flow.reference') },
+    { value: VariableType.Input, label: t('flow.input') },
+  ];
+
+  const handleTypeChange = useCallback(
+    (name: number) => () => {
+      setTimeout(() => {
+        form.setFieldValue(['query', name, 'component_id'], undefined);
+        form.setFieldValue(['query', name, 'value'], undefined);
+      }, 0);
+    },
+    [form],
+  );
+
+  return (
+    <Form.List name="query">
+      {(fields, { add, remove }) => (
+        <>
+          {fields.map(({ key, name, ...restField }) => (
+            <Flex key={key} gap={10} align={'baseline'}>
+              <Form.Item
+                {...restField}
+                name={[name, 'type']}
+                className={styles.variableType}
+              >
+                <Select
+                  options={options}
+                  onChange={handleTypeChange(name)}
+                ></Select>
+              </Form.Item>
+              <Form.Item noStyle dependencies={[name, 'type']}>
+                {({ getFieldValue }) => {
+                  const type = getFieldValue(['query', name, 'type']);
+                  return (
+                    <Form.Item
+                      {...restField}
+                      name={[name, getVariableName(type)]}
+                      className={styles.variableValue}
+                    >
+                      {type === VariableType.Reference ? (
+                        <Select
+                          placeholder={t('common.pleaseSelect')}
+                          options={valueOptions}
+                        ></Select>
+                      ) : (
+                        <Input placeholder={t('common.pleaseInput')} />
+                      )}
+                    </Form.Item>
+                  );
+                }}
+              </Form.Item>
+              <MinusCircleOutlined onClick={() => remove(name)} />
+            </Flex>
+          ))}
+          <Form.Item>
+            <Button
+              type="dashed"
+              onClick={() => add({ type: VariableType.Reference })}
+              block
+              icon={<PlusOutlined />}
+              className={styles.addButton}
+            >
+              {t('flow.addItem')}
+            </Button>
+          </Form.Item>
+        </>
+      )}
+    </Form.List>
+  );
+};
+
+const DynamicInputVariable = ({ nodeId }: IProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Collapse
+      className={styles.dynamicInputVariable}
+      defaultActiveKey={['1']}
+      items={[
+        {
+          key: '1',
+          label: <span className={styles.title}>{t('flow.input')}</span>,
+          children: <DynamicVariableForm nodeId={nodeId}></DynamicVariableForm>,
+        },
+      ]}
+    />
+  );
+};
+
+export default DynamicInputVariable;

web/src/pages/flow/form/components/index.less

+.dynamicInputVariable {
+  background-color: #ebe9e9;
+  :global(.ant-collapse-content) {
+    background-color: #f6f6f6;
+  }
+  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/flow/form/crawler-form/index.tsx

 import { useMemo } from 'react';
 import { CrawlerResultOptions } from '../../constant';
 import { IOperatorForm } from '../../interface';
-const CrawlerForm = ({ onValuesChange, form }: IOperatorForm) => {
+import DynamicInputVariable from '../components/dynamic-input-variable';
+const CrawlerForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   const { t } = useTranslate('flow');
   const crawlerResultOptions = useMemo(() => {
     return CrawlerResultOptions.map((x) => ({
   return (
     <Form
       name="basic"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
       <Form.Item label={t('proxy')} name={'proxy'}>
         <Input placeholder="like: http://127.0.0.1:8888"></Input>
       </Form.Item>

web/src/pages/flow/form/deepl-form/index.tsx

 import { DeepLSourceLangOptions, DeepLTargetLangOptions } from '../../constant';
 import { useBuildSortOptions } from '../../form-hooks';
 import { IOperatorForm } from '../../interface';
+import DynamicInputVariable from '../components/dynamic-input-variable';
 
-const DeepLForm = ({ onValuesChange, form }: IOperatorForm) => {
+const DeepLForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   const { t } = useTranslate('flow');
   const options = useBuildSortOptions();
 
   return (
     <Form
       name="basic"
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
       <TopNItem initialValue={5}></TopNItem>
       <Form.Item label={t('authKey')} name={'auth_key'}>
         <Select options={options}></Select>

web/src/pages/flow/form/duckduckgo-form/index.tsx

 import { useMemo } from 'react';
 import { Channel } from '../../constant';
 import { IOperatorForm } from '../../interface';
+import DynamicInputVariable from '../components/dynamic-input-variable';
 
-const DuckDuckGoForm = ({ onValuesChange, form }: IOperatorForm) => {
+const DuckDuckGoForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   const { t } = useTranslate('flow');
 
   const options = useMemo(() => {
   return (
     <Form
       name="basic"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
       <TopNItem initialValue={10}></TopNItem>
       <Form.Item
         label={t('channel')}

web/src/pages/flow/form/exesql-form/index.tsx

 import { useCallback } from 'react';
 import { ExeSQLOptions } from '../../constant';
 import { IOperatorForm } from '../../interface';
+import DynamicInputVariable from '../components/dynamic-input-variable';
 
-const ExeSQLForm = ({ onValuesChange, form }: IOperatorForm) => {
+const ExeSQLForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   const { t } = useTranslate('flow');
   const { testDbConnect, loading } = useTestDbConnect();
 
   return (
     <Form
       name="basic"
-      labelCol={{ span: 7 }}
-      wrapperCol={{ span: 17 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
       <Form.Item
         label={t('dbType')}
         name={'db_type'}

web/src/pages/flow/form/github-form/index.tsx

 import TopNItem from '@/components/top-n-item';
 import { Form } from 'antd';
 import { IOperatorForm } from '../../interface';
+import DynamicInputVariable from '../components/dynamic-input-variable';
 
-const GithubForm = ({ onValuesChange, form }: IOperatorForm) => {
+const GithubForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   return (
     <Form
       name="basic"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
       <TopNItem initialValue={5}></TopNItem>
     </Form>
   );

web/src/pages/flow/form/google-form/index.tsx

 import { Form, Input, Select } from 'antd';
 import { GoogleCountryOptions, GoogleLanguageOptions } from '../../constant';
 import { IOperatorForm } from '../../interface';
+import DynamicInputVariable from '../components/dynamic-input-variable';
 
-const GoogleForm = ({ onValuesChange, form }: IOperatorForm) => {
+const GoogleForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   const { t } = useTranslate('flow');
 
   return (
     <Form
       name="basic"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
       <TopNItem initialValue={10}></TopNItem>
       <Form.Item label={t('apiKey')} name={'api_key'}>
         <Input></Input>

web/src/pages/flow/form/google-scholar-form/index.tsx

 import { useCallback, useMemo } from 'react';
 import { useBuildSortOptions } from '../../form-hooks';
 import { IOperatorForm } from '../../interface';
+import DynamicInputVariable from '../components/dynamic-input-variable';
 
 const YearPicker = ({
   onChange,
   return <DatePicker picker="year" onChange={handleChange} value={nextValue} />;
 };
 
-const GoogleScholarForm = ({ onValuesChange, form }: IOperatorForm) => {
+const GoogleScholarForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   const { t } = useTranslate('flow');
 
   const options = useBuildSortOptions();
   return (
     <Form
       name="basic"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
       <TopNItem initialValue={5}></TopNItem>
       <Form.Item
         label={t('sortBy')}

web/src/pages/flow/form/jin10-form/index.tsx

   Jin10TypeOptions,
 } from '../../constant';
 import { IOperatorForm } from '../../interface';
+import DynamicInputVariable from '../components/dynamic-input-variable';
 
-const Jin10Form = ({ onValuesChange, form }: IOperatorForm) => {
+const Jin10Form = ({ onValuesChange, form, node }: IOperatorForm) => {
   const { t } = useTranslate('flow');
 
   const jin10TypeOptions = useMemo(() => {
   return (
     <Form
       name="basic"
-      labelCol={{ span: 9 }}
-      wrapperCol={{ span: 15 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
       <Form.Item label={t('type')} name={'type'} initialValue={'flash'}>
         <Select options={jin10TypeOptions}></Select>
       </Form.Item>

web/src/pages/flow/form/keyword-extract-form/index.tsx

 import { Form } from 'antd';
 import { useSetLlmSetting } from '../../hooks';
 import { IOperatorForm } from '../../interface';
+import DynamicInputVariable from '../components/dynamic-input-variable';
 
-const KeywordExtractForm = ({ onValuesChange, form }: IOperatorForm) => {
+const KeywordExtractForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   const { t } = useTranslate('flow');
 
   useSetLlmSetting(form);
   return (
     <Form
       name="basic"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
       <Form.Item
         name={'llm_id'}
         label={t('model', { keyPrefix: 'chat' })}

web/src/pages/flow/form/pubmed-form/index.tsx

 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Input } from 'antd';
 import { IOperatorForm } from '../../interface';
+import DynamicInputVariable from '../components/dynamic-input-variable';
 
-const PubMedForm = ({ onValuesChange, form }: IOperatorForm) => {
+const PubMedForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   const { t } = useTranslate('flow');
 
   return (
     <Form
       name="basic"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
       <TopNItem initialValue={10}></TopNItem>
       <Form.Item
         label={t('email')}

web/src/pages/flow/form/qweather-form/index.tsx

   QWeatherUserTypeOptions,
 } from '../../constant';
 import { IOperatorForm } from '../../interface';
+import DynamicInputVariable from '../components/dynamic-input-variable';
 
-const QWeatherForm = ({ onValuesChange, form }: IOperatorForm) => {
+const QWeatherForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   const { t } = useTranslate('flow');
   const qWeatherLangOptions = useMemo(() => {
     return QWeatherLangOptions.map((x) => ({
   return (
     <Form
       name="basic"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
       <Form.Item label={t('webApiKey')} name={'web_apikey'}>
         <Input></Input>
       </Form.Item>

web/src/pages/flow/form/retrieval-form/index.tsx

 import type { FormProps } from 'antd';
 import { Form, Input } from 'antd';
 import { IOperatorForm } from '../../interface';
+import DynamicInputVariable from '../components/dynamic-input-variable';
 
 type FieldType = {
   top_n?: number;
   console.log('Failed:', errorInfo);
 };
 
-const RetrievalForm = ({ onValuesChange, form }: IOperatorForm) => {
+const RetrievalForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   const { t } = useTranslate('flow');
   return (
     <Form
       form={form}
       layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
       <SimilaritySlider
         isTooltipShown
         vectorSimilarityWeightName="keywords_similarity_weight"

web/src/pages/flow/form/tushare-form/index.tsx

 import { useCallback, useMemo } from 'react';
 import { TuShareSrcOptions } from '../../constant';
 import { IOperatorForm } from '../../interface';
+import DynamicInputVariable from '../components/dynamic-input-variable';
 
 const DateTimePicker = ({
   onChange,
   );
 };
 
-const TuShareForm = ({ onValuesChange, form }: IOperatorForm) => {
+const TuShareForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   const { t } = useTranslate('flow');
 
   const tuShareSrcOptions = useMemo(() => {
   return (
     <Form
       name="basic"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
       <Form.Item
         label={t('token')}
         name={'token'}

web/src/pages/flow/form/wencai-form/index.tsx

 import { useMemo } from 'react';
 import { WenCaiQueryTypeOptions } from '../../constant';
 import { IOperatorForm } from '../../interface';
+import DynamicInputVariable from '../components/dynamic-input-variable';
 
-const WenCaiForm = ({ onValuesChange, form }: IOperatorForm) => {
+const WenCaiForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   const { t } = useTranslate('flow');
 
   const wenCaiQueryTypeOptions = useMemo(() => {
   return (
     <Form
       name="basic"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
       <TopNItem initialValue={20} max={99}></TopNItem>
       <Form.Item label={t('queryType')} name={'query_type'}>
         <Select options={wenCaiQueryTypeOptions}></Select>

web/src/pages/flow/form/wikipedia-form/index.tsx

 import { Form, Select } from 'antd';
 import { LanguageOptions } from '../../constant';
 import { IOperatorForm } from '../../interface';
+import DynamicInputVariable from '../components/dynamic-input-variable';
 
-const WikipediaForm = ({ onValuesChange, form }: IOperatorForm) => {
+const WikipediaForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   const { t } = useTranslate('common');
 
   return (
     <Form
       name="basic"
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
       <TopNItem initialValue={10}></TopNItem>
       <Form.Item label={t('language')} name={'language'}>
         <Select options={LanguageOptions}></Select>

web/src/pages/flow/form/yahoo-finance-form/index.tsx

 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Switch } from 'antd';
 import { IOperatorForm } from '../../interface';
+import DynamicInputVariable from '../components/dynamic-input-variable';
 
-const YahooFinanceForm = ({ onValuesChange, form }: IOperatorForm) => {
+const YahooFinanceForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   const { t } = useTranslate('flow');
 
   return (
     <Form
       name="basic"
-      labelCol={{ span: 10 }}
-      wrapperCol={{ span: 14 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}
+      layout={'vertical'}
     >
+      <DynamicInputVariable nodeId={node?.id}></DynamicInputVariable>
       <Form.Item label={t('info')} name={'info'}>
         <Switch></Switch>
       </Form.Item>