From 7adeceaf00a778c97a72fbd4e0280237f46a8569 Mon Sep 17 00:00:00 2001
From: "shiweisong.ssw" <shiweisong.ssw@digital-engine.com>
Date: Wed, 28 Jun 2023 16:19:12 +0800
Subject: [PATCH] feat: upload files

---
 datacenter/app/datastores/documents/page.tsx | 204 ++++++++++++++-----
 datacenter/app/datastores/page.tsx           | 173 +++++++++++-----
 2 files changed, 275 insertions(+), 102 deletions(-)

diff --git a/datacenter/app/datastores/documents/page.tsx b/datacenter/app/datastores/documents/page.tsx
index aa58b6330..0aff19425 100644
--- a/datacenter/app/datastores/documents/page.tsx
+++ b/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={
-                (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>
+                <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>
                 {
                   <>
@@ -221,6 +244,7 @@ const Documents = () => {
                     }}
                     onClick={() => {
                       if (item.type === 'webPage') {
+                        setDocumentType(item.type)
                         setActiveStep(1)
                       }
                     }}
@@ -243,10 +267,36 @@ const Documents = () => {
                   sx={{ marginBottom: '20px' }}
                 />
                 Web Page URL:
-                <Input
-                  placeholder="Please input the Web Page URL"
-                  onChange={(e: any) => setWebPageUrl(e.target.value)}
-                />
+                {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,44 +304,86 @@ const Documents = () => {
                     message.error('Please input the name')
                     return
                   }
-                  if (webPageUrl === '') {
-                    message.error('Please input the Web Page URL')
-                    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,
-                        content: webPageUrl,
-                        doc_type: 'URL'
-                      })
+                  if (documentType === 'webPage') {
+                    if (webPageUrl === '') {
+                      message.error('Please input the Web Page URL')
+                      return
                     }
-                  )
-                  const data = await res.json()
-                  if (data.success) {
-                    message.success('success')
-                    setIsAddDocumentModalShow(false)
                     const res = await fetch(
-                      `http://localhost:8000/knowledge/${spaceName}/document/list`,
+                      `http://localhost:8000/knowledge/${spaceName}/document/add`,
                       {
                         method: 'POST',
                         headers: {
                           'Content-Type': 'application/json'
                         },
-                        body: JSON.stringify({})
+                        body: JSON.stringify({
+                          doc_name: documentName,
+                          content: webPageUrl,
+                          doc_type: 'URL'
+                        })
                       }
                     )
                     const data = await res.json()
                     if (data.success) {
-                      setDocuments(data.data)
+                      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 (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')
                     }
-                  } else {
-                    message.error(data.err_msg || 'failed')
                   }
                 }}
               >
diff --git a/datacenter/app/datastores/page.tsx b/datacenter/app/datastores/page.tsx
index 637d62cfe..87de5cf3e 100644
--- a/datacenter/app/datastores/page.tsx
+++ b/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={{
-        display: "flex",
-        justifyContent: "space-between"
-      }} className="p-4">
-        <Sheet sx={{
-          fontSize: '30px',
-          fontWeight: 'bold'
-        }}>Knowledge Spaces</Sheet>
+      <Sheet
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between'
+        }}
+        className="p-4"
+      >
+        <Sheet
+          sx={{
+            fontSize: '30px',
+            fontWeight: 'bold'
+          }}
+        >
+          Knowledge Spaces
+        </Sheet>
         <Button
           onClick={() => setIsAddKnowledgeSpaceModalShow(true)}
           variant="outlined"
@@ -218,7 +245,7 @@ const Index = () => {
                     sx={{
                       boxSizing: 'border-box',
                       height: '80px',
-                      padding: '12px',            
+                      padding: '12px',
                       display: 'flex',
                       flexDirection: 'column',
                       justifyContent: 'space-between',
@@ -228,12 +255,13 @@ const Index = () => {
                       cursor: 'pointer'
                     }}
                     onClick={() => {
-                      if (item.type === 'webPage') {
-                        setActiveStep(2);
-                      }
+                      setDocumentType(item.type)
+                      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,44 +274,97 @@ const Index = () => {
                 <Input
                   placeholder="Please input the name"
                   onChange={(e: any) => setDocumentName(e.target.value)}
-                  sx={{ marginBottom: '20px'}}
-                />
-                Web Page URL:
-                <Input
-                  placeholder="Please input the Web Page URL"
-                  onChange={(e: any) => setWebPageUrl(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>
+                  </>
+                ) : (
+                  <></>
+                )}
               </Box>
               <Button
                 onClick={async () => {
                   if (documentName === '') {
-                    message.error('Please input the name');
-                    return;
+                    message.error('Please input the name')
+                    return
                   }
-                  if (webPageUrl === '') {
-                    message.error('Please input the Web Page URL');
-                    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,
-                        content: webPageUrl,
-                        doc_type: 'URL'
-                      })
+                  if (documentType === 'webPage') {
+                    if (webPageUrl === '') {
+                      message.error('Please input the Web Page URL')
+                      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,
+                          content: webPageUrl,
+                          doc_type: 'URL'
+                        })
+                      }
+                    )
+                    const data = await res.json()
+                    if (data.success) {
+                      message.success('success')
+                      setIsAddKnowledgeSpaceModalShow(false)
+                    } 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')
                     }
-                  )
-                  const data = await res.json()
-                  if (data.success) {
-                    message.success('success')
-                    setIsAddKnowledgeSpaceModalShow(false)
-                  } else {
-                    message.error(data.err_msg || 'failed')
                   }
                 }}
               >