feat: Modify the color of the svg icon in the header according to the selected state and feat: extract routing information from the knowledge base into constants (#51)

* feat: Modify the color of the svg icon in the header according to the selected state

* feat: add translation icon to header

* feat: shorten the route length of the knowledge base

* feat: extract routing information from the knowledge base into constants

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

@@ -1,12 +1,14 @@
 import { ReactComponent as StarIon } from '@/assets/svg/chat-star.svg';
+import { ReactComponent as FileIcon } from '@/assets/svg/file-management.svg';
+import { ReactComponent as KnowledgeBaseIcon } from '@/assets/svg/knowledge-base.svg';
 import { ReactComponent as Logo } from '@/assets/svg/logo.svg';
 import { Layout, Radio, Space, theme } from 'antd';
+import Toolbar from '../right-toolbar';
 
 import styles from './index.less';
 
 import { useMemo } from 'react';
 import { useLocation, useNavigate } from 'umi';
-import User from '../user';
 
 const { Header } = Layout;
 
@@ -18,13 +20,15 @@ const RagHeader = () => {
   const { pathname } = useLocation();
 
   const tagsData = [
-    { path: '/knowledge', name: 'knowledge' },
-    { path: '/chat', name: 'chat' },
-    { path: '/file', name: 'file' },
+    { path: '/knowledge', name: 'Knowledge Base', icon: KnowledgeBaseIcon },
+    { path: '/chat', name: 'Chat', icon: StarIon },
+    { path: '/file', name: 'File Management', icon: FileIcon },
   ];
 
   const currentPath = useMemo(() => {
-    return tagsData.find((x) => x.path === pathname)?.name || 'knowledge';
+    return (
+      tagsData.find((x) => pathname.startsWith(x.path))?.name || 'knowledge'
+    );
   }, [pathname]);
 
   const handleChange = (path: string) => {
@@ -57,16 +61,20 @@ const RagHeader = () => {
             <Radio.Button
               value={item.name}
               onClick={() => handleChange(item.path)}
+              key={item.name}
             >
               <Space>
-                <StarIon className={styles.radioButtonIcon}></StarIon>
+                <item.icon
+                  className={styles.radioButtonIcon}
+                  stroke={item.name === currentPath ? 'black' : 'white'}
+                ></item.icon>
                 {item.name}
               </Space>
             </Radio.Button>
           ))}
         </Radio.Group>
       </Space>
-      <User></User>
+      <Toolbar></Toolbar>
     </Header>
   );
 };