feat: add custom edge (#1061)

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

### Type of change

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

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

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

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

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

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

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