mirror of
https://github.com/tencentmusic/supersonic.git
synced 2025-12-12 12:37:55 +00:00
add chat plugin and split query to parse and execute (#25)
* [feature](webapp) add drill down dimensions and metric period compare and modify layout * [feature](webapp) add drill down dimensions and metric period compare and modify layout * [feature](webapp) gitignore add supersonic-webapp * [feature](webapp) gitignore add supersonic-webapp * [feature](webapp) add chat plugin and split query to parse and execute * [feature](webapp) add chat plugin and split query to parse and execute * [feature](webapp) add chat plugin and split query to parse and execute --------- Co-authored-by: williamhliu <williamhliu@tencent.com>
This commit is contained in:
williamhliu
@@ -1,71 +1,112 @@
|
||||
import { MsgDataType } from '../../common/type';
|
||||
import { ChatContextType, MsgDataType, ParseStateEnum } from '../../common/type';
|
||||
import { useEffect, useState } from 'react';
|
||||
import Typing from './Typing';
|
||||
import ChatMsg from '../ChatMsg';
|
||||
import { chatQuery } from '../../service';
|
||||
import { PARSE_ERROR_TIP, PREFIX_CLS } from '../../common/constants';
|
||||
import Text from './Text';
|
||||
import Tools from '../Tools';
|
||||
import { chatExecute, chatParse, switchEntity } from '../../service';
|
||||
import { PARSE_ERROR_TIP, PREFIX_CLS, SEARCH_EXCEPTION_TIP } from '../../common/constants';
|
||||
import IconFont from '../IconFont';
|
||||
import ParseTip from './ParseTip';
|
||||
import ExecuteItem from './ExecuteItem';
|
||||
|
||||
type Props = {
|
||||
msg: string;
|
||||
followQuestions?: string[];
|
||||
conversationId?: number;
|
||||
domainId?: number;
|
||||
filter?: any[];
|
||||
isLastMessage?: boolean;
|
||||
msgData?: MsgDataType;
|
||||
isMobileMode?: boolean;
|
||||
triggerResize?: boolean;
|
||||
onMsgDataLoaded?: (data: MsgDataType) => void;
|
||||
onMsgDataLoaded?: (data: MsgDataType, valid: boolean) => void;
|
||||
onUpdateMessageScroll?: () => void;
|
||||
};
|
||||
|
||||
const ChatItem: React.FC<Props> = ({
|
||||
msg,
|
||||
followQuestions,
|
||||
conversationId,
|
||||
domainId,
|
||||
filter,
|
||||
isLastMessage,
|
||||
isMobileMode,
|
||||
triggerResize,
|
||||
msgData,
|
||||
onMsgDataLoaded,
|
||||
onUpdateMessageScroll,
|
||||
}) => {
|
||||
const [data, setData] = useState<MsgDataType>();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [tip, setTip] = useState('');
|
||||
const [parseLoading, setParseLoading] = useState(false);
|
||||
const [parseInfo, setParseInfo] = useState<ChatContextType>();
|
||||
const [parseInfoOptions, setParseInfoOptions] = useState<ChatContextType[]>([]);
|
||||
const [parseTip, setParseTip] = useState('');
|
||||
const [executeLoading, setExecuteLoading] = useState(false);
|
||||
const [executeTip, setExecuteTip] = useState('');
|
||||
const [executeMode, setExecuteMode] = useState(false);
|
||||
const [entitySwitching, setEntitySwitching] = useState(false);
|
||||
|
||||
const [chartIndex, setChartIndex] = useState(0);
|
||||
|
||||
const prefixCls = `${PREFIX_CLS}-item`;
|
||||
|
||||
const updateData = (res: Result<MsgDataType>) => {
|
||||
if (res.code === 401 || res.code === 412) {
|
||||
setTip(res.msg);
|
||||
setExecuteTip(res.msg);
|
||||
return false;
|
||||
}
|
||||
if (res.code !== 200) {
|
||||
setTip(PARSE_ERROR_TIP);
|
||||
setExecuteTip(SEARCH_EXCEPTION_TIP);
|
||||
return false;
|
||||
}
|
||||
const { queryColumns, queryResults, queryState, queryMode } = res.data || {};
|
||||
const { queryColumns, queryResults, queryState, queryMode, response } = res.data || {};
|
||||
if (queryState !== 'SUCCESS') {
|
||||
setTip(PARSE_ERROR_TIP);
|
||||
setExecuteTip(response && typeof response === 'string' ? response : SEARCH_EXCEPTION_TIP);
|
||||
return false;
|
||||
}
|
||||
if ((queryColumns && queryColumns.length > 0 && queryResults) || queryMode === 'INSTRUCTION') {
|
||||
if ((queryColumns && queryColumns.length > 0 && queryResults) || queryMode === 'WEB_PAGE') {
|
||||
setData(res.data);
|
||||
setTip('');
|
||||
setExecuteTip('');
|
||||
return true;
|
||||
}
|
||||
setTip(PARSE_ERROR_TIP);
|
||||
return false;
|
||||
setExecuteTip(SEARCH_EXCEPTION_TIP);
|
||||
return true;
|
||||
};
|
||||
|
||||
const onExecute = async (parseInfoValue: ChatContextType, isSwitch?: boolean) => {
|
||||
setExecuteMode(true);
|
||||
setExecuteLoading(true);
|
||||
const { data } = await chatExecute(msg, conversationId!, parseInfoValue);
|
||||
setExecuteLoading(false);
|
||||
const valid = updateData(data);
|
||||
if (onMsgDataLoaded && !isSwitch) {
|
||||
onMsgDataLoaded({ ...data.data, chatContext: parseInfoValue }, valid);
|
||||
}
|
||||
};
|
||||
|
||||
const onSendMsg = async () => {
|
||||
setLoading(true);
|
||||
const semanticRes = await chatQuery(msg, conversationId, domainId);
|
||||
updateData(semanticRes.data);
|
||||
if (onMsgDataLoaded) {
|
||||
onMsgDataLoaded(semanticRes.data.data);
|
||||
setParseLoading(true);
|
||||
const { data: parseData } = await chatParse(msg, conversationId, domainId, filter);
|
||||
setParseLoading(false);
|
||||
const { code, data } = parseData || {};
|
||||
const { state, selectedParses } = data || {};
|
||||
if (
|
||||
code !== 200 ||
|
||||
state === ParseStateEnum.FAILED ||
|
||||
selectedParses == null ||
|
||||
selectedParses.length === 0 ||
|
||||
(selectedParses.length === 1 &&
|
||||
!selectedParses[0]?.domainName &&
|
||||
!selectedParses[0]?.properties?.CONTEXT?.plugin?.name &&
|
||||
selectedParses[0]?.queryMode !== 'WEB_PAGE')
|
||||
) {
|
||||
setParseTip(PARSE_ERROR_TIP);
|
||||
return;
|
||||
}
|
||||
if (onUpdateMessageScroll) {
|
||||
onUpdateMessageScroll();
|
||||
}
|
||||
setParseInfoOptions(selectedParses || []);
|
||||
if (selectedParses.length === 1) {
|
||||
const parseInfoValue = selectedParses[0];
|
||||
setParseInfo(parseInfoValue);
|
||||
onExecute(parseInfoValue);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -73,55 +114,66 @@ const ChatItem: React.FC<Props> = ({
|
||||
return;
|
||||
}
|
||||
if (msgData) {
|
||||
setParseInfoOptions([msgData.chatContext]);
|
||||
setExecuteMode(true);
|
||||
updateData({ code: 200, data: msgData, msg: 'success' });
|
||||
} else if (msg) {
|
||||
onSendMsg();
|
||||
}
|
||||
}, [msg, msgData]);
|
||||
|
||||
const prefixCls = `${PREFIX_CLS}-item`;
|
||||
const onSwitchEntity = async (entityId: string) => {
|
||||
setEntitySwitching(true);
|
||||
const res = await switchEntity(entityId, data?.chatContext?.domainId, conversationId || 0);
|
||||
setEntitySwitching(false);
|
||||
setData(res.data.data);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className={prefixCls}>
|
||||
<IconFont type="icon-zhinengsuanfa" className={`${prefixCls}-avatar`} />
|
||||
<Typing />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const onChangeChart = () => {
|
||||
setChartIndex(chartIndex + 1);
|
||||
};
|
||||
|
||||
if (tip) {
|
||||
return (
|
||||
<div className={prefixCls}>
|
||||
<IconFont type="icon-zhinengsuanfa" className={`${prefixCls}-avatar`} />
|
||||
<Text data={tip} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data || data.queryMode === 'INSTRUCTION') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isMetricCard =
|
||||
(data.queryMode === 'METRIC_DOMAIN' || data.queryMode === 'METRIC_FILTER') &&
|
||||
data.queryResults?.length === 1;
|
||||
const onSelectParseInfo = async (parseInfoValue: ChatContextType) => {
|
||||
setParseInfo(parseInfoValue);
|
||||
onExecute(parseInfoValue, parseInfo !== undefined);
|
||||
if (onUpdateMessageScroll) {
|
||||
onUpdateMessageScroll();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={prefixCls}>
|
||||
<IconFont type="icon-zhinengsuanfa" className={`${prefixCls}-avatar`} />
|
||||
<div className={`${prefixCls}-content`}>
|
||||
<ChatMsg
|
||||
question={msg}
|
||||
followQuestions={followQuestions}
|
||||
data={data}
|
||||
isMobileMode={isMobileMode}
|
||||
triggerResize={triggerResize}
|
||||
/>
|
||||
{!isMetricCard && (
|
||||
<Tools data={data} isLastMessage={isLastMessage} isMobileMode={isMobileMode} />
|
||||
)}
|
||||
<div className={`${prefixCls}-section`}>
|
||||
<IconFont type="icon-zhinengsuanfa" className={`${prefixCls}-avatar`} />
|
||||
<div className={`${prefixCls}-content`}>
|
||||
<ParseTip
|
||||
parseLoading={parseLoading}
|
||||
parseInfoOptions={parseInfoOptions}
|
||||
parseTip={parseTip}
|
||||
currentParseInfo={parseInfo}
|
||||
onSelectParseInfo={onSelectParseInfo}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{executeMode && data?.queryMode !== 'WEB_PAGE' && (
|
||||
<div className={`${prefixCls}-section`}>
|
||||
<IconFont type="icon-zhinengsuanfa" className={`${prefixCls}-avatar`} />
|
||||
<div className={`${prefixCls}-content`}>
|
||||
<ExecuteItem
|
||||
question={msg}
|
||||
executeLoading={executeLoading}
|
||||
executeTip={executeTip}
|
||||
chartIndex={chartIndex}
|
||||
data={data}
|
||||
isMobileMode={isMobileMode}
|
||||
isLastMessage={isLastMessage}
|
||||
triggerResize={triggerResize}
|
||||
onSwitchEntity={onSwitchEntity}
|
||||
onChangeChart={onChangeChart}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user