diff --git a/webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx b/webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx index 34d6c6c1b..ba342ecaa 100644 --- a/webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx +++ b/webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx @@ -76,6 +76,7 @@ const MessageContainer: React.FC = ({ score, identityMsg, parseInfos, + parseTimeCost, msgData, filters, } = msgItem; @@ -93,13 +94,13 @@ const MessageContainer: React.FC = ({ = ( type: MessageTypeEnum.QUESTION, msg: item.queryText, parseInfos: item.parseInfos, + parseTimeCost: item.parseTimeCost, msgData: item.queryResult, score: item.score, agentId: currentAgent?.id, @@ -421,23 +422,41 @@ const Chat: ForwardRefRenderFunction = ( onCloseConversation={onCloseConversation} ref={conversationRef} /> - {currentAgent && ( - { - setShowCaseVisible(false); - }} - > -
+ {currentAgent && + (isMobile ? ( + { + setShowCaseVisible(false); + }} + > -
- - )} + + ) : ( + { + setShowCaseVisible(false); + }} + > + + + ))} void; }; -const ShowCase: React.FC = ({ agentId, onSendMsg }) => { - const [showCaseMap, setShowCaseMap] = useState({}); +const ShowCase: React.FC = ({ height, agentId, onSendMsg }) => { + const [showCaseList, setShowCaseList] = useState([]); const [loading, setLoading] = useState(false); + const [pageNo, setPageNo] = useState(1); - const updateData = async () => { - setLoading(true); - const res = await queryShowCase(agentId, 1, 30); - setLoading(false); - setShowCaseMap(res.data.showCaseMap); + const showcaseRef = useRef(null); + + const updateData = async (pageNoValue: number) => { + if (pageNoValue === 1) { + setLoading(true); + } + const res = await queryShowCase(agentId, pageNoValue, isMobile ? 10 : 20); + if (pageNoValue === 1) { + setLoading(false); + } + const showCaseMapRes: any = res.data.showCaseMap; + const list = Object.keys(showCaseMapRes) + .reduce((result: ShowCaseItemType[], key: string) => { + result.push({ msgList: showCaseMapRes[key], caseId: key }); + return result; + }, []) + .sort((a, b) => { + return (b.msgList?.[0]?.score || 3) - (a.msgList?.[0]?.score || 3); + }); + setShowCaseList(pageNoValue === 1 ? list : [...showCaseList, ...list]); }; + const { run: handleScroll } = useThrottleFn( + e => { + const bottom = + e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight || + e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight + 0.5; + if (bottom) { + updateData(pageNo + 1); + setPageNo(pageNo + 1); + } + }, + { + leading: true, + trailing: true, + wait: 200, + } + ); + + useEffect(() => { + if (isMobile) { + return; + } + const el = showcaseRef.current; + el?.addEventListener('scroll', handleScroll); + return () => { + el.removeEventListener('scroll', handleScroll); + }; + }, []); + useEffect(() => { if (agentId) { - updateData(); + setShowCaseList([]); + updateData(1); + setPageNo(1); } }, [agentId]); + const showCaseClass = classNames(styles.showCase, { [styles.mobile]: isMobile }); + return ( -
- {Object.keys(showCaseMap || {}).map(key => { - const showCaseItem = showCaseMap?.[key] || []; - return ( -
- {showCaseItem - .filter((chatItem: HistoryMsgItemType) => !!chatItem.queryResult) - .slice(0, 10) - .map((chatItem: HistoryMsgItemType) => { - return ( -
- - -
- ); - })} -
- ); - })} +
+
+ {showCaseList.map(showCaseItem => { + return ( +
+ {showCaseItem.msgList + .filter((chatItem: HistoryMsgItemType) => !!chatItem.queryResult) + .slice(0, 1) + .map((chatItem: HistoryMsgItemType) => { + return ( +
+ + +
+ ); + })} +
+ ); + })} +
); diff --git a/webapp/packages/chat-sdk/src/ShowCase/style.module.less b/webapp/packages/chat-sdk/src/ShowCase/style.module.less index 93988dc67..995561e14 100644 --- a/webapp/packages/chat-sdk/src/ShowCase/style.module.less +++ b/webapp/packages/chat-sdk/src/ShowCase/style.module.less @@ -1,27 +1,46 @@ .showCase { - column-count: 2; - column-gap: 20px; + position: relative; height: 100%; - min-height: 400px; + padding: 0 20px; overflow-y: auto; + padding-bottom: 2px; - .showCaseItem { - display: flex; - flex-direction: column; - row-gap: 12px; - padding: 12px; - margin-bottom: 20px; - max-height: 800px; - overflow-y: auto; - border-radius: 12px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12); - background: linear-gradient(180deg, rgba(23, 74, 228, 0) 29.44%, rgba(23, 74, 228, 0.06) 100%), - linear-gradient(90deg, #f3f3f7 0%, #f3f3f7 20%, #ebf0f9 60%, #f3f3f7 80%, #f3f3f7 100%); + .showCaseContent { + column-count: 2; + column-gap: 20px; - .showCaseChatItem { + .showcaseLoading { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 400px; + } + + .showCaseItem { display: flex; flex-direction: column; row-gap: 12px; + padding: 12px; + margin-bottom: 20px; + overflow-y: auto; + border-radius: 12px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12); + background: linear-gradient(180deg, rgba(23, 74, 228, 0) 29.44%, rgba(23, 74, 228, 0.06) 100%), + linear-gradient(90deg, #f3f3f7 0%, #f3f3f7 20%, #ebf0f9 60%, #f3f3f7 80%, #f3f3f7 100%); + + .showCaseChatItem { + display: flex; + flex-direction: column; + row-gap: 12px; + } + } + } + + &.mobile { + padding: 0 4px; + .showCaseContent { + column-count: 1; } } } diff --git a/webapp/packages/chat-sdk/src/ShowCase/type.ts b/webapp/packages/chat-sdk/src/ShowCase/type.ts index 8313a16e5..912fda89a 100644 --- a/webapp/packages/chat-sdk/src/ShowCase/type.ts +++ b/webapp/packages/chat-sdk/src/ShowCase/type.ts @@ -2,6 +2,11 @@ import { HistoryMsgItemType } from "../common/type"; export type ShowCaseMapType = Record; +export type ShowCaseItemType = { + caseId: string; + msgList: HistoryMsgItemType[]; +} + export type ShowCaseType = { showCaseMap: ShowCaseMapType, current: number, diff --git a/webapp/packages/chat-sdk/src/common/type.ts b/webapp/packages/chat-sdk/src/common/type.ts index d3225ef06..55a5a877e 100644 --- a/webapp/packages/chat-sdk/src/common/type.ts +++ b/webapp/packages/chat-sdk/src/common/type.ts @@ -136,7 +136,8 @@ export type MsgDataType = { queryState: string; queryText: string; response: PluginResonseType; - parseOptions?: ChatContextType[]; + parseInfos?: ChatContextType[]; + queryTimeCost?: number; }; export enum ParseStateEnum { @@ -211,6 +212,7 @@ export type HistoryMsgItemType = { questionId: number; queryText: string; parseInfos: ChatContextType[]; + parseTimeCost: ParseTimeCostType; queryResult: MsgDataType; chatId: number; createTime: string; @@ -242,3 +244,8 @@ export type SimilarQuestionType = { // parseId: number; queryText: string; } + +export type ParseTimeCostType = { + parseTime: number; + sqlTime: number; +} diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/ExecuteItem.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/ExecuteItem.tsx index f3c5fb088..44985c748 100644 --- a/webapp/packages/chat-sdk/src/components/ChatItem/ExecuteItem.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatItem/ExecuteItem.tsx @@ -1,5 +1,5 @@ -import { Button, Spin } from 'antd'; -import { CheckCircleFilled, ReloadOutlined } from '@ant-design/icons'; +import { Spin } from 'antd'; +import { CheckCircleFilled } from '@ant-design/icons'; import { PREFIX_CLS } from '../../common/constants'; import { MsgDataType } from '../../common/type'; import ChatMsg from '../ChatMsg'; @@ -17,7 +17,7 @@ type Props = { renderCustomExecuteNode?: boolean; data?: MsgDataType; triggerResize?: boolean; - onRefresh: () => void; + isDeveloper?: boolean; }; const ExecuteItem: React.FC = ({ @@ -30,7 +30,7 @@ const ExecuteItem: React.FC = ({ renderCustomExecuteNode, data, triggerResize, - onRefresh, + isDeveloper, }) => { const prefixCls = `${PREFIX_CLS}-item`; @@ -49,19 +49,20 @@ const ExecuteItem: React.FC = ({ ); }; - const reloadNode = ( - - ); - if (executeLoading) { return getNodeTip('数据查询中'); } if (executeTip) { - return getNodeTip(<>数据查询失败：{reloadNode}, executeTip); + return getNodeTip( + <> + 数据查询失败 + {data?.queryTimeCost && isDeveloper && ( + (耗时: {data.queryTimeCost}ms) + )} + , + executeTip + ); } if (!data) { @@ -73,8 +74,10 @@ const ExecuteItem: React.FC = ({
- 数据查询： - {reloadNode} + 数据查询 + {data?.queryTimeCost && isDeveloper && ( + (耗时: {data.queryTimeCost}ms) + )}
diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/FilterItem.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/FilterItem.tsx index e76403945..088f90c0c 100644 --- a/webapp/packages/chat-sdk/src/components/ChatItem/FilterItem.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatItem/FilterItem.tsx @@ -1,15 +1,17 @@ -import { Select, Spin, InputNumber } from 'antd'; +import { Select, Spin, InputNumber, DatePicker } from 'antd'; import { PREFIX_CLS } from '../../common/constants'; import { ChatContextType, FilterItemType } from '../../common/type'; import { useEffect, useMemo, useRef, useState } from 'react'; import { queryDimensionValues } from '../../service'; import { debounce, isArray } from 'lodash'; import SwicthEntity from './SwitchEntity'; +import moment from 'moment'; type Props = { modelId: number; filters: FilterItemType[]; filter: FilterItemType; + index: number; chatContext: ChatContextType; agentId?: number; entityAlias?: string; @@ -22,6 +24,7 @@ const FilterItem: React.FC = ({ modelId, filters, filter, + index, chatContext, agentId, entityAlias, @@ -44,7 +47,7 @@ const FilterItem: React.FC = ({ '' ); setOptions( - data?.resultList.map((item: any) => ({ + data?.resultList?.map((item: any) => ({ label: item[filter.bizName], value: item[filter.bizName], })) || [] @@ -87,8 +90,8 @@ const FilterItem: React.FC = ({ }, [queryDimensionValues]); const onOperatorChange = (value: string) => { - const newFilters = filters.map(item => { - if (item.bizName === filter.bizName) { + const newFilters = filters.map((item, indexValue) => { + if (item.bizName === filter.bizName && index === indexValue) { item.operator = value; } return item; @@ -97,8 +100,8 @@ const FilterItem: React.FC = ({ }; const onChange = (value: string | string[] | number | null) => { - const newFilters = filters.map(item => { - if (item.bizName === filter.bizName) { + const newFilters = filters.map((item, indexValue) => { + if (item.bizName === filter.bizName && index === indexValue) { item.value = typeof filter.value === 'number' || filter.value === null ? value @@ -123,28 +126,46 @@ const FilterItem: React.FC = ({ onFiltersChange(newFilters); }; + const onDateChange = (_: any, date: string) => { + console.log('onDateChange', date); + const newFilters = filters.map((item, indexValue) => { + if (item.bizName === filter.bizName && index === indexValue) { + item.value = date; + } + return item; + }); + onFiltersChange(newFilters); + }; + return ( {filter.name}： - {(typeof filter.value === 'number' || filter.value === null) && - !filter.bizName?.includes('_id') ? ( - <> + {(typeof filter.value === 'number' || + filter.value === null || + (filter.operator && !['IN', '=', 'LIKE'].includes(filter.operator))) && + !filter.bizName?.includes('_id') && ( = ({ ) : ( - {filter.value} + + {typeof filter.value !== 'object' ? filter.value : ''} + )} ); diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx index 644d4e558..11f4dee9f 100644 --- a/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx @@ -1,8 +1,8 @@ import React, { ReactNode } from 'react'; import { AGG_TYPE_MAP, PREFIX_CLS } from '../../common/constants'; import { ChatContextType, DateInfoType, EntityInfoType, FilterItemType } from '../../common/type'; -import { DatePicker } from 'antd'; -import { CheckCircleFilled } from '@ant-design/icons'; +import { Button, DatePicker } from 'antd'; +import { CheckCircleFilled, ReloadOutlined } from '@ant-design/icons'; import Loading from './Loading'; import FilterItem from './FilterItem'; import moment from 'moment'; @@ -21,10 +21,13 @@ type Props = { dateInfo: DateInfoType; entityInfo: EntityInfoType; integrateSystem?: string; + parseTimeCost?: number; + isDeveloper?: boolean; onSelectParseInfo: (parseInfo: ChatContextType) => void; onSwitchEntity: (entityId: string) => void; onFiltersChange: (filters: FilterItemType[]) => void; onDateInfoChange: (dateRange: any) => void; + onRefresh: () => void; }; const MAX_OPTION_VALUES_COUNT = 2; @@ -39,10 +42,13 @@ const ParseTip: React.FC = ({ dateInfo, entityInfo, integrateSystem, + parseTimeCost, + isDeveloper, onSelectParseInfo, onSwitchEntity, onFiltersChange, onDateInfoChange, + onRefresh, }) => { const prefixCls = `${PREFIX_CLS}-item`; @@ -66,7 +72,15 @@ const ParseTip: React.FC = ({ } if (parseTip) { - return getNode('意图解析失败', parseTip); + return getNode( + <> + 意图解析失败 + {parseTimeCost && isDeveloper && ( + (耗时: {parseTimeCost}ms) + )} + , + parseTip + ); } if (parseInfoOptions.length === 0) { @@ -218,18 +232,19 @@ const ParseTip: React.FC = ({ /> )}
- {filters?.map((filter: any) => ( + {filters?.map((filter: any, index: number) => ( ))}
@@ -238,23 +253,39 @@ const ParseTip: React.FC = ({ const getFiltersNode = () => { return ( -
-
筛选条件：
-
{getFilterContent(dimensionFilters)}
-
+ <> +
+
筛选条件：
+
+ {getFilterContent(dimensionFilters)} +
+
+ + ); }; + const { type: agentType } = properties || {}; + const tipNode = (
{getTipNode()} - {getFiltersNode()} + {!(!!agentType && queryMode !== 'LLM_S2QL') && getFiltersNode()}
); return getNode(
-
意图解析{parseInfoOptions?.length > 1 ? '：' : ''}
+
+ 意图解析 + {parseTimeCost && isDeveloper && ( + (耗时: {parseTimeCost}ms) + )} + {parseInfoOptions?.length > 1 ? '：' : ''} +
{parseInfoOptions?.length > 1 && (
{parseInfoOptions.map((parseInfo, index) => ( diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx index 54149d848..9696e4d95 100644 --- a/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx @@ -11,9 +11,10 @@ import { SqlInfoType } from '../../common/type'; type Props = { integrateSystem?: string; sqlInfo: SqlInfoType; + sqlTimeCost?: number; }; -const SqlItem: React.FC = ({ integrateSystem, sqlInfo }) => { +const SqlItem: React.FC = ({ integrateSystem, sqlInfo, sqlTimeCost }) => { const [sqlType, setSqlType] = useState(''); const tipPrefixCls = `${PREFIX_CLS}-item`; @@ -36,7 +37,11 @@ const SqlItem: React.FC = ({ integrateSystem, sqlInfo }) => {
- SQL生成： + SQL生成 + {sqlTimeCost && ( + (耗时: {sqlTimeCost}ms) + )} + ： {sqlType && ( @@ -53,7 +58,7 @@ const SqlItem: React.FC = ({ integrateSystem, sqlInfo }) => { setSqlType(sqlType === 's2QL' ? '' : 's2QL'); }} > - S2QL + 解析S2QL
)} {sqlInfo.logicSql && ( @@ -65,7 +70,7 @@ const SqlItem: React.FC = ({ integrateSystem, sqlInfo }) => { setSqlType(sqlType === 'logicSql' ? '' : 'logicSql'); }} > - 逻辑SQL + 修正S2QL
)} {sqlInfo.querySql && ( @@ -77,7 +82,7 @@ const SqlItem: React.FC = ({ integrateSystem, sqlInfo }) => { setSqlType(sqlType === 'querySql' ? '' : 'querySql'); }} > - 物理SQL + 执行SQL
)}
@@ -91,7 +96,7 @@ const SqlItem: React.FC = ({ integrateSystem, sqlInfo }) => { : '' }`} > - {sqlType && ( + {sqlType && sqlInfo[sqlType] && ( <> = ({ agentId, score, filter, - isLastMessage, triggerResize, parseInfos, + parseTimeCostValue, msgData, isDeveloper, integrateSystem, @@ -61,6 +62,7 @@ const ChatItem: React.FC = ({ }) => { const [data, setData] = useState(); const [parseLoading, setParseLoading] = useState(false); + const [parseTimeCost, setParseTimeCost] = useState(); const [parseInfo, setParseInfo] = useState(); const [parseInfoOptions, setParseInfoOptions] = useState([]); const [parseTip, setParseTip] = useState(''); @@ -97,24 +99,50 @@ const ChatItem: React.FC = ({ return true; }; - const onExecute = async (parseInfoValue: ChatContextType) => { + const onExecute = async ( + parseInfoValue: ChatContextType, + parseInfos?: ChatContextType[], + isSwitchParseInfo?: boolean + ) => { setExecuteMode(true); - setExecuteLoading(true); + if (isSwitchParseInfo) { + setEntitySwitchLoading(true); + } else { + setExecuteLoading(true); + } try { const res: any = await chatExecute(msg, conversationId!, parseInfoValue); - setExecuteLoading(false); const valid = updateData(res); onMsgDataLoaded?.( { ...res.data, - chatContext: parseInfoValue, + parseInfos, + queryId: parseInfoValue.queryId, }, valid ); } catch (e) { - setExecuteLoading(false); setExecuteTip(SEARCH_EXCEPTION_TIP); } + if (isSwitchParseInfo) { + setEntitySwitchLoading(false); + } else { + setExecuteLoading(false); + } + }; + + const updateDimensionFitlers = (filters: FilterItemType[]) => { + setDimensionFilters( + filters.sort((a, b) => { + if (a.name < b.name) { + return -1; + } + if (a.name > b.name) { + return 1; + } + return 0; + }) + ); }; const sendMsg = async () => { @@ -122,7 +150,7 @@ const ChatItem: React.FC = ({ const parseData: any = await chatParse(msg, conversationId, modelId, agentId, filter); setParseLoading(false); const { code, data } = parseData || {}; - const { state, selectedParses, candidateParses, queryId } = data || {}; + const { state, selectedParses, candidateParses, queryId, parseTimeCost } = data || {}; if ( code !== 200 || state === ParseStateEnum.FAILED || @@ -143,10 +171,11 @@ const ChatItem: React.FC = ({ setParseInfoOptions(parseInfos || []); const parseInfoValue = parseInfos[0]; setParseInfo(parseInfoValue); + setParseTimeCost(parseTimeCost); setEntityInfo(parseInfoValue.entityInfo || {}); - setDimensionFilters(parseInfoValue?.dimensionFilters || []); + updateDimensionFitlers(parseInfoValue?.dimensionFilters || []); setDateInfo(parseInfoValue?.dateInfo); - onExecute(parseInfoValue); + onExecute(parseInfoValue, parseInfos); }; useEffect(() => { @@ -161,7 +190,8 @@ const ChatItem: React.FC = ({ const parseInfoValue = parseInfoOptionsValue[0]; setParseInfoOptions(parseInfoOptionsValue); setParseInfo(parseInfoValue); - setDimensionFilters(parseInfoValue.dimensionFilters || []); + setParseTimeCost(parseTimeCostValue); + updateDimensionFitlers(parseInfoValue.dimensionFilters || []); setDateInfo(parseInfoValue.dateInfo); setExecuteMode(true); updateData({ code: 200, data: msgData, msg: 'success' }); @@ -179,7 +209,7 @@ const ChatItem: React.FC = ({ const chatContextValue = { ...(chatContext || {}), queryId: parseInfo?.queryId }; setParseInfo(chatContextValue); setEntityInfo(entityInfo); - setDimensionFilters(chatContextValue?.dimensionFilters || []); + updateDimensionFitlers(chatContextValue?.dimensionFilters || []); setDateInfo(chatContextValue?.dateInfo); }; @@ -213,7 +243,12 @@ const ChatItem: React.FC = ({ if (res.code === 200) { const resChatContext = res.data?.chatContext; const contextValue = { ...(resChatContext || chatContextValue), queryId }; - const dataValue = { ...res.data, chatContext: contextValue }; + const dataValue = { + ...res.data, + chatContext: contextValue, + parseInfos: parseInfoOptions, + queryId, + }; onMsgDataLoaded?.(dataValue, true, true); setData(dataValue); setParseInfo(contextValue); @@ -227,13 +262,14 @@ const ChatItem: React.FC = ({ const onSelectParseInfo = async (parseInfoValue: ChatContextType) => { setParseInfo(parseInfoValue); - setDimensionFilters(parseInfoValue.dimensionFilters || []); + updateDimensionFitlers(parseInfoValue.dimensionFilters || []); setDateInfo(parseInfoValue.dateInfo); if (parseInfoValue.entityInfo) { setEntityInfo(parseInfoValue.entityInfo); } else { getEntityInfo(parseInfoValue); } + onExecute(parseInfoValue, parseInfoOptions, true); }; const onSelectQuestion = (question: SimilarQuestionType) => { @@ -261,15 +297,22 @@ const ChatItem: React.FC = ({ dateInfo={dateInfo} entityInfo={entityInfo} integrateSystem={integrateSystem} + parseTimeCost={parseTimeCost?.parseTime} + isDeveloper={isDeveloper} onSelectParseInfo={onSelectParseInfo} onSwitchEntity={onSwitchEntity} onFiltersChange={onFiltersChange} onDateInfoChange={onDateInfoChange} + onRefresh={onRefresh} /> {executeMode && ( <> {!isMobile && parseInfo?.sqlInfo && isDeveloper && integrateSystem !== 'c2' && ( - + )} = ({ data={data} triggerResize={triggerResize} executeItemNode={executeItemNode} + isDeveloper={isDeveloper} renderCustomExecuteNode={renderCustomExecuteNode} - onRefresh={onRefresh} /> )} @@ -294,11 +337,9 @@ const ChatItem: React.FC = ({ /> )} - {(parseTip !== '' || (executeMode && !executeLoading)) && - integrateSystem !== 'c2' && - integrateSystem !== 'showcase' && ( - - )} + {(parseTip !== '' || (executeMode && !executeLoading)) && integrateSystem !== 'c2' && ( + + )} ); diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/style.less b/webapp/packages/chat-sdk/src/components/ChatItem/style.less index 6ec949809..c939ffdc0 100644 --- a/webapp/packages/chat-sdk/src/components/ChatItem/style.less +++ b/webapp/packages/chat-sdk/src/components/ChatItem/style.less @@ -133,6 +133,12 @@ column-gap: 10px; } + &-title-tip { + margin-left: 2px; + color: var(--text-color-third); + font-weight: normal; + } + &-step-title { font-weight: 500; color: var(--text-color); @@ -140,6 +146,7 @@ &-reload { margin-left: 2px; + width: fit-content; font-weight: normal; color: var(--text-color-secondary); font-size: 13px !important; diff --git a/webapp/packages/chat-sdk/src/components/ChatMsg/Bar/index.tsx b/webapp/packages/chat-sdk/src/components/ChatMsg/Bar/index.tsx index 74edcaaab..cf9ec3ba2 100644 --- a/webapp/packages/chat-sdk/src/components/ChatMsg/Bar/index.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatMsg/Bar/index.tsx @@ -36,7 +36,9 @@ const BarChart: React.FC = ({ data, triggerResize, loading, onApplyAuth } const data = (queryResults || []).sort( (a: any, b: any) => b[metricColumnName] - a[metricColumnName] ); - const xData = data.map(item => item[categoryColumnName]); + const xData = data.map(item => + item[categoryColumnName] !== undefined ? item[categoryColumnName] : '未知' + ); instanceObj.setOption({ xAxis: { type: 'category', diff --git a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/index.tsx b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/index.tsx index 6795c85bb..4c206a57b 100644 --- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/index.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/index.tsx @@ -52,7 +52,9 @@ const MetricCard: React.FC = ({ data, loading, onApplyAuth }) => { ) : (
- {dataFormatType === 'percent' || dataFormatType === 'decimal' + {typeof value === 'string' && isNaN(+value) + ? value + : dataFormatType === 'percent' || dataFormatType === 'decimal' ? `${formatByDecimalPlaces( dataFormat?.needMultiply100 ? +value * 100 : value, dataFormat?.decimalPlaces || 2 diff --git a/webapp/packages/chat-sdk/src/components/ChatMsg/Table/index.tsx b/webapp/packages/chat-sdk/src/components/ChatMsg/Table/index.tsx index 74a55d0be..9d8927551 100644 --- a/webapp/packages/chat-sdk/src/components/ChatMsg/Table/index.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatMsg/Table/index.tsx @@ -1,4 +1,4 @@ -import { formatByDecimalPlaces, getFormattedValue } from '../../../utils/utils'; +import { formatByDecimalPlaces, getFormattedValue, isMobile } from '../../../utils/utils'; import { Table as AntTable } from 'antd'; import { MsgDataType } from '../../../common/type'; import { CLS_PREFIX } from '../../../common/constants'; @@ -70,7 +70,13 @@ const Table: React.FC = ({ data, size, onApplyAuth }) => {
= ({ queryId, data, chartIndex, triggerResize }) /> ); } - if (categoryField?.length > 0 && metricFields?.length > 0) { + if ( + categoryField?.length > 0 && + metricFields?.length > 0 && + (isMobile ? dataSource?.length <= 20 : dataSource?.length <= 50) + ) { return ( { agentId={5} conversationId={112211121} onMsgDataLoaded={onMsgDataLoaded} - isLastMessage triggerResize={triggerResize} integrateSystem="wiki" isDeveloper diff --git a/webapp/pnpm-lock.yaml b/webapp/pnpm-lock.yaml index bbb58db3b..8847d1049 100644 --- a/webapp/pnpm-lock.yaml +++ b/webapp/pnpm-lock.yaml @@ -319,8 +319,8 @@ importers: specifier: ^4.8.14 version: 4.8.22 '@antv/g6-core': - specifier: ^0.8.21 - version: 0.8.22 + specifier: ^0.8.23 + version: 0.8.23 '@antv/layout': specifier: ^0.3.20 version: 0.3.23(dagre@0.8.5) @@ -1514,6 +1514,21 @@ packages: tslib: 2.6.2 dev: false + /@antv/g6-core@0.8.23: + resolution: {integrity: sha512-JWdnba5Bx4/hLhbIQeyvdgh68SDYZisveukuBifxLKODCNJNKTopmWf1w6tU+RxAT2k5ByXkTGWQE1IkIL8O+Q==} + dependencies: + '@antv/algorithm': 0.1.26 + '@antv/dom-util': 2.0.4 + '@antv/event-emitter': 0.1.3 + '@antv/g-base': 0.5.15 + '@antv/g-math': 0.1.9 + '@antv/matrix-util': 3.1.0-beta.3 + '@antv/path-util': 2.0.15 + '@antv/util': 2.0.17 + ml-matrix: 6.10.4 + tslib: 2.6.2 + dev: false + /@antv/g6-element@0.8.22: resolution: {integrity: sha512-rTJgaFDeaiHEF5d+hdJEGbh+Z272bi+Zzu5aTDWCtFFgxtosdeOQGWdyhIEeLCstRvlP3RaaztBIsSZm5BWFsA==} dependencies: @@ -1533,7 +1548,7 @@ packages: '@antv/g-canvas': 0.5.14 '@antv/g-math': 0.1.9 '@antv/g-svg': 0.5.7 - '@antv/g6-core': 0.8.22 + '@antv/g6-core': 0.8.23 '@antv/g6-element': 0.8.22 '@antv/g6-plugin': 0.8.22 '@antv/hierarchy': 0.6.11