feat： 小象助手

src/components/Assistant/assistant.vue

@@ -1,6 +1,27 @@
 <template>
-	<div class="assistant-container flex flex-col space-between" ref="containerRef">
-		<div class="assistant-header flex space-between align-center" @mousedown="handleMouseDown">
+	<div
+		class="trigger flex flex-center"
+		:class="{ 'has-unread': hasUnread }"
+		ref="triggerRef"
+		@mousedown="handleTriggerMouseDown"
+		@click="handleTriggerClick"
+	>
+		<img
+			src="@/assets/images/assistant-trigger.png"
+			class="trigger-icon"
+			alt=""
+			@dragstart.prevent
+		/>
+	</div>
+	<div
+		v-show="showAssistant"
+		class="assistant-container flex flex-col space-between"
+		ref="containerRef"
+	>
+		<div
+			class="assistant-header flex space-between align-center"
+			@mousedown="handleContainerMouseDown"
+		>
 			<div class="assistant-header-title">AI Assistant</div>
 			<SvgIcon name="canvas-assistant-menu" class="menu-icon" color="#D58C4D" />
 		</div>
@@ -11,74 +32,106 @@
 			<el-input v-model="inputMessage" :placeholder="$t('assistant.inputPlaceholder')" />
 			<div class="sender-btn flex flex-center" @click="handleSendAgent">
 				<img src="@/assets/images/sender.png" class="sender-icon" />
-				<!-- <div  class="sender-pause" /> -->
 			</div>
 		</div>
 	</div>
 </template>
+
 <script setup lang="ts">
-	import { ref } from 'vue'
+	import { ref, onMounted, watch } from 'vue'
 	import List from './component/List.vue'
 	import { useDraggable } from './component/useDraggable'
+	import MyEvent from '@/utils/myEvent'
+
+	interface Message {
+		nodeType: string
+		content: string
+	}
 
 	const inputMessage = ref('')
 	const containerRef = ref<HTMLElement>()
+	const triggerRef = ref<HTMLElement>()
 
-	// 使用拖拽 hook
-	const { handleMouseDown } = useDraggable(containerRef)
+	const { handleMouseDown: handleContainerMouseDown } = useDraggable(containerRef)
+	const {
+		handleMouseDown: handleTriggerMouseDown,
+		consumeClickSuppression: consumeTriggerClickSuppression
+	} = useDraggable(triggerRef, {
+		boundary: 'parent'
+	})
 
-	const messageList = ref([
-		{
-			content: 'Hi! How can I help you, today?',
-			id: 1,
-			role: 'assistant'
-		},
-		{
-			content: 'Please recommend some .',
-			id: 2,
-			role: 'user'
-		},
-		{
-			content: 'I noticed that you inputed a new sketch.',
-			id: 3,
-			role: 'system',
-			type: 'info'
-		},
-		{
-			content: 'Hi! How can I help you, today?',
-			id: 4,
-			role: 'assistant'
-		},
-		{
-			content: 'Please recommend some .',
-			id: 5,
-			role: 'user'
-		},
-		{
-			content: 'I noticed that you inputed a new sketch.',
-			id: 36,
-			role: 'system',
-			type: 'info'
-		},
-		{
-			content: 'Hi! How can I help you, today?',
-			id: 31,
-			role: 'assistant'
-		},
-		{
-			content: 'Please recommend some .',
-			id: 22,
-			role: 'user'
-		},
-		{
-			content: 'I noticed that you inputed a new sketch.',
-			id: 63,
-			role: 'system',
-			type: 'info'
+	const showAssistant = ref(false)
+
+	const handleTriggerClick = () => {
+		if (consumeTriggerClickSuppression()) {
+			return
 		}
-	])
+		showAssistant.value = !showAssistant.value
+	}
+
+	const messageList = ref<Message[]>([])
+	const hasUnread = ref(false)
+	watch(
+		() => showAssistant.value,
+		(newVal) => {
+			if (newVal) {
+				hasUnread.value = false
+			}
+		}
+	)
+
+	const listenAssistantPushChat = (message: Message) => {
+		// console.log('有新消息--');
+
+		const exist = messageList.value.find((item: Message) => item.nodeType === message.nodeType)
+		if (!exist) {
+			messageList.value.push(message)
+			hasUnread.value = true
+		}
+	}
+
+	onMounted(() => {
+		MyEvent.add('assistantPushChat', listenAssistantPushChat)
+	})
 </script>
+
 <style lang="less" scoped>
+	.trigger {
+		position: absolute;
+		right: 0;
+		width: 5rem;
+		height: 5rem;
+		bottom: 50%;
+		background-color: #fff;
+		border-radius: 50%;
+		cursor: grab;
+		user-select: none;
+		box-shadow: 0px 13.86px 19.43px 0px #0000000d;
+		border: 0.18rem solid #ebebeb;
+
+		&:active {
+			cursor: grabbing;
+		}
+		&.has-unread {
+			&::after {
+				content: '';
+				position: absolute;
+				top: 0.5rem;
+				right: 0.4rem;
+				width: 0.6rem;
+				height: 0.6rem;
+				background-color: #ff4747;
+				border-radius: 50%;
+			}
+		}
+
+		.trigger-icon {
+			width: 2.7rem;
+			height: 2.7rem;
+			pointer-events: none;
+		}
+	}
+
 	.assistant-container {
 		position: absolute;
 		right: 6.2rem;
@@ -95,6 +148,7 @@
 			rgba(255, 207, 144, 0.3) 101.01%
 		);
 		border-radius: 1.69rem;
+
 		.assistant-header {
 			height: 5.66rem;
 			font-family: 'Regular';
@@ -109,17 +163,21 @@
 			border-top-right-radius: 1.69rem;
 			user-select: none;
 			cursor: grabbing;
+
 			&:active {
 				cursor: grabbing;
 			}
+
 			.menu-icon {
 				width: 1.8rem;
 			}
 		}
+
 		.assistant-body {
 			margin: 1.6rem 0 2.9rem;
 			padding: 0 1.95rem 0 2.5rem;
 			overflow-y: auto;
+
 			&::-webkit-scrollbar {
 				width: 0;
 				display: none;
@@ -131,11 +189,13 @@
 				display: none;
 			}
 		}
+
 		.assistant-input {
 			border: 1px solid #0000001a;
 			margin: 0 2rem 3rem;
 			border-radius: 3.53rem;
 			padding: 0 1rem 0 1.7rem;
+
 			.el-input {
 				:deep(.el-input__wrapper) {
 					background-color: transparent;
@@ -143,6 +203,7 @@
 					padding: 0;
 				}
 			}
+
 			.sender-btn {
 				width: 2.2rem;
 				height: 2.2rem;
@@ -154,6 +215,7 @@
 					width: 0.9rem;
 					height: 0.9rem;
 				}
+
 				.sender-pause {
 					width: 1rem;
 					height: 1rem;