From 3b50389ee7b5619c9eee14ff7343144e0d61b6cd Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Thu, 4 Jul 2024 16:26:20 +0800
Subject: [PATCH] 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                   |  2 +-
 web/src/layouts/components/header/index.tsx   |  2 ++
 web/src/locales/en.ts                         |  1 +
 web/src/pages/flow/categorize-form/index.tsx  |  4 +--
 web/src/pages/flow/constant.tsx               | 36 +++++++++++++++----
 web/src/pages/flow/generate-form/index.tsx    |  4 +--
 web/src/pages/flow/relevant-form/index.tsx    |  6 ++--
 .../flow/rewrite-question-form/index.tsx      | 10 ++++--
 8 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/web/src/hooks/flow-hooks.ts b/web/src/hooks/flow-hooks.ts
index d26567e4c..e86560b25 100644
--- a/web/src/hooks/flow-hooks.ts
+++ b/web/src/hooks/flow-hooks.ts
@@ -11,7 +11,7 @@ export const EmptyDsl = {
   graph: {
     nodes: [
       {
-        id: 'Begin',
+        id: 'begin',
         type: 'beginNode',
         position: {
           x: 50,
diff --git a/web/src/layouts/components/header/index.tsx b/web/src/layouts/components/header/index.tsx
index 846397094..47f927243 100644
--- a/web/src/layouts/components/header/index.tsx
+++ b/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],
diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts
index 6791ac4a9..9c009a6e1 100644
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@@ -57,6 +57,7 @@ export default {
       setting: '用户设置',
       logout: '登出',
       fileManager: 'File Management',
+      flow: 'Graph',
     },
     knowledgeList: {
       welcome: 'Welcome back',
diff --git a/web/src/pages/flow/categorize-form/index.tsx b/web/src/pages/flow/categorize-form/index.tsx
index de0fc5a35..ad61bfe60 100644
--- a/web/src/pages/flow/categorize-form/index.tsx
+++ b/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}
diff --git a/web/src/pages/flow/constant.tsx b/web/src/pages/flow/constant.tsx
index 8a596e6a0..60725de15 100644
--- a/web/src/pages/flow/constant.tsx
+++ b/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 = [
diff --git a/web/src/pages/flow/generate-form/index.tsx b/web/src/pages/flow/generate-form/index.tsx
index 006eb53d2..01a8346e3 100644
--- a/web/src/pages/flow/generate-form/index.tsx
+++ b/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}
diff --git a/web/src/pages/flow/relevant-form/index.tsx b/web/src/pages/flow/relevant-form/index.tsx
index c22991b68..82640e070 100644
--- a/web/src/pages/flow/relevant-form/index.tsx
+++ b/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}
diff --git a/web/src/pages/flow/rewrite-question-form/index.tsx b/web/src/pages/flow/rewrite-question-form/index.tsx
index d14003054..71a3b4e11 100644
--- a/web/src/pages/flow/rewrite-question-form/index.tsx
+++ b/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>