From 2ba65de8062e4386d69ef2aa510eaa15fff84776 Mon Sep 17 00:00:00 2001 From: "changhuiping.chp" Date: Tue, 27 Jun 2023 11:15:11 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E5=B8=83=E5=B1=80=E8=B0=83?= =?UTF-8?q?=E6=95=B4&=E6=B7=BB=E5=8A=A0=E9=A6=96=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- datacenter/app/globals.css | 16 +- datacenter/app/layout.tsx | 4 +- datacenter/app/page.tsx | 267 +++++++++++++++++++++++++++- datacenter/components/chatBox.tsx | 1 - datacenter/components/leftSider.tsx | 211 ++++++++++++++++++---- datacenter/utils/request.ts | 31 ++++ 6 files changed, 479 insertions(+), 51 deletions(-) create mode 100644 datacenter/utils/request.ts diff --git a/datacenter/app/globals.css b/datacenter/app/globals.css index b1c232149..b7240b7bf 100644 --- a/datacenter/app/globals.css +++ b/datacenter/app/globals.css @@ -2,11 +2,15 @@ @tailwind components; @tailwind utilities; +a { + color: #1677ff; +} + body { - margin: 0; - color: var(--joy-palette-text-primary, var(--joy-palette-neutral-800, #25252D)); - font-family: var(--joy-fontFamily-body, var(--joy-Josefin Sans, sans-serif)); - font-size: var(--joy-fontSize-md, 1rem); - line-height: var(--joy-lineHeight-md, 1.5); - background-color: var(--joy-palette-background-body); + margin: 0; + color: var(--joy-palette-text-primary, var(--joy-palette-neutral-800, #25252D)); + font-family: var(--joy-fontFamily-body, var(--joy-Josefin Sans, sans-serif)); + font-size: var(--joy-fontSize-md, 1rem); + line-height: var(--joy-lineHeight-md, 1.5); + background-color: var(--joy-palette-background-body); } \ No newline at end of file diff --git a/datacenter/app/layout.tsx b/datacenter/app/layout.tsx index 75c256174..f97573670 100644 --- a/datacenter/app/layout.tsx +++ b/datacenter/app/layout.tsx @@ -1,6 +1,5 @@ "use client" import './globals.css' -import Header from '@/components/header'; import LeftSider from '@/components/leftSider'; import { CssVarsProvider, ThemeProvider } from '@mui/joy/styles'; import { joyTheme } from './defaultTheme'; @@ -16,10 +15,9 @@ export default function RootLayout({
-
-
{children}
+
{children}
 diff --git a/datacenter/app/page.tsx b/datacenter/app/page.tsx index 90d3ed7d3..f5e90a519 100644 --- a/datacenter/app/page.tsx +++ b/datacenter/app/page.tsx @@ -1,9 +1,270 @@ -import Image from 'next/image' +"use client"; + +import ReactMarkdown from 'react-markdown'; +import { Collapse } from 'antd'; +import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; +import { Box, Slider, Input, Tabs, TabList, Typography, TabPanel, Tab, RadioGroup, Radio, tabClasses, useColorScheme, radioClasses } from '@/lib/mui'; +import { sendGetRequest } from '@/utils/request'; +import { useEffect, useState } from 'react'; +import ChatBoxComp from '@/components/chatBox'; +import useAgentChat from '@/hooks/useAgentChat'; export default function Home() { + const [temperatureNum, setTemperatureNum] = useState(3); + const [tokenSize, setTokenSize] = useState(0); + const { mode, setMode } = useColorScheme(); + + const { handleChatSubmit, history } = useAgentChat({ + queryAgentURL: `/api/agents/query`, + }); + + const handleGetD = () => { + sendGetRequest('/v1/chat/dialogue/list', { + }) + } + console.log(mode, 'mode', radioClasses, 'radioClasses') + useEffect(() => { + handleGetD(); + }, []); return ( -
- Hello GPT +
+ + [DB-GPT](https://github.com/csunny/DB-GPT) 是一个开源的以数据库为基础的GPT实验项目，使用本地化的GPT大模型与您的数据和环境进行交互，无数据泄露风险，100% 私密，100% 安全。 + + .ant-collapse-item >.ant-collapse-header, & .ant-collapse .ant-collapse-content': { + color: 'var(--joy-palette-neutral-plainColor)' + }, + '& .ant-collapse .ant-collapse-content>.ant-collapse-content-box': { + paddingTop: 0 + } + }} + > + ( +
+ +
+ )} + expandIconPosition="end" + items={[ + { + key: '1', + label: 'This panel can only be collapsed by clicking text', + children: ( + <> + +
+ Temperature + { + console.log(Number(e.target.value) * 10, '===') + setTemperatureNum(Number(e.target.value) * 10); + }} + slotProps={{ + input: { + min: 0, + max: 1, + step: 0.1, + }, + }} + /> +
+ { + console.log(e, 'e', value, 'v') + setTemperatureNum(value); + }} + /> + + +
+ Maximum output token size + { + setTokenSize(Number(e.target.value)); + }} + slotProps={{ + input: { + min: 0, + max: 1024, + step: 64, + }, + }} + /> +
+ { + console.log(e, 'e', value, 'v') + setTokenSize(value); + }} + /> + + + ), + }, + ]} + /> + + + ({ + '--Tabs-gap': '0px', + borderRadius: 'unset', + boxShadow: 'sm', + overflow: 'auto', + WebkitBoxShadow: 'none' + })} + > + + Documents Chat + SQL Generation & Diagnostics + Plugin Mode + + + + + + + + + + + + + + + + + + + + Best for professional developers building enterprise or data-rich + applications. + + + $15{' '} + + / dev / month + + + + + + The most advanced features for data-rich applications, as well as the + highest priority for support. + + + ({ + ...theme.variants.soft.danger, + color: 'danger.400', + verticalAlign: 'text-top', + textDecoration: 'line-through', + })} + > + $49 + + $37*{' '} + + / dev / month + + + + + +
+ ) } diff --git a/datacenter/components/chatBox.tsx b/datacenter/components/chatBox.tsx index 4e73b9d23..ef8530231 100644 --- a/datacenter/components/chatBox.tsx +++ b/datacenter/components/chatBox.tsx @@ -76,7 +76,6 @@ const ChatBoxComp = ({ display: 'flex', flex: 1, flexBasis: '100%', - maxWidth: '700px', width: '100%', height: '100%', maxHeight: '100%', diff --git a/datacenter/components/leftSider.tsx b/datacenter/components/leftSider.tsx index ce0dffd49..ab934e24e 100644 --- a/datacenter/components/leftSider.tsx +++ b/datacenter/components/leftSider.tsx @@ -1,14 +1,40 @@ "use client"; -import React, { useMemo } from 'react'; +import React, { useMemo, useState } from 'react'; import { usePathname } from 'next/navigation'; import Link from 'next/link'; -import { Box, List, ListItem, ListItemButton, ListItemDecorator, ListItemContent } from '@/lib/mui'; +import Image from 'next/image'; +import { Box, List, ListItem, ListItemButton, ListItemDecorator, ListItemContent, Typography, Button, useColorScheme } from '@/lib/mui'; import SmartToyRoundedIcon from '@mui/icons-material/SmartToyRounded'; // Icons import import StorageRoundedIcon from '@mui/icons-material/StorageRounded'; +import DarkModeIcon from '@mui/icons-material/DarkMode'; +import WbSunnyIcon from '@mui/icons-material/WbSunny'; + +const mockHistory = [{ + id: 1, + summary: "chat1", + history: [{ + from: 'human', + message: 'Hello' + }, { + from: 'agent', + message: 'Hello! How can I assist you today?' + }] +}, { + id: 2, + summary: "天气", + history: [{ + from: 'human', + message: '讲个笑话' + }, { + from: 'agent', + message: '当然！这是一个经典的笑话：xxx' + }] +}]; const LeftSider = () => { const pathname = usePathname(); - console.log(pathname, 'router') + const { mode, setMode } = useColorScheme(); + const [chatSelect, setChatSelect] = useState(); const menus = useMemo(() => { return [{ label: 'Agents', @@ -23,52 +49,161 @@ const LeftSider = () => { }]; }, [pathname]); + const handleChangeTheme = () => { + if (mode === 'light') { + setMode('dark'); + } else { + setMode('light'); + } + }; + return ( - + +
+ Databerry + + DB-GPT + +
+ + + + + - - - - {menus.map((each) => ( - - + maxHeight: '100%', + overflow: 'auto', + }} + > + + + + {mockHistory.map((each, index) => ( + { + setChatSelect(each.id); + }} > - - {each.icon} - - {each.label} + {each.summary} - - ))} + ))} + + + + +
+
+ + + + + {menus.map((each) => ( + + + + + {each.icon} + + {each.label} + + + + ))} + + + + + + {mode === 'dark' ? ( + + ) : ( + + )} + + Theme + + - - + +
+ ) }; diff --git a/datacenter/utils/request.ts b/datacenter/utils/request.ts new file mode 100644 index 000000000..3413da66d --- /dev/null +++ b/datacenter/utils/request.ts @@ -0,0 +1,31 @@ +import axios from 'axios'; + +axios.defaults.baseURL = 'http://30.183.153.244:5000'; + +axios.defaults.timeout = 10000; + +axios.interceptors.response.use( + response => response.data, + err => Promise.reject(err) +); + +export const sendGetRequest = (url: string, qs?: { [key: string]: any }) => { + if (qs) { + const str = Object.keys(qs) + .filter(k => qs[k] !== undefined && qs[k] !== '') + .map(k => `${k}=${qs[k]}`) + .join('&'); + if (str) { + url += `?${str}`; + } + } + axios.get(url, { + headers: { + "Content-Type": 'text/plain' + } + }).then(res => { + console.log(res, 'res'); + }).catch(err => { + console.log(err, 'err'); + }) +} From 12c08ac89933ed9361ca3859a75141f90c2e7100 Mon Sep 17 00:00:00 2001 From: "changhuiping.chp" Date: Tue, 27 Jun 2023 11:47:05 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E6=B7=BB=E5=8A=A0=E8=B7=B3=E8=BD=AC?= =?UTF-8?q?topbar=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- datacenter/app/layout.tsx | 6 ++- datacenter/app/nprogress.css | 32 +++++++++++++ datacenter/app/page.tsx | 5 +- datacenter/components/chatBox.tsx | 2 +- datacenter/components/leftSider.tsx | 5 ++ datacenter/components/topProgressBar.tsx | 59 ++++++++++++++++++++++++ datacenter/hooks/useAgentChat.ts | 2 - datacenter/package-lock.json | 26 +++++++++++ datacenter/package.json | 4 ++ 9 files changed, 133 insertions(+), 8 deletions(-) create mode 100644 datacenter/app/nprogress.css create mode 100644 datacenter/components/topProgressBar.tsx diff --git a/datacenter/app/layout.tsx b/datacenter/app/layout.tsx index f97573670..f5babbc38 100644 --- a/datacenter/app/layout.tsx +++ b/datacenter/app/layout.tsx @@ -1,19 +1,23 @@ "use client" import './globals.css' +import './nprogress.css'; import LeftSider from '@/components/leftSider'; import { CssVarsProvider, ThemeProvider } from '@mui/joy/styles'; import { joyTheme } from './defaultTheme'; +import TopProgressBar from '@/components/topProgressBar'; export default function RootLayout({ children, }: { children: React.ReactNode -}) { +}) { + return ( +
diff --git a/datacenter/app/nprogress.css b/datacenter/app/nprogress.css new file mode 100644 index 000000000..88d8db614 --- /dev/null +++ b/datacenter/app/nprogress.css @@ -0,0 +1,32 @@ +/* Make clicks pass-through */ +#nprogress { + pointer-events: none; + } + + #nprogress .bar { + background: var(--joy-palette-primary-500, #096BDE); + + position: fixed; + z-index: 10031; + top: 0; + left: 0; + + width: 100%; + height: 3px; + } + + /* Fancy blur effect */ + #nprogress .peg { + display: block; + position: absolute; + right: 0px; + width: 100px; + height: 100%; + box-shadow: 0 0 10px var(--joy-palette-primary-500, #096BDE), 0 0 5px var(--joy-palette-primary-500, #096BDE); + opacity: 1; + + -webkit-transform: rotate(3deg) translate(0px, -4px); + -ms-transform: rotate(3deg) translate(0px, -4px); + transform: rotate(3deg) translate(0px, -4px); + } + \ No newline at end of file diff --git a/datacenter/app/page.tsx b/datacenter/app/page.tsx index f5e90a519..d6f6dab28 100644 --- a/datacenter/app/page.tsx +++ b/datacenter/app/page.tsx @@ -22,7 +22,7 @@ export default function Home() { sendGetRequest('/v1/chat/dialogue/list', { }) } - console.log(mode, 'mode', radioClasses, 'radioClasses') + useEffect(() => { handleGetD(); }, []); @@ -75,7 +75,6 @@ export default function Home() { type="number" value={temperatureNum / 10} onChange={(e) => { - console.log(Number(e.target.value) * 10, '===') setTemperatureNum(Number(e.target.value) * 10); }} slotProps={{ @@ -92,7 +91,6 @@ export default function Home() { value={temperatureNum} max={10} onChange={(e, value) => { - console.log(e, 'e', value, 'v') setTemperatureNum(value); }} /> @@ -127,7 +125,6 @@ export default function Home() { max={1024} step={64} onChange={(e, value) => { - console.log(e, 'e', value, 'v') setTokenSize(value); }} /> diff --git a/datacenter/components/chatBox.tsx b/datacenter/components/chatBox.tsx index ef8530231..0a4ae2fa4 100644 --- a/datacenter/components/chatBox.tsx +++ b/datacenter/components/chatBox.tsx @@ -34,7 +34,7 @@ const ChatBoxComp = ({ const [isLoading, setIsLoading] = useState(false); const [firstMsg, setFirstMsg] = useState(); const [hideTemplateMessages, setHideTemplateMessages] = useState(false); - console.log(messages, 'mmm'); + const methods = useForm>({ resolver: zodResolver(Schema), defaultValues: {}, diff --git a/datacenter/components/leftSider.tsx b/datacenter/components/leftSider.tsx index ab934e24e..64cb9b2f3 100644 --- a/datacenter/components/leftSider.tsx +++ b/datacenter/components/leftSider.tsx @@ -37,6 +37,11 @@ const LeftSider = () => { const [chatSelect, setChatSelect] = useState(); const menus = useMemo(() => { return [{ + label: 'Home', + icon: , + route: '/', + active: pathname === '/', + }, { label: 'Agents', icon: , route: '/agents', diff --git a/datacenter/components/topProgressBar.tsx b/datacenter/components/topProgressBar.tsx new file mode 100644 index 000000000..70541190b --- /dev/null +++ b/datacenter/components/topProgressBar.tsx @@ -0,0 +1,59 @@ +import Router from 'next/router'; +import NProgress from 'nprogress'; + +let timer: any; +let state: any; +let activeRequests = 0; +const delay = 250; + +function load() { + if (state === 'loading') { + return; + } + + state = 'loading'; + + timer = setTimeout(function () { + NProgress.start(); + }, delay); // only show progress bar if it takes longer than the delay +} + +function stop() { + if (activeRequests > 0) { + return; + } + + state = 'stop'; + + clearTimeout(timer); + NProgress.done(); +} + +Router.events.on('routeChangeStart', load); +Router.events.on('routeChangeComplete', stop); +Router.events.on('routeChangeError', stop); + +const originalFetch = window.fetch; +window.fetch = async function (...args) { + if (activeRequests === 0) { + load(); + } + + activeRequests++; + + try { + const response = await originalFetch(...args); + return response; + } catch (error) { + return Promise.reject(error); + } finally { + activeRequests -= 1; + if (activeRequests === 0) { + stop(); + } + } +}; + +export default function TopProgressBar() { + return null; +} diff --git a/datacenter/hooks/useAgentChat.ts b/datacenter/hooks/useAgentChat.ts index faecdaa77..1122631e8 100644 --- a/datacenter/hooks/useAgentChat.ts +++ b/datacenter/hooks/useAgentChat.ts @@ -68,7 +68,6 @@ import { signal: ctrl.signal, async onopen(response) { - console.log('onopen', response); if ( response.ok && response.headers.get('content-type') === EventStreamContentType @@ -91,7 +90,6 @@ import { throw new RetriableError(); }, onerror(err) { - console.log('on error', err, Object.keys(err)); throw new Error(err); // if (err instanceof FatalError) { // ctrl.abort(); diff --git a/datacenter/package-lock.json b/datacenter/package-lock.json index eb9fc62bc..7e3ebae6c 100644 --- a/datacenter/package-lock.json +++ b/datacenter/package-lock.json @@ -33,6 +33,7 @@ "moment": "^2.29.4", "next": "13.4.7", "next-auth": "^4.20.1", + "nprogress": "^0.2.0", "postcss": "8.4.24", "react": "18.2.0", "react-dom": "18.2.0", @@ -43,6 +44,9 @@ "tailwindcss": "3.3.2", "typescript": "5.1.3", "zod": "^3.19.1" + }, + "devDependencies": { + "@types/nprogress": "^0.2.0" } }, "node_modules/@alloc/quick-lru": { @@ -2202,6 +2206,12 @@ "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.3.1.tgz", "integrity": "sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==" }, + "node_modules/@types/nprogress": { + "version": "0.2.0", + "resolved": "https://registry.npmmirror.com/@types/nprogress/-/nprogress-0.2.0.tgz", + "integrity": "sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==", + "dev": true + }, "node_modules/@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmmirror.com/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -5670,6 +5680,11 @@ "node": ">=12" } }, + "node_modules/nprogress": { + "version": "0.2.0", + "resolved": "https://registry.npmmirror.com/nprogress/-/nprogress-0.2.0.tgz", + "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==" + }, "node_modules/oauth": { "version": "0.9.15", "resolved": "https://registry.npmmirror.com/oauth/-/oauth-0.9.15.tgz", @@ -9711,6 +9726,12 @@ "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.3.1.tgz", "integrity": "sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==" }, + "@types/nprogress": { + "version": "0.2.0", + "resolved": "https://registry.npmmirror.com/@types/nprogress/-/nprogress-0.2.0.tgz", + "integrity": "sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==", + "dev": true + }, "@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmmirror.com/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -12544,6 +12565,11 @@ } } }, + "nprogress": { + "version": "0.2.0", + "resolved": "https://registry.npmmirror.com/nprogress/-/nprogress-0.2.0.tgz", + "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==" + }, "oauth": { "version": "0.9.15", "resolved": "https://registry.npmmirror.com/oauth/-/oauth-0.9.15.tgz", diff --git a/datacenter/package.json b/datacenter/package.json index 24d8c2ea7..5498489b6 100644 --- a/datacenter/package.json +++ b/datacenter/package.json @@ -34,6 +34,7 @@ "moment": "^2.29.4", "next": "13.4.7", "next-auth": "^4.20.1", + "nprogress": "^0.2.0", "postcss": "8.4.24", "react": "18.2.0", "react-dom": "18.2.0", @@ -44,5 +45,8 @@ "tailwindcss": "3.3.2", "typescript": "5.1.3", "zod": "^3.19.1" + }, + "devDependencies": { + "@types/nprogress": "^0.2.0" } } From 9697e6f20e2bc6516264b632d8d4eba7fdf80024 Mon Sep 17 00:00:00 2001 From: "shiweisong.ssw" Date: Tue, 27 Jun 2023 16:47:16 +0800 Subject: [PATCH 3/3] feat: refactor the UI framework --- .../datastores/documents/chunklist/page.tsx | 127 +++--- datacenter/app/datastores/documents/page.tsx | 144 +++---- datacenter/app/datastores/page.tsx | 400 +++++++++--------- datacenter/package-lock.json | 260 +++++++++++- datacenter/package.json | 4 +- 5 files changed, 599 insertions(+), 336 deletions(-) diff --git a/datacenter/app/datastores/documents/chunklist/page.tsx b/datacenter/app/datastores/documents/chunklist/page.tsx index 9cd701ff9..42c9da062 100644 --- a/datacenter/app/datastores/documents/chunklist/page.tsx +++ b/datacenter/app/datastores/documents/chunklist/page.tsx @@ -1,65 +1,76 @@ -"use client"; +'use client' import { useSearchParams } from 'next/navigation' -import React, { useState, useEffect } from 'react'; -import { Table, Popover } from 'antd'; -import moment from 'moment'; +import React, { useState, useEffect } from 'react' +import { Table } from '@/lib/mui' +import { Popover } from 'antd' const ChunkList = () => { - const spaceName = useSearchParams().get('spacename'); - const documentId = useSearchParams().get('documentid'); - const [chunkList, setChunkList] = useState([]); - useEffect(() => { - async function fetchChunks() { - const res = await fetch(`http://localhost:8000/knowledge/${spaceName}/chunk/list`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - document_id: documentId - }), - }); - const data = await res.json(); - if (data.success) { - setChunkList(data.data); - } + const spaceName = useSearchParams().get('spacename') + const documentId = useSearchParams().get('documentid') + const [chunkList, setChunkList] = useState([]) + useEffect(() => { + async function fetchChunks() { + const res = await fetch( + `http://localhost:8000/knowledge/${spaceName}/chunk/list`, + { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + document_id: documentId + }) } - fetchChunks(); - }, []); - return ( -
- { - return {text.length < 10 ? `${text.slice(0, 10)}...` : text}; - } - }, - { - title: 'Meta Data', - dataIndex: 'meta_info', - key: 'meta_info', - align: 'center', - render: (text: string, label: any) => { - return {text.length < 10 ? `${text.slice(0, 10)}...` : text}; - } - }, - ]} - dataSource={chunkList} - /> - - ) + ) + const data = await res.json() + if (data.success) { + setChunkList(data.data) + } + } + fetchChunks() + }, []) + return ( +
+
+ + + + + + + + + {chunkList.map((row: any) => ( + + + + + + ))} + +
NameContentMeta Data
{row.doc_name} + { + + {row.content.length > 10 + ? `${row.content.slice(0, 10)}...` + : row.content} + + } + + { + + {row.meta_info.length > 10 + ? `${row.meta_info.slice(0, 10)}...` + : row.meta_info} + + } +
+
+ ) } -export default ChunkList; \ No newline at end of file +export default ChunkList diff --git a/datacenter/app/datastores/documents/page.tsx b/datacenter/app/datastores/documents/page.tsx index 54bd31d5d..55d8baa26 100644 --- a/datacenter/app/datastores/documents/page.tsx +++ b/datacenter/app/datastores/documents/page.tsx @@ -1,84 +1,74 @@ -"use client"; +'use client' -import Link from 'next/link' import { useRouter, useSearchParams } from 'next/navigation' -import React, { useState, useEffect } from 'react'; -import { Table, Button } from 'antd'; -import moment from 'moment'; +import React, { useState, useEffect } from 'react' +import { Button, Table } from '@/lib/mui' +import moment from 'moment' const Documents = () => { - const router = useRouter(); - const spaceName = useSearchParams().get('name'); - const [documents, setDocuments] = useState([]); - useEffect(() => { - async function fetchDocuments() { - 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); - } + const router = useRouter() + const spaceName = useSearchParams().get('name') + const [documents, setDocuments] = useState([]) + useEffect(() => { + async function fetchDocuments() { + const res = await fetch( + `http://localhost:8000/knowledge/${spaceName}/document/list`, + { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({}) } - fetchDocuments(); - }, []); - return ( -
- moment(text).format('YYYY-MM-DD HH:MM:SS') - }, - { - title: 'Status', - dataIndex: 'status', - key: 'status', - align: 'center', - }, - { - title: 'Operation', - dataIndex: 'operation', - key: 'operation', - align: 'center', - render: (_: any, label: any) => { - return ( - - ) - } - }, - ]} - dataSource={documents} - /> - - ) + ) + const data = await res.json() + if (data.success) { + setDocuments(data.data) + } + } + fetchDocuments() + }, []) + return ( +
+
+ + + + + + + + + + + + {documents.map((row: any) => ( + + + + + + + + + ))} + +
NameTypeSizeLast SynchStatusOperation
{row.doc_name}{row.doc_type}{row.chunk_size}{moment(row.last_sync).format('YYYY-MM-DD HH:MM:SS')}{row.status} + { + + } +
+
+ ) } -export default Documents; \ No newline at end of file +export default Documents diff --git a/datacenter/app/datastores/page.tsx b/datacenter/app/datastores/page.tsx index aeca11bfe..61ef89b9c 100644 --- a/datacenter/app/datastores/page.tsx +++ b/datacenter/app/datastores/page.tsx @@ -1,233 +1,239 @@ 'use client' import { useRouter } from 'next/navigation' -import type { ProFormInstance } from '@ant-design/pro-components'; +import type { ProFormInstance } from '@ant-design/pro-components' import React, { useState, useRef, useEffect } from 'react' +import { message } from 'antd' import { - ProCard, - ProForm, - ProFormCheckbox, - ProFormDatePicker, - ProFormDateRangePicker, - ProFormSelect, - ProFormText, - ProFormTextArea, - StepsForm -} from '@ant-design/pro-components' -import { Button, Modal, Table, message } from 'antd' + Modal, + Button, + Table, + Sheet, + Stack, + Box, + Input, + styled +} from '@/lib/mui' + +const Item = styled(Sheet)(({ theme }) => ({ + width: '33%', + 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 stepsOfAddingSpace = [ + 'Knowledge Space Configuration', + 'Choose a Datasource type', + 'Setup the Datasource' +] const Index = () => { - const router = useRouter(); - const formRef = useRef(); - const [knowledgeSpaceList, setKnowledgeSpaceList] = useState([]); + const router = useRouter() + const formRef = useRef() + const [activeStep, setActiveStep] = useState(0) + const [knowledgeSpaceList, setKnowledgeSpaceList] = useState([]) const [isAddKnowledgeSpaceModalShow, setIsAddKnowledgeSpaceModalShow] = - useState(false); - const [knowledgeSpaceName, setKnowledgeSpaceName] = useState(''); - const [webPageUrl, setWebPageUrl] = useState(''); + useState(false) + const [knowledgeSpaceName, setKnowledgeSpaceName] = useState('') + const [webPageUrl, setWebPageUrl] = useState('') useEffect(() => { async function fetchData() { const res = await fetch('http://localhost:8000/knowledge/space/list', { method: 'POST', headers: { - 'Content-Type': 'application/json', + 'Content-Type': 'application/json' }, - body: JSON.stringify({}), - }); - const data = await res.json(); + body: JSON.stringify({}) + }) + const data = await res.json() if (data.success) { - setKnowledgeSpaceList(data.data); + setKnowledgeSpaceList(data.data) } } - fetchData(); - }, []); + fetchData() + }, []) return ( <>
Knowledge Spaces
-
- { - return router.push(`/datastores/documents?name=${text}`)}>{text} - } - }, - { - title: 'Provider', - dataIndex: 'vector_type', - key: 'vector_type', - align: 'center', - }, - { - title: 'Owner', - dataIndex: 'owner', - key: 'owner', - align: 'center', - }, - ]} - dataSource={knowledgeSpaceList} - /> +
+ + + + + + + + + {knowledgeSpaceList.map((row: any) => ( + + + + + + ))} + +
NameProviderOwner
+ { + + router.push(`/datastores/documents?name=${row.name}`) + } + > + {row.name} + + } + {row.vector_type}{row.owner}
console.log('ok')} - onCancel={() => setIsAddKnowledgeSpaceModalShow(false)} + onClose={() => setIsAddKnowledgeSpaceModalShow(false)} > - - - formRef={formRef} - onFinish={async () => { - message.success('success') - }} - formProps={{ - validateMessages: { - required: 'This is required' - } - }} - submitter={{ - render: (props) => { - if (props.step === 0) { - return ( - - ); - } else if (props.step === 1) { - return ( - - ); - } - - return [ - , - , - ]; - }, - }} - > - - name="base" - title="Knowledge Space Configuration" - onFinish={async () => { - console.log(formRef.current?.getFieldsValue()) - return true - }} - > - setKnowledgeSpaceName(e.target.value)} - /> - - - name="checkbox" - title="Choose a Datasource type" - onFinish={async () => { - console.log(formRef.current?.getFieldsValue()) - return true - }} - > - - - setWebPageUrl(e.target.value)} - /> - - - + ) + const data = await res.json() + if (data.success) { + setKnowledgeSpaceList(data.data) + } + } else { + message.error(data.err_msg || 'failed') + } + }} + > + Next + + + ) : activeStep === 1 ? ( + <> + + + + + ) : ( + <> + + Web Page URL: + setWebPageUrl(e.target.value)} + /> + + + + )} +