From 65614ed3bad16aca58c14d61981d086749a92cde Mon Sep 17 00:00:00 2001 From: williamhliu <137068196+williamhliu@users.noreply.github.com> Date: Wed, 18 Oct 2023 17:26:43 +0800 Subject: [PATCH] (feature)(webapp) add multiple parse infos in history message (#256) Co-authored-by: williamhliu --- .../src/Chat/MessageContainer/index.tsx | 2 + .../Chat/MessageContainer/style.module.less | 95 ------------------- webapp/packages/chat-sdk/src/Chat/index.tsx | 3 +- webapp/packages/chat-sdk/src/Chat/type.ts | 3 +- .../packages/chat-sdk/src/ShowCase/index.tsx | 2 +- webapp/packages/chat-sdk/src/common/type.ts | 1 + .../src/components/ChatItem/ParseTip.tsx | 28 +++--- .../src/components/ChatItem/SqlItem.tsx | 2 +- .../src/components/ChatItem/index.tsx | 32 +++---- .../src/components/ChatItem/style.less | 16 ++++ .../src/components/MetricOptions/style.less | 1 + .../packages/chat-sdk/src/styles/global.less | 2 +- 12 files changed, 58 insertions(+), 129 deletions(-) diff --git a/webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx b/webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx index 530cae0cd..34d6c6c1b 100644 --- a/webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx +++ b/webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx @@ -75,6 +75,7 @@ const MessageContainer: React.FC = ({ msgValue, score, identityMsg, + parseInfos, msgData, filters, } = msgItem; @@ -91,6 +92,7 @@ const MessageContainer: React.FC = ({ {identityMsg && } = ( { id: uuid(), type: MessageTypeEnum.AGENT_LIST, - msg: agent?.name || currentAgent?.name || agentList?.[0].name, + msg: agent?.name || currentAgent?.name || agentList?.[0]?.name, }, ]); }; @@ -175,6 +175,7 @@ const Chat: ForwardRefRenderFunction = ( id: item.questionId, type: MessageTypeEnum.QUESTION, msg: item.queryText, + parseInfos: item.parseInfos, msgData: item.queryResult, score: item.score, agentId: currentAgent?.id, diff --git a/webapp/packages/chat-sdk/src/Chat/type.ts b/webapp/packages/chat-sdk/src/Chat/type.ts index ede58f23c..a97bc1e54 100644 --- a/webapp/packages/chat-sdk/src/Chat/type.ts +++ b/webapp/packages/chat-sdk/src/Chat/type.ts @@ -1,4 +1,4 @@ -import { MsgDataType, SendMsgParamsType } from "../common/type"; +import { ChatContextType, MsgDataType, SendMsgParamsType } from "../common/type"; export enum MessageTypeEnum { TEXT = 'text', // 指标文本 @@ -22,6 +22,7 @@ export type MessageItem = { modelId?: number; agentId?: number; entityId?: string; + parseInfos?: ChatContextType[]; msgData?: MsgDataType; quote?: string; score?: number; diff --git a/webapp/packages/chat-sdk/src/ShowCase/index.tsx b/webapp/packages/chat-sdk/src/ShowCase/index.tsx index e52cb57fe..5c5609650 100644 --- a/webapp/packages/chat-sdk/src/ShowCase/index.tsx +++ b/webapp/packages/chat-sdk/src/ShowCase/index.tsx @@ -20,7 +20,7 @@ const ShowCase: React.FC = ({ agentId, onSendMsg }) => { if (pageNo === 1) { setLoading(true); } - const res = await queryShowCase(agentId, pageNo, 20); + const res = await queryShowCase(agentId, pageNo, 30); if (pageNo === 1) { setLoading(false); } diff --git a/webapp/packages/chat-sdk/src/common/type.ts b/webapp/packages/chat-sdk/src/common/type.ts index aacb7fd86..d3225ef06 100644 --- a/webapp/packages/chat-sdk/src/common/type.ts +++ b/webapp/packages/chat-sdk/src/common/type.ts @@ -210,6 +210,7 @@ export type SuggestionDataType = { export type HistoryMsgItemType = { questionId: number; queryText: string; + parseInfos: ChatContextType[]; queryResult: MsgDataType; chatId: number; createTime: string; diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx index 7760c0470..644d4e558 100644 --- a/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx @@ -6,6 +6,8 @@ import { CheckCircleFilled } from '@ant-design/icons'; import Loading from './Loading'; import FilterItem from './FilterItem'; import moment from 'moment'; +import classNames from 'classnames'; +import { isMobile } from '../../utils/utils'; const { RangePicker } = DatePicker; @@ -84,9 +86,7 @@ const ParseTip: React.FC = ({ nativeQuery, } = currentParseInfo || {}; - const { type } = properties || {}; const entityAlias = entity?.alias?.[0]?.split('.')?.[0]; - const entityName = elementMatches?.find(item => item.element?.type === 'ID')?.element.name; const entityDimensions = entityInfo?.dimensions?.filter( item => @@ -172,16 +172,15 @@ const ParseTip: React.FC = ({ )} {queryMode !== 'ENTITY_ID' && - entityDimensions && - entityDimensions?.length > 0 && !dimensions?.some(item => item.bizName?.includes('_id')) && - entityDimensions.some(dimension => dimension.value != null) && - entityDimensions.map(dimension => ( -
-
{dimension.name}：
-
{dimension.value}
-
- ))} + entityDimensions + ?.filter(dimension => dimension.value != null) + .map(dimension => ( +
+
{dimension.name}：
+
{dimension.value}
+
+ ))} {(queryMode === 'METRIC_ORDERBY' || queryMode === 'METRIC_MODEL') && aggType && aggType !== 'NONE' && ( @@ -199,9 +198,12 @@ const ParseTip: React.FC = ({ const getFilterContent = (filters: any) => { const itemValueClass = `${prefixCls}-tip-item-value`; const { startDate, endDate } = dateInfo || {}; + const tipItemOptionClass = classNames(`${prefixCls}-tip-item-option`, { + [`${prefixCls}-mobile-tip-item-option`]: isMobile, + }); return (
-
+
数据时间： {nativeQuery ? ( @@ -209,9 +211,9 @@ const ParseTip: React.FC = ({ ) : ( trigger.parentNode as HTMLElement} allowClear={false} /> )} diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx index b93a7b5e7..54149d848 100644 --- a/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx @@ -53,7 +53,7 @@ const SqlItem: React.FC = ({ integrateSystem, sqlInfo }) => { setSqlType(sqlType === 's2QL' ? '' : 's2QL'); }} > - LLM解析SQL + S2QL
)} {sqlInfo.logicSql && ( diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx index 6596f2c1a..064e7cea2 100644 --- a/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx @@ -28,6 +28,7 @@ type Props = { score?: number; filter?: any[]; isLastMessage?: boolean; + parseInfos?: ChatContextType[]; msgData?: MsgDataType; triggerResize?: boolean; isDeveloper?: boolean; @@ -48,6 +49,7 @@ const ChatItem: React.FC = ({ filter, isLastMessage, triggerResize, + parseInfos, msgData, isDeveloper, integrateSystem, @@ -152,11 +154,15 @@ const ChatItem: React.FC = ({ return; } if (msgData) { - const parseInfoValue = { ...msgData.chatContext, queryId: msgData.queryId }; - setParseInfoOptions([parseInfoValue]); + const parseInfoOptionsValue = + parseInfos && parseInfos.length > 0 + ? parseInfos.map(item => ({ ...item, queryId: msgData.queryId })) + : [{ ...msgData.chatContext, queryId: msgData.queryId }]; + const parseInfoValue = parseInfoOptionsValue[0]; + setParseInfoOptions(parseInfoOptionsValue); setParseInfo(parseInfoValue); - setDimensionFilters(msgData.chatContext?.dimensionFilters || []); - setDateInfo(msgData.chatContext?.dateInfo); + setDimensionFilters(parseInfoValue.dimensionFilters || []); + setDateInfo(parseInfoValue.dateInfo); setExecuteMode(true); updateData({ code: 200, data: msgData, msg: 'success' }); } else if (msg) { @@ -238,10 +244,6 @@ const ChatItem: React.FC = ({ [`${prefixCls}-content-mobile`]: isMobile, }); - const isMetricCard = - (data?.queryMode === 'METRIC_DOMAIN' || data?.queryMode === 'METRIC_FILTER') && - data?.queryResults?.length === 1; - return (
{!isMobile && integrateSystem !== 'wiki' && ( @@ -266,7 +268,7 @@ const ChatItem: React.FC = ({ /> {executeMode && ( <> - {parseInfo?.sqlInfo && isDeveloper && integrateSystem !== 'c2' && ( + {!isMobile && parseInfo?.sqlInfo && isDeveloper && integrateSystem !== 'c2' && ( )} = ({ /> )}
- {integrateSystem !== 'showcase' && ( - - )} + {(parseTip !== '' || (executeMode && !executeLoading)) && + integrateSystem !== 'c2' && + integrateSystem !== 'showcase' && ( + + )}
); diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/style.less b/webapp/packages/chat-sdk/src/components/ChatItem/style.less index 1e22e650f..6ec949809 100644 --- a/webapp/packages/chat-sdk/src/components/ChatItem/style.less +++ b/webapp/packages/chat-sdk/src/components/ChatItem/style.less @@ -265,6 +265,20 @@ row-gap: 6px; } + &-tip-item-option { + display: flex; + align-items: center; + flex-wrap: wrap; + row-gap: 6px; + } + + &-mobile-tip-item-option { + .ant-picker-panel-container .ant-picker-panels { + flex-wrap: wrap !important; + width: 280px !important; + } + } + &-tip-item-filter-name { color: var(--text-color-secondary); font-weight: 500; @@ -342,6 +356,8 @@ .@{filter-item-prefix-cls} { display: flex; align-items: center; + flex-wrap: wrap; + row-gap: 6px; font-weight: 500; &-filter-name { diff --git a/webapp/packages/chat-sdk/src/components/MetricOptions/style.less b/webapp/packages/chat-sdk/src/components/MetricOptions/style.less index ff949afd3..6432f3d35 100644 --- a/webapp/packages/chat-sdk/src/components/MetricOptions/style.less +++ b/webapp/packages/chat-sdk/src/components/MetricOptions/style.less @@ -12,6 +12,7 @@ align-items: center; flex-wrap: wrap; column-gap: 6px; + row-gap: 4px; } &-metric-card { diff --git a/webapp/packages/chat-sdk/src/styles/global.less b/webapp/packages/chat-sdk/src/styles/global.less index f5c8f94ad..a4d532f17 100644 --- a/webapp/packages/chat-sdk/src/styles/global.less +++ b/webapp/packages/chat-sdk/src/styles/global.less @@ -49,4 +49,4 @@ background-color: #efefef !important; } } -} \ No newline at end of file +}