mirror of
https://github.com/csunny/DB-GPT.git
synced 2025-08-23 10:33:46 +00:00
Merge branch 'new-page-framework' of https://github.com/csunny/DB-GPT into new-page-framework
This commit is contained in:
changhuiping.chp
commit
468807cc9b
@ -1,12 +1,20 @@
|
||||
'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'
|
||||
const page_size = 20
|
||||
|
||||
const ChunkList = () => {
|
||||
const router = useRouter()
|
||||
const { mode } = useColorScheme()
|
||||
const spaceName = useSearchParams().get('spacename')
|
||||
const documentId = useSearchParams().get('documentid')
|
||||
@ -39,12 +47,45 @@ const ChunkList = () => {
|
||||
fetchChunks()
|
||||
}, [])
|
||||
return (
|
||||
<div className="p-4">
|
||||
<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"
|
||||
>
|
||||
Knowledge Space
|
||||
</Link>
|
||||
<Link
|
||||
onClick={() => {
|
||||
router.push(`/datastores/documents?name=${spaceName}`)
|
||||
}}
|
||||
key="Knowledge Space"
|
||||
underline="hover"
|
||||
color="neutral"
|
||||
fontSize="inherit"
|
||||
>
|
||||
Documents
|
||||
</Link>
|
||||
<Typography fontSize="inherit">Chunks</Typography>
|
||||
</Breadcrumbs>
|
||||
</Stack>
|
||||
<div className="p-4">
|
||||
{chunkList.length ? (
|
||||
<>
|
||||
<Table
|
||||
color="info"
|
||||
variant="soft"
|
||||
color="primary"
|
||||
variant="plain"
|
||||
size="lg"
|
||||
sx={{
|
||||
'& tbody tr: hover': {
|
||||
@ -79,7 +120,11 @@ const ChunkList = () => {
|
||||
<td>
|
||||
{
|
||||
<Popover
|
||||
content={JSON.stringify(row.meta_info || '{}', null, 2)}
|
||||
content={JSON.stringify(
|
||||
row.meta_info || '{}',
|
||||
null,
|
||||
2
|
||||
)}
|
||||
trigger="hover"
|
||||
>
|
||||
{row.meta_info.length > 10
|
||||
@ -134,6 +179,7 @@ const ChunkList = () => {
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -13,12 +13,18 @@ import {
|
||||
Input,
|
||||
Textarea,
|
||||
Chip,
|
||||
Switch,
|
||||
Typography,
|
||||
Breadcrumbs,
|
||||
Link,
|
||||
styled
|
||||
} from '@/lib/mui'
|
||||
import moment from 'moment'
|
||||
import { InboxOutlined } from '@ant-design/icons'
|
||||
import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
|
||||
import CachedIcon from '@mui/icons-material/Cached';
|
||||
import type { UploadProps } from 'antd'
|
||||
import { Upload, Pagination, message } from 'antd'
|
||||
import { Upload, Pagination, Popover, message } from 'antd'
|
||||
|
||||
const { Dragger } = Upload
|
||||
const Item = styled(Sheet)(({ theme }) => ({
|
||||
@ -71,6 +77,7 @@ const Documents = () => {
|
||||
const [originFileObj, setOriginFileObj] = useState<any>(null)
|
||||
const [total, setTotal] = useState<number>(0)
|
||||
const [current, setCurrent] = useState<number>(0)
|
||||
const [synchChecked, setSynchChecked] = useState<boolean>(true)
|
||||
const props: UploadProps = {
|
||||
name: 'file',
|
||||
multiple: false,
|
||||
@ -111,24 +118,38 @@ 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)}
|
||||
>
|
||||
+ Add Datasource
|
||||
</Button>
|
||||
</Sheet>
|
||||
</Stack>
|
||||
{documents.length ? (
|
||||
<>
|
||||
<Table
|
||||
color="info"
|
||||
variant="soft"
|
||||
color="primary"
|
||||
variant="plain"
|
||||
size="lg"
|
||||
sx={{
|
||||
'& tbody tr: hover': {
|
||||
@ -147,6 +168,7 @@ const Documents = () => {
|
||||
<th>Size</th>
|
||||
<th>Last Synch</th>
|
||||
<th>Status</th>
|
||||
<th>Result</th>
|
||||
<th>Operation</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -155,11 +177,7 @@ const Documents = () => {
|
||||
<tr key={row.id}>
|
||||
<td>{row.doc_name}</td>
|
||||
<td>
|
||||
<Chip
|
||||
variant="soft"
|
||||
color="neutral"
|
||||
sx={{ fontWeight: 300 }}
|
||||
>
|
||||
<Chip variant="solid" color="neutral" sx={{ opacity: 0.5 }}>
|
||||
{row.doc_type}
|
||||
</Chip>
|
||||
</td>
|
||||
@ -167,8 +185,8 @@ const Documents = () => {
|
||||
<td>{moment(row.last_sync).format('YYYY-MM-DD HH:MM:SS')}</td>
|
||||
<td>
|
||||
<Chip
|
||||
sx={{ fontWeight: 300 }}
|
||||
variant="soft"
|
||||
sx={{ opacity: 0.5 }}
|
||||
variant="solid"
|
||||
color={(function () {
|
||||
switch (row.status) {
|
||||
case 'TODO':
|
||||
@ -185,12 +203,46 @@ const Documents = () => {
|
||||
{row.status}
|
||||
</Chip>
|
||||
</td>
|
||||
<td>
|
||||
{(function () {
|
||||
if (row.status === 'TODO' || row.status === 'RUNNING') {
|
||||
return ''
|
||||
} else if (row.status === 'FINISHED') {
|
||||
return (
|
||||
<Popover content={row.result} trigger="hover">
|
||||
<Chip
|
||||
variant="solid"
|
||||
color="success"
|
||||
sx={{ opacity: 0.5 }}
|
||||
>
|
||||
SUCCESS
|
||||
</Chip>
|
||||
</Popover>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<Popover content={row.result} trigger="hover">
|
||||
<Chip
|
||||
variant="solid"
|
||||
color="danger"
|
||||
sx={{ opacity: 0.5 }}
|
||||
>
|
||||
FAILED
|
||||
</Chip>
|
||||
</Popover>
|
||||
)
|
||||
}
|
||||
})()}
|
||||
</td>
|
||||
<td>
|
||||
{
|
||||
<>
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="sm"
|
||||
sx={{
|
||||
marginRight: '20px'
|
||||
}}
|
||||
onClick={async () => {
|
||||
const res = await fetch(
|
||||
`${process.env.API_BASE_URL}/knowledge/${spaceName}/document/sync`,
|
||||
@ -212,7 +264,7 @@ const Documents = () => {
|
||||
}
|
||||
}}
|
||||
>
|
||||
Synch
|
||||
Synch<CachedIcon />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
@ -223,7 +275,7 @@ const Documents = () => {
|
||||
)
|
||||
}}
|
||||
>
|
||||
Detail of Chunks
|
||||
Details
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
@ -296,9 +348,13 @@ const Documents = () => {
|
||||
{stepsOfAddingDocument.map((item: any, index: number) => (
|
||||
<Item
|
||||
key={item}
|
||||
sx={{ fontWeight: activeStep === index ? 'bold' : '' }}
|
||||
sx={{
|
||||
fontWeight: activeStep === index ? 'bold' : '',
|
||||
color: activeStep === index ? '#814DDE' : ''
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
{index < activeStep ? <CheckCircleOutlinedIcon /> : `${index + 1}.`}
|
||||
{`${item}`}
|
||||
</Item>
|
||||
))}
|
||||
</Stack>
|
||||
@ -386,8 +442,38 @@ const Documents = () => {
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<Typography
|
||||
component="label"
|
||||
sx={{
|
||||
marginTop: '20px'
|
||||
}}
|
||||
endDecorator={
|
||||
<Switch
|
||||
checked={synchChecked}
|
||||
onChange={(event: any) =>
|
||||
setSynchChecked(event.target.checked)
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
Synch:
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="flex-start"
|
||||
alignItems="center"
|
||||
sx={{ marginBottom: '20px' }}
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{ marginRight: '20px' }}
|
||||
onClick={() => setActiveStep(0)}
|
||||
>
|
||||
{'< Back'}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={async () => {
|
||||
if (documentName === '') {
|
||||
message.error('Please input the name')
|
||||
@ -413,6 +499,20 @@ const Documents = () => {
|
||||
}
|
||||
)
|
||||
const data = await res.json()
|
||||
data.success &&
|
||||
synchChecked &&
|
||||
fetch(
|
||||
`${process.env.API_BASE_URL}/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)
|
||||
@ -455,6 +555,20 @@ const Documents = () => {
|
||||
}
|
||||
)
|
||||
const data = await res.json()
|
||||
data.success &&
|
||||
synchChecked &&
|
||||
fetch(
|
||||
`${process.env.API_BASE_URL}/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)
|
||||
@ -501,6 +615,20 @@ const Documents = () => {
|
||||
}
|
||||
)
|
||||
const data = await res.json()
|
||||
data.success &&
|
||||
synchChecked &&
|
||||
fetch(
|
||||
`${process.env.API_BASE_URL}/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)
|
||||
@ -531,6 +659,7 @@ const Documents = () => {
|
||||
>
|
||||
Finish
|
||||
</Button>
|
||||
</Stack>
|
||||
</>
|
||||
)}
|
||||
</Sheet>
|
||||
|
||||
@ -3,8 +3,9 @@
|
||||
import { useRouter } from 'next/navigation'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { InboxOutlined } from '@ant-design/icons'
|
||||
import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
|
||||
import type { UploadProps } from 'antd'
|
||||
import { message, Upload } from 'antd'
|
||||
import { message, Upload, Popover } from 'antd'
|
||||
import {
|
||||
useColorScheme,
|
||||
Modal,
|
||||
@ -16,6 +17,8 @@ import {
|
||||
Input,
|
||||
Textarea,
|
||||
Chip,
|
||||
Switch,
|
||||
Typography,
|
||||
styled
|
||||
} from '@/lib/mui'
|
||||
|
||||
@ -33,7 +36,7 @@ const Item = styled(Sheet)(({ theme }) => ({
|
||||
}))
|
||||
|
||||
const stepsOfAddingSpace = [
|
||||
'Knowledge Space Configuration',
|
||||
'Knowledge Space Config',
|
||||
'Choose a Datasource type',
|
||||
'Setup the Datasource'
|
||||
]
|
||||
@ -70,6 +73,7 @@ const Index = () => {
|
||||
const [textSource, setTextSource] = useState<string>('')
|
||||
const [text, setText] = useState<string>('')
|
||||
const [originFileObj, setOriginFileObj] = useState<any>(null)
|
||||
const [synchChecked, setSynchChecked] = useState<boolean>(true)
|
||||
const props: UploadProps = {
|
||||
name: 'file',
|
||||
multiple: false,
|
||||
@ -127,8 +131,8 @@ const Index = () => {
|
||||
<div className="page-body p-4">
|
||||
{knowledgeSpaceList.length ? (
|
||||
<Table
|
||||
color="info"
|
||||
variant="soft"
|
||||
color="primary"
|
||||
variant="plain"
|
||||
size="lg"
|
||||
sx={{
|
||||
'& tbody tr: hover': {
|
||||
@ -137,6 +141,9 @@ const Index = () => {
|
||||
},
|
||||
'& tbody tr: hover a': {
|
||||
textDecoration: 'underline'
|
||||
},
|
||||
'& tbody tr a': {
|
||||
color: 'rgb(13, 96, 217)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
@ -145,6 +152,7 @@ const Index = () => {
|
||||
<th>Name</th>
|
||||
<th>Vector</th>
|
||||
<th>Owner</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -164,23 +172,22 @@ const Index = () => {
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
<Chip
|
||||
variant="soft"
|
||||
color="neutral"
|
||||
sx={{ fontWeight: 300 }}
|
||||
>
|
||||
<Chip variant="solid" color="neutral" sx={{ opacity: 0.5 }}>
|
||||
{row.vector_type}
|
||||
</Chip>
|
||||
</td>
|
||||
<td>
|
||||
<Chip
|
||||
variant="soft"
|
||||
color="neutral"
|
||||
sx={{ fontWeight: 300 }}
|
||||
>
|
||||
<Chip variant="solid" color="neutral" sx={{ opacity: 0.5 }}>
|
||||
{row.owner}
|
||||
</Chip>
|
||||
</td>
|
||||
<td>
|
||||
<Popover content={row.desc} trigger="hover">
|
||||
{row.desc.length > 10
|
||||
? `${row.desc.slice(0, 10)}...`
|
||||
: row.desc}
|
||||
</Popover>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
@ -213,9 +220,13 @@ const Index = () => {
|
||||
{stepsOfAddingSpace.map((item: any, index: number) => (
|
||||
<Item
|
||||
key={item}
|
||||
sx={{ fontWeight: activeStep === index ? 'bold' : '' }}
|
||||
sx={{
|
||||
fontWeight: activeStep === index ? 'bold' : '',
|
||||
color: activeStep === index ? '#814DDE' : ''
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
{index < activeStep ? <CheckCircleOutlinedIcon /> : `${index + 1}.`}
|
||||
{`${item}`}
|
||||
</Item>
|
||||
))}
|
||||
</Stack>
|
||||
@ -236,7 +247,9 @@ const Index = () => {
|
||||
message.error('please input the name')
|
||||
return
|
||||
}
|
||||
const res = await fetch(`${process.env.API_BASE_URL}/knowledge/space/add`, {
|
||||
const res = await fetch(
|
||||
`${process.env.API_BASE_URL}/knowledge/space/add`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
@ -247,7 +260,8 @@ const Index = () => {
|
||||
owner: 'keting',
|
||||
desc: 'test1'
|
||||
})
|
||||
})
|
||||
}
|
||||
)
|
||||
const data = await res.json()
|
||||
if (data.success) {
|
||||
message.success('success')
|
||||
@ -357,8 +371,38 @@ const Index = () => {
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<Typography
|
||||
component="label"
|
||||
sx={{
|
||||
marginTop: '20px'
|
||||
}}
|
||||
endDecorator={
|
||||
<Switch
|
||||
checked={synchChecked}
|
||||
onChange={(event: any) =>
|
||||
setSynchChecked(event.target.checked)
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
Synch:
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="flex-start"
|
||||
alignItems="center"
|
||||
sx={{ marginBottom: '20px' }}
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{ marginRight: '20px' }}
|
||||
onClick={() => setActiveStep(1)}
|
||||
>
|
||||
{'< Back'}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={async () => {
|
||||
if (documentName === '') {
|
||||
message.error('Please input the name')
|
||||
@ -387,6 +431,19 @@ const Index = () => {
|
||||
if (data.success) {
|
||||
message.success('success')
|
||||
setIsAddKnowledgeSpaceModalShow(false)
|
||||
synchChecked &&
|
||||
fetch(
|
||||
`${process.env.API_BASE_URL}/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')
|
||||
}
|
||||
@ -410,6 +467,19 @@ const Index = () => {
|
||||
if (data.success) {
|
||||
message.success('success')
|
||||
setIsAddKnowledgeSpaceModalShow(false)
|
||||
synchChecked &&
|
||||
fetch(
|
||||
`${process.env.API_BASE_URL}/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')
|
||||
}
|
||||
@ -437,6 +507,19 @@ const Index = () => {
|
||||
if (data.success) {
|
||||
message.success('success')
|
||||
setIsAddKnowledgeSpaceModalShow(false)
|
||||
synchChecked &&
|
||||
fetch(
|
||||
`${process.env.API_BASE_URL}/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')
|
||||
}
|
||||
@ -445,6 +528,7 @@ const Index = () => {
|
||||
>
|
||||
Finish
|
||||
</Button>
|
||||
</Stack>
|
||||
</>
|
||||
)}
|
||||
</Sheet>
|
||||
|
||||
@ -12,28 +12,6 @@ body {
|
||||
background-color: var(--joy-palette-background-body);
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid #ddd;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
tr:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
body .ant-btn-primary {
|
||||
background-color: #1677ff;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user