<template>
	<div class="list-wrapper flex flex-col">
		<div class="greeting list-item flex">
			<div class="thumb">
				<img src="@/assets/images/assistant-head.png" class="assistant-head" />
			</div>
			<div class="list-item-content-text">
				{{ $t('Assistant.greeting') }}
			</div>
		</div>
		<div
			class="list-item flex"
			v-for="(item, index) in props.messageList"
			:key="item.id"
			:class="item.role"
		>
			<div class="thumb">
				<img
					v-show="index > 0"
					src="@/assets/images/assistant-head.png"
					class="assistant-head"
				/>
			</div>
			<div class="list-item-content-text">
				<VueMarkdown
					:custom-attrs="customAttrs"
					:markdown="item.content"
					:rehype-plugins="[rehypeRaw]"
				/>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
	import { VueMarkdown } from '@crazydos/vue-markdown'
	import type { CustomAttrs } from '@crazydos/vue-markdown'
	import rehypeRaw from 'rehype-raw'
	const customAttrs: CustomAttrs = {
		img: {
			style: 'max-width: 100%;'
		},
		a: (node, combinedAttrs) => {
			if (typeof node.properties.href === 'string') {
				return { target: '_blank', rel: 'noopener noreferrer' }
			} else {
				return {}
			}
		},
		heading: {
			style: {
				fontFamily: 'SemiBold',
				lineHeight: 2
				// fontSize: '1.4rem'
			}
		},
		p: {
			style: {
				fontSize: '1.2rem',
				lineHeight: 1.5
			}
		}
	}

	const props = defineProps<{
		messageList: Array<any>
	}>()
</script>
<style lang="less" scoped>
	.list-wrapper {
		row-gap: 1.2rem;
		.list-item {
			column-gap: 1rem;
			white-space: pre-line;
			&.greeting {
				color: #d58c4d;
				font-family: 'Regular';
			}
			.thumb {
				width: 4rem;
				height: 4rem;
				flex-shrink: 0;
				.assistant-head {
					width: 100%;
					height: 100%;
				}
			}
			.list-item-content-text {
				min-height: 3.86rem;
				width: fit-content;
				// &.user {
				// 	width: 26.2rem;
				// 	align-self: end;
				// }
				font-size: 1.2rem;
				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: 0.8rem;
			}
		}
	}
</style>
