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

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

@@ -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"
+              color="primary"
-            variant="soft"
+              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>
   )
 }
 

datacenter/app/datastores/documents/page.tsx

@@ -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
+      <Stack
-        sx={{
+        direction="row"
-          display: 'flex',
+        justifyContent="space-between"
-          flexDirection: 'row-reverse'
+        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"
+            color="primary"
-            variant="soft"
+            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
+                    <Chip variant="solid" color="neutral" sx={{ opacity: 0.5 }}>
-                      variant="soft"
-                      color="neutral"
-                      sx={{ fontWeight: 300 }}
-                    >
                       {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 }}
+                      sx={{ opacity: 0.5 }}
-                      variant="soft"
+                      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>

datacenter/app/datastores/page.tsx

@@ -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"
+            color="primary"
-            variant="soft"
+            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
+                    <Chip variant="solid" color="neutral" sx={{ opacity: 0.5 }}>
-                      variant="soft"
-                      color="neutral"
-                      sx={{ fontWeight: 300 }}
-                    >
                       {row.vector_type}
                     </Chip>
                   </td>
                   <td>
-                    <Chip
+                    <Chip variant="solid" color="neutral" sx={{ opacity: 0.5 }}>
-                      variant="soft"
-                      color="neutral"
-                      sx={{ fontWeight: 300 }}
-                    >
                       {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>

datacenter/app/globals.css

@@ -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;
 }