fix: style adjustment

This commit is contained in:
changhuiping.chp 2023-06-30 18:00:49 +08:00
parent a050b49d4b
commit 8aeab465f1
13 changed files with 137 additions and 108 deletions

View File

@ -16,7 +16,7 @@ const Item = styled(Sheet)(({ theme }) => ({
const Agents = () => { const Agents = () => {
const { handleChatSubmit, history } = useAgentChat({ const { handleChatSubmit, history } = useAgentChat({
queryAgentURL: `http://30.183.153.109:5000/v1/chat/completions`, queryAgentURL: `/v1/chat/completions`,
}); });
const data = [ const data = [

View File

@ -1 +0,0 @@
export const fetchBaseURL = 'http://30.183.153.109:5000';

View File

@ -4,7 +4,6 @@ import { useSearchParams } from 'next/navigation'
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { useColorScheme, Table, Stack } from '@/lib/mui' import { useColorScheme, Table, Stack } from '@/lib/mui'
import { Popover, Pagination } from 'antd' import { Popover, Pagination } from 'antd'
import { fetchBaseURL } from '@/app/datastores/constants'
const page_size = 20 const page_size = 20
const ChunkList = () => { const ChunkList = () => {
@ -17,7 +16,7 @@ const ChunkList = () => {
useEffect(() => { useEffect(() => {
async function fetchChunks() { async function fetchChunks() {
const res = await fetch( const res = await fetch(
`${fetchBaseURL}/knowledge/${spaceName}/chunk/list`, `${process.env.API_BASE_URL}/knowledge/${spaceName}/chunk/list`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {
@ -107,7 +106,7 @@ const ChunkList = () => {
total={total} total={total}
onChange={async (page) => { onChange={async (page) => {
const res = await fetch( const res = await fetch(
`${fetchBaseURL}/knowledge/${spaceName}/chunk/list`, `${process.env.API_BASE_URL}/knowledge/${spaceName}/chunk/list`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {

View File

@ -19,7 +19,6 @@ import moment from 'moment'
import { InboxOutlined } from '@ant-design/icons' import { InboxOutlined } from '@ant-design/icons'
import type { UploadProps } from 'antd' import type { UploadProps } from 'antd'
import { Upload, Pagination, message } from 'antd' import { Upload, Pagination, message } from 'antd'
import { fetchBaseURL } from '@/app/datastores/constants'
const { Dragger } = Upload const { Dragger } = Upload
const Item = styled(Sheet)(({ theme }) => ({ const Item = styled(Sheet)(({ theme }) => ({
@ -89,7 +88,7 @@ const Documents = () => {
useEffect(() => { useEffect(() => {
async function fetchDocuments() { async function fetchDocuments() {
const res = await fetch( const res = await fetch(
`${fetchBaseURL}/knowledge/${spaceName}/document/list`, `${process.env.API_BASE_URL}/knowledge/${spaceName}/document/list`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {
@ -194,7 +193,7 @@ const Documents = () => {
size="sm" size="sm"
onClick={async () => { onClick={async () => {
const res = await fetch( const res = await fetch(
`${fetchBaseURL}/knowledge/${spaceName}/document/sync`, `${process.env.API_BASE_URL}/knowledge/${spaceName}/document/sync`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {
@ -247,7 +246,7 @@ const Documents = () => {
total={total} total={total}
onChange={async (page) => { onChange={async (page) => {
const res = await fetch( const res = await fetch(
`${fetchBaseURL}/knowledge/${spaceName}/document/list`, `${process.env.API_BASE_URL}/knowledge/${spaceName}/document/list`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {
@ -400,7 +399,7 @@ const Documents = () => {
return return
} }
const res = await fetch( const res = await fetch(
`${fetchBaseURL}/knowledge/${spaceName}/document/add`, `${process.env.API_BASE_URL}/knowledge/${spaceName}/document/add`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {
@ -418,7 +417,7 @@ const Documents = () => {
message.success('success') message.success('success')
setIsAddDocumentModalShow(false) setIsAddDocumentModalShow(false)
const res = await fetch( const res = await fetch(
`${fetchBaseURL}/knowledge/${spaceName}/document/list`, `${process.env.API_BASE_URL}/knowledge/${spaceName}/document/list`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {
@ -449,7 +448,7 @@ const Documents = () => {
formData.append('doc_file', originFileObj) formData.append('doc_file', originFileObj)
formData.append('doc_type', 'DOCUMENT') formData.append('doc_type', 'DOCUMENT')
const res = await fetch( const res = await fetch(
`${fetchBaseURL}/knowledge/${spaceName}/document/upload`, `${process.env.API_BASE_URL}/knowledge/${spaceName}/document/upload`,
{ {
method: 'POST', method: 'POST',
body: formData body: formData
@ -460,7 +459,7 @@ const Documents = () => {
message.success('success') message.success('success')
setIsAddDocumentModalShow(false) setIsAddDocumentModalShow(false)
const res = await fetch( const res = await fetch(
`${fetchBaseURL}/knowledge/${spaceName}/document/list`, `${process.env.API_BASE_URL}/knowledge/${spaceName}/document/list`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {
@ -487,7 +486,7 @@ const Documents = () => {
return return
} }
const res = await fetch( const res = await fetch(
`${fetchBaseURL}/knowledge/${spaceName}/document/add`, `${process.env.API_BASE_URL}/knowledge/${spaceName}/document/add`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {
@ -506,7 +505,7 @@ const Documents = () => {
message.success('success') message.success('success')
setIsAddDocumentModalShow(false) setIsAddDocumentModalShow(false)
const res = await fetch( const res = await fetch(
`${fetchBaseURL}/knowledge/${spaceName}/document/list`, `${process.env.API_BASE_URL}/knowledge/${spaceName}/document/list`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {

View File

@ -18,7 +18,6 @@ import {
Chip, Chip,
styled styled
} from '@/lib/mui' } from '@/lib/mui'
import { fetchBaseURL } from '@/app/datastores/constants'
const { Dragger } = Upload const { Dragger } = Upload
@ -87,7 +86,7 @@ const Index = () => {
} }
useEffect(() => { useEffect(() => {
async function fetchData() { async function fetchData() {
const res = await fetch(`${fetchBaseURL}/knowledge/space/list`, { const res = await fetch(`${process.env.API_BASE_URL}/knowledge/space/list`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@ -237,7 +236,7 @@ const Index = () => {
message.error('please input the name') message.error('please input the name')
return return
} }
const res = await fetch(`${fetchBaseURL}/knowledge/space/add`, { const res = await fetch(`${process.env.API_BASE_URL}/knowledge/space/add`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@ -254,7 +253,7 @@ const Index = () => {
message.success('success') message.success('success')
setActiveStep(1) setActiveStep(1)
const res = await fetch( const res = await fetch(
`${fetchBaseURL}/knowledge/space/list`, `${process.env.API_BASE_URL}/knowledge/space/list`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {
@ -371,7 +370,7 @@ const Index = () => {
return return
} }
const res = await fetch( const res = await fetch(
`${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/add`, `${process.env.API_BASE_URL}/knowledge/${knowledgeSpaceName}/document/add`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {
@ -401,7 +400,7 @@ const Index = () => {
formData.append('doc_file', originFileObj) formData.append('doc_file', originFileObj)
formData.append('doc_type', 'DOCUMENT') formData.append('doc_type', 'DOCUMENT')
const res = await fetch( const res = await fetch(
`${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/upload`, `${process.env.API_BASE_URL}/knowledge/${knowledgeSpaceName}/document/upload`,
{ {
method: 'POST', method: 'POST',
body: formData body: formData
@ -420,7 +419,7 @@ const Index = () => {
return return
} }
const res = await fetch( const res = await fetch(
`${fetchBaseURL}/knowledge/${knowledgeSpaceName}/document/add`, `${process.env.API_BASE_URL}/knowledge/${knowledgeSpaceName}/document/add`,
{ {
method: 'POST', method: 'POST',
headers: { headers: {

View File

@ -1,7 +1,7 @@
"use client"; "use client";
import { useRequest } from 'ahooks'; import { useRequest } from 'ahooks';
import { useState } from 'react'; import { useState } from 'react';
import { Button, Input, useColorScheme } from '@/lib/mui'; import { Button, Input, useColorScheme, Box, buttonClasses } from '@/lib/mui';
import IconButton from '@mui/joy/IconButton'; import IconButton from '@mui/joy/IconButton';
import SendRoundedIcon from '@mui/icons-material/SendRounded'; import SendRoundedIcon from '@mui/icons-material/SendRounded';
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
@ -39,24 +39,29 @@ export default function Home() {
return ( return (
<> <>
<div className={`absolute z-20 top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none`}> <div className='mx-auto justify-end flex max-w-3xl flex-col h-3/4 gap-6 px-5 pt-6 sm:gap-16 xl:max-w-4xl'>
<div className='w-[108rem] flex-none flex justify-end'> <div className='grid gap-8 lg:grid-cols-3'>
<picture> <div className='lg:col-span-3'>
<source srcSet='/bg1.avif' type='image/avif'></source> <p className='mb-8 text-center text-2xl'>Scenes</p>
<img srcSet='/bg2.png' alt="" className='w-[71.75rem] flex-none max-w-none '/> <Box
</picture> className='grid gap-2 lg:grid-cols-3 lg:gap-6'
</div> sx={{
</div> [`& .${buttonClasses.root}`]: {
<div className='mx-auto flex h-full max-w-3xl flex-col gap-6 px-5 pt-6 sm:gap-8 xl:max-w-4xl'> color: 'var(--joy-palette-primary-solidColor)',
<div className='lg:my-auto grid gap-8 lg:grid-cols-3'> backgroundColor: 'var(--joy-palette-primary-solidBg)',
<div className='lg:col-span-3 lg:mt-12'> height: '52px',
<p className='mb-3'>Scenes</p> '&: hover': {
<div className='grid gap-2 lg:grid-cols-3 lg:gap-4'> backgroundColor: 'var(--joy-palette-primary-solidHoverBg)',
}
}
}}
>
{scenesList?.data?.map(scene => ( {scenesList?.data?.map(scene => (
<Button <Button
key={scene['chat_scene']} key={scene['chat_scene']}
size="md" size="md"
variant="soft" variant="solid"
className='text-base rounded-none '
onClick={async () => { onClick={async () => {
const res = await sendPostRequest('/v1/chat/dialogue/new', { const res = await sendPostRequest('/v1/chat/dialogue/new', {
chat_mode: scene['chat_scene'] chat_mode: scene['chat_scene']
@ -69,12 +74,10 @@ export default function Home() {
{scene['scene_name'] {scene['scene_name']
}</Button> }</Button>
))} ))}
</Box>
</div> </div>
</div> </div>
</div> <div className='mt-6 pointer-events-none inset-x-0 bottom-0 z-0 mx-auto flex w-full max-w-3xl flex-col items-center justify-center max-md:border-t xl:max-w-4xl [&>*]:pointer-events-auto'>
<div className='h-60 flex-none'></div>
</div>
<div className='pointer-events-none absolute inset-x-0 bottom-0 z-0 mx-auto flex w-full max-w-3xl flex-col items-center justify-center px-3.5 py-4 max-md:border-t sm:px-5 md:py-8 xl:max-w-4xl [&>*]:pointer-events-auto'>
<form <form
style={{ style={{
maxWidth: '100%', maxWidth: '100%',
@ -105,6 +108,8 @@ export default function Home() {
/> />
</form> </form>
</div> </div>
</div>
</> </>
) )

View File

@ -27,7 +27,7 @@ const AgentPage = (props: {
}); });
const { history, handleChatSubmit } = useAgentChat({ const { history, handleChatSubmit } = useAgentChat({
queryAgentURL: `http://30.183.153.109:5000/v1/chat/completions`, queryAgentURL: `/v1/chat/completions`,
queryBody: { queryBody: {
conv_uid: props.params?.agentId, conv_uid: props.params?.agentId,
chat_mode: props.searchParams?.scene || 'chat_normal', chat_mode: props.searchParams?.scene || 'chat_normal',

View File

@ -2,14 +2,14 @@
import React, { useEffect, useMemo } from 'react'; import React, { useEffect, useMemo } from 'react';
import { usePathname, useRouter } from 'next/navigation'; import { usePathname, useRouter } from 'next/navigation';
import Link from 'next/link'; import Link from 'next/link';
import { Popconfirm } from 'antd'; import { Modal } from 'antd';
import { Box, List, ListItem, ListItemButton, ListItemDecorator, ListItemContent, Typography, Button, useColorScheme, IconButton } from '@/lib/mui'; import { Box, List, ListItem, ListItemButton, ListItemDecorator, ListItemContent, Typography, Button, useColorScheme, IconButton } from '@/lib/mui';
import Article from '@mui/icons-material/Article'; import Article from '@mui/icons-material/Article';
import DarkModeIcon from '@mui/icons-material/DarkMode'; import DarkModeIcon from '@mui/icons-material/DarkMode';
import WbSunnyIcon from '@mui/icons-material/WbSunny'; import WbSunnyIcon from '@mui/icons-material/WbSunny';
import MenuIcon from '@mui/icons-material/Menu'; import MenuIcon from '@mui/icons-material/Menu';
import AddIcon from '@mui/icons-material/Add'; import AddIcon from '@mui/icons-material/Add';
import { useDialogueContext } from '@/app/context/dialogue'; import SmsOutlinedIcon from '@mui/icons-material/SmsOutlined';import { useDialogueContext } from '@/app/context/dialogue';
import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'; import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
import { sendPostRequest } from '@/utils/request'; import { sendPostRequest } from '@/utils/request';
@ -110,6 +110,7 @@ const LeftSider = () => {
aria-labelledby="nav-list-browse" aria-labelledby="nav-list-browse"
sx={{ sx={{
'& .JoyListItemButton-root': { p: '8px' }, '& .JoyListItemButton-root': { p: '8px' },
gap: '4px'
}} }}
> >
{dialogueList?.data?.map((each) => { {dialogueList?.data?.map((each) => {
@ -119,32 +120,46 @@ const LeftSider = () => {
<ListItemButton <ListItemButton
selected={isSelect} selected={isSelect}
variant={isSelect ? 'soft' : 'plain'} variant={isSelect ? 'soft' : 'plain'}
sx={{
'&:hover .del-btn': {
visibility: 'visible'
}
}}
> >
<ListItemContent> <ListItemContent>
<Link href={`/agents/${each.conv_uid}?scene=${each?.chat_mode}`}> <Link href={`/agents/${each.conv_uid}?scene=${each?.chat_mode}`} className="flex items-center justify-between">
<Typography fontSize={14} noWrap={true}> <Typography fontSize={14} noWrap={true}>
<SmsOutlinedIcon className='mr-2' />
{each?.user_name || each?.user_input || 'undefined'} {each?.user_name || each?.user_input || 'undefined'}
</Typography> </Typography>
</Link> <IconButton
</ListItemContent> color="neutral"
</ListItemButton> variant="plain"
<Popconfirm size="sm"
title="删除对话" onClick={(e) => {
description="确认要删除该对话吗" e.preventDefault();
onConfirm={async() => { e.stopPropagation();
Modal.confirm({
title: 'Delete Chat',
content: 'Are you sure delete this chat?',
width: '276px',
centered: true,
async onOk() {
await sendPostRequest(`v1/chat/dialogue/delete?con_uid=${each.conv_uid}`); await sendPostRequest(`v1/chat/dialogue/delete?con_uid=${each.conv_uid}`);
await refreshDialogList(); await refreshDialogList();
if (pathname === `/agents/${each.conv_uid}`) { if (pathname === `/agents/${each.conv_uid}`) {
router.push('/'); router.push('/');
} }
}
})
}} }}
okText="Yes" className='del-btn invisible'
cancelText="No"
> >
<IconButton color="neutral" variant="plain">
<DeleteOutlineOutlinedIcon /> <DeleteOutlineOutlinedIcon />
</IconButton> </IconButton>
</Popconfirm> </Link>
</ListItemContent>
</ListItemButton>
</ListItem> </ListItem>
) )
})} })}
@ -157,6 +172,8 @@ const LeftSider = () => {
<Box <Box
sx={{ sx={{
p: 2, p: 2,
pt: 3,
pb: 6,
borderTop: '1px solid', borderTop: '1px solid',
borderColor: 'divider', borderColor: 'divider',
display: { display: {
@ -183,6 +200,7 @@ const LeftSider = () => {
<ListItem> <ListItem>
<ListItemButton <ListItemButton
color="neutral" color="neutral"
sx={{ marginBottom: 1, height: '2.5rem' }}
selected={each.active} selected={each.active}
variant={each.active ? 'soft' : 'plain'} variant={each.active ? 'soft' : 'plain'}
> >
@ -202,6 +220,7 @@ const LeftSider = () => {
</ListItem> </ListItem>
<ListItem> <ListItem>
<ListItemButton <ListItemButton
sx={{ height: '2.5rem' }}
onClick={handleChangeTheme} onClick={handleChangeTheme}
> >
<ListItemDecorator> <ListItemDecorator>

View File

@ -7,7 +7,11 @@ export const joyTheme = extendTheme({
palette: { palette: {
mode: 'dark', mode: 'dark',
primary: { primary: {
...colors.purple, ...colors.grey,
solidBg: '#dfdfdf91',
solidColor: '#4e4e4e',
solidHoverBg: '#d5d5d5',
outlinedColor: '#4e4e59'
}, },
neutral: { neutral: {
plainColor: '#4d4d4d', plainColor: '#4d4d4d',
@ -21,16 +25,13 @@ export const joyTheme = extendTheme({
surface: '#fff' surface: '#fff'
}, },
text: { text: {
primary: '#25252D' primary: '#505050'
}, },
}, },
}, },
dark: { dark: {
palette: { palette: {
mode: 'light', mode: 'light',
primary: {
...colors.purple,
},
neutral: { neutral: {
plainColor: '#D8D8DF', plainColor: '#D8D8DF',
plainHoverColor: '#F7F7F8', plainHoverColor: '#F7F7F8',

View File

@ -49,7 +49,7 @@ import { useDialogueContext } from '@/app/context/dialogue';
const ctrl = new AbortController(); const ctrl = new AbortController();
let buffer = ''; let buffer = '';
await fetchEventSource(queryAgentURL, { await fetchEventSource(`${process.env.API_BASE_URL + queryAgentURL}`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',

View File

@ -6,6 +6,9 @@ const nextConfig = {
}, },
typescript: { typescript: {
ignoreBuildErrors: true ignoreBuildErrors: true
},
env: {
API_BASE_URL: process.env.API_BASE_URL || 'http://30.183.154.76:5000'
} }
} }

View File

@ -0,0 +1,14 @@
import axios from 'axios';
const api = axios.create({
baseURL: process.env.API_BASE_URL,
});
api.defaults.timeout = 10000;
api.interceptors.response.use(
response => response.data,
err => Promise.reject(err)
);
export default api;

View File

@ -1,16 +1,7 @@
import { message } from 'antd'; import { message } from 'antd';
import axios from 'axios'; import axios from './ctx-axios';
import { isPlainObject } from 'lodash'; import { isPlainObject } from 'lodash';
axios.defaults.baseURL = 'http://30.183.153.109:5000';
axios.defaults.timeout = 10000;
axios.interceptors.response.use(
response => response.data,
err => Promise.reject(err)
);
const DEFAULT_HEADERS = { const DEFAULT_HEADERS = {
'content-type': 'application/json', 'content-type': 'application/json',
}; };