Merge branch 'new-page-framework' of https://github.com/csunny/DB-GPT into new-page-framework

datacenter/app/datastores/constants.tsx

@@ -0,0 +1 @@
+export const fetchBaseURL = 'http://30.183.154.125:5000';

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

@@ -2,37 +2,61 @@
 
 import { useSearchParams } from 'next/navigation'
 import React, { useState, useEffect } from 'react'
-import { Table } from '@/lib/mui'
+import { useColorScheme, Table, Stack } from '@/lib/mui'
-import { Popover } from 'antd'
+import { Popover, Pagination } from 'antd'
+import { fetchBaseURL } from '@/app/datastores/constants'
+const page_size = 20
 
 const ChunkList = () => {
+  const { mode } = useColorScheme()
   const spaceName = useSearchParams().get('spacename')
   const documentId = useSearchParams().get('documentid')
+  const [total, setTotal] = useState<number>(0)
+  const [current, setCurrent] = useState<number>(0)
   const [chunkList, setChunkList] = useState<any>([])
   useEffect(() => {
     async function fetchChunks() {
       const res = await fetch(
-        `http://localhost:8000/knowledge/${spaceName}/chunk/list`,
+        `${fetchBaseURL}/knowledge/${spaceName}/chunk/list`,
         {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json'
           },
           body: JSON.stringify({
-            document_id: documentId
+            document_id: documentId,
+            page: 1,
+            page_size
           })
         }
       )
       const data = await res.json()
       if (data.success) {
-        setChunkList(data.data)
+        setChunkList(data.data.data)
+        setTotal(data.data.total)
+        setCurrent(data.data.page)
       }
     }
     fetchChunks()
   }, [])
   return (
     <div className="p-4">
-      <Table color="neutral" stripe="odd" variant="outlined">
+      {chunkList.length ? (
+        <>
+          <Table
+            color="info"
+            variant="soft"
+            size="lg"
+            sx={{
+              '& tbody tr: hover': {
+                backgroundColor:
+                  mode === 'light' ? 'rgb(246, 246, 246)' : 'rgb(33, 33, 40)'
+              },
+              '& tbody tr: hover a': {
+                textDecoration: 'underline'
+              }
+            }}
+          >
             <thead>
               <tr>
                 <th>Name</th>
@@ -69,6 +93,47 @@ const ChunkList = () => {
               ))}
             </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>
   )
 }

datacenter/app/datastores/documents/page.tsx

@@ -3,6 +3,7 @@
 import { useRouter, useSearchParams } from 'next/navigation'
 import React, { useState, useEffect } from 'react'
 import {
+  useColorScheme,
   Button,
   Table,
   Sheet,
@@ -17,7 +18,8 @@ import {
 import moment from 'moment'
 import { InboxOutlined } from '@ant-design/icons'
 import type { UploadProps } from 'antd'
-import { Upload, message } from 'antd'
+import { Upload, Pagination, message } from 'antd'
+import { fetchBaseURL } from '@/app/datastores/constants'
 
 const { Dragger } = Upload
 const Item = styled(Sheet)(({ theme }) => ({
@@ -38,23 +40,26 @@ const documentTypeList = [
   {
     type: 'text',
     title: 'Text',
-    subTitle: 'Paste some text'
+    subTitle: 'Fill your raw text'
   },
   {
     type: 'webPage',
-    title: 'Web Page',
+    title: 'URL',
-    subTitle: 'Crawl text from a web page'
+    subTitle: 'Fetch the content of a URL'
   },
   {
     type: 'file',
-    title: 'File',
+    title: 'Document',
-    subTitle: 'It can be: PDF, CSV, JSON, Text, PowerPoint, Word, Excel'
+    subTitle:
+      'Upload a document, document type can be PDF, CSV, Text, PowerPoint, Word, Markdown'
   }
 ]
+const page_size = 20
 
 const Documents = () => {
   const router = useRouter()
   const spaceName = useSearchParams().get('name')
+  const { mode } = useColorScheme()
   const [isAddDocumentModalShow, setIsAddDocumentModalShow] =
     useState<boolean>(false)
   const [activeStep, setActiveStep] = useState<number>(0)
@@ -62,9 +67,11 @@ const Documents = () => {
   const [documents, setDocuments] = useState<any>([])
   const [webPageUrl, setWebPageUrl] = useState<string>('')
   const [documentName, setDocumentName] = useState<any>('')
-  const [textSource, setTextSource] = useState<string>('');
+  const [textSource, setTextSource] = useState<string>('')
-  const [text, setText] = useState<string>('');
+  const [text, setText] = useState<string>('')
   const [originFileObj, setOriginFileObj] = useState<any>(null)
+  const [total, setTotal] = useState<number>(0)
+  const [current, setCurrent] = useState<number>(0)
   const props: UploadProps = {
     name: 'file',
     multiple: false,
@@ -82,18 +89,23 @@ const Documents = () => {
   useEffect(() => {
     async function fetchDocuments() {
       const res = await fetch(
-        `http://localhost:8000/knowledge/${spaceName}/document/list`,
+        `${fetchBaseURL}/knowledge/${spaceName}/document/list`,
         {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json'
           },
-          body: JSON.stringify({})
+          body: JSON.stringify({
+            page: 1,
+            page_size
+          })
         }
       )
       const data = await res.json()
       if (data.success) {
-        setDocuments(data.data)
+        setDocuments(data.data.data)
+        setTotal(data.data.total)
+        setCurrent(data.data.page)
       }
     }
     fetchDocuments()
@@ -113,7 +125,22 @@ const Documents = () => {
           + Add Datasource
         </Button>
       </Sheet>
-      <Table color="neutral" stripe="odd" variant="outlined">
+      {documents.length ? (
+        <>
+          <Table
+            color="info"
+            variant="soft"
+            size="lg"
+            sx={{
+              '& tbody tr: hover': {
+                backgroundColor:
+                  mode === 'light' ? 'rgb(246, 246, 246)' : 'rgb(33, 33, 40)'
+              },
+              '& tbody tr: hover a': {
+                textDecoration: 'underline'
+              }
+            }}
+          >
             <thead>
               <tr>
                 <th>Name</th>
@@ -128,11 +155,21 @@ const Documents = () => {
               {documents.map((row: any) => (
                 <tr key={row.id}>
                   <td>{row.doc_name}</td>
-              <td>{row.doc_type}</td>
+                  <td>
-              <td>{row.chunk_size}</td>
+                    <Chip
+                      variant="soft"
+                      color="neutral"
+                      sx={{ fontWeight: 300 }}
+                    >
+                      {row.doc_type}
+                    </Chip>
+                  </td>
+                  <td>{row.chunk_size} chunks</td>
                   <td>{moment(row.last_sync).format('YYYY-MM-DD HH:MM:SS')}</td>
                   <td>
                     <Chip
+                      sx={{ fontWeight: 300 }}
+                      variant="soft"
                       color={(function () {
                         switch (row.status) {
                           case 'TODO':
@@ -157,7 +194,7 @@ const Documents = () => {
                           size="sm"
                           onClick={async () => {
                             const res = await fetch(
-                          `http://localhost:8000/knowledge/${spaceName}/document/sync`,
+                              `${fetchBaseURL}/knowledge/${spaceName}/document/sync`,
                               {
                                 method: 'POST',
                                 headers: {
@@ -196,6 +233,46 @@ const Documents = () => {
               ))}
             </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}/document/list`,
+                  {
+                    method: 'POST',
+                    headers: {
+                      'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                      page,
+                      page_size
+                    })
+                  }
+                )
+                const data = await res.json()
+                if (data.success) {
+                  setDocuments(data.data.data)
+                  setTotal(data.data.total)
+                  setCurrent(data.data.page)
+                }
+              }}
+              hideOnSinglePage
+            />
+          </Stack>
+        </>
+      ) : (
+        <></>
+      )}
       <Modal
         sx={{
           display: 'flex',
@@ -296,9 +373,9 @@ const Documents = () => {
                   </>
                 ) : (
                   <>
-                    Source:
+                    Text Source(Optional):
                     <Input
-                      placeholder="Please input the source"
+                      placeholder="Please input the text source"
                       onChange={(e: any) => setTextSource(e.target.value)}
                       sx={{ marginBottom: '20px' }}
                     />
@@ -323,7 +400,7 @@ const Documents = () => {
                       return
                     }
                     const res = await fetch(
-                      `http://localhost:8000/knowledge/${spaceName}/document/add`,
+                      `${fetchBaseURL}/knowledge/${spaceName}/document/add`,
                       {
                         method: 'POST',
                         headers: {
@@ -341,18 +418,23 @@ const Documents = () => {
                       message.success('success')
                       setIsAddDocumentModalShow(false)
                       const res = await fetch(
-                        `http://localhost:8000/knowledge/${spaceName}/document/list`,
+                        `${fetchBaseURL}/knowledge/${spaceName}/document/list`,
                         {
                           method: 'POST',
                           headers: {
                             'Content-Type': 'application/json'
                           },
-                          body: JSON.stringify({})
+                          body: JSON.stringify({
+                            page: current,
+                            page_size
+                          })
                         }
                       )
                       const data = await res.json()
                       if (data.success) {
-                        setDocuments(data.data)
+                        setDocuments(data.data.data)
+                        setTotal(data.data.total)
+                        setCurrent(data.data.page)
                       }
                     } else {
                       message.error(data.err_msg || 'failed')
@@ -362,12 +444,12 @@ const Documents = () => {
                       message.error('Please select a file')
                       return
                     }
-                    const formData = new FormData();
+                    const formData = new FormData()
-                    formData.append('doc_name', documentName);
+                    formData.append('doc_name', documentName)
-                    formData.append('doc_file', originFileObj);
+                    formData.append('doc_file', originFileObj)
-                    formData.append('doc_type', 'DOCUMENT');
+                    formData.append('doc_type', 'DOCUMENT')
                     const res = await fetch(
-                      `http://localhost:8000/knowledge/${spaceName}/document/upload`,
+                      `${fetchBaseURL}/knowledge/${spaceName}/document/upload`,
                       {
                         method: 'POST',
                         body: formData
@@ -378,33 +460,34 @@ const Documents = () => {
                       message.success('success')
                       setIsAddDocumentModalShow(false)
                       const res = await fetch(
-                        `http://localhost:8000/knowledge/${spaceName}/document/list`,
+                        `${fetchBaseURL}/knowledge/${spaceName}/document/list`,
                         {
                           method: 'POST',
                           headers: {
                             'Content-Type': 'application/json'
                           },
-                          body: JSON.stringify({})
+                          body: JSON.stringify({
+                            page: current,
+                            page_size
+                          })
                         }
                       )
                       const data = await res.json()
                       if (data.success) {
-                        setDocuments(data.data)
+                        setDocuments(data.data.data)
+                        setTotal(data.data.total)
+                        setCurrent(data.data.page)
                       }
                     } else {
                       message.error(data.err_msg || 'failed')
                     }
                   } else {
-                    if (textSource === '') {
-                      message.error('Please input the source')
-                      return
-                    }
                     if (text === '') {
                       message.error('Please input the text')
                       return
                     }
                     const res = await fetch(
-                      `http://localhost:8000/knowledge/${spaceName}/document/add`,
+                      `${fetchBaseURL}/knowledge/${spaceName}/document/add`,
                       {
                         method: 'POST',
                         headers: {
@@ -423,18 +506,23 @@ const Documents = () => {
                       message.success('success')
                       setIsAddDocumentModalShow(false)
                       const res = await fetch(
-                        `http://localhost:8000/knowledge/${spaceName}/document/list`,
+                        `${fetchBaseURL}/knowledge/${spaceName}/document/list`,
                         {
                           method: 'POST',
                           headers: {
                             'Content-Type': 'application/json'
                           },
-                          body: JSON.stringify({})
+                          body: JSON.stringify({
+                            page: current,
+                            page_size
+                          })
                         }
                       )
                       const data = await res.json()
                       if (data.success) {
-                        setDocuments(data.data)
+                        setDocuments(data.data.data)
+                        setTotal(data.data.total)
+                        setCurrent(data.data.page)
                       }
                     } else {
                       message.error(data.err_msg || 'failed')

datacenter/app/datastores/page.tsx

@@ -6,6 +6,7 @@ import { InboxOutlined } from '@ant-design/icons'
 import type { UploadProps } from 'antd'
 import { message, Upload } from 'antd'
 import {
+  useColorScheme,
   Modal,
   Button,
   Table,
@@ -14,8 +15,10 @@ import {
   Box,
   Input,
   Textarea,
+  Chip,
   styled
 } from '@/lib/mui'
+import { fetchBaseURL } from '@/app/datastores/constants'
 
 const { Dragger } = Upload
 
@@ -39,22 +42,24 @@ const documentTypeList = [
   {
     type: 'text',
     title: 'Text',
-    subTitle: 'Paste some text'
+    subTitle: 'Fill your raw text'
   },
   {
     type: 'webPage',
-    title: 'Web Page',
+    title: 'URL',
-    subTitle: 'Crawl text from a web page'
+    subTitle: 'Fetch the content of a URL'
   },
   {
     type: 'file',
-    title: 'File',
+    title: 'Document',
-    subTitle: 'It can be: PDF, CSV, JSON, Text, PowerPoint, Word, Excel'
+    subTitle:
+      'Upload a document, document type can be PDF, CSV, Text, PowerPoint, Word, Markdown'
   }
 ]
 
 const Index = () => {
   const router = useRouter()
+  const { mode } = useColorScheme()
   const [activeStep, setActiveStep] = useState<number>(0)
   const [documentType, setDocumentType] = useState<string>('')
   const [knowledgeSpaceList, setKnowledgeSpaceList] = useState<any>([])
@@ -63,8 +68,8 @@ const Index = () => {
   const [knowledgeSpaceName, setKnowledgeSpaceName] = useState<string>('')
   const [webPageUrl, setWebPageUrl] = useState<string>('')
   const [documentName, setDocumentName] = useState<any>('')
-  const [textSource, setTextSource] = useState<string>('');
+  const [textSource, setTextSource] = useState<string>('')
-  const [text, setText] = useState<string>('');
+  const [text, setText] = useState<string>('')
   const [originFileObj, setOriginFileObj] = useState<any>(null)
   const props: UploadProps = {
     name: 'file',
@@ -82,7 +87,7 @@ const Index = () => {
   }
   useEffect(() => {
     async function fetchData() {
-      const res = await fetch('http://localhost:8000/knowledge/space/list', {
+      const res = await fetch(`${fetchBaseURL}/knowledge/space/list`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
@@ -121,11 +126,25 @@ const Index = () => {
         </Button>
       </Sheet>
       <div className="page-body p-4">
-        <Table color="neutral" stripe="odd" variant="outlined">
+        {knowledgeSpaceList.length ? (
+          <Table
+            color="info"
+            variant="soft"
+            size="lg"
+            sx={{
+              '& tbody tr: hover': {
+                backgroundColor:
+                  mode === 'light' ? 'rgb(246, 246, 246)' : 'rgb(33, 33, 40)'
+              },
+              '& tbody tr: hover a': {
+                textDecoration: 'underline'
+              }
+            }}
+          >
             <thead>
               <tr>
                 <th>Name</th>
-              <th>Provider</th>
+                <th>Vector</th>
                 <th>Owner</th>
               </tr>
             </thead>
@@ -135,6 +154,7 @@ const Index = () => {
                   <td>
                     {
                       <a
+                        style={{ fontWeight: 'bold' }}
                         href="javascript:;"
                         onClick={() =>
                           router.push(`/datastores/documents?name=${row.name}`)
@@ -144,12 +164,31 @@ const Index = () => {
                       </a>
                     }
                   </td>
-                <td>{row.vector_type}</td>
+                  <td>
-                <td>{row.owner}</td>
+                    <Chip
+                      variant="soft"
+                      color="neutral"
+                      sx={{ fontWeight: 300 }}
+                    >
+                      {row.vector_type}
+                    </Chip>
+                  </td>
+                  <td>
+                    <Chip
+                      variant="soft"
+                      color="neutral"
+                      sx={{ fontWeight: 300 }}
+                    >
+                      {row.owner}
+                    </Chip>
+                  </td>
                 </tr>
               ))}
             </tbody>
           </Table>
+        ) : (
+          <></>
+        )}
       </div>
       <Modal
         sx={{
@@ -198,9 +237,7 @@ const Index = () => {
                     message.error('please input the name')
                     return
                   }
-                  const res = await fetch(
+                  const res = await fetch(`${fetchBaseURL}/knowledge/space/add`, {
-                    'http://localhost:8000/knowledge/space/add',
-                    {
                     method: 'POST',
                     headers: {
                       'Content-Type': 'application/json'
@@ -211,14 +248,13 @@ const Index = () => {
                       owner: 'keting',
                       desc: 'test1'
                     })
-                    }
+                  })
-                  )
                   const data = await res.json()
                   if (data.success) {
                     message.success('success')
                     setActiveStep(1)
                     const res = await fetch(
-                      'http://localhost:8000/knowledge/space/list',
+                      `${fetchBaseURL}/knowledge/space/list`,
                       {
                         method: 'POST',
                         headers: {
@@ -308,9 +344,9 @@ const Index = () => {
                   </>
                 ) : (
                   <>
-                    Source:
+                    Text Source(Optional):
                     <Input
-                      placeholder="Please input the source"
+                      placeholder="Please input the text source"
                       onChange={(e: any) => setTextSource(e.target.value)}
                       sx={{ marginBottom: '20px' }}
                     />
@@ -335,7 +371,7 @@ const Index = () => {
                       return
                     }
                     const res = await fetch(
-                      `http://localhost:8000/knowledge/${knowledgeSpaceName}/document/add`,
+                      `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/add`,
                       {
                         method: 'POST',
                         headers: {
@@ -360,12 +396,12 @@ const Index = () => {
                       message.error('Please select a file')
                       return
                     }
-                    const formData = new FormData();
+                    const formData = new FormData()
-                    formData.append('doc_name', documentName);
+                    formData.append('doc_name', documentName)
-                    formData.append('doc_file', originFileObj);
+                    formData.append('doc_file', originFileObj)
-                    formData.append('doc_type', 'DOCUMENT');
+                    formData.append('doc_type', 'DOCUMENT')
                     const res = await fetch(
-                      `http://localhost:8000/knowledge/${knowledgeSpaceName}/document/upload`,
+                      `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/upload`,
                       {
                         method: 'POST',
                         body: formData
@@ -379,16 +415,12 @@ const Index = () => {
                       message.error(data.err_msg || 'failed')
                     }
                   } else {
-                    if (textSource === '') {
-                      message.error('Please input the source')
-                      return
-                    }
                     if (text === '') {
                       message.error('Please input the text')
                       return
                     }
                     const res = await fetch(
-                      `http://localhost:8000/knowledge/${knowledgeSpaceName}/document/add`,
+                      `${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/add`,
                       {
                         method: 'POST',
                         headers: {

datacenter/app/globals.css

@@ -37,4 +37,19 @@ tr:hover {
 
 html body .ant-btn-primary {
   background-color: #1677ff;
+.ant-pagination .ant-pagination-prev * {
+  color: rgb(145, 35, 167) !important;
+}
+
+.ant-pagination .ant-pagination-next * {
+  color: rgb(145, 35, 167) !important;
+}
+
+.ant-pagination .ant-pagination-item {
+  border-color: rgb(145, 35, 167) !important;
+  background-color: rgb(145, 35, 167) !important;
+}
+
+.ant-pagination .ant-pagination-item.ant-pagination-item-active a {
+  color: white !important;
 }

datacenter/components/leftSider.tsx

@@ -2,11 +2,9 @@
 import React, { useEffect, useMemo } from 'react';
 import { usePathname, useRouter } from 'next/navigation';
 import Link from 'next/link';
-import Image from 'next/image';
 import { Popconfirm } from 'antd';
 import { Box, List, ListItem, ListItemButton, ListItemDecorator, ListItemContent, Typography, Button, useColorScheme, IconButton } from '@/lib/mui';
-import SmartToyRoundedIcon from '@mui/icons-material/SmartToyRounded'; // Icons import
+import Article from '@mui/icons-material/Article';
-import StorageRoundedIcon from '@mui/icons-material/StorageRounded';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import WbSunnyIcon from '@mui/icons-material/WbSunny';
 import MenuIcon from '@mui/icons-material/Menu';
@@ -23,14 +21,9 @@ const LeftSider =  () => {
 
 	const menus = useMemo(() => {
 		return [{
-			label: 'Agents',
+			label: 'Knowledge Space',
-			icon: <SmartToyRoundedIcon fontSize="small" />,
-			route: '/agents',
-			active: pathname === '/agents',
-		}, {
-			label: 'Datastores',
 			route: '/datastores',
-			icon: <StorageRoundedIcon fontSize="small" />,
+			icon: <Article fontSize="small" />,
 			active: pathname === '/datastores'
 		}];
 	}, [pathname]);
@@ -85,13 +78,6 @@ const LeftSider =  () => {
 						}}
 					>
 						<div className='flex items-center  gap-3'>
-							<Image
-								src="/databerry-logo-icon.png"
-								width="100"
-								height="100"
-								className='w-12'
-								alt="Databerry"
-							/>
 							<Typography component="h1" fontWeight="xl">
 								DB-GPT
 							</Typography>