78 lines
2.0 KiB
Vue
78 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import type {PropType} from "vue";
|
|
import type {ChatMessage} from "~/components/aigc/chat/index";
|
|
|
|
const props = defineProps({
|
|
message: {
|
|
type: Object as PropType<ChatMessage>,
|
|
required: true,
|
|
}
|
|
})
|
|
|
|
const dayjs = useDayjs()
|
|
|
|
const message_place_end = computed(() => props.message?.role !== 'assistant')
|
|
const message_avatar = computed(() => {
|
|
switch (props.message?.role) {
|
|
case 'user':
|
|
return 'i-fluent-emoji-slightly-smiling-face'
|
|
case 'assistant':
|
|
return 'i-fluent-emoji-robot'
|
|
case 'system':
|
|
return 'i-fluent-emoji-receipt'
|
|
}
|
|
})
|
|
const message_background = computed(() => {
|
|
switch (props.message?.role) {
|
|
case 'user':
|
|
return 'bg-primary-100 dark:bg-primary-800'
|
|
case 'assistant':
|
|
case 'system':
|
|
return 'bg-neutral-100 dark:bg-neutral-800'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="chat" :class="{'justify-end': message_place_end}">
|
|
<div class="chat-inside" :class="{'items-end': message_place_end}">
|
|
<div class="chat-inside-avatar">
|
|
<Icon :name="message_avatar" class="text-lg"/>
|
|
</div>
|
|
<div class="flex flex-col" :class="{'items-end': message_place_end}">
|
|
<div class="chat-inside-content" :class="message_background">
|
|
{{ message.content }}
|
|
</div>
|
|
<div class="chat-inside-extra">
|
|
{{ dayjs(message.create_at * 1000).format('YYYY-MM-DD HH:mm:ss') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.chat {
|
|
@apply w-full flex;
|
|
|
|
&-inside {
|
|
@apply w-fit flex flex-col gap-2;
|
|
@apply md:max-w-[80%];
|
|
|
|
&-avatar {
|
|
@apply w-8 h-8 flex justify-center items-center rounded-xl;
|
|
@apply bg-white border shadow-card;
|
|
@apply dark:bg-neutral-800 dark:border-neutral-700;
|
|
}
|
|
|
|
&-content {
|
|
@apply px-2 py-2.5 rounded-xl text-sm w-fit;
|
|
@apply border dark:border-neutral-700;
|
|
}
|
|
|
|
&-extra {
|
|
@apply px-1 text-xs text-neutral-300 dark:text-neutral-700;
|
|
}
|
|
}
|
|
}
|
|
</style> |