(feature)(webapp) add display of time consumption at each stage (#331)

webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx

@@ -76,6 +76,7 @@ const MessageContainer: React.FC<Props> = ({
             score,
             identityMsg,
             parseInfos,
+            parseTimeCost,
             msgData,
             filters,
           } = msgItem;
@@ -93,13 +94,13 @@ const MessageContainer: React.FC<Props> = ({
                   <ChatItem
                     msg={msgValue || msg || ''}
                     parseInfos={parseInfos}
+                    parseTimeCostValue={parseTimeCost}
                     msgData={msgData}
                     conversationId={chatId}
                     modelId={modelId}
                     agentId={agentId}
                     score={score}
                     filter={filters}
-                    isLastMessage={index === messageList.length - 1}
                     triggerResize={triggerResize}
                     isDeveloper={isDeveloper}
                     integrateSystem={integrateSystem}

webapp/packages/chat-sdk/src/Chat/index.tsx

@@ -21,7 +21,7 @@ import MobileAgents from './MobileAgents';
 import { HistoryMsgItemType, MsgDataType, SendMsgParamsType } from '../common/type';
 import { getHistoryMsg } from '../service';
 import ShowCase from '../ShowCase';
-import { Modal } from 'antd';
+import { Drawer, Modal } from 'antd';
 
 type Props = {
   token?: string;
@@ -176,6 +176,7 @@ const Chat: ForwardRefRenderFunction<any, Props> = (
       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<any, Props> = (
           onCloseConversation={onCloseConversation}
           ref={conversationRef}
         />
-        {currentAgent && (
-          <Modal
-            title="showcase"
-            width="98%"
-            open={showCaseVisible}
-            centered
-            footer={null}
-            wrapClassName={styles.showCaseModal}
-            onCancel={() => {
-              setShowCaseVisible(false);
-            }}
-          >
-            <div className={styles.showCase}>
+        {currentAgent &&
+          (isMobile ? (
+            <Drawer
+              title="showcase"
+              placement="bottom"
+              height="95%"
+              open={showCaseVisible}
+              className={styles.showCaseDrawer}
+              destroyOnClose
+              onClose={() => {
+                setShowCaseVisible(false);
+              }}
+            >
               <ShowCase agentId={currentAgent.id} onSendMsg={onSendMsg} />
-            </div>
-          </Modal>
-        )}
+            </Drawer>
+          ) : (
+            <Modal
+              title="showcase"
+              width="98%"
+              open={showCaseVisible}
+              centered
+              footer={null}
+              wrapClassName={styles.showCaseModal}
+              destroyOnClose
+              onCancel={() => {
+                setShowCaseVisible(false);
+              }}
+            >
+              <ShowCase
+                height="calc(100vh - 140px)"
+                agentId={currentAgent.id}
+                onSendMsg={onSendMsg}
+              />
+            </Modal>
+          ))}
       </div>
       <MobileAgents
         open={mobileAgentsVisible}

webapp/packages/chat-sdk/src/Chat/style.module.less

@@ -49,7 +49,7 @@
               width: 600px;
               margin-left: 16px;
               overflow: hidden;
-              color: var(--text-color-fourth);
+              color: var(--text-color-third);
               font-size: 12px;
               white-space: nowrap;
               text-overflow: ellipsis;
@@ -79,17 +79,30 @@
 
 .showCaseModal {
   :global {
-    .ant-modal-body {
-      padding: 20px 0 !important;
+    .ant-modal-content {
+      border-radius: 8px;
+
+      .ant-modal-header {
+        border-radius: 8px 8px 0 0;
+      }
+
+      .ant-modal-body {
+        padding: 20px 0 !important;
+      }
     }
   }
 }
 
-.showCase {
-  height: calc(100vh - 140px);
-  padding: 0 20px;
-  overflow-y: auto;
-  padding-bottom: 2px;
+.showCaseDrawer {
+  :global {
+    .ant-drawer-content {
+      border-top-left-radius: 12px;
+      border-top-right-radius: 12px;
+      .ant-drawer-body {
+        padding: 4px 0 !important;
+      }
+    }
+  }
 }
 
 :global {

webapp/packages/chat-sdk/src/Chat/type.ts

@@ -1,4 +1,4 @@
-import { ChatContextType, MsgDataType, SendMsgParamsType } from "../common/type";
+import { ChatContextType, MsgDataType, ParseTimeCostType, SendMsgParamsType } from "../common/type";
 
 export enum MessageTypeEnum {
   TEXT = 'text', // 指标文本
@@ -23,6 +23,7 @@ export type MessageItem = {
   agentId?: number;
   entityId?: string;
   parseInfos?: ChatContextType[];
+  parseTimeCost?: ParseTimeCostType;
   msgData?: MsgDataType;
   quote?: string;
   score?: number;