Feat: Bind the route to the navigation bar in the head #3221 (#3863)

### What problem does this PR solve?
Feat: Bind the route to the navigation bar in the head #3221

### Type of change


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

web/src/components/knowledge-base-item.tsx

@@ -1,12 +1,12 @@
 import { useTranslate } from '@/hooks/common-hooks';
-import { useNextFetchKnowledgeList } from '@/hooks/knowledge-hooks';
+import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
 import { UserOutlined } from '@ant-design/icons';
 import { Avatar, Form, Select, Space } from 'antd';
 
 const KnowledgeBaseItem = () => {
   const { t } = useTranslate('chat');
 
-  const { list: knowledgeList } = useNextFetchKnowledgeList(true);
+  const { list: knowledgeList } = useFetchKnowledgeList(true);
 
   const knowledgeOptions = knowledgeList.map((x) => ({
     label: (

web/src/components/ui/skeleton.tsx

@@ -0,0 +1,39 @@
+import { cn } from '@/lib/utils';
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-muted', className)}
+      {...props}
+    />
+  );
+}
+
+function ParagraphSkeleton() {
+  return (
+    <div className="flex items-center space-x-4">
+      <Skeleton className="h-12 w-12 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  );
+}
+
+function CardSkeleton() {
+  return (
+    <div className="flex flex-col space-y-3">
+      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  );
+}
+
+export { CardSkeleton, ParagraphSkeleton, Skeleton };

web/src/hooks/knowledge-hooks.ts

@@ -41,7 +41,7 @@ export const useFetchKnowledgeBaseConfiguration = () => {
   return { data, loading };
 };
 
-export const useNextFetchKnowledgeList = (
+export const useFetchKnowledgeList = (
   shouldFilterListWithoutDocument: boolean = false,
 ): {
   list: IKnowledge[];

web/src/hooks/logic-hooks/navigate-hooks.ts

@@ -0,0 +1,21 @@
+import { Routes } from '@/routes';
+import { useCallback } from 'react';
+import { useNavigate } from 'umi';
+
+export const useNavigatePage = () => {
+  const navigate = useNavigate();
+
+  const navigateToDatasetList = useCallback(() => {
+    navigate(Routes.Datasets);
+  }, [navigate]);
+
+  const navigateToDataset = useCallback(() => {
+    navigate(Routes.Dataset);
+  }, [navigate]);
+
+  const navigateToHome = useCallback(() => {
+    navigate(Routes.Home);
+  }, [navigate]);
+
+  return { navigateToDatasetList, navigateToDataset, navigateToHome };
+};

web/src/layouts/next-header.tsx

@@ -3,32 +3,37 @@ import { Button } from '@/components/ui/button';
 import { Container } from '@/components/ui/container';
 import { Segmented, SegmentedValue } from '@/components/ui/segmented ';
 import { useTranslate } from '@/hooks/common-hooks';
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useNavigateWithFromState } from '@/hooks/route-hook';
+import { cn } from '@/lib/utils';
+import { Routes } from '@/routes';
 import {
   ChevronDown,
   Cpu,
   Github,
+  House,
   Library,
   MessageSquareText,
   Search,
   Star,
   Zap,
 } from 'lucide-react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useLocation } from 'umi';
 
 export function Header() {
   const { t } = useTranslate('header');
   const { pathname } = useLocation();
   const navigate = useNavigateWithFromState();
-  const [currentPath, setCurrentPath] = useState('/home');
+  // const [currentPath, setCurrentPath] = useState(Routes.Home);
+  const { navigateToHome } = useNavigatePage();
 
   const tagsData = useMemo(
     () => [
-      { path: '/home', name: t('knowledgeBase'), icon: Library },
-      { path: '/chat', name: t('chat'), icon: MessageSquareText },
-      { path: '/search', name: t('search'), icon: Search },
-      { path: '/flow', name: t('flow'), icon: Cpu },
+      { path: Routes.Datasets, name: t('knowledgeBase'), icon: Library },
+      { path: Routes.Chat, name: t('chat'), icon: MessageSquareText },
+      { path: Routes.Search, name: t('search'), icon: Search },
+      { path: Routes.Agent, name: t('flow'), icon: Cpu },
       // { path: '/file', name: t('fileManager'), icon: FileIcon },
     ],
     [t],
@@ -50,17 +55,21 @@ export function Header() {
     });
   }, [tagsData]);
 
-  // const currentPath = useMemo(() => {
-  //   return tagsData.find((x) => pathname.startsWith(x.path))?.name || 'home';
-  // }, [pathname, tagsData]);
+  const currentPath = useMemo(() => {
+    return (
+      tagsData.find((x) => pathname.startsWith(x.path))?.path || Routes.Home
+    );
+  }, [pathname, tagsData]);
+
+  const isHome = Routes.Home === currentPath;
 
   const handleChange = (path: SegmentedValue) => {
-    // navigate(path as string);
-    setCurrentPath(path as string);
+    navigate(path as Routes);
+    // setCurrentPath(path as Routes);
   };
 
   const handleLogoClick = useCallback(() => {
-    navigate('/');
+    navigate(Routes.Home);
   }, [navigate]);
 
   return (
@@ -81,7 +90,22 @@ export function Header() {
           <Star />
         </Button>
       </div>
-      <div>
+      <div className="flex gap-2 items-center">
+        <Button
+          variant={'icon'}
+          size={'icon'}
+          onClick={navigateToHome}
+          className={cn({
+            'bg-colors-background-inverse-strong': isHome,
+          })}
+        >
+          <House
+            className={cn({
+              'text-colors-text-inverse-strong': isHome,
+            })}
+          />
+        </Button>
+        <div className="h-8 w-[1px] bg-colors-outline-neutral-strong"></div>
         <Segmented
           options={options}
           value={currentPath}
@@ -90,7 +114,7 @@ export function Header() {
         ></Segmented>
       </div>
       <div className="flex items-center gap-4">
-        <Container className="bg-colors-background-inverse-standard">
+        <Container className="bg-colors-background-inverse-standard hidden xl:flex">
           V 0.13.0
           <Button variant="secondary" className="size-8">
             <ChevronDown />
@@ -101,7 +125,7 @@ export function Header() {
             <AvatarImage src="https://github.com/shadcn.png" />
             <AvatarFallback>CN</AvatarFallback>
           </Avatar>
-          [email protected]
+          <span className="max-w-14 truncate"> [email protected]</span>
           <Button
             variant="destructive"
             className="py-[2px] px-[8px] h-[23px] rounded-[4px]"

web/src/pages/agent/index.tsx

@@ -0,0 +1,3 @@
+export default function Agent() {
+  return <div>Agent</div>;
+}

web/src/pages/file-manager/connect-to-knowledge-modal/index.tsx

@@ -1,5 +1,5 @@
 import { useTranslate } from '@/hooks/common-hooks';
-import { useNextFetchKnowledgeList } from '@/hooks/knowledge-hooks';
+import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
 import { IModalProps } from '@/interfaces/common';
 import { filterOptionsByInput } from '@/utils/common-util';
 import { Form, Modal, Select } from 'antd';
@@ -13,7 +13,7 @@ const ConnectToKnowledgeModal = ({
   loading,
 }: IModalProps<string[]> & { initialValue: string[] }) => {
   const [form] = Form.useForm();
-  const { list } = useNextFetchKnowledgeList();
+  const { list } = useFetchKnowledgeList();
   const { t } = useTranslate('fileManager');
 
   const options = list?.map((item) => ({

web/src/pages/flow/canvas/node/retrieval-node.tsx

@@ -1,4 +1,4 @@
-import { useNextFetchKnowledgeList } from '@/hooks/knowledge-hooks';
+import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
 import { UserOutlined } from '@ant-design/icons';
 import { Avatar, Flex } from 'antd';
 import classNames from 'classnames';
@@ -17,7 +17,7 @@ export function RetrievalNode({
   selected,
 }: NodeProps<NodeData>) {
   const knowledgeBaseIds: string[] = get(data, 'form.kb_ids', []);
-  const { list: knowledgeList } = useNextFetchKnowledgeList(true);
+  const { list: knowledgeList } = useFetchKnowledgeList(true);
   const knowledgeBases = useMemo(() => {
     return knowledgeBaseIds.map((x) => {
       const item = knowledgeList.find((y) => x === y.id);

web/src/pages/home/datasets.tsx

@@ -1,82 +1,78 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
-import { ChevronRight, MoreHorizontal } from 'lucide-react';
-
-const datasets = [
-  {
-    id: 1,
-    title: 'Legal knowledge base',
-    files: '1,242 files',
-    size: '152 MB',
-    created: '12.02.2024',
-    image: 'https://github.com/shadcn.png',
-  },
-  {
-    id: 2,
-    title: 'HR knowledge base',
-    files: '1,242 files',
-    size: '152 MB',
-    created: '12.02.2024',
-    image: 'https://github.com/shadcn.png',
-  },
-  {
-    id: 3,
-    title: 'IT knowledge base',
-    files: '1,242 files',
-    size: '152 MB',
-    created: '12.02.2024',
-    image: 'https://github.com/shadcn.png',
-  },
-  {
-    id: 4,
-    title: 'Legal knowledge base',
-    files: '1,242 files',
-    size: '152 MB',
-    created: '12.02.2024',
-    image: 'https://github.com/shadcn.png',
-  },
-];
+import { CardSkeleton } from '@/components/ui/skeleton';
+import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
+import { formatDate } from '@/utils/date';
+import { ChevronRight, Trash2 } from 'lucide-react';
 
 export function Datasets() {
+  const { navigateToDatasetList, navigateToDataset } = useNavigatePage();
+  const { list, loading } = useFetchKnowledgeList();
+
   return (
     <section>
       <h2 className="text-2xl font-bold mb-6">Datasets</h2>
       <div className="flex gap-6">
-        {datasets.map((dataset) => (
-          <Card
-            key={dataset.id}
-            className="bg-colors-background-inverse-weak flex-1 border-colors-outline-neutral-standard"
-          >
-            <CardContent className="p-4">
-              <div className="flex justify-between mb-4">
-                <div
-                  className="w-[70px] h-[70px] rounded-xl bg-cover"
-                  style={{ backgroundImage: `url(${dataset.image})` }}
-                />
-                <Button variant="ghost" size="icon">
-                  <MoreHorizontal className="h-6 w-6" />
-                </Button>
-              </div>
-              <div className="flex justify-between items-end">
-                <div>
-                  <h3 className="text-lg font-semibold mb-2">
-                    {dataset.title}
-                  </h3>
-                  <p className="text-sm opacity-80">
-                    {dataset.files} | {dataset.size}
-                  </p>
-                  <p className="text-sm opacity-80">
-                    Created {dataset.created}
-                  </p>
-                </div>
-                <Button variant="icon" size="icon">
-                  <ChevronRight className="h-6 w-6" />
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
-        ))}
-        <Button className="h-auto " variant={'tertiary'}>
+        {loading ? (
+          <div className="flex-1">
+            <CardSkeleton />
+          </div>
+        ) : (
+          <div className="flex gap-4 flex-1">
+            {list.slice(0, 3).map((dataset) => (
+              <Card
+                key={dataset.id}
+                className="bg-colors-background-inverse-weak flex-1 border-colors-outline-neutral-standard"
+              >
+                <CardContent className="p-4">
+                  <div className="flex justify-between mb-4">
+                    {dataset.avatar ? (
+                      <div
+                        className="w-[70px] h-[70px] rounded-xl bg-cover"
+                        style={{ backgroundImage: `url(${dataset.avatar})` }}
+                      />
+                    ) : (
+                      <Avatar>
+                        <AvatarImage src="https://github.com/shadcn.png" />
+                        <AvatarFallback>CN</AvatarFallback>
+                      </Avatar>
+                    )}
+                    <Button variant="ghost" size="icon">
+                      <Trash2 />
+                    </Button>
+                  </div>
+                  <div className="flex justify-between items-end">
+                    <div>
+                      <h3 className="text-lg font-semibold mb-2">
+                        {dataset.name}
+                      </h3>
+                      <div className="text-sm opacity-80">
+                        {dataset.doc_num} files
+                      </div>
+                      <p className="text-sm opacity-80">
+                        Created {formatDate(dataset.update_time)}
+                      </p>
+                    </div>
+                    <Button
+                      variant="icon"
+                      size="icon"
+                      onClick={navigateToDataset}
+                    >
+                      <ChevronRight className="h-6 w-6" />
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+        <Button
+          className="h-auto "
+          variant={'tertiary'}
+          onClick={navigateToDatasetList}
+        >
           See all
         </Button>
       </div>

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

@@ -0,0 +1,3 @@
+export default function Chat() {
+  return <div>chat</div>;
+}

web/src/pages/next-search/index.tsx

@@ -0,0 +1,3 @@
+export default function Search() {
+  return <div>Search</div>;
+}

web/src/pages/search/index.tsx

@@ -6,7 +6,7 @@ import { useClickDrawer } from '@/components/pdf-drawer/hooks';
 import RetrievalDocuments from '@/components/retrieval-documents';
 import SvgIcon from '@/components/svg-icon';
 import {
-  useNextFetchKnowledgeList,
+  useFetchKnowledgeList,
   useSelectTestingResult,
 } from '@/hooks/knowledge-hooks';
 import { useGetPaginationWithRouter } from '@/hooks/logic-hooks';
@@ -45,7 +45,7 @@ const SearchPage = () => {
   const { t } = useTranslation();
   const [checkedList, setCheckedList] = useState<string[]>([]);
   const { chunks, total } = useSelectTestingResult();
-  const { list: knowledgeList } = useNextFetchKnowledgeList();
+  const { list: knowledgeList } = useFetchKnowledgeList();
   const checkedWithoutEmbeddingIdList = useMemo(() => {
     return checkedList.filter((x) => knowledgeList.some((y) => y.id === x));
   }, [checkedList, knowledgeList]);

web/src/pages/search/sidebar.tsx

@@ -1,4 +1,4 @@
-import { useNextFetchKnowledgeList } from '@/hooks/knowledge-hooks';
+import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
 import { UserOutlined } from '@ant-design/icons';
 import type { TreeDataNode, TreeProps } from 'antd';
 import { Avatar, Layout, Space, Spin, Tree, Typography } from 'antd';
@@ -27,7 +27,7 @@ const SearchSidebar = ({
   checkedList,
   setCheckedList,
 }: IProps) => {
-  const { list, loading } = useNextFetchKnowledgeList();
+  const { list, loading } = useFetchKnowledgeList();
 
   const groupedList = useMemo(() => {
     return list.reduce((pre: TreeDataNode[], cur) => {

web/src/routes.ts

@@ -1,3 +1,14 @@
+export enum Routes {
+  Login = '/login',
+  Home = '/home',
+  Datasets = '/datasets',
+  DatasetBase = '/dataset',
+  Dataset = `${Routes.DatasetBase}${Routes.DatasetBase}`,
+  Agent = '/agent',
+  Search = '/next-search',
+  Chat = '/next-chat',
+}
+
 const routes = [
   {
     path: '/login',
@@ -127,48 +138,81 @@ const routes = [
     layout: false,
   },
   {
-    path: '/home',
+    path: Routes.Home,
+    layout: false,
+    component: '@/layouts/next',
+    routes: [
+      {
+        path: Routes.Home,
+        component: `@/pages${Routes.Home}`,
+      },
+    ],
+  },
+  {
+    path: Routes.Datasets,
+    layout: false,
+    component: '@/layouts/next',
+    routes: [
+      {
+        path: Routes.Datasets,
+        component: `@/pages${Routes.Datasets}`,
+      },
+    ],
+  },
+  {
+    path: Routes.Chat,
+    layout: false,
+    component: '@/layouts/next',
+    routes: [
+      {
+        path: Routes.Chat,
+        component: `@/pages${Routes.Chat}`,
+      },
+    ],
+  },
+  {
+    path: Routes.Search,
     layout: false,
     component: '@/layouts/next',
     routes: [
       {
-        path: '/home',
-        component: '@/pages/home',
+        path: Routes.Search,
+        component: `@/pages${Routes.Search}`,
       },
     ],
   },
   {
-    path: '/datasets',
+    path: Routes.Agent,
     layout: false,
     component: '@/layouts/next',
     routes: [
       {
-        path: '/datasets',
-        component: '@/pages/datasets',
+        path: Routes.Agent,
+        component: `@/pages${Routes.Agent}`,
       },
     ],
   },
   {
-    path: '/dataset',
+    path: Routes.DatasetBase,
     layout: false,
     component: '@/layouts/next',
     routes: [
-      { path: '/dataset', redirect: '/dataset/dataset' },
+      { path: Routes.DatasetBase, redirect: Routes.Dataset },
       {
-        path: '/dataset',
-        component: '@/pages/dataset',
+        path: Routes.DatasetBase,
+        component: `@/pages${Routes.DatasetBase}`,
         routes: [
           {
-            path: '/dataset/dataset',
-            component: '@/pages/dataset/dataset',
+            path: Routes.Dataset,
+            component: `@/pages${Routes.Dataset}`,
           },
           {
-            path: '/dataset/configuration',
-            component: '@/pages/dataset/settings',
+            path: `${Routes.DatasetBase}/configuration`,
+            component: `@/pages${Routes.DatasetBase}/settings`,
           },
           {
-            path: '/dataset/testing',
-            component: '@/pages/dataset/testing',
+            path: `${Routes.DatasetBase}/testing`,
+            component: `@/pages${Routes.DatasetBase}/testing`,
           },
         ],
       },