(feature)(chat-sdk) add time display above card (#1667)

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

@@ -256,6 +256,7 @@ export type SimilarQuestionType = {
 };
 
 export type ParseTimeCostType = {
+  parseStartTime: number;
   parseTime: number;
   sqlTime: number;
 };

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

@@ -21,6 +21,7 @@ import Tools from '../Tools';
 import SqlItem from './SqlItem';
 import SimilarQuestionItem from './SimilarQuestionItem';
 import dayjs, { Dayjs } from 'dayjs';
+
 type Props = {
   msg: string;
   conversationId?: number;
@@ -326,6 +327,11 @@ const ChatItem: React.FC<Props> = ({
     <div className={prefixCls}>
       {!isMobile && <IconFont type="icon-zhinengsuanfa" className={`${prefixCls}-avatar`} />}
       <div className={isMobile ? `${prefixCls}-mobile-msg-card` : ''}>
+        <div className={`${prefixCls}-time`}>
+          {parseTimeCost?.parseStartTime
+            ? dayjs(parseTimeCost.parseStartTime).format('M月D日 HH:mm')
+            : ''}
+        </div>
         <div className={contentClass}>
           <ParseTip
             isSimpleMode={isSimpleMode}

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

@@ -6,6 +6,7 @@
 @similar-questions-prefix-cls: ~'@{supersonic-chat-prefix}-similar-questions';
 
 .@{chat-item-prefix-cls} {
+  position: relative;
   display: flex;
   width: 100%;
 
@@ -93,6 +94,12 @@
     background-color: #fff;
   }
 
+  &-time {
+    position: absolute;
+    top: -22px;
+    color: var(--text-color-fourth);
+  }
+
   &-mobile-msg-card {
     width: 100%;
   }