feat: add graph tab to header #918 (#1374)

### What problem does this PR solve?

feat: add graph tab to header #918

### Type of change


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

web/src/hooks/flow-hooks.ts

@@ -11,7 +11,7 @@ export const EmptyDsl = {
   graph: {
     nodes: [
       {
-        id: 'Begin',
+        id: 'begin',
         type: 'beginNode',
         position: {
           x: 50,

web/src/layouts/components/header/index.tsx

@@ -9,6 +9,7 @@ import { useLocation } from 'umi';
 import Toolbar from '../right-toolbar';
 
 import { useFetchAppConf } from '@/hooks/logicHooks';
+import { NodeIndexOutlined } from '@ant-design/icons';
 import styles from './index.less';
 
 const { Header } = Layout;
@@ -26,6 +27,7 @@ const RagHeader = () => {
     () => [
       { path: '/knowledge', name: t('knowledgeBase'), icon: KnowledgeBaseIcon },
       { path: '/chat', name: t('chat'), icon: StarIon },
+      { path: '/flow', name: t('flow'), icon: NodeIndexOutlined },
       { path: '/file', name: t('fileManager'), icon: FileIcon },
     ],
     [t],

web/src/locales/en.ts

@@ -57,6 +57,7 @@ export default {
       setting: '用户设置',
       logout: '登出',
       fileManager: 'File Management',
+      flow: 'Graph',
     },
     knowledgeList: {
       welcome: 'Welcome back',

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

@@ -18,8 +18,8 @@ const CategorizeForm = ({ form, onValuesChange, node }: IOperatorForm) => {
   return (
     <Form
       name="basic"
-      labelCol={{ span: 9 }}
-      wrapperCol={{ span: 15 }}
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 18 }}
       autoComplete="off"
       form={form}
       onValuesChange={handleValuesChange}

web/src/pages/flow/constant.tsx

@@ -126,27 +126,51 @@ export const initialBeginValues = {
   prologue: `Hi! I'm your assistant, what can I do for you?`,
 };
 
-export const initialGenerateValues = {
-  // parameters: ModelVariableType.Precise,
-  // temperatureEnabled: true,
+const initialLlmBaseValues = {
   temperature: 0.1,
   top_p: 0.3,
   frequency_penalty: 0.7,
   presence_penalty: 0.4,
-  max_tokens: 512,
+  max_tokens: 256,
+};
+
+export const initialGenerateValues = {
+  // parameters: ModelVariableType.Precise,
+  // temperatureEnabled: true,
+  ...initialLlmBaseValues,
   prompt: `Please summarize the following paragraphs. Be careful with the numbers, do not make things up. Paragraphs as following:
   {cluster_content}
 The above is the content you need to summarize.`,
   cite: true,
 };
 
+export const initialRewriteQuestionValues = {
+  ...initialLlmBaseValues,
+  loop: 1,
+};
+
+export const initialRelevantValues = {
+  ...initialLlmBaseValues,
+};
+
+export const initialCategorizeValues = {
+  ...initialLlmBaseValues,
+  category_description: {},
+};
+
+export const initialMessageValues = {
+  messages: [],
+};
+
 export const initialFormValuesMap = {
   [Operator.Begin]: initialBeginValues,
   [Operator.Retrieval]: initialRetrievalValues,
   [Operator.Generate]: initialGenerateValues,
   [Operator.Answer]: {},
-  [Operator.Categorize]: {},
-  [Operator.Relevant]: {},
+  [Operator.Categorize]: initialCategorizeValues,
+  [Operator.Relevant]: initialRelevantValues,
+  [Operator.RewriteQuestion]: initialRewriteQuestionValues,
+  [Operator.Message]: initialMessageValues,
 };
 
 export const CategorizeAnchorPointPositions = [

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

@@ -13,8 +13,8 @@ const GenerateForm = ({ onValuesChange, form }: IOperatorForm) => {
   return (
     <Form
       name="basic"
-      labelCol={{ span: 9 }}
-      wrapperCol={{ span: 15 }}
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 18 }}
       autoComplete="off"
       form={form}
       onValuesChange={onValuesChange}

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

@@ -23,10 +23,8 @@ const RelevantForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   return (
     <Form
       name="basic"
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
-      style={{ maxWidth: 600 }}
-      initialValues={{ remember: true }}
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 18 }}
       onValuesChange={onValuesChange}
       autoComplete="off"
       form={form}

web/src/pages/flow/rewrite-question-form/index.tsx

@@ -11,8 +11,8 @@ const RewriteQuestionForm = ({ onValuesChange, form }: IOperatorForm) => {
   return (
     <Form
       name="basic"
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 18 }}
       onValuesChange={onValuesChange}
       autoComplete="off"
       form={form}
@@ -24,7 +24,11 @@ const RewriteQuestionForm = ({ onValuesChange, form }: IOperatorForm) => {
       >
         <LLMSelect></LLMSelect>
       </Form.Item>
-      <Form.Item label={t('loop', { keyPrefix: 'flow' })} name="loop">
+      <Form.Item
+        label={t('loop', { keyPrefix: 'flow' })}
+        name="loop"
+        initialValue={1}
+      >
         <InputNumber />
       </Form.Item>
     </Form>