feat: 停止生成

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

@@ -434,6 +434,7 @@
 		isPaused.value = true
 		isGenerating.value = false
 		abort?.abort()
+		MyEvent.emit('stopChat')
 	}
 
 	const handleRegenerate = async (aiMessage: any) => {

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

@@ -73,6 +73,7 @@
 						<span>{{ content.webAddress?.length }} web pages have been retrieved.</span>
 					</div>
 				</div>
+				<Pause v-show="showStop && isLast" />
 				<div
 					v-show="!content.streaming"
 					class="operate flex"
@@ -108,14 +109,15 @@
 </template>
 
 <script setup lang="ts">
-	import { ref, onMounted, computed, watch } from 'vue'
+	import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 	import { useI18n } from 'vue-i18n'
-	import gsap from 'gsap'
 	import userThumb from '@/assets/images/user-thumb.jpg'
 	import agentThumb from '@/assets/images/agent-thumb.png'
 	import Card from './ReportCard.vue'
 	import Url from './UrlCard.vue'
 	import Sketch from './SketchCard.vue'
+	import Pause from './Pause.vue'
+	import gsap from 'gsap'
 	import { VueMarkdown } from '@crazydos/vue-markdown'
 	import type { CustomAttrs } from '@crazydos/vue-markdown'
 	import rehypeRaw from 'rehype-raw'
@@ -269,6 +271,21 @@
 	const handleClickSketch = () => {
 		MyEvent.emit('openSketch')
 	}
+
+	const showStop = ref(false)
+	const handleStopChat = () => {
+		if (props.isLast) {
+			showStop.value = true
+		}
+
+		// props.content.loading = false
+	}
+	onMounted(() => {
+		MyEvent.add('stopChat', handleStopChat)
+	})
+	onUnmounted(() => {
+		MyEvent.remove('stopChat', handleStopChat)
+	})
 </script>
 
 <style lang="less" scoped>

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

@@ -0,0 +1,51 @@
+<template>
+	<div class="pause-container flex align-center">
+		<SvgIcon name="exclamation" size="12" color="#FF7A51" />
+		<span>Task has been stopped.</span>
+	</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped>
+	.pause-container {
+		position: relative;
+		width: 100%;
+		height: 3.6rem;
+		line-height: 3.6rem;
+    column-gap: 0.6rem;
+    padding: 0 1.2rem;
+		background-color: #fffcf4;
+    border-radius: 0.4rem;
+    margin-top: 1rem;
+
+		&::before {
+			content: '';
+			position: absolute;
+			inset: 0;
+			border-radius: inherit;
+			padding: 0.1rem;
+			background: linear-gradient(
+				119.03deg,
+				rgba(233, 121, 60, 0.3) 1.61%,
+				rgba(255, 207, 144, 0.3) 101.01%
+			);
+			-webkit-mask:
+				linear-gradient(#fff 0 0) content-box,
+				linear-gradient(#fff 0 0);
+			mask:
+				linear-gradient(#fff 0 0) content-box,
+				linear-gradient(#fff 0 0);
+			-webkit-mask-composite: xor;
+			mask-composite: exclude;
+		}
+
+    .c-svg{
+      width: initial;
+      .svg-icon{
+        width: 1.2rem;
+        height: 1.2rem;
+      }
+    }
+	}
+</style>