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

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

@@ -32,7 +32,7 @@ const ChunkList = () => {
   }, [])
   return (
     <div className="p-4">
-      <Table sx={{ '& thead th:nth-child(1)': { width: '40%' } }}>
+      <Table color="neutral" stripe="odd" variant="outlined">
         <thead>
           <tr>
             <th>Name</th>

datacenter/app/datastores/documents/page.tsx

@@ -10,11 +10,26 @@ import {
   Box,
   Stack,
   Input,
+  Textarea,
+  Chip,
   styled
 } from '@/lib/mui'
 import moment from 'moment'
-import { message } from 'antd'
+import { InboxOutlined } from '@ant-design/icons'
+import type { UploadProps } from 'antd'
+import { Upload, message } from 'antd'
 
+const { Dragger } = Upload
+const Item = styled(Sheet)(({ theme }) => ({
+  width: '50%',
+  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 stepsOfAddingDocument = [
   'Choose a Datasource type',
   'Setup the Datasource'
@@ -36,16 +51,6 @@ const documentTypeList = [
     subTitle: 'It can be: PDF, CSV, JSON, Text, PowerPoint, Word, Excel'
   }
 ]
-const Item = styled(Sheet)(({ theme }) => ({
-  width: '50%',
-  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 Documents = () => {
   const router = useRouter()
@@ -53,9 +58,27 @@ const Documents = () => {
   const [isAddDocumentModalShow, setIsAddDocumentModalShow] =
     useState<boolean>(false)
   const [activeStep, setActiveStep] = useState<number>(0)
+  const [documentType, setDocumentType] = useState<string>('')
   const [documents, setDocuments] = useState<any>([])
   const [webPageUrl, setWebPageUrl] = useState<string>('')
-  const [documentName, setDocumentName] = useState<string>('')
+  const [documentName, setDocumentName] = useState<any>('')
+  const [textSource, setTextSource] = useState<string>('');
+  const [text, setText] = useState<string>('');
+  const [originFileObj, setOriginFileObj] = useState<any>(null)
+  const props: UploadProps = {
+    name: 'file',
+    multiple: false,
+    onChange(info) {
+      console.log(info)
+      if (info.fileList.length === 0) {
+        setOriginFileObj(null)
+        setDocumentName('')
+        return
+      }
+      setOriginFileObj(info.file.originFileObj)
+      setDocumentName(info.file.originFileObj?.name)
+    }
+  }
   useEffect(() => {
     async function fetchDocuments() {
       const res = await fetch(
@@ -90,7 +113,7 @@ const Documents = () => {
           + Add Datasource
         </Button>
       </Sheet>
-      <Table sx={{ '& thead th:nth-child(1)': { width: '40%' } }}>
+      <Table color="neutral" stripe="odd" variant="outlined">
         <thead>
           <tr>
             <th>Name</th>
@@ -108,12 +131,30 @@ const Documents = () => {
               <td>{row.doc_type}</td>
               <td>{row.chunk_size}</td>
               <td>{moment(row.last_sync).format('YYYY-MM-DD HH:MM:SS')}</td>
-              <td>{row.status}</td>
+              <td>
+                <Chip
+                  color={(function () {
+                    switch (row.status) {
+                      case 'TODO':
+                        return 'neutral'
+                      case 'RUNNING':
+                        return 'primary'
+                      case 'FINISHED':
+                        return 'success'
+                      case 'FAILED':
+                        return 'danger'
+                    }
+                  })()}
+                >
+                  {row.status}
+                </Chip>
+              </td>
               <td>
                 {
                   <>
                     <Button
                       variant="outlined"
+                      size="sm"
                       onClick={async () => {
                         const res = await fetch(
                           `http://localhost:8000/knowledge/${spaceName}/document/sync`,
@@ -139,6 +180,7 @@ const Documents = () => {
                     </Button>
                     <Button
                       variant="outlined"
+                      size="sm"
                       onClick={() => {
                         router.push(
                           `/datastores/documents/chunklist?spacename=${spaceName}&documentid=${row.id}`
@@ -204,9 +246,8 @@ const Documents = () => {
                       cursor: 'pointer'
                     }}
                     onClick={() => {
-                      if (item.type === 'webPage') {
+                      setDocumentType(item.type)
                       setActiveStep(1)
-                      }
                     }}
                   >
                     <Sheet sx={{ fontSize: '20px', fontWeight: 'bold' }}>
@@ -226,11 +267,49 @@ const Documents = () => {
                   onChange={(e: any) => setDocumentName(e.target.value)}
                   sx={{ marginBottom: '20px' }}
                 />
+                {documentType === 'webPage' ? (
+                  <>
                     Web Page URL:
                     <Input
                       placeholder="Please input the Web Page URL"
                       onChange={(e: any) => setWebPageUrl(e.target.value)}
                     />
+                  </>
+                ) : documentType === 'file' ? (
+                  <>
+                    <Dragger {...props}>
+                      <p className="ant-upload-drag-icon">
+                        <InboxOutlined />
+                      </p>
+                      <p
+                        style={{ color: 'rgb(22, 108, 255)', fontSize: '20px' }}
+                      >
+                        Select or Drop file
+                      </p>
+                      <p
+                        className="ant-upload-hint"
+                        style={{ color: 'rgb(22, 108, 255)' }}
+                      >
+                        PDF, PowerPoint, Excel, Word, Text, Markdown,
+                      </p>
+                    </Dragger>
+                  </>
+                ) : (
+                  <>
+                    Source:
+                    <Input
+                      placeholder="Please input the source"
+                      onChange={(e: any) => setTextSource(e.target.value)}
+                      sx={{ marginBottom: '20px' }}
+                    />
+                    Text:
+                    <Textarea
+                      onChange={(e: any) => setText(e.target.value)}
+                      minRows={4}
+                      sx={{ marginBottom: '20px' }}
+                    />
+                  </>
+                )}
               </Box>
               <Button
                 onClick={async () => {
@@ -238,6 +317,7 @@ const Documents = () => {
                     message.error('Please input the name')
                     return
                   }
+                  if (documentType === 'webPage') {
                     if (webPageUrl === '') {
                       message.error('Please input the Web Page URL')
                       return
@@ -277,6 +357,89 @@ const Documents = () => {
                     } else {
                       message.error(data.err_msg || 'failed')
                     }
+                  } else if (documentType === 'file') {
+                    if (!originFileObj) {
+                      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 res = await fetch(
+                      `http://localhost:8000/knowledge/${spaceName}/document/upload`,
+                      {
+                        method: 'POST',
+                        body: formData
+                      }
+                    )
+                    const data = await res.json()
+                    if (data.success) {
+                      message.success('success')
+                      setIsAddDocumentModalShow(false)
+                      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)
+                      }
+                    } 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`,
+                      {
+                        method: 'POST',
+                        headers: {
+                          'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                          doc_name: documentName,
+                          source: textSource,
+                          content: text,
+                          doc_type: 'TEXT'
+                        })
+                      }
+                    )
+                    const data = await res.json()
+                    if (data.success) {
+                      message.success('success')
+                      setIsAddDocumentModalShow(false)
+                      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)
+                      }
+                    } else {
+                      message.error(data.err_msg || 'failed')
+                    }
+                  }
                 }}
               >
                 Finish

datacenter/app/datastores/page.tsx

@@ -2,7 +2,9 @@
 
 import { useRouter } from 'next/navigation'
 import React, { useState, useEffect } from 'react'
-import { message } from 'antd'
+import { InboxOutlined } from '@ant-design/icons'
+import type { UploadProps } from 'antd'
+import { message, Upload } from 'antd'
 import {
   Modal,
   Button,
@@ -11,9 +13,12 @@ import {
   Stack,
   Box,
   Input,
+  Textarea,
   styled
 } from '@/lib/mui'
 
+const { Dragger } = Upload
+
 const Item = styled(Sheet)(({ theme }) => ({
   width: '33%',
   backgroundColor:
@@ -51,12 +56,30 @@ const documentTypeList = [
 const Index = () => {
   const router = useRouter()
   const [activeStep, setActiveStep] = useState<number>(0)
+  const [documentType, setDocumentType] = useState<string>('')
   const [knowledgeSpaceList, setKnowledgeSpaceList] = useState<any>([])
   const [isAddKnowledgeSpaceModalShow, setIsAddKnowledgeSpaceModalShow] =
     useState<boolean>(false)
   const [knowledgeSpaceName, setKnowledgeSpaceName] = useState<string>('')
   const [webPageUrl, setWebPageUrl] = useState<string>('')
-  const [documentName, setDocumentName] = useState<string>('')
+  const [documentName, setDocumentName] = useState<any>('')
+  const [textSource, setTextSource] = useState<string>('');
+  const [text, setText] = useState<string>('');
+  const [originFileObj, setOriginFileObj] = useState<any>(null)
+  const props: UploadProps = {
+    name: 'file',
+    multiple: false,
+    onChange(info) {
+      console.log(info)
+      if (info.fileList.length === 0) {
+        setOriginFileObj(null)
+        setDocumentName('')
+        return
+      }
+      setOriginFileObj(info.file.originFileObj)
+      setDocumentName(info.file.originFileObj?.name)
+    }
+  }
   useEffect(() => {
     async function fetchData() {
       const res = await fetch('http://localhost:8000/knowledge/space/list', {
@@ -75,14 +98,21 @@ const Index = () => {
   }, [])
   return (
     <>
-      <Sheet sx={{
+      <Sheet
-        display: "flex",
+        sx={{
-        justifyContent: "space-between"
+          display: 'flex',
-      }} className="p-4">
+          justifyContent: 'space-between'
-        <Sheet sx={{
+        }}
+        className="p-4"
+      >
+        <Sheet
+          sx={{
             fontSize: '30px',
             fontWeight: 'bold'
-        }}>Knowledge Spaces</Sheet>
+          }}
+        >
+          Knowledge Spaces
+        </Sheet>
         <Button
           onClick={() => setIsAddKnowledgeSpaceModalShow(true)}
           variant="outlined"
@@ -91,7 +121,7 @@ const Index = () => {
         </Button>
       </Sheet>
       <div className="page-body p-4">
-        <Table sx={{ '& thead th:nth-child(1)': { width: '40%' } }}>
+        <Table color="neutral" stripe="odd" variant="outlined">
           <thead>
             <tr>
               <th>Name</th>
@@ -228,12 +258,13 @@ const Index = () => {
                       cursor: 'pointer'
                     }}
                     onClick={() => {
-                      if (item.type === 'webPage') {
+                      setDocumentType(item.type)
-                        setActiveStep(2);
+                      setActiveStep(2)
-                      }
                     }}
                   >
-                    <Sheet sx={{ fontSize: '20px', fontWeight: 'bold' }}>{item.title}</Sheet>
+                    <Sheet sx={{ fontSize: '20px', fontWeight: 'bold' }}>
+                      {item.title}
+                    </Sheet>
                     <Sheet>{item.subTitle}</Sheet>
                   </Sheet>
                 ))}
@@ -248,21 +279,60 @@ const Index = () => {
                   onChange={(e: any) => setDocumentName(e.target.value)}
                   sx={{ marginBottom: '20px' }}
                 />
+                {documentType === 'webPage' ? (
+                  <>
                     Web Page URL:
                     <Input
                       placeholder="Please input the Web Page URL"
                       onChange={(e: any) => setWebPageUrl(e.target.value)}
                     />
+                  </>
+                ) : documentType === 'file' ? (
+                  <>
+                    <Dragger {...props}>
+                      <p className="ant-upload-drag-icon">
+                        <InboxOutlined />
+                      </p>
+                      <p
+                        style={{ color: 'rgb(22, 108, 255)', fontSize: '20px' }}
+                      >
+                        Select or Drop file
+                      </p>
+                      <p
+                        className="ant-upload-hint"
+                        style={{ color: 'rgb(22, 108, 255)' }}
+                      >
+                        PDF, PowerPoint, Excel, Word, Text, Markdown,
+                      </p>
+                    </Dragger>
+                  </>
+                ) : (
+                  <>
+                    Source:
+                    <Input
+                      placeholder="Please input the source"
+                      onChange={(e: any) => setTextSource(e.target.value)}
+                      sx={{ marginBottom: '20px' }}
+                    />
+                    Text:
+                    <Textarea
+                      onChange={(e: any) => setText(e.target.value)}
+                      minRows={4}
+                      sx={{ marginBottom: '20px' }}
+                    />
+                  </>
+                )}
               </Box>
               <Button
                 onClick={async () => {
                   if (documentName === '') {
-                    message.error('Please input the name');
+                    message.error('Please input the name')
-                    return;
+                    return
                   }
+                  if (documentType === 'webPage') {
                     if (webPageUrl === '') {
-                    message.error('Please input the Web Page URL');
+                      message.error('Please input the Web Page URL')
-                    return;
+                      return
                     }
                     const res = await fetch(
                       `http://localhost:8000/knowledge/${knowledgeSpaceName}/document/add`,
@@ -285,6 +355,61 @@ const Index = () => {
                     } else {
                       message.error(data.err_msg || 'failed')
                     }
+                  } else if (documentType === 'file') {
+                    if (!originFileObj) {
+                      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 res = await fetch(
+                      `http://localhost:8000/knowledge/${knowledgeSpaceName}/document/upload`,
+                      {
+                        method: 'POST',
+                        body: formData
+                      }
+                    )
+                    const data = await res.json()
+                    if (data.success) {
+                      message.success('success')
+                      setIsAddKnowledgeSpaceModalShow(false)
+                    } 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/${knowledgeSpaceName}/document/add`,
+                      {
+                        method: 'POST',
+                        headers: {
+                          'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                          doc_name: documentName,
+                          source: textSource,
+                          content: text,
+                          doc_type: 'TEXT'
+                        })
+                      }
+                    )
+                    const data = await res.json()
+                    if (data.success) {
+                      message.success('success')
+                      setIsAddKnowledgeSpaceModalShow(false)
+                    } else {
+                      message.error(data.err_msg || 'failed')
+                    }
+                  }
                 }}
               >
                 Finish