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 1/5] 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 2/5] 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 3/5] 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 4/5] 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 5/5] 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>