From 34b76ffd53f2aadc8a7c748d43e11068008195b4 Mon Sep 17 00:00:00 2001
From: williamhliu <137068196+williamhliu@users.noreply.github.com>
Date: Wed, 26 Jun 2024 10:20:17 +0800
Subject: [PATCH] (improvement)(chat-sdk) optimize parse style (#1230)

---
 .../src/components/ChatItem/ExecuteItem.tsx   | 22 ++++-----
 .../src/components/ChatItem/ParseTip.tsx      | 14 ++++--
 .../src/components/ChatItem/index.tsx         | 47 +++++++++----------
 .../src/components/ChatItem/style.less        |  4 ++
 4 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/ExecuteItem.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/ExecuteItem.tsx
index 65ccc7958..95fe654b5 100644
--- a/webapp/packages/chat-sdk/src/components/ChatItem/ExecuteItem.tsx
+++ b/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} />
           ) : (
diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx
index de54a1510..91b832254 100644
--- a/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx
+++ b/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
   );
 };
 
diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx
index 0a37f7a76..e69554412 100644
--- a/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx
+++ b/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>
   );
diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/style.less b/webapp/packages/chat-sdk/src/components/ChatItem/style.less
index 7567c104f..fdb5608dc 100644
--- a/webapp/packages/chat-sdk/src/components/ChatItem/style.less
+++ b/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);