<template>
|
<div class="flex px-4 py-6 rounded-lg relative flex-row-reverse" :key="`${msg.historyId}_${msg.role}`">
|
<img class="rounded-full size-12 flex-0 ml-4" :src="roleImageMap[msg.role]" alt="" srcset="" />
|
<div class="flex-auto flex justify-end">
|
<div class="inline-flex flex-col">
|
<div class="rounded-[6px] p-4 leading-relaxed group" :style="{ backgroundColor: 'rgb(197 224 255)' }">
|
<!-- #region ====================== 用户操作按钮 ======================-->
|
<div v-if="msg.content?.values && !isSharePage" class="absolute flex items-center bottom-0 group invisible">
|
<div class="bg-[#fff] flex items-center relative mr-4 space-x-2 flex-nowrap rounded-[6px] py-2 px-2 group-hover:visible">
|
<el-tooltip effect="dark" content="复制" placement="top">
|
<div class="flex items-center justify-center size-[20px]">
|
<i
|
class="p-2 ywifont ywicon-copy cursor-pointer hover:text-[#0284ff] font-medium !text-[15px] hover:!text-[18px]"
|
@click="copyUserClick(msg)"
|
/>
|
</div>
|
</el-tooltip>
|
<el-tooltip effect="dark" content="设为常用语" placement="top">
|
<div class="flex items-center justify-center size-[20px]">
|
<i
|
class="p-2 ywifont ywicon-cubelifangti cursor-pointer hover:text-[#0284ff] text-[#000] font-[590] !text-[15px] hover:!text-[18px]"
|
@click="setCommonQuestionClick(msg)"
|
/>
|
</div>
|
</el-tooltip>
|
<el-tooltip effect="dark" content="分享" placement="top">
|
<div class="flex items-center justify-center size-[15px]">
|
<i
|
:class="{ 'text-[#0284ff]': msg.state === AnswerState.Unlike }"
|
class="p-2 ywifont ywicon-fenxiang cursor-pointer hover:text-[#0284ff] !text-[15px] hover:!text-[18px]"
|
@click="shareClick(msg)"
|
/>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
|
<!-- #endregion -->
|
<!-- #region ====================== 消息内容 ======================-->
|
<template v-if="msg.content?.values">
|
<!-- #region ====================== 回答组件 ======================-->
|
<component
|
:conclusion="msg.conclusion"
|
:is="answerTypeMapCom[msg.content.type]"
|
:data="msg.content.values"
|
:originData="msg"
|
/>
|
|
<!-- #endregion -->
|
</template>
|
|
<!-- #endregion -->
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts" name="UserMsg">
|
import { AnswerState, answerTypeMapCom, roleImageMap, type ChatMessage } from '../model/types';
|
import { isSharePage } from '/@/stores/chatRoom';
|
|
const emit = defineEmits<{
|
(event: 'copyMsg', msgObj: ChatMessage): void;
|
(event: 'shareClick', msgObj: ChatMessage): void;
|
(event: 'setCommonQuestion', msgObj: ChatMessage): void;
|
}>();
|
const props = defineProps({
|
/** @description 当前消息 */
|
msg: {
|
type: Object,
|
},
|
});
|
|
//用户复制问题
|
const copyUserClick = (item) => {
|
emit('copyMsg', item);
|
};
|
//用户问题设置为常用语
|
const setCommonQuestionClick = (item) => {
|
emit('setCommonQuestion', item);
|
};
|
|
const shareClick = (msg) => {
|
emit('shareClick', msg);
|
};
|
</script>
|
<style scoped lang="scss"></style>
|
