From 1231af671ea98557b5bc12613349baee7e80bef0 Mon Sep 17 00:00:00 2001
From: lijianxiong <1518062161@qq.com>
Date: Tue, 7 May 2024 20:23:36 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=9B=B4=E6=96=B0AI=E5=AF=B9?=
 =?UTF-8?q?=E8=AF=9Dloading=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../markdown-message/markdown-message.scss    | 29 +++++++++++++++++++
 .../markdown-message/markdown-message.tsx     |  2 +-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/components/chat-message-item/markdown-message/markdown-message.scss b/src/components/chat-message-item/markdown-message/markdown-message.scss
index f569227..884f31a 100644
--- a/src/components/chat-message-item/markdown-message/markdown-message.scss
+++ b/src/components/chat-message-item/markdown-message/markdown-message.scss
@@ -14,6 +14,25 @@
   .anchor {
     display: none !important;
   }
+
+  @include when(loading) {
+    @include b(markdown-message-header) {
+      @include e(caption) {
+        font-size: 0;
+
+        &::after {
+          display: block;
+          width: 11px;
+          height: 11px;
+          content: '';
+          border: 3px solid #3b3b3b;
+          border-top-color: transparent;
+          border-radius: 100%;
+          animation: circle infinite 0.75s linear;
+        }
+      }
+    }
+  }
 }
 
 @include b(markdown-message-header) {
@@ -65,3 +84,13 @@
   display: flex;
   align-items: center;
 }
+
+@keyframes circle {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/chat-message-item/markdown-message/markdown-message.tsx b/src/components/chat-message-item/markdown-message/markdown-message.tsx
index 4d3a94d..4011298 100644
--- a/src/components/chat-message-item/markdown-message/markdown-message.tsx
+++ b/src/components/chat-message-item/markdown-message/markdown-message.tsx
@@ -69,7 +69,7 @@ export const MarkdownMessage = (props: MarkdownMessageProps) => {
   };
 
   return (
-    <div className={ns.b()}>
+    <div className={`${ns.b()} ${ns.is('loading', message.state === 20)}`}>
       <div className={ns.b('header')}>
         <div className={ns.be('header', 'caption')}>AI </div>
         <div className={ns.b('header-action-wrapper')}>
-- 
Gitee