feat: add Breadcrumbs

datacenter/app/datastores/documents/chunklist/page.tsx

@@ -1,13 +1,21 @@
 'use client'
 
-import { useSearchParams } from 'next/navigation'
+import { useSearchParams, useRouter } from 'next/navigation'
 import React, { useState, useEffect } from 'react'
-import { useColorScheme, Table, Stack } from '@/lib/mui'
+import {
+  useColorScheme,
+  Table,
+  Stack,
+  Typography,
+  Breadcrumbs,
+  Link
+} from '@/lib/mui'
 import { Popover, Pagination } from 'antd'
 import { fetchBaseURL } from '@/app/datastores/constants'
 const page_size = 20
 
 const ChunkList = () => {
+  const router = useRouter()
   const { mode } = useColorScheme()
   const spaceName = useSearchParams().get('spacename')
   const documentId = useSearchParams().get('documentid')
@@ -40,6 +48,39 @@ const ChunkList = () => {
     fetchChunks()
   }, [])
   return (
+    <div className="p-4">
+      <Stack
+        direction="row"
+        justifyContent="flex-start"
+        alignItems="center"
+        sx={{ marginBottom: '20px' }}
+      >
+        <Breadcrumbs aria-label="breadcrumbs">
+          <Link
+            onClick={() => {
+              router.push('/datastores')
+            }}
+            key="Knowledge Space"
+            underline="hover"
+            color="neutral"
+            fontSize="inherit"
+          >
+            Knowledge Space
+          </Link>
+          <Link
+            onClick={() => {
+              router.push(`/datastores/documents?name=${spaceName}`)
+            }}
+            key="Knowledge Space"
+            underline="hover"
+            color="neutral"
+            fontSize="inherit"
+          >
+            Documents
+          </Link>
+          <Typography fontSize="inherit">Chunks</Typography>
+        </Breadcrumbs>
+      </Stack>
       <div className="p-4">
         {chunkList.length ? (
           <>
@@ -80,7 +121,11 @@ const ChunkList = () => {
                     <td>
                       {
                         <Popover
-                        content={JSON.stringify(row.meta_info || '{}', null, 2)}
+                          content={JSON.stringify(
+                            row.meta_info || '{}',
+                            null,
+                            2
+                          )}
                           trigger="hover"
                         >
                           {row.meta_info.length > 10
@@ -135,6 +180,7 @@ const ChunkList = () => {
           <></>
         )}
       </div>
+    </div>
   )
 }
 

datacenter/app/datastores/documents/page.tsx

@@ -15,6 +15,8 @@ import {
   Chip,
   Switch,
   Typography,
+  Breadcrumbs,
+  Link,
   styled
 } from '@/lib/mui'
 import moment from 'moment'
@@ -115,20 +117,33 @@ const Documents = () => {
   }, [])
   return (
     <div className="p-4">
-      <Sheet
-        sx={{
-          display: 'flex',
-          flexDirection: 'row-reverse'
-        }}
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+        sx={{ marginBottom: '20px' }}
       >
+        <Breadcrumbs aria-label="breadcrumbs">
+          <Link
+            onClick={() => {
+              router.push('/datastores')
+            }}
+            key="Knowledge Space"
+            underline="hover"
+            color="neutral"
+            fontSize="inherit"
+          >
+            Knowledge Space
+          </Link>
+          <Typography fontSize="inherit">Documents</Typography>
+        </Breadcrumbs>
         <Button
           variant="outlined"
           onClick={() => setIsAddDocumentModalShow(true)}
-          sx={{ marginBottom: '20px' }}
         >
           + Add Datasource
         </Button>
-      </Sheet>
+      </Stack>
       {documents.length ? (
         <>
           <Table
@@ -442,6 +457,17 @@ const Documents = () => {
                   Synch:
                 </Typography>
               </Box>
+              <Stack
+                direction="row"
+                justifyContent="flex-start"
+                alignItems="center"
+                sx={{ marginBottom: '20px' }}
+              >
+                <Button
+                  variant="outlined"
+                  sx={{ marginRight: '20px' }}
+                  onClick={() => setActiveStep(0)}
+                >{'< Back'}</Button>
                 <Button
                   variant="outlined"
                   onClick={async () => {
@@ -469,7 +495,8 @@ const Documents = () => {
                         }
                       )
                       const data = await res.json()
-                    data.success && fetch(
+                      data.success &&
+                        fetch(
                           `${fetchBaseURL}/knowledge/${spaceName}/document/sync`,
                           {
                             method: 'POST',
@@ -523,7 +550,8 @@ const Documents = () => {
                         }
                       )
                       const data = await res.json()
-                    data.success && fetch(
+                      data.success &&
+                        fetch(
                           `${fetchBaseURL}/knowledge/${spaceName}/document/sync`,
                           {
                             method: 'POST',
@@ -581,7 +609,8 @@ const Documents = () => {
                         }
                       )
                       const data = await res.json()
-                    data.success && fetch(
+                      data.success &&
+                        fetch(
                           `${fetchBaseURL}/knowledge/${spaceName}/document/sync`,
                           {
                             method: 'POST',
@@ -623,6 +652,7 @@ const Documents = () => {
                 >
                   Finish
                 </Button>
+              </Stack>
             </>
           )}
         </Sheet>

datacenter/app/datastores/page.tsx

@@ -144,7 +144,7 @@ const Index = () => {
               },
               '& tbody tr a': {
                 color: 'rgb(13, 96, 217)'
-              },
+              }
             }}
           >
             <thead>
@@ -387,6 +387,17 @@ const Index = () => {
                   Synch:
                 </Typography>
               </Box>
+              <Stack
+                direction="row"
+                justifyContent="flex-start"
+                alignItems="center"
+                sx={{ marginBottom: '20px' }}
+              >
+                <Button
+                  variant="outlined"
+                  sx={{ marginRight: '20px' }}
+                  onClick={() => setActiveStep(1)}
+                >{'< Back'}</Button>
                 <Button
                   variant="outlined"
                   onClick={async () => {
@@ -511,6 +522,7 @@ const Index = () => {
                 >
                   Finish
                 </Button>
+              </Stack>
             </>
           )}
         </Sheet>