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

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

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

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

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

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

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

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

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