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" } }