110 lines
2.2 KiB
Vue
110 lines
2.2 KiB
Vue
<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: '1rem',
|
|
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;
|
|
.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.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: 0.8rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|