<template>
	<div class="agent-list flex flex-col flex-1">
		<Item v-for="message in messageList" :key="message.id" :content="message" />
	</div>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import Item from './Item.vue'

	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
		}
	])
</script>

<style lang="less" scoped>
	.agent-list {
		row-gap: 3.2rem;
	}
</style>
