feat: add UserSetting and set height of MoreIcon to 24px and replace logo (#111)

* feat: replace logo

* feat: set height of MoreIcon to 24px

* feat: add UserSetting

web/src/assets/svg/logo.svg

@@ -1,5 +1,29 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M18.1777 8C23.2737 8 23.2737 16 18.1777 16C13.0827 16 11.0447 8 5.43875 8C0.85375 8 0.85375 16 5.43875 16C11.0447 16 13.0828 8 18.1788 8H18.1777Z"
-        stroke="#7F56D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+<svg width="32" height="34" viewBox="0 0 32 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M3.43265 20.7677C4.15835 21.5062 4.15834 22.7035 3.43262 23.4419L3.39546 23.4797C2.66974 24.2182 1.49312 24.2182 0.767417 23.4797C0.0417107 22.7412 0.0417219 21.544 0.767442 20.8055L0.804608 20.7677C1.53033 20.0292 2.70694 20.0293 3.43265 20.7677Z"
+        fill="#B2DDFF" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M12.1689 21.3375C12.8933 22.0773 12.8912 23.2746 12.1641 24.0117L7.01662 29.2307C6.2896 29.9678 5.11299 29.9657 4.38859 29.2259C3.66419 28.4861 3.66632 27.2888 4.39334 26.5517L9.54085 21.3327C10.2679 20.5956 11.4445 20.5977 12.1689 21.3375Z"
+        fill="#53B1FD" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M19.1551 30.3217C19.7244 29.4528 20.8781 29.218 21.7321 29.7973L21.8436 29.8729C22.6975 30.4522 22.9283 31.6262 22.359 32.4952C21.7897 33.3641 20.6359 33.5989 19.782 33.0196L19.6705 32.944C18.8165 32.3647 18.5858 31.1907 19.1551 30.3217Z"
+        fill="#B2DDFF" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M31.4184 20.6544C32.1441 21.3929 32.1441 22.5902 31.4184 23.3286L28.8911 25.9003C28.1654 26.6388 26.9887 26.6388 26.263 25.9003C25.5373 25.1619 25.5373 23.9646 26.263 23.2261L28.7903 20.6544C29.516 19.916 30.6927 19.916 31.4184 20.6544Z"
+        fill="#53B1FD" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M31.4557 11.1427C32.1814 11.8812 32.1814 13.0785 31.4557 13.8169L12.7797 32.8209C12.054 33.5594 10.8774 33.5594 10.1517 32.8209C9.42599 32.0825 9.42599 30.8852 10.1517 30.1467L28.8277 11.1427C29.5534 10.4043 30.73 10.4043 31.4557 11.1427Z"
+        fill="#1570EF" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M27.925 5.29994C28.6508 6.0384 28.6508 7.23568 27.925 7.97414L17.184 18.9038C16.4583 19.6423 15.2817 19.6423 14.556 18.9038C13.8303 18.1653 13.8303 16.9681 14.556 16.2296L25.297 5.29994C26.0227 4.56148 27.1993 4.56148 27.925 5.29994Z"
+        fill="#1570EF" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M22.256 1.59299C22.9822 2.33095 22.983 3.52823 22.2578 4.26718L8.45055 18.3358C7.72533 19.0748 6.54871 19.0756 5.82251 18.3376C5.09631 17.5996 5.09552 16.4024 5.82075 15.6634L19.6279 1.59478C20.3532 0.855827 21.5298 0.855022 22.256 1.59299Z"
+        fill="#1570EF" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M8.58225 6.09619C9.30671 6.83592 9.30469 8.0332 8.57772 8.77038L3.17006 14.2541C2.4431 14.9913 1.26649 14.9893 0.542025 14.2495C-0.182438 13.5098 -0.180413 12.3125 0.546548 11.5753L5.95421 6.09159C6.68117 5.3544 7.85778 5.35646 8.58225 6.09619Z"
+        fill="#53B1FD" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M11.893 0.624023C12.9193 0.624023 13.7513 1.47063 13.7513 2.51497V2.70406C13.7513 3.7484 12.9193 4.59501 11.893 4.59501C10.8667 4.59501 10.0347 3.7484 10.0347 2.70406V2.51497C10.0347 1.47063 10.8667 0.624023 11.893 0.624023Z"
+        fill="#B2DDFF" />
 </svg>

web/src/constants/setting.ts

@@ -0,0 +1,17 @@
+export const UserSettingBaseKey = 'user-setting';
+
+export enum UserSettingRouteKey {
+  Profile = 'profile',
+  Password = 'password',
+  Model = 'model',
+  Team = 'team',
+  Logout = 'logout',
+}
+
+export const UserSettingRouteMap = {
+  [UserSettingRouteKey.Profile]: 'Profile',
+  [UserSettingRouteKey.Password]: 'Password',
+  [UserSettingRouteKey.Model]: 'Model Providers',
+  [UserSettingRouteKey.Team]: 'Team',
+  [UserSettingRouteKey.Logout]: 'Log out',
+};

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

@@ -12,6 +12,10 @@
   border-color: #1677ff;
 }
 
+.logoWrapper {
+  .pointerCursor;
+}
+
 .appIcon {
   vertical-align: middle;
 }

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

@@ -6,7 +6,7 @@ import Toolbar from '../right-toolbar';
 
 import styles from './index.less';
 
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useLocation, useNavigate } from 'umi';
 
 const { Header } = Layout;
@@ -37,6 +37,10 @@ const RagHeader = () => {
     navigate(path);
   };
 
+  const handleLogoClick = useCallback(() => {
+    navigate('/');
+  }, [navigate]);
+
   return (
     <Header
       style={{
@@ -48,9 +52,9 @@ const RagHeader = () => {
         height: '72px',
       }}
     >
-      <Space size={12}>
+      <Space size={12} onClick={handleLogoClick} className={styles.logoWrapper}>
         <Logo className={styles.appIcon}></Logo>
-        <label className={styles.appName}>RagFlow</label>
+        <span className={styles.appName}>RagFlow</span>
       </Space>
       <Space size={[0, 8]} wrap>
         <Radio.Group

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

@@ -24,7 +24,7 @@ const App: React.FC = () => {
   }, [logout]);
 
   const toSetting = () => {
-    history.push('/setting');
+    history.push('/user-setting');
   };
 
   const items: MenuProps['items'] = useMemo(() => {

web/src/less/mixins.less

@@ -29,3 +29,7 @@
     background-color: #f2f2f2;
   }
 }
+
+.pointerCursor() {
+  cursor: pointer;
+}

web/src/pages/add-knowledge/constant.ts

@@ -4,7 +4,6 @@ export const routeMap = {
   [KnowledgeRouteKey.Dataset]: 'Dataset',
   [KnowledgeRouteKey.Testing]: 'Retrieval testing',
   [KnowledgeRouteKey.Configuration]: 'Configuration',
-  [KnowledgeRouteKey.TempTesting]: 'Testing',
 };
 
 export enum KnowledgeDatasetRouteKey {

web/src/pages/chat/chat-container/index.tsx

@@ -36,7 +36,7 @@ import styles from './index.less';
 
 const reg = /(#{2}\d+\${2})/g;
 
-const getChunkIndex = (match: string) => Number(match.slice(2, 3));
+const getChunkIndex = (match: string) => Number(match.slice(2, -2));
 
 const rehypeWrapReference = () => {
   return function wrapTextTransform(tree: any) {

web/src/pages/knowledge/knowledge-card/index.less

@@ -4,6 +4,10 @@
   flex-direction: column;
   justify-content: space-between;
 
+  .delete {
+    height: 24px;
+  }
+
   .content {
     display: flex;
     justify-content: space-between;

web/src/pages/knowledge/knowledge-card/index.tsx

@@ -64,17 +64,16 @@ const KnowledgeCard = ({ item }: IProps) => {
       <div className={styles.container}>
         <div className={styles.content}>
           <Avatar size={34} icon={<UserOutlined />} src={item.avatar} />
-
-          <span className={styles.delete}>
           <Dropdown
             menu={{
               items,
               onClick: handleDropdownMenuClick,
             }}
           >
+            <span className={styles.delete}>
               <MoreIcon />
-            </Dropdown>
             </span>
+          </Dropdown>
         </div>
         <div className={styles.titleWrapper}>
           <span className={styles.title}>{item.name}</span>

web/src/pages/user-setting/constants.tsx

@@ -0,0 +1,16 @@
+import { UserSettingRouteKey } from '@/constants/setting';
+import {
+  ContainerOutlined,
+  DesktopOutlined,
+  PieChartOutlined,
+} from '@ant-design/icons';
+
+export const UserSettingIconMap = {
+  [UserSettingRouteKey.Profile]: <PieChartOutlined />,
+  [UserSettingRouteKey.Password]: <DesktopOutlined />,
+  [UserSettingRouteKey.Model]: <ContainerOutlined />,
+  [UserSettingRouteKey.Team]: <ContainerOutlined />,
+  [UserSettingRouteKey.Logout]: <ContainerOutlined />,
+};
+
+export * from '@/constants/setting';

web/src/pages/user-setting/index.tsx

@@ -0,0 +1,14 @@
+import { Flex } from 'antd';
+import { Outlet } from 'umi';
+import SideBar from './sidebar';
+
+const UserSetting = () => {
+  return (
+    <Flex>
+      <SideBar></SideBar>
+      <Outlet></Outlet>
+    </Flex>
+  );
+};
+
+export default UserSetting;

web/src/pages/user-setting/setting-model/index.tsx

@@ -0,0 +1,5 @@
+const UserSettingModel = () => {
+  return <div>UserSettingModel</div>;
+};
+
+export default UserSettingModel;

web/src/pages/user-setting/setting-password/index.tsx

@@ -0,0 +1,5 @@
+const UserSettingPassword = () => {
+  return <div>UserSettingPassword</div>;
+};
+
+export default UserSettingPassword;

web/src/pages/user-setting/setting-profile/index.tsx

@@ -0,0 +1,5 @@
+const UserSettingProfile = () => {
+  return <div>UserSettingProfile</div>;
+};
+
+export default UserSettingProfile;

web/src/pages/user-setting/setting-team/index.tsx

@@ -0,0 +1,5 @@
+const UserSettingTeam = () => {
+  return <div>UserSettingTeam</div>;
+};
+
+export default UserSettingTeam;

web/src/pages/user-setting/sidebar/index.tsx

@@ -0,0 +1,57 @@
+import { useSecondPathName } from '@/hooks/routeHook';
+import type { MenuProps } from 'antd';
+import { Menu } from 'antd';
+import React, { useMemo } from 'react';
+import { useNavigate } from 'umi';
+import {
+  UserSettingBaseKey,
+  UserSettingIconMap,
+  UserSettingRouteKey,
+  UserSettingRouteMap,
+} from '../constants';
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+function getItem(
+  label: React.ReactNode,
+  key: React.Key,
+  icon?: React.ReactNode,
+  children?: MenuItem[],
+  type?: 'group',
+): MenuItem {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  } as MenuItem;
+}
+
+const items: MenuItem[] = Object.values(UserSettingRouteKey).map((value) =>
+  getItem(UserSettingRouteMap[value], value, UserSettingIconMap[value]),
+);
+
+const SideBar = () => {
+  const navigate = useNavigate();
+  const pathName = useSecondPathName();
+
+  const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
+    navigate(`/${UserSettingBaseKey}/${key}`);
+  };
+
+  const selectedKeys = useMemo(() => {
+    return [pathName];
+  }, [pathName]);
+
+  return (
+    <Menu
+      selectedKeys={selectedKeys}
+      mode="inline"
+      items={items}
+      onClick={handleMenuClick}
+    />
+  );
+};
+
+export default SideBar;

web/src/routes.ts

@@ -56,6 +56,29 @@ const routes = [
         path: '/setting',
         component: '@/pages/setting',
       },
+      {
+        path: '/user-setting',
+        component: '@/pages/user-setting',
+        routes: [
+          { path: '/user-setting', redirect: '/user-setting/profile' },
+          {
+            path: '/user-setting/profile',
+            component: '@/pages/user-setting/setting-profile',
+          },
+          {
+            path: '/user-setting/password',
+            component: '@/pages/user-setting/setting-password',
+          },
+          {
+            path: '/user-setting/model',
+            component: '@/pages/user-setting/setting-model',
+          },
+          {
+            path: '/user-setting/team',
+            component: '@/pages/user-setting/setting-team',
+          },
+        ],
+      },
       {
         path: '/file',
         component: '@/pages/file',