From daaf6aed5056812f10fd41725b24553645137561 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Thu, 4 Jul 2024 16:31:34 +0800
Subject: [PATCH] feat: replace the graph icon in the header #918 (#1376)

### What problem does this PR solve?

feat: replace the graph icon in the header #918

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/assets/svg/graph.svg                 |  6 ++++++
 web/src/layouts/components/header/index.less |  2 ++
 web/src/layouts/components/header/index.tsx  | 14 +++++++-------
 3 files changed, 15 insertions(+), 7 deletions(-)
 create mode 100644 web/src/assets/svg/graph.svg

diff --git a/web/src/assets/svg/graph.svg b/web/src/assets/svg/graph.svg
new file mode 100644
index 0000000000..b0b4ced2ae
--- /dev/null
+++ b/web/src/assets/svg/graph.svg
@@ -0,0 +1,6 @@
+<svg t="1720080399921" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="12958" width="200" height="200">
+    <path
+        d="M403.687027 669.563507L313.471495 695.58119a156.733031 156.733031 0 1 1-24.157785-80.038335l96.046001-27.689502a156.816622 156.816622 0 0 1 114.728579-143.358478v-136.671203a156.733031 156.733031 0 1 1 83.590949 0v136.671203a156.440462 156.440462 0 0 1 63.006679 34.523062l63.466428-38.24286a156.733031 156.733031 0 1 1 42.129839 72.201683L691.720542 549.46421c4.472116 14.586621 6.896253 30.071844 6.896253 46.121306a156.00161 156.00161 0 0 1-23.656239 82.838631l57.050823 54.940152a156.733031 156.733031 0 1 1-57.218005 60.937802l-61.439348-59.182392a156.064303 156.064303 0 0 1-71.470262 17.198838 156.712133 156.712133 0 0 1-138.217635-82.75504z m394.653771-232.320147l0.083591 0.146284a73.142081 73.142081 0 1 0-0.083591-0.146284zM541.883764 668.727597a73.142081 73.142081 0 1 0 0-146.284162 73.142081 73.142081 0 0 0 0 146.284162z m0-438.852485a73.142081 73.142081 0 1 0 0-146.284162 73.142081 73.142081 0 0 0 0 146.284162z m219.948687 585.65909a73.142081 73.142081 0 1 0 103.4438 103.443801 73.142081 73.142081 0 0 0-103.4438-103.443801z m-534.459635-135.208361a73.142081 73.142081 0 1 0-141.3105 37.824905 73.142081 73.142081 0 0 0 141.3105-37.824905z"
+        fill="currentColor" p-id="12959"></path>
+</svg>
\ No newline at end of file
diff --git a/web/src/layouts/components/header/index.less b/web/src/layouts/components/header/index.less
index d1ba8517d0..bb3edc39c0 100644
--- a/web/src/layouts/components/header/index.less
+++ b/web/src/layouts/components/header/index.less
@@ -52,4 +52,6 @@
 }
 .radioButtonIcon {
   vertical-align: middle;
+  max-width: 16px;
+  max-height: 16px;
 }
diff --git a/web/src/layouts/components/header/index.tsx b/web/src/layouts/components/header/index.tsx
index 47f9272432..ea515e245f 100644
--- a/web/src/layouts/components/header/index.tsx
+++ b/web/src/layouts/components/header/index.tsx
@@ -1,15 +1,15 @@
-import { ReactComponent as StarIon } from '@/assets/svg/chat-star.svg';
 import { ReactComponent as FileIcon } from '@/assets/svg/file-management.svg';
+import { ReactComponent as GraphIcon } from '@/assets/svg/graph.svg';
 import { ReactComponent as KnowledgeBaseIcon } from '@/assets/svg/knowledge-base.svg';
 import { useTranslate } from '@/hooks/commonHooks';
 import { useNavigateWithFromState } from '@/hooks/routeHook';
-import { Layout, Radio, Space, theme } from 'antd';
+import { Flex, Layout, Radio, Space, theme } from 'antd';
 import { useCallback, useMemo } from 'react';
 import { useLocation } from 'umi';
 import Toolbar from '../right-toolbar';
 
 import { useFetchAppConf } from '@/hooks/logicHooks';
-import { NodeIndexOutlined } from '@ant-design/icons';
+import { MessageOutlined } from '@ant-design/icons';
 import styles from './index.less';
 
 const { Header } = Layout;
@@ -26,8 +26,8 @@ const RagHeader = () => {
   const tagsData = useMemo(
     () => [
       { path: '/knowledge', name: t('knowledgeBase'), icon: KnowledgeBaseIcon },
-      { path: '/chat', name: t('chat'), icon: StarIon },
-      { path: '/flow', name: t('flow'), icon: NodeIndexOutlined },
+      { path: '/chat', name: t('chat'), icon: MessageOutlined },
+      { path: '/flow', name: t('flow'), icon: GraphIcon },
       { path: '/file', name: t('fileManager'), icon: FileIcon },
     ],
     [t],
@@ -75,13 +75,13 @@ const RagHeader = () => {
               onClick={() => handleChange(item.path)}
               key={item.name}
             >
-              <Space>
+              <Flex align="center" gap={8}>
                 <item.icon
                   className={styles.radioButtonIcon}
                   stroke={item.name === currentPath ? 'black' : 'white'}
                 ></item.icon>
                 {item.name}
-              </Space>
+              </Flex>
             </Radio.Button>
           ))}
         </Radio.Group>