From 37409d7b2913fe0aa3eed2ae5b6b7f2b0499b1f1 Mon Sep 17 00:00:00 2001
From: "shiweisong.ssw" <shiweisong.ssw@digital-engine.com>
Date: Fri, 30 Jun 2023 11:27:28 +0800
Subject: [PATCH 01/10] feat: change the url

---
 datacenter/app/datastores/constants.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/datacenter/app/datastores/constants.tsx b/datacenter/app/datastores/constants.tsx
index c5d7f8260..ffacee373 100644
--- a/datacenter/app/datastores/constants.tsx
+++ b/datacenter/app/datastores/constants.tsx
@@ -1 +1 @@
-export const fetchBaseURL = 'http://30.183.154.125:5000';
+export const fetchBaseURL = 'http://30.183.154.76:5000';

From 492e5559b4596c1f1dee3db87867795110ae6e72 Mon Sep 17 00:00:00 2001
From: "shiweisong.ssw" <shiweisong.ssw@digital-engine.com>
Date: Fri, 30 Jun 2023 14:04:54 +0800
Subject: [PATCH 02/10] feat: change the style

---
 .../datastores/documents/chunklist/page.tsx   |  4 +-
 datacenter/app/datastores/documents/page.tsx  | 23 ++++---
 datacenter/app/datastores/page.tsx            | 62 ++++++++++---------
 datacenter/app/globals.css                    | 22 -------
 4 files changed, 49 insertions(+), 62 deletions(-)

diff --git a/datacenter/app/datastores/documents/chunklist/page.tsx b/datacenter/app/datastores/documents/chunklist/page.tsx
index 0a3db6383..c0a0b3538 100644
--- a/datacenter/app/datastores/documents/chunklist/page.tsx
+++ b/datacenter/app/datastores/documents/chunklist/page.tsx
@@ -44,8 +44,8 @@ const ChunkList = () => {
       {chunkList.length ? (
         <>
           <Table
-            color="info"
-            variant="soft"
+            color="primary"
+            variant="plain"
             size="lg"
             sx={{
               '& tbody tr: hover': {
diff --git a/datacenter/app/datastores/documents/page.tsx b/datacenter/app/datastores/documents/page.tsx
index 8e14b5d2c..82cd96838 100644
--- a/datacenter/app/datastores/documents/page.tsx
+++ b/datacenter/app/datastores/documents/page.tsx
@@ -33,8 +33,8 @@ const Item = styled(Sheet)(({ theme }) => ({
   color: theme.vars.palette.text.secondary
 }))
 const stepsOfAddingDocument = [
-  'Choose a Datasource type',
-  'Setup the Datasource'
+  '1.Choose a Datasource type',
+  '2.Setup the Datasource'
 ]
 const documentTypeList = [
   {
@@ -121,6 +121,7 @@ const Documents = () => {
         <Button
           variant="outlined"
           onClick={() => setIsAddDocumentModalShow(true)}
+          sx={{ marginBottom: '20px' }}
         >
           + Add Datasource
         </Button>
@@ -128,8 +129,8 @@ const Documents = () => {
       {documents.length ? (
         <>
           <Table
-            color="info"
-            variant="soft"
+            color="primary"
+            variant="plain"
             size="lg"
             sx={{
               '& tbody tr: hover': {
@@ -157,9 +158,9 @@ const Documents = () => {
                   <td>{row.doc_name}</td>
                   <td>
                     <Chip
-                      variant="soft"
+                      variant="solid"
                       color="neutral"
-                      sx={{ fontWeight: 300 }}
+                      sx={{ opacity: .5 }}
                     >
                       {row.doc_type}
                     </Chip>
@@ -168,8 +169,8 @@ const Documents = () => {
                   <td>{moment(row.last_sync).format('YYYY-MM-DD HH:MM:SS')}</td>
                   <td>
                     <Chip
-                      sx={{ fontWeight: 300 }}
-                      variant="soft"
+                      sx={{ opacity: .5 }}
+                      variant="solid"
                       color={(function () {
                         switch (row.status) {
                           case 'TODO':
@@ -192,6 +193,9 @@ const Documents = () => {
                         <Button
                           variant="outlined"
                           size="sm"
+                          sx={{
+                            marginRight: '20px'
+                          }}
                           onClick={async () => {
                             const res = await fetch(
                               `${fetchBaseURL}/knowledge/${spaceName}/document/sync`,
@@ -297,7 +301,7 @@ const Documents = () => {
               {stepsOfAddingDocument.map((item: any, index: number) => (
                 <Item
                   key={item}
-                  sx={{ fontWeight: activeStep === index ? 'bold' : '' }}
+                  sx={{ fontWeight: activeStep === index ? 'bold' : '', color: activeStep === index ? '#814DDE' : '' }}
                 >
                   {item}
                 </Item>
@@ -389,6 +393,7 @@ const Documents = () => {
                 )}
               </Box>
               <Button
+                variant='outlined'
                 onClick={async () => {
                   if (documentName === '') {
                     message.error('Please input the name')
diff --git a/datacenter/app/datastores/page.tsx b/datacenter/app/datastores/page.tsx
index e66c39a1f..bdefb3af1 100644
--- a/datacenter/app/datastores/page.tsx
+++ b/datacenter/app/datastores/page.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation'
 import React, { useState, useEffect } from 'react'
 import { InboxOutlined } from '@ant-design/icons'
 import type { UploadProps } from 'antd'
-import { message, Upload } from 'antd'
+import { message, Upload, Popover } from 'antd'
 import {
   useColorScheme,
   Modal,
@@ -34,9 +34,9 @@ const Item = styled(Sheet)(({ theme }) => ({
 }))
 
 const stepsOfAddingSpace = [
-  'Knowledge Space Configuration',
-  'Choose a Datasource type',
-  'Setup the Datasource'
+  '1.Knowledge Space Config',
+  '2.Choose a Datasource type',
+  '3.Setup the Datasource'
 ]
 const documentTypeList = [
   {
@@ -128,8 +128,8 @@ const Index = () => {
       <div className="page-body p-4">
         {knowledgeSpaceList.length ? (
           <Table
-            color="info"
-            variant="soft"
+            color="primary"
+            variant="plain"
             size="lg"
             sx={{
               '& tbody tr: hover': {
@@ -146,6 +146,7 @@ const Index = () => {
                 <th>Name</th>
                 <th>Vector</th>
                 <th>Owner</th>
+                <th>Description</th>
               </tr>
             </thead>
             <tbody>
@@ -165,23 +166,22 @@ const Index = () => {
                     }
                   </td>
                   <td>
-                    <Chip
-                      variant="soft"
-                      color="neutral"
-                      sx={{ fontWeight: 300 }}
-                    >
+                    <Chip variant="solid" color="neutral" sx={{ opacity: 0.5 }}>
                       {row.vector_type}
                     </Chip>
                   </td>
                   <td>
-                    <Chip
-                      variant="soft"
-                      color="neutral"
-                      sx={{ fontWeight: 300 }}
-                    >
+                    <Chip variant="solid" color="neutral" sx={{ opacity: 0.5 }}>
                       {row.owner}
                     </Chip>
                   </td>
+                  <td>
+                    <Popover content={row.desc} trigger="hover">
+                      {row.desc.length > 10
+                        ? `${row.desc.slice(0, 10)}...`
+                        : row.desc}
+                    </Popover>
+                  </td>
                 </tr>
               ))}
             </tbody>
@@ -214,7 +214,7 @@ const Index = () => {
               {stepsOfAddingSpace.map((item: any, index: number) => (
                 <Item
                   key={item}
-                  sx={{ fontWeight: activeStep === index ? 'bold' : '' }}
+                  sx={{ fontWeight: activeStep === index ? 'bold' : '', color: activeStep === index ? '#814DDE' : '' }}
                 >
                   {item}
                 </Item>
@@ -237,18 +237,21 @@ const Index = () => {
                     message.error('please input the name')
                     return
                   }
-                  const res = await fetch(`${fetchBaseURL}/knowledge/space/add`, {
-                    method: 'POST',
-                    headers: {
-                      'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                      name: knowledgeSpaceName,
-                      vector_type: 'Chroma',
-                      owner: 'keting',
-                      desc: 'test1'
-                    })
-                  })
+                  const res = await fetch(
+                    `${fetchBaseURL}/knowledge/space/add`,
+                    {
+                      method: 'POST',
+                      headers: {
+                        'Content-Type': 'application/json'
+                      },
+                      body: JSON.stringify({
+                        name: knowledgeSpaceName,
+                        vector_type: 'Chroma',
+                        owner: 'keting',
+                        desc: 'test1'
+                      })
+                    }
+                  )
                   const data = await res.json()
                   if (data.success) {
                     message.success('success')
@@ -360,6 +363,7 @@ const Index = () => {
                 )}
               </Box>
               <Button
+                variant='outlined'
                 onClick={async () => {
                   if (documentName === '') {
                     message.error('Please input the name')
diff --git a/datacenter/app/globals.css b/datacenter/app/globals.css
index 153cf633c..93095ccd9 100644
--- a/datacenter/app/globals.css
+++ b/datacenter/app/globals.css
@@ -12,28 +12,6 @@ body {
   background-color: var(--joy-palette-background-body);
 }
 
-table {
-  border-collapse: collapse;
-  width: 100%;
-}
-
-th, td {
-  border: 1px solid #ddd;
-  text-align: left;
-  padding: 8px;
-}
-
-th {
-  background-color: #f2f2f2;
-}
-
-tr:nth-child(even) {
-  background-color: #f2f2f2;
-}
-tr:hover {
-  background-color: #ddd;
-}
-
 body .ant-btn-primary {
   background-color: #1677ff;
 }

From 80e93ac6ec79e02cdbe68e3e1e0588acac6220a9 Mon Sep 17 00:00:00 2001
From: "shiweisong.ssw" <shiweisong.ssw@digital-engine.com>
Date: Fri, 30 Jun 2023 14:45:09 +0800
Subject: [PATCH 03/10] feat: add result column to document list

---
 datacenter/app/datastores/documents/page.tsx | 49 ++++++++++++++++----
 1 file changed, 40 insertions(+), 9 deletions(-)

diff --git a/datacenter/app/datastores/documents/page.tsx b/datacenter/app/datastores/documents/page.tsx
index 82cd96838..02f2126d6 100644
--- a/datacenter/app/datastores/documents/page.tsx
+++ b/datacenter/app/datastores/documents/page.tsx
@@ -18,7 +18,7 @@ import {
 import moment from 'moment'
 import { InboxOutlined } from '@ant-design/icons'
 import type { UploadProps } from 'antd'
-import { Upload, Pagination, message } from 'antd'
+import { Upload, Pagination, Popover, message } from 'antd'
 import { fetchBaseURL } from '@/app/datastores/constants'
 
 const { Dragger } = Upload
@@ -149,6 +149,7 @@ const Documents = () => {
                 <th>Size</th>
                 <th>Last Synch</th>
                 <th>Status</th>
+                <th>Result</th>
                 <th>Operation</th>
               </tr>
             </thead>
@@ -157,11 +158,7 @@ const Documents = () => {
                 <tr key={row.id}>
                   <td>{row.doc_name}</td>
                   <td>
-                    <Chip
-                      variant="solid"
-                      color="neutral"
-                      sx={{ opacity: .5 }}
-                    >
+                    <Chip variant="solid" color="neutral" sx={{ opacity: 0.5 }}>
                       {row.doc_type}
                     </Chip>
                   </td>
@@ -169,7 +166,7 @@ const Documents = () => {
                   <td>{moment(row.last_sync).format('YYYY-MM-DD HH:MM:SS')}</td>
                   <td>
                     <Chip
-                      sx={{ opacity: .5 }}
+                      sx={{ opacity: 0.5 }}
                       variant="solid"
                       color={(function () {
                         switch (row.status) {
@@ -187,6 +184,37 @@ const Documents = () => {
                       {row.status}
                     </Chip>
                   </td>
+                  <td>
+                    {(function () {
+                      if (row.status === 'TODO' || row.status === 'RUNNING') {
+                        return ''
+                      } else if (row.status === 'FINISHED') {
+                        return (
+                          <Popover content={row.result} trigger="hover">
+                            <Chip
+                              variant="solid"
+                              color="success"
+                              sx={{ opacity: 0.5 }}
+                            >
+                              SUCCESS
+                            </Chip>
+                          </Popover>
+                        )
+                      } else {
+                        return (
+                          <Popover content={row.result} trigger="hover">
+                            <Chip
+                              variant="solid"
+                              color="danger"
+                              sx={{ opacity: 0.5 }}
+                            >
+                              FAILED
+                            </Chip>
+                          </Popover>
+                        )
+                      }
+                    })()}
+                  </td>
                   <td>
                     {
                       <>
@@ -301,7 +329,10 @@ const Documents = () => {
               {stepsOfAddingDocument.map((item: any, index: number) => (
                 <Item
                   key={item}
-                  sx={{ fontWeight: activeStep === index ? 'bold' : '', color: activeStep === index ? '#814DDE' : '' }}
+                  sx={{
+                    fontWeight: activeStep === index ? 'bold' : '',
+                    color: activeStep === index ? '#814DDE' : ''
+                  }}
                 >
                   {item}
                 </Item>
@@ -393,7 +424,7 @@ const Documents = () => {
                 )}
               </Box>
               <Button
-                variant='outlined'
+                variant="outlined"
                 onClick={async () => {
                   if (documentName === '') {
                     message.error('Please input the name')

From 9071207f33c91e312d48b034402ce9d4fa2a29bf Mon Sep 17 00:00:00 2001
From: "shiweisong.ssw" <shiweisong.ssw@digital-engine.com>
Date: Fri, 30 Jun 2023 15:19:36 +0800
Subject: [PATCH 04/10] feat: auto sync after created

---
 datacenter/app/datastores/documents/page.tsx | 55 +++++++++++++++++
 datacenter/app/datastores/page.tsx           | 62 +++++++++++++++++++-
 2 files changed, 115 insertions(+), 2 deletions(-)

diff --git a/datacenter/app/datastores/documents/page.tsx b/datacenter/app/datastores/documents/page.tsx
index 02f2126d6..4936a2556 100644
--- a/datacenter/app/datastores/documents/page.tsx
+++ b/datacenter/app/datastores/documents/page.tsx
@@ -13,6 +13,8 @@ import {
   Input,
   Textarea,
   Chip,
+  Switch,
+  Typography,
   styled
 } from '@/lib/mui'
 import moment from 'moment'
@@ -72,6 +74,7 @@ const Documents = () => {
   const [originFileObj, setOriginFileObj] = useState<any>(null)
   const [total, setTotal] = useState<number>(0)
   const [current, setCurrent] = useState<number>(0)
+  const [synchChecked, setSynchChecked] = useState<boolean>(true)
   const props: UploadProps = {
     name: 'file',
     multiple: false,
@@ -422,6 +425,22 @@ const Documents = () => {
                     />
                   </>
                 )}
+                <Typography
+                  component="label"
+                  sx={{
+                    marginTop: '20px'
+                  }}
+                  endDecorator={
+                    <Switch
+                      checked={synchChecked}
+                      onChange={(event: any) =>
+                        setSynchChecked(event.target.checked)
+                      }
+                    />
+                  }
+                >
+                  Synch:
+                </Typography>
               </Box>
               <Button
                 variant="outlined"
@@ -450,6 +469,18 @@ const Documents = () => {
                       }
                     )
                     const data = await res.json()
+                    data.success && fetch(
+                      `${fetchBaseURL}/knowledge/${spaceName}/document/sync`,
+                      {
+                        method: 'POST',
+                        headers: {
+                          'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                          doc_ids: [data.data]
+                        })
+                      }
+                    )
                     if (data.success) {
                       message.success('success')
                       setIsAddDocumentModalShow(false)
@@ -492,6 +523,18 @@ const Documents = () => {
                       }
                     )
                     const data = await res.json()
+                    data.success && fetch(
+                      `${fetchBaseURL}/knowledge/${spaceName}/document/sync`,
+                      {
+                        method: 'POST',
+                        headers: {
+                          'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                          doc_ids: [data.data]
+                        })
+                      }
+                    )
                     if (data.success) {
                       message.success('success')
                       setIsAddDocumentModalShow(false)
@@ -538,6 +581,18 @@ const Documents = () => {
                       }
                     )
                     const data = await res.json()
+                    data.success && fetch(
+                      `${fetchBaseURL}/knowledge/${spaceName}/document/sync`,
+                      {
+                        method: 'POST',
+                        headers: {
+                          'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                          doc_ids: [data.data]
+                        })
+                      }
+                    )
                     if (data.success) {
                       message.success('success')
                       setIsAddDocumentModalShow(false)
diff --git a/datacenter/app/datastores/page.tsx b/datacenter/app/datastores/page.tsx
index bdefb3af1..8c29e375f 100644
--- a/datacenter/app/datastores/page.tsx
+++ b/datacenter/app/datastores/page.tsx
@@ -16,6 +16,8 @@ import {
   Input,
   Textarea,
   Chip,
+  Switch,
+  Typography,
   styled
 } from '@/lib/mui'
 import { fetchBaseURL } from '@/app/datastores/constants'
@@ -71,6 +73,7 @@ const Index = () => {
   const [textSource, setTextSource] = useState<string>('')
   const [text, setText] = useState<string>('')
   const [originFileObj, setOriginFileObj] = useState<any>(null)
+  const [synchChecked, setSynchChecked] = useState<boolean>(true)
   const props: UploadProps = {
     name: 'file',
     multiple: false,
@@ -214,7 +217,10 @@ const Index = () => {
               {stepsOfAddingSpace.map((item: any, index: number) => (
                 <Item
                   key={item}
-                  sx={{ fontWeight: activeStep === index ? 'bold' : '', color: activeStep === index ? '#814DDE' : '' }}
+                  sx={{
+                    fontWeight: activeStep === index ? 'bold' : '',
+                    color: activeStep === index ? '#814DDE' : ''
+                  }}
                 >
                   {item}
                 </Item>
@@ -361,9 +367,25 @@ const Index = () => {
                     />
                   </>
                 )}
+                <Typography
+                  component="label"
+                  sx={{
+                    marginTop: '20px'
+                  }}
+                  endDecorator={
+                    <Switch
+                      checked={synchChecked}
+                      onChange={(event: any) =>
+                        setSynchChecked(event.target.checked)
+                      }
+                    />
+                  }
+                >
+                  Synch:
+                </Typography>
               </Box>
               <Button
-                variant='outlined'
+                variant="outlined"
                 onClick={async () => {
                   if (documentName === '') {
                     message.error('Please input the name')
@@ -392,6 +414,18 @@ const Index = () => {
                     if (data.success) {
                       message.success('success')
                       setIsAddKnowledgeSpaceModalShow(false)
+                      fetch(
+                        `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/sync`,
+                        {
+                          method: 'POST',
+                          headers: {
+                            'Content-Type': 'application/json'
+                          },
+                          body: JSON.stringify({
+                            doc_ids: [data.data]
+                          })
+                        }
+                      )
                     } else {
                       message.error(data.err_msg || 'failed')
                     }
@@ -415,6 +449,18 @@ const Index = () => {
                     if (data.success) {
                       message.success('success')
                       setIsAddKnowledgeSpaceModalShow(false)
+                      fetch(
+                        `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/sync`,
+                        {
+                          method: 'POST',
+                          headers: {
+                            'Content-Type': 'application/json'
+                          },
+                          body: JSON.stringify({
+                            doc_ids: [data.data]
+                          })
+                        }
+                      )
                     } else {
                       message.error(data.err_msg || 'failed')
                     }
@@ -442,6 +488,18 @@ const Index = () => {
                     if (data.success) {
                       message.success('success')
                       setIsAddKnowledgeSpaceModalShow(false)
+                      fetch(
+                        `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/sync`,
+                        {
+                          method: 'POST',
+                          headers: {
+                            'Content-Type': 'application/json'
+                          },
+                          body: JSON.stringify({
+                            doc_ids: [data.data]
+                          })
+                        }
+                      )
                     } else {
                       message.error(data.err_msg || 'failed')
                     }

From fbbbb5f0378f8b27f14b79ba6a6cb4f3f519b395 Mon Sep 17 00:00:00 2001
From: "shiweisong.ssw" <shiweisong.ssw@digital-engine.com>
Date: Fri, 30 Jun 2023 15:23:09 +0800
Subject: [PATCH 05/10] feat: change the text color if table

---
 datacenter/app/datastores/page.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/datacenter/app/datastores/page.tsx b/datacenter/app/datastores/page.tsx
index 8c29e375f..c1db62ecf 100644
--- a/datacenter/app/datastores/page.tsx
+++ b/datacenter/app/datastores/page.tsx
@@ -141,7 +141,10 @@ const Index = () => {
               },
               '& tbody tr: hover a': {
                 textDecoration: 'underline'
-              }
+              },
+              '& tbody tr a': {
+                color: 'rgb(13, 96, 217)'
+              },
             }}
           >
             <thead>

From 77e9e801027533599c86c192fb6c92665fb94ee7 Mon Sep 17 00:00:00 2001
From: "shiweisong.ssw" <shiweisong.ssw@digital-engine.com>
Date: Fri, 30 Jun 2023 16:15:29 +0800
Subject: [PATCH 06/10] feat: add Breadcrumbs

---
 .../datastores/documents/chunklist/page.tsx   | 224 ++++++----
 datacenter/app/datastores/documents/page.tsx  | 404 ++++++++++--------
 datacenter/app/datastores/page.tsx            | 260 +++++------
 3 files changed, 488 insertions(+), 400 deletions(-)

diff --git a/datacenter/app/datastores/documents/chunklist/page.tsx b/datacenter/app/datastores/documents/chunklist/page.tsx
index c0a0b3538..804ef0cfe 100644
--- a/datacenter/app/datastores/documents/chunklist/page.tsx
+++ b/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')
@@ -41,99 +49,137 @@ const ChunkList = () => {
   }, [])
   return (
     <div className="p-4">
-      {chunkList.length ? (
-        <>
-          <Table
-            color="primary"
-            variant="plain"
-            size="lg"
-            sx={{
-              '& tbody tr: hover': {
-                backgroundColor:
-                  mode === 'light' ? 'rgb(246, 246, 246)' : 'rgb(33, 33, 40)'
-              },
-              '& tbody tr: hover a': {
-                textDecoration: 'underline'
-              }
+      <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"
           >
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Content</th>
-                <th>Meta Data</th>
-              </tr>
-            </thead>
-            <tbody>
-              {chunkList.map((row: any) => (
-                <tr key={row.id}>
-                  <td>{row.doc_name}</td>
-                  <td>
-                    {
-                      <Popover content={row.content} trigger="hover">
-                        {row.content.length > 10
-                          ? `${row.content.slice(0, 10)}...`
-                          : row.content}
-                      </Popover>
-                    }
-                  </td>
-                  <td>
-                    {
-                      <Popover
-                        content={JSON.stringify(row.meta_info || '{}', null, 2)}
-                        trigger="hover"
-                      >
-                        {row.meta_info.length > 10
-                          ? `${row.meta_info.slice(0, 10)}...`
-                          : row.meta_info}
-                      </Popover>
-                    }
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </Table>
-          <Stack
-            direction="row"
-            justifyContent="flex-end"
-            sx={{
-              marginTop: '20px'
+            Knowledge Space
+          </Link>
+          <Link
+            onClick={() => {
+              router.push(`/datastores/documents?name=${spaceName}`)
             }}
+            key="Knowledge Space"
+            underline="hover"
+            color="neutral"
+            fontSize="inherit"
           >
-            <Pagination
-              defaultPageSize={20}
-              showSizeChanger={false}
-              current={current}
-              total={total}
-              onChange={async (page) => {
-                const res = await fetch(
-                  `${fetchBaseURL}/knowledge/${spaceName}/chunk/list`,
-                  {
-                    method: 'POST',
-                    headers: {
-                      'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                      document_id: documentId,
-                      page,
-                      page_size
-                    })
-                  }
-                )
-                const data = await res.json()
-                if (data.success) {
-                  setChunkList(data.data.data)
-                  setTotal(data.data.total)
-                  setCurrent(data.data.page)
+            Documents
+          </Link>
+          <Typography fontSize="inherit">Chunks</Typography>
+        </Breadcrumbs>
+      </Stack>
+      <div className="p-4">
+        {chunkList.length ? (
+          <>
+            <Table
+              color="primary"
+              variant="plain"
+              size="lg"
+              sx={{
+                '& tbody tr: hover': {
+                  backgroundColor:
+                    mode === 'light' ? 'rgb(246, 246, 246)' : 'rgb(33, 33, 40)'
+                },
+                '& tbody tr: hover a': {
+                  textDecoration: 'underline'
                 }
               }}
-              hideOnSinglePage
-            />
-          </Stack>
-        </>
-      ) : (
-        <></>
-      )}
+            >
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Content</th>
+                  <th>Meta Data</th>
+                </tr>
+              </thead>
+              <tbody>
+                {chunkList.map((row: any) => (
+                  <tr key={row.id}>
+                    <td>{row.doc_name}</td>
+                    <td>
+                      {
+                        <Popover content={row.content} trigger="hover">
+                          {row.content.length > 10
+                            ? `${row.content.slice(0, 10)}...`
+                            : row.content}
+                        </Popover>
+                      }
+                    </td>
+                    <td>
+                      {
+                        <Popover
+                          content={JSON.stringify(
+                            row.meta_info || '{}',
+                            null,
+                            2
+                          )}
+                          trigger="hover"
+                        >
+                          {row.meta_info.length > 10
+                            ? `${row.meta_info.slice(0, 10)}...`
+                            : row.meta_info}
+                        </Popover>
+                      }
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </Table>
+            <Stack
+              direction="row"
+              justifyContent="flex-end"
+              sx={{
+                marginTop: '20px'
+              }}
+            >
+              <Pagination
+                defaultPageSize={20}
+                showSizeChanger={false}
+                current={current}
+                total={total}
+                onChange={async (page) => {
+                  const res = await fetch(
+                    `${fetchBaseURL}/knowledge/${spaceName}/chunk/list`,
+                    {
+                      method: 'POST',
+                      headers: {
+                        'Content-Type': 'application/json'
+                      },
+                      body: JSON.stringify({
+                        document_id: documentId,
+                        page,
+                        page_size
+                      })
+                    }
+                  )
+                  const data = await res.json()
+                  if (data.success) {
+                    setChunkList(data.data.data)
+                    setTotal(data.data.total)
+                    setCurrent(data.data.page)
+                  }
+                }}
+                hideOnSinglePage
+              />
+            </Stack>
+          </>
+        ) : (
+          <></>
+        )}
+      </div>
     </div>
   )
 }
diff --git a/datacenter/app/datastores/documents/page.tsx b/datacenter/app/datastores/documents/page.tsx
index 4936a2556..584e80daa 100644
--- a/datacenter/app/datastores/documents/page.tsx
+++ b/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,187 +457,202 @@ const Documents = () => {
                   Synch:
                 </Typography>
               </Box>
-              <Button
-                variant="outlined"
-                onClick={async () => {
-                  if (documentName === '') {
-                    message.error('Please input the name')
-                    return
-                  }
-                  if (documentType === 'webPage') {
-                    if (webPageUrl === '') {
-                      message.error('Please input the Web Page URL')
-                      return
-                    }
-                    const res = await fetch(
-                      `${fetchBaseURL}/knowledge/${spaceName}/document/add`,
-                      {
-                        method: 'POST',
-                        headers: {
-                          'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({
-                          doc_name: documentName,
-                          content: webPageUrl,
-                          doc_type: 'URL'
-                        })
-                      }
-                    )
-                    const data = await res.json()
-                    data.success && fetch(
-                      `${fetchBaseURL}/knowledge/${spaceName}/document/sync`,
-                      {
-                        method: 'POST',
-                        headers: {
-                          'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({
-                          doc_ids: [data.data]
-                        })
-                      }
-                    )
-                    if (data.success) {
-                      message.success('success')
-                      setIsAddDocumentModalShow(false)
-                      const res = await fetch(
-                        `${fetchBaseURL}/knowledge/${spaceName}/document/list`,
-                        {
-                          method: 'POST',
-                          headers: {
-                            'Content-Type': 'application/json'
-                          },
-                          body: JSON.stringify({
-                            page: current,
-                            page_size
-                          })
-                        }
-                      )
-                      const data = await res.json()
-                      if (data.success) {
-                        setDocuments(data.data.data)
-                        setTotal(data.data.total)
-                        setCurrent(data.data.page)
-                      }
-                    } else {
-                      message.error(data.err_msg || 'failed')
-                    }
-                  } else if (documentType === 'file') {
-                    if (!originFileObj) {
-                      message.error('Please select a file')
-                      return
-                    }
-                    const formData = new FormData()
-                    formData.append('doc_name', documentName)
-                    formData.append('doc_file', originFileObj)
-                    formData.append('doc_type', 'DOCUMENT')
-                    const res = await fetch(
-                      `${fetchBaseURL}/knowledge/${spaceName}/document/upload`,
-                      {
-                        method: 'POST',
-                        body: formData
-                      }
-                    )
-                    const data = await res.json()
-                    data.success && fetch(
-                      `${fetchBaseURL}/knowledge/${spaceName}/document/sync`,
-                      {
-                        method: 'POST',
-                        headers: {
-                          'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({
-                          doc_ids: [data.data]
-                        })
-                      }
-                    )
-                    if (data.success) {
-                      message.success('success')
-                      setIsAddDocumentModalShow(false)
-                      const res = await fetch(
-                        `${fetchBaseURL}/knowledge/${spaceName}/document/list`,
-                        {
-                          method: 'POST',
-                          headers: {
-                            'Content-Type': 'application/json'
-                          },
-                          body: JSON.stringify({
-                            page: current,
-                            page_size
-                          })
-                        }
-                      )
-                      const data = await res.json()
-                      if (data.success) {
-                        setDocuments(data.data.data)
-                        setTotal(data.data.total)
-                        setCurrent(data.data.page)
-                      }
-                    } else {
-                      message.error(data.err_msg || 'failed')
-                    }
-                  } else {
-                    if (text === '') {
-                      message.error('Please input the text')
-                      return
-                    }
-                    const res = await fetch(
-                      `${fetchBaseURL}/knowledge/${spaceName}/document/add`,
-                      {
-                        method: 'POST',
-                        headers: {
-                          'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({
-                          doc_name: documentName,
-                          source: textSource,
-                          content: text,
-                          doc_type: 'TEXT'
-                        })
-                      }
-                    )
-                    const data = await res.json()
-                    data.success && fetch(
-                      `${fetchBaseURL}/knowledge/${spaceName}/document/sync`,
-                      {
-                        method: 'POST',
-                        headers: {
-                          'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({
-                          doc_ids: [data.data]
-                        })
-                      }
-                    )
-                    if (data.success) {
-                      message.success('success')
-                      setIsAddDocumentModalShow(false)
-                      const res = await fetch(
-                        `${fetchBaseURL}/knowledge/${spaceName}/document/list`,
-                        {
-                          method: 'POST',
-                          headers: {
-                            'Content-Type': 'application/json'
-                          },
-                          body: JSON.stringify({
-                            page: current,
-                            page_size
-                          })
-                        }
-                      )
-                      const data = await res.json()
-                      if (data.success) {
-                        setDocuments(data.data.data)
-                        setTotal(data.data.total)
-                        setCurrent(data.data.page)
-                      }
-                    } else {
-                      message.error(data.err_msg || 'failed')
-                    }
-                  }
-                }}
+              <Stack
+                direction="row"
+                justifyContent="flex-start"
+                alignItems="center"
+                sx={{ marginBottom: '20px' }}
               >
-                Finish
-              </Button>
+                <Button
+                  variant="outlined"
+                  sx={{ marginRight: '20px' }}
+                  onClick={() => setActiveStep(0)}
+                >{'< Back'}</Button>
+                <Button
+                  variant="outlined"
+                  onClick={async () => {
+                    if (documentName === '') {
+                      message.error('Please input the name')
+                      return
+                    }
+                    if (documentType === 'webPage') {
+                      if (webPageUrl === '') {
+                        message.error('Please input the Web Page URL')
+                        return
+                      }
+                      const res = await fetch(
+                        `${fetchBaseURL}/knowledge/${spaceName}/document/add`,
+                        {
+                          method: 'POST',
+                          headers: {
+                            'Content-Type': 'application/json'
+                          },
+                          body: JSON.stringify({
+                            doc_name: documentName,
+                            content: webPageUrl,
+                            doc_type: 'URL'
+                          })
+                        }
+                      )
+                      const data = await res.json()
+                      data.success &&
+                        fetch(
+                          `${fetchBaseURL}/knowledge/${spaceName}/document/sync`,
+                          {
+                            method: 'POST',
+                            headers: {
+                              'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({
+                              doc_ids: [data.data]
+                            })
+                          }
+                        )
+                      if (data.success) {
+                        message.success('success')
+                        setIsAddDocumentModalShow(false)
+                        const res = await fetch(
+                          `${fetchBaseURL}/knowledge/${spaceName}/document/list`,
+                          {
+                            method: 'POST',
+                            headers: {
+                              'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({
+                              page: current,
+                              page_size
+                            })
+                          }
+                        )
+                        const data = await res.json()
+                        if (data.success) {
+                          setDocuments(data.data.data)
+                          setTotal(data.data.total)
+                          setCurrent(data.data.page)
+                        }
+                      } else {
+                        message.error(data.err_msg || 'failed')
+                      }
+                    } else if (documentType === 'file') {
+                      if (!originFileObj) {
+                        message.error('Please select a file')
+                        return
+                      }
+                      const formData = new FormData()
+                      formData.append('doc_name', documentName)
+                      formData.append('doc_file', originFileObj)
+                      formData.append('doc_type', 'DOCUMENT')
+                      const res = await fetch(
+                        `${fetchBaseURL}/knowledge/${spaceName}/document/upload`,
+                        {
+                          method: 'POST',
+                          body: formData
+                        }
+                      )
+                      const data = await res.json()
+                      data.success &&
+                        fetch(
+                          `${fetchBaseURL}/knowledge/${spaceName}/document/sync`,
+                          {
+                            method: 'POST',
+                            headers: {
+                              'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({
+                              doc_ids: [data.data]
+                            })
+                          }
+                        )
+                      if (data.success) {
+                        message.success('success')
+                        setIsAddDocumentModalShow(false)
+                        const res = await fetch(
+                          `${fetchBaseURL}/knowledge/${spaceName}/document/list`,
+                          {
+                            method: 'POST',
+                            headers: {
+                              'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({
+                              page: current,
+                              page_size
+                            })
+                          }
+                        )
+                        const data = await res.json()
+                        if (data.success) {
+                          setDocuments(data.data.data)
+                          setTotal(data.data.total)
+                          setCurrent(data.data.page)
+                        }
+                      } else {
+                        message.error(data.err_msg || 'failed')
+                      }
+                    } else {
+                      if (text === '') {
+                        message.error('Please input the text')
+                        return
+                      }
+                      const res = await fetch(
+                        `${fetchBaseURL}/knowledge/${spaceName}/document/add`,
+                        {
+                          method: 'POST',
+                          headers: {
+                            'Content-Type': 'application/json'
+                          },
+                          body: JSON.stringify({
+                            doc_name: documentName,
+                            source: textSource,
+                            content: text,
+                            doc_type: 'TEXT'
+                          })
+                        }
+                      )
+                      const data = await res.json()
+                      data.success &&
+                        fetch(
+                          `${fetchBaseURL}/knowledge/${spaceName}/document/sync`,
+                          {
+                            method: 'POST',
+                            headers: {
+                              'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({
+                              doc_ids: [data.data]
+                            })
+                          }
+                        )
+                      if (data.success) {
+                        message.success('success')
+                        setIsAddDocumentModalShow(false)
+                        const res = await fetch(
+                          `${fetchBaseURL}/knowledge/${spaceName}/document/list`,
+                          {
+                            method: 'POST',
+                            headers: {
+                              'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({
+                              page: current,
+                              page_size
+                            })
+                          }
+                        )
+                        const data = await res.json()
+                        if (data.success) {
+                          setDocuments(data.data.data)
+                          setTotal(data.data.total)
+                          setCurrent(data.data.page)
+                        }
+                      } else {
+                        message.error(data.err_msg || 'failed')
+                      }
+                    }
+                  }}
+                >
+                  Finish
+                </Button>
+              </Stack>
             </>
           )}
         </Sheet>
diff --git a/datacenter/app/datastores/page.tsx b/datacenter/app/datastores/page.tsx
index c1db62ecf..8884a93a5 100644
--- a/datacenter/app/datastores/page.tsx
+++ b/datacenter/app/datastores/page.tsx
@@ -144,7 +144,7 @@ const Index = () => {
               },
               '& tbody tr a': {
                 color: 'rgb(13, 96, 217)'
-              },
+              }
             }}
           >
             <thead>
@@ -387,130 +387,142 @@ const Index = () => {
                   Synch:
                 </Typography>
               </Box>
-              <Button
-                variant="outlined"
-                onClick={async () => {
-                  if (documentName === '') {
-                    message.error('Please input the name')
-                    return
-                  }
-                  if (documentType === 'webPage') {
-                    if (webPageUrl === '') {
-                      message.error('Please input the Web Page URL')
-                      return
-                    }
-                    const res = await fetch(
-                      `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/add`,
-                      {
-                        method: 'POST',
-                        headers: {
-                          'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({
-                          doc_name: documentName,
-                          content: webPageUrl,
-                          doc_type: 'URL'
-                        })
-                      }
-                    )
-                    const data = await res.json()
-                    if (data.success) {
-                      message.success('success')
-                      setIsAddKnowledgeSpaceModalShow(false)
-                      fetch(
-                        `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/sync`,
-                        {
-                          method: 'POST',
-                          headers: {
-                            'Content-Type': 'application/json'
-                          },
-                          body: JSON.stringify({
-                            doc_ids: [data.data]
-                          })
-                        }
-                      )
-                    } else {
-                      message.error(data.err_msg || 'failed')
-                    }
-                  } else if (documentType === 'file') {
-                    if (!originFileObj) {
-                      message.error('Please select a file')
-                      return
-                    }
-                    const formData = new FormData()
-                    formData.append('doc_name', documentName)
-                    formData.append('doc_file', originFileObj)
-                    formData.append('doc_type', 'DOCUMENT')
-                    const res = await fetch(
-                      `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/upload`,
-                      {
-                        method: 'POST',
-                        body: formData
-                      }
-                    )
-                    const data = await res.json()
-                    if (data.success) {
-                      message.success('success')
-                      setIsAddKnowledgeSpaceModalShow(false)
-                      fetch(
-                        `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/sync`,
-                        {
-                          method: 'POST',
-                          headers: {
-                            'Content-Type': 'application/json'
-                          },
-                          body: JSON.stringify({
-                            doc_ids: [data.data]
-                          })
-                        }
-                      )
-                    } else {
-                      message.error(data.err_msg || 'failed')
-                    }
-                  } else {
-                    if (text === '') {
-                      message.error('Please input the text')
-                      return
-                    }
-                    const res = await fetch(
-                      `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/add`,
-                      {
-                        method: 'POST',
-                        headers: {
-                          'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({
-                          doc_name: documentName,
-                          source: textSource,
-                          content: text,
-                          doc_type: 'TEXT'
-                        })
-                      }
-                    )
-                    const data = await res.json()
-                    if (data.success) {
-                      message.success('success')
-                      setIsAddKnowledgeSpaceModalShow(false)
-                      fetch(
-                        `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/sync`,
-                        {
-                          method: 'POST',
-                          headers: {
-                            'Content-Type': 'application/json'
-                          },
-                          body: JSON.stringify({
-                            doc_ids: [data.data]
-                          })
-                        }
-                      )
-                    } else {
-                      message.error(data.err_msg || 'failed')
-                    }
-                  }
-                }}
+              <Stack
+                direction="row"
+                justifyContent="flex-start"
+                alignItems="center"
+                sx={{ marginBottom: '20px' }}
               >
-                Finish
-              </Button>
+                <Button
+                  variant="outlined"
+                  sx={{ marginRight: '20px' }}
+                  onClick={() => setActiveStep(1)}
+                >{'< Back'}</Button>
+                <Button
+                  variant="outlined"
+                  onClick={async () => {
+                    if (documentName === '') {
+                      message.error('Please input the name')
+                      return
+                    }
+                    if (documentType === 'webPage') {
+                      if (webPageUrl === '') {
+                        message.error('Please input the Web Page URL')
+                        return
+                      }
+                      const res = await fetch(
+                        `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/add`,
+                        {
+                          method: 'POST',
+                          headers: {
+                            'Content-Type': 'application/json'
+                          },
+                          body: JSON.stringify({
+                            doc_name: documentName,
+                            content: webPageUrl,
+                            doc_type: 'URL'
+                          })
+                        }
+                      )
+                      const data = await res.json()
+                      if (data.success) {
+                        message.success('success')
+                        setIsAddKnowledgeSpaceModalShow(false)
+                        fetch(
+                          `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/sync`,
+                          {
+                            method: 'POST',
+                            headers: {
+                              'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({
+                              doc_ids: [data.data]
+                            })
+                          }
+                        )
+                      } else {
+                        message.error(data.err_msg || 'failed')
+                      }
+                    } else if (documentType === 'file') {
+                      if (!originFileObj) {
+                        message.error('Please select a file')
+                        return
+                      }
+                      const formData = new FormData()
+                      formData.append('doc_name', documentName)
+                      formData.append('doc_file', originFileObj)
+                      formData.append('doc_type', 'DOCUMENT')
+                      const res = await fetch(
+                        `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/upload`,
+                        {
+                          method: 'POST',
+                          body: formData
+                        }
+                      )
+                      const data = await res.json()
+                      if (data.success) {
+                        message.success('success')
+                        setIsAddKnowledgeSpaceModalShow(false)
+                        fetch(
+                          `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/sync`,
+                          {
+                            method: 'POST',
+                            headers: {
+                              'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({
+                              doc_ids: [data.data]
+                            })
+                          }
+                        )
+                      } else {
+                        message.error(data.err_msg || 'failed')
+                      }
+                    } else {
+                      if (text === '') {
+                        message.error('Please input the text')
+                        return
+                      }
+                      const res = await fetch(
+                        `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/add`,
+                        {
+                          method: 'POST',
+                          headers: {
+                            'Content-Type': 'application/json'
+                          },
+                          body: JSON.stringify({
+                            doc_name: documentName,
+                            source: textSource,
+                            content: text,
+                            doc_type: 'TEXT'
+                          })
+                        }
+                      )
+                      const data = await res.json()
+                      if (data.success) {
+                        message.success('success')
+                        setIsAddKnowledgeSpaceModalShow(false)
+                        fetch(
+                          `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/sync`,
+                          {
+                            method: 'POST',
+                            headers: {
+                              'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({
+                              doc_ids: [data.data]
+                            })
+                          }
+                        )
+                      } else {
+                        message.error(data.err_msg || 'failed')
+                      }
+                    }
+                  }}
+                >
+                  Finish
+                </Button>
+              </Stack>
             </>
           )}
         </Sheet>

From c8044ddc96186e1ca271610a28b9e0460ddc8d49 Mon Sep 17 00:00:00 2001
From: "shiweisong.ssw" <shiweisong.ssw@digital-engine.com>
Date: Fri, 30 Jun 2023 16:19:03 +0800
Subject: [PATCH 07/10] fix: sync when sync switch is checked

---
 datacenter/app/datastores/documents/page.tsx |  7 +-
 datacenter/app/datastores/page.tsx           | 79 +++++++++++---------
 2 files changed, 48 insertions(+), 38 deletions(-)

diff --git a/datacenter/app/datastores/documents/page.tsx b/datacenter/app/datastores/documents/page.tsx
index 584e80daa..41b1da7e3 100644
--- a/datacenter/app/datastores/documents/page.tsx
+++ b/datacenter/app/datastores/documents/page.tsx
@@ -467,7 +467,9 @@ const Documents = () => {
                   variant="outlined"
                   sx={{ marginRight: '20px' }}
                   onClick={() => setActiveStep(0)}
-                >{'< Back'}</Button>
+                >
+                  {'< Back'}
+                </Button>
                 <Button
                   variant="outlined"
                   onClick={async () => {
@@ -496,6 +498,7 @@ const Documents = () => {
                       )
                       const data = await res.json()
                       data.success &&
+                        synchChecked &&
                         fetch(
                           `${fetchBaseURL}/knowledge/${spaceName}/document/sync`,
                           {
@@ -551,6 +554,7 @@ const Documents = () => {
                       )
                       const data = await res.json()
                       data.success &&
+                        synchChecked &&
                         fetch(
                           `${fetchBaseURL}/knowledge/${spaceName}/document/sync`,
                           {
@@ -610,6 +614,7 @@ const Documents = () => {
                       )
                       const data = await res.json()
                       data.success &&
+                        synchChecked &&
                         fetch(
                           `${fetchBaseURL}/knowledge/${spaceName}/document/sync`,
                           {
diff --git a/datacenter/app/datastores/page.tsx b/datacenter/app/datastores/page.tsx
index 8884a93a5..37f4f598f 100644
--- a/datacenter/app/datastores/page.tsx
+++ b/datacenter/app/datastores/page.tsx
@@ -397,7 +397,9 @@ const Index = () => {
                   variant="outlined"
                   sx={{ marginRight: '20px' }}
                   onClick={() => setActiveStep(1)}
-                >{'< Back'}</Button>
+                >
+                  {'< Back'}
+                </Button>
                 <Button
                   variant="outlined"
                   onClick={async () => {
@@ -428,18 +430,19 @@ const Index = () => {
                       if (data.success) {
                         message.success('success')
                         setIsAddKnowledgeSpaceModalShow(false)
-                        fetch(
-                          `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/sync`,
-                          {
-                            method: 'POST',
-                            headers: {
-                              'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify({
-                              doc_ids: [data.data]
-                            })
-                          }
-                        )
+                        synchChecked &&
+                          fetch(
+                            `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/sync`,
+                            {
+                              method: 'POST',
+                              headers: {
+                                'Content-Type': 'application/json'
+                              },
+                              body: JSON.stringify({
+                                doc_ids: [data.data]
+                              })
+                            }
+                          )
                       } else {
                         message.error(data.err_msg || 'failed')
                       }
@@ -463,18 +466,19 @@ const Index = () => {
                       if (data.success) {
                         message.success('success')
                         setIsAddKnowledgeSpaceModalShow(false)
-                        fetch(
-                          `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/sync`,
-                          {
-                            method: 'POST',
-                            headers: {
-                              'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify({
-                              doc_ids: [data.data]
-                            })
-                          }
-                        )
+                        synchChecked &&
+                          fetch(
+                            `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/sync`,
+                            {
+                              method: 'POST',
+                              headers: {
+                                'Content-Type': 'application/json'
+                              },
+                              body: JSON.stringify({
+                                doc_ids: [data.data]
+                              })
+                            }
+                          )
                       } else {
                         message.error(data.err_msg || 'failed')
                       }
@@ -502,18 +506,19 @@ const Index = () => {
                       if (data.success) {
                         message.success('success')
                         setIsAddKnowledgeSpaceModalShow(false)
-                        fetch(
-                          `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/sync`,
-                          {
-                            method: 'POST',
-                            headers: {
-                              'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify({
-                              doc_ids: [data.data]
-                            })
-                          }
-                        )
+                        synchChecked &&
+                          fetch(
+                            `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/sync`,
+                            {
+                              method: 'POST',
+                              headers: {
+                                'Content-Type': 'application/json'
+                              },
+                              body: JSON.stringify({
+                                doc_ids: [data.data]
+                              })
+                            }
+                          )
                       } else {
                         message.error(data.err_msg || 'failed')
                       }

From a42505a8a4e149507d7810d6e9183582702df614 Mon Sep 17 00:00:00 2001
From: "shiweisong.ssw" <shiweisong.ssw@digital-engine.com>
Date: Fri, 30 Jun 2023 16:35:25 +0800
Subject: [PATCH 08/10] feat: change the style of the step information

---
 datacenter/app/datastores/documents/page.tsx |  8 +++++---
 datacenter/app/datastores/page.tsx           | 10 ++++++----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/datacenter/app/datastores/documents/page.tsx b/datacenter/app/datastores/documents/page.tsx
index 41b1da7e3..1c1bcf0cc 100644
--- a/datacenter/app/datastores/documents/page.tsx
+++ b/datacenter/app/datastores/documents/page.tsx
@@ -21,6 +21,7 @@ import {
 } from '@/lib/mui'
 import moment from 'moment'
 import { InboxOutlined } from '@ant-design/icons'
+import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
 import type { UploadProps } from 'antd'
 import { Upload, Pagination, Popover, message } from 'antd'
 import { fetchBaseURL } from '@/app/datastores/constants'
@@ -37,8 +38,8 @@ const Item = styled(Sheet)(({ theme }) => ({
   color: theme.vars.palette.text.secondary
 }))
 const stepsOfAddingDocument = [
-  '1.Choose a Datasource type',
-  '2.Setup the Datasource'
+  'Choose a Datasource type',
+  'Setup the Datasource'
 ]
 const documentTypeList = [
   {
@@ -352,7 +353,8 @@ const Documents = () => {
                     color: activeStep === index ? '#814DDE' : ''
                   }}
                 >
-                  {item}
+                  {index < activeStep ? <CheckCircleOutlinedIcon /> : `${index + 1}.`}
+                  {`${item}`}
                 </Item>
               ))}
             </Stack>
diff --git a/datacenter/app/datastores/page.tsx b/datacenter/app/datastores/page.tsx
index 37f4f598f..0bd657e21 100644
--- a/datacenter/app/datastores/page.tsx
+++ b/datacenter/app/datastores/page.tsx
@@ -3,6 +3,7 @@
 import { useRouter } from 'next/navigation'
 import React, { useState, useEffect } from 'react'
 import { InboxOutlined } from '@ant-design/icons'
+import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
 import type { UploadProps } from 'antd'
 import { message, Upload, Popover } from 'antd'
 import {
@@ -36,9 +37,9 @@ const Item = styled(Sheet)(({ theme }) => ({
 }))
 
 const stepsOfAddingSpace = [
-  '1.Knowledge Space Config',
-  '2.Choose a Datasource type',
-  '3.Setup the Datasource'
+  'Knowledge Space Config',
+  'Choose a Datasource type',
+  'Setup the Datasource'
 ]
 const documentTypeList = [
   {
@@ -225,7 +226,8 @@ const Index = () => {
                     color: activeStep === index ? '#814DDE' : ''
                   }}
                 >
-                  {item}
+                  {index < activeStep ? <CheckCircleOutlinedIcon /> : `${index + 1}.`}
+                  {`${item}`}
                 </Item>
               ))}
             </Stack>

From a688ea8418285c1df5cddd7bfa7226a92238e25d Mon Sep 17 00:00:00 2001
From: "shiweisong.ssw" <shiweisong.ssw@digital-engine.com>
Date: Fri, 30 Jun 2023 16:50:51 +0800
Subject: [PATCH 09/10] feat: change the text

---
 datacenter/app/datastores/documents/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/datacenter/app/datastores/documents/page.tsx b/datacenter/app/datastores/documents/page.tsx
index 1c1bcf0cc..a56c2dbbf 100644
--- a/datacenter/app/datastores/documents/page.tsx
+++ b/datacenter/app/datastores/documents/page.tsx
@@ -275,7 +275,7 @@ const Documents = () => {
                             )
                           }}
                         >
-                          Detail of Chunks
+                          Details
                         </Button>
                       </>
                     }

From 235ccfd8692e13cd7ff6c492b2b9304e55cdb40d Mon Sep 17 00:00:00 2001
From: "shiweisong.ssw" <shiweisong.ssw@digital-engine.com>
Date: Fri, 30 Jun 2023 17:06:46 +0800
Subject: [PATCH 10/10] feat: add icon to synch button

---
 datacenter/app/datastores/documents/page.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/datacenter/app/datastores/documents/page.tsx b/datacenter/app/datastores/documents/page.tsx
index a56c2dbbf..5372f8d8a 100644
--- a/datacenter/app/datastores/documents/page.tsx
+++ b/datacenter/app/datastores/documents/page.tsx
@@ -22,6 +22,7 @@ import {
 import moment from 'moment'
 import { InboxOutlined } from '@ant-design/icons'
 import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
+import CachedIcon from '@mui/icons-material/Cached';
 import type { UploadProps } from 'antd'
 import { Upload, Pagination, Popover, message } from 'antd'
 import { fetchBaseURL } from '@/app/datastores/constants'
@@ -264,7 +265,7 @@ const Documents = () => {
                             }
                           }}
                         >
-                          Synch
+                          Synch<CachedIcon />
                         </Button>
                         <Button
                           variant="outlined"