diff --git a/datacenter/app/datastores/constants.tsx b/datacenter/app/datastores/constants.tsx new file mode 100644 index 000000000..c5d7f8260 --- /dev/null +++ b/datacenter/app/datastores/constants.tsx @@ -0,0 +1 @@ +export const fetchBaseURL = 'http://30.183.154.125:5000'; diff --git a/datacenter/app/datastores/documents/chunklist/page.tsx b/datacenter/app/datastores/documents/chunklist/page.tsx index ca17030e9..0a3db6383 100644 --- a/datacenter/app/datastores/documents/chunklist/page.tsx +++ b/datacenter/app/datastores/documents/chunklist/page.tsx @@ -2,73 +2,138 @@ import { useSearchParams } from 'next/navigation' import React, { useState, useEffect } from 'react' -import { Table } from '@/lib/mui' -import { Popover } from 'antd' +import { useColorScheme, Table, Stack } from '@/lib/mui' +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(0) + const [current, setCurrent] = useState(0) const [chunkList, setChunkList] = useState([]) 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 (
- - - - - - - - - - {chunkList.map((row: any) => ( - - - - - - ))} - -
NameContentMeta Data
{row.doc_name} - { - - {row.content.length > 10 - ? `${row.content.slice(0, 10)}...` - : row.content} - + {chunkList.length ? ( + <> + + + + + + + + + + {chunkList.map((row: any) => ( + + + + + + ))} + +
NameContentMeta Data
{row.doc_name} + { + + {row.content.length > 10 + ? `${row.content.slice(0, 10)}...` + : row.content} + + } + + { + + {row.meta_info.length > 10 + ? `${row.meta_info.slice(0, 10)}...` + : row.meta_info} + + } +
+ + { + 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) } - 		- { - - {row.meta_info.length > 10 - ? `${row.meta_info.slice(0, 10)}...` - : row.meta_info} - - } -
+ }} + hideOnSinglePage + /> + + + ) : ( + <> + )}
) } diff --git a/datacenter/app/datastores/documents/page.tsx b/datacenter/app/datastores/documents/page.tsx index 7ce660f81..8e14b5d2c 100644 --- a/datacenter/app/datastores/documents/page.tsx +++ b/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', - subTitle: 'Crawl text from a web page' + title: 'URL', + subTitle: 'Fetch the content of a URL' }, { type: 'file', - title: 'File', - subTitle: 'It can be: PDF, CSV, JSON, Text, PowerPoint, Word, Excel' + title: 'Document', + 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(false) const [activeStep, setActiveStep] = useState(0) @@ -62,9 +67,11 @@ const Documents = () => { const [documents, setDocuments] = useState([]) const [webPageUrl, setWebPageUrl] = useState('') const [documentName, setDocumentName] = useState('') - const [textSource, setTextSource] = useState(''); - const [text, setText] = useState(''); + const [textSource, setTextSource] = useState('') + const [text, setText] = useState('') const [originFileObj, setOriginFileObj] = useState(null) + const [total, setTotal] = useState(0) + const [current, setCurrent] = useState(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,89 +125,154 @@ const Documents = () => { + Add Datasource - - - - - - - - - - - - - {documents.map((row: any) => ( - - - - - - - - - ))} - -
NameTypeSizeLast SynchStatusOperation
{row.doc_name}{row.doc_type}{row.chunk_size}{moment(row.last_sync).format('YYYY-MM-DD HH:MM:SS')} - - {row.status} - - - { - <> -
+ }} + hideOnSinglePage + /> + + + ) : ( + <> + )} { ) : ( <> - Source: + Text Source(Optional): 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(); - formData.append('doc_name', documentName); - formData.append('doc_file', originFileObj); - formData.append('doc_type', 'DOCUMENT'); + const formData = new FormData() + formData.append('doc_name', documentName) + formData.append('doc_file', originFileObj) + 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') diff --git a/datacenter/app/datastores/page.tsx b/datacenter/app/datastores/page.tsx index ec13378d3..e66c39a1f 100644 --- a/datacenter/app/datastores/page.tsx +++ b/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', - subTitle: 'Crawl text from a web page' + title: 'URL', + subTitle: 'Fetch the content of a URL' }, { type: 'file', - title: 'File', - subTitle: 'It can be: PDF, CSV, JSON, Text, PowerPoint, Word, Excel' + title: 'Document', + 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(0) const [documentType, setDocumentType] = useState('') const [knowledgeSpaceList, setKnowledgeSpaceList] = useState([]) @@ -63,8 +68,8 @@ const Index = () => { const [knowledgeSpaceName, setKnowledgeSpaceName] = useState('') const [webPageUrl, setWebPageUrl] = useState('') const [documentName, setDocumentName] = useState('') - const [textSource, setTextSource] = useState(''); - const [text, setText] = useState(''); + const [textSource, setTextSource] = useState('') + const [text, setText] = useState('') const [originFileObj, setOriginFileObj] = useState(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,35 +126,69 @@ const Index = () => {
- - - - - - - - - - {knowledgeSpaceList.map((row: any) => ( - - - - + {knowledgeSpaceList.length ? ( +
NameProviderOwner
- { - - router.push(`/datastores/documents?name=${row.name}`) - } - > - {row.name} - - } - {row.vector_type}{row.owner}
+ + + + + - ))} - -
NameVectorOwner
+ + + {knowledgeSpaceList.map((row: any) => ( + + + { + + router.push(`/datastores/documents?name=${row.name}`) + } + > + {row.name} + + } + + + + {row.vector_type} + + + + + {row.owner} + + + + ))} + + + ) : ( + <> + )}
{ message.error('please input the name') return } - const res = await fetch( - 'http://localhost:8000/knowledge/space/add', - { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - name: knowledgeSpaceName, - vector_type: 'Chroma', - owner: 'keting', - desc: 'test1' - }) - } - ) + const res = await fetch(`${fetchBaseURL}/knowledge/space/add`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + name: knowledgeSpaceName, + vector_type: 'Chroma', + owner: 'keting', + desc: 'test1' + }) + }) const data = await res.json() if (data.success) { message.success('success') 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): 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(); - formData.append('doc_name', documentName); - formData.append('doc_file', originFileObj); - formData.append('doc_type', 'DOCUMENT'); + const formData = new FormData() + formData.append('doc_name', documentName) + formData.append('doc_file', originFileObj) + 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: { diff --git a/datacenter/app/globals.css b/datacenter/app/globals.css index 8568c3df0..38471b71d 100644 --- a/datacenter/app/globals.css +++ b/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; } \ No newline at end of file diff --git a/datacenter/components/leftSider.tsx b/datacenter/components/leftSider.tsx index c3fdbff51..04e7fe5c4 100644 --- a/datacenter/components/leftSider.tsx +++ b/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 StorageRoundedIcon from '@mui/icons-material/StorageRounded'; +import Article from '@mui/icons-material/Article'; 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', - icon: , - route: '/agents', - active: pathname === '/agents', - }, { - label: 'Datastores', + label: 'Knowledge Space', route: '/datastores', - icon: , + icon:
, active: pathname === '/datastores' }]; }, [pathname]); @@ -85,13 +78,6 @@ const LeftSider = () => { }} >
- Databerry DB-GPT diff --git a/datacenter/public/databerry-logo-icon.png b/datacenter/public/databerry-logo-icon.png deleted file mode 100644 index 9ee985d5b..000000000 Binary files a/datacenter/public/databerry-logo-icon.png and /dev/null differ