diff --git a/datacenter/app/agents/[agentId]/page.tsx b/datacenter/app/agents/[agentId]/page.tsx index 7409f4c75..61a99ee10 100644 --- a/datacenter/app/agents/[agentId]/page.tsx +++ b/datacenter/app/agents/[agentId]/page.tsx @@ -1,36 +1,42 @@ "use client" import { useRequest } from 'ahooks'; -import { sendGetRequest } from '@/utils/request'; +import { sendGetRequest, sendPostRequest } from '@/utils/request'; import useAgentChat from '@/hooks/useAgentChat'; import ChatBoxComp from '@/components/chatBox'; +import { useDialogueContext } from '@/app/context/dialogue'; const AgentPage = (props) => { + const { refreshDialogList } = useDialogueContext(); + const { data: historyList } = useRequest(async () => await sendGetRequest('/v1/chat/dialogue/messages/history', { con_uid: props.params?.agentId }), { ready: !!props.params?.agentId }); + const { data: paramsList } = useRequest(async () => await sendPostRequest(`/v1/chat/mode/params/list?chat_mode=${props.searchParams?.scene}`), { + ready: !!props.searchParams?.scene + }); + const { history, handleChatSubmit } = useAgentChat({ queryAgentURL: `http://30.183.154.8:5000/v1/chat/completions`, queryBody: { conv_uid: props.params?.agentId, - chat_mode: 'chat_normal' + chat_mode: props.searchParams?.scene || 'chat_normal', }, initHistory: historyList?.data }); return ( -
+
{ - const searchParams = new URLSearchParams(window.location.search); - searchParams.delete('initMessage'); - window.history.replaceState(null, null, `?${searchParams.toString()}`); + clearIntialMessage={async () => { + await refreshDialogList(); }} messages={history || []} onSubmit={handleChatSubmit} + paramsList={paramsList?.data} />
) diff --git a/datacenter/app/agents/page.tsx b/datacenter/app/agents/page.tsx index 9e1d252be..d808b340d 100644 --- a/datacenter/app/agents/page.tsx +++ b/datacenter/app/agents/page.tsx @@ -16,7 +16,7 @@ const Item = styled(Sheet)(({ theme }) => ({ const Agents = () => { const { handleChatSubmit, history } = useAgentChat({ - queryAgentURL: `/api/agents/query`, + queryAgentURL: `http://30.183.154.8:5000/v1/chat/completions`, }); const data = [ @@ -203,7 +203,7 @@ const Agents = () => { - +
diff --git a/datacenter/app/context/dialogue.tsx b/datacenter/app/context/dialogue.tsx new file mode 100644 index 000000000..208409aff --- /dev/null +++ b/datacenter/app/context/dialogue.tsx @@ -0,0 +1,35 @@ +import { useRequest } from 'ahooks'; +import { sendGetRequest } from '@/utils/request'; +import { createCtx } from '@/utils/ctx-helper'; +import { AxiosResponse } from 'axios'; +import React from 'react'; + +export const [useDialogueContext, DialogueProvider] = createCtx<{ + dialogueList?: void | AxiosResponse | undefined; + queryDialogueList: () => void; + refreshDialogList: () => void; +}>(); + +export default ({ children }: { + children: React.ReactElement +}) => { + const { + run: queryDialogueList, + data: dialogueList, + refresh: refreshDialogList, + } = useRequest(async () => await sendGetRequest('/v1/chat/dialogue/list'), { + manual: true, + }); + + return ( + + {children} + + ) +} \ No newline at end of file diff --git a/datacenter/app/globals.css b/datacenter/app/globals.css index ae7bc662f..153cf633c 100644 --- a/datacenter/app/globals.css +++ b/datacenter/app/globals.css @@ -12,6 +12,32 @@ body { background-color: var(--joy-palette-background-body); } +table { + border-collapse: collapse; + width: 100%; +} + +th, td { + border: 1px solid #ddd; + text-align: left; + padding: 8px; +} + +th { + background-color: #f2f2f2; +} + +tr:nth-child(even) { + background-color: #f2f2f2; +} +tr:hover { + background-color: #ddd; +} + +body .ant-btn-primary { + background-color: #1677ff; +} + .ant-pagination .ant-pagination-prev * { color: rgb(145, 35, 167) !important; } diff --git a/datacenter/app/layout.tsx b/datacenter/app/layout.tsx index 38d9a8293..35e2ac81d 100644 --- a/datacenter/app/layout.tsx +++ b/datacenter/app/layout.tsx @@ -5,18 +5,21 @@ import LeftSider from '@/components/leftSider'; import { CssVarsProvider, ThemeProvider } from '@mui/joy/styles'; import { joyTheme } from './defaultTheme'; import TopProgressBar from '@/components/topProgressBar'; +import DialogueContext from './context/dialogue'; + function RootLayout({ children, }: { children: React.ReactNode }) { - + return ( +
@@ -25,6 +28,7 @@ function RootLayout({
+ diff --git a/datacenter/app/page.tsx b/datacenter/app/page.tsx index 599478426..6c43b4e03 100644 --- a/datacenter/app/page.tsx +++ b/datacenter/app/page.tsx @@ -1,4 +1,5 @@ "use client"; +import { useRequest } from 'ahooks'; import { useState } from 'react'; import { Button, Input, useColorScheme } from '@/lib/mui'; import IconButton from '@mui/joy/IconButton'; @@ -8,7 +9,6 @@ import { useForm } from 'react-hook-form'; import { z } from 'zod'; import { sendPostRequest } from '@/utils/request'; import { useRouter } from 'next/navigation'; -import { useQueryDialog } from '@/hooks/useQueryDialogue'; export default function Home() { const Schema = z.object({ query: z.string().min(1) }); @@ -19,7 +19,8 @@ export default function Home() { resolver: zodResolver(Schema), defaultValues: {}, }); - const { refreshDialogList } = useQueryDialog(); + const { data: scenesList } = useRequest(async () => await sendPostRequest('v1/chat/dialogue/scenes')); + const submit = async ({ query }: z.infer) => { try { setIsLoading(true); @@ -50,11 +51,24 @@ export default function Home() {

Scenes

-
- - - - +
+ {scenesList?.data?.map(scene => ( + + ))}
diff --git a/datacenter/components/chatBox.tsx b/datacenter/components/chatBox.tsx index 877ed7977..682ec9e09 100644 --- a/datacenter/components/chatBox.tsx +++ b/datacenter/components/chatBox.tsx @@ -1,24 +1,21 @@ 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 { Card, CircularProgress, IconButton, Input, Stack, Select, Option, Tooltip } from '@/lib/mui'; 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'; +import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; +import Markdown from 'markdown-to-jsx'; +import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; +import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism'; type Props = { messages: Message[]; - onSubmit: (message: string) => Promise; - messageTemplates?: string[]; + onSubmit: (message: string, otherQueryBody?: any) => Promise; initialMessage?: string; readOnly?: boolean; + paramsList?: { [key: string]: string }; clearIntialMessage?: () => void; }; @@ -27,15 +24,15 @@ const Schema = z.object({ query: z.string().min(1) }); const ChatBoxComp = ({ messages, onSubmit, - messageTemplates, initialMessage, readOnly, + paramsList, clearIntialMessage }: Props) => { const scrollableRef = React.useRef(null); const [isLoading, setIsLoading] = useState(false); const [firstMsg, setFirstMsg] = useState(); - const [hideTemplateMessages, setHideTemplateMessages] = useState(false); + const [currentParam, setCurrentParam] = useState(); const methods = useForm>({ resolver: zodResolver(Schema), @@ -45,9 +42,10 @@ const ChatBoxComp = ({ const submit = async ({ query }: z.infer) => { try { setIsLoading(true); - setHideTemplateMessages(true); methods.reset(); - await onSubmit(query); + await onSubmit(query, { + select_param: paramsList?.[currentParam] + }); } catch (err) { } finally { setIsLoading(false); @@ -55,10 +53,28 @@ const ChatBoxComp = ({ }; const handleInitMessage = async () => { - await submit({ query: (initialMessage as string) }); - clearIntialMessage?.(); + try { + const searchParams = new URLSearchParams(window.location.search); + searchParams.delete('initMessage'); + window.history.replaceState(null, null, `?${searchParams.toString()}`); + await submit({ query: (initialMessage as string) }); + } catch (err) { + console.log(err); + } finally { + clearIntialMessage?.(); + } } + const options = { + overrides: { + code: ({ children }) => ( + + {children} + + ), + }, + }; + React.useEffect(() => { if (!scrollableRef.current) { return; @@ -73,6 +89,12 @@ const ChatBoxComp = ({ } }, [initialMessage]); + React.useEffect(() => { + if (paramsList && Object.keys(paramsList || {})?.length > 0) { + setCurrentParam(Object.keys(paramsList || {})?.[0]); + } + }, [paramsList]); + return ( )} - {messages.filter(item => ['ai', 'human'].includes(item.role)).map((each, index) => ( + {messages.filter(item => ['view', 'human'].includes(item.role)).map((each, index) => ( @@ -133,9 +155,9 @@ const ChatBoxComp = ({ size="sm" variant={'outlined'} className={ - each.role === 'ai' ? 'message-agent' : 'message-human' + each.role === 'view' ? 'message-agent' : 'message-human' } - color={each.role === 'ai' ? 'primary' : 'neutral'} + color={each.role === 'view' ? 'primary' : 'neutral'} sx={(theme) => ({ px: 2, 'ol, ul': { @@ -157,9 +179,9 @@ const ChatBoxComp = ({ }, })} > - - {each.context} - + + {each.context?.replaceAll('\\n', '\n')} + ))} @@ -186,37 +208,41 @@ const ChatBoxComp = ({ justifyContent: 'center', marginLeft: 'auto', marginRight: 'auto', + flexDirection: 'column', + gap: '12px' }} onSubmit={(e) => { e.stopPropagation(); - methods.handleSubmit(submit)(e); }} > - {!hideTemplateMessages && (messageTemplates?.length || 0) > 0 && ( - - {messageTemplates?.map((each, idx) => ( - - ))} - + {(Object.keys(paramsList || {}).length > 0) && ( +
+ + + + +
)} { const pathname = usePathname(); + const router = useRouter(); + const { dialogueList, queryDialogueList, refreshDialogList } = useDialogueContext(); const { mode, setMode } = useColorScheme(); - const { dialogueList } = useQueryDialog(); const menus = useMemo(() => { return [{ @@ -33,6 +36,12 @@ const LeftSider = () => { } }; + useEffect(() => { + (async () => { + await queryDialogueList(); + })(); + }, []); + return ( <>