diff --git a/datacenter/app/datastores/documents/chunklist/page.tsx b/datacenter/app/datastores/documents/chunklist/page.tsx index 9cd701ff9..42c9da062 100644 --- a/datacenter/app/datastores/documents/chunklist/page.tsx +++ b/datacenter/app/datastores/documents/chunklist/page.tsx @@ -1,65 +1,76 @@ -"use client"; +'use client' import { useSearchParams } from 'next/navigation' -import React, { useState, useEffect } from 'react'; -import { Table, Popover } from 'antd'; -import moment from 'moment'; +import React, { useState, useEffect } from 'react' +import { Table } from '@/lib/mui' +import { Popover } from 'antd' const ChunkList = () => { - const spaceName = useSearchParams().get('spacename'); - const documentId = useSearchParams().get('documentid'); - const [chunkList, setChunkList] = useState([]); - useEffect(() => { - async function fetchChunks() { - const res = await fetch(`http://localhost:8000/knowledge/${spaceName}/chunk/list`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - document_id: documentId - }), - }); - const data = await res.json(); - if (data.success) { - setChunkList(data.data); - } + const spaceName = useSearchParams().get('spacename') + const documentId = useSearchParams().get('documentid') + const [chunkList, setChunkList] = useState([]) + useEffect(() => { + async function fetchChunks() { + const res = await fetch( + `http://localhost:8000/knowledge/${spaceName}/chunk/list`, + { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + document_id: documentId + }) } - fetchChunks(); - }, []); - return ( -
- { - return {text.length < 10 ? `${text.slice(0, 10)}...` : text}; - } - }, - { - title: 'Meta Data', - dataIndex: 'meta_info', - key: 'meta_info', - align: 'center', - render: (text: string, label: any) => { - return {text.length < 10 ? `${text.slice(0, 10)}...` : text}; - } - }, - ]} - dataSource={chunkList} - /> - - ) + ) + const data = await res.json() + if (data.success) { + setChunkList(data.data) + } + } + fetchChunks() + }, []) + return ( +
+
+ + + + + + + + + {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} + + } +
+
+ ) } -export default ChunkList; \ No newline at end of file +export default ChunkList diff --git a/datacenter/app/datastores/documents/page.tsx b/datacenter/app/datastores/documents/page.tsx index 54bd31d5d..55d8baa26 100644 --- a/datacenter/app/datastores/documents/page.tsx +++ b/datacenter/app/datastores/documents/page.tsx @@ -1,84 +1,74 @@ -"use client"; +'use client' -import Link from 'next/link' import { useRouter, useSearchParams } from 'next/navigation' -import React, { useState, useEffect } from 'react'; -import { Table, Button } from 'antd'; -import moment from 'moment'; +import React, { useState, useEffect } from 'react' +import { Button, Table } from '@/lib/mui' +import moment from 'moment' const Documents = () => { - const router = useRouter(); - const spaceName = useSearchParams().get('name'); - const [documents, setDocuments] = useState([]); - useEffect(() => { - async function fetchDocuments() { - const res = await fetch(`http://localhost:8000/knowledge/${spaceName}/document/list`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({}), - }); - const data = await res.json(); - if (data.success) { - setDocuments(data.data); - } + const router = useRouter() + const spaceName = useSearchParams().get('name') + const [documents, setDocuments] = useState([]) + useEffect(() => { + async function fetchDocuments() { + const res = await fetch( + `http://localhost:8000/knowledge/${spaceName}/document/list`, + { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({}) } - fetchDocuments(); - }, []); - return ( -
- moment(text).format('YYYY-MM-DD HH:MM:SS') - }, - { - title: 'Status', - dataIndex: 'status', - key: 'status', - align: 'center', - }, - { - title: 'Operation', - dataIndex: 'operation', - key: 'operation', - align: 'center', - render: (_: any, label: any) => { - return ( - - ) - } - }, - ]} - dataSource={documents} - /> - - ) + ) + const data = await res.json() + if (data.success) { + setDocuments(data.data) + } + } + fetchDocuments() + }, []) + return ( +
+
+ + + + + + + + + + + + {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} + { + + } +
+
+ ) } -export default Documents; \ No newline at end of file +export default Documents diff --git a/datacenter/app/datastores/page.tsx b/datacenter/app/datastores/page.tsx index aeca11bfe..61ef89b9c 100644 --- a/datacenter/app/datastores/page.tsx +++ b/datacenter/app/datastores/page.tsx @@ -1,233 +1,239 @@ 'use client' import { useRouter } from 'next/navigation' -import type { ProFormInstance } from '@ant-design/pro-components'; +import type { ProFormInstance } from '@ant-design/pro-components' import React, { useState, useRef, useEffect } from 'react' +import { message } from 'antd' import { - ProCard, - ProForm, - ProFormCheckbox, - ProFormDatePicker, - ProFormDateRangePicker, - ProFormSelect, - ProFormText, - ProFormTextArea, - StepsForm -} from '@ant-design/pro-components' -import { Button, Modal, Table, message } from 'antd' + Modal, + Button, + Table, + Sheet, + Stack, + Box, + Input, + styled +} from '@/lib/mui' + +const Item = styled(Sheet)(({ theme }) => ({ + width: '33%', + backgroundColor: + theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + borderRadius: 4, + color: theme.vars.palette.text.secondary +})) + +const stepsOfAddingSpace = [ + 'Knowledge Space Configuration', + 'Choose a Datasource type', + 'Setup the Datasource' +] const Index = () => { - const router = useRouter(); - const formRef = useRef(); - const [knowledgeSpaceList, setKnowledgeSpaceList] = useState([]); + const router = useRouter() + const formRef = useRef() + const [activeStep, setActiveStep] = useState(0) + const [knowledgeSpaceList, setKnowledgeSpaceList] = useState([]) const [isAddKnowledgeSpaceModalShow, setIsAddKnowledgeSpaceModalShow] = - useState(false); - const [knowledgeSpaceName, setKnowledgeSpaceName] = useState(''); - const [webPageUrl, setWebPageUrl] = useState(''); + useState(false) + const [knowledgeSpaceName, setKnowledgeSpaceName] = useState('') + const [webPageUrl, setWebPageUrl] = useState('') useEffect(() => { async function fetchData() { const res = await fetch('http://localhost:8000/knowledge/space/list', { method: 'POST', headers: { - 'Content-Type': 'application/json', + 'Content-Type': 'application/json' }, - body: JSON.stringify({}), - }); - const data = await res.json(); + body: JSON.stringify({}) + }) + const data = await res.json() if (data.success) { - setKnowledgeSpaceList(data.data); + setKnowledgeSpaceList(data.data) } } - fetchData(); - }, []); + fetchData() + }, []) return ( <>
Knowledge Spaces
-
- { - return router.push(`/datastores/documents?name=${text}`)}>{text} - } - }, - { - title: 'Provider', - dataIndex: 'vector_type', - key: 'vector_type', - align: 'center', - }, - { - title: 'Owner', - dataIndex: 'owner', - key: 'owner', - align: 'center', - }, - ]} - dataSource={knowledgeSpaceList} - /> +
+ + + + + + + + + {knowledgeSpaceList.map((row: any) => ( + + + + + + ))} + +
NameProviderOwner
+ { + + router.push(`/datastores/documents?name=${row.name}`) + } + > + {row.name} + + } + {row.vector_type}{row.owner}
console.log('ok')} - onCancel={() => setIsAddKnowledgeSpaceModalShow(false)} + onClose={() => setIsAddKnowledgeSpaceModalShow(false)} > - - - formRef={formRef} - onFinish={async () => { - message.success('success') - }} - formProps={{ - validateMessages: { - required: 'This is required' - } - }} - submitter={{ - render: (props) => { - if (props.step === 0) { - return ( - - ); - } else if (props.step === 1) { - return ( - - ); - } - - return [ - , - , - ]; - }, - }} - > - - name="base" - title="Knowledge Space Configuration" - onFinish={async () => { - console.log(formRef.current?.getFieldsValue()) - return true - }} - > - setKnowledgeSpaceName(e.target.value)} - /> - - - name="checkbox" - title="Choose a Datasource type" - onFinish={async () => { - console.log(formRef.current?.getFieldsValue()) - return true - }} - > - - - setWebPageUrl(e.target.value)} - /> - - - + ) + const data = await res.json() + if (data.success) { + setKnowledgeSpaceList(data.data) + } + } else { + message.error(data.err_msg || 'failed') + } + }} + > + Next + + + ) : activeStep === 1 ? ( + <> + + + + + ) : ( + <> + + Web Page URL: + setWebPageUrl(e.target.value)} + /> + + + + )} +