From 839a9467c3b7694074321d233e588c0e8a31355c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Wed, 4 Sep 2024 17:57:44 +0800
Subject: [PATCH 01/16] chore: Update AddFlowVariableModal component to include
 parameter management

---
 web/client/api/flow/index.ts                  |  10 +-
 .../canvas-modal/add-flow-variable-modal.tsx  | 224 +++++++++++++-----
 .../flow/canvas-modal/import-flow-modal.tsx   |   2 +-
 .../flow/canvas-modal/save-flow-modal.tsx     |   4 +
 web/types/flow.ts                             |  21 ++
 5 files changed, 206 insertions(+), 55 deletions(-)

diff --git a/web/client/api/flow/index.ts b/web/client/api/flow/index.ts
index 67c6462e4..c50d51a94 100644
--- a/web/client/api/flow/index.ts
+++ b/web/client/api/flow/index.ts
@@ -6,6 +6,7 @@ import {
   IFlowRefreshParams,
   IFlowResponse,
   IFlowUpdateParam,
+  IFlowVariablesParams,
   IUploadFileRequestParams,
   IUploadFileResponse,
 } from '@/types/flow';
@@ -63,7 +64,6 @@ export const downloadFile = (fileId: string) => {
   return GET<null, any>(`/api/v2/serve/file/files/dbgpt/${fileId}`);
 };
 
-// TODO：wait for interface update
 export const getFlowTemplateList = () => {
   return GET<null, Array<any>>('/api/v2/serve/awel/flow/templates');
 };
@@ -71,3 +71,11 @@ export const getFlowTemplateList = () => {
 export const getFlowTemplateById = (id: string) => {
   return GET<null, any>(`/api/v2/serve/awel/flow/templates/${id}`);
 };
+
+export const getKeys = () => {
+  return GET<null, Array<any>>('/api/v2/serve/awel/variables/keys');
+};
+
+export const getVariablesByKey = ({ key, scope }: { key: string; scope: string }) => {
+  return GET<IFlowVariablesParams, any>('/api/v2/serve/awel/variables', { key, scope });
+};
diff --git a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
index 961ec76f7..94c65aa2a 100644
--- a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
+++ b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
@@ -1,64 +1,131 @@
-// import { IFlowNode } from '@/types/flow';
+import { apiInterceptors, getKeys, getVariablesByKey } from '@/client/api';
+import { IVariableInfo } from '@/types/flow';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Form, Input, Modal, Select, Space } from 'antd';
-import React, { useState } from 'react';
+import { Button, Cascader, Form, Input, Modal, Select, Space } from 'antd';
+import { uniqBy } from 'lodash';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-// ype GroupType = { category: string; categoryLabel: string; nodes: IFlowNode[] };
-type ValueType = 'str' | 'int' | 'float' | 'bool' | 'ref';
-
 const { Option } = Select;
 
+type ValueType = 'str' | 'int' | 'float' | 'bool' | 'ref';
+interface Option {
+  value?: string | number | null;
+  label: React.ReactNode;
+  children?: Option[];
+  isLeaf?: boolean;
+}
+
+interface VariableDict {
+  key: string;
+  name?: string;
+  scope?: string;
+  scope_key?: string;
+  sys_code?: string;
+  user_name?: string;
+}
+
 const DAG_PARAM_KEY = 'dbgpt.core.flow.params';
 const DAG_PARAM_SCOPE = 'flow_priv';
 
-export const AddFlowVariableModal: React.FC = () => {
-  const { t } = useTranslation();
-  // const [operators, setOperators] = useState<Array<IFlowNode>>([]);
-  // const [resources, setResources] = useState<Array<IFlowNode>>([]);
-  // const [operatorsGroup, setOperatorsGroup] = useState<GroupType[]>([]);
-  // const [resourcesGroup, setResourcesGroup] = useState<GroupType[]>([]);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [form] = Form.useForm(); // const [form] = Form.useForm<IFlowUpdateParam>();
+function escapeVariable(value: string, enableEscape: boolean): string {
+  if (!enableEscape) {
+    return value;
+  }
+  return value.replace(/@/g, '\\@').replace(/#/g, '\\#').replace(/%/g, '\\%').replace(/:/g, '\\:');
+}
 
-  const showModal = () => {
-    setIsModalOpen(true);
+function buildVariableString(variableDict) {
+  const scopeSig = '@';
+  const sysCodeSig = '#';
+  const userSig = '%';
+  const kvSig = ':';
+  const enableEscape = true;
+
+  const specialChars = new Set([scopeSig, sysCodeSig, userSig, kvSig]);
+
+  // Replace undefined or null with ""
+  const newVariableDict: VariableDict = {
+    key: variableDict.key || '',
+    name: variableDict.name || '',
+    scope: variableDict.scope || '',
+    scope_key: variableDict.scope_key || '',
+    sys_code: variableDict.sys_code || '',
+    user_name: variableDict.user_name || '',
   };
 
-  // TODO: get keys
-  // useEffect(() => {
-  //   getNodes();
-  // }, []);
+  // Check for special characters in values
+  for (const [key, value] of Object.entries(newVariableDict)) {
+    if (value && [...specialChars].some(char => value.includes(char))) {
+      if (enableEscape) {
+        newVariableDict[key as keyof VariableDict] = escapeVariable(value, enableEscape);
+      } else {
+        throw new Error(
+          `${key} contains special characters, error value: ${value}, special characters: ${[...specialChars].join(', ')}`,
+        );
+      }
+    }
+  }
 
-  // async function getNodes() {
-  //   const [_, data] = await apiInterceptors(getFlowNodes());
-  //   if (data && data.length > 0) {
-  //     localStorage.setItem(FLOW_NODES_KEY, JSON.stringify(data));
-  //     const operatorNodes = data.filter(node => node.flow_type === 'operator');
-  //     const resourceNodes = data.filter(node => node.flow_type === 'resource');
-  //     setOperators(operatorNodes);
-  //     setResources(resourceNodes);
-  //     setOperatorsGroup(groupNodes(operatorNodes));
-  //     setResourcesGroup(groupNodes(resourceNodes));
-  //   }
-  // }
+  const { key, name, scope, scope_key, sys_code, user_name } = newVariableDict;
 
-  // function groupNodes(data: IFlowNode[]) {
-  //   const groups: GroupType[] = [];
-  //   const categoryMap: Record<string, { category: string; categoryLabel: string; nodes: IFlowNode[] }> = {};
-  //   data.forEach(item => {
-  //     const { category, category_label } = item;
-  //     if (!categoryMap[category]) {
-  //       categoryMap[category] = { category, categoryLabel: category_label, nodes: [] };
-  //       groups.push(categoryMap[category]);
-  //     }
-  //     categoryMap[category].nodes.push(item);
-  //   });
-  //   return groups;
-  // }
+  let variableStr = `${key}`;
+
+  if (name) {
+    variableStr += `${kvSig}${name}`;
+  }
+
+  if (scope) {
+    variableStr += `${scopeSig}${scope}`;
+    if (scope_key) {
+      variableStr += `${kvSig}${scope_key}`;
+    }
+  }
+
+  if (sys_code) {
+    variableStr += `${sysCodeSig}${sys_code}`;
+  }
+
+  if (user_name) {
+    variableStr += `${userSig}${user_name}`;
+  }
+
+  return `\${${variableStr}}`;
+}
+
+export const AddFlowVariableModal: React.FC = () => {
+  const { t } = useTranslation();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [form] = Form.useForm();
+  const [controlTypes, setControlTypes] = useState<ValueType[]>(['str']);
+  const [refVariableOptions, setRefVariableOptions] = useState<Option[]>([]);
+
+  useEffect(() => {
+    getKeysData();
+  }, []);
+
+  const getKeysData = async () => {
+    const [err, res] = await apiInterceptors(getKeys());
+
+    if (err) return;
+
+    const keyOptions = res?.map(({ key, label, scope }: IVariableInfo) => ({
+      value: key,
+      label,
+      scope,
+      isLeaf: false,
+    }));
+
+    setRefVariableOptions(keyOptions);
+  };
 
   const onFinish = (values: any) => {
     console.log('Received values of form:', values);
+
+    // 将表单的值转换为 JSON 字符串
+    const variables = JSON.stringify(values.parameters);
+    localStorage.setItem('variables', variables);
+    setIsModalOpen(false);
   };
 
   function onNameChange(e: React.ChangeEvent<HTMLInputElement>, index: number) {
@@ -95,14 +162,45 @@ export const AddFlowVariableModal: React.FC = () => {
   }
 
   function onValueTypeChange(type: ValueType, index: number) {
-    if (type === 'ref') {
+    const newControlTypes = [...controlTypes];
+    newControlTypes[index] = type;
+    setControlTypes(newControlTypes);
+  }
+
+  function loadData(selectedOptions: Option[]) {
+    const targetOption = selectedOptions[selectedOptions.length - 1];
+    const { value, scope } = targetOption as Option & { scope: string };
+
+    setTimeout(async () => {
+      const [err, res] = await apiInterceptors(getVariablesByKey({ key: value as string, scope }));
+
+      if (err) return;
+      if (res?.total_count === 0) {
+        targetOption.isLeaf = true;
+        return;
+      }
+
+      const uniqueItems = uniqBy(res?.items, 'name');
+      targetOption.children = uniqueItems?.map(item => ({
+        value: item?.name,
+        label: item.label,
+        data: item,
+      }));
+      setRefVariableOptions([...refVariableOptions]);
+    }, 1000);
+  }
+
+  function onRefTypeValueChange(value: string[], selectedOptions: Option[], index: number) {
+    // 选择两个select后，获取到的value，才能设置引用变量的值
+    if (value?.length === 2) {
+      const [selectRefKey, selectedRefVariable] = selectedOptions;
+      const selectedVariableData = selectRefKey?.children?.find(({ value }) => value === selectedRefVariable?.value);
+      const variableStr = buildVariableString(selectedVariableData?.data);
+
       const parameters = form.getFieldValue('parameters');
       const param = parameters?.[index];
-
       if (param) {
-        const { name = '' } = param;
-        param.value = `${DAG_PARAM_KEY}:${name}@scope:${DAG_PARAM_SCOPE}`;
-
+        param.value = variableStr;
         form.setFieldsValue({
           parameters: [...parameters],
         });
@@ -117,7 +215,7 @@ export const AddFlowVariableModal: React.FC = () => {
         className='flex items-center justify-center rounded-full left-4 top-4'
         style={{ zIndex: 1050 }}
         icon={<PlusOutlined />}
-        onClick={showModal}
+        onClick={() => setIsModalOpen(true)}
       />
 
       <Modal
@@ -125,6 +223,7 @@ export const AddFlowVariableModal: React.FC = () => {
         open={isModalOpen}
         footer={null}
         width={1000}
+        onCancel={() => setIsModalOpen(false)}
         styles={{
           body: {
             maxHeight: '70vh',
@@ -134,7 +233,6 @@ export const AddFlowVariableModal: React.FC = () => {
             borderRadius: 4,
           },
         }}
-        onClose={() => setIsModalOpen(false)}
       >
         <Form
           name='dynamic_form_nest_item'
@@ -199,13 +297,33 @@ export const AddFlowVariableModal: React.FC = () => {
                       style={{ width: 320 }}
                       rules={[{ required: true, message: 'Missing parameter value' }]}
                     >
-                      <Input placeholder='Parameter Value' />
+                      {controlTypes[index] === 'ref' ? (
+                        <Cascader
+                          placeholder='Select Value'
+                          options={refVariableOptions}
+                          loadData={loadData}
+                          onChange={(value, selectedOptions) => onRefTypeValueChange(value, selectedOptions, index)}
+                          // displayRender={displayRender}
+                          // dropdownRender={dropdownRender}
+                          changeOnSelect
+                        />
+                      ) : (
+                        <Input placeholder='Parameter Value' />
+                      )}
                     </Form.Item>
 
                     <Form.Item {...restField} name={[name, 'description']} label='描述' style={{ width: 170 }}>
                       <Input placeholder='Parameter Description' />
                     </Form.Item>
 
+                    <Form.Item name={[name, 'key']} hidden initialValue='dbgpt.core.flow.params'>
+                      <Input />
+                    </Form.Item>
+
+                    <Form.Item name={[name, 'scope']} hidden initialValue='flow_priv'>
+                      <Input />
+                    </Form.Item>
+
                     <MinusCircleOutlined onClick={() => remove(name)} />
                   </Space>
                 ))}
diff --git a/web/components/flow/canvas-modal/import-flow-modal.tsx b/web/components/flow/canvas-modal/import-flow-modal.tsx
index 803f37d92..aed992d8e 100644
--- a/web/components/flow/canvas-modal/import-flow-modal.tsx
+++ b/web/components/flow/canvas-modal/import-flow-modal.tsx
@@ -89,7 +89,7 @@ export const ImportFlowModal: React.FC<Props> = ({ isImportModalOpen, setIsImpor
             </Upload>
           </Form.Item>
 
-          <Form.Item name='save_flow' label={t('Save_After_Import')}>
+          <Form.Item name='save_flow' label={t('Save_After_Import')} hidden>
             <Radio.Group>
               <Radio value={true}>{t('Yes')}</Radio>
               <Radio value={false}>{t('No')}</Radio>
diff --git a/web/components/flow/canvas-modal/save-flow-modal.tsx b/web/components/flow/canvas-modal/save-flow-modal.tsx
index 708f6f768..9a710a590 100644
--- a/web/components/flow/canvas-modal/save-flow-modal.tsx
+++ b/web/components/flow/canvas-modal/save-flow-modal.tsx
@@ -47,6 +47,8 @@ export const SaveFlowModal: React.FC<Props> = ({
   async function onSaveFlow() {
     const { name, label, description = '', editable = false, state = 'deployed' } = form.getFieldsValue();
     const reactFlowObject = mapHumpToUnderline(reactFlow.toObject() as IFlowData);
+    const variableValues = localStorage.getItem('variables');
+    const variables = JSON.parse(variableValues || '[]');
 
     if (id) {
       const [, , res] = await apiInterceptors(
@@ -58,6 +60,7 @@ export const SaveFlowModal: React.FC<Props> = ({
           uid: id.toString(),
           flow_data: reactFlowObject,
           state,
+          variables,
         }),
       );
 
@@ -75,6 +78,7 @@ export const SaveFlowModal: React.FC<Props> = ({
           editable,
           flow_data: reactFlowObject,
           state,
+          variables,
         }),
       );
 
diff --git a/web/types/flow.ts b/web/types/flow.ts
index 016874500..73cee0bb3 100644
--- a/web/types/flow.ts
+++ b/web/types/flow.ts
@@ -12,6 +12,7 @@ export type IFlowUpdateParam = {
   uid?: string;
   flow_data?: IFlowData;
   state?: FlowState;
+  variables?: IVariableInfo[];
 };
 
 export type IFlowRefreshParams = {
@@ -200,3 +201,23 @@ export type IUploadFileResponse = {
   bucket: string;
   uri?: string;
 };
+
+export type IFlowVariablesParams = {
+  key: string;
+  scope: string;
+  scope_key?: string;
+  user_name?: string;
+  sys_code?: string;
+  page?: number;
+  page_size?: number;
+};
+
+export type IVariableInfo = {
+  key: string;
+  label: string;
+  description: string;
+  value_type: string;
+  category: string;
+  scope: string;
+  scope_key: string | null;
+};

From bb977213642322c5d83f530f5ce9aa9c0b2e3d7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Wed, 4 Sep 2024 18:12:08 +0800
Subject: [PATCH 02/16] Update AddFlowVariableModal component to include
 parameter management

---
 .../flow/canvas-modal/add-flow-variable-modal.tsx   | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
index 94c65aa2a..d48c6c731 100644
--- a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
+++ b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
@@ -122,7 +122,7 @@ export const AddFlowVariableModal: React.FC = () => {
   const onFinish = (values: any) => {
     console.log('Received values of form:', values);
 
-    // 将表单的值转换为 JSON 字符串
+    // save variables to localStorage
     const variables = JSON.stringify(values.parameters);
     localStorage.setItem('variables', variables);
     setIsModalOpen(false);
@@ -201,6 +201,7 @@ export const AddFlowVariableModal: React.FC = () => {
       const param = parameters?.[index];
       if (param) {
         param.value = variableStr;
+        param.category = selectedVariableData?.data?.category;
         form.setFieldsValue({
           parameters: [...parameters],
         });
@@ -316,13 +317,9 @@ export const AddFlowVariableModal: React.FC = () => {
                       <Input placeholder='Parameter Description' />
                     </Form.Item>
 
-                    <Form.Item name={[name, 'key']} hidden initialValue='dbgpt.core.flow.params'>
-                      <Input />
-                    </Form.Item>
-
-                    <Form.Item name={[name, 'scope']} hidden initialValue='flow_priv'>
-                      <Input />
-                    </Form.Item>
+                    <Form.Item name={[name, 'key']} hidden initialValue='dbgpt.core.flow.params' />
+                    <Form.Item name={[name, 'scope']} hidden initialValue='flow_priv' />
+                    <Form.Item name={[name, 'category']} hidden initialValue='common' />
 
                     <MinusCircleOutlined onClick={() => remove(name)} />
                   </Space>

From 04af4997af724d6869fbb0d6bb7d683c50034261 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Wed, 4 Sep 2024 18:41:29 +0800
Subject: [PATCH 03/16] Update AddFlowVariableModal component to include
 parameter management

---
 web/components/flow/canvas-modal/add-flow-variable-modal.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
index d48c6c731..de855d175 100644
--- a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
+++ b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
@@ -120,9 +120,6 @@ export const AddFlowVariableModal: React.FC = () => {
   };
 
   const onFinish = (values: any) => {
-    console.log('Received values of form:', values);
-
-    // save variables to localStorage
     const variables = JSON.stringify(values.parameters);
     localStorage.setItem('variables', variables);
     setIsModalOpen(false);
@@ -202,6 +199,8 @@ export const AddFlowVariableModal: React.FC = () => {
       if (param) {
         param.value = variableStr;
         param.category = selectedVariableData?.data?.category;
+        param.value_type = selectedVariableData?.data?.value_type;
+
         form.setFieldsValue({
           parameters: [...parameters],
         });

From 9a4e6b623e283f120b44668d37aa5da2affe4212 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Wed, 4 Sep 2024 20:57:40 +0800
Subject: [PATCH 04/16] feat: Add support for retrieving keys and variables by
 key in Flow API

---
 web/client/api/flow/index.ts                  |  13 +-
 .../canvas-modal/add-flow-variable-modal.tsx  | 119 +++++++-----------
 web/tsconfig.json                             |   2 +-
 web/types/flow.ts                             |  39 +++++-
 4 files changed, 87 insertions(+), 86 deletions(-)

diff --git a/web/client/api/flow/index.ts b/web/client/api/flow/index.ts
index 275aa83c2..71add7730 100644
--- a/web/client/api/flow/index.ts
+++ b/web/client/api/flow/index.ts
@@ -6,7 +6,10 @@ import {
   IFlowRefreshParams,
   IFlowResponse,
   IFlowUpdateParam,
-  IFlowVariablesParams,
+  IGetKeysRequestParams,
+  IGetKeysResponseData,
+  IGetVariablesByKeyRequestParams,
+  IGetVariablesByKeyResponseData,
   IUploadFileRequestParams,
   IUploadFileResponse,
 } from '@/types/flow';
@@ -72,12 +75,12 @@ export const getFlowTemplateById = (id: string) => {
   return GET<null, any>(`/api/v2/serve/awel/flow/templates/${id}`);
 };
 
-export const getKeys = () => {
-  return GET<null, Array<any>>('/api/v2/serve/awel/variables/keys');
+export const getKeys = (data?: IGetKeysRequestParams) => {
+  return GET<IGetKeysRequestParams, Array<IGetKeysResponseData>>('/api/v2/serve/awel/variables/keys', data);
 };
 
-export const getVariablesByKey = ({ key, scope }: { key: string; scope: string }) => {
-  return GET<IFlowVariablesParams, any>('/api/v2/serve/awel/variables', { key, scope });
+export const getVariablesByKey = (data: IGetVariablesByKeyRequestParams) => {
+  return GET<IGetVariablesByKeyRequestParams, IGetVariablesByKeyResponseData>('/api/v2/serve/awel/variables', data);
 };
 
 export const metadataBatch = (data: IUploadFileRequestParams) => {
diff --git a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
index de855d175..68a024c19 100644
--- a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
+++ b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
@@ -1,5 +1,5 @@
 import { apiInterceptors, getKeys, getVariablesByKey } from '@/client/api';
-import { IVariableInfo } from '@/types/flow';
+import { IGetKeysResponseData, IVariableItem } from '@/types/flow';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Cascader, Form, Input, Modal, Select, Space } from 'antd';
 import { uniqBy } from 'lodash';
@@ -16,18 +16,6 @@ interface Option {
   isLeaf?: boolean;
 }
 
-interface VariableDict {
-  key: string;
-  name?: string;
-  scope?: string;
-  scope_key?: string;
-  sys_code?: string;
-  user_name?: string;
-}
-
-const DAG_PARAM_KEY = 'dbgpt.core.flow.params';
-const DAG_PARAM_SCOPE = 'flow_priv';
-
 function escapeVariable(value: string, enableEscape: boolean): string {
   if (!enableEscape) {
     return value;
@@ -35,7 +23,7 @@ function escapeVariable(value: string, enableEscape: boolean): string {
   return value.replace(/@/g, '\\@').replace(/#/g, '\\#').replace(/%/g, '\\%').replace(/:/g, '\\:');
 }
 
-function buildVariableString(variableDict) {
+function buildVariableString(variableDict: IVariableItem): string {
   const scopeSig = '@';
   const sysCodeSig = '#';
   const userSig = '%';
@@ -44,8 +32,7 @@ function buildVariableString(variableDict) {
 
   const specialChars = new Set([scopeSig, sysCodeSig, userSig, kvSig]);
 
-  // Replace undefined or null with ""
-  const newVariableDict: VariableDict = {
+  const newVariableDict: Partial<IVariableItem> = {
     key: variableDict.key || '',
     name: variableDict.name || '',
     scope: variableDict.scope || '',
@@ -56,9 +43,9 @@ function buildVariableString(variableDict) {
 
   // Check for special characters in values
   for (const [key, value] of Object.entries(newVariableDict)) {
-    if (value && [...specialChars].some(char => value.includes(char))) {
+    if (value && [...specialChars].some(char => (value as string).includes(char))) {
       if (enableEscape) {
-        newVariableDict[key as keyof VariableDict] = escapeVariable(value, enableEscape);
+        newVariableDict[key] = escapeVariable(value as string, enableEscape);
       } else {
         throw new Error(
           `${key} contains special characters, error value: ${value}, special characters: ${[...specialChars].join(', ')}`,
@@ -71,25 +58,15 @@ function buildVariableString(variableDict) {
 
   let variableStr = `${key}`;
 
-  if (name) {
-    variableStr += `${kvSig}${name}`;
-  }
-
-  if (scope) {
+  if (name) variableStr += `${kvSig}${name}`;
+  if (scope || scope_key) {
     variableStr += `${scopeSig}${scope}`;
     if (scope_key) {
       variableStr += `${kvSig}${scope_key}`;
     }
   }
-
-  if (sys_code) {
-    variableStr += `${sysCodeSig}${sys_code}`;
-  }
-
-  if (user_name) {
-    variableStr += `${userSig}${user_name}`;
-  }
-
+  if (sys_code) variableStr += `${sysCodeSig}${sys_code}`;
+  if (user_name) variableStr += `${userSig}${user_name}`;
   return `\${${variableStr}}`;
 }
 
@@ -109,7 +86,7 @@ export const AddFlowVariableModal: React.FC = () => {
 
     if (err) return;
 
-    const keyOptions = res?.map(({ key, label, scope }: IVariableInfo) => ({
+    const keyOptions = res?.map(({ key, label, scope }: IGetKeysResponseData) => ({
       value: key,
       label,
       scope,
@@ -125,7 +102,7 @@ export const AddFlowVariableModal: React.FC = () => {
     setIsModalOpen(false);
   };
 
-  function onNameChange(e: React.ChangeEvent<HTMLInputElement>, index: number) {
+  const onNameChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
     const name = e.target.value;
 
     const result = name
@@ -139,32 +116,15 @@ export const AddFlowVariableModal: React.FC = () => {
         value: result,
       },
     ]);
+  };
 
-    // change value to ref
-    const type = form.getFieldValue(['parameters', index, 'value_type']);
-
-    if (type === 'ref') {
-      const parameters = form.getFieldValue('parameters');
-      const param = parameters?.[index];
-
-      if (param) {
-        const { name = '' } = param;
-        param.value = `${DAG_PARAM_KEY}:${name}@scope:${DAG_PARAM_SCOPE}`;
-
-        form.setFieldsValue({
-          parameters: [...parameters],
-        });
-      }
-    }
-  }
-
-  function onValueTypeChange(type: ValueType, index: number) {
+  const onValueTypeChange = (type: ValueType, index: number) => {
     const newControlTypes = [...controlTypes];
     newControlTypes[index] = type;
     setControlTypes(newControlTypes);
-  }
+  };
 
-  function loadData(selectedOptions: Option[]) {
+  const loadData = (selectedOptions: Option[]) => {
     const targetOption = selectedOptions[selectedOptions.length - 1];
     const { value, scope } = targetOption as Option & { scope: string };
 
@@ -181,32 +141,39 @@ export const AddFlowVariableModal: React.FC = () => {
       targetOption.children = uniqueItems?.map(item => ({
         value: item?.name,
         label: item.label,
-        data: item,
+        item: item,
       }));
       setRefVariableOptions([...refVariableOptions]);
     }, 1000);
-  }
+  };
 
-  function onRefTypeValueChange(value: string[], selectedOptions: Option[], index: number) {
-    // 选择两个select后，获取到的value，才能设置引用变量的值
-    if (value?.length === 2) {
-      const [selectRefKey, selectedRefVariable] = selectedOptions;
-      const selectedVariableData = selectRefKey?.children?.find(({ value }) => value === selectedRefVariable?.value);
-      const variableStr = buildVariableString(selectedVariableData?.data);
-
-      const parameters = form.getFieldValue('parameters');
-      const param = parameters?.[index];
-      if (param) {
-        param.value = variableStr;
-        param.category = selectedVariableData?.data?.category;
-        param.value_type = selectedVariableData?.data?.value_type;
-
-        form.setFieldsValue({
-          parameters: [...parameters],
-        });
-      }
+  const onRefTypeValueChange = (value: (string | number | null)[], selectedOptions: Option[], index: number) => {
+    // when select ref variable, must be select two options(key and variable)
+    if (value?.length !== 2) {
+      return;
     }
-  }
+
+    const [selectRefKey, selectedRefVariable] = selectedOptions as Option[];
+
+    const selectedVariable = selectRefKey?.children?.find(
+      ({ value }) => value === selectedRefVariable?.value,
+    ) as Option & { item: IVariableItem };
+
+    // build variable string by rule
+    const variableStr = buildVariableString(selectedVariable?.item);
+
+    const parameters = form.getFieldValue('parameters');
+    const param = parameters?.[index];
+    if (param) {
+      param.value = variableStr;
+      param.category = selectedVariable?.item?.category;
+      param.value_type = selectedVariable?.item?.value_type;
+
+      form.setFieldsValue({
+        parameters: [...parameters],
+      });
+    }
+  };
 
   return (
     <>
diff --git a/web/tsconfig.json b/web/tsconfig.json
index e06a4454a..3c5dca710 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
diff --git a/web/types/flow.ts b/web/types/flow.ts
index 73cee0bb3..d06249a32 100644
--- a/web/types/flow.ts
+++ b/web/types/flow.ts
@@ -12,7 +12,7 @@ export type IFlowUpdateParam = {
   uid?: string;
   flow_data?: IFlowData;
   state?: FlowState;
-  variables?: IVariableInfo[];
+  variables?: IGetKeysResponseData[];
 };
 
 export type IFlowRefreshParams = {
@@ -202,7 +202,23 @@ export type IUploadFileResponse = {
   uri?: string;
 };
 
-export type IFlowVariablesParams = {
+export type IGetKeysRequestParams = {
+  user_name?: string;
+  sys_code?: string;
+  category?: string;
+};
+
+export type IGetKeysResponseData = {
+  key: string;
+  label: string;
+  description: string;
+  value_type: string;
+  category: string;
+  scope: string;
+  scope_key: string | null;
+};
+
+export type IGetVariablesByKeyRequestParams = {
   key: string;
   scope: string;
   scope_key?: string;
@@ -212,12 +228,27 @@ export type IFlowVariablesParams = {
   page_size?: number;
 };
 
-export type IVariableInfo = {
+export type IGetVariablesByKeyResponseData = {
+  items: IVariableItem[];
+  total_count: number;
+  total_pages: number;
+  page: number;
+  page_size: number;
+};
+
+export type IVariableItem = {
   key: string;
   label: string;
-  description: string;
+  description: string | null;
   value_type: string;
   category: string;
   scope: string;
   scope_key: string | null;
+  name: string;
+  value: string;
+  enabled: boolean;
+  user_name: string | null;
+  sys_code: string | null;
+  id: number;
+  [key: string]: any;
 };

From 25944c7720786a431760d591077595afcd730ed1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Wed, 4 Sep 2024 21:16:30 +0800
Subject: [PATCH 05/16] feat: Refactor AddFlowVariableModal to use
 buildVariableString from utils/flow

---
 .../canvas-modal/add-flow-variable-modal.tsx  | 55 +-----------------
 web/utils/flow.ts                             | 56 ++++++++++++++++++-
 2 files changed, 56 insertions(+), 55 deletions(-)

diff --git a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
index 68a024c19..d246beb14 100644
--- a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
+++ b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
@@ -1,5 +1,6 @@
 import { apiInterceptors, getKeys, getVariablesByKey } from '@/client/api';
 import { IGetKeysResponseData, IVariableItem } from '@/types/flow';
+import { buildVariableString } from '@/utils/flow';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Cascader, Form, Input, Modal, Select, Space } from 'antd';
 import { uniqBy } from 'lodash';
@@ -16,60 +17,6 @@ interface Option {
   isLeaf?: boolean;
 }
 
-function escapeVariable(value: string, enableEscape: boolean): string {
-  if (!enableEscape) {
-    return value;
-  }
-  return value.replace(/@/g, '\\@').replace(/#/g, '\\#').replace(/%/g, '\\%').replace(/:/g, '\\:');
-}
-
-function buildVariableString(variableDict: IVariableItem): string {
-  const scopeSig = '@';
-  const sysCodeSig = '#';
-  const userSig = '%';
-  const kvSig = ':';
-  const enableEscape = true;
-
-  const specialChars = new Set([scopeSig, sysCodeSig, userSig, kvSig]);
-
-  const newVariableDict: Partial<IVariableItem> = {
-    key: variableDict.key || '',
-    name: variableDict.name || '',
-    scope: variableDict.scope || '',
-    scope_key: variableDict.scope_key || '',
-    sys_code: variableDict.sys_code || '',
-    user_name: variableDict.user_name || '',
-  };
-
-  // Check for special characters in values
-  for (const [key, value] of Object.entries(newVariableDict)) {
-    if (value && [...specialChars].some(char => (value as string).includes(char))) {
-      if (enableEscape) {
-        newVariableDict[key] = escapeVariable(value as string, enableEscape);
-      } else {
-        throw new Error(
-          `${key} contains special characters, error value: ${value}, special characters: ${[...specialChars].join(', ')}`,
-        );
-      }
-    }
-  }
-
-  const { key, name, scope, scope_key, sys_code, user_name } = newVariableDict;
-
-  let variableStr = `${key}`;
-
-  if (name) variableStr += `${kvSig}${name}`;
-  if (scope || scope_key) {
-    variableStr += `${scopeSig}${scope}`;
-    if (scope_key) {
-      variableStr += `${kvSig}${scope_key}`;
-    }
-  }
-  if (sys_code) variableStr += `${sysCodeSig}${sys_code}`;
-  if (user_name) variableStr += `${userSig}${user_name}`;
-  return `\${${variableStr}}`;
-}
-
 export const AddFlowVariableModal: React.FC = () => {
   const { t } = useTranslation();
   const [isModalOpen, setIsModalOpen] = useState(false);
diff --git a/web/utils/flow.ts b/web/utils/flow.ts
index 37346d735..5dd6840a4 100644
--- a/web/utils/flow.ts
+++ b/web/utils/flow.ts
@@ -1,4 +1,4 @@
-import { IFlowData, IFlowDataNode, IFlowNode } from '@/types/flow';
+import { IFlowData, IFlowDataNode, IFlowNode, IVariableItem } from '@/types/flow';
 import { Node } from 'reactflow';
 
 export const getUniqueNodeId = (nodeData: IFlowNode, nodes: Node[]) => {
@@ -140,3 +140,57 @@ export const convertKeysToCamelCase = (obj: Record<string, any>): Record<string,
 
   return convert(obj);
 };
+
+function escapeVariable(value: string, enableEscape: boolean): string {
+  if (!enableEscape) {
+    return value;
+  }
+  return value.replace(/@/g, '\\@').replace(/#/g, '\\#').replace(/%/g, '\\%').replace(/:/g, '\\:');
+}
+
+export function buildVariableString(variableDict: IVariableItem): string {
+  const scopeSig = '@';
+  const sysCodeSig = '#';
+  const userSig = '%';
+  const kvSig = ':';
+  const enableEscape = true;
+
+  const specialChars = new Set([scopeSig, sysCodeSig, userSig, kvSig]);
+
+  const newVariableDict: Partial<IVariableItem> = {
+    key: variableDict.key || '',
+    name: variableDict.name || '',
+    scope: variableDict.scope || '',
+    scope_key: variableDict.scope_key || '',
+    sys_code: variableDict.sys_code || '',
+    user_name: variableDict.user_name || '',
+  };
+
+  // Check for special characters in values
+  for (const [key, value] of Object.entries(newVariableDict)) {
+    if (value && [...specialChars].some(char => (value as string).includes(char))) {
+      if (enableEscape) {
+        newVariableDict[key] = escapeVariable(value as string, enableEscape);
+      } else {
+        throw new Error(
+          `${key} contains special characters, error value: ${value}, special characters: ${[...specialChars].join(', ')}`,
+        );
+      }
+    }
+  }
+
+  const { key, name, scope, scope_key, sys_code, user_name } = newVariableDict;
+
+  let variableStr = `${key}`;
+
+  if (name) variableStr += `${kvSig}${name}`;
+  if (scope || scope_key) {
+    variableStr += `${scopeSig}${scope}`;
+    if (scope_key) {
+      variableStr += `${kvSig}${scope_key}`;
+    }
+  }
+  if (sys_code) variableStr += `${sysCodeSig}${sys_code}`;
+  if (user_name) variableStr += `${userSig}${user_name}`;
+  return `\${${variableStr}}`;
+}

From f8ce7d4580fa695e001582d167575d53e48754ac Mon Sep 17 00:00:00 2001
From: Fangyin Cheng <staneyffer@gmail.com>
Date: Wed, 4 Sep 2024 22:08:55 +0800
Subject: [PATCH 06/16] feat: Check serialization for AWEL operator function

---
 .dockerignore                                |  5 ++
 dbgpt/_private/config.py                     |  4 +
 dbgpt/app/initialization/scheduler.py        |  4 +-
 dbgpt/core/awel/dag/base.py                  | 37 +++++++++
 dbgpt/core/awel/operators/base.py            | 19 ++++-
 dbgpt/core/awel/operators/common_operator.py | 17 ++++
 dbgpt/model/proxy/base.py                    | 11 +++
 dbgpt/serve/flow/api/variables_provider.py   |  2 +-
 dbgpt/storage/metadata/_base_dao.py          |  3 +
 dbgpt/util/net_utils.py                      | 32 ++++++++
 dbgpt/util/serialization/check.py            | 85 ++++++++++++++++++++
 docker/base/build_image.sh                   | 21 ++++-
 12 files changed, 236 insertions(+), 4 deletions(-)
 create mode 100644 dbgpt/util/serialization/check.py

diff --git a/.dockerignore b/.dockerignore
index 823dcbd59..7e4266596 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,3 +1,6 @@
+.env
+.git/
+./.mypy_cache/
 models/
 plugins/
 pilot/data
@@ -5,6 +8,8 @@ pilot/message
 logs/
 venv/
 web/node_modules/
+web/.next/
+web/.env
 docs/node_modules/
 build/
 docs/build/
diff --git a/dbgpt/_private/config.py b/dbgpt/_private/config.py
index cd7936a60..eaf1e953c 100644
--- a/dbgpt/_private/config.py
+++ b/dbgpt/_private/config.py
@@ -332,6 +332,10 @@ class Config(metaclass=Singleton):
             os.getenv("MULTI_INSTANCE", "False").lower() == "true"
         )
 
+        self.SCHEDULER_ENABLED = (
+            os.getenv("SCHEDULER_ENABLED", "True").lower() == "true"
+        )
+
     @property
     def local_db_manager(self) -> "ConnectorManager":
         from dbgpt.datasource.manages import ConnectorManager
diff --git a/dbgpt/app/initialization/scheduler.py b/dbgpt/app/initialization/scheduler.py
index 70b7bb71a..36a3107db 100644
--- a/dbgpt/app/initialization/scheduler.py
+++ b/dbgpt/app/initialization/scheduler.py
@@ -19,12 +19,14 @@ class DefaultScheduler(BaseComponent):
         system_app: SystemApp,
         scheduler_delay_ms: int = 5000,
         scheduler_interval_ms: int = 1000,
+        scheduler_enable: bool = True,
     ):
         super().__init__(system_app)
         self.system_app = system_app
         self._scheduler_interval_ms = scheduler_interval_ms
         self._scheduler_delay_ms = scheduler_delay_ms
         self._stop_event = threading.Event()
+        self._scheduler_enable = scheduler_enable
 
     def init_app(self, system_app: SystemApp):
         self.system_app = system_app
@@ -39,7 +41,7 @@ class DefaultScheduler(BaseComponent):
 
     def _scheduler(self):
         time.sleep(self._scheduler_delay_ms / 1000)
-        while not self._stop_event.is_set():
+        while self._scheduler_enable and not self._stop_event.is_set():
             try:
                 schedule.run_pending()
             except Exception as e:
diff --git a/dbgpt/core/awel/dag/base.py b/dbgpt/core/awel/dag/base.py
index 2f3521d24..2c12b3bad 100644
--- a/dbgpt/core/awel/dag/base.py
+++ b/dbgpt/core/awel/dag/base.py
@@ -145,6 +145,9 @@ class DAGVar:
     _executor: Optional[Executor] = None
 
     _variables_provider: Optional["VariablesProvider"] = None
+    # Whether check serializable for AWEL, it will be set to True when running AWEL
+    # operator in remote environment
+    _check_serializable: Optional[bool] = None
 
     @classmethod
     def enter_dag(cls, dag) -> None:
@@ -257,6 +260,24 @@ class DAGVar:
         """
         cls._variables_provider = variables_provider
 
+    @classmethod
+    def get_check_serializable(cls) -> Optional[bool]:
+        """Get the check serializable flag.
+
+        Returns:
+            Optional[bool]: The check serializable flag
+        """
+        return cls._check_serializable
+
+    @classmethod
+    def set_check_serializable(cls, check_serializable: bool) -> None:
+        """Set the check serializable flag.
+
+        Args:
+            check_serializable (bool): The check serializable flag to set
+        """
+        cls._check_serializable = check_serializable
+
 
 class DAGLifecycle:
     """The lifecycle of DAG."""
@@ -286,6 +307,7 @@ class DAGNode(DAGLifecycle, DependencyMixin, ViewMixin, ABC):
         node_name: Optional[str] = None,
         system_app: Optional[SystemApp] = None,
         executor: Optional[Executor] = None,
+        check_serializable: Optional[bool] = None,
         **kwargs,
     ) -> None:
         """Initialize a DAGNode.
@@ -311,6 +333,7 @@ class DAGNode(DAGLifecycle, DependencyMixin, ViewMixin, ABC):
             node_id = self._dag._new_node_id()
         self._node_id: Optional[str] = node_id
         self._node_name: Optional[str] = node_name
+        self._check_serializable = check_serializable
         if self._dag:
             self._dag._append_node(self)
 
@@ -486,6 +509,20 @@ class DAGNode(DAGLifecycle, DependencyMixin, ViewMixin, ABC):
         """Return the string of current DAGNode."""
         return self.__repr__()
 
+    @classmethod
+    def _do_check_serializable(cls, obj: Any, obj_name: str = "Object"):
+        """Check whether the current DAGNode is serializable."""
+        from dbgpt.util.serialization.check import check_serializable
+
+        check_serializable(obj, obj_name)
+
+    @property
+    def check_serializable(self) -> bool:
+        """Whether check serializable for current DAGNode."""
+        if self._check_serializable is not None:
+            return self._check_serializable or False
+        return DAGVar.get_check_serializable() or False
+
 
 def _build_task_key(task_name: str, key: str) -> str:
     return f"{task_name}___$$$$$$___{key}"
diff --git a/dbgpt/core/awel/operators/base.py b/dbgpt/core/awel/operators/base.py
index da82d2856..7c66c0adc 100644
--- a/dbgpt/core/awel/operators/base.py
+++ b/dbgpt/core/awel/operators/base.py
@@ -193,12 +193,29 @@ class BaseOperator(DAGNode, ABC, Generic[OUT], metaclass=BaseOperatorMeta):
             self.incremental_output = bool(kwargs["incremental_output"])
         if "output_format" in kwargs:
             self.output_format = kwargs["output_format"]
-
         self._runner: WorkflowRunner = runner
         self._dag_ctx: Optional[DAGContext] = None
         self._can_skip_in_branch = can_skip_in_branch
         self._variables_provider = variables_provider
 
+    def __getstate__(self):
+        """Customize the pickling process."""
+        state = self.__dict__.copy()
+        if "_runner" in state:
+            del state["_runner"]
+        if "_executor" in state:
+            del state["_executor"]
+        if "_system_app" in state:
+            del state["_system_app"]
+        return state
+
+    def __setstate__(self, state):
+        """Customize the unpickling process."""
+        self.__dict__.update(state)
+        self._runner = default_runner
+        self._system_app = DAGVar.get_current_system_app()
+        self._executor = DAGVar.get_executor()
+
     @property
     def current_dag_context(self) -> DAGContext:
         """Return the current DAG context."""
diff --git a/dbgpt/core/awel/operators/common_operator.py b/dbgpt/core/awel/operators/common_operator.py
index f8bc25370..763992323 100644
--- a/dbgpt/core/awel/operators/common_operator.py
+++ b/dbgpt/core/awel/operators/common_operator.py
@@ -41,6 +41,12 @@ class JoinOperator(BaseOperator, Generic[OUT]):
         super().__init__(can_skip_in_branch=can_skip_in_branch, **kwargs)
         if not callable(combine_function):
             raise ValueError("combine_function must be callable")
+
+        if self.check_serializable:
+            super()._do_check_serializable(
+                combine_function,
+                f"JoinOperator: {self}, combine_function: {combine_function}",
+            )
         self.combine_function = combine_function
 
     async def _do_run(self, dag_ctx: DAGContext) -> TaskOutput[OUT]:
@@ -83,6 +89,11 @@ class ReduceStreamOperator(BaseOperator, Generic[IN, OUT]):
         super().__init__(**kwargs)
         if reduce_function and not callable(reduce_function):
             raise ValueError("reduce_function must be callable")
+        if reduce_function and self.check_serializable:
+            super()._do_check_serializable(
+                reduce_function, f"Operator: {self}, reduce_function: {reduce_function}"
+            )
+
         self.reduce_function = reduce_function
 
     async def _do_run(self, dag_ctx: DAGContext) -> TaskOutput[OUT]:
@@ -133,6 +144,12 @@ class MapOperator(BaseOperator, Generic[IN, OUT]):
         super().__init__(**kwargs)
         if map_function and not callable(map_function):
             raise ValueError("map_function must be callable")
+
+        if map_function and self.check_serializable:
+            super()._do_check_serializable(
+                map_function, f"Operator: {self}, map_function: {map_function}"
+            )
+
         self.map_function = map_function
 
     async def _do_run(self, dag_ctx: DAGContext) -> TaskOutput[OUT]:
diff --git a/dbgpt/model/proxy/base.py b/dbgpt/model/proxy/base.py
index 129dcf11e..2a1a3b6b8 100644
--- a/dbgpt/model/proxy/base.py
+++ b/dbgpt/model/proxy/base.py
@@ -94,6 +94,17 @@ class ProxyLLMClient(LLMClient):
         self.executor = executor or ThreadPoolExecutor()
         self.proxy_tokenizer = proxy_tokenizer or TiktokenProxyTokenizer()
 
+    def __getstate__(self):
+        """Customize the serialization of the object"""
+        state = self.__dict__.copy()
+        state.pop("executor")
+        return state
+
+    def __setstate__(self, state):
+        """Customize the deserialization of the object"""
+        self.__dict__.update(state)
+        self.executor = ThreadPoolExecutor()
+
     @classmethod
     @abstractmethod
     def new_client(
diff --git a/dbgpt/serve/flow/api/variables_provider.py b/dbgpt/serve/flow/api/variables_provider.py
index 27ed63bf5..10bb8a656 100644
--- a/dbgpt/serve/flow/api/variables_provider.py
+++ b/dbgpt/serve/flow/api/variables_provider.py
@@ -341,7 +341,7 @@ class BuiltinAgentsVariablesProvider(BuiltinVariablesProvider):
                 StorageVariables(
                     key=key,
                     name=agent["name"],
-                    label=agent["desc"],
+                    label=agent["name"],
                     value=agent["name"],
                     scope=scope,
                     scope_key=scope_key,
diff --git a/dbgpt/storage/metadata/_base_dao.py b/dbgpt/storage/metadata/_base_dao.py
index 04b74e81c..199b3eabc 100644
--- a/dbgpt/storage/metadata/_base_dao.py
+++ b/dbgpt/storage/metadata/_base_dao.py
@@ -285,6 +285,9 @@ class BaseDao(Generic[T, REQ, RES]):
             else model_to_dict(query_request)
         )
         for key, value in query_dict.items():
+            if value and isinstance(value, (list, tuple, dict, set)):
+                # Skip the list, tuple, dict, set
+                continue
             if value is not None and hasattr(model_cls, key):
                 if isinstance(value, list):
                     if len(value) > 0:
diff --git a/dbgpt/util/net_utils.py b/dbgpt/util/net_utils.py
index fc9fb3f86..ce41ba781 100644
--- a/dbgpt/util/net_utils.py
+++ b/dbgpt/util/net_utils.py
@@ -1,5 +1,6 @@
 import errno
 import socket
+from typing import Set, Tuple
 
 
 def _get_ip_address(address: str = "10.254.254.254:1") -> str:
@@ -22,3 +23,34 @@ def _get_ip_address(address: str = "10.254.254.254:1") -> str:
     finally:
         s.close()
     return curr_address
+
+
+async def _async_get_free_port(
+    port_range: Tuple[int, int], timeout: int, used_ports: Set[int]
+):
+    import asyncio
+
+    loop = asyncio.get_running_loop()
+    return await loop.run_in_executor(
+        None, _get_free_port, port_range, timeout, used_ports
+    )
+
+
+def _get_free_port(port_range: Tuple[int, int], timeout: int, used_ports: Set[int]):
+    import random
+
+    available_ports = set(range(port_range[0], port_range[1] + 1)) - used_ports
+    if not available_ports:
+        raise RuntimeError("No available ports in the specified range")
+
+    while available_ports:
+        port = random.choice(list(available_ports))
+        try:
+            with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
+                s.bind(("", port))
+                used_ports.add(port)
+                return port
+        except OSError:
+            available_ports.remove(port)
+
+    raise RuntimeError("No available ports in the specified range")
diff --git a/dbgpt/util/serialization/check.py b/dbgpt/util/serialization/check.py
new file mode 100644
index 000000000..10a86edb2
--- /dev/null
+++ b/dbgpt/util/serialization/check.py
@@ -0,0 +1,85 @@
+import inspect
+from io import StringIO
+from typing import Any, Dict, Optional, TextIO
+
+import cloudpickle
+
+
+def check_serializable(
+    obj: Any, obj_name: str = "Object", error_msg: str = "Object is not serializable"
+):
+    try:
+        cloudpickle.dumps(obj)
+    except Exception as e:
+        inspect_info = inspect_serializability(obj, obj_name)
+        msg = f"{error_msg}\n{inspect_info['report']}"
+        raise TypeError(msg) from e
+
+
+class SerializabilityInspector:
+    def __init__(self, stream: Optional[TextIO] = None):
+        self.stream = stream or StringIO()
+        self.failures = {}
+        self.indent_level = 0
+
+    def log(self, message: str):
+        indent = "  " * self.indent_level
+        self.stream.write(f"{indent}{message}\n")
+
+    def inspect(self, obj: Any, name: str, depth: int = 3) -> bool:
+        self.log(f"Inspecting '{name}'")
+        self.indent_level += 1
+
+        try:
+            cloudpickle.dumps(obj)
+            self.indent_level -= 1
+            return True
+        except Exception as e:
+            self.failures[name] = str(e)
+            self.log(f"Failure: {str(e)}")
+
+            if depth > 0:
+                if inspect.isfunction(obj) or inspect.ismethod(obj):
+                    self._inspect_function(obj, depth - 1)
+                elif hasattr(obj, "__dict__"):
+                    self._inspect_object(obj, depth - 1)
+
+            self.indent_level -= 1
+            return False
+
+    def _inspect_function(self, func, depth):
+        closure = inspect.getclosurevars(func)
+        for name, value in closure.nonlocals.items():
+            self.inspect(value, f"{func.__name__}.{name}", depth)
+        for name, value in closure.globals.items():
+            self.inspect(value, f"global:{name}", depth)
+
+    def _inspect_object(self, obj, depth):
+        for name, value in inspect.getmembers(obj):
+            if not name.startswith("__"):
+                self.inspect(value, f"{type(obj).__name__}.{name}", depth)
+
+    def get_report(self) -> str:
+        summary = "\nSummary of Serialization Failures:\n"
+        if not self.failures:
+            summary += "All components are serializable.\n"
+        else:
+            for name, error in self.failures.items():
+                summary += f"  - {name}: {error}\n"
+
+        return self.stream.getvalue() + summary
+
+
+def inspect_serializability(
+    obj: Any,
+    name: Optional[str] = None,
+    depth: int = 5,
+    stream: Optional[TextIO] = None,
+) -> Dict[str, Any]:
+    inspector = SerializabilityInspector(stream)
+    success = inspector.inspect(obj, name or type(obj).__name__, depth)
+    return {
+        "success": success,
+        "failures": inspector.failures,
+        "report": inspector.get_report(),
+    }
diff --git a/docker/base/build_image.sh b/docker/base/build_image.sh
index 028dcc809..08cd0b549 100755
--- a/docker/base/build_image.sh
+++ b/docker/base/build_image.sh
@@ -20,16 +20,21 @@ LOAD_EXAMPLES="true"
 BUILD_NETWORK=""
 DB_GPT_INSTALL_MODEL="default"
 
+DOCKERFILE="Dockerfile"
+IMAGE_NAME_SUFFIX=""
+
 usage () {
     echo "USAGE: $0 [--base-image nvidia/cuda:12.1.0-runtime-ubuntu22.04] [--image-name db-gpt]"
     echo "  [-b|--base-image base image name] Base image name"
     echo "  [-n|--image-name image name] Current image name, default: db-gpt"
+    echo "  [--image-name-suffix image name suffix] Image name suffix"
     echo "  [-i|--pip-index-url pip index url] Pip index url, default: https://pypi.org/simple"
     echo "  [--language en or zh] You language, default: en"
     echo "  [--build-local-code true or false] Whether to use the local project code to package the image, default: true"
     echo "  [--load-examples true or false] Whether to load examples to default database default: true"
     echo "  [--network network name] The network of docker build"
     echo "  [--install-mode mode name] Installation mode name, default: default, If you completely use openai's service, you can set the mode name to 'openai'"
+    echo "  [-f|--dockerfile dockerfile] Dockerfile name, default: Dockerfile"
     echo "  [-h|--help] Usage message"
 }
 
@@ -46,6 +51,11 @@ while [[ $# -gt 0 ]]; do
         shift # past argument
         shift # past value
         ;;
+        --image-name-suffix)
+        IMAGE_NAME_SUFFIX="$2"
+        shift # past argument
+        shift # past value
+        ;;
         -i|--pip-index-url)
         PIP_INDEX_URL="$2"
         shift
@@ -80,6 +90,11 @@ while [[ $# -gt 0 ]]; do
         shift # past argument
         shift # past value
         ;;
+        -f|--dockerfile)
+        DOCKERFILE="$2"
+        shift # past argument
+        shift # past value
+        ;;
         -h|--help)
         help="true"
         shift
@@ -111,6 +126,10 @@ else
     BASE_IMAGE=$IMAGE_NAME_ARGS
 fi
 
+if [ -n "$IMAGE_NAME_SUFFIX" ]; then
+    IMAGE_NAME="$IMAGE_NAME-$IMAGE_NAME_SUFFIX"
+fi
+
 echo "Begin build docker image, base image: ${BASE_IMAGE}, target image name: ${IMAGE_NAME}"
 
 docker build $BUILD_NETWORK \
@@ -120,5 +139,5 @@ docker build $BUILD_NETWORK \
     --build-arg BUILD_LOCAL_CODE=$BUILD_LOCAL_CODE \
     --build-arg LOAD_EXAMPLES=$LOAD_EXAMPLES \
     --build-arg DB_GPT_INSTALL_MODEL=$DB_GPT_INSTALL_MODEL \
-    -f Dockerfile \
+    -f $DOCKERFILE \
     -t $IMAGE_NAME $WORK_DIR/../../

From 8fb595aa864b6a3aca6b1b3d4ad0c7ffccb8a01a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Wed, 4 Sep 2024 23:23:07 +0800
Subject: [PATCH 07/16] feat: Update AddNodesSider component to use Switch
 instead of Tag for node visibility

---
 web/components/flow/add-nodes-sider.tsx             | 13 +++++++++----
 web/locales/en/flow.ts                              |  4 ++--
 web/locales/zh/flow.ts                              |  4 ++--
 web/pages/mobile/chat/components/InputContainer.tsx | 12 ++++++------
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/web/components/flow/add-nodes-sider.tsx b/web/components/flow/add-nodes-sider.tsx
index d71a12707..2db8f45c5 100644
--- a/web/components/flow/add-nodes-sider.tsx
+++ b/web/components/flow/add-nodes-sider.tsx
@@ -4,7 +4,8 @@ import { IFlowNode } from '@/types/flow';
 import { FLOW_NODES_KEY } from '@/utils';
 import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
 import type { CollapseProps } from 'antd';
-import { Badge, Collapse, Input, Layout, Space, Tag } from 'antd';
+import { Badge, Collapse, Input, Layout, Space, Switch } from 'antd';
+import classnames from 'classnames';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import StaticNodes from './static-nodes';
@@ -199,9 +200,13 @@ const AddNodesSider: React.FC = () => {
             {t('add_node')}
           </p>
 
-          <Tag color={isAllNodesVisible ? 'green' : 'blue'} onClick={onModeChange} className='mr-0'>
-            {isAllNodesVisible ? t('All_Nodes') : t('Higher_Order_Nodes')}
-          </Tag>
+          <Switch
+            checkedChildren='高阶'
+            unCheckedChildren='全部'
+            onClick={onModeChange}
+            className={classnames('w-20', { 'bg-zinc-400': isAllNodesVisible })}
+            defaultChecked
+          />
         </div>
 
         <Search placeholder='Search node' onSearch={searchNode} allowClear />
diff --git a/web/locales/en/flow.ts b/web/locales/en/flow.ts
index 27b388e74..11b86a39a 100644
--- a/web/locales/en/flow.ts
+++ b/web/locales/en/flow.ts
@@ -19,6 +19,6 @@ export const FlowEn = {
   Please_Add_Nodes_First: 'Please add nodes first',
   Add_Global_Variable_of_Flow: 'Add global variable of flow',
   Add_Parameter: 'Add Parameter',
-  Higher_Order_Nodes: 'Higher Order Nodes',
-  All_Nodes: 'All Nodes',
+  Higher_Order_Nodes: 'Higher Order',
+  All_Nodes: 'All',
 };
diff --git a/web/locales/zh/flow.ts b/web/locales/zh/flow.ts
index f846059c4..462c429fa 100644
--- a/web/locales/zh/flow.ts
+++ b/web/locales/zh/flow.ts
@@ -19,6 +19,6 @@ export const FlowZn = {
   Please_Add_Nodes_First: '请先添加节点',
   Add_Global_Variable_of_Flow: '添加 Flow 全局变量',
   Add_Parameter: '添加参数',
-  Higher_Order_Nodes: '高阶节点',
-  All_Nodes: '所有节点',
+  Higher_Order_Nodes: '高阶',
+  All_Nodes: '所有',
 };
diff --git a/web/pages/mobile/chat/components/InputContainer.tsx b/web/pages/mobile/chat/components/InputContainer.tsx
index f9af2ea3e..59a545684 100644
--- a/web/pages/mobile/chat/components/InputContainer.tsx
+++ b/web/pages/mobile/chat/components/InputContainer.tsx
@@ -6,7 +6,7 @@ import { ClearOutlined, LoadingOutlined, PauseCircleOutlined, RedoOutlined, Send
 import { EventStreamContentType, fetchEventSource } from '@microsoft/fetch-event-source';
 import { useRequest } from 'ahooks';
 import { Button, Input, Popover, Spin, Tag } from 'antd';
-import cls from 'classnames';
+import classnames from 'classnames';
 import { useSearchParams } from 'next/navigation';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { MobileChatContext } from '../';
@@ -245,7 +245,7 @@ const InputContainer: React.FC = () => {
         <div className='flex items-center justify-between text-lg font-bold'>
           <Popover content='暂停回复' trigger={['hover']}>
             <PauseCircleOutlined
-              className={cls('p-2 cursor-pointer', {
+              className={classnames('p-2 cursor-pointer', {
                 'text-[#0c75fc]': canAbort,
                 'text-gray-400': !canAbort,
               })}
@@ -254,7 +254,7 @@ const InputContainer: React.FC = () => {
           </Popover>
           <Popover content='再来一次' trigger={['hover']}>
             <RedoOutlined
-              className={cls('p-2 cursor-pointer', {
+              className={classnames('p-2 cursor-pointer', {
                 'text-gray-400': !history.length || !canNewChat,
               })}
               onClick={redo}
@@ -265,7 +265,7 @@ const InputContainer: React.FC = () => {
           ) : (
             <Popover content='清除历史' trigger={['hover']}>
               <ClearOutlined
-                className={cls('p-2 cursor-pointer', {
+                className={classnames('p-2 cursor-pointer', {
                   'text-gray-400': !history.length || !canNewChat,
                 })}
                 onClick={clearHistory}
@@ -276,7 +276,7 @@ const InputContainer: React.FC = () => {
       </div>
       {/* 输入框 */}
       <div
-        className={cls(
+        className={classnames(
           'flex py-2 px-3 items-center justify-between bg-white dark:bg-[#242733] dark:border-[#6f7f95] rounded-xl border',
           {
             'border-[#0c75fc] dark:border-[rgba(12,117,252,0.8)]': isFocus,
@@ -323,7 +323,7 @@ const InputContainer: React.FC = () => {
 
         <Button
           type='primary'
-          className={cls('flex items-center justify-center rounded-lg bg-button-gradient border-0 ml-2', {
+          className={classnames('flex items-center justify-center rounded-lg bg-button-gradient border-0 ml-2', {
             'opacity-40 cursor-not-allowed': !userInput.trim() || !canNewChat,
           })}
           onClick={onSubmit}

From 00d9e51495714d478a0ae2b5f6f7919b6702c84a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Wed, 4 Sep 2024 23:33:54 +0800
Subject: [PATCH 08/16] refactor: Simplify AppContent component by removing
 unnecessary div and flex container

---
 web/pages/construct/app/index.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/web/pages/construct/app/index.tsx b/web/pages/construct/app/index.tsx
index 1e67c989f..737753589 100644
--- a/web/pages/construct/app/index.tsx
+++ b/web/pages/construct/app/index.tsx
@@ -308,15 +308,14 @@ export default function AppContent() {
                 className='w-[230px] h-[40px] border-1 border-white backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60'
               />
             </div>
-            <div className='flex items-center gap-4 h-10'>
-              <Button
-                className='border-none text-white bg-button-gradient h-full flex items-center'
-                icon={<PlusOutlined className='text-base' />}
-                onClick={handleCreate}
-              >
-                {t('create_app')}
-              </Button>
-            </div>
+
+            <Button
+              className='border-none text-white bg-button-gradient flex items-center'
+              icon={<PlusOutlined className='text-base' />}
+              onClick={handleCreate}
+            >
+              {t('create_app')}
+            </Button>
           </div>
           <div className=' w-full flex flex-wrap pb-12 mx-[-8px]'>
             {apps.map(item => {

From ef0443290263d2f5f3f57807b0fc8e475a37c7b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Wed, 4 Sep 2024 23:46:05 +0800
Subject: [PATCH 09/16] fix: set flow variable default value

---
 .../flow/canvas-modal/add-flow-variable-modal.tsx | 10 +++++++---
 web/pages/construct/flow/canvas/index.tsx         | 15 +++++++--------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
index d246beb14..6be1c6982 100644
--- a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
+++ b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
@@ -1,5 +1,5 @@
 import { apiInterceptors, getKeys, getVariablesByKey } from '@/client/api';
-import { IGetKeysResponseData, IVariableItem } from '@/types/flow';
+import { IFlowUpdateParam, IGetKeysResponseData, IVariableItem } from '@/types/flow';
 import { buildVariableString } from '@/utils/flow';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Cascader, Form, Input, Modal, Select, Space } from 'antd';
@@ -17,7 +17,11 @@ interface Option {
   isLeaf?: boolean;
 }
 
-export const AddFlowVariableModal: React.FC = () => {
+type Props = {
+  flowInfo?: IFlowUpdateParam;
+};
+
+export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo }) => {
   const { t } = useTranslation();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [form] = Form.useForm();
@@ -155,7 +159,7 @@ export const AddFlowVariableModal: React.FC = () => {
           autoComplete='off'
           layout='vertical'
           className='mt-8'
-          initialValues={{ parameters: [{}] }}
+          initialValues={{ parameters: flowInfo?.variables || [{}] }}
         >
           <Form.List name='parameters'>
             {(fields, { add, remove }) => (
diff --git a/web/pages/construct/flow/canvas/index.tsx b/web/pages/construct/flow/canvas/index.tsx
index b3d0889a5..c3c91e515 100644
--- a/web/pages/construct/flow/canvas/index.tsx
+++ b/web/pages/construct/flow/canvas/index.tsx
@@ -26,14 +26,13 @@ import 'reactflow/dist/style.css';
 
 const nodeTypes = { customNode: CanvasNode };
 const edgeTypes = { buttonedge: ButtonEdge };
+
 const Canvas: React.FC = () => {
-
   const { t } = useTranslation();
-  const [messageApi, contextHolder] = message.useMessage();
-
   const searchParams = useSearchParams();
   const id = searchParams?.get('id') || '';
   const reactFlow = useReactFlow();
+  const [messageApi, contextHolder] = message.useMessage();
 
   const [loading, setLoading] = useState(false);
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
@@ -43,10 +42,10 @@ const Canvas: React.FC = () => {
   const [isSaveFlowModalOpen, setIsSaveFlowModalOpen] = useState(false);
   const [isExportFlowModalOpen, setIsExportFlowModalOpen] = useState(false);
   const [isImportModalOpen, setIsImportFlowModalOpen] = useState(false);
-  
-  if (localStorage.getItem('importFlowData') ) {
-    const importFlowData = JSON.parse(localStorage.getItem('importFlowData') );
-    localStorage.removeItem('importFlowData')
+
+  if (localStorage.getItem('importFlowData')) {
+    const importFlowData = JSON.parse(localStorage.getItem('importFlowData') || '');
+    localStorage.removeItem('importFlowData');
     setLoading(true);
     const flowData = mapUnderlineToHump(importFlowData.flow_data);
     setFlowInfo(importFlowData);
@@ -260,7 +259,7 @@ const Canvas: React.FC = () => {
 
               <Background color='#aaa' gap={16} />
 
-              <AddFlowVariableModal />
+              <AddFlowVariableModal flowInfo={flowInfo} />
             </ReactFlow>
           </div>
         </div>

From 5617385b881a007ec47930116d129cab93db1155 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Wed, 4 Sep 2024 23:57:59 +0800
Subject: [PATCH 10/16] feat: Add helper function to render control component
 in AddFlowVariableModal

---
 .../canvas-modal/add-flow-variable-modal.tsx  | 45 +++++++++++++------
 1 file changed, 32 insertions(+), 13 deletions(-)

diff --git a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
index 6be1c6982..5105acb94 100644
--- a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
+++ b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
@@ -126,6 +126,37 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo }) => {
     }
   };
 
+  // Helper function to render the appropriate control component
+  const renderVariableValue = (type: string, index: number) => {
+    switch (type) {
+      case 'ref':
+        return (
+          <Cascader
+            placeholder='Select Value'
+            options={refVariableOptions}
+            loadData={loadData}
+            onChange={(value, selectedOptions) => onRefTypeValueChange(value, selectedOptions, index)}
+            changeOnSelect
+          />
+        );
+      case 'str':
+        return <Input placeholder='Parameter Value' />;
+      case 'int':
+        return <Input type='number' placeholder='Parameter Value' />;
+      case 'float':
+        return <Input type='number' step='0.01' placeholder='Parameter Value' />;
+      case 'bool':
+        return (
+          <Select placeholder='Select Value'>
+            <Option value='true'>True</Option>
+            <Option value='false'>False</Option>
+          </Select>
+        );
+      default:
+        return <Input placeholder='Parameter Value' />;
+    }
+  };
+
   return (
     <>
       <Button
@@ -215,19 +246,7 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo }) => {
                       style={{ width: 320 }}
                       rules={[{ required: true, message: 'Missing parameter value' }]}
                     >
-                      {controlTypes[index] === 'ref' ? (
-                        <Cascader
-                          placeholder='Select Value'
-                          options={refVariableOptions}
-                          loadData={loadData}
-                          onChange={(value, selectedOptions) => onRefTypeValueChange(value, selectedOptions, index)}
-                          // displayRender={displayRender}
-                          // dropdownRender={dropdownRender}
-                          changeOnSelect
-                        />
-                      ) : (
-                        <Input placeholder='Parameter Value' />
-                      )}
+                      {renderVariableValue(controlTypes[index], index)}
                     </Form.Item>
 
                     <Form.Item {...restField} name={[name, 'description']} label='描述' style={{ width: 170 }}>

From 62b051c56c08a15733aa883cbb35c1166bd3253c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Thu, 5 Sep 2024 01:03:02 +0800
Subject: [PATCH 11/16] refactor: Update AddFlowVariableModal to use
 buildVariableString from utils/flow

---
 .../canvas-modal/add-flow-variable-modal.tsx    | 17 +++++++++--------
 .../flow/canvas-modal/save-flow-modal.tsx       |  6 ++----
 web/pages/construct/flow/canvas/index.tsx       |  8 +++++---
 web/types/flow.ts                               |  7 ++++---
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
index 5105acb94..5bd2997cb 100644
--- a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
+++ b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
@@ -2,7 +2,7 @@ import { apiInterceptors, getKeys, getVariablesByKey } from '@/client/api';
 import { IFlowUpdateParam, IGetKeysResponseData, IVariableItem } from '@/types/flow';
 import { buildVariableString } from '@/utils/flow';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Cascader, Form, Input, Modal, Select, Space } from 'antd';
+import { Button, Cascader, Form, Input, InputNumber, Modal, Select, Space } from 'antd';
 import { uniqBy } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -19,9 +19,10 @@ interface Option {
 
 type Props = {
   flowInfo?: IFlowUpdateParam;
+  setFlowInfo: React.Dispatch<React.SetStateAction<IFlowUpdateParam | undefined>>;
 };
 
-export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo }) => {
+export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo }) => {
   const { t } = useTranslation();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [form] = Form.useForm();
@@ -48,8 +49,8 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo }) => {
   };
 
   const onFinish = (values: any) => {
-    const variables = JSON.stringify(values.parameters);
-    localStorage.setItem('variables', variables);
+    const newFlowInfo = { ...flowInfo, variables: values?.parameters || [] } as IFlowUpdateParam;
+    setFlowInfo(newFlowInfo);
     setIsModalOpen(false);
   };
 
@@ -142,14 +143,14 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo }) => {
       case 'str':
         return <Input placeholder='Parameter Value' />;
       case 'int':
-        return <Input type='number' placeholder='Parameter Value' />;
+        return <InputNumber placeholder='Parameter Value' className='w-full' />;
       case 'float':
-        return <Input type='number' step='0.01' placeholder='Parameter Value' />;
+        return <InputNumber placeholder='Parameter Value' className='w-full' />;
       case 'bool':
         return (
           <Select placeholder='Select Value'>
-            <Option value='true'>True</Option>
-            <Option value='false'>False</Option>
+            <Option value={true}>True</Option>
+            <Option value={false}>False</Option>
           </Select>
         );
       default:
diff --git a/web/components/flow/canvas-modal/save-flow-modal.tsx b/web/components/flow/canvas-modal/save-flow-modal.tsx
index 9a710a590..e979989ac 100644
--- a/web/components/flow/canvas-modal/save-flow-modal.tsx
+++ b/web/components/flow/canvas-modal/save-flow-modal.tsx
@@ -47,8 +47,6 @@ export const SaveFlowModal: React.FC<Props> = ({
   async function onSaveFlow() {
     const { name, label, description = '', editable = false, state = 'deployed' } = form.getFieldsValue();
     const reactFlowObject = mapHumpToUnderline(reactFlow.toObject() as IFlowData);
-    const variableValues = localStorage.getItem('variables');
-    const variables = JSON.parse(variableValues || '[]');
 
     if (id) {
       const [, , res] = await apiInterceptors(
@@ -60,7 +58,7 @@ export const SaveFlowModal: React.FC<Props> = ({
           uid: id.toString(),
           flow_data: reactFlowObject,
           state,
-          variables,
+          variables: flowInfo?.variables,
         }),
       );
 
@@ -78,7 +76,7 @@ export const SaveFlowModal: React.FC<Props> = ({
           editable,
           flow_data: reactFlowObject,
           state,
-          variables,
+          variables: flowInfo?.variables,
         }),
       );
 
diff --git a/web/pages/construct/flow/canvas/index.tsx b/web/pages/construct/flow/canvas/index.tsx
index c3c91e515..29ecf7698 100644
--- a/web/pages/construct/flow/canvas/index.tsx
+++ b/web/pages/construct/flow/canvas/index.tsx
@@ -33,12 +33,13 @@ const Canvas: React.FC = () => {
   const id = searchParams?.get('id') || '';
   const reactFlow = useReactFlow();
   const [messageApi, contextHolder] = message.useMessage();
+  const reactFlowWrapper = useRef<HTMLDivElement>(null);
 
-  const [loading, setLoading] = useState(false);
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const reactFlowWrapper = useRef<HTMLDivElement>(null);
+
   const [flowInfo, setFlowInfo] = useState<IFlowUpdateParam>();
+  const [loading, setLoading] = useState(false);
   const [isSaveFlowModalOpen, setIsSaveFlowModalOpen] = useState(false);
   const [isExportFlowModalOpen, setIsExportFlowModalOpen] = useState(false);
   const [isImportModalOpen, setIsImportFlowModalOpen] = useState(false);
@@ -53,6 +54,7 @@ const Canvas: React.FC = () => {
     setEdges(flowData.edges);
     setLoading(false);
   }
+
   async function getFlowData() {
     setLoading(true);
     const [_, data] = await apiInterceptors(getFlowById(id));
@@ -259,7 +261,7 @@ const Canvas: React.FC = () => {
 
               <Background color='#aaa' gap={16} />
 
-              <AddFlowVariableModal flowInfo={flowInfo} />
+              <AddFlowVariableModal flowInfo={flowInfo} setFlowInfo={setFlowInfo} />
             </ReactFlow>
           </div>
         </div>
diff --git a/web/types/flow.ts b/web/types/flow.ts
index d06249a32..0b17ce3b3 100644
--- a/web/types/flow.ts
+++ b/web/types/flow.ts
@@ -12,7 +12,7 @@ export type IFlowUpdateParam = {
   uid?: string;
   flow_data?: IFlowData;
   state?: FlowState;
-  variables?: IGetKeysResponseData[];
+  variables?: IVariableItem[];
 };
 
 export type IFlowRefreshParams = {
@@ -170,8 +170,9 @@ export type IFlowDataViewport = {
 };
 
 export type IFlowData = {
-  nodes: Array<IFlowDataNode>;
-  edges: Array<IFlowDataEdge>;
+  nodes: IFlowDataNode[];
+  edges: IFlowDataEdge[];
+  variables?: IVariableItem[];
   viewport: IFlowDataViewport;
 };
 

From 45dec7a4cc5df30a9385d2706f6091a94c6853b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Thu, 5 Sep 2024 01:18:13 +0800
Subject: [PATCH 12/16] refactor: Improve input handling in
 AddFlowVariableModal

---
 .../flow/canvas-modal/add-flow-variable-modal.tsx     | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
index 5bd2997cb..8da9e50c4 100644
--- a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
+++ b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
@@ -143,9 +143,16 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
       case 'str':
         return <Input placeholder='Parameter Value' />;
       case 'int':
-        return <InputNumber placeholder='Parameter Value' className='w-full' />;
+        return (
+          <InputNumber
+            step={1}
+            placeholder='Parameter Value'
+            parser={value => value?.replace(/[^\-?\d]/g, '') || 0}
+            style={{ width: '100%' }}
+          />
+        );
       case 'float':
-        return <InputNumber placeholder='Parameter Value' className='w-full' />;
+        return <InputNumber placeholder='Parameter Value' style={{ width: '100%' }} />;
       case 'bool':
         return (
           <Select placeholder='Select Value'>

From a8b6b82850ac998f4476bad453995558c06fb1fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Thu, 5 Sep 2024 01:30:35 +0800
Subject: [PATCH 13/16] refactor: Update AddFlowVariableModal to use
 buildVariableString from utils/flow

---
 .../canvas-modal/add-flow-variable-modal.tsx  | 39 ++++++++-----------
 1 file changed, 17 insertions(+), 22 deletions(-)

diff --git a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
index 8da9e50c4..fba1a9339 100644
--- a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
+++ b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
@@ -3,20 +3,15 @@ import { IFlowUpdateParam, IGetKeysResponseData, IVariableItem } from '@/types/f
 import { buildVariableString } from '@/utils/flow';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Cascader, Form, Input, InputNumber, Modal, Select, Space } from 'antd';
+import { DefaultOptionType } from 'antd/es/cascader';
 import { uniqBy } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const { Option } = Select;
+const VALUE_TYPES = ['str', 'int', 'float', 'bool', 'ref'] as const;
 
-type ValueType = 'str' | 'int' | 'float' | 'bool' | 'ref';
-interface Option {
-  value?: string | number | null;
-  label: React.ReactNode;
-  children?: Option[];
-  isLeaf?: boolean;
-}
-
+type ValueType = (typeof VALUE_TYPES)[number];
 type Props = {
   flowInfo?: IFlowUpdateParam;
   setFlowInfo: React.Dispatch<React.SetStateAction<IFlowUpdateParam | undefined>>;
@@ -27,7 +22,7 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [form] = Form.useForm();
   const [controlTypes, setControlTypes] = useState<ValueType[]>(['str']);
-  const [refVariableOptions, setRefVariableOptions] = useState<Option[]>([]);
+  const [refVariableOptions, setRefVariableOptions] = useState<DefaultOptionType[]>([]);
 
   useEffect(() => {
     getKeysData();
@@ -57,7 +52,7 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
   const onNameChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
     const name = e.target.value;
 
-    const result = name
+    const newValue = name
       ?.split('_')
       ?.map(word => word.charAt(0).toUpperCase() + word.slice(1))
       ?.join(' ');
@@ -65,7 +60,7 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
     form.setFields([
       {
         name: ['parameters', index, 'label'],
-        value: result,
+        value: newValue,
       },
     ]);
   };
@@ -76,9 +71,9 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
     setControlTypes(newControlTypes);
   };
 
-  const loadData = (selectedOptions: Option[]) => {
+  const loadData = (selectedOptions: DefaultOptionType[]) => {
     const targetOption = selectedOptions[selectedOptions.length - 1];
-    const { value, scope } = targetOption as Option & { scope: string };
+    const { value, scope } = targetOption as DefaultOptionType & { scope: string };
 
     setTimeout(async () => {
       const [err, res] = await apiInterceptors(getVariablesByKey({ key: value as string, scope }));
@@ -99,21 +94,21 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
     }, 1000);
   };
 
-  const onRefTypeValueChange = (value: (string | number | null)[], selectedOptions: Option[], index: number) => {
+  const onRefTypeValueChange = (
+    value: (string | number | null)[],
+    selectedOptions: DefaultOptionType[],
+    index: number,
+  ) => {
     // when select ref variable, must be select two options(key and variable)
-    if (value?.length !== 2) {
-      return;
-    }
-
-    const [selectRefKey, selectedRefVariable] = selectedOptions as Option[];
+    if (value?.length !== 2) return;
 
+    const [selectRefKey, selectedRefVariable] = selectedOptions as DefaultOptionType[];
     const selectedVariable = selectRefKey?.children?.find(
       ({ value }) => value === selectedRefVariable?.value,
-    ) as Option & { item: IVariableItem };
+    ) as DefaultOptionType & { item: IVariableItem };
 
     // build variable string by rule
     const variableStr = buildVariableString(selectedVariable?.item);
-
     const parameters = form.getFieldValue('parameters');
     const param = parameters?.[index];
     if (param) {
@@ -239,7 +234,7 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
                       rules={[{ required: true, message: 'Missing parameter type' }]}
                     >
                       <Select placeholder='Select' onChange={value => onValueTypeChange(value, index)}>
-                        {['str', 'int', 'float', 'bool', 'ref'].map(type => (
+                        {VALUE_TYPES.map(type => (
                           <Option key={type} value={type}>
                             {type}
                           </Option>

From 104b7d0e6562399ae22ed010527b54684ab1242b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Thu, 5 Sep 2024 01:31:28 +0800
Subject: [PATCH 14/16] refactor: Update AddFlowVariableModal to set a minimum
 height for the body

---
 web/components/flow/canvas-modal/add-flow-variable-modal.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
index fba1a9339..c9fddccc5 100644
--- a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
+++ b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
@@ -178,6 +178,7 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
         onCancel={() => setIsModalOpen(false)}
         styles={{
           body: {
+            minHeight: '50vh',
             maxHeight: '70vh',
             overflow: 'scroll',
             backgroundColor: 'rgba(0,0,0,0.02)',

From 4d4aac47acdd143b3bb698ae4cfbc21a5bace889 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Thu, 5 Sep 2024 01:41:44 +0800
Subject: [PATCH 15/16] refactor: Update AddFlowVariableModal to include hover
 effect on variable fields

---
 .../flow/canvas-modal/add-flow-variable-modal.tsx           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
index c9fddccc5..523af3b3a 100644
--- a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
+++ b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
@@ -200,7 +200,7 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
             {(fields, { add, remove }) => (
               <>
                 {fields.map(({ key, name, ...restField }, index) => (
-                  <Space key={key}>
+                  <Space key={key} className='hover:bg-gray-100 pt-2 pl-2'>
                     <Form.Item
                       {...restField}
                       name={[name, 'name']}
@@ -257,11 +257,11 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
                       <Input placeholder='Parameter Description' />
                     </Form.Item>
 
+                    <MinusCircleOutlined onClick={() => remove(name)} />
+
                     <Form.Item name={[name, 'key']} hidden initialValue='dbgpt.core.flow.params' />
                     <Form.Item name={[name, 'scope']} hidden initialValue='flow_priv' />
                     <Form.Item name={[name, 'category']} hidden initialValue='common' />
-
-                    <MinusCircleOutlined onClick={() => remove(name)} />
                   </Space>
                 ))}
 

From f2145726012a3cc6c93c342c4d34cd5d3116cc42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Thu, 5 Sep 2024 01:53:18 +0800
Subject: [PATCH 16/16] refactor: Update AddFlowVariableModal styles and
 functionality

---
 .../canvas-modal/add-flow-variable-modal.tsx  | 26 +++++++--------
 .../flow/canvas-modal/export-flow-modal.tsx   | 23 ++++++-------
 .../flow/canvas-modal/import-flow-modal.tsx   | 26 +++++++--------
 .../flow/canvas-modal/save-flow-modal.tsx     | 32 ++++++-------------
 4 files changed, 42 insertions(+), 65 deletions(-)

diff --git a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
index 523af3b3a..0c76ff19b 100644
--- a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
+++ b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
@@ -172,20 +172,27 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
 
       <Modal
         title={t('Add_Global_Variable_of_Flow')}
-        open={isModalOpen}
-        footer={null}
         width={1000}
-        onCancel={() => setIsModalOpen(false)}
+        open={isModalOpen}
         styles={{
           body: {
-            minHeight: '50vh',
-            maxHeight: '70vh',
+            minHeight: '40vh',
+            maxHeight: '65vh',
             overflow: 'scroll',
             backgroundColor: 'rgba(0,0,0,0.02)',
             padding: '0 8px',
             borderRadius: 4,
           },
         }}
+        onCancel={() => setIsModalOpen(false)}
+        footer={[
+          <Button key='cancel' onClick={() => setIsModalOpen(false)}>
+            {t('cancel')}
+          </Button>,
+          <Button key='submit' type='primary' onClick={() => form.submit()}>
+            {t('verify')}
+          </Button>,
+        ]}
       >
         <Form
           name='dynamic_form_nest_item'
@@ -273,15 +280,6 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
               </>
             )}
           </Form.List>
-
-          <Form.Item wrapperCol={{ offset: 20, span: 4 }}>
-            <Space>
-              <Button onClick={() => setIsModalOpen(false)}>{t('cancel')}</Button>
-              <Button type='primary' htmlType='submit'>
-                {t('verify')}
-              </Button>
-            </Space>
-          </Form.Item>
         </Form>
       </Modal>
     </>
diff --git a/web/components/flow/canvas-modal/export-flow-modal.tsx b/web/components/flow/canvas-modal/export-flow-modal.tsx
index 0d056abac..21f60efbe 100644
--- a/web/components/flow/canvas-modal/export-flow-modal.tsx
+++ b/web/components/flow/canvas-modal/export-flow-modal.tsx
@@ -1,5 +1,5 @@
 import { IFlowData, IFlowUpdateParam } from '@/types/flow';
-import { Button, Form, Input, Modal, Radio, Space, message } from 'antd';
+import { Button, Form, Input, Modal, Radio, message } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { ReactFlowInstance } from 'reactflow';
 
@@ -46,8 +46,14 @@ export const ExportFlowModal: React.FC<Props> = ({
         title={t('Export_Flow')}
         open={isExportFlowModalOpen}
         onCancel={() => setIsExportFlowModalOpen(false)}
-        cancelButtonProps={{ className: 'hidden' }}
-        okButtonProps={{ className: 'hidden' }}
+        footer={[
+          <Button key='cancel' onClick={() => setIsExportFlowModalOpen(false)}>
+            {t('cancel')}
+          </Button>,
+          <Button key='submit' type='primary' onClick={() => form.submit()}>
+            {t('verify')}
+          </Button>,
+        ]}
       >
         <Form
           form={form}
@@ -78,17 +84,6 @@ export const ExportFlowModal: React.FC<Props> = ({
           <Form.Item hidden name='uid'>
             <Input />
           </Form.Item>
-
-          <Form.Item wrapperCol={{ offset: 14, span: 8 }}>
-            <Space>
-              <Button htmlType='button' onClick={() => setIsExportFlowModalOpen(false)}>
-                {t('cancel')}
-              </Button>
-              <Button type='primary' htmlType='submit'>
-                {t('verify')}
-              </Button>
-            </Space>
-          </Form.Item>
         </Form>
       </Modal>
 
diff --git a/web/components/flow/canvas-modal/import-flow-modal.tsx b/web/components/flow/canvas-modal/import-flow-modal.tsx
index aecf64e57..ec3738d72 100644
--- a/web/components/flow/canvas-modal/import-flow-modal.tsx
+++ b/web/components/flow/canvas-modal/import-flow-modal.tsx
@@ -1,10 +1,10 @@
 import { apiInterceptors, importFlow } from '@/client/api';
+import CanvasWrapper from '@/pages/construct/flow/canvas/index';
 import { UploadOutlined } from '@ant-design/icons';
-import { Button, Form, GetProp, Modal, Radio, Space, Upload, UploadFile, UploadProps, message } from 'antd';
+import { Button, Form, GetProp, Modal, Radio, Upload, UploadFile, UploadProps, message } from 'antd';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Edge, Node } from 'reactflow';
-import CanvasWrapper from '@/pages/construct/flow/canvas/index';
 type Props = {
   isImportModalOpen: boolean;
   setNodes: React.Dispatch<React.SetStateAction<Node<any, string | undefined>[]>>;
@@ -39,10 +39,9 @@ export const ImportFlowModal: React.FC<Props> = ({ isImportModalOpen, setIsImpor
     if (res?.success) {
       messageApi.success(t('Import_Flow_Success'));
       localStorage.setItem('importFlowData', JSON.stringify(res?.data));
-      CanvasWrapper(res?.data)
+      CanvasWrapper(res?.data);
     } else if (res?.err_msg) {
       messageApi.error(res?.err_msg);
-    
     }
     setIsImportFlowModalOpen(false);
   };
@@ -67,8 +66,14 @@ export const ImportFlowModal: React.FC<Props> = ({ isImportModalOpen, setIsImpor
         title={t('Import_Flow')}
         open={isImportModalOpen}
         onCancel={() => setIsImportFlowModalOpen(false)}
-        cancelButtonProps={{ className: 'hidden' }}
-        okButtonProps={{ className: 'hidden' }}
+        footer={[
+          <Button key='cancel' onClick={() => setIsImportFlowModalOpen(false)}>
+            {t('cancel')}
+          </Button>,
+          <Button key='submit' type='primary' onClick={() => form.submit()}>
+            {t('verify')}
+          </Button>,
+        ]}
       >
         <Form
           form={form}
@@ -98,15 +103,6 @@ export const ImportFlowModal: React.FC<Props> = ({ isImportModalOpen, setIsImpor
               <Radio value={false}>{t('No')}</Radio>
             </Radio.Group>
           </Form.Item>
-
-          <Form.Item wrapperCol={{ offset: 14, span: 8 }}>
-            <Space>
-              <Button onClick={() => setIsImportFlowModalOpen(false)}>{t('cancel')}</Button>
-              <Button type='primary' htmlType='submit'>
-                {t('verify')}
-              </Button>
-            </Space>
-          </Form.Item>
         </Form>
       </Modal>
 
diff --git a/web/components/flow/canvas-modal/save-flow-modal.tsx b/web/components/flow/canvas-modal/save-flow-modal.tsx
index e979989ac..0434af90f 100644
--- a/web/components/flow/canvas-modal/save-flow-modal.tsx
+++ b/web/components/flow/canvas-modal/save-flow-modal.tsx
@@ -1,7 +1,7 @@
 import { addFlow, apiInterceptors, updateFlowById } from '@/client/api';
 import { IFlowData, IFlowUpdateParam } from '@/types/flow';
 import { mapHumpToUnderline } from '@/utils/flow';
-import { Button, Checkbox, Form, Input, Modal, Space, message } from 'antd';
+import { Button, Checkbox, Form, Input, Modal, message } from 'antd';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -93,11 +93,15 @@ export const SaveFlowModal: React.FC<Props> = ({
       <Modal
         title={t('flow_modal_title')}
         open={isSaveFlowModalOpen}
-        onCancel={() => {
-          setIsSaveFlowModalOpen(false);
-        }}
-        cancelButtonProps={{ className: 'hidden' }}
-        okButtonProps={{ className: 'hidden' }}
+        onCancel={() => setIsSaveFlowModalOpen(false)}
+        footer={[
+          <Button key='cancel' onClick={() => setIsSaveFlowModalOpen(false)}>
+            {t('cancel')}
+          </Button>,
+          <Button key='submit' type='primary' onClick={() => form.submit()}>
+            {t('verify')}
+          </Button>,
+        ]}
       >
         <Form
           name='flow_form'
@@ -162,22 +166,6 @@ export const SaveFlowModal: React.FC<Props> = ({
               }}
             />
           </Form.Item>
-
-          <Form.Item wrapperCol={{ offset: 14, span: 8 }}>
-            <Space>
-              <Button
-                htmlType='button'
-                onClick={() => {
-                  setIsSaveFlowModalOpen(false);
-                }}
-              >
-                {t('cancel')}
-              </Button>
-              <Button type='primary' htmlType='submit'>
-                {t('verify')}
-              </Button>
-            </Space>
-          </Form.Item>
         </Form>
       </Modal>