feat: upload files

datacenter/app/datastores/documents/page.tsx

@@ -14,8 +14,21 @@ import {
   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'
@@ -37,16 +50,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()
@@ -54,9 +57,25 @@ 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 [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(
@@ -109,20 +128,24 @@ 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><Chip color={
+              <td>
-                (function(){
+                <Chip
-                  switch(row.status) {
+                  color={(function () {
+                    switch (row.status) {
                       case 'TODO':
-                      return 'neutral';
+                        return 'neutral'
                       case 'RUNNING':
-                      return 'primary';
+                        return 'primary'
                       case 'FINISHED':
-                      return 'success';
+                        return 'success'
                       case 'FAILED':
-                      return 'danger';
+                        return 'danger'
                     }
-                })()
+                  })()}
-              }>{row.status}</Chip></td>
+                >
+                  {row.status}
+                </Chip>
+              </td>
               <td>
                 {
                   <>
@@ -221,6 +244,7 @@ const Documents = () => {
                     }}
                     onClick={() => {
                       if (item.type === 'webPage') {
+                        setDocumentType(item.type)
                         setActiveStep(1)
                       }
                     }}
@@ -242,11 +266,37 @@ const Documents = () => {
                   onChange={(e: any) => setDocumentName(e.target.value)}
                   sx={{ marginBottom: '20px' }}
                 />
+                Web Page URL:
+                {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>
+                  </>
+                ) : (
+                  <></>
+                )}
               </Box>
               <Button
                 onClick={async () => {
@@ -254,6 +304,7 @@ const Documents = () => {
                     message.error('Please input the name')
                     return
                   }
+                  if (documentType === 'webPage') {
                     if (webPageUrl === '') {
                       message.error('Please input the Web Page URL')
                       return
@@ -293,6 +344,47 @@ const Documents = () => {
                     } else {
                       message.error(data.err_msg || 'failed')
                     }
+                  } else if (documentType === 'file') {
+                    if (!originFileObj) {
+                      message.error('Please select a file')
+                      return
+                    }
+                    const res = await fetch(
+                      `http://localhost:8000/knowledge/${spaceName}/document/upload`,
+                      {
+                        method: 'POST',
+                        headers: {
+                          'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                          doc_name: documentName,
+                          doc_file: originFileObj,
+                          doc_type: 'DOCUMENT'
+                        })
+                      }
+                    )
+                    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,
@@ -14,6 +16,8 @@ import {
   styled
 } from '@/lib/mui'
 
+const { Dragger } = Upload
+
 const Item = styled(Sheet)(({ theme }) => ({
   width: '33%',
   backgroundColor:
@@ -51,12 +55,28 @@ 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 [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 +95,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"
@@ -228,12 +255,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>
                 ))}
@@ -246,23 +274,49 @@ const Index = () => {
                 <Input
                   placeholder="Please input the name"
                   onChange={(e: any) => setDocumentName(e.target.value)}
-                  sx={{ marginBottom: '20px'}}
+                  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>
+                  </>
+                ) : (
+                  <></>
+                )}
               </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 +339,33 @@ const Index = () => {
                     } else {
                       message.error(data.err_msg || 'failed')
                     }
+                  } else if (documentType === 'file') {
+                    if (!originFileObj) {
+                      message.error('Please select a file')
+                      return
+                    }
+                    const res = await fetch(
+                      `http://localhost:8000/knowledge/${knowledgeSpaceName}/document/upload`,
+                      {
+                        method: 'POST',
+                        headers: {
+                          'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                          doc_name: documentName,
+                          doc_file: originFileObj,
+                          doc_type: 'DOCUMENT'
+                        })
+                      }
+                    )
+                    const data = await res.json()
+                    if (data.success) {
+                      message.success('success')
+                      setIsAddKnowledgeSpaceModalShow(false)
+                    } else {
+                      message.error(data.err_msg || 'failed')
+                    }
+                  }
                 }}
               >
                 Finish