mirror of
https://github.com/csunny/DB-GPT.git
synced 2025-08-12 05:32:32 +00:00
Merge remote-tracking branch 'origin/new-page-framework' into llm_framework
This commit is contained in:
aries_ckt
commit
a6190a061c
3
datacenter/.eslintrc.json
Normal file
3
datacenter/.eslintrc.json
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"extends": "next/core-web-vitals"
|
||||||
|
}
|
||||||
35
datacenter/.gitignore
vendored
Normal file
35
datacenter/.gitignore
vendored
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env*.local
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
34
datacenter/README.md
Normal file
34
datacenter/README.md
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
First, run the development server:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
# or
|
||||||
|
yarn dev
|
||||||
|
# or
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||||
|
|
||||||
|
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||||
|
|
||||||
|
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
|
||||||
|
|
||||||
|
## Learn More
|
||||||
|
|
||||||
|
To learn more about Next.js, take a look at the following resources:
|
||||||
|
|
||||||
|
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||||
|
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||||
|
|
||||||
|
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||||
|
|
||||||
|
## Deploy on Vercel
|
||||||
|
|
||||||
|
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||||
|
|
||||||
|
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
||||||
13
datacenter/app/agents/layout.tsx
Normal file
13
datacenter/app/agents/layout.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { Box } from '@/lib/mui';
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{children}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
214
datacenter/app/agents/page.tsx
Normal file
214
datacenter/app/agents/page.tsx
Normal file
@ -0,0 +1,214 @@
|
|||||||
|
"use client"
|
||||||
|
import ChatBoxComp from '@/components/chatBox';
|
||||||
|
import { Chart, LineAdvance, Interval, Tooltip, getTheme } from 'bizcharts';
|
||||||
|
import { Card, CardContent, Typography, Grid, styled, Sheet } from '@/lib/mui';
|
||||||
|
import { Stack } from '@mui/material';
|
||||||
|
import useAgentChat from '@/hooks/useAgentChat';
|
||||||
|
|
||||||
|
|
||||||
|
const Item = styled(Sheet)(({ theme }) => ({
|
||||||
|
...theme.typography.body2,
|
||||||
|
padding: theme.spacing(1),
|
||||||
|
textAlign: 'center',
|
||||||
|
borderRadius: 4,
|
||||||
|
color: theme.vars.palette.text.secondary,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const Agents = () => {
|
||||||
|
const { handleChatSubmit, history } = useAgentChat({
|
||||||
|
queryAgentURL: `/api/agents/query`,
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
month: "Jan",
|
||||||
|
city: "Tokyo",
|
||||||
|
temperature: 7
|
||||||
|
},
|
||||||
|
{
|
||||||
|
month: "Feb",
|
||||||
|
city: "Tokyo",
|
||||||
|
temperature: 13
|
||||||
|
},
|
||||||
|
{
|
||||||
|
month: "Mar",
|
||||||
|
city: "Tokyo",
|
||||||
|
temperature: 16.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
month: "Apr",
|
||||||
|
city: "Tokyo",
|
||||||
|
temperature: 14.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
month: "May",
|
||||||
|
city: "Tokyo",
|
||||||
|
temperature: 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
month: "Jun",
|
||||||
|
city: "Tokyo",
|
||||||
|
temperature: 7.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
month: "Jul",
|
||||||
|
city: "Tokyo",
|
||||||
|
temperature: 9.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
month: "Aug",
|
||||||
|
city: "Tokyo",
|
||||||
|
temperature: 14.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
month: "Sep",
|
||||||
|
city: "Tokyo",
|
||||||
|
temperature: 9.3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
month: "Oct",
|
||||||
|
city: "Tokyo",
|
||||||
|
temperature: 8.3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
month: "Nov",
|
||||||
|
city: "Tokyo",
|
||||||
|
temperature: 8.9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
month: "Dec",
|
||||||
|
city: "Tokyo",
|
||||||
|
temperature: 5.6
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const d1 = [
|
||||||
|
{ year: '1951 年', sales: 0 },
|
||||||
|
{ year: '1952 年', sales: 52 },
|
||||||
|
{ year: '1956 年', sales: 61 },
|
||||||
|
{ year: '1957 年', sales: 45 },
|
||||||
|
{ year: '1958 年', sales: 48 },
|
||||||
|
{ year: '1959 年', sales: 38 },
|
||||||
|
{ year: '1960 年', sales: 38 },
|
||||||
|
{ year: '1962 年', sales: 38 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const topCard = [{
|
||||||
|
label: 'Revenue Won',
|
||||||
|
value: '$7,811,851'
|
||||||
|
}, {
|
||||||
|
label: 'Close %',
|
||||||
|
value: '37.7%'
|
||||||
|
}, {
|
||||||
|
label: 'AVG Days to Close',
|
||||||
|
value: '121'
|
||||||
|
}, {
|
||||||
|
label: 'Opportunities Won',
|
||||||
|
value: '526'
|
||||||
|
}];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='p-4 flex flex-row gap-6 min-h-full w-full'>
|
||||||
|
<div className='flex w-full'>
|
||||||
|
<Grid container spacing={2} sx={{ flexGrow: 1 }}>
|
||||||
|
<Grid xs={8}>
|
||||||
|
<Stack spacing={2} className='h-full'>
|
||||||
|
<Item>
|
||||||
|
<Grid container spacing={2}>
|
||||||
|
{topCard.map((item) => (
|
||||||
|
<Grid key={item.label} xs={3}>
|
||||||
|
<Card className="flex-1 h-full">
|
||||||
|
<CardContent className="justify-around">
|
||||||
|
<Typography gutterBottom variant="h5" component="div">
|
||||||
|
{item.label}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body2">
|
||||||
|
{item.value}
|
||||||
|
</Typography>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
</Item>
|
||||||
|
<Item className='flex-1'>
|
||||||
|
<Card className='h-full'>
|
||||||
|
<CardContent className='h-full'>
|
||||||
|
<Typography gutterBottom variant="h5" component="div">
|
||||||
|
Revenue Won by Month
|
||||||
|
</Typography>
|
||||||
|
<div className='flex-1'>
|
||||||
|
<Chart padding={[10, 20, 50, 40]} autoFit data={data} >
|
||||||
|
<LineAdvance
|
||||||
|
shape="smooth"
|
||||||
|
point
|
||||||
|
area
|
||||||
|
position="month*temperature"
|
||||||
|
color="city"
|
||||||
|
/>
|
||||||
|
</Chart>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Item>
|
||||||
|
<Item className='flex-1'>
|
||||||
|
<Grid container spacing={2} className='h-full'>
|
||||||
|
<Grid xs={4} className='h-full'>
|
||||||
|
<Card className='flex-1 h-full'>
|
||||||
|
<CardContent className='h-full'>
|
||||||
|
<Typography gutterBottom variant="h5" component="div">
|
||||||
|
Close % by Month
|
||||||
|
</Typography>
|
||||||
|
<div className='flex-1'>
|
||||||
|
<Chart autoFit data={d1} >
|
||||||
|
<Interval position="year*sales" style={{ lineWidth: 3, stroke: getTheme().colors10[0] }} />
|
||||||
|
<Tooltip shared />
|
||||||
|
</Chart>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
<Grid xs={4} className='h-full'>
|
||||||
|
<Card className='flex-1 h-full'>
|
||||||
|
<CardContent className='h-full'>
|
||||||
|
<Typography gutterBottom variant="h5" component="div">
|
||||||
|
Close % by Month
|
||||||
|
</Typography>
|
||||||
|
<div className='flex-1'>
|
||||||
|
<Chart autoFit data={d1} >
|
||||||
|
<Interval position="year*sales" style={{ lineWidth: 3, stroke: getTheme().colors10[0] }} />
|
||||||
|
<Tooltip shared />
|
||||||
|
</Chart>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
<Grid xs={4} className='h-full'>
|
||||||
|
<Card className='flex-1 h-full'>
|
||||||
|
<CardContent className='h-full'>
|
||||||
|
<Typography gutterBottom variant="h5" component="div">
|
||||||
|
Close % by Month
|
||||||
|
</Typography>
|
||||||
|
<div className='flex-1'>
|
||||||
|
<Chart autoFit data={d1} >
|
||||||
|
<Interval position="year*sales" style={{ lineWidth: 3, stroke: getTheme().colors10[0] }} />
|
||||||
|
<Tooltip shared />
|
||||||
|
</Chart>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Item>
|
||||||
|
</Stack>
|
||||||
|
</Grid>
|
||||||
|
<Grid xs={4}>
|
||||||
|
<ChatBoxComp messages={history} onSubmit={handleChatSubmit}/>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Agents;
|
||||||
201
datacenter/app/datastores/page.tsx
Normal file
201
datacenter/app/datastores/page.tsx
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import type { ProFormInstance } from '@ant-design/pro-components';
|
||||||
|
import React, { useState, useRef } from 'react'
|
||||||
|
import {
|
||||||
|
ProCard,
|
||||||
|
ProForm,
|
||||||
|
ProFormCheckbox,
|
||||||
|
ProFormDatePicker,
|
||||||
|
ProFormDateRangePicker,
|
||||||
|
ProFormSelect,
|
||||||
|
ProFormText,
|
||||||
|
ProFormTextArea,
|
||||||
|
StepsForm
|
||||||
|
} from '@ant-design/pro-components'
|
||||||
|
import { Button, Modal, message } from 'antd'
|
||||||
|
|
||||||
|
const Index = () => {
|
||||||
|
const formRef = useRef<ProFormInstance>();
|
||||||
|
const [isAddKnowledgeSpaceModalShow, setIsAddKnowledgeSpaceModalShow] =
|
||||||
|
useState<boolean>(false);
|
||||||
|
const [knowledgeSpaceName, setKnowledgeSpaceName] = useState<string>('');
|
||||||
|
const [webUrlName, setWebUrlName] = useState<string>('');
|
||||||
|
const [webPageUrl, setWebPageUrl] = useState<string>('');
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="header">
|
||||||
|
<div>Knowledge Spaces</div>
|
||||||
|
<Button onClick={() => setIsAddKnowledgeSpaceModalShow(true)} type='primary'>
|
||||||
|
+ New Knowledge Space
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<Modal
|
||||||
|
title="Add Knowledge Space"
|
||||||
|
footer={null}
|
||||||
|
width={900}
|
||||||
|
open={isAddKnowledgeSpaceModalShow}
|
||||||
|
onOk={() => console.log('ok')}
|
||||||
|
onCancel={() => setIsAddKnowledgeSpaceModalShow(false)}
|
||||||
|
>
|
||||||
|
<ProCard>
|
||||||
|
<StepsForm<{
|
||||||
|
name: string
|
||||||
|
}>
|
||||||
|
formRef={formRef}
|
||||||
|
onFinish={async () => {
|
||||||
|
message.success('success')
|
||||||
|
}}
|
||||||
|
formProps={{
|
||||||
|
validateMessages: {
|
||||||
|
required: 'This is required'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
submitter={{
|
||||||
|
render: (props) => {
|
||||||
|
if (props.step === 0) {
|
||||||
|
return (
|
||||||
|
<Button type="primary" onClick={async () => {
|
||||||
|
if (knowledgeSpaceName === '') {
|
||||||
|
props.onSubmit?.()
|
||||||
|
} else {
|
||||||
|
props.onSubmit?.();
|
||||||
|
const res = await fetch('/knowledge/space/add', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
name: knowledgeSpaceName,
|
||||||
|
vector_type: "Chroma",
|
||||||
|
owner: "keting",
|
||||||
|
desc: "test1"
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
const data = await res.json();
|
||||||
|
if (data.success) {
|
||||||
|
props.onSubmit?.();
|
||||||
|
message.success('success');
|
||||||
|
} else {
|
||||||
|
message.error(data.err_msg || 'failed');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
Next {'>'}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
} else if (props.step === 1) {
|
||||||
|
return (
|
||||||
|
<Button type="primary" onClick={() => props.onSubmit?.()}>
|
||||||
|
Web Page {'>'}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return [
|
||||||
|
<Button key="gotoTwo" onClick={() => props.onPre?.()}>
|
||||||
|
Previous {'<'}
|
||||||
|
</Button>,
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
key="goToTree"
|
||||||
|
onClick={async () => {
|
||||||
|
props.onSubmit?.();
|
||||||
|
const res = await fetch(`/knowledge/${knowledgeSpaceName}/document/add`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
doc_name: webUrlName,
|
||||||
|
doc_type: webPageUrl
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
const data = await res.json();
|
||||||
|
if (data.success) {
|
||||||
|
props.onSubmit?.();
|
||||||
|
message.success('success');
|
||||||
|
} else {
|
||||||
|
message.error(data.err_msg || 'failed');
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Finish
|
||||||
|
</Button>,
|
||||||
|
];
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<StepsForm.StepForm<{
|
||||||
|
name: string
|
||||||
|
}>
|
||||||
|
name="base"
|
||||||
|
title="Knowledge Space Configuration"
|
||||||
|
onFinish={async () => {
|
||||||
|
console.log(formRef.current?.getFieldsValue())
|
||||||
|
return true
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProFormText
|
||||||
|
name="name"
|
||||||
|
label="Knowledge Space Name"
|
||||||
|
width="lg"
|
||||||
|
placeholder="Please input the name"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
onChange={(e: any) => setKnowledgeSpaceName(e.target.value)}
|
||||||
|
/>
|
||||||
|
</StepsForm.StepForm>
|
||||||
|
<StepsForm.StepForm<{
|
||||||
|
checkbox: string
|
||||||
|
}>
|
||||||
|
name="checkbox"
|
||||||
|
title="Choose a Datasource type"
|
||||||
|
onFinish={async () => {
|
||||||
|
console.log(formRef.current?.getFieldsValue())
|
||||||
|
return true
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
</StepsForm.StepForm>
|
||||||
|
<StepsForm.StepForm
|
||||||
|
name="time"
|
||||||
|
title="Setup the Datasource"
|
||||||
|
>
|
||||||
|
<ProFormText
|
||||||
|
name="webUrlName"
|
||||||
|
label="Name"
|
||||||
|
width="lg"
|
||||||
|
placeholder="Please input the name"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
onChange={(e: any) => setWebUrlName(e.target.value)}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
name="webPageUrl"
|
||||||
|
label="Web Page URL"
|
||||||
|
width="lg"
|
||||||
|
placeholder="Please input the name"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
onChange={(e: any) => setWebPageUrl(e.target.value)}
|
||||||
|
/>
|
||||||
|
</StepsForm.StepForm>
|
||||||
|
</StepsForm>
|
||||||
|
</ProCard>
|
||||||
|
</Modal>
|
||||||
|
<style jsx>{`
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.datasource-type-wrap {
|
||||||
|
height: 100px;
|
||||||
|
line-height: 100px;
|
||||||
|
border: 1px solid black;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Index
|
||||||
63
datacenter/app/defaultTheme.ts
Normal file
63
datacenter/app/defaultTheme.ts
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
import { extendTheme } from '@mui/joy/styles';
|
||||||
|
import colors from '@mui/joy/colors';
|
||||||
|
|
||||||
|
export const joyTheme = extendTheme({
|
||||||
|
colorSchemes: {
|
||||||
|
light: {
|
||||||
|
palette: {
|
||||||
|
mode: 'dark',
|
||||||
|
primary: {
|
||||||
|
...colors.purple,
|
||||||
|
},
|
||||||
|
neutral: {
|
||||||
|
plainColor: '#25252D',
|
||||||
|
plainHoverColor: '#131318',
|
||||||
|
plainHoverBg: '#EBEBEF',
|
||||||
|
plainActiveBg: '#D8D8DF',
|
||||||
|
plainDisabledColor: '#B9B9C6'
|
||||||
|
},
|
||||||
|
background: {
|
||||||
|
body: '#fff',
|
||||||
|
surface: '#fff'
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
primary: '#25252D'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dark: {
|
||||||
|
palette: {
|
||||||
|
mode: 'light',
|
||||||
|
primary: {
|
||||||
|
...colors.purple,
|
||||||
|
},
|
||||||
|
neutral: {
|
||||||
|
plainColor: '#D8D8DF',
|
||||||
|
plainHoverColor: '#F7F7F8',
|
||||||
|
plainHoverBg: '#25252D',
|
||||||
|
plainActiveBg: '#434356',
|
||||||
|
plainDisabledColor: '#434356'
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
primary: '#EBEBEF'
|
||||||
|
},
|
||||||
|
background: {
|
||||||
|
body: '#09090D',
|
||||||
|
surface: '#1e293b40'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
body: 'Josefin Sans, sans-serif',
|
||||||
|
display: 'Josefin Sans, sans-serif',
|
||||||
|
},
|
||||||
|
typography: {
|
||||||
|
display1: {
|
||||||
|
background:
|
||||||
|
'linear-gradient(-30deg, var(--joy-palette-primary-900), var(--joy-palette-primary-400))',
|
||||||
|
WebkitBackgroundClip: 'text',
|
||||||
|
WebkitTextFillColor: 'transparent',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
BIN
datacenter/app/favicon.ico
Normal file
BIN
datacenter/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
12
datacenter/app/globals.css
Normal file
12
datacenter/app/globals.css
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
30
datacenter/app/layout.tsx
Normal file
30
datacenter/app/layout.tsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
"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';
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<html lang="en" className="min-h-full font-sans">
|
||||||
|
<body className={`min-h-screen font-sans`}>
|
||||||
|
<ThemeProvider theme={joyTheme}>
|
||||||
|
<CssVarsProvider theme={joyTheme} defaultMode="light">
|
||||||
|
<div className='min-h-screen flex flex-col'>
|
||||||
|
<Header />
|
||||||
|
<div className="flex flex-1 flex-row">
|
||||||
|
<LeftSider />
|
||||||
|
<div className='flex-1'>{children}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CssVarsProvider>
|
||||||
|
</ThemeProvider>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
)
|
||||||
|
}
|
||||||
9
datacenter/app/page.tsx
Normal file
9
datacenter/app/page.tsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import Image from 'next/image'
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
Hello GPT
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
234
datacenter/components/chatBox.tsx
Normal file
234
datacenter/components/chatBox.tsx
Normal file
@ -0,0 +1,234 @@
|
|||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import SendRoundedIcon from '@mui/icons-material/SendRounded';
|
||||||
|
import Button from '@mui/joy/Button';
|
||||||
|
import Card from '@mui/joy/Card';
|
||||||
|
import CircularProgress from '@mui/joy/CircularProgress';
|
||||||
|
import IconButton from '@mui/joy/IconButton';
|
||||||
|
import Input from '@mui/joy/Input';
|
||||||
|
import Stack from '@mui/joy/Stack';
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import ReactMarkdown from 'react-markdown';
|
||||||
|
import remarkGfm from 'remark-gfm';
|
||||||
|
import { z } from 'zod';
|
||||||
|
import { Message } from '@/types';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
messages: Message[];
|
||||||
|
onSubmit: (message: string) => Promise<any>;
|
||||||
|
messageTemplates?: string[];
|
||||||
|
initialMessage?: string;
|
||||||
|
readOnly?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Schema = z.object({ query: z.string().min(1) });
|
||||||
|
|
||||||
|
const ChatBoxComp = ({
|
||||||
|
messages,
|
||||||
|
onSubmit,
|
||||||
|
messageTemplates,
|
||||||
|
initialMessage,
|
||||||
|
readOnly,
|
||||||
|
}: Props) => {
|
||||||
|
const scrollableRef = React.useRef<HTMLDivElement>(null);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [firstMsg, setFirstMsg] = useState<Message>();
|
||||||
|
const [hideTemplateMessages, setHideTemplateMessages] = useState(false);
|
||||||
|
console.log(messages, 'mmm');
|
||||||
|
const methods = useForm<z.infer<typeof Schema>>({
|
||||||
|
resolver: zodResolver(Schema),
|
||||||
|
defaultValues: {},
|
||||||
|
});
|
||||||
|
|
||||||
|
const submit = async ({ query }: z.infer<typeof Schema>) => {
|
||||||
|
try {
|
||||||
|
setIsLoading(true);
|
||||||
|
setHideTemplateMessages(true);
|
||||||
|
methods.reset();
|
||||||
|
await onSubmit(query);
|
||||||
|
} catch (err) {
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!scrollableRef.current) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
scrollableRef.current.scrollTo(0, scrollableRef.current.scrollHeight);
|
||||||
|
}, [messages?.length]);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
setFirstMsg(
|
||||||
|
initialMessage ? { from: 'agent', message: initialMessage } : undefined
|
||||||
|
);
|
||||||
|
}, 0);
|
||||||
|
}, [initialMessage]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stack
|
||||||
|
direction={'column'}
|
||||||
|
gap={2}
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
flex: 1,
|
||||||
|
flexBasis: '100%',
|
||||||
|
maxWidth: '700px',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
maxHeight: '100%',
|
||||||
|
minHeight: '100%',
|
||||||
|
mx: 'auto',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Stack
|
||||||
|
ref={scrollableRef}
|
||||||
|
direction={'column'}
|
||||||
|
gap={2}
|
||||||
|
sx={{
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
maxWidth: '100%',
|
||||||
|
width: '100%',
|
||||||
|
mx: 'auto',
|
||||||
|
flex: 1,
|
||||||
|
maxHeight: '100%',
|
||||||
|
overflowY: 'auto',
|
||||||
|
p: 2,
|
||||||
|
border: '1px solid',
|
||||||
|
borderColor: 'var(--joy-palette-divider)'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{firstMsg && (
|
||||||
|
<Card
|
||||||
|
size="sm"
|
||||||
|
variant={'outlined'}
|
||||||
|
color={'primary'}
|
||||||
|
className="message-agent"
|
||||||
|
sx={{
|
||||||
|
mr: 'auto',
|
||||||
|
ml: 'none',
|
||||||
|
whiteSpace: 'pre-wrap',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{firstMsg?.message}
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{messages.map((each, index) => (
|
||||||
|
<Stack
|
||||||
|
key={index}
|
||||||
|
sx={{
|
||||||
|
mr: each.from === 'agent' ? 'auto' : 'none',
|
||||||
|
ml: each.from === 'human' ? 'auto' : 'none',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Card
|
||||||
|
size="sm"
|
||||||
|
variant={'outlined'}
|
||||||
|
className={
|
||||||
|
each.from === 'agent' ? 'message-agent' : 'message-human'
|
||||||
|
}
|
||||||
|
color={each.from === 'agent' ? 'primary' : 'neutral'}
|
||||||
|
sx={(theme) => ({
|
||||||
|
px: 2,
|
||||||
|
'ol, ul': {
|
||||||
|
my: 0,
|
||||||
|
pl: 2,
|
||||||
|
},
|
||||||
|
ol: {
|
||||||
|
listStyle: 'numeric',
|
||||||
|
},
|
||||||
|
ul: {
|
||||||
|
listStyle: 'disc',
|
||||||
|
mb: 2,
|
||||||
|
},
|
||||||
|
li: {
|
||||||
|
my: 1,
|
||||||
|
},
|
||||||
|
a: {
|
||||||
|
textDecoration: 'underline',
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<ReactMarkdown remarkPlugins={[remarkGfm]} linkTarget={'_blank'}>
|
||||||
|
{each.message}
|
||||||
|
</ReactMarkdown>
|
||||||
|
</Card>
|
||||||
|
</Stack>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{isLoading && (
|
||||||
|
<CircularProgress
|
||||||
|
variant="soft"
|
||||||
|
color="neutral"
|
||||||
|
size="sm"
|
||||||
|
sx={{ mx: 'auto', my: 2 }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
{!readOnly && (
|
||||||
|
<form
|
||||||
|
style={{
|
||||||
|
maxWidth: '100%',
|
||||||
|
width: '100%',
|
||||||
|
position: 'relative',
|
||||||
|
display: 'flex',
|
||||||
|
marginTop: 'auto',
|
||||||
|
overflow: 'visible',
|
||||||
|
background: 'none',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginLeft: 'auto',
|
||||||
|
marginRight: 'auto',
|
||||||
|
}}
|
||||||
|
onSubmit={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
methods.handleSubmit(submit)(e);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{!hideTemplateMessages && (messageTemplates?.length || 0) > 0 && (
|
||||||
|
<Stack
|
||||||
|
direction="row"
|
||||||
|
gap={1}
|
||||||
|
sx={{
|
||||||
|
position: 'absolute',
|
||||||
|
zIndex: 1,
|
||||||
|
transform: 'translateY(-100%)',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
mt: -1,
|
||||||
|
left: '0',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{messageTemplates?.map((each, idx) => (
|
||||||
|
<Button
|
||||||
|
key={idx}
|
||||||
|
size="sm"
|
||||||
|
variant="soft"
|
||||||
|
onClick={() => submit({ query: each })}
|
||||||
|
>
|
||||||
|
{each}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Input
|
||||||
|
sx={{ width: '100%' }}
|
||||||
|
variant="outlined"
|
||||||
|
endDecorator={
|
||||||
|
<IconButton type="submit" disabled={isLoading}>
|
||||||
|
<SendRoundedIcon />
|
||||||
|
</IconButton>
|
||||||
|
}
|
||||||
|
{...methods.register('query')}
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ChatBoxComp;
|
||||||
32
datacenter/components/colorSchemeToggle.tsx
Normal file
32
datacenter/components/colorSchemeToggle.tsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded';
|
||||||
|
import LightModeRoundedIcon from '@mui/icons-material/LightModeRounded';
|
||||||
|
import { IconButton,useColorScheme } from '@/lib/mui';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export default function ColorSchemeToggle() {
|
||||||
|
const { mode, setMode } = useColorScheme();
|
||||||
|
const [mounted, setMounted] = React.useState(false);
|
||||||
|
React.useEffect(() => {
|
||||||
|
setMounted(true);
|
||||||
|
}, []);
|
||||||
|
if (!mounted) {
|
||||||
|
return <IconButton size="sm" variant="outlined" color="primary" />;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<IconButton
|
||||||
|
id="toggle-mode"
|
||||||
|
size="sm"
|
||||||
|
variant="outlined"
|
||||||
|
color="primary"
|
||||||
|
onClick={() => {
|
||||||
|
if (mode === 'light') {
|
||||||
|
setMode('dark');
|
||||||
|
} else {
|
||||||
|
setMode('light');
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{mode === 'light' ? <DarkModeRoundedIcon /> : <LightModeRoundedIcon />}
|
||||||
|
</IconButton>
|
||||||
|
);
|
||||||
|
}
|
||||||
43
datacenter/components/header.tsx
Normal file
43
datacenter/components/header.tsx
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
import { Box, Typography } from '@/lib/mui';
|
||||||
|
import Image from 'next/image';
|
||||||
|
import ColorSchemeToggle from './colorSchemeToggle';
|
||||||
|
|
||||||
|
const Header = () => {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
p: 2,
|
||||||
|
gap: 2,
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
gridColumn: '1 / -1',
|
||||||
|
borderBottom: '1px solid',
|
||||||
|
borderColor: 'divider',
|
||||||
|
position: 'sticky',
|
||||||
|
top: 0,
|
||||||
|
zIndex: 1100,
|
||||||
|
background: 'var(--joy-palette-background-body)'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className='flex items-center justify-center gap-3'>
|
||||||
|
<Image
|
||||||
|
src="/databerry-logo-icon.png"
|
||||||
|
width="200"
|
||||||
|
height="200"
|
||||||
|
className='w-12'
|
||||||
|
alt="Databerry"
|
||||||
|
/>
|
||||||
|
<Typography component="h1" fontWeight="xl">
|
||||||
|
DB-GPT
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<ColorSchemeToggle />
|
||||||
|
</div>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Header;
|
||||||
76
datacenter/components/leftSider.tsx
Normal file
76
datacenter/components/leftSider.tsx
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
"use client";
|
||||||
|
import React, { useMemo } from 'react';
|
||||||
|
import { usePathname } from 'next/navigation';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { Box, List, ListItem, ListItemButton, ListItemDecorator, ListItemContent } from '@/lib/mui';
|
||||||
|
import SmartToyRoundedIcon from '@mui/icons-material/SmartToyRounded'; // Icons import
|
||||||
|
import StorageRoundedIcon from '@mui/icons-material/StorageRounded';
|
||||||
|
|
||||||
|
const LeftSider = () => {
|
||||||
|
const pathname = usePathname();
|
||||||
|
console.log(pathname, 'router')
|
||||||
|
const menus = useMemo(() => {
|
||||||
|
return [{
|
||||||
|
label: 'Agents',
|
||||||
|
icon: <SmartToyRoundedIcon fontSize="small" />,
|
||||||
|
route: '/agents',
|
||||||
|
active: pathname === '/agents',
|
||||||
|
}, {
|
||||||
|
label: 'Datastores',
|
||||||
|
route: '/datastores',
|
||||||
|
icon: <StorageRoundedIcon fontSize="small" />,
|
||||||
|
active: pathname === '/datastores'
|
||||||
|
}];
|
||||||
|
}, [pathname]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
sx={[
|
||||||
|
{
|
||||||
|
p: 2,
|
||||||
|
borderRight: '1px solid',
|
||||||
|
borderColor: 'divider',
|
||||||
|
display: {
|
||||||
|
xs: 'none',
|
||||||
|
sm: 'initial',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<List size="sm" sx={{ '--ListItem-radius': '8px' }}>
|
||||||
|
<ListItem nested>
|
||||||
|
<List
|
||||||
|
size="sm"
|
||||||
|
aria-labelledby="nav-list-browse"
|
||||||
|
sx={{
|
||||||
|
'& .JoyListItemButton-root': { p: '8px' },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{menus.map((each) => (
|
||||||
|
<Link key={each.route} href={each.route}>
|
||||||
|
<ListItem>
|
||||||
|
<ListItemButton
|
||||||
|
selected={each.active}
|
||||||
|
variant={each.active ? 'soft' : 'plain'}
|
||||||
|
>
|
||||||
|
<ListItemDecorator
|
||||||
|
sx={{
|
||||||
|
color: each.active ? 'inherit' : 'neutral.500',
|
||||||
|
'--ListItemDecorator-size': '26px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{each.icon}
|
||||||
|
</ListItemDecorator>
|
||||||
|
<ListItemContent>{each.label}</ListItemContent>
|
||||||
|
</ListItemButton>
|
||||||
|
</ListItem>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</List>
|
||||||
|
</ListItem>
|
||||||
|
</List>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LeftSider;
|
||||||
175
datacenter/hooks/useAgentChat.ts
Normal file
175
datacenter/hooks/useAgentChat.ts
Normal file
@ -0,0 +1,175 @@
|
|||||||
|
import {
|
||||||
|
EventStreamContentType,
|
||||||
|
fetchEventSource,
|
||||||
|
} from '@microsoft/fetch-event-source';
|
||||||
|
import { ApiError, ApiErrorType } from '@/utils/api-error';
|
||||||
|
import useStateReducer from './useStateReducer';
|
||||||
|
import useVisitorId from './useVisitorId';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
queryAgentURL: string;
|
||||||
|
queryHistoryURL?: string;
|
||||||
|
channel?: "dashboard" | "website" | "slack" | "crisp";
|
||||||
|
queryBody?: any;
|
||||||
|
};
|
||||||
|
|
||||||
|
const useAgentChat = ({
|
||||||
|
queryAgentURL,
|
||||||
|
queryHistoryURL,
|
||||||
|
channel,
|
||||||
|
queryBody,
|
||||||
|
}: Props) => {
|
||||||
|
const [state, setState] = useStateReducer({
|
||||||
|
history: [{
|
||||||
|
from: 'human',
|
||||||
|
message: 'hello',
|
||||||
|
}, {
|
||||||
|
from: 'agent',
|
||||||
|
message: 'Hello! How can I assist you today?',
|
||||||
|
}] as { from: 'human' | 'agent'; message: string; id?: string }[],
|
||||||
|
});
|
||||||
|
|
||||||
|
const { visitorId } = useVisitorId();
|
||||||
|
|
||||||
|
const handleChatSubmit = async (message: string) => {
|
||||||
|
if (!message) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const history = [...state.history, { from: 'human', message }];
|
||||||
|
const nextIndex = history.length;
|
||||||
|
|
||||||
|
setState({
|
||||||
|
history: history as any,
|
||||||
|
});
|
||||||
|
|
||||||
|
let answer = '';
|
||||||
|
let error = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const ctrl = new AbortController();
|
||||||
|
let buffer = '';
|
||||||
|
|
||||||
|
class RetriableError extends Error {}
|
||||||
|
class FatalError extends Error {}
|
||||||
|
|
||||||
|
await fetchEventSource(queryAgentURL, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
...queryBody,
|
||||||
|
streaming: true,
|
||||||
|
query: message,
|
||||||
|
visitorId: visitorId,
|
||||||
|
channel,
|
||||||
|
}),
|
||||||
|
signal: ctrl.signal,
|
||||||
|
|
||||||
|
async onopen(response) {
|
||||||
|
console.log('onopen', response);
|
||||||
|
if (
|
||||||
|
response.ok &&
|
||||||
|
response.headers.get('content-type') === EventStreamContentType
|
||||||
|
) {
|
||||||
|
return; // everything's good
|
||||||
|
} else if (
|
||||||
|
response.status >= 400 &&
|
||||||
|
response.status < 500 &&
|
||||||
|
response.status !== 429
|
||||||
|
) {
|
||||||
|
if (response.status === 402) {
|
||||||
|
throw new ApiError(ApiErrorType.USAGE_LIMIT);
|
||||||
|
}
|
||||||
|
throw new FatalError();
|
||||||
|
} else {
|
||||||
|
throw new RetriableError();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onclose() {
|
||||||
|
throw new RetriableError();
|
||||||
|
},
|
||||||
|
onerror(err) {
|
||||||
|
console.log('on error', err, Object.keys(err));
|
||||||
|
throw new Error(err);
|
||||||
|
// if (err instanceof FatalError) {
|
||||||
|
// ctrl.abort();
|
||||||
|
// throw new Error(); // rethrow to stop the operation
|
||||||
|
// } else if (err instanceof ApiError) {
|
||||||
|
// console.log('ApiError', ApiError);
|
||||||
|
// throw new Error();
|
||||||
|
// } else {
|
||||||
|
// throw new Error(err);
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
onmessage: (event) => {
|
||||||
|
console.log(event, 'event');
|
||||||
|
if (event.data === '[DONE]') {
|
||||||
|
ctrl.abort();
|
||||||
|
} else if (event.data?.startsWith('[ERROR]')) {
|
||||||
|
ctrl.abort();
|
||||||
|
|
||||||
|
setState({
|
||||||
|
history: [
|
||||||
|
...history,
|
||||||
|
{
|
||||||
|
from: 'agent',
|
||||||
|
message: event.data.replace('[ERROR]', ''),
|
||||||
|
} as any,
|
||||||
|
],
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
buffer += decodeURIComponent(event.data) as string;
|
||||||
|
const h = [...history];
|
||||||
|
if (h?.[nextIndex]) {
|
||||||
|
h[nextIndex].message = `${buffer}`;
|
||||||
|
} else {
|
||||||
|
h.push({ from: 'agent', message: buffer });
|
||||||
|
}
|
||||||
|
setState({
|
||||||
|
history: h as any,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
console.log('err', err);
|
||||||
|
setState({
|
||||||
|
history: [
|
||||||
|
...history,
|
||||||
|
{ from: 'agent', message: answer || '请求出错' as string },
|
||||||
|
] as any,
|
||||||
|
});
|
||||||
|
// if (err instanceof ApiError) {
|
||||||
|
// if (err?.message) {
|
||||||
|
// error = err?.message;
|
||||||
|
|
||||||
|
// if (error === ApiErrorType.USAGE_LIMIT) {
|
||||||
|
// answer =
|
||||||
|
// 'Usage limit reached. Please upgrade your plan to get higher usage.';
|
||||||
|
// } else {
|
||||||
|
// answer = `Error: ${error}`;
|
||||||
|
// }
|
||||||
|
// } else {
|
||||||
|
// answer = `Error: ${error}`;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// setState({
|
||||||
|
// history: [
|
||||||
|
// ...history,
|
||||||
|
// { from: 'agent', message: answer as string },
|
||||||
|
// ] as any,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
handleChatSubmit,
|
||||||
|
history: state.history,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useAgentChat;
|
||||||
|
|
||||||
17
datacenter/hooks/useStateReducer.ts
Normal file
17
datacenter/hooks/useStateReducer.ts
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import { useReducer } from 'react';
|
||||||
|
|
||||||
|
const useStateReducer = <T>(initialState: T) => {
|
||||||
|
const methods = useReducer(
|
||||||
|
(state: T, newState: Partial<T>) => ({
|
||||||
|
...state,
|
||||||
|
...newState,
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
...initialState,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
return methods;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useStateReducer;
|
||||||
28
datacenter/hooks/useVisitorId.ts
Normal file
28
datacenter/hooks/useVisitorId.ts
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import React, { useEffect } from 'react';
|
||||||
|
|
||||||
|
import cuid from 'cuid';
|
||||||
|
|
||||||
|
const useVisitorId = () => {
|
||||||
|
const [visitorId, setVisitorId] = React.useState('');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
(async () => {
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
let id = localStorage.getItem('visitorId');
|
||||||
|
|
||||||
|
if (!id) {
|
||||||
|
id = cuid();
|
||||||
|
localStorage.setItem('visitorId', id);
|
||||||
|
}
|
||||||
|
|
||||||
|
setVisitorId(id);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return {
|
||||||
|
visitorId,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useVisitorId;
|
||||||
8
datacenter/next.config.js
Normal file
8
datacenter/next.config.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
/** @type {import('next').NextConfig} */
|
||||||
|
const nextConfig = {
|
||||||
|
experimental: {
|
||||||
|
esmExternals: 'loose'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = nextConfig
|
||||||
14396
datacenter/package-lock.json
generated
Normal file
14396
datacenter/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
47
datacenter/package.json
Normal file
47
datacenter/package.json
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
{
|
||||||
|
"name": "datacenter",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "next lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@ant-design/pro-components": "^2.6.2",
|
||||||
|
"@emotion/cache": "^11.10.5",
|
||||||
|
"@emotion/react": "^11.10.6",
|
||||||
|
"@emotion/styled": "^11.10.6",
|
||||||
|
"@hookform/resolvers": "^3.0.0",
|
||||||
|
"@microsoft/fetch-event-source": "^2.0.1",
|
||||||
|
"@mui/icons-material": "^5.11.16",
|
||||||
|
"@mui/joy": "5.0.0-alpha.72",
|
||||||
|
"@mui/lab": "5.0.0-alpha.124",
|
||||||
|
"@mui/material": "^5.11.14",
|
||||||
|
"@mui/utils": "^5.11.13",
|
||||||
|
"@prisma/client": "^4.12.0",
|
||||||
|
"@types/node": "20.3.1",
|
||||||
|
"@types/react": "18.2.14",
|
||||||
|
"@types/react-dom": "18.2.6",
|
||||||
|
"antd": "^5.6.2",
|
||||||
|
"autoprefixer": "10.4.14",
|
||||||
|
"axios": "^1.3.4",
|
||||||
|
"bizcharts": "^4.1.22",
|
||||||
|
"cuid": "^3.0.0",
|
||||||
|
"eslint": "8.43.0",
|
||||||
|
"eslint-config-next": "13.4.7",
|
||||||
|
"next": "13.4.7",
|
||||||
|
"next-auth": "^4.20.1",
|
||||||
|
"postcss": "8.4.24",
|
||||||
|
"react": "18.2.0",
|
||||||
|
"react-dom": "18.2.0",
|
||||||
|
"react-hook-form": "^7.43.8",
|
||||||
|
"react-markdown": "^8.0.7",
|
||||||
|
"remark-gfm": "^3.0.1",
|
||||||
|
"swr": "^2.1.1",
|
||||||
|
"tailwindcss": "3.3.2",
|
||||||
|
"typescript": "5.1.3",
|
||||||
|
"zod": "^3.19.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
datacenter/postcss.config.js
Normal file
6
datacenter/postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
BIN
datacenter/public/databerry-logo-icon.png
Normal file
BIN
datacenter/public/databerry-logo-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
18
datacenter/tailwind.config.js
Normal file
18
datacenter/tailwind.config.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
const defaultTheme = require('tailwindcss/defaultTheme');
|
||||||
|
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
|
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
|
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['"Josefin Sans"', ...defaultTheme.fontFamily.sans],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
28
datacenter/tsconfig.json
Normal file
28
datacenter/tsconfig.json
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
8
datacenter/types/index.ts
Normal file
8
datacenter/types/index.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import { NextApiRequest, NextPage } from 'next/types';
|
||||||
|
import { Session } from 'next-auth';
|
||||||
|
|
||||||
|
export type Message = { from: 'human' | 'agent'; message: string; createdAt?: Date };
|
||||||
|
|
||||||
|
export type AppNextApiRequest = NextApiRequest & {
|
||||||
|
session: Session;
|
||||||
|
};
|
||||||
40
datacenter/utils/api-error.ts
Normal file
40
datacenter/utils/api-error.ts
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
export enum ApiErrorType {
|
||||||
|
UNAUTHORIZED = 'UNAUTHORIZED',
|
||||||
|
USAGE_LIMIT = 'USAGE_LIMIT',
|
||||||
|
NOT_FOUND = 'NOT_FOUND',
|
||||||
|
INVALID_REQUEST = 'INVALID_REQUEST',
|
||||||
|
WEBPAGE_IS_SITEMAP = 'WEBPAGE_IS_SITEMAP',
|
||||||
|
EMPTY_DATASOURCE = 'EMPTY_DATASOURCE',
|
||||||
|
}
|
||||||
|
|
||||||
|
export class ApiError extends Error {
|
||||||
|
constructor(message: ApiErrorType, public status?: number) {
|
||||||
|
super(message);
|
||||||
|
|
||||||
|
if (!status) {
|
||||||
|
switch (message) {
|
||||||
|
case ApiErrorType.UNAUTHORIZED:
|
||||||
|
this.status = 403;
|
||||||
|
break;
|
||||||
|
case ApiErrorType.USAGE_LIMIT:
|
||||||
|
this.status = 402;
|
||||||
|
break;
|
||||||
|
case ApiErrorType.NOT_FOUND:
|
||||||
|
this.status = 404;
|
||||||
|
break;
|
||||||
|
case ApiErrorType.INVALID_REQUEST:
|
||||||
|
this.status = 400;
|
||||||
|
break;
|
||||||
|
case ApiErrorType.EMPTY_DATASOURCE:
|
||||||
|
this.status = 400;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
this.status = 500;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Object.setPrototypeOf(this, ApiError.prototype);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
19
datacenter/utils/swr-fetcher.ts
Normal file
19
datacenter/utils/swr-fetcher.ts
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import axios, { AxiosRequestConfig } from 'axios';
|
||||||
|
|
||||||
|
export const postFetcher = <T>(uri: string, { arg }: { arg: T }) =>
|
||||||
|
axios(uri, {
|
||||||
|
method: 'POST',
|
||||||
|
data: arg,
|
||||||
|
}).then((r) => r.data);
|
||||||
|
|
||||||
|
export const createFetcher =
|
||||||
|
(config: AxiosRequestConfig) =>
|
||||||
|
<T>(url: string, { arg }: { arg: T }) =>
|
||||||
|
axios({
|
||||||
|
url,
|
||||||
|
...config,
|
||||||
|
data: arg,
|
||||||
|
}).then((r) => r.data);
|
||||||
|
|
||||||
|
export const fetcher = (...args: Parameters<typeof axios>) =>
|
||||||
|
axios(...args).then((r) => r.data);
|
||||||
Loading…
Reference in New Issue
Block a user