topdog/supersonic
1
0
Fork 0
mirror of https://github.com/tencentmusic/supersonic.git synced 2025-12-14 22:25:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

(improvement)(chat-sdk) optimize parse style (#1230)

Browse Source
This commit is contained in:
williamhliu
2024-06-26 10:20:17 +08:00
committed by GitHub
parent 1e5cfb51df
commit 34b76ffd53
4 changed files with 49 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
webapp/packages/chat-sdk/src/components/ChatItem/ExecuteItem.tsx
View File

@@ -40,6 +40,8 @@ const ExecuteItem: React.FC<Props> = ({
const [showMsgContentTable, setShowMsgContentTable] = useState<boolean>(false); const [showMsgContentTable, setShowMsgContentTable] = useState<boolean>(false);
const [msgContentType, setMsgContentType] = useState<MsgContentTypeEnum>(); const [msgContentType, setMsgContentType] = useState<MsgContentTypeEnum>();
const titlePrefix = queryMode === 'PLAIN_TEXT' ? '问答' : '数据';
const getNodeTip = (title: ReactNode, tip?: string) => { const getNodeTip = (title: ReactNode, tip?: string) => {
return ( return (
<> <>
@@ -56,16 +58,13 @@ const ExecuteItem: React.FC<Props> = ({
}; };
if (executeLoading) { if (executeLoading) {
if (queryMode === 'PLAIN_TEXT') { return getNodeTip(`${titlePrefix}查询中`);
return <Loading />;
}
return getNodeTip('数据查询中');
} }
if (executeTip) { if (executeTip) {
return getNodeTip( return getNodeTip(
<> <>
数据查询失败 {titlePrefix}查询失败
{data?.queryTimeCost && isDeveloper && ( {data?.queryTimeCost && isDeveloper && (
<span className={`${prefixCls}-title-tip`}>(耗时: {data.queryTimeCost}ms)</span> <span className={`${prefixCls}-title-tip`}>(耗时: {data.queryTimeCost}ms)</span>
)} )}
@@ -78,10 +77,6 @@ const ExecuteItem: React.FC<Props> = ({
return null; return null;
} }
if (data.queryMode === 'PLAIN_TEXT') {
return <>{data.textResult}</>;
}
return ( return (
<> <>
<div className={`${prefixCls}-title-bar`}> <div className={`${prefixCls}-title-bar`}>
@@ -89,7 +84,7 @@ const ExecuteItem: React.FC<Props> = ({
<div className={`${prefixCls}-step-title`} style={{ width: '100%' }}> <div className={`${prefixCls}-step-title`} style={{ width: '100%' }}>
<Row style={{ width: '100%' }}> <Row style={{ width: '100%' }}>
<Col flex="1 1 auto"> <Col flex="1 1 auto">
数据查询 {titlePrefix}查询
{data?.queryTimeCost && isDeveloper && ( {data?.queryTimeCost && isDeveloper && (
<span className={`${prefixCls}-title-tip`}>(耗时: {data.queryTimeCost}ms)</span> <span className={`${prefixCls}-title-tip`}>(耗时: {data.queryTimeCost}ms)</span>
)} )}
@@ -110,13 +105,18 @@ const ExecuteItem: React.FC<Props> = ({
</Row> </Row>
</div> </div>
</div> </div>
<div className={`${prefixCls}-content-container`}> <div
className={`${prefixCls}-content-container`}
style={{ borderLeft: queryMode === 'PLAIN_TEXT' ? 'none' : undefined }}
>
<Spin spinning={entitySwitchLoading}> <Spin spinning={entitySwitchLoading}>
{data.queryAuthorization?.message && ( {data.queryAuthorization?.message && (
<div className={`${prefixCls}-auth-tip`}>提示：{data.queryAuthorization.message}</div> <div className={`${prefixCls}-auth-tip`}>提示：{data.queryAuthorization.message}</div>
)} )}
{renderCustomExecuteNode && executeItemNode ? ( {renderCustomExecuteNode && executeItemNode ? (
executeItemNode executeItemNode
) : data?.queryMode === 'PLAIN_TEXT' ? (
data?.textResult
) : data?.queryMode === 'WEB_PAGE' ? ( ) : data?.queryMode === 'WEB_PAGE' ? (
<WebPage id={queryId!} data={data} /> <WebPage id={queryId!} data={data} />
) : ( ) : (

14
webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx
View File

@@ -61,10 +61,18 @@ const ParseTip: React.FC<Props> = ({
<CheckCircleFilled className={`${prefixCls}-step-icon`} /> <CheckCircleFilled className={`${prefixCls}-step-icon`} />
<div className={`${prefixCls}-step-title`}> <div className={`${prefixCls}-step-title`}>
{tipTitle} {tipTitle}
{!tipNode && <Loading />} {tipNode === undefined && <Loading />}
</div> </div>
</div> </div>
{tipNode && <div className={`${prefixCls}-content-container`}>{tipNode}</div>} {(tipNode || tipNode === null) && (
<div
className={`${prefixCls}-content-container ${
tipNode === null ? `${prefixCls}-empty-content-container` : ''
}`}
>
{tipNode}
</div>
)}
</div> </div>
); );
}; };
@@ -310,7 +318,7 @@ const ParseTip: React.FC<Props> = ({
</div> </div>
)} )}
</div>, </div>,
isSimpleMode ? <MarkDown markdown={textInfo} /> : tipNode isSimpleMode ? <MarkDown markdown={textInfo} /> : queryMode === 'PLAIN_TEXT' ? null : tipNode
); );
}; };

47
webapp/packages/chat-sdk/src/components/ChatItem/index.tsx
View File

@@ -320,27 +320,25 @@ const ChatItem: React.FC<Props> = ({
)} )}
<div className={isMobile ? `${prefixCls}-mobile-msg-card` : `${prefixCls}-msg-card`}> <div className={isMobile ? `${prefixCls}-mobile-msg-card` : `${prefixCls}-msg-card`}>
<div className={contentClass}> <div className={contentClass}>
{parseInfo?.queryMode !== 'PLAIN_TEXT' && ( <ParseTip
<ParseTip isSimpleMode={isSimpleMode}
isSimpleMode={isSimpleMode} parseLoading={parseLoading}
parseLoading={parseLoading} parseInfoOptions={parseInfoOptions}
parseInfoOptions={parseInfoOptions} parseTip={parseTip}
parseTip={parseTip} currentParseInfo={parseInfo}
currentParseInfo={parseInfo} agentId={agentId}
agentId={agentId} dimensionFilters={dimensionFilters}
dimensionFilters={dimensionFilters} dateInfo={dateInfo}
dateInfo={dateInfo} entityInfo={entityInfo}
entityInfo={entityInfo} integrateSystem={integrateSystem}
integrateSystem={integrateSystem} parseTimeCost={parseTimeCost?.parseTime}
parseTimeCost={parseTimeCost?.parseTime} isDeveloper={isDeveloper}
isDeveloper={isDeveloper} onSelectParseInfo={onSelectParseInfo}
onSelectParseInfo={onSelectParseInfo} onSwitchEntity={onSwitchEntity}
onSwitchEntity={onSwitchEntity} onFiltersChange={onFiltersChange}
onFiltersChange={onFiltersChange} onDateInfoChange={onDateInfoChange}
onDateInfoChange={onDateInfoChange} onRefresh={onRefresh}
onRefresh={onRefresh} />
/>
)}
{executeMode && ( {executeMode && (
<> <>
{!isMobile && parseInfo?.sqlInfo && isDeveloper && !isSimpleMode && ( {!isMobile && parseInfo?.sqlInfo && isDeveloper && !isSimpleMode && (
@@ -380,9 +378,10 @@ const ChatItem: React.FC<Props> = ({
/> />
)} )}
</div> </div>
{(parseTip !== '' || (executeMode && !executeLoading)) && ( {(parseTip !== '' || (executeMode && !executeLoading)) &&
<Tools queryId={parseInfo?.queryId || 0} scoreValue={score} /> parseInfo?.queryMode !== 'PLAIN_TEXT' && (
)} <Tools queryId={parseInfo?.queryId || 0} scoreValue={score} />
)}
</div> </div>
</div> </div>
); );

4
webapp/packages/chat-sdk/src/components/ChatItem/style.less
View File

@@ -168,6 +168,10 @@
padding-bottom: 10px; padding-bottom: 10px;
} }
&-empty-content-container {
padding-bottom: 0;
}
&-auth-tip { &-auth-tip {
font-size: 13px; font-size: 13px;
color: var(--text-color-secondary); color: var(--text-color-secondary);