feat: agent对话

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

@@ -8,13 +8,14 @@
 			<SvgIcon name="equal" color="#0d0d0d" size="24" />
 		</div>
 		<div class="agent-body flex-1 flex flex-col">
-			<List />
-			<Input :is-agent-mode="true" @send="handleSendMessage" />
+			<List :message-list="messageList" />
+			<Input is-agent-mode @send="handleSendMessage" />
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
+	import { ref, reactive } from 'vue'
 	import List from './List.vue'
 	import Input from '../../components/Input.vue'
 
@@ -27,8 +28,74 @@
 		}
 	)
 
+	const messageList = ref([
+		{ id: 1, text: 'Hello', isUser: true },
+		{
+			id: 2,
+			text: 'Hey, I am your design assistant FiDA. I noticed that you want to design a yellow sofa. I can help you! Tell me what else you need?'
+		},
+		{
+			id: 3,
+			text: 'Please design a vintage-inspired sofa with smooth, flowing lines and a sculptural silhouette.  The sofa features a retro aesthetic combined with elegant curves, creating a timeless and refined look.',
+			isUser: true
+		}
+	])
+
 	const handleSendMessage = (message: string) => {
 		console.log('Message sent:', message)
+		messageList.value.push({
+			id: messageList.value.length + 1,
+			text: message,
+			isUser: true
+		})
+
+		// Add AI loading message
+		const aiMessage = reactive({
+			id: messageList.value.length + 1,
+			text: '',
+			isUser: false,
+			loading: true,
+			thinking: false,
+			thinkingText: '',
+			thinkingCollapsed: false,
+			streaming: false
+		})
+		messageList.value.push(aiMessage)
+
+		// Simulate AI response
+		setTimeout(() => {
+			aiMessage.loading = false
+			aiMessage.thinking = true
+			aiMessage.thinkingText = '思考中...'
+
+			// Simulate thinking process
+			setTimeout(() => {
+				aiMessage.thinkingText = '分析用户需求：设计复古风格沙发，强调流畅线条和雕塑轮廓。'
+			}, 1000)
+
+			setTimeout(() => {
+				aiMessage.thinkingText += '\n考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素考虑颜色方案：黄色基调，结合复古元素。'
+			}, 2000)
+
+			setTimeout(() => {
+				aiMessage.thinkingText += '\n生成设计草图...'
+				aiMessage.thinking = false
+				aiMessage.streaming = true
+
+				// Simulate streaming response
+				const response = '根据您的描述，我为您设计了一个复古风格的沙发。这个沙发采用黄色皮革材质，线条流畅，轮廓雕塑感强。整体造型优雅，结合了现代舒适与复古美学。'
+				let index = 0
+				const interval = setInterval(() => {
+					if (index < response.length) {
+						aiMessage.text += response[index]
+						index++
+					} else {
+						clearInterval(interval)
+						aiMessage.streaming = false
+					}
+				}, 50)
+			}, 3000)
+		}, 1000)
 	}
 </script>