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] 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>