56 lines
2.1 KiB
Vue
56 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { Bot } from "@lucide/vue";
|
|
import MarkdownIt from "markdown-it";
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps<{
|
|
messageId: string;
|
|
role: "user" | "assistant";
|
|
content: string;
|
|
createdAt: string;
|
|
streaming?: boolean;
|
|
}>();
|
|
|
|
const markdown = new MarkdownIt({ breaks: true, html: false, linkify: true });
|
|
|
|
const answer = computed(() => {
|
|
if (props.role === "user") return props.content;
|
|
// 部分模型会产生嵌套 think 标签，使用贪婪匹配移除完整思考区，再清理流式残留标签。
|
|
let content = props.content.replace(/<think>[\s\S]*<\/think>/gi, "");
|
|
content = content.replace(/<think>[\s\S]*$/i, "");
|
|
content = content.replace(/<\/?think>/gi, "");
|
|
return content.trim();
|
|
});
|
|
|
|
const renderedContent = computed(() =>
|
|
props.role === "assistant" ? markdown.render(answer.value) : answer.value,
|
|
);
|
|
|
|
const displayTime = computed(() => {
|
|
// 消息服务返回的是 UTC 无时区字符串，补齐时区后再按用户本地时间展示。
|
|
const normalized = /(?:Z|[+-]\d{2}:?\d{2})$/i.test(props.createdAt) ? props.createdAt : `${props.createdAt}Z`;
|
|
const date = new Date(normalized);
|
|
if (Number.isNaN(date.getTime())) return "";
|
|
return new Intl.DateTimeFormat("zh-CN", { hour: "2-digit", minute: "2-digit", hour12: false }).format(date);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<article class="chat-message" :class="role" :data-message-id="messageId">
|
|
<div v-if="role === 'assistant'" class="assistant-icon" aria-hidden="true">
|
|
<Bot :size="19" />
|
|
</div>
|
|
<div class="message-bubble">
|
|
<template v-if="role === 'assistant'">
|
|
<div v-if="renderedContent" class="message-content markdown-content" v-html="renderedContent"></div>
|
|
<div v-if="streaming && !renderedContent" class="generation-state">
|
|
<span></span><span></span><span></span>
|
|
正在生成回答...
|
|
</div>
|
|
</template>
|
|
<div v-else class="message-content">{{ renderedContent }}</div>
|
|
<time v-if="displayTime" :datetime="createdAt">{{ displayTime }}</time>
|
|
</div>
|
|
</article>
|
|
</template>
|