feat: add custom edge (#1061)

### What problem does this PR solve?
feat: add custom edge
feat: add flow card
feat: add store for canvas
#918

### Type of change

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

web/package-lock.json

@@ -10,6 +10,7 @@
         "@ant-design/pro-components": "^2.6.46",
         "@ant-design/pro-layout": "^7.17.16",
         "@js-preview/excel": "^1.7.8",
+        "@tanstack/react-query": "^5.40.0",
         "ahooks": "^3.7.10",
         "antd": "^5.12.7",
         "axios": "^1.6.3",
@@ -39,10 +40,12 @@
         "umi": "^4.0.90",
         "umi-request": "^1.4.0",
         "unist-util-visit-parents": "^6.0.1",
-        "uuid": "^9.0.1"
+        "uuid": "^9.0.1",
+        "zustand": "^4.5.2"
       },
       "devDependencies": {
         "@react-dev-inspector/umi4-plugin": "^2.0.1",
+        "@redux-devtools/extension": "^3.3.0",
         "@testing-library/jest-dom": "^6.4.5",
         "@testing-library/react": "^15.0.7",
         "@types/dagre": "^0.7.52",
@@ -3915,40 +3918,6 @@
         "react-dom": ">=17"
       }
     },
-    "node_modules/@reactflow/background/node_modules/immer": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmmirror.com/immer/-/immer-10.1.1.tgz",
-      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/@reactflow/background/node_modules/zustand": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmmirror.com/zustand/-/zustand-4.5.2.tgz",
-      "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==",
-      "dependencies": {
-        "use-sync-external-store": "1.2.0"
-      },
-      "engines": {
-        "node": ">=12.7.0"
-      },
-      "peerDependencies": {
-        "@types/react": ">=16.8",
-        "immer": ">=9.0.6",
-        "react": ">=16.8"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "immer": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@reactflow/controls": {
       "version": "11.2.12",
       "resolved": "https://registry.npmmirror.com/@reactflow/controls/-/controls-11.2.12.tgz",
@@ -3963,40 +3932,6 @@
         "react-dom": ">=17"
       }
     },
-    "node_modules/@reactflow/controls/node_modules/immer": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmmirror.com/immer/-/immer-10.1.1.tgz",
-      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/@reactflow/controls/node_modules/zustand": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmmirror.com/zustand/-/zustand-4.5.2.tgz",
-      "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==",
-      "dependencies": {
-        "use-sync-external-store": "1.2.0"
-      },
-      "engines": {
-        "node": ">=12.7.0"
-      },
-      "peerDependencies": {
-        "@types/react": ">=16.8",
-        "immer": ">=9.0.6",
-        "react": ">=16.8"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "immer": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@reactflow/core": {
       "version": "11.11.2",
       "resolved": "https://registry.npmmirror.com/@reactflow/core/-/core-11.11.2.tgz",
@@ -4017,40 +3952,6 @@
         "react-dom": ">=17"
       }
     },
-    "node_modules/@reactflow/core/node_modules/immer": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmmirror.com/immer/-/immer-10.1.1.tgz",
-      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/@reactflow/core/node_modules/zustand": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmmirror.com/zustand/-/zustand-4.5.2.tgz",
-      "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==",
-      "dependencies": {
-        "use-sync-external-store": "1.2.0"
-      },
-      "engines": {
-        "node": ">=12.7.0"
-      },
-      "peerDependencies": {
-        "@types/react": ">=16.8",
-        "immer": ">=9.0.6",
-        "react": ">=16.8"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "immer": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@reactflow/minimap": {
       "version": "11.7.12",
       "resolved": "https://registry.npmmirror.com/@reactflow/minimap/-/minimap-11.7.12.tgz",
@@ -4069,40 +3970,6 @@
         "react-dom": ">=17"
       }
     },
-    "node_modules/@reactflow/minimap/node_modules/immer": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmmirror.com/immer/-/immer-10.1.1.tgz",
-      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/@reactflow/minimap/node_modules/zustand": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmmirror.com/zustand/-/zustand-4.5.2.tgz",
-      "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==",
-      "dependencies": {
-        "use-sync-external-store": "1.2.0"
-      },
-      "engines": {
-        "node": ">=12.7.0"
-      },
-      "peerDependencies": {
-        "@types/react": ">=16.8",
-        "immer": ">=9.0.6",
-        "react": ">=16.8"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "immer": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@reactflow/node-resizer": {
       "version": "2.2.12",
       "resolved": "https://registry.npmmirror.com/@reactflow/node-resizer/-/node-resizer-2.2.12.tgz",
@@ -4119,40 +3986,6 @@
         "react-dom": ">=17"
       }
     },
-    "node_modules/@reactflow/node-resizer/node_modules/immer": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmmirror.com/immer/-/immer-10.1.1.tgz",
-      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/@reactflow/node-resizer/node_modules/zustand": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmmirror.com/zustand/-/zustand-4.5.2.tgz",
-      "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==",
-      "dependencies": {
-        "use-sync-external-store": "1.2.0"
-      },
-      "engines": {
-        "node": ">=12.7.0"
-      },
-      "peerDependencies": {
-        "@types/react": ">=16.8",
-        "immer": ">=9.0.6",
-        "react": ">=16.8"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "immer": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@reactflow/node-toolbar": {
       "version": "1.3.12",
       "resolved": "https://registry.npmmirror.com/@reactflow/node-toolbar/-/node-toolbar-1.3.12.tgz",
@@ -4167,38 +4000,17 @@
         "react-dom": ">=17"
       }
     },
-    "node_modules/@reactflow/node-toolbar/node_modules/immer": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmmirror.com/immer/-/immer-10.1.1.tgz",
-      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/@reactflow/node-toolbar/node_modules/zustand": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmmirror.com/zustand/-/zustand-4.5.2.tgz",
-      "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==",
+    "node_modules/@redux-devtools/extension": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/@redux-devtools/extension/-/extension-3.3.0.tgz",
+      "integrity": "sha512-X34S/rC8S/M1BIrkYD1mJ5f8vlH0BDqxXrs96cvxSBo4FhMdbhU+GUGsmNYov1xjSyLMHgo8NYrUG8bNX7525g==",
+      "dev": true,
       "dependencies": {
-        "use-sync-external-store": "1.2.0"
-      },
-      "engines": {
-        "node": ">=12.7.0"
+        "@babel/runtime": "^7.23.2",
+        "immutable": "^4.3.4"
       },
       "peerDependencies": {
-        "@types/react": ">=16.8",
-        "immer": ">=9.0.6",
-        "react": ">=16.8"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "immer": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        }
+        "redux": "^3.1.0 || ^4.0.0 || ^5.0.0"
       }
     },
     "node_modules/@rgrove/parse-xml": {
@@ -4441,6 +4253,30 @@
       "integrity": "sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==",
       "dev": true
     },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.40.0",
+      "resolved": "https://registry.npmmirror.com/@tanstack/react-query/-/react-query-5.40.0.tgz",
+      "integrity": "sha512-iv/W0Axc4aXhFzkrByToE1JQqayxTPNotCoSCnarR/A1vDIHaoKpg7FTIfP3Ev2mbKn1yrxq0ZKYUdLEJxs6Tg==",
+      "dependencies": {
+        "@tanstack/query-core": "5.40.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
+    "node_modules/@tanstack/react-query/node_modules/@tanstack/query-core": {
+      "version": "5.40.0",
+      "resolved": "https://registry.npmmirror.com/@tanstack/query-core/-/query-core-5.40.0.tgz",
+      "integrity": "sha512-eD8K8jsOIq0Z5u/QbvOmfvKKE/XC39jA7yv4hgpl/1SRiU+J8QCIwgM/mEHuunQsL87dcvnHqSVLmf9pD4CiaA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.1.0",
       "resolved": "https://registry.npmmirror.com/@testing-library/dom/-/dom-10.1.0.tgz",
@@ -6692,6 +6528,16 @@
         "value-equal": "^1.0.1"
       }
     },
+    "node_modules/@umijs/plugins/node_modules/immer": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmmirror.com/immer/-/immer-8.0.4.tgz",
+      "integrity": "sha512-jMfL18P+/6P6epANRvRk6q8t+3gGhqsJ9EuJ25AXE+9bNTYtssvzeYbEd0mXRYWCmmXSIbnlpz6vd6iJlmGGGQ==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/@umijs/plugins/node_modules/isarray": {
       "version": "0.0.1",
       "resolved": "https://registry.npmmirror.com/isarray/-/isarray-0.0.1.tgz",
@@ -13621,9 +13467,20 @@
       "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
     },
     "node_modules/immer": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmmirror.com/immer/-/immer-8.0.4.tgz",
-      "integrity": "sha512-jMfL18P+/6P6epANRvRk6q8t+3gGhqsJ9EuJ25AXE+9bNTYtssvzeYbEd0mXRYWCmmXSIbnlpz6vd6iJlmGGGQ==",
+      "version": "10.1.1",
+      "resolved": "https://registry.npmmirror.com/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "optional": true,
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.6.tgz",
+      "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==",
       "dev": true
     },
     "node_modules/import-fresh": {
@@ -26064,6 +25921,33 @@
         "node": ">=10"
       }
     },
+    "node_modules/zustand": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmmirror.com/zustand/-/zustand-4.5.2.tgz",
+      "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==",
+      "dependencies": {
+        "use-sync-external-store": "1.2.0"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmmirror.com/zwitch/-/zwitch-2.0.4.tgz",

web/package.json

@@ -15,6 +15,7 @@
     "@ant-design/pro-components": "^2.6.46",
     "@ant-design/pro-layout": "^7.17.16",
     "@js-preview/excel": "^1.7.8",
+    "@tanstack/react-query": "^5.40.0",
     "ahooks": "^3.7.10",
     "antd": "^5.12.7",
     "axios": "^1.6.3",
@@ -44,10 +45,12 @@
     "umi": "^4.0.90",
     "umi-request": "^1.4.0",
     "unist-util-visit-parents": "^6.0.1",
-    "uuid": "^9.0.1"
+    "uuid": "^9.0.1",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@react-dev-inspector/umi4-plugin": "^2.0.1",
+    "@redux-devtools/extension": "^3.3.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@types/dagre": "^0.7.52",

web/src/app.tsx

@@ -6,13 +6,14 @@ import zh_HK from 'antd/locale/zh_HK';
 import React, { ReactNode, useEffect, useState } from 'react';
 import storage from './utils/authorizationUtil';
 
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import dayjs from 'dayjs';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import localeData from 'dayjs/plugin/localeData';
-import weekday from 'dayjs/plugin/weekday';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 import weekYear from 'dayjs/plugin/weekYear';
+import weekday from 'dayjs/plugin/weekday';
 
 dayjs.extend(customParseFormat);
 dayjs.extend(advancedFormat);
@@ -27,6 +28,8 @@ const AntLanguageMap = {
   'zh-TRADITIONAL': zh_HK,
 };
 
+const queryClient = new QueryClient();
+
 type Locale = ConfigProviderProps['locale'];
 
 const RootProvider = ({ children }: React.PropsWithChildren) => {
@@ -49,16 +52,18 @@ const RootProvider = ({ children }: React.PropsWithChildren) => {
   }, []);
 
   return (
-    <ConfigProvider
-      theme={{
-        token: {
-          fontFamily: 'Inter',
-        },
-      }}
-      locale={locale}
-    >
-      <App> {children}</App>
-    </ConfigProvider>
+    <QueryClientProvider client={queryClient}>
+      <ConfigProvider
+        theme={{
+          token: {
+            fontFamily: 'Inter',
+          },
+        }}
+        locale={locale}
+      >
+        <App> {children}</App>
+      </ConfigProvider>
+    </QueryClientProvider>
   );
 };
 

web/src/components/knowledge-base-item.tsx

@@ -0,0 +1,37 @@
+import { useTranslate } from '@/hooks/commonHooks';
+import { useFetchKnowledgeList } from '@/hooks/knowledgeHook';
+import { Form, Select } from 'antd';
+
+const KnowledgeBaseItem = () => {
+  const { t } = useTranslate('chat');
+
+  const { list: knowledgeList } = useFetchKnowledgeList(true);
+
+  const knowledgeOptions = knowledgeList.map((x) => ({
+    label: x.name,
+    value: x.id,
+  }));
+
+  return (
+    <Form.Item
+      label={t('knowledgeBases')}
+      name="kb_ids"
+      tooltip={t('knowledgeBasesTip')}
+      rules={[
+        {
+          required: true,
+          message: t('knowledgeBasesMessage'),
+          type: 'array',
+        },
+      ]}
+    >
+      <Select
+        mode="multiple"
+        options={knowledgeOptions}
+        placeholder={t('knowledgeBasesMessage')}
+      ></Select>
+    </Form.Item>
+  );
+};
+
+export default KnowledgeBaseItem;

web/src/components/llm-setting-items/index.less

@@ -0,0 +1,6 @@
+.sliderInputNumber {
+  width: 80px;
+}
+.variableSlider {
+  width: 100%;
+}

web/src/components/llm-setting-items/index.tsx

@@ -0,0 +1,259 @@
+import { LlmModelType, ModelVariableType } from '@/constants/knowledge';
+import { Divider, Flex, Form, InputNumber, Select, Slider, Switch } from 'antd';
+import camelCase from 'lodash/camelCase';
+
+import { useTranslate } from '@/hooks/commonHooks';
+import { useSelectLlmOptionsByModelType } from '@/hooks/llmHooks';
+import { useMemo } from 'react';
+import styles from './index.less';
+
+interface IProps {
+  prefix?: string;
+  handleParametersChange(value: ModelVariableType): void;
+}
+
+const LlmSettingItems = ({ prefix, handleParametersChange }: IProps) => {
+  const { t } = useTranslate('chat');
+  const parameterOptions = Object.values(ModelVariableType).map((x) => ({
+    label: t(camelCase(x)),
+    value: x,
+  }));
+
+  const memorizedPrefix = useMemo(() => (prefix ? [prefix] : []), [prefix]);
+
+  const modelOptions = useSelectLlmOptionsByModelType();
+
+  return (
+    <>
+      <Form.Item
+        label={t('model')}
+        name="llm_id"
+        tooltip={t('modelTip')}
+        rules={[{ required: true, message: t('modelMessage') }]}
+      >
+        <Select options={modelOptions[LlmModelType.Chat]} showSearch />
+      </Form.Item>
+      <Divider></Divider>
+      <Form.Item
+        label={t('freedom')}
+        name="parameters"
+        tooltip={t('freedomTip')}
+        initialValue={ModelVariableType.Precise}
+      >
+        <Select<ModelVariableType>
+          options={parameterOptions}
+          onChange={handleParametersChange}
+        />
+      </Form.Item>
+      <Form.Item label={t('temperature')} tooltip={t('temperatureTip')}>
+        <Flex gap={20} align="center">
+          <Form.Item
+            name={'temperatureEnabled'}
+            valuePropName="checked"
+            noStyle
+          >
+            <Switch size="small" />
+          </Form.Item>
+          <Form.Item noStyle dependencies={['temperatureEnabled']}>
+            {({ getFieldValue }) => {
+              const disabled = !getFieldValue('temperatureEnabled');
+              return (
+                <>
+                  <Flex flex={1}>
+                    <Form.Item
+                      name={[...memorizedPrefix, 'temperature']}
+                      noStyle
+                    >
+                      <Slider
+                        className={styles.variableSlider}
+                        max={1}
+                        step={0.01}
+                        disabled={disabled}
+                      />
+                    </Form.Item>
+                  </Flex>
+                  <Form.Item name={[...memorizedPrefix, 'temperature']} noStyle>
+                    <InputNumber
+                      className={styles.sliderInputNumber}
+                      max={1}
+                      min={0}
+                      step={0.01}
+                      disabled={disabled}
+                    />
+                  </Form.Item>
+                </>
+              );
+            }}
+          </Form.Item>
+        </Flex>
+      </Form.Item>
+      <Form.Item label={t('topP')} tooltip={t('topPTip')}>
+        <Flex gap={20} align="center">
+          <Form.Item name={'topPEnabled'} valuePropName="checked" noStyle>
+            <Switch size="small" />
+          </Form.Item>
+          <Form.Item noStyle dependencies={['topPEnabled']}>
+            {({ getFieldValue }) => {
+              const disabled = !getFieldValue('topPEnabled');
+              return (
+                <>
+                  <Flex flex={1}>
+                    <Form.Item name={[...memorizedPrefix, 'top_p']} noStyle>
+                      <Slider
+                        className={styles.variableSlider}
+                        max={1}
+                        step={0.01}
+                        disabled={disabled}
+                      />
+                    </Form.Item>
+                  </Flex>
+                  <Form.Item name={[...memorizedPrefix, 'top_p']} noStyle>
+                    <InputNumber
+                      className={styles.sliderInputNumber}
+                      max={1}
+                      min={0}
+                      step={0.01}
+                      disabled={disabled}
+                    />
+                  </Form.Item>
+                </>
+              );
+            }}
+          </Form.Item>
+        </Flex>
+      </Form.Item>
+      <Form.Item label={t('presencePenalty')} tooltip={t('presencePenaltyTip')}>
+        <Flex gap={20} align="center">
+          <Form.Item
+            name={'presencePenaltyEnabled'}
+            valuePropName="checked"
+            noStyle
+          >
+            <Switch size="small" />
+          </Form.Item>
+          <Form.Item noStyle dependencies={['presencePenaltyEnabled']}>
+            {({ getFieldValue }) => {
+              const disabled = !getFieldValue('presencePenaltyEnabled');
+              return (
+                <>
+                  <Flex flex={1}>
+                    <Form.Item
+                      name={[...memorizedPrefix, 'presence_penalty']}
+                      noStyle
+                    >
+                      <Slider
+                        className={styles.variableSlider}
+                        max={1}
+                        step={0.01}
+                        disabled={disabled}
+                      />
+                    </Form.Item>
+                  </Flex>
+                  <Form.Item
+                    name={[...memorizedPrefix, 'presence_penalty']}
+                    noStyle
+                  >
+                    <InputNumber
+                      className={styles.sliderInputNumber}
+                      max={1}
+                      min={0}
+                      step={0.01}
+                      disabled={disabled}
+                    />
+                  </Form.Item>
+                </>
+              );
+            }}
+          </Form.Item>
+        </Flex>
+      </Form.Item>
+      <Form.Item
+        label={t('frequencyPenalty')}
+        tooltip={t('frequencyPenaltyTip')}
+      >
+        <Flex gap={20} align="center">
+          <Form.Item
+            name={'frequencyPenaltyEnabled'}
+            valuePropName="checked"
+            noStyle
+          >
+            <Switch size="small" />
+          </Form.Item>
+          <Form.Item noStyle dependencies={['frequencyPenaltyEnabled']}>
+            {({ getFieldValue }) => {
+              const disabled = !getFieldValue('frequencyPenaltyEnabled');
+              return (
+                <>
+                  <Flex flex={1}>
+                    <Form.Item
+                      name={[...memorizedPrefix, 'frequency_penalty']}
+                      noStyle
+                    >
+                      <Slider
+                        className={styles.variableSlider}
+                        max={1}
+                        step={0.01}
+                        disabled={disabled}
+                      />
+                    </Form.Item>
+                  </Flex>
+                  <Form.Item
+                    name={[...memorizedPrefix, 'frequency_penalty']}
+                    noStyle
+                  >
+                    <InputNumber
+                      className={styles.sliderInputNumber}
+                      max={1}
+                      min={0}
+                      step={0.01}
+                      disabled={disabled}
+                    />
+                  </Form.Item>
+                </>
+              );
+            }}
+          </Form.Item>
+        </Flex>
+      </Form.Item>
+      <Form.Item label={t('maxTokens')} tooltip={t('maxTokensTip')}>
+        <Flex gap={20} align="center">
+          <Form.Item name={'maxTokensEnabled'} valuePropName="checked" noStyle>
+            <Switch size="small" />
+          </Form.Item>
+          <Form.Item noStyle dependencies={['maxTokensEnabled']}>
+            {({ getFieldValue }) => {
+              const disabled = !getFieldValue('maxTokensEnabled');
+
+              return (
+                <>
+                  <Flex flex={1}>
+                    <Form.Item
+                      name={[...memorizedPrefix, 'max_tokens']}
+                      noStyle
+                    >
+                      <Slider
+                        className={styles.variableSlider}
+                        max={2048}
+                        disabled={disabled}
+                      />
+                    </Form.Item>
+                  </Flex>
+                  <Form.Item name={[...memorizedPrefix, 'max_tokens']} noStyle>
+                    <InputNumber
+                      disabled={disabled}
+                      className={styles.sliderInputNumber}
+                      max={2048}
+                      min={0}
+                    />
+                  </Form.Item>
+                </>
+              );
+            }}
+          </Form.Item>
+        </Flex>
+      </Form.Item>
+    </>
+  );
+};
+
+export default LlmSettingItems;

web/src/components/top-n-item.tsx

@@ -0,0 +1,23 @@
+import { useTranslate } from '@/hooks/commonHooks';
+import { Form, Slider } from 'antd';
+
+type FieldType = {
+  top_n?: number;
+};
+
+const TopNItem = () => {
+  const { t } = useTranslate('chat');
+
+  return (
+    <Form.Item<FieldType>
+      label={t('topN')}
+      name={'top_n'}
+      initialValue={8}
+      tooltip={t('topNTip')}
+    >
+      <Slider max={30} />
+    </Form.Item>
+  );
+};
+
+export default TopNItem;

web/src/hooks/flow-hooks.ts

@@ -0,0 +1,70 @@
+import flowService from '@/services/flow-service';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+export const useFetchFlowTemplates = () => {
+  const { data } = useQuery({
+    queryKey: ['fetchFlowTemplates'],
+    initialData: [],
+    queryFn: async () => {
+      const { data } = await flowService.listTemplates();
+
+      return data;
+    },
+  });
+
+  return data;
+};
+
+export const useFetchFlowList = () => {
+  const { data, isFetching: loading } = useQuery({
+    queryKey: ['fetchFlowList'],
+    initialData: [],
+    queryFn: async () => {
+      const { data } = await flowService.listCanvas();
+
+      return data?.data ?? [];
+    },
+  });
+
+  return { data, loading };
+};
+
+export const useSetFlow = () => {
+  const queryClient = useQueryClient();
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: ['setFlow'],
+    mutationFn: async (params: any) => {
+      const { data } = await flowService.setCanvas(params);
+      if (data.retcode === 0) {
+        queryClient.invalidateQueries({ queryKey: ['fetchFlowList'] });
+      }
+      return data?.retcode;
+    },
+  });
+
+  return { data, loading, setFlow: mutateAsync };
+};
+
+export const useDeleteFlow = () => {
+  const queryClient = useQueryClient();
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: ['deleteFlow'],
+    mutationFn: async (canvasIds: string[]) => {
+      const { data } = await flowService.removeCanvas({ canvasIds });
+      if (data.retcode === 0) {
+        queryClient.invalidateQueries({ queryKey: ['fetchFlowList'] });
+      }
+      return data?.data ?? [];
+    },
+  });
+
+  return { data, loading, deleteFlow: mutateAsync };
+};

web/src/hooks/userSettingHook.ts

@@ -99,10 +99,14 @@ export const useFetchSystemVersion = () => {
   const [loading, setLoading] = useState(false);
 
   const fetchSystemVersion = useCallback(async () => {
-    setLoading(true);
-    const { data } = await userService.getSystemVersion();
-    if (data.retcode === 0) {
-      setVersion(data.data);
+    try {
+      setLoading(true);
+      const { data } = await userService.getSystemVersion();
+      if (data.retcode === 0) {
+        setVersion(data.data);
+        setLoading(false);
+      }
+    } catch (error) {
       setLoading(false);
     }
   }, []);

web/src/interfaces/database/flow.ts

@@ -1,4 +1,4 @@
-export type DSLComponents = Record<string, Operator>;
+export type DSLComponents = Record<string, IOperator>;
 
 export interface DSL {
   components: DSLComponents;
@@ -7,13 +7,13 @@ export interface DSL {
   answer: any[];
 }
 
-export interface Operator {
-  obj: OperatorNode;
+export interface IOperator {
+  obj: IOperatorNode;
   downstream: string[];
   upstream: string[];
 }
 
-export interface OperatorNode {
+export interface IOperatorNode {
   component_name: string;
   params: Record<string, unknown>;
 }

web/src/locales/en.ts

@@ -541,6 +541,7 @@ The above is the content you need to summarize.`,
       preview: 'Preview',
       fileError: 'File error',
     },
+    flow: { cite: 'Cite', citeTip: 'citeTip' },
     footer: {
       profile: 'All rights reserved @ React',
     },

web/src/pages/chat/chat-configuration-modal/assistant-setting.tsx

@@ -1,18 +1,13 @@
-import { useFetchKnowledgeList } from '@/hooks/knowledgeHook';
 import { PlusOutlined } from '@ant-design/icons';
 import { Form, Input, Select, Switch, Upload } from 'antd';
 import classNames from 'classnames';
 import { ISegmentedContentProps } from '../interface';
 
+import KnowledgeBaseItem from '@/components/knowledge-base-item';
 import { useTranslate } from '@/hooks/commonHooks';
 import styles from './index.less';
 
 const AssistantSetting = ({ show }: ISegmentedContentProps) => {
-  const { list: knowledgeList } = useFetchKnowledgeList(true);
-  const knowledgeOptions = knowledgeList.map((x) => ({
-    label: x.name,
-    value: x.id,
-  }));
   const { t } = useTranslate('chat');
 
   const normFile = (e: any) => {
@@ -95,24 +90,7 @@ const AssistantSetting = ({ show }: ISegmentedContentProps) => {
       >
         <Switch />
       </Form.Item>
-      <Form.Item
-        label={t('knowledgeBases')}
-        name="kb_ids"
-        tooltip={t('knowledgeBasesTip')}
-        rules={[
-          {
-            required: true,
-            message: t('knowledgeBasesMessage'),
-            type: 'array',
-          },
-        ]}
-      >
-        <Select
-          mode="multiple"
-          options={knowledgeOptions}
-          placeholder={t('knowledgeBasesMessage')}
-        ></Select>
-      </Form.Item>
+      <KnowledgeBaseItem></KnowledgeBaseItem>
     </section>
   );
 };

web/src/pages/chat/chat-configuration-modal/model-setting.tsx

@@ -1,16 +1,12 @@
 import {
-  LlmModelType,
   ModelVariableType,
   settledModelVariableMap,
 } from '@/constants/knowledge';
-import { Divider, Flex, Form, InputNumber, Select, Slider, Switch } from 'antd';
 import classNames from 'classnames';
-import camelCase from 'lodash/camelCase';
 import { useEffect } from 'react';
 import { ISegmentedContentProps } from '../interface';
 
-import { useTranslate } from '@/hooks/commonHooks';
-import { useSelectLlmOptionsByModelType } from '@/hooks/llmHooks';
+import LlmSettingItems from '@/components/llm-setting-items';
 import { Variable } from '@/interfaces/database/chat';
 import { variableEnabledFieldMap } from '../constants';
 import styles from './index.less';
@@ -24,14 +20,6 @@ const ModelSetting = ({
   initialLlmSetting?: Variable;
   visible?: boolean;
 }) => {
-  const { t } = useTranslate('chat');
-  const parameterOptions = Object.values(ModelVariableType).map((x) => ({
-    label: t(camelCase(x)),
-    value: x,
-  }));
-
-  const modelOptions = useSelectLlmOptionsByModelType();
-
   const handleParametersChange = (value: ModelVariableType) => {
     const variable = settledModelVariableMap[value];
     form.setFieldsValue({ llm_setting: variable });
@@ -62,7 +50,13 @@ const ModelSetting = ({
         [styles.segmentedHidden]: !show,
       })}
     >
-      <Form.Item
+      {visible && (
+        <LlmSettingItems
+          prefix="llm_setting"
+          handleParametersChange={handleParametersChange}
+        ></LlmSettingItems>
+      )}
+      {/* <Form.Item
         label={t('model')}
         name="llm_id"
         tooltip={t('modelTip')}
@@ -279,7 +273,7 @@ const ModelSetting = ({
             }}
           </Form.Item>
         </Flex>
-      </Form.Item>
+      </Form.Item> */}
     </section>
   );
 };

web/src/pages/chat/chat-configuration-modal/prompt-engine.tsx

@@ -7,7 +7,6 @@ import {
   Form,
   Input,
   Row,
-  Slider,
   Switch,
   Table,
   TableProps,
@@ -30,16 +29,11 @@ import {
 import { EditableCell, EditableRow } from './editable-cell';
 
 import Rerank from '@/components/rerank';
+import TopNItem from '@/components/top-n-item';
 import { useTranslate } from '@/hooks/commonHooks';
 import { useSelectPromptConfigParameters } from '../hooks';
 import styles from './index.less';
 
-type FieldType = {
-  similarity_threshold?: number;
-  vector_similarity_weight?: number;
-  top_n?: number;
-};
-
 const PromptEngine = (
   { show }: ISegmentedContentProps,
   ref: ForwardedRef<Array<IPromptConfigParameters>>,
@@ -165,14 +159,7 @@ const PromptEngine = (
       </Form.Item>
       <Divider></Divider>
       <SimilaritySlider isTooltipShown></SimilaritySlider>
-      <Form.Item<FieldType>
-        label={t('topN')}
-        name={'top_n'}
-        initialValue={8}
-        tooltip={t('topNTip')}
-      >
-        <Slider max={30} />
-      </Form.Item>
+      <TopNItem></TopNItem>
       <Rerank></Rerank>
       <section className={classNames(styles.variableContainer)}>
         <Row align={'middle'} justify="end">

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

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

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

@@ -0,0 +1,47 @@
+import { useTranslate } from '@/hooks/commonHooks';
+import type { FormProps } from 'antd';
+import { Form, Input } from 'antd';
+import { IOperatorForm } from '../interface';
+
+type FieldType = {
+  prologue?: string;
+};
+
+const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
+  console.log('Success:', values);
+};
+
+const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
+  console.log('Failed:', errorInfo);
+};
+
+const BeginForm = ({ onValuesChange }: IOperatorForm) => {
+  const { t } = useTranslate('chat');
+  const [form] = Form.useForm();
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 8 }}
+      wrapperCol={{ span: 16 }}
+      style={{ maxWidth: 600 }}
+      initialValues={{ remember: true }}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+      onValuesChange={onValuesChange}
+      autoComplete="off"
+      form={form}
+    >
+      <Form.Item<FieldType>
+        name={'prologue'}
+        label={t('setAnOpener')}
+        tooltip={t('setAnOpenerTip')}
+        initialValue={t('setAnOpenerInitial')}
+      >
+        <Input.TextArea autoSize={{ minRows: 5 }} />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default BeginForm;

web/src/pages/flow/canvas/context-menu/index.tsx

@@ -86,7 +86,7 @@ export const useHandleNodeContextMenu = (sideWidth: number) => {
 
       setMenu({
         id: node.id,
-        top: event.clientY - 72,
+        top: event.clientY - 144,
         left: event.clientX - sideWidth,
         // top: event.clientY < pane.height - 200 ? event.clientY - 72 : 0,
         // left: event.clientX < pane.width - 200 ? event.clientX : 0,

web/src/pages/flow/canvas/edge/index.less

@@ -0,0 +1,15 @@
+.edgeButton {
+  width: 14px;
+  height: 14px;
+  background: #eee;
+  border: 1px solid #fff;
+  padding: 0;
+  cursor: pointer;
+  border-radius: 50%;
+  font-size: 10px;
+  line-height: 1;
+}
+
+.edgeButton:hover {
+  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.08);
+}

web/src/pages/flow/canvas/edge/index.tsx

@@ -0,0 +1,72 @@
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  EdgeProps,
+  getBezierPath,
+} from 'reactflow';
+import useStore from '../../store';
+
+import { useMemo } from 'react';
+import styles from './index.less';
+
+export function ButtonEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  markerEnd,
+  selected,
+}: EdgeProps) {
+  const deleteEdgeById = useStore((state) => state.deleteEdgeById);
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  const selectedStyle = useMemo(() => {
+    return selected ? { strokeWidth: 1, stroke: '#1677ff' } : {};
+  }, [selected]);
+
+  const onEdgeClick = () => {
+    deleteEdgeById(id);
+  };
+
+  return (
+    <>
+      <BaseEdge
+        path={edgePath}
+        markerEnd={markerEnd}
+        style={{ ...style, ...selectedStyle }}
+      />
+      <EdgeLabelRenderer>
+        <div
+          style={{
+            position: 'absolute',
+            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+            fontSize: 12,
+            // everything inside EdgeLabelRenderer has no pointer events by default
+            // if you have an interactive element, set pointer-events: all
+            pointerEvents: 'all',
+          }}
+          className="nodrag nopan"
+        >
+          <button
+            className={styles.edgeButton}
+            type="button"
+            onClick={onEdgeClick}
+          >
+            ×
+          </button>
+        </div>
+      </EdgeLabelRenderer>
+    </>
+  );
+}

web/src/pages/flow/canvas/index.less

@@ -0,0 +1,4 @@
+.canvasWrapper {
+  position: relative;
+  height: 100%;
+}

web/src/pages/flow/canvas/index.tsx

@@ -1,76 +1,64 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback } from 'react';
 import ReactFlow, {
   Background,
   Controls,
-  Edge,
-  Node,
+  MarkerType,
   NodeMouseHandler,
-  OnConnect,
-  OnEdgesChange,
-  OnNodesChange,
-  addEdge,
-  applyEdgeChanges,
-  applyNodeChanges,
 } from 'reactflow';
 import 'reactflow/dist/style.css';
 
 import { NodeContextMenu, useHandleNodeContextMenu } from './context-menu';
+import { ButtonEdge } from './edge';
 
 import FlowDrawer from '../flow-drawer';
 import {
   useHandleDrop,
   useHandleKeyUp,
-  useHandleSelectionChange,
+  useSelectCanvasData,
   useShowDrawer,
 } from '../hooks';
-import { dsl } from '../mock';
 import { TextUpdaterNode } from './node';
 
+import styles from './index.less';
+
 const nodeTypes = { textUpdater: TextUpdaterNode };
 
+const edgeTypes = {
+  buttonEdge: ButtonEdge,
+};
+
 interface IProps {
   sideWidth: number;
 }
 
 function FlowCanvas({ sideWidth }: IProps) {
-  const [nodes, setNodes] = useState<Node[]>(dsl.graph.nodes);
-  const [edges, setEdges] = useState<Edge[]>(dsl.graph.edges);
-
-  const { selectedEdges, selectedNodes } = useHandleSelectionChange();
+  const {
+    nodes,
+    edges,
+    onConnect,
+    onEdgesChange,
+    onNodesChange,
+    onSelectionChange,
+  } = useSelectCanvasData();
 
   const { ref, menu, onNodeContextMenu, onPaneClick } =
     useHandleNodeContextMenu(sideWidth);
-  const { drawerVisible, hideDrawer, showDrawer } = useShowDrawer();
-
-  const onNodesChange: OnNodesChange = useCallback(
-    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
-    [],
-  );
-  const onEdgesChange: OnEdgesChange = useCallback(
-    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
-    [],
-  );
+  const { drawerVisible, hideDrawer, showDrawer, clickedNode } =
+    useShowDrawer();
 
-  const onConnect: OnConnect = useCallback(
-    (params) => setEdges((eds) => addEdge(params, eds)),
-    [],
+  const onNodeClick: NodeMouseHandler = useCallback(
+    (e, node) => {
+      showDrawer(node);
+    },
+    [showDrawer],
   );
 
-  const onNodeClick: NodeMouseHandler = useCallback(() => {
-    showDrawer();
-  }, [showDrawer]);
-
-  const { onDrop, onDragOver, setReactFlowInstance } = useHandleDrop(setNodes);
-
-  const { handleKeyUp } = useHandleKeyUp(selectedEdges, selectedNodes);
+  const { onDrop, onDragOver, setReactFlowInstance } = useHandleDrop();
 
-  useEffect(() => {
-    console.info('nodes:', nodes);
-    console.info('edges:', edges);
-  }, [nodes, edges]);
+  const { handleKeyUp } = useHandleKeyUp();
 
   return (
-    <div style={{ height: '100%', width: '100%' }}>
+    <div className={styles.canvasWrapper}>
       <ReactFlow
         ref={ref}
         nodes={nodes}
@@ -81,12 +69,21 @@ function FlowCanvas({ sideWidth }: IProps) {
         fitView
         onConnect={onConnect}
         nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
         onPaneClick={onPaneClick}
         onDrop={onDrop}
         onDragOver={onDragOver}
         onNodeClick={onNodeClick}
         onInit={setReactFlowInstance}
         onKeyUp={handleKeyUp}
+        onSelectionChange={onSelectionChange}
+        nodeOrigin={[0.5, 0]}
+        defaultEdgeOptions={{
+          type: 'buttonEdge',
+          markerEnd: {
+            type: MarkerType.ArrowClosed,
+          },
+        }}
       >
         <Background />
         <Controls />
@@ -94,7 +91,11 @@ function FlowCanvas({ sideWidth }: IProps) {
           <NodeContextMenu onClick={onPaneClick} {...(menu as any)} />
         )}
       </ReactFlow>
-      <FlowDrawer visible={drawerVisible} hideModal={hideDrawer}></FlowDrawer>
+      <FlowDrawer
+        node={clickedNode}
+        visible={drawerVisible}
+        hideModal={hideDrawer}
+      ></FlowDrawer>
     </div>
   );
 }

web/src/pages/flow/canvas/node/index.less

@@ -1,6 +1,6 @@
 .textUpdaterNode {
   // height: 50px;
-  border: 1px solid black;
+  border: 1px solid gray;
   padding: 5px;
   border-radius: 5px;
   background: white;
@@ -10,3 +10,12 @@
     font-size: 12px;
   }
 }
+.selectedNode {
+  border-color: #1677ff;
+}
+
+.handle {
+  display: inline-flex;
+  text-align: center;
+  // align-items: center;
+}

web/src/pages/flow/canvas/node/index.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { Handle, NodeProps, Position } from 'reactflow';
 
 import styles from './index.less';
@@ -5,19 +6,30 @@ import styles from './index.less';
 export function TextUpdaterNode({
   data,
   isConnectable = true,
+  selected,
 }: NodeProps<{ label: string }>) {
   return (
-    <div className={styles.textUpdaterNode}>
+    <div
+      className={classNames(styles.textUpdaterNode, {
+        [styles.selectedNode]: selected,
+      })}
+    >
       <Handle
         type="target"
         position={Position.Left}
         isConnectable={isConnectable}
-      />
+        className={styles.handle}
+      >
+        {/* <PlusCircleOutlined style={{ fontSize: 10 }} /> */}
+      </Handle>
       <Handle
         type="source"
         position={Position.Right}
         isConnectable={isConnectable}
-      />
+        className={styles.handle}
+      >
+        {/* <PlusCircleOutlined style={{ fontSize: 10 }} /> */}
+      </Handle>
       <div>{data.label}</div>
     </div>
   );

web/src/pages/flow/constant.ts

@@ -0,0 +1,6 @@
+export enum Operator {
+  Begin = 'Begin',
+  Retrieval = 'Retrieval',
+  Generate = 'Generate',
+  Answer = 'Answer',
+}

web/src/pages/flow/flow-drawer/index.tsx

@@ -1,18 +1,46 @@
 import { IModalProps } from '@/interfaces/common';
 import { Drawer } from 'antd';
+import { Node } from 'reactflow';
+import AnswerForm from '../answer-form';
+import BeginForm from '../begin-form';
+import { Operator } from '../constant';
+import GenerateForm from '../generate-form';
+import { useHandleFormValuesChange } from '../hooks';
+import RetrievalForm from '../retrieval-form';
+
+interface IProps {
+  node?: Node;
+}
+
+const FormMap = {
+  [Operator.Begin]: BeginForm,
+  [Operator.Retrieval]: RetrievalForm,
+  [Operator.Generate]: GenerateForm,
+  [Operator.Answer]: AnswerForm,
+};
+
+const FlowDrawer = ({
+  visible,
+  hideModal,
+  node,
+}: IModalProps<any> & IProps) => {
+  const operatorName: Operator = node?.data.label;
+  const OperatorForm = FormMap[operatorName];
+  const { handleValuesChange } = useHandleFormValuesChange(node?.id);
 
-const FlowDrawer = ({ visible, hideModal }: IModalProps<any>) => {
   return (
     <Drawer
-      title="Basic Drawer"
+      title={node?.data.label}
       placement="right"
-      //   closable={false}
       onClose={hideModal}
       open={visible}
       getContainer={false}
       mask={false}
+      width={470}
     >
-      <p>Some contents...</p>
+      {visible && (
+        <OperatorForm onValuesChange={handleValuesChange}></OperatorForm>
+      )}
     </Drawer>
   );
 };

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

@@ -0,0 +1,83 @@
+import LlmSettingItems from '@/components/llm-setting-items';
+import {
+  ModelVariableType,
+  settledModelVariableMap,
+} from '@/constants/knowledge';
+import { useTranslate } from '@/hooks/commonHooks';
+import { Variable } from '@/interfaces/database/chat';
+import { variableEnabledFieldMap } from '@/pages/chat/constants';
+import { Form, Input, Switch } from 'antd';
+import { useCallback, useEffect } from 'react';
+import { IOperatorForm } from '../interface';
+
+const GenerateForm = ({ onValuesChange }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+  const [form] = Form.useForm();
+  const initialLlmSetting = undefined;
+
+  const handleParametersChange = useCallback(
+    (value: ModelVariableType) => {
+      const variable = settledModelVariableMap[value];
+      form.setFieldsValue(variable);
+    },
+    [form],
+  );
+
+  useEffect(() => {
+    const switchBoxValues = Object.keys(variableEnabledFieldMap).reduce<
+      Record<string, boolean>
+    >((pre, field) => {
+      pre[field] =
+        initialLlmSetting === undefined
+          ? true
+          : !!initialLlmSetting[
+              variableEnabledFieldMap[
+                field as keyof typeof variableEnabledFieldMap
+              ] as keyof Variable
+            ];
+      return pre;
+    }, {});
+    const otherValues = settledModelVariableMap[ModelVariableType.Precise];
+    form.setFieldsValue({ ...switchBoxValues, ...otherValues });
+  }, [form, initialLlmSetting]);
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 9 }}
+      wrapperCol={{ span: 15 }}
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+    >
+      <LlmSettingItems
+        handleParametersChange={handleParametersChange}
+      ></LlmSettingItems>
+      <Form.Item
+        name={['prompt']}
+        label={t('prompt', { keyPrefix: 'knowledgeConfiguration' })}
+        initialValue={t('promptText', { keyPrefix: 'knowledgeConfiguration' })}
+        tooltip={t('promptTip', { keyPrefix: 'knowledgeConfiguration' })}
+        rules={[
+          {
+            required: true,
+            message: t('promptMessage'),
+          },
+        ]}
+      >
+        <Input.TextArea rows={8} />
+      </Form.Item>
+      <Form.Item
+        name={['cite']}
+        label={t('cite')}
+        initialValue={true}
+        valuePropName="checked"
+        tooltip={t('citeTip')}
+      >
+        <Switch />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default GenerateForm;

web/src/pages/flow/hooks.ts

@@ -1,19 +1,26 @@
 import { useSetModalState } from '@/hooks/commonHooks';
-import React, {
-  Dispatch,
-  KeyboardEventHandler,
-  SetStateAction,
-  useCallback,
-  useState,
-} from 'react';
-import {
-  Node,
-  Position,
-  ReactFlowInstance,
-  useOnSelectionChange,
-  useReactFlow,
-} from 'reactflow';
+import { useFetchFlowTemplates } from '@/hooks/flow-hooks';
+import { useFetchLlmList } from '@/hooks/llmHooks';
+import React, { KeyboardEventHandler, useCallback, useState } from 'react';
+import { Node, Position, ReactFlowInstance } from 'reactflow';
 import { v4 as uuidv4 } from 'uuid';
+import useStore, { RFState } from './store';
+import { buildDslComponentsByGraph } from './utils';
+
+const selector = (state: RFState) => ({
+  nodes: state.nodes,
+  edges: state.edges,
+  onNodesChange: state.onNodesChange,
+  onEdgesChange: state.onEdgesChange,
+  onConnect: state.onConnect,
+  setNodes: state.setNodes,
+  onSelectionChange: state.onSelectionChange,
+});
+
+export const useSelectCanvasData = () => {
+  // return useStore(useShallow(selector)); throw error
+  return useStore(selector);
+};
 
 export const useHandleDrag = () => {
   const handleDragStart = useCallback(
@@ -27,7 +34,8 @@ export const useHandleDrag = () => {
   return { handleDragStart };
 };
 
-export const useHandleDrop = (setNodes: Dispatch<SetStateAction<Node[]>>) => {
+export const useHandleDrop = () => {
+  const addNode = useStore((state) => state.addNode);
   const [reactFlowInstance, setReactFlowInstance] =
     useState<ReactFlowInstance<any, any>>();
 
@@ -66,59 +74,40 @@ export const useHandleDrop = (setNodes: Dispatch<SetStateAction<Node[]>>) => {
         targetPosition: Position.Left,
       };
 
-      setNodes((nds) => nds.concat(newNode));
+      addNode(newNode);
     },
-    [reactFlowInstance, setNodes],
+    [reactFlowInstance, addNode],
   );
 
   return { onDrop, onDragOver, setReactFlowInstance };
 };
 
 export const useShowDrawer = () => {
+  const [clickedNode, setClickedNode] = useState<Node>();
   const {
     visible: drawerVisible,
     hideModal: hideDrawer,
     showModal: showDrawer,
   } = useSetModalState();
 
+  const handleShow = useCallback(
+    (node: Node) => {
+      setClickedNode(node);
+      showDrawer();
+    },
+    [showDrawer],
+  );
+
   return {
     drawerVisible,
     hideDrawer,
-    showDrawer,
+    showDrawer: handleShow,
+    clickedNode,
   };
 };
 
-export const useHandleSelectionChange = () => {
-  const [selectedNodes, setSelectedNodes] = useState<string[]>([]);
-  const [selectedEdges, setSelectedEdges] = useState<string[]>([]);
-
-  useOnSelectionChange({
-    onChange: ({ nodes, edges }) => {
-      setSelectedNodes(nodes.map((node) => node.id));
-      setSelectedEdges(edges.map((edge) => edge.id));
-    },
-  });
-
-  return { selectedEdges, selectedNodes };
-};
-
-export const useDeleteEdge = (selectedEdges: string[]) => {
-  const { setEdges } = useReactFlow();
-
-  const deleteEdge = useCallback(() => {
-    setEdges((edges) =>
-      edges.filter((edge) => selectedEdges.every((x) => x !== edge.id)),
-    );
-  }, [setEdges, selectedEdges]);
-
-  return deleteEdge;
-};
-
-export const useHandleKeyUp = (
-  selectedEdges: string[],
-  selectedNodes: string[],
-) => {
-  const deleteEdge = useDeleteEdge(selectedEdges);
+export const useHandleKeyUp = () => {
+  const deleteEdge = useStore((state) => state.deleteEdge);
   const handleKeyUp: KeyboardEventHandler = useCallback(
     (e) => {
       if (e.code === 'Delete') {
@@ -132,7 +121,31 @@ export const useHandleKeyUp = (
 };
 
 export const useSaveGraph = () => {
-  const saveGraph = useCallback(() => {}, []);
+  const { nodes, edges } = useStore((state) => state);
+  const saveGraph = useCallback(() => {
+    const x = buildDslComponentsByGraph(nodes, edges);
+    console.info('components:', x);
+  }, [nodes, edges]);
 
   return { saveGraph };
 };
+
+export const useHandleFormValuesChange = (id?: string) => {
+  const updateNodeForm = useStore((state) => state.updateNodeForm);
+  const handleValuesChange = useCallback(
+    (changedValues: any, values: any) => {
+      console.info(changedValues, values);
+      if (id) {
+        updateNodeForm(id, values);
+      }
+    },
+    [updateNodeForm, id],
+  );
+
+  return { handleValuesChange };
+};
+
+export const useFetchDataOnMount = () => {
+  useFetchFlowTemplates();
+  useFetchLlmList();
+};

web/src/pages/flow/index.tsx

@@ -4,19 +4,22 @@ import { ReactFlowProvider } from 'reactflow';
 import FlowCanvas from './canvas';
 import Sider from './flow-sider';
 import FlowHeader from './header';
+import { useFetchDataOnMount } from './hooks';
 
 const { Content } = Layout;
 
 function RagFlow() {
   const [collapsed, setCollapsed] = useState(false);
 
+  useFetchDataOnMount();
+
   return (
     <Layout>
       <ReactFlowProvider>
         <Sider setCollapsed={setCollapsed} collapsed={collapsed}></Sider>
         <Layout>
           <FlowHeader></FlowHeader>
-          <Content style={{ margin: '0 16px' }}>
+          <Content style={{ margin: 0 }}>
             <FlowCanvas sideWidth={collapsed ? 0 : 200}></FlowCanvas>
           </Content>
         </Layout>

web/src/pages/flow/interface.ts

@@ -1,4 +1,62 @@
+import { Edge, Node } from 'reactflow';
+
 export interface DSLComponentList {
   id: string;
   name: string;
 }
+
+export interface IOperatorForm {
+  onValuesChange?(changedValues: any, values: any): void;
+}
+
+export interface IBeginForm {
+  prologue?: string;
+}
+
+export interface IRetrievalForm {
+  similarity_threshold?: number;
+  keywords_similarity_weight?: number;
+  top_n?: number;
+  top_k?: number;
+  rerank_id?: string;
+  empty_response?: string;
+  kb_ids: string[];
+}
+
+export interface IGenerateForm {
+  max_tokens?: number;
+  temperature?: number;
+  top_p?: number;
+  presence_penalty?: number;
+  frequency_penalty?: number;
+  cite?: boolean;
+  prompt: number;
+  llm_id: string;
+  parameters: { key: string; component_id: string };
+}
+
+export type NodeData = {
+  label: string;
+  color: string;
+  form: IBeginForm | IRetrievalForm | IGenerateForm;
+};
+
+export interface IFlow {
+  avatar: null;
+  canvas_type: null;
+  create_date: string;
+  create_time: number;
+  description: null;
+  dsl: {
+    answer: any[];
+    components: DSLComponentList;
+    graph: { nodes: Node[]; edges: Edge[] };
+    history: any[];
+    path: string[];
+  };
+  id: string;
+  title: string;
+  update_date: string;
+  update_time: number;
+  user_id: string;
+}

web/src/pages/flow/list/flow-card/index.less

@@ -0,0 +1,78 @@
+.container {
+  height: 251px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .delete {
+    height: 24px;
+  }
+
+  .content {
+    display: flex;
+    justify-content: space-between;
+
+    .context {
+      flex: 1;
+    }
+  }
+
+  .footer {
+    // text-align: left;
+  }
+  .footerTop {
+    padding-bottom: 2px;
+  }
+}
+
+.card {
+  border-radius: 12px;
+  border: 1px solid rgba(234, 236, 240, 1);
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  padding: 24px;
+  width: 300px;
+  cursor: pointer;
+
+  .titleWrapper {
+    // flex: 1;
+    .title {
+      font-size: 24px;
+      line-height: 32px;
+      font-weight: 600;
+      color: rgba(0, 0, 0, 0.88);
+      word-break: break-all;
+    }
+    .description {
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 20px;
+      color: rgba(0, 0, 0, 0.45);
+    }
+  }
+
+  :global {
+    .ant-card-body {
+      padding: 0;
+      margin: 0;
+    }
+  }
+  .bottom {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .bottomLeft {
+    vertical-align: middle;
+  }
+  .leftIcon {
+    margin-right: 10px;
+    font-size: 18px;
+    vertical-align: middle;
+  }
+  .rightText {
+    font-size: 12px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.65);
+    vertical-align: middle;
+  }
+}

web/src/pages/flow/list/flow-card/index.tsx

@@ -0,0 +1,94 @@
+import { ReactComponent as MoreIcon } from '@/assets/svg/more.svg';
+import { useShowDeleteConfirm } from '@/hooks/commonHooks';
+import { formatDate } from '@/utils/date';
+import {
+  CalendarOutlined,
+  DeleteOutlined,
+  UserOutlined,
+} from '@ant-design/icons';
+import { Avatar, Card, Dropdown, MenuProps, Space } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'umi';
+
+import { useDeleteFlow } from '@/hooks/flow-hooks';
+import { IFlow } from '../../interface';
+import styles from './index.less';
+
+interface IProps {
+  item: IFlow;
+}
+
+const FlowCard = ({ item }: IProps) => {
+  const navigate = useNavigate();
+  const showDeleteConfirm = useShowDeleteConfirm();
+  const { t } = useTranslation();
+  const { deleteFlow } = useDeleteFlow();
+
+  const removeKnowledge = () => {
+    return deleteFlow([item.id]);
+  };
+
+  const handleDelete = () => {
+    showDeleteConfirm({ onOk: removeKnowledge });
+  };
+
+  const items: MenuProps['items'] = [
+    {
+      key: '1',
+      label: (
+        <Space>
+          {t('common.delete')}
+          <DeleteOutlined />
+        </Space>
+      ),
+    },
+  ];
+
+  const handleDropdownMenuClick: MenuProps['onClick'] = ({ domEvent, key }) => {
+    domEvent.preventDefault();
+    domEvent.stopPropagation();
+    if (key === '1') {
+      handleDelete();
+    }
+  };
+
+  const handleCardClick = () => {
+    navigate(`/flow/${item.id}`);
+  };
+
+  return (
+    <Card className={styles.card} onClick={handleCardClick}>
+      <div className={styles.container}>
+        <div className={styles.content}>
+          <Avatar size={34} icon={<UserOutlined />} src={item.avatar} />
+          <Dropdown
+            menu={{
+              items,
+              onClick: handleDropdownMenuClick,
+            }}
+          >
+            <span className={styles.delete}>
+              <MoreIcon />
+            </span>
+          </Dropdown>
+        </div>
+        <div className={styles.titleWrapper}>
+          <span className={styles.title}>{item.title}</span>
+          <p>{item.description}</p>
+        </div>
+        <div className={styles.footer}>
+          <div className={styles.bottom}>
+            <div className={styles.bottomLeft}>
+              <CalendarOutlined className={styles.leftIcon} />
+              <span className={styles.rightText}>
+                {formatDate(item.update_time)}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default FlowCard;

web/src/pages/flow/list/hooks.ts

@@ -0,0 +1,48 @@
+import { useSetModalState } from '@/hooks/commonHooks';
+import { useFetchFlowList, useSetFlow } from '@/hooks/flow-hooks';
+import { useCallback, useState } from 'react';
+import { dsl } from '../mock';
+
+export const useFetchDataOnMount = () => {
+  const { data, loading } = useFetchFlowList();
+
+  return { list: data, loading };
+};
+
+export const useSaveFlow = () => {
+  const [currentFlow, setCurrentFlow] = useState({});
+  const {
+    visible: flowSettingVisible,
+    hideModal: hideFlowSettingModal,
+    showModal: showFileRenameModal,
+  } = useSetModalState();
+  const { loading, setFlow } = useSetFlow();
+
+  const onFlowOk = useCallback(
+    async (title: string) => {
+      const ret = await setFlow({ title, dsl });
+
+      if (ret === 0) {
+        hideFlowSettingModal();
+      }
+    },
+    [setFlow, hideFlowSettingModal],
+  );
+
+  const handleShowFlowSettingModal = useCallback(
+    async (record: any) => {
+      setCurrentFlow(record);
+      showFileRenameModal();
+    },
+    [showFileRenameModal],
+  );
+
+  return {
+    flowSettingLoading: loading,
+    initialFlowName: '',
+    onFlowOk,
+    flowSettingVisible,
+    hideFlowSettingModal,
+    showFlowSettingModal: handleShowFlowSettingModal,
+  };
+};

web/src/pages/flow/list/index.less

@@ -0,0 +1,48 @@
+.flowListWrapper {
+  padding: 48px;
+}
+
+.topWrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 0 60px 72px;
+
+  .title {
+    font-family: Inter;
+    font-size: 30px;
+    font-style: normal;
+    font-weight: @fontWeight600;
+    line-height: 38px;
+    color: rgba(16, 24, 40, 1);
+  }
+  .description {
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+    color: rgba(71, 84, 103, 1);
+  }
+
+  .topButton {
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: @fontWeight600;
+    line-height: 20px;
+  }
+
+  .filterButton {
+    display: flex;
+    align-items: center;
+    .topButton();
+  }
+}
+.flowCardContainer {
+  padding: 0 60px;
+  overflow: auto;
+  .knowledgeEmpty {
+    width: 100%;
+  }
+}

web/src/pages/flow/list/index.tsx

@@ -0,0 +1,53 @@
+import RenameModal from '@/components/rename-modal';
+import { PlusOutlined } from '@ant-design/icons';
+import { Button, Empty, Flex, Spin } from 'antd';
+import FlowCard from './flow-card';
+import { useFetchDataOnMount, useSaveFlow } from './hooks';
+
+import styles from './index.less';
+
+const FlowList = () => {
+  const {
+    showFlowSettingModal,
+    hideFlowSettingModal,
+    flowSettingVisible,
+    flowSettingLoading,
+    onFlowOk,
+  } = useSaveFlow();
+
+  const { list, loading } = useFetchDataOnMount();
+
+  return (
+    <Flex className={styles.flowListWrapper} vertical flex={1} gap={'large'}>
+      <Flex justify={'end'}>
+        <Button
+          type="primary"
+          icon={<PlusOutlined />}
+          onClick={showFlowSettingModal}
+        >
+          create canvas
+        </Button>
+      </Flex>
+      <Spin spinning={loading}>
+        <Flex gap={'large'} wrap="wrap" className={styles.flowCardContainer}>
+          {list.length > 0 ? (
+            list.map((item: any) => {
+              return <FlowCard item={item} key={item.name}></FlowCard>;
+            })
+          ) : (
+            <Empty className={styles.knowledgeEmpty}></Empty>
+          )}
+        </Flex>
+      </Spin>
+      <RenameModal
+        visible={flowSettingVisible}
+        onOk={onFlowOk}
+        loading={flowSettingLoading}
+        hideModal={hideFlowSettingModal}
+        initialName=""
+      ></RenameModal>
+    </Flex>
+  );
+};
+
+export default FlowList;

web/src/pages/flow/mock.tsx

@@ -1,12 +1,7 @@
-import {
-  MergeCellsOutlined,
-  RocketOutlined,
-  SendOutlined,
-} from '@ant-design/icons';
+import { MergeCellsOutlined, RocketOutlined } from '@ant-design/icons';
 import { Position } from 'reactflow';
 
 export const componentList = [
-  { name: 'Begin', icon: <SendOutlined />, description: '' },
   { name: 'Retrieval', icon: <RocketOutlined />, description: '' },
   { name: 'Generate', icon: <MergeCellsOutlined />, description: '' },
 ];
@@ -159,7 +154,14 @@ export const dsl = {
     'Retrieval:China': {
       obj: {
         component_name: 'Retrieval',
-        params: {},
+        params: {
+          similarity_threshold: 0.2,
+          keywords_similarity_weight: 0.3,
+          top_n: 6,
+          top_k: 1024,
+          rerank_id: 'BAAI/bge-reranker-v2-m3',
+          kb_ids: ['568aa82603b611efa9d9fa163e197198'],
+        },
       },
       downstream: ['Generate:China'],
       upstream: ['Answer:China'],
@@ -167,7 +169,12 @@ export const dsl = {
     'Generate:China': {
       obj: {
         component_name: 'Generate',
-        params: {},
+        params: {
+          llm_id: 'deepseek-chat',
+          prompt:
+            'You are an intelligent assistant. Please summarize the content of the knowledge base to answer the question. Please list the data in the knowledge base and answer in detail. When all knowledge base content is irrelevant to the question, your answer must include the sentence "The answer you are looking for is not found in the knowledge base!" Answers need to consider chat history.\n      Here is the knowledge base:\n      {input}\n      The above is the knowledge base.',
+          temperature: 0.2,
+        },
       },
       downstream: ['Answer:China'],
       upstream: ['Retrieval:China'],

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

@@ -0,0 +1,43 @@
+import KnowledgeBaseItem from '@/components/knowledge-base-item';
+import Rerank from '@/components/rerank';
+import SimilaritySlider from '@/components/similarity-slider';
+import TopNItem from '@/components/top-n-item';
+import type { FormProps } from 'antd';
+import { Form } from 'antd';
+import { IOperatorForm } from '../interface';
+
+type FieldType = {
+  top_n?: number;
+};
+
+const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
+  console.log('Success:', values);
+};
+
+const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
+  console.log('Failed:', errorInfo);
+};
+
+const RetrievalForm = ({ onValuesChange }: IOperatorForm) => {
+  const [form] = Form.useForm();
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 12 }}
+      wrapperCol={{ span: 12 }}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+      autoComplete="off"
+      onValuesChange={onValuesChange}
+      form={form}
+    >
+      <SimilaritySlider isTooltipShown></SimilaritySlider>
+      <TopNItem></TopNItem>
+      <Rerank></Rerank>
+      <KnowledgeBaseItem></KnowledgeBaseItem>
+    </Form>
+  );
+};
+
+export default RetrievalForm;

web/src/pages/flow/store.ts

@@ -0,0 +1,106 @@
+import type {} from '@redux-devtools/extension';
+import {
+  Connection,
+  Edge,
+  EdgeChange,
+  Node,
+  NodeChange,
+  OnConnect,
+  OnEdgesChange,
+  OnNodesChange,
+  OnSelectionChangeFunc,
+  OnSelectionChangeParams,
+  addEdge,
+  applyEdgeChanges,
+  applyNodeChanges,
+} from 'reactflow';
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { NodeData } from './interface';
+import { dsl } from './mock';
+
+const { nodes: initialNodes, edges: initialEdges } = dsl.graph;
+
+export type RFState = {
+  nodes: Node<NodeData>[];
+  edges: Edge[];
+  selectedNodeIds: string[];
+  selectedEdgeIds: string[];
+  onNodesChange: OnNodesChange;
+  onEdgesChange: OnEdgesChange;
+  onConnect: OnConnect;
+  setNodes: (nodes: Node[]) => void;
+  setEdges: (edges: Edge[]) => void;
+  updateNodeForm: (nodeId: string, values: any) => void;
+  onSelectionChange: OnSelectionChangeFunc;
+  addNode: (nodes: Node) => void;
+  deleteEdge: () => void;
+  deleteEdgeById: (id: string) => void;
+};
+
+// this is our useStore hook that we can use in our components to get parts of the store and call actions
+const useStore = create<RFState>()(
+  devtools((set, get) => ({
+    nodes: initialNodes as Node[],
+    edges: initialEdges as Edge[],
+    selectedNodeIds: [],
+    selectedEdgeIds: [],
+    onNodesChange: (changes: NodeChange[]) => {
+      set({
+        nodes: applyNodeChanges(changes, get().nodes),
+      });
+    },
+    onEdgesChange: (changes: EdgeChange[]) => {
+      set({
+        edges: applyEdgeChanges(changes, get().edges),
+      });
+    },
+    onConnect: (connection: Connection) => {
+      set({
+        edges: addEdge(connection, get().edges),
+      });
+    },
+    onSelectionChange: ({ nodes, edges }: OnSelectionChangeParams) => {
+      set({
+        selectedEdgeIds: edges.map((x) => x.id),
+        selectedNodeIds: nodes.map((x) => x.id),
+      });
+    },
+    setNodes: (nodes: Node[]) => {
+      set({ nodes });
+    },
+    setEdges: (edges: Edge[]) => {
+      set({ edges });
+    },
+    addNode: (node: Node) => {
+      set({ nodes: get().nodes.concat(node) });
+    },
+    deleteEdge: () => {
+      const { edges, selectedEdgeIds } = get();
+      set({
+        edges: edges.filter((edge) =>
+          selectedEdgeIds.every((x) => x !== edge.id),
+        ),
+      });
+    },
+    deleteEdgeById: (id: string) => {
+      const { edges } = get();
+      set({
+        edges: edges.filter((edge) => edge.id !== id),
+      });
+    },
+    updateNodeForm: (nodeId: string, values: any) => {
+      set({
+        nodes: get().nodes.map((node) => {
+          if (node.id === nodeId) {
+            node.data = { ...node.data, form: values };
+          }
+
+          return node;
+        }),
+      });
+    },
+  })),
+);
+
+export default useStore;

web/src/pages/flow/utils.ts

@@ -2,6 +2,7 @@ import { DSLComponents } from '@/interfaces/database/flow';
 import dagre from 'dagre';
 import { Edge, MarkerType, Node, Position } from 'reactflow';
 import { v4 as uuidv4 } from 'uuid';
+import { NodeData } from './interface';
 
 const buildEdges = (
   operatorIds: string[],
@@ -96,3 +97,35 @@ export const getLayoutedElements = (
 
   return { nodes, edges };
 };
+
+const buildComponentDownstreamOrUpstream = (
+  edges: Edge[],
+  nodeId: string,
+  isBuildDownstream = true,
+) => {
+  return edges
+    .filter((y) => y[isBuildDownstream ? 'source' : 'target'] === nodeId)
+    .map((y) => y[isBuildDownstream ? 'target' : 'source']);
+};
+
+// construct a dsl based on the node information of the graph
+export const buildDslComponentsByGraph = (
+  nodes: Node<NodeData>[],
+  edges: Edge[],
+): DSLComponents => {
+  const components: DSLComponents = {};
+
+  nodes.forEach((x) => {
+    const id = x.id;
+    components[id] = {
+      obj: {
+        component_name: x.data.label,
+        params: x.data.form as Record<string, unknown>,
+      },
+      downstream: buildComponentDownstreamOrUpstream(edges, id, true),
+      upstream: buildComponentDownstreamOrUpstream(edges, id, false),
+    };
+  });
+
+  return components;
+};

web/src/routes.ts

@@ -90,6 +90,10 @@ const routes = [
       },
       {
         path: '/flow',
+        component: '@/pages/flow/list',
+      },
+      {
+        path: '/flow/:id',
         component: '@/pages/flow',
       },
     ],

web/src/services/flow-service.ts

@@ -0,0 +1,43 @@
+import api from '@/utils/api';
+import registerServer from '@/utils/registerServer';
+import request from '@/utils/request';
+
+const {
+  getCanvas,
+  setCanvas,
+  listCanvas,
+  resetCanvas,
+  removeCanvas,
+  listTemplates,
+} = api;
+
+const methods = {
+  getCanvas: {
+    url: getCanvas,
+    method: 'get',
+  },
+  setCanvas: {
+    url: setCanvas,
+    method: 'post',
+  },
+  listCanvas: {
+    url: listCanvas,
+    method: 'get',
+  },
+  resetCanvas: {
+    url: resetCanvas,
+    method: 'post',
+  },
+  removeCanvas: {
+    url: removeCanvas,
+    method: 'post',
+  },
+  listTemplates: {
+    url: listTemplates,
+    method: 'get',
+  },
+} as const;
+
+const chatService = registerServer<keyof typeof methods>(methods, request);
+
+export default chatService;

web/src/utils/api.ts

@@ -81,4 +81,12 @@ export default {
   // system
   getSystemVersion: `${api_host}/system/version`,
   getSystemStatus: `${api_host}/system/status`,
+
+  // flow
+  listTemplates: `${api_host}/canvas/templates`,
+  listCanvas: `${api_host}/canvas/list`,
+  getCanvas: `${api_host}/canvas/get`,
+  removeCanvas: `${api_host}/canvas/rm`,
+  setCanvas: `${api_host}/canvas/set`,
+  resetCanvas: `${api_host}/canvas/reset`,
 };

web/src/utils/registerServer.ts

@@ -1,7 +1,7 @@
 import omit from 'lodash/omit';
 import { RequestMethod } from 'umi-request';
 
-type Service<T extends string> = Record<T, (params: any) => any>;
+type Service<T extends string> = Record<T, (params?: any) => any>;
 
 const registerServer = <T extends string>(
   opt: Record<T, { url: string; method: string }>,