mirror of
https://github.com/csunny/DB-GPT.git
synced 2025-08-14 06:26:18 +00:00
Merge branch 'new-page-framework' of https://github.com/csunny/DB-GPT into new-page-framework
This commit is contained in:
commit
10e14a05cd
1
datacenter/app/datastores/constants.tsx
Normal file
1
datacenter/app/datastores/constants.tsx
Normal file
@ -0,0 +1 @@
|
|||||||
|
export const fetchBaseURL = 'http://30.183.154.125:5000';
|
@ -2,73 +2,138 @@
|
|||||||
|
|
||||||
import { useSearchParams } from 'next/navigation'
|
import { useSearchParams } from 'next/navigation'
|
||||||
import React, { useState, useEffect } from 'react'
|
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 ChunkList = () => {
|
||||||
|
const { mode } = useColorScheme()
|
||||||
const spaceName = useSearchParams().get('spacename')
|
const spaceName = useSearchParams().get('spacename')
|
||||||
const documentId = useSearchParams().get('documentid')
|
const documentId = useSearchParams().get('documentid')
|
||||||
|
const [total, setTotal] = useState<number>(0)
|
||||||
|
const [current, setCurrent] = useState<number>(0)
|
||||||
const [chunkList, setChunkList] = useState<any>([])
|
const [chunkList, setChunkList] = useState<any>([])
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function fetchChunks() {
|
async function fetchChunks() {
|
||||||
const res = await fetch(
|
const res = await fetch(
|
||||||
`http://localhost:8000/knowledge/${spaceName}/chunk/list`,
|
`${fetchBaseURL}/knowledge/${spaceName}/chunk/list`,
|
||||||
{
|
{
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json'
|
||||||
},
|
},
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
document_id: documentId
|
document_id: documentId,
|
||||||
|
page: 1,
|
||||||
|
page_size
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
if (data.success) {
|
if (data.success) {
|
||||||
setChunkList(data.data)
|
setChunkList(data.data.data)
|
||||||
|
setTotal(data.data.total)
|
||||||
|
setCurrent(data.data.page)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
fetchChunks()
|
fetchChunks()
|
||||||
}, [])
|
}, [])
|
||||||
return (
|
return (
|
||||||
<div className="p-4">
|
<div className="p-4">
|
||||||
<Table color="neutral" stripe="odd" variant="outlined">
|
{chunkList.length ? (
|
||||||
<thead>
|
<>
|
||||||
<tr>
|
<Table
|
||||||
<th>Name</th>
|
color="info"
|
||||||
<th>Content</th>
|
variant="soft"
|
||||||
<th>Meta Data</th>
|
size="lg"
|
||||||
</tr>
|
sx={{
|
||||||
</thead>
|
'& tbody tr: hover': {
|
||||||
<tbody>
|
backgroundColor:
|
||||||
{chunkList.map((row: any) => (
|
mode === 'light' ? 'rgb(246, 246, 246)' : 'rgb(33, 33, 40)'
|
||||||
<tr key={row.id}>
|
},
|
||||||
<td>{row.doc_name}</td>
|
'& tbody tr: hover a': {
|
||||||
<td>
|
textDecoration: 'underline'
|
||||||
{
|
}
|
||||||
<Popover content={row.content} trigger="hover">
|
}}
|
||||||
{row.content.length > 10
|
>
|
||||||
? `${row.content.slice(0, 10)}...`
|
<thead>
|
||||||
: row.content}
|
<tr>
|
||||||
</Popover>
|
<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)
|
||||||
}
|
}
|
||||||
</td>
|
}}
|
||||||
<td>
|
hideOnSinglePage
|
||||||
{
|
/>
|
||||||
<Popover
|
</Stack>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
import { useRouter, useSearchParams } from 'next/navigation'
|
import { useRouter, useSearchParams } from 'next/navigation'
|
||||||
import React, { useState, useEffect } from 'react'
|
import React, { useState, useEffect } from 'react'
|
||||||
import {
|
import {
|
||||||
|
useColorScheme,
|
||||||
Button,
|
Button,
|
||||||
Table,
|
Table,
|
||||||
Sheet,
|
Sheet,
|
||||||
@ -17,7 +18,8 @@ import {
|
|||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
import { InboxOutlined } from '@ant-design/icons'
|
import { InboxOutlined } from '@ant-design/icons'
|
||||||
import type { UploadProps } from 'antd'
|
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 { Dragger } = Upload
|
||||||
const Item = styled(Sheet)(({ theme }) => ({
|
const Item = styled(Sheet)(({ theme }) => ({
|
||||||
@ -38,23 +40,26 @@ const documentTypeList = [
|
|||||||
{
|
{
|
||||||
type: 'text',
|
type: 'text',
|
||||||
title: 'Text',
|
title: 'Text',
|
||||||
subTitle: 'Paste some text'
|
subTitle: 'Fill your raw text'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'webPage',
|
type: 'webPage',
|
||||||
title: 'Web Page',
|
title: 'URL',
|
||||||
subTitle: 'Crawl text from a web page'
|
subTitle: 'Fetch the content of a URL'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'file',
|
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 Documents = () => {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const spaceName = useSearchParams().get('name')
|
const spaceName = useSearchParams().get('name')
|
||||||
|
const { mode } = useColorScheme()
|
||||||
const [isAddDocumentModalShow, setIsAddDocumentModalShow] =
|
const [isAddDocumentModalShow, setIsAddDocumentModalShow] =
|
||||||
useState<boolean>(false)
|
useState<boolean>(false)
|
||||||
const [activeStep, setActiveStep] = useState<number>(0)
|
const [activeStep, setActiveStep] = useState<number>(0)
|
||||||
@ -62,9 +67,11 @@ const Documents = () => {
|
|||||||
const [documents, setDocuments] = useState<any>([])
|
const [documents, setDocuments] = useState<any>([])
|
||||||
const [webPageUrl, setWebPageUrl] = useState<string>('')
|
const [webPageUrl, setWebPageUrl] = useState<string>('')
|
||||||
const [documentName, setDocumentName] = useState<any>('')
|
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 [originFileObj, setOriginFileObj] = useState<any>(null)
|
||||||
|
const [total, setTotal] = useState<number>(0)
|
||||||
|
const [current, setCurrent] = useState<number>(0)
|
||||||
const props: UploadProps = {
|
const props: UploadProps = {
|
||||||
name: 'file',
|
name: 'file',
|
||||||
multiple: false,
|
multiple: false,
|
||||||
@ -82,18 +89,23 @@ const Documents = () => {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function fetchDocuments() {
|
async function fetchDocuments() {
|
||||||
const res = await fetch(
|
const res = await fetch(
|
||||||
`http://localhost:8000/knowledge/${spaceName}/document/list`,
|
`${fetchBaseURL}/knowledge/${spaceName}/document/list`,
|
||||||
{
|
{
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json'
|
||||||
},
|
},
|
||||||
body: JSON.stringify({})
|
body: JSON.stringify({
|
||||||
|
page: 1,
|
||||||
|
page_size
|
||||||
|
})
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
if (data.success) {
|
if (data.success) {
|
||||||
setDocuments(data.data)
|
setDocuments(data.data.data)
|
||||||
|
setTotal(data.data.total)
|
||||||
|
setCurrent(data.data.page)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
fetchDocuments()
|
fetchDocuments()
|
||||||
@ -113,89 +125,154 @@ const Documents = () => {
|
|||||||
+ Add Datasource
|
+ Add Datasource
|
||||||
</Button>
|
</Button>
|
||||||
</Sheet>
|
</Sheet>
|
||||||
<Table color="neutral" stripe="odd" variant="outlined">
|
{documents.length ? (
|
||||||
<thead>
|
<>
|
||||||
<tr>
|
<Table
|
||||||
<th>Name</th>
|
color="info"
|
||||||
<th>Type</th>
|
variant="soft"
|
||||||
<th>Size</th>
|
size="lg"
|
||||||
<th>Last Synch</th>
|
sx={{
|
||||||
<th>Status</th>
|
'& tbody tr: hover': {
|
||||||
<th>Operation</th>
|
backgroundColor:
|
||||||
</tr>
|
mode === 'light' ? 'rgb(246, 246, 246)' : 'rgb(33, 33, 40)'
|
||||||
</thead>
|
},
|
||||||
<tbody>
|
'& tbody tr: hover a': {
|
||||||
{documents.map((row: any) => (
|
textDecoration: 'underline'
|
||||||
<tr key={row.id}>
|
}
|
||||||
<td>{row.doc_name}</td>
|
}}
|
||||||
<td>{row.doc_type}</td>
|
>
|
||||||
<td>{row.chunk_size}</td>
|
<thead>
|
||||||
<td>{moment(row.last_sync).format('YYYY-MM-DD HH:MM:SS')}</td>
|
<tr>
|
||||||
<td>
|
<th>Name</th>
|
||||||
<Chip
|
<th>Type</th>
|
||||||
color={(function () {
|
<th>Size</th>
|
||||||
switch (row.status) {
|
<th>Last Synch</th>
|
||||||
case 'TODO':
|
<th>Status</th>
|
||||||
return 'neutral'
|
<th>Operation</th>
|
||||||
case 'RUNNING':
|
</tr>
|
||||||
return 'primary'
|
</thead>
|
||||||
case 'FINISHED':
|
<tbody>
|
||||||
return 'success'
|
{documents.map((row: any) => (
|
||||||
case 'FAILED':
|
<tr key={row.id}>
|
||||||
return 'danger'
|
<td>{row.doc_name}</td>
|
||||||
}
|
<td>
|
||||||
})()}
|
<Chip
|
||||||
>
|
variant="soft"
|
||||||
{row.status}
|
color="neutral"
|
||||||
</Chip>
|
sx={{ fontWeight: 300 }}
|
||||||
</td>
|
>
|
||||||
<td>
|
{row.doc_type}
|
||||||
{
|
</Chip>
|
||||||
<>
|
</td>
|
||||||
<Button
|
<td>{row.chunk_size} chunks</td>
|
||||||
variant="outlined"
|
<td>{moment(row.last_sync).format('YYYY-MM-DD HH:MM:SS')}</td>
|
||||||
size="sm"
|
<td>
|
||||||
onClick={async () => {
|
<Chip
|
||||||
const res = await fetch(
|
sx={{ fontWeight: 300 }}
|
||||||
`http://localhost:8000/knowledge/${spaceName}/document/sync`,
|
variant="soft"
|
||||||
{
|
color={(function () {
|
||||||
method: 'POST',
|
switch (row.status) {
|
||||||
headers: {
|
case 'TODO':
|
||||||
'Content-Type': 'application/json'
|
return 'neutral'
|
||||||
},
|
case 'RUNNING':
|
||||||
body: JSON.stringify({
|
return 'primary'
|
||||||
doc_ids: [row.id]
|
case 'FINISHED':
|
||||||
})
|
return 'success'
|
||||||
}
|
case 'FAILED':
|
||||||
)
|
return 'danger'
|
||||||
const data = await res.json()
|
|
||||||
if (data.success) {
|
|
||||||
message.success('success')
|
|
||||||
} else {
|
|
||||||
message.error(data.err_msg || 'failed')
|
|
||||||
}
|
}
|
||||||
}}
|
})()}
|
||||||
>
|
>
|
||||||
Synch
|
{row.status}
|
||||||
</Button>
|
</Chip>
|
||||||
<Button
|
</td>
|
||||||
variant="outlined"
|
<td>
|
||||||
size="sm"
|
{
|
||||||
onClick={() => {
|
<>
|
||||||
router.push(
|
<Button
|
||||||
`/datastores/documents/chunklist?spacename=${spaceName}&documentid=${row.id}`
|
variant="outlined"
|
||||||
)
|
size="sm"
|
||||||
}}
|
onClick={async () => {
|
||||||
>
|
const res = await fetch(
|
||||||
Detail of Chunks
|
`${fetchBaseURL}/knowledge/${spaceName}/document/sync`,
|
||||||
</Button>
|
{
|
||||||
</>
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
doc_ids: [row.id]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
)
|
||||||
|
const data = await res.json()
|
||||||
|
if (data.success) {
|
||||||
|
message.success('success')
|
||||||
|
} else {
|
||||||
|
message.error(data.err_msg || 'failed')
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Synch
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
router.push(
|
||||||
|
`/datastores/documents/chunklist?spacename=${spaceName}&documentid=${row.id}`
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Detail of Chunks
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
</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}/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)
|
||||||
}
|
}
|
||||||
</td>
|
}}
|
||||||
</tr>
|
hideOnSinglePage
|
||||||
))}
|
/>
|
||||||
</tbody>
|
</Stack>
|
||||||
</Table>
|
</>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
<Modal
|
<Modal
|
||||||
sx={{
|
sx={{
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
@ -296,9 +373,9 @@ const Documents = () => {
|
|||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
Source:
|
Text Source(Optional):
|
||||||
<Input
|
<Input
|
||||||
placeholder="Please input the source"
|
placeholder="Please input the text source"
|
||||||
onChange={(e: any) => setTextSource(e.target.value)}
|
onChange={(e: any) => setTextSource(e.target.value)}
|
||||||
sx={{ marginBottom: '20px' }}
|
sx={{ marginBottom: '20px' }}
|
||||||
/>
|
/>
|
||||||
@ -323,7 +400,7 @@ const Documents = () => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
const res = await fetch(
|
const res = await fetch(
|
||||||
`http://localhost:8000/knowledge/${spaceName}/document/add`,
|
`${fetchBaseURL}/knowledge/${spaceName}/document/add`,
|
||||||
{
|
{
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
@ -341,18 +418,23 @@ const Documents = () => {
|
|||||||
message.success('success')
|
message.success('success')
|
||||||
setIsAddDocumentModalShow(false)
|
setIsAddDocumentModalShow(false)
|
||||||
const res = await fetch(
|
const res = await fetch(
|
||||||
`http://localhost:8000/knowledge/${spaceName}/document/list`,
|
`${fetchBaseURL}/knowledge/${spaceName}/document/list`,
|
||||||
{
|
{
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json'
|
||||||
},
|
},
|
||||||
body: JSON.stringify({})
|
body: JSON.stringify({
|
||||||
|
page: current,
|
||||||
|
page_size
|
||||||
|
})
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
if (data.success) {
|
if (data.success) {
|
||||||
setDocuments(data.data)
|
setDocuments(data.data.data)
|
||||||
|
setTotal(data.data.total)
|
||||||
|
setCurrent(data.data.page)
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
message.error(data.err_msg || 'failed')
|
message.error(data.err_msg || 'failed')
|
||||||
@ -362,12 +444,12 @@ const Documents = () => {
|
|||||||
message.error('Please select a file')
|
message.error('Please select a file')
|
||||||
return
|
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(
|
const res = await fetch(
|
||||||
`http://localhost:8000/knowledge/${spaceName}/document/upload`,
|
`${fetchBaseURL}/knowledge/${spaceName}/document/upload`,
|
||||||
{
|
{
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
body: formData
|
body: formData
|
||||||
@ -378,33 +460,34 @@ const Documents = () => {
|
|||||||
message.success('success')
|
message.success('success')
|
||||||
setIsAddDocumentModalShow(false)
|
setIsAddDocumentModalShow(false)
|
||||||
const res = await fetch(
|
const res = await fetch(
|
||||||
`http://localhost:8000/knowledge/${spaceName}/document/list`,
|
`${fetchBaseURL}/knowledge/${spaceName}/document/list`,
|
||||||
{
|
{
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json'
|
||||||
},
|
},
|
||||||
body: JSON.stringify({})
|
body: JSON.stringify({
|
||||||
|
page: current,
|
||||||
|
page_size
|
||||||
|
})
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
if (data.success) {
|
if (data.success) {
|
||||||
setDocuments(data.data)
|
setDocuments(data.data.data)
|
||||||
|
setTotal(data.data.total)
|
||||||
|
setCurrent(data.data.page)
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
message.error(data.err_msg || 'failed')
|
message.error(data.err_msg || 'failed')
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (textSource === '') {
|
|
||||||
message.error('Please input the source')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (text === '') {
|
if (text === '') {
|
||||||
message.error('Please input the text')
|
message.error('Please input the text')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const res = await fetch(
|
const res = await fetch(
|
||||||
`http://localhost:8000/knowledge/${spaceName}/document/add`,
|
`${fetchBaseURL}/knowledge/${spaceName}/document/add`,
|
||||||
{
|
{
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
@ -423,18 +506,23 @@ const Documents = () => {
|
|||||||
message.success('success')
|
message.success('success')
|
||||||
setIsAddDocumentModalShow(false)
|
setIsAddDocumentModalShow(false)
|
||||||
const res = await fetch(
|
const res = await fetch(
|
||||||
`http://localhost:8000/knowledge/${spaceName}/document/list`,
|
`${fetchBaseURL}/knowledge/${spaceName}/document/list`,
|
||||||
{
|
{
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json'
|
||||||
},
|
},
|
||||||
body: JSON.stringify({})
|
body: JSON.stringify({
|
||||||
|
page: current,
|
||||||
|
page_size
|
||||||
|
})
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
if (data.success) {
|
if (data.success) {
|
||||||
setDocuments(data.data)
|
setDocuments(data.data.data)
|
||||||
|
setTotal(data.data.total)
|
||||||
|
setCurrent(data.data.page)
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
message.error(data.err_msg || 'failed')
|
message.error(data.err_msg || 'failed')
|
||||||
|
@ -6,6 +6,7 @@ import { InboxOutlined } from '@ant-design/icons'
|
|||||||
import type { UploadProps } from 'antd'
|
import type { UploadProps } from 'antd'
|
||||||
import { message, Upload } from 'antd'
|
import { message, Upload } from 'antd'
|
||||||
import {
|
import {
|
||||||
|
useColorScheme,
|
||||||
Modal,
|
Modal,
|
||||||
Button,
|
Button,
|
||||||
Table,
|
Table,
|
||||||
@ -14,8 +15,10 @@ import {
|
|||||||
Box,
|
Box,
|
||||||
Input,
|
Input,
|
||||||
Textarea,
|
Textarea,
|
||||||
|
Chip,
|
||||||
styled
|
styled
|
||||||
} from '@/lib/mui'
|
} from '@/lib/mui'
|
||||||
|
import { fetchBaseURL } from '@/app/datastores/constants'
|
||||||
|
|
||||||
const { Dragger } = Upload
|
const { Dragger } = Upload
|
||||||
|
|
||||||
@ -39,22 +42,24 @@ const documentTypeList = [
|
|||||||
{
|
{
|
||||||
type: 'text',
|
type: 'text',
|
||||||
title: 'Text',
|
title: 'Text',
|
||||||
subTitle: 'Paste some text'
|
subTitle: 'Fill your raw text'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'webPage',
|
type: 'webPage',
|
||||||
title: 'Web Page',
|
title: 'URL',
|
||||||
subTitle: 'Crawl text from a web page'
|
subTitle: 'Fetch the content of a URL'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'file',
|
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 Index = () => {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
const { mode } = useColorScheme()
|
||||||
const [activeStep, setActiveStep] = useState<number>(0)
|
const [activeStep, setActiveStep] = useState<number>(0)
|
||||||
const [documentType, setDocumentType] = useState<string>('')
|
const [documentType, setDocumentType] = useState<string>('')
|
||||||
const [knowledgeSpaceList, setKnowledgeSpaceList] = useState<any>([])
|
const [knowledgeSpaceList, setKnowledgeSpaceList] = useState<any>([])
|
||||||
@ -63,8 +68,8 @@ const Index = () => {
|
|||||||
const [knowledgeSpaceName, setKnowledgeSpaceName] = useState<string>('')
|
const [knowledgeSpaceName, setKnowledgeSpaceName] = useState<string>('')
|
||||||
const [webPageUrl, setWebPageUrl] = useState<string>('')
|
const [webPageUrl, setWebPageUrl] = useState<string>('')
|
||||||
const [documentName, setDocumentName] = useState<any>('')
|
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 [originFileObj, setOriginFileObj] = useState<any>(null)
|
||||||
const props: UploadProps = {
|
const props: UploadProps = {
|
||||||
name: 'file',
|
name: 'file',
|
||||||
@ -82,7 +87,7 @@ const Index = () => {
|
|||||||
}
|
}
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function fetchData() {
|
async function fetchData() {
|
||||||
const res = await fetch('http://localhost:8000/knowledge/space/list', {
|
const res = await fetch(`${fetchBaseURL}/knowledge/space/list`, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json'
|
||||||
@ -121,35 +126,69 @@ const Index = () => {
|
|||||||
</Button>
|
</Button>
|
||||||
</Sheet>
|
</Sheet>
|
||||||
<div className="page-body p-4">
|
<div className="page-body p-4">
|
||||||
<Table color="neutral" stripe="odd" variant="outlined">
|
{knowledgeSpaceList.length ? (
|
||||||
<thead>
|
<Table
|
||||||
<tr>
|
color="info"
|
||||||
<th>Name</th>
|
variant="soft"
|
||||||
<th>Provider</th>
|
size="lg"
|
||||||
<th>Owner</th>
|
sx={{
|
||||||
</tr>
|
'& tbody tr: hover': {
|
||||||
</thead>
|
backgroundColor:
|
||||||
<tbody>
|
mode === 'light' ? 'rgb(246, 246, 246)' : 'rgb(33, 33, 40)'
|
||||||
{knowledgeSpaceList.map((row: any) => (
|
},
|
||||||
<tr key={row.id}>
|
'& tbody tr: hover a': {
|
||||||
<td>
|
textDecoration: 'underline'
|
||||||
{
|
}
|
||||||
<a
|
}}
|
||||||
href="javascript:;"
|
>
|
||||||
onClick={() =>
|
<thead>
|
||||||
router.push(`/datastores/documents?name=${row.name}`)
|
<tr>
|
||||||
}
|
<th>Name</th>
|
||||||
>
|
<th>Vector</th>
|
||||||
{row.name}
|
<th>Owner</th>
|
||||||
</a>
|
|
||||||
}
|
|
||||||
</td>
|
|
||||||
<td>{row.vector_type}</td>
|
|
||||||
<td>{row.owner}</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
</thead>
|
||||||
</tbody>
|
<tbody>
|
||||||
</Table>
|
{knowledgeSpaceList.map((row: any) => (
|
||||||
|
<tr key={row.id}>
|
||||||
|
<td>
|
||||||
|
{
|
||||||
|
<a
|
||||||
|
style={{ fontWeight: 'bold' }}
|
||||||
|
href="javascript:;"
|
||||||
|
onClick={() =>
|
||||||
|
router.push(`/datastores/documents?name=${row.name}`)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{row.name}
|
||||||
|
</a>
|
||||||
|
}
|
||||||
|
</td>
|
||||||
|
<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>
|
</div>
|
||||||
<Modal
|
<Modal
|
||||||
sx={{
|
sx={{
|
||||||
@ -198,27 +237,24 @@ const Index = () => {
|
|||||||
message.error('please input the name')
|
message.error('please input the name')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const res = await fetch(
|
const res = await fetch(`${fetchBaseURL}/knowledge/space/add`, {
|
||||||
'http://localhost:8000/knowledge/space/add',
|
method: 'POST',
|
||||||
{
|
headers: {
|
||||||
method: 'POST',
|
'Content-Type': 'application/json'
|
||||||
headers: {
|
},
|
||||||
'Content-Type': 'application/json'
|
body: JSON.stringify({
|
||||||
},
|
name: knowledgeSpaceName,
|
||||||
body: JSON.stringify({
|
vector_type: 'Chroma',
|
||||||
name: knowledgeSpaceName,
|
owner: 'keting',
|
||||||
vector_type: 'Chroma',
|
desc: 'test1'
|
||||||
owner: 'keting',
|
})
|
||||||
desc: 'test1'
|
})
|
||||||
})
|
|
||||||
}
|
|
||||||
)
|
|
||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
if (data.success) {
|
if (data.success) {
|
||||||
message.success('success')
|
message.success('success')
|
||||||
setActiveStep(1)
|
setActiveStep(1)
|
||||||
const res = await fetch(
|
const res = await fetch(
|
||||||
'http://localhost:8000/knowledge/space/list',
|
`${fetchBaseURL}/knowledge/space/list`,
|
||||||
{
|
{
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
@ -308,9 +344,9 @@ const Index = () => {
|
|||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
Source:
|
Text Source(Optional):
|
||||||
<Input
|
<Input
|
||||||
placeholder="Please input the source"
|
placeholder="Please input the text source"
|
||||||
onChange={(e: any) => setTextSource(e.target.value)}
|
onChange={(e: any) => setTextSource(e.target.value)}
|
||||||
sx={{ marginBottom: '20px' }}
|
sx={{ marginBottom: '20px' }}
|
||||||
/>
|
/>
|
||||||
@ -335,7 +371,7 @@ const Index = () => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
const res = await fetch(
|
const res = await fetch(
|
||||||
`http://localhost:8000/knowledge/${knowledgeSpaceName}/document/add`,
|
`${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/add`,
|
||||||
{
|
{
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
@ -360,12 +396,12 @@ const Index = () => {
|
|||||||
message.error('Please select a file')
|
message.error('Please select a file')
|
||||||
return
|
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(
|
const res = await fetch(
|
||||||
`http://localhost:8000/knowledge/${knowledgeSpaceName}/document/upload`,
|
`${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/upload`,
|
||||||
{
|
{
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
body: formData
|
body: formData
|
||||||
@ -379,16 +415,12 @@ const Index = () => {
|
|||||||
message.error(data.err_msg || 'failed')
|
message.error(data.err_msg || 'failed')
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (textSource === '') {
|
|
||||||
message.error('Please input the source')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (text === '') {
|
if (text === '') {
|
||||||
message.error('Please input the text')
|
message.error('Please input the text')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const res = await fetch(
|
const res = await fetch(
|
||||||
`http://localhost:8000/knowledge/${knowledgeSpaceName}/document/add`,
|
`${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/add`,
|
||||||
{
|
{
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
|
@ -37,4 +37,19 @@ tr:hover {
|
|||||||
|
|
||||||
html body .ant-btn-primary {
|
html body .ant-btn-primary {
|
||||||
background-color: #1677ff;
|
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;
|
||||||
}
|
}
|
@ -2,11 +2,9 @@
|
|||||||
import React, { useEffect, useMemo } from 'react';
|
import React, { useEffect, useMemo } from 'react';
|
||||||
import { usePathname, useRouter } from 'next/navigation';
|
import { usePathname, useRouter } from 'next/navigation';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import Image from 'next/image';
|
|
||||||
import { Popconfirm } from 'antd';
|
import { Popconfirm } from 'antd';
|
||||||
import { Box, List, ListItem, ListItemButton, ListItemDecorator, ListItemContent, Typography, Button, useColorScheme, IconButton } from '@/lib/mui';
|
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 DarkModeIcon from '@mui/icons-material/DarkMode';
|
||||||
import WbSunnyIcon from '@mui/icons-material/WbSunny';
|
import WbSunnyIcon from '@mui/icons-material/WbSunny';
|
||||||
import MenuIcon from '@mui/icons-material/Menu';
|
import MenuIcon from '@mui/icons-material/Menu';
|
||||||
@ -23,14 +21,9 @@ const LeftSider = () => {
|
|||||||
|
|
||||||
const menus = useMemo(() => {
|
const menus = useMemo(() => {
|
||||||
return [{
|
return [{
|
||||||
label: 'Agents',
|
label: 'Knowledge Space',
|
||||||
icon: <SmartToyRoundedIcon fontSize="small" />,
|
|
||||||
route: '/agents',
|
|
||||||
active: pathname === '/agents',
|
|
||||||
}, {
|
|
||||||
label: 'Datastores',
|
|
||||||
route: '/datastores',
|
route: '/datastores',
|
||||||
icon: <StorageRoundedIcon fontSize="small" />,
|
icon: <Article fontSize="small" />,
|
||||||
active: pathname === '/datastores'
|
active: pathname === '/datastores'
|
||||||
}];
|
}];
|
||||||
}, [pathname]);
|
}, [pathname]);
|
||||||
@ -85,13 +78,6 @@ const LeftSider = () => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className='flex items-center gap-3'>
|
<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">
|
<Typography component="h1" fontWeight="xl">
|
||||||
DB-GPT
|
DB-GPT
|
||||||
</Typography>
|
</Typography>
|
||||||
|
Binary file not shown.
Before Width: | Height: | Size: 115 KiB |
Loading…
Reference in New Issue
Block a user