From ff2330d3ec8274804596ac9880f500958ee413eb Mon Sep 17 00:00:00 2001
From: bill <yibie_jingnian@163.com>
Date: Thu, 30 May 2024 16:16:50 +0800
Subject: [PATCH 1/8] feat: add BeginForm

---
 web/src/components/knowledge-base-item.tsx    | 37 ++++++++++++++++
 web/src/components/top-n-item.tsx             | 23 ++++++++++
 web/src/interfaces/database/flow.ts           |  8 ++--
 .../assistant-setting.tsx                     | 36 +++-------------
 .../prompt-engine.tsx                         | 17 +-------
 web/src/pages/flow/begin-form/index.tsx       | 43 +++++++++++++++++++
 web/src/pages/flow/canvas/index.less          |  4 ++
 web/src/pages/flow/canvas/index.tsx           | 22 +++++++---
 web/src/pages/flow/cite-form/index.tsx        |  5 +++
 web/src/pages/flow/constant.ts                |  6 +++
 web/src/pages/flow/flow-drawer/index.tsx      | 31 +++++++++++--
 web/src/pages/flow/generate-form/index.tsx    |  5 +++
 web/src/pages/flow/hooks.ts                   | 12 +++++-
 web/src/pages/flow/index.tsx                  |  2 +-
 web/src/pages/flow/retrieval-form/index.tsx   | 38 ++++++++++++++++
 15 files changed, 228 insertions(+), 61 deletions(-)
 create mode 100644 web/src/components/knowledge-base-item.tsx
 create mode 100644 web/src/components/top-n-item.tsx
 create mode 100644 web/src/pages/flow/begin-form/index.tsx
 create mode 100644 web/src/pages/flow/canvas/index.less
 create mode 100644 web/src/pages/flow/cite-form/index.tsx
 create mode 100644 web/src/pages/flow/constant.ts
 create mode 100644 web/src/pages/flow/generate-form/index.tsx
 create mode 100644 web/src/pages/flow/retrieval-form/index.tsx

diff --git a/web/src/components/knowledge-base-item.tsx b/web/src/components/knowledge-base-item.tsx
new file mode 100644
index 00000000000..01cecee9a03
--- /dev/null
+++ b/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;
diff --git a/web/src/components/top-n-item.tsx b/web/src/components/top-n-item.tsx
new file mode 100644
index 00000000000..2a83b8c440f
--- /dev/null
+++ b/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;
diff --git a/web/src/interfaces/database/flow.ts b/web/src/interfaces/database/flow.ts
index 00f17cf78ef..80d24eba603 100644
--- a/web/src/interfaces/database/flow.ts
+++ b/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>;
 }
diff --git a/web/src/pages/chat/chat-configuration-modal/assistant-setting.tsx b/web/src/pages/chat/chat-configuration-modal/assistant-setting.tsx
index 97d998f5c90..158cb4c908d 100644
--- a/web/src/pages/chat/chat-configuration-modal/assistant-setting.tsx
+++ b/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) => {
@@ -24,12 +19,10 @@ const AssistantSetting = ({ show }: ISegmentedContentProps) => {
 
   const uploadButtion = (
     <button style={{ border: 0, background: 'none' }} type="button">
-            <PlusOutlined />
-            <div style={{ marginTop: 8 }}>
-              {t('upload', { keyPrefix: 'common' })}
-            </div>
-          </button>
-  )
+      <PlusOutlined />
+      <div style={{ marginTop: 8 }}>{t('upload', { keyPrefix: 'common' })}</div>
+    </button>
+  );
 
   return (
     <section
@@ -96,24 +89,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>
   );
 };
diff --git a/web/src/pages/chat/chat-configuration-modal/prompt-engine.tsx b/web/src/pages/chat/chat-configuration-modal/prompt-engine.tsx
index f49faa4bf78..e988f851740 100644
--- a/web/src/pages/chat/chat-configuration-modal/prompt-engine.tsx
+++ b/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">
diff --git a/web/src/pages/flow/begin-form/index.tsx b/web/src/pages/flow/begin-form/index.tsx
new file mode 100644
index 00000000000..745347e573f
--- /dev/null
+++ b/web/src/pages/flow/begin-form/index.tsx
@@ -0,0 +1,43 @@
+import { useTranslate } from '@/hooks/commonHooks';
+import type { FormProps } from 'antd';
+import { Form, Input } from 'antd';
+
+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 = () => {
+  const { t } = useTranslate('chat');
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 8 }}
+      wrapperCol={{ span: 16 }}
+      style={{ maxWidth: 600 }}
+      initialValues={{ remember: true }}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+      autoComplete="off"
+    >
+      <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;
diff --git a/web/src/pages/flow/canvas/index.less b/web/src/pages/flow/canvas/index.less
new file mode 100644
index 00000000000..3f3245a1c4b
--- /dev/null
+++ b/web/src/pages/flow/canvas/index.less
@@ -0,0 +1,4 @@
+.canvasWrapper {
+  position: relative;
+  height: 100%;
+}
diff --git a/web/src/pages/flow/canvas/index.tsx b/web/src/pages/flow/canvas/index.tsx
index 6db3c81bc2f..84bd9e17bd2 100644
--- a/web/src/pages/flow/canvas/index.tsx
+++ b/web/src/pages/flow/canvas/index.tsx
@@ -26,6 +26,8 @@ import {
 import { dsl } from '../mock';
 import { TextUpdaterNode } from './node';
 
+import styles from './index.less';
+
 const nodeTypes = { textUpdater: TextUpdaterNode };
 
 interface IProps {
@@ -40,7 +42,8 @@ function FlowCanvas({ sideWidth }: IProps) {
 
   const { ref, menu, onNodeContextMenu, onPaneClick } =
     useHandleNodeContextMenu(sideWidth);
-  const { drawerVisible, hideDrawer, showDrawer } = useShowDrawer();
+  const { drawerVisible, hideDrawer, showDrawer, clickedNode } =
+    useShowDrawer();
 
   const onNodesChange: OnNodesChange = useCallback(
     (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
@@ -56,9 +59,12 @@ function FlowCanvas({ sideWidth }: IProps) {
     [],
   );
 
-  const onNodeClick: NodeMouseHandler = useCallback(() => {
-    showDrawer();
-  }, [showDrawer]);
+  const onNodeClick: NodeMouseHandler = useCallback(
+    (e, node) => {
+      showDrawer(node);
+    },
+    [showDrawer],
+  );
 
   const { onDrop, onDragOver, setReactFlowInstance } = useHandleDrop(setNodes);
 
@@ -70,7 +76,7 @@ function FlowCanvas({ sideWidth }: IProps) {
   }, [nodes, edges]);
 
   return (
-    <div style={{ height: '100%', width: '100%' }}>
+    <div className={styles.canvasWrapper}>
       <ReactFlow
         ref={ref}
         nodes={nodes}
@@ -94,7 +100,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>
   );
 }
diff --git a/web/src/pages/flow/cite-form/index.tsx b/web/src/pages/flow/cite-form/index.tsx
new file mode 100644
index 00000000000..66c17e64810
--- /dev/null
+++ b/web/src/pages/flow/cite-form/index.tsx
@@ -0,0 +1,5 @@
+const CiteForm = () => {
+  return <div>CiteForm</div>;
+};
+
+export default CiteForm;
diff --git a/web/src/pages/flow/constant.ts b/web/src/pages/flow/constant.ts
new file mode 100644
index 00000000000..1470995f702
--- /dev/null
+++ b/web/src/pages/flow/constant.ts
@@ -0,0 +1,6 @@
+export enum Operator {
+  Begin = 'Begin',
+  Retrieval = 'Retrieval',
+  Generate = 'Generate',
+  Cite = 'Cite',
+}
diff --git a/web/src/pages/flow/flow-drawer/index.tsx b/web/src/pages/flow/flow-drawer/index.tsx
index 7e395b2574b..71a744cd14c 100644
--- a/web/src/pages/flow/flow-drawer/index.tsx
+++ b/web/src/pages/flow/flow-drawer/index.tsx
@@ -1,18 +1,41 @@
 import { IModalProps } from '@/interfaces/common';
 import { Drawer } from 'antd';
+import { Node } from 'reactflow';
+import BeginForm from '../begin-form';
+import CiteForm from '../cite-form';
+import { Operator } from '../constant';
+import GenerateForm from '../generate-form';
+import RetrievalForm from '../retrieval-form';
 
-const FlowDrawer = ({ visible, hideModal }: IModalProps<any>) => {
+interface IProps {
+  node?: Node;
+}
+
+const FormMap = {
+  [Operator.Begin]: BeginForm,
+  [Operator.Retrieval]: RetrievalForm,
+  [Operator.Generate]: GenerateForm,
+  [Operator.Cite]: CiteForm,
+};
+
+const FlowDrawer = ({
+  visible,
+  hideModal,
+  node,
+}: IModalProps<any> & IProps) => {
+  const operatorName: Operator = node?.data.label;
+  const OperatorForm = FormMap[operatorName];
   return (
     <Drawer
-      title="Basic Drawer"
+      title={node?.data.label}
       placement="right"
-      //   closable={false}
       onClose={hideModal}
       open={visible}
       getContainer={false}
       mask={false}
+      width={500}
     >
-      <p>Some contents...</p>
+      <OperatorForm></OperatorForm>
     </Drawer>
   );
 };
diff --git a/web/src/pages/flow/generate-form/index.tsx b/web/src/pages/flow/generate-form/index.tsx
new file mode 100644
index 00000000000..e4de5e6baae
--- /dev/null
+++ b/web/src/pages/flow/generate-form/index.tsx
@@ -0,0 +1,5 @@
+const GenerateForm = () => {
+  return <div></div>;
+};
+
+export default GenerateForm;
diff --git a/web/src/pages/flow/hooks.ts b/web/src/pages/flow/hooks.ts
index 23e5216bcba..217adeaa2bd 100644
--- a/web/src/pages/flow/hooks.ts
+++ b/web/src/pages/flow/hooks.ts
@@ -75,16 +75,26 @@ export const useHandleDrop = (setNodes: Dispatch<SetStateAction<Node[]>>) => {
 };
 
 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,
   };
 };
 
diff --git a/web/src/pages/flow/index.tsx b/web/src/pages/flow/index.tsx
index b1775b526bf..38bca2671f8 100644
--- a/web/src/pages/flow/index.tsx
+++ b/web/src/pages/flow/index.tsx
@@ -16,7 +16,7 @@ function RagFlow() {
         <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>
diff --git a/web/src/pages/flow/retrieval-form/index.tsx b/web/src/pages/flow/retrieval-form/index.tsx
new file mode 100644
index 00000000000..48c61bacfa0
--- /dev/null
+++ b/web/src/pages/flow/retrieval-form/index.tsx
@@ -0,0 +1,38 @@
+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';
+
+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 = () => {
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 12 }}
+      wrapperCol={{ span: 12 }}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+      autoComplete="off"
+    >
+      <SimilaritySlider isTooltipShown></SimilaritySlider>
+      <TopNItem></TopNItem>
+      <Rerank></Rerank>
+      <KnowledgeBaseItem></KnowledgeBaseItem>
+    </Form>
+  );
+};
+
+export default RetrievalForm;

From f46f71b0bd60f4371894399f8fe8682701aa1334 Mon Sep 17 00:00:00 2001
From: bill <yibie_jingnian@163.com>
Date: Thu, 30 May 2024 18:28:48 +0800
Subject: [PATCH 2/8] feat: add LlmSettingItems

---
 .../components/llm-setting-items/index.less   |   6 +
 .../components/llm-setting-items/index.tsx    | 252 ++++++++++++++++++
 web/src/locales/en.ts                         |   1 +
 web/src/pages/flow/flow-drawer/index.tsx      |   2 +-
 web/src/pages/flow/generate-form/index.tsx    |  40 ++-
 web/src/pages/flow/index.tsx                  |   3 +
 web/src/pages/flow/mock.tsx                   |  22 +-
 7 files changed, 313 insertions(+), 13 deletions(-)
 create mode 100644 web/src/components/llm-setting-items/index.less
 create mode 100644 web/src/components/llm-setting-items/index.tsx

diff --git a/web/src/components/llm-setting-items/index.less b/web/src/components/llm-setting-items/index.less
new file mode 100644
index 00000000000..03928e740a8
--- /dev/null
+++ b/web/src/components/llm-setting-items/index.less
@@ -0,0 +1,6 @@
+.sliderInputNumber {
+  width: 80px;
+}
+.variableSlider {
+  width: 100%;
+}
diff --git a/web/src/components/llm-setting-items/index.tsx b/web/src/components/llm-setting-items/index.tsx
new file mode 100644
index 00000000000..22b6262a2ef
--- /dev/null
+++ b/web/src/components/llm-setting-items/index.tsx
@@ -0,0 +1,252 @@
+import {
+  LlmModelType,
+  ModelVariableType,
+  settledModelVariableMap,
+} 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 styles from './index.less';
+
+const LlmSettingItems = () => {
+  const form = Form.useFormInstance();
+  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 });
+  };
+
+  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={['llm_setting', 'temperature']} noStyle>
+                      <Slider
+                        className={styles.variableSlider}
+                        max={1}
+                        step={0.01}
+                        disabled={disabled}
+                      />
+                    </Form.Item>
+                  </Flex>
+                  <Form.Item name={['llm_setting', '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={['llm_setting', 'top_p']} noStyle>
+                      <Slider
+                        className={styles.variableSlider}
+                        max={1}
+                        step={0.01}
+                        disabled={disabled}
+                      />
+                    </Form.Item>
+                  </Flex>
+                  <Form.Item name={['llm_setting', '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={['llm_setting', 'presence_penalty']}
+                      noStyle
+                    >
+                      <Slider
+                        className={styles.variableSlider}
+                        max={1}
+                        step={0.01}
+                        disabled={disabled}
+                      />
+                    </Form.Item>
+                  </Flex>
+                  <Form.Item name={['llm_setting', '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={['llm_setting', 'frequency_penalty']}
+                      noStyle
+                    >
+                      <Slider
+                        className={styles.variableSlider}
+                        max={1}
+                        step={0.01}
+                        disabled={disabled}
+                      />
+                    </Form.Item>
+                  </Flex>
+                  <Form.Item
+                    name={['llm_setting', '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={['llm_setting', 'max_tokens']} noStyle>
+                      <Slider
+                        className={styles.variableSlider}
+                        max={2048}
+                        disabled={disabled}
+                      />
+                    </Form.Item>
+                  </Flex>
+                  <Form.Item name={['llm_setting', 'max_tokens']} noStyle>
+                    <InputNumber
+                      disabled={disabled}
+                      className={styles.sliderInputNumber}
+                      max={2048}
+                      min={0}
+                    />
+                  </Form.Item>
+                </>
+              );
+            }}
+          </Form.Item>
+        </Flex>
+      </Form.Item>
+    </>
+  );
+};
+
+export default LlmSettingItems;
diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts
index 6a4254f6ef7..7b4e2a706a6 100644
--- a/web/src/locales/en.ts
+++ b/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',
     },
diff --git a/web/src/pages/flow/flow-drawer/index.tsx b/web/src/pages/flow/flow-drawer/index.tsx
index 71a744cd14c..99ebc357ced 100644
--- a/web/src/pages/flow/flow-drawer/index.tsx
+++ b/web/src/pages/flow/flow-drawer/index.tsx
@@ -33,7 +33,7 @@ const FlowDrawer = ({
       open={visible}
       getContainer={false}
       mask={false}
-      width={500}
+      width={470}
     >
       <OperatorForm></OperatorForm>
     </Drawer>
diff --git a/web/src/pages/flow/generate-form/index.tsx b/web/src/pages/flow/generate-form/index.tsx
index e4de5e6baae..058645c3ef8 100644
--- a/web/src/pages/flow/generate-form/index.tsx
+++ b/web/src/pages/flow/generate-form/index.tsx
@@ -1,5 +1,43 @@
+import LlmSettingItems from '@/components/llm-setting-items';
+import { useTranslate } from '@/hooks/commonHooks';
+import { Form, Input, Switch } from 'antd';
+
 const GenerateForm = () => {
-  return <div></div>;
+  const { t } = useTranslate('flow');
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 9 }}
+      wrapperCol={{ span: 15 }}
+      autoComplete="off"
+    >
+      <LlmSettingItems></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;
diff --git a/web/src/pages/flow/index.tsx b/web/src/pages/flow/index.tsx
index 38bca2671f8..bb230dbef09 100644
--- a/web/src/pages/flow/index.tsx
+++ b/web/src/pages/flow/index.tsx
@@ -1,3 +1,4 @@
+import { useFetchLlmList } from '@/hooks/llmHooks';
 import { Layout } from 'antd';
 import { useState } from 'react';
 import { ReactFlowProvider } from 'reactflow';
@@ -10,6 +11,8 @@ const { Content } = Layout;
 function RagFlow() {
   const [collapsed, setCollapsed] = useState(false);
 
+  useFetchLlmList();
+
   return (
     <Layout>
       <ReactFlowProvider>
diff --git a/web/src/pages/flow/mock.tsx b/web/src/pages/flow/mock.tsx
index 4b891646009..fa1fe7c7f5c 100644
--- a/web/src/pages/flow/mock.tsx
+++ b/web/src/pages/flow/mock.tsx
@@ -61,14 +61,14 @@ export const dsl = {
         targetPosition: 'right',
       },
       {
-        id: 'Answer:China',
+        id: 'Cite:China',
         type: 'textUpdater',
         position: {
           x: 150,
           y: 200,
         },
         data: {
-          label: 'Answer',
+          label: 'Cite',
         },
         sourcePosition: 'left',
         targetPosition: 'right',
@@ -105,7 +105,7 @@ export const dsl = {
         id: '7facb53d-65c9-43b3-ac55-339c445d3891',
         label: '',
         source: 'begin',
-        target: 'Answer:China',
+        target: 'Cite:China',
         markerEnd: {
           type: 'arrow',
         },
@@ -114,7 +114,7 @@ export const dsl = {
         id: '7ac83631-502d-410f-a6e7-bec6866a5e99',
         label: '',
         source: 'Generate:China',
-        target: 'Answer:China',
+        target: 'Cite:China',
         markerEnd: {
           type: 'arrow',
         },
@@ -122,7 +122,7 @@ export const dsl = {
       {
         id: '0aaab297-5779-43ed-9281-2c4d3741566f',
         label: '',
-        source: 'Answer:China',
+        source: 'Cite:China',
         target: 'Retrieval:China',
         markerEnd: {
           type: 'arrow',
@@ -145,12 +145,12 @@ export const dsl = {
         component_name: 'Begin',
         params: {},
       },
-      downstream: ['Answer:China'], // other edge target is downstream, edge source is current node id
+      downstream: ['Cite:China'], // other edge target is downstream, edge source is current node id
       upstream: [], // edge source is upstream, edge target is current node id
     },
-    'Answer:China': {
+    'Cite:China': {
       obj: {
-        component_name: 'Answer',
+        component_name: 'Cite',
         params: {},
       },
       downstream: ['Retrieval:China'],
@@ -162,18 +162,18 @@ export const dsl = {
         params: {},
       },
       downstream: ['Generate:China'],
-      upstream: ['Answer:China'],
+      upstream: ['Cite:China'],
     },
     'Generate:China': {
       obj: {
         component_name: 'Generate',
         params: {},
       },
-      downstream: ['Answer:China'],
+      downstream: ['Cite:China'],
       upstream: ['Retrieval:China'],
     },
   },
   history: [],
   path: ['begin'],
-  answer: [],
+  Cite: [],
 };

From 65ce5c0319c63dc383b083fe8f12a2973826215a Mon Sep 17 00:00:00 2001
From: bill <yibie_jingnian@163.com>
Date: Fri, 31 May 2024 16:35:20 +0800
Subject: [PATCH 3/8] feat: add AnswerForm

---
 .../components/llm-setting-items/index.tsx    | 51 +++++++++++--------
 web/src/hooks/userSettingHook.ts              | 12 +++--
 .../model-setting.tsx                         | 24 ++++-----
 web/src/pages/flow/answer-form/index.tsx      |  5 ++
 .../pages/flow/canvas/context-menu/index.tsx  |  2 +-
 web/src/pages/flow/cite-form/index.tsx        |  5 --
 web/src/pages/flow/constant.ts                |  2 +-
 web/src/pages/flow/flow-drawer/index.tsx      |  6 +--
 web/src/pages/flow/generate-form/index.tsx    | 42 ++++++++++++++-
 web/src/pages/flow/mock.tsx                   | 22 ++++----
 web/src/pages/flow/retrieval-form/index.tsx   |  3 ++
 11 files changed, 111 insertions(+), 63 deletions(-)
 create mode 100644 web/src/pages/flow/answer-form/index.tsx
 delete mode 100644 web/src/pages/flow/cite-form/index.tsx

diff --git a/web/src/components/llm-setting-items/index.tsx b/web/src/components/llm-setting-items/index.tsx
index 22b6262a2ef..398d1c4cade 100644
--- a/web/src/components/llm-setting-items/index.tsx
+++ b/web/src/components/llm-setting-items/index.tsx
@@ -1,29 +1,27 @@
-import {
-  LlmModelType,
-  ModelVariableType,
-  settledModelVariableMap,
-} from '@/constants/knowledge';
+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';
 
-const LlmSettingItems = () => {
-  const form = Form.useFormInstance();
+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 modelOptions = useSelectLlmOptionsByModelType();
+  const memorizedPrefix = useMemo(() => (prefix ? [prefix] : []), [prefix]);
 
-  const handleParametersChange = (value: ModelVariableType) => {
-    const variable = settledModelVariableMap[value];
-    form.setFieldsValue({ llm_setting: variable });
-  };
+  const modelOptions = useSelectLlmOptionsByModelType();
 
   return (
     <>
@@ -62,7 +60,10 @@ const LlmSettingItems = () => {
               return (
                 <>
                   <Flex flex={1}>
-                    <Form.Item name={['llm_setting', 'temperature']} noStyle>
+                    <Form.Item
+                      name={[...memorizedPrefix, 'temperature']}
+                      noStyle
+                    >
                       <Slider
                         className={styles.variableSlider}
                         max={1}
@@ -71,7 +72,7 @@ const LlmSettingItems = () => {
                       />
                     </Form.Item>
                   </Flex>
-                  <Form.Item name={['llm_setting', 'temperature']} noStyle>
+                  <Form.Item name={[...memorizedPrefix, 'temperature']} noStyle>
                     <InputNumber
                       className={styles.sliderInputNumber}
                       max={1}
@@ -97,7 +98,7 @@ const LlmSettingItems = () => {
               return (
                 <>
                   <Flex flex={1}>
-                    <Form.Item name={['llm_setting', 'top_p']} noStyle>
+                    <Form.Item name={[...memorizedPrefix, 'top_p']} noStyle>
                       <Slider
                         className={styles.variableSlider}
                         max={1}
@@ -106,7 +107,7 @@ const LlmSettingItems = () => {
                       />
                     </Form.Item>
                   </Flex>
-                  <Form.Item name={['llm_setting', 'top_p']} noStyle>
+                  <Form.Item name={[...memorizedPrefix, 'top_p']} noStyle>
                     <InputNumber
                       className={styles.sliderInputNumber}
                       max={1}
@@ -137,7 +138,7 @@ const LlmSettingItems = () => {
                 <>
                   <Flex flex={1}>
                     <Form.Item
-                      name={['llm_setting', 'presence_penalty']}
+                      name={[...memorizedPrefix, 'presence_penalty']}
                       noStyle
                     >
                       <Slider
@@ -148,7 +149,10 @@ const LlmSettingItems = () => {
                       />
                     </Form.Item>
                   </Flex>
-                  <Form.Item name={['llm_setting', 'presence_penalty']} noStyle>
+                  <Form.Item
+                    name={[...memorizedPrefix, 'presence_penalty']}
+                    noStyle
+                  >
                     <InputNumber
                       className={styles.sliderInputNumber}
                       max={1}
@@ -182,7 +186,7 @@ const LlmSettingItems = () => {
                 <>
                   <Flex flex={1}>
                     <Form.Item
-                      name={['llm_setting', 'frequency_penalty']}
+                      name={[...memorizedPrefix, 'frequency_penalty']}
                       noStyle
                     >
                       <Slider
@@ -194,7 +198,7 @@ const LlmSettingItems = () => {
                     </Form.Item>
                   </Flex>
                   <Form.Item
-                    name={['llm_setting', 'frequency_penalty']}
+                    name={[...memorizedPrefix, 'frequency_penalty']}
                     noStyle
                   >
                     <InputNumber
@@ -223,7 +227,10 @@ const LlmSettingItems = () => {
               return (
                 <>
                   <Flex flex={1}>
-                    <Form.Item name={['llm_setting', 'max_tokens']} noStyle>
+                    <Form.Item
+                      name={[...memorizedPrefix, 'max_tokens']}
+                      noStyle
+                    >
                       <Slider
                         className={styles.variableSlider}
                         max={2048}
@@ -231,7 +238,7 @@ const LlmSettingItems = () => {
                       />
                     </Form.Item>
                   </Flex>
-                  <Form.Item name={['llm_setting', 'max_tokens']} noStyle>
+                  <Form.Item name={[...memorizedPrefix, 'max_tokens']} noStyle>
                     <InputNumber
                       disabled={disabled}
                       className={styles.sliderInputNumber}
diff --git a/web/src/hooks/userSettingHook.ts b/web/src/hooks/userSettingHook.ts
index d2499828db4..b344d37fbc9 100644
--- a/web/src/hooks/userSettingHook.ts
+++ b/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);
     }
   }, []);
diff --git a/web/src/pages/chat/chat-configuration-modal/model-setting.tsx b/web/src/pages/chat/chat-configuration-modal/model-setting.tsx
index 8f4502a1129..ca0f3c52b55 100644
--- a/web/src/pages/chat/chat-configuration-modal/model-setting.tsx
+++ b/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>
   );
 };
diff --git a/web/src/pages/flow/answer-form/index.tsx b/web/src/pages/flow/answer-form/index.tsx
new file mode 100644
index 00000000000..5f720a0bfa6
--- /dev/null
+++ b/web/src/pages/flow/answer-form/index.tsx
@@ -0,0 +1,5 @@
+const AnswerForm = () => {
+  return <div>AnswerForm</div>;
+};
+
+export default AnswerForm;
diff --git a/web/src/pages/flow/canvas/context-menu/index.tsx b/web/src/pages/flow/canvas/context-menu/index.tsx
index 1edc2d23410..83c3654505e 100644
--- a/web/src/pages/flow/canvas/context-menu/index.tsx
+++ b/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,
diff --git a/web/src/pages/flow/cite-form/index.tsx b/web/src/pages/flow/cite-form/index.tsx
deleted file mode 100644
index 66c17e64810..00000000000
--- a/web/src/pages/flow/cite-form/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const CiteForm = () => {
-  return <div>CiteForm</div>;
-};
-
-export default CiteForm;
diff --git a/web/src/pages/flow/constant.ts b/web/src/pages/flow/constant.ts
index 1470995f702..8f246dce222 100644
--- a/web/src/pages/flow/constant.ts
+++ b/web/src/pages/flow/constant.ts
@@ -2,5 +2,5 @@ export enum Operator {
   Begin = 'Begin',
   Retrieval = 'Retrieval',
   Generate = 'Generate',
-  Cite = 'Cite',
+  Answer = 'Answer',
 }
diff --git a/web/src/pages/flow/flow-drawer/index.tsx b/web/src/pages/flow/flow-drawer/index.tsx
index 99ebc357ced..d2e61dbfbb5 100644
--- a/web/src/pages/flow/flow-drawer/index.tsx
+++ b/web/src/pages/flow/flow-drawer/index.tsx
@@ -1,8 +1,8 @@
 import { IModalProps } from '@/interfaces/common';
 import { Drawer } from 'antd';
 import { Node } from 'reactflow';
+import AnswerForm from '../answer-form';
 import BeginForm from '../begin-form';
-import CiteForm from '../cite-form';
 import { Operator } from '../constant';
 import GenerateForm from '../generate-form';
 import RetrievalForm from '../retrieval-form';
@@ -15,7 +15,7 @@ const FormMap = {
   [Operator.Begin]: BeginForm,
   [Operator.Retrieval]: RetrievalForm,
   [Operator.Generate]: GenerateForm,
-  [Operator.Cite]: CiteForm,
+  [Operator.Answer]: AnswerForm,
 };
 
 const FlowDrawer = ({
@@ -35,7 +35,7 @@ const FlowDrawer = ({
       mask={false}
       width={470}
     >
-      <OperatorForm></OperatorForm>
+      {visible && <OperatorForm></OperatorForm>}
     </Drawer>
   );
 };
diff --git a/web/src/pages/flow/generate-form/index.tsx b/web/src/pages/flow/generate-form/index.tsx
index 058645c3ef8..72a7dc1ae41 100644
--- a/web/src/pages/flow/generate-form/index.tsx
+++ b/web/src/pages/flow/generate-form/index.tsx
@@ -1,9 +1,43 @@
 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';
 
 const GenerateForm = () => {
   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 values = 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;
+    }, {});
+    form.setFieldsValue(values);
+  }, [form, initialLlmSetting]);
 
   return (
     <Form
@@ -11,8 +45,14 @@ const GenerateForm = () => {
       labelCol={{ span: 9 }}
       wrapperCol={{ span: 15 }}
       autoComplete="off"
+      form={form}
+      onValuesChange={(changedValues, values) => {
+        console.info(changedValues, values);
+      }}
     >
-      <LlmSettingItems></LlmSettingItems>
+      <LlmSettingItems
+        handleParametersChange={handleParametersChange}
+      ></LlmSettingItems>
       <Form.Item
         name={['prompt']}
         label={t('prompt', { keyPrefix: 'knowledgeConfiguration' })}
diff --git a/web/src/pages/flow/mock.tsx b/web/src/pages/flow/mock.tsx
index fa1fe7c7f5c..cb009357055 100644
--- a/web/src/pages/flow/mock.tsx
+++ b/web/src/pages/flow/mock.tsx
@@ -61,14 +61,14 @@ export const dsl = {
         targetPosition: 'right',
       },
       {
-        id: 'Cite:China',
+        id: 'Answer:China',
         type: 'textUpdater',
         position: {
           x: 150,
           y: 200,
         },
         data: {
-          label: 'Cite',
+          label: 'Answer',
         },
         sourcePosition: 'left',
         targetPosition: 'right',
@@ -105,7 +105,7 @@ export const dsl = {
         id: '7facb53d-65c9-43b3-ac55-339c445d3891',
         label: '',
         source: 'begin',
-        target: 'Cite:China',
+        target: 'Answer:China',
         markerEnd: {
           type: 'arrow',
         },
@@ -114,7 +114,7 @@ export const dsl = {
         id: '7ac83631-502d-410f-a6e7-bec6866a5e99',
         label: '',
         source: 'Generate:China',
-        target: 'Cite:China',
+        target: 'Answer:China',
         markerEnd: {
           type: 'arrow',
         },
@@ -122,7 +122,7 @@ export const dsl = {
       {
         id: '0aaab297-5779-43ed-9281-2c4d3741566f',
         label: '',
-        source: 'Cite:China',
+        source: 'Answer:China',
         target: 'Retrieval:China',
         markerEnd: {
           type: 'arrow',
@@ -145,12 +145,12 @@ export const dsl = {
         component_name: 'Begin',
         params: {},
       },
-      downstream: ['Cite:China'], // other edge target is downstream, edge source is current node id
+      downstream: ['Answer:China'], // other edge target is downstream, edge source is current node id
       upstream: [], // edge source is upstream, edge target is current node id
     },
-    'Cite:China': {
+    'Answer:China': {
       obj: {
-        component_name: 'Cite',
+        component_name: 'Answer',
         params: {},
       },
       downstream: ['Retrieval:China'],
@@ -162,18 +162,18 @@ export const dsl = {
         params: {},
       },
       downstream: ['Generate:China'],
-      upstream: ['Cite:China'],
+      upstream: ['Answer:China'],
     },
     'Generate:China': {
       obj: {
         component_name: 'Generate',
         params: {},
       },
-      downstream: ['Cite:China'],
+      downstream: ['Answer:China'],
       upstream: ['Retrieval:China'],
     },
   },
   history: [],
   path: ['begin'],
-  Cite: [],
+  Answer: [],
 };
diff --git a/web/src/pages/flow/retrieval-form/index.tsx b/web/src/pages/flow/retrieval-form/index.tsx
index 48c61bacfa0..cbe96d15024 100644
--- a/web/src/pages/flow/retrieval-form/index.tsx
+++ b/web/src/pages/flow/retrieval-form/index.tsx
@@ -18,6 +18,8 @@ const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
 };
 
 const RetrievalForm = () => {
+  const [form] = Form.useForm();
+
   return (
     <Form
       name="basic"
@@ -26,6 +28,7 @@ const RetrievalForm = () => {
       onFinish={onFinish}
       onFinishFailed={onFinishFailed}
       autoComplete="off"
+      form={form}
     >
       <SimilaritySlider isTooltipShown></SimilaritySlider>
       <TopNItem></TopNItem>

From c3818596e4e1a933eaf8f7c054601be6bb75c442 Mon Sep 17 00:00:00 2001
From: bill <yibie_jingnian@163.com>
Date: Fri, 31 May 2024 18:57:50 +0800
Subject: [PATCH 4/8] feat: add @tanstack/react-query

---
 web/package-lock.json                       | 25 ++++++++++++
 web/package.json                            |  1 +
 web/src/app.tsx                             | 27 +++++++------
 web/src/hooks/flow-hooks.ts                 | 16 ++++++++
 web/src/pages/flow/begin-form/index.tsx     |  6 ++-
 web/src/pages/flow/flow-drawer/index.tsx    |  8 +++-
 web/src/pages/flow/generate-form/index.tsx  |  7 ++--
 web/src/pages/flow/hooks.ts                 | 15 +++++++
 web/src/pages/flow/index.tsx                |  4 +-
 web/src/pages/flow/interface.ts             |  4 ++
 web/src/pages/flow/retrieval-form/index.tsx |  4 +-
 web/src/services/flow-service.ts            | 43 +++++++++++++++++++++
 web/src/utils/api.ts                        |  8 ++++
 web/src/utils/registerServer.ts             |  2 +-
 14 files changed, 149 insertions(+), 21 deletions(-)
 create mode 100644 web/src/hooks/flow-hooks.ts
 create mode 100644 web/src/services/flow-service.ts

diff --git a/web/package-lock.json b/web/package-lock.json
index bf88f374d29..6668f027196 100644
--- a/web/package-lock.json
+++ b/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",
@@ -4441,6 +4442,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",
diff --git a/web/package.json b/web/package.json
index f8e8f3b6402..b1a9f4a3d85 100644
--- a/web/package.json
+++ b/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",
diff --git a/web/src/app.tsx b/web/src/app.tsx
index ff532b1d359..9cbacdae2ea 100644
--- a/web/src/app.tsx
+++ b/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>
   );
 };
 
diff --git a/web/src/hooks/flow-hooks.ts b/web/src/hooks/flow-hooks.ts
new file mode 100644
index 00000000000..a41b1bf077d
--- /dev/null
+++ b/web/src/hooks/flow-hooks.ts
@@ -0,0 +1,16 @@
+import flowService from '@/services/flow-service';
+import { useQuery } from '@tanstack/react-query';
+
+export const useFetchFlowTemplates = () => {
+  const { data } = useQuery({
+    queryKey: ['fetchFlowTemplates'],
+    initialData: [],
+    queryFn: async () => {
+      const { data } = await flowService.listTemplates();
+
+      return data;
+    },
+  });
+
+  return data;
+};
diff --git a/web/src/pages/flow/begin-form/index.tsx b/web/src/pages/flow/begin-form/index.tsx
index 745347e573f..125d31e2f87 100644
--- a/web/src/pages/flow/begin-form/index.tsx
+++ b/web/src/pages/flow/begin-form/index.tsx
@@ -1,6 +1,7 @@
 import { useTranslate } from '@/hooks/commonHooks';
 import type { FormProps } from 'antd';
 import { Form, Input } from 'antd';
+import { IOperatorForm } from '../interface';
 
 type FieldType = {
   prologue?: string;
@@ -14,8 +15,9 @@ const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
   console.log('Failed:', errorInfo);
 };
 
-const BeginForm = () => {
+const BeginForm = ({ onValuesChange }: IOperatorForm) => {
   const { t } = useTranslate('chat');
+  const [form] = Form.useForm();
 
   return (
     <Form
@@ -26,7 +28,9 @@ const BeginForm = () => {
       initialValues={{ remember: true }}
       onFinish={onFinish}
       onFinishFailed={onFinishFailed}
+      onValuesChange={onValuesChange}
       autoComplete="off"
+      form={form}
     >
       <Form.Item<FieldType>
         name={'prologue'}
diff --git a/web/src/pages/flow/flow-drawer/index.tsx b/web/src/pages/flow/flow-drawer/index.tsx
index d2e61dbfbb5..a71573917d3 100644
--- a/web/src/pages/flow/flow-drawer/index.tsx
+++ b/web/src/pages/flow/flow-drawer/index.tsx
@@ -1,5 +1,6 @@
 import { IModalProps } from '@/interfaces/common';
 import { Drawer } from 'antd';
+import { useCallback } from 'react';
 import { Node } from 'reactflow';
 import AnswerForm from '../answer-form';
 import BeginForm from '../begin-form';
@@ -25,6 +26,11 @@ const FlowDrawer = ({
 }: IModalProps<any> & IProps) => {
   const operatorName: Operator = node?.data.label;
   const OperatorForm = FormMap[operatorName];
+
+  const onValuesChange = useCallback(() => {
+    console.info(node?.id);
+  }, [node]);
+
   return (
     <Drawer
       title={node?.data.label}
@@ -35,7 +41,7 @@ const FlowDrawer = ({
       mask={false}
       width={470}
     >
-      {visible && <OperatorForm></OperatorForm>}
+      {visible && <OperatorForm onValuesChange={onValuesChange}></OperatorForm>}
     </Drawer>
   );
 };
diff --git a/web/src/pages/flow/generate-form/index.tsx b/web/src/pages/flow/generate-form/index.tsx
index 72a7dc1ae41..ce5de1802e0 100644
--- a/web/src/pages/flow/generate-form/index.tsx
+++ b/web/src/pages/flow/generate-form/index.tsx
@@ -8,8 +8,9 @@ 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 = () => {
+const GenerateForm = ({ onValuesChange }: IOperatorForm) => {
   const { t } = useTranslate('flow');
   const [form] = Form.useForm();
   const initialLlmSetting = undefined;
@@ -46,9 +47,7 @@ const GenerateForm = () => {
       wrapperCol={{ span: 15 }}
       autoComplete="off"
       form={form}
-      onValuesChange={(changedValues, values) => {
-        console.info(changedValues, values);
-      }}
+      onValuesChange={onValuesChange}
     >
       <LlmSettingItems
         handleParametersChange={handleParametersChange}
diff --git a/web/src/pages/flow/hooks.ts b/web/src/pages/flow/hooks.ts
index 217adeaa2bd..13ab9c6b0fa 100644
--- a/web/src/pages/flow/hooks.ts
+++ b/web/src/pages/flow/hooks.ts
@@ -1,4 +1,6 @@
 import { useSetModalState } from '@/hooks/commonHooks';
+import { useFetchFlowTemplates } from '@/hooks/flow-hooks';
+import { useFetchLlmList } from '@/hooks/llmHooks';
 import React, {
   Dispatch,
   KeyboardEventHandler,
@@ -146,3 +148,16 @@ export const useSaveGraph = () => {
 
   return { saveGraph };
 };
+
+export const useHandleFormValuesChange = () => {
+  const handleValuesChange = (changedValues: any, values: any) => {
+    console.info(changedValues, values);
+  };
+
+  return { handleValuesChange };
+};
+
+export const useFetchDataOnMount = () => {
+  useFetchFlowTemplates();
+  useFetchLlmList();
+};
diff --git a/web/src/pages/flow/index.tsx b/web/src/pages/flow/index.tsx
index bb230dbef09..9bd1a1b0527 100644
--- a/web/src/pages/flow/index.tsx
+++ b/web/src/pages/flow/index.tsx
@@ -1,17 +1,17 @@
-import { useFetchLlmList } from '@/hooks/llmHooks';
 import { Layout } from 'antd';
 import { useState } from 'react';
 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);
 
-  useFetchLlmList();
+  useFetchDataOnMount();
 
   return (
     <Layout>
diff --git a/web/src/pages/flow/interface.ts b/web/src/pages/flow/interface.ts
index 2d17dd48e40..f1a3938fccc 100644
--- a/web/src/pages/flow/interface.ts
+++ b/web/src/pages/flow/interface.ts
@@ -2,3 +2,7 @@ export interface DSLComponentList {
   id: string;
   name: string;
 }
+
+export interface IOperatorForm {
+  onValuesChange?(changedValues: any, values: any): void;
+}
diff --git a/web/src/pages/flow/retrieval-form/index.tsx b/web/src/pages/flow/retrieval-form/index.tsx
index cbe96d15024..afbea85228e 100644
--- a/web/src/pages/flow/retrieval-form/index.tsx
+++ b/web/src/pages/flow/retrieval-form/index.tsx
@@ -4,6 +4,7 @@ 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;
@@ -17,7 +18,7 @@ const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
   console.log('Failed:', errorInfo);
 };
 
-const RetrievalForm = () => {
+const RetrievalForm = ({ onValuesChange }: IOperatorForm) => {
   const [form] = Form.useForm();
 
   return (
@@ -28,6 +29,7 @@ const RetrievalForm = () => {
       onFinish={onFinish}
       onFinishFailed={onFinishFailed}
       autoComplete="off"
+      onValuesChange={onValuesChange}
       form={form}
     >
       <SimilaritySlider isTooltipShown></SimilaritySlider>
diff --git a/web/src/services/flow-service.ts b/web/src/services/flow-service.ts
new file mode 100644
index 00000000000..00bd9cc835a
--- /dev/null
+++ b/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;
diff --git a/web/src/utils/api.ts b/web/src/utils/api.ts
index fe083d67515..52b37660f02 100644
--- a/web/src/utils/api.ts
+++ b/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`,
 };
diff --git a/web/src/utils/registerServer.ts b/web/src/utils/registerServer.ts
index 02ae2b1f583..046b863d31e 100644
--- a/web/src/utils/registerServer.ts
+++ b/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 }>,

From f849a476eeb2d27381d844762c4efe95d9eb694e Mon Sep 17 00:00:00 2001
From: bill <yibie_jingnian@163.com>
Date: Mon, 3 Jun 2024 17:49:28 +0800
Subject: [PATCH 5/8] feat: add FlowList

---
 web/src/hooks/flow-hooks.ts       | 33 +++++++++++++++++++++-
 web/src/pages/flow/list/hooks.ts  | 47 +++++++++++++++++++++++++++++++
 web/src/pages/flow/list/index.tsx | 37 ++++++++++++++++++++++++
 web/src/pages/flow/mock.tsx       | 16 +++++++++--
 web/src/routes.ts                 |  4 +++
 5 files changed, 134 insertions(+), 3 deletions(-)
 create mode 100644 web/src/pages/flow/list/hooks.ts
 create mode 100644 web/src/pages/flow/list/index.tsx

diff --git a/web/src/hooks/flow-hooks.ts b/web/src/hooks/flow-hooks.ts
index a41b1bf077d..9fbfbcd1f91 100644
--- a/web/src/hooks/flow-hooks.ts
+++ b/web/src/hooks/flow-hooks.ts
@@ -1,5 +1,5 @@
 import flowService from '@/services/flow-service';
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 
 export const useFetchFlowTemplates = () => {
   const { data } = useQuery({
@@ -14,3 +14,34 @@ export const useFetchFlowTemplates = () => {
 
   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 {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: ['fetchFlowList'],
+    mutationFn: async (params: any) => {
+      const { data } = await flowService.setCanvas(params);
+
+      return data?.data ?? [];
+    },
+  });
+
+  return { data, loading, setFlow: mutateAsync };
+};
diff --git a/web/src/pages/flow/list/hooks.ts b/web/src/pages/flow/list/hooks.ts
new file mode 100644
index 00000000000..5c0cc108d51
--- /dev/null
+++ b/web/src/pages/flow/list/hooks.ts
@@ -0,0 +1,47 @@
+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();
+  console.info(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,
+  };
+};
diff --git a/web/src/pages/flow/list/index.tsx b/web/src/pages/flow/list/index.tsx
new file mode 100644
index 00000000000..fe6d736fb31
--- /dev/null
+++ b/web/src/pages/flow/list/index.tsx
@@ -0,0 +1,37 @@
+import RenameModal from '@/components/rename-modal';
+import { PlusOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import { useFetchDataOnMount, useSaveFlow } from './hooks';
+
+const FlowList = () => {
+  const {
+    showFlowSettingModal,
+    hideFlowSettingModal,
+    flowSettingVisible,
+    flowSettingLoading,
+
+    onFlowOk,
+  } = useSaveFlow();
+
+  useFetchDataOnMount();
+  return (
+    <div>
+      <Button
+        type="primary"
+        icon={<PlusOutlined />}
+        onClick={showFlowSettingModal}
+      >
+        createKnowledgeBase
+      </Button>
+      <RenameModal
+        visible={flowSettingVisible}
+        onOk={onFlowOk}
+        loading={flowSettingLoading}
+        hideModal={hideFlowSettingModal}
+        initialName=""
+      ></RenameModal>
+    </div>
+  );
+};
+
+export default FlowList;
diff --git a/web/src/pages/flow/mock.tsx b/web/src/pages/flow/mock.tsx
index cb009357055..1d012f383f9 100644
--- a/web/src/pages/flow/mock.tsx
+++ b/web/src/pages/flow/mock.tsx
@@ -159,7 +159,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 +174,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'],
diff --git a/web/src/routes.ts b/web/src/routes.ts
index 965ddf63204..fda798cbe89 100644
--- a/web/src/routes.ts
+++ b/web/src/routes.ts
@@ -88,6 +88,10 @@ const routes = [
         path: '/file',
         component: '@/pages/file-manager',
       },
+      {
+        path: '/flow/list',
+        component: '@/pages/flow/list',
+      },
       {
         path: '/flow',
         component: '@/pages/flow',

From c239b085cd376931d8cbe0b8bafb41339940f0c2 Mon Sep 17 00:00:00 2001
From: bill <yibie_jingnian@163.com>
Date: Mon, 3 Jun 2024 19:24:45 +0800
Subject: [PATCH 6/8] feat: add store for canvas

---
 web/package-lock.json               | 257 ++++++----------------------
 web/package.json                    |   3 +-
 web/src/pages/flow/canvas/index.tsx |  55 ++----
 web/src/pages/flow/hooks.ts         |  67 +++-----
 web/src/pages/flow/store.ts         |  91 ++++++++++
 5 files changed, 183 insertions(+), 290 deletions(-)
 create mode 100644 web/src/pages/flow/store.ts

diff --git a/web/package-lock.json b/web/package-lock.json
index 6668f027196..308d2af8757 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -40,7 +40,8 @@
         "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",
@@ -3916,40 +3917,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",
@@ -3964,40 +3931,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",
@@ -4018,40 +3951,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",
@@ -4070,40 +3969,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",
@@ -4120,40 +3985,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",
@@ -4168,40 +3999,6 @@
         "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==",
-      "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/@rgrove/parse-xml": {
       "version": "2.0.4",
       "resolved": "https://registry.npmmirror.com/@rgrove/parse-xml/-/parse-xml-2.0.4.tgz",
@@ -6717,6 +6514,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",
@@ -13646,10 +13453,15 @@
       "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==",
-      "dev": true
+      "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/import-fresh": {
       "version": "3.3.0",
@@ -26089,6 +25901,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",
diff --git a/web/package.json b/web/package.json
index b1a9f4a3d85..f6d4a8c6759 100644
--- a/web/package.json
+++ b/web/package.json
@@ -45,7 +45,8 @@
     "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",
diff --git a/web/src/pages/flow/canvas/index.tsx b/web/src/pages/flow/canvas/index.tsx
index 84bd9e17bd2..9aa6a2a3e00 100644
--- a/web/src/pages/flow/canvas/index.tsx
+++ b/web/src/pages/flow/canvas/index.tsx
@@ -1,17 +1,5 @@
-import { useCallback, useEffect, useState } from 'react';
-import ReactFlow, {
-  Background,
-  Controls,
-  Edge,
-  Node,
-  NodeMouseHandler,
-  OnConnect,
-  OnEdgesChange,
-  OnNodesChange,
-  addEdge,
-  applyEdgeChanges,
-  applyNodeChanges,
-} from 'reactflow';
+import { useCallback } from 'react';
+import ReactFlow, { Background, Controls, NodeMouseHandler } from 'reactflow';
 import 'reactflow/dist/style.css';
 
 import { NodeContextMenu, useHandleNodeContextMenu } from './context-menu';
@@ -20,10 +8,9 @@ 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';
@@ -35,30 +22,20 @@ interface IProps {
 }
 
 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, clickedNode } =
     useShowDrawer();
 
-  const onNodesChange: OnNodesChange = useCallback(
-    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
-    [],
-  );
-  const onEdgesChange: OnEdgesChange = useCallback(
-    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
-    [],
-  );
-
-  const onConnect: OnConnect = useCallback(
-    (params) => setEdges((eds) => addEdge(params, eds)),
-    [],
-  );
-
   const onNodeClick: NodeMouseHandler = useCallback(
     (e, node) => {
       showDrawer(node);
@@ -66,14 +43,9 @@ function FlowCanvas({ sideWidth }: IProps) {
     [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 className={styles.canvasWrapper}>
@@ -93,6 +65,7 @@ function FlowCanvas({ sideWidth }: IProps) {
         onNodeClick={onNodeClick}
         onInit={setReactFlowInstance}
         onKeyUp={handleKeyUp}
+        onSelectionChange={onSelectionChange}
       >
         <Background />
         <Controls />
diff --git a/web/src/pages/flow/hooks.ts b/web/src/pages/flow/hooks.ts
index 13ab9c6b0fa..46125cea0d3 100644
--- a/web/src/pages/flow/hooks.ts
+++ b/web/src/pages/flow/hooks.ts
@@ -1,21 +1,25 @@
 import { useSetModalState } from '@/hooks/commonHooks';
 import { useFetchFlowTemplates } from '@/hooks/flow-hooks';
 import { useFetchLlmList } from '@/hooks/llmHooks';
-import React, {
-  Dispatch,
-  KeyboardEventHandler,
-  SetStateAction,
-  useCallback,
-  useState,
-} from 'react';
-import {
-  Node,
-  Position,
-  ReactFlowInstance,
-  useOnSelectionChange,
-  useReactFlow,
-} from 'reactflow';
+import React, { KeyboardEventHandler, useCallback, useState } from 'react';
+import { Node, Position, ReactFlowInstance, useReactFlow } from 'reactflow';
 import { v4 as uuidv4 } from 'uuid';
+import useStore, { RFState } from './store';
+
+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(
@@ -29,7 +33,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>>();
 
@@ -68,9 +73,9 @@ 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 };
@@ -100,37 +105,21 @@ export const useShowDrawer = () => {
   };
 };
 
-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[]) => {
+export const useDeleteEdge = () => {
   const { setEdges } = useReactFlow();
+  const selectedEdgeIds = useStore((state) => state.selectedEdgeIds);
 
   const deleteEdge = useCallback(() => {
     setEdges((edges) =>
-      edges.filter((edge) => selectedEdges.every((x) => x !== edge.id)),
+      edges.filter((edge) => selectedEdgeIds.every((x) => x !== edge.id)),
     );
-  }, [setEdges, selectedEdges]);
+  }, [setEdges, selectedEdgeIds]);
 
   return deleteEdge;
 };
 
-export const useHandleKeyUp = (
-  selectedEdges: string[],
-  selectedNodes: string[],
-) => {
-  const deleteEdge = useDeleteEdge(selectedEdges);
+export const useHandleKeyUp = () => {
+  const deleteEdge = useDeleteEdge();
   const handleKeyUp: KeyboardEventHandler = useCallback(
     (e) => {
       if (e.code === 'Delete') {
diff --git a/web/src/pages/flow/store.ts b/web/src/pages/flow/store.ts
new file mode 100644
index 00000000000..a4e67e4483c
--- /dev/null
+++ b/web/src/pages/flow/store.ts
@@ -0,0 +1,91 @@
+import {
+  Connection,
+  Edge,
+  EdgeChange,
+  Node,
+  NodeChange,
+  OnConnect,
+  OnEdgesChange,
+  OnNodesChange,
+  OnSelectionChangeFunc,
+  OnSelectionChangeParams,
+  addEdge,
+  applyEdgeChanges,
+  applyNodeChanges,
+} from 'reactflow';
+import { create } from 'zustand';
+
+import { dsl } from './mock';
+
+const { nodes: initialNodes, edges: initialEdges } = dsl.graph;
+
+export type NodeData = {
+  color: string;
+};
+
+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;
+  updateNodeColor: (nodeId: string, color: string) => void;
+  onSelectionChange: OnSelectionChangeFunc;
+  addNode: (nodes: Node) => 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>((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) });
+  },
+  updateNodeColor: (nodeId: string, color: string) => {
+    set({
+      nodes: get().nodes.map((node) => {
+        if (node.id === nodeId) {
+          // it's important to create a new object here, to inform React Flow about the changes
+          node.data = { ...node.data, color };
+        }
+
+        return node;
+      }),
+    });
+  },
+}));
+
+export default useStore;

From e1d956a505c388468f4d17c0a9a1d591add21b26 Mon Sep 17 00:00:00 2001
From: bill <yibie_jingnian@163.com>
Date: Tue, 4 Jun 2024 17:00:10 +0800
Subject: [PATCH 7/8] feat: add custom edge

---
 web/package-lock.json                     |  20 ++++
 web/package.json                          |   1 +
 web/src/pages/flow/canvas/edge/index.less |  15 +++
 web/src/pages/flow/canvas/edge/index.tsx  |  72 +++++++++++++
 web/src/pages/flow/canvas/index.tsx       |  19 +++-
 web/src/pages/flow/canvas/node/index.less |   5 +-
 web/src/pages/flow/canvas/node/index.tsx  |   8 +-
 web/src/pages/flow/flow-drawer/index.tsx  |  11 +-
 web/src/pages/flow/hooks.ts               |  39 ++++---
 web/src/pages/flow/interface.ts           |  32 ++++++
 web/src/pages/flow/store.ts               | 121 ++++++++++++----------
 web/src/pages/flow/utils.ts               |  33 ++++++
 12 files changed, 294 insertions(+), 82 deletions(-)
 create mode 100644 web/src/pages/flow/canvas/edge/index.less
 create mode 100644 web/src/pages/flow/canvas/edge/index.tsx

diff --git a/web/package-lock.json b/web/package-lock.json
index 308d2af8757..b1e23daf94e 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -45,6 +45,7 @@
       },
       "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",
@@ -3999,6 +4000,19 @@
         "react-dom": ">=17"
       }
     },
+    "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": {
+        "@babel/runtime": "^7.23.2",
+        "immutable": "^4.3.4"
+      },
+      "peerDependencies": {
+        "redux": "^3.1.0 || ^4.0.0 || ^5.0.0"
+      }
+    },
     "node_modules/@rgrove/parse-xml": {
       "version": "2.0.4",
       "resolved": "https://registry.npmmirror.com/@rgrove/parse-xml/-/parse-xml-2.0.4.tgz",
@@ -13463,6 +13477,12 @@
         "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": {
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
diff --git a/web/package.json b/web/package.json
index f6d4a8c6759..ca6470af10b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -50,6 +50,7 @@
   },
   "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",
diff --git a/web/src/pages/flow/canvas/edge/index.less b/web/src/pages/flow/canvas/edge/index.less
new file mode 100644
index 00000000000..fd6bae7f075
--- /dev/null
+++ b/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);
+}
diff --git a/web/src/pages/flow/canvas/edge/index.tsx b/web/src/pages/flow/canvas/edge/index.tsx
new file mode 100644
index 00000000000..4aa123b44a8
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/web/src/pages/flow/canvas/index.tsx b/web/src/pages/flow/canvas/index.tsx
index 9aa6a2a3e00..4e96a9fce4e 100644
--- a/web/src/pages/flow/canvas/index.tsx
+++ b/web/src/pages/flow/canvas/index.tsx
@@ -1,8 +1,14 @@
 import { useCallback } from 'react';
-import ReactFlow, { Background, Controls, NodeMouseHandler } from 'reactflow';
+import ReactFlow, {
+  Background,
+  Controls,
+  MarkerType,
+  NodeMouseHandler,
+} from 'reactflow';
 import 'reactflow/dist/style.css';
 
 import { NodeContextMenu, useHandleNodeContextMenu } from './context-menu';
+import { ButtonEdge } from './edge';
 
 import FlowDrawer from '../flow-drawer';
 import {
@@ -17,6 +23,10 @@ import styles from './index.less';
 
 const nodeTypes = { textUpdater: TextUpdaterNode };
 
+const edgeTypes = {
+  buttonEdge: ButtonEdge,
+};
+
 interface IProps {
   sideWidth: number;
 }
@@ -59,6 +69,7 @@ function FlowCanvas({ sideWidth }: IProps) {
         fitView
         onConnect={onConnect}
         nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
         onPaneClick={onPaneClick}
         onDrop={onDrop}
         onDragOver={onDragOver}
@@ -66,6 +77,12 @@ function FlowCanvas({ sideWidth }: IProps) {
         onInit={setReactFlowInstance}
         onKeyUp={handleKeyUp}
         onSelectionChange={onSelectionChange}
+        defaultEdgeOptions={{
+          type: 'buttonEdge',
+          markerEnd: {
+            type: MarkerType.ArrowClosed,
+          },
+        }}
       >
         <Background />
         <Controls />
diff --git a/web/src/pages/flow/canvas/node/index.less b/web/src/pages/flow/canvas/node/index.less
index 43a78ca33b8..a2a37aac198 100644
--- a/web/src/pages/flow/canvas/node/index.less
+++ b/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,6 @@
     font-size: 12px;
   }
 }
+.selectedNode {
+  border-color: #1677ff;
+}
diff --git a/web/src/pages/flow/canvas/node/index.tsx b/web/src/pages/flow/canvas/node/index.tsx
index 13801cace59..d73ca98fe21 100644
--- a/web/src/pages/flow/canvas/node/index.tsx
+++ b/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,9 +6,14 @@ 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}
diff --git a/web/src/pages/flow/flow-drawer/index.tsx b/web/src/pages/flow/flow-drawer/index.tsx
index a71573917d3..01f3338dd13 100644
--- a/web/src/pages/flow/flow-drawer/index.tsx
+++ b/web/src/pages/flow/flow-drawer/index.tsx
@@ -1,11 +1,11 @@
 import { IModalProps } from '@/interfaces/common';
 import { Drawer } from 'antd';
-import { useCallback } from 'react';
 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 {
@@ -26,10 +26,7 @@ const FlowDrawer = ({
 }: IModalProps<any> & IProps) => {
   const operatorName: Operator = node?.data.label;
   const OperatorForm = FormMap[operatorName];
-
-  const onValuesChange = useCallback(() => {
-    console.info(node?.id);
-  }, [node]);
+  const { handleValuesChange } = useHandleFormValuesChange(node?.id);
 
   return (
     <Drawer
@@ -41,7 +38,9 @@ const FlowDrawer = ({
       mask={false}
       width={470}
     >
-      {visible && <OperatorForm onValuesChange={onValuesChange}></OperatorForm>}
+      {visible && (
+        <OperatorForm onValuesChange={handleValuesChange}></OperatorForm>
+      )}
     </Drawer>
   );
 };
diff --git a/web/src/pages/flow/hooks.ts b/web/src/pages/flow/hooks.ts
index 46125cea0d3..52f65b882eb 100644
--- a/web/src/pages/flow/hooks.ts
+++ b/web/src/pages/flow/hooks.ts
@@ -2,9 +2,10 @@ import { useSetModalState } from '@/hooks/commonHooks';
 import { useFetchFlowTemplates } from '@/hooks/flow-hooks';
 import { useFetchLlmList } from '@/hooks/llmHooks';
 import React, { KeyboardEventHandler, useCallback, useState } from 'react';
-import { Node, Position, ReactFlowInstance, useReactFlow } from 'reactflow';
+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,
@@ -105,21 +106,8 @@ export const useShowDrawer = () => {
   };
 };
 
-export const useDeleteEdge = () => {
-  const { setEdges } = useReactFlow();
-  const selectedEdgeIds = useStore((state) => state.selectedEdgeIds);
-
-  const deleteEdge = useCallback(() => {
-    setEdges((edges) =>
-      edges.filter((edge) => selectedEdgeIds.every((x) => x !== edge.id)),
-    );
-  }, [setEdges, selectedEdgeIds]);
-
-  return deleteEdge;
-};
-
 export const useHandleKeyUp = () => {
-  const deleteEdge = useDeleteEdge();
+  const deleteEdge = useStore((state) => state.deleteEdge);
   const handleKeyUp: KeyboardEventHandler = useCallback(
     (e) => {
       if (e.code === 'Delete') {
@@ -133,15 +121,26 @@ 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 = () => {
-  const handleValuesChange = (changedValues: any, values: any) => {
-    console.info(changedValues, values);
-  };
+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 };
 };
diff --git a/web/src/pages/flow/interface.ts b/web/src/pages/flow/interface.ts
index f1a3938fccc..ebb10a4151c 100644
--- a/web/src/pages/flow/interface.ts
+++ b/web/src/pages/flow/interface.ts
@@ -6,3 +6,35 @@ export interface DSLComponentList {
 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;
+};
diff --git a/web/src/pages/flow/store.ts b/web/src/pages/flow/store.ts
index a4e67e4483c..1d6b8d5fa86 100644
--- a/web/src/pages/flow/store.ts
+++ b/web/src/pages/flow/store.ts
@@ -1,3 +1,4 @@
+import type {} from '@redux-devtools/extension';
 import {
   Connection,
   Edge,
@@ -14,15 +15,12 @@ import {
   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 NodeData = {
-  color: string;
-};
-
 export type RFState = {
   nodes: Node<NodeData>[];
   edges: Edge[];
@@ -33,59 +31,76 @@ export type RFState = {
   onConnect: OnConnect;
   setNodes: (nodes: Node[]) => void;
   setEdges: (edges: Edge[]) => void;
-  updateNodeColor: (nodeId: string, color: string) => 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>((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) });
-  },
-  updateNodeColor: (nodeId: string, color: string) => {
-    set({
-      nodes: get().nodes.map((node) => {
-        if (node.id === nodeId) {
-          // it's important to create a new object here, to inform React Flow about the changes
-          node.data = { ...node.data, color };
-        }
+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;
-      }),
-    });
-  },
-}));
+          return node;
+        }),
+      });
+    },
+  })),
+);
 
 export default useStore;
diff --git a/web/src/pages/flow/utils.ts b/web/src/pages/flow/utils.ts
index eadd8e53e5a..7cd5810eb9a 100644
--- a/web/src/pages/flow/utils.ts
+++ b/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;
+};

From f4787791eca6b9e16cd06c8c371252afbada7309 Mon Sep 17 00:00:00 2001
From: bill <yibie_jingnian@163.com>
Date: Tue, 4 Jun 2024 19:24:55 +0800
Subject: [PATCH 8/8] feat: add flow card

---
 web/src/hooks/flow-hooks.ts                  | 29 +++++-
 web/src/pages/flow/canvas/index.tsx          |  1 +
 web/src/pages/flow/canvas/node/index.less    |  6 ++
 web/src/pages/flow/canvas/node/index.tsx     | 10 ++-
 web/src/pages/flow/generate-form/index.tsx   |  5 +-
 web/src/pages/flow/interface.ts              | 22 +++++
 web/src/pages/flow/list/flow-card/index.less | 78 ++++++++++++++++
 web/src/pages/flow/list/flow-card/index.tsx  | 94 ++++++++++++++++++++
 web/src/pages/flow/list/hooks.ts             |  3 +-
 web/src/pages/flow/list/index.less           | 48 ++++++++++
 web/src/pages/flow/list/index.tsx            | 40 ++++++---
 web/src/pages/flow/mock.tsx                  |  9 +-
 web/src/routes.ts                            |  4 +-
 13 files changed, 320 insertions(+), 29 deletions(-)
 create mode 100644 web/src/pages/flow/list/flow-card/index.less
 create mode 100644 web/src/pages/flow/list/flow-card/index.tsx
 create mode 100644 web/src/pages/flow/list/index.less

diff --git a/web/src/hooks/flow-hooks.ts b/web/src/hooks/flow-hooks.ts
index 9fbfbcd1f91..64007b118e0 100644
--- a/web/src/hooks/flow-hooks.ts
+++ b/web/src/hooks/flow-hooks.ts
@@ -1,5 +1,5 @@
 import flowService from '@/services/flow-service';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
 export const useFetchFlowTemplates = () => {
   const { data } = useQuery({
@@ -30,18 +30,41 @@ export const useFetchFlowList = () => {
 };
 
 export const useSetFlow = () => {
+  const queryClient = useQueryClient();
   const {
     data,
     isPending: loading,
     mutateAsync,
   } = useMutation({
-    mutationKey: ['fetchFlowList'],
+    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, setFlow: mutateAsync };
+  return { data, loading, deleteFlow: mutateAsync };
 };
diff --git a/web/src/pages/flow/canvas/index.tsx b/web/src/pages/flow/canvas/index.tsx
index 4e96a9fce4e..dc1d4757961 100644
--- a/web/src/pages/flow/canvas/index.tsx
+++ b/web/src/pages/flow/canvas/index.tsx
@@ -77,6 +77,7 @@ function FlowCanvas({ sideWidth }: IProps) {
         onInit={setReactFlowInstance}
         onKeyUp={handleKeyUp}
         onSelectionChange={onSelectionChange}
+        nodeOrigin={[0.5, 0]}
         defaultEdgeOptions={{
           type: 'buttonEdge',
           markerEnd: {
diff --git a/web/src/pages/flow/canvas/node/index.less b/web/src/pages/flow/canvas/node/index.less
index a2a37aac198..92996613c51 100644
--- a/web/src/pages/flow/canvas/node/index.less
+++ b/web/src/pages/flow/canvas/node/index.less
@@ -13,3 +13,9 @@
 .selectedNode {
   border-color: #1677ff;
 }
+
+.handle {
+  display: inline-flex;
+  text-align: center;
+  // align-items: center;
+}
diff --git a/web/src/pages/flow/canvas/node/index.tsx b/web/src/pages/flow/canvas/node/index.tsx
index d73ca98fe21..bd501799ddf 100644
--- a/web/src/pages/flow/canvas/node/index.tsx
+++ b/web/src/pages/flow/canvas/node/index.tsx
@@ -18,12 +18,18 @@ export function TextUpdaterNode({
         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>
   );
diff --git a/web/src/pages/flow/generate-form/index.tsx b/web/src/pages/flow/generate-form/index.tsx
index ce5de1802e0..c5d63d1927f 100644
--- a/web/src/pages/flow/generate-form/index.tsx
+++ b/web/src/pages/flow/generate-form/index.tsx
@@ -24,7 +24,7 @@ const GenerateForm = ({ onValuesChange }: IOperatorForm) => {
   );
 
   useEffect(() => {
-    const values = Object.keys(variableEnabledFieldMap).reduce<
+    const switchBoxValues = Object.keys(variableEnabledFieldMap).reduce<
       Record<string, boolean>
     >((pre, field) => {
       pre[field] =
@@ -37,7 +37,8 @@ const GenerateForm = ({ onValuesChange }: IOperatorForm) => {
             ];
       return pre;
     }, {});
-    form.setFieldsValue(values);
+    const otherValues = settledModelVariableMap[ModelVariableType.Precise];
+    form.setFieldsValue({ ...switchBoxValues, ...otherValues });
   }, [form, initialLlmSetting]);
 
   return (
diff --git a/web/src/pages/flow/interface.ts b/web/src/pages/flow/interface.ts
index ebb10a4151c..ffb882c2c8f 100644
--- a/web/src/pages/flow/interface.ts
+++ b/web/src/pages/flow/interface.ts
@@ -1,3 +1,5 @@
+import { Edge, Node } from 'reactflow';
+
 export interface DSLComponentList {
   id: string;
   name: string;
@@ -38,3 +40,23 @@ export type NodeData = {
   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;
+}
diff --git a/web/src/pages/flow/list/flow-card/index.less b/web/src/pages/flow/list/flow-card/index.less
new file mode 100644
index 00000000000..1c7d174e0fb
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/web/src/pages/flow/list/flow-card/index.tsx b/web/src/pages/flow/list/flow-card/index.tsx
new file mode 100644
index 00000000000..643496e23f3
--- /dev/null
+++ b/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;
diff --git a/web/src/pages/flow/list/hooks.ts b/web/src/pages/flow/list/hooks.ts
index 5c0cc108d51..1e0a2702624 100644
--- a/web/src/pages/flow/list/hooks.ts
+++ b/web/src/pages/flow/list/hooks.ts
@@ -5,7 +5,8 @@ import { dsl } from '../mock';
 
 export const useFetchDataOnMount = () => {
   const { data, loading } = useFetchFlowList();
-  console.info(data, loading);
+
+  return { list: data, loading };
 };
 
 export const useSaveFlow = () => {
diff --git a/web/src/pages/flow/list/index.less b/web/src/pages/flow/list/index.less
new file mode 100644
index 00000000000..6c171193f25
--- /dev/null
+++ b/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%;
+  }
+}
diff --git a/web/src/pages/flow/list/index.tsx b/web/src/pages/flow/list/index.tsx
index fe6d736fb31..5b4982695ee 100644
--- a/web/src/pages/flow/list/index.tsx
+++ b/web/src/pages/flow/list/index.tsx
@@ -1,28 +1,44 @@
 import RenameModal from '@/components/rename-modal';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
+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();
 
-  useFetchDataOnMount();
+  const { list, loading } = useFetchDataOnMount();
+
   return (
-    <div>
-      <Button
-        type="primary"
-        icon={<PlusOutlined />}
-        onClick={showFlowSettingModal}
-      >
-        createKnowledgeBase
-      </Button>
+    <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}
@@ -30,7 +46,7 @@ const FlowList = () => {
         hideModal={hideFlowSettingModal}
         initialName=""
       ></RenameModal>
-    </div>
+    </Flex>
   );
 };
 
diff --git a/web/src/pages/flow/mock.tsx b/web/src/pages/flow/mock.tsx
index 1d012f383f9..1e393bf8d26 100644
--- a/web/src/pages/flow/mock.tsx
+++ b/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: '' },
 ];
@@ -187,5 +182,5 @@ export const dsl = {
   },
   history: [],
   path: ['begin'],
-  Answer: [],
+  answer: [],
 };
diff --git a/web/src/routes.ts b/web/src/routes.ts
index fda798cbe89..551fcb8baa5 100644
--- a/web/src/routes.ts
+++ b/web/src/routes.ts
@@ -89,11 +89,11 @@ const routes = [
         component: '@/pages/file-manager',
       },
       {
-        path: '/flow/list',
+        path: '/flow',
         component: '@/pages/flow/list',
       },
       {
-        path: '/flow',
+        path: '/flow/:id',
         component: '@/pages/flow',
       },
     ],