From 49a86fae6e8365a908dde8f25d7698b78b441867 Mon Sep 17 00:00:00 2001 From: "changhuiping.chp" <392752049@qq.com> Date: Fri, 7 Jul 2023 15:55:28 +0800 Subject: [PATCH] feat: chat add chart mode --- datacenter/app/agents/layout.tsx | 13 -- datacenter/app/agents/page.tsx | 214 ------------------------------ datacenter/app/chat/page.tsx | 216 +++++++++++++++++++++++++++++-- datacenter/hooks/useAgentChat.ts | 3 +- 4 files changed, 207 insertions(+), 239 deletions(-) delete mode 100644 datacenter/app/agents/layout.tsx delete mode 100644 datacenter/app/agents/page.tsx diff --git a/datacenter/app/agents/layout.tsx b/datacenter/app/agents/layout.tsx deleted file mode 100644 index 8c94ab351..000000000 --- a/datacenter/app/agents/layout.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Box } from '@/lib/mui'; - -export default function RootLayout({ - children, -}: { - children: React.ReactNode -}) { - return ( - <> - {children} - - ) -} diff --git a/datacenter/app/agents/page.tsx b/datacenter/app/agents/page.tsx deleted file mode 100644 index 3dcd8462e..000000000 --- a/datacenter/app/agents/page.tsx +++ /dev/null @@ -1,214 +0,0 @@ -"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: `/v1/chat/completions`, - }); - - 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 ( -
-
- - - - - - {topCard.map((item) => ( - - - - - {item.label} - - - {item.value} - - - - - ))} - - - - - - - Revenue Won by Month - -
- - - -
- - - - - - - - - - Close % by Month - -
- - - - -
- - - - - - - - Close % by Month - -
- - - - -
- - - - - - - - Close % by Month - -
- - - - -
- - - - - - - - - - - -
-
- ) -} - -export default Agents; \ No newline at end of file diff --git a/datacenter/app/chat/page.tsx b/datacenter/app/chat/page.tsx index 529b56efa..4141230cc 100644 --- a/datacenter/app/chat/page.tsx +++ b/datacenter/app/chat/page.tsx @@ -1,10 +1,14 @@ "use client" import { useRequest } from 'ahooks'; import { sendGetRequest, sendPostRequest } from '@/utils/request'; +import { Card, CardContent, Typography, Grid, Table } from "@/lib/mui"; import useAgentChat from '@/hooks/useAgentChat'; import ChatBoxComp from '@/components/chatBoxTemp'; import { useDialogueContext } from '@/app/context/dialogue'; import { useSearchParams } from 'next/navigation'; +import { useMemo } from 'react'; +import { Chart, LineAdvance, Interval, Tooltip, getTheme } from "bizcharts"; +import lodash from 'lodash'; const AgentPage = () => { const searchParams = useSearchParams(); @@ -33,17 +37,209 @@ const AgentPage = () => { initHistory: historyList?.data }); + const chartsData = useMemo(() => { + try { + const contextTemp = history?.[history.length - 1]?.context; + const contextObj = JSON.parse(contextTemp); + return contextObj?.template_name === 'sales_report' ? contextObj?.charts : undefined; + } catch (e) { + return undefined; + } + }, [history]); + + const chartRows = useMemo(() => { + if (chartsData) { + let res = []; + // 若是有类型为 IndicatorValue 的，提出去，独占一行 + const chartCalc = chartsData?.filter( + (item) => item.chart_type === "IndicatorValue" + ); + if (chartCalc.length > 0) { + res.push({ + rowIndex: res.length, + cols: chartCalc, + type: "IndicatorValue", + }); + } + let otherCharts = chartsData?.filter( + (item) => item.chart_type !== "IndicatorValue" + ); + let otherLength = otherCharts.length; + let curIndex = 0; + // charts 数量 3～8个，暂定每行排序 + let chartLengthMap = [ + [0], + [1], + [2], + [1, 2], + [1, 3], + [2, 1, 2], + [2, 1, 3], + [3, 1, 3], + [3, 2, 3], + ]; + let currentRowsSort = chartLengthMap[otherLength]; + currentRowsSort.forEach((item) => { + if (item > 0) { + const rowsItem = otherCharts.slice(curIndex, curIndex + item); + curIndex = curIndex + item; + res.push({ + rowIndex: res.length, + cols: rowsItem, + }); + } + }); + return res; + } + return undefined; + }, [chartsData]); + return ( - <> - { - await refreshDialogList(); - }} - messages={history || []} - onSubmit={handleChatSubmit} - paramsList={paramsList?.data} - /> - + + {chartsData && ( + +
+ {chartRows?.map((chartRow) => ( +
+ {chartRow.cols.map((col) => { + if (col.chart_type === "IndicatorValue") { + return ( +
+ {col.values.map((item) => ( +
+ + + + {item.name} + + {item.value} + + +
+ ))} +
+ ); + } else if (col.chart_type === "LineChart") { + return ( +
+ + + + {col.chart_name} + +
+ + + +
+ + +
+ ); + } else if (col.chart_type === "BarChart") { + return ( +
+ + + + {col.chart_name} + +
+ + + + +
+ + +
+ ); + } else if (col.chart_type === 'Table') { + const data = lodash.groupBy(col.values, 'type'); + return ( +
+ + + + + {col.chart_name} + +
+ + + + {Object.keys(data).map(key => ( + + ))} + + + + {Object.values(data)?.[0]?.map((value, i) => ( + + {Object.keys(data)?.map(k => ( + + ))} + + ))} + +
{key}
{data?.[k]?.[i].value || ''}
+
+ + +
+ ) + } + })} +
+ ))} +
+ + )} + +
+ { + await refreshDialogList(); + }} + messages={history || []} + onSubmit={handleChatSubmit} + paramsList={paramsList?.data} + /> +
+ + + ) } diff --git a/datacenter/hooks/useAgentChat.ts b/datacenter/hooks/useAgentChat.ts index f14f72b05..59f197e5b 100644 --- a/datacenter/hooks/useAgentChat.ts +++ b/datacenter/hooks/useAgentChat.ts @@ -96,7 +96,6 @@ import { useDialogueContext } from '@/app/context/dialogue'; throw new Error(err); }, onmessage: (event) => { - console.log(event, 'e'); event.data = event.data.replaceAll('\\n', '\n'); if (event.data === '[DONE]') { @@ -129,7 +128,7 @@ import { useDialogueContext } from '@/app/context/dialogue'; }, }); } catch (err) { - console.log('---e', err); + console.log(err); setState({ history: [