Merge branch 'main' of http://18.167.251.121:10003/aidlab/FiDA_Front

src/assets/icons/exclamation.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.4 6C5.4 6.33137 5.66863 6.6 6 6.6C6.33137 6.6 6.6 6.33137 6.6 6V3.6C6.6 3.26863 6.33137 3 6 3C5.66863 3 5.4 3.26863 5.4 3.6V6Z" fill="#FF7A51"/>
+<path d="M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12ZM10.8 6C10.8 8.65097 8.65097 10.8 6 10.8C3.34903 10.8 1.2 8.65097 1.2 6C1.2 3.34903 3.34903 1.2 6 1.2C8.65097 1.2 10.8 3.34903 10.8 6Z" fill="#FF7A51"/>
+<path d="M6 7.61997C5.61892 7.61997 5.31 7.92889 5.31 8.30997C5.31 8.69105 5.61892 8.99997 6 8.99997C6.38108 8.99997 6.69 8.69105 6.69 8.30997C6.69 7.92889 6.38108 7.61997 6 7.61997Z" fill="currentColor"/>
+</svg>

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>