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'); + }) +}