128 lines
2.5 KiB
Vue
128 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<div class="agent-item">
|
||
|
|
<div class="message-wrapper flex align-center" :class="{ 'is-user': content.isUser }">
|
||
|
|
<div class="thumb">
|
||
|
|
<img :src="content.isUser ? userThumb : agentThumb" class="thumb-icon" />
|
||
|
|
</div>
|
||
|
|
<div class="message-context">
|
||
|
|
<div class="message-txt">{{ content.text }}</div>
|
||
|
|
<div class="operate flex" :class="{ 'is-user': content.isUser }">
|
||
|
|
<template v-if="content.isUser">
|
||
|
|
<SvgIcon name="copy" size="16" color="#000" @click.stop="handleCopyText" />
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<SvgIcon
|
||
|
|
v-for="operate in operateList"
|
||
|
|
:key="operate.name"
|
||
|
|
:name="operate.name"
|
||
|
|
:size="operate.name === 'refreshTransparent' ? '14' : '16'"
|
||
|
|
color="#000000A6"
|
||
|
|
@click.stop="operate.action"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { useI18n } from 'vue-i18n'
|
||
|
|
import userThumb from '@/assets/images/user-thumb.jpg'
|
||
|
|
import agentThumb from '@/assets/images/agent-thumb.jpg'
|
||
|
|
|
||
|
|
const { t } = useI18n()
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
content: Object
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const operateList = ref([
|
||
|
|
{
|
||
|
|
name: 'thumbUp',
|
||
|
|
action: () => {
|
||
|
|
console.log('thumbUp')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'thumbDown',
|
||
|
|
action: () => {
|
||
|
|
console.log('thumbDown')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'refreshTransparent',
|
||
|
|
action: () => {
|
||
|
|
console.log('refresh')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'copy',
|
||
|
|
action: () => {
|
||
|
|
handleCopyText()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
])
|
||
|
|
|
||
|
|
const handleCopyText = () => {
|
||
|
|
navigator.clipboard
|
||
|
|
.writeText(props.content.text)
|
||
|
|
.then(() => {
|
||
|
|
// console.log('Text copied to clipboard');
|
||
|
|
ElMessage({
|
||
|
|
message: t('agent.copySuccess'),
|
||
|
|
type: 'success',
|
||
|
|
offset: 300
|
||
|
|
})
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
console.error('Could not copy text: ', err)
|
||
|
|
ElMessage({
|
||
|
|
message: t('agent.copyFailed'),
|
||
|
|
type: 'error',
|
||
|
|
offset: 300
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.c-svg {
|
||
|
|
width: initial;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.agent-item {
|
||
|
|
font-family: 'Regular';
|
||
|
|
font-size: 1.4rem;
|
||
|
|
.message-wrapper {
|
||
|
|
column-gap: 0.9rem;
|
||
|
|
&.is-user {
|
||
|
|
text-align: right;
|
||
|
|
flex-direction: row-reverse;
|
||
|
|
column-gap: 1.3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.thumb {
|
||
|
|
flex-shrink: 0;
|
||
|
|
width: 4.4rem;
|
||
|
|
height: 4.4rem;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: 0.1rem solid #e5dfdf;
|
||
|
|
.thumb-icon {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.operate {
|
||
|
|
margin-top: 1.3rem;
|
||
|
|
column-gap: 1.2rem;
|
||
|
|
&.is-user {
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|