<template>
	<div class="agent-list flex flex-col flex-1" ref="listContainer">
		<Item
			v-for="(message, index) in messageList"
			:key="message.id + index"
			:content="message"
			:is-last="index === messageList.length - 1"
			@regenerate="$emit('regenerate', message)"
		/>
	</div>
</template>

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

	const props = defineProps<{
		messageList: Array<any>
	}>()

	const emit = defineEmits(['regenerate'])

	const listContainer = ref<HTMLDivElement>()

	const scrollToBottom = () => {
		nextTick(() => {
			if (listContainer.value) {
				listContainer.value.scrollTop = listContainer.value.scrollHeight
			}
		})
	}

	watch(
		() => props.messageList,
		(val) => {
			scrollToBottom()
		},
		{ deep: true }
	)

	defineExpose({ scrollToBottom })
</script>

<style lang="less" scoped>
	.agent-list {
		row-gap: 3.2rem;
		overflow-y: auto;
		// 隐藏滚动条
		&::-webkit-scrollbar {
			display: none;
		}
	}
</style>
