130 lines
3.1 KiB
Vue
130 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import type { PropType } from 'vue'
|
|
import type { ChatMessage } from '~/typings/llm'
|
|
import MessageResponding from '~/components/Icon/MessageResponding.vue'
|
|
|
|
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(() => {
|
|
if (props.message?.interrupted) {
|
|
return 'bg-red-200/50 dark:bg-red-800/20 border-red-300 dark:!border-red-500/50'
|
|
}
|
|
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 }"
|
|
>
|
|
<Transition
|
|
mode="out-in"
|
|
name="message-content-change"
|
|
>
|
|
<div
|
|
class="chat-inside-content relative"
|
|
:class="message_background"
|
|
:key="message.content"
|
|
>
|
|
<div v-if="message.content">
|
|
<!-- TODO: 生成结果的代码添加复制按钮 -->
|
|
<Markdown :source="message.content" />
|
|
</div>
|
|
<span v-else>
|
|
<MessageResponding
|
|
class="text-xl text-neutral-500 dark:text-neutral-300 mx-2"
|
|
/>
|
|
</span>
|
|
</div>
|
|
</Transition>
|
|
<div
|
|
v-if="message.preset"
|
|
class="chat-inside-extra"
|
|
>
|
|
预设消息
|
|
</div>
|
|
<div
|
|
v-else-if="message.create_at"
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.message-content-change-enter-active,
|
|
.message-content-change-leave-active {
|
|
@apply transition-all duration-300 overflow-hidden;
|
|
}
|
|
|
|
.message-content-change-enter-from {
|
|
@apply opacity-0 translate-y-4;
|
|
}
|
|
</style>
|