Merge remote-tracking branch 'origin/new-page-framework' into llm_framework

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

@@ -1,13 +1,21 @@
 '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'
 import { fetchBaseURL } from '@/app/datastores/constants'
 const page_size = 20
 
 const ChunkList = () => {
+  const router = useRouter()
   const { mode } = useColorScheme()
   const spaceName = useSearchParams().get('spacename')
   const documentId = useSearchParams().get('documentid')
@@ -40,6 +48,39 @@ 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 ? (
           <>
@@ -80,7 +121,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
@@ -135,6 +180,7 @@ const ChunkList = () => {
           <></>
         )}
       </div>
+    </div>
   )
 }
 

datacenter/app/datastores/documents/page.tsx

@@ -13,10 +13,15 @@ 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 type { UploadProps } from 'antd'
 import { Upload, Pagination, Popover, message } from 'antd'
 import { fetchBaseURL } from '@/app/datastores/constants'
@@ -33,8 +38,8 @@ const Item = styled(Sheet)(({ theme }) => ({
   color: theme.vars.palette.text.secondary
 }))
 const stepsOfAddingDocument = [
-  '1.Choose a Datasource type',
+  'Choose a Datasource type',
-  '2.Setup the Datasource'
+  'Setup the Datasource'
 ]
 const documentTypeList = [
   {
@@ -72,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,
@@ -112,20 +118,33 @@ 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)}
-          sx={{ marginBottom: '20px' }}
         >
           + Add Datasource
         </Button>
-      </Sheet>
+      </Stack>
       {documents.length ? (
         <>
           <Table
@@ -334,7 +353,8 @@ const Documents = () => {
                     color: activeStep === index ? '#814DDE' : ''
                   }}
                 >
-                  {item}
+                  {index < activeStep ? <CheckCircleOutlinedIcon /> : `${index + 1}.`}
+                  {`${item}`}
                 </Item>
               ))}
             </Stack>
@@ -422,7 +442,36 @@ 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 () => {
@@ -450,6 +499,20 @@ const Documents = () => {
                         }
                       )
                       const data = await res.json()
+                      data.success &&
+                        synchChecked &&
+                        fetch(
+                          `${fetchBaseURL}/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)
@@ -492,6 +555,20 @@ const Documents = () => {
                         }
                       )
                       const data = await res.json()
+                      data.success &&
+                        synchChecked &&
+                        fetch(
+                          `${fetchBaseURL}/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)
@@ -538,6 +615,20 @@ const Documents = () => {
                         }
                       )
                       const data = await res.json()
+                      data.success &&
+                        synchChecked &&
+                        fetch(
+                          `${fetchBaseURL}/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)
@@ -568,6 +659,7 @@ const Documents = () => {
                 >
                   Finish
                 </Button>
+              </Stack>
             </>
           )}
         </Sheet>

datacenter/app/datastores/page.tsx

@@ -3,6 +3,7 @@
 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, Popover } from 'antd'
 import {
@@ -16,6 +17,8 @@ import {
   Input,
   Textarea,
   Chip,
+  Switch,
+  Typography,
   styled
 } from '@/lib/mui'
 import { fetchBaseURL } from '@/app/datastores/constants'
@@ -34,9 +37,9 @@ const Item = styled(Sheet)(({ theme }) => ({
 }))
 
 const stepsOfAddingSpace = [
-  '1.Knowledge Space Config',
+  'Knowledge Space Config',
-  '2.Choose a Datasource type',
+  'Choose a Datasource type',
-  '3.Setup the Datasource'
+  'Setup the Datasource'
 ]
 const documentTypeList = [
   {
@@ -71,6 +74,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,
@@ -138,6 +142,9 @@ const Index = () => {
               },
               '& tbody tr: hover a': {
                 textDecoration: 'underline'
+              },
+              '& tbody tr a': {
+                color: 'rgb(13, 96, 217)'
               }
             }}
           >
@@ -214,9 +221,13 @@ const Index = () => {
               {stepsOfAddingSpace.map((item: any, index: number) => (
                 <Item
                   key={item}
-                  sx={{ fontWeight: activeStep === index ? 'bold' : '', color: activeStep === index ? '#814DDE' : '' }}
+                  sx={{
+                    fontWeight: activeStep === index ? 'bold' : '',
+                    color: activeStep === index ? '#814DDE' : ''
+                  }}
                 >
-                  {item}
+                  {index < activeStep ? <CheckCircleOutlinedIcon /> : `${index + 1}.`}
+                  {`${item}`}
                 </Item>
               ))}
             </Stack>
@@ -361,9 +372,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'
+                  variant="outlined"
+                  sx={{ marginRight: '20px' }}
+                  onClick={() => setActiveStep(1)}
+                >
+                  {'< Back'}
+                </Button>
+                <Button
+                  variant="outlined"
                   onClick={async () => {
                     if (documentName === '') {
                       message.error('Please input the name')
@@ -392,6 +432,19 @@ const Index = () => {
                       if (data.success) {
                         message.success('success')
                         setIsAddKnowledgeSpaceModalShow(false)
+                        synchChecked &&
+                          fetch(
+                            `${fetchBaseURL}/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')
                       }
@@ -415,6 +468,19 @@ const Index = () => {
                       if (data.success) {
                         message.success('success')
                         setIsAddKnowledgeSpaceModalShow(false)
+                        synchChecked &&
+                          fetch(
+                            `${fetchBaseURL}/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')
                       }
@@ -442,6 +508,19 @@ const Index = () => {
                       if (data.success) {
                         message.success('success')
                         setIsAddKnowledgeSpaceModalShow(false)
+                        synchChecked &&
+                          fetch(
+                            `${fetchBaseURL}/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')
                       }
@@ -450,6 +529,7 @@ const Index = () => {
                 >
                   Finish
                 </Button>
+              </Stack>
             </>
           )}
         </Sheet>