116 lines
2.6 KiB
Vue
116 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import type { ChatMessage } from '@/types/business/service'
|
|
import ChatFileCard from './ChatFileCard.vue'
|
|
|
|
interface Props {
|
|
message: ChatMessage
|
|
unread?: boolean
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), { unread: false })
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="chat-message-item"
|
|
:class="`chat-message-item--${message.role}`"
|
|
>
|
|
<span v-if="message.role === 'assistant'" class="chat-message-item__avatar">服</span>
|
|
|
|
<div class="chat-message-item__main">
|
|
<div class="chat-message-item__bubble">
|
|
<span v-if="unread" class="chat-message-item__unread">未读</span>
|
|
<ChatFileCard
|
|
v-if="message.file"
|
|
:file="message.file"
|
|
/>
|
|
<template v-else>{{ message.content }}</template>
|
|
</div>
|
|
<span class="chat-message-item__time">{{ message.time }}</span>
|
|
</div>
|
|
|
|
<span v-if="message.role === 'user'" class="chat-message-item__avatar chat-message-item__avatar--user">我</span>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.chat-message-item {
|
|
.flex(row, flex-start, flex-start);
|
|
gap: @spacing-base;
|
|
|
|
&__avatar {
|
|
flex-shrink: 0;
|
|
.flex(row, center);
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: @radius-round;
|
|
background: @primary-strong;
|
|
color: @white;
|
|
font-size: @font-size-sm;
|
|
font-weight: 500;
|
|
|
|
&--user {
|
|
background: @service-user-avatar;
|
|
}
|
|
}
|
|
|
|
&__main {
|
|
.flex(column, flex-start, flex-start);
|
|
gap: @spacing-xs;
|
|
max-width: min(480px, 70%);
|
|
}
|
|
|
|
&__bubble {
|
|
position: relative;
|
|
padding: @spacing-base;
|
|
border-radius: @radius-base @radius-base @radius-base @radius-sm;
|
|
background: @white;
|
|
border: 1px solid @border-color;
|
|
color: @service-bubble-text;
|
|
font-size: @font-size-sm;
|
|
line-height: 1.7;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
box-shadow: @shadow-base;
|
|
}
|
|
|
|
&__bubble:has(.chat-file-card) {
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
&__time {
|
|
font-size: @font-size-xs;
|
|
line-height: 1.4;
|
|
color: @text-color-secondary;
|
|
}
|
|
|
|
&__unread {
|
|
position: absolute;
|
|
top: calc(100% + @spacing-xs);
|
|
left: 0;
|
|
color: @text-color-secondary;
|
|
font-size: @font-size-xs;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
&--user {
|
|
.flex(row, flex-end, flex-start);
|
|
|
|
.chat-message-item__main {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.chat-message-item__bubble {
|
|
border: none;
|
|
border-radius: @radius-base @radius-base @radius-sm @radius-base;
|
|
background: @primary-strong;
|
|
color: @white;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|