feat: 对话加载中动画

src/views/home/agent/components/Item.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="agent-item">
-		<div class="message-wrapper flex" :class="{ 'is-user': content.isUser }">
+		<div class="message-wrapper flex" :class="{ 'is-user': content.isUser,'is-loading': content.loading }">
 			<div class="thumb">
 				<img :src="content.isUser ? userThumb : agentThumb" class="thumb-icon" />
 			</div>
@@ -8,7 +8,7 @@
 				class="message-context"
 				v-show="!content.loading && !content.thinking && !content.streaming"
 			>
-				<div class="img-list flex">
+				<div class="img-list flex" v-if="imageList.length > 0">
 					<img
 						v-for="(item, index) in imageList"
 						:key="'img-' + index"
@@ -35,8 +35,8 @@
 					</template>
 				</div>
 			</div>
-			<div class="message-context" v-show="content.loading">
-				<div class="generating">Generating...</div>
+			<div class="message-context loading" v-show="content.loading">
+				<img src="@/assets/images/generate-loading.gif" alt="loading" class="loading-gif" />
 			</div>
 			<div class="message-context" v-show="content.thinking">
 				<div class="thinking">
@@ -166,6 +166,9 @@
 				flex-direction: row-reverse;
 				column-gap: 1.3rem;
 			}
+			&.is-loading {
+				align-items: center;
+			}
 
 			.thumb {
 				flex-shrink: 0;
@@ -203,15 +206,8 @@
 		}
 	}
 
-	.generating {
-		font-family: 'GeneralBold';
-		font-weight: 600;
-		font-size: 1.55rem;
-		background: linear-gradient(45deg, #f2ab4a, #ff6b75, #fe3b55);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-clip: text;
-		text-fill-color: transparent;
+	.loading-gif {
+		width: 13.7rem;
 	}
 
 	.thinking {