<template>
	<div class="list-wrapper flex flex-col">
		<div
			class="list-item flex align-center"
			v-for="item in props.messageList"
			:key="item.id"
			:class="item.role"
		>
			<div class="list-item-content-text">{{ item.content }}</div>
		</div>
	</div>
</template>
<script setup lang="ts">
	const props = defineProps<{
		messageList: Array<any>
	}>()
</script>
<style lang="less" scoped>
	.list-wrapper {
    row-gap: 1.6rem;
		.list-item {
			min-height: 3.86rem;
			width: fit-content;
			&.user {
				width: 26.2rem;
				align-self: end;
			}
			font-size: 1.4rem;
			font-family: 'Regular';
			color: #333;
			padding: 1.1rem 1.7rem;
			background: linear-gradient(#fffcf4, #fffcf4) padding-box,
				linear-gradient(
						119.03deg,
						rgba(233, 121, 60, 0.3) 1.61%,
						rgba(255, 207, 144, 0.3) 101.01%
					)
					border-box;
			border: 1px solid transparent;
			border-radius: 3.18rem;
		}
	}
</style>
