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

<template>
	<div class="agent-container flex flex-col">
		<div class="agent-header flex align-center space-between">
			<div class="header-title-wrapper">
				<div class="agent-title">{{ props.title }}</div>
				<div class="agent-name">AI Assistant 1.0</div>
			</div>
			<SvgIcon name="equal" color="#0d0d0d" size="24" />
		</div>
		<div class="agent-body flex-1 flex flex-col">
			<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'

	const props = withDefaults(
		defineProps<{
			title: string
		}>(),
		{
			title: 'Retro Sofa Sketch'
		}
	)

	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>

<style lang="less" scoped>
	.c-svg {
		width: initial;
	}
	.agent-container {
		// width: 39%;
		width: 63.4rem;
		background-color: #fff;
		border-radius: 2rem;
		box-shadow: 0px 15px 21px 0px #0000000d;

		.agent-header {
			height: 7.4rem;
			border-bottom: 0.1rem solid #c9c9c9;
			font-family: 'GeneralMedium';
			padding: 1.4rem 3.4rem 1.4rem 3.1rem;

			.agent-title {
				font-size: 1.8rem;
				margin-bottom: 0.6rem;
			}

			.agent-name {
				font-size: 1.4rem;
			}
		}
		.agent-body {
			padding: 3.2rem;
			.assist-input-wrapper {
				width: 100%;
				height: 14.4rem;
				min-height: 14.4rem !important;
				max-height: 14.4rem !important;
			}
		}
		.input-wrapper {
			height: 14.4rem;
			padding: 0 2rem 3rem;
		}
	}
</style>